/* 読みもの（articles/）：style.css と legal.css の上に重ねる。index.html では読まない（2026-10-22） */
.ar-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13px; color: var(--sub); }
.ar-crumb a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; padding-right: 4px; text-decoration: underline; text-underline-offset: 3px; }
.ar-crumb .sep { color: var(--dim); }
.lg .ar-crumb + h1 { margin-top: 6px; }
.ar-by { margin-top: 12px; color: var(--sub); font-size: 13.5px; }
.ar-sum { margin-top: 26px; padding: 18px 22px; border-radius: 20px; background: var(--surface); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }
.ar-sum-title { font-size: 13px; font-weight: 800; letter-spacing: .16em; color: var(--orange); }
.ar-sum ul { margin-top: 8px; }

/* 表：スマホでは横に動かせる枠の中に入れる（ページ全体ははみ出さない） */
.ar-tbl { margin-top: 18px; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--line); }
.ar-tbl table { width: 100%; min-width: 0; border-collapse: collapse; font-size: 14px; line-height: 1.7; }
.ar-tbl th, .ar-tbl td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); color: rgba(251, 247, 240, .9); }
.ar-tbl thead th { font-size: 13px; font-weight: 800; color: var(--gold); background: rgba(255, 255, 255, .03); white-space: nowrap; }
.ar-tbl tbody th { font-weight: 800; color: #fff; white-space: nowrap; }
.ar-tbl tr:last-child > * { border-bottom: 0; }
.ar-tbl .yen { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ar-tbl tr.total > * { font-weight: 800; color: #fff; background: rgba(255, 138, 61, .08); }
.ar-note { margin-top: 10px; font-size: 13px; line-height: 1.8; color: var(--sub); }
.ar-note a { text-underline-offset: 3px; word-break: break-all; }

/* 関連の読みもの */
.ar-more { margin-top: 56px; }
.ar-more h2 { font-size: 15px; letter-spacing: .12em; color: var(--orange); }
.ar-more a { margin-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 14px 20px; border-radius: 18px; text-decoration: none; font-weight: 700; background: var(--surface); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }
.ar-more a:hover { background: var(--surface2); }
.ar-more .ico { width: 20px; height: 20px; color: var(--orange); }
.ar-cta-lead { margin-top: 56px; font-size: 15px; line-height: 1.95; color: rgba(251, 247, 240, .9); }
.ar-cta-lead + .lg-back { margin-top: 20px; }
@media (max-width: 639px) { .ar-tbl th, .ar-tbl td { padding: 10px 10px; font-size: 13.5px; } .ar-tbl thead th { white-space: normal; } .ar-tbl tbody th { white-space: normal; min-width: 4.5em; } }
.ai-note { margin: -6px 0 0; font-size: 12px; color: var(--sub); }