:root {
  --blue: #2563eb;
  --blue-dark: #1646b5;
  --navy: #10234f;
  --ink: #14213d;
  --muted: #5f6f87;
  --pale: #eff6ff;
  --surface: #f6f8fc;
  --line: #dce5f1;
  --white: #fff;
  --shadow: 0 18px 50px rgba(20, 43, 87, .11);
  --radius: 18px;
  --content: 1180px;
  --hero-content: 1160px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  color: var(--ink);
  background: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  letter-spacing: .015em;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
.skipLink { position: fixed; top: -80px; left: 12px; z-index: 100; padding: 12px 18px; border-radius: 6px; background: var(--navy); color: #fff; font-weight: 800; }
.skipLink:focus { top: 12px; }
a:focus-visible, summary:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid #fbbf24; outline-offset: 3px; }

.header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 38px;
  height: 80px;
  padding: 0 max(4vw, 22px);
  border-bottom: 1px solid rgba(220, 229, 241, .9);
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(12px);
}
.logo { display: inline-flex; align-items: center; gap: 11px; flex: 0 0 auto; color: var(--navy); font-weight: 900; letter-spacing: .06em; }
.logo > img { width: 46px; height: 46px; padding: 0; border: 0; border-radius: 0; background: transparent; object-fit: contain; filter: none; }
.logo b { font-size: 15px; line-height: 1; }
.logo small { display: block; margin-top: 6px; color: #7d8aa0; font-size: 7px; letter-spacing: .18em; }
.header nav { display: flex; align-items: center; gap: 27px; margin-left: auto; }
.header nav a { position: relative; padding: 30px 0 26px; color: #34445e; font-size: 13px; font-weight: 800; }
.header nav a::after { position: absolute; right: 0; bottom: 21px; left: 0; height: 2px; background: var(--blue); content: ""; transform: scaleX(0); transition: transform .2s; }
.header nav a:hover { color: var(--blue); }
.header nav a:hover::after { transform: scaleX(1); }
.headerActions { display: flex; align-items: stretch; gap: 8px; }
.headerServiceButton { display: grid; place-content: center; min-width: 148px; padding: 8px 15px; border: 1px solid #cbd5e1; border-radius: 8px; background: #f1f5f9; color: #1e293b; text-align: center; font-size: 12px; font-weight: 900; line-height: 1.25; box-shadow: 0 7px 18px rgba(71, 85, 105, .12); transition: border-color .2s, background .2s, transform .2s; }
.headerServiceButton small { margin-bottom: 3px; color: #64748b; font-size: 8px; font-weight: 800; }
.headerServiceButton span { display: flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
.headerServiceButton i { color: var(--blue); font-size: 14px; font-style: normal; line-height: 1; }
.headerServiceButton:hover { border-color: #94a3b8; background: #e2e8f0; transform: translateY(-1px); }
.headerLineButton { display: inline-flex; align-items: center; justify-content: center; min-width: 104px; padding: 0 17px; border-radius: 8px; background: #06c755; color: #fff; font-size: 13px; font-weight: 900; box-shadow: 0 10px 22px rgba(6, 199, 85, .18); }
.headerLineButton span { margin-left: 2px; }
.headerLineButton:hover { background: #05b84d; transform: translateY(-1px); }
.headerButton { display: grid; min-width: 166px; padding: 10px 19px; border-radius: 8px; background: var(--blue); color: #fff; text-align: center; font-size: 13px; font-weight: 900; box-shadow: 0 10px 22px rgba(37, 99, 235, .2); }
.headerButton small { margin-bottom: 2px; color: #dbeafe; font-size: 9px; font-weight: 700; }

.hero { padding: 56px max(4vw, 22px) 48px; background: linear-gradient(180deg, #f8fbff, #fff); overflow: hidden; }
.heroInner { display: grid; grid-template-columns: .91fr 1.09fr; gap: clamp(42px, 6vw, 84px); align-items: center; width: min(var(--hero-content), 100%); margin: auto; }
.heroContent { position: relative; z-index: 2; padding: 24px 0; }
.eyebrow, .sectionHeading > div > p, .sectionHeading:not(.splitHeading) > p, .areaIntro > p, .contactIntro > p {
  margin: 0;
  color: var(--blue);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .18em;
}
.eyebrow { display: flex; align-items: center; gap: 10px; }
.eyebrow::before { width: 28px; height: 2px; background: var(--blue); content: ""; }
.hero h1 { margin: 20px 0 22px; color: var(--navy); font-size: clamp(43px, 4.7vw, 68px); line-height: 1.16; letter-spacing: -.025em; }
.hero h1 strong { color: var(--blue); }
.hero h1 span { font-size: .72em; letter-spacing: -.01em; }
.heroLead { margin: 0; color: #4d5e77; font-size: 16px; line-height: 1.95; }
.heroButtons { display: flex; gap: 12px; margin: 31px 0 25px; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 23px; border-radius: 8px; font-size: 14px; font-weight: 900; }
.button.primary { min-width: 250px; background: var(--blue); color: #fff; box-shadow: 0 13px 28px rgba(37, 99, 235, .23); }
.button.primary span { margin-left: auto; padding-left: 22px; font-size: 18px; }
.button.secondary { border: 1px solid #b8c8df; background: #fff; color: var(--navy); }
.button:hover, .headerButton:hover, .planButton:hover { filter: brightness(.96); transform: translateY(-1px); }
.heroProof { display: flex; flex-wrap: wrap; gap: 10px 19px; margin: 0; padding: 0; list-style: none; color: #42536d; font-size: 12px; font-weight: 800; }
.heroProof li::before { margin-right: 6px; color: var(--blue); content: "✓"; font-weight: 900; }
.heroPhone { display: flex; align-items: baseline; gap: 12px; margin: 23px 0 0; color: #748198; font-size: 11px; font-weight: 800; }
.heroPhone a { color: var(--navy); font-size: 21px; letter-spacing: .03em; }
.heroVisual { position: relative; min-width: 0; padding: 0 0 27px 27px; }
.heroVisual::before { position: absolute; inset: 38px 34px 0 0; border-radius: 28px; background: #dbeafe; content: ""; transform: translate(25px, 26px); }
.heroVisual::after { position: absolute; top: -27px; right: -36px; width: 160px; height: 160px; border: 1px solid #bfd5ff; border-radius: 50%; content: ""; }
.heroVisual > img { position: relative; z-index: 1; width: 100%; height: 520px; border-radius: 28px 28px 72px 28px; object-fit: cover; object-position: 52% center; box-shadow: var(--shadow); }
.heroPrice { position: absolute; right: -22px; bottom: 2px; z-index: 3; width: 236px; padding: 18px 20px; border: 1px solid rgba(255, 255, 255, .55); border-radius: 14px; background: rgba(16, 35, 79, .95); color: #fff; box-shadow: 0 16px 34px rgba(16, 35, 79, .25); }
.heroPrice > small { display: block; margin-bottom: 4px; color: #bfdbfe; font-size: 10px; font-weight: 700; }
.heroPrice strong { font-size: 34px; letter-spacing: -.02em; }
.heroPrice strong span { margin-right: 4px; font-size: 11px; }
.heroPrice em { margin-left: 4px; font-size: 10px; font-style: normal; }
.heroPrice > b { display: block; margin-top: 7px; padding-top: 7px; border-top: 1px solid rgba(255, 255, 255, .2); color: #dbeafe; font-size: 10px; }

.trustBar { display: grid; grid-template-columns: repeat(3, 1fr); width: min(var(--content), calc(100% - 44px)); margin: 0 auto; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 10px 35px rgba(20, 43, 87, .07); }
.trustBar article { display: flex; align-items: center; gap: 17px; min-width: 0; padding: 23px 28px; }
.trustBar article + article { border-left: 1px solid var(--line); }
.trustBar article > span { color: #a8bfe9; font-size: 11px; font-weight: 900; }
.trustBar strong { display: block; margin-bottom: 5px; color: var(--navy); font-size: 14px; }
.trustBar p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.55; }

.section { padding: 105px max(4vw, 22px); }
.sectionHeading { width: min(var(--content), 100%); margin-right: auto; margin-left: auto; }
.sectionHeading h2 { margin: 13px 0 0; color: var(--navy); font-size: clamp(32px, 3.8vw, 49px); line-height: 1.34; letter-spacing: -.02em; }
.sectionHeading > span { display: block; margin-top: 17px; color: var(--muted); font-size: 14px; line-height: 1.9; }
.sectionHeading.center { margin-bottom: 48px; text-align: center; }
.splitHeading { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 50px; }
.headingLead { margin: 0 0 5px; color: var(--muted); font-size: 14px; line-height: 1.9; }
.sectionHeading.light h2 { color: #fff; }
.sectionHeading.light > span { color: #bfd3f3; }

.painSection { background: var(--surface); }
.painGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; width: min(var(--content), 100%); margin: auto; }
.painCard { display: flex; gap: 20px; min-height: 158px; padding: 28px 25px; border: 1px solid #e1e8f1; border-radius: 12px; background: #fff; }
.painCard > span { display: grid; place-items: center; flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; background: var(--pale); color: var(--blue); font-size: 10px; font-weight: 900; }
.painCard h3 { margin: 5px 0 11px; color: var(--navy); font-size: 17px; }
.painCard p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.75; }

.serviceGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; width: min(var(--content), 100%); margin: auto; }
.serviceCard { position: relative; min-height: 250px; padding: 31px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; transition: transform .2s, box-shadow .2s, border-color .2s; }
.serviceCard:hover { border-color: #aac5f7; box-shadow: var(--shadow); transform: translateY(-4px); }
.serviceCard i { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 25px; border-radius: 13px; background: var(--pale); color: var(--blue); font-size: 23px; font-style: normal; font-weight: 900; }
.serviceCard > span { position: absolute; top: 35px; right: 31px; color: #bdc9da; font-size: 10px; font-weight: 900; }
.serviceCard h3 { margin: 0 0 12px; color: var(--navy); font-size: 19px; }
.serviceCard p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.8; }

.emergencySection { padding: 72px max(4vw, 22px) 105px; background: #fff; }
.emergencyInner { display: grid; grid-template-columns: .82fr 1.18fr; width: min(var(--content), 100%); margin: auto; overflow: hidden; border: 1px solid #d9e2ee; border-radius: 23px; background: #fff; box-shadow: 0 20px 55px rgba(20, 43, 87, .1); }
.emergencyIntro { display: flex; flex-direction: column; justify-content: center; padding: 52px 45px; background: linear-gradient(145deg, #10234f, #173978); color: #fff; }
.emergencyIntro > p:first-child { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; color: #90b7ff; font-size: 10px; font-weight: 900; letter-spacing: .15em; }
.emergencyIntro > p:first-child span { padding: 6px 9px; border-radius: 999px; background: #f97316; color: #fff; font-size: 9px; letter-spacing: .04em; }
.emergencyIntro h2 { margin: 18px 0; font-size: clamp(31px, 3.1vw, 43px); line-height: 1.4; letter-spacing: -.02em; }
.emergencyLead { margin: 0; color: #cad9f1; font-size: 14px; line-height: 1.9; }
.emergencyIntro > a { display: flex; align-items: center; justify-content: space-between; margin-top: 28px; padding: 15px 17px; border-radius: 8px; background: #f97316; color: #fff; font-size: 12px; font-weight: 900; }
.emergencyIntro > a span { font-size: 17px; }
.emergencyPanel { padding: 43px 40px 34px; }
.emergencyLabel { margin: 0 0 21px; color: var(--navy); font-size: 14px; font-weight: 900; }
.emergencyGrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 11px; }
.emergencyGrid article { display: flex; gap: 12px; min-height: 92px; padding: 16px; border: 1px solid #e2e8f1; border-radius: 10px; background: #f9fbfe; }
.emergencyGrid i { display: grid; place-items: center; flex: 0 0 auto; width: 27px; height: 27px; border-radius: 50%; background: #ffedd5; color: #ea580c; font-size: 13px; font-style: normal; font-weight: 900; }
.emergencyGrid h3 { margin: 3px 0 6px; color: var(--navy); font-size: 14px; }
.emergencyGrid p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.emergencyScope { margin-top: 18px; padding: 16px 18px; border-left: 4px solid #f97316; border-radius: 6px; background: #fff7ed; }
.emergencyScope strong { display: block; margin-bottom: 7px; color: #9a3412; font-size: 13px; }
.emergencyScope p { margin: 0; color: #6f4b3a; font-size: 12px; line-height: 1.75; }
.emergencyCaution { margin: 13px 0 0; color: #778499; font-size: 11px; line-height: 1.65; }

.priceSection { background: #f4f8ff; }
.priceSummary { display: flex; align-items: stretch; justify-content: center; gap: 14px; width: min(900px, 100%); margin: -18px auto 40px; }
.priceSummary > p { display: grid; flex: 1; gap: 5px; margin: 0; padding: 18px 22px; border: 1px solid var(--line); border-radius: 12px; background: #fff; text-align: center; box-shadow: 0 10px 28px rgba(20, 43, 87, .06); }
.priceSummary > p.recommended { border: 2px solid var(--blue); background: #f0f6ff; }
.priceSummary small { color: var(--muted); font-size: 10px; font-weight: 800; }
.priceSummary strong { color: var(--navy); font-size: 18px; }
.priceSummary span { color: #66758b; font-size: 11px; }
.priceSummary > i { align-self: center; color: #91a1b9; font-size: 17px; font-style: normal; font-weight: 900; }
.priceGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; width: min(var(--content), 100%); margin: auto; }
.planCard { position: relative; display: flex; flex-direction: column; padding: 31px 28px 28px; border: 1px solid #cfdaea; border-radius: 16px; background: #fff; box-shadow: 0 10px 28px rgba(20, 43, 87, .06); }
.planCard.featured { border: 2px solid var(--blue); box-shadow: 0 18px 42px rgba(37, 99, 235, .15); }
.popular { position: absolute; top: -15px; left: 50%; min-width: 94px; padding: 7px 17px; border-radius: 999px; background: var(--blue); color: #fff; text-align: center; font-size: 11px; transform: translateX(-50%); }
.planHead { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding-bottom: 19px; border-bottom: 1px solid var(--line); }
.planHead p { margin: 0 0 6px; color: var(--blue); font-size: 9px; font-weight: 900; letter-spacing: .17em; }
.planHead h3 { margin: 0; color: var(--navy); font-size: 23px; }
.planHead > span { color: #79879b; font-size: 10px; }
.planPrice { display: flex; align-items: baseline; justify-content: center; min-height: 92px; padding: 24px 0 12px; }
.planPrice small { margin-right: 6px; color: #596980; font-size: 11px; font-weight: 800; }
.planPrice strong { color: var(--navy); font-size: 39px; letter-spacing: -.04em; }
.planPrice > span { margin-left: 4px; color: var(--navy); font-size: 12px; font-weight: 800; }
.planPrice em { display: block; margin-top: 2px; color: #7b8799; font-size: 8px; font-style: normal; font-weight: 400; }
.planPrice.custom strong { font-size: 28px; letter-spacing: 0; }
.planFor { margin: 0 0 17px; text-align: center; color: var(--blue-dark); font-size: 12px; font-weight: 900; }
.planHighlights { flex: 1; margin: 0; padding: 0; list-style: none; }
.planHighlights li { position: relative; padding: 11px 0 11px 24px; border-bottom: 1px solid #edf1f6; color: #42526b; font-size: 13px; line-height: 1.55; }
.planHighlights li::before { position: absolute; left: 1px; color: var(--blue); content: "✓"; font-weight: 900; }
.planHighlights li.notIncluded { color: #7b8799; }
.planHighlights li.notIncluded::before { color: #94a3b8; content: "—"; }
.planMore { margin: 18px 0; border: 1px solid var(--line); border-radius: 8px; background: #f9fbfe; }
.planMore summary { display: flex; align-items: center; justify-content: space-between; padding: 13px 14px; color: var(--navy); font-size: 11px; font-weight: 900; cursor: pointer; list-style: none; }
.planMore summary::-webkit-details-marker { display: none; }
.planMore summary i { color: var(--blue); font-size: 16px; font-style: normal; transition: transform .2s; }
.planMore[open] summary i { transform: rotate(45deg); }
.planMore ol { margin: 0; padding: 0 17px 16px 38px; color: var(--muted); font-size: 11px; line-height: 1.85; }
.planButton { display: block; margin-top: auto; padding: 15px; border: 1px solid var(--blue); border-radius: 8px; color: var(--blue); text-align: center; font-size: 13px; font-weight: 900; }
.featured .planButton { background: var(--blue); color: #fff; }
.priceNotes { width: min(920px, 100%); margin: 29px auto 0; padding: 22px 25px; border: 1px solid #d7e5fa; border-radius: 10px; background: #fff; text-align: center; }
.priceNotes p { margin: 0 0 8px; color: var(--muted); font-size: 11px; line-height: 1.75; }
.priceNotes strong { color: var(--navy); }
.priceNotes a { display: inline-block; margin-top: 6px; color: var(--blue); font-size: 12px; font-weight: 900; text-decoration: underline; text-underline-offset: 3px; }

.otherSection { display: grid; grid-template-columns: .76fr 1.24fr; gap: clamp(48px, 7vw, 90px); align-items: start; background: var(--navy); color: #fff; }
.otherSection > .sectionHeading { position: sticky; top: 115px; }
.otherServicesColumn { min-width: 0; }
.otherGrid { width: 100%; border-top: 1px solid rgba(255, 255, 255, .2); }
.otherGrid article { display: grid; grid-template-columns: 40px 1fr 46px; gap: 17px; align-items: center; padding: 26px 0; border-bottom: 1px solid rgba(255, 255, 255, .2); }
.otherGrid article > span { color: #7eafff; font-size: 10px; font-weight: 900; }
.otherGrid h3 { margin: 0 0 8px; font-size: 18px; }
.otherGrid p { margin: 0; color: #bcd0ef; font-size: 12px; line-height: 1.75; }
.otherGrid a { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #6da0f3; border-radius: 50%; color: #fff; font-size: 18px; transition: background .2s; }
.otherGrid a:hover { background: var(--blue); }
.otherServiceBanner { display: grid; gap: 9px; margin-top: 28px; padding: 24px 26px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 18px; background: linear-gradient(135deg, #fff 0%, #eaf2ff 100%); color: var(--navy); box-shadow: 0 18px 45px rgba(0, 0, 0, .18); transition: transform .2s, box-shadow .2s; }
.otherServiceBanner:hover { transform: translateY(-3px); box-shadow: 0 22px 55px rgba(0, 0, 0, .25); }
.otherServiceBanner > small { color: var(--blue-dark); font-size: 10px; font-weight: 900; letter-spacing: .14em; }
.otherServiceBanner > strong { font-size: clamp(19px, 2vw, 25px); line-height: 1.45; }
.otherServiceBanner > span { color: #52627a; font-size: 13px; line-height: 1.75; }
.otherServiceBanner > b { display: flex; align-items: center; justify-content: space-between; margin-top: 5px; color: var(--blue-dark); font-size: 14px; }
.otherServiceBanner i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--blue); color: #fff; font-style: normal; }

.takeoverSection {
  position: relative;
  overflow: hidden;
  padding: 105px max(4vw, 22px);
  background: linear-gradient(135deg, #0d1e3d 0%, #173d7d 58%, #1d4f9d 100%);
  color: #fff;
}
.takeoverSection::after {
  position: absolute;
  right: -28px;
  bottom: -41px;
  color: rgba(255, 255, 255, .045);
  content: "TAKEOVER";
  font-size: clamp(75px, 13vw, 190px);
  font-weight: 900;
  letter-spacing: -.06em;
  line-height: .8;
  pointer-events: none;
}
.takeoverInner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: clamp(52px, 7vw, 92px);
  align-items: center;
  width: min(var(--content), 100%);
  margin: auto;
}
.takeoverCopy > p {
  margin: 0;
  color: #93c5fd;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .18em;
}
.takeoverCopy h2 {
  margin: 16px 0 20px;
  color: #fff;
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.35;
  letter-spacing: -.025em;
}
.takeoverCopy > span {
  display: block;
  color: #d6e5fb;
  font-size: 14px;
  line-height: 1.95;
}
.takeoverCopy ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px 16px;
  margin: 27px 0 29px;
  padding: 0;
  list-style: none;
}
.takeoverCopy li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: #f0f6ff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.6;
}
.takeoverCopy li::before {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  background: #3b82f6;
  color: #fff;
  content: "✓";
  font-size: 10px;
}
.takeoverCopy > a {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  min-width: 290px;
  padding: 17px 20px;
  border-radius: 9px;
  background: #fff;
  color: #123b78;
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .2);
}
.takeoverCopy > a::after { margin-left: 25px; content: "→"; font-size: 18px; }
.takeoverCopy > a:hover { transform: translateY(-2px); }
.takeoverCopy > small { display: block; margin-top: 12px; color: #afc9ec; font-size: 10px; }
.takeoverMedia { position: relative; z-index: 1; min-width: 0; }
.takeoverSteps { display: grid; gap: 12px; }
.takeoverSteps article {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 18px;
  align-items: center;
  padding: 21px 23px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 14px;
  background: rgba(255, 255, 255, .09);
  backdrop-filter: blur(5px);
}
.takeoverSteps article > b {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: rgba(147, 197, 253, .16);
  color: #bfdbfe;
  font-size: 11px;
  letter-spacing: .08em;
}
.takeoverSteps h3 { margin: 0 0 5px; color: #fff; font-size: 20px; }
.takeoverSteps article p { margin: 0; color: #c9dbf3; font-size: 11px; line-height: 1.7; }
.takeoverSteps > p {
  margin: 7px 0 0;
  padding: 18px 20px;
  border-radius: 12px;
  background: #facc15;
  color: #172033;
  text-align: center;
  font-size: 12px;
  font-weight: 800;
}
.takeoverSteps > p strong { display: block; margin-top: 4px; font-size: 22px; letter-spacing: .04em; }

.casesSection { background: #fff; }
.worksGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; width: min(var(--content), 100%); margin: auto; }
.workCard { overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: #fff; transition: transform .2s, box-shadow .2s; }
.workCard:hover { box-shadow: var(--shadow); transform: translateY(-4px); }
.workCard img { width: 100%; aspect-ratio: 16 / 10; border-bottom: 1px solid var(--line); object-fit: cover; object-position: top; }
.workCard > div { padding: 23px; }
.workCard span { color: var(--blue); font-size: 10px; font-weight: 900; }
.workCard h3 { min-height: 52px; margin: 9px 0 8px; color: var(--navy); font-size: 17px; line-height: 1.55; }
.workCard small { display: block; margin-bottom: 20px; color: #778499; font-size: 10px; }
.workCard p { margin: 0; color: var(--blue); font-size: 11px; font-weight: 900; }
.worksNote { margin: 25px auto 0; color: #778499; text-align: center; font-size: 10px; line-height: 1.7; }

.contractSection { padding: 95px max(4vw, 22px); background: #173978; color: #fff; text-align: center; }
.contractGrid { display: grid; grid-template-columns: repeat(3, 1fr); width: min(1050px, 100%); margin: 0 auto 30px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 14px; background: rgba(255, 255, 255, .08); }
.contractGrid article { display: flex; gap: 19px; padding: 31px 27px; text-align: left; }
.contractGrid article + article { border-left: 1px solid rgba(255, 255, 255, .2); }
.contractGrid article > span { display: grid; place-items: center; flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; background: #fff; color: var(--blue); font-size: 10px; font-weight: 900; }
.contractGrid h3 { margin: 4px 0 9px; font-size: 17px; }
.contractGrid p { margin: 0; color: #c5d7f2; font-size: 11px; line-height: 1.75; }
.contractLink { display: inline-block; padding: 14px 21px; border: 1px solid #8ab4fa; border-radius: 8px; color: #fff; font-size: 12px; font-weight: 900; }

.faqSection { background: var(--surface); }
.faqList { width: min(900px, 100%); margin: auto; }
.faqList details { margin-bottom: 12px; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.faqList summary { display: flex; align-items: center; gap: 16px; padding: 21px 24px; color: var(--navy); font-size: 15px; font-weight: 800; cursor: pointer; list-style: none; }
.faqList summary::-webkit-details-marker { display: none; }
.faqList summary > span, .faqList details p b { color: var(--blue); font-size: 18px; }
.faqList summary i { margin-left: auto; color: var(--blue); font-size: 20px; font-style: normal; transition: transform .2s; }
.faqList details[open] summary i { transform: rotate(45deg); }
.faqList details p { display: flex; gap: 18px; margin: 0; padding: 0 25px 22px 59px; color: var(--muted); font-size: 13px; line-height: 1.85; }

.areaSection { padding: 88px max(4vw, 22px); text-align: center; }
.areaIntro h2 { margin: 12px 0 15px; color: var(--navy); font-size: clamp(31px, 3.7vw, 47px); }
.areaIntro span, .areaSection > p { color: var(--muted); font-size: 13px; line-height: 1.8; }
.areaSection ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; width: min(900px, 100%); margin: 31px auto 21px; padding: 0; list-style: none; }
.areaSection li { padding: 10px 17px; border: 1px solid #cbd9ec; border-radius: 999px; background: #f7faff; color: #193d78; font-size: 12px; font-weight: 900; }
.areaSection > p { margin: 0; }

.contact { padding: 98px max(4vw, 22px); background: linear-gradient(135deg, #102a63, #1f5bd6); color: #fff; }
.contactInner { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(55px, 8vw, 100px); align-items: start; width: min(1080px, 100%); margin: auto; }
.contactIntro > p { color: #8fb7ff; }
.contactIntro h2 { margin: 15px 0 20px; font-size: clamp(36px, 3.3vw, 42px); line-height: 1.35; letter-spacing: -.02em; }
.contactIntro > span { color: #c8d9f2; font-size: 13px; line-height: 1.9; }
.contactIntro ul { margin: 25px 0 29px; padding: 0; list-style: none; color: #e4eeff; font-size: 12px; line-height: 2.05; }
.contactIntro li::before { margin-right: 8px; color: #78a9ff; content: "✓"; font-weight: 900; }
.contactIntro > a { display: inline-flex; flex-direction: column; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .25); font-size: 25px; font-weight: 900; letter-spacing: .04em; }
.contactIntro > a small { margin-bottom: 5px; color: #a9c4ed; font-size: 10px; letter-spacing: .05em; }
.lineContact { display: grid; grid-template-columns: 112px 1fr; gap: 17px; align-items: center; margin-top: 30px; padding: 15px; border-radius: 13px; background: #fff; color: var(--ink); box-shadow: 0 16px 36px rgba(4, 21, 57, .18); }
.lineContact img { width: 112px; height: 112px; border-radius: 8px; object-fit: cover; }
.lineContact small { display: block; margin-bottom: 5px; color: #06c755; font-size: 9px; font-weight: 900; letter-spacing: .14em; }
.lineContact h3 { margin: 0 0 7px; color: var(--navy); font-size: 16px; line-height: 1.45; }
.lineContact p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.65; }
.lineContact div > a { display: inline-flex; align-items: center; justify-content: center; margin-top: 10px; padding: 9px 12px; border-radius: 7px; background: #06c755; color: #fff; font-size: 10px; font-weight: 900; }
.contact form { padding: 35px 38px 30px; border-radius: 16px; background: #fff; color: var(--ink); box-shadow: 0 22px 55px rgba(4, 21, 57, .23); }
.formHeading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 25px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.formHeading p { margin: 0; color: var(--navy); font-size: 15px; font-weight: 900; }
.formHeading > span { color: #8491a4; font-size: 9px; }
.formHeading i { display: inline-grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; background: var(--pale); color: var(--blue); font-style: normal; font-weight: 900; }
.contact form > label:not(.privacyAgree) { display: block; margin-bottom: 18px; color: #31415a; font-size: 14px; font-weight: 900; }
.contact form > label:not(.privacyAgree) > span, .contact form > label:not(.privacyAgree) > em { float: right; padding: 3px 6px; border-radius: 4px; font-size: 9px; font-style: normal; }
.contact form > label:not(.privacyAgree) > span { background: #fee2e2; color: #c62828; }
.contact form > label:not(.privacyAgree) > em { background: #eef2f7; color: #738096; }
.contact input, .contact select, .contact textarea { display: block; width: 100%; margin-top: 8px; padding: 13px 14px; border: 1px solid #cbd5e1; border-radius: 7px; background: #fbfcfe; color: var(--ink); font-size: 15px; resize: vertical; }
.contact input:focus, .contact select:focus, .contact textarea:focus { border-color: var(--blue); background: #fff; outline: 3px solid #dbeafe; outline-offset: 0; }
.privacyAgree { display: flex; align-items: flex-start; gap: 9px; margin: 3px 0 18px; color: #526079; font-size: 11px; line-height: 1.7; }
.privacyAgree input { flex: 0 0 auto; width: 17px; height: 17px; margin: 2px 0 0; }
.privacyAgree a { color: var(--blue); font-weight: 900; text-decoration: underline; }
.contact button { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 56px; padding: 0 20px; border: 0; border-radius: 8px; background: var(--blue); color: #fff; font-size: 14px; font-weight: 900; cursor: pointer; }
.contact button span { margin-left: auto; font-size: 18px; }
.contact button:disabled { cursor: wait; opacity: .68; }
.form-status { min-height: 1.4em; margin: 10px 0 0; color: #7a8799; text-align: center; font-size: 9px; }
.hp-field { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }

footer { display: grid; grid-template-columns: 1fr 1fr; gap: 38px 8vw; padding: 55px max(4vw, 22px) 25px; border-top: 1px solid var(--line); background: #fff; }
.footerMain > p { margin: 18px 0 0; color: var(--muted); font-size: 11px; line-height: 1.8; }
.footerInfo { display: grid; grid-template-columns: 1fr; gap: 8px; align-content: start; padding-top: 2px; }
.footerInfo p { margin: 0; color: #58677e; font-size: 11px; line-height: 1.6; }
.footerInfo b { display: inline-block; width: 56px; color: var(--navy); }
.footerInfo a { color: var(--blue-dark); }
.footerBottom { display: flex; grid-column: 1 / -1; align-items: center; justify-content: space-between; padding-top: 23px; border-top: 1px solid var(--line); }
.footerBottom > div { display: flex; gap: 22px; }
.footerBottom a { color: #58677e; font-size: 10px; text-decoration: underline; text-underline-offset: 3px; }
.footerBottom small { color: #8995a7; font-size: 9px; }
.mobileCta { display: none; }

/* Privacy, terms and thank-you pages */
.legalPage { background: #f5f8fc; }
.legalPage .header { position: static; }
.privacyContent { width: min(900px, calc(100% - 40px)); margin: 58px auto 85px; padding: 54px 64px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 16px 40px rgba(20, 43, 87, .06); }
.privacyContent > p:first-child { margin: 0; color: var(--blue); font-size: 10px; font-weight: 900; letter-spacing: .18em; }
.privacyContent h1 { margin: 11px 0 21px; color: var(--navy); font-size: clamp(31px, 4vw, 47px); }
.privacyContent h2 { margin: 37px 0 12px; padding-bottom: 9px; border-bottom: 1px solid var(--line); color: var(--navy); font-size: 19px; }
.privacyContent p, .privacyContent li { color: #526079; font-size: 13px; line-height: 1.9; }
.privacyContent ul { padding-left: 1.4em; }
.privacyContent a:not(.backLink) { color: var(--blue); text-decoration: underline; }
.privacyDate { text-align: right; }
.backLink { display: inline-block; margin-top: 32px; padding: 13px 20px; border-radius: 7px; background: var(--blue); color: #fff; font-size: 12px; font-weight: 900; }
.thanksPage main { display: grid; min-height: calc(100vh - 80px); place-items: center; padding: 45px 20px; }
.thanksCard { width: min(650px, 100%); padding: 52px; border: 1px solid var(--line); border-radius: 14px; background: #fff; text-align: center; box-shadow: var(--shadow); }
.thanksCard > span { display: grid; place-items: center; width: 62px; height: 62px; margin: 0 auto 21px; border-radius: 50%; background: var(--pale); color: var(--blue); font-size: 27px; font-weight: 900; }
.thanksCard h1 { color: var(--navy); font-size: clamp(29px, 5vw, 43px); }
.thanksCard p { color: var(--muted); font-size: 13px; line-height: 1.9; }
.thanksCard a { display: inline-block; margin-top: 17px; padding: 13px 20px; border-radius: 7px; background: var(--blue); color: #fff; font-size: 12px; font-weight: 900; }

@media (max-width: 1000px) {
  .header { gap: 20px; }
  .header nav { gap: 18px; }
  .heroInner { grid-template-columns: 1fr 1fr; gap: 38px; }
  .heroVisual > img { height: 470px; }
  .button { padding-right: 17px; padding-left: 17px; }
  .serviceGrid { grid-template-columns: repeat(2, 1fr); }
  .planCard { padding-right: 21px; padding-left: 21px; }
}

@media (max-width: 1100px) {
  .headerLineButton { display: none; }
}

@media (max-width: 920px) {
  .header nav { display: none; }
  .headerActions { margin-left: auto; }
}

@media (max-width: 820px) {
  html { scroll-padding-top: 70px; }
  body { padding-bottom: 64px; }
  .header { height: 69px; padding: 0 18px; }
  .header nav { display: none; }
  .headerActions { gap: 6px; margin-left: auto; }
  .headerServiceButton { min-width: 120px; padding: 8px 9px; font-size: 10px; }
  .headerServiceButton small { font-size: 7px; }
  .headerLineButton { min-width: 62px; padding: 0 10px; font-size: 11px; }
  .headerLineButton span { display: none; }
  .headerButton { min-width: 112px; padding: 9px 10px; font-size: 10px; }
  .headerButton small { font-size: 8px; }
  .logo > img { width: 40px; height: 40px; }
  .logo b { font-size: 12px; }
  .logo small { font-size: 6px; }
  .hero { padding: 43px 20px 37px; }
  .heroInner { grid-template-columns: 1fr; gap: 29px; }
  .heroContent { padding: 0; }
  .hero h1 { margin-top: 16px; font-size: clamp(39px, 10.8vw, 56px); }
  .heroLead br { display: none; }
  .heroVisual { width: min(610px, 100%); margin: auto; padding: 0 13px 21px 0; }
  .heroVisual > img { height: 390px; border-radius: 20px 20px 54px 20px; }
  .heroVisual::before { inset: 30px 0 0 29px; border-radius: 20px; transform: translate(12px, 20px); }
  .heroVisual::after { display: none; }
  .heroPrice { right: -3px; bottom: 0; width: 209px; }
  .heroPrice strong { font-size: 29px; }
  .priceSummary { margin-top: -8px; }
  .trustBar { grid-template-columns: 1fr; }
  .trustBar article { padding: 19px 23px; }
  .trustBar article + article { border-top: 1px solid var(--line); border-left: 0; }
  .section { padding: 76px 20px; }
  .splitHeading { display: block; margin-bottom: 34px; }
  .headingLead { margin-top: 21px; }
  .painGrid { grid-template-columns: repeat(2, 1fr); }
  .emergencySection { padding: 48px 20px 76px; }
  .emergencyInner { grid-template-columns: 1fr; }
  .emergencyIntro, .emergencyPanel { padding: 37px 30px; }
  .priceGrid, .worksGrid { grid-template-columns: 1fr; max-width: 620px; }
  .planCard { padding: 31px 27px 27px; }
  .otherSection { display: block; }
  .otherSection > .sectionHeading { position: static; margin-bottom: 40px; }
  .takeoverInner { grid-template-columns: 1fr; }
  .contractGrid { grid-template-columns: 1fr; }
  .contractGrid article + article { border-top: 1px solid rgba(255, 255, 255, .2); border-left: 0; }
  .contactInner { grid-template-columns: 1fr; }
  footer { grid-template-columns: 1fr; }
  .footerBottom { grid-column: 1; }
  .mobileCta { position: fixed; right: 0; bottom: 0; left: 0; z-index: 40; display: grid; grid-template-columns: .85fr 1.15fr; height: 64px; padding: 6px; border-top: 1px solid #d7e0ec; background: #fff; box-shadow: 0 -8px 25px rgba(20, 43, 87, .12); }
  .mobileCta a { display: grid; place-items: center; border-radius: 7px; color: var(--navy); font-size: 12px; font-weight: 900; line-height: 1.15; }
  .mobileCta a + a { background: var(--blue); color: #fff; }
  .mobileCta small { color: #748198; font-size: 8px; font-weight: 700; }
  .mobileCta a + a small { color: #dbeafe; }
}

@media (max-width: 560px) {
  .header { gap: 8px; padding-right: 12px; padding-left: 12px; }
  .headerActions { gap: 5px; }
  .headerServiceButton { min-width: 101px; padding-right: 6px; padding-left: 6px; font-size: 9px; }
  .headerLineButton { min-width: 54px; padding-right: 8px; padding-left: 8px; }
  .headerButton { min-width: 99px; padding-right: 7px; padding-left: 7px; }
  .heroButtons { display: grid; grid-template-columns: 1fr; }
  .button { width: 100%; min-width: 0 !important; }
  .heroProof { gap: 8px 12px; font-size: 10px; }
  .heroPhone { justify-content: space-between; }
  .heroPhone a { font-size: 18px; }
  .heroVisual > img { height: 310px; }
  .heroPrice { width: 190px; padding: 14px 16px; }
  .heroPrice strong { font-size: 26px; }
  .sectionHeading h2 { font-size: 30px; }
  .painGrid, .serviceGrid { grid-template-columns: 1fr; }
  .painCard { min-height: 0; padding: 24px 20px; }
  .serviceCard { min-height: 0; padding: 27px 24px; }
  .emergencyGrid { grid-template-columns: 1fr; }
  .emergencyIntro, .emergencyPanel { padding: 32px 22px; }
  .planCard { padding: 29px 20px 22px; }
  .priceSummary { display: grid; gap: 9px; margin-bottom: 28px; }
  .priceSummary > i { display: none; }
  .otherGrid article { grid-template-columns: 31px 1fr 39px; gap: 10px; }
  .otherGrid a { width: 38px; height: 38px; }
  .takeoverSection { padding: 76px 20px; }
  .takeoverCopy h2 br { display: none; }
  .takeoverCopy ul { grid-template-columns: 1fr; }
  .takeoverCopy > a { width: 100%; min-width: 0; }
  .takeoverSteps article { grid-template-columns: 44px 1fr; gap: 13px; padding: 18px; }
  .takeoverSteps article > b { width: 44px; height: 44px; }
  .workCard h3 { min-height: 0; }
  .faqList summary { gap: 11px; padding: 19px 17px; font-size: 12px; line-height: 1.6; }
  .faqList details p { padding: 0 18px 19px; font-size: 11px; }
  .areaSection li { padding: 9px 13px; font-size: 11px; }
  .contact form { padding: 27px 20px 24px; }
  .lineContact { grid-template-columns: 100px 1fr; }
  .lineContact img { width: 100px; height: 100px; }
  .formHeading { align-items: flex-start; flex-direction: column; gap: 8px; }
  .footerBottom { align-items: flex-start; flex-direction: column; gap: 15px; }
  .footerBottom > div { flex-direction: column; gap: 9px; }
  .privacyContent { margin: 28px auto 55px; padding: 33px 21px; }
  .thanksCard { padding: 38px 22px; }
}

@media (max-width: 380px) {
  .logo > img { width: 36px; height: 36px; }
  .logo b { font-size: 10px; }
  .logo small { display: none; }
  .headerServiceButton { min-width: 96px; font-size: 8px; }
  .headerLineButton { min-width: 48px; }
  .headerButton { min-width: 91px; font-size: 9px; }
}

/* トップとフッターを除く本文を1180px基準に統一 */
.section,
.emergencySection,
.contractSection,
.areaSection,
.contact {
  padding-right: max(22px, calc((100vw - var(--content)) / 2));
  padding-left: max(22px, calc((100vw - var(--content)) / 2));
}
.priceSummary,
.priceNotes,
.contractGrid,
.faqList,
.areaSection ul,
.contactInner { width: min(var(--content), 100%); }

@media (max-width: 820px) {
  .section,
  .emergencySection,
  .contractSection,
  .areaSection,
  .contact {
    padding-right: 20px;
    padding-left: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}