@charset "UTF-8";
:root {
  --blue:#0749bd;
  --navy:#102f59;
  --ink:#17324f;
  --muted:#52657c;
  --yellow:#ffdf3c;
  --light:#eef4fc;
  --line:#d7e0eb;
  --white:#fff;
  --radius:6px;
  --max:1200px;
}

* {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:108px;
}

body {
  margin:0;
  color:var(--ink);
  background:#fff;
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  font-size:1rem;
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
}

button,input {
  font:inherit;
}

button,a {
  -webkit-tap-highlight-color:transparent;
}

a {
  color:inherit;
  text-decoration:none;
}

button {
  cursor:pointer;
}

img {
  display:block;
  max-width:100%;
  height:auto;
}

h1,h2,h3,p {
  margin:0;
}

button {
  border:0;
}

a,button,input,summary {
  touch-action:manipulation;
}

a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible,[tabindex]:focus-visible {
  outline:3px solid #d17600;
  outline-offset:5px;
}

a,button {
  transition:background-color .16s,color .16s,box-shadow .16s;
}

::selection {
  background:var(--yellow);
  color:var(--navy);
}

.wrap {
  width:min(var(--max),calc(100% - 96px));
  margin-inline:auto;
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.skip-link {
  position:fixed;
  top:10px;
  left:10px;
  padding:12px 24px;
  z-index:100;
  background:var(--yellow);
  transform:translateY(-160%);
}

.skip-link:focus {
  transform:none;
}

.site-note {
  height:32px;
  background:var(--navy);
  color:#fff;
  padding:4px 48px;
  font-size:0.75rem;
  letter-spacing:.06em;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.site-note span {
  opacity:.8;
  font-size:0.6875rem;
}

.site-header {
  height:94px;
  background:rgba(255,255,255,.97);
  position:sticky;
  top:0;
  z-index:30;
  border-bottom:1px solid #e5ebf3;
}

.header-inner {
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:26px;
}

.brand {
  display:flex;
  flex-direction:column;
  gap:8px;
  flex-shrink:0;
}

.brand img {
  width:176px;
  height:auto;
}

.brand>span {
  font-size:0.6875rem;
  letter-spacing:.08em;
  font-weight:600;
}

.site-header nav {
  display:flex;
  align-items:center;
  gap:28px;
  font-size:0.875rem;
  font-weight:700;
}

.site-header nav>a:not(.nav-cta):hover {
  color:var(--blue);
  text-decoration:underline;
  text-underline-offset:6px;
}

.nav-cta {
  display:flex;
  align-items:center;
  gap:22px;
  padding:12px 20px;
  background:var(--yellow);
  border-radius:var(--radius);
}

.nav-cta:hover {
  background:#ffd017;
}

.nav-cta>span {
  font-size:1.3125rem;
}

.menu-toggle {
  display:none;
}

.hero {
  background:var(--light);
  overflow:hidden;
}

.hero-inner {
  display:grid;
  grid-template-columns:1.05fr 1fr;
  min-height:602px;
  position:relative;
}

.hero-copy {
  padding:62px 0 59px;
  position:relative;
  z-index:2;
}

.eyebrow {
  font-size:0.75rem;
  font-weight:800;
  letter-spacing:.16em;
  color:var(--blue);
  line-height:1.5;
}

.eyebrow-line {
  display:inline-block;
  width:26px;
  height:2px;
  background:var(--blue);
  vertical-align:middle;
  margin-right:8px;
}

.hero-kicker {
  font-size:0.9375rem;
  font-weight:600;
  margin-top:29px;
  letter-spacing:.07em;
}

h1 {
  font-size:clamp(36px,3.8vw,54px);
  line-height:1.55;
  font-weight:800;
  letter-spacing:-.045em;
  margin-top:10px;
  color:var(--navy);
}

h1>span {
  background:linear-gradient(transparent 73%,var(--yellow) 73%,var(--yellow) 93%,transparent 93%);
  padding-bottom:2px;
}

.hero-description {
  font-size:1rem;
  line-height:1.95;
  margin-top:22px;
  letter-spacing:.025em;
}

.button {
  min-height:56px;
  padding:14px 24px;
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:36px;
  border-radius:var(--radius);
  font-weight:700;
  font-size:0.9375rem;
  line-height:1.6;
}

.button>span {
  font-size:1.4375rem;
  line-height:1;
}

.button-blue {
  background:var(--blue);
  color:#fff;
}

.button-blue:hover {
  background:#00378f;
  box-shadow:0 6px 18px #0749bd1f;
}

.hero .button {
  margin-top:28px;
}

.button-note {
  font-size:0.6875rem;
  color:var(--muted);
  margin-top:9px;
  letter-spacing:.025em;
}

.hero-visual {
  position:relative;
  isolation:isolate;
  min-width:0;
  background:var(--blue);
  margin-left:24px;
  color:#fff;
}

.hero-visual:after {
  content:"";
  background:var(--blue);
  position:absolute;
  left:100%;
  width:50vw;
  top:0;
  bottom:0;
  z-index:-1;
}

.visual-caption {
  position:absolute;
  left:34px;
  top:33px;
  font-size:0.75rem;
  font-weight:600;
  line-height:1.65;
  letter-spacing:.13em;
  color:#c5d9ff;
}

.router-disc {
  position:absolute;
  width:370px;
  aspect-ratio:1;
  top:142px;
  left:calc(50% - 175px);
  background:var(--yellow);
  border-radius:50%;
}

.hero-router {
  position:absolute;
  width:430px;
  max-width:none;
  left:calc(50% - 202px);
  top:97px;
  filter:drop-shadow(10px 20px 13px #082a5733);
  z-index:2;
}

.hero-wifi {
  position:absolute;
  width:61px;
  left:calc(50% - 24px);
  top:99px;
  filter:brightness(0) invert(1);
  transform:rotate(-12deg);
  z-index:3;
}

.visual-tag {
  position:absolute;
  display:flex;
  gap:13px;
  align-items:center;
  background:#fff;
  color:var(--navy);
  padding:14px 18px;
  z-index:4;
  border-radius:4px;
  font-size:0.8125rem;
  font-weight:700;
  box-shadow:0 8px 26px #002b6918;
}

.visual-tag img {
  width:34px;
  height:34px;
  object-fit:contain;
}

.tag-office {
  top:196px;
  left:-5px;
  transform:rotate(-5deg);
}

.tag-shop {
  bottom:112px;
  right:-5px;
  transform:rotate(4deg);
}

.visual-foot {
  position:absolute;
  bottom:57px;
  left:34px;
  font-size:0.9375rem;
  font-weight:700;
  letter-spacing:.12em;
}

.image-note {
  position:absolute;
  bottom:25px;
  left:34px;
  right:8px;
  font-size:0.625rem;
  line-height:1.6;
  color:#d4e3ff;
}

.quick-nav {
  display:grid;
  grid-template-columns:1.05fr 1fr 1fr 1fr;
  align-items:center;
  min-height:114px;
  border-bottom:1px solid var(--line);
  gap:24px;
}

.quick-nav>p {
  font-size:0.8125rem;
  line-height:1.8;
}

.quick-nav strong {
  font-size:1rem;
}

.quick-nav>a {
  display:flex;
  align-items:center;
  gap:16px;
  min-height:48px;
  border-left:1px solid var(--line);
  padding-left:24px;
  font-size:0.875rem;
  font-weight:700;
}

.quick-nav>a:hover {
  color:var(--blue);
}

.quick-number {
  color:var(--blue);
  font-size:0.75rem;
  letter-spacing:.05em;
}

.down-arrow {
  margin-left:auto;
  color:var(--blue);
  font-size:1.25rem;
}

.section {
  padding-top:96px;
  padding-bottom:96px;
}

.section-heading {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:40px;
  margin-bottom:42px;
}

h2 {
  font-size:2.125rem;
  line-height:1.6;
  letter-spacing:-.045em;
  color:var(--navy);
  font-weight:750;
}

.section-heading h2,.cost-intro h2,.faq-layout h2 {
  margin-top:15px;
}

.section-heading>p {
  font-size:0.875rem;
  color:var(--muted);
  line-height:1.95;
  padding-bottom:6px;
}

.connection-main {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  padding:48px 52px;
  background:var(--light);
  border-top:3px solid var(--blue);
}

.pill {
  display:inline-block;
  padding:3px 13px;
  border:1px solid #99b6dc;
  border-radius:3px;
  color:var(--blue);
  font-size:0.75rem;
  font-weight:700;
}

.connection-text h3 {
  font-size:1.6875rem;
  line-height:1.6;
  letter-spacing:-.02em;
  margin:15px 0;
}

.connection-text>p {
  font-size:0.9375rem;
  line-height:1.95;
}

.connection-text .fine-print {
  font-size:0.75rem;
  color:var(--muted);
  margin-top:15px;
}

.connection-diagram {
  align-self:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:22px;
  border-radius:6px;
  position:relative;
}

.diagram-logo {
  background:#fff;
  border:1px solid #cbdaf0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
  padding:28px 32px;
  position:relative;
  z-index:1;
  border-radius:5px;
  min-width:290px;
}

.diagram-logo img {
  width:210px;
}

.diagram-logo>span {
  font-size:0.8125rem;
  color:var(--muted);
  font-weight:600;
}

.diagram-line {
  width:2px;
  height:34px;
  background:var(--blue);
}

.diagram-end {
  display:flex;
  align-items:center;
  gap:17px;
  border:1px solid #cbdaf0;
  background:#fff;
  padding:18px 25px;
  border-radius:5px;
  font-size:0.8125rem;
  font-weight:700;
  min-width:290px;
}

.diagram-end img {
  width:52px;
  height:52px;
  object-fit:contain;
  filter:invert(19%) sepia(47%) saturate(1314%) hue-rotate(177deg) brightness(85%);
}

.service-pair {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  margin-top:24px;
}

.service-card {
  border:1px solid var(--line);
  padding:34px 38px 30px;
  position:relative;
}

.service-card-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  height:56px;
  margin-bottom:20px;
}

.service-index {
  font-size:0.875rem;
  font-weight:700;
  letter-spacing:.05em;
  color:var(--blue);
}

.service-card-top img {
  width:52px;
  height:45px;
  object-fit:contain;
}

.phone-card .service-card-top img {
  width:143px;
  height:auto;
}

.small-label {
  font-size:0.75rem;
  color:var(--muted);
  margin-bottom:5px;
}

.service-card h3 {
  font-size:1.375rem;
  letter-spacing:-.035em;
  line-height:1.65;
  margin-bottom:13px;
}

.service-card>p:not(.small-label) {
  font-size:0.875rem;
  line-height:1.95;
  color:var(--muted);
}

.text-link {
  display:inline-flex;
  align-items:center;
  gap:30px;
  color:var(--blue);
  font-size:0.875rem;
  font-weight:700;
  min-height:44px;
}

.text-link:hover {
  text-decoration:underline;
  text-underline-offset:5px;
}

.text-link>span {
  font-size:1.3125rem;
}

.service-card .text-link {
  margin-top:16px;
}

.cost-section {
  background:var(--navy);
  color:#fff;
}

.cost-layout {
  display:grid;
  grid-template-columns:1fr 1.55fr;
  gap:84px;
}

.cost-section .eyebrow {
  color:#9cbded;
}

.cost-intro h2 {
  color:#fff;
}

.cost-intro>p:not(.eyebrow) {
  font-size:0.875rem;
  color:#cad7e9;
  margin-top:20px;
  line-height:2;
}

.cost-art {
  width:103px;
  height:103px;
  object-fit:contain;
  margin-top:35px;
  opacity:.9;
}

.cost-row {
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:19px;
  border-top:1px solid #526781;
  padding:25px 0;
}

.cost-marker {
  color:var(--yellow);
  font-size:0.75rem;
  line-height:2.5;
}

.cost-row h3 {
  font-size:1.25rem;
  margin-bottom:9px;
  line-height:1.6;
}

.cost-row p {
  font-size:0.875rem;
  color:#d2deec;
  line-height:2;
}

.cost-tag {
  margin-left:auto;
  flex-shrink:0;
  color:#cedbf0;
  font-size:0.6875rem;
  letter-spacing:.06em;
  border:1px solid #63758e;
  border-radius:3px;
  padding:3px 9px;
  margin-top:4px;
}

.cost-footnote {
  color:#b8cae2;
  font-size:0.75rem;
  line-height:1.9;
  border-top:1px solid #526781;
  padding-top:19px;
}

.cost-details>.text-link {
  color:var(--yellow);
  margin-top:12px;
}

.steps {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  list-style:none;
  padding:0;
  margin:0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.steps>li {
  padding:30px 25px 30px 0;
  position:relative;
}

.steps>li+li {
  padding-left:25px;
  border-left:1px solid var(--line);
}

.step-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-bottom:23px;
}

.step-top>span {
  font-size:0.625rem;
  color:var(--blue);
  letter-spacing:.08em;
}

.step-top b {
  display:block;
  font-size:2.125rem;
  line-height:1.4;
  font-weight:500;
}

.step-top img {
  width:65px;
  height:65px;
  object-fit:contain;
}

.steps h3 {
  font-size:1.125rem;
  margin-bottom:10px;
}

.steps p {
  font-size:0.875rem;
  color:var(--muted);
  line-height:1.9;
}

.prepare-section {
  background:var(--light);
}

.preparation-form {
  background:#fff;
  border:1px solid var(--line);
  border-radius:6px;
  padding:32px;
}

.question-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
}

fieldset {
  border:0;
  margin:0;
  padding:0;
  min-width:0;
}

legend {
  font-size:0.9375rem;
  font-weight:700;
  margin-bottom:19px;
  padding:0;
}

legend>span {
  font-size:0.75rem;
  color:var(--blue);
  margin-right:7px;
}

fieldset label {
  border:1px solid var(--line);
  border-radius:4px;
  display:grid;
  grid-template-columns:21px 1fr;
  column-gap:10px;
  padding:13px 16px;
  margin-top:10px;
  position:relative;
  cursor:pointer;
  background:#fff;
  transition:background-color .15s,border-color .15s;
}

fieldset label:hover {
  border-color:#88a9dc;
  background:#f7faff;
}

fieldset label:has(input:checked) {
  background:#eef4ff;
  border-color:var(--blue);
  box-shadow:inset 0 0 0 1px var(--blue);
}

fieldset input {
  margin:5px 0 0;
  width:18px;
  height:18px;
  accent-color:var(--blue);
  grid-row:1/3;
}

fieldset label>span {
  font-size:0.9375rem;
  font-weight:700;
  line-height:1.7;
}

fieldset small {
  font-size:0.6875rem;
  color:var(--muted);
  line-height:1.7;
}

.form-bottom {
  border-top:1px solid var(--line);
  margin-top:30px;
  padding-top:24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

#form-progress {
  display:block;
  font-size:0.8125rem;
  font-weight:700;
  color:var(--blue);
}

.form-privacy {
  display:block;
  font-size:0.6875rem;
  color:var(--muted);
  margin-top:4px;
}

.mobile-break {
  display:none;
}

.checklist-result {
  background:#fff;
  border:2px solid var(--blue);
  padding:32px;
  margin-top:28px;
  border-radius:6px;
  scroll-margin-top:115px;
}

.checklist-result[hidden] {
  display:none;
}

.result-heading {
  display:flex;
  justify-content:space-between;
  gap:24px;
  align-items:center;
}

.result-heading h3 {
  font-size:1.4375rem;
  margin:9px 0;
}

.result-heading p:not(.eyebrow) {
  font-size:0.8125rem;
  color:var(--muted);
}

.button-outline {
  border:1px solid var(--blue);
  color:var(--blue);
  background:#fff;
  white-space:nowrap;
}

.button-outline:hover {
  background:var(--light);
}

.result-items {
  list-style:none;
  padding:0;
  margin:24px 0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 32px;
}

.result-items li {
  padding:14px 0 14px 27px;
  position:relative;
  border-top:1px solid var(--line);
  font-size:0.875rem;
}

.result-items li:before {
  content:"";
  position:absolute;
  left:0;
  top:21px;
  width:12px;
  height:12px;
  border:1px solid var(--blue);
}

.result-note {
  font-size:0.75rem;
  color:var(--muted);
}

.result-note+.text-link {
  margin-top:12px;
}

.noscript-message {
  margin-top:20px;
}

.faq-layout {
  display:grid;
  grid-template-columns:1fr 1.9fr;
  gap:64px;
}

.faq-intro {
  font-size:0.875rem;
  color:var(--muted);
  margin-top:23px;
}

.faq-list {
  border-top:1px solid var(--line);
}

details {
  border-bottom:1px solid var(--line);
}

summary {
  display:flex;
  align-items:center;
  gap:15px;
  cursor:pointer;
  list-style:none;
  font-size:0.9375rem;
  font-weight:700;
  padding:23px 0;
  line-height:1.8;
}

summary::-webkit-details-marker {
  display:none;
}

.q-label {
  font-size:1.1875rem;
  font-weight:500;
  color:var(--blue);
  align-self:flex-start;
}

.faq-symbol {
  flex-shrink:0;
  width:15px;
  height:15px;
  margin-left:auto;
  position:relative;
}

.faq-symbol:before,.faq-symbol:after {
  content:"";
  position:absolute;
  background:var(--blue);
  top:7px;
  left:1px;
  width:13px;
  height:1px;
}

.faq-symbol:after {
  transform:rotate(90deg);
}

details[open] .faq-symbol:after {
  transform:rotate(0);
}

.faq-answer {
  padding:0 30px 25px 35px;
  color:var(--muted);
  font-size:0.875rem;
  line-height:2;
}

.official-section {
  background:var(--yellow);
  padding:61px 0;
}

.official-inner {
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:80px;
  align-items:center;
}

.official-inner .eyebrow {
  color:var(--navy);
}

.official-inner h2 {
  font-size:1.8125rem;
  margin-top:15px;
  line-height:1.65;
}

.official-inner>div>p:last-child {
  font-size:0.75rem;
  margin-top:16px;
}

.official-links {
  display:flex;
  flex-direction:column;
  gap:12px;
}

.official-links>a {
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:#fff;
  padding:17px 24px;
  border-radius:4px;
  font-weight:700;
  font-size:1.1875rem;
  line-height:1.7;
}

.official-links>a:hover {
  background:#f1f6ff;
  box-shadow:0 4px 12px #6c510012;
}

.official-links small {
  display:block;
  font-size:0.6875rem;
  font-weight:500;
  color:var(--muted);
  letter-spacing:.07em;
}

.official-word {
  font-size:0.75rem;
  margin-left:12px;
  font-weight:500;
}

.official-links>a>span:nth-child(2) {
  font-size:1.5625rem;
  color:var(--blue);
}

.site-footer {
  padding:45px 0 20px;
  background:#fff;
}

.footer-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:32px;
}

.back-top {
  font-size:0.75rem;
  display:flex;
  gap:20px;
  align-items:center;
  min-height:44px;
}

.back-top>span {
  font-size:1.375rem;
}

.site-footer .wrap>p {
  font-size:0.6875rem;
  color:var(--muted);
  line-height:1.95;
}

.footer-bottom {
  margin-top:26px;
  padding-top:20px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  font-size:0.625rem;
  letter-spacing:.07em;
  color:var(--muted);
}

@media(min-width:1500px) {
  .hero-inner {
    min-height:620px;
  }
  .hero-copy {
    padding-top:70px;
  }
  .hero-router {
    top:110px;
  }
  .router-disc {
    top:157px;
  }
}

@media(max-width:1100px) {
  .wrap {
    width:calc(100% - 64px);
  }
  .site-header nav {
    gap:18px;
    font-size:0.75rem;
  }
  .nav-cta {
    padding:12px 15px;
    gap:12px;
  }
  .hero-inner {
    min-height:580px;
  }
  .hero-copy {
    padding-top:55px;
  }
  h1 {
    font-size:2.6875rem;
  }
  .hero-visual {
    margin-left:16px;
  }
  .hero-router {
    width:380px;
    left:calc(50% - 180px);
    top:120px;
  }
  .router-disc {
    width:310px;
    left:calc(50% - 150px);
    top:165px;
  }
  .tag-office {
    left:-4px;
    top:188px;
  }
  .tag-shop {
    right:-10px;
    bottom:120px;
  }
  .visual-tag {
    font-size:0.6875rem;
    padding:12px;
  }
  .visual-tag img {
    width:28px;
    height:28px;
  }
  .image-note {
    left:24px;
    font-size:0.5625rem;
  }
  .visual-foot,.visual-caption {
    left:24px;
  }
  .quick-nav {
    gap:18px;
  }
  .quick-nav>a {
    padding-left:18px;
    gap:12px;
    font-size:0.75rem;
  }
  .connection-main {
    gap:25px;
    padding:36px;
  }
  .cost-layout {
    gap:50px;
    grid-template-columns:1fr 1.55fr;
  }
  .service-card {
    padding:28px;
  }
  .service-card h3 {
    font-size:1.25rem;
  }
  .section-heading>p {
    font-size:0.8125rem;
  }
  .question-grid {
    gap:18px;
  }
  legend {
    font-size:0.8125rem;
  }
  fieldset label {
    padding:12px;
  }
  .faq-layout {
    gap:45px;
  }
  .official-inner {
    gap:45px;
  }
}

@media(max-width:850px) {
  .site-header {
    height:82px;
  }
  .site-header nav {
    gap:17px;
  }
  .site-header nav>a:not(.nav-cta) {
    display:none;
  }
  .hero-inner {
    min-height:550px;
    grid-template-columns:1.1fr 1fr;
  }
  .hero-copy {
    padding-top:40px;
  }
  .hero-kicker {
    font-size:0.75rem;
  }
  h1 {
    font-size:2.1875rem;
  }
  .hero-description {
    font-size:0.875rem;
  }
  .hero .button {
    font-size:0.8125rem;
    padding:14px 17px;
    gap:15px;
  }
  .hero .eyebrow {
    font-size:0.625rem;
  }
  .hero-router {
    width:325px;
    left:calc(50% - 158px);
    top:137px;
  }
  .router-disc {
    width:265px;
    left:calc(50% - 130px);
    top:187px;
  }
  .tag-office {
    top:179px;
    left:-4px;
  }
  .tag-shop {
    bottom:100px;
    right:-10px;
  }
  .visual-caption {
    font-size:0.625rem;
  }
  .hero-wifi {
    top:118px;
    width:48px;
  }
  .visual-foot {
    font-size:0.75rem;
  }
  .image-note {
    bottom:15px;
    font-size:0.5625rem;
  }
  .section {
    padding-top:72px;
    padding-bottom:72px;
  }
  h2 {
    font-size:1.8125rem;
  }
  .section-heading {
    align-items:flex-start;
    gap:20px;
  }
  .connection-main {
    grid-template-columns:1fr 1fr;
    padding:30px;
    gap:20px;
  }
  .connection-text h3 {
    font-size:1.4375rem;
  }
  .connection-diagram {
    padding:0;
  }
  .diagram-logo,.diagram-end {
    min-width:240px;
  }
  .diagram-logo {
    padding:24px;
  }
  .diagram-logo img {
    width:180px;
  }
  .diagram-end {
    padding:16px;
    font-size:0.6875rem;
    gap:12px;
  }
  .service-card h3 {
    font-size:1.125rem;
  }
  .cost-layout {
    gap:30px;
  }
  .cost-tag {
    display:none;
  }
  .steps {
    grid-template-columns:1fr 1fr;
  }
  .steps>li {
    padding:25px!important;
  }
  .steps>li:nth-child(3) {
    border-left:0;
  }
  .steps>li:nth-child(-n+2) {
    border-bottom:1px solid var(--line);
  }
  .question-grid {
    gap:16px;
  }
  fieldset label {
    grid-template-columns:18px 1fr;
    column-gap:8px;
    padding:12px 9px;
  }
  fieldset label>span {
    font-size:0.8125rem;
  }
  fieldset small {
    font-size:0.625rem;
  }
  .preparation-form {
    padding:24px;
  }
  legend {
    font-size:0.75rem;
  }
  legend>span {
    display:block;
    margin-bottom:8px;
  }
  .faq-layout {
    grid-template-columns:1fr 1.6fr;
    gap:30px;
  }
  .official-inner {
    gap:30px;
  }
  .official-inner h2 {
    font-size:1.5625rem;
  }
  .official-links>a {
    padding:17px;
    font-size:1.125rem;
  }
  .official-word {
    margin-left:5px;
    font-size:0.625rem;
  }
  .quick-nav {
    gap:10px;
  }
  .quick-nav>a {
    padding-left:14px;
    gap:8px;
    font-size:0.6875rem;
  }
  .quick-nav>p {
    font-size:0.6875rem;
  }
  .quick-nav strong {
    font-size:0.8125rem;
  }
  .quick-number {
    font-size:0.625rem;
  }
}

@media(max-width:640px) {
  html {
    scroll-padding-top:88px;
  }
  .wrap {
    width:calc(100% - 40px);
  }
  .site-note {
    height:27px;
    justify-content:center;
    padding:3px 16px;
    font-size:0.625rem;
  }
  .site-note span {
    display:none;
  }
  .site-header {
    height:75px;
  }
  .brand img {
    width:151px;
  }
  .brand>span {
    font-size:0.5625rem;
    letter-spacing:.02em;
  }
  .brand {
    gap:6px;
  }
  .menu-toggle {
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:7px;
    background:transparent;
    color:var(--navy);
    padding:8px 0 8px 12px;
    min-width:54px;
    min-height:50px;
  }
  .menu-label {
    font-size:0.5625rem;
    line-height:1.2;
  }
  .menu-lines {
    display:block;
    width:23px;
    height:14px;
    border-top:2px solid var(--navy);
    border-bottom:2px solid var(--navy);
    position:relative;
  }
  .menu-lines:after {
    content:"";
    position:absolute;
    top:5px;
    left:0;
    width:23px;
    height:2px;
    background:var(--navy);
  }
  .menu-toggle[aria-expanded=true] .menu-lines {
    border:0;
    transform:rotate(45deg);
    height:2px;
    background:var(--navy);
    margin-block:6px;
  }
  .menu-toggle[aria-expanded=true] .menu-lines:after {
    top:0;
    transform:rotate(90deg);
  }
  .site-header nav {
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:#fff;
    border-bottom:1px solid var(--line);
    padding:12px 20px 20px;
    box-shadow:0 10px 18px #122f5910;
  }
  .site-header nav.is-open {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:0;
  }
  .site-header nav>a:not(.nav-cta) {
    display:block;
    padding:13px 5px;
    border-bottom:1px solid #e8edf4;
    font-size:0.875rem;
  }
  .site-header nav .nav-cta {
    margin-top:15px;
    justify-content:space-between;
    font-size:0.875rem;
  }
  .hero-inner {
    display:flex;
    flex-direction:column;
    min-height:0;
    width:100%;
  }
  .hero-copy {
    padding:34px 24px 32px;
  }
  .hero .eyebrow {
    font-size:0.625rem;
    letter-spacing:.12em;
  }
  .eyebrow-line {
    width:18px;
  }
  .hero-kicker {
    font-size:0.75rem;
    margin-top:20px;
    letter-spacing:.045em;
  }
  h1 {
    font-size:clamp(31px,7.95vw,48px);
    line-height:1.5;
    margin-top:8px;
    letter-spacing:-.045em;
  }
  .hero-description {
    font-size:0.875rem;
    line-height:1.9;
    margin-top:18px;
  }
  .desktop-break {
    display:none;
  }
  .hero .button {
    margin-top:23px;
    font-size:0.875rem;
    padding:15px 20px;
    width:100%;
    max-width:370px;
    min-height:54px;
  }
  .button-note {
    font-size:0.625rem;
    margin-top:8px;
  }
  .hero-visual {
    height:352px;
    margin:0 0 0 20px;
    min-height:352px;
    border-top-left-radius:7px;
    overflow:hidden;
  }
  .hero-visual:after {
    display:none;
  }
  .visual-caption {
    font-size:0.5625rem;
    left:20px;
    top:19px;
  }
  .router-disc {
    width:242px;
    left:calc(50% - 108px);
    top:55px;
  }
  .hero-router {
    width:299px;
    left:calc(50% - 137px);
    top:15px;
  }
  .hero-wifi {
    width:45px;
    top:28px;
    left:calc(50% - 3px);
  }
  .visual-tag {
    padding:9px 12px;
    font-size:0.625rem;
    gap:9px;
  }
  .visual-tag img {
    width:27px;
    height:27px;
  }
  .tag-office {
    top:105px;
    left:14px;
  }
  .tag-shop {
    bottom:71px;
    right:16px;
  }
  .visual-foot {
    bottom:30px;
    left:20px;
    font-size:0.6875rem;
  }
  .image-note {
    left:20px;
    bottom:10px;
    font-size:0.5rem;
  }
  .quick-nav {
    grid-template-columns:1fr;
    gap:0;
    padding-top:21px;
    padding-bottom:4px;
  }
  .quick-nav>p {
    font-size:0.8125rem;
    line-height:1.6;
    display:flex;
    gap:4px;
    margin-bottom:14px;
  }
  .quick-nav>p>br {
    display:none;
  }
  .quick-nav strong {
    font-size:0.8125rem;
  }
  .quick-nav>a {
    padding:13px 0;
    border-left:0;
    border-top:1px solid var(--line);
    font-size:0.8125rem;
    gap:16px;
    min-height:54px;
  }
  .quick-number {
    font-size:0.6875rem;
  }
  .down-arrow {
    font-size:1.0625rem;
  }
  .section {
    padding-top:59px;
    padding-bottom:59px;
  }
  .section-heading {
    display:block;
    margin-bottom:28px;
  }
  .eyebrow {
    font-size:0.625rem;
    letter-spacing:.13em;
  }
  h2 {
    font-size:1.6875rem;
    line-height:1.6;
  }
  .section-heading h2,.cost-intro h2,.faq-layout h2 {
    margin-top:12px;
  }
  .section-heading>p {
    font-size:0.8125rem;
    margin-top:18px;
    padding:0;
    line-height:1.9;
  }
  .connection-main {
    display:flex;
    flex-direction:column;
    gap:27px;
    padding:26px 23px 30px;
    border-top-width:3px;
  }
  .pill {
    font-size:0.625rem;
  }
  .connection-text h3 {
    font-size:1.4375rem;
    margin-top:13px;
  }
  .connection-text>p {
    font-size:0.875rem;
  }
  .connection-text .fine-print {
    font-size:0.6875rem;
  }
  .connection-diagram {
    width:100%;
    padding-top:5px;
  }
  .diagram-logo,.diagram-end {
    width:100%;
    min-width:0;
    max-width:300px;
  }
  .diagram-logo {
    gap:16px;
    padding:22px;
  }
  .diagram-logo>span {
    font-size:0.75rem;
  }
  .diagram-line {
    height:24px;
  }
  .diagram-end {
    justify-content:center;
    padding:15px;
    font-size:0.75rem;
  }
  .diagram-end img {
    width:42px;
    height:42px;
  }
  .service-pair {
    grid-template-columns:1fr;
    gap:16px;
    margin-top:16px;
  }
  .service-card {
    padding:24px;
  }
  .service-card h3 {
    font-size:1.25rem;
  }
  .service-card-top {
    height:38px;
    margin-bottom:18px;
  }
  .service-card-top img {
    height:35px;
    width:45px;
  }
  .phone-card .service-card-top img {
    width:131px;
  }
  .service-card>p:not(.small-label) {
    font-size:0.875rem;
  }
  .service-card .text-link {
    margin-top:13px;
  }
  .cost-layout {
    display:block;
  }
  .cost-intro {
    position:relative;
  }
  .cost-intro>p:not(.eyebrow) {
    font-size:0.8125rem;
    margin-top:17px;
  }
  .cost-art {
    position:absolute;
    right:8px;
    bottom:8px;
    width:72px;
    height:72px;
    margin:0;
    opacity:.7;
  }
  .cost-details {
    margin-top:32px;
  }
  .cost-row {
    padding:21px 0;
    gap:16px;
  }
  .cost-row h3 {
    font-size:1.125rem;
    margin-bottom:8px;
  }
  .cost-row p {
    font-size:0.8125rem;
  }
  .cost-tag {
    display:block;
    font-size:0.5625rem;
    padding:3px 5px;
  }
  .cost-footnote {
    font-size:0.6875rem;
  }
  .cost-details>.text-link {
    font-size:0.8125rem;
    gap:18px;
  }
  .steps {
    grid-template-columns:1fr;
  }
  .steps>li {
    padding:25px 0 25px 79px!important;
    min-height:151px;
    border:0!important;
  }
  .steps>li+li {
    border-top:1px solid var(--line)!important;
  }
  .step-top {
    position:absolute;
    left:0;
    top:22px;
    display:flex;
    flex-direction:column;
    gap:12px;
    align-items:flex-start;
    margin:0;
  }
  .step-top>span {
    font-size:0.5625rem;
  }
  .step-top b {
    display:inline;
    font-size:1.25rem;
    margin-left:4px;
  }
  .step-top img {
    width:48px;
    height:48px;
  }
  .steps h3 {
    font-size:1.125rem;
    margin-bottom:8px;
  }
  .steps p {
    font-size:0.8125rem;
  }
  .mobile-break {
    display:block;
  }
  .prepare-section .section-heading>p br {
    display:none;
  }
  .preparation-form {
    padding:24px 20px;
  }
  .question-grid {
    grid-template-columns:1fr;
    gap:27px;
  }
  legend {
    font-size:0.9375rem;
    margin-bottom:7px;
  }
  legend>span {
    display:inline;
    margin-right:8px;
    font-size:0.75rem;
  }
  fieldset label {
    padding:13px 14px;
    grid-template-columns:20px 1fr;
    column-gap:12px;
    margin-top:9px;
  }
  fieldset label>span {
    font-size:0.875rem;
  }
  fieldset small {
    font-size:0.6875rem;
  }
  .form-bottom {
    flex-direction:column;
    align-items:stretch;
    gap:17px;
    margin-top:24px;
    padding-top:20px;
  }
  .form-bottom .button {
    width:100%;
    font-size:0.875rem;
    min-height:52px;
  }
  .form-privacy {
    font-size:0.625rem;
  }
  #form-progress {
    font-size:0.75rem;
  }
  .checklist-result {
    padding:22px 20px;
    scroll-margin-top:92px;
  }
  .result-heading {
    display:block;
  }
  .result-heading h3 {
    font-size:1.375rem;
  }
  .result-heading .button {
    margin-top:20px;
    font-size:0.8125rem;
    min-height:45px;
    padding:10px 16px;
  }
  .result-items {
    grid-template-columns:1fr;
    margin:20px 0;
  }
  .result-items li {
    font-size:0.8125rem;
  }
  .result-note {
    font-size:0.6875rem;
  }
  .checklist-result>.text-link {
    font-size:0.75rem;
    gap:10px;
  }
  .faq-layout {
    display:block;
  }
  .faq-intro {
    font-size:0.8125rem;
    margin-top:16px;
  }
  .faq-intro br {
    display:none;
  }
  .faq-list {
    margin-top:27px;
  }
  summary {
    font-size:0.8125rem;
    gap:12px;
    padding:21px 0;
  }
  .q-label {
    font-size:1.0625rem;
  }
  .faq-answer {
    font-size:0.8125rem;
    padding:0 8px 22px 31px;
  }
  .official-section {
    padding:41px 0;
  }
  .official-inner {
    display:block;
  }
  .official-inner h2 {
    font-size:1.5625rem;
  }
  .official-inner>div>p:last-child {
    font-size:0.75rem;
    line-height:1.85;
  }
  .official-links {
    margin-top:24px;
    gap:10px;
  }
  .official-links>a {
    padding:16px 20px;
    font-size:1.125rem;
  }
  .official-word {
    font-size:0.6875rem;
    margin-left:10px;
  }
  .official-links small {
    font-size:0.625rem;
  }
  .site-footer {
    padding-top:32px;
  }
  .footer-top {
    align-items:flex-start;
    gap:20px;
    margin-bottom:24px;
  }
  .back-top {
    font-size:0;
    gap:0;
    min-width:44px;
    justify-content:center;
    border:1px solid var(--line);
  }
  .back-top>span {
    font-size:1.1875rem;
  }
  .site-footer .wrap>p {
    font-size:0.625rem;
    line-height:1.9;
  }
  .footer-bottom {
    font-size:0.5625rem;
    gap:15px;
    align-items:flex-end;
    margin-top:22px;
    padding-top:18px;
  }
  .footer-bottom>span:last-child {
    font-size:0.5rem;
    letter-spacing:.06em;
  }
}

@media(max-width:359px) {
  .wrap {
    width:calc(100% - 32px);
  }
  .hero-copy {
    padding-inline:20px;
  }
  h1 {
    font-size:1.75rem;
  }
  .hero-kicker {
    font-size:0.6875rem;
  }
  .hero .button {
    font-size:0.75rem;
    gap:12px;
  }
  .button-note {
    font-size:0.5625rem;
  }
  .hero-visual {
    margin-left:16px;
    height:325px;
    min-height:325px;
  }
  .router-disc {
    width:215px;
    left:calc(50% - 104px);
  }
  .hero-router {
    width:272px;
    left:calc(50% - 133px);
    top:21px;
  }
  .visual-tag {
    padding:8px;
    font-size:0.5625rem;
  }
  .visual-tag img {
    width:22px;
    height:22px;
  }
  .tag-office {
    left:9px;
  }
  .tag-shop {
    right:10px;
  }
  .image-note {
    font-size:0.4375rem;
  }
  .cost-tag {
    display:none;
  }
  .service-card h3 {
    font-size:1.125rem;
  }
  .preparation-form {
    padding:20px 16px;
  }
  .official-inner h2 {
    font-size:1.4375rem;
  }
  .footer-bottom {
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }
}

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

/* Readability refinements following desktop and mobile visual review. */
.hero-description,.connection-text>p:not(.fine-print),.service-card>p:not(.small-label),.steps p,.cost-row p,.cost-intro>p:not(.eyebrow),.section-heading>p,.faq-answer,.faq-intro {
  font-size:1rem;
}

.site-header nav,.quick-nav>a,.text-link,summary,legend,fieldset label>span {
  font-size:.875rem;
}

.button-note,.form-privacy,fieldset small,.connection-text .fine-print,.cost-footnote,.result-note,.site-footer .wrap>p,.official-links small {
  font-size:.75rem;
}

.site-note {
  min-height:32px;
  height:auto;
}

.site-note span {
  font-size:.75rem;
}

.image-note {
  font-size:.75rem;
  line-height:1.6;
  bottom:18px;
}

.visual-foot {
  bottom:72px;
}

.cost-art {
  margin-top:28px;
}

@media(max-width:1100px) {
  .hero-description {
    font-size:.9375rem;
  }
  .site-header nav {
    gap:18px;
    font-size:.75rem;
  }
}

@media(max-width:850px) {
  .section-heading {
    flex-direction:column;
    gap:18px;
  }
  .section-heading>p {
    padding-bottom:0;
  }
  .cost-layout {
    grid-template-columns:1fr 1.7fr;
  }
  .cost-intro>p:not(.eyebrow) {
    font-size:.875rem;
  }
  .cost-intro>p:not(.eyebrow)>br {
    display:none;
  }
  .cost-row p {
    font-size:.875rem;
  }
  .question-grid {
    grid-template-columns:1fr;
  }
  .question-grid fieldset {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
  }
  legend>span {
    display:inline;
  }
  fieldset label {
    margin-top:0;
  }
  legend {
    margin-bottom:14px;
  }
  .official-inner {
    grid-template-columns:1fr 1fr;
  }
}

@media(max-width:640px) {
  .site-note {
    min-height:27px;
  }
  .hero-description {
    font-size:1rem;
  }
  .hero-visual {
    min-height:380px;
    height:380px;
  }
  .visual-foot {
    bottom:64px;
    font-size:.75rem;
  }
  .image-note {
    bottom:14px;
    right:20px;
    font-size:.6875rem;
  }
  .tag-shop {
    bottom:99px;
  }
  .button-note {
    max-width:320px;
    line-height:1.8;
  }
  .section-heading>p {
    margin-top:18px;
  }
  .cost-layout {
    display:block;
  }
  .cost-intro>p:not(.eyebrow) {
    max-width:245px;
    font-size:1rem;
  }
  .cost-art {
    position:static;
    width:64px;
    height:64px;
    margin-top:24px;
  }
  .cost-tag {
    display:none;
  }
  .cost-row p {
    font-size:1rem;
  }
  .question-grid fieldset {
    display:block;
  }
  fieldset label {
    margin-top:9px;
  }
  legend {
    margin-bottom:10px;
  }
  .hero .button {
    font-size:.875rem;
  }
  .service-card h3 {
    font-size:1.25rem;
  }
  summary {
    font-size:.9375rem;
  }
  .result-items li {
    font-size:.9375rem;
  }
  .official-inner {
    display:block;
  }
  .official-inner>div>p:last-child {
    font-size:.875rem;
  }
  .site-footer .wrap>p {
    font-size:.75rem;
  }
  .footer-bottom {
    font-size:.6875rem;
  }
  .footer-bottom>span:last-child {
    font-size:.625rem;
  }
  .brand>span {
    font-size:.625rem;
  }
  .back-top {
    font-size:0;
  }
}

@media(max-width:359px) {
  .hero-description {
    font-size:.875rem;
  }
  .service-card {
    padding:20px;
  }
  .service-card h3 {
    font-size:1.125rem;
  }
  .hero .button {
    font-size:.8125rem;
  }
  .hero-visual {
    min-height:355px;
    height:355px;
  }
  .image-note {
    font-size:.6875rem;
  }
  .visual-caption {
    font-size:.5rem;
  }
  .cost-row p {
    font-size:.9375rem;
  }
  .official-inner h2 {
    font-size:1.4375rem;
  }
}

@media (max-width: 640px) {
  .cost-art { position: absolute; right: 4px; bottom: 8px; margin: 0; }
  .cost-intro > p:not(.eyebrow) { max-width: calc(100% - 86px); }
}

/* Checkable preparation list; align the result beneath the sticky header. */
.checklist-result { scroll-margin-top: 20px; }
.result-items li { padding: 0; }
.result-items li::before { display: none; }
.result-items label { display: flex; align-items: flex-start; gap: 14px; padding: 15px 0; min-height: 48px; cursor: pointer; }
.result-items input { width: 17px; height: 17px; flex-shrink: 0; margin: 5px 0 0; accent-color: var(--blue); }
.result-items input:checked + span { color: var(--muted); text-decoration: line-through; }
#checklist-completion { color: var(--blue); font-weight: 700; margin-top: 7px; }
button:disabled { opacity: .6; cursor: not-allowed; }
@media print {
  body {
    color:#000;
    background:#fff;
    font-size:12pt;
  }
  body>*:not(main),main>section:not(#prepare),main>.quick-nav,.prepare-section .section-heading,.preparation-form,.noscript-message,.result-heading button,.checklist-result>.text-link {
    display:none!important;
  }
  .prepare-section {
    background:white;
    padding:0;
  }
  .wrap {
    width:100%;
  }
  .checklist-result {
    border:0;
    padding:0;
    margin:0;
    outline:0;
  }
  .checklist-result[hidden] {
    display:block;
  }
  .checklist-result[hidden]:after {
    content:"このガイドでは、住所・利用開始希望日・接続台数・電話の必要数を整理してから、公式サイトで条件をご確認ください。";
  }
  .result-items {
    display:block;
  }
  .result-items li {
    break-inside:avoid;
    font-size:12pt;
  }
  .eyebrow {
    color:#333;
  }
  .result-heading h3 {
    font-size:20pt;
  }
  .result-note {
    font-size:10pt;
  }
  .result-heading p {
    font-size:11pt!important;
  }
}