/* Asia/Tokyo, 2025-10-03 19:20(UTC+09:00) index.css */
.mobile-badges{ display:none;}
.hl{ background:#f0fffa; color:#009762; padding:0 .2em;}
.hl-liability{ background:#e9f4ff; color:#0057a4; padding:0 .2em;}
.plans{ padding:3rem 0; margin:0;}
.plans-grid{ display:grid; gap:2rem; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));}
.plan-card{ background:#fdffdf; border:2px solid #117713; border-radius:8px; padding:2.4rem; display:flex; flex-direction:column; gap:1rem; text-align:center;}
.plan-card>header{ margin-bottom:2rem;}
.plan-card h3{ font-size:3rem; color:#ff0000; margin:1rem 0 1.5rem;}
.plan-price{ font-size:3.2rem; font-weight:700; margin:0; line-height:1.6; white-space:nowrap;}
.plan-price.small{ font-size:1.8rem; font-weight:400;}
.plan-price strong{ font-size:4rem; line-height:1.2;}
.plan-plus{ display:block; font-size:3rem; line-height:1; color:#e05a00; margin:0; padding:0;}
.feature-group{ --group-color:#009762; border:1px solid var(--group-color,#009762); border-radius:8px; padding:1rem .8rem .8rem; margin:0 0 2.6rem 0; background:#fff; padding-bottom:0;}
.feature-group+.plan-plus{ margin-top:0;}
.plan-card .feature-group{ margin-bottom:0 !important;}
.injury-cover{ --group-color:#009762; background:#f0fffa;}
.liability-cover{ --group-color:#0057a4; background:#e9f4ff;}
.group-title{ margin:0 0 .8rem; font-size:1.8rem; font-weight:700; text-align:center; color:var(--group-color);}
.injury-cover-p{ --group-color:#009762; background:#fff; font-size:1.8rem; line-height:1.6;}
.plan-features{ list-style:none; margin:0; padding:0;}
.plan-features li{ display:flex; justify-content:space-between; align-items:flex-start; gap:.4rem; padding-left:0; margin-bottom:.8rem;}
.plan-features li:last-child{ margin-bottom:0 !important;}
.feature-label{ flex:1 1 auto; text-align:left; line-height:1.6; white-space:normal;}
.amount{ min-width:7.5ch; text-align:right; font-size:1.9rem; font-weight:700; line-height:1.6;}
.btn-secondary{ font-size:2rem; display:inline-block; padding:1rem 2.4rem; border:2px solid #117713; border-radius:4px; font-weight:700; color:#ffffff; background:#117713; transition:.2s;}
.btn-secondary:hover,.btn-secondary:focus{ background:#117713; color:#fff;}
.coverage-summary{ background:#fff;}
.coverage-title{ font-size:2.6rem; font-weight:700; line-height:1.6; text-align:center; margin:0 0 2.4rem;}
.coverage-title .title-hl{ color:#009762;}
.coverage-badges{ display:grid; grid-template-columns:2fr auto 2fr; align-items:center; gap:1rem; margin-bottom:2.4rem;}
.badge{ border:2px solid #009762; border-radius:24px; padding:2rem 1rem; font-size:2.5rem; font-weight:500; color:#009762; background:#fff; text-align:center; white-space:normal;}
.badge.blue{ border-color:#0057a4; color:#0057a4;}
.plus{ font-size:5rem; font-weight:700; color:#e05a00; display:flex; align-items:center; justify-content:center; margin:2rem 0 4rem;}
.coverage-content{ display:grid; gap:2.4rem; grid-template-columns:2fr 2fr;}
.injury-block{ background:#f0fffa; border:2px solid #009762; border-radius:8px; padding:1rem; display:flex; flex-direction:column; gap:1rem; --risk-border:#009762;}
.injury-block h3{ background:#009762; color:#fff; border-radius:4px; padding:.8rem; font-size:2rem; font-weight:700; text-align:center; margin:0;}
.liability{ background:#e9f4ff; border:2px solid #0057a4; border-radius:8px; padding:1rem; display:flex; flex-direction:column; gap:1rem; --risk-border:#0057a4;}
.liability h3{ background:#0057a4; color:#fff; border-radius:4px; padding:.8rem; font-size:2rem; font-weight:700; text-align:center; margin:0;}
.risk-images{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; margin:0; padding:0; list-style:none;}
.risk-item{ width:200px; max-width:200px; padding:1.5rem; border:2px solid var(--risk-border,#333); border-radius:8px; background:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center;}
.risk-item img{ width:auto; height:auto; object-fit:contain;}
.risk-item figcaption{ margin-top:.6rem; font-size:1.9rem; font-weight:700; text-align:center;}
.risk-item figure{ display:flex; flex-direction:inherit; align-items:inherit; justify-content:inherit; width:100%; margin:0;}
.negotiation-box{ border:2px solid #2172c4; border-radius:8px; padding:1rem; background:#fff; display:flex; flex-direction:column; gap:.8rem; margin:0; font-size:1.8rem;}
.negotiation-box h4{ background:#2172c4; color:#fff; border-radius:4px; padding:.4rem; font-size:2rem; font-weight:700; text-align:center; margin:0;}
.negotiation-box h5{ font-size:2rem; font-weight:700; margin:0; text-align:center;}
.negotiation-list{ margin-left:1.6em; list-style:disc outside; font-size:1.8rem; line-height:1.6;}
.negotiation-list li{ margin-bottom:.4rem; font-size:1.8rem;}
.opt{ color:#ffd700; display:inline-block; white-space:nowrap;}
.opt-green{ color:#117713; display:inline-block; white-space:nowrap;}
.opt-red{ color:#ff0000; display:inline-block; white-space:nowrap; font-weight:500;}
.family-example{ background:#fff; padding:0 0 4rem; margin:0;}
.family-lead{ font-size:1.8rem; line-height:1.6; margin-bottom:2.4rem;}
.family-cards{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; align-items:center;}
.family-card{ background:#fdffdf; border:2px solid #117713; border-radius:8px; padding:1.6rem 2rem; text-align:center; width:280px; height:auto; display:flex; flex-direction:column; justify-content:flex-start; align-items:center;}
.family-card .contract-label{ font-size:2rem; font-weight:700; color:#000; margin:0 0 .8rem; line-height:1.2;}
.family-card h3{ font-size:2.5rem; padding:1rem 1rem; color:#ff0000; margin:0 0 .8rem;}
.family-card h4{ font-size:1.8rem; padding:1rem 1rem 0rem; color:#0057a4; margin:0 0 .8rem;}
.family-card .desc{ font-weight:700; margin:0 0 .8rem;}
.family-card .price{ font-size:2.4rem; font-weight:700; margin:0;}
.family-card .price strong{ font-size:3.2rem; line-height:1.2;}
.family-total{ margin-top:4rem; text-align:center; font-size:2.5rem; font-weight:700;}
.family-total .total-num{ font-size:4rem; line-height:1.2; font-weight:700;}
@media (max-width:1024px){ .plan-price{ font-size:2.6rem; line-height:1.3; font-weight:500; white-space:normal; word-break:keep-all;}}
@media (max-width:768px){
  .plans-grid{ grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
  .coverage-content{ grid-template-columns:1fr;}
  .coverage-badges{ grid-template-columns:1fr;}
  .coverage-badges .plus,.coverage-badges .badge.blue{ display:none;}
  .mobile-badges{ display:flex; flex-direction:column; align-items:center; gap:.8rem; width:100%;}
  .mobile-badges .badge{ width:100%; box-sizing:border-box;}
  .mobile-badges .plus{ margin:0; line-height:1;}
  .coverage-content>.mobile-badges{ margin-top:-2.4rem;}
  .risk-images{ flex-direction:column; align-items:center;}
  .injury-block{ margin:0; padding-bottom:0rem; line-height:1;}
  .family-total .total-num{ font-size:3rem;}
  .family-cards{ flex-direction:column; align-items:center;}
  .family-cards .plus{ margin:.8rem 0;}
  .family-card{ width:350px; padding:1rem; height:auto;}
  .plans .plan-card .plan-price strong{ font-size:4rem; line-height:1.1;}
}
@media (max-width:480px){
  .plans-grid{ gap:1rem;}
  .plan-card{ padding:1rem;}
  .plan-card h3{ font-size:3rem; color:#ff0000; margin:2rem;}
  .plan-card>header{ margin-bottom:0;}
  .plan-price strong{ font-size:3rem;}
  .feature-group{ padding:1rem 1rem .8rem; margin-bottom:0;}
  .btn-secondary{ font-size:3rem; padding:2rem 2.4rem;}
  .coverage-title{ font-size:2.1rem;}
  .risk-item{ flex-direction:row; align-items:center; width:100%; max-width:none; padding:.5rem;}
  .risk-item img{ flex:0 0 60px; max-width:90px; height:auto; margin-right:1em;}
  .risk-item figcaption{ flex:1 1 auto; margin:0; font-size:1.6rem; text-align:left;}
  .family-card{ width:100%;}
}
.injury-block h3+.p-midsize,.liability h3+.p-midsize{ margin-top:1rem; margin-bottom:1rem;}
.plan-card .feature-group.injury-cover{ padding-block-end:1.5rem; margin-top:1.5rem;}
.plan-card .feature-group.injury-cover>*:last-child{ margin-block-end:0;}
.plan-card .feature-group.liability-cover{ padding-block-end:1.5rem;}
.plan-card .feature-group.liability-cover>*:last-child{ margin-block-end:0;}
.family-card h4 .note-mark{ color:#a50000;}
.family-card h4 .note-body{ color:#000; font-weight:400;}
.family-card h4.asterisk-note{ color:#000; position:relative; padding-top:1.5rem; padding-left:2rem; font-weight:400;}
.family-card h3{ font-size:4rem; line-height:1.1;}
@media (max-width:480px){ .family-card h3{ font-size:3.4rem;}}
.family-card .price+h4{ margin-top:.6rem;}
.plan-features .feature-label .label-wrap{ display:inline-flex; flex-direction:column; align-items:center;}
.plan-features .feature-label .label-main{ line-height:1.6;}
.plan-features .feature-label .opt-note{ font-size:1.5rem; line-height:1.2; margin-top:.15rem; white-space:nowrap; white-space:normal;}
.feature-group .group-sub{ font-size:1.5rem; line-height:1.4; text-align:center; margin:0 0 .8rem; color:var(--group-color,#333); font-weight:500;}
.hero-box{ max-width:80%; padding:2rem; display:flex; flex-direction:column; gap:2rem; text-align:center; background:rgba(255,255,255,.8); border-radius:12px; box-shadow:0 4px 16px rgba(0,0,0,.15); backdrop-filter:blur(4px); margin-right:var(--hero-offset-pc); margin-left:0; margin-inline:auto; align-items:center;}
.hero-box h1{ font-size:5rem; line-height:1.3; color:#004728;}
.hero-box small{ font-size:3rem; font-weight:500; color:#000000;}
.hero-box .note--hero{ display:block; font-size:2rem; line-height:1.4; color:#555; margin:-.8rem 0 0;}
.btn-primary{ align-self:center; display:inline-block; padding:1.6rem 4rem; font-size:3rem; font-weight:700; color:#eeff00; background:#117713; border-radius:6px; transition:.25s;}
.btn-primary:hover,.btn-primary:focus{ background:#0c5d0f;}
@media (max-width:480px){
  .plan-features li{ gap:.4rem; padding-left:0; margin-bottom:0rem;}
  .plan-features li:last-child{ margin-bottom:0 !important;}
  .plan-plus{ line-height:.5; margin:0; padding:0; font-weight:700;}
  .group-title{ margin:0 0 .8rem; font-size:2.4rem; font-weight:700; text-align:center; color:var(--group-color);}
}
@media (max-width:1000px){
  .hero-box{ max-width:80%; padding:3rem; display:flex; flex-direction:column; gap:1rem; text-align:center; background:rgba(255,255,255,.8); border-radius:12px; box-shadow:0 4px 16px rgba(0,0,0,.15); backdrop-filter:blur(4px); margin-right:var(--hero-offset-pc); margin-left:0; margin-inline:auto; align-items:center;}
  .hero-box h1{ font-size:4rem;}
  .hero-box small{ font-size:2rem;}
  .hero-box .note--hero{ margin:-.4rem 0 0; font-size:1.4rem;}
  .btn-primary{ font-size:2rem; padding:1.2rem 3rem;}
}
@media (max-width:768px){
  .hero-box{ max-width:100%; max-height:100%; padding:.8rem; gap:.8rem;}
  .hero-box h1{ font-size:2.8rem; margin:-.4rem 0 -1rem;}
  .hero-box small{ font-size:1.8rem;}
  .hero-box .note--hero{ margin:-.4rem 0 0; font-size:1.4rem;}
  .btn-primary{ font-size:1.6rem; padding:.5rem 2rem;}
}
@media (max-width:480px){
  .hero-box{ max-width:100%; max-height:100%; padding:.8em; gap:.2rem;}
  .hero-box h1{ font-size:2.5rem; margin:-.4rem 0 -1rem;}
  .hero-box small{ font-size:1.5rem;}
  .hero-box .note--hero{ margin:0 0 -1rem; font-size:1.2rem;}
  .btn-primary{ font-size:1.4rem; padding:.3rem 1rem; margin:0rem; border-radius:6px;}
}