@charset "UTF-8";
* {
  box-sizing: border-box;
}

html, body, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, div, span, img, a, table, tr, th, td, small, button, time, figure {
  border: 0;
  font: inherit;
  font-size: 100%;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
}

html {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

li, dd {
  list-style-type: none;
}

header, footer, nav, section, article, aside, figure, figcaption {
  display: block;
}

img {
  max-width: 100%;
  height: auto;
  border: none;
  vertical-align: bottom;
  image-rendering: -webkit-optimize-contrast;
}

table {
  border-collapse: collapse;
}

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

@media (hover: hover) {
  a:hover {
    cursor: pointer;
  }
}
button {
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
}

@media (min-width: 768px) {
  a[href*="tel:"] {
    pointer-events: none;
    cursor: default;
  }
}
/* ---------- 共通設定 ---------- */
body {
  color: #333333;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-weight: 500;
  font-style: normal;
  background: #fff;
}

.c-cta-button {
  left: 50%;
  translate: -50%;
  width: 93%;
  transition: opacity 0.3s ease;
}
@media (any-hover: hover) {
  .c-cta-button:hover {
    opacity: 0.7;
  }
}

/* ========================================
    メインコンテナー
========================================= */
.main-container {
  width: 100%;
  max-width: 650px;
  min-height: 100svh;
  margin-inline: auto;
  background-color: #fff;
  box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.25);
}

/* ========================================
    ヘッダー
========================================= */
.p-header {
  container-type: inline-size;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 100;
  background-color: #fff;
}

.p-header__inner {
  padding: 2cqw 4cqw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 102;
  background-color: #fff;
}

.p-header__logo {
  width: 56.1cqw;
}

.p-drawer__icon {
  width: 7.83cqw;
  height: 4.75cqw;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
}

.p-drawer__icon--bar {
  width: 100%;
  height: 0.4cqw;
  border-radius: 5px;
  background: #191919;
  transition: all 0.5s ease;
  will-change: transform;
}

.p-drawer__icon.js-show .p-drawer__icon--bar:nth-of-type(1) {
  rotate: 45deg;
  translate: 0 2.2cqw;
}
.p-drawer__icon.js-show .p-drawer__icon--bar:nth-of-type(2) {
  display: none;
}
.p-drawer__icon.js-show .p-drawer__icon--bar:nth-of-type(3) {
  rotate: -45deg;
  translate: 0 -2.2cqw;
}

.p-drawer {
  position: absolute;
  z-index: 101;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: #ffffff;
  overflow-y: scroll;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}
.p-drawer.js-show {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s ease, visibility 0s linear 0s;
}

.p-drawer__body {
  width: 100%;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  padding-block: 24.5cqw 40px;
}

.p-drawer__list {
  display: flex;
  flex-direction: column;
  row-gap: 10.6cqw;
  text-align: center;
}
.p-drawer__list li a {
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: 4.8cqw;
  color: #333333;
  transition: opacity 0.3s ease;
}
@media (any-hover: hover) {
  .p-drawer__list li a:hover {
    opacity: 0.7;
  }
}

.p-drawer__button {
  display: block;
  -webkit-margin-before: 16cqw;
          margin-block-start: 16cqw;
  width: 93%;
  margin-inline: auto;
  transition: opacity 0.3s ease;
}
@media (any-hover: hover) {
  .p-drawer__button:hover {
    opacity: 0.7;
  }
}

/* ========================================
    ファーストビュー
========================================= */
.p-fv {
  position: relative;
}

.p-fv__button {
  position: absolute;
  bottom: 0.5%;
  left: 50%;
  translate: -50%;
  width: 93%;
}

/* ========================================
    スライダー
========================================= */
.p-slider-section {
  container-type: inline-size;
  background: transparent url(.././img/slider-bg.webp) no-repeat center center/cover;
}

.p-slider-section__inner {
  padding-block: 9.5cqw 6.5cqw;
}

.p-slider-wrapper {
  display: flex;
  overflow: hidden;
  padding-block: 20px;
}

.p-slider {
  -webkit-animation: scroll-left 20s infinite linear 0.5s both;
          animation: scroll-left 20s infinite linear 0.5s both;
  display: flex;
  gap: 2.5cqw;
  -webkit-padding-start: 2.5cqw;
          padding-inline-start: 2.5cqw;
}

@-webkit-keyframes scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
.p-slide {
  width: 44.4cqw;
}
.p-slide img {
  display: block;
  width: 100%;
  box-shadow: 0 0 20px rgba(112, 96, 140, 0.7);
}

.p-slider-section__cta {
  -webkit-margin-before: 8.33cqw;
          margin-block-start: 8.33cqw;
  text-align: center;
}
.p-slider-section__cta a {
  display: inline-block;
  width: 93%;
  transition: opacity 0.3s ease;
}
@media (any-hover: hover) {
  .p-slider-section__cta a:hover {
    opacity: 0.7;
  }
}

/* ========================================
    5つの理由
========================================= */
.p-reason {
  position: relative;
}

.p-reason__button {
  position: absolute;
  bottom: 2.6%;
}

/* ========================================
    矯正症例
========================================= */
.p-case__inner {
  container-type: inline-size;
  padding-inline: 5%;
}

.case__items {
  display: flex;
  flex-direction: column;
  row-gap: 6.6cqw;
}

.p-case__cta {
  container-type: inline-size;
  position: relative;
}

.p-case__cat-inner {
  -webkit-margin-before: 6.6cqw;
          margin-block-start: 6.6cqw;
}

.p-case__button {
  position: absolute;
  bottom: 6.6%;
}

/* ========================================
    矯正に対する思い
========================================= */
.p-thought {
  position: relative;
}

.p-thought__movie {
  position: absolute;
  top: 19.5%;
  left: 50%;
  translate: -50%;
  width: 83.3%;
  aspect-ratio: 1000/563;
}
.p-thought__movie iframe {
  width: 100%;
  height: 100%;
}

/* ========================================
    締め
========================================= */
.p-close {
  position: relative;
}

.p-close__movie {
  position: absolute;
  top: 29%;
  left: 50%;
  translate: -50%;
  width: 83.3%;
  aspect-ratio: 1000/563;
}
.p-close__movie iframe {
  width: 100%;
  height: 100%;
}

.p-close__button {
  position: absolute;
  bottom: 2.5%;
}

/* ========================================
    アクセス
========================================= */
.p-access {
  container-type: inline-size;
}

.p-access__inner {
  padding-inline: 5cqw;
}

.p-access__list {
  -webkit-margin-before: 8.3cqw;
          margin-block-start: 8.3cqw;
  display: flex;
  flex-direction: column;
  row-gap: 6.66cqw;
}

.p-access__item-head {
  padding: 2.41cqw 3.33cqw 3.25cqw;
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: 5cqw;
  color: #fff;
  background: linear-gradient(to right, #EF4D84 0%, #FF9ABD 100%);
}

.p-access__item-body {
  font-family: "Noto Sans JP", sans-serif;
  -webkit-margin-before: 3.33cqw;
          margin-block-start: 3.33cqw;
  display: flex;
  flex-direction: column;
  row-gap: 3.75cqw;
  color: #191919;
}

.p-access__item-subHead {
  font-weight: 500;
  font-size: 4.16cqw;
  line-height: 1.4;
  -webkit-padding-start: 1.9cqw;
          padding-inline-start: 1.9cqw;
  background: transparent url(../img/line-pink.svg) no-repeat top left/6px 100%;
}

.p-access__item-address {
  -webkit-margin-before: 1.25cqw;
          margin-block-start: 1.25cqw;
  font-weight: 700;
  font-size: 4.16cqw;
  line-height: 1.4;
}

.p-access__item-subAddress {
  -webkit-margin-before: 1.66cqw;
          margin-block-start: 1.66cqw;
  font-weight: 500;
  font-size: 3.33cqw;
  line-height: 1.4;
  opacity: 0.6;
  -webkit-padding-start: 4.75cqw;
          padding-inline-start: 4.75cqw;
  background: transparent url(../img/icon-train.svg) no-repeat center left/3cqw 3.6cqw;
}

.p-access__item-phone {
  -webkit-margin-before: 1.25cqw;
          margin-block-start: 1.25cqw;
  font-weight: 700;
  font-size: 5cqw;
  line-height: 1.4;
}

.p-access__item-link {
  font-weight: 700;
  font-size: 5cqw;
  line-height: 1.4;
  color: #DB3C6C;
  -webkit-padding-end: 8.33cqw;
          padding-inline-end: 8.33cqw;
  background: transparent url(../img/icon-link.svg) no-repeat center right/6.66cqw;
  transition: opacity 0.3s ease;
}
@media (any-hover: hover) {
  .p-access__item-link:hover {
    opacity: 0.7;
  }
}

.p-access__cta {
  -webkit-margin-before: 8.33cqw;
          margin-block-start: 8.33cqw;
  -webkit-padding-after: 10cqw;
          padding-block-end: 10cqw;
}
.p-access__cta a {
  display: inline-block;
  transition: opacity 0.3s ease;
}
@media (any-hover: hover) {
  .p-access__cta a:hover {
    opacity: 0.7;
  }
}

/* ========================================
    医院選択画面
========================================= */
.p-clinic-list {
  container-type: inline-size;
  font-family: "Noto Serif JP", serif;
}

.p-clinic-list__inner {
  padding-block: 10.6cqw 18.6cqw;
  padding-inline: 9.33cqw;
}

.p-clinic-list__title {
  font-weight: 700;
  font-size: 6.4cqw;
  text-align: center;
}

.p-clinic-list__items {
  -webkit-margin-before: 8.5cqw;
          margin-block-start: 8.5cqw;
  display: flex;
  flex-direction: column;
  row-gap: 2.66cqw;
}

.p-clinic-list__item a {
  display: block;
  font-weight: 700;
  font-size: 5cqw;
  color: #fff;
  background: linear-gradient(to right, #EF4D84 0%, #FF9ABD 100%);
  padding: 2.4cqw 3.46cqw 3.2cqw;
  position: relative;
}
@media (any-hover: hover) {
  .p-clinic-list__item a:hover::before {
    translate: 5px -50%;
  }
}
.p-clinic-list__item a::before {
  position: absolute;
  content: "";
  top: 50%;
  translate: 0 -50%;
  right: 13px;
  width: 6.4cqw;
  height: auto;
  aspect-ratio: 1;
  background: transparent url(../img/icon-arrow.svg) no-repeat center center/contain;
  transition: translate 0.3s ease;
}

.p-list-deco::after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: auto;
  height: 100%;
  aspect-ratio: 226/90;
  background: transparent no-repeat center center/contain;
}
.p-list-deco--hokkaido::after {
  background-image: url(../img/hokkaido.webp);
}
.p-list-deco--tokyo::after {
  background-image: url(../img/tokyo.webp);
}
.p-list-deco--yokohama::after {
  background-image: url(../img/yokohama.webp);
}
.p-list-deco--nagoya::after {
  background-image: url(../img/nagoya.webp);
}
.p-list-deco--osaka::after {
  background-image: url(../img/osaka.webp);
}
.p-list-deco--hukuoka::after {
  background-image: url(../img/hukuoka.webp);
}