/*
Theme Name:  蔵並眼科医院
Description: 蔵並眼科医院 WordPress テーマ
Version:     1.0.0
Text Domain: kuranami-eye
*/

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;700&family=Noto+Serif+JP:wght@400;700&display=swap');

/* ===== RESET & VARIABLES ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --br: #5d2e21;
  --br-rgb: 93,46,33;
  --br-d: #3e1d15;
  --br-l: rgba(93,46,33,0.08);
  --ink: #141010;
  --sub: #6a5850;
  --sub-rgb: 106,88,80;
  --pale: #f8f5f2;
  --white: #fff;
  --og: #f7931f;
  --red: #a52828;
  --red-pale: #fff2f3;
  --red-deep: #6b1919;
  --gray: #6c757d;
  --border: var(--br-l);
  --link: #2a73c1;
}
html { font-size: 16px; scroll-behavior: smooth; scroll-padding-top: 4.75rem; }

a {
  color: var(--link);
  text-decoration: none;
  text-underline-offset: .3rem;
  animation: link-underline 0.2s ease;
}
img {
    display: block;
    max-width: 100%;
}
.wrap {
    max-width: 75rem;
    margin: 0 auto;
    padding: 0 1.5rem;
}
section {
    padding: 4rem 0;
}
section.hero {
    padding: 0;
}
/* ===== STICKY HEADER ===== */
.site-header {
  background: var(--white);
  position: sticky;
  top: 0;
  z-index: 200;
  border-bottom: 3px solid var(--br);
  height: 4.75rem;
  box-shadow: 0 1px 4px rgb(0 0 0 / 20%);
  transition: box-shadow 0.25s ease;
}
.site-header.scrolled {
  box-shadow: 0 3px 12px rgb(0 0 0 / 18%);
}

/* ===== MOBILE OVERLAY ===== */
#sp-ov {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 149;
  opacity: 0;
  transition: opacity 0.38s ease;
}
#sp-ov.open {
  opacity: 1;
}
.site-header .wrap {
  padding: 0;
}

/* ===== HERO ANIMATION ===== */
@media (prefers-reduced-motion: no-preference) {
  @keyframes hero-img-in {
    from { opacity: 0; transform: scale(1.06); }
    to   { opacity: 1; transform: scale(1); }
  }
  @keyframes hero-fade-up {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: none; }
  }
  .hero-img {
    animation: hero-img-in 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  }
  .hero-kicker {
    animation: hero-fade-up 0.7s ease both;
    animation-delay: 0.35s;
  }
  .hero-h {
    animation: hero-fade-up 0.7s ease both;
    animation-delay: 0.55s;
  }
  .hero-desc {
    animation: hero-fade-up 0.7s ease both;
    animation-delay: 0.72s;
  }
  .hero-tel-wrap {
    animation: hero-fade-up 0.7s ease both;
    animation-delay: 0.88s;
  }
  .hero .ic {
    animation: hero-fade-up 0.6s ease both;
  }
  .hero .ic:nth-child(1) { animation-delay: 1.05s; }
  .hero .ic:nth-child(2) { animation-delay: 1.13s; }
  .hero .ic:nth-child(3) { animation-delay: 1.21s; }
  .hero .ic:nth-child(4) { animation-delay: 1.29s; }
}

.lightbox-img-item img {
    height: auto;
    cursor: zoom-in;
}

/* ===== LIGHTBOX ===== */
.lb-overlay {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0,0,0,0.88);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.lb-overlay.on {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.lb-img-wrap {
  max-width: min(90vw, 960px);
  max-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lb-img-wrap img {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 2px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.5);
}
.lb-caption {
  color: rgba(255,255,255,0.8);
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  text-align: center;
}
.lb-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  cursor: pointer;
  color: #fff;
  padding: 0.5rem;
  line-height: 0;
}
.lb-close svg {
  width: 1.5rem;
  height: 1.5rem;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  fill: none;
}
.lb-close:hover { opacity: 0.7; }

/* ===== SCROLL REVEAL ===== */
@media (prefers-reduced-motion: no-preference) {
  .fade {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.7s ease, transform 0.7s ease;
  }
  .fade.vis {
    opacity: 1;
    transform: none;
  }
  .svc-item,
  .gallery-item,
  .partner-item {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.55s ease, transform 0.55s ease;
  }
  .svc-item.vis,
  .gallery-item.vis,
  .partner-item.vis {
    opacity: 1;
    transform: none;
  }
}

/* ===== BASE (mobile) ===== */
.wr {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 0.9375rem;
  background: var(--pale);
  color: var(--ink);
  width: 100%;
}
/* NAV */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .5rem 1.25rem;
}
.nav-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.nav-logo-en {
  font-size: .65rem;
  opacity: .6;
}
.nav-logo img { width: 12.5rem; display: block; }
.nav-logo-fb {
  font-family: 'Noto Serif JP', serif;
  font-size: 1rem;
  color: var(--br);
  display: none;
  font-weight: 700;
}
.nav-r { display: flex; align-items: center; gap: 0.75rem; }
.nl {
  display: none;
  font-size: 0.875rem;
  color: var(--br);
  text-decoration: none;
  letter-spacing: 0.07em;
  border-bottom: 1.5px solid transparent;
  padding-bottom: 0.125rem;
  transition: all .2s;
}
a.nl:hover {
  text-decoration: underline;
}
/*.nl:hover { color: var(--br); border-color: var(--br); }*/
.nav-tel {
  display: none;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.1875rem;
  padding-left: 1.5rem;
  border-left: 1px solid var(--br-l);
}
.nav-tel-num {
  font-family: 'Noto Serif JP', serif;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--br);
  text-decoration: none;
  letter-spacing: 0.04em;
  line-height: 1;
}
.nav-tel-num:hover {
  opacity: 0.75;
  text-decoration: none;
}
.nav-tel-closed {
  font-size: 0.75rem;
  color: var(--sub);
  letter-spacing: 0.04em;
  line-height: 1;
}
/* HAMBURGER */
.nav-ham {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.5rem;
  height: 2.5rem;
  padding: 8px;
  background: none;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}
.nav-ham span {
  display: block;
  width: 1.375rem;
  height: 0.125rem;
  background: var(--br);
  border-radius: 1px;
  transition: transform 0.3s ease, opacity 0.2s ease;
  transform-origin: center;
}

/* MOBILE MENU */
.mob-menu {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--pale);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0s linear 0.38s;
  visibility: hidden;
}
.mob-menu.is-open {
  transform: none;
  visibility: visible;
  transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0s linear 0s;
}
.mob-inner {
  flex: 1;
  overflow-y: auto;
  padding: 2.5rem 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.mob-logo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.375rem;
  padding-bottom: 1.5rem;
  border-bottom: 2px solid var(--br);
}
.mob-logo img { width: 12.5rem; display: block; }
.mob-logo-name {
  font-family: 'Noto Serif JP', serif;
  font-size: 0.875rem;
  color: var(--sub);
  letter-spacing: 0.1em;
}
.mob-nav {
  display: flex;
  flex-direction: column;
}
.mob-nl {
  font-size: 1rem;
  color: var(--br);
  text-decoration: none;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--br-l);
  display: flex;
  align-items: center;
  justify-content: space-between;
  letter-spacing: 0.05em;
  transition: color 0.2s, padding-left 0.2s;
}
.mob-nl::after {
  content: '';
  display: block;
  width: 1.25rem;
  height: 0.0625rem;
  background: var(--br);
  flex-shrink: 0;
  transition: width 0.2s;
}
.mob-nl:hover { color: var(--br); padding-left: 0.5rem; }
.mob-nl:hover::after { width: 1.75rem; }
.mob-foot {
  display: flex;
  min-height: 4rem;
  flex-shrink: 0;
  padding-bottom: env(safe-area-inset-bottom, 0);
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--white);
  box-shadow: 0 -1px 4px rgb(0 0 0 / 20%);
  z-index: 400;
}
/* mob-menu 右上の閉じるボタン */
.mob-menu-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(93,46,33,0.06);
  border: none;
  border-radius: 50%;
  color: var(--br);
  cursor: pointer;
  transition: background 0.2s;
  z-index: 1;
}
.mob-menu-close:hover { background: rgba(93,46,33,0.14); }

/* mob-foot 電話ボタン */
.mob-tel-btn {
  flex: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  font-family: 'Noto Serif JP', serif;
  font-weight: 700;
  color: #fff;
  background: var(--br);
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: background 0.2s;
}
.mob-tel-btn svg { opacity: 0.85; }
.mob-tel-btn:hover { background: var(--br-d); }

/* mob-foot トグルボタン（メニュー ↔ 閉じる） */
.mob-foot-toggle {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.5rem 1rem;
  background: none;
  border: none;
  border-left: 1px solid var(--br-l);
  cursor: pointer;
  transition: background 0.2s;
  color: var(--br);
}
.mob-foot-toggle:hover { background: rgba(93,46,33,0.05); }
.mft-ham,
.mft-close {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.6875rem;
  font-family: 'Noto Sans JP', sans-serif;
  letter-spacing: 0.06em;
  color: var(--sub);
}
.mft-lines {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mft-lines span {
  display: block;
  width: 1.25rem;
  height: 0.125rem;
  background: var(--br);
  border-radius: 1px;
}
/* メニューが開いている時 */
.mft-close { display: none; }
.mob-foot.menu-open .mft-ham { display: none; }
.mob-foot.menu-open .mft-close { display: flex; }

/* HERO */
.hero {
  position: relative;
  height: calc(100vh - 4.5rem - 4rem); /* 100vh - header - a11y-bar */
  min-height: 30rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.hero-img {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(105deg, rgba(62,29,21,0.7) 0%, rgba(62,29,21,0.30) 42%, rgba(20,10,8,0) 100%),
    url('/wp-content/uploads/kuranami-eye-main.png') center/cover no-repeat;
}
.hero-content {
  position: relative;
  z-index: 2;
  padding: 6rem 1.5rem;
  display: flex;
  width: 100%;
  flex: 1;
}
.hero-text { max-width: 100%; }
.hero-kicker {
  font-size: 0.875rem;
  letter-spacing: 0.3em;
  color: rgba(255,255,255,0.38);
  text-transform: uppercase;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.hero-kicker::before { content: ''; width: 1.5rem; height: 0.0625rem; background: rgba(255,255,255,0.25); }
.hero-h {
  font-family: 'Noto Serif JP', serif;
  font-size: 1.875rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.5;
  letter-spacing: 0.04em;
  margin-bottom: 0.625rem;
}
.hero-sub-ja {
  font-size: 0.875rem;
  font-weight: 400;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.1em;
  margin-bottom: 1.25rem;
}
.hero-desc {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.85);
  line-height: 1.9;
  font-weight: 400;
  margin-bottom: 2rem;
  max-width: 100%;
}
.hero-tel-wrap {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  border-left: 2px solid rgba(255,255,255,0.2);
  padding-left: 1rem;
}
.hero-tel-label {
  font-size: 0.875rem;
  letter-spacing: 0.2em;
  color: rgba(255,255,255,0.35);
  text-transform: uppercase;
}
.hero-tel-num {
  font-family: 'Noto Serif JP', serif;
  font-size: 1.375rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.06em;
}
.hero-scroll {
  position: absolute;
  bottom: 1.75rem;
  right: 1.5rem;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .625rem;
  opacity: 0;
  animation: fin 1s 1.7s ease forwards;
}
.hero-scroll span {
  font-family: 'Inter', sans-serif;
  font-size: .5625rem;
  letter-spacing: .32em;
  color: rgba(255, 255, 255, .38);
  writing-mode: vertical-rl;
}
.scr-bar {
  width: 0.0625rem;
  height: 3.5rem;
  background: rgba(255, 255, 255, .18);
  position: relative;
  overflow: hidden;
}
.scr-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 40%;
  background: var(--og);
  animation: sa 2s ease-in-out infinite;
}
@keyframes sa{0%{transform:translateY(-100%)}100%{transform:translateY(350%)}}
@keyframes fup{from{opacity:0;transform:translateY(1.5rem)}to{opacity:1;transform:translateY(0)}}
@keyframes fin{from{opacity:0}to{opacity:1}}
/* INFO BAR */
.infobar {
  background: var(--br-d);
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.ic {
  padding: 1rem 1.25rem;
  border-right: 1px solid rgba(255,255,255,0.1);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-height: 6.25rem;
}
.ic:nth-child(2n) { border-right: none; }
.ic:nth-last-child(-n+2) { border-bottom: none; }
.ic-label {
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  color: rgba(255,255,255,0.35);
  text-transform: uppercase;
}
.ic-val {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.72);
  font-weight: 400;
  line-height: 1.6;
}
.ic-val span {
  font-size: 1.1rem;
}
/* NEWS */
.news {
  background: var(--white);
}
.news-head {
  display: flex;
  flex-direction: column;
  padding: 1.75rem 0 1.25rem;
}
.news-header {
  margin-bottom: 0;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--br-l);
}
.sec-header.news-header {
  margin-bottom: 2rem;
}
.news-header .sec-ja { font-size: 1.375rem; }
.news-list { flex: 1; display: flex; flex-direction: column; }
.news-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.75rem;
  padding: 0.875rem 0;
  border-bottom: 1px solid rgba(93,46,33,0.05);
}
.news-item:last-child { border-bottom: none; }
.news-date {
  font-size: 0.875rem;
  color: rgba(93,46,33,0.4);
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.news-cat {
  font-size: 0.875rem;
  background: var(--br-l);
  color: var(--br);
  padding: 0.1875rem 0.625rem;
  border-radius: 1px;
  letter-spacing: 0.06em;
  white-space: nowrap;
  min-width: 6rem;
  text-align: center;
}
.news-body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  width: 100%;
}
.news-text {
  font-size: 0.875rem;
  color: var(--sub);
  line-height: 1.75;
  font-weight: 400;
}
.news-excerpt {
  font-size: 0.8125rem;
  color: var(--sub);
  line-height: 1.7;
}
.news-text--red    { color: #c0392b; }
.news-text--blue   { color: #2060a8; }
.news-text--green  { color: #1e7a3c; }
.news-text--orange { color: #c85a00; }
.news-cat--red    { background: #fdecea; color: #a52828; }
.news-cat--blue   { background: #e8f0fb; color: #1a4f8a; }
.news-cat--green  { background: #e6f4ec; color: #155c2d; }
.news-cat--orange { background: #fff3e0; color: #a04800; }
.news-text--w300 { font-weight: 300; }
.news-text--w500 { font-weight: 500; }
.news-text--w700 { font-weight: 700; }
/* GW */
.gw-cal {
  margin-bottom: 2.5rem;
  border: 1px solid var(--border);
  overflow: hidden;
}
.gw-cal-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem 1rem;
  padding: .875rem 1.25rem;
  background: var(--pale);
  border-bottom: 1px solid var(--border);
}
.gw-cal-title {
  font-size: .875rem;
  font-weight: 700;
  color: var(--red-deep);
}
.gw-cal-period {
  font-size: .8125rem;
  font-weight: 400;
  color: var(--gray);
}
.gw-cal-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: var(--border);
    gap: 1px;
}
.gw-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
  padding: .875rem .5rem;
  text-align: center;
  justify-content: space-between;
  background: var(--white);
}
.gw-day-status {
    font-size: .75rem;
    font-weight: 700;
    padding: .2rem .625rem;
    border-radius: 2rem;
}
.gw-day-date {
  font-size: 1rem;
  font-weight: 600;
  color: var(--dark);
  display: flex;
  align-items: baseline;
  gap: .25rem;
}
.gw-day-dow {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: .75rem;
  font-weight: 400;
  color: var(--gray);
}
.gw-day-holiday {
  font-size: .6875rem;
  color: var(--gray);
  min-height: 1em;
}
.gw-closed .gw-day-status, .gw-holiday-closed .gw-day-status {
  color: var(--red);
  background: var(--red-pale);
}
.gw-day-status {
  font-size: .75rem;
  font-weight: 700;
  padding: .2rem .625rem;
  border-radius: 2rem;
}
.gw-holiday-closed .gw-day-date {
  color: var(--red);
}
.gw-holiday-closed .gw-day-dow {
    color: var(--red);
}
.gw-open .gw-day-status {
    color: #1a7a4a;
    background: #e6f4ee;
}

/* SERVICES */
.svc { background: var(--pale); }
.sec-header { margin-bottom: 2rem; }
.sec-header--sm { margin-bottom: 2rem; }
.sec-header--flush { margin-bottom: 0; }
.sec-body {
  width: 100%;
}

/* ACCESS LIST */
.access-list {
  margin-top: 4rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}
.access-row {
  display: flex;
  gap: 0.875rem;
  align-items: baseline;
  padding-bottom: 0.875rem;
  border-bottom: 1px solid var(--br-l);
}
.access-row--last {
  padding-bottom: 0;
  border-bottom: none;
}
.access-label {
  font-size: 0.875rem;
  letter-spacing: 0.16em;
  color: var(--br);
  text-transform: uppercase;
  min-width: 3.5rem;
  font-weight: 400;
  min-width: 6rem;
}
.access-val {
  font-size: 0.875rem;
  color: var(--sub);
  font-weight: 400;
  line-height: 1.7;
}
.access-tel {
  font-size: 1.125rem;
  color: var(--ink);
  font-weight: 700;
  letter-spacing: 0.06em;
}

.sec-en {
  font-family: 'Noto Serif JP', serif;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  color: var(--br);
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.sec-ja {
  font-family: 'Noto Serif JP', serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.04em;
}
.svc-grid {
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid rgba(93,46,33,0.1);
  background: var(--white);
}
.svc-item {
  padding: 2rem 1.75rem;
  border-bottom: 1px solid rgba(93,46,33,0.1);
  transition: background .2s;
  position: relative;
}
.svc-item:last-child { border-bottom: none; }
.svc-item:hover {
  background: rgba(var(--sub-rgb), 0.15);
}
.svc-bar { width: 1.5rem; height: 0.125rem; background: var(--br); margin-bottom: 1rem; }
.svc-ttl {
  font-family: 'Noto Serif JP', serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0.75rem;
  letter-spacing: 0.03em;
}
.svc-main .svc-ttl { font-size: 1.375rem; }
.svc-body { color: var(--sub); line-height: 1.9; font-weight: 400; }
.svc-btn {
  display: inline-block;
  margin-top: 1.25rem;
  padding: 0.5rem 1.25rem;
  border: 1px solid var(--br);
  color: var(--br);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}
.svc-btn:hover {
  background: var(--br);
  color: var(--white);
  text-decoration: none;
}

/* GREETING */
.greeting {
  background: var(--white);
}
.greeting .wrap {
  display: grid;
  grid-template-columns: auto;
  gap: 2rem;
}
.greeting-quote {
  font-family: 'Noto Serif JP', serif;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--br);
  line-height: 1.7;
  letter-spacing: 0.04em;
  margin-bottom: 1.5rem;
  padding-left: 1rem;
  border-left: 3px solid var(--br);
}
.greeting-body {
  color: var(--sub);
  line-height: 2.1;
  font-weight: 400;
  margin-bottom: 1.5rem;
}
.greeting-sign { font-size: 0.875rem; color: var(--sub); letter-spacing: 0.06em; }
.greeting-sign strong {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ink);
  display: block;
  margin-top: 0.25rem;
  font-family: 'Noto Serif JP', serif;
}
.greeting-img-wrap {
  background: var(--pale);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.75rem;
  gap: 1rem;
  border: 1px solid var(--br-l);
}
.greeting-photo {
  width: 8.75rem;
  height: 8.75rem;
  border-radius: 50%;
  overflow: hidden;
  background: #ddd url('/wp-content/uploads/takako-kuranami.jpg') center/cover;
}
.greeting-name-en {
  font-size: 0.875rem;
  letter-spacing: 0.2em;
  color: rgba(93,46,33,0.4);
  text-transform: uppercase;
  text-align: center;
}
.greeting-name-ja {
  font-family: 'Noto Serif JP', serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ink);
  text-align: center;
  letter-spacing: 0.06em;
  margin-top: 0.125rem;
}
.greeting-title { font-size: 0.875rem; color: var(--sub); text-align: center; letter-spacing: 0.04em; margin-top: 0.25rem; }
.greeting-univ { font-size: 0.875rem; color: rgba(93,46,33,0.45); text-align: center; margin-top: 0.5rem; line-height: 1.7; }
.greeting-cred {
  list-style: none;
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--br-l);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.greeting-cred li {
  font-size: 0.875rem;
  color: var(--sub);
  font-weight: 400;
  letter-spacing: 0.04em;
  padding-left: 0.875rem;
  position: relative;
}
.greeting-banner {
  display: block;
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--br-l);
  width: 100%;
  transition: opacity .2s;
}
.greeting-banner:hover { opacity: 0.8; }
.greeting-banner img {
  display: block;
  width: 100%;
  height: auto;
}

.greeting-cred li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0.25rem;
  height: 0.25rem;
  border-radius: 50%;
  background: var(--br);
  opacity: 0.4;
}

/* GALLERY */
.gallery { background: var(--pale); padding: 3.5rem 1.25rem; }
.gallery-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: rgba(93,46,33,0.1);
  border: 2px solid rgba(93,46,33,0.1);
}
.gallery-item {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--pale);
}
.gallery-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease, opacity .3s;
}
.gallery-item:hover img { transform: scale(1.06); opacity: 0.88; }
.gallery-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.25rem 1rem 0.75rem;
  font-size: 0.675rem;
  color: rgba(255,255,255,0.9);
  background: linear-gradient(transparent, rgba(62,29,21,0.65));
  letter-spacing: 0.1em;
  font-weight: 300;
}

/* PARTNER */
.partner {
  background: var(--white);
}
.partner-list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid rgba(93,46,33,0.1);
}
.partner-item {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.5rem 1.75rem;
  border-bottom: 1px solid rgba(93,46,33,0.07);
  transition: background .2s;
}
.partner-item:last-child { border-bottom: none; }
.partner-icon {
  display: block;
  width: 1.5rem;
  height: 0.125rem;
  background: var(--br);
  flex-shrink: 0;
}
.partner-name {
  font-size: 1rem;
  color: var(--ink);
  letter-spacing: 0.06em;
  font-weight: 400;
}

/* SCROLLER */
section.scroller { padding: 0; overflow: hidden; }
@keyframes scroller-loop {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.scroller-track {
  display: flex;
  width: max-content;
  animation: scroller-loop 50s linear infinite;
}
.scroller-track:hover { animation-play-state: paused; }
.scroller-slide { flex-shrink: 0; }
.scroller-slide img {
  width: 15rem;
  height: 15rem;
  object-fit: cover;
  display: block;
}
@media (prefers-reduced-motion: reduce) {
  .scroller-track { animation: none; }
}

/* MAP + HOURS */
.map-hrs { display: flex; flex-direction: column; }
.map-block { position: relative; overflow: hidden; min-height: 17.5rem; background: #ddd;}
.map-block iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: saturate(0.8) contrast(0.95);}
.hrs-block {
  background: var(--pale);
  padding: 3rem 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.htbl { width: 100%; border-collapse: collapse; font-size: 0.875rem; margin-top: 1.5rem; }
.htbl th {
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: var(--sub);
  padding: 0 0 0.75rem;
  text-align: center;
  border-bottom: 1px solid var(--br-l);
}
.htbl th:first-child { text-align: left; }
.htbl td {
  padding: 0.625rem 0;
  text-align: center;
  border-bottom: 1px solid rgba(93,46,33,0.05);
  font-size: 0.875rem;
}
.htbl td:first-child { text-align: left; font-size: 0.875rem; color: rgba(var(--br-rgb), 0.8); }
.ok { color: var(--br); font-weight: 700; }
.ng { color: rgba(0,0,0,0.15); font-size: 0.875rem; }
.hrs-note { font-size: 0.875rem; color: rgba(var(--br-rgb), 0.8); margin-top: 0.75rem; letter-spacing: 0.04em; }

/* FOOTER */
.footer {
  background-color: var(--br-d);
  background-image: url('https://www.kuranami-eye.com/wp-content/themes/iCeyeEuglena_kuranami/images/footer_back.png');
  background-repeat: repeat;
  padding-top: 2rem;
  padding-bottom: 6rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.25rem;
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(255,255,255,0.25);
}
.f-logo img { width: 15rem; display: block; margin-bottom: 0.75rem; }
.f-logo-fb { font-family: 'Noto Serif JP', serif; font-size: 0.9375rem; color: #fff; display: none; margin-bottom: 1.25rem; }
.f-tagline { font-size: 0.875rem; color: #fff; line-height: 2; font-weight: 400; margin-bottom: 1rem; }
.f-info { font-size: 0.875rem; color: #fff; line-height: 2; font-weight: 400; }
.ft-logo-en {
    font-family: 'Noto Serif JP', serif;
    font-size: .6875rem;
    color: rgba(255, 255, 255, .75);
    letter-spacing: .3em;
    margin-bottom: 1.25rem;
}
.f-tel {
    font-family: 'Noto Serif JP', serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--og);
    letter-spacing: .04em;
    margin-bottom: .375rem;
}

/* FOOTER SCHEDULE */
.f-schedule { display: flex; flex-direction: column; }
.f-sched-tbl {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.75rem;
  font-size: .75rem;
}
.f-sched-tbl th {
  font-size: .75rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: #fff;
  padding: 0 0 0.625rem;
  text-align: center;
  border-bottom: 1px solid var(--sub);
}
.f-sched-tbl th:first-child { text-align: left; }
.f-sched-tbl td {
  padding: 0.5625rem 0;
  text-align: center;
  border-bottom: 1px solid var(--sub);
  font-size: .75rem;
  color: #fff;
}
.f-sched-tbl td:first-child {
  text-align: left;
  font-size: .75rem;
  color: #fff;
  letter-spacing: 0.08em;
}
.f-ok { color: #fff !important; font-weight: 700; }
.f-ng { color: #fff !important; }


.f-center { display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem; }
.f-col-h { font-family: 'Noto Serif JP', serif; font-size: 0.875rem; letter-spacing: 0.22em; color: rgba(255, 255, 255, .75); text-transform: uppercase; margin-bottom: 0.75rem;}
.f-col a { display: block; font-size: 0.875rem; color: #fff; text-decoration: none; margin-bottom: 0.5rem; font-weight: 400; transition: color .2s; }
.f-col a:hover { color: #fff; }
.f-hours-tbl { font-size: 0.875rem; color: #fff; border-collapse: collapse; }
.f-hours-tbl td { padding: 0.1875rem 0.625rem 0.1875rem 0; vertical-align: top; }
.f-hours-tbl td:first-child { color: #fff; white-space: nowrap; }
.ft-qr {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
}
.footer-btm {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-size: 0.875rem;
  color: #fff;
  letter-spacing: 0.04em;
  align-items: center;
}
.ft-col-ttl--center {
    text-align: center;
}
.ft-col-ttl {
    font-family: 'Noto Serif JP', serif;
    font-size: 0.875rem;
    letter-spacing: .32em;
    color: rgba(255, 255, 255, .75);
    margin-bottom: 1.125rem;
    text-transform: uppercase;
}
.ft-hours-note {
    font-size: .75rem;
    color: rgba(255, 255, 255, .5);
    margin-top: .625rem;
    margin-bottom: .625rem;
    font-weight: 300;
}
.ft-qr-f {
    width: 7rem;
    height: 7rem;
    background: var(--white);
    padding: .5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ft-qr-lbl {
    font-size: .625rem;
    color: rgba(255, 255, 255, .5);
    letter-spacing: .12em;
    text-align: center;
    line-height: 1.6;
}
.ft-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding-top: 0.75rem;
}
.ft-links a {
  transition: all .2s;
  text-underline-offset: .3rem;
}
.ft-links a:hover {
  text-decoration: underline;
}

/* ===========================
   MAX-WIDTH: 639px (mobile only overrides)
   =========================== */
@media (max-width: 639px) {
  .greeting-quote br { display: none; }
  .hero-desc br { display: none; }
}

/* ===========================
   MIN-WIDTH: 640px
   =========================== */
@media (min-width: 640px) {
  section {
    padding: 6rem 0;
  }
  .nav { height: 3.75rem; }

  .hero-h { font-size: 2.25rem; }
  .hero-text { max-width: 30rem; }
  .hero-tel-num { font-size: 1.5rem; }
  .wrap,
  .site-header .wrap {
    padding: 0 2.5rem;
  }
  .infobar {
    grid-template-columns: repeat(4, 1fr);
    min-height: 7.5rem;
  }
  .ic { border-bottom: none; }
  .ic:nth-child(2n) { border-right: 1px solid rgba(255,255,255,0.1); }
  .ic:last-child { border-right: none; }


  .gallery { padding: 4rem 0; }
  .gallery-grid { grid-template-columns: 1fr 1fr; }


  .hrs-block { padding: 3rem 2.5rem; }

  footer { padding: 4rem 0 2rem; }
  .footer-btm { flex-direction: row; justify-content: space-between; }
}

/* ===========================
   MIN-WIDTH: 768px
   =========================== */
@media (min-width: 768px) {
  .nav {
    padding-left: 0;
    padding-right: 0;
  }
  .nav-r { gap: 1.5rem; }
  .nl { display: inline; }
  .nav-tel { display: flex; }
  .nav-ham { display: none; }
  .mob-menu { display: none; }

  .hero { min-height: 31.25rem; }
  .hero-h { font-size: 2.5rem; }

  .ic-val span {
    font-size: 1.2rem;
  }

  .news-head { flex-direction: row; align-items: stretch; padding: 1.75rem 0 1.25rem; gap: 0; }
  .news-header {
    min-width: 7.5rem;
    padding-right: 2rem;
    padding-bottom: 0;
    border-right: 1px solid var(--br-l);
    border-bottom: none;
    justify-content: center;
  }
  .news-list,
  .gw-cal {
    margin-left: 2rem;
  }
  .news-item { flex-wrap: nowrap; gap: 1rem; align-items: flex-start; }
  .news-date { min-width: 5.625rem; white-space: nowrap; }
  .news-body { flex: 1; min-width: 0; width: auto; }
  .gw-cal-grid {
      grid-template-columns: repeat(8, 1fr);
  }
  .svc-item { border-right: 1px solid rgba(93,46,33,0.1); border-bottom: 1px solid rgba(93,46,33,0.1); }
  .svc-item:nth-child(2n) { border-right: none; }
  .svc-item:last-child { border-bottom: none; }

  .greeting .wrap {
    grid-template-columns: 2fr 1fr;
  }
  .gallery-caption {
    font-size: 0.75rem;
  }
  .map-hrs { display: grid; grid-template-columns: 1fr 1fr; min-height: 31.25rem; }
  .map-block { min-height: unset; }
  .footer {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
  .f-schedule { grid-column: 1 / -1; }
  .mob-foot {
    display: none;
  }
}

/* ===========================
   MIN-WIDTH: 1024px
   =========================== */
@media (min-width: 1024px) {
  html { scroll-padding-top: 7.375rem; }
  .site-header {
    height: 7.375rem;
  }
  .sec-header.news-header {
    margin-bottom: 0;
  }
  .wr { font-size: 1rem; }
  .nav { height: 4.75rem; }
  .nav-tel-num { font-size: 1.25rem; }
  .nav-logo img { width: 12.5rem; }
  .nav-r { gap: 2rem; }

  .hero { min-height: 36.25rem; height: calc(100vh - 7.375rem - 7.5rem);}
  .hero-content { padding: 7rem 3.5rem; }
  .hero-h { font-size: 2.75rem; }
  .hero-text { max-width: 32.5rem; }
  .hero-tel-num { font-size: 1.625rem; }

  .ic { padding: 1.25rem 1.75rem; }
  .ic-val span {
    font-size: 1.2rem;
  }

  .sec-header { margin-bottom: 3rem; }
  .sec-ja { font-size: 1.75rem; }

  .gallery { padding: 5.5rem 0; }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }

  .partner-list { grid-template-columns: 1fr; }
  .svc-grid { grid-template-columns: 2fr 1fr 1fr; }
  .svc-item { border-right: 1px solid rgba(93,46,33,0.1); border-bottom: none; }
  .svc-item:nth-child(2n) { border-right: 1px solid rgba(93,46,33,0.1); }
  .svc-item:last-child { border-right: none; }
  .svc-ttl { font-size: 1.375rem; }
  .svc-main .svc-ttl { font-size: 1.625rem; }

  .greeting-quote { font-size: 1.25rem; padding-left: 1.25rem; margin-bottom: 1.75rem; }
  .greeting-body { margin-bottom: 1.75rem; }

  .map-hrs { min-height: 31.25rem; }
  .hrs-block { padding: 4rem 3rem; }
  .htbl { margin-top: 2rem; }
  .htbl th { padding: 0 0 0.875rem; }
  .htbl td { padding: 0.75rem 0; }

  .f-schedule { grid-column: auto; }
  .ft-qr {
      display: flex;
  }
  .footer-grid {
      grid-template-columns: 1.4fr 1fr 1fr auto;
      gap: 3.5rem;
  }
}

/* ===========================
   MIN-WIDTH: 1280px
   =========================== */
@media (min-width: 1280px) {
  .wr { margin: 0 auto; }

  .nav-r { gap: 2.25rem; }

  .hero {
    min-height: unset;
    height: calc(100vh - 7.375rem - 7.5rem);
  }
  .hero-content { padding: 8rem 4rem; }
  .hero-h { font-size: 4rem; }
  .hero-text { max-width: 35rem; }
  .hero-desc { max-width: 27.5rem; }
  .hero-tel-wrap { padding-left: 1.25rem; }
  .hero-tel-num { font-size: 1.75rem; }

  .sec-ja { font-size: 2rem; }

  .gallery { padding: 5.5rem 0; }


  .greeting-quote { font-size: 1.375rem; }
  .greeting-photo { width: 10rem; height: 10rem; }
  .greeting-img-wrap { padding: 3rem 2.25rem; }


  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr auto; gap: 3.5rem; }
  .f-qr-box { width: 7.5rem; height: 7.5rem; }
  .f-qr-box svg { width: 6.5rem; height: 6.5rem; }
}

/* ===========================
   MIN-WIDTH: 1536px
   =========================== */
@media (min-width: 1536px) {
  .wr { width: 100%; }

  .nav-logo img { height: 2.625rem; }
  .nav-r { gap: 2.75rem; }
  .nl { font-size: 0.9375rem; }

  .hero-kicker { margin-bottom: 2rem; }
  .hero-h { font-size: 3.5rem; line-height: 1.4; }
  .hero-sub-ja { font-size: 1rem; margin-bottom: 2rem; }
  .hero-desc { font-size: 0.9375rem; margin-bottom: 3.25rem; max-width: 31.25rem; }
  .hero-text { max-width: 40rem; }
  .hero-tel-num { font-size: 2rem; }

  .ic { padding: 1.5rem 2.25rem; }
  .ic-val { font-size: 0.9375rem; }

  .news-head { padding: 2rem 0 1.5rem; }

  .sec-ja { font-size: 2.125rem; }
  .sec-header { margin-bottom: 3.5rem; }
  .svc-item { padding: 3.5rem 3rem; }
  .svc-ttl { font-size: 1.5rem; }
  .svc-main .svc-ttl { font-size: 1.75rem; }
  .svc-body { font-size: 0.9375rem; }

  .greeting-quote { font-size: 1.5rem; padding-left: 1.5rem; margin-bottom: 2rem; }
  .greeting-photo { width: 11.25rem; height: 11.25rem; }
  .greeting-img-wrap { padding: 3.5rem 2.75rem; }
  .greeting-name-ja { font-size: 1.375rem; }

  .map-hrs { min-height: 35rem; }
  .hrs-block { padding: 5rem 4rem; }

  .f-tagline { font-size: 0.9375rem; }
  .f-info { font-size: 0.9375rem; }
  .f-col a { font-size: 0.9375rem; }
  .f-qr-box { width: 8.5rem; height: 8.5rem; padding: 0.625rem; }
  .f-qr-box svg { width: 7.25rem; height: 7.25rem; }
}



/* ============================================================
   SURGERY PAGE
   ============================================================ */

/* --- Page Hero (no image) --- */
.page-hero {
  position: relative;
  background: var(--br-d);
  overflow: hidden;
  padding: 3rem 0 2.75rem;
}
.page-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.45);
  margin-bottom: 2rem;
}
.page-breadcrumb a {
  color: rgba(255,255,255,0.55);
  text-decoration: none;
}
.page-breadcrumb a:hover { color: rgba(255,255,255,0.85); }
.page-breadcrumb span::before {
  content: '/';
  margin-right: 0.5rem;
}
.page-hero-inner {
  position: relative;
  z-index: 2;
}
.page-hero-label {
  font-size: 0.6875rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-bottom: 0.75rem;
}
.page-hero-h {
  font-family: 'Noto Serif JP', serif;
  font-size: 1.875rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.06em;
  line-height: 1.35;
  margin-bottom: 0.75rem;
}
.page-hero-sub {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.65);
  line-height: 1.85;
  margin-bottom: 2rem;
}
.page-hero-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.page-hero-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 1.125rem;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.85);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-decoration: none;
  border-radius: 2px;
  transition: background 0.2s, border-color 0.2s;
}
.page-hero-link:hover {
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.5);
  color: #fff;
}
.page-hero-deco {
  position: absolute;
  right: -0.5rem;
  bottom: -1.25rem;
  font-size: 7rem;
  font-family: 'Noto Serif JP', serif;
  font-weight: 700;
  color: rgba(255,255,255,0.04);
  letter-spacing: 0.05em;
  pointer-events: none;
  line-height: 1;
  user-select: none;
}

/* --- Surgery Tab Nav --- */
.surg-tab {
  background: var(--white);
  border-bottom: 1px solid var(--br-l);
}
.surg-tab-inner {
  display: flex;
}
.surg-tab-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 1.25rem 1rem;
  text-decoration: none;
  border-bottom: 3px solid transparent;
  transition: border-color 0.2s, background 0.2s;
}
.surg-tab-btn:hover { background: var(--pale); border-color: var(--br); }
.surg-tab-en {
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  color: var(--sub);
  text-transform: uppercase;
}
.surg-tab-ja {
  font-family: 'Noto Serif JP', serif;
  font-size: 1rem;
  color: var(--br);
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* --- Shared Lead --- */
.surg-lead { background: var(--white); padding: 3rem 0; }
.surg-lead-inner {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  border-left: 3px solid var(--br);
  padding-left: 1.5rem;
}
.surg-lead-icon { color: var(--br); flex-shrink: 0; margin-top: 0.25rem; }
.surg-lead-ttl {
  font-family: 'Noto Serif JP', serif;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--br);
  letter-spacing: 0.06em;
  margin-bottom: 0.625rem;
}
.surg-lead-text {
  font-size: 0.875rem;
  color: var(--sub);
  line-height: 1.9;
}

/* --- Surgery Sections --- */
.surg-sec { padding: 3.5rem 0; }
.surg-sec--pale { background: var(--pale); }
.surg-sec--white { background: var(--white); }

/* Feature grid — reuses .svc-grid / .svc-item */
.surg-feat-grid { margin-bottom: 3rem; }

/* Numbered feature list */
.surg-feat-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-bottom: 3rem;
  border: 1px solid var(--br-l);
  border-radius: 4px;
  overflow: hidden;
}
.surg-feat-item {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 1.375rem 1.5rem;
  background: rgba(255,255,255,0.7);
}
.surg-feat-item:last-child { border-bottom: none; }
.surg-sec--white .surg-feat-item { background: var(--pale); }
.surg-feat-num {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--br);
  color: #fff;
  font-family: 'Noto Serif JP', serif;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: 2px;
}
.surg-feat-body { flex: 1; min-width: 0; }
.surg-feat-ttl {
  font-family: 'Noto Serif JP', serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.05em;
  margin-bottom: 0.375rem;
}
.surg-feat-text {
  font-size: 0.875rem;
  color: var(--sub);
  line-height: 1.85;
}

/* Sub headings */
.surg-sub-h {
  font-family: 'Noto Serif JP', serif;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.05em;
  padding-bottom: 0.625rem;
  border-bottom: 1px solid var(--br-l);
  margin-bottom: 1.25rem;
}
.surg-sub-h::before {
  content: '';
  display: inline-block;
  width: 1.125rem;
  height: 0.125rem;
  background: var(--br);
  vertical-align: middle;
  margin-right: 0.75rem;
}

/* Body text */
.surg-text {
  font-size: 0.875rem;
  color: var(--sub);
  line-height: 1.95;
}
.surg-text strong { color: var(--ink); font-weight: 700; }

/* About / Method / Lens blocks */
.surg-about,
.surg-method,
.surg-lens {
  margin-bottom: 2.5rem;
  padding: 1.5rem;
  background: rgba(255,255,255,0.6);
  border-radius: 2px;
}
.surg-sec--white .surg-about,
.surg-sec--white .surg-method,
.surg-sec--white .surg-lens {
  background: var(--pale);
}

/* About image + text layout */
.surg-about-inner {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.surg-about-img {
  flex-shrink: 0;
  border-radius: 3px;
  overflow: hidden;
}
.surg-about-img img {
  width: 100%;
  height: 12.5rem;
  object-fit: cover;
  display: block;
}

/* Q&A */
.surg-qa { margin-bottom: 2.5rem; }
.qa-list { list-style: none; }
.qa-item {
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--br-l);
}
.qa-item--last { border-bottom: none; }
.qa-q {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--br);
  margin-bottom: 0.625rem;
  padding-left: 1.5rem;
  position: relative;
  line-height: 1.6;
}
.qa-q::before {
  content: 'Q';
  position: absolute;
  left: 0;
  font-family: 'Noto Serif JP', serif;
  font-size: 0.875rem;
  color: var(--br);
  font-weight: 700;
}
.qa-a {
  font-size: 0.875rem;
  color: var(--sub);
  line-height: 1.9;
  padding-left: 1.5rem;
  position: relative;
}
.qa-a::before {
  content: 'A';
  position: absolute;
  left: 0;
  font-family: 'Noto Serif JP', serif;
  font-size: 0.875rem;
  color: var(--sub);
  font-weight: 400;
}

/* Cost Table */
.surg-cost { margin-bottom: 0.5rem; }
.surg-cost-wrap { overflow-x: auto; margin-bottom: 0.875rem; }
.surg-cost-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.surg-cost-tbl th,
.surg-cost-tbl td {
  padding: 0.75rem 1rem;
  border: 1px solid var(--br-l);
  text-align: center;
  letter-spacing: 0.03em;
}
.surg-cost-tbl thead th {
  background: var(--br);
  color: #fff;
  font-family: 'Noto Serif JP', serif;
  font-weight: 400;
  letter-spacing: 0.08em;
}
.surg-cost-tbl tbody tr:nth-child(even) { background: rgba(93,46,33,0.04); }
.surg-cost-tbl tbody td:first-child {
  text-align: left;
  font-weight: 700;
  color: var(--ink);
  background: rgba(93,46,33,0.04);
}
.surg-cost-note {
  font-size: 0.8125rem;
  color: var(--sub);
  line-height: 1.7;
}

/* --- current page nav highlight --- */
.nl[aria-current="page"] {
  color: var(--br);
}

/* ============================================================
   SURGERY — RESPONSIVE
   ============================================================ */
@media (min-width: 640px) {
  .page-hero { padding: 3.5rem 0 3.25rem; }
  .page-hero-h { font-size: 2.25rem; }
  .page-hero-deco { font-size: 9rem; }
  .surg-tab-btn { padding: 1.5rem 2rem; }
  .surg-tab-ja { font-size: 1.125rem; }
  .surg-sub-h { font-size: 1.25rem; }
  .surg-lead { padding: 3.5rem 0; }
  .surg-sec { padding: 4rem 0; }
}

@media (min-width: 768px) {
  .page-hero { padding: 4rem 0 3.75rem; }
  .page-hero-h { font-size: 2.5rem; }
  .page-hero-sub { font-size: 0.9375rem; }
  .page-hero-deco { font-size: 11rem; }
  .surg-feat-list { flex-direction: row; flex-wrap: wrap; }
  .surg-feat-item { flex: 1 1 calc(50% - 1px); border-bottom: none; }
  .surg-feat-item:nth-child(2n) { border-right: none; }
  .surg-feat-item:nth-child(n+3) { border-top: 1px solid var(--br-l); }
  .surg-about-inner { flex-direction: row; align-items: flex-start; gap: 2rem; }
  .surg-about-img { width: 15rem; }
  .surg-about-img img { height: 11.25rem; width: 15rem; }
  .surg-about,
  .surg-method,
  .surg-lens { padding: 2rem 2.5rem; }
  .qa-q { font-size: 1rem; }
  .surg-cost-tbl { font-size: 0.9375rem; }
}

@media (min-width: 1024px) {
  .page-hero { padding: 4.5rem 0 4.25rem; }
  .page-hero-h { font-size: 2.75rem; }
  .page-hero-deco { font-size: 13rem; right: 1rem; }
  .surg-feat-list { flex-direction: row; flex-wrap: nowrap; }
  .surg-feat-item { flex: 1; border-bottom: none;}
  .surg-feat-item:last-child { border-right: none; }
  .surg-feat-item:nth-child(n+3) { border-top: none; }
  .surg-about-img { width: 17.5rem; }
  .surg-about-img img { height: 12.5rem; width: 17.5rem; }
  .surg-sec { padding: 5.5rem 0; }
  .surg-lead { padding: 4rem 0; }
  .surg-lead-ttl { font-size: 1.25rem; }
  .surg-lead-text { font-size: 0.9375rem; }
  .surg-text { font-size: 0.9375rem; }
  .surg-sub-h { font-size: 1.375rem; margin-bottom: 1.5rem; }
  .surg-about,
  .surg-method,
  .surg-lens { padding: 2.5rem 3rem; margin-bottom: 3rem; }
  .surg-feat-grid { margin-bottom: 4rem; }
}

@media (min-width: 1280px) {
  .page-hero { padding: 5rem 0 4.75rem; }
  .page-hero-h { font-size: 3rem; }
  .page-hero-deco { font-size: 15rem; }
}