/* index.html の見た目：ジュエリーのブランドサイト路線（前の見た目は index_old.html ／ style.css）。
   アイボリーの地・細い罫線・明朝とセリフ体・字間を広げた英字の小見出し・金の差し色。
   動き（script.js）は index_old.html と共通。script.js が作る部品（.cat-tab、.font-btn、.check-btn-main など）の見た目もここで決める。
 */

/* フォント（fonts/、backend/tools で作る。1em = 12.5mm＝大文字 9mm）。style.css と同じ */
@font-face { font-family: 'Default 1'; src: url('fonts/Default-1.woff2?v=20260930a') format('woff2'); font-display: block; }
@font-face { font-family: 'Default 5'; src: url('fonts/Default-5.woff2?v=20260930a') format('woff2'); font-display: block; }
@font-face { font-family: 'Default 7'; src: url('fonts/Default-7.woff2?v=20261028164125') format('woff2'); font-display: block; }
@font-face { font-family: 'Default O1'; src: url('fonts/Default-O1.woff2?v=20261028170052') format('woff2'); font-display: block; }
@font-face { font-family: 'Default O4'; src: url('fonts/Default-O4.woff2?v=20260930a') format('woff2'); font-display: block; }
@font-face { font-family: 'Convert B2'; src: url('fonts/Convert-B2.woff2?v=20261007175224') format('woff2'); font-display: block; }
@font-face { font-family: 'Convert B1'; src: url('fonts/Convert-B1.woff2?v=20261028180000') format('woff2'); font-display: block; }

:root {
  --bg: #fbf9f5;
  --surface: #ffffff;
  --line: #e7e1d7;
  --line-strong: #cfc6b8;
  --ink: #1d1b18;
  --ink-soft: #776f64;
  --ink-faint: #a79e92;
  --gold: #a8844f;
  --gold-soft: #f3ece0;
  /* ネックレスの台（暗いベルベット）の上の文字。台はページの明暗に関係なく暗いので、色も固定 */
  --stage-ink: #cdbfad;
  --stage-danger: #eaa093;
  --danger: #a4443a;
  --serif-en: 'Cormorant Garamond', 'Shippori Mincho', serif;
  --serif-jp: 'Shippori Mincho', 'Zen Old Mincho', serif;
  --sans: 'Zen Kaku Gothic New', 'Hiragino Sans', sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #12110f;
    --surface: #1a1816;
    --line: #2e2a25;
    --line-strong: #4a443c;
    --ink: #f1ebe1;
    --ink-soft: #b2a89a;
    --ink-faint: #7d7469;
    --gold: #c9a66d;
    --gold-soft: #2a241b;
    --danger: #e08a7e;
  }
}
:root[data-theme="dark"] {
  --bg: #12110f;
  --surface: #1a1816;
  --line: #2e2a25;
  --line-strong: #4a443c;
  --ink: #f1ebe1;
  --ink-soft: #b2a89a;
  --ink-faint: #7d7469;
  --gold: #c9a66d;
  --gold-soft: #2a241b;
  --danger: #e08a7e;
}

* { box-sizing: border-box; }

/* スマホのダブルタップで拡大させない（2本指の拡大は viewport と script.js で止める） */
html { touch-action: manipulation; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  /* Cormorant Garamond は数字が小さく沈む（オールドスタイル数字）ので、高さのそろった数字にする（「約33mm」「01」など） */
  font-variant-numeric: lining-nums;
  /* 横にはみ出した分は切る（clip は hidden と違い、ネックレスの固定表示を妨げない） */
  overflow-x: clip;
}

/* ---- ヘッダー・フッター ---- */
.site-head {
  text-align: center;
  padding: 22px 20px 18px;
  border-bottom: 1px solid var(--line);
}
.site-brand {
  margin: 0;
  font-family: var(--serif-en);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: 0.42em;
  padding-left: 0.42em; /* 字間の分だけ右にずれるのを戻して中央に揃える */
}
.site-tagline {
  margin: 4px 0 0;
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}
/* 管理者用：スプレッドシートのリンクから開いたときのデザイン番号 */
.site-foot {
  margin-top: 72px;
  padding: 28px 20px 40px;
  border-top: 1px solid var(--line);
  text-align: center;
  font-family: var(--serif-en);
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.site-foot p { margin: 0; }

.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(24px, 4vw, 56px) 20px 0;
}

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}

/* ---- ネックレスの表示（PC は左に固定） ---- */
.stage-col { position: sticky; top: 24px; }

.stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 460px;
  padding: 40px 24px 36px;
  /* 台は深い焦げ茶のベルベット（明るい台より、シルバーやチェーンの輪郭がはっきり見える）。
     真上からのスポットライトで中央だけ明るく、細かい毛羽立ち（ノイズ）を薄く重ねて布の質感を出す。
     ページの地・操作欄が明るくても暗くても、台はこの色のまま */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 0.9 0 0 0 0 0.8 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(55% 50% at 50% 40%, rgba(255, 232, 196, 0.13), transparent 72%),
    radial-gradient(130% 110% at 50% 0%, #3b2e25 0%, #211914 55%, #130e0b 100%);
  border: 1px solid #2b221c;
}

/* ネックレスは光らせず、台に「置いてある影」を落とす */
.pendant-canvas {
  display: block;
  max-width: 94%;
  height: auto;
  filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.6)) drop-shadow(0 16px 20px rgba(0, 0, 0, 0.4));
}
.pendant-canvas[hidden] { display: none; }
/* 着用イメージ：絵に背景があるので、置いた影は付けない */
.pendant-canvas.is-wear { filter: none; }
/* 台の右上の「着用イメージ」ボタン（金の細い枠） */
.view-toggle {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  padding: 6px 14px;
  border: 1px solid rgba(214, 178, 92, 0.7);
  background: rgba(20, 15, 11, 0.55);
  color: #e9d7a8;
  font-family: var(--serif-jp);
  font-size: 12.5px;
  letter-spacing: 0.08em;
  cursor: pointer;
  touch-action: manipulation;
}
.view-toggle:hover, .view-toggle[aria-pressed="true"] { background: rgba(214, 178, 92, 0.18); }
.view-toggle:focus-visible { outline: 1px solid #e9d7a8; outline-offset: 2px; }
/* 管理者用：台の右上にボタンを並べる（DXF ／ 加工後、着用に切替） */
.view-toggles { position: absolute; top: 14px; right: 14px; z-index: 2; display: flex; gap: 8px; }
.view-toggles .view-toggle { position: static; }
.pendant-canvas.is-empty { opacity: 0.35; }

.pendant-name {
  line-height: 1.1;
  text-align: center;
  max-width: 92%;
  word-break: break-word;
  background-image: var(--metal-gradient, linear-gradient(160deg, #f7eabd, #d0ab61 45%, #987c40));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.6));
  font-size: clamp(40px, 8vw, 76px);
}
.pendant-name.is-empty { opacity: 0.35; }

.unsupported-char {
  font-family: var(--sans);
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: var(--stage-ink);
  filter: none;
  text-decoration: underline dashed var(--stage-danger);
  text-underline-offset: 6px;
}

.size-note {
  margin: 14px 0 0;
  font-family: var(--serif-en);
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--stage-ink);
  text-align: center;
}
.warn-note {
  margin: 12px 0 0;
  max-width: 46ch;
  padding: 8px 12px;
  border-left: 2px solid var(--stage-danger);
  background: rgba(224, 138, 126, 0.1);
  font-size: 12px;
  line-height: 1.7;
  color: var(--stage-danger);
}

/* ---- 操作欄 ---- */
.panel {
  counter-reset: step;
}
.field {
  padding: 26px 0 28px;
  border-bottom: 1px solid var(--line);
}
.field:not([hidden]) { counter-increment: step; }
.field[hidden] { display: none; }

/* 見出し：番号・英字（字間広め）・日本語、右端に今の値 */
.field > label:not(.size-toggle) {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 16px;
}
.field > label:not(.size-toggle)::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--serif-en);
  font-size: 15px;
  color: var(--gold);
  letter-spacing: 0.04em;
}
.field-en {
  font-family: var(--serif-en);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}
.field-jp {
  font-family: var(--serif-jp);
  font-size: 13px;
  color: var(--ink-soft);
  letter-spacing: 0.08em;
}
.spacing-value {
  margin-left: auto;
  font-family: var(--serif-jp);
  font-size: 13px;
  color: var(--ink);
  letter-spacing: 0.06em;
}

.field-hint {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.8;
  color: var(--ink-soft);
}
.field-hint.is-error { color: var(--danger); }

.reset-link {
  margin-left: 6px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--line-strong);
  cursor: pointer;
}
.reset-link:hover { text-decoration-color: var(--gold); }

/* 名前：入力欄とわかるよう、白い地に細い枠の箱。右端に鉛筆のアイコン。押すと枠が金になる */
#nameInput {
  width: 100%;
  padding: 12px 52px 12px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23a79e92' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16.5 3.5l4 4L8 20H4v-4z'/%3E%3Cpath d='M14 6l4 4'/%3E%3C/svg%3E") no-repeat right 16px center;
  color: var(--ink);
  font-family: var(--serif-en);
  font-size: 26px;
  letter-spacing: 0.04em;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
#nameInput:hover { border-color: var(--ink-faint); }
#nameInput:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-soft);
}

/* 書体の種類：下線のタブ */
.cat-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.cat-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 4px 12px;
  margin-bottom: -1px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--ink-faint);
  font-family: var(--serif-jp);
  font-size: 12px;
  line-height: 1.35;
  letter-spacing: 0.06em;
  text-align: center;
  word-break: keep-all;
  cursor: pointer;
  touch-action: manipulation;
  transition: color 200ms ease, border-color 200ms ease;
}
.cat-tab-sample { font-size: 24px; line-height: 1; color: var(--ink-faint); transition: color 200ms ease; }
.cat-tab:hover, .cat-tab:hover .cat-tab-sample { color: var(--ink); }
.cat-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--gold); }
.cat-tab[aria-selected="true"] .cat-tab-sample { color: var(--ink); }
.cat-tab:focus-visible { outline: 1px solid var(--gold); outline-offset: -1px; }

.cat-tabs[hidden] { display: none; }

/* 書体の一覧：罫線で区切った行。左に細い丸、選んでいるものは金 */
.font-grid { display: flex; flex-direction: column; }
.font-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-width: 0;
  padding: 16px 12px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 200ms ease;
}
.font-btn:last-child { border-bottom: 0; }
.font-btn:hover { background: var(--gold-soft); }
.font-btn[aria-pressed="true"] { background: var(--gold-soft); }
.font-btn:focus-visible { outline: 1px solid var(--gold); outline-offset: -1px; }
.font-radio {
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
}
.font-btn[aria-pressed="true"] .font-radio {
  border-color: var(--gold);
  background: radial-gradient(circle, var(--gold) 0 3.5px, transparent 4.5px);
}
.font-body { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.font-preview {
  font-size: 30px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.font-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.font-name {
  font-family: var(--serif-en);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.1em;
  font-variant-numeric: lining-nums; /* 「筆記体1」の数字を下がった形（オールドスタイル）にしない（2026-10-07） */
}
/* 名前の入力欄の注意（半角ローマ字・数字・& 以外を取り除いたとき） */
.name-warn { color: #b0413e; }
.name-warn[hidden] { display: none; }
.font-desc { font-size: 11px; color: var(--ink-soft); letter-spacing: 0.04em; }
.font-tag.is-recommend {
  position: absolute;
  top: 14px;
  right: 12px;
  padding: 2px 8px;
  border: 1px solid var(--gold);
  color: var(--gold);
  font-family: var(--serif-jp);
  font-size: 10px;
  letter-spacing: 0.14em;
  background: var(--surface);
}

/* 文字見本を見る（書体の一覧の下の文字リンク） */
.sample-open {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 6px 0;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  background: none;
  color: var(--ink);
  font-family: var(--serif-jp);
  font-size: 13px;
  letter-spacing: 0.1em;
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color 200ms ease, color 200ms ease;
}
/* 案内のリンク（文字見本を見る・サイズについて）のアイコンは、どれも丸に「?」でそろえる（2026-10-07 依頼者「ガイドのアイコンを？とかに統一」） */
.sample-open::before {
  content: '?';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  font-family: var(--serif-en);
  font-size: 11px;
  line-height: 1;
  color: var(--gold);
  letter-spacing: 0;
}
.sample-open:hover { border-bottom-color: var(--gold); }
.sample-open:focus-visible { outline: 1px solid var(--gold); outline-offset: 3px; }

/* 書体の文字見本（ポップアップ）：中央の白い箱。見出しは固定、中身だけスクロール。
   箱の外（暗い幕）を押すと閉じる（script.js）ので、箱自体の余白は 0 にして中身で埋める */
.font-sample {
  width: min(760px, calc(100vw - 32px));
  max-height: min(86vh, 900px);
  padding: 0;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  box-shadow: 0 30px 80px -30px rgba(20, 15, 8, 0.5);
}
.font-sample[open] { display: flex; flex-direction: column; }
.font-sample::backdrop { background: rgba(18, 14, 10, 0.55); backdrop-filter: blur(2px); }
/* 開いている間は、後ろのページがスクロールしないようにする */
html:has(.font-sample[open]) { overflow: hidden; }

.font-sample-head {
  position: relative;
  flex: none;
  padding: 22px 56px 18px 28px;
  border-bottom: 1px solid var(--line);
}
.font-sample-en {
  margin: 0;
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 14px;
  color: var(--gold);
}
.font-sample-title {
  margin: 2px 0 0;
  font-family: var(--serif-jp);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: 0.12em;
}
.font-sample-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-soft);
  font-family: var(--serif-en);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}
.font-sample-close:hover { color: var(--ink); }
.font-sample-close:focus-visible { outline: 1px solid var(--gold); }

.font-sample-body {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 28px 28px;
}
.font-sample-cat { padding-top: 22px; }
.font-sample-cat-title {
  margin: 0 0 4px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--gold);
  font-family: var(--serif-jp);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.14em;
  word-break: keep-all;
}
.font-sample-note { margin: 10px 0 0; font-size: 12px; color: var(--ink-soft); }
.font-sample-item {
  padding: 18px 0 20px;
  border-bottom: 1px solid var(--line);
}
.font-sample-item:last-child { border-bottom: 0; }
.font-sample-item.is-current { background: linear-gradient(90deg, var(--gold-soft), transparent 80%); margin: 0 -28px; padding-left: 28px; padding-right: 28px; }
.font-sample-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin-bottom: 10px;
}
.font-sample-tag {
  padding: 1px 7px;
  border: 1px solid var(--gold);
  color: var(--gold);
  font-family: var(--serif-jp);
  font-size: 10px;
  letter-spacing: 0.12em;
}
.font-sample-pick {
  margin-left: auto;
  padding: 7px 16px;
  border: 1px solid var(--ink);
  background: none;
  color: var(--ink);
  font-family: var(--serif-jp);
  font-size: 12px;
  letter-spacing: 0.12em;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 200ms ease, color 200ms ease;
}
.font-sample-pick:hover:not(:disabled) { background: var(--ink); color: var(--bg); }
.font-sample-pick:disabled { border-color: var(--gold); color: var(--gold); cursor: default; }
.font-sample-glyphs {
  margin: 4px 0 0;
  font-size: 32px;
  line-height: 1.35;
  letter-spacing: 0.08em;
  word-break: break-all;
}

@media (max-width: 760px) {
  .font-sample {
    width: 100vw;
    max-width: 100vw;
    max-height: 88vh;
    margin: auto 0 0; /* スマホは下から出るシート */
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
  }
  .font-sample-head { padding: 18px 56px 14px 20px; }
  .font-sample-body { padding: 0 20px calc(24px + env(safe-area-inset-bottom, 0px)); }
  .font-sample-item.is-current { margin: 0 -20px; padding-left: 20px; padding-right: 20px; }
  .font-sample-glyphs { font-size: 26px; }
}

/* ---- 価格（ネックレスの台の中、実寸の目安の下） ---- */
.price-note {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 4px 12px;
  margin: 10px 0 0;
  color: var(--stage-ink);
}
.price-note[hidden] { display: none; }
.price-value {
  font-family: var(--serif-jp);
  font-size: 17px;
  letter-spacing: 0.08em;
  color: #e6cf9f;
}
.price-table-open {
  padding: 4px 12px;
  border: 1px solid rgba(230, 207, 159, 0.55);
  background: none;
  color: #e6cf9f;
  font-family: var(--serif-jp);
  font-size: 11px;
  letter-spacing: 0.14em;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 200ms ease, color 200ms ease;
}
.price-table-open:hover { background: #e6cf9f; color: #211914; }

/* 画面の形は参考例、という案内（お客様用）。台の上で、価格と同じ金色の細い罫線で上下を挟んで目立たせる */
.preview-notice {
  margin: 18px 0 0;
  padding: 10px 18px 11px;
  border-top: 1px solid rgba(230, 207, 159, 0.45);
  border-bottom: 1px solid rgba(230, 207, 159, 0.45);
  font-family: var(--serif-jp);
  font-size: 13px;
  line-height: 1.8;
  letter-spacing: 0.08em;
  color: #e6cf9f;
  text-align: center;
}
/* 形を整えた後のポップアップの同じ案内 */
.order-notice {
  margin: 14px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--gold);
  background: var(--gold-soft);
  font-family: var(--serif-jp);
  font-size: 13px;
  line-height: 1.8;
  letter-spacing: 0.06em;
  color: var(--ink);
}

/* 料金表（ポップアップ）。枠は下の .order と共通 */
.price-table {
  width: 100%;
  margin: 4px 0 0;
  border-collapse: collapse;
  font-size: 13px;
}
.price-table th,
.price-table td {
  padding: 10px 8px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  font-weight: 400;
}
.price-table thead th {
  border-bottom: 1px solid var(--gold);
  font-family: var(--serif-jp);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--ink-soft);
}
.price-table tbody th {
  font-family: var(--serif-jp);
  font-weight: 500;
  vertical-align: top;
  white-space: nowrap;
}
.price-table tbody th small { display: block; margin-top: 2px; font-size: 10px; color: var(--ink-soft); font-weight: 400; }
/* サイズの列と見出しは折り返さない（地金の名前が長いと、サイズが1文字ずつ縦に並んだ。2026-10-28 依頼者「ロジウムに表を圧迫している」） */
.price-table thead th, .price-table tbody td { white-space: nowrap; }
/* 厚みごとの価格の列（3列目から）の見出しも、価格と同じく右寄せ（2026-10-07 厚みごとの料金表） */
.price-table thead th:nth-child(n+3) { text-align: right; }
.price-table .price-yen { text-align: right; font-family: var(--serif-en); font-size: 17px; letter-spacing: 0.04em; }
.price-table .price-group th,
.price-table .price-group td { border-top: 1px solid var(--line-strong); }
.price-table-note { margin: 14px 0 0; font-size: 11px; line-height: 1.8; color: var(--ink-soft); text-align: left; }

/* サイズについて（大きさのボタンの下の文字リンクと、そのポップアップ）。枠・表は料金表と共通 */
.size-guide-table thead th:nth-child(n+3) { text-align: left; } /* 料金表の価格の列の右寄せを使わない */
.size-guide-table td { font-family: var(--serif-jp); }
.size-guide-table td small { display: block; margin-top: 2px; font-size: 10px; color: var(--ink-soft); }
.size-guide-note { padding: 0; list-style: none; }
.size-guide-note li::before { content: '※'; }

/* 最終確認（ポップアップ）の価格 */
.order-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 2px 8px;
  margin: 16px 0 0;
}
.order-price[hidden] { display: none; }
.order-price-label { font-family: var(--serif-jp); font-size: 12px; letter-spacing: 0.2em; color: var(--ink-soft); }
.order-price-value { font-family: var(--serif-en); font-weight: 600; font-size: 26px; letter-spacing: 0.04em; }
.order-price-tax { font-size: 11px; color: var(--ink-soft); }
.order-price-basis { width: 100%; font-size: 11px; color: var(--ink-soft); letter-spacing: 0.04em; }

/* ---- 形を整えた後のポップアップ（お客様用 #orderDialog）：デザイン番号・コピー・購入ページへ進む ---- */
.order {
  width: min(440px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 34px 30px 26px;
  border: 1px solid var(--gold);
  outline: 1px solid var(--line);
  outline-offset: -8px;           /* 内側にもう1本、細い罫線（額縁のように） */
  background: var(--bg);
  color: var(--ink);
  text-align: center;
  box-shadow: 0 40px 90px -30px rgba(20, 15, 8, 0.55);
}
.order::backdrop { background: rgba(18, 14, 10, 0.6); backdrop-filter: blur(3px); }
html:has(.order[open]) { overflow: hidden; }

.order-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-faint);
  font-family: var(--serif-en);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.order-close:hover { color: var(--ink); }
.order-en {
  margin: 0;
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 15px;
  color: var(--gold);
  letter-spacing: 0.06em;
}
.order-title {
  margin: 4px 0 18px;
  font-family: var(--serif-jp);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: 0.16em;
}
/* 整えたネックレス：プレビューと同じ暗いベルベットの台に */
.order-preview {
  margin: 0 auto 22px;
  padding: 10px 0;
  background:
    radial-gradient(60% 60% at 50% 40%, rgba(255, 232, 196, 0.14), transparent 72%),
    radial-gradient(130% 110% at 50% 0%, #3b2e25 0%, #211914 55%, #130e0b 100%);
  border: 1px solid #2b221c;
}
.order-preview img { display: block; width: 100%; height: auto; }
.order-preview img:not([src]) { display: none; }
.order-guide {
  margin: 16px 0 0;
  font-size: 13px;
  line-height: 1.9;
  color: var(--ink-soft);
}
.order-guide strong { color: var(--ink); font-weight: 700; }
.order-guide p { margin: 0; }
/* 購入ページで選ぶもの・書くものの箇条書き（2026-10-07 依頼者「書体「Pacifico」を選んで、とか箇条書きに分かりやすく」） */
.order-steps { list-style: none; margin: 8px auto 0; padding: 0; display: inline-block; text-align: left; }
.order-steps li { position: relative; padding-left: 1.1em; color: var(--ink-soft); }
.order-steps li::before { content: '・'; position: absolute; left: 0; color: var(--gold); }
.order-step-item { display: inline-block; min-width: 4.2em; color: var(--ink-soft); }
.order-step-value { color: var(--ink); font-weight: 700; }
.order-guide[hidden] { display: none; }
/* 自社サイト用（itempage.html）：カートに入れる前に選ぶ欄（チェーンの長さ・延長アジャスター・ラッピング・メッセージカード・了承。
   中身は script.js の buildCartPicks。2026-10-08 依頼者） */
/* 2026-10-08 依頼者「ポップアップの UI がつめつめだから、もうちょっとおしゃれな感じに余白を持たせて」：
   価格の下に細い罫線と見出しを置いて区切り、項目どうし・見出しと選ぶ欄の間を広げ、了承は淡い枠にまとめた。
   選ぶ欄があるときはポップアップを少し広くする */
.order:has(.order-cart:not(:empty)) { width: min(500px, calc(100vw - 32px)); padding: 40px 40px 30px; }
.order-cart:empty { display: none; }
.order-cart { margin: 30px 0 0; padding-top: 28px; border-top: 1px solid var(--line); text-align: left; }
.order-cart-en {
  margin: 0;
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--gold);
  text-align: center;
}
.order-cart-head {
  margin: 4px 0 26px;
  font-family: var(--serif-jp);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--ink);
  text-align: center;
}
.order-cart-fields { display: grid; gap: 22px; }
.order-cart-field { display: block; }
.order-cart-label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  margin-bottom: 9px;
  font-family: var(--serif-jp);
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--ink);
}
.order-cart-label small { font-family: var(--sans); font-size: 11px; letter-spacing: 0.04em; color: var(--ink-faint); }
.order-cart select {
  display: block;
  width: 100%;
  min-height: 50px;
  padding: 12px 40px 12px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23a8844f'/%3E%3C/svg%3E") no-repeat right 16px center;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;   /* 16px 未満だと iPhone が入力のときに拡大する */
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: border-color 200ms ease, box-shadow 200ms ease;
  -webkit-appearance: none;
  appearance: none;
}
.order-cart select:hover { border-color: var(--gold); }
.order-cart select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
.order-cart-agrees {
  display: grid;
  gap: 14px;
  margin: 30px 0 0;
  padding: 20px 20px;
  border: 1px solid var(--line);
  background: var(--gold-soft);
}
.order-cart-agree {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 12px;
  line-height: 1.85;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  cursor: pointer;
}
.order-cart-agree input { flex: none; width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--gold); cursor: pointer; }
.order:has(.order-cart:not(:empty)) .order-buy { margin-top: 30px; }
.order:has(.order-cart:not(:empty)) .order-status { margin-top: 20px; }
.order-status { margin: 14px 0 0; font-size: 12px; line-height: 1.7; }
.order-status[hidden] { display: none; }
.order-status.is-busy { color: var(--ink-soft); }
.order-status.is-done { color: var(--gold); }
.order-status.is-done::before { content: '✓\2002'; }
.order-status.is-warn { color: var(--gold); font-weight: 700; }
.order-status.is-error { color: var(--danger); }
.order-buy {
  display: block;
  width: 100%;
  min-height: 54px;
  margin-top: 20px;
  border: 0;
  background: linear-gradient(120deg, #cfae72, #a8844f 55%, #8a6a3a);
  color: #fff;
  font-family: var(--serif-jp);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.24em;
  cursor: pointer;
  box-shadow: 0 14px 30px -14px rgba(138, 106, 58, 0.8);
  transition: filter 200ms ease;
}
.order-buy:hover { filter: brightness(1.07); }
.order-buy:disabled { opacity: 0.6; cursor: default; }
.order-back {
  margin-top: 12px;
  padding: 8px;
  border: 0;
  background: none;
  color: var(--ink-soft);
  font-family: var(--serif-jp);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--line-strong);
  cursor: pointer;
}
.order-back:hover { color: var(--ink); }

@media (prefers-reduced-motion: no-preference) {
  /* 開くとき：ふわっと浮かび上がる。番号に光が一度走る。コピーしたらチェックが弾む */
  .order[open] { animation: order-in 520ms cubic-bezier(0.2, 0.8, 0.2, 1); }
  .order[open]::backdrop { animation: fade-in 400ms ease; }
  .order[open] .order-preview { animation: order-rise 700ms 120ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
}
@keyframes order-in {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to { opacity: 1; transform: none; }
}
@keyframes order-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 760px) {
  .order { padding: 30px 20px 22px; }
}

/* 地金：3つ横並びのカード（シルバー925・K10・K18。名前・料金だけ。色の丸はくどいので外した。2026-10-06 依頼者指示）。パッと見て素材と値段が分かるように（依頼者指示）。
   選んでいるものは、書体の一覧と同じく淡い金の地に細い金の枠、丸にも金の輪 */
.metal-swatches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.metal-dot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 16px 6px 14px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  text-align: center;
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color 200ms ease, background-color 200ms ease;
}
.metal-dot:hover { border-color: var(--line-strong); }
.metal-dot[aria-pressed="true"] { border-color: var(--gold); background: var(--gold-soft); }
.metal-dot:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; }
/* 名前：いつも2行（K10／イエローゴールド、シルバー／925）。1行だとカードの幅によって途中で折り返すため */
.metal-name {
  font-family: var(--serif-jp);
  font-size: 12.5px;
  line-height: 1.5;
  letter-spacing: 0.04em;
}
.metal-name > span { display: block; }
.metal-price {
  font-family: var(--serif-en);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
.metal-dot[aria-pressed="true"] .metal-price { color: var(--ink); }
/* 地金の色（K10・K18 のときだけ出す。シルバーのときは隠す）：小さな色の丸と名前の控えめなボタン（2026-10-06 依頼者「ボタンだらけに
   ならないよう UI 工夫」）。丸の色は script.js が入れる */
/* 厚み：2枚のカード（今の名前を斜め上から見たネームネックレスの絵・厚み・標準／厚め・価格）。絵は script.js の drawThicknessArt */
.thick-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
/* この地金では選べない厚み（シルバーの 0.6mm。2026-10-07） */
.thick-option:disabled { opacity: 0.45; cursor: not-allowed; }
.thick-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 14px 6px 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color 200ms ease, background-color 200ms ease;
}
.thick-option:hover { border-color: var(--line-strong); }
.thick-option[aria-pressed="true"] { border-color: var(--gold); background: var(--gold-soft); }
.thick-option:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; }
.thick-photo { display: block; width: 100%; max-width: 220px; aspect-ratio: 17 / 8; object-fit: cover; margin-bottom: 2px; }
.thick-photo[hidden], .thick-art[hidden] { display: none; }
.thick-art { width: 170px; max-width: 100%; height: auto; aspect-ratio: 170 / 80; margin-bottom: 2px; }
.thick-label { font-family: var(--serif-en); font-weight: 500; font-size: 16px; letter-spacing: 0.04em; }
.thick-note { font-family: var(--serif-jp); font-size: 12px; color: var(--ink-soft); letter-spacing: 0.04em; }
.thick-price { font-family: var(--serif-en); font-size: 14px; color: var(--ink-soft); letter-spacing: 0.04em; min-height: 1.2em; }
.thick-option[aria-pressed="true"] .thick-price { color: var(--ink); }

.metal-colors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
/* シルバーのとき（シルバー925・シルバー925（ロジウムコーティング）の2つ）。今の地金でないカラーのボタンは隠す（script.js の syncMetalUi） */
.metal-colors.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.metal-color[hidden] { display: none; }
/* シルバーのカラーのボタンは丸を付けず、名前（と説明）を縦に並べる（2026-10-28 依頼者「丸はいらない」） */
.metal-colors.is-two .metal-color { flex-direction: column; gap: 4px; line-height: 1.5; text-align: center; }
.metal-color-note { color: var(--ink-soft); font-size: 10.5px; letter-spacing: 0.02em; }
/* カラーのボタン：地金のカードと同じ枠と選んだときの色（ボタンだと分かるように。依頼者「ボタンに見えないかも」） */
.metal-color {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  padding: 11px 6px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--serif-jp);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color 200ms ease, background-color 200ms ease;
}
.metal-color:hover { border-color: var(--line-strong); }
.metal-color[aria-pressed="true"] { border-color: var(--gold); background: var(--gold-soft); }
.metal-color:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; }
.metal-color-chip {
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
}


/* 大きさ：レギュラー・スモールの2つのボタン（カラーのボタンと同じ枠と選んだときの色。
   2026-10-07 依頼者「チェックボックスじゃなくてサイズの項目をレギュラーとスモールにしよう」） */
.size-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.size-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 11px 6px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--serif-jp);
  font-size: 14px;
  letter-spacing: 0.04em;
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color 200ms ease, background-color 200ms ease;
}
.size-option:hover { border-color: var(--line-strong); }
.size-option[aria-pressed="true"] { border-color: var(--gold); background: var(--gold-soft); }
.size-option:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; }
/* そのサイズの値段（厚みのカードの値段と同じ書き方） */
.size-price { font-family: var(--serif-en); font-size: 14px; color: var(--ink-soft); letter-spacing: 0.04em; min-height: 1.2em; }
.size-option[aria-pressed="true"] .size-price { color: var(--ink); }

/* スライダー：細い線 */
.spacing-slider { width: 100%; margin: 4px 0 0; accent-color: var(--gold); }

/* 文字位置・マルカンの ◀▶▲▼ */
.char-offset-row { display: flex; flex-wrap: wrap; gap: 10px; }
.char-offset-item {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  background: var(--surface);
}
.char-offset-char {
  min-width: 1.6em;
  padding: 0 4px;
  font-family: var(--serif-en);
  font-weight: 600;
  font-size: 16px;
  text-align: center;
}
.char-offset-btn {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--line);
  background: none;
  color: var(--ink);
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color 150ms ease, background-color 150ms ease;
}
.char-offset-btn:hover { border-color: var(--gold); }
.char-offset-btn:active { background: var(--gold-soft); }
.char-offset-btn:focus-visible { outline: 1px solid var(--gold); outline-offset: 1px; }
.char-offset-btn:disabled { opacity: 0.3; cursor: default; }

/* ---- 形を整える ---- */
.check-bar { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.is-user .check-bar { display: flex; }
.check-bar-note {
  width: 100%;
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
}
.check-bar-note[hidden] { display: none; }
.check-bar-note.is-done { color: var(--gold); font-family: var(--serif-jp); letter-spacing: 0.1em; }
.check-bar-note.is-done::before { content: '✓\2002'; }
.check-bar-note.is-error { color: var(--danger); text-align: left; }

/* 管理者用のボタン（細い枠） */
.style-tab {
  padding: 11px 26px;
  border: 1px solid var(--ink);
  background: none;
  color: var(--ink);
  font-family: var(--serif-jp);
  font-size: 13px;
  letter-spacing: 0.16em;
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease;
}
.style-tab:hover { background: var(--ink); color: var(--bg); }
.style-tab:disabled { opacity: 0.5; cursor: default; }
/* 管理者用の「くり抜き用データをダウンロード」：最初から見せ、形を整えるまでは押せない（薄い） */
.cut-btn[hidden] { display: none; }
.cut-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.cut-btn:disabled:hover { background: none; color: var(--ink); }
/* 管理者用：整えた後の「くり抜き用データをダウンロード」（シャンパンゴールド） */
.style-tab.is-buy {
  border-color: #8a6a3a;
  background: linear-gradient(120deg, #cfae72, #a8844f 55%, #8a6a3a);
  color: #fff;
}
.style-tab.is-buy:hover { filter: brightness(1.08); }
@media (prefers-reduced-motion: no-preference) {
  .style-tab.is-buy { animation: buy-pop 560ms ease-out; }
}
.check-api {
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 12px;
}
.check-api[hidden] { display: none; }

/* お客様用のボタン（黒の帯に字間の広い明朝） */
.check-btn-main {
  width: 100%;
  min-height: 56px;
  padding: 14px 24px;
  border: 0;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--serif-jp);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.28em;
  cursor: pointer;
  transition: background-color 250ms ease;
}
.check-btn-main:hover { background: #3a352f; }
.check-btn-main:focus-visible { outline: 1px solid var(--gold); outline-offset: 3px; }
.check-btn-main:disabled { opacity: 0.6; cursor: default; }

/* 整えた後の「購入ページへ進む」：シャンパンゴールドに変わり、光が走る */
.check-btn-main.is-buy {
  position: relative;
  overflow: hidden;
  background: linear-gradient(120deg, #cfae72, #a8844f 55%, #8a6a3a);
  color: #fff;
}
.check-btn-main.is-buy::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .check-btn-main.is-buy { animation: buy-pop 560ms ease-out; }
  .check-btn-main.is-buy::after { animation: buy-shine 1200ms 250ms ease-out both; }
  .check-bar-note.is-done { animation: note-in 450ms ease-out; }
  /* 表示時は透明度だけ変える */
  .stage, .panel { animation: fade-in 700ms ease both; }
  .panel { animation-delay: 120ms; }
}
@keyframes buy-pop {
  0% { transform: scale(0.96); }
  55% { transform: scale(1.03); }
  100% { transform: scale(1); }
}
@keyframes buy-shine { to { left: 120%; } }
@keyframes note-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ---- スマホ ---- */
@media (max-width: 860px) {
  .layout { grid-template-columns: 1fr; gap: 8px; }
  .site-foot { margin-top: 40px; }
}

@media (max-width: 760px) {
  .site-head { padding: 16px 16px 14px; }
  .site-brand { font-size: 18px; }
  .wrap { padding: 0 16px; }

  /* ネックレスは画面の上に固定。画面幅いっぱいに広げ、下を流れる項目が見えないよう地の色で覆う */
  .stage-col {
    top: 0;
    z-index: 10;
    margin: 0 -16px;
    background: var(--bg);
  }
  .stage {
    min-height: 0;
    padding: 14px 12px 12px;
    border-left: 0;
    border-right: 0;
  }
  .size-note { margin-top: 6px; font-size: 13px; }
  .warn-note { margin-top: 6px; }
  /* 「参考例」の案内：固定部分を低くするため、英字の見出し（PREVIEW ONLY）は出さず、余白も詰める */
  .preview-notice { margin-top: 8px; padding: 5px 12px 6px; font-size: 12px; line-height: 1.7; }
  /* 固定部分の下端でぷつっと切れないよう、地の色からぼかして潜らせる */
  .stage-col::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 18px;
    background: linear-gradient(var(--bg), transparent);
    pointer-events: none;
  }

  .field { padding: 22px 0 24px; }
  .font-preview { font-size: 28px; }

  /* 指で押しやすい大きさ */
  .char-offset-row { gap: 8px; }
  .char-offset-btn { width: 42px; height: 42px; font-size: 13px; }
  .char-offset-char { font-size: 17px; }

  /* 形を整える：スマホでも画面の下に浮かせず、パソコンと同じく項目の中に置く（浮かせると操作の邪魔になるため。依頼者指示） */
  body { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
  .site-foot { display: none; }

  /* 形が整いました（ポップアップ）：スマホの画面（ブラウザのバーを除いた高さ＝dvh）に収まるよう詰める。
     それでも入らない小さい画面では中が縦に流れるが、購入ページへ進むは下に固定して、いつでも押せるようにする */
  .order {
    width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    padding: 22px 18px 0;
    outline-offset: -6px;
  }
  .order-close { top: 6px; right: 6px; }
  .order-en { font-size: 13px; }
  .order-title { margin: 2px 0 12px; font-size: 19px; }
  .order-preview { margin-bottom: 12px; padding: 4px 0; }
  .order-preview img { max-height: 20vh; max-height: 20dvh; object-fit: contain; }
  .order-price { margin-top: 10px; }
  .order-price-value { font-size: 22px; }
  /* 2026-10-07 依頼者「行間が若干詰め詰め」：画像と注意書きの枠の間・枠の中・箇条書きの行・箇条書きとボタンの間を少し広げた
     （デザイン番号の欄が無くなって高さに余裕がある） */
  .order-guide { margin-top: 10px; font-size: 12px; line-height: 1.9; }
  .order-steps { margin-top: 6px; }
  .order-notice { margin-top: 16px; padding: 8px 10px; font-size: 12px; line-height: 1.8; }
  .order-actions {
    position: sticky;
    bottom: 0;
    margin: 0 -11px;   /* 内側の細い罫線（outline-offset: -6px）を隠さない幅 */
    padding: 0 11px calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--bg);
  }
  .order-buy { min-height: 50px; margin-top: 18px; }
  .order-back { margin-top: 4px; }
  /* 自社サイト用の選ぶ欄（スマホ）：余白は保ちつつ、画面の幅に合わせて少しだけ詰める */
  .order:has(.order-cart:not(:empty)) { width: calc(100vw - 24px); padding: 26px 22px 0; }
  .order-cart { margin-top: 24px; padding-top: 22px; }
  .order-cart-head { margin-bottom: 20px; }
  .order-cart-fields { gap: 18px; }
  /* 2026-10-08 依頼者「スマホの時の選択肢の文字をもう少し小さく。なんかおしゃれじゃない」：16px → 14px にし、欄も少し細身に。
     16px 未満でも、viewport の maximum-scale=1 で iPhone の入力時の拡大は起きない */
  .order-cart select { min-height: 46px; padding: 10px 36px 10px 14px; font-size: 14px; letter-spacing: 0.06em; background-position: right 14px center; }
  .order-cart-label { margin-bottom: 7px; font-size: 12px; }
  .order-cart-label small { font-size: 10px; }
  .order-cart-agrees { margin-top: 24px; padding: 16px; }
  .order:has(.order-cart:not(:empty)) .order-buy { margin-top: 20px; }
}