@charset "utf-8";
/* CSS Document */

/*home*/
.pkpk{width: 80px;position: absolute;left: 10px;top: 0;}

section#ttlbox{height:500px;width:100%;background:url("/assets/img/waterdrop3.jpg") top left repeat-x;position:relative;}
section#ttlbox div.ttlitems{position:absolute;right:0;top:0;}
section#ttlbox h1{position:absolute;z-index:10;bottom:50px;width:550px;left: 38px;}
section#ttlbox div.cont12box .inouslsh{position:absolute;z-index:10;left:0;right:0;bottom:200px;width:300px;margin: auto;}
section#ttlbox div.cont12box .orgrsh{position:absolute;z-index:10;left: 56%;bottom:20px;width:96px;margin: auto;}

.blgr{position:absolute;z-index:10;left:10%;top:0;width:160px;margin: auto;}
.pkpp{position:absolute;z-index:10;right:10%;bottom:0;width:114px;margin: auto;}

div.grdbox {position: absolute;top: 0;right: 0;margin: auto;z-index: 1;width: 488px;height: 500px;
background: radial-gradient(ellipse at top left, #cfc7e9, transparent),
radial-gradient(ellipse at bottom right, #4d9f0c, transparent);
opacity: 0.5;animation: huerotator 8s infinite alternate;}

div.grdbox2 {z-index:1;background: radial-gradient(ellipse at top right, rgba(207,199,233,0.5), transparent),
radial-gradient(ellipse at bottom left, rgba(77,159,12,0.5), transparent);
animation: huerotator 8s infinite alternate;
width: 50%;position:absolute;/*height:1150px;*/
}

div.grdbox3 {background: radial-gradient(ellipse at top right, rgba(207,199,233,0.5), transparent),
radial-gradient(ellipse at bottom left, rgba(77,159,12,0.5), transparent);
animation: huerotator 8s infinite alternate;position:absolute;width:100%;}

div.grdbox4 {background: radial-gradient(ellipse at top right, rgba(207,199,233,0.5), transparent),
radial-gradient(ellipse at bottom left, rgba(77,159,12,0.5), transparent);
animation: huerotator 8s infinite alternate;position:absolute;width:100%;}

div.grdbox5 {background: radial-gradient(ellipse at top right, rgba(207,199,233,0.5), transparent),
radial-gradient(ellipse at bottom left, rgba(77,159,12,0.5), transparent);
animation: huerotator 8s infinite alternate;position:absolute;width:100%;}

section#desctop{text-align: center;margin:50px auto;}
section#desctop h2{width: 428px;margin: 0 auto;}
p.desc{line-height:180%;font-size:1.5rem;}

section#lineup{font-weight:500;}
.concop{font-size:1.6rem;letter-spacing: 0.2rem;}
/*section#lineup div.rgtbox{height:1150px;}*/
section#lineup div.lftbox div.coninbox{width:400px;left:auto;text-align:center;padding: 50px 0;position:relative;}
section#lineup div.rgtbox div.coninbox{width:400px;right:auto;text-align:center;padding: 50px 0;position:relative;}
section#lineup h3{height: 55px;margin:0 auto;}
section#lineup h3 img{height:100%;width:auto;}
section#lineup ul{padding:0;}
section#lineup ul li{width: 242px;padding: 20px 0;margin: 0 auto;}
section#lineup ul li span{font-size:0.8rem;display:block;}
section#lineup ul li span.bb{margin:0;border-bottom: 1px solid #000;font-size:2.1rem;display: inline-block;font-weight: 600;}
section#lineup .mid{font-size:2.6rem;margin:0;}

section#desctop .contbox{width:80%;min-width: 1000px;}

.btn {
	position: relative;
	width: 202px;
	height: 200px;
	margin: 0 auto;
	display: block;
	border-radius: 12px;
	overflow: hidden;
	cursor: pointer;margin-bottom: 1.0rem;
}
.btn img:nth-of-type(2) {
	top: -100%;
}
.btn:hover img:nth-of-type(2) {
	top: 50%;
}

/*.btn .btnov{position: absolute;top:0;width:202px;height:200px;left:0;display:none;background:rgba(255,255,255,0.6);border-radius: 100px;line-height: 200px;
}
.btn:hover .btnov{display:block;}
.btn .btnov img{vertical-align:middle;}*/

.whsr{position:absolute;z-index:10;left: -5%;bottom:20%;width:226px;margin: auto;}
.whmin{position:absolute;z-index:10;left: 20%;top: 20%;width: 120px;margin: auto;}
.yeor{position:absolute;z-index:10;right: 5%;bottom: 5%;width: 188px;margin: auto;}
.ppgr{position:absolute;z-index:10;right: 5%;top: 40%;width: 80px;margin: auto;}

section#ttlbox div.cont12box,section#ttlbox div.lftbox,section#ttlbox div.rgtbox{height: 500px;}
section#couponbox {background:url("/assets/img/paint.svg") center center no-repeat;background-size: 1200px;padding: 90px 0;}
section#couponbox div.cont100box h2{width:300px;margin:0 auto;}
section#couponbox div.cont100box{top: 0;bottom:0;right: 0;left: 0;text-align:center;padding: 40px 0;position:relative;}
.coupon{width:376px;margin:35px auto;position:relative;}
.coupon img{filter: drop-shadow(0px 5px 10px rgb(153,153,153));}
.kikan{background:url("/assets/img/ribbon.png") center center no-repeat;background-size:100%;font-size:1.9rem;padding: 15px 0;width: 600px;margin: 0 auto 30px;}
.kikan span{border-top:1px solid #000;border-bottom:1px solid #000;font-size:1.2rem;padding:0.5rem;margin-right:20px}
.kikan img{height:1.9rem;vertical-align: middle;}
.midashi{border-top:1px solid #000;border-bottom:1px solid #000;margin:50px auto 5px;width: 120px;line-height: 2.6rem;}
section#moviebox{font-weight:500;}
section#moviebox h2{width:210px;margin:0 auto;}
section#moviebox .cont12box{position:relative;/*padding: 50px 0;*/margin-top: 20px;}
section#moviebox .cont12box .pd50{padding: 50px 0;position:relative;}
section#moviebox .cont12box p{text-align:center;font-size: 1.5rem;}
section#moviebox .cont12box ul li{width:25%;float:left;}
section#moviebox .cont12box ul{width:1000px;padding:0;margin:0 auto;}


section#youtuberbox{background:url("/assets/img/paint2.svg") center center no-repeat;background-size: 1200px;padding: 90px 0;}
section#youtuberbox h2{width: 105px;margin: 0 auto;}
section#youtuberbox .cont12box .pd50{padding: 50px 0;position:relative;}
section#youtuberbox .cont12box .pd50 p{text-align:center;font-size:140%;}




.ugou{position:absolute;z-index:10;left: 5%;top: -10%;width:160px;margin: auto;}
.aopp{position:absolute;z-index:10;right: 5%;bottom: -8%;width:160px;margin: auto;}

@keyframes huerotator {
0% {-webkit-filter: hue-rotate(0deg);filter: hue-rotate(0deg);}
100% {-webkit-filter: hue-rotate(360deg);filter: hue-rotate(360deg);}
}



@media only screen and (max-width: 768px) {
	.pkpk{left:2%;}
	section#desctop .contbox{min-width:auto;}
	section#ttlbox div.cont12box .inouslsh{top:20%;width: 200px;left: auto;right: 2%;}
	section#ttlbox div.cont12box,section#ttlbox div.lftbox,section#ttlbox div.rgtbox{height: 300px;}
	section#ttlbox h1{width:90%;bottom: 5px;left: 2%;}
	section#desctop .contbox{width:90%;}
	section#desctop h2{width:90%;}
	section#ttlbox{height:600px;}
	section#ttlbox div.ttlitems{height:300px;left:0;}
	section#ttlbox div.ttlitems img{height:100%;width:auto;}
	#ttlbox .lftbox{float:none;width:100%;}
	#ttlbox .rgtbox{float:none;}
	section#lineup ul li{width:100%;}
	section#ttlbox div.cont12box .orgrsh{bottom: -200px;
    left: 80%;
    width: 50px;}
	.btn{width:80%;height:auto;}
	.btn img{width:100%;}
	.btn .btnov{width:90%;}
	
	
	section#lineup .mid{font-size:2.0rem;}
	.coninbox .mb0{font-size:1.2rem;}
	section#lineup ul li span.bb{font-size:1.6rem;}
	
	section#lineup h3{height:40px;}
	
	
	div.grdbox{width:70%;height:300px;}
	/*section#lineup div.rgtbox,div.grdbox2{height:950px;}*/
	section#lineup div.lftbox div.coninbox{width:100%;}
	section#lineup div.rgtbox div.coninbox{width:100%;}
	section#couponbox {background:url("/assets/img/paint_sp.svg") center center no-repeat;background-size: 100%;padding: 90px 0;}
	.coupon{width:80%;}
	#couponbox .cont100box .notosan.ft12{width:90%;margin:auto;}
	.kikan{background:url("/assets/img/ribbon.png") center center no-repeat;background-size:100%;font-size:1.9rem;padding: 15px 0;width: 96%;margin: 0 auto 30px;}
	.kikan img{width: 70%;height: auto;}
	.kikan span{padding:0.2rem 0.5rem;}
	section#moviebox h2{width:150px;}
	section#moviebox .cont12box ul{width:90%;}
	section#moviebox .cont12box ul li{width:50%;}
	section#moviebox .cont12box ul li img{width:100%;}
	#moviebox ul{padding-left:0;}
	.yeor{bottom: -2%;
    width: 100px;}
	.ugou{width: 120px;
    top: -3%;}
	.blgr{width: 60px;left: -8%;top: -15%;}
	.pkpp{width: 60px;bottom: -15%;right: -5%;}
	.coupon img{width:100%}
	
	section#youtuberbox{background:url("/assets/img/paint2_sp.svg") center center no-repeat;
		background-size: 100%;padding: 10px 0 10px;
    margin-top: 80px;}
	}


@media (max-width: 375px) {
  
}