/* ============================================================
   煌めき Kirameki — Design System
   Brand: Gold #B8860B / Cream / Deep Green / Dark warm
   Type : Shippori Mincho (JP) + Cormorant Garamond (EN)
   ============================================================ */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul, ol { list-style: none; }

/* ---------- Tokens ---------- */
:root {
  /* color */
  --paper:      #f3ede1;   /* warm cream base */
  --paper-2:    #ece4d4;   /* slightly deeper paper */
  --card:       #fbf8f1;   /* card surface */
  --ink:        #1c1813;   /* warm near-black text */
  --ink-soft:   #6a6052;   /* muted body text */
  --ink-faint:  #9a8f7e;   /* captions */
  --line:       #d8cdb8;   /* hairlines on light */

  --gold:       #b8860b;   /* primary brand gold */
  --gold-deep:  #936b08;
  --gold-light: #d8b771;   /* gold text on dark */
  --gold-pale:  #e7d7ad;

  --green:      #41624a;   /* deep accent green */
  --green-soft: #6f8a73;

  --yellow:     #d9a521;   /* apple tag accent */

  --dark:       #16120b;   /* immersive dark sections */
  --dark-2:     #211b11;
  --dark-soft:  #2c2417;
  --on-dark:    #ece3cf;   /* text on dark */
  --on-dark-soft:#a99e83;

  /* type */
  --font-jp: "Shippori Mincho", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", serif;
  --font-en: "Cormorant Garamond", "Shippori Mincho", serif;
  --font-mono: "Courier New", ui-monospace, monospace;

  /* spacing rhythm */
  --gut: clamp(20px, 5vw, 80px);   /* page gutter */
  --sec: clamp(72px, 11vw, 168px); /* section vertical padding */
  --maxw: 1440px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ---------- Base ---------- */
body {
  font-family: var(--font-jp);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.85;
  font-feature-settings: "palt" 1;
  overflow-x: hidden;
}

/* washi paper grain layered over the page */
.grain::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 9000;
  opacity: .035; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Layout helpers ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
.section { padding-block: var(--sec); position: relative; }
.dark { background: var(--dark); color: var(--on-dark); }
.dark .lead { color: var(--on-dark-soft); }

/* ---------- Type scale ---------- */
.eyebrow {
  font-family: var(--font-en);
  font-size: clamp(.7rem, .8vw, .82rem);
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 600;
}
.dark .eyebrow { color: var(--gold-light); }

.display {
  font-family: var(--font-jp);
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: .04em;
  text-wrap: balance;
}
.lead {
  color: var(--ink-soft);
  font-size: clamp(.92rem, 1.05vw, 1.02rem);
  line-height: 2.1;
  letter-spacing: .03em;
}

/* big section index numerals */
.idx {
  font-family: var(--font-en);
  font-weight: 500;
  font-style: italic;
  color: var(--gold);
  line-height: 1;
  font-size: clamp(1.1rem, 1.4vw, 1.35rem);
}
.idx::before { content: ""; }

/* vertical writing */
.vertical {
  writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: .12em;
}

/* En script accent (used behind JP titles) */
.script {
  font-family: var(--font-en);
  font-style: italic;
  font-weight: 400;
  color: var(--gold);
  letter-spacing: .02em;
}

/* ---------- Buttons ---------- */
.btn {
  --bg: var(--gold);
  --fg: #fff;
  display: inline-flex; align-items: center; gap: .9em;
  padding: 1.05em 1.9em;
  font-family: var(--font-jp);
  font-size: clamp(.82rem, .95vw, .92rem);
  letter-spacing: .14em;
  font-weight: 500;
  background: var(--bg); color: var(--fg);
  position: relative; overflow: hidden;
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease);
  isolation: isolate;
}
.btn .arrow { transition: transform .5s var(--ease-out); }
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, var(--gold-deep), var(--gold) 40%, var(--gold-light) 55%, var(--gold) 70%, var(--gold-deep));
  background-size: 250% 100%; background-position: 100% 0;
  opacity: 0; transition: opacity .5s var(--ease), background-position 1.1s var(--ease);
}
.btn:hover { box-shadow: 0 14px 36px -14px rgba(184,134,11,.7); }
.btn:hover::before { opacity: 1; background-position: 0 0; }
.btn:hover .arrow { transform: translateX(6px); }

.btn--ghost {
  --bg: transparent; --fg: var(--ink);
  border: 1px solid var(--line);
  padding: .95em 1.7em;
}
.btn--ghost::before { background: var(--ink); opacity: 0; transition: opacity .4s var(--ease); }
.btn--ghost:hover { --fg: var(--paper); box-shadow: none; border-color: var(--ink); }
.btn--ghost:hover::before { opacity: 1; }

.dark .btn--ghost { --fg: var(--on-dark); border-color: rgba(236,227,207,.28); }
.dark .btn--ghost::before { background: var(--gold); }
.dark .btn--ghost:hover { --fg: #1c1813; border-color: var(--gold); }

.btn--line {
  --fg: var(--ink);
  display: inline-flex; align-items: center; gap: .8em;
  font-size: clamp(.8rem,.9vw,.88rem); letter-spacing: .12em;
  padding-bottom: .5em; color: var(--fg);
  border-bottom: 1px solid var(--line);
  transition: gap .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease);
}
.btn--line .arrow { transition: transform .45s var(--ease-out); }
.btn--line:hover { gap: 1.3em; border-color: var(--gold); color: var(--gold-deep); }
.btn--line:hover .arrow { transform: translateX(5px); }
.dark .btn--line { color: var(--on-dark); border-color: rgba(236,227,207,.25); }
.dark .btn--line:hover { color: var(--gold-light); border-color: var(--gold-light); }

.btn--line.gold { color: var(--gold-deep); border-color: rgba(184,134,11,.4); }

/* ---------- Image slots (placeholder styling) ---------- */
image-slot {
  --is-bg: linear-gradient(135deg, #e9e0cd, #ddd2ba);
  background: var(--is-bg);
  position: relative; overflow: hidden;
  display: block;
}
image-slot::part(placeholder),
image-slot .is-empty { font-family: var(--font-mono); }
.slot-dark { --is-bg: linear-gradient(135deg, #221c12, #2e2516); }
/* striped placeholder fallback look handled by component; ensure mono caption */

/* ---------- Image placeholder label (mirrors pages.css .ph-fill; the
   front page doesn't load pages.css, so the product rail needs its own
   copy to show a "ただいま準備中です" label before a photo is set) ---------- */
.ph-fill {
  position: relative;
  display: block;
  width: 100%;
  background:
    linear-gradient(135deg, rgba(184,134,11,.16), rgba(65,98,74,.14)),
    var(--paper-2);
  overflow: hidden;
}
.ph-fill::after {
  content: attr(data-label);
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: .72rem; letter-spacing: .16em;
  color: var(--ink-faint);
  text-align: center; padding: 1rem;
}

/* ---------- Reveal animations (scroll) ---------- */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-out); will-change: opacity, transform; }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }
.reveal.d4 { transition-delay: .32s; }
.reveal-x { opacity: 0; transform: translateX(-40px); transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-out); }
.reveal-x.in { opacity: 1; transform: none; }
.reveal-clip { clip-path: inset(0 100% 0 0); transition: clip-path 1.2s var(--ease-out); }
.reveal-clip.in { clip-path: inset(0 0 0 0); }

/* image rise+scale reveal */
.img-reveal { overflow: hidden; }
.img-reveal > * { transform: scale(1.18); transition: transform 1.6s var(--ease-out); }
.img-reveal.in > * { transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-x, .reveal-clip, .img-reveal > * { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------- Hairline divider with gold node ---------- */
.rule { height: 1px; background: var(--line); position: relative; }
.dark .rule { background: rgba(236,227,207,.16); }

/* gold thin marker line used beside section numbers */
.tick { width: 46px; height: 1px; background: var(--gold); display: inline-block; vertical-align: middle; }

/* utility */
.u-gold { color: var(--gold-deep); }
.dark .u-gold { color: var(--gold-light); }
.center { text-align: center; }
.nowrap { white-space: nowrap; }


/* ============================================================
   煌めき — Home (LP) layout. Mobile-first.
   ============================================================ */

/* ---------------- Header ---------------- */
.site-head {
  position: fixed; inset: 0 0 auto 0; z-index: 1000;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: clamp(14px, 2.4vw, 26px) var(--gut);
  color: var(--on-dark);
  transition: background .6s var(--ease), padding .5s var(--ease), transform .5s var(--ease), box-shadow .6s var(--ease), color .6s var(--ease);
  transform: translateY(0);
}
.site-head.is-scrolled {
  background: rgba(20,16,10,.82);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  padding-block: clamp(10px, 1.5vw, 14px);
  box-shadow: 0 1px 0 rgba(236,227,207,.08);
}
.site-head.is-hidden { transform: translateY(-115%); }

.brand-mark { display: flex; align-items: center; gap: .7rem; line-height: 1; }
.brand-mark .jp {
  font-family: var(--font-jp); font-weight: 700;
  font-size: clamp(1.35rem, 2.2vw, 1.7rem); letter-spacing: .14em;
  color: var(--on-dark);
}
.brand-mark .en {
  font-family: var(--font-en); font-style: italic; font-weight: 500;
  font-size: .72rem; letter-spacing: .3em; color: var(--gold-light);
  text-transform: uppercase; padding-left: .9rem; position: relative;
}
.brand-mark .en::before { content:""; position:absolute; left:0; top:50%; width:1px; height:1.4em; background: rgba(236,227,207,.3); transform: translateY(-50%); }
.brand-mark .brand-logo { display:flex; align-items:center; line-height:0; }
.brand-mark .brand-logo svg { height: clamp(34px, 3.6vw, 50px); width: auto; display:block; color: var(--on-dark); }

.nav-main { display: none; }
@media (min-width: 1080px) {
  .nav-main { display: flex; align-items: center; gap: clamp(1.1rem, 2vw, 2.1rem); }
  .nav-main a {
    font-size: .86rem; letter-spacing: .1em; position: relative; padding-block: .4em;
    color: var(--on-dark); opacity: .92; transition: opacity .35s var(--ease);
  }
  .nav-main a::after {
    content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
    background: var(--gold-light); transform: scaleX(0); transform-origin: left;
    transition: transform .45s var(--ease-out);
  }
  .nav-main a:hover { opacity: 1; }
  .nav-main a:hover::after { transform: scaleX(1); }
}
.head-cta { display: none; }
@media (min-width: 1080px) { .head-cta { display: inline-flex; } }

/* burger */
.burger { display: inline-flex; flex-direction: column; gap: 6px; width: 38px; height: 30px; justify-content: center; align-items: flex-end; }
@media (min-width: 1080px) { .burger { display: none; } }
.burger span { display:block; height:1.5px; width:26px; background: var(--on-dark); transition: transform .45s var(--ease), opacity .3s var(--ease), width .45s var(--ease); }
.burger span:nth-child(2){ width: 20px; }
.burger.active span:nth-child(1){ transform: translateY(7.5px) rotate(45deg); width:26px; }
.burger.active span:nth-child(2){ opacity:0; }
.burger.active span:nth-child(3){ transform: translateY(-7.5px) rotate(-45deg); width:26px; }

/* drawer */
.drawer { position: fixed; inset: 0; z-index: 999; visibility: hidden; }
.drawer::before { content:""; position:absolute; inset:0; background: rgba(10,8,5,.5); opacity:0; transition: opacity .5s var(--ease); }
.drawer-panel {
  position: absolute; top:0; right:0; height:100%; width: min(86vw, 420px);
  background: var(--dark); color: var(--on-dark);
  padding: clamp(80px,14vw,110px) clamp(28px,7vw,46px) 40px;
  transform: translateX(100%); transition: transform .6s var(--ease-out);
  display: flex; flex-direction: column;
  border-left: 1px solid rgba(216,183,113,.18);
}
.drawer.open { visibility: visible; }
.drawer.open::before { opacity: 1; }
.drawer.open .drawer-panel { transform: none; }
.drawer-panel a.dl {
  font-size: 1.18rem; letter-spacing: .08em; padding-block: .85rem;
  border-bottom: 1px solid rgba(236,227,207,.12);
  display: flex; align-items: baseline; justify-content: space-between;
  transition: color .35s var(--ease), padding-left .4s var(--ease);
}
.drawer-panel a.dl .n { font-family: var(--font-en); font-style: italic; font-size:.7rem; color: var(--gold-light); }
.drawer-panel a.dl:hover { color: var(--gold-light); padding-left: .5rem; }
.drawer-cta { margin-top: auto; padding-top: 2rem; display: grid; gap: .8rem; }

/* scroll progress */
.progress { position: fixed; top:0; left:0; height: 2px; width:100%; transform-origin:left; transform: scaleX(0); background: linear-gradient(90deg, var(--gold-deep), var(--gold-light)); z-index: 1001; }

/* ---------------- Hero ---------------- */
.hero { position: relative; min-height: 100svh; display: flex; align-items: stretch; overflow: hidden; background: var(--dark); color: var(--on-dark); }
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg image-slot { position:absolute; inset: -6% 0 0 0; width:100%; height: 112%; }
.hero-bg .hero-photo { position:absolute; inset:-12% 0 0 0; width:100%; height:124%; object-fit:cover; z-index:0; }
.hero-bg::after {
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(100deg, rgba(14,11,7,.94) 0%, rgba(14,11,7,.62) 34%, rgba(14,11,7,.18) 62%, rgba(14,11,7,.42) 100%),
    linear-gradient(to top, rgba(14,11,7,.85), transparent 30%);
}
.hero-inner { position: relative; z-index: 3; width:100%; max-width: var(--maxw); margin-inline:auto; padding: clamp(110px,16vw,150px) var(--gut) clamp(40px,7vw,70px); display:flex; flex-direction:column; }

.hero-tagline {
  font-size: clamp(.74rem,1.6vw,.84rem); letter-spacing: .26em; line-height: 2.2;
  color: var(--on-dark-soft); margin-bottom: auto;
}
.hero-head {
  font-family: var(--font-jp); font-weight: 600;
  font-size: clamp(2.9rem, 12vw, 5rem); letter-spacing: .06em; line-height: 1.28;
  color: #fdfaf2; text-shadow: 0 2px 40px rgba(0,0,0,.4);
}
.hero-foot { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-top: clamp(28px,5vw,46px); }
.scroll-cue { display:flex; align-items:center; gap:.8rem; font-family: var(--font-en); font-size:.66rem; letter-spacing:.34em; color: var(--on-dark-soft); }
.scroll-cue .ln { width: 54px; height:1px; background: var(--gold-light); position:relative; overflow:hidden; }
.scroll-cue .ln::after { content:""; position:absolute; inset:0; width:40%; background: var(--on-dark); animation: cue 2.4s var(--ease) infinite; }
@keyframes cue { 0%{ transform: translateX(-110%);} 60%,100%{ transform: translateX(260%);} }

@media (min-width: 880px) {
  .hero-inner { display: grid; grid-template-columns: auto 1fr; align-items: stretch; }
  .hero-tagline { writing-mode: vertical-rl; align-self: start; margin: 0; height: 100%; padding-top: .5rem; }
  .hero-head { writing-mode: vertical-rl; justify-self: center; align-self: center; font-size: clamp(2.2rem, 4.6vw, 3.9rem); line-height: 1.5; letter-spacing: .08em; }
  .hero-foot { position: absolute; left: var(--gut); right: var(--gut); bottom: clamp(34px,5vw,54px); }
}

/* ---------------- Editorial sections ---------------- */
.edi { display: grid; gap: clamp(28px, 5vw, 56px); align-items: center; }
@media (min-width: 900px) {
  .edi { grid-template-columns: 1fr 1.15fr; }
  .edi.rev { grid-template-columns: 1.15fr 1fr; }
}
.edi-text { display: flex; flex-direction: column; gap: clamp(18px,2.4vw,26px); }
.sec-head { display: flex; align-items: flex-start; gap: clamp(14px,2vw,22px); }
.sec-head .idx { padding-top: .4em; }
.sec-title {
  font-family: var(--font-jp); font-weight: 600;
  font-size: clamp(1.7rem, 4.4vw, 2.7rem); line-height: 1.5; letter-spacing: .05em;
}
@media (min-width: 900px){
  .sec-head--v .sec-vlabel { writing-mode: vertical-rl; font-size: clamp(1.1rem,1.5vw,1.3rem); letter-spacing:.28em; color: var(--ink-soft); font-weight: 500; padding-top:.3em; }
  .sec-title--v { writing-mode: vertical-rl; }
}
/* ===== editorial unified layout (mockup) ===== */
.sec-split { display:flex; gap: clamp(18px,2.6vw,40px); align-items:flex-start; }
.sec-aside { display:flex; flex-direction:column; align-items:center; text-align:center; gap: clamp(14px,1.8vw,22px); flex:0 0 auto; padding-top:.3em; }
.sec-aside .vlabel { writing-mode: vertical-rl; font-size: clamp(1rem,1.4vw,1.25rem); letter-spacing:.3em; color: var(--ink-soft); font-weight:500; }
.dark .sec-aside .vlabel { color: var(--on-dark-soft); }
#story .sec-aside .vlabel, #land .sec-aside .vlabel, #philosophy .sec-aside .vlabel { writing-mode: horizontal-tb; letter-spacing:.12em; white-space:nowrap; }
#products .sec-aside .vlabel, #news .sec-aside .vlabel { writing-mode: horizontal-tb !important; font-size: clamp(2.5rem, 6vw, 3.7rem) !important; font-weight:600; letter-spacing:.02em; color: var(--ink); white-space:nowrap; }
#products .sec-aside, #news .sec-aside { flex-direction:row; align-items:center; gap: clamp(10px,1.3vw,18px); padding-top:0; }
.sec-aside .tick { display:block; width: clamp(22px,2.4vw,32px); height:1px; background: var(--line); margin:.15em 0 .1em; }
.dark .sec-aside .tick { background: rgba(236,227,207,.28); }
.foot-brand .foot-logo { line-height:0; margin-bottom:.2rem; width:150px !important; max-width:100% !important; }
.foot-brand .foot-logo svg { width:100%; height:auto; display:block; color: var(--on-dark); }
.sec-body { display:flex; flex-direction:column; gap: clamp(18px,2.2vw,26px); }
.sec-body .sec-title { font-size: clamp(1.6rem, 3.4vw, 2.5rem); line-height:1.62; }
.sec-body .lead { line-height: 2.42; }
.land-grid { display:grid; grid-template-columns: auto minmax(0,1.7fr) minmax(0,1fr); gap: clamp(24px,3.4vw,52px); align-items:center; }
.land-grid .sec-aside { justify-self: start; }
.land-grid .sec-body { text-align:left; align-items:flex-start; }
.philo-grid2 { position:relative; z-index:2; display:grid; grid-template-columns: minmax(0,52%); align-items:center; }
#story { overflow:hidden; }
.story-bg { position:absolute; inset:0; z-index:0; pointer-events:none; }
.story-bg .photo-bleed { position:absolute; top:0; right:0; height:100%; width:72%; object-fit:cover; -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 50%); mask-image: linear-gradient(to right, transparent 0%, #000 50%); }
.story-bg::after { content:""; position:absolute; inset:0; background: linear-gradient(to right, var(--paper) 0%, rgba(243,237,225,.55) 30%, rgba(243,237,225,0) 60%); }
.story-grid { position:relative; z-index:2; display:grid; grid-template-columns: minmax(0,52%); align-items:center; }
@media (max-width:860px){ .story-grid { grid-template-columns:1fr; } .story-bg .photo-bleed { width:100%; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 65%); mask-image: linear-gradient(to bottom, transparent, #000 65%); } .story-bg::after { background: linear-gradient(to bottom, var(--paper) 0%, rgba(243,237,225,0) 70%); } }
.philo-bg2 { position:absolute; inset:0; z-index:0; pointer-events:none; }
.philo-bg2 .photo-bleed { position:absolute; top:0; right:0; height:100%; width:72%; object-fit:cover; -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 50%); mask-image: linear-gradient(to right, transparent 0%, #000 50%); }
.philo-bg2::after { content:""; position:absolute; inset:0; background: linear-gradient(to right, var(--dark) 0%, rgba(22,18,11,.6) 30%, rgba(22,18,11,0) 60%); }
@media (max-width:860px){ .philo-grid2 { grid-template-columns:1fr; } .philo-bg2 .photo-bleed { width:100%; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 65%); mask-image: linear-gradient(to bottom, transparent, #000 65%); } .philo-bg2::after { background: linear-gradient(to bottom, var(--dark) 0%, rgba(22,18,11,0) 70%); } }
.philo-figs { display:grid; grid-template-columns:1fr 1fr; gap: clamp(12px,1.4vw,18px); }
.philo-figs figure { overflow:hidden; }
.philo-figs .big { grid-column:1 / -1; }
.philo-figs image-slot { width:100%; height:100%; aspect-ratio:4/3; display:block; }
.photo { display:block; width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; -webkit-mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent), linear-gradient(to bottom, transparent, #000 15%, #000 85%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent), linear-gradient(to bottom, transparent, #000 15%, #000 85%, transparent); mask-composite: intersect; }
.prod-layout { display:grid; grid-template-columns:1fr; gap: clamp(20px,3vw,38px); }
.news-layout { display:grid; grid-template-columns:1fr; gap: clamp(20px,3vw,38px); }
.news-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.news-row { display:grid; grid-template-columns: auto 1fr auto; gap: clamp(16px,2.6vw,44px); align-items:center; padding: clamp(18px,2.2vw,26px) 0; border-top:1px solid var(--line); }
.news-row:last-child { border-bottom:1px solid var(--line); }
.news-row .date { font-family: var(--font-en); font-size:.82rem; letter-spacing:.12em; color: var(--ink-faint); white-space:nowrap; }
.news-row h4 { font-size: clamp(1rem,1.25vw,1.14rem); font-weight:600; line-height:1.65; letter-spacing:.02em; }
.news-row a { white-space:nowrap; }
@media (max-width:680px){ .news-row { grid-template-columns: 1fr; gap:.5rem; } .news-row a{ justify-self:start; } }
#seasons, #makers { display:none !important; }
@media (max-width: 860px){
  .sec-split { flex-direction:column; }
  .land-grid, .philo-grid2, .prod-layout, .news-layout { grid-template-columns:1fr; }
  .land-grid .sec-body { text-align:left; align-items:flex-start; }
  .philo-figs { display:none; }
}

.edi-text.story-layout { flex-direction: row; align-items: stretch; justify-content: flex-start; gap: clamp(20px,3vw,48px); }
.story-left { display:flex; flex-direction:column; justify-content: space-between; align-items: flex-start; gap: clamp(20px,3vw,40px); }
.story-layout > .idx { align-self: flex-start; }
.story-layout > .story-copy { align-self: flex-end; max-width: 30ch; }
.story-copy { display:flex; flex-direction:column; gap: clamp(16px,2vw,24px); max-width: 30ch; }
.story-title { display:flex; flex-direction:column; align-items:center; gap:.7rem; }
.story-layout .sec-title--v { font-size: clamp(1.45rem, 3.6vw, 2.4rem); }
.story-layout > .sec-vlabel { writing-mode: vertical-rl; align-self: flex-start; font-size: clamp(1.05rem,1.4vw,1.25rem); letter-spacing:.28em; color: var(--ink-soft); font-weight:500; }
.dark .story-layout > .sec-vlabel { color: var(--on-dark-soft); }
.dark .story-layout > .idx { color: var(--gold-light); }
@media (max-width: 760px){ .edi-text.story-layout { flex-direction: column; align-items: flex-start; } .story-copy{ max-width:100%; } }
.sec-vlabel { font-size: 1rem; letter-spacing:.28em; color: var(--ink-soft); }
.edi-figure { position: relative; }
.edi-figure image-slot { width:100%; height:auto; aspect-ratio: 4/3; }
.edi-figure.tall image-slot { aspect-ratio: 3/4; }

/* parallax wrap */
.plx { will-change: transform; transform: translateY(var(--py,0)); }

/* ---- feature trio (寒暖差/日照/土壌) ---- */
.feat3 { display: grid; gap: clamp(20px,3vw,30px); margin-top: clamp(34px,5vw,56px); }
@media (min-width: 760px){ .feat3 { grid-template-columns: repeat(3,1fr); } }
.feat { display:flex; flex-direction:column; align-items:center; text-align:center; gap:.9rem; padding: clamp(18px,2.5vw,26px); position: relative; }
.feat + .feat::before { content:""; }
@media (min-width:760px){ .feat:not(:first-child)::before { content:""; position:absolute; left:0; top:18%; height:64%; width:1px; background: var(--line); } }
.feat .ic { width: 46px; height:46px; color: var(--gold); }
.feat h4 { font-size: 1.15rem; font-weight:600; letter-spacing:.14em; }
.feat p { font-size:.86rem; color: var(--ink-soft); line-height:1.9; }

/* ---------------- Philosophy dark block (木との会話) ---------------- */
.philo { position: relative; overflow: hidden; }
.philo .philo-bg { position:absolute; inset:0; z-index:0; }
.philo .philo-bg image-slot { width:100%; height:100%; }
.philo .philo-bg::after { content:""; position:absolute; inset:0; pointer-events:none; background: linear-gradient(95deg, rgba(16,12,7,.96) 0%, rgba(16,12,7,.7) 40%, rgba(16,12,7,.15) 75%, rgba(16,12,7,.45)); }
.philo-grid { position: relative; z-index:2; display:grid; gap: clamp(26px,4vw,40px); align-items:center; }
@media (min-width: 900px){ .philo-grid { grid-template-columns: auto auto 1fr; } }
.philo-label { display:flex; align-items:flex-start; gap: 1rem; }
.philo-label .vlabel { font-size: clamp(1.4rem,3vw,1.9rem); letter-spacing:.3em; font-weight:600; }
@media (min-width:900px){ .philo-label .vlabel { writing-mode: vertical-rl; } }
.philo-big {
  font-family: var(--font-jp); font-weight:600; color:#fdfaf2;
  font-size: clamp(3.4rem, 9vw, 6rem); letter-spacing:.1em; line-height:1.18;
}
@media (min-width:900px){ .philo-big { writing-mode: vertical-rl; line-height:1.36; } }
.philo-copy { display:flex; flex-direction:column; gap:1.4rem; max-width: 30ch; }

/* ---------------- Products ---------------- */
.prod-head { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap: 1.5rem; margin-bottom: clamp(30px,4vw,48px); }
.prod-head .lbl { display:flex; align-items:flex-start; gap: clamp(14px,2vw,22px); }
.prod-head .sec-title { position: relative; }
.prod-head .script { display:block; font-size: clamp(1.4rem,2.4vw,2rem); margin-bottom:-.2em; opacity:.7; }
.prod-rail-wrap { position: relative; min-width:0; }
.prod-main { min-width:0; }
.prod-layout > * { min-width:0; }
.prod-rail {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: minmax(248px, 30%);
  gap: clamp(18px,2.4vw,30px);
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 1rem; margin-inline: 0; padding-inline: 0;
  scrollbar-width: thin; scrollbar-color: rgba(184,134,11,.5) rgba(0,0,0,.06);
}
.prod-rail::-webkit-scrollbar { height: 7px; } .prod-rail::-webkit-scrollbar-track { background: rgba(0,0,0,.05); border-radius:4px; } .prod-rail::-webkit-scrollbar-thumb { background: rgba(184,134,11,.45); border-radius:4px; } .prod-rail::-webkit-scrollbar-thumb:hover { background: rgba(184,134,11,.7); }
@media (min-width: 700px){ .prod-rail { grid-auto-columns: clamp(228px, 22vw, 278px); justify-content:start; margin-inline:0; padding-inline:0; } }
.card { scroll-snap-align: start; display:flex; flex-direction:column; gap: 1.1rem; }
.card .ph { position: relative; overflow: hidden; }
.card .ph image-slot { width:100%; height:auto; aspect-ratio: 4/5; transition: transform 1.2s var(--ease-out); }
.card:hover .ph image-slot { transform: scale(1.05); }
.card .ph .tag { position:absolute; top: 14px; left: 14px; z-index:3; background: var(--gold); color:#fff; font-size:.66rem; letter-spacing:.18em; padding:.4em .8em; }
.card .ph .tag.grape { background: var(--green); }
.card .ph .tag.apple { background: var(--yellow); }
.card h3 { font-size: clamp(1.02rem,1.2vw,1.2rem); font-weight:600; letter-spacing:.03em; line-height:1.5; white-space:nowrap; }
.card p { font-size:.86rem; color: var(--ink-soft); line-height:1.95; }
.card .more { margin-top:auto; }
.rail-nav { display:none; }
@media (min-width:700px){
  .rail-nav { display:flex; gap:.6rem; }
  .rail-nav button { width:48px; height:48px; border:1px solid var(--line); border-radius:50%; display:grid; place-items:center; color: var(--ink); transition: background .4s var(--ease), color .4s var(--ease), border-color .4s, transform .4s var(--ease); }
  .rail-nav button:hover { background: var(--gold); color:#fff; border-color: var(--gold); }
  .rail-nav button:disabled { opacity:.3; cursor: default; }
  .rail-nav button:hover:enabled { transform: translateY(-2px); }
}
.prod-foot { display:flex; justify-content:center; margin-top: clamp(28px,4vw,44px); }

/* ---------------- Seasons (dark) ---------------- */
.seasons-head { display:flex; align-items:center; gap: clamp(14px,2vw,22px); margin-bottom: clamp(30px,4vw,46px); }
.seasons-head .vlabel { font-size: clamp(1.4rem,2.4vw,1.8rem); letter-spacing:.3em; font-weight:600; }
.season-grid { display:grid; gap: 10px; }
@media (min-width: 720px){ .season-grid { grid-template-columns: repeat(4,1fr); gap: clamp(10px,1.4vw,16px); } }
.season { position: relative; overflow: hidden; min-height: clamp(300px, 46vw, 460px); display:flex; align-items:flex-end; }
.season image-slot { position:absolute; inset:0; width:100%; height:100%; transition: transform 1.4s var(--ease-out); }
.season::after { content:""; position:absolute; inset:0; pointer-events:none; background: linear-gradient(to top, rgba(12,9,5,.9), rgba(12,9,5,.15) 60%, rgba(12,9,5,.4)); z-index:1; transition: background .6s var(--ease); }
.season:hover image-slot { transform: scale(1.08); }
.season:hover::after { background: linear-gradient(to top, rgba(12,9,5,.82), rgba(12,9,5,.05) 65%, rgba(12,9,5,.3)); }
.season .lab { position: absolute; left:0; right:0; bottom:0; z-index:3; padding: clamp(18px,2.4vw,28px); width:100%; display:flex; align-items:flex-end; justify-content:space-between; pointer-events:none; }
.season .kanji { font-family: var(--font-jp); font-weight:600; font-size: clamp(2.6rem,5vw,3.4rem); color:#fdfaf2; letter-spacing:.08em; line-height:1; pointer-events:auto; transition: color .4s var(--ease); }
.season .kanji:hover { color: var(--gold-light); }
.season .en { font-family: var(--font-en); font-style:italic; font-size:.74rem; letter-spacing:.2em; color: var(--gold-light); writing-mode: vertical-rl; }
.season .meta { position:absolute; top: clamp(16px,2vw,24px); right: clamp(16px,2vw,24px); z-index:3; pointer-events:none; font-size:.68rem; letter-spacing:.16em; color: var(--on-dark-soft); writing-mode: vertical-rl; }

/* ---------------- Makers (つくる人の哲学) ---------------- */
.makers { display:grid; gap: clamp(26px,4vw,48px); align-items:center; }
@media (min-width: 920px){ .makers { grid-template-columns: .9fr 1.3fr; } }
.makers-imgs { display:grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: repeat(2, auto); gap: clamp(10px,1.4vw,16px); }
.makers-imgs image-slot { width:100%; height:auto; }
.makers-imgs .m1 { grid-row: span 2; aspect-ratio: 3/4.4; }
.makers-imgs .m2 { aspect-ratio: 1/1; }
.makers-imgs .m3 { aspect-ratio: 1/1; }

/* ---------------- News ---------------- */
.news-grid { display:grid; gap: clamp(20px,2.4vw,28px); }
@media (min-width: 760px){ .news-grid { grid-template-columns: repeat(3,1fr); } }
.news-item { display:flex; flex-direction:column; gap: 1rem; }
.news-item .nph { overflow:hidden; }
.news-item .nph image-slot { width:100%; height:auto; aspect-ratio: 16/10; transition: transform 1.1s var(--ease-out); }
.news-item:hover .nph image-slot { transform: scale(1.06); }
.news-item .date { font-family: var(--font-en); font-size:.78rem; letter-spacing:.18em; color: var(--gold-deep); }
.news-item h4 { font-size: 1.02rem; font-weight:600; line-height:1.7; letter-spacing:.04em; }
.news-foot { display:flex; justify-content:flex-end; margin-top: clamp(26px,3vw,40px); }

/* ---------------- CTA band ---------------- */
.ctaband { position: relative; overflow: hidden; color: var(--on-dark); }
.ctaband .cb-bg { position:absolute; inset:0; z-index:0; }
.ctaband .cb-bg image-slot { width:100%; height:100%; }
.ctaband .cb-bg .cta-photo { width:100%; height:100%; object-fit:cover; }
.ctaband .cb-bg::after { content:""; position:absolute; inset:0; pointer-events:none; background: linear-gradient(95deg, rgba(16,12,7,.92), rgba(16,12,7,.55) 60%, rgba(16,12,7,.78)); }
.ctaband-inner { position: relative; z-index:2; display:grid; gap: clamp(28px,4vw,44px); align-items:center; }
@media (min-width: 860px){ .ctaband-inner { grid-template-columns: 1.2fr auto; } }
.ctaband h2 { font-family: var(--font-jp); font-weight:600; font-size: clamp(2rem,5.4vw,3.4rem); line-height:1.5; letter-spacing:.06em; color:#fdfaf2; }
.cta-actions { display:flex; flex-wrap:wrap; gap: 1rem; }
.btn--line2 { --bg: rgba(236,227,207,.06); border:1px solid rgba(236,227,207,.3); }

/* LINE button */
.btn--line-app { --bg: #06C755; --fg:#fff; }
.btn--line-app::before { background: linear-gradient(100deg,#05a648,#06C755 50%,#23e06f); background-size:200% 100%; }
.btn--line-app:hover { box-shadow: 0 14px 36px -14px rgba(6,199,85,.6); }

/* ---------------- Footer ---------------- */
.site-foot { background: var(--dark); color: var(--on-dark); padding-block: clamp(56px,8vw,86px) clamp(28px,4vw,40px); }
.foot-top { display:grid; gap: clamp(34px,5vw,56px); }
@media (min-width: 900px){ .foot-top { grid-template-columns: 1.3fr 2fr; } }
.foot-brand .jp { font-family: var(--font-jp); font-weight:700; font-size: clamp(1.6rem,2.6vw,2rem); letter-spacing:.16em; }
.foot-brand .en { font-family: var(--font-en); font-style:italic; letter-spacing:.28em; color: var(--gold-light); font-size:.74rem; display:block; margin-top:.3rem; }
.foot-brand p { color: var(--on-dark-soft); font-size:.82rem; line-height:2; margin-top:1.2rem; }
.foot-cols { display:grid; grid-template-columns: repeat(2,1fr); gap: clamp(24px,4vw,40px); }
@media (min-width: 620px){ .foot-cols { grid-template-columns: repeat(3,1fr); } }
.foot-col h5 { font-family: var(--font-en); font-size:.7rem; letter-spacing:.24em; color: var(--gold-light); margin-bottom: 1.1rem; text-transform: uppercase; }
.foot-col a { display:block; font-size:.86rem; color: var(--on-dark-soft); padding-block:.5rem; transition: color .35s var(--ease), padding-left .35s var(--ease); }
.foot-col a:hover { color: var(--on-dark); padding-left:.3rem; }
.foot-bottom { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.2rem; margin-top: clamp(40px,6vw,64px); padding-top: clamp(20px,3vw,28px); border-top: 1px solid rgba(236,227,207,.12); }
.foot-social { display:flex; gap:.8rem; }
.foot-social a { width:42px; height:42px; border:1px solid rgba(236,227,207,.2); border-radius:50%; display:grid; place-items:center; transition: background .4s var(--ease), border-color .4s, color .4s; }
.foot-social a:hover { background: var(--gold); border-color: var(--gold); color:#fff; }
.foot-social svg { width:18px; height:18px; }
.copy { font-family: var(--font-en); font-size:.72rem; letter-spacing:.12em; color: var(--on-dark-soft); }

/* gold hairline section divider used on light bg */
.gold-tick-row { display:flex; align-items:center; gap:1rem; }

/* land image: feathered mask all around */
#land .edi-figure { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 13%, #000 87%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 13%, #000 87%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent 0, #000 13%, #000 87%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 13%, #000 87%, transparent 100%); mask-composite: intersect; }
#land .edi-figure .photo { -webkit-mask-image: none !important; mask-image: none !important; }
/* ============ responsive pass ============ */
html { overflow-x: clip; }
.drawer { overflow: hidden; }
img.photo, img.photo-bleed, img.hero-photo { object-position: center; }
@media (max-width: 1200px){ .hero-bg .hero-photo { object-position: 80% 45%; } }

@media (max-width: 1100px){
  .land-grid { grid-template-columns: auto minmax(0,1.35fr) minmax(0,1fr); gap: clamp(18px,2.6vw,34px); }
  .story-grid, .philo-grid2 { grid-template-columns: minmax(0,60%); }
  .story-bg .photo-bleed, .philo-bg2 .photo-bleed { width: 82%; }
}

@media (max-width: 820px){
  #story, #philosophy { display:flex; flex-direction:column; gap: clamp(22px,5vw,36px); }
  .story-bg, .philo-bg2 { position:relative; order:2; inset:auto; height:auto; padding-inline: var(--gut); }
  .story-bg .photo-bleed, .philo-bg2 .photo-bleed {
    position:relative; inset:auto; right:auto; top:auto; width:100%; height:auto; aspect-ratio:16/10;
    -webkit-mask-image:none; mask-image:none; border-radius: clamp(8px,2vw,14px);
  }
  .story-bg::after, .philo-bg2::after { display:none; }
  .story-grid, .philo-grid2 { order:1; grid-template-columns:1fr; }
  .land-grid { grid-template-columns:1fr; }
  .land-grid .sec-body { text-align:left; align-items:flex-start; }
  .prod-layout, .news-layout { grid-template-columns:1fr; }
  .sec-split { flex-direction:row; }
}

@media (max-width: 560px){
  .sec-split { flex-direction:column; gap: clamp(10px,3vw,16px); align-items:flex-start; }
  .sec-body .sec-title { font-size: clamp(1.5rem, 7.4vw, 2rem); }
  .hero-head { font-size: clamp(2.1rem, 12vw, 3rem); }
  .prod-rail { gap: 14px; }
  .news-row { grid-template-columns: 1fr; gap:.45rem; }
  .news-row a { justify-self:start; }
}

#seasons, #makers { display:none !important; }

/* ===== parallax ===== */
.hero-photo, .photo-bleed, .cta-photo, #land .plx { will-change: transform; }
.hero-inner, .sec-aside, .sec-body, .ctaband-inner { will-change: transform; }
.ctaband .cb-bg .cta-photo { position:absolute; left:0; top:-12%; width:100%; height:124%; object-fit:cover; }
@media (min-width:821px){
  .story-bg .photo-bleed, .philo-bg2 .photo-bleed { height:122%; top:-11%; }
  #land .edi-figure { overflow:hidden; aspect-ratio:4/3; }
  #land .edi-figure .plx { height:100%; }
  #land .edi-figure .photo { height:124%; aspect-ratio:auto; object-fit:cover; }
}