/* =========================================================
MINE WOMEN'S CLINIC
BRAND PLAN
FINAL CONSOLIDATED STYLE
========================================================= */


/* =========================================================
01 RESET / TOKENS
========================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}

:root {
  --base: #f7f4f0;
  --white: #fcfbf8;

  --soft: #eee8e2;
  --soft-2: #e7dfd8;
  --soft-3: #f1ebe6;

  --rose-pale: #ecdcd8;
  --rose-soft: #ddbcb6;
  --rose: #c58e87;
  --rose-deep: #775052;
  --rose-dark: #583b3d;

  --charcoal: #2e2a28;
  --gray: #69625d;
  --gray-light: #847d77;

  --line: rgba(46, 42, 40, 0.13);
  --line-strong: rgba(46, 42, 40, 0.24);

  --serif:
    "Cormorant Garamond",
    serif;

  --jp-serif:
    "Noto Serif JP",
    serif;

  --max: 1380px;

  --page-x:
    max(
      54px,
      calc((100vw - var(--max)) / 2)
    );
}

body {
  margin: 0;
  overflow-x: hidden;

  color: var(--charcoal);
  background: var(--base);

  font-family:
    "Noto Sans JP",
    -apple-system,
    BlinkMacSystemFont,
    "Helvetica Neue",
    sans-serif;

  font-size: 16px;
  font-weight: 400;

  line-height: 1.9;
  letter-spacing: 0.025em;

  -webkit-font-smoothing: antialiased;
}

body.menu-open,
body.modal-open {
  overflow: hidden;
}

img {
  display: block;

  width: 100%;
}

figure,
h1,
h2,
h3,
h4,
p,
dl,
dd,
ul {
  margin-top: 0;
}

figure {
  margin-right: 0;
  margin-left: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  color: inherit;

  cursor: pointer;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

address {
  font-style: normal;
}


/* =========================================================
02 COMMON
========================================================= */

.section-number {
  display: block;

  color: #756d67;

  font-family: var(--serif);

  font-size: 20px;
  font-weight: 500;

  line-height: 1;
}

.section-en {
  margin: 10px 0 0;

  color: #736c66;

  font-size: 11px;
  font-weight: 500;

  line-height: 1.5;
  letter-spacing: 0.2em;
}

.section-number.light,
.section-en.light {
  color: rgba(255, 255, 255, 0.68);
}

.brand-sign {
  display: block;

  width: 8px;
  height: 8px;

  margin-top: 19px;

  border-radius: 50%;

  background: var(--rose);
}

.light-sign {
  background: var(--rose-soft);
}

.text-link {
  display: inline-flex;

  align-items: center;
  justify-content: space-between;

  gap: 42px;

  min-width: 220px;

  padding-bottom: 9px;

  border-bottom:
    1px solid currentColor;

  font-size: 13px;
  font-weight: 500;
}

.text-link b {
  font-weight: 400;

  transition:
    transform 0.25s ease;
}

.text-link:hover b {
  transform:
    translate(4px, -4px);
}


/* =========================================================
03 REVEAL
========================================================= */

.reveal {
  opacity: 0;

  transform: translateY(26px);

  transition:
    opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.is-visible {
  opacity: 1;

  transform: none;
}

.image-mask {
  position: relative;

  overflow: hidden;
}

.image-mask::after {
  position: absolute;
  z-index: 5;

  inset: 0;

  background: var(--base);

  content: "";

  transform-origin: right;

  transition:
    transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.image-mask.is-visible::after {
  transform: scaleX(0);
}

.image-mask img {
  transform: scale(1.025);

  transition:
    transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.image-mask.is-visible img {
  transform: scale(1);
}


/* =========================================================
04 HEADER
========================================================= */

.site-header {
  position: fixed;
  z-index: 1000;

  top: 0;
  right: 0;
  left: 0;

  display: grid;

  grid-template-columns:
    minmax(200px, 1fr)
    auto
    minmax(280px, 1fr);

  align-items: center;

  height: 82px;

  padding-left:
    clamp(30px, 3.3vw, 58px);

  padding-right:
    clamp(16px, 2.2vw, 34px);

  transition:
    background 0.35s ease,
    border-color 0.35s ease,
    backdrop-filter 0.35s ease;
}

.site-header.is-scrolled,
.subpage .site-header {
  background:
    rgba(247, 244, 240, 0.96);

  border-bottom:
    1px solid rgba(46, 42, 40, 0.09);

  backdrop-filter: blur(18px);
}

.site-logo {
  display: inline-flex;

  flex-direction: column;

  justify-self: start;

  line-height: 1;
}

.site-logo-main {
  font-family: var(--serif);

  font-size: 31px;
  font-weight: 500;

  letter-spacing: 0.15em;
}

.logo-dot {
  color: var(--rose-deep);
}

.site-logo-sub {
  margin-top: 7px;

  color: #69625d;

  font-size: 8px;
  font-weight: 500;

  letter-spacing: 0.23em;
}

.desktop-nav {
  display: flex;

  align-items: center;

  gap:
    clamp(20px, 2vw, 34px);
}

.desktop-nav a,
.header-first {
  position: relative;

  font-size: 12px;
  font-weight: 500;

  white-space: nowrap;
}

.desktop-nav a::after,
.header-first.is-current::after {
  position: absolute;

  right: 0;
  bottom: -9px;
  left: 0;

  height: 1px;

  background: var(--rose-deep);

  content: "";
}

.desktop-nav a::after {
  transform: scaleX(0);

  transition:
    transform 0.25s ease;
}

.desktop-nav a:hover::after,
.desktop-nav a.is-current::after {
  transform: scaleX(1);
}

.header-actions {
  display: flex;

  justify-self: end;

  align-items: center;

  gap:
    clamp(18px, 2.1vw, 34px);

  margin-left: auto;
}

.header-reserve {
  display: flex;

  align-items: center;
  justify-content: space-between;

  width: 190px;
  height: 58px;

  padding-inline: 22px;

  color: #fff;
  background: var(--charcoal);

  border: 0;

  font-size: 12px;
  font-weight: 500;

  transition:
    background 0.25s ease,
    transform 0.25s ease;
}

.header-reserve:hover {
  background: var(--rose-deep);

  transform: translateY(-1px);
}

.menu-button {
  display: none;

  position: relative;

  width: 42px;
  height: 42px;

  padding: 0;

  background: transparent;

  border: 0;
}

.menu-button span {
  position: absolute;

  left: 8px;

  width: 26px;
  height: 1px;

  background: currentColor;

  transition:
    top 0.3s ease,
    transform 0.3s ease;
}

.menu-button span:first-child {
  top: 17px;
}

.menu-button span:last-child {
  top: 24px;
}

.menu-button.is-active span:first-child {
  top: 21px;

  transform: rotate(45deg);
}

.menu-button.is-active span:last-child {
  top: 21px;

  transform: rotate(-45deg);
}


/* =========================================================
05 FULLSCREEN MENU
========================================================= */

.fullscreen-menu {
  position: fixed;
  z-index: 900;

  inset: 0;

  visibility: hidden;

  padding-top: 82px;

  color: #fff;
  background: var(--rose-dark);

  opacity: 0;

  transform: translateY(-12px);

  transition:
    opacity 0.35s ease,
    visibility 0.35s ease,
    transform 0.35s ease;
}

.fullscreen-menu.is-open {
  visibility: visible;

  opacity: 1;

  transform: none;
}

.fullscreen-menu-inner {
  display: flex;

  flex-direction: column;

  width:
    min(calc(100% - 88px), var(--max));

  height:
    calc(100svh - 82px);

  margin-inline: auto;

  padding:
    34px 0 24px;
}

.fullscreen-menu-top {
  display: flex;

  justify-content: space-between;

  padding-bottom: 24px;

  border-bottom:
    1px solid rgba(255, 255, 255, 0.16);
}

.fullscreen-menu-logo {
  display: flex;

  flex-direction: column;
}

.fullscreen-menu-logo span {
  font-family: var(--serif);

  font-size: 30px;

  letter-spacing: 0.15em;
}

.menu-logo-dot {
  color: var(--rose-soft);
}

.fullscreen-menu-logo small {
  color:
    rgba(255, 255, 255, 0.62);

  font-size: 8px;

  letter-spacing: 0.23em;
}

.fullscreen-menu-index {
  color:
    rgba(255, 255, 255, 0.62);

  font-size: 10px;

  letter-spacing: 0.2em;
}

.fullscreen-menu-layout {
  display: grid;

  grid-template-columns:
    1fr 310px;

  gap: 90px;

  flex: 1;

  padding-top: 35px;
}

.fullscreen-nav {
  display: grid;

  grid-template-columns:
    repeat(2, 1fr);

  align-content: start;
}

.fullscreen-nav a {
  display: grid;

  grid-template-columns:
    42px 1fr auto;

  align-items: center;

  min-height: 82px;

  padding-inline: 18px;

  border-bottom:
    1px solid rgba(255, 255, 255, 0.14);
}

.fullscreen-nav a:nth-child(odd) {
  border-right:
    1px solid rgba(255, 255, 255, 0.14);
}

.fullscreen-nav span {
  color:
    rgba(255, 255, 255, 0.55);

  font-family: var(--serif);

  font-size: 14px;
}

.fullscreen-nav strong {
  font-family: var(--jp-serif);

  font-size: 19px;
  font-weight: 400;
}

.fullscreen-nav b {
  font-weight: 400;
}

.fullscreen-menu-side {
  padding-left: 35px;

  border-left:
    1px solid rgba(255, 255, 255, 0.14);
}

.fullscreen-side-label {
  margin-bottom: 35px;

  color:
    rgba(255, 255, 255, 0.58);

  font-size: 10px;

  letter-spacing: 0.18em;
}

.fullscreen-menu-side dl {
  margin-bottom: 40px;
}

.fullscreen-menu-side dl > div {
  padding:
    13px 0;

  border-bottom:
    1px solid rgba(255, 255, 255, 0.13);
}

.fullscreen-menu-side dt {
  color:
    rgba(255, 255, 255, 0.53);

  font-size: 10px;
}

.fullscreen-menu-side dd {
  margin:
    3px 0 0;

  font-size: 13px;
}

.fullscreen-reserve {
  display: flex;

  align-items: center;
  justify-content: space-between;

  width: 100%;
  min-height: 62px;

  padding-inline: 18px;

  color: var(--rose-dark);
  background: #fff;

  border: 0;

  font-size: 12px;
}

.fullscreen-menu-bottom {
  display: flex;

  justify-content: space-between;

  padding-top: 17px;

  border-top:
    1px solid rgba(255, 255, 255, 0.14);

  color:
    rgba(255, 255, 255, 0.55);

  font-size: 9px;

  letter-spacing: 0.18em;
}


/* =========================================================
06 OPENING
========================================================= */

.opening {
  position: fixed;
  z-index: 5000;

  inset: 0;

  display: grid;

  place-items: center;

  background: var(--base);

  pointer-events: none;

  transition:
    opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0.6s ease;
}

.opening.is-finished {
  visibility: hidden;

  opacity: 0;
}

.opening-mark {
  display: flex;

  align-items: center;

  flex-direction: column;

  opacity: 0;

  transform: translateY(9px);

  animation:
    openingMark 0.72s
    cubic-bezier(0.22, 1, 0.36, 1)
    0.12s forwards;
}

.opening-word {
  font-family: var(--serif);

  font-size: 55px;
  font-weight: 500;

  line-height: 1;

  letter-spacing: 0.19em;
}

.opening-sub {
  margin-top: 11px;

  color: #77716b;

  font-size: 9px;

  letter-spacing: 0.26em;
}

.opening-dot {
  width: 7px;
  height: 7px;

  margin-top: 28px;

  border-radius: 50%;

  background: var(--rose);

  animation:
    openingDot 0.7s ease
    0.55s both;
}

@keyframes openingMark {
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes openingDot {
  0% {
    opacity: 0;

    transform: scale(0);
  }

  60% {
    opacity: 1;

    transform: scale(1.45);
  }

  100% {
    opacity: 1;

    transform: scale(1);
  }
}


/* =========================================================
07 TOP HERO
========================================================= */

.hero {
  position: relative;

  min-height: 760px;
  height: 100svh;

  overflow: hidden;

  background: #ece5dc;
}

.hero-media {
  position: absolute;

  inset: 0;
}

.hero-media img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  transform: scale(1.035);

  animation:
    heroImage 1.8s
    cubic-bezier(0.22, 1, 0.36, 1)
    0.7s forwards;
}

@keyframes heroImage {
  to {
    transform: scale(1);
  }
}

.hero-soft-layer {
  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(247, 244, 240, 0.28) 0%,
      rgba(247, 244, 240, 0.06) 55%,
      transparent 78%
    );
}

.hero-copy {
  position: absolute;
  z-index: 5;

  top: 50%;
  left:
    clamp(28px, 6.2vw, 108px);

  width:
    min(760px, 53vw);

  transform: translateY(-42%);
}

.hero-meta {
  display: flex;

  align-items: center;

  gap: 14px;

  margin-bottom: 24px;

  color: #625d58;
}

.hero-meta span {
  font-family: var(--serif);

  font-size: 19px;
}

.hero-meta p {
  margin: 0;

  font-size: 11px;

  letter-spacing: 0.16em;
}

.hero-meta .brand-sign {
  margin: 0;
}

.hero-title {
  margin-bottom: 28px;

  font-family: var(--jp-serif);

  font-size:
    clamp(37px, 3.65vw, 58px);

  font-weight: 400;

  line-height: 1.55;
  letter-spacing: -0.03em;
}

.hero-title span {
  display: block;

  width: max-content;
  max-width: 100%;

  white-space: nowrap;
}

.hero-description {
  max-width: 570px;

  margin-bottom: 36px;

  color: #5e5955;

  font-size: 15px;

  line-height: 2.05;
}

.hero-actions {
  display: flex;

  align-items: center;

  gap: 12px;
}

.hero-reserve {
  display: flex;

  align-items: center;
  justify-content: space-between;

  width: 194px;
  height: 58px;

  padding-inline: 19px;

  color: #fff;
  background: var(--rose-deep);

  border: 0;

  font-size: 13px;
  font-weight: 500;
}

.hero-first {
  display: flex;

  align-items: center;

  min-height: 58px;

  padding-inline: 20px;

  border:
    1px solid rgba(46, 42, 40, 0.24);

  font-size: 13px;
  font-weight: 500;
}

.hero-reveal {
  opacity: 0;

  transform: translateY(20px);

  animation:
    heroReveal 0.8s
    cubic-bezier(0.22, 1, 0.36, 1)
    forwards;
}

.hero-meta {
  animation-delay: 1.08s;
}

.hero-title {
  animation-delay: 1.21s;
}

.hero-description {
  animation-delay: 1.35s;
}

.hero-actions {
  animation-delay: 1.48s;
}

@keyframes heroReveal {
  to {
    opacity: 1;

    transform: none;
  }
}

.hero-brand-note {
  position: absolute;
  z-index: 4;

  top: 135px;
  right:
    clamp(24px, 3.5vw, 60px);

  display: flex;

  align-items: center;

  gap: 14px;

  color: #69635d;

  font-size: 9px;

  letter-spacing: 0.18em;

  writing-mode: vertical-rl;
}

.hero-brand-note i {
  width: 1px;
  height: 53px;

  background:
    rgba(46, 42, 40, 0.24);
}

.hero-scroll {
  position: absolute;
  z-index: 4;

  bottom: 112px;
  left:
    clamp(28px, 3.6vw, 60px);

  display: flex;

  align-items: center;

  gap: 13px;

  color: #68625c;

  font-size: 9px;

  letter-spacing: 0.18em;
}

.hero-scroll i {
  position: relative;

  width: 65px;
  height: 1px;

  overflow: hidden;

  background:
    rgba(46, 42, 40, 0.18);
}

.hero-scroll i::after {
  position: absolute;

  inset: 0;

  background: var(--rose-deep);

  content: "";

  animation:
    scrollLine 2.1s ease infinite;
}

@keyframes scrollLine {
  0% {
    transform: translateX(-100%);
  }

  60%,
  100% {
    transform: translateX(100%);
  }
}


/* =========================================================
08 TODAY
========================================================= */

.today-dock-wrap {
  position: relative;
  z-index: 40;

  height: 98px;

  margin-top: -98px;
}

.today-dock {
  width: 100%;

  background:
    rgba(252, 251, 248, 0.98);

  border-top:
    1px solid rgba(46, 42, 40, 0.08);

  border-bottom:
    1px solid var(--line);

  backdrop-filter: blur(16px);
}

.today-dock.is-sticky {
  position: fixed;
  z-index: 800;

  top: 82px;
  right: 0;
  left: 0;

  box-shadow:
    0 12px 30px
    rgba(46, 42, 40, 0.05);
}

.today-inner {
  display: grid;

  grid-template-columns:
    1.1fr
    repeat(4, 1fr)
    165px;

  min-height: 98px;

  width:
    min(100%, 1600px);

  margin-inline: auto;
}

.today-title,
.today-item {
  display: flex;

  justify-content: center;

  flex-direction: column;

  padding-inline: 25px;

  border-right:
    1px solid var(--line);
}

.today-title > span,
.today-item > span {
  color: #77716c;

  font-size: 10px;
  font-weight: 500;

  letter-spacing: 0.13em;
}

.today-title strong {
  margin-top: 3px;

  font-family: var(--serif);

  font-size: 25px;
  font-weight: 500;
}

.today-title strong span {
  color: var(--rose-deep);
}

.today-item strong {
  margin-top: 5px;

  font-size: 14px;
  font-weight: 500;
}

.today-reserve {
  display: flex;

  align-items: center;
  justify-content: space-between;

  padding-inline: 23px;

  color: #fff;
  background: var(--rose-deep);

  border: 0;

  font-size: 12px;
  font-weight: 500;
}


/* =========================================================
09 NEWS
========================================================= */

.news-strip {
  padding:
    42px
    var(--page-x);

  background: var(--white);

  border-bottom:
    1px solid var(--line);
}

.news-inner {
  display: grid;

  grid-template-columns:
    165px 1fr auto;

  align-items: center;

  gap: 40px;
}

.news-heading {
  display: flex;

  align-items: baseline;

  gap: 13px;
}

.news-heading span {
  font-family: var(--serif);

  font-size: 25px;
}

.news-heading small {
  color: var(--gray);

  font-size: 11px;
}

.news-item {
  display: grid;

  grid-template-columns:
    110px 1fr auto;

  align-items: center;

  gap: 24px;
}

.news-item time {
  color: var(--gray);

  font-family: var(--serif);

  font-size: 14px;
}

.news-item > span {
  font-size: 14px;
}

.news-item b {
  font-weight: 400;
}

.news-all {
  display: inline-flex;

  align-items: center;

  gap: 24px;

  font-size: 12px;
}


/* =========================================================
10 TOP ABOUT
========================================================= */

.brand-intro {
  padding:
    120px
    var(--page-x);

  background: var(--base);
}

.brand-intro-left {
  margin-bottom: 38px;
}

.brand-intro-copy {
  max-width: 1060px;
}

.brand-statement {
  margin-bottom: 24px;

  color: var(--rose-deep);

  font-family: var(--jp-serif);

  font-size:
    clamp(18px, 1.45vw, 22px);

  line-height: 1.9;
}

.brand-intro-copy h2 {
  max-width: 920px;

  margin-bottom: 38px;

  font-family: var(--jp-serif);

  font-size:
    clamp(38px, 4vw, 57px);

  font-weight: 400;

  line-height: 1.6;
  letter-spacing: -0.02em;
}

.brand-intro-body {
  display: grid;

  grid-template-columns:
    1.05fr 0.95fr;

  gap: 52px;

  max-width: 880px;
}

.brand-intro-body p {
  margin: 0;

  color: #5f5a56;

  font-size: 15px;

  line-height: 2.05;
}


/* =========================================================
11 TOP COMMON SECTIONS
========================================================= */

.symptoms,
.medical-care,
.life-stage,
.clinic,
.faq-section {
  padding:
    125px
    var(--page-x);
}

.symptoms {
  background: var(--soft);
}

.medical-care {
  background: #efe8e2;
}

.life-stage,
.clinic {
  background: var(--white);
}

.faq-section {
  background: var(--soft);
}

.symptoms-head,
.medical-head,
.life-stage-header,
.clinic-head {
  margin-bottom: 72px;
}

.symptoms-index,
.medical-head > div:first-child,
.life-stage-header > div:first-child,
.clinic-head > div:first-child {
  margin-bottom: 40px;
}

.symptoms-title,
.clinic-heading {
  max-width: 820px;
}

.symptoms-title h2,
.medical-head h2,
.life-stage-title h2,
.clinic-heading h2 {
  margin: 0;

  font-family: var(--jp-serif);

  font-size:
    clamp(40px, 4.3vw, 60px);

  font-weight: 400;

  line-height: 1.5;
}

.symptoms-title > p,
.medical-head > p,
.life-stage-title > p,
.clinic-heading > p {
  max-width: 510px;

  margin:
    26px 0 0;

  color: #5f5a56;

  font-size: 15px;

  line-height: 2;
}


/* =========================================================
12 TOP SYMPTOMS
========================================================= */

.symptoms-layout {
  display: grid;

  grid-template-columns:
    minmax(420px, 0.86fr)
    minmax(560px, 1.14fr);

  border-top:
    1px solid var(--line-strong);

  border-bottom:
    1px solid var(--line-strong);
}

.symptoms-list {
  padding-right: 42px;

  border-right:
    1px solid var(--line);
}

.symptom-button {
  position: relative;

  display: grid;

  grid-template-columns:
    48px 1fr auto;

  align-items: center;

  width: 100%;
  min-height: 86px;

  padding:
    0 10px 0 0;

  text-align: left;

  background: transparent;

  border: 0;
  border-bottom:
    1px solid var(--line);

  transition:
    background 0.25s ease,
    padding 0.25s ease;
}

.symptom-button:last-child {
  border-bottom: 0;
}

.symptom-button > span {
  color: #77716c;

  font-family: var(--serif);

  font-size: 15px;
}

.symptom-button strong {
  display: block;

  margin-bottom: 2px;

  font-family: var(--jp-serif);

  font-size:
    clamp(17px, 1.35vw, 21px);

  font-weight: 400;
}

.symptom-button small {
  color: #827b75;

  font-size: 10px;

  letter-spacing: 0.12em;
}

.symptom-button b {
  font-weight: 400;
}

.symptom-button:hover,
.symptom-button.is-active {
  padding-left: 12px;

  background:
    rgba(255, 255, 255, 0.34);
}

.symptom-button:hover strong,
.symptom-button.is-active strong {
  color: var(--rose-deep);
}

.symptom-result {
  padding-left: 42px;
}

.symptom-result-image {
  position: relative;

  height: 430px;

  margin: 0;
}

.symptom-result-image img {
  height: 100%;

  object-fit: cover;
}

.symptom-result-image figcaption {
  position: absolute;
  z-index: 6;

  right: 14px;
  bottom: 12px;
  left: 14px;

  display: flex;

  justify-content: space-between;

  color: #fff;

  font-size: 10px;
}

.symptom-result-card {
  display: grid;

  grid-template-columns:
    82px 1fr;

  padding:
    32px 0 10px;
}

.symptom-result-index {
  grid-row: 1 / 7;
}

.symptom-result-index span {
  display: block;

  font-family: var(--serif);

  font-size: 28px;
}

.symptom-result-index small {
  color: #7c756f;

  font-size: 10px;
}

.symptom-result-en {
  margin-bottom: 6px;

  color: #77716b;

  font-size: 11px;

  letter-spacing: 0.15em;
}

.symptom-result-card h3 {
  margin-bottom: 14px;

  font-family: var(--jp-serif);

  font-size:
    clamp(27px, 2.45vw, 37px);

  font-weight: 400;
}

.symptom-result-text {
  max-width: 550px;

  margin-bottom: 21px;

  color: #5f5a56;

  font-size: 14px;

  line-height: 2;
}

.symptom-tags {
  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  margin-bottom: 27px;
}

.symptom-tags span {
  padding:
    7px 12px;

  border:
    1px solid var(--line);

  font-size: 11px;
}

.symptoms-bottom {
  margin-top: 50px;
}

.wide-link {
  display: grid;

  grid-template-columns:
    1fr 1fr auto;

  align-items: center;

  min-height: 90px;

  padding-inline: 25px;

  border-top:
    1px solid var(--line);

  border-bottom:
    1px solid var(--line);
}

.wide-link > span:first-child {
  font-family: var(--jp-serif);

  font-size: 19px;
}

.wide-link > span:nth-child(2) {
  color: #77716b;

  font-size: 11px;
}


/* =========================================================
13 TOP MEDICAL
========================================================= */

.medical-head {
  max-width: 800px;
}

.medical-layout {
  display: grid;

  grid-template-columns:
    minmax(410px, 0.82fr)
    minmax(580px, 1.18fr);

  border-top:
    1px solid var(--line-strong);

  border-bottom:
    1px solid var(--line-strong);
}

.medical-list {
  padding-right: 42px;

  border-right:
    1px solid var(--line);
}

.medical-item {
  position: relative;

  display: grid;

  grid-template-columns:
    48px 1fr auto;

  align-items: center;

  width: 100%;
  min-height: 94px;

  padding:
    0 10px 0 0;

  text-align: left;

  background: transparent;

  border: 0;
  border-bottom:
    1px solid var(--line);

  transition:
    background 0.25s ease,
    padding 0.25s ease;
}

.medical-item:last-child {
  border-bottom: 0;
}

.medical-item > span {
  color: #77716c;

  font-family: var(--serif);

  font-size: 15px;
}

.medical-item small {
  display: block;

  margin-bottom: 3px;

  color: #827b75;

  font-size: 10px;

  letter-spacing: 0.12em;
}

.medical-item strong {
  font-family: var(--jp-serif);

  font-size:
    clamp(20px, 1.7vw, 26px);

  font-weight: 400;
}

.medical-item b {
  font-weight: 400;
}

.medical-item:hover,
.medical-item.is-active {
  padding-left: 12px;

  background:
    rgba(255, 255, 255, 0.34);
}

.medical-item:hover strong,
.medical-item.is-active strong {
  color: var(--rose-deep);
}

.medical-preview {
  padding-left: 42px;
}

.medical-image {
  position: relative;

  height: 470px;

  margin: 0;

  overflow: hidden;
}

.medical-image img {
  height: 100%;

  object-fit: cover;

  transition:
    opacity 0.3s ease,
    transform 0.55s ease;
}

.medical-image.is-changing img {
  opacity: 0.3;

  transform: scale(1.02);
}

.medical-image-number {
  position: absolute;

  right: 15px;
  bottom: 13px;

  padding:
    5px 8px;

  color: #fff;
  background:
    rgba(46, 42, 40, 0.3);

  font-family: var(--serif);

  font-size: 12px;
}

.medical-image-number b {
  font-size: 22px;
  font-weight: 400;
}

.medical-copy {
  display: grid;

  grid-template-columns:
    1fr auto;

  padding:
    29px 0 18px;

  border-top:
    1px solid var(--line);
}

.medical-copy-en {
  grid-column: 1 / 3;

  margin-bottom: 5px;

  color: #77716b;

  font-size: 11px;

  letter-spacing: 0.15em;
}

.medical-copy h3 {
  margin:
    0 0 11px;

  font-family: var(--jp-serif);

  font-size:
    clamp(29px, 2.6vw, 40px);

  font-weight: 400;
}

.medical-copy > p:not(.medical-copy-en) {
  max-width: 520px;

  margin: 0;

  color: #5f5a56;

  font-size: 14px;

  line-height: 2;
}

.medical-link {
  grid-column: 2;
  grid-row: 2 / 4;

  display: inline-flex;

  align-items: flex-end;
  justify-content: space-between;

  gap: 35px;

  min-width: 170px;

  padding-bottom: 5px;

  border-bottom:
    1px solid var(--line-strong);

  font-size: 12px;
}


/* =========================================================
14 LIFE STAGE
========================================================= */

.life-stage-title {
  max-width: 830px;
}

.life-stage-panel {
  padding-top: 50px;

  border-top:
    1px solid var(--line-strong);

  border-bottom:
    1px solid var(--line-strong);
}

.life-stage-nav {
  position: relative;

  display: grid;

  grid-template-columns:
    repeat(5, 1fr);

  margin-bottom: 58px;
}

.life-stage-line {
  position: absolute;

  top: 36px;
  right: 10%;
  left: 10%;

  height: 1px;

  background: var(--line);
}

.life-stage-progress {
  display: block;

  width: 0;
  height: 1px;

  background: var(--rose-deep);

  transition:
    width 0.45s ease;
}

.life-stage-button {
  position: relative;
  z-index: 2;

  display: flex;

  align-items: center;

  flex-direction: column;

  gap: 15px;

  padding: 0;

  background: transparent;

  border: 0;
}

.life-stage-button span {
  color: #746e68;

  font-family: var(--serif);

  font-size: 25px;
}

.life-stage-button i {
  width: 10px;
  height: 10px;

  border:
    1px solid #817a74;

  border-radius: 50%;

  background: var(--white);
}

.life-stage-button.is-active span {
  color: var(--rose-deep);
}

.life-stage-button.is-active i {
  background: var(--rose-deep);
}

.life-stage-content {
  display: grid;

  grid-template-columns:
    125px
    minmax(0, 1fr)
    minmax(310px, 0.82fr);

  gap: 55px;

  min-height: 265px;

  padding-bottom: 55px;
}

.life-stage-age {
  overflow: hidden;
}

.life-stage-age span {
  display: block;

  color:
    rgba(117, 80, 82, 0.17);

  font-family: var(--serif);

  font-size:
    clamp(42px, 3.8vw, 60px);

  line-height: 1;

  white-space: nowrap;
}

.life-stage-kicker {
  margin-bottom: 10px;

  color: #817a74;

  font-size: 10px;

  letter-spacing: 0.12em;
}

.life-stage-copy h3 {
  margin-bottom: 22px;

  font-family: var(--jp-serif);

  font-size:
    clamp(27px, 2.5vw, 38px);

  font-weight: 400;
}

.life-stage-copy > p:last-child {
  max-width: 530px;

  color: #5f5a56;

  font-size: 14px;

  line-height: 2;
}

.life-stage-links {
  border-top:
    1px solid var(--line);
}

.life-stage-links a {
  display: flex;

  align-items: center;
  justify-content: space-between;

  min-height: 64px;

  border-bottom:
    1px solid var(--line);

  font-size: 13px;
}


/* =========================================================
15 FIRST VISIT TOP
========================================================= */

.first-visit {
  position: relative;

  min-height: 850px;

  overflow: hidden;

  background: #e7dfd8;
}

.first-visit-media {
  position: absolute;

  top: 0;
  right: 0;
  bottom: 0;

  width: 67%;
}

.first-visit-media img {
  height: 100%;

  object-fit: cover;
}

.first-visit-media-label {
  position: absolute;
  z-index: 6;

  right: 16px;
  bottom: 14px;
  left: 16px;

  display: flex;

  justify-content: space-between;

  color: #fff;

  font-size: 10px;
}

.first-visit-card {
  position: relative;
  z-index: 10;

  top: 98px;

  width:
    min(720px, 51vw);

  margin-left:
    var(--page-x);

  padding:
    62px 66px;

  background:
    rgba(252, 251, 248, 0.98);

  box-shadow:
    0 25px 60px
    rgba(46, 42, 40, 0.07);
}

.first-visit-card h2 {
  margin:
    27px 0 25px;

  font-family: var(--jp-serif);

  font-size:
    clamp(34px, 2.8vw, 43px);

  font-weight: 400;

  line-height: 1.5;

  white-space: nowrap;
}

.first-visit-lead {
  max-width: 520px;

  margin-bottom: 32px;

  color: #5f5a56;

  font-size: 15px;

  line-height: 2;
}

.first-visit-questions {
  margin-bottom: 34px;

  border-top:
    1px solid var(--line);
}

.first-visit-questions a {
  display: grid;

  grid-template-columns:
    42px 1fr auto;

  align-items: center;

  min-height: 65px;

  border-bottom:
    1px solid var(--line);
}

.first-visit-questions span {
  color: #827b75;

  font-family: var(--serif);

  font-size: 14px;
}

.first-visit-questions strong {
  font-size: 14px;
  font-weight: 400;
}

.first-visit-questions b {
  font-weight: 400;
}


/* =========================================================
16 DOCTOR TOP
========================================================= */

.doctor {
  padding:
    130px
    var(--page-x);

  background: var(--base);
}

.doctor-grid {
  display: grid;

  grid-template-columns:
    85px
    minmax(380px, 0.85fr)
    minmax(470px, 1.15fr);

  gap:
    clamp(45px, 5.5vw, 90px);

  align-items: center;
}

.doctor-side {
  align-self: stretch;

  display: flex;

  align-items: center;

  flex-direction: column;

  padding-top: 10px;

  border-right:
    1px solid var(--line);
}

.doctor-side > span {
  font-family: var(--serif);

  font-size: 20px;
}

.doctor-side p {
  margin:
    45px 0 0;

  color: #766f69;

  font-size: 10px;

  writing-mode: vertical-rl;
}

.doctor-side i {
  width: 1px;
  height: 80px;

  margin:
    22px 0;

  background: var(--line-strong);
}

.doctor-side small {
  color: #847d77;

  font-family: var(--serif);

  font-size: 14px;

  writing-mode: vertical-rl;
}

.doctor-portrait {
  position: relative;

  height: 720px;

  margin: 0;
}

.doctor-portrait img {
  height: 100%;

  object-fit: cover;
}

.doctor-portrait figcaption,
.doctor-consultation figcaption {
  position: absolute;
  z-index: 6;

  right: 14px;
  bottom: 12px;
  left: 14px;

  display: flex;

  justify-content: space-between;

  color: #fff;

  font-size: 10px;
}

.doctor-copy {
  max-width: 640px;
}

.doctor-copy h2 {
  margin:
    20px 0 36px;

  font-family: var(--jp-serif);

  font-size:
    clamp(34px, 3.4vw, 49px);

  font-weight: 400;

  line-height: 1.55;
}

.doctor-name {
  display: flex;

  align-items: baseline;

  gap: 15px;

  margin-bottom: 28px;
}

.doctor-name span {
  font-size: 13px;
}

.doctor-name strong {
  font-family: var(--jp-serif);

  font-size: 30px;
  font-weight: 400;
}

.doctor-name small {
  color: #7e7771;

  font-size: 10px;
}

.doctor-description {
  max-width: 560px;

  margin-bottom: 34px;

  color: #5f5a56;

  font-size: 15px;

  line-height: 2;
}

.doctor-profile {
  margin-bottom: 38px;

  border-top:
    1px solid var(--line);
}

.doctor-profile > div {
  display: grid;

  grid-template-columns:
    135px 1fr;

  padding:
    15px 0;

  border-bottom:
    1px solid var(--line);
}

.doctor-profile dt {
  color: #817a74;

  font-size: 10px;
}

.doctor-profile dd {
  margin: 0;

  font-size: 14px;
}

.doctor-consultation {
  position: relative;

  width: 72%;
  height: 500px;

  margin:
    110px 0 0 auto;
}

.doctor-consultation img {
  height: 100%;

  object-fit: cover;
}


/* =========================================================
17 CHECKUP TOP
========================================================= */

.checkup {
  display: grid;

  grid-template-columns:
    minmax(0, 1.1fr)
    minmax(500px, 0.9fr);

  min-height: 760px;

  color: #fff;
  background: var(--rose-deep);
}

.checkup-media {
  min-height: 760px;
}

.checkup-media::after {
  background: var(--rose-deep);
}

.checkup-media img {
  height: 100%;

  object-fit: cover;
}

.checkup-copy {
  display: flex;

  justify-content: center;

  flex-direction: column;

  padding:
    clamp(60px, 6vw, 100px);
}

.checkup-copy h2 {
  margin:
    24px 0 26px;

  font-family: var(--jp-serif);

  font-size:
    clamp(40px, 4.3vw, 60px);

  font-weight: 400;
}

.checkup-lead {
  max-width: 470px;

  margin-bottom: 42px;

  color:
    rgba(255, 255, 255, 0.82);

  font-size: 15px;

  line-height: 2;
}

.checkup-list {
  margin-bottom: 42px;

  border-top:
    1px solid rgba(255, 255, 255, 0.26);
}

.checkup-list a {
  display: grid;

  grid-template-columns:
    44px 1fr auto;

  align-items: center;

  min-height: 67px;

  border-bottom:
    1px solid rgba(255, 255, 255, 0.2);
}

.checkup-list span {
  font-family: var(--serif);

  font-size: 14px;
}

.checkup-list strong {
  font-family: var(--jp-serif);

  font-size: 17px;
  font-weight: 400;
}

.checkup-button {
  display: flex;

  align-items: center;
  justify-content: space-between;

  width: 225px;
  min-height: 60px;

  padding-inline: 20px;

  color: var(--rose-deep);
  background: #fff;

  font-size: 13px;
  font-weight: 500;
}


/* =========================================================
18 CLINIC
========================================================= */

.clinic-gallery {
  display: grid;

  grid-template-columns:
    1.25fr 0.75fr;

  grid-template-rows:
    420px 320px;

  gap: 20px;
}

.clinic-gallery figure {
  position: relative;

  margin: 0;

  overflow: hidden;
}

.clinic-gallery img {
  height: 100%;

  object-fit: cover;
}

.clinic-main {
  grid-row: 1 / 3;
}

.clinic-room {
  grid-column: 2;
  grid-row: 1;
}

.clinic-detail {
  grid-column: 2;
  grid-row: 2;

  width: 74%;

  justify-self: end;
}

.clinic-gallery figcaption {
  position: absolute;
  z-index: 6;

  right: 14px;
  bottom: 12px;
  left: 14px;

  display: flex;

  justify-content: space-between;

  color: #fff;

  font-size: 10px;
}


/* =========================================================
19 FAQ COMMON
========================================================= */

.faq-layout {
  display: grid;

  grid-template-columns:
    0.7fr 1.3fr;

  gap:
    clamp(80px, 9vw, 150px);
}

.faq-side {
  position: sticky;

  top: 130px;

  align-self: start;
}

.faq-side h2 {
  margin:
    35px 0 22px;

  font-family: var(--jp-serif);

  font-size:
    clamp(40px, 4vw, 57px);

  font-weight: 400;
}

.faq-side > p:not(.section-en) {
  max-width: 360px;

  margin-bottom: 34px;

  color: #5f5a56;

  font-size: 15px;

  line-height: 2;
}

.faq-list {
  border-top:
    1px solid var(--line-strong);
}

.faq-item {
  border-bottom:
    1px solid var(--line);
}

.faq-question {
  display: grid;

  grid-template-columns:
    52px 1fr 36px;

  align-items: center;

  width: 100%;
  min-height: 92px;

  padding: 0;

  text-align: left;

  background: transparent;

  border: 0;
}

.faq-question span {
  color: #817a74;

  font-family: var(--serif);

  font-size: 15px;
}

.faq-question strong {
  padding-right: 20px;

  font-family: var(--jp-serif);

  font-size:
    clamp(16px, 1.35vw, 19px);

  font-weight: 400;

  line-height: 1.7;
}

.faq-question b {
  display: grid;

  place-items: center;

  width: 34px;
  height: 34px;

  border:
    1px solid var(--line);

  border-radius: 50%;

  font-size: 15px;
  font-weight: 300;

  transition:
    color 0.25s ease,
    background 0.25s ease,
    transform 0.3s ease;
}

.faq-item.is-open
.faq-question b {
  color: #fff;
  background: var(--rose-deep);

  transform: rotate(45deg);
}

.faq-answer {
  display: grid;

  grid-template-rows: 0fr;

  transition:
    grid-template-rows 0.35s ease;
}

.faq-answer > div {
  overflow: hidden;
}

.faq-item.is-open
.faq-answer {
  grid-template-rows: 1fr;
}

.faq-answer p {
  max-width: 700px;

  margin:
    0 0 34px 52px;

  color: #5f5a56;

  font-size: 14px;

  line-height: 2;
}


/* =========================================================
20 ACCESS TOP
========================================================= */

.access-section {
  display: grid;

  grid-template-columns:
    minmax(590px, 0.9fr)
    minmax(0, 1.1fr);

  background: var(--base);
}

.access-info {
  display: grid;

  align-content: center;

  gap: 46px;

  min-height: 700px;

  padding:
    75px
    clamp(50px, 5.5vw, 92px);
}

.access-heading h2 {
  margin:
    35px 0 0;

  font-family: var(--jp-serif);

  font-size:
    clamp(33px, 2.7vw, 42px);

  font-weight: 400;

  line-height: 1.45;

  white-space: nowrap;
}

.access-name {
  margin-bottom: 20px;

  font-family: var(--serif);

  font-size: 25px;
}

.access-clinic address {
  margin-bottom: 30px;

  color: #5f5a56;

  font-size: 14px;

  line-height: 2;
}

.access-clinic dl {
  margin-bottom: 36px;

  border-top:
    1px solid var(--line);
}

.access-clinic dl > div {
  display: grid;

  grid-template-columns:
    110px 1fr;

  padding:
    14px 0;

  border-bottom:
    1px solid var(--line);
}

.access-clinic dt {
  color: #817a74;

  font-size: 10px;
}

.access-clinic dd {
  margin: 0;

  font-size: 14px;

  line-height: 1.8;
}

.access-map {
  position: relative;

  min-height: 700px;
}

.access-map iframe {
  display: block;

  width: 100%;
  height: 100%;

  min-height: 700px;

  border: 0;

  filter:
    grayscale(0.2)
    saturate(0.72);
}

.access-map-label {
  position: absolute;

  right: 18px;
  bottom: 16px;
  left: 18px;

  display: flex;

  justify-content: space-between;

  padding:
    8px 11px;

  color: #fff;
  background:
    rgba(46, 42, 40, 0.4);

  font-size: 9px;
}

.access-route {
  grid-column: 1 / 3;

  padding:
    92px
    var(--page-x)
    105px;
}

.access-route-title {
  margin-bottom: 70px;
}

.access-route-title p {
  margin-bottom: 27px;

  color: #817a74;

  font-size: 11px;

  letter-spacing: 0.1em;
}

.access-route-title h3 {
  margin: 0;

  font-family: var(--jp-serif);

  font-size:
    clamp(30px, 3.2vw, 45px);

  font-weight: 400;
}

.route-line {
  width: 100%;
  height: 1px;

  margin-bottom: 32px;

  overflow: hidden;

  background: var(--line);
}

.route-line span {
  display: block;

  width: 0;
  height: 1px;

  background: var(--rose-deep);

  transition:
    width 1.1s ease;
}

.access-route.is-visible
.route-line span {
  width: 100%;
}

.route-grid {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);
}

.route-grid article {
  position: relative;

  min-height: 165px;

  padding:
    15px 50px 0 0;
}

.route-grid article + article {
  padding-left: 38px;
}

.route-grid article::before {
  position: absolute;

  top: -39px;
  left: 0;

  width: 11px;
  height: 11px;

  border:
    1px solid var(--rose-deep);

  border-radius: 50%;

  background: var(--base);

  content: "";
}

.route-grid .is-goal::before {
  background: var(--rose-deep);
}

.route-grid article > span {
  display: block;

  margin-bottom: 12px;

  color: #817a74;

  font-family: var(--serif);

  font-size: 15px;
}

.route-grid strong {
  display: block;

  margin-bottom: 9px;

  font-family: var(--jp-serif);

  font-size:
    clamp(18px, 1.5vw, 23px);

  font-weight: 400;
}

.route-grid p {
  color: #5f5a56;

  font-size: 14px;
}


/* =========================================================
21 RESERVATION
========================================================= */

.reservation-section {
  position: relative;

  min-height: 630px;

  overflow: hidden;

  color: #fff;
  background: var(--rose-dark);
}

.reservation-watermark {
  position: absolute;

  right: 0;
  bottom: -20px;

  color:
    rgba(255, 255, 255, 0.018);

  font-family: var(--serif);

  font-size:
    clamp(130px, 17vw, 270px);

  line-height: 0.8;

  pointer-events: none;
}

.reservation-inner {
  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    110px
    minmax(0, 1fr)
    320px;

  align-items: center;

  gap: 60px;

  width:
    min(calc(100% - 80px), var(--max));

  min-height: 630px;

  margin-inline: auto;
}

.reservation-index {
  align-self: start;

  padding-top: 110px;
}

.reservation-index span {
  font-family: var(--serif);

  font-size: 20px;
}

.reservation-index p {
  margin:
    13px 0 18px;

  color:
    rgba(255, 255, 255, 0.62);

  font-size: 10px;

  letter-spacing: 0.14em;

  writing-mode: vertical-rl;
}

.reservation-brand-dot {
  display: block;

  width: 8px;
  height: 8px;

  border-radius: 50%;

  background: var(--rose-soft);
}

.reservation-brand-label {
  display: block;

  margin-bottom: 15px;

  color:
    rgba(255, 255, 255, 0.66);

  font-family: var(--serif);

  font-size: 13px;

  letter-spacing: 0.09em;
}

.reservation-main {
  max-width: 850px;
}

.reservation-main h2 {
  margin-bottom: 26px;

  font-family: var(--jp-serif);

  font-size:
    clamp(38px, 3.8vw, 56px);

  font-weight: 400;

  line-height: 1.65;
  letter-spacing: -0.03em;
}

.reservation-main h2 br {
  display: block;
}

.reservation-main p {
  color:
    rgba(255, 255, 255, 0.75);

  font-size: 14px;

  line-height: 2;
}

.reservation-actions {
  display: flex;

  align-items: center;

  flex-direction: column;

  gap: 34px;
}

.reservation-circle {
  display: flex;

  align-items: center;
  justify-content: space-between;

  width: 260px;
  height: 260px;

  padding-inline: 42px;

  color: #fff;
  background: transparent;

  border:
    1px solid rgba(255, 255, 255, 0.4);

  border-radius: 50%;

  transition:
    color 0.3s ease,
    background 0.3s ease,
    transform 0.3s ease;
}

.reservation-circle:hover {
  color: var(--rose-dark);
  background: #fff;

  transform: scale(0.97);
}

.reservation-circle b {
  font-weight: 400;
}

.reservation-sub-links {
  display: flex;

  gap: 24px;
}

.reservation-sub-links a {
  display: inline-flex;

  align-items: center;

  gap: 18px;

  padding-bottom: 5px;

  border-bottom:
    1px solid rgba(255, 255, 255, 0.4);

  color:
    rgba(255, 255, 255, 0.8);

  font-size: 12px;
}


/* =========================================================
22 FOOTER
========================================================= */

.site-footer {
  padding:
    78px
    var(--page-x)
    25px;

  background: #e8e0d9;
}

.footer-top {
  display: grid;

  grid-template-columns:
    1fr 1fr 0.8fr;

  gap: 80px;

  padding-bottom: 68px;
}

.footer-logo {
  display: inline-flex;

  flex-direction: column;
}

.footer-logo > span {
  font-family: var(--serif);

  font-size: 41px;

  letter-spacing: 0.14em;
}

.footer-logo > span span {
  color: var(--rose-deep);
}

.footer-logo small {
  color: #756e68;

  font-size: 8px;
}

.footer-brand > p {
  margin:
    25px 0 0;

  color: #5f5a56;

  font-family: var(--jp-serif);

  font-size: 14px;

  line-height: 1.9;
}

.footer-nav {
  display: grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap:
    13px 35px;

  align-content: start;
}

.footer-nav a {
  color: #5f5a55;

  font-size: 12px;
}

.footer-info p {
  margin-bottom: 20px;

  color: #5f5a55;

  font-size: 12px;

  line-height: 2;
}

.footer-bottom {
  display: grid;

  grid-template-columns:
    auto 1fr auto;

  gap: 35px;

  padding-top: 20px;

  border-top:
    1px solid var(--line);
}

.footer-bottom p,
.footer-bottom a {
  margin: 0;

  color: #77716b;

  font-size: 10px;
}

.footer-bottom p:nth-child(2) {
  text-align: center;
}


/* =========================================================
23 MODAL
========================================================= */

.reservation-modal {
  position: fixed;
  z-index: 6000;

  inset: 0;

  display: grid;

  place-items: center;

  visibility: hidden;

  padding: 20px;

  opacity: 0;

  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}

.reservation-modal.is-open {
  visibility: visible;

  opacity: 1;
}

.reservation-modal-backdrop {
  position: absolute;

  inset: 0;

  background:
    rgba(41, 39, 37, 0.68);

  backdrop-filter: blur(10px);
}

.reservation-modal-panel {
  position: relative;
  z-index: 2;

  width:
    min(100%, 480px);

  padding:
    55px 50px 45px;

  background: var(--white);
}

.reservation-modal-close {
  position: absolute;

  top: 13px;
  right: 13px;

  width: 38px;
  height: 38px;

  background: transparent;

  border:
    1px solid var(--line);
}

.reservation-modal-label {
  display: block;

  margin-bottom: 12px;

  color: var(--rose-deep);

  font-family: var(--serif);

  font-size: 12px;
}

.reservation-modal-panel h2 {
  margin-bottom: 18px;

  font-family: var(--jp-serif);

  font-size: 36px;
  font-weight: 400;
}

.reservation-modal-panel > p {
  color: #5f5a56;

  font-size: 14px;

  line-height: 2;
}

.reservation-modal-info {
  display: grid;

  grid-template-columns:
    repeat(2, 1fr);

  margin:
    30px 0;

  border-top:
    1px solid var(--line);

  border-left:
    1px solid var(--line);
}

.reservation-modal-info > div {
  padding: 18px;

  border-right:
    1px solid var(--line);

  border-bottom:
    1px solid var(--line);
}

.reservation-modal-info span {
  display: block;

  color: #817a74;

  font-size: 10px;
}

.reservation-modal-info strong {
  font-size: 13px;
  font-weight: 500;
}

.reservation-modal-button {
  width: 100%;
  min-height: 54px;

  color: #fff;
  background: var(--rose-deep);

  border: 0;
}


/* =========================================================
24 SUBPAGE HERO
========================================================= */

.subpage {
  padding-top: 82px;

  background: var(--base);
}

.sub-hero {
  position: relative;

  min-height: 650px;

  padding:
    92px
    var(--page-x)
    88px;

  overflow: hidden;

  background: var(--base);

  border-bottom:
    1px solid var(--line);
}

.sub-hero::after {
  display: none;
}

.sub-hero-inner {
  position: relative;

  display: flex;

  min-height: 470px;

  flex-direction: column;
}

.sub-hero-index {
  flex: 0 0 auto;
}

.sub-hero-copy {
  position: static;

  width:
    min(850px, 74%);

  max-width: none;

  margin-top: auto;

  padding-top: 70px;
}

.sub-hero-kicker {
  margin-bottom: 18px;

  color: var(--rose-deep);

  font-family: var(--serif);

  font-size: 14px;

  letter-spacing: 0.12em;
}

.sub-hero-copy h1 {
  margin:
    0 0 29px;

  font-family: var(--jp-serif);

  font-size:
    clamp(48px, 5vw, 73px);

  font-weight: 400;

  line-height: 1.32;
  letter-spacing: -0.035em;
}

.sub-hero-lead {
  max-width: 650px;

  margin: 0;

  color: #5f5a56;

  font-size: 15px;

  line-height: 2.1;
}

.sub-hero-side {
  position: absolute;

  right: 0;
  bottom: 95px;

  display: flex;

  align-items: flex-end;

  flex-direction: column;

  gap: 12px;

  text-align: right;
}

.sub-hero-side > span {
  color:
    rgba(117, 80, 82, 0.13);

  font-family: var(--serif);

  font-size: 43px;

  line-height: 1;
}

.sub-hero-side p {
  margin: 0;

  color: #817a74;

  font-size: 10px;

  line-height: 1.8;
  letter-spacing: 0.13em;
}


/* =========================================================
25 GENERIC INTRO
========================================================= */

.care-intro,
.pregnancy-intro,
.screening-intro,
.first-guide-intro {
  padding:
    110px
    var(--page-x);

  background: var(--white);
}

.care-intro-inner,
.pregnancy-intro-inner,
.screening-intro-inner,
.first-guide-intro-inner {
  display: grid;

  grid-template-columns:
    minmax(600px, 1.12fr)
    minmax(380px, 0.88fr);

  gap:
    clamp(65px, 7vw, 115px);

  align-items: start;
}

.care-intro-heading,
.pregnancy-intro-heading,
.screening-intro-heading,
.first-guide-intro-heading {
  max-width: 760px;
}

.care-intro-heading h2,
.pregnancy-intro-heading h2,
.screening-intro-heading h2,
.first-guide-intro-heading h2 {
  margin:
    34px 0 0;

  font-family: var(--jp-serif);

  font-size:
    clamp(34px, 3.05vw, 46px);

  font-weight: 400;

  line-height: 1.68;
  letter-spacing: -0.025em;
}

.care-intro-body,
.pregnancy-intro-body,
.screening-intro-body,
.first-guide-intro-body {
  max-width: 600px;

  padding-top: 115px;
}

.care-intro-body p,
.pregnancy-intro-body p,
.screening-intro-body p,
.first-guide-intro-body p {
  margin-bottom: 22px;

  color: #5f5a56;

  font-size: 15px;

  line-height: 2.1;
}

.care-intro-body p:last-child,
.pregnancy-intro-body p:last-child,
.screening-intro-body p:last-child,
.first-guide-intro-body p:last-child {
  margin-bottom: 0;
}


/* =========================================================
26 GYNECOLOGY MENU
========================================================= */

.care-index-section {
  padding:
    105px
    var(--page-x)
    115px;

  background: var(--soft);
}

.care-index-heading {
  max-width: 720px;

  margin-bottom: 58px;
}

.care-index-heading h2 {
  margin:
    34px 0 19px;

  font-family: var(--jp-serif);

  font-size:
    clamp(36px, 3.4vw, 50px);

  font-weight: 400;
}

.care-index-heading > p:last-child {
  max-width: 540px;

  margin: 0;

  color: #5f5a56;

  font-size: 15px;

  line-height: 2;
}

.care-index-grid {
  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  border-top:
    1px solid var(--line-strong);
}

.care-index-grid a {
  position: relative;

  display: flex;

  min-height: 225px;

  flex-direction: column;

  padding:
    29px 28px 25px;

  border-right:
    1px solid var(--line);

  border-bottom:
    1px solid var(--line);

  transition:
    color 0.3s ease,
    background 0.3s ease,
    transform 0.3s ease;
}

.care-index-grid a:nth-child(4n + 1) {
  border-left:
    1px solid var(--line);
}

.care-index-grid a:hover {
  z-index: 2;

  color: #fff;
  background: var(--rose-deep);

  transform: translateY(-4px);
}

.care-index-grid a > span {
  display: block;

  margin-bottom: 31px;

  color: #817a74;

  font-family: var(--serif);

  font-size: 17px;
}

.care-index-grid small {
  display: block;

  margin-bottom: 8px;

  color: #817a74;

  font-size: 10px;

  line-height: 1.5;
  letter-spacing: 0.13em;
}

.care-index-grid strong {
  display: block;

  max-width: 230px;

  padding-right: 20px;

  font-family: var(--jp-serif);

  font-size:
    clamp(18px, 1.45vw, 22px);

  font-weight: 400;

  line-height: 1.55;
}

.care-index-grid b {
  position: absolute;

  right: 25px;
  bottom: 24px;

  color: var(--rose-deep);

  font-size: 16px;
  font-weight: 400;
}

.care-index-grid a:hover > span,
.care-index-grid a:hover small,
.care-index-grid a:hover b {
  color:
    rgba(255, 255, 255, 0.75);
}


/* =========================================================
27 GENERIC VISUAL
========================================================= */

.care-visual-section,
.pregnancy-visual,
.screening-visual,
.doctor-consultation-section,
.first-guide-visual,
.faq-visual-section {
  display: grid;

  grid-template-columns:
    minmax(0, 1.15fr)
    minmax(560px, 0.85fr);

  min-height: 680px;

  background: var(--soft-2);
}

.care-visual,
.pregnancy-visual-image,
.screening-visual-image,
.doctor-consultation-large,
.first-guide-visual-image,
.faq-visual-image {
  position: relative;

  min-height: 680px;

  margin: 0;
}

.care-visual img,
.pregnancy-visual-image img,
.screening-visual-image img,
.doctor-consultation-large img,
.first-guide-visual-image img,
.faq-visual-image img {
  height: 100%;

  object-fit: cover;
}

.care-visual figcaption,
.pregnancy-visual-image figcaption,
.screening-visual-image figcaption,
.doctor-consultation-large figcaption,
.first-guide-visual-image figcaption,
.faq-visual-image figcaption {
  position: absolute;
  z-index: 6;

  right: 16px;
  bottom: 14px;
  left: 16px;

  display: flex;

  justify-content: space-between;

  color: #fff;

  font-size: 10px;
}

.care-visual-copy,
.pregnancy-visual-copy,
.screening-visual-copy,
.doctor-consultation-copy,
.first-guide-visual-copy,
.faq-visual-copy {
  display: flex;

  justify-content: center;

  flex-direction: column;

  padding:
    clamp(58px, 6vw, 92px);
}

.care-visual-copy > p:first-child,
.pregnancy-visual-copy > p:first-child,
.screening-visual-copy > p:first-child,
.doctor-consultation-copy > p:first-child,
.first-guide-visual-copy > p:first-child,
.faq-visual-copy > p:first-child {
  margin-bottom: 23px;

  color: var(--rose-deep);

  font-family: var(--serif);

  font-size: 12px;

  letter-spacing: 0.14em;
}

.care-visual-copy h2,
.pregnancy-visual-copy h2,
.screening-visual-copy h2,
.doctor-consultation-copy h2,
.first-guide-visual-copy h2,
.faq-visual-copy h2 {
  width: 100%;
  max-width: 620px;

  margin-bottom: 28px;

  font-family: var(--jp-serif);

  font-size:
    clamp(31px, 2.55vw, 40px);

  font-weight: 400;

  line-height: 1.78;
  letter-spacing: -0.025em;
}

.care-visual-copy > p:last-child,
.pregnancy-visual-copy > p:last-child,
.screening-visual-copy > p:last-child,
.doctor-consultation-copy > p:last-child,
.first-guide-visual-copy > p:last-child,
.faq-visual-copy > p:last-child {
  max-width: 580px;

  margin: 0;

  color: #5f5a56;

  font-size: 15px;

  line-height: 2.1;
}


/* =========================================================
28 GYNECOLOGY DETAILS
========================================================= */

.care-detail {
  padding:
    105px
    var(--page-x)
    110px;

  background: var(--base);
}

.care-detail-soft {
  background: var(--soft);
}

.care-detail-inner {
  display: grid;

  grid-template-columns:
    115px
    minmax(0, 950px);

  gap:
    clamp(38px, 4vw, 68px);

  justify-content: start;

  width: 100%;
  max-width: 1180px;
}

.care-detail-number {
  padding-top: 9px;
}

.care-detail-number span {
  display: block;

  color: var(--rose-deep);

  font-family: var(--serif);

  font-size: 31px;
}

.care-detail-number small {
  display: block;

  margin-top: 8px;

  color: #817a74;

  font-size: 10px;

  line-height: 1.6;
  letter-spacing: 0.12em;
}

.care-detail-main {
  width: 100%;
  max-width: 950px;
}

.care-detail-main h2 {
  margin-bottom: 25px;

  font-family: var(--jp-serif);

  font-size:
    clamp(34px, 3.15vw, 47px);

  font-weight: 400;

  line-height: 1.5;
  letter-spacing: -0.025em;
}

.care-detail-lead {
  max-width: 800px;

  margin-bottom: 32px;

  color: #5f5a56;

  font-size: 15px;

  line-height: 2.1;
}

.care-symptom-list {
  display: flex;

  flex-wrap: wrap;

  gap:
    4px 22px;

  max-width: 830px;

  margin:
    0 0 30px;

  padding:
    18px 0;

  border-top:
    1px solid var(--line);

  border-bottom:
    1px solid var(--line);
}

.care-symptom-list span {
  position: relative;

  padding-left: 14px;

  color: #514b47;

  font-size: 14px;

  line-height: 2;
}

.care-symptom-list span::before {
  position: absolute;

  top: 13px;
  left: 0;

  width: 4px;
  height: 4px;

  border-radius: 50%;

  background: var(--rose);

  content: "";
}

.care-detail-note {
  max-width: 760px;

  padding-top: 21px;

  border-top:
    1px solid var(--rose-soft);
}

.care-detail-note h3 {
  margin-bottom: 10px;

  font-family: var(--jp-serif);

  font-size: 18px;
  font-weight: 500;
}

.care-detail-note p {
  margin: 0;

  color: #5f5a56;

  font-size: 14px;

  line-height: 2.05;
}


/* =========================================================
29 PILL FEATURE
========================================================= */

.care-feature {
  padding:
    110px
    var(--page-x);

  background: var(--soft-2);
}

.care-feature-inner {
  display: grid;

  grid-template-columns:
    minmax(540px, 1.02fr)
    minmax(470px, 0.98fr);

  gap:
    clamp(65px, 7vw, 115px);

  align-items: center;

  max-width: 1320px;
}

.care-feature-image {
  position: relative;

  height: 650px;

  margin: 0;
}

.care-feature-image::after {
  background: var(--soft-2);
}

.care-feature-image img {
  height: 100%;

  object-fit: cover;
}

.care-feature-copy {
  max-width: 600px;
}

.care-feature-copy h2 {
  margin:
    34px 0 24px;

  font-family: var(--jp-serif);

  font-size:
    clamp(35px, 3.2vw, 47px);

  font-weight: 400;

  line-height: 1.55;
}

.care-feature-copy > p:not(.section-en) {
  max-width: 560px;

  color: #5f5a56;

  font-size: 15px;

  line-height: 2.1;
}

.care-feature-list {
  margin:
    32px 0;

  border-top:
    1px solid var(--line);
}

.care-feature-list > div {
  display: grid;

  grid-template-columns:
    58px 1fr;

  align-items: center;

  min-height: 66px;

  border-bottom:
    1px solid var(--line);
}

.care-feature-list span {
  color: var(--rose-deep);

  font-family: var(--serif);

  font-size: 15px;
}

.care-feature-list strong {
  font-family: var(--jp-serif);

  font-size: 16px;
  font-weight: 500;
}

.care-feature-note {
  padding-top: 20px;

  border-top:
    1px solid var(--line);
}


/* =========================================================
30 EXAMINATION
========================================================= */

.examination-section {
  padding:
    105px
    var(--page-x)
    115px;

  background: var(--white);
}

.examination-heading {
  max-width: 720px;

  margin-bottom: 65px;
}

.examination-heading h2 {
  margin:
    34px 0 18px;

  font-family: var(--jp-serif);

  font-size:
    clamp(36px, 3.3vw, 49px);

  font-weight: 400;
}

.examination-heading > p:last-child {
  max-width: 550px;

  margin: 0;

  color: #5f5a56;

  font-size: 15px;

  line-height: 2;
}

.examination-grid {
  position: relative;

  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  max-width: 1240px;

  border-top:
    1px solid var(--line-strong);
}

.examination-grid::before {
  position: absolute;

  top: -1px;
  left: 0;

  width: 25%;
  height: 2px;

  background: var(--rose);

  content: "";
}

.examination-grid article {
  position: relative;

  min-height: 280px;

  padding:
    30px 29px;

  border-right:
    1px solid var(--line);
}

.examination-grid article:first-child {
  border-left:
    1px solid var(--line);
}

.examination-grid article > span {
  display: block;

  margin-bottom: 39px;

  color: var(--rose-deep);

  font-family: var(--serif);

  font-size: 17px;
}

.examination-grid small {
  display: block;

  color: #817a74;

  font-size: 10px;

  letter-spacing: 0.12em;
}

.examination-grid h3 {
  margin:
    8px 0 16px;

  font-family: var(--jp-serif);

  font-size: 20px;
  font-weight: 500;
}

.examination-grid p {
  max-width: 245px;

  margin: 0;

  color: #5f5a56;

  font-size: 14px;

  line-height: 2;
}


/* =========================================================
31 SHARED IMAGE COPY
========================================================= */

.symptoms-guide,
.care-first-visit,
.bridal-check-section,
.screening-room,
.screening-first,
.doctor-care-visual,
.first-internal,
.first-consultation,
.faq-consultation,
.access-arrival {
  padding:
    115px
    var(--page-x);

  background: var(--soft);
}

.symptoms-guide-inner,
.care-first-visit-inner,
.bridal-check-inner,
.screening-room-inner,
.screening-first-inner,
.doctor-care-visual-inner,
.first-internal-inner,
.first-consultation-inner,
.faq-consultation-inner,
.access-arrival-inner {
  display: grid;

  grid-template-columns:
    minmax(430px, 0.82fr)
    minmax(590px, 1.18fr);

  gap:
    clamp(65px, 7vw, 115px);

  align-items: center;
}

.screening-first-inner,
.first-consultation-inner,
.faq-consultation-inner,
.access-arrival-inner {
  grid-template-columns:
    minmax(590px, 1.15fr)
    minmax(430px, 0.85fr);
}

.symptoms-guide-photo,
.care-first-image,
.bridal-check-image,
.screening-room-image,
.screening-first-image,
.doctor-care-visual-image,
.first-internal-image,
.first-consultation-image,
.faq-consultation-image,
.access-arrival-image {
  position: relative;

  height: 600px;

  margin: 0;
}

.symptoms-guide-photo img,
.care-first-image img,
.bridal-check-image img,
.screening-room-image img,
.screening-first-image img,
.doctor-care-visual-image img,
.first-internal-image img,
.first-consultation-image img,
.faq-consultation-image img,
.access-arrival-image img {
  height: 100%;

  object-fit: cover;
}

.symptoms-guide-copy h2,
.care-first-copy h2,
.bridal-check-copy h2,
.screening-room-copy h2,
.screening-first-copy h2,
.doctor-care-visual-copy h2,
.first-internal-copy h2,
.first-consultation-copy h2,
.faq-consultation-copy h2,
.access-arrival-copy h2 {
  max-width: 650px;

  margin:
    34px 0 24px;

  font-family: var(--jp-serif);

  font-size:
    clamp(32px, 3vw, 45px);

  font-weight: 400;

  line-height: 1.65;
  letter-spacing: -0.025em;
}

.symptoms-guide-copy p,
.care-first-copy p,
.bridal-check-copy p,
.screening-room-copy p,
.screening-first-copy p,
.doctor-care-visual-copy p,
.first-internal-copy p,
.first-consultation-copy p,
.faq-consultation-copy p,
.access-arrival-copy p {
  max-width: 590px;

  color: #5f5a56;

  font-size: 15px;

  line-height: 2.05;
}

.symptoms-guide-copy h2 {
  font-size:
    clamp(31px, 2.75vw, 41px);
}

.access-arrival-copy h2 {
  font-size:
    clamp(31px, 2.75vw, 41px);

  white-space: nowrap;
}


/* =========================================================
32 PREGNANCY / CHECKUP MENU
========================================================= */

.pregnancy-menu,
.screening-menu {
  padding:
    105px
    var(--page-x)
    115px;

  background: var(--soft);
}

.pregnancy-menu-heading,
.screening-menu-heading {
  max-width: 720px;

  margin-bottom: 60px;
}

.pregnancy-menu-heading h2,
.screening-menu-heading h2 {
  margin:
    34px 0 18px;

  font-family: var(--jp-serif);

  font-size:
    clamp(36px, 3.4vw, 50px);

  font-weight: 400;
}

.pregnancy-menu-heading > p:last-child,
.screening-menu-heading > p:last-child {
  max-width: 550px;

  color: #5f5a56;

  font-size: 15px;

  line-height: 2;
}

.pregnancy-menu-grid,
.screening-menu-grid {
  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  border-top:
    1px solid var(--line-strong);
}

.pregnancy-menu-grid a,
.screening-menu-grid a {
  position: relative;

  display: flex;

  min-height: 270px;

  flex-direction: column;

  padding:
    28px 27px;

  border-right:
    1px solid var(--line);

  transition:
    color 0.3s ease,
    background 0.3s ease;
}

.pregnancy-menu-grid a:first-child,
.screening-menu-grid a:first-child {
  border-left:
    1px solid var(--line);
}

.pregnancy-menu-grid a:hover,
.screening-menu-grid a:hover {
  color: #fff;
  background: var(--rose-deep);
}

.pregnancy-menu-grid a > span,
.screening-menu-grid a > span {
  display: block;

  margin-bottom: 36px;

  color: #817a74;

  font-family: var(--serif);

  font-size: 17px;
}

.pregnancy-menu-grid small,
.screening-menu-grid small {
  display: block;

  margin-bottom: 8px;

  color: #817a74;

  font-size: 10px;

  letter-spacing: 0.12em;
}

.pregnancy-menu-grid strong,
.screening-menu-grid strong {
  display: block;

  margin-bottom: 14px;

  font-family: var(--jp-serif);

  font-size: 21px;
  font-weight: 400;
}

.pregnancy-menu-grid p,
.screening-menu-grid p {
  max-width: 240px;

  color: #5f5a56;

  font-size: 13px;

  line-height: 1.9;
}

.pregnancy-menu-grid b,
.screening-menu-grid b {
  position: absolute;

  right: 25px;
  bottom: 23px;

  color: var(--rose-deep);

  font-weight: 400;
}

.pregnancy-menu-grid a:hover > span,
.pregnancy-menu-grid a:hover small,
.pregnancy-menu-grid a:hover p,
.pregnancy-menu-grid a:hover b,
.screening-menu-grid a:hover > span,
.screening-menu-grid a:hover small,
.screening-menu-grid a:hover p,
.screening-menu-grid a:hover b {
  color:
    rgba(255, 255, 255, 0.75);
}


/* =========================================================
33 PREGNANCY / CHECKUP DETAIL
========================================================= */

.pregnancy-detail,
.screening-detail {
  padding:
    105px
    var(--page-x)
    110px;

  background: var(--base);
}

.pregnancy-detail-soft,
.screening-detail-soft {
  background: var(--soft);
}

.pregnancy-detail-inner,
.screening-detail-inner {
  display: grid;

  grid-template-columns:
    115px
    minmax(0, 950px);

  gap:
    clamp(38px, 4vw, 68px);

  justify-content: start;

  width: 100%;
  max-width: 1180px;
}

.pregnancy-detail-index,
.screening-detail-index {
  padding-top: 9px;
}

.pregnancy-detail-index span,
.screening-detail-index span {
  display: block;

  color: var(--rose-deep);

  font-family: var(--serif);

  font-size: 31px;
}

.pregnancy-detail-index small,
.screening-detail-index small {
  display: block;

  max-width: 110px;

  margin-top: 8px;

  color: #817a74;

  font-size: 10px;

  line-height: 1.65;
  letter-spacing: 0.09em;
}

.pregnancy-detail-main,
.screening-detail-main {
  width: 100%;
  max-width: 950px;
}

.pregnancy-detail-main h2,
.screening-detail-main h2 {
  margin-bottom: 24px;

  font-family: var(--jp-serif);

  font-size:
    clamp(35px, 3.2vw, 48px);

  font-weight: 400;

  line-height: 1.5;
}

.pregnancy-detail-lead,
.screening-detail-lead {
  max-width: 800px;

  margin-bottom: 38px;

  color: #5f5a56;

  font-size: 15px;

  line-height: 2.1;
}


/* =========================================================
34 SCREENING INFO
========================================================= */

.screening-info-grid,
.pregnancy-point-grid {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 0;

  max-width: 930px;

  border-top:
    1px solid var(--line-strong);

  border-bottom:
    1px solid var(--line);
}

.screening-info-grid article,
.pregnancy-point-grid article {
  position: relative;

  min-height: 245px;

  padding:
    31px 29px 28px;

  border-right:
    1px solid var(--line);
}

.screening-info-grid article:first-child,
.pregnancy-point-grid article:first-child {
  border-left:
    1px solid var(--line);
}

.screening-info-grid article::before,
.pregnancy-point-grid article::before {
  position: absolute;

  top: -1px;
  left: 0;

  width: 42px;
  height: 2px;

  background: var(--rose);

  content: "";
}

.screening-info-grid article > span,
.pregnancy-point-grid article > span {
  display: block;

  margin-bottom: 14px;

  color: #817a74;

  font-size: 10px;

  letter-spacing: 0.12em;
}

.screening-info-grid h3,
.pregnancy-point-grid h3 {
  margin-bottom: 27px;

  font-family: var(--jp-serif);

  font-size: 20px;
  font-weight: 500;
}

.screening-info-grid p,
.pregnancy-point-grid p {
  margin: 0;

  color: #5f5a56;

  font-size: 14px;

  line-height: 2;
}

.screening-detail-note {
  max-width: 930px;

  padding-top: 22px;
}

.screening-detail-note strong {
  display: block;

  margin-bottom: 8px;

  font-family: var(--jp-serif);

  font-size: 17px;
  font-weight: 500;
}

.screening-detail-note p {
  margin: 0;

  color: #5f5a56;

  font-size: 14px;

  line-height: 2;
}

.screening-test-list {
  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  margin:
    35px 0;

  border-top:
    1px solid var(--line);
}

.screening-test-list > div {
  min-height: 120px;

  padding: 20px;

  border-right:
    1px solid var(--line);
}

.screening-test-list > div:first-child {
  border-left:
    1px solid var(--line);
}

.screening-test-list span {
  display: block;

  margin-bottom: 20px;

  color: #817a74;

  font-family: var(--serif);

  font-size: 14px;
}

.screening-test-list strong {
  font-family: var(--jp-serif);

  font-size: 16px;
  font-weight: 400;
}

.screening-bridal-list {
  display: grid;

  grid-template-columns:
    repeat(2, 1fr);

  margin:
    35px 0;

  border-top:
    1px solid var(--line);
}

.screening-bridal-list article {
  min-height: 180px;

  padding:
    24px 25px;

  border-right:
    1px solid var(--line);
}

.screening-bridal-list article:first-child {
  border-left:
    1px solid var(--line);
}

.screening-bridal-list span {
  color: #817a74;

  font-family: var(--serif);

  font-size: 14px;
}

.screening-bridal-list h3 {
  margin:
    20px 0 10px;

  font-family: var(--jp-serif);

  font-size: 18px;
  font-weight: 400;
}

.screening-bridal-list p {
  color: #5f5a56;

  font-size: 13px;

  line-height: 1.9;
}


/* =========================================================
35 PREGNANCY STRONG BLOCKS
========================================================= */

.pregnancy-timing,
.fertility-position {
  padding:
    90px
    var(--page-x);

  color: #fff;
  background: var(--rose-deep);
}

.pregnancy-timing-inner,
.fertility-position-inner {
  display: grid;

  grid-template-columns:
    minmax(350px, 0.75fr)
    minmax(500px, 1.25fr);

  gap: 90px;

  align-items: center;

  max-width: 1200px;
}

.pregnancy-timing-heading > p {
  margin-bottom: 15px;

  color:
    rgba(255, 255, 255, 0.63);

  font-family: var(--serif);

  font-size: 12px;

  letter-spacing: 0.14em;
}

.pregnancy-timing-heading h2,
.fertility-position-heading h2 {
  margin: 0;

  font-family: var(--jp-serif);

  font-size:
    clamp(31px, 3.2vw, 44px);

  font-weight: 400;

  line-height: 1.65;
}

.pregnancy-timing-body p,
.fertility-position-body p {
  color:
    rgba(255, 255, 255, 0.8);

  font-size: 14px;

  line-height: 2;
}

.pregnancy-reserve-button {
  display: flex;

  align-items: center;
  justify-content: space-between;

  width: 220px;
  min-height: 58px;

  margin-top: 28px;

  padding-inline: 20px;

  color: var(--rose-deep);
  background: #fff;

  border: 0;

  font-size: 13px;
}

.pregnancy-notice {
  padding:
    75px
    var(--page-x);

  background: #eaded8;
}

.pregnancy-notice-inner {
  display: grid;

  grid-template-columns:
    145px 1fr;

  gap: 55px;

  max-width: 1050px;

  padding:
    46px 0;

  border-top:
    1px solid var(--rose-soft);

  border-bottom:
    1px solid var(--rose-soft);
}

.pregnancy-notice-mark span {
  color:
    rgba(117, 80, 82, 0.2);

  font-family: var(--serif);

  font-size: 50px;
}

.pregnancy-notice-copy h2 {
  margin:
    10px 0 20px;

  font-family: var(--jp-serif);

  font-size:
    clamp(29px, 3vw, 42px);

  font-weight: 400;
}

.pregnancy-notice-copy > p:last-child {
  max-width: 700px;

  margin: 0;

  color: #5f5a56;

  font-size: 14px;

  line-height: 2;
}


/* =========================================================
36 FLOWS
========================================================= */

.pregnancy-referral,
.screening-flow {
  padding:
    105px
    var(--page-x)
    115px;

  background: var(--white);
}

.pregnancy-referral-heading,
.screening-flow-heading {
  max-width: 720px;

  margin-bottom: 60px;
}

.pregnancy-referral-heading h2,
.screening-flow-heading h2 {
  margin:
    34px 0 0;

  font-family: var(--jp-serif);

  font-size:
    clamp(36px, 3.4vw, 50px);

  font-weight: 400;
}

.pregnancy-referral-flow,
.access-route-flow {
  display: grid;

  grid-template-columns:
    1fr auto
    1fr auto
    1fr;

  align-items: center;

  gap: 24px;

  max-width: 1150px;
}

.pregnancy-referral-flow article,
.access-route-flow article {
  min-height: 240px;

  padding:
    27px;

  background: var(--base);

  border-top:
    1px solid var(--line-strong);
}

.pregnancy-referral-flow article > span,
.access-route-flow article > span {
  display: block;

  margin-bottom: 35px;

  color: var(--rose-deep);

  font-family: var(--serif);

  font-size: 17px;
}

.pregnancy-referral-flow small,
.access-route-flow small {
  color: #817a74;

  font-size: 10px;
}

.pregnancy-referral-flow h3,
.access-route-flow h3 {
  margin:
    8px 0 14px;

  font-family: var(--jp-serif);

  font-size: 20px;
  font-weight: 400;
}

.pregnancy-referral-flow p,
.access-route-flow p {
  color: #5f5a56;

  font-size: 13px;

  line-height: 1.9;
}

.pregnancy-flow-arrow,
.access-route-arrow {
  color: #9a938c;

  font-family: var(--serif);

  font-size: 25px;
}


/* =========================================================
37 SCREENING FLOW - BRAND TIMELINE
========================================================= */

.screening-flow-list {
  position: relative;

  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  max-width: 1240px;

  margin-top: 20px;

  border-top:
    1px solid var(--line-strong);
}

.screening-flow-list::after {
  position: absolute;

  top: -1px;
  left: 0;

  width: 100%;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      var(--rose-deep) 0%,
      var(--rose) 35%,
      rgba(197, 142, 135, 0.15) 100%
    );

  content: "";
}

.screening-flow-list article {
  position: relative;

  min-height: 320px;

  padding:
    38px 30px 30px;

  border-right:
    1px solid var(--line);
}

.screening-flow-list article:first-child {
  border-left:
    1px solid var(--line);
}

.screening-flow-list article::before {
  position: absolute;

  top: -7px;
  left: 28px;

  width: 13px;
  height: 13px;

  border:
    1px solid var(--rose-deep);

  border-radius: 50%;

  background: var(--white);

  content: "";
}

.screening-flow-list article:first-child::before {
  background: var(--rose-deep);
}

.screening-flow-list article > span {
  display: block;

  margin-bottom: 48px;

  color: var(--rose-deep);

  font-family: var(--serif);

  font-size: 17px;
}

.screening-flow-list small {
  display: block;

  margin-bottom: 5px;

  color: #817a74;

  font-size: 10px;

  letter-spacing: 0.12em;
}

.screening-flow-list h3 {
  margin:
    0 0 18px;

  font-family: var(--jp-serif);

  font-size: 22px;
  font-weight: 400;
}

.screening-flow-list p {
  max-width: 240px;

  margin: 0;

  color: #5f5a56;

  font-size: 14px;

  line-height: 2;
}


/* =========================================================
38 PRECONCEPTION
========================================================= */

.preconception-list {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  max-width: 930px;

  margin-top: 40px;

  border-top:
    1px solid var(--line);
}

.preconception-list article {
  padding: 25px;

  border-right:
    1px solid var(--line);
}

.preconception-list article:first-child {
  border-left:
    1px solid var(--line);
}

.preconception-list article > span {
  display: block;

  margin-bottom: 25px;

  color: #817a74;

  font-family: var(--serif);

  font-size: 11px;

  letter-spacing: 0.12em;
}

.preconception-list h3 {
  font-family: var(--jp-serif);

  font-size: 19px;
  font-weight: 400;
}

.preconception-list p {
  color: #5f5a56;

  font-size: 13px;

  line-height: 1.9;
}


/* =========================================================
39 SCREENING PRICE
========================================================= */

.screening-price {
  padding:
    105px
    var(--page-x);

  color: #fff;
  background: var(--rose-deep);
}

.screening-price-inner {
  display: grid;

  grid-template-columns:
    minmax(320px, 0.65fr)
    minmax(560px, 1.35fr);

  gap: 90px;

  max-width: 1200px;
}

.screening-price-heading .section-number,
.screening-price-heading .section-en {
  color:
    rgba(255, 255, 255, 0.7);
}

.screening-price-heading .brand-sign {
  background: var(--rose-soft);
}

.screening-price-heading h2 {
  margin:
    34px 0 18px;

  font-family: var(--jp-serif);

  font-size:
    clamp(36px, 3.5vw, 51px);

  font-weight: 400;
}

.screening-price-heading > p:last-child {
  color:
    rgba(255, 255, 255, 0.72);

  font-size: 14px;
}

.screening-price-table {
  border-top:
    1px solid rgba(255, 255, 255, 0.3);
}

.screening-price-row {
  display: grid;

  grid-template-columns:
    1fr 140px;

  align-items: center;

  min-height: 88px;

  border-bottom:
    1px solid rgba(255, 255, 255, 0.2);
}

.screening-price-row span {
  display: block;

  color:
    rgba(255, 255, 255, 0.55);

  font-size: 10px;
}

.screening-price-row strong {
  font-family: var(--jp-serif);

  font-size: 17px;
  font-weight: 400;
}

.screening-price-row > p {
  margin: 0;

  text-align: right;

  font-family: var(--serif);

  font-size: 20px;
}

.screening-price-note {
  margin-top: 20px;
}

.screening-price-note p {
  margin:
    4px 0;

  color:
    rgba(255, 255, 255, 0.62);

  font-size: 11px;
}


/* =========================================================
40 DOCTOR PAGE
========================================================= */

.doctor-profile-section {
  padding:
    110px
    var(--page-x);

  background: var(--white);
}

.doctor-profile-heading {
  max-width: 700px;

  margin-bottom: 55px;
}

.doctor-profile-layout {
  display: grid;

  grid-template-columns:
    minmax(430px, 0.9fr)
    minmax(500px, 1.1fr);

  gap:
    clamp(70px, 8vw, 125px);

  align-items: center;

  max-width: 1270px;
}

.doctor-profile-photo {
  position: relative;

  height: 760px;

  margin: 0;
}

.doctor-profile-photo img {
  height: 100%;

  object-fit: cover;
}

.doctor-profile-photo figcaption {
  position: absolute;
  z-index: 6;

  right: 16px;
  bottom: 14px;
  left: 16px;

  display: flex;

  justify-content: space-between;

  color: #fff;

  font-size: 10px;
}

.doctor-profile-role {
  margin-bottom: 12px;

  color: #817a74;

  font-size: 12px;
}

.doctor-profile-name {
  margin-bottom: 34px;

  padding-bottom: 28px;

  border-bottom:
    1px solid var(--line);
}

.doctor-profile-name h2 {
  margin-bottom: 5px;

  font-family: var(--jp-serif);

  font-size:
    clamp(36px, 3.8vw, 54px);

  font-weight: 400;
}

.doctor-profile-name span {
  color: #817a74;

  font-family: var(--serif);

  font-size: 15px;
}

.doctor-profile-message {
  margin-bottom: 28px;

  color: var(--rose-deep);

  font-family: var(--jp-serif);

  font-size:
    clamp(22px, 2.1vw, 30px);

  line-height: 1.7;
}

.doctor-profile-description {
  max-width: 580px;

  margin-bottom: 18px;

  color: #5f5a56;

  font-size: 15px;

  line-height: 2.05;
}

.doctor-profile-data {
  margin-top: 35px;

  border-top:
    1px solid var(--line);
}

.doctor-profile-data > div {
  display: grid;

  grid-template-columns:
    150px 1fr;

  padding:
    14px 0;

  border-bottom:
    1px solid var(--line);
}

.doctor-profile-data dt {
  color: #817a74;

  font-size: 10px;
}

.doctor-profile-data dd {
  margin: 0;

  font-size: 14px;
}

.doctor-message,
.doctor-care-area,
.doctor-background {
  padding:
    105px
    var(--page-x);

  background: var(--soft);
}

.doctor-background {
  background: var(--white);
}

.doctor-message-inner,
.doctor-background-inner {
  display: grid;

  grid-template-columns:
    minmax(360px, 0.72fr)
    minmax(560px, 1.28fr);

  gap:
    clamp(65px, 7vw, 115px);

  max-width: 1180px;
}

.doctor-message-heading h2,
.doctor-policy-heading h2,
.doctor-care-area-heading h2,
.doctor-background-heading h2 {
  margin:
    34px 0 0;

  font-family: var(--jp-serif);

  font-size:
    clamp(34px, 3.4vw, 49px);

  font-weight: 400;

  line-height: 1.6;
}

.doctor-message-body p {
  max-width: 680px;

  color: #5f5a56;

  font-size: 15px;

  line-height: 2.1;
}

.doctor-policy {
  padding:
    105px
    var(--page-x)
    115px;

  background: var(--white);
}

.doctor-policy-grid {
  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  margin-top: 60px;

  border-top:
    1px solid var(--line-strong);
}

.doctor-policy-grid article {
  min-height: 270px;

  padding:
    28px 27px;

  border-right:
    1px solid var(--line);
}

.doctor-policy-grid article:first-child {
  border-left:
    1px solid var(--line);
}

.doctor-policy-grid article > span {
  display: block;

  margin-bottom: 38px;

  color: var(--rose-deep);

  font-family: var(--serif);

  font-size: 16px;
}

.doctor-policy-grid h3 {
  margin:
    8px 0 14px;

  font-family: var(--jp-serif);

  font-size: 20px;
  font-weight: 500;
}

.doctor-policy-grid p {
  color: #5f5a56;

  font-size: 13px;

  line-height: 1.95;
}

.doctor-care-area-list {
  max-width: 900px;

  margin-top: 55px;

  border-top:
    1px solid var(--line-strong);
}

.doctor-care-area-list a {
  display: grid;

  grid-template-columns:
    60px 1fr auto;

  align-items: center;

  min-height: 86px;

  border-bottom:
    1px solid var(--line);
}

.doctor-care-area-list > a > span {
  color: #817a74;

  font-family: var(--serif);

  font-size: 15px;
}

.doctor-care-area-list small {
  display: block;

  color: #817a74;

  font-size: 10px;
}

.doctor-care-area-list strong {
  font-family: var(--jp-serif);

  font-size: 19px;
  font-weight: 400;
}

.doctor-background-content {
  display: grid;

  grid-template-columns:
    1fr 0.8fr;

  gap: 65px;
}

.doctor-career-list {
  border-top:
    1px solid var(--line);
}

.doctor-career-list > div {
  display: grid;

  grid-template-columns:
    100px 1fr;

  padding:
    16px 0;

  border-bottom:
    1px solid var(--line);
}

.doctor-career-list dt {
  color: var(--rose-deep);

  font-family: var(--serif);

  font-size: 17px;
}

.doctor-career-list dd {
  margin: 0;

  font-size: 14px;
}

.doctor-license-label {
  margin-bottom: 18px;

  color: #817a74;

  font-size: 10px;

  letter-spacing: 0.12em;
}

.doctor-license li {
  margin-bottom: 10px;

  font-size: 14px;
}

.doctor-background-note {
  color: #817a74;

  font-size: 11px;

  line-height: 1.8;
}


/* =========================================================
41 FIRST VISIT PAGE
========================================================= */

.first-quick-section,
.first-flow-section,
.first-belongings,
.first-period,
.first-insurance,
.first-minor,
.first-faq {
  padding:
    105px
    var(--page-x);
}

.first-quick-section,
.first-belongings,
.first-period,
.first-minor,
.first-faq {
  background: var(--soft);
}

.first-flow-section,
.first-insurance {
  background: var(--white);
}

.first-quick-heading,
.first-flow-heading,
.first-belongings-heading {
  max-width: 720px;

  margin-bottom: 55px;
}

.first-quick-heading h2,
.first-flow-heading h2,
.first-belongings-heading h2,
.first-period-heading h2,
.first-insurance-heading h2,
.first-minor-heading h2,
.first-faq-heading h2 {
  margin:
    34px 0 0;

  font-family: var(--jp-serif);

  font-size:
    clamp(33px, 3.2vw, 47px);

  font-weight: 400;

  line-height: 1.6;
}

.first-quick-grid {
  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  border-top:
    1px solid var(--line-strong);
}

.first-quick-grid article {
  min-height: 350px;

  padding:
    28px 27px;

  border-right:
    1px solid var(--line);
}

.first-quick-grid article:first-child {
  border-left:
    1px solid var(--line);
}

.first-quick-grid article > span {
  display: block;

  margin-bottom: 40px;

  color: var(--rose-deep);

  font-family: var(--serif);

  font-size: 15px;
}

.first-quick-grid h3 {
  margin:
    10px 0 17px;

  font-family: var(--jp-serif);

  font-size: 21px;
  font-weight: 400;

  line-height: 1.6;
}

.first-quick-grid p {
  color: #5f5a56;

  font-size: 13px;

  line-height: 1.95;
}

.first-quick-grid a {
  display: flex;

  justify-content: space-between;

  margin-top: 25px;

  padding-top: 14px;

  border-top:
    1px solid var(--line);

  font-size: 12px;
}

.first-flow-list {
  max-width: 1050px;

  border-top:
    1px solid var(--line-strong);
}

.first-flow-item {
  display: grid;

  grid-template-columns:
    125px 1fr;

  gap: 48px;

  padding:
    48px 0;

  border-bottom:
    1px solid var(--line);
}

.first-flow-number span {
  display: block;

  color: var(--rose-deep);

  font-family: var(--serif);

  font-size: 28px;
}

.first-flow-number small {
  color: #817a74;

  font-size: 10px;
}

.first-flow-content {
  max-width: 760px;
}

.first-flow-content h3 {
  margin-bottom: 18px;

  font-family: var(--jp-serif);

  font-size:
    clamp(26px, 2.6vw, 37px);

  font-weight: 400;
}

.first-flow-content > p {
  max-width: 670px;

  color: #5f5a56;

  font-size: 14px;

  line-height: 2;
}

.first-flow-button {
  display: flex;

  align-items: center;
  justify-content: space-between;

  width: 220px;
  min-height: 56px;

  margin-top: 25px;

  padding-inline: 20px;

  color: #fff;
  background: var(--rose-deep);

  border: 0;

  font-size: 13px;
}

.first-flow-tags {
  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  margin-top: 22px;
}

.first-flow-tags span {
  padding:
    7px 11px;

  border:
    1px solid var(--line);

  font-size: 11px;
}

.first-flow-note {
  max-width: 650px;

  margin-top: 28px;

  padding:
    24px 26px;

  background: var(--soft);
}

.first-belongings-layout {
  display: grid;

  grid-template-columns:
    1.2fr 0.8fr;

  gap: 80px;

  max-width: 1120px;
}

.first-belongings-list {
  border-top:
    1px solid var(--line-strong);
}

.first-belongings-list article {
  display: grid;

  grid-template-columns:
    60px 1fr;

  padding:
    23px 0;

  border-bottom:
    1px solid var(--line);
}

.first-belongings-list h3 {
  margin:
    5px 0 8px;

  font-family: var(--jp-serif);

  font-size: 18px;
  font-weight: 400;
}

.first-belongings-list p,
.first-clothing p,
.first-period-main p,
.first-period-box p,
.first-insurance-grid p,
.first-minor-content p {
  color: #5f5a56;

  font-size: 14px;

  line-height: 2;
}

.first-clothing,
.first-period-box {
  padding:
    28px;

  background:
    rgba(255, 255, 255, 0.6);

  border-top:
    1px solid var(--rose-soft);
}


/* 生理中の受診 */

.first-period-inner {
  display: grid;

  grid-template-columns:
    minmax(410px, 0.84fr)
    minmax(520px, 1.16fr);

  gap:
    clamp(60px, 7vw, 110px);

  align-items: start;

  max-width: 1250px;
}

.first-period-heading {
  max-width: 430px;
}

.first-period-heading h2 {
  font-size:
    clamp(31px, 2.9vw, 43px);

  line-height: 1.6;
}

.first-period-content {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(300px, 0.72fr);

  gap: 45px;

  align-items: start;
}

.first-period-main {
  max-width: 560px;
}

.first-period-box {
  min-height: 260px;

  padding:
    34px 34px;

  background:
    rgba(252, 251, 248, 0.88);
}

.first-period-box strong,
.first-period-box h3 {
  display: block;

  margin-bottom: 14px;

  font-family: var(--jp-serif);

  font-size: 17px;
  font-weight: 500;

  line-height: 1.8;
}


/* 保険 */

.first-insurance-grid {
  display: grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap: 20px;

  max-width: 1000px;

  margin-top: 55px;
}

.first-insurance-grid article {
  min-height: 250px;

  padding: 31px;

  background: var(--base);

  border-top:
    1px solid var(--line-strong);
}

.first-insurance-grid h3 {
  margin:
    12px 0 18px;

  font-family: var(--jp-serif);

  font-size: 24px;
  font-weight: 400;
}


/* 未成年 */

.first-minor-inner {
  display: grid;

  grid-template-columns:
    minmax(430px, 0.82fr)
    minmax(560px, 1.18fr);

  gap:
    clamp(60px, 7vw, 105px);

  align-items: start;

  max-width: 1230px;
}

.first-minor-heading {
  max-width: 470px;
}

.first-minor-heading h2 {
  font-size:
    clamp(31px, 2.85vw, 42px);

  line-height: 1.65;
}

.first-minor-content {
  max-width: 700px;

  padding-top: 12px;
}

.first-minor-content p {
  max-width: 680px;

  margin-bottom: 23px;
}

.first-minor-content .text-link {
  margin-top: 7px;
}


/* =========================================================
42 FAQ LOWER PAGES
========================================================= */

.pregnancy-faq,
.screening-faq,
.first-faq,
.faq-group-section,
.faq-support {
  padding:
    105px
    var(--page-x);

  background: var(--base);
}

.pregnancy-faq,
.screening-faq,
.first-faq {
  background: var(--soft);
}

.pregnancy-faq-inner,
.screening-faq-inner,
.first-faq-inner,
.faq-group-inner,
.faq-support-inner {
  display: grid;

  grid-template-columns:
    minmax(330px, 0.68fr)
    minmax(620px, 1.32fr);

  gap:
    clamp(65px, 7vw, 115px);

  align-items: start;

  max-width: 1240px;
}

.pregnancy-faq-heading,
.screening-faq-heading,
.first-faq-heading,
.faq-group-heading,
.faq-support-heading {
  padding-top: 0;
}

.pregnancy-faq-heading h2,
.screening-faq-heading h2,
.first-faq-heading h2,
.faq-group-heading h2,
.faq-support-heading h2 {
  max-width: 390px;

  margin:
    34px 0 0;

  font-family: var(--jp-serif);

  font-size:
    clamp(32px, 3vw, 44px);

  font-weight: 400;

  line-height: 1.65;
}

.faq-category-section {
  padding:
    105px
    var(--page-x)
    115px;

  background: var(--white);
}

.faq-category-heading {
  max-width: 720px;

  margin-bottom: 55px;
}

.faq-category-heading h2 {
  margin:
    34px 0 0;

  font-family: var(--jp-serif);

  font-size:
    clamp(34px, 3.4vw, 49px);

  font-weight: 400;
}

.faq-category-grid {
  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  border-top:
    1px solid var(--line-strong);
}

.faq-category-grid a {
  position: relative;

  min-height: 180px;

  padding: 27px;

  border-right:
    1px solid var(--line);
}

.faq-category-grid a:first-child {
  border-left:
    1px solid var(--line);
}

.faq-category-grid a > span {
  display: block;

  margin-bottom: 30px;

  color: var(--rose-deep);

  font-family: var(--serif);

  font-size: 15px;
}

.faq-category-grid small {
  display: block;

  margin-bottom: 7px;

  color: #817a74;

  font-size: 10px;
}

.faq-category-grid strong {
  font-family: var(--jp-serif);

  font-size: 19px;
  font-weight: 400;
}

.faq-category-grid b {
  position: absolute;

  right: 22px;
  bottom: 20px;

  color: var(--rose-deep);

  font-weight: 400;
}

.faq-group-soft {
  background: var(--soft);
}

.faq-group-link,
.first-faq-more {
  grid-column: 2;

  margin-top: 34px;
}

.faq-support {
  color: #fff;
  background: var(--rose-deep);
}

.faq-support .section-number,
.faq-support .section-en {
  color:
    rgba(255, 255, 255, 0.68);
}

.faq-support .brand-sign {
  background: var(--rose-soft);
}

.faq-support-content > p {
  color:
    rgba(255, 255, 255, 0.76);

  font-size: 14px;
}

.faq-support-links {
  margin-top: 35px;

  border-top:
    1px solid rgba(255, 255, 255, 0.25);
}

.faq-support-links a {
  display: grid;

  grid-template-columns:
    150px 1fr auto;

  align-items: center;

  min-height: 76px;

  border-bottom:
    1px solid rgba(255, 255, 255, 0.2);
}


/* =========================================================
43 ACCESS PAGE
========================================================= */

.access-detail-section,
.access-hours,
.access-map-section,
.access-route-section,
.access-transport,
.access-visit-info {
  padding:
    105px
    var(--page-x);
}

.access-detail-section,
.access-map-section,
.access-route-section,
.access-transport {
  background: var(--white);
}

.access-hours,
.access-visit-info {
  background: var(--soft);
}

.access-detail-heading,
.access-map-heading,
.access-route-heading,
.access-transport-heading,
.access-visit-info-heading {
  max-width: 720px;

  margin-bottom: 55px;
}

.access-detail-heading h2,
.access-hours-heading h2,
.access-map-heading h2,
.access-route-heading h2,
.access-transport-heading h2,
.access-visit-info-heading h2 {
  margin:
    34px 0 0;

  font-family: var(--jp-serif);

  font-size:
    clamp(34px, 3.4vw, 49px);

  font-weight: 400;
}

.access-detail-grid {
  display: grid;

  grid-template-columns:
    minmax(390px, 0.75fr)
    minmax(580px, 1.25fr);

  gap: 80px;

  align-items: center;

  max-width: 1250px;
}

.access-detail-name {
  margin-bottom: 2px;

  font-family: var(--serif);

  font-size: 28px;
}

.access-detail-jp {
  margin-bottom: 35px;

  color: #817a74;

  font-size: 11px;
}

.access-data-list {
  border-top:
    1px solid var(--line);
}

.access-data-list > div {
  display: grid;

  grid-template-columns:
    120px 1fr;

  padding:
    15px 0;

  border-bottom:
    1px solid var(--line);
}

.access-data-list dt {
  color: #817a74;

  font-size: 10px;
}

.access-data-list dd {
  margin: 0;

  font-size: 14px;
}

.access-detail-image {
  position: relative;

  height: 620px;

  margin: 0;
}

.access-detail-image img {
  height: 100%;

  object-fit: cover;
}

.access-hours-inner,
.access-visit-info-inner {
  display: grid;

  grid-template-columns:
    minmax(330px, 0.65fr)
    minmax(600px, 1.35fr);

  gap: 80px;

  max-width: 1180px;
}

.access-hours-time {
  margin-bottom: 10px;

  font-family: var(--serif);

  font-size:
    clamp(44px, 5vw, 72px);

  line-height: 1;
}

.access-hours-time span {
  margin-inline: 10px;

  color: #a49b94;
}

.access-hours-note {
  color: var(--rose-deep);

  font-size: 12px;
}

.access-hours-table {
  margin-top: 35px;

  border-top:
    1px solid var(--line-strong);

  border-left:
    1px solid var(--line);
}

.access-hours-row {
  display: grid;

  grid-template-columns:
    1.8fr
    repeat(7, 1fr);
}

.access-hours-row > div {
  display: grid;

  place-items: center;

  min-height: 62px;

  border-right:
    1px solid var(--line);

  border-bottom:
    1px solid var(--line);

  font-size: 13px;
}

.access-map-layout {
  display: grid;

  grid-template-columns:
    1.3fr 0.7fr;

  min-height: 600px;

  max-width: 1250px;
}

.access-map-large,
.access-map-large iframe {
  min-height: 600px;
}

.access-map-large {
  position: relative;
}

.access-map-large iframe {
  display: block;

  width: 100%;
  height: 100%;

  border: 0;
}

.access-map-caption {
  position: absolute;

  right: 15px;
  bottom: 15px;
  left: 15px;

  display: flex;

  justify-content: space-between;

  padding:
    8px 10px;

  color: #fff;
  background:
    rgba(46, 42, 40, 0.4);

  font-size: 9px;
}

.access-map-info {
  display: flex;

  justify-content: center;

  flex-direction: column;

  padding: 52px;

  background: var(--soft);
}

.access-map-name {
  margin-bottom: 15px;

  font-family: var(--serif);

  font-size: 25px;
}

.access-map-info address {
  margin-bottom: 35px;

  color: #5f5a56;

  font-size: 14px;

  line-height: 2;
}

.access-station-list {
  border-top:
    1px solid var(--line);
}

.access-station-list > div {
  display: grid;

  grid-template-columns:
    50px 1fr;

  padding:
    18px 0;

  border-bottom:
    1px solid var(--line);
}

.access-station-list > div > span {
  color: #817a74;

  font-family: var(--serif);

  font-size: 15px;
}

.access-station-list strong {
  display: block;

  margin:
    4px 0;

  font-family: var(--jp-serif);

  font-size: 18px;
  font-weight: 400;
}

.access-station-list p {
  margin: 0;

  font-size: 13px;
}

.access-transport-grid {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  max-width: 1050px;

  margin-top: 55px;

  border-top:
    1px solid var(--line-strong);
}

.access-transport-grid article {
  min-height: 260px;

  padding: 27px;

  border-right:
    1px solid var(--line);
}

.access-transport-grid article:first-child {
  border-left:
    1px solid var(--line);
}

.access-transport-grid article > span {
  display: block;

  margin-bottom: 38px;

  color: var(--rose-deep);

  font-family: var(--serif);

  font-size: 15px;
}

.access-transport-grid h3 {
  margin:
    8px 0 15px;

  font-family: var(--jp-serif);

  font-size: 20px;
  font-weight: 400;
}

.access-transport-grid p {
  color: #5f5a56;

  font-size: 13px;

  line-height: 1.95;
}

.access-visit-info-list {
  border-top:
    1px solid var(--line-strong);
}

.access-visit-info-list a {
  display: grid;

  grid-template-columns:
    55px 1fr auto;

  align-items: center;

  min-height: 85px;

  border-bottom:
    1px solid var(--line);
}

.access-visit-info-list > a > span {
  color: #817a74;

  font-family: var(--serif);

  font-size: 15px;
}

.access-visit-info-list small {
  display: block;

  color: #817a74;

  font-size: 10px;
}

.access-visit-info-list strong {
  font-family: var(--jp-serif);

  font-size: 19px;
  font-weight: 400;
}


/* =========================================================
44 SYMPTOMS PAGE
========================================================= */

.concern-select {
  padding:
    105px
    var(--page-x)
    115px;

  background: var(--soft);
}

.concern-select-head {
  max-width: 720px;

  margin-bottom: 62px;
}

.concern-select-head h2 {
  margin:
    34px 0 20px;

  font-family: var(--jp-serif);

  font-size:
    clamp(35px, 3.3vw, 49px);

  font-weight: 400;

  line-height: 1.65;
}

.concern-select-head > p:last-child {
  max-width: 550px;

  margin: 0;

  color: #5f5a56;

  font-size: 15px;

  line-height: 2;
}

.concern-grid {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  max-width: 1240px;

  border-top:
    1px solid var(--line-strong);
}

.concern-card {
  position: relative;

  display: flex;

  min-height: 255px;

  flex-direction: column;

  padding:
    30px 28px;

  border-right:
    1px solid var(--line);

  border-bottom:
    1px solid var(--line);

  transition:
    color 0.3s ease,
    background 0.3s ease,
    transform 0.3s ease;
}

.concern-card:nth-child(3n + 1) {
  border-left:
    1px solid var(--line);
}

.concern-card:hover {
  z-index: 2;

  color: #fff;
  background: var(--rose-deep);

  transform: translateY(-4px);
}

.concern-number {
  display: block;

  margin-bottom: 35px;

  color: var(--rose-deep);

  font-family: var(--serif);

  font-size: 18px;
}

.concern-card small {
  display: block;

  margin-bottom: 8px;

  color: #817a74;

  font-size: 10px;

  letter-spacing: 0.12em;
}

.concern-card strong {
  display: block;

  max-width: 280px;

  margin-bottom: 15px;

  font-family: var(--jp-serif);

  font-size: 21px;
  font-weight: 400;

  line-height: 1.55;
}

.concern-card p {
  max-width: 270px;

  margin: 0;

  color: #5f5a56;

  font-size: 13px;

  line-height: 1.9;
}

.concern-card b {
  position: absolute;

  right: 26px;
  bottom: 24px;

  color: var(--rose-deep);

  font-weight: 400;
}

.concern-card:hover .concern-number,
.concern-card:hover small,
.concern-card:hover p,
.concern-card:hover b {
  color:
    rgba(255, 255, 255, 0.74);
}


/* consultation */

.symptoms-consultation {
  display: grid;

  grid-template-columns:
    minmax(520px, 0.88fr)
    minmax(650px, 1.12fr);

  min-height: 650px;

  background: var(--white);
}

.symptoms-consultation-copy {
  display: flex;

  justify-content: center;

  flex-direction: column;

  padding:
    80px
    clamp(50px, 6vw, 90px);
}

.symptoms-consultation-copy h2 {
  max-width: 620px;

  margin:
    34px 0 24px;

  font-family: var(--jp-serif);

  font-size:
    clamp(31px, 2.75vw, 42px);

  font-weight: 400;

  line-height: 1.72;
  letter-spacing: -0.025em;
}

.symptoms-consultation-copy > p:last-child {
  max-width: 580px;

  margin: 0;

  color: #5f5a56;

  font-size: 15px;

  line-height: 2.05;
}

.symptoms-consultation-image {
  position: relative;

  min-height: 650px;

  margin: 0;
}

.symptoms-consultation-image img {
  height: 100%;

  object-fit: cover;
}

.symptoms-consultation-image figcaption {
  position: absolute;
  z-index: 6;

  right: 16px;
  bottom: 14px;
  left: 16px;

  display: flex;

  justify-content: space-between;

  color: #fff;

  font-size: 10px;
}


/* details */

.concern-details {
  background: var(--base);
}

.concern-detail {
  display: grid;

  grid-template-columns:
    160px
    minmax(0, 900px);

  gap: 70px;

  justify-content: start;

  padding:
    92px
    var(--page-x);

  border-bottom:
    1px solid var(--line);

  background: var(--base);
}

.concern-detail-soft {
  background: var(--soft);
}

.concern-detail-accent {
  background: #eadfd9;
}

.concern-detail-meta {
  padding-top: 8px;
}

.concern-detail-meta > span {
  display: block;

  margin-bottom: 10px;

  color: var(--rose-deep);

  font-family: var(--serif);

  font-size: 25px;
}

.concern-detail-meta small {
  display: block;

  color: #817a74;

  font-size: 10px;

  line-height: 1.65;
  letter-spacing: 0.12em;
}

.concern-detail-main {
  max-width: 900px;
}

.concern-detail-main h2 {
  margin-bottom: 23px;

  font-family: var(--jp-serif);

  font-size:
    clamp(32px, 3vw, 45px);

  font-weight: 400;
}

.concern-detail-lead {
  max-width: 760px;

  margin-bottom: 35px;

  color: #5f5a56;

  font-size: 15px;

  line-height: 2.1;
}

.concern-detail-bottom {
  display: grid;

  grid-template-columns:
    1fr 290px;

  gap: 55px;

  align-items: end;

  max-width: 900px;

  padding-top: 24px;

  border-top:
    1px solid var(--line);
}

.concern-tags {
  display: flex;

  flex-wrap: wrap;

  gap: 8px;
}

.concern-tags span {
  padding:
    7px 11px;

  border:
    1px solid var(--line);

  font-size: 11px;
}

.concern-related {
  display: grid;

  grid-template-columns:
    1fr auto;

  gap: 5px 15px;

  padding-bottom: 10px;

  border-bottom:
    1px solid var(--line-strong);
}

.concern-related > span {
  grid-column: 1 / 3;

  color: #817a74;

  font-size: 9px;

  letter-spacing: 0.13em;
}

.concern-related strong {
  font-family: var(--jp-serif);

  font-size: 14px;
  font-weight: 500;
}

.concern-related b {
  font-weight: 400;
}


/* =========================================================
45 RELATED
========================================================= */

.sub-related {
  padding:
    105px
    var(--page-x)
    115px;

  background: var(--white);
}

.sub-related-heading {
  max-width: 720px;

  margin-bottom: 58px;
}

.sub-related-heading h2 {
  margin:
    34px 0 0;

  font-family: var(--jp-serif);

  font-size:
    clamp(34px, 3.4vw, 49px);

  font-weight: 400;
}

.sub-related-grid {
  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  border-top:
    1px solid var(--line-strong);
}

.sub-related-grid a {
  position: relative;

  display: flex;

  min-height: 245px;

  flex-direction: column;

  padding: 27px;

  border-right:
    1px solid var(--line);

  transition:
    color 0.3s ease,
    background 0.3s ease;
}

.sub-related-grid a:first-child {
  border-left:
    1px solid var(--line);
}

.sub-related-grid a:hover {
  color: #fff;
  background: var(--rose-deep);
}

.sub-related-grid a > span {
  margin-bottom: 36px;

  color: #817a74;

  font-family: var(--serif);

  font-size: 16px;
}

.sub-related-grid small {
  color: #817a74;

  font-size: 10px;
}

.sub-related-grid strong {
  font-family: var(--jp-serif);

  font-size: 21px;
  font-weight: 400;
}

.sub-related-grid b {
  position: absolute;

  right: 24px;
  bottom: 22px;

  font-weight: 400;
}

.sub-related-grid a:hover > span,
.sub-related-grid a:hover small {
  color:
    rgba(255, 255, 255, 0.65);
}


/* =========================================================
46 MOBILE FIXED
========================================================= */

.mobile-fixed-nav {
  display: none;
}


/* =========================================================
47 TABLET
========================================================= */

@media (max-width: 1120px) {

  .desktop-nav {
    gap: 17px;
  }

  .desktop-nav a,
  .header-first {
    font-size: 11px;
  }

  .header-reserve {
    width: 165px;
  }

  .care-index-grid,
  .pregnancy-menu-grid,
  .screening-menu-grid,
  .doctor-policy-grid,
  .first-quick-grid,
  .faq-category-grid,
  .sub-related-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }

  .care-index-grid a:nth-child(4n + 1) {
    border-left: 0;
  }

  .care-index-grid a:nth-child(odd) {
    border-left:
      1px solid var(--line);
  }

}


@media (max-width: 1020px) {

  :root {
    --page-x: 40px;
  }

  .site-header {
    grid-template-columns:
      1fr auto;
  }

  .desktop-nav,
  .header-first,
  .header-reserve {
    display: none;
  }

  .menu-button {
    display: block;
  }

  .fullscreen-menu-layout {
    grid-template-columns:
      1fr 250px;

    gap: 55px;
  }

  .symptoms-layout,
  .medical-layout {
    grid-template-columns: 1fr;
  }

  .symptoms-list,
  .medical-list {
    padding-right: 0;

    border-right: 0;
  }

  .symptom-result,
  .medical-preview {
    padding:
      45px 0 0;
  }

  .life-stage-content {
    grid-template-columns:
      120px 1fr;
  }

  .life-stage-links {
    grid-column: 2;
  }

  .doctor-grid {
    grid-template-columns:
      minmax(330px, 0.85fr)
      minmax(420px, 1.15fr);
  }

  .doctor-side {
    display: none;
  }

  .sub-hero-copy {
    width: 82%;
  }

  .sub-hero-side {
    display: none;
  }

  .care-intro-inner,
  .pregnancy-intro-inner,
  .screening-intro-inner,
  .first-guide-intro-inner,
  .doctor-message-inner,
  .doctor-background-inner,
  .first-period-inner,
  .first-minor-inner,
  .pregnancy-faq-inner,
  .screening-faq-inner,
  .first-faq-inner,
  .faq-group-inner,
  .faq-support-inner,
  .access-hours-inner,
  .access-visit-info-inner {
    grid-template-columns: 1fr;

    gap: 50px;
  }

  .care-intro-body,
  .pregnancy-intro-body,
  .screening-intro-body,
  .first-guide-intro-body {
    padding-top: 0;
  }

  .care-visual-section,
  .pregnancy-visual,
  .screening-visual,
  .doctor-consultation-section,
  .first-guide-visual,
  .faq-visual-section,
  .symptoms-consultation {
    grid-template-columns: 1fr;
  }

  .symptoms-guide-inner,
  .care-first-visit-inner,
  .bridal-check-inner,
  .screening-room-inner,
  .screening-first-inner,
  .doctor-care-visual-inner,
  .first-internal-inner,
  .first-consultation-inner,
  .faq-consultation-inner,
  .access-arrival-inner,
  .access-detail-grid {
    grid-template-columns: 1fr;
  }

  .care-detail-inner,
  .pregnancy-detail-inner,
  .screening-detail-inner {
    grid-template-columns:
      95px 1fr;

    gap: 40px;
  }

  .care-feature-inner {
    grid-template-columns: 1fr;
  }

  .examination-grid,
  .screening-flow-list {
    grid-template-columns:
      repeat(2, 1fr);
  }

  .examination-grid article:nth-child(3),
  .screening-flow-list article:nth-child(3) {
    border-left:
      1px solid var(--line);
  }

  .doctor-profile-layout {
    grid-template-columns:
      0.9fr 1.1fr;

    gap: 55px;
  }

  .doctor-background-content {
    grid-template-columns: 1fr;
  }

  .pregnancy-referral-flow,
  .access-route-flow {
    grid-template-columns: 1fr;
  }

  .pregnancy-flow-arrow,
  .access-route-arrow {
    justify-self: center;

    transform: rotate(90deg);
  }

  .first-period-content {
    grid-template-columns: 1fr;
  }

  .concern-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }

  .concern-card:nth-child(3n + 1) {
    border-left: 0;
  }

  .concern-card:nth-child(odd) {
    border-left:
      1px solid var(--line);
  }

}


/* =========================================================
48 MOBILE
========================================================= */

@media (max-width: 600px) {

  :root {
    --page-x: 20px;
  }

  html {
    scroll-padding-top: 74px;
  }

  body {
    padding-bottom: 68px;

    font-size: 15px;

    line-height: 1.9;
  }


  /* HEADER */

  .site-header {
    height: 70px;

    padding-inline: 18px;
  }

  .site-logo-main {
    font-size: 25px;
  }

  .site-logo-sub {
    margin-top: 5px;

    font-size: 7px;
  }

  .fullscreen-menu {
    padding-top: 70px;
  }

  .fullscreen-menu-inner {
    width:
      calc(100% - 36px);

    height:
      calc(100svh - 70px);

    padding:
      18px 0;
  }

  .fullscreen-menu-layout {
    grid-template-columns: 1fr;
  }

  .fullscreen-menu-side {
    display: none;
  }

  .fullscreen-nav {
    grid-template-columns: 1fr;
  }

  .fullscreen-nav a {
    min-height: 62px;

    border-right: 0 !important;
  }

  .fullscreen-nav strong {
    font-size: 16px;
  }


  /* OPENING */

  .opening-word {
    font-size: 43px;
  }


  /* TOP HERO */

  .hero {
    min-height: 760px;
    height: 100svh;
  }

  .hero-media img {
    object-position:
      61% center;
  }

  .hero-soft-layer {
    background:
      linear-gradient(
        180deg,
        rgba(247, 244, 240, 0.02) 20%,
        rgba(247, 244, 240, 0.16) 53%,
        rgba(247, 244, 240, 0.93) 78%,
        rgba(247, 244, 240, 0.98) 100%
      );
  }

  .hero-copy {
    top: auto;
    right: 0;
    bottom: 92px;
    left: 0;

    width: 100%;

    padding:
      0 22px 26px;

    transform: none;
  }

  .hero-meta {
    margin-bottom: 17px;
  }

  .hero-meta span {
    font-size: 17px;
  }

  .hero-meta p {
    font-size: 9px;
  }

  .hero-title {
    margin-bottom: 18px;

    font-size: 29px;

    line-height: 1.55;
  }

  .hero-title span {
    width: auto;

    white-space: normal;
  }

  .hero-description {
    max-width: 340px;

    margin-bottom: 23px;

    color: #504b47;

    font-size: 14px;

    line-height: 1.9;
  }

  .hero-actions {
    align-items: stretch;

    gap: 9px;

    width: 100%;
  }

  .hero-reserve,
  .hero-first {
    min-height: 52px;
    height: 52px;

    font-size: 13px;
  }

  .hero-reserve {
    width: 55%;
  }

  .hero-first {
    justify-content: center;

    flex: 1;
  }

  .hero-brand-note,
  .hero-scroll {
    display: none;
  }


  /* TODAY */

  .today-dock-wrap {
    height: 74px;

    margin-top: -74px;
  }

  .today-dock.is-sticky {
    top: 70px;
  }

  .today-inner {
    grid-template-columns:
      1fr 1.05fr 110px;

    min-height: 74px;
  }

  .today-title,
  .today-item {
    padding-inline: 12px;
  }

  .today-title > span,
  .today-item > span {
    font-size: 8px;
  }

  .today-title strong {
    font-size: 20px;
  }

  .today-item strong {
    font-size: 12px;
  }

  .today-item:nth-of-type(2),
  .today-item:nth-of-type(3),
  .today-item:nth-of-type(4) {
    display: none;
  }

  .today-reserve {
    padding-inline: 13px;

    font-size: 11px;
  }


  /* NEWS */

  .news-strip {
    padding:
      25px 20px;
  }

  .news-inner {
    grid-template-columns:
      72px 1fr;

    gap: 15px;
  }

  .news-heading {
    display: block;
  }

  .news-heading span {
    display: block;

    font-size: 20px;
  }

  .news-heading small {
    font-size: 9px;
  }

  .news-item {
    display: block;
  }

  .news-item time {
    display: block;

    margin-bottom: 3px;

    font-size: 11px;
  }

  .news-item > span {
    font-size: 13px;
  }

  .news-item b,
  .news-all {
    display: none;
  }


  /* COMMON */

  .brand-intro,
  .symptoms,
  .medical-care,
  .life-stage,
  .doctor,
  .clinic,
  .faq-section {
    padding:
      78px 20px;
  }

  .section-number {
    font-size: 18px;
  }

  .section-en {
    margin-top: 8px;

    font-size: 10px;
  }

  .brand-sign {
    width: 7px;
    height: 7px;

    margin-top: 15px;
  }


  /* ABOUT */

  .brand-intro {
    padding-top: 82px;
    padding-bottom: 82px;
  }

  .brand-intro-left {
    margin-bottom: 27px;
  }

  .brand-statement {
    max-width: 330px;

    margin-bottom: 21px;

    font-size: 16px;
  }

  .brand-intro-copy h2 {
    margin-bottom: 27px;

    font-size: 30px;
  }

  .brand-intro-body {
    grid-template-columns: 1fr;

    gap: 14px;
  }

  .brand-intro-body p {
    font-size: 14px;
  }


  /* TOP HEADINGS */

  .symptoms-head,
  .medical-head,
  .life-stage-header,
  .clinic-head {
    margin-bottom: 47px;
  }

  .symptoms-index,
  .medical-head > div:first-child,
  .life-stage-header > div:first-child,
  .clinic-head > div:first-child {
    margin-bottom: 28px;
  }

  .symptoms-title h2,
  .medical-head h2,
  .life-stage-title h2,
  .clinic-heading h2 {
    font-size: 31px;
  }

  .symptoms-title > p,
  .medical-head > p,
  .life-stage-title > p,
  .clinic-heading > p {
    margin-top: 19px;

    font-size: 14px;
  }


  /* TOP SYMPTOMS */

  .symptoms-layout {
    display: block;

    border-bottom: 0;
  }

  .symptoms-list {
    border-right: 0;
  }

  .symptom-button {
    grid-template-columns:
      38px 1fr 22px;

    min-height: 70px;

    padding:
      0 8px;
  }

  .symptom-button.is-active {
    padding-left: 12px;

    background:
      rgba(255, 255, 255, 0.65);
  }

  .symptom-button.is-active::before {
    position: absolute;

    left: 0;

    width: 2px;
    height: 42px;

    background: var(--rose-deep);

    content: "";
  }

  .symptom-button strong {
    font-size: 15px;
  }

  .symptom-button small {
    font-size: 8px;
  }

  .symptom-result {
    padding-top: 34px;
    padding-left: 0;
  }

  .symptom-result-image {
    width:
      calc(100% + 40px);

    height: 320px;

    margin-left: -20px;
  }

  .symptom-result-card {
    display: block;

    padding-top: 26px;
  }

  .symptom-result-index {
    display: flex;

    align-items: baseline;

    gap: 10px;

    margin-bottom: 10px;
  }

  .symptom-result-index span {
    font-size: 24px;
  }

  .symptom-result-card h3 {
    font-size: 27px;
  }

  .symptom-result-text {
    font-size: 14px;
  }

  .wide-link {
    grid-template-columns:
      1fr auto;

    min-height: 76px;

    padding-inline: 4px;
  }

  .wide-link > span:first-child {
    font-size: 16px;
  }

  .wide-link > span:nth-child(2) {
    display: none;
  }


  /* MEDICAL */

  .medical-layout {
    display: block;

    border-bottom: 0;
  }

  .medical-list {
    border-right: 0;
  }

  .medical-item {
    grid-template-columns:
      38px 1fr 22px;

    min-height: 72px;

    padding:
      0 8px;
  }

  .medical-item.is-active {
    padding-left: 12px;

    background:
      rgba(255, 255, 255, 0.62);
  }

  .medical-item.is-active::before {
    position: absolute;

    left: 0;

    width: 2px;
    height: 42px;

    background: var(--rose-deep);

    content: "";
  }

  .medical-item strong {
    font-size: 17px;
  }

  .medical-item small {
    font-size: 8px;
  }

  .medical-preview {
    padding-top: 34px;
    padding-left: 0;
  }

  .medical-image {
    width:
      calc(100% + 40px);

    height: 335px;

    margin-left: -20px;
  }

  .medical-copy {
    display: block;

    padding-top: 25px;
  }

  .medical-copy h3 {
    font-size: 28px;
  }

  .medical-copy > p:not(.medical-copy-en) {
    font-size: 14px;
  }

  .medical-link {
    display: flex;

    width: 170px;

    margin-top: 22px;
  }


  /* LIFE */

  .life-stage-panel {
    padding-top: 34px;
  }

  .life-stage-nav {
    margin-bottom: 42px;
  }

  .life-stage-button span {
    font-size: 18px;
  }

  .life-stage-button i {
    width: 8px;
    height: 8px;
  }

  .life-stage-line {
    top: 28px;
  }

  .life-stage-content {
    display: block;

    min-height: 0;

    padding-bottom: 38px;
  }

  .life-stage-age {
    display: none;
  }

  .life-stage-copy h3 {
    margin-bottom: 17px;

    font-size: 26px;
  }

  .life-stage-copy > p:last-child {
    margin-bottom: 27px;

    font-size: 14px;
  }

  .life-stage-links {
    margin-top: 25px;
  }

  .life-stage-links a {
    min-height: 58px;

    font-size: 14px;
  }


  /* FIRST TOP */

  .first-visit {
    display: flex;

    min-height: 0;

    flex-direction: column;

    padding: 0;
  }

  .first-visit-media {
    position: relative;

    order: 1;

    width: 100%;
    height: 390px;
  }

  .first-visit-card {
    position: relative;

    order: 2;

    top: auto;

    width: 100%;

    margin: 0;

    padding:
      52px 20px 65px;

    box-shadow: none;
  }

  .first-visit-card h2 {
    margin:
      25px 0 19px;

    font-size: 28px;

    white-space: normal;
  }

  .first-visit-lead {
    font-size: 14px;
  }


  /* DOCTOR TOP */

  .doctor {
    padding-top: 82px;
  }

  .doctor-grid {
    display: flex;

    flex-direction: column;

    gap: 0;
  }

  .doctor-side {
    display: none;
  }

  .doctor-copy {
    order: 1;

    width: 100%;
    max-width: none;
  }

  .doctor-portrait {
    order: 2;

    width:
      calc(100% + 40px);

    height: 500px;

    margin:
      38px -20px 0;
  }

  .doctor-copy h2 {
    font-size: 29px;
  }

  .doctor-name {
    display: grid;

    grid-template-columns:
      auto 1fr;

    gap:
      2px 13px;
  }

  .doctor-name strong {
    font-size: 27px;
  }

  .doctor-name small {
    grid-column: 2;
  }

  .doctor-description {
    font-size: 14px;
  }

  .doctor-profile > div {
    grid-template-columns:
      105px 1fr;
  }

  .doctor-consultation {
    width:
      calc(100% + 40px);

    height: 310px;

    margin:
      0 -20px;
  }


  /* CHECKUP */

  .checkup {
    display: flex;

    min-height: 0;

    flex-direction: column;
  }

  .checkup-media {
    min-height: 410px;
    height: 410px;
  }

  .checkup-copy {
    padding:
      62px 20px 68px;
  }

  .checkup-copy h2 {
    font-size: 34px;
  }

  .checkup-lead {
    font-size: 14px;
  }


  /* CLINIC */

  .clinic-gallery {
    display: block;
  }

  .clinic-gallery figure {
    width:
      calc(100% + 40px);

    margin-left: -20px;
  }

  .clinic-main {
    height: 410px;
  }

  .clinic-room {
    height: 330px;

    margin-top: 14px;
  }

  .clinic-detail {
    height: 290px;

    margin-top: 14px;
  }


  /* FAQ */

  .faq-layout {
    grid-template-columns: 1fr;

    gap: 42px;
  }

  .faq-side {
    position: static;
  }

  .faq-side h2 {
    margin-top: 25px;

    font-size: 31px;
  }

  .faq-question {
    grid-template-columns:
      37px 1fr 30px;

    min-height: 78px;
  }

  .faq-question strong {
    padding-right: 10px;

    font-size: 15px;
  }

  .faq-answer p {
    margin:
      0 0 27px 37px;

    font-size: 14px;
  }


  /* TOP ACCESS */

  .access-section {
    display: block;
  }

  .access-info {
    min-height: 0;

    padding:
      78px 20px;
  }

  .access-heading h2 {
    font-size: 29px;

    white-space: normal;
  }

  .access-map,
  .access-map iframe {
    min-height: 410px;
  }

  .access-route {
    padding:
      78px 20px 85px;
  }

  .route-line {
    display: none;
  }

  .route-grid {
    display: block;
  }

  .route-grid article,
  .route-grid article + article {
    min-height: 0;

    padding:
      0 0 35px 36px;
  }

  .route-grid article::before {
    top: 5px;
    left: 0;
  }


  /* RESERVATION */

  .reservation-section {
    min-height: 0;
  }

  .reservation-watermark {
    display: none;
  }

  .reservation-inner {
    display: block;

    width: auto;
    min-height: 560px;

    padding:
      72px 20px 76px;
  }

  .reservation-index {
    display: flex;

    align-items: center;

    gap: 12px;

    padding: 0;

    margin-bottom: 34px;
  }

  .reservation-index p {
    margin: 0;

    writing-mode: initial;
  }

  .reservation-main h2 {
    font-size: 30px;

    line-height: 1.65;
  }

  .reservation-main p {
    font-size: 14px;
  }

  .reservation-actions {
    align-items: flex-start;

    margin-top: 40px;
  }

  .reservation-circle {
    width: 165px;
    height: 165px;

    padding-inline: 27px;
  }


  /* FOOTER */

  .site-footer {
    padding:
      62px 20px 25px;
  }

  .footer-top {
    grid-template-columns: 1fr;

    gap: 40px;

    padding-bottom: 50px;
  }

  .footer-logo > span {
    font-size: 35px;
  }

  .footer-nav a,
  .footer-info p {
    font-size: 12px;
  }

  .footer-bottom {
    grid-template-columns: 1fr;

    gap: 7px;
  }

  .footer-bottom p:nth-child(2) {
    text-align: left;
  }


  /* SUB HERO */

  .subpage {
    padding-top: 70px;
  }

  .sub-hero {
    min-height: 0;

    padding:
      60px 20px 66px;
  }

  .sub-hero-inner {
    min-height: 0;
  }

  .sub-hero-index {
    margin-bottom: 44px;
  }

  .sub-hero-copy {
    width: 100%;

    margin-top: 0;

    padding-top: 0;
  }

  .sub-hero-kicker {
    margin-bottom: 12px;

    font-size: 11px;
  }

  .sub-hero-copy h1 {
    margin-bottom: 22px;

    font-size: 37px;

    line-height: 1.45;
  }

  .sub-hero-lead {
    font-size: 14px;

    line-height: 1.95;
  }

  .sub-hero-side {
    display: none;
  }


  /* LOWER COMMON */

  .care-intro,
  .pregnancy-intro,
  .screening-intro,
  .first-guide-intro,
  .care-index-section,
  .care-detail,
  .pregnancy-detail,
  .screening-detail,
  .care-feature,
  .examination-section,
  .pregnancy-menu,
  .screening-menu,
  .pregnancy-referral,
  .screening-flow,
  .doctor-profile-section,
  .doctor-message,
  .doctor-policy,
  .doctor-care-area,
  .doctor-background,
  .first-quick-section,
  .first-flow-section,
  .first-belongings,
  .first-period,
  .first-insurance,
  .first-minor,
  .first-faq,
  .pregnancy-faq,
  .screening-faq,
  .faq-category-section,
  .faq-group-section,
  .faq-support,
  .access-detail-section,
  .access-hours,
  .access-map-section,
  .access-route-section,
  .access-transport,
  .access-visit-info,
  .concern-select,
  .sub-related {
    padding:
      76px 20px;
  }


  /* INTRO */

  .care-intro-inner,
  .pregnancy-intro-inner,
  .screening-intro-inner,
  .first-guide-intro-inner {
    display: block;
  }

  .care-intro-heading,
  .pregnancy-intro-heading,
  .screening-intro-heading,
  .first-guide-intro-heading {
    margin-bottom: 35px;
  }

  .care-intro-heading h2,
  .pregnancy-intro-heading h2,
  .screening-intro-heading h2,
  .first-guide-intro-heading h2 {
    margin-top: 28px;

    font-size: 29px;
  }

  .care-intro-body,
  .pregnancy-intro-body,
  .screening-intro-body,
  .first-guide-intro-body {
    padding-top: 0;
  }

  .care-intro-body p,
  .pregnancy-intro-body p,
  .screening-intro-body p,
  .first-guide-intro-body p {
    font-size: 14px;
  }


  /* CARE INDEX */

  .care-index-heading {
    margin-bottom: 42px;
  }

  .care-index-heading h2 {
    margin-top: 28px;

    font-size: 30px;
  }

  .care-index-grid,
  .pregnancy-menu-grid,
  .screening-menu-grid,
  .doctor-policy-grid,
  .first-quick-grid,
  .faq-category-grid,
  .sub-related-grid {
    grid-template-columns: 1fr;
  }

  .care-index-grid a,
  .care-index-grid a:nth-child(odd),
  .care-index-grid a:nth-child(4n + 1) {
    min-height: 150px;

    border-left:
      1px solid var(--line);
  }

  .care-index-grid a > span {
    margin-bottom: 20px;
  }


  /* VISUAL */

  .care-visual-section,
  .pregnancy-visual,
  .screening-visual,
  .doctor-consultation-section,
  .first-guide-visual,
  .faq-visual-section,
  .symptoms-consultation {
    display: block;
  }

  .care-visual,
  .pregnancy-visual-image,
  .screening-visual-image,
  .doctor-consultation-large,
  .first-guide-visual-image,
  .faq-visual-image,
  .symptoms-consultation-image {
    min-height: 0;
    height: 390px;
  }

  .care-visual-copy,
  .pregnancy-visual-copy,
  .screening-visual-copy,
  .doctor-consultation-copy,
  .first-guide-visual-copy,
  .faq-visual-copy,
  .symptoms-consultation-copy {
    padding:
      55px 20px 62px;
  }

  .care-visual-copy h2,
  .pregnancy-visual-copy h2,
  .screening-visual-copy h2,
  .doctor-consultation-copy h2,
  .first-guide-visual-copy h2,
  .faq-visual-copy h2,
  .symptoms-consultation-copy h2 {
    font-size: 28px;
  }


  /* DETAIL */

  .care-detail-inner,
  .pregnancy-detail-inner,
  .screening-detail-inner {
    display: block;
  }

  .care-detail-number,
  .pregnancy-detail-index,
  .screening-detail-index {
    display: flex;

    align-items: baseline;

    gap: 12px;

    margin-bottom: 25px;

    padding: 0;
  }

  .care-detail-number small,
  .pregnancy-detail-index small,
  .screening-detail-index small {
    margin-top: 0;
  }

  .care-detail-main h2,
  .pregnancy-detail-main h2,
  .screening-detail-main h2 {
    font-size: 29px;
  }

  .care-detail-lead,
  .pregnancy-detail-lead,
  .screening-detail-lead {
    font-size: 14px;
  }

  .care-symptom-list {
    display: block;
  }

  .care-symptom-list span {
    display: block;

    margin-bottom: 5px;
  }


  /* PILL */

  .care-feature-inner {
    display: flex;

    flex-direction: column;

    gap: 42px;
  }

  .care-feature-image {
    width:
      calc(100% + 40px);

    height: 390px;

    margin-left: -20px;
  }

  .care-feature-copy {
    max-width: none;
  }

  .care-feature-copy h2 {
    font-size: 29px;
  }


  /* EXAMINATION */

  .examination-heading {
    margin-bottom: 45px;
  }

  .examination-heading h2 {
    font-size: 30px;
  }

  .examination-grid,
  .screening-flow-list {
    grid-template-columns: 1fr;
  }

  .examination-grid::before {
    width: 100%;
  }

  .examination-grid article,
  .examination-grid article:nth-child(3),
  .screening-flow-list article,
  .screening-flow-list article:nth-child(3) {
    min-height: 0;

    border-left:
      1px solid var(--line);

    border-bottom:
      1px solid var(--line);
  }

  .examination-grid article > span,
  .screening-flow-list article > span {
    margin-bottom: 22px;
  }


  /* SHARED IMAGE COPY */

  .symptoms-guide-inner,
  .care-first-visit-inner,
  .bridal-check-inner,
  .screening-room-inner,
  .screening-first-inner,
  .doctor-care-visual-inner,
  .first-internal-inner,
  .first-consultation-inner,
  .faq-consultation-inner,
  .access-arrival-inner {
    display: flex;

    flex-direction: column;

    gap: 42px;
  }

  .symptoms-guide-photo,
  .care-first-image,
  .bridal-check-image,
  .screening-room-image,
  .screening-first-image,
  .doctor-care-visual-image,
  .first-internal-image,
  .first-consultation-image,
  .faq-consultation-image,
  .access-arrival-image {
    width:
      calc(100% + 40px);

    height: 390px;

    margin-left: -20px;
  }

  .symptoms-guide-copy h2,
  .care-first-copy h2,
  .bridal-check-copy h2,
  .screening-room-copy h2,
  .screening-first-copy h2,
  .doctor-care-visual-copy h2,
  .first-internal-copy h2,
  .first-consultation-copy h2,
  .faq-consultation-copy h2,
  .access-arrival-copy h2 {
    font-size: 29px;

    white-space: normal;
  }


  /* CHECKUP */

  .screening-info-grid,
  .pregnancy-point-grid,
  .preconception-list,
  .screening-test-list,
  .screening-bridal-list {
    grid-template-columns: 1fr;
  }

  .screening-info-grid article,
  .pregnancy-point-grid article {
    min-height: 0;

    border-left:
      1px solid var(--line);

    border-bottom:
      1px solid var(--line);
  }

  .pregnancy-menu-grid a,
  .screening-menu-grid a {
    min-height: 205px;

    border-left:
      1px solid var(--line);

    border-bottom:
      1px solid var(--line);
  }


  /* PREGNANCY */

  .pregnancy-timing,
  .fertility-position,
  .screening-price {
    padding:
      68px 20px;
  }

  .pregnancy-timing-inner,
  .fertility-position-inner,
  .screening-price-inner {
    display: block;
  }

  .pregnancy-notice {
    padding:
      60px 20px;
  }

  .pregnancy-notice-inner {
    display: block;
  }

  .pregnancy-referral-flow,
  .access-route-flow {
    display: block;
  }

  .pregnancy-flow-arrow,
  .access-route-arrow {
    padding:
      15px 0;

    text-align: center;

    transform: rotate(90deg);
  }


  /* DOCTOR PAGE */

  .doctor-profile-layout {
    display: flex;

    flex-direction: column;

    gap: 40px;
  }

  .doctor-profile-photo {
    width:
      calc(100% + 40px);

    height: 520px;

    margin-left: -20px;
  }

  .doctor-profile-name h2 {
    font-size: 34px;
  }

  .doctor-profile-message {
    font-size: 21px;
  }

  .doctor-profile-description {
    font-size: 14px;
  }

  .doctor-profile-data > div {
    grid-template-columns:
      110px 1fr;
  }

  .doctor-message-inner,
  .doctor-background-inner {
    display: block;
  }

  .doctor-message-heading,
  .doctor-background-heading {
    margin-bottom: 37px;
  }

  .doctor-message-heading h2,
  .doctor-policy-heading h2,
  .doctor-care-area-heading h2,
  .doctor-background-heading h2 {
    font-size: 29px;
  }

  .doctor-policy-grid {
    grid-template-columns: 1fr;
  }

  .doctor-policy-grid article {
    min-height: 0;

    border-left:
      1px solid var(--line);

    border-bottom:
      1px solid var(--line);
  }

  .doctor-background-content {
    display: block;
  }


  /* FIRST PAGE */

  .first-flow-heading h2,
  .first-belongings-heading h2,
  .first-period-heading h2,
  .first-insurance-heading h2,
  .first-minor-heading h2,
  .first-faq-heading h2 {
    font-size: 29px;
  }

  .first-flow-item {
    display: block;

    padding:
      38px 0;
  }

  .first-flow-number {
    display: flex;

    align-items: baseline;

    gap: 12px;

    margin-bottom: 20px;
  }

  .first-flow-content h3 {
    font-size: 26px;
  }

  .first-belongings-layout,
  .first-period-content,
  .first-insurance-grid {
    display: block;
  }

  .first-period-heading,
  .first-minor-heading {
    margin-bottom: 38px;
  }

  .first-period-box,
  .first-insurance-grid article + article {
    margin-top: 28px;
  }


  /* FAQ LOWER */

  .pregnancy-faq-inner,
  .screening-faq-inner,
  .first-faq-inner,
  .faq-group-inner,
  .faq-support-inner {
    display: block;
  }

  .pregnancy-faq-heading,
  .screening-faq-heading,
  .first-faq-heading,
  .faq-group-heading,
  .faq-support-heading {
    margin-bottom: 40px;
  }

  .faq-group-link,
  .first-faq-more {
    grid-column: auto;
  }


  /* ACCESS PAGE */

  .access-detail-grid {
    display: block;
  }

  .access-detail-main {
    margin-bottom: 40px;
  }

  .access-detail-image {
    width:
      calc(100% + 40px);

    height: 390px;

    margin-left: -20px;
  }

  .access-hours-inner,
  .access-visit-info-inner {
    display: block;
  }

  .access-hours-heading,
  .access-visit-info-heading {
    margin-bottom: 40px;
  }

  .access-hours-time {
    font-size: 48px;
  }

  .access-hours-table {
    overflow-x: auto;
  }

  .access-hours-row {
    min-width: 620px;
  }

  .access-map-layout {
    display: block;
  }

  .access-map-large,
  .access-map-large iframe {
    min-height: 390px;
  }

  .access-map-info {
    padding:
      42px 22px;
  }

  .access-transport-grid {
    grid-template-columns: 1fr;
  }

  .access-transport-grid article {
    min-height: 0;

    border-left:
      1px solid var(--line);

    border-bottom:
      1px solid var(--line);
  }


  /* SYMPTOMS PAGE */

  .concern-select-head {
    margin-bottom: 42px;
  }

  .concern-select-head h2 {
    font-size: 29px;
  }

  .concern-grid {
    grid-template-columns: 1fr;
  }

  .concern-card,
  .concern-card:nth-child(odd),
  .concern-card:nth-child(3n + 1) {
    min-height: 180px;

    border-left:
      1px solid var(--line);
  }

  .concern-number {
    margin-bottom: 20px;
  }

  .concern-card strong {
    font-size: 19px;
  }

  .concern-details {
    overflow: hidden;
  }

  .concern-detail {
    display: block;

    padding:
      68px 20px;
  }

  .concern-detail-meta {
    display: flex;

    align-items: baseline;

    gap: 12px;

    margin-bottom: 25px;
  }

  .concern-detail-meta > span {
    margin-bottom: 0;
  }

  .concern-detail-main h2 {
    font-size: 29px;
  }

  .concern-detail-lead {
    font-size: 14px;
  }

  .concern-detail-bottom {
    display: block;
  }

  .concern-related {
    margin-top: 30px;
  }


  /* RELATED */

  .sub-related-heading {
    margin-bottom: 42px;
  }

  .sub-related-heading h2 {
    font-size: 30px;
  }

  .sub-related-grid a {
    min-height: 145px;

    border-left:
      1px solid var(--line);

    border-bottom:
      1px solid var(--line);
  }


  /* MOBILE FIXED */

  .mobile-fixed-nav {
    position: fixed;
    z-index: 850;

    right: 0;
    bottom: 0;
    left: 0;

    display: grid;

    grid-template-columns:
      1fr 1fr 1.25fr;

    height: 68px;

    background:
      rgba(252, 251, 248, 0.98);

    border-top:
      1px solid var(--line);

    backdrop-filter: blur(15px);
  }

  .mobile-fixed-nav a,
  .mobile-fixed-nav button {
    display: flex;

    align-items: center;
    justify-content: center;

    flex-direction: column;

    padding: 0;

    background: transparent;

    border: 0;
    border-right:
      1px solid var(--line);
  }

  .mobile-fixed-nav button {
    color: #fff;
    background: var(--rose-deep);

    border-right: 0;
  }

  .mobile-fixed-nav span {
    color: #817a74;

    font-size: 8px;
  }

  .mobile-fixed-nav button span {
    color:
      rgba(255, 255, 255, 0.72);
  }

  .mobile-fixed-nav strong {
    margin-top: 2px;

    font-size: 11px;
    font-weight: 500;
  }

  .reservation-modal-panel {
    padding:
      48px 25px 35px;
  }

}


/* =========================================================
49 SMALL MOBILE
========================================================= */

@media (max-width: 390px) {

  .hero-title {
    font-size: 27px;
  }

  .hero-description {
    font-size: 13px;
  }

  .brand-intro-copy h2,
  .symptoms-title h2,
  .medical-head h2,
  .life-stage-title h2,
  .clinic-heading h2 {
    font-size: 29px;
  }

  .sub-hero-copy h1 {
    font-size: 34px;
  }

  .reservation-main h2 {
    font-size: 28px;
  }

}


/* =========================================================
50 REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;

    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      0.01ms !important;
  }

  .opening {
    display: none;
  }

  .reveal,
  .hero-reveal {
    opacity: 1;

    transform: none;
  }

  .image-mask::after {
    display: none;
  }

}