@charset "UTF-8";
@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

* {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/*Thin*/
@font-face {
  font-family: "Noto Sans JP";
  src: url("../fonts/NotoSansJP-Thin.ttf") format("truetype");
  font-weight: 100;
  font-style: normal;
}
/*Light*/
@font-face {
  font-family: "Noto Sans JP";
  src: url("../fonts/NotoSansJP-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
}
/*Regular*/
@font-face {
  font-family: "Noto Sans JP";
  src: url("../fonts/NotoSansJP-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}
/*Midium*/
@font-face {
  font-family: "Noto Sans JP";
  src: url("../fonts/NotoSansJP-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}
/*Bold*/
@font-face {
  font-family: "Noto Sans JP";
  src: url("../fonts/NotoSansJP-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: bold;
}
/*Black*/
@font-face {
  font-family: "Noto Sans JP";
  src: url("../font/Noto_Sans_JP/NotoSansJP-Black.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
}

/* --- reCAPTCHAバッジの表示制御 --- */

/* 1. まず全ページで非表示にする */
.grecaptcha-badge {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s;
}

/* 2. フォームがあるページだけ表示する */
/* WordPressのbody_class機能を利用して、特定のスラッグの時だけ上書きします */
.page-id-113 .grecaptcha-badge,
.page-id-115 .grecaptcha-badge {
  visibility: visible;
  opacity: 1;
}

html {
  overflow: auto;
  /* scroll-behavior: smooth; */
}
/* body {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
} */
body.fixed {
  position: fixed;
}

html,
body {
  background-color: #fff;
  min-height: 100vh;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 200;
  line-height: 1;
  position: relative;
  /* cursor: none; */
  /*もともとあるカーソルは非表示に*/
}
.num {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  letter-spacing: 0.1rem;
  line-height: 1;
}

p,
a,
th,
td,
h1,
h2,
h3,
h4,
h5,
h6 {
  color: #1b1b1b;
  font-feature-settings: "palt";
}

p::selection,
span::selection,
a::selection,
img::selection,
h1::selection,
h2::selection,
h3::selection,
h4::selection,
h5::selection,
h6::selection {
  color: #fff !important;
  background-color: #eb512f !important;
}

a {
  display: block;
  text-decoration: none;
  transition: 0.5s;
  transition: opacity 0.3s ease;
}
img {
  display: block;
  width: 100%;
  height: auto;
}

/* img.company_name_txt {
  display: inline-block !important;
  width: 195px;
} */

p,
th,
td {
  font-size: 1.1rem;
  line-height: 1.8;
  letter-spacing: 0.15rem;
  font-weight: 400;
}
h1 {
  font-size: 3.5rem;
  line-height: 1.6;
}
h2 {
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.2rem;
  margin-bottom: 1rem;
}
h3 {
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1.4;
  margin-bottom: 1.5rem;
}
h4 {
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem;
}
h5 {
  font-size: 1rem;
  font-weight: 500;
}
h6 {
  font-weight: 600;
  transition: 0.5s;
  /* letter-spacing: 0.1rem; */
}
sup {
  vertical-align: text-top;
  font-size: small;
}

.weight100 {
  font-weight: 100 !important
}
.weight300 {
  font-weight: 300 !important
}
.weight400 {
  font-weight: 400 !important
}
.weight500 {
  font-weight: 500 !important
}
.weight600 {
  font-weight: 600 !important
}
.weight700 {
  font-weight: 700 !important
}
.weight800 {
  font-weight: 800 !important
}
.weight900 {
  font-weight: 900 !important
}

.radius_10 {
  border-radius: 10px;
}
.radius_30 {
  border-radius: 30px;
}
.radius_50 {
  border-radius: 50px;
}
.radius_100 {
  border-radius: 100vw;
}

/*base*/
.wid_auto {
  width: auto !important;
}

.wid_020 {
  width: 20px;
}
.wid_030 {
  width: 30px;
}
.wid_040 {
  width: 40px;
}
.wid_150 {
  width: 150px;
}
.wid_250 {
  width: 250px;
}
.wid_280 {
  width: 280px;
}
.wid_300 {
  width: 300px;
}
.wid_320 {
  width: 320px;
}
.wid_360 {
  width: 360px;
}
.wid_400 {
  width: 400px;
}
.wid_420 {
  width: 420px;
}
.wid_500 {
  width: 500px;
}
.wid_580 {
  width: 580px;
}
.wid_20 {
  width: 20%;
}
.wid_30 {
  width: 30%;
}
.wid_40 {
  width: 40% !important;
}
.wid_45 {
  width: 45% !important;
}
.wid_48 {
  width: 48%;
}
.wid_50 {
  width: 50%;
}
.wid_55 {
  width: 55%;
}
.wid_57 {
  width: 57% !important;
}
.wid_60 {
  width: 60%;
}
.wid_70 {
  width: 70% !important;
}
.wid_80 {
  width: 80%;
}
.wid_100 {
  width: 100% !important;
}


.ma_auto {
  margin-left: auto;
  margin-right: auto;
}

.mt_-100 {
  margin-top: -100px;
}
.mt_-120 {
  margin-top: -120px;
}

.mt_020 {
  margin-top: 20px;
}
.mt_030 {
  margin-top: 30px;
}
.mt_040 {
  margin-top: 40px;
}
.mt_140 {
  margin-top: 140px;
}
.mt_200 {
  margin-top: 200px;
}
.mt_05 {
  margin-top: 5%;
}

.mr_010 {
  margin-right: 10px;
}
.mr_040 {
  margin-right: 40px;
}
.mr_03 {
  margin-right: 3%;
}
.mr_05 {
  margin-right: 5%;
}

.ml_010 {
  margin-left: 10px;
}
.ml_040 {
  margin-left: 40px;
}

.mb_018 {
  margin-bottom: 18px;
}
.mb_020 {
  margin-bottom: 20px;
}
.mb_030 {
  margin-bottom: 30px;
}
.mb_03 {
  margin-bottom: 3%;
}
.mb_05 {
  margin-bottom: 5%;
}

.pad_03 {
  padding: 3%;
}
.pad_04 {
  padding: 4%;
}
.pad_05 {
  padding: 5%;
}
.pad_08 {
  padding: 8%;
}
.padtb_030 {
  padding: 30px 0;
}
.padtb_03 {
  padding: 3% 0;
}

.padb_010 {
  padding-bottom: 10px;
}

/* color */
.orange {
  color: #eb512f;
}
.light_orange {
  color: #ea822d;
}
.indigo {
  color: #495a7d;
}
.pink {
  color: #ec6d82;
}
.white {
  color: #ffffff;
}
.gray {
  color: #8e8e8e !important;
}
.red {
  color: #e60016;
}
/* .gray {
  color: #828282;
} */

.txt_gradation {
  background: linear-gradient(90deg, rgb(235, 81, 47), rgb(233, 186, 42));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.txt_pink_gradation {
  background: linear-gradient(90deg, rgb(233, 52, 78), rgb(235, 165, 200));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.gradation {
  background-image: linear-gradient(90deg, rgb(235, 81, 47), rgb(233, 186, 42));
}

.bg_orange {
  background-color: #eb512f;
}
.bg_indigo {
  background-color: #495a7d;
}
.bg_pink {
  background-color: #ec6d82;
}
.bg_light_pink {
  background-color: #fff1f3;
}
.bg_white {
  background-color: #ffffff;
}
.bg_beige {
  background-color: #ffeede;
}
.bg_gray {
  background-color: #f6f6f6;
}
.bg_light_gray {
  background-color: #c3c3c3;
}
.bg_yellow {
  background-color: #e9ba2a;
}
.bg_light_yellow {
  background-color: #fff1c8;
}

.bg_gradation {
  background-image: linear-gradient(90deg, rgb(234, 130, 45), rgb(235, 81, 47));
}
.bg_indigo_gradation {
  background-image: linear-gradient(122deg, rgb(73, 90, 125), rgb(125, 146, 189));
}

.border-black {
  border: 2px solid #1b1b1b;
}
.border-orange {
  border: 2px solid #eb512f;
}
.border-indigo {
  border: 2px solid #495a7d;
}
.border-pink {
  border: 2px solid #ec6d82;
}
.border-gray {
  border: 2px solid #8e8e8e;
}
.border-yellow {
  border: 2px solid #e9ba2a;
}

.arrow-orange {
  border: 2px solid #eb512f;
}
.arrow-orange::after,
.arrow-bg_white::after {
  border-top: 2px solid #eb512f;
  border-right: 2px solid #eb512f;
}
.arrow-bg_orange::after,
.arrow-bg_gray::after,
.arrow-indigo::after,
.arrow-bg_pink::after,
.arrow-yellow::after,
.arrow-bg_black::after {
  border-top: 2px solid #ffffff;
  border-right: 2px solid #ffffff;
}
.arrow-bg_orange {
  background-color: #eb512f;
}
.arrow-bg_gray {
  background-color: #8e8e8e;
}
.arrow-bg_pink {
  background-color: #ec6d82;
}
.arrow-indigo {
  background-color: #495a7d;
}
.arrow-yellow {
  background-color: #e9ba2a;
}
.arrow-bg_white {
  background-color: #fff;
}
.arrow-bg_black {
  background-color: #1b1b1b;
}

.deco-square.orange::before {
  background-color: #eb512f;
}
.deco-square.light_orange::before {
  background-color: #ea822d;
}

.border-dotte-orange {
  display: inline-block;
  width: fit-content;
  padding-bottom: 8px;
  background-image: radial-gradient(#eb512f 1px, transparent 1px);
  background-size: 6px 6px;
  background-repeat: repeat-x;
  background-position: bottom;
}


.border-dotte-txt {
  display: flex;
  align-items: center;
}
.border-dotte-txt::before,
.border-dotte-txt::after {
  content: "";
  flex-grow: 1;
  border-bottom: 2px dotted #c3c3c3;
}
.border-dotte-txt::before {
  margin-right: 1rem;
}

.border-dotte-txt::after {
  margin-left: 1rem;
}

.box-shadow {
  box-shadow: 0px 0px 11px 2px rgba(0, 0, 0, 0.35);
}
.txt_dashed {
  /* background-image:
    linear-gradient(90deg, rgba(237, 119, 128, 0) 0%, rgba(237, 119, 128, 0) 50%, #fff 0%, #fff 100%), linear-gradient(180deg, rgba(100, 100, 100, 0) 0%, rgba(100, 100, 100, 0) 97.5%, #969696 100%);
  background-size: 8px 100%, 100% 3em;
  line-height: 3em; */
  /* line-height を px で固定するのが最も安全です */
  line-height: 48px;

  /* 背景の設定 */
  background-image:
    /* 1. 縦のドット/点線（幅 8px のうち半分を透明、半分を白にしている意図と推測） */
    linear-gradient(90deg, transparent 50%, #fff 50%),
    /* 2. 横のノート線 */
    linear-gradient(180deg, transparent 0px, transparent 47px, #969696 47px, #969696 48px);

  /* 背景サイズ：1つ目は 8px 幅固定、2つ目は line-height と完全に一致させる */
  background-size: 8px 100%, 100% 48px;

  /* 念のため、背景の繰り返しを設定 */
  background-repeat: repeat;
}

.underline,
.underline-top {
  position: relative;
}
.underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  /* テーブルの幅ではなく、アコーディオンの端まで線を伸ばす */
  /* テーブルが親要素の中で浮いている場合、ここを調整します */
  width: 100%;
  border-bottom: 2px dotted #c3c3c3;
  transform: translateY(15px);
}
.underline-top::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  border-bottom: 2px dotted #c3c3c3;
  transform: translateY(-15px);
}


hr {
  border: none;
  background-color: #c3c3c3;
  height: 1px;
  width: 100%;
  /* margin: 20px 0; */
}
hr.vr {
  height: auto;
  width: 1px;
}
hr.vr_dashed {
  width: 1px;
  height: auto;
  border: none;
  background-color: unset;
  background-image: linear-gradient(to bottom, #c3c3c3 50%, transparent 50%);
  background-size: 1px 8px;
  background-repeat: repeat-y;
}
hr.hr-dots {
  border-top: 2px dotted #c3c3c3;
  border-right: none;
  border-bottom: none;
  border-left: none;
}
hr.hr-three_dots {
  border: 0;
  margin: 2.5rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: unset;
  height: auto;
  &::before {
    content: '•••';
    font-size: 2.5em;
    letter-spacing: .3em;
  }
}

.deco-text {
  display: flex;
  align-items: center;
}


/* .triangle {
  display: inline-block;
  width: 0;
  height: 0;
  margin: 0 10px;
  border-left: 8px solid #333;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
} */
.triangle {
  background: #333;
  height: calc(18px / 2 * tan(60deg));
  width: 11px;
  margin: 0 8px;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.isosceles-triangle {
  background: #eb512f;
  height: calc(60px / 2);
  width: 16px;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  flex-shrink: 0;
  margin: 0 10px;
}

.semicircle {
  width: 60px;
  height: 30px;
  margin: 0 auto;
  border-radius: 50% / 0 0 100% 100%;
}

.flex {
  display: flex;
  gap: 2rem;
}
.no-gap {
  gap: 0;
}
.align-center {
  align-items: center;
}
.align-stretch {
  align-items: stretch;
}
.align-start {
  align-items: flex-start;
}
.align-end {
  align-items: end;
}

.justify-center {
  justify-content: center;
}
.justify-space-between {
  justify-content: space-between;
}


.center {
  text-align: center;
}

.exp-txt {
  font-size: 1rem;
  margin-top: 10px;
  text-align: center;
}

.float-container {
  display: flow-root;
  /* 最新の解除方法：これだけで内側のfloatを閉じ込めます */
  width: 100%;
  margin-bottom: 30px;
  /* セット間の余白 */

  ::after {
    content: "";
    display: block;
    clear: both;
  }

  .float-upper_right {
    float: right;
    margin-left: 20px;
    margin-bottom: 10px;
  }
  .float-lower_right {
    float: right;
    margin-left: 20px;
  }
  .float-upper_left {
    float: left;
    margin-right: 20px;
    margin-bottom: 10px;
  }
  .float-lower_left {
    float: left;
    margin-right: 20px;
  }
}


/*▼header_CSS▼*/
header.scroll-nav {
  padding: 0 1%;
  background: #fff;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
  transition: 0.5s;

  .logo {
    transition: 0.5s;
  }
  h6 {
    transition: 0.5s;
  }

  .h_item01,
  .h_item02 {
    transition: 0.5s;
    a {
      transition: 0.5s;
    }
  }
}
header {
  position: relative;
  position: fixed;
  z-index: 999;
  /* padding: 0.8% 1% 0; */
  transition: 0.5s;
  top: 0;
  background-color: #fff;
  width: 100%;

  .inner {
    width: 94%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    /* align-items: center; */
  }
  .logo {
    text-align: right;
  }

  .phone_num_wrapper .time {
    font-size: 0.9rem;
    letter-spacing: 0.01rem;
    font-weight: 500;
    .num {
      font-size: 1.1rem;
      letter-spacing: 0.01rem;
      font-weight: 600;
    }
  }
  .phone_num {
    margin-right: 0.5rem;
    p {
      font-size: 2rem;
    }
  }
  .phone_num.icon_img {
    img {
      width: 25px;
      transition: 0.5s;
    }
  }
  .btn {
    width: 200px;
    padding: 3px 0;
    text-align: center;
    /* p {
      font-size: 1.4rem;
    } */
  }
  .access-btn.icon_img img {
    width: 20px;
  }

  .h_item01,
  .h_item02 {
    display: flex;
    align-items: center;
    justify-content: end;
    transition: 0.5s;

    a {
      transition: 0.5s;
    }
  }
  .h_item01 {
    gap: 1rem;
  }
  .h_item02 {
    gap: 2rem;
    li {
      /* padding: 0 3%; */
      /* transition: 0.5s; */
    }
    a {
      height: 55px;
      color: #1b1b1b;
      font-size: 0.9rem;
      font-weight: 300;
      white-space: nowrap;
      letter-spacing: 0.05rem;
    }
    p {
      font-weight: 700 !important
    }
  }

  /* header_btn_CSS */
  .buttonUnderline {
    /* height: 60px; */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    overflow-wrap: anywhere;
    background: transparent;
    /* transition: 0.5s; */
  }
  .buttonUnderline::after {
    position: absolute;
    content: "";
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 2px;
    background-color: #eb512f;
    transform: scaleX(0);
    transform-origin: right top;
    transition: transform 0.3s;
  }

  @media (any-hover: hover) {
    .buttonUnderline:hover::after {
      transform: scaleX(1);
      /* ホバー時：右へ伸びるように見せるため、基点を左に設定 */
      transform-origin: left top;
      /* ホバー時の速度を個別に調整したい場合はここに追加 */
      transition: transform 0.3s;
    }
  }
  /* header_btn_CSS */
}
/*▲header_CSS▲*/

/*▼footer_CSS▼*/
footer {
  position: sticky;
  top: 100vh;

  .inner {
    margin: 0 auto;
  }

  .gmap iframe {
    aspect-ratio: 16 / 9;
    width: 100%;
    height: 400px;
    pointer-events: none;
    width: 100%;
  }
  /* 地図がクリックされたら操作を有効にする */
  .gmap.is-active iframe {
    pointer-events: auto;
  }

  .footer-info {
    /* .inner {
      justify-content: space-between;
    } */
    .logo {
      width: 70%;
      max-width: 450px;
    }
    .address {
      margin: 2rem 0;
      p {
        font-size: 1.4rem;
        line-height: 1.4;
        margin: 1rem 0;
      }
      b {
        font-size: 1.6rem;
      }
    }
    .contact-btn-wrapper {
      .btn {
        height: 50px;
      }
    }
    .footer-map {
      flex-basis: 53%;
    }
  }
  .footer-link {
    .inner>ul {
      li {
        margin-bottom: 1rem;
      }
    }
    li p {
      font-size: 1.1rem;
      font-weight: 700;
      letter-spacing: 0.1rem;
    }
    ol {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      justify-content: flex-start;
      gap: 0 2rem;
    }
    ol>li:first-child {
      width: 100%;
      flex: none;
    }
    .treatment_link {
      /* flex: 1; */
      p {
        line-height: 1.8;
        font-size: 1rem;
      }
      .deco-square {
        margin-left: 1rem;
        /* align-items: baseline; */
      }
    }
  }

  .footer {
    .inner {
      align-items: end;
      padding: 3rem 0 5rem;
      justify-content: space-between;
    }
    p,
    a {
      color: #fff;
      transition: opacity 0.3s ease;
    }

    .ttl {
      font-size: 1.8rem;
      font-weight: 600;
    }
    .txt {
      line-height: 1.4;
      margin: 1rem 0;
    }
    .icon {
      max-width: 40px;
    }
    .link {
      display: flex;
      justify-content: end;
      margin: 0.5rem 0;
      p {
        font-size: 1rem;
        /* margin-right: 0; */
        padding-left: 2rem;
      }
    }
    .copy {
      font-size: 0.8rem;
      letter-spacing: 0.05rem;
    }
  }
}
/*▲footer_CSS▲*/


/*▼全ページ_共通CSS▼*/
main,
.contents {
  position: relative;
}

footer,
.news-item {
  a:hover {
    opacity: 0.7;
  }
}

/* ローディング */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgb(235, 81, 47), rgb(233, 186, 42));
  background-size: 200% 200%;
  display: flex;
  flex-direction: column;
  /* 縦に並べる */
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: gradient-flow 5s ease infinite;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

/* 読み込み完了で消すための設定 */
.loading-overlay.is-loaded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* --- 文字のアニメーション --- */
.wave {
  display: block;
  text-align: center;
  margin-bottom: 20px;
}

.wave span {
  display: inline-block;
  color: #fff;
  font-size: 1.5rem;
  font-weight: bold;
  /* alternateを外し、durationを長め（2秒程度）に設定して「間」を作ります */
  animation: wave-with-pause 2s ease-in-out infinite;
}

/* 1文字ずつの遅延（0.05s刻みで滑らかに） */
.wave span:nth-child(1) {
  animation-delay: 0s;
}
.wave span:nth-child(2) {
  animation-delay: 0.05s;
}
.wave span:nth-child(3) {
  animation-delay: 0.1s;
}
.wave span:nth-child(4) {
  animation-delay: 0.15s;
}
.wave span:nth-child(5) {
  animation-delay: 0.2s;
}
.wave span:nth-child(6) {
  animation-delay: 0.25s;
}
.wave span:nth-child(7) {
  animation-delay: 0.3s;
}
.wave span:nth-child(8) {
  animation-delay: 0.35s;
}
.wave span:nth-child(9) {
  animation-delay: 0.4s;
}
.wave span:nth-child(10) {
  animation-delay: 0.45s;
}
.wave span:nth-child(11) {
  animation-delay: 0.5s;
}
.wave span:nth-child(12) {
  animation-delay: 0.55s;
}
.wave span:nth-child(13) {
  animation-delay: 0.6s;
}
.wave span:nth-child(14) {
  animation-delay: 0.65s;
}
.wave span:nth-child(15) {
  animation-delay: 0.7s;
}
.wave span:nth-child(16) {
  animation-delay: 0.75s;
}

@keyframes wave-with-pause {
  0% {
    transform: translate3d(0, 0, 0);
  }
  20% {
    transform: translate3d(0, -15px, 0);
  }
  /* 跳ねる */
  40% {
    transform: translate3d(0, 0, 0);
  }
  /* 戻る */
  100% {
    transform: translate3d(0, 0, 0);
  }
  /* 静止（タメ） */
}
/* --- ドットの修正 --- */
/* ドットの親要素を横並びに */
/* ドットの親要素 */
.dots {
  display: flex;
  align-items: center;
  justify-content: center;
}

.dots .dot {
  width: 12px;
  height: 12px;
  margin: 0 5px;
  background-color: #ffffff;
  /* 白に変更 */
  border-radius: 50%;
  /* 1.5sだと少し速いので、ゆったりさせるなら2sがおすすめです */
  animation: dot-pulse-smooth 2s ease-in-out infinite;
}

/* 順番に遅延をかける（数値が近いほど波が速くなります） */
.dots .dot:nth-child(1) {
  animation-delay: 0s;
}
.dots .dot:nth-child(2) {
  animation-delay: 0.15s;
}
.dots .dot:nth-child(3) {
  animation-delay: 0.3s;
}

/* ヌルヌル動くように％を調整 */
@keyframes dot-pulse-smooth {
  0% {
    transform: scale(0.7);
    opacity: 0.5;
  }
  30% {
    transform: scale(1.0);
    /* 30%地点で最大 */
    opacity: 1;
  }
  60% {
    transform: scale(0.7);
    /* 60%地点で戻る */
    opacity: 0.5;
  }
  100% {
    transform: scale(0.7);
    /* 残りはそのまま（タメ） */
    opacity: 0.5;
  }
}

/* 背景グラデーション */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgb(235, 81, 47), rgb(233, 186, 42));
  background-size: 200% 200%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: gradient-flow 5s ease infinite;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

@keyframes gradient-flow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
/* ローディング */


/* スクロールして表示するアニメーション */
.fade-in-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* 共通：画面内に入った時の状態 */
.fade-in-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* スクロールして表示するアニメーション */
/*▲全ページ_共通CSS▲*/



/* btn_CSS */
a.btn:hover {
  opacity: 0.7;
}

.btn {
  border-radius: 10px;
  transition: opacity 0.3s ease;

  p {
    font-size: 1.4rem;
    letter-spacing: 0.25em;
  }
}
.phone-btn {
  p.num {
    font-size: 1.6rem;
    letter-spacing: 0.1rem;
    font-weight: 700;
  }
}
.reservation-btn p {
  letter-spacing: 0.12rem;
}

.arrow-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-grow: 1;
  text-decoration: none;
}
/* 後ろの丸＋矢印 */
.arrow {
  position: relative;
  box-sizing: border-box;
  display: block;
  width: 30px;
  height: 30px;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  flex-shrink: 0;
  /* アイコンが潰れないように固定 */
  transition: transform 0.3s ease;
}
/* 矢印の「く」の字 */
.arrow::after {
  content: "";
  position: absolute;
  /* top: 8px;
  left: 10px;
  width: 8px;
  height: 8px; */
  top: 8px;
  left: 10px;
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
}
.arrow.down-anime::after {
  /* left: 10px; */
  transform: rotate(135deg);
  transition: transform 0.3s ease, top 0.3s ease;
}
.accordion.is-open .arrow.down-anime::after {
  top: 12px;
}
/* ホバー時の動き */
a:hover .arrow {
  transform: translateX(5px);
}

.deco-square {
  .arrow::after {
    left: 6px;
  }
}

.external-btn {
  border-radius: 100vw;
  width: 80%;
  margin: 0 auto;
  padding: 5px 0;
}
.details-btn {
  position: relative;
  border: solid 2px;
  border-radius: 100vw;
  margin-top: 2rem;
  margin-left: auto;
  padding: 3px 12px;
  font-weight: 800;
  justify-content: center !important;
  transition: all 0.5s ease 0s;
  .arrow {
    position: absolute;
    right: 12px;
    width: 24px;
    height: 24px;
  }
  .arrow::after {
    /* left: 7px;
    width: 6px;
    height: 6px; */
    left: 6px;
    width: 8px;
    height: 8px;
  }
}

.contact-btn-wrapper {
  /* max-width: 680px; */
  margin: 0 auto;
  gap: 1rem;
}

.contact-btn {
  position: relative;
  /* margin-top: 20px; */
  margin-left: auto;
  padding: 3px 12px;
  font-weight: 800;
  justify-content: center !important;
  transition: all 0.5s ease 0s;
  font-size: 1.4rem;
  .arrow {
    position: absolute;
    right: 12px;
    width: 24px;
    height: 24px;
  }
  .arrow::after {
    /* left: 7px;
    width: 6px;
    height: 6px; */
    left: 7px;
    width: 8px;
    height: 8px;
  }
}

.icon_img {
  display: flex;
  align-items: anchor-center;
  justify-content: center;
  text-decoration: none;
  img {
    height: auto;
    margin-right: 0.5rem;
  }
}

.deco-square {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}
.deco-square::before {
  content: "";
  width: 12px;
  height: 12px;
  margin-right: 12px;
  flex-shrink: 0;
}
.deco-square.deco-2lines {
  align-items: flex-start !important;

  .ttl {
    line-height: 1.4;
  }
}
.deco-square.deco-2lines::before {
  margin-top: 0.8em;
}

.main {
  .deco-square {
    align-items: flex-start;
  }
  .deco-square::before {
    margin-top: 0.7em;
  }
}
footer .deco-square::before {
  width: 10px;
  height: 10px;
}
/* btn_CSS */


/* アコーディオンのスタイル */
.accordion {
  border-radius: 30px;
  overflow: hidden;
  margin: 1em auto 0;
  touch-action: pan-y;
}
.accordion-item {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  background-color: #ffffff;
  transition: 0.5s;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  .inner {
    width: 90%;
    margin: 0 auto;
  }
  .accordion-ttl {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 8px;
  }
}
.accordion.is-open .arrow::after {
  transform: rotate(-45deg);
  top: 9px;
}
.accordion-content {
  display: none;
  overflow: hidden;
  background: #fff;

  .inner {
    width: 90%;
    margin: 0 auto;
  }
}
.close-btn {
  padding: 5px 0;
  cursor: pointer;
  border-radius: 100vw;
  width: 200px;
  margin: 3em auto 3rem;
  border: none;
}
/* アコーディオンのスタイル */



/* 画像を拡大表示 */
/* --- 背景固定 --- */
/* モーダルが開いている時、Lenisのターゲット要素（通常はhtmlかbody）を完全に固定 */
/* 修正後：htmlとbody両方に効かせる */
html.modal-open,
body.modal-open {
  /* height: 100% !important; ← これを必ず消す */
  overflow: hidden !important;
  touch-action: none;
  /* スマホでの位置ズレ防止 */
}

/* 慣性スクロールが止まっている時の挙動を安定させる */
html.lenis-stopped {
  overflow: hidden;
}

/* --- コンテナ（画像部分） --- */
.modal-wrapper .img-container {
  position: relative;
  display: inline-block;
  cursor: pointer;
  overflow: hidden;
  border-radius: 30px;
}

.modal-wrapper .expand-img {
  display: block;
  transition: opacity 0.3s ease;
}

.modal-wrapper .img-container:hover .expand-img {
  opacity: 0.7;
}

.modal-wrapper .expand-icon {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 45px;
  pointer-events: none;
  /* アイコンを突き抜けて画像をクリックできるように */
}

/* --- モーダル本体（ここを独立させる） --- */
.modal {
  display: none;
  position: fixed;
  z-index: 99999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85);
  cursor: pointer;
}

/* モーダル表示中のみ表示 */
body.modal-open .modal {
  /* JSでdisplay: blockにするのでここは設定不要ですが、
     もしJSがクラスの付け外しだけなら display: block; を書きます */
}

.modal-content {
  margin: auto;
  max-width: 90vw;
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: default;
}

.close {
  position: absolute;
  top: 20px;
  right: 35px;
  color: white;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
  z-index: 100000;
}
/* 画像を拡大表示 */


/* 動画のレスポンシブ対応 */
.detail-content iframe,
.detail-content video {
  max-width: 100%;
  width: 100%;
  /* 横幅いっぱいに広げる */
  height: auto;
  aspect-ratio: 16 / 9;
  /* 16:9の比率を維持 */
  border-radius: 8px;
  /* 角を少し丸くすると綺麗です */
}
/* 動画のレスポンシブ対応 */



/*▼TOPページmv_CSS▼*/
#mv {
  position: relative;
  height: 100vh;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;

  .inner {
    position: relative;
    width: 94%;
    margin: 0 auto;
    background-color: #616161;
    height: 82vh;
    overflow: hidden;
    margin-top: 6rem;
  }

  .mv_catch {
    position: absolute;
    bottom: 30%;
    left: 5%;
    z-index: 5;
  }
  h1 {
    letter-spacing: 0.4rem;
    font-weight: 900;
  }
  .h1_sub {
    /* font-size: 3.5rem; */
    padding: 0 7px;
    /* line-height: 1.5; */
  }

  .fv-news {
    height: auto;
    padding: 0.5% 1% 0.5% 2%;
    overflow: hidden;
    display: flex;
    background-color: #495a7d;
    .ttl {
      position: relative;
      font-weight: 600;
      display: flex;
      align-items: center;
    }
    /* .ttl::after {
      content: "";
      position: absolute;
      right: 20%;
      top: 0;
      bottom: 0;
      margin: auto 0;
      background: #fff;
      width: 1px;
      height: 70%;
    } */
    p {
      color: #fff;
    }
    .fv-news-list {
      max-width: 500px;
      /* 任意の横幅に設定してください */
      a {
        position: relative;
        display: flex;
        align-items: baseline;
        gap: 0.5rem;
        text-decoration: none;
        color: inherit;
        width: 100%;
      }
      a:hover {
        opacity: 0.7;
      }
      /* a::after {
        content: "";
        position: absolute;
        width: 100%;
        background-color: #fff;
        height: 1px;
        bottom: 3px;
        left: 0;
        opacity: 0;
        transition: all .3s;
      } */
      /* リンクにホバーした際の下線の表示 */
      /* a:hover::after {
        bottom: 1px;
        opacity: 1;
      } */
      p {
        font-size: 0.9rem;
      }
      .num {
        font-weight: 500;
      }
      .title {
        flex: 1;
        white-space: nowrap;
        /* 改行させない */
        overflow: hidden;
        /* はみ出た分を隠す */
        text-overflow: ellipsis;
        /* 三点リーダー「...」を表示 */
      }
    }
  }

  .schedule {
    /* position: absolute;
    bottom: 0;
    right: 0;
    z-index: 10;
    margin: 0; */
    .schedule-table {
      max-width: 800px;
      border-radius: 0;
      box-shadow: none;
    }
  }
}
/*▲TOPページmv_CSS▲*/

/*▼TOPページmvアニメーション_CSS▼*/
.mv_bg {
  position: relative;
  width: 100%;
  height: 100%;
  /* 画面いっぱいの高さ */
  overflow: hidden;
}
.slide {
  position: relative;
  width: 100%;
  height: 100%;
}
.slide-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  /* 基本は消しておく */
}

.slide-image:nth-child(1) {
  /* background-color: orange; */
  background-image: url(../img/common/mv_bg01.png);
  animation: slide-animation-01 24s infinite;
  z-index: 3;
}
/* --- 仮画像の設定 --- */
.slide-image:nth-child(2) {
  /* background-color: blue; */
  background-image: url(../img/common/mv_bg02.png);
  animation: slide-animation-02 24s infinite;
  z-index: 2;
}
.slide-image:nth-child(3) {
  /* background-color: green; */
  background-image: url(../img/common/mv_bg03.png);
  animation: slide-animation-03 24s infinite;
  z-index: 1;
}
/* --- フェードアニメーション --- */
@keyframes slide-animation-01 {
  0% {
    opacity: 1;
    transform: scale(1.0);
  }
  30% {
    opacity: 1;
  }
  40% {
    opacity: 0;
    transform: scale(1.1);
  }
  /* 💡拡大率を少し抑えると上品です */
  90% {
    opacity: 0;
    transform: scale(1.0);
  }
  /* 💡見えない間にサイズを戻す */
  100% {
    opacity: 1;
    transform: scale(1.0);
  }
}

@keyframes slide-animation-02 {
  0% {
    opacity: 0;
    transform: scale(1.1);
  }
  30% {
    opacity: 0;
    transform: scale(1.1);
  }
  40% {
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  70% {
    opacity: 0;
    transform: scale(1.0);
  }
  100% {
    opacity: 0;
  }
}

@keyframes slide-animation-03 {
  0% {
    opacity: 0;
    transform: scale(1.0);
  }
  60% {
    opacity: 0;
    transform: scale(1.0);
  }
  70% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1.1);
  }
}
/*▲TOPページmvアニメーション_CSS▲*/


/*▼TOPページ_CSS▼*/
.top-main {
  .contents {
    margin: 4rem 0 5rem;
  }
  .contents>.inner {
    width: 94%;
    margin: 0 auto;
    max-width: 1500px;
  }

  /*▼導入_CSS▼*/
  .intro {
    /* margin-top: 0 !important; */
    .txt-wrapper {
      flex-basis: 60%;
    }
    .img-wrapper {
      flex-basis: 40%;
      img {
        border-radius: 30px;
      }
    }
  }
  /*▲導入_CSS▲*/

  /*▼実績コンテンツ_CSS▼*/
  .results {
    /* margin: 5rem 0 1rem; */
    /* padding: 3rem 0 1rem; */

    .results-inner {
      padding: 2.5rem 0 1rem;
    }
    .top-results-list {
      margin: 2rem 0;
    }
    /* 記事全体のリンクがブロックとして機能するように */
    .results-item-link {
      display: block;
      text-decoration: none;
      color: inherit;
      height: 100%;
    }
    .results-item {
      min-height: 350px;
      display: flex;
      gap: 2rem;
      margin: 2rem 0;
      padding: 2rem 3rem;
      background-color: #fff;
      border-radius: 50px;
      box-shadow: 0px 0px 11px 4px rgba(0, 0, 0, 0.1);
    }
    .results-img {
      position: relative;
      margin-top: -3rem;
      width: 100%;
      max-width: 220px;
      object-fit: cover;
      /* margin-left: 2rem; */
    }
    .results-img img {
      min-height: 300px;
    }
    .results-txt {
      flex: 1;
      display: flex;
      flex-direction: column;
      /* 💡 中身を縦に並べる */
      min-width: 0;
      time {
        p {
          color: #8e8e8e;
          font-weight: 500;
          font-size: 1rem;
          line-height: 1;
        }
      }
      .results-title {
        font-size: 1.2rem;
        line-height: 1.6;
        margin-top: 0.4rem;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 7;
        overflow: hidden;
        transition: all 0.5s ease 0s;
      }
      .details-btn {
        width: 220px;
        max-width: 220px;
        margin-top: auto;
        flex-grow: initial;
        /* 💡 これが魔法のプロパティ。上の要素との隙間を最大化して下へ押し下げます */
      }
    }
    a:hover .results-title {
      color: #eb512f;
    }
    a:hover .details-btn.orange {
      background-color: #fff6ed;
    }
    a.details-btn {
      max-width: 200px;
      margin-top: 0;
      margin-right: 3rem;
    }
    .splide__pagination {
      bottom: -2rem;
    }
  }
  /*実績コンテンツ_CSS▲*/

  /* 
.threes-item>div {
  width: 100%;
} */
  .treatment {
    /* margin: 4rem 0 6rem; */
    .threes-item {
      gap: 1rem;
      .inner {
        padding: 2.2rem 2.5rem 2rem;
      }
      .list li {
        margin: 1.5rem 0;
      }
      .list p {
        font-size: 1.3rem;
        font-weight: 600;
        /* line-height: 2; */
        align-items: baseline;
      }
      .arrow-btn {
        flex-grow: 1;
      }
      a:hover .arrow {
        transform: translateX(7px);
      }
    }
  }

  .treatment_results {
    padding: 3rem 0 4rem;
    .inner.flex {
      align-items: center;
    }
    .treatment_results-ttl {
      padding-bottom: 0.5rem;
    }
    table {
      width: 100%;
      border-collapse: collapse;
      /* 線を一本に繋げるために必須 */
      th {
        /* width: 150px; */
        width: 30%;
        min-width: 108px;
        vertical-align: middle;
        border-right: 1px solid #c3c3c3;
        padding: 0;
      }
      td {
        /* padding: 0.3rem 2rem; */
        padding: 2% 5%;
        vertical-align: middle;
      }
      /* th,
      td {
        padding: 0.3rem 1rem;
      } */
      th p,
      td p {
        margin: 0;
      }
    }
  }

  .features {
    /* margin: 6rem 0; */
    width: 100%;
    overflow: hidden;
    /* 右側に突き出るスライダーを隠す */

    .features-grid {
      display: grid;
      /* 1列目：(100% - 94%) / 2 = 3% の外側余白（ただし最大幅 1500px に合わせた計算も含む）
                   2列目：テキストエリア（コンテンツ幅の半分）
                   3列目：スライダーエリア（残りの右側すべて）
                */
      grid-template-columns:
        calc((100% - min(94%, 1500px)) / 2) min(35%, 525px) 1fr;
      align-items: center;
      column-gap: 40px;
    }
    /* 1列目（空白）を飛ばして2列目から配置 */
    .features-left-content {
      grid-column: 2;
      box-sizing: border-box;
      /* margin-right: 3rem; */
    }
    /* 3列目：スライダーを右端まで埋める */
    #features-slider {
      grid-column: 3;
      width: 100%;

      .splide__slide {
        display: flex;
        justify-content: center;
      }
      .splide__slide img {
        width: 100%;
        height: auto;
        /* max-height: 550px; */
        object-fit: cover;
      }
    }

    .threes-item {
      margin-top: 12rem !important;
    }
  }

  .bottom-news {
    /* margin-bottom: 4.5rem !important; */
    .news-list {
      margin: 2rem auto;
      .news-item a {
        margin: 1rem 0;
      }
    }
    .bottom-news-btn a.details-btn {
      max-width: 200px;
      margin: 0 auto;
    }
  }

}
/*▲TOPページ_CSS▲*/


/* 特徴_共通CSS */
.features .threes-item {
  margin-top: 11rem;

  .inner {
    position: relative;
    padding: 5rem 3rem 2rem;
    .absolute {
      position: absolute;
      left: 0;
      right: 0;
      margin-right: auto;
      margin-left: auto;
      width: 14rem;
      top: -140px;
    }
    h3 {
      font-size: 1.8rem;
      margin: 1rem 0;
    }
  }
}
/* 特徴_共通CSS */

/* 実績コンテンツ_共通CSS */
.results-img img {
  object-fit: cover;
  display: block;
  object-position: 25% 50%;
}

.no-image-placeholder {
  width: 100%;
  aspect-ratio: 9 / 12;
  /* ここで16:9を強制する */
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #e0e0e0;
  color: #999;
  /* 外枠の results-img に padding 等があっても、このボックス自体が16:9になります */
}
/* 実績コンテンツ_共通CSS */


/* お知らせ_共通CSS */
.news-list {

  .news-item {
    margin-bottom: 1rem;
    p {
      font-weight: 500;
    }
    a {
      /* display: flex; */
      margin: 1.5rem 0;
      gap: 2rem;
    }
    time {
      font-weight: 600;
    }
  }

  .news-link {
    display: inline;
    background-image: radial-gradient(#c3c3c3 20%, transparent 25%);
    background-position: 0 25px;
    background-size: 7px 6px;
    background-repeat: repeat-x;
    text-decoration: none;
    padding-bottom: 5px;
  }

}

.news-link {
  /* display: inline-block;
  text-decoration: none;
  position: relative; */
}
/* .news-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 100%;
  border-bottom: 2px dotted #c3c3c3;
} */

/* お知らせ_共通CSS */



/* スケジュール_共通CSS */
.schedule {
  margin: 2rem 0;
  .schedule-table {
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 0 0 3px #ea822d;
    p {
      margin: 0;
      padding: 0;
    }
    thead {
      background-color: #ea822d;
      p {
        color: #fff;
      }
    }
    th,
    td {
      text-align: center;
      border-left: 1px solid #f2ab6d;
      border-right: 1px solid #f2ab6d;
      border-top: none;
      border-bottom: none;
    }
    th:first-child,
    td:first-child {
      border-left: none;
    }
    th:last-child,
    td:last-child {
      border-right: none;
    }
    th {
      padding: 8px 16px;
    }
    td {

      background-color: #fffcf9;
      p {
        color: #ea822d;
        font-weight: bold;
      }
    }
    .row-morning td {
      padding: 8px 16px 4px;
    }
    .row-afternoon td {
      padding: 4px 16px 8px;
    }
    .time-col {
      .num {
        font-size: 1.3rem;
      }
    }
  }
}
/* スケジュール_共通CSS */


/*▼_CSS▼*/
/*▲_CSS▲*/


/*全共通CSS*/

/*============================*/

/*PC_CSS*/
@media screen and (min-width: 1280px) {
  .pc-none {
    display: none;
  }

  h6 {
    font-size: 1rem;
  }

  .details-btn.gray:hover {
    background-color: #f6f6f6;
  }
  .details-btn.orange:hover {
    background-color: #fff6ed;
  }

  .accordion.border-orange>button:hover {
    background-color: #fff6ed;
  }
  .accordion.border-pink>button:hover {
    background-color: #fff2f4;
  }
  .accordion.border-indigo>button:hover {
    background-color: #e5eaf3;
  }

  hr.pc-vr {
    height: auto;
    width: 1px;
  }


  /*▼header_CSS▼*/
  header.scroll-nav {
    .logo {
      width: 320px;
    }
    .h_item02 {
      margin-top: -2px;
    }
    .h_item02 a {
      height: 50px;
    }
  }
  header {
    .logo {
      width: 350px;
      padding-top: 8px;
    }
    h6 {
      margin-top: 4px;
      margin-right: 10px;
    }
    .h_item01 {
      margin-top: 12px;
    }
    .h_item02 {
      margin-top: 4px;
    }
  }
  /*▲header_CSS▲*/

  /*▼footer_CSS▼*/
  footer {
    .inner {
      width: 80% !important;
      max-width: 1300px;
      min-width: 1200px;
      padding: 3rem 0 4rem;
      display: flex;
      gap: 1rem;
    }
    .footer-info {
      .inner {
        align-items: end;
        justify-content: space-between;
        gap: 3rem;
      }
      .info-txt {
        flex-basis: 48%;
      }
      .footer-map {
        flex-basis: 52%;
      }
    }
    .footer-link {
      .inner>ul {
        width: 10%;
        min-width: 120px;
      }
    }
    .footer {
      .icon {
        margin-left: auto;
      }
    }
  }
  /*▲footer_CSS▲*/

  /*▼TOPページ_CSS▼*/
  #mv {
    .fv-news {
      position: absolute;
      bottom: 0;
      left: 0;
      z-index: 3;
      gap: 1.5rem;
    }
    .schedule {
      position: absolute;
      bottom: 0;
      right: 0;
      z-index: 10;
      margin: 0;
    }
  }

  .top-main {
    .contents {
      min-width: 950px;
    }


    .treatment_results {
      .bg_gray,
      .txt_dashed {
        flex-basis: 50%;
      }
    }
    .news-list {
      margin: 2rem auto;
      max-width: 800px;
      width: 80%;
    }
  }
  /*▲TOPページ_CSS▲*/

  /* 実績コンテンツ_共通CSS */
  .results-img img {
    min-height: 240px;
  }
  /* 実績コンテンツ_共通CSS */

  /*▼全ページ_共通CSS▼*/
  .flex.threes-item {
    .inner {
      width: 100%;
    }
  }

  .contact-btn-wrapper {
    max-width: 680px;
    /* max-width: 680px;
    gap: 1rem; */
    .phone-btn {
      flex-basis: 60%;
    }
    .reservation-btn {
      flex-basis: 40%;
    }
  }

  .study-btn {
    min-width: 400px;
  }

  /* スクロールして表示するアニメーション */
  /* PC版（横並び）のみ時間差をつける設定 */
  /* 親要素の中で2番目、3番目の要素にディレイをかける */
  .fade-in-up:nth-child(2) {
    transition-delay: 0.2s;
  }
  .fade-in-up:nth-child(3) {
    transition-delay: 0.4s;
  }
  /* スクロールして表示するアニメーション */

  /*▲全ページ_共通CSS▲*/

  /*カーソル要素*/
  #cursor {
    position: fixed;

    /*丸の大きさと色の指定*/
    background: #fff;
    border-radius: 10px;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    /*真ん中にくるようにマイナスマージンで調整*/

    z-index: 9999999;
    /*一番手前に来るように*/
    pointer-events: none;
    /*クリックできなくなるのを防ぐため。noneで対応*/
    opacity: 0;
    transition: transform 0.1s;
    /*アニメーションの秒数指定*/
  }
  /*ちょっと遅れてついてくるストーカー要素*/
  #stalker {
    position: fixed;

    /*丸の大きさと色の指定*/
    background: #00b1dd;
    width: 60px;
    height: 60px;
    border-radius: 30px;
    margin: -30px 0 0 -30px;
    /*真ん中にくるようにマイナスマージンで調整*/
    z-index: 999999;
    /*カーソルの後ろに来るように*/
    pointer-events: none;
    /*クリックできなくなるのを防ぐため。noneで対応*/
    opacity: 0;
    transition: transform 0.5s;
    /*アニメーションの秒数指定*/
  }
  #cursor.active,
  #stalker.active {
    transform: scale(1.4);
  }

  #cursor.passive,
  #stalker.passive {
    transform: scale(1);
  }
  /*カーソル要素*/
}
/*PC_CSS*/

/*============================*/

/*SP_TABLET_CSS*/
@media screen and (max-width: 1279px) {
  .sp_tab-none {
    display: none;
  }

  body.fixed {
    position: fixed;
    width: 100%;
    left: 0;
    overflow: hidden;
    /* 念のためスクロールバーを消す */
  }

  p {
    letter-spacing: 0.08em;
    line-height: 2;
  }
  p,
  th,
  td {
    font-size: 1.1rem;
  }
  h1 {
    font-size: 1.8rem;
    letter-spacing: 0.8rem;
  }
  h2 {
    font-size: 1.8rem;
    letter-spacing: 0.1rem;
    margin-bottom: 0.5rem;
  }
  h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
  }
  h4 {
    font-size: 1.2rem;
  }
  h5 {
    font-size: 0.7rem;
  }
  h6 {
    font-size: 0.7rem;
  }

  .flex {
    gap: 1rem;
  }

  .radius_50 {
    border-radius: 30px;
  }

  .isosceles-triangle {
    height: calc(50px / 2);
    width: 12px;
    margin: 0 8px;
  }

  hr.vr_dashed {
    width: 100%;
    /* 横幅いっぱいにする */
    height: 1px;
    /* 高さを1pxにする */
    background-image: linear-gradient(to right, #c3c3c3 50%, transparent 50%);
    /* 向きを右方向へ */
    background-size: 8px 1px;
    /* サイズを（横 縦）の順で指定 */
    background-repeat: repeat-x;
    /* 横方向にリピート */
  }

  /*▼header_CSS▼*/
  header.scroll-nav {
    padding: 0;
    .logo {
      /* width: 190px; */
      /* transition: 0.5s; */
    }
    h6 {
      margin-top: 2px;
      /* transition: 0.5s; */
    }
    .h_item01 {
      padding-top: 1px;
      /* transition: 0.5s; */
    }
    .h_item02 {
      padding: 0.1rem 0 0.2rem;
      /* transition: 0.5s; */
      a {
        height: 42px;
      }
    }
    .header__hamburger {
      scale: 0.9;
      transition: 0.5s;
    }
    /* .phone_num {
      p {
        font-size: 1.3em;
        transition: 0.5s;
      }
    } */
    /* .phone_num.icon_img {
      img {
        width: 18px;
        transition: 0.5s;
      }
    } */
  }
  header {
    .inner {
      width: 96%;
      justify-content: space-between;
      align-items: center;
      gap: 0.5rem;
      transition: 0.5s;
    }
    .logo {
      width: 170px;
      padding: 0;
      transition: 0.5s;
    }
    h6 {
      margin-top: 4px;
    }
    .h_item01 {
      align-items: center;
      padding-top: 3px;
    }
    .h_item02 {
      padding: 0.3rem 0 0.2rem;
      a {
        height: 50px;
        flex-basis: 50%;
      }
    }
    .phone_num {
      margin: 0;
      p {
        padding-top: 0.5rem;
        font-size: 1.2em;
        transition: 0.5s;
      }
      img {
        padding-top: 0.5rem;
      }
    }
    .phone_num.icon_img {
      img {
        width: 16px;
      }
    }
    .icon_img {
      img {
        margin-right: 0.2rem;
      }
    }
    .btn {
      padding: 0;
    }
  }
  /* ▼ハンバーガーメニュー▼ */
  .header__hamburger {
    position: relative;
    /* .inner内で並ぶため */
    display: block;
    width: 58px;
    height: 50px;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 1000;
    background-color: #eee;
    border-radius: 5px;
    transition: 0.5s;
  }

  .menu-text,
  .close-text {
    position: absolute;
    top: 1px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    font-weight: bold;
    color: #000;
    white-space: nowrap;
    transition: opacity 0.4s ease;
    pointer-events: none;
    /* テキストがクリックを邪魔しないように */
  }

  /* 初期状態 */
  .close-text {
    opacity: 0;
  }

  /* active（開いた時）の切り替え */
  .hamburger.active .menu-text {
    opacity: 0;
  }
  .hamburger.active .close-text {
    opacity: 1;
  }

  .hamburger span:not(.menu-text):not(.close-text) {
    position: absolute;
    width: 36px;
    left: 0;
    right: 0;
    margin: 0 auto;
    height: 3px;
    background-color: #000;
    transition: all 0.4s ease;
    border-radius: 10px;
  }

  /* 線の初期位置（spanの3, 4, 5番目） */
  .hamburger span:nth-child(3) {
    top: 19px;
  }
  .hamburger span:nth-child(4) {
    top: 29px;
  }
  .hamburger span:nth-child(5) {
    top: 39px;
  }

  /* active時の形状変化（×印） */
  .hamburger.active span:nth-child(3) {
    top: 30px;
    transform: rotate(45deg);
  }
  .hamburger.active span:nth-child(4) {
    opacity: 0;
  }
  .hamburger.active span:nth-child(5) {
    top: 30px;
    transform: rotate(-45deg);
  }

  .header__nav {
    position: absolute;
    /* fixedから変更 */
    top: 100%;
    /* 親要素（ヘッダー）のすぐ下から開始 */
    left: 0;
    width: 100%;
    height: calc(100vh - 80px);
    /* 画面一杯にする場合。80pxはヘッダーの高さに合わせて調整 */
    background-color: #fff;
    z-index: 900;

    /* 初期は隠す */
    visibility: hidden;
    opacity: 0;
    transition: all 0.6s ease;

    /* 中身の配置 */
    /* display: flex; */
    justify-content: center;
    align-items: flex-start;
    /* 中央ではなく上寄りに配置 */
    overflow-y: auto;
  }


  .h_item {
    margin-top: 2rem;
    li {
      /* padding-bottom: 20px; */
      width: 80%;
      margin: 0 auto;
      text-align: center;
      padding: 1.5rem 0;
      border-bottom: 1px solid #1b1b1b;
      p {
        font-weight: 600;
        font-size: 1.2rem;
      }
    }
  }


  /* メニューが開いた時 */
  .header__nav.active {
    visibility: visible;
    opacity: 1;
  }

  .header__nav.active li {
    animation: fadeInUp 0.6s both;
  }

  /* 順番に表示（ディレイ） */
  .header__nav.active li:nth-child(1) {
    animation-delay: 0.1s;
  }
  .header__nav.active li:nth-child(2) {
    animation-delay: 0.2s;
  }
  .header__nav.active li:nth-child(3) {
    animation-delay: 0.3s;
  }
  .header__nav.active li:nth-child(4) {
    animation-delay: 0.4s;
  }
  .header__nav.active li:nth-child(5) {
    animation-delay: 0.5s;
  }

  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  /* ▲ハンバーガーメニュー▲ */
  /*▲header_CSS▲*/

  /*▼footer_CSS▼*/
  footer {
    .inner {
      width: 94%;
      padding: 2rem 0 !important;
    }
    .deco-square::before {
      width: 8px;
      height: 8px;
    }

    .footer-info {
      .address p {
        font-size: 1.2rem !important;
      }
      b {
        font-size: 1.3rem !important;
      }
      .contact-btn-wrapper {
        gap: 0.5rem;
        .phone-btn {
          flex-basis: 60%;
        }
        .icon_img img {
          margin-right: 0;
        }
        .reservation-btn {
          flex-basis: 40%;
        }
      }
      .footer-map {
        margin-top: 2rem;
      }
    }
    .footer-link {
      li p {
        font-size: 0.88rem !important;
        font-weight: 600;
      }
      .inner>ul {
        display: flex;
        justify-content: space-between;
        /* li {
              flex-grow: 1;
            } */
      }
      ol {
        flex-direction: column;
      }
      .treatment_link {
        margin-bottom: 1.5rem;
      }
      .treatment_link:last-of-type {
        margin-bottom: 0;
      }
      .deco-square {
        margin-left: 0.3rem !important;
      }
    }
    .footer {
      .ttl {
        font-size: 1.5rem;
      }
      .icon {
        margin-top: 1rem;
        max-width: 35px;
      }
      .txt,
      .tel {
        font-size: 1rem;
      }
      .link {
        justify-content: center;
        .ttl {
          font-size: 1.4rem;
        }
        p {
          font-size: 0.9rem;
          padding: 0 1rem;
        }
      }
      .copy {
        text-align: center;
      }
    }
  }
  /*▲footer_CSS▲*/

  /*▼全ページ_共通CSS▼*/
  .inner.flex,
  .fv-news,
  .results-item,
  .threes-item {
    flex-direction: column;
  }
  /*▲全ページ_共通CSS▲*/

  /* btn_CSS */
  .phone-btn {
    p.num {
      font-size: 1.4rem;
    }
  }
  .arrow::after {
    top: 8px;
    left: 10px;
  }
  .accordion.is-open .arrow.down-anime::after {
    top: 10px;
  }
  .deco-square::before {
    width: 8px;
    height: 8px;
    margin-right: 4px;
  }
  .deco-square {
    .arrow::after {
      left: 5px;
    }
    ::before {
      width: 10px;
      height: 10px;
      margin-right: 6px;
    }
  }
  .details-btn {
    margin-top: 1rem;
  }
  .icon_img {
    img {
      margin-right: 0.5rem;
    }
  }
  .study-btn {
    text-align: center;
    line-height: 1.6;
    padding: 8px 0;
  }
  /* btn_CSS */

  /* アコーディオンのスタイル */
  .accordion-item {
    padding: 10px 14px;
    .accordion-ttl {
      font-size: 1.2rem !important;
      line-height: 1.4;
      margin: 8px 11px;
    }
    .icon_img img {
      width: 33px;
      margin-right: 0;
    }
  }

  .close-btn {
    padding: 2px 0;
    width: 180px;
    margin: 1.5em auto 1.5rem;
  }
  /* アコーディオンのスタイル */

  /*▼TOPページmv_CSS▼*/
  #mv {
    .inner {
      /* margin-top: 6rem; */
      border-radius: 20px;
    }
    .mv_catch {
      bottom: 38%;
      left: 2%;
    }
    h1 {
      line-height: 1.8;
      letter-spacing: 0.4rem;
    }
    .h1_sub {
      padding: 0 1px 0 6px;
    }

    .sp-item {
      width: 100%;
      position: absolute;
      bottom: 0;
      z-index: 5;
    }
    .fv-news {
      padding: 1% 3% 2%;
      .ttl {
        font-size: 1rem;
      }
      .ttl:before {
        right: 0;
        top: 32px;
        bottom: 0;
        margin: auto 0;
        width: 100%;
        height: 1px;
      }
      hr {
        margin: 2px 0;
      }
      .fv-news-list {
        p {
          line-height: 1.6;
        }
      }
    }
    .schedule {
      margin: 0;
      .schedule-table {
        th {
          padding: 4px 6px;
        }
      }
    }
  }
  /*▲TOPページmv_CSS▲*/

  /*▼TOPページmvアニメーション_CSS▼*/
  .slide-image:nth-child(1) {
    background-image: url(../img/common/mv_sp_bg01.png);
  }
  .slide-image:nth-child(2) {
    background-image: url(../img/common/mv_sp_bg02.png);
  }
  .slide-image:nth-child(3) {
    background-image: url(../img/common/mv_sp_bg03.png);
  }
  /*▲TOPページmvアニメーション_CSS▲*/

  /*▼TOPページ_CSS▼*/
  .top-main {
    .contents {
      margin: 3rem 0;
    }
    .intro {
      margin-top: 0 !important;
    }
    .results {
      .results-item {
        border-radius: 30px;
        gap: 1rem;
        padding: 2rem;
        min-height: 550px;
      }
      .results-img {
        max-width: 180px;
        margin: -4rem auto 0;
        /* min-height: 510px; */
      }
      .results-img img {
        min-height: 250px;
      }
      .results-txt {
        .details-btn {
          margin: auto auto 0 !important;
        }
      }
      .splide__pagination {
        bottom: -0.5rem;
      }
      .splide__pagination__page.is-active {
        background: #eb512f !important;
      }
      a.details-btn {
        margin: 2rem auto 0;
      }
    }
    .treatment {
      .threes-item {
        .inner {
          padding: 2rem 1.5rem 1rem;
        }
        .list li {
          margin: 1rem 0;
          p {
            font-size: 1.2rem;
          }
        }
      }
    }
    .treatment_results {
      padding: 2rem 0 3rem;
      /* margin: 1rem 0 2rem; */
      .flex {
        flex-direction: column;
      }
      .item {
        margin: 1.5rem 0;
      }
      .inner.flex {
        position: relative;
        padding-top: 4rem;
      }
      table {
        td {
          padding: 1% 2%;
        }
        th {
          min-width: inherit;
        }
        p {
          font-size: 1rem;
        }
      }
      .img {
        width: 26%;
        position: absolute;
        right: 4%;
        top: 5%;
      }
    }
    .features {
      margin: 3rem 0;
      h3 {
        text-align: center;
      }
      /* レスポンシブ調整 */
      .features-grid {
        display: block;
        /* 縦並びに切り替え */
      }
      .features-left-content {
        width: 94%;
        margin: 0 auto 40px;
        padding-right: 0;
      }
      #features-slider {
        width: 100%;
      }
    }
    .news-list {
      margin: -1rem auto 2rem;
    }
  }
  /*▲TOPページ_CSS▲*/

  /* 特徴_共通CSS */
  .features .threes-item {
    .inner {
      padding: 4rem 1rem 2rem;
      margin-bottom: 8rem;
      .absolute {
        width: 11rem;
        top: -7rem;
      }
      h3 {
        font-size: 1.6rem;
      }
    }
    .inner:last-child {
      margin-bottom: 0;
    }
  }
  /* 特徴_共通CSS */

  /* お知らせ_共通CSS */
  .news-list {
    margin: 0rem auto 3rem !important;
    .news-link {
      background-size: 6px 6px;
    }
  }
  /* お知らせ_共通CSS */

  /* スケジュール_共通CSS */
  .schedule {
    margin: 1rem 0;
    .schedule-table {
      thead p {
        font-size: 0.9rem;
      }
      th {
        padding: 6px 6px;
      }
      td p {
        font-size: 0.9rem;
      }
      .time-col .num {
        font-size: 1rem;
      }
      .row-morning td {
        padding: 4px 0 0px;
      }
      .row-afternoon td {
        padding: 0px 0 4px;
      }
    }
  }
  /* スケジュール_共通CSS */






}
/*SP_TABLET_CSS*/

/*============================*/

/*SP_CSS*/
@media screen and (max-width: 799px) {
  .sp-none {
    display: none;
  }
  .text-left-sp {
    text-align: left;
  }

  header {
    .phone_num_wrapper .time {
      font-size: 0.6rem;
      letter-spacing: 0rem;
      .num {
        font-size: 0.75rem;
        letter-spacing: 0rem;
      }
    }
  }

  /* お知らせ_共通CSS */
  .news-list {
    .news-link .num::after {
      content: "\A";
      /* 改行コード */
      white-space: pre;
      /* 改行コードを有効にする */
    }
  }
  /* お知らせ_共通CSS */
}
/*SP_CSS*/

/*============================*/

/*TABLET_CSS*/

@media screen and (min-width: 800px) and (max-width: 1279px) {
  .tb-none {
    display: none;
  }

  /*▼header_CSS▼*/
  header {
    .h_item02 {
      a {
        color: #1b1b1b;
        font-size: 0.9rem;
        font-weight: 300;
        white-space: nowrap;
        letter-spacing: 0.05rem;
        transition: 0.5s;
        /* width: 100%; */
        /* flex-basis: 50%; */
      }
    }
  }
  /* ▼ハンバーガーメニュー▼ */
  .header__hamburger {
    flex-basis: 10%;
  }
  /* ▲ハンバーガーメニュー▲ */
  /*▲header_CSS▲*/

  /*▼footer_CSS▼*/
  footer {
    .inner {
      width: 90%;
      max-width: 850px;
    }
    .footer-link {
      li p {
        font-size: 1rem !important;
      }
    }
  }
  /*▲footer_CSS▲*/

  /*▼TOPページ_CSS▼*/
  #mv {
    .h1_sub {
      font-size: 2.5rem;
    }
    .fv-news {
      position: absolute;
      bottom: 0;
      left: 0;
      z-index: 3;
      /* gap: 1.5rem; */
      padding: 0.5% 2% 1%;
    }
    .schedule {
      position: absolute;
      bottom: 0;
      right: 0;
      z-index: 10;
      margin: 0;
      .schedule-table {
        thead p {
          font-size: 1rem;
        }
        .row-morning td {
          padding: 4px 7px 0px;
        }
        .row-afternoon td {
          padding: 0px 0 4px;
        }
        td p {
          font-size: 1rem;
        }
        th {
          padding: 4px 7px;
        }
        .time-col .num {
          font-size: 1.1rem;
        }
      }
    }
  }

  .top-main {
    .contents>.inner {
      width: 90%;
      max-width: 850px;
    }
    .results {
      .results-item {
        min-height: 470px;
      }
    }
    .treatment {
      .threes-item {
        .inner {
          padding: 2rem 4.5rem 1rem;
        }
      }
    }
    .features {
      .features-left-content {
        width: 90%;
        max-width: 850px;
      }
    }
  }
  /*▲TOPページ_CSS▲*/

  .schedule {
    .schedule-table {
      thead p {
        font-size: 1.2rem;
      }
      .time-col .num {
        font-size: 1.4rem;
      }
      td p {
        font-size: 1.2rem;
      }
      .row-morning td {
        padding: 12px 0 2px;
      }
      .row-afternoon td {
        padding: 3px 0 12px;
      }
    }
  }
  .features .threes-item {
    .inner {
      padding: 4rem 4rem 2rem;
    }
  }

  .details-btn {
    .arrow::after {
      left: 7px;
      /* width: 8px; */
      /* height: 8px; */
      top: 8px;
    }
  }

}
/*TABLET_CSS*/