/* =========================================================
   白基調LP 共通UI・レイアウト（A/B/Cで共有）
   ・見出しの明朝、白基調の土台、上部ナビ（左右横並び・2ボタン固定色）、
     セクション見出し、サンプルバナー、転職カード、トップに戻るボタン
   ・配色（差し色）は _lp3_1/2/3.css 側で切り替えます。
   ========================================================= */

/* ページの土台（中央寄せのプレビュー。本番では画面いっぱいになります） */
body{ background:#eef0f2; }
.preview-note{
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  background:#2b2622; color:#f0e3d8; text-align:center;
  font-size:12px; padding:7px 12px; letter-spacing:.06em;
}

/* 見出しは明朝で上品に（無難で読みやすいNoto Serif JP） */
.hero__title,
.seg-head__title,
.section-head__title,
.rcard__name,
.rcard__band,
.rcard__price .val,
.jcard__title,
.site-footer__brand{ font-family:"Noto Serif JP",serif; letter-spacing:.04em; }

/* 大セクション見出しの折り返し調整（「る」一文字だけ落ちるのを防ぐ） */
.seg-head__title{ font-size:21px; line-height:1.55; text-wrap:balance; }

/* セクション小見出しは1行に収める（「ス」だけ落ちるのを防ぐ。画面幅に合わせて自動縮小） */
.section-head__title{ font-size:clamp(19px, 5vw, 24px); white-space:nowrap; letter-spacing:.02em; }

/* === 白基調の土台調整 === */
.hero{ background:linear-gradient(180deg,#ffffff 0%, #f7f8fa 100%); }
.hero__eyebrow{
  background:#fff; color:var(--accent);
  border:1px solid var(--accent); font-weight:700;
}
.btn{ box-shadow:0 8px 18px rgba(40,50,60,.16); }
.rcard__ribbon{ box-shadow:0 4px 10px rgba(40,50,60,.18); }

/* =========================================================
   ① 上部ナビ（左右に横並び）／2ボタンの色は固定
   ========================================================= */
.anchor-nav{ max-width:760px; margin:0 auto; padding:26px 18px 6px; background:var(--bg); overflow:hidden; }
.anchor-nav__lead{ text-align:center; font-size:14px; color:var(--ink-soft); margin:0 0 16px; }
.anchor-nav__lead b{ color:var(--ink); }
.anchor-nav__btns{ display:flex; gap:10px; }

.jump{
  flex:1; min-width:0; position:relative; display:flex; flex-direction:column;
  align-items:center; text-align:center; gap:5px;
  text-decoration:none; color:var(--ink);
  background:var(--card); border:1px solid var(--line); border-radius:15px;
  padding:18px 8px 15px; overflow:hidden;
  box-shadow:0 4px 14px rgba(30,40,50,.06);
  transition:transform .16s ease, box-shadow .16s ease;
}
.jump:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(30,40,50,.12); }
.jump::before{ content:""; position:absolute; top:0; left:0; right:0; height:4px; }
.jump__k{ font-size:9px; letter-spacing:.08em; font-weight:700; }
/* ボタン名は2行（例：「退職代行を／さがす」）で左右そろえる。はみ出し防止 */
.jump__t{ font-size:14px; font-weight:800; color:var(--ink); letter-spacing:.02em; line-height:1.35; }
.jump__arw{
  width:25px; height:25px; border-radius:50%; margin-top:3px;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:13px; line-height:1;
}
/* 退職＝ディープネイビー（固定） */
.jump--taishoku{ border-color:#cdd2dd; }
.jump--taishoku::before{ background:#2f3c5c; }
.jump--taishoku .jump__k{ color:#232d46; }
.jump--taishoku .jump__arw{ background:#2f3c5c; }
/* 転職＝真鍮ゴールド（固定） */
.jump--tenshoku{ border-color:#e0d6bf; }
.jump--tenshoku::before{ background:#9c7b45; }
.jump--tenshoku .jump__k{ color:#7d6235; }
.jump--tenshoku .jump__arw{ background:#9c7b45; }

/* --- 大セクションの帯見出し --- */
.seg{ scroll-margin-top:10px; }
.seg-head{ text-align:center; padding:46px 22px 6px; }
.seg-head__num{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:50%; font-size:14px; font-weight:800;
  color:#fff; background:var(--accent); margin-bottom:10px;
}
/* 章の区切りは横長の見出しライン（番号・イラストは廃止。色は各章の差し色に追従） */
.seg-head__rule{ display:block; width:56px; height:3px; border-radius:2px; background:var(--accent); margin:0 auto 16px; }
.seg-head__sub{ font-size:13.5px; color:var(--ink-soft); margin:10px auto 0; max-width:480px; }

/* --- サンプルバナー（提携後に実画像へ差し替える仮バナー） --- */
.sample-banner{
  position:relative; aspect-ratio:16/9; border-radius:var(--radius-sm);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:#fff; overflow:hidden; margin-bottom:18px;
  background:linear-gradient(135deg, var(--accent), var(--accent-deep));
}
.sample-banner__name{ font-size:18px; font-weight:800; letter-spacing:.05em; }
.sample-banner__tag{ font-size:11px; opacity:.9; margin-top:4px; letter-spacing:.06em; }
.sample-banner::after{
  content:"SAMPLE"; position:absolute; top:8px; right:10px;
  font-size:9px; letter-spacing:.2em; border:1px solid rgba(255,255,255,.6);
  padding:1px 6px; border-radius:4px; opacity:.85;
}

/* --- 転職カード（ターゲット別の導線） --- */
.jcard{
  position:relative; background:var(--card); border:1px solid var(--line);
  border-radius:16px; box-shadow:var(--shadow);
  padding:26px 22px 24px; margin:24px 0;
}
.jcard__cat{
  display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:.06em;
  color:#fff; background:var(--accent); border-radius:999px; padding:4px 13px; margin-bottom:12px;
}
.jcard__title{ font-size:18.5px; font-weight:800; margin:0 0 14px; line-height:1.45; }
.jcard__desc{ font-size:14px; color:var(--ink-soft); margin:0 0 16px; }
.jcard__points{ list-style:none; margin:0 0 18px; padding:0; }
.jcard__points li{ position:relative; padding:6px 0 6px 26px; font-size:13.5px; border-bottom:1px dashed var(--line); }
.jcard__points li:last-child{ border-bottom:none; }
.jcard__points li::before{
  content:""; position:absolute; left:2px; top:11px; width:14px; height:8px;
  border-left:2.5px solid var(--accent); border-bottom:2.5px solid var(--accent); transform:rotate(-45deg);
}

/* --- 右下「トップに戻る」ボタン --- */
.to-top{
  position:fixed; right:16px; bottom:16px; z-index:60;
  width:46px; height:46px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent); color:#fff; text-decoration:none; font-size:18px;
  box-shadow:0 6px 16px rgba(40,50,60,.26);
  opacity:0; visibility:hidden; transform:translateY(8px); transition:all .25s ease;
}
.to-top.show{ opacity:1; visibility:visible; transform:translateY(0); }

/* =========================================================
   おすすめカードの「バナー風の帯見出し」（順位番号は廃止）
   サービス名をカード上部の色帯で見せる。色はセクションの差し色に追従。
   ========================================================= */
.rcard{ overflow:hidden; }           /* 帯をカード上端いっぱいに収める */
.rcard__band{
  margin:-30px -22px 18px;           /* カードのpadding分はみ出して全幅に */
  background:var(--accent);
  color:#fff;
  font-size:18px; font-weight:700; letter-spacing:.04em;
  text-align:center; line-height:1.5;
  padding:14px 16px;
}

/* =========================================================
   面談の無断キャンセルに関する注意書きボックス（転職セクション冒頭）
   色はセクションの差し色（転職＝真鍮ゴールド）に自動で追従します。
   ========================================================= */
.notice-cancel{
  background:var(--accent-tint);
  border:1px solid var(--line);
  border-left:4px solid var(--accent);
  border-radius:10px;
  padding:14px 16px 13px;
  margin:18px 0 4px;
}
.notice-cancel__title{
  display:flex; align-items:center; gap:8px;
  font-size:13.5px; font-weight:800; color:var(--ink);
  margin:0 0 6px;
}
.notice-cancel__ico{
  flex:none; width:18px; height:18px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--accent); color:#fff;
  font-size:12px; font-weight:800; line-height:1;
}
.notice-cancel__text{
  font-size:12.5px; line-height:1.8; color:var(--ink-soft); margin:0;
}