/* 温かみ（10/29 先方の希望）：日なたの土壁と生成り、焦げ茶の文字、夕焼けの琥珀色。写真は額装して説明札を添える
   （それまでは焼杉の黒が基調だった。--kura は名前を残したまま、明るい土色に変えている） */
:root{
  --paper:#FDFBF7; --paper-2:#F6F0E6; --ink:#2B2520; --ink-soft:#6E645A; --line:#E7DFD2;
  --kura:#FDFBF7; --kura-2:#F6F0E6; --on-kura:#2B2520; --on-kura-soft:#6E645A;
  --ai:#3E6273; --kin:#A6844C; --kin-soft:#A6844C;
  --kraft:#CFA877; --kraft-deep:#B88E5C; --kraft-ink:#5A3524;
  --todo-bg:#FFEE58; --todo-fg:#3B2A00;
  --f-min:"Shippori Mincho B1","Yu Mincho","Hiragino Mincho ProN",serif;
  --f-body:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic",sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:#171513; --paper-2:#1F1C19; --ink:#ECE7DE; --ink-soft:#B3AA9D; --line:#3A352F;
  --kura:#2A211A; --kura-2:#33281F; --on-kura:#F1E7D7; --on-kura-soft:#C2AE98; --ai:#8FB0C6; --kin:#D99A5E; --kin-soft:#D99A5E; color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#171513; --paper-2:#1F1C19; --ink:#ECE7DE; --ink-soft:#B3AA9D; --line:#3A352F;
  --kura:#2A211A; --kura-2:#33281F; --on-kura:#F1E7D7; --on-kura-soft:#C2AE98; --ai:#8FB0C6; --kin:#D99A5E; --kin-soft:#D99A5E; color-scheme:dark}

*{box-sizing:border-box}
body{background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.95;letter-spacing:.02em;
  -webkit-text-size-adjust:100%;font-feature-settings:"palt" 0}
h1,h2,h3{font-family:var(--f-min);font-weight:700;line-height:1.45;margin:0;text-wrap:balance}
p{margin:0}
a{color:inherit}
img{max-width:100%}
:focus-visible{outline:2px solid var(--kin);outline-offset:4px}
.wrap{max-width:1120px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.narrow{max-width:760px}
.todo{background:var(--todo-bg);color:var(--todo-fg);font-family:var(--f-body);font-size:.8em;font-weight:500;letter-spacing:0;padding:.1em .5em;border-radius:3px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.draft{background:var(--todo-bg);color:var(--todo-fg);font-size:13px;text-align:center;padding:6px 16px}

/* 開幕 */
#curtain{position:fixed;inset:0;z-index:50;background:var(--kura);display:grid;place-items:center;
  animation:curtain-out .9s cubic-bezier(.7,0,.2,1) 2.1s forwards}
#curtain .c{font-family:var(--f-min);font-weight:700;color:var(--on-kura);font-size:clamp(34px,6vw,60px);letter-spacing:.3em;
  writing-mode:vertical-rl;display:flex;align-items:center}
#curtain .c span{opacity:0;filter:blur(6px);transform:translateY(-10px);animation:char-in .8s ease forwards}
#curtain .c i{display:block;width:1px;height:2.2em;background:var(--kin);margin:.5em 0;opacity:0;animation:char-in .8s ease 1.1s forwards}
#curtain .c small{font-size:.42em;letter-spacing:.4em;opacity:0;animation:char-in .8s ease 1.3s forwards}
@keyframes char-in{to{opacity:1;filter:none;transform:none}}
@keyframes curtain-out{to{transform:translateY(-100%);visibility:hidden}}

/* 見出しまわり */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;font-family:var(--f-min);font-weight:700;letter-spacing:.12em;
  text-decoration:none;padding:.9em 1.8em;font-size:15px;border:1px solid currentColor;transition:background .25s,color .25s}
.btn::after{content:"";width:18px;height:1px;background:currentColor;transition:width .25s}
.btn:hover::after{width:28px}
.btn-solid{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn-solid:hover{background:transparent;color:var(--ink)}
.btn-line:hover{background:var(--ink);color:var(--paper)}
.on-kura .btn-line:hover{background:var(--on-kura);color:var(--kura)}

section{padding-block:clamp(72px,10vw,128px)}
.head{display:grid;grid-template-columns:auto 1fr;gap:0 28px;margin-bottom:clamp(36px,5vw,56px);align-items:start}
.num{font-family:var(--f-min);font-weight:800;color:var(--kin);font-size:15px;letter-spacing:.2em;writing-mode:vertical-rl;
  border-left:1px solid var(--kin);padding-left:10px;line-height:1}
.head h2{font-size:clamp(28px,4vw,42px);letter-spacing:.08em}
.head p{color:var(--ink-soft);margin-top:14px;max-width:36em}
.kicker{display:block;font-size:12px;letter-spacing:.32em;color:var(--kin);margin-bottom:10px;font-family:var(--f-body);font-weight:500}

/* 額装 */
.frame{margin:0;background:var(--paper);padding:clamp(10px,1.4vw,16px);box-shadow:0 1px 0 var(--line),0 24px 40px -28px rgba(90,55,25,.45);position:relative;border-radius:4px}
.frame img{border-radius:2px;display:block;width:100%;height:auto;object-fit:cover}
.frame figcaption{font-size:12px;letter-spacing:.14em;color:var(--ink-soft);padding-top:10px}

/* ヒーロー（焼杉の黒） */
.on-kura{background:var(--kura);color:var(--on-kura)}
.hero{background:
  repeating-linear-gradient(90deg,rgba(255,255,255,.018) 0 2px,transparent 2px 7px,rgba(0,0,0,.08) 7px 8px,transparent 8px 19px),
  var(--kura);overflow:hidden}
.bar{display:flex;align-items:center;justify-content:space-between;gap:12px 24px;padding-block:22px;flex-wrap:wrap}
.brand{font-family:var(--f-min);font-weight:700;font-size:19px;letter-spacing:.14em;text-decoration:none}
.brand b{color:var(--kin-soft);font-weight:700;margin:0 .15em}
nav{display:flex;gap:6px 26px;flex-wrap:wrap;font-size:14px;letter-spacing:.14em}
nav a{text-decoration:none;color:var(--on-kura-soft);transition:color .2s}
nav a:hover{color:var(--on-kura)}
.hero-in{display:grid;grid-template-columns:auto 1fr;gap:clamp(28px,6vw,90px);align-items:center;padding-block:clamp(36px,6vw,80px) clamp(72px,9vw,120px)}
.hero-copy{display:flex;flex-direction:row-reverse;gap:clamp(18px,3vw,34px);align-items:flex-start}
.hero h1{writing-mode:vertical-rl;font-size:clamp(34px,4.6vw,58px);letter-spacing:.18em;line-height:1.6;font-weight:800}
.hero .place{writing-mode:vertical-rl;font-size:13px;letter-spacing:.4em;color:var(--kin-soft);border-right:1px solid color-mix(in srgb,var(--kin) 60%,transparent);padding-right:10px}
.hero .lead{writing-mode:vertical-rl;font-size:15px;line-height:2.3;color:var(--on-kura-soft);max-height:22em;letter-spacing:.12em}
.collage{position:relative;min-height:clamp(380px,46vw,560px)}
.collage .frame{position:absolute;background:#FFFCF6}
.collage .frame figcaption{color:#7A6553}
.collage .f1{width:62%;left:0;top:4%;z-index:2}
.collage .f2{width:34%;right:0;top:0}
.collage .f3{width:52%;right:6%;bottom:0;z-index:3}

/* 季節の贈りもの */
.gift-band{background:
  radial-gradient(130% 90% at 85% 10%,color-mix(in srgb,var(--kin) 14%,transparent),transparent 60%),
  var(--paper-2)}
.gift-in{display:grid;grid-template-columns:1fr .85fr;gap:clamp(32px,6vw,80px);align-items:center}
.gift-in h2{font-size:clamp(28px,4vw,44px);letter-spacing:.06em}
.gift-in h2 em{font-style:normal;color:var(--kin)}
.gift-in .lead{margin-top:20px;color:var(--ink-soft);max-width:30em}
.spec{margin:0;display:grid;grid-template-columns:auto 1fr;gap:10px 24px;font-size:15px}
.spec dt{color:var(--ink-soft);letter-spacing:.14em;font-size:13px;padding-top:2px}
.spec dd{margin:0;font-variant-numeric:tabular-nums}
.gift-spec{margin-top:28px;padding-top:24px;border-top:1px solid var(--line)}
.seasons{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:28px}
.seasons div{border-top:1px solid var(--kin);padding-top:12px}
.seasons h3{font-size:18px;letter-spacing:.12em}
.seasons p{font-size:14px;color:var(--ink-soft);margin-top:4px}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.bag{position:relative;width:min(340px,74vw);aspect-ratio:3/4;margin:0 auto;border-radius:6px 6px 14px 14px;
  background:
    linear-gradient(90deg,transparent 0 12%,rgba(255,255,255,.12) 12% 13%,transparent 13% 87%,rgba(0,0,0,.07) 87% 88%,transparent 88%),
    radial-gradient(120% 80% at 30% 20%,#DDBB8A,transparent 60%),
    var(--kraft);
  box-shadow:0 30px 50px -30px rgba(40,25,10,.7)}
.bag::before{content:"";position:absolute;inset:0 0 auto;height:9%;border-radius:6px 6px 0 0;
  background:repeating-linear-gradient(90deg,var(--kraft-deep) 0 3px,var(--kraft) 3px 9px)}
.bag img{position:absolute;left:50%;top:17%;width:74%;transform:translateX(-50%) rotate(-6deg);filter:drop-shadow(0 3px 3px rgba(60,35,20,.25))}
.bag .stamp{position:absolute;left:0;right:0;bottom:7%;text-align:center;font-family:var(--f-min);font-weight:800;color:var(--kraft-ink);letter-spacing:.4em;font-size:17px}

/* 草木染 */
.dye-main{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(28px,5vw,64px);align-items:end}
.label{border-top:1px solid var(--ink);padding-top:18px;display:grid;gap:16px}
.label h3{font-size:22px;letter-spacing:.1em}
.label .note{font-size:13px;color:var(--ink-soft)}
/* のれんの売り場：一点ものを額装して並べ、押すと札（詳しい説明と頼み方）が開く */
.shelf{margin-top:clamp(56px,8vw,96px)}
.shelf-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:16px 32px;border-bottom:1px solid var(--ink);padding-bottom:16px}
.shelf-head h3{font-size:clamp(22px,3vw,28px);letter-spacing:.1em}
.shelf-head p{font-size:13px;color:var(--ink-soft);margin-top:6px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips button{font:500 13px/1 var(--f-body);letter-spacing:.12em;color:var(--ink-soft);background:none;border:1px solid var(--line);padding:9px 14px;cursor:pointer;transition:border-color .2s,color .2s}
.chips button:hover{color:var(--ink);border-color:var(--ink-soft)}
.chips button[aria-pressed="true"]{color:var(--paper);background:var(--ink);border-color:var(--ink)}
.works{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,40px) clamp(14px,2vw,28px);margin:clamp(28px,4vw,44px) 0 0;padding:0;list-style:none}
.works[hidden],.work[hidden]{display:none}
.work button{all:unset;display:block;width:100%;cursor:pointer;box-sizing:border-box}
.work button:focus-visible{outline:2px solid var(--kin);outline-offset:4px}
.work .frame{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.work button:hover .frame{transform:translateY(-4px);box-shadow:0 1px 0 var(--line),0 30px 44px -26px rgba(20,15,10,.6)}
.work .frame img{aspect-ratio:3/4}
.work .tag{position:absolute;top:clamp(10px,1.4vw,16px);left:clamp(10px,1.4vw,16px);background:var(--kura);color:var(--on-kura);font-size:11px;letter-spacing:.14em;padding:3px 8px}
.work .meta{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding-top:12px;align-items:baseline}
.work .no{font-family:var(--f-min);font-weight:700;font-size:15px;letter-spacing:.12em;font-variant-numeric:tabular-nums}
.work .yen{font-family:var(--f-min);font-weight:700;font-size:17px;font-variant-numeric:tabular-nums}
.work .yen small{font-size:11px;margin-left:1px}
.shelf-foot{margin-top:clamp(36px,5vw,56px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,36px)}
.shelf-foot div{border-top:1px solid var(--kin);padding-top:12px}
.shelf-foot h4{font-family:var(--f-min);font-size:16px;letter-spacing:.1em;margin:0}
.shelf-foot p{font-size:13px;color:var(--ink-soft);margin-top:6px}

dialog.ticket{border:0;padding:0;width:min(900px,calc(100vw - 32px));max-height:calc(100dvh - 32px);background:var(--paper);color:var(--ink);overflow:auto;box-shadow:0 40px 80px -30px rgba(0,0,0,.6)}
dialog.ticket::backdrop{background:rgba(20,17,14,.72)}
.ticket-in{display:grid;grid-template-columns:1fr 1fr}
.ticket-in img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:3/4;background:var(--paper-2)}
.ticket-body{padding:clamp(24px,4vw,44px);display:flex;flex-direction:column;gap:18px}
.ticket-body .no{font-family:var(--f-min);font-weight:700;color:var(--kin);letter-spacing:.2em;font-size:13px}
.ticket-body h3{font-size:24px;letter-spacing:.08em}
.ticket-body .yen{font-family:var(--f-min);font-weight:800;font-size:30px;font-variant-numeric:tabular-nums}
.ticket-body .yen small{font-size:14px;margin-left:2px}
.ticket-body .how{font-size:14px;color:var(--ink-soft);border-top:1px solid var(--line);padding-top:16px;display:grid;gap:6px}
.ticket-body .actions{margin-top:auto}
.ticket .x{position:absolute;top:10px;right:10px;width:40px;height:40px;border:0;background:var(--paper);color:var(--ink);font-size:22px;cursor:pointer;line-height:1}
@media (max-width:820px){.ticket-in{grid-template-columns:1fr}.ticket-in img{aspect-ratio:4/5;max-height:56vh}}

/* お米 */
.rice-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,80px);align-items:start}
.facts{list-style:none;margin:0;padding:0;display:grid;gap:28px}
.facts h3{font-size:19px;letter-spacing:.08em;display:flex;align-items:center;gap:12px}
.facts h3::before{content:"";width:16px;height:1px;background:var(--kin)}
.facts p{margin-top:8px;color:var(--ink-soft);font-size:15px}
.menu{margin-top:clamp(48px,7vw,80px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,80px);align-items:start}
.menu h3{font-size:22px;letter-spacing:.08em}
.menu .sub{color:var(--ink-soft);font-size:14px;margin-top:6px}
.price-list{list-style:none;margin:22px 0 0;padding:0;border-top:1px solid var(--ink)}
.price-list li{display:flex;align-items:baseline;gap:14px;padding:16px 2px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.price-list .kg{font-family:var(--f-min);font-weight:700;font-size:22px;min-width:3.2em}
.price-list .dots{flex:1;border-bottom:1px dotted var(--line);transform:translateY(-6px)}
.price-list .yen{font-family:var(--f-min);font-weight:700;font-size:22px}
.price-list .yen small{font-size:13px;margin-left:2px}
.price-list .yen{text-align:right}
.price-list .yen .tax{display:block;font-family:var(--f-body);font-weight:400;font-size:12px;color:var(--ink-soft);letter-spacing:.02em;margin-top:2px}
.price-foot{font-size:13px;color:var(--ink-soft);margin-top:12px}
.ship{margin-top:26px}
.ship summary{cursor:pointer;font-family:var(--f-min);font-weight:700;letter-spacing:.1em;font-size:15px}
.ship table{width:100%;border-collapse:collapse;margin-top:14px;font-size:14px;font-variant-numeric:tabular-nums}
.ship th,.ship td{border-bottom:1px solid var(--line);padding:9px 6px;text-align:left;vertical-align:top;font-weight:400}
.ship th{font-size:12px;letter-spacing:.14em;color:var(--ink-soft)}
.ship .n{text-align:right;white-space:nowrap}
.ship .area{color:var(--ink-soft);font-size:12px}
.ship .note{font-size:13px;color:var(--ink-soft);margin-top:10px}

/* ご注文 */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,36px);counter-reset:s}
.steps li{counter-increment:s;border-top:1px solid var(--ink);padding-top:18px}
.steps li::before{content:counter(s,cjk-ideographic);font-family:var(--f-min);font-weight:800;color:var(--kin);font-size:28px;display:block;line-height:1;margin-bottom:12px}
.steps h3{font-size:18px;letter-spacing:.08em}
.steps p{font-size:14px;color:var(--ink-soft);margin-top:8px}
.order-btns{display:grid;grid-template-columns:repeat(2,minmax(0,280px));gap:12px;margin-top:clamp(36px,5vw,56px)}
.order-notes{margin-top:22px;font-size:13px;color:var(--ink-soft);display:grid;gap:6px}

/* お店（焼杉の黒） */
.shop-in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,80px);align-items:center}
.on-kura .head p,.on-kura .spec dt{color:var(--on-kura-soft)}
.on-kura .spec dd a{color:var(--on-kura)}
.on-kura .frame{background:#FFFCF6}
.on-kura .note{font-size:13px;color:var(--on-kura-soft);margin-top:14px}

/* ぴよ農園 */
.farm-in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,80px);align-items:center}
.photo{aspect-ratio:4/3;border:1px dashed var(--line);display:grid;place-items:center;color:var(--ink-soft);font-size:14px;text-align:center;padding:16px}

/* よくある質問 */
details{border-bottom:1px solid var(--line);padding-block:18px}
details:first-of-type{border-top:1px solid var(--ink)}
summary{cursor:pointer;font-family:var(--f-min);font-weight:700;font-size:17px;letter-spacing:.06em;list-style:none;display:flex;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"＋";color:var(--kin);font-weight:400}
details[open] summary::after{content:"－"}
details p{margin-top:10px;color:var(--ink-soft);font-size:15px}

footer{background:var(--kura);color:var(--on-kura);font-size:14px}
.foot-in{padding-block:56px 40px;display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:28px}
.foot-in .brand{font-size:20px}
.foot-in b{font-family:var(--f-min);letter-spacing:.12em;display:block;margin-bottom:6px}
.foot-in div{color:var(--on-kura-soft)}
.foot-legal{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;border-top:1px solid color-mix(in srgb,var(--on-kura) 15%,transparent);padding-top:20px;font-size:12px;color:var(--on-kura-soft);letter-spacing:.08em}
.foot-legal a{color:var(--on-kura-soft)}

/* スクロールで現れる */
.rv{opacity:0;transform:translateY(22px);transition:opacity 1s ease,transform 1s cubic-bezier(.2,.7,.2,1)}
.rv.on{opacity:1;transform:none}
.rv[data-d="1"]{transition-delay:.15s}.rv[data-d="2"]{transition-delay:.3s}.rv[data-d="3"]{transition-delay:.45s}

@media (max-width:820px){
  .hero-in,.gift-in,.dye-main,.rice-grid,.menu,.shop-in,.farm-in{grid-template-columns:1fr}
  .hero-copy{justify-content:center}
  .hero .lead{max-height:none;height:19em}
  .collage{min-height:0;height:min(92vw,440px)}
  .gift-visual{order:-1}
  .works{grid-template-columns:repeat(2,minmax(0,1fr))}
  .shelf-foot{grid-template-columns:1fr}
  .steps,.order-btns{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr}
  .foot-in{grid-template-columns:1fr}
}
@media (max-width:420px){
  .hero .lead{font-size:14px}
  .seasons{grid-template-columns:1fr}
}
/* ---- 複数ページ（10/29〜） ---- */
/* 上のメニュー：タブの形で、スクロールしても上に残る。今いるページは塗りつぶし */
.topbar{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--kura) 94%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-bottom:1px solid color-mix(in srgb,var(--on-kura) 12%,transparent)}
.topbar .bar{padding-block:12px}
section[id],.shelf{scroll-margin-top:120px}
.tabs{min-width:0;display:flex;gap:8px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;font-size:14px;letter-spacing:.1em;-webkit-overflow-scrolling:touch}
.tabs::-webkit-scrollbar{display:none}
.tabs a{flex:none;text-decoration:none;color:var(--on-kura);border:1px solid color-mix(in srgb,var(--on-kura) 28%,transparent);background:color-mix(in srgb,var(--paper) 55%,transparent);border-radius:999px;padding:7px 16px;line-height:1.4;transition:background .2s,border-color .2s}
.tabs a:hover{border-color:var(--kin);background:var(--paper)}
.tabs a[aria-current="page"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
@media (max-width:820px){
  .topbar .bar{flex-direction:column;align-items:stretch;gap:8px;padding-block:10px}
  .topbar .brand{font-size:16px}
  .tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;overflow:visible}
  .tabs a{padding:6px 4px;font-size:13px;text-align:center;letter-spacing:.06em}
}
/* 下層ページの現在地 */
.crumb{font-size:13px;letter-spacing:.1em;color:var(--on-kura-soft);display:flex;gap:10px;align-items:center}
.crumb a{color:var(--on-kura);text-underline-offset:3px}
/* トップの目次 */
.toc{padding-block:clamp(48px,7vw,80px)}
.toc-head{margin-bottom:clamp(28px,4vw,40px)}
.toc-head h2{font-size:clamp(20px,2.6vw,28px);letter-spacing:.06em;line-height:1.7}
.toc-head p{color:var(--ink-soft);margin-top:10px}
.doors.doors-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.go{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-family:var(--f-min);font-weight:700;font-size:14px;letter-spacing:.1em;color:var(--paper);background:var(--ink);padding:8px 16px;border-radius:999px;transition:background .2s}
.go::after{content:"→"}
.door:hover .go{background:var(--kin)}
.toc-gift{margin-top:clamp(24px,3vw,36px);font-size:14px}
.toc-gift a{color:var(--kin);text-underline-offset:4px}
@media (max-width:820px){.toc-head h2{font-size:18px}.toc-head h2 br{display:none}.doors.doors-4{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 14px}.door h3{font-size:18px}.door p{font-size:13px}.go{font-size:13px;padding:7px 12px}}
/* 下層ページの見出し帯（トップより低く、焼杉の黒は共通） */
.page-hero{padding-block:clamp(28px,5vw,56px) clamp(48px,7vw,84px);display:grid;gap:14px}
.hero .page-hero h1{writing-mode:horizontal-tb;font-size:clamp(32px,5vw,52px);letter-spacing:.14em;font-weight:800;line-height:1.4}
.page-hero p{color:var(--on-kura-soft);max-width:34em}
.page-hero .kicker{margin:0}

/* トップ：3つの入口 */
.doors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,40px)}
.door{text-decoration:none;display:block}
.door .frame img{aspect-ratio:4/3}
.door .frame{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.door:hover .frame{transform:translateY(-4px)}
.door h3{font-size:22px;letter-spacing:.1em;margin-top:18px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.door h3::after{content:"";width:22px;height:1px;background:var(--kin);transition:width .25s}
.door:hover h3::after{width:36px}
.door p{font-size:14px;color:var(--ink-soft);margin-top:8px}

/* 倉吉の水（藍） */
.water{background:var(--ai);color:#EEF2F4}
:root[data-theme="dark"] .water{background:#1C2E3A}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .water{background:#1C2E3A}}
.water-in{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,6vw,80px);align-items:center}
.water .kicker{color:#D8C08A}
.water h2{font-size:clamp(28px,4vw,42px);letter-spacing:.08em}
.water p{color:#C9D5DC;margin-top:16px;max-width:34em}
.water .todo{color:var(--todo-fg)}
.water .src{font-size:12px;color:#A9BAC4;margin-top:22px}
.water .src a{color:#C9D5DC}
.stat{border:1px solid rgba(255,255,255,.28);padding:clamp(24px,4vw,40px);display:grid;gap:10px;text-align:center}
.stat .big{font-family:var(--f-min);font-weight:800;font-size:clamp(56px,9vw,96px);line-height:1;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.stat .big small{font-size:.32em;margin-left:.15em;letter-spacing:.1em}
.stat .cap{font-size:13px;letter-spacing:.12em;color:#C9D5DC}
.stat .rivers{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:6px}
.stat .rivers span{font-family:var(--f-min);font-weight:700;border:1px solid #D8C08A;color:#F3F2EE;padding:4px 14px;letter-spacing:.14em}
.water .actions .btn{color:#F3F2EE}
.water .actions .btn:hover{background:#F3F2EE;color:var(--ai)}

.stat{background:linear-gradient(rgba(29,52,68,.80),rgba(29,52,68,.80)),url(img/farm/sagi.jpg) center 55%/cover}

/* 農園主より（手紙） */
.letter{margin-top:32px;padding:clamp(22px,3vw,32px);background:var(--paper-2);border-left:2px solid var(--kin);display:grid;gap:14px;font-size:15px;line-height:2}
.letter .kicker{margin:0}
.letter p{color:var(--ink)}
.letter .sign{font-family:var(--f-min);font-weight:700;letter-spacing:.12em;text-align:right;margin-top:6px}
.farm-in{align-items:start}

/* 精米の動画（縦長なので高さを抑える） */
.movie{margin:0 auto 28px;max-width:300px}
.movie video{display:block;width:100%;aspect-ratio:9/16;object-fit:cover;background:var(--paper-2)}

/* 田んぼの一年 */
.year{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,3vw,36px)}
.year img{aspect-ratio:4/5}
@media (max-width:820px){.year{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ご注文・お問い合わせの帯（全ページ共通、ご注文ページ以外） */
.cta{background:var(--paper-2);border-top:1px solid var(--line)}
.cta-in{display:grid;grid-template-columns:1fr auto;gap:28px 48px;align-items:center}
.cta h2{font-size:clamp(24px,3.4vw,34px);letter-spacing:.08em}
.cta p{color:var(--ink-soft);margin-top:10px}
.cta-btns{display:grid;gap:10px;min-width:260px}
.foot-nav{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:14px;font-size:13px}
.foot-nav a{color:var(--on-kura-soft);text-decoration:none}
.foot-nav a:hover{color:var(--on-kura)}
@media (max-width:820px){
  .doors,.water-in,.cta-in{grid-template-columns:1fr}
  .cta-btns{min-width:0}
}

@media (prefers-reduced-motion:reduce){
  #curtain{display:none}
  .rv{opacity:1;transform:none;transition:none}
  *{animation:none!important;transition:none!important}
}
/* =========================================================
   洗練×温かみ（10/29 参考 hachidaime.com）
   白い余白・明朝の見出し・金の差し色・大きな写真。額縁や影、縞模様はやめて、
   温かみは写真とお母さんの言葉で出す。ここから下が上の指定より優先される
   ========================================================= */
body{background:var(--paper);letter-spacing:.04em}
.draft{position:fixed;left:12px;bottom:12px;z-index:30;font-size:11px;padding:4px 10px;border-radius:999px;box-shadow:0 2px 8px rgba(0,0,0,.12)}
section{padding-block:clamp(80px,11vw,140px)}

/* 上のメニュー：白地に文字だけ、今のページは金の下線 */
.topbar{background:color-mix(in srgb,#fff 92%,transparent);border-bottom:1px solid var(--line)}
.topbar .bar{padding-block:16px}
.brand{font-size:18px;letter-spacing:.18em}
.brand b{color:var(--kin)}
.tabs{gap:0}
.tabs a{border:0;background:none;border-radius:0;padding:6px 16px;color:var(--ink);position:relative;font-family:var(--f-min);font-weight:500;letter-spacing:.14em}
.tabs a+a::before{content:"";position:absolute;left:0;top:50%;height:12px;margin-top:-6px;width:1px;background:var(--line)}
.tabs a:hover{background:none;color:var(--kin)}
.tabs a[aria-current="page"]{background:none;color:var(--kin);border:0}
.tabs a[aria-current="page"]::after{content:"";position:absolute;left:16px;right:16px;bottom:0;height:1px;background:var(--kin)}
@media (max-width:820px){
  .tabs{gap:0;border-top:1px solid var(--line);padding-top:6px}
  .tabs a{padding:8px 4px;font-size:13px}
  .tabs a+a::before{display:none}
  .tabs a[aria-current="page"]::after{left:20%;right:20%}
}

/* トップ：画面いっぱいの写真をゆっくり切り替える */
.hero{background:none}
.hero.is-top{padding:0}
.mv{position:relative;height:min(88vh,820px);min-height:520px;overflow:hidden;color:#fff}
.mv-slides img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;animation:mv-fade 21s infinite;transform:scale(1.04)}
.mv-slides img:nth-child(1){animation-delay:0s}
.mv-slides img:nth-child(2){animation-delay:7s}
.mv-slides img:nth-child(3){animation-delay:14s}
@keyframes mv-fade{0%{opacity:0;transform:scale(1.04)}6%{opacity:1}33%{opacity:1}40%{opacity:0;transform:scale(1)}100%{opacity:0}}
.mv::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(25,18,12,.55),rgba(25,18,12,.12) 55%,transparent)}
.mv-copy{position:relative;z-index:1;height:100%;display:flex;flex-direction:row-reverse;justify-content:flex-end;align-items:center;gap:clamp(18px,3vw,34px)}
.mv-copy h1{writing-mode:vertical-rl;font-size:clamp(34px,4.6vw,58px);letter-spacing:.2em;line-height:1.7;font-weight:700;text-shadow:0 2px 18px rgba(0,0,0,.35)}
.mv-copy .place{writing-mode:vertical-rl;font-size:13px;letter-spacing:.4em;border-right:1px solid rgba(255,255,255,.6);padding-right:10px}
.mv-copy .lead{writing-mode:vertical-rl;font-size:15px;line-height:2.4;letter-spacing:.14em;color:rgba(255,255,255,.92);text-shadow:0 1px 10px rgba(0,0,0,.4)}

/* 下層ページの上：左に言葉、右に写真 */
.hero.has-photo{padding:0;background:var(--paper)}
.hero.has-photo .page-hero{display:grid;grid-template-columns:1fr 1.1fr;gap:0 clamp(28px,5vw,72px);align-items:center;padding-block:clamp(36px,5vw,56px);max-width:none;padding-right:0}
.hero.has-photo .page-hero::after{content:"";grid-column:2;grid-row:1/span 5;align-self:stretch;min-height:clamp(240px,32vw,420px);background:var(--hero) center/cover no-repeat}
.hero.has-photo .page-hero>*{grid-column:1}
.hero .page-hero h1{font-weight:700;letter-spacing:.16em}
.crumb a{color:var(--ink-soft)}
@media (max-width:820px){
  .hero.has-photo .page-hero{grid-template-columns:1fr;padding-right:max(20px,env(safe-area-inset-right,0px))}
  .hero.has-photo .page-hero::after{grid-column:1;grid-row:auto;min-height:220px;margin-top:18px;margin-right:calc(-1 * max(20px,env(safe-area-inset-right,0px)));margin-left:calc(-1 * max(20px,env(safe-area-inset-left,0px)))}
}

/* 見出し：中央、小さな漢数字を金で、その下に明朝 */
.head{grid-template-columns:1fr;text-align:center;justify-items:center}
.num{writing-mode:horizontal-tb;border:0;padding:0;font-size:13px;letter-spacing:.4em;margin-bottom:14px}
.num::before,.num::after{content:"―";margin:0 .6em;color:var(--line)}
.head h2{font-size:clamp(28px,3.6vw,40px);letter-spacing:.14em;font-weight:600}
.head p{margin-inline:auto}
.farm-in .head,.shop-in .head{text-align:left;justify-items:start}

/* 写真：額縁と影をやめて、そのまま大きく */
.frame{padding:0;background:none;box-shadow:none;border-radius:0}
.frame img{border-radius:0}
.frame figcaption{padding-top:10px;font-size:12px}
.on-kura .frame,.collage .frame{background:none}

/* 目次：写真の上に白い文字のカード（押せることが分かるよう矢印つき） */
.toc-head{text-align:center}
.doors .door{position:relative;display:block;overflow:hidden;color:#fff}
.doors .door .frame{margin:0}
.doors .door .frame img{aspect-ratio:3/4;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.doors .door:hover .frame img{transform:scale(1.05)}
.doors .door .frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(20,14,8,.72))}
.doors .door h3,.doors .door p,.doors .door .go{position:absolute;left:20px;right:20px;z-index:1}
.doors .door h3{bottom:84px;margin:0;font-size:22px;letter-spacing:.14em;color:#fff}
.doors .door h3::after{display:none}
.doors .door p{bottom:44px;font-size:12px;color:rgba(255,255,255,.85);line-height:1.6}
.doors .door .go{bottom:14px;background:none;padding:0;margin:0;font-size:12px;color:#fff;border-bottom:1px solid rgba(255,255,255,.6);width:max-content;border-radius:0}
.door:hover .go{background:none}
@media (max-width:820px){.doors .door h3{bottom:78px;font-size:18px}.doors .door p{display:none}.doors .door h3{bottom:44px}}
.toc-gift{text-align:center}

/* ボタン：角のある黒、触れると金 */
.btn{border-radius:0;letter-spacing:.16em}
.btn-solid:hover{background:var(--kin);border-color:var(--kin);color:#fff}

/* 帯の色を落ち着かせる */
.gift-band{background:var(--paper-2)}
.gift-in h2 em{color:var(--kin)}
.bag{display:none}
.gift-visual::before{content:"";display:block;width:min(360px,70vw);aspect-ratio:1;margin:0 auto;background:url(img/logo-rice.png) center/contain no-repeat;filter:drop-shadow(0 18px 28px rgba(90,60,30,.18))}
.water{background:#2F4A57}
.cta{background:var(--paper-2);border-top:0}
footer{background:#2B2520;color:#EEE7DC}
footer .foot-in div,footer .foot-nav a,.foot-legal{color:#BDB2A3}
footer .brand{color:#EEE7DC}
footer .foot-legal{border-top-color:rgba(255,255,255,.12)}

/* 農園主の手紙：便箋のように */
.letter{background:#fff;border-left:0;border-top:2px solid var(--kin);box-shadow:0 1px 0 var(--line);font-family:var(--f-min);font-size:16px;line-height:2.2;padding:clamp(26px,4vw,44px)}
.letter p{color:var(--ink)}

/* 田んぼの一年：隙間を詰めて写真を主役に */
.year{gap:6px}
.year figcaption{padding:8px 2px 14px}

@media (prefers-reduced-motion:reduce){.mv-slides img{animation:none;opacity:0}.mv-slides img:first-child{opacity:1}}
/* 目次カードの文字は下にまとめて積む（重ならないように） */
.doors .door .door-txt{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:18px 20px;display:flex;flex-direction:column;gap:6px}
.doors .door .door-txt h3,.doors .door .door-txt p,.doors .door .door-txt .go{position:static}
.doors .door .door-txt p{display:block}
@media (max-width:820px){.doors .door .door-txt{padding:12px 12px}.doors .door .door-txt p{display:none}}
.hero.has-photo .page-hero{text-align:left;justify-items:start;align-content:center}
.mv{background:#3A3029}
/* 写真は ::after の背景ではなく img で置く（背景だと表示されないことがあった） */
.hero.has-photo .page-hero::after{display:none}
.hero.has-photo .page-hero>.ph-img{grid-column:2;grid-row:1/span 5;width:100%;height:100%;min-height:clamp(240px,32vw,420px);object-fit:cover;display:block}
@media (max-width:820px){.hero.has-photo .page-hero>.ph-img{grid-column:1;grid-row:auto;order:9;min-height:0;height:220px;margin-top:18px;width:calc(100% + 40px);margin-left:-20px}}
/* 下層ページの上：文字の左端をほかの段とそろえ、下の余白を詰める */
.hero.has-photo .page-hero{padding-left:max(20px,calc((100vw - 1120px) / 2 + 20px));padding-bottom:0;padding-top:clamp(28px,4vw,48px)}
.hero.has-photo + main > section:first-child,.hero.has-photo ~ main > section:first-child{padding-top:clamp(56px,7vw,96px)}
@media (max-width:820px){.hero.has-photo .page-hero>.ph-img{width:100vw;margin-left:calc(-1 * max(20px,env(safe-area-inset-left,0px)));height:240px}}
@media (max-width:820px){.hero.has-photo .page-hero>.ph-img{width:100%;margin-left:0}}

/* 上のメニュー：もっと透かす（下の写真や文が見えるように）。文字は濃い色で読めるように（10/29 ユーザー） */
.topbar{background:rgba(253,251,247,.58);backdrop-filter:blur(12px) saturate(1.2);-webkit-backdrop-filter:blur(12px) saturate(1.2);border-bottom:1px solid rgba(43,37,32,.08)}
.topbar .brand,.tabs a{color:var(--ink)}
.tabs a[aria-current="page"]{color:var(--ink);font-weight:700}
.tabs a[aria-current="page"]::after{height:2px;background:var(--kin)}
.tabs a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:6px}
.brand b{color:var(--ink-soft)}
/* トップの写真の上の小さな文字も白に */
.mv-copy .place{color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.45)}
/* 農園主の手紙：段から出して、真ん中に読みやすい幅・大きめの文字で（10/29 ユーザー「見にくい」） */
.letter-wrap{max-width:760px;margin-top:clamp(48px,7vw,88px)}
.letter{margin:0;background:#fff;border:1px solid var(--line);border-top:3px solid var(--kin);box-shadow:none;padding:clamp(28px,5vw,56px) clamp(22px,5vw,64px);font-family:var(--f-body);font-size:17px;line-height:2.1;letter-spacing:.04em;display:grid;gap:1.1em}
.letter .kicker{font-size:13px;text-align:center;margin-bottom:.4em}
.letter p{color:var(--ink);font-weight:400}
.letter .sign{font-family:var(--f-min);font-weight:700;font-size:17px;text-align:right;margin-top:.6em;letter-spacing:.14em}
@media (max-width:820px){.letter{font-size:16px;line-height:2}}
/* 開幕の幕（「ぎゃらりぃ和」が一文字ずつ出る）を戻す：10/29 ユーザー「あれかっこよかった」。焦げ茶の幕に生成りの字と金の線 */
#curtain{background:#2B2520}
#curtain .c{color:#F3EEE6}
#curtain .c i{background:var(--kin)}
#curtain .c small{color:#D8C08A}
#curtain .c{font-size:min(clamp(34px,6vw,60px),7.2vh)}
#curtain .c small{white-space:nowrap}

/* 開幕：二つの名前を縦書きで右から並べる */
#curtain{animation-delay:2.9s}
#curtain .c{writing-mode:horizontal-tb;display:flex;flex-direction:row-reverse;align-items:flex-start;gap:clamp(22px,4vw,48px);font-size:min(clamp(30px,5vw,54px),6.4vh)}
#curtain .nm{writing-mode:vertical-rl;margin:0;letter-spacing:.3em;line-height:1}
#curtain .c i{width:1px;height:auto;align-self:stretch;margin:.4em 0;animation-delay:.85s}
#curtain .c small{writing-mode:vertical-rl;font-size:.36em;letter-spacing:.5em;animation-delay:1.7s;margin-top:.4em}
/* 特商法の表 */
.law{grid-template-columns:minmax(9em,auto) 1fr;font-size:14px;border-top:1px solid var(--line)}
.law dt,.law dd{padding:12px 0;border-bottom:1px solid var(--line)}
@media (max-width:820px){.law{grid-template-columns:1fr}.law dt{border-bottom:0;padding-bottom:0}.law dd{padding-top:4px}}

/* スマホがダークモードでも、このサイトは明るい色のまま見せる（10/29 ダークで文字が見えなかった） */
:root,:root[data-theme="dark"]{color-scheme:light;
  --paper:#FDFBF7;--paper-2:#F6F0E6;--ink:#2B2520;--ink-soft:#6E645A;--line:#E7DFD2;
  --kura:#FDFBF7;--kura-2:#F6F0E6;--on-kura:#2B2520;--on-kura-soft:#6E645A;--ai:#3E6273;--kin:#A6844C;--kin-soft:#A6844C}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){color-scheme:light;
  --paper:#FDFBF7;--paper-2:#F6F0E6;--ink:#2B2520;--ink-soft:#6E645A;--line:#E7DFD2;
  --kura:#FDFBF7;--kura-2:#F6F0E6;--on-kura:#2B2520;--on-kura-soft:#6E645A;--ai:#3E6273;--kin:#A6844C;--kin-soft:#A6844C}}
html,body{background:#FDFBF7}

/* 文節で改行する（BudouX が文節の切れ目を入れる）。切れ目以外では折り返さない */
h1,h2,h3,p,dd,dt,figcaption,summary,.go,.kicker,li{word-break:keep-all;overflow-wrap:anywhere;line-break:strict}
html{color-scheme:light}body{margin:0}