/* Reset
----------------------------------------------------*/
/* Google reCAPTCHA */
.grecaptcha-badge {
  visibility: hidden;
}

#breadcrumbs {
  box-sizing: border-box;
}

#contents {
  width: calc(100% - var(--home-gutter-width) * 2);
}

@media (max-width: 1024px) {
  #contents {
    overflow-x: unset;
  }
}

:is(.doctors-kv, .doctors-kv *),
:is(.doctors-kv, .doctors-kv *):before,
:is(.doctors-kv, .doctors-kv *):after {
  box-sizing: border-box;
  font-feature-settings: 'palt';
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0.05em;
  margin: 0;
  padding: 0;
  transition: unset;
}

/* KV
----------------------------------------------------*/
/* Layout */
.doctors-kv {
  background: var(--color-white);
  display: grid;
  justify-items: center;
}

/* Main */
.doctors-kv-main {
  inline-size: var(--content-width);
  padding-top: calc(var(--spacing-unit-rem) * 6.5);
  padding-bottom: calc(var(--spacing-unit-rem) * 12.5);
}

@media (max-width: 1024px) {
  .doctors-kv-main {
    padding-bottom: calc(var(--spacing-unit-rem) * 8);
  }
}

@media (max-width: 767px) {
  .doctors-kv-main {
    padding-top: calc(var(--spacing-unit-rem) * 3);
    padding-bottom: calc(var(--spacing-unit-rem) * 6);
  }
}

/* Image */
.doctors-kv-image img {
  height: auto;
  width: 100%;
}

/* Message */
.doctors-kv-message {
  display: grid;
  gap: calc(var(--spacing-unit-rem) * 2);
  padding-top: calc(var(--spacing-unit-rem) * 4);
}

.doctors-kv-message-line {
  font-family: var(--font-mincho);
  font-size: var(--font-size-200);
  font-weight: var(--font-weight-semi-bold);
  line-height: 1.75;
  text-align: center;
}

@media (max-width: 767px) {
  .doctors-kv-message {
    padding-top: calc(var(--spacing-unit-rem) * 3);
  }
}

/* Navigation */
.doctors-kv-navigation {
  padding-top: calc(var(--spacing-unit-rem) * 6);
}

.doctors-kv-navigation-list {
  display: grid;
  gap: calc(var(--spacing-unit-rem) * 10);
  grid-template-columns: repeat(4, 1fr);
}

.doctors-kv-navigation-text {
  --border-bottom-width: 2px;
  --icon-size: calc(24 / var(--rem-to-px) * var(--rem-unit));
  align-items: center;
  border-bottom: var(--border-bottom-width) solid var(--color-line-gray);
  display: grid;
  font-size: var(--font-size-400);
  gap: calc(var(--spacing-unit-rem) * 1);
  grid-template-columns: 1fr var(--icon-size);
  letter-spacing: 0.1em;
  line-height: 1;
  padding: calc(var(--spacing-unit-rem) * 1);
  position: relative;
  transition: color var(--duration-default) ease;
}

.doctors-kv-navigation-text:is(:link, :visited) {
  color: var(--color-black);
}

.doctors-kv-navigation-text::before {
  background: rgba(214, 90, 119, 0.7);
  content: '';
  position: absolute;
  bottom: calc(0px - var(--border-bottom-width));
  left: 0;
  scale: 0 1;
  transform-origin: left;
  transition: scale var(--duration-default) ease;
  height: var(--border-bottom-width);
  width: 100%;
}

.doctors-kv-navigation-text::after {
  aspect-ratio: 1 / 1;
  background-image: url('data:image/svg+xml;utf-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 0C18.6274 0 24 5.37258 24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0ZM12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1ZM18 9.66602L12 15.7305L6 9.66602L6.66699 9L12 14.3311L17.333 9L18 9.66602Z" fill="%23d65a77" /></svg>');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  content: '';
  display: grid;
  place-items: center;
  transition: background-image var(--duration-quickly) ease;
  height: var(--icon-size);
}

.doctors-kv-navigation-text:hover {
  /* Reset */
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  .doctors-kv-navigation-text:hover {
    color: var(--color-accent);
    transition-duration: var(--duration-quickly);
  }

  .doctors-kv-navigation-text:hover::before {
    scale: 1 1;
    transition-duration: var(--duration-quickly);
  }

  .doctors-kv-navigation-text:hover::after {
    background-image: url('data:image/svg+xml;utf-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 0C18.6274 0 24 5.37258 24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0ZM12 14.3311L6.66699 9L6 9.66602L12 15.7305L18 9.66602L17.333 9L12 14.3311Z" fill="%23d65a77" /></svg>');
    transition-duration: var(--duration-quickly);
  }
}

@media (max-width: 1024px) {
  .doctors-kv-navigation-list {
    gap: calc(var(--spacing-unit-rem) * 3);
  }
}

@media (max-width: 767px) {
  .doctors-kv-navigation-list {
    gap: calc(var(--spacing-unit-rem) * 2) calc(var(--spacing-unit-rem) * 3.75);
    grid-template-columns: repeat(2, 1fr);
  }

  .doctors-kv-navigation-text {
    font-size: var(--font-size-200);
    padding: calc(var(--spacing-unit-rem) * 0.5) calc(var(--spacing-unit-rem) * 1) calc(var(--spacing-unit-rem) * 1);
  }
}

/* Main
----------------------------------------------------*/
/* Layout */
.doctors-main {
  background: var(--color-white);
  display: grid;
  justify-items: center;
}

.doctors-main-wrap {
  inline-size: var(--content-width);
}

.doctors-main-inner {
  display: grid;
  gap: calc(var(--spacing-unit-rem) * 15);
}

@media (max-width: 767px) {
  .doctors-main {
    --inner-width-preferred: 351;
    --item-width-preferred: 310;
    --doctor-item-width: calc(var(--item-width-preferred) / var(--inner-width-preferred) * 100%);
  }

  .doctors-main-wrap {
    display: grid;
    gap: calc(var(--spacing-unit-rem) * 1.5);
    grid-template-columns: var(--doctor-item-width) 1fr;
  }

  .doctors-main-inner {
    gap: calc(var(--spacing-unit-rem) * 10);
  }
}

/* Block */
.doctors-block-heading {
  font-size: var(--font-size-900);
  letter-spacing: 0.1em;
  line-height: 1;
  margin: auto;
  padding: calc(var(--spacing-unit-rem) * 7.5) calc(var(--spacing-unit-rem) * 2) 0;
  position: relative;
  z-index: 1;
}

.doctors-block-heading::before {
  background: var(--color-base);
  content: '';
  margin-inline: calc(50% - 50vw);
  position: absolute;
  top: 0;
  left: 0;
  height: calc(var(--spacing-unit-rem) * 10);
  width: 100svw;
  z-index: -1;
}

.doctors-block-main {
  padding-top: calc(var(--spacing-unit-rem) * 10);
}

.doctors-block-main-inner {
  display: grid;
  gap: calc(var(--spacing-unit-rem) * 7.5) calc(var(--spacing-unit-rem) * 6);
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1024px) {
  .doctors-block-heading {
    font-size: var(--font-size-700);
  }

  .doctors-block-main {
    padding-top: calc(var(--spacing-unit-rem) * 7);
  }

  .doctors-block-main-inner {
    gap: calc(var(--spacing-unit-rem) * 4);
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .doctors-block-heading {
    font-size: calc(27 / var(--rem-to-px) * var(--rem-unit));
    line-height: 1.75;
    padding: calc(var(--spacing-unit-rem) * 4) 0 0;
  }

  .doctors-block-heading::before {
    margin-inline-start: calc(0px - var(--content-width-offset));
    height: calc(var(--spacing-unit-rem) * 7.5);
  }

  .doctors-block-main {
    padding-top: calc(var(--spacing-unit-rem) * 5);
  }

  .doctors-block-main-inner {
    gap: calc(var(--spacing-unit-rem) * 7.5);
    grid-template-columns: 1fr;
  }
}

/* Navigation */
.doctors-main-navigation {
  display: grid;
  justify-content: flex-end;
  opacity: 0;
  position: sticky;
  top: calc(var(--header-height) + calc(var(--spacing-unit-rem) * 2.5));
  left: 0;
  translate: 20px 0;
  transition-property: opacity, translate;
  transition-duration: var(--duration-default);
  transition-timing-function: ease;
  transition-delay: 0.2s;
  height: max-content;
  z-index: 1;
}

.doctors-main-navigation:is(.-visible) {
  opacity: 1;
  translate: 0 0;
}

.doctors-main-navigation-list {
  display: grid;
  gap: calc(var(--spacing-unit-rem) * 3);
}

.doctors-main-navigation-text {
  --icon-size: 18px;
  display: grid;
  font-size: var(--font-size-100);
  gap: calc(var(--spacing-unit-rem) * 0.5);
  grid-template-columns: 1fr var(--icon-size);
  transition: color var(--duration-quickly) ease;
  writing-mode: vertical-lr;
}

.doctors-main-navigation-text:is(:link, :visited) {
  color: var(--color-black);
}

.doctors-main-navigation-text:is(.-current) {
  color: var(--color-accent);
}

.doctors-main-navigation-text::after {
  aspect-ratio: 1 / 1;
  background-image: url('data:image/svg+xml;utf-8,<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><path d="M9.37012 1.80957C13.1744 2.00232 16.2001 5.14784 16.2002 9L16.1904 9.37012C15.9977 13.1744 12.8522 16.2001 9 16.2002L8.62891 16.1904C4.94758 16.0035 1.99609 13.0515 1.80957 9.37012L1.7998 9C1.79991 5.02371 5.02371 1.79991 9 1.7998L9.37012 1.80957ZM9 2.7998C5.57599 2.79991 2.79991 5.57599 2.7998 9C2.79991 12.424 5.57599 15.2001 9 15.2002C12.424 15.2001 15.2001 12.424 15.2002 9C15.2001 5.57599 12.424 2.79991 9 2.7998ZM12.4893 7.39355L12.9062 7.80957L13.0117 7.91504L9.0498 11.9131L5.08789 7.91504L5.19336 7.80957L5.61035 7.39355L5.7168 7.28809L5.82227 7.39355L9.0498 10.6143L12.2773 7.39355L12.3828 7.28809L12.4893 7.39355Z" fill="%23d65a77" /></svg>');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  content: '';
  transition: background-image var(--duration-quickly) ease;
  height: var(--icon-size);
  width: auto;
}

.doctors-main-navigation-text:is(.-current):after {
  background-image: url('data:image/svg+xml;utf-8,<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><path d="M9 1.7998C12.9764 1.7998 16.2002 5.02355 16.2002 9C16.2002 12.9764 12.9764 16.2002 9 16.2002C5.02357 16.2002 1.79981 12.9764 1.7998 9C1.7998 5.02357 5.02357 1.79983 9 1.7998ZM12.2773 7.39355L9.0498 10.6143L5.82227 7.39355L5.7168 7.28809L5.61035 7.39355L5.19336 7.80957L5.08789 7.91504L5.19336 8.02148L8.94336 11.8057L9.0498 11.9131L9.15625 11.8057L12.9062 8.02148L13.0117 7.91504L12.9062 7.80957L12.4893 7.39355L12.3828 7.28809L12.2773 7.39355Z" fill="%23d65a77" /></svg>');
}

.doctors-main-navigation-text:hover {
  /* Reset */
  text-decoration: none;
}

@media (min-width: 768px) {
  .doctors-main-navigation {
    display: none;
  }
}

/* Item
----------------------------------------------------*/
/* Image */
.doctors-item-image img {
  aspect-ratio: 370 / 350;
  height: auto;
  width: 100%;
}

/* Profile */
.doctors-item-profile {
  padding-top: calc(var(--spacing-unit-rem) * 2);
}

.doctors-item-name {
  --gap-x: calc(var(--spacing-unit-rem) * 2);
  align-items: center;
  display: grid;
  gap: calc(var(--spacing-unit-rem) * 0.5) var(--gap-x);
  grid-template-columns: auto 1fr;
}

.doctors-item-title {
  display: block;
  font-size: var(--font-size-200);
}

.doctors-item-name-ja {
  /* Reset */
  margin-bottom: 0;

  /* Custom */
  font-size: var(--font-size-500);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.1em;
  line-height: 1.67;
}

.doctors-item-name-en {
  display: block;
  font-size: var(--font-size-100);
  line-height: 1.71;
}

.doctors-item-name:has(.doctors-item-title) {
  grid-template-areas:
    'title name-ja'
    'name-en name-en';
}

.doctors-item-name:has(.doctors-item-title) .doctors-item-title {
  grid-area: title;
}

.doctors-item-name:has(.doctors-item-title) .doctors-item-name-ja {
  grid-area: name-ja;
}

.doctors-item-name:has(.doctors-item-title:empty) .doctors-item-name-ja {
  margin-left: calc(0px - var(--gap-x));
}

.doctors-item-name:has(.doctors-item-title) .doctors-item-name-en {
  grid-area: name-en;
}

.doctors-item-department {
  display: block;
  font-size: var(--font-size-200);
  line-height: 1.75;
  padding-top: calc(var(--spacing-unit-rem) * 2);
}

.doctors-item-name:not(:has(.doctors-item-title)) + .doctors-item-department {
  padding-top: calc(var(--spacing-unit-rem) * 1);
}

/* Licenses */
.doctors-item-licenses {
  border-top: 1px solid var(--color-black);
  margin-top: calc(var(--spacing-unit-rem) * 2);
  padding-top: calc(var(--spacing-unit-rem) * 2);
}

.doctors-item-license {
  --marker-width: 0.8em;
  font-size: var(--font-size-200);
  line-height: 1.75;
  padding-left: var(--marker-width);
  position: relative;
}

.doctors-item-license::before {
  content: '・';
  width: var(--marker-width);
  position: absolute;
  top: 0;
  left: 0;
}

.doctors-item-license > small {
  font-size: var(--font-size-100);
}

/* Description */
.doctors-item-description {
  padding-top: calc(var(--spacing-unit-rem) * 2);
}

.doctors-item-description-text {
  background: var(--color-light-gray);
  font-size: var(--font-size-100);
  line-height: 1.71;
  padding: calc(var(--spacing-unit-rem) * 2);
}

/* Treatments */
.doctors-item-treatments {
  display: grid;
  gap: calc(var(--spacing-unit-rem) * 2);
  padding-top: calc(var(--spacing-unit-rem) * 2);
}

.doctors-item-treatment-link {
  --border-bottom-width: 2px;
  --icon-size: calc(30 / var(--rem-to-px) * var(--rem-unit));
  align-items: center;
  border-bottom: var(--border-bottom-width) solid var(--color-line-gray);
  display: grid;
  font-size: var(--font-size-200);
  font-weight: var(--font-weight-medium);
  gap: calc(var(--spacing-unit-rem) * 1);
  grid-template-columns: 1fr var(--icon-size);
  padding: calc(var(--spacing-unit-rem) * 0.5) calc(var(--spacing-unit-rem) * 1);
  position: relative;
  transition: color var(--duration-default) ease;
}

.doctors-item-treatment-link:is(:link, :visited) {
  color: var(--color-black);
}

.doctors-item-treatment-link::before {
  background: rgba(214, 90, 119, 0.7);
  content: '';
  position: absolute;
  bottom: calc(0px - var(--border-bottom-width));
  left: 0;
  scale: 0 1;
  transform-origin: left;
  transition: scale var(--duration-default) ease;
  height: var(--border-bottom-width);
  width: 100%;
}

.doctors-item-treatment-link::after {
  aspect-ratio: 1 / 1;
  background-color: var(--color-light-black);
  content: '';
  mask-image: url('data:image/svg+xml;utf-8,<svg viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"><path d="M3 15C3 8.37258 8.37258 3 15 3C21.6274 3 27 8.37258 27 15C27 21.6274 21.6274 27 15 27C8.37258 27 3 21.6274 3 15ZM17.3311 15L12 20.333L12.666 21L18.7305 15L12.666 9L12 9.66699L17.3311 15Z" /></svg>');
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  transition: background-color var(--duration-default) ease;
  height: var(--icon-size);
}

.doctors-item-treatment-link:hover {
  /* Reset */
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  .doctors-item-treatment-link:hover {
    color: var(--color-accent);
    transition-duration: var(--duration-quickly);
  }

  .doctors-item-treatment-link:hover::before {
    scale: 1 1;
    transition-duration: var(--duration-quickly);
  }

  .doctors-item-treatment-link:hover::after {
    background-color: var(--color-accent);
    transition-duration: var(--duration-quickly);
  }
}

/* More */
.doctors-item-more {
  padding: calc(var(--spacing-unit-rem) * 3) calc(var(--spacing-unit-rem) * 3.75) 0;
}

.doctors-item-more-button {
  --icon-size: calc(12 / var(--rem-to-px) * var(--rem-unit));
  align-items: center;
  border: 1px solid var(--color-black);
  display: grid;
  font-size: var(--font-size-200);
  font-weight: var(--font-weight-medium);
  gap: calc(var(--spacing-unit-rem) * 1);
  grid-template-columns: 1fr var(--icon-size);
  line-height: 1;
  margin: auto;
  padding: calc(var(--spacing-unit-rem) * 2) calc(var(--spacing-unit-rem) * 3);
  transition-property: background, color;
  transition-duration: var(--duration-quickly);
  transition-timing-function: ease;
  max-width: 310px;
}

.doctors-item-more-button:is(:link, :visited) {
  color: var(--color-black);
}

.doctors-item-more-button::after {
  aspect-ratio: 1 / 1;
  background-color: var(--color-black);
  content: '';
  mask-image: url('data:image/svg+xml;utf-8,<svg viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><path d="M4.25879 0.333008L10.3857 6L4.25879 11.667L3.89844 12L3.54004 11.665L2.5 10.6924L7.51855 6L2.5 1.30762L3.54004 0.334961L3.89844 0L4.25879 0.333008Z" /></svg>');
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  transition: background-color var(--duration-quickly) ease;
  height: var(--icon-size);
}

.doctors-item-more-button:hover {
  /* Reset */
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  .doctors-item-more-button:hover {
    background: var(--color-black);
    color: var(--color-white);
  }

  .doctors-item-more-button:hover::after {
    background-color: var(--color-white);
  }
}

@media (max-width: 767px) {
  .doctors-item-more {
    padding: calc(var(--spacing-unit-rem) * 3) 0 0;
  }

  .doctors-item-more-button {
    max-width: unset;
  }
}

/* Banner
----------------------------------------------------*/
.doctors-banner {
  background: var(--color-white);
  display: grid;
  justify-items: center;
}

.doctors-banner-inner {
  inline-size: var(--content-width);
  padding-top: calc(var(--spacing-unit-rem) * 12.5);
  padding-bottom: calc(var(--spacing-unit-rem) * 10);
}

.doctors-banner-link {
  background: var(--color-image-hover);
  display: block;
}

.doctors-banner-link img {
  transition: opacity var(--duration-quickly) ease;
  height: auto;
  width: 100%;
}

@media (hover: hover) and (pointer: fine) {
  .doctors-banner-link:hover img {
    opacity: 0.75;
  }
}

@media (max-width: 767px) {
  .doctors-banner-inner {
    padding-top: calc(var(--spacing-unit-rem) * 10.5);
    padding-bottom: calc(var(--spacing-unit-rem) * 5);
  }
}
