.contact-page {
  --paper: #fff;
  --line: #ccd6cf;
  --contact-pale: #f4f7f4;
  --contact-accent: var(--green);
  background: #fff;
}
.contact-page .site-header { background: rgba(255,255,255,.97); }
.contact-page .page-hero {
  min-height: 310px;
  display: grid;
  align-items: center;
  border-bottom: 0;
  background-color: var(--green-deep);
  background-image:
    linear-gradient(90deg, rgba(0, 63, 48, .96) 0%, rgba(0, 63, 48, .89) 40%, rgba(0, 63, 48, .54) 69%, rgba(0, 63, 48, .14) 100%),
    url("images/tomoe24-hero-contact-v1.png");
  background-position: center;
  background-size: cover;
}
.contact-page .page-hero h1 { color: var(--white); }
.contact-page .page-hero__eyebrow { color: #e2bc69; }
.contact-page .page-hero__lead { max-width: 38em; color: rgba(255,255,255,.9); }
.contact-page .page-section { background: #fff; }
.contact-page .page-section--pale { background: var(--contact-pale); }
.contact-page .section-title { font-size: clamp(28px, 2.6vw, 36px); }

.contact-purpose {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-block: 1px solid var(--line);
  list-style: none;
}
.contact-purpose li {
  padding: 28px 26px;
  border-right: 1px solid var(--line);
}
.contact-purpose li:last-child { border-right: 0; }
.contact-purpose small {
  display: block;
  margin-bottom: 8px;
  color: var(--contact-accent);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .1em;
}
.contact-purpose strong {
  display: block;
  margin-bottom: 10px;
  color: var(--green-deep);
  font-size: 20px;
}
.contact-purpose p { margin: 0; color: var(--muted); font-size: 17px; }

.contact-guide {
  margin-top: 38px;
  padding: 28px 30px;
  border-left: 3px solid var(--contact-accent);
  background: var(--contact-pale);
}
.contact-guide__label {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  margin: 0 0 12px;
  padding: 3px 10px;
  border: 1px solid #9ab6a8;
  border-radius: 999px;
  color: var(--green-deep);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .08em;
}
.contact-guide h3 {
  margin-bottom: 8px;
  color: var(--green-deep);
  font-family: var(--serif);
  font-size: 23px;
  font-weight: 600;
}
.contact-guide p { margin-bottom: 0; }
.contact-guide p + p { margin-top: 8px; }

.contact-channels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 12px 30px rgba(0, 63, 48, .045);
}
.contact-channel { padding: 34px; }
.contact-channel + .contact-channel { border-left: 1px solid var(--line); }
.contact-channel__label {
  margin-bottom: 12px;
  color: var(--contact-accent);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .12em;
}
.contact-channel h3 {
  margin-bottom: 10px;
  color: var(--green-deep);
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 600;
}
.contact-channel p { margin-bottom: 18px; color: var(--muted); }
.contact-phone {
  display: inline-block;
  color: var(--green-deep);
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .025em;
  line-height: 1.2;
  text-decoration: none;
  transition: color .2s ease;
}
.contact-phone:hover,
.contact-phone:focus-visible { color: var(--green); text-decoration: underline; }
.contact-hours { display: block; margin-top: 8px; color: var(--muted); font-size: 17px; line-height: 1.7; }
.contact-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 132px;
  align-items: center;
  gap: 20px;
}
.contact-line__hint {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 17px;
}
.contact-line__qr {
  width: 132px;
  height: 132px;
  border: 1px solid var(--line);
  background: #fff;
}

@media (max-width: 768px) {
  .contact-page .page-hero {
    min-height: 244px;
    padding: 44px 0;
    background-position: 65% center;
  }
  .contact-purpose { grid-template-columns: 1fr; }
  .contact-purpose li { border-right: 0; border-bottom: 1px solid var(--line); }
  .contact-purpose li:last-child { border-bottom: 0; }
  .contact-guide { padding: 24px 20px; }
  .contact-channels { grid-template-columns: 1fr; }
  .contact-channel { padding: 26px 22px; }
  .contact-channel + .contact-channel { border-top: 1px solid var(--line); border-left: 0; }
  .contact-line { grid-template-columns: minmax(0, 1fr) 112px; gap: 16px; }
  .contact-line__qr { width: 112px; height: 112px; }
}

.contact-page .page-hero .contact-opening { margin: 18px 0 0; color: #fff; font-size: 16px; font-weight: 600; }
#line-contact { scroll-margin-top: 110px; }