@charset "utf-8";

body {
	margin:0;
	padding:0;
	font-family: "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "Osaka－等幅", "ヒラギノ角ゴ Pro W3", Arial, Helvetica, sans-serif;
	font-size:13px;
	line-height:1.5;
	color:#333;
	background-color:#fff;
	text-align:center;
}

li {list-style: none;}


a:link {
	color:#FF7F00;
	text-decoration:underline;
}

a:visited {
	color:#FF7F00;
	text-decoration:none;
}

a:hover {
	color:#FF7F00;
	text-decoration:none;
}

a:active {
	color:#FF7F00;
	text-decoration:underline;
}

/*画像サイズ調整*/
#wrapper {
	width: 720px;/*表示サイズ*/
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	background:#FFF;
	/*margin: auto; /* 中央揃えにする場合必要 */
	line-height: 0;
}

#wrapper img {
	vertical-align: bottom;
	border: 0px;
}

/* ---------------------- movie ---------------------- */
.movieSP01,
.how-to-use,
.slider,
.userVoice01,
.userVoice02,
.userVoice03 {
	position: relative;
}

.movieBg,
.animeBg {
	position: relative;
	z-index: 1;
	top: 0;
	left: 0;
}

.movieCover {
	position: absolute;
	z-index: 3;
	top: 0;
	left: 0;
}

.movie01 {
	position: absolute;
	z-index: 2;
	width: 92%;
	top: 45%;
	left: 4%;
}

.howto01-03 {
	position: absolute;
	z-index: 2;
	top: 39%;
	left: 9%;
	display: flex;
	flex-direction: column;
	width: 41.5%;
}

.howto01-03 li {
	margin-bottom: 23%;
}

.howto_movie {
	width: 100%;
}

.userVoice {
	position: absolute;
	z-index: 2;
	border: 3px solid #6f65ab;
	width: 39%;
}

.uv01 {
	top: 22%;
	left: 6%;
	transform: rotate(-2deg);

}

.uv02 {
	top: 4%;
	left: 56%;
	transform: rotate(2deg);
}

.uv03 {
	top: 4%;
	left: 6%;
	transform: rotate(-2deg);
}

/* --------------------- slider --------------------- */
.swiper {
	position: absolute;
	z-index: 2;
	top: 50%;
	transform: translateY(-50%);
	overflow: hidden;
	width: 100%;
}

.swiper-slide {
	opacity: .3;
	/* 左右のスライドを薄くする */
	transform: scale(.8);
	/* 左右のスライドを小さくする */
	transition: .7s;
	/* ゆっくり小さくさせる */
}

.swiper-box {
	border: 10px solid #fff;
}

.swiper-slide video {
	height: auto;
	width: 100%;
}

.swiper-slide-active {
	opacity: 1;
	/* 中央のスライドは薄くしない */
	transform: scale(1);
	/* 中央のスライドは小さくしない */
	z-index: 1;
	/* 中央のスライドを一番上にする */
}

.swiper-button-next {
	right: 13%;
	background-image: url(../img/slider/next.svg);
}

.swiper-button-prev {
	left: 13%;
	background-image: url(../img/slider/prev.svg);
}

.swiper-button-next,
.swiper-button-prev {
	z-index: 10;
}

/* ------------------------ offer contents ------------------------ */

.lashforte_cv_sp {
	position: relative;
}

.cvBtnSP {
	position: absolute;
	display: block;
	top: 37%;
	left: 35%;
	width: 62%;
	animation: animScale 2s infinite ease-out;
}

@keyframes animScale {
	0% {
		transform: scale(0.9, 0.9);
	}

	25% {
		transform: scale(1, 1);
	}

	50% {
		transform: scale(0.9, 0.9);
	}

	75% {
		transform: scale(1, 1);
	}

	100% {
		transform: scale(0.9, 0.9);
	}
}