/* 制作サンプル（架空の店舗です）— イトアソビ（v2）。JavaScript なし。 */
@font-face{font-family:"IA Murecho";src:url(fonts/murecho-700-subset.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
:root{--sumi:#1F1E1C;--asashiro:#EDEAE4;--asa:#E4E0D8;--ai:#3A4F7A;--gap:clamp(72px,11vw,144px)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scrollbar-color:var(--sumi) var(--asa)}
body{margin:0;background:var(--asa);color:var(--sumi);font-family:system-ui,-apple-system,"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Meiryo",sans-serif;font-size:1rem;line-height:1.85;letter-spacing:.04em}
h1,h2,h3,p,figure{margin:0}
img{display:block;max-width:100%;height:auto}
::selection{background:var(--ai);color:var(--asashiro)}
a{color:var(--ai);text-decoration-thickness:1px;text-underline-offset:.28em}
a:hover{text-decoration:none}
a:focus-visible{outline:2px solid currentColor;outline-offset:4px}
h1,h2,h3,.catch{font-family:"IA Murecho",sans-serif;font-weight:700;line-height:1.4;letter-spacing:.04em;word-break:auto-phrase;text-wrap:balance}

/* 上下の帯：麻の地の本文の組（墨の字・麻の地）を、帯では麻白の地に墨の字で */
.band{margin:0;padding:8px 24px;background:var(--asashiro);color:var(--sumi);font-size:1rem;font-weight:700}
.foot-band{padding:24px 24px 40px;background:var(--asashiro);color:var(--sumi)}
.foot-band p{margin:0}
.foot-band .label{font-weight:700}
.foot-band .label+p{margin-top:8px}
.foot-band .back{margin-top:24px}
.foot-band a{color:inherit;display:inline-flex;align-items:center;min-height:44px}

.gen img{width:100%;object-fit:cover}
.gen-note{margin-top:8px;font-size:1rem;line-height:1.6}

.in{max-width:1200px;margin:0 auto;padding:0 24px}
.sec{padding:var(--gap) 0}
.on-sumi{background:var(--sumi);color:var(--asashiro)}
.on-sumi ::selection{background:var(--asashiro);color:var(--sumi)}
.on-asashiro{background:var(--asashiro)}
h2{font-size:clamp(1.75rem,4.4vw,3rem)}
h2 span{display:block}
.sec h2+p{margin-top:24px}
.sec p+p{margin-top:16px}

/* 区切り1：特大の店名（M-3：下から1回だけ上がる・transform だけ・遅れ 0） */
.fv{padding:40px 0 0}
.fv h1{font-size:clamp(3.5rem,16.5vw,13rem);line-height:1.05;letter-spacing:.02em;overflow:hidden;padding-bottom:.06em;white-space:nowrap}
.fv h1 span{display:block;animation:rise 500ms cubic-bezier(.16,1,.3,1) both}
@keyframes rise{from{transform:translateY(105%)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.fv h1 span{animation:none}}
.catch{margin-top:24px;font-size:clamp(1.375rem,3vw,2rem)}
.catch span,.lead span{display:block}
.lead{margin-top:16px}
.fv .gen{margin-top:40px}
.fv .gen img{aspect-ratio:4/5;object-position:50% 50%}
.fv .gen-note{padding:0 0 24px}

/* 区切り2 */
.split{display:grid;gap:40px}
.split .gen img{aspect-ratio:4/5}

/* A-G2 から1着ずつ切り出す（新しいファイルを作らず、表示位置だけで）。--x：左端の位置／--w：幅の割合 */
.crop{position:relative;overflow:hidden;aspect-ratio:3/5;background:var(--asa)}
.crop img{position:absolute;max-width:none;width:calc(100% / var(--w));height:auto;left:calc(-100% * var(--x) / var(--w));top:var(--t,-15%)}
.c-shirt{--x:.025;--w:.33}
.c-pants{--x:.36;--w:.265;--t:-6%}
.c-haori{--x:.655;--w:.33}

/* 区切り3：375 は3着を横に指で送る並び（1枚ずつ止まる・幅は画面の8割）。1280 はシャツだけ大きく、パンツと羽織りを小さく */
.items{display:flex;gap:16px;margin:48px -24px 0;padding:0 24px 8px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 24px;overscroll-behavior-x:contain;scrollbar-color:var(--sumi) transparent}
.item{flex:0 0 80%;scroll-snap-align:start}
.item h3{margin-top:16px;font-size:1.25rem}
.item-big h3{font-size:clamp(1.5rem,3vw,2rem)}
.item h3+p{margin-top:8px}

/* 区切り4：同じ1枚から切り出した2着・3着を並べた組（重ねない） */
.sets{display:grid;gap:48px;margin-top:48px}
.set .pair{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.set .whole img{aspect-ratio:3/2}
.set .set-name{display:block;margin-top:12px;font-weight:700}
.set .set-name+.gen-note{display:block;margin-top:2px}

/* 区切り5：墨の地で締める */
.closing h2{font-size:clamp(2rem,6vw,4rem)}

@media (min-width:768px){
  .in{padding:0 40px}
  .band,.foot-band{padding-left:40px;padding-right:40px}
  .fv{padding-top:56px}
  .fv h1{font-size:clamp(3.5rem,14.5vw,13rem)}
  .fv-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:start;margin-top:24px}
  .fv-text{padding-top:8px}
  .fv .catch{margin-top:0;font-size:clamp(2rem,3.4vw,3rem)}
  .fv .lead{margin-top:24px;font-size:1.0625rem}
  .fv .gen{margin-top:0}
  .fv .gen img{aspect-ratio:auto;height:clamp(340px,calc(100vh - 430px),600px)}
  .fv .gen-note{padding:0 0 32px}
  .split{grid-template-columns:1fr 1fr;align-items:center;gap:72px}
  .items{display:grid;grid-template-columns:1.6fr 1fr 1fr;align-items:end;gap:40px;margin:48px 0 0;padding:0;overflow:visible}
  .sets{grid-template-columns:1fr 1fr 1.5fr;align-items:end;gap:40px}
}