@charset "UTF-8";

/* ============================================
   Hachi Design studio — Kindle出版代行  v2
   ベネフィット先行 / 40〜50代 / 実物の本を見せる
   ============================================ */

:root{
  --bg:        #fdfbf7;
  --bg-alt:    #f4efe6;
  --bg-deep:   #0e1f2b;
  --ink:       #14252f;
  --ink-soft:  #47585f;
  --line:      #e2d9c9;
  --teal:      #1d7a75;
  --teal-dark: #125a56;
  --accent:    #b8502c;
  --gold:      #c9974a;
  --line-green:#06c755;
  --white:     #ffffff;

  --serif: "Yu Mincho","YuMincho","Hiragino Mincho ProN","HiraMinProN-W3",serif;
  --sans: "Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","YuGothic",system-ui,-apple-system,sans-serif;

  --wrap: 1120px;
  --gap: 104px;
  --pad-x: max(20px, calc((100vw - var(--wrap)) / 2));
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0; overflow-x:hidden;
  background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.95;
  -webkit-font-smoothing:antialiased; text-size-adjust:100%;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--teal-dark); }

.wrap{ width:min(var(--wrap),100% - 40px); margin-inline:auto; }
section{ padding-block:var(--gap); background:var(--bg); }

/* ---------- 見出し ---------- */
.sec-head{ margin-bottom:52px; max-width:46em; }
.sec-head.center{ margin-inline:auto; text-align:center; }
.sec-label{
  font-size:12.5px; letter-spacing:.26em; font-weight:700;
  color:var(--teal); margin:0 0 14px;
}
.sec-title{
  font-family:var(--serif); font-size:clamp(25px,3.6vw,36px);
  line-height:1.58; margin:0; font-weight:600; letter-spacing:.02em;
}
.sec-title em{ font-style:normal; color:var(--accent); }
.sec-lead{ margin:22px 0 0; color:var(--ink-soft); }

/* ---------- ヘッダー ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(253,251,247,.94); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.header-in{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding-block:15px; }
.brand{ text-decoration:none; color:inherit; white-space:nowrap; }
.brand strong{ font-family:var(--serif); font-size:20px; font-weight:600; letter-spacing:.05em; display:block; }
.brand span{ font-size:11px; color:var(--ink-soft); letter-spacing:.14em; }
.gnav{ display:flex; gap:26px; font-size:14.5px; white-space:nowrap; }
.gnav a{ text-decoration:none; color:var(--ink); }
.gnav a:hover{ color:var(--teal); }
.header-cta{ white-space:nowrap; }

/* ---------- ボタン ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:17px 32px; border-radius:8px; font-weight:700; font-size:16.5px;
  text-decoration:none; border:2px solid transparent; transition:.2s; line-height:1.4;
}
.btn-line{ background:var(--line-green); color:#fff; box-shadow:0 3px 0 #04a445; }
.btn-line:hover{ transform:translateY(1px); box-shadow:0 2px 0 #04a445; }
.btn-line.sm{ padding:11px 20px; font-size:14px; box-shadow:0 2px 0 #04a445; }
.btn-ghost{ border-color:var(--ink); color:var(--ink); }
.btn-ghost:hover{ background:var(--ink); color:#fff; }
.btn-light{ border-color:rgba(255,255,255,.6); color:#fff; }
.btn-light:hover{ background:#fff; color:var(--ink); }

/* ---------- 1. FV ---------- */
.fv{
  padding-block:76px 84px;
  background:
    radial-gradient(1200px 520px at 78% 22%, #fdf3e6 0%, rgba(253,243,230,0) 62%),
    linear-gradient(180deg,#fdfbf7 0%,#f7f2e9 100%);
  overflow:hidden;
}
.fv-grid{ display:grid; grid-template-columns:1.02fr .98fr; gap:48px; align-items:center; }
.fv-eyebrow{
  display:inline-block; font-size:13px; font-weight:700; letter-spacing:.12em;
  color:var(--teal-dark); background:rgba(29,122,117,.09);
  border-radius:999px; padding:7px 18px; margin:0 0 24px;
}
.fv h1{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(28px,3.6vw,44px); line-height:1.44;
  margin:0 0 24px; letter-spacing:.01em;
}
.fv h1 em{ font-style:normal; color:var(--accent); }
.fv h1 .sm{ display:block; font-size:.56em; color:var(--ink-soft); margin-bottom:10px; letter-spacing:.04em; }
.fv-sub{ font-size:17.5px; margin:0 0 34px; color:var(--ink-soft); }
.fv-actions{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.fv-note{ font-size:13.5px; color:var(--ink-soft); margin:18px 0 0; }
.fv-photo{ position:relative; }
.fv-photo img{ border-radius:12px; box-shadow:0 22px 54px rgba(20,37,47,.18); }
.fv-badge{
  position:absolute; left:-18px; bottom:-18px;
  background:var(--white); border:1px solid var(--line); border-radius:10px;
  padding:14px 20px; box-shadow:0 10px 26px rgba(20,37,47,.14); text-align:center;
}
.fv-badge b{ font-family:var(--serif); font-size:30px; color:var(--accent); display:block; line-height:1.1; }
.fv-badge span{ font-size:11.5px; color:var(--ink-soft); letter-spacing:.06em; }

/* ---------- 2. Before → After ---------- */
.ba{ background:var(--bg-alt); }
.ba-grid{ display:grid; grid-template-columns:1fr 88px 1fr; gap:0; align-items:stretch; }
.ba-card{ background:var(--white); border:1px solid var(--line); border-radius:12px; padding:36px 34px; }
.ba-card.after{ border-color:var(--teal); box-shadow:0 14px 34px rgba(29,122,117,.12); }
.ba-card h3{ font-family:var(--serif); font-size:21px; margin:0 0 6px; font-weight:600; }
.ba-card .lead{ font-size:13.5px; color:var(--ink-soft); margin:0 0 22px; letter-spacing:.06em; }
.ba-card ul{ list-style:none; margin:0; padding:0; }
.ba-card li{ padding:11px 0 11px 30px; position:relative; border-bottom:1px dashed var(--line); font-size:16px; }
.ba-card li:last-child{ border-bottom:0; }
.ba-card li::before{
  content:""; position:absolute; left:2px; top:20px; width:14px; height:8px;
  border-left:3px solid var(--teal); border-bottom:3px solid var(--teal); transform:rotate(-45deg);
}
.ba-card.before li::before{ border-color:#b3a894; }
.ba-card.before{ background:#faf7f1; }
.ba-arrow{ display:grid; place-items:center; }
.ba-arrow span{
  width:52px; height:52px; border-radius:50%; background:var(--teal); color:#fff;
  display:grid; place-items:center; font-size:22px; font-weight:700;
}
.ba-note{ margin:34px auto 0; text-align:center; max-width:44em; color:var(--ink-soft); font-size:15.5px; }

/* ---------- 3. 受け取るもの ---------- */
.deliver-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; }
.deliver-list{ list-style:none; margin:0; padding:0; counter-reset:d; }
.deliver-list li{
  counter-increment:d; position:relative; padding:20px 0 20px 58px;
  border-bottom:1px solid var(--line);
}
.deliver-list li::before{
  content:counter(d,decimal-leading-zero); position:absolute; left:0; top:22px;
  font-family:var(--serif); font-size:19px; color:var(--gold); font-weight:600;
}
.deliver-list b{ display:block; font-size:17.5px; font-family:var(--serif); font-weight:600; margin-bottom:2px; }
.deliver-list span{ font-size:15px; color:var(--ink-soft); }
.deliver-photo img{ border-radius:12px; box-shadow:0 16px 40px rgba(20,37,47,.16); }
.deliver-cap{ font-size:13px; color:var(--ink-soft); margin:14px 0 0; text-align:center; }

/* ---------- 4. 変化（ベネフィット3つ） ---------- */
.benefit{ background:var(--bg-deep); color:#fff; }
.benefit .sec-title{ color:#fff; }
.benefit .sec-lead{ color:#c6bfb2; }
.benefit-rows{ display:grid; gap:2px; }
.benefit-row{
  display:grid; grid-template-columns:110px 1fr; gap:32px; align-items:start;
  padding:34px 0; border-bottom:1px solid #24384a;
}
.benefit-row:last-child{ border-bottom:0; }
.benefit-row .no{ font-family:var(--serif); font-size:46px; color:var(--gold); line-height:1; }
.benefit-row h3{ font-family:var(--serif); font-size:23px; margin:0 0 12px; font-weight:600; color:#fff; }
.benefit-row p{ margin:0; color:#c6bfb2; }

/* ---------- 5. 悩み ---------- */
.checklist{ list-style:none; margin:0; padding:0; max-width:840px; }
.checklist li{ position:relative; padding:20px 0 20px 46px; border-bottom:1px solid var(--line); font-size:17.5px; }
.checklist li::before{
  content:""; position:absolute; left:6px; top:27px; width:18px; height:10px;
  border-left:3px solid var(--accent); border-bottom:3px solid var(--accent); transform:rotate(-45deg);
}
.answer-band{
  margin-top:44px; background:var(--white); border:1px solid var(--line);
  border-left:6px solid var(--teal); border-radius:6px; padding:32px 34px;
}
.answer-band p{ margin:0; font-size:19px; font-family:var(--serif); line-height:1.85; }

/* ---------- 6. 事例 ---------- */
.case-head{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.case-head img{ border-radius:12px; box-shadow:0 16px 40px rgba(20,37,47,.16); }
.case-meta{ list-style:none; margin:24px 0 0; padding:0; }
.case-meta li{ padding:12px 0; border-bottom:1px solid var(--line); display:flex; gap:16px; }
.case-meta b{ flex:0 0 100px; color:var(--teal-dark); font-size:14.5px; }
.tabs{ margin-top:60px; }
.tab-btns{ display:flex; flex-wrap:wrap; gap:8px; border-bottom:2px solid var(--line); }
.tab-btns button{
  appearance:none; background:none; border:0; cursor:pointer;
  font-family:var(--sans); font-size:15.5px; font-weight:700; color:var(--ink-soft);
  padding:14px 20px; border-bottom:3px solid transparent; margin-bottom:-2px;
}
.tab-btns button[aria-selected="true"]{ color:var(--teal-dark); border-bottom-color:var(--teal); }
.tab-panel{ padding-top:34px; }
.tab-panel[hidden]{ display:none; }
.tab-panel p.cap{ margin:0 0 24px; color:var(--ink-soft); font-size:15.5px; }
.grid-aplus{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.grid-aplus img,.grid-sns img,.grid-carousel img{ border:1px solid var(--line); border-radius:6px; }
.grid-sns{ display:grid; grid-template-columns:1.2fr .8fr; gap:16px; align-items:start; }
.grid-carousel{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }

/* ---------- 7. 実績 ---------- */
.proof{ background:var(--bg-alt); }
.num-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; text-align:center; margin-bottom:56px; }
.num-item b{ display:block; font-family:var(--serif); font-weight:600; font-size:clamp(42px,6vw,62px); line-height:1.1; color:var(--accent); }
.num-item b small{ font-size:.42em; margin-left:4px; color:var(--ink-soft); }
.num-item span{ display:block; margin-top:8px; font-size:14.5px; color:var(--ink-soft); }
.cover-strip{ display:grid; grid-template-columns:repeat(13,1fr); gap:8px; }
.cover-strip img{ border-radius:3px; box-shadow:0 6px 16px rgba(20,37,47,.2); aspect-ratio:1600/2560; object-fit:cover; }
.proof-note{ margin:30px 0 0; text-align:center; color:var(--ink-soft); font-size:14.5px; }

/* ---------- 8. プラン ---------- */
.plan-table-wrap{ overflow-x:auto; }
.plan-table{ width:100%; border-collapse:collapse; min-width:840px; background:var(--white); }
.plan-table th,.plan-table td{ border:1px solid var(--line); padding:18px 20px; text-align:left; vertical-align:top; font-size:16px; }
.plan-table thead th{ background:var(--bg-alt); }
.plan-table thead th:first-child{ width:200px; }
.plan-table .plan-name{ font-family:var(--serif); font-size:19px; font-weight:600; display:block; margin-bottom:6px; }
.plan-table .plan-for{ font-size:13.5px; color:var(--ink-soft); display:block; }
.plan-table td.center{ text-align:center; }
.plan-table .yes{ color:var(--teal-dark); font-weight:700; }
.plan-table .no{ color:#a89e8e; }
.plan-table .price{ font-family:var(--serif); font-size:25px; font-weight:600; color:var(--accent); display:block; }
.plan-table .price small{ font-size:13px; color:var(--ink-soft); font-family:var(--sans); display:block; margin-top:4px; }
.badge-rec{ display:inline-block; background:var(--accent); color:#fff; font-size:11.5px; font-weight:700; padding:3px 10px; border-radius:3px; margin-bottom:8px; letter-spacing:.06em; }
.price-note{ margin:24px 0 0; font-size:14px; color:var(--ink-soft); }
.plan-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:36px; }

/* ---------- 9. 進め方 ---------- */
.steps{ list-style:none; counter-reset:s; margin:0; padding:0; display:grid; gap:2px; }
.steps li{ counter-increment:s; position:relative; background:var(--white); border:1px solid var(--line); padding:26px 30px 26px 96px; }
.steps li::before{ content:counter(s,decimal-leading-zero); position:absolute; left:30px; top:24px; font-family:var(--serif); font-size:28px; color:var(--teal); font-weight:600; }
.steps h3{ margin:0 0 6px; font-size:18px; font-family:var(--serif); font-weight:600; }
.steps p{ margin:0; color:var(--ink-soft); font-size:15.5px; }

/* ---------- 10. 作る人 ---------- */
.profile{ display:grid; grid-template-columns:320px 1fr; gap:52px; align-items:start; }
.profile-photo{ background:var(--bg-alt); border:1px solid var(--line); border-radius:10px; aspect-ratio:4/5; display:grid; place-items:center; text-align:center; color:var(--ink-soft); font-size:13.5px; padding:20px; overflow:hidden; }
.profile-photo img{ width:100%; height:100%; object-fit:cover; }
.profile h3{ font-family:var(--serif); font-size:26px; margin:0 0 6px; font-weight:600; }
.profile .pen{ color:var(--ink-soft); font-size:14.5px; margin:0 0 26px; }
.profile p{ margin:0 0 18px; }
.manga-strip{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:30px; }
.manga-strip img{ border:1px solid var(--line); border-radius:6px; }
.manga-cap{ font-size:13.5px; color:var(--ink-soft); margin:12px 0 0; }

/* ---------- 11. FAQ ---------- */
.faq{ max-width:880px; }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{ cursor:pointer; list-style:none; padding:24px 44px 24px 34px; position:relative; font-size:17.5px; font-weight:700; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::before{ content:"Q"; position:absolute; left:0; top:24px; font-family:var(--serif); color:var(--teal); font-weight:600; }
.faq summary::after{ content:""; position:absolute; right:14px; top:32px; width:11px; height:11px; border-right:2px solid var(--ink-soft); border-bottom:2px solid var(--ink-soft); transform:rotate(45deg); transition:.2s; }
.faq details[open] summary::after{ transform:rotate(-135deg); top:36px; }
.faq .a{ padding:0 20px 26px 34px; color:var(--ink-soft); }
.faq .a p{ margin:0 0 12px; }
.faq .a p:last-child{ margin-bottom:0; }

/* ---------- 12. CTA ---------- */
.cta{ background:var(--teal); color:#fff; text-align:center; }
.cta h2{ font-family:var(--serif); font-size:clamp(24px,3.6vw,34px); margin:0 0 18px; font-weight:600; line-height:1.6; }
.cta p{ margin:0 auto 34px; max-width:38em; color:#daeeec; }
.cta .btn-line{ font-size:18px; padding:20px 46px; }
.cta-sub{ margin:26px 0 0; font-size:14px; color:#c9e4e2; }

/* ---------- フッター ---------- */
.site-footer{ background:var(--bg-deep); color:#c9c2b6; padding-block:56px 32px; font-size:14.5px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; }
.footer-grid h4{ color:#fff; font-size:14px; margin:0 0 14px; letter-spacing:.06em; }
.footer-grid ul{ list-style:none; margin:0; padding:0; }
.footer-grid li{ margin-bottom:9px; }
.footer-grid a{ color:#c9c2b6; text-decoration:none; }
.footer-grid a:hover{ color:#fff; text-decoration:underline; }
.footer-brand strong{ font-family:var(--serif); font-size:19px; color:#fff; display:block; margin-bottom:8px; }
.copy{ margin-top:44px; padding-top:20px; border-top:1px solid #24384a; font-size:12.5px; color:#8a8479; }

/* ---------- 固定CTA・モーション ---------- */
.sticky-cta{ display:none; }
.motion-toggle{
  display:none; position:fixed; right:16px; bottom:16px; z-index:70;
  appearance:none; cursor:pointer; background:var(--white); color:var(--ink-soft);
  border:1px solid var(--line); border-radius:999px;
  font-family:var(--sans); font-size:12.5px; padding:9px 16px;
  box-shadow:0 2px 10px rgba(20,37,47,.12);
}
.motion-toggle.is-shown{ display:inline-flex; }
.motion-toggle:hover{ color:var(--ink); border-color:var(--ink-soft); }

.js [data-reveal]{ opacity:0; transform:translateY(18px); transition:opacity .6s ease-out,transform .6s ease-out; }
.js [data-reveal].is-visible{ opacity:1; transform:none; }
body.no-motion [data-reveal]{ opacity:1 !important; transform:none !important; transition:none !important; }

.js .fv-eyebrow,.js .fv h1,.js .fv-sub,.js .fv-actions,.js .fv-note,.js .fv-photo{
  opacity:0; transform:translateY(20px); transition:opacity .7s ease-out,transform .7s ease-out;
}
.js.is-loaded .fv-eyebrow,.js.is-loaded .fv h1,.js.is-loaded .fv-sub,
.js.is-loaded .fv-actions,.js.is-loaded .fv-note,.js.is-loaded .fv-photo{ opacity:1; transform:none; }
.js.is-loaded .fv h1{ transition-delay:.08s; }
.js.is-loaded .fv-sub{ transition-delay:.18s; }
.js.is-loaded .fv-actions{ transition-delay:.26s; }
.js.is-loaded .fv-note{ transition-delay:.32s; }
.js.is-loaded .fv-photo{ transition-delay:.14s; }
body.no-motion .fv-eyebrow,body.no-motion .fv h1,body.no-motion .fv-sub,
body.no-motion .fv-actions,body.no-motion .fv-note,body.no-motion .fv-photo{
  opacity:1 !important; transform:none !important; transition:none !important;
}

/* ---------- レスポンシブ ---------- */
@media (max-width:960px){
  :root{ --gap:76px; }
  .gnav{ display:none; }
  .fv-grid,.deliver-grid,.case-head{ grid-template-columns:1fr; gap:40px; }
  .ba-grid{ grid-template-columns:1fr; gap:18px; }
  .ba-arrow{ padding:4px 0; }
  .ba-arrow span{ transform:rotate(90deg); }
  .profile{ grid-template-columns:1fr; gap:32px; }
  .profile-photo{ max-width:280px; }
  .grid-sns{ grid-template-columns:1fr; }
  .grid-aplus{ grid-template-columns:1fr; }
  .grid-carousel{ grid-template-columns:repeat(3,1fr); }
  .cover-strip{ grid-template-columns:repeat(7,1fr); gap:10px; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .benefit-row{ grid-template-columns:70px 1fr; gap:20px; }
  .sticky-cta{
    display:block; position:fixed; left:0; right:0; bottom:0; z-index:60;
    background:rgba(253,251,247,.96); border-top:1px solid var(--line);
    padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px)); backdrop-filter:blur(8px);
  }
  .sticky-cta .btn{ width:100%; max-width:520px; margin-inline:auto; }
  .motion-toggle{ bottom:calc(84px + env(safe-area-inset-bottom,0px)); right:12px; }
  body{ padding-bottom:80px; }
}

@media (max-width:680px){
  :root{ --gap:62px; }
  body{ font-size:16.5px; }
  .header-cta{ display:none; }
  .fv{ padding-block:48px 60px; }
  .fv-badge{ left:auto; right:8px; bottom:-14px; padding:11px 16px; }
  .fv-badge b{ font-size:24px; }
  .num-grid{ grid-template-columns:1fr; gap:0; margin-bottom:40px; }
  .num-item{ padding:18px 0; border-bottom:1px solid var(--line); }
  .num-item:last-child{ border-bottom:0; }
  .cover-strip{ grid-template-columns:repeat(5,1fr); gap:7px; }
  .grid-carousel{ grid-template-columns:repeat(2,1fr); }
  .steps li{ padding:22px; }
  .steps li::before{ position:static; display:block; margin-bottom:6px; }
  .footer-grid{ grid-template-columns:1fr; gap:28px; }
  .ba-card{ padding:28px 24px; }
  .answer-band{ padding:24px 22px; }
  .answer-band p{ font-size:17px; }
  .benefit-row{ grid-template-columns:1fr; gap:10px; padding:28px 0; }
  .benefit-row .no{ font-size:34px; }
}

/* ============================================
   v3 追加 － 2プラン＋オプション / プロモーション訴求
   ============================================ */

/* ---------- プロモーションの重要性 ---------- */
.promo{ background:var(--bg-deep); color:#fff; }
.promo .sec-title{ color:#fff; }
.promo .sec-lead{ color:#c6bfb2; }
.promo-lead{
  font-family:var(--serif); font-size:clamp(21px,2.8vw,28px);
  line-height:1.75; margin:0 0 44px; max-width:26em;
}
.promo-lead em{ font-style:normal; color:var(--gold); }
.promo-compare{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-bottom:44px; }
.promo-col{ border:1px solid #26394a; border-radius:12px; padding:30px 30px 26px; background:rgba(255,255,255,.03); }
.promo-col.good{ border-color:var(--gold); background:rgba(201,151,74,.08); }
.promo-col h3{ font-family:var(--serif); font-size:20px; margin:0 0 18px; font-weight:600; color:#fff; }
.promo-col h3 small{ display:block; font-family:var(--sans); font-size:12px; letter-spacing:.16em; color:#8b9aa4; margin-bottom:8px; font-weight:400; }
.promo-col ul{ list-style:none; margin:0; padding:0; }
.promo-col li{ padding:10px 0 10px 26px; position:relative; color:#c6bfb2; font-size:15.5px; border-bottom:1px solid #1e3040; }
.promo-col li:last-child{ border-bottom:0; }
.promo-col li::before{ content:"×"; position:absolute; left:2px; top:10px; color:#7c8b95; font-weight:700; }
.promo-col.good li{ color:#e8e2d6; }
.promo-col.good li::before{ content:"○"; color:var(--gold); }
.promo-close{
  border-left:4px solid var(--gold); padding:6px 0 6px 26px;
  font-family:var(--serif); font-size:19px; line-height:1.8; color:#fff; max-width:40em;
}

/* ---------- プラン2つ ---------- */
.plan2{ display:grid; grid-template-columns:1fr 1fr; gap:26px; align-items:start; }
.plan-card{
  background:var(--white); border:1px solid var(--line); border-radius:14px;
  padding:38px 36px 34px; display:flex; flex-direction:column; height:100%;
}
.plan-card.main{ border:2px solid var(--teal); box-shadow:0 18px 44px rgba(29,122,117,.14); }
.plan-tag{
  display:inline-block; align-self:flex-start; font-size:11.5px; font-weight:700; letter-spacing:.1em;
  background:var(--accent); color:#fff; padding:4px 12px; border-radius:4px; margin-bottom:14px;
}
.plan-card h3{ font-family:var(--serif); font-size:26px; margin:0 0 6px; font-weight:600; }
.plan-card .for{ font-size:14.5px; color:var(--ink-soft); margin:0 0 22px; }
.plan-price{ font-family:var(--serif); font-size:38px; color:var(--accent); font-weight:600; line-height:1.2; }
.plan-price small{ font-family:var(--sans); font-size:13px; color:var(--ink-soft); margin-left:8px; }
.plan-card .price-wrap{ padding:18px 0 22px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-bottom:24px; }
.plan-card ul{ list-style:none; margin:0 0 26px; padding:0; flex:1; }
.plan-card li{ padding:11px 0 11px 30px; position:relative; border-bottom:1px dashed var(--line); font-size:16px; }
.plan-card li:last-child{ border-bottom:0; }
.plan-card li::before{
  content:""; position:absolute; left:2px; top:20px; width:14px; height:8px;
  border-left:3px solid var(--teal); border-bottom:3px solid var(--teal); transform:rotate(-45deg);
}
.plan-card li.na{ color:#9d9384; }
.plan-card li.na::before{ content:"—"; border:0; transform:none; top:11px; left:4px; color:#b9ae9d; width:auto; height:auto; }
.plan-card .btn{ width:100%; }

/* ---------- オプション ---------- */
.opt-intro{
  background:var(--white); border:1px solid var(--line); border-left:6px solid var(--gold);
  border-radius:6px; padding:30px 34px; margin-bottom:44px;
}
.opt-intro p{ margin:0; font-family:var(--serif); font-size:19px; line-height:1.85; }
.opt-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.opt-card{
  background:var(--white); border:1px solid var(--line); border-radius:10px;
  padding:26px 28px; display:grid; grid-template-columns:1fr auto; gap:18px; align-items:start;
}
.opt-card h4{ font-family:var(--serif); font-size:19px; margin:0 0 8px; font-weight:600; }
.opt-card p{ margin:0; font-size:15px; color:var(--ink-soft); line-height:1.8; }
.opt-price{ text-align:right; white-space:nowrap; }
.opt-price b{ font-family:var(--serif); font-size:21px; color:var(--accent); display:block; line-height:1.3; }
.opt-price span{ font-size:12px; color:var(--ink-soft); }
.opt-note{ margin:32px 0 0; font-size:14.5px; color:var(--ink-soft); }

@media (max-width:960px){
  .promo-compare{ grid-template-columns:1fr; gap:16px; }
  .plan2{ grid-template-columns:1fr; }
  .opt-grid{ grid-template-columns:1fr; }
}
@media (max-width:680px){
  .plan-card{ padding:30px 24px 28px; }
  .plan-price{ font-size:32px; }
  .opt-card{ grid-template-columns:1fr; gap:10px; }
  .opt-price{ text-align:left; }
  .opt-intro{ padding:24px 22px; }
  .opt-intro p{ font-size:17px; }
  .promo-close{ font-size:17px; padding-left:18px; }
}

/* v3: 顔写真が入ったのでプレースホルダ用の指定を解除 */
.profile-photo{ padding:0; display:block; }
.profile-photo img{ width:100%; height:100%; object-fit:cover; object-position:center top; }


/* ==========================================================
   v4 追加・上書き
   「文章・テキスト出版」版 / 画像前面FV / アイコン図解 / 文章圧縮
   ここから下が v3 の指定を上書きする。上の記述は消していない。
   ========================================================== */

/* ---------- アイコン ---------- */
.icon-defs{ position:absolute; width:0; height:0; overflow:hidden; }
.ic{
  width:22px; height:22px; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
}
.ic-lg{ width:34px; height:34px; stroke-width:1.45; }

/* ---------- セクション背景（明示指定） ---------- */
.ba{ background:var(--bg-alt); }
#deliver{ background:var(--bg); }
.change{ background:var(--bg-deep); color:#fff; }
#worries{ background:var(--bg); }
#case{ background:var(--bg-alt); }
.proof{ background:var(--bg); }
#plans{ background:var(--bg-alt); }
.options{ background:var(--bg); }
#flow{ background:var(--bg-alt); }
#profile{ background:var(--bg); }
#faq{ background:var(--bg-alt); }

/* ==========================================================
   1. FV — 画像を前面に、その上に文字
   ========================================================== */
.hero{
  position:relative; overflow:hidden;
  padding-block:64px 0;
  background:
    radial-gradient(1100px 520px at 78% 30%, #fdf3e6 0%, rgba(253,243,230,0) 62%),
    linear-gradient(180deg,#fdfbf7 0%,#f6f1e8 100%);
}
.hero-grid{ display:grid; grid-template-columns:1.02fr 1.08fr; gap:52px; align-items:center; }
.hero-in{ position:relative; z-index:2; padding-block:24px 56px; }
.hero-eyebrow{
  display:inline-block; margin:0 0 22px; padding:7px 18px; border-radius:999px;
  font-size:13px; font-weight:700; letter-spacing:.12em;
  color:var(--teal-dark); background:rgba(29,122,117,.10);
}
.hero h1{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(26px,3.3vw,43px); line-height:1.42;
  margin:0 0 22px; letter-spacing:.01em; color:var(--ink);
}
.hero h1 em{ font-style:normal; color:var(--accent); }
.hero h1 .sm{
  display:block; font-size:.52em; color:var(--ink-soft);
  margin-bottom:12px; letter-spacing:.05em; font-weight:400;
}
.hero-sub{ font-size:17.5px; margin:0 0 32px; color:var(--ink-soft); }
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.hero-note{ margin:20px 0 0; font-size:13.5px; color:var(--ink-soft); }

/* 写真は絶対に切らない。全体を見せる */
.hero-photo{ margin:0; }
.hero-photo img{
  width:100%; height:auto; display:block;
  border-radius:14px; box-shadow:0 26px 60px rgba(20,37,47,.20);
}
.hero-photo figcaption{
  margin-top:14px; text-align:center; font-size:13px; color:var(--ink-soft);
}

.hero-stats{
  position:relative; z-index:2; margin:0; padding:0; list-style:none;
  display:grid; grid-template-columns:repeat(3,1fr);
  background:var(--bg-deep); border-top:1px solid rgba(255,255,255,.12);
}
.hero-stats li{
  padding:22px 16px; text-align:center; color:#fff; min-width:0;
  border-left:1px solid rgba(255,255,255,.12);
}
.hero-stats li:first-child{ border-left:0; }
.hero-stats b{
  display:block; font-family:var(--serif); font-weight:600;
  font-size:clamp(26px,3.4vw,36px); line-height:1.15; color:var(--gold);
}
.hero-stats b small{ font-size:.42em; margin-left:3px; color:#e4ebee; }
.hero-stats span{ display:block; margin-top:4px; font-size:12.5px; color:#b3bfc5; letter-spacing:.04em; }

/* 動きを止めるボタン（FV内） */
.hero .motion-toggle,
.hero .motion-toggle.is-shown{
  position:static; display:inline-flex; align-items:center; gap:7px;
  margin-top:22px; box-shadow:none;
  background:transparent; color:var(--ink-soft);
  border:1px solid var(--line); border-radius:999px;
  font-size:12.5px; padding:8px 16px; cursor:pointer;
}
.hero .motion-toggle:hover{ background:var(--bg-alt); color:var(--ink); border-color:var(--ink-soft); }
.hero .motion-toggle .ic{ width:15px; height:15px; }

/* FVの読み込み演出（.fv → .hero へ差し替え） */
.js .hero-eyebrow,.js .hero h1,.js .hero-sub,.js .hero-actions,.js .hero-note,.js .hero-stats,.js .hero-photo{
  opacity:0; transform:translateY(20px); transition:opacity .7s ease-out,transform .7s ease-out;
}
.js.is-loaded .hero-eyebrow,.js.is-loaded .hero h1,.js.is-loaded .hero-sub,
.js.is-loaded .hero-actions,.js.is-loaded .hero-note,.js.is-loaded .hero-stats,
.js.is-loaded .hero-photo{ opacity:1; transform:none; }
.js.is-loaded .hero h1{ transition-delay:.08s; }
.js.is-loaded .hero-sub{ transition-delay:.18s; }
.js.is-loaded .hero-actions{ transition-delay:.26s; }
.js.is-loaded .hero-note{ transition-delay:.32s; }
.js.is-loaded .hero-stats{ transition-delay:.38s; }
.js.is-loaded .hero-photo{ transition-delay:.14s; }
body.no-motion .hero-eyebrow,body.no-motion .hero h1,body.no-motion .hero-sub,
body.no-motion .hero-actions,body.no-motion .hero-note,body.no-motion .hero-stats,body.no-motion .hero-photo{
  opacity:1 !important; transform:none !important; transition:none !important;
}

/* ==========================================================
   2. あなたがすること / お返しするもの
   ========================================================== */
.ba-ic{
  width:52px; height:52px; border-radius:50%; display:grid; place-items:center;
  background:rgba(29,122,117,.10); color:var(--teal-dark); margin-bottom:16px;
}
.ba-ic .ic{ width:26px; height:26px; }
.ba-card.before .ba-ic{ background:rgba(184,80,44,.10); color:var(--accent); }
.ba-card h3{ margin:0 0 18px; }
.ba-arrow{ color:var(--teal); }
.ba-arrow .ic{ width:34px; height:34px; stroke-width:1.6; }

/* ==========================================================
   3. 届くもの — アイコンカード
   ========================================================== */
.dv-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.dv-card{
  background:var(--white); border:1px solid var(--line); border-radius:12px;
  padding:30px 28px 28px;
}
.dv-card .ic-lg{ color:var(--teal); margin-bottom:16px; }
.dv-card h3{ font-family:var(--serif); font-size:19px; font-weight:600; margin:0 0 8px; }
.dv-card p{ margin:0; font-size:15px; color:var(--ink-soft); line-height:1.8; }
.dv-photo{ margin-top:44px; text-align:center; }
.dv-photo img{
  border-radius:12px; box-shadow:0 16px 40px rgba(20,37,47,.16);
  margin-inline:auto; max-width:760px; width:100%;
}
.dv-photo p{ margin:16px 0 0; font-size:14px; color:var(--ink-soft); }

/* ==========================================================
   4. どう変わるか
   ========================================================== */
.change .sec-title{ color:#fff; }
.change .sec-lead{ color:#c6bfb2; }
.change .sec-label{ color:var(--gold); }
.ch-list{ display:grid; gap:2px; }
.ch-row{
  display:grid; grid-template-columns:200px 1fr 34px 1.25fr;
  gap:20px; align-items:center;
  padding:24px 4px; border-bottom:1px solid #1e3040;
}
.ch-row:last-child{ border-bottom:0; }
.ch-key{
  display:flex; align-items:center; gap:10px;
  font-family:var(--serif); font-size:18px; font-weight:600; color:#fff;
}
.ch-key .ic{ color:var(--gold); width:24px; height:24px; }
.ch-b{ color:#8b9aa4; font-size:15.5px; }
.ch-b b{ color:#a7b4bc; font-weight:700; }
.ch-ar{ color:var(--gold); width:28px; height:28px; }
.ch-a{ color:#fff; font-size:17px; }
.ch-a b{ color:var(--gold); font-family:var(--serif); font-size:1.3em; font-weight:600; }
.ch-close{
  margin:48px 0 0; border-left:4px solid var(--gold); padding:6px 0 6px 26px;
  font-family:var(--serif); font-size:19px; line-height:1.85; color:#fff; max-width:40em;
}

/* ==========================================================
   5. 悩み
   ========================================================== */
.answer-band{
  display:flex; align-items:flex-start; gap:20px;
}
.answer-band .ic-lg{ color:var(--teal); margin-top:4px; }
.answer-band p{ margin:0; }

/* ==========================================================
   6. 制作事例
   ========================================================== */
.case-head h3{ font-family:var(--serif); font-size:25px; margin:0 0 10px; font-weight:600; }
.case-desc{ margin:0; color:var(--ink-soft); font-size:15.5px; }
.case-head img{ border-radius:14px; }
.case-count{ display:flex; gap:52px; margin-top:28px; }
.case-count b{
  display:block; font-family:var(--serif); font-size:38px; font-weight:600;
  color:var(--accent); line-height:1.1;
}
.case-count span{ display:block; font-size:13.5px; color:var(--ink-soft); margin-top:2px; }
.case-detail{ margin-top:52px; border-top:1px solid var(--line); }
.case-detail > summary{
  cursor:pointer; list-style:none; display:flex; align-items:center; gap:12px;
  padding:24px 2px; font-weight:700; font-size:16.5px; color:var(--teal-dark);
}
.case-detail > summary::-webkit-details-marker{ display:none; }
.case-detail > summary:hover{ color:var(--ink); }
.case-detail[open] > summary{ border-bottom:1px solid var(--line); }
.case-detail .tabs{ margin-top:34px; }
.tab-panel p.cap{ margin:10px 0 22px; }

/* ==========================================================
   9. オプション — アイコンカード
   ========================================================== */
.opt-grid{ grid-template-columns:repeat(3,1fr); gap:18px; }
.opt-card{
  display:flex; flex-direction:column; padding:30px 28px 26px; position:relative;
}
.opt-card .ic-lg{ color:var(--gold); margin-bottom:14px; }
.opt-card h4{ margin:0 0 8px; font-size:18px; }
.opt-card p{ margin:0 0 18px; }
.opt-card p small{ font-size:13px; }
.opt-card .opt-price{
  display:inline-block; align-self:flex-start; margin-top:auto;
  text-align:left; white-space:nowrap;
  font-size:13px; font-weight:700; letter-spacing:.04em;
  color:var(--accent); background:rgba(184,80,44,.09);
  border-radius:999px; padding:5px 14px;
}

/* ==========================================================
   11. 作る人 — 丸い顔写真・3ステップ
   ========================================================== */
.pf-steps{
  display:grid; grid-template-columns:1fr 32px 1fr 32px 1fr;
  gap:16px; align-items:center; margin-bottom:56px;
}
.pf-step{
  background:var(--white); border:1px solid var(--line); border-radius:12px;
  padding:26px 24px; text-align:center;
}
.pf-step .ic-lg{ color:var(--teal); margin:0 auto 12px; }
.pf-step b{ display:block; font-family:var(--serif); font-size:19px; font-weight:600; margin-bottom:6px; }
.pf-step span{ display:block; font-size:14px; color:var(--ink-soft); line-height:1.75; }
.pf-ar{ color:var(--line); width:28px; height:28px; margin-inline:auto; }

.profile{ grid-template-columns:236px 1fr; gap:48px; align-items:start; }
.profile-photo{
  background:none; border:0; border-radius:0; aspect-ratio:auto;
  display:block; padding:0; overflow:visible; text-align:center;
}
.profile-photo img{
  width:168px; height:168px; border-radius:50%; object-fit:cover; object-position:center top;
  margin:0 auto 18px; border:4px solid var(--white);
  box-shadow:0 10px 28px rgba(20,37,47,.16);
}
.profile-photo h3{ font-size:22px; margin:0 0 4px; }
.profile-photo h3 small{
  display:block; font-family:var(--sans); font-size:12px;
  color:var(--ink-soft); font-weight:400; letter-spacing:.08em; margin-top:4px;
}
.profile-photo .pen{ margin:0; font-size:13.5px; line-height:1.8; }
.profile-body p{ margin:0 0 20px; }
.pf-close{
  font-family:var(--serif); font-size:19px; color:var(--ink);
  border-left:4px solid var(--teal); padding:4px 0 4px 20px; margin:26px 0 22px !important;
}
.pf-name{ font-size:14.5px; color:var(--ink-soft); margin-bottom:0 !important; }

.manga-block{ margin-top:56px; padding-top:44px; border-top:1px solid var(--line); }
.manga-strip{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; max-width:760px; margin-inline:auto; }
.manga-cap{ margin-top:14px; text-align:center; }

/* ---------- モーション停止ボタン（v4はFV内に置いた。下の .hero .motion-toggle が正） ---------- */
.motion-toggle .ic{ width:15px; height:15px; }

/* ==========================================================
   レスポンシブ（v4）
   ========================================================== */
@media (max-width:1000px){
  .dv-grid{ grid-template-columns:repeat(2,1fr); }
  .opt-grid{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:960px){
  .hero{ padding-block:44px 0; }
  .hero-grid{ grid-template-columns:1fr; gap:34px; }
  /* 狭い画面は、写真を先に見せる（本の印象を先に届ける） */
  .hero-in{ padding-block:0 8px; order:1; }
  .hero-photo{ order:0; }
  .ba-arrow .ic{ transform:rotate(90deg); }
  .ch-row{ grid-template-columns:1fr; gap:10px; padding:22px 4px; }
  .ch-ar{ transform:rotate(90deg); margin-left:2px; }
  .pf-steps{ grid-template-columns:1fr; gap:12px; }
  .pf-ar{ transform:rotate(90deg); }
  .profile{ grid-template-columns:1fr; gap:32px; }
  .profile-photo{ max-width:none; }
  .case-detail .tabs{ margin-top:26px; }
}

@media (max-width:680px){
  .hero-in{ padding-block:64px 44px; }
  .hero h1{ font-size:clamp(23px,6.1vw,31px); }
  .hero-sub{ font-size:16.5px; }
  .hero-actions .btn{ width:100%; text-align:center; justify-content:center; }
  .hero-stats li{ padding:14px 6px; }
  .hero-stats b{ font-size:24px; }
  .hero-stats span{ font-size:10.5px; letter-spacing:0; }
  .dv-grid{ grid-template-columns:1fr; }
  .dv-card{ padding:24px 22px; }
  .opt-grid{ grid-template-columns:1fr; }
  .opt-card{ padding:24px 22px; }
  .ch-close{ font-size:17px; padding-left:18px; }
  .ch-key{ font-size:17px; }
  .answer-band{ flex-direction:column; gap:12px; }
  .case-count{ gap:26px; }
  .case-count b{ font-size:32px; }
  .manga-strip{ gap:10px; }
  .pf-close{ font-size:17px; }
}


/* ==========================================================
   v4 追記 － 確定価格版（2026-08-18）
   4プラン／金額つきオプション／フルパック／漫画事例／TOPへ戻る
   ========================================================== */

/* アイコンを一回り大きく */
.ic{ width:24px; height:24px; }
.ic-lg{ width:42px; height:42px; stroke-width:1.4; }
.dv-card .ic-lg,.opt-card .ic-lg{ margin-bottom:16px; }
.ba-ic{ width:60px; height:60px; }
.ba-ic .ic{ width:30px; height:30px; }
.ba-arrow .ic{ width:38px; height:38px; }
.pf-step .ic-lg{ width:44px; height:44px; }
.answer-band .ic-lg{ width:38px; height:38px; }
.ch-key .ic{ width:26px; height:26px; }
.ch-ar{ width:30px; height:30px; }

/* ---------- プラン（2グループ×2コース） ---------- */
.plan-group{ margin-bottom:56px; }
.plan-group:last-of-type{ margin-bottom:40px; }
.plan-group-title{
  display:flex; align-items:center; gap:14px;
  font-family:var(--serif); font-size:25px; font-weight:600;
  margin:0 0 26px; padding-bottom:16px; border-bottom:1px solid var(--line);
}
.plan-group-title .ic-lg{ color:var(--teal); }
.plan-group-title small{
  font-family:var(--sans); font-size:13px; font-weight:400; color:var(--ink-soft);
  background:var(--bg-alt); border-radius:999px; padding:4px 12px; margin-left:2px;
}
.plan-card h4{ font-family:var(--serif); font-size:24px; margin:0 0 6px; font-weight:600; }
.price-sub{ display:block; margin-top:6px; font-size:13px; color:var(--ink-soft); }
.plan-note{ margin:0; font-size:14px; color:var(--ink-soft); }

/* ---------- 折りたたみ（細かいことはワンタップで） ---------- */
.mini-detail{
  background:var(--white); border:1px solid var(--line); border-radius:12px;
  margin-bottom:16px;
}
.mini-detail > summary{
  cursor:pointer; list-style:none; display:flex; align-items:center; gap:12px;
  padding:20px 24px; font-weight:700; font-size:16px; color:var(--teal-dark);
}
.mini-detail > summary::-webkit-details-marker{ display:none; }
.mini-detail > summary::after{
  content:""; margin-left:auto; width:10px; height:10px;
  border-right:2px solid var(--ink-soft); border-bottom:2px solid var(--ink-soft);
  transform:rotate(45deg) translate(-3px,-3px); transition:.2s;
}
.mini-detail[open] > summary::after{ transform:rotate(-135deg) translate(-3px,-3px); }
.mini-detail > summary:hover{ color:var(--ink); }
.mini-body{ padding:0 24px 24px; }
.mini-note{ margin:14px 0 0; font-size:13.5px; color:var(--ink-soft); }
.mini-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:26px; }
.mini-row .mini-detail{ margin-bottom:0; }

.table-scroll{ overflow-x:auto; }
.cmp-table{ width:100%; border-collapse:collapse; min-width:600px; font-size:15.5px; }
.cmp-table th,.cmp-table td{ border-bottom:1px solid var(--line); padding:14px 16px; text-align:left; }
.cmp-table thead th{ background:var(--bg-alt); font-size:14.5px; }
.cmp-table thead th:nth-child(3){ color:var(--teal-dark); }
.cmp-table td:first-child{ color:var(--ink-soft); width:34%; }
.cmp-table b{ color:var(--ink); }

.kv-list{ list-style:none; margin:0; padding:0; }
.kv-list li{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding:12px 0; border-bottom:1px dashed var(--line); font-size:15.5px;
}
.kv-list li:last-child{ border-bottom:0; }
.kv-list span{ color:var(--ink-soft); }
.kv-list b{ font-family:var(--serif); font-size:19px; color:var(--accent); white-space:nowrap; }
.kv-list b small{ font-family:var(--sans); font-size:11.5px; color:var(--ink-soft); margin-left:3px; }

/* ---------- オプション（金額つき／詳細はワンタップ） ---------- */
.opt-card .opt-lead{ margin:0 0 16px; font-size:15px; color:var(--ink-soft); line-height:1.8; }
.opt-card .opt-price{
  display:block; align-self:flex-start; margin-top:auto;
  font-family:var(--serif); font-size:27px; font-weight:600; color:var(--accent);
  background:none; border-radius:0; padding:0; white-space:nowrap; line-height:1.2;
}
.opt-card .opt-price small{
  font-family:var(--sans); font-size:12px; color:var(--ink-soft); margin-left:5px; font-weight:400;
}
.opt-more{ margin-top:14px; border-top:1px dashed var(--line); padding-top:12px; }
.opt-more > summary{
  cursor:pointer; list-style:none; font-size:13.5px; font-weight:700; color:var(--teal-dark);
  display:inline-flex; align-items:center; gap:6px;
}
.opt-more > summary::-webkit-details-marker{ display:none; }
.opt-more > summary::after{
  content:""; width:7px; height:7px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px); transition:.2s;
}
.opt-more[open] > summary::after{ transform:rotate(-135deg) translateY(0); }
.opt-more p{ margin:10px 0 0; font-size:14px; color:var(--ink-soft); line-height:1.85; }

/* ---------- フルパック ---------- */
.fullpack{
  margin-top:34px; padding:34px 36px;
  background:var(--bg-deep); color:#fff; border-radius:14px;
}
.fullpack-in{
  display:grid; grid-template-columns:1fr auto; gap:32px; align-items:center;
  padding-bottom:26px; margin-bottom:24px; border-bottom:1px solid #24384a;
}
.fp-label{ margin:0 0 10px; font-size:12px; letter-spacing:.24em; font-weight:700; color:var(--gold); }
.fullpack h3{ font-family:var(--serif); font-size:24px; margin:0 0 10px; font-weight:600; color:#fff; }
.fp-desc{ margin:0; color:#b6c2c8; font-size:15px; }
.fp-price{ text-align:right; }
.fp-was{ display:block; font-size:13px; color:#8b9aa4; text-decoration:line-through; }
.fp-price b{
  display:block; font-family:var(--serif); font-size:44px; font-weight:600;
  color:var(--gold); line-height:1.15; margin-top:4px;
}
.fp-price b small{ font-family:var(--sans); font-size:13px; color:#cdd7db; margin-left:6px; font-weight:400; }
.fp-sub{ display:block; font-size:12.5px; color:#8b9aa4; margin-top:4px; }
.fp-save{
  display:inline-block; margin-top:10px; font-size:12.5px; font-weight:700;
  background:rgba(201,151,74,.18); color:var(--gold);
  border-radius:999px; padding:5px 14px;
}
.fullpack .btn{ width:100%; max-width:340px; }

/* ---------- AI漫画の事例 ---------- */
.manga-case{ background:var(--bg-alt); }
.mc-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.mc-strip img{
  border:1px solid var(--line); border-radius:8px; background:var(--white);
  box-shadow:0 8px 22px rgba(20,37,47,.10);
}
.mc-strip + .mini-detail{ margin-top:22px; }
.manga-case .mini-body .mc-strip{ margin-top:4px; }
.mc-note{ margin:26px 0 0; text-align:center; color:var(--ink-soft); font-size:15px; }

/* ---------- 著者ページへのボタン ---------- */
.proof-cta{ margin-top:34px; text-align:center; }
.proof-cta .btn{ display:inline-flex; align-items:center; gap:10px; }
.proof-cta .btn .ic{ width:20px; height:20px; }
.proof-cta-note{ display:block; margin-top:10px; font-size:12.5px; color:var(--ink-soft); }

/* ---------- TOPへ戻る（右下に追従） ---------- */
.to-top{
  position:fixed; right:18px; bottom:22px; z-index:70;
  display:none; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  width:54px; height:54px; border-radius:50%;
  background:var(--white); color:var(--teal-dark);
  border:1px solid var(--line); text-decoration:none;
  box-shadow:0 6px 20px rgba(20,37,47,.16);
  transition:background .2s,color .2s,border-color .2s;
}
.to-top.is-shown{ display:flex; }
.to-top:hover{ background:var(--teal); color:#fff; border-color:var(--teal); }
.to-top .ic{ width:18px; height:18px; }
.to-top span{ font-size:9.5px; font-weight:700; letter-spacing:.08em; }

@media (max-width:1000px){
  .mc-strip{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:960px){
  .fullpack-in{ grid-template-columns:1fr; gap:20px; }
  .fp-price{ text-align:left; }
  .mini-row{ grid-template-columns:1fr; }
  .plan-group-title{ font-size:21px; flex-wrap:wrap; }
  .to-top{ bottom:calc(84px + env(safe-area-inset-bottom,0px)); right:12px; width:48px; height:48px; }
}
@media (max-width:680px){
  .hero-stats li{ padding:16px 6px; }
  .fullpack{ padding:26px 22px; }
  .fp-price b{ font-size:36px; }
  .opt-card .opt-price{ font-size:24px; }
  .mini-detail > summary{ padding:16px 18px; font-size:15px; }
  .mini-body{ padding:0 18px 20px; }
  .plan-card h4{ font-size:21px; }
}

/* ---------- ベストセラーの実物（Amazon管理画面の切り出し） ---------- */
.rank-block{ margin-top:56px; padding-top:48px; border-top:1px solid var(--line); }
.rank-title{
  font-family:var(--serif); font-size:23px; font-weight:600;
  margin:0 0 10px; text-align:center;
}
.rank-lead{ margin:0 0 32px; text-align:center; font-size:14.5px; color:var(--ink-soft); }
.rank-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.rank-card{
  background:var(--white); border:1px solid var(--line); border-radius:12px;
  padding:24px; display:grid; grid-template-columns:96px 1fr; gap:22px; align-items:center;
}
.rank-cover{
  width:96px; height:auto; border-radius:4px;
  box-shadow:0 6px 18px rgba(20,37,47,.22);
}
.rank-body{ min-width:0; }
.rank-badge{ width:100%; max-width:210px; height:auto; border-radius:4px; }
.rank-cap{ margin:16px 0 0; font-size:14.5px; color:var(--ink-soft); }
.rank-cap span{
  display:inline-block; margin-left:8px; font-weight:700; color:var(--accent);
}

@media (max-width:960px){
  .rank-grid{ grid-template-columns:1fr; }
}
@media (max-width:680px){
  .rank-card{ grid-template-columns:72px 1fr; gap:16px; padding:20px 18px; }
  .rank-cover{ width:72px; }
}

/* 3枚目（順位リストなし）は下段中央に置く */
.rank-card-solo{ grid-column:1 / -1; max-width:calc(50% - 12px); margin-inline:auto; }
.rank-note{ margin:22px 0 0; text-align:center; font-size:13.5px; color:var(--ink-soft); }
@media (max-width:960px){
  .rank-card-solo{ max-width:none; }
}

/* ---------- 控えめな外部リンク ---------- */
.ext-link{
  display:inline-flex; align-items:center; gap:5px;
  margin-left:10px; font-size:13.5px; font-weight:700;
  color:var(--teal-dark); text-decoration:none;
  border-bottom:1px solid rgba(29,122,117,.35); padding-bottom:1px;
}
.ext-link:hover{ color:var(--ink); border-bottom-color:var(--ink); }
.ext-link .ic{ width:15px; height:15px; }
@media (max-width:680px){
  .ext-link{ display:inline-flex; margin-left:0; margin-top:8px; }
}

/* ---------- 事例：販売ページ（LP） ---------- */
.lp-figure{ margin:0; }
.lp-figure img{
  width:100%; height:auto; border:1px solid var(--line); border-radius:8px;
  box-shadow:0 14px 34px rgba(20,37,47,.14);
}
.lp-figure figcaption{
  margin-top:14px; font-size:13.5px; color:var(--ink-soft);
  display:flex; flex-wrap:wrap; align-items:center; gap:4px;
}
/* ベストセラーは4枚。2列で収まるので中央寄せ指定は不要 */
.rank-card-solo{ grid-column:auto; max-width:none; margin-inline:0; }

/* 実績バー：「4冊7冠」のように数字が2つ入る場合 */
.hero-stats b i{ font-style:normal; margin-left:.18em; }

/* ==========================================================
   v5 ビジネス版 追加分（2026-08-18）
   ・セクション背景は明示指定する（nth-of-type を使わない）
   ・見出しに white-space:nowrap を付けない
   ========================================================== */

/* ---------- セクション背景（v5の並び順で上書き） ---------- */
#worries{ background:var(--bg); }
.ba{ background:var(--bg-alt); }
#deliver{ background:var(--bg); }
.atwork{ background:var(--bg-alt); }
.change{ background:var(--bg-deep); color:#fff; }
.ret{ background:var(--bg-deep); color:#fff; }
#plans{ background:var(--bg-alt); }

/* ---------- 02 悩み：チェックリスト＋写真 ---------- */
.worry-grid{
  display:grid; grid-template-columns:1fr 380px; gap:44px; align-items:start;
}
.worry-grid .checklist{ max-width:none; }
.worry-photo{ margin:0; }
.worry-photo img{
  width:100%; border-radius:12px;
  box-shadow:0 16px 40px rgba(20,37,47,.16);
}

/* ---------- 04 届くもの：写真2枚並び ---------- */
.dv-photo.two{
  display:grid; grid-template-columns:repeat(2,1fr); gap:26px; text-align:left;
}
.dv-photo.two figure{ margin:0; }
.dv-photo.two img{ max-width:none; width:100%; aspect-ratio:3/2; object-fit:cover; }
.dv-photo.two figcaption{
  margin:14px 0 0; font-size:14px; color:var(--ink-soft); line-height:1.8;
}

/* ---------- 05 本は、どこで働くのか ---------- */
.aw-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px; }
.aw-card{
  background:var(--white); border:1px solid var(--line); border-radius:12px;
  overflow:hidden; display:flex; flex-direction:column;
}
.aw-card img{ width:100%; aspect-ratio:3/2; object-fit:cover; }
.aw-body{ padding:26px 28px 30px; }
.aw-scene{
  display:flex; align-items:center; gap:8px;
  margin:0 0 10px; font-size:12.5px; font-weight:700;
  letter-spacing:.14em; color:var(--teal);
}
.aw-scene .ic{ width:20px; height:20px; }
.aw-card h3{
  font-family:var(--serif); font-size:22px; font-weight:600;
  margin:0 0 12px; line-height:1.5;
}
.aw-card p{ margin:0; font-size:15.5px; color:var(--ink-soft); line-height:1.85; }

/* ---------- 09 1件決まれば ---------- */
.ret .sec-label{ color:var(--gold); }
.ret .sec-title{ color:#fff; }
.ret-grid{
  display:grid; grid-template-columns:1fr 1.1fr; gap:56px; align-items:center;
}
.ret-photo{ margin:0; }
.ret-photo img{
  width:100%; border-radius:12px;
  box-shadow:0 20px 46px rgba(0,0,0,.35);
}
.ret-body .sec-title{ margin-bottom:26px; }
.ret-body p{ margin:0 0 16px; color:#c6d0d6; font-size:16.5px; line-height:1.95; }
.ret-body p strong{ color:#fff; }
.ret-lead{
  font-family:var(--serif); font-size:21px !important; color:#fff !important;
  border-left:3px solid var(--gold); padding-left:16px;
}
.ret-note{
  margin-top:24px !important; font-size:13px !important;
  color:#8b9aa4 !important; line-height:1.8;
}

/* ---------- 10 フルパック（金額を出さない版） ---------- */
.fullpack.quote .fullpack-in{ grid-template-columns:1fr; gap:0; }
.fullpack.quote h3{ font-size:22px; line-height:1.6; }

/* ---------- 13 作る人：仕事場の写真 ---------- */
.pf-scene{
  margin:0 auto 52px; max-width:420px; text-align:center;
}
.pf-scene img{
  width:100%; border-radius:12px;
  box-shadow:0 16px 40px rgba(20,37,47,.16);
}
.pf-scene figcaption{
  margin-top:14px; font-size:14px; color:var(--ink-soft); line-height:1.8;
}

/* ---------- レスポンシブ ---------- */
@media (max-width:900px){
  .worry-grid{ grid-template-columns:1fr; gap:32px; }
  .worry-photo{ order:-1; }
  .aw-grid{ grid-template-columns:1fr; gap:20px; }
  .ret-grid{ grid-template-columns:1fr; gap:34px; }
  .dv-photo.two{ grid-template-columns:1fr; gap:32px; }
}
@media (max-width:680px){
  .aw-body{ padding:22px 22px 26px; }
  .aw-card h3{ font-size:20px; }
  .ret-lead{ font-size:19px !important; }
  .fullpack.quote h3{ font-size:20px; }
  .pf-scene{ max-width:320px; margin-bottom:40px; }
}

/* ==========================================================
   v5 修正（2026-08-18 その2）
   FV全面化／動き停止ボタン廃止／オプション金額を折りたたみへ／
   フルパックに写真／作る人の写真をプロフィール左へ
   ========================================================== */

/* ---------- FV：写真を画面いっぱいに敷いて、その上に文字 ---------- */
.hero{
  padding-block:0;
  background:var(--bg-deep);
}
.hero-bg{ position:absolute; inset:0; z-index:0; }
.hero-bg img{ width:100%; height:100%; object-fit:cover; object-position:60% 42%; }
.hero-bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(96deg, rgba(9,20,28,.88) 0%, rgba(9,20,28,.70) 42%, rgba(9,20,28,.20) 72%, rgba(9,20,28,.04) 100%),
    linear-gradient(180deg, rgba(9,20,28,.42) 0%, rgba(9,20,28,0) 26%);
}
.hero-grid{
  grid-template-columns:1fr;
  min-height:min(86vh,720px);
  align-items:center; gap:0;
}
.hero-in{ max-width:660px; padding-block:104px 96px; }
.hero-eyebrow{
  color:#f0e6d8; background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.22);
}
.hero h1{ color:#fff; text-shadow:0 2px 24px rgba(0,0,0,.35); }
.hero h1 em{ color:var(--gold); }
.hero h1 .sm{ color:#cfd8dd; }
.hero-sub{ color:#d7dee2; }
.hero-note{ color:#a9b4bb; }
.hero-stats{ border-top:0; }

/* FVの読み込み演出：写真は対象外（背景なので出しっぱなし） */
.js .hero-bg{ opacity:1; transform:none; }

/* ---------- 03 話すことだけ：FVから移した本の写真 ---------- */
.ba-photo{
  margin:44px auto 0; max-width:760px; text-align:center;
}
.ba-photo img{
  width:100%; border-radius:14px; box-shadow:0 22px 52px rgba(20,37,47,.18);
}
.ba-photo figcaption{
  margin-top:14px; font-size:14px; color:var(--ink-soft);
}

/* ---------- 11 オプション：金額は「くわしく」の中 ---------- */
.opt-card .opt-more{ margin-top:auto; }
.opt-price-in{
  margin:0 0 10px; font-family:var(--serif); font-weight:600;
  font-size:26px; color:var(--accent); line-height:1.2;
}
.opt-price-in small{
  font-family:var(--sans); font-size:12.5px; color:var(--ink-soft);
  margin-left:5px; font-weight:400;
}

/* ---------- 11 フルパック：右に写真 ---------- */
.fullpack.quote .fullpack-in{
  grid-template-columns:1fr 340px; gap:36px; align-items:center;
  padding-bottom:0; margin-bottom:0; border-bottom:0;
}
.fullpack.quote .fp-text .btn{ margin-top:24px; width:auto; }
.fp-photo{ margin:0; }
.fp-photo img{
  width:100%; border-radius:10px; aspect-ratio:3/2; object-fit:cover;
  box-shadow:0 18px 42px rgba(0,0,0,.34);
}

/* ---------- 13 作る人：仕事場の写真はプロフィール左カラムに ---------- */
.pf-scene{
  margin:24px 0 0; max-width:none; text-align:left;
}
.pf-scene img{
  width:100%; border-radius:10px; box-shadow:0 12px 30px rgba(20,37,47,.16);
}
.pf-scene figcaption{
  margin-top:10px; font-size:12.5px; color:var(--ink-soft); line-height:1.7;
}

/* ---------- レスポンシブ ---------- */
@media (max-width:900px){
  .hero-in{ max-width:none; padding-block:80px 72px; }
  .hero-grid{ min-height:min(78vh,620px); }
  .hero-bg img{ object-position:62% 45%; }
  .fullpack.quote .fullpack-in{ grid-template-columns:1fr; gap:24px; }
  .fp-photo{ order:-1; }
}
@media (max-width:680px){
  .hero-in{ padding-block:64px 56px; }
  .hero-grid{ min-height:auto; }
  .hero-bg::after{
    background:linear-gradient(180deg, rgba(9,20,28,.62) 0%, rgba(9,20,28,.86) 45%, rgba(9,20,28,.94) 100%);
  }
  .ba-photo{ margin-top:34px; }
  .fullpack.quote .fp-text .btn{ width:100%; }
}

/* FV：副ボタンは濃い写真の上なので白抜きにする */
.hero .btn-ghost{
  color:#fff; border-color:rgba(255,255,255,.55); background:rgba(255,255,255,.06);
}
.hero .btn-ghost:hover{ background:#fff; color:var(--ink); border-color:#fff; }

/* ==========================================================
   v5 修正 その3（2026-08-18）
   本の写真の淡いフチ／作る人の写真の白枠と切れ／フルパック写真差し替え
   ========================================================== */

/* 作る人の写真は .profile-photo の中にあるので、丸い顔写真用の指定を必ず打ち消す。
   （height:168px / object-fit:cover / border:4px solid #fff / border-radius:50% が効いてしまう） */
.profile-photo .pf-scene img{
  width:100%; height:auto; max-width:none;
  object-fit:fill; object-position:center;
  border:0; border-radius:10px; margin:0;
  box-shadow:0 12px 30px rgba(20,37,47,.16);
}
.pf-scene{ margin:26px 0 0; }
.pf-scene figcaption{ text-align:left; }

/* 名義の注記は左カラムの最後へ。ここで左右の高さを合わせる */
.profile-photo .pf-name{
  margin:20px 0 0; text-align:left;
  font-size:12.5px; line-height:1.85; color:var(--ink-soft);
}

/* 本の写真：外周を切った版に合わせて影を弱め、フチが浮かないようにする */
.ba-photo img{ box-shadow:0 14px 34px rgba(20,37,47,.13); }

/* スマホ：作る人の左カラムが横いっぱいになるので、写真と注記の幅を抑える */
@media (max-width:760px){
  .profile-photo .pf-scene{ max-width:300px; margin-inline:auto; }
  .profile-photo .pf-name{ max-width:520px; margin-inline:auto; }
}


/* ==========================================================
   v5 修正 その4（2026-08-18）
   名義の注記を右カラムへ／FVの右側を明るく
   ========================================================== */

/* 名義の注記は「あなたの一冊も、〜」の下（右カラム）へ移した。
   .profile-photo .pf-name（その3で追加）はもう一致しない。 */
.profile-body .pf-name{
  margin:0 !important; text-align:left;
  font-size:12.5px; line-height:1.85; color:var(--ink-soft);
  max-width:640px;
}

/* ==========================================================
   v5 修正 その5（2026-08-18）
   FV実績バーに4冊7冠を戻す／フルパック写真差し替え／作る人の左右の高さ揃え
   ========================================================== */

/* 作る人：右カラムの最後（名義の注記）を下に押して、左の写真＋キャプションと下端を揃える。
   .profile は align-items:start なので、まず stretch に戻す必要がある */
.profile{ align-items:stretch; }
.profile-body{ display:flex; flex-direction:column; }
.profile-body > *{ flex:0 0 auto; }
.profile-body .pf-name{ margin-top:auto !important; padding-top:18px; }

@media (max-width:760px){
  /* 1カラムになったら下揃えは不要（余白が開くだけなので戻す） */
  .profile{ align-items:start; }
  .profile-body{ display:block; }
  .profile-body .pf-name{ margin-top:18px !important; padding-top:0; }
}

/* ============================================================
   v5 修正その6：アニメーション強化（2026-08-18）
   方針：既存のレイアウト・配色・文言には一切触れない。
         動きだけを足す。止めたときも必ず読める。
   ============================================================ */

:root{
  --ease-out-expo:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.22,.61,.36,1);
  --dur-fast:.32s;
  --dur-base:.8s;
  --dur-slow:1.2s;
}

/* ---------- スクロールリビール（イージングと遅延を強化） ---------- */
.js [data-reveal]{
  opacity:0; transform:translateY(24px);
  transition:opacity var(--dur-base) var(--ease-out-expo),
             transform var(--dur-base) var(--ease-out-expo);
  transition-delay:var(--reveal-delay,0s);
  will-change:opacity,transform;
}
.js [data-reveal].is-visible{ opacity:1; transform:none; will-change:auto; }

/* 横から出す・拡大しながら出すの2種（見出しと写真の出方を変えて単調さを消す） */
.js [data-reveal="left"]{ transform:translate3d(-28px,0,0); }
.js [data-reveal="zoom"]{ transform:scale(.965); }
.js [data-reveal="left"].is-visible,
.js [data-reveal="zoom"].is-visible{ transform:none; }

/* ---------- FV：登場をゆっくり・深く ---------- */
.js .hero-eyebrow,.js .hero h1,.js .hero-sub,
.js .hero-actions,.js .hero-note,.js .hero-stats,.js .hero-photo{
  transform:translateY(26px);
  transition:opacity 1.05s var(--ease-out-expo),transform 1.05s var(--ease-out-expo);
}
.js.is-loaded .hero-eyebrow{ transition-delay:.05s; }
.js.is-loaded .hero h1{ transition-delay:.16s; }
.js.is-loaded .hero-sub{ transition-delay:.30s; }
.js.is-loaded .hero-actions{ transition-delay:.42s; }
.js.is-loaded .hero-note{ transition-delay:.50s; }
.js.is-loaded .hero-stats{ transition-delay:.58s; }

/* 背景写真：読み込み後にごくゆっくり寄る（Ken Burns） */
.hero-bg img{ transform-origin:60% 42%; }
.js .hero-bg img{ transform:scale(1.075); transition:transform 2.4s var(--ease-soft); }
.js.is-loaded .hero-bg img{ transform:scale(1); }
/* スクロール連動の視差（JSが --hero-shift を入れる。動かすのは transform だけ） */
.js .hero-bg{ transform:translate3d(0,var(--hero-shift,0px),0); will-change:transform; }

/* 実績の数字：カウント中に桁で幅が動かないようにする */
.hero-stats b{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }
.hero-stats b .num{
  display:inline; margin:0; padding:0;
  font-size:inherit; color:inherit; letter-spacing:inherit; line-height:inherit;
}

/* ---------- ボタン ---------- */
.btn{ transition:transform var(--dur-fast) var(--ease-out-expo),
                 box-shadow var(--dur-fast) var(--ease-out-expo),
                 background-color var(--dur-fast) var(--ease-out-expo),
                 color var(--dur-fast) var(--ease-out-expo); }
/* LINEボタン：ホバーで光沢が走る＋押し込み */
.btn-line{ position:relative; overflow:hidden; isolation:isolate; }
.btn-line::after{
  content:""; position:absolute; top:-40%; left:-80px; z-index:-1;
  width:46px; height:180%; pointer-events:none; opacity:0;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.55),transparent);
  transform:rotate(14deg);
}
@media (hover:hover){
  .btn-line:hover::after{ opacity:1; animation:btnSheen .85s var(--ease-out-expo); }
  .btn-line:hover{ transform:translateY(-1px); box-shadow:0 5px 0 #04a445; }
}
.btn-line:active{ transform:translateY(2px); box-shadow:0 1px 0 #04a445; }
@keyframes btnSheen{
  from{ transform:rotate(14deg) translateX(0); }
  to{ transform:rotate(14deg) translateX(420px); }
}

/* ---------- カード：ホバーで浮く ---------- */
.plan-card,.opt-card,.dv-card,.rank-card,.aw-card,.w-card{
  transition:transform var(--dur-fast) var(--ease-out-expo),
             box-shadow var(--dur-fast) var(--ease-out-expo);
}
@media (hover:hover){
  .plan-card:hover,.opt-card:hover,.dv-card:hover,
  .rank-card:hover,.aw-card:hover,.w-card:hover{
    transform:translateY(-5px);
    box-shadow:0 16px 38px rgba(20,37,47,.13);
  }
}

/* ---------- 写真：ホバーでゆっくり寄る ----------
   ※ .ba-photo は img に影が付いているため対象外（親で切ると影が欠ける）。
     .aw-scene は写真ではなくテキスト行なので対象外。 */
.rank-cover,.profile-photo{ overflow:hidden; }
.rank-cover img,.profile-photo img{ transition:transform 1s var(--ease-out-expo); }
@media (hover:hover){
  .rank-cover:hover img,.profile-photo:hover img{ transform:scale(1.045); }
}

/* ---------- 見出しの下線が引かれる ---------- */
.js .sec-label{ position:relative; display:inline-block; padding-bottom:8px; }
.js .sec-label::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:100%;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
  transition:transform 1s var(--ease-out-expo) .15s;
}
.js [data-reveal].is-visible .sec-label::after,
.js .sec-head.is-visible .sec-label::after{ transform:scaleX(1); }
.center .sec-label::after{ transform-origin:center; }

/* ---------- TOPへ戻る：ふわっと出す ---------- */
.to-top{
  opacity:0; transform:translateY(10px);
  transition:opacity .4s var(--ease-out-expo),transform .4s var(--ease-out-expo),
             background-color .3s,color .3s,border-color .3s;
}
.to-top.is-shown{ opacity:1; transform:none; }

/* ============================================================
   動きを止めたとき（OSの「視差効果を減らす」がON）
   ＝すべて静止した完成形で読める
   ============================================================ */
body.no-motion [data-reveal],
body.no-motion [data-reveal="left"],
body.no-motion [data-reveal="zoom"]{
  opacity:1 !important; transform:none !important; transition:none !important;
}
body.no-motion .hero-bg{ transform:none !important; }
body.no-motion .hero-bg img{ transform:none !important; transition:none !important; }
body.no-motion .sec-label::after{ transform:scaleX(1) !important; transition:none !important; }
body.no-motion .btn-line::after{ display:none !important; }
body.no-motion .to-top{ opacity:1; transform:none; }
body.no-motion .plan-card,body.no-motion .opt-card,body.no-motion .dv-card,
body.no-motion .rank-card,body.no-motion .aw-card,body.no-motion .w-card{
  transition:none !important;
}

/* ============================================================
   v5 修正その7：動きのバリエーション（2026-08-19）
   ============================================================ */

/* ---------- 出方のバリエーション ---------- */
.js [data-reveal="right"]{ transform:translate3d(28px,0,0); }
.js [data-reveal="right"].is-visible{ transform:none; }
/* 横にワイプ。clip-path で隠すと IntersectionObserver が「画面に無い」と判定して
   永久に出てこなくなるため、mask で隠す。出し終わったら mask 自体を外す（影が欠けないように）。 */
.js [data-reveal="wipe"]{
  opacity:1; transform:none;
  -webkit-mask-image:linear-gradient(90deg,#000 0 50%,transparent 50% 100%);
          mask-image:linear-gradient(90deg,#000 0 50%,transparent 50% 100%);
  -webkit-mask-size:200% 100%;         mask-size:200% 100%;
  -webkit-mask-repeat:no-repeat;       mask-repeat:no-repeat;
  -webkit-mask-position:100% 0;        mask-position:100% 0;
  transition:-webkit-mask-position 1.05s var(--ease-out-expo),
             mask-position 1.05s var(--ease-out-expo);
  transition-delay:var(--reveal-delay,0s);
}
.js [data-reveal="wipe"].is-visible{ -webkit-mask-position:0 0; mask-position:0 0; }
.js [data-reveal="wipe"].wipe-done{ -webkit-mask-image:none; mask-image:none; }

/* ---------- 表紙13冊：横に流れる ---------- */
.cover-strip.is-marquee{
  display:block; grid-template-columns:none; gap:0;
  position:relative; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
}
.cover-track{ display:flex; width:max-content; animation:coverFlow 62s linear infinite; }
.cover-set{ display:flex; gap:14px; padding-right:14px; }
.cover-strip.is-marquee img{
  height:212px; width:auto; flex:0 0 auto;
  border-radius:3px; box-shadow:0 6px 16px rgba(20,37,47,.2);
  aspect-ratio:1600/2560; object-fit:cover;
  transition:transform .5s var(--ease-out-expo),box-shadow .5s var(--ease-out-expo);
}
@keyframes coverFlow{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (hover:hover){
  .cover-strip.is-marquee:hover .cover-track{ animation-play-state:paused; }
  .cover-strip.is-marquee img:hover{ transform:translateY(-6px); box-shadow:0 14px 30px rgba(20,37,47,.3); }
}
@media (max-width:760px){
  .cover-strip.is-marquee img{ height:150px; }
  .cover-set{ gap:10px; padding-right:10px; }
}
body.no-motion .cover-track{ animation:none !important; }

/* ---------- 制作事例タブ：ふわっと入れ替わる ---------- */
.tab-panel.is-switching{ animation:panelIn .5s var(--ease-out-expo) both; }
@keyframes panelIn{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:none; }
}
body.no-motion .tab-panel.is-switching{ animation:none !important; }

/* ---------- 見出しの強調に線が引かれる ---------- */
.js .sec-title em{
  background:linear-gradient(currentColor,currentColor) no-repeat left bottom / 0 2px;
  transition:background-size 1.1s var(--ease-out-expo) .25s;
  padding-bottom:2px;
}
.js [data-reveal].is-visible .sec-title em{ background-size:100% 2px; }
body.no-motion .sec-title em{ background:none !important; }

/* ---------- 比較表の矢印が伸びる ---------- */
.js .ch-ar{ transform:scaleX(.4); opacity:0; transition:transform .7s var(--ease-out-expo) .2s,opacity .5s ease-out .2s; }
.js .ch-row.is-visible .ch-ar{ transform:none; opacity:1; }
body.no-motion .ch-ar{ transform:none !important; opacity:1 !important; }

body.no-motion [data-reveal="wipe"]{
  -webkit-mask-image:none !important; mask-image:none !important;
}
/* フルパックの注記（控えめ） */
.fp-note{
  margin:10px 0 18px; font-size:13px; line-height:1.9; color:var(--ink-soft);
}
.fullpack.quote .fp-note{ color:rgba(255,255,255,.62); }

/* 追加料金の注記（2026-08-19） */
.kv-note{
  margin:14px 0 0; font-size:13.5px; line-height:1.95; color:var(--ink-soft);
}
.kv-note.strong{ margin-top:10px; color:var(--teal-dark); font-weight:700; }

/* ============================================================
   漫画の拡大表示（2026-08-19）
   スマホで3ページが小さくて読めないため、タップで全画面表示する
   ============================================================ */
.manga-hint{
  display:flex; align-items:center; justify-content:center; gap:6px;
  margin:14px 0 0; font-size:13px; color:var(--ink-soft);
}
.manga-hint .ic{ width:16px; height:16px; }
.manga-strip img{ cursor:zoom-in; }

.zoom-overlay{
  position:fixed; inset:0; z-index:120; display:none;
  background:#0a141c;
  opacity:0; transition:opacity .3s var(--ease-out-expo);
}
.zoom-overlay.is-open{ display:block; }
.zoom-overlay.is-shown{ opacity:1; }
.zoom-scroll{
  position:absolute; inset:0; overflow:auto;
  -webkit-overflow-scrolling:touch;
  display:flex; align-items:flex-start; justify-content:center;
  padding:56px 10px 76px;
}
.zoom-scroll img{
  width:auto; max-width:100%; height:auto;
  border-radius:4px; box-shadow:0 18px 50px rgba(0,0,0,.5);
  background:#fff;
}
@media (max-width:760px){
  .zoom-scroll{ padding:52px 6px 72px; }
  .zoom-scroll img{ width:100%; max-width:none; }
}
.zoom-close{
  position:absolute; top:12px; right:12px; z-index:2;
  width:44px; height:44px; border-radius:999px; cursor:pointer;
  border:1px solid rgba(255,255,255,.35); background:rgba(9,20,28,.6);
  color:#fff; font-size:20px; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.zoom-count{
  position:absolute; top:20px; left:0; right:0; z-index:1;
  text-align:center; color:rgba(255,255,255,.8); font-size:13px; letter-spacing:.08em;
  pointer-events:none;
}
.zoom-nav{
  position:absolute; left:0; right:0; bottom:14px; z-index:2;
  display:flex; gap:10px; justify-content:center;
}
.zoom-nav button{
  min-width:104px; padding:11px 18px; cursor:pointer;
  border-radius:999px; border:1px solid rgba(255,255,255,.35);
  background:rgba(9,20,28,.6); color:#fff; font-size:14px; font-weight:700;
}
.zoom-nav button[disabled]{ opacity:.35; cursor:default; }
@media (hover:hover){
  .zoom-close:hover,.zoom-nav button:not([disabled]):hover{ background:rgba(255,255,255,.16); }
}
body.zoom-lock{ overflow:hidden; }
body.no-motion .zoom-overlay{ transition:none !important; }

/* AI MANGA のヒントも画像の下に置く（2026-08-19） */
.mc-strip img{ cursor:zoom-in; }

/* ============================================================
   スマホのメニュー（2026-08-19）
   960px以下ではナビが消えていて、目次にたどれなかった。
   ============================================================ */

/* リンク先が固定ヘッダーの下に隠れないようにする。
   ヘッダーの高さは幅や屋号の折り返しで変わるので、JSが実測して --header-h に入れる。
   JSが動かないときの保険として 78px を既定値にしている。 */
section[id],div[id]{ scroll-margin-top:calc(var(--header-h, 78px) + 14px); }

/* ---- ボタン（三本線） ---- */
.nav-toggle{ display:none; }
.js .nav-toggle{
  width:44px; height:44px; padding:0; margin-left:auto;
  border:1px solid var(--line); border-radius:10px; background:var(--white);
  cursor:pointer; position:relative; flex:0 0 auto;
}
@media (min-width:961px){ .js .nav-toggle{ display:none; } }
@media (max-width:960px){ .js .nav-toggle{ display:block; } }
.nav-toggle span{
  position:absolute; left:12px; width:20px; height:2px; border-radius:2px;
  background:var(--ink);
  transition:transform .34s var(--ease-out-expo),opacity .2s ease-out,top .34s var(--ease-out-expo);
}
.nav-toggle span:nth-child(1){ top:15px; }
.nav-toggle span:nth-child(2){ top:21px; }
.nav-toggle span:nth-child(3){ top:27px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ top:21px; transform:rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ top:21px; transform:rotate(-45deg); }

/* ---- 開くパネル ---- */
.nav-drawer{
  position:fixed; inset:0; z-index:110; display:none;
  background:var(--bg);
  opacity:0; transition:opacity .28s var(--ease-out-expo);
  overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.nav-drawer.is-open{ display:block; }
.nav-drawer.is-shown{ opacity:1; }
.nav-drawer-in{
  min-height:100%; display:flex; flex-direction:column;
  padding:96px 22px calc(28px + env(safe-area-inset-bottom,0px));
}
.nav-drawer .nav-label{
  margin:0 0 6px; font-size:11px; letter-spacing:.22em; color:var(--ink-soft);
}
.nav-drawer nav{ display:flex; flex-direction:column; }
.nav-drawer nav a{
  display:flex; align-items:center; justify-content:space-between;
  padding:17px 4px; text-decoration:none; color:var(--ink);
  font-family:var(--serif); font-size:19px; font-weight:600;
  border-bottom:1px solid var(--line);
  opacity:0; transform:translateY(10px);
  transition:opacity .45s var(--ease-out-expo),transform .45s var(--ease-out-expo);
}
.nav-drawer nav a::after{
  content:""; width:8px; height:8px; flex:0 0 auto;
  border-top:1.5px solid var(--gold); border-right:1.5px solid var(--gold);
  transform:rotate(45deg);
}
.nav-drawer.is-shown nav a{ opacity:1; transform:none; }
.nav-drawer-cta{ margin-top:26px; width:100%; }
.nav-drawer-note{
  margin:12px 0 0; text-align:center; font-size:12.5px; color:var(--ink-soft);
}
body.nav-lock{ overflow:hidden; }

body.no-motion .nav-drawer{ transition:none !important; }
body.no-motion .nav-drawer nav a{ opacity:1 !important; transform:none !important; transition:none !important; }
body.no-motion .nav-toggle span{ transition:none !important; }

/* メニューを開いている間は、ヘッダー（＝閉じるボタン）をパネルより前に出す */
body.nav-lock .site-header{ z-index:130; background:var(--bg); backdrop-filter:none; border-bottom-color:transparent; }

/* 漫画の拡大表示：横スワイプ（2026-08-19） */
.zoom-scroll{ touch-action:pan-y pinch-zoom; }
.zoom-scroll img.slide-l{ animation:zoomSlideL .34s var(--ease-out-expo); }
.zoom-scroll img.slide-r{ animation:zoomSlideR .34s var(--ease-out-expo); }
@keyframes zoomSlideL{ from{ opacity:0; transform:translateX(30px); } to{ opacity:1; transform:none; } }
@keyframes zoomSlideR{ from{ opacity:0; transform:translateX(-30px); } to{ opacity:1; transform:none; } }
.zoom-hint{
  position:absolute; left:0; right:0; bottom:calc(62px + env(safe-area-inset-bottom,0px));
  z-index:1; margin:0; text-align:center; pointer-events:none;
  color:rgba(255,255,255,.55); font-size:12px; letter-spacing:.04em;
}
body.no-motion .zoom-scroll img.slide-l,
body.no-motion .zoom-scroll img.slide-r{ animation:none !important; }

/* ============================================================
   日本語の改行を自然にする（2026-08-19・修正その14）
   .nw = ここで折り返さない（文節のかたまり）
   word-break:auto-phrase は対応ブラウザ（Chrome系）だけ効く。
   非対応（iOS Safari 等）でも .nw が効くので、両方入れている。
   ============================================================ */
.nw{ white-space:nowrap; }
body{ line-break:strict; }
p, li, dd, dt, summary, figcaption, blockquote, td, th{ word-break:auto-phrase; }
h1, h2, h3, h4, .sec-title, .plan-name, .opt-card h4{ text-wrap:pretty; word-break:auto-phrase; }