/* OHANA shared UI — values are copied from index.html, the sole design master. */
:root {
  --green:#164441;
  --green-m:#2D5E59;
  --green-l:#E2F8F6;
  --amber:#7A6440;
  --muted:#4D7571;
  --text:#164441;
  --cream:#FDF0E8;
  --stone:#CBECF2;
  --beige:linear-gradient(180deg,#FEF6F0 0%,#FBEEE4 100%);
  --mint:#ACE0DC;
  --bd:rgba(148,122,85,.55);
  --line:rgba(148,122,85,.32);
  --card:#fff;
  --cta:#7A6440;
  --cta-d:#5F4E30;
  --cta-orange:#7A6440;
  --cta-orange-d:#5F4E30;
  --line-green:#06C755;
  --gradient-soft:linear-gradient(180deg,#FEF5F1 0%,#FDF1EA 28%,#F3F9F9 62%,#E9F5F3 100%);
  --gradient-hero:linear-gradient(165deg,#FDF0E8 0%,#FCE9DF 7%,#CBEDEA 24%,#ACE0DC 50%,#9DD9D4 100%);
  --serif:'Noto Serif JP',serif;
  --sans:'Noto Sans JP',sans-serif;
  --mincho:'Hina Mincho',var(--serif),serif;
  --maxw:1080px;
  --readw:640px;
}

html { scroll-behavior:smooth; }
body {
  font-family:var(--serif);
  background:var(--gradient-soft);
  color:var(--text);
  font-size:16.5px;
  font-weight:300;
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
}

/* Shared header: exact component and measurements from index.html. */
.master-header {
  position:sticky;
  top:0;
  z-index:1000;
  background:rgba(254,245,241,.86);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.master-nav {
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 24px;
  height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.master-brand {
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--green);
  text-decoration:none;
}
.master-brand img {
  width:38px;
  height:38px;
  border-radius:50%;
  object-fit:cover;
}
.master-brand b {
  font-family:var(--serif);
  font-size:16px;
  font-weight:400;
  letter-spacing:.08em;
}
.master-contact {
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:9px 18px;
  border:0;
  border-radius:6px;
  background:var(--line-green);
  color:#fff;
  font-family:var(--sans);
  font-size:14px;
  font-weight:500;
  letter-spacing:.04em;
  line-height:1.5;
  text-decoration:none;
  white-space:nowrap;
}
.master-links {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(12px,1.7vw,24px);
  margin-left:auto;
}
.master-header nav.master-links {
  position:static !important;
  inset:auto !important;
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:center !important;
  width:auto !important;
  max-width:none !important;
  height:auto !important;
  margin-left:auto !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
.master-links a {
  color:var(--green);
  font-family:var(--sans);
  font-size:13px;
  font-weight:400;
  letter-spacing:.04em;
  line-height:1.5;
  text-decoration:none;
  white-space:nowrap;
}
.master-links a:hover,
.master-links a[aria-current="page"] {
  color:var(--amber);
}
.master-menu {
  position:relative;
  display:none;
  margin-left:auto;
}
.master-menu summary {
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:82px;
  padding:8px 12px;
  border:1px solid var(--line);
  border-radius:6px;
  color:var(--green);
  font-family:var(--sans);
  font-size:13px;
  font-weight:500;
  letter-spacing:.04em;
  list-style:none;
  cursor:pointer;
}
.master-menu summary::-webkit-details-marker { display:none; }
.master-menu-panel {
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  display:flex;
  flex-direction:column;
  width:min(300px,calc(100vw - 32px));
  padding:10px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  box-shadow:0 18px 40px -22px rgba(22,68,65,.4);
}
.master-header nav.master-menu-panel {
  position:absolute !important;
  top:calc(100% + 10px) !important;
  right:0 !important;
  bottom:auto !important;
  left:auto !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  justify-content:flex-start !important;
  width:min(300px,calc(100vw - 32px)) !important;
  max-width:none !important;
  height:auto !important;
  margin:0 !important;
  padding:10px !important;
  border:1px solid var(--line) !important;
  border-radius:10px !important;
  background:#fff !important;
  box-shadow:0 18px 40px -22px rgba(22,68,65,.4) !important;
}
.master-menu-panel a {
  padding:11px 12px;
  border-radius:6px;
  color:var(--green);
  font-family:var(--sans);
  font-size:14px;
  line-height:1.5;
  text-decoration:none;
}
.master-menu-panel a:hover { background:rgba(22,68,65,.05); }
.master-menu-panel .master-menu-cta {
  margin-top:6px;
  background:var(--line-green);
  color:#fff;
  text-align:center;
}
.master-header .master-language {
  display:inline-flex !important;
  flex:0 0 auto !important;
  flex-direction:row !important;
  align-items:center !important;
  gap:0 !important;
  width:auto !important;
  height:32px !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden;
  border:1px solid var(--line) !important;
  border-radius:6px !important;
  background:#fff !important;
}
.master-header .master-language .lang-btn {
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:34px !important;
  height:30px !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  color:var(--muted) !important;
  font-family:var(--sans) !important;
  font-size:11px !important;
  font-weight:500 !important;
  line-height:1 !important;
  letter-spacing:.04em !important;
  text-decoration:none !important;
}
.master-header .master-language .lang-btn + .lang-btn {
  border-left:1px solid var(--line) !important;
}
.master-header .master-language .lang-active {
  background:var(--green) !important;
  color:#fff !important;
}
@media (max-width:900px) {
  .master-header nav.master-links,
  .master-contact { display:none !important; }
  .master-header .master-language { margin-left:auto !important; }
  .master-menu { display:block; }
}
@media (max-width:420px) {
  .master-brand b { font-size:14px; }
  .master-nav { padding:0 16px; }
}

/* Retain the legacy markup for safe rollback, but expose only the master header. */
body > nav:not(.sticky-bar),
body > .mobile-menu {
  display:none !important;
}
.sticky-bar {
  position:fixed;
  right:0 !important;
  bottom:0 !important;
  left:0 !important;
  z-index:1000;
  display:none;
  grid-template-columns:1fr 1fr !important;
  width:auto !important;
  max-width:none !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  background:#fff;
  border-top:1px solid var(--line);
  box-shadow:0 -6px 20px -10px rgba(22,68,65,.3);
}
.sticky-bar a {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:58px;
  padding:15px 8px !important;
  font-family:var(--sans);
  font-size:14.5px;
  font-weight:500;
  text-decoration:none;
}
.sticky-bar .s-tel { color:var(--green); }
.sticky-bar .s-line {
  background:var(--line-green);
  color:#fff;
}
@media (max-width:640px) {
  body { padding-bottom:64px; }
  .sticky-bar { display:grid !important; }
}
/* English legacy pages use a higher-specificity nav rule; keep the master bar authoritative. */
body > nav.sticky-bar {
  position:fixed !important;
  top:auto !important;
  right:0 !important;
  bottom:0 !important;
  left:0 !important;
  display:none !important;
  flex-direction:initial !important;
  grid-template-columns:1fr 1fr !important;
  width:auto !important;
  max-width:none !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
}
@media (max-width:640px) {
  body > nav.sticky-bar { display:grid !important; }
}

/* Type scale from index.html. */
h1,
.hero-title,
.hero-title-main,
.page-hero-title,
.header-title {
  font-family:var(--mincho);
  font-size:clamp(21px,4.2vw,36px) !important;
  font-weight:400 !important;
  line-height:1.7 !important;
  letter-spacing:.01em !important;
  color:var(--green) !important;
}
.section-heading,
.cta-title,
.final-cta h2 {
  font-family:var(--serif);
  font-size:clamp(23px,3vw,33px) !important;
  font-weight:300 !important;
  line-height:1.6 !important;
  letter-spacing:.04em !important;
  color:var(--green) !important;
}
.hero-sub,
.hero-desc,
.page-hero-lead,
.header-desc,
.section-sub,
.intro-lead,
.lead {
  font-family:var(--serif);
  font-size:clamp(15px,1.6vw,18px) !important;
  font-weight:300;
  line-height:1.9 !important;
}
.body-text,
.intro-body {
  font-family:var(--serif);
  font-size:16px !important;
  line-height:2 !important;
}
.hero-eyebrow-text,
.header-eyebrow-text,
.section-label-text {
  font-family:var(--sans);
  font-size:13px !important;
  font-weight:500;
  letter-spacing:.28em;
  color:var(--amber) !important;
}

/* Hero surfaces and spacing from the master. */
.hero,
.page-hero,
.page-header {
  background:var(--gradient-hero) !important;
}
.hero,
.page-hero {
  padding-top:clamp(30px,5vw,60px) !important;
  padding-bottom:clamp(34px,5vw,64px) !important;
}
.page-header {
  padding-top:clamp(44px,6vw,74px) !important;
  padding-bottom:clamp(44px,6vw,74px) !important;
}
.hero-media img,
.hero-photo img {
  border:1px solid var(--bd);
  border-radius:14px;
  box-shadow:0 20px 50px -20px rgba(22,68,65,.35);
  aspect-ratio:16/9;
  object-fit:cover;
}
@media (max-width:640px) {
  .hero-media img,
  .hero-photo img { aspect-ratio:20/9; }
}

/* Buttons from the master. Existing semantic class names are retained. */
.btn,
.btn-primary,
.btn-submit,
.btn-form,
.btn-secondary,
.btn-outline,
.btn-line {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:52px;
  padding:14px 30px !important;
  border-radius:8px !important;
  font-family:var(--sans) !important;
  font-size:15.5px !important;
  font-weight:500 !important;
  letter-spacing:.05em !important;
  line-height:1.5;
  text-decoration:none;
}
.btn-primary,
.btn-submit,
.btn-form {
  border-color:var(--amber) !important;
  background:var(--amber) !important;
  color:#fff !important;
}
.btn-line {
  border-color:var(--line-green) !important;
  background:var(--line-green) !important;
  color:#fff !important;
}
.btn-secondary,
.btn-outline {
  border:1.5px solid var(--bd) !important;
  background:#fff !important;
  color:var(--green) !important;
}

/* Shared surfaces, borders and rhythm. */
.case-card,
.form-card,
.prep-card,
.service-item,
.senior-cell,
.analysis-item,
.constitution-box,
.price-row,
.faq-item {
  border-color:var(--bd) !important;
  background:#fff !important;
  box-shadow:0 16px 40px -28px rgba(22,68,65,.28);
}
.case-card,
.form-card,
.prep-card,
.constitution-box,
.faq-item {
  border-radius:14px !important;
}
.section,
.form-section,
.intro-section,
.services-section,
.whom-section {
  padding-top:clamp(44px,6vw,74px);
  padding-bottom:clamp(44px,6vw,74px);
}
footer {
  background:var(--mint) !important;
  border-top:1px solid var(--bd) !important;
}
footer,
footer a,
footer .footer-logo,
footer .footer-logo .ja,
footer .footer-info {
  color:var(--green) !important;
}
footer .footer-sub,
footer .footer-copy {
  color:var(--muted) !important;
}

/* Case-study page: preserve content, unify only the shared presentation. */
.chain-section {
  background:var(--mint) !important;
}
.case-section {
  background:#fff !important;
}
.case-nav a {
  background:var(--beige) !important;
  border:1px solid var(--amber) !important;
  border-radius:12px !important;
}
.case-card {
  background:#fff !important;
  border:1px solid var(--amber) !important;
  border-radius:12px !important;
  box-shadow:0 16px 40px -28px rgba(22,68,65,.28) !important;
}
.case-card > .case-header {
  position:relative;
  padding-right:76px !important;
  border-bottom:0 !important;
  border-radius:0 !important;
  background:#fff !important;
  cursor:pointer;
  list-style:none;
}
.case-card > .case-header::-webkit-details-marker { display:none; }
.case-card > .case-header::after {
  content:"＋";
  position:absolute;
  top:50%;
  right:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  transform:translateY(-50%);
  border:1px solid var(--amber);
  border-radius:50%;
  color:var(--amber);
  font-family:var(--sans);
  font-size:20px;
  font-weight:400;
  line-height:1;
}
.case-card[open] > .case-header {
  border-bottom:1px solid var(--amber) !important;
}
.case-card[open] > .case-header::after { content:"−"; }
.case-card .case-title,
.case-card .case-subtitle,
.case-card .case-tag {
  color:var(--green) !important;
}
.case-card .case-tag { border-color:var(--amber) !important; }
.chain-box,
.analysis-grid,
.analysis-item,
.analysis-highlight,
.case-outcome,
.case-insight,
.constitution-box,
.senior-grid,
.senior-cell {
  border-radius:12px !important;
}
.analysis-highlight,
.case-outcome,
.chain-box-good {
  background:var(--mint) !important;
  border:1px solid var(--amber) !important;
}
.case-insight,
.constitution-box {
  background:#fff !important;
  border:1px solid var(--amber) !important;
}
.case-insight { border-left:3px solid var(--amber) !important; }

/* Integrative-analysis checklist: one table, separated by row rules. */
.analysis-grid {
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  overflow:hidden !important;
  border:1px solid var(--amber) !important;
  border-radius:12px !important;
  background:#fff !important;
  box-shadow:0 16px 40px -28px rgba(22,68,65,.28);
}
.analysis-grid::before,
.analysis-grid::after {
  padding:7px 20px;
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.78);
  color:var(--amber);
  font-family:var(--sans);
  font-size:12px;
  font-weight:500;
  line-height:1.5;
  letter-spacing:.08em;
}
html[lang="ja"] .analysis-grid::before { content:"病歴・経過"; }
html[lang="ja"] .analysis-grid::after  { content:"身体評価"; }
html[lang="en"] .analysis-grid::before { content:"History & Course"; }
html[lang="en"] .analysis-grid::after  { content:"Physical Assessment"; }
.analysis-grid::before {
  grid-column:1;
  grid-row:1;
  border-right:1px solid var(--line);
}
.analysis-grid::after {
  grid-column:2;
  grid-row:1;
}
.analysis-grid .analysis-item {
  min-height:0 !important;
  height:auto !important;
  padding:8px 20px !important;
  border:0 !important;
  border-bottom:1px solid var(--line) !important;
  border-radius:0 !important;
  background:#fff !important;
  box-shadow:none !important;
  line-height:1.5 !important;
}
.analysis-grid .analysis-item::before {
  content:"✓" !important;
  display:inline !important;
  width:auto !important;
  height:auto !important;
  margin:0 9px 0 0 !important;
  border-radius:0 !important;
  background:none !important;
  color:var(--amber) !important;
  font-family:var(--sans);
  font-size:14px;
  font-weight:600;
  line-height:1.5;
}
.analysis-grid .analysis-item:nth-child(1) { grid-column:1; grid-row:2; }
.analysis-grid .analysis-item:nth-child(2) { grid-column:1; grid-row:3; }
.analysis-grid .analysis-item:nth-child(3) { grid-column:1; grid-row:4; }
.analysis-grid .analysis-item:nth-child(4) { grid-column:1; grid-row:5; }
.analysis-grid .analysis-item:nth-child(5) { grid-column:2; grid-row:2; }
.analysis-grid .analysis-item:nth-child(6) { grid-column:2; grid-row:3; }
.analysis-grid .analysis-item:nth-child(7) { grid-column:2; grid-row:4; }
.analysis-grid .analysis-item:nth-child(8) { grid-column:2; grid-row:5; }
.analysis-grid .analysis-item:nth-child(-n+4) {
  border-right:1px solid var(--line) !important;
}
.analysis-grid .analysis-highlight {
  grid-column:1 / -1 !important;
  grid-row:6;
  min-height:0 !important;
  height:auto !important;
  padding:9px 20px !important;
  border:0 !important;
  border-radius:0 !important;
  background:var(--mint) !important;
  box-shadow:none !important;
  line-height:1.7 !important;
}
.analysis-grid > :last-child {
  border-bottom:0 !important;
}
@media (max-width:520px) {
  .analysis-grid {
    grid-template-columns:minmax(0,1fr) !important;
  }
  .analysis-grid::before {
    grid-column:1;
    grid-row:1;
    border-right:0;
  }
  .analysis-grid .analysis-item:nth-child(1) { grid-column:1; grid-row:2; }
  .analysis-grid .analysis-item:nth-child(2) { grid-column:1; grid-row:3; }
  .analysis-grid .analysis-item:nth-child(3) { grid-column:1; grid-row:4; }
  .analysis-grid .analysis-item:nth-child(4) { grid-column:1; grid-row:5; }
  .analysis-grid::after { grid-column:1; grid-row:6; }
  .analysis-grid .analysis-item:nth-child(5) { grid-column:1; grid-row:7; }
  .analysis-grid .analysis-item:nth-child(6) { grid-column:1; grid-row:8; }
  .analysis-grid .analysis-item:nth-child(7) { grid-column:1; grid-row:9; }
  .analysis-grid .analysis-item:nth-child(8) { grid-column:1; grid-row:10; }
  .analysis-grid .analysis-item:nth-child(-n+4) {
    border-right:0 !important;
  }
  .analysis-grid .analysis-highlight {
    grid-column:1 !important;
    grid-row:11;
  }
}

/* Why It Matters: two unified white frosted-glass tables on mint. */
.chain-section .chain-box,
.chain-section .chain-box-good {
  background:rgba(255,255,255,.68) !important;
  border:1px solid var(--amber) !important;
  border-radius:12px !important;
  box-shadow:0 16px 40px -28px rgba(22,68,65,.35) !important;
  backdrop-filter:blur(14px) !important;
  -webkit-backdrop-filter:blur(14px) !important;
}

/* Compact case-card index: the accordions themselves are the navigation. */
.case-section .case-nav {
  display:none !important;
}
.case-section .case-card {
  --case-category:var(--amber);
  margin-top:14px !important;
  border-left:5px solid var(--case-category) !important;
}
.case-section #case-02,
.case-section #case-06 { --case-category:var(--green); }
.case-section #case-04,
.case-section #case-05 { --case-category:var(--muted); }
.case-card > .case-header {
  display:block !important;
  min-height:0 !important;
  padding:14px 126px 14px 22px !important;
}
.case-card > .case-header::after {
  content:none !important;
  display:none !important;
}
.case-card .case-title {
  margin:0 !important;
  font-size:19px !important;
  line-height:1.5 !important;
}
.case-card .case-subtitle {
  margin-top:5px !important;
  max-width:760px !important;
  color:var(--muted) !important;
  font-size:14px !important;
  line-height:1.65 !important;
}
.case-card .case-tags {
  display:flex !important;
  align-items:center !important;
  gap:0 !important;
  margin-top:6px;
}
.case-card .case-tag {
  display:inline !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  color:var(--green) !important;
  font-size:13px !important;
  line-height:1.5 !important;
}
.case-card .case-tag:nth-child(2)::before {
  content:"｜";
  padding:0 6px;
  color:var(--amber);
}
.case-card .case-tag:nth-child(n+3) {
  display:none !important;
}
.case-details-label {
  position:absolute;
  right:22px;
  bottom:16px;
  color:var(--amber);
  font-family:var(--sans);
  font-size:13px;
  font-weight:500;
  letter-spacing:.04em;
  white-space:nowrap;
}
.case-details-label .when-open { display:none; }
.case-card[open] .case-details-label .when-closed { display:none; }
.case-card[open] .case-details-label .when-open { display:inline; }
.case-card[open] > .case-header {
  border-bottom:1px solid var(--amber) !important;
}
@media (max-width:640px) {
  .case-card > .case-header {
    padding:12px 112px 12px 14px !important;
  }
  .case-card .case-title { font-size:17px !important; }
  .case-card .case-subtitle {
    margin-top:3px !important;
    font-size:13px !important;
    line-height:1.5 !important;
  }
  .case-card .case-tags { margin-top:4px; }
  .case-details-label {
    right:14px;
    bottom:14px;
    font-size:12px;
  }
}
@media (max-width:640px) {
  .case-card > .case-header {
    padding-right:60px !important;
  }
  .case-card > .case-header::after {
    right:18px;
    width:30px;
    height:30px;
    font-size:18px;
  }
}

/* ============================================================
   Page surface rhythm
   Hero = brand gradient / content = white and mint alternation /
   closing CTA + footer = mint.
   This final layer intentionally wins over legacy inline backgrounds.
   ============================================================ */
:root {
  --surface-white:#fff;
  --surface-mint:#eaf7f5;
  --surface-mint-strong:#ace0dc;
  --surface-blush:#fbeee4;
  --surface-rule:rgba(122,100,64,.34);
  --surface-rule-strong:rgba(122,100,64,.58);
  --surface-hero:
    radial-gradient(circle at 82% 18%,rgba(255,255,255,.55),transparent 32%),
    linear-gradient(155deg,#fdf0e8 0%,#fce9df 9%,#d8efec 27%,#ace0dc 55%,#ace0dc 100%);
}

/* The first visible page panel always carries the same soft brand gradient. */
body > .hero,
body > .page-hero {
  background:var(--surface-hero) !important;
  border-bottom:1px solid var(--surface-rule) !important;
}

/* Home: white / mint / white / mint, regardless of old inline colors. */
body > .hero ~ section:not(.final):not(.final-cta):not(.cta-section):nth-of-type(even) {
  background:var(--surface-white) !important;
}
body > .hero ~ section:not(.final):not(.final-cta):not(.cta-section):nth-of-type(odd) {
  background:var(--surface-mint) !important;
}

/* Integrative medicine has a hidden philosophy panel before its hero. */
body > .hero ~ .section:not(.cta-section):nth-of-type(odd) {
  background:var(--surface-white) !important;
}
body > .hero ~ .section:not(.cta-section):nth-of-type(even) {
  background:var(--surface-mint) !important;
}

/* Case studies use page-hero rather than hero. */
body > .page-hero ~ .section:not(.cta-section):nth-of-type(even) {
  background:var(--surface-white) !important;
}
body > .page-hero ~ .section:not(.cta-section):nth-of-type(odd) {
  background:var(--surface-mint) !important;
}

/* TNR has two named panels between the hero and standard sections. */
body > .hero + .fees-section { background:var(--surface-white) !important; }
body > .hero + .fees-section + .cta-band { background:var(--surface-mint) !important; }

/* Closing area and footer read as one calm mint ending. */
body > .final,
body > .final-cta,
body > .cta-section,
footer {
  background:var(--surface-mint-strong) !important;
  border-top:1px solid var(--surface-rule-strong) !important;
}

/* One rule language for separators and decorative lines. */
.section-label-line,
.hero-lead-divider {
  height:1px !important;
  background:linear-gradient(90deg,var(--surface-rule-strong),rgba(122,100,64,0)) !important;
}
.section-heading::after,
.worry h2::after,
.doctor h2::after,
.voices h2::after,
.faq h2::after {
  background:var(--amber) !important;
}

/* Cards and grouped content use the same border, radius and shadow family. */
.svc-card,
.cando-col,
.fee-card,
details.fee-detail,
.faq-item,
.flow-frame,
.info-card,
.insight,
.case-card,
.case-insight,
.constitution-box,
.analysis-grid,
.chain-box,
.chain-box-good,
.affil-list {
  border:1px solid var(--surface-rule) !important;
  border-radius:12px !important;
  box-shadow:var(--shadow-card,0 16px 40px -28px rgba(22,68,65,.28)) !important;
}

/* Internal dividers are quieter versions of the same amber rule. */
.fee-card .fee-row,
.fee-r,
.flow-item,
.step,
.dist-row,
.affil-list a,
.affil-list .affil-row {
  border-bottom-color:var(--surface-rule) !important;
}

/* Avoid a double band where a CTA is immediately followed by the footer. */
body > .final + footer,
body > .final-cta + footer,
body > .cta-section + footer {
  border-top-color:rgba(122,100,64,.22) !important;
}

/* ============================================================
   Amber accent and border system
   One hue (#7A6440), expressed only through controlled opacity.
   Amber is reserved for structure, emphasis and interaction state.
   ============================================================ */
:root {
  --amber:#7A6440;
  --amber-strong:#5F4E30;
  --amber-soft:rgba(122,100,64,.10);
  --amber-line:rgba(122,100,64,.34);
  --amber-line-strong:rgba(122,100,64,.58);
  --amber-line-faint:rgba(122,100,64,.20);
  --bd:var(--amber-line-strong);
  --line:var(--amber-line);
  --surface-rule:var(--amber-line);
  --surface-rule-strong:var(--amber-line-strong);
}

/* Primary structural borders. */
.master-header,
.mobile-menu,
.page-hero,
.hero,
.final,
.final-cta,
.cta-section,
footer {
  border-color:var(--amber-line) !important;
}

/* Cards, panels, tables and informational boxes share one outline weight. */
.svc-card,
.cando-col,
.fee-card,
.fee-options,
.fee-zone-card,
details.fee-detail,
.faq-item,
.flow-frame,
.info-card,
.insight,
.case-card,
.case-insight,
.constitution-box,
.analysis-grid,
.chain-box,
.chain-box-good,
.affil-list,
.dist-table,
.notice,
.visit-note,
.alert-box,
.taishitsu-card,
.photo-guide,
.form-card,
.form-section {
  border-color:var(--amber-line) !important;
}

/* Small tags and secondary controls use the quieter border. */
.cannot-tag,
.reco-tag,
.symptom-pill,
.hero-meta-item,
.zone-row,
.lang-btn,
.master-menu summary,
.master-menu-panel,
.cs-btn,
.carousel-btn,
input,
select,
textarea {
  border-color:var(--amber-line-faint) !important;
}

/* All row separators use the faint version of the same hue. */
.fee-subhead,
.fee-r,
.fee-card .fee-row,
.fee-option-row,
.price-row,
.flow-item,
.step,
.dist-row,
.affil-list a,
.affil-list .affil-row,
.analysis-grid .analysis-item,
.why-philosophy,
.creds,
.submit-area,
.mobile-menu-divider,
.mobile-menu a {
  border-color:var(--amber-line-faint) !important;
}

/* Decorative rules and numbering use solid amber, never green-grey. */
.section-label-num,
.section-label-text,
.hero-eyebrow,
.page-hero-eyebrow,
.footer-affil-label,
.pricing-section-title {
  color:var(--amber) !important;
}
.section-label-line,
.hero-lead-divider,
.mobile-menu-divider {
  background:linear-gradient(90deg,var(--amber-line-strong),rgba(122,100,64,0)) !important;
}
.section-heading::after,
.worry h2::after,
.doctor h2::after,
.voices h2::after,
.faq h2::after {
  background:var(--amber) !important;
}

/* Selected, hover and focus states stay within the same amber family. */
.master-links a:hover,
.master-links a[aria-current="page"],
.btn-outline:hover,
summary:hover {
  color:var(--amber-strong) !important;
  border-color:var(--amber-line-strong) !important;
}
input:focus,
select:focus,
textarea:focus {
  border-color:var(--amber) !important;
  outline:2px solid var(--amber-soft) !important;
  outline-offset:1px;
}

/* Intentional stronger accents: left rails, open accordions and CTA buttons. */
.case-insight,
.analysis-highlight,
.chain-box-good {
  border-left-color:var(--amber) !important;
}
.case-card[open] > .case-header,
details[open] > summary {
  border-bottom-color:var(--amber-line-strong) !important;
}
.btn-primary,
.btn-submit,
.btn-form,
.back-to-top {
  background:var(--amber) !important;
}
.btn-primary:hover,
.btn-submit:hover,
.btn-form:hover,
.back-to-top:hover {
  background:var(--amber-strong) !important;
}

/* ============================================================
   Dark green is a text color only.
   Never use #164441 / #0F332F / --green as a filled surface.
   ============================================================ */
.pricing-dark {
  background:var(--surface-white) !important;
  color:var(--green) !important;
}
.pricing-dark .section-heading,
.pricing-dark .pc-name,
.pricing-dark .pc-price,
.pricing-dark .pc-price span,
.pricing-dark .pc-price sup {
  color:var(--green) !important;
}
.pricing-dark .section-sub,
.pricing-dark .pc-sub,
.pricing-dark .pc-note-top,
.pricing-dark .pc-note-bottom,
.pricing-dark .pc-items li {
  color:var(--muted) !important;
}
.pricing-dark .section-label-text,
.pricing-dark .pricing-section-title,
.pricing-dark .pc-tag {
  color:var(--amber) !important;
}
.pricing-dark .section-label-line,
.pricing-dark .pc-divider {
  background:linear-gradient(90deg,var(--amber-line-strong),rgba(122,100,64,0)) !important;
}
.pricing-dark .pricing-section-title {
  border-bottom-color:var(--amber-line-faint) !important;
}
.pricing-dark .pc-grid-2,
.pricing-dark .pc-grid-3,
.pricing-dark .pc-grid-4 {
  gap:12px !important;
  background:transparent !important;
}
.pricing-dark .pc,
.pricing-dark .pc.featured {
  background:var(--surface-mint) !important;
  border:1px solid var(--amber-line) !important;
  border-radius:12px !important;
  box-shadow:var(--shadow-card,0 16px 40px -28px rgba(22,68,65,.28)) !important;
}

/* Replace every remaining dark-green filled UI accent with amber or mint. */
.master-header .master-language .lang-active,
.lang-toggle .lang-active,
.mobile-menu-lang .lang-active,
.chip.active,
.nav-cta,
.mobile-menu-cta,
.flow-num,
.cta-step-num,
.svc-icon,
.cmp-icon,
.opt input[type="radio"]:checked ~ .opt-dot,
.opt input[type="checkbox"]:checked ~ .opt-sq,
.cs-btn,
.carousel-btn {
  background:var(--amber) !important;
  border-color:var(--amber) !important;
  color:#fff !important;
}
.compare-table th:last-child {
  background:var(--surface-mint-strong) !important;
  border-color:var(--amber-line) !important;
  color:var(--green) !important;
}

/* Hamburger strokes and small dots are decorative, so use amber as well. */
.hamburger span,
.menu-icon span,
.hero-meta-dot,
.chain-dot-good {
  background:var(--amber) !important;
}

/* Language toggle: amber is the only state color on desktop and mobile. */
.master-header .master-language,
.lang-toggle,
.mobile-menu-lang {
  border-color:var(--amber-line) !important;
}
.master-header .master-language .lang-btn,
.lang-toggle .lang-btn,
.mobile-menu-lang .lang-btn {
  background:transparent !important;
  border-color:var(--amber-line) !important;
  color:var(--amber-strong) !important;
}
.master-header .master-language .lang-btn + .lang-btn {
  border-left-color:var(--amber-line) !important;
}
.master-header .master-language .lang-btn:hover,
.lang-toggle .lang-btn:hover,
.mobile-menu-lang .lang-btn:hover {
  background:var(--amber-soft) !important;
  border-color:var(--amber-line-strong) !important;
  color:var(--amber-strong) !important;
}
.master-header .master-language .lang-active,
.lang-toggle .lang-active,
.mobile-menu-lang .lang-active {
  background:var(--amber) !important;
  border-color:var(--amber) !important;
  color:#fff !important;
}

/* --- 引き継ぎ追記 (Claude 2026-07-26): 残ギャップ＝フォーム通常枠・ネイティブaccent・フッター残色 --- */
/* フォーム: 入力の通常状態の枠線 = faint(20%)。focus は上記 1035-1041 で amber。 */
.form-card input, .form-card select, .form-card textarea,
input[type="text"], input[type="tel"], input[type="email"],
input[type="number"], input[type="date"], input[type="time"],
input[type="search"], select, textarea {
  border-color:var(--amber-line-faint) !important;
}
input[type="radio"], input[type="checkbox"] { accent-color:var(--amber) !important; }
/* フッター: ミント地で読めるよう金色系の残色を補助色/濃緑へ（背景はミント、文字のみ） */
footer .affil-desc,
footer .footer-logo-text .en,
footer .footer-sub,
footer .footer-copy { color:var(--muted) !important; }
footer .affil-name,
footer .footer-logo-text .ja,
footer .footer-links a { color:var(--green) !important; }
footer .footer-links a:hover,
footer .affil-list a:hover { color:var(--amber-strong) !important; background:var(--amber-soft) !important; }

/* ============================================================
   Footer: shared centred container + symmetric affiliation columns.
   Footer content sits on the same horizontal centre axis (--maxw) as the
   header; the "所属・提携 / 取り扱い" block becomes an equal-width, top-aligned
   two-column grid instead of an asymmetric flex pair.
   ============================================================ */
footer {
  padding-left: max(24px, calc((100% - var(--maxw)) / 2)) !important;
  padding-right: max(24px, calc((100% - var(--maxw)) / 2)) !important;
}
.footer-affil-cols {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: clamp(24px, 4vw, 56px) !important;
  align-items: start !important;
  width: 100% !important;
  max-width: 820px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.footer-affil-col {
  flex: none !important;
  width: 100% !important;
  max-width: none !important;
}
@media (max-width: 900px) {
  .footer-affil-cols { grid-template-columns: 1fr !important; max-width: 560px !important; }
}

/* ============================================================
   Unified booking / contact CTA component
   - Compact, centered, EQUAL width within a group (no per-button width)
   - JP: primary(amber) / line(LINE green) / outline(white+border)
   - EN: primary(amber) / email(brand green) / outline(white+border)
     EN never uses LINE colors, LINE icons or LINE-named classes.
   - Applied only to booking/contact CTA groups (not intake form submit).
   ============================================================ */
.cta-group {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(180px, 1fr); /* equal columns sized to widest button */
  gap: 12px;
  width: max-content;                    /* shrink to content = compact */
  max-width: 100%;
  margin-inline: auto;                   /* centered */
  justify-items: stretch;
  align-items: stretch;
}
.cta-group--two,
.cta-group--three { /* same behaviour; explicit hooks for targeting/testing */ }

.cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 52px;
  padding: 12px 22px;
  border: 1.5px solid transparent;
  border-radius: 8px;
  font-family: var(--sans);
  font-size: 15.5px;
  font-weight: 500;
  letter-spacing: .05em;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  transition: .2s;
  cursor: pointer;
  box-sizing: border-box;
}
.cta-button svg { flex: 0 0 auto; }
.cta-button--primary {
  background: var(--amber); border-color: var(--amber); color: #fff;
  box-shadow: 0 8px 20px -10px rgba(122,100,64,.6);
}
.cta-button--primary:hover { filter: brightness(1.06); }
.cta-button--line {
  background: var(--line-green); border-color: var(--line-green); color: #fff;
  box-shadow: 0 8px 20px -8px rgba(6,199,85,.55);
}
.cta-button--line:hover { filter: brightness(1.05); }
.cta-button--email {
  background: var(--green); border-color: var(--green); color: #fff;
  box-shadow: 0 8px 20px -10px rgba(22,68,65,.5);
}
.cta-button--email:hover { filter: brightness(1.08); }
.cta-button--outline,
.cta-button--secondary {
  background: #fff; border-color: var(--bd); color: var(--green);
}
.cta-button--outline:hover,
.cta-button--secondary:hover { background: rgba(22,68,65,.05); }

@media (max-width: 700px) {
  .cta-group,
  .cta-group--two,
  .cta-group--three {
    grid-auto-flow: row;
    grid-template-columns: minmax(0, 1fr); /* single column */
    grid-auto-columns: auto;
    width: min(100%, 360px);
    gap: 12px;
  }
}

/* EN email chrome variants — replace LINE-named classes/colors in header,
   mobile menu and sticky bar. Placed after the LINE rules so they win. */
.master-contact--email { background: var(--green); }
.master-menu-panel .master-menu-cta--email { background: var(--green); }
.sticky-bar .s-email { background: var(--green); color: #fff; }
.sticky-bar .s-email:hover { filter: brightness(1.08); }