/* =====================================================================
   v9（2026-10-11）会社概要（company-v2.html）だけで読む。cta.css のあとに読む
   主役の演出は #concept の「同じ面」の舞台（潮汐ロックの地球と月）1つだけ。描くのは page-company.js
   ・1440：左に見出しと3つの段、右に舞台（sticky top 96px、正方形）。トップのヒーローと同じ「文字が左、地球と月が右」
   ・1080以下：舞台をヘッダーの直下に残し、文字がその下を流れる（事例ページのスマホと同じ型）
   ・reduced-motion：舞台は張りつかない。描くのは最後の段（段3）の構図1枚だけ（page-company.js）。見出しのフェードも無し
   ・WebGL が無いとき：舞台を消し（.is-off）、文章だけで読めるようにする
   共通の部品（ボタン・カード・面）は cta.css / sections.css のものをそのまま使い、ここでは足りない分だけ書く
   設計と変えたところ（理由）
   ・舞台の一辺：設計は min(46vw, 100vh - 140px)。注記を舞台の下に置くので、100vh - 196px にした
     （1280x720 で注記が画面の下で切れたため。1440x900 ではどちらも 46vw = 662px で同じ）
   ・スマホの段の高さ：設計は 60vh。ページの長さ（390 幅で 9,550px 以内）に収めるため、下の値まで詰めた
   ・最後の呼びかけ（#cta）：張りつき（250vh）と地球・軌道線をやめ、中身の高さで置く。文言とボタンは共通のまま
     （このページの地球と月は #concept の舞台1つにする。ページの長さの上限にも収める）
   v9.2（2026-10-11 検査の指摘で直したところ）
   ・PC：描く面（canvas）を舞台の四角より広げる（左は文字の列のすぐ右、右は画面の右端まで。大きさは page-company.js が決める）。
     舞台の四角の大きさは ::before で取るので、注記の位置は変わらない
   ・段の高さ：PC 70vh → 40vh（段と段の間の空白を約 200px に）。最後の段は「段3の文が画面の中央に来るまで舞台が張りついている」高さ。
     1080 以下は 52vh → 30vh（注記と次の段の間の空白を約 100px に）
   ・舞台の列の幅：46vw に 760px の上限（1920 以上で文字の列が細くなりすぎないように）
   ・スマホ：帯を 320px → 296px、段の上の余白を 28px → 20px にして、最初の画面で段1の文が固定バーに隠れないようにした
   ・見出しは単語の途中で折り返さない（文字の読み込み前も）。#で飛んできたとき、見出しがヘッダーの下に入らない
   ・reduced-motion：段の左の線は3つとも最初から出す（スクロールで線が移らない）
   ===================================================================== */

/* 途中で折り返さない語（番地、事業内容の項目、「ほか」）。行に入らないときは、その前で折り返す */
#info .nw,#practice .nw,.site-footer .nw{white-space:nowrap}

/* ---------- #concept：見出し＋3つの段（左）と舞台（右） ---------- */
.space.sub #concept{padding-top:calc(var(--header-h) + clamp(24px,3.4vw,56px));padding-bottom:clamp(40px,5vw,88px)}
.co-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(420px,min(46vw,760px));column-gap:clamp(32px,4vw,72px);align-items:start}
.co-text{grid-column:1;min-width:0;container-type:inline-size}
/* 見出しは最初の描画から見える（フェードも行めくりも使わない） */
.space.sub #concept .page-title{margin-top:18px;font-size:var(--t2);line-height:var(--lh2);letter-spacing:-.01em;max-width:none;animation:co-in 600ms cubic-bezier(.2,.7,.2,1) both;
  word-break:keep-all;overflow-wrap:anywhere}   /* 「最／後」のように語の途中で折り返さない（<wbr> と読点のところで折る。文字の読み込み前も） */
/* 1920 以上：文字の列（約 460px）に「最後は離れる会社です」が1行で入る大きさまで下げる（pages-space.js が句を折り返さない単位で包むので、
   入らないと列の外へはみ出す）。1440 では --t2 のまま。帯の幅（1080 以下）では .co-text が display:contents なので効かない */
@media (min-width:1081px){.space.sub #concept .page-title{font-size:min(var(--t2),9.8cqi)}}
@keyframes co-in{from{opacity:.92}to{opacity:1}}   /* 薄いフェードだけ。文字は動かさない（行めくりは使わない） */
.space.sub #concept .eyebrow{margin-bottom:0}
.space.sub #concept .page-lead{margin-top:clamp(18px,2vw,28px)}

/* 3つの段（旧 3つの柱）。文字組は .pillar と同じ（sky：--soft 800／見出し：900／本文：--body）。文字は薄くしない
   段の見出しは h2（ページの h1 の直下。見出しの階層を飛ばさない）。見た目は小見出し（--t3） */
.co-steps{list-style:none;margin:clamp(36px,4.4vw,64px) 0 0;padding:0}
.co-step{min-height:40vh}
/* 最後の段：段3の文の中心が画面の中央に来るまで、舞台が張りついたままでいる高さ。
   = 舞台の上端 96 + 舞台の一辺 S + 注記 約36 − 画面の半分 + 文の高さの半分 約80 + 余り 約24 */
.co-step:last-child{min-height:calc(min(46vw,760px,100vh - 196px) - 50vh + 236px)}
.co-step-t{padding:2px 0 4px clamp(14px,1.6vw,22px);border-left:2px solid rgba(141,184,255,0);transition:border-color 320ms ease}
.co-step.is-on .co-step-t{border-left-color:#8DB8FF}   /* 画面の中央に来ている段（values-key と同じ線） */
.co-step .sky{font-size:var(--t5);line-height:var(--lh5);font-weight:800;letter-spacing:.1em;color:var(--soft)}
.co-step .co-step-h{margin-top:4px;font-size:var(--t3);line-height:var(--lh3);font-weight:900;letter-spacing:0;color:#fff}
.co-step .co-step-h+p{margin-top:10px;max-width:30em;font-size:var(--t4);line-height:var(--lh4);letter-spacing:.02em;font-weight:var(--fw-body);color:var(--body)}
.co-step .sky,.co-step .co-step-h,.co-step .co-step-h+p{text-shadow:0 0 22px rgba(3,6,14,.95),0 0 6px rgba(3,6,14,.9)}

/* 舞台：右の列に張りつく正方形。一辺 = min(列の幅, 100vh - 196px)
   196px = 読み込み直後の舞台の上端（ヘッダー 76 + 上の余白 最大 56）＋ 注記（余白 10 + 2行ぶん 50）＋ 4。
   これで読み込み直後も、張りついたあと（top 96）も、注記が画面の下で切れない
   正方形の大きさは ::before で取る。canvas はその上に重ね、PC では page-company.js が左右に広げる（左は文字の列のすぐ右、右は画面の右端まで） */
.co-stage{grid-column:2;grid-row:1;position:sticky;top:96px;align-self:start;justify-self:center;width:min(100%,calc(100vh - 196px));min-width:0}
.co-stage::before{content:"";display:block;aspect-ratio:1/1}
.co-canvas{position:absolute;left:0;top:0;display:block;width:100%;height:auto;aspect-ratio:1/1;max-width:none;pointer-events:none;opacity:0;transition:opacity 500ms ease}
.co-stage.is-ready .co-canvas{opacity:1}   /* 画像が4枚そろって描き始めたら出す（何も無い黒い球を見せない） */
.co-cap{margin-top:10px;font-size:var(--t5);line-height:var(--lh5);font-weight:500;color:var(--note);text-shadow:0 0 18px rgba(3,6,14,.95),0 0 6px rgba(3,6,14,.9)}
.co-stage.is-off{display:none}   /* WebGL が使えないとき（page-company.js が付ける） */
/* 舞台が無いときは、段をスクロールで送る理由が無いので、段の高さを文の高さに戻し、1列にする */
.co-grid:has(.co-stage.is-off),.co-grid.co-solo{grid-template-columns:minmax(0,1fr)}
.co-grid:has(.co-stage.is-off) .co-step,.co-grid.co-solo .co-step{min-height:0;padding-bottom:clamp(28px,3.4vw,44px)}

/* #付きのリンクで飛んできたとき、見出しが固定ヘッダーの下に入らない（フッターの「プライバシーポリシー」など） */
.space.sub .sec[id]{scroll-margin-top:var(--header-h)}

/* ---------- 面の上下の余白（このページだけ少し詰める。共通の --sec は 1440 で 173px） ---------- */
.space.sub #origin,.space.sub #areas,.space.sub #info,.space.sub #practice,.space.sub #privacy{padding-block:clamp(72px,8vw,128px)}

/* ---------- #origin：社名の由来・私たちの約束・最初の予約導線 ---------- */
#origin .co-more{margin-top:clamp(20px,2.4vw,32px)}
.co-promise{margin-top:clamp(40px,4.4vw,64px);padding-top:clamp(28px,3.4vw,44px);border-top:1px solid var(--rule)}
.co-cta-box{margin-top:clamp(36px,4.2vw,56px)}
.co-cta-note{font-size:var(--t4);line-height:var(--lh4);font-weight:700;color:#fff}
.co-cta-box .btn-row{margin-top:16px}

/* ---------- #areas：提供領域（カードの見た目は cta.css の .space .pcards a.pcard.pcard） ----------
   space.js がトップ用に付けるカードの視差（3枚目のずらし・絵の上下）は、このページでは止める（演出は舞台1つ） */
#areas .pcards a.pcard{transform:none!important}
#areas .pcard-img{overflow:hidden;border-radius:12px}
#areas .pcard-img img{transform:none}
#areas .pcard-meta{margin:16px 0 8px}
#areas .pcard-dots{display:grid;gap:6px;margin-top:12px}
#areas .pcard-dots li{position:relative;padding-left:1.1em;font-size:var(--t4);line-height:var(--lh4);font-weight:var(--fw-body);color:var(--body)}
#areas .pcard-dots li::before{content:"";position:absolute;left:.15em;top:.78em;width:5px;height:5px;border-radius:50%;background:#8DB8FF}
@media (min-width:861px){
  #areas .pcards{row-gap:32px}   /* 伴走のカードとオプションの2枚の間（共通は 6vw = 86px） */
  /* 伴走のカード：文字を左、絵を右（トップ 08 と同じ組み） */
  #areas .pcard--wide{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:1fr repeat(6,auto) 1fr;column-gap:clamp(24px,3.4vw,56px)}
  #areas .pcard--wide .pcard-img{grid-column:2;grid-row:1 / -1;aspect-ratio:4/3;align-self:center}
  #areas .pcard--wide .pcard-meta{grid-column:1;grid-row:2;margin-top:0}
  #areas .pcard--wide .pcard-title{grid-column:1;grid-row:3}
  #areas .pcard--wide .pcard-desc{grid-column:1;grid-row:4}
  #areas .pcard--wide .pcard-dots{grid-column:1;grid-row:5}
  #areas .pcard--wide .svc-price{grid-column:1;grid-row:6}
  #areas .pcard--wide .svc-fine{grid-column:1;grid-row:7}
}

/* ---------- #info：会社情報＋お預かりした情報の扱い（1つの面） ----------
   表の最後の罫線が「情報の扱い」の上の線を兼ねる（二重線にしない） */
#info .trust{margin-top:0;border-top:0}
#info .co-more{margin-top:clamp(18px,2vw,28px)}
/* URL は途中で切らない（共通の .info a は break-all）。行に入らないときだけ、URL ごと次の行へ送る */
#info .info a{word-break:normal;overflow-wrap:break-word}

/* ---------- #privacy：PC は4つの項目を2列に並べる（1列だと 1440 で 1,160px あるため。文はそのまま） ---------- */
@media (min-width:861px){
  .space.sub #privacy .privacy{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(32px,4vw,64px)}
}

/* ---------- #cta：最後の呼びかけ（張りつかせない。文言とボタンは共通のまま） ---------- */
.space.sub #cta{padding-block:clamp(72px,8vw,128px) clamp(72px,9vw,140px);text-align:center}
.space.sub #cta .end-inner{max-width:1100px;margin-inline:auto;padding:0;will-change:auto}
.space.sub #cta .end-title{font-size:var(--t2);line-height:var(--lh2);letter-spacing:-.02em;margin-top:16px}
.space.sub #cta .end-lead{margin-top:clamp(16px,2vw,24px)}
.space.sub #cta .btn-row{margin-top:clamp(24px,3vw,36px)}
/* フッターを最後の呼びかけに重ねない（共通は margin-top:-100vh で、張りついた呼びかけの上に乗せている） */
body.space.sub .site-footer{margin-top:0}

/* ---------- 1080以下：1列。舞台をヘッダーの直下に残し、文字がその下を流れる ---------- */
@media (max-width:1080px){
  .co-grid{display:flex;flex-direction:column;align-items:stretch}
  .co-text{display:contents}
  .co-steps{order:2}
  .co-stage{order:1;position:sticky;top:var(--header-h);z-index:2;width:auto;height:clamp(220px,40vh,320px);margin:clamp(16px,3vw,28px) calc(var(--gutter) * -1) 0;justify-self:auto;align-self:stretch;
    background:#03060E}   /* 下を流れる文字が透けないよう、宇宙の色で塗る */
  /* 下端：宇宙の色から透明へ 48px。舞台と、その下を流れる文字との境目を消す */
  .co-stage::before{display:none}   /* 帯の高さは上で決めている */
  .co-stage::after{content:"";position:absolute;left:0;right:0;top:100%;height:48px;background:linear-gradient(180deg,#03060E,rgba(3,6,14,0));pointer-events:none}
  .co-canvas{width:100%;height:100%;aspect-ratio:auto}
  /* 注記は帯の右下。月の軌道は page-company.js が注記の上端より上に収める（月の上に文字を重ねない） */
  .co-cap{position:absolute;right:var(--gutter);bottom:8px;left:var(--gutter);margin:0;text-align:right;font-size:var(--t5);line-height:1.5}
  .co-steps{margin-top:clamp(28px,4vw,44px)}
  /* 段の高さ：帯の下の読める窓に、段が2つ近く入る高さ（注記と次の段の間を空けすぎない） */
  .co-step,.co-step:last-child{min-height:30vh}
}
@media (max-width:600px){
  /* 段の高さ：設計は 60vh。ページの長さを 9,550px 以内に収めるため 24vh（文の高さ＋少し）。帯の下の読める窓（約 400px）に2つの段が入り、窓が空にならない
     段と段の間のスクロールが短い分、page-company.js が移りの幅を広げ、描く状態を時間でなめらかに追わせている */
  .co-step,.co-step:last-child{min-height:24vh}
  /* 帯を少し低く（320 → 296px）、段の上の余白を 20px に：最初の画面（390x844）で段1の文が固定バー（上端 776px）に隠れない */
  .co-stage{height:clamp(220px,35vh,296px)}
  .co-steps{margin-top:20px}
  .co-cap{left:auto;max-width:21em}
  /* 面の上下の余白を詰める（ページの長さを抑える） */
  .space.sub #origin,.space.sub #areas,.space.sub #info,.space.sub #practice,.space.sub #privacy{padding-block:48px}
  .space.sub #cta{padding-block:56px 64px}
  .co-promise{margin-top:32px;padding-top:24px}
  .co-cta-box{margin-top:28px}
  .space.sub #privacy .privacy{margin-top:28px}
  .space.sub #privacy .privacy article{padding-block:14px}
  /* 提供領域：伴走のカードの絵は横長に（1 : .56 → 2 : 1）。オプションの2枚は、絵を右上の小さな正方形にして、名前の横に置く */
  #areas .pcard--wide .pcard-img{aspect-ratio:2/1}
  #areas .pcards a.pcard:not(.pcard--wide){display:grid;grid-template-columns:minmax(0,1fr) 72px;column-gap:14px;align-items:start}
  #areas .pcard:not(.pcard--wide)>*{grid-column:1 / -1}
  #areas .pcard:not(.pcard--wide) .pcard-img{grid-column:2;grid-row:1 / span 2;aspect-ratio:1/1;align-self:start}
  #areas .pcard:not(.pcard--wide) .pcard-meta{grid-column:1;grid-row:1;margin-top:6px}
  #areas .pcard:not(.pcard--wide) .pcard-title{grid-column:1;grid-row:2;align-self:start}
  /* 名前を途中で折らない（共通の .hov-text は、ホバーで右へ 64px ずらす分だけ幅を空けている。スマホにホバーは無い） */
  #areas .pcard:not(.pcard--wide) .hov-text{max-width:none}
  /* 会社情報：項目名と中身を横に並べる（縦に積むと12行で 800px を超えるため） */
  #info .info div{grid-template-columns:5.4em minmax(0,1fr);column-gap:14px;padding:12px 0}
  #info .info dt{padding-top:.2em}
}

/* ---------- 動きを減らす設定：舞台は張りつかない。段の線の移り変わりも無し ---------- */
@media (prefers-reduced-motion:reduce){
  .co-stage{position:relative;top:auto}
  .co-step-t,.co-canvas{transition:none}
  .co-step .co-step-t{border-left-color:#8DB8FF}   /* 3つの段の線は最初から全部出す（スクロールで線が移らない。舞台も最後の段の構図1枚で止まっている） */
  .space.sub #concept .page-title{animation:none}
  .co-step,.co-step:last-child{min-height:0;padding-bottom:clamp(28px,3.4vw,44px)}
}
@media (prefers-reduced-motion:reduce) and (max-width:1080px){
  .co-stage::after{display:none}
}