@charset "UTF-8";

/*=============================================
 * HOME
*=============================================*/
#mv {
   width: 100%;
   min-height: 500px;
   height: 100vh;
   position: relative;
}

#mv .wrap {
   height: 100%;
}

.mv__slider {
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
}

.mv__slider .swiper-slide img {
   width: 100%;
   max-width: inherit;
   -webkit-animation-duration: 4s;
   animation-duration: 4s;
   -webkit-animation-timing-function: linear;
   animation-timing-function: linear;
   -webkit-animation-iteration-count: 1;
   animation-iteration-count: 1;
   transform: scale(1.1);
}

.mv__slider .swiper-slide-active img {
   -webkit-animation-name: showKvImage;
   animation-name: showKvImage;
}

@-webkit-keyframes showKvImage {
   0% {
      -webkit-transform: scale(1, 1) rotate(0.001deg);
      transform: scale(1, 1) rotate(0.001deg);
      outline: 1px solid transparent;
   }

   100% {
      -webkit-transform: scale(1.1, 1.1) rotate(0.001deg);
      transform: scale(1.1, 1.1) rotate(0.001deg);
   }
}

@keyframes showKvImage {
   0% {
      -webkit-transform: scale(1, 1) rotate(0.001deg);
      transform: scale(1, 1) rotate(0.001deg);
      outline: 1px solid transparent;
   }

   100% {
      -webkit-transform: scale(1.1, 1.1) rotate(0.001deg);
      transform: scale(1.1, 1.1) rotate(0.001deg);
   }
}

@media screen and (max-width: 767px) {
   #mv .wrap {
      padding: 0;
   }
}

/* -- --*/
.feed {
   width: 580px;
   background-color: rgba(255, 255, 255, 0.5);
   box-sizing: border-box;
   padding: 40px 40px 40px 60px;
   position: absolute;
   bottom: 40px;
   right: 0;
   line-height: 22px;
   z-index: 1;
}

.feed h2 {
   letter-spacing: 0.1em;
   position: relative;
}

.feed h2:before {
   content: '';
   width: 12px;
   height: 10px;
   background-color: #FF5758;
   clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
   position: absolute;
   top: 6px;
   left: -20px;
   transform: rotate(90deg);
}

.feed .list {
   display: grid;
   grid-template-columns: 115px 1fr;
   gap: 10px;
   padding-top: 20px;
   position: relative;
   z-index: 1;
}

.feed .list .ttl {
   position: relative;
}

.feed .list .ttl span {
   max-width: max-content;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 1;
   display: -webkit-box;
   overflow: hidden;
   border-bottom: 1px solid transparent;
}

.feed .list .ttl:hover span {
   border-bottom-color: #0D3580;
}

.feed .button {
   text-align: right;
   padding-top: 14px;
}

.feed .button a i {
   width: 44px;
   height: 50px;
}

@media screen and (max-width: 767px) {
   .feed {
      width: 100%;
      bottom: 0;
      right: 0;
      padding: 20px 20px 20px 28px;
   }

   .feed h2 {
      font-size: 14px;
   }

   .feed h2:before {
      width: 10px;
      height: 9px;
      left: -17px;
   }

   .feed .list {
      grid-template-columns: 90px 1fr;
      padding-top: 12px;
   }
}

/* -- --*/
#top__about {
   background: url("../img/index/about-bg.jpg") no-repeat center/cover;
   padding: 193px 0 100px;
}

#top__about .wrap {
   padding-left: 0;
}

#top__about figure {
   width: 370px;
   position: absolute;
   bottom: 0;
   right: 0;
}

#top__about .txt {
   width: calc(100% - 400px);
   max-width: 680px;
   line-height: 40px;
   padding: 60px 0 120px;
}

#top__about .txt p+p {
   padding-top: 50px;
}

@media screen and (max-width: 1023px) {
   #top__about .txt {
      width: 100%;
      max-width: inherit;
      padding-bottom: 0;
      position: relative;
      z-index: 1;
   }

   #top__about figure {
      width: 72.8vw;
      margin-top: -80px;
      margin-left: auto;
      position: static;
   }
}

@media screen and (max-width: 767px) {
   #top__about {
      background-image: url("../img/index/about-bg_sp.jpg");
      padding: 70px 0;
   }

   #top__about .wrap {
      padding-left: 20px;
   }

   #top__about h2 {
      font-size: 28px;
      line-height: 45px;
   }

   #top__about .txt {
      line-height: 28px;
      padding-top: 50px;
   }

   #top__about .txt p+p {
      padding-top: 35px;
   }

   #top__about figure {
      margin-top: -60px;
   }
}

/* -- --*/
#top__treatment {
   background-color: #FFEDED;
   padding: 80px 0 100px;
}

#top__treatment .box {
   max-width: 700px;
   margin-left: auto;
   padding-top: 50px;
}

#top__treatment .box ul {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 20px;
   padding-top: 45px;
}

#top__treatment .box ul li:nth-child(10) {
   display: none;
}

#top__treatment .box ul a {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: 10px;
   width: 100%;
   height: 220px;
   font-weight: 700;
   line-height: 22px;
   background-color: #fff;
   text-align: center;
}

#top__treatment .box ul a span {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   min-height: 44px;
}

#top__treatment .box ul a i {
   display: block;
   background-color: #020C45;
   width: 80px;
   height: 80px;
   mask: no-repeat center top / cover;
   -webkit-mask: no-repeat center top / cover;
}

#top__treatment .box ul a:hover {
   background-color: #FF5758;
   color: #fff;
   opacity: 1;
}

#top__treatment .box ul a:hover i {
   background-color: #fff;
}

@media screen and (max-width: 1200px) {
   #top__treatment .box {
      padding-right: 60px;
   }
}

@media screen and (max-width: 1023px) {
   #top__treatment .box {
      padding: 50px 0 0;
   }
}

@media screen and (max-width: 767px) {
   #top__treatment {
      padding: 60px 0;
   }

   #top__treatment .box {
      padding: 30px 0 0;
   }

   #top__treatment .box ul {
      grid-template-columns: repeat(2, 1fr);
      gap: 14px;
      padding-top: 30px;
   }

   #top__treatment .box ul li:nth-child(10) {
      display: block;
   }

   #top__treatment .box ul a {
      height: 43.5vw;
   }
}

/* -- --*/
#top__service {
   padding: 140px 0;
}

#top__service h2 {
   padding-bottom: 60px;
   left: 0;
}

@media screen and (max-width: 1200px) {
   #top__service .box .wrap:not(h2) {
      max-width: 850px;
   }
}

@media screen and (max-width: 1023px) {
   #top__service {
      padding: 60px 0 80px;
   }

   #top__service h2 {
      padding-bottom: 30px;
   }

   #top__service .block {
      max-width: 720px;
      margin: 0 auto;
      box-sizing: border-box;
   }

   #top__service .box+.box {
      border-top: 1px solid #D6DDDF;
      margin-top: 40px;
      padding-top: 40px;
   }

   #top__service .box+.box h2 {
      display: none;
   }

   #top__service .box figure {
      width: calc(100% - 20px);
      height: 59.7vw;
      position: relative;
   }

   #top__service .box figure:before {
      content: '';
      width: 100%;
      height: 100%;
      background: linear-gradient(225deg, #B6BDE2, #D1E2ED, #D9ECF0, #E4D4D7, #FDC0D5);
      position: absolute;
      top: 20px;
      left: 20px;
      filter: blur(5px);
      opacity: 0.7;
   }

   #top__service .box .col {
      padding-top: 20px;
   }

   #top__service .box .txt {
      padding-top: 14px;
   }
}

@media screen and (max-width: 767px) {
   #top__service h2 {
      left: -20px;
   }

   #top__service .block {
      padding-left: 7px;
   }

   #top__service .box {
      width: calc(100% - 40px);
      margin: 0 auto;
      padding-left: 0;
   }

   #top__service .box .wrap:not(h2) {
      padding: 0;
   }
}

@media screen and (min-width: 1024px) {
   #top__service .block {
      height: 390vh;
      position: relative;
   }

   #top__service .block-wrap {
      height: 100vh;
      position: sticky;
      top: 0;
   }

   #top__service .scroll-marker {
      height: 100vh;
   }

   #top__service .box {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100vh;
      position: absolute;
      top: 0;
      left: 0;
      transition: all 0.3s;
      opacity: 0;
      box-sizing: border-box;
   }

   #top__service .box:nth-child(1) {
      opacity: 1;
      z-index: 1;
   }

   #top__service .box:nth-child(2) {
      z-index: 2;
   }

   #top__service .box:nth-child(3) {
      z-index: 3;
   }

   #top__service .box .wrap:not(h2) {
      display: flex;
      align-items: flex-end;
      justify-content: center;
      gap: 60px;
      padding-left: 25px;
   }

   #top__service .box figure {
      width: 570px;
      position: relative;
   }

   #top__service .box figure:before {
      content: '';
      width: 100%;
      height: 100%;
      background: linear-gradient(225deg, #B6BDE2, #D1E2ED, #D9ECF0, #E4D4D7, #FDC0D5);
      position: absolute;
      top: 36px;
      left: 38px;
      filter: blur(5px);
      opacity: 0.7;
   }

   #top__service .box figure img {
      max-height: 100%;
   }

   #top__service .box .col {
      width: 425px;
   }

   #top__service .box .txt {
      padding-top: 20px;
   }

   #top__service .box.active {
      opacity: 1;
   }

   #top__service .box.inactive {
      opacity: 0;
   }
}

/* -- --*/
#top__feature {
   background: url("../img/index/feature-bg.jpg") no-repeat center/cover;
   padding: 90px 0 150px;
}

#top__feature .box {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 22px;
   text-align: center;
   padding: 60px 0 0;
}

#top__feature .box .col:nth-child(2) {
   padding-top: 100px;
}

#top__feature .box .col:nth-child(3) {
   padding-top: 200px;
}

#top__feature .box .no {
   color: #fff;
   width: 40px;
   font-weight: 500;
   letter-spacing: 0.1em;
   line-height: 35px;
   margin: 20px auto 0;
   position: relative;
   z-index: 1;
}

#top__feature .box .no:before {
   content: '';
   width: 100%;
   height: 100%;
   background-color: #FF5758;
   clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
   position: absolute;
   top: 0;
   left: 0;
   transform: rotate(90deg);
   z-index: -1;
}

#top__feature .box h3 {
   padding-top: 20px;
}

#top__feature .box .txt {
   padding-top: 20px;
}

@media screen and (max-width: 1200px) {
   #top__feature .box {
      padding-right: 60px;
   }
}

@media screen and (max-width: 1023px) {
   #top__feature .box {
      padding-right: 0;
   }
}

@media screen and (max-width: 767px) {
   #top__feature {
      padding: 60px 0 80px;
   }

   #top__feature .box {
      grid-template-columns: 1fr;
      gap: 60px;
      margin: 0 -20px 0 -28px;
      padding: 30px 0 0;
   }

   #top__feature .box .col:nth-child(2) {
      padding-top: 0;
   }

   #top__feature .box .col:nth-child(3) {
      padding-top: 0;
   }

   #top__feature .box .no {
      font-size: 15px;
   }

   #top__feature .box h3 {
      font-size: 22px;
      padding-top: 16px;
   }
}

/* -- --*/
#top__message {
   padding: 90px 0 0;
   position: relative;
}

#top__message:before {
   content: '';
   width: 100%;
   height: 170px;
   background: linear-gradient(to top, #EBF2FF, transparent);
   position: absolute;
   bottom: 0;
   left: 0;
}

#top__message .wrap {
   padding-bottom: 60px;
}

#top__message .box {
   max-width: 736px;
   margin-left: auto;
   padding-top: 48px;
}

#top__message .name {
   padding-top: 20px;
}

#top__message .name dd {
   padding-top: 6px;
}

#top__message .name dd .h-22 {
   padding-right: 15px;
}

#top__message .txt {
   padding-top: 30px;
}

#top__message .button {
   text-align: right;
   padding-top: 12px;
}

#top__message .swiper-wrapper {
   transition-timing-function: linear;
}

#top__message .swiper-slide {
   width: 400px;
   margin-right: 20px;
}

@media screen and (max-width: 1200px) {
   #top__message .box {
      padding-right: 60px;
   }
}

@media screen and (max-width: 1023px) {
   #top__message .box {
      padding-right: 0;
      padding-left: 25px;
   }
}

@media screen and (max-width: 767px) {
   #top__message:before {
      height: 60px;
   }

   #top__message .wrap {
      padding-bottom: 40px;
   }

   #top__message .box {
      display: flex;
      flex-direction: column;
      padding: 30px 0 0;
   }

   #top__message .box figure {
      order: 1;
   }

   #top__message .box h3 {
      font-size: 22px;
      padding-top: 20px;
      order: 2;
   }

   #top__message .box .txt {
      padding-top: 13px;
      order: 3;
   }

   #top__message .box .name {
      text-align: right;
      padding-top: 20px;
      order: 4;
   }

   #top__message .box .name dd .h-22 {
      font-size: 18px;
   }

   #top__message .button {
      order: 5;
      padding-top: 40px;
   }

   #top__message .swiper-slide {
      width: 120px;
      margin-right: 10px;
   }
}

/* -- --*/
#top__fees {
   background-color: #E6F6FF;
   position: relative;
   padding: 90px 0;
}

#top__fees .block {
   padding: 60px 0 0;
}

#top__fees .block+.block {
   padding-top: 90px;
}

#top__fees .block h3 {
   display: flex;
   align-items: center;
   gap: 0;
   width: 240px;
   position: relative;
   z-index: 1;
   margin-left: -45px;
}

#top__fees .block h3:before {
   content: '';
   width: 10000px;
   height: 100%;
   background-color: #fff;
   position: absolute;
   top: 0;
   right: 0;
   z-index: -1;
}

#top__fees .block h3 img {
   max-width: 70px;
}

#top__fees .block dl {
   display: flex;
   border-bottom: 1px solid #fff;
   padding: 40px 50px 24px 25px;
}

#top__fees .block dl+dl {
   padding-top: 24px;
}

#top__fees .block dl dt {
   flex: 1 0 0;
}

#top__fees .block .note {
   color: #707070;
   font-size: 15px;
   line-height: 22px;
   text-indent: -23px;
   padding: 30px 0 0 23px;
}

#top__fees .block ol {
   background-color: #C7EAFF;
   list-style: num;
   margin-top: 40px;
   padding: 40px 50px 40px 60px;
}

#top__fees .block ol li+li {
   padding-top: 30px;
}

#top__fees .block ol li p:not(.h-20) {
   font-size: 15px;
   line-height: 22px;
   margin-top: 10px;
}

#top__fees .block ol li p:not(.h-20)+p {
   margin-top: 6px;
}

#top__fees .block ol .note-1 {
   padding-left: 22px;
   position: relative;
}

#top__fees .block ol .note-1:before {
   content: '※';
   position: absolute;
   top: 0;
   left: 0;
}

#top__fees .block .note+.note {
   padding-top: 10px;
}

#top__fees .button {
   text-align: right;
   padding-top: 55px;
}

@media screen and (max-width: 1200px) {
   #top__fees .wrap {
      padding-right: 60px;
   }
}

@media screen and (max-width: 1023px) {
   #top__fees .wrap {
      padding-right: 0;
   }
}

@media screen and (max-width: 767px) {
   #top__fees {
      padding: 60px 0;
   }

   #top__fees .wrap {
      padding-right: 20px;
   }

   #top__fees .block {
      padding: 30px 0 0;
   }

   #top__fees .block+.block {
      padding-top: 60px;
   }

   #top__fees .block h3 {
      gap: 0px;
      width: 154px;
      font-size: 18px;
      line-height: 26px;
      margin-left: -15px;
      padding-left: 10px;
   }

   #top__fees .block h3 img {
      max-width: 47px;
   }

   #top__fees .block dl {
      font-size: 14px;
      line-height: 20px;
      padding: 30px 10px 20px;
   }

   #top__fees .block ol {
      margin-top: 30px;
      padding: 30px 20px 30px 36px;
   }

   #top__fees .block ol li .h-20 {
      font-size: 16px;
      line-height: 24px;
   }

   #top__fees .block ol li p:not(.h-20) {
      font-size: 12px;
      line-height: 20px;
   }

   #top__fees .block ol .note-1 {
      padding-left: 16px;
   }

   #top__fees .block .note {
      font-size: 12px;
      line-height: 20px;
      text-indent: -17px;
      padding: 20px 0 0 -17px;
   }

   #top__fees .block .note+.note {
      padding-top: 10px;
   }

   #top__fees .button {
      padding-top: 30px;
   }
}

/* -- --*/
#top__review {
   padding: 90px 0;
}

#top__review .swiper {
   width: calc(50% + 515px);
   margin-right: 0;
   padding-top: 60px;
}

#top__review .swiper-slide {
   background: url("../img/index/review-bg.png") no-repeat center top/cover;
   width: 480px;
   height: auto;
   padding: 50px;
   box-sizing: border-box;
   line-height: 28px;
   margin-right: 30px;
}

#top__review .swiper-slide .txt-r {
   padding-top: 30px;
}

#top__review .swiper-pagination {
   padding-top: 60px;
}

@media screen and (max-width: 1200px) {
   #top__review .swiper {
      width: calc(50% + 455px);
   }

   #top__review .swiper-pagination {
      padding-right: 60px;
   }
}

@media screen and (max-width: 1023px) {
   #top__review .swiper {
      width: calc(50% + 335px);
   }

   #top__review .swiper-pagination {
      padding-right: 0;
   }
}

@media screen and (max-width: 767px) {
   #top__review {
      padding: 60px 0 50px;
   }

   #top__review .swiper {
      width: 100%;
      box-sizing: border-box;
      padding: 30px 20px 0 28px;
   }

   #top__review .swiper-slide {
      width: 100%;
      margin-right: 10px;
      padding: 30px;
   }

   #top__review .swiper-slide .txt-r {
      padding-top: 20px;
   }

   #top__review .swiper-pagination {
      padding: 24px 0 0;
   }
}

/* -- --*/
#top__faq {
   padding: 75px 0 150px;
}

#top__faq .list-qa {
   padding-top: 60px;
}

@media screen and (max-width: 1200px) {
   #top__faq .list-qa {
      padding-right: 60px;
   }
}

@media screen and (max-width: 1023px) {
   #top__faq .list-qa {
      padding-right: 0px;
   }
}

@media screen and (max-width: 767px) {
   #top__faq {
      padding: 40px 0 80px;
   }

   #top__faq .list-qa {
      padding: 56px 0 0;
   }
}

/* -- --*/
#top__blog {
   background-color: rgba(214, 221, 223, 0.4);
   position: relative;
   padding: 80px 0;
}

#top__blog:before {
   content: '';
   width: 50%;
   height: 100%;
   background: url("../img/index/blog-photo.jpg") no-repeat center top/cover;
   position: absolute;
   top: 0;
   right: 0;
}

#top__blog .col {
   width: 460px;
}

#top__blog .list {
   padding: 60px 0 0 25px;
}

#top__blog .list .item {
   display: grid;
   grid-template-columns: 100px 1fr;
   align-items: flex-end;
   gap: 30px;
}

#top__blog .list .item+.item {
   border-top: 1px solid #D6DDDF;
   margin-top: 30px;
   padding-top: 30px;
}

#top__blog .list figure a {
   display: block;
   padding-top: 100%;
   position: relative;
}

#top__blog .list figure a img {
   position: absolute;
   top: 0;
   left: 0;
}

#top__blog .list .text {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 10px 16px;
}

#top__blog .list .cat a {
   display: inline-flex;
   background-color: #FF5758;
   color: #fff;
   font-weight: 500;
   font-size: 14px;
   letter-spacing: 0.1em;
   line-height: 24px;
   padding: 0 20px;
}

#top__blog .list .cat a:hover {
   background-color: #020C42;
   opacity: 1;
}

#top__blog .list time {
   font-weight: 500;
   letter-spacing: 0.1em;
   line-height: 22px;
}

#top__blog .list .ttl {
   width: 100%;
}

#top__blog .list .ttl a {
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   display: -webkit-box;
   overflow: hidden;
}

#top__blog .button {
   text-align: right;
   padding-top: 50px;
}

@media screen and (max-width: 1023px) {
   #top__blog:before {
      width: 100%;
      background-image: url("../img/index/blog-bg_sp.jpg");
   }

   #top__blog .col {
      width: 100%;
   }
}

@media screen and (max-width: 767px) {
   #top__blog {
      padding: 60px 0;
   }

   #top__blog .list {
      padding: 30px 0 0 7px;
   }

   #top__blog .list .item {
      align-items: inherit;
      gap: 20px;
   }

   #top__blog .list .text {
      flex-direction: column;
      align-items: flex-start;
      flex-wrap: nowrap;
      gap: 8px;
      position: relative;
   }

   #top__blog .list .cat a {
      font-size: 12px;
      line-height: 20px;
      padding: 0 15px;
   }

   #top__blog .list time {
      line-height: 1;
      position: absolute;
      bottom: 0;
      right: 0;
   }

   #top__blog .button {
      padding-top: 30px;
   }
}

/*=============================================
 * 施術メニュー
 *=============================================*/
#lead {
   padding-bottom: 120px;
}

#lead .txt {
   padding-top: 30px;
}

@media screen and (max-width: 767px) {
   #lead {
      padding-bottom: 80px;
   }
}

/* -- -- */
#philosophy {
   background: linear-gradient(to bottom, #FAE8E8, #FFF5EA, #D7EEFC);
   padding: 80px 0 120px;
}

#philosophy .box {
   margin: 60px 0 0;
   padding: 50px 0 0 50px;
   position: relative;
}

#philosophy .box figure {
   width: 300px;
   position: absolute;
   top: 0;
   left: 0;
}

#philosophy .box .col {
   background-color: rgba(255, 255, 255, 0.5);
   padding: 60px 50px 50px 290px;
}

#philosophy .box .txt {
   padding-top: 30px;
}

@media screen and (max-width: 1023px) {
   #philosophy .box .col {
      padding: 200px 50px 50px 50px;
   }
}

@media screen and (max-width: 767px) {
   #philosophy {
      padding: 60px 0 80px;
   }

   #philosophy .box {
      margin: 50px 0 0;
      padding: 80px 0 0 20px;
   }

   #philosophy .box figure {
      width: 220px;
   }

   #philosophy .box .col {
      padding: 100px 20px 50px 20px;
   }

   #philosophy .box h3 {
      font-size: 22px;
   }

   #philosophy .box .txt {
      padding-top: 14px;
   }
}

/* -- -- */
#commitments {
   padding: 80px 0 255px;
   position: relative;
}

#commitments .box {
   max-width: 640px;
   padding: 100px 0 0;
   margin-left: auto;
}

#commitments .box h3 {
   display: grid;
   grid-template-columns: 35px 1fr;
   gap: 20px;
   line-height: 40px;
}

#commitments .box h3 span {
   display: block;
   background: url("../img/common/icon.png") no-repeat center top/cover;
   width: 35px;
   height: 40px;
   text-align: center;
   font-weight: 500;
   font-size: 16px;
   color: #fff;
}

#commitments .box h3:not(:first-child) {
   padding-top: 70px;
}

#commitments .box .txt {
   padding: 25px 0 0 55px;
}

#commitments figure {
   width: 520px;
   position: absolute;
   top: 260px;
   bottom: 100px;
   left: calc(50% - 700px);
}

#commitments figure img {
   position: sticky;
   top: 80px;
}

@media screen and (max-width: 1200px) {
   #commitments figure {
      width: 420px;
      left: calc(50% - 600px);
   }
}

@media screen and (max-width: 1023px) {
   #commitments {
      padding-bottom: 0;
   }

   #commitments .box {
      max-width: inherit;
   }

   #commitments figure {
      width: 100%;
      position: static;
      margin: 0 auto;
      padding-top: 80px;
   }
}

@media screen and (max-width: 767px) {
   #commitments .box {
      padding: 40px 0 0;
   }

   #commitments .box h3 {
      grid-template-columns: 30px 1fr;
      gap: 16px;
      font-size: 22px;
      line-height: 32px;
   }

   #commitments .box h3 span {
      width: 30px;
      height: 35px;
      font-size: 15px;
      line-height: 35px;
   }

   #commitments .box h3:not(:first-child) {
      padding-top: 50px;
   }

   #commitments .box .txt {
      padding: 20px 0 0 46px;
   }
}

/* -- -- */
#facility {
   padding: 80px 0 0;
}

#facility .swiper {
   width: calc(50% + 515px);
   margin-right: 0;
   padding-top: 60px;
}

#facility .swiper-slide {
   width: 630px;
   margin-right: 30px;
}

#facility .swiper-slide .text {
   opacity: 0;
   transition: all 0.3s;
}

#facility .swiper-slide h3 {
   padding-top: 20px;
}

#facility .swiper-slide .txt {
   padding-top: 14px;
}

#facility .swiper-slide-active .text {
   opacity: 1;
}

#facility .swiper-pagination {
   padding-top: 50px;
}

@media screen and (max-width: 1200px) {
   #facility .swiper {
      width: calc(50% + 455px);
   }
}

@media screen and (max-width: 1023px) {
   #facility .swiper {
      width: calc(50% + 335px);
   }
}

@media screen and (max-width: 767px) {
   #facility {
      padding: 60px 0 0;
   }

   #facility .swiper {
      width: 100%;
      box-sizing: border-box;
      padding: 30px 20px 0 28px;
   }

   #facility .swiper-slide {
      width: 100%;
   }

   #facility .swiper-slide h3 {
      font-size: 22px;
   }
}

/* -- -- */
#staff {
   background: url("../img/about/staff-bg.jpg") no-repeat center top;
   padding: 120px 0 240px;
}

#staff .box-1 {
   display: grid;
   grid-template-columns: 320px 1fr;
   align-items: flex-end;
   gap: 40px;
   padding: 60px 0 0;
}

#staff .name .h-24 {
   padding-right: 12px;
}

#staff .box-1 .txt {
   padding-top: 18px;
}

#staff .box-1 .biography {
   padding-top: 40px;
}

#staff .box-1 .biography h3 {
   background-color: #fff;
   width: 108px;
   font-weight: 700;
   text-align: center;
}

#staff .box-1 .biography ul {
   font-size: 16px;
   line-height: 26px;
   padding-top: 10px;
}

#staff .box-1 .biography ul li {
   position: relative;
   padding-left: 25px;
}

#staff .box-1 .biography ul li:before {
   content: '・';
   position: absolute;
   top: 0;
   left: 0;
}

#staff .box-1 .biography ul li:last-child {
   padding-bottom: 5px;
}

#staff .box-2 {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 30px;
   padding: 100px 0 0;
}

#staff .box-2 h3 {
   text-align: center;
   padding-top: 20px;
}

#staff .box-2 .txt {
   padding-top: 16px;
}

@media screen and (max-width: 767px) {
   #staff {
      background: url("../img/about/staff-bg_sp.jpg") no-repeat center top/cover;
      padding: 120px 0 100px;
   }

   #staff .box-1 {
      grid-template-columns: 1fr;
      gap: 20px;
      padding: 30px 0 0;
   }

   #staff .name .h-24 {
      font-size: 18px;
   }

  #staff .name .fnt-inter {
      font-size: 13px;
   }

   #staff .box-1 .txt {
      padding-top: 20px;
   }

   #staff .box-1 .biography {
      padding-top: 30px;
   }

   #staff .box-1 .biography h3 {
      width: 84px;
   }

   #staff .box-1 .biography ul {
      font-size: 12px;
      line-height: 22px;
      padding-top: 12px;
   }

   #staff .box-1 .biography ul li {
      padding-left: 16px;
   }

   #staff .box-1 .biography ul li:not(:last-child) {
      padding-bottom: 5px;
   }

   #staff .box-2 {
      grid-template-columns: 1fr;
      gap: 60px;
      padding: 60px 0 0;
   }

   #staff .box-2 h3 {
      font-size: 18px;
   }
}

/*=============================================
 * 施術の流れ
 *=============================================*/
#flow {
   padding-bottom: 150px;
}

#flow .tab-link {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 15px;
   padding: 0 20px;
   text-align: center;
}

#flow .tab-link li {
   background-color: #FBDFDE;
   padding: 18px 10px 17px;
   transition: all 0.3s;
}

#flow .tab-link li:hover,
#flow .tab-link li.active {
   background-color: #E6F6FF;
}

#flow .tab-content {
   background-color: #E6F6FF;
   padding: 70px 90px 120px;
}

#flow .box {
   display: grid;
   grid-template-columns: 70px 1fr;
   gap: 48px;
   position: relative;
}

#flow .box:not(:last-child) {
   padding-bottom: 60px;
}

#flow .box:not(:last-child):before {
   content: '';
   width: 0;
   height: 100%;
   border-left: 1px solid #F4D4DC;
   position: absolute;
   top: 0;
   left: 34px;
}

#flow .box .text {
   padding-top: 20px;
}

#flow .box h3 span {
   font-weight: 500;
   font-size: 14px;
   line-height: 20px;
}

#flow .box .txt {
   padding-top: 20px;
}

#flow .box .list-btn {
   display: flex;
   flex-wrap: wrap;
   gap: 10px 30px;
   padding-top: 30px;
}

#flow .box .list-btn li {
   width: 260px;
}

#flow .box .list-btn a {
   display: flex;
   justify-content: center;
   align-items: center;
   font-weight: 700;
   width: 100%;
   height: 70px;
   position: relative;
   color: #fff;
   padding-right: 14px;
   box-sizing: border-box;
}

#flow .box .list-btn a:after {
   content: '→';
   position: absolute;
   top: 50%;
   right: 20px;
   transform: translateY(-50%);
}

#flow .box .list-btn a.reserve {
   background-color: #FF5758;
   font-weight: 500;
   font-size: 22px;
   padding-right: 0;
}

#flow .box .list-btn a.reserve:after {
   display: none;
}

#flow .box .list-btn a.reserve:hover {
   background-color: #fff;
   color: #FF5758;
   opacity: 1;
}

#flow .box .list-btn a.line {
   background-color: #03C754;
}

#flow .box .list-btn a.line:hover {
   background-color: #fff;
   color: #03C754;
   opacity: 1;
}

@media screen and (max-width: 1023px) {
   #flow .tab-content {
      padding: 70px 40px 120px;
   }
}

@media screen and (max-width: 767px) {
   #flow .tab-link {
      gap: 10px;
      font-size: 18px;
      padding: 0 10px;
   }

   #flow .tab-link li {
      padding: 5px;
   }

   #flow .tab-content {
      padding: 50px 20px 80px;
   }

   #flow .box {
      gap: 16px;
   }

   #flow .box .text {
      padding-top: 0;
   }

   #flow .box h3 {
      font-size: 18px;
   }

   #flow .box h3 span {
      font-size: 12px;
   }

   #flow .box .txt {
      padding-top: 12px;
   }

   #flow .box .list-btn {
      padding-top: 20px;
   }

   #flow .box .list-btn li {
      width: 100%;
   }

   #flow .box .list-btn a {
      height: 46px;
   }

   #flow .box .list-btn a.reserve {
      font-size: 13px;
      padding-right: 14px;
   }

   #flow .box .list-btn a.reserve:after {
      display: block;
   }
}

.page-id-117 #top__faq {
   background: url("../img/index/feature-bg.jpg") no-repeat center top/cover;
}

/*=============================================
 * 施術料金
 *=============================================*/
.page-id-126 #kv {
   padding-bottom: 80px;
}

@media screen and (max-width: 767px) {
   .page-id-126 #kv {
      padding-bottom: 40px;
   }
}

#fees {
   background-color: #E6F6FF;
   padding: 100px 0 126px;
}

#fees .block:not(:last-child) {
   padding-bottom: 120px;
}

#fees h2 {
   background-repeat: no-repeat;
   background-position: center bottom;
   background-size: auto 10px;
   padding-bottom: 30px;
}

#fees h2+.list-menu {
   padding-top: 30px;
}

#fees .desc {
   padding-top: 30px;
}

#fees .list-menu+.list-menu {
   padding-top: 100px;
}

#fees .list-menu h3 {
   display: flex;
   align-items: center;
   gap: 0;
   width: 240px;
   position: relative;
   z-index: 1;
   margin-bottom: 40px;
   margin-left: -45px;
}

#fees .list-menu h3:before {
   content: '';
   width: 10000px;
   height: 100%;
   background-color: #fff;
   position: absolute;
   top: 0;
   right: 0;
   z-index: -1;
}

#fees .list-menu h3 img {
   max-width: 70px;
}

#fees .list-menu dl {
   display: flex;
   gap: 20px;
   border-bottom: 1px solid #fff;
   padding: 0 50px 24px 25px;
}

#fees .list-menu dl+dl {
   padding-top: 24px;
}

#fees .list-menu dl dt {
   flex: 1 0 0;
}

#fees .list-menu .note {
   color: #707070;
   font-size: 15px;
   line-height: 22px;
   text-indent: -21px;
   padding: 30px 0 0 21px;
}

#fees .list-menu .note+.note {
   padding-top: 10px;
}

#fees .box-1 {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 35px;
   padding-top: 70px;
}

#fees .box-1 .col {
   padding: 40px 60px;
   position: relative;
}

#fees .box-1 .col:nth-child(1) {
   background-color: #BAE5FF;
}

#fees .box-1 .col:nth-child(2) {
   background-color: #FFDBDB;
}

#fees .box-1 .sub {
   font-weight: 500;
   font-size: 57px;
   line-height: 76px;
   position: absolute;
   top: -40px;
   right: 32px;
   color: #fff;
}

#fees .box-1 ul {
   padding-top: 20px;
}

#fees .box-1 ul li {
   text-indent: -18px;
   padding-left: 18px;
}

#fees .box-2 {
   background-color: #FDEBD5;
   max-width: 700px;
   margin: 64px auto 0;
   padding: 40px 60px;
   position: relative;
   box-sizing: border-box;
}

#fees .box-2 .sub {
   font-weight: 500;
   font-size: 57px;
   line-height: 76px;
   position: absolute;
   top: -40px;
   right: 32px;
   color: #fff;
}

#fees .box-2 ul {
   padding-top: 20px;
}

#fees .box-2 ul li {
   text-indent: -18px;
   padding-left: 18px;
}

#fees .box-2+.list-menu {
   padding-top: 80px;
}

#fees .box-payment {
   display: flex;
   justify-content: space-between;
   gap: 20px;
   padding-top: 50px;
   text-align: center;
}

#fees .box-payment dl:nth-child(1) {
   max-width: 264px;
}

#fees .box-payment dl:nth-child(2) {
   max-width: 278px;
}

#fees .box-payment dl:nth-child(3) {
   max-width: 301px;
}

#fees .box-payment dl dt {
   display: inline-block;
   background-color: #0D3580;
   color: #fff;
   font-weight: 700;
   font-size: 18px;
   line-height: 24px;
   padding: 6px 36px;
}

#fees .box-payment dl dd {
   padding-top: 36px;
}

#fees .list {
   background-color: #C7EAFF;
   list-style: num;
   margin-bottom: 30px;
   padding: 40px 50px 40px 60px;
}

#fees .list li+li {
   padding-top: 30px;
}

#fees .list li p:not(.h-20) {
   font-size: 15px;
   line-height: 22px;
   margin-top: 10px;
}

#fees .list li p:not(.h-20)+p {
   margin-top: 6px;
}

#fees .list .note-1 {
   padding-left: 22px;
   position: relative;
}

#fees .list .note-1:before {
   content: '※';
   position: absolute;
   top: 0;
   left: 0;
}

@media screen and (max-width: 1200px) {
   #fees .box-1 .col {
      padding: 40px;
   }
}

@media screen and (max-width: 1023px) {
   #fees .box-1 .col {
      padding: 40px;
   }

   #fees .box-payment dl dt {
      padding: 6px 20px;
   }
}

@media screen and (max-width: 767px) {
   #fees {
      padding: 60px 0 80px;
   }

   #fees h2 {
      line-height: 34px;
   }

   #fees h2+.list-menu {
      padding-top: 40px;
   }

   #fees .desc {
      text-align: justify;
      padding-top: 40px;
   }

   #fees .list-menu+.list-menu {
      padding-top: 60px;
   }

   #fees .list-menu h3 {
      gap: 0px;
      width: 154px;
      font-size: 18px;
      line-height: 26px;
      margin-bottom: 30px;
      margin-left: -15px;
      padding-left: 10px;
   }

   #fees .list-menu h3 img {
      max-width: 47px;
   }

   #fees .list-menu dl {
      font-size: 14px;
      line-height: 20px;
      padding: 0 10px 20px;
   }

   #fees .list-menu dl+dl {
      padding-top: 20px;
   }

   #fees .list-menu .note {
      font-size: 12px;
      line-height: 20px;
      text-indent: -18px;
      padding: 20px 0 0 18px;
   }

   #fees .list-menu .note+.note {
      padding-top: 10px;
   }

   #fees .box-1 {
      grid-template-columns: 1fr;
      gap: 45px;
      padding-top: 40px;
   }

   #fees .box-1 .col {
      padding: 40px 10px;
   }

   #fees .box-1 .sub {
      font-size: 45px;
      line-height: 60px;
      top: -28px;
      right: 20px;
   }

   #fees .box-1 ul {
      padding-top: 12px;
   }

   #fees .box-1 ul li {
      text-indent: -14px;
      padding-left: 14px;
   }

   #fees .box-2 {
      margin-top: 52px;
      padding: 40px 10px;
   }

   #fees .box-2 .sub {
      font-size: 45px;
      line-height: 60px;
      top: -28px;
      right: 20px;
   }

   #fees .box-2 ul {
      padding-top: 12px;
   }

   #fees .box-2 ul li {
      text-indent: -14px;
      padding-left: 14px;
   }

   #fees .box-2+.list-menu {
      padding-top: 40px;
   }

   #fees .box-payment {
      flex-wrap: wrap;
      gap: 0 24px;
      padding-top: 40px;
   }

   #fees .box-payment dl {
      width: calc(50% - 12px);
   }

   #fees .box-payment dl dt {
      font-size: 12px;
      line-height: 16px;
      padding: 5px 15px;
   }

   #fees .box-payment dl dd {
      padding-top: 20px;
   }

   #fees .list {
      padding: 30px 20px 30px 36px;
   }

   #fees .list li .h-20 {
      font-size: 16px;
      line-height: 24px;
   }

   #fees .list li p:not(.h-20) {
      font-size: 12px;
      line-height: 20px;
   }

   #fees .list .note-1 {
      padding-left: 16px;
   }
}

.page-id-126 footer {
   padding-top: 0;
}

/*=============================================
 * アクセス情報
 *=============================================*/
#access-sec1 {
   padding-bottom: 106px;
   position: relative;
}

#access-sec1:before {
   content: '';
   width: 100%;
   background: url("../img/index/access-bg.jpg") no-repeat center top/cover;
   position: absolute;
   top: 180px;
   bottom: 0;
   left: 0;
}

#access-sec1 .gmap {
   width: 100%;
   height: 450px;
}

#access-sec1 .gmap iframe {
   display: block;
   width: 100%;
   height: 100%;
}

#access-sec1 .tb-style {
   max-width: 800px;
   margin: 0 auto;
   padding-top: 80px;
}

@media screen and (max-width: 767px) {
   #access-sec1 {
      padding-bottom: 80px;
   }

   #access-sec1:before {
      top: 80px;
   }

   #access-sec1 .gmap {
      height: 262px;
   }

   #access-sec1 .tb-style {
      padding-top: 26px;
   }
}

/* -- -- */
#access-sec2 {
   padding: 104px 0 0;
   position: relative;
}

#access-sec2:before {
   content: '';
   width: 100%;
   background-color: #FFEDED;
   position: absolute;
   top: 0;
   bottom: 260px;
   left: 0;
}

#access-sec2 h2 {
   background-repeat: no-repeat;
   background-position: center bottom;
   background-size: auto 10px;
   padding-bottom: 30px;
}

#access-sec2 .box {
   padding: 60px 0 120px;
}

#access-sec2 .box figure:not(:last-child) {
   padding-bottom: 80px;
}

#access-sec2 .box figcaption {
   padding-top: 20px;
}

#access-sec2 .swiper:before {
   content: '';
   width: 100%;
   height: 50%;
   background: linear-gradient(to bottom, #FFEDED, transparent);
   position: absolute;
   top: 0;
   left: 0;
}

#access-sec2 .swiper-wrapper {
   transition-timing-function: linear;
}

#access-sec2 .swiper-slide {
   width: 330px;
   margin-right: 20px;
}

@media screen and (max-width: 767px) {
   #access-sec2 {
      padding: 60px 0 0;
   }

   #access-sec2:before {
      bottom: 0;
   }

   #access-sec2 .box {
      padding: 40px 0 80px;
   }

   #access-sec2 .box figure:not(:last-child) {
      padding-bottom: 60px;
   }

   #access-sec2 .swiper {
      background-color: #fff;
   }

   #access-sec2 .swiper-slide {
      width: 120px;
      margin-right: 10px;
   }
}

/*=============================================
 * 当店について
 *=============================================*/
/* -- -- */
/* -- -- */
/*=============================================
 * オンライン予約
 *=============================================*/
#online__lead h2 span {
   display: inline-block;
   background-color: #ECF3D8;
   font-weight: 700;
   letter-spacing: 0.05em;
   padding: 2px 12px;
}

#online__lead .txt {
   max-width: 1000px;
   line-height: 40px;
   text-align: center;
   margin: 0 auto;
   padding-top: 40px;
}

#online__lead .calendar {
   height: 600px;
   background-color: #F9FBF4;
   border: 1px solid #707070;
   margin-top: 60px;
}

#online__lead .calendar iframe {
   display: block;
   width: 100%;
   height: 100%;
}

@media screen and (max-width: 767px) {
   #online__lead .txt {
      text-align: justify;
      line-height: 30px;
      padding-top: 20px;
   }

   #online__lead .calendar {
      height: 300px;
      margin-top: 40px;
   }
}

/* -- -- */
/*=============================================
 * 取り扱い商品
 *=============================================*/
#product h2 span {
   display: inline-block;
   background-color: #ECF3D8;
   font-weight: 700;
   letter-spacing: 0.05em;
   padding: 2px 12px;
}

#product .desc {
   max-width: 1000px;
   line-height: 40px;
   text-align: center;
   margin: 0 auto;
   padding-top: 40px;
}

#product .list-btn {
   display: grid;
   grid-template-columns: repeat(3, 280px);
   justify-content: center;
   gap: 10px 20px;
   padding-top: 40px;
}

#product .list-btn a {
   display: flex;
   justify-content: space-between;
   align-items: center;
   height: 70px;
   border-radius: 10px;
   box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
   padding: 0 20px;
}

#product .list-btn a:after {
   content: '';
   width: 20px;
   height: 20px;
   background: url("../img/common/icon-circle-down.svg") no-repeat center top/cover;
   display: block;
}

#product .list-btn a:hover {
   background-color: #D0D8AF;
   opacity: 1;
}

#product .block {
   padding-top: 80px;
}

#product .block h3 {
   background-color: #D0D8AF;
   border-radius: 6px;
   padding: 13px 10px;
}

#product .box {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 30px 40px;
   padding-top: 40px;
}

#product .box .item {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   align-items: center;
   gap: 20px;
}

#product .box figure img {
   border-radius: 10px;
}

#product .box h4 {
   border-bottom: 1px solid #6F827C;
   padding-bottom: 10px;
}

#product .box .txt {
   font-size: 15px;
   line-height: 21px;
   padding-top: 10px;
}

#product .box .price {
   line-height: 25px;
   padding-top: 5px;
}

@media screen and (max-width: 1023px) {
   #product .list-btn {
      grid-template-columns: repeat(3, 1fr);
   }

   #product .box {
      grid-template-columns: 1fr;
   }

   #product .box .item {
      grid-template-columns: 280px 1fr;
   }
}

@media screen and (max-width: 767px) {
   #product .desc {
      text-align: justify;
      line-height: 30px;
      padding-top: 20px;
   }

   #product .list-btn {
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
   }

   #product .list-btn a {
      height: 50px;
      padding: 0 10px;
   }

   #product .block {
      padding-top: 40px;
   }

   #product .box {
      padding-top: 20px;
   }

   #product .box .item {
      grid-template-columns: 1fr;
   }

   #product .box figure {
      text-align: center;
   }
}

/*=============================================
 * Contact
 *=============================================*/
.page-id-10 #kv,
.page-id-12 #kv,
.page-id-14 #kv {
   padding-bottom: 90px;
}

@media screen and (max-width: 767px) {

   .page-id-10 #kv,
   .page-id-12 #kv,
   .page-id-14 #kv {
      padding-bottom: 40px;
   }
}

.mailform__line {
   padding-top: 40px;
}

.mailform__line a {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 20px;
   width: 446px;
   height: 70px;
   background-color: #03C754;
   color: #fff;
}

.mailform__line a:after {
   content: '→';
   display: block;
}

.mailform__line a:hover {
   background-color: #000;
   opacity: 1;
}

.mailform__wrap {
   background-color: #E6F6FF;
   margin-top: 100px;
   padding: 100px 125px 80px;
}

.mailform .form-row {
   display: grid;
   grid-template-columns: 240px 1fr;
   padding-bottom: 30px;
}

.mailform .form-row .caption {
   display: flex;
   align-items: center;
   gap: 16px;
}

.mailform .form-row .required,
.mailform .form-row .non {
   display: block;
   width: 56px;
   background-color: #FF5758;
   color: #fff;
   font-size: 15px;
   line-height: 25px;
   text-align: center;
}

.mailform .form-row .non {
   background-color: #777;
}

.mailform [data-name="checkbox-964"] a {
   color: #FF5758;
   text-decoration: underline;
}

.mailform [data-name="checkbox-964"] a:hover {
   text-decoration: none;
}

.mailform .result_txt {
   display: block;
   word-break: break-all;
   white-space: pre-wrap;
}

.mailform__btn {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 20px 40px;
   padding-top: 50px;
}

.mailform__btn p {
   display: inline-flex;
   justify-content: center;
   align-items: center;
   width: 320px;
   height: 70px;
   background: #0D3581;
   border: 0px solid #0D3581;
   color: #fff;
   font-weight: 700;
   font-size: 17px;
   letter-spacing: 0;
   line-height: 34px;
   text-align: center;
   box-sizing: border-box;
   margin: 0;
   padding: 0;
   position: relative;
   z-index: 1;
   transition: all 0.3s;
   border-radius: 0px;
}

.mailform__btn p:after {
   content: '→';
   position: absolute;
   top: 50%;
   right: 30px;
   transform: translateY(-50%);
}

.mailform__btn p:hover {
   background-color: #fff;
   color: #020C45;
}

.mailform__btn input,
.mailform__btn a {
   display: block;
   width: 100%;
   height: 100%;
   opacity: 0;
   position: absolute;
   top: 0;
   left: 0;
   cursor: pointer;
}

.mailform__btn .btn-prev {
   background-color: #fff;
   color: #020C45;
}

.mailform__btn .btn-prev:after {
   content: '←';
   right: auto;
   left: 30px;
}

.mailform__btn .btn-prev:hover {
   background-color: #D6DDDF;
}

.mailform .wpcf7-spinner {
   display: none;
}

.mailform.confirm .form-row .input {
   padding: 7px 20px;
}

.mailform.thanks h2 {
   background-repeat: no-repeat;
   background-position: center bottom;
   background-size: auto 10px;
   padding-bottom: 30px;
}

.mailform.thanks .txt {
   padding-top: 40px;
}

.mailform.thanks .note {
   color: #707070;
   font-size: 15px;
   line-height: 22px;
   padding-top: 26px;
}

.mailform.thanks .note+.note {
   padding-top: 10px;
}

.mailform.thanks .button {
   padding-top: 60px;
}

.toggle-privacy-main {
   display: none;
   width: calc(100% - 240px);
   height: 290px;
   background-color: #C7EAFF;
   font-weight: 700;
   font-size: 15px;
   line-height: 26px;
   margin-top: -20px;
   margin-left: auto;
   padding: 30px 40px 30px 30px;
   box-sizing: border-box;
   overflow-y: auto;
}

.toggle-privacy-main .in {}

.toggle-privacy-main .item+.item {
   padding-top: 25px;
}

@media screen and (max-width: 1023px) {
   .mailform__wrap {
      padding: 100px 50px;
   }
}

@media screen and (max-width: 767px) {
   .mailform__line {
      padding-top: 20px;
   }

   .mailform__line a {
      width: 226px;
      height: 46px;
   }

   .mailform__wrap {
      margin-top: 70px;
      padding: 40px 20px;
   }

   .mailform .form-row {
      grid-template-columns: 1fr;
      gap: 10px;
   }

   .mailform .form-row .caption {
      gap: 10px;
   }

   .mailform .form-row .required {
      width: 40px;
      font-size: 12px;
      line-height: 20px;
   }

   .mailform__btn {
      flex-direction: column;
      padding-top: 30px;
   }

   .mailform__btn p {
      width: 226px;
      height: 46px;
      font-size: 13px;
   }

   .mailform__btn p:after {
      right: 20px;
   }

   .mailform__btn .btn-prev:after {
      left: 20px;
   }

   .mailform.thanks .txt {
      text-align: justify;
   }

   .mailform.thanks .note {
      font-size: 12px;
      line-height: 20px;
      text-indent: -25px;
      padding-left: 25px;
      text-align: justify;
   }

   .mailform.thanks .button {
      padding-top: 40px;
   }

   .toggle-privacy-main {
      width: 100%;
      font-size: 13px;
      line-height: 20px;
      padding: 30px 20px;
   }
}

/*=============================================
 *  pagenavi
*=============================================*/
.wp-pagenavi {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-wrap: wrap;
   gap: 40px;
   padding-top: 60px;
}

.wp-pagenavi .pages {
   display: none;
}

.wp-pagenavi span,
.wp-pagenavi a {
   display: block;
   text-align: center;
   font-family: "Inter", sans-serif;
   font-optical-sizing: auto;
   font-weight: 500;
   letter-spacing: 0;
   line-height: 22px;
   box-sizing: border-box;
}

.wp-pagenavi a:hover {
   color: #FF5758;
   opacity: 1;
}

.wp-pagenavi .current {
   pointer-events: none;
   color: #FF5758;
}

@media screen and (max-width: 767px) {
   .wp-pagenavi {
      gap: 30px;
      padding-top: 50px;
   }

   .wp-pagenavi span,
   .wp-pagenavi a {
      line-height: 17px;
   }
}

/*=============================================
 * お知らせ
 *=============================================*/
.post-type-news .list a {
   display: grid;
   grid-template-columns: 155px 1fr;
   gap: 20px;
   padding: 26px 35px 25px;
   border-bottom: 1px solid #D6DDDF;
}

.post-type-news .list a:hover {
   opacity: 1;
   background-color: #FF5758;
   color: #fff;
}

.post-type-news .list a span {
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 1;
   display: -webkit-box;
   overflow: hidden;
}

@media screen and (max-width: 767px) {
   .post-type-news .list a {
      grid-template-columns: 1fr;
      gap: 6px;
      padding: 15px 16px;
   }
}

/*=============================================
 * ブログ
 *=============================================*/
.post-type-blog .list {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 70px 48px;
}

.post-type-blog .list figure {
   position: relative;
}

.post-type-blog .list figure .img-zoom {
   display: block;
   padding-top: 78.125%;
   position: relative;
}

.post-type-blog .list figure .img-zoom img {
   position: absolute;
   top: 0;
   left: 0;
}

.post-type-blog .list .cat {
   display: inline-flex;
   max-width: 100%;
   background-color: #FF5758;
   color: #fff;
   font-weight: 500;
   font-size: 14px;
   line-height: 24px;
   position: absolute;
   bottom: 0;
   left: 0;
   padding: 0 25px;
}

.post-type-blog .list .cat.sp {
   display: none;
}

.post-type-blog .list .ttl {
   line-height: 26px;
   padding-top: 20px;
}

.post-type-blog .list .ttl a {
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   display: -webkit-box;
   overflow: hidden;
}

.post-type-blog .list time {
   display: block;
   text-align: right;
   padding-top: 20px;
}

@media screen and (max-width: 1023px) {
   .post-type-blog .list {
      grid-template-columns: repeat(2, 1fr);
   }
}

@media screen and (max-width: 767px) {
   .post-type-blog .list {
      grid-template-columns: 1fr;
      gap: 30px;
   }

   .post-type-blog .list .col {
      position: relative;
      padding-left: 120px;
      border-bottom: 1px solid #D7DDDF;
      padding-bottom: 30px;
   }

   .post-type-blog .list figure {
      width: 100px;
      position: absolute;
      top: 0;
      left: 0;
   }

   .post-type-blog .list figure .img-zoom {
      width: 100%;
      padding-top: 100%;
   }

   .post-type-blog .list .cat {
      font-size: 12px;
      line-height: 20px;
      padding: 0 15px;
      position: static;
   }

   .post-type-blog .list .cat.pc {
      display: none;
   }

   .post-type-blog .list .cat.sp {
      display: inline-flex;
   }

   .post-type-blog .list .ttl {
      line-height: 20px;
      padding-top: 10px;
   }

   .post-type-blog .list time {
      line-height: 17px;
      padding-top: 10px;
   }
}

/*=============================================
 * Post Detail
 *=============================================*/
.post-type-details__contents {
   background-color: #E6F6FF;
   padding: 80px 60px 92px;
}

.post-type-details__cat {
   display: inline-flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 5px;
   vertical-align: middle;
   margin-right: 16px;
}

.post-type-details__cat a {
   display: flex;
   background-color: #FF5758;
   color: #fff;
   font-weight: 500;
   font-size: 14px;
   line-height: 24px;
   padding: 0 25px;
}

.post-type-details__cat a:hover {
   background-color: #fff;
   color: #FF5758;
   opacity: 1;
}

.post-type-details__date {
   display: inline-flex;
   vertical-align: middle;
   font-weight: 500;
}

.post-type-details__title {
   padding-top: 10px;
}

.post-type-details__content {
   padding: 60px 20px 0;
}

.post-type-details__content h2 {
   background-color: #F9FBF4;
   font-weight: 500;
   font-size: 26px;
   letter-spacing: 0;
   line-height: 36px;
   padding: 12px 22px;
   margin-top: 50px;
   margin-bottom: 20px;
   border-left: 8px solid #0D3580;
}

.post-type-details__content h3 {
   font-weight: 500;
   font-size: 22px;
   letter-spacing: 0;
   line-height: 30px;
   border-bottom: 2px solid #0D3580;
   border-left: 5px solid #0D3580;
   padding: 0 10px 6px;
   margin: 50px 25px 20px;
   box-sizing: border-box;
}

.post-type-details__content h4 {
   font-weight: 500;
   font-size: 18px;
   letter-spacing: 0;
   line-height: 26px;
   margin: 50px 0 20px;
   border-left: 5px solid #0D3580;
}

.post-type-details__content mark {
   background-color: #FFF6A8;
}

.post-type-details__content h2+h3,
.post-type-details__content h2+h4,
.post-type-details__content h3+h4 {
   margin-top: 0;
}

.post-type-details__content p img {
   display: inline-block;
   vertical-align: top;
   margin-right: 10px;
}

.post-type-details__content p img.aligncenter {
   display: block;
   margin: 0 auto;
}

.post-type-details__content p img.alignright {
   display: block;
   margin-left: auto;
}

.post-type-details__content p img:last-child {
   margin-right: 0;
}

.post-type-details .button {
   padding-top: 50px;
}

.post-type-details .button a:hover i {
   transform: translateX(-5px);
}

@media screen and (max-width: 1023px) {
   .postype__content--details p img {
      display: block;
      margin: 0 auto 15px;
   }

   .postype__content--details p img:last-child {
      margin: 0 auto;
   }
}

@media screen and (max-width: 767px) {
   .post-type-details__title {
      font-size: 26px;
      line-height: 34px;
   }

   .post-type-details__cat a {
      font-size: 12px;
      line-height: 20px;
      padding: 0 15px;
   }

   .post-type-details__contents {
      padding: 50px 20px;
   }

   .post-type-details__content {
      padding: 40px 0px 0;
   }

   .post-type-details__content h2 {
      font-size: 20px;
      line-height: 26px;
      padding: 10px 15px;
   }

   .post-type-details__content h3 {
      font-size: 18px;
      line-height: 26px;
      margin: 20px 10px;
   }

   .post-type-details__content h4 {
      font-size: 16px;
      line-height: 26px;
   }

   .post-type-details .button {
      padding-top: 30px;
   }
}

/*=============================================
 * 症状
 *=============================================*/
.post-type-archive-issues #kv,
.single-issues #kv {
   padding-bottom: 80px;
}

@media screen and (max-width: 767px) {

   .post-type-archive-issues #kv,
   .single-issues #kv {
      padding-bottom: 40px;
   }
}

.post-type-issues .list {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 70px 48px;
   padding-top: 70px;
}

.post-type-issues .list figure a {
   display: block;
   padding-top: 78.125%;
   position: relative;
}

.post-type-issues .list figure a img {
   position: absolute;
   top: 0;
   left: 0;
}

.post-type-issues .list .ttl {
   padding-top: 20px;
}

.post-type-issues .list .ttl a {
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   display: -webkit-box;
   overflow: hidden;
}

.post-type-issues .list .txt {
   padding-top: 20px;
}

.post-type-issues .list .txt span {
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   display: -webkit-box;
   overflow: hidden;
}

.post-type-issues .list .button {
   text-align: right;
   padding-top: 20px;
}

.post-type-issues .list .button i {
   width: 44px;
   height: 50px;
}

@media screen and (max-width: 1023px) {
   .post-type-issues .list {
      grid-template-columns: repeat(2, 1fr);
   }
}

@media screen and (max-width: 767px) {
   .post-type-issues .list {
      grid-template-columns: 1fr;
      gap: 30px;
      padding-top: 80px;
   }

   .post-type-issues .list figure {
      width: 100px;
   }

   .post-type-issues .list figure a {
      width: 100%;
      padding-top: 100%;
   }

   .post-type-issues .list .col {
      display: grid;
      grid-template-columns: 100px 1fr;
      gap: 20px;
      border-bottom: 1px solid #D7DDDF;
      padding-bottom: 20px;
   }

   .post-type-issues .list .txt {
      padding-top: 14px;
   }
}

.issues-details {
   padding-bottom: 120px;
}

.issues-details .these_concerns ul {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 24px;
   padding-top: 30px;
}

.issues-details .these_concerns ul li {
   background: url("../img/common/issues-icon-check.png") no-repeat top left/36px auto;
   padding: 2px 0 2px 50px;
}

.issues-details .causes {
   position: relative;
   margin-top: 100px;
   padding: 50px 0 0 45px;
}

.issues-details .causes figure {
   width: 300px;
   height: 220px;
   position: absolute;
   top: 0;
   left: 0;
}

.issues-details .causes .col {
   background-color: #FFEDED;
   padding: 60px 50px 60px 290px;
}

.issues-details .causes .txt {
   padding-top: 20px;
}

@media screen and (max-width: 1023px) {
   .issues-details .causes .col {
      padding: 210px 50px 60px;
   }
}

@media screen and (max-width: 767px) {
   .issues-details {
      padding-bottom: 100px;
   }

   .issues-details .these_concerns ul {
      grid-template-columns: 1fr;
      gap: 14px;
      padding-top: 30px;
   }

   .issues-details .these_concerns ul li {
      background-size: 30px auto;
      padding: 3px 0 3px 48px;
   }

   .issues-details .causes {
      margin-top: 70px;
      padding: 80px 0 0 12px;
   }

   .issues-details .causes figure {
      width: 220px;
      height: 162px;
      left: -8px;
   }

   .issues-details .causes .col {
      padding: 100px 20px 50px;
   }

   .issues-details .causes h3 {
      font-size: 22px;
   }

   .issues-details .causes .txt {
      padding-top: 14px;
   }
}

.issues-details-flow {
   background-color: #E6F6FF;
   padding: 100px 0 124px;
}

.issues-details-flow h2 {
   background: url("../img/common/title-icon.png") no-repeat center bottom/auto 10px;
   padding-bottom: 30px;
}

.issues-details-flow .block {
   padding-top: 60px;
}

.issues-details-flow .box {
   display: grid;
   grid-template-columns: 380px 1fr;
   align-items: flex-end;
   gap: 50px;
}

.issues-details-flow .box:not(:last-child) {
   padding-bottom: 120px;
}

.issues-details-flow .box figure {
   position: relative;
}

.issues-details-flow .box figure:before {
   content: '';
   width: 100%;
   height: 100%;
   background: linear-gradient(225deg, #B6BDE2, #D1E2ED, #D9ECF0, #E4D4D7, #FDC0D5);
   position: absolute;
   top: 25px;
   left: 25px;
   filter: blur(18px);
   opacity: 0.9;
}

.issues-details-flow .box figure figcaption {
   width: 140px;
   background-color: #FF5758;
   color: #fff;
   font-weight: 500;
   text-align: center;
   padding: 2px 0;
   position: absolute;
   top: -18px;
   left: -18px;
}

.issues-details-flow .box .txt {
   padding-top: 20px;
}

@media screen and (max-width: 1023px) {
   .issues-details-flow .box {
      grid-template-columns: 1fr;
   }

   .issues-details-flow .box figure {
      margin-right: 25px;
   }
}

@media screen and (max-width: 767px) {
   .issues-details-flow {
      padding: 60px 0 80px;
   }

   .issues-details-flow .block {
      padding-top: 52px;
   }

   .issues-details-flow .box {
      gap: 20px;
   }

   .issues-details-flow .box:not(:last-child) {
      padding-bottom: 62px;
   }

   .issues-details-flow .box figure {
      margin-right: 20px;
   }

   .issues-details-flow .box figure:before {
      top: 20px;
      left: 20px;
   }

   .issues-details-flow .box figure figcaption {
      width: 77px;
      font-size: 12px;
      line-height: 26px;
      top: -13px;
      left: -10px;
   }

   .issues-details-flow .box .txt {
      padding-top: 14px;
   }
}