/* ==========================================================================
   Sakifull LMS — 共通スタイル
   構成:
   1. リセット / 基本
   2. ユーティリティ（コンテナ・セクション見出し・ボタン）
   3. ヘッダー
   4. フッター
   5. アクセシビリティ共通
   ========================================================================== */

/* ---------------------------------------------------------------------- */
/* 1. リセット / 基本                                                     */
/* ---------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-jp);
  font-size: 15px;
  line-height: 1.9;
  color: var(--text-sub);
  background: var(--bg);
}
img { max-width: 100%; display: block; }
a { color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p { margin: 0; }
h1, h2 { text-wrap: balance; }
button { font-family: inherit; cursor: pointer; }

/* ---------------------------------------------------------------------- */
/* 2. ユーティリティ                                                      */
/* ---------------------------------------------------------------------- */
.container {
  max-width: var(--content-w);
  margin: 0 auto;
  padding: 0 var(--content-pad);
}

/* セクション見出しの型（仕様/00 6章） */
.sec-title { text-align: center; margin-bottom: 44px; }
.sec-title .en {
  display: block; font-family: var(--font-num); font-size: 13px;
  letter-spacing: .22em; color: var(--brand); margin-bottom: 8px;
}
.sec-title h2 { font-size: 28px; font-weight: 700; color: var(--text); }
.sec-title h2 .mk { color: var(--brand); }
.sec-title .deco { display: flex; justify-content: center; gap: 6px; margin-top: 14px; }
.sec-title .deco i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); }
.sec-title .deco i:nth-child(2) { width: 26px; border-radius: 3px; background: var(--brand); }
.sec-title .lead { margin-top: 14px; font-size: 14px; color: var(--text-sub); }

/* ボタン（仕様/00 5章） */
.btn-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 60px; min-width: 280px; padding: 0 34px;
  border-radius: 9999px; border: none;
  background: var(--cta); color: #fff; text-decoration: none;
  font-family: var(--font-jp); font-size: 19px; font-weight: 700;
  box-shadow: 0 4px 14px rgba(255,45,109,.30);
  transition: background .15s, transform .08s, box-shadow .15s;
}
.btn-cta:hover { background: var(--cta-hover); }
.btn-cta:active { transform: translateY(2px); box-shadow: 0 1px 4px rgba(255,45,109,.30); }
.btn-cta:disabled { background: #C0C9D0; box-shadow: none; cursor: not-allowed; transform: none; }

.btn-sub {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 60px; min-width: 280px; padding: 0 34px;
  border-radius: 9999px;
  background: #fff; border: 2px solid var(--cta); color: var(--cta); text-decoration: none;
  font-family: var(--font-jp); font-size: 19px; font-weight: 700;
  transition: background .15s, transform .08s;
}
.btn-sub:hover { background: #FFF3F7; }
.btn-sub:active { transform: translateY(2px); }

@media (prefers-reduced-motion: reduce) {
  .btn-cta, .btn-sub { transition: none; }
  .btn-cta:active, .btn-sub:active { transform: none; }
}

/* ヘッダー内の小型CTA */
.btn-cta--sm {
  height: 37px; min-width: 0; padding: 0 40px; font-size: 16px; box-shadow: none;
}

/* ヘッダー内のログインボタン（app.sakifull-lms.com へ遷移） */
.btn-login {
  display: inline-flex; align-items: center; justify-content: center;
  height: 37px; padding: 0 24px; flex-shrink: 0;
  border-radius: 9999px;
  background: #fff; border: 2px solid var(--cta); color: var(--cta); text-decoration: none;
  font-family: var(--font-jp); font-size: 16px; font-weight: 700;
  transition: background .15s;
}
.btn-login:hover { background: #FFF3F7; }

/* 900px 以下はヘッダーが窮屈になるため、ログインはハンバーガーメニュー側に出す */
.site-nav__item--login { display: none; }
@media (max-width: 900px) {
  .btn-login { display: none; }
  .site-nav__item--login { display: block; }
  .site-nav__item--login a { color: var(--cta); font-weight: 700; }
}
@media (prefers-reduced-motion: reduce) { .btn-login { transition: none; } }

.cta-group { display: flex; column-gap: 7px; row-gap: var(--sp-3); flex-wrap: wrap; }

/* ---------------------------------------------------------------------- */
/* 3. ヘッダー（仕様/00 7章）                                             */
/* ---------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  height: 72px;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  max-width: var(--content-w);
  margin: 0 auto;
  padding: 0 var(--content-pad);
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--sp-6);
}
.logo-link { display: inline-flex; align-items: center; text-decoration: none; }
.logo-img { display: block; height: 32px; width: auto; }

.site-nav { flex: 1; }
.site-nav__list { display: flex; gap: var(--sp-6); justify-content: center; }
.site-nav__list a {
  text-decoration: none; color: var(--text); font-size: 15px; font-weight: 500;
}
.site-nav__list a:hover { color: var(--brand); }

.hamburger {
  display: none;
  flex-direction: column; justify-content: center; gap: 5px;
  width: 40px; height: 40px;
  padding: 0; border: none; background: none;
}
.hamburger__bar {
  display: block; width: 22px; height: 2px; background: var(--text);
  transition: transform .15s, opacity .15s;
}
.hamburger[aria-expanded="true"] .hamburger__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] .hamburger__bar:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] .hamburger__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
  .hamburger { display: flex; }
  .site-nav {
    position: fixed; top: 72px; left: 0; right: 0;
    background: #fff; border-bottom: 1px solid var(--line);
    max-height: 0; overflow: hidden; transition: max-height .2s ease;
  }
  .site-nav.is-open { max-height: 320px; }
  .site-nav__list { flex-direction: column; gap: 0; padding: var(--sp-4) 0; }
  .site-nav__list a { display: block; padding: var(--sp-3) var(--content-pad); }
}

@media (prefers-reduced-motion: reduce) {
  .hamburger__bar { transition: none; }
  .site-nav { transition: none; }
}

/* ---------------------------------------------------------------------- */
/* 4. フッター（仕様/00 8章・10章）                                        */
/* ---------------------------------------------------------------------- */
.site-footer {
  background: var(--bg-dark);
  color: #E4EAF2;
  padding: var(--sp-8) 0 var(--sp-6);
}
.site-footer__inner { max-width: var(--content-w); margin: 0 auto; padding: 0 var(--content-pad); }
.site-footer__cols {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-7);
  padding-bottom: var(--sp-7); border-bottom: 1px solid rgba(228,234,242,.2);
}
.site-footer__heading { font-size: 15px; font-weight: 700; color: #fff; margin-bottom: var(--sp-4); }
.site-footer__col ul { display: flex; flex-direction: column; gap: var(--sp-2); }
.site-footer__col a { color: #E4EAF2; text-decoration: none; font-size: 13.5px; }
.site-footer__col a:hover { text-decoration: underline; }

.cookie-note { margin-top: var(--sp-6); }
.cookie-note summary {
  cursor: pointer; font-size: 12.5px; color: #E4EAF2;
}
.cookie-note div { margin-top: var(--sp-3); }
.cookie-note p { font-size: 12px; line-height: 1.9; color: #C4CCDA; margin-bottom: var(--sp-3); }
.cookie-note a { color: #E4EAF2; }

.site-footer__copyright { margin-top: var(--sp-6); font-size: 12px; color: #C4CCDA; }

@media (max-width: 900px) {
  .site-footer__cols { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .site-footer__cols { grid-template-columns: 1fr; gap: var(--sp-6); }
}

/* ---------------------------------------------------------------------- */
/* 5. アクセシビリティ共通                                                 */
/* ---------------------------------------------------------------------- */
:focus-visible { outline: 3px solid var(--blue-vivid); outline-offset: 2px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   index.html — LP（仕様/03_LP構成.md）
   ========================================================================== */

/* S2. ファーストビュー -------------------------------------------------- */
.fv { padding: var(--sp-8) 0; background: #fff; }
.fv__inner { display: flex; align-items: center; gap: var(--sp-7); }
.fv__content { flex: 1 1 480px; }
.fv__media { flex: 1 1 480px; }
.fv h1 { font-size: 40px; font-weight: 700; color: var(--blue-vivid); margin-bottom: var(--sp-4); }
.fv-lead { font-size: 16px; line-height: normal; color: var(--text); margin-bottom: var(--sp-6); }
.fv .cta-group { margin-bottom: var(--sp-6); }
@media (min-width: 901px) { .fv h1 { white-space: nowrap; } }
.trust-badges { display: flex; flex-wrap: wrap; gap: var(--sp-5); }
.trust-badges li { display: flex; align-items: center; gap: var(--sp-2); font-size: 12px; font-weight: 350; color: #595757; }
.trust-badges img { flex-shrink: 0; height: 14px; width: auto; }

@media (max-width: 1080px) { .fv__inner { gap: var(--sp-6); } }
@media (max-width: 900px) { .fv__inner { flex-direction: column-reverse; } }
@media (max-width: 600px) {
  .fv h1 { font-size: 26px; }
  .cta-group { flex-direction: column; }
  .btn-cta:not(.btn-cta--sm), .btn-sub { min-width: 0; width: 100%; }
  .trust-badges { flex-direction: column; gap: var(--sp-3); }
}

/* S3. 数字と条件の帯 ------------------------------------------------------ */
.stats-band { background: var(--bg-blue-soft); border-top: 2px solid var(--blue-vivid); padding: 22px 0; }
.stats-band__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); text-align: center; }
.stats-band__item { display: flex; flex-direction: column; }
.stats-band__label { font-size: 12.5px; letter-spacing: .14em; color: var(--text-mute); margin-bottom: 12px; }
.stats-band__value { margin-bottom: 12px; }
.stats-band__value .num { font-family: var(--font-num); font-size: 34px; color: var(--blue-vivid); line-height: 1; }
.stats-band__value .unit { font-family: var(--font-jp); font-size: 15px; font-weight: 700; color: var(--blue-vivid); margin-left: 2px; }
.stats-band__value--jp { font-family: var(--font-jp); font-size: 24px; font-weight: 700; color: var(--blue-vivid); }
.stats-band__note { font-size: 12.5px; color: var(--text-mute); }
@media (min-width: 901px) {
  .stats-band__item:not(:first-child) { border-left: 1px solid var(--blue-vivid); }
}

@media (max-width: 900px) { .stats-band__grid { grid-template-columns: repeat(2, 1fr); row-gap: var(--sp-6); } }
@media (max-width: 600px) { .stats-band__grid { grid-template-columns: 1fr; } }

/* S4. Sakifull LMS とは ---------------------------------------------------- */
.about { padding: var(--sp-8) 0; background: #fff; }
.about__inner { max-width: 760px; text-align: center; }
.about h2 { font-size: 28px; font-weight: 700; color: var(--text); margin-bottom: var(--sp-4); }
.about p { font-size: 15px; line-height: 1.9; color: var(--text-sub); }
@media (max-width: 600px) { .about h2 { font-size: 21px; } }

/* S5. こんなお悩みお持ちじゃないですか？ ------------------------------------ */
.pains { position: relative; background: var(--bg-blue); padding: var(--sp-8) 0; overflow: hidden; }
.pains::before {
  content: ""; position: absolute; z-index: 0; top: 0; left: 0;
  width: 55%; height: 65%;
  background: radial-gradient(circle at 0% 0%, var(--bg-blue-soft) 0%, var(--bg-blue) 75%);
  pointer-events: none;
}
.pains > .container { position: relative; z-index: 1; }
.pains h2 { text-align: center; font-size: 28px; font-weight: 700; color: var(--text); margin-bottom: var(--sp-7); }
.pains__body { display: flex; align-items: center; gap: var(--sp-7); }
.pains__list { flex: 1 1 560px; display: flex; flex-direction: column; gap: var(--sp-5); }
.pains__list li { display: flex; gap: var(--sp-3); align-items: flex-start; }
.pains__list img { flex-shrink: 0; margin-top: 2px; }
.pains__list p { font-size: 15px; color: var(--text-sub); }
.pains__illust { flex: 0 0 494px; height: 494px; }
@media (max-width: 900px) { .pains__body { flex-direction: column; } .pains__illust { order: -1; } }
@media (max-width: 600px) { .pains h2 { font-size: 21px; } }

/* S6. 「安全」と「快適」を設計しました -------------------------------------- */
.solution { background: #fff; padding: var(--sp-8) 0; }
.solution__blob {
  position: relative;
  background-image: url('../img/blob-solution.png');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  padding: var(--sp-7) var(--sp-6);
}
.solution h2 { text-align: center; color: #fff; font-size: 28px; font-weight: 700; margin-bottom: var(--sp-7); }
.solution__body { display: flex; align-items: center; justify-content: center; }
.solution__illust { flex: 0 0 260px; margin-right: -40px; position: relative; z-index: 1; transform: scaleX(-1); }
.solution__card { flex: 0 1 620px; max-width: 620px; background: #fff; border-radius: var(--r-l); padding: var(--sp-6); box-shadow: var(--sh-m); }
.solution__card ul { display: flex; flex-direction: column; gap: var(--sp-4); }
.solution__card li { display: flex; gap: var(--sp-3); align-items: flex-start; }
.solution__card p { color: var(--text-sub); font-size: 15px; }
.check-mark { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--brand); display: grid; place-items: center; flex-shrink: 0; margin-top: 2px; }
.check-mark::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--brand); }
@media (max-width: 900px) {
  .solution__body { flex-direction: column; }
  .solution__illust { margin-right: 0; }
  .solution__card { max-width: 100%; }
  .solution__blob { border-radius: var(--r-l); background-size: cover; }
}
@media (max-width: 600px) {
  .solution h2 { font-size: 21px; }
  .solution__card { padding: var(--sp-5); }
  .solution__blob { padding: var(--sp-6) var(--sp-4); }
}

/* S7. 機能一覧 ------------------------------------------------------------ */
.features { position: relative; padding: var(--sp-8) 0; background: #fff; overflow: hidden; }
.features::before {
  content: ""; position: absolute; z-index: 0; right: -160px; bottom: -220px;
  width: 480px; height: 480px; border-radius: 50%; background: var(--bg-blue-soft);
}
.features > .container { position: relative; z-index: 1; }
.feature-table { width: 100%; border-collapse: collapse; }
.feature-table caption { text-align: left; font-size: 12.5px; color: var(--text-mute); margin-bottom: var(--sp-3); }
.feature-table th, .feature-table td { padding: var(--sp-4); text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; font-size: 15px; color: var(--text-sub); }
.feature-table thead th { background: var(--bg-blue-soft); color: var(--text); font-weight: 700; font-size: 14px; }
.feature-table tbody th { width: 220px; color: var(--text); font-weight: 700; }

@media (max-width: 600px) {
  .feature-table thead { display: none; }
  .feature-table, .feature-table caption, .feature-table tbody, .feature-table tr, .feature-table th, .feature-table td { display: block; width: 100%; }
  .feature-table caption { text-align: left; margin-bottom: var(--sp-4); }
  .feature-table tr { margin-bottom: var(--sp-5); border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden; }
  .feature-table tbody th { background: var(--bg-blue-soft); border-bottom: none; }
  .feature-table td { border-bottom: none; }
}

/* S8. 研修マーケットプレイス ------------------------------------------------ */
.marketplace { background: linear-gradient(135deg, #6B7C99 0%, var(--bg-dark) 55%, #37425A 100%); color: #fff; padding: var(--sp-8) 0; border-radius: 260px 0 0 0; }
.marketplace__label {
  display: inline-block; margin-bottom: var(--sp-4); padding: 6px 16px;
  border: 1px solid rgba(255,255,255,.4); border-radius: 999px; font-size: 12px; color: #fff;
}
@media (max-width: 900px) { .marketplace { border-radius: 200px 0 0 0; } }
@media (max-width: 600px) { .marketplace { border-radius: 120px 0 0 0; } }
.marketplace__inner { display: flex; align-items: flex-start; gap: var(--sp-7); }
.marketplace__intro { flex: 0 1 460px; }
.marketplace h2 { font-size: 28px; font-weight: 700; margin-bottom: var(--sp-4); }
.marketplace__intro p { color: #D7DEE9; margin-bottom: 0; }
.marketplace__list { flex: 1 1 520px; display: flex; flex-direction: column; gap: var(--sp-6); }
.marketplace__list li { display: flex; gap: var(--sp-5); align-items: flex-start; }
.marketplace__num { font-family: var(--font-num); font-size: 28px; color: var(--brand); line-height: 1; flex-shrink: 0; }
.marketplace__list h3 { font-size: 18px; font-weight: 700; color: #fff; margin-bottom: var(--sp-2); }
.marketplace__list p { color: #D7DEE9; margin: 0; font-size: 15px; }
@media (max-width: 900px) {
  .marketplace__inner { flex-direction: column; }
  .marketplace__intro { flex-basis: auto; }
}
@media (max-width: 600px) { .marketplace h2 { font-size: 21px; } }

/* S9. 導入の流れ ----------------------------------------------------------- */
.flow { padding: var(--sp-8) 0; background: #fff; }
.flow__list { display: flex; gap: 19px; }
.flow__list li { flex: 1; text-align: center; position: relative; }

/* PC用：矢印のサイズと位置 */
.flow__list li:not(:last-child)::after {
  content: "›››";
  position: absolute;
  right: -26px;
  top: 50%;
  transform: translateY(-60%);
  color: var(--blue-vivid);
  font-size: 42px;
  line-height: 1;
  letter-spacing: -4px;
}

.flow__step { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 76px; height: 76px; border-radius: 50%; background: var(--blue-vivid); color: #fff; font-size: 11px; font-weight: 700; margin-bottom: var(--sp-4); }
.flow__step span { font-family: var(--font-num); font-size: 20px; line-height: 1; }
.flow__illust { height: 128px; width: auto; margin: 0 auto var(--sp-4); display: block; }
.flow__list h3 { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: var(--sp-2); }
.flow__list p { font-size: 13.5px; color: var(--text-sub); }

/* スマホ用（900px以下）：隙間を確保して被りを解消 */
@media (max-width: 900px) {
  .flow__list { 
    flex-direction: column; 
    gap: 70px; /* ★隙間を広げて矢印の入る場所を作る */
  }
  .flow__list li:not(:last-child)::after { 
    content: "︾"; 
    font-size: 32px; /* ★scaleではなくfont-sizeで拡大 */
    right: auto; 
    top: auto; 
    bottom: -52px; /* ★広げた隙間の中央に配置 */
    left: 50%; 
    transform: translateX(-50%); /* ★scale(3.5)を削除 */
  }
}
/* S10. 注意事項 ------------------------------------------------------------ */
.notice-wrap { padding: var(--sp-7) 0; background: #fff; }
.notice { border: 1px solid var(--line-strong); border-radius: var(--r-m); padding: var(--sp-6); background: #FAFBFC; }
.notice h3 { font-size: 16px; font-weight: 700; margin-bottom: var(--sp-3); color: var(--text); }
.notice ul { display: flex; flex-direction: column; gap: var(--sp-3); }
.notice li { font-size: 13px; line-height: 1.9; color: var(--text-sub); padding-left: 1.2em; position: relative; }
.notice li::before { content: "・"; position: absolute; left: 0; }

/* S11. 料金プラン ----------------------------------------------------------- */
.pricing { position: relative; padding: var(--sp-8) 0; background: #fff; overflow: hidden; }
.pricing::before {
  content: ""; position: absolute; z-index: 0;
  width: 640px; height: 640px; border-radius: 50%;
  background: var(--bg-blue-soft);
  right: -220px; bottom: -280px;
}
.pricing > .container { position: relative; z-index: 1; }
.pricing__table-wrap { overflow-x: auto; }
.price-table { width: 100%; border-collapse: separate; border-spacing: 12px 0; margin: 0 -12px; min-width: 700px; }
.price-table caption { text-align: left; font-size: 12.5px; color: var(--text-mute); margin-bottom: var(--sp-3); margin-left: 12px; }
.price-table th, .price-table td { padding: var(--sp-4); text-align: center; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--text-sub); }
.price-table thead th, .price-table thead td { border-bottom: none; }
.price-table tbody th { text-align: left; color: var(--text); font-weight: 700; font-size: 13.5px; border-bottom-color: transparent; }

/* ヘッダー行と最初の2行（月額・1人あたり）を色付きの「カード」として見せる */
.price-table thead th {
  background: var(--blue-vivid); color: #fff; font-size: 15px;
  border-radius: var(--r-m) var(--r-m) 0 0; padding-bottom: var(--sp-2);
}
.price-table tbody tr:nth-child(1) td, .price-table tbody tr:nth-child(2) td {
  background: var(--blue-vivid); color: #fff; border-bottom-color: rgba(255,255,255,.25);
}
.price-table tbody tr:nth-child(2) td { border-bottom: none; }
.price-table tbody tr:nth-child(1) .num, .price-table tbody tr:nth-child(1) .unit { color: #fff; }

.price-table .num { font-family: var(--font-num); font-size: 26px; color: var(--text); }
.price-table .unit { font-family: var(--font-jp); font-size: 13px; font-weight: 700; margin-left: 2px; }

/* おすすめ列を枠線で囲む(セル単位のleft/rightを縦に連結して1本の輪郭に見せる) */
.price-table th.is-recommended, .price-table td.is-recommended { border-left: 2px solid var(--brand); border-right: 2px solid var(--brand); }
.price-table thead th.is-recommended { border-top: 2px solid var(--brand); }
.price-table tbody tr:last-child td.is-recommended { border-bottom: 2px solid var(--brand); border-radius: 0 0 var(--r-m) var(--r-m); }

.price-table .badge { display: inline-block; margin-left: var(--sp-2); padding: 2px 8px; font-size: 10.5px; font-weight: 700; color: var(--brand); border: 1px solid var(--brand); border-radius: 999px; background: #fff; vertical-align: middle; }
.price-note { margin-top: var(--sp-4); font-size: 12.5px; color: var(--text-mute); text-align: left; }
.pricing__footnotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); margin-top: var(--sp-7); }
.pricing__footnotes h3 { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: var(--sp-2); }
.pricing__footnotes p { font-size: 12.5px; color: var(--text-mute); }
@media (max-width: 600px) { .pricing__footnotes { grid-template-columns: 1fr; } }

.buyout-note {
  margin-top: var(--sp-6);
  padding: var(--sp-7) var(--sp-6);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-l);
  background: linear-gradient(180deg, var(--bg-blue-soft) 0%, #fff 100%);
  text-align: center;
}
.buyout-note__badge {
  display: inline-block;
  padding: 5px 16px;
  margin-bottom: var(--sp-4);
  border-radius: 999px;
  background: var(--brand);
  color: var(--text-invert);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
}
.buyout-note__text {
  max-width: 480px;
  margin: 0 auto var(--sp-5);
  font-size: 14px;
  line-height: 1.9;
  color: var(--text-sub);
}
.buyout-note .btn-sub { min-width: 260px; }
@media (max-width: 600px) {
  .buyout-note { padding: var(--sp-6) var(--sp-4); }
}

/* S12. クロージングCTA ------------------------------------------------------ */
.closing-cta { background: var(--bg-blue-soft); padding: var(--sp-8) 0; text-align: center; }
.closing-cta__inner { max-width: 640px; }
.closing-cta h2 { font-size: 28px; font-weight: 700; margin-bottom: var(--sp-4); color: var(--text); }
.closing-cta p { font-size: 15px; color: var(--text-sub); margin-bottom: var(--sp-6); }
.closing-cta .cta-group { justify-content: center; }
@media (max-width: 600px) { .closing-cta h2 { font-size: 21px; } }

/* ==========================================================================
   faq.html（仕様/01_FAQページ.md）
   ========================================================================== */

.breadcrumb { padding: var(--sp-4) 0; }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 2px; font-size: 12.5px; color: var(--text-mute); }
.breadcrumb a { color: var(--text-mute); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb li { display: flex; align-items: center; gap: 6px; }
.breadcrumb li:not(:last-child)::after { content: "›"; margin-left: 4px; color: var(--line-strong); }
.breadcrumb li[aria-current] { color: var(--text-sub); }

.page-head { padding: var(--sp-6) 0 var(--sp-7); text-align: center; }
.page-head__en {
  display: block; font-family: var(--font-num); font-size: 13px;
  letter-spacing: .22em; color: var(--brand); margin-bottom: 8px;
}
.page-head h1 { font-size: 38px; font-weight: 700; color: var(--text); margin-bottom: var(--sp-4); }
.page-head .lead { font-size: 14px; color: var(--text-sub); max-width: 640px; margin: 0 auto; }
@media (max-width: 600px) { .page-head h1 { font-size: 26px; } }

.faq-cats { padding-bottom: var(--sp-6); }
.faq-cats ul { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3); }
.faq-cats a {
  display: inline-block; padding: 8px 18px; border-radius: 999px;
  background: var(--bg-blue-soft); border: 1px solid var(--line);
  color: var(--text); font-size: 13.5px; font-weight: 700; text-decoration: none;
}
.faq-cats a:hover { background: var(--bg-blue); }

.faq-group { padding: var(--sp-7) 0; border-top: 1px solid var(--line); }
.faq-group:first-of-type { border-top: none; padding-top: 0; }
.faq-group h2 { font-size: 21px; font-weight: 700; color: var(--text); margin-bottom: var(--sp-5); }

.qa-list { display: flex; flex-direction: column; gap: var(--sp-4); }
.qa { border-bottom: 1px solid var(--line); padding-bottom: var(--sp-4); }
.qa summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--sp-3);
  font-size: 16px; font-weight: 700; color: var(--text); padding: var(--sp-2) 0;
}
.qa summary::-webkit-details-marker { display: none; }
.q-mark, .a-mark {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; font-size: 13px; font-weight: 700;
}
.q-mark { background: var(--brand); color: #fff; }
.a-mark { background: var(--bg-blue); color: var(--text); }
.q-text { flex: 1; }
.q-icon {
  flex-shrink: 0; width: 8px; height: 8px;
  border-right: 2px solid var(--text-mute); border-bottom: 2px solid var(--text-mute);
  transform: rotate(-45deg); transition: transform .2s; margin-right: 4px;
}
.qa[open] .q-icon { transform: rotate(45deg); }
.qa-body { display: flex; gap: var(--sp-3); padding-top: 10px; align-items: flex-start; }
.a-text p { font-size: 15px; line-height: 1.9; color: var(--text-sub); }

/* 開閉アニメーション（対応ブラウザのみ。非対応時は即時開閉にフォールバック） */
@media not (prefers-reduced-motion: reduce) {
  .qa { interpolate-size: allow-keywords; }
  .qa::details-content {
    height: 0; overflow: hidden;
    transition: height .2s ease, content-visibility .2s ease allow-discrete;
  }
  .qa[open]::details-content { height: auto; }
}

.faq-cta { background: var(--bg-blue-soft); padding: var(--sp-8) 0; text-align: center; }
.faq-cta h2 { font-size: 28px; font-weight: 700; color: var(--text); margin-bottom: var(--sp-4); }
.faq-cta p { font-size: 15px; color: var(--text-sub); margin-bottom: var(--sp-6); }
.faq-cta .cta-group { justify-content: center; }
@media (max-width: 600px) { .faq-cta h2 { font-size: 21px; } }

/* ==========================================================================
   contact.html（仕様/02_お問い合わせフォーム.md）
   ========================================================================== */

.contact { padding: var(--sp-8) 0; }
.contact__inner { max-width: var(--form-w); margin: 0 auto; }

.contact-tabs { display: flex; gap: var(--sp-3); margin-bottom: var(--sp-6); }
.contact-tab {
  flex: 1; height: 52px; border-radius: var(--r-m); border: 1.5px solid var(--line-strong);
  background: #fff; color: var(--text-sub); font-family: var(--font-jp); font-size: 15px; font-weight: 700;
}
.contact-tab[aria-pressed="true"] { background: var(--cta); border-color: var(--cta); color: #fff; }

#contactHeading { font-size: 38px; font-weight: 700; color: var(--text); text-align: center; margin-bottom: var(--sp-3); }
.contact .lead { text-align: center; font-size: 15px; color: var(--text-sub); margin-bottom: var(--sp-7); }
@media (max-width: 600px) { #contactHeading { font-size: 26px; } }

.form-banner {
  background: var(--error-bg); color: var(--error); border: 1px solid var(--error);
  border-radius: var(--r-m); padding: var(--sp-4); font-size: 14px; margin-bottom: var(--sp-5);
}
.form-banner[hidden] { display: none; }

.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-row { margin-bottom: 20px; }
.form-row label, .form-row__label {
  display: block; font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 7px;
}
.required-badge {
  display: inline-block; margin-left: 6px; padding: 2px 6px; font-size: 10.5px; font-weight: 700;
  color: var(--error); background: var(--error-bg); border-radius: 4px; vertical-align: middle;
}
.required-badge[hidden] { display: none; }

.form-row input[type="text"], .form-row input[type="email"], .form-row input[type="tel"],
.form-row select, .form-row textarea {
  width: 100%; height: 52px; padding: 0 16px; border: 1.5px solid var(--line-strong); border-radius: var(--r-m);
  background: #FCFDFE; font-family: var(--font-jp); font-size: 15px; color: var(--text);
}
.form-row textarea { height: auto; padding: 12px 16px; line-height: 1.9; resize: vertical; }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
  outline: none; border-color: var(--cta); box-shadow: 0 0 0 4px rgba(255,45,109,.14);
}
.form-row input.is-invalid, .form-row select.is-invalid, .form-row textarea.is-invalid {
  border-color: var(--error); background: #FFFBFA;
}

.field-error { margin-top: 6px; font-size: 12.5px; color: var(--error); }
.field-error[hidden] { display: none; }

.preferred-group { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
@media (max-width: 600px) { .preferred-group { grid-template-columns: 1fr; } }

.checkbox-label { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; color: var(--text-sub); cursor: pointer; }
.checkbox-label input { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; }
.checkbox-label a { color: var(--cta); }

#submitBtn { width: 100%; margin-top: var(--sp-3); }

.form-footnote { margin-top: var(--sp-4); font-size: 12.5px; color: var(--text-mute); line-height: 1.9; }

@media (max-width: 600px) { .contact .container { padding-left: 20px; padding-right: 20px; } }

/* ==========================================================================
   thanks.html
   ========================================================================== */
.thanks { padding: var(--sp-8) 0; text-align: center; }
.thanks__inner { max-width: 640px; margin: 0 auto; }
.thanks__icon { width: 64px; height: 64px; margin: 0 auto var(--sp-5); }
.thanks h1 { font-size: 38px; font-weight: 700; color: var(--text); margin-bottom: var(--sp-4); }
.thanks p { font-size: 15px; color: var(--text-sub); margin-bottom: var(--sp-6); }
.thanks a.back-link { color: var(--cta); font-size: 15px; font-weight: 700; text-decoration: none; }
.thanks a.back-link:hover { text-decoration: underline; }
@media (max-width: 600px) { .thanks h1 { font-size: 26px; } }