@charset "utf-8";
/* =========================================================================
aiqoo.css — AIQoo（風俗業界特化AI）ページ（/aiqoo/）固有スタイル
共通（ヘッダー/フッター/CTA赤帯/パンくず/色変数/タイポ）は common.css。
セクション: hero / pain / features(18ツール) / easy / pricing(¥55,000) / signup / faq
========================================================================= */
/* ============ 01 HERO（赤） ============ */
.hero{ position:relative; background:var(--red); color:#fff; overflow:hidden; min-height:84vh; display:flex; flex-direction:column }
.hero-watermark{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; z-index:0 }
.hero-watermark span{ font-family:var(--en); font-weight:900; font-size:clamp(220px,32vw,520px); letter-spacing:-0.04em; color:rgba(255,255,255,0.14); line-height:.85; transform:translateY(-3%) }
/* テックグリッド */
.hero-grid{ position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.18; background-image:linear-gradient(rgba(255,255,255,.6) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.6) 1px,transparent 1px); background-size:80px 80px; -webkit-mask-image:radial-gradient(ellipse at 70% 60%,#000 30%,transparent 75%); mask-image:radial-gradient(ellipse at 70% 60%,#000 30%,transparent 75%) }
/* プロンプト風ウィンドウ装飾 */
.hero-prompt{ position:absolute; right:48px; top:50%; transform:translateY(-50%); z-index:1; background:#000; border:2px solid #000; color:#fff; width:380px; font-family:var(--mono); font-size:13px; line-height:1.6; box-shadow:10px 10px 0 rgba(0,0,0,0.35) }
.hero-prompt .pbar{ background:#1a1a1a; padding:8px 14px; display:flex; gap:6px; align-items:center; border-bottom:1px solid #333; font-size:11px; letter-spacing:.12em; opacity:.85 }
.hero-prompt .pbar .dot{ width:10px; height:10px; background:var(--red); border-radius:50% }
.hero-prompt .pbar .dot.amber{ background:#FFB020 }
.hero-prompt .pbar .dot.green{ background:#46D67E }
.hero-prompt .pbar .label{ margin-left:8px; font-family:var(--mono); font-size:11px; color:#aaa }
.hero-prompt .pbody{ padding:18px 18px 22px; min-height:160px }
.hero-prompt .pbody .user{ color:#9ec5ff; margin-bottom:8px }
.hero-prompt .pbody .text{ margin-bottom:14px }
.hero-prompt .pbody .ai{ color:var(--red); margin-bottom:8px }
.hero-prompt .pbody .typing{ display:inline-block; width:7px; height:14px; background:#fff; margin-left:3px; vertical-align:middle; animation:blink 1s steps(2,start) infinite }
@keyframes blink{ 0%,100%{opacity:1} 50%{opacity:0} }
.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.2fr 1fr; gap:32px; align-items:end; flex:1 }
.hero-text .eyebrow{ color:#fff; opacity:1 }
.hero-text .eyebrow::before{ background:#000 }
.hero-text h1{ font-family:var(--jp); font-weight:900; font-size:clamp(56px,8.8vw,150px); line-height:.9; letter-spacing:-0.04em; margin:24px 0 28px; text-wrap:balance; color:#fff; text-shadow:6px 6px 0 #000 }
.hero-text h1 .accent{ display:inline-block; background:#000; color:var(--red); padding:0 .1em; text-shadow:none }
.hero-text .sub{ font-family:var(--jp); font-weight:500; font-size:clamp(16px,1.3vw,20px); line-height:1.65; letter-spacing:.02em; max-width:36ch; margin:0 0 36px }
.hero-text .sub strong{ font-family:var(--en); font-weight:900; font-size:1.2em; letter-spacing:.02em; background:#000; padding:0 .25em; margin-right:.25em }
.hero-meta{ display:flex; gap:24px; font-family:var(--mono); font-size:12px; letter-spacing:.12em; flex-wrap:wrap; color:#fff; opacity:.95 }
.hero-meta .dotred{ display:inline-block; width:8px; height:8px; background:#000; margin-right:8px; transform:translateY(-2px) }
.hero-mascot{ position:relative; display:flex; justify-content:flex-end; align-items:flex-end; height:100%; min-height:380px; z-index:3 }
.hero-mascot img{ height:580px; width:auto; max-width:none; filter:drop-shadow(0 16px 0 rgba(0,0,0,0.25)) }
/* ============ 02 PAIN（あるある悩み・生成り） ============ */
.pain{ background:var(--cream); color:#000; padding:140px 56px; position:relative; overflow:hidden }
.pain-head{ margin-bottom:80px; display:flex; justify-content:space-between; align-items:flex-end; gap:48px; flex-wrap:wrap }
.pain-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; text-wrap:balance; max-width:18ch }
.pain-head h2 .en{ font-family:var(--en); font-weight:900; font-size:.7em; margin-right:.4em; opacity:.5 }
.pain-head h2 em{ font-style:normal; background:linear-gradient(transparent 62%, var(--red) 62%, var(--red) 88%, transparent 88%); padding:0 .04em; color:#000 }
.pain-head p{ max-width:32ch; font-size:16px; line-height:1.8; opacity:.85 }
.pain-list{ display:grid; grid-template-columns:1.1fr .9fr 1fr; gap:32px; align-items:flex-start }
.bubble{ background:#fff; border:2px solid #000; padding:32px 30px; position:relative; font-family:var(--jp); font-weight:700; font-size:18px; line-height:1.65; letter-spacing:-0.005em; text-wrap:pretty }
.bubble::after{ content:""; position:absolute; left:48px; bottom:-16px; width:24px; height:24px; background:#fff; border-right:2px solid #000; border-bottom:2px solid #000; transform:rotate(45deg); box-sizing:border-box }
.bubble .who{ display:block; margin-top:18px; padding-top:14px; border-top:1px dashed #000; font-family:var(--mono); font-size:11px; letter-spacing:.12em; opacity:.55; font-weight:400 }
.bubble.b-1{ transform:rotate(-1.5deg); margin-top:24px }
.bubble.b-2{ transform:rotate(1deg); background:#000; color:#fff }
.bubble.b-2::after{ background:#000; border-color:#000 }
.bubble.b-2 .who{ border-top-color:rgba(255,255,255,0.5); opacity:.7 }
.bubble.b-3{ transform:rotate(-1deg); margin-top:48px }
.bubble.b-4{ transform:rotate(2deg); margin-top:12px }
.bubble.b-5{ transform:rotate(-2deg) }
.bubble.b-6{ transform:rotate(1.5deg); margin-top:36px; background:var(--red); color:#fff; border-color:#000 }
.bubble.b-6::after{ background:var(--red); border-color:#000 }
.bubble.b-6 .who{ border-top-color:rgba(0,0,0,0.4); color:#fff; opacity:.85 }
.pain-conclude{ margin-top:120px; display:flex; justify-content:center }
.pain-conclude p{ font-family:var(--jp); font-weight:900; font-size:clamp(36px,5vw,80px); line-height:1.1; letter-spacing:-0.04em; text-align:center; margin:0; text-wrap:balance }
.pain-conclude p em{ font-style:normal; background:#000; color:#fff; padding:0 .1em; display:inline-block }
.pain-conclude p .red{ color:var(--red) }
/* ============ 03 FEATURES（できること・黒・主役） ============ */
.features{ background:#000; color:#fff; padding:140px 56px; border-top:2px solid #000; position:relative; overflow:hidden }
.features-bg{ position:absolute; right:-3%; top:6%; font-family:var(--en); font-weight:900; font-size:clamp(180px,22vw,380px); color:rgba(248,39,79,0.12); line-height:.85; letter-spacing:-0.04em; pointer-events:none; user-select:none; white-space:nowrap }
.features-head{ margin-bottom:64px; display:flex; justify-content:space-between; align-items:flex-end; gap:48px; flex-wrap:wrap; position:relative }
.features .eyebrow{ color:var(--red); opacity:1 }
.features-head h2{ font-family:var(--jp); font-weight:900; font-size:clamp(44px,5.4vw,92px); line-height:1.0; letter-spacing:-0.03em; margin:12px 0 0; text-wrap:balance; max-width:22ch }
.features-head h2 .en{ font-family:var(--en); font-weight:900; font-size:.7em; margin-right:.4em; color:var(--red); opacity:1 }
.features-head h2 em{ font-style:normal; color:var(--red) }
.features-head .count{ font-family:var(--en); font-weight:900; font-size:14px; letter-spacing:.18em; opacity:.7 }
.features-head .count strong{ font-family:var(--en); font-weight:900; font-size:64px; color:var(--red); display:inline-block; line-height:1; letter-spacing:-0.02em; vertical-align:middle; margin-right:8px }
.features-grid{ display:grid; grid-template-columns:repeat(6,1fr); grid-auto-rows:minmax(140px,auto); gap:0; border-top:2px solid #fff; border-left:2px solid #fff }
.feat{ padding:32px 28px; border-right:2px solid #fff; border-bottom:2px solid #fff; display:flex; flex-direction:column; gap:12px; transition:background .15s,color .15s; position:relative; background:#000 }
.feat:hover{ background:var(--red); color:#fff }
.feat:hover .feat-no{ color:#000 }
.feat-no{ font-family:var(--en); font-weight:900; font-size:12px; letter-spacing:.2em; color:var(--red); transition:color .15s }
.feat-title{ font-family:var(--jp); font-weight:900; font-size:20px; line-height:1.3; letter-spacing:-0.02em; margin:auto 0 0; text-wrap:balance }
.feat-desc{ font-size:12.5px; line-height:1.7; opacity:.7 }
.feat.size-xl{ grid-column:span 3; grid-row:span 2; background:var(--red); color:#fff }
.feat.size-xl .feat-no{ color:#000 }
.feat.size-xl .feat-title{ font-size:clamp(28px,3vw,44px); line-height:1.1; margin-top:24px }
.feat.size-xl .feat-desc{ font-size:14px; opacity:.92; max-width:34ch }
.feat.size-xl:hover{ background:#fff; color:#000 }
.feat.size-xl:hover .feat-no{ color:var(--red) }
.feat.size-lg{ grid-column:span 3; grid-row:span 1 }
.feat.size-md{ grid-column:span 2; grid-row:span 1 }
.feat.size-sm{ grid-column:span 2; grid-row:span 1 }
.feat.size-1{ grid-column:span 1 }
.feat.size-2{ grid-column:span 2 }
.features-note{ margin-top:48px; display:flex; align-items:center; gap:24px; flex-wrap:wrap; padding:24px 28px; border:2px solid #fff; background:rgba(255,255,255,0.04) }
.features-note .label{ font-family:var(--en); font-weight:900; font-size:14px; letter-spacing:.18em; color:var(--red) }
.features-note p{ margin:0; font-size:15px; line-height:1.7; opacity:.9; font-weight:500; max-width:60ch }
.features-note p strong{ color:#fff }
/* ============ 04 EASY / CUSTOM（白） ============ */
.easy{ background:#fff; color:#000; padding:140px 56px }
.easy-head{ margin-bottom:72px }
.easy-head h2{ font-family:var(--jp); font-weight:900; font-size:clamp(44px,5.4vw,92px); line-height:1.0; letter-spacing:-0.03em; margin:12px 0 0; text-wrap:balance; max-width:18ch }
.easy-head h2 .en{ font-family:var(--en); font-weight:900; font-size:.7em; margin-right:.4em; opacity:.5 }
.easy-cards{ display:grid; grid-template-columns:1.05fr .95fr; gap:0; border:2px solid #000 }
.easy-card{ padding:56px 48px; display:flex; flex-direction:column; gap:18px; border-right:2px solid #000; background:#fff; position:relative; overflow:hidden }
.easy-card:last-child{ border-right:none }
.easy-card.is-dark{ background:#000; color:#fff }
.easy-card .e-no{ font-family:var(--en); font-weight:900; font-size:14px; letter-spacing:.18em; color:var(--red) }
.easy-card h3{ font-family:var(--jp); font-weight:900; font-size:clamp(30px,3.2vw,48px); line-height:1.1; letter-spacing:-0.03em; margin:8px 0 0; text-wrap:balance }
.easy-card h3 em{ font-style:normal; color:var(--red) }
.easy-card p{ font-size:15.5px; line-height:1.9; opacity:.88; max-width:42ch; margin:0; font-weight:500 }
.easy-card .e-icon{ position:absolute; right:24px; top:24px; font-family:var(--en); font-weight:900; font-size:96px; line-height:.85; color:rgba(0,0,0,0.06); letter-spacing:-0.04em }
.easy-card.is-dark .e-icon{ color:rgba(255,255,255,0.08) }
.easy-card .e-points{ margin:8px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px }
.easy-card .e-points li{ padding-left:22px; position:relative; font-size:14.5px; line-height:1.7; opacity:.9 }
.easy-card .e-points li::before{ content:""; position:absolute; left:0; top:9px; width:10px; height:2px; background:var(--red) }
/* ============ 05 PRICING（料金・赤・このページの決め手） ============ */
.pricing{ background:var(--red); color:#fff; padding:160px 56px; border-top:2px solid #000; position:relative; overflow:hidden }
.pricing-bg{ position:absolute; left:-2%; bottom:-12%; font-family:var(--en); font-weight:900; font-size:clamp(280px,38vw,640px); color:rgba(0,0,0,0.12); line-height:.82; letter-spacing:-0.04em; pointer-events:none; user-select:none; white-space:nowrap }
.pricing-inner{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); position:relative; display:grid; grid-template-columns:1fr 1.1fr; gap:64px; align-items:center }
.pricing-left .eyebrow{ color:#fff; 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; text-wrap:balance; text-shadow:5px 5px 0 #000 }
.pricing-left p{ font-size:17px; line-height:1.9; max-width:38ch; margin:0; font-weight:500 }
.price-card{ background:#fff; color:#000; border:2px solid #000; box-shadow:14px 14px 0 #000; padding:48px 48px 40px; position:relative }
.price-card .p-row{ display:flex; justify-content:space-between; align-items:flex-start; gap:18px; margin-bottom:18px }
.price-card .p-name{ font-family:var(--en); font-weight:900; font-size:14px; letter-spacing:.2em; color:var(--red) }
.price-card .p-badge{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; color:#000; border:1.5px solid #000; padding:5px 10px; text-transform:uppercase }
.price-card .p-amount{ display:flex; align-items:flex-end; gap:12px; margin:4px 0 24px }
.price-card .p-amount .yen{ font-family:var(--en); font-weight:800; font-size:48px; color:#000; line-height:1 }
.price-card .p-amount .num{ font-family:var(--en); font-weight:900; font-size:clamp(120px,14vw,200px); line-height:.85; letter-spacing:-0.05em; color:#000; display:flex; align-items:baseline }
.price-card .p-amount .num .comma{ color:var(--red) }
.price-card .p-amount .unit{ font-family:var(--jp); font-weight:900; font-size:24px; color:#000; line-height:1.2; margin-bottom:14px; display:flex; flex-direction:column; gap:2px }
.price-card .p-amount .unit small{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; opacity:.55; font-weight:400 }
.price-card .p-divide{ border-top:2px solid #000; padding-top:24px; display:grid; grid-template-columns:repeat(3,1fr); gap:0 }
.price-card .p-fact{ padding:0 16px; border-right:1.5px solid #000; display:flex; flex-direction:column; gap:6px }
.price-card .p-fact:first-child{ padding-left:0 }
.price-card .p-fact:last-child{ border-right:none }
.price-card .p-fact .fact-label{ font-family:var(--mono); font-size:10px; letter-spacing:.18em; opacity:.55; text-transform:uppercase }
.price-card .p-fact .fact-value{ font-family:var(--jp); font-weight:900; font-size:18px; letter-spacing:-0.01em; line-height:1.25; text-wrap:balance }
.price-card .p-fact .fact-value strong{ color:var(--red); font-family:var(--en); font-weight:900; font-size:32px; letter-spacing:-0.02em; line-height:.85 }
/* ============ 06 SIGN UP（申込みの流れ・生成り） ============ */
.signup{ background:var(--cream); color:#000; padding:140px 56px }
.signup-head{ margin-bottom:64px; display:flex; justify-content:space-between; align-items:flex-end; gap:48px; flex-wrap:wrap }
.signup-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 }
.signup-head h2 .en{ font-family:var(--en); font-weight:900; font-size:.7em; margin-right:.4em; opacity:.5 }
.signup-head .badge{ font-family:var(--mono); font-weight:700; font-size:12px; letter-spacing:.15em; color:#000; display:inline-flex; align-items:center; gap:18px; text-transform:uppercase }
.signup-head .badge::before{ content:""; width:48px; height:2px; background:#000; display:inline-block }
.signup-head .badge .b-label{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; line-height:1.2 }
.signup-head .badge .b-fact{ font-family:var(--mono); font-size:11px; letter-spacing:.22em; opacity:.55 }
.signup-head .badge strong{ font-family:var(--jp); font-weight:900; font-size:clamp(28px,3.2vw,44px); letter-spacing:-0.02em; line-height:1; color:#000; display:inline-flex; align-items:baseline; gap:6px; text-transform:none }
.signup-head .badge strong .num{ font-family:var(--en); font-weight:900; color:var(--red); font-size:1.4em; letter-spacing:-0.04em; line-height:.85 }
.signup-flow{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:2px solid #000; background:#fff }
.signup-step{ padding:40px 36px; display:flex; flex-direction:column; gap:14px; border-right:2px solid #000; position:relative; transition:background .15s,color .15s }
.signup-step:last-child{ border-right:none }
.signup-step:hover{ background:#000; color:#fff }
.signup-step:hover .no{ color:var(--red) }
.signup-step .no{ font-family:var(--en); font-weight:900; font-size:72px; letter-spacing:-0.03em; line-height:.85; color:var(--red); transition:color .15s }
.signup-step h3{ font-family:var(--jp); font-weight:900; font-size:24px; margin:8px 0 0; letter-spacing:-0.02em }
.signup-step p{ font-size:14px; line-height:1.85; opacity:.85; margin:0 }
.signup-step::after{ content:"→"; position:absolute; right:-16px; top:50%; transform:translateY(-50%); font-family:var(--en); font-weight:900; font-size:32px; background:#fff; color:var(--red); padding:0 4px; z-index:2; transition:background .15s }
.signup-step:last-child::after{ display:none }
.signup-step:hover::after{ background:#000 }
/* ============ 07 FAQ抜粋（白） ============ */
.faq{ background:#fff; 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) }
/* =========================================================================
レスポンシブ
========================================================================= */
@media (max-width:1200px){
.hero-prompt{ display:none } /* プロンプト装飾は中幅以下で隠す */
}
@media (max-width:960px){
/* HERO */
.hero{ min-height:auto; padding:48px 18px 56px; gap:24px }
/* SP：見出し・本文は balance/pretty 解除で幅いっぱい折り返し */
.pain-head h2, .bubble, .pain-conclude p, .features-head h2, .feat-title, .easy-head h2, .easy-card h3, .pricing-left h2, .price-card .p-fact .fact-value, .faq-q{ text-wrap:wrap }
.hero-watermark span{ font-size:42vw }
/* SP：hero-innerを解除し、hero直下のflex縦並びへ全要素を昇格。プロンプトをマスコットと説明文の間に差し込む */
/* SP順序：アイブロウ→タイトル→マスコット→プロンプト→説明→メタ。透かしの上に出すため各要素 z-index:2 */
.hero-inner{ display:contents }
.hero-text{ display:contents }
.hero-text .eyebrow{ order:1; position:relative; z-index:2 }
.hero-text h1{ order:2; font-size:21vw; line-height:.9; margin:18px 0 22px; text-wrap:wrap; position:relative; z-index:2 }
.hero-mascot{ order:3; min-height:auto; justify-content:center; margin:8px 0 }
.hero-prompt{ order:4; display:block; position:relative; right:auto; top:auto; transform:none; width:auto; font-size:12.5px; z-index:2; margin:0 }
/* SP：sub下の余白を縮小（gap24pxで足りるため基本の36pxを解除＝design-source相当） */
.hero-text .sub{ order:5; max-width:none; line-height:1.65; position:relative; z-index:2; margin-bottom:0 }
.hero-meta{ order:6; flex-direction:column; gap:10px; position:relative; z-index:2 }
.hero-mascot img{ height:min(380px,86vw) }
/* PAIN */
.pain{ padding:64px 18px }
.pain-head{ margin-bottom:36px; gap:16px }
.pain-head h2{ font-size:36px; max-width:none }
.pain-head p{ font-size:15px; max-width:none }
/* SP：PC用の
を無効化し、タイトル・文章・吹き出しを画面幅で普通に折り返す */
.pain-head h2 br, .pain-head p br, .bubble br{ display:none }
.pain-list{ grid-template-columns:1fr; gap:48px }
.bubble{ font-size:17px; transform:none !important; margin:0 !important }
.pain-conclude{ margin-top:64px }
.pain-conclude p{ font-size:38px }
/* FEATURES */
.features{ padding:64px 18px }
/* SP：features-headをブロックにして count(18 TOOLS) をタイトル下の独立行へ */
.features-head{ margin-bottom:36px; display:block }
.features-bg{ font-size:40vw; top:2% }
.features-head h2{ font-size:40px; max-width:none }
.features-head .count{ font-size:13px; margin-top:14px }
/* SP：PC用の
を無効化し「18 TOOLS FOR FUZOKU」を1行に */
.features-head .count br{ display:none }
.features-head .count strong{ font-size:56px }
.feat-title{ font-size:21px }
/* SP：PC用の
を無効化し、カード内タイトルを画面幅で自然に折り返す */
.feat-title br{ display:none }
.feat-desc{ font-size:13px }
.feat.size-xl .feat-title{ font-size:30px }
.feat.size-xl .feat-desc{ font-size:13px; max-width:none }
.features-note .label{ font-size:13px }
/* SP：グリッドは上・左・右で囲み、各カードは下線のみ（縦1列の枠線を復元） */
.features-grid{ grid-template-columns:1fr; border-left:2px solid #fff; border-right:2px solid #fff }
.feat,
.feat.size-xl,.feat.size-lg,.feat.size-md,.feat.size-sm,.feat.size-1,.feat.size-2{ grid-column:span 1; grid-row:span 1; border-right:none }
.feat.size-xl .feat-title{ margin-top:8px }
.features-note{ margin-top:32px }
/* EASY */
.easy{ padding:64px 18px }
.easy-head{ margin-bottom:36px }
.easy-head h2{ font-size:40px; max-width:none }
/* SP：PC用の
を無効化し、見出しを画面幅で普通に折り返す */
.easy-head h2 br{ display:none }
.easy-cards{ grid-template-columns:1fr }
.easy-card{ border-right:none; border-bottom:2px solid #000; padding:40px 24px }
.easy-card:last-child{ border-bottom:none }
.easy-card .e-no{ font-size:13px }
.easy-card h3{ font-size:30px }
.easy-card p{ font-size:15px; max-width:none }
.easy-card .e-icon{ font-size:72px }
/* PRICING */
.pricing{ padding:80px 18px }
/* SP：透かし¥55,000を画面幅に収まるサイズ・中央下へ（PC基本のmin280pxを解除） */
.pricing-bg{ font-size:38vw; left:50%; right:auto; transform:translateX(-50%); bottom:-4% }
.pricing-inner{ grid-template-columns:1fr; gap:32px }
.pricing-left h2{ font-size:52px }
/* SP：PC基本のmax-width:38chを解除し、文章を画面幅で自然に折り返す */
.pricing-left p{ font-size:16px; max-width:none }
.price-card{ padding:36px 28px }
.price-card .p-name{ font-size:13px }
.price-card .p-badge{ font-size:10px }
.price-card .p-amount .yen{ font-size:40px }
.price-card .p-amount .num{ font-size:90px }
.price-card .p-amount .unit{ font-size:18px }
.price-card .p-amount .unit small{ font-size:10px }
.price-card .p-divide{ grid-template-columns:1fr; gap:18px }
/* SP：各factをラベル左・値右の1行に（PC基本のflex-direction:columnを解除） */
.price-card .p-fact{ flex-direction:row; justify-content:space-between; align-items:baseline; gap:14px; border-right:none; padding:0 0 14px; border-bottom:1.5px dashed rgba(0,0,0,0.3) }
.price-card .p-fact:last-child{ border-bottom:none; padding-bottom:0 }
/* SP：値は右寄せ・PC用の
を無効化し1行に */
.price-card .p-fact .fact-value{ text-align:right }
.price-card .p-fact .fact-value br{ display:none }
/* SIGN UP */
.signup{ padding:64px 18px }
.signup-head{ margin-bottom:36px; gap:20px }
.signup-head h2{ font-size:40px }
.signup-head .badge strong{ font-size:30px }
.signup-step .no{ font-size:60px }
.signup-flow{ grid-template-columns:1fr }
.signup-step{ border-right:none; border-bottom:2px solid #000 }
.signup-step:last-child{ border-bottom:none }
/* SP：矢印を下向き(↓)にしてステップ間の中央下へ。last-childはPC基本で非表示済み */
.signup-step::after{ content:"↓"; right:auto; left:50%; top:auto; bottom:-19px; transform:translateX(-50%); font-size:30px; line-height:1; padding:2px 8px }
/* 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 }
}
/* ===== 基準線統一：バンドは横paddingを持たない（gutterは内側コンテナが担う） ===== */
.pain, .features, .easy, .pricing, .signup, .faq{ padding-left:0; padding-right:0 }