/* 寸法アシスタント（/sunpo/）用の追加スタイル。
   色・角丸はサイトの style.css のトークン（--bg --card --ink --sub --line --accent --accent-ink --soft --money-ink --money-soft --r-md --r-sm）を使う。
   判定の色だけはここで定義する。 */
.sunpo{
  --sp-fit:#3f7d5a; --sp-fit-soft:#e3f0e7;
  --sp-tight:#a8741a; --sp-tight-soft:#f8ecd4;
  --sp-grid:#efe7dc;
  --sp-num:"BIZ UDPGothic","Noto Sans JP",sans-serif;
  display:flex;flex-direction:column;gap:24px;padding-block:16px 48px
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .sunpo{
    --sp-fit:#7cc79a; --sp-fit-soft:#1f3327;
    --sp-tight:#e2b35e; --sp-tight-soft:#3a2e17;
    --sp-grid:#2c2722;
  }
}
.sunpo *{box-sizing:border-box}
.sunpo p{margin:0}
.sunpo button,.sunpo input{font:inherit;color:inherit}
.sunpo-pr{font-size:.85rem;color:var(--money-ink);background:var(--money-soft);border-radius:var(--r-sm);padding:8px 12px}
.sunpo-hero{display:flex;flex-direction:column;gap:8px}
.sunpo-hero h1{font-size:clamp(1.4rem,5.4vw,2rem);line-height:1.4;margin:0;text-wrap:balance}
.sunpo-hero p{color:var(--sub)}
.sunpo-sample{font-size:.85rem;background:var(--soft);color:var(--accent-ink);border-radius:var(--r-sm);padding:8px 12px}

.sunpo-tool{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);min-width:0;gap:24px;align-items:start}
.sunpo-panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg,20px);padding:20px;display:flex;flex-direction:column;gap:18px;margin:0}
/* 入力パネルは貼り付けない（場所・種類・落とし穴で縦に長くなり、パソコンで下まで届かなくなるため） */
.sunpo-group{display:flex;flex-direction:column;gap:8px;min-width:0}
.sunpo-panel,.sunpo-results,.sunpo-diagram{min-width:0}
.sunpo-label{font-size:.8rem;color:var(--sub);font-weight:700;letter-spacing:.06em}
.sunpo-hint{font-size:.75rem;color:var(--sub)}
.sunpo-presets{display:flex;flex-wrap:wrap;gap:8px}
.sunpo-presets::-webkit-scrollbar{display:none}
.sunpo-chip{flex:0 0 auto;border:1px solid var(--line);background:var(--bg);border-radius:999px;padding:8px 14px;min-height:44px;font-size:.875rem;cursor:pointer;color:var(--sub)}
.sunpo-chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.sunpo-rooms{display:flex;flex-wrap:wrap;gap:0 4px;border-bottom:1px solid var(--line)}
.sunpo-rooms::-webkit-scrollbar{display:none}
.sunpo-room{flex:0 0 auto;border:0;background:transparent;padding:10px 10px 8px;min-height:44px;font-size:.875rem;color:var(--sub);cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-1px}
.sunpo-room[aria-selected="true"]{color:var(--ink);font-weight:700;border-bottom-color:var(--accent)}
.sunpo-variants{margin-top:2px}
.sunpo-types{display:flex;flex-wrap:wrap;gap:6px}
.sunpo-type{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line);background:var(--bg);border-radius:999px;padding:4px 12px 4px 8px;min-height:40px;font-size:.8rem;color:var(--sub);cursor:pointer}
.sunpo-type svg{width:22px;height:22px;color:var(--accent)}
.sunpo-type[data-t="all"]{padding-left:12px}
.sunpo-type[aria-pressed="true"]{border-color:var(--ink);color:var(--ink);font-weight:700;background:var(--card)}
.sunpo-viewtab{width:100%;max-width:280px;margin:0 auto}
.sunpo-viewtab button{white-space:nowrap}
.sunpo-variants{flex-wrap:wrap;border-radius:var(--r-sm)}
.sunpo-variants button{flex:1 1 auto;min-width:88px}

.sunpo-dims{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.sunpo-dim{display:flex;flex-direction:column;gap:4px}
.sunpo-dim label{font-size:.8rem;color:var(--sub)}
.sunpo-field{display:flex;align-items:baseline;border:1.5px solid var(--line);border-radius:var(--r-sm);background:var(--bg);padding-inline:10px;min-height:52px}
.sunpo-field:focus-within{border-color:var(--accent)}
.sunpo-field input{width:100%;min-width:0;border:0;background:transparent;font-family:var(--sp-num);font-size:1.5rem;padding-block:8px;outline:none}
.sunpo-field span{font-size:.8rem;color:var(--sub)}
.sunpo-warn{font-size:.8rem;color:var(--accent-ink);background:var(--soft);border-radius:8px;padding:6px 10px}

.sunpo-diagram{background:var(--bg);border-radius:var(--r-md);padding:12px;display:flex;flex-direction:column;gap:6px;align-items:center}
.sunpo-diagram svg{width:100%;height:auto;display:block}
.sunpo-opts{border-top:1px dashed var(--line);padding-top:14px}
.sunpo-seg{display:flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.sunpo-seg button{flex:1;border:0;background:transparent;padding:8px 6px;min-height:44px;font-size:.85rem;cursor:pointer;color:var(--sub)}
.sunpo-seg button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.sunpo-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:.875rem;cursor:pointer;min-height:44px}
.sunpo-toggle input{appearance:none;-webkit-appearance:none;width:46px;height:28px;border-radius:999px;background:var(--line);position:relative;cursor:pointer;flex:0 0 46px;margin:0}
.sunpo-toggle input::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:var(--card);box-shadow:0 1px 2px rgba(0,0,0,.2);transition:left .15s}
.sunpo-toggle input:checked{background:var(--accent)}
.sunpo-toggle input:checked::after{left:21px}

.sunpo-results{display:flex;flex-direction:column;gap:14px;min-width:0}
.sunpo-rhead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.sunpo-rhead h2{font-size:1.15rem;margin:0}
.sunpo-rhead h2 b{font-family:var(--sp-num);font-size:1.4rem;color:var(--accent-ink);margin-inline:2px}
.sunpo-sort{display:flex;gap:6px;flex-wrap:wrap}
.sunpo-sort button{border:1px solid var(--line);background:var(--card);border-radius:999px;padding:6px 12px;font-size:.8rem;cursor:pointer;color:var(--sub);min-height:40px}
.sunpo-sort button[aria-pressed="true"]{border-color:var(--ink);color:var(--ink);font-weight:700}

.sunpo-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.sunpo-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:14px;display:flex;flex-direction:column;gap:10px}
.sunpo-card .sp-row{display:flex;gap:12px;align-items:flex-start}
.sunpo-thumb{flex:0 0 56px;height:56px;border-radius:10px;background:var(--soft);color:var(--accent);display:flex;align-items:center;justify-content:center}
.sunpo-thumb svg{width:40px;height:40px}
.sunpo-card h3{font-size:.95rem;line-height:1.5;margin:0}
.sunpo-shop{font-size:.75rem;color:var(--sub)}
.sunpo-spec{font-size:.75rem;color:var(--sub);font-family:var(--sp-num)}
.sunpo-badges{display:flex;gap:6px;flex-wrap:wrap}
.sunpo-badge{font-size:.75rem;font-weight:700;border-radius:999px;padding:2px 10px}
.sp-fit{background:var(--sp-fit-soft);color:var(--sp-fit)}
.sp-tight{background:var(--sp-tight-soft);color:var(--sp-tight)}
.sp-rot{background:var(--soft);color:var(--accent-ink)}
.sp-cnt{background:var(--bg);color:var(--ink);border:1px solid var(--line)}
.sunpo-slack{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;font-size:.75rem;color:var(--sub);background:var(--bg);border-radius:8px;padding:8px;text-align:center}
.sunpo-slack b{display:block;font-family:var(--sp-num);font-size:.95rem;color:var(--ink)}
.sunpo-slack b.sp-zero{color:var(--sp-tight)}
.sunpo-links{display:flex;gap:6px;flex-wrap:wrap}
.sunpo-links a{flex:1 1 0;min-width:96px;text-align:center;border-radius:999px;padding:9px 8px;min-height:44px;font-size:.85rem;font-weight:700;border:1px solid var(--accent);color:var(--accent-ink);background:var(--card);text-decoration:none}
.sunpo-links a:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.sunpo-price{font-size:.75rem;color:var(--sub)}

.sunpo-near{border:1px dashed var(--line);border-radius:var(--r-md)}
.sunpo-near summary{cursor:pointer;padding:12px 14px;font-weight:700;min-height:44px;list-style:none;display:flex;justify-content:space-between;align-items:center}
.sunpo-near summary::-webkit-details-marker{display:none}
.sunpo-near summary::after{content:"＋";color:var(--sub)}
.sunpo-near[open] summary::after{content:"−"}
.sunpo-nearlist{display:flex;flex-direction:column;gap:8px;padding:0 14px 14px}
.sunpo-nitem{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:.875rem}
.sunpo-why{font-size:.8rem;color:var(--accent-ink)}
.sunpo-alt{font-size:.75rem;color:var(--sub)}
.sunpo-nsize{font-family:var(--sp-num);font-size:.75rem;color:var(--sub)}
.sunpo-empty{background:var(--card);border:1px dashed var(--line);border-radius:var(--r-md);padding:20px;text-align:center;color:var(--sub);font-size:.875rem}

.sunpo-share{display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:.8rem;color:var(--sub)}
.sunpo-share code{font-family:var(--sp-num);background:var(--card);border:1px solid var(--line);border-radius:8px;padding:6px 10px;word-break:break-all;flex:1 1 220px}
.sunpo-share button{border:1px solid var(--accent);background:var(--soft);color:var(--accent-ink);border-radius:999px;padding:6px 14px;min-height:44px;font-weight:700;cursor:pointer}
.sunpo-foot{font-size:.75rem;color:var(--sub);line-height:1.7}

@media (max-width:860px){.sunpo-tool{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.sunpo *{transition:none!important}}

/* 種類の絵（types/<id>.jpg） */
.sunpo-thumb{flex-basis:72px;height:72px;overflow:hidden}
.sunpo-thumb img{width:100%;height:100%;object-fit:cover;display:block;background:var(--soft)}
.sunpo-type img{width:24px;height:24px;border-radius:6px;object-fit:cover;display:block}

/* 部屋側の落とし穴と、判定に使う寸法 */
.sunpo-traps{display:flex;flex-direction:column;gap:6px;background:var(--bg);border-radius:var(--r-sm);padding:10px 12px}
#sunpoTrapList{display:flex;flex-direction:column;gap:4px}
.sunpo-trap{display:flex;gap:10px;align-items:flex-start;min-height:44px;cursor:pointer;padding-block:4px}
.sunpo-trap input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--accent);flex:0 0 20px}
.sunpo-trap b{display:block;font-size:.875rem}
.sunpo-trap small{display:block;font-size:.75rem;color:var(--sub);line-height:1.6}
.sunpo-eff{font-size:.8rem;color:var(--accent-ink);background:var(--soft);border-radius:8px;padding:6px 10px}

/* カードの注意・推定・回答ボタン */
.sunpo-spec.sp-est{color:var(--sub);opacity:.85}
.sunpo-caution{font-size:.75rem;color:var(--sp-tight);background:var(--sp-tight-soft);border-radius:8px;padding:6px 10px;line-height:1.6}
.sunpo-fb{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:.75rem;color:var(--sub);border-top:1px dashed var(--line);padding-top:8px}
.sunpo-fb span{width:100%}
.sunpo-fb button{flex:1 1 0;min-height:40px;border:1px solid var(--line);background:var(--bg);border-radius:999px;font-size:.8rem;cursor:pointer;color:var(--ink)}

.sunpo-prtag{flex:0 0 auto;align-self:center;font-size:.7rem;font-weight:700;color:var(--money-ink);background:var(--money-soft);border-radius:6px;padding:2px 6px}

/* 楽天の商品画像（改変しない・切り抜かない。サイズ変更のみ） */
.sunpo-photo{position:relative;flex:0 0 108px;width:108px;height:108px;border-radius:10px;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;overflow:hidden}
.sunpo-photo img{width:100%;height:100%;object-fit:contain;display:block;background:#fff}
.sunpo-typetag{position:absolute;left:4px;top:4px;width:28px;height:28px;border-radius:7px;overflow:hidden;background:var(--soft);color:var(--accent);box-shadow:0 0 0 2px #fff;display:flex;align-items:center;justify-content:center}
.sunpo-typetag img,.sunpo-typetag svg{width:100%;height:100%;object-fit:cover}
.sunpo-typetag.sp-full{position:static;width:100%;height:100%;box-shadow:none}
/* 判定の根拠 */
.sunpo-basis{font-size:.75rem;color:var(--sub);border-top:1px dashed var(--line);padding-top:6px}
.sunpo-basis summary{cursor:pointer;min-height:36px;display:flex;align-items:center;font-weight:700;color:var(--ink)}
.sunpo-basis dl{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;margin:4px 0 0}
.sunpo-basis dt{white-space:nowrap}
.sunpo-basis dd{margin:0;color:var(--ink);word-break:break-all}
.sunpo-unread{grid-column:1/-1;font-size:.75rem;color:var(--sub);margin:0}
/* 準備中 */
.sunpo-chip.sp-prep,.sunpo-seg button.sp-prep{opacity:.45;cursor:not-allowed}

.sunpo-type .sp-n{font-style:normal;font-family:var(--sp-num);font-size:.75rem;color:var(--accent-ink);margin-left:2px}
.sunpo-type .sp-n:empty{display:none}
.sunpo-type.sp-zero-type{opacity:.45}

.sunpo-info{font-size:.75rem;color:var(--accent-ink);background:var(--soft);border-radius:8px;padding:6px 10px;line-height:1.6}

/* 落とし穴の量の入力 */
.sunpo-trap{display:flex;flex-direction:column;gap:4px}
.sunpo-trapmain{display:flex;gap:10px;align-items:flex-start;min-height:44px;cursor:pointer;padding-block:4px}
.sunpo-trapmain input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--accent);flex:0 0 20px}
.sunpo-trapamt{display:flex;flex-wrap:wrap;gap:6px 14px;padding-left:30px;font-size:.75rem;color:var(--sub)}
.sunpo-trapamt input{width:4.5em;min-height:36px;border:1px solid var(--line);border-radius:8px;background:var(--card);padding:4px 8px;font-family:var(--sp-num);font-size:.9rem;margin:0 4px}
/* 採寸ガイド */
.sunpo-guide{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card)}
.sunpo-guide summary{cursor:pointer;min-height:44px;display:flex;align-items:center;padding:0 12px;font-weight:700;font-size:.875rem}
.sunpo-guide > div{padding:0 12px 12px;display:flex;flex-direction:column;gap:8px}
.sunpo-guide svg{width:100%;max-width:320px;height:auto;align-self:center}
.sunpo-guide ul{margin:0;padding-left:1.1em;font-size:.8rem;display:flex;flex-direction:column;gap:3px}
.sunpo-guide .sp-range{font-size:.75rem;color:var(--sub)}

.sunpo-trapamt label{white-space:nowrap}

.sunpo-guideimg{width:100%;max-width:320px;aspect-ratio:1/1;object-fit:contain;align-self:center;border-radius:10px;background:var(--soft)}

/* レビュー2：未確認・例の表示・進み具合など */
.sunpo-auto{font-size:.72rem;color:var(--sub);margin:-4px 0 0}
.sunpo-lead{font-size:.875rem;font-weight:700;color:var(--ink);line-height:1.6}
.sunpo-example{font-size:.8rem;font-weight:700;color:var(--money-ink);background:var(--money-soft);border-radius:8px;padding:6px 10px}
.sunpo-example.sp-small{font-size:.72rem;padding:3px 8px;align-self:center}
.sunpo-trybtn{align-self:flex-start;border:1px dashed var(--accent);background:var(--card);color:var(--accent-ink);border-radius:999px;padding:8px 14px;min-height:44px;font-size:.85rem;font-weight:700;cursor:pointer;margin-top:6px}
.sunpo-toggle small{display:block;font-size:.72rem;color:var(--sub);font-weight:400}
.sunpo-viewnote{text-align:center}
.sunpo-zonetext{font-size:.8rem;color:var(--ink);background:var(--bg);border-radius:8px;padding:6px 10px;margin:0;align-self:stretch}
.sunpo-basislinks{display:flex;flex-wrap:wrap;gap:6px 14px;margin:6px 0 0}
.sunpo-basislinks a{color:var(--accent-ink);min-height:32px;display:inline-flex;align-items:center}
.sunpo-checked{margin:2px 0 0;font-size:.72rem}
.sunpo-steps{display:none;list-style:none;margin:0;padding:0;gap:6px}
.sunpo-steps li{flex:1;text-align:center;font-size:.75rem;font-weight:700;color:var(--sub);background:var(--card);border:1px solid var(--line);border-radius:999px;padding:4px 0}
.sunpo-steps li.sp-done{color:#fff;background:var(--accent);border-color:var(--accent)}
@media (max-width:860px){.sunpo-steps{display:flex;position:sticky;top:56px;z-index:5;background:var(--bg);padding-block:6px}}/* サイトの固定ヘッダー（56px）の下に止める */
.sunpo-field input::placeholder{font-size:1rem;color:var(--sub);opacity:.8}

/* 細かい条件のまとまり：パソコンでは見出しを出さず、いつも開いておく */
.sunpo-more{display:flex;flex-direction:column;gap:18px}
.sunpo-more > summary{display:none}
.sunpo-more > .sunpo-group + .sunpo-group{margin-top:18px}
.sunpo-jump{display:none}

/* ===== 携帯（860px以下）だけの見た目 ===== */
@media (max-width:860px){
  .sunpo{gap:16px;padding-block:8px 88px}
  .sunpo-hero h1{font-size:1.35rem}
  .sunpo-hero p{font-size:.875rem;line-height:1.7}
  .sunpo-pr{font-size:.75rem;padding:6px 10px}
  .sunpo-tool{gap:16px}
  .sunpo-panel{padding:14px;gap:14px;border-radius:16px}
  /* 部屋は3列、場所は2列のボタンにして縦の長さを半分に */
  .sunpo-rooms{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;border:0}
  .sunpo-room{border:1px solid var(--line);border-radius:10px;margin:0;padding:6px 4px;min-height:40px;font-size:.8rem;background:var(--bg)}
  .sunpo-room[aria-selected="true"]{border-color:var(--accent);background:var(--soft);color:var(--accent-ink)}
  .sunpo-presets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .sunpo-chip{min-height:40px;padding:6px 8px;font-size:.8rem;border-radius:10px;white-space:normal;line-height:1.35}
  .sunpo-variants button{min-width:0;font-size:.8rem;padding:6px 4px}
  .sunpo-hint{font-size:.78rem;line-height:1.6}
  .sunpo-lead{font-size:.85rem}
  .sunpo-field{min-height:48px}
  .sunpo-field input{font-size:1.35rem}
  .sunpo-trapamt{padding-left:0}
  /* 細かい条件は、たたんだ見出しから開く */
  .sunpo-more{border:1px solid var(--line);border-radius:12px;gap:0}
  .sunpo-more > summary{display:flex;align-items:center;justify-content:space-between;min-height:44px;padding:0 12px;font-weight:700;font-size:.85rem;cursor:pointer;list-style:none}
  .sunpo-more > summary::-webkit-details-marker{display:none}
  .sunpo-more > summary::after{content:"＋";color:var(--sub)}
  .sunpo-more[open] > summary::after{content:"−"}
  .sunpo-more > .sunpo-group{padding:0 12px 12px}
  .sunpo-more > .sunpo-group + .sunpo-group{margin-top:0;border-top:1px dashed var(--line);padding-top:12px}
  /* 種類は横に流して1〜2行に */
  .sunpo-types{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch}
  .sunpo-type{flex:0 0 auto}
  /* 図は小さめに */
  .sunpo-diagram{padding:8px}
  .sunpo-diagram svg{max-height:210px}
  .sunpo-zonetext{font-size:.78rem}
  /* 並び順は横に流す */
  .sunpo-sort{flex-wrap:nowrap;overflow-x:auto;width:100%;padding-bottom:2px}
  .sunpo-sort button{flex:0 0 auto}
  /* 商品カード：画像を小さく、行間を詰めて1画面に2件入るように */
  .sunpo-cards{grid-template-columns:1fr;gap:10px}
  .sunpo-card{padding:12px;gap:8px}
  .sunpo-card .sp-row{gap:10px}
  .sunpo-photo{flex-basis:84px;width:84px;height:84px}
  .sunpo-typetag{width:22px;height:22px}
  .sunpo-card h3{font-size:.9rem;line-height:1.45}
  .sunpo-shop,.sunpo-spec{font-size:.72rem}
  .sunpo-badges{gap:4px}
  .sunpo-badge{font-size:.72rem;padding:1px 8px}
  .sunpo-auto{font-size:.7rem;margin-top:-2px}
  .sunpo-slack{padding:6px;font-size:.7rem}
  .sunpo-slack b{font-size:.9rem}
  .sunpo-caution,.sunpo-info{font-size:.72rem;padding:5px 8px;line-height:1.55}
  .sunpo-basis summary{min-height:32px}
  .sunpo-links a{min-height:42px;padding:8px}
  .sunpo-price{font-size:.72rem}
  /* 下の「候補◯件を見る」 */
  .sunpo-jump{display:block;position:fixed;left:16px;right:16px;bottom:calc(12px + env(safe-area-inset-bottom, 0px));z-index:20;
    min-height:48px;border:0;border-radius:999px;background:var(--accent);color:#fff;font-weight:700;font-size:.95rem;
    box-shadow:0 6px 18px rgba(60,40,20,.25);cursor:pointer}
  .sunpo-jump[hidden]{display:none}
}

/* ボタンの文字は単語の途中で折らない（<wbr> の位置だけで折り返す） */
.sunpo-room,.sunpo-chip,.sunpo-variants button{word-break:keep-all;overflow-wrap:normal}
.sunpo-room .sp-short{display:none}
@media (max-width:860px){
  .sunpo-room .sp-long{display:none}
  .sunpo-room .sp-short{display:inline}
  .sunpo-room{font-size:.8125rem}
  .sunpo-chip,.sunpo-variants button{font-size:.8125rem}
}
@media (max-width:860px){.sunpo-room .sp-short{white-space:nowrap}.sunpo-room{padding-inline:2px}}

/* ===== 携帯の段階表示（入口 → 場所 → 寸法 → 候補）。パソコンではこの部品を出さない ===== */
.sunpo-intro,.sunpo-howto,.sunpo-cond,.sunpo-figbtn,.sunpo-mnav,.sunpo-trapsum{display:none}
.sunpo-extag{display:inline-block;font-size:.8125rem;font-weight:700;color:var(--money-ink);background:var(--money-soft);border-radius:6px;padding:1px 8px;margin-right:6px}
.sunpo-extag[hidden]{display:none}
@media (max-width:860px){
  .sp-wiz{padding-block:4px 16px;gap:14px}
  .sp-wiz .sunpo-hero h1{font-size:1.3rem;line-height:1.45;word-break:keep-all}
  .sp-wiz .sunpo-pr{font-size:.8125rem}
  .sp-wiz:not([data-mstep="dims"]) .sunpo-hero,.sp-wiz:not([data-mstep="dims"]) .sunpo-desc{display:none}
  /* 入口 */
  /* 第一画面（寸法）：見出し → よくある置き場所＋寸法＋「入る収納を見る」→ PR の1行・説明・見本・使い方（2026-10-19） */
  .sp-wiz[data-mstep="dims"] .sunpo-steps,.sp-wiz[data-mstep="dims"] .sunpo-mnav{display:none}
  .sp-wiz[data-mstep="dims"] .sunpo-intro{display:flex}
  .sp-wiz[data-mstep="dims"] .sunpo-howto{display:block}
  .sp-wiz[data-mstep="dims"] .sunpo-hero{order:0}.sp-wiz[data-mstep="dims"] .sunpo-tool{order:1}.sp-wiz[data-mstep="dims"] .sunpo-pr{order:2}
  .sp-wiz[data-mstep="dims"] .sunpo-desc{order:3}.sp-wiz[data-mstep="dims"] .sunpo-kaden{order:4}.sp-wiz[data-mstep="dims"] .sunpo-intro{order:5}.sp-wiz[data-mstep="dims"] .sunpo-howto{order:6}
  .sp-wiz .sunpo-desc{font-size:.875rem;color:var(--sub);line-height:1.7}
  .sp-wiz .sunpo-other{display:block}
  .sunpo-intro{flex-direction:column;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px}
  .sunpo-introcond{font-size:.875rem;color:var(--sub);line-height:1.6}
  .sunpo-introcount{font-size:1.1rem;font-weight:700}
  .sunpo-introcount b{font-family:var(--sp-num);font-size:1.6rem;color:var(--accent-ink);margin-inline:2px}
  .sunpo-introphotos{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
  .sunpo-introphotos a{aspect-ratio:1/1;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;display:flex}
  .sunpo-introphotos img{width:100%;height:100%;object-fit:contain;display:block}
  .sunpo-introphotos .sp-cap{grid-column:1/-1;font-size:.8125rem;color:var(--sub)}
  .sunpo .sunpo-cta{min-height:52px;border:0;border-radius:999px;background:var(--accent);color:#fff;font-weight:700;font-size:1.05rem;cursor:pointer;box-shadow:0 4px 12px rgba(60,40,20,.18)}
  .sunpo .sunpo-sub{min-height:44px;border:0;background:transparent;color:var(--accent-ink);font-weight:700;font-size:.9rem;text-decoration:underline;cursor:pointer}
  .sp-wiz .sunpo-hero p{font-size:.875rem}
  .sunpo-howto{border-top:1px dashed var(--line);padding-top:12px}
  .sunpo-howto h2{font-size:1rem;margin:0 0 6px}
  .sunpo-howto ol{margin:0;padding-left:1.3em;font-size:.875rem;line-height:1.7;display:flex;flex-direction:column;gap:4px}
  /* 進み具合（押せる） */
  .sp-wiz .sunpo-steps{gap:6px}
  .sp-wiz .sunpo-steps li{padding:0;border-radius:999px;overflow:hidden}
  .sp-wiz .sunpo-steps button{width:100%;min-height:44px;border:0;background:transparent;color:inherit;font:inherit;font-size:.875rem;font-weight:700;cursor:pointer}
  .sp-wiz .sunpo-steps li.sp-done{background:var(--soft);color:var(--accent-ink);border-color:var(--line)}
  .sp-wiz .sunpo-steps li.sp-cur{background:var(--accent);color:#fff;border-color:var(--accent)}
  .sp-wiz[data-mstep="res"] .sunpo-steps{display:none}
  /* 場所・寸法：その段階の欄だけ */
  .sp-wiz[data-mstep="place"] .sunpo-results,.sp-wiz[data-mstep="dims"] .sunpo-results{display:none}
  .sp-wiz[data-mstep="place"] .sp-g-dims,.sp-wiz[data-mstep="dims"] .sp-g-place{display:none}
  .sp-wiz[data-mstep="res"] .sunpo-panel{display:none}
  .sp-wiz .sunpo-label{font-size:1rem;color:var(--ink)}
  .sp-wiz .sunpo-rooms{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:6px;padding-bottom:4px;-webkit-overflow-scrolling:touch}
  .sp-wiz .sunpo-room{flex:0 0 auto;border-radius:999px;padding:6px 14px;min-height:44px;font-size:.875rem}
  .sp-wiz .sunpo-presets{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .sp-wiz .sunpo-chip{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:104px;padding:10px 6px;font-size:.875rem;border-radius:14px;background:var(--card);color:var(--ink)}
  .sp-wiz .sunpo-chip .sp-pimg{width:52px;height:52px;border-radius:10px;overflow:hidden;background:var(--soft);color:var(--accent);display:flex;align-items:center;justify-content:center}
  .sp-wiz .sunpo-chip .sp-pimg img,.sp-wiz .sunpo-chip .sp-pimg svg{width:100%;height:100%;object-fit:cover}
  .sp-wiz .sunpo-chip[aria-pressed="true"]{background:var(--soft);color:var(--accent-ink);border:2px solid var(--accent);font-weight:700}
  .sp-wiz .sunpo-chip.sp-prep{min-height:60px}
  .sp-wiz .sunpo-variants button{font-size:.875rem;min-height:44px}
  .sp-wiz #sunpoPlaceNote,.sp-wiz #sunpoExampleBand,.sp-wiz #sunpoTry{display:none}
  .sp-wiz .sunpo-lead{font-size:.9rem}
  .sp-wiz .sunpo-dim label{font-size:.9375rem;font-weight:700;color:var(--ink)}
  .sp-wiz .sunpo-field{min-height:58px}
  .sp-wiz .sunpo-field input{font-size:1.6rem}
  .sp-wiz .sunpo-field input::placeholder{font-size:1.1rem}
  .sp-wiz .sunpo-hint{font-size:.8125rem}
  .sunpo-trapsum{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:44px;border:1px solid var(--line);border-radius:10px;background:var(--bg);padding:6px 12px;font-size:.875rem;text-align:left;cursor:pointer}
  .sunpo-trapsum[hidden]{display:none}
  .sunpo-trapsum b{flex:0 0 auto;color:var(--accent-ink)}
  .sp-wiz:not(.sp-trapopen) #sunpoTraps,.sp-wiz:not(.sp-trapopen) #sunpoEff{display:none}
  .sp-wiz .sunpo-trap small,.sp-wiz .sunpo-trapamt{font-size:.8125rem}
  /* 下の「戻る／次へ」：画面の下に止める */
  .sp-wiz .sunpo-mnav{display:flex;gap:8px;position:sticky;bottom:0;z-index:15;margin-top:-4px;padding:10px 0 calc(10px + env(safe-area-inset-bottom,0px));background:linear-gradient(to bottom,transparent,var(--bg) 22%)}
  .sp-wiz[data-mstep="res"] .sunpo-mnav{display:none}
  .sunpo-mnav button{min-height:50px;border-radius:999px;font-weight:700;font-size:.95rem;cursor:pointer}
  .sunpo-mnav .sp-back{flex:0 0 88px;border:1px solid var(--line);background:var(--card);color:var(--ink)}
  .sunpo-mnav .sp-next{flex:1;border:0;background:var(--accent);color:#fff}
  .sunpo-mnav .sp-next:disabled{background:var(--line);color:var(--sub);cursor:default}
  /* 候補：上に条件を止める。並び：条件 → 件数・並び順 → 図のボタン → 図 → そのほか */
  .sp-wiz .sunpo-results{gap:12px}
  .sp-wiz .sunpo-results > *{order:4}
  .sp-wiz .sunpo-results > .sunpo-cond{order:0}
  .sp-wiz .sunpo-results > .sunpo-rhead{order:1}
  .sp-wiz .sunpo-results > .sunpo-figbtn{order:2}
  .sp-wiz .sunpo-results > .sunpo-diagram{order:3}
  .sp-wiz[data-mstep="res"] .sunpo-cond{display:flex;position:sticky;top:56px;z-index:6;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:6px 6px 6px 12px;box-shadow:0 2px 8px rgba(60,40,20,.08)}
  .sunpo-cond .sp-condtext{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;border:0;background:transparent;text-align:left;font-size:.875rem;color:var(--ink);cursor:pointer;min-height:44px;padding:0}
  .sunpo-cond .sp-condtext b{font-family:var(--sp-num)}
  .sunpo-cond .sp-condtext .sunpo-extag{margin:0}
  .sunpo-cond .sp-condbtn{flex:0 0 auto;min-height:44px;border:1px solid var(--accent);background:var(--soft);color:var(--accent-ink);border-radius:999px;padding:0 16px;font-weight:700;cursor:pointer}
  .sp-wiz[data-mstep="res"] .sunpo-figbtn{display:block;min-height:44px;border:1px dashed var(--line);background:transparent;border-radius:10px;font-size:.875rem;color:var(--accent-ink);font-weight:700;cursor:pointer}
  .sp-wiz:not(.sp-fig) .sunpo-diagram{display:none}
  .sp-wiz .sunpo-rhead h2{font-size:1.05rem}
  .sp-wiz .sunpo-sort button{font-size:.8125rem;min-height:44px}
  .sp-wiz #sunpoExampleRes{display:none}
  .sp-wiz .sunpo-more > summary{font-size:.875rem;min-height:44px}
  .sp-wiz .sunpo-type{min-height:44px;font-size:.8125rem}
  .sp-wiz .sunpo-toggle small{font-size:.8125rem}
  /* 携帯のカード */
  .sp-mcard{padding:12px;gap:10px}
  .sp-mcard .sp-row{gap:12px;align-items:flex-start}
  .sp-mcard .sunpo-photo{flex:0 0 112px;width:112px;height:112px}
  .sp-mcard .sp-main{display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-width:0}
  .sp-mcard h3{font-size:.9375rem;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .sp-mcard .sunpo-badge{font-size:.8125rem;padding:2px 9px}
  .sp-mcard .sp-slack1{font-size:.8125rem;color:var(--sub);display:flex;flex-wrap:wrap;gap:2px 8px}
  .sp-mcard .sp-slack1 b{font-family:var(--sp-num);font-size:.95rem;color:var(--ink);margin-left:2px}
  .sp-mcard .sunpo-price{font-size:.8125rem}
  .sp-mcard .sunpo-price b{font-family:var(--sp-num);font-size:1rem;color:var(--ink)}
  .sp-mcard .sp-auto{background:var(--bg);color:var(--sub);border:1px solid var(--line);font-weight:400}
  .sp-mcard .sunpo-links a{min-height:46px;font-size:.9375rem}
  .sunpo-mdetail{border-top:1px dashed var(--line);padding-top:4px;font-size:.8125rem}
  .sunpo-mdetail summary{min-height:44px;display:flex;align-items:center;font-weight:700;cursor:pointer;color:var(--sub)}
  .sunpo-mdetail[open]{display:flex;flex-direction:column;gap:6px}
  .sunpo-mdetail .sp-dline{color:var(--sub);font-family:var(--sp-num)}
  .sunpo-mdetail .sunpo-caution,.sunpo-mdetail .sunpo-info{font-size:.8125rem}
  .sunpo-mdetail .sunpo-basis{font-size:.8125rem;padding-top:6px}
  .sp-wiz .sunpo-near summary{font-size:.9rem}
  .sp-wiz .sunpo-foot,.sp-wiz .sunpo-share,.sp-wiz .sunpo-unread,.sp-wiz .sunpo-alt,.sp-wiz .sunpo-nsize{font-size:.8125rem}
  /* 携帯の文字は13px以上 */
  .sp-wiz .sunpo-guide ul{font-size:.875rem}
  .sp-wiz .sunpo-guide .sp-range,.sp-wiz .sunpo-why,.sp-wiz .sunpo-example.sp-small,.sp-wiz .sunpo-type .sp-n,.sp-wiz .sunpo-zonetext,.sp-wiz .sunpo-checked,.sp-wiz .sunpo-warn,.sp-wiz .sunpo-eff,.sp-wiz .sunpo-caution,.sp-wiz .sunpo-info,.sp-wiz .sunpo-basis{font-size:.8125rem}
  .sp-wiz .sunpo-field span{font-size:.875rem}
  .sp-wiz .sunpo-trapamt input{min-height:44px}
  .sp-wiz .sunpo-basislinks a{min-height:44px}
}

/* 広告の表示はページ上部の1行だけ（帯にしない。小さすぎ・背景と同化はさせない：13px・本文の灰色） */
.sunpo .sunpo-pr{font-size:.8125rem;line-height:1.6;color:var(--sub);background:none;border-radius:0;padding:0;margin-top:-8px}
/* ショップ名（楽天市場／Yahoo!ショッピング）は小さく */
.sp-mcard .sp-src{font-size:.8125rem;color:var(--sub)}

/* 入る商品がないときの広告1枠（サイトの .card・.pts・.btn に合わせる。PR は灰色の小見出し1か所） */
.sunpo-ad{display:flex;flex-direction:column;gap:6px}
.sunpo-ad[hidden]{display:none}
.sunpo-adhead{font-size:.875rem;color:var(--ink);font-weight:700;display:flex;align-items:center;gap:8px}
.sunpo-adpr{border:1.5px solid var(--ink);border-radius:4px;padding:0 6px;font-size:.8125rem;line-height:1.5}
.sunpo-adcard{background:var(--card);border:1px solid var(--line);border-top:3px solid var(--accent);border-radius:var(--r-md);box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column}
.sunpo-adimg{display:block;aspect-ratio:12/5;overflow:hidden;background:var(--soft)}
.sunpo-adimg img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.sunpo-adbody{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px}
.sunpo-adlead{font-size:.8125rem;color:var(--sub)}
.sunpo-adtitle{font-size:1.1rem;font-weight:700;line-height:1.45;color:var(--ink)}
.sunpo-adpts{list-style:none;padding:0;margin:2px 0 4px;display:flex;flex-direction:column;gap:3px}
.sunpo-adpts li{font-size:.875rem;color:var(--sub);padding-left:1.2em;position:relative}
.sunpo-adpts li::before{content:"✓";position:absolute;left:0;color:var(--accent)}
.sunpo .sunpo-adbtn{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;border-radius:999px;background:var(--accent);color:#fff;font-weight:700;font-size:.95rem;text-decoration:none;margin-top:4px}
.sunpo-adchk{font-size:.8125rem;color:var(--sub);text-align:center}

/* 購入ボタン直前の「PR」：目立たせないが読める灰色（Yahoo!のガイドライン対応） */
.sunpo .sunpo-prtag{color:var(--sub);background:none;border:1px solid var(--line);font-weight:700;font-size:.75rem;padding:1px 6px;border-radius:6px}
@media (max-width:860px){.sunpo .sunpo-prtag{font-size:.8125rem}}
@media (min-width:861px){.sunpo-ad{max-width:460px}}
/* Amazon は商品名での検索ページへ飛ぶだけなので、楽天・Yahoo!より一段控えめに */
.sunpo .sunpo-links a.sunpo-azs{border-color:var(--line);color:var(--ink);font-weight:600}
/* 家電の置き場所チェック（/sunpo/kaden/）への入口 */
.sunpo .sunpo-kaden{margin:0 0 12px;font-size:.875rem}
.sunpo .sunpo-kaden a{display:inline-flex;align-items:center;min-height:44px;color:var(--accent-ink);font-weight:700}
.sunpo .sunpo-kaden a::after{content:"→";margin-left:4px}

/* ===== 第一画面は入力だけ（2026-10-19）：よくある置き場所・主ボタン・件数の日付・カードの余り ===== */
.sunpo-hero{order:0}.sunpo-pr{order:1}.sunpo-tool{order:2}.sunpo-desc{order:3;color:var(--sub)}.sunpo-kaden{order:4}
.sunpo-intro,.sunpo-steps,.sunpo-howto{order:5}.sunpo-mnav{order:6}
.sunpo-quick{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 2px}
.sunpo-quick button{min-height:44px;padding:8px 16px;border:1.5px solid var(--line);background:var(--card);border-radius:999px;font-weight:700;font-size:.9rem;cursor:pointer}
.sunpo-quick button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.sunpo-other{display:none;border:0;background:none;color:var(--accent-ink);font-weight:700;font-size:.875rem;text-decoration:underline;min-height:44px;padding:0;cursor:pointer;text-align:left}
.sunpo-go{display:block;width:100%;min-height:52px;margin-top:12px;border:0;border-radius:999px;background:var(--accent);color:#fff;font-weight:700;font-size:1.05rem;cursor:pointer}
.sunpo-go:focus-visible{outline:3px solid var(--accent-ink);outline-offset:2px}
.sunpo-gohint{font-size:.875rem;color:var(--sp-tight);margin-top:6px}
.sunpo-gohint[hidden]{display:none}
.sunpo-rhead h2 .sp-date{font-size:.8125rem;font-weight:400;color:var(--sub);margin-left:4px}
.sp-least{color:var(--accent-ink);font-weight:700}
.sp-dims1{font-size:.875rem;line-height:1.5}
.sp-note1,.sp-auto1{font-size:.8125rem;color:var(--sub);margin:4px 0 0}
.sunpo-widen{display:block;width:100%;min-height:52px;border:2px solid var(--accent);background:var(--soft);color:var(--accent-ink);border-radius:12px;font-weight:700;font-size:1rem;cursor:pointer;margin-bottom:10px}
.sunpo .sunpo-go{color:#fff}.sunpo .sunpo-widen{color:var(--accent-ink)}
/* パソコンは場所の一覧が見えているので「よくある置き場所」は携帯だけ。寸法が空のときは図の枠を出さない */
.sunpo-quick{display:none}
@media (max-width:860px){.sp-wiz .sunpo-quick{display:flex}}
.sunpo-diagram[hidden],.sunpo-near[hidden],.sunpo-share[hidden]{display:none}