@charset "UTF-8";
/* =========================================================
   rice_lp — KOME BASE
   Tone: quiet / modern / generous whitespace / photo-led
   ========================================================= */

:root{
  --ink:        #0B0A09;
  --ink-2:      #131110;
  --ink-3:      #1B1815;
  --paper:      #F4F1EA;
  --paper-2:    #EAE5D9;
  --fg-d:       #EDE8DF;          /* text on dark */
  --fg-l:       #1A1714;          /* text on light */
  --mut-d:      rgba(237,232,223,.52);
  --mut-l:      rgba(26,23,20,.56);
  --rule-d:     rgba(237,232,223,.16);
  --rule-l:     rgba(26,23,20,.14);
  --amber:      #C9974B;
  --gold-d:     #8A6E3C;
  --gold:       #C2A163;
  --gold-l:     #E2CFA6;
  --amber-soft: #E4C08A;

  --mincho: "Shippori Mincho B1","Hiragino Mincho ProN","Yu Mincho",YuMincho,"Noto Serif JP",serif;
  --sans:   "Jost","Helvetica Neue",Helvetica,Arial,"Hiragino Sans","Noto Sans JP",sans-serif;
  --seri:   "Cormorant Garamond",Georgia,"Times New Roman",serif;

  --pad: clamp(22px, 5vw, 96px);
  --gap-sec: clamp(120px, 15vw, 220px);
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-o: cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--ink); color:var(--fg-l);
  font-family:var(--mincho); font-weight:400;
  line-height:1.9; letter-spacing:.06em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%; display:block}
picture{display:contents}
a{color:inherit; text-decoration:none}
button,input,select,textarea{font:inherit; color:inherit}
h1,h2,h3,p,dl,dd,ol,ul,figure{margin:0; padding:0}
ol,ul{list-style:none}
::selection{background:var(--amber); color:#0B0A09}

/* ---------- shared type ---------- */
.eyebrow{
  font-family:var(--sans); font-weight:400; font-size:13px;
  letter-spacing:.3em; text-transform:uppercase; color:rgba(26,23,20,.72);
}
.eyebrow--light{ color:rgba(237,232,223,.72) }
.h2{
  font-family:var(--mincho); font-weight:400; color:var(--fg-l);
  font-size:clamp(28px,4.4vw,58px); line-height:1.5; letter-spacing:.08em;
  margin-top:24px;
}
.h2--light{ color:var(--fg-d) }
.section__head{ padding:0 var(--pad); max-width:1360px; margin:0 auto }
.section__lead{
  margin-top:28px; max-width:30em; color:var(--mut-l); text-wrap:pretty;
  font-size:clamp(13.5px,1.15vw,16px); line-height:2.2; letter-spacing:.08em;
}
.line{ display:block; overflow:hidden }
.line > span{ display:block }

/* ---------- reveal ---------- */
.reveal{ opacity:0; transform:translateY(18px); }
.js .reveal{ transition:opacity 1.15s var(--ease-o) var(--d,0s), transform 1.15s var(--ease-o) var(--d,0s) }
.reveal.is-in{ opacity:1; transform:none }
.no-js .reveal{ opacity:1; transform:none }
.js .line > span{ transform:translateY(105%); transition:transform 1.1s var(--ease-o) var(--d,0s) }
.js .is-in .line > span, .js .line.is-in > span{ transform:none }

/* =========================================================
   00 OPENING
   ========================================================= */
.opening{
  position:fixed; inset:0; z-index:200; background:var(--ink);
  display:grid; place-items:center; pointer-events:none;
  transition:opacity .9s var(--ease) .2s, visibility .9s .2s;
}
.opening__glow{
  position:absolute; width:52vmax; height:52vmax; border-radius:50%;
  background:radial-gradient(circle, rgba(228,192,138,.30) 0%, rgba(201,151,75,.10) 34%, transparent 68%);
  opacity:0; transform:scale(.55); filter:blur(2px);
  animation:glowIn 2.6s var(--ease-o) forwards;
}
.opening__mark img{
  width:clamp(170px, 22vw, 260px); height:auto; opacity:0;
  animation:markIn 1.6s var(--ease-o) .45s forwards;
}
@keyframes glowIn{ 0%{opacity:0;transform:scale(.55)} 55%{opacity:1} 100%{opacity:.9;transform:scale(1)} }
@keyframes markIn{ to{opacity:1} }
body.opened .opening{ opacity:0; visibility:hidden }
body.is-loading{ overflow:hidden; height:100% }

/* =========================================================
   HEADER
   ========================================================= */
.header{
  position:fixed; top:0; left:0; right:0; z-index:120;
  display:flex; align-items:center; justify-content:space-between;
  padding:26px var(--pad); mix-blend-mode:normal;
  transition:background .6s var(--ease), padding .6s var(--ease), border-color .6s;
  border-bottom:1px solid transparent;
}
.header__logo{
  display:flex; align-items:center; gap:13px;
  font-family:var(--sans); font-weight:300; font-size:12.5px; letter-spacing:.3em;
  text-transform:uppercase; color:var(--fg-d); transition:color .5s;
}
.header__mark{ height:30px; width:auto; transition:height .6s var(--ease) }
.header__mark--d{ display:none }
.header.is-light .header__mark--l{ display:none }
.header.is-light .header__mark--d{ display:block }
.header.is-stuck .header__mark{ height:25px }
.header__nav{ display:flex; gap:clamp(20px,2.2vw,32px); align-items:center }
.header__nav a{
  font-family:var(--mincho); font-size:13px; letter-spacing:.14em;
  color:rgba(237,232,223,.72); transition:color .4s; position:relative; white-space:nowrap;
}
.header__nav a::after{
  content:""; position:absolute; left:0; bottom:-6px; width:100%; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .5s var(--ease-o);
}
.header__nav a:hover{ color:var(--fg-d) } .header__nav a:hover::after{ transform:scaleX(1) }
.header__cta{
  font-family:var(--mincho); font-size:12px; letter-spacing:.18em;
  padding:11px 22px; border:1px solid var(--rule-d); color:var(--fg-d);
  transition:background .5s var(--ease), color .5s, border-color .5s;
}
.header__cta:hover{ background:var(--fg-d); color:var(--ink); border-color:var(--fg-d) }
/* scrolled */
.header.is-stuck{
  background:rgba(11,10,9,.86); backdrop-filter:blur(14px) saturate(120%);
  -webkit-backdrop-filter:blur(14px); padding:16px var(--pad);
  border-bottom-color:var(--rule-d);
}
/* over light sections */
.header.is-light .header__logo{ color:var(--fg-l) }
.header.is-light .header__nav a{ color:rgba(26,23,20,.66) }
.header.is-light .header__nav a:hover{ color:var(--fg-l) }
.header.is-light .header__cta{ color:var(--fg-l); border-color:var(--rule-l) }
.header.is-light .header__cta:hover{ background:var(--fg-l); color:var(--paper); border-color:var(--fg-l) }
.header.is-light.is-stuck{ background:rgba(244,241,234,.9); border-bottom-color:var(--rule-l) }

/* =========================================================
   01 HERO
   ========================================================= */
.hero{ position:relative; height:100svh; min-height:600px; overflow:hidden; background:var(--ink) }
.hero__media{ position:absolute; inset:0 }
.hero__media img{
  width:100%; height:100%; object-fit:cover; object-position:52% 50%;
  transform:scale(1.08); opacity:0;
  transition:transform 3.4s var(--ease-o), opacity 2s ease;
}
body.opened .hero__media img{ transform:scale(1); opacity:1 }
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(8,7,6,.72) 0%, rgba(8,7,6,.46) 30%, rgba(8,7,6,0) 58%),
    linear-gradient(180deg, rgba(8,7,6,.42) 0%, rgba(8,7,6,0) 26%, rgba(8,7,6,0) 70%, rgba(8,7,6,.34) 100%);
}
.hero__inner{
  position:relative; z-index:2; height:100%;
  display:flex; flex-direction:column; justify-content:center;
  padding:0 var(--pad); max-width:1500px; margin:0 auto;
}
.hero__copy{
  font-family:var(--mincho); font-weight:400; color:#F6F2EA;
  letter-spacing:.13em; text-shadow:0 2px 40px rgba(0,0,0,.45);
}
/* 主：宣言 */
.hero__main{
  font-size:clamp(33px,5.2vw,82px); line-height:1.45;
}
.hero__main > span{ display:flex; align-items:center; white-space:nowrap }
.hero__bar{
  display:inline-block; height:1px; margin-left:clamp(18px,2vw,34px);
  background:rgba(246,242,234,.75); width:clamp(60px,9vw,150px);
  transform:scaleX(0); transform-origin:left;
  transition:transform 1.5s var(--ease-o) 1.15s;
}
body.opened .hero__bar{ transform:scaleX(1) }
/* 副：補足 */
.hero__sub{
  display:block; margin-top:clamp(26px,3.2vw,52px);
  font-size:clamp(18px,2.5vw,39px); line-height:1.72;
  color:rgba(246,242,234,.9);
}
.hero__rule{
  display:block; width:52px; height:1px; background:rgba(246,242,234,.55);
  margin:clamp(28px,3.4vw,52px) 0 clamp(18px,2vw,30px);
  transform:scaleX(0); transform-origin:left;
  transition:transform 1.4s var(--ease-o) 1.05s;
}
body.opened .hero__rule{ transform:scaleX(1) }
.hero__en{
  font-family:var(--seri); font-weight:300; color:rgba(248,245,238,.92);
  font-size:clamp(10.5px,1vw,13px); letter-spacing:.42em; line-height:2.5;
  text-transform:uppercase; text-shadow:0 1px 14px rgba(0,0,0,.55);
}
.hero__foot{
  position:absolute; z-index:2; left:var(--pad); right:var(--pad); bottom:34px;
  display:flex; justify-content:space-between; align-items:flex-end;
  opacity:0; transition:opacity 1.4s ease 1.6s;
}
body.opened .hero__foot{ opacity:1 }
.hero__label{
  font-family:var(--mincho); font-weight:400; font-size:clamp(12px,1vw,13.5px);
  letter-spacing:.2em; color:rgba(246,242,234,.85);
  text-shadow:0 1px 12px rgba(0,0,0,.6);
}
.hero__label--r{ text-align:right }
.scrollcue{
  position:absolute; z-index:2; left:50%; bottom:0; width:1px; height:78px;
  background:rgba(246,242,234,.16); overflow:hidden; opacity:0;
  transition:opacity 1.2s ease 1.9s;
}
body.opened .scrollcue{ opacity:1 }
.scrollcue span{
  position:absolute; inset:0; background:rgba(246,242,234,.85);
  transform-origin:top; animation:cue 2.6s var(--ease) infinite;
}
@keyframes cue{ 0%{transform:scaleY(0);transform-origin:top} 45%{transform:scaleY(1);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom} }

/* =========================================================
   02 PROLOGUE
   ========================================================= */
.prologue{
  position:relative; background:var(--ink); overflow:hidden;
  min-height:78vh; display:grid; place-items:center;
  padding:clamp(110px,14vw,190px) var(--pad);
}
.prologue__bg{ position:absolute; inset:-12% 0 -12% 0; opacity:.34 }
.prologue__bg img{ width:100%; height:100%; object-fit:cover }
.prologue__bg{ opacity:.28 }
.prologue::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, var(--ink) 0%, rgba(11,10,9,.35) 42%, rgba(11,10,9,.55) 70%, var(--ink) 100%);
}
.prologue__inner{ position:relative; z-index:2; text-align:center; max-width:900px }
.prologue__lead{
  margin-top:38px; font-family:var(--mincho); color:var(--fg-d);
  font-size:clamp(20px,3vw,40px); line-height:1.9; letter-spacing:.13em;
}
.prologue__sub{
  margin-top:34px; color:var(--mut-d);
  font-size:clamp(13px,1.15vw,15.5px); letter-spacing:.16em;
}

/* =========================================================
   03 KOMORO
   ========================================================= */
.komoro{ position:relative; background:var(--ink); color:var(--fg-d) }
.komoro__sticky{ position:sticky; top:0; height:100svh; overflow:hidden }
.komoro__stage{ position:relative; height:100%; padding:0 var(--pad) }

/* 下部を沈めて数字を読みやすくする（地図の存在感は上半分で出す） */
.komoro__stage::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:48%; z-index:2;
  pointer-events:none;
  background:linear-gradient(180deg,
    rgba(11,10,9,0) 0%, rgba(11,10,9,.55) 40%, rgba(11,10,9,.88) 72%, rgba(11,10,9,.97) 100%);
}
.komoro__head{
  position:absolute; z-index:3; left:var(--pad); top:clamp(96px,13vh,150px);
  will-change:opacity, transform;
}
.komoro__h{
  margin-top:22px; font-family:var(--mincho); font-weight:400;
  font-size:clamp(30px,5vw,68px); line-height:1.4; letter-spacing:.12em; color:var(--fg-d);
}
.komoro__lead{
  margin-top:26px; color:var(--mut-d); max-width:34em;
  font-size:clamp(12.5px,1.05vw,15px); letter-spacing:.1em; line-height:2.1;
}

.komoro{ height:320vh }
.komoro__map{
  position:absolute; inset:0; display:grid; align-items:center; justify-items:end;
  z-index:1; will-change:transform,opacity; padding:0 0 12vh;
}
.komoro__mapin{
  position:relative; width:min(64%, 880px); aspect-ratio:1536/1024; margin-right:2.5%;
  -webkit-mask-image:radial-gradient(ellipse 76% 76% at 50% 47%, #000 62%, transparent 98%);
  mask-image:radial-gradient(ellipse 76% 76% at 50% 47%, #000 62%, transparent 98%);
}
.komoro__map img{
  width:100%; height:100%; object-fit:contain; opacity:1;
  filter:contrast(1.06) brightness(1.04);
}
.komoro__pin{
  position:absolute; left:32.2%; top:61.4%; width:9px; height:9px; border-radius:50%;
  background:var(--amber-soft); box-shadow:0 0 0 0 rgba(228,192,138,.5);
  animation:pinPulse 3.2s var(--ease) infinite; opacity:0; transition:opacity .8s ease .5s;
}
.komoro.is-in .komoro__pin{ opacity:1 }
@keyframes pinPulse{
  0%{box-shadow:0 0 0 0 rgba(228,192,138,.45)}
  70%{box-shadow:0 0 0 28px rgba(228,192,138,0)}
  100%{box-shadow:0 0 0 0 rgba(228,192,138,0)}
}

.komoro__data{
  position:absolute; z-index:4; left:var(--pad); right:var(--pad); bottom:clamp(46px,7vh,86px);
  opacity:0; transform:translateY(26px);
  transition:opacity 1s var(--ease-o), transform 1.1s var(--ease-o);
}
.komoro.is-data .komoro__data{ opacity:1; transform:none }
.stats{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(24px,4vw,64px);
  border-top:1px solid var(--rule-d); padding-top:clamp(26px,3.4vw,44px);
}
.stat{ position:relative }
.stat + .stat{ padding-left:clamp(24px,4vw,64px) }
.stat + .stat::before{
  content:""; position:absolute; left:0; top:-4px; bottom:8px; width:1px; background:var(--rule-d);
}
.stat__num{
  font-family:var(--mincho); font-weight:400; color:#F6F2EA;
  font-size:clamp(46px,7.4vw,116px); line-height:1; letter-spacing:.01em;
  display:flex; align-items:baseline; gap:.14em;
}
.stat__num em{
  font-family:var(--sans); font-style:normal; font-weight:300;
  font-size:clamp(11px,1.15vw,16px); letter-spacing:.22em; color:var(--amber-soft);
}
.stat__label{
  margin-top:clamp(14px,1.6vw,22px); font-size:clamp(12.5px,1.05vw,15px);
  letter-spacing:.12em; line-height:1.9; color:var(--fg-d);
}
.stat__sub{
  margin-top:8px; font-family:var(--sans); font-weight:300;
  font-size:10.5px; letter-spacing:.24em; color:var(--mut-d); text-transform:uppercase;
}
.stat__sub--compare{ display:flex; flex-wrap:wrap; gap:4px 18px; opacity:0; transition:opacity 1.2s ease .9s }
.komoro.is-data .stat__sub--compare{ opacity:.62 }
.komoro__foot{
  margin-top:clamp(18px,2.2vw,28px);
  display:flex; align-items:baseline; justify-content:space-between;
  gap:clamp(20px,3vw,48px); flex-wrap:wrap;
}
.komoro__summary{
  font-family:var(--mincho); color:#F4F0E8;
  font-size:clamp(13px,1.15vw,17px); letter-spacing:.12em; line-height:1.9;
}
.komoro__source{
  text-align:right;
  font-family:var(--sans); font-weight:300; font-size:10px;
  letter-spacing:.2em; color:rgba(237,232,223,.34);
}

/* =========================================================
   04 LAND
   ========================================================= */
.land{ background:var(--paper); padding:clamp(76px,8vw,116px) 0 }

.land__head{
  max-width:1360px; margin:0 auto; padding:0 var(--pad);
  display:flex; align-items:flex-end; justify-content:space-between; gap:40px;
}
.land__loc{
  padding-left:clamp(16px,1.6vw,24px); border-left:1px solid var(--rule-l);
  font-family:var(--sans); font-weight:300; font-size:9.5px;
  letter-spacing:.34em; line-height:2.1; color:var(--mut-l);
  text-transform:uppercase; white-space:nowrap; padding-bottom:6px;
}

.land__grid{
  max-width:1360px; margin:clamp(34px,3.6vw,52px) auto 0; padding:0 var(--pad);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);
  grid-template-rows:1fr 1fr; gap:clamp(12px,1.4vw,20px);
  height:clamp(540px, 90vh, 880px);
}
.lcard{
  position:relative; overflow:hidden; background:#1B1815;
  display:block; min-height:0;
}
.lcard--tall{ grid-row:1 / 3 }
.lcard__fig{ position:absolute; inset:0 }
.lcard__fig img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.03); transition:transform 1.9s var(--ease-o);
}
.lcard.is-in .lcard__fig img{ transform:scale(1) }
.lcard__fig::after{ content:""; position:absolute; inset:0; pointer-events:none }

/* 01 — 白文字 */
.lcard--dark .lcard__fig::after{
  background:linear-gradient(180deg,
    rgba(12,11,9,.84) 0%, rgba(12,11,9,.70) 18%, rgba(12,11,9,.52) 36%,
    rgba(12,11,9,.22) 56%, rgba(12,11,9,.10) 70%, rgba(12,11,9,.36) 86%,
    rgba(12,11,9,.64) 100%);
}
/* 02 / 03 — 上に生成りの帯、下に写真（文字は写真に重ねない） */
.lcard--light{
  background:var(--paper);
  display:grid; grid-template-rows:auto minmax(0,1fr);
}
.lcard--light .lcard__fig{ position:relative; inset:auto; min-height:0; grid-row:2 }
.lcard--light .lcard__body{ grid-row:1 }
.lcard--light .lcard__fig::after{
  background:linear-gradient(180deg, rgba(246,243,236,.9) 0%, rgba(246,243,236,0) 20%);
}
.lcard--light .lcard__body{ padding-bottom:clamp(14px,1.5vw,20px) }

.lcard__body{
  position:relative; z-index:2;
  padding:clamp(20px,2vw,28px) clamp(22px,2.4vw,34px) 0;
}
.lcard__no{
  display:flex; align-items:center; gap:11px;
  font-family:var(--sans); font-weight:300; font-size:9.5px;
  letter-spacing:.3em; text-transform:uppercase;
}
.lcard__no span{ display:block; width:16px; height:1px; background:currentColor; opacity:.5 }
.lcard__ttl{
  margin-top:clamp(11px,1.1vw,16px);
  font-family:var(--mincho); font-weight:400;
  font-size:clamp(19px,1.85vw,27px); line-height:1.5; letter-spacing:.12em;
}
.lcard__rule{
  display:block; width:28px; height:1px; margin:clamp(11px,1.15vw,15px) 0;
  background:currentColor; opacity:.34;
  transform:scaleX(0); transform-origin:left; transition:transform 1.1s var(--ease-o) .35s;
}
.lcard.is-in .lcard__rule{ transform:scaleX(1) }
.lcard__txt{
  font-size:clamp(11.5px,.92vw,13.5px); line-height:1.95; letter-spacing:.08em;
}
.lcard--dark, .lcard--dark .lcard__ttl{ color:#F4F0E8 }
.lcard--dark .lcard__no, .lcard--dark .lcard__txt{ color:rgba(244,240,232,.78) }
.lcard--light, .lcard--light .lcard__ttl{ color:var(--fg-l) }
.lcard--light .lcard__no, .lcard--light .lcard__txt{ color:var(--mut-l) }

/* 700m */
.lcard__big{
  position:absolute; z-index:1; top:clamp(10px,1.1vw,18px); right:clamp(20px,2.2vw,34px);
  font-family:var(--mincho); font-weight:400; line-height:1;
  font-size:clamp(42px,4.6vw,74px); letter-spacing:.01em;
  color:rgba(26,23,20,.17); display:flex; align-items:baseline; gap:.06em;
}
.lcard__big em{ font-family:var(--sans); font-style:normal; font-size:.26em; letter-spacing:.14em }

/* 英字ラベル */
.lcard__tag{
  position:absolute; z-index:2;
  font-family:var(--sans); font-weight:300; font-size:9px;
  letter-spacing:.3em; line-height:2.1; text-transform:uppercase;
}
.lcard__tag--tr{ top:clamp(76px,8.4vw,112px); right:clamp(22px,2.4vw,36px); text-align:right; color:var(--mut-l) }
.lcard--tall .lcard__tag--bl,
.lcard__tag--bl{
  left:clamp(22px,2.4vw,36px); bottom:clamp(22px,2.4vw,34px);
  color:rgba(244,240,232,.7); display:flex; align-items:flex-end; gap:14px;
}
.lcard__tag--bl span{ display:block; width:26px; height:1px; background:currentColor; margin-bottom:7px }

/* =========================================================
   05 MILLING
   ========================================================= */
.mill{ background:var(--ink-2); color:var(--fg-d); padding:clamp(84px,9vw,132px) 0 }
.mill__lead{
  text-wrap:pretty; margin-top:26px; color:var(--mut-d); max-width:36em;
  font-size:clamp(13px,1.1vw,15.5px); line-height:2.1; letter-spacing:.09em;
}
.mill__grid{
  max-width:1360px; margin:clamp(40px,4.6vw,64px) auto 0; padding:0 var(--pad);
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(10px,1.2vw,18px);
}
.mcard{
  position:relative; overflow:hidden; background:#0A0908; aspect-ratio:1/1;
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(20px,2.2vw,32px);
}
.mcard__fig{ position:absolute; inset:0 }
.mcard__fig img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.04); transition:transform 1.9s var(--ease-o);
}
.mcard.is-in .mcard__fig img{ transform:scale(1) }
.mcard__fig::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,
    rgba(8,7,6,.40) 0%, rgba(8,7,6,.24) 22%, rgba(8,7,6,.58) 44%,
    rgba(8,7,6,.66) 60%, rgba(8,7,6,.82) 78%, rgba(8,7,6,.94) 100%);
}

.mcard__head{ position:relative; z-index:2; text-align:center; margin-top:auto }
.mcard__no{
  display:flex; align-items:center; justify-content:center; gap:11px;
  font-family:var(--sans); font-weight:300; font-size:9.5px;
  letter-spacing:.32em; color:rgba(244,240,232,.72); text-transform:uppercase;
}
.mcard__no span{ display:block; width:14px; height:1px; background:currentColor; opacity:.6 }
.mcard__ttl{
  margin-top:clamp(10px,1.1vw,15px);
  font-family:var(--mincho); font-weight:400; color:#F6F2EA;
  font-size:clamp(19px,1.9vw,27px); letter-spacing:.22em; line-height:1.4;
}
.mcard__rule{
  position:relative; z-index:2; display:block; height:1px;
  margin:clamp(18px,2vw,28px) 0 auto; background:rgba(244,240,232,.22);
  transform:scaleX(0); transform-origin:left; transition:transform 1.3s var(--ease-o) .3s;
}
.mcard.is-in .mcard__rule{ transform:scaleX(1) }
.mcard__txt{
  position:relative; z-index:2;
  font-size:clamp(11.5px,.9vw,13px); line-height:1.95; letter-spacing:.07em;
  color:rgba(244,240,232,.8);
}

/* 6枚目 — 締めのカード */
.mcard--end{ justify-content:flex-start }
.mcard--end .mcard__fig::after{
  background:linear-gradient(200deg,
    rgba(8,7,6,.82) 0%, rgba(8,7,6,.5) 34%, rgba(8,7,6,.18) 58%, rgba(8,7,6,.5) 100%);
}
.mcard__end-body{ position:relative; z-index:2; text-align:right; margin-left:auto }
.mcard__end-en{
  font-family:var(--seri); font-weight:300; font-size:clamp(13px,1.35vw,19px);
  letter-spacing:.28em; line-height:1.9; color:#F6F2EA; text-transform:uppercase;
}
.mcard__end-jp{
  margin-top:clamp(14px,1.6vw,22px);
  font-family:var(--mincho); font-size:clamp(12.5px,1.05vw,15px);
  letter-spacing:.16em; color:rgba(244,240,232,.82);
}

/* =========================================================
   06 ROLE
   ========================================================= */
.role{ background:var(--paper); padding:var(--gap-sec) 0 }
.flow{
  position:relative; max-width:1360px; margin:clamp(70px,9vw,120px) auto 0; padding:0 var(--pad);
}
.flow__list{
  position:relative; z-index:2; display:grid; grid-template-columns:repeat(5,1fr);
  align-items:start;
}
.flow__node{ display:flex; flex-direction:column; align-items:center; text-align:center; padding-top:0 }
.flow__dot{
  width:9px; height:9px; border-radius:50%; background:var(--fg-l);
  opacity:.24; transform:scale(.6); transition:opacity .7s var(--ease), transform .7s var(--ease), background .7s;
  transition-delay:calc(var(--i,0) * .12s);
}
.flow.is-in .flow__dot{ opacity:1; transform:scale(1) }
.flow__node.is-core .flow__dot{ background:var(--amber); box-shadow:0 0 0 5px rgba(201,151,75,.20) }
.flow__jp{
  margin-top:26px; font-family:var(--mincho); font-size:clamp(13px,1.25vw,18px);
  letter-spacing:.14em; color:var(--fg-l);
}
.flow__en{
  margin-top:8px; font-family:var(--sans); font-weight:300; font-size:10.5px;
  letter-spacing:.26em; color:var(--mut-l); text-transform:uppercase;
}
.flow__line{
  position:absolute; z-index:1; left:calc(var(--pad) + 10%); right:calc(var(--pad) + 10%); top:4px;
  height:1px; background:var(--rule-l); overflow:hidden;
}
.flow__line i{
  display:block; height:100%; background:var(--fg-l); opacity:.4;
  transform:scaleX(0); transform-origin:left; transition:transform 1.9s var(--ease-o) .1s;
}
.flow.is-in .flow__line i{ transform:scaleX(1) }
.flow__caption{
  margin-top:clamp(40px,5vw,66px); text-align:center;
  font-family:var(--sans); font-weight:300; font-size:10.5px;
  letter-spacing:.28em; color:var(--mut-l); text-transform:uppercase;
}
.role__three{
  max-width:1360px; margin:clamp(80px,10vw,140px) auto 0; padding:0 var(--pad);
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(30px,4vw,70px);
  border-top:1px solid var(--rule-l); padding-top:clamp(40px,5vw,70px);
}
.role__cell h3{
  font-family:var(--mincho); font-weight:400; font-size:clamp(18px,1.9vw,26px);
  letter-spacing:.18em; color:var(--fg-l);
}
.role__rule{
  display:block; width:24px; height:1px; margin:clamp(12px,1.4vw,18px) 0;
  background:var(--gold);
  transform:scaleX(0); transform-origin:left; transition:transform 1s var(--ease-o) .3s;
}
.role__cell.is-in .role__rule{ transform:scaleX(1) }
.role__en{
  font-family:var(--sans); font-weight:300; font-size:clamp(10px,.82vw,11.5px);
  letter-spacing:.28em; color:var(--gold-d); text-transform:uppercase;
}
.role__txt{
  margin-top:clamp(14px,1.6vw,22px); max-width:22em; color:var(--mut-l);
  font-size:clamp(12.5px,1vw,14.5px); line-height:2.1; letter-spacing:.08em;
  text-wrap:pretty;
}

/* =========================================================
   07 BUSINESS
   ========================================================= */
.biz{ background:var(--paper-2); padding:var(--gap-sec) 0 }
.biz__inner{ max-width:1360px; margin:0 auto; padding:0 var(--pad) }

.eyebrow--rule{ display:flex; align-items:center; gap:20px }
.eyebrow--rule::after{
  content:""; display:block; width:clamp(40px,5vw,74px); height:1px;
  background:var(--rule-l); transform:scaleX(0); transform-origin:left;
  transition:transform 1.2s var(--ease-o) .25s;
}
.eyebrow--rule.is-in::after{ transform:scaleX(1) }

.biz__headgrid{
  margin-top:clamp(28px,3.4vw,44px);
  display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);
  gap:clamp(36px,5vw,80px); align-items:start;
}
.biz__h{
  font-family:var(--mincho); font-weight:400; color:var(--fg-l);
  font-size:clamp(27px,3.7vw,54px); line-height:1.5; letter-spacing:.08em;
}
.biz__h .line > span{ white-space:nowrap }
.biz__lead{
  text-wrap:pretty; color:var(--mut-l); font-size:clamp(13px,1.05vw,15.5px); line-height:2.25;
  letter-spacing:.09em; padding-left:clamp(24px,3vw,44px);
  border-left:1px solid var(--rule-l); margin-top:8px;
}

.biz__grid{
  margin-top:clamp(70px,9vw,130px);
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(26px,4vw,68px);
}
.biz__card{ display:flex; flex-direction:column }
.biz__fig{ overflow:hidden; background:#DDD8CD }
.biz__fig img{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  transform:scale(1.08); transition:transform 1.8s var(--ease-o);
}
.biz__card.is-in .biz__fig img{ transform:scale(1) }
.biz__card:nth-child(1) .biz__fig img{ object-position:70% 50% }
.biz__card:nth-child(2) .biz__fig img{ object-position:68% 58% }
.biz__card:nth-child(3) .biz__fig img{ object-position:58% 62% }

.biz__no{
  display:flex; align-items:center; gap:14px; margin-top:clamp(26px,3vw,38px);
  font-family:var(--sans); font-weight:300; font-size:10.5px;
  letter-spacing:.28em; color:var(--mut-l);
}
.biz__no span{ display:block; width:34px; height:1px; background:var(--rule-l) }
.biz__en{
  margin-top:clamp(16px,1.8vw,24px); font-family:var(--seri); font-weight:400;
  font-size:clamp(19px,2vw,27px); letter-spacing:.11em; line-height:1.3; color:var(--fg-l);
  min-height:2.6em;
}
.biz__jp{
  margin-top:10px; font-family:var(--mincho); font-size:clamp(15px,1.4vw,20px);
  letter-spacing:.16em; color:var(--fg-l);
}
.biz__desc{
  margin-top:clamp(18px,2vw,26px); margin-bottom:clamp(26px,3vw,40px); color:var(--mut-l);
  font-size:clamp(12.5px,1vw,14px); line-height:2.05; letter-spacing:.07em;
}
.biz__opt{
  display:inline-block; margin-top:.5em; color:var(--fg-l);
  border-bottom:1px solid rgba(201,151,75,.5); padding-bottom:2px;
}
.biz__link{
  margin-top:auto; display:flex; align-items:center; gap:16px;
  padding-bottom:16px; border-bottom:1px solid var(--rule-l);
  font-family:var(--sans); font-weight:300; font-size:10px;
  letter-spacing:.3em; color:var(--mut-l); text-transform:uppercase;
  position:relative; transition:color .5s var(--ease);
}
.biz__link span{ transition:transform .6s var(--ease-o) }
.biz__link::after{
  content:""; position:absolute; left:0; bottom:-1px; width:100%; height:1px;
  background:var(--fg-l); transform:scaleX(0); transform-origin:left;
  transition:transform .7s var(--ease-o);
}
.biz__link:hover{ color:var(--fg-l) }
.biz__link:hover span{ transform:translateX(7px) }
.biz__link:hover::after{ transform:scaleX(1) }

/* =========================================================
   08 SPEC
   ========================================================= */
.spec{ background:var(--ink); color:var(--fg-d); padding:clamp(74px,7.6vw,110px) 0 }
.spec__head{ max-width:1360px; margin:0 auto; padding:0 var(--pad) }
.spec__inner{
  max-width:1360px; margin:clamp(34px,3.8vw,54px) auto 0; padding:0 var(--pad);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);
  gap:clamp(36px,4.6vw,78px); align-items:center;
}

/* 左：仕様一覧 */
.spec__list{ border-top:1px solid var(--rule-d) }
.spec__row{
  display:grid; grid-template-columns:6.5em minmax(0,1fr); gap:clamp(14px,2vw,30px);
  align-items:baseline; padding:clamp(18px,2.1vw,28px) 0;
  border-bottom:1px solid var(--rule-d);
}
.spec__row dt{
  font-family:var(--mincho); font-size:clamp(11.5px,.95vw,13.5px);
  letter-spacing:.3em; color:var(--mut-d);
}
.spec__row dd{
  font-family:var(--mincho); font-size:clamp(14px,1.3vw,19px);
  letter-spacing:.1em; line-height:1.75; color:#F4F0E8;
}
.spec__note{
  font-size:.72em; letter-spacing:.06em; color:var(--mut-d); margin-left:.2em;
}

/* 右：写真 */
.spec__figs{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(10px,1.2vw,18px);
}
.sfig{ position:relative; overflow:hidden; background:#0A0908 }
.sfig--wide{ grid-column:1 / -1 }
.sfig img{
  width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(1.04); transition:transform 1.9s var(--ease-o);
}
.sfig.is-in img{ transform:scale(1) }
.sfig--wide img{ aspect-ratio:2/1; object-position:62% 50% }
.sfig:not(.sfig--wide) img{ aspect-ratio:1/1; object-position:50% 56% }
.sfig::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(155deg, rgba(6,5,4,.84) 0%, rgba(6,5,4,.52) 32%,
             rgba(6,5,4,.12) 58%, rgba(6,5,4,0) 78%);
}
.sfig--wide::after{
  background:linear-gradient(102deg, rgba(6,5,4,.86) 0%, rgba(6,5,4,.56) 26%,
             rgba(6,5,4,.14) 52%, rgba(6,5,4,0) 72%);
}
.sfig figcaption{
  position:absolute; z-index:2; left:clamp(18px,1.9vw,28px); top:clamp(16px,1.7vw,26px);
  display:flex; flex-direction:column; align-items:flex-start;
}
.sfig__en{
  font-family:var(--seri); font-weight:300; font-size:clamp(10px,.85vw,12.5px);
  letter-spacing:.34em; text-transform:uppercase; color:var(--amber-soft);
}
.sfig__rule{
  display:block; width:22px; height:1px; margin:clamp(9px,1vw,14px) 0;
  background:rgba(244,240,232,.42);
  transform:scaleX(0); transform-origin:left; transition:transform 1.1s var(--ease-o) .35s;
}
.sfig.is-in .sfig__rule{ transform:scaleX(1) }
.sfig__jp{
  font-family:var(--mincho); font-size:clamp(15px,1.35vw,20px);
  letter-spacing:.2em; color:#F6F2EA;
}

/* =========================================================
   09 PRICE
   ========================================================= */
.price{
  position:relative; overflow:hidden;
  background:#F7F4EC; padding:clamp(84px,9vw,132px) 0 clamp(90px,10vw,146px);
}
.price::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(120% 80% at 88% -10%, rgba(255,255,255,.9) 0%, rgba(255,255,255,0) 58%),
    linear-gradient(160deg, rgba(226,207,166,.14) 0%, rgba(226,207,166,0) 42%);
}
/* 稲穂の透かし（賑やかし） */
.price__ine{
  position:absolute; z-index:0; pointer-events:none;
  left:clamp(-220px,-11vw,-70px); bottom:clamp(-130px,-8vw,-50px);
  width:clamp(300px,30vw,500px); aspect-ratio:900/842;
  background:url("/rice/image/ine-mark.webp") center/contain no-repeat;
  opacity:.26; transform:rotate(-8deg);
  -webkit-mask-image:linear-gradient(28deg, #000 22%, rgba(0,0,0,.35) 74%, transparent 96%);
  mask-image:linear-gradient(28deg, #000 22%, rgba(0,0,0,.35) 74%, transparent 96%);
}
.price .section__head, .price .sim{ position:relative; z-index:2 }
.price__lead{
  margin-top:clamp(26px,3vw,40px); max-width:34em; color:var(--mut-l);
  font-family:var(--mincho); font-size:clamp(13.5px,1.2vw,17px);
  line-height:2.1; letter-spacing:.1em; text-wrap:pretty;
}

.sim{ max-width:1360px; margin:clamp(40px,4.6vw,66px) auto 0; padding:0 var(--pad) }
.price__grid{
  display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
  gap:clamp(36px,5vw,86px); align-items:start;
}

/* 実例カード */
.offer-card{
  border:1px solid rgba(138,110,60,.26); background:rgba(255,255,255,.66);
  backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
  padding:clamp(26px,3vw,40px) clamp(24px,2.8vw,40px) clamp(30px,3.4vw,44px);
}
.offer__tag{
  display:flex; align-items:center; flex-wrap:wrap; gap:0 clamp(12px,1.5vw,20px);
  padding-bottom:clamp(18px,2vw,26px); border-bottom:1px solid rgba(138,110,60,.22);
  font-family:var(--mincho); font-size:clamp(13px,1.1vw,16px);
  letter-spacing:.13em; color:var(--mut-l);
}
.offer__tag b{
  font-weight:400; color:#FFFCF5; font-size:.92em; letter-spacing:.22em;
  padding:7px 16px 8px;
  background:linear-gradient(120deg, var(--gold-d) 0%, var(--gold) 52%, var(--gold-d) 100%);
}
.offer__brand{
  margin-top:clamp(20px,2.4vw,32px);
  font-family:var(--mincho); font-size:clamp(17px,1.85vw,27px);
  letter-spacing:.13em; line-height:1.55; color:var(--fg-l);
}
.offer__brand span{ font-size:.84em; letter-spacing:.08em }
.offer__price{
  margin-top:clamp(6px,.9vw,14px);
  font-family:var(--mincho); color:var(--fg-l); line-height:1;
  font-size:clamp(62px,8.2vw,128px); letter-spacing:.005em;
  display:flex; align-items:baseline; gap:.04em; white-space:nowrap;
}
.offer__price .yen{ font-size:.42em; letter-spacing:0 }
.offer__price .per{
  font-family:var(--sans); font-weight:300; font-size:.155em;
  letter-spacing:.2em; color:var(--mut-l); margin-left:.55em;
}
.offer__terms{
  margin-top:clamp(18px,2vw,28px);
  display:flex; align-items:baseline; flex-wrap:wrap; gap:0 .85em;
  font-family:var(--mincho); font-size:clamp(15px,1.45vw,21px);
  letter-spacing:.12em; color:var(--mut-l);
}
.offer__terms b{
  font-weight:400; color:var(--fg-l); font-size:1.14em;
  border-bottom:1px solid var(--gold); padding-bottom:4px;
}
.offer__terms span{ color:rgba(26,23,20,.26) }

/* 右カラム（縦罫で仕切る） */
.price__side{
  padding-left:clamp(28px,3.6vw,64px); border-left:1px solid rgba(138,110,60,.24);
  align-self:stretch;
}
.price__side .eyebrow{ margin-bottom:clamp(18px,2vw,26px) }
.price__points{
  margin-top:clamp(46px,5.4vw,80px);
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(20px,2.6vw,44px);
}
.price__points li{ text-align:center }
.price__pt-fig{
  display:block; width:100%; aspect-ratio:1/1;
  display:grid; place-items:center;
}
.price__pt-fig img{
  width:100%; height:100%; object-fit:contain; display:block;
  transform:scale(.96); transition:transform 1.6s var(--ease-o);
}
.price__points li.is-in .price__pt-fig img{ transform:scale(1) }
.price__pt-jp{
  margin-top:clamp(4px,.6vw,10px);
  font-family:var(--mincho); font-weight:400; color:var(--fg-l);
  font-size:clamp(17px,1.75vw,26px); letter-spacing:.14em; line-height:1.4;
}
.price__pt-rule{
  display:block; width:26px; height:1px; margin:clamp(11px,1.2vw,16px) auto;
  background:var(--gold);
  transform:scaleX(0); transition:transform 1s var(--ease-o) .3s;
}
.price__points li.is-in .price__pt-rule{ transform:scaleX(1) }
.price__pt-en{
  font-family:var(--sans); font-weight:300; font-size:clamp(10.5px,.85vw,12px);
  letter-spacing:.28em; color:var(--gold-d); text-transform:uppercase;
}
.price__pt-txt{
  margin-top:clamp(12px,1.4vw,20px);
  font-family:var(--mincho); font-size:clamp(12.5px,1.05vw,15px);
  line-height:1.95; letter-spacing:.08em; color:var(--mut-l); text-wrap:pretty;
}
.price__pt-txt span{ display:block; font-size:.88em; opacity:.8 }

.price__act{
  margin-top:clamp(42px,5vw,72px);
  max-width:640px; margin-left:auto; margin-right:auto; text-align:center;
}
.price__act .btn--gold{ margin-top:0 }
.price__note{ margin-top:clamp(16px,1.8vw,24px); text-align:left }

.price__side-lead{
  font-family:var(--mincho); color:var(--fg-l);
  font-size:clamp(16px,1.75vw,26px); line-height:1.85; letter-spacing:.1em; text-wrap:pretty;
}
.price__side-sub{
  margin-top:clamp(14px,1.6vw,22px); color:var(--mut-l);
  font-family:var(--mincho); font-size:clamp(13px,1.15vw,16px);
  line-height:2; letter-spacing:.1em;
}
.price__note{
  margin-top:clamp(18px,2vw,26px); font-size:12px; line-height:2;
  letter-spacing:.06em; color:var(--mut-l); text-wrap:pretty;
}

/* buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:14px;
  margin-top:clamp(30px,3.6vw,48px); padding:22px 46px;
  font-family:var(--mincho); font-size:clamp(13px,1.05vw,15px); letter-spacing:.16em;
  position:relative; overflow:hidden; cursor:pointer; border:1px solid var(--fg-l);
  color:var(--fg-l); background:transparent; transition:color .5s var(--ease);
}
.btn::before{
  content:""; position:absolute; inset:0; background:var(--ink); z-index:-1;
  transform:translateY(101%); transition:transform .6s var(--ease-o);
}
.btn{ z-index:0; isolation:isolate }
.btn:hover{ color:var(--paper) }
.btn:hover::before{ transform:translateY(0) }
.btn--full{
  width:100%; margin-top:44px;
  background:var(--ink); color:var(--paper); border-color:var(--ink);
}
.btn--full::before{ background:var(--amber) }
.btn--full:hover{ color:var(--ink) }
.btn--gold{
  width:100%; margin-top:clamp(26px,3vw,40px);
  justify-content:space-between; padding:24px clamp(22px,2.4vw,34px);
  color:#FFFCF5; border:1px solid rgba(138,110,60,.55);
  background:linear-gradient(104deg, var(--gold-d) 0%, var(--gold) 50%, var(--gold-d) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,253,245,.28);
  transition:box-shadow .5s var(--ease), filter .5s var(--ease);
}
.btn--gold::before{ content:none }
.btn--gold:hover{ color:#FFFCF5; filter:brightness(1.08);
  box-shadow:inset 0 0 0 1px rgba(255,253,245,.5) }
.btn--gold i{ font-style:normal; font-size:1.4em; line-height:1;
  transition:transform .5s var(--ease-o) }
.btn--gold:hover i{ transform:translateX(5px) }

/* =========================================================
   10 FOR
   ========================================================= */
.for{
  position:relative; background:var(--ink); color:var(--fg-d);
  padding:var(--gap-sec) 0; overflow:hidden;
}
.for::before{
  content:""; position:absolute; inset:0;
  background:url("/rice/image/placeholder/for-bg.svg") center/cover no-repeat; opacity:.5;
}
.for__inner{ position:relative; z-index:2; max-width:1360px; margin:0 auto; padding:0 var(--pad) }
.for__grid{
  margin-top:clamp(60px,8vw,110px); display:grid; grid-template-columns:repeat(3,1fr);
  column-gap:clamp(24px,4vw,70px);
}
.for__grid li{
  padding:clamp(38px,5vw,70px) 0; border-top:1px solid var(--rule-d);
  display:flex; flex-direction:column; gap:14px; position:relative;
  transition:padding-left .6s var(--ease);
}
.for__grid li + li::after{ content:none }
.for__grid li span{
  font-family:var(--seri); font-weight:300; font-size:clamp(18px,2.4vw,34px);
  letter-spacing:.2em; color:var(--fg-d); transition:color .5s var(--ease);
}
.for__grid li em{
  font-family:var(--mincho); font-style:normal; font-size:11.5px;
  letter-spacing:.2em; color:var(--mut-d);
}
.for__grid li:hover span{ color:var(--amber-soft) }
@media (hover:hover){ .for__grid li:hover{ padding-left:14px } }

/* =========================================================
   11 CONTACT
   ========================================================= */
.contact{ background:var(--paper); padding:var(--gap-sec) 0 }
.contact__grid{
  max-width:1360px; margin:0 auto; padding:0 var(--pad);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(56px,8vw,140px); align-items:start;
}
.contact__h{
  margin-top:26px; font-family:var(--mincho); font-weight:400;
  font-size:clamp(23px,2.9vw,40px); line-height:1.62; letter-spacing:.1em; color:var(--fg-l);
}
.contact__h .line > span{ white-space:nowrap }
.contact__lead{
  margin-top:34px; color:var(--mut-l); max-width:28em;
  font-size:clamp(13px,1.05vw,15px); line-height:2.2; letter-spacing:.08em;
}
.contact__meta{
  margin-top:clamp(44px,5vw,72px); padding-top:26px; border-top:1px solid var(--rule-l);
  font-family:var(--sans); font-weight:300; font-size:11.5px; letter-spacing:.2em; color:var(--mut-l);
  line-height:2.2;
}
.contact__meta a{ border-bottom:1px solid var(--rule-l); padding-bottom:2px }
.form__row{ margin-bottom:34px }
.form__row label{
  display:flex; align-items:center; gap:12px;
  font-family:var(--sans); font-weight:300; font-size:10.5px;
  letter-spacing:.24em; color:var(--mut-l);
}
.form__row label span{
  font-size:9px; letter-spacing:.16em; color:var(--amber);
  border:1px solid rgba(201,151,75,.4); padding:2px 7px;
}
.form__row input,
.form__row select,
.form__row textarea{
  width:100%; margin-top:14px; background:transparent; border:0;
  border-bottom:1px solid var(--rule-l); padding:12px 0;
  font-family:var(--mincho); font-size:15px; letter-spacing:.08em; color:var(--fg-l);
  outline:0; border-radius:0; appearance:none; transition:border-color .5s var(--ease);
}
.form__row select{
  background-image:linear-gradient(45deg,transparent 50%,var(--mut-l) 50%),
                   linear-gradient(135deg,var(--mut-l) 50%,transparent 50%);
  background-position:calc(100% - 12px) 22px, calc(100% - 7px) 22px;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat;
}
.form__row textarea{ resize:vertical; line-height:1.9 }
.form__row input:focus,.form__row select:focus,.form__row textarea:focus{ border-bottom-color:var(--fg-l) }
.form__row input::placeholder,.form__row textarea::placeholder{ color:rgba(26,23,20,.3) }
.form__row.is-error input,.form__row.is-error select{ border-bottom-color:#A6462F }
.form__hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }
.form__inline{
  display:grid; grid-template-columns:9.6em minmax(0,1fr);
  gap:clamp(12px,1.4vw,20px); align-items:end;
}
.form__inline select{ text-align:left }
.form__reply{
  margin-top:16px; text-align:center;
  font-size:12px; letter-spacing:.1em; color:var(--mut-l);
}
.form__consent{
  margin-top:14px; text-align:center;
  font-size:11.5px; line-height:1.9; letter-spacing:.06em; color:var(--mut-l);
}
.form__consent a{ display:inline-block; padding:8px 2px; color:var(--fg-l);
  border-bottom:1px solid var(--rule-l) }
.form__consent a:hover{ border-bottom-color:var(--fg-l) }
.form__done{
  margin-top:24px; font-size:13px; letter-spacing:.1em; color:var(--fg-l);
  border-left:2px solid var(--amber); padding-left:16px; line-height:2;
}
.form__done--err{ border-left-color:#A6462F }
.btn[disabled]{ opacity:.55; pointer-events:none }

/* =========================================================
   FOOTER
   ========================================================= */
.footer{ background:var(--ink); color:var(--fg-d); padding:clamp(70px,9vw,120px) var(--pad) 46px }
.footer__top{
  max-width:1360px; margin:0 auto; display:flex; justify-content:space-between;
  align-items:flex-end; gap:40px; flex-wrap:wrap;
  padding-bottom:clamp(40px,5vw,64px); border-bottom:1px solid var(--rule-d);
}
.footer__logo img{ width:clamp(130px,14vw,178px); height:auto; opacity:.9 }
.footer__nav{ display:flex; flex-wrap:wrap; gap:12px 30px }
.footer__nav a{
  font-family:var(--mincho); font-size:12.5px;
  letter-spacing:.12em; color:var(--mut-d); transition:color .4s;
}
.footer__nav a:hover{ color:var(--fg-d) }
.footer__legal{ display:flex; gap:22px; flex-wrap:wrap }
.footer__legal a{
  display:inline-block; padding:9px 0;
  font-family:var(--mincho); font-size:12px; letter-spacing:.1em;
  color:var(--mut-d); transition:color .4s;
}
.footer__legal a:hover{ color:var(--fg-d) }
.footer__bottom{
  max-width:1360px; margin:26px auto 0; display:flex; justify-content:space-between;
  align-items:center; gap:14px 24px; flex-wrap:wrap;
  font-family:var(--sans); font-weight:300; font-size:10px;
  letter-spacing:.2em; color:rgba(237,232,223,.34);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1080px){
  .header__nav{ display:none }
  .spec__inner{ grid-template-columns:1fr; gap:clamp(30px,6vw,44px) }
  .biz__headgrid{ grid-template-columns:1fr; gap:34px }
  .biz__lead{ padding-left:0; border-left:0; padding-top:24px; border-top:1px solid var(--rule-l); max-width:44em }
  .contact__grid{ grid-template-columns:1fr }
  .for__grid{ grid-template-columns:repeat(2,1fr) }
}

@media (max-width:900px){
  :root{ --gap-sec: clamp(96px,18vw,140px) }

  .hero__media img{ object-position:66% 50% }
  .hero__scrim{
    background:
      linear-gradient(180deg, rgba(8,7,6,.88) 0%, rgba(8,7,6,.68) 30%, rgba(8,7,6,.3) 56%,
        rgba(8,7,6,.24) 72%, rgba(8,7,6,.62) 100%);
  }
  .hero__inner{ justify-content:flex-start; padding-top:24vh }
  .hero__main{ font-size:clamp(28px,8vw,42px); line-height:1.5 }
  .hero__sub{ font-size:clamp(16px,4.4vw,23px); margin-top:clamp(20px,5vw,30px); line-height:1.8 }
  .hero__bar{ width:clamp(38px,10vw,60px); margin-left:16px }
  .hero__foot{ bottom:26px }
  .prologue{ min-height:auto; padding:clamp(96px,20vw,140px) var(--pad) }
  .prologue__lead{ margin-top:28px }
  .prologue__sub{ margin-top:26px }

  /* KOMORO: unpin, stack */
  .komoro__sticky{ position:static; height:auto; padding:clamp(96px,18vw,140px) 0 clamp(70px,12vw,110px) }
  .komoro__stage{ height:auto }
  .komoro__head{ position:static }
  .komoro{ height:auto }
  .komoro__stage::after{ content:none }
  .komoro__map{ position:relative; inset:auto; height:auto; padding:0;
    margin:clamp(26px,6vw,44px) 0 0;
    transform:none !important; opacity:1 !important; }
  .komoro__mapin{ width:118%; max-width:118%; max-height:none; margin-left:-9% }
  .komoro__head{ opacity:1 !important; transform:none !important }
  .komoro__data{
    position:static; margin-top:clamp(24px,5vw,38px); opacity:1; transform:none;
  }
  .komoro__data.reveal-m{ opacity:0; transform:translateY(20px) }
  .stats{ grid-template-columns:1fr; gap:0 }
  .stat + .stat{ padding-left:0; padding-top:26px; margin-top:26px; border-top:1px solid var(--rule-d) }
  .stat + .stat::before{ content:none }
  /* 数字の右が空くので、説明を横に並べる */
  .stat{
    display:grid; grid-template-columns:clamp(124px,35vw,150px) minmax(0,1fr);
    column-gap:clamp(12px,3.5vw,20px); align-items:center;
  }
  .stat__num{
    grid-column:1; grid-row:1 / 3; align-self:center;
    font-size:clamp(42px,13vw,60px); flex-wrap:nowrap;
  }
  .stat__num em{ font-size:10.5px; letter-spacing:.18em }
  .stat__label{ grid-column:2; grid-row:1; margin-top:0; font-size:13px; line-height:1.7 }
  .stat__sub{ grid-column:2; grid-row:2; margin-top:6px }
  .stat__sub--compare{ gap:2px 12px }
  .stat__sub--compare{ opacity:.62 }
  .komoro__foot{ flex-direction:column; align-items:flex-start; gap:14px }
  .komoro__source{ text-align:left }

  /* LAND：3枚を縦積み */
  .land__head{ flex-direction:column; align-items:flex-start; gap:26px }
  .land__loc{ padding-left:0; padding-bottom:0; padding-top:16px;
    border-left:0; border-top:1px solid var(--rule-l); }
  .land__grid{
    grid-template-columns:1fr; grid-template-rows:none; height:auto;
    gap:clamp(16px,4vw,26px);
  }
  .lcard--tall{ grid-row:auto }
  .lcard{ aspect-ratio:5/4 }
  .lcard--tall{ aspect-ratio:4/5 }
  .lcard__ttl{ font-size:clamp(19px,5.2vw,26px) }
  .lcard__txt{ font-size:12.5px }
  .lcard__big{ font-size:clamp(46px,13vw,72px) }
  .lcard__tag--tr{ top:clamp(88px,19vw,112px); bottom:auto }

  /* MILLING：2列（狭い画面では1列） */
  .mill__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(8px,2vw,14px) }
  .mcard__ttl{ font-size:clamp(17px,4.6vw,22px); letter-spacing:.18em }
  .mcard__txt{ font-size:11.5px; line-height:1.85 }
  .mcard__end-en{ font-size:clamp(12px,3.4vw,16px) }

  /* ROLE */
  .flow__list{ grid-template-columns:1fr; gap:0 }
  .flow__node{ flex-direction:row; align-items:center; gap:18px; text-align:left; padding:16px 0 16px 0 }
  .flow__jp{ margin-top:0 }
  .flow__en{ margin-top:0; margin-left:auto }
  .flow__line{
    left:calc(var(--pad) + 4px); right:auto; top:26px; bottom:26px; width:1px; height:auto;
  }
  .flow__line i{ width:100%; height:100%; transform:scaleY(0); transform-origin:top }
  .flow.is-in .flow__line i{ transform:scaleY(1) }
  .flow__caption{ text-align:left; margin-top:36px }
  /* 右が空いているので見出しと本文を横に。罫で区切って密度を上げる */
  .role__three{ grid-template-columns:1fr; gap:0; padding-top:0; border-top:0 }
  .role__cell{
    display:grid; grid-template-columns:6.6em minmax(0,1fr); column-gap:16px;
    align-items:start; padding:clamp(20px,5vw,28px) 0;
    border-top:1px solid var(--rule-l);
  }
  .role__cell h3{ grid-column:1; grid-row:1; font-size:19px; letter-spacing:.14em }
  .role__rule{ grid-column:1; grid-row:2; margin:10px 0 8px }
  .role__en{ grid-column:1; grid-row:3; font-size:10.5px; letter-spacing:.2em }
  .role__txt{ grid-column:2; grid-row:1 / 4; margin-top:2px; font-size:12.5px; line-height:2 }

  /* SPEC / PRICE / FOR */
  /* SPEC：仕様一覧 → 米粒 → 荷姿 → 配送 の1カラム */
  .spec__figs{ grid-template-columns:1fr }
  .sfig--wide{ grid-column:auto }
  .sfig--wide img{ aspect-ratio:16/9 }
  .sfig:not(.sfig--wide) img{ aspect-ratio:4/3 }
  .for__grid{ grid-template-columns:1fr }
  .for__grid li{
    flex-direction:row; align-items:baseline; justify-content:space-between;
    gap:16px; padding:clamp(20px,5vw,28px) 0;
  }
  .for__grid li em{ white-space:nowrap }
  .biz__grid{ grid-template-columns:1fr; gap:clamp(56px,12vw,80px) }
  .biz__fig img{ aspect-ratio:4/3 }
  .biz__link{ max-width:280px }
  .btn{ width:100%; padding:20px 24px }
  .footer__top{ flex-direction:column; align-items:flex-start }
}

@media (max-width:520px){
  .mill__grid{ grid-template-columns:1fr }
  .mcard{ aspect-ratio:5/4 }
  .header__cta{ font-size:11px; padding:9px 15px; letter-spacing:.12em }
  .header__logo{ font-size:12.5px; letter-spacing:.24em }
  .spec__row{ grid-template-columns:4.6em minmax(0,1fr); gap:14px; padding:16px 0 }
}


/* ---------- SP：可読性とタップ領域の確保 ---------- */
@media (max-width:900px){
  /* 和文が10px前後だと読めないので底上げ */
  .stat__sub{ font-size:11.5px; letter-spacing:.16em }
  .stat__sub--compare{ gap:4px 14px }
  .komoro__source{ font-size:11px }
  .flow__en{ font-size:11px; letter-spacing:.18em }
  .flow__caption{ font-size:11.5px; letter-spacing:.18em }
  .hero__label{ font-size:12px; letter-spacing:.16em }
  .mcard__no,.lcard__no,.biz__no{ font-size:10.5px; letter-spacing:.22em }
  .lcard__tag,.mcard__end-en{ font-size:10.5px; letter-spacing:.22em }
  .sfig__en{ font-size:11px }
  .biz__link{ font-size:11px; letter-spacing:.22em }
  /* 見出しが1文字だけ次行に落ちるのを防ぐ */
  .h2{ font-size:clamp(24px,6.3vw,32px); letter-spacing:.06em; text-wrap:balance }
  /* 英字の副ラベルはSPでは行を分断するので隠す */
  .spec__note{ font-size:.82em }
  .form__row label{ font-size:11.5px; letter-spacing:.18em }
  .form__row label span{ font-size:10px }
  .footer__bottom{ font-size:11px }

  /* タップできる高さを確保 */
  .footer__nav{ gap:2px 26px }
  .footer__nav a{ display:block; padding:9px 0 }
  .header__logo{ padding:7px 0 }
  .header__cta{ padding:13px 18px }

  /* 縦の間延びを抑える */
  .biz__grid{ gap:clamp(44px,9vw,62px) }
  .biz__fig img{ aspect-ratio:16/10 }
  .biz__en{ min-height:0; margin-top:14px }
  .biz__desc{ margin-top:14px; margin-bottom:20px }
  .biz__link{ padding-bottom:16px }
  .form__row{ margin-bottom:24px }
  .price__grid{ grid-template-columns:1fr; gap:clamp(28px,6vw,40px) }
  .price__side{ padding-left:0; padding-top:clamp(26px,6vw,36px);
    border-left:0; border-top:1px solid rgba(138,110,60,.24) }

  /* SPは4つ横並びだと写真が潰れるので2×2に */
  .price__points{ grid-template-columns:repeat(2,minmax(0,1fr));
    gap:clamp(18px,4.5vw,30px) 12px; margin-top:clamp(30px,7vw,44px) }
  .price__pt-fig{ width:82%; margin:0 auto }
  .price__pt-jp{ font-size:18px }
  .price__pt-txt{ font-size:12.5px }
  .price__act{ margin-top:clamp(34px,8vw,52px) }
  .price__side-lead{ font-size:17px }
  .offer__price{ font-size:clamp(60px,17vw,92px) }
  .offer__price .per{ font-size:11.5px; letter-spacing:.16em }
  .price__pt-en{ font-size:11px }
  .offer__brand{ font-size:17px }
  .offer__terms{ font-size:16px }
  .offer__tag{ font-size:13px }
  .price__ine{ width:clamp(220px,58vw,300px); opacity:.24; bottom:-30px; left:-60px }
  .btn--gold{ font-size:12.5px; letter-spacing:.1em; padding:20px 18px }
  .form__row input,.form__row select,.form__row textarea{ margin-top:10px; padding:10px 0 }
}

@media (max-width:520px){
  .mcard{ aspect-ratio:3/2 }
  .mill__grid{ gap:8px }
  /* 02/03 は固定比率だと文字帯に押されて写真が帯状に潰れる。
     高さを内容にまかせ、写真だけ比率を保つ */
  .lcard--tall{ aspect-ratio:3/4 }
  .lcard--light{ aspect-ratio:auto }
  .lcard--light .lcard__fig{ aspect-ratio:16/10 }
  .lcard--light .lcard__body{ padding-bottom:clamp(16px,4vw,22px) }
  /* 絶対配置のままだと本文に重なるので流し込みに戻す */
  .lcard__big{ display:none }
  .lcard__tag--tr{
    position:static; text-align:right; margin-top:10px;
    padding:0 clamp(22px,2.4vw,34px) clamp(16px,4vw,22px);
  }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; }
  .js .reveal{ opacity:1 !important; transform:none !important }
  .js .line > span{ transform:none !important }
  .komoro{ height:auto !important }
  .komoro__sticky{ position:static; height:auto; padding:120px 0 }
  .komoro__map,.komoro__head{ transform:none !important; opacity:1 !important }
  .komoro__mapin{ width:100%; margin:0 }
  .komoro__stage{ height:auto }
  .komoro__head,.komoro__data{ position:static; opacity:1; transform:none }
  .komoro__map{ position:relative; inset:auto; margin-top:50px }
  .hero__media img{ opacity:1; transform:none }
  .opening{ display:none }
}