@charset "utf-8";
/* ============================================================
   cochi 採用LP v11 — pages（骨格・FV・3ゾーン）

   ★中身は現行本番 cochi.mykino.jp のCSSをそのまま引き継いだもの。
     岩田さん指示「デザインは現行LPのまま」（2026-08-19）。
     LIM標準の素CSS4分割に合わせて切り分けただけで、値は書き換えていない。
   ============================================================ */

/* ===== 骨格：スマホ＝1カラム ===== */
.stage{display:block;}
.col-c{padding-bottom:var(--bar);}

/* ヘッダー（スマホ＝コンパクト固定） */
.col-l{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:10px var(--pad);background:rgba(255,253,247,.94);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);}
/* ヘッダーロゴ：現行サイトと同じ明朝ワードマーク（枠線なし・2行／RECRUITは金色） */
.logo{font-family:"Hiragino Mincho ProN","Yu Mincho",var(--fs),serif;font-size:13px;font-weight:400;
  letter-spacing:.2em;line-height:1.5;color:#3a2e26;text-decoration:none;cursor:pointer;}
.logo span{display:block;font-size:9.5px;letter-spacing:.24em;color:#8a6a3c;margin-top:1px;}
/* ヘッダー左：ワードマークと職種バッジを横並びにする。
   align-items:stretch なので、四角の高さはロゴの高さにそのまま揃う（2026-08-20）。 */
.hd-left{display:flex;align-items:stretch;gap:10px;min-width:0;}
.jobtag{display:inline-flex;align-items:center;flex:none;
  padding:0 9px;border:1px solid #8a6a3c;border-radius:2px;
  font-family:var(--ff);font-size:11px;font-weight:500;letter-spacing:.06em;
  line-height:1;color:#8a6a3c;white-space:nowrap;}
.l-mid,.l-foot{display:none;}          /* PCのみ表示 */
.col-l .pill{display:none;}             /* スマホは下部固定バーのCTAに一本化 */
/* Instagram：スマホ＝ヘッダー右上のアイコン（円なし・アイコンのみ） */
/* Instagram はアイコンのみ。タップ領域を44px以上にする（2026-08-19） */
.ig-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:none;
  color:var(--sage);text-decoration:none;}
.ig-btn svg{width:26px;height:26px;}
/* Instagram：PC用ボタンはデフォルト非表示 */
.ig-fixed{display:none;}

/* 下部固定バー（スマホ＝インデックス＋CTA） */
.col-r{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:8px var(--pad) calc(8px + env(safe-area-inset-bottom));
  background:rgba(255,253,247,.96);backdrop-filter:blur(10px);border-top:1px solid var(--line);}
/* 2026-08-02 追加：応募のハードルを外す一行。PERSONA.md の3ペルソナ共通の壁
   「見学＝面接だと思っている」「今の職場にバレたくない」を、CTAに触れる直前で解除する。
   flex-wrap + order:-1 でボタン行の上に1行だけ載せる（バーの高さは約20px増える）。 */
.fnote{flex:1 0 100%;order:-1;margin:0 0 6px;text-align:center;font-family:var(--fs);
  font-size:11.5px;line-height:1.5;color:var(--ink-mute);letter-spacing:.02em;}
.idx{display:flex;gap:11px;overflow-x:auto;flex:1;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.idx::-webkit-scrollbar{display:none;}
/* 番号は塗りつぶしの円＋白抜き（白文字：非アクティブ5.18:1／アクティブ5.72:1） */
.idx a{position:relative;font-family:var(--fe);font-style:italic;font-size:13px;color:#fff;
  width:44px;height:44px;flex:none;display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:var(--ink-mute);transition:background .25s,transform .25s,box-shadow .25s;}
.idx a.on{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--ink);transform:scale(1.14);}
/* 番号の段階色：01＝テラコッタ（オープン告知の別格）／02〜09＝セージの明→暗ランプ。
   スクロールで内容が切り替わったことを色で認知できるようにする。全件 白文字4.5:1以上 */
.idx a[data-t="s01"]{background:var(--ink);}
.blk#s01 .nobadge{color:var(--ink);}
.idx a[data-t="s02"]{background:#687960;}
.blk#s02 .nobadge{color:#687960;}
.idx a[data-t="s03"]{background:#617159;}
.blk#s03 .nobadge{color:#617159;}
.idx a[data-t="s04"]{background:#596952;}
.blk#s04 .nobadge{color:#596952;}
.idx a[data-t="s05"]{background:#52614b;}
.blk#s05 .nobadge{color:#52614b;}
.idx a[data-t="s06"]{background:#4b5945;}
.blk#s06 .nobadge{color:#4b5945;}
.idx a[data-t="s07"]{background:#44513e;}
.blk#s07 .nobadge{color:#44513e;}
.idx a[data-t="s08"]{background:#3c4937;}
.blk#s08 .nobadge{color:#3c4937;}
.idx a[data-t="s09"]{background:#354130;}
.blk#s09 .nobadge{color:#354130;}

/* 数字と数字の間の中央に小さい● */
.idx a + a::before{content:"";position:absolute;width:3px;height:3px;border-radius:50%;
  background:rgba(117,108,92,.5);top:50%;left:-7px;margin-top:-1.5px;}
.r-cta{flex:none;}
/* LINE公式ボタン（背景＝LINE公式グリーン／ロゴ＝公式マーク） */
.pill{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font-family:var(--ff);font-style:normal;font-weight:700;letter-spacing:.02em;
  font-size:14.5px;background:var(--line-g);color:#fff;border:0;
  border-radius:100px;padding:12px 20px;min-height:48px;transition:.25s;}
.pill:active{background:var(--line-g-d);}
.pill:focus-visible{outline:2px solid var(--ink);outline-offset:3px;}
.pill.wide{width:100%;font-size:16px;padding:15px 20px;min-height:54px;}
/* 下部固定バーの3ボタン（応募／見学／LINE質問） */
.fbtn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:5px;
  font-family:var(--ff);font-weight:700;font-size:12.5px;letter-spacing:.01em;line-height:1.2;
  min-height:46px;border-radius:100px;text-align:center;padding:6px 4px;transition:.2s;}
.fbtn.apply{background:var(--cta);color:#fff;border:1px solid var(--cta);}
.fbtn.apply:active{background:var(--cta-d);}
.fbtn.visit{background:transparent;color:var(--sage);border:1px solid var(--sage);}
.fbtn.visit:active{background:var(--sage-pale);}
.fbtn.line{background:var(--line-g);color:#fff;border:0;}
.fbtn.line:active{background:var(--line-g-d);}
.fbtn svg{width:1.25em;height:1.25em;flex:none;fill:currentColor;}
.fbtn:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
.pill svg{width:1.35em;height:1.35em;flex:none;fill:currentColor;}
.pill.wide svg{width:1.45em;height:1.45em;}

/* ===== FV：全画面級の動画ヒーロー ===== */
/* FVは文字が焼き込まれた完成画像。切り取らず全体を出すので高さは画に従う。
   （2026-08-19：動画＋重ねテキストから差し替え） */
.hero{position:relative;overflow:hidden;background:#3f4a3c;}
.hero__img{display:block;width:100%;height:auto;}
.js[data-fv="ready"] .hero[data-video]{background:#3f4a3c center/cover no-repeat;}
.js[data-fv="ready"] .hero[data-video] .vph{display:none;}
.hero .vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.hero .vph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  gap:5px;background:linear-gradient(150deg,#5d6b55,#454f3c);color:#fff;text-align:center;padding:64px 24px 24px;}
.hero .vph b{font-size:12.5px;letter-spacing:.05em;}
.hero .vph small{font-size:10.5px;color:#d9ddd4;line-height:1.8;}
.hero .scrim{position:absolute;inset:0;background:rgba(28,32,26,.40);}   /* 動画全体に均一な半透明レイヤー */
.hero .htitle h1{margin:0;font-weight:inherit;}
.htitle{position:absolute;left:0;right:0;top:46%;transform:translateY(-50%);text-align:center;padding:0 18px;}
.hero .htitle h1 i,.hero .htitle i{display:block;font-family:var(--fc);font-style:normal;font-size:clamp(48px,15vw,64px);
  color:#fff;text-shadow:0 2px 16px rgba(0,0,0,.5);line-height:1.06;letter-spacing:.01em;}
.hero .htitle em{display:block;font-family:var(--fe);font-style:italic;font-size:15px;color:rgba(255,255,255,.95);margin-top:10px;}
/* 2026-08-02 ヒーロー改修：日本語見出しを主役に昇格（旧＝15px の説明文）。
   実測で「1.2画面もスクロールせず80%離脱」だったため、得になる具体を最初の画面に置く。 */
.hero .htitle b{display:block;font-family:var(--fs);font-weight:600;font-size:clamp(19px,5.4vw,26px);color:#fff;margin-top:14px;
  line-height:1.55;letter-spacing:.02em;text-shadow:0 1px 10px rgba(0,0,0,.55);}
.hero .htitle small{display:block;font-family:var(--fs);font-weight:400;font-size:13.5px;color:rgba(255,255,255,.94);margin-top:12px;
  line-height:1.85;letter-spacing:.03em;text-shadow:0 1px 10px rgba(0,0,0,.55);}
.sbadge{position:absolute;bottom:9%;left:50%;margin-left:-48px;width:96px;height:96px;}
.sbadge svg{width:100%;height:100%;animation:spin 14s linear infinite;}
.sbadge text{font-family:var(--fe);font-size:11.5px;fill:#fff;letter-spacing:.12em;}
@keyframes spin{to{transform:rotate(360deg);}}