/* 2026-09-07 — design-reference.md visual layer.
   Copy, DOM order, destinations, photo sources and responsive art stay intact.
   Cream paper / young leaves / warm timber. Logo alone retains its own face. */
:root {
  --bg: #f8f0e3;
  --surface: #ffffff;
  --surface-soft: #eff4df;
  --surface-warm: #f8f0e3;
  --paper: #fffcf6;
  --heading: #2c621e;
  --body: #3f403b;
  --note: #626052;
  --clinic: #2f771a;
  --clinic-soft: #eff4df;
  --foot: #356b26;
  --foot-bright: #356b26;
  --foot-soft: #f4f6e6;
  --cta: #2f771a;
  --cta-hover: #285f1b;
  --leaf: #66ae34;
  --lime: #c2d618;
  --warm: #765019;
  --warm-deep: #765019;
  --line: #dfd4c2;
  --line-strong: #b8b59a;
  --sans: "Noto Sans JP", "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  --serif: var(--sans);
  --latin: Arial, "Noto Sans JP", sans-serif;
  --max: 1200px;
  --section-space: clamp(88px, 8vw, 112px);
  --radius-sm: 16px;
  --radius-md: 20px;
  --radius-lg: 32px;
  --paper-shadow: 0 4px 0 #e7dac8;
}
body { font-family: var(--sans); font-weight: 400; line-height: 1.85; letter-spacing: .015em; }
h1, h2, h3, h4 { color: var(--heading); font-family: var(--sans); font-weight: 700; letter-spacing: .015em; }
h1 { font-size: clamp(2.5rem, 4vw, 3.5rem); line-height: 1.45; }
h2 { font-size: clamp(2rem, 2.9vw, 2.5rem); line-height: 1.5; }
h3 { font-size: clamp(1.35rem, 1.8vw, 1.55rem); line-height: 1.55; }
p { line-height: 1.85; }
a { color: var(--clinic); }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid #765019;
  outline-offset: 5px;
}
::selection { color: #263f1c; background: #e2eaa4; }
.section, .section--routes { color: var(--body); background: var(--bg); }
.section--white { color: var(--body); background: #fff; }
.section--soft { color: var(--body); background: var(--surface-soft); }
.section-heading { margin-inline: auto; text-align: center; }
.section-heading > p { margin: 24px auto 0; color: var(--body); line-height: 1.85; }
.section-heading h2 { padding-bottom: 24px; }
.section-heading h2::after {
  position: static;
  display: block;
  width: min(280px, 70%);
  height: 0;
  margin: 22px auto 0;
  border: 0;
  border-bottom: 3px dotted #86ad4e;
  background: none;
  content: "";
}
.eyebrow { gap: 10px; color: var(--warm); font-size: .76rem; letter-spacing: .07em; margin-bottom: 18px; }
.eyebrow::before {
  flex: 0 0 15px;
  width: 15px;
  height: 15px;
  border: 2px solid #74a443;
  border-radius: 50% 50% 50% 2px;
  background: #e6eec4;
  transform: rotate(-18deg);
}
.section-heading .eyebrow { justify-content: center; }
.section-heading > .eyebrow { margin: 0 auto 18px; color: var(--warm); font-size: .76rem; line-height: 1.6; }
.eyebrow--foot, .eyebrow--clinic { color: var(--warm); }
.text-link { color: var(--clinic); font-weight: 700; }
.text-link:visited { color: var(--clinic); }

/* Quiet, legible header. The orange telephone keeps its established purpose. */
.site-header { background: #fffcf6; color: var(--body); box-shadow: 0 2px 0 #e9dfcf; }
.header-inner { gap: clamp(16px, 1.6vw, 26px); }
.brand-row strong { font-family: "Shippori Mincho", "Yu Mincho", serif; font-weight: 600; }
.brand-row small { color: var(--note); }
.global-nav a { font-weight: 700; }
.global-nav a:hover, .global-nav a[aria-current="page"] { color: var(--clinic); }
.menu-toggle { border-color: #b8bb9e; background: #fff; }
.global-nav.is-open { background: #fffcf6; }
.mobile-phone-link { box-shadow: 0 0 0 3px #f3d7be, 0 4px 0 #dfc4a7; }

/* Paper-like buttons: one consistent inset seam, never a heavy card shadow. */
.button, .button--outline, .button--foot, .button--clinic, .header-contact {
  position: relative;
  min-height: 58px;
  padding: 15px 28px;
  border: 1px solid #8caf4e;
  border-radius: 999px;
  color: var(--warm);
  background: #fff;
  box-shadow: var(--paper-shadow);
  font-family: var(--sans);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .01em;
  transition: background .18s, box-shadow .18s, transform .18s;
}
.button::before, .header-contact::before {
  position: absolute;
  inset: 5px;
  border: 1px dashed #b3c776;
  border-radius: inherit;
  pointer-events: none;
  content: "";
}
.button:visited, .header-contact:visited { color: var(--warm); }
.button:hover, .button--outline:hover, .button--foot:hover, .button--clinic:hover,
.header-contact:hover { color: #415d20; background: #f5f8e6; border-color: #6a963d; box-shadow: 0 2px 0 #e1d2bb; }
.button:active, .header-contact:active { transform: translateY(2px); box-shadow: none; }
.header-contact { min-height: 50px; padding: 12px 22px; color: #304f19; background: #d1df57; border-color: #9fb24e; }
.header-contact:visited { color: #304f19; }
.phone-card, .phone-card--foot { border: 1px solid var(--line); border-top: 5px solid #83ac41; border-radius: 22px; background: #fff; }
.phone-card--foot { border-top-color: #c2d618; }
.phone-call-button, .phone-card--foot .phone-call-button {
  border: 1px solid #94aa38;
  color: #294d18;
  background: #d5e464;
  box-shadow: 0 4px 0 #ddd5b6;
}
.phone-call-button:visited { color: #294d18; }
.phone-call-button:hover, .phone-call-button:focus-visible, .phone-call-button:active { color: #294d18; background: #cadb4c; }
.phone-call-button strong { font-weight: 800; }

/* The established heroes keep their copy-first and photo-second sequence. */
.hero-home, .responsive-art-hero, .page-hero, .media-page-hero {
  background: #f8f0e3;
  color: var(--body);
}
.hero-home::after { display: none; }
.hero-home__inner { padding-top: 48px; padding-bottom: 44px; gap: clamp(32px, 4vw, 64px); }
.hero-home__copy { padding-block: 24px; }
.hero-home__copy h1, .responsive-art-hero__copy h1 { font-size: clamp(2.2rem, 3.4vw, 3.15rem); font-weight: 700; line-height: 1.5; }
.hero-title-line { text-wrap: pretty; }
.hero-home__lead { font-family: var(--sans); font-size: clamp(1.15rem, 1.6vw, 1.4rem); font-weight: 700; line-height: 1.7; }
.hero-home__facts span { border-color: #d9dfba; color: #41572c; background: #fff; }
.hero-home__art { border-radius: 32px; background: #fff; }
.hero-home__art figcaption, .responsive-art-hero__art figcaption {
  color: #3f403b;
  background: #f0efc7;
  border: 1px solid #d6d7a2;
  border-radius: 14px;
}
.hero-home__art figcaption strong, .hero-home__art figcaption span { color: inherit; }
.responsive-art-hero__art, .media-page-hero__figure { border-radius: 24px; box-shadow: none; }
.responsive-art-hero__proof, .responsive-art-hero--foot .responsive-art-hero__proof,
.responsive-art-hero--mixed .responsive-art-hero__proof, .media-page-hero__proof {
  padding: 20px 24px;
  border: 1px solid #d8dcbb;
  border-left: 4px solid #87ac49;
  border-radius: 0 18px 18px 0;
  background: #fffcf6;
  color: var(--body);
}
.page-hero::before, .media-page-hero::before { display: none; }
.page-hero { padding-block: 88px; border-bottom: 1px solid #e6d9c6; }
.page-hero__aside { padding: 24px 28px; border-left: 3px dotted #93ad5b; color: var(--body); }
.home-trust { background: #eaf0c7; color: var(--body); border-block: 1px solid #d7dfb3; }
.home-trust a { padding: 26px 28px; border-color: #cfd8a9; }
.home-trust a:last-child { border-color: #cfd8a9; }
.home-trust strong { font-size: clamp(1.75rem, 2.6vw, 2.55rem); font-weight: 800; line-height: 1.15; }

/* Timber labels and white surfaces give long pages a warm, calm rhythm. */
.route-grid { gap: 28px; border: 0; margin-top: 48px; }
.route-card, .route-card + .route-card {
  padding: 36px;
  border: 1px solid #ddd1be;
  border-radius: 24px;
  background: #fff;
  color: var(--body);
}
.route-card::before { display: none; }
.route-card:hover { background: #fffcf6; border-color: #8caf4e; }
.route-card h3 { font-size: clamp(1.6rem, 2.3vw, 2rem); line-height: 1.55; }
.route-card .eyebrow, .route-card__label {
  display: inline-block;
  width: fit-content;
  padding: 8px 16px;
  border: 1px solid #dac297;
  border-radius: 10px;
  background: #f4dfbd;
  box-shadow: 0 3px 0 #ead9bc;
}
.route-card .eyebrow::before { display: none; }
.route-card__arrow { right: 30px; }
.home-service-grid { gap: 28px; border: 0; margin-top: 48px; }
.home-service-card { overflow: hidden; border: 1px solid #ded5c5; border-radius: 24px; background: #fff; }
.home-service-card__copy { padding: clamp(32px, 4.4vw, 58px); background: #fff; }
.home-service-card__copy strong { font-size: clamp(1.5rem, 2.2vw, 2rem); font-weight: 700; line-break: strict; word-break: auto-phrase; text-wrap: balance; }
.home-service-card__copy small { letter-spacing: .04em; }
.home-service-card__image img, .home-service-card:hover img,
.photo-strip img, .split__image img { filter: none; }
.home-service-card:hover img { transform: none; }
.brand-proof-grid { gap: 28px; border: 0; margin-top: 48px; }
.brand-proof, .brand-proof + .brand-proof, .brand-proof--clinic, .brand-proof--foot {
  padding: 36px;
  border: 1px solid #ded5c5;
  border-radius: 24px;
  background: #fff;
}
.brand-proof h3 { font-size: clamp(1.5rem, 2.25vw, 1.95rem); font-weight: 700; }
.brand-proof__no { color: #356b26; }
.proof-five { gap: 0 36px; border-color: #d2d7af; }
.proof-five li { border-color: #d2d7af; }
.proof-five__no, .proof-five--foot .proof-five__no {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid #cbd7a1;
  border-radius: 50%;
  color: #356b26;
  background: #e8efc7;
  font-weight: 700;
}
.proof-five strong { font-size: 1.15rem; }
.proof-five p { font-size: 1rem; }
.service-grid { gap: 24px; border: 0; }
.service-link, .service-link:nth-child(odd) { border: 1px solid var(--line); border-radius: 22px; background: #fff; padding: 32px 54px 32px 28px; }
.service-link:hover { background: #f8faec; }
.scene-list { border-color: #d3d8b5; }
.scene-list li { border-color: #d3d8b5; background: #fff; }
.scene-list strong { color: var(--heading); }
.facts { border-color: var(--line); }
.facts li { border-color: var(--line); background: transparent; }
.photo-strip figure { border-radius: 18px; }
.photo-strip figcaption { color: #364525; background: #edf0d5; }
.split__image img, .location-photo img { border-radius: 22px; }
.split__copy h2 { font-size: clamp(1.8rem, 2.7vw, 2.35rem); }

/* Real handwritten records remain un-cropped; only their surrounding paper changes. */
.voice-volume { border: 1px solid #ddcfb8; border-radius: 40px; background: #f8f0e3; }
.voice-volume__copy strong { color: var(--heading); font-family: var(--sans); font-weight: 700; }
.voice-item strong { font-family: var(--sans); font-weight: 700; }
.voice-item blockquote { font-family: var(--sans); font-weight: 500; border-color: #94b655; }
.voice-archive-card__image { border-radius: 12px; }
.voice-archive-card a:hover img { transform: none; }
.voice-archive-card figcaption strong { line-height: 1.75; }
.voice-filter a, .voice-filter button, .voice-filters a, .voice-filters button { border-radius: 999px; }
.google-review-note { border: 1px solid #d5d8ad; border-radius: 24px; background: #f1f4d9; }
.google-review-note h3 { color: var(--heading); }
.step-list { margin-inline: auto; }
.step-list::before { background: #cbd3a6; }
.step-list li { border-color: #ddd4c4; }
.step-list b { border-color: #bed180; color: var(--heading); background: #eaf0cb; }
.step-list__no { border-color: #bed180; color: var(--heading); background: #eaf0cb; letter-spacing: .02em; font-weight: 700; }
.step-list strong { font-family: var(--sans); font-weight: 700; font-size: 1.35rem; }
.step-list img { border-radius: 18px; }
.faq { margin-inline: auto; }
.faq details { border-color: #d8d3bf; }
.faq summary { color: var(--heading); font-weight: 700; }
.faq summary::after { color: var(--clinic); }
.fee-table-wrap { border: 1px solid var(--line); border-radius: 20px; }
.fee-table-wrap h3, .section:has(.eyebrow--foot) .fee-table-wrap h3,
.price-chapter--foot .fee-table-wrap h3 { color: #2d511c; background: #e3ebbb; }
.fee-table th, .info-table th { background: #f5f4e8; color: var(--heading); }
.fee-table__note { background: #fffcf6; color: var(--note); }
.price-status, .payment-note, .article-side, .article-body .summary-box, .contact-panel {
  border-color: var(--line);
  border-left-color: #8dae4b;
  border-radius: 20px;
  background: #fff;
  color: var(--body);
}
.blog-card { border: 1px solid var(--line); border-top: 4px solid #83ac41; border-radius: 22px; box-shadow: none; }
.blog-card:hover { background: #f4f7e7; }
.blog-card__category { color: var(--warm); letter-spacing: .05em; }
.article-body h2 { padding-bottom: 18px; border-bottom: 2px dotted #9db86e; font-size: clamp(1.65rem, 2.5vw, 2.1rem); }
.map-embed { border-radius: 24px; }
.contact-choice button, .contact-choice button:nth-child(2) { border-color: #d4dab8; border-top-color: #8aac45; border-radius: 20px; background: #fff; }
.field input, .field select, .field textarea { border-radius: 10px; color: var(--body); }

/* An original flat landscape is decoration only, never behind reading text. */
.final-cta {
  position: relative;
  overflow: hidden;
  padding-block: 112px 88px;
  color: var(--body);
  background: #e8efc5;
}
.final-cta::before {
  position: absolute;
  inset: 0 0 auto;
  width: 100%;
  height: 56px;
  border: 0;
  border-radius: 0;
  transform: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath fill='%2398c065' d='M0 0h1440v15c-190 90-280-36-460 5S690 55 470 18 190 90 0 35Z'/%3E%3Cpath fill='%23c2d618' d='M0 0h1440v8c-260 10-300 58-530 15S610 50 365 16 135 53 0 18Z'/%3E%3C/svg%3E") center top / 100% 100% no-repeat;
  content: "";
}
.final-cta::after { display: none; }
.final-cta h2 { color: var(--heading); }
.final-cta p { color: var(--body); }
.final-cta .button, .final-cta .button--outline { background: #fff; color: var(--warm); border-color: #9bb655; }
.final-cta .button:hover { background: #f7fae9; color: #415d20; }
.site-footer { color: var(--body); background: #f8f0e3; }
.footer-brand .brand-row, .footer-brand .brand-row strong { color: var(--heading); }
.footer-brand .brand-row strong > span { color: var(--heading); }
.footer-brand .brand-row small, .footer-contact small { color: var(--note); }
.footer-brand .brand-row + .brand-row { border-color: var(--line); }
.footer-nav a, .footer-nav a:visited { color: var(--heading); }
.footer-contact strong, .footer-contact a, .footer-contact a:visited { color: var(--heading); }
.footer-contact a { font-weight: 700; }
.copyright { color: var(--note); border-color: var(--line); }

@media (max-width: 1120px) {
  .header-inner { gap: 16px; }
}
@media (min-width: 901px) {
  .responsive-art-hero__copy { container-type: inline-size; }
  .responsive-art-hero__copy h1 { font-size: clamp(1.72rem, 7.6cqw, 2.7rem); }
}
@media (max-width: 960px) and (min-width: 761px) {
  .hero-home__inner { padding-bottom: 48px; }
}
@media (max-width: 900px) {
  .route-card, .brand-proof { padding: 30px; }
  .responsive-art-hero .hero-actions { margin-top: 24px; }
  .responsive-art-hero__copy h1 { font-size: clamp(2rem, 4.5vw, 2.9rem); }
  .page-hero h1 { font-size: clamp(2rem, 4.5vw, 2.9rem); }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  h1 { font-size: clamp(1.8rem, 6.7vw, 2.3rem); }
  h2 { font-size: clamp(1.55rem, 5.8vw, 1.85rem); }
  h3 { font-size: 1.3rem; }
  .section { padding-block: 64px; }
  .section--compact { padding-block: 52px; }
  .section-heading h2 { padding-bottom: 12px; }
  .section-heading h2::after { margin-top: 18px; width: 180px; }
  .section-heading > p { margin-top: 18px; font-size: 1rem; text-align: left; }
  .eyebrow { font-size: .7rem; letter-spacing: .04em; }
  .section-heading > .eyebrow { font-size: .7rem; }
  .header-inner { gap: 8px; }
  .brand-row strong { font-size: .88rem; }
  .hero-home__inner { gap: 28px; padding-block: 30px 32px; }
  .hero-home__copy { padding: 0; }
  .hero-home__copy h1 { font-size: clamp(1.8rem, 6.7vw, 2.15rem); line-height: 1.55; }
  .hero-home__lead { margin-top: 22px; font-size: 1.1rem; }
  .hero-home__sub { line-height: 1.85; }
  .hero-home__art { border-radius: 24px; }
  .hero-home__art figcaption { border-radius: 12px; }
  .home-trust a { padding: 22px 0; }
  .home-trust strong { font-size: 2rem; }
  .route-grid, .brand-proof-grid, .home-service-grid { gap: 20px; margin-top: 32px; }
  .route-card, .route-card + .route-card { padding: 26px 22px 62px; border: 1px solid var(--line); border-radius: 20px; }
  .route-card h3 { font-size: 1.5rem; }
  .home-service-card { border-radius: 20px; }
  .home-service-card__copy { padding: 26px 22px; }
  .home-service-card__copy strong { font-size: 1.5rem; }
  .responsive-art-hero__inner { padding-block: 40px; }
  .responsive-art-hero__copy h1 { font-size: clamp(1.8rem, 6.6vw, 2.15rem); line-height: 1.5; }
  .responsive-art-hero__proof { padding: 18px; }
  .responsive-art-hero__art { border-radius: 20px; }
  .page-hero { padding-block: 48px; }
  .page-hero h1 { font-size: clamp(1.8rem, 6.5vw, 2.2rem); }
  .page-hero__aside { padding: 20px; }
  .brand-proof, .brand-proof + .brand-proof { padding: 28px 22px; border: 1px solid var(--line); border-radius: 20px; }
  .brand-proof h3 { font-size: 1.45rem; }
  .proof-five { gap: 0; }
  .proof-five li { gap: 0 16px; }
  .proof-five p { font-size: .96rem; }
  .service-grid { gap: 16px; }
  .service-link, .service-link:nth-child(odd) { padding: 28px 48px 28px 22px; border: 1px solid var(--line); border-radius: 20px; }
  .voice-volume { padding: 28px 22px; border-radius: 26px; }
  .voice-volume__copy strong { font-size: 1.55rem; }
  .google-review-note { padding: 26px 22px; border-radius: 20px; }
  .phone-card, .phone-card--foot { padding: 28px 22px; border-radius: 20px; }
  .phone-call-button { padding-inline: 12px; }
  .step-list strong { font-size: 1.2rem; }
  .step-list img { border-radius: 14px; }
  .final-cta { padding-block: 92px 64px; }
  .final-cta::before { height: 40px; }
  .footer-inner { padding-top: 52px; }
}
@media (max-width: 390px) {
  .hero-home__copy h1 { font-size: 1.8rem; }
  .responsive-art-hero__copy h1 { font-size: 1.72rem; }
  .phone-card, .phone-card--foot { padding-inline: 18px; }
}
@media (max-width: 340px) {
  .brand-row strong { font-size: .8rem; }
  .hero-home__copy h1 { font-size: 1.62rem; }
  .responsive-art-hero__copy h1 { font-size: 1.45rem; }
  .home-trust strong { font-size: 1.75rem; }
  .phone-card, .phone-card--foot { padding-inline: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .button, .header-contact, .home-service-card__image img { transition: none; }
}