/* R25 ショップ試作（2026-10-21、Claude作）。site-a.css・brand-color-r24.css の上に重ねる。
   コンセプト：静けさ。紙の地・白い台・大きな切り抜き写真・余白。藍は押せる所だけ。 */
:root { --plinth:#fff; --plinth-line:#ebe8e1; --gutter:7vw; --tbd:#8a6d3b }
.shop-main { padding:0 var(--gutter) 120px }
.shop-cart-link { display:inline-flex; align-items:center; gap:8px; min-height:44px; font-size:13px; letter-spacing:.025em; color:var(--indigo) }
.shop-cart-link .count { min-width:22px; height:22px; padding:0 6px; display:inline-grid; place-items:center; border:1px solid currentColor; border-radius:11px; font-size:11px; font-variant-numeric:tabular-nums }
.nav a[aria-current="page"] { text-decoration:underline; text-underline-offset:7px }

/* 見出し */
.shop-hero { padding:72px 0 56px; display:grid; grid-template-columns:1fr auto; align-items:end; gap:40px; border-bottom:1px solid var(--line) }
.shop-hero h1 { font:400 clamp(56px,7vw,104px)/.95 var(--serif); letter-spacing:-.02em; color:var(--indigo) }
.shop-hero .jp { margin-top:18px; font-size:14px; letter-spacing:.12em }
.shop-hero .lead { max-width:30em; font-size:14px; color:var(--muted) }
.crumb { padding-top:28px; font-size:12px; color:var(--muted); display:flex; gap:10px; flex-wrap:wrap }
.crumb a:hover { color:var(--indigo); text-decoration:underline; text-underline-offset:4px }

/* 安心の3点（送料・お届け・返品） */
.assure { display:grid; grid-template-columns:repeat(3,1fr); border-bottom:1px solid var(--line) }
.assure div { padding:22px 28px 22px 0; display:grid; gap:4px; align-content:start }
.assure .edit { display:block; width:fit-content; margin-top:2px; color:var(--indigo); text-decoration:underline; text-underline-offset:4px; white-space:nowrap }
.assure div+div { padding-left:28px; border-left:1px solid var(--line) }
.assure dt { font:500 11px/1.4 var(--sans); letter-spacing:.16em; color:var(--muted) }
.assure dd { margin:0; font-size:14px }
.tbd { color:var(--tbd); text-decoration:underline dotted; text-underline-offset:4px }

/* 絞り込み */
.filters { position:sticky; top:0; z-index:15; background:var(--paper); display:flex; flex-wrap:wrap; align-items:center; gap:10px 28px; padding:20px 0; border-bottom:1px solid var(--line) }
.filter-group { display:flex; flex-wrap:wrap; gap:6px; align-items:center }
.filter-group > span { font-size:11px; letter-spacing:.16em; color:var(--muted); margin-right:6px }
.chip { min-height:40px; padding:0 16px; border:1px solid var(--line); background:transparent; font-size:13px; letter-spacing:.03em; transition:border-color 200ms, background 200ms, color 200ms }
.chip:hover { border-color:var(--ink) }
.chip[aria-pressed="true"] { background:var(--indigo); border-color:var(--indigo); color:#fff }
.filters .result { margin-left:auto; font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums }
.filters select { min-height:40px; border:1px solid var(--line); background:transparent; padding:0 12px; font-size:13px }

/* 一覧 */
.grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:56px 28px; padding-top:48px }
.card { display:grid; gap:16px; position:relative }
.card a.cover { position:absolute; inset:0; z-index:1 }
.plinth { aspect-ratio:4/5; background:var(--plinth); display:grid; place-items:center; overflow:hidden; position:relative }
.plinth img { width:72%; height:72%; object-fit:contain; transition:transform 700ms var(--ease), opacity 300ms }
.card:hover .plinth img { transform:scale(1.04) }
.plinth .brand-tag { position:absolute; left:18px; top:16px; font:500 12px/1 var(--serif); letter-spacing:.14em; text-transform:uppercase; color:var(--muted) }
.card h2 { font:500 21px/1.25 var(--serif); letter-spacing:.01em }
.card .sub { font-size:12px; color:var(--muted); margin-top:4px }
.card .meta { display:flex; justify-content:space-between; align-items:center; gap:12px }
.price { font:500 15px/1 var(--sans); font-variant-numeric:tabular-nums lining-nums }
.price small { font-size:11px; color:var(--muted); font-weight:400; margin-left:4px }
.swatches { display:flex; gap:6px; position:relative; z-index:2 }
.swatches button { width:30px; height:30px; padding:3px; border:1px solid transparent; background:transparent; display:grid; place-items:center }
.swatches button img { width:100%; height:100%; object-fit:contain }
.swatches button[aria-pressed="true"] { border-color:var(--ink) }
.swatches .more { font-size:11px; color:var(--muted); align-self:center }
.card.inquiry .plinth { background:transparent; border:1px solid var(--line) }
.card.inquiry .plinth p { font:400 30px/1.2 var(--serif); text-align:center; color:var(--ink) }
.card.inquiry .plinth p small { display:block; font:400 13px/1.8 var(--sans); margin-top:14px; color:var(--muted) }
.empty { padding:80px 0; text-align:center; color:var(--muted) }

/* B2Bへの帯 */
.trade { margin-top:120px; padding:56px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); display:grid; grid-template-columns:1fr auto; gap:40px; align-items:center }
.trade h2 { font:400 32px/1.2 var(--serif) }
.trade p { margin-top:10px; font-size:14px; color:var(--muted) }
.trade .links { display:flex; gap:36px; flex-wrap:wrap }
.trade .text-link { color:var(--indigo) }

/* 商品詳細 */
.pdp { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr); gap:72px; padding-top:32px; align-items:start }
.gallery { position:sticky; top:24px; display:grid; gap:14px }
.gallery .stage { aspect-ratio:1/1; background:var(--plinth); display:grid; place-items:center; overflow:hidden }
.gallery .stage img { width:74%; height:74%; object-fit:contain; animation:quiet 500ms var(--ease) both }
.thumbs { display:flex; gap:10px; flex-wrap:wrap }
.thumbs button { width:76px; height:76px; padding:8px; background:var(--plinth); border:1px solid transparent }
.thumbs button img { width:100%; height:100%; object-fit:contain }
.thumbs button[aria-pressed="true"] { border-color:var(--ink) }
.buy { display:grid; gap:28px; padding-top:12px }
.buy .brand-name { font:500 13px/1 var(--serif); letter-spacing:.2em; text-transform:uppercase; color:var(--muted) }
.buy .brand-name a:hover { color:var(--indigo) }
.buy h1 { font:400 clamp(36px,3.6vw,52px)/1.05 var(--serif); letter-spacing:-.01em; margin-top:14px }
.buy .jp { font-size:14px; margin-top:12px }
.buy .price { font-size:22px }
.option-label { font-size:12px; letter-spacing:.12em; color:var(--muted); margin-bottom:12px; display:flex; justify-content:space-between }
.option-label b { font-weight:500; color:var(--ink); letter-spacing:.02em }
.options { display:flex; flex-wrap:wrap; gap:8px }
.options button { min-height:44px; padding:0 16px; border:1px solid var(--line); background:transparent; font-size:13px }
.options button:hover { border-color:var(--ink) }
.options button[aria-pressed="true"] { border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink) }
.qty-row { display:grid; grid-template-columns:auto 1fr; gap:12px }
.qty { display:inline-grid; grid-template-columns:48px 48px 48px; border:1px solid var(--line); height:60px }
.qty button { border:0; background:transparent; font-size:18px }
.qty input { border:0; text-align:center; font:inherit; background:transparent; width:100%; font-variant-numeric:tabular-nums }
.btn { min-height:60px; border:0; background:var(--indigo); color:#fff; font-size:15px; letter-spacing:.08em; padding:0 28px; display:inline-flex; align-items:center; justify-content:center; gap:14px; transition:background 200ms }
.btn:hover { background:#294b78 }
.btn[disabled] { background:#9aa3ae; cursor:not-allowed }
.btn.ghost { background:transparent; color:var(--indigo); border:1px solid var(--indigo) }
.btn.ghost:hover { background:rgba(0,36,54,.06) }
.facts { border-top:1px solid var(--line) }
.facts div { display:grid; grid-template-columns:7em 1fr; gap:12px; padding:14px 0; border-bottom:1px solid var(--line); font-size:13px }
.facts dt { color:var(--muted) }
.facts dd { margin:0 }
.consult-note { font-size:13px; color:var(--muted) }
.consult-note a { color:var(--indigo); text-decoration:underline; text-underline-offset:4px }
.section-title { font:400 34px/1.1 var(--serif); margin:120px 0 0; padding-bottom:20px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:end }
.section-title small { font:400 13px/1 var(--sans); color:var(--muted) }
.grid.related { grid-template-columns:repeat(4,minmax(0,1fr)) }
.grid.related .card h2 { font-size:18px }

/* 追加したときのパネル */
.added { position:fixed; right:24px; top:24px; z-index:60; width:min(400px,calc(100vw - 32px)); background:var(--paper); border:1px solid var(--line); box-shadow:0 18px 50px rgba(20,20,20,.12); padding:24px; display:grid; gap:18px; transform:translateY(-12px); opacity:0; pointer-events:none; transition:opacity 300ms var(--ease), transform 300ms var(--ease) }
.added.is-open { opacity:1; transform:none; pointer-events:auto }
.added header { display:flex; justify-content:space-between; align-items:center; font-size:13px }
.added header button { border:0; background:none; min-width:44px; min-height:44px; font-size:20px }
.added .line { display:grid; grid-template-columns:72px 1fr; gap:14px; align-items:center }
.added .line .ph { background:var(--plinth); aspect-ratio:1; display:grid; place-items:center }
.added .line img { width:80%; height:80%; object-fit:contain }
.added .sum { display:flex; justify-content:space-between; font-size:13px; padding-top:14px; border-top:1px solid var(--line) }
.added .actions { display:grid; gap:10px }

/* カート・手続き */
.steps { display:flex; gap:0; margin:40px 0 0; padding:0; list-style:none; font-size:12px; letter-spacing:.08em; border-bottom:1px solid var(--line) }
.steps li { padding:0 0 14px; margin-right:36px; color:var(--muted); position:relative }
.steps li[aria-current="step"] { color:var(--ink) }
.steps li[aria-current="step"]::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--indigo) }
.steps li span { font-family:var(--serif); font-size:14px; margin-right:8px }
.checkout { display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:72px; padding-top:48px; align-items:start }
.page-title { font:400 clamp(40px,4.4vw,64px)/1 var(--serif); padding-top:56px; color:var(--indigo) }
.page-title + .jp { font-size:14px; letter-spacing:.12em; margin-top:14px }
.lines { border-top:1px solid var(--line) }
.cart-line { display:grid; grid-template-columns:120px 1fr auto; gap:24px; padding:24px 0; border-bottom:1px solid var(--line); align-items:center }
.cart-line .ph { background:var(--plinth); aspect-ratio:1; display:grid; place-items:center }
.cart-line .ph img { width:78%; height:78%; object-fit:contain }
.cart-line h2 { font:500 20px/1.25 var(--serif) }
.cart-line .sub { font-size:12px; color:var(--muted); margin-top:4px }
.cart-line .controls { display:flex; gap:18px; align-items:center; margin-top:14px }
.cart-line .qty { height:44px; grid-template-columns:40px 40px 40px }
.link-btn { border:0; background:none; padding:10px 0; min-height:44px; font-size:12px; color:var(--muted); text-decoration:underline; text-underline-offset:4px }
.link-btn:hover { color:var(--indigo) }
.summary { position:sticky; top:24px; background:var(--plinth); padding:32px; display:grid; gap:18px }
.summary h2 { font:400 24px/1 var(--serif) }
.summary dl { margin:0; display:grid; gap:10px; font-size:14px }
.summary dl div { display:flex; justify-content:space-between; gap:12px }
.summary dl dd { margin:0; font-variant-numeric:tabular-nums }
.summary .total { padding-top:14px; border-top:1px solid var(--line); font-size:16px; font-weight:500 }
.summary .note { font-size:12px; color:var(--muted) }
.summary .pay { font-size:12px; color:var(--muted); display:flex; flex-wrap:wrap; gap:6px }
.summary .pay span { border:1px solid var(--line); padding:3px 8px; background:var(--paper) }
.form { display:grid; gap:22px; max-width:640px }
.form fieldset { border:0; padding:0; margin:0; display:grid; gap:22px }
.form legend { font:400 24px/1 var(--serif); margin-bottom:22px }
.field { display:grid; gap:8px }
.field label { font-size:13px }
.field label .req { font-size:11px; color:var(--indigo); margin-left:8px }
.field label .opt { font-size:11px; color:var(--muted); margin-left:8px }
.field input, .field select { min-height:52px; border:0; border-bottom:1px solid var(--line-strong); background:transparent; font:inherit; font-size:16px; padding:0 2px }
.field input:focus, .field select:focus { outline:none; border-bottom:2px solid var(--indigo) }
.field .hint { font-size:12px; color:var(--muted) }
.field .err { font-size:12px; color:#9b2c2c; display:none }
.field.invalid .err { display:block }
.field.invalid input { border-bottom-color:#9b2c2c }
.row2 { display:grid; grid-template-columns:1fr 1fr; gap:22px }
.final { display:grid; gap:0; border-top:1px solid var(--ink) }
.final > div { display:grid; grid-template-columns:10em 1fr auto; gap:16px; padding:18px 0; border-bottom:1px solid var(--line); font-size:14px; align-items:start }
.final dt { color:var(--muted); font-size:13px }
.final dd { margin:0 }
.final .edit { font-size:12px; color:var(--indigo); text-decoration:underline; text-underline-offset:4px; min-height:24px }
.legal-note { font-size:12px; color:var(--muted); margin-top:14px }
.legal-note a { color:var(--indigo); text-decoration:underline; text-underline-offset:4px }
.proto-note { margin-top:40px; padding:14px 18px; border-left:2px solid var(--tbd); font-size:12px; color:var(--muted); background:rgba(138,109,59,.05) }
.done { padding:96px 0 40px; max-width:640px }
.done h1 { font:400 clamp(44px,5vw,72px)/1 var(--serif); color:var(--indigo) }
.done p { margin-top:20px }

@media (prefers-reduced-motion:reduce) { .plinth img,.gallery .stage img,.added { transition:none; animation:none } }
@media (max-width:1100px) { .grid.related { grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:900px) {
  .pdp,.checkout { grid-template-columns:1fr; gap:40px }
  .gallery,.summary { position:static }
  .grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px 16px }
}
@media (max-width:760px) {
  :root { --gutter:24px }
  .shop-hero { grid-template-columns:1fr; padding:44px 0 32px; gap:16px }
  .assure { grid-template-columns:1fr }
  .assure div,.assure div+div { padding:14px 0; border-left:0 }
  .assure div+div { border-top:1px solid var(--line) }
  .filters { gap:10px; padding:14px 0; overflow-x:auto; flex-wrap:nowrap }
  .filter-group { flex-wrap:nowrap }
  .filters .result { display:none }
  .chip { white-space:nowrap }
  .card h2 { font-size:17px }
  .card .meta { flex-direction:column; align-items:flex-start }
  .swatches button { width:26px; height:26px }
  .trade { grid-template-columns:1fr; margin-top:80px }
  .cart-line { grid-template-columns:88px 1fr; }
  .cart-line .line-price { grid-column:2 }
  .final > div { grid-template-columns:1fr auto }
  .final dt { grid-column:1 / -1 }
  .row2 { grid-template-columns:1fr }
  .section-title { margin-top:80px; font-size:28px }
  .buy-bar { position:sticky; bottom:0; background:var(--paper); padding:12px 0; border-top:1px solid var(--line); z-index:10 }
}
@media (max-width:1020px) { .nav-right>a.shop-cart-link { display:inline-flex } .shop-cart-link>span:first-child { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0) } .shop-cart-link::before { content:"Cart"; font:500 13px/1 var(--serif); letter-spacing:.08em } }
/* 写真は台の中に必ず収める（%の高さがグリッドで効かないため、絶対配置で内側に置く） */
.plinth,.gallery .stage,.cart-line .ph,.added .line .ph,.thumbs button,.swatches button { position:relative }
.plinth img { position:absolute; inset:16% 14% 12%; width:72%; height:72%; margin:auto }
.gallery .stage img { position:absolute; inset:0; width:74%; height:74%; margin:auto }
.cart-line .ph img,.added .line img { position:absolute; inset:0; margin:auto }
@media (min-width:1280px) { .grid:not(.related) { grid-template-columns:repeat(4,minmax(0,1fr)); gap:64px 24px } }
/* 白い商品（TOURTEE PRO など）が白い台に消えるので、台は紙より一段だけ濃い石の色にする（design.md の白い台からの変更。理由：白い商品の視認性） */
:root { --plinth:#f1efea }
.summary { background:#f1efea }
.price { white-space:nowrap }
.card .meta { display:grid; gap:12px; justify-content:start }
.swatches button { background:#fff }
.swatches button img { position:absolute; inset:3px; width:calc(100% - 6px); height:calc(100% - 6px) }
.swatches button[aria-pressed="true"] { outline:1px solid var(--ink); outline-offset:1px; border-color:transparent }
/* 下の調整（2026-10-21 画面確認後） */
.review-hint { font-size:12px; color:var(--muted) }
@media (max-width:760px) {
  .shop-main { overflow-x:clip }
  .filters { flex-direction:column; align-items:stretch; flex-wrap:nowrap; overflow:visible; gap:8px }
  .filter-group { overflow-x:auto; scrollbar-width:none; margin-right:calc(-1 * var(--gutter)); padding-right:var(--gutter) }
  .filter-group::-webkit-scrollbar { display:none }
  .filters select { align-self:flex-start }
  .chip { min-height:38px; padding:0 14px }
  .thumbs { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none }
  .thumbs button { width:60px; height:60px; flex:none }
  .qty { grid-template-columns:40px 40px 40px; height:56px }
  .btn { min-height:56px; white-space:nowrap; padding:0 18px; font-size:14px }
  .buy-bar { margin:0 calc(-1 * var(--gutter)); padding:12px var(--gutter) }
}
/* 検査（review.md）の指摘への対応 2026-10-21 */
:root { --tbd:#7a5f30 } /* #f1efea 上でも 4.5:1 以上 */
.field label .req { color:var(--ink) }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
.added[hidden] { display:none }
.filters .result { margin:0 0 0 auto }
@media (max-width:760px) {
  .filters .result { display:block; position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0) }
  .chip,.filters select { min-height:44px }
  .swatches button::before { content:""; position:absolute; inset:-9px }
}
/* 訂正：石の色の台では、白地で切り抜いた写真の縁に白いにじみが出る（Pitchfix Hybrid Maple など）。
   台は design.md どおり白に戻し、白い商品（TOURTEE PRO など）は写真にごく薄い影を付けて輪郭を出す */
:root { --plinth:#fff }
.summary { background:#f4f2ed }
.plinth img,.gallery .stage img,.cart-line .ph img,.added .line img,.thumbs button img { filter:drop-shadow(0 1px 1.5px rgba(20,20,20,.16)) }
.plinth,.gallery .stage { box-shadow:inset 0 0 0 1px var(--plinth-line) }
/* サンプルの札（2026-10-21：一般向けの商品は未定） */
.sample-tag { position:absolute; right:16px; top:14px; font-size:10px; letter-spacing:.12em; color:var(--muted); border:1px solid var(--line); padding:2px 7px; background:var(--paper) }

/* ===== 動き（2026-10-21）：商品をよく見せる。煽りは使わない ===== */
/* 冒頭：文字と、5ブランドの商品が浮かぶ舞台 */
.shop-hero { grid-template-columns:minmax(280px,.8fr) minmax(0,1.35fr); align-items:center; padding:40px 0 48px }
.hero-copy { display:grid; gap:0; align-content:center }
.hero-copy .lead { margin-top:28px }
.hero-copy .text-link { margin-top:28px; justify-self:start; color:var(--indigo) }
.hero-stage { position:relative; height:clamp(360px,36vw,520px); --mx:0; --my:0 }
.float { position:absolute; display:block; opacity:0; transform:translateY(46px); transition:opacity 1100ms var(--ease), transform 1300ms var(--ease); transition-delay:calc(var(--i) * 140ms + 150ms) }
.hero-stage.is-in .float { opacity:1; transform:none }
.float-img { display:block; position:relative; transform:translate(calc(var(--mx) * var(--d) * -30px), calc(var(--my) * var(--d) * -18px)); transition:transform 900ms var(--ease) }
.float img { width:100%; height:auto; position:relative; z-index:1; filter:drop-shadow(0 18px 22px rgba(20,20,20,.14)); transition:transform 600ms var(--ease), filter 600ms var(--ease) }
.float-img::after { content:""; position:absolute; left:14%; right:14%; bottom:-14px; height:16px; border-radius:50%; background:radial-gradient(closest-side, rgba(20,20,20,.16), transparent); transition:transform 600ms var(--ease), opacity 600ms }
.float:hover img,.float:focus-visible img { transform:translateY(-10px) scale(1.03); filter:drop-shadow(0 26px 26px rgba(20,20,20,.18)) }
.float:hover .float-img::after,.float:focus-visible .float-img::after { transform:scaleX(.82); opacity:.7 }
.float-name { position:absolute; left:50%; top:calc(100% + 22px); transform:translate(-50%,6px); white-space:nowrap; font:400 15px/1 var(--serif); letter-spacing:.04em; opacity:0; transition:opacity 400ms, transform 400ms var(--ease); color:var(--indigo) }
.float:hover .float-name,.float:focus-visible .float-name { opacity:1; transform:translate(-50%,0) }
.f0 { left:2%;  bottom:14%; width:25% }          /* PRG ドライバーカバー（縦長） */
.f1 { left:30%; bottom:22%; width:8% }           /* TOURTEE（細い） */
.f2 { left:41%; bottom:10%; width:11% }          /* Pitchfix */
.f3 { left:55%; bottom:12%; width:40% }          /* VANTO バレルバッグ（横長） */
.f4 { left:46%; top:2%;   width:34% }            /* PRG マレットカバー（横長、奥） */
.f4 .float-img { --d:.45 }
.f4 img { filter:drop-shadow(0 10px 14px rgba(20,20,20,.1)) }
/* 一覧：画面に入ったら下から静かに出る */
.card { opacity:0; transform:translateY(28px); transition:opacity 800ms var(--ease), transform 900ms var(--ease); transition-delay:calc(var(--i, 0) * 80ms) }
.card.is-in { opacity:1; transform:none }
/* カード：持ち上がり、足もとの影が締まる。色違いはふわっと替わる */
.plinth::after { content:""; position:absolute; left:28%; right:28%; bottom:9%; height:12px; border-radius:50%; background:radial-gradient(closest-side, rgba(20,20,20,.12), transparent); transition:transform 600ms var(--ease), opacity 600ms; z-index:0 }
.plinth img { z-index:1 }
.card:hover .plinth img { transform:translateY(-8px) scale(1.03) }
.card:hover .plinth::after { transform:scaleX(.78); opacity:.6 }
@keyframes swap-in { from { opacity:.15; transform:translateY(-8px) scale(.98) } to { opacity:1; transform:translateY(-8px) scale(1.03) } }
.plinth img.swap { animation:swap-in 520ms var(--ease) both }
@media (max-width:900px) {
  .shop-hero { grid-template-columns:1fr }
  .hero-stage { height:clamp(260px,62vw,420px); order:-1 }
  .float-name { display:none }
}
@media (prefers-reduced-motion:reduce) {
  .float,.card { opacity:1; transform:none; transition:none }
  .float-img,.float img,.plinth img,.plinth::after { transition:none; transform:none }
  .plinth img.swap { animation:none }
}
.plinth img { inset:18% 18% 15%; width:64%; height:64% }

/* ===== いろいろな商品の運用（2026-10-21）：写真の見せ方・札・在庫・売り切れ ===== */
/* 写真の見せ方。cutout＝台に置いて影／photo＝枠いっぱい・影なし／photo-fit＝白地の写真を全体で・影なし */
[data-mode="photo"] img,[data-mode="photo-fit"] img { filter:none !important }
[data-mode="photo"]::after,[data-mode="photo-fit"]::after { display:none }
.plinth[data-mode="photo"] img,.gallery .stage[data-mode="photo"] img { inset:0; width:100%; height:100%; object-fit:cover }
.plinth[data-mode="photo-fit"] img { inset:10%; width:80%; height:80%; object-fit:contain }
.gallery .stage[data-mode="photo-fit"] img { width:88%; height:88% }
.card:hover .plinth[data-mode="photo"] img { transform:scale(1.04) }
.card:hover .plinth[data-mode="photo-fit"] img { transform:scale(1.02) }
.thumbs button[data-mode="photo"] img,.swatches button[data-mode="photo"] img,.cart-line .ph[data-mode="photo"] img,.added .ph[data-mode="photo"] img { object-fit:cover; width:100%; height:100%; inset:0 }
.thumbs button[data-mode="photo"],.swatches button[data-mode="photo"] { padding:0 }
/* 写真の上でも札と名前が読めるよう、写真のときだけ紙の帯を敷く */
.plinth[data-mode="photo"] .brand-tag { background:var(--paper); padding:5px 8px; left:12px; top:12px }
/* 札（実数・実際の登録日からだけ） */
.tags { position:absolute; right:12px; top:12px; display:flex; gap:6px; z-index:2 }
.tags.inline { position:static; margin-top:14px }
.tag { font-size:10px; letter-spacing:.12em; padding:3px 8px; background:var(--ink); color:#fff }
.tag.quiet { background:var(--paper); color:var(--muted); border:1px solid var(--line) }
.tag.sold { background:var(--paper); color:var(--ink); border:1px solid var(--ink) }
.sample-tag { display:none }
.stock-note { font-size:12px; color:var(--muted); margin-left:12px; font-weight:400 }
.card.is-sold .plinth img { opacity:.45; filter:grayscale(.6) !important }
.card.is-sold h2,.card.is-sold .sub { color:var(--muted) }
.sold-text { color:var(--muted) }
.sold-box { display:grid; gap:12px }
.desc { font-size:14px; line-height:2; max-width:34em }
.qty-row.single { grid-template-columns:1fr }
.check { display:inline-flex; align-items:center; gap:8px; font-size:13px; min-height:44px; cursor:pointer }
.check input { width:18px; height:18px; accent-color:var(--indigo) }
/* 冒頭：管理画面で選んだ商品のときは、形に頼らない並べ方にする */
.hero-stage.auto { display:flex; align-items:flex-end; justify-content:center; gap:4%; padding-bottom:10% }
.hero-stage.auto .float { position:relative; inset:auto; width:calc(80% / var(--n)); max-width:220px }
.hero-stage.auto .float img { max-height:clamp(180px,26vw,360px); width:auto; margin:auto }
@media (max-width:760px) { .stock-note { display:block; margin:6px 0 0 } .filters .check { order:3 } }
/* ご案内の受け取り（チェックアウト・完了・売り切れ） */
.optin { margin-top:16px; padding-top:28px !important; border-top:1px solid var(--line) !important; gap:10px !important }
.optin legend .opt { font:400 11px/1 var(--sans); color:var(--muted); margin-left:10px }
.lead-s { font-size:13px; color:var(--muted) }
.insta { display:inline-flex; align-items:center; gap:10px; min-height:44px; font-size:13px; color:var(--indigo); text-decoration:underline; text-underline-offset:4px; justify-self:start }
.insta span[lang="en"] { font:500 16px/1 var(--serif) }
.follow { margin-top:56px; padding:32px; background:#f4f2ed; display:grid; gap:14px }
.follow h2 { font:400 30px/1 var(--serif); color:var(--indigo) }
.follow-form { display:grid; gap:4px; justify-items:start }
.follow-form .btn { margin-top:10px; min-height:48px }
.status { font-size:13px }
.restock { display:grid; gap:8px; font-size:13px }
.restock-row { display:grid; grid-template-columns:1fr auto; gap:8px }
.restock input { min-height:52px; border:1px solid var(--line-strong); padding:0 12px; font:inherit; font-size:16px; background:#fff }
@media (max-width:760px) { .restock-row { grid-template-columns:1fr } }
[hidden] { display:none !important }
.optin .check { align-items:flex-start; padding-block:8px }
.optin .check input { margin-top:3px; flex:none }
@media (max-width:760px) {
  .steps { overflow-x:auto; scrollbar-width:none; font-size:11px; white-space:nowrap }
  .steps li { margin-right:20px }
}
.optin .hint,.follow .hint,.restock .hint { font-size:12px; color:var(--muted) }
/* LIMITED（一点もの・レア・数量限定をまとめた札） */
.tag.limited { font:500 11px/1.4 var(--serif); letter-spacing:.24em; padding:3px 10px 3px 12px }
/* 作成募集（project.js） */
.pj-band { margin-top:72px; padding-bottom:72px; border-bottom:1px solid var(--line) }
.pj-band-head { display:flex; align-items:baseline; gap:24px; flex-wrap:wrap; margin-bottom:32px }
.pj-band-head h2 { font:400 clamp(36px,3.6vw,52px)/1 var(--serif); color:var(--indigo) }
.pj-band-head p { font-size:14px; color:var(--muted) }
.pj-band-head .text-link { margin-left:auto }
.pj-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px }
.pj-hero-list { grid-template-columns:1fr }
.pj-card { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px; align-items:start }
.pj-card h3 { font:400 22px/1.35 var(--serif); margin-top:10px }
.pj-card .sub { font-size:13px; color:var(--muted); margin-top:8px }
.pj-card .price { margin-top:14px; font-size:18px }
.pj-card:hover h3 { color:var(--indigo) }
.pj-card:hover .pj-visual img { transform:scale(1.03) }
.kicker { font:500 11px/1 var(--serif); letter-spacing:.24em; color:var(--muted); display:flex; gap:10px; align-items:center }
.price .only { display:block; font-size:11px; letter-spacing:.06em; color:var(--muted); font-weight:400; margin-top:4px }
.pj-visual { aspect-ratio:4/5; background:var(--plinth); overflow:hidden; display:grid; place-items:center; position:relative }
.pj-visual img { width:100%; height:100%; object-fit:cover; transition:transform 600ms var(--ease) }
.pj-visual[data-mode="cutout"] img,.pj-visual[data-mode="photo-fit"] img { object-fit:contain; width:78%; height:78% }
.pj-visual.type { background:var(--indigo); color:#fff; align-content:center; gap:14px; text-align:center }
.pj-visual.type span { font:400 clamp(34px,4vw,64px)/1 var(--serif); letter-spacing:-.01em }
.pj-visual.type small { font:500 10px/1 var(--sans); letter-spacing:.3em; text-transform:uppercase; opacity:.7 }
.pj-state { margin-top:18px }
.pj-state .bar { height:3px; background:var(--line); position:relative; overflow:hidden }
.pj-state .bar span { position:absolute; inset:0 auto 0 0; background:var(--indigo); transition:width 900ms var(--ease) }
.pj-state dl { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:14px 0 0 }
.pj-state dt { font-size:11px; color:var(--muted); letter-spacing:.06em }
.pj-state dd { margin:4px 0 0; font:400 26px/1 var(--serif); font-variant-numeric:tabular-nums }
.pj-state dd small { font:400 12px/1 var(--sans); color:var(--muted) }
.pj-label { margin-top:12px; font-size:13px; color:var(--indigo) }
.pj-detail { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr); gap:72px; padding-top:32px; align-items:start }
.pj-detail > .pj-visual { position:sticky; top:24px }
.price.big { font-size:24px }
.pj-how { list-style:none; margin:0; padding:0; display:grid; gap:0; border-top:1px solid var(--line); counter-reset:s }
.pj-how li { counter-increment:s; display:grid; grid-template-columns:2.4em 1fr; padding:14px 0; border-bottom:1px solid var(--line); font-size:12px; color:var(--muted) }
.pj-how li::before { content:counter(s,decimal-leading-zero); font:400 15px/1.3 var(--serif); color:var(--indigo); grid-row:span 2 }
.pj-how b { font-weight:500; color:var(--ink); font-size:14px }
.pj-assure { grid-template-columns:1fr; border:0 }
.pj-assure div,.pj-assure div+div { padding:12px 0; border-left:0; border-top:1px solid var(--line) }
.pj-closed { font-size:14px; color:var(--muted) }
.btn[disabled] { opacity:.45; cursor:not-allowed }
@media (max-width:900px) { .pj-list,.pj-detail { grid-template-columns:1fr; gap:40px } .pj-detail > .pj-visual { position:static } }
@media (max-width:760px) { .pj-card { grid-template-columns:120px 1fr; gap:16px } .pj-card .pj-state dd { font-size:20px } .pj-band-head .text-link { margin-left:0 } }
.pj-card .pj-visual.type span { font-size:clamp(26px,2.6vw,44px) }
@media (max-width:760px) { .pj-card .pj-visual.type span { font-size:22px } .pj-card .pj-visual.type small { display:none } .pj-band { margin-top:48px; padding-bottom:48px } }

/* 11-1b: measured 18px/16px inline links; retain the original text layout. */
body[data-page="index"] .assure .edit { padding-block:3px }
body[data-page="index"] .proto-note a,
body[data-page="legal"] .final .edit { padding-block:4px }
.steps:focus-visible { outline:2px solid var(--indigo); outline-offset:4px }

/* A5: text first on mobile; one object on the paper surface. */
.shop-hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:40px}.shop-hero .hero-copy{min-width:0;animation:hero-words 900ms cubic-bezier(.16,1,.3,1) both}
@media(max-width:760px){.shop-hero{grid-template-columns:minmax(0,1fr);gap:24px}.shop-hero .hero-copy{order:0}.shop-hero .product-hero{order:1}}
@media(prefers-reduced-motion:reduce){.shop-hero .hero-copy{animation:none!important;transform:none!important;opacity:1}}

/* Rotation photos share the plinth and overlap only during their fade. */
[data-rotation-photo][hidden]{display:none!important}