/* =========================================================
   VSWEB — 採用案 pi_duotone_editorial（白地×ネイビー・編集デザイン）
   wget-portable：コンテンツはHTML直書き、装飾のみCSS。
   ========================================================= */

:root{
  --bg:        #FCFCFA;   /* 温かいオフホワイト */
  --bg-2:      #F4F5F1;   /* 薄いニュートラル面 */
  --surface:   #FFFFFF;
  --ink:       #20283A;   /* 本文（純黒を避けた濃紺チャコール） */
  --ink-2:     #586074;   /* 副次テキスト */
  --ink-3:     #8B92A1;   /* 補助 */
  --navy:      #1E2A4D;   /* ブランド／デュオトーン主役 */
  --navy-2:    #2C3A63;
  --navy-tint: #EBEEF6;   /* 紺のごく薄いチップ */
  --line:      #E7E7E1;   /* 細い罫線 */
  --line-2:    #DCDCD4;
  --green:     #06C755;   /* LINE CTA */
  --green-d:   #05B14C;
  --radius:    14px;
  --radius-sm: 10px;
  --maxw:      1120px;
  --gap:       clamp(20px, 3vw, 32px);
  --sx:        clamp(20px, 5vw, 40px);   /* 左右余白 */
  --sy:        clamp(64px, 9vw, 116px);  /* 縦リズム */
  --shadow:    0 18px 50px -28px rgba(30,42,77,.28);
  --shadow-sm: 0 8px 26px -18px rgba(30,42,77,.30);
  --serif: "Noto Serif JP", serif;
  --sans:  "Noto Sans JP", system-ui, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-weight:400; line-height:1.85;
  font-feature-settings:"palt"; letter-spacing:.01em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ margin:0; font-family:var(--serif); font-weight:600; line-height:1.5; letter-spacing:.02em; color:var(--navy); }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
:focus-visible{ outline:2.5px solid var(--navy); outline-offset:3px; border-radius:4px; }

.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--sx); }

/* ---------- Buttons ---------- */
.btn{
  --c:var(--navy);
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--sans); font-weight:700; letter-spacing:.04em;
  border-radius:999px; cursor:pointer; border:1.5px solid transparent;
  transition:transform .18s ease, background .2s ease, color .2s ease, box-shadow .2s ease, border-color .2s ease;
  padding:.72em 1.5em; font-size:.95rem; white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn-line{ background:var(--green); color:#fff; box-shadow:0 10px 24px -12px rgba(6,199,85,.7); }
.btn-line::before{
  content:""; width:1.05em; height:1.05em; flex:0 0 auto;
  background:#fff; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3C6.5 3 2 6.6 2 11c0 3.9 3.5 7.2 8.3 7.9.8.1.7.6.6 1.1l-.2 1.3c-.1.5.3.9.9.6 3.7-2 6.6-4.9 8.4-7.3 1.2-1.6 1.8-3 1.8-4.6 0-4.4-4.5-8-9.6-8Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3C6.5 3 2 6.6 2 11c0 3.9 3.5 7.2 8.3 7.9.8.1.7.6.6 1.1l-.2 1.3c-.1.5.3.9.9.6 3.7-2 6.6-4.9 8.4-7.3 1.2-1.6 1.8-3 1.8-4.6 0-4.4-4.5-8-9.6-8Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.btn-line:hover{ background:var(--green-d); }
.btn-ghost{ background:transparent; color:var(--navy); border-color:var(--line-2); }
.btn-ghost:hover{ border-color:var(--navy); background:var(--navy); color:#fff; }
.btn-lg{ padding:.95em 1.9em; font-size:1rem; }
.btn-xl{ padding:1.05em 2.4em; font-size:1.08rem; }
.btn-block{ width:100%; }

/* ---------- Eyebrow / Section head ---------- */
.eyebrow{
  display:inline-block; font-family:var(--sans); font-weight:700;
  font-size:.72rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--navy); opacity:.7; margin-bottom:.9em;
}
.eyebrow::before{ content:"—"; margin-right:.6em; opacity:.6; }
.section{ padding-block:var(--sy); }
.section-head{ max-width:840px; margin:0 0 clamp(40px,5vw,64px); text-align:left; }
.section-head.is-center{ margin-inline:auto; text-align:center; }
.section-head h2{ font-size:clamp(1.65rem, 3.4vw, 2.5rem); }
.section-desc{ margin-top:1.1em; color:var(--ink-2); font-size:1.02rem; max-width:62ch; }
.section-head .rule-ornament{ justify-content:flex-start; }
/* 2カラムの非対称ヘッダー（見出し＋脇にイラスト） */
.head-split{ display:grid; grid-template-columns:1.25fr .8fr; gap:clamp(24px,4vw,60px); align-items:end; max-width:none; }
.head-split .section-desc{ margin-top:.9em; }
.head-split .hs-aside{ display:flex; justify-content:flex-end; align-items:flex-end; }
.head-split .hs-aside img{ height:clamp(100px,12vw,156px); width:auto; transform:rotate(-4deg); }
@media (max-width:760px){
  .head-split{ grid-template-columns:1fr; align-items:start; }
  .head-split .hs-aside{ display:none; }
}

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(252,252,250,.82); backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--line);
}
.header-inner{ display:flex; align-items:center; gap:24px; height:68px; }
.brand{
  font-family:var(--serif); font-weight:700; font-size:1.35rem;
  letter-spacing:.18em; color:var(--navy); margin-right:auto;
}
.nav{ display:flex; gap:30px; }
.nav a{ font-size:.92rem; font-weight:500; color:var(--ink-2); position:relative; padding:.2em 0; transition:color .2s; }
.nav a::after{ content:""; position:absolute; left:0; bottom:-2px; width:0; height:1.5px; background:var(--navy); transition:width .25s ease; }
.nav a:hover{ color:var(--navy); } .nav a:hover::after{ width:100%; }
.header-cta{ font-size:.85rem; padding:.6em 1.25em; }
.nav-toggle{ display:none; flex-direction:column; gap:5px; width:42px; height:42px; align-items:center; justify-content:center; background:none; border:1px solid var(--line-2); border-radius:10px; cursor:pointer; }
.nav-toggle span{ width:18px; height:1.6px; background:var(--navy); transition:transform .25s ease, opacity .2s ease; }

/* ---------- Hero (editorial / 雑誌組版) ---------- */
.hero{ position:relative; padding-block:clamp(26px,4.5vw,52px) var(--sy); overflow:hidden; }
.hero .container{ position:relative; z-index:2; }

/* 柱（masthead）風メタ行 — 旧 eyebrow の置き換え */
.hero-meta{ display:flex; align-items:center; gap:clamp(12px,2vw,20px);
  margin:0 0 clamp(26px,4.5vw,52px); font-family:var(--sans); font-size:.78rem; color:var(--ink-3); }
.hero-meta .hm-l{ font-weight:500; letter-spacing:.04em; }
.hero-meta .hm-line{ flex:1 1 auto; height:1px; background:var(--line-2); }
.hero-meta .hm-r{ font-weight:700; letter-spacing:.2em; color:var(--navy); white-space:nowrap; }

.hero-grid{ display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(28px,5vw,64px); align-items:center; }

/* 特大の明朝ディスプレイ＋行マスクのワイプアップ */
.hero-title{ font-size:clamp(2.4rem,7vw,4.6rem); line-height:1.26; letter-spacing:.02em; margin:0 0 .55em; }
.hero-title.reveal{ opacity:1; transform:none; }            /* 基本revealを打消し、内側で動かす */
.hero-title .line{ display:block; overflow:hidden; }
.hero-title .line-in{ display:block; transform:translateY(118%); transition:transform .9s cubic-bezier(.22,.61,.36,1); }
.hero-title.in .line-in{ transform:none; }
.hero-title .line:nth-child(2) .line-in{ transition-delay:.09s; }
.hero-title .line:nth-child(3) .line-in{ transition-delay:.18s; }
.hero-title .zero{ font-style:normal; color:var(--green); padding:0 .02em; }

.hero-sub{ font-size:clamp(1rem,1.5vw,1.18rem); color:var(--ink-2); line-height:1.95; max-width:30em; }
.hero-sub.reveal{ transition-delay:.18s; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:1.8em; }
.hero-actions.reveal{ transition-delay:.27s; }
.hero-note{ margin-top:1.2em; font-size:.88rem; color:var(--ink-3); }
.hero-note.reveal{ transition-delay:.34s; }

.hero-visual{ position:relative; display:flex; justify-content:flex-end; }
.hero-visual img{ width:min(100%,540px); animation:floaty 6.5s ease-in-out infinite; }

/* 背景に敷く巨大アウトラインの「0」（= 0円の図像化） */
.hero-zero{ position:absolute; z-index:0; right:-3vw; top:50%; transform:translateY(-50%);
  font-family:var(--serif); font-weight:700; line-height:.7;
  font-size:clamp(24rem,44vw,50rem);
  color:transparent; -webkit-text-stroke:1.5px var(--navy);
  opacity:.09; pointer-events:none; user-select:none;
  animation:heroZero 1.5s cubic-bezier(.22,.61,.36,1) both; }

/* 縦組みの英字レール（広い画面のみ） */
.hero-rail{ position:absolute; z-index:2; left:clamp(8px,1.6vw,22px); top:50%; transform:translateY(-50%);
  writing-mode:vertical-rl; text-orientation:mixed;
  font-family:var(--sans); font-weight:700; font-size:.7rem; letter-spacing:.34em;
  text-transform:uppercase; color:var(--ink-3); pointer-events:none;
  animation:fadeIn 1s ease .3s both; }
.hero-rail::before{ content:""; position:absolute; left:50%; top:-84px; width:1px; height:66px; background:var(--line-2); transform:translateX(-50%); }

@keyframes heroZero{ from{ opacity:0; transform:translateY(-50%) scale(1.12); } to{ opacity:.09; transform:translateY(-50%) scale(1); } }
@keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }

@media (max-width:1080px){ .hero-rail{ display:none; } }
@media (max-width:760px){
  .hero-zero{ animation:none; top:5%; right:-12vw; transform:none; font-size:clamp(15rem,52vw,26rem); opacity:.07; }
  .hero-visual{ justify-content:center; }
}
@media (prefers-reduced-motion:reduce){
  .hero-visual img{ animation:none; }
  .hero-zero{ animation:none; }
  .hero-rail{ animation:none; }
  .hero-title .line-in{ transform:none; transition:none; }
}

/* ---------- Worries ---------- */
.worries{ background:var(--bg-2); }
.worry-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap); }
.worry-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:32px 26px; min-height:190px; display:flex; flex-direction:column; gap:18px;
  box-shadow:var(--shadow-sm);
}
.worry-no{ font-family:var(--serif); font-weight:600; font-size:1.5rem; color:var(--navy); opacity:.45; }
.worry-q{ font-size:1.02rem; font-weight:500; color:var(--ink); line-height:1.75; }
.worry-lead{ text-align:left; margin-top:clamp(40px,5vw,64px); font-family:var(--serif); font-weight:600; font-size:clamp(1.3rem,2.8vw,2rem); color:var(--ink-2); line-height:1.6; }
.worry-lead strong{ color:var(--navy); font-weight:700; }

/* ---------- 再利用：セクション番号オープナーの見出し枠 ---------- */
.sec-head{ max-width:760px; margin:0 0 clamp(36px,5vw,60px); }
.sec-head h2{ font-size:clamp(1.8rem,3.8vw,2.7rem); line-height:1.4; }
.sec-head .section-desc{ margin-top:1em; }

/* ---------- Features（3×2カード → 番号付きエディトリアル・リスト） ---------- */
.feature-list{ display:grid; grid-template-columns:1fr 1fr; column-gap:clamp(40px,6vw,88px); }
.feature-item{ padding:clamp(26px,3vw,38px) 0; border-top:1px solid var(--line-2); }
.fi-head{ display:flex; align-items:center; gap:16px; margin-bottom:14px; }
.fi-no{ font-family:var(--serif); font-weight:700; font-size:clamp(1.8rem,2.6vw,2.4rem); line-height:1; color:var(--navy); opacity:.4; font-variant-numeric:tabular-nums; }
.feature-icon{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; color:var(--navy); }
.feature-icon svg{ width:28px; height:28px; }
.feature-item h3{ font-size:clamp(1.08rem,1.5vw,1.28rem); margin-bottom:.5em; }
.feature-item p{ color:var(--ink-2); font-size:.96rem; line-height:1.85; }

/* ---------- Value compare ---------- */
.compare-wrap{ max-width:none; margin:0; border:0; border-top:2px solid var(--navy); border-radius:0; overflow:visible; box-shadow:none; background:transparent; }
.compare{ width:100%; border-collapse:collapse; font-size:clamp(.92rem,1.3vw,1.02rem); }
.compare th, .compare td{ padding:clamp(16px,2vw,22px) clamp(10px,1.6vw,20px); text-align:left; border-bottom:1px solid var(--line-2); }
.compare thead th{ font-family:var(--sans); font-weight:700; color:var(--ink); background:transparent; letter-spacing:.04em; }
.compare thead .c-us{ color:var(--navy); }
.compare tbody th{ font-weight:500; color:var(--ink); }
.compare .c-other,.compare td.x{ color:var(--ink-3); text-align:center; width:26%; }
.compare .c-us,.compare td.o{ text-align:center; width:22%; color:var(--navy); font-weight:700; background:var(--navy-tint); }
.ck{ display:inline-flex; width:1.4em; height:1.4em; margin-right:.35em; align-items:center; justify-content:center; border-radius:50%; background:var(--green); color:#fff; font-size:.78em; vertical-align:middle; }

/* ---------- Pricing ---------- */
.price-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap); align-items:stretch; }
.price-card{
  position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:34px 26px 30px; display:flex; flex-direction:column; gap:8px; box-shadow:var(--shadow-sm);
}
.price-card.is-pop{ border-color:var(--navy); box-shadow:var(--shadow); }
.plan-tag{ position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--navy); color:#fff; font-size:.74rem; font-weight:700; letter-spacing:.08em; padding:.4em 1.1em; border-radius:999px; white-space:nowrap; }
.plan-tag.tag-dark{ background:var(--ink); }
.plan-name{ font-size:1.2rem; }
.plan-init{ font-size:.86rem; color:var(--ink-2); }
.plan-init strong{ color:var(--navy); font-weight:700; }
.plan-price{ display:flex; align-items:baseline; gap:.12em; margin:.1em 0 .1em; color:var(--navy); font-family:var(--serif); }
.plan-price .cur{ font-size:.95rem; font-weight:600; }
.plan-price .num{ font-size:2.5rem; font-weight:700; letter-spacing:.01em; font-variant-numeric:tabular-nums; line-height:1; }
.plan-price .unit{ font-size:1rem; font-weight:600; }
.plan-year{ font-size:.82rem; color:var(--ink-3); margin-bottom:.4em; }
.plan-feats{ display:flex; flex-direction:column; gap:.55em; margin:14px 0 22px; padding-top:16px; border-top:1px solid var(--line); }
.plan-feats li{ font-size:.9rem; color:var(--ink-2); padding-left:1.4em; position:relative; line-height:1.6; }
.plan-feats li::before{ content:"✓"; position:absolute; left:0; color:var(--green); font-weight:700; }
.price-card .btn{ margin-top:auto; }
/* 段違い高さ（テンプレ感を崩す・広い画面のみ） */
@media (min-width:981px){
  .price-grid{ align-items:start; }
  .price-card:nth-child(1){ margin-top:30px; }
  .price-card:nth-child(3){ margin-top:22px; }
  .price-card:nth-child(4){ margin-top:8px; }
}
.price-highlight{
  margin-top:clamp(34px,4vw,52px); text-align:center; background:var(--navy); color:#fff;
  border-radius:var(--radius); padding:30px 28px; box-shadow:var(--shadow);
}
.price-highlight p{ font-size:clamp(1.02rem,2vw,1.3rem); font-family:var(--serif); font-weight:500; line-height:1.7; }
.price-highlight strong{ color:#fff; font-weight:700; border-bottom:2px solid var(--green); padding-bottom:.06em; }
.price-highlight .ph-sub{ display:inline-block; font-family:var(--sans); font-size:.86rem; opacity:.8; margin-top:.4em; letter-spacing:.02em; }

/* ---------- GEO ---------- */
.geo{ background:var(--bg-2); }
.geo-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(28px,5vw,64px); align-items:center; }
.geo-visual img{ width:min(100%,440px); margin-inline:auto; }
.geo-copy h2{ font-size:clamp(1.5rem,3vw,2.2rem); margin-bottom:.6em; }
.geo-honest{ font-family:var(--serif); font-weight:500; font-size:clamp(1.15rem,2vw,1.5rem); color:var(--ink); line-height:1.8; padding-left:clamp(16px,2vw,24px); border-left:2px solid var(--navy); }
.geo-honest strong{ color:var(--navy); border-bottom:0; }
.geo-note{ margin-top:1.1em; font-size:.92rem; color:var(--ink-2); }

/* ---------- Flow（横一列の均等 → 大きな番号＋上罫のタイムライン） ---------- */
.flow-steps{ display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(16px,2.4vw,28px); }
.flow-step{ text-align:left; position:relative; border-top:1px solid var(--line-2); padding-top:16px; }
.flow-step img{ width:clamp(72px,8vw,104px); height:auto; object-fit:contain; margin:10px 0 12px; }
.flow-no{ font-family:var(--serif); font-weight:700; font-size:clamp(1.15rem,1.8vw,1.5rem); letter-spacing:.02em; color:var(--navy); opacity:.42; line-height:1; }
.flow-step h3{ font-size:1.02rem; margin:.5em 0 .35em; }
.flow-step p{ font-size:.88rem; color:var(--ink-2); line-height:1.7; }

/* ---------- Samples ---------- */
.sample-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(24px,4vw,56px); max-width:none; margin:0; }
.sample-card{ background:transparent; border:0; border-top:2px solid var(--navy); border-radius:0; padding:22px 0 0; box-shadow:none; transition:none; }
.sample-card:hover{ transform:none; box-shadow:none; }
.sample-thumb{ display:block; aspect-ratio:16/10; overflow:hidden; border-radius:10px; border:1px solid var(--line-2); background:var(--bg-2); margin-bottom:20px; }
.sample-thumb img{ width:100%; height:100%; object-fit:cover; object-position:top center; display:block; transition:transform .5s cubic-bezier(.22,.61,.36,1); }
.sample-card:hover .sample-thumb img{ transform:scale(1.04); }
.sample-plan{ display:inline-block; font-size:.74rem; font-weight:700; letter-spacing:.08em; color:var(--navy); background:var(--navy-tint); padding:.35em .9em; border-radius:999px; margin-bottom:14px; }
.sample-card h3{ font-size:clamp(1.3rem,2vw,1.7rem); margin-bottom:.3em; letter-spacing:.04em; }
.sample-card p{ color:var(--ink-2); font-size:.94rem; }
.sample-link{ display:inline-block; margin-top:16px; color:var(--navy); font-weight:700; font-size:.9rem; transition:transform .2s ease; }
.sample-card:hover .sample-link{ transform:translateX(4px); }

/* ---------- FAQ ---------- */
.faq-narrow{ max-width:780px; }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-item summary{
  list-style:none; cursor:pointer; padding:24px 44px 24px 4px; position:relative;
  font-weight:500; font-size:1.04rem; color:var(--ink); line-height:1.6;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:""; position:absolute; right:8px; top:50%; width:11px; height:11px;
  border-right:1.8px solid var(--navy); border-bottom:1.8px solid var(--navy);
  transform:translateY(-65%) rotate(45deg); transition:transform .25s ease;
}
.faq-item[open] summary::after{ transform:translateY(-35%) rotate(225deg); }
.faq-a{ padding:0 4px 26px; }
.faq-a p{ color:var(--ink-2); font-size:.96rem; line-height:1.9; }
.tmp{ color:var(--ink-3); font-size:.8em; }

/* ---------- Footer CTA ---------- */
.footer-cta{ background:var(--navy); color:#fff; padding-block:clamp(56px,7vw,92px); text-align:center; }
.footer-cta-inner{ display:flex; flex-direction:column; align-items:center; }
.cta-illust{ width:180px; height:180px; object-fit:contain; margin-bottom:8px; filter:drop-shadow(0 14px 30px rgba(0,0,0,.25)); }
.footer-cta h2{ color:#fff; font-size:clamp(1.6rem,3.6vw,2.5rem); margin-bottom:.5em; }
.footer-cta p{ color:rgba(255,255,255,.82); font-size:1.02rem; line-height:1.9; margin-bottom:1.8em; }
.footer-cta .btn-line{ box-shadow:0 14px 34px -12px rgba(6,199,85,.8); }

/* ---------- Footer ---------- */
.site-footer{ background:#161E33; color:rgba(255,255,255,.7); padding-block:40px; }
.footer-inner{ display:flex; flex-direction:column; gap:6px; align-items:center; text-align:center; }
.footer-brand{ font-family:var(--serif); font-weight:700; font-size:1.2rem; letter-spacing:.2em; color:#fff; }
.footer-tag{ font-size:.86rem; } .footer-copy{ font-size:.78rem; opacity:.6; margin-top:6px; }

/* ---------- Scattered decorations（全体に散りばめてAI感／テンプレ感を消す） ---------- */
.section{ position:relative; }
.section > .container{ position:relative; z-index:2; }      /* テキストは常に前面 */
.section--clip{ overflow:hidden; }                            /* はみ出すスポットをクリップ */
/* 余白に非対称で置くスポットイラスト */
.spot{ position:absolute; z-index:1; width:auto; pointer-events:none; user-select:none; }
.spot--sm{ height:86px; } .spot--md{ height:112px; } .spot--lg{ height:140px; }
/* 見出し直後に添える手描きの区切りオーナメント */
.rule-ornament{ display:flex; justify-content:center; margin-top:18px; }
.rule-ornament img{ height:24px; width:auto; opacity:.5; }
/* ヒーロー／見出しに添える小さなアクセント */
.hero-spark{ position:absolute; height:32px; width:auto; opacity:.6; top:-10px; left:-8px; }
.head-spark{ display:inline-block; height:19px; width:auto; vertical-align:-2px; opacity:.65; margin-right:.4em; }
@media (max-width:940px){ .spot, .hero-spark{ display:none; } }

/* ---------- 非対称レイアウト（テンプレ感を崩す） ---------- */
.worries-grid{ display:grid; grid-template-columns:.82fr 1.18fr; gap:clamp(28px,5vw,72px); align-items:start; }
.worries-intro{ text-align:left; }
.worries-intro h2{ font-size:clamp(1.8rem,3.8vw,2.7rem); line-height:1.4; }
.worries-illust{ height:clamp(120px,15vw,168px); width:auto; margin-top:26px; transform:rotate(-3deg); }
/* セクション番号オープナー（再利用） */
.sec-index{ display:flex; align-items:baseline; gap:14px; margin-bottom:.5em; }
.sec-index .si-no{ font-family:var(--serif); font-weight:700; font-size:clamp(2.4rem,5vw,3.6rem); line-height:1; color:var(--navy); }
.sec-index .si-label{ font-family:var(--sans); font-weight:700; font-size:.72rem; letter-spacing:.28em; text-transform:uppercase; color:var(--ink-3); }
/* お悩み：白カードの均等並べ → 大きな通し番号＋ヘアライン罫のリスト */
.worries-list{ display:flex; flex-direction:column; }
.worry-row{ display:flex; gap:clamp(18px,3vw,34px); align-items:flex-start; padding:clamp(20px,2.6vw,30px) 0; border-top:1px solid var(--line-2); }
.worry-row:last-child{ border-bottom:1px solid var(--line-2); }
.worry-row:nth-child(even){ margin-left:clamp(20px,6vw,80px); }
.worry-row .worry-no{ font-family:var(--serif); font-weight:600; font-size:clamp(1.9rem,3vw,2.7rem); color:var(--navy); opacity:.36; line-height:1; flex:0 0 auto; font-variant-numeric:tabular-nums; }
.worry-row p{ font-size:clamp(1.02rem,1.5vw,1.18rem); color:var(--ink); font-weight:500; line-height:1.7; }
.worries-list .worry-row:nth-child(2).reveal{ transition-delay:.08s; }
.worries-list .worry-row:nth-child(3).reveal{ transition-delay:.16s; }
.worries-list .worry-row:nth-child(4).reveal{ transition-delay:.24s; }
.feature-list{ align-items:start; }
@media (max-width:760px){
  .worries-grid{ grid-template-columns:1fr; }
  .worries-illust{ display:none; }
  .worry-row:nth-child(even){ margin-left:0; }
}

/* ---------- Reveal animation ---------- */
.reveal{ opacity:0; transform:translateY(20px); transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1 !important; transform:none !important; transition:none; } .btn:hover{ transform:none; } }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:980px){
  .price-grid{ grid-template-columns:repeat(2,1fr); }
  .flow-steps{ grid-template-columns:repeat(2,1fr); }
  .flow-step:not(:last-child)::after{ display:none; }
  .geo-grid{ grid-template-columns:1fr; } .geo-visual{ order:-1; }
  .geo-copy{ text-align:center; }
}
@media (max-width:760px){
  .feature-list{ grid-template-columns:1fr; }
  .nav, .header-cta{ display:none; }
  .nav-toggle{ display:flex; }
  .site-header.open .nav{
    display:flex; flex-direction:column; gap:0;
    position:absolute; top:68px; left:0; right:0; background:var(--surface);
    border-bottom:1px solid var(--line); padding:8px var(--sx) 18px;
  }
  .site-header.open .nav a{ padding:14px 0; border-bottom:1px solid var(--line); }
  .site-header.open .nav a::after{ display:none; }
  .hero-grid{ grid-template-columns:1fr; text-align:center; }
  .hero-sub{ margin-inline:auto; }
  .hero-actions{ justify-content:center; }
  .hero-visual{ order:-1; }
  .hero-visual img{ width:min(78%,360px); }
  .worry-grid{ grid-template-columns:repeat(2,1fr); }
  .worry-card{ min-height:0; }
}
@media (max-width:520px){
  .price-grid{ grid-template-columns:1fr; }
  .worry-grid{ grid-template-columns:1fr; }
  .flow-steps{ grid-template-columns:1fr; }
  .sample-grid{ grid-template-columns:1fr; gap:44px; }
  .compare th,.compare td{ padding:14px 12px; font-size:.88rem; }
}


/* ---------- Legal pages（特商法/利用規約/プライバシー） ---------- */
.legal-header{ position:sticky; top:0; z-index:50; background:rgba(252,252,250,.9); backdrop-filter:saturate(140%) blur(12px); border-bottom:1px solid var(--line); }
.legal-header .container{ display:flex; align-items:center; gap:16px; height:64px; }
.legal-header .brand{ margin-right:auto; font-family:var(--serif); font-weight:700; font-size:1.25rem; letter-spacing:.16em; color:var(--navy); }
.legal-back{ font-size:.86rem; color:var(--ink-2); transition:color .2s; }
.legal-back:hover{ color:var(--navy); }
.legal{ padding:clamp(40px,6vw,80px) 0 clamp(56px,8vw,96px); }
.legal .container{ max-width:840px; }
.legal h1{ font-family:var(--serif); font-weight:600; color:var(--navy); font-size:clamp(1.5rem,3.4vw,2.2rem); letter-spacing:.02em; line-height:1.5; }
.legal .lead{ margin-top:1.1em; color:var(--ink-2); font-size:.97rem; line-height:1.95; }
.legal .updated{ margin-top:1.6em; color:var(--ink-3); font-size:.86rem; }
.legal h2{ font-family:var(--sans); font-weight:700; color:var(--ink); font-size:1.1rem; margin:2.4em 0 .7em; padding-top:1.5em; border-top:1px solid var(--line); letter-spacing:.02em; }
.legal h2:first-of-type{ border-top:0; padding-top:0; margin-top:2em; }
.legal p{ color:var(--ink-2); font-size:.95rem; line-height:1.95; margin:.7em 0; }
.legal ul, .legal ol{ margin:.5em 0 .7em; padding-left:1.5em; }
.legal li{ color:var(--ink-2); font-size:.95rem; line-height:1.9; margin:.35em 0; }
.legal ul li{ list-style:disc; } .legal ol li{ list-style:decimal; }
.legal a{ color:var(--navy); text-decoration:underline; text-underline-offset:2px; }
.legal a:hover{ opacity:.75; }
.legal .todo{ color:#B4541F; font-weight:700; background:#FBEEE6; padding:.04em .45em; border-radius:5px; font-size:.92em; }
.legal-table{ width:100%; border-collapse:collapse; margin:1.4em 0; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--surface); }
.legal-table th, .legal-table td{ text-align:left; padding:15px 18px; border-bottom:1px solid var(--line); font-size:.92rem; vertical-align:top; line-height:1.85; }
.legal-table th{ width:34%; background:var(--bg-2); color:var(--ink); font-weight:700; }
.legal-table td{ color:var(--ink-2); }
.legal-table tr:last-child th, .legal-table tr:last-child td{ border-bottom:0; }
@media (max-width:560px){
  .legal-table th, .legal-table td{ display:block; width:auto; }
  .legal-table th{ border-bottom:0; padding-bottom:4px; }
  .legal-table td{ padding-top:4px; }
}
/* footer links */
.footer-links{ display:flex; flex-wrap:wrap; gap:8px 22px; justify-content:center; margin:8px 0 6px; }
.footer-links a{ font-size:.83rem; color:rgba(255,255,255,.72); transition:color .2s; }
.footer-links a:hover{ color:#fff; text-decoration:underline; }