/* =============================================
  TOPページ(top)
  ローディング画面・メイン表示・hero のスクロール連動・各セクション
============================================= */

/* ===========================
      メインコンテンツ（TOPページ）
      ローディング完了まで待機してフェードイン
    =========================== */
    .main {
      grid-area: main;
      container-type: inline-size;
      container-name: main;
      width: 100%;
      opacity: 0;
      /* ローディング完了後（5s）にフェードイン */
      animation: fadeIn 0.8s ease-out 5.0s forwards;
    }

    /* サイト内遷移時はローディングスキップ・即時表示 */
    .home .loading-screen.skip ~ * .main,
    .home .loading-screen.skip + .main {
      animation: fadeIn 0.8s ease-out 0.3s forwards;
    }

    /* ===========================
  ローディング画面（通常時）
=========================== */
.loading-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: radial-gradient(
    ellipse at center,
    #1a1a2e 0%,
    #0d0d0d 50%,
    #000000 100%
  );
  /* var(--color--loading) */
  display: flex;
  align-items: center;
  justify-content: center;

}
.loading-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 0%,
    transparent 35%,
    rgba(255, 255, 255, 0.04) 45%,
    rgba(255, 255, 255, 0.07) 50%,
    rgba(255, 255, 255, 0.04) 55%,
    transparent 65%,
    transparent 100%
  );
  pointer-events: none;
}
.loading-screen::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.02) 0%,
    transparent 50%,
    rgba(0, 0, 0, 0.3) 100%
  );
  pointer-events: none;
}
/* テキストとロゴを重ねるための親要素 */
.loading-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* ===========================
  ローディングテキスト
=========================== */
.loading-text {
  color: #96d45b;
  -webkit-text-stroke: 1px var(--color--text);  /* テキスト枠線 */
  font-size: clamp(2.53rem, 2.53rem + (2.78rem - 2.53rem) * ((100vw - 375px) / (768px - 375px)), 2.78rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  display: flex;
  z-index: 1;
}
@media (width >= 768px) {
  .loading-text {
    font-size: clamp(2.78rem, 2.78rem + (3.2rem - 2.78rem) * ((100vw - 768px) / (1440px - 768px)), 3.2rem);
  }
}
@media (width >= 1440px) {
  .loading-text {
    font-size: clamp(3.2rem, 3.2rem + (3.5rem - 3.2rem) * ((100vw - 1440px) / (1920px - 1440px)), 3.5rem);
  }
}

.loading-char {
  display: inline-block;
}

/* ===========================
  ローディングロゴ
=========================== */
.loading-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(7.5rem, 4.286rem + 6.7vw, 15rem);
  height: clamp(7.5rem, 4.286rem + 6.7vw, 15rem);
}

/* サイト内遷移時はスキップ */
.loading-screen.skip {
  display: none;
}

/* ===========================
ローディング画面（通常時）
=========================== */
.loading-screen {
  /* 3.6s後に開始 0.6s間動作 */
  animation: fadeOut 0.8s ease-in-out 4.1s forwards;
}

/* ===========================
ローディングテキスト
=========================== */
.loading-text {
  /* 1.6s後にフェードアウト開始 */
  animation: textFadeOut 0.4s ease-in-out 2.2s forwards;
}
.loading-char {
  opacity: 0;
  animation: wave 0.6s ease-in-out forwards;
}


/* ===========================
ローディングロゴ
=========================== */
.loading-logo {
  opacity: 0;
  /* 2.1s後にブラーフェードイン開始 */
  animation: blurFadeIn 0.8s ease-out 2.7s forwards;
}

/* 文字の波打ち */
@keyframes wave {
  0% {
    opacity: 0;
    transform: translateY(18px);
  }
  50% {
    opacity: 1;
    transform: translateY(-6px);
  }
  75% {
    transform: translateY(3px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* テキストフェードアウト */
@keyframes textFadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* ロゴのブラーフェードイン */
@keyframes blurFadeIn {
  0% {
    opacity: 0;
    filter: blur(16px);
    transform: translate(-50%, -50%) scale(1.04);
  }
  100% {
    opacity: 1;
    filter: blur(0px);
    transform: translate(-50%, -50%) scale(1);
  }
}

/* スクロール連動アニメーションは、ブラウザサポート & アニメーション許可設定の両方を満たす場合のみ適用 */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {

    /* ===== hero セクション ===== */
    .hero {
      view-timeline: --hero-view; /* 親要素でビュータイムラインを定義 */
    }
    .fixed-bg::after {
      content: "";
      position: absolute;
      inset: 0;
      animation: hero-fadeblur linear;
      animation-timeline: --hero-view; /* 親のタイムラインを参照 */
      animation-range: exit; /* スクロールで画面外に出ていく時に動作 */
    }
    .hero__content {
      animation: hero-fadeOut linear;
      animation-timeline: --hero-view; /* 親のタイムラインを参照 */
      animation-range: exit; /* スクロールで画面外に出ていく時に動作 */
    }
    @keyframes hero-fadeOut {
      to {
        scale: 0.5;
        opacity: 0;
        filter: blur(16px);
      }
    }
    @keyframes hero-fadeblur {
      to {
        backdrop-filter: blur(24px) grayscale(1) sepia(0.5) brightness(0.8);
      }
    }

    /* ===== works セクション ===== */
    /* works の見出し・説明文・画像群の表示は、スクロール連動(animation-timeline)ではなく、
       このファイルの下部(--anim-init / is-in-view)と top.js(回転パネル)で行う */

  }
}

/* ===== hero セクション ===== */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: 100svh;
  width: 100%;
  padding-block: 6em;

}
/* 下部のグラデーション */
.hero::before {
  content: "";
  position: absolute;
  width: 100%;
  inset: 0;
  background: linear-gradient(0deg, var(--color-base) 1rem, transparent 25%);
}


/* 背景固定画像 */
.fixed-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: -100; /* 奥に配置 */
  will-change: transform;
  /* 背景画像の明るさ。白文字の可読性のため 0.5 → 0.4 に下げた。元に戻すときは 0.5 にする */
  --fv-bg-brightness: 0.4;
}
.fixed-bg > img {
  /* わずかに拡大して没入感を出す */
  transform: scale(1.05);
  min-width: 100%;
  /* カラー調整 */
  filter: grayscale(0.5) sepia(0.4) brightness(var(--fv-bg-brightness)) contrast(0.9);
  opacity: 0.9;
}

/* ----- メインコピー（縦書き） ----- */
.hero__content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  top: -2rem;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding-bottom: 10svh;
  z-index: 1;
}

.hero__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
}

/* 縦書きコピー下の横書きサブコピー */
.hero__sub {
  padding-inline: 1rem;
  font-size: clamp(0.91rem, 0.91rem + (1rem - 0.91rem) * ((100vw - 375px) / (768px - 375px)), 1rem);
  line-height: 1.8;
  letter-spacing: 0.08em;
  text-align: center;
  color: var(--color--text--1);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
@media (width >= 768px) {
  .hero__sub {
    font-size: clamp(1rem, 1rem + (1.15rem - 1rem) * ((100vw - 768px) / (1440px - 768px)), 1.15rem);
  }
}
@media (width >= 1440px) {
  .hero__sub {
    font-size: clamp(1.15rem, 1.15rem + (1.26rem - 1.15rem) * ((100vw - 1440px) / (1920px - 1440px)), 1.26rem);
  }
}

.hero__copy-text {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  /* サイズは全区間 2rem(差分 0)。変える場合は、各区間の開始値・終了値を差し替える */
  font-size: clamp(2rem, 2rem + (2rem - 2rem) * ((100vw - 375px) / (768px - 375px)), 2rem);
  font-weight: 700;
  line-height: 2.5;
  letter-spacing: 0.1em;
  color: var(--color--text--1);
  /* text-shadow:
    0 1px 4px rgba(0, 0, 0, 0.4),
    0 0 20px rgba(0, 0, 0, 0.2); */
  }
@media (width >= 768px) {
  .hero__copy-text {
    font-size: clamp(2rem, 2rem + (2rem - 2rem) * ((100vw - 768px) / (1440px - 768px)), 2rem);
  }
}
@media (width >= 1440px) {
  .hero__copy-text {
    font-size: clamp(2rem, 2rem + (2rem - 2rem) * ((100vw - 1440px) / (1920px - 1440px)), 2rem);
  }
}

/* ----- ロゴ（下部中央） ----- */
.hero__logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  z-index: 2;
}

.hero__logo-mark {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.hero__logo-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.hero__logo-name {
  font-size: clamp(0.81rem, 0.81rem + (0.89rem - 0.81rem) * ((100vw - 375px) / (768px - 375px)), 0.89rem);
  font-weight: 600;
  color: var(--color--text--1);
  letter-spacing: 0.08em;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
@media (width >= 768px) {
  .hero__logo-name {
    font-size: clamp(0.89rem, 0.89rem + (1.02rem - 0.89rem) * ((100vw - 768px) / (1440px - 768px)), 1.02rem);
  }
}
@media (width >= 1440px) {
  .hero__logo-name {
    font-size: clamp(1.02rem, 1.02rem + (1.12rem - 1.02rem) * ((100vw - 1440px) / (1920px - 1440px)), 1.12rem);
  }
}

/* ===== concept セクション ===== */
/* 見出し・本文のサイズ(375px→768px→1440px→1920px の区間ごとに値を切り替える)。
   ルール(coding-css-js.md 134行)は「変数に複数区間の clamp を持たせない」が基本だが、ここは例外にしている。
   理由: 帯の位置・余白を calc(var(--section-title-fs) * 0.928) のように、見出しの文字サイズを長さとして使って計算しているため。
   値を変えるときは、この変数だけを差し替える(見出し・本文の font-size は、この変数を参照しているので、二重管理にならない) */
.section-concept,
.section-flow,
.section-works {
  --section-title-fs: clamp(2.53rem, 2.53rem + (2.78rem - 2.53rem) * ((100vw - 375px) / (768px - 375px)), 2.78rem);
  --section-lead-fs: clamp(0.91rem, 0.91rem + (1rem - 0.91rem) * ((100vw - 375px) / (768px - 375px)), 1rem);
}
@media (width >= 768px) {
  .section-concept,
  .section-flow,
  .section-works {
    --section-title-fs: clamp(2.78rem, 2.78rem + (3.2rem - 2.78rem) * ((100vw - 768px) / (1440px - 768px)), 3.2rem);
    --section-lead-fs: clamp(1rem, 1rem + (1.15rem - 1rem) * ((100vw - 768px) / (1440px - 768px)), 1.15rem);
  }
}
@media (width >= 1440px) {
  .section-concept,
  .section-flow,
  .section-works {
    --section-title-fs: clamp(3.2rem, 3.2rem + (3.5rem - 3.2rem) * ((100vw - 1440px) / (1920px - 1440px)), 3.5rem);
    --section-lead-fs: clamp(1.15rem, 1.15rem + (1.26rem - 1.15rem) * ((100vw - 1440px) / (1920px - 1440px)), 1.26rem);
  }
}

    .section-concept {
  position: relative;
  z-index: 0; /* 固定背景(z-index:-100)より手前に出す。worksと同じ */
  background-color: var(--color-base);
  padding-block: 6em 4em;
}
@media (width >= 768px) {
  .section-concept {
    padding-block: 8em 6em;
  }
}
.concept__inner {
  padding-inline: 4% 6%;
}
.concept__head {
  padding: 0;
}
.section-concept .section-title__main {
  font-size: var(--section-title-fs);
  margin-bottom: 40px;
}

/* モバイル〜1023px: 2段(画像+縦書き / 本文)。1024px 以上は、末尾の @media で3カラムに切り替える */
.concept__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 2rem 1.5rem;
}
/* 画像の高さは縦書き(.concept__line)の高さに合わせる(行の高さいっぱいに広げる)。
   スライドは全て重ねて配置し、is-active の1枚だけを表示する(クロスフェード) */
.concept__img {
  position: relative;
  align-self: stretch;
  width: 100%; /* 幅はカラム幅に固定。高さを伸ばしたとき、3:4の比率から幅が広がって隣と重なるのを防ぐ */
}
.concept__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.concept__slide.is-active {
  opacity: 1;
}
.concept__slide picture {
  display: block;
  height: 100%;
}
.concept__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.concept__body {
  grid-column: 1 / -1; /* 2段レイアウトでは、本文は2カラム分の幅 */
  max-inline-size: 32em;
  word-break: auto-phrase; /* 文節のまとまりで改行する(Chrome 119以降。非対応のブラウザでは通常の改行) */
  font-size: clamp(0.91rem, 0.91rem + (1rem - 0.91rem) * ((100vw - 375px) / (768px - 375px)), 1rem);
  line-height: 2;
  letter-spacing: 0.1em;
}
@media (width >= 768px) {
  .concept__body {
    font-size: clamp(1rem, 1rem + (1.15rem - 1rem) * ((100vw - 768px) / (1440px - 768px)), 1.15rem);
  }
}
@media (width >= 1440px) {
  .concept__body {
    font-size: clamp(1.15rem, 1.15rem + (1.26rem - 1.15rem) * ((100vw - 1440px) / (1920px - 1440px)), 1.26rem);
  }
}
.concept__body p + p {
  margin-top: 1.5em;
}

/* 縦書きの宣言文: FV(.hero__copy-text)と同じ指定、サイズだけ一段小さく。
   背景が明るいので文字色は本文と同じ継承色(FVの#fffは使わない) */
.concept__statement {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  /* 375〜768px は 1.5 → 1.75rem。768px 以上は 1.75rem のまま(差分 0)。変える場合は、各区間の開始値・終了値を差し替える */
  font-size: clamp(1.5rem, 1.5rem + (1.75rem - 1.5rem) * ((100vw - 375px) / (768px - 375px)), 1.75rem);
  font-weight: 700;
  line-height: 2.5;
  letter-spacing: 0.1em;
}
@media (width >= 768px) {
  .concept__statement {
    font-size: clamp(1.75rem, 1.75rem + (1.75rem - 1.75rem) * ((100vw - 768px) / (1440px - 768px)), 1.75rem);
  }
}
@media (width >= 1440px) {
  .concept__statement {
    font-size: clamp(1.75rem, 1.75rem + (1.75rem - 1.75rem) * ((100vw - 1440px) / (1920px - 1440px)), 1.75rem);
  }
}
.concept__line {
  display: block; /* 縦書きでは block = 1列 */
}

/* concept: 3カラム(1024px 以上): 縦長画像 | 縦書きコピー | 本文。上端を段階的にずらす */
@media (width >= 1024px) {
  .concept__cols {
    /* 画像(1カラム目)は、画面幅の42%までを上限560pxで広げる。縦書き(2カラム目)は文字の幅に合わせる。
       残りは本文(3カラム目)。広い画面でも画像が縦に長くなりすぎず、画像と縦書きの間隔も開かない */
    grid-template-columns: minmax(0, min(560px, 42%)) auto minmax(0, 1fr);
    column-gap: clamp(1.5rem, 3vw, 3rem); /* 縦書きと本文の間隔 */
    row-gap: 2rem;
  }
  /* 画像の高さは3:4を下限とし、本文(段差の余白を含む)より低くならないよう行の高さまで伸ばす */
  .concept__img {
    aspect-ratio: 3 / 4;
  }
  .concept__statement {
    margin-left: clamp(2rem, 4vw, 4rem); /* 画像との間隔は、縦書きと本文の間隔より広くとる。縦書きでは inline-start が上になるため、物理方向で指定 */
    margin-top: 4rem;
  }
  .concept__body {
    grid-column: auto;
    margin-top: 8rem;
  }
}

/* 縦書きコピー: ぼかした状態から、次第にはっきり表示する(スクロールで表示領域に入ったとき)。
   「動きを減らす」設定の環境では初期状態を適用せず、最初から表示する */
/* 表示の順序: 見出し(--anim-title) → 縦書きコピー(--anim-statement) → 画像・本文(--anim-body)。
  3つとも見出しが表示領域に入った時点で is-in-view が付くため、順序は animation-delay / transition-delay で付ける。
   速さを変えるときは、ここの値だけを調整する(合計 = 1.8 + 1.5 + 0.2 + 1.5 = 約5.0秒) */
.section-concept {
  --anim-title: 1.8s;     /* 見出し: 帯が伸びる → 静止 → 帯が消えて文字が現れる */
  --anim-statement: 1.5s; /* 縦書きコピー: ぼかしからはっきり */
  --anim-body-gap: 0.2s;  /* 縦書きの完了から、画像・本文が動き出すまでの間隔 */
  --anim-body: 1.5s;      /* 画像・本文: 下からフェードイン */
}
.section-works {
  --anim-title: 1.8s;     /* works の見出し(concept・flow と同じ速さ) */
  --works-bg-duration: 0.6s; /* works の背景の帯: 左から右へ伸びる時間(見出しの完了後に始まる) */
  --anim-statement-delay: calc(var(--anim-title) + var(--works-bg-duration)); /* 説明文・ボタン・画像群は、見出しの完了後、さらに帯の伸びが終わってから、表示する */
  --anim-statement: 1.5s; /* works の説明文・ボタン・画像群: ぼかしからはっきり。画像群の完了後に、assets/js/pages/top/top.js が回転パネルのループを始める */
  --works-flip-duration: 0.5s; /* 回転パネル: 表 ↔ 裏 の1回の回転の長さ。assets/js/pages/top/top.js がこの値を読み、待ち時間(WAIT_NEXT・WAIT_ROUND)と合わせて、順番と間隔を決める */
}
.section-flow {
  --anim-title: 1.8s;     /* flow の見出し(concept と同じ速さ) */
  --anim-statement: 1.5s; /* flow の導入部分(見出し下のラベル・説明・ボタン): ぼかしからはっきり */
  --anim-body-gap: 0.2s;  /* 導入部分の完了から、工程リストが動き出すまでの間隔 */
  --anim-body: 1.5s;      /* 工程リスト: 左右からフェードイン(concept の画像・本文と同じ速さ) */
}
@media (prefers-reduced-motion: no-preference) {
  /* 見出し(concept・flow・works 共通): 左から帯が現れ、次に帯が左から消えると同時に文字が現れる(帯の色は --color--text--2 = #1a1a1a) */
  .concept__title,
  .flow__title,
  .works__title {
    position: relative;
    width: fit-content;
  }
  .concept__title::after,
  .flow__title::after,
  .works__title::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--color--text--2);
    transform: scaleX(0);
    transform-origin: left;
  }
  /* 文字だけを隠す。h2 自体を opacity:0 にすると、子の帯(::after)まで見えなくなるため */
  .concept__title--anim-init,
  .flow__title--anim-init,
  .works__title--anim-init {
    color: transparent;
  }
  .concept__title--anim-init.is-in-view,
  .flow__title--anim-init.is-in-view,
  .works__title--anim-init.is-in-view {
    animation: concept-title-text var(--anim-title) step-end forwards;
  }
  .concept__title--anim-init.is-in-view::after,
  .flow__title--anim-init.is-in-view::after,
  .works__title--anim-init.is-in-view::after {
    animation: concept-title-band var(--anim-title) forwards;
  }

  /* 縦書きコピー(concept)、見出し下のラベル・説明・ボタン(flow)、説明・ボタン(works): 見出しの完了後に、ぼかしからはっきり表示する */
  .concept__statement--anim-init,
  .flow__label--anim-init,
  .flow__lead--anim-init,
  .flow__btn--anim-init,
  .works__lead--anim-init,
  .works__btn--anim-init {
    opacity: 0;
    filter: blur(16px);
  }
  .concept__statement--anim-init.is-in-view,
  .flow__label--anim-init.is-in-view,
  .flow__lead--anim-init.is-in-view,
  .flow__btn--anim-init.is-in-view,
  .works__lead--anim-init.is-in-view,
  .works__btn--anim-init.is-in-view {
    opacity: 1;
    filter: blur(0);
    /* 遅れは、--anim-statement-delay(works のみ定義: 見出し + 帯の伸び)。未定義(concept・flow)のときは、見出しの完了後 */
    transition:
      opacity var(--anim-statement) ease-out var(--anim-statement-delay, var(--anim-title)),
      filter var(--anim-statement) ease-out var(--anim-statement-delay, var(--anim-title));
  }

  /* works の背景の帯(セクションの背景): 見出し「works」の表示が終わったら、左から右へ、素早く伸びて表示する。
     帯の幅(background-size の幅)を 0 → 100% に変える。帯は左端(background-position: 0)を起点に伸びる */
  .section-works.works__bg--anim-init {
    background-size: 0 var(--works-bg-h);
  }
  .section-works.works__bg--anim-init.is-in-view {
    background-size: 100% var(--works-bg-h);
    transition: background-size var(--works-bg-duration) ease-out var(--anim-title);
  }

  /* works の画像群: 説明文・ボタンと同じタイミング(見出しの完了後)・同じ動き(ぼかしから、はっきり表示)。
     表示が終わると、assets/js/pages/top/top.js が、回転パネルのループ(.is-flipped の付け外し)を始める。
     表示後は filter: none に戻す(blur(0) のまま残すと、回転パネルの描画に、余計な処理がかかるため) */
  .works__list--anim-init {
    opacity: 0;
    filter: blur(16px);
  }
  .works__list--anim-init.is-in-view {
    opacity: 1;
    filter: none;
    transition:
      opacity var(--anim-statement) ease-out var(--anim-statement-delay),
      filter var(--anim-statement) ease-out var(--anim-statement-delay);
  }

  /* 回転パネル: 表面が回って裏面になり(.is-flipped)、また回って表面に戻る。--works-flip-duration、少し行き過ぎて戻る */
  .section-works .works-list__panel.is-flipped .works-list__face--front {
    animation: works-flip-to-back var(--works-flip-duration) cubic-bezier(0.3, 0.9, 0.4, 1.2) forwards;
  }
  .section-works .works-list__panel.is-flipped .works-list__face--back {
    animation: works-flip-to-front var(--works-flip-duration) cubic-bezier(0.3, 0.9, 0.4, 1.2) forwards;
  }
  .section-works .works-list__panel.has-flipped:not(.is-flipped) .works-list__face--front {
    animation: works-flip-to-front var(--works-flip-duration) cubic-bezier(0.3, 0.9, 0.4, 1.2) forwards;
  }
  .section-works .works-list__panel.has-flipped:not(.is-flipped) .works-list__face--back {
    animation: works-flip-to-back var(--works-flip-duration) cubic-bezier(0.3, 0.9, 0.4, 1.2) forwards;
  }

  /* flow の工程リスト: 導入部分(ラベル・説明・ボタン)が完全に表示された後に、フェードインする。
     奇数番号は右から左へ、偶数番号は左から右へ。concept の画像・本文と同じ速さ・イージング */
  .section-flow {
    overflow-x: clip; /* 右から入る工程が、画面幅を超えて、横スクロールを出さないため(sticky には影響しない) */
  }
  .flow__item--anim-init {
    opacity: 0;
  }
  .flow__item--anim-init:nth-child(odd) {
    transform: translateX(40px);   /* 右から左へ */
  }
  .flow__item--anim-init:nth-child(even) {
    transform: translateX(-40px);  /* 左から右へ */
  }
  .flow__item--anim-init.is-in-view {
    opacity: 1;
    transform: translateX(0);
    transition:
      opacity var(--anim-body) ease-out calc(var(--anim-title) + var(--anim-statement) + var(--anim-body-gap)),
      transform var(--anim-body) ease-out calc(var(--anim-title) + var(--anim-statement) + var(--anim-body-gap));
  }

  /* 画像・本文: 縦書きコピーが完全に表示された後に、下からゆったりフェードインする */
  .concept__img--anim-init,
  .concept__body--anim-init {
    opacity: 0;
    transform: translateY(40px);
  }
  .concept__img--anim-init.is-in-view,
  .concept__body--anim-init.is-in-view {
    opacity: 1;
    transform: translateY(0);
    transition:
      opacity var(--anim-body) ease-out calc(var(--anim-title) + var(--anim-statement) + var(--anim-body-gap)),
      transform var(--anim-body) ease-out calc(var(--anim-title) + var(--anim-statement) + var(--anim-body-gap));
  }
}

/* 回転パネルの回転(表面 → 裏面、裏面 → 表面)。
   キーフレームは 0% と 100% だけにして、行き過ぎ(約 190°)と戻りは、イージング(cubic-bezier(0.3, 0.9, 0.4, 1.2))の1本の曲線で作る。
   以前は、70% で 190°/200° のキーフレームを挟んでいたため、その地点でイージングがかかり直して、回転の速さが急に切り替わり、震えて見えた */
@keyframes works-flip-to-back {
  0%   { transform: rotateY(0deg); }
  100% { transform: rotateY(180deg); }
}
@keyframes works-flip-to-front {
  0%   { transform: rotateY(180deg); }
  100% { transform: rotateY(360deg); }
}

/* 帯の動き(全体を --anim-title とする):
  0〜35%   左から伸びて見出しを覆う
  35〜47.5% 全面を覆ったまま静止(約0.2s分)
  47.5〜100% 左から縮んで消える(右端に向かって)。文字は47.5%で現れる
   各区間は緩急をつけて(cubic-bezier)、始まりと終わりをゆるやかにする */
@keyframes concept-title-band {
  0%      { transform: scaleX(0); transform-origin: left;  animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  35%     { transform: scaleX(1); transform-origin: left;  animation-timing-function: linear; }
  47.49%  { transform: scaleX(1); transform-origin: left; }
  47.5%   { transform: scaleX(1); transform-origin: right; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  100%    { transform: scaleX(0); transform-origin: right; }
}
@keyframes concept-title-text {
  0%     { color: transparent; }
  47.5%  { color: var(--color--text--2); }
  100%   { color: var(--color--text--2); }
}

/* ===== flow セクション ===== */
.section-flow {
  position: relative;
  z-index: 0;
  background-color: var(--color-base);
  padding-block: 4em 6em;
}
/* モバイル〜767px: 1列に積む。768px 以上は、フロー部の末尾の @media で2カラムに切り替える */
.flow__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
  padding-inline: 4% 6%;
}
.flow__head {
  padding: 0;
}
.section-flow .section-title__main {
  font-size: var(--section-title-fs);
  margin-bottom: 20px;
}
.flow__label {
  font-size: clamp(0.91rem, 0.91rem + (1rem - 0.91rem) * ((100vw - 375px) / (768px - 375px)), 1rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-bottom: 20px;
}
@media (width >= 768px) {
  .flow__label {
    font-size: clamp(1rem, 1rem + (1.15rem - 1rem) * ((100vw - 768px) / (1440px - 768px)), 1.15rem);
  }
}
@media (width >= 1440px) {
  .flow__label {
    font-size: clamp(1.15rem, 1.15rem + (1.26rem - 1.15rem) * ((100vw - 1440px) / (1920px - 1440px)), 1.26rem);
  }
}
.section-flow .description {
  font-size: clamp(0.91rem, 0.91rem + (1rem - 0.91rem) * ((100vw - 375px) / (768px - 375px)), 1rem);
  line-height: 2; /* concept の本文と同じ行間(1.8 → 2) */
  letter-spacing: 0.1em; /* concept の本文と同じ字間 */
  margin-bottom: 20px;
}
@media (width >= 768px) {
  .section-flow .description {
    font-size: clamp(1rem, 1rem + (1.15rem - 1rem) * ((100vw - 768px) / (1440px - 768px)), 1.15rem);
  }
}
@media (width >= 1440px) {
  .section-flow .description {
    font-size: clamp(1.15rem, 1.15rem + (1.26rem - 1.15rem) * ((100vw - 1440px) / (1920px - 1440px)), 1.26rem);
  }
}
.section-flow .btn {
  margin-top: 30px;
  position: relative;
  border-radius: var(--radius--md);
  z-index: 10;
}
.section-flow .btn::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -10;
  border-radius: var(--radius--md);
  background: var(--color-main);
  transform-origin: 100% 50%;
  transform: scaleX(0);
  transition: transform ease 0.3s;
}
.section-flow .btn:hover {
  color: var(--color--text--1);
  opacity: 1;
}
.section-flow .btn:hover::before {
  transform-origin: 0% 50%;
  transform: scaleX(1);
}

/* 工程一覧: 下罫線のみの行(カード・背景なし。先頭の上罫線はなし) */
.flow__list {
  max-inline-size: 36rem;
  margin-top: 0; /* 1列に積むため、PC幅の位置合わせは不要 */
}
.flow__item {
  display: grid;
  grid-template-columns: 3rem 1fr;
  align-items: center;
  min-height: 65px;
  padding-block: 0.75rem;
  border-bottom: 1px solid color-mix(in srgb, currentColor 25%, transparent);
}
.flow__num {
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.1em;
}
/* 工程名は、説明(.flow__desc)以上のサイズにする。モバイルは従来の 1rem のまま。768px 以上は .flow__desc と同じ値で拡大する(太字で、説明と区別) */
.flow__name {
  font-size: clamp(1rem, 1rem + (1rem - 1rem) * ((100vw - 375px) / (768px - 375px)), 1rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.8;
}
.flow__desc {
  grid-column: 2;
  font-size: clamp(0.91rem, 0.91rem + (1rem - 0.91rem) * ((100vw - 375px) / (768px - 375px)), 1rem);
  line-height: 2;
  letter-spacing: 0.1em;
}
@media (width >= 768px) {
  .flow__name,
  .flow__desc {
    font-size: clamp(1rem, 1rem + (1.15rem - 1rem) * ((100vw - 768px) / (1440px - 768px)), 1.15rem);
  }
}
@media (width >= 1440px) {
  .flow__name,
  .flow__desc {
    font-size: clamp(1.15rem, 1.15rem + (1.26rem - 1.15rem) * ((100vw - 1440px) / (1920px - 1440px)), 1.26rem);
  }
}

/* flow: 2カラム(768px 以上) */
@media (width >= 768px) {
  .section-flow {
    padding-block: 6em 8em;
  }
  .flow__inner {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
  .flow__head {
    position: sticky; /* 追従はPCのみ */
    top: 100px;
  }
  .flow__list {
    /* 初期位置: 01 の文字の高さを、flow__label の文字の高さに合わせる(PC幅)。
       = 見出しの高さ(見出しの文字サイズ × 行間1.5)+ 見出し下の余白(20px)+ (ラベル1行の高さ − 工程1行の高さ65px) ÷ 2
       見出しのサイズ・行間・余白を変えた場合は、この式も見直す */
    margin-top: calc(var(--section-title-fs) * 1.5 + 20px + (var(--section-lead-fs) * 1.5 - 65px) / 2);
  }
}

/* ===== works セクション ===== */
/* モバイル〜1023px: 縦積み(説明文 → 画像群)。画像は2列のまま、画面幅いっぱい。
   1024px 以上は、このセクションの末尾の @media で、横並び(説明文 | 画像群)に切り替える */
.section-works {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  padding-block: 8em;
  /* 画像群の幅(PC幅)。vw で指定して、スクロールバーの有無に左右されないようにする。
  63vw、1667px 以上は 1050px で止める。画像1枚 = この幅 ÷ 2(画像間の間隔は 0)。
  以前(1440px で 428px、1920px で 497px、1030px で 312px)の約1.05倍(1440px: 約1.05倍、1920px: 1.05倍、1030px: 約1.03倍)
     大きさを変えるときは、この値だけを調整する(背景の高さも、この値から計算される) */
  --works-list-w: min(1050px, 63vw);
  background-color: var(--color-base);
  /* グレーの帯(グラデーション)は、PC幅(1024px 以上)ではセクション自体の背景として、画面いっぱいの幅で敷く(background-image は末尾の @media)。
     縦積みでは、帯を説明文の領域(.section-text)に敷く(説明文の行数が変わっても、帯の下辺が画像群の上辺に付くように) */
  background-repeat: no-repeat;
  /* 帯の上辺: 見出し「works」の中心より、見出しの文字サイズの 17.8% 下(1440px で調整した位置関係)。どの幅でも同じ比率を保つ。
    = セクション上の余白(8em)+ 見出しの高さの半分(見出しの文字サイズ × 行間1.5 ÷ 2)+ 文字サイズ × 0.178
     見出しの文字サイズ・行間・上の余白を変えた場合は、この式も見直す */
  background-position: 0 calc(8em + var(--section-title-fs) * 0.928);
  /* 帯の高さ = 画像群の高さ(画像群の下端に合わせる)。幅は画面いっぱい。
     画像群の高さ = 画像1枚(16:9)の高さ × 2段(画像間の間隔は 0)= 画像群の幅 × 9/16 */
  --works-bg-h: calc(var(--works-list-w) * 9 / 16);
  background-size: 100% var(--works-bg-h);
  z-index: 0;
}

.section-works .section-text {
  min-width: 0;
  /* グレーの帯: 上辺は PC幅と同じ(見出しの中心より、文字サイズの 17.8% 下)、下辺は領域の下端 = 画像群の上辺 */
  --works-band-top: calc(var(--section-title-fs) * 0.928);
  padding: 0 6% 2.5em 4%; /* 下の 2.5em は、ボタンの下の帯の余白 */
  background-image: var(--gradation-color--bg);
  background-repeat: no-repeat;
  background-position: 0 var(--works-band-top);
  background-size: 100% calc(100% - var(--works-band-top));
}
/* 表示アニメーション: 見出しの完了後、帯が左から右へ伸びる(初期状態は no-preference のみ) */
@media (prefers-reduced-motion: no-preference) {
  .section-works.works__bg--anim-init .section-text {
    background-size: 0 calc(100% - var(--works-band-top));
  }
  .section-works.works__bg--anim-init.is-in-view .section-text {
    background-size: 100% calc(100% - var(--works-band-top));
    transition: background-size var(--works-bg-duration) ease-out var(--anim-title);
  }
}
.section-works .section-title__main {
  font-size: var(--section-title-fs);
  margin-bottom: 40px;
}
.section-works .description {
  font-size: clamp(0.91rem, 0.91rem + (1rem - 0.91rem) * ((100vw - 375px) / (768px - 375px)), 1rem);
  line-height: 2; /* concept の本文と同じ行間(1.8 → 2) */
  letter-spacing: 0.1em; /* concept の本文と同じ字間 */
  margin-bottom: 20px;
}
@media (width >= 768px) {
  .section-works .description {
    font-size: clamp(1rem, 1rem + (1.15rem - 1rem) * ((100vw - 768px) / (1440px - 768px)), 1.15rem);
  }
}
@media (width >= 1440px) {
  .section-works .description {
    font-size: clamp(1.15rem, 1.15rem + (1.26rem - 1.15rem) * ((100vw - 1440px) / (1920px - 1440px)), 1.26rem);
  }
}
.section-works .btn {
  margin-top: 30px;
  position: relative;
  border-radius: var(--radius--md);
  z-index: 10;
}
.section-works .btn::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -10;
  border-radius: var(--radius--md);
  background: var(--color-main);
  transform-origin: 100% 50%;
  transform: scaleX(0);
  transition: transform ease 0.3s;
}
.section-works .btn:hover {
  color: var(--color--text--1);
  opacity: 1;
}
.section-works .btn:hover::before {
  transform-origin: 0% 50%;
  transform: scaleX(1);
}

.section-works .works-list {
  flex: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0; /* 画像間の間隔なし */
  min-height: 0; /* 最小の高さは、PC幅のみ(末尾の @media) */
  align-self: stretch; /* 縦積みでは、画面幅いっぱい。帯の下辺(説明文の領域の下端)と、画像群の上辺を付ける */
}
/* 画像は、すべて 16:9 に統一する(元画像は約 2:1 のため、左右を少し切り抜く) */
/* 画像パネル(2×2): 表面(作品画像)と裏面を重ね、Y軸まわりに回転させる(assets/js/pages/top/top.js が .is-flipped を付け外しする)。
   参考: recruit.life-design.okinawa の FV の回転パネル */
.section-works .works-list__panel {
  position: relative;
  aspect-ratio: 16 / 9;
  perspective: 1000px;
}
.section-works .works-list__face {
  position: absolute;
  inset: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  will-change: transform; /* 回転中に、描画の層を分けて、ちらつき・震えを抑える */
}
.section-works .works-list__face--front {
  transform: rotateY(0deg);
}
.section-works .works-list__face--back {
  transform: rotateY(180deg);
}
.section-works .works-list img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 16:9 のパネルに合わせて切り抜く */
}

/* works: 横並び(1024px 以上)。説明文 | 画像群 */
@media (width >= 1024px) {
  .section-works {
    flex-direction: row;
    background-image: var(--gradation-color--bg); /* 帯は、セクション自体の背景 */
  }
  .section-works .section-text {
    flex: 1 1 0; /* 画像群の幅を除いた残りを、説明文の列にする */
    padding-bottom: 0;
    background-image: none;
  }

  /* 説明文の列が狭いとき(約 1024〜1190px)、ボタンが帯の下端からはみ出さないようにする。
     ・文字を1行に収める(2行に折り返すと、ボタンが約 20px 高くなる)
     ・説明文とボタンの間隔を、狭い幅ほど詰める */
  .section-works .btn {
    white-space: nowrap;
    /* ボタンの文字+左右の余白(約 16em)が、説明文の列の幅(約 27vw − 13.5px)に収まる大きさ。
       列が広い幅では、通常の大きさ(本文の文字サイズ)のまま */
    font-size: min(var(--section-lead-fs), calc(1.6875vw - 0.84px));
    /* 説明文との間隔: 1024px で 14px、1200px で 30px(通常)まで、幅に応じて広げる */
    margin-top: clamp(14px, calc(14px + (100vw - 1024px) * 0.0914), 30px);
  }

  .section-works .works-list {
    width: var(--works-list-w);
    /* 画像群の最小の高さ。下限(1024px)での高さ(約 362px)。これより小さくしない */
    min-height: 362px;
    align-self: flex-start; /* 説明文の列が高くても、画像群の枠を縦に引き伸ばさない(16:9 を保つ) */
    /* 画像群の上辺を、背景(グレーの帯)の上辺に合わせる。
       背景の上辺 = セクション上の余白(8em)+ 見出しの文字サイズ × 0.928(.section-works の background-position と同じ式)
       画像群の上辺 = セクション上の余白(8em)+ このmargin-top → margin-top は、式の後半だけ */
    margin-top: calc(var(--section-title-fs) * 0.928);
  }
}