/* 磐梯サーモン LP — 清冽な水(青藍) × サーモン(橙) / 通販LP */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --f-body:'Zen Kaku Gothic New',sans-serif;
  --f-accent:'Zen Old Mincho',serif;
  --water:#14556e; --water-2:#2f88a6; --mizu:#eef6f9; --mizu-2:#dcecf1;
  --salmon:#e8734a; --salmon-deep:#c9552f;
  --ink:#1f2a2e; --ink-soft:#5c6b70; --paper:#ffffff; --paper-2:#f6fafb; --line:#dbe8ec;
  --sp-2:16px; --sp-3:24px; --sp-4:40px; --sp-5:64px; --sp-6:96px; --maxw:1080px;
}
html{scroll-behavior:smooth}
body{font-family:var(--f-body);color:var(--ink);background:var(--paper);line-height:1.85;font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--water-2);outline-offset:3px}
.container{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--sp-3)}
.eyebrow{font-size:.8rem;letter-spacing:.16em;color:var(--water-2);font-weight:700}
.eyebrow--sec{display:inline-block;margin-bottom:.6rem}
.eyebrow--light{color:#bfe6d9}
.sec-h{font-size:clamp(1.5rem,3.6vw,2.15rem);font-weight:700;color:var(--water);margin-bottom:1.6rem;line-height:1.45}
.sec-h.center{text-align:center}
.hl{color:var(--salmon)}
.note{color:var(--ink-soft);font-size:.82rem}
.note--light{color:#cde1e6}

/* ボタン（購入=サーモン色で目立たせる） */
.btn{display:inline-block;font-size:1rem;font-weight:700;letter-spacing:.03em;padding:.9em 1.9em;border-radius:6px;transition:transform .1s,background .2s,box-shadow .2s;cursor:pointer;border:none}
.btn--buy{background:var(--salmon);color:#fff;box-shadow:0 6px 18px rgba(232,115,74,.32)}
.btn--buy:hover{background:var(--salmon-deep);box-shadow:0 8px 22px rgba(201,85,47,.36)}
.btn--buy:active{transform:translateY(1px)}
.btn--lg{font-size:1.1rem;padding:1.05em 2.6em}

/* 追従ナビ */
.sitenav{position:fixed;inset:0 0 auto 0;z-index:60;display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-2);padding:.65rem clamp(16px,4vw,40px);background:rgba(255,255,255,.94);backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);transform:translateY(-100%);transition:transform .35s ease}
.sitenav.is-visible{transform:none}
.sitenav__brand{font-size:1.2rem;font-weight:700;color:var(--water);letter-spacing:.02em}
.sitenav__links{display:flex;align-items:center;gap:clamp(12px,2vw,24px);font-size:.9rem;font-weight:500}
.sitenav__links a:not(.sitenav__cta):hover{color:var(--water-2)}
.sitenav__cta{background:var(--salmon);color:#fff;padding:.55em 1.2em;border-radius:6px}
.sitenav__cta:hover{background:var(--salmon-deep)}

/* ヒーロー */
.hero{position:relative;min-height:clamp(560px,90vh,780px);overflow:hidden;display:flex;align-items:center}
.hero__media{position:absolute;inset:0;z-index:0}
.hero__media img{width:100%;height:100%;object-fit:cover}
.hero__media::after{content:"";position:absolute;inset:0;background:linear-gradient(84deg,rgba(8,40,54,.6),rgba(8,40,54,.12) 60%)}
.hero__inner{position:relative;z-index:1;width:100%;padding-block:var(--sp-5)}
.hero__copy{max-width:33rem;color:#fff}
.hero .eyebrow{color:#bfe6d9}
.hero__catch{font-family:var(--f-accent);font-size:clamp(2rem,5.4vw,3.1rem);font-weight:700;line-height:1.4;margin:.5rem 0 .8rem;text-shadow:0 2px 12px rgba(0,0,0,.3)}
.hero__catch .mark{background:linear-gradient(transparent 62%,rgba(232,115,74,.85) 62%);padding:0 2px}
.hero__catch .nowrap{white-space:nowrap}
.hero__sub{font-size:1rem;margin-bottom:1.4rem;color:#eaf3f5;max-width:30rem}
.hero__badges{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:1.6rem}
.hero__badges .badge{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.4);color:#fff;font-size:.8rem;padding:.35em .9em;border-radius:20px;backdrop-filter:blur(2px)}
.hero__badges .badge b{color:#ffd7a6}

/* 問題提起 */
.problem{padding-block:var(--sp-6);background:var(--paper-2)}
.problem__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3);margin-top:var(--sp-3)}
.problem__item{text-align:center;padding:var(--sp-3);background:#fff;border:1px solid var(--line);border-radius:12px}
.problem__mark{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--mizu-2);color:var(--water-2);font-weight:700;font-size:1.3rem;margin-bottom:.7rem}
.problem__item b{color:var(--salmon-deep)}

/* こだわり（理由3つ） */
.reason{padding-block:var(--sp-6)}
.reason__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3);margin-top:var(--sp-3)}
.rcard__media{overflow:hidden;border-radius:12px;aspect-ratio:4/3}
.rcard__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.rcard:hover .rcard__media img{transform:scale(1.04)}
.rcard__h{font-size:1.12rem;font-weight:700;color:var(--water);margin:.9rem 0 .3rem;display:flex;align-items:baseline;gap:.5rem}
.rcard__no{font-family:var(--f-accent);color:var(--salmon);font-size:1.05rem}
.rcard__d{color:var(--ink-soft);font-size:.92rem}

/* 数字バー */
.trust{background:var(--water);color:#fff;padding-block:var(--sp-5)}
.trust__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-3);text-align:center}
.tstat__n{font-family:var(--f-accent);font-size:clamp(1.8rem,4.5vw,2.6rem);font-weight:700;line-height:1;color:#fff}
.tstat__n small{font-size:.85rem;margin-left:.1em}
.tstat__l{font-size:.84rem;color:#bfe6d9;margin-top:.5rem}

/* 食べ方 */
.eat{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
.eat__media{min-height:360px}
.eat__media img{width:100%;height:100%;object-fit:cover}
.eat__panel{padding:clamp(28px,5vw,64px);display:flex;flex-direction:column;justify-content:center}
.eat-list{list-style:none;margin-bottom:1.4rem}
.eat-list li{padding:.7rem 0;border-top:1px solid var(--line);font-size:.98rem}
.eat-list li b{color:var(--water);margin-right:.3rem}
.eat__thumb{border-radius:12px;overflow:hidden;max-width:280px}
.eat__thumb img{width:100%;aspect-ratio:16/9;object-fit:cover}

/* お客様の声 */
.voices{padding-block:var(--sp-6);background:var(--paper-2)}
.voices__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3);margin-top:var(--sp-3)}
.review{background:#fff;border:1px solid var(--line);border-radius:12px;padding:1.3rem 1.4rem;font-size:.94rem}
.review .stars{color:var(--salmon);letter-spacing:.1em;margin-bottom:.5rem}
.review cite{display:block;margin-top:.8rem;color:var(--ink-soft);font-size:.82rem;font-style:normal}

/* 商品 */
.shop{padding-block:var(--sp-6)}
.shop__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3);margin-top:var(--sp-3)}
.product{position:relative;border:1px solid var(--line);border-radius:14px;padding:1.2rem;background:#fff;display:flex;flex-direction:column;text-align:center}
.product--pick{border:2px solid var(--salmon);box-shadow:0 10px 30px rgba(232,115,74,.14)}
.product__flag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--salmon);color:#fff;font-size:.74rem;font-weight:700;padding:.25em .9em;border-radius:20px}
.product__media{border-radius:10px;overflow:hidden;aspect-ratio:4/3;margin-bottom:.9rem}
.product__media img{width:100%;height:100%;object-fit:cover}
.product__h{font-size:1.1rem;font-weight:700;color:var(--water)}
.product__price{font-family:var(--f-accent);font-size:1.7rem;font-weight:700;color:var(--ink);margin:.3rem 0}
.product__price small{font-size:.72rem;color:var(--ink-soft);margin-left:.3em;font-family:var(--f-body);font-weight:400}
.product__d{color:var(--ink-soft);font-size:.88rem;margin-bottom:1rem;flex:1}
.product .btn{width:100%}
.shop__note{text-align:center;margin-top:var(--sp-3);color:var(--ink-soft)}
.shop__note b{color:var(--salmon-deep)}

/* FAQ */
.faq{padding-block:var(--sp-6);background:var(--paper-2)}
.faq details{background:#fff;border:1px solid var(--line);border-radius:10px;margin-bottom:.7rem;overflow:hidden}
.faq summary{cursor:pointer;padding:1rem 1.2rem;font-weight:500;list-style:none;position:relative;padding-right:2.4rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:1.1rem;top:.9rem;color:var(--water-2);font-size:1.3rem;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 1.2rem 1.1rem;color:var(--ink-soft);font-size:.94rem}

/* 最終CTA（写真＋暗幕） */
.final{position:relative;overflow:hidden;text-align:center}
.final__media{position:absolute;inset:0;z-index:0}
.final__media img{width:100%;height:100%;object-fit:cover}
.final__media::after{content:"";position:absolute;inset:0;background:rgba(8,40,54,.78)}
.final__inner{position:relative;z-index:1;padding-block:var(--sp-6);color:#fff}
.final__h{font-family:var(--f-accent);font-size:clamp(1.7rem,4.4vw,2.6rem);font-weight:700;line-height:1.45;margin:.5rem 0 .7rem}
.final__d{color:#dcebee;margin-bottom:1.6rem}

/* フッター */
.site-footer{background:#0e2f3c;color:#cfe0e5;padding-block:var(--sp-4);text-align:center}
.foot-brand{font-size:1.15rem;font-weight:700;color:#fff;margin-bottom:.4rem}
.foot-nap{font-size:.85rem;color:#9fbcc4;line-height:1.8}
.foot-links{display:flex;gap:1.4rem;justify-content:center;margin:1rem 0;font-size:.9rem;flex-wrap:wrap}
.foot-links a:hover{color:var(--salmon)}
.copy{font-size:.78rem;color:#7ea0a9;border-top:1px solid rgba(255,255,255,.1);padding-top:var(--sp-2);margin-top:var(--sp-2)}

/* 追従購入バー（スマホ） */
.buybar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:70;text-align:center;background:var(--salmon);color:#fff;font-weight:700;padding:1rem;box-shadow:0 -4px 16px rgba(0,0,0,.15);transform:translateY(100%);transition:transform .3s ease}
.buybar.is-visible{transform:none}

/* スクロール出現 */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .8s ease}
.reveal.is-in{opacity:1;transform:none}

/* レスポンシブ */
@media (max-width:860px){
  .problem__grid,.reason__grid,.voices__grid,.shop__grid{grid-template-columns:1fr}
  .trust__grid{grid-template-columns:1fr 1fr;gap:var(--sp-4) var(--sp-3)}
  .eat{grid-template-columns:1fr}
  .eat__media{min-height:240px}
  .sitenav__links a:not(.sitenav__cta){display:none}
  .buybar{display:block}
  body{padding-bottom:0}
}

/* 動きを控える */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1!important;transform:none!important;transition:none!important}
  *{transition-duration:.001ms!important}
}