/* 個人向けの売り場（la-stella.net）の画面。色は base.css の変数を使う（暗い表示にも合わせる）。デザインは後で差し替えられるよう、ここにまとめる */
body.shop { line-height: 1.75; }
.shop a { color: inherit; }
.shop-wrap { max-width: 1080px; margin: 0 auto; padding: 0 16px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.nowrap { white-space: nowrap; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }

/* ヘッダー: 送料無料の案内の帯・ロゴ・メニュー */
.shop-notice { background: var(--accent); color: #fff; text-align: center; font-size: 13px; padding: 6px 16px; letter-spacing: .02em; }
.shop-header { border-bottom: 1px solid var(--line); background: var(--card); position: sticky; top: 0; z-index: 10; }
.shop-header .shop-wrap { display: flex; align-items: center; gap: 16px; min-height: 60px; flex-wrap: wrap; }
.shop-brand { font-size: 22px; font-weight: 600; letter-spacing: .04em; text-decoration: none; margin-right: auto; }
.shop-brand small { font-size: 11px; color: var(--muted); font-weight: 400; margin-left: 8px; letter-spacing: .08em; }
.shop-nav { display: flex; gap: 4px; flex-wrap: wrap; }
.shop-nav a { text-decoration: none; padding: 6px 10px; border-radius: 8px; font-size: 14px; }
.shop-nav a:hover, .shop-nav a[aria-current="page"] { background: var(--bg); }
.count { display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 4px; border-radius: 10px; background: var(--accent); color: #fff; font-size: 12px; text-align: center; line-height: 20px; }
/* 会員登録のボタン（ログインしていないお客様だけ）と、卸売・法人のお客様の入口（2026-11-02） */
.shop-nav a.nav-register { background: var(--accent); color: #fff; font-weight: 600; }
.shop-nav a.nav-register:hover, .shop-nav a.nav-register[aria-current="page"] { background: var(--fg); color: var(--bg); }
.shop-nav a.nav-wholesale { color: var(--muted); }

/* トップの案内の区画: 会員登録（ログインしていないお客様だけ）と卸売・法人のお客様（2026-11-02） */
.invite { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.invite > section { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 8px; }
.invite h2 { font-size: 18px; margin: 0; }
.invite .eyebrow { color: var(--accent); font-size: 12px; letter-spacing: .12em; margin: 0; }
.invite p { margin: 0; color: var(--muted); font-size: 14px; }
.invite ul { margin: 0; padding-left: 1.2em; font-size: 14px; }
.invite .act { margin-top: auto; padding-top: 8px; }
.invite .act .small { display: block; margin-top: 6px; }

/* ページ下: 営業日の案内・表示のリンク */
.shop-footer { margin-top: 64px; border-top: 1px solid var(--line); background: var(--card); padding: 32px 0 40px; font-size: 13px; color: var(--muted); }
.shop-footer .cols { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; }
.shop-footer h2 { font-size: 14px; color: var(--fg); margin: 0 0 8px; }
.shop-footer ul { margin: 0; padding-left: 1.2em; }
.shop-footer nav a { display: inline-block; margin: 0 16px 6px 0; }
.shop-footer .copy { margin-top: 24px; font-size: 12px; }

main.shop-main { padding-top: 24px; min-height: 50vh; }
main.shop-main h1 { font-size: 22px; margin: 8px 0 16px; }
.section { margin: 40px 0; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.section-head h2 { font-size: 18px; margin: 0; }
.section-head a { font-size: 13px; }
.breadcrumb { font-size: 13px; color: var(--muted); margin: 0 0 8px; }

/* 季節の新作バナー */
.banner { display: grid; grid-template-columns: 1.1fr 1fr; align-items: stretch; border-radius: 16px; overflow: hidden; background: var(--card); border: 1px solid var(--line); text-decoration: none; }
.banner .img { background: var(--bg); min-height: 280px; background-size: cover; background-position: center; }
.banner .txt { padding: 32px; display: grid; align-content: center; gap: 8px; }
.banner .eyebrow { color: var(--accent); font-size: 12px; letter-spacing: .12em; margin: 0; }
.banner h2 { font-size: 26px; margin: 0; }
.banner p { margin: 0; color: var(--muted); }
.banner .go { margin-top: 12px; font-size: 14px; color: var(--accent); font-weight: 600; }

/* 商品のカード */
.grid-products { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px 16px; }
.pcard { text-decoration: none; display: grid; gap: 6px; position: relative; }
.pcard .ph { aspect-ratio: 1 / 1; border-radius: 12px; background: var(--card); border: 1px solid var(--line); overflow: hidden; display: grid; place-items: center; color: var(--muted); font-size: 12px; }
.pcard .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pcard .name { font-size: 14px; line-height: 1.5; }
.pcard .price { font-weight: 600; font-variant-numeric: tabular-nums; }
.pcard .price small { font-weight: 400; color: var(--muted); font-size: 11px; margin-left: 2px; }
.pcard .meta { font-size: 12px; color: var(--muted); }
.pcard .rank { position: absolute; top: 8px; left: 8px; width: 28px; height: 28px; border-radius: 50%; background: var(--fg); color: var(--bg); display: grid; place-items: center; font-size: 13px; font-weight: 700; }
.soldout { display: inline-block; font-size: 11px; padding: 0 6px; border-radius: 4px; background: var(--line); color: var(--muted); }

/* お知らせ */
.news { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.news li { padding: 12px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 7em 1fr; gap: 12px; }
.news time { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.news p { margin: 4px 0 0; font-size: 14px; color: var(--muted); white-space: pre-wrap; }

/* 一覧の絞り込み */
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 20px; }
.filters select, .filters input { width: auto; padding: 6px 10px; font-size: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; text-decoration: none; background: var(--card); }
.chip[aria-current="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }

/* 商品ページ */
.pdp { display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px; align-items: start; }
.gallery .main { aspect-ratio: 1 / 1; border-radius: 16px; overflow: hidden; background: var(--card); border: 1px solid var(--line); display: grid; place-items: center; color: var(--muted); }
.gallery .main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery .thumbs { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.gallery .thumbs button { width: 64px; height: 64px; padding: 0; margin: 0; border-radius: 8px; overflow: hidden; border: 2px solid transparent; background: var(--card); }
.gallery .thumbs button[aria-current="true"] { border-color: var(--accent); }
.gallery .thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdp h1 { font-size: 22px; margin: 0 0 4px; }
.pdp .price { font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; margin: 8px 0 0; }
.pdp .price small { font-size: 13px; font-weight: 400; color: var(--muted); margin-left: 4px; }
.pdp .points { font-size: 13px; color: var(--accent); margin: 2px 0 16px; }
.opt { margin: 16px 0; }
.opt h2 { font-size: 13px; color: var(--muted); font-weight: 400; margin: 0 0 6px; }
.opt .choices { display: flex; flex-wrap: wrap; gap: 8px; }
.opt .choices button { margin: 0; padding: 8px 14px; min-width: 56px; border-radius: 8px; border: 1px solid var(--line); background: var(--card); color: var(--fg); font-size: 14px; }
.opt .choices button[aria-pressed="true"] { border-color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg); font-weight: 600; }
.opt .choices button.out { color: var(--muted); text-decoration: line-through; }
.stock { font-size: 14px; margin: 8px 0; }
.stock.low { color: var(--ng); }
.buy { display: flex; gap: 8px; align-items: center; margin-top: 12px; }
.buy input { width: 5em; text-align: right; }
.buy button { margin: 0; flex: 1; padding: 14px 18px; font-size: 16px; }
.policy { margin-top: 24px; padding: 16px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); font-size: 13px; }
.policy h2 { font-size: 14px; margin: 0 0 8px; }
.policy p, .policy ul { margin: 0 0 6px; }
.desc { margin-top: 24px; white-space: pre-wrap; font-size: 14px; }
.spec { display: grid; grid-template-columns: 7em 1fr; gap: 6px 12px; font-size: 14px; margin: 16px 0 0; }
.spec dt { color: var(--muted); }
.spec dd { margin: 0; white-space: pre-wrap; }

/* カート・入力・確認 */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 20px; margin-bottom: 16px; }
.card h2 { font-size: 16px; margin: 0 0 12px; }
.lines { width: 100%; border-collapse: collapse; font-size: 14px; }
.lines th { text-align: left; font-weight: 400; color: var(--muted); font-size: 12px; border-bottom: 1px solid var(--line); padding: 6px 4px; }
.lines td { border-bottom: 1px solid var(--line); padding: 10px 4px; vertical-align: middle; }
.lines .thumb { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; background: var(--bg); display: block; }
.lines input { width: 4.5em; text-align: right; padding: 6px; }
.lines button { margin: 0; padding: 4px 10px; font-size: 12px; }
.gap { padding: 10px 14px; border-radius: 8px; background: var(--bg); border: 1px dashed var(--accent); font-size: 14px; margin: 12px 0; }
.gap strong { color: var(--accent); }
.totals { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; max-width: 420px; margin: 16px 0 0 auto; font-size: 14px; }
.totals dt { color: var(--muted); }
.totals dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.totals .grand { font-size: 20px; font-weight: 700; color: var(--fg); }
.totals .note { grid-column: 1 / -1; text-align: right; font-size: 12px; color: var(--muted); }
.steps { display: flex; gap: 8px; list-style: none; padding: 0; margin: 0 0 20px; font-size: 14px; color: var(--muted); flex-wrap: wrap; }
.steps li[aria-current="step"] { color: var(--fg); font-weight: 600; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.form-grid .wide { grid-column: 1 / -1; }
.field label { display: block; font-size: 13px; margin: 12px 0 4px; color: var(--fg); }
.field label .req { color: var(--ng); font-size: 11px; margin-left: 4px; }
.field .hint { font-size: 12px; color: var(--muted); display: block; margin-top: 2px; }
select, textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--fg); font-size: 16px; font-family: inherit; }
textarea { min-height: 80px; }
.radio { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0; font-size: 14px; }
.radio input { width: auto; margin-top: 5px; }
.check { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0; font-size: 14px; }
.check input { width: auto; margin-top: 5px; }
.actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
button.sub, a.button.sub { background: transparent; color: var(--fg); border: 1px solid var(--line); }
a.button { display: inline-block; padding: 10px 18px; border-radius: 8px; background: var(--accent); color: #fff; text-decoration: none; font-size: 15px; }
button.big, a.button.big { padding: 14px 28px; font-size: 16px; }
/* LINE でログイン・登録・つなげる（2026-10-06）。色は LINE の緑。設定が入っているときだけ画面に出る */
a.button.line-btn, button.line-btn { display: block; width: 100%; box-sizing: border-box; text-align: center; background: #06c755; color: #fff; font-weight: 700; border: none; }
a.button.line-btn:hover, button.line-btn:hover { background: #05b34c; }
/* LINE の友だち追加（2026-10-15）: ボタンと、PC の画面の QR */
.line-friend { max-width: 320px; }
.line-qr { width: 132px; margin: 12px 0 4px; background: #fff; }
.line-qr svg { display: block; width: 100%; height: auto; }
.line-qr-note { margin: 0; }
.shop-footer .line-friend-footer { margin-top: 24px; }
.shop-footer .line-friend-footer p { margin: 0 0 8px; }
.or-line { display: flex; align-items: center; gap: 12px; margin: 16px 0 12px; color: var(--muted); font-size: 13px; }
.or-line::before, .or-line::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.notice { padding: 10px 14px; border-radius: 8px; font-size: 14px; margin: 0 0 12px; border: 1px solid var(--line); background: var(--card); }
.notice.ng { border-color: var(--ng); color: var(--ng); }
.notice.ok { border-color: var(--ok); color: var(--ok); }
.notice.warn { border-color: var(--accent); }
#card-container { min-height: 90px; margin-top: 8px; }
.kv { display: grid; grid-template-columns: 11em 1fr; gap: 6px 16px; margin: 0; font-size: 14px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.legal-body { font-size: 14px; }
.legal-body table { width: 100%; border-collapse: collapse; }
.legal-body th, .legal-body td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
.legal-body th { width: 13em; background: var(--bg); font-weight: 600; }
.legal-body h2 { font-size: 16px; margin: 24px 0 8px; }
.todo { color: var(--ng); font-weight: 600; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--fg); color: var(--bg); padding: 10px 18px; border-radius: 8px; font-size: 14px; z-index: 50; box-shadow: 0 4px 16px rgba(0,0,0,.2); }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 16px; flex-wrap: wrap; }
.tabs button { margin: 0; background: transparent; color: var(--muted); border-radius: 8px 8px 0 0; padding: 8px 14px; font-size: 14px; }
.tabs button[aria-selected="true"] { color: var(--fg); font-weight: 600; box-shadow: inset 0 -2px 0 var(--accent); }
.status { display: inline-block; font-size: 12px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line); white-space: nowrap; }
.status.shipped, .status.completed { border-color: var(--ok); color: var(--ok); }
.status.canceled { color: var(--muted); }
.pts { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; }
.plus { color: var(--ok); } .minus { color: var(--ng); }
.table-wrap { overflow-x: auto; }

@media (max-width: 900px) {
  .grid-products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .banner, .pdp, .shop-footer .cols, .invite { grid-template-columns: 1fr; }
  .banner .img { min-height: 220px; }
  .banner .txt { padding: 20px; }
  .grid-products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
  .form-grid { grid-template-columns: 1fr; }
  .kv { grid-template-columns: 1fr; gap: 0 0; }
  .kv dt { margin-top: 8px; }
  .news li { grid-template-columns: 1fr; gap: 0; }
  .legal-body th { width: auto; }
  .shop-brand small { display: none; }
}

/* ご注文の手続きの段階（1／3・2／3・3／3・最終確認） */
.stepper { list-style: none; margin: 0 0 4px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; counter-reset: s; }
.stepper li { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); position: relative; text-align: center; }
.stepper li::before { content: ""; position: absolute; top: 13px; left: calc(-50% + 16px); right: calc(50% + 16px); height: 2px; background: var(--line); }
.stepper li:first-child::before { display: none; }
.stepper li.done::before, .stepper li.now::before { background: var(--accent); }
.stepper .dot { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--line); background: var(--card); font-weight: 700; font-size: 13px; position: relative; z-index: 1; }
.stepper li.done .dot { background: var(--accent); border-color: var(--accent); color: #fff; }
.stepper li.now .dot { border-color: var(--accent); color: var(--accent); }
.stepper li.now { color: var(--fg); font-weight: 600; }
.step-now { font-size: 13px; color: var(--muted); margin: 8px 0 12px; text-align: center; }
.order-summary { font-size: 13px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; margin: 0 0 16px; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.card-head h2 { margin: 0 0 12px; }
button.small-btn { margin: 0 0 12px; padding: 4px 12px; font-size: 13px; }
label.radio.addr { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; }
label.radio.addr:has(input:checked) { border-color: var(--accent); }
[data-step] .actions button.big { min-width: 12em; }
@media (max-width: 480px) {
  .stepper .t { font-size: 11px; }
  [data-step] .actions { flex-direction: column-reverse; align-items: stretch; }
  [data-step] .actions button.big, #main .actions button.big { width: 100%; }
  .actions > a, .actions > button.sub { text-align: center; }
}

/* カテゴリの案内・検索・サイズ表・ご利用ガイド（2026-10-02） */
.catnav { margin: 0 0 16px; }
.catnav .chip .n { margin-left: 6px; font-size: 11px; color: var(--muted); }
.catnav .chip[aria-current="true"] .n { color: inherit; opacity: .8; }
.cat-desc { margin: -8px 0 16px; color: var(--muted); font-size: 14px; white-space: pre-wrap; }
.result-count { font-size: 13px; color: var(--muted); margin: 0 0 12px; }
.search-form { display: grid; grid-template-columns: 2fr 1.2fr 1.4fr 1fr auto; gap: 8px 12px; align-items: start; margin-bottom: 20px; }
.search-form .field label { margin-top: 0; }
.search-form .range { display: flex; align-items: center; gap: 4px; }
.search-form .range input { min-width: 0; }
.search-form button { margin: 0; align-self: end; }
.size-chart table { border-collapse: collapse; font-size: 14px; min-width: 100%; }
.size-chart caption { caption-side: top; text-align: right; font-size: 12px; color: var(--muted); padding-bottom: 4px; }
.size-chart th, .size-chart td { border: 1px solid var(--line); padding: 6px 10px; text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; }
.size-chart thead th, .size-chart tbody th { background: var(--bg); font-weight: 600; }
.size-guide-link { display: inline-block; margin-top: 8px; font-size: 13px; }
.pdp .sizes { margin-top: 24px; }
.pdp .sizes h2, .pdp .cats h2 { font-size: 14px; margin: 0 0 8px; }
.pdp .cats { margin-top: 16px; }
.guide section { margin: 0 0 28px; }
.guide h2 { font-size: 18px; margin: 0 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.guide p, .guide ul { font-size: 14px; margin: 0 0 8px; }
.guide .toc { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 24px; }
.guide .kv { margin-bottom: 8px; }
.guide .content-img, .legal-body img { max-width: 100%; height: auto; border-radius: 8px; }
@media (max-width: 720px) {
  .catnav { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
  .catnav .chip { white-space: nowrap; }
  .search-form { grid-template-columns: 1fr 1fr; }
  .search-form .wide { grid-column: 1 / -1; }
  .search-form button { grid-column: 1 / -1; }
}

/* 文面（/content/）の小見出しと、返品・交換の条件の要点（class="key"）（2026-10-03） */
.legal-body h3 { font-size: 15px; margin: 20px 0 6px; }
.legal-body h4 { font-size: 14px; margin: 14px 0 4px; }
.legal-body > :first-child { margin-top: 0; }
.legal-body p, .legal-body ul { margin: 0 0 8px; }
.legal-body .key { font-weight: 700; color: var(--fg); padding: 8px 12px; border-left: 4px solid var(--ng); background: var(--bg); border-radius: 0 8px 8px 0; }
.policy .legal-body h3 { font-size: 13px; }
a.size-guide-button { display: inline-flex; align-items: center; gap: 6px; margin: 4px 8px 4px 0; padding: 8px 14px; border: 1px solid var(--accent); border-radius: 8px; color: var(--accent); font-size: 14px; font-weight: 600; text-decoration: none; background: var(--card); }
.size-links { margin: -8px 0 8px; }
.order-help { font-size: 14px; }
.order-help p { margin: 0 0 8px; }
.guide h3.auto-h3 { font-size: 15px; margin: 0 0 6px; }

/* アクセス解析（Google Analytics）のお知らせ（2026-10-03） */
.analytics-notice { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 40; max-width: 560px; margin: 0 auto; padding: 12px 14px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 4px 20px rgba(0,0,0,.18); font-size: 13px; }
.analytics-notice p { margin: 0 0 8px; }
.analytics-notice .row { display: flex; gap: 8px; justify-content: flex-end; }
.analytics-notice button { margin: 0; }
#analytics-optout { margin: 8px 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); }
.legal-body table.size-table th, .legal-body table.size-table td { width: auto; text-align: center; white-space: nowrap; padding: 6px 10px; }
.legal-body table.size-table td:nth-child(5) { white-space: normal; text-align: left; min-width: 9em; }
@media (max-width: 480px) {
  .legal-body table.size-table th, .legal-body table.size-table td { padding: 6px 5px; font-size: 12px; }
  .legal-body table.size-table td:nth-child(5) { min-width: 7em; }
}