/* home.css — トップページ専用スタイル
 *
 * 🚨 この構図は「参照サイトの実測値」に合わせてある（正本＝DESIGN.md §12）。
 *    数字を変えるときは、必ず実測表と突き合わせること。感覚で動かさない。
 *
 *    実測（1440×900）：
 *      ・中央寄せの最大幅コンテナは無い＝全ブロックが left 0 / width 全幅
 *      ・左右の余白 40px、その中に 12列グリッド（1列 90.08px・溝 24px）
 *      ・本文の始まりは 2列目 = 左から 154px
 *      ・巨大英字 205px（= 14.24vw）・行送り 1.0・字間 -4.1px（詰める）・左に -60px はみ出し
 *      ・セクション見出しの英字 104px（= 7.22vw）
 *      ・( ラベル ) 24px
 *      ・大きい日本語 34px / 行送り 68px（= 2.0）
 *      ・本文 14px
 *      ・ヒーローはちょうど1画面（900px）／総ページ高 11,002px
 *
 * 🚨 .reveal の初期状態（透明）は html.js-motion が付いているときだけ効かせる。
 *    JSが落ちても本文が消えないようにするため。
 */

.home {
  --gx: 40px;          /* 画面左右の余白（実測40px） */
  --gutter: 24px;      /* 列と列の溝（実測24px） */
  --grid-line: rgba(17, 17, 17, 0.055);
}

.home main {
  overflow: clip;
}

/* ---------- 12列グリッド（全幅・中央寄せしない） ---------- */

.sec {
  position: relative;
  padding: 0 var(--gx);
}

.g {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gutter);
}

.c2-7  { grid-column: 2 / 8; }     /* 本文の既定位置（2列目から） */
.c2-6  { grid-column: 2 / 7; }
.c8-13 { grid-column: 8 / 13; }
.c2-13 { grid-column: 2 / 13; }    /* 本文の左端はそのままに、右いっぱいまで使う */
.c1-13 { grid-column: 1 / 13; }

/* ページ全体に敷く地。
 *
 * 🚨 2026-08-12 に「山の写真＋黒のグラデーション」をやめた。あれは参照サイトの
 *    山の写真に寄せて選んだもので、参照サイトそのものに見える最大の原因だった。
 *    代わりに、現行サイト rayup.jp が実際に使っている材料だけで地を作る＝
 *    白い地・淡いクリーム（#FBF2DC）の斜めの面・薄い黄のにじみ。
 *    参照サイトには白地もクリームの斜め面も無いので、ここで完全に離れる。
 *    写真の原本は _bg-candidates/ に残してあるが、公開物には配っていない。
 *
 * 🚨 z-index を 0 にしない＝「位置指定した要素」は、位置指定していない要素の
 *    文字より後に描かれる。z-index:0 だとスマホのヘッダー（position:static）が
 *    この背景に隠れて丸ごと消えた（2026-08-12 実測・390px）。-1 にして全ての
 *    中身より後ろへ落とす。そのために body の塗りも外す（下の body.home）。 */
.page-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--bg);
  background-image:
    /* 右上から差す、ごく薄い黄のにじみ（ロゴと同じ #E8B023） */
    radial-gradient(78% 62% at 88% 6%, rgba(232, 176, 35, 0.10) 0%, rgba(232, 176, 35, 0) 68%),
    /* 左下にもう一度、さらに薄く */
    radial-gradient(64% 52% at 4% 96%, rgba(232, 176, 35, 0.06) 0%, rgba(232, 176, 35, 0) 66%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* 🚨 ここに「クリームの斜めの面」を敷かない。一度やって実物を見たら、position:fixed の
 *    ぶん全画面に同じ帯が貼り付いたまま動かず、ページ全体に巨大な透かしが入った状態に
 *    見えた（2026-08-12 実測 v19・s2/s5/s6）。現行サイト rayup.jp の斜めの面は
 *    「節ごとの飾り」であってページ全体の地ではない。斜めの面はヒーロー（.fv-bg）だけ。 */

/* 3Dロゴを描く場所（ページ全体・固定）
 * 🚨 2026-08-12（v24）にヒーローの中からここへ移した＝田中さん指示
 *    「今あるRayupロゴの3Dは常に背景に写っている感じにしてみて」。
 * 🚨 .page-bg と同じ z-index:-1 だが、HTMLで後に書いてあるぶん上に描かれる
 *    （地の上・縦線の下）。0 にはしない＝スマホのヘッダー（position:static）が
 *    隠れて丸ごと消える（2026-08-12 実測・390px）。
 * 🚨 濃さ（opacity）は home.js が1フレームごとに書き換える＝ヒーローでは濃く、
 *    スクロールして本文に入ったら薄い透かしまで落とす。ここの値は
 *    JSが動かなかったときの保険（＝薄いほうに倒しておく）。 */
.stage-3d {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.16;
}

.stage-3d canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* 3Dが描けない画面（WebGLなし・動きを減らす設定）に出す静止画。
   3Dと同じ「画面中央の大きな透かし」に見せる。 */
.stage-3d-fallback {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(46%, 460px);
  height: auto;
}

.stage-3d.is-live .stage-3d-fallback {
  display: none;
}

/* 画面に走る縦の細い線（実測：12本）
 * 🚨 ヒーローの中に置かない＝参照サイトは最後の節まで同じ線が通しで走っている
 *    （2026-08-12 実測）。position:fixed でページ全体に敷く。body直下の先頭に
 *    置いているので、後ろに続く要素（ヒーロー・各節・フッター）が自然に上へ描かれる。 */
.grid-lines {
  position: fixed;
  inset: 0;
  margin: 0 var(--gx);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gutter);
  pointer-events: none;
  z-index: -1;
}

/* 背景（z-index:-1）を見せるために、トップだけ body の塗りを外す。
 * 画面の下地は html 側の同じ色（styles.css の html { background: var(--bg) }）が
 * 受け持つので、.page-bg が出ない環境でも白のままで崩れない。 */
body.home {
  background: transparent;
}

.grid-lines i {
  border-left: 1px solid var(--grid-line);
  border-right: 1px solid var(--grid-line);
}

/* ---------- 文字の大きさ（実測値をvwに換算：基準1440px） ---------- */

.display {
  /* 巨大英字 205px / 1440px = 14.24vw。字間は詰める（実測 -4.1px = -0.02em） */
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(52px, 14.24vw, 260px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
}

.display-md {
  /* セクション見出しの英字 104px / 1440px = 7.22vw */
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(38px, 7.22vw, 132px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
}

.label {
  /* ( Business ) のような括弧ラベル 24px */
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(15px, 1.67vw, 30px);
  line-height: 1.2;
  letter-spacing: 0.02em;
  /* 節のラベルはブランドの黄。本文の黒と役割を分ける（DESIGN.md §5-2）。
     🚨 文字なので --brand（#E8B023・面の黄）ではなく --brand-dim を使う。白地では
        #E8B023 の文字はコントラスト 2.0:1 しかなく読めない。 */
  color: var(--brand-dim);
  margin: 0;
}

.lead-big {
  /* 大きい日本語 34px / 行送り2.0 */
  font-size: clamp(18px, 2.36vw, 42px);
  line-height: 2;
  color: var(--ink);
  margin: 0;
}

.body-s {
  font-size: clamp(13px, 0.97vw, 16px);
  line-height: 2;
  color: var(--muted);
  margin: 0;
}

/* ---------- ① ヒーロー（ちょうど1画面） ---------- */

.fv {
  position: relative;
  height: 100svh;
  min-height: 620px;
  padding: 0 var(--gx);
  overflow: hidden;
}

/* ヒーローの地（写真＋暗い膜）
 * 🚨 2026-08-12（v25）に田中さん指示で作り替えた＝写真＝Pexels ID 35074089
 *    （高層階の室内から街を見下ろす・商用可・帰属表示不要）。原本は _bg-candidates/。
 * 🚨 ここは器だけ。写真は ::before（ゆっくり寄り引きする）、暗い膜は ::after（動かさない）。
 *    1つの要素にまとめて transform をかけると膜まで一緒に拡大され、縁がずれる。
 * 🚨 写真を opacity で薄めない＝上に重ねた膜まで薄まって効かなくなる。
 * 🚨 ヒーローの中だけ。ページ全体（.page-bg）に写真を敷かない＝v19 で
 *    「画面に貼り付いた巨大な透かし」になることを実測済み。
 * 🚨 置き場所は body 直下（HTMLの注記）。ヒーローの中に戻さない＝中に置くと
 *    3Dロゴ（.stage-3d / z-index:-1）より必ず上に描かれ、膜がロゴを
 *    丸ごと覆って1画面目でロゴが見えなくなる（2026-08-12 実測 v24a）。
 * 🚨 z-index は .page-bg・.stage-3d と同じ -1。HTMLの書き順で
 *    「地 → ヒーローの地（ここ） → 3Dロゴ → 縦線」の順に描かれる。 */
.fv-bg {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  /* 🚨 .fv と同じ値。片方だけ変えると写真の切れる位置がずれる。 */
  height: 100svh;
  min-height: 620px;
  z-index: -1;
  pointer-events: none;
  /* 🚨 寄ったときに写真が枠の外へ出るので必ず切る */
  overflow: hidden;
}

/* 写真。ゆっくり寄って、ゆっくり引く（30秒で1往復）
 * 🚨 初期倍率を 1.04 にしてある＝わずかに横へ流すため。等倍から始めると
 *    流した方向に地の色（白）の帯が出る。
 * 🚨 動きを減らす設定の人には止める（下の @media）。 */
.fv-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("/assets/hero-bg-1920.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1.04);
  animation: heroKenBurns 30s var(--ease) infinite;
  will-change: transform;
}

@keyframes heroKenBurns {
  0%   { transform: scale(1.04) translate3d(0, 0, 0); }
  50%  { transform: scale(1.16) translate3d(-1.4%, -1.2%, 0); }
  100% { transform: scale(1.04) translate3d(0, 0, 0); }
}

/* 2枚目・3枚目の写真（2026-08-20・田中さん指示「あと2枚くらい追加してスイッチング」）。
 * 実物は home.js の startHeroSlides() が**あとから作って**ここに入れる。
 * 🚨 .fv-bg の「子要素」であることが効いている＝描き順は ::before → 子要素 → ::after。
 *    つまり 1枚目の上・暗い膜の下に必ず入る。膜より上に置くと白文字が読めなくなる。
 * 🚨 1枚目（::before）は CSS のまま残す＝JSが落ちても背景写真は必ず出る。
 * 🚨 素の opacity は 0。溶暗の長さ（--hero-fade）は home.js が渡す＝秒数の正本はJS側。
 * 🚨 寄り引き（Ken Burns）は .is-moving が付いているあいだだけ。見えていない写真まで
 *    動かすと、見えない絵のために GPU を回し続けることになる。 */
.fv-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1.04);
  transition: opacity var(--hero-fade, 1600ms) linear;
  will-change: opacity;
}

.fv-slide.is-moving { animation: heroKenBurns 30s var(--ease) infinite; }

/* 🚨 写真のファイル名を書くのはここだけ（JSは番号しか持たない）。
 *    狭い画面用の差し替えは下の @media (max-width: 900px) に対で書く。 */
.fv-slide-2 { background-image: url("/assets/hero-bg2-1920.webp"); }
.fv-slide-3 { background-image: url("/assets/hero-bg3-1920.webp"); }

/* 2・3枚目が覆っているあいだ、1枚目の寄り引きは止めておく（見えていないため）。
 * 🚨 止めるだけ＝再開すると続きから動く。1枚目へ戻り**始める**ときに外す。 */
.fv-bg.is-slid::before { animation-play-state: paused; }

/* 白い文字を読ませるための暗い膜。
 * 🚨 v24 までは「白いベール（写真を白く飛ばす）」だった。v25 で田中さんが
 *    「帯を廃止し写真の中へ」を選んだ＝文字が白になったので、逆に沈める。
 * 🚨 左ほど濃い＝文字（タグライン・リード文）が乗るのは左半分だから。
 *    右は薄い＝街と3Dロゴを見せる側。ここを一律に濃くすると写真が死ぬ。
 * 🚨 動かさない。写真だけが動く。 */
.fv-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    /* ① 左から差す暗がり（文字の下） */
    linear-gradient(100deg, rgba(9, 13, 20, 0.80) 0%, rgba(9, 13, 20, 0.62) 38%, rgba(9, 13, 20, 0.28) 70%, rgba(9, 13, 20, 0.42) 100%),
    /* ② 上下の締め（ヘッダーと、下端の事業2語を守る） */
    linear-gradient(180deg, rgba(9, 13, 20, 0.52) 0%, rgba(9, 13, 20, 0.10) 26%, rgba(9, 13, 20, 0.10) 58%, rgba(9, 13, 20, 0.60) 100%),
    /* ③ 3Dロゴの側にだけ、ごく薄い黄のにじみ */
    radial-gradient(66% 58% at 76% 48%, rgba(232, 176, 35, 0.15) 0%, rgba(232, 176, 35, 0) 72%);
}

/* ヒーローの中身＝左に文字・右に3Dロゴの枠（田中さん指示「その横にRayup3Dロゴ」）。
   🚨 3Dロゴの実物はここには居ない（body直下の .stage-3d）。ここにあるのは
      置き場所を示す空の枠だけ＝home.js の place() がこの枠を測って合わせる。 */
.fv-inner {
  position: absolute;
  left: var(--gx);
  right: var(--gx);
  top: 52%;
  transform: translateY(-50%);
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.5fr);
  align-items: center;
  gap: clamp(24px, 3.4vw, 64px);
}

.fv-copy {
  min-width: 0;
}

/* 3Dロゴが入る枠。中身は空（高さは縦横比で作る）。
   🚨 大きさを変えると3Dロゴの大きさが変わる＝実物のスクショで確認してから触る。 */
.fv-logo-slot {
  aspect-ratio: 1 / 1;
  min-height: 180px;
}

/* リード文は巨大タグラインの下に置く（参照＝スクリーンショットと同じ並び）。
   🚨 白文字。地が写真なので --ink（黒）に戻さない。 */
/* 🚨 .intro-lead（導入演出で中央に出すミッション文）を必ず一緒に指定する。
 *    導入の最後に、この文が h1 の位置へ「そのまま着地」する＝**両者の字組みが
 *    1pxでも違うと着地の瞬間に文字がガタつく**。片方だけ触らないこと。 */
.fv-lead,
.intro-lead {
  /* 🚨 2026-08-13 田中さん指示で英文と大小を入れ替えた＝ここが主役（大）・英文は小さなラベル。
     🚨 大きさの上限は「3Dロゴに文字が届かないこと」で決まる。1行目「大企業／国／地域の力を結集させ、」は
        全角16字＝font-size×16 の幅になる。1440 で 3.6vw=51.84px → 829px（左余白40＋829=869 < ロゴ左端≒1050）。
        ここを上げるときは必ず実物のスクショで右端を見ること（数値だけでは気づけない）。
     🚨 下限 19px は狭い画面の折り返し防止＝360px 幅で 16字×19px=304px（使える幅 320px）。 */
  max-width: 18em;
  font-size: clamp(19px, 3.6vw, 52px);
  line-height: 1.5;
  color: #FFFFFF;
}

.fv-lead {
  margin: clamp(20px, 2.4vw, 34px) 0 0;
}

/* ミッションの2行目。h1（主役）より一段小さく置く＝現サイトも2行目は小さい。
   🚨 .fv-lead と同じ幅（18em）に揃える＝2つの行の左右の端が合う。
   🚨 現れ方は home.js が .fv-lead と一緒に握っている（別々に動かすと導入の最後で行がずれる）。 */
.fv-lead-sub {
  max-width: 18em;
  margin: clamp(10px, 1.2vw, 18px) 0 0;
  font-size: clamp(14px, 1.5vw, 22px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.86);
}

/* 事業の2語（旧＝参照サイト由来の「浮かぶ白い枠6つ」。2026-08-12 v21 で全廃）。
   材料は現行 rayup.jp が持っているものだけ＝縦の細い線＋小さな英字＋日本語1行。
   🚨 Scroll と同じ高さに置く（bottom を揃える）＝画面の下端に並ぶ1本の線として見せる。
   🚨 2026-08-12（v25）で黄色い帯を廃止した＝--fv-word-h はもう無い。素の px で書く。 */
.fv-fields {
  position: absolute;
  left: var(--gx);
  bottom: 40px;
  z-index: 2;
  display: flex;
  gap: clamp(28px, 4.2vw, 68px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.fv-fields li {
  position: relative;
  padding-left: 16px;
}

/* 現行サイトと同じ「縦の細い線」。ブランド色は面用なので、ここは文字ではなく線に使う。
   🚨 地が濃い写真になった（v25）ので、この黄は文字にも使える（白地では 2.0:1 で不可）。 */
.fv-fields li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  bottom: 3px;
  width: 3px;
  background: var(--brand);
}

.fv-fields span {
  display: block;
}

/* 番号は Business 節の 01. / 02. と同じ並び。
   🚨 v25 で地が濃い写真になった＝ここは白地用の --brand-dim（暗い金）だと沈む。
      面用の --brand（#E8B023）が、濃い地では逆に読める側になる。 */
.fv-field-no {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--brand);
}

.fv-field-en {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.1vw, 32px);
  line-height: 1.15;
  color: #FFFFFF;
  margin-top: 2px;
}

.fv-field-jp {
  font-size: clamp(11px, 0.9vw, 13px);
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.78);
  margin-top: 4px;
}

.fv-scroll {
  position: absolute;
  right: var(--gx);
  bottom: 40px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
}

.fv-scroll i {
  display: block;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  position: relative;
  overflow: hidden;
}

.fv-scroll i::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -50%;
  width: 1px;
  height: 100%;
  background: var(--brand);
  animation: cue 2.2s var(--ease) infinite;
}

@keyframes cue {
  0%   { transform: translateY(0); opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: translateY(200%); opacity: 0; }
}

/* 巨大なタグライン（2行・写真の中に白文字）。
 *
 * 🚨 2026-08-12（v25）に田中さんの選択で「黄色い全幅の帯＋黒文字」を全廃した。
 *    選んでもらった案＝「帯を廃止し写真の中へ（参考どおり）」。
 *    これで白地・黒文字という今までの方向からヒーローだけ外れる＝承知のうえの決定。
 * 🚨 帯が無くなったので、字幅を測って帯に収める処理（home.js の fitHeroWord）も消した。
 *    大きさは clamp だけで決まる＝文言を差し替えても JS は触らなくてよいが、
 *    長い文言にすると左の列からはみ出す。差し替えたら実物で確認する。
 * 🚨 行ごとに .fv-word-line で切る＝導入（下から立ち上がる）が行の外に出ないため。
 *    帯の overflow:hidden が持っていた役目をここが引き継いでいる。 */
/* 🚨 2026-08-13 田中さん指示で下のミッション文と大小を入れ替えた＝ここは小さなラベル。
   大きい文字向けの詰め（-0.02em）と行送り 1.02 は、小さくすると窮屈に潰れる＝両方ゆるめる。 */
.fv-word {
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(15px, 1.5vw, 22px);
  letter-spacing: 0.14em;
  line-height: 1.4;
}

.fv-word-line {
  display: block;
  overflow: hidden;
  /* g・y の下が切れないぶんを空け、行送りは詰め直す */
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}

.fv-word-line > span {
  display: block;
}

/* ---------- ② ブランドメッセージ ----------
 * 🚨 独立した節（.sec-message）は 2026-08-13 に田中さん判断で**廃止**した
 *    （「やっぱりこのセクション入らないかも」）。宣言文2行は捨てず、Business 節の
 *    冒頭へ移して**スクロールに連動して1文字ずつ濃くなる**見せ方にした（`.ink-scroll`）。
 *    バリュー3つも一緒に外したが、文言は現サイトの /about/ に元から載っている＝失っていない。
 *    節を復活させない＝1画面まるごと使う価値が2行では出ない、が廃止の理由。 */

/* ---------- ③ 事業（Businessは1つの節。中を事業のカードが流れる） ----------
 * 参照サイトの実測（2026-08-12・1440×900）：
 *   節の高さ2810px／小ラベル16px／事業見出し56px／本文14px・行送り23.1px・字間1.4px
 *   カード見出し20px／連番50px。カードは画面の外から回転して飛び込み15度傾いて止まる。 */

/* 🚨 上の余白を大きく取らない。前の節（Message）の下余白と足すと何も無い帯が
 *    350px 続き、実物では「空白の画面」に見える（2026-08-12 実測 v15）。
 *    写真素材が承認待ちで、埋めるものがまだ無いため。 */
.sec-biz {
  padding-top: clamp(56px, 5vw, 80px);
  padding-bottom: clamp(96px, 11vw, 180px);
}

.sec-biz > .g:first-child {
  margin-bottom: clamp(56px, 7vw, 110px);
}

/* 節の冒頭の宣言文（旧 Message 節の2行をここへ移した・2026-08-13 田中さん指示）。
 * 置き場所の理由＝1文目が「コンサルティングと、食品輸出」＝この節の01と02そのもの。
 * 🚨 事業名の見出し（Consulting＝56px）より小さくする。同じ大きさにすると
 *    どちらが見出しか分からなくなる（ここは1440で約27px）。
 * 🚨 行は `<br>` で切る＝文の途中で折り返させない。狭い画面では下の指定で `<br>` を消す。 */
.biz-lead {
  grid-column: 2 / 13;
  grid-row: 2;
  margin: clamp(18px, 2vw, 30px) 0 0;
  font-family: var(--font-display);
  font-size: clamp(16px, 1.85vw, 30px);
  line-height: 2;
  letter-spacing: 0.02em;
  color: var(--ink);
}

/* スクロールに連動して1文字ずつ濃くなる（動きは home.js が持つ）。
 * 🚨 薄い側の初期値をCSSに書かない＝GSAPが動かないとき（読み込み失敗・reduced motion）に
 *    文章が薄いまま残る。薄くするのはJSだけ＝素の状態は「普通に読める」。
 * 🚨 1文字ずつを inline-block にしない＝日本語の禁則処理が効かなくなり、
 *    行頭に「。」が来る。opacity は素の inline のままでも効く。 */
.ink-scroll > span {
  will-change: opacity;
}

/* 事業1つぶん。左に文章、右にカード
 * 参照サイトは左の文章が画面に貼り付いたまま、右のカードだけが流れていく
 * （実測：スクロール1275pxに対し文章は509pxしか動かない＝sticky） */
.biz-row {
  align-items: start;
  min-height: 76svh;
  margin-bottom: clamp(120px, 15vw, 240px);
}

/* 🚨 カードを行の縦の真ん中に置かない。行は画面より高い（sticky のため）ので、
 *    真ん中に置くと左の文章より 150px ほど下にずれて、実物では文章とカードが
 *    別々のものに見える（2026-08-12 実測 v15）。参照サイトはカードの上端が
 *    小ラベル（ Business ）と事業名のあいだ＝行の先頭にある。 */
.biz-card-col {
  display: flex;
  align-items: flex-start;
  /* 🚨 カードと文章が近すぎる（田中さん指摘 2026-08-13）。列の溝（--gutter 24px）だけでは足りない
   *    ＝カードは15°傾いていて、傾けた角が溝へ 30px ほどせり出す（見た目の間隔は実測6.5px）。
   *    傾きぶんを打ち消したうえで離すため、文章に向いた側だけに余白を足す。
   *    余白は列の中に足す＝カードの外側（画面の端との間隔）は変わらないので鏡のままになる。 */
  padding-left: clamp(24px, 3.3vw, 48px);
}

.biz-row > .c2-7 {
  position: sticky;
  top: 22vh;
  align-self: start;
}

/* 2つ目の事業（食品輸出）は左右を反転して左右対称にする（田中さん指示 2026-08-13）。
 * 🚨 HTMLの並びは変えず、置き場所（grid-column）だけを入れ替える
 *    ＝読み上げ順と、狭い画面での縦積みの順番を1つ目と揃えたまま見た目だけ鏡にするため。
 * 🚨 数値は 12列の鏡像で決めている（線1〜13の鏡は i → 14-i）。
 *    1つ目＝文章 2/8・カード 8/13 → 鏡にすると 文章 6/12・カード 1/6。
 *    片方だけ変えると幅が変わって「反転」ではなく「別の割り付け」になる。
 * 🚨 カードが飛び込む向きは HTML 側の `is-left`（home.js が読む）が既に左向き＝ここでは触らない。 */
/* 🚨 grid-row: 1 を必ず書く。HTMLの並びは「文章 → カード」のままなので、
 *    後から来るカードの列（1〜6）が、先に置いた文章の列（6〜12）より左にある。
 *    グリッドの既定（sparse）は置き場所のカーソルを戻さないので、
 *    カードだけが黙って2段目に送られ、文章より386px下にずれる
 *    （2026-08-13 実測。エラーも警告も出ず、横スクロールも0のまま）。 */
.biz-row.is-reverse > .c2-7  { grid-column: 6 / 12; grid-row: 1; }
.biz-row.is-reverse > .c8-13 { grid-column: 1 / 6;  grid-row: 1; }

/* 🚨 列を入れ替えるだけでは鏡にならない。カードは列より細く（320px 固定・列は約553px）、
 *    既定では列の左に寄っている＝1つ目では「内側（画面の中央側）」に寄るが、
 *    2つ目でそのままだと「外側（画面の左端）」に寄り、傾けた角が画面から切れる
 *    （2026-08-13 実測：切れているのは数値には出ず、スクショで初めて分かった）。
 *    2つ目は寄せる向きも反転して、1つ目と同じ「内側寄り」にする。 */
.biz-row.is-reverse .biz-card-col {
  justify-content: flex-end;
  /* 文章に向いた側＝2つ目では右。1つ目の padding-left は必ず 0 に戻す（外側が広がってしまう） */
  padding-left: 0;
  padding-right: clamp(24px, 3.3vw, 48px);
}

/* 2つ目は文章も右詰めにする（田中さん指示 2026-08-13）。
 * 1つ目は文章の左端＝画面の外側に揃っているので、鏡にすると右端＝画面の外側に揃う。
 * 🚨 幅に上限のある要素（.progress 545px・.biz-desc 34em）は text-align だけでは右へ来ない。
 *    箱そのものは左に残り、その箱の中で右に寄るだけ＝見出しと線・本文の右端が揃わない。
 *    箱ごと右へ寄せる（margin-left: auto）。 */
.biz-row.is-reverse > .c2-7 { text-align: right; }
.biz-row.is-reverse .biz-head { justify-content: flex-end; }
.biz-row.is-reverse .progress,
.biz-row.is-reverse .biz-desc { margin-left: auto; margin-right: 0; }

/* 線が伸びる向きも鏡にする（1つ目は左から右へ、2つ目は右から左へ）。
 * home.js は幅だけを 0→100% にするので、伸びる向きは起点をどちらに固定するかで決まる。 */
.biz-row.is-reverse .progress i { left: auto; right: 0; }

.biz-row:last-child {
  margin-bottom: 0;
}

.biz-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 14px;
}

/* 🚨 参照は「02.」も事業名も同じ16px（実測）。以前は34pxにしていたが、
 *    参照では番号が見出しより目立つことはない。 */
.biz-no {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(14px, 1.11vw, 16px);
  line-height: 1;
  color: var(--brand-dim);   /* 16pxの小さい文字なので、文字用の濃いほうの黄 */
}

.biz-jp {
  font-size: clamp(13px, 1.11vw, 16px);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.05em;
}

/* 事業見出し（Consulting / Export）＝実測56px。
 * 🚨 巨大英字（.display 205px）や他の節の見出し（.display-md）とは別物。
 *    参照サイトでは事業見出しだけが小さい。 */
.biz-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(34px, 3.89vw, 56px);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}

/* 見出しの下の線。スクロールに合わせて左から伸びる（参照の進捗バー） */
.progress {
  position: relative;
  height: 1px;
  max-width: 545px;              /* 参照サイトの実測（155px〜700px） */
  background: var(--line-faint);
  margin: 26px 0 30px;
  overflow: hidden;
}

.progress i {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  display: block;
  /* 伸びていく側だけブランドの黄。土台は薄いグレーのまま＝どこまで進んだかが見える */
  background: var(--brand);
}

/* 事業の説明。参照は14px・行送り23.1px（1.65）・字間1.4px（0.1em）・白 */
.biz-desc {
  font-size: clamp(13px, 0.97vw, 14px);
  line-height: 1.65;
  letter-spacing: 0.1em;
  color: var(--ink);
  margin: 0 0 40px;
  max-width: 34em;
  /* 🚨 行の長さを揃える（2026-08-20 田中さん指摘「改行がおかしい」）。
     入れないと最後の行に「た。」の2字だけが残る（実測：461 / 461 / 31px）。
     balance を入れると 323 / 323 / 307px と揃う。
     対応していないブラウザでは今までどおり折り返すだけ＝壊れない。 */
  text-wrap: balance;
}

/* 右のカード。素材（写真・映像）は伶さん承認後に差し込む
 * 🚨 大きくしない。参照サイトのカードは見かけ約360×320px＝画面幅の25%で、
 *    上下左右に黒い余白が残る（2026-08-12 実測）。列いっぱいに広げると
 *    画面の右半分を塊が占めてしまい、参照とは似ても似つかない見え方になる。 */
.biz-card {
  position: relative;
  display: block;
  width: min(100%, 320px);
  aspect-ratio: 320 / 278;
  /* 🚨 枠線を薄くしすぎない。素材が入るまで中身は地色1色なので、--line-faint（0.08）だと
   *    実物ではカードの輪郭がほぼ見えない（2026-08-12 実測 v15）。影も落として浮かせる。
   * 🚨 地はクリームにしない＝背景の淡い面と同じ色で溶ける（v19 で実測）。白で塗る。 */
  border: 1px solid rgba(17, 17, 17, 0.20);
  background: #FFFFFF;
  box-shadow: 0 20px 44px rgba(17, 17, 17, 0.14);
  text-decoration: none;
  overflow: hidden;
}

.biz-card-media {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
}

.biz-card-media > span {
  font-size: 12px;
  line-height: 2;
  color: var(--muted-2);
}

/* 図版は padding 24px の内側に収める＝白い縁を残す（田中さん選択 2026-08-17「縁入れてください」）。
 * 🚨 縁を残すことで、左上の `Consulting` と右下の `01`（どちらも #111）は必ず白地の上に乗る。
 *    図版側の四隅も空けてあるので二重の保険になっている。
 * 🚨 高さも 100% で指定する＝親は position:absolute の flex なので、height を書かないと
 *    画像の縦横比のまま縮み、狭い画面（カードが 4:3）で上下に地色の帯が出る。 */
.biz-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 🚨 カード上の文字（左上の事業名・右下の連番）を必ず読めるようにする処理。
 * 2026-08-19 に中身を線画から実写へ差し替えたとき、文字が消えたので入れた（田中さん指示の写真）。
 * 幾何の問題であって写真の選び方の問題ではない：連番は高さ50px・下から16pxの位置にあり、
 * 写真は下から24pxで終わる＝50pxのうち42pxが必ず写真の上に乗る。淡い線画では成立していた。
 * 実測（差し替え直後・#111 の文字と地のコントラスト比）：
 *   390 Export「Export」1.06:1 ／「02」1.20:1 ／ 1440 Consulting「01」1.48:1（読める目安は4.5:1）
 * 🚨 写真を差し替えるたびに壊れる場所なので、消さない。
 *
 * 2026-08-20 v57：面で白を乗せる方式（白モヤ）をやめ、文字の輪郭にだけ白を出す案W2にした。
 *   理由＝素の写真の地を測ると4か所のうち3か所が暗い（Export 左上 51,46,44／右下 61,51,43／
 *   Consulting 右下 111,116,126。明るいのは Consulting 左上 214,237,250 だけ）。
 *   白を面で乗せると Export が汚れ、黒を面で乗せると Consulting が汚れる＝面方式は行き止まり。
 *   白モヤは強さ3段階とも数値は 10.28〜15.04:1 で🟢だったが、目で見ると3段階とも
 *   黒毛和牛の上に「白い煙」が浮いて見えた（数値では選べない件）。
 * 🚨 縁取り（text-shadow）はコントラスト比の数値で評価できない（文字と地の間に中間色の層ができ、
 *    式が前提とする2色に分解できない）。触ったら実寸の見た目で判断する。 */
.biz-card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* 写真には面で何も乗せない（案W2）。 */
  background: none;
}

/* 文字の輪郭にだけ白を出す＝写真を差し替えても壊れない（縁は文字についてくる）。 */
.biz-card-head,
.biz-card-no {
  text-shadow:
    0 0 4px rgba(255, 255, 255, 1),
    0 0 4px rgba(255, 255, 255, 1),
    0 0 9px rgba(255, 255, 255, 0.95),
    0 0 16px rgba(255, 255, 255, 0.75);
}

.biz-card-head {
  position: absolute;
  left: 20px;
  top: 18px;
  font-family: var(--font-display);
  font-size: clamp(15px, 1.39vw, 20px);
  line-height: 1;
  color: var(--ink);
}

.biz-card-no {
  position: absolute;
  right: 22px;
  bottom: 16px;
  font-family: var(--font-display);
  font-size: clamp(32px, 3.47vw, 50px);
  line-height: 1;
  color: var(--ink);
}

/* ---------- ⑤ 強み ---------- */

.sec-strength {
  padding-top: clamp(72px, 7vw, 120px);
  padding-bottom: clamp(60px, 8vw, 120px);
}

/* 🚨 最後のカードが貼りついたまま次の節に食い込まないよう、節の下に余白をとる。
   貼りつきは .strength-stack の下端で自然に解ける＝カードを包む箱を余分に広げない。 */
.sec-strength { padding-bottom: clamp(80px, 10vw, 160px); }

/* カードが重なって固定される（参照サイト About Us の見せ方・2026-08-12 実測の再現）
 * 実測（参照・1440×900）：li が position: sticky / top: 80px、重なられた側は scale 0.9 まで縮む。
 * カードの見た目は RAYUP のもの（白地・黒文字・細い枠＋影）＝参照は黒地だが持ち込まない。 */
.strength-stack {
  /* 🚨 見出し「Strengths」との間の余白。0px だと見出しの「g」の足が
     1枚目のカードの金線に触れて見える（2026-08-20 田中さん指摘「Strengthsの文字が近い」）。
     display-md は font-size 104px / line-height 109px＝箱が字の足ぎりぎりで、
     箱の隙間を測るだけでは触れているのが分からない＝**必ず実物を見て決める**。 */
  margin-top: clamp(32px, 3.6vw, 64px);
  --stack-top: 100px;   /* ヘッダー（固定・77px）の下に置く */
  /* 1枚ごとに下へずらす量＝重なられたカードの上に残る帯の高さ。
     🚨 この帯に「金の線＋連番（01/02/03）」が丸ごと収まる値でなければならない。
        v40 で連番を大きくしたので 56px→96px。
        実測（1440）：カードの上端から連番の下端まで 83.7px＝84px では余白 0.3px しか無く、
        書体の到着や1px のずれで下が切れる。96px にして約12px の余白を確保した。
        （重なられたカードは home.js が scale 0.94 に縮めるので、実際の余白はもう少し広い）
     🚨 減らすと連番の下が切れる＝触ったら必ず実物で確認する。 */
  --stack-step: 96px;
  position: relative;
}

/* 積み重なる順番。もとは HTML の style="--i: 0" で持たせていたが、
   🚨 Cloudflare Pages の CSP（style-src 'self'）が style 属性を止めるため CSS に移した（2026-08-21）。
   カードを増やすときはここに1行足す。 */
.strength-card--0 { --i: 0; }
.strength-card--1 { --i: 1; }
.strength-card--2 { --i: 2; }

.strength-card {
  position: sticky;
  top: calc(var(--stack-top) + var(--i) * var(--stack-step));
  width: min(100%, 880px);
  margin: 0 auto;
  padding: clamp(20px, 2.2vw, 30px);
  /* 🚨 地は白で塗る。塗らないと下のカードが透けて文字が重なって読めない */
  background: #FFFFFF;
  border: 1px solid rgba(17, 17, 17, 0.20);
  /* 上端の金の線＝カードが重なっても必ず見える位置。1枚ずつの区切りをここで示す */
  border-top: 3px solid var(--brand);
  box-shadow: 0 24px 60px rgba(17, 17, 17, 0.13);
  /* 🚨 overflow はカード自身にだけ。祖先に付けると sticky が効かなくなる */
  overflow: hidden;
}

.strength-card + .strength-card {
  margin-top: clamp(64px, 8vw, 120px);
}

/* 右上に敷くロゴのマーク（写真がなくても「地」を作るための地紋・2026-08-14 田中さん選択）。
 * 🚨 濃くしない＝本文の上に乗る。opacity 0.06 で「言われないと気づかない」程度に留める。
 * 🚨 position:sticky は必ず重なりの文脈を作るので、地紋は z-index:0・中身は 1・膜は 2 で並ぶ
 *    （順番を外すと地紋が本文の上に出る／膜が地紋を白く沈められない）。 */
.strength-card::after {
  content: "";
  position: absolute;
  right: -70px;
  top: -60px;
  width: 420px;
  height: 420px;
  background: url("/assets/logo-mark.svg") no-repeat center / contain;
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
}

/* カードの中身＝左が連番の柱、右が本文 */
.strength-card-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: clamp(76px, 7vw, 100px) 1fr;
  column-gap: clamp(20px, 2.4vw, 34px);
}

.strength-card-side {
  border-right: 1px solid var(--line-soft);
  padding-right: 16px;
}

.strength-card-no {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(38px, 3.9vw, 56px);
  line-height: 1;
  color: var(--brand-dim);
}

.strength-card-label {
  margin: 10px 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(11px, 1vw, 13px);
  letter-spacing: 0.06em;
  color: var(--muted-2);
}

.strength-card-title {
  /* 連番の頭と高さを揃える（この打ち消しを消すと見出しが連番より下がる） */
  margin: -6px 0 0;
  font-size: clamp(20px, 2.2vw, 34px);
  line-height: 1.6;
  color: var(--ink);
}

.strength-card-desc {
  margin: clamp(10px, 1.2vw, 16px) 0 0;
  max-width: 42em;
}

/* 写真の枠。中身（.strength-card-media-inner）が 1.8倍から等倍に縮む＝参照サイトの中核の動き。
 * 🚨 縦横比を変えるとカードの高さが変わり、貼りついたとき画面に収まらなくなる。
 *    実測（参照・1440）：写真は約 725×375（およそ 2:1）＝ここも 2:1 に合わせている。 */
.strength-card-media {
  display: block;
  position: relative;
  margin-top: clamp(16px, 1.8vw, 26px);
  aspect-ratio: 2 / 1;
  overflow: hidden;
  background: var(--panel-2);
}

.strength-card-media-inner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  background: var(--panel-2);
  font-size: 12px;
  line-height: 2;
  color: var(--muted-2);
}

/* 写真枠の代わりに置く実績の一覧（田中さん指示 2026-08-13・**写真が届いてもここは文字のまま残す**）。
 * 理由＝文字は検索・AI検索に読まれるが写真は読まれない。写真は事業カード2枚に使う。
 * 🚨 高さは 2:1 の写真枠（実測 410px）より低くなる＝カードが短くなる方向なので、
 *    貼りついたときに画面から溢れることはない。逆に行を増やすときは実物で高さを見る。 */
/* 🚨 灰色のベタ面はやめ、行ごとの細い罫で見せる（2026-08-14 田中さん選択・v40）。
   ベタ面だと「灰色の四角に文字が並んでいるだけ」に見える＝シンプルすぎるの正体だったため。 */
.strength-facts {
  margin-top: clamp(20px, 2.2vw, 30px);
}

.strength-facts-title {
  margin: 0 0 clamp(10px, 1.2vw, 16px);
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  font-size: clamp(11px, 1vw, 13px);
  letter-spacing: 0.14em;
  color: var(--muted);
}

/* 左＝区分・右＝内容の2列。列幅は一番長い区分（ヘルスケア）に合わせて自動で決める */
.strength-facts dl {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: clamp(14px, 1.8vw, 26px);
  row-gap: 0;
  margin: 0;
  font-size: clamp(12.5px, 0.97vw, 14px);
  line-height: 1.7;
}

/* 行ごとの区切り線。dt と dd の両方に引かないと1行ぶんの線がつながらない */
.strength-facts dt,
.strength-facts dd {
  padding: 11px 0;
  border-bottom: 1px solid var(--line-faint);
}

.strength-facts dt {
  color: var(--muted);
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.strength-facts dd {
  margin: 0;
  color: var(--ink);
}

/* 「ほか …」は一覧の項目ではないので、下に置く（上の行の罫がそのまま区切りになる） */
.strength-facts-more {
  margin: clamp(10px, 1.2vw, 16px) 0 0;
  font-size: clamp(11.5px, 0.9vw, 13px);
  line-height: 1.7;
  color: var(--muted);
}

/* 重なられたカードを白く沈ませる膜（濃さは home.js がスクロールに合わせて動かす）
 * 🚨 疑似要素にしない＝GSAP が動かせるのは本物の要素だけ。 */
.strength-card-veil {
  position: absolute;
  inset: 0;
  background: #FFFFFF;
  opacity: 0;
  pointer-events: none;
  /* 🚨 地紋（::after・z-index:0）と中身（z-index:1）より上。下げると地紋だけ沈まず残る */
  z-index: 2;
}

/* 強みセクションの締めの注記（数字の主語・守秘の断り）。
 * 🚨 カードは `width: min(100%, 880px); margin: 0 auto`＝画面の中央にある。
 *    注記だけ `.c2-7`（12列の2〜7列）のままだと**カードより 124.7px 左にはみ出す**（実測1440）。
 *    カードと同じ箱に載せて左端を揃える。上の空きも 0px だった（カードに接していた）ので取る。 */
.strength-note {
  grid-column: 1 / 13;
  width: min(100%, 880px);
  margin: clamp(32px, 3.4vw, 56px) auto 0;
}

/* ---------- ⑥ お知らせ ---------- */

.sec-news {
  padding-top: clamp(72px, 7vw, 120px);
  padding-bottom: clamp(72px, 7vw, 120px);
}

/* 見出し（( News ) と News）を画面の中央に置く＝2026-08-14 田中さん指示。
 * 🚨 `.c2-7`（2列目から）のままだと、中央に見えるのは「2〜7列の中の中央」で、
 *    画面の中央より左にずれる。列を1/13（全幅）に広げてから中央寄せする。
 *    お知らせの各記事（.news-item）と「お知らせ一覧」（.sec-more）は左のまま。 */
.sec-news .g > .c2-7 {
  grid-column: 1 / 13;
  text-align: center;
}

/* 田中さん指定の参照レイアウト（2026-08-13・スクリーンショット）に合わせた形。
 * 1件＝「左に枠つきの写真／右に 日付・題名・説明・関連リンク」を縦に並べる。
 * 罫線で仕切っていた1行1件の形は廃止（写真が主役になり、行の間は余白で分ける）。 */

.news-list {
  list-style: none;
  padding: 0;
  margin: 48px 0 0;
}

.news-item {
  position: relative;                 /* 題名のリンクでカード全体を覆うため */
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gutter);
  margin: 0 0 clamp(40px, 4.4vw, 72px);
}

.news-item:last-child {
  margin-bottom: 0;
}

/* 写真の枠。参照レイアウトと同じく**薄い地色＋細い枠**で、写真は枠の中に収める。
 * 🚨 `contain`（切らずに収める）にする＝比率の違う3枚（横長のバナー・取材写真・
 *    締結写真）を切らずに並べられる。`cover` にすると端の人が切れる。
 * 🚨 枠の比率は 16:10。写真は 16:9 なので上下にわずかに余白が出るが、
 *    それが参照レイアウトの「額装」の見え方になる。 */
.news-media {
  grid-column: 1 / 4;                  /* 田中さん指示（2026-08-13）で 5列→3列に縮小 */
  /* 「もう少しだけ小さく」で86%まで詰め、「後少しだけ大きく」で3列の93%に戻した。
   * 🚨 幅を指定すると grid の伸長（stretch）が効かなくなり左寄せになる＝それが狙い。
   *    列を2列に減らすと小さくなりすぎるため、列は3列のままで割合で詰めている。 */
  width: 93%;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  padding: clamp(12px, 1.2vw, 20px);   /* 枠が小さくなった分、内側の余白も詰める */
  background: var(--panel-2);
  border: 1px solid var(--line-faint);
  overflow: hidden;
}

.news-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform var(--d2) var(--ease);
}

.news-item:hover .news-media img {
  transform: scale(1.04);
}

.news-body {
  grid-column: 4 / 13;
  align-self: start;
  /* 🚨 写真を縮めた分だけ本文の欄が広がるが、1行が長いと日本語は読みにくい。
   *    承認済みの版と同じ行の長さ（約780px）で頭打ちにして、右側は余白にする。 */
  max-width: 780px;
}

.news-body time {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(13px, 1.2vw, 19px);
  letter-spacing: 0.04em;
  color: var(--muted-2);
}

.news-title {
  margin: clamp(10px, 1vw, 16px) 0 0;
  font-size: clamp(16px, 1.5vw, 24px);
  font-weight: 500;
  line-height: 1.7;
  color: var(--text);
}

/* 🚨 題名のリンクを広げて**カード全体（写真も含む）を押せるようにしている**。
 *    リンクの中にリンクは置けないので、関連リンクのボタンだけ手前に出す（.news-ext）。 */
.news-title a {
  color: inherit;
  border-bottom: none !important;
  transition: opacity var(--d1) var(--ease);
}

.news-title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.news-item:hover .news-title a {
  opacity: 0.65;
}

.news-desc {
  margin: clamp(12px, 1.2vw, 20px) 0 0;
  font-size: clamp(13px, 1.05vw, 16px);
  line-height: 2;
  color: var(--muted);
}

.news-ext {
  position: relative;                 /* カードを覆うリンクより手前に出す */
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: clamp(16px, 1.6vw, 26px);
  padding: 12px 20px;
  border: 1px solid var(--line-soft);
  border-radius: 2px;
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--text);
  transition: background var(--d2) var(--ease), color var(--d2) var(--ease),
              border-color var(--d2) var(--ease);
}

.news-ext:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: #FFFFFF;
}

.news-empty {
  color: var(--muted);
  font-size: 14px;
  margin-top: 40px;
}

.sec-more {
  margin: 48px 0 0;
  font-family: var(--font-ui);
  font-size: 13px;
  letter-spacing: 0.06em;
}

/* ---------- ⑦ お問い合わせ ---------- */

.sec-contact {
  padding-top: clamp(80px, 8vw, 140px);
  padding-bottom: clamp(140px, 16vw, 240px);
  text-align: center;
}

.sec-contact .display-md {
  /* 🚨 下の余白 40px → 28px（2026-08-20）。間に .contact-tag が入ったため、
   *    40px のままだと Contact の文字と一行の間が空きすぎて別々の塊に見える。 */
  margin: 32px 0 28px;
}

/* Contact の見出しの上に置く立ち位置の一行（2026-08-20 田中さん指示）。
 * 🚨 下の見出し（.lead-big・最大42px）より必ず小さく保つ。同じ大きさにすると
 *    見出しが2つ並んで見え、どちらを読ませたいのか分からなくなる。 */
.contact-tag {
  margin: 0 0 24px;
  font-size: clamp(14px, 1.32vw, 20px);
  line-height: 1.9;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.contact-lead {
  color: var(--muted);
  font-size: clamp(13px, 1.1vw, 17px);
  line-height: 2;
  margin: 0 0 56px;
}

/* 🚨 `.btn-outline` の定義そのものは **styles.css** に移した（2026-08-14）。
 *    下層ページ（base.html）は home.css を読み込まないため、ここに置いたままだと
 *    下層ページ末尾のCTAボタンが**枠も余白も無いただのリンク**になる。
 *    見た目は移動前と完全に同じ（トップは styles.css → home.css の順に読み込み、
 *    ここには同名の上書きが無いので、どちらに書いても結果は変わらない）。
 *
 * お問い合わせのボタンは、Consulting / Export の「More Details」と**同じ**にする
 * （2026-08-14 田中さん指示）＝ここに `.sec-contact` 用の上書きを書かない。
 *
 * 🚨 元は「最初から黄で塗り、hover で黒い面＋白文字」にしていたが、**hover で文字が消えた**。
 *    原因は色の指定の強さ＝ styles.css の
 *      `main a:not(.btn):not(.nav-cta):not(.news-ext)…`（当時 0,3,2）が
 *      `.sec-contact .btn-outline:hover`（0,3,0）に**勝つ**ため、
 *    こちらでいくら `color: #FFFFFF` と書いても本文リンクの色（#111）に戻され、
 *    黒い面の上に黒い文字が乗っていた（背景だけは上書きが効くので「黒く潰れる」形になる）。
 *    ＝ボタン用のクラスを新しく作ったら styles.css の `:not(...)` にも足すこと。
 *
 * 🚨 このため `.btn-outline` に色を足すときは、必ず実物の hover を見てから決める。
 *    More Details は「白地＋細い枠 → hover で黄色い面＋黒文字」で、文字は黒のまま＝読める。 */

/* ---------- スクロール演出の初期状態 ---------- */
/* 🚨 html.js-motion が付いているときだけ隠す（JSが落ちたら普通に読める状態のまま） */

html.js-motion .reveal {
  opacity: 0;
  transform: translateY(36px);
}

html.js-motion .zoom {
  /* 参照サイトの中核＝画面に入る前は1.8倍、通過で等倍（DESIGN.md §6）
   * 🚨 透明にしない。参照サイトのカードは出てくる間もずっと不透明のまま
   *    （実測：opacity は常に 1。動くのは位置と回転と拡大だけ）。 */
  transform: scale(1.8);
}

/* 事業カード＝画面の外から回転しながら飛び込む（参照サイトの実測値）
 * 🚨 初期位置をCSSに書かない。`.clip` と同じ穴で、CSSの translate(120%, 50%) を
 *    GSAP が読むと px に固まった値（実測 663.206px / 345.414px）が transform に残り、
 *    動きが終わってもカードが画面の右外に着地する（2026-08-12 実測 rect.left=1430.6）。
 *    初期位置は home.js の fromTo が握る。 */

html.js-motion .fv-lead,
html.js-motion .fv-lead-sub,
html.js-motion .fv-scroll,
html.js-motion .fv-fields li,
html.js-motion .fv-word-line > span {
  opacity: 0;
}

/* 見出しが下から立ち上がる（枠で切って、その中で動かす）
 * 🚨 初期位置をCSSで書かない。CSSの translateY(108%) を GSAP が読むと、
 *    「書体が届く前の高さ」で px に固まった値（実測 43.08px）が残り、
 *    アニメーションが終わっても見出しがずれたままになる。初期位置は home.js が握る。 */
.clip {
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em;
}

.clip > span {
  display: block;
}

/* ---------- タブレット・スマホ ---------- */

@media (max-width: 900px) {
  .home {
    --gx: 20px;
    --gutter: 12px;
  }

  .grid-lines { display: none; }

  /* 🚨 スマホではヘッダーが position: static（2段に折り返して実測150px前後）。
     ヒーローを 100svh にすると、その分だけ下にはみ出して
     一番見せたい巨大な英文が画面の外に落ちる（2026-08-12 実機で確認）。
     ヘッダーの実寸は折り返しで変わるので JS が --header-real に入れる。 */
  /* 🚨 狭い画面では「左に文字・右にロゴ」が成立しない（横に並べると両方潰れる）。
     縦に積み、3Dロゴの枠は残った高さを全部もらう（flex: 1）＝
     文章と事業2語のあいだに必ず収まる＝重なりを計算ではなく並びで防ぐ。 */
  .fv {
    height: auto;
    min-height: calc(100svh - var(--header-real, 150px));
    padding-bottom: 24px;
    display: flex;
    flex-direction: column;
  }

  .fv-inner {
    position: static;
    transform: none;
    display: flex;
    flex-direction: column;
    /* 🚨 stretch を明示する。書かないと横並び用の align-items: center が残り、
       文字の塊が幅いっぱいでなく中身の幅に縮んで画面中央に寄る
       （2026-08-12 実機スクショで発見＝他のセクションは全部左揃え）。 */
    align-items: stretch;
    flex: 1 1 auto;
    padding-top: 24px;
    gap: 0;
  }

  .fv-copy { flex: 0 0 auto; }

  .fv-logo-slot {
    flex: 1 1 auto;
    align-self: center;
    width: 74%;
    aspect-ratio: auto;
    min-height: 150px;
  }

  .fv-lead { line-height: 1.85; }

  /* 🚨 スマホには小さいほうの写真を送る（1920版 86KB → 960版 23.7KB）。
     ヒーローの写真は最初に見える一番大きな絵＝表示の速さに直に効く。 */
  .fv-bg::before {
    background-image: url("/assets/hero-bg-960.webp");
  }
  .fv-slide-2 { background-image: url("/assets/hero-bg2-960.webp"); }
  .fv-slide-3 { background-image: url("/assets/hero-bg3-960.webp"); }

  /* 3Dを描かない画面で出る静止画（ページ全体の透かし）。狭い画面では大きく */
  .stage-3d-fallback {
    width: min(70%, 340px);
  }

  /* 狭い画面では縦積みの一番下（絶対配置をやめる＝3Dロゴの枠と場所を取り合わない） */
  .fv-fields {
    position: static;
    margin-top: 20px;
    gap: 22px;
  }
  .fv-field-en { font-size: 20px; }

  .fv-scroll { display: none; }

  .c2-7, .c2-6 { grid-column: 1 / 13; }
  .c8-13 { grid-column: 1 / 13; }
  .c2-13 { grid-column: 1 / 13; }

  /* 🚨 狭い画面でも `<br>` は消さない（一度消して実物で測ったら悪化した・2026-08-13）。
     消すと2文がつながって流れ、最終行が「ます。」の3字だけになる（360px 実測）。
     残すと 17/8/17/13字＝短い行が文の終わりに来るので、行末の落ち方が気にならない。 */
  .biz-lead {
    grid-column: 1 / 13;
    font-size: 17px;
    line-height: 1.9;
    letter-spacing: 0;
    /* 🚨 最終行に「す。」の2字だけが落ちるのを避ける（360pxで実際に落ちていた）。
       対応していないブラウザでは折り返しが変わるだけで壊れない。 */
    text-wrap: pretty;
  }

  /* 🚨 狭い画面では左右の反転を打ち消す（縦に積むので鏡にしても意味がなく、幅だけが狭まる）。
     .biz-row.is-reverse > .c2-7 は詳細度が高く、上の1行では上書きされない＝ここで明示的に戻す。 */
  .biz-row.is-reverse > .c2-7,
  .biz-row.is-reverse > .c8-13 { grid-column: 1 / 13; grid-row: auto; }

  /* 右詰めも戻す（縦積みでは1つ目と揃っていないと、段ごとに文字の頭がずれて読みにくい） */
  .biz-row.is-reverse > .c2-7 { text-align: left; }
  .biz-row.is-reverse .biz-head { justify-content: flex-start; }
  .biz-row.is-reverse .progress,
  .biz-row.is-reverse .biz-desc { margin-left: 0; }
  .biz-row.is-reverse .progress i { left: 0; right: auto; }

  /* 寄せる向きの反転も戻す（縦に積むので左右の寄せは意味がない）。
     カードと文章の間隔（内側の余白）も、縦積みでは横に効いてしまうので消す。 */
  .biz-card-col { padding-left: 0; }
  .biz-row.is-reverse .biz-card-col {
    justify-content: flex-start;
    padding-left: 0;
    padding-right: 0;
  }

  /* 🚨 傾けたまま止まるので、画面幅いっぱいだと角が切れて中の字が読めなくなる
     （実測：350px幅を15度傾けると横406px＝画面から食み出す）。
     狭い画面では少し細くし、傾きも浅くする（振り幅は home.js 側） */
  /* 🚨 縦横比は広い画面と同じ 320/278 に揃える（2026-08-17・図版を入れて実測）。
     4/3 にすると中身の箱が 272×192 になり、図版（320:278）を敷いたとき上下が
     16%切れる＝木箱の下辺と航路の弧が欠ける。高さは38px増えるだけで、
     傾き6度でも横幅は 347px（390pxの画面に収まる）ため食み出しは起きない。 */
  .biz-card {
    aspect-ratio: 320 / 278;
    margin-top: 40px;
    width: calc(100% - 28px);
    margin-inline: auto;
  }

  /* 狭い画面では文章を貼り付けない（縦に積むので効果がなく、かえって間延びする） */
  .biz-row > .c2-7 { position: static; }

  /* 🚨 狭い画面ではカードを重ねない＝カード1枚が画面より高くなり、重ねると下が読めない。
     普通に縦に並べる（縮む・沈む動きも home.js 側で作らない）。 */
  /* 🚨 static ではなく relative。static にすると地紋（::after）と膜（.strength-card-veil）の
     基準がカードでなく祖先になり、画面いっぱいに飛び出す。貼りつきはどちらでも止まる。 */
  .strength-card {
    position: relative;
    /* 🚨 top を必ず打ち消す（2026-08-20 実測で発覚）。position を sticky から relative に
     *    替えただけだと、上の `top: calc(--stack-top + --i * --stack-step)` がそのまま効き、
     *    カードが 100px / 196px / 292px ずつ下へずれる（relative の top は見た目だけ動かし、
     *    レイアウト上の場所は動かない）＝後ろの注記や News の文字にカードが重なって読めなくなる。
     *    実測（390×844）：3枚目のカードが注記より 292px 下まではみ出し、文字が重なっていた。 */
    top: auto;
    width: 100%;
    box-shadow: 0 14px 32px rgba(17, 17, 17, 0.12);
  }
  .strength-card + .strength-card { margin-top: 28px; }
  .strength-card-media { aspect-ratio: 3 / 2; }

  /* 狭い画面では左の柱をやめ、連番と ( Strengths ) を1行にして本文の上に置く
     （360px では本文の幅が約280px しかなく、柱に76px 取られると本文が読めない） */
  .strength-card::after { width: 260px; height: 260px; right: -50px; top: -40px; }
  .strength-card-grid { grid-template-columns: 1fr; }
  .strength-card-side {
    display: flex;
    align-items: baseline;
    gap: 12px;
    border-right: none;
    border-bottom: 1px solid var(--line-soft);
    padding-right: 0;
    padding-bottom: 10px;
    margin-bottom: 16px;
  }
  .strength-card-label { margin: 0; }
  .strength-card-title { margin-top: 0; }

  /* 🚨 狭い画面では2列をやめて、区分を内容の上に置く。
     360px ではカードの中身が約280pxしかなく、2列のままだと右の内容が1〜2字ずつ折れて読めない。 */
  .strength-facts dl { grid-template-columns: 1fr; row-gap: 0; }
  /* 🚨 1列になると dt と dd が縦に並ぶ＝両方に罫を引くと区分と内容の間にも線が入る。
     区切りは1組につき1本（dd の下）だけにする。 */
  .strength-facts dt { padding: 12px 0 2px; border-bottom: none; }
  .strength-facts dd { padding: 0 0 12px; }


  /* 狭い画面では左右2列をやめ、写真の下に文章を積む（HTMLの並びのまま）。 */
  .news-item  { row-gap: 18px; margin-bottom: 44px; }
  .news-media { grid-column: 1 / 13; padding: 14px; width: 100%; }  /* 幅の%指定を打ち消す */
  .news-body  { grid-column: 1 / 13; max-width: none; }
  .news-title { font-size: 17px; line-height: 1.8; }
  .news-desc  { font-size: 13px; line-height: 1.9; }
}

/* デスクトップだけ：ヘッダーがヒーロー（濃い写真）の上に浮くので白文字にする。
   🚨 スマホはヘッダーが position:static＝白地の上に居る（写真の外）ので触らない。
   🚨 ヒーローを抜けると .is-scrolled が付いて白い地が敷かれる＝そこからは元の黒文字。
   🚨 お問い合わせ（.nav-cta）は黄色い面＋黒文字のまま。濃い地でもそのまま読める。 */
@media (min-width: 901px) {
  body.home .site-header:not(.is-scrolled) .logo {
    color: #FFFFFF;
  }

  body.home .site-header:not(.is-scrolled) .global-nav a:not(.nav-cta) {
    color: rgba(255, 255, 255, 0.82);
  }

  body.home .site-header:not(.is-scrolled) .global-nav a:not(.nav-cta):hover {
    color: #FFFFFF;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fv-scroll i::after { animation: none; }
  /* 写真の寄り引きも止める（動きを減らす設定の人には静止画で出す） */
  .fv-bg::before { animation: none; }
  /* 入れ替えもしない＝1枚目の静止画のまま（home.js 側でも作らないが、二重に塞ぐ） */
  .fv-slide { display: none; }
}

/* ---------- ⑨ 導入演出（最初に開いたときだけ・2026-08-13） ---------- */
/* 田中さん指示＝ recruit.triorb.co.jp と同じ流れ（実測は DESIGN.md v36）。
 * 黒幕（3段）→ 円のゲージ → ロゴ → ミッション文が1文字ずつ →
 * その文がそのまま h1 の位置へ着地 → 幕が上・中・下の順に右へ抜ける。
 *
 * 🚨 素の状態は display:none。`html.intro-on`（head のインラインscriptが付ける）が
 *    あるときだけ出す＝**JSが落ちても黒い幕が画面に残らない**。この前提を崩さない。
 * 🚨 動きは全部 home.js（GSAP）が握る。ここに @keyframes を書かない
 *    ＝途中で止めたり、幕だけ先に外したりできなくなるため。 */

.intro { display: none; }

/* 演出中はスクロールさせない（Lenis も home.js 側で止める）。
 * 🚨 演出が終わる／保険で外れると同時に元へ戻る＝intro-on を外すだけでよい。 */
html.intro-on,
html.intro-on body { overflow: hidden; }

html.intro-on .intro {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 9500;
}

/* 黒い幕＝3枚の横帯。上・中・下が0.07秒ずつ遅れて右へ抜ける。
 * 🚨 高さを 1/3 ぴったりにしない＝端末によって境目に1pxの白い筋が出る。
 *    少し重ねて（+2px）隙間を作らない。 */
.intro-mask { position: absolute; inset: 0; }

.intro-panel {
  position: absolute;
  left: 0;
  width: 100%;
  height: calc(100% / 3 + 2px);
  background: var(--ink);
}

.intro-panel:nth-child(1) { top: 0; }
.intro-panel:nth-child(2) { top: calc(100% / 3 - 1px); }
.intro-panel:nth-child(3) { top: calc(200% / 3 - 2px); }

/* 中央（ゲージ・ロゴ・ミッション文）。3つを同じマス目に重ねる。 */
.intro-stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0 var(--gx);
}

.intro-stage > * { grid-area: 1 / 1; }

/* ロゴ。**輪郭を金色の線がなぞり、なぞり終わると色が入り、その下に文字「RAYUP」が出る**
 * （2026-08-14 田中さん指示。それまでは「細い円のゲージ＋小さなロゴ」だった）。
 *
 * 🚨 中身のSVGは build.py が原本から作ってHTMLに直接埋めている（手で書かない）。
 *    1枚のSVGにマーク（.il-m）と文字（.il-w）が入っている＝**原本の位置関係のまま**。
 * 🚨 描き進み具合は home.js が stroke-dashoffset を動かして作る。ここに @keyframes を
 *    書かない＝途中で止めて確かめられなくなる。
 * 🚨 幅は「マーク＋文字」全体に対する指定。マークだけの頃と同じ数字にすると
 *    マークが一回り小さく見える（縦に文字の分だけ伸びるため）。 */
.intro-logo {
  width: clamp(190px, 22vw, 320px);
  height: auto;
  overflow: visible;        /* 輪郭の線が viewBox の縁で切れないように */
  opacity: 0;
}

/* 塗りの色は原本と同じ（黄 #E8B023／橙 #E84C22）。
 * 🚨 最初は塗りを消しておく（fill-opacity: 0）＝線だけが見えている状態から始める。 */
.intro-logo .il-y { fill: #E8B023; }
.intro-logo .il-o { fill: #E84C22; }

/* 文字「RAYUP」。なぞりが終わってから home.js が出す（最初は見えない）。
 * 🚨 白にしている＝原本の灰（fill: gray）は黒い幕の上では沈んで読みにくい。
 *    このあと出るミッション文も白に変わる＝幕の上の文字は白で揃える。
 * 🚨 opacity（要素ごと）で消す。fill-opacity で消すと、マーク側の
 *    「塗りが現れる」動き（fill-opacity を 1 にする）と同じ性質を取り合う。 */
.intro-logo .il-w {
  fill: #FFFFFF;
  opacity: 0;
}

/* なぞる対象＝マークだけ（文字は線で描かない）。 */
.intro-logo .il-m {
  fill-opacity: 0;
  stroke: var(--brand);
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
  /* 🚨 線の太さを図形の拡大率で変えない＝画面幅が変わっても常に 1.5px
   *    （v36 の円と同じ太さ。これが無いと大きい画面で線が太くなる）。 */
  vector-effect: non-scaling-stroke;
  /* 🚨 長さは build.py が付けた pathLength="1" で1に正規化されている＝
   *    「まだ1本も描いていない」が dasharray:1 / dashoffset:1 で表せる。
   *    **線の実長を数値でどこにも書かない**（v36 の円は 1432.57 をCSSとJSの2か所に
   *    持っていて、半径を変えると両方直す必要があった）。 */
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

/* ミッション文。字組みは .fv-lead と**同じ指定を共有している**（上の共通ルール）。
 * 🚨 ここに font-size や line-height を書き足さない＝h1 との差が着地のズレになる。 */
.intro-lead {
  margin: 0;
  opacity: 0;
  will-change: transform;
}

/* 1文字ずつ動かすため inline-block にする（home.js が span に分ける）。
 * 🚨 普通の本文でこれをやると日本語の禁則処理が効かなくなるが、ここは
 *    h1 と同じ字組み＋同じ位置の <br> で折り返しが起きない前提なので許容している。 */
.intro-lead span { display: inline-block; }