@charset "utf-8";
/* ============================================================
   飛行機の神様 みんなの実体験（選択式だけ）の見た目
   jstork19_custom/assets/db-taiken.css   2026-09-12
   ・db.css の色の変数（--hk-*）を使う。細い線なし・影なし・ダークモードなし
   ・割合の棒は面だけで描く。色は意味に使わない（体験は規定ではないので灰色で出す）
   ・セレクタは .hkdb を頭に付けて (0,2,0) 以上にする
   ============================================================ */
.hkdb .hk-tk{background:var(--hk-surface);border-radius:var(--hk-r);padding:20px 18px 16px;margin:20px 0 16px}
.hkdb .hk-tk__cap{font-size:12.5px;line-height:1.7;color:var(--hk-sub);margin:0 0 12px}
.hkdb .hk-tk__cap b{color:var(--hk-ink);font-weight:700}
.hkdb .hk-tk__q{font-size:16.5px;font-weight:800;line-height:1.6;color:var(--hk-ink);margin:0 0 12px}
.hkdb .hk-tk__opts{display:flex;flex-direction:column;gap:8px}
.hkdb .hk-tk__o{position:relative;display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  font-size:15px;font-weight:600;line-height:1.5;padding:12px 14px;border:0;border-radius:var(--hk-r);
  background:var(--hk-paper);color:var(--hk-ink);cursor:pointer;overflow:hidden;-webkit-appearance:none;appearance:none}
.hkdb .hk-tk__o:hover{background:var(--hk-chip)}
.hkdb .hk-tk__bar{position:absolute;left:0;top:0;bottom:0;background:var(--hk-chip);width:0;transition:width .3s}
.hkdb .hk-tk__o.is-mine .hk-tk__bar{background:#CFE0E8}
.hkdb .hk-tk__l{position:relative;flex:1 1 auto;min-width:0}
.hkdb .hk-tk__p{position:relative;flex:0 0 auto;font-family:var(--hk-num);font-size:14px;font-weight:700;
  color:var(--hk-sub);font-variant-numeric:tabular-nums}
.hkdb .hk-tk__o.is-mine{font-weight:800}
.hkdb .hk-tk__o.is-mine .hk-tk__l::after{content:"あなた";display:inline-block;margin-left:8px;
  font-size:11px;font-weight:700;padding:2px 7px;border-radius:3px;background:var(--hk-dark);color:#fff;vertical-align:2px}
/* 投票するまで割合は隠す（押せば出る／押さずに見ることもできる） */
.hkdb .hk-tk.is-hidden .hk-tk__bar{width:0}
.hkdb .hk-tk.is-hidden .hk-tk__p{visibility:hidden}
.hkdb .hk-tk.is-sending .hk-tk__opts{opacity:.6}
.hkdb .hk-tk__foot{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px;font-size:13px;color:var(--hk-sub);margin:12px 0 0}
.hkdb .hk-tk__peek{font-size:13px;font-weight:700;padding:0;border:0;background:none;color:var(--hk-link);cursor:pointer;text-decoration:underline}
.hkdb .hk-tk__note{font-size:12px;line-height:1.7;color:var(--hk-sub);margin:8px 0 0}
.hkdb .hk-tk__err{font-size:13px;line-height:1.7;color:var(--hk-ng);background:var(--hk-ng-bg);
  border-radius:var(--hk-r);padding:10px 12px;margin:10px 0 0}
@media (max-width:600px){
  .hkdb .hk-tk{padding:16px 13px 13px}
  .hkdb .hk-tk__q{font-size:15.5px}
  .hkdb .hk-tk__o{font-size:14.5px;padding:11px 12px}
}
@media (prefers-reduced-motion:reduce){ .hkdb .hk-tk__bar{transition:none} }