/* =========================================================
   crack ― コーヒー焙煎所
   生成り × 墨 × 焙煎の火(赤銅)  /  思想先行の静謐なエディトリアル
   ========================================================= */

:root{
  /* base palette */
  --paper:        #F3ECDD;   /* 生成り(焙煎紙) */
  --paper-2:      #ECE3D0;   /* 一段沈めた面 */
  --paper-3:      #E5DAC3;   /* カード/罫の陰 */
  --sumi:         #23201C;   /* 墨(焙煎された黒) */
  --sumi-2:       #3A342D;
  --ink-soft:     #6A6055;   /* 弱いテキスト */
  --ink-faint:    #9A8F80;
  --line:         rgba(35,32,28,.14);
  --line-2:       rgba(35,32,28,.08);

  /* accent : 焙煎の火 / 赤銅 */
  --ember:        #A8482B;
  --ember-deep:   #8A3A22;
  --ember-soft:   rgba(168,72,43,.14);

  /* roast ramp (design language) */
  --roast-green:      #8E8B5F;
  --roast-light:      #B27A3D;
  --roast-medium:     #8A5330;
  --roast-mediumdark: #5E3623;
  --roast-dark:       #34200F;

  /* dark surface (卸/CTA等の反転面) */
  --night:        #1B1815;
  --night-2:      #262019;

  /* type */
  --mincho: "Shippori Mincho", "Hiragino Mincho ProN", serif;
  --gothic: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", sans-serif;
  --latin:  "Cormorant Garamond", "Times New Roman", serif;

  /* metrics */
  --maxw: 1280px;
  --gut: clamp(20px, 5vw, 88px);
  --ease: cubic-bezier(.16,1,.3,1);
  --ease-spring: cubic-bezier(.34,1.32,.64,1);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  font-family: var(--gothic);
  background: var(--paper);
  color: var(--sumi);
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: .02em;
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  line-break: strict;
  word-break: normal;
  overflow-wrap: anywhere;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
::selection{ background: var(--ember); color: var(--paper); }

/* line-tools */
.nb{ display:inline-block; }              /* 文節改行 */
.nw{ white-space:nowrap; }

/* ---------- layout ---------- */
.container{
  width:100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--gut);
  padding-right: var(--gut);
}
.section{ padding: clamp(72px, 11vw, 176px) 0; position:relative; }
.section--tight{ padding: clamp(52px, 7vw, 104px) 0; }

/* ---------- eyebrow / index label ---------- */
.eyebrow{
  font-family: var(--latin);
  font-size: 13px;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--ember);
  font-weight: 600;
  display:inline-flex;
  align-items:center;
  gap: 14px;
}
.eyebrow::before{
  content:"";
  width: 34px; height:1px;
  background: var(--ember);
  opacity:.7;
}
.eyebrow--plain::before{ display:none; }
.idx{
  font-family: var(--latin);
  font-size: 13px;
  letter-spacing:.3em;
  color: var(--ink-faint);
  font-weight:600;
}

/* ---------- typography ---------- */
.h-hero{
  font-family: var(--mincho);
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: .04em;
  font-size: clamp(2.6rem, 7.2vw, 6.2rem);
}
.h-xl{
  font-family: var(--mincho);
  font-weight: 600;
  line-height: 1.34;
  letter-spacing: .04em;
  font-size: clamp(2rem, 4.6vw, 3.6rem);
}
.h-lg{
  font-family: var(--mincho);
  font-weight: 600;
  line-height: 1.42;
  letter-spacing: .045em;
  font-size: clamp(1.6rem, 3vw, 2.5rem);
}
.h-md{
  font-family: var(--mincho);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .05em;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
}
.lead{
  font-family: var(--mincho);
  font-weight: 500;
  font-size: clamp(1.1rem, 1.7vw, 1.5rem);
  line-height: 2.15;
  letter-spacing: .06em;
  color: var(--sumi-2);
}
.body{
  font-size: clamp(.95rem, 1.05vw, 1.02rem);
  line-height: 2.05;
  color: var(--sumi-2);
  letter-spacing: .03em;
  text-wrap: pretty;
}
.body + .body{ margin-top: 1.5em; }
.muted{ color: var(--ink-soft); }
.latin{ font-family: var(--latin); }
.ember{ color: var(--ember); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.7em;
  font-family: var(--gothic);
  font-size: 14px; font-weight:500;
  letter-spacing:.14em;
  padding: 17px 34px;
  border-radius: 2px;
  background: var(--ember);
  color: var(--paper);
  transition: background .4s var(--ease), transform .4s var(--ease);
  white-space:nowrap;
}
.btn:hover{ background: var(--ember-deep); transform: translateY(-2px); }
.btn .ar{ transition: transform .4s var(--ease); }
.btn:hover .ar{ transform: translateX(4px); }
.btn--ghost{
  background: transparent;
  color: var(--sumi);
  border:1px solid var(--line);
  padding: 16px 33px;
}
.btn--ghost:hover{ background: var(--sumi); color: var(--paper); border-color:var(--sumi); }
.btn--light{ background: var(--paper); color: var(--sumi); }
.btn--light:hover{ background:#fff; }

.textlink{
  display:inline-flex; align-items:center; gap:.6em;
  font-size: 14px; letter-spacing:.12em; font-weight:500;
  color: var(--sumi);
  border-bottom:1px solid var(--line);
  padding-bottom: 4px;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.textlink .ar{ color:var(--ember); transition: transform .4s var(--ease); }
.textlink:hover{ color: var(--ember); border-color: var(--ember); }
.textlink:hover .ar{ transform: translateX(5px); }

/* =========================================================
   HEADER
   ========================================================= */
.hdr{
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  padding: 20px 0;
  transition: background .5s var(--ease), padding .5s var(--ease), box-shadow .5s var(--ease);
}
.hdr__in{
  display:flex; align-items:center; justify-content:space-between;
  gap: 24px;
}
.brand{ display:flex; align-items:baseline; gap:10px; line-height:1; flex-shrink:0; }
.brand__mark,.brand__sub{ white-space:nowrap; }
.brand__mark{
  font-family: var(--latin);
  font-size: 30px; font-weight:600; letter-spacing:.02em;
  color: var(--sumi);
}
.brand__sub{
  font-size: 10px; letter-spacing:.34em; color: var(--ink-soft);
  text-transform: uppercase; font-family: var(--gothic);
}
.nav{ display:flex; align-items:center; gap: clamp(11px, 1.15vw, 21px); }
.nav a{
  font-family: var(--latin);
  font-size: 13.5px; letter-spacing:.13em; text-transform:uppercase;
  font-weight:600; color: var(--sumi-2);
  position:relative; padding: 4px 0; white-space:nowrap;
  transition: color .3s var(--ease);
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:-2px; width:0; height:1px;
  background: var(--ember); transition: width .35s var(--ease);
}
.nav a:hover{ color: var(--ember); }
.nav a:hover::after,.nav a.is-active::after{ width:100%; }
.nav a.is-active{ color: var(--ember); }
.hdr__cta{ margin-left: 6px; }
.hdr__cta .btn{ padding: 12px 22px; font-size: 12.5px; }

/* hero-overlay(透明ヘッダー)時は白文字 */
.hdr.is-hero .brand__mark,
.hdr.is-hero .nav a,
.hdr.is-hero .brand__sub{ color: rgba(247,242,229,.92); }
.hdr.is-hero .nav a:hover{ color:#fff; }
.hdr.is-hero .burger span{ background: var(--paper); }

/* solid(スクロール後) — is-hero より後に置いて勝たせる */
.hdr.is-solid{
  background: rgba(243,236,221,.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 12px 0;
  box-shadow: 0 1px 0 var(--line-2), 0 12px 30px rgba(35,32,28,.05);
}
.hdr.is-solid .brand__mark,
.hdr.is-solid .nav a,
.hdr.is-solid .brand__sub{ color: var(--sumi-2); }
.hdr.is-solid .brand__mark{ color: var(--sumi); }
.hdr.is-solid .burger span{ background: var(--sumi); }

/* burger */
.burger{ display:none; width:42px; height:42px; position:relative; }
.burger span{
  position:absolute; left:9px; width:24px; height:1.6px; background: var(--sumi);
  transition: transform .4s var(--ease), opacity .3s var(--ease), background .4s;
}
.burger span:nth-child(1){ top:15px; }
.burger span:nth-child(2){ top:21px; }
.burger span:nth-child(3){ top:27px; }

/* =========================================================
   DRAWER (mobile / full nav)
   ========================================================= */
.drawer{
  position: fixed; inset:0; z-index: 200;
  background: var(--night);
  color: var(--paper);
  padding: clamp(28px,6vw,64px) var(--gut);
  display:flex; flex-direction:column;
  transform: translateY(-100%);
  transition: transform .6s var(--ease);
  overflow-y: auto;
  visibility: hidden;
}
.drawer.is-open{ transform: translateY(0); visibility: visible; }
.drawer__top{ display:flex; align-items:center; justify-content:space-between; margin-bottom: auto; }
.drawer__top .brand__mark{ color: var(--paper); }
.drawer__top .brand__sub{ color: rgba(247,242,229,.6); }
.drawer__close{
  width:46px; height:46px; position:relative; border:1px solid rgba(247,242,229,.24); border-radius:50%;
}
.drawer__close::before,.drawer__close::after{
  content:""; position:absolute; left:50%; top:50%; width:16px; height:1.4px; background:var(--paper);
}
.drawer__close::before{ transform: translate(-50%,-50%) rotate(45deg); }
.drawer__close::after{ transform: translate(-50%,-50%) rotate(-45deg); }
.drawer__nav{ display:flex; flex-direction:column; gap: clamp(4px,1.2vw,10px); padding: 6vh 0; }
.drawer__nav a{
  display:flex; align-items:baseline; gap:16px;
  font-family: var(--mincho); font-weight:500;
  font-size: clamp(1.6rem, 5vw, 2.4rem); letter-spacing:.06em;
  color: var(--paper); opacity:.92;
  transition: color .3s, opacity .3s, transform .4s var(--ease);
}
.drawer__nav a .num{ font-family: var(--latin); font-size: 13px; letter-spacing:.2em; color: var(--ember); opacity:.9; transform: translateY(-6px); }
.drawer__nav a .en{ font-family:var(--latin); font-size:.62em; letter-spacing:.12em; color: rgba(247,242,229,.5); }
.drawer__nav a:hover{ color: var(--ember); transform: translateX(8px); }
.drawer__foot{
  display:flex; flex-wrap:wrap; gap: 8px 32px; justify-content:space-between;
  border-top:1px solid rgba(247,242,229,.16); padding-top: 26px;
  font-size:13px; letter-spacing:.06em; color: rgba(247,242,229,.66);
}
.drawer__foot a{ color: rgba(247,242,229,.86); }

/* =========================================================
   HERO
   ========================================================= */
.hero{ position:relative; min-height: 100svh; display:flex; align-items:flex-end; overflow:hidden; }
.hero__bg{ position:absolute; inset:0; z-index:0; }
.hero__bg img{ width:100%; height:100%; object-fit:cover; object-position: 60% center; }
.hero__scrim{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(to top, rgba(20,17,14,.72) 0%, rgba(20,17,14,.20) 42%, rgba(20,17,14,.30) 100%),
    linear-gradient(to right, rgba(20,17,14,.42), rgba(20,17,14,0) 55%);
}
.hero__ripple{ position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none; }
.hero__in{ position:relative; z-index:3; width:100%; padding-bottom: clamp(48px, 8vw, 104px); padding-top: 140px; }
.hero__eyebrow{ color: rgba(247,242,229,.82); }
.hero__eyebrow::before{ background: var(--ember); }
.hero h1{ color: var(--paper); margin: 26px 0 0; text-shadow: 0 2px 40px rgba(0,0,0,.35); }
.hero__sub{
  margin-top: 26px; max-width: 42ch;
  color: rgba(247,242,229,.9); font-size: clamp(1rem,1.3vw,1.12rem); line-height: 2.1;
  font-weight:400; letter-spacing:.04em;
}
.hero__actions{ margin-top: 40px; display:flex; flex-wrap:wrap; gap: 16px; }

/* subpage hero */
.phero{ position:relative; padding: clamp(150px,20vh,220px) 0 clamp(48px,8vw,96px); overflow:hidden; }
.phero--img{ min-height: 74vh; display:flex; align-items:flex-end; color: var(--paper); }
.phero--img .phero__bg{ position:absolute; inset:0; z-index:0; }
.phero--img .phero__bg img{ width:100%; height:100%; object-fit:cover; }
.phero--img .phero__scrim{ position:absolute; inset:0; z-index:1;
  background: linear-gradient(to top, rgba(20,17,14,.74), rgba(20,17,14,.12) 60%, rgba(20,17,14,.32)); }
.phero__in{ position:relative; z-index:2; width:100%; }
.phero__kicker{ margin-bottom: 22px; }
.phero--img .eyebrow{ color: rgba(247,242,229,.85); }
.phero--img .eyebrow::before{ background: var(--ember); }
.phero__title{ margin:0; }
.phero--img .phero__title{ color: var(--paper); }
.phero__en{
  font-family: var(--latin); font-size: clamp(1rem,1.4vw,1.15rem);
  letter-spacing:.32em; text-transform:uppercase; color: var(--ember); font-weight:600;
  display:block; margin-bottom: 16px;
}
.phero__lead{ margin-top: 28px; max-width: 60ch; }
.phero--img .phero__lead{ color: rgba(247,242,229,.9); }

/* breadcrumb */
.crumb{ font-family:var(--latin); font-size:12.5px; letter-spacing:.16em; color:var(--ink-faint); text-transform:uppercase; display:flex; gap:10px; }
.crumb a:hover{ color:var(--ember); }

/* =========================================================
   EDITORIAL MODULES
   ========================================================= */
.split{
  display:grid; grid-template-columns: 1fr 1fr; gap: clamp(32px,5vw,90px);
  align-items:center;
}
.split--rev .split__media{ order:2; }
.split__body{ max-width: 46ch; }
.split__body .h-lg, .split__body .h-xl{ margin: 18px 0 26px; }
.figure{ position:relative; overflow:hidden; border-radius:2px; background: var(--paper-3); }
.figure img{ width:100%; height:100%; object-fit:cover; transition: transform 1.4s var(--ease); }
.figure--tall{ aspect-ratio: 4/5; }
.figure--wide{ aspect-ratio: 16/10; }
.figure--sq{ aspect-ratio: 1/1; }
.figure__cap{
  position:absolute; left:0; bottom:0; padding: 12px 16px;
  font-family:var(--latin); font-size:12px; letter-spacing:.14em; color: var(--paper);
  background: linear-gradient(to top, rgba(20,17,14,.6), transparent);
  width:100%;
}
.reveal-img:hover .figure img{ transform: scale(1.04); }

.leadblock{ max-width: 40ch; }
.center-lead{ max-width: 30ch; margin: 0 auto; text-align:center; }
.center-wrap{ text-align:center; }

/* pull quote */
.pull{
  font-family: var(--mincho);
  font-weight:600;
  font-size: clamp(1.6rem, 3.6vw, 3rem);
  line-height: 1.7;
  letter-spacing: .07em;
  text-align:center;
  max-width: 22ch; margin: 0 auto;
}
.pull .ember{ color:var(--ember); }

/* number/point list */
.points{ display:grid; gap: 2px; border-top:1px solid var(--line); }
.point{
  display:grid; grid-template-columns: 64px 1fr; gap: 20px;
  padding: 30px 4px; border-bottom:1px solid var(--line);
  align-items:baseline;
}
.point__no{ font-family:var(--latin); font-size: 15px; letter-spacing:.2em; color: var(--ember); font-weight:600; }
.point__t{ font-family:var(--mincho); font-size: clamp(1.05rem,1.5vw,1.28rem); font-weight:600; letter-spacing:.04em; }
.point__d{ margin-top: 8px; }

/* feature grid (3col) */
.grid3{ display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(20px,3vw,44px); }
.grid2{ display:grid; grid-template-columns: repeat(2,1fr); gap: clamp(24px,3.4vw,56px); }

/* nav-card (page routing) */
.navcards{ display:grid; grid-template-columns: repeat(3,1fr); gap: 2px; background: var(--line); border:1px solid var(--line); }
.navcard{
  background: var(--paper); padding: clamp(26px,3vw,42px);
  display:flex; flex-direction:column; gap: 12px; min-height: 200px;
  transition: background .4s var(--ease), transform .4s var(--ease);
}
.navcard:hover{ background: var(--paper-2); }
.navcard__no{ font-family:var(--latin); font-size:13px; letter-spacing:.24em; color:var(--ink-faint); }
.navcard__en{ font-family:var(--latin); font-size:12px; letter-spacing:.28em; text-transform:uppercase; color:var(--ember); font-weight:600; }
.navcard__t{ font-family:var(--mincho); font-size: clamp(1.15rem,1.7vw,1.45rem); font-weight:600; letter-spacing:.04em; margin-top:auto; }
.navcard__d{ font-size:13.5px; color:var(--ink-soft); line-height:1.85; }
.navcard .ar{ color:var(--ember); transition: transform .4s var(--ease); }
.navcard:hover .ar{ transform: translateX(5px); }

/* =========================================================
   BEANS
   ========================================================= */
.beans-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(20px,2.6vw,40px); }
.bean{ display:flex; flex-direction:column; }
.bean__media{ position:relative; aspect-ratio:1/1; overflow:hidden; border-radius:2px; background:var(--paper-3); }
.bean__media img{ width:100%; height:100%; object-fit:cover; transition: transform 1.2s var(--ease); }
.bean:hover .bean__media img{ transform: scale(1.05); }
.bean__swatch{ position:absolute; top:14px; left:14px; display:flex; align-items:center; gap:8px;
  background: rgba(243,236,221,.92); padding: 6px 12px 6px 8px; border-radius:2px; backdrop-filter: blur(4px); }
.bean__dot{ width:12px; height:12px; border-radius:50%; }
.bean__level{ font-size:11.5px; letter-spacing:.1em; color:var(--sumi); font-weight:500; }
.bean__head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-top:20px; }
.bean__name{ font-family:var(--mincho); font-size: clamp(1.15rem,1.6vw,1.4rem); font-weight:600; letter-spacing:.05em; }
.bean__en{ font-family:var(--latin); font-size:12.5px; letter-spacing:.16em; color:var(--ink-faint); text-transform:uppercase; }
.bean__desc{ margin-top:10px; font-size:14px; line-height:1.95; color:var(--sumi-2); }
.bean__meter{ margin-top:16px; }

/* roast meter bar */
.rmeter{ height:4px; border-radius:4px; background: var(--paper-3); position:relative; overflow:hidden; }
.rmeter__fill{ position:absolute; inset:0 auto 0 0; border-radius:4px;
  background: linear-gradient(to right, var(--roast-light), var(--roast-dark)); }
.rmeter__labels{ display:flex; justify-content:space-between; margin-top:8px; font-family:var(--latin); font-size:11px; letter-spacing:.14em; color:var(--ink-faint); text-transform:uppercase; }

/* =========================================================
   ROAST LEVEL scale
   ========================================================= */
.roastscale{ display:grid; grid-template-columns: repeat(5,1fr); gap:2px; border-radius:2px; overflow:hidden; }
.roastscale__seg{ height: clamp(90px,10vw,140px); display:flex; align-items:flex-end; padding:16px; position:relative; }
.roastscale__seg span{ font-family:var(--latin); font-size:12px; letter-spacing:.14em; color: rgba(247,242,229,.92); text-transform:uppercase; }
.rlevel{ display:grid; grid-template-columns: 150px 1fr; gap: clamp(20px,3vw,52px); padding: 34px 0; border-bottom:1px solid var(--line); align-items:start; }
.rlevel:first-of-type{ border-top:1px solid var(--line); }
.rlevel__key{ display:flex; flex-direction:column; gap:10px; }
.rlevel__swatch{ width:100%; height:8px; border-radius:6px; }
.rlevel__jp{ font-family:var(--mincho); font-size: clamp(1.2rem,1.8vw,1.5rem); font-weight:600; letter-spacing:.06em; }
.rlevel__en{ font-family:var(--latin); font-size:12px; letter-spacing:.2em; color:var(--ink-faint); text-transform:uppercase; }
.rlevel__body .h-md{ margin-bottom:10px; }

/* choose list */
.choose{ display:grid; gap:2px; }
.choose__row{ display:grid; grid-template-columns: 200px 1fr; gap:24px; padding:26px 4px; border-bottom:1px solid var(--line); align-items:baseline; }
.choose__row:first-child{ border-top:1px solid var(--line); }
.choose__q{ font-family:var(--mincho); font-size:1.15rem; font-weight:600; letter-spacing:.04em; }
.choose__a{ color:var(--sumi-2); }
.choose__a b{ color:var(--ember); font-weight:600; font-family:var(--mincho); }

/* =========================================================
   DARK SECTION (卸 / CTA)
   ========================================================= */
.dark{ background: var(--night); color: var(--paper); position:relative; overflow:hidden; }
.dark .eyebrow{ color: var(--ember); }
.dark .body,.dark .lead{ color: rgba(247,242,229,.82); }
.dark .h-xl,.dark .h-lg,.dark .pull{ color: var(--paper); }
.dark .btn--ghost{ color: var(--paper); border-color: rgba(247,242,229,.3); }
.dark .btn--ghost:hover{ background: var(--paper); color: var(--sumi); }
.dark .points,.dark .point{ border-color: rgba(247,242,229,.16); }
.dark .point__d{ color: rgba(247,242,229,.72); }

/* cta band */
.cta{ text-align:center; }
.cta .h-xl{ margin: 18px auto 30px; max-width: 20ch; }
.cta__actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

/* =========================================================
   COMPANY table / info
   ========================================================= */
.spec{ border-top:1px solid var(--line); }
.spec__row{ display:grid; grid-template-columns: 240px 1fr; gap:24px; padding: 22px 4px; border-bottom:1px solid var(--line); }
.spec__k{ font-family:var(--latin); font-size:13px; letter-spacing:.14em; color:var(--ink-soft); text-transform:uppercase; }
.spec__k .jp{ font-family:var(--gothic); font-size:14px; letter-spacing:.06em; color:var(--sumi); display:block; text-transform:none; margin-top:2px; }
.spec__v{ font-size:15px; color:var(--sumi-2); line-height:1.9; }
.spec__v a:hover{ color:var(--ember); }

/* contact cards */
.info-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:2px; background:var(--line); border:1px solid var(--line); }
.info{ background:var(--paper); padding: clamp(24px,3vw,40px); }
.info__k{ font-family:var(--latin); font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--ember); font-weight:600; }
.info__v{ font-family:var(--mincho); font-size:1.3rem; font-weight:600; margin-top:10px; letter-spacing:.03em; }
.info__d{ font-size:13.5px; color:var(--ink-soft); margin-top:6px; }

/* =========================================================
   FOOTER
   ========================================================= */
.footer{ background: var(--night); color: var(--paper); padding: clamp(60px,8vw,104px) 0 40px; }
.footer__top{ display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(28px,4vw,64px); padding-bottom: 56px; border-bottom:1px solid rgba(247,242,229,.14); }
.footer__brand .brand__mark{ color:var(--paper); font-size:34px; }
.footer__brand .brand__sub{ color: rgba(247,242,229,.55); }
.footer__tag{ font-family:var(--mincho); font-size:1.15rem; letter-spacing:.08em; margin-top:20px; color: rgba(247,242,229,.9); }
.footer__note{ font-size:13px; color: rgba(247,242,229,.6); margin-top:16px; line-height:1.9; max-width: 34ch; }
.footer__col h4{ font-family:var(--latin); font-size:12px; letter-spacing:.24em; text-transform:uppercase; color: var(--ember); font-weight:600; margin-bottom:20px; }
.footer__col ul{ list-style:none; display:flex; flex-direction:column; gap:12px; }
.footer__col a{ font-size:14px; color: rgba(247,242,229,.82); letter-spacing:.04em; transition:color .3s; }
.footer__col a:hover{ color: var(--ember); }
.footer__bottom{ display:flex; flex-wrap:wrap; gap:12px 24px; justify-content:space-between; align-items:center; padding-top:28px; }
.footer__copy{ font-family:var(--latin); font-size:12px; letter-spacing:.14em; color: rgba(247,242,229,.5); text-transform:uppercase; }
.footer__addr{ font-size:12.5px; color: rgba(247,242,229,.55); letter-spacing:.04em; }

/* =========================================================
   reveal
   ========================================================= */
.reveal{ opacity:0; transform: translateY(28px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }
/* no-js failsafe: JSが動かない環境では全て表示 */
html.no-js .reveal{ opacity:1 !important; transform:none !important; }
.reveal[data-d="1"]{ transition-delay:.08s; }
.reveal[data-d="2"]{ transition-delay:.16s; }
.reveal[data-d="3"]{ transition-delay:.24s; }
.reveal[data-d="4"]{ transition-delay:.32s; }
.line-rise{ overflow:hidden; }

/* progress bar */
.progress{ position:fixed; top:0; left:0; height:2px; width:0; background: var(--ember); z-index:150; transition: width .1s linear; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1300px){ .hdr__cta{ display:none; } }
@media (max-width: 1180px){
  .nav{ display:none; }
  .burger{ display:block; }
  .navcards{ grid-template-columns: repeat(2,1fr); }
  .beans-grid{ grid-template-columns: repeat(2,1fr); }
  .grid3{ grid-template-columns: 1fr 1fr; }
  .footer__top{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px){
  :root{ --gut: 22px; }
  .split{ grid-template-columns: 1fr; gap: 30px; }
  .split--rev .split__media{ order:0; }
  .grid3, .grid2, .navcards, .beans-grid{ grid-template-columns: 1fr; }
  .navcards{ gap:1px; }
  .point{ grid-template-columns: 44px 1fr; gap:14px; }
  .rlevel{ grid-template-columns: 1fr; gap:14px; }
  .choose__row{ grid-template-columns: 1fr; gap:8px; }
  .spec__row{ grid-template-columns: 1fr; gap:6px; padding:18px 2px; }
  .info-grid{ grid-template-columns: 1fr; }
  .footer__top{ grid-template-columns: 1fr; gap:36px; }
  .roastscale{ grid-template-columns: repeat(5,1fr); }
  .roastscale__seg{ height: 72px; padding:8px; }
  .roastscale__seg span{ font-size:9px; letter-spacing:.05em; }
  .hero__actions{ gap:12px; }
  .hero__actions .btn{ padding:15px 26px; }
}
@media (max-width: 420px){
  .roastscale__seg span{ display:none; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition-duration:.001s !important; }
  html{ scroll-behavior:auto; }
}