@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500;600;700;800;900&display=swap");

:root {
  --red: #e60012;
  --black: #111;
  --gray: #666;
  --light: #f6f6f6;
  --line: #e5e5e5;
  --white: #fff;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif; color: var(--black); line-height: 1.85; background: var(--white); font-weight: 500; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
.wrap { width: min(1120px, calc(100% - 36px)); margin: auto; }
.site-header { background: var(--white); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.header-main { min-height: 82px; display: flex; align-items: center; gap: 28px; }
.logo-link { display: flex; align-items: center; text-decoration: none; flex: 0 0 auto; }
.logo-img { display: block; width: 190px; max-height: 58px; object-fit: contain; }
.header-nav { margin-left: auto; display: flex; align-items: center; gap: 22px; font-size: 14px; font-weight: 700; }
.header-nav a { text-decoration: none; }
.phone { font-size: 18px; font-weight: 800; white-space: nowrap; }
.contact-btn { background: var(--black); color: var(--white); padding: 12px 18px; text-decoration: none; font-weight: 800; }
.subnav { background: var(--black); color: var(--white); }
.subnav .wrap { display: flex; gap: 0; overflow: auto; }
.subnav a { text-decoration: none; padding: 11px 15px; font-size: 13px; white-space: nowrap; border-right: 1px solid #333; }
.breadcrumb { font-size: 12px; color: #777; padding: 15px 0; }
.hero { background: var(--black); color: var(--white); padding: 66px 0 58px; border-bottom: 6px solid var(--red); }
.hero .eyebrow { font-size: 13px; font-weight: 800; letter-spacing: .15em; color: #ddd; }
h1 { font-size: clamp(32px, 5vw, 52px); line-height: 1.3; margin: 13px 0 18px; }
.hero p { max-width: 820px; font-size: 17px; color: #e7e7e7; }
.pills { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 25px; }
.pill { border: 1px solid #555; border-radius: 999px; padding: 7px 12px; font-size: 12px; }
section { padding: 62px 0; }
.gray { background: var(--light); }
.kicker { color: var(--red); font-weight: 900; letter-spacing: .12em; font-size: 12px; }
h2 { font-size: 31px; line-height: 1.45; margin: 8px 0 12px; }
.lead { max-width: 880px; color: #555; }
.note { border-left: 4px solid var(--red); background: #fff7f7; padding: 18px 20px; margin-top: 25px; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 26px; }
.card { background: var(--white); border: 1px solid var(--line); padding: 26px; }
.card h3 { font-size: 21px; line-height: 1.5; margin: 4px 0 9px; }
.label { display: inline-block; background: var(--black); color: var(--white); font-size: 11px; font-weight: 800; padding: 4px 9px; }
.card ul { padding-left: 1.2em; }
.card li { margin: 6px 0; }
.official { display: inline-block; margin-top: 11px; font-weight: 800; text-decoration: none; border-bottom: 2px solid var(--red); }
.material-note { font-size: 13px; color: var(--gray); margin-top: 18px; }
.spec { width: 100%; border-collapse: collapse; margin-top: 24px; background: var(--white); }
.spec th, .spec td { padding: 15px 17px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.spec th { width: 28%; background: #fafafa; }
.faq details { border-top: 1px solid var(--line); padding: 18px 0; }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { font-weight: 800; cursor: pointer; }
.cta-section { background: var(--black); color: var(--white); text-align: center; padding: 52px 0; }
.cta-section h2 { margin-top: 0; }
.cta-section p { color: #ddd; }
.red-btn { display: inline-block; background: var(--red); color: var(--white); text-decoration: none; font-weight: 900; padding: 13px 22px; margin-top: 10px; }
.site-footer { background: #0d0d0d; color: #eee; padding: 48px 0 20px; }
.footer-grid { display: grid; grid-template-columns: 1.5fr .8fr .8fr; gap: 34px; }
.footer-logo { background: var(--white); padding: 10px 14px; display: inline-block; }
.footer-logo img { display: block; width: 160px; }
.site-footer h3 { font-size: 14px; margin: 0 0 10px; }
.site-footer p, .site-footer li, .site-footer a { font-size: 13px; color: #bbb; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer a { text-decoration: none; }
.copyright { border-top: 1px solid #333; margin-top: 35px; padding-top: 18px; font-size: 12px; color: #999; }
.fixed-note { background: var(--white); border: 1px solid var(--line); padding: 18px 20px; margin-top: 20px; }

@media (max-width: 820px) {
  .header-nav a:not(.contact-btn), .phone { display: none; }
  .logo-img { width: 150px; }
  .grid, .footer-grid { grid-template-columns: 1fr; }
  .hero { padding: 45px 0; }
  .spec th, .spec td { display: block; width: 100%; }
  .spec th { padding-bottom: 5px; }
  .spec td { padding-top: 5px; }
}