:root {
  --about-text: #575757;
  --about-pink: #ff97ab;
  --about-blue: #69c1cf;
}

.d2c-site-stage { height: calc(100vw * 3377 / 1440); }
.d2c-artboard { height: 3377px; }
.about-page { position: absolute; inset: 0; width: 1440px; height: 2800px; overflow: hidden; isolation: isolate; color: var(--about-text); font-family: 'Noto Sans JP', sans-serif; pointer-events: none; }
.about-page *, .about-page *::before, .about-page *::after { box-sizing: border-box; }
.about-page img { max-width: none; }
.about-page section { position: absolute; z-index: 1; }
.about-page :where(a, button, input, select, textarea, summary, [tabindex], h1, h2, h3, h4, h5, h6, p, li, dt, dd, th, td, label, figcaption),
.about-page .about-floor-card__copy,
.about-page .about-intro__photo { pointer-events: auto; }

.about-hero { left: 0; top: 100px; width: 1440px; height: 285px; overflow: hidden; color: #fff; font-family: 'Zen Maru Gothic', sans-serif; }
.about-hero__visual { position: absolute; inset: 0; overflow: hidden; }
.about-hero__visual img { position: absolute; left: 0; top: -336.5px; width: 1440px; height: 960.12px; object-fit: fill; transform: scale(-1, -1); }
.about-hero__shade { position: absolute; inset: 0 0 1px; background: rgba(0, 0, 0, .29); }
.about-hero__title { position: absolute; left: 606px; top: 103px; width: 228px; height: 69px; margin: 0; text-align: center; font-weight: 700; }
.about-hero__title span { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; }
.about-hero__title-ja { top: 0; font-size: 28px; line-height: 41px; }
.about-hero__title-en { top: 46px; font-size: 16px; line-height: 23px; }

@media (min-width: 1440px) {
  .about-hero { top: var(--misaki-page-hero-top, 100px); height: calc(285px + var(--misaki-page-hero-extension, 0px)); }
  .about-hero__visual img { top: calc(-336.5px + var(--misaki-page-hero-extension, 0px)); }
  .about-hero__title { top: calc(103px + var(--misaki-page-hero-extension, 0px)); }
}

.about-intro { inset: 0; }
.about-pagehead { position: absolute; left: 100px; top: 505px; width: 357px; height: 82px; }
.about-pagehead__icon { position: absolute; left: 0; top: 0; width: 111px; height: 82px; overflow: hidden; }
.about-pagehead__icon img { position: absolute; left: -195.69px; top: -98.07px; width: 779.58px; height: 583.09px; object-fit: fill; }
.about-pagehead h2 { position: absolute; left: 123px; top: 0; width: 112px; height: 41px; margin: 0; font: 700 28px/41px 'Zen Maru Gothic', sans-serif; white-space: nowrap; }
.about-pagehead p { position: absolute; left: 123px; top: 51px; width: 127px; height: 23px; margin: 0; color: #b7b7b7; font: 700 16px/23px 'Zen Maru Gothic', sans-serif; white-space: nowrap; }
.about-intro__lead { position: absolute; left: 135px; top: 627px; width: 540px; height: 50px; margin: 0; color: var(--about-pink); font: 700 28px/50px 'Zen Maru Gothic', sans-serif; letter-spacing: 5.6px; white-space: nowrap; }
.about-intro__copy { position: absolute; left: 135px; top: 717px; width: 686px; height: 247px; font-size: 16px; line-height: 34px; font-weight: 400; }
.about-intro__copy p { margin: 0; }
.about-intro__photo { position: absolute; display: block; }
.about-intro__photo img { position: absolute; display: block; object-fit: cover; border-radius: 50%; }
.about-intro__photo--hospital img { object-position: 50% center; }
.about-intro__photo--interior img { object-position: center; }
.about-intro__photo-sp { display: none !important; }
.about-intro__photo--hospital { left: 978px; top: 607px; width: 327px; height: 327px; }
.about-intro__photo--hospital .about-intro__photo-pc { left: -4px; top: 0; width: 335px; height: 335px; }
.about-intro__photo--interior { left: 877px; top: 869px; z-index: 2; width: 220px; height: 220px; }
.about-intro__photo--interior .about-intro__photo-pc { inset: 0; width: 220px; height: 220px; }

.about-floor { inset: 0; }
.about-floor__title { position: absolute; left: 117px; top: 1201px; width: 221px; height: 41px; margin: 0; font: 700 28px/41px 'Zen Maru Gothic', sans-serif; white-space: nowrap; }
.about-floor__title img { position: absolute; left: 0; top: 3px; width: 35px; height: 35px; object-fit: fill; }
.about-floor__title span { position: absolute; left: 53px; top: 0; }
.about-floor-card { position: absolute; left: 237px; width: 965px; height: 176px; background: #f2f2f2; }
.about-floor-card--first { top: 1281px; }
.about-floor-card--second { top: 1969px; }
.about-floor-card__circle { position: absolute; left: 60px; top: 33px; width: 110px; height: 110px; }
.about-floor-card__circle img { position: absolute; left: -2px; top: 0; width: 114px; height: 114px; object-fit: fill; }
.about-floor-card h3 { position: absolute; left: 91px; top: 67px; width: 48px; height: 41px; margin: 0; font: 700 28px/41px 'Zen Maru Gothic', sans-serif; letter-spacing: 5.6px; text-align: center; white-space: nowrap; }
.about-floor-card--first h3 { color: var(--about-pink); }
.about-floor-card--second h3 { color: var(--about-blue); }
.about-floor-card__copy { position: absolute; left: 242px; margin: 0; color: var(--about-text); font-size: 18px; line-height: 40px; font-weight: 500; }
.about-floor-card--first .about-floor-card__copy--pc { top: 48px; width: 615px; height: 80px; }
.about-floor-card--second .about-floor-card__copy--pc { top: 68px; width: 584px; height: 40px; white-space: nowrap; }
.about-floor-card__copy--sp { display: none; }
.about-floor-map { position: absolute; left: 237px; width: 965px; margin: 0; overflow: hidden; }
.about-floor-map--first { top: 1465px; height: 414px; }
.about-floor-map--second { top: 2153px; height: 714px; }
.about-floor-map__link { position: absolute; display: block; overflow: hidden; border: 1px solid rgba(87, 87, 87, .2); border-radius: 12px; background: #fff; box-shadow: 0 6px 18px rgba(70, 70, 70, .14); pointer-events: auto; transition: transform .28s ease, box-shadow .28s ease; }
.about-floor-map__link:focus-visible { outline: 3px solid var(--about-pink); outline-offset: -4px; }
.about-floor-map__link img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: fill; }
.about-floor-map--first .about-floor-map__link { left: 82.5px; top: 42.8px; width: 800px; height: 328.35px; }
.about-floor-map--second .about-floor-map__link { left: 140.5px; top: 50px; width: 684px; height: 516.75px; }

@media (hover: hover) and (pointer: fine) {
  .about-floor-map__link:hover { transform: translateY(-10px); box-shadow: 0 16px 30px rgba(87, 87, 87, .24); }
}

@media (prefers-reduced-motion: reduce) {
  .about-floor-map__link { transition: none; }
}

@media (min-width: 700px) {
  .site-footer { top: 2800px; height: 577px; }
}

@media (max-width: 699.98px) {
  .d2c-site-stage { width: 100vw; height: calc(100vw * 3715 / 375); }
  .d2c-artboard { width: 375px; height: 3715px; }
  .about-page { width: 375px; height: 2526px; }

  .about-hero { top: 84px; width: 375px; height: 268px; }
  .about-hero__visual img { left: -277px; top: -190px; width: 929px; height: 619.32px; transform: scale(-1, -1); }
  .about-hero__shade { inset: 0; }
  .about-hero__title { left: 131px; top: 84px; width: 111px; height: 55px; }
  .about-hero__title-ja { top: 0; font-size: 24px; line-height: 35px; }
  .about-hero__title-en { top: 35px; font-size: 14px; line-height: 20px; }

  .about-pagehead { left: 12px; top: 392px; width: 300px; height: 64px; }
  .about-pagehead__icon { width: 77px; height: 57px; }
  .about-pagehead__icon img { left: -135.75px; top: -68.17px; width: 540.79px; height: 405.32px; }
  .about-pagehead h2 { left: 85px; top: 0; width: 96px; height: 35px; font-size: 24px; line-height: 35px; }
  .about-pagehead p { left: 85px; top: 37px; width: 111px; height: 20px; font-size: 14px; line-height: 20px; }
  .about-intro__lead { left: 12px; top: 481px; width: 351px; height: 40px; font-size: 24px; line-height: 40px; letter-spacing: 4.8px; }
  .about-intro__copy { left: 12px; top: 557px; width: 351px; height: 442px; font-size: 16px; line-height: 34px; }
  .about-intro__photo-pc { display: none !important; }
  .about-intro__photo-sp { display: block !important; }
  .about-intro__photo--hospital { left: 88.55px; top: 1007px; width: 274.45px; height: 274.45px; }
  .about-intro__photo--hospital .about-intro__photo-sp { left: -4px; top: 0; width: 282.45px; height: 282.45px; }
  .about-intro__photo--interior { left: 12px; top: 1236.36px; width: 184.64px; height: 184.64px; }
  .about-intro__photo--interior .about-intro__photo-sp { inset: 0; width: 184.64px; height: 184.64px; }

  .about-floor__title { left: 12px; top: 1501px; width: 172px; height: 32px; font-size: 22px; line-height: 32px; }
  .about-floor__title img { top: 2px; width: 28px; height: 28px; }
  .about-floor__title span { left: 40px; }
  .about-floor-card { left: 12px; width: 351px; background: #f2f2f2; }
  .about-floor-card--first { top: 1549px; height: 228px; }
  .about-floor-card--second { top: 1980px; height: 194px; }
  .about-floor-card__circle { left: 136px; top: 20px; width: 80px; height: 80px; }
  .about-floor-card__circle img { left: -2px; top: 0; width: 84px; height: 84px; content: url('../img/about/floor-circle-sp.svg'); }
  .about-floor-card h3 { left: 178.2px; top: 44px; width: auto; height: 32px; transform: translateX(-50%); font-size: 22px; line-height: 32px; letter-spacing: 4.4px; }
  .about-floor-card__copy--pc { display: none; }
  .about-floor-card__copy--sp { display: block; left: 12px; width: 327px; margin: 0; font-weight: 500; white-space: pre-wrap; }
  .about-floor-card__copy--sp span { display: block; }
  .about-floor-card--first .about-floor-card__copy--sp { top: 106px; height: 102px; font-size: 16px; line-height: 34px; }
  .about-floor-card--second .about-floor-card__copy--sp { top: 106px; height: 68px; font-size: 18px; line-height: 34px; }
  .about-floor-map { left: 12px; width: 351px; }
  .about-floor-map--first { top: 1789px; height: 151px; }
  .about-floor-map--second { top: 2186px; height: 260px; }
  .about-floor-map--first .about-floor-map__link { left: -3.33px; top: -.06px; width: 367.29px; height: 151.12px; }
  .about-floor-map--second .about-floor-map__link { left: 3.23px; top: -.42px; width: 344.93px; height: 260.81px; }

  .site-footer { top: 2526px; height: 1189px; }
}

/* Replacement photographs retain their natural orientation and proportions. */
.about-hero__visual img { left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transform: none; }
