@charset "utf-8";
/* CSS Document */
/*-----------------------------
 reset
-------------------------------*/
html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, 
img, small, strong, sub, sup,b, i,dl, dt, dd, ol, ul, li,
 form, label,table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, footer, header,hgroup, menu, nav, section,
time, mark, audio, video {
margin:0;	padding:0;border:0;outline:0;font-size:100%;
vertical-align:baseline;background:transparent;line-height:1.7;
}
th{font-style:normal;font-weight:normal;}
ul li{list-style:none; }
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%;}

body {line-height:1;font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Meiryo,"メイリオ","ＭＳ Ｐゴシック",Helvetica,Sans-Serif;}
nav ul {list-style:none;}
table {	border-collapse:collapse;border-spacing:0;}
input, select {vertical-align:middle;}
article, aside, figure, footer, header,hgroup, nav, section { display:block; }
img{vertical-align:bottom;width:100%;display: block;}
/*-----------------------------
 common
-------------------------------*/
.wrap,.footer{
max-width: 750px;
margin: 0 auto;
background:#fff;
}
.footer img{
	display: inline;
	max-width: 750px;
}
.footer p{
	font-size: 0.9rem;
}
.verisign{
	width: 101px;
	height: 71px;
}
.mlritz{
	width: 130px;
	height: 47px;
}
.overlaid{
	position: relative;
}
.movie {
	padding: 65% 10% 0 10%;
    width:80%;
	z-index: 1;
    position: absolute;
}
.btn,.option,.gif,.pop{
	position: absolute;
}
.btn1{
	width: 80%;
    margin: 0 auto;
    left: 0;
    right: 0;
    bottom: 3.5%;
}
.btn2{
	width: 92%;
    margin: 0 auto;
    left: 0;
    right: 0;
	bottom: 6%;
}
.btn3{
	width: 92%;
    margin: 0 auto;
    left: 0;
    right: 0;
	bottom: 5.6%;
}
.gif01{
	top: 6%;
	width: 95%;
    margin: 0 auto;
    left: 0;
    right: 0;
}
.gif02{
	top: 0%;
	width: 85%;
    margin: 0 auto;
    left: 0;
    right: 0;
}
 .video-container_01 {
   width: 100%; /* ページ全幅 */
   height: 100%; /* 高さを自動調整 */
   margin: 0 auto; /* 動画を中央に配置 */
   background-color: #000; /* ロード時の背景色（オプション） */
overflow: hidden;  /* 動画がコンテナからはみ出さないようにする */
        }
 /* 動画自体のスタイル */
 .video-container video {
            width: 100%; /* コンテナ幅に合わせる */
            height: 100%; /* コンテナ高さに合わせる */
            display: block;
        }
 .video-container_02 {
   width: 100%; /* ページ全幅 */
   height: 100%; /* 高さを自動調整 */
   margin: 0 auto; /* 動画を中央に配置 */
   background-color: #000; /* ロード時の背景色（オプション） */
overflow: hidden;  /* 動画がコンテナからはみ出さないようにする */
        }
 /* 動画自体のスタイル */
 .video-container video {
            width: 100%; /* コンテナ幅に合わせる */
            height: 100%; /* コンテナ高さに合わせる */
            display: block;
        }
.video-container_03 {
   width: 100%; /* ページ全幅 */
   height: 100%; /* 高さを自動調整 */
   margin: 0 auto; /* 動画を中央に配置 */
   background-color: #000; /* ロード時の背景色（オプション） */
overflow: hidden;  /* 動画がコンテナからはみ出さないようにする */
        }
 /* 動画自体のスタイル */
 .video-container video {
            width: 100%; /* コンテナ幅に合わせる */
            height: 100%; /* コンテナ高さに合わせる */
            display: block;
        }
 .video-container_04 {
   width: 100%; /* ページ全幅 */
   height: 100%; /* 高さを自動調整 */
   margin: 0 auto; /* 動画を中央に配置 */
   background-color: #000; /* ロード時の背景色（オプション） */
overflow: hidden;  /* 動画がコンテナからはみ出さないようにする */
        }
 /* 動画自体のスタイル */
 .video-container video {
            width: 100%; /* コンテナ幅に合わせる */
            height: 100%; /* コンテナ高さに合わせる */
            display: block;
        }
 .video-container_05 {
   width: 100%; /* ページ全幅 */
   height: 100%; /* 高さを自動調整 */
   margin: 0 auto; /* 動画を中央に配置 */
   background-color: #000; /* ロード時の背景色（オプション） */
overflow: hidden;  /* 動画がコンテナからはみ出さないようにする */
        }
 /* 動画自体のスタイル */
 .video-container video {
            width: 100%; /* コンテナ幅に合わせる */
            height: 100%; /* コンテナ高さに合わせる */
            display: block;
        }
.option01{
	width: 44%;
    left: -0.3%;
	bottom: 38.7%;
	z-index: 3;
}
.option02{
    top: -3%;
    right: 0;
    width: 16%;
    pointer-events: none;
}
.gif03{
	top: 24.9%;
	width: 82%;
    margin: 0 auto;
    left: 0;
    right: 0;
	bottom: 42.6%;
	overflow: hidden;
}
.slide_bg_01{
	position: absolute;
	width: 100%;
}
.slideArea01{
	padding: 436px 0 47px;
	max-height: 1419px;
	width: 100%;
	margin: 0 auto;
	background: #F0F0EB;
}
.slick-slide {
	position: relative;
}
#thumb{
	margin: 0 auto 1% 1.6%;
}
#slick01{
	width: 99%;
    margin: 0 auto;
}
#thumb .slick-slide::after{
	width: 100%;
    max-width: 103px;
    height: 14.2vw;
    max-height: 104px;
	position: absolute;
	content: "";
	background: rgba(0, 0, 0, 0.6);
	top: 0;
	border-radius: 5px;
}
#thumb .slick-slide{
    margin: 0 2.4% 0 0;
	cursor: pointer;
	max-width: 103px;
}
#thumb .slick-slide:last-child{
    margin: 0 0 0 0;
}
#thumb .slick-current::after{
	background: none;
}
.slick-prev, .slick-next {
	width: 91px;
    height: 91px;
}
.slick-prev::before{
	content:url("../cp_01/before.png");
	background-size: 100%;
}
.slick-next::before {
	content:url("../cp_01/after.png");
	background-size: 100%;
}
button.slick-prev, button.slick-next {
	z-index:2;
}
.slick-prev{
	left: 5.2%;
}
.slick-next{
	right: 5.6%;
}
.slick04Area .slick-prev{
	left: 1.2%;
	top: 65.9%;
}
.slick04Area .slick-next{
	right: 0%;
	top: 65.9%;
}
.slick-prev:before, .slick-next:before {
    content:"";
}
.slick-arrow{z-index:10;}
.slick-prev img:hover{
	opacity: .6;
}
.slick-next img:hover{
	opacity: .6;
}
.slideArea01 .slick-dots{
	bottom: 48.6%;
}
.slick-dots li button:before{
	font-size: 45px;
}
#slick02 .slick-slide,#slick03 .slick-slide{
	max-width: 302px;
}

.slide_bg_02{
	position: absolute;
	top:0;
	bottom:0;
}
.slide_bg_03{
	position: absolute;
	bottom:0;
}
#slick02{
	padding: 80% 0 0;
	z-index: 1000;
}
#slick04{
    width: 90%;
    margin: 0 auto;
	margin: -98% auto 0%;
    padding-bottom: 20%;
}
#slick04 .slick-dots{
	z-index: 5;
    bottom: 8.3%;
}
.pop01{
	width: 86%;
    left: 0.7%;
    right: 0;
    margin: 0 auto;
    bottom: 6.3%;
}
.pop01:hover{
	opacity: .6;
}
.close{
	width: 11.25vw;
	max-width: 72px;
	height: 11.25vw;
	max-height: 72px;
	background: rgba(0,0,0,0.9);
	border-radius: 50%;
	position: absolute;
	right: -5%;
    top: -4%;
	display: block;
	cursor: pointer;
}
.close:hover{
	opacity: 0.6;
}
.close::before{
	position: absolute;
	content: "";
	width: 60%;
	height: 1px;
	border-bottom: solid #fff 3px;
	transform:rotate(-45deg);
	margin: auto;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
}
.close::after{
	position: absolute;
	content: "";
	width: 60%;
	height: 1px;
	border-bottom: solid #fff 3px;
	transform:rotate(45deg);
	margin: auto;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
}
.modal-window-content img{
	width: 100%;
}
.scroll{
	position: absolute;
	width:100%;
	-webkit-overflow-scrolling: touch;
	overflow-scrolling: touch;
	overflow-y: scroll;
	max-height: 810px;
	height: 108vw;
	left: 0;
	right: 0;
	margin: 0 auto;
	bottom: 9%;
	-ms-overflow-style:none;
}
.scroll::-webkit-scrollbar{
	display:none;
}
.iziModal .iziModal-wrap {
    width: 86%;
}
#thumb .slick-track{
	transform: translate3d(0, 0px, 0px) !important;
}
@media screen and (max-width: 750px){
	.footer p{
		font-size: 1.92vw;
	}
	.verisign{
		width: 13.466vw;
		height: 9.46vw;
	}
	.mlritz{
		width: 17.33vw;
		height: 6.266vw;
	}
	.slick-dots li button:before{
		font-size: 6vw;
	}
	.slick-prev, .slick-next {
		width:12.2vw; 
		height:12.2vw; 
	}
	.slideArea01{
		padding: 58vw 0 6vw;
	}
	#slick02{
		padding: 72.8vw  0 0;
		z-index: 3;
	}
	#slick03{
		padding: 0 0 11.47vw;
		z-index: 3;
	}
	#slick04 {
	}
	#slick05{
		padding: 0vw  0 0;
		z-index: 3;
	}
	.slick-dots li{
		width: 2.7vw;
		height: 2.7vw;
	}
	.pop01:hover{
		opacity: 1;
	}
	.iziModal .iziModal-wrap {
		width: 90%;
	}
}/*SP end*/
/*------------------------------------
/  アコーディオン
/ ------------------------------------*/
.toggle {
    position: relative;
    overflow: hidden;
}
/*-----------------------------
offer
-------------------------------*/
.wrap{
max-width: 750px;
margin: 0 auto;
background:#fff;
}
.abs{
	position: absolute;
}
.offer_btn_01 {
  top: 74%;
  width: 100%;
  left: 0%;
}
.offer_btn_02 {
  top: 74%;
  width: 100%;
  left: 0%;
}