@charset "UTF-8";

img {
	display: block;
	width: 100%;

}
video{
	width: 100%;
	display: block;
	padding: 0;
	margin: 0;
}
.cnt{
	width: 100%;
	max-width:750px;
	margin: 0 auto;
  	background-color: #000;

}

.cnt-cta{
	position: relative;
}
.cta01-item01{
	position: absolute;
	top: 48.5%;
	left:1%
}

/*===============================================
 男女GIF
=================================================*/
.cnt-gif01{
	position: relative;
}

.fade-01{
	position: absolute;
	top:21%;

}
.fade-02{
	position: absolute;
	top: 45%;
	
}

/*===============================================
 グラフslick
=================================================*/
.kinousei01{
	position: relative;
}
.slick01{
	position: absolute;
	top: 23.5%;
	width: 100%;
}

/*===============================================
 愛用者slick
=================================================*/
.cnt-aiyousha{
	position: relative;
}

.slick02{
	position: absolute;
	top: 49%;
	width: 100%;
	
}
.autoplay02{
	padding: 0px 0px 20px 0px;
}
.autoplay02 img{
	padding: 0px 20px;
}

/*===============================================
slick矢印ドット
=================================================*/

.slider {
	margin: 0 auto;
	max-width: 500px;
	width: 80%;
  }
  .slider-img img {
	height: auto;
	width: 100%;
  }
  .slide-dots {
	margin: 0;
	padding: 0;
	text-align: center;
  }
  .slide-dots li {
	display: inline-block;
	margin: 0 20px;
  }
  .slide-dots li button {
	position: relative;
	text-indent: -9999px;
  }
  .slide-dots li button::before {
	background-color: #fff;
	background-repeat: no-repeat;
	background-size: contain;
	content: "";
	cursor: pointer;
	height: 3px;
	left: 0;
	margin: auto;
	position: absolute;
	right: 0;
	top: 13px;
	width: 50px;
	opacity: 0.5;
  }
  .slide-dots li.slick-active button::before {
	background-color: #fff;
	opacity: 1;
  }
  button {
	background: none;
	border: none;
	outline: none;
	padding: 0 10px;
  }

.slick-arrow:before{
	content:""!important;
}
.slick-arrow:before{
    content:""!important;
    width: 100%!important;
    height: 100%!important;
    position: absolute;
    top: 0;
    left: 0;
}

.slick-next:before{
    background: url(../img/yajirushi02.png)!important;
    background-size: contain!important;
	
	
}

.slick-prev:before{
    background: url(../img/yajirushi01.png)!important;
    background-size: contain!important;
	background-repeat: no-repeat;
}
.slick-arrow{
    z-index:2!important;
    width:31px!important;
    height:109px!important;
	background-repeat: no-repeat;
}

.slick-next{
    right:0px!important;
}

.slick-prev{
    left:0px!important;
}
.slick-arrow:before{
    opacity:1;
}

ul.slide-dots{
	margin-right:20px ;
}
/*===============================================
よくある質問
=================================================*/
#faq{
	padding: 30px 20px;
}
.faq{
	margin: 25px 0;
}
#faq img{
	margin: 0 auto;

}

.faq-body{
	display: none;
}



/*===============================================
PC : 画面の横幅が769px以上
=================================================*/

.example {
	font-size: 50px;
	color: #99293D;
}



/*ここからメディアクエリで各デバイスサイズに書き分けます
CSSは上から下に継承されるので、変化させたいところだけ書けばOK*/



/*================================================
Tablet : 画面の横幅が768pxまで
==================================================*/
@media screen and (max-width: 768px){
	.example {
		font-size: 30px;
		color: #2D81B1;
	}
}


/*================================================
Smartphone :  画面の横幅が640pxまで
=================================================*/
@media screen and (max-width:640px){
	.example {
		font-size: 20px;
		color: #AD8651;
	}
}