@charset "UTF-8";

/*
 * 下層ページ共通コンポーネント（v2レイアウト言語）
 * 読み込み順：style.css → pages.css → palette.css
 * 造形ルール：丸カード・絵文字アイコン・和風装飾は使わない。
 * 細罫、余白、番号（01/02/03）、大きな明朝、色面、雑誌的グリッドで語る。
 */

:root {
  --read: min(90vw, 1120px);
}

/* ---------- ページ見出し ---------- */
.page-head {
  padding: clamp(138px, 14vw, 210px) 0 clamp(66px, 8vw, 108px);
  background: var(--tone-pale);
}
.page-head-inner { width: var(--read); margin: 0 auto; }
.breadcrumb { display: flex; flex-wrap: wrap; gap: 10px; color: var(--muted); font-size: 0.68rem; letter-spacing: 0.06em; }
.breadcrumb a { border-bottom: 1px solid transparent; transition: border-color 200ms ease; }
.breadcrumb a:hover { border-bottom-color: currentColor; }
.page-head .section-label { display: block; margin: 34px 0 0; }
.page-head h1 {
  margin-top: 20px;
  font: 600 clamp(2.2rem, 4.6vw, 4.1rem)/1.24 var(--serif);
  letter-spacing: -0.055em;
  text-wrap: balance;
}
.page-head h1 em { color: var(--accent); font-style: normal; }
.page-lead { max-width: 680px; margin-top: 34px; color: var(--muted); font-size: 0.95rem; line-height: 2.05; }
.page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 26px; margin-top: 42px; }
.page-note { margin-top: 22px; color: var(--muted); font-size: 0.72rem; line-height: 1.9; }

/* ---------- セクション枠 ---------- */
.sec { padding: clamp(84px, 10vw, 145px) 0; }
.sec-inner { width: var(--read); margin: 0 auto; }
.sec-paper { background: var(--paper); }
.sec-pale  { background: var(--tone-pale); }
.sec-soft  { background: var(--tone-soft); }
.sec-sand  { background: var(--sand); }
.sec-head { margin-bottom: clamp(42px, 5.5vw, 76px); }
.sec-head h2 {
  font: 600 clamp(1.85rem, 3.5vw, 3.1rem)/1.32 var(--serif);
  letter-spacing: -0.05em;
  text-wrap: balance;
}
.sec-head > p:not(.section-label) { max-width: 640px; margin-top: 22px; color: var(--muted); font-size: 0.92rem; line-height: 2; }
.sec-foot { margin-top: 34px; color: var(--muted); font-size: 0.82rem; line-height: 1.95; }

/* ---------- チェックリスト ---------- */
.check-list { border-top: 1px solid var(--ink); }
.check-list li {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 18px;
  align-items: baseline;
  padding: 25px 0;
  border-bottom: 1px solid var(--line);
}
.check-list b { color: var(--accent); font: 500 0.76rem/1 var(--display); }
.check-list span { font: 600 clamp(0.98rem, 1.45vw, 1.2rem)/1.8 var(--serif); }

/* ---------- 変化（2×2の色面グリッド） ---------- */
.outcome { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.outcome article { padding: clamp(30px, 3.6vw, 52px); background: var(--paper); }
.outcome b { display: block; color: var(--accent); font: 500 0.74rem/1 var(--display); }
.outcome h3 { margin-top: 18px; font: 600 clamp(1.2rem, 1.9vw, 1.65rem)/1.5 var(--serif); }
.outcome p { margin-top: 16px; color: var(--muted); font-size: 0.86rem; line-height: 2; }

/* ---------- カリキュラム ---------- */
.curriculum { border-top: 1px solid var(--ink); }
.curriculum li {
  display: grid;
  grid-template-columns: 66px minmax(190px, 0.72fr) 1.28fr;
  gap: 26px;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
}
.curriculum .no { color: var(--accent); font: 500 0.95rem/1.5 var(--display); }
.curriculum h3 { font: 600 clamp(1rem, 1.45vw, 1.28rem)/1.6 var(--serif); }
.curriculum p { color: var(--muted); font-size: 0.84rem; line-height: 1.95; }

/* ---------- 3つの特徴（横並び罫線） ---------- */
.features { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ink); }
.features article { padding: 34px 32px 40px 0; border-right: 1px solid var(--line); }
.features article:last-child { border-right: 0; padding-right: 0; }
.features small { color: var(--accent); font: 700 0.58rem/1 var(--sans); letter-spacing: 0.18em; }
.features h3 { margin-top: 16px; font: 600 clamp(1.15rem, 1.7vw, 1.45rem)/1.55 var(--serif); }
.features p { margin-top: 16px; color: var(--muted); font-size: 0.84rem; line-height: 2; }

/* ---------- 著者帯 ---------- */
.author-band { display: grid; grid-template-columns: 0.82fr 1.18fr; background: var(--tone-soft); }
.author-photo { position: relative; min-height: 480px; overflow: hidden; }
.author-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 60% center; }
.author-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(50px, 6vw, 96px); }
.author-copy h2 { font: 600 clamp(1.8rem, 3.2vw, 2.9rem)/1.35 var(--serif); letter-spacing: -0.05em; }
.author-copy p { max-width: 620px; margin-top: 26px; font-size: 0.9rem; line-height: 2.05; }
.author-sign { margin-top: 32px; font: 600 1.05rem/1 var(--serif); }
.author-sign small { display: block; margin-top: 10px; color: var(--muted); font: 500 0.66rem/1 var(--sans); letter-spacing: 0.16em; }
.author-copy .author-name { max-width: none; margin-top: 12px; font: 600 clamp(2rem, 3.6vw, 3.1rem)/1.15 var(--serif); letter-spacing: -0.05em; }
.author-copy .author-name small { display: block; margin-top: 16px; color: var(--muted); font: 500 0.72rem/1.6 var(--sans); letter-spacing: 0.18em; }
.text-link-inline { border-bottom: 1px solid currentColor; font-weight: 700; }
.author-tags { display: flex; flex-wrap: wrap; margin-top: 30px; }
.author-tags li { padding: 7px 12px; border: 1px solid var(--ink); font-size: 0.62rem; }
.author-copy .arrow-link { width: max-content; margin-top: 30px; }

/* ---------- プランの階段 ---------- */
.plan-stack { border-top: 1px solid var(--ink); }
.plan-row {
  display: grid;
  grid-template-columns: 96px minmax(210px, 0.85fr) 1.1fr auto;
  gap: 20px 30px;
  align-items: center;
  padding: 30px 0;
  border-bottom: 1px solid var(--ink);
  transition: padding 220ms ease, background 220ms ease;
}
.plan-row:hover { padding-left: 22px; background: var(--tone-pale); }
.plan-row.is-featured { background: var(--accent-soft); padding-left: 22px; padding-right: 22px; }
.plan-row .step { color: var(--muted); font: 700 0.6rem/1.6 var(--sans); letter-spacing: 0.16em; }
.plan-row h3 { font: 600 clamp(1.18rem, 1.8vw, 1.55rem)/1.4 var(--serif); }
.plan-row .who { margin-top: 8px; font-size: 0.66rem; font-weight: 700; }
.plan-row > p { color: var(--muted); font-size: 0.82rem; line-height: 1.95; }
.plan-price { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; text-align: right; }
.plan-price b { font: 500 clamp(1.5rem, 2.4vw, 2.1rem)/1 var(--display); }
.plan-price b small { font: 500 0.62rem/1 var(--sans); }
.plan-price span { color: var(--muted); font-size: 0.64rem; }
.plan-price a { padding-bottom: 4px; border-bottom: 1px solid currentColor; font-size: 0.7rem; font-weight: 700; }

/* ---------- 比較表 ---------- */
.compare-scroll { overflow-x: auto; }
.compare { width: 100%; min-width: 700px; border-collapse: collapse; background: var(--paper); }
.compare th, .compare td { padding: 17px 20px; border: 1px solid var(--line); font-size: 0.82rem; line-height: 1.8; text-align: left; vertical-align: top; }
.compare thead th { background: var(--tone-pale); }
.compare tbody th { width: 128px; background: var(--tone-pale); font-size: 0.72rem; font-weight: 700; }
.compare .col-hero, .compare td.is-hero { background: var(--accent-soft); }
.compare .pl-name { display: block; font: 600 1.02rem/1.4 var(--serif); }
.compare .pl-who { display: block; margin-top: 6px; color: var(--muted); font-size: 0.64rem; }
.compare .pl-yen { display: block; margin-top: 10px; font: 500 1.2rem/1 var(--display); }
.tbd { display: inline-block; padding: 3px 9px; background: var(--sand); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.04em; }

/* ---------- 価格ボックス ---------- */
.price-box { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 72px); padding: clamp(38px, 5vw, 68px); color: #fff; background: var(--tone-deep); }
.price-box small.label { color: var(--sand); font: 700 0.6rem/1 var(--sans); letter-spacing: 0.2em; }
.price-box h3 { margin-top: 18px; font: 600 clamp(1.25rem, 2vw, 1.75rem)/1.5 var(--serif); }
.price-amount { margin-top: 26px; font: 500 clamp(2.8rem, 5.5vw, 4.6rem)/1 var(--display); letter-spacing: -0.02em; }
.price-amount small { font: 500 0.9rem/1 var(--sans); letter-spacing: 0.04em; }
.price-includes { align-self: center; }
.price-includes dt { color: var(--sand); font: 700 0.6rem/1 var(--sans); letter-spacing: 0.16em; }
.price-includes dd { margin: 14px 0 0; }
.price-includes ul { display: grid; gap: 10px; }
.price-includes li { padding-left: 18px; font-size: 0.84rem; line-height: 1.9; text-indent: -18px; }
.price-includes li::before { content: "―"; margin-right: 8px; color: var(--sand); }
.price-note { margin-top: 26px; color: rgba(255, 255, 255, 0.72); font-size: 0.74rem; line-height: 1.9; }

/* ---------- 申込みの流れ ---------- */
.flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.flow article { padding: clamp(28px, 3.4vw, 46px); background: var(--paper); }
.flow b { color: var(--accent); font: 500 0.78rem/1 var(--display); }
.flow h3 { margin-top: 16px; font: 600 clamp(1.1rem, 1.6vw, 1.35rem)/1.5 var(--serif); }
.flow p { margin-top: 14px; color: var(--muted); font-size: 0.83rem; line-height: 1.95; }

/* ---------- お客様の声 ---------- */
.voices { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.voice-card { padding: clamp(30px, 3.6vw, 50px); background: var(--paper); }
.voice-card h3 { font: 600 clamp(1.08rem, 1.7vw, 1.4rem)/1.6 var(--serif); }
.voice-card p { margin-top: 18px; color: var(--muted); font-size: 0.85rem; line-height: 2; }
.voice-card cite { display: block; margin-top: 24px; font-size: 0.68rem; font-style: normal; }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 0;
  cursor: pointer;
  font: 600 clamp(0.98rem, 1.35vw, 1.15rem)/1.7 var(--serif);
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { color: var(--accent); content: "＋"; font-size: 0.9rem; }
.faq details[open] summary::after { content: "―"; }
.faq .answer { padding: 0 0 28px; color: var(--muted); font-size: 0.87rem; line-height: 2.05; }

/* ---------- 最終CTA ---------- */
.final-cta { padding: clamp(84px, 10vw, 140px) 0; background: var(--ivory-light); }
.final-cta-inner { width: var(--read); margin: 0 auto; }
.final-cta h2 { font: 600 clamp(2rem, 4vw, 3.5rem)/1.28 var(--serif); letter-spacing: -0.05em; }
.final-cta > .final-cta-inner > p { max-width: 620px; margin-top: 26px; color: var(--muted); font-size: 0.9rem; line-height: 2; }
.final-cta .page-actions { margin-top: 38px; }
.final-cta small { display: block; margin-top: 22px; color: var(--muted); font-size: 0.7rem; }

/* ---------- 本文（読み物・法文） ---------- */
.prose { max-width: 760px; }
.prose p { margin-top: 22px; font-size: 0.92rem; line-height: 2.15; }
.prose p:first-child { margin-top: 0; }
.prose h3 { margin-top: 46px; font: 600 clamp(1.2rem, 1.9vw, 1.6rem)/1.6 var(--serif); }
.prose .lead { font: 600 clamp(1.1rem, 1.7vw, 1.4rem)/1.9 var(--serif); }
.prose ul { margin-top: 20px; display: grid; gap: 10px; }
.prose ul li { padding-left: 18px; font-size: 0.88rem; line-height: 1.95; text-indent: -18px; }
.prose ul li::before { content: "―"; margin-right: 8px; color: var(--accent); }

/* ---------- 年表 ---------- */
.timeline { border-top: 1px solid var(--ink); }
.timeline li { display: grid; grid-template-columns: 130px 1fr; gap: 26px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.timeline .year { color: var(--accent); font: 500 0.9rem/1.6 var(--display); letter-spacing: 0.04em; }
.timeline p { font-size: 0.88rem; line-height: 2; }
.timeline b { display: block; margin-bottom: 6px; font: 600 1rem/1.6 var(--serif); }

/* ---------- 演題・テーマカード ---------- */
.topics { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.topics article { display: grid; grid-template-columns: 74px 1fr; gap: 26px; padding: clamp(26px, 3vw, 40px); background: var(--paper); }
.topics .no { color: var(--accent); font: 500 0.9rem/1.5 var(--display); }
.topics small { color: var(--muted); font: 700 0.58rem/1 var(--sans); letter-spacing: 0.16em; }
.topics h3 { margin-top: 12px; font: 600 clamp(1.15rem, 1.9vw, 1.55rem)/1.55 var(--serif); }
.topics p { margin-top: 14px; color: var(--muted); font-size: 0.84rem; line-height: 1.95; }

/* ---------- 数字で見る（実績） ---------- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.stats div { padding: clamp(26px, 3vw, 44px); background: var(--paper); }
.stats dt { color: var(--muted); font: 700 0.6rem/1.6 var(--sans); letter-spacing: 0.14em; }
.stats dd { margin: 14px 0 0; font: 500 clamp(1.8rem, 3.2vw, 2.8rem)/1.1 var(--display); }
.stats dd small { font: 500 0.72rem/1 var(--sans); letter-spacing: 0.04em; }
.stats .note { margin-top: 12px; color: var(--muted); font-size: 0.72rem; line-height: 1.8; }

/* ---------- 導線カード ---------- */
.link-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.link-cards a { display: grid; grid-template-columns: 1fr 40px; align-items: center; gap: 20px; padding: clamp(26px, 3vw, 40px); background: var(--paper); transition: background 220ms ease, color 220ms ease; }
.link-cards a:hover { background: var(--tone-pale); }
.link-cards small { color: var(--muted); font: 700 0.58rem/1 var(--sans); letter-spacing: 0.16em; }
.link-cards h3 { margin-top: 12px; font: 600 clamp(1.1rem, 1.7vw, 1.4rem)/1.5 var(--serif); }
.link-cards p { margin-top: 10px; color: var(--muted); font-size: 0.8rem; line-height: 1.9; }
.link-cards span { justify-self: end; font-size: 1.1rem; }

/* ---------- 仕様表（特商法など） ---------- */
.spec { width: 100%; border-collapse: collapse; background: var(--paper); }
.spec th, .spec td { padding: 18px 22px; border: 1px solid var(--line); font-size: 0.85rem; line-height: 1.95; text-align: left; vertical-align: top; }
.spec th { width: 220px; background: var(--tone-pale); font-weight: 700; }

/* ---------- レスポンシブ ---------- */
@media (max-width: 1100px) {
  .outcome { grid-template-columns: 1fr; }
  .features { grid-template-columns: 1fr; }
  .features article { padding: 30px 0 34px; border-right: 0; border-bottom: 1px solid var(--line); }
  .features article:last-child { border-bottom: 0; }
  .author-band { grid-template-columns: 1fr; }
  .author-photo { min-height: 420px; }
  .plan-row { grid-template-columns: 88px 1fr auto; }
  .plan-row > p { grid-column: 2 / -1; }
  .voices { grid-template-columns: 1fr; }
  .flow { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; }
  .link-cards { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .page-head { padding: 118px 0 62px; }
  .page-head h1 { font-size: clamp(1.6rem, 7.1vw, 2.3rem); line-height: 1.4; letter-spacing: -0.045em; }
  .page-actions { align-items: flex-start; flex-direction: column; gap: 16px; }
  .sec { padding: 78px 0; }
  .sec-head h2 { font-size: clamp(1.7rem, 7.4vw, 2.2rem); }
  .check-list li { grid-template-columns: 42px 1fr; gap: 12px; padding: 20px 0; }
  .curriculum li { grid-template-columns: 46px 1fr; gap: 8px 12px; padding: 22px 0; }
  .curriculum p { grid-column: 2; }
  .plan-row { grid-template-columns: 1fr; gap: 14px; padding: 26px 0; }
  .plan-row:hover, .plan-row.is-featured { padding-left: 16px; padding-right: 16px; }
  .plan-price { align-items: flex-start; text-align: left; }
  .price-box { grid-template-columns: 1fr; }
  .final-cta h2 { font-size: clamp(1.8rem, 8vw, 2.3rem); }
  .timeline li { grid-template-columns: 1fr; gap: 8px; padding: 20px 0; }
  .topics article { grid-template-columns: 1fr; gap: 10px; }
  .spec th, .spec td { display: block; width: auto; }
  .spec th { border-bottom: 0; }
  .spec td { border-top: 0; }
}