/* ============================================================
   Deal - Unique But United  |  トップページ専用スタイル
   Figma: HP / node 363-1051

   共通トークン・コンポーネント・フッターは common.css
   （このファイルより先に common.css を読み込むこと）
   設計方針：SPファースト（モバイル基準 → min-width でPC拡張）
   ============================================================ */

/* ============================================================
   OPENING（握手→ロゴ 立ち上がりアニメーション）
   本体は assets/opening.svg（Figma書き出し・4.876s・1回再生で終端保持）。
   終了後 .is-done でぼやっと消える（JSがタイマー制御）
   ============================================================ */
.opening {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--teal-300); /* スタートはブランドティール */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.9s ease, filter 0.9s ease, background 0.6s ease;
}
.opening.is-ended {
  background: var(--neutral-50); /* アニメーション終了の瞬間にクリームへ */
}
.opening.is-done {
  opacity: 0;
  filter: blur(14px); /* ぼやっと消える */
  pointer-events: none;
}
body.is-opening { overflow: hidden; } /* オープニング中はスクロール固定 */

/* 本編：オープニング中はぼけて待機 → .page-reveal でゆっくりピントが合いながら登場 */
body.is-opening > :not(.opening) { filter: blur(16px); }
body.page-reveal > :not(.opening) {
  filter: blur(0);
  transition: filter 1.6s ease;
}

/* アニメーションSVG（16:9）を画面中央に小さめ表示（0.7倍） */
/* 中身はJSがインライン展開するSVG（1707×960）。
   以前は <img> で、幅指定＋max-height:58vh で高さも抑えていた。
   箱＋子SVGの構成では max-height はクリップになってしまうので、
   同じ結果になる幅の上限に置き換える：
   高さ ≤ 58vh ⇔ 幅 ≤ 58vh × (1707/960) = 103.1vh */
.opening__movie {
  position: relative; /* burstより手前 */
  width: min(58vw, 512px, 103.1vh);
  aspect-ratio: 1707 / 960; /* 読み込み前もガタつかないよう場所を確保 */
}
.opening__movie svg { display: block; width: 100%; height: 100%; }

/* SVG内のクリーム丸と同心で画面全体へ広がる円。
   丸の拡大開始（タイムライン59%）にJSが .phase-circle を付与し、
   SVGの外側までシームレスに背景がクリームに変わる */
.opening__burst {
  position: absolute;
  left: var(--burst-x, 50%);
  top: var(--burst-y, 50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--neutral-50);
  transform: translate(-50%, -50%) scale(0);
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1); /* SVG側のease-outに合わせる */
}
.opening.phase-circle .opening__burst {
  transform: translate(-50%, -50%) scale(var(--burst-scale, 300));
}

@media (prefers-reduced-motion: reduce) {
  .opening { display: none; }
}

.blog__list .article-card:nth-child(2) { --reveal-delay: 0.08s; }
.blog__list .article-card:nth-child(3) { --reveal-delay: 0.16s; }

/* 握手ビジュアルと、その入れ替え先（ハート＋手）の寸法。
   .hero と .band__inner の両方から参照するので、共通の親 .fv に置く。
   ・--hero-vis-w … 握手の表示幅
   ・--hero-morph-* … ハート＋手は「握手と同じ高さ」の0.8倍
     （520px時に高さ394px・幅311px＝webm素材800pxに対し0.78倍で等倍以内）
   ⚠️ 44% を含むので、height/top の文脈で使うと「親の高さ」基準になる。
   幅・水平方向（width / right）だけで使うこと */
/* 握手ロック用スペーサー。高さはJS（layoutFv）が --fv-extra に入れる。
   960px未満はFV演出自体を行わないので0のまま */
.fv__spacer { height: var(--fv-extra, 0px); }

.fv {
  --hero-vis-w: min(520px, 44%);
  --hero-vis-h: calc(var(--hero-vis-w) * 1094 / 1156);    /* hero.png の比率 */
  --hero-morph-h: calc(var(--hero-vis-h) * 0.8);
  --hero-morph-w: calc(var(--hero-morph-h) * 800 / 1014); /* webm の比率 */
}

/* ============================================================
   HERO   —  SP: 縦積み / PC: 重ね配置
   ============================================================ */
.hero {
  position: relative;
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  /* 上余白はロゴカード（top:clamp(24px,6vw,65px) + 高さ約140px）の下に
     テキストが確実に収まるよう連動させる（SP〜タブレットで先頭がテキストのため） */
  padding: clamp(188px, calc(6vw + 164px), 229px) var(--edge) clamp(48px, 8vw, 72px);
  display: flex;
  flex-direction: column;
}

/* ============================================================
   SPのFV演出：ティール帯が競り上がり、握手がふわっと透過して消える
   PC（960px以上）と同じ考え方だが、SPは以下が違う：
   ・握手は絶対配置ではなく通常フローの中にある
   ・入れ替え先のハート＋手は帯の中の .band__motion（既存）なので、
     PCのようなクロスフェード（.band__morph）は使わない＝握手は消えるだけ
   ============================================================ */
@media (max-width: 959.98px) {
  .fv .hero {
    position: sticky;
    top: 0;
    /* svh＝ブラウザのアドレスバーが出ている状態の高さ。
       100vh だとバーのぶん実際の表示領域からはみ出して下が切れる */
    height: 100svh;
    /* 既定の188pxのままだと中身（コンテンツ265＋画像325＋下余白48）が
       画面を25px超える。ロゴカードはSPで0.8倍＝下端136px付近なので、
       150pxまで詰めても文字とは重ならない */
    padding-top: 150px;
    /* 帯（z2）より前面に置き、握手が帯の上に乗った状態からフェードさせる */
    z-index: 3;
    /* 透明になった文字が下の帯のタップを塞がないように */
    pointer-events: none;
  }
  .fv .hero a,
  .fv .hero img,
  .fv .hero button { pointer-events: auto; }
  .fv .band { position: relative; z-index: 2; }
}
/* .hero .logo-card の位置・サイズは common.css の「ヘッダー（全ページ共通・
   スクロール追従）」で配下ページと一括管理している（fixed＋body.is-scrolledで縮小）。
   ここで position:absolute を指定するとそれを打ち消してしまうので書かないこと */
/* 握手ビジュアル（assets/hero.png・1156×1094・握手が横幅の89%）。
   一時期 webm 動画（960×540）に差し替え、握手が同じ大きさに見えるよう表示幅を
   1.44倍（460→664 / 520→750）にしていたが、素材の解像度が足りずRetinaで粗く
   なるため静止画に戻した。倍率も元の値に戻してある。
   動画に戻す場合は表示幅とリード文幅（下の.hero__lead）を必ずセットで見直すこと */
.hero__image {
  order: 1;                   /* SPではテキストの後（下）に表示 */
  width: min(100%, 460px);
  height: auto;
  align-self: flex-end;
  /* リード文との間隔。PCでは下の960px以上で絶対配置＋margin:0 になるのでSP専用 */
  margin-top: clamp(12px, 3vw, 24px);
}
/* 握手→ハートの入れ替え用（実体はティール帯の中）。
   960px未満ではティール帯が握手に重ならないので出さず、SP用の .band__motion を使う */
.band__morph { display: none; }
.hero__title {
  font-family: var(--font-maru); /* Zen Maru Gothic */
  font-weight: 700;
  font-size: var(--fs-display);
  line-height: 1.4;
  letter-spacing: clamp(10px, 5vw, 25.66px);
  color: var(--teal-900);
  white-space: nowrap;
}
/* サイズは「1行目の "UX専門家と…チームで動く、"（24文字）が必ず1行に収まる」ことから
   逆算している。以前は --fs-ttl（17〜27px）＋字間2pxで、24文字が445px必要になり
   SPの本文幅343pxに収まらず「チームで動く、」だけが2行目に落ちていた。
   実測式： 必要幅 = 24 × フォントサイズ + 24 × 字間 − 9px
   本文幅は 100vw − 32px なので、字間1pxのとき フォントサイズ ≦ (100vw − 47) / 24
   → 4.17vw − 1.96px。安全側に丸めて 4.15vw − 2px。
   ⚠️ このリード文の文字サイズ・字間を触るときは、必ず1行目の折り返しを実測し直すこと */
.hero__lead {
  margin-top: clamp(32px, 6vw, 78px);
  font-weight: 700;
  font-size: clamp(11px, calc(4.15vw - 2px), 15px);
  line-height: 2.1;   /* 1.85から拡大。行間を少し広げて読みやすく */
  letter-spacing: 1px;
  color: var(--teal-900);
  opacity: 0.7;
}

/* ============ MESSAGE BAND (teal card) ============ */
.band {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding: 0 var(--edge) clamp(24px, 4vw, 40px);
}
.band__inner {
  position: relative;   /* .band__morph の配置基準 */
  background: var(--teal-300);
  border-radius: var(--radius);
  padding: var(--pad-card);
  color: #fff;
}
.band__title {
  font-size: var(--fs-jp-xl);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 5px;
}
.band__sub {
  margin-top: 24px;
  font-size: var(--fs-body); /* 下の本文と同サイズに。太字は維持 */
  font-weight: 700;
  line-height: 1.85;
  letter-spacing: 2px;
}
.band__body {
  margin-top: 24px;
  font-size: var(--fs-body);
  line-height: 1.85;
  letter-spacing: 2px;
}
/* SP専用：帯の中（ボタンの上）に置くハート＋手。
   PCは握手からの入れ替え（.band__morph）が同じ帯の中に出るので960px以上で非表示にする。
   小さくて印象が弱かったので1.4倍に拡大（375pxで142.5→199.5px）。
   素材は800×1014でdpr2の等倍上限は400px。上限280pxでもその内側なので粗くならない */
.band__motion {
  display: block;
  width: clamp(168px, 53.2vw, 280px);
  height: auto;
  margin: clamp(20px, 5vw, 32px) auto 0;
}

/* ============================================================
   SERVICE  (白い面)
   背景：SP=画面端まで全幅 / PC=画面両端から80px空けて伸長
   中身：.section-inner で最大幅・中央寄せ
   ============================================================ */
.service {
  background: #fff;
  border-radius: 32px;
  padding: var(--pad-section) var(--edge) 0; /* PCで左右40px＝白面の内側padding。下はPRODUCTの箱で終わるので0に */
  /* FVの握手ロック用スクロール距離（--fv-extra）ぶん引き上げ、
     ティール帯との見た目の隙間を48pxに詰める */
  margin-top: calc(-1 * var(--fv-extra, 0px) + 48px);
}
/* SERVICE の中身は頭打ちを外し、白面の内側padding（40px）まで伸長。
   consulting / product の背景色が白面いっぱいに広がる。 */
.service .section-inner {
  max-width: none;
  display: flex;
  flex-direction: column;
  gap: var(--gap-stack);
}
/* SERVICE の見出し＋リード文：縦積み・中央揃え（PCでも横並びにしない） */
.service .section-head {
  max-width: var(--shell);
  align-self: center;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
}
.service .section-head__ttl { width: auto; }
/* SPは本文だけ左寄せに戻す。中央揃えのまま5〜6行に折り返すと行頭がガタつき、
   両端がギザギザして読みにくいため（見出し2つは中央のまま） */
@media (max-width: 599.98px) {
  .service .section-head__body p { text-align: left; }
}
/* ハート＋手のアニメーション（.service-motion / .service-intro-row）はこのセクションから
   削除済み。同じwebmは握手からの入れ替え（.band__morph）と
   SPのティール帯内（.band__motion）で使っている */

/* ---- CONSULTING (warm-50 カード) ---- */
.consulting {
  background: var(--neutral-50);
  border-radius: var(--radius);
  padding: var(--pad-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(40px, 6vw, 64px);
}
/* カード内のコンテンツはシェル幅で中央寄せ：
   カード自体が画面中央配置なので、見出しの縦ラインが他セクションと揃う */
.consulting__head,
.consulting__lower,
.consulting__links {
  width: 100%;
  max-width: var(--shell);
}
/* CTAボタンをテキスト下に左揃え配置し、罫線で区切ってからカードを置く */
.consulting__divider {
  border: none;
  border-top: 1px solid rgba(14, 59, 52, 0.15);
  margin: clamp(32px, 4vw, 48px) 0 0;
}
.consulting__catch {
  margin-top: 24px;
  font-size: var(--fs-jp-lg);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 5px;
  color: var(--teal-400);
}
/* 2段落。段落間の間隔は .service-intro__body と同じ考え方（p + pで1文字ぶん空ける） */
.consulting__body { margin-top: 24px; }
.consulting__body p {
  font-size: var(--fs-body);
  line-height: 1.85;
  letter-spacing: 2px;
  color: var(--teal-900);
  opacity: 0.8;
}
.consulting__body p + p { margin-top: 1em; }
/* 罫線下の小見出し + Expert Reviewカード */
.consulting__sub-heading {
  font-family: var(--font-inter);
  font-weight: 700;
  font-size: var(--fs-body);
  letter-spacing: 3px;
  /* すぐ上の罫線（.consulting__divider）と同じ濃緑を薄めた色にして系統を揃える。
     ⚠️ この見出しは15〜16pxの太字なのでWCAG上は「通常テキスト」扱いで、
     必要なのは 3:1 ではなく 4.5:1（3:1で済むのは24px以上、または太字18.66px以上）。
     0.68 は warm-50 地で 4.56:1 とその下限。これ以上薄くすると基準を割るので下げないこと */
  color: rgba(14, 59, 52, 0.68);
  margin-bottom: 12px;
}
/* Expert Reviewカード1枚のみ（User Research削除済み）。
   PCでもカード幅を抑えてバランスを取る */
.consulting__links .menu-card { max-width: 560px; }

.menu-card {
  position: relative;
  display: block;
  border-radius: 24px;
  padding: clamp(24px, 4vw, 32px);
  padding-right: clamp(80px, 12vw, 110px); /* 矢印ボタンぶんを確保 */
  color: #fff;
  transition: transform 0.25s ease;
}
/* Expert Review カード右上に浮かせる装飾（虫眼鏡・透過WebM）
   動画キャンバス(16:9)の左右23%・上15%が透過余白のため、
   見た目が従来(本体144px@1440)と揃うよう幅とオフセットを補正 */
.menu-card__deco {
  position: absolute;
  top: clamp(-56px, -2.9vw, -32px);
  right: clamp(-76px, -3.68vw, -36px); /* 左へ16px移動 */
  width: clamp(180px, 16.67vw, 300px);  /* 本体換算 128px@1440（少し縮小） */
  height: auto;
  filter: drop-shadow(0 10px 16px rgba(43, 37, 32, 0.18));
  pointer-events: none;
}
/* User Researchカード削除済み。.menu-card__deco--left は不要 */
.menu-card:hover { transform: translateY(-3px); }
.menu-card--amber { background: var(--accent-yellow-deep); }
.menu-card__en {
  display: block;
  font-family: var(--font-inter);
  font-weight: 700;
  font-size: var(--fs-jp-md);
  line-height: 1.3;
  letter-spacing: 5px;
}
.menu-card__jp {
  display: block;
  font-weight: 700;
  font-size: clamp(11px, 0.83vw, 16px); /* 12px@1440 */
  line-height: 1.85;
  letter-spacing: 2px;
}
.menu-card__desc {
  display: block;
  margin-top: 8px;
  font-size: var(--fs-body-sm); /* 16px@1440（本文よりひと回り小さく） */
  line-height: 1.85;
  letter-spacing: 2px;
}
/* 見た目（サイズ48px・配色・ホバーで矢印が3px進む）は共通の .btn-round--invert 側。
   ここではカード内での「配置」だけを持つ（.rapiq-card__arrow と同じ扱い）。
   以前はここだけ独自に 48〜65px のクレイ質感の円＋ベタ打ちの「→」文字で作っていて、
   サイズも矢印の形も他の丸矢印と揃っていなかった。
   クレイの立体感は .button-cta / .header-cta と同じ inset 2本＋外側3本で作る */
.menu-card__arrow {
  position: absolute;
  right: clamp(16px, 3vw, 24px);
  bottom: clamp(16px, 3vw, 24px);
  background: #fbf7ec;
  box-shadow:
    inset 3px 3px 7px rgba(255, 255, 255, 0.95),
    inset -4px -4px 8px rgba(198, 185, 156, 0.5),
    0 4px 5px -2px rgba(184, 170, 138, 0.5),
    0 6px 8px rgba(14, 59, 52, 0.1),
    0 10px 16px rgba(14, 59, 52, 0.1);
}
/* User Research カードは削除済み。
   .menu-card--static / .menu-card--plain は不要になったため撤去 */

/* ---- PRODUCT (dark card / richka風ピン留め展開) ----
   1. 最初はタイトル＋リード文だけの角丸カード
   2. スクロールで差し掛かると --expand 0→1 で画面幅いっぱいに展開
   3. sticky で画面に固定され、中身（intro/bento）が下から流れる
   4. 中身の底に到達すると固定解除（JS: product-stage の高さで制御） */
.product-stage { position: relative; } /* 高さはJSが設定（スクロール距離） */
.product {
  --expand: 0;
  --breakout: 0px; /* 画面左端までの距離（JSが計測） */
  background: var(--teal-900);
  border-radius: var(--radius); /* 展開しても角丸を保持（全画面時は四隅に背景が覗く） */
  margin-inline: calc(var(--expand) * -1 * var(--breakout));
  transition: margin 0.3s ease-out, border-radius 0.3s ease-out, height 0.3s ease-out, top 0.3s ease-out; /* 段階更新の補間 */
  overflow: hidden;
}
.product__inner {
  width: 100%;
  padding-inline: clamp(24px, 6vw, 120px);
  will-change: transform;
}
.product__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 1.6vw, 24px);
  padding-block: 48px; /* 始まりは上下48pxの小さな箱 */
  text-align: center;
}
.product__rest {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(24px, 2.5vw, 40px);
  padding-bottom: var(--pad-section);
}
/* ピン有効時（JSが .is-pin を付与）
   カード高さは --card-h（小箱 → 100vh へJSが補間）。
   --card-top = (100vh - card-h) / 2 で常に画面中央に固定され、
   中央から上下に広がって全画面化する */
.product-stage.is-pin .product {
  position: sticky;
  top: var(--card-top, 0px);
  height: var(--card-h, auto);
}
.product__ttl { color: #fff; width: 100%; text-align: center; }

/* タイトル直下のリード文（中央揃え） */
.product__lead {
  max-width: 720px;
  text-align: center;
  font-size: var(--fs-body);
  line-height: 1.85;
  letter-spacing: 2px;
  color: #fff;
  opacity: 0.8;
}
.product__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 480px;
}
/* SPはロゴが主張しすぎるので0.7倍に落とす（180 → 126px）。
   HTMLの width="180" 属性より詳細度で勝つのでCSS側で上書きできる */
@media (max-width: 599.98px) {
  .product__brand img { width: 126px; }
}
.product__ruby {
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 9px;
  color: #fff;
  text-indent: 9px; /* letter-spacing の光学中央合わせ */
}
@media (min-width: 960px) {
}

/* bento：SPは縦積み、PC(768〜)で強弱のあるタイル配置
   3×3セルに、大(2×2)＋小(1×1)＋AI(縦1×2)＋月額(横2×1)を敷き詰める */
.product__bento {
  width: 100%;
  max-width: 960px;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(12px, 1.4vw, 20px);
}
/* SP縦積み時の最低高さ（モチーフが潰れないように） */
.bento-hero.bento-tile { min-height: 240px; }
.bento-sub.bento-tile { min-height: 170px; }
.bento-ai.bento-tile { min-height: 280px; }
.bento-cost.bento-tile { min-height: 120px; }
@media (min-width: 768px) {
  .product__bento {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    /* 行高は「最低値」だけ決めて、中身が入りきらなければ伸ばす。
       固定値(clamp(118px,12vw,170px))だと bento-hero の中身
       （リード文＋工程モック clamp(230px,25vw,292px)）が必ず行高を超え、
       .bento-tile の overflow:hidden で下が切れていた。
       行高2つ分(24vw)＋gap から padding(4.4vw)を引くと約21vwしか残らないのに、
       モックだけで25vw使う——という取り合いなので、auto で伸ばして解消する */
    grid-auto-rows: minmax(clamp(118px, 12vw, 170px), auto);
  }
  .bento-hero { grid-column: 1 / 3; grid-row: 1 / 3; }
  .bento-sub  { grid-column: 3 / 4; grid-row: 1 / 2; }
  .bento-ai   { grid-column: 3 / 4; grid-row: 2 / 4; }
  .bento-cost { grid-column: 1 / 3; grid-row: 3 / 4; }
  .bento-tile { min-height: 0 !important; }
}

/* ---- bento中身（Figma 739-179：RapiQ訴求4タイル） ----
   背景はFigma各タイルのグラデーション（白→ラベンダー→ブルー→ティール、角度違い） */
.bento-tile {
  position: relative;
  overflow: hidden;
  border-radius: clamp(12px, 1.4vw, 20px);
  padding: clamp(20px, 2.2vw, 32px);
}
.bento-hero { background: linear-gradient(171deg, #ffffff 26%, #bfbcec 54%, #95acdf 71%, #54d3be 92%); }
.bento-sub  { background: linear-gradient(152deg, #ffffff 14%, #c7c3ef 71%, #93b0e2 85%, #5fd6c2 99%); }
.bento-ai   { background: linear-gradient(209deg, #ffffff 22%, #bcb9ea 52%, #8fa9dd 70%, #52cfbb 92%); }
.bento-cost { background: linear-gradient(144deg, #ffffff 15%, #c2bfee 46%, #96aee0 68%, #57d4bf 92%); }

/* メイン（bento-hero）：スピード訴求コピー＋公式hero右側の「調査設計」モック */
.bento-lead {
  font-size: var(--fs-body-sm);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 1px;
  color: var(--teal-900);
}
.bento-lead strong { font-size: calc(var(--fs-body-sm) + 5px); }

/* ============ メインタイル：Figmaレイアウト（左=工程画面／右=ピル＋箱） ============ */
.rq {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* 4つの工程画面を「同じグリッドセル」に重ねる。
   以前は height を clamp(230px,25vw,292px) で固定し各画面を absolute で
   重ねていたが、画面が狭いほど中の行が折り返して背が高くなるため、
   768px幅では調査設計の中身が320px必要なのに枠が230pxしかなく、
   下が overflow:hidden で切れていた（92px不足）。
   grid-area を全画面同じにすると、コンテナは「一番背の高い画面」に揃うので
   どの画面でも切れず、かつ切替時に高さが変わらない（＝右カラムもガタつかない）
   ＝固定高さの狙いはそのまま満たせる */
.rq__screens {
  display: grid;
  /* minmax(0,1fr) が無いと、グリッド項目の既定 min-width:auto により
     列が「一番幅を要求する画面の min-content」まで広がり、SP幅で
     タイルから8pxはみ出していた（高さと同じ理屈が横にも効いてしまう） */
  grid-template-columns: minmax(0, 1fr);
  min-height: clamp(230px, 25vw, 292px);
}
.rq__screen {
  grid-area: 1 / 1;
  min-width: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) scale(0.985);
  transition: opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1),
              visibility 0s linear 0.9s;
}
.rq__screen.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1),
              visibility 0s;
}
/* 右カラム：ステップインジケーター＋ピル型の工程名＋キャプション箱（Figma 739:442 / 739:447） */
.rq__side { display: flex; flex-direction: column; align-items: center; }

/* ---- 4工程のインジケーター「1/4」----
   以前は点4つ＋つなぎ線だったが、点が並ぶと「ドラッグして動かせるスライダー」に
   見えるのに操作できず紛らわしい（レビュー指摘）。
   自動で進むことが伝わる分数表記に変更した */
.rq-steps {
  display: flex;
  align-items: baseline;
  gap: 2px;
  margin-bottom: 12px;
  font-family: var(--font-inter);
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 1;
  color: rgba(14, 59, 52, 0.45);
}
/* 現在の工程だけピルと同じ色で立たせる */
.rq-steps__now {
  font-size: 18px;
  color: #0e3b34;
}
.rq-steps__sep,
.rq-steps__total { font-size: 13px; }

.rq__pill {
  z-index: 1;
  padding: 8px 24px;
  border-radius: 999px;
  background: #65efd8;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--teal-900);
  white-space: nowrap;
}
.rq__cap {
  margin-top: -14px;
  width: 100%;
  min-height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 18px 20px;
  border-radius: 8px;
  background: rgba(14, 59, 52, 0.10);
}
.rq__cap p {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 1px;
  color: #fff;
  text-align: center;
}
@media (min-width: 600px) {
  .rq { flex-direction: row; align-items: stretch; gap: 16px; }
  .rq__screens { flex: 1 1 auto; min-width: 0; }
  .rq__side { flex: 0 0 34%; max-width: 200px; justify-content: flex-start; }
  .rq__cap { flex: 1; }
}

/* ---- 各工程画面の共通コンテナ（白い製品画面） ---- */
.rapiq-mock__card,
.rq-interview,
.rq-analysis {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid #dad8f4;
  border-radius: 12px;
  height: 100%;
  overflow: hidden;
}
.rapiq-mock__card { padding: 12px 14px; }
.rapiq-mock__q { display: flex; align-items: flex-start; gap: 6px; }
.rapiq-mock__ai {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #d9f4ee;
  font-size: 9px;
  font-weight: 700;
  color: var(--teal-900);
}
.rapiq-mock__q-bubble {
  background: #f2f1fb;
  border-radius: 4px 10px 10px 10px;
  padding: 4px 10px;
  font-size: 10px;
  letter-spacing: 0.5px;
  color: var(--neutral-900);
}
.rapiq-mock__cta { margin-top: 6px; display: flex; justify-content: flex-end; align-items: center; gap: 6px; }
.rapiq-mock__btn {
  padding: 4px 12px;
  border-radius: 6px;
  background: #4b9385;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #fff;
}
.rapiq-mock__u {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--teal-900);
  font-size: 9px;
  font-weight: 700;
  color: #fff;
}
.rapiq-mock__typing {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #1abdaa;
}
.rapiq-mock__typing::before,
.rapiq-mock__typing::after { content: ""; flex: 1; height: 1px; background: rgba(26, 189, 170, 0.35); }
.rapiq-mock__rows { margin-top: 6px; list-style: none; display: flex; flex-direction: column; gap: 5px; }
.rapiq-mock__rows li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1px;
  border: 1px solid #cdeae2;
  border-radius: 8px;
  background: #fff;
  padding: 5px 10px 5px 30px;
}
/* 記入済みを示す緑チェック（公式の完了行に寄せる） */
.rapiq-mock__rows li::before {
  content: "✓";
  position: absolute;
  left: 9px;
  top: 8px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #22b07d;
  color: #fff;
  font-size: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rapiq-mock__val { padding-left: 0; }
.rapiq-mock__label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--teal-900);
}
.rapiq-mock__label em { font-style: normal; font-size: 8px; color: #b89a2c; }
.rapiq-mock__val { padding-left: 18px; font-size: 9.5px; letter-spacing: 0.5px; color: var(--neutral-700); }
/* 画面が表示された時に、行が順に立ち上がる（自動入力演出） */
.rapiq-mock__rows li { opacity: 0; transform: translateY(6px); }
.rq__screen.is-active .rapiq-mock__rows li {
  animation: rapiq-row-in 0.5s ease forwards;
  animation-delay: calc(var(--i) * 0.5s + 0.25s);
}
@keyframes rapiq-row-in { to { opacity: 1; transform: none; } }

/* ---- 2 AI実査：AIインタビュー画面（実画面をHTML/CSSで再現） ----
   スクショ画像だと枠比(1.14〜1.24)と画像比(1.68)が合わず左右が切れるため、
   1(調査設計)・3(分析)と同じく要素で組む。ここだけ製品画面がダークなので
   共通コンテナの白背景を上書きしている。
   文字は小さいが、他の工程画面(9〜11px)と同じ水準に揃えてある */
.rq-interview {
  display: flex;
  flex-direction: column;
  background: #10111f;
  border-color: #2b2c47;
  color: #fff;
}
/* 上部バー：ロゴ／調査名／録画中・タイマー・終了 */
.rq-iv__bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
/* rapiq-logo.svg は「Rapi」が白抜き。ここはダーク面なのでそのまま置ける */
.rq-iv__logo { width: 34px; height: auto; flex-shrink: 0; }
.rq-iv__subject {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 7.5px;
  letter-spacing: 0.3px;
  color: rgba(255, 255, 255, 0.72);
}
.rq-iv__rec {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 7px;
  color: rgba(255, 255, 255, 0.6);
}
.rq-iv__rec::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #e8453c;
}
.rq-iv__time {
  flex-shrink: 0;
  font-family: var(--font-inter);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.rq-iv__end {
  flex-shrink: 0;
  padding: 2px 6px;
  border-radius: 4px;
  background: #e8453c;
  font-size: 7px;
  font-weight: 700;
}

.rq-iv__body { flex: 1; min-height: 0; display: flex; }

/* 左：ステータス→質問→オーブ→操作ボタン */
.rq-iv__stage {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 10px;
  text-align: center;
}
.rq-iv__status { font-size: 7px; letter-spacing: 0.5px; color: rgba(255, 255, 255, 0.45); }
.rq-iv__q {
  font-size: 9.5px;
  line-height: 1.6;
  letter-spacing: 0.3px;
  color: #fff;
}
.rq-iv__orb {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  /* 実画面どおり、左上グリーン→右下ラベンダー。周囲にティールのグロー */
  background: radial-gradient(circle at 34% 30%, #a9dcc4 0%, #8fd0c0 38%, #b6a2e2 78%, #c2a6e8 100%);
  box-shadow: 0 0 0 8px rgba(101, 239, 216, 0.10), 0 0 26px 12px rgba(101, 239, 216, 0.22);
  animation: orb-pulse 2.8s ease-in-out infinite;
}
/* 右：カメラサムネ＋会話の記録 */
.rq-iv__side {
  flex: 0 0 37%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 6px;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
/* ビデオ通話のサムネ（assets/interview-thumb.webp）。
   顔が中央に来るよう object-position で寄せている */
.rq-iv__cam {
  flex-shrink: 0;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 5px;
  object-fit: cover;
  object-position: center 32%;
}

.rq-iv__log-head {
  flex-shrink: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px;
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
}
.rq-iv__log-head em { font-style: normal; font-size: 6.5px; color: rgba(255, 255, 255, 0.45); }
.rq-iv__log {
  list-style: none;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  overflow: hidden;
}
.rq-iv__log li { display: flex; gap: 4px; }
.rq-iv__who {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  font-size: 5px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.75);
}
/* AI側は発言者アイコンもオーブと同じ配色にする */
.rq-iv__who--ai { background: linear-gradient(140deg, #a9dcc4 0%, #b6a2e2 100%); }
.rq-iv__msg {
  min-width: 0;
  font-size: 6.5px;
  line-height: 1.55;
  letter-spacing: 0.2px;
  color: rgba(255, 255, 255, 0.62);
}

/* ---- 3 分析：ファインディング抽出 ---- */
.rq-analysis { padding: 14px 16px; }
.rq-analysis__head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--teal-900);
}
.rq-analysis__head em { font-style: normal; color: #1abdaa; }
.rq-analysis ul { list-style: none; margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.rq-analysis li {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #cdeae2;
  border-radius: 8px;
  background: #fff;
  padding: 7px 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--teal-900);
}
.rq-badge {
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 9px;
  color: #fff;
}
.rq-badge--u { background: #eb4365; }
.rq-badge--i { background: #e79b3f; }
.rq-badge--n { background: #1abdaa; }
.rq-analysis__tags { margin-top: 10px; display: flex; gap: 6px; flex-wrap: wrap; }
.rq-analysis__tags span {
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(123, 116, 216, 0.14);
  font-size: 9px;
  font-weight: 700;
  color: #6a63cf;
}

/* ---- 4 レポート画面（固定高さカードいっぱいに上端基準で敷く） ---- */
.rq__report {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  border-radius: 12px;
  border: 1px solid #dad8f4;
}

@media (prefers-reduced-motion: reduce) {
  .rapiq-mock__rows li { animation: none; opacity: 1; transform: none; }
  .rq__screen { display: none; }
  .rq__screen.is-active { display: block; animation: none; }
  .rq-iv__orb { animation: none; }
}

/* 共通の小見出し */
.bento-ttl {
  font-size: var(--fs-body-sm);
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 1px;
  color: var(--teal-900);
}

/* 並列インタビュー（右上・小）：タイトルは上、オーブ吹き出しは下に配置 */
.bento-sub { display: flex; flex-direction: column; }
.bento-sub .bento-ttl { font-size: 13px; line-height: 1.5; letter-spacing: 0.5px; }
/* flex-shrink:0 が無いと、行高が足りないときにここが潰れて（60px→36px）
   中央のオーブ(46px)が上下に見切れる */
.bento-chat { position: relative; margin-top: auto; height: 60px; flex-shrink: 0; }
.bento-chat__bubble {
  position: absolute;
  height: 26px;
  width: 58%;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.85);
}
/* 左右の吹き出しが交互に出たり消えたりして「会話している」感を出すループ */
.bento-chat__bubble--l { left: 0; top: 0; animation: bubble-talk 3.4s ease-in-out infinite; }
.bento-chat__bubble--r { right: 0; bottom: 0; background: rgba(255, 255, 255, 0.6); animation: bubble-talk 3.4s ease-in-out infinite 1.7s; }
@keyframes bubble-talk {
  0%        { opacity: 0; transform: translateY(6px) scale(0.96); }
  8%, 42%   { opacity: 1; transform: translateY(0) scale(1); }
  50%, 100% { opacity: 0; transform: translateY(6px) scale(0.96); }
}
@media (prefers-reduced-motion: reduce) {
  .bento-chat__bubble--l, .bento-chat__bubble--r { animation: none; opacity: 1; transform: none; }
}
.bento-orb {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  z-index: 1;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #c3cdf4 0%, #96a4ea 45%, #7b74d8 78%, #6a63cf 100%);
  box-shadow:
    0 0 0 8px rgba(101, 239, 216, 0.22),
    0 0 22px 10px rgba(101, 239, 216, 0.32);
  animation: orb-pulse 2.8s ease-in-out infinite;
}
@keyframes orb-pulse {
  0%, 100% { scale: 1;    box-shadow: 0 0 0 8px rgba(101, 239, 216, 0.22),  0 0 22px 10px rgba(101, 239, 216, 0.32); }
  50%      { scale: 1.08; box-shadow: 0 0 0 11px rgba(101, 239, 216, 0.28), 0 0 28px 13px rgba(101, 239, 216, 0.42); }
}
@media (prefers-reduced-motion: reduce) {
  .bento-orb { animation: none; }
}

/* レポート（右下・縦長）：Figmaどおり、タイトル下から画像を右・下端まで
   マージン無しで見切れさせる（タイルの overflow:hidden で切り取り）。
   left:0 は .bento-ai の padding box 基準＝タイルのpaddingごと無視して
   左端いっぱいまで広げる指定（タイトルは別要素なので padding のまま） */
.bento-ai { position: relative; }
.bento-report {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: clamp(72px, 26%, 132px); /* タイトルの下から */
  overflow: hidden;
}
.bento-report img {
  display: block;
  width: 122%;              /* 右端を見切れさせる */
  max-width: none;
  border-top-left-radius: 8px;
}

/* Early Access特典：中央寄せコピー＋黄下線 */
.bento-cost {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.bento-cost__txt {
  font-size: var(--fs-body-sm);
  font-weight: 700;
  line-height: 1.9;
  letter-spacing: 2px;
  color: var(--teal-900);
}
/* PCではタイルが横長で余白が余るので、他タイルより4px大きくして訴求を立てる */
@media (min-width: 960px) {
  .bento-cost__txt { font-size: calc(var(--fs-body-sm) + 4px); }
}
.bento-em {
  text-decoration: underline;
  text-decoration-color: #ffe249;
  text-decoration-thickness: 3px;
  text-underline-offset: 4px;
}
@media (min-width: 960px) {
}


@media (prefers-reduced-motion: reduce) {
}

/* ============================================================
   CLIENTS & WORKS
   ロゴ帯・実績カード・見出しの本体は common.css に移設した
   （service.html でも同じものを使うため）。ここにはTOP固有の差分だけ置く
   ============================================================ */
/* 下だけ広い：直後のNEWSが -64px せり上がって重なるぶんを足す。
   この重なりはTOP限定なので配下ページには持ち込まない */
.clients { padding-bottom: calc(clamp(72px, 10vw, 176px) + 64px); }

/* ============================================================
   NEWS / BLOG  (白い面・上辺に濃緑ライン)
   背景：SP=全幅 / PC=画面両端から80px空けて伸長
   中身：.sheet__inner で最大幅・中央寄せ
   SP: 見出しと本文を縦積み / PC: 見出し左・本文右
   ============================================================ */
/* .sheets ラッパー：NEWS が中央で sticky 固定 → BLOG が競り上がって覆い、
   重なりきったら2枚一緒にスクロールで上へはける（sticky の可動域を束ねる） */
.sheets { position: relative; }
.sheet {
  position: sticky;                /* top はJSが各シートの高さから算出（画面中央で停止） */
  background: #fff;
  border-radius: 24px 24px 0 0;
  /* 上端の濃緑帯は border-top ではなく ::before で描く。
     border-top:24px に角丸を付けると、枠線自体が角で弧を描いて太さが
     ばらついて見えるため。矩形の帯を overflow:hidden で角丸に切り抜けば、
     帯の下端はまっすぐのまま、上の2隅だけがカードの角丸に沿う */
  overflow: hidden;
  margin-top: -64px;               /* せり上がって直前のセクションに重なる */
  padding: calc(var(--pad-section) + 24px) var(--edge) var(--pad-section); /* 上は帯24px分を加算 */
}
/* ⚠️ 次のシートが margin-top:-64px で競り上がって重なるぶん、
   手前のシートは下パディングでその64pxを確保しておく必要がある。
   PCは --pad-section が160pxあるので 160-64=96px 残って問題にならないが、
   SPは56pxしかなく 56-64=-8px となって最終行にBLOGが乗ってしまっていた。
   :has(+ .sheet) で「後ろにシートが続くもの」だけを対象にする（最後のBLOGは対象外） */
.sheet:has(+ .sheet) {
  padding-bottom: calc(var(--pad-section) + 64px);
}
.sheet::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 24px;
  background: var(--teal-900);
}
.sheet.news { z-index: 1; }
.sheet.blog {
  z-index: 2;                       /* BLOG が NEWS の上に覆いかぶさる */
  border-radius: 24px 24px 32px 32px; /* 下側は従来どおり32px（次のCONTACTと切れる） */
}
.sheet__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 5vw, 40px);
  /* シェル幅で中央寄せ：見出しの縦ラインを他セクションと揃える
     （.sheet は画面中央配置なので、これで左端がシェルラインに一致する） */
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
}
.sheet__side { width: 100%; }
/* NEWS/BLOGの英字見出しは他セクション（--fs-display）より1段階小さく */
.sheet__side .en-h2 { font-size: var(--fs-en-h3); }

/* --- NEWS --- */
.news__list { flex: 1; }
/* .news-item / .news-badge は共通コンポーネント（common.css）へ移動（news.htmlと共用） */

/* NEWS/BLOG共通：左カラムは「タイトル → リード文 → 一覧を見る」の順 */
.sheet__desc {
  margin-top: 16px;
  font-size: var(--fs-body-sm); /* リード文も1段階下げる */
  line-height: 1.85;
  letter-spacing: 2px;
  color: var(--neutral-700);
}
/* テキストリンク（.link-more）を左カラムの左端に揃える。SP・PCとも左寄せ */
.sheet__more {
  margin-top: clamp(20px, 2.5vw, 28px);
  display: flex;
  justify-content: flex-start;
}
/* 記事カード：SP 1列 → タブレット 2列 → PC 3列 */
.blog__list {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
}
/* PCは3枚とも出すので「もっと見る」は不要 */
/* SPは縦に長くなりすぎるためBLOGは2枚までにする（続きは左カラムの「一覧を見る」から） */
@media (max-width: 599.98px) {
  .blog__item--sp-hide { display: none; }
}
.article-card {
  border-radius: 12px;
  transition: translate 0.25s ease;
}
.article-card:hover { translate: 0 -4px; }
/* hover用transitionがrevealのフェードを上書きしないよう統合 */
.article-card.reveal {
  transition: translate 0.25s ease,
              opacity 0.7s cubic-bezier(0.16, 0.84, 0.44, 1),
              transform 0.7s cubic-bezier(0.16, 0.84, 0.44, 1);
  transition-delay: 0s, var(--reveal-delay, 0s), var(--reveal-delay, 0s);
}
/* 記事サムネはOGP画像（1200×630）で、中にタイトル文字が入っている。
   以前は height:156px 固定＋cover だったため枠の比が1.33になり、
   横幅の30%が切り落とされてタイトルが読めなかった。
   枠を画像と同じ比率にして全体を見せる（cover のままでも切られない）。
   ⚠️ 別比率の画像に差し替えるときは、この aspect-ratio も合わせること */
.article-card__img {
  width: 100%;
  aspect-ratio: 1200 / 630;
  height: auto;
  object-fit: cover;
  border-radius: 16px;
}
.article-card__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 0;
}
.article-card__badge {
  background: var(--teal-900);
  border-radius: 24px;
  padding: 4px 10px;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: #fff;
}
.article-card__title {
  font-size: var(--fs-body-sm);
  line-height: 1.4;
  letter-spacing: 2px;
  color: var(--neutral-900);
}
.article-card__author {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.article-card__person {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  color: var(--teal-900);
}
/* 著者アイコン。素材（assets/author-yusuke-inoue.webp）は透過の円形イラストなので
   background のグレー丸は不要。読み込み前だけ透けるのを避けて背景色は残す */
.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #c5bfb8;
  flex-shrink: 0;
  object-fit: cover;
}
.article-card__date {
  font-family: var(--font-en-serif);
  font-size: var(--fs-body-sm);
  line-height: 1.52;
  letter-spacing: 2px;
  color: var(--teal-900);
  opacity: 0.8;
}

/* CONTACT（お問い合わせ・SNS）は共通コンポーネント化し common.css へ移動（news-detail.htmlと共用） */

/* ============================================================
   PC 拡張（min-width で段階的に横並びへ）
   ============================================================ */

/* ---- タブレット（2カラムのグリッド化） ---- */
@media (min-width: 600px) {
  .blog__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- デスクトップ（見出し横並び・多カラム・HERO重ね配置） ---- */
@media (min-width: 960px) {

  /* 記事 3列（実績カードはレール式なのでメディアクエリ不要） */
  .blog__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* NEWS / BLOG の白い面は画面端から離して伸長（80px@1440・画面比例）
     SERVICE は角丸のまま画面幅100% */
  .sheet { margin-inline: var(--page-inset); }

  /* NEWS/BLOG：見出し左・本文右 */
  .sheet__inner { flex-direction: row; align-items: flex-start; }
  .sheet__side { width: 340px; flex-shrink: 0; }

  /* HERO：重ね配置＋FV固定
     ファーストビューはヒーロー1画面のみ。スクロールすると
     ヒーローは sticky で止まり、ティール帯が上に競り上がる。
     握手画像(z5)は帯(z2)の上に乗り、帯到着後は一緒に流れる */
  .fv .hero {
    display: block;
    position: sticky;
    top: 0;
    height: 100vh;
    padding: 0 var(--edge);
    /* stickyは独自のスタッキングコンテキストを作るため、
       ヒーロー自体を帯(z2)より上へ。握手画像が帯の上に乗って見える。
       テキスト・ロゴはスクロールでopacity 0になるので帯を遮らない */
    z-index: 3;
    pointer-events: none; /* 透明化したテキストが下の帯を塞がないように */
  }
  .fv .hero a, .fv .hero img, .fv .hero button { pointer-events: auto; }
  .fv .band { position: relative; z-index: 2; }
  /* 見出し・サブ見出しは<br>区切りの行がフォント読み込み状況によらず
     絶対に折り返さないよう、幅を制限しない（自然な行幅に任せる） */
  .band__title, .band__sub { max-width: none; white-space: nowrap; }
  .band__body { max-width: clamp(440px, 44vw, 640px); }
  /* CTAの箱は本文と同じ幅。カード全幅で中央にすると右のハート＋手
     （.band__morph）と重なる（1440pxで実測48px重複。画面が広いほど悪化する） */
  .band__cta { max-width: clamp(440px, 44vw, 640px); }
  /* PCは握手が帯に重なってハートへ入れ替わるので、帯の中のSP用は出さない */
  .band__motion { display: none; }
  /* ロゴ・右側アクションは中央寄せの.hero箱ではなく「画面の左右上40px」に置く。
     (100vw − 100%)/2 ＝ heroの左右オフセットを打ち消して画面基準にする */
  .hero .logo-card { top: 40px; left: calc(40px - (100vw - 100%) / 2); }
  .hero .site-header__actions { top: 40px; right: calc(40px - (100vw - 100%) / 2); }
  .hero__image {
    position: absolute;
    margin: 0;
    z-index: 5; /* ティール帯の上に乗る */
    /* 握手を天地中央に。translate で視覚位置をずらすが offsetTop は
       レイアウト位置のままなので、FV演出JSの lockY は補正が必要
       （heroImg.offsetTop − offsetHeight/2 が視覚上端） */
    top: 50%;
    translate: 0 -50%;
    right: var(--edge);
    width: var(--hero-vis-w);
  }
  /* 入れ替え先のハート＋手。ティール帯カードの天地中央に置く。
     横位置は握手と中心を揃える（右揃えにすると入れ替わりで左端が跳ぶ）。
     .band__inner の右端＝ヒーローのコンテンツ右端＝握手の右端なので、
     握手側の --edge ぶんは足さない。
     初期状態は透明で、FV演出JSがスクロールに応じて opacity を上げる。
     JSが動かない環境（prefers-reduced-motion）では出ないまま＝握手のみ表示 */
  .band__morph {
    display: block;
    position: absolute;
    top: 50%;
    translate: 0 -50%;
    right: calc((var(--hero-vis-w) - var(--hero-morph-w)) / 2);
    width: var(--hero-morph-w);
    height: auto;
    opacity: 0;
    z-index: 1;
  }
  .hero__content {
    position: absolute;
    top: 50%;
    translate: 0 -50%; /* タイトル＋リード文ブロックを天地中央に */
    left: var(--edge);
  }
  /* リード文は握手ビジュアルと重ならない幅で折り返す。
     .hero__image の表示幅を変えるときはこの値も連動して見直すこと
     （動画版で750pxにした時は339pxまで詰める必要があった）。
     PCは箱幅固定なので vw 連動は不要。
     440→480px：3行目「ユーザーの本音を〜寄り添う。」（28文字・462px）を
     1行で出すため。握手ビジュアルまでの余地は実測で 552〜609px（最も狭い960pxでも484px）
     あるので重ならない。⚠️ ここを広げるときは必ず握手との距離を実測すること */
  .hero__lead { max-width: 480px; font-size: 15px; }
  /* 3行目「ユーザーの本音を〜寄り添う。」を1行で出す。
     この文は462px必要でSPの本文幅(343px)には収まらないので、PCだけで効かせる */
  .hero__lead .keep-one-line { white-space: nowrap; }
}

/* ---- FV：文字が1文字ずつ現れる（hero.text-in で開始） ---- */
.char { display: inline-block; opacity: 0; }
.hero.text-in .char {
  animation: char-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: var(--d, 0ms);
}
@keyframes char-in {
  from { opacity: 0; translate: 0 0.22em; filter: blur(5px); }
  to { opacity: 1; translate: 0 0; filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) {
  .char { opacity: 1; }
}

/* 使用箇所ごとの配置指定。
   CTAは原則すべて中央配置に統一する（親が block のときは inline-flex の
   .button-cta が左端に付いてしまうので、margin-inline:auto で中央に置く）。
   .button-cta は inline-flex なので display:flex にしてから auto を効かせる */
.band .button-cta,
.consulting__lower .button-cta {
  display: flex;
  width: fit-content;
  margin-inline: auto;
}
/* CTAを載せる箱。SPは全幅なのでカード中央と同じ結果になる。
   PC（下の960px指定）では本文と同じ幅に絞り、右のハート＋手との衝突を避ける */
.band__cta { margin-top: 24px; }
.band .button-cta { margin-top: 0; }
/* PCではCTAの頭を見出し・リード文と揃える（左揃え）。SPは中央のまま。
   ⚠️ このメディアクエリは上の .band .button-cta{margin-inline:auto} より
   「後ろ」に置くこと。同詳細度なので前に書くと打ち消せない */
@media (min-width: 960px) {
  .band .button-cta { margin-inline: 0; }
}
.consulting .button-cta { align-self: center; }