/* まいにち頭の体操 申込・見本・法的ページ共通。外部フォント・外部 JS なし */
:root {
  --color-ink: #19343B;
  --color-ink-soft: #526167;
  --color-brand: #176A5B;
  --color-brand-hover: #145A50;
  --color-brand-soft: #E6F3EF;
  --color-warm: #FBE2D5;
  --color-warm-ink: #7A2F18;
  --color-success: #176A5B;
  --color-success-soft: #E6F3EF;
  --color-bg: #ffffff;
  --color-surface: #F4FAF7;
  --color-border: #CED9D4;
  --color-border-strong: #7C9188;
  --color-focus: #F4B63E;
  --color-visited: #6b2e9e;
  /* 配色の入れ替え口（デザインの設計が届いたら、ここと上の色だけ変える） */
  --color-hero-bg: var(--color-surface);
  --color-tab-bg: var(--color-bg);
  --color-page: #FFF9F1;
  --color-accent: #A64322;
  --color-tab-active: #DDEEE8;
  --color-tab-ink: #145A50;
  --color-shadow: rgba(25, 52, 59, 0.16);

  --layout-max: 70rem;
  --text-measure: 42rem;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;

  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4rem;

  --section-gap: 3rem;
  --card-pad: 1.25rem;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 8px; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: "BIZ UDPGothic", "Yu Gothic UI", "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-size: 1.125rem; /* 18px */
  line-height: 1.75;
  overflow-wrap: anywhere;
}
[hidden] { display: none !important; }
a { color: var(--color-brand); text-underline-offset: 3px; }
a:visited { color: var(--color-visited); }
a:focus-visible, summary:focus-visible, button:focus-visible, .btn:focus-visible {
  outline: 3px solid var(--color-ink);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--color-focus);
}
img { max-width: 100%; }
.wrap { max-width: var(--layout-max); margin: 0 auto; padding: 0 16px; }
.measure { max-width: var(--text-measure); }

/* ヘッダー */
.site-header { border-bottom: 1px solid var(--color-border); background: var(--color-bg); }
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 16px; }
.brand { font-weight: 700; font-size: 1.1875rem; color: var(--color-ink); text-decoration: none; display: inline-flex; align-items: center; min-height: 48px; }
.brand:visited { color: var(--color-ink); }

/* 見出し */
h1 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.3; margin: 0 0 var(--space-3); }
h2 { font-size: clamp(1.625rem, 3vw, 2.25rem); line-height: 1.4; margin: 0 0 var(--space-3); max-width: 56rem; }
h3 { font-size: 1.3125rem; line-height: 1.5; margin: var(--space-4) 0 var(--space-1); }
p { margin: 0 0 var(--space-3); }
section { padding: var(--section-gap) 0; }
section.tint { background: var(--color-surface); }
.lead { font-size: 1.1875rem; }
.muted { color: var(--color-ink-soft); font-size: 1.0625rem; line-height: 1.65; }
.eyebrow { margin: 0 0 var(--space-1); font-weight: 700; color: var(--color-brand); font-size: 1.0625rem; }
.note { max-width: 60rem; }

/* 最初の画面 */
.hero { padding: var(--space-5) 0 var(--space-6); background: var(--color-surface); }
.hero-grid { display: grid; gap: var(--space-5); }
.hero-text { max-width: var(--text-measure); }
.facts { list-style: none; margin: var(--space-3) 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-1); }
.facts li {
  background: var(--color-bg); border: 1px solid var(--color-border-strong); border-radius: 999px;
  padding: 4px 14px; font-size: 1.0625rem; font-weight: 700; line-height: 1.5;
}
.price-card { background: var(--color-bg); border: 2px solid var(--color-brand); border-radius: var(--radius-md); padding: var(--space-3) var(--card-pad); margin: var(--space-3) 0; }
.price-card .price { font-size: 2rem; font-weight: 700; line-height: 1.4; }
.price-card .price small { display: inline-block; font-size: 1.0625rem; font-weight: 400; color: var(--color-ink-soft); }
.price-card .trial { font-size: 1.3125rem; font-weight: 700; margin: 0; color: var(--color-success); }
.price-card .trial-note { margin: var(--space-1) 0 0; font-size: 1.0625rem; line-height: 1.65; }
.hero-visual { position: relative; padding-right: 0; max-width: 28rem; margin: 0 auto; width: 100%; }
.paper { display: block; width: 100%; height: auto; background: var(--color-bg); border: 1px solid var(--color-border-strong); box-shadow: 0 6px 18px rgba(23, 32, 51, 0.18); }
.paper.back { display: none; }

/* ボタン */
.btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  min-height: 56px; padding: 12px 20px; width: 100%; max-width: 36rem;
  background: var(--color-brand); color: #fff; border: 2px solid var(--color-brand);
  border-radius: var(--radius-sm); font: inherit; font-size: 1.125rem; font-weight: 700; line-height: 1.5; text-decoration: none; cursor: pointer;
}
.btn span { display: block; font-size: 1.0625rem; font-weight: 400; }
.btn:visited { color: #fff; }
.btn:hover { background: var(--color-brand-hover); border-color: var(--color-brand-hover); }
.btn.sub { background: var(--color-bg); color: var(--color-brand); }
.btn.sub:visited { color: var(--color-brand); }
.btn.sub:hover { background: var(--color-brand-soft); }
.btn-row { display: grid; gap: var(--space-2); margin: var(--space-3) 0; }
.more { display: inline-flex; align-items: center; min-height: 48px; font-weight: 700; }

/* 申込みの最終確認 */
.apply-card { background: var(--color-bg); border: 2px solid var(--color-ink); border-radius: var(--radius-lg); padding: var(--card-pad); max-width: 52rem; }
.subscribe-note { background: var(--color-warm); color: var(--color-warm-ink); border: 2px solid var(--color-warm-ink); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); }
.confirm { border: 2px solid var(--color-ink); border-radius: var(--radius-md); background: var(--color-bg); padding: 4px 16px 16px; margin: var(--space-3) 0; }
.confirm h3 { margin-top: var(--space-3); }
.confirm dl { margin: 0; }
.confirm dt { font-weight: 700; margin-top: 14px; }
.confirm dd { margin: 2px 0 0; padding-bottom: 10px; border-bottom: 1px solid var(--color-border); }
.confirm dd:last-child { border-bottom: 0; }
.agree { margin: var(--space-3) 0 var(--space-2); }

/* カード・数字・段階 */
.cards, .stats, .levels { display: grid; gap: var(--space-2); margin: var(--space-3) 0; padding: 0; list-style: none; }
.cards li, .levels li, .stats li, .panel { background: var(--color-bg); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); padding: var(--space-3) var(--card-pad); }
.cards strong { display: block; font-size: 1.1875rem; margin-bottom: 4px; }
.stats .num { display: block; font-size: 1.875rem; font-weight: 700; line-height: 1.3; color: var(--color-brand); margin-bottom: 4px; }
.levels .mark { display: block; font-size: 1.1875rem; font-weight: 700; }
.panel h3 { margin-top: 0; }
.check, .cross { list-style: none; padding: 0; margin: 0; }
.check li, .cross li { position: relative; padding: 4px 0 4px 2em; }
.check li::before { content: "\2713"; position: absolute; left: 0; font-weight: 700; color: var(--color-success); }
.cross li::before { content: "\2715"; position: absolute; left: 0; font-weight: 700; color: var(--color-ink-soft); }
.two-col, .flows { display: grid; gap: var(--space-3); margin: var(--space-3) 0; }
.flow-col { background: var(--color-bg); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); padding: var(--space-2) var(--card-pad) var(--space-3); }
.flow-col.us { background: var(--color-brand-soft); border: 2px solid var(--color-brand); }
.flow-col h3 { margin-top: var(--space-1); }
.steps { counter-reset: step; list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-1); }
.steps li { counter-increment: step; position: relative; padding: 6px 0 6px 48px; min-height: 40px; }
.steps li::before { content: counter(step); position: absolute; left: 0; top: 6px; width: 34px; height: 34px; border-radius: 50%; background: var(--color-brand); color: #fff; font-weight: 700; text-align: center; line-height: 34px; }
.steps.big { gap: var(--space-2); }
.steps.big li { background: var(--color-bg); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); padding: var(--space-2) var(--card-pad) var(--space-2) 72px; }
.steps.big li::before { left: 20px; top: 14px; }

/* 見本の画像 */
.thumbs { display: grid; gap: var(--space-4); margin: var(--space-3) 0; padding: 0; list-style: none; }
.thumbs figure { margin: 0; }
.thumbs a.zoom { display: block; }
.thumbs img { display: block; width: 100%; height: auto; aspect-ratio: 802 / 1135; background: #eceff3; border: 1px solid var(--color-border-strong); box-shadow: 0 4px 12px rgba(23, 32, 51, 0.14); }
.thumbs figcaption { margin-top: var(--space-1); font-size: 1.0625rem; line-height: 1.65; }
dialog#zoom { border: 0; padding: 12px; border-radius: var(--radius-md); max-width: 96vw; max-height: 96vh; background: var(--color-bg); color: var(--color-ink); }
dialog#zoom::backdrop { background: rgba(23, 32, 51, 0.75); }
dialog#zoom img { display: block; height: auto; width: auto; max-width: 100%; max-height: calc(96vh - 110px); margin: 0 auto 12px; }
.zoom-close { margin: 0 auto; max-width: 16rem; }

/* 比較表 */
.table-wrap { margin: var(--space-3) 0; }
table.compare { width: 100%; border-collapse: collapse; background: var(--color-bg); font-size: 1.0625rem; line-height: 1.6; }
table.compare th, table.compare td { border: 1px solid var(--color-border-strong); padding: 10px 12px; text-align: left; vertical-align: top; }
table.compare thead th { background: var(--color-surface); }
table.compare thead th:last-child, table.compare td.us { background: var(--color-brand-soft); }
table.compare tbody th { background: var(--color-surface); width: 9em; }
table.compare td.us { font-weight: 700; }

/* 稟議向けの要点 */
.approval-box { background: var(--color-bg); border: 2px solid var(--color-border-strong); border-radius: var(--radius-md); padding: var(--space-2) var(--card-pad); max-width: 52rem; }
.approval { margin: 0; }
.approval dt { font-weight: 700; margin-top: var(--space-2); color: var(--color-ink-soft); font-size: 1.0625rem; }
.approval dd { margin: 0; padding-bottom: var(--space-1); border-bottom: 1px solid var(--color-border); }
.approval dd:last-child { border-bottom: 0; }

/* よくある質問 */
.faq { max-width: 52rem; }
details { border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-bg); margin: 0 0 10px; }
summary { min-height: 56px; padding: 12px 16px; font-weight: 700; cursor: pointer; display: flex; align-items: center; }
details[open] summary { border-bottom: 1px solid var(--color-border); }
details .answer { padding: 12px 16px 4px; }

/* 固定の申込ボタン（スマホのみ。JS が無いときは出ない） */
.sticky-cta { display: none; }

/* 法的ページ */
.doc { padding: var(--space-4) 0 var(--space-6); }
.doc .wrap { max-width: 48rem; }
.doc h1 { font-size: 1.75rem; }
.doc h2 { font-size: 1.3125rem; margin-top: var(--space-5); }
.doc ol, .doc ul { padding-left: 1.6em; margin: 0 0 var(--space-3); }
.doc li { margin-bottom: 6px; }
.doc table { width: 100%; border-collapse: collapse; margin: 0 0 var(--space-3); }
.doc th, .doc td { border: 1px solid var(--color-border-strong); padding: 10px 12px; text-align: left; vertical-align: top; }
.doc th { background: var(--color-surface); }
.doc td:first-child { background: var(--color-surface); font-weight: 700; }
.doc hr { border: 0; border-top: 1px solid var(--color-border); margin: var(--space-4) 0; }
.back { display: inline-flex; align-items: center; min-height: 48px; }

/* フッター */
.site-footer { border-top: 1px solid var(--color-border); background: var(--color-surface); padding: var(--space-4) 0 var(--space-5); }
.site-footer ul { list-style: none; margin: 0 0 var(--space-2); padding: 0; display: flex; flex-wrap: wrap; gap: 0 8px; }
.site-footer a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 6px; }
.site-footer p { margin: 0 0 8px; font-size: 1.0625rem; }

/* スマホ: 表を縦に積む */
@media (max-width: 640px) {
  .doc table, .doc tbody, .doc tr, .doc td, .doc th { display: block; width: 100%; }
  .doc thead { display: none; }
  .doc tr { margin-bottom: 12px; border: 1px solid var(--color-border-strong); }
  .doc th, .doc td { border: 0; }
  .doc td:first-child { border-bottom: 1px solid var(--color-border); }
}
/* スマホ: 最初の画面に主ボタンを入れる */
.facts-short { display: none; margin: var(--space-1) 0; font-weight: 700; font-size: 1.0625rem; line-height: 1.5; }
@media (max-width: 640px) {
  .hero { padding: var(--space-2) 0 var(--space-5); }
  .hero-grid { gap: var(--space-4); }
  .hero h1 { font-size: 1.75rem; margin-bottom: var(--space-1); }
  .hero .lead { font-size: 1.0625rem; line-height: 1.6; margin-bottom: var(--space-1); }
  .facts { display: none; }
  .facts-short { display: block; }
  .price-card { padding: var(--space-1) var(--space-3); margin: var(--space-1) 0; }
  .price-card .price { font-size: 1.625rem; line-height: 1.3; }
  .price-card .trial { font-size: 1.1875rem; }
  .price-card .trial-note { line-height: 1.5; margin-top: 2px; }
  .hero .btn-row { margin: var(--space-1) 0; gap: var(--space-1); }
  .hero .btn { min-height: 52px; padding: 8px 16px; }
  .eyebrow { margin-bottom: 0; }
}
/* 比較表: 狭い画面では 1項目 = 1カード */
@media (max-width: 899px) {
  table.compare, table.compare tbody, table.compare tr, table.compare th, table.compare td { display: block; width: 100%; }
  table.compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  table.compare tr { margin-bottom: var(--space-3); border: 2px solid var(--color-border-strong); border-radius: var(--radius-md); overflow: hidden; }
  table.compare th, table.compare td { border: 0; }
  table.compare tbody th { width: 100%; background: var(--color-ink); color: #fff; font-size: 1.1875rem; }
  table.compare td { border-top: 1px solid var(--color-border); padding: 6px 12px; }
  table.compare td::before { content: attr(data-label) "："; display: inline; font-weight: 700; color: var(--color-ink-soft); font-size: 1.0625rem; }
  table.compare td.us::before { color: var(--color-brand); }
}
/* スマホ: 固定の申込ボタン */
@media (max-width: 799px) {
  .sticky-cta {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    padding: 8px 16px calc(8px + env(safe-area-inset-bottom)); background: var(--color-bg); border-top: 2px solid var(--color-brand);
    visibility: hidden; opacity: 0; transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
  }
  .sticky-cta.is-on { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  .sticky-cta .btn { max-width: none; margin: 0 auto; }
}
@media (min-width: 600px) {
  .cards.three, .levels { grid-template-columns: repeat(3, 1fr); }
  .cards.four, .stats { grid-template-columns: repeat(2, 1fr); }
  .btn-row.two { grid-template-columns: repeat(2, minmax(0, 36rem)); }
}
/* パソコン幅 */
@media (min-width: 900px) {
  :root { --section-gap: 4.5rem; --card-pad: 1.5rem; }
  .hero { padding: var(--space-6) 0 var(--space-7); }
  .hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: center; gap: var(--space-6); }
  .hero-visual { padding-right: 32px; padding-bottom: 20px; }
  .paper.back { display: block; position: absolute; right: 0; top: 24px; width: calc(100% - 32px); }
  .paper.front { position: relative; }
  .thumbs { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
  .cards.four, .stats { grid-template-columns: repeat(4, 1fr); }
  .two-col, .flows { grid-template-columns: repeat(2, 1fr); }
  .steps.big { grid-template-columns: repeat(2, 1fr); }
  .approval { display: grid; grid-template-columns: 10em 1fr; column-gap: var(--space-3); }
  .approval dt { margin-top: 0; padding: var(--space-1) 0; border-bottom: 1px solid var(--color-border); }
  .approval dd { padding: var(--space-1) 0; }
  .approval dt:last-of-type, .approval dd:last-child { border-bottom: 0; }
  .btn-row { grid-template-columns: repeat(auto-fit, minmax(0, 36rem)); }
}

/* タブ（全ページ共通）: スマホでは横にスクロールする1行 */
.tabs { border-top: 1px solid var(--color-border); background: var(--color-tab-bg); }
.site-header .tabs ul.wrap { flex-wrap: nowrap; justify-content: flex-start; }
.tabs ul { list-style: none; margin: 0 auto; padding: 0 8px; display: flex; gap: 4px; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.tabs li { flex: 0 0 auto; scroll-snap-align: start; }
.tabs a {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 14px; font-weight: 700; font-size: 1.0625rem;
  color: var(--color-ink); text-decoration: none; border-bottom: 4px solid transparent; white-space: nowrap;
}
.tabs a:visited { color: var(--color-ink); }
.tabs a:hover { background: var(--color-brand-soft); }
.tabs a.is-cur { color: var(--color-brand); border-bottom-color: var(--color-brand); background: var(--color-bg); }

section.slim { padding: var(--space-5) 0; }
.page-head { padding: var(--space-4) 0 var(--space-2); background: var(--color-hero-bg); }
.page-head h1 { margin-bottom: var(--space-1); }
.page-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 8px; }
.page-nav a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 14px; border: 1px solid var(--color-border-strong); border-radius: 999px; background: var(--color-bg); font-weight: 700; text-decoration: none; }
.icons { list-style: none; margin: var(--space-3) 0; padding: 0; display: grid; gap: var(--space-2); }
.icons li { display: flex; align-items: center; gap: var(--space-3); background: var(--color-bg); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); padding: var(--space-2) var(--card-pad); }
.icons .ico { flex: 0 0 56px; color: var(--color-brand); }
.icons strong { display: block; font-size: 1.1875rem; line-height: 1.5; }
.icons span { display: block; font-size: 1.0625rem; color: var(--color-ink-soft); line-height: 1.5; }
@media (min-width: 700px) { .icons { grid-template-columns: repeat(3, 1fr); } .icons li { flex-direction: column; text-align: center; } }
.more-links { list-style: none; margin: var(--space-3) 0 0; padding: 0; }
.more-links a { display: inline-flex; align-items: center; min-height: 48px; font-weight: 700; }
.thumbs.row { display: flex; gap: var(--space-3); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--space-2); }
.thumbs.row li { flex: 0 0 68%; max-width: 15rem; scroll-snap-align: start; }
.thumbs.row figcaption { text-align: center; }
/* 申込みの確認: 要点を先に */
.confirm-h { font-size: 1.5rem; margin: var(--space-3) 0 var(--space-1); }
.confirm-lead { margin-bottom: var(--space-1); }
.confirm dl.key { background: var(--color-warm); border-radius: var(--radius-sm); padding: 4px 14px 8px; border: 2px solid var(--color-warm-ink); }
.confirm dl.key dt { color: var(--color-warm-ink); }
.confirm dl.key dd { border-bottom-color: var(--color-warm-ink); }
.confirm h3 { font-size: 1.1875rem; }
details.more-detail { margin: var(--space-2) 0; }
details.more-detail .answer { padding-bottom: 8px; }
.confirm .btn-row .btn { margin: 0 auto; }

/* 動き: 控えめに。JS が働いたときだけ初期非表示 */
.js .reveal { opacity: 0; transform: translateY(12px); transition: opacity 0.24s ease, transform 0.24s ease; }
.js .reveal.is-in { opacity: 1; transform: none; }
.js .reveal.pop { transform: scale(0.96); transition-duration: 0.18s; }
.js .reveal.pop.is-in { transform: none; }
dialog#zoom[open] { animation: zoom-in 0.15s ease; }
@keyframes zoom-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1 !important; transform: none !important; }
}

/* 印刷: 通常は申込みの導線を隠す。「この要点を印刷」のときは稟議向けの要点だけ */
@media print {
  .site-header, .site-footer, .btn-row, .sticky-cta, dialog { display: none; }
  .js .reveal { opacity: 1 !important; transform: none !important; }
  body.print-approval main > *:not(#approval) { display: none !important; }
  body.print-approval #approval { padding: 0; }
  body.print-approval .approval-box { border: 1px solid #000; }
  body.print-approval .approval { display: grid; grid-template-columns: 9em 1fr; }
  body.print-approval .approval dt, body.print-approval .approval dd { border-bottom: 1px solid #999; padding: 6px 0; margin: 0; }
}

/* ===== 見た目: ぬくもり・整然・実直 ===== */
body { background: var(--color-page); letter-spacing: 0.02em; line-height: 1.8; font-family: system-ui, -apple-system, "Segoe UI", "Yu Gothic UI", "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; }
h1 { font-size: clamp(1.875rem, 4vw, 2.875rem); line-height: 1.35; letter-spacing: 0.025em; }
h2 { font-size: clamp(1.6875rem, 3vw, 2.25rem); line-height: 1.45; letter-spacing: 0.025em; }
h3 { font-size: clamp(1.3125rem, 2vw, 1.5rem); line-height: 1.55; }
.lead { font-size: clamp(1.125rem, 1.8vw, 1.3125rem); line-height: 1.75; }
:focus-visible { outline: 3px solid var(--color-ink); outline-offset: 3px; box-shadow: 0 0 0 6px var(--color-focus); }

/* ヘッダーとタブ */
.site-header { background: var(--color-bg); border-bottom: 0; position: relative; }
.site-header .wrap { min-height: 56px; }
.brand { font-size: 1.1875rem; }
.tabs { border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); background: var(--color-bg); }
.tabs ul { padding: 0 8px 0 16px; gap: 4px; scroll-padding-left: 16px; }
.tabs a { min-height: 52px; padding: 0 14px; border-radius: 10px 10px 0 0; border-bottom: 0; transition: color .16s ease, background-color .16s ease, box-shadow .16s ease; }
.tabs a:hover { background: var(--color-tab-active); }
.tabs a.is-cur, .tabs a[aria-current="page"] { color: var(--color-tab-ink); background: var(--color-tab-active); box-shadow: inset 0 -3px 0 var(--color-brand); }
@media (min-width: 900px) {
  .site-header .wrap { min-height: 72px; }
  .tabs ul { justify-content: flex-start; }
}

/* 最初の画面 */
.icon { width: 24px; height: 24px; flex: 0 0 24px; color: var(--color-brand); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -5px; }
.hero-min { position: relative; isolation: isolate; overflow: hidden; text-align: center; padding: var(--space-3) 0 var(--space-4);
  background: radial-gradient(circle at 8% 15%, rgba(166, 67, 34, .10) 0 76px, transparent 77px),
    radial-gradient(circle at 90% 10%, rgba(23, 106, 91, .10) 0 120px, transparent 121px),
    linear-gradient(145deg, #FFF9F1 0%, #F4FAF7 58%, #E7F2EE 100%); }
.hero-min::before { content: ""; position: absolute; inset: 0 0 0 55%; z-index: -1; pointer-events: none; opacity: .32; background-image: radial-gradient(rgba(23, 106, 91, .22) 1px, transparent 1.2px); background-size: 24px 24px; }
.hero-min .leaf { position: absolute; right: 12px; bottom: 10px; width: 64px; height: 64px; opacity: .18; z-index: -1; stroke-width: 1.4; }
.hero-min h1 { font-size: clamp(1.3125rem, 5.5vw, 2.875rem); margin: 0 0 4px; }
.hero-min .lead { font-size: 1.0625rem; margin: 0 0 var(--space-1); }
.paper-stack { position: relative; width: min(100%, 300px); height: 232px; margin: 0 auto var(--space-1); }
.paper-stack a { position: absolute; display: block; width: 142px; }
.paper-stack img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1.414; object-fit: cover; background: #fff; border: 1px solid #687F75; border-radius: 2px;
  box-shadow: 0 2px 5px rgba(25, 52, 59, .12), 0 18px 38px rgba(25, 52, 59, .18); }
.paper--problem { z-index: 3; left: 26%; top: 14px; transform: rotate(-1.8deg); }
.paper--answer { z-index: 2; right: 0; top: 2px; transform: rotate(4deg); }
.paper--record { z-index: 1; left: 0; top: 24px; transform: rotate(-6deg); }
.paper-label { position: absolute; z-index: 4; top: -6px; left: 0; right: 0; margin: 0 auto; width: max-content; padding: 0 10px; background: #fff; border: 2px solid var(--color-brand); border-radius: 999px; font-size: 1.0625rem; font-weight: 700; line-height: 1.5; color: var(--color-tab-ink); pointer-events: none; }
.price-panel { position: relative; max-width: 32.5rem; margin: 0 auto var(--space-2); padding: 12px 16px 12px 20px; text-align: left; background: var(--color-bg);
  border: 1px solid var(--color-border-strong); border-left: 6px solid var(--color-brand); border-radius: 18px; box-shadow: 0 10px 24px var(--color-shadow); }
.trial-badge { display: inline-flex; align-items: center; min-height: 36px; padding: 3px 12px; color: var(--color-warm-ink); background: var(--color-warm); border: 1px solid var(--color-warm-ink); border-radius: 999px; font-size: 1.0625rem; font-weight: 700; line-height: 1.5; }
.price-main { margin: 4px 0 0; line-height: 1.2; }
.price-number { font-size: clamp(2rem, 5vw, 3rem); font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }

.price-main small { white-space: nowrap; font-size: 1.0625rem; color: var(--color-ink-soft); margin-left: 6px; }
.price-note { margin: 4px 0 0; font-size: 1.0625rem; line-height: 1.6; color: var(--color-ink-soft); }
.hero-min .btn-row { gap: 12px; margin: 0; justify-items: stretch; }
.hero-min .btn { margin: 0 auto; }
@media (min-width: 900px) {
  .hero-min { text-align: left; padding: var(--space-6) 0 var(--space-6); }
  .hero-min .wrap { max-width: 72.5rem; padding: 0 24px; display: grid; grid-template-columns: 54fr 46fr; column-gap: 48px; align-items: center; }
  .hero-text { grid-column: 1; grid-row: 1; align-self: end; }
  .hero-min .hero-price { grid-column: 1; grid-row: 2; }
  .hero-min .btn-row { grid-column: 1; grid-row: 3; align-self: start; margin-top: var(--space-2); }
  .hero-min h1 { font-size: 2.25rem; }
  .hero-min .lead { font-size: 1.1875rem; }
  .hero-min .paper-stack { grid-column: 2; grid-row: 1 / span 3; width: min(100%, 480px); height: 470px; margin: 0 auto; }
  .paper-stack a { width: clamp(220px, 24vw, 300px); }
  .paper--problem { left: 8%; top: 38px; }
  .paper--answer { right: 2%; top: 20px; }
  .paper--record { left: 0; top: 66px; }
  .price-panel { margin-left: 0; }
  .hero-min .btn-row { grid-template-columns: repeat(2, minmax(0, 17rem)); }
  .hero-min .leaf { width: 72px; height: 72px; }
}

/* ボタン */
.btn { min-height: 58px; border-radius: 14px; box-shadow: 0 4px 0 #0E493F, 0 10px 20px rgba(23, 106, 91, .20); transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease; }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #0E493F, 0 5px 12px rgba(23, 106, 91, .18); }
.btn.sub { background: var(--color-bg); color: var(--color-brand); box-shadow: 0 3px 0 var(--color-border-strong); }
.btn.sub:hover { background: var(--color-brand-soft); }
@media (hover: hover) { .btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 #0E493F, 0 14px 26px rgba(23, 106, 91, .22); } .btn.sub:hover { box-shadow: 0 5px 0 var(--color-border-strong); } }

/* カード */
.cards li, .levels li, .stats li, .panel, .icons li, .flow-col, .steps.big li { border: 1px solid var(--color-border); border-radius: 16px; box-shadow: 0 8px 22px rgba(25, 52, 59, .09); transition: transform .16s ease, box-shadow .16s ease; }
@media (hover: hover) { .cards li:hover, .stats li:hover, .icons li:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(25, 52, 59, .12); } }
.flow-col.us { border: 2px solid var(--color-brand); }
.stats .num { color: var(--color-accent); }
.icons .ico { color: var(--color-brand); stroke-width: 1.8; }
.price-card { border: 1px solid var(--color-border-strong); border-left: 6px solid var(--color-brand); border-radius: 18px; box-shadow: 0 10px 24px var(--color-shadow); }
.price-card .trial { color: var(--color-warm-ink); }
.page-head { background: linear-gradient(145deg, #FFF9F1 0%, #F4FAF7 60%, #E7F2EE 100%); }

/* アコーディオン（＋／−） */
details { border: 1px solid var(--color-border-strong); border-radius: 14px; margin: 0 0 10px; }
summary { list-style: none; position: relative; min-height: 56px; padding: 12px 52px 12px 18px; font-size: 1.125rem; }
summary::-webkit-details-marker { display: none; }
summary::before, summary::after { content: ""; position: absolute; right: 18px; top: 50%; width: 16px; height: 2px; margin-top: -1px; background: var(--color-brand); border-radius: 2px; }
summary::after { transform: rotate(90deg); transition: transform .16s ease; }
details[open] > summary::after { transform: rotate(0); }
details .answer { padding: 16px 18px 20px; }
details .answer p { line-height: 1.8; }

/* 比較表 */
.table-wrap { border-radius: 16px; overflow: hidden; border: 1px solid var(--color-border-strong); }
table.compare th, table.compare td { border-color: var(--color-border-strong); padding: 14px 16px; }
table.compare thead th { background: #145A50; color: #fff; }
table.compare tbody th { background: var(--color-brand-soft); }
table.compare tbody tr:nth-child(even) td { background: #FFF9F1; }
table.compare thead th:last-child, table.compare td.us { background: var(--color-brand-soft); }
table.compare tbody tr:nth-child(even) td.us { background: var(--color-brand-soft); }
table.compare td.us { border-left: 4px solid var(--color-brand); }
table.compare thead th:last-child { background: #0E493F; }
.rec { display: block; font-size: 1.0625rem; font-weight: 700; color: var(--color-warm); }
@media (max-width: 899px) { .table-wrap { border: 0; border-radius: 0; overflow: visible; } table.compare tr { border-radius: 16px; } table.compare td.us { border-left: 0; } table.compare tbody th { background: #145A50; } }

/* 動き */
main { animation: page-enter .2s ease-out both; }
@keyframes page-enter { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.js .reveal { transition: opacity .28s ease-out, transform .28s ease-out; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1 !important; transform: none !important; }
}

/* ラベルは紙の外（重なりの上）に置く / タブの短い名前と「続きがある」しるし */
.paper-stack { height: 262px; }
.paper--record { top: 54px; }
.paper--answer { top: 32px; }
.paper--problem { top: 44px; }
.paper-label { right: auto; margin: 0; z-index: 5; top: 0; transform: translateX(-50%); }
.paper-label--record { left: 24%; }
.paper-label--problem { left: 50%; }
.paper-label--answer { left: 76%; }
@media (min-width: 900px) {
  .hero-min .paper-stack { height: 500px; }
  .hero-min .paper--record { top: 96px; }
  .hero-min .paper--answer { top: 50px; }
  .hero-min .paper--problem { top: 68px; }
  .paper-label--record { left: 27%; top: 36px; }
  .paper-label--problem { left: 42%; top: 0; }
  .paper-label--answer { left: 70%; top: 14px; }
}
.t-short { display: none; }
.tabs { position: relative; }
.tabs::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 36px; pointer-events: none; background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--color-bg)); }
@media (max-width: 640px) {
  .t-full { display: none; }
  .t-short { display: inline; }
  .tabs ul { padding: 0 4px; gap: 0; }
  .tabs a { padding: 0 6px; min-width: 48px; letter-spacing: 0; justify-content: center; }
}
@media (min-width: 900px) { .tabs::after { display: none; } }