:root {
  --misaki-page-bg: #f6f8fb;
  --misaki-text: #575757;
  --misaki-pink: #ff98ac;
  --misaki-header-glass: rgba(232, 238, 235, .72);
}

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body.misaki-d2c-page { margin: 0; overflow-x: hidden; background: var(--misaki-page-bg); color: var(--misaki-text); }
.d2c-fixed-header-stage { position: fixed; left: 0; top: 0; width: 100vw; height: calc(100vw * 100 / 1440); transform-origin: top left; container-type: inline-size; overflow: visible; z-index: 20; background-color: var(--misaki-header-glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.d2c-site-stage { position: relative; width: 100vw; height: calc(100vw * 5131 / 1440); margin: 0; container-type: inline-size; overflow: hidden; }
.d2c-artboard { position: absolute; top: 0; left: 0; width: 1440px; height: 5131px; margin: 0; overflow: hidden; background: var(--misaki-page-bg); transform: scale(calc(100cqi / 1440px)); transform-origin: top left; }
.site-header { position: absolute; inset: 0 auto auto 0; width: 1440px; height: 100px; overflow: visible; z-index: 1; color: #fff; font-family: 'Zen Maru Gothic', sans-serif; transform: scale(calc(100cqi / 1440px)); transform-origin: top left; }
.site-brand { position: absolute; left: 35px; top: 8px; width: 361px; height: 84px; color: #fff; text-shadow: 0 1px 3px rgba(24,33,30,.9); z-index: 2; }
.site-brand__mark { position: absolute; left: 0; top: 0; width: 84px; height: 84px; object-fit: cover; }
.site-brand span { position: absolute; white-space: nowrap; line-height: 1; }
.site-brand__corporate { left: 89px; top: 18px; font-size: 14px; font-weight: 400; }
.site-brand__name { left: 89px; top: 38px; font-size: 28px; font-weight: 700; }
.site-brand__english { left: 239px; top: 51px; font-size: 15px; font-weight: 700; }
.header-actions { position: absolute; left: 564px; top: 21px; width: 836px; height: 60px; border-radius: 60px; background: var(--misaki-pink); z-index: 3; }
.header-actions > a,
.header-actions > button { position: absolute; top: 10px; height: 40px; color: #fff; white-space: nowrap; }
.header-actions > button { appearance: none; margin: 0; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.header-actions > a::after,
.header-actions > button::after { content: ''; position: absolute; right: 0; top: 0; width: 1px; height: 40px; background: rgba(255,255,255,.9); }
.header-actions__access::after { display: none; }
.header-actions__phone { left: 56px; width: 183px; display: block; font: 500 20px/19px 'Noto Sans JP', sans-serif; }
.header-actions__phone-icon { position: absolute; left: 0; top: 10px; width: 19px; height: 19px; overflow: hidden; }
.header-actions__phone-icon img { position: absolute; left: 2.2158px; top: 0; width: 14.5684px; height: 19px; max-width: none; object-fit: fill; }
.header-actions__phone-number { position: absolute; left: 24px; top: 10px; }
.header-actions__medical { left: 269px; width: 149px; }
.header-actions__about { left: 418px; width: 199px; }
.header-actions__access { left: 617px; width: 163px; }
.header-actions__ja, .header-actions__en { position: absolute; display: block; text-align: center; }
.header-actions__medical .header-actions__ja { left: 8px; top: 0; width: 72px; font-size: 18px; line-height: 15px; }
.header-actions__medical .header-actions__en { left: 0; top: 20px; width: 88px; font-size: 12px; }
.header-actions__about .header-actions__ja { left: 30px; top: 0; width: 108px; font-size: 18px; line-height: 15px; }
.header-actions__about .header-actions__en { left: 59px; top: 20px; width: 49px; font-size: 12px; }
.header-actions__drop { position: absolute; top: 12px; width: 16px; height: 16px; }
.header-actions__medical .header-actions__drop { left: 103px; }
.header-actions__about .header-actions__drop { left: 153px; }
.header-actions__drop img { position: absolute; inset: 0; display: block; width: 16px; height: 16px; max-width: none; object-fit: fill; }
.header-actions__hover-bridge { position: absolute; left: 0; top: 40px; display: block; width: 100%; height: 20px; }
.header-actions__access-icon { position: absolute; left: 30px; top: 1px; width: 38px; height: 38px; overflow: hidden; }
.header-actions__access-icon img { position: absolute; left: 6.208px; top: 0; width: 25.584px; height: 38px; max-width: none; object-fit: fill; }
.header-actions__access-label { position: absolute; left: 83px; top: 5.5px; width: 80px; font-size: 20px; line-height: 29px; }
.header-dropdown { position: absolute; top: 87px; z-index: 4; border-radius: 10px; background: #fff; color: #000; font-family: 'Zen Maru Gothic', sans-serif; box-shadow: 0 8px 24px rgba(61,69,66,.22), 0 0 0 1px rgba(87,87,87,.16); }
.header-dropdown[hidden] { display: none; }
.header-dropdown:not([hidden]) { animation: header-dropdown-reveal .46s cubic-bezier(.22, 1, .36, 1) both; transform-origin: top center; }
.header-dropdown--medical { left: 805px; width: 400px; height: 133px; }
.header-dropdown--about { left: 982px; width: 409px; height: 192px; }
.header-dropdown__list { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.header-dropdown__list li,
.header-dropdown__list a { position: absolute; width: 112px; height: 40px; }
.header-dropdown__list a { inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 8px; color: #000; text-align: center; white-space: nowrap; text-decoration: none; }
.header-dropdown__list a:hover,
.header-dropdown__list a:focus-visible { background: #f2f2f2; }
.header-dropdown__list a:focus-visible { outline: 2px solid #ff98ac; outline-offset: 1px; }
.header-dropdown__ja,
.header-dropdown__en { display: block; white-space: nowrap; }
.header-dropdown__ja { height: 20px; color: #000; font-size: 14px; font-weight: 500; line-height: 20px; }
.header-dropdown__en { height: 17px; color: #585858; font-size: 12px; font-weight: 400; line-height: 17px; }
.header-dropdown--medical li:nth-child(1) { left: 22px; top: 17px; }
.header-dropdown--medical li:nth-child(2) { left: 162px; top: 18px; }
.header-dropdown--medical li:nth-child(3) { left: 283px; top: 17px; }
.header-dropdown--medical li:nth-child(4) { left: 22px; top: 74px; }
.header-dropdown--medical li:nth-child(5) { left: 162px; top: 74px; }
.header-dropdown--medical li:nth-child(6) { left: 283px; top: 74px; }
.header-dropdown--about li:nth-child(1) { left: 20px; top: 18px; }
.header-dropdown--about li:nth-child(2) { left: 157px; top: 18px; }
.header-dropdown--about li:nth-child(3) { left: 291px; top: 18px; }
.header-dropdown--about li:nth-child(4) { left: 20px; top: 74px; }
.header-dropdown--about li:nth-child(5) { left: 157px; top: 74px; }
.header-dropdown--about li:nth-child(6) { left: 291px; top: 75px; }
.header-dropdown--about li:nth-child(7) { left: 20px; top: 133px; }
.header-dropdown--about li:nth-child(8) { left: 157px; top: 133px; }
.header-dropdown--about li:nth-child(9) { left: 291px; top: 133px; }
.header-dropdown__divider { position: absolute; width: 1px; height: 32px; background: #575757; pointer-events: none; }
.header-dropdown__divider--medical-1 { left: 159px; top: 21px; }
.header-dropdown__divider--medical-2 { left: 277px; top: 21px; }
.header-dropdown__divider--medical-3 { left: 159px; top: 80px; }
.header-dropdown__divider--medical-4 { left: 277px; top: 80px; }
.header-dropdown__divider--about-1 { left: 147px; top: 21px; }
.header-dropdown__divider--about-2 { left: 280px; top: 24px; }
.header-dropdown__divider--about-3 { left: 147px; top: 80px; }
.header-dropdown__divider--about-4 { left: 280px; top: 80px; }
.header-dropdown__divider--about-5 { left: 147px; top: 139px; }
.header-dropdown__divider--about-6 { left: 280px; top: 137px; }
.mobile-menu-toggle, .mobile-global-menu { display: none; }

@keyframes header-dropdown-reveal {
  from { opacity: 0; transform: translateY(-16px); clip-path: inset(0 0 100% 0 round 10px); }
  to { opacity: 1; transform: translateY(0); clip-path: inset(0 round 10px); }
}

@media (prefers-reduced-motion: reduce) {
  .header-dropdown:not([hidden]) { animation: none; }
}

@media (min-width: 1440px) {
  .d2c-site-stage, .d2c-artboard { overflow: visible; }
  .d2c-fixed-header-stage {
    --misaki-compact-header-scale: min(calc(100cqi / 1440px), 1.1);
    height: min(calc(100vw * 100 / 1440), 110px);
  }
  .d2c-fixed-header-stage .site-header { width: 100%; height: min(calc(100vw * 100 / 1440), 110px); transform: none; }
  .d2c-fixed-header-stage .site-brand { left: 35px; top: 8px; transform: scale(var(--misaki-compact-header-scale)); transform-origin: top left; }
  .d2c-fixed-header-stage .header-actions { left: auto; right: 40px; top: 21px; transform: scale(var(--misaki-compact-header-scale)); transform-origin: top right; }
  .d2c-fixed-header-stage .header-dropdown { top: 87px; transform: scale(var(--misaki-compact-header-scale)); transform-origin: top right; }
  .d2c-fixed-header-stage .header-dropdown:not([hidden]) { animation-name: header-dropdown-reveal-compact; }
  .d2c-fixed-header-stage .header-dropdown--medical { left: auto; right: calc(40px + 195px * var(--misaki-compact-header-scale)); }
  .d2c-fixed-header-stage .header-dropdown--about { left: auto; right: calc(40px + 9px * var(--misaki-compact-header-scale)); }
}

@keyframes header-dropdown-reveal-compact {
  from { opacity: 0; transform: translateY(-16px) scale(var(--misaki-compact-header-scale)); clip-path: inset(0 0 100% 0 round 10px); }
  to { opacity: 1; transform: translateY(0) scale(var(--misaki-compact-header-scale)); clip-path: inset(0 round 10px); }
}

@media (max-width: 699.98px) {
  .d2c-fixed-header-stage { width: 100vw; height: calc(100vw * 84 / 375); }
  .d2c-site-stage { width: 100vw; height: calc(100vw * 7320 / 375); margin: 0; }
  .d2c-artboard { width: 375px; height: 7320px; transform: scale(calc(100cqi / 375px)); }
  .site-header { width: 375px; height: 84px; transform: scale(calc(100cqi / 375px)); }
  .site-brand { left: 7px; top: 8px; width: 361px; height: 84px; transform: scale(.8); transform-origin: top left; }
  .site-brand__mark { width: 84px; height: 84px; }
  .site-brand__corporate { left: 90px; top: 18px; font-size: 14px; }
  .site-brand__name { left: 90px; top: 38px; font-size: 28px; }
  .site-brand__english { left: 239px; top: 51px; font-size: 15px; }
  .header-actions { display: none; }
  .header-dropdown { display: none; }
  .mobile-menu-toggle { display: block; position: absolute; left: 310px; top: 19px; width: 46px; height: 46px; padding: 0; border: 0; z-index: 8; cursor: pointer; }
  .mobile-menu-toggle img { width: 46px; height: 46px; }
  .mobile-global-menu { position: absolute; display: block; left: 12px; top: 84px; width: 351px; max-height: calc(100dvh - 96px); z-index: 7; overflow-y: auto; overscroll-behavior: contain; border: 1px solid rgba(255,152,172,.45); border-radius: 16px; background: rgba(255,255,255,.985); color: var(--misaki-text); box-shadow: 0 14px 36px rgba(61,69,66,.24); animation: mobile-menu-reveal .38s cubic-bezier(.22, 1, .36, 1) both; }
  .mobile-global-menu[hidden] { display: none; }
  .mobile-global-menu__sheet { padding: 10px; }
  .mobile-global-menu__group-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 62px; padding: 9px 14px 9px 16px; border: 0; border-bottom: 1px solid #f3c3cc; background: transparent; color: #575757; font-family: 'Zen Maru Gothic', sans-serif; text-align: left; cursor: pointer; }
  .mobile-global-menu__group-toggle > span:first-child { display: flex; flex-direction: column; gap: 2px; }
  .mobile-global-menu__group-toggle strong { font-size: 18px; line-height: 24px; font-weight: 700; }
  .mobile-global-menu__group-toggle small { color: #888; font-size: 11px; line-height: 15px; font-weight: 400; }
  .mobile-global-menu__chevron { position: relative; flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; background: #ff98ac; }
  .mobile-global-menu__chevron::before { content: ''; position: absolute; left: 9px; top: 7px; width: 8px; height: 8px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); transition: transform .24s ease, top .24s ease; }
  .mobile-global-menu__group-toggle[aria-expanded="true"] .mobile-global-menu__chevron::before { top: 11px; transform: rotate(225deg); }
  .mobile-global-menu__submenu[hidden] { display: none; }
  .mobile-global-menu__submenu:not([hidden]) { animation: mobile-submenu-reveal .3s cubic-bezier(.22, 1, .36, 1) both; }
  .mobile-global-menu__submenu ul { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 8px 0 12px; padding: 0; list-style: none; }
  .mobile-global-menu__submenu a { display: flex; flex-direction: column; justify-content: center; min-height: 52px; padding: 6px 8px; border-radius: 8px; background: #f7f7f7; color: #575757; font: 500 14px/19px 'Zen Maru Gothic', sans-serif; text-align: center; text-decoration: none; }
  .mobile-global-menu__submenu a small { display: block; color: #888; font-size: 10px; line-height: 14px; font-weight: 400; }
  .mobile-global-menu__utility { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding-top: 10px; }
  .mobile-global-menu__utility a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 54px; border-radius: 27px; background: #ff98ac; color: #fff; font-family: 'Noto Sans JP', sans-serif; text-decoration: none; }
  .mobile-global-menu__phone { font-size: 15px; font-weight: 500; }
  .mobile-global-menu__phone img { width: 12px; height: 16px; }
  .mobile-global-menu__access { font: 500 17px/24px 'Zen Maru Gothic', sans-serif; }
  .mobile-global-menu__access img { width: 20px; height: 30px; }
  .mobile-global-menu a:focus-visible,
  .mobile-global-menu button:focus-visible { outline: 2px solid #ff98ac; outline-offset: 2px; }
}

@keyframes mobile-menu-reveal {
  from { opacity: 0; transform: translateY(-18px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes mobile-submenu-reveal {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-global-menu,
  .mobile-global-menu__submenu:not([hidden]) { animation: none; }
  .mobile-global-menu__chevron::before { transition: none; }
}
