@charset "UTF-8";
/* ===================================================================
CSS information
 file name	:	style.css
 style info : LPスタイル
=================================================================== */
img{
	max-width: 100%;
}
input{
	max-width: 100%;
}
.content {
	width: 100%;
	margin: 0 auto;
	text-align: center;
	background-color: #fff;
	-webkit-box-shadow: 0 0 10px 2px #d6d6d6;
	-moz-box-shadow: 0 0 10px 2px #d6d6d6;
	box-shadow: 0 0 10px 2px #d6d6d6;
}
.fv{
	position: relative;
	background: url(../img/fv_bg.png?240529) no-repeat;
	padding: 0;
	text-align: left;
	width: calc(750/750 * 100vw);
	max-width: 750px;
	background-size: cover;
}
.fv .video_fv {
	width: calc(336/750 * 100vw);
	max-width: 336px;
	height: calc(226/750 * 100vw);
	max-height: 226px;
	position: absolute;
	left: 0;
	top: 59.73%;
	border-radius: 0 0.8rem 0.8rem 0;
	overflow: hidden;
}
.fv .video_fv video {
	max-width: 100%;
}

.cv{
	background: url(../img/cv_bg.png?240529) no-repeat center bottom / 100%;
}
.cv_inner{
	/* background: linear-gradient(to right, transparent 0,transparent min(calc(40/750 * 100vw), 40px),#f1f1f2 min(calc(40/750 * 100vw), 40px),#f1f1f2 min(calc(710/750 * 100vw), 710px),transparent min(calc(710/750 * 100vw), 710px),transparent 100%) no-repeat top min(calc(320/750 * 100vw),320px) center / auto min(calc(1900/750 * 100vw),1900px) ; */
}
.cv .btn_box {
	position: relative;
}
.btn_box .btn {
	width: calc(624/750 * 100vw);
	max-width: 624px;
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	margin: 0 auto;
	-webkit-animation: move_btn 2s ease-in infinite;
	animation: move_btn 2s ease-in infinite;
}
.btn_box .pc-only {
	display: none;
}
@media (min-width: 751px) {
	.btn_box .sp-only {
		display: none;
	}
	.btn_box .pc-only {
		display: block;
	}
}
/* ------ move_btn_anime ------ */
@keyframes move_btn {
	20%, 53%, 80%, from, to {
	  transform: translate3d(0, 0, 0);
	  animation-timing-function: cubic-bezier(.215, .61, .355, 1);
	}
	40%,  43% {
	  transform: translate3d(0, -10px, 0);
	  animation-timing-function: cubic-bezier(.755, .050, .855, .060);
	}

	70% {
	  transform: translate3d(0, -4px, 0);
	  animation-timing-function: cubic-bezier(.755, .050, .855, .060);
	}
	90% {
	  transform: translate3d(0, 0, 0);
	}
  }
.point{
	position: relative;
	background: url(../img/kodawari_bg.png) no-repeat top 0.8% center / 100%, linear-gradient(170deg, transparent 0%,transparent 38%,#f0eff0 38%,#f0eff0 72%, transparent 72%, transparent 100% );
	filter: blur(0);
}
.point h2{
	position: relative;
	z-index: 1;
}
.point_02{
	position: relative;
}
.nayami{
	margin: calc(-2/750 * 100vw) auto 0;
	background: linear-gradient(-170deg, transparent 0%,transparent 47%,#f0eff0 47%,#f0eff0 100% ), url(../img/nayami_bg.png) no-repeat top center / 100% ;

}
.nayami_wrap{
	position: relative;
}
.graph h2::before{
	content: '';
	position: absolute;
	top: -15%;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #f0eff0;
	transform: skewY(10deg) translateY(90px);
	z-index: -1;
}
.graph_bg{
	position: relative;
	z-index: 1;
	background: linear-gradient(0deg, rgba(207,135,161,1) 98%, rgba(255,255,255,0) 98%);
	margin: 0;
	padding: 0;
	height: 100%;
}
.graph_01{
	margin: -5% auto 0;
	position: relative;
	z-index: 2;
}
.graph_bg::after{
	content: "";
	position: absolute;
	width: 97%;
	height: 96.6%;
	display: block;
	border: 1px solid #fff;
	top: 2.7%;
	left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
  }
.shin{
	position: relative;
	z-index: 1;
	background:url(../img/zone_bg.png) no-repeat center top/contain, url(../img/shin_bg.png) no-repeat center top/cover;
}
.kenkyu{
	position: relative;
}
.catch_02{
	position: relative;
	z-index: 1;
}
.about{
	background: url(../img/about_bg.png) no-repeat top center/contain;
;
}
.step{
	position: relative;
	background: url(../img/step_bg.png) no-repeat right 0 top 4%/contain;
}
.more_step{
	position: relative;
	background: linear-gradient(170deg, transparent 0%,transparent 50%,#f0eff0 50%,#f0eff0 100% );
}
.more_step_ttl{
	background: url(../img/more_step_bg.png) no-repeat right 0 top 98%/contain;
}
.more_step_02{
	position: relative;
	z-index: 1;
}
.voice{
	background: url(../img/voice_bg.png?241118) no-repeat top center/contain;
}
.catch_03{
	position: relative;
	z-index: 1;
}
.kodawari{
	background: #f0eff0;
}
.tokuten{
	background: url(../img/tokuten_bg.png) no-repeat top center/ 100%;
}
/* ------------------------
	video
------------------------ */
.video_wrapper {
	position: relative;
}
.video_wrapper video {
	width: calc(670/750 * 100vw);
	max-width: 670px;
	height: calc(376/750 * 100vw);
	max-height: 376px;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
}
.video_massage video{
	width: 100%;
	max-width: 750px;
	height: calc(402/750 * 100vw);
	max-height: 402px;
	top: 46%;
}
.video_step_01 video,
.video_step_02 video{
	width: calc(413/750 * 100vw);
	max-width: 413px;
	height: calc(232/750 * 100vw);
	max-height: 232px;
	top: 53.4%;
	left: 39%;
}
.video_step_02 video{
	top: 54.4%;
}
.scrolldown {
	position: absolute;
	left: 49.5%;
	top: 9.6%;
	z-index: 2;
	width: calc(8/750 * 100vw);
	max-width: 8px;
	height: calc(178/750 * 100vw);
	max-height: 178px;
}
.scroll_point_02{
	top: 0.7%;
}
.scroll_point_03{
	top: -10.2%;
}
.scroll_nayami_02{
	top: 48.8%;
}
.scroll_nayami_03{
	top: 18%;
}
.scroll_kenkyu{
	top: 23.4%;
}
.scroll_kenkyu_02{
	top: 57.6%;
}
.scroll_step{
	top: 39.5%;
}
.scroll_more_step{
	top: -5.2%;
}
.scroll_more_step02 {
	top: -10.8%;
}
/*モーダル*/
.modal{
	display: none;
	height: 100vh;
	position: fixed;
	top: 0;
	width: 100%;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 9;
}
.modal__bg{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	background: rgba(0,0,0,50%);
	padding: 40px 20px;
	overflow: auto;
	box-sizing: border-box;
}
.modal__content{
	background: #fff;
	text-align: left;
	padding: 14px 0 14px 30px;
	width: 85%;
	position: relative;
	top: 50%;
	left: 50%;
	z-index: 8;
	font-size: calc(24/750 * 100vw);
	transform: translate(-50%,-50%);
}
.modal_scroll{
	max-height: 530px;
    overflow-y: auto;
    padding: 0px 30px 0 0;
}
.modal_scroll .teiki img {
	width: 100%;
	max-width: 460px;
	height: auto;
}
.teiki {
	text-align: center;
}
.js-modal-open{
	position: absolute;
	bottom: 32%;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	width: calc(237/750 * 100vw);
	cursor: pointer;
}
.js-modal-open02{
	bottom: 19%;
	width: calc(176/750 * 100vw);
}
.modal-open-cv2{
	bottom: 63%;
}
.modal-close{
	display: block;
	position: absolute;
	width: 40px;
	height: 40px;
	background: #d2496b;
	border-radius: 50%;
	top: -5%;
	right: -5%;
	z-index: 9;
	cursor: pointer;
}
.modal-close::before, .modal-close::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 3px; /* 棒の幅（太さ） */
	height: 20px; /* 棒の高さ */
	background: #fff; /* バツ印の色 */
}
.modal-close::before {
	transform: translate(-50%,-50%) rotate(45deg);
}
.modal-close::after {
	transform: translate(-50%,-50%) rotate(-45deg);
}
.modal__content p{
	margin: 16px auto;
}
p.modal-close{
	margin: 0;
}

/* スライダー */
.slide_wrap{
	position: relative;
}
.cv_slide_box {
	position: absolute;
	top: 21%;
	left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
	padding: 0 0 4.2%;
	margin: 0 auto;
	width: calc(670/750 * 100vw);
	max-width: 670px;
}
.cv_slider p img{
  width: calc(570/750 * 100vw);
  height: calc(286/750 * 100vw);
  margin: 0 auto;
}
.slick-slide{
	width: calc(630/750 * 100vw);
	max-width: 630px;
}
/* slick arrow */
.cv_slider .slick-next,
.cv_slider .slick-prev {
  width: calc(51/750 * 100vw);
  height: calc(40/750 * 100vw);
}
.cv_slider .slick-next{
  right: 0;
  top: 49%;
}
.cv_slider .slick-prev{
  left: 0;
  top: 49%;
}
.cv_slider .slick-next:before{
  background: url(../img/slide_prev.png) no-repeat center center;
  background-size: contain;
}
.cv_slider .slick-prev:before{
  background: url(../img/slide_next.png) no-repeat center center;
  background-size: contain;
}
.cv_slider .slick-arrow{
  z-index:2;
  width: calc(67/750 * 100vw);
  height:calc(66/750 * 100vw);
}
.cv_slider .slick-arrow:before{
  content:"";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity:1;
}
.fv video {
    width: 100%;
    height: auto;
}
.shin h2 {
    margin-bottom: 70px;
}
/* slick dots */
.slick-dots{
	bottom:-50px;
  }
  .slick-dots li {
	margin: 0 2.4%;
	width: calc(36/750 * 100vw);
	max-width: 36px;
	height: calc(6/750 * 100vw);
	max-height: 6px;
  }
  .slick-dots li button:before {
	content:'';
	width: calc(36/750 * 100vw);
	max-width: 36px;
	height: calc(6/750 * 100vw);
	max-height: 6px;
	background: #f0eff0;
	opacity: 1;
  }
  .slick-dots li.slick-active button:before{
	background: #cf87a1;
  }
  .footer h2 {
	width: 32.6%;
	margin: 0 auto;
	padding: 0 0 3.5%;
  }
  .footer p {
	font-size: min(calc(12/750 * 100vw), 12px);
	line-height: 2.5;
  }
  .footer p a{
	text-decoration: underline;
  	color: #9e1173;
  }
  .tenbai{
	position: relative;
  }
  .tenbai a {
	width: calc(154/750 * 100vw);
	max-width: 154px;
	position: absolute;
	left: 10%;
  	bottom: 23%;
  }
@media only screen and (min-width: 750px) {
	.content {
		width: 750px;
		margin: 0 auto 2%;
		padding-bottom: 2%;
	}
	/*モーダル*/
	.modal__content{
		font-size: 24px;
		padding: 0 0 14px 50px;
		width: 60%;
	}
	.modal_scroll{
		padding: 30px 50px 30px 0;
		max-height: 80vh;
	}
	.cv_slider p img{
		width: 570px;
		height: 286px;
	}
	.cv_slider .slick-arrow{
		width: 67px;
		height: 66px;
	}
	.graph h2::before{
		top: -6.5%;
	}
}