/* =========================================================
   HAZE COFFEE — 制作サンプル
   型: Apple 製品ページ（黒/白 全画面交互・特大タイポ・中央寄せ・スクロール叙述）
   配色: 黒/白 + 銅(copper) アクセント
   ========================================================= */

:root{
  --black:#0a0a0a;
  --ink:#111;
  --white:#fff;
  --paper:#f5f5f7;       /* Apple grey */
  --grey:#86868b;        /* Apple secondary text */
  --line:#d2d2d7;
  --copper:#b97a3d;
  --copper-lt:#d79a5b;
  --maxw:1000px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:"Noto Sans JP","SF Pro JP","Hiragino Kaku Gothic ProN",system-ui,sans-serif;
  color:var(--ink);background:var(--white);
  line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.mono{font-family:"Space Mono","SFMono-Regular",ui-monospace,monospace}

.wrap{width:min(var(--maxw),90vw);margin-inline:auto}

/* ---- nav (Apple thin sticky) ---- */
.nav{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.72);
  backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid rgba(0,0,0,.08);height:48px}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:48px}
.nav .logo{font-weight:700;letter-spacing:.18em;font-size:.95rem}
.nav .logo b{color:var(--copper)}
.nav-r{display:flex;align-items:center;gap:1.6em;font-size:.8rem;color:var(--ink)}
.nav-r a{opacity:.85}.nav-r a:hover{opacity:1;color:var(--copper)}
.nav .buy{background:var(--copper);color:#fff;padding:.42em 1.1em;border-radius:980px;font-size:.8rem;font-weight:600}
.nav .buy:hover{background:var(--copper-lt);color:#fff}

/* ---- generic section ---- */
.sec{padding:110px 0;text-align:center}
.sec.dark{background:var(--black);color:var(--white)}
.sec.paper{background:var(--paper)}
.kicker{color:var(--copper);font-weight:700;font-size:1rem;letter-spacing:.04em;margin-bottom:.4em}
.sec.dark .kicker{color:var(--copper-lt)}
.title{font-weight:900;font-size:clamp(2.2rem,6vw,4.2rem);line-height:1.08;letter-spacing:-.02em}
.sub{font-size:clamp(1.05rem,2vw,1.5rem);color:var(--grey);margin-top:.6em;font-weight:500}
.sec.dark .sub{color:#a1a1a6}
.links{margin-top:1.5em;display:flex;gap:1.6em;justify-content:center;flex-wrap:wrap}
.lk{color:var(--copper);font-size:1.05rem;font-weight:500;display:inline-flex;align-items:center;gap:.25em}
.lk::after{content:"›";font-size:1.2em;transition:.2s}
.lk:hover::after{transform:translateX(3px)}
.sec.dark .lk{color:var(--copper-lt)}

/* ---- hero ---- */
.hero{background:radial-gradient(120% 90% at 50% 0%,#1c1916,#070707 70%);color:#fff;text-align:center;padding:80px 0 0;overflow:hidden}
.hero .title{font-size:clamp(2.6rem,8vw,5.5rem)}
.hero .sub{color:#c9c4bd}
.hero-img{margin:30px auto -6px;max-width:760px;width:90%;
  filter:drop-shadow(0 40px 80px rgba(0,0,0,.6));
  animation:rise 1.1s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(40px) scale(.98)}to{opacity:1;transform:none}}
.price-tag{margin-top:.8em;font-size:1rem;color:#9b958c}

/* ---- feature (image + copy, alternating) ---- */
.feature{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:0;min-height:80vh}
.feature .copy{padding:8vw 6vw;text-align:left}
.feature.flip .copy{order:2}
.feature .copy h2{font-weight:900;font-size:clamp(1.8rem,3.5vw,3rem);line-height:1.12;letter-spacing:-.02em}
.feature .copy p{color:var(--grey);font-size:1.1rem;margin-top:1em;max-width:30em}
.feature .media{height:100%;min-height:60vh;background-size:cover;background-position:center}
.feature.dark{background:var(--black);color:#fff}
.feature.dark p{color:#a1a1a6}

/* ---- detail: テイスティング + 製品スペック表（数字グリッドは使わない） ---- */
.detail{background:var(--black);color:#fff;padding:110px 0}
.detail .wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:60px;align-items:center}
.detail .lead h2{font-weight:900;font-size:clamp(1.8rem,3.5vw,2.8rem);letter-spacing:-.02em;line-height:1.15}
.detail .lead p{color:#a1a1a6;margin-top:1em;font-size:1.05rem}
.notes{display:flex;gap:.6em;flex-wrap:wrap;margin-top:1.4em}
.note{border:1px solid #3a352f;color:#d79a5b;border-radius:980px;padding:.4em 1.1em;font-size:.9rem}
.spec-table{width:100%;border-collapse:collapse}
.spec-table tr{border-bottom:1px solid #2a2723}
.spec-table th{text-align:left;color:#86868b;font-weight:500;padding:16px 0;width:38%;font-size:.92rem}
.spec-table td{text-align:right;padding:16px 0;font-weight:600;font-size:1rem}

/* ---- lineup ---- */
.lineup{padding:110px 0;text-align:center;background:var(--paper)}
.line-img{max-width:920px;width:92%;margin:40px auto 0;border-radius:18px;box-shadow:0 30px 60px -30px rgba(0,0,0,.3)}

/* ---- buy band ---- */
.buyband{background:var(--black);color:#fff;text-align:center;padding:120px 0}
.btn-buy{display:inline-block;margin-top:1.4em;background:var(--copper);color:#fff;font-weight:600;
  font-size:1.1rem;padding:.85em 2.4em;border-radius:980px;transition:.2s}
.btn-buy:hover{background:var(--copper-lt);transform:translateY(-2px)}
.buyband .fine{color:#86868b;font-size:.85rem;margin-top:1.4em}

/* ---- footer ---- */
.foot{background:#f5f5f7;color:#6e6e73;font-size:.8rem;padding:40px 0 60px;line-height:1.7}
.foot a{color:var(--copper)}
.foot .disc{border-top:1px solid var(--line);margin-top:18px;padding-top:18px;color:#86868b}

/* reveal */
.rv{opacity:0;transform:translateY(30px);transition:.8s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}

@media(max-width:820px){
  .feature{grid-template-columns:1fr}
  .feature .copy{order:2 !important;padding:60px 30px}
  .feature .media{min-height:64vw}
  .specs-grid{grid-template-columns:1fr 1fr;gap:36px 20px}
  .nav-r .hide{display:none}
  .sec{padding:80px 0}
}