/* ============================================================
   AI駆動ラボ 紹介LP (lab-lp)
   Warm Editorial (navy × beaver tan) — course-hub/hub.css のトークンを継承
   JS レス（FAQ は <details>）/ 375px–1920px
   ============================================================ */

:root{
  /* --- hub.css 継承トークン --- */
  --ink:#1B2A4A; --ink-deep:#16203A; --ink-2:#2C3650;
  --slate:#4A5260; --slate-2:#5A6473; --mute:#8A93A3;
  --line:#D4DBE8; --line-soft:#E2E5EC; --fill:#EAEEF5; --fill-2:#F0F1F4;
  --paper:#F7F8FA; --white:#FFFFFF;
  --beaver:#6B4A2F; --beaver-tan:#A9743F; --beaver-cream:#EBDCC7;
  --good:#2E6B4F; --amber:#E6A700;
  --font-en:'Cormorant Garamond',serif;
  --font-jp:'Shippori Mincho',serif;
  --font-sans:'Noto Sans JP',-apple-system,BlinkMacSystemFont,'Hiragino Kaku Gothic ProN',sans-serif;
  --radius:16px;

  /* --- LP 固有 --- */
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --tan-ink:#96632F;   /* 明色背景の小文字・白抜き用（AA 4.5+）。線やドット等の装飾は --beaver-tan のまま */
  --wrap:1120px;
  --pad:clamp(20px,5vw,40px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--paper); color:var(--ink); font-family:var(--font-sans);
  /* rem 指定にしてブラウザの文字サイズ設定に追随させる（px 固定は設定を無視する） */
  font-size:1rem; line-height:1.8; overflow-x:hidden;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-variant-numeric:lining-nums tabular-nums; font-feature-settings:"lnum" 1,"tnum" 1;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
p{overflow-wrap:anywhere}
:focus-visible{outline:2px solid var(--beaver-tan);outline-offset:3px;border-radius:6px}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.sec{padding-block:clamp(56px,8vw,96px)}
.sec--paper{background:var(--paper)}
.sec--white{background:var(--white)}
.sec--ink{background:linear-gradient(168deg,var(--ink) 0%,var(--ink-deep) 70%,#0f1830 100%);color:#e7ecf5}
.sec--cream{background:linear-gradient(180deg,#F4EDE2 0%,#EFE5D6 100%)}

.eyebrow{
  font-family:var(--font-sans);font-weight:700;font-size:12px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--tan-ink);display:flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--beaver-tan);flex:none}
.sec--ink .eyebrow{color:var(--beaver-cream)}
.sec--ink .eyebrow::before{background:var(--beaver-cream)}

h2.sh{
  font-family:var(--font-jp);font-weight:800;font-size:clamp(1.5rem,4.2vw,2.125rem);
  line-height:1.38;margin-top:12px;letter-spacing:-.01em;text-wrap:balance;
}
.sec--ink h2.sh{color:#fff}
.slede{margin-top:14px;max-width:62ch;font-size:15px;color:var(--slate);line-height:1.9}
.sec--ink .slede{color:#c4cde0}

/* ---------- header ---------- */
.hdr{
  position:sticky;top:0;z-index:20;background:rgba(22,32,58,.86);
  backdrop-filter:saturate(140%) blur(10px);-webkit-backdrop-filter:saturate(140%) blur(10px);
}
/* 浮いているクロームと本文の境目は 1px の線ではなくフェードで作る（scroll edge effect） */
.hdr::after{
  content:"";position:absolute;left:0;right:0;top:100%;height:14px;pointer-events:none;
  background:linear-gradient(180deg,rgba(22,32,58,.16) 0%,rgba(22,32,58,0) 100%);
}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:14px;height:60px}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand img{width:32px;height:32px;flex:none}
.brand .nm{font-family:var(--font-jp);font-weight:800;font-size:17px;color:#fff;line-height:1.1;white-space:nowrap}
.brand .tg{font-family:var(--font-en);font-size:9.5px;letter-spacing:.22em;color:var(--beaver-cream);text-transform:uppercase;display:block;margin-top:3px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 22px;border-radius:12px;font-weight:700;font-size:15px;line-height:1.4;
  background:linear-gradient(180deg,var(--tan-ink) 0%,var(--beaver) 100%);color:#fff;
  border:1px solid transparent;text-align:center;
  /* 押下(transform)は入退場なので ease-out、hover(filter/影)は色変化系なので ease */
  transition:transform 160ms var(--ease-out),filter 160ms ease,box-shadow 160ms ease;
  box-shadow:0 6px 18px rgba(107,74,47,.22);
}
.btn:active{transform:scale(.97)}
.btn--sm{padding:9px 16px;font-size:13.5px;border-radius:10px;box-shadow:none}
.btn--ghost{background:none;border-color:rgba(255,255,255,.34);color:#fff;box-shadow:none}
.btn--outline{background:none;border-color:var(--line);color:var(--ink);box-shadow:none}
.btn--wide{width:100%}
@media(hover:hover) and (pointer:fine){
  .btn:hover{filter:brightness(1.08);box-shadow:0 10px 26px rgba(107,74,47,.28)}
  .btn--ghost:hover,.btn--outline:hover{filter:none;background:rgba(169,116,63,.12);box-shadow:none}
}
.btn .ar{font-family:var(--font-en);font-weight:600;font-size:17px;line-height:1}

/* ---------- hero ---------- */
.hero{
  background:linear-gradient(168deg,var(--ink) 0%,var(--ink-deep) 62%,#0f1830 100%);
  color:#e7ecf5;position:relative;overflow:hidden;
  padding-block:clamp(48px,7vw,84px) clamp(56px,8vw,92px);
}
.hero::after{
  content:"";position:absolute;right:-16%;top:-28%;width:56vw;height:56vw;max-width:640px;max-height:640px;
  background:radial-gradient(circle,rgba(169,116,63,.30) 0%,rgba(169,116,63,0) 68%);pointer-events:none;
}
.hero__in{display:grid;grid-template-columns:minmax(0,1fr);gap:34px;align-items:center;position:relative;z-index:1}
.hero h1{
  font-family:var(--font-jp);font-weight:800;color:#fff;margin-top:14px;
  /* 大きい文字は字間が開いて見えるので負トラッキング、行間はサイズに反比例させて締める */
  font-size:clamp(1.5rem,5.6vw,2.875rem);line-height:1.32;letter-spacing:-.015em;
}
.hero h1 em{font-style:normal;color:var(--beaver-cream)}
.hero__lede{margin-top:18px;font-size:clamp(14.5px,1.6vw,16.5px);color:#c4cde0;line-height:1.95;max-width:54ch}
.hero__acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.hero__note{margin-top:16px;font-size:12.5px;color:#93a0bb;line-height:1.8}
/* 運営者 — X から来た読者が「同じ人だ」と分かるための顔 */
.hero__by{
  display:flex;align-items:center;gap:13px;margin-top:24px;padding-top:20px;
  border-top:1px solid rgba(255,255,255,.13);max-width:46ch;
}
.hero__by img{
  width:52px;height:52px;flex:none;border-radius:50%;background:#fff;
  border:1.5px solid rgba(235,220,199,.5);
}
.hero__by p{font-size:12.5px;line-height:1.75;color:#a9b4cc}
.hero__by b{color:#e7ecf5;font-weight:700}
.hero__art{justify-self:center;width:min(230px,56vw)}
/* 狭い画面ではCTAを全幅に（親指で押しやすく・折返しの見た目も揃う） */
@media(max-width:559px){
  .hero__acts .btn,.last__acts .btn{width:100%}
}
.hero__art img{filter:drop-shadow(0 22px 44px rgba(0,0,0,.42))}
@media(min-width:900px){
  .hero__in{grid-template-columns:minmax(0,1.32fr) minmax(0,.68fr);gap:48px}
  .hero__art{justify-self:end;width:min(340px,30vw)}
}

/* 初回描画時のみの控えめな入場（reduced-motion では無効） */
@media(prefers-reduced-motion:no-preference){
  .hero__in>*{opacity:1;transform:none;transition:opacity 300ms var(--ease-out),transform 300ms var(--ease-out)}
  @starting-style{.hero__in>*{opacity:0;transform:translateY(10px)}}
  .hero__art{transition-delay:60ms}
}

/* ---------- 汎用カードグリッド ---------- */
.cards{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;margin-top:34px}
@media(min-width:640px){.cards--2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:760px){.cards--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:900px){.cards--4{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}}

.card{
  background:var(--white);border:1px solid var(--line-soft);border-radius:var(--radius);
  padding:24px 22px;transition:box-shadow 180ms var(--ease-out),transform 180ms var(--ease-out);
}
@media(hover:hover) and (pointer:fine){
  .card:hover{box-shadow:0 14px 34px rgba(20,32,58,.11);transform:translateY(-3px)}
}
.card__n{font-family:var(--font-en);font-weight:700;font-size:13px;letter-spacing:.14em;color:var(--tan-ink)}
.card__t{font-family:var(--font-jp);font-weight:800;font-size:18.5px;line-height:1.46;letter-spacing:-.005em;margin-top:8px;text-wrap:balance}
.card__d{margin-top:11px;font-size:14px;color:var(--slate);line-height:1.85}

/* 対象読者 / ゴール */
.rows{display:grid;gap:12px;margin-top:30px}
.row{
  display:grid;grid-template-columns:26px minmax(0,1fr);gap:13px;align-items:start;
  background:var(--white);border:1px solid var(--line-soft);border-radius:13px;padding:16px 18px;
}
.row .ck{
  width:26px;height:26px;border-radius:50%;background:rgba(46,107,79,.11);color:var(--good);
  display:grid;place-items:center;font-size:14px;font-weight:700;line-height:1;
}
.row b{font-family:var(--font-jp);font-weight:700;font-size:15.5px;line-height:1.6;display:block}
.row span{display:block;margin-top:5px;font-size:13.5px;color:var(--slate);line-height:1.8}

/* ---------- コース ---------- */
.course{
  background:var(--white);border:1px solid var(--line-soft);border-radius:var(--radius);overflow:hidden;
  display:flex;flex-direction:column;
  transition:box-shadow 180ms var(--ease-out),transform 180ms var(--ease-out);
}
@media(hover:hover) and (pointer:fine){
  .course:hover{box-shadow:0 16px 38px rgba(20,32,58,.13);transform:translateY(-3px)}
}
.course__cover{aspect-ratio:16/9;background:var(--fill);position:relative}
.course__cover img{width:100%;height:100%;object-fit:cover}
.course__badge{
  position:absolute;left:12px;bottom:12px;background:var(--ink-deep);color:#fff;
  font-family:var(--font-en);font-weight:700;font-size:12px;letter-spacing:.12em;
  padding:5px 11px;border-radius:7px;box-shadow:0 4px 14px rgba(0,0,0,.24);
}
.course__badge.tan{background:var(--tan-ink)}
.course__badge.mid{background:var(--beaver)}
.course__b{padding:20px 20px 22px}
.course__t{font-family:var(--font-jp);font-weight:800;font-size:19px;line-height:1.42;letter-spacing:-.005em;text-wrap:balance}
.course__d{margin-top:10px;font-size:13.5px;color:var(--slate);line-height:1.85}

/* ---------- 特典リスト ---------- */
.perks{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin-top:30px}
@media(min-width:620px){.perks{grid-template-columns:repeat(2,minmax(0,1fr))}}
.perk{
  display:flex;gap:11px;align-items:flex-start;background:var(--white);
  border:1px solid var(--line-soft);border-radius:12px;padding:14px 16px;font-size:14.5px;line-height:1.7;
}
.perk .dot{width:7px;height:7px;border-radius:50%;background:var(--beaver-tan);margin-top:9px;flex:none}

/* ---------- 料金 ---------- */
.plans{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;margin-top:36px}
@media(min-width:820px){.plans{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}}
.plan{
  background:var(--white);border-radius:18px;padding:28px 24px 26px;color:var(--ink);
  border:1px solid var(--line-soft);display:flex;flex-direction:column;position:relative;
}
.plan--hl{border:2px solid var(--beaver-tan);box-shadow:0 20px 48px rgba(0,0,0,.28)}
.plan__tag{
  position:absolute;top:-13px;left:24px;background:var(--tan-ink);color:#fff;
  font-size:11.5px;font-weight:700;letter-spacing:.08em;padding:5px 13px;border-radius:20px;
}
/* 副プランのタグは「機能の説明」であって推奨ではないので、視覚的な重みを落とす */
.plan__tag--sub{background:var(--fill);color:var(--slate)}
.plan__nm{font-family:var(--font-jp);font-weight:800;font-size:20px;letter-spacing:-.005em}
.plan__price{display:flex;align-items:baseline;gap:6px;margin-top:12px;flex-wrap:wrap}
.plan__price b{font-family:var(--font-en);font-weight:700;font-size:46px;line-height:1;letter-spacing:-.02em;color:var(--ink)}
.plan__price .cur{font-family:var(--font-en);font-weight:600;font-size:24px;color:var(--ink)}
.plan__price .per{font-size:13.5px;color:var(--slate-2)}
.plan__for{margin-top:12px;font-size:13.5px;color:var(--slate);line-height:1.8;min-height:2.6em}
.plan__list{list-style:none;margin-top:18px;padding-top:18px;border-top:1px solid var(--line-soft);display:grid;align-content:start;gap:9px;flex:1}
.plan__list li{display:flex;gap:9px;font-size:14px;line-height:1.7;color:var(--slate)}
.plan__list li::before{content:"✓";color:var(--good);font-weight:700;flex:none}
.plan__list li.hl{color:var(--ink);font-weight:700}
.plan__list li.hl::before{color:var(--tan-ink)}
.plan .btn{margin-top:22px}
.plans__note{margin-top:22px;font-size:13px;color:#9fabc6;line-height:1.85;max-width:70ch}
.plans__note b{color:var(--beaver-cream)}

/* ---------- 無料特典（LINE） ---------- */
.free{display:grid;grid-template-columns:minmax(0,1fr);gap:34px;align-items:center}
@media(min-width:900px){
  .free{grid-template-columns:minmax(0,.44fr) minmax(0,.56fr);gap:52px}
}
.free h2.sh{color:var(--beaver)}
.free .slede{color:#5c4a38;max-width:52ch}
.free .eyebrow{color:var(--beaver)}
.free .eyebrow::before{background:var(--beaver-tan)}

/* 書影 — 白い表紙が cream 背景に沈まないよう、背後に淡い敷きを置いて浮かせる */
.free__art{position:relative;justify-self:center;width:min(470px,94%)}
.free__art::before{
  content:"";position:absolute;left:50%;top:48%;width:104%;aspect-ratio:1;
  transform:translate(-50%,-50%);border-radius:50%;z-index:0;
  background:radial-gradient(circle,rgba(107,74,47,.17) 0%,rgba(107,74,47,.07) 48%,rgba(107,74,47,0) 70%);
}
.free__art img{position:relative;z-index:1;width:100%;height:auto}
/* 「無料」リボン — 画像に焼かずテキストで置く（拡大しても潰れず、読み上げにも乗る） */
.free__ribbon{
  /* 本の右下角に少しだけ重ねる。位置は書影内の本の実座標（右端82.5% / 下端77%）から逆算 */
  position:absolute;right:6%;bottom:8%;z-index:2;display:grid;place-items:center;text-align:center;
  width:98px;height:98px;border-radius:50%;background:var(--beaver);color:#fff;
  box-shadow:0 10px 24px rgba(60,44,28,.34);transform:rotate(-5deg);
}
/* 円の内接幅は直径の約7割しかない。1行を長くせず、大小2段に分けて収める */
.free__ribbon b{display:block;font-family:var(--font-jp);font-weight:800;font-size:23px;
  line-height:1;letter-spacing:.06em}
.free__ribbon i{display:block;font-style:normal;font-weight:700;font-size:12.5px;
  line-height:1;margin-top:7px;letter-spacing:.06em;color:var(--beaver-cream)}
@media(min-width:900px){
  .free__ribbon{width:112px;height:112px;right:5%;bottom:8%}
  .free__ribbon b{font-size:26px}
  .free__ribbon i{font-size:13.5px;margin-top:8px}
}

/* 中身の7本 */
.giftlist{list-style:none;margin-top:26px;display:grid;gap:1px;
  background:rgba(107,74,47,.16);border:1px solid rgba(107,74,47,.16);border-radius:12px;overflow:hidden}
.giftlist li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:baseline;
  background:rgba(255,255,255,.72);padding:11px 16px;font-size:14px;line-height:1.6;color:#3f3226}
.giftlist .n{font-family:var(--font-en);font-weight:700;font-size:13px;color:var(--beaver-tan);letter-spacing:.06em}
.free__acts{margin-top:26px}
@media(max-width:559px){.free__acts .btn{width:100%}}
.steps{display:grid;gap:10px;margin-top:24px;counter-reset:st}
.step{
  display:grid;grid-template-columns:26px minmax(0,1fr);gap:12px;align-items:start;
  background:rgba(255,255,255,.62);border:1px solid rgba(107,74,47,.16);border-radius:12px;padding:13px 15px;
}
.step::before{
  counter-increment:st;content:counter(st);
  width:26px;height:26px;border-radius:50%;background:var(--tan-ink);color:#fff;
  display:grid;place-items:center;font-family:var(--font-en);font-weight:700;font-size:13.5px;line-height:1;
}
.step p{font-size:14px;line-height:1.75;color:#4a3a2a}
.step code{
  font-family:var(--font-sans);font-weight:700;background:rgba(107,74,47,.12);
  padding:2px 8px;border-radius:6px;color:var(--beaver);font-size:13.5px;
}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:11px;margin-top:32px;max-width:840px}
.qa{
  background:var(--white);border:1px solid var(--line-soft);border-radius:13px;overflow:hidden;
  transition:box-shadow 180ms var(--ease-out);
}
/* details の開閉を滑らかに。中身(::details-content)だけを動かすので、
   summary が複数行になっても崩れない。非対応ブラウザは従来どおり瞬時に開く。 */
@supports selector(::details-content) and (interpolate-size: allow-keywords){
  html{interpolate-size:allow-keywords}
  .qa::details-content{
    overflow:hidden;opacity:0;block-size:0;
    transition:opacity 180ms var(--ease-out),block-size 220ms var(--ease-out),
               content-visibility 220ms allow-discrete;
  }
  .qa[open]::details-content{opacity:1;block-size:auto}
}
.qa[open]{box-shadow:0 10px 26px rgba(20,32,58,.08)}
.qa>summary{
  list-style:none;cursor:pointer;padding:17px 52px 17px 20px;position:relative;
  font-family:var(--font-jp);font-weight:700;font-size:15.5px;line-height:1.6;text-wrap:pretty;
}
.qa>summary::-webkit-details-marker{display:none}
.qa>summary::after{
  content:"";position:absolute;right:22px;top:50%;width:9px;height:9px;
  border-right:2px solid var(--beaver-tan);border-bottom:2px solid var(--beaver-tan);
  transform:translateY(-70%) rotate(45deg);transition:transform 200ms var(--ease-out);
}
.qa[open]>summary::after{transform:translateY(-20%) rotate(225deg)}
.qa>summary{transition:background 140ms ease}
.qa>summary:active{background:var(--fill)}
@media(hover:hover) and (pointer:fine){.qa>summary:hover{background:var(--fill-2)}}
.qa__a{padding:0 20px 19px;font-size:14.5px;color:var(--slate);line-height:1.9}
.qa__a a{color:var(--tan-ink);text-decoration:underline;text-underline-offset:3px}

/* ---------- 最終CTA ---------- */
.last{text-align:center}
.last .eyebrow{justify-content:center}
.last .slede{margin-inline:auto;text-align:center}
.last__acts{display:flex;flex-wrap:wrap;gap:13px;justify-content:center;margin-top:30px}

/* ---------- footer ---------- */
.ft{background:var(--ink-deep);color:#93a0bb;padding-block:34px;font-size:13px}
.ft__in{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;justify-content:space-between}
.ft__links{display:flex;flex-wrap:wrap;gap:8px 20px}
.ft a{transition:color 140ms ease}
@media(hover:hover) and (pointer:fine){.ft a:hover{color:var(--beaver-cream)}}
.ft small{color:#93a0bb;font-family:var(--font-en);letter-spacing:.06em}

/* ---------- 半透明を減らす設定（§14）: 素材を不透明にして可読性を優先 ---------- */
@media(prefers-reduced-transparency:reduce){
  .hdr{background:var(--ink-deep);backdrop-filter:none;-webkit-backdrop-filter:none}
  .hdr::after{display:none}
  .step{background:#fff}
  .giftlist li{background:#fff}
}

/* ---------- コントラストを上げる設定（§14）: 面を近似不透明にし、境界を明示 ---------- */
@media(prefers-contrast:more){
  .hdr{background:var(--ink-deep);backdrop-filter:none;-webkit-backdrop-filter:none;
       border-bottom:1px solid rgba(255,255,255,.34)}
  .hdr::after{display:none}
  .card,.course,.row,.perk,.qa,.plan,.giftlist li,.step{border-color:var(--slate-2);background:#fff}
  .btn--outline,.btn--ghost{border-width:2px}
  .slede,.card__d,.course__d{color:var(--ink-2)}
}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  /* アニメーション（keyframes）は止める。transition は一律に殺さない —
     opacity・色・影の変化は状態を伝えるので残し、位置と拡大の変化だけ無効化する。 */
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important}
  .card,.course,.btn,.hero__in>*{transition-property:opacity,box-shadow,background,filter,color}
  .card:hover,.course:hover{transform:none}
  .btn:active{transform:none}
  .hero__in>*{transform:none}
  .qa::details-content{transition:opacity 180ms var(--ease-out),content-visibility 180ms allow-discrete;block-size:auto}
  .qa>summary::after{transition:none}
}