/* saiko — v5.css  「減らして、余白と配置で見せる」設計パス（site/v4/sp の上に重ねる）
   章の間隔1.4倍／12列の非対称配置／写真の上の小文字ゼロ／商品は名前と値段だけ／目次は番号だけ */
:root{--sec:170px;--col:calc((100vw - 2*var(--gutter) - 11*var(--gap))/12)}
@media(max-width:900px){:root{--sec:96px}}
.sec-head{margin-bottom:44px}
.label{font-size:10px;letter-spacing:.26em;color:var(--mute)}
.h-jp{font-size:clamp(24px,2.4vw,34px);letter-spacing:.16em;line-height:1.9}
.txt{margin-top:26px;max-width:30em;color:#333}
.more{margin-top:34px}
/* 余白のロゴ：ロゴと scroll だけ */
.mark .corner{display:none}
/* KV：写真と一行だけ */
.kv .kv-meta.tl,.kv .kv-meta.tr,.kv-latest{display:none}
.kv{height:min(88vh,860px)}
.kv .bl{bottom:64px}
.kv .bl .h-jp{font-size:clamp(26px,2.9vw,42px);letter-spacing:.16em}
.kv .grain{opacity:.08}
.kv:after{height:40%;background:linear-gradient(to top,rgba(0,0,0,.42),rgba(0,0,0,0))}
/* 12列の編集レイアウト */
.ed{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);align-items:start}
.ed .ed-t{grid-column:1/6;padding-top:12vh}
.ed .ed-p{grid-column:7/13}
.ed .ed-p img{width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--pale)}
.ed.rev .ed-p{grid-column:1/8;grid-row:1}
.ed.rev .ed-p.wide img{aspect-ratio:4/3}
.ed.rev .ed-t{grid-column:9/13;grid-row:1;padding-top:16vh}
.ed-head{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);margin-bottom:56px}
.ed-head .label{grid-column:1/3}
.ed-head .h-jp{grid-column:3/9;margin-top:-6px}
.ed-head .txt{grid-column:3/9;margin-top:18px}
.ed-link{margin-top:36px}
/* 3枚の非対称：大1＋小2を縦にずらす */
.tri{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);align-items:start}
.tri a{display:block;overflow:hidden;background:var(--pale)}
.tri img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}
@media(hover:hover){.tri a:hover img{transform:scale(1.04)}}
.tri .big{grid-column:1/8;aspect-ratio:3/2}
.tri .s1{grid-column:9/13;aspect-ratio:4/5;margin-top:14vh}
.tri .s2{grid-column:8/12;aspect-ratio:3/2;margin-top:-6vh}
/* 商品：名前と値段だけ。印は写真の上に置かない */
.grid.four{grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.item .tag{display:none}
.item .cap{padding-top:12px;grid-template-columns:1fr auto}
.item .cap .nm{letter-spacing:.14em}
.item .cap .dsc{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.two .ph .meta,.hero .meta,.gal .main .meta{display:none}
/* 帯：メタ文字なし */
.band .kv-meta{display:none}
.band{height:min(76vh,720px)}
.band .in{bottom:64px}
/* JOURNAL：日付と題だけ */
.jgrid .d .cat{display:none}
.jgrid .d{margin-top:14px}
/* Instagram：4枚 */
.ig.four{grid-template-columns:repeat(4,1fr);gap:var(--gap)}
/* 締め・フッター */
.statement{padding-top:calc(var(--sec) * 1.1)}
.ft{margin-top:calc(var(--sec) * 1.1)}
/* 左の目次：番号だけ・現在地だけ名前 */
#rail a{gap:8px}
#rail a .t{opacity:0;transform:translateX(-4px);transition:opacity .4s,transform .4s;font-size:9px;letter-spacing:.24em;text-transform:uppercase}
#rail a.on .t{opacity:1;transform:none}
#rail:before{display:none}
#rail a:before{display:none}
#rail a{padding-left:0}
#rail a.on .n{color:var(--ink)}
/* スマホ：同じ思想で（横スナップは維持） */
@media(max-width:900px){
  .ed,.ed.rev{display:block}
  .ed .ed-t,.ed.rev .ed-t{padding-top:0}
  .ed .ed-p{margin-top:36px}
  .ed .ed-p img{aspect-ratio:4/5}
  .ed.rev .ed-p{margin-top:0}
  .ed.rev .ed-t{margin-top:32px}
  .ed-head{display:block;margin-bottom:28px}
  .ed-head .h-jp{margin-top:10px}
  .tri{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:8px;margin:0 calc(-1*var(--gutter));padding:0 var(--gutter) 4px;scrollbar-width:none}
  .tri::-webkit-scrollbar{display:none}
  .tri a,.tri .big,.tri .s1,.tri .s2{flex:0 0 82vw;aspect-ratio:4/3;margin:0;scroll-snap-align:start}
  .kv .bl{bottom:64px}
  .kv .bl .h-jp{font-size:clamp(23px,6.4vw,28px)}
  .grid.four{grid-template-columns:repeat(2,1fr)}
  .ig.four{grid-template-columns:repeat(2,1fr);gap:6px}
  .sec-head{margin-bottom:26px}
}
/* ---------- 「もっと」：さらに減らして、さらに空ける ---------- */
:root{--sec:230px;--gutter:10vw}
@media(max-width:900px){:root{--sec:120px;--gutter:22px}}
#rail{display:none!important}
.kv .bl .h-en{display:none}
.scroll-ind{display:none}
.sec-head{margin-bottom:64px}
.txt{margin-top:30px}
.more{margin-top:40px}
.item .cap .dsc{display:none}
.item .cap{padding-top:14px}
@media(min-width:901px){.ed .ed-t{padding-top:14vh}.ed.rev .ed-t{padding-top:20vh}}
.ed-head{margin-bottom:72px}
.ed-link{margin-top:48px}
.tri .s1{margin-top:18vh}
.band{margin-top:calc(var(--sec) * 1.1)}
.jgrid .d{margin-top:18px}
.statement{padding-top:calc(var(--sec) * 1.2)}
.ft{margin-top:calc(var(--sec) * 1.2);padding-top:64px}
@media(max-width:900px){.sec-head{margin-bottom:32px}.ed .ed-p{margin-top:44px}.ed.rev .ed-t{margin-top:40px}.ed-head{margin-bottom:36px}.band{margin-top:var(--sec)}}
/* ---------- スマホの細部（文字の均衡・端の揃え・メニューの被り） ---------- */
@media(max-width:900px){
  /* 横スナップ：最初のカードも余白の内側に止まる */
  .hs,.tri,.gal .sp{scroll-padding-left:var(--gutter)}
  .gal .sp{scroll-padding-left:0}
  /* 見出し：一行に収める */
  .page-head .h-jp{font-size:clamp(20px,5.6vw,23px);letter-spacing:.1em;line-height:1.7}
  .h-jp{letter-spacing:.12em}
  .legend{line-height:1.9}
  /* メニュー：英語は左、日本語は右の同じ基線に。被らない */
  .menu > a{display:flex;align-items:baseline;justify-content:space-between;gap:16px;font-size:30px;padding:16px 0 14px}
  .menu > a small{margin:0;font-size:10px;letter-spacing:.14em;text-transform:none;color:var(--mute);white-space:nowrap}
  /* 商品カードの文字 */
  .item .cap{padding-top:10px;font-size:10.5px}
  /* 章の見出し行 */
  .sec-head .label{font-size:9.5px}
  .sec-head a{font-size:9.5px;letter-spacing:.14em}
  /* KV：一行の大きさ */
  .kv .bl{bottom:56px}
  .kv .bl .h-jp{font-size:clamp(22px,6vw,27px);letter-spacing:.14em}
  /* PDP */
  .buy h1{font-size:19px;letter-spacing:.22em}
  .buy .pr{margin-top:6px}
  .buy .kind{margin-top:18px;font-size:9.5px}
  .buy .note{font-size:11.5px}
  .buy .ship{font-size:10.5px}
  .acc summary{font-size:10.5px;padding:15px 0}
  .acc .abody{font-size:11.5px;line-height:2}
}
