/* ==========================================================================
   cochi 採用LP v1ab — pages.css
   版：2026-08-05 v3 ／ 更新：MAIA
   内容：FV と各セクション固有の見た目。文言・構造は現行本番LP（v2）のまま。
   ========================================================================== */

/* ===== 面に流し込む縦動画（スクリプトが .vid を差し込む） =============== */
.rail .vid{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:50% 40%;
}
.rail{background-size:cover;background-position:50% 40%;}

/* ===== FV：上2/3を空け、コピーは縦中央より下（原則2） ================== */
.fv{
  position:relative;
  min-height:100svh;
  padding:0 var(--gut) clamp(56px,7vw,104px);
  display:flex; flex-direction:column; justify-content:flex-end;
  border-top:0;
}
.fv__en{
  font-family:var(--en);
  font-style:italic;
  font-weight:400;
  font-size:var(--fs-display);
  line-height:.98;
  letter-spacing:var(--ls-en);
  color:var(--ink);
  margin:0 0 .34em;
  max-width:none;
}
.fv__sub{
  font-family:var(--en);
  font-size:var(--fs-meta);
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin:0 0 clamp(26px,3.4vw,52px);
  max-width:none;
}
/* 和文は差し色でゴシック細字・行間広め（原則3） */
.fv__jp{
  font-size:clamp(17px,1.55vw,23px);
  font-weight:400;
  line-height:2.1;
  letter-spacing:.06em;
  color:var(--sage-d);
  margin:0 0 .9em;
  max-width:24em;
}
.fv__note{
  font-size:var(--fs-body);
  line-height:2;
  color:var(--ink-2);
  max-width:26em;
}
/* グリッドから外して余白に浮かべる小さな写真（原則4） */
.float-photo{
  position:absolute;
  top:clamp(120px,17vh,200px);
  right:clamp(24px,6vw,90px);
  width:clamp(96px,11vw,158px);
  aspect-ratio:1/1;
  overflow:hidden;
}
.float-photo img{width:100%;height:100%;object-fit:cover;}
.float-photo figcaption{
  margin-top:.6em;
  font-family:var(--en);
  font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-3);
}

/* ===== 導入の一文（リード文セクション） ================================ */
.poem{
  font-size:clamp(17px,1.6vw,24px);
  font-weight:400;
  line-height:2.15;
  letter-spacing:.05em;
  color:var(--ink);
  max-width:26em;
}
.poem .gap{display:block;height:.7em;}

/* ===== 汎用テキスト ==================================================== */
.lead{font-size:var(--fs-lead);line-height:2.05;margin-bottom:1.4em;}
.body{color:var(--ink-2);margin-bottom:1.2em;}
.note{font-size:var(--fs-meta);color:var(--ink-3);line-height:1.9;}

/* ===== s01 新店オープン ================================================= */
.open-list{margin:clamp(20px,2.4vw,34px) 0;max-width:var(--measure);}
.open-list li{
  padding:.85em 0 .85em 1.5em;
  border-top:1px solid var(--line-soft);
  position:relative;
}
.open-list li:last-child{border-bottom:1px solid var(--line-soft);}
.open-list li::before{
  content:""; position:absolute; left:0; top:1.55em;
  width:9px; height:1px; background:var(--accent);
}

/* ===== 定義リスト（s01 概要 / s11 アクセス） ============================ */
.spec dl{
  display:grid;
  grid-template-columns:7.5em 1fr;
  max-width:var(--wide);
  border-top:1px solid var(--line);
}
.spec dt,.spec dd{padding:.95em .2em;border-bottom:1px solid var(--line-soft);}
.spec dt{
  font-family:var(--en);
  font-size:var(--fs-meta);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-3);
  font-feature-settings:"palt";
}
.spec dd{color:var(--ink);}

/* ===== s02 1日3〜4名 =================================================== */
.num{
  font-family:var(--en);
  font-size:clamp(64px,8vw,128px);
  line-height:1;
  color:var(--accent);
  letter-spacing:0;
  margin-bottom:.18em;
  max-width:none;
}
.num .tld{font-size:.5em;padding:0 .06em;vertical-align:.18em;}
.num em{
  font-family:var(--jp); font-style:normal;
  font-size:.2em; letter-spacing:.16em; color:var(--ink-2);
  margin-left:.6em;
}
.cap{
  font-size:clamp(19px,1.9vw,27px);
  font-weight:500; line-height:1.75; letter-spacing:.03em;
  margin-bottom:.9em;
}
.tp-badges{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(10px,1.4vw,22px);
  margin-top:clamp(26px,3vw,44px);
  max-width:620px;
}
.tp-badges img{width:100%;height:auto;}

/* ===== s03 / s05 理由リスト ============================================= */
.big4{color:var(--accent);font-family:var(--en);font-size:1.35em;padding:0 .1em;}
.reason{
  display:grid;
  grid-template-columns:3.4em 1fr;
  gap:0 clamp(12px,1.4vw,22px);
  padding:clamp(18px,2vw,28px) 0;
  border-top:1px solid var(--line-soft);
  max-width:var(--measure);
}
.reason .rn{
  grid-column:1; grid-row:1 / span 2;   /* 明示しないと p が1列目(3.4em=38px)へ自動配置され縦一列に潰れる */
  font-family:var(--en);
  font-size:clamp(24px,2.4vw,34px);
  line-height:1.1;
  color:var(--accent);
}
.reason h3{grid-column:2;margin-bottom:.45em;}
.reason p{grid-column:2;color:var(--ink-2);}

/* ===== s03 写真ペア ===================================================== */
.duo{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(10px,1.2vw,18px);
  margin-top:clamp(28px,3.2vw,48px);
}
.duo .ph{overflow:hidden;}
.duo .ph.r34{aspect-ratio:3/4;}
.duo .ph img{width:100%;height:100%;object-fit:cover;}
/* 4枚のうち1枚だけ大きさを外し、リズムを作る（原則4の考え方をグリッド内で） */
.duo .ph:nth-child(1){grid-row:span 2;aspect-ratio:3/5;}

/* ===== s04 店内マーキー ================================================= */
.marquee{position:relative;margin-top:clamp(26px,3vw,44px);overflow:hidden;}
.mq-track{
  display:flex; gap:clamp(8px,1vw,14px);
  width:max-content;
  animation:mq 46s linear infinite;
}
.marquee:hover .mq-track,.marquee.is-stopped .mq-track{animation-play-state:paused;}
.mq-photo{width:clamp(160px,19vw,260px);aspect-ratio:3/4;overflow:hidden;flex:0 0 auto;}
.mq-photo img{width:100%;height:100%;object-fit:cover;}
@keyframes mq{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.mq-stop{
  position:absolute; right:0; top:-2.4em;
  font-family:var(--en); font-size:var(--fs-meta);
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3);
  border-bottom:1px solid var(--line);
}
@media (prefers-reduced-motion:reduce){ .mq-track{animation:none;} }

/* ===== s06 給与・報酬 =================================================== */
.grp{
  display:flex; align-items:baseline; gap:.9em;
  margin:clamp(30px,3.4vw,50px) 0 clamp(12px,1.4vw,20px);
  padding-bottom:.5em;
  border-bottom:1px solid var(--ink);
  max-width:var(--wide);
}
.grp .en{
  font-family:var(--en); font-size:var(--fs-meta);
  letter-spacing:.24em; text-transform:uppercase; color:var(--ink-3);
}
.grp .jp{font-size:clamp(17px,1.4vw,21px);font-weight:500;letter-spacing:.04em;}
.grp .jp small{font-size:.62em;font-weight:400;color:var(--ink-2);margin-left:.5em;letter-spacing:.02em;}

.plan{
  padding:clamp(18px,2vw,28px) 0;
  border-bottom:1px solid var(--line-soft);
  max-width:var(--wide);
}
/* 金額は必ず1行目の右端に来させる（RECOMMENDED が金額を次行へ押し出さないように） */
.plan .r1{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:baseline;
  column-gap:1.2em; row-gap:.4em;
}
.plan .r1 .rec{grid-column:1;justify-self:start;}
.plan .r1 .amt{grid-column:2;grid-row:1;}
.ph3{font-size:var(--fs-h3);font-weight:500;}
.ph3 small{font-weight:400;color:var(--ink-2);font-size:.78em;margin-left:.5em;}
.plan .amt{
  margin-left:auto;
  font-family:var(--en);
  font-size:clamp(26px,2.6vw,38px);
  line-height:1.1;
  color:var(--accent);
  white-space:nowrap;
}
.plan .amt small{font-family:var(--jp);font-size:.34em;color:var(--ink-2);margin-left:.35em;letter-spacing:.06em;}
.plan .rec{
  font-family:var(--en); font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--paper); background:var(--sage); padding:.35em .8em;
}
.plan .bd{
  display:flex; flex-wrap:wrap; gap:.4em 1.4em;
  margin-top:.7em;
  font-size:var(--fs-meta); color:var(--ink-3); letter-spacing:.06em;
}
.plan .rates{
  display:flex; flex-wrap:wrap; gap:.5em 1.6em;
  margin-top:.9em;
  font-size:var(--fs-body); color:var(--ink-2);
}
.plan .rates b{color:var(--ink);font-weight:500;margin-left:.35em;}

/* ===== s07 福利厚生 ===================================================== */
.bene{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:clamp(16px,2vw,32px) clamp(18px,2.2vw,36px);
  margin-top:clamp(22px,2.6vw,38px);
}
.bene .item{display:grid;grid-template-columns:44px 1fr;gap:0 14px;align-items:start;}
.bene .bi{width:44px;height:44px;object-fit:contain;}
.bh3{font-size:var(--fs-body);font-weight:500;margin-bottom:.35em;}
.bene .btxt p{font-size:13.5px;line-height:1.85;color:var(--ink-2);max-width:none;}

/* ===== s08 インタビュー ================================================= */
.iv{
  padding:clamp(30px,3.6vw,56px) 0;
  border-top:1px solid var(--line-soft);
}
.iv:first-of-type{border-top:0;}
.iv-head{display:flex;align-items:center;gap:clamp(14px,1.6vw,24px);margin-bottom:clamp(18px,2vw,30px);}
.iv-portrait{width:clamp(72px,7vw,104px);aspect-ratio:1/1;overflow:hidden;flex:0 0 auto;}
.iv-portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 25%;}
.iv .meta{display:flex;flex-direction:column;gap:.25em;}
.iv .role{
  font-family:var(--en); font-size:var(--fs-meta);
  letter-spacing:.22em; text-transform:uppercase; color:var(--ink-3);
}
.iv .name{font-size:clamp(17px,1.5vw,22px);font-weight:500;letter-spacing:.06em;}
.iv .rule{width:44px;height:1px;background:var(--accent);margin-top:.4em;}
.pull{
  font-size:clamp(18px,1.7vw,25px);
  font-weight:400; line-height:1.95; letter-spacing:.04em;
  color:var(--sage-d);
  margin:0 0 clamp(20px,2.2vw,32px);
  padding-left:clamp(14px,1.4vw,22px);
  border-left:2px solid var(--sage);
  max-width:24em;
}
/* 縦動画は縦のまま置く（横に伸ばさない） */
.vclip{
  position:relative; display:block;
  width:min(300px,72vw); aspect-ratio:9/16;
  overflow:hidden; background:var(--ink);
  margin:0 0 clamp(20px,2.4vw,34px);
}
.vclip .poster{width:100%;height:100%;object-fit:cover;}
.vclip video{width:100%;height:100%;object-fit:cover;}
.vclip .play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:56px; height:56px; border:1px solid var(--paper);
  display:grid; place-items:center; color:var(--paper);
}
.vclip .play::before{
  content:""; width:0;height:0;
  border-left:12px solid var(--paper);
  border-top:8px solid transparent; border-bottom:8px solid transparent;
  margin-left:3px;
}
.vclip .vtime{
  position:absolute; right:10px; bottom:10px;
  font-family:var(--en); font-size:11px; letter-spacing:.14em; color:var(--paper);
}
.qa{max-width:var(--wide);}
.qa .q{
  font-size:var(--fs-body); font-weight:500;
  margin:clamp(16px,1.8vw,26px) 0 .5em;
  padding-left:1.5em; position:relative;
}
.qa .q::before{
  content:"Q"; position:absolute; left:0; top:0;
  font-family:var(--en); color:var(--accent); font-size:1.05em;
}
.qa .a{color:var(--ink-2);padding-left:1.5em;}

/* ===== s09 オーナーの想い ============================================== */
.owner-msg{
  font-size:clamp(16px,1.35vw,19px);
  line-height:2.15;
  color:var(--ink);
  max-width:27em;
  white-space:pre-line;
}
.owner-sign{
  margin-top:clamp(22px,2.4vw,34px);
  font-family:var(--en);
  font-size:var(--fs-meta);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-3);
}

/* ===== s10 FAQ ========================================================= */
.faq{max-width:var(--wide);border-top:1px solid var(--line);margin-top:clamp(18px,2vw,30px);}
.faq details{border-bottom:1px solid var(--line-soft);}
.faq summary{
  list-style:none; cursor:pointer;
  padding:1.15em 2.2em 1.15em 0;
  font-size:var(--fs-body); font-weight:500; position:relative;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{
  content:""; position:absolute; right:.35em; top:1.75em;
  width:11px; height:1px; background:var(--ink);
}
.faq summary::before{
  content:""; position:absolute; right:.35em; top:1.75em;
  width:11px; height:1px; background:var(--ink);
  transform:rotate(90deg); transition:transform .3s var(--ease);
}
.faq details[open] summary::before{transform:rotate(0);}
.faq .a{padding:0 0 1.3em;color:var(--ink-2);}

.contact{margin-top:clamp(46px,5.4vw,84px);}
.contact .center{margin-bottom:.8em;}
.acts{margin-top:clamp(22px,2.6vw,36px);}

/* ===== s11 アクセス ==================================================== */
.map{margin-top:clamp(24px,2.8vw,42px);aspect-ratio:16/9;max-width:640px;overflow:hidden;border:1px solid var(--line);}
.map iframe{width:100%;height:100%;border:0;}
.map-link{
  display:inline-block; margin-top:1em;
  font-family:var(--en); font-size:var(--fs-meta);
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-2); border-bottom:1px solid var(--line);
}

/* ===== s12 応募フォーム ================================================ */
.form-box{margin-top:clamp(24px,2.8vw,42px);max-width:var(--wide);}
.seg{display:flex;border:1px solid var(--ink);margin-bottom:clamp(22px,2.4vw,34px);}
.seg label{
  flex:1 1 0; text-align:center; cursor:pointer;
  padding:.9em .4em; font-size:var(--fs-body); font-weight:500;
  border-left:1px solid var(--ink);
  transition:background .25s var(--ease),color .25s var(--ease);
}
.seg label:first-child{border-left:0;}
.seg input{position:absolute;opacity:0;pointer-events:none;}
.seg input:checked + span,.seg label:has(input:checked){background:var(--ink);color:var(--paper);}

.field{margin-bottom:clamp(16px,1.8vw,24px);}
.field > label{display:block;font-size:var(--fs-meta);letter-spacing:.14em;color:var(--ink-2);margin-bottom:.5em;}
.req,.opt{
  font-family:var(--en); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
  padding:.25em .6em; margin-left:.6em; vertical-align:.12em;
}
.req{background:var(--terra);color:var(--paper);}
.opt{border:1px solid var(--line);color:var(--ink-3);}
.field input[type=text],.field input[type=tel],.field input[type=email],
.field select,.field textarea,.row input,.row select{
  width:100%; padding:.85em .9em;
  background:var(--paper-2);
  border:1px solid var(--line);
  font-size:var(--fs-body);
  transition:border-color .25s var(--ease);
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ink);outline:none;}
.field textarea{min-height:120px;resize:vertical;}
.hint{font-size:var(--fs-meta);color:var(--ink-3);margin-top:.5em;line-height:1.8;}

.jobs{display:flex;flex-wrap:wrap;gap:.6em;margin-top:.6em;}
.jobs label{cursor:pointer;}
.jobs input{position:absolute;opacity:0;pointer-events:none;}
.jobs span{display:inline-block;padding:.6em 1.1em;border:1px solid var(--line);font-size:13.5px;}
.jobs input:checked + span{background:var(--ink);color:var(--paper);border-color:var(--ink);}
fieldset{border:0;}
legend{font-size:var(--fs-meta);letter-spacing:.14em;color:var(--ink-2);margin-bottom:.5em;}

.slot{margin-bottom:clamp(14px,1.6vw,22px);}
.sh{font-size:var(--fs-meta);letter-spacing:.14em;color:var(--ink-2);margin-bottom:.5em;}
.row{display:grid;grid-template-columns:1fr 1fr;gap:.6em;}

.err{color:var(--terra-d);font-size:var(--fs-meta);margin-top:.6em;}
.submit{
  width:100%; margin-top:clamp(18px,2vw,28px);
  padding:1.15em 1em;
  background:var(--ink); color:var(--paper);
  font-size:var(--fs-body); font-weight:500; letter-spacing:.12em;
  border:1px solid var(--ink);
  transition:background .3s var(--ease),color .3s var(--ease);
}
.submit:hover{background:transparent;color:var(--ink);}
.submit[disabled]{opacity:.45;cursor:not-allowed;}
.privacy{font-size:var(--fs-meta);color:var(--ink-3);margin-top:1em;line-height:1.85;}

.done{display:none;padding:clamp(24px,3vw,44px) 0;}
.done.is-on{display:block;}
.done h4{font-size:clamp(19px,1.8vw,26px);font-weight:500;margin-bottom:.7em;}
.done details{margin-top:1.4em;}
.done summary{font-size:var(--fs-meta);color:var(--ink-3);cursor:pointer;}
.done textarea{width:100%;min-height:90px;margin-top:.6em;background:var(--paper-2);border:1px solid var(--line);padding:.7em;}

.mode-visit{display:none;}
body.mode-visit-on .mode-visit{display:block;}
body.mode-visit-on .mode-apply{display:none;}

/* ===== 中央寄せは見出し1つに限定（連発しない） ========================= */
.center{text-align:left;}


/* ===== SP：面が上に立つので FV は「続きの面」として組む ================= */
@media (max-width:1023px){
  .fv{
    min-height:auto;
    padding-top:clamp(40px,9vw,64px);
    padding-bottom:calc(74px + 8vw);   /* 下部固定CTA＋AIタブに潜り込ませない */
    justify-content:flex-start;
  }
  .fv__jp{max-width:none;}
  .fv__note{max-width:none;}
  .vclip{width:100%;}
  .bene .item{grid-template-columns:38px 1fr;}
  .marquee{margin-left:calc(var(--gut) * -1);margin-right:calc(var(--gut) * -1);}
  .mq-stop{right:var(--gut);}
}

/* ===== 900px 以下の詰め =============================================== */
@media (max-width:900px){
  .tp-badges{grid-template-columns:repeat(2,minmax(0,1fr));max-width:380px;}
  .duo{grid-template-columns:1fr 1fr;}
  .duo .ph:nth-child(1){grid-row:auto;aspect-ratio:3/4;}
  .reason{grid-template-columns:2.6em 1fr;}
  .row{grid-template-columns:1fr;}
  .float-photo{top:auto;bottom:calc(100% - 62svh);right:var(--gut);width:88px;}
  .spec dl{grid-template-columns:6.2em 1fr;}
  .plan .amt{margin-left:0;}
}
@media (max-width:1023px){
  .float-photo{display:none;} /* SPでは面が全幅なので浮かせる余白がない */
}

/* ==========================================================================
   v4 追加（2026-08-05）：診断FV／答え／報酬シミュレーター
   根拠：実測で FV離脱85%（5秒以内）・s01到達14.9%。スクロールを前提にしない。
        流入の92.9%がIGストーリーズ＝親指のタップしかしていない相手に、
        「読ませる」でなく「1問だけ選ばせる」。
   接地：PERSONA.md「辞めたいのではなく"この働き方"を辞めたい」「夜23時ベッドでスマホ」
        「文字が小さい・情報が多い・明るすぎるトーンは即離脱」→ FVは暗い面で組む
   ========================================================================== */

/* --- 診断FV：画面ごと「面」にする（BOTANISTの面と余白の対比を反転して使う） --- */
.fvq{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:clamp(28px,4vw,56px) var(--gut) clamp(72px,9vw,84px);  /* 旧 clamp(84,9vw,72) は min>max で常に84px固定だった */
  background:var(--ink);
  color:var(--paper);
  overflow:hidden;
  border-top:0;
}
.fvq__media{position:absolute;inset:0;z-index:0;}
.fvq__media video,.fvq__media img{width:100%;height:100%;object-fit:cover;object-position:50% 38%;}
.fvq__scrim{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,rgba(30,26,21,.62) 0%,rgba(30,26,21,.46) 38%,rgba(30,26,21,.86) 78%,rgba(30,26,21,.96) 100%);
}
/* 全称の子セレクタで書くと .fvq__media / .fvq__scrim の absolute を後勝ちで潰す。
   実際に潰して、画像が本文として積まれ選択肢が画面外へ落ちた。対象を明示する。 */
.fvq__h,.fvq__q,.choices,.fvq__safe{position:relative;z-index:2;}
.fvq__mark{
  position:absolute; top:clamp(20px,2.4vw,32px); right:var(--gut); z-index:3;
  font-family:var(--en); font-size:clamp(16px,1.4vw,21px);
  letter-spacing:.24em; color:var(--paper);
}
.fvq__h{
  font-size:clamp(25px,3.1vw,44px);
  font-weight:500; line-height:1.62; letter-spacing:.02em;
  margin:0 0 clamp(20px,2.4vw,34px);
  max-width:17em;
  color:var(--paper);
}
.fvq__h .off{color:rgba(251,246,236,.5);font-weight:400;}
.fvq__q{
  font-size:clamp(15px,1.15vw,17px);
  letter-spacing:.06em; color:rgba(251,246,236,.82);
  margin:0 0 clamp(12px,1.4vw,18px);
  max-width:none;
}
/* 選択肢は親指圏内・大きく・4つまで */
.choices{display:grid;gap:clamp(8px,.9vw,12px);max-width:640px;}
.choice{
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:1em;
  width:100%; text-align:left;
  padding:clamp(15px,1.5vw,20px) clamp(16px,1.6vw,22px);
  background:rgba(251,246,236,.07);
  border:1px solid rgba(251,246,236,.34);
  color:var(--paper);
  transition:background .25s var(--ease),border-color .25s var(--ease);
}
.choice:hover,.choice:focus-visible{background:rgba(251,246,236,.16);border-color:var(--paper);}
.choice[aria-pressed="true"]{background:var(--paper);color:var(--ink);border-color:var(--paper);}
.choice b{display:block;font-size:clamp(15.5px,1.25vw,18px);font-weight:500;letter-spacing:.03em;line-height:1.5;}
.choice small{display:block;margin-top:.35em;font-size:12.5px;line-height:1.7;color:rgba(251,246,236,.66);}
.choice[aria-pressed="true"] small{color:var(--ink-2);}
.choice .go{font-family:var(--en);font-size:11px;letter-spacing:.18em;opacity:.7;}
/* 応募しない理由（「見学＝面接だと思っている」）への先回り */
.fvq__safe{
  margin-top:clamp(16px,1.8vw,24px);
  font-size:13px; line-height:1.9; color:rgba(251,246,236,.7);
  max-width:30em;
}

/* --- 答え：選んだ痛みに対する1画面の返答 -------------------------------- */
.answer{display:none;padding:var(--sec-y) var(--gut);background:var(--paper-2);border-top:0;}
.answer.is-on{display:block;}
.answer__eye{
  font-family:var(--en); font-size:var(--fs-meta);
  letter-spacing:.26em; text-transform:uppercase; color:var(--ink-3);
  margin-bottom:clamp(14px,1.6vw,22px);
}
.answer__h{
  font-size:clamp(22px,2.4vw,34px); font-weight:500;
  line-height:1.6; letter-spacing:.02em; margin-bottom:clamp(18px,2vw,28px);
  max-width:20em;
}
.answer__fig{
  display:flex; align-items:baseline; gap:.6em;
  margin:0 0 clamp(16px,1.8vw,26px);
}
.answer__fig b{font-family:var(--en);font-size:clamp(44px,5.4vw,82px);line-height:1;color:var(--accent);}
.answer__fig span{font-size:var(--fs-body);color:var(--ink-2);letter-spacing:.06em;}
.answer__body{color:var(--ink-2);margin-bottom:1em;}
.answer__voice{
  margin-top:clamp(20px,2.2vw,32px);
  padding-left:clamp(14px,1.4vw,22px);
  border-left:2px solid var(--sage);
  font-size:clamp(15px,1.25vw,18px); line-height:2; color:var(--sage-d);
  max-width:24em;
}
.answer__voice cite{display:block;margin-top:.7em;font-style:normal;font-size:12px;letter-spacing:.14em;color:var(--ink-3);}

/* --- 報酬シミュレーター -------------------------------------------------- */
.sim{padding:var(--sec-y) var(--gut);background:var(--paper);}
.sim__grid{display:grid;grid-template-columns:1fr;gap:clamp(22px,2.6vw,40px);max-width:var(--wide);}
.sim__row{display:grid;gap:.6em;}
.sim__lab{font-size:var(--fs-meta);letter-spacing:.14em;color:var(--ink-2);}
.segs{display:flex;flex-wrap:wrap;border:1px solid var(--ink);}
.segs button{
  flex:1 1 0; min-width:0; padding:.85em .5em;
  font-size:13.5px; font-weight:500; letter-spacing:.03em;
  border-left:1px solid var(--ink);
  transition:background .2s var(--ease),color .2s var(--ease);
}
.segs button:first-child{border-left:0;}
.segs button[aria-pressed="true"]{background:var(--ink);color:var(--paper);}
.sim input[type=range]{width:100%;accent-color:var(--terra);}
.sim__val{font-family:var(--en);font-size:clamp(18px,1.6vw,24px);color:var(--accent);}
.sim__out{
  margin-top:clamp(22px,2.6vw,36px);
  padding:clamp(20px,2.2vw,30px);
  background:var(--ink); color:var(--paper);
  max-width:var(--wide);
}
.sim__amt{display:flex;align-items:baseline;gap:.4em;}
.sim__amt b{font-family:var(--en);font-size:clamp(46px,5.6vw,86px);line-height:1;}
.sim__amt span{font-size:var(--fs-body);letter-spacing:.08em;}
.sim__break{
  margin-top:1.1em; padding-top:1em;
  border-top:1px solid rgba(251,246,236,.24);
  font-size:13px; line-height:1.95; color:rgba(251,246,236,.82);
  max-width:none;
}
.sim__break em{font-style:normal;color:var(--paper);font-weight:500;}
/* 職安法5条の4・景表法：試算であることを必ず同じ面に出す */
.sim__note{
  margin-top:1em; font-size:12px; line-height:1.9;
  color:rgba(251,246,236,.62); max-width:none;
}
.sim__real{
  margin-top:clamp(16px,1.8vw,24px);
  padding:clamp(14px,1.4vw,18px);
  border:1px solid var(--line);
  font-size:13px; line-height:1.95; color:var(--ink-2);
  max-width:none;
}

/* --- 診断直後のCTA（「聞くだけ」を先頭に） ------------------------------ */
.cta3{padding:0 var(--gut) var(--sec-y);background:var(--paper);}
.cta3__in{display:grid;gap:.7em;max-width:var(--wide);}
.cta3 a,.cta3 button{
  display:flex; align-items:center; justify-content:space-between; gap:1em;
  padding:1.1em 1.4em; text-align:left;
  border:1px solid var(--ink); background:transparent; color:var(--ink);
  font-size:var(--fs-body); font-weight:500; letter-spacing:.04em;
  transition:background .25s var(--ease),color .25s var(--ease);
}
.cta3 a:hover,.cta3 button:hover{background:var(--ink);color:var(--paper);}
.cta3 .is-key{background:var(--ink);color:var(--paper);}
.cta3 .is-key:hover{background:var(--terra);border-color:var(--terra);color:var(--paper);}
.cta3 small{display:block;font-weight:400;font-size:12px;color:var(--ink-3);margin-top:.3em;letter-spacing:.02em;}
.cta3 .is-key small{color:rgba(251,246,236,.7);}
.cta3 .go{font-family:var(--en);font-size:11px;letter-spacing:.18em;opacity:.6;flex:0 0 auto;}

/* --- 「資料」以降の見出し（診断の下は読みたい人だけの領域） -------------- */
.docs-lead{
  max-width:none;   /* p の max-width:30em から左右ガター150pxが引かれ「確認する」が孤立していた */
  padding:clamp(40px,5vw,72px) var(--gut) 0;
  font-family:var(--en); font-size:var(--fs-meta);
  letter-spacing:.26em; text-transform:uppercase; color:var(--ink-3);
}

@media (min-width:1024px){
  .sim__grid{grid-template-columns:1fr 1fr;}
  .cta3__in{grid-template-columns:repeat(3,1fr);}
  .cta3 a,.cta3 button{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:.4em;min-height:104px;}
}

/* v4：動画は診断FV側に入れる（3秒の勝負どころ）。レール側は静止画のまま */
.fvq .vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 38%;z-index:0;}
/* W-12：SPでは .rail が FV直下に62svh出るため、FVと同じ絵だと二度見せになる */
.rail{background-image:url("../img/salon03.jpg");}


/* 縦の短い端末（iPhone SE 等）では、選択肢が必ず1画面に収まるよう詰める */
@media (max-height:740px){
  .fvq{padding-top:20px;padding-bottom:74px;}
  .fvq__h{font-size:clamp(21px,5.6vw,26px);line-height:1.55;margin-bottom:14px;}
  .fvq__q{margin-bottom:10px;}
  .choice{padding:11px 14px;}
  .choice b{font-size:14.5px;}
  .choice small{margin-top:.2em;font-size:11.5px;}
  .fvq__safe{margin-top:12px;font-size:12px;line-height:1.75;}
}

/* SP：右下の常駐AIタブに「聞くだけ」の一文が隠れないよう逃がす */
@media (max-width:1023px){ .fvq__safe{padding-right:56px;} }

/* --- FV：何の募集で、どの雇用形態があるか（見出しより先に読ませる） ----- */
.fvq__job{
  position:relative; z-index:2;
  display:flex; flex-wrap:wrap; align-items:center; gap:.55em .9em;
  margin:0 0 clamp(14px,1.6vw,22px);
  max-width:none;
}
.fvq__job b{
  font-size:clamp(14.5px,1.15vw,17px); font-weight:500;
  letter-spacing:.1em; color:var(--paper);
  padding-right:.9em; border-right:1px solid rgba(251,246,236,.34);
}
.fvq__job .emp{display:flex;flex-wrap:wrap;gap:.4em;}
.fvq__job .emp i{
  font-style:normal; font-size:11.5px; letter-spacing:.08em;
  color:var(--paper);
  padding:.3em .7em;
  border:1px solid rgba(251,246,236,.42);
}
.fvq__job .loc{
  font-size:11.5px; letter-spacing:.06em; color:rgba(251,246,236,.7);
}
@media (max-height:740px){
  .fvq__job{margin-bottom:10px;gap:.4em .7em;}
  .fvq__job b{font-size:13.5px;}
  .fvq__job .emp i{font-size:11px;padding:.25em .6em;}
  .fvq__job .loc{width:100%;}
}

/* SP：ロゴは絶対配置だと求人ラベル行と衝突する。行の先頭に組み込む */
@media (max-width:1023px){
  .fvq__mark{display:none;}
  .fvq__job::before{
    content:"cochi";
    font-family:var(--en); font-size:15px; letter-spacing:.2em; color:var(--paper);
    padding-right:.8em; border-right:1px solid rgba(251,246,236,.34);
  }
}
/* 縦の短い端末：求人ラベル行を足したぶん、さらに詰めて1画面に収める */
@media (max-height:740px){
  .fvq{padding-top:16px;padding-bottom:70px;}
  .fvq__h{font-size:clamp(20px,5.2vw,24px);line-height:1.5;margin-bottom:12px;}
  .fvq__q{margin-bottom:8px;font-size:13.5px;}
  .choices{gap:6px;}
  .choice{padding:9px 13px;}
  .choice b{font-size:14px;}
  .choice small{margin-top:.15em;font-size:11px;line-height:1.6;}
  .fvq__safe{margin-top:9px;font-size:11.5px;line-height:1.7;}
}


/* ==========================================================================
   design-reviewer 7観点監査の指摘反映（2026-08-05）
   ========================================================================== */

/* F-2：縦741〜979pxの帯（1366×768・1280×800・1536×864）が詰めの対象外だった。
   ノートPCで4つ目の選択肢と安心文が画面外に落ちていた。 */
@media (min-width:1024px) and (max-height:980px){
  .fvq{padding-top:clamp(20px,2.4vw,40px);padding-bottom:clamp(48px,5vw,64px);}
  .fvq__job{margin-bottom:12px;}
  .fvq__h{font-size:clamp(24px,2.2vw,32px);line-height:1.5;margin-bottom:14px;}
  .fvq__q{margin-bottom:10px;}
  .choice{padding:12px 18px;}
  .choice b{font-size:16px;}
  .choice small{margin-top:.2em;font-size:12px;}
  .fvq__safe{margin-top:12px;}
}

/* W-8：FVの動画に停止手段が無く WCAG 2.2.2 違反だった */
@media (prefers-reduced-motion:reduce){
  .fvq .vid{display:none;}
}

/* W-3：タップターゲット44px未満 */
.sim input[type=range]{height:44px;}
.map-link{padding:.6em 0;}

/* W-4：transition だけ書いて hover が未定義だった主要操作 */
.segs button:hover:not([aria-pressed="true"]){background:var(--paper-2);}
.faq summary:hover{color:var(--terra-d);}
.jobs label:hover span{border-color:var(--ink);}
.map-link:hover{color:var(--ink);border-bottom-color:var(--ink);}

/* W-2：小さい文字での白抜きバッジはコントラストを上げる */
.req{background:var(--terra-d);font-size:11px;}
.opt{font-size:11px;}
.plan .rec{background:var(--sage-d);font-size:11px;}

/* W-13：打消し表示を本文サイズへ近づける（強調との比を詰める） */
.sim__note{font-size:13px;}

/* F-5(案B)：右下固定のAIタブが本文・停止ボタン・縦動画に被っていた。
   SPだけ右ガターを確保し、マーキーの停止ボタンは左へ退避する。 */
@media (max-width:1023px){
  .blk,.sim,.answer,.cta3,.docs-lead{padding-right:calc(var(--gut) + 46px);}
  .mq-stop{right:auto;left:var(--gut);}
  .vclip{width:calc(100% - 46px);}
  .marquee{margin-right:calc((var(--gut) + 46px) * -1);}
}

/* F-7：診断で並べ替えると章番号が 06→02→07→01 と非連番になり、
   最も目立つ要素（63pxのテラコッタ数字）が壊れて見えた。読む順に振り直す。 */