/* 今日どこいく？ 記事の頭の「この記事の答え」（答えカード・Wirecutter型）2026-10-25
 * inc/hk-db-ans.php が答えカードのある記事だけ読む。手で直してよい。
 * 紙色の面・朱の「結論」・明朝の見出しとカードの名前・写真つきのカード（スマホは横にずらす／PCは横に並べる）
 */
.ai-body .kai-ans{
  --kai-paper:#F6F3EC; --kai-line:#E4DED2; --kai-line2:#ECE7DC; --kai-red:#b52f20; --kai-ink:#101820; --kai-sub:#3b4a57; --kai-mute:#5C7080;
  --kai-serif:"Shippori Mincho B1","Hiragino Mincho ProN","Yu Mincho","YuMincho","Noto Serif JP",serif;
  margin:0 0 40px; padding:30px 28px 24px; background:var(--kai-paper); color:var(--kai-ink); line-height:1.7; font-size:16px;
}
.ai-body .kai-ans p.kai-ans__eye,
.ai-body .kai-ans p.kai-ans__h,
.ai-body .kai-ans p.kai-ans__lead,
.ai-body .kai-ans p.kai-ans__lb,
.ai-body .kai-ans p.kai-ans__t,
.ai-body .kai-ans p.kai-ans__sub,
.ai-body .kai-ans p.kai-ans__tx,
.ai-body .kai-ans p.kai-ans__hint,
.ai-body .kai-ans p.kai-ans__foot,
.ai-body .kai-ans p.kai-ans__note{margin:0; padding:0; border:0; background:none; text-indent:0; width:auto; max-width:none; display:block; float:none}
.ai-body .kai-ans [hidden]{display:none !important}

.ai-body .kai-ans p.kai-ans__eye{font-size:12px; font-weight:700; letter-spacing:.24em; color:var(--kai-red); line-height:1.4}
.ai-body .kai-ans p.kai-ans__h{margin-top:6px; font-family:var(--kai-serif); font-size:30px; font-weight:800; line-height:1.4; color:var(--kai-ink); letter-spacing:.01em}
.ai-body .kai-ans p.kai-ans__lead{margin-top:6px; font-size:14px; line-height:1.7; color:var(--kai-sub)}

.ai-body .kai-ans .kai-ans__top{position:relative}
.ai-body .kai-ans .kai-ans__tabs{display:flex; margin-top:16px; border:2px solid var(--kai-ink); background:#fff; width:max-content; max-width:100%}
.ai-body .kai-ans .kai-ans__tabs button{appearance:none; margin:0; border:0; border-radius:0; min-height:44px; padding:0 18px; background:#fff; color:var(--kai-ink);
  font:inherit; font-size:14px; font-weight:700; line-height:1.3; cursor:pointer}
.ai-body .kai-ans .kai-ans__tabs button[aria-selected="true"]{background:var(--kai-ink); color:#fff}
.ai-body .kai-ans .kai-ans__tabs button:focus-visible{outline:3px solid #F7A21B; outline-offset:2px}

.ai-body .kai-ans .kai-ans__row{display:grid; grid-template-columns:repeat(var(--kai-n,4),minmax(0,1fr)); gap:14px; margin-top:20px}
.ai-body .kai-ans .kai-ans__card{display:flex; flex-direction:column; margin:0; background:#fff; border:1px solid var(--kai-line); min-width:0}
.ai-body .kai-ans .kai-ans__ph{display:block; margin:0; padding:0; border:0; line-height:0; background:#e9e4d8}
.ai-body .kai-ans .kai-ans__ph img{display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; margin:0; border:0; border-radius:0; max-width:none; box-shadow:none}
.ai-body .kai-ans .kai-ans__bd{display:flex; flex-direction:column; flex:1 1 auto; padding:12px 14px 14px}
.ai-body .kai-ans p.kai-ans__lb{font-size:12px; font-weight:700; color:var(--kai-red); line-height:1.5; letter-spacing:.03em}
.ai-body .kai-ans p.kai-ans__t{margin-top:5px; font-family:var(--kai-serif); font-size:18px; font-weight:800; line-height:1.4; color:var(--kai-ink)}
.ai-body .kai-ans p.kai-ans__sub{margin-top:2px; font-size:12px; color:var(--kai-mute); line-height:1.5}
.ai-body .kai-ans p.kai-ans__tx{margin-top:8px; font-size:13.5px; line-height:1.7; color:#16232D; flex:1 1 auto}
.ai-body .kai-ans .kai-ans__ft{display:flex; flex-direction:column; align-items:flex-start; gap:4px; margin-top:10px; padding-top:9px; border-top:1px solid var(--kai-line2); font-size:13px; line-height:1.5}
.ai-body .kai-ans .kai-ans__ft span{font-weight:700; color:var(--kai-ink)}
.ai-body .kai-ans .kai-ans__ft a{flex:0 0 auto; white-space:nowrap; font-weight:700; color:var(--kai-ink); text-decoration:underline; text-underline-offset:3px; background:none}
.ai-body .kai-ans .kai-ans__ft a:hover{color:var(--kai-red)}

.ai-body .kai-ans p.kai-ans__hint{display:none !important}
.ai-body .kai-ans p.kai-ans__foot{margin-top:16px; padding-top:13px; border-top:1px solid var(--kai-line); font-size:14px; line-height:1.75; color:#16232D}
.ai-body .kai-ans p.kai-ans__note{margin-top:8px; font-size:11px; line-height:1.6; color:var(--kai-mute)}

/* カードが5枚のときは字を少し詰める */
.ai-body .kai-ans .kai-ans__row[style*="--kai-n:5"] p.kai-ans__t{font-size:16px}
.ai-body .kai-ans .kai-ans__row[style*="--kai-n:5"] .kai-ans__bd{padding:11px 11px 13px}

/* 写真がそろわない組は文字だけのカード（上に朱の太い線・名前を大きく） */
.ai-body .kai-ans .kai-ans__row--text .kai-ans__card{border-top:4px solid var(--kai-red)}
.ai-body .kai-ans .kai-ans__row--text .kai-ans__bd{padding-top:14px}
.ai-body .kai-ans .kai-ans__row--text p.kai-ans__lb{font-size:13px}

/* タブレット：4枚以上は2列 */
@media (max-width:999px) and (min-width:768px){
  .ai-body .kai-ans .kai-ans__row{grid-template-columns:repeat(min(var(--kai-n,4),3),minmax(0,1fr))}
}

/* スマホ：面を画面の端まで広げ、カードは横にずらす */
@media (max-width:767.9px){
  .ai-body .kai-ans{margin:0 -20px 32px; padding:24px 0 20px}
  .ai-body .kai-ans .kai-ans__top{padding:0 20px}
  .ai-body .kai-ans p.kai-ans__h{font-size:24px; line-height:1.45}
  .ai-body .kai-ans .kai-ans__tabs{display:flex; width:auto}
  .ai-body .kai-ans .kai-ans__tabs button{flex:1 1 0; padding:0 8px; min-height:48px}
  .ai-body .kai-ans .kai-ans__row{display:flex; gap:12px; margin-top:16px; padding:0 20px 8px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:20px; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain}
  .ai-body .kai-ans .kai-ans__card{flex:0 0 min(272px,74vw); scroll-snap-align:start}
  .ai-body .kai-ans .kai-ans__bd{padding:14px 16px 16px}
  .ai-body .kai-ans .kai-ans__ft{flex-direction:row; justify-content:space-between; align-items:center; gap:8px}
  .ai-body .kai-ans p.kai-ans__t,
  .ai-body .kai-ans .kai-ans__row[style*="--kai-n:5"] p.kai-ans__t{font-size:20px}
  .ai-body .kai-ans p.kai-ans__tx{font-size:14px}
  .ai-body .kai-ans p.kai-ans__hint{display:block !important; margin:4px 20px 0; font-size:12px; color:var(--kai-mute)}
  .ai-body .kai-ans p.kai-ans__foot{margin:14px 20px 0; padding-top:12px}
  .ai-body .kai-ans p.kai-ans__note{margin:8px 20px 0}
}
@media (prefers-reduced-motion:no-preference){
  .ai-body .kai-ans .kai-ans__row{scroll-behavior:smooth}
}