/*
 * KAIZEN FARM / サービス紹介 Hero Section（2026-08-04版：#0dacb5基調）
 *
 * 背景は knowledge と共通です（assets/css の背景ブロックは両者で同一）。
 * ・基調色 #0dacb5。中央付近から右へほんの少しずつ明るくなります。
 * ・白文字が乗る側（PCは左／スマホは上）は、白文字とのコントラストが
 *   WCAG AA（4.5:1）を満たすまで同系色で沈ませています。
 * ・背景の円形のうち3つ（円1・円2・円5）は #fff600 の不透過。
 *   太さ・点線／実線の表現はオリジナルのまま維持し、位置のみ
 *   左側テキストを避けるように移動しています。
 *
 * Namespaced with .kf-hero to minimize conflicts with an existing site.
 */

.kf-hero {
  --kf-hero-height: 630px;
  --kf-nav-height: 72px;
  --kf-stage-height: calc(var(--kf-hero-height) - var(--kf-nav-height));
  --kf-content-width: 1160px;
  --kf-desktop-min-width: 1280px;
  --kf-copy-width: 520px;
  --kf-media-width: 640px;
  --kf-breadcrumb-top: 40px;
  /*
   * テキストを「右側の写真の天地センター」に合わせるための調整値。
   * 写真は top 68px・高さ450px なので中心は 293px。
   * Hero本体の中心は 558/2 = 279px なので、その差 14px の2倍を
   * 上パディングとして与え、中央揃えの基準を 293px にずらします。
   */
  --kf-copy-center-offset: 28px;
  --kf-visual-width: 612px;
  --kf-visual-height: 450px;
  --kf-visual-left: 48px;
  --kf-visual-top: 68px;
  --kf-visual-radius: 10px;
  --kf-ink: #102839;
  --kf-white: #ffffff;
  --kf-teal: #0dacb5;
  --kf-teal-dark: #067d85;
  --kf-yellow: #ffec00;
  /* 背景（service / knowledge 共通） */
  --kf-bg-base: #0dacb5;   /* 基調色：左半分はこの色のまま */
  --kf-bg-light: #15bcc4;  /* 中央から右へ、ゆるく明るく */
  --kf-bg-light2: #22c9d1; /* 右端 */
  --kf-ring-yellow: #fff600;
  width: 100%;
  min-width: var(--kf-desktop-min-width);
  color: var(--kf-ink);
  font-family: "Noto Sans JP", "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  background: #fff;
  isolation: isolate;
}

.kf-hero *,
.kf-hero *::before,
.kf-hero *::after {
  box-sizing: border-box;
}

.kf-hero__stage {
  position: relative;
  height: var(--kf-stage-height);
  overflow: hidden;
  color: var(--kf-white);
  /*
   * 左半分は基調色 #0dacb5 のまま。
   * 中央あたりから右へ、ゆるく明るくしていきます（右端 #22c9d1）。
   */
  background:
    linear-gradient(90deg,
      var(--kf-bg-base) 0%,
      var(--kf-bg-base) 50%,
      var(--kf-bg-light) 74%,
      var(--kf-bg-light2) 100%),
    var(--kf-bg-base);
}

.kf-hero__stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* 右側（テキストが乗らない側）だけに柔らかい光をのせて奥行きを出します。 */
  background:
    radial-gradient(circle at 84% 16%, rgba(255, 255, 255, .14), transparent 32%);
}

.kf-hero__background {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.kf-hero__circle {
  position: absolute;
  display: block;
  width: var(--size);
  aspect-ratio: 1;
  opacity: var(--opacity, 1);
  will-change: transform;
  animation: kf-circle-float var(--float-duration, 15s) ease-in-out var(--float-delay, 0s) infinite alternate;
}

.kf-hero__circle > i {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: 50%;
  border: var(--ring-width, 34px) solid var(--ring-color, rgba(255,255,255,.42));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.16),
    0 0 60px rgba(0, 90, 98, .10);
  animation: kf-circle-spin var(--spin-duration, 23s) linear infinite;
}

.kf-hero__circle > i::before,
.kf-hero__circle > i::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.kf-hero__circle > i::before {
  inset: calc(var(--ring-width, 34px) * -1.72);
  border: 2px dashed rgba(255,255,255,.46);
  opacity: .84;
}

.kf-hero__circle > i::after {
  inset: 14%;
  border: 2px solid rgba(255, 255, 255, .26);
}

/*
 * 円1・円2・円5 … #fff600 の不透過リング（太さ・点線／実線はオリジナル維持）
 *
 * 円2・円5 はオリジナルとほぼ同じ位置です（円5は完全に同一）。
 * 円1 だけは、オリジナル位置（top 252px）のままだと黄色い帯が
 * 本文・見出しの上を通ってしまうため、下方向へ移動しています。
 * テキストを写真の天地センターへ揃えた結果、knowledge の本文下端が
 * y411px まで下がったため、限界は top 460px。余裕を見て 482px にしています
 * （テキストとの最小離隔 22.1px）。
 */
.kf-hero__circle--1 {
  --size: 466px;
  /* 線の太さ：56px → 30px（2026-08-04 第2版） */
  --ring-width: 30px;
  --ring-color: var(--kf-ring-yellow);
  --float-duration: 17s;
  --spin-duration: 28s;
  left: calc(50% - 863px);
  top: 482px;
}

.kf-hero__circle--2 {
  --size: 500px;
  /* 線の太さ：62px → 30px（2026-08-04 第2版） */
  --ring-width: 30px;
  --ring-color: var(--kf-ring-yellow);
  --float-duration: 19s;
  --float-delay: -7s;
  --spin-duration: 31s;
  /* オリジナルは left 36% / top -258px。右16px・上16pxだけ動かしています。 */
  left: calc(50% - 163px);
  top: -274px;
}

.kf-hero__circle--5 {
  --size: 228px;
  --ring-width: 22px;
  --ring-color: var(--kf-ring-yellow);
  --float-duration: 14s;
  --float-delay: -5s;
  --spin-duration: 22s;
  /* オリジナルと同一 */
  right: 20%;
  bottom: -86px;
}

/* 円3・円4 … 白の半透明リング（いずれもテキストより右側） */
.kf-hero__circle--3 {
  --size: 274px;
  --ring-width: 30px;
  --ring-color: rgba(255,255,255,.34);
  --float-duration: 13s;
  --float-delay: -3s;
  --spin-duration: 19s;
  left: calc(50% - 13px);
  top: 286px;
}

.kf-hero__circle--4 {
  --size: 568px;
  --ring-width: 50px;
  --ring-color: rgba(255,255,255,.28);
  --float-duration: 21s;
  --float-delay: -10s;
  --spin-duration: 34s;
  right: -170px;
  top: -36px;
}

@keyframes kf-circle-float {
  0%   { transform: translate3d(-14px, 10px, 0) scale(.90); }
  28%  { transform: translate3d(22px, -14px, 0) scale(1.05); }
  58%  { transform: translate3d(-6px, 24px, 0) scale(.97); }
  100% { transform: translate3d(28px, -22px, 0) scale(1.12); }
}

@keyframes kf-circle-spin {
  to { transform: rotate(360deg); }
}

.kf-hero__inner {
  position: relative;
  z-index: 2;
  width: var(--kf-content-width);
  height: 100%;
  margin-inline: auto;
  display: grid;
  grid-template-columns: var(--kf-copy-width) var(--kf-media-width);
  gap: 0;
  align-items: stretch;
}

.kf-hero__copy {
  position: relative;
  height: 100%;
  /* パンくずは absolute なので、見出しだけが上下中央に載ります。 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: var(--kf-copy-center-offset);
}

.kf-hero__breadcrumb {
  position: absolute;
  top: var(--kf-breadcrumb-top);
  left: 0;
  margin: 0;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .03em;
  z-index: 3;
}

.kf-hero__breadcrumb ol {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kf-hero__breadcrumb,
.kf-hero__breadcrumb a,
.kf-hero__breadcrumb a:visited,
.kf-hero__breadcrumb a:hover,
.kf-hero__breadcrumb a:active {
  color: #ffffff;
  text-decoration: none;
  background: none;
  box-shadow: none;
  transform: none;
  transition: none;
}

.kf-hero__breadcrumb span[aria-current="page"] {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 4px 13px 5px;
  border-radius: 4px;
  color: #17313c;
  background: var(--kf-yellow);
}

.kf-hero__copy-main {
  width: 100%;
}

.kf-hero__title {
  margin: 0;
  font-size: 46px;
  line-height: 1.22;
  letter-spacing: .015em;
  font-weight: 800;
  color: #ffffff;
}

.kf-hero__title > span {
  display: block;
  white-space: nowrap;
}

.kf-hero__lead {
  margin-top: 22px;
  font-size: 17px;
  line-height: 1.72;
  font-weight: 600;
  letter-spacing: .01em;
  color: #ffffff;
}

.kf-hero__lead p {
  margin: 0;
}

.kf-hero__reveal {
  overflow: hidden;
}

.kf-hero__reveal > span,
.kf-hero__reveal > ol {
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transform: translate3d(-30px, 0, 0);
  will-change: transform, opacity, clip-path;
}

.kf-hero.is-visible .kf-hero__reveal > span,
.kf-hero.is-visible .kf-hero__reveal > ol {
  animation: kf-text-flow 820ms cubic-bezier(.22, .88, .28, 1) var(--delay, 0ms) both;
}

@keyframes kf-text-flow {
  0% {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    transform: translate3d(-30px, 0, 0);
  }
  30% { opacity: 1; }
  100% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes kf-fade-up {
  from {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.kf-hero__media {
  position: relative;
  width: var(--kf-media-width);
  height: 100%;
  justify-self: end;
}

.kf-hero__media::before,
.kf-hero__media::after {
  content: none;
  display: none;
}

/*
 * メイン画像（612 × 450px／角丸10px）
 * 旧「support-meeting.jpg」「service-pc-mv.png」2枚が占めていた範囲の
 * 外接矩形の中心（メディア枠内 354px / 293px）に中心を合わせています。
 * 上から下へ入ってきます。
 */
.kf-hero__visual {
  position: absolute;
  left: var(--kf-visual-left);
  top: var(--kf-visual-top);
  z-index: 3;
  width: var(--kf-visual-width);
  height: var(--kf-visual-height);
  margin: 0;
  overflow: hidden;
  border-radius: var(--kf-visual-radius);
  /* 背景が明るくなったため、よく見れば分かる程度の控えめな影にしています。 */
  box-shadow: 0 10px 26px rgba(0, 52, 58, .18);
  opacity: 0;
  transform: translate3d(0, -48px, 0);
}

.kf-hero__visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.kf-hero.is-visible .kf-hero__visual {
  animation: kf-visual-from-top 1200ms cubic-bezier(.23, .9, .28, 1) 300ms both;
}

@keyframes kf-visual-from-top {
  from {
    opacity: 0;
    transform: translate3d(0, -48px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.kf-hero__local-nav {
  height: var(--kf-nav-height);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(20,65,78,.10);
  border-bottom: 1px solid rgba(20,65,78,.10);
  background: #fff;
}

.kf-hero__local-nav a {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  padding: 0 18px;
  color: var(--kf-ink);
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  border-left: 1px solid rgba(20,65,78,.10);
  transition: background-color .2s ease, color .2s ease;
}

.kf-hero__local-nav a:first-child {
  border-left: 0;
}

.kf-hero__local-nav a:hover,
.kf-hero__local-nav a:focus-visible {
  color: var(--kf-teal-dark);
  background: #effbfc;
}

.kf-hero__local-nav a:focus-visible,
.kf-hero__breadcrumb a:focus-visible {
  outline: 3px solid rgba(13, 172, 181, .40);
  outline-offset: -3px;
}

.kf-hero__nav-icon {
  flex: 0 0 auto;
  color: var(--kf-teal);
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 766px) {
  .kf-hero {
    --kf-hero-height: auto;
    --kf-nav-height: auto;
    min-width: 0;
  }

  .kf-hero__stage {
    height: auto;
    /* スマホは上半分が #0dacb5、そこから下へゆるく明るくします。 */
    background:
      linear-gradient(180deg,
        var(--kf-bg-base) 0%,
        var(--kf-bg-base) 50%,
        var(--kf-bg-light) 76%,
        var(--kf-bg-light2) 100%),
      var(--kf-bg-base);
  }

  .kf-hero__stage::before {
    background: none;
  }

  .kf-hero__inner {
    width: calc(100% - 40px);
    height: auto;
    grid-template-columns: 1fr;
    /* リード文が無くなったぶん、見出しと画像の間を少し広げています。 */
    gap: 28px;
    padding: 40px 0 36px;
  }

  .kf-hero__copy {
    height: auto;
    display: block;
    padding-top: 0;
  }

  .kf-hero__breadcrumb {
    position: static;
    margin: 0 0 24px;
    font-size: 13px;
  }

  .kf-hero__breadcrumb ol {
    gap: 12px;
  }

  .kf-hero__breadcrumb span[aria-current="page"] {
    min-height: 28px;
    padding: 4px 11px;
  }

  .kf-hero__copy-main {
    max-width: none;
  }

  .kf-hero__title {
    font-size: 31px;
    line-height: 1.34;
  }

  .kf-hero__title > span {
    white-space: normal;
  }

  .kf-hero__lead {
    margin-top: 16px;
    font-size: 15px;
    line-height: 1.65;
    text-wrap: pretty;
  }

  /*
   * スマホでは行単位のクリップ演出を無効化する。
   * 折り返しが発生する複数行のinline要素へのclip-path/transformは
   * ブラウザにより行末が欠けるため、ブロック単位のフェードに置き換える。
   */
  .kf-hero__reveal {
    overflow: visible;
  }

  .kf-hero__reveal > span,
  .kf-hero.is-visible .kf-hero__reveal > span {
    animation: none;
    opacity: 1;
    clip-path: none;
    transform: none;
    will-change: auto;
  }

  .kf-hero__lead p {
    display: inline;
  }

  .kf-hero__title,
  .kf-hero__lead {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
  }

  .kf-hero.is-visible .kf-hero__title {
    animation: kf-fade-up 760ms cubic-bezier(.22, .88, .28, 1) 140ms both;
  }

  .kf-hero.is-visible .kf-hero__lead {
    animation: kf-fade-up 760ms cubic-bezier(.22, .88, .28, 1) 340ms both;
  }

  .kf-hero__media {
    position: relative;
    width: 100%;
    max-width: 520px;
    height: auto;
    aspect-ratio: 612 / 450;
    margin: 0 auto;
    display: block;
  }

  /* スマホでは画面幅いっぱい。右横から入ってきます。 */
  .kf-hero__visual {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    transform: translate3d(56px, 0, 0);
  }

  .kf-hero.is-visible .kf-hero__visual {
    animation: kf-visual-from-right 1100ms cubic-bezier(.23, .9, .28, 1) 260ms both;
  }

  @keyframes kf-visual-from-right {
    from {
      opacity: 0;
      transform: translate3d(56px, 0, 0);
    }
    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }

  .kf-hero__local-nav {
    height: auto;
    grid-template-columns: 1fr;
  }

  .kf-hero__local-nav a {
    min-height: 62px;
    justify-content: flex-start;
    gap: 12px;
    padding: 0 20px;
    font-size: 14px;
    border-left: 0;
    border-bottom: 1px solid rgba(20,65,78,.10);
  }

  .kf-hero__local-nav a:last-child {
    border-bottom: 0;
  }

  .kf-hero__nav-icon {
    width: 26px;
    height: 26px;
  }

  /*
   * スマホの円形
   * 黄色は不透過なので、白文字の上に重なると読めなくなります。
   * スマホはテキストが全幅に入るため、サイズを小さくしたうえで
   * 「テキストが無い3方向」へ分散させています。
   *   円2 … 右上（パンくず・見出しの右側の余白。上端基準）
   *   円1 … 左下（画像の左〜下。下端基準）
   *   円5 … 右下（画像の右〜下。下端基準）
   * 下端基準にしている円は、画像がHero下端から36pxに固定されるため、
   * 画面幅や行数が変わっても黄色がテキストへ入り込みません。
   */
  /* 線の太さはPC（30px）と同じ比率で縮小しています。 */
  .kf-hero__circle--2 {
    --size: 130px;
    --ring-width: 8px;
    left: auto;
    right: -30px;
    top: -76px;
    bottom: auto;
  }

  .kf-hero__circle--1 {
    --size: 260px;
    --ring-width: 17px;
    left: -70px;
    right: auto;
    top: auto;
    bottom: -70px;
  }

  .kf-hero__circle--5 {
    --size: 190px;
    --ring-width: 22px;
    left: auto;
    right: -50px;
    top: auto;
    bottom: -40px;
  }

  /* 白の半透明リングは、テキストに重なるため控えめにします。 */
  .kf-hero__circle--3 {
    --ring-color: rgba(255,255,255,.16);
    left: 44%;
    top: 150px;
  }

  .kf-hero__circle--4 {
    --ring-color: rgba(255,255,255,.16);
    right: -330px;
    top: 60px;
  }

  /* テキストに重なりうる細い装飾線も、スマホでは控えめにします。 */
  .kf-hero__circle > i::before {
    border-color: rgba(255,255,255,.22);
  }

  .kf-hero__circle > i::after {
    border-color: rgba(255,255,255,.14);
  }
}

@media (prefers-reduced-motion: reduce) {
  .kf-hero__circle,
  .kf-hero__circle > i {
    animation: none !important;
  }

  .kf-hero__reveal > span,
  .kf-hero__reveal > ol,
  .kf-hero.is-visible .kf-hero__reveal > span,
  .kf-hero.is-visible .kf-hero__reveal > ol,
  .kf-hero__title,
  .kf-hero__lead,
  .kf-hero.is-visible .kf-hero__title,
  .kf-hero.is-visible .kf-hero__lead,
  .kf-hero__visual,
  .kf-hero.is-visible .kf-hero__visual {
    animation: none !important;
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: none;
  }
}


@media (max-width: 420px) {
  .kf-hero__inner {
    width: calc(100% - 32px);
  }

  .kf-hero__title {
    font-size: 29px;
  }

  .kf-hero__lead {
    font-size: 14px;
    line-height: 1.65;
  }
}