/*
 * KAIZEN FARM / 業務改善ナレッジ Hero Section（2026-08-04版：#0dacb5基調）
 *
 * 背景は service と共通です（グラデーション・円形の値はすべて同一）。
 * ・基調色 #0dacb5。中央付近から右へほんの少しずつ明るくなります。
 * ・白文字が乗る側（PCは左／スマホは上）は、白文字とのコントラストが
 *   WCAG AA（4.5:1）を満たすまで同系色で沈ませています。
 * ・背景の円形のうち3つ（円1・円2・円5）は #fff600 の不透過。
 *   太さ・点線／実線の表現はオリジナルのまま維持し、位置のみ
 *   service・knowledge 両方のテキストを避けるように移動しています。
 * ・右側ビジュアルは service と同じ 612×450px／角丸10px／上から登場。
 *
 * Desktop: 1280px fixed canvas until 767px. Mobile layout begins at 767px and below.
 * All selectors are namespaced with .kfk-hero.
 */

.kfk-hero {
  --kfk-total-height: 630px;
  --kfk-nav-height: 72px;
  --kfk-stage-height: 558px;
  --kfk-canvas-width: 1280px;
  --kfk-content-width: 1160px;
  --kfk-copy-width: 520px;
  --kfk-media-width: 640px;
  --kfk-visual-width: 612px;
  --kfk-visual-height: 450px;
  --kfk-visual-left: 48px;
  --kfk-visual-top: 68px;
  --kfk-visual-radius: 10px;
  --kfk-copy-center-offset: 28px;
  --kfk-ink: #102839;
  --kfk-teal: #0dacb5;
  --kfk-teal-dark: #067d85;
  --kfk-yellow: #ffec00;
  --kfk-white: #ffffff;
  /* 背景（service / knowledge 共通） */
  --kfk-bg-base: #0dacb5;   /* 基調色：左半分はこの色のまま */
  --kfk-bg-light: #15bcc4;  /* 中央から右へ、ゆるく明るく */
  --kfk-bg-light2: #22c9d1; /* 右端 */
  --kfk-ring-yellow: #fff600;
  width: 100%;
  color: var(--kfk-white);
  background: #fff;
  font-family: "Noto Sans JP", "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  isolation: isolate;
}

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

@media (min-width: 768px) {
  .kfk-hero {
    min-width: var(--kfk-canvas-width);
    height: var(--kfk-total-height);
  }
}

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

.kfk-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%);
}

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

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

.kfk-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: kfk-circle-spin var(--spin-duration, 23s) linear infinite;
}

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

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

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

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

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

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

/* 円3・円4 … 白の半透明リング（いずれもテキストより右側） */
.kfk-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;
}

.kfk-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 kfk-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 kfk-circle-spin {
  to { transform: rotate(360deg); }
}

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

/*
 * 見出し＋本文を「右側のビジュアルの天地センター」に合わせます。
 * ビジュアルは top 68px・高さ450px なので中心は 293px。
 * Hero本体の中心は 558/2 = 279px なので、その差 14px の2倍を
 * 上パディングとして与え、中央揃えの基準を 293px にずらします。
 * パンくずは absolute にして、この中央揃えから外しています。
 */
.kfk-hero__copy {
  position: relative;
  z-index: 3;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: var(--kfk-copy-center-offset);
}

.kfk-hero__breadcrumb {
  position: absolute;
  top: 40px;
  left: 0;
  margin: 0;
  font-size: 14px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--kfk-white);
}

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

.kfk-hero__breadcrumb a,
.kfk-hero__breadcrumb a:visited,
.kfk-hero__breadcrumb a:hover,
.kfk-hero__breadcrumb a:active {
  color: var(--kfk-white);
  text-decoration: none;
  background: none;
  transform: none;
}

.kfk-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(--kfk-yellow);
}

.kfk-hero__title {
  margin: 0;
  font-size: 52px;
  line-height: 1.28;
  letter-spacing: .02em;
  font-weight: 800;
  color: var(--kfk-white);
}

.kfk-hero__lead {
  margin-top: 30px;
  font-size: 16px;
  line-height: 2;
  letter-spacing: .015em;
  font-weight: 600;
  color: var(--kfk-white);
}

.kfk-hero__lead p {
  margin: 0 0 11px;
}

/* 中央揃えの基準をぶらさないため、最後の段落の下マージンは持たせません。 */
.kfk-hero__lead p:last-child {
  margin-bottom: 0;
}

.kfk-hero__reveal {
  overflow: hidden;
}

.kfk-hero__reveal > span {
  display: block;
}

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

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

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

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

/*
 * 右側ビジュアル（612 × 450px／角丸10px）
 * 位置・サイズ・角丸・影・動きは service と同一です。上から下へ入ってきます。
 * ふわふわの浮遊アニメーションはありません。
 */
.kfk-hero__visual {
  position: relative;
  z-index: 1;
  width: var(--kfk-media-width);
  height: 100%;
  justify-self: end;
}

.kfk-hero__visual-frame {
  position: absolute;
  left: var(--kfk-visual-left);
  top: var(--kfk-visual-top);
  width: var(--kfk-visual-width);
  height: var(--kfk-visual-height);
  margin: 0;
  overflow: hidden;
  border-radius: var(--kfk-visual-radius);
  /* 背景が明るくなったため、よく見れば分かる程度の控えめな影にしています。 */
  box-shadow: 0 10px 26px rgba(0, 52, 58, .18);
  opacity: 0;
  transform: translate3d(0, -48px, 0);
  will-change: transform, opacity;
}

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

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

.kfk-hero__illust {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.kfk-hero__local-nav {
  height: var(--kfk-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;
}

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

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

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

.kfk-hero__nav-number {
  flex: 0 0 auto;
  min-width: 38px;
  padding: 4px 5px 5px;
  color: #17313c;
  background: var(--kfk-yellow);
  text-align: center;
  font-size: 12px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .08em;
}

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

@media (max-width: 767px) {
  .kfk-hero {
    min-width: 0;
    height: auto;
  }

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

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

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

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

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

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

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

  .kfk-hero__circle > i::before {
    border-color: rgba(255,255,255,.22);
  }

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

  .kfk-hero__inner {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 28px;
    padding: 0 20px 36px;
  }

  /* スマホは縦積みなので、中央揃えは解除して通常の流れに戻します。 */
  .kfk-hero__copy {
    width: 100%;
    display: block;
    padding-top: 40px;
  }

  .kfk-hero__breadcrumb {
    position: static;
    top: auto;
    left: auto;
    margin: 0 0 24px;
    font-size: 13px;
  }

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

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

  .kfk-hero__title {
    font-size: 34px;
    line-height: 1.35;
  }

  .kfk-hero__lead {
    margin-top: 18px;
    font-size: 15px;
    line-height: 1.75;
  }

  .kfk-hero__lead p { margin-bottom: 12px; }

  /* スマホでは指定改行を無効化し、画面幅に合わせて自然に折り返します。 */
  .kfk-hero__br {
    display: none;
  }

  /*
   * スマホでは行単位のクリップ演出を無効化し、
   * タイトル／リードのブロック単位フェードアップに置き換えます。
   */
  .kfk-hero__reveal {
    overflow: visible;
  }

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

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

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

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

  /* ビジュアルは service と同じく、スマホでは右横から入ってきます。 */
  .kfk-hero__visual {
    width: 100%;
    max-width: 520px;
    height: auto;
    aspect-ratio: 612 / 450;
    margin: 0 auto;
    justify-self: auto;
  }

  .kfk-hero__visual-frame {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: translate3d(56px, 0, 0);
  }

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

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

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

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

  .kfk-hero__local-nav a:first-child { border-top: 0; }
}

@media (max-width: 420px) {
  .kfk-hero__inner {
    padding-left: 16px;
    padding-right: 16px;
  }

  .kfk-hero__title {
    font-size: 30px;
  }

  .kfk-hero__lead {
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kfk-hero *,
  .kfk-hero *::before,
  .kfk-hero *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: .01ms !important;
  }

  .kfk-hero__reveal > span,
  .kfk-hero__reveal > ol,
  .kfk-hero__title,
  .kfk-hero__lead,
  .kfk-hero__visual-frame {
    opacity: 1;
    clip-path: none;
    transform: none;
  }
}