/* マルチポジションCT導入キャンペーン */
:root {
  --gray-border: #ceccb8;
  --gray-dot: #bbc3c6;
  --text-color01: #626250;
  --text-color02: #474435;
  --text-color03: #d3d3bf;
  --text-color04: #7e7e69;
  --gray-bg: #dcdacd;
  --black-color01: #03141c;
  --blue-color01: #264453;

  --white-color: #ebebdd;
  --white-color02: #fbfaf8;
  --red-color01: #7e1d17;

  --family-zen: 'Zen Old Mincho', 'YuMincho', 'Yu Mincho', 'MS PMincho', serif;
}

.c-bnr {
  transition: opacity 0.4s ease;

  @media (any-hover: hover) {
    &:hover {
      opacity: 0.7;
    }
  }

  &:focus-visible {
    opacity: 0.7;
  }
}

.c-bnr img {
  max-width: 100%;
  height: auto;
}

.c-bnr-fixed {
  --close-size: 3rem;
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 100;
  width: 24rem;
  max-width: calc(100% - 4rem);
  transition:
    opacity 0.3s ease-in-out,
    transform 0.3s ease-in-out,
    visibility 0.3s ease-in-out;

  @media print, screen and (min-width: 768px) {
    --close-size: 3.5rem;
    bottom: 3rem;
    width: 30rem;
  }

  @media print, screen and (min-width: 1024px) {
    right: 4rem;
    width: max-content;
  }
}

.c-bnr-fixed.is-close {
  opacity: 0;
  transform: translateY(0.5rem);
  visibility: hidden;
}

.c-bnr-fixed__link {
  z-index: 0;
  transition: opacity 0.3s ease-in-out;

  &:focus-visible {
    opacity: 0.7;
  }

  @media (any-hover: hover) {
    &:hover {
      opacity: 0.7;
    }
  }
}

.c-bnr-fixed__close {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
  width: var(--close-size);
  height: var(--close-size);
  transform: translate(0, -50%);
  border-radius: 50%;
  background-color: #35383e;
  color: white;
  border: 0.2rem solid white;
  margin-right: calc(var(--close-size) / 2 * -1);
  cursor: pointer;
  box-shadow: 0 0.4rem 0.4rem color-mix(in srgb, #000 6%, transparent);
  transition:
    color 0.4s ease,
    background-color 0.4s ease;

  @media (any-hover: hover) {
    &:hover,
    &:focus-visible {
      background-color: white;
      color: #35383e;
      text-decoration: none;
    }
  }

  &::before,
  &::after {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1.4rem;
    height: 0.2rem;
    border-radius: 1rem;
    background-color: currentColor;
    content: '';
    transform: translate(-50%, -50%);
  }

  &::before {
    transform: translate(-50%, -50%) rotate(45deg);
  }

  &::after {
    transform: translate(-50%, -50%) rotate(-45deg);
  }
}

.c-bnr-fixed__image {
  max-width: 100%;
  height: auto;
  display: block;
}

.p-campaign {
  font-size: 1.6rem;
  max-width: 100%;
  width: 104.5rem;
  margin-inline: auto;
  color: var(--text-color01);

  @media print, screen and (min-width: 1024px) {
    /* transform: translateX(-1.7rem); */
  }
}

.p-campaign img {
  max-width: 100%;
  height: auto;
  display: block;
}

.p-campaign-head {
  padding-bottom: 5rem;
}

.p-campaign-head__header {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--gray-border);
  padding-bottom: 2rem;

  @media print, screen and (min-width: 768px) {
    flex-direction: row-reverse;
    justify-content: space-between;
    padding-bottom: 4rem;
  }
}

.p-campaign-head__title {
  color: var(--text-color02);
  font-family: var(--family-zen);
  font-weight: 400;
  line-height: 1.4;

  @media print, screen and (min-width: 768px) {
    line-height: 1.2;
  }
}

.p-campaign-head__title-b {
  font-size: 3.2rem;
  display: block;
  margin-bottom: 1rem;

  @media print, screen and (min-width: 768px) {
    font-size: 5.3rem;
    margin-bottom: 2rem;
  }
}

.p-campaign-head__title-s {
  font-size: 2.2rem;
  display: block;

  @media print, screen and (min-width: 768px) {
    font-size: 2.8rem;
  }
}

.p-campaign-head__pickup {
  display: flex;
  gap: 0 1rem;
  margin-bottom: 0.5rem;

  @media print, screen and (min-width: 768px) {
    gap: 0 2.1rem;
    margin-bottom: 0;
  }
}

.p-campaign-head__pickup-label {
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  width: 9rem;
  flex: none;
  font-size: 1.8rem;
  font-family: var(--family-zen);
  font-weight: 400;
  letter-spacing: 0.5em;
  line-height: 1.4;
  border: 1px solid var(--gray-border);
  height: fit-content;

  @media print, screen and (min-width: 768px) {
    width: 13rem;
    font-size: 2.2rem;
  }
}

.p-campaign-head__pickup-label > span {
  position: relative;
  left: 0.2em;
}

.p-campaign-head__text {
  margin-top: 3rem;

  @media print, screen and (min-width: 768px) {
    margin-top: 5rem;
  }
}

.p-campaign-ct {
  margin-bottom: 6rem;
}

.p-campaign-ct__content {
  background: url(../images/common/bg-noise-20.png);
  background-color: #071c26;
  background-repeat: repeat;
  background-size: 200px;
  color: var(--white-color);
  border-radius: 4px;
  padding: 3rem 2rem;

  @media print, screen and (min-width: 768px) {
    padding: 4.3rem 4rem 2.8rem 5rem;
  }
}

.wep .p-campaign-ct__content {
  background: url(../images/common/bg-noise-20.png.webp);
  background-color: #071c26;
  background-repeat: repeat;
  background-size: 200px;
}

.p-campaign-ct__grid {
  @media print, screen and (min-width: 1024px) {
    display: grid;
    grid-template-columns: auto min(calc(401 / 1300 * 100vw), 40.1rem);
    gap: 0 3.4rem;
  }
}

.p-campaign-ct__header {
  margin-bottom: 2rem;

  @media print, screen and (min-width: 768px) {
    margin-bottom: 2rem;
    grid-row-start: 1;
  }
}

.p-campaign-ct__header-title {
  font-family: var(--family-zen);
  font-weight: 400;
  font-size: 2.8rem;
  line-height: 1.4;

  @media print, screen and (min-width: 768px) {
    font-size: 3.8rem;
  }
}

.p-campaign-ct__thumb {
  grid-row: span 2 / span 2;
}

.p-campaign-ct__thumb-img {
  @media print, screen and (max-width: 1023px) {
    margin-inline: auto;
  }
}

.p-campaign-ct__textarea {
  grid-row: span 3 / span 3;
}

.p-campaign-ct__text {
  letter-spacing: 0.05em;
}

.p-campaign-ct__btnarea {
  margin-top: 3.5rem;

  @media print, screen and (min-width: 768px) {
    margin-top: 4rem;
  }
}

.p-campaign-ct__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 6.5rem;
  border: 1px solid currentColor;
  font-family: var(--family-zen);
  font-weight: 400;
  border-radius: 5px;
  font-size: 1.5rem;
  padding-inline: 1.5rem;
  gap: 0 2rem;
  transition: background-color 0.3s ease;

  @media print, screen and (min-width: 1024px) {
    justify-content: flex-end;
    gap: 0 4.5rem;
    font-size: 1.7rem;
    padding-right: 4rem;
    padding-left: 2rem;
  }

  &:hover {
    @media (hover: hover) {
      background-color: var(--black-color01);

      .p-campaign-ct__btn-arrow {
        background-color: #d3d3bf;
      }

      .p-campaign-ct__btn-arrow svg {
        color: var(--black-color01);
        animation: arrow-move-x 0.6s;
      }
    }
  }

  .sec-reservation-button-title {
    display: block;
    text-align: center;
    line-height: 1.333;
  }
}

@keyframes arrow-move-x {
  0%,
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }

  40% {
    opacity: 0;
    transform: translate(120%, 0);
  }

  40.5% {
    opacity: 0;
    transform: translate(-120%, 0);
  }
}

.p-campaign-ct__btn-arrow {
  border: 1px solid var(--white-color);
  width: 6.4rem;
  height: 4rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  transition: all 0.3s ease 0s;
}

.p-campaign-ct__btn-arrow svg {
  fill: currentColor;
  color: currentColor;
}

/* 料金 */
.p-campaign-price {
  padding-top: 5rem;

  @media print, screen and (min-width: 768px) {
    padding-top: 7rem;
  }
}

.p-campaign-price__item {
  display: flex;
  flex-direction: column;
  gap: 1.5rem 0;

  @media print, screen and (min-width: 768px) {
    flex-direction: row;
    gap: 0 5rem;
  }
}

.p-campaign-price__item:not(:last-of-type) {
  margin-bottom: 3rem;

  @media print, screen and (min-width: 768px) {
    margin-bottom: 2.5rem;
  }
}

.p-campaign-price__title {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--family-zen);
  font-weight: 400;
  font-size: 1.8rem;
  line-height: calc(26 / 18);
  background-color: var(--text-color02);
  color: var(--gray-border);
  padding: 1rem 2.1rem;
  border-radius: 0.3rem;
  width: 100%;
  max-width: 100%;

  @media print, screen and (min-width: 768px) {
    padding: 1.5rem 2.1rem;
    width: 15rem;
    flex: none;
    height: 7rem;
  }
}

.p-campaign-price__title-ls {
  letter-spacing: 20px;
  position: relative;
  left: 0.5em;
}

.p-campaign-price__label {
  width: fit-content;

  @media print, screen and (max-width: 767px) {
    margin-inline: auto;
  }
}

.p-campaign-price__label--b {
  @media print, screen and (min-width: 768px) {
    transform: translateY(-1rem);
  }
}

.p-campaign-price__label-flex {
  line-height: 1.2;
  display: flex;
  flex-direction: column;
  justify-content: center;

  @media print, screen and (min-width: 768px) {
    flex-direction: row;
    justify-content: flex-start;
  }
}

.p-campaign-price__label-text {
  font-family: var(--family-zen);
  font-weight: 400;
  font-size: 2rem;
  color: var(--text-color02);

  @media print, screen and (min-width: 768px) {
    font-size: min(calc(28 / 1200 * 100vw), 2.8rem);
  }
}

.p-campaign-price__label-text__b {
  font-size: 3.4rem;

  @media print, screen and (min-width: 768px) {
    font-size: min(calc(51 / 1200 * 100vw), 5.1rem);
    margin-left: 0.5rem;
  }
}

.p-campaign-price__label-caption {
  text-align: right;
  display: block;
  font-size: 1.4rem;
  margin-top: 0.8rem;
  line-height: 1.4;
  color: var(--text-color04);

  @media print, screen and (min-width: 768px) {
    font-size: 1.6rem;
    margin-right: 1rem;
  }
}

/* 詳細情報 */
.p-campaign-description {
  padding-top: 5rem;

  @media print, screen and (min-width: 768px) {
    padding-top: 6rem;
  }
}

.p-campaign-description .c-heading-frame {
  margin-bottom: 0.2rem;
}

/* このような方におすすめ */
.p-campaign-osusume {
  padding-top: 5rem;

  @media print, screen and (min-width: 768px) {
    padding-top: 9.5rem;
  }
}

.p-campaign-osusume__title {
  font-family: var(--family-zen);
  font-weight: 400;
  line-height: 1.5;
  font-size: 2.4rem;
  margin-bottom: 2rem;

  @media print, screen and (min-width: 768px) {
    font-size: 3.2rem;
    margin-bottom: 3rem;
  }
}

.p-campaign-osusume-list {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(2, 1fr);

  @media print, screen and (min-width: 768px) {
    grid-template-columns: repeat(4, 1fr);
    gap: 2.8rem;
  }
}

.p-campaign-osusume-list__card {
}

.p-campaign-osusume-list__icobox {
  background-color: var(--gray-bg);
  border-radius: 0.5rem;
  aspect-ratio: 240 / 210;
  display: flex;
  align-items: center;
  justify-content: center;
}

.p-campaign-osusume-list__icobox-img {
  @media print, screen and (max-width: 1023px) {
    width: 30%;
  }
}

.p-campaign-osusume-list__text {
  font-family: var(--family-zen);
  font-weight: 400;
  line-height: 1.75;
  text-align: center;
  color: var(--text-color04);
  margin-top: 1.5rem;
  font-size: clamp(1rem, calc(14 / 375 * 100vw), 1.4rem);
  min-height: 4.5rem;
  display: flex;
  align-items: center;
  justify-content: center;

  @media print, screen and (min-width: 768px) {
    font-size: 1.8rem;
    margin-top: 2.5rem;
  }
}

/* ご受診いただけない方 */
.p-campaign-ng {
  background-color: var(--white-color02);
  margin-top: 5rem;
  padding: 3rem 2rem;

  @media print, screen and (min-width: 768px) {
    padding: 5rem 5rem 6rem;
    margin-top: 9rem;
  }
}

.p-campaign-ng__wrap {
  display: flex;
  flex-direction: column;
  gap: 2rem 0;

  @media print, screen and (min-width: 1024px) {
    flex-direction: row;
    gap: 0 3.2rem;
  }
}

.p-campaign-ng__title {
  font-family: var(--family-zen);
  font-weight: 400;
  font-size: 1.8rem;
  line-height: 1.5;
  color: var(--text-color02);
  max-width: 100%;
  width: 100%;
  flex: none;

  @media print, screen and (min-width: 1024px) {
    width: 20.8rem;
  }
}

.p-campaign-ng__textarea {
  font-size: 1.5rem;
  line-height: 1.5;
  letter-spacing: 0.06em;

  @media print, screen and (min-width: 1024px) {
    padding-left: 0.8rem;
  }
}

.p-campaign-ng__top {
  text-indent: -0.8em;
  padding-left: 0.8em;
  margin-bottom: 1.5rem;
}

.p-campaign-ng__top::before {
  content: '';
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  background-color: var(--blue-color01);
  border-radius: 50%;
  margin-right: 0.7rem;
  transform: translateY(-0.2em);
}

.p-campaign-ng__list {
  padding-left: 1.5rem;

  @media print, screen and (min-width: 768px) {
    padding-left: 2rem;
  }
}

.p-campaign-ng__list li {
  text-indent: -0.8em;
  padding-left: 0.8em;
}

.p-campaign-ng__list li:not(:last-of-type) {
  margin-bottom: 0.8rem;
}

.p-campaign-ng__list li::before {
  content: '';
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  background-color: var(--gray-dot);
  border-radius: 50%;
  margin-right: 0.7rem;
  transform: translateY(-0.2em);
}

.p-campaign-ng__bottom {
  margin-top: 2.5rem;
  text-indent: -1em;
  padding-left: 1em;

  @media print, screen and (min-width: 768px) {
    margin-top: 3.1rem;
  }
}

/* ユーティリティ */
.u-ib {
  display: inline-block;
}

.c-text-normal {
  font-size: 1.5rem;
  line-height: 1.66;
  letter-spacing: 0.05em;
}

@media print, screen and (min-width: 768px) {
  .u-hidden--over-md {
    display: none;
  }
}

@media print, screen and (max-width: 767px) {
  .u-hidden--break-md {
    display: none;
  }
}

.c-heading-frame {
  background-color: var(--blue-color01);
  color: var(--text-color03);
  font-size: 1.8rem;
  line-height: 1.5;
  padding: 1.6rem 2rem;

  @media print, screen and (min-width: 768px) {
    padding: 1.6rem 3rem;
  }
}

.c-heading-frame__title {
  font-weight: 700;
  font-size: 1em;
}

.c-table-row {
  width: 100%;
  line-height: 1.5;
  color: var(--text-color01);
}

.c-table-row table {
  width: 100%;
  table-layout: fixed;
}

.c-table-row tbody th {
  width: min(calc(200 / 1380 * 100vw), 20rem);
  text-align: left;
  font-weight: 400;
  border-bottom: 1px solid var(--gray-border);
  padding: 2.4rem 2.6rem 2.4rem 0;
}

.c-table-row tbody td {
  border-bottom: 1px solid var(--gray-border);
  padding: 2.4rem 0 2.4rem 0;
  width: 72.2rem;
}

@media print, screen and (max-width: 1200px) {
  .c-table-row table {
    display: block;
    width: 100%;
  }

  .c-table-row tbody {
    display: block;
    width: 100%;
  }

  .c-table-row tbody tr {
    display: block;
    width: 100%;
  }

  .c-table-row tbody th {
    display: block;
    width: 100%;
    border-bottom: none;
    padding: 2rem 0 1rem 0;
    font-weight: 700;
  }

  .c-table-row tbody td {
    display: block;
    width: 100%;
    padding: 0 0 2rem 0;
  }
}

.c-table-row-price {
  display: flex;
  align-items: center;
  flex-direction: column;
  line-height: 1.2;
  color: var(--text-color04);

  @media print, screen and (min-width: 768px) {
    flex-direction: row;
    align-items: baseline;
  }
}

.c-table-row-price__left {
  font-size: 1.6rem;

  @media print, screen and (min-width: 768px) {
    white-space: nowrap;
  }
}

.c-table-row-price__left-b {
  position: relative;
  font-size: 2.8rem;
  font-weight: 400;
  font-family: var(--family-zen);

  @media print, screen and (min-width: 768px) {
    font-size: min(calc(37 / 1380 * 100vw), 3.7rem);
  }
}

.c-table-row-price__left-b::before {
  content: '';
  display: block;
  width: 100%;
  height: 0.2rem;
  background-color: var(--red-color01);
  position: absolute;
  left: 0;
  top: 2.6rem;
}

.c-table-row-price__left-b::after {
  content: '';
  display: block;
  width: 100%;
  height: 0.2rem;
  background-color: var(--red-color01);
  position: absolute;
  left: 0;
  bottom: 2.1rem;
}

.c-table-row-price__arrow {
  font-size: 1.4rem;

  @media print, screen and (min-width: 768px) {
    margin-left: 1.9rem;
    margin-right: 2.7rem;
    position: relative;
    top: -0.8rem;
    left: 0.4rem;
  }

  @media print, screen and (max-width: 1023px) {
    margin-block: 1rem;
  }

  @media print, screen and (max-width: 767px) {
    transform: rotate(90deg);
  }
}

.c-table-row-price__right {
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateY(-1rem);

  @media print, screen and (min-width: 768px) {
    align-items: baseline;
    flex-direction: row;
    transform: translateY(0);
  }
}

.c-table-row-price__right-wrap {
  position: relative;
  top: -0.2rem;
}

.c-table-row-price__right-l {
  @media print, screen and (min-width: 768px) {
    font-size: 1.8rem;
    margin-right: 4.4rem;
    flex: none;
  }
}

.c-table-row-price__right-num {
  color: var(--red-color01);
  font-size: 4rem;
  font-family: var(--family-zen);
  font-weight: 400;

  @media print, screen and (min-width: 768px) {
    font-size: min(calc(56 / 1380 * 100vw), 5.6rem);
  }
}

.c-table-row-price__right-r {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--red-color01);
  color: var(--white-color);
  font-family: var(--family-zen);
  font-weight: 400;
  position: relative;
  min-height: 5.6rem;
  max-width: 100%;
  width: 27rem;
  border-radius: 5rem;
  font-size: 2rem;
  margin-top: 2rem;

  @media print, screen and (min-width: 768px) {
    font-size: 2.5rem;
    margin-top: 0;
    /* width: min(calc(270 / 1380 * 100vw), 27rem); */
  }
}

.c-table-row-price__right-r::before {
  content: '';
  display: block;
  width: 1.2rem;
  height: 0.9rem;
  background-color: var(--red-color01);
  position: absolute;
  left: -0.9rem;
  top: 50%;
  transform: translateY(-50%);
  -webkit-clip-path: polygon(0 50%, 100% 100%, 100% 0);
  clip-path: polygon(0 50%, 100% 100%, 100% 0);

  @media print, screen and (max-width: 767px) {
    left: 50%;
    top: -0.7rem;
    transform: translate(-50%, 0);
    -webkit-clip-path: polygon(50% 0, 0 100%, 100% 100%);
    clip-path: polygon(50% 0, 0 100%, 100% 100%);
  }
}

.c-table-row-price__right-s {
  font-size: 1.7rem;

  @media print, screen and (min-width: 768px) {
    font-size: 2.1rem;
  }
}

.c-table-row-price__right-s__b {
  font-size: 2.4rem;

  @media print, screen and (min-width: 768px) {
    font-size: min(calc(36 / 1380 * 100vw), 3.6rem);
  }
}

/* ご予約方法 */
.c-contact-section {
  border-radius: 0.5rem;
  background: url(../images/common/bg-noise-20.png);
  background-color: #071c26;
  background-repeat: repeat;
  background-size: 200px;
  color: var(--white-color);
  padding: 3rem 2rem;

  @media print, screen and (min-width: 768px) {
    padding: 5rem 2rem 6rem;
  }
}

.c-contact-section__header {
  font-family: var(--family-zen);
  color: #d3d3bf;
  font-size: 2.2rem;
  line-height: 1.5;
  margin-bottom: 1.5rem;

  @media print, screen and (min-width: 768px) {
    font-size: 2.6rem;
    margin-bottom: 2rem;
  }
}

.c-contact-section__header-title {
  font-size: 1em;
  font-weight: 400;
  text-align: center;
}

.c-contact-section__tel {
  text-align: center;
  line-height: 1;
}

.c-contact-section__tel-link {
  font-family: var(--family-zen);
  font-weight: 400;
  color: var(--white-color);
  font-size: clamp(1rem, calc(20 / 375 * 100vw), 2rem);

  @media print, screen and (min-width: 768px) {
    font-size: 3.5rem;
  }
}

.c-contact-section__tel-num {
  font-size: clamp(1rem, calc(36 / 375 * 100vw), 3.6rem);

  @media print, screen and (min-width: 768px) {
    font-size: 5.1rem;
  }
}

.c-contact-section__time {
  text-align: center;
  color: #d3d3bf;
  line-height: 1.5;
  margin-top: 2rem;

  @media print, screen and (min-width: 768px) {
    margin-top: 3rem;
  }
}