@charset "utf-8";
/* ============================================================
   cochi 採用LP v11 — components（中央列のブロック部品）

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

/* ===== 中央列のブロック ===== */
.blk{padding:56px var(--pad);border-bottom:1px solid var(--line);}
/* ブロックごとの背景濃淡（交互）。明側=#fffdf7／濃側=#eee6cf。差を広げてセクションの境目を明確化（全文字AA以上を検算済み）
   09は濃色セクション（下の #s09 で上書き）＝ページ全体のリズムの山にする */
.blk:last-child{border-bottom:none;}
/* 番号バッジ：FVと同じ回転リング（cochi RECRUIT）＋中央に番号。色は番号ごとに連動 */
.nobadge{position:relative;width:74px;height:74px;display:flex;align-items:center;justify-content:center;color:var(--sage);}
.nobadge .ring{position:absolute;inset:0;width:100%;height:100%;animation:spin 22s linear infinite;}
.nobadge .ring text{font-family:var(--fe);font-size:12px;fill:currentColor;letter-spacing:.08em;opacity:.9;}
.no{font-family:var(--fe);font-style:italic;font-size:23px;color:inherit;letter-spacing:.03em;line-height:1;position:relative;z-index:1;}
@media(prefers-reduced-motion:reduce){ .nobadge .ring{animation:none;} }
.eyebrow{font-size:10px;letter-spacing:.3em;color:var(--ink-mute);font-weight:700;margin-top:6px;}
h2{font-family:var(--fs);font-weight:600;font-size:22px;line-height:1.72;letter-spacing:.04em;margin-top:14px;}
.big4{font-family:var(--fe);font-style:normal;font-size:2.7em;color:var(--sage);line-height:1;vertical-align:-.18em;margin:0 .04em;}
.poem{text-align:center;font-size:14px;color:var(--ink-soft);line-height:2.45;margin-top:24px;}
.poem .gap{display:block;height:1.1em;}
.body{font-size:14px;color:var(--ink-soft);line-height:2.2;margin-top:18px;}
/* ===== 強調と緩急（新色は使わない：セージ／ウェイト／サイズだけで作る） =====
   .lead 節の要点を大きく濃く → 続く .body を小さく淡く落として"落差"を作る
   .hl   キーフレーズ（セージ 5.39:1）
   .mk   1ブロック1箇所までのマーカー（地 #e8ece2・文字 6.13〜12.51:1） */
.lead{font-size:17px;font-weight:500;color:var(--ink);line-height:2.05;letter-spacing:.03em;margin-top:18px;}
.lead + .body{margin-top:9px;}
.hl{color:var(--sage);font-weight:700;}
.mk{background:linear-gradient(transparent 56%,var(--sage-pale) 56%);padding:0 2px;
  font-weight:700;color:var(--ink);}
.center{text-align:center;}

/* 写真プレースホルダ */
.ph{position:relative;background:var(--sage-pale);border:1px dashed rgba(91,107,82,.45);
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:5px;
  padding:16px;color:var(--sage);}
.ph b{font-size:12px;font-weight:500;letter-spacing:.03em;}
.ph small{font-size:10.5px;color:var(--sage);line-height:1.75;}
.ph .lbl{position:absolute;top:8px;left:8px;font-size:9px;letter-spacing:.08em;font-weight:500;color:var(--sage);
  background:rgba(255,255,255,.8);border:1px solid var(--line);padding:2px 7px;}
/* 実写真をはめ込む figure（枠線・プレースホルダ地を消し、画像でカバー） */
.ph.has-img{border:none;background:none;padding:0;overflow:hidden;}
.ph.has-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.l-visual{display:contents;}   /* スマホ：ロゴだけをヘッダー直下に置く */
.l-img{display:none;}          /* 画像はPCのみ */
.r45{aspect-ratio:4/5;} .r34{aspect-ratio:3/4;} .r32{aspect-ratio:3/2;} .r11{aspect-ratio:1/1;} .r169{aspect-ratio:16/9;}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px;}
/* 02 月桂樹の実績バッジ（クライアント提供PNG・2×2） */
.tp-badges{display:grid;grid-template-columns:1fr 1fr;gap:clamp(6px,3vw,18px);margin-top:24px;justify-items:center;}
.tp-badges img{width:100%;max-width:180px;height:auto;}

/* 01 OPENING：新店オープンの告知なので、地から浮かせて別格に見せる */
.blk--opening{padding-top:0;}
/* 01冒頭のエリア写真。ブロック幅いっぱいに敷き、下端をグラデーションで地に溶かす */
.area-photo{position:relative;height:clamp(190px,52vw,260px);
  margin:0 calc(var(--pad) * -1) 8px;
  background:url("/_lp2026/img/kouhoku.jpg") center 42%/cover no-repeat;background-color:var(--sage-pale);}
.area-photo::after{content:"";position:absolute;left:0;right:0;bottom:0;height:62%;
  /* 下端をそのブロックの地色に溶かす。背景を種類ごとに変えたので変数で追従させる */
  background:linear-gradient(180deg,var(--blk-bg-0) 0%,var(--blk-bg) 100%);}
/* 02冒頭の店舗外観写真。01と同様に敷き、下端をブロックの地色（クリーム）に溶かす */
.blk--facts{padding-top:0;}
.area-photo--store{background-image:url("/_lp2026/img/store.jpg");}
/* 03冒頭の写真。01・02と同様に敷き、下端をブロックの地色（濃いクリーム #eee6cf）に溶かす */
.blk--why{padding-top:0;}
.area-photo--why{background-image:url("/_lp2026/img/bg03.jpg");}

.blk--opening .eyebrow{color:var(--ink-mute);}
.blk--opening .open-list li{border-color:#e7e5e0;}
.blk--opening .open-list li::before{background:var(--ink);}
.blk--opening .hl{color:var(--ink);}
.blk--opening .mk{background:linear-gradient(transparent 56%,rgba(43,38,32,.11) 56%);}

/* 01 OPENING */
.open-list{list-style:none;margin-top:22px;}
.open-list li{border-top:1px solid var(--line);padding:14px 0 14px 20px;position:relative;font-size:13.5px;line-height:2;}
.open-list li:last-child{border-bottom:1px solid var(--line);}
.open-list li::before{content:"";position:absolute;left:0;top:25px;width:9px;height:1px;background:var(--sage);}
/* 募集要項：項目名（左・淡い地）と内容（右・白地）を分け、行ごとに罫線で区切る */
.spec{margin-top:24px;border:1px solid #dcdad5;overflow:hidden;background:#fff;}
.spec dl{display:grid;grid-template-columns:84px 1fr;font-size:13px;}
.spec dt{padding:13px 8px 13px 13px;font-size:11.5px;font-weight:700;letter-spacing:.04em;
  color:var(--ink);background:rgba(43,38,32,.045);border-top:1px solid #e7e5e0;
  display:flex;align-items:center;line-height:1.5;}
.spec dd{padding:13px 14px;color:var(--ink);line-height:1.85;border-top:1px solid #e7e5e0;}
.spec dt:first-of-type,.spec dt:first-of-type + dd{border-top:0;}

/* 02 数字 */
.figure{text-align:center;}
.figure .from{font-size:13px;color:var(--ink-soft);}
.figure .num{font-family:var(--fe);font-size:clamp(96px,30vw,132px);line-height:1.02;color:var(--sage);margin:8px 0 4px;}
.figure .num em{font-style:italic;font-size:.3em;margin-left:.08em;}
.figure .num .tld{font-family:var(--fs);font-size:.6em;vertical-align:.1em;margin:0 .01em;}
.figure .cap{font-size:13.5px;color:var(--ink-soft);line-height:2.3;margin-top:14px;}

/* 02 補助数字（3点セット） */
.figs{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:30px;}
.figs div{background:var(--bg);padding:16px 10px;text-align:center;}
.figs div:first-child{grid-column:1 / -1;}
.figs .v{font-family:var(--fe);font-size:34px;color:var(--sage);line-height:1.1;}
.figs .v small{font-family:var(--ff);font-size:12px;font-weight:700;margin-left:2px;}
.figs .k{font-size:11px;color:var(--ink-mute);letter-spacing:.04em;margin-top:4px;}
.figs .s{font-size:10.5px;color:var(--ink-mute);margin-top:3px;}

/* 03 理由 */
.reason{border-top:1px solid var(--line);padding:22px 0;}
.reason:last-of-type{border-bottom:1px solid var(--line);}
.reason .rn{font-family:var(--fe);font-style:italic;font-size:14px;color:var(--sage);}
/* 番号を塗りつぶし円＋白抜き（03 4つの理由 / 05 GROWTH・白文字5.72:1） */
.reason .rn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--sage);color:#fff;font-size:14px;line-height:1;}
.reason h3{font-family:var(--fs);font-weight:600;font-size:16.5px;line-height:1.7;margin-top:4px;letter-spacing:.03em;}
.reason p{font-size:13.5px;color:var(--ink-soft);line-height:2.15;margin-top:8px;}

/* 04 横スライド */
.marquee{overflow:hidden;margin:24px calc(var(--pad) * -1) 0;}   /* 画面端まで流す */
.mq-track{display:flex;gap:10px;width:max-content;animation:mq 46s linear infinite;}
.marquee:hover .mq-track,.marquee:focus-within .mq-track,.marquee.is-paused .mq-track{animation-play-state:paused;}
/* タッチ環境にhoverが無いため、停止ボタンを必ず置く（5秒以上動く自動コンテンツの要件） */
.mq-stop{position:absolute;right:10px;bottom:10px;z-index:2;font-family:var(--ff);font-size:11.5px;font-weight:700;
  color:#fff;background:rgba(18,22,16,.74);border:0;border-radius:100px;padding:7px 14px;min-height:34px;cursor:pointer;}
.marquee{position:relative;}
.mq-track .ph{width:150px;flex:none;}
/* 実写真：トリミングしない。高さだけ揃え、幅は元の比率のまま流す */
.mq-track .mq-photo{height:200px;flex:none;margin:0;background:none;border:none;overflow:hidden;}
.mq-track .mq-photo img{height:100%;width:auto;display:block;}
@keyframes mq{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* 05 給与 */
.plan{border-top:1px solid var(--line);padding:18px 0;}
.plan:last-of-type{border-bottom:1px solid var(--line);}
.plan .r1{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 12px;}
.plan h4,.plan .ph3{font-family:var(--fs);font-weight:600;font-size:15.5px;letter-spacing:.03em;}
.plan .amt{font-family:var(--fe);font-size:37px;line-height:1;color:var(--sage);margin-left:auto;}
.plan .amt small{font-family:var(--ff);font-size:12.5px;font-weight:500;color:var(--ink-soft);margin-left:4px;}
.plan .rec{font-family:var(--fe);font-style:italic;font-size:11.5px;color:#fff;background:var(--sage);padding:2px 10px;border-radius:100px;}
/* 保証給の内訳（基本給＋固定残業代）。求人票と同じ内訳を明示する */
.plan .bd{margin-top:9px;font-size:12px;color:var(--ink-mute);line-height:1.95;}
.plan .bd .d{display:block;}
.plan .rates{display:flex;flex-wrap:wrap;gap:8px;margin-top:13px;}
.plan .rates span{display:inline-flex;align-items:baseline;gap:5px;font-size:12px;color:var(--ink-soft);
  background:#fff;border:1px solid var(--line);border-radius:9px;padding:7px 12px;line-height:1.2;}
.plan .rates b{color:var(--ink);font-weight:700;font-size:15px;font-family:var(--fe);}
/* 雇用形態のグループ見出し：セージ塗りバンド（白文字5.72:1） */
.grp{display:flex;align-items:baseline;gap:10px;background:var(--sage);color:#fff;
  border-radius:10px;padding:11px 15px;margin-top:34px;}
.grp .en{font-family:var(--fe);font-style:italic;font-size:12px;letter-spacing:.04em;opacity:.85;flex:none;}
.grp .jp{font-family:var(--fs);font-weight:600;font-size:16px;letter-spacing:.05em;}
.grp .jp small{font-family:var(--ff);font-weight:400;font-size:11.5px;margin-left:8px;opacity:.92;}
/* バンド直後のプランは上罫線を消す（バンドと重複させない） */
.grp + .plan{border-top:0;padding-top:14px;}
.note{font-size:11px;color:var(--ink-mute);line-height:1.95;margin-top:16px;}

/* 06 福利厚生 */
.bene{margin-top:20px;}
.bene .item{display:flex;gap:14px;align-items:flex-start;border-top:1px solid var(--line);padding:16px 0;}
.bene .item:last-child{border-bottom:1px solid var(--line);}
.bene .bi{width:81px;height:81px;flex:none;object-fit:contain;margin-top:2px;}
.bene .btxt{min-width:0;}
.bene h4{font-family:var(--fs);font-weight:600;font-size:14.5px;letter-spacing:.03em;}
.bene p{font-size:12.5px;color:var(--ink-soft);line-height:2;margin-top:5px;}

/* 07 声：丸ポートレート＋動画 */
.iv{margin-top:30px;}
/* 軸原→村上の切れ目：余白＋区切り線 */
.iv + .iv{margin-top:56px;padding-top:52px;border-top:1px solid var(--line);}
.iv-head{display:flex;align-items:center;gap:14px;}
.iv-portrait{width:96px;height:96px;border-radius:50%;flex:none;overflow:hidden;border:1px solid var(--sage);
  background:var(--sage-pale);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  color:var(--sage);text-align:center;padding:8px;}
.iv-portrait b{font-size:10.5px;} .iv-portrait small{font-size:9px;color:var(--sage);line-height:1.5;}
.iv-portrait.has-img{padding:0;background:none;}
.iv-portrait.has-img img{width:100%;height:100%;object-fit:cover;}
.iv-head .meta{min-width:0;}
.iv-head .role{font-family:var(--fe);font-style:italic;font-size:11.5px;color:var(--sage);display:block;}
.iv-head .name{font-family:var(--fs);font-size:16px;letter-spacing:.05em;display:block;margin-top:2px;}
.iv-head .rule{height:1px;background:var(--line);margin-top:8px;}
.iv .pull{font-family:var(--fs);font-size:19px;line-height:1.95;letter-spacing:.03em;margin-top:16px;}
.iv .qa{margin-top:36px;display:grid;gap:22px;}
.iv .a{font-size:13.5px;color:var(--ink-soft);line-height:2.2;margin-top:4px;}
/* Q&A：質問(Q・塗り)と回答(A・枠)をバッジと色で明確に区別 */
.iv .qa .q{position:relative;padding-left:32px;font-size:13.5px;font-weight:700;color:var(--ink);line-height:1.75;}
.iv .qa .q::before{content:"Q";position:absolute;left:0;top:-1px;width:23px;height:23px;border-radius:50%;
  background:var(--sage);color:#fff;font-family:var(--fe);font-size:12.5px;font-weight:700;
  display:flex;align-items:center;justify-content:center;}
.iv .qa .a{position:relative;padding-left:32px;margin-top:9px;}
.iv .qa .a::before{content:"A";position:absolute;left:0;top:1px;width:23px;height:23px;border-radius:50%;
  background:#fff;border:1.5px solid var(--sage);color:var(--sage);font-family:var(--fe);font-size:12.5px;font-weight:700;
  display:flex;align-items:center;justify-content:center;}

/* 08 FAQ */
.faq details{border-top:1px solid var(--line);}
.faq details:last-of-type{border-bottom:1px solid var(--line);}
.faq summary{list-style:none;cursor:pointer;padding:17px 30px 17px 0;position:relative;
  font-size:13.5px;font-weight:500;line-height:1.85;min-height:48px;display:flex;align-items:center;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"";position:absolute;right:4px;top:50%;width:10px;height:1px;background:var(--ink-soft);}
.faq summary::before{content:"";position:absolute;right:8.5px;top:50%;width:1px;height:10px;background:var(--ink-soft);margin-top:-4.5px;transition:.25s;}
.faq details[open] summary::before{opacity:0;}
.faq .a{padding:0 0 18px;font-size:12.5px;color:var(--ink-soft);line-height:2.15;}

/* CTA・アクセス */
.contact{text-align:center;}
.contact .acts{margin-top:24px;}
.access dl{display:grid;gap:4px 0;margin-top:18px;font-size:13px;text-align:left;}
.access dt{color:var(--ink-mute);letter-spacing:.06em;font-size:11.5px;margin-top:12px;}
.access dt:first-child{margin-top:0;}
.access dd{color:var(--ink-soft);line-height:1.95;}

/* ===== 動画クリップ（ファサード方式：タップまで0バイト） =====
   初期はポスター画像のみ。タップで初めて <video> を生成して再生する。
   → 表示速度を落とさずに動画を載せるための実装。 */
.vclip{position:relative;aspect-ratio:9/16;overflow:hidden;background:#454f3c;cursor:pointer;
  border:0;padding:0;width:100%;display:block;font-family:inherit;color:inherit;text-align:left;
  -webkit-appearance:none;appearance:none;}
.vclip:focus-visible{outline:2px solid var(--sage);outline-offset:3px;}
.vclip .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.vclip .pph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  gap:4px;background:linear-gradient(150deg,#5d6b55,#454f3c);color:#fff;text-align:center;padding:16px 16px 18px;}
.vclip .pph b{font-size:11.5px;letter-spacing:.04em;}
.vclip .pph small{font-size:9.5px;color:#d9ddd4;line-height:1.7;}
.vclip .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:58px;height:58px;border-radius:50%;
  background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;transition:.25s;}
.vclip .play::after{content:"";border-left:15px solid var(--sage);border-top:9px solid transparent;
  border-bottom:9px solid transparent;margin-left:4px;}
.vclip:active .play{transform:translate(-50%,-50%) scale(.94);}
.vclip .vlabel{position:absolute;left:0;right:0;bottom:0;padding:26px 12px 10px;text-align:left;
  background:linear-gradient(180deg,transparent,rgba(24,28,22,.72));color:#fff;font-size:11.5px;line-height:1.7;letter-spacing:.03em;}
/* 尺表示は右下へ（動画に焼き込まれたタイトル帯と重ならない位置）・地色は濃くして白文字を確保 */
.vclip .vtime{position:absolute;bottom:10px;right:10px;font-family:var(--fe);font-size:11.5px;color:#fff;
  background:rgba(18,22,16,.74);border-radius:100px;padding:3px 10px;}
.vclip video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000;}
.vrow{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px;}
.vrow .vclip{aspect-ratio:9/16;}

/* 601〜900px：PC額縁(901px〜)が効かない帯。本文が50字/行まで伸びるのを防ぐ */
@media(min-width:601px) and (max-width:900px){
  .col-c{max-width:480px;margin-inline:auto;}
}
/* ===== 10 ENTRY：応募・サロン見学 兼用フォーム ===== */
.seg{display:flex;gap:6px;background:var(--sage-pale);border-radius:100px;padding:5px;margin-top:24px;margin-bottom:8px;}
.seg label{flex:1;position:relative;}
.seg input{position:absolute;opacity:0;pointer-events:none;}
.seg span{display:flex;align-items:center;justify-content:center;text-align:center;font-size:13.5px;font-weight:700;
  color:var(--ink-soft);padding:11px 8px;border-radius:100px;cursor:pointer;transition:.2s;min-height:44px;}
.seg input:checked + span{background:#fff;color:var(--ink);box-shadow:0 1px 4px rgba(43,38,32,.14);}
.seg input:focus-visible + span{outline:2px solid var(--sage);outline-offset:2px;}
.form-body{margin-top:26px;}
/* 0705カンプのフォーム意匠：全体を暖色の囲みカードに（白入力が浮く）＋各グループをスロットカードに */
.form-box{background:#f4efe1;border:1px solid #e7ded0;border-radius:20px;padding:clamp(20px,5.5vw,32px);margin-top:24px;}
.form-box .form-body{margin-top:0;}
.form-box .seg{margin-top:0;}
.field{margin-bottom:28px;}
.field > label{display:block;font-size:13px;font-weight:700;color:var(--ink-soft);margin-bottom:9px;}
.field .req{color:var(--cta);font-size:.9em;margin-left:5px;}
.field .opt{color:var(--ink-mute);font-size:.85em;margin-left:5px;font-weight:400;}
.form-body input[type=text],.form-body input[type=email],.form-body input[type=tel],.form-body input[type=date],.form-body select,.form-body textarea{
  width:100%;font-family:var(--ff);font-size:16px;color:var(--ink);background:#fff;
  border:1px solid var(--line);border-radius:10px;padding:12px 13px;min-height:48px;-webkit-appearance:none;appearance:none;}
.form-body select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238d836e' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:38px;cursor:pointer;}
.form-body input[type=date]{cursor:pointer;}
.form-body textarea{min-height:92px;resize:vertical;line-height:1.8;}
.form-body input,.form-body button,.form-body select,.form-body textarea{font-family:inherit;}
.form-body :focus-visible{outline:2px solid var(--sage);outline-offset:1px;}
.form-body .hint{font-size:11.5px;color:var(--ink-mute);line-height:1.7;margin-top:5px;}
.jobs{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;}
.jobs label{position:relative;}
.jobs input{position:absolute;opacity:0;}
.jobs span{display:flex;align-items:center;justify-content:center;text-align:center;font-size:12.5px;font-weight:700;
  color:var(--ink-soft);background:#fff;border:1px solid var(--line);border-radius:10px;min-height:48px;padding:6px 4px;cursor:pointer;transition:.15s;}
.jobs input:checked + span{border-color:var(--sage);background:var(--sage-pale);color:var(--ink);box-shadow:inset 0 0 0 1px var(--sage);}
.jobs input:focus-visible + span{outline:2px solid var(--sage);outline-offset:2px;}
.slot{border:1px solid #e7ded0;border-radius:13px;padding:16px 16px 14px;margin-bottom:16px;background:#fffdf8;}
.slot .sh{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:11px;}
.slot .sh .req{color:var(--cta);font-size:.85em;font-weight:400;margin-left:5px;} .slot .sh .opt{color:var(--ink-mute);font-weight:400;font-size:.85em;margin-left:5px;}
.slot .row{display:grid;grid-template-columns:1fr;gap:10px;}
.submit{width:100%;background:var(--cta);color:#fff;font-family:var(--ff);font-weight:700;font-size:15.5px;
  border:0;border-radius:100px;min-height:54px;margin-top:8px;cursor:pointer;transition:.2s;}
.submit:active{background:var(--cta-d);}
.submit:disabled{opacity:.55;}
.privacy{font-size:11px;color:var(--ink-mute);text-align:center;line-height:1.8;margin-top:12px;}
.err{font-size:12px;color:#a5341f;margin-top:8px;display:none;}
/* 未入力欄を視覚的にも特定できるようにする（全体1本のエラーだけでは分からないため）*/
.form-body [aria-invalid="true"]{border-color:#a5341f !important;background:#fff7f5;}
.form-body .jobs [aria-invalid="true"] span{border-color:#a5341f;}
.err.on{display:block;}
/* 送信後パネル */
.done{display:none;border:1px solid var(--sage);border-radius:14px;padding:18px;background:var(--sage-pale);margin-top:6px;}
.done.on{display:block;}
.done h4{font-family:var(--fs);font-weight:600;font-size:16px;margin-bottom:8px;}
.done p{font-size:13px;color:var(--ink-soft);line-height:1.9;}
.done textarea{width:100%;margin-top:12px;font-family:var(--ff);font-size:13px;color:var(--ink);background:#fff;
  border:1px solid var(--line);border-radius:10px;padding:12px;min-height:140px;line-height:1.8;}
/* モード表示切替（JS有効時。無効時は両方表示） */
.js .mode-apply,.js .mode-visit{display:none;}
.js [data-mode="apply"] .mode-apply{display:block;}
.js [data-mode="visit"] .mode-visit{display:block;}

/* 09 オーナーメッセージ：ページ全体で唯一の濃色セクション＝リズムの山。
   淡いクリームが続く中に一度だけ深いセージを置き、読み手の視線をここで一度止める。
   （多色化はしない＝既存のセージを深くしただけ。文字はクリームで 9.39:1 と十分なコントラスト） */
.blk--message{padding-top:76px;padding-bottom:76px;}
.blk--message .eyebrow{color:#b9c9ae;}
.blk--message .owner-msg{color:#fbf8ee;}
.blk--message .owner-sign{color:#cbd8c2;}
.blk--message .nobadge{color:#fbf8ee !important;}   /* 上の段階色（#354130）は濃色地で沈むため上書き。リングは fill:currentColor */
.blk--message .nobadge .ring text{opacity:.6;}
.owner-msg{font-family:var(--fs);font-weight:400;font-size:17px;line-height:2.35;color:var(--ink);letter-spacing:.04em;margin-top:22px;}
.owner-msg:first-of-type{margin-top:26px;}
.owner-sign{font-family:var(--fe);font-style:italic;font-size:13px;color:var(--ink-mute);letter-spacing:.08em;margin-top:28px;}

.blk--faq{padding-bottom:0;}
.blk--access{padding-top:30px;}
/* CONTACT：LINE緑パネル（ink文字6.64:1）・上下たっぷり余白 */
.contact{background:var(--line-g);border-radius:0;padding:clamp(51px,12vw,78px) var(--pad);
  margin:140px calc(var(--pad) * -1) 0;color:#fff;}
.contact h2{color:#fff;}
.contact .poem{color:#fff;}
.contact .hl{color:#fff;font-weight:700;background:transparent;padding:0;}
.contact .acts{margin-top:26px;}
.contact .pill{background:#fff;color:var(--ink);border:0;}
.contact .pill svg{fill:var(--line-g);}
/* 11 ACCESS：地図 */
.map{margin-top:20px;border:1px solid var(--line);border-radius:12px;overflow:hidden;aspect-ratio:16/11;background:var(--sage-pale);}
.map iframe{width:100%;height:100%;border:0;display:block;}
.map-link{display:inline-block;margin-top:12px;font-size:12.5px;font-weight:700;color:var(--sage);text-decoration:underline;text-underline-offset:3px;}
/* 最下部コピーライト */
.sitefoot{text-align:center;font-size:11px;color:var(--ink-mute);letter-spacing:.04em;padding:26px var(--pad) calc(26px + var(--bar));border-top:1px solid var(--line);}

/* 動き（JS有効時のみ隠す） */
.js .rv{opacity:0;transform:translateY(10px);transition:opacity .8s cubic-bezier(.22,.61,.36,1),transform .8s cubic-bezier(.22,.61,.36,1);}
.js .rv.in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){
  .js .rv{opacity:1;transform:none;transition:none;}
  .mq-track{animation:none;} .sbadge svg{animation:none;}
}

/* ==========================================================
   PC（≥901px）＝スマホ設計をそのまま中央に置き、左右に額縁
   ========================================================== */
@media(min-width:901px){
  :root{--pad:26px;}
  .stage{display:grid;grid-template-columns:1fr 392px 1fr;max-width:1440px;margin:0 auto;align-items:start;}
  .col-c{padding-bottom:0;border-left:1px solid var(--line);border-right:1px solid var(--line);}
  /* 左：固定列。画面いっぱいの写真の上に、ロゴ・タグライン・所在地を重ねる */
  .col-l{position:sticky;top:0;height:100vh;flex-direction:column;justify-content:center;align-items:stretch;
    padding:26px 0 34px;background:transparent;backdrop-filter:none;border-bottom:none;overflow:hidden;}
  /* 写真は列全体に敷く。素材が縦位置（1080×1920）で列の縦横比とほぼ一致するため、
     中央基準のまま二人が収まる */
  .l-visual{display:block;position:absolute;inset:0;z-index:0;}
  .l-img{display:block;width:100%;height:100%;border:0;
    background-image:url("/_lp2026/img/staff-portrait.jpg");
    background-size:cover;background-position:50% 42%;background-repeat:no-repeat;background-color:#3f4a3c;}
  /* 文字の可読性を確保するスクリム（上下を締め、中央は写真を見せる） */
  .l-visual::after{content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(26,30,24,.52) 0%,rgba(26,30,24,.30) 26%,rgba(26,30,24,.58) 62%,rgba(26,30,24,.86) 100%);}
  /* PCは映像の上に載るため白に。枠線なし。
     RECRUIT も白（2026-08-19）。左パネルが FV.mp4 になり、この位置が明るいフレームでは
     金色（rgb 138,106,60）とのコントラストが 1.5:1 まで落ちて読めなくなるため。
     スマホ側は背景がクリームなので金色のまま。 */
  /* 位置決めは箱（.hd-left）側に移す。ロゴ単体を絶対配置すると
     職種バッジと高さを揃えられないため（2026-08-20）。 */
  .hd-left{position:absolute;top:26px;left:26px;z-index:2;align-items:stretch;gap:12px;}
  .logo{position:static;padding:0;color:#fff;background:none;
    text-shadow:0 1px 10px rgba(0,0,0,.55);}
  .logo span{color:#fff;}
  /* 映像の上に載るので、枠と文字を白に */
  .jobtag{border-color:rgba(255,255,255,.8);color:#fff;font-size:11.5px;padding:0 11px;
    text-shadow:0 1px 10px rgba(0,0,0,.55);}
  .l-mid{position:relative;z-index:2;display:flex;flex:1;min-height:0;flex-direction:column;
    align-items:center;justify-content:flex-end;gap:16px;text-align:center;padding:24px 34px 8px;margin-bottom:100px;}
  .l-title{font-family:var(--fc);font-style:normal;font-size:clamp(44px,4.6vw,62px);line-height:1.08;letter-spacing:.01em;
    color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.6);}
  .l-sub{font-family:var(--fe);font-style:italic;font-size:14px;color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.65);}
  .l-sub b{font-family:var(--ff);font-style:normal;font-weight:700;font-size:13px;letter-spacing:.06em;
    color:#fff;display:block;margin-top:6px;line-height:1.95;text-shadow:0 1px 12px rgba(0,0,0,.75);}
  .l-foot{position:relative;z-index:2;display:block;padding:0 34px;font-size:10.5px;color:#fff;
    letter-spacing:.06em;line-height:2;text-align:center;text-shadow:0 1px 10px rgba(0,0,0,.8);}
  .col-l .pill{display:none;}
  /* Instagram：PCは左パネル（col-l）の右上に配置（ロゴと左右対称） */
  .ig-btn{display:none;}
  /* Instagram はアイコンのみ。文字ラベルも●枠も置かない（2026-08-19 岩田さん指示）。
     枠が無くなる分、動画の上でも見えるよう drop-shadow で輪郭を作る。
     見た目は素のアイコンだが、タップ領域は44px角のまま確保する。 */
  .ig-fixed{display:inline-flex;align-items:center;justify-content:center;
    position:absolute;top:26px;right:26px;z-index:3;
    width:44px;height:44px;padding:0;
    border:0;background:none;border-radius:0;
    color:#fff;text-decoration:none;
    filter:drop-shadow(0 1px 6px rgba(0,0,0,.55));transition:opacity .25s;}
  .ig-fixed svg{width:24px;height:24px;flex:none;}
  .ig-fixed:hover{opacity:.72;}
  /* 右：固定インデックス列 */
  .col-r{position:sticky;top:0;left:auto;right:auto;bottom:auto;height:100vh;flex-direction:column;flex-wrap:nowrap;
    align-items:center;justify-content:center;gap:12px;padding:44px 34px;background:transparent;backdrop-filter:none;border-top:none;}
  .fbtn{flex:none;width:min(190px,100%);min-height:50px;font-size:14px;padding:12px 16px;}
  /* 2026-08-02 .fnote はモバイルで flex:1 0 100% にしているが、PCは縦組みの列なので
     そのままだと列幅が100%に膨らみボタンが画面外へ押し出される（実測で確認）。ここで打ち消す。 */
  .fnote{flex:none;width:min(190px,100%);margin:0 0 2px;font-size:11px;text-align:center;}
  .hero{min-height:0;aspect-ratio:3/4;}
  .hero .htitle h1 i,.hero .htitle i{font-size:38px;}
  /* 2026-08-02 ヒーロー改修に伴う調整：中央列は aspect-ratio 3/4 で高さが約520pxしかなく、
     コピー追加でテキスト塊が317pxに伸びた結果、回転バッジと20px重なっていた（実測）。
     テキストを上へ、バッジを下＋小さめにして衝突を解消する。モバイルは対象外。 */
  .hero .htitle{top:40%;}
  .hero .sbadge{bottom:4%;width:78px;height:78px;margin-left:-39px;}
  .blk{padding:78px 26px;}
  h2{font-size:23px;}
}

/* ============================================================
   章の並び替え対応（2026-08-19）
   写真の下端グラデーションは章の地色に溶かす作りなので、
   写真を持つ章は地色を内容側で固定する（位置で交互に変わると溶けない）。
   ============================================================ */

/* ============================================================
   ブロックごとの背景色（2026-08-19 岩田さん指示）

   ★位置ではなく「ブロックの種類」で決める。
     職種ごとに並びが違うため、位置で決めると同じブロックがページごとに
     違う色になり、3本を見比べたときの対応がつかなくなる。
   ★色は現行LPの配色から出る範囲だけ。新しい色相は足していない。
   ★--blk-bg-0 は同じ色の透明版。写真の下端グラデーションがこれを使う。
   ★隣り合うブロックが同じ色にならないよう、3職種すべての並びで検算済み。
   ============================================================ */
.blk{ background:var(--blk-bg); }

.blk--poem    { --blk-bg:#fffdf7; --blk-bg-0:rgba(255,253,247,0); }
.blk--facts   { --blk-bg:#ffffff; --blk-bg-0:rgba(255,255,255,0); }
.blk--why     { --blk-bg:#eee6cf; --blk-bg-0:rgba(238,230,207,0); }
.blk--growth  { --blk-bg:#f7f2e6; --blk-bg-0:rgba(247,242,230,0); }
.blk--comp    { --blk-bg:#e8ece2; --blk-bg-0:rgba(232,236,226,0); }
.blk--opening { --blk-bg:#f2ece0; --blk-bg-0:rgba(242,236,224,0); }
.blk--atmos   { --blk-bg:#eef1ea; --blk-bg-0:rgba(238,241,234,0); }
.blk--benefits{ --blk-bg:#f7f2e6; --blk-bg-0:rgba(247,242,230,0); }
.blk--staff   { --blk-bg:#ffffff; --blk-bg-0:rgba(255,255,255,0); }
.blk--message { --blk-bg:#3a4634; --blk-bg-0:rgba(58,70,52,0); }
.blk--faq     { --blk-bg:#eee6cf; --blk-bg-0:rgba(238,230,207,0); }
.blk--access  { --blk-bg:#e8ece2; --blk-bg-0:rgba(232,236,226,0); }
.blk--entry   { --blk-bg:#fffdf7; --blk-bg-0:rgba(255,253,247,0); }

/* ============================================================
   ブロック冒頭の写真の上にできていた余白を消す（2026-08-19 岩田さん指摘）

   原因：PC幅の `.blk{padding:78px 26px;}`（メディアクエリ内）が、
         前に書いてある `.blk--facts{padding-top:0}` を後勝ちで上書きしていた。
         メディアクエリは詳細度を上げないので、ここで書き直せば効く。
   ============================================================ */
.blk--opening,
.blk--facts,
.blk--why{ padding-top:0; }

/* ============================================================
   PC左パネル＝FVの動画（2026-08-19 岩田さん訂正・3職種とも）

   もともとは写真（.l-img の背景画像）。FVが焼き込み画像になったので、
   動画はこちらへ移した。スマホでは左パネル自体を出さないので、
   動画も作らない（JS側で幅901px以上のときだけ生成している）。
   文字の可読性を確保するスクリム（.l-visual::after）はそのまま効く。
   ============================================================ */
.l-vidhost{ display:none; }
@media(min-width:901px){
  .l-vidhost{
    display:block; position:absolute; inset:0; z-index:0;
    background:#3f4a3c;
  }
  .l-vid{
    display:block; width:100%; height:100%;
    object-fit:cover; object-position:50% 42%;
  }
}

/* 画面外に置くが読み上げ・検索には残す（FVの見出しが画像に焼き込まれているため） */
.visually-hidden{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

/* Q&Aブロックの下端。緑の .contact がブロックの最後まで届くよう、下の余白を落とす。
   PC幅の .blk{padding:78px 26px} が後勝ちで 69px の地色を出していた（2026-08-20）。
   メディアクエリは詳細度を上げないので、ここ（ファイル末尾）で書き直す。 */
.blk--faq{ padding-bottom:0; }