/* ========================================
   FV
   ======================================== */
/* PC・中間幅・SP確認済み。専用単位で同比率縮小し、他セクションのremには影響させない。 */
.fv {
  /* FV専用の寸法基準。通常は既存の1remと同じ。 */
  --fv-unit: 1rem;
  position: relative;
}

.fv__visual {
  position: relative;
  isolation: isolate;
  width: 92.9166666667%;
  height: calc(76.5 * var(--fv-unit));
  margin-inline: auto;
  overflow: hidden;
  border-top-right-radius: calc(4.8 * var(--fv-unit));
  background: #fff;
}

.fv__photo {
  position: absolute;
  top: 0;
  right: 0;
  z-index: -2;
  width: 73.6694677871%;
  height: 100%;
  object-fit: cover;
}

.fv__visual::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(90deg, #fff 0%, #fff 25%, rgb(255 255 255 / 94%) 29%, rgb(255 255 255 / 65%) 37%, rgb(255 255 255 / 0%) 55%);
}

/* コピー・ポイント */
.fv__moon {
  position: absolute;
  top: calc(3.3 * var(--fv-unit));
  left: calc(5.6 * var(--fv-unit));
  width: calc(13.2 * var(--fv-unit));
}

.fv__content {
  position: absolute;
  top: calc(18.2 * var(--fv-unit));
  left: calc(6.2 * var(--fv-unit));
  width: calc(60 * var(--fv-unit));
  max-width: calc(100% - calc(12.4 * var(--fv-unit)));
}

.fv__area-sp {
  display: none;
}

.fv__area, .fv__heading, .fv__lead {
  font-family: "M PLUS 1p", sans-serif;
}

.fv__area {
  display: table;
  padding: calc(1 * var(--fv-unit)) calc(2 * var(--fv-unit));
  border-radius: 100vmax;
  background: #0281cd;
  color: #fff;
  font-size: calc(2 * var(--fv-unit));
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
}

.fv__heading {
  margin-top: calc(1.2 * var(--fv-unit));
  color: #172c57;
  font-size: calc(5 * var(--fv-unit));
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -.02em;
  white-space: nowrap;
}

.fv__heading-break {
  display: none;
}

.fv__heading-ending {
  font-size: calc(4.5 * var(--fv-unit));
}

.fv__lead {
  margin-top: calc(.6 * var(--fv-unit));
  color: #172c57;
  font-family: "M PLUS 1p", sans-serif;
  font-size: calc(2.8 * var(--fv-unit));
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
}

.fv__description {
  margin-top: calc(1.5 * var(--fv-unit));
  font-size: calc(2 * var(--fv-unit));
  line-height: 1.6;
}

.fv__points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(1.2 * var(--fv-unit));
  width: calc(50.4 * var(--fv-unit));
  max-width: 100%;
  padding: 0;
  margin: calc(2.4 * var(--fv-unit)) 0 0;
  list-style: none;
}

.fv__points img {
  width: 100%;
}

.fv__points p {
  margin-top: calc(1 * var(--fv-unit));
  font-size: calc(1.6 * var(--fv-unit));
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
  white-space: nowrap;
}

.fv__note {
  margin-top: calc(1.6 * var(--fv-unit));
  font-size: calc(1.4 * var(--fv-unit));
  line-height: 1.8;
  white-space: nowrap;
}

/* 診療案内（PC・SP共通のHTML） */
.fv__clinic {
  position: absolute;
  right: 3.5416666667%;
  bottom: 0;
  display: grid;
  grid-template-columns: calc(36 * var(--fv-unit)) minmax(0, 1fr);
  gap: calc(3 * var(--fv-unit));
  width: calc(88.8 * var(--fv-unit));
  min-height: calc(17 * var(--fv-unit));
  padding: calc(2.6 * var(--fv-unit)) 0 0 calc(3.4 * var(--fv-unit));
  border-top-left-radius: calc(2.2 * var(--fv-unit));
  background: #fff;
}

.fv__today {
  position: relative;
  padding-right: calc(3 * var(--fv-unit));
  border-right: 1px solid #e4e4e4;
}

.fv__today-heading {
  color: #0281cd;
  font-family: "Roboto", sans-serif;
  font-size: calc(1.8 * var(--fv-unit));
  line-height: 1.4;
}

.fv__today-heading img {
  position: absolute;
  top: calc(.8 * var(--fv-unit));
  right: calc(3 * var(--fv-unit));
  width: calc(3.2 * var(--fv-unit));
}

.fv__today-body {
  display: flex;
  align-items: center;
  gap: calc(1.8 * var(--fv-unit));
  margin-top: calc(.6 * var(--fv-unit));
}

.fv__status {
  display: grid;
  place-items: center;
  flex: 0 0 calc(9 * var(--fv-unit));
  height: calc(8.6 * var(--fv-unit));
  border-radius: calc(1.2 * var(--fv-unit));
  background: #0281cd;
  color: #fff;
  font-size: calc(1.8 * var(--fv-unit));
  font-weight: 700;
}

.fv__status-icon {
  display: none;
}

.fv__date {
  font-family: "Roboto", sans-serif;
}

.fv__year {
  display: block;
  font-size: calc(2.4 * var(--fv-unit));
  line-height: 1.1;
}

.fv__day {
  display: flex;
  align-items: center;
  gap: calc(.8 * var(--fv-unit));
  font-size: calc(6.4 * var(--fv-unit));
  line-height: .9;
  white-space: nowrap;
}

.fv__weekday {
  display: grid;
  place-items: center;
  width: calc(4 * var(--fv-unit));
  height: calc(4 * var(--fv-unit));
  border: 1px solid currentColor;
  border-radius: 50%;
  font-family: "Noto Sans JP", sans-serif;
  font-size: calc(2 * var(--fv-unit));
}

.fv__today-hours {
  margin-top: calc(.6 * var(--fv-unit));
  color: #7e7e7e;
  font-size: calc(1.4 * var(--fv-unit));
  line-height: 1.5;
}

.fv__schedule {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: calc(1.4 * var(--fv-unit));
  line-height: 1.6;
}

.fv__schedule th, .fv__schedule td {
  height: calc(4 * var(--fv-unit));
  padding: calc(.4 * var(--fv-unit)) 0;
  border-bottom: 1px solid #e4e4e4;
  text-align: center;
  font-weight: 400;
  white-space: nowrap;
}

.fv__schedule thead th {
  height: calc(3.2 * var(--fv-unit));
  padding-top: 0;
}

.fv__schedule th:first-child {
  width: 22.5%;
}

.fv__schedule thead th:first-child {
  text-align: left;
}

.fv__schedule thead th:last-child {
  width: 12%;
}

.fv__schedule tbody th {
  background: #e5f3fa;
  font-family: "Roboto", sans-serif;
}

.fv__schedule td {
  color: #e4e4e4;
}

.fv__open {
  color: #0281cd;
}

.fv__clock {
  display: inline-block;
  width: calc(1.6 * var(--fv-unit));
  height: calc(1.6 * var(--fv-unit));
  margin-right: calc(.6 * var(--fv-unit));
  background: url("../images/fv/clock.svg") center / contain no-repeat;
  vertical-align: calc(-.2 * var(--fv-unit));
}

.fv__location {
  display: flex;
  align-items: baseline;
  gap: calc(.8 * var(--fv-unit));
  margin-top: calc(1.2 * var(--fv-unit));
  color: #7e7e7e;
  font-size: calc(1.4 * var(--fv-unit));
  line-height: 1.5;
  white-space: nowrap;
}

.fv__location a {
  flex-shrink: 0;
  padding-inline: calc(1.4 * var(--fv-unit));
  border: 1px solid #0281cd;
  border-radius: 100vmax;
  color: #0281cd;
  font-size: calc(1.2 * var(--fv-unit));
  text-decoration: none;
  transition: opacity .2s;
}

.fv__location address {
  font-style: normal;
}

.fv a:focus-visible {
  outline: 3px solid #0281cd;
  outline-offset: 4px;
}

/* レスポンシブ */
/* PC：1567pxからFV内の文字・余白・画像・診療案内を同比率で縮小。
 * 1567pxで10px、約1273pxで8.125pxに達したら縮小を止める。
 * htmlの文字サイズと、他セクションの1300px基準には影響しない。 */
@media (min-width: 768px) and (max-width: 1567px) {
  .fv {
    --fv-unit: clamp(8.125px, .6381620932vw, 10px);
  }
}

/* 縮小下限付近では診療案内を写真の下へ分離する。 */
@media (max-width: 1270px) {
  .fv__clinic {
    position: static;
    width: 92.9166666667%;
    margin-inline: auto;
    padding: calc(2.6 * var(--fv-unit)) calc(3.4 * var(--fv-unit));
    border-top-left-radius: 0;
  }
}

/* 1130px以下：空を上へ広げた画像に切り替える。 */
@media (max-width: 1130px) {
  .fv__visual {
    height: auto;
    border-radius: 3rem;
    background: #827b7b;
  }
  .fv__photo {
    top: 0;
    bottom: auto;
    right: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center bottom;
  }
  .fv__visual::before {
    background: linear-gradient(180deg, rgb(23 44 87 / 30%) 0%, rgb(23 44 87 / 12%) 38%, transparent 58%, rgb(23 44 87 / 28%) 100%);
  }
  .fv__moon {
    display: none;
  }
  .fv__content {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    max-width: none;
    padding: 3.2rem;
    color: #fff;
  }
  .fv__area {
    max-width: 100%;
    font-size: 2rem;
    white-space: normal;
  }
  .fv__heading {
    margin-top: 1.8rem;
    color: #fff;
    line-height: 1.25;
  }
  .fv__heading-break {
    display: block;
  }
  .fv__lead {
    margin-top: 1.6rem;
    color: #fff;
  }
  .fv__description {
    margin-top: 1.6rem;
  }
  .fv__points {
    width: 100%;
    max-width: 64rem;
    margin: clamp(18rem, 24vw, 30rem) auto 0;
    gap: 1.6rem;
  }
  .fv__points p {
    white-space: normal;
  }
  .fv__note {
    white-space: normal;
  }
  .fv__location {
    white-space: normal;
  }
}

/* 中間幅：説明文の下に3ポイントを横並びで配置する。 */
@media (min-width: 768px) and (max-width: 1130px) {
  .fv {
    --fv-unit: 10px;
  }
  .fv__content {
    min-height: clamp(88rem, 100vw, 112rem);
    padding-right: calc(3.2rem + 7.9 * var(--fv-unit));
  }
  .fv__area {
    width: fit-content;
    max-width: 100%;
    font-size: calc(2 * var(--fv-unit));
    white-space: nowrap;
  }
  .fv__lead, .fv__description {
    width: auto;
    white-space: nowrap;
  }
  .fv__content > .fv__heading {
    font-size: calc(5 * var(--fv-unit));
  }
  .fv__heading-break {
    display: none;
  }
  .fv__heading-ending {
    font-size: calc(4.5 * var(--fv-unit));
  }
  .fv__points {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-items: center;
    gap: 1rem;
    width: 50.4rem;
    max-width: 100%;
    margin: 2.4rem 0 0;
  }
  .fv__points li {
    width: 100%;
  }
  .fv__points img {
    width: 100%;
    max-width: 18rem;
    margin-inline: auto;
  }
  .fv__points p {
    margin-top: .6rem;
    font-size: calc(1.6 * var(--fv-unit));
    white-space: nowrap;
  }
  .fv__content > .fv__note {
    margin-top: 2rem;
  }
}

/* 診療情報は943px時を100%として、768pxまで同比率で縮小。 */
@media (min-width: 768px) and (max-width: 943px) {
  .fv__clinic {
    --fv-unit: clamp(8.1442205726px, 1.0604453871vw, 10px);
  }
  .fv__today {
    border-right-width: calc(.1 * var(--fv-unit));
  }
  .fv__schedule th, .fv__schedule td {
    border-bottom-width: calc(.1 * var(--fv-unit));
  }
  .fv__weekday, .fv__location a {
    border-width: calc(.1 * var(--fv-unit));
  }
}

/* 865px時の見た目を基準に、768pxまで同比率で縮小する。 */
@media (min-width: 768px) and (max-width: 865px) {
  .fv {
    --fv-unit: 1.1560693642vw;
  }

  .fv__visual {
    border-radius: calc(2.4375 * var(--fv-unit));
  }
  .fv__heading {
    margin-top: calc(1.4625 * var(--fv-unit));
  }
  .fv__lead, .fv__description {
    margin-top: calc(1.3 * var(--fv-unit));
  }
  .fv__content {
    padding: calc(2.6 * var(--fv-unit));
    min-height: calc(86.5 * var(--fv-unit));
    padding-right: calc(calc(2.6000000000 * var(--fv-unit)) + 7.9 * var(--fv-unit));
  }
  .fv__points {
    gap: calc(0.8125000000 * var(--fv-unit));
    width: calc(40.9500000000 * var(--fv-unit));
    margin: calc(1.9500000000 * var(--fv-unit)) 0 0;
  }
  .fv__points img {
    width: 100%;
    max-width: calc(14.6250000000 * var(--fv-unit));
    margin-inline: auto;
  }
  .fv__points p {
    margin-top: calc(0.4875000000 * var(--fv-unit));
    font-size: calc(1.6 * var(--fv-unit));
    white-space: nowrap;
  }
  .fv__content > .fv__note {
    margin-top: calc(1.6250000000 * var(--fv-unit));
  }
}

/* SP：SP.png・SP_MV.pngを基準に作り直す。TODAYと診療時間表の間に区切り線。 */
@media (max-width: 767px) {
  .fv {
    --fv-unit: 1rem;
  }
  .fv__visual {
    width: 93.6%;
    height: auto;
    aspect-ratio: 702 / 948;
    border-radius: 2.4rem;
    background: #827b7b;
  }
  .fv__photo {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  /* SP素材に含まれる暗さを利用し、追加の暗いグラデーションは重ねない。 */
  .fv__visual::before {
    display: none;
  }
  .fv__content {
    position: absolute;
    inset: 0;
    width: auto;
    max-width: none;
    min-height: 0;
    padding: 2rem 1.6rem;
  }
  .fv__area {
    width: fit-content;
    max-width: 100%;
    padding: .5rem 2.8rem;
    font-size: clamp(1.2rem, 3.4666666667vw, 2rem);
    line-height: 1.2;
    white-space: nowrap;
  }
  .fv__area-pc {
    display: none;
  }
  .fv__area-sp {
    display: inline;
  }
  .fv__heading {
    margin-top: .7rem;
    font-size: clamp(3rem, 9.6vw, 5.2rem);
    line-height: 1.2;
    letter-spacing: -.02em;
  }
  .fv__heading-ending {
    font-size: .9em;
  }
  .fv__heading-break {
    display: block;
  }
  .fv__lead {
    margin-top: .4rem;
    font-size: clamp(1.3rem, 4vw, 2.4rem);
    line-height: 1.6;
    white-space: nowrap;
  }
  .fv__description {
    margin-top: .6rem;
    font-size: clamp(1.1rem, 2.9333333333vw, 1.6rem);
    line-height: 1.5;
    white-space: normal;
  }
  .fv__points {
    position: absolute;
    right: .8rem;
    bottom: 4.4rem;
    left: .8rem;
    width: auto;
    max-width: 50rem;
    gap: .8rem;
    margin: 0;
  }
  .fv__points img {
    width: 100%;
  }
  .fv__points p {
    margin-top: .7rem;
    font-size: clamp(.9rem, 2.6666666667vw, 1.6rem);
    font-weight: 500;
    white-space: nowrap;
  }
  .fv__note {
    position: absolute;
    right: 1.6rem;
    bottom: 1.2rem;
    left: 1.6rem;
    margin: 0;
    font-size: clamp(.9rem, 2.6666666667vw, 1.4rem);
    line-height: 1.4;
    white-space: normal;
  }
  .fv__clinic {
    position: static;
    width: 90.4%;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    min-height: 0;
    margin-inline: auto;
    padding: 2.6rem 0 0;
    border-radius: 0;
  }
  .fv__today {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
  }
  .fv__today-heading {
    font-size: 1.6rem;
    line-height: 1.25;
  }
  .fv__today-heading img {
    display: none;
  }
  .fv__status-icon {
    display: block;
    flex: 0 0 2.8rem;
    width: 2.8rem;
    height: 2.8rem;
    filter: brightness(0) invert(1);
  }
  .fv__today-body {
    gap: 1rem;
    margin-top: .3rem;
  }
  .fv__status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-basis: clamp(9.6rem, 29.8666666667vw, 11.2rem);
    height: 4.4rem;
    padding: 0;
    border-radius: .8rem;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
  }
  .fv__date {
    display: flex;
    align-items: baseline;
  }
  .fv__year {
    font-size: clamp(1.5rem, 4.8vw, 2.4rem);
    line-height: 1;
  }
  .fv__day {
    gap: .6rem;
    font-size: clamp(4.1rem, 12.8vw, 6.4rem);
    line-height: 1;
  }
  .fv__weekday {
    flex-shrink: 0;
    align-self: flex-end;
    width: clamp(2.4rem, 7.4666666667vw, 3.6rem);
    height: clamp(2.4rem, 7.4666666667vw, 3.6rem);
    font-size: 1.6rem;
  }
  .fv__today-hours {
    margin-top: .8rem;
    font-size: 1.2rem;
    line-height: 1.5;
  }
  .fv__timetable {
    border-top: 1px solid #e4e4e4;
    padding-top: 1.6rem;
  }
  .fv__schedule {
    font-size: 1.2rem;
    line-height: 1.25;
  }
  .fv__schedule th, .fv__schedule td {
    height: 5.2rem;
    padding: .6rem .2rem;
  }
  .fv__schedule thead th {
    height: 4.4rem;
    padding: .4rem 0;
  }
  .fv__schedule th:first-child {
    width: 16.5%;
  }
  .fv__schedule thead th:first-child {
    text-align: center;
  }
  .fv__schedule thead th:last-child {
    width: 12%;
  }
  .fv__schedule tbody th {
    background: #e5f3fa;
    color: #172c57;
    font-weight: 500;
  }
  .fv__clock {
    display: none;
  }
  .fv__location {
    flex-wrap: nowrap;
    gap: .6rem;
    margin-top: .8rem;
    font-size: 1rem;
    line-height: 1.5;
  }
  .fv__location a {
    padding-inline: .8rem;
    font-size: 1rem;
  }
  .fv__location address {
    min-width: 0;
  }
}

@media (hover: hover) {
  .fv__location a:hover {
    opacity: .75;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fv__location a {
    transition: none;
  }
}


/* ========================================
   ABOUT
   ======================================== */
/* 写真は画面中央から右余白まで。右余白はコンテンツ左余白に達したら同期。 */
.about {
  --about-navy: #172c57;
  --about-blue: #0281cd;
  --about-light-blue: #349ad6;
  padding-block: 4rem 8rem;
  overflow: clip;
}

.about__inner {
  width: 92.3076923077%;
  max-width: 120rem;
  margin-inline: auto;
}

.about__heading {
  display: flex;
  align-items: center;
  gap: 3.6rem;
  color: var(--about-navy);
  margin-bottom: 5.6rem;
}

.about__en {
  font-family: "Roboto", sans-serif;
  font-size: 10.5rem;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.025em;
}

.about__ja {
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 1.8;
}

.about__layout {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.about__content {
  width: 56.7rem;
  max-width: calc(100% - 3.2rem);
  min-width: 0;
}

.about__lead, .about__description {
  color: #000;
}

.about__label {
  font-family: "M PLUS 1p", sans-serif;
  display: table;
  border-radius: 100vmax;
  background: var(--about-blue);
  color: #fff;
  font-size: 1.7rem;
  font-weight: 500;
  line-height: 1.6;
  padding: 0.8rem 2.6rem;
}

.about__lead {
  margin-top: 2rem;
  font-size: 2.8rem;
  line-height: 1.7;
  font-weight: 700;
  letter-spacing: .015em;
}

.about__description {
  margin-top: 2rem;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 2;
  overflow-wrap: anywhere;
}

.about__points {
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr) minmax(0, 1.18fr);
  gap: 1.2rem;
  padding: 0;
  margin: 3rem 0 0;
}

.about__points li {
  display: flex;
  min-width: 0;
  overflow-wrap: anywhere;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.6;
}

.about__icon {
  display: grid;
  place-items: center;
  flex: 0 0 5rem;
  width: 5rem;
  height: 5rem;
  background: var(--about-light-blue);
  border-radius: 50%;
}

.about__icon img {
  max-width: 75%;
  max-height: 75%;
  width: auto;
}

.about__link {
  position: relative;
  display: grid;
  place-items: center;
  width: 26rem;
  min-height: 6rem;
  margin-top: 4.8rem;
  padding: 1.2rem 5.2rem;
  border: 1px solid var(--about-navy);
  border-radius: 0.4rem;
  background: #fff;
  color: var(--about-navy);
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.6;
  text-decoration: none;
}

.about__link {
  transition: background-color .2s, color .2s;
}

@media (hover: hover) {
  .about__link:hover {
    background: var(--about-navy);
    color: #fff;
  }
}

.about__link:focus-visible {
  outline: 3px solid var(--about-blue);
  outline-offset: 5px;
}

.about__arrow {
  position: absolute;
  right: 1.6rem;
  top: 50%;
  width: 3.6rem;
  height: 1px;
  background: currentColor;
}

.about__arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: -4px;
  border-block: 4px solid transparent;
  border-left: 9px solid currentColor;
}

.about__photo {
  width: 50vw;
}

.about__photo img {
  --content-side-margin: max(calc((100vw - 120rem) / 2), 3.8461538462vw);
  --photo-right-margin: min(6.7708333333vw, var(--content-side-margin));
  max-width: calc(100% - var(--photo-right-margin));
  border-radius: 3.2rem;
  width: 100%;
  aspect-ratio: 1660 / 1066;
  object-fit: cover;
}


@media (min-width: 768px) {
  .about {
    padding-bottom: 10rem;
  }

}

@media (min-width: 768px) and (max-width: 1056.25px) {
  .about__points {
    gap: .8rem;
  }

  .about__points li {
    flex-direction: column;
    align-items: center;
    gap: .8rem;
    text-align: center;
  }

  .about__icon {
    flex: 0 0 4.3rem;
    width: 4.3rem;
    height: 4.3rem;
  }

  .about__icon img {
    max-width: 60%;
    max-height: 60%;
  }

}

@media (max-width: 767px) {
  .about__lead-line {
    white-space: nowrap;
  }

  .about__label {
    font-size: 1.6rem;
  }

  .about {
    padding-block: 4.8rem 8rem;
  }

  .about__inner {
    width: 92.3076923077%;
  }

  .about__heading {
    gap: 2rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
  }

  .about__en {
    font-size: 4.4rem;
  }

  .about__ja {
    font-size: 1.2rem;
  }

  .about__layout {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 3rem;
  }

  .about__content {
    width: 100%;
    max-width: none;
  }

  .about__lead {
    margin-top: 1.5rem;
    font-size: 2rem;
    line-height: 1.75;
    letter-spacing: -0.05em;
  }

  .about__description {
    margin-top: 1.5rem;
    font-size: 1.5rem;
  }

  .about__points {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    margin: 1.5rem 0 0;
  }

  .about__icon {
    flex: 0 0 4.4rem;
    width: 4.4rem;
    height: 4.4rem;
  }

  .about__link {
    margin-top: 3.2rem;
    margin-inline: auto;
    width: 32rem;
    max-width: 100%;
    min-height: 6rem;
  }

  .about__photo {
    order: -1;
    width: 100%;
  }

  .about__photo img {
    max-width: 100%;
    border-radius: 1.5rem;
  }

}

@media (prefers-reduced-motion: reduce) {
  .about__link[href] {
    transition: none;
  }

}


@media (prefers-reduced-motion: reduce) {
  .about__link { transition: none; }
}

/* ========================================
   FEATURES
   ======================================== */
/* 波と見出しの距離はassets/js/top.jsで連動。SPは2列の段差配置。 */
.features {
  position: relative;
  isolation: isolate;
  padding-block: 0 20rem;
  color: #172c57;
}

.features::before, .features::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  z-index: -1;
  pointer-events: none;
}

.features::before {
  top: var(--features-wave-top, 9rem);
  bottom: calc(13.28125vw - 2px);
  background: url("../images/features/wave-top.svg") center top / 100% auto no-repeat,
    linear-gradient(#f2f8fc, #f2f8fc) center bottom / 100% calc(100% - 13.28125vw + 4px) no-repeat;
}

.features::after {
  bottom: 0;
  height: 13.28125vw;
  background: url("../images/features/wave-bottom.svg") center top / 100% 100% no-repeat;
}

.features__inner {
  width: 92.3076923077%;
  max-width: 120rem;
  margin-inline: auto;
}

.features__heading {
  text-align: right;
  margin-bottom: 5rem;
}

.features__heading h2 {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3rem;
  margin: 0;
}

.features__ja {
  font-size: 1.8rem;
  font-weight: 400;
}

.features__en {
  font-family: "Roboto", sans-serif;
  font-size: 10.5rem;
  font-weight: 400;
  line-height: 1.1;
}

.features__subtitle {
  margin-top: 1.5rem;
  font-size: 6rem;
  font-weight: 300;
  line-height: 1.3;
}

.features__body {
  position: relative;
}

.features__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 2rem;
  row-gap: 3rem;
  list-style: none;
  padding: 0 0 42rem;
  margin: 0;
}

.features__card {
  position: relative;
  min-width: 0;
  min-height: 56rem;
  padding: 7.4rem 2.5rem 5rem;
  border-radius: 3rem 0 3rem 0;
  background: #349ad6;
  color: #fff;
}

.features__card:nth-child(3n + 2) {
  transform: translateY(21rem);
}

.features__card:nth-child(3n) {
  transform: translateY(42rem);
}

.features__number {
  position: absolute;
  top: 3.5rem;
  left: 2.5rem;
  font-family: "Roboto", sans-serif;
  font-size: 6.4rem;
  line-height: 1;
  font-weight: 400;
}

.features__image {
  width: 63%;
  max-width: 20.8rem;
  aspect-ratio: 1;
  margin-inline: auto;
}

.features__title {
  margin: 3rem 0 2rem;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}

.features__description {
  font-size: 1.6rem;
  line-height: 2;
  overflow-wrap: anywhere;
}

.features__message {
  position: absolute;
  width: calc((100% - 4rem) / 3);
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 2.4;
  text-align: center;
}

.features__message span {
  padding-bottom: .4rem;
  border-bottom: 1px solid currentColor;
}

.features__message--top {
  top: 21rem;
  right: 0;
}

.features__message--bottom {
  bottom: 5rem;
  left: 0;
}


@media (min-width: 768px) {
  .features {
    padding-bottom: 22rem;
  }

}

@media (min-width: 768px) and (max-width: 1056.25px) {
  .features__message {
    font-size: 2.2rem;
  }

  .features__message span {
    white-space: nowrap;
  }

}

@media (max-width: 767px) {
  .features {
    padding-bottom: 8rem;
  }

  .features__heading {
    margin-bottom: 3rem;
  }

  .features__heading h2 {
    gap: 1rem;
    flex-wrap: wrap;
  }

  .features__en {
    font-size: 4.4rem;
  }

  .features__ja {
    font-size: 1.2rem;
  }

  .features__subtitle {
    margin-top: .8rem;
    font-size: 2.8rem;
  }

  .features__body {
    display: flex;
    flex-direction: column;
    gap: 3rem;
  }

  .features__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 1rem;
    padding-bottom: 8rem;
  }

  .features__card {
    min-height: 0;
    padding: 4.5rem 1.2rem 2rem;
    border-radius: 1.5rem 0 1.5rem 0;
  }

  .features__card:nth-child(n) {
    transform: none;
  }

  .features__card:nth-child(even) {
    transform: translateY(8rem);
  }

  .features__number {
    top: 1.2rem;
    left: 1.2rem;
    font-size: 3rem;
  }

  .features__image {
    width: 80%;
    max-width: 14rem;
  }

  .features__title {
    margin: 1.5rem 0 1rem;
    font-size: 1.5rem;
    line-height: 1.6;
  }

  .features__description {
    font-size: 1.2rem;
    line-height: 1.7;
  }

  .features__message {
    position: static;
    width: 100%;
    font-size: 1.8rem;
    line-height: 2.4;
  }

  .features__message--top {
    order: -1;
    margin-top: calc(4.3352083333vw - 16.25703125px);
  }

}

/* ========================================
   FLOW
   ======================================== */
/* 右写真列の下端を最後のSTEPにそろえる。900px以下は写真列を非表示。 */
.flow {
  position: relative;
  margin-top: -13.28125vw;
  padding-block: 20rem 8rem;
}

.flow__inner {
  width: 92.3076923077%;
  max-width: 120rem;
  margin-inline: auto;
}

.flow__heading {
  display: flex;
  align-items: center;
  gap: 4rem;
  margin: 0 0 10rem;
  color: #172c57;
}

.flow__en {
  font-family: "Roboto", sans-serif;
  font-size: 10.5rem;
  font-weight: 400;
  line-height: 1.1;
}

.flow__ja {
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 1.8;
}

.flow__steps {
  width: 86%;
  max-width: min(104rem, calc(50% + 27.2395833333vw - 3rem));
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10rem;
}

.flow__step {
  display: grid;
  grid-template-columns: minmax(max-content, 17fr) minmax(0, 29.8fr) minmax(0, 53.2fr);
  column-gap: 2rem;
  min-height: 21rem;
  align-items: start;
}

.flow__label {
  position: relative;
  height: 6.4rem;
  display: flex;
  align-items: center;
  gap: 1.4rem;
  color: #172c57;
  font-family: "Roboto", sans-serif;
  white-space: nowrap;
}

.flow__step-word {
  font-size: 3.4rem;
  line-height: 1.2;
}

.flow__number {
  font-size: 6.4rem;
  line-height: 1;
}

.flow__step:not(:last-child) .flow__label::after {
  content: "";
  position: absolute;
  top: 7rem;
  height: 20rem;
  right: 4.4rem;
  width: 1px;
  background: #172c57;
}

.flow__image {
  width: 100%;
  aspect-ratio: 596 / 420;
  object-fit: cover;
  border-radius: 1rem;
}

.flow__content {
  min-width: 0;
  padding-left: .8rem;
}

.flow__title {
  margin: 0 0 1.5rem;
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1.5;
}

.flow__description {
  font-size: 1.6rem;
  line-height: 2;
  overflow-wrap: anywhere;
}

.flow__side {
  position: absolute;
  top: 9rem;
  right: 0;
  width: 22.7604166667%;
  display: flex;
  flex-direction: column;
}

.flow__side img {
  width: 100%;
  aspect-ratio: 874 / 590;
  object-fit: cover;
}


@media (min-width: 768px) {
  .flow {
    padding-bottom: 10rem;
    padding-top: 22rem;
  }

  .flow__step:last-child {
    min-height: 0;
  }

  .flow__side {
    bottom: 10rem;
    max-height: 147.5rem;
    top: 11rem;
  }

  .flow__side img {
    flex: 1 1 0;
    min-height: 0;
    height: 20%;
    max-height: none;
    aspect-ratio: auto;
    object-fit: cover;
  }

}

@media (min-width: 768px) and (max-width: 900px) {
  .flow__side {
    display: none;
  }

  .flow__steps {
    width: 100%;
    max-width: none;
  }

}

@media (max-width: 767px) {
  .flow__side {
    display: none;
  }

  .flow__heading {
    gap: 2rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
  }

  .flow__en {
    font-size: 4.4rem;
  }

  .flow__ja {
    font-size: 1.2rem;
  }

  .flow__steps {
    width: 100%;
    max-width: none;
    gap: 3rem;
  }

  .flow__step {
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: 2rem;
    row-gap: 1.5rem;
    min-height: 0;
  }

  .flow__label {
    grid-column: 1;
    grid-row: 1 / 3;
    height: 100%;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
  }

  .flow__step-word {
    font-size: 1.6rem;
    line-height: 1.2;
  }

  .flow__number {
    font-size: 3.2rem;
  }

  .flow__image {
    grid-column: 2;
    grid-row: 1;
  }

  .flow__content {
    grid-column: 2;
    grid-row: 2;
    padding-left: 0;
  }

  .flow__title {
    font-size: 1.9rem;
    margin-bottom: .7rem;
  }

  .flow__description {
    font-size: 1.5rem;
    line-height: 1.8;
  }

  .flow__step:not(:last-child) .flow__label::after {
    top: 6.5rem;
    bottom: -1.5rem;
    height: auto;
    right: 50%;
    transform: translateX(50%);
  }

  .flow {
    padding-block: calc(13.28125vw + 4.8rem) 8rem;
  }

}

/* ========================================
   SYMPTOMS
   ======================================== */
/* 962px以下の2列切り替えは暫定。見出しは右端固定、三角形のみ追従。 */
.symptoms {
  position: relative;
  isolation: isolate;
  padding-block: 14rem 8rem;
}

.symptoms::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  right: 6.7708333333%;
  width: 38.6854166667%;
  aspect-ratio: 742.76 / 494.794;
  background: url("../images/symptoms/background-12.svg") center / contain no-repeat;
  pointer-events: none;
}

.symptoms__inner {
  width: 92.3076923077%;
  max-width: 120rem;
  margin-inline: auto;
}

.symptoms__heading {
  margin-bottom: 7.5rem;
  text-align: right;
}

.symptoms__heading h2 {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 2.5rem;
  color: #172c57;
  margin: 0;
}

.symptoms__ja {
  font-size: 1.8rem;
  font-weight: 400;
}

.symptoms__en {
  font-family: "Roboto", sans-serif;
  font-size: 10.5rem;
  line-height: 1.1;
  font-weight: 400;
}

.symptoms__intro {
  margin-top: 2rem;
  font-size: 1.6rem;
  line-height: 2;
}

/* SYMPTOMS：カードをhoverで少し薄くし、影を強める。 */
.symptoms__card {
  transition: opacity .2s, box-shadow .2s;
}

@media (hover: hover) {
  .symptoms__card:hover {
    opacity: .75;
    box-shadow: 0 0 1.4rem rgb(23 44 87 / 22%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .symptoms__card { transition: none; }
}

.symptoms__cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.symptoms__card {
  position: relative;
  min-width: 0;
  min-height: 28.5rem;
  padding: 5.6rem 1.5rem 4rem;
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 0 .8rem rgb(23 44 87 / 12%);
  text-align: center;
}

.symptoms__arrow {
  position: absolute;
  top: 2.4rem;
  right: 2.2rem;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: #172c57;
}

.symptoms__arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 45%;
  width: .7rem;
  height: .7rem;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  transform: translate(-50%, -50%) rotate(45deg);
}

.symptoms__icon {
  height: 8.7rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.symptoms__icon img {
  width: auto;
  height: 100%;
  max-width: 10rem;
  object-fit: contain;
}

.symptoms__title {
  margin: 3.5rem 0 1rem;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.6;
  color: #0281cd;
}

.symptoms__description {
  font-size: 1.6rem;
  line-height: 1.8;
}

.symptoms__tests {
  margin-top: 4rem;
  border-left: .4rem solid #0281cd;
  padding-left: 2rem;
}

.symptoms__tests-heading {
  margin: 0;
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1.6;
  color: #0281cd;
}

.symptoms__note {
  margin-top: .5rem;
  font-size: 1.5rem;
  line-height: 1.8;
}

.symptoms__test-list {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem 5rem;
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
}

.symptoms__test-list li {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.6;
}

.symptoms__test-icon {
  display: grid;
  place-items: center;
  flex: 0 0 7.8rem;
  width: 7.8rem;
  height: 7.8rem;
  border-radius: 50%;
  background: #0281cd;
}

.symptoms__test-icon img {
  max-width: 75%;
  max-height: 60%;
  width: auto;
  height: auto;
}


@media (min-width: 768px) {
  .symptoms {
    --symptoms-content-margin: max(3.8461538462vw, (100vw - 120rem) / 2);
    --symptoms-shape-margin: max(0px, calc((100vw - 1300px) * 0.2096774194));
    padding-bottom: 10rem;
  }

  .symptoms::before {
    display: none;
  }

  .symptoms__heading {
    position: relative;
    isolation: isolate;
    transform: none;
  }

  .symptoms__heading::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -14rem;
    right: calc(var(--symptoms-shape-margin) - var(--symptoms-content-margin));
    width: 74.276rem;
    aspect-ratio: 742.76 / 494.794;
    background: url("../images/symptoms/background-12.svg") center / contain no-repeat;
    pointer-events: none;
  }

  .symptoms__cards {
    position: relative;
  }

}

@media (max-width: 962px) {
  .symptoms__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

@media (max-width: 767px) {
  .symptoms__heading {
    margin-bottom: 3rem;
  }

  .symptoms__heading h2 {
    gap: 1rem;
    flex-wrap: wrap;
  }

  .symptoms__en {
    font-size: 4.4rem;
  }

  .symptoms__ja {
    font-size: 1.2rem;
  }

  .symptoms__intro {
    margin-top: 1.5rem;
    font-size: 1.5rem;
    letter-spacing: -0.05em;
  }

  .symptoms__cards {
    gap: 1rem;
  }

  .symptoms {
    padding-block: 4.8rem 8rem;
    padding-top: 3.3rem;
  }

  .symptoms::before {
    right: 0;
    width: 82%;
    max-width: 40rem;
    top: 0;
  }

  .symptoms__description {
    font-size: 1.5rem;
  }

  .symptoms__title {
    font-size: 1.9rem;
  }

  .symptoms__icon {
    height: 7.4rem;
  }

  .symptoms__icon img {
    max-width: 8.5rem;
  }

  .symptoms__tests {
    margin-top: 3rem;
    padding-left: 1.5rem;
    border-left-width: .3rem;
  }

  .symptoms__tests-heading {
    font-size: 2rem;
    line-height: 1.5;
  }

  .symptoms__note {
    margin-top: .8rem;
    font-size: 1.4rem;
    line-height: 1.7;
  }

  .symptoms__test-list {
    flex-direction: column;
    align-items: stretch;
    gap: 1.5rem;
    margin-top: 2rem;
  }

  .symptoms__test-list li {
    gap: 1.2rem;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.6;
  }

  .symptoms__test-icon {
    flex: 0 0 5rem;
    width: 5rem;
    height: 5rem;
  }

}

/* ========================================
   PRICE
   ======================================== */
/* 見出しは左端固定。三角形は本文全体の背面。 */
.price {
  position: relative;
  isolation: isolate;
  padding-block: 10.4rem 10rem;
}

.price::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 6.7708333333%;
  width: 38.6854166667%;
  aspect-ratio: 742.76 / 494.794;
  background: url("../images/price/background.svg") center / contain no-repeat;
  pointer-events: none;
}

.price__inner {
  width: 92.3076923077%;
  max-width: 120rem;
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 56fr) minmax(0, 60fr);
  gap: 4rem;
  align-items: start;
}

.price__content {
  min-width: 0;
  padding-top: 2rem;
}

.price__heading {
  display: flex;
  align-items: center;
  gap: 3rem;
  margin: 0;
  color: #172c57;
}

.price__en {
  font-family: "Roboto", sans-serif;
  font-size: 10.5rem;
  font-weight: 400;
  line-height: 1.1;
}

.price__ja {
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 1.8;
}

.price__description {
  margin-top: 2rem;
  font-size: 1.6rem;
  line-height: 2;
}

.price__link {
  position: relative;
  display: grid;
  place-items: center;
  width: 26.7rem;
  max-width: 100%;
  min-height: 6rem;
  margin-top: 4.8rem;
  padding: 1.2rem 4.5rem;
  border: 1px solid #172c57;
  border-radius: .4rem;
  background: #fff;
  color: #172c57;
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.6;
  text-decoration: none;
}

.price__link {
  transition: background-color .2s, color .2s;
}

@media (hover: hover) {
  .price__link:hover {
    background: #172c57;
    color: #fff;
  }
}

.price__link:focus-visible {
  outline: 3px solid #0281cd;
  outline-offset: 5px;
}

.price__arrow {
  position: absolute;
  right: 1.6rem;
  top: 50%;
  width: 3.6rem;
  height: 1px;
  background: currentColor;
}

.price__arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: -4px;
  border-block: 4px solid transparent;
  border-left: 9px solid currentColor;
}

.price__photo {
  width: 100%;
  overflow: hidden;
  border-radius: 2rem;
}

.price__photo img {
  width: 100%;
  aspect-ratio: 1200 / 847;
  object-fit: cover;
}


@media (min-width: 768px) {
  .price {
    --price-shape-margin: max(0px, calc((100vw - 1300px) * 0.2096774194));
  }

  .price::before {
    display: block;
    left: var(--price-shape-margin);
    width: 74.276rem;
  }

  .price__heading {
    position: relative;
    isolation: isolate;
    transform: none;
  }

}

@media (max-width: 767px) {
  .price {
    padding-block: 3.3rem 8rem;
  }

  .price::before {
    top: 0;
    left: 0;
    width: 82%;
    max-width: 40rem;
  }

  .price__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .price__content {
    display: contents;
  }

  .price__heading {
    grid-row: 1;
    gap: 2rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
  }

  .price__en {
    font-size: 4.4rem;
  }

  .price__ja {
    font-size: 1.2rem;
  }

  .price__photo {
    grid-row: 2;
    border-radius: 1.5rem;
    max-width: 50rem;
    margin-inline: auto;
  }

  .price__description {
    grid-row: 3;
    margin-top: 3rem;
    font-size: 1.5rem;
    line-height: 2;
  }

  .price__link {
    grid-row: 4;
    width: 32rem;
    margin-top: 3.2rem;
    margin-inline: auto;
  }

}


@media (prefers-reduced-motion: reduce) {
  .price__link { transition: none; }
}

/* ========================================
   NEWS / BLOG
   ======================================== */
/* 900px以下は縦構成。ブログは768px以上で3列、SPで2列。 */
.updates {
  position: relative;
  isolation: isolate;
  padding-block: 10rem 10rem;
}

.updates::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: url("../images/updates/curve-top.svg") center top / 100% auto no-repeat, linear-gradient(#f9f9f9, #f9f9f9) center bottom / 100% calc(100% - 9.4270833333vw + 4px) no-repeat;
}

.updates__inner {
  width: 92.3076923077%;
  max-width: 120rem;
  margin-inline: auto;
}

.news {
  display: grid;
  grid-template-columns: minmax(0, 26fr) minmax(0, 86fr);
  gap: 8rem;
}

.updates__heading {
  min-width: 0;
  color: #172c57;
}

.updates__heading h2 {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin: 0;
}

.updates__en {
  font-family: "Roboto", sans-serif;
  font-size: 2.8rem;
  font-weight: 500;
  line-height: 1.2;
}

.updates__ja {
  font-size: 5rem;
  font-weight: 600;
  line-height: 1.5;
}

.updates__button {
  position: relative;
  display: grid;
  place-items: center;
  width: 26rem;
  max-width: 100%;
  min-height: 6rem;
  margin-top: 4rem;
  padding: 1.2rem 4.4rem;
  border: 1px solid #172c57;
  border-radius: .4rem;
  background: #fff;
  color: #172c57;
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.6;
  text-decoration: none;
}

.updates__button {
  transition: background-color .2s, color .2s;
}

@media (hover: hover) {
  .updates__button:hover {
    background: #172c57;
    color: #fff;
  }
}

.updates__button:focus-visible {
  outline: 3px solid #0281cd;
  outline-offset: 5px;
}

.updates__arrow {
  position: absolute;
  right: 1.6rem;
  top: 50%;
  width: 3.6rem;
  height: 1px;
  background: currentColor;
}

.updates__arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: -4px;
  border-block: 4px solid transparent;
  border-left: 9px solid currentColor;
}

.updates__date {
  display: block;
  font-family: "Roboto", sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  color: #7E7E7E;
  line-height: 1.5;
}

/* NEWS：タイトルをhoverで少し薄くする。 */
.news__title {
  transition: opacity .2s;
}

@media (hover: hover) {
  .news__title:hover {
    opacity: .75;
  }
}

@media (prefers-reduced-motion: reduce) {
  .news__title { transition: none; }
}

.news__link { color: inherit; text-decoration: none; }

.news__link:focus-visible { outline: 3px solid #0281cd; outline-offset: 4px; }

.news__list {
  width: calc(100% + max(3.8461538462vw, (100vw - 120rem) / 2));
  list-style: none;
  padding: 0;
  margin: 0;
}

.news__item {
  padding-block: 0 2.4rem;
  border-bottom: 1px solid #E4E4E4;
}

.news__item + .news__item {
  padding-top: 2.4rem;
}

.news__title {
  max-width: 86rem;
  margin: 1rem 0 0;
  padding-right: 2rem;
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.8;
  overflow-wrap: anywhere;
}

.blog {
  display: grid;
  grid-template-columns: minmax(0, 86fr) minmax(0, 26fr);
  gap: 8rem;
  margin-top: 10rem;
}

.updates__heading--blog {
  grid-column: 2;
  grid-row: 1;
  text-align: right;
}

/* BLOG：カード全体をhoverで少し薄くする。 */
.blog__card {
  transition: opacity .2s;
}

@media (hover: hover) {
  .blog__card:hover {
    opacity: .75;
  }
}

@media (prefers-reduced-motion: reduce) {
  .blog__card { transition: none; }
}

.blog__card { position: relative; }

.blog__cards {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 2.6rem;
  row-gap: 4rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.blog__card {
  min-width: 0;
}

.blog__image {
  width: 100%;
  aspect-ratio: 538 / 346;
  object-fit: cover;
  border-radius: 1rem;
  margin-bottom: 1.5rem;
}

.blog__title {
  margin: .5rem 0 0;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.8;
  overflow-wrap: anywhere;
}


@media (min-width: 768px) and (max-width: 900px) {
  .news, .blog {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .updates__heading {
    display: contents;
  }

  .updates__heading h2 {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 3rem;
    color: #172c57;
  }

  .updates__button {
    grid-column: 1;
    grid-row: 3;
    margin-inline: auto;
  }

  .news__list {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
  }

  .blog__cards {
    grid-column: 1;
    grid-row: 2;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .updates__heading--blog h2 {
    text-align: right;
  }

}

@media (max-width: 767px) {
  .updates {
    padding-block: 4.8rem 8rem;
  }

  .news, .blog {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .updates__heading {
    display: contents;
  }

  .updates__heading h2 {
    grid-row: 1;
    gap: .6rem;
    margin-bottom: 2rem;
    color: #172c57;
  }

  .updates__en {
    font-size: 1.6rem;
  }

  .updates__ja {
    font-size: 2.8rem;
  }

  .updates__button {
    grid-column: 1;
    grid-row: 3;
    width: 32rem;
    margin-top: 3.2rem;
    margin-inline: auto;
  }

  .updates__date {
    font-size: 1.3rem;
  }

  .news__list {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
  }

  .news__item {
    padding-bottom: 1.5rem;
  }

  .news__item + .news__item {
    padding-top: 1.5rem;
  }

  .news__title {
    margin-top: .7rem;
    padding-right: 0;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.8;
  }

  .blog {
    margin-top: 8rem;
  }

  .updates__heading--blog h2 {
    text-align: right;
  }

  .blog__cards {
    grid-column: 1;
    grid-row: 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.5rem;
    row-gap: 2.5rem;
  }

  .blog__image {
    margin-bottom: 1rem;
    border-radius: .8rem;
  }

  .blog__title {
    margin-top: .5rem;
    font-size: 1.5rem;
    line-height: 1.7;
  }

}


@media (prefers-reduced-motion: reduce) {
  .updates__button { transition: none; }
}

/* ========================================
   CTA
   ======================================== */
/* 電話はtelリンク、LINE予約先は未設定。SP写真は最大50rem。 */
.cta {
  padding-block: 10rem;
  border-radius: 0 0 5rem 5rem;
  background: #172c57;
  color: #fff;
}

.cta__inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3.6rem;
  width: 92.3076923077%;
  max-width: 120rem;
  margin-inline: auto;
  align-items: start;
}

.cta__photo {
  width: 100%;
  border-radius: 3rem;
  overflow: hidden;
}

.cta__photo img {
  width: 100%;
  aspect-ratio: 1164 / 774;
  object-fit: cover;
}

.cta__content {
  min-width: 0;
}

.cta__label {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  margin: 0;
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.6;
}

.cta__label::before {
  content: "";
  flex: 0 0 1.6rem;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: currentColor;
}

.cta__phone {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  max-width: 100%;
  margin-top: .6rem;
  color: inherit;
  text-decoration: none;
  font-family: "Roboto", sans-serif;
  font-size: 5.8rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.cta__phone img {
  flex: 0 0 4.4rem;
  width: 4.4rem;
}

.cta__description {
  margin-top: .8rem;
  font-size: 1.6rem;
  line-height: 1.8;
}

.cta__reservation {
  margin-top: 2.6rem;
}

.cta__line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  width: 46rem;
  max-width: 100%;
  min-height: 7.4rem;
  margin-top: 1.2rem;
  padding: 1rem 2rem;
  border-radius: 100vmax;
  background: #06c755;
  color: #fff;
  text-decoration: none;
  font-size: 2.8rem;
  font-weight: 500;
  line-height: 1.4;
}

.cta__line img {
  flex: 0 0 5.05rem;
  width: 5.05rem;
}

.cta__hours {
  margin-top: 3.5rem;
}

.cta__schedule {
  margin-top: .8rem;
  font-size: 1.6rem;
  line-height: 1.8;
}

.cta__note {
  margin-top: .3rem;
  font-size: 1.5rem;
  line-height: 1.8;
}

.cta__phone:focus-visible, .cta__line:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 5px;
}


@media (min-width: 768px) and (max-width: 1056.25px) {
  .cta__phone {
    font-size: 4.4rem;
  }

  .cta__line {
    font-size: 2.4rem;
  }

}

@media (max-width: 767px) {
  .cta {
    padding-block: 8rem;
    border-radius: 0 0 3rem 3rem;
  }

  .cta__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 3rem;
  }

  .cta__photo {
    border-radius: 1.5rem;
    max-width: 50rem;
    margin-inline: auto;
  }

  .cta__label {
    font-size: 1.6rem;
  }

  .cta__label::before {
    flex-basis: 1.2rem;
    width: 1.2rem;
    height: 1.2rem;
  }

  .cta__phone {
    gap: .6rem;
    margin-top: 1rem;
    font-size: 3.6rem;
  }

  .cta__phone img {
    flex-basis: 2.8rem;
    width: 2.8rem;
  }

  .cta__description {
    margin-top: 1rem;
    font-size: 1.5rem;
    line-height: 1.8;
  }

  .cta__reservation {
    margin-top: 2.5rem;
  }

  .cta__line {
    width: 100%;
    min-height: 6rem;
    gap: 1rem;
    font-size: 2rem;
  }

  .cta__line img {
    flex-basis: 3.8rem;
    width: 3.8rem;
  }

  .cta__hours {
    margin-top: 3rem;
  }

  .cta__schedule {
    margin-top: 1rem;
    font-size: 1.5rem;
    line-height: 1.8;
  }

  .cta__schedule span {
    display: inline-block;
  }

  .cta__note {
    margin-top: .8rem;
    font-size: 1.4rem;
    line-height: 1.7;
  }

}

.cta__phone, .cta__line {
  transition: opacity .2s;
}

@media (hover: hover) {
  .cta__phone:hover, .cta__line:hover {
    opacity: .85;
  }

}


@media (prefers-reduced-motion: reduce) {
  .cta__phone, .cta__line { transition: none; }
}

/* ========================================
   LINK（PARTNERS / MEDIA）
   ======================================== */
/* PCは連携先3＋2件、メディア3列。SPは2列、一覧上限60rem。 */
.links {
  padding-block: 10rem;
}

.links__inner {
  width: 92.3076923077%;
  max-width: 120rem;
  margin-inline: auto;
}

.links__group + .links__group {
  margin-top: 5rem;
}

.links__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  margin: 0 0 5rem;
  color: #172c57;
  text-align: center;
}

.links__en {
  font-family: "Roboto", sans-serif;
  font-size: 1.9rem;
  font-weight: 500;
  line-height: 1.5;
}

.links__ja {
  font-size: 3.5rem;
  font-weight: 600;
  line-height: 1.5;
}

.links__logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 1.5rem;
  row-gap: 3rem;
  width: 100%;
  max-width: 81.6rem;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.links__card {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 calc((100% - 3rem) / 3);
  min-width: 0;
  aspect-ratio: 263 / 168;
  padding: 2.5rem;
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 0 .8rem rgb(23 44 87 / 12%);
}

/* URL確定前もカードのhoverを確認できるようにする。 */
.links__card {
  transition: opacity .2s, box-shadow .2s;
}

@media (hover: hover) {
  .links__card:hover {
    opacity: .75;
    box-shadow: 0 0 1.4rem rgb(23 44 87 / 22%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .links__card { transition: none; }
}

.links__card > .card__link { display: grid; place-items: center; width: 100%; height: 100%; }

.links__card img {
  width: 100%;
  max-height: 12rem;
  object-fit: contain;
}

.links__logos--media {
  row-gap: 2rem;
}


@media (max-width: 767px) {
  .links {
    padding-block: 8rem;
  }

  .links__group + .links__group {
    margin-top: 5rem;
  }

  .links__heading {
    gap: .8rem;
    margin-bottom: 2.5rem;
  }

  .links__en {
    font-size: 1.4rem;
  }

  .links__ja {
    font-size: 2.4rem;
  }

  .links__logos {
    gap: 1rem;
    max-width: 60rem;
  }

  .links__card {
    flex-basis: calc((100% - 1rem) / 2);
    padding: 1.2rem;
    border-radius: .8rem;
  }

  .links__card img {
    max-width: none;
    max-height: none;
  }

}

/* ========================================
   ACCESS
   ======================================== */
/* 地図はGoogleマップ。格子は18px周期・1px線。PCは住所と地図の下端をそろえる。 */
.access {
  padding-block: 10rem;
  background: #fff url("../images/access/grid.svg") left top / 18px 18px repeat;
}

.access__inner {
  width: 92.3076923077%;
  max-width: 120rem;
  margin-inline: auto;
}

.access__heading {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0 0 5rem;
  color: #172c57;
}

.access__en {
  font-family: "Roboto", sans-serif;
  font-size: 2.8rem;
  font-weight: 500;
  line-height: 1.2;
}

.access__ja {
  font-size: 5.3rem;
  font-weight: 600;
  line-height: 1.5;
}

.access__layout {
  display: grid;
  grid-template-columns: minmax(0, 68fr) minmax(0, 48fr);
  gap: 4rem;
  align-items: start;
}

.access__map {
  width: 100%;
  aspect-ratio: 680 / 456;
  border-radius: 3rem;
  overflow: hidden;
  background: #f2f8fc;
}

.access__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.access__content {
  min-width: 0;
}

.access__logo {
  width: 35.8843rem;
  max-width: 100%;
}

.access__detail {
  margin-top: 5rem;
}

.access__icon {
  width: auto;
  height: auto;
}

.access__icon--car {
  width: 4.8232rem;
}

.access__icon--location {
  width: 3.4809rem;
}

.access__title {
  margin: 1.5rem 0 1rem;
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 1.6;
}

.access__description, .access__address {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 400;
  font-style: normal;
  line-height: 2;
  overflow-wrap: anywhere;
}

.access__detail--location {
  margin-top: 7rem;
}


@media (min-width: 768px) {
  .access__layout {
    align-items: stretch;
  }

  .access__content {
    display: flex;
    flex-direction: column;
  }

  .access__detail--location {
    margin-top: auto;
    padding-top: 3rem;
  }

}

@media (max-width: 767px) {
  .access {
    padding-block: 8rem;
  }

  .access__heading {
    gap: .6rem;
    margin-bottom: 2rem;
  }

  .access__en {
    font-size: 1.6rem;
  }

  .access__ja {
    font-size: 2.8rem;
  }

  .access__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 3rem;
  }

  .access__map {
    aspect-ratio: auto;
    height: 32rem;
    border-radius: 1.5rem;
  }

  .access__logo {
    width: 28rem;
  }

  .access__detail {
    margin-top: 3rem;
  }

  .access__icon--car {
    width: 3.8rem;
  }

  .access__icon--location {
    width: 2.8rem;
  }

  .access__title {
    margin: 1rem 0 .7rem;
    font-size: 1.9rem;
  }

  .access__description, .access__address {
    font-size: 1.5rem;
    line-height: 1.8;
  }

  .access__detail--location {
    margin-top: 3rem;
  }

}

.flow__description a {
  color: inherit;
  text-decoration: underline;
}

/* ========================================
   XD照合（PC）
   ======================================== */
@media (min-width: 1131px) {
  .fv__area { font-size: calc(2.1 * var(--fv-unit)); }
  .fv__lead { font-size: calc(2.9 * var(--fv-unit)); }
  .fv__points p {
    margin-top: calc(.3 * var(--fv-unit));
    font-weight: 600;
  }
  .fv__schedule thead th { font-weight: 500; }
  .fv__schedule thead th:first-child {
    color: #3f3f3f;
    font-size: calc(1.4 * var(--fv-unit));
  }
  .fv__schedule thead th:last-child { font-size: calc(1.3 * var(--fv-unit)); }
  .fv__location a { font-size: calc(1.1 * var(--fv-unit)); }
}

@media (min-width: 768px) {
  .about {
    padding-top: 17.3rem;
    padding-bottom: 10rem;
  }
  .about__heading { margin-bottom: 5.1rem; }
  .about__en { letter-spacing: 0; }
  .about__lead {
    margin-top: 1.5rem;
    font-size: 3rem;
    line-height: 1.6;
  }
  .about__description { margin-top: 1.5rem; }

  .features__subtitle { margin-top: 0; }
  .features__card { padding: 7rem 2.5rem 4rem; }
  .features__title { margin: 2.7rem 0 1.6rem; }
  .features__message--top { top: 19.5rem; }
  .features__message--bottom { bottom: 6.5rem; }

  .flow { padding-top: 25rem; }
  .flow__side {
    top: 13.5rem;
    bottom: 7.5rem;
  }
  .flow__heading { margin-bottom: 9.1rem; }
  .flow__title {
    margin-bottom: .9rem;
    font-size: 2.4rem;
  }

  .symptoms { padding-top: 13.2rem; }
  .symptoms__intro { margin-top: 1.1rem; }
  .symptoms__card { padding-bottom: 3.1rem; }
  .symptoms__tests { margin-top: 3rem; }

  .price__description {
    margin-top: .7rem;
    color: #000;
  }

  .updates {
    padding-top: 10.8rem;
    padding-bottom: 8.7rem;
  }
  .updates__heading h2 { gap: .3rem; }
  .updates__ja {
    font-size: 5.3rem;
    font-weight: 500;
  }
  .news__item { padding-bottom: 1.8rem; }
  .news__item + .news__item { padding-top: 1.8rem; }
  .blog__cards { row-gap: 3.2rem; }
  .blog__title { font-weight: 500; }

  .cta__description { margin-top: 0; }
  .cta__hours { margin-top: 2.9rem; }
  .cta__note { font-size: 1.4rem; }

  .links { padding-top: 9.9rem; }
  .access { padding-block: 9.4rem 8.8rem; }
  .access__detail--location { padding-top: 0; }
  .access__detail { margin-top: 3.7rem; }
  .access__title { margin: 1.5rem 0 .4rem; }
  .links__group + .links__group { margin-top: 4.3rem; }
  .links__heading { gap: .4rem; }
  .links__ja,
  .access__ja,
  .access__title { font-weight: 500; }
  .access__address { font-size: 1.5rem; }
}

/* 休診日（clinic-schedule.js が is-closed を付ける） */
.fv__status.is-closed {
  background: #7e7e7e;
}