/* ストラップ診断 見た目（名前空間 .sf-）。やさしい配色・高コントラストにしない・スマホ最優先 */
#strap-finder { --sf-bg:#fdfbf5; --sf-card:#fffefb; --sf-line:#e9dfc4; --sf-gold:#b29a55; --sf-gold-d:#8a7438; --sf-text:#3a362c; --sf-sub:#8a8372;
  max-width: 560px; margin: 0 auto; padding: 12px 16px 48px; box-sizing: border-box;
  font-family: "Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",sans-serif; color: var(--sf-text); line-height: 1.7; }
#strap-finder *, #strap-finder *::before, #strap-finder *::after { box-sizing: border-box; }
.sf-proto { text-align:center; font-size:12px; color:#8a7438; background:#f6efd9; border-radius:8px; padding:4px 8px; margin-bottom:10px; }
.sf-card { background: var(--sf-card); border: 1px solid var(--sf-line); border-radius: 20px; padding: 20px 18px 24px; box-shadow: 0 2px 14px rgba(120,100,50,.06); }

.sf-top { display:flex; align-items:center; gap:10px; margin-bottom: 18px; }
.sf-back { appearance:none; border:0; background:none; font-size:28px; line-height:1; color:var(--sf-gold-d); cursor:pointer; padding:0 6px 4px; }
.sf-bar { flex:1; display:flex; gap:6px; }
.sf-bar i { flex:1; height:4px; border-radius:2px; background:#e8e0c8; }
.sf-bar i.on { background: var(--sf-gold); }
.sf-count { font-size:12px; color:var(--sf-sub); white-space:nowrap; }

.sf-intro { text-align:center; padding: 18px 4px 6px; }
.sf-kicker { font-size:11px; letter-spacing:.2em; color:var(--sf-gold); font-weight:700; margin-bottom:6px; }
.sf-h1 { font-size:26px; line-height:1.45; margin:6px 0 14px; font-weight:700; }
.sf-lead { margin:0 0 6px; font-size:15px; }
.sf-time { margin:0 0 22px; font-size:13px; color:var(--sf-sub); }

.sf-q { font-size:20px; line-height:1.5; margin:4px 0 6px; font-weight:700; }
.sf-note { font-size:13px; color:var(--sf-sub); margin:0 0 16px; }
.sf-h3 { font-size:16px; margin:28px 0 6px; font-weight:700; }
.sf-h4 { font-size:13px; color:var(--sf-sub); margin:16px 0 8px; }

.sf-opts { display:flex; flex-direction:column; gap:10px; }
.sf-grid { display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
.sf-opt { justify-content:center; appearance:none; text-align:left; background:#fff; border:1.5px solid var(--sf-line); border-radius:14px; padding:14px 14px; cursor:pointer;
  font: inherit; color: inherit; display:flex; flex-direction:column; gap:2px; min-height:56px; transition: border-color .12s, background .12s; }
.sf-opt:active, .sf-opt.sf-picked { border-color: var(--sf-gold); background:#fbf6e6; }
.sf-opt-t { font-size:15px; font-weight:600; }
.sf-opt-s { font-size:12px; color:var(--sf-sub); }
.sf-dots { display:flex; gap:6px; margin-top:6px; }
.sf-dot { width:18px; height:18px; border-radius:50%; display:inline-block; border:1px solid rgba(0,0,0,.08); }
.sf-dot-lg { width:20px; height:20px; }

.sf-main { display:inline-block; text-align:center; text-decoration:none; background:#f7f0dc; color:var(--sf-gold-d); border:2px solid var(--sf-gold); border-radius:999px;
  padding:12px 22px; font-size:15px; font-weight:700; cursor:pointer; font-family:inherit; }
.sf-main:hover { background:#f3e9c9; }
.sf-sec { display:inline-block; text-decoration:none; color:var(--sf-gold-d); border:1.5px solid var(--sf-line); background:#fff; border-radius:999px; padding:8px 16px; font-size:13px; font-weight:600; }
.sf-link { appearance:none; background:none; border:0; color:var(--sf-gold-d); text-decoration:underline; font:inherit; font-size:14px; cursor:pointer; display:block; margin:26px auto 0; }

.sf-model { border:1.5px solid var(--sf-line); border-radius:16px; padding:16px; margin:12px 0; background:#fff; }
.sf-model-main { border-color: var(--sf-gold); background:#fffdf3; }
.sf-model-pin { background:#faf7ee; }
.sf-tag { display:inline-block; font-size:11px; font-weight:700; color:var(--sf-gold-d); background:#f6efd9; border-radius:999px; padding:2px 10px; margin-bottom:6px; }
.sf-mname { font-size:20px; font-weight:700; line-height:1.4; }
.sf-mname small { font-size:12px; font-weight:400; color:var(--sf-sub); margin-left:8px; }
.sf-mline { margin:6px 0 0; font-size:14px; }
.sf-mline.sf-sub { color:var(--sf-sub); font-size:13px; }
.sf-how { margin:8px 0 0; font-size:12.5px; color:var(--sf-gold-d); background:#f6efd9; border-radius:10px; padding:6px 10px; }
.sf-mfoot { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:14px; flex-wrap:wrap; }
.sf-price { font-size:14px; color:var(--sf-sub); }

.sf-notes { background:#faf6ea; border-radius:12px; padding:10px 14px; margin:12px 0; }
.sf-notes p { margin:4px 0; font-size:13px; color:#6f6850; }

.sf-recipe { border:1.5px solid var(--sf-line); border-radius:14px; padding:12px; background:#fff; }
.sf-recipe-main { border-color: var(--sf-gold); }
.sf-swatches { display:flex; height:34px; border-radius:8px; overflow:hidden; border:1px solid rgba(0,0,0,.08); }
.sf-sw { flex:1; }
.sf-rname { font-weight:700; margin-top:8px; font-size:15px; }
.sf-rcols { font-size:12px; color:var(--sf-sub); }
.sf-rtext { font-size:13px; margin-top:2px; }
.sf-rgrid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.sf-rgrid .sf-rname { font-size:14px; }

.sf-debug { background:#f2f0ea; font-size:11px; padding:10px; border-radius:8px; overflow:auto; margin-top:24px; }

@media (min-width: 640px) { .sf-card { padding: 28px 28px 32px; } .sf-h1 { font-size:30px; } }

/* 挿絵（アイコン）つきの選択肢 */
.sf-opt-tx { display:flex; flex-direction:column; gap:2px; }
.sf-has-pic { align-items:center; flex-direction:row; gap:14px; }
.sf-pic { display:block; width:64px; height:96px; flex:none; }
.sf-pic svg { width:100%; height:100%; overflow:visible; }
.sf-grid-pic .sf-has-pic { flex-direction:column; align-items:center; text-align:center; padding:10px 8px 12px; gap:2px; }
.sf-grid-pic .sf-has-pic .sf-pic { width:72px; height:104px; }
.sf-grid-pic .sf-has-pic .sf-opt-tx { align-items:center; margin-top:4px; }
.sf-grid-pic .sf-opt-t { line-height:1.35; font-size:14px; }

.sf-has-pic { justify-content:flex-start; }
.sf-grid-pic .sf-has-pic { justify-content:center; }
.sf-has-pic .sf-opt-tx { text-align:left; }
.sf-grid-pic .sf-has-pic .sf-opt-tx { text-align:center; }


/* 着用イラスト・配色の選択 */
.sf-worn { margin:8px 0 12px; border:1.5px solid var(--sf-line); border-radius:16px; background:#fff; padding:10px 10px 12px; }
.sf-worn-tabs { display:flex; gap:6px; justify-content:center; margin-bottom:6px; }
.sf-worn-tabs button { appearance:none; border:1.5px solid var(--sf-line); background:#fff; color:var(--sf-sub); font:inherit; font-size:13px; padding:4px 16px; border-radius:999px; cursor:pointer; }
.sf-worn-tabs button.on { border-color:var(--sf-gold); color:var(--sf-gold-d); background:#fbf6e6; font-weight:700; }
.sf-worn-stage { min-height:260px; display:flex; align-items:center; justify-content:center; }
.sf-worn-svg { width:100%; max-width:360px; height:auto; max-height:430px; display:block; margin:0 auto; }
.sf-worn-load { font-size:13px; color:var(--sf-sub); }
.sf-worn-note { margin:6px 0 0; font-size:11.5px; color:var(--sf-sub); text-align:center; }
.sf-rpick { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; }
.sf-rpick .sf-recipe { appearance:none; text-align:left; font:inherit; color:inherit; cursor:pointer; padding:8px; border-radius:12px; border:1.5px solid var(--sf-line); background:#fff; }
.sf-rpick .sf-recipe.on { border-color:var(--sf-gold); background:#fbf6e6; }
.sf-rpick .sf-swatches { height:22px; }
.sf-rpick .sf-rname { font-size:12.5px; margin-top:6px; }
.sf-rpick .sf-rcols, .sf-rpick .sf-rtext { font-size:10.5px; line-height:1.4; }
.sf-rpick .sf-rtext { display:none; }
.sf-rnote { margin:8px 0 0; text-align:center; }

/* 色の入れ方（パターン）チップ・ほかの候補の着用イメージ */
.sf-pats { display:flex; flex-wrap:wrap; gap:8px; }
.sf-pat { appearance:none; font:inherit; color:inherit; cursor:pointer; background:#fff; border:1.5px solid var(--sf-line); border-radius:12px; padding:7px 9px; display:flex; flex-direction:column; align-items:center; gap:5px; min-width:calc((100% - 16px) / 3); flex:1 1 calc((100% - 16px) / 3); }
.sf-pat.on { border-color:var(--sf-gold); background:#fbf6e6; }
.sf-pat span:last-child { font-size:12px; font-weight:600; }
.sf-pbar { display:flex; width:100%; height:16px; border-radius:5px; overflow:hidden; border:1px solid rgba(0,0,0,.08); }
.sf-pbar i { flex:1; }
.sf-worn-sm { margin:10px 0 4px; padding:8px 8px 10px; border-radius:12px; }
.sf-worn-sm .sf-worn-stage { min-height:200px; }
.sf-worn-sm .sf-worn-svg { max-width:280px; max-height:340px; }
.sf-worn-sm .sf-worn-note { font-size:10.5px; }

/* Geminiシルエットの楽器アイコン（色はここで決める） */
.sf-mask { display:block; width:100%; height:100%; background:#8a7438; -webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; }
.sf-opt:active .sf-mask, .sf-opt.sf-picked .sf-mask { background:#6f5c26; }
.sf-stack { position:relative; display:block; width:100%; height:100%; filter:drop-shadow(0 0 .7px rgba(80,60,20,.55)); }
.sf-stack .sf-mask { position:absolute; inset:0; }
.sf-shuffle { appearance:none; display:block; margin:2px auto 6px; background:none; border:0; font:inherit; font-size:12px; color:var(--sf-sub); text-decoration:underline; text-underline-offset:3px; cursor:pointer; padding:4px 8px; }
.sf-shuffle:active { color:var(--sf-gold-d); }

/* 配色の系統・色の入れ方を小さく(2026-11-03) */
.sf-h4 { margin:12px 0 6px; font-size:12px; }
.sf-rpick { gap:6px; }
.sf-rpick .sf-recipe { padding:6px; border-radius:10px; }
.sf-rpick .sf-swatches { height:14px; border-radius:5px; }
.sf-rpick .sf-rname { font-size:11.5px; margin-top:4px; line-height:1.35; }
.sf-rpick .sf-rcols { display:none; }
.sf-pats { gap:6px; }
.sf-pat { padding:5px 6px; gap:3px; border-radius:9px; min-width:calc((100% - 12px) / 3); flex:1 1 calc((100% - 12px) / 3); }
.sf-pbar { height:9px; border-radius:3px; }
.sf-pat span:last-child { font-size:11.5px; font-weight:600; line-height:1.3; }