/* main visual */
/* main背景装飾 */
.main-visual-container{
  /* height: 88vh!important; */
  /* width: 100vw!important; */
  position: relative;
}

.main-visual-img img{
  max-height: 88vh!important;
  /* width: 100%!important; */
}

/* 選ばれる理由*/
.reason-text{
  font-size: 4rem;
}
.reason-sub-text{
  font-size: 1.875rem;
}
.zeku{
  font-size: 2.5rem;
}
@media screen and (max-width:768px) {
  .reason-text{
  font-size: 1.5rem;
  white-space: nowrap;
  }
  .reason-sub-text{
    font-size: 1rem;
  }
  .zeku{
    font-size: 1.3rem;
  }
}

.point-container{

  gap: 10px;
}
.point-container figure img{
  width: 100%!important;
}


/* reason-button */
.reason-container{
  width: 40%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.reason-button{
  width: 100%;
}

.color-change:hover{
  transform: translateX(10px);
  transition: ease-in-out 0.5s;
  background-color: white!important;

}

@media screen and (max-width:500px) {
  .reason-container{
    width: 100%;
  }
  
}

/* price　セクション */
.price-parent{
  align-items: stretch!important;
}
.price-container{
  border: 5px solid;
  border-image: linear-gradient(to right, #ff5757,  #8c52ff) 1;
  padding: 5px;
  /* width: calc(100%/3.2); */
  flex-grow: 1;
  gap: 0;
}
.price-hover:hover{
  transform: scale(1.05);
  transition: 1s;
}
.price-container p{
    line-height: 1.5!important;
}

.price-1, .price-2{
  gap: 0!important;
}

.price-sub-title{
  font-size: 1.125rem;
}
.price-sub-title-2{
  font-size: 0.79rem;
}
.yen{
  font-size: 2.5rem;
}
.price-big{
  font-size: 3.75rem;
}
.tax-text-1{
  font-size: 1.4rem;
}
.tax{
  font-size: 0.725rem;
}
.tax-yen{
  font-size: 1rem;
}
.tax-price{
  font-size: 1.75rem;
}

.price-content{
  font-size: 1.125rem;
}


@media screen and (max-width:500px) {
  .price-container{
    width: 100%;
  }
}

.campaign-img, .campaign-img img{
  width: 100vw!important;
}

.year-content{
  width: fit-content;
  font-size: 1.7rem;
}
.year-plan-title{
  font-size: 1.25rem;
}

/* lightbox */
.desc{
  display: none;
}


/* black out studio 装飾 */
.studio-title{
  font-size: 4.75rem!important;
  color: #d81ff7!important;
  border-top: 2px solid #d81ff7!important;
  border-bottom:  2px solid #d81ff7!important;
  width: 100%;
}
.studio-sub-title{
  font-size: 2.375rem;
}
.yellow-title{
  font-size: 3.75rem;
  color: #fffd59;
}
.studio-text{
  margin: 0 auto;
  width: fit-content;
  font-size: 1.65rem;
}

@media screen and (max-width:430px) {
  .studio-title{
    font-size: 2.5rem!important;
  }
  .studio-sub-title{
  font-size: 1.5rem;
}
  .yellow-title{
    font-size: 2rem;
  }
  .studio-text{
    font-size: 1rem;
  }
 
  .studio-sub-text{
    font-size: 1rem;
  }
}


/* スライダー装飾 */
.gym-slider{
  display: flex;
  align-items: stretch;
}

.gym-container{
  height: auto!important;
  margin: 50px auto;
  position: relative;
}

.gym-container h4{
  font-family: gotham-condensed, sans-serif;
font-weight: 600;
letter-spacing: 0;
font-size: 1.5rem;
}


.gym-container p{
  font-size: 0.8rem!important;
}
@media screen and (max-width:768px) {
  .gym-container{
    height: auto;
  }
  .gym-container h4{
    font-size: 2rem;
  }
  .gym-container p{
    font-size: 1rem!important;
  }
}


/* morebutton */
.view-more-button{
  font-size: 3.75rem;
  width: fit-content;
  /* margin-left: auto!important; */
  margin-right: 20px!important;
  border: solid white 3px;
  border-radius: 70px;
  padding:0 20px;
}

.view-more-button:hover{
  background-color: white;
  transition:  0.8s ease-in-out;
}

.view-more-button p{
  line-height: 1!important;

}
.arrow-circle-lavender{
  border: #d81ff7 5px solid;
  border-radius: 50%;
  height: 75px;
  display: flex;
  align-items: center;
  padding: 5px;
  margin-top: 5px!important;
  margin-bottom: 5px!important;
}
.arrow-lavender {
  position: relative;
  width: 65px;
  height: 10px;
  margin: 10.6px 0;
  border-radius: 9999px;
  background-color: #d81ff7;
}

.arrow-lavender::before,
.arrow-lavender::after {
  content: "";
  position: absolute;
  top: calc(50% - 5px);
  right: 0;
  width: 25px;
  height: 10px;
  border-radius: 9999px;
  background-color: #d81ff7;
  transform-origin: calc(100% - 5px) 50%;
}

.arrow-lavender::before {
  transform: rotate(45deg);
}

.arrow-lavender::after {
  transform: rotate(-45deg);
}


@media screen and (max-width: 480px){
  .gym-container{
    height: auto;
  }

  .view-more-button{
    scale: 0.5;
    margin-right: auto!important;

  }
}


/* パーソナルトレーニング装飾 */

.personal-content{
  font-size: 1.18rem;
}

.personal-taiken-title-1{
  font-size: 2.5rem;
}
.personal-taiken-text-1{
  font-size: 2.6rem;
}

.imadake{
  gap: 0;
  color: #ff3131;
}

.personal-taiken-text-3{
  font-size: 1.125rem
}

.personal-taiken-text-4{
  font-size: 2.625rem;
  color: #ff6d4d;
}

.personal-small{
  font-size: 1.4125rem;
  color: #ff6d4d;
}

.personal-taiken-text-5{
  font-size: 3.25rem;
  color: #ff6d4d;
}

.personal-container{
  width: fit-content;
}

.personal-under-line{
  width: fit-content;
  position: relative;
  z-index: 10;
}


.personal-under-line p{
  line-height: 1!important;
}

.personal-session{
  gap: 0;
}

.border-personal{
  background-color: #ffde59;
  width: 60%;
  position: absolute;
  bottom: 0.1px;
  left: 50%;
  transform: translateX(-50%);
}

@media screen and (max-width: 480px){
  .personal-content{
    font-size: 0.95rem;
    text-align: center;
  }
  .personal-taiken-title-1{
    font-size: 1.5rem;
  }
  .personal-taiken-text-1{
    font-size: 1.3rem;
  }
  .personal-taiken-text-3{
    font-size: 1rem
  }
  .personal-taiken-text-4{
    font-size: 2.5rem;
  }
  .personal-small{
    font-size: 0.9rem;
  }
  .personal-taiken-text-5{
    font-size: 2.2rem;
  }
  
  .border-personal{
    width: 95%;
  }
}


/* パーソナルトレーニング矢印オレンジ */
.arrow-orange {
  position: relative;
  width: 65px;
  height: 10px;
  margin: 10.6px 0;
  border-radius: 9999px;
  background-color: #ff6d4d;
}

.arrow-orange::before,
.arrow-orange::after {
  content: "";
  position: absolute;
  top: calc(50% - 5px);
  right: 0;
  width: 25px;
  height: 10px;
  border-radius: 9999px;
  background-color: #ff6d4d;
  transform-origin: calc(100% - 5px) 50%;
}

.arrow-orange::before {
  transform: rotate(45deg);
}

.arrow-orange::after {
  transform: rotate(-45deg);
}

@media screen and (max-width: 480px){
  .arrow-orange{
      scale: 0.5;
  }
}

/* パーソナル矢印ブラック丸 */
.view-more-button-black{
  font-size: 3.75rem;
  width: fit-content;
  margin-left: auto!important;
  margin-right: 20px!important;
  border: solid black 3px;
  border-radius: 70px;
  padding:0 20px;
}

.view-more-button-black:hover{
  background-color: #d81ff7;
  transition:  0.8s ease-in-out;
}

.view-more-button-black p{
  line-height: 1!important;
  
}
.arrow-circle{
  border: black 5px solid;
  border-radius: 50%;
  height: 75px;
  display: flex;
  align-items: center;
  padding: 5px;
  margin-top: 5px!important;
  margin-bottom: 5px!important;
}
.arrow {
  position: relative;
  width: 65px;
  height: 10px;
  margin: 10.6px 0;
  border-radius: 9999px;
  background-color: black;
}

.arrow::before,
.arrow::after {
  content: "";
  position: absolute;
  top: calc(50% - 5px);
  right: 0;
  width: 25px;
  height: 10px;
  border-radius: 9999px;
  background-color: black;
  transform-origin: calc(100% - 5px) 50%;
}

.arrow::before {
  transform: rotate(45deg);
}

.arrow::after {
  transform: rotate(-45deg);
}

@media screen and (max-width: 480px){
  .view-more-button-black{
    scale: 0.5;
    margin-right: auto!important;
  }
}


/* voive */
.voice-container{
  margin-left: 20px!important;
  margin-right: 20px!important;
  position: relative;
  align-items: flex-start!important;

}
.voice-img-container{
  height: 100%;
}
.voice-image{
  position: absolute;
  top: -30px;
  width: 25.9%;
}
.voice-text P{
  font-size: 0.8125rem;
}
.name{
  font-size: 1.625rem;
}
.notice-text{
  font-size: 0.625rem!important;
}

@media screen and (max-width:769px) {
  .voice-image{
    width: 50%;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
  }
}
@media screen and (max-width:480px) {
  .voice-image{
    width: 90%;
    top: -20px;
  }
}

/* 表の装飾 */
.voice-table tr:nth-child(1) td:nth-child(2),
.voice-table tr:nth-child(1) td:nth-child(3){
  background-color: #152850;
  color: white;
  border-radius: 13px 13px 0 0;
}

.voice-table tr:nth-child(1) td:nth-child(4){
  background: linear-gradient(to right, #0CC0DF, #FFDE59);
  color: white;
  border-radius: 13px 13px 0 0;
}

.voice-table tr:nth-child(2) td:nth-child(1),
.voice-table tr:nth-child(3) td:nth-child(1){
  background-color: #152850;
  color: white;
  border-radius: 13px 0 0 13px;
}

.voice-table tr:nth-child(2) td:nth-child(2),
.voice-table tr:nth-child(3) td:nth-child(2),
.voice-table tr:nth-child(2) td:nth-child(3),
.voice-table tr:nth-child(3) td:nth-child(3){
  font-size: 0.875rem;
  background-color: white;
  border-bottom: 1px solid #f0f5f8!important;
  border-right: 1px solid #f0f5f8!important;
}
.kg{
  font-size: 0.625rem;
}

.voice-table tr:nth-child(2) td:nth-child(4),
.voice-table tr:nth-child(3) td:nth-child(4){
  font-size: 0.875rem;
  color: red;
  background-color: white;
  border-bottom: 1px solid #f0f5f8!important;
  border-right: 1px solid #f0f5f8!important;
}

/* faq */
/* Q&A アコーディオン風 */
:root {
--transparent: rgba(255, 255, 255, 0);

}

.inner {
    max-width: 980px;
    padding: 0 10px;
    margin-left: auto;
    margin-right: auto;
}

/* ==================================================
vk_faq (上書き用CSS)
================================================== */ 
.vk_faq {
    padding-bottom: 0;
}

.vk_faq .vk_faq_title {
    padding: .8rem 1rem .8rem 3rem;
    cursor: pointer;
    position: relative;
    pointer-events: all;
    color: #333;
}


.vk_faq_content {
    visibility: hidden;
    opacity: 0;
    height: 0;
    transition: all 1.5s ease;
    margin-block-start: 0;
}

 .vk_faq_title::after {
    display: block;
    font-family: "Font Awesome 6 Free"!important;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    content: "\2b";
    font-size: 1.5rem;
}

/* アコーディオンが開いているとき */
.vk_faq_title.accordion-open+.vk_faq_content {
    visibility: visible;
    opacity: 1;
    transition: all 1.0s ease-in-out;
    height: auto;
}

.vk_faq_title.accordion-open::after {
    content: "\f068";
}

@media screen and (max-width:480px) {
  .vk_faq .vk_faq_title,
  .vk_faq .vk_faq_content{
    font-size: 0.9rem!important;
  }
}


/* ご利用までの流れ */
.flow-container{
  gap: 0;
  width: fit-content;
  
}
.use-container{
  border-color: #fffd59;
  border-width: 3px;
  width: 100%;
}

.use-bar p{
  line-height: 1!important;
}

.use-bar{
  width: 1rem;
  background-color: #fffd59;
  height: 2rem;
}

.flow-right-container p{
  font-size: 1.425rem;
}
.flow-step{
  font-size: 1.825rem!important;
}

.flow-text-2{
  font-size: 1.3625rem;
}
@media screen and (max-width:480px) {
  .flow-right-container p{
    font-size: 0.8rem;
  }
  .flow-step{
    font-size: 1rem!important;
  }

  .flow-text-2{
    font-size: 0.7rem;
  }
  
}

/* facility */
.facility-container{
  align-items: flex-start!important;
}
.facility-title{
  font-size: 2rem;
}
.facility-text{
  font-size: 1.25rem;
}

@media screen and (max-width:480px) {
  .facility-title{
  font-size: 1.3rem;
  }
  .facility-text{
    font-size: 0.9rem;
  }
  .facility-img img{
    height: 300px!important;
  }
}


/* access */

.map-container {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  overflow:auto; 
  -webkit-overflow-scrolling:touch;
  border:2px solid #ccc; 
}
.map-container iframe {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    border:none;
    display:block;
}



.access-table td:nth-child(1){
  white-space: nowrap;
  vertical-align: top!important;
}


