/* === print / @page styles === */
  @page { size: A4 portrait; margin: 8mm; }
  @media print{
    html, body{
      -webkit-print-color-adjust: exact !important;
      print-color-adjust: exact !important;
      background: #fff !important;
    }
    .site-header{ position: static !important; box-shadow: none !important;}
    #tweaks, .nav-cta .btn-mini, .nav-cta nav{ display: none !important;}
    .hero{ min-height: auto !important;}
    .hero-inner{ padding: 40px 24px 60px !important;}
    .hero-side, .orn-sun, .bg-waves{ display:none !important;}
    section{ padding: 40px 0 !important; break-inside: avoid;}
    .point-row{ break-inside: avoid; page-break-inside: avoid;}
    .hero{ break-after: page;}
    .targets{ break-after: page;}
    .points{ break-before: page;}
    .point-row{ break-after: page;}
    .point-row:last-child{ break-after: auto;}
    .req{ break-before: page;}
    .voices{ break-before: page;}
    .flow{ break-before: page;}
    .form-sec{ break-before: page;}
    a[href^="#"]::after{ content: "";}
    .fade{ opacity: 1 !important; transform: none !important;}
    .cta{ box-shadow: none !important;}
    .req-card{ box-shadow: none !important; border: 1px solid #ddd !important;}
    .reviews{ box-shadow: none !important;}
    .flow-step + .flow-step::before{ display:none !important;}
    .form-card .cta[disabled]{ display:none;}
  }

/* === main styles === */
  :root{
    /* Sky palette (default) */
    --c-primary: #0EB4E9;
    --c-primary-deep: #0084C7;
    --c-navy: #0B2A4A;
    --c-ink: #0E2235;
    --c-sub: #4E6A84;
    --c-bg: #FFFFFF;
    --c-bg-soft: #F3FAFE;
    --c-bg-band: #E9F6FD;
    --c-sand: #FAF6EC;
    --c-line: #D6E6F1;
    --c-cta: #FF8A1F;
    --c-cta-deep: #E66A00;
    --c-cta-ink: #FFFFFF;
    --c-yellow: #FFD43B;
    --c-accent: #0EB4E9;

    --font-jp: "Noto Sans JP", system-ui, sans-serif;
    --font-num: "Barlow Condensed", "Noto Sans JP", sans-serif;
    --font-display: "Bebas Neue", "Barlow Condensed", sans-serif;

    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 24px;
    --radius-xl: 40px;
    --shadow-card: 0 10px 30px -12px rgba(11,42,74,.18), 0 2px 6px rgba(11,42,74,.06);
    --shadow-cta: 0 14px 28px -10px rgba(255,138,31,.55);

    --maxw: 1120px;
  }

  /* ---- palette variants ---- */
  html[data-palette="navy"]{
    --c-primary:#12477A;
    --c-primary-deep:#0B2A4A;
    --c-navy:#061B33;
    --c-bg-soft:#F1F5FA;
    --c-bg-band:#0B2A4A;
    --c-line:#CDD8E4;
    --c-accent:#3AA6E0;
  }
  html[data-palette="aqua"]{
    --c-primary:#10D1C6;
    --c-primary-deep:#0AA59B;
    --c-navy:#0F3B3E;
    --c-bg-soft:#EEFBF9;
    --c-bg-band:#D9F5F2;
    --c-cta:#FFC531;
    --c-cta-deep:#E0A800;
    --c-cta-ink:#0F3B3E;
    --c-accent:#10D1C6;
  }
  html[data-font="zen"]{ --font-jp: "Zen Kaku Gothic New", system-ui, sans-serif; }
  html[data-font="mplus"]{ --font-jp: "M PLUS 1p", system-ui, sans-serif; }

  /* ---- ornament toggle ---- */
  html[data-ornament="minimal"] .orn{ display:none !important; }
  html[data-ornament="minimal"] .tilt{ transform:none !important; }
  html[data-ornament="minimal"] .sticker{ border-radius: 14px !important; transform:none !important; }

  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{
    font-family: var(--font-jp);
    color: var(--c-ink);
    background: var(--c-bg);
    line-height: 1.75;
    font-feature-settings: "palt";
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }
  img{max-width:100%;display:block}
  a{color:inherit}

  .wrap{max-width: var(--maxw); margin: 0 auto; padding: 0 24px;}

  /* ========== HEADER ========== */
  .site-header{
    position: sticky; top:0; z-index: 50;
    background: rgba(255,255,255,.9);
    backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--c-line);
  }
  .site-header .wrap{ display:flex; align-items:center; justify-content:space-between; padding: 14px 24px; max-width: 1280px;}
  .logo-row{display:flex; align-items:center; gap:12px}
  .logo-row img{height:22px;}
  .logo-sub{ font-size: 11px; color: var(--c-sub); letter-spacing:.12em}
  .nav-cta{ display:flex; align-items:center; gap:18px;}
  .nav-cta nav{ display:flex; gap:22px; font-size:13px; color: var(--c-sub);}
  .nav-cta nav a{ text-decoration:none;}
  .nav-cta nav a:hover{ color: var(--c-primary-deep);}
  .btn-mini{
    background: var(--c-cta); color: var(--c-cta-ink);
    padding: 10px 18px; border-radius: 999px;
    font-weight:700; font-size:13px; text-decoration:none;
    white-space: nowrap;
    box-shadow: 0 6px 14px -6px rgba(255,138,31,.6);
    transition: transform .15s ease, box-shadow .15s ease, background .15s;
  }
  .btn-mini:hover{ transform: translateY(-1px); box-shadow: 0 10px 18px -6px rgba(255,138,31,.7); background: var(--c-cta-deep);}
  @media (max-width: 720px){ .nav-cta nav{display:none} }

  /* ========== CTA BUTTON ========== */
  .cta{
    display:inline-flex; flex-direction:column; align-items:center; gap:4px;
    padding: 20px 48px 22px;
    background: var(--c-cta);
    color: var(--c-cta-ink);
    border-radius: 999px;
    font-weight: 900; font-size: 22px;
    text-decoration:none; border:none; cursor:pointer;
    letter-spacing: .04em;
    box-shadow: var(--shadow-cta);
    position: relative;
    transition: transform .2s cubic-bezier(.2,.9,.3,1.4), box-shadow .2s, background .2s;
    font-family: var(--font-jp);
  }
  .cta:hover{ transform: translateY(-3px) scale(1.02); background: var(--c-cta-deep); box-shadow: 0 20px 36px -10px rgba(255,138,31,.7);}
  .cta:active{ transform: translateY(1px) scale(.99); box-shadow: 0 6px 14px -6px rgba(255,138,31,.6);}
  .cta .brackets{ font-size: 12px; font-weight:700; opacity:.92; display:flex; gap:.5em; letter-spacing:.15em}
  .cta .arrow{
    display:inline-block; margin-left: 12px; transition: transform .2s;
  }
  .cta:hover .arrow{ transform: translateX(4px);}
  .cta::after{
    content:""; position:absolute; inset:0; border-radius:inherit;
    box-shadow: inset 0 -4px 0 rgba(0,0,0,.12);
    pointer-events:none;
  }

  /* ========== HERO (FV) ========== */
  .hero{
    position: relative;
    background: var(--c-navy);
    color: #fff;
    overflow: hidden;
  }
  .hero-media{
    position:absolute; inset:0;
    background-image: url("../images/hero-bg.jpg");
    background-size: cover; background-position: center;
  }
  .hero-media::after{
    content:""; position:absolute; inset:0;
    background: linear-gradient(100deg, rgba(11,42,74,.78) 0%, rgba(14,180,233,.35) 55%, rgba(11,42,74,.2) 100%);
  }
  .hero-inner{
    position: relative; z-index: 2;
    padding: 56px 24px 96px;
    max-width: 1200px; margin: 0 auto;
  }
  .hero-eyebrow{
    display:inline-flex; align-items:center; gap:10px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.35);
    padding: 8px 16px; border-radius: 999px;
    font-size: 12px; letter-spacing:.18em; font-weight:700;
    backdrop-filter: blur(6px);
  }
  .hero-eyebrow .dot{ width:8px; height:8px; background: var(--c-primary); border-radius:999px; box-shadow: 0 0 0 4px rgba(14,180,233,.3);}
  .hero h1{
    font-size: clamp(34px, 6vw, 76px);
    font-weight: 900;
    line-height: 1.18;
    letter-spacing: .01em;
    margin: 18px 0 14px;
    text-shadow: 0 4px 24px rgba(0,0,0,.35);
  }
  .hero h1 .h1-sub{
    display: block;
    font-size: clamp(19px, 2.6vw, 32px);
    font-weight: 800;
    line-height: 1.35;
    opacity: .9;
    margin-bottom: 6px;
  }
  .hero h1 .h1-main{
    display: block;
    font-size: clamp(23px, 3.4vw, 42px);
    font-weight: 900;
    line-height: 1.4;
  }
  .hero h1 .h1-main .hl{
    font-size: clamp(42px, 8vw, 94px);
    line-height: 1.04;
    vertical-align: -.04em;
  }
  .hero h1 .h1-tail{ display: inline; }
  .hero h1 .hl{
    color: var(--c-primary);
    position: relative;
    display: inline-block;
  }
  .hero h1 .num{
    font-family: var(--font-num);
    font-size: 1.25em;
    font-weight: 900;
    color: #fff;
    background: var(--c-cta);
    padding: 0 .12em;
    border-radius: 10px;
    display: inline-block;
    transform: rotate(-2deg);
    margin: 0 .04em;
    line-height: 1;
    vertical-align: -.06em;
  }
  .hero .lead{
    font-size: clamp(15px, 1.5vw, 19px);
    max-width: 620px;
    color: rgba(255,255,255,.9);
    margin: 0 0 24px;
    line-height: 1.85;
  }
  .hero-badges{
    display:flex; flex-wrap:wrap; gap: 12px;
    margin: 0 0 28px;
  }
  .hero-badge{
    background: rgba(255,255,255,.97); color: var(--c-navy);
    padding: 13px 20px 13px 16px;
    border-radius: 12px;
    border-left: 5px solid var(--c-cta);
    font-weight: 800; font-size: 16px;
    display:inline-flex; align-items:center; gap: 10px;
    position: relative;
  }
  .hero-badge .ico{
    width: 30px; height: 30px; border-radius:999px;
    background: var(--c-cta); color:#fff;
    display:grid; place-items:center; font-size:16px;
    flex: 0 0 30px;
  }
  .hero-badge .ico svg{ width: 18px; height: 18px; display: block;}
  .hero-badge.yellow{ border-left-color: var(--c-yellow); }
  .hero-badge.yellow .ico{ background: var(--c-yellow); color: var(--c-navy); }
  .hero-badge.aqua{ border-left-color: var(--c-primary); }
  .hero-badge.aqua .ico{ background: var(--c-primary); color:#fff; }

  .hero-cta-block{ display:flex; flex-direction:column; align-items:center; gap:14px;}
  .hero-cta-block .cta{ font-size: 24px; }
  .hero-cta-block .cta .brackets{ font-size: 14px; }
  .hero-cta-note{ font-size:12px; letter-spacing:.1em; color: rgba(255,255,255,.75);}

  /* wave divider */
  .wave{
    position: absolute; bottom:-1px; left:0; right:0;
    width:100%; height: 90px; display:block;
  }
  .wave path{ fill: var(--c-bg); }

  .hero-side{
    position:absolute; right: -60px; top: 60px; z-index:1;
    width: 520px; max-width: 42vw; aspect-ratio: 4/5;
    background-image: url("../images/portrait.jpg");
    background-size: cover; background-position: center;
    border-radius: var(--radius-xl);
    border: 6px solid rgba(255,255,255,.1);
    box-shadow: 0 30px 60px -20px rgba(0,0,0,.5);
    transform: rotate(2deg);
  }
  @media (max-width: 960px){ .hero-side{ display:none;}}

  /* sun orn */
  .orn-sun{
    position:absolute; top: 40px; right: 40px;
    width: 80px; height: 80px; border-radius: 999px;
    background: var(--c-yellow);
    box-shadow: 0 0 60px rgba(255,212,59,.5);
    z-index: 2;
  }

  /* ========== COMMON SECTION ========== */
  section{ padding: 110px 0; position:relative;}
  @media (max-width:720px){ section{ padding: 72px 0;}}

  .section-eyebrow{
    display:inline-block;
    font-family: var(--font-num);
    font-size: 14px; font-weight: 700; letter-spacing: .3em;
    color: var(--c-primary-deep);
    padding: 4px 14px;
    border: 1px solid var(--c-primary);
    border-radius: 999px;
    margin-bottom: 14px;
  }
  .section-title{
    font-size: clamp(28px, 3.5vw, 42px);
    font-weight: 900; line-height: 1.35;
    margin: 0 0 18px;
    letter-spacing: .01em;
  }
  .section-title .hl{ color: var(--c-primary-deep); position: relative;}
  .section-title .hl::after{
    content:""; position:absolute; left:0; right:0; bottom: -4px;
    height: 8px; background: var(--c-yellow); opacity:.6; z-index:-1;
    border-radius: 4px;
  }
  .section-sub{ color: var(--c-sub); font-size: 16px; max-width: 620px;}

  .section-head{ text-align:center; margin-bottom: 64px;}
  .section-head .section-sub{ margin: 0 auto;}

  /* ========== TARGETS (speech bubbles) ========== */
  .targets{ background: var(--c-bg-soft); position:relative;}
  .targets .orn-stripe{
    position:absolute; top:0; left:0; right:0; height: 6px;
    background: repeating-linear-gradient(90deg, var(--c-primary) 0 40px, var(--c-yellow) 40px 80px, var(--c-cta) 80px 120px, var(--c-navy) 120px 160px);
  }
  .bubble-row{
    display:grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
    margin-top: 40px;
  }
  @media (max-width: 860px){ .bubble-row{ grid-template-columns: 1fr; gap: 80px;}}
  .bubble{
    background:#fff;
    border: 2px solid var(--c-line);
    border-radius: 22px;
    padding: 38px 28px 32px;
    position: relative;
    box-shadow: var(--shadow-card);
    font-size: 17px; font-weight: 700; line-height: 1.85;
  }
  .bubble .tag{
    display:block; font-size: 15px; letter-spacing:.16em;
    color: var(--c-cta); font-weight:900; margin-bottom: 14px;
    font-family: var(--font-num);
  }
  .bubble .q-icon{
    position:absolute; top:-22px; left: 28px;
    width:52px; height:52px; border-radius: 999px;
    background: var(--c-cta); color:#fff;
    display:grid; place-items:center; font-weight: 900;
    font-family: var(--font-num); font-size: 30px; line-height: 1;
    box-shadow: 0 6px 14px -4px rgba(255,138,31,.5);
  }
  .bubble::after{
    content:""; position:absolute; bottom: -14px; left: 40px;
    width: 26px; height: 26px; background:#fff;
    border-right: 2px solid var(--c-line);
    border-bottom: 2px solid var(--c-line);
    transform: rotate(45deg);
  }
  .bubble .persona{
    position:absolute; right: -12px; bottom: -40px;
    display: flex; align-items:center; gap:8px;
    background:#fff; padding: 6px 12px 6px 6px;
    border-radius: 999px;
    box-shadow: var(--shadow-card);
    font-size: 14px; font-weight: 700; color: var(--c-navy);
  }
  .bubble .persona .pf{
    width: 36px; height:36px; border-radius:999px;
    background: var(--c-bg-band);
    background-size: cover; background-position:center;
  }
  .targets .kicker{
    margin-top: 90px; text-align:center;
    font-size: clamp(22px, 2.6vw, 30px); font-weight:900;
    color: var(--c-navy);
  }
  .targets .kicker .hl{
    display:inline-block;
    background: var(--c-yellow); padding: 4px 14px; border-radius: 10px;
    transform: rotate(-1deg); margin: 0 4px;
  }

  /* ========== POINTS ========== */
  .points{ background:#fff;}
  .points .section-head{ margin-bottom: 40px;}
  .points .section-eyebrow{
    font-size: 20px; letter-spacing: .26em;
    padding: 7px 22px; margin-bottom: 18px;
  }
  .point-row{
    display:grid; grid-template-columns: 1fr 1fr;
    gap: 70px;
    margin-top: 80px;
    align-items: center;
  }
  .point-row.reverse{ grid-template-columns: 1fr 1fr;}
  .point-row.reverse .p-media{ order: 2;}
  .point-row.reverse .p-body{ order: 1;}
  @media (max-width: 860px){
    .point-row, .point-row.reverse{ grid-template-columns: 1fr; gap: 30px;}
    .point-row.reverse .p-media{ order: 0;}
  }
  .p-num{
    font-family: var(--font-num);
    font-size: 14px; font-weight: 800; letter-spacing: .3em;
    color: var(--c-primary-deep);
    margin-bottom: 4px;
  }
  .p-num .big{
    font-family: var(--font-display);
    font-size: 96px; line-height: .9;
    display:block; color: var(--c-primary);
    letter-spacing: 0;
    margin-top: -6px;
  }
  .p-body h3{
    font-size: clamp(24px, 3vw, 36px);
    font-weight: 900; line-height: 1.4;
    margin: 18px 0 18px;
  }
  .p-body h3 .hl{
    background: linear-gradient(transparent 64%, var(--c-yellow) 64%);
    padding: 0 2px;
  }
  .p-body p{
    color: var(--c-sub); font-size: 16px;
    margin: 0 0 24px; line-height: 1.9;
  }
  .p-features{ list-style:none; padding:0; margin: 0; display:grid; gap: 14px;}
  .p-features li{
    display:flex; gap:14px; align-items:flex-start;
    padding: 16px 18px;
    background: var(--c-bg-soft);
    border-radius: 14px;
    border-left: 4px solid var(--c-primary);
    font-weight: 600;
  }
  .p-features .check{
    flex: 0 0 26px; height: 26px; border-radius: 999px;
    background: var(--c-primary); color: #fff;
    display:grid; place-items:center; font-weight:900; font-size: 14px;
    margin-top: 2px;
  }
  .p-features strong{ display:block; font-weight:900; color: var(--c-ink);}
  .p-features span{ font-size: 13px; color: var(--c-sub); font-weight: 500;}

  /* media */
  .p-media{
    position: relative;
  }
  .p-photo{
    width:100%; aspect-ratio: 4/3;
    background-size: cover; background-position: center;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
  }
  .p-photo.small{
    position:absolute; width: 44%; aspect-ratio: 1; right: -12px; bottom: -24px;
    border-radius: var(--radius-md);
    border: 6px solid #fff;
  }
  .p-stat{
    position: absolute;
    background:#fff; padding: 16px 22px;
    border-radius: 18px;
    box-shadow: var(--shadow-card);
    text-align:center; z-index:2;
  }
  .p-stat .num{ font-family: var(--font-num); font-size: 44px; font-weight:900; color: var(--c-primary-deep); line-height:1;}
  .p-stat .num .unit{ font-size: 18px; margin-left: 2px;}
  .p-stat .label{ display:block; font-size: 11px; color: var(--c-sub); margin-top: 4px; letter-spacing:.08em;}

  /* ========== REQUIREMENTS ========== */
  .req{ background: var(--c-navy); color:#fff; position: relative; overflow: hidden;}
  .req::before{
    content:""; position:absolute; inset:0;
    background-image: radial-gradient(circle at 20% 10%, rgba(14,180,233,.2) 0, transparent 40%),
                      radial-gradient(circle at 90% 90%, rgba(255,138,31,.15) 0, transparent 50%);
  }
  .req .wrap{ position: relative; z-index: 1;}
  .req .section-eyebrow{ color: var(--c-primary); border-color: var(--c-primary);}
  .req .section-title .hl::after{ opacity:.9;}
  .req-grid{
    display:grid; grid-template-columns: 5fr 7fr; gap: 40px;
    margin-top: 48px;
  }
  @media (max-width: 860px){ .req-grid{ grid-template-columns: 1fr;}}
  .req-left h3{
    font-size: 24px; font-weight: 900; line-height:1.5; margin: 0 0 20px;
  }
  .req-left p{ color: rgba(255,255,255,.8); font-size: 15px; margin: 0 0 28px; line-height:1.9;}
  .req-card{
    background:#fff; color: var(--c-ink);
    padding: 40px; border-radius: var(--radius-lg);
    box-shadow: 0 30px 60px -20px rgba(0,0,0,.45);
  }
  .req-card dl{ margin:0; display:grid; grid-template-columns: 140px 1fr; row-gap: 18px; column-gap: 20px;}
  .req-card dt{
    font-size: 12px; font-weight:900; letter-spacing:.1em;
    color: var(--c-primary-deep);
    padding-top: 2px;
    border-right: 1px dashed var(--c-line);
    padding-right: 12px;
  }
  .req-card dd{ margin:0; font-size: 14px; line-height: 1.85;}
  .req-card dd strong{ color: var(--c-ink); font-size: 15px;}
  .req-card .salary{
    font-family: var(--font-num);
    font-size: 40px; font-weight: 900; color: var(--c-cta);
    line-height: 1;
  }
  .req-card .salary small{ font-size: 14px; color: var(--c-sub); margin-left: 6px;}
  .req-left .cta{ font-size: 24px; }
  .req-left .cta .brackets{ font-size: 14px; }

  /* requirements accordion */
  .req-card .req-item{ border-bottom: 1px solid var(--c-line); }
  .req-card .req-item:last-child{ border-bottom: none; }
  .req-card .req-item summary{
    list-style: none; cursor: pointer;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 16px 4px;
    font-size: 15px; font-weight: 900; letter-spacing: .04em;
    color: var(--c-ink);
  }
  .req-card .req-item summary::-webkit-details-marker{ display: none; }
  .req-card .req-item summary::after{
    content: "＋"; flex: 0 0 auto;
    color: var(--c-primary-deep); font-weight: 900; font-size: 20px; line-height: 1;
    transition: transform .2s;
  }
  .req-card .req-item[open] summary::after{ content: "−"; }
  .req-card .req-item summary:hover{ color: var(--c-primary-deep); }
  .req-card .req-dd{
    padding: 0 4px 18px; font-size: 14px; line-height: 1.85; color: var(--c-ink);
  }
  .req-card .req-dd strong{ color: var(--c-ink); }
  @media (max-width: 520px){
    .req-card{ padding: 28px 22px;}
  }

  /* ========== VOICES (LINE-style review panel) ========== */
  .voices{ background: var(--c-bg-soft);}
  .reviews{
    margin-top: 48px;
    background: var(--c-navy);
    color: #fff;
    border-radius: var(--radius-lg);
    padding: 48px 44px 44px;
    max-width: 820px; margin-inline: auto;
    position: relative;
    box-shadow: var(--shadow-card);
    overflow: hidden;
  }
  @media(max-width:640px){ .reviews{ padding: 36px 24px 32px;}}
  .reviews::before{
    content:""; position:absolute; right:-60px; bottom:-60px;
    width:220px; height:220px; border-radius:999px;
    background: radial-gradient(circle, rgba(14,180,233,.25), transparent 70%);
  }
  .reviews-head{
    display:flex; justify-content:space-between; align-items:flex-start;
    gap: 20px; margin-bottom: 28px; position:relative; z-index:1;
  }
  .reviews-head h3{
    margin:0; font-family: var(--font-display);
    font-size: clamp(28px, 3.4vw, 38px);
    font-weight: 900; letter-spacing: .04em; line-height: 1.05;
  }
  .reviews-head .q{
    font-size: 15px; color: rgba(255,255,255,.9);
    font-weight: 600; max-width: 300px; line-height: 1.75;
    text-align: right;
  }
  .reviews-head .q::before{
    content:"Q."; color: var(--c-cta); font-family: var(--font-num);
    font-weight: 900; margin-right: 6px; font-size: 16px;
  }
  @media(max-width:640px){
    .reviews-head{ flex-direction:column; }
    .reviews-head .q{ text-align:left; max-width:none;}
  }
  .review{
    display:flex; gap: 14px; align-items:flex-start;
    margin-bottom: 20px; position:relative; z-index:1;
  }
  .review:last-child{ margin-bottom: 0;}
  .review .avatar{
    width:52px; height:52px; border-radius:999px;
    background: #F1D8A6 no-repeat center/cover;
    flex: 0 0 52px;
    border: 2px solid #fff;
  }
  .review .bub{
    background: #fff; color: var(--c-ink);
    border-radius: 4px 16px 16px 16px;
    padding: 16px 20px;
    font-size: 16px; line-height: 1.8;
    flex: 1;
    position: relative;
  }
  .review .bub::before{
    content:""; position:absolute; left:-8px; top: 14px;
    width:0; height:0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 10px solid #fff;
  }
  .review .bub .name{
    display:flex; justify-content:space-between; align-items:center;
    gap: 10px; margin-bottom: 6px; flex-wrap: wrap;
  }
  .review .bub .who{
    font-weight: 900; font-size: 14px; color: var(--c-navy);
  }
  .review .bub .stars{ color: #FFB400; font-size: 15px; letter-spacing: 1px;}
  .reviews-foot{
    margin-top: 28px; text-align: right; position: relative; z-index: 1;
    font-family: var(--font-num); letter-spacing: .15em; font-weight: 700;
    font-size: 12px; color: rgba(255,255,255,.6);
  }

  /* ========== FLOW ========== */
  .flow{ background:#fff;}
  .flow-row{
    display:grid; grid-template-columns: repeat(3, 1fr);
    gap: 30px; margin-top: 56px;
    align-items: stretch;
  }
  @media (max-width: 720px){ .flow-row{ grid-template-columns: 1fr;}}
  .flow-step{
    background: var(--c-bg-soft);
    border: 2px solid var(--c-line);
    border-radius: 22px;
    padding: 36px 24px 30px;
    text-align:center;
    position: relative;
  }
  .flow-step .circle{
    width: 140px; height: 140px; margin: 0 auto 20px;
    border-radius: 999px;
    background: #fff;
    border: 4px solid var(--c-primary);
    display:grid; place-items:center;
    position: relative;
    color: var(--c-primary);
    box-shadow: 0 8px 20px -8px rgba(14,180,233,.45);
  }
  .flow-step .circle .ico{ font-size: 48px;}
  .flow-step .circle .ico-svg{ width: 74px; height: 74px; display: block;}
  .flow-step .step-num{
    position:absolute; top: -14px; right: -14px;
    width: 44px; height: 44px; border-radius: 999px;
    background: var(--c-cta); color:#fff;
    display:grid; place-items:center;
    font-family: var(--font-num); font-weight:900; font-size: 22px;
  }
  .flow-step h4{ margin: 0 0 8px; font-size: 20px; font-weight: 900;}
  .flow-step p{ margin:0; color: var(--c-sub); font-size: 15px; line-height: 1.8;}
  .flow-step + .flow-step::before{
    content:"▶"; position: absolute; left: -24px; top: 50%;
    transform: translateY(-50%);
    color: var(--c-primary);
    font-size: 18px;
  }
  @media (max-width: 720px){ .flow-step + .flow-step::before{ display:none;}}

  /* ========== FORM ========== */
  .form-sec{
    background: linear-gradient(180deg, var(--c-bg-soft) 0%, var(--c-bg-band) 100%);
    position:relative; overflow: hidden;
  }
  .form-sec .orn-wave{
    position: absolute; top:-1px; left:0; right:0; height: 60px;
  }
  .form-head h2{
    font-size: clamp(26px, 3.4vw, 40px); font-weight:900;
    text-align:center; line-height: 1.4;
    margin: 0 0 8px;
  }
  .form-head p{ text-align:center; color: var(--c-sub); font-size: 15px; margin: 0 0 40px;}
  .form-card{
    background:#fff; border-radius: var(--radius-lg);
    padding: 48px; max-width: 720px; margin: 0 auto;
    box-shadow: var(--shadow-card);
  }
  @media (max-width: 520px){ .form-card{ padding: 28px 22px;}}
  .form-card label.fld,
  .form-card #fld-birthday{
    display:block; margin-bottom: 22px;
  }
  .form-card .label-text{
    display:flex; align-items:center; gap: 10px;
    font-size: 13px; font-weight:900; margin-bottom: 8px;
  }
  .form-card .req-tag{
    background: var(--c-cta); color:#fff;
    padding: 2px 8px; border-radius: 4px; font-size: 11px;
  }
  .form-card .opt-tag{
    background: #E0E8F0; color: var(--c-sub);
    padding: 2px 8px; border-radius: 4px; font-size: 11px;
  }
  .form-card input[type=text],
  .form-card input[type=email],
  .form-card input[type=tel],
  .form-card input[type=date]{
    width:100%; padding: 14px 16px;
    border: 2px solid var(--c-line);
    border-radius: 10px; font-size: 15px;
    font-family: inherit;
    transition: border-color .15s, box-shadow .15s;
  }
  /* 生年月日（年・月・日のセレクト） */
  .form-card .birth-row{
    display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 10px;
  }
  .form-card .birth-row select{
    width:100%; padding: 14px 34px 14px 16px;
    border: 2px solid var(--c-line);
    border-radius: 10px; font-size: 15px;
    font-family: inherit; line-height: 1.2;
    background:#fff; color: inherit; cursor: pointer;
    -webkit-appearance: none; appearance: none;
    /* 右端のプルダウン矢印（外部画像を使わないインラインSVG） */
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236A7A88' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1.8 6 6.2 11 1.8'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 8px;
    transition: border-color .15s, box-shadow .15s;
  }
  .form-card .birth-row select:focus{
    outline:none; border-color: var(--c-primary); box-shadow: 0 0 0 4px rgba(14,180,233,.18);
  }
  @media (max-width:520px){
    .form-card .birth-row{ gap: 8px;}
    .form-card .birth-row select{ padding: 14px 28px 14px 12px; background-position: right 10px center;}
  }
  .form-card input:focus{ outline:none; border-color: var(--c-primary); box-shadow: 0 0 0 4px rgba(14,180,233,.18);}
  .form-card .radios{
    display:grid; grid-template-columns: 1fr 1fr; gap: 10px;
  }
  @media (max-width:520px){ .form-card .radios{grid-template-columns:1fr;}}
  .form-card .radio{
    display:flex; align-items:center; gap: 10px;
    padding: 12px 16px;
    border: 2px solid var(--c-line);
    border-radius: 10px;
    cursor:pointer;
    transition: border-color .15s, background .15s;
    font-size: 14px; font-weight: 600;
  }
  .form-card .radio:hover{ border-color: var(--c-primary);}
  .form-card .radio input{ accent-color: var(--c-primary);}
  .form-card .radio input:checked ~ span{ color: var(--c-primary-deep); font-weight:900;}
  .form-card .radio:has(input:checked){ border-color: var(--c-primary); background: var(--c-bg-soft);}
  .form-card .consent{
    display:flex; align-items:flex-start; gap: 10px;
    font-size: 13px; color: var(--c-sub); margin: 18px 0 24px;
  }
  .form-card .consent a{ color: var(--c-primary-deep); font-weight: 700;}
  .form-card .submit-row{ text-align:center;}
  .form-card .cta{ width: 100%; max-width: 420px;}
  .form-card .cta[disabled]{ background: #B7CAD6; cursor:not-allowed; box-shadow:none; color:#fff;}
  .form-card .cta[disabled]:hover{ transform:none; background: #B7CAD6;}
  .form-err{ color:#D23; font-size: 12px; margin-top: 6px; display:none;}
  .form-err.on{ display:block;}
  .turnstile-row{ display:flex; justify-content:center; margin: 0 0 20px;}
  .form-err-global{ text-align:center; font-size: 13px; font-weight: 700; margin: 0 0 16px;}

  /* ========== FOOTER ========== */
  footer{
    background: var(--c-navy); color: rgba(255,255,255,.75);
    padding: 40px 24px; text-align:center; font-size: 13px;
  }
  footer img{ height: 20px; margin: 0 auto 10px; filter: brightness(0) invert(1);}
  footer .copy{ font-size:11px; opacity: .6; margin-top: 8px; letter-spacing:.1em;}

  /* ========== TWEAKS PANEL ========== */
  #tweaks{
    position: fixed; right: 20px; bottom: 20px; z-index: 100;
    background: #fff; border: 1px solid var(--c-line); border-radius: 16px;
    padding: 18px 18px 16px; box-shadow: 0 20px 40px -15px rgba(0,0,0,.25);
    width: 260px; display:none;
    font-family: var(--font-jp);
  }
  #tweaks.on{ display:block;}
  #tweaks h4{ margin:0 0 12px; font-size: 13px; font-weight:900; letter-spacing:.1em;}
  #tweaks .group{ margin-bottom: 14px;}
  #tweaks .group-label{ font-size: 11px; color: var(--c-sub); margin-bottom: 6px; letter-spacing:.1em; font-weight:700;}
  #tweaks .seg{ display:flex; border:1px solid var(--c-line); border-radius: 8px; overflow:hidden;}
  #tweaks .seg button{
    flex: 1; border:none; background:#fff; padding: 8px 6px;
    font-size: 11px; cursor:pointer; font-family: inherit;
    font-weight: 700; color: var(--c-sub);
  }
  #tweaks .seg button.on{ background: var(--c-primary); color:#fff;}
  #tweaks .swatches{ display:flex; gap: 6px;}
  #tweaks .sw{
    flex:1; aspect-ratio: 1; border-radius: 8px; border:2px solid transparent; cursor:pointer;
    position:relative;
  }
  #tweaks .sw.on{ border-color: var(--c-ink);}
  #tweaks .sw span{ position:absolute; bottom:2px; left:0; right:0; font-size: 9px; text-align:center; color:#fff; font-weight:700; text-shadow: 0 1px 2px rgba(0,0,0,.4);}

  /* ========== scroll fade ========== */
  .fade{ opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease;}
  .fade.in{ opacity: 1; transform: none;}

  /* ========== MOBILE FV TUNING ========== */
  @media (max-width: 720px){
    .site-header .wrap{ padding: 10px 16px;}
    .logo-sub{ font-size: 10px;}

    .hero-inner{ padding: 20px 18px 52px;}
    .hero-eyebrow{ font-size: 11px; padding: 6px 12px; letter-spacing: .12em;}
    .hero h1{ margin: 12px 0 10px;}
    .hero h1 .h1-sub{ font-size: 19px; margin-bottom: 3px;}
    .hero h1 .h1-main{ font-size: 21px; line-height: 1.35;}
    .hero h1 .h1-main .hl{ font-size: 38px; line-height: 1.05;}
    .hero .lead{ font-size: 13px; line-height: 1.7; margin: 0 0 16px;}
    .hero-badges{ gap: 8px; margin: 0 0 18px;}
    .hero-badge{ font-size: 13px; padding: 9px 14px 9px 11px;}
    .hero-badge .ico{ width: 26px; height: 26px; flex: 0 0 26px;}
    .hero-badge .ico svg{ width: 16px; height: 16px;}
    .hero-cta-block{ gap: 10px;}
    .hero-cta-block .cta{ font-size: 19px; padding: 15px 30px 17px;}
    .hero-cta-block .cta .brackets{ font-size: 12px;}
    .wave{ height: 50px;}
  }
  @media (max-width: 380px){
    .hero h1 .h1-main .hl{ font-size: 34px;}
    .hero-badge{ font-size: 12px;}
  }

  /* ========== THANKS PAGE ========== */
  .thanks-hero{
    background: var(--c-navy); color:#fff;
    position: relative; overflow: hidden;
    padding: 88px 24px 170px;
    text-align: center;
  }
  .thanks-hero::before{
    content:""; position:absolute; inset:0;
    background-image: radial-gradient(circle at 20% 10%, rgba(14,180,233,.2) 0, transparent 40%),
                      radial-gradient(circle at 90% 90%, rgba(255,138,31,.15) 0, transparent 50%);
  }
  .thanks-hero-inner{ position: relative; z-index: 2; max-width: 720px; margin: 0 auto;}
  .thanks-check{
    width: 84px; height: 84px; margin: 0 auto 26px;
    border-radius: 999px;
    background: var(--c-primary); color: #fff;
    display: grid; place-items: center;
    box-shadow: 0 0 0 12px rgba(14,180,233,.16), 0 14px 30px -10px rgba(0,0,0,.4);
  }
  .thanks-check svg{ width: 40px; height: 40px; display: block;}
  .thanks-hero h1{
    font-size: clamp(28px, 4.6vw, 52px);
    font-weight: 900; line-height: 1.4;
    letter-spacing: .01em;
    margin: 20px 0 14px;
    text-shadow: 0 4px 24px rgba(0,0,0,.35);
  }
  .thanks-hero h1 .hl{ color: var(--c-primary);}
  .thanks-hero .lead{
    font-size: clamp(15px, 1.6vw, 19px);
    color: rgba(255,255,255,.9);
    margin: 0; line-height: 1.9;
  }
  .thanks-hero .wave path{ fill: var(--c-bg-soft);}

  .pitch{ background: var(--c-bg-soft);}
  .pitch-head{ margin-bottom: 44px;}
  .pitch-title-row{
    display: flex; align-items: flex-end; justify-content: center;
    gap: 6px;
  }
  .pitch-title-row .section-title{ margin-bottom: 0;}
  .pitch-illust{
    width: 150px; flex: 0 0 auto;
    margin-bottom: 6px;
  }
  .pitch-head .section-sub{ margin: 18px auto 0;}
  .pitch-embed{
    max-width: 900px; margin: 0 auto;
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: 24px;
  }
  .pitch-embed iframe{ display: block; max-width: 100%;}
  @media (max-width: 720px){
    .thanks-hero{ padding: 60px 20px 120px;}
    .pitch-illust{ width: 104px;}
    .pitch-embed{ padding: 12px; border-radius: var(--radius-md);}
  }

  .thanks-message{ background: #fff; text-align: center;}
  .thanks-message .closing{
    margin: 0;
    font-size: clamp(16px, 2vw, 21px);
    font-weight: 700; line-height: 2.15;
    color: var(--c-navy);
  }
  .thanks-message .closing strong{
    display: inline-block;
    font-size: 1.25em; font-weight: 900;
    background: linear-gradient(transparent 64%, var(--c-yellow) 64%);
    padding: 0 4px;
    margin-top: 6px;
  }
  .thanks-message .back-row{ margin-top: 44px;}
  .btn-back{
    display: inline-flex; align-items: center; gap: 8px;
    padding: 14px 40px;
    border: 2px solid var(--c-line);
    border-radius: 999px;
    font-weight: 700; font-size: 15px;
    color: var(--c-sub); text-decoration: none;
    transition: border-color .15s, color .15s, transform .15s;
  }
  .btn-back:hover{ border-color: var(--c-primary); color: var(--c-primary-deep); transform: translateY(-2px);}
  .btn-back .arrow{ transition: transform .2s;}
  .btn-back:hover .arrow{ transform: translateX(4px);}

  /* ========== SP/PC 改行・CTA調整 ========== */
  .sp-br{ display:none; }
  @media (max-width: 720px){
    .pc-br{ display:none; }
    .sp-br{ display:inline; }
    .cta{ display:flex; width:fit-content; margin-left:auto; margin-right:auto; }
    .cta > span{ text-align:center; }
  }