:root {
    --foam:          #F4FAFE;
    --mist:          #E3F3FB;
    --shallow:       #C2E4F5;
    --ripple:        #7FC4E0;
    --drop:          #3A9ECA;
    --deep:          #1C6E92;
    --ocean:         #0D4A66;
    --splash-accent: #A8DFF0;
    --text-dark:     #0D2F3F;
    --text-mid:      #2E6278;
    --text-light:    #6099B0;
    --white:         #FFFFFF;
    --sp-width:      390px;
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }
  html {
    scroll-behavior: smooth;
    background: linear-gradient(180deg, #00d4ff 0%, #00a9d6 100%);
  }

  /* ─── ページ全体をスマホ幅390pxに固定 ─── */
  body {
    font-family: 'Noto Sans JP', sans-serif;
    background: #f5f7fa;
    color: var(--text-dark);
    font-weight: 300;
    overflow-x: hidden;
    width: var(--sp-width);
    min-width: var(--sp-width);
    max-width: var(--sp-width);
    margin: 0 auto;
    position: relative;
    /* PCで開いたときに両サイドに影をつけてスマホっぽく見せる */
    box-shadow: 0 0 44px rgba(0,162,204,.55);
  }

  /* ─── ANIMATIONS ─── */
  @keyframes waterFlow {
    0% {
      transform: translate3d(-8%, -4%, 0) scale(1);
      opacity: .55;
    }
    50% {
      transform: translate3d(6%, 3%, 0) scale(1.08);
      opacity: .82;
    }
    100% {
      transform: translate3d(-8%, -4%, 0) scale(1);
      opacity: .55;
    }
  }

  .reveal {
    opacity: 0; transform: translateY(22px);
    transition: opacity .8s ease, transform .8s ease;
  }
  .reveal.visible { opacity: 1; transform: translateY(0); }

  /* ─── HEADER ─── */
  header {
    position: fixed; top: 0; left: 50%; z-index: 100;
    transform: translateX(-50%);
    width: var(--sp-width);
    padding: 14px 20px;
    display: flex; justify-content: space-between; align-items: center;
    background: rgba(244,250,254,.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(124,196,224,.3);
    transition: box-shadow .3s;
  }
  .logo {
    font-family: 'Shippori Mincho', serif;
    font-size: 13px; color: var(--text-mid);
    letter-spacing: .08em; font-weight: 500;
    display: flex; align-items: center; gap: 8px;
  }
  .logo-text { display: flex; flex-direction: column; }
  .logo-mark { width: 24px; height: 24px; flex-shrink: 0; }
  .logo-name-image {
    display: block;
    width: 132px;
    height: auto;
  }
  .logo span {
    display: block; font-family: 'Noto Sans JP', sans-serif;
    font-size: 9px; letter-spacing: .15em;
    color: var(--text-light); font-weight: 300; margin-top: 2px;
  }
  .header-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--drop); color: var(--white);
    padding: 9px 18px; border-radius: 30px;
    font-size: 11px; letter-spacing: .06em;
    text-decoration: none; transition: background .3s;
    font-family: 'Noto Sans JP', sans-serif; font-weight: 300;
  }
  .header-btn:hover { background: var(--deep); }

  /* ─── HERO ─── */
  .hero {
    padding-top: 60px;
    margin-bottom: -80px;
    background: #FFFFFF;
    position: relative;
    overflow: hidden;
    z-index: 1;
  }
  /* Hero image (centred at top) */
  .hero-visual {
    display: flex; justify-content: center;
    padding: 0;
    position: relative;
    z-index: 1;
  }
  .hero-image-wrap {
    position: relative;
    width: 100%;
    border-radius: 0;
    overflow: hidden;
    box-shadow: none;
    border: none;
    background: #FFFFFF;
  }
  .hero-image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
    opacity: .82;
  }
  .hero-brand {
    position: absolute;
    top: calc(50% + 142px);
    left: 0;
    width: 100%;
    z-index: 3;
    text-align: center;
    pointer-events: none;
  }
  .hero-brand-main {
    font-family: 'Shippori Mincho', serif;
    font-size: 48px;
    line-height: 1;
    color: rgba(255,255,255,.92);
    letter-spacing: .03em;
    font-weight: 600;
    text-shadow: 0 2px 10px rgba(0,0,0,.18);
  }
  .hero-brand-sub {
    margin-top: 8px;
    font-size: 14px;
    letter-spacing: .18em;
    color: rgba(255,255,255,.92);
    font-weight: 400;
    text-shadow: 0 1px 8px rgba(0,0,0,.16);
  }
  /* Hero catch copy (overlay) */
  .hero-catch {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    pointer-events: none;
  }
  .hero-catch::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, rgba(13,47,63,.2) 0%, rgba(13,47,63,.48) 60%, rgba(13,47,63,.62) 100%);
  }
  .hero-catch-main {
    position: relative;
    z-index: 1;
    font-family: 'Shippori Mincho', serif;
    font-size: 32px;
    line-height: 1.62;
    color: var(--white);
    font-weight: 500;
    letter-spacing: .12em;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    text-shadow: 0 3px 18px rgba(0,0,0,.52);
    transform: translateY(-34px);
  }
  .hero-splash {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(168,223,240,.78);
    box-shadow: 0 0 0 7px rgba(168,223,240,.14);
    z-index: 1;
  }
  .hero-splash-a {
    width: 76px;
    height: 76px;
    top: 84px;
    left: 56px;
  }
  .hero-splash-b {
    width: 56px;
    height: 56px;
    right: 42px;
    bottom: 102px;
  }

  /* Hero content */
  .hero-content {
    background: #f5f7fa;
    padding: 0 0 72px;
    position: relative;
    z-index: 5;
    overflow: hidden;
  }
  .hero-copy {
    margin: 50px 18px 0 18px;
    padding: 40px 24px 46px;
    position: relative;
    z-index: 6;
    border-radius: 30px;
    background: #f8fafc;
    box-shadow: 0 10px 24px rgba(13,74,102,.1);
    border: 1px solid rgba(255,255,255,.78);
  }
  .hero-tag {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 10px; letter-spacing: .2em; color: var(--drop);
    margin-bottom: 20px; font-weight: 400;
  }
  .hero-tag::before { content: ''; width: 24px; height: 1px; background: var(--drop); }
  .hero-title {
    font-family: 'Shippori Mincho', serif;
    font-size: 34px;
    line-height: 1.55;
    color: var(--text-dark);
    letter-spacing: .04em;
    margin-bottom: 18px;
    font-weight: 500;
  }
  .hero-sub {
    font-size: 13px; color: var(--text-mid);
    margin-bottom: 14px; letter-spacing: .05em; line-height: 1.9;
  }
  .hero-desc {
    font-size: 12px; color: var(--text-light);
    line-height: 2; margin-bottom: 36px; letter-spacing: .04em;
  }
  .hero-points {
    display: flex; flex-direction: column; gap: 12px; margin-bottom: 38px;
  }
  .hero-point {
    display: flex; align-items: center; gap: 8px;
    font-size: 12px; color: var(--text-mid); letter-spacing: .05em;
  }
  .hero-btns { display: flex; flex-direction: column; gap: 12px; }

  /* ─── BUTTONS ─── */
  .btn-primary {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 16px 24px; background: var(--drop); color: var(--white);
    text-decoration: none; border-radius: 40px;
    font-size: 14px; letter-spacing: .06em; font-weight: 400;
    transition: all .3s; border: 1.5px solid var(--drop); cursor: pointer;
    width: 100%;
  }
  .btn-primary:active { background: var(--deep); border-color: var(--deep); }
  .btn-secondary {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 15px 24px; background: transparent; color: var(--drop);
    text-decoration: none; border-radius: 40px;
    font-size: 14px; letter-spacing: .06em; font-weight: 400;
    transition: all .3s; border: 1.5px solid var(--ripple); cursor: pointer;
    width: 100%;
  }
  .btn-secondary:active { background: var(--mist); }

  /* ─── SECTION BASE ─── */
  section { padding: 78px 0; }
  .container { padding: 0 28px; }
  .section-label {
    font-size: 10px; letter-spacing: .22em; color: var(--drop);
    text-transform: uppercase; margin-bottom: 14px;
    display: flex; align-items: center; gap: 10px; font-weight: 400;
  }
  .section-label::after {
    content: ''; flex: 1; max-width: 32px;
    height: 1px; background: var(--ripple);
  }
  .section-title {
    font-family: 'Shippori Mincho', serif;
    font-size: 27px; line-height: 1.8;
    color: var(--text-dark); font-weight: 500;
    letter-spacing: .04em; margin-bottom: 22px;
  }
  .section-body {
    font-size: 13px; line-height: 2;
    color: var(--text-mid); letter-spacing: .04em;
  }

  /* ─── CONCERNS ─── */
  .concerns {
    background: var(--mist); position: relative; overflow: hidden;
  }
  .concerns::before {
    content: ''; position: absolute; top: -60px; right: -60px;
    width: 240px; height: 240px; border-radius: 50%;
    background: radial-gradient(circle, rgba(124,196,224,.22) 0%, transparent 70%);
  }
  .concern-list { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }
  .concern-list li {
    display: flex; align-items: center; gap: 12px;
    font-size: 13px; color: var(--text-dark); line-height: 1.6;
    padding: 16px 18px; background: rgba(255,255,255,.8);
    border-radius: 12px; border-left: 3px solid var(--ripple);
  }
  .concern-message {
    margin-top: 24px;
    background: var(--white); border-radius: 20px;
    padding: 32px 24px; text-align: center;
    box-shadow: 0 4px 28px rgba(58,158,202,.12);
  }
  .concern-message-icon { display: flex; justify-content: center; margin-bottom: 16px; }
  .concern-message p {
    font-family: 'Shippori Mincho', serif;
    font-size: 16px; line-height: 1.95;
    color: var(--text-dark); font-weight: 500; letter-spacing: .04em;
  }
  .concern-message .note {
    margin-top: 12px; font-size: 11px; color: var(--drop);
    letter-spacing: .07em; font-family: 'Noto Sans JP', sans-serif;
  }

  /* ─── ABOUT ─── */
  .about { background: var(--foam); }
  /* image block — simplified for SP */
  .about-image-block {
    position: relative; height: 220px; margin-bottom: 32px;
    border-radius: 20px; overflow: hidden;
    background: linear-gradient(155deg, var(--shallow) 0%, var(--drop) 60%, var(--deep) 100%);
    display: flex; align-items: center; justify-content: center;
  }
  .about-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
  }
  .about-image-block::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.2) 0%, transparent 60%);
    z-index: 1;
    pointer-events: none;
  }
  .about-badge {
    position: absolute; top: 14px; left: 14px;
    background: var(--white); border-radius: 10px;
    padding: 10px 14px; box-shadow: 0 3px 16px rgba(0,0,0,.1); z-index: 2;
  }
  .about-badge-text {
    font-family: 'Shippori Mincho', serif;
    font-size: 11px; color: var(--drop); letter-spacing: .08em; font-weight: 500;
  }
  .about-features {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 12px; margin-top: 28px;
  }
  .about-feature {
    background: var(--mist); border-radius: 14px;
    padding: 18px 16px; transition: background .3s;
  }
  .about-feature:active { background: var(--shallow); }
  .about-feature-icon { display: block; width: 28px; height: 28px; margin-bottom: 10px; }
  .about-feature-title {
    font-size: 12px; font-weight: 400;
    color: var(--text-dark); letter-spacing: .04em; line-height: 1.6;
  }

  /* ─── RESULTS ─── */
  .results {
    background: linear-gradient(180deg, var(--foam) 0%, #f1f8fd 52%, var(--mist) 100%);
    position: relative;
    overflow: hidden;
  }
  .results::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse at 84% 16%, rgba(124,196,224,.23) 0%, transparent 56%),
      radial-gradient(ellipse at 12% 88%, rgba(58,158,202,.12) 0%, transparent 52%);
  }
  .results .section-label { color: var(--drop); }
  .results .section-label::after { background: var(--ripple); }
  .results .section-title { color: var(--text-dark); }
  .ba-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 28px;
    position: relative;
    z-index: 1;
  }
  .ba-card {
    background: rgba(255,255,255,.82);
    border: 1px solid rgba(124,196,224,.38);
    border-radius: 18px;
    padding: 18px 14px 14px;
    box-shadow: 0 6px 20px rgba(13,74,102,.08);
  }
  .ba-card-head {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 76px;
    height: 22px;
    padding: 0 10px;
    border-radius: 999px;
    background: var(--drop);
    color: var(--white);
    font-size: 10px;
    letter-spacing: .12em;
    margin-bottom: 12px;
  }
  .ba-pair {
    display: grid;
    grid-template-columns: 1fr 20px 1fr;
    gap: 8px;
    align-items: center;
  }
  .ba-item { margin: 0; }
  .ba-image {
    display: block;
    width: 100%;
    height: 108px;
    border-radius: 12px;
    object-fit: cover;
    object-position: center;
    border: 1px solid rgba(124,196,224,.5);
  }
  .ba-label {
    margin-top: 8px;
    text-align: center;
    font-size: 11px;
    letter-spacing: .08em;
    color: var(--deep);
  }
  .ba-arrow {
    text-align: center;
    color: var(--drop);
    font-size: 16px;
    font-weight: 500;
  }
  .result-note {
    display: block;
    margin-top: 20px;
    font-size: 10px;
    color: var(--text-light);
    letter-spacing: .06em;
    position: relative;
    z-index: 1;
  }

  /* ─── FLOW ─── */
  .flow { background: var(--foam); }
  .flow-steps {
    display: flex; flex-direction: column;
    gap: 0; margin-top: 28px; position: relative;
  }
  .flow-steps::before {
    content: ''; position: absolute;
    left: 27px; top: 28px; bottom: 28px; width: 1px;
    background: linear-gradient(to bottom, transparent, var(--shallow) 20%, var(--shallow) 80%, transparent);
  }
  .flow-step {
    display: flex; align-items: flex-start; gap: 16px;
    padding: 0 0 28px 0; position: relative; z-index: 1;
  }
  .flow-step:last-child { padding-bottom: 0; }
  .flow-number {
    width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0;
    background: var(--foam); border: 2px solid var(--drop);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Shippori Mincho', serif;
    font-size: 18px; color: var(--drop); font-weight: 500;
  }
  .flow-text { padding-top: 10px; }
  .flow-title {
    font-size: 14px; font-weight: 400;
    color: var(--text-dark); letter-spacing: .04em; margin-bottom: 4px;
  }
  .flow-sub {
    font-size: 11px; color: var(--text-light);
    letter-spacing: .04em; line-height: 1.7;
  }
  .flow-thumb-wrap { margin-top: 8px; }
  .flow-thumb {
    display: block;
    width: 112px;
    height: 74px;
    border-radius: 10px;
    object-fit: cover;
    object-position: center;
    border: 1px solid rgba(124,196,224,.45);
    box-shadow: 0 3px 10px rgba(13,74,102,.12);
  }
  .flow-note {
    margin-top: 28px; font-size: 12px;
    color: var(--drop); letter-spacing: .06em; text-align: center;
  }

  /* ─── PRICING ─── */
  .pricing { background: var(--mist); position: relative; overflow: hidden; }
  .pricing::after {
    content: ''; position: absolute; bottom: -80px; left: -60px;
    width: 280px; height: 280px; border-radius: 50%;
    background: radial-gradient(circle, rgba(124,196,224,.2) 0%, transparent 70%);
  }
  .pricing-cards {
    display: flex; flex-direction: column;
    gap: 16px; margin-top: 28px; position: relative; z-index: 1;
  }
  .price-card {
    background: var(--white); border-radius: 20px;
    padding: 32px 24px; text-align: center;
    border: 2px solid transparent; position: relative;
    transition: box-shadow .3s;
  }
  .price-card.featured { border-color: var(--drop); }
  .price-card.featured::before {
    content: 'RECOMMENDED'; position: absolute;
    top: -13px; left: 50%; transform: translateX(-50%);
    background: var(--drop); color: var(--white);
    font-size: 10px; letter-spacing: .18em; padding: 4px 18px;
    border-radius: 20px; font-weight: 400; white-space: nowrap;
  }
  .price-label {
    font-size: 10px; letter-spacing: .18em;
    color: var(--text-light); margin-bottom: 16px; font-weight: 400;
  }
  .price-amount {
    font-family: 'Shippori Mincho', serif;
    font-size: 38px; color: var(--text-dark);
    font-weight: 500; letter-spacing: -.02em; line-height: 1;
  }
  .price-unit { font-size: 13px; color: var(--text-mid); margin-top: 6px; }
  .price-desc {
    margin-top: 20px; font-size: 11px; color: var(--text-light);
    line-height: 1.9; padding-top: 18px; border-top: 1px solid var(--mist);
  }
  .pricing-note {
    text-align: center; margin-top: 28px; font-size: 12px;
    color: var(--text-mid); line-height: 1.9; position: relative; z-index: 1;
  }

  /* ─── TESTIMONIALS ─── */
  .testimonials { background: var(--foam); }
  .testimonials-list {
    display: flex; flex-direction: column;
    gap: 16px; margin-top: 28px;
  }
  .testimonial-card {
    background: var(--white); border-radius: 16px;
    padding: 28px 22px; position: relative;
    border: 1px solid var(--mist);
  }
  .testimonial-quote {
    font-size: 44px; line-height: 1; color: var(--shallow);
    font-family: Georgia, serif;
    position: absolute; top: 12px; left: 18px;
  }
  .testimonial-text {
    font-family: 'Shippori Mincho', serif;
    font-size: 14px; line-height: 1.9;
    color: var(--text-dark); font-weight: 400;
    margin-top: 22px; letter-spacing: .03em;
  }
  .testimonial-author {
    margin-top: 18px; display: flex; align-items: center; gap: 10px;
  }
  .testimonial-avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--mist);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  }
  .testimonial-name { font-size: 11px; color: var(--text-light); letter-spacing: .07em; }

  /* ─── FAQ ─── */
  .faq { background: var(--mist); }
  .faq-list {
    margin-top: 28px;
    display: flex; flex-direction: column; gap: 12px;
  }
  .faq-item {
    background: var(--white); border-radius: 14px; overflow: hidden;
    border: 1px solid rgba(124,196,224,.3);
  }
  .faq-q { padding: 20px 20px; display: flex; align-items: flex-start; gap: 14px; }
  .faq-q-mark {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--mist); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; color: var(--drop);
    font-weight: 500; font-family: 'Shippori Mincho', serif;
    margin-top: 1px;
  }
  .faq-q-text {
    font-size: 13px; color: var(--text-dark);
    letter-spacing: .04em; line-height: 1.6; font-weight: 400; flex: 1;
  }
  .faq-a {
    padding: 16px 20px 20px 62px;
    font-size: 12px; color: var(--text-mid);
    line-height: 1.95; letter-spacing: .04em;
    border-top: 1px solid var(--mist);
  }

  /* ─── FINAL CTA ─── */
  .final-cta {
    background: linear-gradient(170deg, var(--mist) 0%, var(--shallow) 55%, var(--ripple) 100%);
    text-align: center; padding: 70px 0;
    position: relative; overflow: hidden;
  }
  .final-cta::before {
    content: ''; position: absolute; top: -80px; right: -80px;
    width: 300px; height: 300px; border-radius: 50%;
    background: rgba(255,255,255,.16);
  }
  .final-cta::after {
    content: ''; position: absolute; bottom: -50px; left: -50px;
    width: 220px; height: 220px; border-radius: 50%;
    background: rgba(58,158,202,.18);
  }
  .final-cta-inner { position: relative; z-index: 1; padding: 0 22px; }
  .final-cta .section-title {
    font-size: 26px; text-align: center; margin-bottom: 16px; color: var(--ocean);
  }
  .final-cta .section-body {
    text-align: center; margin-bottom: 36px;
    font-size: 13px; color: var(--deep); line-height: 2;
  }
  .final-btns { display: flex; flex-direction: column; gap: 12px; }
  .final-cta .btn-primary { background: var(--deep); border-color: var(--deep); }
  .final-cta .btn-primary:active { background: var(--ocean); }
  .final-cta .btn-secondary {
    border-color: var(--deep); color: var(--deep);
    background: rgba(255,255,255,.55);
  }
  .final-cta .btn-secondary:active { background: rgba(255,255,255,.82); }

  /* ─── PRECAUTIONS ─── */
  .precautions {
    background: var(--foam);
    padding: 44px 0 24px;
  }
  .precaution-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 22px;
  }
  .precaution-open {
    flex: 1 1 0;
    max-width: 160px;
    min-width: 0;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--drop);
    background: var(--white);
    color: var(--deep);
    border-radius: 999px;
    padding: 0 12px;
    font-size: 12px;
    letter-spacing: .05em;
    line-height: 1;
    font-family: 'Noto Sans JP', sans-serif;
  }
  .precaution-open:active {
    background: var(--mist);
  }
  .precaution-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 14px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .24s ease, visibility .24s ease;
  }
  .precaution-modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .precaution-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(7,28,38,.52);
  }
  .precaution-modal-dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 360px);
    max-height: 82vh;
    overflow: auto;
    border-radius: 14px;
    box-shadow: 0 16px 42px rgba(0,0,0,.3);
    opacity: 0;
    transform: translateY(10px) scale(.98);
    transition: opacity .24s ease, transform .24s ease;
  }
  .precaution-modal.is-open .precaution-modal-dialog {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  .precaution-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 50%;
    background: rgba(13,74,102,.14);
    color: var(--deep);
    font-size: 20px;
    line-height: 1;
    z-index: 3;
  }
  .precaution-block {
    background: rgba(255,255,255,.97);
    border: 1px solid rgba(124,196,224,.26);
    border-radius: 14px;
    padding: 16px 14px 14px;
    margin-bottom: 14px;
  }
  .precaution-block:last-child { margin-bottom: 0; }
  .precaution-title {
    font-family: 'Shippori Mincho', serif;
    font-size: 15px;
    color: var(--ocean);
    letter-spacing: .06em;
    margin-bottom: 10px;
    font-weight: 500;
  }
  .precaution-list {
    list-style: disc;
    padding-left: 1.2em;
    margin: 0;
  }
  .precaution-list li {
    font-size: 11px;
    line-height: 1.75;
    letter-spacing: .03em;
    color: var(--text-mid);
    margin-bottom: 4px;
  }
  .precaution-list li:last-child { margin-bottom: 0; }
  .precaution-list.checkbox {
    list-style: none;
    padding-left: 0;
  }
  .precaution-list.checkbox li::before { content: "□ "; }
  .precaution-risk { margin-top: 8px; }
  .precaution-risk p {
    font-size: 11px;
    line-height: 1.8;
    letter-spacing: .03em;
    color: var(--text-mid);
    margin-bottom: 8px;
  }
  .precaution-risk p:last-child { margin-bottom: 0; }
  .precaution-note {
    margin-top: 10px;
    font-size: 11px;
    line-height: 1.75;
    letter-spacing: .03em;
    color: var(--text-light);
  }

  /* ─── FOOTER ─── */
  footer {
    background: var(--ocean); color: rgba(196,226,240,.5);
    padding: 48px 22px 32px; text-align: center;
  }
  .footer-logo {
    font-family: 'Shippori Mincho', serif;
    font-size: 16px; color: var(--foam); letter-spacing: .1em;
    margin-bottom: 4px; font-weight: 400;
    display: flex; align-items: center; justify-content: center; gap: 8px;
  }
  .footer-logo-image {
    display: block;
    width: 180px;
    height: auto;
  }
  .footer-sub { font-size: 10px; letter-spacing: .18em; margin-bottom: 28px; }
  .footer-links {
    display: flex; flex-wrap: wrap; gap: 14px 20px;
    justify-content: center; margin-bottom: 28px;
  }
  .footer-links a {
    text-decoration: none; font-size: 11px;
    color: rgba(196,226,240,.5); letter-spacing: .08em; transition: color .3s;
  }
  .footer-links a:hover { color: var(--foam); }
  .footer-copy {
    font-size: 10px; letter-spacing: .08em;
    padding-top: 24px; border-top: 1px solid rgba(255,255,255,.08);
  }

/* ─── Utility classes migrated from inline styles ─── */
.delay-08 { transition-delay: .08s; }
.delay-10 { transition-delay: .1s; }
.delay-15 { transition-delay: .15s; }
.delay-18 { transition-delay: .18s; }
.delay-20 { transition-delay: .2s; }
.delay-24 { transition-delay: .24s; }
.delay-25 { transition-delay: .25s; }
.delay-30 { transition-delay: .3s; }
.delay-38 { transition-delay: .38s; }
.delay-40 { transition-delay: .4s; }

.icon-noshrink { flex-shrink: 0; }
.cta-wave-icon { position: relative; z-index: 1; }
.justify-center { justify-content: center; }

/* ── CTA ボタンスタイル ── */
:root {
  --btn-color: #4AAAC8;
  --btn-hover: #3a9ab8;
  --btn-active: #2e8aaa;
  --btn-glow: rgba(74, 170, 200, 0.5);
  --btn-shine: rgba(255, 255, 255, 0.25);
}

.cta-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px 52px;
  min-width: 320px;
  background: var(--btn-color);
  border: none;
  border-radius: 100px;
  cursor: pointer;
  overflow: hidden;
  text-decoration: none;
  outline: none;
  box-shadow:
    0 4px 16px var(--btn-glow),
    0 8px 32px rgba(74, 170, 200, 0.3),
    0 1px 0 rgba(255,255,255,0.2) inset,
    0 -1px 0 rgba(0,0,0,0.12) inset;
  transition:
    transform 0.18s cubic-bezier(.34,1.56,.64,1),
    box-shadow 0.2s ease,
    background 0.2s ease;
}

.cta-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    160deg,
    var(--btn-shine) 0%,
    transparent 55%
  );
  border-radius: inherit;
  pointer-events: none;
}

.cta-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 var(--btn-glow);
  animation: pulse 2.4s ease-out infinite;
  pointer-events: none;
}

@keyframes pulse {
  0%   { box-shadow: 0 0 0 0    rgba(74,170,200,.6); }
  70%  { box-shadow: 0 0 0 18px rgba(74,170,200,0);  }
  100% { box-shadow: 0 0 0 0    rgba(74,170,200,0);  }
}

.btn-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15));
  animation: drip 3s ease-in-out infinite;
}

@keyframes drip {
  0%, 100% { transform: translateY(0);   }
  50%       { transform: translateY(3px); }
}

.btn-text {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.2);
  white-space: nowrap;
}

.cta-btn:hover {
  background: var(--btn-hover);
  transform: translateY(-3px) scale(1.03);
  box-shadow:
    0 8px 28px var(--btn-glow),
    0 16px 48px rgba(74, 170, 200, 0.4),
    0 1px 0 rgba(255,255,255,0.25) inset,
    0 -1px 0 rgba(0,0,0,0.12) inset;
}

.cta-btn:hover .btn-icon {
  animation-play-state: paused;
  transform: scale(1.12);
  transition: transform 0.2s;
}

.cta-btn:active {
  background: var(--btn-active);
  transform: translateY(1px) scale(0.98);
  box-shadow:
    0 2px 8px var(--btn-glow),
    0 1px 0 rgba(255,255,255,0.15) inset;
  transition: transform 0.08s, box-shadow 0.08s;
}

.btn-sub {
  font-size: 13px;
  color: #7ab8cc;
  letter-spacing: 0.06em;
  display: block;
  margin-top: 12px;
  text-align: center;
}

  .invite {
    text-align: center;
    max-width: 360px;
    margin-bottom: 20px;
  }

  .invite-heading {
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: #2a7a9a;
    letter-spacing: 0.06em;
    line-height: 1.6;
    margin-bottom: 8px;
  }

  .invite-heading em {
    font-style: normal;
    color: var(--btn-color);
    border-bottom: 2px solid var(--btn-color);
    padding-bottom: 1px;
  }

  .invite-body {
    display: block;
    font-size: 14px;
    font-weight: 400;
    color: #6aa8bc;
    letter-spacing: 0.04em;
    line-height: 1.8;
  }