/* ペット保険のページ */
.mp-hn { padding-bottom: 32px; }
.mp-hn-crumb { font-size: 12.5px; color: var(--mp-muted); margin: 10px 0 8px; }
.mp-hn-crumb a { color: var(--mp-muted); }
.mp-hn-hero { background: #fff; border-radius: 22px; padding: 20px 18px; box-shadow: 0 0 0 1px #E3E3DA; }
.mp-hn-eye { margin: 0; font-size: 12.5px; font-weight: 900; color: #5E7D6A; }
.mp-hn-hero h1 { margin: 6px 0 0; font-size: 23px; line-height: 1.45; }
.mp-hn-hero h1 span { font-size: 18px; }
.mp-hn-hero > p { font-size: 14px; line-height: 1.8; color: var(--mp-sub); margin: 10px 0 0; }
.mp-hn-dg { margin-top: 16px; background: #E9F0EA; border-radius: 18px; padding: 16px; scroll-margin-top: 80px; }
.mp-hn-dg__t { margin: 0; font-size: 16px; font-weight: 900; }
.mp-hn-dg__s { margin: 2px 0 0; font-size: 12.5px; color: var(--mp-sub); }
.mp-hn-step { margin-top: 12px; }
.mp-hn-q { margin: 0 0 8px; font-size: 15px; font-weight: 900; }
.mp-hn-ani { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mp-hn-ani button, .mp-hn-chips button, .mp-hn-ages button { font: inherit; cursor: pointer; border: 0; background: #fff; color: var(--mp-ink); box-shadow: 0 0 0 1px #D3DED5; border-radius: 14px; }
.mp-hn-ani button { padding: 12px 6px; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 16px; font-weight: 900; }
.mp-hn-ani button:hover, .mp-hn-chips button:hover, .mp-hn-ages button:hover { box-shadow: 0 0 0 2px #5E7D6A; }
.mp-hn-pic { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.mp-hn-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mp-hn-chips button { padding: 10px 14px; font-size: 14px; font-weight: 800; }
.mp-hn-ages { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.mp-hn-ages button { padding: 11px 0; font-size: 15px; font-weight: 900; }
.mp-hn-back { margin-top: 12px; font: inherit; font-size: 13.5px; font-weight: 800; color: var(--mp-sub); background: none; border: 0; padding: 6px 0; cursor: pointer; }
.mp-hn-nojs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.mp-hn-nojs select, .mp-hn-nojs button { font: inherit; padding: 8px; border-radius: 10px; }

.mp-hn-sec { margin-top: 26px; }
.mp-hn-sec > h2, .mp-hn .mp-acc__h { font-size: 19px; line-height: 1.45; margin: 0 0 10px; padding-left: 10px; border-left: 4px solid #5E7D6A; scroll-margin-top: 80px; }
.mp-hn-sec > p { font-size: 14.5px; line-height: 1.85; margin: 0 0 10px; }
.mp-hn-card { background: #fff; border-radius: 16px; box-shadow: 0 0 0 1px #E3E3DA; padding: 14px 16px; margin-bottom: 10px; }
.mp-hn-yn { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mp-hn-yn > div { border-radius: 14px; padding: 12px; font-size: 13.5px; }
.mp-hn-yn .is-o { background: #E9F0EA; } .mp-hn-yn .is-x { background: #FBEDE8; }
.mp-hn-yn b { display: block; margin-bottom: 4px; } .mp-hn-yn .is-o b { color: #3E5A49; } .mp-hn-yn .is-x b { color: #A4432F; }
.mp-hn-yn ul { margin: 0; padding-left: 18px; line-height: 1.8; }
.mp-hn-pl { background: #fff; border-radius: 16px; box-shadow: 0 0 0 1px #E3E3DA; padding: 14px 16px; margin-bottom: 10px; }
.mp-hn-pl__hd { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.mp-hn-pl__pic { width: 44px; height: 44px; }
.mp-hn-pl h3 { margin: 0; font-size: 17px; }
.mp-hn-pl ul { margin: 0; padding: 0; }
.mp-hn-pl li { list-style: none; display: flex; gap: 10px; padding: 8px 0; border-top: 1px dashed #E6E3DA; font-size: 14px; line-height: 1.65; }
.mp-hn-pl li:first-child { border-top: 0; }
.mp-hn-pl li i { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 900; font-size: 14px; margin-top: 1px; }
.mp-hn-pl li i.is-p { background: #5E7D6A; color: #fff; } .mp-hn-pl li i.is-m { background: #E8DFCF; color: #7A5A0C; }
.mp-hn-rs > div { display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid #EFEDE6; }
.mp-hn-rs > div:first-child { border-top: 0; padding-top: 2px; }
.mp-hn-rs > div > span { flex: none; width: 24px; height: 24px; border-radius: 50%; background: #EFE7D6; color: #7A5A0C; font-weight: 900; font-size: 12.5px; display: grid; place-items: center; }
.mp-hn-rs b { display: block; font-size: 15px; } .mp-hn-rs p { margin: 2px 0 0; font-size: 13.5px; line-height: 1.75; color: var(--mp-sub); }
.mp-hn-hb__t { margin: 0 0 4px; font-weight: 900; }
.mp-hn-hb > div { display: grid; grid-template-columns: 70px 1fr 78px; gap: 8px; align-items: center; font-size: 13.5px; padding: 5px 0; }
.mp-hn-hb i { display: block; height: 18px; border-radius: 5px; background: #A8BFAE; } .mp-hn-hb i.is-hi { background: #C8553D; }
.mp-hn-hb b { text-align: right; }
.mp-hn-cap { font-size: 12px; color: var(--mp-muted); line-height: 1.7; margin: 4px 0 0; }
.mp-hn-ok2 { display: grid; gap: 8px; margin-bottom: 10px; }
.mp-hn-ok2 > div { border-radius: 14px; padding: 12px 14px; font-size: 14px; line-height: 1.75; }
.mp-hn-ok2 b { display: block; } .mp-hn-ok2 .is-g { background: #E9F0EA; } .mp-hn-ok2 .is-y { background: #FBF6EC; }
.mp-hn-list ul { margin: 0; padding-left: 20px; line-height: 2; font-size: 14px; }
.mp-hn-cta { display: block; margin: 16px 0; background: #5E7D6A; color: #fff !important; border-radius: 14px; padding: 15px; text-align: center; font-weight: 900; font-size: 16px; text-decoration: none; }
.mp-hn-adw { margin: 18px 0 8px; border: 1.5px dashed #C9C5B8; border-radius: 14px; padding: 12px 16px; background: #FBFAF6; font-size: 13px; color: var(--mp-muted); line-height: 1.7; }
.mp-hn-adw b { display: block; color: var(--mp-sub); } .mp-hn-adw a { display: inline-block; margin-top: 4px; font-weight: 900; color: #3E5A49; }
.mp-hn-note { font-size: 12px; color: var(--mp-muted); line-height: 1.75; margin: 14px 0 0; }

/* 結果 */
.mp-hn-sum { background: #fff; border-radius: 20px; padding: 18px; box-shadow: 0 0 0 1px #E3E3DA; }
.mp-hn-sum__who { margin: 0; font-size: 13.5px; font-weight: 800; color: var(--mp-sub); }
.mp-hn-sum h1 { margin: 6px 0 0; font-size: 22px; line-height: 1.45; }
.mp-hn-sum h1 em { font-style: normal; color: #C8553D; }
.mp-hn-nt { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 14.5px; }
.mp-hn-nt thead th { font-size: 13.5px; padding: 7px 4px; text-align: center; background: #F6F4EE; }
.mp-hn-nt thead th:first-child { background: none; }
.mp-hn-nt thead small { display: block; font-size: 10.5px; color: var(--mp-muted); font-weight: 700; }
.mp-hn-nt tbody th { text-align: left; font-weight: 700; color: var(--mp-sub); font-size: 13px; padding: 10px 4px; border-top: 1px solid #EFEDE6; }
.mp-hn-nt td { text-align: center; font-weight: 800; padding: 10px 4px; border-top: 1px solid #EFEDE6; white-space: nowrap; }
.mp-hn-sum__ex { margin: 10px 0 0; font-size: 13px; color: var(--mp-sub); line-height: 1.75; }
.mp-hn-tabs { display: flex; background: #E9E7E1; border-radius: 14px; padding: 4px; margin: 16px 0 12px; position: sticky; top: 8px; z-index: 5; }
.mp-hn-tabs button { flex: 1; font: inherit; font-size: 14.5px; font-weight: 900; padding: 10px 0; border: 0; border-radius: 11px; background: none; color: var(--mp-sub); cursor: pointer; }
.mp-hn-tabs .is-on { background: #fff; color: var(--mp-ink); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.mp-hn-how { background: #fff; border-radius: 16px; box-shadow: 0 0 0 1px #E3E3DA; padding: 13px 16px; margin-bottom: 12px; }
.mp-hn-how > b { display: block; font-size: 14.5px; margin-bottom: 4px; }
.mp-hn-how p { margin: 0; font-size: 13.5px; line-height: 1.75; }
.mp-hn-how__s { margin-top: 6px !important; color: var(--mp-muted); font-size: 12px !important; }
.mp-hn-dots { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 10px 0 2px; }
.mp-hn-dots i { width: 16px; height: 16px; border-radius: 50%; background: #DCE5DE; } .mp-hn-dots i.on { background: #C8553D; }
.mp-hn-dots span { font-size: 12.5px; font-weight: 900; color: #C8553D; margin-left: 6px; }
.mp-hn-h3 { font-size: 16px; font-weight: 900; margin: 16px 0 8px; line-height: 1.5; }
.mp-hn-hint { margin: -4px 0 8px; font-size: 12px; color: var(--mp-muted); }
.mp-hn-il { display: grid; gap: 8px; }
.mp-hn-dz { background: #fff; border-radius: 16px; box-shadow: 0 0 0 1px #E3E3DA; overflow: hidden; }
.mp-hn-dz summary { display: flex; align-items: center; gap: 12px; padding: 13px 14px; cursor: pointer; list-style: none; }
.mp-hn-dz summary::-webkit-details-marker { display: none; }
.mp-hn-dz__pc { flex: none; width: 64px; text-align: center; }
.mp-hn-dz__pc b { display: block; font-size: 20px; color: #3E5A49; line-height: 1.15; }
.mp-hn-dz__pc small { font-size: 10.5px; color: var(--mp-muted); }
.mp-hn-dz__tx { flex: 1; min-width: 0; }
.mp-hn-dz__tx b { display: block; font-size: 15.5px; line-height: 1.45; }
.mp-hn-dz__tx small { display: block; font-size: 13px; color: var(--mp-sub); margin-top: 2px; }
.mp-hn-dz__tx em { font-style: normal; color: #C8553D; font-weight: 900; }
.mp-hn-dz summary > i { font-style: normal; color: #A3A79F; font-size: 20px; transition: transform .15s; }
.mp-hn-dz[open] summary > i { transform: rotate(90deg); }
.mp-hn-dz__b { padding: 0 16px 14px; border-top: 1px solid #EFEDE6; }
.mp-hn-dz__b > p { font-size: 14px; line-height: 1.85; margin: 10px 0 4px; }
.mp-hn-dz__b dl { margin: 0; }
.mp-hn-dz__b dl > div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid #EFEDE6; font-size: 14px; }
.mp-hn-dz__b dt { color: var(--mp-muted); flex: none; max-width: 48%; }
.mp-hn-dz__b dd { margin: 0; text-align: right; font-weight: 800; }
.mp-hn-dz__b .is-r dd { color: #C8553D; }
.mp-hn-lab { margin: 0 0 4px; font-size: 13.5px; color: var(--mp-sub); font-weight: 800; }
.mp-hn-pr2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }
.mp-hn-pr2 > div { background: #F6F4EE; border-radius: 12px; padding: 8px 12px; }
.mp-hn-pr2 small { display: block; font-size: 12px; color: var(--mp-muted); font-weight: 800; }
.mp-hn-pr2 b { font-size: 24px; } .mp-hn-pr2 > div + div b { font-size: 20px; color: var(--mp-sub); }
.mp-hn-s { font-size: 13px; color: var(--mp-sub); margin: 6px 0 0; line-height: 1.75; }
.mp-hn-seg { display: flex; gap: 6px; margin-top: 10px; }
.mp-hn-seg button { flex: 1; font: inherit; font-size: 13.5px; font-weight: 900; padding: 8px 0; border-radius: 10px; border: 0; background: #fff; box-shadow: inset 0 0 0 1.5px #D3D4C8; cursor: pointer; color: var(--mp-ink); }
.mp-hn-seg .is-on { background: #5E7D6A; color: #fff; box-shadow: none; }
.mp-hn-warn { margin: 10px 0 0; background: #FBF0D9; color: #7A5A0C; border-radius: 10px; padding: 8px 12px; font-size: 13px; font-weight: 700; }
.mp-hn-sp__r { padding: 10px 0; border-top: 1px solid #EFEDE6; } .mp-hn-sp__r:first-of-type { border-top: 0; }
.mp-hn-sp__h { display: flex; justify-content: space-between; gap: 8px; font-size: 14.5px; } .mp-hn-sp__h small { color: var(--mp-muted); font-size: 12.5px; white-space: nowrap; }
.mp-hn-bar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; margin-top: 6px; }
.mp-hn-bar .g { width: 70%; background: #5E7D6A; } .mp-hn-bar .y { width: 30%; background: #F1E6D3; }
.mp-hn-bl { display: flex; justify-content: space-between; font-size: 12.5px; margin-top: 4px; }
.mp-hn-bl .g { color: #3E5A49; } .mp-hn-bl .y { color: #7A5A0C; } .mp-hn-bl b { font-size: 14px; }
.mp-hn-lg { display: flex; gap: 14px; font-size: 12px; color: var(--mp-sub); margin-top: 8px; }
.mp-hn-lg i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
.mp-hn-lg i.g { background: #5E7D6A; } .mp-hn-lg i.y { background: #F1E6D3; }
.mp-hn-big { margin: 4px 0 0; font-size: 17px; font-weight: 900; line-height: 1.55; } .mp-hn-big em { font-style: normal; color: #C8553D; }
.mp-hn-sv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; }
.mp-hn-sv > div { background: #F6F4EE; border-radius: 12px; padding: 9px 4px; text-align: center; } .mp-hn-sv .is-ok { background: #E9F0EA; }
.mp-hn-sv small { display: block; font-size: 11.5px; color: var(--mp-muted); font-weight: 700; }
.mp-hn-sv b { display: block; font-size: 16px; }
.mp-hn-sv em { display: block; font-style: normal; font-size: 10.5px; color: #C8553D; font-weight: 800; line-height: 1.4; } .mp-hn-sv .is-ok em { color: #3E5A49; }
.mp-hn-vb { display: flex; align-items: flex-end; gap: 4px; height: 160px; margin: 10px 0 34px; border-bottom: 1.5px solid #D3D4C8; }
.mp-hn-vb > div { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-width: 0; }
.mp-hn-vb i { display: block; width: 100%; background: #D6E2D9; border-radius: 5px 5px 0 0; }
.mp-hn-vb .is-hl i { background: #A8BFAE; } .mp-hn-vb .is-now i { background: #C8553D; }
.mp-hn-vb em { font-style: normal; font-size: 9.5px; font-weight: 800; white-space: nowrap; margin-bottom: 3px; }
.mp-hn-vb small { font-size: 10px; color: var(--mp-muted); position: relative; top: 20px; height: 0; white-space: nowrap; }
.mp-hn-chs { display: grid; gap: 8px; margin-bottom: 16px; }
.mp-hn-ch { display: flex; gap: 10px; background: #fff; border-radius: 16px; padding: 13px 14px; box-shadow: 0 0 0 1px #E3E3DA; }
.mp-hn-ch > span { flex: none; width: 26px; height: 26px; border-radius: 50%; background: #5E7D6A; color: #fff; display: grid; place-items: center; font-weight: 900; font-size: 13px; }
.mp-hn-ch b { display: block; font-size: 15px; } .mp-hn-ch p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.75; }
.mp-hn-pp { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
.mp-hn-pp > div { background: #F6F4EE; border-radius: 10px; padding: 8px 10px; }
.mp-hn-pp small { display: block; font-size: 11.5px; font-weight: 900; color: #5E7D6A; } .mp-hn-pp b { display: block; font-size: 14.5px; } .mp-hn-pp em { display: block; font-style: normal; font-size: 11.5px; color: var(--mp-sub); }
.mp-hn-again { display: block; margin: 22px 0 8px; text-align: center; background: #fff; border-radius: 14px; padding: 14px; font-weight: 900; color: var(--mp-ink) !important; text-decoration: none; box-shadow: 0 0 0 1.5px #D3D4C8; }
.mp-hn-back2 { display: block; text-align: center; font-size: 14px; font-weight: 800; color: #3E5A49 !important; margin: 10px 0; }
@media (min-width: 760px) { .mp-hn { max-width: 720px; } .mp-hn-hero h1 { font-size: 28px; } .mp-hn-ages { grid-template-columns: repeat(8, 1fr); } }