/* Whity shared palette: Access / Plans */
:root{color-scheme:light;--ink:#244f6e;--muted:#60788b;--blue:#155f96;--highlight:#49a8dd}
*{box-sizing:border-box}
body{margin:0;color:var(--ink);background:#ffffff;font-family:'Noto Sans JP','Hiragino Kaku Gothic ProN',Meiryo,sans-serif;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit}
a:focus-visible,button:focus-visible,.mouth-scroll:focus-visible{outline:2px solid #9de6ff;outline-offset:6px}


.pointer-light{position:fixed;left:0;top:0;width:520px;height:520px;z-index:-1;pointer-events:none;border-radius:50%;background:radial-gradient(circle,#8ad9ff17,transparent 65%);transform:translate(calc(var(--mx,50vw) - 260px),calc(var(--my,45vh) - 260px))}
.header{max-width:1440px;margin:auto;padding:25px 6vw 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #cfe6f3}
.brand{font-size:40px;line-height:1;font-family:Georgia,serif;letter-spacing:-2px;font-weight:700;display:flex;flex-direction:column;gap:9px}
.brand span{font-family:Arial,sans-serif;font-size:10px;letter-spacing:2.3px;font-weight:400}
.header-links{display:flex;align-items:center;gap:36px;font-size:14px}
.header-links a{transition:color .2s}
.header-links a:hover{color:#268fc8}
.booking{border:1px solid #cfe6f3;padding:12px 24px;border-radius:40px;background:#29abe2}
.hero{max-width:1440px;margin:auto;padding:48px 6vw 0}
.hero-intro{display:flex;justify-content:space-between;gap:40px;align-items:center;position:relative;z-index:5}
.eyebrow{font-size:12px;letter-spacing:.19em;color:#155f96;margin:0 0 20px}
h1{font-family:'Noto Serif JP','Hiragino Mincho ProN','Yu Mincho',serif;font-size:clamp(36px,4vw,59px);line-height:1.38;font-weight:500;letter-spacing:.08em;margin:0}
h1 em{font-style:normal;color:#0e4b78}
.lead{font-size:14px;line-height:1.8;color:#667e90;margin:18px 0 0}
.offer{display:flex;flex-direction:column;align-items:flex-start;position:relative;border-left:1px solid #cfe6f3;padding:5px 0 5px 30px;transition:transform .4s}
.offer:hover{transform:translateY(-4px)}
.offer-date{font-size:12px;letter-spacing:.14em;color:#155f96;margin-bottom:13px}
.offer-title{font-size:14px}
.offer-price{font-size:62px;line-height:1.3;font-family:Arial,sans-serif;letter-spacing:-2px;color:var(--blue);font-weight:800}
.offer-price small{font-size:21px;margin-left:5px;letter-spacing:0}
.offer-note{font-size:12px;color:#667e90;line-height:1.8}
.mouth-scene{position:relative;margin:-38px -3vw -32px;padding-top:8px;isolation:isolate}
.halo{position:absolute;inset:21% 12% 12%;z-index:-1;border-radius:50%;background:radial-gradient(ellipse,#ffffffd9 0%,#b8e4f744 45%,transparent 70%);filter:blur(25px);animation:halo 9s ease-in-out infinite}
.mouth-scroll{width:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.mouth-scroll::-webkit-scrollbar{display:none}
.mouth-rig{width:100%;max-width:1180px;margin:auto;transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transform-style:preserve-3d;will-change:transform}
.mouth-art{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 26px 35px #155f961f)}
.jaw{transform-origin:768px 540px;animation:jaw 6.8s ease-in-out infinite;will-change:transform}
.tooth{outline:none;cursor:pointer}
.tooth-piece{transform-origin:var(--origin);transition:transform .65s cubic-bezier(.18,.85,.2,1),filter .5s;transform:translate(0,0);filter:drop-shadow(0 0 0 transparent)}
.tooth:hover .tooth-piece,.tooth:focus-visible .tooth-piece{transform:translate(var(--tx,0px),calc(-19px + var(--ty,0px))) rotate(var(--tr,0deg)) scale(1.055);filter:drop-shadow(0 13px 8px #155f9640) drop-shadow(0 0 8px #49a8dd66)}
.tooth:active .tooth-piece{transform:translate(0,-9px) scale(1.025)}
.tooth-gloss{fill:none;stroke:none;pointer-events:none}

.tooth-label{pointer-events:none;text-anchor:middle;font-family:'Noto Sans JP',Meiryo,sans-serif;fill:#0e4b78;font-size:28px;font-weight:700;paint-order:stroke;stroke:#ffffffb0;stroke-width:2px}
.tooth-en{text-anchor:middle;fill:#476a86;font-family:Arial,sans-serif;font-size:15px;letter-spacing:2px;pointer-events:none}
.stage-label{position:absolute;font-size:10px;letter-spacing:.22em;color:#667e90;top:55%;writing-mode:vertical-rl}
.stage-label.left{left:0}
.stage-label.right{right:0}
.interaction-bar{position:relative;z-index:6;padding:25px 0;display:flex;align-items:center;justify-content:space-between;gap:25px;border-top:1px solid #cfe6f3}
.hover-copy{display:grid;grid-template-columns:155px 1fr;gap:8px 20px;align-items:center}
.hover-number{font-family:Arial,sans-serif;letter-spacing:.15em;color:#155f96;font-size:11px;grid-row:span 2}
.hover-title{font-weight:500;font-size:16px;letter-spacing:.025em}
.hover-note{font-size:12px;color:#667e90;line-height:1.7}
.text-nav{max-width:1440px;margin:auto;padding:26px 6vw;display:flex;justify-content:center;flex-wrap:wrap;gap:20px 34px;border-block:1px solid #cfe6f3;font-size:14px;color:#155f96}
.text-nav a:hover{color:#268fc8;text-decoration:underline;text-underline-offset:5px}
footer{max-width:1440px;margin:auto;padding:20px 6vw;display:flex;justify-content:space-between;font-size:11px;color:#667e90}
.copy,.offer{animation:intro .9s both}
.offer{animation-delay:.16s}
.mouth-scene{animation:intro 1.1s .24s both}
@keyframes intro{from{opacity:0;translate:0 22px}
to{opacity:1;translate:none}
}
@keyframes jaw{0%,100%{transform:translate(0,0) rotate(0deg) scaleY(1)}
15%{transform:translate(1px,11px) rotate(.1deg) scaleY(.996)}
30%{transform:translate(-1px,3px) rotate(-.12deg) scaleY(1)}
48%{transform:translate(2px,18px) rotate(.16deg) scaleY(.993)}
64%{transform:translate(0,4px) rotate(-.08deg) scaleY(1)}
82%{transform:translate(-1px,13px) rotate(-.13deg) scaleY(.997)}
}
@keyframes halo{50%{opacity:.55;transform:scale(.93)}
}
html.paused .jaw,html.paused .halo{animation-play-state:paused}
html.paused .mouth-rig{transform:none!important}
html.paused .pointer-light{display:none}

@media(max-width:760px){.header{padding:20px 22px}
.brand{font-size:34px}
.brand span{font-size:9px}
.header-links{gap:14px;font-size:12px}
.header-links>a:not(.booking){display:none}
.booking{padding:10px 18px}
.hero{padding:35px 22px 0}
.hero-intro{gap:20px;align-items:flex-start}
.eyebrow{font-size:10px;letter-spacing:.1em;max-width:180px;line-height:1.8;margin-bottom:13px}
h1{font-size:29px;line-height:1.5;letter-spacing:.04em}
.lead{font-size:12px;margin-top:13px;max-width:185px}
.offer{padding-left:16px;margin-top:8px}
.offer-date{font-size:9px;letter-spacing:.08em;margin-bottom:10px}
.offer-title{font-size:11px;white-space:nowrap}
.offer-price{font-size:40px}
.offer-price small{font-size:15px}
.offer-note{font-size:10px;max-width:135px}
.mouth-scene{margin:12px -22px 6px;padding-top:0}
.mouth-rig{width:850px;max-width:none;margin:0}
.stage-label{display:none}
.interaction-bar{padding:20px 0;gap:15px;align-items:flex-end}
.hover-copy{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.hover-number{font-size:10px}
.hover-title{font-size:14px}
.hover-note{font-size:11px;max-width:230px}
.text-nav{padding:24px 20px;gap:18px 22px;font-size:13px}
footer{font-size:10px;padding:20px;gap:20px}
.pointer-light{display:none}
.mouth-rig{transform:none!important}
}

@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}
.mouth-rig{transform:none!important}
.pointer-light{display:none}
}


.brand span,footer,.stage-label,.hover-number{font-size:12px}
html.paused .tooth-piece{transform:none!important;transition:none!important}
@media(max-width:760px){.hero-intro .copy{flex:1;min-width:0}
.offer{width:132px;flex-shrink:0}
.eyebrow,.brand span,.offer-date,.offer-note,.hover-note,.hover-number,footer{font-size:12px}
.offer-title{font-size:14px;white-space:normal;line-height:1.65}
.text-nav{font-size:14px}
.offer-price{font-size:42px}
.offer-note{line-height:1.65}
.lead{font-size:14px}
.eyebrow{letter-spacing:.08em}
.header-links{font-size:14px}
}
@media(prefers-reduced-motion:reduce){.tooth-piece{transform:none!important}
}


.tooth-hit{fill:transparent;pointer-events:all}


/* Layout and surfaces shared with the public Whity pages. */
:root {
  --deep: #0e4b78;
  --cyan: #49a8dd;
  --line: #cfe6f3;
  --sans: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, sans-serif;
  --serif: 'Noto Serif JP', 'Yu Mincho', 'Hiragino Mincho ProN', serif;
}

body { font-family: var(--sans); font-size: 16px; line-height: 1.8; letter-spacing: .035em; -webkit-font-smoothing: antialiased; }

a:focus-visible, button:focus-visible, .mouth-scroll:focus-visible { outline: 3px solid var(--blue); outline-offset: 5px; }





.pointer-light { background: radial-gradient(circle, #ffffffb0, transparent 65%); }

.header { max-width: none; min-height: 110px; width: 100%; padding: 8px max(24px, calc((100vw - 1100px) / 2)); gap: 30px; background: #fff; border-bottom: 2px solid #cfe9f6; box-shadow: 0 4px 10px #1466a80a; }

.brand { display: block; flex-shrink: 0; }

.brand img { display: block; width: 154px; height: 95px; object-fit: contain; }

.header-links { gap: 22px; font-size: 14px; font-weight: 700; }

.booking, .offer-action { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 24px; border: 0; border-radius: 999px; background: #29abe2; color: #fff; font-size: 14px; font-weight: 700; letter-spacing: .06em; line-height: 1.4; transition: background-color .2s; }

.header-links .booking:hover, .offer:hover .offer-action { background: #268fc8; color: #fff; }

.hero { max-width: 1180px; padding: 50px 40px 0; }

.eyebrow { color: var(--blue); font-weight: 700; }

h1 { font-family: var(--serif); color: var(--deep); font-size: clamp(36px, 4.2vw, 56px); font-weight: 700; line-height: 1.45; letter-spacing: .075em; }

h1 em { position: relative; isolation: isolate; color: var(--deep); }

h1 em::after { content: ''; position: absolute; z-index: -1; left: 0; right: 0; bottom: .12em; height: .24em; border-radius: 999px; background: #9edcf4; opacity: .65; }

.lead { font-size: 16px; }

.offer { min-width: 258px; padding: 23px 28px; border: 1px solid var(--line); border-radius: 20px; background: #ffffffed; box-shadow: 0 14px 38px #155f9612; }

.offer-date { font-weight: 700; margin-bottom: 7px; }

.offer-title { color: var(--deep); font-size: 16px; font-weight: 700; }

.offer-price { font-family: 'Montserrat', Arial, var(--sans); color: var(--blue); font-weight: 800; letter-spacing: -.025em; }

.offer-price small { font-family: var(--sans); }

.offer-note { color: var(--muted); font-size: 12px; }

.offer-action { min-height: 42px; margin-top: 15px; width: 100%; }

.mouth-scene { margin: -35px -20px -30px; }

.mouth-rig { max-width: 1050px; }

.tooth-label { font-family: var(--sans); fill: var(--deep); }

.interaction-bar { padding: 24px 28px; border: 1px solid var(--line); border-radius: 18px; background: #ffffffed; box-shadow: 0 10px 28px #155f960b; }

.hover-title { color: var(--deep); font-weight: 700; }

.hover-note { font-size: 14px; color: var(--muted); }


.text-nav { max-width: 1100px; margin: 38px auto 0; padding: 28px 24px; border-bottom: 0; font-weight: 700; }

footer { max-width: none; padding: 25px max(24px, calc((100vw - 1100px) / 2)); gap: 20px; background: #edf8fd; border-top: 1px solid var(--line); }

@media (max-width: 1050px) { .header-links a:not(.booking) { display: none; }
 }

@media (max-width: 760px) {
  .header { padding: 8px 20px; min-height: 80px; gap: 16px; }

  .brand img { width: 105px; height: 65px; }

  .booking { min-height: 44px; padding: 0 20px; }

  

  .hero { padding: 34px 22px 0; }

  .hero-intro { flex-direction: column; align-items: stretch; gap: 24px; }

  .hero-intro .copy { flex: none; }

  h1 { font-size: clamp(30px, 7.5vw, 44px); letter-spacing: .045em; line-height: 1.55; }

  .eyebrow { max-width: none; }
 .lead { max-width: none; font-size: 16px; }

  .offer { width: 100%; min-width: 0; margin: 0; display: grid; grid-template-columns: 1fr auto; column-gap: 20px; padding: 18px 20px; align-items: center; }

  .offer-date, .offer-title { grid-column: 1; }

  .offer-date { margin-bottom: 4px; }
 .offer-title { font-size: 16px; }

  .offer-price { grid-column: 2; grid-row: 1 / 3; font-size: 44px; }

  .offer-price small { font-size: 16px; }

  .offer-note { grid-column: 1 / -1; max-width: none; margin-top: 8px; }

  .offer-action { grid-column: 1 / -1; margin-top: 12px; }

  .mouth-scene { margin: 8px -22px 6px; }

  .mouth-rig { max-width: none; }

  .interaction-bar { padding: 20px; gap: 15px; flex-wrap: wrap; align-items: center; }

  .hover-title { font-size: 16px; }
 .hover-note { max-width: none; font-size: 14px; }


  .text-nav { margin-top: 24px; padding: 24px 20px; }

  footer { padding: 20px; flex-direction: column; gap: 8px; }

}

@media (max-width: 360px) { .offer { column-gap: 10px; padding: 16px; }
 .offer-price { font-size: 38px; }
}

/* Bottom header and continuous mouth deformation. */
body { position: relative; isolation: isolate; padding-bottom: calc(var(--header-height, 100px) + 20px); }
.header {
  position: fixed; z-index: 50; top: auto; bottom: 0; left: 0; right: 0;
  min-height: 88px; padding-top: 6px;
  padding-bottom: calc(6px + env(safe-area-inset-bottom));
  border-bottom: 0; border-top: 1px solid #b9e0f2;
  background: #ffffffed; box-shadow: 0 -8px 32px #155f9614;
  backdrop-filter: blur(18px);
}
.brand img { width: 124px; height: 76px; }
.hero { padding-top: 48px; }
.hero-intro { align-items: center; }
h1 { font-size: clamp(34px, 4.1vw, 54px); line-height: 1.55; }
h1 em::after { display: none; }
.offer-title { margin-bottom: 6px; }
.jaw { animation: none; transform: none; will-change: auto; }



footer { background: #edf8fddd; }
@media (max-width: 1050px) {
  .header { gap: 20px; padding-left: 20px; padding-right: 20px; }
  .header-links { flex: 1; min-width: 0; overflow-x: auto; gap: 20px; padding: 8px 3px; }
  .header-links a:not(.booking) { display: inline-flex; flex-shrink: 0; white-space: nowrap; }
  .header-links .booking { flex-shrink: 0; }
}
@media (max-width: 760px) {
  body { padding-bottom: calc(var(--header-height, 128px) + 20px); }
  .header { min-height: 0; padding: 8px 18px calc(10px + env(safe-area-inset-bottom)); flex-wrap: wrap; gap: 3px 14px; }
  .brand img { width: 85px; height: 52px; }
  .header-links { display: contents; }
  .header-links a:not(.booking) { font-size: 14px; padding: 6px 0; }
  .header-links .booking { position: absolute; right: 18px; top: 13px; min-height: 42px; }
  .brand { width: 100%; }
  .hero { padding-top: 32px; }
  h1 { font-size: clamp(29px, 7.2vw, 42px); }
  .offer-title { grid-column: 1; grid-row: 1; margin: 0; }
  .offer-price { grid-column: 2; grid-row: 1; }
  .offer-note { grid-row: 2; }
  .offer-action { grid-row: 3; }
  
}

/* Keep the full menu in one scrollable row on small screens. */
.header > .booking { flex-shrink: 0; }
.header > .booking:hover { background: #268fc8; color: #fff; }
@media (max-width: 760px) {
  .header { gap: 0 14px; }
  .brand { order: 1; width: auto; }
  .header > .booking { order: 2; margin-left: auto; min-height: 42px; }
  .header-links { order: 3; display: flex; flex: 0 0 100%; width: 100%; gap: 22px; padding: 5px 2px; overflow-x: auto; }
  .header-links a:not(.booking) { white-space: nowrap; }
}

/* A white pearl surface: no dark texture or blend layer. */
.background {
  position: fixed; inset: 0; width: 100%; height: 100%; z-index: -2;
  pointer-events: none; overflow: hidden; isolation: isolate; mask-image: none;
  background: radial-gradient(ellipse at 10% 16%, #ffffff 0%, #ffffff00 58%),
    radial-gradient(ellipse at 90% 82%, #e3f5fd 0%, #ffffff00 52%),
    linear-gradient(135deg, #ffffff 0%, #f6fcff 35%, #eaf7fd 62%, #ffffff 100%);
}
.background::before {
  content: ''; position: absolute; inset: -15%;
  background: radial-gradient(ellipse at 62% 38%, #ffffffed 0%, #ffffff00 53%),
    linear-gradient(150deg, #ffffff00 30%, #ffffffcc 43%, #e0f3fc70 49%, #ffffff00 60%);
  filter: none; mix-blend-mode: normal; opacity: 1;
}
.background::after {
  content: ''; position: absolute; inset: 0; width: auto; height: auto;
  border: 0; border-radius: 0;
  background: radial-gradient(ellipse at 18% 85%, #ffffffd9, #ffffff00 60%);
}
/* Apply the hover light to the same pixels as the tooth. A separate drawn
   outline is deliberately not used, so the highlight cannot drift. */
.tooth-piece { transform-box: view-box; }
.tooth-piece > image { transition: filter .35s ease; }
.tooth-gloss { fill: none; stroke: none; pointer-events: none; }
.tooth:hover .tooth-piece, .tooth:focus-visible .tooth-piece {
  transform: translate(var(--tx, 0px), calc(-12px + var(--ty, 0px)));
  filter: drop-shadow(0 11px 7px #155f9638);
}
.tooth:hover .tooth-piece > image, .tooth:focus-visible .tooth-piece > image {
  filter: brightness(1.1) saturate(.86);
}
.tooth:active .tooth-piece { transform: translate(0, -6px); }

/* Access page footer: same palette, logo, link groups and social buttons. */
.site-footer {
  display: block; width: 100%; max-width: none; margin: 48px 0 0;
  padding: 60px 20px 20px; text-align: center; background: #1466a8;
  color: #fff; border-top: 8px solid #29abe2; font-size: 15px;
  line-height: 1.8; letter-spacing: .05em;
}
.footer-inner { width: 100%; margin: 0 auto; }
.site-footer .footer-logo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 176px; margin: 0 auto 20px; text-decoration: none;
}
.site-footer .footer-logo-img {
  display: block; width: 100%; height: auto; max-height: 90px; object-fit: contain;
  filter: brightness(0) invert(1); opacity: .98;
}
.footer-nav ul { display: flex; gap: 32px; justify-content: center; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.footer-nav a { color: #cfe9f6; text-decoration: none; font-size: 14px; font-weight: 700; }
.footer-nav a:hover { color: #ffe800; }
.footer-legal { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; margin-top: 32px; padding-top: 24px; border-top: 1px dashed #ffffff33; }
.footer-legal a { color: #ffffff99; text-decoration: none; font-size: 12px; font-weight: 700; }
.footer-legal a:hover { color: #ffe800; }
.copyright { font-size: 12px; color: #cfe9f6; margin-top: 16px; }
.footer-sns { display: flex; gap: 12px; justify-content: center; margin-top: 16px; }
.footer-sns a { width: 36px; height: 36px; border-radius: 50%; background: #ffffff1a; display: flex; align-items: center; justify-content: center; color: #ffffffb3; transition: background .2s, color .2s; }
.footer-sns a:hover { background: #ffffff40; color: #fff; }
.footer-sns svg { width: 18px; height: 18px; }
@media (max-width: 768px) {
  .site-footer { padding: 36px 16px 26px; }
  .site-footer .footer-logo { width: 142px; margin-bottom: 16px; }
  .footer-nav ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .footer-nav a { display: block; padding: 9px 6px; font-size: 12px; }
  .footer-legal { margin-top: 22px; padding-top: 18px; gap: 10px 16px; }
  .footer-sns { margin-top: 18px; }
}
@media (prefers-reduced-motion: reduce) { .tooth-piece > image { transition: none; } }

/* One footer; the second fixed menu has been removed. */
body { padding-bottom: 0; }
.background { background: linear-gradient(135deg, #ffffff 0%, #edf8fd 48%, #f5fbff 72%, #ffffff 100%); }
.background::before { z-index: 0; }
.background::after { z-index: 0; }
.site-footer { padding-bottom: calc(190px + env(safe-area-inset-bottom)); }
@media (max-width: 760px) { .site-footer { padding-bottom: calc(170px + env(safe-area-inset-bottom)); } }

/* Coupon CTA: blank image panel and blue banner from the supplied reference. */
.hero-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
.hero-intro .copy { min-width: 0; }
.offer {
  display: grid; grid-template-columns: 28% minmax(0, 1fr); align-items: stretch;
  width: 100%; min-width: 0; margin: 0; padding: 0;
  border: 2px solid #fff; border-radius: 4px; overflow: hidden;
  background: #74b1ca; color: #fff; box-shadow: 0 10px 30px #155f961a;
}
.offer-image { display: block; background: #fff; }
.offer-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.offer-content { display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 0 14px 14px; text-align: center; }
.offer-coupon {
  display: block; width: 92%; margin: 0 0 12px; padding: 5px 4px 7px;
  border-radius: 0 0 12px 12px; background: #fff; color: #397f9d;
  font-size: 16px; font-weight: 700; line-height: 1.5;
}
.offer-title { margin: 0 0 2px; font-size: 14px; line-height: 1.5; color: #fff; }
.offer-heading { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; column-gap: 7px; width: 100%; padding-bottom: 5px; border-bottom: 2px solid #ffffffb3; font-size: 22px; font-weight: 700; line-height: 1.3; }
.offer-price { font-size: clamp(34px, 3.6vw, 46px); color: #fff; line-height: 1.2; white-space: nowrap; }
.offer-price small { font-size: 19px; margin-left: 3px; }
.offer-note { max-width: none; margin-top: 8px; font-size: 12px; color: #fff; line-height: 1.65; }
.offer:hover { transform: translateY(-3px); box-shadow: 0 14px 34px #155f9626; }
.offer:focus-visible { outline-color: #155f96; }
@media (max-width: 960px) {
  .hero-intro { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .offer { max-width: 560px; justify-self: end; }
  .mouth-scene { margin-top: 14px; }
}
@media (max-width: 760px) {
  .hero-intro { gap: 22px; }
  .offer { width: 100%; margin: 0; padding: 0; grid-template-columns: 25% minmax(0, 1fr); }
  .offer-content { padding: 0 10px 12px; }
  .offer-coupon { font-size: 14px; margin-bottom: 10px; }
  .offer-title { font-size: 14px; line-height: 1.5; }
  .offer-heading { font-size: 19px; column-gap: 5px; }
  .offer-price { font-size: 34px; }
  .offer-price small { font-size: 17px; }
  .offer-note { font-size: 12px; margin-top: 8px; line-height: 1.65; }
}

/* Mobile: show the complete mouth and keep the coupon clear of the right CTAs. */
@media (max-width: 760px) {
  .hero-intro { display: block; }
  .mouth-scene { margin: 18px -12px 10px; padding-top: 0; }
  .mouth-scroll { width: 100%; overflow: visible; }
  .mouth-rig { width: 100%; max-width: 100%; margin: 0 auto; }
  .mouth-art { width: 100%; height: auto; }
  .tooth-label { font-size: 40px; stroke-width: 3px; }
  .tooth-en { display: none; }
  .offer {
    position: fixed; z-index: 110;
    left: max(12px, env(safe-area-inset-left)); right: auto;
    bottom: calc(12px + env(safe-area-inset-bottom));
    display: block; width: min(164px, calc(50vw - 20px)); min-width: 0;
    max-width: none; margin: 0; padding: 0; border-radius: 10px;
    animation: none; transform: none; translate: none;
  }
  .offer-image, .offer-heading-label { display: none; }
  .offer-content { padding: 0 7px 8px; }
  .offer-coupon { width: 100%; padding: 5px 1px; margin-bottom: 5px; border-radius: 0 0 7px 7px; font-size: 12px; }
  .offer-title { font-size: 12px; margin-bottom: 1px; line-height: 1.5; }
  .offer-heading { padding-bottom: 2px; column-gap: 0; }
  .offer-price { font-size: 30px; }
  .offer-price small { font-size: 15px; }
  .offer-note { font-size: 12px; line-height: 1.35; margin-top: 4px; overflow-wrap: anywhere; }
  .offer:hover { transform: none; }
  .site-footer { padding-bottom: calc(180px + env(safe-area-inset-bottom)); }
}

/* Public Whity header, shared with the Access page. */
.site-header { position: sticky; top: 0; z-index: 120; width: 100%; background: #fff; border-bottom: 2px solid #29abe2; box-shadow: 0 4px 10px #1466a81a; }
.header-inner { width: 100%; max-width: 1100px; margin: 0 auto; padding: 8px 20px; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.header-logo-link { display: flex; align-items: center; flex-shrink: 0; }
.header-logo-img { display: block; width: auto; height: 100px; object-fit: contain; }
.header-nav { min-width: 0; }
.header-nav ul { display: flex; gap: 24px; list-style: none; margin: 0; padding: 0; }
.header-nav a { font-size: 14px; font-weight: 700; color: #12263f; white-space: nowrap; transition: color .2s; }
.header-nav a:hover { color: #29abe2; }
.btn-reservation-top { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; min-width: 126px; height: 50px; padding: 0 22px; border-radius: 999px; background: #29abe2; color: #fff; font-size: 14px; font-weight: 700; white-space: nowrap; }
.btn-reservation-top:hover { background: #1d98cc; color: #fff; }
.mobile-nav-toggle { display: none; appearance: none; min-width: 44px; min-height: 44px; padding: 7px 9px; border: 1px solid #cfe0e9; border-radius: 10px; background: #fff; color: #1466a8; cursor: pointer; line-height: 1; }
.mobile-nav-toggle__bars { display: inline-grid; gap: 4px; width: 18px; }
.mobile-nav-toggle__bars i { display: block; width: 18px; height: 1.5px; border-radius: 99px; background: currentColor; transition: transform .18s ease, opacity .18s ease; }
.mobile-nav-toggle__label { display: block; margin-top: 4px; font-size: 9px; font-weight: 800; letter-spacing: .02em; }
.site-header.is-nav-open .mobile-nav-toggle__bars i:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.site-header.is-nav-open .mobile-nav-toggle__bars i:nth-child(2) { opacity: 0; }
.site-header.is-nav-open .mobile-nav-toggle__bars i:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
@media (min-width: 761px) and (max-width: 1050px) {
  .header-inner { flex-wrap: wrap; gap: 10px; }
  .header-nav { order: 3; width: 100%; }
  .header-nav ul { justify-content: center; flex-wrap: wrap; gap: 12px 24px; padding-bottom: 8px; }
}
@media (max-width: 760px) {
  .site-header { border-bottom: 1px solid #d7e7ef; box-shadow: none; }
  .header-inner { min-height: 64px; padding: 7px 16px; gap: 8px; position: relative; flex-wrap: wrap; }
  .header-logo-link { min-width: 0; margin-right: auto; }
  .header-logo-img { height: 48px; width: auto; max-width: 126px; }
  .btn-reservation-top { min-width: 104px; height: 46px; padding: 0 16px; font-size: 13px; }
  .site-header.nav-ready .mobile-nav-toggle { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; flex-direction: column; }
  .header-nav { order: 4; width: 100%; padding: 10px 0; }
  .site-header.nav-ready .header-nav { display: none; position: absolute; top: calc(100% + 1px); left: 0; right: 0; padding: 10px 16px 16px; background: #fff; border-bottom: 1px solid #d7e7ef; box-shadow: 0 8px 20px #155f9614; }
  .site-header.nav-ready.is-nav-open .header-nav { display: block; }
  .header-nav ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .header-nav a { display: flex; align-items: center; justify-content: center; min-height: 46px; padding: 9px 8px; font-size: 13px; color: #1466a8; background: #f7fbfd; border: 1px solid #d6e6ed; border-radius: 8px; }
  .interaction-bar .hover-copy { display: none; }
  .interaction-bar { justify-content: flex-end; padding: 10px 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
}
@media (max-width: 390px) {
  .header-logo-img { max-width: 102px; height: 44px; }
  .btn-reservation-top { min-width: 94px; height: 44px; padding: 0 13px; font-size: 12px; }
}

/* Static white and sky-blue backdrop below page content. */
.background { z-index: 0; background: linear-gradient(135deg, #fff 0%, #e5f4fc 40%, #dff2fc 65%, #fff 100%); }
.background::before { opacity: .55; }
.background::after { opacity: .5; }
.pointer-light { z-index: 0; }
main, .site-footer { position: relative; z-index: 1; }
@media (max-width: 760px) { .interaction-bar { display: none; } }

/* The fixed mobile coupon lives directly under body, above the footer. */
.offer--mobile { display: none; }
@media (max-width: 760px) {
  .offer--desktop { display: none; }
  .offer--mobile { display: block; z-index: 110; }
}