/* ==========================================================================
   cochi 採用LP v1ab — components.css
   版：2026-08-05 v3 ／ 更新：MAIA
   内容：骨格（非対称スプリット）・ナビ・セクション見出し・ボタン・常駐AI・フッター
   借用元：BOTANIST 26spring（REFERENCE_DNA.md）
     原則1 面で縦に割る非対称スプリット → .stage / .rail / .flow
     原則2 上2/3を空ける             → .fv（コピーを下端へ寄せる）
     原則3 英字セリフ大＋英字サブ小   → .fv__en / .fv__sub / .fv__jp
     原則4 グリッド外の小さな写真     → .float-photo
     原則5 ナビ左上・ロゴ右上・CTA右下 → .mast / .rail__mark / .ai-tab
   ========================================================================== */

/* ===== 骨格：非対称スプリット（原則1） ================================== */
.stage{
  display:grid;
  grid-template-columns:1fr var(--rail-w);
  align-items:start;
}
.flow{min-width:0;background:var(--paper);}

/* --- 右の面：縦動画をそのまま立てる（DNA読み替え表） ------------------- */
.rail{
  position:sticky; top:0;
  height:100svh;
  overflow:hidden;
  background:var(--face);
  transition:background 1s var(--ease);
}
.rail__video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  /* 縦動画（9:16）を縦長の面に流し込むので上下が主。切れるのは左右のみ */
  object-position:50% 42%;
}
.rail__face{
  position:absolute; inset:0;
  background:var(--face);
  mix-blend-mode:multiply;
  opacity:.62;
  transition:background 1s var(--ease);
}
.rail__grain{
  position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(46,40,32,.34) 0%,rgba(46,40,32,0) 34%,rgba(46,40,32,0) 66%,rgba(46,40,32,.38) 100%);
  pointer-events:none;
}
/* ロゴは右上（原則5：一般的な左上ロゴを外す） */
.rail__mark{
  position:absolute; top:clamp(18px,2vw,30px); right:clamp(18px,2vw,30px);
  font-family:var(--en);
  font-size:clamp(17px,1.5vw,22px);
  letter-spacing:.24em;
  color:var(--on-face);
  text-transform:lowercase;
}
/* 面の下端に、いま読んでいる章の英字だけを小さく置く */
.rail__meta{
  position:absolute; left:clamp(18px,2vw,30px); bottom:clamp(18px,2vw,30px);
  max-width:none;
  font-family:var(--en);
  font-size:var(--fs-meta);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--on-face);
  opacity:.86;
  display:flex; align-items:baseline; gap:.9em;
}
.rail__meta b{font-weight:400;font-size:1.5em;letter-spacing:.1em;}

/* ===== ナビは左上（原則5） ============================================== */
.mast{
  position:fixed; z-index:40;
  top:0; left:0;
  width:calc(100% - var(--rail-w));
  padding:clamp(16px,1.7vw,26px) var(--gut);
  display:flex; align-items:center; gap:clamp(14px,1.6vw,28px);
  pointer-events:none;
  /* 不透明のベタ帯だと本文がグリフ中央で水平に切れて見える（実測で多数）。
     下端をフェードさせて「隠れている」と分かる状態にする。 */
  background:linear-gradient(180deg,var(--paper) 0 58%,rgba(251,246,236,.86) 78%,rgba(251,246,236,0) 100%);
}
.mast a{
  pointer-events:auto;
  font-family:var(--en);
  font-size:var(--fs-meta);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink-2);
  padding:10px 0 2px;
  border-bottom:1px solid transparent;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.mast a:hover{color:var(--ink);border-bottom-color:var(--ink);}

/* ===== セクション見出し ================================================= */
.blk{
  padding:var(--sec-y) var(--gut);
  border-top:1px solid var(--line-soft);
}
.blk:first-of-type{border-top:0;}

/* 番号は英字セリフで大きく、章名は英字を小さく（原則3の階層をそのまま移植） */
.nobadge{margin-bottom:.4em;}
.nobadge .no{
  font-family:var(--en);
  font-size:clamp(40px,4.4vw,68px);
  line-height:1;
  color:var(--accent);
  letter-spacing:.02em;
}
.nobadge .ring{display:none;} /* 回転リングは装飾過多。面の色替わりに役割を譲る */

.eyebrow{
  font-family:var(--en);
  font-size:var(--fs-meta);
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin-bottom:clamp(18px,2vw,30px);
}
.blk h2{margin-bottom:clamp(20px,2.2vw,34px);}
.blk h2 + .lead{margin-top:-.4em;}

/* ===== ボタン（角丸なし・面で押す） ==================================== */
.pill{
  display:inline-flex; align-items:center; justify-content:center; gap:.7em;
  padding:1.05em 2.2em;
  background:var(--ink);
  color:var(--paper);
  font-size:var(--fs-body);
  font-weight:500;
  letter-spacing:.1em;
  border:1px solid var(--ink);
  transition:background .3s var(--ease),color .3s var(--ease);
}
.pill:hover{background:transparent;color:var(--ink);}
.pill.wide{width:100%;max-width:420px;}
.pill--ghost{background:transparent;color:var(--ink);}
.pill--ghost:hover{background:var(--ink);color:var(--paper);}

/* ===== 常駐AI：右下の小さなタブ（原則5のCTA位置。角丸だけはLIM法に従い0） == */
.ai-tab{
  position:fixed; z-index:60;
  right:0; bottom:clamp(84px,12vh,140px);
  display:flex; align-items:center; gap:.7em;
  padding:10px 16px 10px 10px;
  background:var(--paper);
  border:1px solid var(--ink);
  border-right:0;
  color:var(--ink);
  transition:transform .4s var(--ease),background .3s var(--ease);
}
.ai-tab:hover{transform:translateX(-4px);background:var(--paper-2);}
.ai-tab__face{width:38px;height:38px;object-fit:cover;object-position:50% 22%;flex:0 0 auto;}
.ai-tab__txt{display:flex;flex-direction:column;line-height:1.35;}
.ai-tab__txt b{font-size:13px;font-weight:500;letter-spacing:.06em;}
.ai-tab__txt small{font-family:var(--en);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);}

/* ===== 下部固定CTA（SPのみ） ============================================ */
.dock{
  position:fixed; z-index:55; left:0; right:0; bottom:0;
  display:none;
  background:var(--paper);
  border-top:1px solid var(--ink);
}
.dock a{
  flex:1 1 0; min-width:0;
  padding:14px 6px;
  text-align:center;
  font-size:13px; font-weight:500; letter-spacing:.06em;
  border-left:1px solid var(--line);
}
.dock a:first-child{border-left:0;}
.dock a.is-key{background:var(--ink);color:var(--paper);}

/* ===== フッター ========================================================= */
.sitefoot{
  padding:clamp(40px,5vw,72px) var(--gut) clamp(72px,10vw,90px);  /* 旧 clamp(90,10vw,72) は min>max */
  border-top:1px solid var(--line);
  font-size:var(--fs-meta);
  letter-spacing:.14em;
  color:var(--ink-3);
  font-family:var(--en);
  text-transform:uppercase;
}

/* ===== 画像がまだ無い枠（納品前に必ず埋めるか消す） ==================== */
.area-photo{
  display:none; /* 空枠は出さない。素材が入った時に .has-img で復帰させる */
}
.area-photo.has-img{display:block;}

/* ===== レスポンシブ：面は「右」でなく「上」に立つ ======================= */
/* DOM順は flow → rail（PCで面を右に置くため）。SPでは order で面を先頭へ戻す。 */
@media (max-width:1023px){
  /* PC用の align-items:start をここで解除しないと、面が幅0に潰れる */
  .stage{display:flex;flex-direction:column;align-items:stretch;}
  .rail{position:relative;order:-1;height:62svh;}
  .flow{order:0;}
  /* mix-blend-mode は z-index:40 が作るスタッキングコンテキスト内で
     .mast 自身の透明背景としか合成されず、地色 #fbf6ec 上でコントラスト1.00:1＝不可視だった */
  .mast{width:100%;background:linear-gradient(180deg,rgba(251,246,236,.94) 0 62%,rgba(251,246,236,0) 100%);}
  .mast a{color:var(--ink-2);mix-blend-mode:normal;}
  .dock{display:flex;}
  /* SPでは本文に被らないよう、AIタブは顔だけの小さな正方形にする */
  .ai-tab{bottom:62px;padding:6px;gap:0;}
  .ai-tab__face{width:34px;height:34px;}
  .ai-tab__txt{display:none;}
  .sitefoot{padding-bottom:calc(50px + 6vw);}
}

/* 既定のチャット起動ボタンは隠し、右下タブ1つに入口を統一する */
.cochi-fab{display:none !important;}

/* v4：ナビは診断FVを抜けてから出す（暗いFVの上に薄い文字を重ねない） */
.mast{opacity:0;transform:translateY(-8px);transition:opacity .4s var(--ease),transform .4s var(--ease);}
.mast.is-on{opacity:1;transform:none;}
.mast:not(.is-on) a{pointer-events:none;}