/* PHP security LP — editorial layout with isometric illustrations */
:root {
  --ink: #1c353e;
  --muted: #53666c;
  --blue: #275f68;
  --blue-dark: #193f47;
  --pale: #edf4f2;
  --line: #d9e2de;
  --bg: #fff;
  --soft: #f5f6f2;
  --accent: #a26328;
  --accent-pale: #faf2e7;
  --ok: #2e6754;
  --ok-pale: #eaf3ed;
  --ng: #9b4236;
  --ng-pale: #f8ece7;
  --button-bg: #193f47;
  --button-hover: #326c73;
  --button-light-hover: #e8f1ed;
  --hero-bg: #f7f8f3;
  --body-ink: #435a62;
  --soft-rule: #d3ded7;
  --number-muted: #637771;
  --service-bg: #f0f5f2;
  --rule: #cbdad2;
  --table-head-bg: #f9faf8;
  --table-after-bg: #f8fbf8;
  --price-bg: #faf8f3;
  --step-rule: #a9c2b8;
  --about-bg: #f1f5f1;
  --end-bg: #1c3b43;
  --on-dark-muted: #d1dfdc;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body {
  margin: 0; color: var(--ink); background: var(--bg);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Yu Gothic Medium", "Yu Gothic", Meiryo, sans-serif;
  font-size: 17px; line-height: 1.9; letter-spacing: .02em;
  -webkit-font-smoothing: antialiased; text-wrap: pretty;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
h1,h2,h3,h4 { letter-spacing: .015em; text-wrap: balance; }
figure { margin: 0; }
.nw { display: inline-block; }
.keep-phrase { white-space: nowrap; }
.container { width: min(1160px, calc(100% - 80px)); margin-inline: auto; }
.mobile-only { display: none; }
a:focus-visible, summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; }
header { position: sticky; top: 0; z-index: 20; background: #fff; border-bottom: 1px solid var(--line); }
.head { height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.brand { flex: 0 0 auto; }
.brand img { height: 34px; width: auto; }
.head-right { display: flex; align-items: center; gap: 28px; }
.head-nav { display: flex; gap: 24px; font-size: 13px; font-weight: 600; }
.head-nav a { padding-block: 12px; }
.head-nav a:hover { color: var(--blue); text-decoration: underline; text-underline-offset: 6px; }
.head-tel { font-size: 13px; line-height: 1.6; color: var(--muted); }
.head-tel b { display: block; font-size: 18px; color: var(--ink); letter-spacing: .025em; }
.header-cta,.cta { display: inline-flex; align-items: center; justify-content: center; gap: 20px; background: var(--button-bg); color: #fff; font-weight: 700; border-radius: 4px; transition: background .2s ease; }
.header-cta { padding: 13px 22px; font-size: 14px; white-space: nowrap; }
.cta { min-height: 60px; padding: 16px 32px; font-size: 16px; min-width: 260px; }
.cta:hover,.header-cta:hover { background: var(--button-hover); }
.hero { padding: 76px 0 58px; background: var(--hero-bg); border-bottom: 1px solid var(--line); overflow: hidden; }
.hero-wrap { display: grid; grid-template-columns: 1.12fr 1fr; gap: 22px; align-items: center; }
.hero-copy { position: relative; z-index: 1; min-width: 0; }
.eyebrow { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 700; color: var(--blue); }
.eyebrow:before { content: ""; width: 28px; height: 2px; background: var(--accent); }
.hero h1 { font-size: clamp(36px, 3.45vw, 48px); line-height: 1.55; margin: 23px 0 24px; font-weight: 700; letter-spacing: -.025em; }
.hero h1 em { font-style: normal; color: var(--blue); }
.lead { font-size: 18px; line-height: 1.95; color: var(--body-ink); margin: 0 0 26px; max-width: 620px; }
.lead .q { display: block; font-size: 18px; line-height: 1.9; }
.lead > .q:last-of-type { margin-bottom: 14px; }
.lead strong { color: var(--ink); font-weight: 700; }
.points { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); list-style: none; padding: 0; margin: 0 0 30px; gap: 0; }
.points li { font-size: 13px; padding-inline: 10px; border-left: 1px solid var(--line); line-height: 1.9; text-align: center; }
.points li:first-child { padding-left: 0; border: 0; }
.points li > span { display: block; }
.points b { color: var(--blue-dark); font-size: 14px; white-space: nowrap; }
.mini { font-size: 13px; color: var(--muted); max-width: 560px; margin: 14px 0 0; line-height: 1.9; }
.hero-art { position: relative; margin: 0 -20px 0 -8px; }
.hero-art img { width: 100%; height: 490px; object-fit: contain; }
.hero-art figcaption { margin: 2px 20px 0; padding-top: 14px; border-top: 1px solid var(--soft-rule); font-size: 14px; letter-spacing: .02em; color: var(--blue); text-align: center; text-wrap: balance; }
.section { padding: 104px 0; }
.section.soft { background: var(--soft); }
.section-kicker { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; color: var(--blue); letter-spacing: .08em; margin: 0 0 20px; }
.section-kicker span { font-size: 11px; font-variant-numeric: tabular-nums; color: var(--number-muted); }
.section-title { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.65; margin: 0 0 22px; text-align: left; font-weight: 700; }
.section-desc { color: var(--muted); font-size: 17px; line-height: 1.95; margin: 0 0 42px; max-width: 820px; text-align: left; text-wrap: balance; }
.section-desc .sentence { display: block; }
.problem > span { min-width: 0; text-wrap: balance; }
.service p,.step p,.mini,.case-intro p,.check li,.faq summary > span { text-wrap: balance; }
#service > .container > .section-kicker,#price > .container > .section-kicker,#flow > .container > .section-kicker { justify-content: center; }
#service > .container > .section-title,#price > .container > .section-title,#flow > .container > .section-title { text-align: center; }
#service > .container > .section-desc,#price > .container > .section-desc,#flow > .container > .section-desc { text-align: center; margin-inline: auto; text-wrap: balance; }
#problems { background: #fff; }
.problems-layout { display: grid; grid-template-columns: 285px 1fr; gap: 64px; }
.problems-layout .section-title { font-size: 27px; }
.problems-layout .section-desc { font-size: 16px; }
.problem-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 36px; }
.problem { display: flex; gap: 14px; align-items: flex-start; padding: 22px 0; border-top: 1px solid var(--line); font-size: 17px; line-height: 1.85; font-weight: 500; }
.problem svg { flex: 0 0 24px; width: 24px; height: 24px; stroke: var(--blue); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; margin-top: 4px; }
.center-note { margin: 30px 0 0; padding: 20px 0 0; border-top: 1px solid var(--line); text-align: center; font-size: 17px; line-height: 1.85; font-weight: 500; text-wrap: balance; }
.center-note strong { color: var(--blue); }
#service { background: var(--service-bg); }
.service-layout { display: grid; grid-template-columns: 340px 1fr; gap: 60px; align-items: start; margin-top: 16px; }
.service-art { align-self: center; }
.service-art img { width: 100%; height: 340px; object-fit: contain; }
.service-art figcaption { font-size: 14px; color: var(--blue); text-align: center; margin-top: 8px; }
.service-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 36px; }
.service { padding: 20px 0 24px; border-top: 1px solid var(--rule); }
.service .num { font-size: 12px; color: var(--blue); font-weight: 600; letter-spacing: .1em; font-variant-numeric: tabular-nums; }
.service h3 { font-size: 19px; line-height: 1.6; margin: 9px 0; font-weight: 700; }
.service p,.step p { font-size: 16px; color: var(--muted); line-height: 1.9; margin: 0; }
.scope-note { border-top: 1px solid var(--rule); margin-top: 26px; padding-top: 24px; font-size: 15px; line-height: 2; color: var(--muted); }
.scope-note strong { color: var(--ink); }
.case-study { display: grid; grid-template-columns: 250px 1fr; gap: 40px; border-top: 1px solid var(--rule); margin-top: 52px; padding-top: 36px; }
.case-intro h3 { margin: 0 0 12px; font-size: 20px; line-height: 1.65; }
.case-intro p { color: var(--muted); font-size: 15px; line-height: 1.9; margin: 0; }
.sheet { background: #fff; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; min-width: 0; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; background: var(--table-head-bg); border-bottom: 1px solid var(--line); }
.sheet-head b { font-size: 16px; }
.sheet-head span { font-size: 13px; color: var(--muted); }
.sheet table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.sheet th,.sheet td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; line-height: 1.7; overflow-wrap: anywhere; }
.sheet th { font-size: 13px; color: var(--muted); font-weight: 500; }
.sheet td { font-size: 14px; }
.sheet th:first-child { width: 25%; }
.sheet td:first-child { font-weight: 600; }
.sheet td:last-child { background: var(--table-after-bg); }
.tag { display: inline-block; padding: 3px 7px; border-radius: 2px; font-size: 13px; line-height: 1.6; }
.tag.ng { color: var(--ng); background: var(--ng-pale); }
.tag.ok { color: var(--ok); background: var(--ok-pale); }
.sheet-foot { padding: 14px 18px; font-size: 13px; color: var(--muted); line-height: 1.8; }
#price { background: var(--price-bg); }
.priceband { display: grid; grid-template-columns: 310px 1fr; gap: 54px; padding: 44px; background: #fff; border-top: 3px solid var(--blue-dark); }
.price-summary { padding-right: 0; text-align: center; min-width: 0; }
.price-label { font-size: 15px; font-weight: 600; line-height: 1.9; color: var(--blue); text-wrap: balance; }
.plan-prefix { display: block; }
.price { font-size: 88px; font-weight: 700; line-height: 1.3; letter-spacing: -.06em; margin-top: 15px; }
.price small { font-size: 25px; letter-spacing: 0; margin-left: 7px; }
.price-sub { font-size: 15px; margin: 0; font-weight: 600; }
.price-desc { font-size: 14px; color: var(--muted); line-height: 1.8; margin: 20px 0 26px; text-wrap: balance; }
.price-summary .cta { min-width: 0; width: 100%; font-size: 16px; padding-inline: 20px; }
.incl { display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px; }
.incl > div { min-width: 0; }
.incl h4 { margin: 0 0 16px; padding: 0 0 14px; border-bottom: 1px solid var(--line); font-size: 16px; font-weight: 700; line-height: 1.7; }
.incl .yes h4 { color: var(--ok); }
.incl .no h4 { color: var(--accent); }
.incl ul { list-style: none; margin: 0; padding: 0; font-size: 15px; }
.incl li { padding: 6px 0 6px 19px; position: relative; line-height: 1.7; }
.incl li:before { position: absolute; left: 0; font-weight: 600; }
.incl .yes li:before { content: "✓"; color: var(--ok); }
.incl .no li:before { content: "−"; color: var(--accent); }
.price-notes { margin-top: 25px; border-top: 1px solid var(--line); padding-top: 18px; font-size: 13px; color: var(--muted); line-height: 1.9; }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: 48px; }
.step { position: relative; border-top: 2px solid var(--step-rule); padding-top: 24px; }
.step b { display: block; font-size: 13px; color: var(--blue); font-weight: 600; letter-spacing: .08em; }
.step h3 { font-size: 19px; margin: 12px 0 13px; line-height: 1.7; }
.step .free { display: inline-block; margin-left: 10px; padding: 0 7px; background: var(--ok-pale); color: var(--ok); font-size: 12px; border-radius: 2px; letter-spacing: 0; }
.step .order { position: absolute; right: -36px; top: -12px; padding: 1px 7px; background: var(--accent-pale); color: var(--accent); font-size: 11px; line-height: 1.8; z-index: 1; }
.flow-note { margin: 34px 0 0; padding: 19px 22px; background: var(--soft); font-size: 15px; color: var(--muted); text-align: center; text-wrap: balance; }
.flow-note b { color: var(--blue); }
#about { background: var(--about-bg); }
.about { display: grid; grid-template-columns: 1.1fr 1fr; gap: 90px; align-items: center; }
.about-box h2 { font-size: 29px; line-height: 1.75; font-weight: 700; margin: 0 0 26px; }
.about-box p { margin: 0 0 16px; font-size: 16px; color: var(--muted); line-height: 2; }
.facts { display: grid; grid-template-columns: 1fr 1fr; margin-top: 30px; border-block: 1px solid var(--rule); padding-block: 18px; gap: 24px; }
.facts div { font-size: 14px; color: var(--muted); line-height: 1.7; text-align: center; }
.facts b { display: block; color: var(--ink); font-size: 23px; font-weight: 600; margin-bottom: 3px; }
.support-art { max-width: 370px; margin: 0 auto 24px; }
.support-art img { width: 100%; height: 245px; object-fit: contain; }
.support-block h3 { font-size: 23px; line-height: 1.7; margin: 0 0 20px; text-align: center; }
.check { list-style: none; padding: 0; margin: 0; }
.check li { padding: 14px 0 14px 24px; position: relative; border-bottom: 1px solid var(--soft-rule); font-size: 15px; line-height: 1.85; }
.check li:before { content: "✓"; position: absolute; left: 0; color: var(--blue); }
.faq-layout { display: grid; grid-template-columns: 255px 1fr; gap: 64px; }
.faq-list { min-width: 0; border-top: 1px solid var(--line); }
.faq { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 0; display: flex; gap: 16px; align-items: flex-start; font-weight: 600; font-size: 17px; line-height: 1.8; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:before { content: "Q"; color: var(--blue); flex: 0 0 20px; font-size: 18px; font-weight: 500; line-height: 1.5; }
.faq summary span { flex: 1 1 auto; }
.faq summary:after { content: "＋"; color: var(--blue); flex: 0 0 20px; font-weight: 400; margin-left: 10px; }
.faq[open] summary:after { content: "−"; }
.faq p { margin: 0; padding: 0 34px 24px 36px; font-size: 16px; color: var(--muted); line-height: 2; }
.end { background: var(--end-bg); padding: 76px 0; color: #fff; }
.end-layout { text-align: center; }
.end-message { max-width: 960px; margin-inline: auto; }
.end h2 { font-size: 34px; line-height: 1.7; margin: 0 0 22px; font-weight: 600; }
.end-message > p { font-size: 17px; color: var(--on-dark-muted); line-height: 1.9; margin: 0; text-wrap: balance; }
.end-actions { text-align: center; }
.end .cta { background: #fff; color: var(--blue-dark); width: min(520px,100%); min-width: 0; margin-top: 30px; }
.cta-final { flex-direction: column; gap: 3px; padding: 18px 24px; }
.cta-label { font-size: 18px; line-height: 1.65; text-align: center; text-wrap: balance; }
.cta-sub { font-size: 13px; font-weight: 500; line-height: 1.7; }
.end .cta:hover { background: var(--button-light-hover); }
.notice { color: var(--on-dark-muted); font-size: 13px; margin: 16px auto 0; max-width: 700px; line-height: 1.8; text-wrap: balance; }
.end .tel { color: var(--on-dark-muted); font-size: 13px; margin-top: 24px; line-height: 1.8; }
.end .tel b { display: block; font-size: 25px; color: #fff; letter-spacing: .06em; font-weight: 500; }
.foot { padding: 48px 0 26px; color: var(--muted); font-size: 13px; }
.foot-main { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 34px; }
.foot-company img { height: 30px; width: auto; margin-bottom: 18px; }
.foot-company p { margin: 0; line-height: 1.95; }
.foot-company b { font-size: 13px; color: var(--ink); }
.foot-links { display: flex; flex-wrap: wrap; gap: 12px 20px; font-size: 12px; }
.foot-links a { text-decoration: underline; text-underline-offset: 4px; }
.copy { border-top: 1px solid var(--line); margin-top: 36px; padding-top: 18px; font-size: 11px; letter-spacing: .05em; }
@media (min-width: 1440px) {
  .hero { padding-block: 86px 70px; }
}
@media (max-width: 1100px) {
  .container { width: calc(100% - 64px); }
  .head-tel { display: none; }
  .hero h1 { font-size: 38px; }
  .hero-art img { height: 430px; }
  .hero-wrap { grid-template-columns: 1.2fr 1fr; gap: 0; }
  .hero-art { margin-inline: -8px -16px; }
  .points li { padding-inline: 8px; font-size: 12px; }
  .problems-layout { grid-template-columns: 1fr; gap: 12px; }
  .problem-list { column-gap: 24px; }
  .service-layout { grid-template-columns: 240px minmax(0,1fr); gap: 36px; }
  .service-grid { column-gap: 24px; }
  .case-study { grid-template-columns: 220px 1fr; gap: 30px; }
  .priceband { grid-template-columns: 1fr; gap: 35px; padding: 34px; }
  .price-summary { padding-right: 0; max-width: 420px; width: 100%; margin-inline: auto; }
  .incl { gap: 20px; }
  .steps { grid-template-columns: 1fr 1fr; }
  .step .order { display: none; }
  .about { gap: 50px; }
  .about-box h2 { font-size: 26px; }
  .faq-layout { grid-template-columns: 220px 1fr; gap: 40px; }
  .faq-layout .section-title { font-size: 30px; }
  .end-layout { gap: 36px; }
  .end h2 { font-size: 32px; }
}
@media (max-width: 860px) {
  .head { height: 76px; gap: 20px; }
  .head-nav { display: none; }
  .hero { padding-block: 54px 42px; }
  .hero-wrap { grid-template-columns: minmax(0, 1fr); }
  .hero-copy { max-width: 680px; margin-inline: auto; }
  .hero h1 { font-size: 44px; }
  .points li { font-size: 13px; padding-inline: 13px; }
  .hero-art { width: 540px; max-width: 100%; margin: 26px auto 0; }
  .hero-art img { height: 370px; }
  .hero-art figcaption { margin-inline: 35px; }
  .section { padding-block: 76px; }
  .problems-layout,.faq-layout { grid-template-columns: 1fr; gap: 16px; }
  .problems-layout .section-desc { margin-bottom: 20px; }
  .problems-layout .section-title { font-size: 30px; }
  .service-layout { grid-template-columns: 230px 1fr; gap: 30px; }
  .service-art img { height: 280px; }
  .service-grid { grid-template-columns: 1fr; }
  .service { padding-block: 16px; }
  .service h3 { margin-block: 5px; }
  .case-study { grid-template-columns: 1fr; gap: 20px; }
  .priceband { grid-template-columns: 1fr; gap: 34px; padding: 36px; }
  .price-summary { max-width: 420px; width: 100%; margin-inline: auto; }
  .price { margin-top: 8px; }
  .price-desc { margin-top: 12px; }
  .steps { grid-template-columns: 1fr 1fr; gap: 32px; }
  .step .order { display: none; }
  .about { grid-template-columns: 1fr; gap: 34px; }
  .about-box { max-width: 620px; }
  .support-block { display: grid; grid-template-columns: 260px 1fr; gap: 24px; align-items: center; }
  .support-art { margin: 0; }
  .support-art img { height: 245px; }
  .support-block h3 { font-size: 22px; }
  .end-message { max-width: 680px; }
  .end .tel { margin-top: 20px; }
}
@media (max-width: 560px) {
  html { scroll-padding-top: 82px; }
  body { font-size: 16px; }
  .container { width: calc(100% - 32px); }
  .head { height: 68px; gap: 12px; }
  .brand img { height: 25px; }
  .head-right { gap: 0; }
  .header-cta { font-size: 12px; padding: 11px 12px; }
  .hero { padding-top: 36px; padding-bottom: 28px; }
  .eyebrow { font-size: 12px; gap: 9px; }
  .eyebrow:before { width: 22px; }
  .hero h1 { font-size: clamp(28px, 8vw, 42px); line-height: 1.6; margin: 20px 0; letter-spacing: -.025em; }
  .lead { font-size: 16px; line-height: 1.95; margin-bottom: 20px; }
  .lead .q { font-size: 16px; }
  .points { display: flex; flex-direction: column; gap: 5px; margin-bottom: 24px; }
  .points li { display: flex; justify-content: center; gap: 10px; font-size: 13px; padding: 0; border: 0; letter-spacing: 0; line-height: 1.9; }
  .points li > span { display: inline; }
  .points b { font-size: 14px; }
  .cta { width: 100%; min-width: 0; font-size: 16px; min-height: 58px; padding: 16px 20px; }
  .mini { font-size: 13px; margin-top: 12px; }
  .hero-art { margin-top: 18px; width: 400px; }
  .hero-art img { height: 270px; }
  .hero-art figcaption { margin: 0 7px; font-size: 13px; padding-top: 12px; }
  .section { padding-block: 58px; }
  .section-kicker { font-size: 11px; margin-bottom: 15px; }
  .section-title,.problems-layout .section-title { font-size: 27px; line-height: 1.6; margin-bottom: 18px; }
  .section-desc,.problems-layout .section-desc { font-size: 16px; margin-bottom: 28px; }
  .problem-list { grid-template-columns: 1fr; }
  .problem { padding: 20px 0; font-size: 16px; gap: 15px; }
  .problem svg { width: 22px; height: 22px; flex-basis: 22px; }
  .center-note { font-size: 16px; margin-top: 17px; padding-top: 20px; }
  .service-layout { grid-template-columns: 1fr; gap: 20px; margin-top: 0; }
  .service-art { max-width: 280px; width: 100%; margin: 0 auto 8px; }
  .service-art img { height: 235px; }
  .service-art figcaption { font-size: 13px; margin-top: 0; }
  .service-grid { grid-template-columns: 1fr; gap: 0; }
  .service { position: relative; padding: 19px 0 19px 38px; }
  .service .num { position: absolute; left: 0; top: 24px; font-size: 11px; }
  .service h3 { font-size: 18px; margin: 0 0 8px; }
  .service p,.step p { font-size: 15px; }
  .scope-note { margin-top: 10px; padding-top: 20px; font-size: 14px; }
  .case-study { margin-top: 32px; padding-top: 26px; }
  .case-intro h3 { font-size: 21px; text-align: center; }
  .case-intro p { font-size: 15px; text-align: center; text-wrap: balance; }
  .sheet-head { padding: 13px 12px; }
  .sheet-head b { font-size: 15px; }
  .sheet-head span { font-size: 12px; }
  .sheet table,.sheet tbody { display: block; }
  .sheet thead { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .sheet tbody tr { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); border-bottom: 1px solid var(--line); }
  .sheet tbody tr:last-child { border-bottom: 0; }
  .sheet td { display: block; min-width: 0; border: 0; padding: 12px; font-size: 14px; line-height: 1.8; letter-spacing: 0; overflow-wrap: normal; }
  .sheet td:first-child { grid-column: 1 / -1; padding-block: 9px; background: var(--table-head-bg); font-size: 14px; }
  .sheet td:nth-child(2):before,.sheet td:nth-child(3):before { display: block; color: var(--muted); font-size: 12px; margin-bottom: 5px; }
  .sheet td:nth-child(2):before { content: '現在'; }
  .sheet td:nth-child(3):before { content: '対応後'; }
  .tag { font-size: 12px; padding: 3px 5px; }
  .sheet-foot { padding: 12px; border-top: 1px solid var(--line); font-size: 12px; }
  .priceband { padding: 28px 20px; gap: 32px; }
  .price-label { font-size: 15px; }
  .price { font-size: 78px; }
  .price small { font-size: 24px; }
  .incl { grid-template-columns: 1fr; gap: 26px; }
  .incl h4 { font-size: 16px; padding-bottom: 11px; margin-bottom: 10px; }
  .incl li { font-size: 15px; padding-block: 6px; }
  .price-notes { font-size: 13px; }
  .steps { grid-template-columns: 1fr; margin-top: 25px; gap: 0; padding-left: 8px; }
  .step { border: 0; border-left: 1px solid var(--step-rule); padding: 0 0 30px 26px; }
  .step:before { content: ""; position: absolute; left: -4px; top: 8px; width: 7px; height: 7px; background: var(--blue); border-radius: 50%; }
  .step:last-child { padding-bottom: 4px; }
  .step h3 { font-size: 18px; margin: 6px 0 8px; }
  .step b { font-size: 12px; }
  .flow-note { font-size: 14px; margin-top: 24px; padding: 16px; }
  .about { gap: 24px; }
  .about-box h2 { font-size: 25px; line-height: 1.7; margin-bottom: 20px; }
  .about-box p { font-size: 15px; line-height: 2; }
  .facts { gap: 18px; margin-top: 24px; }
  .facts b { font-size: 21px; }
  .facts div { font-size: 13px; }
  .support-block { display: block; }
  .support-art { max-width: 300px; margin: 0 auto 22px; }
  .support-art img { height: 220px; }
  .support-block h3 { font-size: 22px; }
  .check li { font-size: 15px; }
  .faq-layout { gap: 10px; }
  .faq summary { font-size: 16px; gap: 10px; padding-block: 20px; }
  .faq summary:before { font-size: 16px; flex-basis: 18px; }
  .faq summary:after { flex-basis: 16px; margin-left: 0; }
  .faq p { font-size: 15px; padding: 0 4px 21px 28px; }
  .end { padding-block: 54px; }
  .end h2 { font-size: 26px; line-height: 1.7; }
  .end-message > p { font-size: 16px; }
  .end .cta { min-width: 0; }
  .cta-final { padding: 18px 12px; }
  .cta-label { font-size: 16px; }
  .cta-sub { font-size: 12px; }
  .notice { max-width: 100%; }
  .end .tel b { font-size: 24px; }
  .foot { padding-block: 36px 22px; }
  .foot-company img { height: 27px; }
  .foot-company p { font-size: 12px; }
  .foot-links { gap: 13px 18px; }
  .copy { margin-top: 26px; }
  .mobile-only { display: inline; }
}
@media (min-width: 561px) and (max-width: 700px) {
  .incl { grid-template-columns: 1fr; gap: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cta,.header-cta { transition: none; }
}

/* Original blue palette; geometry and typography are shared with the teal LP. */
:root {
  --ink: #183047;
  --muted: #53697a;
  --blue: #1769b3;
  --blue-dark: #11528f;
  --pale: #edf6fd;
  --line: #d8e5ef;
  --soft: #f6f9fc;
  --accent: #a85d21;
  --accent-pale: #fff4ea;
  --button-bg: #1769b3;
  --button-hover: #11528f;
  --button-light-hover: #e7f2fc;
  --hero-bg: #f4f9ff;
  --body-ink: #344c61;
  --soft-rule: #d3e1ed;
  --number-muted: #61768a;
  --service-bg: #edf5fc;
  --rule: #ccdeed;
  --table-head-bg: #f6f9fc;
  --table-after-bg: #f1f7fd;
  --price-bg: #f6f9fc;
  --step-rule: #a9c7df;
  --about-bg: #eef5fb;
  --end-bg: #123b64;
  --on-dark-muted: #d9e7f4;
}

/* Variant 4 keeps the PHP-led hook and explains diagnosis plus source-code repair. */
:root {
  /* Shared type roles: section title, card title, subheading, body, supporting copy. */
  --v4-type-section: 32px;
  --v4-type-card: 22px;
  --v4-type-subhead: 18px;
  --v4-type-lead: 17px;
  --v4-type-body: 16px;
  --v4-type-note: 14px;
  --v4-type-micro: 13px;
  --v4-type-kicker: 16px;
  --v4-type-counter: 14px;
}
.section-title,.problems-layout .section-title,.faq-layout .section-title,.about-box h2,.end h2 { font-size: var(--v4-type-section); line-height: 1.65; }
.section-desc,.problems-layout .section-desc,.problem,.center-note,.end-message > p { font-size: var(--v4-type-lead); }
.about-box p,.check li,.faq p,.v4-steps .step p,.v4-priceband .incl li { font-size: var(--v4-type-body); }
.support-block h3 { font-size: var(--v4-type-card); }
.v4-steps .step h3,.v4-check-details dt,.faq summary,.v4-priceband .incl h4 { font-size: var(--v4-type-subhead); }
.facts div,.price-sub,.v4-priceband .price-notes,.flow-note,.notice,.cta-sub { font-size: var(--v4-type-note); }
.v4-priceband .plan-prefix { font-size: var(--v4-type-note); }
.v4-priceband .plan-name { font-size: var(--v4-type-subhead); }
.v4-hero { padding: 48px 0 52px; }
.v4-hero-grid { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); grid-template-areas: 'story art' 'actions art'; column-gap: 42px; row-gap: 22px; align-items: center; }
.v4-hero-story { grid-area: story; min-width: 0; }
.section-kicker,.about-box .section-kicker { font-size: var(--v4-type-kicker); color: var(--blue); line-height: 1.8; letter-spacing: .04em; }
.section-kicker > span { font-size: var(--v4-type-counter); }
.v4-hero .eyebrow { display: inline-flex; font-size: 14px; }
.v4-hero h1 { font-size: clamp(35px,3.15vw,46px); line-height: 1.45; margin: 18px 0; letter-spacing: -.025em; }
.v4-title-line { display: block; }
.v4-hero-context { color: var(--muted); font-size: 15px; line-height: 1.9; margin: 0 0 17px; }
.v4-hero-lead { font-size: 18px; color: var(--body-ink); line-height: 1.8; margin: 0; }
.v4-hero-lead strong { display: block; font-size: 21px; line-height: 1.8; color: var(--ink); }
.v4-hero-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 18px; margin-top: 18px; font-size: var(--v4-type-note); line-height: 1; }
.v4-price-main { display: inline-flex; align-items: baseline; gap: 5px; flex: 0 0 auto; }
.v4-hero-price b { font-size: 28px; color: var(--blue-dark); letter-spacing: 0; line-height: 1; transform: translateY(-1px); /* Match the visible bottom of the larger Japanese glyphs. */ }
.v4-hero-price small,.v4-price-caption { font-size: var(--v4-type-note); line-height: 1; }
.v4-hero-price-note { color: var(--blue); font-size: var(--v4-type-note); font-weight: 600; line-height: 1; }
.v4-hero-art { grid-area: art; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; min-width: 0; }
.v4-hero-art picture { display: block; }
.v4-hero-art img { width: 100%; height: 450px; object-fit: contain; }
.v4-hero-art figcaption { text-align: center; color: var(--blue); font-size: var(--v4-type-note); line-height: 1.9; font-weight: 500; margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--line); text-wrap: balance; }
.v4-hero-actions { grid-area: actions; align-self: start; min-width: 0; }
.v4-primary-cta { min-width: 320px; font-size: var(--v4-type-body); }
.v4-hero-actions .mini { margin-top: 11px; font-size: var(--v4-type-micro); line-height: 1.8; }
.v4-service-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.v4-service-card { --card-accent: #1769b3; --card-tint: #f2f8fe; --card-badge: #e1eefb; --card-rule: #c9dff2; display: flex; flex-direction: column; padding: 27px 30px 29px; border: 1px solid var(--card-rule); border-top: 3px solid var(--card-accent); border-radius: 8px; background: linear-gradient(180deg,var(--card-tint),#fff 165px); min-width: 0; }
/* Blue denotes inspection; blue-green denotes corrective action and improvement. */
.v4-service-card--repair { --card-accent: #24776b; --card-tint: #f0f8f5; --card-badge: #ddf0e9; --card-rule: #c8e1d8; }
.v4-card-label,.v4-service-card .v4-card-label { display: flex; align-items: center; gap: 8px; color: var(--card-accent,var(--blue)); font-size: var(--v4-type-body); line-height: 1.6; font-weight: 700; margin: 0 0 16px; }
.v4-card-number { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 28px; height: 28px; border-radius: 5px; background: var(--card-badge); font-size: var(--v4-type-counter); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.v4-card-label-text { min-width: 0; }
.v4-card-label-text,.v4-card-label-text .keep-phrase { font-size: inherit; line-height: inherit; font-weight: inherit; }
.v4-service-card h3 { font-size: var(--v4-type-card); line-height: 1.7; margin: 0 0 20px; text-align: left; }
.v4-service-card p,.v4-check-details dd { font-size: var(--v4-type-body); line-height: 1.95; color: var(--muted); }
.v4-service-card > p:not(.v4-card-label):not(.v4-card-foot) { margin: 0 0 16px; }
.v4-check-details { margin: 0; }
.v4-check-details > div + div { margin-top: 22px; }
.v4-check-details dt { font-size: var(--v4-type-subhead); font-weight: 700; margin-bottom: 7px; }
.v4-check-details dd { margin: 0; }
.v4-service-card .v4-card-foot { border-top: 1px solid var(--card-rule); margin: auto 0 0; padding-top: 16px; font-size: var(--v4-type-note); }
.v4-check-details,.v4-repair-list { margin-bottom: 23px; }
.v4-repair-list { list-style: none; padding: 0; margin-top: 0; font-size: var(--v4-type-body); line-height: 1.9; }
.v4-repair-list li { position: relative; padding-left: 23px; margin-top: 9px; }
.v4-repair-list li::before { content: '✓'; position: absolute; left: 0; color: var(--card-accent); }
.v4-scope { margin-top: 30px; padding: 25px 30px; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.v4-scope-heading h3 { font-size: var(--v4-type-card); line-height: 1.7; margin: 0 0 8px; }
.v4-scope-heading p { margin: 0; color: var(--muted); font-size: var(--v4-type-body); }
.v4-scope-numbers { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-block: 1px solid var(--line); padding: 20px 0; margin-top: 20px; }
.v4-scope-numbers > div { text-align: center; border-left: 1px solid var(--line); }
.v4-scope-numbers > div:first-child { border: 0; }
.v4-scope-numbers b { display: block; font-size: 32px; line-height: 1.5; color: var(--blue-dark); }
.v4-scope-numbers b span { font-size: var(--v4-type-body); margin-left: 6px; }
.v4-scope-numbers small { display: block; font-size: var(--v4-type-micro); color: var(--muted); }
.v4-scope-note { font-size: var(--v4-type-note); color: var(--muted); margin: 16px 0 0; }
.v4-report { display: grid; grid-template-columns: minmax(0,1fr) 245px; gap: 46px; align-items: center; margin-top: 40px; padding-top: 30px; border-top: 1px solid var(--line); }
.v4-report h3 { font-size: var(--v4-type-card); line-height: 1.7; margin: 0 0 14px; text-align: left; }
.v4-report p:not(.v4-card-label) { font-size: var(--v4-type-body); color: var(--muted); line-height: 1.95; margin: 0; }
.v4-report img { width: 100%; height: 205px; object-fit: contain; }
.v4-price-combination { color: var(--blue-dark); font-size: var(--v4-type-body); line-height: 1.8; margin: 17px 0 22px; }
.v4-price-combination > span,.v4-price-combination > b { display: block; }
.v4-price-combination > b { font-size: var(--v4-type-subhead); line-height: 1.4; }
.v4-list-note { display: block; font-size: var(--v4-type-note); color: var(--muted); }
.v4-priceband .price-notes { line-height: 1.95; }
.v4-steps .step p { text-wrap: pretty; }
#faq .faq summary > span { text-wrap: pretty; }
@media (max-width: 1100px) {
  .v4-hero-grid { column-gap: 28px; }
  .v4-hero h1 { font-size: 36px; }
  .v4-hero-lead { font-size: 17px; }
  .v4-hero-lead strong { font-size: 19px; }
  .v4-hero-art img { height: 410px; }
  .v4-service-card { padding: 25px; }
  .v4-priceband { padding: 32px; }
}
@media (min-width: 601px) and (max-width: 960px) {
  .v4-hero-grid { grid-template-columns: minmax(0,1fr); grid-template-areas: 'story' 'actions' 'art'; gap: 24px; }
  .v4-hero-art { width: 540px; max-width: 100%; margin-inline: auto; }
  .v4-hero-story,.v4-hero-actions { width: 100%; max-width: 680px; margin-inline: auto; }
  .v4-hero h1 { font-size: 42px; }
  .v4-service-grid { gap: 20px; }
  .v4-service-card { padding: 22px; }
}
@media (max-width: 700px) {
  .v4-service-grid { grid-template-columns: minmax(0,1fr); }
  .v4-report { grid-template-columns: 1fr; gap: 15px; }
  .v4-report figure { display: none; }
}
@media (max-width: 600px) {
  :root { --v4-type-section: 27px; --v4-type-card: 21px; --v4-type-lead: 16px; --v4-type-kicker: 14px; --v4-type-counter: 12px; }
  .v4-hero { padding: 22px 0 28px; }
  .v4-hero-grid { width: calc(100% - 32px); grid-template-columns: minmax(0,1fr); grid-template-areas: 'story' 'actions' 'art'; gap: 16px; }
  .v4-hero .eyebrow { font-size: 13px; }
  .v4-hero h1 { font-size: clamp(28px,8vw,34px); line-height: 1.45; margin: 15px 0; }
  .v4-hero-context { display: none; }
  .v4-hero-lead { font-size: 16px; line-height: 1.8; }
  .v4-hero-lead strong { font-size: 17px; line-height: 1.8; }
  .v4-hero-price { gap: 0 12px; margin-top: 13px; }
  .v4-hero-price b { font-size: 25px; transform: translateY(-.5px); }
  .v4-hero-price-note { display: none; }
  .v4-hero-art { display: block; width: 100%; }
  .v4-hero-art picture { max-width: 390px; margin-inline: auto; }
  .v4-hero-art img { width: 100%; height: auto; }
  .v4-hero-art figcaption { text-align: center; line-height: 1.9; margin-top: 4px; padding-top: 12px; text-wrap: balance; }
  .v4-primary-cta { width: 100%; min-width: 0; min-height: 59px; padding-inline: 10px; font-size: 16px; }
  .v4-hero-actions .mini { font-size: 13px; text-align: center; margin-top: 10px; text-wrap: balance; }
  .v4-service-grid { gap: 20px; }
  .v4-service-card { padding: 23px 20px; }
  .v4-card-label,.v4-service-card .v4-card-label { margin-bottom: 14px; }
  .v4-service-card h3 { line-height: 1.65; margin-bottom: 18px; }
  .v4-scope { margin-top: 24px; padding: 22px 18px; }
  .v4-scope-heading p { line-height: 1.9; }
  .v4-scope-numbers { padding: 16px 0; margin-top: 17px; }
  .v4-scope-numbers b { font-size: 27px; }
  .v4-scope-numbers b span { display: block; font-size: var(--v4-type-note); margin: 2px 0 0; }
  .v4-scope-numbers small { margin-top: 4px; }
  .v4-report { margin-top: 28px; padding-top: 25px; }
  .v4-priceband { padding: 27px 20px; }
  .flow-note b { display: block; }
}
@media (max-width: 360px) and (max-height: 650px) {
  .v4-hero { padding-top: 12px; }
  .v4-hero-grid { gap: 8px; }
  .v4-hero h1 { margin-block: 8px; }
  .v4-hero-price-note { display: none; }
}

/* Variant 5: explain the diagnosis and repair components of the base price. */
.v5-hero-price-caveat { margin: 9px 0 0; color: var(--muted); font-size: var(--v4-type-note); line-height: 1.7; text-wrap: pretty; }
.v5-price-breakdown { margin: 22px 0; text-align: left; }
.v5-price-part { --part-color: #1769b3; --part-bg: #f2f8fe; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 14px; border-left: 3px solid var(--part-color); background: var(--part-bg); }
.v5-price-part + .v5-price-part { margin-top: 8px; }
.v5-price-part--repair { --part-color: #24776b; --part-bg: #f0f8f5; }
.v5-price-part dt { min-width: 0; color: var(--part-color); font-size: var(--v4-type-body); font-weight: 700; line-height: 1.6; }
.v5-price-part dt small { display: block; margin-top: 3px; color: var(--muted); font-size: var(--v4-type-note); font-weight: 400; line-height: 1.6; }
.v5-price-part dd { display: flex; align-items: baseline; gap: 3px; flex: 0 0 auto; margin: 0; color: var(--part-color); line-height: 1; }
.v5-price-part dd b { font-size: 28px; letter-spacing: 0; }
.v5-price-part dd span { font-size: var(--v4-type-note); font-weight: 600; }
.v5-price-adjustment { margin-bottom: 28px; padding: 20px 22px; border-left: 3px solid #24776b; background: #f0f8f5; }
.v5-price-adjustment h3 { margin: 0 0 10px; font-size: var(--v4-type-card); line-height: 1.7; text-align: left; }
.v5-price-adjustment p { margin: 0; color: var(--body-ink); font-size: var(--v4-type-body); line-height: 1.9; }
.v5-price-adjustment strong { color: #24776b; }
@media (max-width: 767px) {
  .v4-hero-story,.v4-hero-actions { text-align: center; }
  .v4-hero .eyebrow { display: flex; justify-content: flex-start; text-align: left; }
  .v4-hero-price { justify-content: center; }
  .v5-hero-price-caveat { text-wrap: balance; }
  .v4-hero-actions .mini { margin-inline: auto; text-align: center; }
}
@media (max-width: 600px) {
  .v4-hero-price { row-gap: 9px; }
  .v4-hero-price-note { display: block; flex-basis: 100%; line-height: 1.6; }
  .v5-hero-price-caveat { margin-top: 6px; }
  .v5-price-part { padding: 12px 10px; gap: 9px; }
  .v5-price-part dd b { font-size: 25px; }
  .v5-price-adjustment { padding: 18px 15px; }
}

/* A small persistent dock for phones; the complete index stays in a modal menu. */
.mobile-dock { display: none; }
.mobile-menu { border: 0; }
.mobile-menu:not([open]) { display: none; }
@media (max-width: 767px) {
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
  .mobile-dock {
    position: fixed; z-index: 40; inset: auto 0 0;
    display: grid; grid-template-columns: 1fr 1fr 1.35fr 1fr 1fr;
    align-items: center; column-gap: 4px;
    height: calc(68px + env(safe-area-inset-bottom, 0px));
    padding: 7px max(12px, env(safe-area-inset-right, 0px)) calc(7px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
    background: #fff; border-top: 1px solid #d7e4ef; box-shadow: 0 -3px 16px #18304708;
  }
  .mobile-dock-link {
    min-width: 0; height: 53px; padding: 4px 0; border: 0; border-radius: 5px;
    display: flex; flex-direction: column; gap: 3px; align-items: center; justify-content: center;
    color: #53697a; background: transparent; cursor: pointer;
    font: inherit; font-size: 11px; font-weight: 600; line-height: 1.5; letter-spacing: 0; white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-dock svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
  .mobile-dock-link[aria-current], .mobile-dock-link.has-current-section { color: #1769b3; background: #edf5fd; }
  .mobile-dock-cta {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-width: 0; min-height: 49px; padding: 5px 2px; border-radius: 6px;
    color: #fff; background: #1769b3; font-size: 13px; font-weight: 700; line-height: 1.4; letter-spacing: 0; white-space: nowrap;
  }
  .mobile-dock-cta:hover { background: #11528f; }
  .mobile-menu {
    position: fixed; inset: auto 0 0; width: 100%; max-width: none; max-height: 80vh; max-height: 80dvh;
    margin: 0; padding: 19px 16px calc(22px + env(safe-area-inset-bottom, 0px));
    color: #183047; background: #fff; border-radius: 15px 15px 0 0; overflow-y: auto;
    box-shadow: 0 -8px 32px #18304715; overscroll-behavior: contain;
  }
  .mobile-menu::backdrop { background: #18304766; }
  .mobile-menu-is-open { overflow: hidden; }
  .mobile-menu-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
  .mobile-menu-heading h2 { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.6; }
  .mobile-menu-close { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid #d7e4ef; border-radius: 50%; background: #fff; color: #53697a; cursor: pointer; }
  .mobile-menu-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
  .mobile-menu-links { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .mobile-menu-links a { display: flex; align-items: center; min-width: 0; min-height: 58px; padding: 11px 12px; background: #f4f8fc; border: 1px solid #e0eaf3; border-radius: 6px; font-size: 14px; line-height: 1.7; letter-spacing: 0; }
  .mobile-menu-links a[aria-current] { color: #1769b3; border-color: #9bc1e5; background: #edf5fd; font-weight: 700; }
  .mobile-dock a:focus-visible, .mobile-dock button:focus-visible, .mobile-menu a:focus-visible, .mobile-menu button:focus-visible { outline: 3px solid #a26328; outline-offset: -3px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}