:root{
  --color-white: #fff;
  --color-black: #070707;
  --color-light-green: #CCFC06;
  --screen-base-size: 750;
}

body{
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
}

img{
  width: 100%;
}

.l-container{
  max-width: 750px;
  width: 100%;
  margin: 0 auto min(250px, calc(250 / var(--screen-base-size) * 100vw)) ;
}


/*=== CTA共通ボタン（Component） ===*/
.c-cta-btn{
  display: block;
  width: 90%;
  margin: 0 auto;
  filter: drop-shadow(5px 4px 4px rgba(0, 0, 0, 0.25));
}
/*=== CTA共通ボタン（Component）/E ===*/



/*=== キャンペーン（Component） ===*/
.c-campaign{
  position: relative;
}

.c-campaign-cta{
  max-width: 750px;
  width: 100%;
  position: absolute;
  left: 50%;
  bottom: 5%;
  transform: translateX(-50%);
}
/*=== キャンペーン（Component）/E ===*/




/*=== FV ===*/
.p-fv-cta{
  margin: 
    min(35px, calc(35 / var(--screen-base-size) * 100vw)) 
    0  
    min(75px, calc(75 / var(--screen-base-size) * 100vw));
}
/*=== FV /E ===*/



/*=== 設備 ===*/
.p-facilities{
  position: relative;
}

.p-facilities-swipe-container{
  width: 100%;
  max-width: 750px;

  position: absolute;
  left: 50%;
  bottom: 13%;
  transform: translateX(-50%);
}

.p-facilities-swipe__img{
  display: block;
  margin: 0 auto;
  width: 48%;
  border-radius: 32px;
}
/*=== 設備 /E ===*/



/*=== フリーウェイト ===*/
.p-free-weight-top{
  position: relative;
}

.p-free-weight-swipe-container{
  width: 100%;
  max-width: 750px;

  position: absolute;
  left: 50%;
  bottom: 8.5%;
  transform: translateX(-50%);
}

.p-free-weight-swipe__img{
  display: block;
  margin: 0 auto;
  width: 72.5%;
}


.p-free-weight-machine{
  background-color: var(--color-light-green);
  margin: 0 min(34px, calc(34 / var(--screen-base-size) * 100vw));
  padding: 
    0 
    min(70px, calc(70 / var(--screen-base-size) * 100vw)) 
    min(45px, calc(45 / var(--screen-base-size) * 100vw));
  position: relative;
  left: 0.3%;
}

.p-free-weight-machine-toggle-btn{
  background-color: var(--color-white);
  border: 2px solid var(--color-black);
  display: block;
  width: 100%;
  margin: 0 auto;
  padding: min(24px, calc(24 / var(--screen-base-size) * 100vw));
  text-align: center;
  font-size: min(32px, calc(32 / var(--screen-base-size) * 100vw));
  
  position: relative;
}

.p-free-weight-machine-toggle-btn--black{
  background-color: var(--color-black);
  color: var(--color-white);
}

.p-free-weight-machine-toggle-btn::after{
  content: "▼";
  font-size: min(24px, calc(24 / var(--screen-base-size) * 100vw));
  position: absolute;
  top: 51%;
  right: 1.5%;
  transform: translate(-50%, -50%);
  transition: all .3s ease;
}

.p-free-weight-machine-toggle-btn.is-active::after{
  transform: translate(-50%, -50%) rotate(180deg);
}

.p-free-weight-machine-nav{
  display: none;
}

.p-free-weight-machine-nav.is-active{
  display: block;
}
/*=== フリーウェイト /E ===*/



/*=== 初心者用動画 ===*/
.p-beginner-movie{
  position: relative;
}

.p-beginner-movie-wrapper{
  max-width: 750px;
  width: 80%;
  height: min(280px, calc(280 / var(--screen-base-size) * 100vw));
  position: absolute;
  left: 50%;
  bottom: 20%;
  transform: translateX(-50%); 
}
/*=== 初心者用動画 /E ===*/



/*=== お客様の声 ===*/
.p-voice{
  position: relative;
}

.p-voice-swipe-container{
  width: 100%;
  max-width: 750px;

  position: absolute;
  left: 50%;
  bottom: 17%;
  transform: translateX(-50%);
}

.p-voice-swipe__img{
  display: block;
  margin: 0 auto;
  width: 80%;
}
/*=== お客様の声 /E ===*/



/*=== QandA ===*/
.p-faq-contents{
  padding: 0 min(30px, calc(30 / var(--screen-base-size) * 100vw));
  margin-bottom: 
    min(170px, calc(170 / var(--screen-base-size) * 100vw));
}

.p-faq-item{
  border: 2px solid var(--color-black);
}

.p-faq-item:not(:last-of-type){
  margin-bottom: min(50px, calc(50 / var(--screen-base-size) * 100vw));
}

.p-faq-item-q{  
  cursor: pointer;
  display: flex;
}

.p-faq-item-q.is-active{
  border-bottom: 2px solid var(--color-black);
}

.p-faq-item-a{
  display: none;
}

.p-faq-item-a-wrapper{
  display: flex;
}

.p-faq-item-q-icon, .p-faq-item-a-icon{
  width: min(84px, calc(84 / var(--screen-base-size) * 100vw));
  padding: min(28px, calc(28 / var(--screen-base-size) * 100vw));
}

.p-faq-item-q-icon{
  background-color: var(--color-black);
}

.p-faq-item-a-icon{
  border-right:  2px solid var(--color-black);
  display: flex;
  justify-content: center;
  align-items: center;
}

.p-faq-item-q-title, .p-faq-item-a-answer{
  flex: 1;
}

.p-faq-item-q-title{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: min(24px, calc(24 / var(--screen-base-size) * 100vw));
}

.p-faq-item-q-title__text{
  font-size: min(26px, calc(26 / var(--screen-base-size) * 100vw));
  padding-left: min(16px, calc(16 / var(--screen-base-size) * 100vw));
  font-style: italic;
}

.p-faq-item-close__img{
  width: min(20px, calc(20 / var(--screen-base-size) * 100vw));
  transform: rotate(45deg);
  transition: all .3s ease;
}

.p-faq-item-close__img.is-active{
  transform: rotate(0);
}

.p-faq-item-a-answer__text{
  font-size: min(24px, calc(24 / var(--screen-base-size) * 100vw));
  line-height: 1.5;
  padding: 
    min(20px, calc(20 / var(--screen-base-size) * 100vw)) 
    min(50px, calc(50 / var(--screen-base-size) * 100vw)) 
    min(20px, calc(20 / var(--screen-base-size) * 100vw)) 
    min(16px, calc(16 / var(--screen-base-size) * 100vw));
}
/*=== QandA /E ===*/



/*=== 店舗情報 ===*/
.p-shop-info-map{
  height: min(420px, calc(420 / var(--screen-base-size) * 100vw));
}
/*=== 店舗情報 /E ===*/



/*=== 固定CTAボタン ===*/
.c-fixed-cta{
  width: 100%;
  max-width: 750px;
  margin-bottom: min(35px, calc(35 / var(--screen-base-size) * 100vw));
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  z-index: 999;
}
/*=== 固定CTAボタン /E ===*/