/* ============================================================
   愛媛補助金LP — styles
   ============================================================ */

:root{
  --red: #E8383D;
  --red-dark: #B91F23;
  --red-soft: #FFF1F1;
  --navy: #1A2238;
  --navy-2: #2B3552;
  --orange: #F39800;
  --mikan: #FF8B1A;
  --ink: #1F2733;
  --ink-soft: #4A5468;
  --muted: #8892A0;
  --line: #E6E8EC;
  --bg: #FFFFFF;
  --bg-soft: #F7F8FB;
  --bg-warm: #FFF8F1;
  --yellow: #FFE769;
  --green: #1FA463;

  --font-sans: "Noto Sans JP", system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-serif: "Noto Serif JP", "Yu Mincho", serif;
  --font-num: "Roboto", "Noto Sans JP", system-ui, sans-serif;

  --container: 1120px;
  --radius: 14px;
  --shadow-1: 0 1px 2px rgba(20,28,48,.04), 0 4px 16px rgba(20,28,48,.06);
  --shadow-2: 0 8px 28px rgba(20,28,48,.10);
}

*{box-sizing:border-box}
html{overflow-x:hidden; overflow-y:scroll}
html,body{margin:0;padding:0}
body{
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: .01em;
  line-height: 1.75;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}

.container{max-width: var(--container); margin: 0 auto; padding: 0 24px}
.num{font-family: var(--font-num); font-feature-settings:"tnum"; font-variant-numeric: tabular-nums; letter-spacing:.01em}
.strike{text-decoration: line-through; text-decoration-thickness: 2px; color: var(--muted)}

/* =========================================================
   Top bar
   ========================================================= */
.topbar{
  position:sticky; top:0; z-index:50;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(8px);
  border-bottom:1px solid var(--line);
}
.topbar-inner{
  height:64px; display:flex; align-items:center; justify-content:space-between;
}
.topbar-left{display:flex; align-items:flex-end; gap:10px; margin-left:-80px}
.topbar-right{display:flex; align-items:center; gap:18px}
.topbar-tel{
  display:inline-flex; flex-direction:column; align-items:center; gap:1px;
  color: var(--ink); white-space:nowrap; line-height:1.1;
}
.topbar-tel-lead{
  font-family: var(--font-sans);
  font-size:11px; font-weight:700; color: var(--ink-soft);
  letter-spacing:.04em;
  transform: translateX(12px);
}
.topbar-tel-num{
  display:inline-flex; align-items:center; gap:5px;
  font-family: var(--font-num);
  font-size:18px; font-weight:800;
  letter-spacing:.02em;
}
.topbar-tel-ic{font-size:15px}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.02em}
.brand-logo{
  height: 32px; width: auto; display: block;
}
.topbar-left .brand-logo{align-self: flex-end}
.brand-mark{
  width:36px;height:36px;border-radius:9px;background:var(--red);
  display:grid;place-items:center;color:#fff;font-weight:900;font-size:18px;
  font-family: var(--font-num);
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.16);
}
.brand-text{font-size:16px; line-height:1.2}
.brand-text small{display:block;font-size:10px;font-weight:500;color:var(--ink-soft);letter-spacing:.08em; margin-top:2px}
.topbar-cta{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--red); color:#fff; font-weight:800;
  padding:11px 22px; border-radius:999px; font-size:15px;
  border:0; box-shadow: 0 4px 14px rgba(232,56,61,.32);
  transition: transform .15s, background .15s; white-space:nowrap;
}
.topbar-cta-arrow{font-size:17px; line-height:1; font-weight:900}
.topbar-cta:hover{background:var(--red-dark); transform: translateY(-1px)}

/* =========================================================
   Section base
   ========================================================= */
section{padding: 96px 0}
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  color:var(--red); font-weight:700; font-size:12px; letter-spacing:.18em;
  text-transform:uppercase;
  white-space: nowrap;
}
.eyebrow::before{
  content:""; width:24px; height:2px; background:var(--red);
}
h2.sec-title{
  font-size: 40px; font-weight: 900; line-height: 1.4; margin: 14px 0 16px;
  letter-spacing: .02em;
  text-wrap: pretty;
}
.sec-sub{color:var(--ink-soft); font-size:15.5px; line-height:1.9}
.sec-title-em{color: var(--red)}
.sec-head{margin-bottom:48px; max-width:780px}
.sec-head-center{margin: 0 auto 56px; text-align:center}
.sec-head-center .eyebrow{justify-content:center}

/* =========================================================
   CTA Button
   ========================================================= */
.btn-cta{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  background: var(--red); color:#fff; font-weight:800;
  border-radius:999px; padding: 14px 28px; font-size:15px;
  box-shadow: 0 8px 24px rgba(232,56,61,.36), inset 0 -3px 0 rgba(0,0,0,.12);
  transition: transform .15s, background .15s, box-shadow .15s;
  letter-spacing:.02em;
  white-space: nowrap;
}
.btn-cta:hover{background: var(--red-dark); transform: translateY(-2px); box-shadow: 0 12px 32px rgba(232,56,61,.4), inset 0 -3px 0 rgba(0,0,0,.12)}
.btn-cta-arrow{font-size:18px; transition: transform .15s}
.btn-cta:hover .btn-cta-arrow{transform: translateX(4px)}
.btn-lg{padding: 18px 36px; font-size:17px}
.btn-xl{padding: 22px 44px; font-size:19px}
.btn-block{display:flex; width:100%}

/* =========================================================
   HERO — common
   ========================================================= */
.hero{padding: 0; position:relative; overflow:hidden}

/* =========================================================
   HERO A — Money Forward style: blue, left copy + right mockups
   ========================================================= */
.hero-mf{
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(232,56,61,.10) 0%, transparent 60%),
    radial-gradient(900px 500px at 5% 110%, rgba(255,231,105,.18) 0%, transparent 55%),
    linear-gradient(180deg, #FFFDF7 0%, #FFF5E4 100%);
  color: var(--ink);
  padding: 0;
  min-height: 520px;
  display: flex; align-items: center;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.hero-mf-bg{position: absolute; inset: 0; pointer-events: none}
.hero-mf-grid{
  position: absolute; inset: 0;
  background-image:
    radial-gradient(rgba(26,34,56,.08) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse at 20% 50%, black 40%, transparent 75%);
  opacity: .6;
}
.hero-mf-inner{
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  padding-top: 44px;
  padding-bottom: 44px;
  padding-left: 24px;
  padding-right: 24px;
  max-width: 1280px;
}

/* LEFT — copy */
.hero-mf-left{display: flex; flex-direction: column; gap: 14px; max-width: 680px; margin-left: 0}

/* Eligibility — big banner */
.hero-mf-eligibility{
  display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap;
  margin-top: 16px;
  margin-bottom: -4px;
}
.hero-mf-eligibility-stamp{
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--red);
  font-size: 26px; font-weight: 900;
  letter-spacing: .04em;
  white-space: nowrap;
}
.hero-mf-eligibility-stamp.plain{color: var(--ink)}
.hero-mf-eligibility-stamp.plain b{color: var(--ink)}
.hero-mf-eligibility-stamp b{
  color: var(--red);
  font-size: 26px;
  font-weight: 900;
  position: relative;
}
.hero-mf-eligibility-stamp b::after{
  content: ""; position: absolute;
  left: 0; right: 0; bottom: 1px;
  height: 8px;
  background: var(--yellow);
  z-index: -1;
}
/* Eligibility — band/帯 decoration (matches KV bordered-pill tone) */
.hero-mf-eligibility-band{
  display: inline-flex; align-items: center; gap: 5px;
  background: #fff;
  color: var(--ink);
  font-size: 19px; font-weight: 900;
  letter-spacing: -0.04em;
  white-space: nowrap;
  padding: 6px 8px 6px 6px;
  border-radius: 7px;
  border: 2px solid var(--ink);
  position: relative;
  box-shadow: 0 3px 0 rgba(26,34,56,.14);
}
.hero-mf-eligibility-band-ic{
  display: inline-grid; place-items: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--red); color: #fff;
  font-size: 11px; font-weight: 900;
  flex: 0 0 auto;
}
.hero-mf-eligibility-band b{
  color: var(--red);
  font-size: 21px; font-weight: 900;
  position: relative;
}
.hero-mf-eligibility-band b::after{
  content: ""; position: absolute;
  left: 0; right: 0; bottom: 1px;
  height: 7px;
  background: var(--yellow);
  z-index: -1;
}
.hero-mf-eligibility-dot{
  width: 10px; height: 10px; border-radius: 50%; background: var(--red);
  box-shadow: 0 0 0 4px rgba(232,56,61,.22);
  animation: pulse 1.8s ease-out infinite;
}
.hero-mf-eligibility-deadline{
  font-size: 13px; font-weight: 700;
  color: rgba(255,255,255,.9);
  letter-spacing: .04em;
}

/* Service pitch */
.hero-mf-pitch-red{color: var(--red); font-weight: 900}
.hero-mf-pitch{
  margin: 4px 0 0;
  font-size: 25px; font-weight: 600;
  color: var(--ink);
  line-height: 1.5;
  letter-spacing: 0;
  white-space: nowrap;
}
.hero-mf-pitch b{
  font-weight: 900;
  color: var(--ink);
}

/* Flow row */
.hero-mf-flow{
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap;
  margin-top: 4px;
  margin-bottom: -22px;
}
.hero-mf-flow-text{
  font-size: 15px; font-weight: 700; color: rgba(255,255,255,.92);
  white-space: nowrap;
}

/* Small pill tags */
.hero-mf-tags{
  display: inline-flex; align-items: center; gap: 6px;
  flex-wrap: wrap;
}
.hero-mf-tag{
  display: inline-flex; align-items: center;
  background: #fff;
  color: var(--ink);
  font-size: 13px; font-weight: 800; letter-spacing: .04em;
  padding: 4px 12px;
  border-radius: 6px;
  border: 1.5px solid var(--ink);
  white-space: nowrap;
}
.hero-mf-tag-plus{
  color: var(--red);
  font-family: var(--font-num);
  font-size: 18px; font-weight: 900;
  line-height: 1;
}
.hero-mf-tag-de{
  font-size: 14px; font-weight: 700; color: var(--ink-soft);
  margin-left: -2px;
}

/* 1-line headline */
.hero-mf-h1{
  margin: -8px 0 0;
  font-size: 38px; font-weight: 900;
  line-height: 1;
  letter-spacing: .02em;
  color: var(--ink);
  display: flex; align-items: flex-end; flex-wrap: nowrap; gap: 0;
  white-space: nowrap;
}
.hero-mf-h1-num{
  display: inline-flex; align-items: baseline; gap: 0;
  margin-left: -6px;
}
.hero-mf-h1-num .num{
  font-size: 80px; font-weight: 900; line-height: .85;
  color: var(--red);
  letter-spacing: -.03em;
  font-family: var(--font-num);
  background: linear-gradient(180deg, #E8383D 0%, #B91F23 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hero-mf-h1-unit{
  font-size: 26px; font-weight: 900; color: var(--red);
  letter-spacing: .02em;
  padding-bottom: 4px; margin-left: 2px;
}
.hero-mf-h1-over{
  font-size: 16px; font-weight: 900; color: var(--ink);
  background: var(--yellow);
  padding: 3px 12px; border-radius: 6px;
  transform: rotate(12deg); display: inline-flex; align-items: center;
  margin: 0 6px 22px -10px;
  position: relative; z-index: 2;
  white-space: nowrap;
  box-shadow: 0 3px 0 rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.08);
}

/* Urgency note below CTA */
.hero-mf-urgency{
  display: inline-flex; align-items: center; gap: 10px;
  background: #FFF7E6;
  border: 1px dashed var(--orange);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13px; line-height: 1.5;
  color: var(--ink);
  margin-top: 4px;
  max-width: fit-content;
}
.hero-mf-urgency-icon{
  display: inline-grid; place-items: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--orange); color: #fff;
  font-size: 13px; font-weight: 900;
  flex: 0 0 auto;
  animation: pulse 2s ease-out infinite;
}
.hero-mf-urgency-text b{
  color: var(--red);
  font-weight: 900;
}

/* CTA row */
.hero-mf-cta{
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 6px;
}
.hero-mf-btn{
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 22px 14px 18px;
  border-radius: 999px;
  font-size: 15px; font-weight: 800;
  letter-spacing: .04em;
  transition: transform .15s, box-shadow .15s, background .15s;
  white-space: nowrap;
}
.hero-mf-btn-xl{
  padding: 20px 56px 20px 56px;
  font-size: 21px;
  gap: 10px;
}
.hero-mf-btn-xl .hero-mf-btn-ic{
  width: 44px; height: 44px;
  border-radius: 8px;
}
.hero-mf-btn-xl .hero-mf-btn-ic svg{width: 26px; height: 20px}
.hero-mf-btn-xl .hero-mf-btn-arrow{
  font-size: 26px;
}
.hero-mf-btn-secondary{
  background: #fff;
  color: var(--ink);
  border: 1.5px solid var(--ink);
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
}
.hero-mf-btn-primary{
  background: var(--red);
  color: #fff;
  box-shadow: 0 8px 24px rgba(232,56,61,.36), inset 0 -3px 0 rgba(0,0,0,.12);
}
.hero-mf-btn-primary:hover{background: var(--red-dark); transform: translateY(-1px)}
.hero-mf-btn-ic{
  display: inline-grid; place-items: center;
  width: 32px; height: 32px;
  background: rgba(0,0,0,.06);
  border-radius: 6px;
  color: currentColor;
}
.hero-mf-btn-primary .hero-mf-btn-ic{background: rgba(255,255,255,.18); color: #fff}
.hero-mf-btn-ic svg{width: 18px; height: 14px}
.hero-mf-btn-lbl{flex: 1}
.hero-mf-btn-arrow{
  font-size: 18px; font-weight: 800; color: currentColor;
  margin-left: 6px;
  opacity: .6;
}
.hero-mf-btn-primary .hero-mf-btn-arrow{color: #fff; opacity: .85}

.hero-mf-note{
  font-size: 12px; color: rgba(255,255,255,.7);
  line-height: 1.7;
  margin-top: 2px;
}
.hero-mf-note a{
  color: rgba(255,255,255,.95);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* RIGHT — mockups */
.hero-mf-right{
  position: relative;
  height: 420px;
  transform: translateX(45px);
}

/* PC dashboard — FRONT layer (lp.jobantenna.jp top) */
.hmf-pc{
  position: absolute;
  top: 30px; right: -384px;
  width: 760px; height: 480px;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0,0,0,.32), 0 8px 16px rgba(0,0,0,.18);
  transform: rotate(5deg);
  display: flex; flex-direction: column;
  z-index: 3;
}
.hmf-pc-bar{
  display: flex; align-items: center; gap: 6px;
  padding: 9px 14px;
  background: #F1F3F5;
  border-bottom: 1px solid #E6E8EC;
  flex-shrink: 0;
}
.hmf-pc-dot{width: 10px; height: 10px; border-radius: 50%; display: inline-block}
.hmf-pc-dot.r{background: #FF5F57}
.hmf-pc-dot.y{background: #FEBC2E}
.hmf-pc-dot.g{background: #28C840}
.hmf-pc-url{
  margin-left: 10px;
  background: #fff; border: 1px solid #E6E8EC;
  border-radius: 6px;
  padding: 3px 14px;
  font-size: 10px; color: #6B7280; font-family: ui-monospace, monospace;
}
.hmf-pc-screen{
  flex: 1; min-height: 0;
  overflow: hidden;
  background: #fff;
}
.hmf-pc-screen img{
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

/* Smartphone — front layer, sits between text and screens */
.hmf-sp{
  position: absolute;
  width: 168px; height: 350px;
  background: #14182A;
  border-radius: 26px;
  padding: 6px;
  box-shadow:
    0 30px 60px rgba(0,0,0,.32),
    0 8px 16px rgba(0,0,0,.18),
    inset 0 0 0 1.5px rgba(255,255,255,.06);
  z-index: 5;
}
.hmf-sp-1{
  bottom: -90px; left: -100px;
  transform: rotate(-8deg);
  z-index: 5;
}
.hmf-sp-2{
  bottom: -60px; left: 40px;
  transform: rotate(6deg);
  z-index: 4;
}
.hmf-sp-notch{
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  width: 56px; height: 14px;
  background: #14182A;
  border-radius: 0 0 10px 10px;
  z-index: 2;
}
.hmf-sp-screen{
  width: 100%; height: 100%;
  background: #000;
  border-radius: 20px;
  overflow: hidden;
}
.hmf-sp-screen img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* Floating job-posting card — BEHIND, peeks ~1/3 from upper-right */
.hmf-cards{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.hmf-card{
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0,0,0,.28), 0 8px 16px rgba(0,0,0,.14);
}
.hmf-card img{
  width: 100%;
  display: block;
  object-fit: cover;
  object-position: top center;
}
.hmf-card-front{
  position: absolute;
  top: -50px; left: -50px;
  width: 700px; height: 440px;
  transform: rotate(-8deg);
}
.hmf-card-front img{height: 440px}

/* =========================================================
   HERO A — TRUST (Indeed-style centered card)
   ========================================================= */
.hero-trust{
  background:
    radial-gradient(900px 460px at 50% -20%, #FFEFEF 0%, transparent 60%),
    linear-gradient(180deg, #FCFCFE 0%, #F4F6FA 100%);
  border-bottom: 1px solid var(--line);
}
.hero-trust-bg{position:absolute; inset:0; pointer-events:none; opacity:.4}
.grid-dots{
  position:absolute; inset:0;
  background-image: radial-gradient(rgba(26,34,56,.08) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: radial-gradient(ellipse at center, black 35%, transparent 80%);
}
.hero-trust-inner{
  position:relative;
  display:flex; flex-direction:column; align-items:center; gap: 18px;
  max-width: 980px;
}

/* The main offer card */
.hero-card{
  position: relative;
  width: 100%;
  background: #fff;
  border-radius: 22px;
  border: 1px solid var(--line);
  padding: 36px 40px 28px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 20px 50px rgba(20,28,48,.10),
    0 4px 12px rgba(20,28,48,.06);
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  overflow: hidden;
}

/* Top stripe (decorative) */
.hero-card-stripe{
  position: absolute; left: 0; right: 0;
  display: flex; height: 6px;
}
.hero-card-stripe:not(.bottom){top: 0}
.hero-card-stripe.bottom{bottom: 0}
.hero-card-stripe span{
  flex: 1;
}
.hero-card-stripe span:nth-child(1){background: var(--red)}
.hero-card-stripe span:nth-child(2){background: var(--red-dark)}
.hero-card-stripe span:nth-child(3){background: var(--ink)}
.hero-card-stripe span:nth-child(4){background: var(--ink)}
.hero-card-stripe span:nth-child(5){background: var(--orange)}
.hero-card-stripe span:nth-child(6){background: var(--yellow)}
.hero-card-stripe span:nth-child(7){background: var(--red-dark)}
.hero-card-stripe span:nth-child(8){background: var(--red)}

/* Eligibility chip */
.hero-card-eligibility{
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--ink); color: #fff;
  font-size: 13px; font-weight: 800; letter-spacing: .04em;
  padding: 8px 18px; border-radius: 999px;
  white-space: nowrap;
}
.hec-icon{
  display: inline-grid; place-items: center;
  color: var(--yellow);
}

/* Headline */
.hero-card-h1{
  margin: 4px 0 2px;
  font-size: 42px; font-weight: 900; line-height: 1.2;
  letter-spacing: .01em;
  display: flex; flex-direction: column; align-items: center; gap: 0;
}
.hec-prefix{
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 18px; font-weight: 800; color: var(--ink);
  margin-bottom: 6px;
  flex-wrap: wrap; justify-content: center;
}
.hec-prefix-pill{
  display: inline-flex; align-items: center;
  background: var(--bg-soft);
  border: 1.5px solid var(--ink);
  color: var(--ink);
  font-size: 17px; font-weight: 900; letter-spacing: .04em;
  padding: 5px 16px; border-radius: 999px;
  white-space: nowrap;
}
.hec-prefix-plus{
  font-family: var(--font-num);
  font-size: 22px; font-weight: 900; color: var(--red);
  line-height: 1;
}
.hec-prefix-de{
  font-size: 18px; font-weight: 900; color: var(--ink-soft);
  margin-left: -4px;
}
.hec-line-1, .hec-line-3{white-space: nowrap}
.hec-em{
  color: var(--red); font-weight: 900;
  background: var(--yellow); padding: 0 8px; border-radius: 4px;
  display: inline-block;
}
.hec-line-2{
  display: flex; align-items: flex-end; gap: 8px;
  white-space: nowrap; line-height: 1;
  margin: 2px 0;
}
.hec-big-num{
  font-size: 138px; font-weight: 900; line-height: .9;
  letter-spacing: -.03em;
  background: linear-gradient(180deg, #E8383D 0%, #B91F23 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hec-big-unit{
  font-size: 48px; font-weight: 900; color: var(--ink);
  letter-spacing: .04em; padding-bottom: 14px;
}
.hec-plus{
  font-size: 22px; font-weight: 900; color: var(--red);
  background: var(--yellow); padding: 4px 12px; border-radius: 8px;
  transform: rotate(-4deg); display: inline-flex; align-items: center;
  align-self: center; margin-left: 4px; margin-bottom: 14px;
  box-shadow: 0 4px 0 rgba(0,0,0,.06);
  white-space: nowrap;
}

/* Campaign name (quoted) */
.hero-card-campaign{
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-serif);
  font-size: 26px; font-weight: 900; color: var(--ink);
  letter-spacing: .04em;
  line-height: 1.4;
  margin-top: 2px;
}
.hec-q-open, .hec-q-close{color: var(--red); font-size: 34px; line-height: 1; font-weight: 900}
.hec-q-text b{color: var(--red); font-weight: 900}

/* Action row: period + CTA side by side */
.hero-card-action{
  display: flex; align-items: center; gap: 16px;
  flex-wrap: wrap; justify-content: center;
  margin-top: 4px;
}

/* Application period */
.hero-card-period{
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 18px;
  margin-top: 0;
}
.hec-period-lbl{
  font-size: 12px; font-weight: 900; letter-spacing: .14em;
  color: var(--ink); background: var(--ink); color: #fff;
  padding: 5px 10px; border-radius: 6px;
  white-space: nowrap;
}
.hec-period-val{
  display: flex; align-items: baseline; gap: 8px;
  font-size: 18px; font-weight: 700; color: var(--ink);
  white-space: nowrap;
}
.hec-period-val .num{font-size: 18px; font-weight: 700; color: var(--ink-soft)}
.hec-period-sep{color: var(--muted); font-weight: 900}
.hec-period-end{
  font-size: 26px !important; font-weight: 900 !important;
  color: var(--red) !important; letter-spacing: -.01em;
}
.hec-period-end small{font-size: 14px; margin-left: 2px}
.hec-period-tail{font-size: 14px; color: var(--ink-soft); font-weight: 700}

/* CTA row */
.hero-card-cta{
  display: flex; justify-content: center;
}

/* Price progression strip */
/* Price progression strip — 3-card stepped */
.hero-price-strip{
  display:flex; align-items:stretch; justify-content:center; gap: 0;
  background: transparent;
  border: 0;
  padding: 18px 0 4px;
  margin-top: 0;
  width: 100%;
  max-width: 980px;
}

/* Cards */
.hps-card{
  flex: 0 1 220px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px 16px 18px;
  display: flex; flex-direction: column; gap: 6px;
  align-items: center; justify-content: flex-start;
  text-align: center;
  position: relative;
  box-shadow: 0 4px 14px rgba(20,28,48,.04);
}
.hps-card-no{
  position: absolute;
  top: -14px; left: 50%; transform: translateX(-50%);
  width: 36px; height: 36px; border-radius: 50%;
  background: #fff; border: 2px solid var(--line);
  display: grid; place-items: center;
  font-size: 15px; font-weight: 900; color: var(--muted);
  letter-spacing: -.02em;
  box-shadow: 0 2px 8px rgba(20,28,48,.06);
}
.hps-card-lbl{
  font-size: 12px; font-weight: 700; color: var(--ink-soft);
  white-space: nowrap;
  margin-top: 4px;
}
.hps-card-val{
  font-size: 22px; font-weight: 800; color: var(--ink);
  line-height: 1.05;
  white-space: nowrap;
}
.hps-card-val.strike{
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--red);
}

/* Faded earlier cards */
.hps-card-1, .hps-card-2 { opacity: .9 }
.hps-card-2 { background: #FBFBFD }

/* Final highlighted card */
.hps-card-3{
  flex: 1 1 280px;
  background: linear-gradient(180deg, #FFF7F7 0%, #FFECEC 100%);
  border: 2px solid var(--red);
  box-shadow: 0 12px 32px rgba(232,56,61,.22);
  padding: 22px 18px 18px;
  transform: translateY(-4px);
  justify-content: center;
}
.hps-card-badge{
  position: absolute;
  top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--red); color: #fff;
  font-size: 12px; font-weight: 900; letter-spacing: .14em;
  padding: 6px 16px; border-radius: 999px;
  box-shadow: 0 4px 12px rgba(232,56,61,.4);
  white-space: nowrap;
}
.hps-card-val.final{
  font-size: 46px; font-weight: 900; color: var(--red);
  letter-spacing: -.02em; line-height: 1;
  margin: 4px 0 6px;
}
.hps-tilde{font-size: 24px; margin-left: 2px}

.hps-card-foot{
  display: flex; align-items: center; gap: 8px;
  margin-top: 2px;
  padding: 6px 12px;
  background: var(--yellow);
  border-radius: 999px;
}
.hps-save-tag{
  font-size: 10px; font-weight: 900; letter-spacing: .14em;
  background: var(--ink); color: var(--yellow);
  padding: 2px 8px; border-radius: 4px;
}
.hps-save-amount{
  font-size: 15px; font-weight: 900; color: var(--red);
  white-space: nowrap;
}
.hps-save-suffix{font-size: 11px; margin-left: 4px; color: var(--ink); font-weight: 800}

/* Deduct connector between cards */
.hps-deduct{
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  padding: 0 8px;
  color: var(--muted);
  flex: 0 0 auto;
  min-width: 84px;
}
.hps-deduct.strong{color: var(--red)}
.hps-deduct-amt{
  font-size: 13px; font-weight: 900; color: inherit;
  white-space: nowrap;
}
.hps-deduct.strong .hps-deduct-amt{font-size: 15px}
.hps-deduct-arrow{
  width: 56px; height: 14px; color: inherit;
}
.hps-deduct-lbl{
  font-size: 10px; font-weight: 800; letter-spacing: .08em; color: inherit;
  white-space: nowrap;
  opacity: .85;
}

/* CTA row */
.hero-trust-cta{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  justify-content:center; margin-top: 4px;
}
.hero-cta-meta{
  font-size: 13px; color: var(--ink-soft); font-weight:600;
}
.hero-urgency{
  display:inline-flex; align-items:center; gap:10px;
  padding: 8px 16px; border-radius: 999px;
  background: #FFF7E6; border: 1px dashed var(--orange);
  color: var(--ink); font-size: 13px; line-height: 1.5;
  margin-top: 2px;
  max-width: 100%;
}
.hero-urgency-icon{
  display:inline-grid; place-items:center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--orange); color: #fff;
  font-size: 13px; font-weight: 900;
  flex: 0 0 auto;
  animation: pulse-warn 2s ease-out infinite;
}
@keyframes pulse-warn{
  0%{box-shadow: 0 0 0 0 rgba(243,152,0,.55)}
  100%{box-shadow: 0 0 0 10px rgba(243,152,0,0)}
}
.hero-urgency-text{font-weight: 600}
.hero-urgency-text b{color: var(--red); font-weight: 900}

/* Price card */
.price-card{
  background:#fff; border-radius: 20px; padding: 28px;
  box-shadow: var(--shadow-2);
  border: 1px solid var(--line);
  position:relative;
}
.price-card::before{
  content:""; position:absolute; inset: 0;
  border-radius: 20px; padding: 1px;
  background: linear-gradient(180deg, rgba(232,56,61,.4), transparent 30%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events:none;
}
.price-card-head{
  display:flex; align-items:center; gap:12px;
  padding-bottom: 18px; border-bottom: 1px dashed var(--line); margin-bottom: 18px;
}
.price-card-badge{
  background: var(--navy); color:#fff; font-size:11px; font-weight:800;
  letter-spacing:.14em; padding: 4px 10px; border-radius: 6px;
}
.price-card-head-text{font-weight:700; font-size:14px; color: var(--ink-soft)}
.price-row{display:flex; justify-content:space-between; align-items:center; padding:6px 0}
.price-label{font-size:14px; color: var(--ink-soft); font-weight:600}
.price-label small{display:block; color: var(--muted); font-size:11px; font-weight:500; margin-top:2px}
.price-value{font-size:22px; font-weight:800}
.price-value.strike{font-family: var(--font-num); letter-spacing:.01em}
.price-arrow{
  text-align:center; color: var(--muted); font-size:11px; font-weight:700;
  letter-spacing:.14em; padding: 4px 0;
}
.price-arrow.strong{color: var(--red); font-size:12.5px}
.price-row.final{
  background: linear-gradient(180deg, #FFF7F7 0%, #FFEFEF 100%);
  border-radius: 12px; padding: 16px 18px; margin-top: 6px;
  border: 1px solid rgba(232,56,61,.2);
}
.price-row.final .price-label{color: var(--red-dark); font-weight:800; font-size:15px}
.price-final-note{
  font-size: 11px; color: var(--ink-soft); margin-top: 8px; text-align:right;
  line-height:1.5;
}
.price-value-final{display:flex; align-items:baseline; gap:4px}
.price-value-final .num{
  font-size: 40px; font-weight:900; color: var(--red);
  letter-spacing: -.02em;
}
.price-value-final .from{font-size:18px; font-weight:800; color: var(--red)}
.price-save{
  display:flex; align-items:center; gap:10px; justify-content:center;
  margin-top: 18px; padding-top: 18px; border-top: 1px dashed var(--line);
}
.save-tag{
  background: var(--yellow); color: var(--ink); padding: 4px 10px;
  border-radius: 6px; font-size:11px; font-weight:900; letter-spacing:.14em;
}
.save-amount{font-size: 24px; font-weight:900; color: var(--red)}
.save-suffix{font-size:14px; font-weight:700; color: var(--ink)}

/* =========================================================
   HERO B — CAMPAIGN
   ========================================================= */
.hero-campaign{
  background: #1A2238;
  color:#fff;
  padding: 48px 0 80px;
  overflow:hidden;
}
.hero-campaign-bg{
  position:absolute; inset:0; pointer-events:none; opacity:.18;
}
.hero-campaign-bg .stripe{
  position:absolute; inset:-20%;
  background: repeating-linear-gradient(
    -25deg,
    transparent 0 50px,
    rgba(255,255,255,.05) 50px 60px,
    transparent 60px 110px,
    rgba(232,56,61,.4) 110px 116px
  );
}
.hero-campaign-inner{position:relative}
.hero-campaign-top{margin-bottom:32px; display:flex; justify-content:center}
.urgent-banner{
  display:inline-flex; align-items:center; gap:10px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
  padding: 10px 22px; border-radius: 999px;
  font-size:13px; font-weight:700; letter-spacing:.04em;
}
.urgent-dot{width:8px; height:8px; border-radius:50%; background:var(--red); animation: pulse 1.6s ease-out infinite}

.hero-campaign-grid{
  display:grid; grid-template-columns: 1.25fr .75fr; gap: 32px; align-items:center;
  padding: 12px 0 40px;
}
.campaign-eyebrow{
  color: var(--yellow); font-weight:800; font-size:13px;
  letter-spacing:.16em; text-transform:uppercase; margin-bottom:18px;
}
.campaign-h1{
  font-size: 56px; font-weight:900; line-height:1.22; margin:0;
  letter-spacing:.01em;
}
.campaign-h1 .hl{
  display:inline-flex; align-items:baseline; gap:4px;
  background: linear-gradient(180deg, var(--yellow) 0%, var(--orange) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  font-size: 96px; line-height:1; padding: 6px 0;
  text-shadow: 0 4px 0 rgba(0,0,0,.18);
  white-space: nowrap;
}
.campaign-h1 .hl .num{font-family: var(--font-num); letter-spacing:-.03em; font-size:140px}
.campaign-h1 .hl-unit{font-size:64px; -webkit-text-fill-color: var(--yellow); margin-left:2px}
.campaign-h1-sub{font-size:34px; display:block; margin-top:8px; white-space:nowrap}

.hero-campaign-cta{margin-top: 32px; display:flex; flex-direction:column; align-items:flex-start; gap:10px}
.cta-sub{font-size:12.5px; color: rgba(255,255,255,.62); font-weight:500}

/* Burst */
.hero-campaign-burst{display:flex; justify-content:center; align-items:center}
.burst{position:relative; width: 360px; height: 360px}
.burst-svg{width:100%; height:100%;
  filter: drop-shadow(0 16px 32px rgba(232,56,61,.4));
  animation: spin 24s linear infinite;
}
@keyframes spin{to{transform: rotate(360deg)}}
.burst-text{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:center;
  color: #B91F23; text-align:center;
}
.burst-eyebrow{font-size: 18px; font-weight:900; letter-spacing:.02em; color:#1F2733; white-space:nowrap}
.burst-headline{
  font-size: 110px; font-weight:900; line-height:.9;
  font-family: var(--font-num); color: var(--red); letter-spacing:-.04em;
  margin: 2px 0;
  text-shadow: 4px 4px 0 rgba(0,0,0,.06);
}
.burst-foot{font-size:13px; font-weight:700; color:#1F2733; margin-top:4px; white-space:nowrap}
.burst-foot b{color: var(--red); font-size:16px}

/* Strip */
.hero-campaign-strip{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:0;
  background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  border-radius: 16px; padding: 20px; margin-top: 24px;
}
.strip-item{
  display:flex; flex-direction:column; gap:4px; text-align:center;
  padding: 6px 12px; border-right: 1px solid rgba(255,255,255,.1);
}
.strip-item:last-child{border-right:0}
.strip-item b{font-size:18px; font-weight:800; color:#fff}
.strip-item span{font-size:12px; color: rgba(255,255,255,.7); font-weight:600}
.strip-item .num{font-weight:900}

/* =========================================================
   HERO C — EDITORIAL
   ========================================================= */
.hero-editorial{
  background: #FAF6EE;
  padding: 56px 0 96px;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.hero-editorial-top{
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom: 18px; margin-bottom: 32px;
  border-bottom: 1px solid rgba(0,0,0,.18);
}
.edi-tag{display:flex; gap: 28px; font-family: var(--font-serif); font-weight:700; font-size:14px; color:#1F2733}
.edi-tag span:first-child{color:var(--mikan)}

.hero-editorial-grid{
  display:grid; grid-template-columns: 1.05fr .95fr; gap:56px; align-items:center;
}
.edi-kicker{
  font-family: var(--font-serif); font-weight:700;
  color: var(--mikan); font-size:14px; letter-spacing:.14em; text-transform:uppercase;
  margin-bottom: 18px;
}
.edi-h1{
  font-family: var(--font-serif);
  font-size: 56px; font-weight:900; line-height:1.32; margin:0;
  letter-spacing:.02em; color:#1F2733;
}
.edi-line{display:block; white-space:nowrap}
.edi-line.edi-emph{display:flex; align-items:baseline; flex-wrap:wrap; gap:6px; margin-top:4px; white-space:normal}
.edi-mark{font-size: 26px; font-weight:900; color:#1F2733}
.edi-big{
  font-family: var(--font-num);
  font-size: 132px; font-weight:900; line-height:.92;
  color: var(--mikan); letter-spacing:-.03em;
}
.edi-unit{font-size:40px; font-weight:900; color: var(--mikan); white-space:nowrap}
.edi-unit small{font-size:22px; margin-left:2px}
.edi-lead{
  margin-top: 22px; font-size: 15.5px; line-height: 2.1; color: var(--ink-soft);
  max-width: 480px;
}
.hero-editorial-cta{margin-top: 24px; display:flex; align-items:center; gap:18px}
.edi-cta-meta{font-size:13px; color: var(--ink-soft); font-weight:600}

/* Editorial art */
.hero-editorial-art{position:relative}
.edi-photo-wrap{
  position:relative; height: 540px;
}
.edi-photo{
  position:absolute; border-radius:6px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.edi-photo-label{
  font-family: ui-monospace, monospace; font-size:11px; color:#fff;
  letter-spacing:.08em;
}
.edi-photo-1{
  inset: 0 30% 30% 0;
  background:
    repeating-linear-gradient(45deg, #2B3552 0 10px, #1A2238 10px 20px);
}
.edi-photo-2{
  inset: 40% 0 0 35%;
  background:
    repeating-linear-gradient(-45deg, #FF8B1A 0 10px, #E0780E 10px 20px);
  box-shadow: -8px -8px 0 #FAF6EE;
}
.edi-sticker{
  position:absolute; right: -10px; top: -10px;
  width: 168px; height: 168px;
  background: var(--mikan);
  border-radius: 50%;
  display:grid; place-items:center;
  transform: rotate(-10deg);
  box-shadow: 0 12px 28px rgba(255,139,26,.4);
}
.edi-sticker-inner{text-align:center; color:#fff}
.edi-sticker-eye{font-size:11px; font-weight:900; letter-spacing:.2em; opacity:.9}
.edi-sticker-big{font-size: 24px; font-weight:900; margin: 2px 0}
.edi-sticker-foot{font-size:13px; font-weight:800}
.edi-caption{
  font-family: var(--font-serif); font-weight:700; font-size:13px;
  margin-top: 16px; color: var(--ink-soft); letter-spacing:.04em;
}
.edi-caption-no{
  display:inline-block; background:#1F2733; color:#fff; padding: 2px 8px;
  border-radius: 3px; margin-right: 8px; font-size:11px; letter-spacing:.1em;
}

/* =========================================================
   Campaign Detail (eonet "メリット" merit-card style)
   ========================================================= */
.cdetail{
  background: linear-gradient(180deg, #FFFFFF 0%, #FFF8E8 100%);
  padding: 72px 0 88px;
}

/* Section title (eonet "7つのメリット" style) */
.cdetail-head{margin-bottom: 30px}
.cdetail-section-title{
  display: inline-flex; flex-direction: column; align-items: center; gap: 4px;
  position: relative;
}
.cdetail-section-banner{
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff;
  border: 2px solid var(--red);
  color: var(--red);
  font-size: 14px; font-weight: 900; letter-spacing: .12em;
  padding: 6px 22px;
  border-radius: 999px;
  position: relative;
  box-shadow: 0 4px 12px rgba(232,56,61,.16);
}
.cdetail-section-banner::after{
  content: ""; position: absolute;
  bottom: -10px; left: 50%; transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 10px solid var(--red);
}
.cdetail-section-big{
  font-size: 30px; font-weight: 900; color: var(--ink);
  letter-spacing: .03em; line-height: 1.4;
  display: block; text-align: center;
}
.cdetail-section-em{
  color: var(--red);
  position: relative;
  display: inline-block;
}
.cdetail-section-em::after{
  content: ""; position: absolute;
  left: 0; right: 0; bottom: 2px;
  height: 10px;
  background: var(--yellow);
  z-index: -1;
}

/* Merit card */
.cdetail-card{
  position: relative;
  background: #FFFBF0;
  border: 2px solid var(--line);
  border-radius: 20px;
  padding: 40px 40px 30px;
  max-width: 920px;
  margin: 0 auto;
}

/* Yellow ribbon tab (top-left) */
.cdetail-ribbon{
  position: absolute;
  top: -2px; left: 24px;
  width: 64px; height: 86px;
  background: var(--yellow);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0;
  color: var(--ink);
  text-align: center;
  box-shadow: 0 4px 8px rgba(0,0,0,.08);
}
.cdetail-ribbon::after{
  content: "";
  position: absolute;
  bottom: -14px; left: 0; right: 0;
  height: 14px;
  background: var(--yellow);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 50%, 0 100%);
}
.cdetail-ribbon-lbl{
  font-size: 12px; font-weight: 900; letter-spacing: .04em;
  line-height: 1;
}
.cdetail-ribbon-no{
  font-size: 32px; font-weight: 900; line-height: 1;
  letter-spacing: -.02em;
  margin-top: 4px;
}

/* TOP: pink/coral lead + big headline w/ yellow underline */
.cdetail-top{
  text-align: center;
  padding: 12px 0 24px;
}
.cdetail-top-lead{
  font-size: 17px; font-weight: 800; color: var(--red);
  line-height: 1.7;
  letter-spacing: .02em;
}
.cdetail-top-headline{
  display: inline-flex; align-items: flex-end; justify-content: center; gap: 6px;
  margin-top: 14px;
  white-space: nowrap;
}
.cdetail-top-prefix{
  font-size: 32px; font-weight: 900; color: var(--ink);
  padding-bottom: 6px;
}
.cdetail-top-max{
  font-size: 36px; font-weight: 900; color: var(--ink);
  padding-bottom: 4px;
  letter-spacing: .02em;
}
.cdetail-top-num-wrap{
  display: inline-flex; align-items: flex-end; gap: 0;
  position: relative;
}
.cdetail-top-num-wrap::after{
  content: "";
  position: absolute;
  left: 4px; right: 4px; bottom: 4px;
  height: 14px;
  background: var(--yellow);
  z-index: 0;
}
.cdetail-top-num{
  font-size: 96px; font-weight: 900; color: var(--red);
  letter-spacing: -.03em; line-height: .9;
  position: relative; z-index: 1;
}
.cdetail-top-num-unit{
  font-size: 38px; font-weight: 900; color: var(--red);
  padding-bottom: 8px;
  position: relative; z-index: 1;
  display: inline-flex; align-items: baseline; gap: 2px;
}
.cdetail-top-num-unit small{font-size: 20px}
.cdetail-top-tail{
  font-size: 36px; font-weight: 900; color: var(--ink);
  padding-bottom: 4px;
  position: relative; z-index: 1;
}

/* Yellow horizontal banner */
.cdetail-banner{
  background: var(--yellow);
  text-align: center;
  font-size: 18px; font-weight: 900; color: var(--ink);
  padding: 14px 20px;
  border-radius: 8px;
  letter-spacing: .04em;
  margin-bottom: 28px;
}
.cdetail-banner-mark{
  color: var(--red); margin-left: 2px; font-size: 22px;
}

/* 2 sub-cards with plus */
.cdetail-stamps{
  display: grid;
  grid-template-columns: 1fr 48px 1fr;
  align-items: stretch;
  gap: 0;
}
.cdetail-plus{
  display: grid; place-items: center;
  font-size: 36px; font-weight: 900; color: var(--ink-soft);
}

.cdetail-subcard{
  background: #F2F3F5;
  border-radius: 14px;
  padding: 22px 22px 24px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  text-align: center;
  height: 100%;
  justify-content: flex-start;
}
.cdetail-rate-list{
  display: flex; flex-direction: column; gap: 12px;
  width: 100%;
  margin-top: 4px;
  flex: 1;
  justify-content: center;
}
.cdetail-rate-item{
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: #fff;
  border-radius: 10px;
  padding: 16px 14px;
  width: 100%;
}
.cdetail-subcard-head{
  background: #fff;
  border-radius: 10px;
  padding: 14px 22px;
  font-size: 18px; font-weight: 700; color: var(--ink);
  line-height: 1.6;
  letter-spacing: .04em;
  white-space: nowrap;
  align-self: stretch; text-align: center; box-sizing: border-box;
  min-height: 92px;
  display: flex; align-items: center; justify-content: center;
}
.cdetail-head-inner{display: block}
.cdetail-subcard-head b{color: var(--red); font-weight: 900; font-size: 18px}
.cdetail-subcard-head-plan{
  letter-spacing: .02em;
}
.cdetail-plan-red{color: var(--red); font-weight: 900}
.cdetail-subcard-included{
  text-align: center;
  font-size: 18px; font-weight: 700; color: var(--ink);
  line-height: 1.6; letter-spacing: .04em;
  margin-top: 4px;
  min-height: 68px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.cdetail-subcard-included b{color: var(--red); font-weight: 900; font-size: 22px}

.cdetail-subcard-amount{
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  margin-top: 4px;
}
.cdetail-subcard-prefix{
  font-size: 12px; font-weight: 800; color: var(--ink-soft);
  letter-spacing: .04em;
  white-space: nowrap;
}
.cdetail-subcard-num-row{
  display: inline-flex; align-items: baseline; gap: 6px;
  position: relative;
  white-space: nowrap;
}
.cdetail-subcard-num-row::after{
  content: "";
  position: absolute;
  left: -4px; right: -4px; bottom: 4px;
  height: 10px;
  background: var(--yellow);
  z-index: 0;
}
.cdetail-subcard-num{
  font-size: 38px; font-weight: 900; color: var(--red);
  letter-spacing: -.03em; line-height: 1;
  position: relative; z-index: 1;
}
.cdetail-subcard-num-sm{font-size: 32px; margin-left: 1px}
.cdetail-subcard-off{
  font-size: 24px; font-weight: 900; color: var(--red);
  letter-spacing: .02em;
  position: relative; z-index: 1;
}

/* Left subcard: feature icons row */
.cdetail-subcard-feat{
  display: flex; flex-direction: row; align-items: stretch; justify-content: center;
  gap: 12px;
  margin-top: 4px;
  width: 100%;
}
.cdetail-feat-item{
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px 12px 18px;
  flex: 1;
  box-shadow: 0 4px 14px rgba(20,28,48,.05);
  transition: transform .18s, box-shadow .18s;
}
.cdetail-feat-item:hover{transform: translateY(-4px); box-shadow: 0 14px 30px rgba(20,28,48,.12)}
.cdetail-feat-main{
  font-size: 16px; font-weight: 900; color: var(--ink);
  letter-spacing: .02em; line-height: 1.3; white-space: nowrap;
  margin-top: 2px;
}
.cdetail-feat-tag{
  font-size: 11px; font-weight: 800; letter-spacing: .06em;
  color: var(--red);
  background: var(--red-soft);
  padding: 3px 10px; border-radius: 999px;
  white-space: nowrap;
}
.cdetail-feat-ic{
  width: 56px; height: 56px;
  background: var(--yellow);
  border-radius: 16px;
  display: grid; place-items: center;
  color: var(--ink);
}
.cdetail-feat-ic svg{width: 28px; height: 28px}

/* Right subcard: rate rows */
.cdetail-rate-list{
  display: flex; flex-direction: column; gap: 8px;
  width: 100%;
  margin-top: 4px;
}
.cdetail-rate-cond-lbl{
  font-size: 11.5px; font-weight: 700; color: var(--ink-soft);
  line-height: 1.4; white-space: nowrap;
}
.cdetail-rate-big-line{
  display: inline-flex; align-items: baseline; gap: 8px;
  font-size: 14px; font-weight: 700; color: var(--ink);
  white-space: nowrap;
}
.cdetail-rate-big{
  font-family: var(--font-num);
  font-size: 32px; font-weight: 900; color: var(--red);
  letter-spacing: -.01em; line-height: 1;
}

/* Footer */
.cdetail-foot-note{
  margin-top: 22px;
  font-size: 11.5px; color: var(--muted);
  line-height: 1.7;
  text-align: center;
}
.cdetail-foot-cta{
  margin-top: 20px;
  display: flex; justify-content: center;
}
.features{background: #fff; padding: 96px 0 120px}
.feat-section-head{margin-bottom: 64px; max-width: var(--container)}
.feat-section-head .sec-sub{margin-top: 8px}

.feat-rows{
  display: flex; flex-direction: column;
  gap: 80px;
}
.feat-row{position: relative; padding: 60px 0}
.feat-row-bg{
  position: absolute; inset: 0;
  z-index: 0;
}
/* Alternating subtle backgrounds */
.feat-row:nth-child(1) .feat-row-bg,
.feat-row:nth-child(3) .feat-row-bg{
  background: #F7F6F2;
  right: 80px;
}
.feat-row:nth-child(2) .feat-row-bg{
  background: #F1ECE2;
  left: 80px;
}
.feat-row-inner{
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: .9fr 1.2fr;
  gap: 48px;
  align-items: center;
  max-width: var(--container);
}
.feat-row-reverse .feat-row-inner{
  direction: rtl;
}
.feat-row-reverse .feat-row-inner > *{
  direction: ltr;
}

/* TEXT side */
.feat-row-text{
  display: flex; flex-direction: column; gap: 20px;
  padding: 24px 0;
}
.feat-row-head{
  display: flex; align-items: center; gap: 8px;
}
.feat-row-cat{
  font-family: var(--font-num);
  font-size: 13px; font-weight: 800; letter-spacing: .14em;
  color: var(--red);
  align-self: center;
  line-height: 44px;
}
.feat-row-bar{
  color: var(--ink); font-weight: 400; font-size: 22px;
}
.feat-row-no{
  font-family: var(--font-sans);
  font-size: 44px; font-weight: 700;
  color: var(--ink);
  letter-spacing: .02em;
  line-height: 1;
}
.feat-row-divider{
  display: inline-block;
  width: 1px; height: 36px;
  background: var(--ink);
  opacity: .5;
}
.feat-row-eyebrow{
  display: flex; flex-direction: column; gap: 2px;
  line-height: 1.4;
}
.feat-row-eyebrow-en{
  font-family: var(--font-num);
  font-size: 13px; font-weight: 700; letter-spacing: .18em;
  color: var(--ink);
}
.feat-row-eyebrow-jp{
  font-family: var(--font-serif);
  font-size: 12px; font-weight: 600;
  color: var(--ink-soft);
  letter-spacing: .04em;
}
.feat-row-title{
  font-family: var(--font-sans);
  font-size: 30px; font-weight: 700;
  line-height: 1.55;
  letter-spacing: .04em;
  color: var(--ink);
  margin: 0;
}
.feat-row-body{
  font-size: 14.5px; line-height: 2;
  color: var(--ink-soft);
  margin: 0;
  letter-spacing: .02em;
}

/* MEDIA side */
.feat-row-media{
  position: relative;
}
.feat-row-image{
  position: relative;
  aspect-ratio: 4 / 3;
  background:
    linear-gradient(135deg, rgba(0,0,0,.04) 0%, rgba(0,0,0,.12) 100%),
    repeating-linear-gradient(45deg, #E6E3DA 0 14px, #D9D4C7 14px 28px);
  border-radius: 2px;
  box-shadow: 0 30px 60px rgba(0,0,0,.12), 0 6px 14px rgba(0,0,0,.06);
  display: flex; align-items: flex-end; padding: 18px;
}
.feat-row-image-lbl{
  font-family: ui-monospace, monospace; font-size: 11px;
  letter-spacing: .1em;
  color: #fff;
  background: rgba(0,0,0,.55);
  padding: 4px 10px; border-radius: 3px;
}

/* Carousel — full-bleed sliding mode */
.feat-carousel-slide-mode{
  mask-image: none;
  -webkit-mask-image: none;
  background: #fff;
  border: 1px solid var(--line);
  transform: none;
  width: 100%;
  margin: 0;
  overflow: hidden;
  position: relative;
}
.feat-row:has(.feat-carousel-slide-mode) .feat-row-media{
  margin-right: -120px !important;
}
.feat-carousel-slide-track{
  display: flex;
  height: 100%;
  transition: transform .7s cubic-bezier(.7,.05,.25,1);
}
.feat-carousel-slide-cell{
  flex: 0 0 auto;
  height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: #fff;
}
.feat-carousel-slide-cell img{
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}
.feat-carousel-single-dots{
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  z-index: 3;
  display: flex; gap: 8px;
  background: rgba(0,0,0,.5);
  padding: 6px 12px; border-radius: 999px;
  backdrop-filter: blur(6px);
}
.feat-carousel-single-dot{
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,.55);
  border: 0; padding: 0; cursor: pointer;
  transition: background .2s, transform .2s;
}
.feat-carousel-single-dot.on{
  background: #fff;
  transform: scale(1.25);
}
.feat-carousel-single-dot:hover{background: rgba(255,255,255,.85)}

/* Carousel — horizontal marquee, 3 visible at once */
.feat-carousel{
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 2px;
  box-shadow: 0 30px 60px rgba(0,0,0,.12), 0 6px 14px rgba(0,0,0,.06);
  background: #1A2238;
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  transform: translateX(-40px);
}
.feat-carousel-track{
  position: absolute; top: 0; left: 0; bottom: 0;
  width: max-content;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  animation: featSlide 120s linear infinite;
}
@keyframes featSlide{
  from{transform: translateX(0)}
  to{transform: translateX(calc(-100% / 3 - 10px / 3))}
}
.feat-carousel-cell{
  flex: 0 0 auto;
  height: calc(100% - 20px);
  aspect-ratio: 9 / 16;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 8px 18px rgba(0,0,0,.3);
}
.feat-carousel-cell img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.feat-row:nth-child(3) .feat-carousel-cell{
  align-items: center;
  background: #fff;
}
.feat-row:nth-child(3) .feat-carousel-cell img{
  object-fit: contain;
  object-position: center;
  margin-top: 0;
}
/* 02 video carousel — show top of frame (company logo), crop white margin */
.feat-row:nth-child(2) .feat-carousel-cell{
  align-items: flex-start;
}
.feat-row:nth-child(2) .feat-carousel-cell img{
  object-position: top center;
}

/* 02 video — smartphone-view overlay (play button + like / share UI) */
.feat-carousel-video .feat-carousel-cell{position: relative}
.feat-carousel-video .feat-carousel-cell::after{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.18) 0%, transparent 28%, transparent 62%, rgba(0,0,0,.42) 100%);
  pointer-events: none;
}
.feat-sp-ui{position: absolute; inset: 0; z-index: 2; pointer-events: none}
/* Dynamic Island — phone-like pill at top center */
.feat-sp-island{
  position: absolute; top: 7px; left: 50%; transform: translateX(-50%);
  width: 38%; height: 19px; max-width: 110px;
  background: #050608; border-radius: 999px;
  display: flex; align-items: center; justify-content: flex-end;
  padding-right: 7px;
  box-shadow: 0 1px 3px rgba(0,0,0,.45);
  z-index: 3;
}
.feat-sp-island-cam{
  width: 7px; height: 7px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #2b3a55 0%, #0a0f1c 70%);
  box-shadow: inset 0 0 0 1px rgba(120,150,200,.35);
}
.feat-sp-play{
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255,255,255,.86);
  border: 0; padding: 0;
  display: grid; place-items: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.32);
  backdrop-filter: blur(2px);
}
.feat-sp-play svg{width: 22px; height: 22px; fill: var(--navy); margin-left: 2px}
.feat-sp-side{
  position: absolute; right: 8px; bottom: 12px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.feat-sp-side-act{
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  color: #fff;
}
.feat-sp-side-ic{
  display: grid; place-items: center;
  width: 30px; height: 30px;
}
.feat-sp-side-ic svg{width: 26px; height: 26px; fill: #fff; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4))}
.feat-sp-heart svg{fill: var(--red)}
.feat-sp-side-num{
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
}

/* Image overlap onto the section edge */
.feat-row:nth-child(1) .feat-row-media,
.feat-row:nth-child(3) .feat-row-media{
  margin-right: -80px;
}
.feat-row-reverse .feat-row-media{
  margin-right: 0;
  margin-left: -80px;
}

/* =========================================================
   CTA1
   ========================================================= */
.cta1{
  background: var(--navy); color:#fff; padding: 56px 0;
  position:relative; overflow:hidden;
}
.cta1::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(600px 200px at 0% 100%, rgba(232,56,61,.4) 0%, transparent 60%),
    radial-gradient(600px 240px at 100% 0%, rgba(255,184,52,.18) 0%, transparent 60%);
  pointer-events:none;
}
.cta1-inner{
  display:flex; align-items:center; justify-content:space-between; gap:32px;
  position:relative; flex-wrap: wrap;
}
.cta1-eyebrow{font-size:12px; font-weight:800; letter-spacing:.2em; color: var(--yellow)}
.cta1-title{
  display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
  margin-top: 10px;
}
.cta1-strike{font-size: 26px; font-weight:800; color: rgba(255,255,255,.55); text-decoration: line-through}
.cta1-title .arrow{font-size:24px; color: rgba(255,255,255,.55); font-weight:900}
.cta1-final{font-size: 64px; font-weight:900; color: var(--yellow); letter-spacing:-.02em; line-height:1}
.cta1-tag{
  display:inline-flex; align-items:center;
  background: var(--red); color:#fff; font-size:14px; font-weight:900;
  padding: 6px 14px; border-radius:6px; letter-spacing:.04em;
  transform: translateY(-6px);
  box-shadow: 0 6px 14px rgba(232,56,61,.45);
  white-space: nowrap;
}
.cta1-note{font-size:12px; color: rgba(255,255,255,.62); font-weight:600; white-space:nowrap}
.cta1-unit{font-size:24px; font-weight:900; color: var(--yellow)}
.cta1-sub{font-size:14px; color: rgba(255,255,255,.78); margin-top:10px}
.cta1-sub b{color: var(--yellow)}
.cta1-right{display:flex; flex-direction:column; align-items:flex-end; gap:8px}

/* =========================================================
   EHIME section
   ========================================================= */
.ehime{background: var(--bg-soft)}
.cases-label{
  display:flex; align-items:baseline; gap:14px; margin: 56px 0 24px;
}
.cases-label-no{
  font-family: var(--font-num);
  font-size: 36px; font-weight:900; color: var(--red); letter-spacing:-.02em;
}
.cases-label-title{font-size:22px; font-weight:900; color: var(--ink); white-space:nowrap}

/* cases */
.cases-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap: 24px;
}
.case-card{
  background:#fff; border-radius: 16px; overflow:hidden;
  border:1px solid var(--line); display:flex; flex-direction:column;
  box-shadow: var(--shadow-1);
}
.case-photo{
  aspect-ratio: 16 / 9;
  background:
    repeating-linear-gradient(135deg, #E6E8EC 0 12px, #DDE1E7 12px 24px);
  display:flex; align-items:flex-end; padding: 14px;
  overflow: hidden;
  position: relative;
}
.case-photo img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.case-photo-label{
  font-family: ui-monospace, monospace; font-size:11px; color: var(--ink-soft);
  background: rgba(255,255,255,.85); padding: 4px 8px; border-radius: 4px;
  letter-spacing:.06em;
}
.case-body{padding: 24px 26px 26px}
.case-meta{font-size:11.5px; font-weight:800; color: var(--muted); letter-spacing:.16em; text-transform:uppercase}
.case-company{font-size:22px; font-weight:900; margin: 6px 0 14px}
.case-challenge{font-size:20px; font-weight:800; color: var(--ink); line-height:1.6; margin-bottom: 18px}
.case-company-name{font-size:15px; font-weight:800; color: var(--ink); margin-bottom: 8px; letter-spacing:.02em}
.case-chip{
  flex:0 0 auto; background: var(--red-soft); color: var(--red);
  font-size:11px; font-weight:900; letter-spacing:.1em;
  padding: 3px 10px; border-radius: 5px; margin-top:4px;
  white-space: nowrap;
}
.case-results{
  display:grid; grid-template-columns: repeat(2, auto); gap: 64px;
  justify-content: center;
  padding: 16px 0; border-top:1px dashed var(--line); border-bottom:1px dashed var(--line);
  margin-bottom: 18px;
}
.case-result{text-align:center}
.case-result-num{font-size:66px; font-weight:900; color: var(--red); line-height:1; letter-spacing:-.01em}
.case-result-num small{font-size:27px; margin-left:4px; color: var(--ink)}
.case-result-roi{font-size:18px; font-weight:900; color: var(--red); line-height:1.2}
.case-result-lbl{font-size:20px; font-weight:800; color: var(--ink); margin-bottom:6px; margin-top:0; letter-spacing:.06em}
.case-quote{
  margin: 0 0 10px; font-size:14px; line-height:1.9; color: var(--ink);
  font-weight:500;
}
.case-person{font-size:12px; color: var(--muted); font-weight:600}
.cases-disclaimer{margin-top: 14px; font-size:11px; color: var(--muted); text-align:right}

/* Logo wall */
.logo-grid{
  display:grid; grid-template-columns: repeat(5, 1fr); gap: 16px;
}
.logo-cell{
  background:#fff; border:1px solid var(--line); border-radius: 10px;
  aspect-ratio: 16 / 9;
  display: flex; align-items: center; justify-content: center;
  padding: 14px 16px;
  overflow: hidden;
}
.logo-cell img{
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}

/* Growth */
.growth-grid{
  display:grid; grid-template-columns: .85fr 1.15fr; gap: 32px;
  background: #fff; padding: 32px; border-radius: 18px;
  border: 1px solid var(--line); box-shadow: var(--shadow-1);
}
.growth-stat{margin-bottom: 24px}
.growth-stat-lbl{font-size:13px; font-weight:700; color: var(--ink-soft); letter-spacing:.06em}
.growth-stat-num{
  font-size: 88px; font-weight:900; color: var(--ink); line-height:1;
  letter-spacing:-.02em; margin: 8px 0; display:flex; align-items:baseline; gap:6px;
}
.growth-stat-unit{font-size: 24px; font-weight:900; color: var(--ink)}
.growth-stat-foot{display:flex; align-items:center; gap:12px; margin-top:8px; flex-wrap:wrap}
.growth-pill{
  display:inline-flex; align-items:center; gap:1px;
  background: var(--yellow); color: var(--ink); font-size:12px; font-weight:800;
  padding: 4px 10px; border-radius: 999px;
  white-space: nowrap;
}
.growth-pill b{color: var(--red); font-size:14px}
.growth-from{font-size:11.5px; color: var(--muted); font-weight:600}
.growth-bullets{display:flex; flex-direction:column; gap: 14px; padding-top: 18px; border-top: 1px dashed var(--line)}
.growth-bullet{
  display:flex; gap:14px; align-items:flex-start;
  font-size:13.5px; line-height:1.85; color: var(--ink);
}
.growth-bullet-text{flex:1; min-width:0}
.growth-bullet-no{
  flex: 0 0 auto;
  font-size:13px; font-weight:900; color: var(--red);
  background: var(--red-soft); padding: 4px 10px; border-radius: 6px;
  letter-spacing:.06em;
}
.growth-chart{display:flex; align-items:center; justify-content:center}
.growth-svg{width:100%; height: auto; max-width: 100%}

/* =========================================================
   CTA2 — final
   ========================================================= */
.cta2{
  background: linear-gradient(180deg, #FFF7F7 0%, #FFFFFF 60%);
  text-align:center;
  position:relative;
}
.cta2-inner{max-width: 880px; margin: 0 auto}
.cta2-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:12px; font-weight:800; letter-spacing:.2em;
  color: var(--red);
  white-space: nowrap;
}
.cta2-eyebrow::before, .cta2-eyebrow::after{
  content:""; width:32px; height:2px; background: var(--red);
}
.cta2-title{
  font-size: 48px; font-weight:900; line-height:1.4; margin: 18px 0 36px;
  letter-spacing:.02em;
}
.cta2-title-em{color: var(--red)}
.cta2-title-warn{
  color: var(--red); font-size: 15px; font-weight: 800;
  margin: -18px 0 28px; letter-spacing: .02em;
}

.cta2-price{
  display:flex; align-items:flex-end; justify-content:center; gap:18px;
  background:#fff; border:1px solid var(--line); border-radius: 18px;
  padding: 28px 24px; box-shadow: var(--shadow-2);
  margin-bottom: 24px; flex-wrap:wrap;
}
.cta2-tier{display:flex; flex-direction:column; gap:6px; align-items:center}
.cta2-tier-lbl{font-size:11.5px; font-weight:800; color: var(--muted); letter-spacing:.14em; text-transform:uppercase}
.cta2-tier-val{font-size: 22px; font-weight:800; color: var(--ink-soft)}
.cta2-tier-val.strike{color: var(--muted)}
.cta2-tier-val.final{
  font-size: 56px; font-weight:900; color: var(--red); letter-spacing:-.02em;
  line-height:1;
}
.cta2-tier-val.big{
  font-size: 56px; font-weight:900; color: var(--ink); letter-spacing:-.02em;
  line-height:1;
}
.cta2-tier-val.final-lg{
  font-size: 72px; font-weight:900; color: var(--red); letter-spacing:-.02em;
  line-height:1;
}
.cta2-tier-unit{font-size:24px; margin-left: 4px}
.cta2-arrow{font-size: 22px; font-weight:900; color: var(--muted); padding-bottom: 8px}
.cta2-arrow.strong{color: var(--red); font-size: 28px}
.cta2-arrow-new{
  display: flex; align-items: center; justify-content: center;
  color: var(--red);
  width: 48px; flex: 0 0 auto;
  align-self: center;
}
.cta2-arrow-new svg{width: 40px; height: 24px}
.cta2-final .cta2-tier-lbl{color: var(--red)}

.cta2-rates{
  display:grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin-bottom: 36px;
}
.cta2-rate{
  display:flex; align-items:center; gap:16px; padding: 16px 18px;
  background:#fff; border:1px solid var(--line); border-radius: 12px;
  text-align:left;
}
.cta2-rate-tag{
  flex: 0 0 auto;
  background: var(--red); color:#fff;
  padding: 10px 14px; border-radius: 10px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: 2px; min-width: 76px;
}
.cta2-rate-tag.alt{background: var(--navy)}
.cta2-rate-tag-frac{
  font-family: var(--font-num); font-weight:900; font-size: 26px; line-height:1;
  letter-spacing:-.01em; white-space:nowrap;
}
.cta2-rate-tag-frac b{font-weight:900}
.cta2-rate-tag-lbl{font-size: 10px; font-weight:800; letter-spacing:.14em; opacity:.9}
.cta2-rate-body{font-size:13.5px; color: var(--ink-soft); line-height:1.7; font-weight:600}

.cta2-cta{display:flex; flex-direction:column; align-items:center; gap:14px}
.cta2-cta-meta{font-size:13px; color: var(--ink-soft); font-weight:600; display:flex; gap:10px; align-items:center}
.cta2-dot{color: var(--muted)}

/* =========================================================
   Footer
   ========================================================= */
.footer{background:#0F1424; color:#B6BCC9; padding: 56px 0 40px}
.footer-inner{display:flex; gap: 48px; justify-content:space-between; flex-wrap:wrap}
.footer .brand-mark{background: var(--red)}
.footer .brand-text, .footer .brand-text small{color:#fff}
.footer-note{font-size:11.5px; line-height:1.85; margin: 14px 0 0; color: rgba(255,255,255,.55); max-width: 540px}
.footer-links{display:flex; flex-direction:column; gap:8px; font-size:12.5px}
.footer-links a{color: rgba(255,255,255,.75)}
.footer-links a:hover{color:#fff}

/* =========================================================
   モバイル対応（768px 以下）
   1280px 固定デザインを縦積みに組み替え、巨大な見出しを縮小する。
   index.html の zoom フィットはこの幅では無効化されている。
   ========================================================= */
@media (max-width: 768px){
  /* --- 全体 --- */
  section{padding: 48px 0}
  .container{padding: 0 18px}
  h2.sec-title{font-size: 24px; line-height: 1.45}
  .sec-sub{font-size: 14px}
  .sec-head{margin-bottom: 32px}
  .sec-head-center{margin: 0 auto 36px}
  .eyebrow{font-size: 11px; letter-spacing: .12em}

  /* CTA ボタンはタップしやすいよう横幅いっぱいに */
  .btn-cta{width: 100%; justify-content: center; padding: 16px 20px; font-size: 16px}
  .btn-lg, .btn-xl{width: 100%; padding: 18px 20px; font-size: 16px}

  /* --- TOP BAR --- (PC のみ追従。スマホは通常配置) */
  .topbar{position: static}
  .topbar-inner{height: 56px}
  .topbar-left{gap: 8px; margin-left: -6px}
  .brand-logo{height: 26px}
  .topbar-right{gap: 10px}
  .topbar-tel{display: none}
  .topbar-cta{padding: 8px 13px; font-size: 12px; gap: 4px}
  .topbar-cta-arrow{font-size: 14px}

  /* --- HERO (TRUST) --- */
  .hero-mf{min-height: 0}
  .hero-mf-inner{
    grid-template-columns: 1fr;
    gap: 24px;
    padding-top: 28px;
    padding-bottom: 28px;
    padding-left: 18px;
    padding-right: 18px;
  }
  .hero-mf-left{max-width: 100%; gap: 12px}
  .hero-mf-eligibility{margin-top: 4px}
  .hero-mf-eligibility-stamp,
  .hero-mf-eligibility-stamp b{font-size: 20px}
  .hero-mf-eligibility-band{font-size: 17px; padding: 8px 16px 8px 13px; gap: 7px}
  .hero-mf-eligibility-band b{font-size: 19px}
  .hero-mf-eligibility-band-ic{width: 22px; height: 22px; font-size: 13px}
  .hero-mf-pitch{font-size: 17px; line-height: 1.5; white-space: normal}
  .hero-mf-pitch b{font-size: 17px}
  .hero-mf-flow{margin-bottom: 0}
  .hero-mf-h1{
    font-size: 24px;
    flex-wrap: wrap;
    white-space: normal;
    margin-top: 4px;
  }
  .hero-mf-h1-num .num{font-size: 56px}
  .hero-mf-h1-unit{font-size: 20px}
  .hero-mf-cta{margin-top: 4px}
  .hero-mf-btn-xl{
    width: 100%;
    justify-content: center;
    padding: 18px 24px;
    font-size: 17px;
  }
  /* 装飾用のモックアップ（PC・スマホ画像）はモバイルでは非表示 */
  .hero-mf-right{display: none}

  /* --- CAMPAIGN DETAIL --- */
  .cdetail{padding: 48px 0 56px}
  .cdetail-card{padding: 24px 18px 20px}
  .cdetail-ribbon{left: 12px; width: 52px; height: 70px}
  .cdetail-ribbon-no{font-size: 26px}
  .cdetail-section-big{font-size: 21px}
  .cdetail-top-headline{flex-wrap: wrap; white-space: normal}
  .cdetail-top-prefix,
  .cdetail-top-max,
  .cdetail-top-tail{font-size: 22px}
  .cdetail-top-num{font-size: 56px}
  .cdetail-top-num-unit{font-size: 24px}
  .cdetail-top-num-unit small{font-size: 15px}
  .cdetail-banner{font-size: 14px; padding: 12px 14px}
  .cdetail-banner-mark{font-size: 17px}
  .cdetail-stamps{grid-template-columns: 1fr; gap: 14px}
  .cdetail-plus{font-size: 28px; padding: 4px 0}
  .cdetail-subcard{padding: 18px 16px 20px}
  .cdetail-subcard-head{white-space: normal; font-size: 16px}
  .cdetail-subcard-head b{font-size: 19px}
  .cdetail-subcard-num{font-size: 32px}
  .cdetail-subcard-num-sm{font-size: 26px}
  .cdetail-subcard-off{font-size: 20px}
  /* 求人掲載 / 採用動画 / 採用PR記事：スマホでは枠を1つにまとめ、中央寄せの行で並べる */
  .cdetail-subcard-feat{
    flex-direction: column;
    gap: 0;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(20,28,48,.05);
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
  }
  .cdetail-feat-item{
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 9px 12px;
    border-bottom: 1px solid var(--line);
  }
  .cdetail-feat-item:last-child{border-bottom: 0}
  .cdetail-feat-item:hover{transform: none; box-shadow: none}
  .cdetail-feat-ic{width: 32px; height: 32px; border-radius: 9px; flex: 0 0 auto}
  .cdetail-feat-ic svg{width: 18px; height: 18px}
  .cdetail-feat-main{margin-top: 0; flex: 0 0 auto; text-align: center}
  .cdetail-feat-tag{flex: 0 0 auto}
  .cdetail-rate-big{font-size: 26px}
  /* CTA（KV・コンテンツ下とも）ボタン内の文字を中央に揃える */
  .hero-mf-btn-xl .hero-mf-btn-lbl{flex: 0 0 auto; text-align: center}

  /* --- FEATURES --- */
  .features{padding: 48px 0 56px}
  .feat-section-head{margin-bottom: 32px}
  .feat-rows{gap: 40px}
  .feat-row{padding: 28px 0}
  .feat-row-inner{
    grid-template-columns: 1fr;
    gap: 24px;
    direction: ltr;
  }
  .feat-row-reverse .feat-row-inner{direction: ltr}
  .feat-row-no{font-size: 32px}
  .feat-row-title{font-size: 21px; line-height: 1.5}
  .feat-row-body{font-size: 14px}
  /* セクション端へのはみ出しを解除 */
  .feat-row:nth-child(1) .feat-row-media,
  .feat-row:nth-child(3) .feat-row-media,
  .feat-row-reverse .feat-row-media{margin-left: 0; margin-right: 0}
  .feat-row:has(.feat-carousel-slide-mode) .feat-row-media{margin-right: 0 !important}
  .feat-carousel{transform: none}
  .feat-row:nth-child(1) .feat-row-bg,
  .feat-row:nth-child(3) .feat-row-bg{right: 0}
  .feat-row:nth-child(2) .feat-row-bg{left: 0}

  /* --- CTA1 --- */
  .cta1{padding: 40px 0}
  .cta1-inner{flex-direction: column; align-items: flex-start; gap: 20px}
  .cta1-final{font-size: 44px}
  .cta1-strike{font-size: 20px}
  .cta1-right{width: 100%; align-items: stretch}

  /* --- EHIME / CASES --- */
  .cases-label{margin: 36px 0 20px}
  .cases-label-no{font-size: 28px}
  .cases-label-title{font-size: 18px; white-space: normal}
  .cases-grid{grid-template-columns: 1fr}
  .case-body{padding: 20px}
  .case-company{font-size: 19px}
  .case-challenge{font-size: 17px}
  .case-results{gap: 32px}
  .case-result-num{font-size: 48px}
  .case-result-num small{font-size: 20px}
  .case-result-lbl{font-size: 16px}

  /* ロゴウォール：5列 → 2列 */
  .logo-grid{grid-template-columns: repeat(2, 1fr)}

  /* 成長グラフ */
  .growth-grid{grid-template-columns: 1fr; padding: 24px; gap: 24px}
  .growth-stat-num{font-size: 56px}
  .growth-stat-unit{font-size: 20px}

  /* --- CTA2 --- */
  .cta2-title{font-size: 26px; margin: 14px 0 24px}
  .cta2-price{padding: 20px 16px; gap: 12px}
  .cta2-tier-val.final,
  .cta2-tier-val.big{font-size: 40px}
  .cta2-tier-val.final-lg{font-size: 48px}
  .cta2-tier-val{font-size: 18px}
  .cta2-rates{grid-template-columns: 1fr}
  .cta2-rate-tag-frac{font-size: 22px}

  /* --- FOOTER --- */
  .footer{padding: 40px 0 32px}
  .footer-inner{flex-direction: column; gap: 28px}

  /* --- HERO CAMPAIGN（バリアント B） --- */
  .hero-campaign-grid{grid-template-columns: 1fr; gap: 24px}
  .campaign-h1{font-size: 30px; line-height: 1.3}
  .campaign-h1 .hl{font-size: 56px}
  .campaign-h1 .hl .num{font-size: 72px}
  .campaign-h1 .hl-unit{font-size: 36px}
  .campaign-h1-sub{font-size: 22px; white-space: normal}
  .hero-campaign-cta{align-items: stretch}
  .burst{width: 240px; height: 240px}
  .burst-headline{font-size: 64px}
  .hero-campaign-strip{grid-template-columns: repeat(2, 1fr); gap: 12px 0}
  .strip-item:nth-child(2n){border-right: 0}

  /* --- HERO EDITORIAL（バリアント C） --- */
  .hero-editorial{padding: 40px 0 56px}
  .edi-tag{gap: 14px; font-size: 12px; flex-wrap: wrap}
  .hero-editorial-grid{grid-template-columns: 1fr; gap: 32px}
  .edi-h1{font-size: 30px; line-height: 1.35}
  .edi-line{white-space: normal}
  .edi-big{font-size: 64px}
  .edi-mark{font-size: 20px}
}