:root{
  --kinari:#F1E9D8; --washi:#E8DEC9; --washi-deep:#DCCFB4;
  --sumi:#2A2824; --sumi-2:#59544A; --sumi-3:#857D6E;
  --green:#2E3A2D; --green-2:#45513F; --olive:#69704A;
  --yamabuki:#C8941C; --rule:#CABDA2;
  --on-green:#ECE5D4; --on-green-2:#B9B6A0;
  --mincho:"Shippori Mincho B1","Hiragino Mincho ProN","Yu Mincho","YuMincho",serif;
  --gothic:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic","YuGothic",system-ui,sans-serif;
  --latin:"Cormorant Garamond","Times New Roman",serif;
  --wrap:1120px; --gutter:clamp(22px,5vw,56px);
  --ease:cubic-bezier(.22,.61,.36,1);
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --kinari:#1F1E1A; --washi:#26241F; --washi-deep:#302D27;
    --sumi:#E9E2D2; --sumi-2:#C4BCAB; --sumi-3:#9A9283;
    --green:#1A2219; --green-2:#2B3628; --olive:#A7AE86; --rule:#45403A;
  }
}
:root[data-theme="dark"]{
  --kinari:#1F1E1A; --washi:#26241F; --washi-deep:#302D27;
  --sumi:#E9E2D2; --sumi-2:#C4BCAB; --sumi-3:#9A9283;
  --green:#1A2219; --green-2:#2B3628; --olive:#A7AE86; --rule:#45403A;
}
*,*::before,*::after{box-sizing:inherit}
html{overflow-x:clip;scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-inset-top,0px) + 72px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--kinari);color:var(--sumi);font-family:var(--gothic);font-size:16px;line-height:1.95;letter-spacing:.04em;font-feature-settings:"palt" 0;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .55  0 0 0 0 .48  0 0 0 0 .36  0 0 0 .09 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
main,header,footer{position:relative;z-index:1}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
p{margin:0 0 1.2em}
h1,h2,h3,h4{font-family:var(--mincho);font-weight:500;margin:0;letter-spacing:.08em;line-height:1.6}
:focus-visible{outline:2px solid var(--yamabuki);outline-offset:3px}
.skip{position:absolute;left:-999px;top:8px;background:var(--sumi);color:var(--kinari);padding:8px 14px;z-index:100}
.skip:focus{left:8px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.tate{writing-mode:vertical-rl;text-orientation:mixed;font-feature-settings:"vert"}
.mincho{font-family:var(--mincho)}
.en{font-family:var(--latin);font-style:italic;font-weight:300;letter-spacing:.06em;color:var(--sumi-3)}
.small{font-size:.86rem;color:var(--sumi-2)}


/* ---------- 画像トーンの統一（和紙に刷ったような半透明表現） ----------
   数値を変えるだけで、サイト全体の画像の濃さ・色味を調整できます */
:root{
  --art-opacity:.74;                                   /* 全体の透明度（1で不透明） */
  --art-filter:saturate(.68) sepia(.18) contrast(.94);   /* 色味をそろえる */
  --art-edge:7%;                                       /* 四辺のにじみ幅 */
}
.art{opacity:var(--art-opacity);filter:var(--art-filter);mix-blend-mode:multiply;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 var(--art-edge),#000 calc(100% - var(--art-edge)),transparent),linear-gradient(to bottom,transparent,#000 var(--art-edge),#000 calc(100% - var(--art-edge)),transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent,#000 var(--art-edge),#000 calc(100% - var(--art-edge)),transparent),linear-gradient(to bottom,transparent,#000 var(--art-edge),#000 calc(100% - var(--art-edge)),transparent);
  mask-composite:intersect}
.art.tone-photo{opacity:calc(var(--art-opacity) - .06);filter:saturate(.5) sepia(.28) contrast(.9) brightness(1.02)}
.art.tone-faded{opacity:.92;filter:saturate(.85) sepia(.1) contrast(1.05)}
.art.tone-logo{opacity:.82;--art-edge:0%}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .art{mix-blend-mode:normal;opacity:.8}}
:root[data-theme="dark"] .art{mix-blend-mode:normal;opacity:.8}

/* ---------- header ---------- */
.site-header{position:fixed;top:0;left:0;right:0;z-index:50;padding-top:env(safe-area-inset-top,0px);transition:background .6s var(--ease),box-shadow .6s}
.site-header.is-solid{background:color-mix(in srgb,var(--kinari) 92%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 1px 0 var(--rule)}
.hd{display:flex;align-items:center;justify-content:space-between;height:64px;max-width:1280px;margin:0 auto;padding:0 var(--gutter)}
.logo{display:flex;align-items:baseline;gap:.6em;text-decoration:none}
.logo b{font-family:var(--mincho);font-weight:500;font-size:1.35rem;letter-spacing:.2em}
.logo span{font-family:var(--latin);font-style:italic;font-size:1rem;color:var(--sumi-3)}
.gnav{display:none}
.gnav ul{display:flex;gap:1.6em;list-style:none;margin:0;padding:0;font-family:var(--mincho);font-size:.88rem}
.gnav a{text-decoration:none;padding:6px 0;background:linear-gradient(var(--yamabuki),var(--yamabuki)) left 100%/0 1px no-repeat;transition:background-size .5s var(--ease)}
.gnav a:hover{background-size:100% 1px}
.hd-cta{display:none}
.menu-btn{appearance:none;border:0;background:none;color:var(--sumi);font:inherit;font-family:var(--mincho);font-size:.9rem;letter-spacing:.2em;padding:12px 4px 12px 12px;cursor:pointer;display:flex;align-items:center;gap:10px}
.menu-btn i{display:block;width:22px;height:7px;border-top:1px solid currentColor;border-bottom:1px solid currentColor}
.drawer{position:fixed;inset:0;z-index:60;background:var(--kinari);padding:calc(env(safe-area-inset-top,0px) + 80px) var(--gutter) calc(env(safe-area-inset-bottom,0px) + 40px);display:flex;flex-direction:column;opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s}
.drawer.is-open{opacity:1;visibility:visible}
.drawer ul{list-style:none;margin:0;padding:0}
.drawer li a{display:block;font-family:var(--mincho);font-size:1.15rem;letter-spacing:.14em;padding:14px 0;border-bottom:1px solid var(--rule);text-decoration:none}
.drawer-close{position:absolute;top:calc(env(safe-area-inset-top,0px) + 10px);right:var(--gutter)}
.drawer .btns{margin-top:auto;display:grid;gap:12px}
@media (min-width:1000px){
  .gnav,.hd-cta{display:block}
  .menu-btn{display:none}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:54px;padding:0 1.8em;font-family:var(--mincho);font-size:1rem;letter-spacing:.16em;text-decoration:none;border:1px solid var(--green);transition:background .4s var(--ease),color .4s var(--ease);cursor:pointer}
.btn-primary{background:var(--green);color:var(--on-green)}
.btn-primary::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--yamabuki)}
.btn-primary:hover{background:var(--green-2)}
.btn-ghost{background:transparent;color:var(--sumi)}
.btn-ghost:hover{background:color-mix(in srgb,var(--green) 8%,transparent)}
.btn[aria-disabled="true"]{cursor:default;opacity:.62}
.btn .pending{font-family:var(--gothic);font-size:.68rem;letter-spacing:.08em;opacity:.85}
.hd-cta .btn{min-height:42px;font-size:.88rem;padding:0 1.3em}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(14px);transition:opacity 1.6s var(--ease),transform 1.6s var(--ease)}
.rv.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}.hero-img img{animation:none!important}}

/* ---------- section base ---------- */
.sec{padding:clamp(96px,14vw,180px) 0}
.sec-head{margin-bottom:clamp(40px,6vw,72px)}
.sec-head h2{font-size:clamp(1.55rem,4.6vw,2.15rem)}
.sec-head .en{display:block;font-size:1.05rem;margin-top:.3em}
.lead{font-family:var(--mincho);font-size:clamp(1.02rem,2.6vw,1.12rem);line-height:2.2;max-width:34em}
.measure{max-width:36em}

/* ---------- hero ---------- */
.hero{min-height:100svh;display:grid;align-content:start;padding:calc(env(safe-area-inset-top,0px) + 72px) 0 40px}
.hero-in{display:grid;gap:28px}
.hero-img{overflow:hidden;margin:0 calc(var(--gutter) * -1)}
.hero-img img{width:100%;animation:breathe 14s var(--ease) both}
@keyframes breathe{from{transform:scale(1.045)}to{transform:scale(1)}}
.hero-text{display:flex;flex-direction:row-reverse;justify-content:space-between;align-items:flex-start;gap:20px}
.hero-copy{font-family:var(--mincho);font-weight:500;font-size:clamp(1.55rem,6.4vw,2.6rem);letter-spacing:.32em;line-height:1.9;margin:0;height:auto}
.hero-copy span{display:block}
.hero-copy span:nth-child(2){padding-top:2.2em}
.hero-copy span:nth-child(3){padding-top:4.4em}
.hero-brand{padding-top:.4em}
.hero-brand h1{font-size:clamp(2.2rem,9vw,3.4rem);letter-spacing:.3em;font-weight:500;line-height:1.2}
.hero-brand .en{font-size:1.15rem;display:block;margin:.5em 0 1.6em}
.hero-brand .sub{font-family:var(--mincho);font-size:.92rem;letter-spacing:.14em;color:var(--sumi-2);line-height:2.1}
.hero-brand .sub .x{color:var(--yamabuki);padding:0 .25em}
.hero-in > *{opacity:0;animation:fadein 2.4s var(--ease) forwards}
.hero-in > .hero-text{animation-delay:.9s}
@keyframes fadein{to{opacity:1}}
@media (prefers-reduced-motion:reduce){.hero-in > *{opacity:1;animation:none}}
@media (min-width:900px){
  .hero{align-content:center}
  .hero .wrap{max-width:1360px}
  .hero-in{grid-template-columns:minmax(0,2fr) minmax(0,1fr);align-items:center;gap:clamp(32px,5vw,80px)}
  .hero-img{margin:0}
  .hero-text{justify-content:flex-end;gap:clamp(28px,4vw,64px)}
  .hero-copy{font-size:clamp(1.9rem,2.6vw,2.6rem)}
}

/* ---------- about ---------- */
.about-grid{display:grid;gap:56px}
.about-bonsai{max-width:420px;margin:0 auto}
.name-meaning{display:grid;gap:28px;margin-top:56px;padding-top:40px;border-top:1px solid var(--rule)}
.name-meaning dt{font-family:var(--mincho);font-size:2.4rem;line-height:1;margin-bottom:.4em;color:var(--olive)}
.name-meaning dd{margin:0;font-family:var(--mincho);line-height:2.1}
@media (min-width:900px){
  .about-grid{grid-template-columns:1fr 1fr;align-items:center;gap:80px}
  .name-meaning{grid-template-columns:1fr 1fr;gap:48px}
}

/* ---------- three lifetimes ---------- */
.lifetimes{background:var(--washi)}
.lt-cols{display:flex;flex-direction:row-reverse;justify-content:center;gap:clamp(8px,4vw,96px);margin:0 auto}
.lt{font-family:var(--mincho)}
.lt h3{font-size:clamp(1.15rem,4.2vw,1.7rem);letter-spacing:.3em}
.lt h3::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--yamabuki);margin-bottom:.9em;vertical-align:middle}
.lt h3{margin-left:.5em}
.lt p{font-size:clamp(.84rem,3.1vw,1rem);letter-spacing:.16em;line-height:1.9;margin:0;color:var(--sumi-2);padding-top:3.6em}
.lt-close{text-align:center;font-family:var(--mincho);font-size:clamp(1rem,3vw,1.2rem);line-height:2.3;margin-top:clamp(64px,9vw,110px);letter-spacing:.12em}

/* ---------- services ---------- */
.svc-list{border-top:1px solid var(--rule)}
.svc{display:grid;gap:14px;padding:44px 0;border-bottom:1px solid var(--rule)}
.svc .en{font-size:1.1rem}
.svc h3{font-size:clamp(1.25rem,4vw,1.5rem)}
.svc .badge{display:inline-block;font-family:var(--mincho);font-size:.78rem;letter-spacing:.18em;color:var(--green);border:1px solid var(--olive);padding:.15em .9em;margin-bottom:.8em}
.svc-lead{font-family:var(--mincho);line-height:2.1;margin:0}
.price-table{margin:0;display:grid;gap:6px}
.price-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.price-row dt{font-size:.9rem;color:var(--sumi-2)}
.price-row dd{margin:0;font-family:var(--mincho);font-size:1.5rem;letter-spacing:.06em;white-space:nowrap}
.price-row dd small{font-size:.8rem;margin-left:.15em}
.svc.is-featured{background:color-mix(in srgb,var(--washi) 70%,transparent);padding:48px clamp(20px,4vw,48px);margin:0 calc(var(--gutter) * -1);border-bottom:0}
.svc.is-featured .price-row dd{font-size:1.9rem}
.svc .note{font-size:.85rem;color:var(--sumi-2);margin:0}
.price-note{margin-top:20px}
@media (min-width:900px){
  .svc{grid-template-columns:1.1fr 1.3fr .9fr;gap:48px;align-items:start}
  .svc.is-featured{margin:0}
}

/* ---------- private ---------- */
.private-fig,.story-fig{max-width:1320px;margin-inline:auto}
.private-fig{margin-block:0 clamp(40px,6vw,64px)}
.private-fig img{width:100%}
.private-body{display:grid;gap:40px}
.private-price{font-family:var(--mincho);font-size:2.1rem;letter-spacing:.06em}
.private-price small{font-size:.9rem}
.cond{display:flex;gap:10px;margin:12px 0 0;padding:0;list-style:none}
.cond li{font-family:var(--mincho);font-size:.85rem;letter-spacing:.14em;border:1px solid var(--rule);padding:.2em .9em}
.contents{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.contents li{font-family:var(--mincho);padding:16px 0;border-bottom:1px solid var(--rule);display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.planned{font-family:var(--gothic);font-size:.75rem;letter-spacing:.1em;color:var(--yamabuki);white-space:nowrap}
@media (min-width:900px){.private-body{grid-template-columns:1fr 1fr;gap:80px}}

/* ---------- clay bath ---------- */
.clay{background:var(--green);color:var(--on-green)}
.clay .en,.clay .small{color:var(--on-green-2)}
.clay-grid{display:grid;gap:48px}
.clay-title{font-family:var(--mincho);font-size:clamp(1.5rem,5.4vw,2.3rem);letter-spacing:.3em;line-height:1.8;margin:0 auto}
.clay-status{display:inline-block;font-size:.8rem;letter-spacing:.12em;border:1px solid var(--yamabuki);color:#E4C46E;padding:.2em 1em;margin-bottom:1.6em}
.clay-facts{margin:2em 0 0;display:grid;gap:0;border-top:1px solid rgba(236,229,212,.22)}
.clay-facts div{display:grid;grid-template-columns:7.5em 1fr;gap:12px;padding:16px 0;border-bottom:1px solid rgba(236,229,212,.22)}
.clay-facts dt{font-family:var(--mincho);color:var(--on-green-2);font-size:.9rem}
.clay-facts dd{margin:0}
@media (min-width:900px){.clay-grid{grid-template-columns:auto 1fr;gap:120px;align-items:start}.clay-title{margin:0}}

/* ---------- enzyme ---------- */
.enzyme-top{display:grid;gap:48px}
.enzyme-poster{max-width:460px;margin:0 auto}
.enzyme-key{display:flex;flex-direction:row-reverse;gap:clamp(24px,5vw,56px);align-items:flex-start;justify-content:center}
.enzyme-key h2{font-size:clamp(1.6rem,5.6vw,2.5rem);letter-spacing:.3em;line-height:1.9}
.enzyme-key h2 span{display:block}
.enzyme-key h2 span+span{padding-top:2.4em}
.enzyme-intro{writing-mode:horizontal-tb}
.verbs{display:flex;flex-wrap:wrap;gap:.4em 1.2em;font-family:var(--mincho);font-size:1.1rem;letter-spacing:.2em;margin:2em 0;padding:0;list-style:none}
.verbs li:not(:last-child)::after{content:"・";color:var(--yamabuki);margin-left:1.2em}
.timeline{list-style:none;margin:clamp(56px,8vw,96px) 0 0;padding:0;position:relative}
.timeline::before{content:"";position:absolute;left:4.6em;top:.9em;bottom:.9em;width:1px;background:var(--rule)}
.timeline li{display:grid;grid-template-columns:4.6em 1fr;gap:28px;padding:14px 0;position:relative;align-items:baseline}
.timeline li::after{content:"";position:absolute;left:calc(4.6em - 3px);top:calc(14px + .75em);width:7px;height:7px;border-radius:50%;background:var(--kinari);border:1px solid var(--olive)}
.timeline li.is-after::after{background:var(--yamabuki);border-color:var(--yamabuki)}
.timeline time{font-family:var(--latin);font-size:1.15rem;letter-spacing:.04em;color:var(--sumi-2);font-style:normal}
.timeline .act{font-family:var(--mincho);font-size:1.1rem;padding-left:16px}
.timeline .verb{font-size:.85rem;color:var(--sumi-3);margin-left:1em}
.timeline li.is-after{margin-top:22px}
.timeline li.is-after .act{color:var(--sumi-2)}
.enzyme-info{margin:clamp(48px,7vw,80px) 0 0;display:grid;border-top:1px solid var(--rule)}
.enzyme-info div{display:grid;grid-template-columns:6em 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--rule)}
.enzyme-info dt{font-family:var(--mincho);color:var(--sumi-2);font-size:.92rem}
.enzyme-info dd{margin:0;font-family:var(--mincho);font-size:1.05rem}
.enzyme-workshop{margin:clamp(72px,10vw,120px) 0 0}
.enzyme-workshop figcaption{margin-top:14px}
.schedule-note{margin-top:12px}
@media (min-width:900px){
  .enzyme-top{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:88px;align-items:start}
  .enzyme-bottom{display:grid;grid-template-columns:1fr 1fr;gap:88px;align-items:start}
  .enzyme-bottom .timeline,.enzyme-bottom .enzyme-info{margin-top:0}
}

/* ---------- learn ---------- */
.learn{background:var(--washi)}
.learn-list{display:grid;gap:0;border-top:1px solid var(--rule);margin-top:clamp(40px,6vw,64px)}
.learn-item{padding:32px 0;border-bottom:1px solid var(--rule);display:grid;gap:10px}
.learn-item h3{font-size:1.25rem}
.learn-item .meta{font-size:.8rem;letter-spacing:.1em;color:var(--olive)}
.learn-item p{margin:0;color:var(--sumi-2)}
@media (min-width:900px){.learn-list{grid-template-columns:repeat(3,1fr);gap:48px;border-top:0}.learn-item{border-bottom:0;border-top:1px solid var(--rule)}}

/* ---------- shop ---------- */
.shop-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;list-style:none;margin:0;padding:0}
.shop-card{background:color-mix(in srgb,var(--washi) 75%,transparent);padding:26px 18px 22px;display:flex;flex-direction:column;gap:8px;min-height:0}
.shop-card img{aspect-ratio:1;object-fit:contain;margin-bottom:6px;mix-blend-mode:multiply}
.shop-card h3{font-size:1.02rem;letter-spacing:.06em}
.shop-card p{margin:0;font-size:.85rem;color:var(--sumi-2);line-height:1.8}
.shop-card .price{font-family:var(--mincho);margin-top:auto}
@media (min-width:700px){.shop-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.shop-card{padding:36px 28px 28px}}

/* ---------- story ---------- */
.story-fig{margin-block:0 clamp(48px,7vw,80px)}
.story-grid{display:grid;gap:48px}
.story-quote{font-family:var(--mincho);font-size:clamp(1.3rem,4.6vw,1.9rem);letter-spacing:.26em;line-height:1.9;margin:0 auto}
.story-quote span{display:block}
.story-quote span+span{padding-top:1.6em}
.story-body p{font-family:var(--mincho);line-height:2.25}
.signature{margin-top:2.4em;font-family:var(--mincho)}
.signature small{display:block;font-size:.82rem;color:var(--sumi-2);letter-spacing:.12em}
.signature b{font-weight:500;font-size:1.3rem;letter-spacing:.3em}
@media (min-width:900px){.story-grid{grid-template-columns:auto 1fr;gap:110px;align-items:start}.story-quote{margin:0}}

/* ---------- access ---------- */
.access{background:var(--washi)}
.access-grid{display:grid;gap:48px}
.access-dl{margin:0;border-top:1px solid var(--rule)}
.access-dl div{display:grid;grid-template-columns:6.5em 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--rule)}
.access-dl dt{font-family:var(--mincho);font-size:.92rem;color:var(--sumi-2)}
.access-dl dd{margin:0}
.access-dl ul{margin:0;padding:0;list-style:none}
.tbd{color:var(--sumi-3);font-size:.9rem}
.map{aspect-ratio:4/3;background:var(--washi-deep);display:grid;place-items:center;text-align:center;padding:24px}
.map iframe{width:100%;height:100%;border:0;filter:grayscale(.6) sepia(.2)}
@media (min-width:900px){.access-grid{grid-template-columns:1fr 1fr;gap:72px}}

/* ---------- reservation ---------- */
.reserve{position:relative;overflow:hidden;text-align:center}
.reserve-bg{position:absolute;inset:0;z-index:-1}
.reserve-bg img{width:100%;height:100%;object-fit:cover;object-position:60% 50%;opacity:.55}
.reserve-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(var(--kinari),color-mix(in srgb,var(--kinari) 55%,transparent) 40%,color-mix(in srgb,var(--kinari) 55%,transparent) 60%,var(--kinari))}
.reserve h2{font-size:clamp(1.5rem,5vw,2.2rem);letter-spacing:.2em}
.reserve p{max-width:30em;margin:1.6em auto 2.4em;font-family:var(--mincho);line-height:2.2}
.reserve .btn-row{justify-content:center}
.reserve .btn{min-width:min(100%,260px)}

/* ---------- footer ---------- */
.site-footer{background:var(--green);color:var(--on-green);padding:72px 0 calc(env(safe-area-inset-bottom,0px) + 110px)}
.site-footer .logo span,.site-footer .small{color:var(--on-green-2)}
.ft-grid{display:grid;gap:36px}
.ft-nav ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,auto);gap:10px 28px;font-family:var(--mincho);font-size:.9rem;justify-content:start}
.ft-nav a{text-decoration:none}
.share{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.share button,.share a{appearance:none;background:none;border:1px solid rgba(236,229,212,.35);color:var(--on-green);font:inherit;font-size:.82rem;padding:8px 16px;cursor:pointer;text-decoration:none;letter-spacing:.08em}
.copy{margin-top:48px;font-size:.78rem;color:var(--on-green-2)}
@media (min-width:900px){.ft-grid{grid-template-columns:1.2fr 1fr 1fr}.site-footer{padding-bottom:56px}}

/* ---------- mobile fixed CTA ---------- */
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px 12px calc(env(safe-area-inset-bottom,0px) + 10px);background:color-mix(in srgb,var(--kinari) 94%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-top:1px solid var(--rule);transform:translateY(110%);transition:transform .6s var(--ease)}
.mbar.is-shown{transform:none}
.mbar .btn{min-height:52px;padding:0 .6em;font-size:.98rem;flex-direction:column;gap:0;line-height:1.3}
.mbar .btn-primary::before{display:none}
@media (min-width:1000px){.mbar{display:none}}
@media (max-width:999px){body{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 74px)}}

/* ===================== 複数ページ用 ===================== */
.gnav a[aria-current="page"]{background-size:100% 1px}
.drawer li a[aria-current="page"]{color:var(--olive)}
.page-hero{padding:calc(env(safe-area-inset-top,0px) + clamp(120px,16vw,180px)) 0 clamp(40px,7vw,80px)}
.page-hero .crumb{font-size:.78rem;color:var(--sumi-3);margin-bottom:2.4em;letter-spacing:.08em}
.page-hero .crumb a{text-decoration:none}
.page-hero h1{font-size:clamp(1.8rem,6.4vw,2.7rem);letter-spacing:.2em}
.page-hero .en{display:block;font-size:1.15rem;margin-top:.4em}
.page-hero .lead{margin-top:2em}
.page-hero + .sec{padding-top:clamp(32px,5vw,64px)}

/* トップ：縁寿で過ごす時間 */
.gate{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.gate li{border-bottom:1px solid var(--rule)}
.gate a{display:grid;gap:8px;padding:32px 4px;text-decoration:none;transition:background .5s var(--ease)}
.gate a:hover{background:color-mix(in srgb,var(--washi) 60%,transparent)}
.gate h3{font-size:clamp(1.2rem,4vw,1.45rem)}
.gate .en{font-size:1rem}
.gate .g-text{font-family:var(--mincho);color:var(--sumi-2);margin:0}
.gate .g-meta{font-size:.86rem;color:var(--sumi-2)}
.gate .g-meta b{font-family:var(--mincho);font-weight:500;font-size:1.1rem;color:var(--sumi)}
.gate .more{display:inline-flex;align-items:center;justify-content:center;gap:.8em;min-height:46px;margin-top:10px;padding:0 1.4em;border:1px solid var(--green);font-family:var(--mincho);font-size:.92rem;color:var(--green);letter-spacing:.14em;background:color-mix(in srgb,var(--kinari) 60%,transparent);transition:background .4s var(--ease),color .4s var(--ease)}
.gate .more::after,.pager a::after{content:"";width:7px;height:7px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.gate a:hover .more,.gate a:focus-visible .more{background:var(--green);color:var(--on-green)}
.gate .planned{margin-left:.8em}
@media (min-width:900px){.gate a{grid-template-columns:1.1fr 1.6fr .9fr;align-items:center;gap:40px;padding:40px 12px}.gate a > div:last-child{display:flex;flex-direction:column;align-items:flex-end}}

/* トップ：代表のことば */
.teaser{background:var(--washi)}
.teaser-grid{display:grid;gap:40px;align-items:center}
.teaser-grid figure{margin:0}
.teaser .quote{font-family:var(--mincho);font-size:clamp(1.25rem,4.4vw,1.7rem);letter-spacing:.14em;line-height:2;margin:0 0 1em}
@media (min-width:900px){.teaser-grid{grid-template-columns:1.3fr 1fr;gap:72px}}

/* 前後ページ（枠付きボタン） */
.pager{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:var(--wrap);margin:0 auto;padding:clamp(40px,6vw,64px) var(--gutter)}
.pager a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:72px;padding:14px 18px;border:1px solid var(--green);color:var(--green);text-decoration:none;font-family:var(--mincho);font-size:1rem;letter-spacing:.08em;line-height:1.5;transition:background .4s var(--ease),color .4s var(--ease)}
.pager a small{display:block;font-family:var(--gothic);font-size:.72rem;color:var(--sumi-3);letter-spacing:.12em;margin-bottom:.2em}
.pager a:first-child:not(.next){flex-direction:row-reverse}
.pager a:first-child:not(.next)::after{transform:rotate(-135deg)}
.pager .next{text-align:right}
.pager a:hover{background:var(--green);color:var(--on-green)}
.pager a:hover small{color:var(--on-green-2)}
.pager .next:only-child{grid-column:2}
/* プレビュー用（1ファイル版） */
.route[hidden]{display:none}
.page-hero + .sec.learn,.page-hero + .sec.access{padding-top:clamp(56px,8vw,96px)}
.gate .g-meta b,.gate .g-meta span{white-space:nowrap}
.page-hero .crumb a{text-decoration:underline;text-underline-offset:.3em}
.reserve .ig{margin:2em auto 0}
.reserve .ig a{font-family:var(--mincho);font-size:.92rem;letter-spacing:.1em;text-decoration:underline;text-underline-offset:.35em;color:var(--sumi-2)}
