/* =========================================================
   WannaEat — Uber Eats 出店支援LP  (Bright / Green edition)
   ========================================================= */

:root{
  /* color — bright white base, fresh green, black 締め */
  --bg:        #ffffff;
  --bg-soft:   #eef9f1;   /* light green tint */
  --bg-cream:  #faf6ef;   /* warm cream */
  --ink:       #16181c;   /* near-black 締め */
  --ink-soft:  #3f444b;
  --muted:     #767c84;
  --line:      #e7ebe7;
  --line-soft: #f1f4f0;

  /* accent — fresh green (default). Overridable via [data-accent] */
  --accent:      #0a8f4f;   /* text / icon green (readable on white) */
  --accent-deep: #07713e;
  --accent-soft: #e6f6ec;
  --accent-ink:  #ffffff;
  --cta:         #06c167;   /* vivid CTA green */
  --cta-deep:    #05a356;
  --cta-ink:     #06351f;

  /* type */
  --font-head: "Zen Kaku Gothic New", system-ui, sans-serif;
  --font-body: "Zen Kaku Gothic New", system-ui, sans-serif;
  --font-num:  "Zen Kaku Gothic New", sans-serif;
  --head-weight: 700;
  --head-tracking: .005em;

  --maxw: 1200px;
  --maxw-text: 760px;
  --gutter: 32px;
  --sec-pad: clamp(64px, 9.5vw, 116px);
  --radius: 14px;
  --radius-lg: 24px;
  --shadow-sm: 0 2px 10px rgba(20,30,24,.05);
  --shadow:    0 18px 50px -22px rgba(16,40,26,.30);
  --shadow-lg: 0 40px 90px -30px rgba(16,40,26,.42);
}

/* ---- accent variants ---- */
[data-accent="green"]{ --accent:#0a8f4f; --accent-deep:#07713e; --accent-soft:#e6f6ec; --cta:#06c167; --cta-deep:#05a356; --bg-soft:#eef9f1; }
[data-accent="teal"] { --accent:#0c7b86; --accent-deep:#085f68; --accent-soft:#e3f4f5; --cta:#10b3c0; --cta-deep:#0c95a0; --bg-soft:#e9f6f7; }
[data-accent="orange"]{ --accent:#d2691e; --accent-deep:#ad551a; --accent-soft:#fdeede; --cta:#f5821f; --cta-deep:#dc6f12; --bg-soft:#fdf2e6; }
[data-accent="ink"]  { --accent:#2b3b33; --accent-deep:#1d2823; --accent-soft:#eef1ef; --cta:#1f8a55; --cta-deep:#176b41; --bg-soft:#f0f3f1; }

/* ---- font variants ---- */
[data-font="gothic"]{
  --font-head:"Zen Kaku Gothic New",system-ui,sans-serif;
  --font-body:"Zen Kaku Gothic New",system-ui,sans-serif;
  --font-num:"Zen Kaku Gothic New",sans-serif; --head-weight:700; --head-tracking:.005em;
}
[data-font="mincho-gothic"]{
  --font-head:"Zen Old Mincho","Zen Kaku Gothic New",serif;
  --font-body:"Zen Kaku Gothic New",system-ui,sans-serif;
  --font-num:"Zen Old Mincho",serif; --head-weight:600; --head-tracking:.01em;
}
[data-font="rounded"]{
  --font-head:"Zen Maru Gothic","Zen Kaku Gothic New",sans-serif;
  --font-body:"Zen Kaku Gothic New",system-ui,sans-serif;
  --font-num:"Zen Maru Gothic",sans-serif; --head-weight:700; --head-tracking:.01em;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-size:16px; line-height:1.85; letter-spacing:.01em;
  font-feature-settings:"palt" 1; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }

/* ---------- layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter); box-sizing:border-box; }
@media (max-width:1199px){ :root{ --gutter:24px; } }
@media (max-width:767px){ :root{ --gutter:16px; } }
.section{ padding-block:var(--sec-pad); position:relative; }
.section--soft{ background:var(--bg-soft); }
.section--cream{ background:var(--bg-cream); }
.section--ink{ background:var(--ink); color:#f3f5f3; }

/* eyebrow */
.eyebrow{
  display:inline-flex; align-items:center; gap:.55em;
  font-size:12.5px; font-weight:700; letter-spacing:.03em;
  color:var(--accent); background:var(--accent-soft);
  padding:7px 14px 7px 12px; border-radius:999px; line-height:1; white-space:nowrap;
}
.eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--accent); opacity:.6; }
.section--ink .eyebrow{ color:#7ff0b0; background:rgba(255,255,255,.08); }

.section-head{ max-width:var(--maxw-text); margin:0 0 clamp(36px,5.5vw,58px); }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head .eyebrow{ margin-bottom:20px; }
.sec-title{
  font-family:var(--font-head); font-weight:var(--head-weight); letter-spacing:var(--head-tracking);
  line-height:1.36; font-size:clamp(26px,4.4vw,40px); margin:0; text-wrap:balance; word-break:keep-all; line-break:strict;
}
.sec-title .hl{ color:var(--accent); }
.sec-lead{ margin:20px 0 0; max-width:62ch; color:var(--ink-soft); font-size:clamp(15px,2.1vw,17px); line-height:1.95; text-wrap:pretty; word-break:keep-all; line-break:strict; }
.section--ink .sec-lead{ color:#c6cdc8; }
/* wider heads so leads don't wrap awkwardly */
#support>.wrap>.section-head, #compare>.wrap>.section-head{ max-width:min(920px,100%); }
#support>.wrap>.section-head .sec-lead, #compare>.wrap>.section-head .sec-lead{ max-width:min(920px,100%); }

/* ---------- buttons ---------- */
.btn{
  --pad-y:16px; --pad-x:30px;
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  font-family:var(--font-body); font-weight:700; font-size:15px; letter-spacing:.02em;
  padding:var(--pad-y) var(--pad-x); border-radius:999px; border:1.5px solid transparent;
  cursor:pointer; transition:transform .22s ease, background .22s ease, box-shadow .22s ease, color .22s; line-height:1; white-space:nowrap;
}
/* CTA buttons — the most prominent clickable elements on the page */
.btn-primary{ background:var(--cta); color:var(--cta-ink); box-shadow:0 14px 28px -12px var(--cta); font-size:16px; }
.btn-primary:hover{ background:var(--cta-deep); transform:translateY(-2px); box-shadow:0 20px 38px -12px var(--cta); }
.btn-primary .arr{ transition:transform .22s; }
.btn-primary:hover .arr{ transform:translateX(3px); }
.btn-ghost{ background:#fff; color:var(--ink); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent); }
.section--ink .btn-ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.3); }
.section--ink .btn-ghost:hover{ border-color:#fff; }
.btn-lg{ --pad-y:19px; --pad-x:40px; font-size:16px; }
.btn-block{ width:100%; }
.cta-note{ font-size:13px; color:var(--muted); }
.section--ink .cta-note{ color:#9aa39c; }

/* shared icon */
.ico{ width:24px; height:24px; stroke:currentColor; stroke-width:1.7; fill:none; stroke-linecap:round; stroke-linejoin:round; display:block; }
.ico-badge{ width:56px; height:56px; border-radius:16px; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent); flex:0 0 auto; }
.ico-badge .ico{ width:28px; height:28px; }

/* ============================================================
   HEADER
   ============================================================ */
.site-header{ position:sticky; top:0; z-index:60; background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:saturate(140%) blur(12px); border-bottom:1px solid transparent; transition:border-color .3s,background .3s; }
.site-header.is-scrolled{ border-bottom-color:var(--line); }
.header-inner{ display:flex; align-items:center; justify-content:space-between; min-height:74px; padding-block:12px; gap:20px; }
.brand{ display:flex; flex-direction:column; align-items:flex-start; gap:5px; }
.brand-logo{ width:34px; height:34px; border-radius:10px; background:var(--cta); display:grid; place-items:center; color:#fff; flex:0 0 auto; }
.brand-logo .ico{ width:20px; height:20px; stroke-width:2; }
.brand-name{ display:flex; flex-direction:column; line-height:1.15; }
.brand-name b{ font-family:var(--font-head); font-weight:700; font-size:18px; letter-spacing:.01em; }
.brand-name span{ font-size:10.5px; letter-spacing:.12em; color:var(--muted); }
.brand-logo-img{ height:52px; width:auto; display:block; flex:0 0 auto; }
.brand-sub{ font-size:11px; letter-spacing:.04em; color:var(--muted); line-height:1.3; white-space:nowrap; }
.site-footer .brand-logo-img{ height:38px; }
.nav{ display:flex; align-items:center; gap:28px; }
.nav a{ font-size:13.5px; color:var(--ink-soft); font-weight:500; transition:color .2s; }
.nav a:hover{ color:var(--accent); }
.header-cta .btn{ --pad-y:11px; --pad-x:22px; font-size:13.5px; }
@media (max-width:991px){ .nav{ display:none; } .brand-name span{ display:none; } .brand-sub{ display:none; } }
@media (max-width:767px){
  .header-inner{ gap:10px; min-height:60px; }
  .brand{ flex-shrink:0; min-width:0; }
  .brand-logo-img{ height:44px; max-width:220px; width:auto; object-fit:contain; flex-shrink:0; }
  .header-cta .btn{ font-size:11.5px; --pad-y:9px; --pad-x:13px; white-space:nowrap; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero{ display:block; }
.hero-kicker{ margin-bottom:22px; }
.hero-title{ font-family:var(--font-head); font-weight:var(--head-weight); letter-spacing:var(--head-tracking);
  line-height:1.26; font-size:clamp(32px,5.6vw,56px); margin:0; text-wrap:balance; }
.hero-title .hl{ color:var(--accent); }
.hero-sub{ margin:24px 0 0; max-width:44ch; font-size:clamp(15px,2.2vw,18px); line-height:1.9; color:var(--ink-soft); }
.hero-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 16px; margin-top:34px; }

/* mini trust chips — flat info tags, NOT button-like */
.chip-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:30px; }
.chip{ display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:var(--ink-soft);
  background:transparent; border:none; padding:5px 0; border-radius:0; }
.chip + .chip{ padding-left:18px; border-left:1px solid var(--line); }
.chip .ico{ width:16px; height:16px; color:var(--accent); opacity:.7; }

/* ---- Variant A : bright split with phone mockup ---- */
#hero-a{ padding:0; }
/* ==== KV full-bleed background (PC ≥1200px) ==== */
.uber-kv{ position:relative; overflow:hidden; background:#fff; }
.uber-kv__bg{ position:absolute; inset:0; z-index:0; display:block; }
.uber-kv__bg img{ width:100%; height:100%; object-fit:cover; object-position:12% center; display:block; }
.uber-kv::after{ content:""; position:absolute; z-index:1; inset:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.97) 30%, rgba(255,255,255,.72) 44%, rgba(255,255,255,0) 56%); }
.uber-kv__inner{ position:relative; z-index:2; min-height:clamp(600px,72vh,700px); display:flex; align-items:center; }
.uber-kv__content{ width:min(58%,660px); padding-block:clamp(24px,3.4vw,40px); }
.uber-kv .hero-kicker{ margin-bottom:14px; }
.uber-kv .hero-title{ font-size:clamp(30px,3.4vw,44px); line-height:1.24; }
.uber-kv .hero-sub{ margin-top:14px; max-width:42ch; font-size:clamp(14.5px,1.15vw,16.5px); line-height:1.72; }
.uber-kv .hero-sub b{ color:var(--ink); font-weight:700; }
/* ===== KV — PC (≥1200px) only; ≤1199 uses .hero-responsive ===== */
@media (max-width:1199px){
  #hero-a{ display:none !important; }
}
@media (min-width:1200px) and (max-height:800px){
  .uber-kv__inner{ min-height:600px; }
  .uber-kv .hero-title{ font-size:clamp(34px,3vw,42px); }
  .uber-kv .hero-sub{ margin-top:12px; }
  .kv-free{ margin-top:14px; }
  .kv-free-card{ padding:12px 10px 12px; }
  .kv-camp2{ margin-top:12px; }
  .kv-cta-row{ margin-top:12px; }
}

/* ---- Variant B : copy + big food photo ---- */
#hero-b{ padding-block:clamp(40px,6vw,76px); background:linear-gradient(180deg,#fff,var(--bg-soft)); }
.hero-b-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(30px,5vw,64px); align-items:center; }
.hero-b-media{ position:relative; }
.hero-b-media .photo-main{ width:100%; aspect-ratio:4/5; }
.hero-b-media .float-card{ position:absolute; left:-18px; bottom:26px; }
@media (max-width:860px){ .hero-b-grid{ grid-template-columns:1fr; } .hero-b-media{ order:-1; } .hero-b-media .photo-main{ aspect-ratio:16/11; } .hero-b-media .float-card{ left:12px; } }

/* ---- Variant C : wide hero photo with overlay card ---- */
#hero-c{ padding-block:clamp(36px,5vw,64px); }
.hero-c-top{ max-width:900px; margin-bottom:clamp(28px,4vw,44px); }
.hero-c-stage{ position:relative; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow); }
.hero-c-stage image-slot{ width:100%; aspect-ratio:16/8; }
.hero-c-stage::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(10,20,14,.62) 0%, rgba(10,20,14,.15) 55%, transparent 100%); }
.hero-c-overlay{ position:absolute; inset:0; z-index:2; display:flex; align-items:center; padding:clamp(24px,5vw,56px); }
.hero-c-overlay .inner{ max-width:520px; color:#fff; }
.hero-c-overlay .hero-title{ color:#fff; }
.hero-c-overlay .hero-title .hl{ color:#7ff0b0; }
.hero-c-overlay .hero-sub{ color:rgba(255,255,255,.9); }
@media (max-width:760px){ .hero-c-stage image-slot{ aspect-ratio:3/4; } .hero-c-stage::after{ background:linear-gradient(180deg, rgba(10,20,14,.25) 0%, rgba(10,20,14,.78) 100%); } .hero-c-overlay{ align-items:flex-end; } }

/* ============================================================
   PHONE MOCKUP  (generic delivery listing)
   ============================================================ */
.phone{ position:relative; width:min(310px,80%); margin-inline:auto; aspect-ratio:295/600; background:#0e1013; border-radius:42px;
  padding:11px; box-shadow:var(--shadow-lg); }
.hero-a-visual .phone{ margin:0; position:relative; z-index:2; }
.phone-screen{ position:relative; width:100%; height:100%; background:#fff; border-radius:32px; overflow:hidden; display:flex; flex-direction:column; }
.phone-notch{ position:absolute; top:0; left:50%; transform:translateX(-50%); width:42%; height:22px; background:#0e1013; border-radius:0 0 14px 14px; z-index:5; }
.ph-hero{ position:relative; height:40%; flex:0 0 40%; }
.ph-hero image-slot{ width:100%; height:100%; border-radius:0; }
.ph-back{ position:absolute; top:14px; left:12px; width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,.9); display:grid; place-items:center; z-index:3; box-shadow:0 2px 6px rgba(0,0,0,.15); }
.ph-back .ico{ width:16px; height:16px; color:#16181c; }
.ph-body{ padding:14px 15px 0; flex:1 1 auto; display:flex; flex-direction:column; min-height:0; }
.ph-store{ font-family:var(--font-head); font-weight:700; font-size:16px; color:#16181c; }
.ph-meta{ display:flex; align-items:center; gap:5px; margin-top:5px; font-size:10px; color:#767c84; white-space:nowrap; flex-wrap:nowrap; }
.ph-meta .star{ color:#0a8f4f; font-weight:700; }
.ph-meta .pill{ background:var(--accent-soft); color:var(--accent); padding:2px 7px; border-radius:6px; font-weight:700; }
.ph-list{ margin-top:12px; display:flex; flex-direction:column; gap:10px; overflow:hidden; }
.ph-item{ display:flex; gap:10px; align-items:center; }
.ph-item image-slot{ width:46px; height:46px; border-radius:10px; flex:0 0 auto; }
.ph-thumb{ width:46px; height:46px; border-radius:10px; flex:0 0 auto; background:linear-gradient(135deg,#eef4ef,#dfeae2); display:grid; place-items:center; color:#9bb3a4; }
.ph-thumb .ico{ width:22px; height:22px; stroke-width:1.6; }
.ph-item .t{ flex:1 1 auto; min-width:0; }
.ph-item .t b{ display:block; font-size:12px; font-weight:700; color:#16181c; line-height:1.3; }
.ph-item .t small{ font-size:10.5px; color:#767c84; }
.ph-item .price{ font-size:12px; font-weight:700; color:#16181c; }
.ph-cta{ margin:12px 0 14px; background:var(--cta); color:#06351f; text-align:center; font-weight:700; font-size:12.5px; padding:11px; border-radius:12px; }

/* floating notification card */
.float-card{ background:#fff; border-radius:16px; box-shadow:var(--shadow); padding:13px 16px; display:flex; align-items:center; gap:12px; border:1px solid var(--line-soft); }
.float-card .fc-ico{ width:40px; height:40px; border-radius:12px; background:var(--accent-soft); color:var(--accent); display:grid; place-items:center; flex:0 0 auto; }
.float-card .fc-ico .ico{ width:21px; height:21px; stroke-width:2; }
.float-card .fc-t b{ display:block; font-family:var(--font-head); font-weight:700; font-size:13.5px; color:#16181c; line-height:1.3; }
.float-card .fc-t small{ font-size:11.5px; color:var(--muted); }
.hero-a-visual .float-card{ position:absolute; z-index:3; }
.hero-a-visual .fc-order{ top:8%; right:-4%; }
.hero-a-visual .fc-sales{ bottom:6%; left:-8%; }
.hero-a-visual .fc-multi{ top:34%; left:-12%; }
@media (max-width:900px){ .hero-a-visual .fc-order{ right:0; } .hero-a-visual .fc-sales{ left:0; } .hero-a-visual .fc-multi{ left:0; } }
@media (max-width:480px){ .hero-a-visual .fc-order, .hero-a-visual .fc-sales, .hero-a-visual .fc-multi{ position:static; margin:14px auto 0; width:max-content; } }

/* ============================================================
   PAIN
   ============================================================ */
.pain-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.pain-item{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:clamp(22px,3vw,30px);
  display:flex; gap:16px; align-items:flex-start; box-shadow:var(--shadow-sm); transition:transform .25s,box-shadow .25s; }
.pain-item:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.pain-item .ico-badge{ width:48px; height:48px; border-radius:13px; }
.pain-item .ico-badge .ico{ width:24px; height:24px; }
.pain-text{ font-size:clamp(14.5px,2vw,16.5px); line-height:1.75; color:var(--ink); font-weight:500; padding-top:3px; }
@media (max-width:680px){ .pain-grid{ grid-template-columns:1fr; } }
.pain-head-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,48px); align-items:center; margin-bottom:clamp(36px,5.5vw,58px); }
.pain-head-grid .section-head{ margin:0; }
.pain-photo{ position:relative; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow); }
.pain-photo image-slot{ width:100%; aspect-ratio:4/3; border-radius:0; }
@media (max-width:820px){ .pain-head-grid{ grid-template-columns:1fr; } .pain-photo image-slot{ aspect-ratio:16/9; } }
.pain-photo image-slot{ width:100%!important; height:auto!important; aspect-ratio:4/3; display:block; }
.pain-photo::after{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg, rgba(16,24,20,.30) 0%, rgba(16,24,20,.05) 45%, transparent 100%); }
.pain-photo .pp-cap{ position:absolute; left:clamp(20px,4vw,40px); bottom:clamp(18px,3vw,30px); z-index:2; color:#fff; font-family:var(--font-head); font-weight:700; font-size:clamp(16px,2.6vw,24px); line-height:1.5; text-shadow:0 2px 12px rgba(0,0,0,.3); max-width:24ch; text-wrap:balance; }
@media (max-width:600px){ .pain-photo image-slot{ aspect-ratio:16/10; } }
.pain-bridge{ position:relative; margin-top:clamp(34px,4.5vw,48px); background:var(--accent-soft); border-radius:var(--radius-lg);
  padding:clamp(28px,4vw,44px); text-align:center; }
.pain-merits{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px 14px; margin-top:clamp(18px,2.5vw,24px); }
.pain-merit{ display:inline-flex; align-items:center; gap:7px; padding:8px 15px; background:#fff; border:1px solid var(--line-soft); border-radius:999px; font-family:var(--font-head); font-weight:700; font-size:13.5px; color:var(--ink); box-shadow:var(--shadow-sm); }
.pain-merit .ico{ width:16px; height:16px; color:var(--accent); stroke-width:2.4; flex:0 0 auto; }
.pain-bridge p{ font-family:var(--font-head); font-weight:var(--head-weight); font-size:clamp(18px,2.4vw,25px); line-height:1.55; margin:0; text-wrap:pretty; }
.pain-bridge .hl{ color:var(--accent); }

/* ============================================================
   BENEFITS
   ============================================================ */
.merit-lead-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,60px); align-items:center; margin-bottom:clamp(44px,6vw,72px); }
.merit-lead-media{ position:relative; }
.merit-lead-media image-slot{ width:100%; aspect-ratio:9/10; border-radius:16px; overflow:hidden; }
.aud-illust-img{ display:block; width:min(320px,70%); aspect-ratio:3/2; margin:clamp(20px,3vw,30px) auto 0; }
.merit-lead-media .float-card{ position:absolute; right:-14px; bottom:-18px; }
@media (max-width:840px){ .merit-lead-grid{ grid-template-columns:1fr; } .merit-lead-media{ order:-1; } .merit-lead-media .float-card{ right:10px; } }

.benefit-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.benefit{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:clamp(24px,3vw,32px);
  box-shadow:var(--shadow-sm); transition:transform .25s,box-shadow .25s; }
.benefit:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.benefit .ico-badge{ margin-bottom:18px; }
.benefit h3{ font-family:var(--font-head); font-weight:var(--head-weight); font-size:clamp(17px,2.2vw,20px); line-height:1.5; margin:0 0 10px; }
.benefit p{ margin:0; font-size:14px; line-height:1.85; color:var(--ink-soft); }
.benefit .bn-photo{ margin-top:18px; }
.benefit .bn-photo image-slot{ width:100%; aspect-ratio:16/10; }
@media (max-width:820px){ .benefit-grid{ grid-template-columns:1fr; } }

/* food gallery strip */
.gallery{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:clamp(40px,5vw,60px); }
.gallery image-slot{ width:100%; aspect-ratio:1/1; }
.gallery .g-tall{ aspect-ratio:1/1; }
@media (max-width:680px){ .gallery{ grid-template-columns:repeat(2,1fr); } }

/* ============================================================
   WHY (bright cream)
   ============================================================ */
.why-grid{ display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(32px,5vw,70px); align-items:start; }
.why-media{ position:relative; display:flex; position:sticky; top:100px; }
.why-media image-slot{ width:100%; aspect-ratio:5/6; border-radius:16px; overflow:hidden; }
.why-list{ list-style:none; margin:24px 0 0; padding:0; }
.why-list li{ padding:18px 0; border-bottom:1px solid var(--line); display:flex; gap:14px; align-items:flex-start; }
.why-list li:first-child{ border-top:1px solid var(--line); }
.why-list .wl-ico{ width:34px; height:34px; border-radius:10px; background:#fff; border:1px solid var(--line); display:grid; place-items:center; color:var(--accent); flex:0 0 auto; }
.why-list .wl-ico .ico{ width:18px; height:18px; }
.why-list .wl-t{ font-size:clamp(14.5px,2vw,16px); line-height:1.7; color:var(--ink); padding-top:5px; }
.why-cap{ margin-top:26px; background:var(--ink); color:#fff; border-radius:var(--radius); padding:20px 22px; display:flex; gap:14px; align-items:center; }
.why-cap .ico-badge{ background:rgba(255,255,255,.1); color:#7ff0b0; width:46px; height:46px; }
.why-cap b{ font-family:var(--font-head); font-weight:700; font-size:15.5px; line-height:1.45; }
.why-cap small{ display:block; color:#b9c1ba; font-size:12.5px; margin-top:2px; font-weight:400; }
@media (max-width:840px){ .why-grid{ grid-template-columns:1fr; } .why-media{ order:-1; position:static; } .why-media image-slot{ aspect-ratio:16/11; } }

/* ============================================================
   SUPPORT — icon cards
   ============================================================ */
.support-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.support-item{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:clamp(24px,3vw,32px);
  box-shadow:var(--shadow-sm); transition:transform .25s,box-shadow .25s; position:relative; }
.support-item:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.support-head{ display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.support-no{ font-family:var(--font-num); font-size:12px; font-weight:700; letter-spacing:.1em; color:var(--accent); margin-left:auto; }
.support-item h3{ font-family:var(--font-head); font-weight:var(--head-weight); font-size:clamp(17px,2.2vw,20px); margin:0 0 10px; }
.support-item p{ margin:0; font-size:13.5px; line-height:1.8; color:var(--ink-soft); }
.support-item.is-all{ background:var(--ink); color:#fff; display:flex; flex-direction:column; justify-content:center; gap:12px; }
.support-item.is-all .ico-badge{ background:rgba(255,255,255,.1); color:#7ff0b0; }
.support-item.is-all .sa-ttl{ font-family:var(--font-head); font-weight:700; font-size:clamp(18px,2.4vw,22px); line-height:1.45; }
.support-item.is-all p{ color:#c6cdc8; }
@media (max-width:900px){ .support-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .support-grid{ grid-template-columns:1fr; } }

/* ============================================================
   FLOW
   ============================================================ */
.flow{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.flow-step{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:clamp(22px,2.6vw,28px);
  box-shadow:var(--shadow-sm); position:relative; }
.flow-top{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.flow-no{ width:40px; height:40px; border-radius:50%; background:var(--accent-soft); color:var(--accent); display:grid; place-items:center;
  font-family:var(--font-num); font-weight:700; font-size:16px; flex:0 0 auto; }
.flow-top .ico{ width:24px; height:24px; color:var(--accent); margin-left:auto; }
.flow-step h3{ font-family:var(--font-head); font-weight:var(--head-weight); font-size:clamp(16px,2vw,18px); margin:0 0 10px; }
.flow-step p{ margin:0; font-size:13px; line-height:1.8; color:var(--ink-soft); }
.flow-step .fs-meta{ display:inline-flex; align-items:center; gap:6px; margin-top:14px; font-size:11.5px; color:var(--accent);
  font-weight:700; background:var(--accent-soft); padding:5px 11px; border-radius:999px; }
@media (max-width:880px){ .flow{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .flow{ grid-template-columns:1fr; } }

/* ============================================================
   FAQ — icon cards
   ============================================================ */
.faq{ max-width:var(--maxw-text); margin-inline:auto; display:flex; flex-direction:column; gap:12px; }
.faq-item{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); transition:box-shadow .25s; }
.faq-item.open{ box-shadow:var(--shadow); }
.faq-q{ width:100%; background:none; border:0; cursor:pointer; text-align:left; display:flex; align-items:center; gap:14px;
  padding:20px 22px; font-family:var(--font-body); font-size:clamp(14.5px,2vw,16.5px); font-weight:700; color:var(--ink); line-height:1.5; }
.faq-q .q-ico{ width:34px; height:34px; border-radius:10px; background:var(--accent-soft); color:var(--accent); display:grid; place-items:center; flex:0 0 auto; }
.faq-q .q-ico .ico{ width:18px; height:18px; }
.faq-q .q-tog{ margin-left:auto; flex:0 0 auto; width:20px; height:20px; position:relative; }
.faq-q .q-tog::before,.faq-q .q-tog::after{ content:""; position:absolute; inset:0; margin:auto; background:var(--accent); transition:transform .3s,opacity .3s; }
.faq-q .q-tog::before{ width:14px; height:2px; }
.faq-q .q-tog::after{ width:2px; height:14px; }
.faq-item.open .q-tog::after{ transform:scaleY(0); opacity:0; }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .4s ease; }
.faq-a-inner{ padding:0 22px 22px 70px; color:var(--ink-soft); font-size:14px; line-height:1.9; max-width:none; }
@media (max-width:560px){ .faq-a-inner{ padding-left:22px; } }
.faq-a-inner b{ color:var(--ink); font-weight:700; }
.faq-a-inner p{ margin:0; }
.faq-a-inner p + p{ margin-top:.9em; }
.faq-a-inner p.faq-note{ margin-top:12px; }
.faq-note{ display:block; margin-top:10px; font-size:12px; line-height:1.7; color:var(--muted); }
.faq-cta{ max-width:var(--maxw-text); margin:clamp(32px,4.5vw,48px) auto 0; text-align:center; }
.faq-cta-lead{ font-family:var(--font-head); font-weight:700; font-size:clamp(17px,2.4vw,21px); color:var(--ink); margin:0 0 clamp(18px,2.4vw,24px); text-wrap:balance; }
.faq-cta-note{ margin:16px 0 0; font-size:13px; color:var(--muted); line-height:1.8; }

/* ============================================================
   FINAL CTA (black 締め)
   ============================================================ */
.final-cta{ text-align:center; position:relative; overflow:hidden; }
.final-cta::before{ content:""; position:absolute; inset:0; background:radial-gradient(80% 120% at 50% -10%, rgba(6,193,103,.22) 0%, transparent 60%); }
.final-cta .wrap{ position:relative; z-index:1; }
.final-cta .eyebrow{ justify-content:center; }
.final-cta h2{ font-family:var(--font-head); font-weight:var(--head-weight); font-size:clamp(28px,4.8vw,46px); line-height:1.4; margin:22px 0 0; text-wrap:balance; color:#fff; }
.final-cta p{ margin:22px auto 0; max-width:48ch; color:#c6cdc8; font-size:clamp(15px,2vw,17px); line-height:1.9; }
.final-cta .hero-actions{ justify-content:center; }
.final-cta .reassure{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px 22px; margin-top:28px; font-size:13px; color:#9aa39c; }
.final-cta .reassure span{ display:inline-flex; gap:7px; align-items:center; }
.final-cta .reassure .ico{ width:16px; height:16px; color:#7ff0b0; }

/* HubSpot form embed */
.final-cta .form-card{ max-width:840px; margin:0 auto; }
.hubspot-form-wrap{ width:100%; max-width:760px; margin:32px auto 0; padding:clamp(24px,4vw,40px); background:#fff; border-radius:24px; box-shadow:0 20px 60px rgba(0,0,0,.12); text-align:left; }
.hubspot-form-wrap .hs-form-field{ margin-bottom:18px; }
.hubspot-form-wrap label{ font-weight:700; color:#0f172a; margin-bottom:8px; display:block; font-size:15px; }
.hubspot-form-wrap .hs-form-field label{ line-height:1.6; }
.hubspot-form-wrap input,
.hubspot-form-wrap select,
.hubspot-form-wrap textarea{ width:100%; min-height:48px; border:1px solid #d7dee8; border-radius:12px; padding:12px 14px; font-size:16px; background:#f8fafc; color:#0f172a; box-sizing:border-box; }
.hubspot-form-wrap input[type=checkbox],
.hubspot-form-wrap input[type=radio]{ width:auto; min-height:0; }
.hubspot-form-wrap textarea{ min-height:120px; }
.hubspot-form-wrap .hs-error-msgs{ list-style:none; padding:0; margin:6px 0 0; }
.hubspot-form-wrap .hs-error-msg,
.hubspot-form-wrap .hs-error-msgs label{ color:#dc2626; font-size:13px; font-weight:600; }
.hubspot-form-wrap .hs-button{ display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 28px; border-radius:999px; border:none; background:#06c167; color:#fff; font-weight:700; font-size:16px; cursor:pointer; margin-top:6px; }
.hubspot-form-wrap .hs-button:hover{ opacity:.9; }
.final-cta .form-note{ margin:20px auto 0; font-size:14px; color:#9aa39c; max-width:60ch; }
.final-cta h2 .hl{ color:#7ff0b0; background:none; }
/* Form-submit 3-step flow */
.flow-after{ max-width:760px; margin:clamp(26px,3.4vw,36px) auto 0; }
.flow-after-title{ margin:0 0 16px; font-family:var(--font-head); font-weight:800; font-size:clamp(14px,1.7vw,16px); color:#fff; text-align:center; letter-spacing:.02em; }
.flow-after-steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
.fa-step{ position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:7px; padding:clamp(16px,2vw,20px) clamp(12px,1.4vw,16px); background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:16px; }
.fa-step:not(:last-child)::after{ content:"›"; position:absolute; right:-11px; top:50%; transform:translateY(-50%); font-size:22px; line-height:1; color:#7ff0b0; z-index:2; }
.fa-num{ font-family:"Inter",var(--font-head),sans-serif; font-weight:800; font-size:11px; letter-spacing:.08em; color:#7ff0b0; }
.fa-ico{ display:grid; place-items:center; width:44px; height:44px; border-radius:12px; background:rgba(127,240,176,.14); }
.fa-ico svg{ width:24px; height:24px; fill:none; stroke:#7ff0b0; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.fa-h{ font-family:var(--font-head); font-weight:800; font-size:clamp(14px,1.6vw,15.5px); color:#fff; line-height:1.4; }
.fa-d{ font-size:clamp(12px,1.35vw,13px); line-height:1.65; color:#b9c2bc; }
@media (max-width:1199px){
  .flow-after-steps{ grid-template-columns:1fr; gap:18px; }
  .flow-after{ margin-bottom:28px; }
  .fa-step{ position:static; display:grid; grid-template-columns:44px 1fr; grid-template-rows:auto auto auto; align-items:center; text-align:left; column-gap:14px; row-gap:2px; padding:14px 16px; }
  .fa-ico{ grid-column:1; grid-row:1 / span 3; }
  .fa-num{ grid-column:2; grid-row:1; }
  .fa-h{ grid-column:2; grid-row:2; min-width:0; }
  .fa-d{ grid-column:2; grid-row:3; min-width:0; }
  .fa-step:not(:last-child)::after{ content:"⌄"; right:auto; left:50%; top:auto; bottom:-16px; transform:translateX(-50%); }
}
@media (max-width:640px){
  .hubspot-form-wrap{ margin-left:16px; margin-right:16px; padding:22px 18px; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{ background:#fff; border-top:1px solid var(--line); padding-block:44px; }
.footer-inner{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:20px; }
.footer-links{ display:flex; flex-wrap:wrap; gap:22px; font-size:13px; color:var(--ink-soft); }
.footer-links a:hover{ color:var(--accent); }
.footer-meta{ font-size:12.5px; color:var(--muted); }

/* ============================================================
   STICKY MOBILE CTA
   ============================================================ */
.sticky-cta{ position:fixed; left:0; right:0; bottom:0; z-index:55; background:color-mix(in srgb,var(--bg) 94%,transparent);
  backdrop-filter:blur(12px) saturate(140%); border-top:1px solid var(--line);
  padding:11px var(--gutter) calc(11px + env(safe-area-inset-bottom)); display:flex; align-items:center; gap:14px;
  transform:translateY(120%); transition:transform .4s cubic-bezier(.16,1,.3,1); }
.sticky-cta.show{ transform:translateY(0); }
.sticky-cta .sc-copy{ flex:1 1 auto; min-width:0; }
.sticky-cta .sc-copy b{ display:block; font-family:var(--font-head); font-weight:700; font-size:14px; }
.sticky-cta .sc-copy small{ color:var(--muted); font-size:11.5px; }
.sticky-cta .btn{ --pad-y:14px; --pad-x:24px; flex:0 0 auto; }
@media (max-width:560px){ .sticky-cta .sc-copy small{ display:none; } .sticky-cta .btn{ --pad-x:22px; } }
@media (max-width:767px){
  .final-cta .form-card{ width:100%; max-width:100%; margin-inline:auto; box-sizing:border-box; }
  .hubspot-form-wrap{ width:100%; max-width:100%; margin-inline:auto; box-sizing:border-box; }
}

/* reveal */
@media (prefers-reduced-motion:no-preference){
  .reveal{ opacity:0; transform:translateY(22px); transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
  .reveal.in{ opacity:1; transform:none; }
  .reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; } .reveal.d3{ transition-delay:.24s; }
}

/* ============================================================
   AUDIENCE  (こんな店舗様におすすめ)
   ============================================================ */
.aud-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.aud-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px 22px;
  display:flex; flex-direction:column; gap:14px; box-shadow:var(--shadow-sm); transition:transform .25s,box-shadow .25s,border-color .25s; }
.aud-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--accent-soft); }
.aud-check{ width:42px; height:42px; border-radius:50%; background:var(--cta); color:#fff; display:grid; place-items:center; flex:0 0 auto; }
.aud-check .ico{ width:22px; height:22px; stroke-width:2.4; }
.aud-card p{ margin:0; font-weight:700; font-size:15px; line-height:1.6; color:var(--ink); }
@media (max-width:860px){ .aud-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .aud-grid{ grid-template-columns:1fr; } .aud-card{ flex-direction:row; align-items:center; padding:18px 20px; } }

/* ============================================================
   TRUST band  (USEN & U-NEXT GROUP / 実績)
   ============================================================ */
.trust-band-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,60px); align-items:center; }
.trust-photo{ position:relative; }
.trust-band-grid:has(.trust-photo--fill){ align-items:stretch; }
.trust-photo--fill{ height:100%; }
.trust-photo--fill image-slot.trust-fill{ display:block; width:100%; height:100%; min-height:280px; border-radius:18px; overflow:hidden; }
@media (max-width:840px){ .trust-photo--fill image-slot.trust-fill{ height:auto; aspect-ratio:16/10; min-height:0; } }
.trust-photo image-slot.trust-tablet{ width:100%; aspect-ratio:4/3; border-radius:18px; overflow:hidden; }
.trust-photo image-slot.trust-phone{ position:absolute; right:-18px; bottom:-24px; width:34%; aspect-ratio:9/19; border-radius:20px; overflow:hidden; box-shadow:0 18px 40px rgba(0,0,0,.16); border:4px solid #fff; z-index:2; }
.trust-group{ display:inline-flex; align-items:center; gap:10px; padding:9px 16px; border:1px solid var(--line);
  border-radius:999px; background:#fff; font-weight:700; font-size:13.5px; color:var(--ink); box-shadow:var(--shadow-sm); white-space:nowrap; max-width:100%; flex-wrap:wrap; }
.trust-group .badge-g{ font-size:11px; color:var(--accent); background:var(--accent-soft); padding:3px 9px; border-radius:6px; letter-spacing:.04em; white-space:nowrap; }
.trust-stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin-top:24px; }
.trust-stats .st{ background:#fff; padding:22px 24px; }
.trust-stats .st .n{ font-family:var(--font-num); font-weight:700; font-size:clamp(26px,4vw,34px); color:var(--accent); line-height:1; }
.trust-stats .st .n small{ font-size:.45em; margin-left:.25em; color:var(--ink-soft); font-weight:700; }
.trust-stats .st .l{ font-size:12.5px; color:var(--muted); margin-top:8px; }
.trust-reasons{ list-style:none; margin:24px 0 0; padding:0; display:flex; flex-direction:column; gap:12px; }
.trust-reasons li{ display:flex; gap:11px; align-items:flex-start; font-size:14.5px; color:var(--ink-soft); line-height:1.7; }
.trust-reasons li b{ color:var(--ink); }
.stats-note{ margin:16px 0 0; font-size:12px; color:var(--muted); letter-spacing:.02em; }
.trust-reasons .ico{ width:20px; height:20px; color:var(--accent); flex:0 0 auto; margin-top:3px; stroke-width:2.2; }
@media (max-width:840px){ .trust-band-grid{ grid-template-columns:1fr; } .trust-photo{ order:-1; } .trust-photo image-slot.trust-tablet{ aspect-ratio:16/10; } .trust-photo image-slot.trust-phone{ right:-6px; bottom:-16px; width:30%; } }

/* ============================================================
   PROCESS  (出店までの工程 — 大変さの図解)
   ============================================================ */
.process{ margin-bottom:clamp(40px,5.5vw,64px); }
.process-track{ display:grid; grid-template-columns:repeat(6,1fr); gap:10px; }
.proc-step{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:20px 12px 16px; text-align:center; position:relative; box-shadow:var(--shadow-sm); }
.proc-step .p-ico{ width:46px; height:46px; border-radius:13px; margin:0 auto 12px; display:grid; place-items:center; background:var(--bg-soft); color:var(--accent); }
.proc-step .p-ico .ico{ width:23px; height:23px; }
.proc-step .p-n{ font-family:var(--font-num); font-size:10.5px; font-weight:700; letter-spacing:.1em; color:var(--muted); }
.proc-step h4{ font-family:var(--font-head); font-weight:700; font-size:13.5px; margin:5px 0 0; line-height:1.4; }
.proc-step:not(:last-child)::after{ content:""; position:absolute; right:-8px; top:50%; transform:translateY(-50%) rotate(45deg); width:9px; height:9px; border-top:2px solid var(--line); border-right:2px solid var(--line); z-index:3; background:transparent; }
.proc-note{ margin-top:18px; display:flex; align-items:center; justify-content:center; gap:10px; }
.proc-note .pn-pill{ display:inline-flex; align-items:center; gap:9px; background:#fff; border:1px solid var(--line); border-radius:999px; padding:11px 20px; box-shadow:var(--shadow-sm); font-weight:700; font-size:14px; color:var(--ink); }
.proc-note .pn-pill .ico{ width:19px; height:19px; color:#d98324; }
@media (max-width:760px){ .process-track{ grid-template-columns:repeat(3,1fr); gap:10px 8px; } .proc-step:nth-child(3)::after{ display:none; }
  .proc-step h4{ font-size:12.5px; } }
@media (max-width:420px){ .process-track{ grid-template-columns:repeat(2,1fr); } .proc-step:nth-child(3)::after{ display:block; } .proc-step:nth-child(2)::after,.proc-step:nth-child(4)::after{ display:none; } }

/* ============================================================
   SUPPORT photo band
   ============================================================ */
.support-feature{ display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(28px,5vw,56px); align-items:stretch; margin-bottom:clamp(36px,5vw,56px); }
.support-feature image-slot{ width:100%; height:100%; min-height:100%; aspect-ratio:auto; }
.support-feature .sf-points{ list-style:none; margin:20px 0 0; padding:0; display:flex; flex-direction:column; gap:11px; }
.support-feature .sf-points li{ display:flex; gap:11px; align-items:flex-start; font-size:14.5px; color:var(--ink-soft); line-height:1.7; }
.support-feature .sf-points b{ color:var(--ink); }
.support-feature .sf-points .ico{ width:20px; height:20px; color:var(--accent); flex:0 0 auto; margin-top:3px; stroke-width:2.2; }
@media (max-width:840px){ .support-feature{ grid-template-columns:1fr; align-items:stretch; } .support-feature image-slot{ aspect-ratio:16/10; height:auto; min-height:0; } }

/* ============================================================
   FINAL CTA photo
   ============================================================ */
.cta-photo{ max-width:560px; margin:0 auto clamp(30px,4vw,42px); }
.cta-photo image-slot{ width:100%; aspect-ratio:16/8; border-radius:var(--radius-lg); }

/* ============================================================
   CTA BAND  (mid-page — 最も目立つ行動喚起)
   ============================================================ */
.cta-band{ background:var(--bg-soft); position:relative; overflow:hidden; border-block:1px solid var(--line); }
.cta-band::before{ content:""; position:absolute; inset:0; background:radial-gradient(70% 130% at 85% 0%, rgba(6,193,103,.10) 0%, transparent 55%); }
.cta-band .wrap{ position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:clamp(24px,4vw,48px); flex-wrap:wrap; padding-block:clamp(40px,5.5vw,60px); }
.cta-band .cb-text{ flex:1 1 360px; }
.cta-band .cb-text h2{ font-family:var(--font-head); font-weight:var(--head-weight); font-size:clamp(22px,3.4vw,34px); line-height:1.45; margin:0; color:var(--ink); text-wrap:balance; }
.cta-band .cb-text p{ margin:12px 0 0; color:var(--ink-soft); font-size:15px; line-height:1.8; font-weight:500; }
.cta-band .cb-actions{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; flex:0 0 auto; }
.cta-band .btn-onlight{ background:var(--ink); color:#fff; box-shadow:0 14px 30px -14px rgba(0,0,0,.5); }
.cta-band .btn-onlight:hover{ background:#000; transform:translateY(-2px); }
.cta-band .cb-note{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; color:var(--muted); }
.cta-band .cb-note .ico{ width:15px; height:15px; stroke-width:2.4; }
@media (max-width:680px){ .cta-band .cb-actions{ align-items:stretch; width:100%; } .cta-band .cb-actions .btn{ width:100%; } .cta-band .cb-note{ justify-content:center; } }
.cta-band .cb-eyebrow{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-head); font-weight:700; font-size:12.5px; letter-spacing:.04em; color:var(--accent-deep); margin-bottom:12px; }
.cta-band .cb-eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--accent); }
.cta-band .cb-hl{ color:var(--accent-deep); font-weight:800; }
.cta-band .cb-notes{ flex:1 1 100%; margin:4px 0 0; font-size:11.5px; line-height:1.85; color:var(--muted); }

/* growth operation photo strip */
.growth-photos{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:clamp(30px,4vw,44px); }
.growth-photos figure{ margin:0; }
.growth-photos image-slot{ width:100%; aspect-ratio:2/3; background:#fff; border-radius:14px; border:1px solid var(--line-soft); overflow:hidden; }
.growth-photos figcaption{ margin-top:10px; font-size:12.5px; color:var(--ink-soft); display:flex; align-items:center; gap:7px; font-weight:600; }
.growth-photos figcaption .ico{ width:16px; height:16px; color:var(--accent); flex:0 0 auto; }
@media (max-width:640px){ .growth-photos{ grid-template-columns:1fr 1fr; } .growth-photos image-slot{ aspect-ratio:3/4; } }

/* ============================================================
   GROWTH  (掲載後の未来)
   ============================================================ */
.growth{ display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
.growth-step{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:26px 16px 22px; text-align:center; position:relative; box-shadow:var(--shadow-sm); }
.growth-step .g-ico{ width:54px; height:54px; border-radius:15px; margin:0 auto 14px; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent); }
.growth-step .g-ico .ico{ width:27px; height:27px; }
.growth-step h3{ font-family:var(--font-head); font-weight:700; font-size:15px; margin:0 0 8px; }
.growth-step p{ margin:0; font-size:12px; line-height:1.7; color:var(--ink-soft); }
.growth-step .g-n{ position:absolute; top:11px; left:14px; font-family:var(--font-num); font-size:11px; font-weight:700; color:var(--muted); }
.growth-step:not(:last-child)::after{ content:""; position:absolute; right:-9px; top:50%; transform:translateY(-50%) rotate(45deg); width:11px; height:11px; border-top:2px solid var(--cta); border-right:2px solid var(--cta); z-index:3; }
.growth-step.is-goal{ background:var(--ink); border-color:transparent; }
.growth-step.is-goal .g-ico{ background:rgba(255,255,255,.1); color:#7ff0b0; }
.growth-step.is-goal h3{ color:#fff; }
.growth-step.is-goal p{ color:#c6cdc8; }
.growth-step.is-goal .g-n{ color:#7a857d; }
@media (max-width:900px){ .growth{ grid-template-columns:repeat(2,1fr); } .growth-step:not(:last-child)::after{ display:none; } .growth-step.is-goal{ grid-column:1 / -1; } }
@media (max-width:480px){ .growth{ grid-template-columns:1fr; } .growth-step.is-goal{ grid-column:auto; } }

/* image-slot baseline */
image-slot{ border-radius:var(--radius); background:var(--bg-soft); }
.phone image-slot, .ph-item image-slot{ background:#eef0ee; }

/* ============================================================
   SIMPLE TRUST STRIP (FV直下)
   ============================================================ */
/* AUTHORITY / 数字で見る出店支援 (SUPPORT DATA panel) */
.authority.sd{ background:var(--bg); border:none; padding-block:clamp(32px,4.5vw,52px); }
.sd-panel{ position:relative; overflow:hidden; background:var(--accent-soft); border:1px solid var(--line); border-radius:clamp(22px,2.6vw,30px); padding:clamp(26px,3.4vw,44px) clamp(20px,4vw,60px) clamp(20px,2.6vw,30px); box-shadow:0 30px 70px -50px rgba(15,42,28,.5); }
.sd-deco{ position:absolute; z-index:0; pointer-events:none; }
.sd-deco-1{ top:-90px; right:-70px; width:280px; height:280px; border-radius:50%; background:radial-gradient(circle at 50% 50%, rgba(6,193,103,.14), transparent 70%); }
.sd-deco-2{ top:40px; right:120px; width:120px; height:120px; border-radius:50%; background:rgba(6,193,103,.08); }
.sd-dots{ top:60px; left:24px; width:150px; height:120px; background-image:radial-gradient(var(--accent) 1.6px, transparent 1.6px); background-size:18px 18px; opacity:.16; -webkit-mask-image:linear-gradient(120deg,#000,transparent 75%); mask-image:linear-gradient(120deg,#000,transparent 75%); }
.sd-head{ position:relative; z-index:1; text-align:center; margin-bottom:clamp(20px,2.6vw,32px); }
.sd-kicker{ display:block; font-family:"Inter",var(--font-head),sans-serif; font-weight:700; font-size:clamp(11px,1.3vw,13px); letter-spacing:.14em; color:var(--accent); margin-bottom:8px; }
.sd-title{ font-family:var(--font-head); font-weight:var(--head-weight); font-size:clamp(22px,3.2vw,34px); color:var(--ink); margin:0; text-wrap:balance; }
.sd-title .hl{ color:var(--accent); }
.sd-lead{ margin:clamp(8px,1.2vw,12px) auto 0; max-width:60ch; font-size:clamp(13.5px,1.4vw,15px); line-height:1.7; color:var(--ink-soft); font-weight:500; }
.sd-lead .hl{ color:var(--accent-deep); font-weight:700; }
.sd-grid{ position:relative; z-index:1; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,24px); }
.sd-card{ position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:center; text-align:center; background:#fff; border:1px solid var(--line); border-radius:clamp(16px,2vw,22px); padding:clamp(20px,2.4vw,30px) clamp(16px,2vw,26px) clamp(18px,2vw,24px); box-shadow:0 18px 40px -30px rgba(15,42,28,.4); }
.sd-card::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:38%; background:radial-gradient(120% 100% at 50% 140%, rgba(6,193,103,.10), transparent 70%); pointer-events:none; }
.sd-ico{ display:grid; place-items:center; width:clamp(48px,5vw,62px); height:clamp(48px,5vw,62px); border-radius:50%; background:var(--accent-soft); margin-bottom:clamp(12px,1.4vw,16px); }
.sd-ico .ico{ width:50%; height:50%; color:var(--accent); stroke-width:1.8; }
.sd-num{ position:relative; z-index:1; display:flex; align-items:baseline; justify-content:center; flex-wrap:nowrap; gap:3px; margin:clamp(8px,1.1vw,12px) 0 0; color:var(--accent); line-height:1; white-space:nowrap; }
.sd-label{ min-height:2.7em; }
.sd-num b{ font-family:"Inter",var(--font-head),sans-serif; font-weight:800; font-size:clamp(46px,6.4vw,76px); letter-spacing:-.02em; }
.sd-num .sd-unit{ font-family:var(--font-head); font-weight:700; font-size:clamp(15px,1.7vw,19px); }
.sd-num .sd-pre{ align-self:flex-start; font-family:var(--font-head); font-weight:700; font-size:clamp(13px,1.4vw,15px); margin-right:1px; }
.sd-num .sd-unit-2{ display:inline-flex; flex-direction:column; align-items:flex-start; line-height:1.05; }
.sd-num .sd-unit-2 b{ font-family:var(--font-head); font-size:clamp(15px,1.7vw,19px); font-weight:800; letter-spacing:0; }
.sd-div{ display:block; width:clamp(40px,5vw,64px); height:2px; border-radius:2px; background:var(--line); margin:clamp(12px,1.5vw,16px) 0 clamp(11px,1.4vw,14px); }
.sd-reason{ position:relative; z-index:1; margin:0; max-width:36ch; font-family:var(--font-head); font-weight:500; font-size:clamp(13px,1.4vw,14.5px); line-height:1.65; color:var(--ink-soft); text-wrap:pretty; }
.sd-label{ position:relative; z-index:1; margin:0; font-family:var(--font-head); font-weight:700; font-size:clamp(15px,1.8vw,18px); color:var(--ink); }
.sd-notes{ position:relative; z-index:1; margin:clamp(16px,2vw,22px) 0 0; font-size:11.5px; line-height:1.7; color:var(--muted); }
@media (max-width:820px){
  .sd-grid{ grid-template-columns:1fr; gap:14px; }
  .sd-card{ padding:clamp(22px,4vw,28px); }
  .sd-reason{ max-width:34ch; }
}
@media (max-width:480px){
  .sd-dots{ display:none; }
}

/* KV — text-link helper */
.hero-actions--lead{ align-items:center; }
.text-link{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-head); font-weight:700; font-size:15px; color:var(--accent-deep); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1.5px; }
.text-link:hover{ color:var(--accent); }
.text-link .arr-d{ font-weight:700; }

/* KV — CTA row (green) */
.kv-cta-row{ display:flex; flex-direction:column; align-items:flex-start; gap:9px; margin-top:clamp(18px,2.4vw,24px); }
.kv-cta-micro{ font-family:var(--font-head); font-weight:700; font-size:13px; letter-spacing:.02em; color:var(--accent-deep); }
.kv-cta-primary{ position:relative; display:flex; align-items:center; justify-content:center; width:min(100%,430px); min-height:62px; padding:12px 60px 12px 28px; border-radius:16px; background:var(--accent); color:#fff; box-shadow:0 16px 32px -14px rgba(6,193,103,.55); transition:filter .16s ease, transform .16s ease; text-align:center; }
.kv-cta-primary:hover{ filter:saturate(1.06) brightness(1.03); transform:translateY(-2px); }
.kv-cta-primary:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; }
.kv-cta-main{ font-family:var(--font-head); font-weight:800; font-size:clamp(17px,2vw,20px); line-height:1.3; }
.kv-cta-arrow{ position:absolute; right:20px; top:50%; transform:translateY(-50%); width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,.22); display:grid; place-items:center; }
.kv-cta-arrow svg{ width:17px; height:17px; fill:none; stroke:#fff; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.kv-cta-sub{ display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:2px 4px; color:var(--accent-deep); font-family:var(--font-head); font-weight:700; font-size:14.5px; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1.5px; transition:color .16s ease; }
.kv-cta-sub:hover{ color:var(--accent); }
.kv-cta-sub:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; }
.kv-cta-chev svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
@media (max-width:560px){ .kv-cta-primary{ width:100%; } }

/* KV — free-support trio */
.kv-free{ list-style:none; margin:clamp(18px,2.2vw,24px) 0 0; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(8px,1vw,12px); }
.kv-free-card{ background:#fff; border:1.5px solid var(--line); border-radius:14px; padding:clamp(13px,1.4vw,16px) clamp(10px,1vw,13px); text-align:center; box-shadow:0 6px 18px -14px rgba(15,42,28,.4); display:flex; flex-direction:column; align-items:center; gap:5px; }
.kv-free-ico{ display:grid; place-items:center; width:42px; height:42px; border-radius:12px; background:var(--accent-soft); margin-bottom:2px; }
.kv-free-ico .ico{ width:24px; height:24px; color:var(--accent); fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.kv-free-title{ margin:0; font-family:var(--font-head); font-weight:800; font-size:clamp(14px,1.15vw,15.5px); color:var(--ink); line-height:1.3; }
.kv-free-desc{ margin:0; font-size:clamp(11px,.85vw,12px); line-height:1.4; color:var(--ink-soft); }
.kv-free-price{ margin-top:2px; font-family:var(--font-head); font-weight:700; font-size:clamp(11.5px,.9vw,12.5px); color:var(--accent-deep); background:var(--accent-soft); border-radius:999px; padding:4px 12px; white-space:nowrap; }
.kv-free-price b{ font-family:"Inter",var(--font-head),sans-serif; font-weight:800; font-size:1.5em; margin:0 1px; letter-spacing:-.02em; }

/* KV — campaign band (time-limited, subdued) */
.kv-camp2{ margin-top:clamp(14px,1.8vw,18px); border-radius:12px; background:#fffaf0; border:1px solid #f2d59a; overflow:hidden; }
.kv-camp2-ribbon{ display:block; background:#f9a825; color:#3a2400; font-family:var(--font-head); font-weight:800; font-size:clamp(11px,.92vw,12.5px); letter-spacing:.01em; text-align:center; padding:4px 14px; }
.kv-camp2-star{ opacity:.7; margin:0 6px; font-weight:700; }
.kv-camp2-body{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:4px 12px; padding:clamp(8px,1vw,11px) 16px; }
.kv-camp2-label{ margin:0; font-family:var(--font-head); font-weight:700; font-size:clamp(13px,1.1vw,15px); color:#6b4e12; }
.kv-camp2-price{ margin:0; font-family:var(--font-head); font-weight:800; font-size:clamp(15px,1.4vw,19px); color:#c85a00; line-height:1; display:inline-flex; align-items:baseline; gap:1px; }
.kv-camp2-mo{ font-family:"Inter",var(--font-head),sans-serif; font-size:1.5em; letter-spacing:-.02em; margin:0 2px; }
.kv-camp2-zero{ font-family:"Inter",var(--font-head),sans-serif; font-size:2.1em; letter-spacing:-.03em; margin-left:6px; color:#e8590c; }

/* ================= RESPONSIVE KV (≤1199px) — ad-creative reproduction ================= */
.hero-responsive{ display:none; }
@media (max-width:1199px){
  .hero-responsive{ display:block;
    background:
      radial-gradient(circle at 86% 12%, rgba(6,193,103,.14), transparent 34%),
      radial-gradient(circle at 6% 42%, rgba(6,193,103,.07), transparent 26%),
      linear-gradient(180deg,#f1fdf5 0%,#f8fffb 58%,#ffffff 100%);
    border-top:1px solid rgba(6,193,103,.10); }
  .hr-wrap{ max-width:960px; margin-inline:auto; padding:24px var(--gutter) 40px; }
  .hr-top{ position:relative; border-radius:24px; overflow:hidden; box-shadow:0 20px 44px -26px rgba(15,42,28,.34); background-color:#eef9f1; background-image:url("uploads/kv_hero_visual_mobile.png"); background-repeat:no-repeat; background-size:cover; background-position:50% top; min-height:640px; }
  .hr-top::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(90deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.86) 34%, rgba(255,255,255,.34) 58%, rgba(255,255,255,0) 76%); }
  .hr-copy{ position:absolute; z-index:2; top:clamp(22px,5vw,60px); left:clamp(20px,5vw,52px); right:clamp(16px,22vw,340px); }
  .hr-copy::before{ content:none; }
  .hr-label{ display:inline-flex; align-items:center; gap:8px; width:fit-content; max-width:100%; padding:7px 14px; border-radius:999px; background:var(--accent-soft); color:var(--accent-deep); font-family:var(--font-head); font-weight:700; font-size:13px; letter-spacing:.01em; }
  .hr-label .dot{ width:8px; height:8px; border-radius:50%; background:var(--accent); flex:0 0 auto; }
  .hr-title{ margin:18px 0 0; font-family:var(--font-head); font-weight:800; font-size:clamp(32px,7.6vw,36px); line-height:1.15; letter-spacing:-.035em; color:var(--ink); }
  .hr-title-hl{ color:var(--accent); white-space:nowrap; }
  .hr-sub{ margin:14px 0 0; font-size:clamp(13px,3.5vw,14px); line-height:1.65; color:var(--ink-soft); }
  .hr-sub b{ color:var(--ink); font-weight:700; }
  .hr-visual{ display:none; }
  /* support panel overlaid on the lower image */
  .hr-panel{ position:absolute; z-index:3; left:clamp(12px,3.5vw,28px); right:clamp(12px,3.5vw,28px); bottom:clamp(14px,3vw,30px); background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:20px; box-shadow:0 16px 40px -12px rgba(15,42,28,.3); overflow:hidden; }
  .hr-panel-title{ margin:0; display:flex; align-items:center; justify-content:center; gap:10px; padding:12px 14px 8px; color:var(--accent-deep); font-family:var(--font-head); font-weight:800; font-size:clamp(13.5px,3.7vw,15px); text-align:center; }
  .hr-panel-deco{ width:22px; height:2px; background:currentColor; opacity:.45; flex:0 0 auto; }
  .hr-support{ list-style:none; margin:0; padding:0; }
  .hr-support li{ display:grid; grid-template-columns:40px minmax(0,1fr) auto; align-items:center; gap:11px; padding:10px 15px; }
  .hr-support li + li{ border-top:1px solid var(--line); }
  .hr-sup-ico{ width:40px; height:40px; border-radius:50%; background:var(--accent-soft); display:grid; place-items:center; }
  .hr-sup-ico svg{ width:24px; height:24px; fill:none; stroke:var(--accent); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
  .hr-sup-txt{ min-width:0; }
  .hr-sup-h{ margin:0; font-family:var(--font-head); font-weight:800; font-size:14.5px; line-height:1.35; color:var(--ink); white-space:normal; word-break:normal; }
  .hr-sup-d{ margin:2px 0 0; font-size:11.5px; line-height:1.45; color:#6b7280; white-space:normal; word-break:normal; }
  .hr-sup-tag{ white-space:nowrap; font-family:var(--font-head); font-weight:700; font-size:11px; color:var(--accent-deep); background:var(--accent-soft); border-radius:999px; padding:6px 10px; justify-self:end; }
  .hr-sup-tag b{ font-family:"Inter",var(--font-head),sans-serif; font-size:18px; font-weight:800; margin:0 1px; letter-spacing:-.02em; }
  /* in-KV CTA */
  .hr-cta{ display:flex; flex-direction:column; align-items:center; gap:9px; margin-top:22px; }
  .hr-cta-micro{ font-family:var(--font-head); font-weight:700; font-size:12.5px; color:var(--accent-deep); }
  .hr-cta-btn{ display:flex; align-items:center; justify-content:center; gap:10px; width:100%; max-width:520px; min-height:56px; padding:10px 22px; border-radius:999px; background:var(--accent); color:#fff; font-family:var(--font-head); font-weight:800; font-size:clamp(15px,4vw,16px); box-shadow:0 14px 30px -14px rgba(6,193,103,.55); text-align:center; }
  .hr-cta-arw{ display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,.22); flex:0 0 auto; }
  .hr-cta-arw svg{ width:15px; height:15px; fill:none; stroke:#fff; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
  .hr-cta-sub{ font-family:var(--font-head); font-weight:700; font-size:13px; color:var(--accent-deep); text-decoration:underline; text-underline-offset:3px; }
  /* campaign band */
  .hr-camp{ margin-top:22px; border:1.5px solid #f6b545; border-radius:20px; background:#fffaf0; overflow:hidden; box-shadow:0 12px 28px -18px rgba(200,90,0,.42); }
  .hr-camp-ribbon{ display:block; background:#ff9a1f; color:#fff; text-align:center; font-family:var(--font-head); font-weight:800; font-size:clamp(12px,3.4vw,14px); padding:8px 14px; letter-spacing:.01em; }
  .hr-camp-body{ position:relative; display:flex; flex-direction:column; align-items:center; gap:5px; padding:16px 82px 10px 20px; }
  .hr-camp-label{ margin:0; font-family:var(--font-head); font-weight:700; font-size:clamp(15px,4.2vw,17px); color:#3a2a08; }
  .hr-camp-main{ margin:0; display:inline-flex; align-items:baseline; gap:5px; font-family:var(--font-head); font-weight:800; color:#3a2a08; font-size:clamp(18px,5vw,24px); line-height:1; white-space:nowrap; }
  .hr-camp-num{ color:#f2761b; font-size:1.95em; letter-spacing:-.02em; }
  .hr-camp-free{ color:#f2761b; font-size:1.75em; }
  .hr-camp-badge{ position:absolute; right:14px; top:50%; transform:translateY(-50%); width:62px; height:62px; border-radius:50%; background:#ff9a1f; color:#fff; display:grid; place-items:center; text-align:center; font-family:var(--font-head); font-weight:800; font-size:11px; line-height:1.28; }
  .hr-camp-note{ margin:0; padding:0 16px 14px; text-align:center; font-size:11.5px; line-height:1.5; color:#8a7a58; }
}
/* tablet 768–1199: same 1-column visual KV, scaled up */
@media (min-width:768px) and (max-width:1199px){
  .hr-wrap{ max-width:960px; }
  .hr-top{ background-position:55% top; min-height:700px; }
  .hr-copy{ top:clamp(40px,6vw,72px); left:clamp(36px,5vw,60px); right:clamp(36px,42%,460px); }
  .hr-title{ font-size:clamp(44px,5vw,52px); }
  .hr-sub{ font-size:clamp(15px,2vw,16px); line-height:1.7; max-width:520px; }
  .hr-panel{ left:clamp(28px,4vw,44px); right:clamp(28px,4vw,44px); bottom:clamp(24px,4vw,44px); }
  .hr-support li{ padding:14px 18px; }
}
/* image nudged up + copy width per width */
@media (min-width:900px) and (max-width:1199px){
  .hr-copy{ right:44%; }
  .hr-sub{ max-width:460px; }
  .hr-title{ font-size:clamp(44px,4.4vw,48px); }
}
@media (min-width:768px) and (max-width:899px){
  .hr-copy{ right:38%; }
  .hr-title{ font-size:clamp(40px,5vw,44px); }
}
@media (max-width:767px){
  /* normal flow: copy → gap → panel, photo as background behind */
  .hr-top{ background-position:45% top; min-height:0; overflow:hidden; }
  .hr-top::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(90deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.7) 38%, rgba(255,255,255,.25) 60%, rgba(255,255,255,0) 75%); }
  .hr-copy{ position:relative; z-index:2; padding:22px 16px 0; max-width:64%; }
  .hr-title{ font-size:clamp(26px,7.4vw,32px); line-height:1.26; }
  .hr-sub{ margin-top:12px; }
  .hr-panel{ position:relative; z-index:2; left:auto; right:auto; bottom:auto; margin:34px 12px 14px; }
}
@media (max-width:360px){
  .hr-title{ font-size:25px; }
  .hr-copy{ max-width:70%; }
}

/* 統合セクション補足 */
.trust-mini{ margin:16px 0 0; padding:14px 18px; background:var(--accent-soft); border-radius:var(--radius); font-size:14px; line-height:1.8; color:var(--ink); }
.trust-mini b{ color:var(--accent-deep); }
.trust-tiny{ display:block; margin-top:4px; font-size:11.5px; color:var(--muted); font-weight:400; }

/* WannaEatが選ばれる3つの理由 */
.reasons-head{ text-align:center; }
.reasons-head .eyebrow{ justify-content:center; }
.reasons{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,26px); margin:clamp(30px,4vw,46px) 0 clamp(44px,6vw,68px); }
.reason{ position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(26px,3vw,34px) clamp(22px,2.6vw,30px); box-shadow:var(--shadow-sm); }
.reason-no{ font-family:"Inter",var(--font-head),sans-serif; font-weight:800; font-size:clamp(30px,3.6vw,40px); color:var(--accent-soft); line-height:1; }
.reason-ico{ display:grid; place-items:center; width:52px; height:52px; border-radius:14px; background:var(--accent-soft); margin:6px 0 16px; }
.reason-ico .ico{ width:26px; height:26px; color:var(--accent); stroke-width:1.9; }
.reason h3{ font-family:var(--font-head); font-weight:700; font-size:clamp(17px,2vw,19px); color:var(--ink); margin:0 0 10px; line-height:1.45; }
.reason p{ margin:0; font-size:14.5px; line-height:1.85; color:var(--ink-soft); }
@media (max-width:820px){ .reasons{ grid-template-columns:1fr; gap:14px; } }


.tstrip{ background:#fff; border-bottom:1px solid var(--line); }
.tstrip .wrap{ display:grid; grid-template-columns:repeat(4,1fr); align-items:center; gap:0; padding-block:22px; }
.tstrip .ts-i{ display:flex; align-items:center; gap:14px; padding:4px 28px; font-size:14.5px; font-weight:700; color:var(--ink); line-height:1.45; letter-spacing:.01em; }
.tstrip .ts-i + .ts-i{ border-left:1px solid var(--line); }
.tstrip .ts-ico{ display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:12px; background:rgba(6,193,103,.10); flex:0 0 auto; }
.tstrip .ts-i .ico{ width:24px; height:24px; color:var(--accent); flex:0 0 auto; stroke-width:2; }
@media (max-width:860px){
  .tstrip .wrap{ grid-template-columns:repeat(2,1fr); gap:2px 0; }
  .tstrip .ts-i{ padding:14px 18px; font-size:13.5px; }
  .tstrip .ts-i:nth-child(odd){ border-left:none; }
  .tstrip .ts-i:nth-child(n+3){ border-top:1px solid var(--line); }
}
@media (max-width:480px){
  .tstrip .wrap{ grid-template-columns:1fr; }
  .tstrip .ts-i{ border-left:none; }
  .tstrip .ts-i + .ts-i{ border-top:1px solid var(--line); }
}

/* ============================================================
   AUDIENCE illustration (line art, matches icon system)
   ============================================================ */
.aud-illust{ margin-top:clamp(36px,5vw,58px); display:flex; justify-content:center; }
.aud-illust svg{ width:min(760px,100%); height:auto; }

/* ============================================================
   2025 restructure: scroll offset, hero step card, compare, combi
   ============================================================ */
html{ scroll-padding-top:92px; }

/* hero connected-steps floating card */
.hero-a-visual .fc-steps{ bottom:-5%; left:-10%; }
.fc-steps{ align-items:stretch; }
.fc-steps .fcs{ display:flex; flex-direction:column; gap:9px; }
.fc-steps .fcs-row{ display:flex; align-items:center; gap:10px; font-family:var(--font-head); font-weight:700; font-size:12.5px; color:#16181c; white-space:nowrap; }
.fc-steps .fcs-n{ width:22px; height:22px; border-radius:50%; background:var(--accent-soft); color:var(--accent); display:grid; place-items:center; font-size:11px; flex:0 0 auto; }
@media (max-width:900px){ .hero-a-visual .fc-steps{ left:0; } }
@media (max-width:480px){ .hero-a-visual .fc-order, .hero-a-visual .fc-steps{ position:static; margin:14px auto 0; width:max-content; max-width:100%; } }

/* section lead — ensure readable contrast */
.sec-lead{ color:var(--ink-soft); }

/* costs / info cards reuse .benefit — add a subtle card frame */
.info-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:clamp(28px,4vw,40px); }
.info-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(24px,3vw,32px); }
.info-card .ico-badge{ margin-bottom:16px; }
.info-card h3{ font-family:var(--font-head); font-weight:var(--head-weight); font-size:clamp(17px,2.2vw,20px); margin:0 0 10px; line-height:1.5; }
.info-card p{ margin:0; font-size:15px; line-height:1.85; color:var(--ink-soft); }
@media (max-width:760px){ .info-grid{ grid-template-columns:1fr; } }

/* comparison table (v2 — 記号+短文) */
.cmp2-legend{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px 22px; margin-top:clamp(20px,3vw,28px); font-size:13px; font-weight:600; color:var(--ink-soft); }
.cmp2-legend span{ display:inline-flex; align-items:center; gap:7px; }
.rate{ font-family:var(--font-head); font-weight:800; line-height:1; }
.rate-best{ color:var(--accent); }
.rate-ok{ color:#5b6570; }
.rate-tri{ color:#98a0a8; }
.cmp2-legend .rate{ font-size:17px; }

.cmp2{ margin-top:clamp(16px,2.4vw,22px); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; background:#fff; }
.cmp2-row{ display:grid; grid-template-columns:1fr 1.25fr 1.25fr; }
.cmp2-row + .cmp2-row{ border-top:1px solid var(--line); }
.cmp2-cell{ padding:18px 22px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; }
.cmp2-cell.label{ font-family:var(--font-head); font-weight:700; font-size:15px; color:var(--ink); background:var(--line-soft); flex-direction:row; justify-content:center; }
.cmp2-cell.we{ background:var(--accent-soft); }
.cmp2-cell .rate{ font-size:34px; }
.cmp2-cell .rate-txt{ font-size:13.5px; line-height:1.55; color:var(--ink-soft); font-weight:500; }
.cmp2-cell.we .rate-txt{ color:var(--ink); font-weight:600; }
.cmp2-head .cmp2-cell{ font-family:var(--font-head); font-weight:700; font-size:14.5px; color:var(--ink); background:var(--bg-soft); flex-direction:row; justify-content:center; }
.cmp2-head .cmp2-cell.we{ color:var(--accent-deep); }
.cmp2-head .cmp2-cell.label{ background:var(--line-soft); }

.cmp2-foot{ margin-top:clamp(26px,3.5vw,36px); text-align:center; }
.cmp2-foot p{ margin:0 auto clamp(18px,2.4vw,24px); max-width:52ch; font-size:15px; line-height:1.85; color:var(--ink-soft); }
.cmp2-foot .cmp2-note{ font-size:12px; color:var(--muted); line-height:1.7; }
.cmp2-cell.we sup{ font-size:.7em; color:var(--accent-deep); }

@media (max-width:720px){
  .cmp2{ border:none; border-radius:0; background:transparent; display:flex; flex-direction:column; gap:16px; }
  .cmp2-row{ grid-template-columns:1fr; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; background:#fff; }
  .cmp2-row + .cmp2-row{ border-top:1px solid var(--line); }
  .cmp2-head{ display:none; }
  .cmp2-cell{ flex-direction:row; align-items:center; justify-content:flex-start; gap:14px; text-align:left; padding:15px 18px; }
  .cmp2-cell.label{ justify-content:flex-start; font-size:15px; background:var(--bg-soft); border-bottom:1px solid var(--line); }
  .cmp2-cell.own, .cmp2-cell.we{ border-top:1px solid var(--line-soft); }
  .cmp2-cell .rate{ font-size:30px; flex:0 0 auto; width:38px; text-align:center; }
  .cmp2-cell .rate-txt{ font-size:14px; }
  .cmp2-cell.own::before{ content:"自分で進める"; display:block; font-size:11.5px; color:var(--muted); font-weight:700; flex:0 0 84px; }
  .cmp2-cell.we::before{ content:"WannaEatに相談"; display:block; font-size:11.5px; color:var(--accent-deep); font-weight:700; flex:0 0 84px; }
}

/* checklist grid (両立ポイント / 掲載後サポート) */
.combi-list{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:clamp(24px,3vw,34px); list-style:none; padding:0; }
.combi-list li{ display:flex; align-items:flex-start; gap:12px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; font-size:15px; line-height:1.6; color:var(--ink); font-weight:500; }
.combi-list li .ico{ width:20px; height:20px; color:var(--accent); flex:0 0 auto; margin-top:2px; stroke-width:2.4; }
.combi-note{ margin:clamp(22px,3vw,30px) 0 0; padding:18px 22px; background:var(--accent-soft); border-radius:var(--radius); font-size:15px; line-height:1.8; color:var(--ink); }
.combi-note b{ color:var(--accent-deep); }
@media (max-width:640px){ .combi-list{ grid-template-columns:1fr; } }

/* support-target chips (実績) */
.target-chips{ display:flex; flex-wrap:wrap; gap:10px 12px; margin-top:22px; }
.target-chips span{ display:inline-flex; align-items:center; gap:8px; padding:9px 16px; background:#fff; border:1px solid var(--line); border-radius:999px; font-weight:700; font-size:13.5px; color:var(--ink-soft); box-shadow:var(--shadow-sm); }
.target-chips .ico{ width:16px; height:16px; color:var(--accent); flex:0 0 auto; stroke-width:2.4; }
.final-cta .final-sub{ margin:20px auto 0; font-size:14px; color:#9aa39c; }
.hero-a-visual .kv-visual{ width:100%; height:auto; aspect-ratio:1536/670; object-fit:cover; object-position:34% center; }
.kv-photo{ display:block; border-radius:var(--radius); }
.kv-features{ display:flex; flex-wrap:wrap; gap:16px 28px; margin-top:clamp(26px,3.5vw,34px); }
.kv-feat{ display:flex; align-items:center; gap:13px; font-family:var(--font-head); font-weight:700; font-size:15px; line-height:1.35; color:var(--ink); }
.kv-feat .kf-ico{ width:48px; height:48px; border-radius:50%; background:var(--accent-soft); color:var(--accent); display:grid; place-items:center; flex:0 0 auto; }
.kv-feat .kf-ico .ico{ width:23px; height:23px; stroke-width:2; }
@media (max-width:460px){ .kv-features{ gap:14px 20px; } .kv-feat{ font-size:14px; } }
@media (max-width:900px){ .hero-a-visual .kv-visual{ max-width:100%; margin:0 auto; aspect-ratio:16/10; object-position:52% center; border-radius:18px; } }

/* ============================================================
   CAMPAIGN (期間限定) + PHOTO-PRO  — 2026-07 追加
   ============================================================ */
:root{ --camp:#f59e0b; --camp-deep:#b45309; --camp-soft:#fff6e2; --camp-line:#f6d68a; }

/* Latin / numerals — Inter with JP fallback */
.en{ font-family:"Inter","Noto Sans JP",var(--font-head),sans-serif; font-feature-settings:"tnum" 1; }
/* KV heading refinement */
.hero-title{ font-family:"Noto Sans JP","Zen Kaku Gothic New",sans-serif; }
.hero-title .en{ font-weight:700; letter-spacing:-.005em; }
.br-pc{ display:inline; }
.hero-title{ word-break:keep-all; overflow-wrap:break-word; }
.hero-title .nb{ display:inline-block; white-space:nowrap; }
.hero-sub .nb{ display:inline-block; }
.hero-title .en{ white-space:nowrap; }
@media (max-width:1199px){ .br-pc{ display:none; } br.pc-only{ display:none; } }
br.pc-only{ display:inline; }

/* --- FV mini campaign callout --- */
.kv-campaign{ margin-top:clamp(20px,3vw,26px); padding:clamp(16px,2.4vw,22px) clamp(18px,2.6vw,26px); background:var(--camp-soft); border:1px solid var(--camp-line); border-radius:var(--radius); }
.kvc-badge{ display:inline-flex; align-items:center; gap:7px; padding:5px 13px; background:var(--camp); color:#fff; font-weight:800; font-size:12.5px; letter-spacing:.02em; border-radius:999px; }
.kvc-label{ margin:12px 0 0; font-family:"Noto Sans JP",var(--font-head),sans-serif; font-size:clamp(14px,1.8vw,16px); font-weight:600; color:var(--ink-soft); }
.kvc-head{ display:flex; align-items:baseline; flex-wrap:nowrap; gap:4px 12px; margin:3px 0 0; line-height:1.05; }
.kvc-term{ font-size:clamp(24px,3.6vw,34px); font-weight:700; color:var(--ink); align-self:flex-end; margin-bottom:clamp(6px,1vw,10px); }
.kvc-zero{ font-size:clamp(48px,7vw,72px); font-weight:800; color:var(--accent-deep); letter-spacing:-.02em; }
.kvc-yen{ font-family:"Noto Sans JP",var(--font-head),sans-serif; font-size:clamp(22px,3vw,30px); font-weight:700; color:var(--accent-deep); align-self:flex-end; margin-bottom:clamp(6px,1vw,9px); }
.kvc-sub{ margin:8px 0 0; font-size:clamp(13px,1.6vw,15px); font-weight:600; color:var(--ink-soft); }
.kvc-sub b{ color:var(--camp-deep); }

/* --- Campaign detail section --- */
.campaign{ background:var(--camp-soft); position:relative; }
.campaign .section-head{ padding-top:clamp(24px,5vw,64px); }
.campaign .campaign-eyebrow{ color:var(--camp-deep); }
.campaign .campaign-eyebrow .dot{ background:var(--camp); }
.campaign-hero{ max-width:720px; margin:clamp(28px,4vw,44px) auto 0; text-align:center; background:#fff; border:2px solid var(--camp-line); border-radius:var(--radius-lg); padding:clamp(26px,4vw,44px) clamp(20px,4vw,48px); box-shadow:0 24px 60px -34px rgba(180,83,9,.4); }
.cmp-badge{ display:inline-flex; align-items:center; padding:8px 20px; background:var(--camp); color:#fff; font-weight:800; font-size:clamp(13px,1.7vw,15px); letter-spacing:.02em; border-radius:999px; }
.cmp-lead{ margin:clamp(18px,2.6vw,24px) 0 0; font-size:clamp(15px,2vw,18px); font-weight:700; color:var(--ink); }
.cmp-big{ display:flex; align-items:baseline; justify-content:center; flex-wrap:nowrap; gap:6px 14px; margin:8px 0 0; line-height:1; }
.cmp-term{ font-size:clamp(28px,4.4vw,44px); font-weight:700; color:var(--ink); align-self:flex-end; margin-bottom:clamp(10px,1.8vw,20px); }
.cmp-big .cmp-zero{ font-size:clamp(64px,11vw,132px); font-weight:800; color:var(--accent-deep); letter-spacing:-.02em; }
.cmp-yen{ font-family:"Noto Sans JP",var(--font-head),sans-serif; font-size:clamp(28px,4vw,40px); font-weight:700; color:var(--accent-deep); align-self:flex-end; margin-bottom:clamp(10px,1.8vw,20px); }
.cmp-cont{ display:inline-block; margin:clamp(16px,2.4vw,22px) auto 0; padding:11px 22px; background:var(--camp-soft); border:1px solid var(--camp-line); border-radius:999px; font-size:clamp(14px,1.8vw,16px); font-weight:600; color:var(--ink); }
.cmp-cont b{ font-size:1.15em; color:var(--camp-deep); font-weight:800; }

/* --- Flow: speed emphasis (2026-07) --- */
.flow-fast-badge{ display:inline-flex; align-items:center; gap:8px; margin:0 0 16px; padding:8px 16px; background:var(--accent-soft); color:var(--accent-deep); border-radius:999px; font-family:var(--font-head); font-weight:800; font-size:clamp(13px,1.7vw,15px); }
.flow-fast-badge .ico{ width:17px; height:17px; stroke-width:2.2; color:var(--accent); }
.flow-fast-badge b{ font-size:1.12em; }
.flow-note{ margin:12px 0 0; font-size:12.5px; line-height:1.8; color:var(--muted); }

/* --- Campaign appeal band (rebuilt CTA band, 2026-07) --- */
.campaign-band{ background:var(--camp-soft); border-block:1px solid var(--camp-line); }
.cbz{ max-width:760px; margin-inline:auto; text-align:center; background:#fff; border:2px solid var(--camp-line); border-radius:var(--radius-lg); padding:clamp(30px,4.5vw,52px) clamp(22px,4vw,56px); box-shadow:0 24px 60px -34px rgba(180,83,9,.4); }
.cbz-label{ display:inline-flex; align-items:center; gap:8px; padding:8px 18px; background:var(--camp); color:#fff; font-family:var(--font-head); font-weight:800; font-size:clamp(13px,1.7vw,15px); border-radius:999px; }
.cbz-label .ico{ width:16px; height:16px; stroke-width:2.3; }
.cbz-head{ margin:0; }
.cbz-eyebrow-line{ display:block; margin:clamp(20px,2.8vw,26px) 0 0; font-family:var(--font-head); font-size:clamp(15px,2vw,18px); font-weight:700; color:var(--ink); }
.cbz-big{ display:flex; align-items:baseline; justify-content:center; flex-wrap:nowrap; gap:6px 12px; margin:6px 0 0; line-height:1; }
.cbz-term{ font-size:clamp(26px,4.2vw,42px); font-weight:700; color:var(--ink); align-self:flex-end; margin-bottom:clamp(10px,1.8vw,18px); }
.cbz-zero{ font-family:"Inter",var(--font-head),sans-serif; font-size:clamp(70px,12vw,140px); font-weight:800; color:var(--accent-deep); letter-spacing:-.02em; }
.cbz-yen{ font-family:"Noto Sans JP",var(--font-head),sans-serif; font-size:clamp(28px,4vw,42px); font-weight:700; color:var(--accent-deep); align-self:flex-end; margin-bottom:clamp(10px,1.8vw,18px); }
.cbz-perk{ display:inline-flex; align-items:center; gap:10px; margin:clamp(18px,2.6vw,24px) 0 0; padding:12px 22px; background:var(--camp-soft); border:1px solid var(--camp-line); border-radius:999px; font-size:clamp(14px,1.8vw,16px); color:var(--ink); text-align:left; }
.cbz-perk .ico{ width:20px; height:20px; color:var(--camp-deep); stroke-width:2; flex:0 0 auto; }
.cbz-perk b{ color:var(--camp-deep); font-weight:800; }
.cbz-body{ max-width:52ch; margin:clamp(20px,2.8vw,26px) auto 0; font-size:clamp(14px,1.8vw,15.5px); line-height:1.9; color:var(--ink-soft); }
.cbz-actions{ display:flex; flex-direction:column; align-items:center; gap:12px; margin:clamp(22px,3vw,30px) 0 0; }
.cbz-actions .btn{ min-width:min(100%,340px); }
.cbz-note{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; color:var(--muted); }
.cbz-note .ico{ width:15px; height:15px; stroke-width:2.4; color:var(--accent); }
.cbz-notes{ margin:clamp(20px,2.6vw,26px) 0 0; font-size:12px; line-height:1.9; color:var(--muted); text-align:left; }
@media (max-width:600px){ .cbz-big{ gap:4px 8px; } .cbz-actions .btn{ width:100%; } }

.campaign-perks{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,1.8vw,18px); margin:clamp(28px,4vw,40px) 0 0; padding:0; list-style:none; }
.campaign-perks .perk{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:clamp(20px,2.6vw,26px) clamp(14px,1.8vw,18px); box-shadow:var(--shadow-sm); }
.campaign-perks .perk-ico{ display:grid; place-items:center; width:56px; height:56px; border-radius:50%; background:var(--camp-soft); flex:0 0 auto; }
.campaign-perks .perk-ico .ico{ width:28px; height:28px; color:var(--camp-deep); stroke-width:1.9; }
.campaign-perks .perk-t{ font-size:14px; font-weight:600; color:var(--ink-soft); line-height:1.55; }
.campaign-perks .perk-t b{ display:block; font-size:14.5px; color:var(--ink); margin-bottom:3px; }
.campaign-notes{ max-width:720px; margin:clamp(22px,3vw,30px) auto 0; font-size:12.5px; line-height:1.9; color:var(--muted); text-align:center; }
@media (max-width:820px){ .campaign-perks{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:420px){ .campaign-perks{ grid-template-columns:1fr; } .campaign-notes{ text-align:left; } }

/* --- Photo comparison section --- */
.pp-intro{ max-width:64ch; margin-inline:auto; text-align:center; }
.photo-cmp{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2.4vw,26px); margin-top:clamp(26px,3.4vw,40px); align-items:stretch; }
.pc-card{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); }
.pc-card--pro{ border-color:var(--accent); box-shadow:0 20px 44px -26px rgba(6,193,103,.5); }
.pc-media{ position:relative; }
.pc-media img{ display:block; width:100%; aspect-ratio:16/10; object-fit:cover; }
.pc-badge{ position:absolute; left:14px; bottom:14px; display:inline-flex; align-items:center; gap:6px; font-family:var(--font-head); font-weight:800; font-size:clamp(12.5px,1.3vw,14px); padding:7px 13px; border-radius:999px; box-shadow:0 6px 16px -6px rgba(0,0,0,.35); }
.pc-badge .ico{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linejoin:round; stroke-linecap:round; }
.pc-badge--pro{ background:var(--accent); color:#fff; }
.pc-badge--phone{ background:rgba(255,255,255,.94); color:#5b6470; }
.pc-body{ display:flex; flex-direction:column; gap:14px; padding:clamp(18px,2.2vw,24px); flex:1; }
.pc-tag{ align-self:flex-start; display:inline-flex; align-items:center; gap:7px; font-family:var(--font-head); font-weight:800; font-size:clamp(14px,1.6vw,16px); padding:8px 15px; border-radius:10px; }
.pc-tag .ico{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linejoin:round; stroke-linecap:round; }
.pc-tag--pro{ background:var(--accent-soft); color:var(--accent-deep); }
.pc-tag--phone{ background:#eef0f2; color:#5b6470; }
.pc-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.pc-list li{ display:flex; gap:10px; align-items:flex-start; font-size:clamp(13.5px,1.5vw,14.5px); font-weight:600; line-height:1.6; color:var(--ink); }
.pc-list .ico{ width:20px; height:20px; flex:0 0 auto; margin-top:1px; fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.pc-list--pro .ico{ color:var(--accent); }
.pc-list--phone{ color:var(--ink-soft); }
.pc-list--phone li{ color:var(--ink-soft); font-weight:500; }
.pc-list--phone .ico{ color:#9aa2ab; stroke-width:1.9; }

/* --- Photo promo band --- */
.photo-promo{ display:grid; grid-template-columns:1.3fr 1fr; gap:clamp(20px,3vw,40px); align-items:center; margin-top:clamp(20px,2.6vw,30px); padding:clamp(24px,3vw,36px); background:var(--accent-soft); border-radius:var(--radius-lg); }
.pp-promo-head{ margin:0; font-family:var(--font-head); font-weight:800; font-size:clamp(19px,2.4vw,26px); line-height:1.45; color:var(--ink); }
.pp-promo-head .hl{ color:var(--accent-deep); }
.pp-promo-body{ margin:12px 0 0; font-size:clamp(14px,1.6vw,15.5px); line-height:1.85; color:var(--ink-soft); }
.pp-promo-points{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.pp-promo-points li{ display:flex; gap:11px; align-items:flex-start; font-family:var(--font-head); font-size:clamp(14px,1.6vw,15.5px); font-weight:700; color:var(--ink); line-height:1.5; }
.pp-promo-points b{ color:var(--accent-deep); }
.pp-promo-points .ico{ width:22px; height:22px; color:var(--accent); flex:0 0 auto; margin-top:1px; fill:none; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.pp-note{ margin:clamp(16px,2vw,20px) 0 0; font-size:12px; line-height:1.85; color:var(--muted); }
@media (max-width:840px){
  .photo-cmp{ grid-template-columns:1fr; }
  .photo-promo{ grid-template-columns:1fr; gap:20px; }
}