/* ============================================================
   notre atelier（ノトルアトリエ）v2
   多肉植物とアンティーク雑貨の店 — 東京・学芸大学
   配色: 古紙のピンクベージュ × 霧のセージ × 真鍮金（AD案v2準拠・v1の顔を維持）
   モーション: R1/R2/R12(既存) + R15入店ズーム/R16棚レール/R17年表積層/
              R18世界が沈む/R19塗り見出し/G4クリップ/R8目録マーキー（AD案v2 §5）
   安全弁: no-js / js-fallback(2.5s) / prefers-reduced-motion で
           全仕掛けが「最初から最終状態・静止」に倒れる
   ============================================================ */

:root{
  --paper:       #F1E9DE;
  --paper-deep:  #E1D6C2;
  --ink:         #35302A;
  --ink-soft:    #655B4F;
  --sage:        #83907A;
  --accent:      #7E5D26;
  --line:        #D8CCB8;
  --ease:        cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  font-family:'Noto Sans JP',sans-serif;
  font-size:15px;
  line-height:1.9;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}
a{color:var(--ink)}
:target,section[id]{scroll-margin-top:84px}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

.skip{
  position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);
  padding:.6em 1.2em;z-index:100;
}
.skip:focus{left:0}

.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
.narrow{max-width:720px}

.hero-grid>*,.zig>*,.gal-scene>*,.acc-grid>*,.ws-row>*,.duo>*{min-width:0}
.acc-table a,.foot-sns a{overflow-wrap:anywhere}

h1,h2,h3{font-family:'Klee One','Noto Sans JP',sans-serif;font-weight:600;letter-spacing:.02em;line-height:1.5}
.fr{font-family:'Petrona','Noto Sans JP',serif;font-style:italic;letter-spacing:.03em}
.nb{white-space:nowrap}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- リビール（R1）: プログレッシブ。no-jsでは即表示 ---------- */
html.js .rv{opacity:0;transform:translateY(12px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
html.js .rv.in{opacity:1;transform:none}
html.js-fallback .rv{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html.js .rv{opacity:1;transform:none;transition:none}
}

/* ============================================================
   ヘッダー
   ============================================================ */
header.site{
  position:sticky;top:0;z-index:50;
  background:var(--paper);
  border-bottom:1px solid transparent;
  transition:border-color .35s var(--ease),background .8s var(--ease);
}
header.site.scrolled{border-bottom-color:var(--line)}

.bar{display:flex;align-items:center;justify-content:space-between;min-height:64px;gap:14px}

.brand{display:flex;flex-direction:column;text-decoration:none;line-height:1.25;padding:8px 0}
.brand .en{font-family:'Petrona',serif;font-style:italic;font-size:20px;letter-spacing:.04em;color:var(--ink)}
.brand .ja{font-size:11px;color:var(--ink-soft);letter-spacing:.14em}

.nav{display:flex;gap:19px}
.nav a{
  text-decoration:none;font-size:13px;color:var(--ink-soft);
  padding:6px 0;position:relative;white-space:nowrap;
}
.nav a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease);
}
.nav a:hover{color:var(--ink)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a[aria-current="page"]{color:var(--ink)}

.menu-btn{
  display:none;background:none;border:0;cursor:pointer;padding:14px 10px;
  min-width:44px;min-height:44px;
}
.menu-btn .lines{display:block}
.menu-btn .lines span{display:block;width:22px;height:1.5px;background:var(--ink);margin:5px 0;transition:transform .3s var(--ease),opacity .3s}
body.nav-open .menu-btn .lines span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
body.nav-open .menu-btn .lines span:nth-child(2){opacity:0}
body.nav-open .menu-btn .lines span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

.mobile-panel{display:none;background:var(--paper);border-bottom:1px solid var(--line)}
.mobile-panel ul{list-style:none;padding:8px 24px 20px}
.mobile-panel a{display:block;padding:12px 4px;text-decoration:none;font-size:15px;color:var(--ink);border-bottom:1px dashed var(--line)}
@media (max-width:1000px){
  body.nav-open .mobile-panel{display:block}
}

@media (max-width:1000px){
  .nav{display:none}
  .menu-btn{display:block}
}

/* ============================================================
   ボタン（R9 プレス・フィードバック標準装備）
   ============================================================ */
.btn{
  display:inline-block;text-decoration:none;
  font-size:14px;letter-spacing:.06em;
  color:var(--ink);background:transparent;
  border:1px solid var(--ink);border-radius:2px;
  padding:.85em 2.2em;
  transition:background .35s var(--ease),color .35s var(--ease),transform .12s ease-out;
}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn:active{transform:scale(.97)}
.btn.gold{border-color:var(--accent);color:var(--accent)}
.btn.gold:hover{background:var(--accent);color:var(--paper)}
.btn.small{padding:.6em 1.5em;font-size:13px}

.textlink{
  color:var(--ink);text-decoration:none;font-size:13.5px;letter-spacing:.04em;
  border-bottom:1px solid var(--sage);padding-bottom:2px;
  transition:border-color .3s;
}
.textlink:hover{border-color:var(--accent)}

/* ============================================================
   セクション共通
   ============================================================ */
.sec{padding:110px 0}
.sec.tight{padding:80px 0}
.sec.alt{background:var(--paper-deep)}
.sec-head{margin-bottom:52px}
.sec-head .fr-cap{font-family:'Petrona',serif;font-style:italic;font-size:13px;color:var(--accent);letter-spacing:.08em;display:block;margin-bottom:10px}
.sec-head h2{font-size:clamp(22px,2.6vw,29px)}
.sec-head .sub{margin-top:14px;color:var(--ink-soft);font-size:14px;max-width:36em}
.center{text-align:center}
.center .sub{margin-inline:auto}

@media (max-width:840px){
  .sec{padding:72px 0}
  .sec.tight{padding:56px 0}
}

/* ロゼット線画（W10モチーフ・一度きり描画） */
.rosette{width:44px;height:44px;display:inline-block}
.rosette path{
  fill:none;stroke:var(--sage);stroke-width:1.1;stroke-linecap:round;
  stroke-dasharray:120;stroke-dashoffset:0;
}
html.js .rosette:not(.drawn) path{stroke-dashoffset:120}
html.js .rosette path{transition:stroke-dashoffset 1.4s var(--ease)}
html.js .rosette.drawn path,html.js-fallback .rosette path{stroke-dashoffset:0}
@media (prefers-reduced-motion:reduce){
  html.js .rosette:not(.drawn) path{stroke-dashoffset:0}
  html.js .rosette path{transition:none}
}

/* ============================================================
   トップ: ヒーロー（1枚写真＋中央短文型・構図はv1の2カラムから変更）
   ============================================================ */
.hero2{padding:72px 0 56px;text-align:center}
.hero2 .place{font-size:12.5px;letter-spacing:.22em;color:var(--ink-soft);margin-bottom:18px}
.hero2 h1{font-size:clamp(27px,3.6vw,40px);margin-bottom:10px}
.hero2 .en-line{font-family:'Petrona',serif;font-style:italic;font-size:16px;color:var(--accent);letter-spacing:.06em;margin-bottom:24px}
.hero2 .lead{max-width:36em;margin:0 auto 8px;color:var(--ink);text-align:center}
@media (max-width:840px){
  .hero2{padding:44px 0 36px}
}

/* R2 弱Ken Burns（ヒーロー写真だけ・1回） */
html.js .kenburns img{animation:kb 16s var(--ease) 1 forwards}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.04)}}
@media (prefers-reduced-motion:reduce){
  html.js .kenburns img{animation:none}
}

/* ============================================================
   R15 入店ズーム（index・1回のみ）
   小さな店構えがスクロールで画面いっぱいへ＝「店に入る」体験。
   scaleの上限は1.0（原寸フルブリード以上に拡大しない＝仮素材の粗を出さない）
   既定（no-js/js-fallback/reduced）= 最初から全画面で静止
   ============================================================ */
.zoomtrack{position:relative;height:auto}
.zoomstage{position:relative;height:auto;overflow:hidden}
.zoomstage .zmedia{position:relative;margin:0 auto;overflow:hidden;border-radius:0}
.zoomstage .zmedia img{width:100%;height:100%;object-fit:cover}
.zoomstage .zcap{
  position:absolute;left:0;right:0;bottom:clamp(28px,6vh,64px);text-align:center;z-index:3;
  color:#FBF7EF;text-shadow:0 1px 14px rgba(38,32,25,.55);
  padding:0 24px;
}
.zoomstage .zcap p{font-family:'Klee One',sans-serif;font-weight:600;font-size:clamp(17px,2.2vw,24px);letter-spacing:.05em}
.zoomstage .zcap .fr{display:block;font-size:12.5px;margin-top:6px;letter-spacing:.1em}
.zoomstage .zscrim{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(38,32,25,0) 55%,rgba(38,32,25,.42) 100%);
}

@media (prefers-reduced-motion:no-preference){
  html.js:not(.js-fallback) .zoomtrack{height:200vh}
  html.js:not(.js-fallback) .zoomstage{position:sticky;top:0;height:100vh}
  @supports (height:100svh){
    html.js:not(.js-fallback) .zoomstage{height:100svh} /* iOSのアドレスバー分のガタつき防止 */
  }
  html.js:not(.js-fallback) .zoomstage .zmedia{
    position:absolute;inset:0;
    transform:scale(.34);border-radius:28px;
    will-change:transform;
  }
  html.js:not(.js-fallback) .zoomstage .zcap{opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
  html.js:not(.js-fallback) .zoomstage.zdone .zcap{opacity:1;transform:none}
  html.js:not(.js-fallback) .zoomstage .zscrim{opacity:0;transition:opacity .5s var(--ease)}
  html.js:not(.js-fallback) .zoomstage.zdone .zscrim{opacity:1}
}
/* 非ピン環境（no-js・js-fallback・reduced）: 通常のフルブリード写真＋キャプション常時表示 */
.zoomstage .zmedia{height:min(72vh,620px)}
@media (prefers-reduced-motion:no-preference){
  html.js:not(.js-fallback) .zoomstage .zmedia{height:auto}
}

/* 数字の帯（事実だけを静かに） */
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:3px;overflow:hidden}
.facts>div{background:var(--paper);padding:26px 18px;text-align:center}
.facts .num{font-family:'Petrona',serif;font-size:clamp(22px,2.6vw,30px);color:var(--ink);line-height:1.3}
.facts .num small{font-size:.55em}
.facts .lbl{font-size:12px;color:var(--ink-soft);letter-spacing:.08em;margin-top:6px}
.facts .src{font-size:10.5px;color:var(--ink-soft);margin-top:2px}
@media (max-width:840px){
  .facts{grid-template-columns:1fr 1fr}
}

/* 営業情報の先出しミニ行（導線短縮・裁定7） */
.info-line{
  display:flex;gap:10px 28px;flex-wrap:wrap;justify-content:center;align-items:center;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:16px 0;margin-top:56px;
}
.info-line span{font-size:13px;color:var(--ink)}
.info-line .textlink{font-size:13px}

/* ============================================================
   3つの柱（トップ）／汎用カード
   ============================================================ */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:36px}
.pillar{
  background:var(--paper);
  border:1px solid var(--line);border-radius:3px;
  overflow:hidden;text-decoration:none;display:block;
  transition:transform .35s var(--ease),border-color .35s var(--ease);
}
.pillar img{aspect-ratio:1/1;object-fit:cover;width:100%}
.pillar .tx{padding:24px 22px 28px}
.pillar h3{font-size:17.5px;margin-bottom:10px}
.pillar p{font-size:13.5px;color:var(--ink-soft);line-height:1.85}
.pillar .more{display:inline-block;margin-top:16px;font-size:12.5px;color:var(--accent);letter-spacing:.08em}
@media (hover:hover){
  .pillar:hover{transform:translateY(-3px);border-color:var(--sage)}
}
.pillar:active{transform:scale(.985)}
@media (prefers-reduced-motion:reduce){
  .pillar,.pillar:hover{transform:none}
}
.pillars.two{grid-template-columns:repeat(2,1fr)}
@media (max-width:840px){
  .pillars,.pillars.two{grid-template-columns:1fr;gap:24px}
  .pillar img{aspect-ratio:16/9}
}

/* ============================================================
   出店の記録（R12 行商路ダイアグラム・v1継承）
   ============================================================ */
.route-fig{margin-top:8px}
.route-svg{width:100%;height:auto;display:block}
.route-svg .leg{
  fill:none;stroke:var(--sage);stroke-width:1.3;
  stroke-dasharray:4 6;
}
.route-svg .mask-line{
  fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;
  stroke-dasharray:820;stroke-dashoffset:0;
}
html.js .route:not(.drawn) .mask-line{stroke-dashoffset:820}
html.js .route .mask-line{transition:stroke-dashoffset 1.7s var(--ease)}
html.js .route.drawn .mask-line,html.js-fallback .route .mask-line{stroke-dashoffset:0}
.route-svg .stop{fill:var(--paper);stroke:var(--accent);stroke-width:1.4}
.route-svg .hub{fill:var(--accent);stroke:none}
.route-svg text{font-family:'Noto Sans JP',sans-serif;fill:var(--ink);font-size:15px}
.route-svg .yr{fill:var(--ink-soft);font-size:12.5px}
.route-svg .hub-label{font-weight:700;font-size:16px}
html.js .route:not(.drawn) .stop,
html.js .route:not(.drawn) text{opacity:0}
html.js .route .stop,html.js .route text{transition:opacity .8s var(--ease) .7s}
html.js .route.drawn .stop,html.js .route.drawn text,
html.js-fallback .route .stop,html.js-fallback .route text{opacity:1}
@media (prefers-reduced-motion:reduce){
  html.js .route:not(.drawn) .mask-line{stroke-dashoffset:0}
  html.js .route:not(.drawn) .stop,html.js .route:not(.drawn) text{opacity:1}
  html.js .route .mask-line,html.js .route .stop,html.js .route text{transition:none}
}
.route-list{display:none}
@media (max-width:899px){
  .route-fig .route{display:none}
  .route-list{display:block;list-style:none;border-left:1px dashed var(--sage);margin-left:8px;padding-left:26px}
  .route-list li{position:relative;padding:10px 0}
  .route-list li::before{
    content:"";position:absolute;left:-31.5px;top:20px;width:9px;height:9px;border-radius:50%;
    background:var(--paper);border:1.4px solid var(--accent);
  }
  .route-list li:first-child::before{background:var(--accent)}
  .route-list .nm{display:block;font-size:14.5px}
  .route-list .yr{display:block;font-size:12px;color:var(--ink-soft)}
}
@media (min-width:900px){
  .route-list{display:none}
}

/* ============================================================
   汎用: 2カラム（写真＋文）・ジグザグ
   ============================================================ */
.duo{display:grid;grid-template-columns:5fr 6fr;gap:56px;align-items:center}
.duo.rev>.dimg{order:2}
.duo .dimg img{border-radius:3px}
@media (max-width:840px){
  .duo{grid-template-columns:1fr;gap:28px}
  .duo.rev>.dimg{order:0}
}

.zig{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;padding:56px 0}
.zig+.zig{border-top:1px solid var(--line)}
.zig.rev .zimg{order:2}
.zig .zimg img{border-radius:3px}
.zig h2,.zig h3{font-size:20px;margin-bottom:14px}
.zig p{color:var(--ink);max-width:32em}
.zig .note{font-size:12.5px;color:var(--ink-soft);margin-top:12px}
@media (max-width:840px){
  .zig{grid-template-columns:1fr;gap:24px;padding:40px 0}
  .zig.rev .zimg{order:0}
}

/* ============================================================
   R16 棚のレール（items・PC≥900pxのみピン。既定は横スワイプ帯）
   ============================================================ */
.railtrack{position:relative}
.railview{position:relative}
.rail{
  display:flex;gap:28px;
  overflow-x:auto;scroll-snap-type:x proximity;
  padding:8px 24px 20px;
  -webkit-overflow-scrolling:touch;
}
.rail::-webkit-scrollbar{height:6px}
.rail::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.rail-panel{
  flex:0 0 min(420px,82vw);
  scroll-snap-align:start;
  background:var(--paper);border:1px solid var(--line);border-radius:3px;overflow:hidden;
}
.rail-panel img{aspect-ratio:4/3;object-fit:cover;width:100%}
.rail-panel .tx{padding:22px 22px 26px}
.rail-panel h3{font-size:17px;margin-bottom:8px}
.rail-panel h3 .fr-cap{display:block;font-family:'Petrona',serif;font-style:italic;font-weight:400;font-size:12px;color:var(--accent);margin-top:4px}
.rail-panel p{font-size:13.5px;color:var(--ink);line-height:1.85}
.rail-progress{display:none}
.rail-hint{font-size:12px;color:var(--ink-soft);letter-spacing:.06em;padding:0 24px}

@media (min-width:900px) and (prefers-reduced-motion:no-preference){
  html.js:not(.js-fallback) .railtrack{height:260vh}
  html.js:not(.js-fallback) .railview{
    position:sticky;top:0;height:100vh;overflow:hidden;
    display:flex;flex-direction:column;justify-content:center;
  }
  html.js:not(.js-fallback) .rail{
    overflow:visible;scroll-snap-type:none;padding:0 max(24px,calc((100vw - 1080px)/2 + 24px));
    will-change:transform;
  }
  html.js:not(.js-fallback) .rail-panel{flex:0 0 min(520px,42vw)}
  html.js:not(.js-fallback) .rail-hint{display:none}
  html.js:not(.js-fallback) .rail-progress{
    display:block;height:2px;background:var(--line);
    margin:34px max(24px,calc((100vw - 1080px)/2 + 24px)) 0;
    position:relative;overflow:hidden;
  }
  html.js:not(.js-fallback) .rail-progress i{
    position:absolute;left:0;top:0;bottom:0;width:100%;
    background:var(--accent);transform:scaleX(0);transform-origin:left;display:block;
  }
  html.js:not(.js-fallback) .railview .rv-head{
    padding:0 max(24px,calc((100vw - 1080px)/2 + 24px)) 30px;
  }
}

/* ============================================================
   R17 年表積層カード（about）— 純CSS stickyで成立・JSは奥行きの微差のみ
   ============================================================ */
.stack{display:grid;gap:26px;max-width:760px;margin:0 auto}
.scard{
  position:sticky;
  background:var(--paper);border:1px solid var(--line);border-radius:3px;
  padding:34px 36px 36px;
}
.scard:nth-child(1){top:96px}
.scard:nth-child(2){top:110px}
.scard:nth-child(3){top:124px}
.scard:nth-child(4){top:138px}
.scard:nth-child(5){top:152px}
.scard:nth-child(6){top:166px}
.scard .yr{font-family:'Petrona',serif;font-size:14px;color:var(--accent);letter-spacing:.1em;display:block;margin-bottom:8px}
.scard h3{font-size:18px;margin-bottom:10px}
.scard p{font-size:14px;color:var(--ink);max-width:38em}
.scard .note{font-size:12px;color:var(--ink-soft);margin-top:10px}
@media (max-width:640px){
  .scard{padding:26px 22px 28px}
}
@media (prefers-reduced-motion:reduce){
  .scard{position:static}
}

/* ============================================================
   R18 世界が沈む（galerie）
   既定＝深色セクションとして静的に成立（no-js/reduced）。
   JS＋motion時のみ、セクション滞在中にページ全体が沈む（body.deep-on）
   色は既存トークンのみ: 地=--ink／文字=--paper（新色を発明しない）
   ============================================================ */
.deep-zone{
  background:var(--ink);color:var(--paper);
}
.deep-zone h2,.deep-zone h3{color:var(--paper)}
.deep-zone .sec-head .sub{color:var(--paper-deep)}
.deep-zone .fr-cap{color:var(--paper-deep)}
.deep-zone p{color:var(--paper)}
.deep-zone .fact-line{border-top-color:rgba(241,233,222,.25)}
.deep-zone .fact-line div{color:var(--paper-deep)}
.deep-zone .fact-line b{color:var(--paper)}
.deep-zone .textlink{color:var(--paper);border-bottom-color:var(--paper-deep)}
.deep-zone .textlink:hover{border-bottom-color:var(--paper)}
.deep-zone .btn{color:var(--paper);border-color:var(--paper)}
.deep-zone .btn:hover{background:var(--paper);color:var(--ink)}
.deep-zone img{border-radius:3px}

body,header.site{transition:background .8s var(--ease)}
@media (prefers-reduced-motion:no-preference){
  html.js:not(.js-fallback) body.deep-on{background:var(--ink)}
  html.js:not(.js-fallback) body.deep-on header.site{background:var(--ink);border-bottom-color:rgba(241,233,222,.18)}
  html.js:not(.js-fallback) body.deep-on header.site .brand .en{color:var(--paper)}
  html.js:not(.js-fallback) body.deep-on header.site .brand .ja{color:var(--paper-deep)}
  html.js:not(.js-fallback) body.deep-on header.site .nav a{color:var(--paper-deep)}
  html.js:not(.js-fallback) body.deep-on header.site .nav a:hover,
  html.js:not(.js-fallback) body.deep-on header.site .nav a[aria-current="page"]{color:var(--paper)}
  html.js:not(.js-fallback) body.deep-on .menu-btn .lines span{background:var(--paper)}
  html.js:not(.js-fallback) body.deep-on .mobile-panel{background:var(--ink);border-bottom-color:rgba(241,233,222,.18)}
  html.js:not(.js-fallback) body.deep-on .mobile-panel a{color:var(--paper);border-bottom-color:rgba(241,233,222,.25)}
}

/* ============================================================
   R19 塗り見出し（about 1箇所のみ）
   実文字を置く。no-js/reducedでは普通の見出し（--ink）
   ============================================================ */
.fill-head{font-size:clamp(24px,3.2vw,36px);line-height:1.6}
@media (prefers-reduced-motion:no-preference){
  html.js:not(.js-fallback) .fill-head{
    background:linear-gradient(90deg,var(--ink) 0 50%,var(--ink-soft) 50% 100%);
    background-size:205% 100%;
    background-position-x:100%;
    -webkit-background-clip:text;background-clip:text;
    color:transparent;
  }
}

/* ============================================================
   G4 写真クリップリビール（workshop / koubou の見せ場写真のみ）
   既定＝表示済み。JS時のみ左→右へ一度だけ拭き出し
   ============================================================ */
@media (prefers-reduced-motion:no-preference){
  html.js:not(.js-fallback) .clip-rv{clip-path:inset(0 100% 0 0)}
  html.js:not(.js-fallback) .clip-rv{transition:clip-path 1.1s cubic-bezier(.7,0,.28,1)}
  html.js:not(.js-fallback) .clip-rv.drawn{clip-path:inset(0 0 0 0)}
}

/* ============================================================
   R8 目録マーキー（store・実在商品名の帯）
   等速・hover/focusで停止・reducedでは横スクロール帯に落ちる
   ============================================================ */
.marquee{
  overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:18px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.marquee .track{display:flex;width:max-content;gap:0}
.marquee ul{display:flex;list-style:none;gap:0;align-items:baseline}
.marquee li{
  font-size:13.5px;color:var(--ink);white-space:nowrap;padding:0 1.4em;
  position:relative;
}
.marquee li+li::before{
  content:"";position:absolute;left:-2px;top:50%;width:4px;height:4px;border-radius:50%;
  background:var(--sage);transform:translateY(-50%);
}
.marquee .p{font-family:'Petrona',serif;color:var(--accent);margin-left:.6em;font-size:13px}
@media (prefers-reduced-motion:no-preference){
  html.js .marquee .track{animation:mq 110s linear infinite}
  .marquee:hover .track,.marquee:focus-within .track{animation-play-state:paused}
}
@keyframes mq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .marquee{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .marquee .dup{display:none}
}
html.no-js .marquee{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
html.no-js .marquee .dup{display:none}

/* ============================================================
   読了プログレスバー（taniku・S系 CSS scroll-driven。非対応ブラウザは非表示）
   ============================================================ */
.readbar{display:none}
@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion:no-preference){
    .readbar{
      display:block;position:fixed;top:0;left:0;right:0;height:2px;z-index:60;
      background:var(--accent);transform-origin:left;transform:scaleX(0);
      animation:readgrow linear both;animation-timeline:scroll(root);
    }
  }
}
@keyframes readgrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ============================================================
   多肉と暮らす（taniku）
   ============================================================ */
.care{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:3px;overflow:hidden}
.care>div{background:var(--paper);padding:32px 26px}
.care h3{font-size:16px;margin-bottom:12px;padding-bottom:10px;border-bottom:1px dashed var(--line)}
.care p{font-size:13.5px;line-height:1.95;color:var(--ink)}
@media (max-width:840px){
  .care{grid-template-columns:1fr}
}

.seasons{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:3px;overflow:hidden}
.season{background:var(--paper);padding:34px 32px;display:grid;grid-template-columns:150px 1fr;gap:26px}
.season .k{font-family:'Klee One',sans-serif;font-weight:600;font-size:17px}
.season .k .fr-cap{display:block;font-family:'Petrona',serif;font-style:italic;font-weight:400;font-size:12px;color:var(--accent);margin-top:4px}
.season p{font-size:14px;color:var(--ink);max-width:38em}
@media (max-width:700px){
  .season{grid-template-columns:1fr;gap:8px;padding:26px 22px}
}

/* ============================================================
   ワークショップ
   ============================================================ */
.ws-hero{display:grid;grid-template-columns:6fr 5fr;gap:56px;align-items:center;padding:40px 0 0}
.ws-hero img{border-radius:3px}
@media (max-width:840px){
  .ws-hero{grid-template-columns:1fr;gap:28px}
}
.ws-rows{margin-top:72px;display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:3px;overflow:hidden}
.ws-row{background:var(--paper);padding:36px 34px;display:grid;grid-template-columns:210px 1fr;gap:28px}
.ws-row .k{font-family:'Klee One',sans-serif;font-weight:600;font-size:16.5px}
.ws-row .k .fr-cap{display:block;font-family:'Petrona',serif;font-style:italic;font-weight:400;font-size:12px;color:var(--accent);margin-top:6px}
.ws-row p{font-size:14px;color:var(--ink);max-width:36em}
.ws-row .cta{margin-top:14px}
@media (max-width:840px){
  .ws-row{grid-template-columns:1fr;gap:10px;padding:28px 22px}
}

/* 引用（蚤の市の記録・話し言葉の一行抜粋型＝引用ブロック刷新③） */
.pull{max-width:640px;margin:0 auto;text-align:center;padding:12px 0}
.pull p{font-family:'Klee One',sans-serif;font-weight:600;font-size:clamp(17px,2.2vw,21px);line-height:2}
.pull .src{display:block;margin-top:14px;font-size:12px;color:var(--ink-soft);letter-spacing:.06em}

/* galerie */
.gal-scene{display:grid;grid-template-columns:5fr 4fr;gap:56px;align-items:start}
.gal-scene .side img{border-radius:3px}
@media (max-width:840px){
  .gal-scene{grid-template-columns:1fr;gap:28px}
}
.fact-line{
  display:flex;gap:28px;flex-wrap:wrap;margin-top:26px;
  border-top:1px solid var(--line);padding-top:20px;
}
.fact-line div{font-size:13px;color:var(--ink-soft)}
.fact-line b{display:block;font-weight:500;color:var(--ink);font-size:14px}

/* ============================================================
   about: つながり／クチコミ／メディア
   ============================================================ */
.friends{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.friend{
  border:1px solid var(--line);border-radius:3px;background:var(--paper);
  padding:26px 26px 28px;
  transition:transform .35s var(--ease),border-color .35s var(--ease);
}
@media (hover:hover){
  .friend:hover{transform:translateY(-3px);border-color:var(--sage)}
}
@media (prefers-reduced-motion:reduce){
  .friend,.friend:hover{transform:none}
}
.friend h3{font-size:16px;margin-bottom:6px}
.friend .role{font-size:12px;color:var(--accent);letter-spacing:.06em;margin-bottom:10px;display:block}
.friend p{font-size:13.5px;color:var(--ink);line-height:1.85}
@media (max-width:700px){
  .friends{grid-template-columns:1fr}
}

.review-box{
  border:1px solid var(--line);border-radius:3px;padding:34px 36px;max-width:720px;
  display:grid;grid-template-columns:auto 1fr;gap:30px;align-items:center;background:var(--paper);
}
.review-box .score{text-align:center}
.review-box .score .n{font-family:'Petrona',serif;font-size:44px;line-height:1;color:var(--ink)}
.review-box .score .d{font-size:11.5px;color:var(--ink-soft);margin-top:6px;letter-spacing:.04em}
.review-box .gist{font-size:14px;color:var(--ink)}
.review-box .gist .note{font-size:12px;color:var(--ink-soft);margin-top:10px}
@media (max-width:640px){
  .review-box{grid-template-columns:1fr;gap:18px;padding:26px 22px;text-align:center}
}

/* ============================================================
   オンラインストア（v2: STORESへの送客）
   ============================================================ */
.scene-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.scene{
  border:1px solid var(--line);border-radius:3px;overflow:hidden;background:var(--paper);
  transition:transform .35s var(--ease),border-color .35s var(--ease);
}
@media (hover:hover){
  .scene:hover{transform:translateY(-3px);border-color:var(--sage)}
}
@media (prefers-reduced-motion:reduce){
  .scene,.scene:hover{transform:none}
}
.scene img{aspect-ratio:4/3;object-fit:cover;width:100%}
.scene .tx{padding:24px 24px 28px}
.scene h3{font-size:16.5px;margin-bottom:4px}
.scene h3 .fr-cap{display:block;font-family:'Petrona',serif;font-style:italic;font-weight:400;font-size:12px;color:var(--accent);margin-top:4px}
.scene p{font-size:13.5px;color:var(--ink);line-height:1.85;margin-top:10px}
.scene ul{list-style:none;margin-top:14px;border-top:1px dashed var(--line);padding-top:12px}
.scene li{font-size:12.5px;color:var(--ink-soft);padding:3px 0;display:flex;justify-content:space-between;gap:12px}
.scene li .p{font-family:'Petrona',serif;color:var(--ink);white-space:nowrap}
@media (max-width:900px){
  .scene-grid{grid-template-columns:1fr;gap:24px}
  .scene img{aspect-ratio:16/9}
}
.store-cta{
  margin-top:64px;text-align:center;border:1px solid var(--sage);border-radius:3px;
  padding:40px 30px;background:var(--paper); /* alt地に置いてもaccent文字の4.5:1を保つ */
}
.store-cta p{font-size:14px;max-width:36em;margin:0 auto 22px}
.store-cta .small-note{font-size:12px;color:var(--ink-soft);margin-top:16px}

/* 特商法・表 */
.spec{width:100%;border-collapse:collapse;max-width:760px}
.spec th,.spec td{
  text-align:left;vertical-align:top;font-weight:400;
  border-bottom:1px solid var(--line);padding:16px 10px;font-size:14px;
}
.spec th{width:220px;color:var(--ink-soft);letter-spacing:.04em}
.spec .todo{color:var(--accent)}
@media (max-width:640px){
  .spec th,.spec td{display:block;width:auto;padding:6px 0}
  .spec th{border-bottom:0;padding-top:18px;font-size:12.5px}
}

/* ============================================================
   アクセス
   ============================================================ */
.acc-grid{display:grid;grid-template-columns:5fr 6fr;gap:56px;align-items:start}
@media (max-width:840px){
  .acc-grid{grid-template-columns:1fr;gap:32px}
}
.acc-table{width:100%;border-collapse:collapse}
.acc-table th,.acc-table td{
  text-align:left;font-weight:400;vertical-align:top;
  border-bottom:1px solid var(--line);padding:14px 8px;font-size:14px;
}
.acc-table th{width:110px;color:var(--ink-soft);letter-spacing:.06em}
.acc-table a{color:var(--ink)}
.map-box{border:1px solid var(--line);border-radius:3px;overflow:hidden}
.map-box iframe{display:block;width:100%;height:380px;border:0}
.acc-note{margin-top:22px;font-size:13px;color:var(--ink-soft);max-width:36em}

/* ============================================================
   下層ページ共通ヒーロー
   ============================================================ */
.page-head{padding-top:64px}
.page-head .fr-cap{font-family:'Petrona',serif;font-style:italic;font-size:14px;color:var(--accent);letter-spacing:.08em;display:block;margin-bottom:12px}
.page-head h1{font-size:clamp(24px,3vw,32px);margin-bottom:16px}
.page-head .lead{color:var(--ink);max-width:38em}
@media (max-width:840px){
  .page-head{padding-top:40px}
}

/* ============================================================
   フッター
   ============================================================ */
footer.site{background:var(--paper-deep);margin-top:40px}
.foot{padding:64px 24px 40px} /* 左右24px明示（.wrapのショートハンド打ち消し事故の再発防止） */
.foot-grid{display:grid;grid-template-columns:1fr auto auto;gap:40px 64px;align-items:start}
.foot .brand .en{font-size:18px}
.foot .addr{margin-top:14px;font-size:13px;color:var(--ink);line-height:2}
.foot .hours{font-size:12.5px;color:var(--ink);margin-top:6px}
.foot-sns,.foot-map{list-style:none;display:flex;flex-direction:column;gap:10px}
.foot-sns a,.foot-map a{font-size:13px;color:var(--ink);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .3s}
.foot-sns a:hover,.foot-map a:hover{border-color:var(--accent)}
.foot-sns .h,.foot-map .h{font-size:11.5px;letter-spacing:.16em;color:var(--ink)}
.foot-bottom{
  border-top:1px solid var(--line);margin-top:44px;padding-top:22px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.foot-bottom small{font-size:11.5px;color:var(--ink);letter-spacing:.06em}
.foot-bottom .legal{font-size:11.5px;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
@media (max-width:720px){
  .foot-grid{grid-template-columns:1fr}
}

/* 印刷 */
@media print{
  header.site,.menu-btn,footer.site .rosette,.readbar{display:none}
}