:root {
  color-scheme: light;
  --paper: #f8f6f1;
  --white: #fcfbf8;
  --ink: #183640;
  --muted: #52666b;
  --teal: #174f5d;
  --sea: #2e7d86;
  --line: #d4d9d5;
  --copper: #c48a55;
  --serif: "Noto Serif JP", "Noto Serif CJK JP", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  --sans: "Noto Sans JP", "Noto Sans CJK JP", "Hiragino Sans", "Yu Gothic", Meiryo, system-ui, sans-serif;
  --latin: Arial, sans-serif;
}
* {box-sizing: border-box;}
html {scroll-padding-top: 1rem;}
body {margin: 0; font: 400 1rem/1.84 var(--sans); color: var(--ink); background: var(--paper);}
h1,h2,h3,p,figure,ol,dl,dd {margin: 0;}
a {color: inherit; text-underline-offset: .22em;}
a:focus-visible, summary:focus-visible {outline: 3px solid #a14a2b; outline-offset: 4px;}
.wrap {width: min(1160px, calc(100% - 2.5rem)); margin-inline: auto;}
.skip {position: absolute; z-index: 2; left: .5rem; top: 0; padding: .7rem 1rem; background: white; transform: translateY(-130%);}
.skip:focus {transform: none;}
.masthead {background: var(--white); border-bottom: 1px solid var(--line);}
.header-row,.logo,.header-row nav {display: flex; align-items: center;}
.header-row {justify-content: space-between; gap: .6rem; min-height: 74px; padding-block: .75rem;}
.logo {gap: .5rem; text-decoration: none; color: #12384a;}
.logo img {width: 38px; height: 38px;}
.brand {display: grid; gap: .29rem; line-height: 1; white-space: nowrap;}
.brand small {color: #5b6b71; font-size: .6rem; letter-spacing: .24em;}
.brand b {font-size: .95rem; letter-spacing: .04em;}
.brand span {color: var(--sea); font: 700 .58rem/1 var(--latin); letter-spacing: .32em;}
.header-row nav {display: none;}
.header-link {display: inline-grid; place-items: center; min-height: 44px; border: 1px solid #a6b5b4; border-radius: 2px; padding: .4rem .75rem; text-decoration: none; font-size: .8rem; font-weight: 700; white-space: nowrap;}
.header-link:hover,.resource:hover {background: #e4ece7;}
.crumb {margin-top: .85rem;}
.crumb ol {list-style: none; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; font-size: .72rem; color: var(--muted);}
.crumb li + li::before {content:"›"; padding-right: .45rem; color: #688281;}
.hero {display: grid; align-items: center; gap: 1.5rem; padding-block: 1.55rem 2.25rem;}
.eyebrow {font: 700 .68rem/1.5 var(--latin); letter-spacing: .15em; color: var(--teal);}
.eyebrow span {color: #926239; margin: 0 .25em;}
h1 {font: 700 clamp(2.05rem, 9vw, 4.35rem)/1.36 var(--serif); letter-spacing: .016em; color: #0d3442; margin: .65rem 0 .85rem;}
h1 strong {font: inherit; color: var(--teal);}
.lead {max-width: 33em; font-size: 1rem; line-height: 1.95;}
.hero-call {display: flex; gap: .5rem 1rem; flex-wrap: wrap; align-items: center; margin-top: 1.2rem;}
.number {display: inline-flex; gap: .6rem; align-items: center; min-height: 51px; padding: .75rem 1.15rem; color: white; background: var(--teal); border-radius: 2px; text-decoration: none; font: 700 1.34rem/1.25 var(--latin); letter-spacing: .02em;}
.number:hover {background: #103c49;}
.hero-call > span {display: grid; line-height: 1.7;}
.hero-call b {font-size: .84rem;}
.hero-call small {font-size: .76rem; color: var(--muted);}
.drawing {border: 1px solid #2b545c; background: #163e48; color: #f4f0e3;}
.drawing img {display: block; width: 100%; height: auto;}
.drawing-head,.drawing figcaption {display: flex; gap: .85rem; justify-content: space-between; align-items: baseline; padding: .58rem .85rem; font-size: .69rem; letter-spacing: .03em;}
.drawing-head {border-bottom: 1px solid #4a6b70;}
.drawing-head span:first-child {color: #dce7de; font: 700 .61rem/1.4 var(--latin); letter-spacing: .14em;}
.drawing figcaption {border-top: 1px solid #4a6b70; justify-content: flex-start; flex-wrap: wrap; row-gap: .1rem;}
.drawing figcaption b {color: #e7c4a0; font: 700 .67rem/1.5 var(--latin); margin-right: .25em;}
.figure-note {margin-left: auto; color: #cfddd8;}
.section {padding-block: 2.6rem; border-top: 1px solid var(--line);}
.guide,.faq {background: var(--white);}
.section-head h2,.contact h2 {margin: .48rem 0 .55rem; font: 700 clamp(1.65rem, 3.7vw, 2.35rem)/1.45 var(--serif); letter-spacing: .015em;}
.section-head > p:last-child:not(.eyebrow) {color: var(--muted); max-width: 45em;}
.guide-list {padding: 0; list-style: none; display: grid; margin-top: 1.5rem;}
.guide-list li {display: grid; grid-template-columns: 2.1rem 1fr; align-items: baseline; gap: .15rem .6rem; padding: 1rem 0; border-top: 1px solid #b6c3bf;}
.index {grid-row: span 2; font: 700 .9rem/1.5 var(--latin); color: var(--sea); letter-spacing: .05em;}
.guide-list h3 {font: 700 1.12rem/1.6 var(--sans);}
.guide-list p,.visit-list dd,.details p {font-size: .95rem; color: var(--muted);}
.safe {display: flex; align-items: baseline; gap: .8rem; padding: 1rem; background: #f2eadc; border-left: 2px solid var(--copper); margin-top: 1rem;}
.safe-icon {font: 700 .84rem/1 var(--latin); border: 1.2px solid; border-radius: 50%; min-width: 1.15rem; height: 1.15rem; display: inline-grid; place-items: center; color: #805938;}
.safe strong {font-size: .94rem;}
.safe p {font-size: .88rem; margin-top: .14rem;}
.split {display: grid; gap: 1.25rem;}
.visit-list > div {padding: .92rem 0; border-top: 1px solid var(--line);}
.visit-list > div:last-child,.details details:last-child {border-bottom: 1px solid var(--line);}
.visit-list dt {font-weight: 700; font-size: 1.02rem; margin: 0 0 .22rem;}
.details details {border-top: 1px solid var(--line);}
.details summary {cursor: pointer; list-style: none; display: flex; gap: .9rem; justify-content: space-between; align-items: center; padding: 1rem 0; font-weight: 700; line-height: 1.65;}
.details summary::-webkit-details-marker {display: none;}
.details summary::after {content: "+"; color: var(--teal); font: 400 1.4rem/1 var(--latin); width: 1.2rem; text-align: center;}
.details details[open] summary::after {content: "−";}
.details p {padding-bottom: 1.15rem;}
.resource {display: table; margin-top: .5rem; font-weight: 700; font-size: .87rem; color: var(--teal);}
.contact {padding-block: 2.55rem; background: var(--teal); color: white;}
.contact-grid {display: grid; gap: 1.2rem;}
.contact .eyebrow {color: #dbded0;}
.contact-grid p:not(.eyebrow) {font-size: .93rem;}
.contact-call a {color: white; text-decoration-color: #97bab7; text-decoration-thickness: 1px; font: 700 clamp(1.85rem, 6.6vw, 3rem)/1.4 var(--latin);}
.contact-call a:hover {text-decoration-color: white;}
.contact-call a:focus-visible {outline-color: white;}
.contact-call p {margin-top: .35rem;}
footer {padding-block: 1.8rem; font-size: .82rem; color: var(--muted);}
footer strong {font-size: 1.02rem; color: var(--ink);}
address {font-style: normal;}
.footer-row,footer nav {display: flex; flex-wrap: wrap; align-items: center;}
.footer-row {justify-content: space-between; gap: .85rem 2rem;}
footer nav {gap: .4rem 1rem; font-weight: 650; color: var(--teal);}
@media (max-width: 359px) {
  .wrap {width: calc(100% - 2rem);}
  .header-row {gap: .25rem;}
  .logo {gap: .3rem;}
  .logo img {width: 30px; height: 30px;}
  .brand b {font-size: .8rem; letter-spacing: 0;}
  .header-link {padding-inline: .5rem;}
}
@media (min-width: 640px) {
  .wrap {width: min(1160px,calc(100% - 4rem));}
  .header-row {min-height: 82px;}
  .logo img {width: 46px; height: 46px;}
  .logo {gap: .7rem;}
  .brand b {font-size: 1.13rem; letter-spacing: .1em;}
  .header-link {padding-inline: 1.15rem;}
  .hero {grid-template-columns: minmax(0,1.06fr) minmax(0,1fr); gap: 1.65rem; padding-block: 2rem 2.8rem;}
  h1 {font-size: clamp(2.1rem,4.6vw,4.25rem);}
  .guide-list {grid-template-columns: repeat(3, minmax(0,1fr)); column-gap: 1.6rem;}
  .guide-list li {display: block;}
  .guide-list .index {display: block; font: 500 1.6rem/1.3 var(--latin); margin-bottom: .45rem;}
  .guide-list h3 {margin-bottom: .32rem;}
  .safe {padding: 1rem 1.2rem;}
  .section {padding-block: 3.2rem;}
  .contact-grid {grid-template-columns: 1fr auto; align-items: center;}
}
@media (min-width: 900px) {
  .wrap {width: min(1160px,calc(100% - 6rem));}
  .header-row {gap: 2rem;}
  .header-row nav {display: flex; gap: 1.65rem; margin-left: auto; font-size: .84rem; font-weight: 650;}
  .header-row nav a {text-decoration: none; padding: .6rem 0;}
  .header-row nav a:hover {text-decoration: underline;}
  .crumb {margin-top: 1.05rem;}
  .hero {gap: clamp(2.5rem,6vw,6.4rem); padding-block: 2.25rem 3.8rem;}
  h1 {margin: .65rem 0 1.1rem;}
  .hero .lead {font-size: 1.035rem;}
  .hero-call {margin-top: 1.5rem;}
  .drawing-head,.drawing figcaption {padding-inline: 1.1rem;}
  .section {padding-block: 4rem;}
  .guide-list {column-gap: 2.6rem; margin-top: 1.75rem;}
  .split {grid-template-columns: minmax(200px,.83fr) minmax(0,1.55fr); gap: clamp(2rem,5.5vw,5rem);}
  .contact {padding-block: 3.4rem;}
  .contact-call {border-left: 1px solid #60868e; padding-left: 2.3rem;}
}
@media print {
  .header-row nav,.header-link,.skip {display: none;}
  .section,.hero,.contact,footer {padding-block: 1.1rem;}
  .contact,.number {color: var(--ink); background: white;}
  .contact .eyebrow,.contact-call a {color: var(--ink);}
  .drawing,.guide-list li,.details details {break-inside: avoid;}
}