@charset "utf-8";
/* ============================================================
   飛行機の神様 診断（持ち物診断・座席診断）の見た目
   jstork19_custom/assets/db-shindan.css   2026-09-12
   ------------------------------------------------------------
   ★横断機能とAIOのチャット（27）だけが触る。assets/db.css は触らない。
   ・db.css の色の変数（--hk-*）をそのまま使う
   ・細い線を使わない。面（うすい塗り）と余白で区切る。影ゼロ・角丸4px
   ・ダークモードのCSSは入れない。色は意味だけ（できる＝緑／できない＝赤／条件つき＝橙）
   ・セレクタは必ず .hkdb を頭に付けて (0,2,0) 以上にする
     → db.css の .hkdb li{padding:0} (0,1,1) と テーマの .hkdb button 系に負けないため
   ============================================================ */

/* ── 答えの箱 ─────────────────────────────── */
.hkdb .hk-sd{background:var(--hk-surface);border-radius:var(--hk-r);padding:18px 16px 16px;margin:0 0 16px}
.hkdb .hk-sd__knobs{display:flex;flex-wrap:wrap;gap:14px 26px;margin:0 0 14px}
.hkdb .hk-sd__knob{flex:1 1 240px;min-width:0}
.hkdb .hk-sd__q{font-size:13px;font-weight:700;color:var(--hk-sub);margin:0 0 7px}
.hkdb .hk-sd__cs{display:flex;flex-wrap:wrap;gap:8px}
.hkdb .hk-sd__c{font-size:14px;font-weight:600;line-height:1.4;padding:9px 14px;border:0;border-radius:var(--hk-r);
  background:var(--hk-paper);color:var(--hk-ink);cursor:pointer;transition:background .12s,color .12s;-webkit-appearance:none;appearance:none}
.hkdb .hk-sd__c:hover{background:var(--hk-chip)}
.hkdb .hk-sd__c[aria-pressed="true"]{background:var(--hk-dark);color:#fff;font-weight:700}

.hkdb .hk-sd__out{background:var(--hk-paper);border-radius:var(--hk-r);padding:18px 18px 16px}
.hkdb .hk-sd__hint{font-size:15px;line-height:1.8;color:var(--hk-sub);margin:0}
.hkdb .hk-sd__sum{font-size:16px;line-height:1.8;color:var(--hk-ink);margin:0 0 12px}
.hkdb .hk-sd__sum b{font-weight:800}
.hkdb .hk-sd__note{font-size:12.5px;line-height:1.7;color:var(--hk-sub);margin:10px 0 0}
.hkdb .hk-sd__more{font-size:13.5px;line-height:1.75;color:var(--hk-sub);margin:12px 0 0}

/* 仕分けの束。色は意味だけに使う */
.hkdb .hk-sd__bag{background:var(--hk-surface);border-radius:var(--hk-r);padding:14px 15px 12px;margin:0 0 10px}
.hkdb .hk-sd__bag:last-of-type{margin-bottom:0}
.hkdb .hk-sd__bag--ok{background:var(--hk-ok-bg)}
.hkdb .hk-sd__bag--cond{background:var(--hk-cond-bg)}
.hkdb .hk-sd__bag--ng{background:var(--hk-ng-bg)}
.hkdb .hk-sd__bt{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;font-size:15.5px;font-weight:800;line-height:1.5;margin:0 0 6px}
.hkdb .hk-sd__bag--ok .hk-sd__bt{color:var(--hk-ok)}
.hkdb .hk-sd__bag--cond .hk-sd__bt{color:var(--hk-cond)}
.hkdb .hk-sd__bag--ng .hk-sd__bt{color:var(--hk-ng)}
.hkdb .hk-sd__bt span{font-size:13px;font-weight:700;font-family:var(--hk-num);color:inherit;opacity:.8}
.hkdb .hk-sd__bn{font-size:13px;line-height:1.7;color:var(--hk-ink);margin:0 0 8px}
.hkdb .hk-sd__ans{font-size:16px;line-height:1.85;font-weight:600;color:var(--hk-ink);margin:0}
.hkdb .hk-sd__bl{display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:0}
.hkdb .hk-sd__bl li{flex:0 1 auto;background:var(--hk-paper);border-radius:var(--hk-r);padding:8px 12px;
  font-size:14.5px;font-weight:600;line-height:1.5;margin:0}
.hkdb .hk-sd__bl li small{display:block;font-size:12px;font-weight:500;color:var(--hk-sub);margin-top:2px;max-width:34em}
.hkdb .hk-sd__bl li small.hk-sd__warn{color:var(--hk-ng);font-weight:700}

/* ── 選択肢の一覧 ─────────────────────────── */
.hkdb .hk-sd__pick{margin:0 0 16px}
.hkdb .hk-sd__grp{margin:0 0 16px}
.hkdb .hk-sd__grp:last-child{margin-bottom:0}
.hkdb .hk-sd__n{font-size:13px;font-weight:600;color:var(--hk-sub);font-family:var(--hk-num);margin-left:8px}
.hkdb .hk-sd__items{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 0;padding:0}
.hkdb .hk-sd__it{flex:0 1 auto;max-width:100%;background:var(--hk-surface);border-radius:var(--hk-r);
  padding:10px 13px;margin:0;font-size:14.5px;line-height:1.5;color:var(--hk-ink)}
.hkdb .hk-sd__it.is-pickable{cursor:pointer;padding-left:34px;position:relative;transition:background .12s}
.hkdb .hk-sd__it.is-pickable:hover{background:var(--hk-chip)}
/* チェックの印。画像もアイコンフォントも使わず、面だけで出す */
.hkdb .hk-sd__it.is-pickable::before{content:"";position:absolute;left:12px;top:50%;margin-top:-7px;
  width:14px;height:14px;border-radius:3px;background:#CBD7DF;display:block;transition:background .12s}
.hkdb .hk-sd__it.is-pickable:hover::before{background:#B4C4CF}
.hkdb .hk-sd__it.is-on{background:var(--hk-dark)}
.hkdb .hk-sd__it.is-on::before{background:#fff}
.hkdb .hk-sd__it.is-on .hk-sd__t,.hkdb .hk-sd__it.is-on .hk-sd__s{color:#fff}
.hkdb-wrap .hkdb .hk-sd__it.is-on .hk-sd__a{color:#fff;text-decoration:underline}
.hkdb .hk-sd__it.is-pickable:focus-visible{outline:3px solid var(--hk-link);outline-offset:2px}
.hkdb .hk-sd__t{font-weight:600}
.hkdb .hk-sd__s{display:block;font-size:12px;font-weight:500;color:var(--hk-sub);margin-top:2px}

@media (max-width:600px){
  .hkdb .hk-sd{padding:14px 12px 12px}
  .hkdb .hk-sd__out{padding:14px 14px 12px}
  .hkdb .hk-sd__knobs{gap:12px 16px}
  .hkdb .hk-sd__items{gap:7px}
  .hkdb .hk-sd__it{font-size:14px;padding:9px 11px}
  .hkdb .hk-sd__it.is-pickable{padding-left:31px}
  .hkdb .hk-sd__bl li{font-size:14px}
}
@media (prefers-reduced-motion:reduce){
  .hkdb .hk-sd__c,.hkdb .hk-sd__it.is-pickable{transition:none}
}