@charset "UTF-8";
/* CSS Document */

/* --------------------------------------------------------------------------------------------

FV

-------------------------------------------------------------------------------------------- */
#fvArea.fv, #videoArea, #reasonArea .btn{
	position: relative;
	width: 100%;
}
#fvArea.fv{padding-bottom: 2rem;}
#fvArea .fv_bg, #videoArea .mv_bg, #reasonArea .btn_bg {
	display: block;
	width: 100%;
}
#fvArea .reserve_btn {
	position: absolute;
	bottom: 7%!important;
	left: 0;
	right: 0;
	margin: auto;
}
#fvArea .reserve_btn img, #reasonArea .btn .ctaBox {
	display: block;
	width: 100%;
}
#fvArea .detail_link {
	position: absolute;
	bottom: 4%!important;
	left: 50%;
	transform: translateX(-50%);
	color: #3b3b3b;
	font-size: 1.5rem;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    text-decoration: none;
    border-bottom: 1px solid #3b3b3b;
    padding-bottom: 6px;
    gap: 5px;
}
#fvArea .detail_link::after{
    content: "";
    width: 8px;
    height: 8px;
    border-right: 1.5px solid #3b3b3b;
    border-bottom: 1.5px solid #3b3b3b;
    transform: rotate(45deg) translateY(-3px);
}
#fvArea .detail_link::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

/* --------------------------------------------------------------------------------------------

CTAボタンアニメーション

-------------------------------------------------------------------------------------------- */
.shine_inner .shine_mask{mask-image: url(/gifu/img/2610/cta.webp);}


/* --------------------------------------------------------------------------------------------

動画

-------------------------------------------------------------------------------------------- */
#videoArea .video {
    position: absolute;
    left: 0;
    right: 0;
    top: 16%;
    width: 90%;
    margin: 0 auto;
    display: block;
}
.ctaBox{margin: 2rem auto;}

/* --------------------------------------------------------------------------------------------

キャンペーン価格

-------------------------------------------------------------------------------------------- */
.cpprice01, .cpprice02 {position: relative;}
.cpprice01 > img, .cpprice02 > img:first-child {
	display: block;
	width: 100%;
}
.cpprice01 .imgover,.cpprice02 .imgover {
	position: absolute;
	right: 12%;
	width: 35%; /* 上に載せる画像のサイズ */
	margin: 0 auto;
}
.cpprice01 .imgover{bottom: 12%;}
.cpprice02 .imgover{bottom: 49.5%;}


/* --------------------------------------------------------------------------------------------

ハートビートアニメーション

-------------------------------------------------------------------------------------------- */
.heartbeat_img {animation: heartbeat 1.2s ease-in-out infinite;}
@keyframes heartbeat {
	0%, 100% {transform: scale(1);}
	50% {transform: scale(1.1);}
}


/* --------------------------------------------------------------------------------------------

選ばれる理由

-------------------------------------------------------------------------------------------- */
.gym_img, .map_img {position: relative;}
.gym_img, .map_img > img:first-child {
	display: block;
	width: 100%;
}
.gym_img .imgover, .map_img .imgover{
	position: absolute;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 90%; /* 上に載せる画像のサイズ */
}
.gym_img .imgover {top: 78%;}
.map_img .imgover {top: 72%;}
#worriesArea{padding-top: 0!important;}


/* --------------------------------------------------------------------------------------------

Q&A

-------------------------------------------------------------------------------------------- */
.faq{
	position:relative;
	background: url(/gifu/img/2610/img24.webp);
	background-position: top center;
	background-size: cover;
	background-repeat: no-repeat;
	margin: 0 auto;
	padding-bottom: 3%;
}
.faq_item{
	position:relative;
	margin:0 auto 5%;
	width: 90%;
}

/* Q+A が1枚に収まった画像を、閉じているときはQ部分だけ見える高さでクリップする */
.faq_visual{
	overflow:hidden;
	border-radius:12px;
	transition:max-height .35s ease;
}
.faq_visual img{ display:block; width:100%; height:auto; }

/* 画像の上に重ねる、クリックで開閉する透明ボタン。
   Qの行の高さ（画像全体の約38%）にだけ重ねることで、文字の右横に矢印を配置する */
.faq_toggle{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	aspect-ratio:671/160;
	background:none;
	border:none;
	cursor:pointer;
	padding:0;
	display:flex;
	align-items:center;
	justify-content:flex-end;
}
.faq_toggle .arrow{
	width:16px;
	height:16px;
	margin-right:7%;
	border-right:3px solid #fff;
	border-bottom:3px solid #fff;
	transform:rotate(45deg);
	transition:transform .3s ease;
}
.faq_toggle[aria-expanded="true"]
.arrow{transform:rotate(-135deg);}


/* --------------------------------------------------------------------------------------------

オファー

-------------------------------------------------------------------------------------------- */
#cpArea.cp01 .cpBox .box{bottom:4.5%;}
.trialprice {position: relative;}
.trialprice > img:first-child {
	display: block;
	width: 100%;
}
.trialprice .imgover {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 7%;
	width: 70%; /* 上に載せる画像のサイズ */
	margin: 0 auto;
}
#cpArea .cpBox .box{bottom:3%!important;}

/* --------------------------------------------------------------------------------------------

カウントダウンタイマー

-------------------------------------------------------------------------------------------- */

.fixed_cta{
	position:fixed;
	left:50%;
	bottom:0;
	transform:translate(-50%,100%);
	transition:.3s;
	width:100%;
	max-width:500px;
	z-index:9999;
}
.fixed_cta.show{transform:translate(-50%,0);}
.fixed_cta img{
	display:block;
	width:100%;
	height:auto;
}
.countdown{
	position:relative;
	width:100%;
	max-width:750px;
	margin:auto;
}
.countdown_bg{
	display:block;
	width:100%;
	height:auto;
}
.timer{
	position:absolute;
	left:31%;
	top:30%;
	display:flex;
	/*gap:2.5%;*/
}
.time{
	display:flex;
	align-items:flex-end;
	padding-right: .5rem;
}
.time span{
	width:3.2vw;
	max-width:48px;
	min-width:32px;
	aspect-ratio:1;
	background:#fff;
	border-radius:4px;
	color:#ff0074;
	font-weight:700;
	font-size:clamp(20px,2vw,32px);
	display:flex;
	justify-content:center;
	align-items:center;
	box-shadow:0 2px 5px rgba(0,0,0,.2);
}
.time em{
	margin-left:.4rem;
	color:#fff;
	font-style:normal;
	font-weight:bold;
	font-size:clamp(14px,2vw,18px);
	text-shadow:0 2px 5px rgba(0,0,0,.2);
}
.reserve_btn{
	position: absolute;
	bottom: -6%;
	left: 0;
	right: 0;
}
.reserve_btn img{
	display:block;
	width:94%;
	max-width:500px;
	height:auto;
	margin:auto;
}
body {background: #fdf5fa!important;}
#cpArea .ctaBox {margin-top: -1em!important;}
.mb {margin: 15px auto 0;}
#worriesArea{padding-top:0!important;}