@charset "utf-8";
/* CSS Document */
/*PC*/
#header {position: relative; height:auto;}

/* フローティングバナー */
.slide_display { display: block !important;}
.bottom_button { display: none;}

.nav_button{
  width:750px;
  position: fixed !important;
  left:50%;
  bottom:0;
  z-index:999;
  display: flex;
  justify-content: space-between;
  vertical-align:bottom;
  transform:translateX(-50%);
}

.nav_button  img {
  display: inline !important;
  vertical-align: bottom;
}


/* ポップアップ */
.popup {
  height: 100vh;
  width: 100%;
  background: rgba(0, 0, 0, 0);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  display: flex;
  justify-content:center;
  align-items:center;
}

.popup_content{
  background:#fff;
  width:350px;
  height:auto;
  border-radius:20px;
  position: relative;
}

#popup_close {
position:absolute;
top: -16px;
right: -16px;
width: 40px;
}


/*ポップアップ_口コミ*/
.open {
	cursor:pointer;
}
#pop-up {
	display: none;
}
.overlay {
	display: none;
}
#pop-up:checked + .overlay {
	display: block;
	position: fixed;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
	z-index: 9999;
	background: rgba(0, 0, 0, 0.6);
}
.window {
	position: fixed;
	top: 50%;
	left: 50%;
	width: 90vw;
	max-width: 360px;
  padding: 20px;
	align-items: center;
	transform: translate(-50%, -50%);
}
.close {
	position: absolute;
	top: 4px;
	right: 4px;
	cursor:pointer;
  width:40px;
}







.campaign_head {margin:5px auto;}


.floating_banner {
display: none;
}


.floating_scroll {
  display: block;
  width:700px;
  position: fixed !important;
  bottom:0;
  left:50%;
  z-index:888;
  transform: translateX(-50%);
}




/*過去のフローティングバナーcss*/
.fixed_banner_new {
  width:750px;
  position: fixed !important;
  bottom:0;
  left:50%;
  z-index:999;
  transform: translateX(-50%);
}

.link_banner {
  display:flex;
  justify-content: space-between;
  margin-bottom:30px;
}



.fixed_banner {
 position: absolute;
 right:5px;
 bottom:3px;
 width:50%;
}

.fixed {
 position: fixed !important;
 bottom: 200px !important;
 z-index:999;
 width:300px;
 right:200px;

}

article { width:100%;}
section { width:500px; margin:auto; }

section img { width:100%; }

.campaign_img { margin:20px auto 5px; }

#main1_4 { margin-bottom:80px;}

.youtube {width: 100%; aspect-ratio: 16 / 9;}
.youtube iframe { width: 100%; height: 100%; vertical-align: bottom;}


.reason_youtube {
  width:100%;
  background:#baab8c;
  padding:60px 45px;
}

.reason_youtube iframe {
  width:100%;
  height: 90vh;
  margin:auto;
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
}


.videoWrappers_header {position:relative; overflow: hidden; width:100%; height:100%; padding-top:100%; margin:0 auto 10px;}
.videoWrappers_header > video {
  position: absolute;
  width:100%;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.videoWrappers_body {position:relative; overflow: hidden; width:100%; height:100%; padding-top:170%; margin:0 auto 10px;}
.videoWrappers_body > video {
  position: absolute;
  width:100%;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.videoWrappers_body .play_btn {
  display: block;
  width: 20%;
  position: absolute;
    top: 50%;
    left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
}

.videoWrappers_body .play_btn.playActive{display:none;}


/**/
.welcome_fifi {
  width:100%;
  height:auto;
position: relative;
 }

.welcome_button {
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
   width:100px;
   z-index:999;
 }
/* バイオサーキットの動画 */
.video_wrap { width:100%; }
.video_wrap > video { width:100%; margin-bottom:60px; }


/* イベント動画 */
#image_video_click {
  background:#000;
  width:100%;
  margin-bottom:-10px;
  text-align: center;
}
#image_video_click img { width:60%; margin: auto;}


.image_movie_wrap {
  width:500px;
  margin: 0 auto;
  padding: 5px 0;
  background:#d9d9d9;
}


.image_movie_wrap section {
  width:100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.image_movie_wrap section > div {
  width:49.5% !important;
}

.image_movie_textbox {
    position: relative;
}

.image_movie_textbox > div {
  width:100%;
  height:97%;
  position: absolute;
  text-align: center;
  padding-top:50px;
  top:0;
  left:50%;
  transform: translate(-50%);
  box-sizing:border-box;
}

.welcome_fifi_back {
  background:url('https://kumamoto-gym-fifi.jp/img/welcom_fifi_back.jpg') center center no-repeat;
  padding-top:15px 0;
  object-fit: cover;
  background-size: cover;
  color:#000;
}



.seitai_back {
  background:url('https://kumamoto-gym-fifi.jp/img/seitai_back.png') center center no-repeat;
  padding-top:15px 0;
  object-fit: cover;
  background-size: cover;
  color:#000;
}

.coffee_event_back {
  background:url('https://kumamoto-gym-fifi.jp/img/coffee_event_back.png') center center no-repeat;
  padding-top:15px 0;
  object-fit: cover;
  background-size: cover;
  color:#000;
}

.image_movie_textbox h2 {
  font-size:1.5em;
  font-weight:900;
  margin-bottom:20px;
}

.image_movie_textbox h2 > span {
  border-bottom:3px solid #000;
  line-height:1.8em;
}

.image_movie_textbox p {
  width: 90%;
  line-height: 1.2em;
  margin:auto;
}

.image_movie_text {
  font-size:1.0em;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin:10px auto 20px !important;
}

.image_movie_text span {
  display: inline-block;
}

.image_movie_percent{
  font-size:3.0em;
  margin-right: 10px;
  padding-top:10px;
}

.image_movie_video {width:100%; height:auto;}






.videoWrappers {position:relative; overflow: hidden; width:100%; height:100%; padding-top: 56.25%; margin:0 auto 80px;}
.videoWrappers > video {
  position: absolute;
  width:100%;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}


.main3_2 { width:83%; margin:30px auto;}
.main3_2 p { font-size:15px; font-weight:600; font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;}


main article.ninth section.second dl.syncer-acdn-faq {
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
}

main article.ninth section.second dl.syncer-acdn-faq {
  width: 100%;
  height: auto;
  margin: 0;
  padding: 5.208333333% 0 3.60925% 0;
  border-bottom: 1px solid #cccccc;
}

main article.ninth section.second dl.syncer-acdn-faq dt {
  font-size: var(--Middlefontsize);
  line-height: 1.4em;
  color: #222222;
  padding: 3px 0 5px 45px;
  text-decoration: none;
  position: relative;
}

main article.ninth section.second dl.syncer-acdn-faq dt .toggle_btn {
  width: 30px;
  height: 30px;
  position: absolute;
  top: 50%;
  left: 0;
  text-indent: 100%;
  white-space: nowrap;
  transform: translateY(-50%);
  overflow: hidden;
  display: block;
}

main article.ninth section.second dl.syncer-acdn-faq dt .toggle_btn:before,
.toggle_btn:after {
  width: 25px;
  height: 2px;
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #f0508d;
  display: block;
}

main article.ninth section.second dl.syncer-acdn-faq dt .toggle_btn:before {
  width: 2px;
  height: 25px;
}

main article.ninth section.second dl.syncer-acdn-faq dt.syncer-acdn.selected .toggle_btn:before {
  content: normal;
}

main article.ninth section.second dl.syncer-acdn-faq dt:hover {
  transition: 1.0s;
  opacity: 0.5;
}

main article.ninth section.second dl.syncer-acdn-faq dd {
  display: none;
  line-height: 1.6em;
  color: #222222;
  margin-top: 3.90625%;
  padding: 3px 0 5px 45px;
  font-size: var(--fontsize);
}

.acdn-q {background:#efefef; width:95%; border-radius: 20px; padding:10px 20px; position:relative; }

.acdn-q::before {
  content: "";
  position: absolute;
  border: 12px solid transparent;
  border-right: 12px solid #efefef;
  top: 20%;
  left: -20px;
}


.acdn-a {background:#c3f69d; width:95%; border-radius: 20px; padding:10px 20px; position:relative;}
.acdn-a::before{
  content: "";
  position: absolute;
  border: 12px solid transparent;
  border-left: 12px solid #c3f69d;
  top: 20%;
  left: 99%;

}

.swiper {width:100%; height:auto;}
.swiper-slide { color: #000; width: 90%; height: auto; text-align: center; font-size:1.3em;}
.swiper-slide img {width:70%; height:70%; margin:auto;}
.swiper-slide p { font-weight:900; font-size:1.3em; margin:15px 0; text-align:center; color:#093c6b; }


.swiper-button-next,
.swiper-button-prev {
    position: absolute;
    top: 50%;
    width: 60px;
    height: 93px;
    margin-top: calc(-1 * var(--swiper-navigation-size) / 2);
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--swiper-navigation-color, var(--swiper-theme-color));
    font-size:30px;
    font-weight:900;
    color:#000;
}
/* バックアップ　スライダー
.swiper-button-next,
.swiper-button-prev {
    position: absolute;
    top: 50%;
    width: calc(var(--swiper-navigation-size) / 44 * 27);
    height: var(--swiper-navigation-size);
    margin-top: calc(-1 * var(--swiper-navigation-size) / 2);
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--swiper-navigation-color, var(--swiper-theme-color));
    font-size:30px;
    font-weight:900;
    color:#000;
}
*/


.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
    opacity: .35;
    cursor: auto;
    pointer-events: none
}
.swiper-button-next:after,
.swiper-button-prev:after {
    font-family: swiper-icons;
    font-size: var(--swiper-navigation-size);
    text-transform: none !important;
    letter-spacing: 0;
    text-transform: none;
    font-variant: initial;
}

.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
    left: 15px;
    right: auto
}


.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
    left: 15px;
    right: auto;
    background:url('../img_202501/slider_left.png');
}

/*バックアップ
.swiper-button-prev:after,
.swiper-container-rtl .swiper-button-next:after {
    content: 'prev'
}
*/
.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
    right: 15px;
    left: auto;
    background:url('../img_202501/slider_right.png');
}

/*バックアップ
.swiper-button-next:after,
.swiper-container-rtl .swiper-button-prev:after {
    content: 'next'
}
*/




#trial_button { width:70%; margin:30px auto;}

.access_map{ width: 100%; height: auto; margin-top:30px; }
.contact_body { width:100%; margin-top:-20px; }
.contact_body section { width:500px; margin-top:20px auto; }
.contact_body h2 { background:#fff; width:95%; color:#093c6b; margin:auto; text-align:center; padding:10px 0; }
.contact_body a { display: block; font-size:30px; color:#fdef05; font-weight:900; text-align: center; }
.contact_body p { width:95%; color:#000; margin:auto;}

.tel_box { margin:30px auto; text-align: center;}

.contact_body form { width:95%; margin:auto; }
.contact_body label { color:#000; font-weight:900; display:block; margin-bottom:5px;}
.contact_body span { display: inline-block; background:#f20000; color:#fff; border-radius: 20px; padding:5px 10px; margin-left: 20px; font-size:10px;}



/*コンタクトフォーム カラー変更　*/

.contact_body_2 { width:100%; background:#1681b5; padding: 30px 0; }
.contact_body_2 section { width:500px; margin:20px auto; }
.contact_body_2 h2 { background:#fff; width:95%; color:#093c6b; margin:auto; text-align:center; padding:10px 0; }
.contact_body_2 a { display: block; font-size:30px; color:#fdef05; font-weight:900; text-align: center; }
.contact_body_2 p { width:95%; color:#000; margin:auto;}
.contact_body_2 form { width:95%; margin:auto; }
.contact_body_2 label { color:#000; font-weight:900; display:block; margin-bottom:5px;}
.contact_body_2 span { display: inline-block; background:#f30000; color:#fff; border-radius: 20px; padding:5px 10px; margin-left: 20px; font-size:10px;}


input[type="text"] { outline:1px solid #5a5a5a; width:80%; border-radius:5px; height:45px; margin-bottom:20px; border:0; padding:5px;}
input[type="date"] { outline:1px solid #5a5a5a; width:150px; height:45px; border-radius:5px; margin-bottom:20px; border:0; color:#4d4b49;}

select { outline:1px solid #5a5a5a; width:30%; height:45px; border-radius:5px; margin-bottom:20px; border:0; color:#4d4b49;}
textarea { outline:1px solid #5a5a5a; width:80%; border-radius:5px; margin-bottom:20px; border:0; padding:5px;}

input[type="submit"]{
  
  appearance: none;
  -webkit-appearance: none;

  width: 50%;
  height:60px;
  font-size: 15px;
  color: #fff;
  display:block;
  margin:20px auto;
  text-align: center;
  background-color: #5c87a6;
  border: 1px solid #5c87a6;
  border-radius: 5px;
  text-decoration: none;
  cursor: pointer;
  font-weight:900;
  transition: background-color 1s;
}

.pagetop { text-align:center; margin:20px auto; }
.pagetop a { text-decoration: none; color:#093c6b; font-weight:900;}


/* アンケート */

.enquete_list {
  width:98%;
  height:250px;
  margin:0 auto;
  overflow: auto;
}
.enquete_list li {
  background:#e1e1e1;
  margin :5px 0;
  padding:5px 0 5px 5px;
}

/*よくある質問のボタン*/
summary {
  -webkit-transform: skew(-15deg);
  transform: skew(-15deg);
  color: #fff;
  border-radius: 0;
  background:#1681b5;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
  box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
  text-align: center;
  margin:0 auto 20px;
  padding:15px 0;
  font-weight:900;
  width:80%;

}



/*よくある質問_202307新デザイン*/









.content_wrap {margin:40px auto;}
.content_wrap h2 {background:#ffde00; text-align:left; margin:40px auto; padding:20px 0 20px 10px; color:#606060; font-weight: normal;}


/**/
.content_wrap dl.faq {margin-bottom:40px;}
.content_wrap .faq dt {border:1px solid #707070; background:#b0b0b0; font-weight:900; display:flex; padding:0 10px; align-items:center;}
.content_wrap .faq dt div { width:30px; height:30px; content:"Q"; border-radius:50%; background:#fff; border:2px solid #000; display:inline-block; text-align:center; line-height: 30px; margin-right:20px;}
.content_wrap .faq dt p {width:80%; margin:30px 0;  text-align:left;}

.content_wrap .faq dd {border:1px solid #707070; margin-top:-1px; display:flex; padding:0 10px; align-items:center;}
.content_wrap .faq dd div {width:30px; height:30px; content:"A"; border-radius:50%; background:#fff; border:2px solid #093c6b; color:#093c6b; display:block; text-align:center; line-height: 30px; margin-right:20px;}
.content_wrap .faq dd p {width:80%; margin:30px 0; text-align:left;}
/**/




.cp_qa *, .cp_qa *:after, .cp_qa *:before {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}




.cp_qa {
	/*border-top: 1px solid #1b2538;*/
}
.cp_qa .cp_actab {
	position: relative;
	overflow: hidden;
	width: 100%;
	margin-bottom: 1px;
	color: #1b2538;
}
.cp_qa .cp_actab input {
	position: absolute;
	opacity: 0;
}


/*質問　吹き出しver*/

.cp_qa .cp_actab label {
  width:100%;
  margin:10px 0;
  background:#0071a7;
  padding:10px 20px;
  position: relative;
	display: block;
  color: #FFF;
  font-weight: bold;
 	line-height: 1.6;
 	border-radius: 30px;
 	box-sizing: border-box;
	cursor: pointer;
}

.cp_qa .cp_actab label:before {
  content: "";
  position: absolute;
  bottom: 2px;
  left: 3px;
  margin-top: -15px;
  border: 9px solid transparent;
  border-left: 13px solid #0071a7;
  z-index: 0;
  -webkit-transform: rotate(260deg);
  transform: rotate(260deg);
}


/* 質問　単純なデザイン
.cp_qa .cp_actab label {
	font-weight: bold;
	line-height: 1.6;
	position: relative;
	display: block;
	margin: 0 0 0 0;
	padding: 1em 2em 1em 1em;
	cursor: pointer;
	border-bottom: 1px solid #1b2538;
}
.cp_qa .cp_actab label:hover {
	color: #00838F;
}
*/

/* 答え　質問を開いていない時*/
.cp_qa .cp_actab .cp_actab-content {
	overflow: hidden;
	max-height: 0;
	-webkit-transition: max-height 0.5s ease;
	        transition: max-height 0.5s ease;
	color: #606060;
  	/*
	color: #ffffff;
  background: rgba(0, 131, 143, 0.5);*/
  background:#ffde00;
  border-radius: 30px;
}
.cp_qa .cp_actab .cp_actab-content p {
	margin: 1em;
}



/* 質問を開いた時の仕様　単純なデザイン */
/* --アイコン */
.cp_qa .cp_actab input:checked ~ label {
	color: #00838F;
}

/* 答え　単純なデザイン
.cp_qa .cp_actab input:checked ~ .cp_actab-content {
  max-height: 40em;
}
*/

/* --答えの高さ　単純なデザイン */
.cp_qa .cp_actab input:checked ~ .cp_actab-content {
  max-height: 40em;
  background: #ffde00;
  color: #606060;
 	border-radius: 30px;
}

.cp_qa .cp_actab input:checked ~ .cp_actab-content:before {
  content: "";
  position: absolute;
  margin:10px 0;
  bottom: -16px;
  right: -8px;
  margin-top: -15px;
  border: 9px solid transparent;
  border-left: 13px solid #ffde00;
  z-index: 0;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}




/* 質問をクリックした時のアイコンの動き　単純なデザイン */
.cp_qa .cp_actab label::after {
	line-height: 1.6;
	position: absolute;
	top: 50%;
	right: -5px;
	display: block;
	width: 3em;
	margin-top: -12.5px;
	-webkit-transition: all 0.5s ease;
	        transition: all 0.5s ease;
	text-align: center;
}

.cp_qa .cp_actab input[type=checkbox] + label::after {
	content: '▼';
}
.cp_qa .cp_actab input[type=checkbox]:checked + label::after {
	-webkit-transform: rotateX(180deg);
	transform: rotateX(180deg);
}


#fifi_map {margin:30px auto;}

.access .shop_info {
  width:90%;
  margin:30px auto 0;
  padding-left: 10px;
  border-left: 5px solid #000;
  text-align:left;
  color:#000 !important;
}


.contact_map {
  position: relative;
}

.contact_map iframe {
  position: absolute;
  width:95%;
  height:40%;
  bottom:20px;
  left:50%;
  transform: translateX(-50%);
}


footer {
  margin-bottom:120px;
  background:#222222;
  color:#fff;
  padding:15px 0;
}
#copyright {text-align:center;}


/*google口コミスライダー*/
.contact_swiper span { display: inline-block; background:#cac1bc;  border-radius: 15px; }


#google_voice {
  background:#f6b428;
}

#google_voice img {
width:80% !important;
height:auto;
margin:auto;
}

#google_voice .swiper-pagination {
  left:50%  !important;
  text-align: center  !important;
  margin:auto;
}

#google_voice .swiper-pagination-bullet {
background:#cac1bc;
margin: 0 10px !important;
width: 15px  !important;
height: 15px  !important;
border-radius: 15px  !important;
}

#google_voice .swiper-pagination-bullet-active {
  background:#fff;
}

#google_voice .swiper-pagination span {
  width: 15px  !important;
  height: 15px  !important;
  border-radius: 15px  !important;
}


/*sp*/
@media screen and (max-width:500px) {
section { width:100%; }

.contact_body section { width:100%; }

.contact_body_2 section { width:100%; }

.nav_button {width:100%;}
.image_movie_wrap {width:100%;}

.popup_content{ width:75%;}
.floating_scroll {width:100%;}


.modal-guts {width:75%;}



.fixed {
 position: fixed !important;
 bottom: 200px !important;
 right:5px;
 bottom:3px;
 width:50%;
 z-index:999;
}

.fixed_banner_new{
  width:100%;
}

.content_wrap {
    width:95%;
    margin:20px auto;
}


}


/*@media screen and (max-width:768px) {}*/