/* アシストアーチェリー ショップ。色・字・部品は公式サイト（assist-archery-web/src/styles/global.css）に合わせる */
:root {
  --brand: #4CAF50; --brand-vivid: #64DD17; --brand-pale: #C8E6C9;
  --brand-deep: #357B38; --brand-darker: #2C652E;
  --c-green: var(--brand-deep); --c-green-dark: var(--brand-darker); --c-green-light: var(--brand-pale);
  --c-accent: #EE7B1E; --c-accent-dark: #B0560D;
  /* 白い字を載せるボタンの地。公式サイトの --gold-solid と同じ（#EE7B1E とほぼ同じ見た目で、白い字との差 3.10）。
     3:1 で足りるのは大きい字（太字 18.66px 以上）だけなので、オレンジのボタンの字は 1.17rem（18.72px）にする（check_contrast.mjs・2026-10-31） */
  --c-accent-solid: #E77111;
  --c-text: #1c2620; --c-muted: #5c6b62; --c-line: #e2e8e4; --c-bg: #fff; --c-bg-soft: #f5f8f6;
  --c-warn-bg: #fff4e5; --c-warn: #8a4b00; --c-err: #b3261e;
  --font-base: "Noto Sans JP", system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
  --container: 1080px; --radius: 12px; --radius-sm: 8px;
  --shadow: 0 2px 8px rgba(20,50,35,.06), 0 8px 24px rgba(20,50,35,.06);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
/* 行頭の開きかっこ「（」を半角に詰める（公式サイトの global.css と同じ。Chrome・Edge 123〜。check_text.mjs の「行頭のかっこが詰まっていない」） */
body { margin: 0; font-family: var(--font-base); color: var(--c-text); background: var(--c-bg); line-height: 1.8; font-size: 16px; word-break: auto-phrase; line-break: strict; overflow-wrap: anywhere; text-wrap: pretty; text-spacing-trim: trim-start; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--c-green-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
:where(p) a { text-decoration: underline; text-underline-offset: 2px; }
h1, h2, h3 { line-height: 1.4; font-weight: 700; }
.container { width: min(100% - 40px, var(--container)); margin-inline: auto; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.btn { text-decoration: none !important; display: inline-flex; align-items: center; justify-content: center; gap: .4em; padding: .7em 1.3em; border-radius: 999px; font-weight: 700; background: var(--c-green); color: #fff; border: 2px solid var(--c-green); cursor: pointer; font: inherit; font-weight: 700; transition: background .15s, transform .05s; }
@media (hover: hover) { .btn:hover { background: var(--c-green-dark); border-color: var(--c-green-dark); text-decoration: none; } }   /* スマホは押したあと濃い色のまま残るので、ポインタのある画面だけ */
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: default; transform: none; }
.btn-accent { background: var(--c-accent-solid); border-color: var(--c-accent-solid); font-size: 1.17rem; }
@media (hover: hover) { .btn-accent:hover { background: var(--c-accent-dark); border-color: var(--c-accent-dark); } }
.btn-outline { background: #fff; color: var(--c-green-dark); }
@media (hover: hover) { .btn-outline:hover { background: var(--c-green-light); } }
.btn-lg { padding: .9em 2em; font-size: 1.05rem; width: 100%; }
.btn-accent.btn-lg { font-size: 1.17rem; }
/* 字を大きくした分、狭い幅では左右の余白を詰めて1行に収める（320px で「買い取りを申し込む」「お支払いへ進む（Square）」が2行に折れた） */
@media (max-width: 400px) { .btn-lg { padding-inline: 1em; } }
.btn-sm { padding: .35em .9em; font-size: .9rem; }
button.link { background: none; border: 0; color: var(--c-green-dark); text-decoration: underline; cursor: pointer; font: inherit; padding: .5em; white-space: nowrap; }

/* ヘッダー */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.95); backdrop-filter: blur(6px); border-bottom: 1px solid var(--c-line); border-top: 4px solid transparent; border-image: linear-gradient(90deg, var(--brand) 0%, var(--brand-vivid) 100%) 1; }
.stage-bar { background: var(--c-warn-bg); color: var(--c-warn); font-weight: 700; font-size: .9rem; text-align: center; padding: .4em .8em; }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 64px; }
.brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--c-green-dark); font-weight: 900; letter-spacing: .02em; padding: .25em 0; }
.brand:hover { text-decoration: none; }
.brand__en { font-size: 1.1rem; }
.brand__shop { font-size: .8rem; background: var(--c-green); color: #fff; border-radius: 6px; padding: .05em .5em; }
.nav { display: flex; align-items: center; gap: .2rem; }
.nav a { padding: .6em .7em; border-radius: var(--radius-sm); font-weight: 700; color: var(--c-text); }
.nav a:hover { background: var(--c-bg-soft); text-decoration: none; }
.nav a[aria-current="page"], .nav a.is-current { color: var(--c-green-dark); }
.nav__ext { color: var(--c-muted) !important; font-weight: 500 !important; }
.nav__cart { display: inline-flex; align-items: center; gap: .35em; position: relative; }
.nav__count { background: var(--c-accent-dark); color: #fff; font-size: .75rem; line-height: 1; padding: .3em .5em; border-radius: 999px; min-width: 1.6em; text-align: center; }
/* スマホでも店の名前を出す（マークと SHOP だけで、誰の店か分からなかった。2026-11-01 site-review）。幅を取らないよう2行で小さく */
@media (max-width: 719px) { .brand { gap: .4rem; } .brand__en { display: block; width: 5.2em; font-size: .75rem; line-height: 1.15; overflow-wrap: normal; word-break: normal; } }
.nav a { white-space: nowrap; }
.brand__shop { white-space: nowrap; }
@media (max-width: 639px) { .nav a { padding: .6em .5em; font-size: .95rem; } .nav__ext { display: none; } }
/* 狭いスマホ：390px で「商品一／覧」「SHO／P」と2行に折れていた（2026-10-31 測定）。カートは絵だけにし（読み上げは aria-label）、さらに狭いときは字を詰める */
/* カートの数の札は絵の上に載せる（幅を取ると、品物を入れたときだけ「SHOP」と「商品一覧」がくっついた・2026-11-01 360px） */
@media (max-width: 430px) { .nav__cart > span:not(.nav__count) { display: none; } .site-header__inner { gap: .5rem; } .nav__cart { position: relative; } .nav__count { position: absolute; top: 0; right: -.15rem; } }
@media (max-width: 520px) { .brand__shop { display: none; } }   /* 店の名前と並べると「商品一覧」に重なる（390px で実測） */
@media (max-width: 359px) { .nav a { padding: .6em .3em; font-size: .88rem; } .brand { gap: .3rem; } .brand img { width: 26px; height: 26px; } .site-header__inner { gap: .2rem; } .nav { gap: 0; } .nav a { font-size: .84rem; } .nav a:not(.nav__cart) { padding-inline: .35em; } }

/* 一覧 */
.hero { background: var(--c-bg-soft); padding: 2.2rem 0 1.8rem; border-bottom: 1px solid var(--c-line); }
.hero h1 { font-size: clamp(1.3rem, 3.5vw, 1.8rem); margin: 0 0 .5rem; color: var(--c-green-dark); }
.hero p { margin: 0; color: var(--c-muted); }
/* スマホでは最初の画面に商品が入るように、頭を詰める（360×800 で最初の商品が 740px の位置だった・2026-11-01） */
@media (max-width: 599px) { .hero { padding: 1.1rem 0 1rem; } .hero h1 { font-size: 1.2rem; margin-bottom: .35rem; } .hero p { font-size: .92rem; line-height: 1.6; } .hero__from { display: none; } }
.tabs { display: flex; gap: .4rem; flex-wrap: wrap; margin: 1rem 0 .5rem; }
.tab { padding: .3em .85em; min-height: 40px; display: inline-flex; align-items: center; border-radius: 999px; border: 1px solid var(--c-line); background: #fff; font-weight: 700; }
.tab:hover { text-decoration: none; background: var(--c-bg-soft); }
.tab.is-active { background: var(--c-green); color: #fff; border-color: var(--c-green); }
.count { color: var(--c-muted); font-size: .95rem; margin: 0 0 .8rem; }
.list-title { font-size: clamp(1.25rem, 3.5vw, 1.6rem); margin: 1.4rem 0 0; color: var(--c-green-dark); }
.finder { margin: .6rem 0 .9rem; }
.finder__q { display: flex; gap: .5rem; }
.finder__q input { flex: 1; min-width: 0; font: inherit; padding: .55em .9em; min-height: 44px; border: 1px solid #b7c3bb; border-radius: 999px; background: #fff; }
.finder__q input::placeholder { color: var(--c-muted); opacity: 1; }
.finder__q .btn { min-height: 44px; flex-shrink: 0; }
.finder__sel { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; margin-top: .5rem; }
.finder__sel select { width: 100%; min-width: 0; font: inherit; font-size: .95rem; min-height: 44px; padding: .4em .5em; border: 1px solid #b7c3bb; border-radius: var(--radius-sm); background: #fff; }
@media (min-width: 720px) {
  .finder { display: flex; gap: 1rem; align-items: center; }
  .finder__q { flex: 1; }
  .finder__sel { margin-top: 0; flex: 0 0 24rem; }
}
.count { color: var(--c-muted); font-size: .95rem; margin: 0 0 .8rem; }
.count__clear { display: inline-block; margin-left: .8em; padding: .55em 0; margin-block: -.55em; text-decoration: underline; text-underline-offset: 2px; }
/* 商品の並び。スマホは横長の1列（写真＋名前と値段）。
   本番の商品名は中央23字・最長60字で、2列（字の入る幅 約110px＝7字）では名前が最大8行になる（2026-11-01 測定）。
   minmax(0, …) は、長い語で列が広がって画面からはみ出すのを防ぐ（1fr だと 360px で右の列が画面の外に出た） */
.grid { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; gap: .75rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } }
@media (min-width: 720px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem 1rem; } }
@media (min-width: 960px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.6rem 1.4rem; } }
.card a { display: grid; grid-template-columns: 34% minmax(0, 1fr); color: inherit; border-radius: var(--radius); overflow: hidden; background: #fff; border: 1px solid var(--c-line); height: 100%; transition: box-shadow .15s, transform .15s; }
.card a:hover { text-decoration: none; box-shadow: var(--shadow); transform: translateY(-2px); }
.card__img { position: relative; aspect-ratio: 1; background: var(--c-bg-soft); align-self: start; }
/* スマホの横長のカード：名前が4行になっても写真の下に白い帯を出さない。aspect-ratio のまま高さを伸ばすと幅も伸びて字に重なるので（2026-11-01 画面で確認）、正方形の下限は ::before で作る */
@media (max-width: 599px) {
  .card__img { aspect-ratio: auto; align-self: stretch; }
  .card__img::before { content: ''; display: block; padding-top: 100%; }
  .card__img img, .card__img .noimg { position: absolute; inset: 0; aspect-ratio: auto; }
}
.card__tag { margin: 0 0 .1rem; font-size: .8rem; font-weight: 700; color: var(--c-green-dark); }
.card__img img { width: 100%; height: 100%; object-fit: cover; }
.card.is-soldout .card__img img { opacity: .45; }
.soldout { position: absolute; inset: auto 0 0 0; background: rgba(28,38,32,.85); color: #fff; text-align: center; font-weight: 700; padding: .3em; }
.card__body { padding: .6rem .8rem .7rem; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; }
.card__name { font-size: .95rem; margin: 0 0 .4rem; font-weight: 500; line-height: 1.5; overflow-wrap: anywhere; }
/* 320px：11字のカタカナ語（センタースタビライザー）が1行に入る大きさ */
@media (max-width: 359px) { .card__name { font-size: .88rem; } }
/* 値段はカードの下端にそろえる（名前の長さで上下しない）。「税込」は値段のすぐ横で、折り返さない */
.card__price { margin: 0; font-weight: 700; font-size: 1.05rem; line-height: 1.4; white-space: nowrap; }
.card__price small { font-weight: 500; color: var(--c-muted); font-size: .78rem; margin-left: .4em; }
@media (min-width: 600px) {
  .card a { display: flex; flex-direction: column; }
  .card__img { align-self: stretch; }
  .card__body { flex: 1; padding: .7rem .8rem .9rem; }
}
.pager { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .35rem; margin: 0 0 3rem; }
.pager__a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 .5em; border: 1px solid var(--c-line); border-radius: var(--radius-sm); background: #fff; font-weight: 700; }
.pager__a:hover { text-decoration: none; background: var(--c-bg-soft); }
.pager__a.is-current { background: var(--c-green); border-color: var(--c-green); color: #fff; }
.pager__step { padding: 0 .9em; }
.pager__gap { color: var(--c-muted); padding: 0 .1em; }
.empty { color: var(--c-muted); padding: 1.2rem 0 2rem; }
.empty p { margin: 0 0 .7rem; }
.empty__head { font-weight: 700; color: var(--c-text); }
.empty .tabs { margin: 0 0 1rem; }
.finder__sel[hidden] { display: none; }
.item__info h1 { text-wrap: balance; }
.noimg { display: grid; place-items: center; width: 100%; height: 100%; color: var(--c-muted); font-size: .9rem; aspect-ratio: 1; background: var(--c-bg-soft); }

/* 商品ページ */
/* パンくず・単独で置いたリンクは、押せる高さを 40px 以上にする（check_mobile.mjs。21〜24px だった・2026-10-31）。
   広げた分を外の余白で打ち消し、字の位置とページの高さは前と同じ */
.crumbs { font-size: .9rem; color: var(--c-muted); margin: calc(1.2rem - .5em) 0; }
.crumbs a { display: inline-block; padding: .5em 0; }
/* 単独のリンクは、広げた分をリンク自身の負の余白で打ち消す（段落の余白は前の表・箇条の余白と重なって効かないため） */
.solo a { display: inline-block; padding: .36em 0; margin-block: -.36em; }
.item__cols { display: grid; gap: 2rem; grid-template-columns: 1fr; margin-bottom: 2rem; }
@media (min-width: 800px) { .item__cols { grid-template-columns: 1.1fr 1fr; align-items: start; } }
.gallery__main { aspect-ratio: 1; background: var(--c-bg-soft); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--c-line); }
.gallery__main img { width: 100%; height: 100%; object-fit: contain; }
.item__cols > * { min-width: 0; }   /* 写真の横送りの幅で、列ごと広がらないように */
.gallery__zoom { display: block; position: relative; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.gallery__hint { position: absolute; right: .5rem; bottom: .5rem; padding: .2em .7em; border-radius: 999px; background: rgba(0,0,0,.68); color: #fff; font-size: .8rem; line-height: 1.5; pointer-events: none; }
.gallery__thumbs { display: flex; gap: .5rem; margin-top: .6rem; flex-wrap: wrap; }
/* スマホは1段の横送り。4〜5段に折れて、商品名と値段が1画面目に入らなかった（名前の上端 y=917 @844px）。端の写真が切れて見えるので、続きがあると分かる */
@media (max-width: 799px) { .gallery__thumbs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .2rem; } .thumb { flex: 0 0 72px; } }
.zoom { width: 100vw; max-width: 100vw; height: 100vh; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: #111; color: #fff; overflow: hidden; }
.zoom[open] { display: flex; flex-direction: column; }
.zoom::backdrop { background: #111; }
.zoom__bar, .zoom__foot { flex: none; display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .4rem .7rem; min-height: 56px; }
.zoom__stage { flex: 1; min-height: 0; overflow: auto; display: flex; }
.zoom__stage img { margin: auto; max-width: 100%; max-height: 100%; object-fit: contain; cursor: zoom-in; }
.zoom__stage.is-large img { max-width: none; max-height: none; cursor: zoom-out; }
.zoom__nav { display: flex; gap: .5rem; }
.zoom__btn { min-width: 44px; min-height: 44px; padding: .3em .9em; font: inherit; color: #fff; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.45); border-radius: var(--radius-sm); cursor: pointer; }
.thumb { width: 72px; height: 72px; padding: 0; border: 2px solid var(--c-line); border-radius: var(--radius-sm); overflow: hidden; background: #fff; cursor: pointer; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb.is-active { border-color: var(--c-green); }
.item__info h1 { font-size: clamp(1.25rem, 3vw, 1.6rem); margin: 0 0 .6rem; }
.item__price { font-size: 1.7rem; font-weight: 700; margin: 0 0 .3rem; }
.item__price small { font-size: .85rem; font-weight: 500; color: var(--c-muted); margin-left: .3em; }
.item__ship { margin: 0 0 .4rem; color: var(--c-green-dark); font-weight: 700; font-size: .95rem; }
.stock { margin: 0 0 1rem; color: var(--c-accent-dark); font-weight: 700; }
.buy { background: var(--c-bg-soft); border-radius: var(--radius); padding: 1.2rem; margin: 1rem 0; display: grid; gap: .9rem; }
.field { display: grid; gap: .3rem; align-content: start; }   /* 同じ段の欄の高さが違うと、余りが欄に配られて形がそろわなかった（電話番号 65px・郵便番号 50px） */
.field--err select, .field--err input, .field--err textarea { border-color: var(--c-err); }
.field__err { color: var(--c-err); font-weight: 700; font-size: .9rem; }
.field > span { font-weight: 700; font-size: .95rem; }
.field > span em { font-style: normal; color: var(--c-accent-dark); font-size: .8rem; margin-left: .4em; }
.field input, .field select, .field textarea { font: inherit; padding: .6em .8em; border: 1px solid #b7c3bb; border-radius: var(--radius-sm); background: #fff; min-height: 44px; width: 100%; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 3px solid rgba(76,175,80,.35); border-color: var(--c-green); }
.field input, .field select { min-height: 50px; }   /* 同じ段の入力欄と選ぶ欄の高さをそろえる（都道府県 47px・市区町村 50px） */
/* 誤りの欄は枠も赤く。176行の指定は同じ強さの .field input に負けて、緑や灰色のままだった（2026-11-02 site-review） */
.field.field--err input, .field.field--err select, .field.field--err textarea { border-color: var(--c-err); background: #fffafa; }
.field.field--err input:focus, .field.field--err select:focus, .field.field--err textarea:focus { border-color: var(--c-err); outline-color: rgba(179,38,30,.3); }
.field--qty input { width: 6em; }
.hint { color: var(--c-muted); font-size: .85rem; }
.added { margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem .8rem; padding: .6rem .8rem; background: #C8E6C9; border-radius: var(--radius-sm); color: var(--c-green-dark); font-weight: 700; }
.added[hidden] { display: none; }
.added span::before { content: '✓ '; }
.added .btn { min-height: 44px; }
.item__lead { margin: 0 0 1rem; padding: .6rem .8rem; background: var(--c-bg-soft); border-left: 4px solid var(--c-accent); border-radius: var(--radius-sm); }
.item__lead strong { display: block; font-size: .85rem; color: var(--c-accent-dark); }
.pname__lead { color: var(--c-accent-dark); font-weight: 700; }
.sku { color: var(--c-muted); font-size: .85rem; }
.soldout-note { background: var(--c-bg-soft); border-radius: var(--radius); padding: 1rem; font-weight: 700; color: var(--c-muted); }
.item__desc, .item__notes { margin: 2rem 0; }

/* 文章ページ */
.prose { max-width: 760px; }
.item__desc p { margin: 0 0 .2rem; }
.item__desc p.gap { height: .9rem; margin: 0; }
/* 商品説明の中のリンクと、カートの商品名：押せる高さを 40px に（字の位置は動かない。行の中の上下の余白は行の高さに影響しない） */
.item__desc a, .pname a { padding-block: .5em; }
.buy-err { margin: 0; color: var(--c-err); font-weight: 700; }
.pname__detail { font-size: .9rem; color: var(--c-muted); overflow-wrap: anywhere; }
.page { padding: 1.5rem 0 3rem; }
.page.narrow { max-width: 480px; }
.prose h1 { font-size: clamp(1.5rem, 4vw, 2rem); margin: 0 0 1rem; padding-bottom: .5rem; border-bottom: 3px solid var(--c-green); }
.prose h2 { font-size: 1.25rem; margin: 2rem 0 .8rem; padding-left: .6rem; border-left: 5px solid var(--c-green); }
.prose ul { padding-left: 1.4rem; }
.prose li { margin: .3rem 0; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.2rem 0; font-size: .95rem; }
.prose th, .prose td { border: 1px solid var(--c-line); padding: .55em .7em; text-align: left; vertical-align: top; }
.prose th { background: var(--c-green-light); width: 11em; }
.warn { background: var(--c-warn-bg); color: var(--c-warn); padding: .8rem 1rem; border-radius: var(--radius-sm); }
.error { background: #fdecea; color: var(--c-err); padding: .8rem 1rem; border-radius: var(--radius-sm); font-weight: 700; }
.preview-bar { background: #fff4e5; color: var(--c-warn); border: 1px solid #f3d3a6; border-radius: var(--radius-sm); padding: .7rem 1rem; margin-top: 1rem; font-weight: 700; }

/* カート */
.cart { padding: 1.5rem 0 3rem; }
.cart h1, .complete h1 { font-size: clamp(1.4rem, 4vw, 1.8rem); margin: 0 0 1rem; }
.cart-table { width: 100%; border-collapse: collapse; margin-bottom: 2rem; }
.cart-table th, .cart-table td { padding: .7em .5em; border-bottom: 1px solid var(--c-line); text-align: left; vertical-align: middle; }
.cart-table th { font-size: .85rem; color: var(--c-muted); font-weight: 700; }
.cart-table .num { text-align: right; white-space: nowrap; }
.cart-table input[type=number] { width: 4.5em; padding: .4em; font: inherit; border: 1px solid #b7c3bb; border-radius: var(--radius-sm); text-align: right; min-height: 40px; }
.pname__in { display: flex; gap: .8rem; align-items: center; }   /* td そのものを flex にすると、罫線が隣の欄と約1px段違いになった */
.pname img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius-sm); flex-shrink: 0; }
.gone { color: var(--c-err); }
.checkout h2 { font-size: 1.2rem; margin: 1.5rem 0 1rem; padding-left: .6rem; border-left: 5px solid var(--c-green); }
.form-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .form-grid { grid-template-columns: 1fr 1fr; } .field--wide { grid-column: 1 / -1; } }
/* 姓と名は、スマホでも1段に並べる。縦に積むと「お名前」のまとまりに見えない。PC では下の段の2列と線をそろえる */
.name-pair { grid-column: 1 / -1; display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.totals { margin: 2rem 0 1rem; border-top: 2px solid var(--c-line); max-width: 420px; margin-left: auto; }
.totals > div { display: flex; justify-content: space-between; padding: .5em 0; border-bottom: 1px solid var(--c-line); }
.totals small { color: var(--c-muted); font-weight: 400; }
.totals__grand { font-size: 1.15rem; }
.totals__grand strong { font-size: 1.4rem; }
.pay-note { color: var(--c-muted); font-size: .9rem; }
/* 狭い幅のカート：見出しの行を消すと「¥75,000」が2つ並んで、単価か小計か分からなかった。行ごとに名前を付ける（2026-11-01） */
@media (max-width: 599px) {
  .cart-table thead { display: none; }
  .cart-table tr { display: block; padding: .8rem 0; border-bottom: 1px solid var(--c-line); }
  .cart-table td { display: block; border: 0; padding: 0; }
  .cart-table td.pname { margin-bottom: .5rem; }
  .cart-table td.num { display: flex; justify-content: space-between; align-items: center; min-height: 40px; }
  .cart-table td.num::before { content: attr(data-label); color: var(--c-muted); font-size: .9rem; }
  .cart-table td.cart-sub { font-weight: 700; }
  .cart-table td.rm { text-align: right; }
  .cart-table .gone { margin-bottom: .3rem; }
}

/* 完了 */
.complete { padding: 1.5rem 0 3rem; max-width: 720px; }
.order-summary { display: grid; grid-template-columns: 9em 1fr; gap: .6rem 1rem; background: var(--c-bg-soft); border-radius: var(--radius); padding: 1.2rem; margin: 1.5rem 0; }
.order-summary dt { font-weight: 700; color: var(--c-muted); }
.order-summary dd { margin: 0; }
.order-summary ul { margin: 0; padding-left: 1.2rem; }
@media (max-width: 480px) { .order-summary { grid-template-columns: 1fr; gap: .1rem; } .order-summary dd { margin-bottom: .6rem; } }

/* 確認ページ */
.admin .adm-meta { color: var(--c-muted); font-size: .95rem; }
.admin .inline { display: inline; }
.admin h2 { font-size: 1.2rem; margin: 2rem 0 .6rem; padding-left: .6rem; border-left: 5px solid var(--c-green); }
.done { background: var(--c-green-light); color: var(--c-green-dark); padding: .7rem 1rem; border-radius: var(--radius-sm); font-weight: 700; }
.adm-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.adm-item { display: grid; grid-template-columns: 96px 1fr auto; gap: 1rem; align-items: center; border: 1px solid var(--c-line); border-radius: var(--radius); padding: .8rem; }
.adm-list--compact .adm-item { grid-template-columns: 56px 1fr auto; padding: .5rem .8rem; }
.adm-item__img img, .adm-item__img .noimg { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-sm); }
.adm-item__body small { color: var(--c-muted); }
.adm-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.adm-table th, .adm-table td { border-bottom: 1px solid var(--c-line); padding: .5em .5em; text-align: left; vertical-align: top; }
.adm-table .num { text-align: right; white-space: nowrap; }
.login { max-width: 360px; display: grid; gap: 1rem; }
@media (max-width: 599px) { .adm-item { grid-template-columns: 72px 1fr; } .adm-item__act { grid-column: 1 / -1; } }

/* フッター */
.site-footer { background: var(--c-green-dark); color: #dfeee6; margin-top: 4rem; }
.site-footer a { color: #fff; }
.site-footer li a { display: inline-block; padding: .55em 0; }
.site-footer__inner { display: grid; gap: 2rem; padding: 3rem 0 2rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .site-footer__inner { grid-template-columns: 1.4fr 1fr 1fr; } }
.site-footer h3 { color: #fff; font-size: 1rem; margin: 0 0 .8rem; }
.site-footer p { margin: 0; font-size: .95rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin: .4em 0; font-size: .95rem; }
.site-footer__copy { border-top: 1px solid rgba(255,255,255,.15); padding: 1rem 0; font-size: .95rem; text-align: center; color: #bcd6c8; }

/* ご利用案内・特定商取引法の表記（2026-10-31 現行ショップの文面を取り込み） */
.nowrap { white-space: nowrap; }
/* 語のまとまり（src/keep-words.mjs が差し込む。公式サイトと同じ） */
w-k { white-space: nowrap; }
/* 欄の中の小見出し（特商法の「中古品」「新品」、買い取りの受付後の「発送先」）。前は <br> で区切っていて、
   改行の検査が「先頭に短い語だけの行」とみなした。<small> は外側の <span class="cell-h"> を箱にして、字の位置を前と同じにする
   （<small> そのものを箱にすると、本文の行に揃っていた字が 2px 上がった。2026-11-01 実測） */
.cell-h { display: block; }
td .cell-h ~ .cell-h { margin-top: .6em; }   /* 特商法の「新品」の上を少し空け、「中古品」の話と分ける（2026-11-01 site-review） */
.policy-list { margin: 0 0 1rem; }
.policy-list dt { font-weight: 700; margin-top: 1rem; color: var(--c-green-dark); }
.policy-list dd { margin: .3rem 0 0; }
.faq dt { font-weight: 700; margin-top: 1.4rem; padding-left: 1.6em; text-indent: -1.6em; }
.faq dt::before { content: "Q."; display: inline-block; width: 1.6em; text-indent: 0; color: var(--c-green); }
.faq dd { margin: .4rem 0 0; padding-left: 1.6em; }
.faq dd p { margin: 0 0 .4rem; }
.legal th { width: 12em; }
@media (max-width: 560px) { .legal th, .legal td { display: block; width: auto; } .legal th { border-bottom: 0; } }
/* カートの最終確認（特定商取引法 12条の6：引き渡し時期・返品・支払いを注文の直前に見せる） */
.confirm-note { margin: 1.5rem 0 1rem; padding: 1rem 1.2rem; background: var(--c-bg-soft); border: 1px solid var(--c-line); border-radius: var(--radius-sm); font-size: .92rem; }
.confirm-note h2 { margin: 0 0 .6rem !important; font-size: 1rem !important; }
.confirm-note dl { display: grid; grid-template-columns: 5em 1fr; gap: .3rem .8rem; margin: 0; }
.confirm-note dt { font-weight: 700; }
.confirm-note dd { margin: 0; }
.confirm-note p { margin: .6rem 0 0; }
.confirm-note p a { margin-right: 1em; }
.confirm-note p.solo { margin: calc(.6rem - .46em) 0 -.46em; }
/* カートの3つのリンクは、狭い幅で行が分かれる。行どうしで押せる範囲が重ならないよう、ここは行の間を広げる（1行に収まる幅では位置は前と同じ） */
.confirm-note .solo a { padding: .46em 0; margin-block: 0; }
@media (max-width: 560px) { .confirm-note dl { grid-template-columns: 1fr; gap: 0; } .confirm-note dd { margin-bottom: .5rem; } }
.mail-preview { white-space: pre-wrap; word-break: break-all; background: #fafafa; border: 1px solid var(--c-line); border-radius: var(--radius-sm); padding: 1rem 1.2rem; font-family: inherit; font-size: .92rem; line-height: 1.75; max-width: 46rem; }

/* 現行ショップから移したページ（買い取り・ボウスリング・学校向け。2026-10-31） */
.info .lead { font-size: 1.1rem; font-weight: 700; color: var(--c-green-dark); margin: 0 0 1.2rem; }
.prose h2 small { font-size: .85rem; font-weight: 500; color: var(--c-muted); }
.steps { list-style: none; counter-reset: step; display: grid; grid-template-columns: 1fr; gap: .6rem; margin: 0 0 1.2rem; padding: 0 !important; }
@media (min-width: 640px) { .steps { grid-template-columns: 1fr 1fr; } }
.steps li { counter-increment: step; position: relative; margin: 0 !important; background: var(--c-bg-soft); border: 1px solid var(--c-line); border-radius: var(--radius-sm); padding: .8rem .9rem .8rem 3.1rem; display: grid; gap: .1rem; align-content: start; }
.steps li::before { content: counter(step); position: absolute; left: .8rem; top: .8rem; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--c-green); color: #fff; font-weight: 700; display: grid; place-items: center; font-size: .95rem; line-height: 1; }
.steps b { color: var(--c-green-dark); }
.steps span { font-size: .9rem; line-height: 1.6; }
.to-form { margin: 0 0 .5rem; }
.address-card { background: var(--c-bg-soft); border-left: 5px solid var(--c-green); border-radius: var(--radius-sm); padding: .9rem 1.2rem; margin: .8rem 0; }
.address-card p { margin: 0; }
.address-card small { color: var(--c-muted); }
.policy-list--wide dd { margin-bottom: .2rem; }

/* 買い取りのフォーム */
.bb { margin-top: 1rem; }
.bb__form { background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); padding: 1.2rem; display: grid; gap: 1rem; }
@media (min-width: 640px) { .bb__form { padding: 1.6rem 1.8rem; } }
.bb__form > .hint { margin: 0; }
.bb .field label span { font-weight: 700; font-size: .95rem; }
.bb .field label em { font-style: normal; color: #fff; background: var(--c-accent-dark); font-size: .8rem; padding: .05em .45em; border-radius: 4px; margin-left: .4em; vertical-align: .1em; }
.bb .field label i { font-style: normal; color: var(--c-muted); font-size: .75rem; margin-left: .4em; }
.bb .field .hint { line-height: 1.6; }
.bb .form-grid { align-items: start; }
.bb .field { align-content: start; }
.bb .btn-lg { max-width: 360px; justify-self: center; }
.bb .field textarea { resize: vertical; }
@media (min-width: 640px) { .field--narrow input { max-width: 8em; } }
.field__err { margin: 0; color: var(--c-err); font-size: .9rem; font-weight: 700; }
/* 手元で組み立てる案内には語のまとまりの印が付かない。語の区切りの効かないブラウザでも「…入れてく／ださい。」と折れないように */
#checkout .field__err { word-break: keep-all; overflow-wrap: anywhere; }   /* カートの案内はどれも短い。買い取りフォームの長い案内に当てると、1語が行より長くなって語の途中で割れる */
.field [aria-invalid="true"]:focus { border-color: var(--c-err); outline-color: rgba(179,38,30,.3); }
.field [aria-invalid="true"] { border-color: var(--c-err); background: #fffafa; }
.bb__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; white-space: nowrap; }   /* nowrap：幅1pxの中で1字ずつ折れ、改行の検査が大量に拾っていた（公式の .gf__hp と同じ） */
.bb__ts { background: var(--c-bg-soft); border-radius: var(--radius-sm); padding: .9rem 1rem; }
.bb__ts .hint { margin: .2rem 0 .6rem; display: block; }
/* 確認の部品（Cloudflare Turnstile）は幅300pxより縮まない。フォームの中の欄は列の幅まで縮めてよい（min-width: 0）。
   これが無いと、320〜390px で灰色の枠ごと白いフォームの外へ押し出され、ページが横に 372px まで広がっていた（2026-10-31・check_overflow で発見）。
   公式サイト（landing.css の .gf__ts）と同じ直し方：列が300pxより狭い幅では部品を枠の中央に置き、さらに狭い幅では縮める。
   段階は、部品の見た目が灰色の枠の内側に収まる幅（300×倍率 ≦ 画面の幅 − 94.4px）から決めた。実測で枠との空きは左右 5.8〜18.8px（320〜410px）。check_form.mjs が見張る */
.bb__form > * { min-width: 0; }
.bb__ts .cf-turnstile { min-height: 65px; max-width: 400px; }
@media (max-width: 410px) { .bb__ts .cf-turnstile { width: 300px; max-width: none; margin-left: calc((100% - 300px) / 2); transform-origin: center top; } }
@media (max-width: 394px) { .bb__ts .cf-turnstile { transform: scale(.92); margin-bottom: -5px; } }
@media (max-width: 370px) { .bb__ts .cf-turnstile { transform: scale(.84); margin-bottom: -10px; } }
@media (max-width: 346px) { .bb__ts .cf-turnstile { transform: scale(.76); margin-bottom: -16px; } }
.bb__label { margin: 0; font-weight: 700; font-size: .95rem; }
.bb__alert p { margin: 0; }
.bb__fine { margin: 0; font-size: .85rem; color: var(--c-muted); line-height: 1.7; }
.bb__done { border: 2px solid var(--c-green); border-radius: var(--radius); padding: 1.5rem 1.2rem; text-align: center; outline: none; }
.bb__done h3 { margin: .4rem 0 .6rem; font-size: 1.25rem; color: var(--c-green-dark); }
.bb__done p { margin: 0 0 .7rem; }
.bb__done .address-card { text-align: left; display: inline-block; margin: .3rem auto 0; }
.bb__check { width: 3rem; height: 3rem; margin: 0 auto; border-radius: 50%; background: var(--c-green); color: #fff; font-size: 1.6rem; font-weight: 700; display: grid; place-items: center; }
.bb__id strong { font-size: 1.15rem; letter-spacing: .04em; }

/* ボウスリングの使い方：写真と文を左右に（スマホは上下） */
.howto { list-style: none; padding: 0 !important; margin: 0 0 1rem; display: grid; gap: 1.4rem; }
.howto__step { margin: 0 !important; display: grid; grid-template-columns: 1fr; gap: .7rem; align-items: center; }
@media (min-width: 640px) { .howto__step { grid-template-columns: 1fr 1fr; gap: 1.4rem; } }
.howto__imgs img { width: 100%; border-radius: var(--radius-sm); border: 1px solid var(--c-line); }
.howto__step--pair { grid-template-columns: 1fr; }
.howto__step--pair .howto__imgs { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.howto__text p { margin: 0 0 .5rem; }
.info-products h2 { font-size: 1.25rem; margin: 0 0 1rem; padding-left: .6rem; border-left: 5px solid var(--c-green); }
.grid--2 { max-width: 760px; }
@media (min-width: 600px) { .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }

/* 学校向け */
.photo-row { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin: 0 0 1.5rem; }
.photo-row img:first-child { grid-column: 1 / -1; }
@media (min-width: 640px) { .photo-row { grid-template-columns: repeat(3, 1fr); } .photo-row img:first-child { grid-column: auto; } }
.photo-row img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-sm); }
.set-photo { margin: 1rem 0; max-width: 480px; }
.set-photo img { width: 100%; border-radius: var(--radius-sm); }
.set-photo figcaption { font-size: .85rem; color: var(--c-muted); margin-top: .3rem; }
.set-items { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.5rem; margin: 0 0 1.5rem; word-break: keep-all; }
/* 2列で最後に1つだけ残る項目は、行の幅を全部使う（右の列は空いている）。320px の列（117px）に「初期チューニング」（128px）が入らず、
   「初期チューニン／グ（無料）」と割れていた（2026-11-01 check_text.mjs） */
@media (max-width: 639px) { .set-items li:last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (min-width: 640px) { .set-items { grid-template-columns: repeat(3, 1fr); } }
.set-items li { margin: .2rem 0 !important; }
.cta-box { background: var(--c-bg-soft); border-radius: var(--radius); padding: 1.4rem 1.2rem; text-align: center; margin: 2rem 0 0; }
.cta-box p { margin: 0 0 .7rem; }
.cta-box p:last-child { margin: 0; }
.cta-box .btn { min-width: min(14em, 100%); }   /* 320px で 262px のボタンが枠の内側（242px）から右へはみ出していた（2026-11-01 site-review） */

.site-footer__h3-2 { margin-top: 1.6rem !important; }
.keep { word-break: keep-all; }

/* 2026-11-02 site-review：ヘッダーのカート（320px で 30×39px だった）・写真の送りと拡大・カートの数量 */
.nav__cart { min-width: 44px; min-height: 44px; justify-content: center; }
.gallery__count { position: absolute; left: .5rem; bottom: .5rem; padding: .2em .7em; border-radius: 999px; background: rgba(0,0,0,.68); color: #fff; font-size: .8rem; line-height: 1.5; pointer-events: none; }
.gallery__main { touch-action: pan-y pinch-zoom; }
html.is-zoom { overflow: hidden; }
.zoom__stage { position: relative; overscroll-behavior: contain; }
.zoom__stage:not(.is-large) { touch-action: pan-y pinch-zoom; }
.zoom__stage.is-large img { flex: none; height: auto; }
@media (min-width: 800px) {
  .gallery__thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
  .thumb { width: 100%; height: auto; aspect-ratio: 1; }
}
.qty-box { display: inline-flex; flex-direction: column; align-items: flex-end; gap: .25rem; }
.qty-note { max-width: 15em; color: var(--c-err); font-size: .85rem; font-weight: 700; line-height: 1.4; text-align: right; white-space: normal; }
.cart-table input[readonly] { background: transparent; border-color: transparent; cursor: default; }
#postal-note { color: var(--c-err); font-weight: 700; white-space: pre-line; }
#checkout .field__err { white-space: pre-line; }
#checkout-error { white-space: pre-line; }
.empty .solo a.btn { display: inline-block; padding: .6em 1.2em; margin-block: 0; text-align: center; }
.addr-skip { grid-column: 1 / -1; justify-self: start; min-height: 44px; padding: .5em 1em; font-size: .9rem; margin-top: -.3rem; }
.addr-skip[hidden] { display: none; }
#mainimg.is-loading { opacity: .45; }
.pname__lead .nowrap { display: inline-block; }
@media (max-width: 640px) { .cart-table td.num:has(.qty-note) { align-items: flex-start; } .cart-table td.num:has(.qty-note)::before { line-height: 40px; } }