@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: 92%;
    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%;
}
.botan2 {
    position: relative;
    top: 0%;
    width: 100%;
    border-style: none;
    outline: 0;
}
.gif01{
	width: 86%;
    margin: 0 auto;
    left: 0;
    right: 0;
    bottom: 47%;
}
.gif02{
	width: 85%;
    margin: 0 auto;
    left: 0;
    right: 0;
    bottom: 40%;
}
.option01{
	width: 44%;
    left: -0.3%;
	bottom: 38.7%;
	z-index: 3;
}
.option02{
    top: -3%;
    right: 0;
    width: 16%;
    pointer-events: none;
}
.gif03{
	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;
}
.slideArea02{
	padding: 436px 0 47px;
	max-height: 1419px;
	width: 100%;
	margin: 0 auto;
	background: #F0F0EB;
}
.slideArea04{
	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;
}
#slick02{
	width: 99%;
    margin: 0 auto;
}
#slick06{
	width: 90%;
    height: 91px;
}
#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_poppo_02/before.png");
	background-size: 100%;
}
.slick-next::before {
	content:url("../cp_poppo_02/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%;
}
.slideArea04 .slick-dots{
	bottom: 48.6%;
}
.slick-dots li button:before{
	font-size: 45px;
}
#slick02 .slick-slide,#slick03 .slick-slide,#slick06{
	max-width: 302px;
}

.slide_bg_02{
	position: absolute;
	top:0;
	bottom:0;
}
.slide_bg_03{
	position: absolute;
	bottom:0;
}
.slide_bg_04{
	position: relative;
	bottom:0;
}
#slick02{
	padding: 50% 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;
	}
	.slideArea04{
		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;
}
/*-----------------------------
tab-offer
-------------------------------*/
.wrap{
max-width: 750px;
margin: 0 auto;
background:#fff;
}
.abs{
	position: absolute;
}
.btn{
	position: absolute
}
.btn01{
	top: 33%;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 88%;
}
.btn02{
	top: 43.8%;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 80%;
}
.btn03{
	top: 89.5%;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 92.3%;
}
.btn04{
	top: 35.8%;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 82%;
}

/*************************
Tab
*************************/
.Tab{
background: url(../cp_poppo_02/bg.jpg);
background-position: top;
}
.Tab__Text{
	width: 100%;
}
.TabBtn{
	display: flex;
	margin: 0 auto;
	width: 100%;
}
.TabWrap{
margin: -1px auto 0;
position: relative
}
.TabWrap--01,.TabWrap--03,.TabWrap--04{display: none}
.TabBtn01,.TabBtn02,.ToggleBtnWrap,.TabBtn05{
	top: 35%;
    left: 0;
    right: 0;
    margin: auto;
    width: 92%;
}
.ToggleBtnWrap{
	top: auto;
	bottom: 3.7%;
}
.TabBtn05{top: 41.7%;}
.BtnToggle{
	cursor: pointer;
	position: absolute;
	width: 7%;
    height: 3%;
}
.BtnToggle__Inner{position: relative}
.BtnToggle--01{
	top: 21.4%;
    right: 9.1%;
}
.BtnToggle--02{
	bottom: 15.8%;
    right: 8.9%;
}
.BtnToggle__Btn--01{opacity: 0	}
.BtnToggle--On .BtnToggle__Btn--01{ opacity: 1}
.TabBtn03--01{
	width: 95%;
    top: 23.9%;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
}
.TabBtn03--02{
	width: 96%;
    left: 0;
    right: 0;
    margin: 0 auto;
    position: absolute;
    bottom: 3.4%;
}
.TabBtn__Item{cursor: pointer}
.TabBtn02{
	top: 31%;
}
.TabWrap2{
    margin: -1px auto 0;
	position: relative;
}
.TabBtn2{
    display: flex;
    margin: 0 auto;
    width: 100%;
}
.TabBtn03{
	top: 31%;
}
.TabWrap3{
    margin: -1px auto 0;
	position: relative;
}
.TabBtn3{
    display: flex;
    margin: 0 auto;
    width: 100%;
}