@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Noto+Sans+JP:wght@400;500;600&family=Shippori+Mincho:wght@400;500;600&display=swap');

:root {
  --ivory: #F7F7F7;
  --pearl: #E8E8E8;
  --amethyst: #090909;
  --violet: #242424;
  --champagne: #FFFFFF;
  --charcoal: #050505;
  --smoke: #606060;
  --white: #FFFFFF;
  --line: rgba(255, 255, 255, .34);
  --content: 1240px;
  --gutter: clamp(20px, 4vw, 64px);
  --serif: 'Shippori Mincho', 'Yu Mincho', serif;
  --roman: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Noto Sans JP', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--charcoal); background: var(--ivory); font-family: var(--sans); line-height: 1.8; letter-spacing: .035em; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--champagne); outline-offset: 4px; }

.skip-link { position: fixed; z-index: 200; top: 10px; left: 10px; padding: 10px 18px; color: var(--white); background: var(--amethyst); transform: translateY(-160%); }
.skip-link:focus { transform: none; }

body > header { position: relative; z-index: 30; display: grid; grid-template-columns: minmax(270px, 1fr) auto minmax(430px, 1.45fr) 54px; min-height: 106px; padding: 14px var(--gutter); align-items: center; color: var(--white); background: rgba(5, 5, 5, .98); border-bottom: 1px solid var(--line); }
.brand-lockup { display: flex; min-height: 56px; align-items: center; gap: 14px; }
.brand-monogram { display: grid; width: 52px; height: 52px; place-items: center; color: var(--champagne); border: 1px solid var(--champagne); border-radius: 50%; font: 500 21px/1 var(--roman); letter-spacing: -.08em; }
.brand-copy { display: grid; line-height: 1.25; }
.brand-copy strong { color: var(--champagne); font: 500 22px/1.2 var(--roman); letter-spacing: .14em; }
.brand-copy span, .brand-copy small { font-size: 9px; letter-spacing: .2em; }
.brand-copy small { margin-top: 4px; color: #BDBDBD; }
.header-contact { padding: 0 34px; border-left: 1px solid var(--line); }
.header-contact p { margin: 0; font: 400 15px var(--roman); letter-spacing: .07em; }
.header-contact p strong { color: var(--champagne); font-size: 26px; font-weight: 500; }
.header-contact small { font: 10px var(--sans); }
body > header nav { display: flex; align-items: center; justify-content: flex-end; gap: clamp(16px, 2.3vw, 36px); }
body > header nav a { display: grid; min-height: 52px; place-content: center; text-align: center; }
body > header nav span { font: 500 14px var(--roman); letter-spacing: .08em; }
body > header nav small { margin-top: 3px; font-size: 8px; letter-spacing: .1em; opacity: .8; }
[data-nav-toggle] { width: 50px; min-height: 50px; border: 0; color: var(--champagne); background: transparent; font-size: 10px; cursor: pointer; }
[data-nav-toggle]::before { display: block; margin: 0 auto 7px; width: 31px; height: 18px; border-block: 2px solid var(--champagne); content: ''; }

.hero { min-height: min(760px, calc(100svh - 106px)); background-color: #EFEFEF; background-position: center; background-size: cover; background-blend-mode: luminosity; overflow: hidden; }
.hero__inner { display: grid; grid-template-columns: 52% 48%; width: min(100%, 1440px); min-height: min(760px, calc(100svh - 106px)); margin: auto; padding: clamp(48px, 6vw, 88px) var(--gutter) 44px; align-items: center; }
.hero__placeholders { position: relative; align-self: stretch; min-height: 520px; }
.hero-photo { position: absolute; display: grid; width: min(310px, 25vw); aspect-ratio: 4 / 5.15; padding: 20px; place-content: center; color: #333; background: center / cover no-repeat url('images/photo-coming-soon.png'); border: 1px solid rgba(0, 0, 0, .72); box-shadow: 0 18px 50px rgba(0, 0, 0, .2); filter: grayscale(1) contrast(1.08); text-align: center; }
.hero-photo span, .therapist-card__photo span { font: 500 clamp(18px, 2vw, 27px)/1.35 var(--roman); letter-spacing: .17em; }
.hero-photo small, .therapist-card__photo small { margin-top: 10px; font: 11px var(--serif); letter-spacing: .16em; }
.hero-photo--back { top: 74px; left: 2%; opacity: .78; transform: rotate(-3deg) scale(.87); }
.hero-photo--middle { top: 68px; left: 38%; opacity: .8; transform: rotate(3deg) scale(.9); }
.hero-photo--front { z-index: 2; top: 0; left: 19%; }
.hero__panel { position: relative; z-index: 3; padding: 34px 0 32px 44px; }
.hero__eyebrow { display: flex; margin: 0 0 24px; align-items: center; color: var(--smoke); font: 500 13px var(--roman); letter-spacing: .22em; }
.hero__eyebrow::before, .hero__eyebrow::after { width: 58px; height: 1px; margin-inline: 18px; background: var(--champagne); content: ''; }
.hero h1 { margin: 0; color: var(--amethyst); font: 400 clamp(42px, 5vw, 74px)/1.42 var(--serif); letter-spacing: .06em; }
.hero h1 strong { color: var(--violet); font-weight: 500; }
.hero__lead { margin: 30px 0 4px; font-family: var(--serif); letter-spacing: .12em; }
.hero__access { margin: 0; color: var(--smoke); font-size: 12px; }
.hero__actions { display: grid; grid-template-columns: 1fr 1fr; max-width: 520px; margin-top: 30px; gap: 14px; }
.hero__actions a { display: grid; min-height: 76px; padding: 10px 18px; place-content: center; border: 1px solid var(--champagne); color: var(--white); text-align: center; transition: transform .2s ease, filter .2s ease; cursor: pointer; }
.hero__actions a:hover { filter: brightness(1.08); transform: translateY(-2px); }
.hero__actions span { font: 500 21px var(--serif); letter-spacing: .1em; }
.hero__actions small { font-size: 9px; }
.action-line { background: #050505; }
.action-phone { color: #050505 !important; background: #FFFFFF; }

main > section { width: min(calc(100% - var(--gutter) * 2), var(--content)); margin: auto; padding: clamp(78px, 9vw, 124px) 0; }
main > section + section { border-top: 1px solid rgba(0, 0, 0, .18); }
section h2 { margin: 0 0 50px; color: var(--amethyst); font: 500 clamp(28px, 3.5vw, 42px) var(--serif); letter-spacing: .1em; }
section h2 > span { display: block; margin-bottom: 6px; color: var(--champagne); font: 500 14px var(--roman); letter-spacing: .22em; }
section h2:not(:has(span))::before { display: block; margin-bottom: 6px; color: var(--champagne); font: 500 13px var(--roman); letter-spacing: .22em; }
#concept h2::before { content: 'CONCEPT'; } #system h2::before { content: 'SYSTEM'; } #access h2::before { content: 'ACCESS'; } #news h2::before { content: 'NEWS'; } #recruit h2::before { content: 'RECRUIT'; }
#information > [role='status'] { margin: -38px 0 42px; color: var(--smoke); font-size: 12px; }
#today-list, #schedule-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.8vw, 34px); }
.therapist-card { min-width: 0; background: var(--white); border: 1px solid rgba(0, 0, 0, .28); box-shadow: 0 16px 42px rgba(0, 0, 0, .08); }
.therapist-card__photo { display: grid; aspect-ratio: 4 / 5; place-content: center; color: var(--smoke); background-position: center top; background-size: cover; text-align: center; }
.therapist-card__body { padding: 24px; }
.therapist-card__benefit { display: inline-block; margin: 0 0 12px !important; padding: 4px 10px; color: var(--violet) !important; border: 1px solid var(--line); font-size: 10px !important; opacity: 1 !important; }
.therapist-card h3 { margin: 0 0 13px; color: var(--amethyst); font: 500 24px var(--serif); }
.therapist-card h3 span, .therapist-card p { color: var(--smoke); font-size: 12px; }
.therapist-card p { margin: 3px 0; }
.therapist-card__status { margin-top: 14px !important; color: var(--violet) !important; font-weight: 600; }
.therapist-card__contact { display: grid; min-height: 48px; margin-top: 18px; place-items: center; border: 1px solid var(--champagne); color: var(--amethyst); font-size: 12px; }
.therapist-card[data-status='closed'] { opacity: .68; }

#concept { min-height: 410px; display: grid; align-content: center; text-align: center; }
#concept p { margin: 0; color: var(--amethyst); font: 400 clamp(22px, 3vw, 36px)/2 var(--serif); letter-spacing: .13em; }
#price-list, #supplement-list, #rank-list, #travel-list { max-width: 820px; margin: auto; border-top: 1px solid #111; }
.supplement-title { max-width: 820px; margin: 48px auto 18px; color: var(--amethyst); font: 500 20px var(--serif); }
.price-row { display: flex; min-height: 86px; padding: 18px 28px; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(0, 0, 0, .18); }
.price-row span { font-family: var(--serif); } .price-row strong { color: var(--violet); font: 500 28px var(--serif); }
.travel-row { display: grid; grid-template-columns: 180px 1fr; padding: 22px 28px; gap: 24px; border-bottom: 1px solid rgba(0, 0, 0, .18); }
.travel-row strong { font-family: var(--serif); } .travel-row span { color: var(--smoke); font-size: 13px; }
.system-note { max-width: 820px; margin: 16px auto 0; color: var(--smoke); font-size: 12px; }
#access { padding-inline: clamp(24px, 6vw, 80px); border: 1px solid rgba(0, 0, 0, .3); }
#access p:first-of-type { color: var(--amethyst); font: 500 24px var(--serif); }
.news-row { display: grid; grid-template-columns: 120px 110px 1fr; min-height: 76px; padding: 18px 0; align-items: center; gap: 18px; border-bottom: 1px solid rgba(0, 0, 0, .18); }
.news-row time { color: var(--smoke); font-size: 12px; } .news-row span { color: var(--violet); font-size: 11px; } .news-row p { margin: 0; }
#recruit { width: 100%; max-width: none; padding-inline: var(--gutter); color: var(--white); background: var(--amethyst); text-align: center; }
#recruit h2 { color: var(--white); }

body > footer { padding: 58px var(--gutter) 70px; color: var(--white); background: var(--charcoal); text-align: center; }
body > footer p { margin: 5px; font-size: 12px; } body > footer strong { color: var(--champagne); font: 500 22px var(--roman); letter-spacing: .14em; }
body > footer > a { display: inline-grid; min-height: 44px; margin-top: 10px; place-items: center; color: var(--champagne); }
.footer__menu { display: flex; margin: 22px auto 10px; flex-wrap: wrap; justify-content: center; gap: 10px 24px; } .footer__restriction { opacity: .62; }
.mobile-action-bar { display: none; }
.contact-toast { position: fixed; z-index: 80; right: 20px; bottom: 20px; display: flex; max-width: 440px; padding: 16px 18px; align-items: center; gap: 14px; color: var(--white); background: var(--charcoal); border: 1px solid var(--champagne); }
.contact-toast button { min-width: 44px; min-height: 44px; border: 0; color: var(--champagne); background: transparent; }
#age-confirmation { position: fixed; z-index: 100; inset: 50% auto auto 50%; width: min(90vw, 520px); padding: 42px; color: var(--white); background: var(--amethyst); border: 1px solid var(--champagne); transform: translate(-50%, -50%); text-align: center; }
#age-confirmation::backdrop { background: rgba(0, 0, 0, .86); } #age-confirmation h2 { font: 500 28px var(--serif); } #age-confirmation button { min-height: 48px; padding: 8px 18px; cursor: pointer; }
.age-gate__primary { border: 1px solid var(--white); color: var(--amethyst); background: var(--white); font-weight: 600; } .age-gate__secondary { border: 0; color: var(--white); background: transparent; text-decoration: underline; }

@media (max-width: 1100px) {
  body > header { grid-template-columns: 1fr auto 52px; }
  .header-contact { display: none; }
  .hero__inner { grid-template-columns: 47% 53%; }
  .hero-photo { width: 250px; }
  .hero__panel { padding-left: 20px; }
}

@media (max-width: 767px) {
  body { padding-bottom: 66px; }
  body > header { grid-template-columns: 1fr 52px; min-height: 76px; padding-block: 8px; }
  .brand-monogram { width: 42px; height: 42px; }
  .brand-copy strong { font-size: 18px; }
  body > header nav { position: fixed; z-index: 29; inset: 76px 0 0; display: grid; padding: 24px var(--gutter) 90px; align-content: start; color: var(--charcoal); background: var(--ivory); overflow-y: auto; }
  body > header nav a { min-height: 64px; justify-content: start; border-bottom: 1px solid var(--line); text-align: left; }
  body > header nav span { font-size: 18px; } body > header nav small { font-size: 10px; }
  .hero { min-height: 880px; }
  .hero__inner { display: flex; min-height: 880px; padding: 36px var(--gutter) 48px; flex-direction: column; }
  .hero__placeholders { width: 100%; min-height: 400px; }
  .hero-photo { width: 55%; max-width: 240px; }
  .hero-photo--back { left: 0; } .hero-photo--middle { right: 0; left: auto; } .hero-photo--front { left: 25%; }
  .hero__panel { width: 100%; padding: 20px 0 0; text-align: center; }
  .hero__eyebrow { justify-content: center; }
  .hero h1 { font-size: clamp(38px, 10vw, 53px); }
  .hero__actions { margin-inline: auto; }
  #today-list, #schedule-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .therapist-card__body { padding: 18px 14px; }
  .news-row { grid-template-columns: 1fr auto; gap: 4px 14px; } .news-row p { grid-column: 1 / -1; }
  .travel-row { grid-template-columns: 1fr; gap: 6px; }
  .mobile-action-bar { position: fixed; z-index: 40; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(3, 1fr); min-height: 66px; color: var(--white); background: var(--amethyst); border-top: 1px solid var(--champagne); }
  .mobile-action-bar a { display: grid; min-height: 66px; place-items: center; border-right: 1px solid var(--line); font-size: 12px; }
  .contact-toast { right: 12px; bottom: 78px; left: 12px; }
}

@media (max-width: 479px) {
  .brand-monogram { display: none; }
  .hero__placeholders { min-height: 350px; }
  .hero-photo { width: 62%; }
  .hero__actions { grid-template-columns: 1fr; }
  #today-list, #schedule-grid { grid-template-columns: 1fr; }
  .news-row { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}