/* Skill Base Camp — 共通スタイル
   意匠は商品の表紙（gx/product/template-book.html の .cover）に合わせている。
   濃緑のグラデーションと上昇する曲線がブランド面、本文は読みやすさ優先で生成り。 */
:root{
  --ink:#1a1a1a;
  --sub:#5f6360;
  --line:#dcd8cd;
  --line-fine:#e9e6dd;
  --paper:#f7f5ef;
  --paper-2:#fffdf8;
  --green:#0f5f4c;
  --green-deep:#0b443b;
  --lime:#a8d85a;
  --lime-ink:#4e7c1f;
  --r:10px;
  --mincho:"Hiragino Mincho ProN","Yu Mincho","YuMincho",serif;
  --gothic:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",sans-serif;
  --wrap:1040px;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--gothic); font-size:16px; line-height:1.95;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  font-feature-settings:"palt";
}
img{max-width:100%;height:auto;display:block}
a{color:var(--green)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.narrow{max-width:720px}

/* --- ヘッダー ------------------------------------------------------- */
.site-head{
  position:sticky;top:0;z-index:20;
  background:rgba(247,245,239,.92);backdrop-filter:saturate(150%) blur(8px);
  border-bottom:1px solid var(--line-fine);
}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;height:58px}
.brand{font-family:var(--gothic);font-size:13px;letter-spacing:.24em;color:var(--green);
  text-decoration:none;font-weight:600;white-space:nowrap}
.head-nav{display:flex;gap:22px;font-size:13.5px}
.head-nav a{color:var(--sub);text-decoration:none}
.head-nav a:hover{color:var(--green)}

/* --- ヒーロー ------------------------------------------------------- */
.hero{
  position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(150deg,#04231f 0%,#0b443b 45%,#177058 100%);
}
.hero .deco{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero .wrap{position:relative;display:grid;grid-template-columns:1fr 300px;gap:56px;
  align-items:center;padding-top:68px;padding-bottom:68px}
.eyebrow{font-size:11.5px;letter-spacing:.26em;color:var(--lime);margin-bottom:22px}
.hero h1{font-family:var(--mincho);font-weight:600;letter-spacing:.045em;
  font-size:clamp(28px,4.4vw,42px);line-height:1.42}
.hero .lead{font-size:15.5px;line-height:2.05;color:rgba(255,255,255,.82);margin-top:22px;max-width:34em}
.specs{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.spec{font-size:12.5px;letter-spacing:.04em;color:rgba(255,255,255,.9);
  border:1px solid rgba(168,216,90,.5);border-radius:999px;padding:5px 14px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:32px}
.price-line{font-family:var(--mincho);font-size:15px;color:rgba(255,255,255,.8);margin-top:18px}
.price-line b{font-size:27px;font-weight:600;color:#fff;letter-spacing:.02em}
.cover-shot{align-self:center}
.cover-shot img{border-radius:2px;box-shadow:0 18px 46px rgba(0,0,0,.42),0 2px 0 rgba(255,255,255,.12)}

/* --- ボタン --------------------------------------------------------- */
.btn{display:inline-block;border-radius:var(--r);font-size:14.5px;font-weight:600;
  letter-spacing:.04em;padding:13px 26px;text-decoration:none;transition:.15s;border:1px solid transparent}
.btn-primary{background:var(--lime);color:#0b3a22}
.btn-primary:hover{background:#b6e06a}
.btn-ghost{border-color:rgba(255,255,255,.45);color:#fff}
.btn-ghost:hover{border-color:var(--lime);color:var(--lime)}
.btn-solid{background:var(--green);color:#fff}
.btn-solid:hover{background:#0d4f40}
.btn-line{border-color:var(--green);color:var(--green)}
.btn-line:hover{background:rgba(15,95,76,.07)}

/* --- セクション ----------------------------------------------------- */
section{padding:72px 0}
section.tint{background:var(--paper-2);border-top:1px solid var(--line-fine);border-bottom:1px solid var(--line-fine)}
h2{font-family:var(--mincho);font-weight:600;font-size:clamp(21px,3vw,27px);
  letter-spacing:.05em;line-height:1.5;margin-bottom:10px}
h2 .n{display:block;font-family:var(--gothic);font-size:11px;letter-spacing:.24em;
  color:var(--lime-ink);margin-bottom:12px;font-weight:600}
.sec-lead{color:var(--sub);font-size:15px;line-height:2.05;margin-bottom:36px;max-width:40em}
h3{font-family:var(--gothic);font-size:16px;font-weight:600;letter-spacing:.02em;margin-bottom:8px}
p+p{margin-top:1em}

/* --- カード --------------------------------------------------------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{background:#fff;border:1px solid var(--line-fine);border-radius:var(--r);padding:26px 24px}
.card .k{font-size:11px;letter-spacing:.2em;color:var(--lime-ink);font-weight:600;margin-bottom:12px}
.card p{font-size:14px;line-height:1.95;color:var(--sub)}

/* --- 仕様表 --------------------------------------------------------- */
table.kv{width:100%;border-collapse:collapse;font-size:14.5px}
table.kv th,table.kv td{border-bottom:1px solid var(--line-fine);padding:13px 0;text-align:left;vertical-align:top}
table.kv th{width:9em;font-weight:600;color:var(--ink);padding-right:20px;white-space:nowrap}
table.kv td{color:var(--sub)}

/* --- 章立て --------------------------------------------------------- */
.toc{display:grid;grid-template-columns:repeat(2,1fr);gap:0 40px}
.toc div{display:flex;justify-content:space-between;gap:16px;
  border-bottom:1px solid var(--line-fine);padding:11px 0;font-size:14.5px}
.toc .q{color:var(--sub);white-space:nowrap;font-variant-numeric:tabular-nums}

/* --- 見本問題 ------------------------------------------------------- */
.sample-q{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:30px 30px 26px;font-family:var(--mincho);font-size:15px;line-height:1.95}
.sample-q .q-head{font-family:var(--gothic);font-size:12px;font-weight:600;letter-spacing:.1em;
  color:var(--green);border-bottom:1px solid var(--line-fine);padding-bottom:9px;margin-bottom:18px;
  display:flex;justify-content:space-between;gap:12px}
.sample-q .q-head span:last-child{font-weight:400;color:var(--sub);letter-spacing:.04em}
.sample-q ol{list-style:none;margin:16px 0 0;padding:0;counter-reset:c}
.sample-q ol li{counter-increment:c;padding-left:2.1em;text-indent:-2.1em;margin-bottom:.5em}
.sample-q ol li::before{content:counter(c,upper-alpha) "　";font-family:var(--gothic);font-weight:600;color:var(--green)}
.sample-a{margin-top:22px;border-top:1px solid var(--line-fine);padding-top:18px;font-size:14px;line-height:1.95}
.sample-a .ans{font-family:var(--gothic);font-weight:600;color:var(--green);margin-bottom:8px;letter-spacing:.06em}
.sample-a .why{color:var(--sub);font-size:13.5px;margin-top:10px}
.sample-a .why::before{content:"他の選択肢　";color:var(--lime-ink)}
.sample-a .src{font-family:var(--gothic);font-size:12px;color:var(--sub);margin-top:12px}
.sample-a .src::before{content:"出典　";color:var(--lime-ink)}

/* --- 購入ブロック --------------------------------------------------- */
.buy{background:linear-gradient(150deg,#04231f 0%,#0b443b 45%,#177058 100%);color:#fff;
  border-radius:14px;padding:44px 40px;position:relative;overflow:hidden}
.buy .deco{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.buy-inner{position:relative;display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center}
.buy h2{color:#fff;margin-bottom:6px}
.buy .price{font-family:var(--mincho);font-size:38px;font-weight:600;letter-spacing:.02em;line-height:1.2}
.buy .price small{font-family:var(--gothic);font-size:13px;font-weight:400;color:rgba(255,255,255,.72);margin-left:8px}
.buy .note{font-size:13px;color:rgba(255,255,255,.72);line-height:1.9;margin-top:12px}
.buy-actions{display:flex;flex-direction:column;gap:12px;min-width:230px}

/* --- 注意事項 ------------------------------------------------------- */
.callout{background:#fff;border:1px solid var(--line);border-left:3px solid var(--green);
  border-radius:var(--r);padding:24px 26px}
.callout h3{margin-bottom:10px}
.callout p{font-size:14px;line-height:1.95;color:var(--sub)}
ul.terms{list-style:none;margin:0;padding:0}
ul.terms li{position:relative;padding-left:20px;margin-bottom:13px;font-size:14px;line-height:1.95;color:var(--sub)}
ul.terms li::before{content:"";position:absolute;left:4px;top:.85em;width:5px;height:5px;
  border-radius:50%;background:var(--lime)}
ul.terms b{color:var(--ink);font-weight:600}

/* --- FAQ ------------------------------------------------------------ */
.faq details{border-bottom:1px solid var(--line-fine);padding:6px 0}
.faq summary{cursor:pointer;list-style:none;padding:16px 30px 16px 0;font-size:15px;
  font-weight:600;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"＋";position:absolute;right:4px;top:16px;color:var(--lime-ink);font-weight:400}
.faq details[open] summary::after{content:"−"}
.faq .a{font-size:14.5px;line-height:2.05;color:var(--sub);padding:0 0 18px}

/* --- フッター ------------------------------------------------------- */
.site-foot{background:#0b2b25;color:rgba(255,255,255,.62);padding:52px 0 60px;font-size:12.5px;line-height:1.95}
.site-foot .mark{font-size:12px;letter-spacing:.26em;color:var(--lime);font-weight:600;margin-bottom:16px}
.site-foot a{color:rgba(255,255,255,.82)}
.site-foot .disc{border-top:1px solid rgba(255,255,255,.16);margin-top:22px;padding-top:20px;max-width:62em}
.site-foot .disc b{color:rgba(255,255,255,.9)}
.foot-nav{display:flex;gap:20px;flex-wrap:wrap;margin-bottom:6px}

/* --- 記事ページ ----------------------------------------------------- */
.page-head{background:var(--paper-2);border-bottom:1px solid var(--line-fine);padding:56px 0 44px}
.page-head h1{font-family:var(--mincho);font-weight:600;font-size:clamp(24px,3.6vw,32px);letter-spacing:.05em}
.prose h2{font-size:20px;margin:44px 0 14px;padding-bottom:10px;border-bottom:1px solid var(--line-fine)}
.prose p,.prose li{font-size:15px;line-height:2.05;color:#33383a}
.prose ul{padding-left:1.2em;margin:10px 0}
.prose li{margin-bottom:8px}

@media (max-width:860px){
  .hero .wrap{grid-template-columns:1fr;gap:36px;padding-top:48px;padding-bottom:52px}
  .cover-shot{max-width:230px;margin:0 auto}
  .cards{grid-template-columns:1fr}
  .toc{grid-template-columns:1fr}
  .buy{padding:34px 24px}
  .buy-inner{grid-template-columns:1fr;gap:26px}
  .head-nav{gap:16px;font-size:12.5px}
  section{padding:56px 0}
  .sample-q{padding:24px 20px 22px}
}
@media (max-width:420px){
  .head-nav a[data-opt]{display:none}
}

/* --- トップのヒーロー（1冊に依存しないブランド面） ------------------ */
.hero-top .wrap{grid-template-columns:1fr;max-width:860px}
.hero-top h1{font-size:clamp(30px,5.4vw,46px)}
.hero-top .catch{font-family:var(--mincho);font-size:clamp(16px,2.4vw,20px);
  letter-spacing:.06em;color:var(--lime);margin-top:24px}
.hero-top .lead{margin-top:20px;max-width:42em}

/* --- 書籍カード（刊行物一覧・トップで共用） ------------------------- */
.book-list{display:grid;gap:20px}
.book-card{display:grid;grid-template-columns:180px 1fr;gap:32px;align-items:center;
  background:#fff;border:1px solid var(--line-fine);border-radius:14px;
  padding:28px 32px;text-decoration:none;color:inherit;transition:.15s}
a.book-card:hover{border-color:var(--green);box-shadow:0 8px 26px rgba(11,68,59,.10)}
.book-card-cover img{border-radius:2px;box-shadow:0 8px 22px rgba(11,68,59,.24)}
.book-card .k{font-size:10.5px;letter-spacing:.22em;color:var(--lime-ink);font-weight:600;margin-bottom:10px}
.book-card h3{font-family:var(--mincho);font-size:clamp(18px,2.4vw,22px);font-weight:600;
  letter-spacing:.04em;line-height:1.5;margin-bottom:12px}
.book-card .lede{font-size:14px;line-height:1.95;color:var(--sub);margin-bottom:16px}
.book-card .meta{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;font-size:13px;color:var(--sub)}
.book-card .meta .price{font-family:var(--mincho);font-size:21px;font-weight:600;color:var(--green);letter-spacing:.02em}
.book-card.is-upcoming{opacity:.72}
.book-card .cover-ph{width:180px;aspect-ratio:148/210;border:1px dashed var(--line);border-radius:2px;
  display:flex;align-items:center;justify-content:center;color:var(--sub);
  font-family:var(--mincho);font-size:15px;letter-spacing:.2em;background:var(--paper)}

/* --- 一覧・下層のページ見出し --------------------------------------- */
.page-head .page-lead{color:var(--sub);font-size:15px;margin-top:14px;max-width:40em}

/* --- 目次の段組み調整 ----------------------------------------------- */
.toc .toc-gap{border-bottom:none}

@media (max-width:860px){
  .book-card{grid-template-columns:1fr;gap:20px;padding:24px}
  .book-card-cover{max-width:150px}
  .book-card .cover-ph{width:150px}
}

/* --- ロゴマーク ------------------------------------------------------ */
/* 3段の積み上げ。地色に応じて .b1/.b2 の色だけ差し替える */
.logo-mark{width:1.55em;height:1.55em;flex:0 0 auto;display:block}
.logo-mark .b1{fill:currentColor;opacity:.45}
.logo-mark .b2{fill:currentColor;opacity:.72}
.logo-mark .b3{fill:var(--lime-ink)}
.brand{display:inline-flex;align-items:center;gap:9px}
.brand .logo-mark{color:var(--green)}
.site-foot .mark{display:flex;align-items:center;gap:9px}
.site-foot .mark .logo-mark{color:#fff}
.site-foot .mark .logo-mark .b3{fill:var(--lime)}