/* このファイルには色を直接書かないこと(物販ボタンの各社指定色を除く)。
   色は build/gen_theme.py が生成する assets/theme.css の CSS変数から取る。
   そうしておくと site.config.json の theme を変えるだけで全体の色が変わる。

   =========================================================
   ラン活ノート ─ デザインシステム(2026.09 リニューアル)
   コンセプト: 「親子で選ぶ、上質な暮らしの雑誌」
   - アイボリーの地に、深緑・チャコール・キャメル・淡いセージ
   - 見出しは明朝、本文とナビはゴシック
   - 細い罫線と余白で情報を整理する。角丸と影は控えめ、強いグラデーションは使わない
   変数の対応: --moss=深緑 / --rust=濃いキャメル(ボタン地) / --sun=キャメル(装飾)
              --bg-alt=淡いセージ / --paper=カード地
   ========================================================= */

/* ---------- base ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } *{ transition: none !important; } }
body{
  margin:0; background: var(--bg); color: var(--ink);
  font-family: var(--font-sans); font-size: 16px; line-height: 1.9;
  letter-spacing: .02em; -webkit-font-smoothing: antialiased;
  text-underline-offset: .28em; overflow-wrap: anywhere; font-feature-settings: "palt" 0;
}
img{ max-width:100%; height:auto; display:block; }
a{ color: var(--moss); text-decoration: none; }
a:hover{ text-decoration: underline; }
:focus-visible{ outline: 2px solid var(--moss); outline-offset: 3px; border-radius: 2px; }
h1,h2,h3,h4{ font-family: var(--font-serif); font-weight: 600; color: var(--ink); line-height:1.5; letter-spacing:.03em; font-feature-settings: "palt" 1; }
ul,ol{ padding-left: 1.35em; }
li{ margin: .35em 0; }
table{ border-collapse: collapse; width:100%; }
.wrap{ max-width: 1200px; margin: 0 auto; padding: 0 40px; }
@media (max-width: 760px){ .wrap{ padding: 0 20px; } }
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.ic{ flex:none; }
.entry-num, .toc-n, .first-reads .idx, .steps li::before, .article-main > .prose > h2::before{ font-variant-numeric: lining-nums; }
.skip-link{
  position:absolute; left:12px; top:-60px; z-index:100; background: var(--moss); color:#fff;
  padding: 10px 16px; border-radius: var(--radius); font-weight:700; font-size:.9rem;
}
.skip-link:focus{ top: 12px; }

/* ---------- buttons / links ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height: 48px; padding: 12px 24px; border-radius: var(--radius);
  font-family: var(--font-sans); font-weight:700; font-size:.92rem; letter-spacing:.08em;
  border:1px solid transparent; white-space:nowrap; text-decoration:none; transition: background .15s, color .15s;
}
.btn:hover{ text-decoration:none; }
.btn .ic{ transition: transform .15s; }
.btn:hover .ic{ transform: translateX(3px); }
.btn-lg{ min-height: 52px; padding: 14px 28px; }
.btn-primary{ background: var(--moss); color:#fff; }
.btn-primary:hover{ background: var(--moss-dark); color:#fff; }
.btn-camel{ background: var(--rust); color:#fff; }
.btn-camel:hover{ background: var(--rust-dark); color:#fff; }
.btn-outline{ background: transparent; color: var(--moss); border-color: var(--moss); }
.btn-outline:hover{ background: var(--moss); color:#fff; }
.text-link, .more-link{
  display:inline-flex; align-items:center; gap:8px; min-height:44px;
  color: var(--ink); font-weight:500; font-size:.92rem; letter-spacing:.06em;
  text-decoration: underline; text-decoration-color: var(--line-strong); text-decoration-thickness:1px;
}
.text-link:hover, .more-link:hover{ color: var(--moss); text-decoration-color: var(--moss); }
.more-link{ font-size:.86rem; }
.read-more{
  display:inline-flex; align-items:center; gap:6px; margin-top: 10px;
  font-family: var(--font-sans); font-size:.72rem; font-weight:700; letter-spacing:.14em; color: var(--rust);
  border-bottom:1px solid var(--sun); padding-bottom: 2px;
}
.pr-inline, .pr-badge{
  display:inline-block; font-size:.62rem; font-weight:700; letter-spacing:.08em; line-height:1.6;
  color: var(--ink-faint); border:1px solid var(--line-strong); border-radius: 3px; padding: 0 6px;
  margin-left: 8px; vertical-align: middle; background: var(--paper); white-space: nowrap; flex: none;
}

/* =================== Header / Nav =================== */
.site-header{
  position: sticky; top:0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: saturate(1.2) blur(6px); backdrop-filter: saturate(1.2) blur(6px);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap: 24px; min-height: 76px; }
.logo{ display:inline-flex; align-items:center; gap: 12px; color: var(--moss); text-decoration:none; flex:none; }
.logo:hover{ text-decoration:none; }
.logo-mark{ display:inline-flex; color: var(--moss); }
.logo-text{ display:flex; flex-direction:column; line-height:1.1; }
.logo-name{ font-family: var(--font-serif); font-weight:600; font-size: 1.62rem; letter-spacing:.1em; color: var(--moss); }
.logo small{ font-family: var(--font-sans); font-size:.56rem; letter-spacing:.32em; color: var(--ink-soft); margin-top: 5px; padding-left: 2px; }
.main-nav{ list-style:none; margin:0; padding:0; display:flex; align-items:center; gap: 2px; }
.main-nav li{ margin:0; }
.main-nav a{
  display:flex; align-items:center; min-height:44px; padding: 6px 12px;
  color: var(--ink); font-size:.86rem; font-weight:500; letter-spacing:.06em; white-space:nowrap;
  border-bottom: 1px solid transparent;
}
.main-nav a:hover{ color: var(--moss); text-decoration:none; border-bottom-color: var(--sun); }
@media (max-width: 1080px){ .main-nav a{ padding: 6px 8px; font-size:.82rem; } }
/* スマホ: ナビは2段目で横スクロール。右端のフェードで「続きがある」ことを示す */
@media (max-width: 900px){
  .header-inner{ flex-wrap:wrap; min-height:0; padding-top: 12px; gap: 0; }
  .logo-name{ font-size: 1.38rem; }
  .logo-mark .ic{ width:30px; height:30px; }
  .nav-scroller{ order:3; width:100%; position:relative; margin-top: 8px; border-top:1px solid var(--line); }
  .nav-scroller::after{
    content:""; position:absolute; top:0; right:0; bottom:0; width:40px; pointer-events:none;
    background: linear-gradient(to right, transparent, var(--bg) 80%);
  }
  .main-nav{ overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding: 2px 32px 2px 0; }
  .main-nav::-webkit-scrollbar{ display:none; }
  .main-nav a{ padding: 6px 10px; }
  .main-nav li:first-child a{ padding-left: 0; }
}

/* =================== Breadcrumb =================== */
.breadcrumb{
  font-size: .76rem; color: var(--ink-faint); letter-spacing:.06em;
  padding-top: 18px; padding-bottom: 6px; display:flex; flex-wrap:wrap; gap:.3em .7em; align-items:center;
}
.breadcrumb a{ color: var(--ink-soft); }
.breadcrumb a:hover{ color: var(--moss); }
.breadcrumb .sep{ color: var(--line-strong); }
.breadcrumb [aria-current]{ color: var(--ink-faint); }

/* =================== Section scaffolding =================== */
.section{ padding-top: 88px; padding-bottom: 0; }
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap: 16px 32px; flex-wrap:wrap; margin-bottom: 28px; }
.section-head h2{ font-size: clamp(1.5rem, 2.6vw, 2.05rem); margin:0; font-weight:600; }
.section-head .desc, .section-lede{ margin:0; color: var(--ink-soft); font-size:.9rem; line-height:1.9; }
.section-head-split{ align-items:flex-end; }
.section-head-split .section-lede{ max-width: 34em; }
.sec-eyebrow{
  margin: 0 0 6px; font-family: var(--font-sans); font-size:.7rem; font-weight:500;
  letter-spacing:.32em; color: var(--ink-soft);
}
@media (max-width: 760px){
  .section{ padding-top: 64px; }
  .section-head{ margin-bottom: 20px; }
}

/* =================== Hero (TOP) =================== */
.hero{ background: var(--bg); border-bottom: 1px solid var(--line); overflow:hidden; }
.hero-grid{
  display:grid; align-items:center;
  /* 左余白 | コピー | 写真(右端まで) */
  grid-template-columns: minmax(40px, 1fr) minmax(0, 540px) minmax(0, 660px) minmax(0, 1fr);
}
.hero-copy{ grid-column: 2; padding: 40px 32px 40px 0; position: relative; z-index: 1; }
/* ファーストビューを圧迫しないよう、ヒーローの高さは約360pxに抑える(下のトラストバーと「START HERE」まで1画面に入る) */
.hero-photo{ grid-column: 3 / 5; margin:0; position:relative; align-self: stretch; min-height: 340px; max-height: 400px; }
.hero-photo img{
  width:100%; height:100%; object-fit: cover; object-position: 40% 50%;
  /* 左端だけ地色になじませる(写真の境界を柔らかく) */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16%);
          mask-image: linear-gradient(to right, transparent 0, #000 16%);
}
.hero-photo figcaption{
  position:absolute; right: 14px; bottom: 10px; font-size:.66rem; color:#fff; letter-spacing:.06em;
  text-shadow: 0 1px 2px rgba(0,0,0,.45);
}
.hero-eyebrow{ margin: 0 0 12px; font-size: .88rem; color: var(--ink); letter-spacing:.1em; }
.hero-title{
  margin: 0 0 16px; font-size: clamp(1.9rem, 3.4vw, 2.7rem); line-height: 1.4;
  letter-spacing: .06em; font-weight:600; font-feature-settings: "palt" 1;
}
.hero-lede{ margin: 0 0 24px; font-size: .92rem; line-height: 1.95; color: var(--ink); }
.hero-actions{ display:flex; align-items:center; gap: 16px 28px; flex-wrap:wrap; }
@media (max-width: 900px){
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-copy{ grid-column: 1; padding: 22px 20px 20px; }
  .hero-photo{ grid-column: 1; min-height: 0; max-height: none; aspect-ratio: 2 / 1; order: 2; }
  .hero-lede br{ display:none; }
  .hero-photo img{ -webkit-mask-image:none; mask-image:none; }
  .hero-eyebrow{ font-size:.8rem; margin-bottom: 8px; }
  .hero-title{ font-size: clamp(1.6rem, 6.8vw, 2.1rem); margin-bottom: 10px; }
  .hero-lede{ margin-bottom: 16px; font-size:.86rem; line-height:1.85; }
  .hero-actions{ gap: 4px 20px; }
  .hero-actions .btn{ width: 100%; min-height: 48px; }
  .hero-actions .text-link{ min-height: 44px; }
}

/* 3つの約束(トラストバー) */
.trust-bar{ background: var(--bg-alt); border-bottom:1px solid var(--line); }
.trust-list{ list-style:none; margin: 0 auto; display:flex; justify-content:center; align-items:center; padding-top: 16px; padding-bottom: 16px; }
.trust-list li{
  margin:0; display:flex; align-items:center; gap: 12px; padding: 2px 48px;
  font-size:.86rem; letter-spacing:.08em; color: var(--ink);
}
.trust-list li + li{ border-left: 1px solid var(--line-strong); }
.trust-list .ic{ color: var(--moss); }
@media (max-width: 760px){
  .trust-list{ flex-wrap: wrap; justify-content:flex-start; gap: 6px 16px; padding-top: 12px; padding-bottom: 12px; }
  .trust-list li{ padding: 0; gap: 6px; font-size:.74rem; letter-spacing:.04em; }
  .trust-list li + li{ border-left:none; }
  .trust-list .ic{ width:18px; height:18px; }
}

/* 3つの入口(トラストバー直後なので上の余白は詰める) */
.section-start{ padding-top: 56px; }
@media (max-width: 760px){ .section-start{ padding-top: 40px; } }
.entry-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.entry-card{
  display:flex; flex-direction:column; gap: 8px; padding: 26px 26px 22px;
  background: var(--bg-alt); border:1px solid transparent; border-radius: var(--radius);
  color: var(--ink); text-decoration:none; transition: border-color .15s, background .15s;
}
.entry-card:hover{ text-decoration:none; border-color: var(--moss); background: var(--paper); }
.entry-top{ display:flex; align-items:center; gap: 22px; color: var(--moss); }
.entry-num{ font-family: var(--font-latin); font-style: italic; font-weight:500; font-size: 2.6rem; line-height:1; color: var(--moss); font-variant-numeric: lining-nums; }
.entry-q{ font-family: var(--font-serif); font-weight:600; font-size: 1.45rem; letter-spacing:.04em; margin-top: 6px; font-feature-settings: "palt" 1; }
.entry-sub{ display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:.9rem; color: var(--ink-soft); }
.entry-sub .ic{ color: var(--ink); transition: transform .15s; }
.entry-card:hover .entry-sub .ic{ transform: translateX(3px); }
@media (max-width: 900px){
  .entry-grid{ grid-template-columns: 1fr; gap: 10px; }
  .entry-card{ padding: 18px 20px; display:grid; grid-template-columns: auto 1fr; column-gap: 16px; row-gap: 2px; }
  .entry-top{ grid-row: 1 / 3; gap: 10px; }
  .entry-top .ic{ display:none; }
  .entry-num{ font-size: 2.1rem; }
  .entry-q{ font-size: 1.2rem; margin:0; }
}

/* 写真つきの読みもの */
.feature-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.feature-card{ min-width:0; }
.feature-link{ display:flex; flex-direction:column; color: var(--ink); text-decoration:none; height:100%; }
.feature-link:hover{ text-decoration:none; }
.feature-img{ display:block; aspect-ratio: 4 / 3; overflow:hidden; border-radius: 2px; background: var(--bg-alt); }
.feature-img img{ width:100%; height:100%; object-fit:cover; transition: transform .4s ease; }
.feature-link:hover .feature-img img{ transform: scale(1.03); }
.feature-cat{ margin-top: 14px; font-size:.74rem; letter-spacing:.08em; color: var(--rust); }
.feature-title{ margin: 4px 0 6px; font-size: 1.28rem; line-height:1.55; }
.feature-link:hover .feature-title{ color: var(--moss); }
.feature-lede{
  font-size:.86rem; color: var(--ink-soft); line-height:1.8;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.feature-link .read-more{ align-self:flex-start; margin-top: auto; padding-top: 12px; border-bottom:none; }
.feature-link .read-more{ text-decoration: underline; text-decoration-color: var(--sun); text-underline-offset: .5em; }
@media (max-width: 900px){
  .feature-grid{ grid-template-columns: 1fr; gap: 28px; }
  .feature-img{ aspect-ratio: 16 / 10; }
}
/* 旧ヒーローの「まずはここから読む」 */
.first-reads{ margin-top: 40px; border-top:1px solid var(--line); padding-top: 22px; }
.first-reads-h{ margin:0 0 8px; font-size: 1.05rem; display:flex; flex-wrap:wrap; align-items:baseline; gap: 4px 16px; }
.first-reads-h span{ font-family: var(--font-sans); font-weight:400; font-size:.8rem; color: var(--ink-faint); letter-spacing:.04em; }
.first-reads ol{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns: repeat(2, 1fr); column-gap: 40px; }
.first-reads li{ margin:0; border-bottom:1px solid var(--line); }
.first-reads a{ display:flex; align-items:center; gap: 14px; min-height: 52px; padding: 10px 0; color: var(--ink); font-size:.92rem; }
.first-reads a:hover{ color: var(--moss); text-decoration:none; }
.first-reads .idx{ font-family: var(--font-latin); font-style:italic; font-size:1.25rem; color: var(--moss); flex:none; width: 1.8em; }
.first-reads .t{ flex:1; line-height:1.6; }
@media (max-width: 760px){ .first-reads ol{ grid-template-columns: 1fr; } }

/* ラン活の流れ */
.flow-band{ margin-top: 88px; background: var(--bg-alt); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.flow-inner{ display:flex; align-items:center; justify-content:space-between; gap: 24px 28px; padding-top: 40px; padding-bottom: 40px; }
.flow-copy{ flex: 0 1 auto; padding-right: 32px; border-right:1px solid var(--line-strong); }
.flow-copy h2{ white-space: nowrap; }
.flow-copy h2{ margin:0 0 6px; font-size: clamp(1.35rem, 2.1vw, 1.6rem); }
.flow-copy p{ margin:0; font-size:.9rem; color: var(--ink-soft); }
.flow-steps{ list-style:none; margin:0; padding:0; display:flex; align-items:center; gap: 8px; flex:none; }
.flow-inner > .btn{ flex:none; padding-left: 20px; padding-right: 20px; }
.flow-steps li{ margin:0; }
.flow-step a{
  width: 110px; height: 110px; border-radius: 50%; background: var(--paper); border:1px solid var(--line);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap: 2px; text-align:center;
  color: var(--ink); text-decoration:none; transition: border-color .15s;
}
.flow-step a:hover{ border-color: var(--moss); text-decoration:none; }
.flow-step .ic{ color: var(--moss); margin-bottom: 4px; }
.flow-t{ font-size:.84rem; font-weight:700; letter-spacing:.04em; line-height:1.4; }
.flow-s{ font-size:.6rem; color: var(--ink-soft); line-height:1.4; letter-spacing:0; padding: 0 8px; }
.flow-arrow{ color: var(--ink-soft); }
@media (max-width: 1180px){
  .flow-inner{ flex-wrap:wrap; justify-content:flex-start; }
  .flow-copy{ flex-basis: 100%; border-right:none; padding-right:0; }
}
@media (max-width: 760px){
  .flow-band{ margin-top: 64px; }
  .flow-copy h2{ white-space: normal; }
  .flow-steps{ width:100%; flex-direction:column; align-items:stretch; gap: 8px; }
  .flow-step a{ width:auto; height:auto; min-height: 60px; border-radius: var(--radius); flex-direction:row; justify-content:flex-start; gap: 12px; padding: 12px 16px; text-align:left; }
  .flow-step .ic{ margin:0; }
  .flow-s{ font-size:.74rem; padding:0; margin-left:auto; }
  .flow-arrow{ display:none; }
  .flow-inner > .btn{ width:100%; }
}

/* 写真で選ぶランドセル(商品列) */
.home-picks .top-picks{ margin: 0 0 18px; }
.picks-foot{ margin: 4px 0 0; text-align:right; }

/* トップの本文(このサイトについて) */
.intro-grid{ display:grid; grid-template-columns: 320px minmax(0, 1fr); gap: 64px; align-items:start; }
.intro-head{ position: sticky; top: 108px; }
.intro-head h2{ font-size: clamp(1.45rem, 2.4vw, 1.9rem); margin: 0 0 14px; }
.intro-lede{ font-size:.9rem; color: var(--ink-soft); margin:0; }
.prose-intro{ max-width: 760px; }
@media (max-width: 900px){
  .intro-grid{ grid-template-columns: 1fr; gap: 24px; }
  .intro-head{ position: static; }
}

/* カテゴリ */
.cluster-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cluster-card{
  display:flex; flex-direction:column; background: var(--paper); border:1px solid var(--line);
  border-radius: var(--radius); overflow:hidden; color: var(--ink); text-decoration:none; transition: border-color .15s;
}
.cluster-card:hover{ border-color: var(--moss); text-decoration:none; }
.cluster-img{ display:block; aspect-ratio: 16 / 9; overflow:hidden; background: var(--bg-alt); }
.cluster-img img{ width:100%; height:100%; object-fit:cover; }
.cluster-body{ display:flex; flex-direction:column; gap: 6px; padding: 18px 20px 12px; flex:1; }
.cluster-title{ font-family: var(--font-serif); font-weight:600; font-size: 1.15rem; letter-spacing:.05em; }
.cluster-desc{ font-size:.84rem; line-height:1.8; color: var(--ink-soft); flex:1; }
.cluster-body .more-link{ align-self:flex-start; }
@media (max-width: 980px){ .cluster-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px){
  .cluster-grid{ grid-template-columns: 1fr; gap: 12px; }
  .cluster-card{ flex-direction:row; }
  .cluster-img{ flex: 0 0 34%; aspect-ratio: auto; }
  .cluster-body{ padding: 14px 16px 8px; }
  .cluster-desc{ font-size:.8rem; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
}

/* 記事一覧(カテゴリごと) */
.section-articles{ padding-bottom: 8px; }
.cluster-block{ margin-bottom: 44px; }
.cluster-block-head{
  font-size: 1.15rem; margin: 0; padding-bottom: 12px; border-bottom: 1px solid var(--moss);
  display:flex; align-items:baseline; gap:12px;
}
.cluster-block-head .count{ font-size:.74rem; color: var(--ink-faint); font-weight:400; font-family: var(--font-sans); }
.article-list{ display:flex; flex-direction:column; }
.article-row{ display:flex; gap:18px; align-items:flex-start; padding: 18px 0; border-bottom: 1px solid var(--line); }
.article-row h3, .article-row h4{ font-size: 1.05rem; margin: 0 0 4px; font-weight:600; }
.article-row h3 a, .article-row h4 a{ color: var(--ink); }
.article-row h3 a:hover, .article-row h4 a:hover{ color: var(--moss); }
.article-row p{ font-size:.85rem; color: var(--ink-soft); margin:0; line-height:1.8; }
.article-row .meta{ font-size:.72rem; color: var(--ink-faint); margin-top:6px; }
.tag{
  display:inline-block; font-size:.7rem; letter-spacing:.08em; color: var(--rust);
  margin-bottom: 4px; padding:0; background:none;
}
.more-articles{ margin-top: 2px; }
.more-articles > summary{
  cursor:pointer; list-style:none; display:flex; align-items:center; gap:10px; min-height:48px;
  font-size:.86rem; font-weight:700; color: var(--moss); padding: 8px 0;
}
.more-articles > summary::-webkit-details-marker{ display:none; }
.more-articles > summary::before{
  content:"+"; display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px;
  border-radius:50%; border:1px solid currentColor; font-size:.9rem; line-height:1; flex:none;
}
.more-articles[open] > summary::before{ content:"−"; }
.more-articles > summary:hover{ text-decoration: underline; }

/* タグ */
.tag-cloud{ display:flex; flex-wrap:wrap; gap:10px; }
.tag-cloud a{
  display:inline-flex; align-items:center; gap:6px; min-height: 44px; font-size:.86rem; color: var(--ink);
  background: var(--paper); border:1px solid var(--line); border-radius: 999px; padding: 8px 18px; text-decoration:none;
}
.tag-cloud a:hover{ border-color: var(--moss); color: var(--moss); }
.tag-cloud a .count{ color: var(--ink-faint); font-size:.78rem; }
.tag-hero{ padding-top: 48px; padding-bottom: 16px; }
.tag-hero .eyebrow{ display:inline-block; font-size:.72rem; letter-spacing:.24em; color: var(--rust); margin-bottom: 10px; }
.tag-hero h1{ font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 0 0 10px; }
.tag-hero p{ color: var(--ink-soft); max-width: 42rem; }

/* =================== Article layout =================== */
.article-shell{ padding-top: 8px; padding-bottom: 16px; }
/* 記事ページ: 左=タイトル+本文 / 右=目次(追従)。スマホは DOM 順(タイトル→目次→本文) */
.article-layout{
  display:grid; grid-template-columns: minmax(0, 1fr) 270px; column-gap: 56px;
  grid-template-areas: "head side" "main side"; align-items:start;
}
.article-layout > .article-head{ grid-area: head; }
.article-layout > .article-main{ grid-area: main; min-width:0; }
.article-layout > .article-side{ grid-area: side; }
@media (max-width: 980px){
  .article-layout{ display:block; }
}
/* 固定ページ(運営者情報など)は1カラム */
.article-grid{ display:block; max-width: 800px; }
.article-grid > *{ min-width:0; }

.article-head{ padding-top: 14px; margin-bottom: 36px; min-width:0; }
.article-cat{ margin:0 0 10px; font-size:.78rem; letter-spacing:.08em; color: var(--ink-soft); display:flex; align-items:center; gap: 12px; }
.article-cat a{ color: var(--ink-soft); }
.article-cat .sep{ color: var(--line-strong); }
.article-cat .en{ font-size:.66rem; letter-spacing:.24em; color: var(--rust); }
.article-head h1{
  font-size: clamp(1.7rem, 3.6vw, 2.55rem); line-height:1.45; margin: 0 0 16px; letter-spacing:.05em;
  font-feature-settings: "palt" 1;
}
.article-lede{ font-size: 1rem; line-height:1.95; color: var(--ink); margin: 0 0 16px; }
.article-meta{
  display:flex; justify-content:space-between; align-items:center; gap: 6px 20px; flex-wrap:wrap;
  font-size:.76rem; color: var(--ink-soft); letter-spacing:.04em;
}
.meta-items{ display:flex; flex-wrap:wrap; gap: 4px 12px; }
.meta-items .sep{ color: var(--line-strong); }
.ad-note{ color: var(--ink-soft); }
.tag-chip-row{ display:flex; flex-wrap:wrap; gap:6px 8px; margin: 14px 0 0; }
.tag-chip{
  display:inline-flex; align-items:center; min-height: 32px; font-size:.74rem; color: var(--ink-soft);
  background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 2px 12px; text-decoration:none;
}
.tag-chip:hover{ border-color: var(--moss); color: var(--moss); text-decoration:none; }
.eyecatch{ margin: 24px 0 0; }
.eyecatch img{ width:100%; aspect-ratio: 21 / 9; object-fit: cover; border-radius: 2px; background: var(--bg-alt); }
.eyecatch figcaption{ margin-top: 6px; text-align:right; font-size:.68rem; color: var(--ink-faint); }
@media (max-width: 760px){
  .article-head{ margin-bottom: 24px; }
  .eyecatch img{ aspect-ratio: 16 / 9; }
  .tag-chip-row{ flex-wrap: nowrap; overflow-x:auto; scrollbar-width:none; padding-bottom: 2px; }
  .tag-chip-row::-webkit-scrollbar{ display:none; }
  .tag-chip{ flex:none; }
}

/* 右カラム: 目次 + 導線をひとまとまりで追従 */
.article-side{ position: sticky; top: 100px; display:flex; flex-direction:column; gap: 20px; padding-top: 14px; }
.toc-box{ border-top: 1px solid var(--line-strong); padding-top: 18px; }
.toc-details > summary{ list-style:none; }
.toc-details > summary::-webkit-details-marker{ display:none; }
.toc-summary{ display:flex; flex-direction:column; gap: 2px; margin-bottom: 14px; }
.toc-eyebrow{ font-size:.64rem; letter-spacing:.28em; color: var(--ink-soft); }
.toc-title{ font-family: var(--font-serif); font-weight:600; font-size: 1.12rem; color: var(--ink); letter-spacing:.06em; }
.toc-toggle{ display:none; }
.toc-list{ list-style:none; margin:0; padding:0; }
.toc-list li{ margin:0; border-bottom:1px solid var(--line); }
.toc-list a{
  display:flex; align-items:baseline; gap: 14px; padding: 10px 0 10px 12px; min-height: 44px;
  color: var(--ink); font-size:.86rem; line-height:1.6; border-left: 2px solid transparent;
}
.toc-list a:hover{ color: var(--moss); text-decoration:none; }
.toc-list a.is-current{ border-left-color: var(--moss); color: var(--moss); }
.toc-n{ font-family: var(--font-latin); font-style:italic; font-size: 1.05rem; color: var(--moss); flex:none; width: 1.4em; }
@media (min-width: 981px){
  /* 目次が長い記事でも導線まで見えるよう、PCの目次は詰めて表示し、収まらない分は右カラム内でスクロール */
  .article-side{ max-height: calc(100vh - 116px); overflow-y:auto; scrollbar-width: thin; }
  .toc-summary{ pointer-events:none; cursor: default; }
  .toc-list a{ min-height: 0; padding-top: 7px; padding-bottom: 7px; font-size:.82rem; }
  .article-side .sidebar-cta-img{ aspect-ratio: 16 / 7; }
}
@media (min-width: 981px) and (max-height: 960px){ .side-about{ display:none; } }
@media (min-width: 981px) and (max-height: 820px){ .article-side .sidebar-cta-img{ display:none; } }
/* スマホ: 目次は本文の前。開閉ボタンにする */
@media (max-width: 980px){
  .article-side{ position: static; padding-top: 0; margin-bottom: 32px; gap: 0; }
  .toc-box{ border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 0; background: var(--paper); }
  .toc-summary{
    cursor:pointer; margin:0; padding: 12px 16px; min-height: 56px; display:grid;
    grid-template-columns: 1fr auto; align-items:center;
  }
  .toc-eyebrow{ grid-column:1; }
  .toc-title{ grid-column:1; font-size: 1rem; }
  .toc-toggle{
    display:block; grid-column:2; grid-row: 1 / 3; width: 28px; height: 28px; border-radius:50%;
    border:1px solid var(--line-strong); position:relative;
  }
  .toc-toggle::before, .toc-toggle::after{
    content:""; position:absolute; left:50%; top:50%; width:10px; height:1.5px; background: var(--moss);
    transform: translate(-50%, -50%);
  }
  .toc-toggle::after{ transform: translate(-50%, -50%) rotate(90deg); transition: transform .15s; }
  .toc-details[open] .toc-toggle::after{ transform: translate(-50%, -50%) rotate(0deg); }
  .toc-list{ padding: 0 16px 8px; border-top: 1px solid var(--line); }
  .toc-list li:last-child{ border-bottom:none; }
  .toc-list a{ padding-left: 0; border-left:none; }
}

/* サイドバーの導線(PCのみ) */
.sidebar-cta{ background: var(--paper); border:1px solid var(--line); border-radius: var(--radius); padding: 16px 16px 18px; }
.sidebar-cta-img{ margin: 0 0 14px; aspect-ratio: 16 / 10; overflow:hidden; border-radius: 2px; background: var(--bg-alt); }
.sidebar-cta-img img{ width:100%; height:100%; object-fit:cover; }
.sidebar-cta-head{ margin:0 0 4px; font-family: var(--font-serif); font-size: 1.12rem; font-weight:600; letter-spacing:.05em; }
.sidebar-cta-text{ margin:0 0 14px; font-size:.78rem; line-height:1.8; color: var(--ink-soft); }
.sidebar-cta-btn{
  display:flex; align-items:center; justify-content:space-between; gap:8px; min-height: 48px; padding: 10px 16px;
  background: var(--moss); color:#fff; border-radius: var(--radius); font-size:.84rem; font-weight:700; letter-spacing:.06em;
}
.sidebar-cta-btn:hover{ background: var(--moss-dark); color:#fff; text-decoration:none; }
.sidebar-cta-sub{
  display:flex; align-items:center; justify-content:space-between; gap: 8px; min-height:44px; margin-top: 4px;
  font-size:.8rem; color: var(--ink); border-bottom: 1px solid var(--line);
}
.sidebar-cta-sub:hover{ color: var(--moss); text-decoration:none; }
.side-about{ border-top:1px solid var(--line-strong); padding-top: 16px; }
.side-about-head{ margin:0 0 6px; font-family: var(--font-serif); font-weight:600; font-size:.95rem; }
.side-about p{ margin:0; font-size:.76rem; line-height:1.85; color: var(--ink-soft); }
.side-about a{ color: var(--moss); text-decoration: underline; margin-left: .3em; }
@media (max-width: 980px){ .sidebar-cta, .side-about{ display:none; } }

/* =================== Prose (本文) =================== */
.prose{ max-width: 760px; font-size: 1.0625rem; line-height: 2; }
.prose > :first-child{ margin-top: 0; }
.prose h2{
  font-size: clamp(1.3rem, 2.4vw, 1.62rem); line-height:1.55; letter-spacing:.05em;
  margin: 2.8em 0 1em; padding-top: 1.1em; border-top: 1px solid var(--line);
  scroll-margin-top: 110px;
}
.prose h2:first-child{ margin-top: 0; }
/* 記事本文のh2は「01 | 見出し」の番号つき(目次の番号と対応) */
.article-main > .prose{ counter-reset: sec; }
.article-main > .prose:not(#faq) > h2{
  counter-increment: sec; display:grid; grid-template-columns: auto 1fr; column-gap: 20px; align-items: baseline;
}
.article-main > .prose:not(#faq) > h2::before{
  content: counter(sec, decimal-leading-zero);
  font-family: var(--font-latin); font-style:italic; font-weight:500; font-size: 1.6em; line-height:1;
  color: var(--moss); padding-right: 18px; border-right: 1px solid var(--line-strong);
}
.prose h3{
  font-size: 1.18rem; margin: 2em 0 .7em; scroll-margin-top: 110px; letter-spacing:.04em;
  padding-left: 14px; border-left: 2px solid var(--sun);
}
.prose h4{ font-size: 1.02rem; margin: 1.6em 0 .5em; font-family: var(--font-sans); font-weight:700; }
.prose p{ margin: 0 0 1.6em; }
.prose ul, .prose ol{ margin: 0 0 1.6em; padding-left: 1.4em; }
.prose li{ margin: .45em 0; padding-left: .2em; }
.prose ul > li::marker{ color: var(--sun); }
.prose ol > li::marker{ color: var(--moss); font-weight:700; }
.prose strong{
  font-weight: 700; color: var(--ink);
  background: linear-gradient(to bottom, transparent 66%, var(--marker) 66%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.prose a{
  color: var(--moss); text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--moss) 45%, transparent); text-decoration-thickness: 1px;
}
.prose a:hover{ text-decoration-color: var(--moss); }
.prose blockquote{
  margin: 1.8em 0; padding: 4px 0 4px 20px; border-left: 2px solid var(--line-strong); color: var(--ink-soft);
}
.prose hr{ border:none; border-top:1px solid var(--line); margin: 2.4em 0; }
@media (max-width: 760px){
  .prose{ font-size: 1rem; line-height: 1.95; }
  .article-main > .prose:not(#faq) > h2{ column-gap: 14px; }
  .article-main > .prose:not(#faq) > h2::before{ padding-right: 12px; }
}

/* 表: 表の領域内だけ横スクロール(ページ全体は横スクロールさせない) */
.table-scroll{
  margin: 1.8em 0; overflow-x:auto; -webkit-overflow-scrolling:touch;
  border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong);
}
.prose table{ margin:0; font-size: .88rem; line-height:1.75; background: transparent; }
.prose th, .prose td{ border-bottom: 1px solid var(--line); padding: 11px 14px; text-align:left; vertical-align: top; min-width: 7.5em; }
.prose th + th, .prose td + td{ border-left: 1px solid var(--line); }
.prose thead th{ background: var(--bg-alt); color: var(--ink); font-weight:700; font-size:.82rem; letter-spacing:.06em; white-space: nowrap; }
.prose tbody tr:last-child td{ border-bottom:none; }
.prose tbody td:first-child{ font-weight:500; }
@media (max-width: 760px){
  .prose table{ font-size:.84rem; min-width: 560px; }
  .prose th, .prose td{ padding: 9px 12px; }
}

/* 要点欄「まず、ここだけ押さえよう」(冒頭の「先に結論」) */
.keypoint{
  position:relative; margin: 2em 0 2.4em; padding: 24px 28px 22px;
  background: var(--bg-alt); border-radius: var(--radius); overflow:hidden;
}
.keypoint-eyebrow{
  display:flex; align-items:center; gap: 10px; margin: 0 0 6px !important;
  font-size:.8rem; letter-spacing:.1em; color: var(--ink-soft);
}
.keypoint-eyebrow .ic{ color: var(--moss); }
.keypoint-ttl{ margin: 0 0 6px !important; font-family: var(--font-serif); font-weight:600; font-size: 1.06rem; color: var(--moss); letter-spacing:.06em; }
.keypoint-body{ position:relative; z-index:1; }
.keypoint-body p{ margin: 0 0 .8em; }
.keypoint-body > :last-child{ margin-bottom: 0; }
.keypoint-body strong{ background: linear-gradient(to bottom, transparent 66%, rgba(255,255,255,.75) 66%); }
.keypoint-leaf{ position:absolute; right: 18px; bottom: 10px; color: var(--moss); opacity: .12; pointer-events:none; }
@media (max-width: 760px){ .keypoint{ padding: 20px 18px 18px; } }

/* callout */
.callout{
  margin: 1.8em 0; padding: 18px 20px; display:flex; gap:14px; font-size: .95rem; line-height:1.9;
  background: var(--paper); border:1px solid var(--line); border-left-width: 3px; border-radius: var(--radius);
}
.callout .ic{
  flex:none; width:24px; height:24px; margin-top: 3px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:.74rem; font-weight:800; color:#fff;
}
.callout .body{ min-width:0; }
.callout .body > :last-child{ margin-bottom:0; }
.callout .body p{ margin: 0 0 .8em; }
.callout .ttl{ font-weight:700; margin:0 0 4px !important; font-size:.94rem; }
.callout.good{ border-left-color: var(--good); }
.callout.good .ic{ background: var(--good); }
.callout.good .ttl{ color: var(--good); }
.callout.bad{ border-left-color: var(--bad); background: var(--bad-pale); border-color: var(--bad-pale); border-left-color: var(--bad); }
.callout.bad .ic{ background: var(--bad); }
.callout.bad .ttl{ color: var(--bad); }
.callout.note{ border-left-color: var(--sun); background: var(--sun-pale); border-color: var(--sun-pale); border-left-color: var(--sun); }
.callout.note .ic{ background: var(--rust); }
.callout.note .ttl{ color: var(--rust-dark); }

/* 数値ブロック :::stats */
.stats-block{ display:grid; grid-template-columns: repeat(3, 1fr); margin: 2em 0; border-top:1px solid var(--line-strong); border-bottom:1px solid var(--line-strong); }
.stats-block .st{ padding: 18px 20px; }
.stats-block .st + .st{ border-left:1px solid var(--line); }
.stats-block .st-label{ font-size:.76rem; font-weight:700; color: var(--ink-soft); line-height:1.6; }
.stats-block .st-value{ font-family: var(--font-serif); font-size: 2rem; font-weight:600; color: var(--moss); line-height:1.35; }
.stats-block .st-value .u{ font-size:.9rem; margin-left:.12em; }
.stats-block .st-note{ font-size:.7rem; color: var(--ink-faint); line-height:1.65; }
@media (max-width: 760px){
  .stats-block{ grid-template-columns: 1fr; }
  .stats-block .st + .st{ border-left:none; border-top:1px solid var(--line); }
}

/* 比較早見表(商品画像・購入先つき)。PC=表 / スマホ=1行1カード */
.cmp-wrap{ margin: 2em 0; max-width: 760px; }
.cmp{ border-top:1px solid var(--line-strong); border-bottom:1px solid var(--line-strong); background: var(--paper); }
.cmp-head, .cmp-row{ display:grid; grid-template-columns: .95fr .8fr .95fr .8fr 2.1fr; }
.cmp-head{ background: var(--bg-alt); font-size:.76rem; font-weight:700; color: var(--ink); letter-spacing:.04em; }
.cmp-head span{ padding: 11px 12px; border-right:1px solid var(--line); }
.cmp-head span:last-child{ border-right:none; }
.cmp-row{ border-top:1px solid var(--line); font-size:.82rem; line-height:1.7; align-items:stretch; }
.cmp-c{ padding: 13px 12px; border-right:1px solid var(--line); display:flex; align-items:center; min-width:0; }
.cmp-c:last-child{ border-right:none; }
.cmp-name{ font-weight:700; color: var(--ink); }
.cmp-prod{ display:flex; gap:10px; align-items:center; width:100%; }
.cmp-thumb{ flex:none; width:76px; height:76px; border-radius: 4px; overflow:hidden; background:#fff; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; }
.cmp-thumb img{ width:100%; height:100%; object-fit:contain; }
.cmp-thumb .product-link{ display:block; width:100%; height:100%; }
.cmp-prod-info{ flex:1 1 auto; min-width:0; }
.cmp-prod-name{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:.74rem; color: var(--ink-soft); line-height:1.45; margin-bottom:6px; }
.cmp-btns{ display:flex; gap:6px; flex-wrap:wrap; }
.cmp-btns .pbtn, .prose .cmp-btns .pbtn{ flex:1 1 100%; min-width:0; font-size:.72rem; letter-spacing:0; white-space:nowrap; padding: 6px 6px; min-height: 36px; }
.cmp-none{ font-size:.76rem; color: var(--ink-soft); display:flex; flex-direction:column; gap:6px; }
.cmp-guide, .prose .cmp-guide{ font-size:.76rem; font-weight:700; color: var(--moss); }
.cmp-foot{ margin: 10px 2px 0; font-size:.72rem; color: var(--ink-faint); line-height:1.7; display:flex; align-items:flex-start; gap:8px; }
.cmp-foot .pr-badge{ margin-left:0; flex:none; }
@media (max-width: 760px){
  .cmp{ border:none; background:transparent; }
  .cmp-head{ display:none; }
  .cmp-row{ display:block; border:1px solid var(--line); border-radius: var(--radius); background: var(--paper); margin-bottom: 12px; padding: 4px 0; }
  .cmp-c{ border-right:none; padding: 8px 14px; display:block; }
  .cmp-c[data-l]::before{ content: attr(data-l); display:block; font-size:.68rem; font-weight:700; color: var(--ink-faint); margin-bottom: 2px; }
  .cmp-name{ font-size:1rem; font-family: var(--font-serif); background: var(--bg-alt); padding: 10px 14px; }
  .cmp-name::before{ display:none !important; }
  .cmp-btns .pbtn, .prose .cmp-btns .pbtn{ min-height: 44px; font-size:.8rem; flex:1 1 110px; }
  .cmp-thumb{ width: 88px; height: 88px; }
}

/* ブログカード(本文中の関連記事) */
.linkcard, .prose .linkcard{
  display:flex; align-items:center; gap: 16px; margin: 2em 0; padding: 16px 20px;
  border:1px solid var(--line-strong); border-radius: var(--radius); background: var(--paper);
  color: var(--ink); text-decoration:none; transition: border-color .15s;
}
.linkcard:hover, .prose .linkcard:hover{ border-color: var(--moss); text-decoration:none; }
.linkcard-ic{ color: var(--moss); flex:none; }
.linkcard-main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.linkcard-label{ font-size:.7rem; letter-spacing:.1em; color: var(--ink-soft); line-height:1.6; }
.linkcard-title{ font-family: var(--font-serif); font-weight:600; font-size:1.02rem; line-height:1.55; color: var(--ink); text-decoration: underline; text-decoration-color: var(--sun); text-underline-offset: .3em; }
.linkcard:hover .linkcard-title{ color: var(--moss); }
.linkcard-lede{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:.8rem; color: var(--ink-soft); line-height:1.75; margin-top: 4px; }
.linkcard-meta{ font-size:.7rem; color: var(--ink-faint); line-height:1.6; margin-top: 2px; }
.linkcard-arrow{ flex:none; color: var(--ink); }
@media (max-width: 600px){ .linkcard-ic{ display:none; } .linkcard, .prose .linkcard{ padding: 14px 16px; } }

/* 吹き出し */
.voice{ display:flex; gap:14px; align-items:flex-start; margin: 1.8em 0; }
.voice-avatar{ flex:none; width:44px; height:44px; border-radius:50%; background: var(--bg-alt); color: var(--moss); display:flex; align-items:center; justify-content:center; }
.voice-body{ flex:1 1 auto; min-width:0; }
.voice-name{ margin:0 0 6px !important; font-size:.74rem; color: var(--ink-faint); font-weight:700; }
.voice-text{ position:relative; background: var(--paper); border:1px solid var(--line-strong); border-radius: 10px; padding: 14px 16px; font-size:.94rem; }
.voice-text::before{ content:""; position:absolute; left:-7px; top:14px; width:12px; height:12px; background: var(--paper); border-left:1px solid var(--line-strong); border-bottom:1px solid var(--line-strong); transform: rotate(45deg); }
.voice-text > :first-child{ margin-top:0; }
.voice-text > :last-child{ margin-bottom:0; }

/* steps */
.steps{ list-style:none; padding:0; margin: 2em 0; counter-reset: step; }
.steps li{ counter-increment: step; position:relative; padding: 2px 0 20px 56px; margin: 0; min-height: 40px; }
.steps li:not(:last-child)::after{ content:""; position:absolute; left: 19px; top: 44px; bottom: 4px; width:1px; background: var(--line-strong); }
.steps li::before{
  content: counter(step); position:absolute; left:0; top:0; width: 40px; height:40px; border-radius:50%;
  border:1px solid var(--moss); color: var(--moss); background: var(--bg);
  display:flex; align-items:center; justify-content:center; font-family: var(--font-latin); font-style:italic; font-size:1.15rem;
}
.steps li h4{ margin: 6px 0 4px; font-size: 1.02rem; font-family: var(--font-serif); font-weight:600; }
.steps li p{ margin: 0 0 .6em; color: var(--ink-soft); font-size:.95rem; }

/* 図・画像 */
.prose figure.fig{ margin: 2em 0; text-align:center; }
.prose figure.fig img{ margin: 0 auto; max-width:100%; height:auto; }
.prose figure.fig figcaption{ margin-top: 8px; font-size: .76rem; color: var(--ink-faint); }

/* =================== 商品(アフィリエイト) =================== */
/* 注意: .prose の中に置く要素は必ず .prose を付けて書く(.prose a の詳細度に負けるため) */
.aff-card{ margin: 2.2em 0; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); padding: 22px 0 18px; }
.aff-card .aff-label{ display:flex; align-items:center; gap:8px; font-size:.72rem; letter-spacing:.12em; color: var(--rust); margin-bottom: 6px; }
.aff-card .aff-label .dot{ width:5px; height:5px; border-radius:50%; background: var(--sun); }
.aff-card .aff-label .pr-badge{ margin-left:auto; }
.aff-card h4{ margin: 0 0 6px; font-size: 1.12rem; font-family: var(--font-serif); font-weight:600; }
.aff-card p{ margin: 0 0 14px; font-size: .88rem; line-height:1.85; color: var(--ink-soft); }
.aff-card .aff-foot{ margin: 12px 0 0; font-size:.72rem; color: var(--ink-faint); }
.product-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.product-item{ background: var(--paper); border:1px solid var(--line); border-radius: var(--radius); padding: 14px; display:flex; flex-direction:row; align-items:flex-start; gap:14px; text-align:left; min-width:0; }
.product-item > .product-link, .product-item > .product-thumb{ flex: 0 0 96px; width: 96px; aspect-ratio: 1 / 1; display:block; }
.product-thumb{ width:100%; height:100%; border-radius: 3px; overflow:hidden; background:#fff; display:flex; align-items:center; justify-content:center; }
.product-thumb img{ width:100%; height:100%; object-fit: contain; }
.product-link, .prose .product-link{ text-decoration:none; color:inherit; }
.product-link:hover .product-thumb img{ opacity:.88; }
.prose .product-name-link:hover{ text-decoration:none; }
.product-name-link:hover .product-name{ color: var(--moss); }
.product-info{ flex: 1 1 auto; min-width: 0; display:flex; flex-direction:column; }
.product-name{ font-size: .9rem; color: var(--ink); margin: 0 0 4px !important; line-height:1.5; font-weight:700; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.product-note{ font-size: .76rem; color: var(--ink-soft); margin: 0 0 10px !important; line-height:1.6; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.product-buttons{ display:flex; flex-wrap:wrap; gap:8px; width:100%; margin-top:auto; }
.product-item.has-img{ flex-direction: column; align-items: stretch; padding: 12px; gap: 10px; }
.product-item.has-img > .product-link, .product-item.has-img > .product-thumb{ flex: none; width: 100%; aspect-ratio: 1 / 1; }
.product-item.has-img .product-buttons{ flex-direction: column; gap: 6px; }
.product-item.has-img .pbtn{ flex: none; width: 100%; }

.pbtn, .prose .pbtn{
  display:flex; align-items:center; justify-content:center; gap:6px; flex: 1 1 110px;
  font-size: .84rem; font-weight:700; letter-spacing:.04em; padding: 11px 12px; border-radius: var(--radius);
  text-decoration: none; line-height:1.2; min-height: 44px; border:1px solid transparent; text-align:center;
  transition: filter .15s ease;
}
.pbtn:hover, .prose .pbtn:hover{ filter: brightness(1.08); text-decoration: none; }
.pbtn-amazon, .prose .pbtn-amazon{ background: #FF9900; color: #111; }
.pbtn-amazon:hover, .prose .pbtn-amazon:hover{ color: #111; }
.pbtn-rakuten, .prose .pbtn-rakuten{ background: #BF0000; color: #fff; }
.pbtn-rakuten:hover, .prose .pbtn-rakuten:hover{ color: #fff; }
.pbtn-asp, .prose .pbtn-asp{ background: var(--rust); color: #fff; }
.pbtn-asp:hover, .prose .pbtn-asp:hover{ background: var(--rust-dark); color: #fff; filter:none; }
.pbtn-pending{ background: var(--bg-alt); color: var(--ink-faint); border: 1px dashed var(--line-strong); cursor: default; flex: 1 1 100%; }
@media (max-width: 480px){
  .product-grid{ grid-template-columns: 1fr 1fr; gap: 10px; }
  .product-item.has-img{ padding: 8px; }
  .product-item.has-img .product-name{ font-size: .82rem; }
  .product-item.has-img .product-note{ font-size: .72rem; }
  .product-item.has-img .pbtn{ font-size: .76rem; padding: 10px 6px; }
  .product-grid > .product-item:not(.has-img){ grid-column: 1 / -1; }
  .product-item > .product-link, .product-item > .product-thumb{ flex: 0 0 84px; width: 84px; }
}

/* 写真つき商品列(記事の最初のh2の直前 / トップの「写真で選ぶランドセル」) */
.top-picks, .prose .top-picks{ margin: 2em 0 2.4em; padding: 16px 16px 12px; border:1px solid var(--line); border-radius: var(--radius); background: var(--paper); line-height:1.6; }
.picks-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:12px; }
.picks-ttl{ font-family: var(--font-serif); font-weight:600; font-size:1rem; color: var(--ink); letter-spacing:.04em; }
.picks-row{ display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px; -webkit-overflow-scrolling:touch; scrollbar-width: thin; }
.pick{ flex: 0 0 148px; scroll-snap-align:start; display:flex; flex-direction:column; gap:6px; min-width:0; }
.pick-img, .prose .pick-img{ display:block; aspect-ratio:1/1; border:1px solid var(--line); border-radius: 3px; overflow:hidden; background:#fff; }
.pick-img img{ width:100%; height:100%; object-fit:contain; }
.pick-name{ margin:0 !important; font-size:.78rem; font-weight:700; line-height:1.45; color:var(--ink); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.pick-note{ margin:0 !important; font-size:.7rem; line-height:1.45; color:var(--ink-soft); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.pick .pbtn, .prose .pick .pbtn{ flex:none; width:100%; min-height:44px; font-size:.74rem; padding:8px 6px; margin-top:auto; }
.picks-more, .prose .picks-more{ display:block; text-align:right; font-size:.76rem; margin-top:4px; color: var(--moss); }
@media (min-width: 900px){ .pick{ flex: 1 0 150px; max-width: 200px; } }

/* スマホ下部の固定購入バー */
.sticky-buy{ position:fixed; left:0; right:0; bottom:0; z-index:60; display:flex; align-items:center; gap:10px;
  padding:8px 10px calc(8px + env(safe-area-inset-bottom)); background: var(--paper); border-top:1px solid var(--line-strong);
  box-shadow: 0 -4px 14px rgba(0,0,0,.06); }
.sticky-buy[hidden]{ display:none; }
.sb-img{ flex:none; width:48px; height:48px; border-radius:4px; overflow:hidden; border:1px solid var(--line); background:#fff; }
.sb-img img{ width:100%; height:100%; object-fit:contain; }
.sb-txt{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.sb-txt .pr-badge{ align-self:flex-start; margin-left:0; }
.sb-name{ font-size:.78rem; font-weight:700; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sticky-buy .pbtn{ flex:none; min-height:44px; font-size:.76rem; padding:8px 12px; }
.sb-close{ flex:none; width:44px; height:44px; border:none; background:transparent; font-size:1.1rem; color:var(--ink-soft); cursor:pointer; }
@media (min-width: 900px){ .sticky-buy{ display:none !important; } }

/* PCサイドバーの写真つき商品(現在は未使用。render_side_picks 用に残す) */
.side-picks{ padding:12px; border:1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.side-picks-head{ margin:0 0 8px; font-size:.8rem; font-weight:700; }
.side-pick{ display:flex; align-items:center; gap:10px; padding:6px 0; border-top:1px solid var(--line); color:inherit; }
.side-pick:first-of-type{ border-top:none; }
.side-pick img{ flex:none; width:64px; height:64px; object-fit:contain; background:#fff; }
.side-pick .sp-name{ font-size:.76rem; line-height:1.45; font-weight:700; }
@media (max-width: 899px){ .side-picks{ display:none; } }

/* =================== FAQ =================== */
.prose#faq, .article-main > #faq{ margin-top: 3.2em; }
.faq{ margin: 0; border-top: 1px solid var(--line-strong); }
.faq-item{ border-bottom: 1px solid var(--line); }
.faq-item summary{
  cursor: pointer; list-style:none; padding: 16px 40px 16px 4px; min-height: 56px; position:relative;
  font-weight:700; font-size:.98rem; line-height:1.7; display:flex; gap:14px; align-items:baseline;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::before{ content:"Q"; font-family: var(--font-latin); font-style:italic; font-size:1.3rem; line-height:1; color: var(--rust); flex:none; }
.faq-item summary::after{ content:"+"; position:absolute; right: 8px; top: 50%; transform: translateY(-50%); color: var(--moss); font-weight:400; font-size:1.2rem; }
.faq-item[open] summary::after{ content:"−"; }
.faq-item .a{ padding: 0 4px 20px 30px; color: var(--ink); font-size:.94rem; line-height:1.95; }
.faq-item .a::before{ content:"A"; font-family: var(--font-latin); font-style:italic; font-size:1.3rem; color: var(--moss); margin-right:.5em; }

/* =================== 記事末尾 =================== */
.article-cta{
  margin: 3.2em 0 0; background: var(--bg-alt); border-radius: var(--radius);
  padding: 22px 26px; display:flex; align-items:center; gap: 16px 22px; flex-wrap:wrap; max-width: 760px;
}
.article-cta-ic{ color: var(--moss); flex:none; }
.article-cta-text{ flex: 1 1 260px; min-width:0; }
.article-cta h2{ font-size:1.1rem; margin:0 0 2px; border:none; padding:0; }
.article-cta p{ margin:0; color: var(--ink-soft); font-size:.84rem; line-height:1.8; }
.article-cta-btns{ display:flex; gap:10px; flex-wrap:wrap; }
.article-cta .btn{ min-height: 48px; font-size:.86rem; padding: 10px 20px; }
@media (max-width: 700px){
  .article-cta{ padding: 20px 18px; }
  .article-cta-ic{ display:none; }
  .article-cta-btns{ width:100%; }
  .article-cta .btn{ flex:1 1 100%; }
}
.related-box{ margin-top: 64px; max-width: 760px; }
.related-box h2{ font-size: 1.3rem; margin: 0 0 18px; }
.related-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.related-card{ display:flex; flex-direction:column; color: var(--ink); text-decoration:none; min-width:0; }
.related-card:hover{ text-decoration:none; }
.related-img{ display:block; aspect-ratio: 16 / 10; overflow:hidden; background: var(--bg-alt); border-radius:2px; }
.related-img img{ width:100%; height:100%; object-fit:cover; }
.related-body{ display:flex; flex-direction:column; gap: 2px; padding-top: 10px; }
.related-tag{ font-size:.7rem; letter-spacing:.06em; color: var(--rust); }
.related-title{ font-family: var(--font-serif); font-weight:600; font-size:.98rem; line-height:1.6; }
.related-card:hover .related-title{ color: var(--moss); }
@media (max-width: 760px){
  .related-grid{ grid-template-columns: 1fr; gap: 12px; }
  .related-card{ flex-direction:row; gap: 14px; align-items:center; }
  .related-img{ flex: 0 0 36%; }
  .related-body{ padding-top: 0; }
}
.editorial-note{
  margin-top: 48px; max-width: 760px; font-size: .78rem; line-height:1.9; color: var(--ink-soft);
  border-top: 1px solid var(--line-strong); padding-top: 16px;
}
.editorial-note-h{ display:block; font-weight:700; color: var(--ink); margin-bottom: 2px; letter-spacing:.06em; }

/* =================== Footer =================== */
.disclosure{ font-size:.74rem; line-height:1.85; color: var(--ink-soft); padding: 18px 0; border-top: 1px solid var(--line); }
.site-footer{ background: var(--bg); border-top: 1px solid var(--line); margin-top: 96px; color: var(--ink-soft); }
.footer-top{ display:flex; align-items:center; justify-content:space-between; gap: 20px 40px; flex-wrap:wrap; padding-top: 36px; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.footer-legal{ display:flex; align-items:center; flex-wrap:wrap; gap: 0 4px; font-size:.84rem; }
.footer-legal a{ color: var(--ink); display:inline-flex; align-items:center; min-height:44px; padding: 0 10px; }
.footer-legal a:hover{ color: var(--moss); }
.footer-legal .sep{ color: var(--line-strong); }
.footer-tagline{ margin:0; padding-left: 28px; border-left: 1px solid var(--line-strong); font-size:.84rem; line-height:1.9; color: var(--ink); }
.footer-grid{ display:grid; grid-template-columns: 1.3fr repeat(4, 1fr); gap: 28px 32px; padding-top: 36px; padding-bottom: 28px; }
.footer-h{ font-family: var(--font-sans); font-size:.76rem; font-weight:700; letter-spacing:.14em; color: var(--ink); margin: 0 0 8px; }
.footer-grid ul{ list-style:none; padding:0; margin:0; }
.footer-grid li{ margin: 0; }
.footer-grid a{ display:inline-flex; align-items:center; min-height: 36px; color: var(--ink-soft); font-size:.84rem; line-height:1.5; }
.footer-grid a:hover{ color: var(--moss); }
.footer-about p{ margin:0; font-size:.84rem; line-height:1.9; max-width: 22em; }
.footer-bottom{ border-top: 1px solid var(--line); padding-top: 18px; padding-bottom: 24px; font-size:.72rem; line-height:1.8; color: var(--ink-faint); display:flex; justify-content:space-between; flex-wrap:wrap; gap: 6px 24px; }
@media (max-width: 900px){
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .footer-about{ grid-column: 1 / -1; }
}
@media (max-width: 760px){
  .site-footer{ margin-top: 72px; }
  .footer-top{ flex-direction:column; align-items:flex-start; }
  .footer-legal a:first-child{ padding-left: 0; }
  .footer-tagline{ padding-left: 0; border-left:none; }
  .footer-grid a{ min-height: 44px; }
}
/* 固定の購入バーがフッターの最下部を隠さないように */
@media (max-width: 899px){ body:has(#sticky-buy) .footer-bottom{ padding-bottom: 88px; } }

/* ---- 埋め込みフォーム(Googleフォーム等) ---- */
.form-embed{ max-width: 640px; margin: 28px auto; }
.form-embed iframe{ display: block; width: 100%; height: 1100px; border: 0; }
@media (max-width: 640px){ .form-embed iframe{ height: 1500px; } }

/* 印刷 */
@media print{
  .site-header, .article-side, .sticky-buy, .article-cta, .related-box, .top-picks{ display:none !important; }
  .article-layout{ display:block; }
}

/* =================================================================
   比較ページの部品(2026.09 おすすめ比較・カタログ請求・メーカー比較)
   すべて .prose の中に置かれるため、リンク類は .prose を付けて書く
   ================================================================= */
.article-catch{
  margin: -4px 0 14px; font-family: var(--font-serif); font-weight:600; color: var(--moss);
  font-size: clamp(1.2rem, 2.4vw, 1.6rem); line-height:1.5; letter-spacing:.05em; font-feature-settings:"palt" 1;
}

/* 条件別の入口 */
.cond-tiles{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin: 1.2em 0 .6em; }
.cond-tile, .prose .cond-tile{
  display:flex; align-items:center; gap: 14px; min-height: 64px; padding: 12px 16px;
  background: var(--paper); border:1px solid var(--line-strong); border-radius: var(--radius);
  color: var(--ink); text-decoration:none; line-height:1.5; transition: border-color .15s;
}
.cond-tile:hover, .prose .cond-tile:hover{ border-color: var(--moss); text-decoration:none; }
.cond-ic{ color: var(--moss); display:flex; }
.cond-txt{ flex:1; min-width:0; display:flex; flex-direction:column; }
.cond-label{ font-weight:700; font-size:.98rem; }
.cond-sub{ font-size:.78rem; color: var(--ink-soft); }
.cond-arrow{ color: var(--ink); display:flex; }
.cond-note{ font-size:.8rem !important; color: var(--ink-soft); margin: 0 0 1.6em !important; }
@media (max-width: 560px){ .cond-tiles{ grid-template-columns: 1fr; } }

/* 入学年度が違う人への案内帯 */
.year-banner{
  display:flex; align-items:center; gap: 12px 16px; flex-wrap:wrap; margin: 1.6em 0 2em;
  padding: 14px 18px; background: var(--bg-alt); border-radius: var(--radius); line-height:1.7;
}
.yb-ic{ color: var(--moss); display:flex; }
.yb-txt{ flex: 1 1 280px; min-width:0; }
.yb-label{ margin:0 !important; font-weight:700; font-size:.98rem; }
.yb-body{ margin:0 !important; font-size:.84rem; color: var(--ink-soft); }
.yb-link, .prose .yb-link{
  display:inline-flex; align-items:center; gap:8px; min-height:44px; font-weight:700; font-size:.88rem;
  color: var(--moss); text-decoration: underline; text-underline-offset: .35em;
}

/* 比較早見表(モデル=行)。スマホでは表の中だけ横スクロールし、モデル列は固定 */
.model-table-wrap{ margin: 1.4em 0 1.8em; }
.model-table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; border-top:1px solid var(--line-strong); border-bottom:1px solid var(--line-strong); }
.model-table-scroll:focus-visible{ outline-offset: 2px; }
.prose .model-table{ margin:0; width:100%; min-width: 720px; font-size:.84rem; line-height:1.65; border-collapse: separate; border-spacing:0; background: var(--bg); }
.model-table caption{ caption-side: top; text-align:left; font-size:.78rem; color: var(--ink-soft); padding: 0 0 8px; }
.prose .model-table th, .prose .model-table td{ min-width: 0; padding: 12px 12px; border-bottom:1px solid var(--line); vertical-align: middle; white-space: normal; }
.prose .model-table td + td, .prose .model-table th + td{ border-left: 1px solid var(--line); }
.prose .model-table thead th{ background: var(--bg-alt); font-size:.76rem; white-space: nowrap; }
.prose .model-table tbody tr:last-child > *{ border-bottom:none; }
.model-table .mt-model{
  position: sticky; left: 0; z-index: 1; background: var(--paper); text-align:left; font-weight:700;
  min-width: 160px; width: 190px; box-shadow: 1px 0 0 var(--line);
}
.prose .model-table thead th:first-child{ position: sticky; left:0; z-index:2; box-shadow: 1px 0 0 var(--line); }
.mt-model{ display: table-cell; }
.mt-thumb{ display:block; width: 64px; height:64px; margin-bottom: 6px; background:#fff; border:1px solid var(--line); border-radius: 3px; overflow:hidden; }
.mt-thumb img{ width:100%; height:100%; object-fit:contain; }
.mt-name{ display:block; font-size:.84rem; line-height:1.5; }
.mt-price strong{ display:block; font-size:1rem; font-family: var(--font-serif); white-space:nowrap; background:none; }
.mt-ptype{ display:block; font-size:.7rem; color: var(--ink-soft); line-height:1.5; }
.mt-weight{ white-space:nowrap; }
.mt-go a, .prose .mt-go a{
  display:inline-flex; align-items:center; gap:4px; min-height:44px; white-space:nowrap;
  font-weight:700; font-size:.8rem; color: var(--moss);
}
.mt-hint{ display:none; margin: 6px 0 0 !important; font-size:.74rem !important; color: var(--ink-faint); text-align:right; }
.mt-note{ margin: 8px 0 0 !important; font-size:.76rem !important; color: var(--ink-soft); line-height:1.8; }
.mt-noimg{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; background: var(--bg-alt); color: var(--ink-soft); font-size:.7rem; text-align:center; }
@media (max-width: 760px){
  .mt-hint{ display:block; }
  .model-table .mt-model{ min-width: 128px; width: 128px; }
  .mt-thumb{ width:52px; height:52px; }
}

/* モデル別の詳細 */
.model-detail{
  display:grid; grid-template-columns: 220px minmax(0,1fr); gap: 24px; margin: 1.6em 0 2.2em;
  padding-top: 1.6em; border-top: 1px solid var(--line); scroll-margin-top: 110px;
}
.md-photo{ min-width:0; }
.md-photo img, .md-photo .mt-noimg{ width:100%; aspect-ratio: 1/1; height:auto; object-fit:contain; background:#fff; border:1px solid var(--line); border-radius: 3px; }
.md-photo-note{ margin: 4px 0 0 !important; font-size:.68rem !important; color: var(--ink-faint); }
.md-body{ min-width:0; }
.md-badge{ display:inline-block; margin: 0 0 6px !important; font-size:.74rem !important; font-weight:700; color: var(--rust-dark); background: var(--sun-pale); padding: 2px 10px; border-radius: 3px; line-height:1.7; }
.prose .md-title{ margin: 0 0 4px; font-family: var(--font-serif); font-weight:600; font-size: 1.35rem; letter-spacing:.04em; }
.md-spec{ margin: 0 0 8px !important; display:flex; align-items:baseline; flex-wrap:wrap; gap: 2px 10px; }
.md-price{ font-family: var(--font-serif); font-size: 1.2rem; font-weight:600; }
.md-ptype{ font-size:.74rem; color: var(--ink-soft); }
.md-sep{ color: var(--line-strong); }
.md-weight{ font-family: var(--font-serif); font-size: 1.1rem; }
.md-lead{ margin: 0 0 12px !important; font-size: .95rem; line-height:1.9; }
.md-list{ margin: 0 0 14px; border-top:1px solid var(--line); }
.md-row{ display:grid; grid-template-columns: 11em minmax(0,1fr); gap: 12px; padding: 9px 0; border-bottom:1px solid var(--line); }
.md-row dt{ display:flex; align-items:flex-start; gap:6px; font-size:.8rem; font-weight:700; color: var(--ink); line-height:1.6; }
.md-row dt .ic{ color: var(--moss); margin-top: 1px; }
.md-row dd{ margin:0; font-size:.88rem; line-height:1.8; }
.md-actions{ display:flex; flex-wrap:wrap; align-items:center; gap: 8px 18px; }
.model-cta, .prose .model-cta{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height: 50px; padding: 12px 22px;
  background: var(--moss); color:#fff; border-radius: var(--radius); font-weight:700; font-size:.92rem; letter-spacing:.05em;
  text-decoration:none;
}
.model-cta:hover, .prose .model-cta:hover{ background: var(--moss-dark); color:#fff; text-decoration:none; }
.md-dest{ font-size:.74rem; color: var(--ink-soft); display:inline-flex; align-items:center; }
.md-sub, .prose .md-sub{ display:inline-flex; align-items:center; gap:6px; min-height:44px; font-size:.84rem; color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); }
.md-sub:hover, .prose .md-sub:hover{ color: var(--moss); }
@media (max-width: 760px){
  .model-detail{ grid-template-columns: 1fr; gap: 12px; }
  .md-photo{ max-width: 170px; }
  .md-row{ grid-template-columns: 1fr; gap: 2px; }
  .model-cta, .prose .model-cta{ width:100%; }
}

/* リンク先の種類(商品カード) */
.product-dest{ margin: -4px 0 8px !important; font-size:.7rem !important; color: var(--ink-soft); line-height:1.5; }

/* 確認カード */
.check-cards{ list-style:none; margin: 1.4em 0 2em; padding:0; display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.check-cards .cc{ margin:0; padding: 16px 16px 14px; background: var(--paper); border:1px solid var(--line); border-radius: var(--radius); display:grid; grid-template-columns: auto 1fr; gap: 6px 10px; align-content:start; line-height:1.6; }
.check-cards .cc::marker{ content:""; }
.cc-n{ font-family: var(--font-latin); font-style:italic; font-size:1.3rem; color: var(--moss); font-variant-numeric: lining-nums; }
.cc-ic{ color: var(--moss); justify-self:end; }
.cc-body{ grid-column: 1 / -1; display:flex; flex-direction:column; gap: 4px; }
.cc-title{ font-weight:700; font-size:.95rem; }
.cc-text{ font-size:.82rem; color: var(--ink-soft); line-height:1.8; }
@media (max-width: 760px){ .check-cards{ grid-template-columns: 1fr; } }

/* 誘導帯 */
.cta-band-box{
  display:grid; grid-template-columns: 150px minmax(0,1fr) auto; align-items:center; gap: 16px 22px;
  margin: 1.6em 0 2.2em; padding: 18px 22px; background: var(--bg-alt); border-radius: var(--radius); line-height:1.7;
}
.cb-img{ align-self: center; min-width:0; width:100%; border-radius: 2px; overflow:hidden; aspect-ratio: 4/3; }
.cb-img img{ width:100%; height:100%; object-fit:cover; }
.cb-title{ margin: 0 0 2px !important; font-family: var(--font-serif); font-weight:600; font-size: 1.2rem; }
.cb-body{ margin:0 !important; font-size:.86rem; color: var(--ink-soft); }
.cb-btns{ display:flex; flex-direction:column; align-items:flex-start; gap: 4px; }
.prose .cta-band-box .btn-primary{ color:#fff; text-decoration:none; }
.prose .cta-band-box .text-link{ color: var(--ink); }
@media (max-width: 760px){
  .cta-band-box{ grid-template-columns: 1fr; padding: 18px; }
  .cb-img{ display:none; }
  .cb-btns{ align-items:stretch; }
  .prose .cta-band-box .btn{ width:100%; }
}

/* 入学年度の選択 */
.year-choice{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; margin: 1.2em 0 .6em; }
.yc-item, .prose .yc-item{
  display:grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items:center; gap: 2px 16px;
  min-height: 84px; padding: 16px 20px; background: var(--paper); border:1px solid var(--line-strong); border-radius: var(--radius);
  color: var(--ink); text-decoration:none; line-height:1.5;
}
.yc-alt, .prose .yc-alt{ background: var(--bg-alt); border-color: var(--bg-alt); }
.yc-item:hover, .prose .yc-item:hover{ border-color: var(--moss); text-decoration:none; }
.yc-ic{ grid-row: 1 / 3; color: var(--moss); display:flex; }
.yc-label{ font-family: var(--font-serif); font-weight:600; font-size: 1.3rem; }
.yc-sub{ display:inline-flex; align-items:center; gap:6px; font-size:.84rem; color: var(--ink-soft); }
.yc-note{ font-size:.8rem !important; color: var(--ink-soft); margin: 0 0 1.6em !important; }
@media (max-width: 560px){ .year-choice{ grid-template-columns: 1fr; } }

/* カタログ請求先の表 */
.prose .catalog-table{ min-width: 0; }
@media (max-width: 760px){ .prose .catalog-table{ min-width: 720px; } }
.catalog-table th[scope="row"]{ position: sticky; left:0; z-index:1; background: var(--paper); box-shadow: 1px 0 0 var(--line); }
.prose .catalog-table thead th:first-child{ position: sticky; left:0; z-index:2; box-shadow: 1px 0 0 var(--line); }
.prose .catalog-table th, .prose .catalog-table td{ padding-left: 10px; padding-right: 10px; }
.catalog-table th[scope="row"]{ font-weight:700; white-space:nowrap; }
.cat-year{ white-space:nowrap; font-weight:700; }
.cat-go{ min-width: 150px; }
.cat-btn, .prose .cat-btn{ white-space: nowrap; }
.cat-btn, .prose .cat-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:44px; padding: 8px 14px;
  background: var(--moss); color:#fff; border:1px solid var(--moss); border-radius: var(--radius);
  font-weight:700; font-size:.8rem; text-decoration:none; line-height:1.4; text-align:center;
}
.cat-btn:hover, .prose .cat-btn:hover{ background: var(--moss-dark); color:#fff; text-decoration:none; }
.cat-btn-outline, .prose .cat-btn-outline{ background: transparent; color: var(--moss); }
.cat-btn-outline:hover, .prose .cat-btn-outline:hover{ background: var(--moss); color:#fff; }
.cat-dest{ display:block; margin-top: 4px; font-size:.7rem; color: var(--ink-soft); }
.cat-date{ white-space:nowrap; font-size:.74rem; }
.prose .catalog-table .cat-btn{ padding: 8px 10px; font-size:.76rem; }

/* ページ下部の追従導線(比較表へ戻る・年度別カタログ) */
.sticky-nav{
  position:fixed; left:0; right:0; bottom:0; z-index:60; display:flex; align-items:center; justify-content:space-between; gap: 10px 20px;
  padding: 10px max(16px, calc((100vw - 1200px)/2 + 40px)) calc(10px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--bg-alt) 96%, transparent); border-top:1px solid var(--line-strong);
}
.sticky-nav[hidden]{ display:none; }
.sn-head{ display:flex; align-items:center; gap: 10px; font-family: var(--font-serif); font-weight:600; font-size:1.02rem; color: var(--ink); }
.sn-head .ic{ color: var(--moss); }
.sn-links{ display:flex; gap: 10px; }
.sn-btn{ display:inline-flex; align-items:center; justify-content:center; min-height: 46px; padding: 8px 18px; border-radius: var(--radius); font-weight:700; font-size:.86rem; text-decoration:none; white-space:nowrap; }
.sn-btn:hover{ text-decoration:none; }
.sn-outline{ border:1px solid var(--moss); color: var(--moss); background: var(--paper); }
.sn-primary{ background: var(--moss); color:#fff; border:1px solid var(--moss); }
.sn-primary:hover{ background: var(--moss-dark); color:#fff; }
@media (max-width: 760px){
  .sticky-nav{ padding-left: 10px; padding-right: 10px; }
  .sn-head{ display:none; }
  .sn-links{ width:100%; }
  .sn-btn{ flex:1; padding: 8px 10px; font-size:.8rem; }
}
body:has(#sticky-nav) .footer-bottom{ padding-bottom: 88px; }