@charset "utf-8";
/* =========================================================================
seo.css — 風俗SEO対策ページ（/seo/）固有スタイル
共通（ヘッダー/フッター/CTA赤帯/パンくず/色変数/タイポ）は common.css。
セクション: hero / reality(2026) / pillars / proof(記事) / flow / mid-cta / pricing / faq / voice
========================================================================= */
/* ============ 01 HERO（生成り） ============ */
.hero{ position:relative; background:var(--cream); color:#000; overflow:hidden; min-height:82vh; display:flex; flex-direction:column }
.hero-watermark{ position:absolute; inset:0; display:flex; align-items:center; justify-content:flex-start; pointer-events:none; z-index:0; padding-left:48px }
.hero-watermark span{ font-family:var(--en); font-weight:900; font-size:clamp(140px,16vw,280px); letter-spacing:-0.02em; color:rgba(0,0,0,0.06); line-height:.85; white-space:nowrap; transform:translateY(8%) }
/* SERP風の装飾（検索結果のかすれた行） */
.hero-serp{ position:absolute; top:50%; right:6%; transform:translateY(-50%); z-index:0; pointer-events:none; display:flex; flex-direction:column; gap:18px; opacity:.4 }
.hero-serp .serp-row{ display:flex; flex-direction:column; gap:8px; width:340px }
.hero-serp .serp-url{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:#000; opacity:.55 }
.hero-serp .serp-title{ height:14px; background:#000; width:88%; opacity:.85 }
.hero-serp .serp-desc{ height:6px; background:#000; opacity:.25; width:96% }
.hero-serp .serp-desc.short{ width:72% }
.hero-serp .serp-row.first .serp-url{ color:var(--red); opacity:1 }
.hero-serp .serp-row.first .serp-title{ background:var(--red); opacity:1; height:18px }
.hero-inner{ position:relative; z-index:2; padding:80px var(--gutter); max-width:var(--maxw); margin-inline:auto; width:100%; display:grid; grid-template-columns:1.4fr .8fr; gap:32px; align-items:end; flex:1 }
.hero-text .eyebrow{ color:var(--red); opacity:.95 }
.hero-text h1{ font-family:var(--jp); font-weight:900; font-size:clamp(56px,8.5vw,140px); line-height:.92; letter-spacing:-0.04em; margin:24px 0 28px; text-wrap:balance; color:#000 }
.hero-text h1 .accent{ color:var(--red) }
.hero-text .sub{ font-family:var(--jp); font-weight:500; font-size:clamp(16px,1.3vw,20px); line-height:1.7; letter-spacing:.02em; opacity:.85; max-width:38ch; margin:0 0 36px }
.hero-meta{ display:flex; gap:24px; font-family:var(--mono); font-size:12px; letter-spacing:.12em; opacity:.6; flex-wrap:wrap; color:#000 }
.hero-meta .dotred{ display:inline-block; width:8px; height:8px; background:var(--red); margin-right:8px; transform:translateY(-2px) }
.hero-mascot{ position:relative; display:flex; justify-content:center; align-items:flex-end; height:100%; min-height:380px; z-index:3 }
.hero-mascot img{ height:600px; width:auto; max-width:none; filter:drop-shadow(0 12px 0 rgba(248,39,79,0.18)) }
/* ============ 02 REALITY CHECK（黒・SEOは変わった） ============ */
.reality{ background:#000; color:#fff; padding:160px 56px; border-top:2px solid #000; position:relative; overflow:hidden }
.reality-bg{ position:absolute; left:-2%; bottom:-14%; font-family:var(--en); font-weight:900; font-size:clamp(220px,30vw,500px); color:rgba(255,255,255,0.05); line-height:.82; letter-spacing:-0.04em; pointer-events:none; user-select:none; white-space:nowrap }
.reality-inner{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); position:relative; display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center }
.reality-left .eyebrow{ color:var(--red); opacity:1 }
.reality-left h2{ font-family:var(--jp); font-weight:900; font-size:clamp(56px,8vw,128px); line-height:.95; letter-spacing:-0.04em; margin:24px 0 0; text-wrap:balance }
.reality-left h2 .strike{ position:relative; display:inline-block }
.reality-left h2 .strike::after{ content:""; position:absolute; left:-4%; right:-4%; top:55%; height:14px; background:var(--red); transform:rotate(-3deg); z-index:-1 }
.reality-left h2 em{ font-style:normal; color:var(--red) }
.reality-left .since{ font-family:var(--mono); font-size:13px; letter-spacing:.18em; margin-top:40px; opacity:.6 }
.reality-right .points{ display:flex; flex-direction:column; gap:36px }
.reality-right .point{ display:grid; grid-template-columns:64px 1fr; gap:20px; align-items:flex-start; padding-bottom:32px; border-bottom:1px solid rgba(255,255,255,0.15) }
.reality-right .point:last-child{ border-bottom:none; padding-bottom:0 }
.reality-right .point .pno{ font-family:var(--en); font-weight:900; font-size:36px; color:var(--red); line-height:1; letter-spacing:-0.02em }
.reality-right .point h3{ font-family:var(--jp); font-weight:900; font-size:22px; line-height:1.4; letter-spacing:-0.02em; margin:0 0 8px }
.reality-right .point p{ font-size:14.5px; line-height:1.85; opacity:.8; margin:0; max-width:42ch }
.reality-statement{ margin-top:64px; border-top:2px solid #fff; padding-top:40px; display:flex; justify-content:flex-end }
.reality-statement p{ font-family:var(--jp); font-weight:900; font-size:clamp(22px,2.4vw,32px); line-height:1.5; max-width:30ch; margin:0; letter-spacing:-0.02em }
.reality-statement p em{ font-style:normal; color:var(--red) }
/* ============ 03 TWO PILLARS（生成り・二本柱） ============ */
.pillars{ background:var(--cream); color:#000; padding:140px 56px }
.pillars-head{ margin-bottom:80px; display:flex; justify-content:space-between; align-items:flex-end; gap:48px; flex-wrap:wrap }
.pillars-head h2{ font-family:var(--jp); font-weight:900; font-size:clamp(40px,5.4vw,88px); line-height:1.0; letter-spacing:-0.03em; margin:12px 0 0 }
.pillars-head h2 .en{ font-family:var(--en); font-weight:900; font-size:.7em; margin-right:.4em; opacity:.5 }
.pillars-head p{ max-width:36ch; font-size:16px; line-height:1.8; opacity:.85 }
.pillar-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0; border:2px solid #000; background:#fff }
.pillar{ padding:56px 48px; display:flex; flex-direction:column; gap:20px; border-right:2px solid #000; position:relative; transition:background .2s,color .2s }
.pillar:last-child{ border-right:none }
.pillar:hover{ background:#000; color:#fff }
.pillar:hover .pillar-no{ color:#fff }
.pillar:hover .pillar-en{ color:rgba(255,255,255,.15) }
.pillar .pillar-no{ font-family:var(--en); font-weight:900; font-size:14px; letter-spacing:.18em; color:var(--red) }
.pillar .pillar-en{ position:absolute; right:24px; top:24px; font-family:var(--en); font-weight:900; font-size:clamp(56px,5vw,84px); letter-spacing:-0.02em; line-height:.85; color:rgba(0,0,0,0.07); transition:color .2s }
.pillar h3{ font-family:var(--jp); font-weight:900; font-size:clamp(28px,3vw,44px); line-height:1.15; letter-spacing:-0.03em; margin:24px 0 0; text-wrap:balance }
.pillar p{ font-size:15.5px; line-height:1.95; opacity:.88; max-width:42ch; margin:0; font-weight:500 }
.pillar .pillar-points{ margin-top:8px; display:flex; flex-direction:column; gap:10px; padding:0 }
.pillar .pillar-points li{ list-style:none; padding-left:22px; position:relative; font-size:14.5px; line-height:1.7; opacity:.9 }
.pillar .pillar-points li::before{ content:""; position:absolute; left:0; top:9px; width:10px; height:2px; background:var(--red) }
.pillar:hover .pillar-points li::before{ background:#fff }
.anti-link{ margin-top:48px; padding:40px 48px; background:#fff; border:2px solid #000; display:grid; grid-template-columns:auto 1fr; gap:32px; align-items:center }
.anti-link .x{ font-family:var(--en); font-weight:900; font-size:96px; line-height:.85; color:var(--red); letter-spacing:-0.04em }
.anti-link .x small{ display:block; font-size:14px; letter-spacing:.18em; color:#000; font-weight:800; margin-bottom:4px; opacity:.5; font-family:var(--mono) }
.anti-link p{ font-family:var(--jp); font-weight:900; font-size:clamp(20px,1.8vw,26px); line-height:1.5; letter-spacing:-0.02em; margin:0; text-wrap:pretty; max-width:48ch }
.anti-link p span{ background:#000; color:#fff; padding:0 .1em }
/* ============ 04 SEO記事（証拠・白） ============ */
.proof{ background:var(--white); color:#000; padding:140px 56px; border-top:2px solid #000; border-bottom:2px solid #000; position:relative; overflow:hidden }
.proof-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:32px; margin-bottom:64px; flex-wrap:wrap }
.proof-head h2{ font-family:var(--jp); font-weight:900; font-size:clamp(40px,5vw,76px); line-height:1.05; letter-spacing:-0.03em; margin:12px 0 0; text-wrap:balance; max-width:18ch }
.proof-head h2 .en{ font-family:var(--en); font-weight:900; font-size:.55em; margin-right:.4em; opacity:.5 }
.proof-head p{ max-width:30ch; font-size:15px; line-height:1.85; opacity:.85; margin:0 }
.proof-meta{ margin-bottom:48px; display:flex; align-items:flex-end; gap:24px; font-family:var(--mono); font-size:12px; letter-spacing:.1em; opacity:.6; border-bottom:1px solid #000; padding-bottom:14px; flex-wrap:wrap }
.proof-meta .cat-val{ opacity:1 }
.proof-meta .big{ font-family:var(--en); font-weight:900; font-size:22px; color:var(--red); letter-spacing:0; opacity:1 }
.proof-meta .upd{ margin-left:auto }
.articles{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px }
.article{ display:flex; flex-direction:column; border:2px solid #000; background:#fff; transition:transform .15s,box-shadow .15s }
.article:hover{ transform:translate(-4px,-4px); box-shadow:8px 8px 0 #000 }
.article-thumb{ aspect-ratio:1200/630; background:var(--cream); position:relative; overflow:hidden; border-bottom:2px solid #000 }
.article-thumb img{ width:100%; height:100%; object-fit:cover; display:block }
.article-thumb--default{ background:repeating-linear-gradient(135deg,#000 0 14px,#1a1a1a 14px 28px); display:flex; align-items:center; justify-content:center; color:#fff; position:relative }
.article-thumb--default .ph{ font-family:var(--en); font-weight:900; font-size:48px; letter-spacing:-0.02em; text-shadow:3px 3px 0 var(--red); line-height:.95; text-align:center }
.article-thumb--default .ph small{ display:block; font-family:var(--mono); font-size:11px; font-weight:400; letter-spacing:.2em; margin-top:6px; text-shadow:none; opacity:.9 }
.article-body{ padding:24px 24px 28px }
.article-meta{ display:flex; align-items:center; gap:14px; font-family:var(--mono); font-size:12px; letter-spacing:.05em }
.article-cat{ background:var(--red); color:#fff; padding:4px 8px; font-family:var(--en); font-weight:800; letter-spacing:.1em; font-size:11px }
.article-date{ opacity:.7 }
.article-title{ font-family:var(--jp); font-weight:700; font-size:18px; line-height:1.5; margin:14px 0 0; letter-spacing:-0.005em; text-wrap:pretty }
.proof-empty{ font-family:var(--jp); font-weight:700; font-size:15px; line-height:1.9; opacity:.7; padding:8px 0 }
.proof-foot{ margin-top:56px; display:flex; justify-content:center }
.proof-more{ display:inline-flex; align-items:center; gap:14px; border:2px solid #000; padding:20px 32px; font-family:var(--jp); font-weight:800; font-size:16px; transition:background .15s,color .15s }
.proof-more:hover{ background:#000; color:#fff }
.proof-more .arrow{ font-family:var(--en); font-weight:800; transition:transform .25s }
.proof-more:hover .arrow{ transform:translateX(8px) }
/* ============ 05 FLOW（生成り） ============ */
.flow{ background:var(--cream); color:#000; padding:140px 56px }
.flow-head{ margin-bottom:72px }
.flow-head h2{ font-family:var(--jp); font-weight:900; font-size:clamp(40px,5.4vw,88px); line-height:1.0; letter-spacing:-0.03em; margin:12px 0 0 }
.flow-head h2 .en{ font-family:var(--en); font-weight:900; font-size:.7em; margin-right:.4em; opacity:.5 }
.flow-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:2px solid #000; background:#fff; border-left:2px solid #000 }
.flow-step{ padding:40px 28px; border-bottom:2px solid #000; border-right:2px solid #000; position:relative; min-height:280px; display:flex; flex-direction:column }
.flow-step .step-no{ font-family:var(--en); font-weight:900; font-size:80px; line-height:.9; letter-spacing:-0.04em; color:var(--red) }
.flow-step .step-no .small{ display:block; font-size:14px; letter-spacing:.2em; color:#000; opacity:.5; margin-bottom:8px }
.flow-step h3{ font-family:var(--jp); font-weight:900; font-size:22px; line-height:1.35; margin:32px 0 12px; letter-spacing:-0.02em }
.flow-step p{ font-size:13.5px; line-height:1.75; opacity:.8; margin:0; max-width:24ch }
.flow-step::after{ content:"→"; position:absolute; right:-18px; top:50%; transform:translateY(-50%); font-family:var(--en); font-weight:900; font-size:32px; background:var(--cream); color:var(--red); padding:0 6px; z-index:2 }
.flow-step:last-child::after{ display:none }
/* ============ ミッドCTA（赤帯） ============ */
.mid-cta{ background:var(--red); color:#fff; padding:80px 56px; border-top:2px solid #000; border-bottom:2px solid #000 }
.mid-cta-inner{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); display:flex; justify-content:space-between; align-items:center; gap:32px; flex-wrap:wrap }
.mid-cta h3{ font-family:var(--jp); font-weight:900; font-size:clamp(28px,3.4vw,48px); line-height:1.15; letter-spacing:-0.03em; margin:0; text-wrap:balance; text-shadow:3px 3px 0 #000 }
.mid-cta .cta{ background:#fff; color:var(--red); border-color:#000; box-shadow:6px 6px 0 #000 }
.mid-cta .cta:hover{ background:#000; color:#fff; box-shadow:2px 2px 0 #000 }
/* ============ 06 料金（価格は出さない・白） ============ */
.pricing{ background:#fff; color:#000; padding:140px 56px }
.pricing-inner{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); display:grid; grid-template-columns:1fr 1.2fr; gap:80px; align-items:center }
.pricing-left .eyebrow{ color:var(--red); opacity:1 }
.pricing-left h2{ font-family:var(--jp); font-weight:900; font-size:clamp(48px,6.4vw,108px); line-height:.92; letter-spacing:-0.04em; margin:24px 0 0; text-wrap:balance }
.pricing-left h2 em{ font-style:normal; color:var(--red) }
.pricing-right{ display:flex; flex-direction:column; gap:24px }
.price-card{ padding:32px 36px; border:2px solid #000; background:var(--cream); display:flex; align-items:flex-start; gap:24px }
.price-card .ptype{ font-family:var(--en); font-weight:900; font-size:18px; letter-spacing:.1em; color:var(--red); line-height:1; flex:0 0 auto; min-width:120px }
.price-card .ptype small{ display:block; font-family:var(--mono); font-size:10px; letter-spacing:.2em; color:#000; opacity:.5; margin-top:6px; font-weight:400 }
.price-card .pbody h3{ font-family:var(--jp); font-weight:900; font-size:22px; line-height:1.4; margin:0 0 8px; letter-spacing:-0.02em }
.price-card .pbody p{ font-size:14.5px; line-height:1.85; opacity:.85; margin:0; max-width:46ch }
.price-note{ font-family:var(--jp); font-weight:700; font-size:15px; line-height:1.85; background:#000; color:#fff; padding:24px 28px; display:flex; gap:16px; align-items:center }
.price-note .arrow{ font-family:var(--en); font-weight:800; color:var(--red); font-size:24px }
/* ============ 07 FAQ抜粋（生成り） ============ */
.faq{ background:var(--cream); color:#000; padding:140px 56px; border-top:2px solid #000 }
.faq-head{ margin-bottom:64px; display:flex; justify-content:space-between; align-items:flex-end; gap:32px; flex-wrap:wrap }
.faq-head h2{ font-family:var(--jp); font-weight:900; font-size:clamp(40px,5.4vw,88px); line-height:1.0; letter-spacing:-0.03em; margin:12px 0 0 }
.faq-head h2 .en{ font-family:var(--en); font-weight:900; font-size:.7em; margin-right:.4em; opacity:.4 }
.faq-head .faq-lead{ opacity:.75; max-width:36ch; font-size:15px; line-height:1.8 }
.faq-list{ display:flex; flex-direction:column; border-top:2px solid #000 }
.faq-row{ display:grid; grid-template-columns:80px 1fr; gap:32px; padding:36px 0; border-bottom:2px solid #000; align-items:flex-start; transition:padding-left .2s }
.faq-row:hover{ padding-left:16px }
.faq-mark{ font-family:var(--en); font-weight:900; font-size:48px; line-height:.9; color:var(--red); letter-spacing:-0.02em }
.faq-q{ font-family:var(--jp); font-weight:900; font-size:clamp(20px,1.8vw,26px); line-height:1.4; letter-spacing:-0.01em; margin:0 0 14px; text-wrap:balance }
.faq-a{ display:grid; grid-template-columns:80px 1fr; gap:0; margin-top:8px }
.faq-a-mark{ font-family:var(--en); font-weight:800; font-size:14px; letter-spacing:.18em; color:var(--red); opacity:.7; padding-top:4px }
.faq-a-text{ font-size:15px; line-height:1.85; opacity:.85; max-width:60ch; font-weight:500 }
.faq-foot{ margin-top:48px; display:flex; justify-content:center }
.faq-all{ display:inline-flex; align-items:center; gap:14px; border:2px solid #000; padding:20px 32px; font-family:var(--jp); font-weight:900; font-size:16px; transition:background .15s,color .15s }
.faq-all:hover{ background:#000; color:#fff }
.faq-all .arrow{ font-family:var(--en); font-weight:800; transition:transform .25s }
.faq-all:hover .arrow{ transform:translateX(8px) }
/* ============ 08 VOICE（白・非対称グリッド） ============ */
.voice{ background:#fff; color:#000; padding:140px 56px; border-top:2px solid #000 }
.voice-head{ margin-bottom:64px }
.voice-head h2{ font-family:var(--jp); font-weight:900; font-size:clamp(40px,5.4vw,88px); line-height:1.0; letter-spacing:-0.03em; margin:12px 0 0 }
.voice-head h2 .en{ font-family:var(--en); font-weight:900; font-size:.7em; margin-right:.4em; opacity:.5 }
.voice-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:24px; grid-auto-rows:minmax(120px,auto) }
.voice-card{ padding:36px 32px; background:var(--cream); border:2px solid #000; position:relative; display:flex; flex-direction:column; justify-content:space-between; transition:transform .15s,box-shadow .15s }
.voice-card:hover{ transform:translate(-3px,-3px); box-shadow:6px 6px 0 var(--red) }
.voice-card .quote-mark{ font-family:var(--en); font-weight:900; font-size:80px; line-height:.7; color:var(--red); position:absolute; top:16px; right:20px; opacity:.85 }
.voice-card blockquote{ font-family:var(--jp); font-weight:700; font-size:17px; line-height:1.7; letter-spacing:-0.005em; margin:0; text-wrap:pretty; padding-right:60px; max-width:38ch }
.voice-card .meta{ margin-top:24px; font-family:var(--mono); font-size:12px; letter-spacing:.08em; opacity:.7; display:flex; gap:14px }
.voice-card .meta .cat{ background:#000; color:#fff; padding:3px 8px; font-family:var(--en); font-weight:800; letter-spacing:.1em }
.voice-card.vsize-3{ grid-column:span 3 }
.voice-card.vsize-2{ grid-column:span 2 }
.voice-card.vsize-feature{ grid-column:span 4; background:#000; color:#fff; border-color:#000 }
.voice-card.vsize-feature .quote-mark{ color:var(--red); opacity:1 }
.voice-card.vsize-feature blockquote{ font-size:22px }
/* 赤の小カード（design の inline 版をクラス化） */
.voice-card.vsize-red{ background:var(--red); color:#fff; border-color:#000 }
.voice-card.vsize-red .quote-mark{ color:#000; opacity:.9 }
.voice-card.vsize-red .meta{ opacity:.95 }
.voice-card.vsize-red .meta .cat{ background:#000 }
.voice-card.vsize-red .meta .src{ color:#fff; opacity:.85 }
/* =========================================================================
レスポンシブ
========================================================================= */
@media (max-width:1100px){
.hero-serp{ display:none } /* SERP装飾は中幅以下で隠す */
}
@media (max-width:960px){
/* HERO */
.hero{ min-height:auto }
/* SP：見出し・本文は balance/pretty 解除で幅いっぱい折り返し */
.reality-left h2, .pillar h3, .anti-link p, .proof-head h2, .article-title, .mid-cta h3, .pricing-left h2, .faq-q, .voice-card blockquote{ text-wrap:wrap }
.hero-watermark{ padding-left:0; left:-3%; justify-content:flex-start }
.hero-watermark span{ font-size:25vw }
.hero-inner{ grid-template-columns:1fr; gap:24px; padding:48px 18px 56px }
/* SP順序：アイブロウ→タイトル→マスコット→説明→メタ（hero-textを解除して並べ替え） */
.hero-text{ display:contents }
.hero-text .eyebrow{ order:1 }
.hero-text h1{ order:2; font-size:22vw; line-height:.95; margin:20px 0 24px; text-wrap:wrap }
.hero-mascot{ order:3; min-height:auto; margin:8px 0 }
/* SP：sub下の余白を縮小（gap24pxで足りるため基本の36pxを解除＝design-source相当） */
.hero-text .sub{ order:4; max-width:none; line-height:1.7; margin-bottom:0 }
.hero-meta{ order:5; flex-direction:column; gap:10px }
.hero-mascot img{ height:min(380px,86vw) }
/* REALITY */
.reality{ padding:64px 18px }
.reality-inner{ grid-template-columns:1fr; gap:40px }
.reality-bg{ font-size:46vw }
/* SP専用：スタッキング文脈を作り「変わった」のピンク斜線(.strike::after z-index:-1)を黒背景の上に出す */
.reality-left{ position:relative; z-index:1 }
.reality-left h2{ font-size:60px }
.reality-left .since{ font-size:12px }
.reality-right .point .pno{ font-size:30px }
.reality-right .point h3{ font-size:20px }
.reality-statement{ margin-top:36px; padding-top:28px; justify-content:flex-start }
.reality-statement p{ font-size:26px; max-width:none }
/* SP：PC共通の
を無効化し、文章を画面幅まで自然に折り返す */
.reality-statement p br{ display:none }
.reality-right .point p{ max-width:none }
/* PILLARS */
.pillars{ padding:64px 18px }
.pillars-head{ margin-bottom:36px; gap:16px }
.pillars-head h2{ font-size:40px }
/* SP：PC共通の
を無効化し、画面幅で普通に折り返す */
.pillars-head h2 br{ display:none }
/* SP：PC共通のmax-width:36chを解除し、画面幅いっぱいまで折り返す */
.pillars-head p{ font-size:15px; max-width:none }
.pillar .pillar-no{ font-size:13px }
.pillar .pillar-en{ font-size:44px }
.pillar h3{ font-size:26px }
.pillar p{ font-size:15px }
.pillar-grid{ grid-template-columns:1fr }
.pillar{ border-right:none; border-bottom:2px solid #000; padding:40px 24px }
.pillar:last-child{ border-bottom:none }
.pillar p{ max-width:none }
.anti-link{ grid-template-columns:1fr; gap:16px; padding:28px 24px }
.anti-link .x{ font-size:72px }
.anti-link .x small{ font-size:13px }
/* PROOF */
.proof{ padding:64px 18px }
.proof-head{ margin-bottom:32px; gap:14px }
.proof-head h2{ font-size:36px; max-width:none }
.proof-head p{ max-width:none }
/* SP：PC用のmargin-left:autoを解除し、UPDATEDを左寄せにする */
.proof-meta .upd{ margin-left:0 }
.article-thumb--default .ph{ font-size:44px }
.article-meta{ font-size:11px }
.article-title{ font-size:17px }
.proof-more{ font-size:15px }
.articles{ grid-template-columns:1fr; gap:24px }
/* FLOW */
.flow{ padding:64px 18px }
.flow-head{ margin-bottom:36px }
.flow-head h2{ font-size:40px }
.flow-step .step-no{ font-size:64px }
.flow-step .step-no .small{ font-size:13px }
.flow-step h3{ font-size:24px }
.flow-step p{ font-size:14px; max-width:none }
.flow-grid{ grid-template-columns:1fr; border-left:none }
.flow-step{ min-height:auto; padding:32px 24px; border-right:none; border-left:2px solid #000; border-right:2px solid #000 }
/* SP：矢印を下向き(↓)にしてステップ間の中央下へ。last-childはPC基本で非表示済み */
.flow-step::after{ content:"↓"; right:auto; left:50%; top:auto; bottom:-19px; transform:translateX(-50%); font-size:30px; line-height:1; padding:2px 8px }
/* MID CTA */
.mid-cta{ padding:56px 18px }
.mid-cta-inner{ flex-direction:column; align-items:stretch; gap:28px }
.mid-cta h3{ font-size:28px }
.mid-cta .cta{ width:100%; justify-content:center }
/* PRICING */
.pricing{ padding:64px 18px }
/* SP：.containerとpricing-innerのガター二重がけを解消（gutterは.container側で担保） */
.pricing-inner{ grid-template-columns:1fr; gap:32px; padding-inline:0 }
.pricing-left h2{ font-size:48px }
.price-card{ flex-direction:column; gap:14px; padding:28px 24px }
.price-card .ptype{ min-width:0 }
/* SP：smallを折り返さず「A. PERFORMANCE」を1行に（PC基本のdisplay:blockを解除） */
.price-card .ptype small{ display:inline; margin-top:0; margin-left:8px }
/* SP：price-noteのピンク矢印を上寄せに（PC基本のalign-items:centerを解除） */
.price-note{ align-items:flex-start }
.price-note .arrow{ line-height:1.3 }
/* FAQ */
.faq{ padding:64px 18px }
.faq-head{ margin-bottom:32px; gap:14px }
.faq-head h2{ font-size:40px }
.faq-head .faq-lead{ max-width:none }
.faq-row{ grid-template-columns:1fr; gap:0; padding:28px 0 }
.faq-row:hover{ padding-left:0 }
.faq-mark{ font-size:32px; margin-bottom:12px }
.faq-q{ font-size:21px }
.faq-a{ grid-template-columns:40px 1fr }
.faq-all{ width:100%; justify-content:center }
/* VOICE */
.voice{ padding:64px 18px }
.voice-head{ margin-bottom:28px }
.voice-head h2{ font-size:40px }
.voice-grid{ grid-template-columns:1fr; gap:18px }
.voice-card,
.voice-card.vsize-3,
.voice-card.vsize-2,
.voice-card.vsize-feature,
.voice-card.vsize-red{ grid-column:span 1 }
.voice-card .quote-mark{ font-size:64px }
.voice-card .meta{ font-size:11px }
.voice-card blockquote{ padding-right:40px }
.voice-card.vsize-feature blockquote{ font-size:17px }
}
/* ===== 基準線統一：バンドは横paddingを持たない（gutterは内側コンテナが担う） ===== */
.reality, .pillars, .proof, .flow, .mid-cta, .pricing, .faq, .voice{ padding-left:0; padding-right:0 }