:root {
  --vw: 1vw;
}

body {
  font-family: "yu-mincho-pr6n", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #534634;
}

body.no-scroll {
  overflow: hidden;
}

a {
  display: block;
  transition: opacity 0.7s;
}

a:hover {
  opacity: 0.7;
}

img {
  display: block;
  max-width: 100%;
}

.noto-sans-cjk-jp {
  font-family: "noto-sans-cjk-jp", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.container_w320 {
  width: calc(320 / 375 * 100%);
  margin: 0 auto;
}

.header {
  display: flex;
  border-bottom: 1px solid #fff;
}

.header_logo {
  display: flex;
  align-items: center;
  width: calc(225 / 375 * 100%);
}

.header_logo_image {
  display: block;
  width: calc(183 / 225 * 100%);
  position: relative;
  left: calc(11 / 225 * 100%);
}

.header_reservation {
  display: flex;
  width: calc(100 / 375 * 100%);
}

.header_reservation_link {
  display: block;
  width: 50%;
  aspect-ratio: 1 / 1;
  row-gap: calc(9 / 50 * 100%);
}

/* .hamburger {
  position: absolute;
  width: 100%;
  height: 50px;
} */

.hamburger-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: calc(9 / 50 * 100%);
  justify-content: center;
  background-color: #84715e;
  width: calc(50 / 375 * 100%);
  aspect-ratio: 1 / 1;
  /* position: -webkit-sticky;
  position: sticky; */
  position: fixed;
  top: 0;
  right: 0;
  margin-left: auto;
  z-index: 102;
}

.hamburger_line {
  display: block;
  width: calc(24 / 50 * 100%);
  height: 1px;
  background-color: #fff;
  transition: rotate .3s;
}

.hamburger-button.active {
  position: fixed;
  row-gap: 0;
}

/* .hamburger-button.active  .hamburger_line {
  position: absolute;
} */
.hamburger-button.active .hamburger_line:nth-child(1) {
  rotate: 45deg;
}

.hamburger-button.active .hamburger_line:nth-child(2) {
  display: none;
}

.hamburger-button.active .hamburger_line:nth-child(3) {
  rotate: -45deg;
}


.hamburger-menu {
  display: none;
  width: 100%;
  height: 100vh;
  background-color: #FEF6EB;
  padding-top: 64px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 101;
}

.hamburger:has(.hamburger-button.active) .hamburger-menu {
  display: block;
}

.hamburger-menu_list {
  display: grid;
  row-gap: 0.8em;
  font-size: 14px;
  letter-spacing: calc(50 / 1000 * 1em);
}

.hamburger-menu_reservation-list {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.hamburger-menu_footer {
  background-color: #84715E;
  padding-top: 24px;
  padding-bottom: 27px;
  margin-top: 20px;
  /* position: absolute;
  bottom: 0;
  left: 0;
  right: 0; */
}

.hamburger-menu_sns-list {
  display: flex;
  align-items: center;
  -moz-column-gap: 10px;
  column-gap: 10px;
  margin-top: 16px;
}

@media screen and (min-width: 768px) {
  .header {
    display: none;
  }

  .hamburger-menu {
    display: none;
  }
}

.conversion-fixed {
  position: fixed;
  bottom: 0;
  left: 50%;
  translate: -50% 0;
  background-color: rgba(83, 70, 52, 0.9);
  width: 100%;
  z-index: 100;
}

.conversion-fixed_inner {
  width: calc(350 / 375 * 100%);
  margin: 0 auto;
  padding-top: 8px;
  padding-bottom: 10px;
}

.conversion-fixed_text {
  font-size: 12px;
  letter-spacing: calc(50 / 1000 * 1em);
  color: #fff;
  text-align: center;
}

.conversion-fixed_reservation {
  display: flex;
  -moz-column-gap: calc(10 / 375 * 100%);
  column-gap: calc(10 / 375 * 100%);
  margin-top: 6px;
}

@media screen and (min-width: 768px) {
  .conversion-fixed {
    display: none;
  }
}

/* コンバージョンテンプレート */
.conversion_list {
  display: grid;
  row-gap: 19px;
}

.conversion_item:has(.tel) {
  width: calc(295 / 320 * 100%);
  margin: 0 auto;
  border-radius: 2px;
  overflow: hidden;
}

.conversion_link.line,
.conversion_link.web {
  display: block;
  border-radius: 9999px;
  border: 1px solid #fff;
  box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

.safety .conversion_list {
  margin-top: 16px;
}

.safety .conversion_link.tel {
  background-color: #fff;
}

.treatment-flow .conversion_list {
  margin-top: 12px;
}

.treatment-flow .conversion_link.tel {
  background-color: #FEF6EB;
}

.treatment-reservation .conversion_list {
  margin-top: 16px;
}

.treatment-reservation .conversion_link.tel {
  background-color: #FEF6EB;
}

/* メインビジュアル */
.mv {
  position: relative;
}

.mv_link {
  display: inline-block;
  position: absolute;
  bottom: 0;
  left: 50%;
  translate: -50% -30%;
  width: calc(321 / 375 * 100%);
}

.mv_link_image {
  width: 100%;
}
.documentary {
  padding-top: 24px;
}
.documentary_contents {
  margin-top: 10px;
}

.mouthpiece_body {
  padding-top: 15px;
  background-color: #f5efe8;
  padding-bottom: 28px;
}

.mouthpiece_sns {
  display: grid;
  row-gap: 12px;
  margin-top: 32px;
}

.reasons_lead {
  background-color: #f5efe8;
}

/* 選ばれる理由（1） */
.reason01 {
  padding-top: 24px;
  background-color: #FEF6EB;
}

.case-slider {
  margin-top: 48px;
}

.case-slider .swiper-slide {
  width: calc(300 / 375 * 100%);
}

.case-slider .swiper-slide img {
  box-shadow: 0px 2px 7px rgba(207, 170, 122, 0.3);
}

.swiper-button-prev,
.swiper-rtl .swiper-button-next {
  display: grid;
  place-content: center;
  width: 48px;
  height: 48px;
  left: calc(50% - calc(calc(300 / 375 * 100%) / 2));
  translate: -50% 0;
}

.swiper-button-next,
.swiper-rtl .swiper-button-prev {
  display: grid;
  place-content: center;
  width: 48px;
  height: 48px;
  right: calc(50% - calc(calc(300 / 375 * 100%) / 2));
  translate: 50% 0;
}

.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {
  content: '';
  display: block;
  width: 24px;
  height: 24px;
  border-bottom: 1px solid #534634;
  border-left: 1px solid #534634;
  rotate: 45deg;
}

.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after {
  content: '';
  display: block;
  width: 24px;
  height: 24px;
  border-top: 1px solid #534634;
  border-right: 1px solid #534634;
  rotate: 45deg;

}

.case-slider .swiper-pagination {
  position: relative;
  margin-top: 24px;
  bottom: 0;
  line-height: 0;
}

.case-slider .swiper-pagination-bullet {
  background-color: #534634;
  opacity: 1;
  margin: 0 8px !important;
}

.case-slider .swiper-pagination-bullet-active {
  background-color: #D78123;
}

.reason01_heads-up {
  margin-top: 16px;
}

.reason01_available {
  margin-top: 32px;
}

/* 選ばれる理由（2） */
.reason02 {
  padding-top: 42px;
  padding-bottom: 46px;
}

.reason02_about-itero {
  margin-top: 32px;
}

.reason02_with-itero {
  margin-top: 46px;
}

.reason02_besides {
  margin-top: 46px;
}

/* 選ばれる理由（3） */
.reason03 {
  padding-bottom: 46px;
}

.reason03_fee-revision {
  margin-top: 46px;
}

.reason03_fee {
  margin-top: 50px;
}

/* 選ばれる理由（4） */


/* 安全性 */
.safety_reservation {
  background-image: url(../images/base/safety_reservation_bg.webp);
  background-size: cover;
  background-repeat: no-repeat;
  padding-bottom: 48px;
}

.safety_reservation_title {
  margin-top: 20px;
}

/* インビザラインのメリット */
.invisalign_merit_body {
  padding-top: 38px;
  padding-bottom: 25px;
}

.invisalign_merit_list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(4, auto);
  gap: 28px 10px;
}

.invisalign_merit_item:nth-of-type(1) {
  grid-column: 1 / -1;
}

/* 歯列矯正の種類比較 */
.invisalign_comparison_body {
  background-color: #E7F3F8;
  padding-top: 24px;
  padding-bottom: 48px;
}

.invisalign_comparison_body_inner {
  padding-left: 28px;
}

.invisalign_comparison_table {
  width: 100%;
  padding-right: 28px;
  min-width: 406px;
}

.invisalign_comparison_table img {
  box-shadow: 0px 0px 12px rgba(43, 45, 46, 0.14);
}

/* 治療の流れ */
.treatment {
  background-color: #FEF6EB;
}

.treatment-flow_body {
  padding-bottom: 8px;
}

.treatment-flow_list {
  display: grid;
  row-gap: 20px;
  margin-top: -75px;
}

.treatment-flow_item {
  overflow: hidden;
  background-color: #fff;
  border-radius: 3px;
}

.flow_item_body {
  padding-top: 16px;
  padding-right: 25px;
  padding-left: 25px;
  padding-bottom: 16px;
}

.flow_image+.flow_text {
  margin-top: 15px;
}

.treatment-flow_item:nth-of-type(1) .flow_item_body {
  padding-top: 12px;
}

.treatment-payment {
  margin-top: 50px;
}

.treatment-reservation {
  background-color: #fff;
}

.treatment-reservation_title {
  margin-top: 26px;
}

/* スタッフ紹介 */
.staff {
  margin-top: 65px;
  background-color: #FEF6EB;
}

.director_comment {
  margin-top: 24px;
}

.director_career {
  margin-top: 36px;
}

.assistant {
  margin-top: 48px;
}

.faq {
  margin-top: 48px;
}

.faq_body {
  padding-top: 18px;
}

.faq_item {
  padding-bottom: 30px;
  border-bottom: 1px solid #534634;
}

.faq_item>*+* {
  margin-top: 16px;
}

.faq_item+.faq_item {
  margin-top: 26px;
}

/* アコーディオン */
.accordion-content {
  display: none;
}

.accordion-header {
  position: relative;
}

.accordion-header::before {
  /*タイトル横の矢印*/
  content: "";
  width: calc(18 / 320 * 100%);
  aspect-ratio: 18 / 12;
  background-image: url(../images/base/faq-arrow.webp);
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  right: 0;
  rotate: 180deg;
  transition: rotate .5s;
}

.accordion-header.active::before {
  rotate: 360deg;
}

/* 薬機法 */
.caution {
  margin-top: 36px;
}

.caution_head {
  padding-top: 18px;
  padding-bottom: 16px;
  border: 1px solid #534634;
}

.caution_body {
  margin-top: 24px;
}

.caution_more {
  width: calc(185 / 320 * 100%);
  margin: 0 auto;
  margin-top: 13px;
}

.caution_text {
  margin-top: 20px;
}

.caution_foot {
  margin-top: 48px;
}

/* 医院紹介 */
.introduction {
  background-color: #FEF6EB;
  margin-top: 48px;
}

.introduction_reservation_head {
  width: calc(270 / 320 * 100%);
  margin: 0 auto;
  margin-top: 16px;
}

.introduction_reservation_body {
  width: calc(295 / 320 * 100%);
  margin: 0 auto;
}

.reservation_conversion_list {
  display: grid;
  row-gap: 10px;
  margin-top: 20px;
}

.access {
  margin-top: 40px;
}
.access_map {
  margin-top: 10px;
}
.access_tags {
  display: flex;
  -moz-column-gap: 10px;
  column-gap: 10px;
  margin-top: 10px;
}

.access_car {
  margin-top: 20px;
}

.access_bus {
  margin-top: 16px;
}

.consultation {
  margin-top: 40px;
}

.consultation_table {
  margin-top: 14px;
}

.consultation_supplement {
  margin-top: 12px;
}

.publication {
  background-color: #fff;
  margin-top: 48px;
}

.interview_movie {
  margin-top: 10px;
}

/* メディア */
.media {
  margin-top: 56px;
}

.media_list {
  display: grid;
  row-gap: 32px;
  margin-top: 16px;
}

.media_facebook_contents,
.media_instagram_contents,
.media_tiktok_contents,
.media_youtube_contents {
  margin-top: 14px;
}

.mirai {
  margin-top: 36px;
}

/* PCスタイル */
.left {
  display: grid;
  place-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: calc(710 / 1920 * calc(var(--vw) * 100));
  height: 100vh;
  z-index: 2;
}

.logo-fixed {
  width: calc(502 / 1920 * calc(var(--vw) * 100));
}

.main-contents {
  position: relative;
  z-index: 10;
  width: 100%;
  margin: 0 auto;
  background-color: #fff;
  box-shadow: 0px 0px 33px rgba(148, 133, 114, 0.4);
}

.footer {
  background-color: #84715e;
  padding-top: 32px;
  padding-bottom: 120px;
  margin-top: 40px;
}

.footer-logo {
  width: calc(200 / 320 * 100%);
  margin: 0 auto;
}

.footer-logo img {
  width: 100%;
}

.footer_address {
  margin-top: 32px;
}

.footer_link {
  width: calc(260 / 320 * 100%);
  margin: 0 auto;
  margin-top: 16px;
}
@media screen and (min-width: 768px) {
  .footer {
    padding-bottom: 40px;
  }
}

@media screen and (min-width: 768px) {
  .main-contents {
    width: calc(500 / 1920 * calc(var(--vw) * 100));
    max-width: 500px;
  }

  .wrapper:after {
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    display: block;
    content: "";
    height: 100vh;
    width: calc(var(--vw) * 100);
    display: block;
    background-color: #fcf6ee;
  }
}

.right {
  position: fixed;
  top: 0;
  right: 0;
  width: calc(710 / 1920 * calc(var(--vw) * 100));
  height: 100vh;
  z-index: 2;
}

.right_inner {
  padding-top: calc(80 / 1920 * calc(var(--vw) * 100));
  width: calc(350 / 710 * 100%);
  translate: calc(-105 / 710 * 100%) 0;
  margin: 0 auto;
}

.right_menu {
  display: grid;
  row-gap: calc(16 / 1920 * calc(var(--vw) * 100));
  padding-left: calc(21 / 1920 * calc(var(--vw) * 100));
}

.right_menu_link {
  font-size: calc(20 / 1920 * calc(var(--vw) * 100));
  letter-spacing: calc(50 / 1000 * 1em);
  transition: 0.2s;
}

.right_menu_link:hover {
  /* opacity: 1; */
  color: #d88122;
}

.reservation {
  display: grid;
  row-gap: calc(26 / 1920 * calc(var(--vw) * 100));
  margin-top: calc(80 / 1920 * calc(var(--vw) * 100));
}

.information {
  padding-left: calc(16 / 1920 * calc(var(--vw) * 100));
}

.telephone-number {
  display: flex;
  align-items: center;
  -moz-column-gap: calc(8 / 1920 * calc(var(--vw) * 100));
  column-gap: calc(8 / 1920 * calc(var(--vw) * 100));
  font-size: calc(30 / 1920 * calc(var(--vw) * 100));
  line-height: 1;
  margin-top: calc(35 / 1920 * calc(var(--vw) * 100));
}

.telephone-number .icon {
  width: calc(27 / 1920 * calc(var(--vw) * 100));
}

.address {
  font-size: calc(13 / 1920 * calc(var(--vw) * 100));
  line-height: calc(19 / 13);
  margin-top: calc(18 / 1920 * calc(var(--vw) * 100));
}

.sns {
  display: flex;
  align-items: center;
  -moz-column-gap: calc(16 / 1920 * calc(var(--vw) * 100));
  column-gap: calc(16 / 1920 * calc(var(--vw) * 100));
  padding-left: calc(16 / 1920 * calc(var(--vw) * 100));
  margin-top: calc(32 / 1920 * calc(var(--vw) * 100));
}

.sns_item:nth-child(1) .icon {
  width: calc(27 / 1920 * calc(var(--vw) * 100));
}

.sns_item:nth-child(2) .icon {
  width: calc(26 / 1920 * calc(var(--vw) * 100));
}

.sns_item:nth-child(3) .icon {
  width: calc(37 / 1920 * calc(var(--vw) * 100));
}

.sns_item:nth-child(4) .icon {
  width: calc(20 / 1920 * calc(var(--vw) * 100));
}

@media screen and (max-width: 767px) {
  .pc-only {
    display: none;
  }
}