:root{
  --navy:#294963;
  --navy-dark:#193549;
  --blue:#66a9bf;
  --blue-soft:#eaf7fa;
  --blue-pale:#f5fbfc;
  --line:#cfe5eb;
  --text:#2c4256;
  --muted:#54697a;
  --white:#fff;
  --orange:#ec6a35;
  --orange-dark:#d45528;
  --yellow:#fff5d9;
  --radius:18px;
  --shadow:0 12px 34px rgba(31,68,92,.13);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Yu Gothic Medium","Yu Gothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  font-weight:500;
  color:var(--text);
  line-height:1.8;
  background:var(--white);
  padding-bottom:86px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%;height:auto}
a{text-decoration:none;color:inherit}
button,a{-webkit-tap-highlight-color:transparent}
.container{width:min(100%,760px);margin:auto;padding-inline:20px}
.wide{width:min(100%,980px);margin:auto;padding-inline:20px}
.section{padding:58px 0}
.section--blue{background:linear-gradient(145deg,#f7fcfd 0%,#e2f3f7 100%)}
.section--navy{background:linear-gradient(145deg,var(--navy-dark),#426f87);color:#fff}
.title{color:var(--navy);font-size:clamp(1.55rem,6.1vw,2.2rem);line-height:1.45;text-align:center;margin-top:0}
.sub{color:var(--muted);font-size:.95rem;text-align:center;margin:10px auto 0;max-width:620px}
.note{font-size:.8rem;color:var(--muted);line-height:1.65}

/* HERO */
.hero{background:linear-gradient(150deg,#eef9fb 0%,#cce9f0 100%);padding:20px 0 34px}
.hero__visual{width:min(100%,620px);margin:auto;box-shadow:var(--shadow)}
.hero__copy{text-align:center;padding:24px 20px 0}
.hero__copy h1{color:var(--navy-dark);font-size:clamp(1.75rem,7vw,2.55rem);line-height:1.42;letter-spacing:.02em;margin:10px 0 12px}
.hero__copy h1 strong{display:inline-block;color:var(--blue);font-size:1.12em}
.hero__lead{font-size:clamp(.96rem,3.8vw,1.08rem);font-weight:700;color:var(--navy)}
.hero__micro{font-size:.8rem;color:var(--muted);margin-top:8px}

/* OFFER */
.offer{margin:-1px auto 0;background:#fff;padding:28px 20px 34px;border-bottom:1px solid #edf3f5}
.offer-title{color:var(--navy-dark);font-size:clamp(1.15rem,4.6vw,1.4rem);font-weight:900;text-align:center;line-height:1.5;margin-bottom:18px}
.offer-image-link{display:block;width:min(100%,420px);margin:auto;transition:transform .16s ease}
.offer-image-link:hover{transform:translateY(-2px)}
.offer-image-link img{width:100%;box-shadow:var(--shadow)}
.benefit-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;width:min(100%,420px);margin:20px auto 0}
.benefit-strip span{display:grid;place-items:center;text-align:center;min-height:54px;border-radius:12px;background:var(--blue-pale);border:1px solid var(--line);font-size:.75rem;line-height:1.4;font-weight:800;color:var(--navy)}
.cta{
  display:flex;align-items:center;justify-content:center;width:100%;min-height:58px;
  border-radius:999px;background:linear-gradient(180deg,#f47a46,var(--orange));color:#fff;
  font-size:clamp(1rem,4.3vw,1.2rem);font-weight:900;letter-spacing:.03em;
  box-shadow:0 10px 22px rgba(236,106,53,.3);transition:.16s ease;
  animation:cta-pulse 1.8s ease-in-out infinite;
}
.cta:hover{background:var(--orange-dark);transform:translateY(-1px) scale(1.02)}
.cta:focus-visible{outline:3px solid rgba(236,106,53,.35);outline-offset:3px}
.cta::after{
  content:"›";
  font-size:1.4em;
  margin-left:8px;
  line-height:1;
}
@keyframes cta-pulse{
  0%,100%{box-shadow:0 10px 22px rgba(236,106,53,.3);transform:scale(1)}
  50%{box-shadow:0 14px 32px rgba(236,106,53,.55);transform:scale(1.025)}
}
.offer-under{text-align:center;font-size:.85rem;font-weight:600;color:var(--muted);margin-top:10px}

/* PAIN */
.pain-list{display:grid;gap:12px;width:min(100%,600px);margin:28px auto 0}
.pain-item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;background:#fff;border:1px solid #e3eff2;border-radius:14px;padding:16px;box-shadow:0 5px 18px rgba(31,68,92,.06)}
.pain-item::before{
  content:"\2713";
  width:25px;
  height:25px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--blue-soft);
  color:var(--navy);
  font-weight:900;
}
.bridge{text-align:center;margin:28px auto 0;color:var(--navy);font-weight:800;font-size:clamp(1.03rem,4vw,1.2rem)}
.bridge strong{color:var(--blue)}

/* TASTE FIRST */
.taste-card{width:min(100%,650px);margin:28px auto 0;background:#fff;box-shadow:var(--shadow);overflow:hidden;text-align:center}
.taste-card__img{width:100%}
.taste-card__body{padding:24px}
.taste-card__body h3{color:var(--navy);font-size:1.28rem;line-height:1.5}
.taste-conclusion{margin-top:16px;padding:14px 16px;background:var(--yellow);border-radius:12px;color:#635333;font-size:.88rem;font-weight:700}

/* BENEFITS */
.reason-grid{display:grid;gap:15px;margin:30px auto 0;width:min(100%,720px)}
.reason-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:0 8px 22px rgba(31,68,92,.07);text-align:center}
.reason-num{font-size:.72rem;font-weight:900;letter-spacing:.1em;color:var(--blue)}
.reason-card h3{font-size:1.08rem;color:var(--navy);margin:4px 0 7px}
.reason-card p{font-size:.9rem;color:var(--muted)}

/* IMAGE SECTIONS */
.image-stack{display:grid;gap:20px;margin-top:28px}
.image-stack img{width:min(100%,620px);margin:auto;box-shadow:var(--shadow)}
.image-caption{width:min(100%,620px);margin:12px auto 0;font-size:.82rem;color:var(--muted);text-align:center}

/* HOW TO */
.steps{display:grid;gap:12px;margin:28px auto 0;width:min(100%,650px)}
.step{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 17px}
.step__num{width:42px;height:42px;display:grid;place-items:center;background:var(--navy);color:#fff;border-radius:50%;font-weight:900}
.step h3{color:var(--navy);font-size:1rem}
.step p{font-size:.84rem;color:var(--muted);margin-top:3px}

/* TRUST */
.trust-copy{width:min(100%,630px);margin:24px auto 0;text-align:center}
.trust-copy h3{color:#fff;font-size:clamp(1.25rem,5vw,1.6rem)}
.trust-copy p{font-size:.9rem;opacity:.9;margin-top:10px}

/* SPEC */
.spec-table{width:min(100%,650px);margin:28px auto 0;border-collapse:collapse;border-radius:16px;overflow:hidden;box-shadow:var(--shadow);background:#fff}
.spec-table tr{border-bottom:1px solid #eaf0f2}
.spec-table tr:last-child{border-bottom:0}
.spec-table th,.spec-table td{padding:13px 15px;text-align:left;vertical-align:top;font-size:.84rem}
.spec-table th{width:31%;background:var(--blue-soft);color:var(--navy);white-space:nowrap}

/* FAQ */
.faq-list{display:grid;gap:11px;margin:28px auto 0;width:min(100%,650px)}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.faq-item summary{cursor:pointer;list-style:none;padding:16px 48px 16px 17px;color:var(--navy);font-size:.9rem;font-weight:800;position:relative}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::before{content:"Q.";color:var(--blue);margin-right:7px}
.faq-item summary::after{content:"＋";position:absolute;right:16px;top:50%;transform:translateY(-50%);color:var(--blue);font-size:1.2rem}
.faq-item[open] summary::after{content:"−"}
.faq-answer{display:flex;gap:8px;padding:0 17px 17px;font-size:.84rem;color:var(--muted)}
.faq-answer b{color:var(--orange)}

/* FINAL */
.final{padding:54px 0 64px;background:linear-gradient(145deg,#eaf7fa,#cceaf1)}
.final h2{font-size:clamp(1.45rem,6vw,2rem);line-height:1.5;text-align:center;color:var(--navy-dark)}
.final p{text-align:center;color:var(--muted);font-size:.9rem;margin:9px auto 24px}
.final .offer-image-link{margin-top:22px}

/* STICKY */
.sticky{position:fixed;z-index:999;left:0;right:0;bottom:0;background:rgba(255,255,255,.97);backdrop-filter:blur(8px);border-top:1px solid var(--line);box-shadow:0 -7px 20px rgba(31,68,92,.12);padding:9px 12px;display:flex;align-items:center;gap:10px}
.sticky__price{flex:0 0 auto;line-height:1.2;color:var(--navy-dark);font-weight:900;font-size:1.04rem}
.sticky__price del{display:block;color:#8da0ad;font-size:.68rem;font-weight:500}
.sticky .cta{min-height:48px;font-size:.96rem}

@media(min-width:700px){
  .reason-grid{grid-template-columns:repeat(3,1fr)}
  .reason-card{padding:24px}
  .steps{grid-template-columns:repeat(3,1fr)}
  .sticky{justify-content:center;gap:28px;padding:14px 20px}
  .sticky__price{font-size:1.15rem}
  .sticky .cta{width:auto;flex:0 0 auto;min-width:240px;padding-inline:36px}
}
.faq-item summary::after{
  content:"\FF0B";
  position:absolute;
  right:16px;
  top:50%;
  transform:translateY(-50%);
  color:var(--blue);
  font-size:1.2rem;
}

.faq-item[open] summary::after{
  content:"\2212";
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.cta{transition:none;animation:none}}