@charset "UTF-8";
/* お子さまの薬の飲ませ方ガイド /kids/howto/ (2026-10-26 新設)
   refill.css の .rf-* と kids.css を流用し、年齢カード・剤形ブロック・相性表・目次だけ追加 */
.kids-howto #fv .fv_top .fv_image { background: url(../images/kids/kids_spoon.webp) no-repeat center 35% / cover; }
.kids-howto #fv .fv_top .left .fv_lead { max-width: 420px; }
.kids-howto .rf-lead a, .kids-howto .rf-card a, .kids-howto .ht-tips a { color: #004092; text-decoration: underline; }

/* 目次 */
.ht-toc-section { padding: 28px 0 8px; }
.ht-toc-label { text-align: center; font-size: 13px; letter-spacing: .1em; color: #2EA34D; font-family: "Jost", system-ui; font-weight: 600; margin-bottom: 12px; }
.ht-toc { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; max-width: 880px; margin: 0 auto; }
.ht-toc a { display: inline-block; background: #fff; border: 1px solid #B3C7E0; color: #004092; border-radius: 30px; padding: 8px 16px; font-size: 13.5px; text-decoration: none; transition: background .15s; }
.ht-toc a:hover { background: #EBF7FF; }
.ht-toc-note { max-width: 820px; margin: 18px auto 0; font-size: 13px; line-height: 1.8; color: #666; text-align: center; }
.ht-toc-note a { color: #004092; font-weight: bold; }

/* 幅広callout */
.ht-callout-wide { max-width: 860px; }
.ht-callout-wide li { font-size: 14.5px; }

/* 年齢別カード */
.ht-age-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1000px; margin: 0 auto; }
.ht-age-card { background: #fff; border: 1px solid #B3C7E0; border-radius: 16px; padding: 24px 22px 22px; box-shadow: 0 4px 14px rgba(0,64,146,.06); }
.ht-age-badge { display: inline-block; background: #004092; color: #fff; font-family: "Jost", system-ui; font-weight: 700; font-size: 14px; letter-spacing: .06em; padding: 4px 14px; border-radius: 20px; margin-bottom: 12px; }
.ht-age-card h4 { font-size: 17px; color: #004092; margin-bottom: 12px; line-height: 1.4; }
.ht-age-card ul { list-style: none; padding: 0; margin: 0; }
.ht-age-card li { position: relative; padding-left: 18px; font-size: 14px; line-height: 1.75; color: #444; margin-bottom: 8px; }
.ht-age-card li::before { content: ''; position: absolute; left: 2px; top: 10px; width: 7px; height: 7px; border-radius: 50%; background: #91C67F; }
.ht-age-card li:last-child { margin-bottom: 0; }
.ht-age-card strong { color: #004092; }
.ht-age-grid .ht-age-card:nth-child(4), .ht-age-grid .ht-age-card:nth-child(5) { grid-column: span 1; }

/* 剤形別ブロック */
.ht-form { max-width: 880px; margin: 0 auto 18px; background: #fff; border: 1px solid #B3C7E0; border-radius: 16px; overflow: hidden; }
.ht-form-head { display: flex; align-items: center; gap: 12px; background: #EBF7FF; padding: 14px 22px; border-bottom: 1px solid #B3C7E0; }
.ht-form-icon { font-size: 26px; line-height: 1; }
.ht-form-head h4 { font-size: 18px; color: #004092; margin: 0; }
.ht-form-body { padding: 20px 24px 22px; }
.ht-mini-steps { list-style: none; counter-reset: ht; padding: 0; margin: 0 0 14px; }
.ht-mini-steps li { position: relative; counter-increment: ht; padding-left: 34px; font-size: 14.5px; line-height: 1.8; color: #333; margin-bottom: 8px; }
.ht-mini-steps li::before { content: counter(ht); position: absolute; left: 0; top: 3px; width: 24px; height: 24px; line-height: 24px; text-align: center; border-radius: 50%; background: #2EA34D; color: #fff; font-family: "Jost", system-ui; font-weight: 700; font-size: 13px; }
.ht-tips { list-style: none; padding: 14px 0 0; margin: 0; border-top: 1px dashed #B3C7E0; }
.ht-form-body > .ht-tips:first-child { border-top: 0; padding-top: 0; }
.ht-tips li { position: relative; padding-left: 20px; font-size: 14px; line-height: 1.8; color: #444; margin-bottom: 8px; }
.ht-tips li::before { content: '✓'; position: absolute; left: 0; top: 0; color: #2EA34D; font-weight: bold; }
.ht-tips li:last-child { margin-bottom: 0; }
.ht-form strong { color: #004092; }

/* 相性表 */
.ht-table-wrap { max-width: 920px; margin: 28px auto 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ht-table { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid #B3C7E0; border-radius: 14px; overflow: hidden; font-size: 14px; }
.ht-table th, .ht-table td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid #E3ECF5; line-height: 1.7; }
.ht-table thead th { background: #004092; color: #fff; font-size: 13px; letter-spacing: .05em; }
.ht-table tbody tr:last-child td { border-bottom: 0; }
.ht-table .ht-th-mark, .ht-table .ht-mark { width: 44px; text-align: center; }
.ht-table .ht-mark { font-size: 20px; font-weight: bold; }
.ht-table td:nth-child(2) { font-weight: bold; color: #333; min-width: 150px; }
.ht-table td:nth-child(3) { color: #555; }
.ht-table td strong { color: #004092; }
.ht-ok .ht-mark { color: #2EA34D; }
.ht-ok td { background: #F7FCF5; }
.ht-caution .ht-mark { color: #E6A000; }
.ht-caution td { background: #FFFBEF; }
.ht-ng .ht-mark { color: #D64545; }
.ht-ng td { background: #FFF5F5; }

/* トラブルカード */
.ht-trouble-cards .rf-card { max-width: 320px; }
.ht-trouble-cards .rf-card p { font-size: 13.5px; }
.ht-trouble-cards .rf-card strong { color: #004092; }

/* NG */
.ht-ng-box { border-left-color: #D64545; }
.ht-ng-box li::before { background: #D64545; }

/* 執筆・監修 */
.ht-author-section { padding: 0 0 56px; }
.ht-author { max-width: 820px; margin: 0 auto; background: #F6F3ED; border-radius: 14px; padding: 20px 26px; }
.ht-author-label { font-size: 12px; letter-spacing: .1em; color: #2EA34D; font-family: "Jost", system-ui; font-weight: 600; margin-bottom: 6px; }
.ht-author-text { font-size: 13.5px; line-height: 1.8; color: #555; }
.ht-author-text a { color: #004092; font-weight: bold; text-decoration: underline; }

@media screen and (max-width: 767px) {
  .kids-howto #fv .fv_top .left .fv_lead { max-width: 100%; }
  .ht-toc a { font-size: 12.5px; padding: 7px 12px; }
  .ht-age-grid { grid-template-columns: 1fr; gap: 14px; }
  .ht-age-card { padding: 20px 18px; }
  .ht-form-head { padding: 12px 16px; }
  .ht-form-head h4 { font-size: 16px; }
  .ht-form-body { padding: 16px; }
  .ht-mini-steps li, .ht-tips li { font-size: 13.5px; }
  .ht-table { font-size: 13px; min-width: 560px; }
  .ht-table th, .ht-table td { padding: 10px 10px; }
  .ht-table-wrap { margin-left: -20px; margin-right: -20px; padding: 0 20px; }
  .ht-author { padding: 16px 18px; }
}