@font-face {
  font-family: "impact";
  src: url("../font/impact.woff")  format('woff');
}
@font-face {
  font-family: "din";
  src: url("../font/din.woff")  format('woff');
}

body{margin: 0px auto;padding:0px;width:auto;background:#FFF;}
ul,li{ padding:0px; margin:0px; list-style:none;}


ul{width:100%;margin:0 auto;}
li{ text-align:center;}

.formtext {
    width: 90%;
    margin: 0 auto;
    padding: 3% 0;
}



.content{
    width: 100%;
    max-width: 75.5%;
    margin-right: auto;
    margin-left: auto;
    position:relative;
    overflow:hidden;
    }
.content2{
    width: 100%;
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;
    position:relative;
    overflow:hidden;
    }

.main_animation {
    margin: 0 auto;
	width:100% !important;
	height:auto !important;
}
.main_animation canvas{
	width: 100% !important;
	height:auto !important;
}


.lightbox { display: none; }

	
.cl_box{
    margin: 0 auto 1% auto;}
	
.cl_box a{ color:#FFF;}

.sp{ display:none;}


.mfrom {
    width: 100%;
    /* text-align: center; */
    outline: 0;
    border: #231815 2px solid;
    color: #a6a8a8;
    font-size: 1.4vw;
    margin: 0 auto 5% auto;
    padding: 1.5% 3%;
}

.pc{ display:block;}
.sp{ display:none;}


.blue_line{
	background:#69049d;

	position:relative;
	height: auto;
	margin: 0 0 0 0;
	}
.blue_line:before{
    content: "";
    display: block;
    padding-top: 1%; /* 1:1 */
    }

.blue_lineh{    height:auto;
    padding: 0;
    position: absolute;
    top: 0;
    left: 0;
	right:0;
    width: 100%;
    height: 100%;
	margin:0 auto;}


.p1{
	background: url(../img/001.jpg) no-repeat;
	background-position: center top;
	background-size: 100% 58%;
	position:relative;
	height: auto;
	margin: 0 0 0 0;
	}
.p1:before{
    content: "";
    display: block;
     /* 1:1 */
    padding-top: 86.75%;
    }

.p1h{
    height:auto;
    padding: 0;
    position: absolute;
    top: 0;
    left: 0;
    right:0;
    width: 100%;
    height: 100%;
    margin:0 auto;
    }
	

.p2{
	background: #fef8d4;
	position:relative;
	height: auto;
	margin: 0 0 0 0;
	}
.p2:before{
    content: "";
    display: block;
     /* 1:1 */
    }

.p2h{
    height:auto;
    padding: 0;
    position: relative;
    top: 0;
    left: 0;
    right:0;
    width: 100%;
    height: 100%;
    margin:0 auto;
    }
	
	
.p3{
	background: #FFF;
	position:relative;
	height: auto;
	margin: 0 0 0 0;
	}
.p3:before{
    content: "";
    display: block;
     /* 1:1 */
    }

.p3h{
    height:auto;
    padding: 0;
    position: relative;
    top: 0;
    left: 0;
    right:0;
    width: 100%;
    height: 100%;
    margin:0 auto;
    }

.p4{
	background: url(../img/001.jpg) no-repeat;
	background-position: center top;
	background-size: 100% 58%;
	position:relative;
	height: auto;
	margin: 0 0 0 0;
	}
.p4:before{
    content: "";
    display: block;
     /* 1:1 */
    padding-top: 80%;
    }

.p4h{
    height:auto;
    padding: 0;
    position: absolute;
    top: 0;
    left: 0;
    right:0;
    width: 100%;
    height: 100%;
    margin:0 auto;
    }

.p5{
	background: url(../img/005.jpg) no-repeat;
	background-position: center top;
	background-size: cover;
	position:relative;
	height: auto;
	margin: 0;
	z-index: 2;
	}
.p5:before{
    content: "";
    display: block;
     /* 1:1 */
    }

.p5h{
    height:auto;
    padding: 0;
    position: relative;
    top: 0;
    left: 0;
    right:0;
    width: 100%;
    height: 100%;
    margin:0 auto;
    }
	
.p6{
	background: #FFF;
	position:relative;
	height: auto;
	margin: 0 0 0 0;
	}
.p6:before{
    content: "";
    display: block;
     /* 1:1 */
    }

.p6h{
    height:auto;
    padding: 0;
    position: relative;
    top: 0;
    left: 0;
    right:0;
    width: 100%;
    height: 100%;
    margin:0 auto;
    }
	


.cl{background: #505050;color:#FFF;padding:1% 0;}


.p1 img,.p2 img,.p3 img,.p4 img,.p5 img,.p6 img,.p7 img,.p8 img,.p9 img,.p10 img,.p11 img,.p12 img,.p13 img,.p14 img,.p15 img,.p16 img,.p17 img,.p18 img,.p19 img,.p20 img,.p21 img,.p22 img,.p23 img,.t1 img,.w01 img,.t2 img,.t3 img,.t4 img,.t5 img,.t6 img,.t7 img,.t8 img,.p21 img,.p22 img,.p23 img,.p24 img,.p25 img,.p26 img{ width:100%;}
.addFriend input{ width:100%;}


.form_box1{position: absolute;top: 63%;width: 55.3%;left: 0%;right: 0%;margin: 0% auto 0% auto;z-index: 1;}
.form_box1 input{
    width: 100%;
    height: 0%;
    text-align: center;
    border-radius: 0;
    outline: 0;
    border: #aaa 2px solid;
    color: #666;
    font-size: 2.2vw;
    margin: 0 auto 3% auto;
    padding: 3% 5%;
}

.main_animation{ margin:0 auto;}

.e1{position: absolute;left: 0;right: 0;top: 4%;width: 32.4%;margin: 0 auto;z-index: 1;}
.e2{position: absolute;top: 14%;width: 34%;left: 30.8%;margin: 0 auto;z-index: 2;}
.e3{position: absolute;left: 0;right: 0;top: 29%;width: 38.3%;margin: 0 auto;z-index: 1;}
.e4{position: absolute;top: 8.5%;width: 17%;right: 27%;margin: 0 auto;z-index: 1;}
.e5{position: absolute;top: 10%;width: 46.0%;left: 0;right: 0;margin: 0 auto;z-index: 0;}
.e6{position: absolute;top: 39%;width: 38.3%;left: 0;right: 0;margin: 0 auto;z-index: 0;}


.e7{position: absolute;left: 0;right: 0;top: 70%;width: 59%;margin: 0 auto;z-index: 1;}
.e8{position: absolute;left: 0;right: 0;top: 76%;width: 44.54%;margin: 0 auto;z-index: 1;}
.e7_f{position: absolute;left: 0;right: 0;top: 70%;width: 59%;margin: 0 auto;z-index: 1;}
.e8_f{position: absolute;left: 0;right: 0;top: 74%;width: 59%;margin: 0 auto;z-index: 1;}

@keyframes rotation{
  0%{ transform:rotate(0);}
  100%{ transform:rotate(360deg); }
}

.e9{position: relative;left: 0%;right: 0%;top: 65.3%;width: 60.8%;margin: 10% auto 3% auto;z-index: 0;}
.e10{position: relative;left: 0%;right: 0%;top: 80.3%;width: 22.35%;margin: 0 auto 0 13%;z-index: 1;}


.e11-e13{
    position: relative;
    left: 0%;
    top: 0;
    width: 100%;
    margin: -19% 0 6% 8%;
    z-index: 1;
}
.e11-e13 ul{
    margin: 0 auto;
    padding: 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    max-width: 44.1%;
    align-items: center;
}
.e11-e13 li{
    width: 28.9%;
}
.e11-e13 li img{ width:100%;}

.logo{position: absolute;top: 0%;width: 8.3%;right: 17.2%;margin: 0 auto;z-index: 1;}

.e11{position: absolute;top: 10%;width: 44.6%;left: 19.5%;margin: 0 auto;z-index: 1;}
.e12{position: absolute;top: 20.0%;width: 46.05%;left: 20%;margin: 0 auto;z-index: 1;}
.e13{position: absolute;left: 0;right: 0;top: 22.5%;width: 65.7%;margin: 0 auto;z-index: 0;mix-blend-mode: multiply;}
.e14{position: relative;top: 0;width: 34.75%;left: 0;right: 0;margin: -4% 25% 0 auto;z-index: 2;}
.e15{position: relative;top: 58.5%;width: 66.65%;left: 0;right: 0;margin: -21.65% auto 6% auto;z-index: 0;}
.e16{position: relative;right: 0;left: 0;top: 0;width: 50.6%;margin: 0% auto 3% auto;z-index: 0;}

.e17{position: relative;top: 0;width: 45.0%;left: 0;right: 0;margin: 0 auto 5% auto;z-index: 1;}
.e18{position: relative;top: 20.0%;width: 65.3%;left: 0;right: 0;margin: 0 auto 5% auto;z-index: 1;}
.e19{position: relative;top: 33%;width: 59%;left: 0;right: 0;margin: 0 auto 10% auto;z-index: 2;}

.e20{position: relative;top: 0;width: 66.65%;left: 0;right: 0;margin: 8% auto 5% auto;z-index: 1;}
.e21{position: relative;top: 0;width: 66.65%;left: 0;right: 0;margin: 0 auto 8% auto;z-index: 1;}
.e22{position: absolute;top: 21.3%;width: 39%;left: 22.4%;margin: 0 auto;z-index: 2;}

.logo2{position: absolute;top: 0%;width: 8.3%;left: 19.0%;margin: 0 auto;z-index: 1;}

.e23{position: absolute;top: 12.5%;width: 20%;right: 19%;margin: 0 auto;z-index: 1;}
.e24{position: absolute;left: -16%;right: 0;top: 38%;width: 39%;margin: 0 auto;z-index: 1;}
.e25{position: absolute;top: 16%;width: 63.0%;left: 0;right: 0;margin: 0 auto;z-index: 0;}
.e26{position: absolute;top: 7%;width: 60.0%;left: 0;right: 0;margin: 0 auto;z-index: 0;}
.q_top{position: relative;left: 0;right: 0;top: 80.3%;width: 36.4%;margin: 10% auto 0 auto;z-index: 0;}


.white_box{position: relative;left: 0;right: 0;top: 87.0%;width: 65.3%;margin: 0 auto 10% auto;z-index: 0;border: solid 11px #000;border-radius: 10px;background: #FFF;}
.q1_t{position: relative;left: 0;right: 0;top: 87.0%;width: 86.0%;margin: 7% auto 7% 4.5%;z-index: 0;}
.e29-e32{
    position: relative;
    left: 0%;
    top: 0;
    width: 100%;
    margin: 4% auto 6% auto;
    right: 0%;
    z-index: 1;
}
.e29-e32 ul{
    margin: 0 auto;
    padding: 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    max-width: 90.9%;
    align-items: center;
}
.e29-e32 li{
    width: 47.9%;
    margin: 0 0 5% 0;
}
.e29-e32 li img{ width:100%;}
.e29-e32 a{
    display: block;
    width: 100%;
    border: solid 6px #000;
    background: #fef8d4;

    border-radius: 10px;
}
.e29-e32 a img{    padding: 14% 33.4%;}
.e29-e32 a:hover{ background:#f05776;}
.e29-e32 a img:hover{filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(229deg) brightness(150%) contrast(150%);}


.q2_t{position: relative;left: 0;right: 0;top: 87.0%;width: 85.3%;margin: 7% auto 7% 4.5%;z-index: 0;}



.re{position: relative;left: 0;right: 0;top: 87.0%;width: 17.5%;margin: -7% auto 8% 17.5%;z-index: 0;}

.q3_t{position: relative;left: 0;right: 0;top: 87.0%;width: 92%;margin: 7% auto 7% 4.5%;z-index: 0;}

.q1{
    position: relative;
    left: 0%;
    top: 0;
    width: 100%;
    margin: 4% auto 6% auto;
    right: 0%;
    z-index: 1;
}
.q1 ul{
    margin: 0 auto;
    padding: 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    max-width: 90.9%;
    align-items: center;
}
.q1 li{
    width: 47.9%;
    margin: 0 0 5% 0;
}
.q1 li img{ width:100%;}
.q1 a{
    display: block;
    width: 100%;
    border: solid 6px #000;
    background: #fef8d4;

    border-radius: 10px;
}

.q1 li:nth-child(1) a img{padding: 14% 15.5%;}
.q1 li:nth-child(2) a img{padding: 14% 28.6%;}
.q1 li:nth-child(3) a img{padding: 14% 22.3%;}
.q1 li:nth-child(4) a img{padding: 14% 17.4%;}

.q1 a:hover{ background:#f05776;}
.q1 a img:hover{filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(229deg) brightness(150%) contrast(150%);}



.e44{position: relative;left: 0;right: 0;top: 87.0%;width: 85.3%;margin: 7% auto 7% 4.5%;z-index: 0;}

.q2{
    position: relative;
    left: 0%;
    top: 0;
    width: 100%;
    margin: 4% auto 6% auto;
    right: 0%;
    z-index: 1;
}
.q2 ul{
    margin: 0 auto;
    padding: 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    max-width: 90.9%;
    align-items: center;
}
.q2 li{
    width: 47.9%;
    margin: 0 0 5% 0;
}
.q2 li img{ width:100%;}
.q2 a{
    display: block;
    width: 100%;
    border: solid 6px #000;
    background: #fef8d4;

    border-radius: 10px;
}

.q2 li:nth-child(1) a img{padding: 14% 12.5%;}
.q2 li:nth-child(2) a img{padding: 14% 6.9%;}
.q2 li:nth-child(3) a img{padding: 14% 7.3%;}
.q2 li:nth-child(4) a img{padding: 14% 21.7%;}

.q2 a:hover{ background:#f05776;}
.q2 a img:hover{filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(229deg) brightness(150%) contrast(150%);}


.e49{position: relative;left: 0;right: 0;top: 87.0%;width: 90.3%;margin: 7% auto 7% 4.5%;z-index: 0;}

.q3{
    position: relative;
    left: 0%;
    top: 0;
    width: 100%;
    margin: 4% auto 6% auto;
    right: 0%;
    z-index: 1;
}
.q3 ul{
    margin: 0 auto;
    padding: 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    max-width: 90.9%;
    align-items: center;
}
.q3 li{
    width: 47.9%;
    margin: 0 0 5% 0;
}
.q3 li img{ width:100%;}
.q3 a{
    display: block;
    width: 100%;
    border: solid 6px #000;
    background: #fef8d4;

    border-radius: 10px;
}

.q3 li:nth-child(1) a img{padding: 14% 25.2%;}
.q3 li:nth-child(2) a img{padding: 14% 24.9%;}
.q3 li:nth-child(3) a img{padding: 14% 23.3%;}
.q3 li:nth-child(4) a img{padding: 14% 21.3%;}

.q3 a:hover{ background:#f05776;}
.q3 a img:hover{filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(229deg) brightness(150%) contrast(150%);}

.e54{position: relative;top: 0;width: 40.1%;left: 0;right: 0;margin: 8% auto 2% auto;z-index: 1;}
.e55{position: relative;top: 0;width: 43.6%;left: 0;right: 0;margin: 0% auto 5% auto;z-index: 1;}
.e56{position: relative;top: 0;width: 64.1%;left: 0;right: 0;margin: 0% auto 15% auto;z-index: 1;}
.e57{position: relative;top: 0;width: 62.0%;left: 0;right: 0;margin: 0% auto 5% auto;z-index: 1;}
.e58{position: relative;top: 0;width: 43.6%;left: 0;right: 0;margin: 0% auto 10% auto;z-index: 1;}
.num{
    margin: -24.5% 28.5% 17% auto;
    position: relative;
    right: 0;
    width: 9%;
    color: #07b53b;
    font-size: 4.0vw;
    font-weight: bold;
    text-align: center;
}

.num2{
	font-family: "din";
	margin: -44.7% 41.5% 17% auto;
	position: relative;
	right: 0;
	width: 21%;
	color: #ffe100;
	font-size: 12.5vw;
	font-weight: bold;
	text-align: center;
	z-index: 2;
}

.addFriend{
    width: 68%;
    margin: -1% auto 10% auto;
}

.popad {
    width: 80%;
}

.btn_push {
    animation:
        bpush 2s ease infinite normal 0s none running
    ;
    -webkit-animation:
        bpush 2s ease infinite normal 0s none running
    ;
    -ms-animation:
        bpush 2s ease infinite normal 0s none running
    ;
}
@keyframes bpush {
    0%, 30%, 60% {
        transform: scale(1.0);
    }
    15%, 45% {
        transform: scale(0.95);
    }
}
@-webkit-keyframes bpush {
    0%, 30%, 60% {
        transform: scale(1.0);
    }
    15%, 45% {
        transform: scale(0.95);
    }
}

.info_send .addFriend { margin: 5% auto 5% auto;     width: 31.2%;}
input{ width:100%;}
.line_btn img,.line_btn input,.buy_btn img
	{
		animation:
			bounce 2s ease infinite normal 0s none running
		;
		-webkit-animation:
			bounce 2s ease infinite normal 0s none running
		;
		-ms-animation:
			bounce 2s ease infinite normal 0s none running
		;
	}
	@keyframes bounce {
		0%, 100%, 20%, 50%, 80% {
		    transform: scale(1.0);
		}
		40% {
		    transform: scale(1.2);
		}
		60% {
		    transform: scale(1.1);
		}
		
	}
	@-webkit-keyframes bounce {
		0%, 100%, 20%, 50%, 80% {
		    transform: scale(1.0);
		}
		40% {
		    transform: scale(1.2);
		}
		60% {
		    transform: scale(1.1);
		}
	}


.reflection.go {
  height: 100%;
  width: 8%;
  position: absolute;
  top: -56%;
  left: -3%;
  background-color: #fff;
  opacity     :0;
  transform: rotate(45deg);
  animation: reflection 2s ease-in-out ;
  -webkit-transform: rotate(45deg);
  -webkit-animation: reflection 2s ease-in-out ;
  -moz-transform: rotate(45deg);
  -moz-animation: reflection 2s ease-in-out ;
  -ms-transform: rotate(45deg);
  -ms-animation: reflection 2s ease-in-out ;
  -o-transform: rotate(45deg);
  -o-animation: reflection 2s ease-in-out ;
}


@keyframes reflection {
  0% { transform: scale(0) rotate(45deg); opacity: 0; }
  80% { transform: scale(0) rotate(45deg); opacity: 0.5; }
  81% { transform: scale(4) rotate(45deg); opacity: 1; }
  100% { transform: scale(50) rotate(45deg); opacity: 0; }
}
@-webkit-keyframes reflection {
  0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
  80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
  81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
  100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}
@-moz-keyframes reflection {
  0% { -moz-transform: scale(0) rotate(45deg); opacity: 0; }
  80% { -moz-transform: scale(0) rotate(45deg); opacity: 0.5; }
  81% { -moz-transform: scale(4) rotate(45deg); opacity: 1; }
  100% { -moz-transform: scale(50) rotate(45deg); opacity: 0; }
}
@-ms-keyframes reflection {
  0% { -ms-transform: scale(0) rotate(45deg); opacity: 0; }
  80% { -ms-transform: scale(0) rotate(45deg); opacity: 0.5; }
  81% { -ms-transform: scale(4) rotate(45deg); opacity: 1; }
  100% { -ms-transform: scale(50) rotate(45deg); opacity: 0; }
}
@-o-keyframes reflection {
  0% { -o-transform: scale(0) rotate(45deg); opacity: 0; }
  80% { -o-transform: scale(0) rotate(45deg); opacity: 0.5; }
  81% { -o-transform: scale(4) rotate(45deg); opacity: 1; }
  100% { -o-transform: scale(50) rotate(45deg); opacity: 0; }
}


@media screen and ( max-width:1200px )
{



}

@media screen and ( max-width:1048px )
{


}


@media screen and ( max-width:768px )
{
	html{ overflow:auto;}
	body{ margin:0px; padding:0px; width:auto; background:none; overflow:hidden;}
.content{
max-width: 100%;
    }


.pc{ display:none;}
.sp{ display:block;}

.mfrom {
    width: 100%;
    /* text-align: center; */
    outline: 0;
    border: #231815 2px solid;
    color: #a6a8a8;
    font-size: 3.4vw;
    margin: 0 auto 5% auto;
    padding: 1.5% 3%;
}


.parallax {
  width: 100%;

	background-position: center top;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment:inherit;
	text-align: center;
}

.parallax.bg-01 {
	background-image: url(../img/s011.jpg);
}
.parallax.bg-02 {
	background-image: url(../img/s013.jpg);
}
.main_animation {
    margin: 0 auto;
	width:100% !important;
	height:auto !important;
}
.main_animation canvas{
	width: 200% !important;
	height:auto !important;
	margin: 0 -50%;
}

.p1{
	background: url(../img/001.jpg) no-repeat;
	background-position: center top;
	background-size: 200% auto;
	position:relative;
	height: auto;
	margin: 0 0 0 0;
	}
.p1:before{
    content: "";
    display: block;
     /* 1:1 */
    padding-top: 160%;
    }

.p1h{
    height:auto;
    padding: 0;
    position: absolute;
    top: 0;
    left: 0;
    right:0;
    width: 100%;
    height: 100%;
    margin:0 auto;
    }
	

.p2{
	background: #fef8d4;
	position:relative;
	height: auto;
	margin: 0 0 0 0;
	}
.p2:before{
    content: "";
    display: block;
     /* 1:1 */
    }

.p2h{
    height:auto;
    padding: 0;
    position: relative;
    top: 0;
    left: 0;
    right:0;
    width: 100%;
    height: 100%;
    margin:0 auto;
    }
	
	
.p3{
	background: #FFF;
	position:relative;
	height: auto;
	margin: 0 0 0 0;
	}
.p3:before{
    content: "";
    display: block;
     /* 1:1 */
    }

.p3h{
    height:auto;
    padding: 0;
    position: relative;
    top: 0;
    left: 0;
    right:0;
    width: 100%;
    height: 100%;
    margin:0 auto;
    }

.p4{
	background: url(../img/001.jpg) no-repeat;
	background-position: center top;
	background-size: 185% auto;
	position:relative;
	height: auto;
	margin: 0 0 0 0;
	}
.p4:before{
    content: "";
    display: block;
     /* 1:1 */
    padding-top: 160%;
    }

.p4h{
    height:auto;
    padding: 0;
    position: absolute;
    top: 0;
    left: 0;
    right:0;
    width: 100%;
    height: 100%;
    margin:0 auto;
    }

.p5{
	background: url(../img/005.jpg) no-repeat;
	background-position: center top;
	background-size: cover;
	position:relative;
	height: auto;
	margin: 0;
	z-index: 2;
	}
.p5:before{
    content: "";
    display: block;
     /* 1:1 */
    }

.p5h{
    height:auto;
    padding: 0;
    position: relative;
    top: 0;
    left: 0;
    right:0;
    width: 100%;
    height: 100%;
    margin:0 auto;
    }
	
.p6{
	background: #FFF;
	position:relative;
	height: auto;
	margin: 0 0 0 0;
	}
.p6:before{
    content: "";
    display: block;
     /* 1:1 */
    }

.p6h{
    height:auto;
    padding: 0;
    position: relative;
    top: 0;
    left: 0;
    right:0;
    width: 100%;
    height: 100%;
    margin:0 auto;
    }
	


.cl{background: #505050;color:#FFF;padding:1% 0;}


.p1 img,.p2 img,.p3 img,.p4 img,.p5 img,.p6 img,.p7 img,.p8 img,.p9 img,.p10 img,.p11 img,.p12 img,.p13 img,.p14 img,.p15 img,.p16 img,.p17 img,.p18 img,.p19 img,.p20 img,.p21 img,.p22 img,.p23 img,.t1 img,.w01 img,.t2 img,.t3 img,.t4 img,.t5 img,.t6 img,.t7 img,.t8 img,.p21 img,.p22 img,.p23 img,.p24 img,.p25 img,.p26 img{ width:100%;}
.addFriend input{ width:100%;}


.form_box1{position: absolute;top: 63%;width: 55.3%;left: 0%;right: 0%;margin: 0% auto 0% auto;z-index: 1;}
.form_box1 input{
    width: 100%;
    height: 0%;
    text-align: center;
    border-radius: 0;
    outline: 0;
    border: #aaa 2px solid;
    color: #666;
    font-size: 2.2vw;
    margin: 0 auto 3% auto;
    padding: 3% 5%;
}

.main_animation{ margin:0 auto;}

.e1{position: absolute;left: 0;right: 0;top: 4%;width: 72.4%;margin: 0 auto;z-index: 1;}
.e2{position: absolute;top: 11.5%;width: 72%;left: 9.4%;margin: 0 auto;z-index: 2;}
.e3{position: absolute;left: 0;right: 0;top: 29%;width: 82%;margin: 0 auto;z-index: 1;}
.e4{position: absolute;top: 9.6%;width: 29%;right: 5%;margin: 0 auto;z-index: 1;}
.e5{position: absolute;top: 8.3%;width: 95%;left: 0;right: 0;margin: 0 auto;z-index: 0;}
.e6{position: absolute;top: 40.5%;width: 98%;left: 0;right: 0;margin: 0 auto;z-index: 0;}

.e7{position: absolute;left: 0;right: 0;top: 73%;width: 95%;margin: 0 auto;z-index: 1;}
.e8{position: absolute;left: 0;right: 0;top: 79%;width: 95%;margin: 0 auto;z-index: 1;}
.e7_f{position: absolute;left: 0;right: 0;top: 70%;width: 95%;margin: 0 auto;z-index: 1;}
.e8_f{position: absolute;left: 0;right: 0;top: 76%;width: 95%;margin: 0 auto;z-index: 1;}

@keyframes rotation{
  0%{ transform:rotate(0);}
  100%{ transform:rotate(360deg); }
}

.e9{position: relative;left: 0%;right: 0%;top: 65.3%;width: 90%;margin: 10% auto 2% auto;z-index: 0;}
.e10{position: relative;left: 2.5%;right: 0%;top: 80.3%;width: 32.35%;margin: 0 auto 0 -7%;z-index: 1;}


.e11-e13{
    position: relative;
    left: 0%;
    top: 0;
    width: 100%;
    margin: -30% 0 6% 10%;
    z-index: 1;
}
.e11-e13 ul{
    margin: 0 auto;
    padding: 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    max-width: 68.1%;
    align-items: center;
}
.e11-e13 li{
    width: 28.9%;
}

.e11-e13 li img{ width:100%;}

.logo{position: absolute;top: 0%;width: 8.3%;right: 17.2%;margin: 0 auto;z-index: 1;}

.e11{position: absolute;top: 10%;width: 44.6%;left: 19.5%;margin: 0 auto;z-index: 1;}
.e12{position: absolute;top: 20.0%;width: 46.05%;left: 20%;margin: 0 auto;z-index: 1;}
.e13{position: absolute;left: 0;right: 0;top: 22.5%;width: 65.7%;margin: 0 auto;z-index: 0;mix-blend-mode: multiply;}
.e14{position: relative;top: 0;width: 62.75%;left: 0;right: 0;margin: -4% 8% 0 auto;z-index: 2;}
.e15{position: relative;top: 58.5%;width: 95%;left: 0;right: 0;margin: -29.9% auto 6% auto;z-index: 0;}
.e16{position: relative;right: 0;left: 0;top: 0;width: 90%;margin: 0% auto 3% auto;z-index: 0;}

.e17{position: relative;top: 0;width: 90%;left: 0;right: 0;margin: 0 auto 5% auto;z-index: 1;}
.e18{position: relative;top: 20.0%;width: 95%;left: 0;right: 0;margin: 0 auto 5% auto;z-index: 1;}
.e19{position: relative;top: 33%;width: 85%;left: 0;right: 0;margin: 0 auto 10% auto;z-index: 2;}

.e20{position: relative;top: 0;width: 94%;left: 0;right: 0;margin: 8% auto 5% auto;z-index: 1;}
.e21{position: relative;top: 0;width: 95%;left: 0;right: 0;margin: 0 auto 8% auto;z-index: 1;}
.e22{position: absolute;top: 20.5%;width: 59.95%;left: 7.8%;margin: 0 auto;z-index: 2;}

.logo2{position: absolute;top: 0%;width: 8.3%;left: 19.0%;margin: 0 auto;z-index: 1;}

.e23{position: absolute;top: 12%;width: 30%;right: 2%;margin: 0 auto;z-index: 1;}
.e24{position: absolute;left: -24%;right: 0;top: 35%;width: 59.8%;margin: 0 auto;z-index: 1;}
.e25{position: absolute;top: 17%;width: 95%;left: 0;right: 0;margin: 0 auto;z-index: 0;}
.e26{position: absolute;top: 5.5%;width: 90%;left: 0;right: 0;margin: 0 auto;z-index: 0;}
.q_top{position: relative;left: 0;right: 0;top: 80.3%;width: 90%;margin: 30% auto 0 auto;z-index: 0;}


.white_box{position: relative;left: 0;right: 0;top: 87.0%;width: 97%;margin: 0 auto 40% auto;z-index: 0;border: solid 6px #000;border-radius: 10px;background: #FFF;}
.e28{position: relative;left: 0;right: 0;top: 87.0%;width: 86.0%;margin: 7% auto 7% 4.5%;z-index: 0;}
.e29-e32{
    position: relative;
    left: 0%;
    top: 0;
    width: 100%;
    margin: 4% auto 6% auto;
    right: 0%;
    z-index: 1;
}
.e29-e32 ul{
    margin: 0 auto;
    padding: 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    max-width: 90.9%;
    align-items: center;
}
.e29-e32 li{
    width: 47.9%;
    margin: 0 0 5% 0;
}
.e29-e32 li img{ width:100%;}
.e29-e32 a{
    display: block;
    width: 100%;
    border: solid 4px #000;
    background: #fef8d4;
    border-radius: 10px;
}
.e29-e32 a img{    padding: 14% 33.4%;}
.e29-e32 a:hover{ background:#f05776;}
.e29-e32 a img:hover{filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(229deg) brightness(150%) contrast(150%);}


.q2_t{position: relative;left: 0;right: 0;top: 87.0%;width: 85.3%;margin: 7% auto 7% 4.5%;z-index: 0;}



.re{position: relative;left: 0;right: 0;top: 87.0%;width: 37.5%;margin: -34% auto 28% 3.5%;z-index: 0;}

.q3_t{position: relative;left: 0;right: 0;top: 87.0%;width: 89.4%;margin: 7% auto 7% 4.5%;z-index: 0;}

.q1{
    position: relative;
    left: 0%;
    top: 0;
    width: 100%;
    margin: 4% auto 6% auto;
    right: 0%;
    z-index: 1;
}
.q1 ul{
    margin: 0 auto;
    padding: 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    max-width: 90.9%;
    align-items: center;
}
.q1 li{
    width: 47.9%;
    margin: 0 0 5% 0;
}
.q1 li img{ width:100%;}
.q1 a{
    display: block;
    width: 100%;
    border: solid 4px #000;
    background: #fef8d4;

    border-radius: 10px;
}

.q1 li:nth-child(1) a img{padding: 14% 15.5%;}
.q1 li:nth-child(2) a img{padding: 14% 28.6%;}
.q1 li:nth-child(3) a img{padding: 14% 22.3%;}
.q1 li:nth-child(4) a img{padding: 14% 17.4%;}

.q1 a:hover{ background:#f05776;}
.q1 a img:hover{filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(229deg) brightness(150%) contrast(150%);}



.e44{position: relative;left: 0;right: 0;top: 87.0%;width: 85.3%;margin: 7% auto 7% 4.5%;z-index: 0;}

.q2{
    position: relative;
    left: 0%;
    top: 0;
    width: 100%;
    margin: 4% auto 6% auto;
    right: 0%;
    z-index: 1;
}
.q2 ul{
    margin: 0 auto;
    padding: 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    max-width: 90.9%;
    align-items: center;
}
.q2 li{
    width: 47.9%;
    margin: 0 0 5% 0;
}
.q2 li img{ width:100%;}
.q2 a{
    display: block;
    width: 100%;
    border: solid 4px #000;
    background: #fef8d4;

    border-radius: 10px;
}

.q2 li:nth-child(1) a img{padding: 14% 12.5%;}
.q2 li:nth-child(2) a img{padding: 14% 6.9%;}
.q2 li:nth-child(3) a img{padding: 14% 7.3%;}
.q2 li:nth-child(4) a img{padding: 14% 21.7%;}

.q2 a:hover{ background:#f05776;}
.q2 a img:hover{filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(229deg) brightness(150%) contrast(150%);}


.e49{position: relative;left: 0;right: 0;top: 87.0%;width: 90.3%;margin: 7% auto 7% 4.5%;z-index: 0;}

.q3{
    position: relative;
    left: 0%;
    top: 0;
    width: 100%;
    margin: 4% auto 6% auto;
    right: 0%;
    z-index: 1;
}
.q3 ul{
    margin: 0 auto;
    padding: 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    max-width: 90.9%;
    align-items: center;
}
.q3 li{
    width: 47.9%;
    margin: 0 0 5% 0;
}
.q3 li img{ width:100%;}
.q3 a{
    display: block;
    width: 100%;
    border: solid 4px #000;
    background: #fef8d4;

    border-radius: 10px;
}

.q3 li:nth-child(1) a img{padding: 14% 25.2%;}
.q3 li:nth-child(2) a img{padding: 14% 24.9%;}
.q3 li:nth-child(3) a img{padding: 14% 23.3%;}
.q3 li:nth-child(4) a img{padding: 14% 21.3%;}

.q3 a:hover{ background:#f05776;}
.q3 a img:hover{filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(229deg) brightness(150%) contrast(150%);}

.e54{position: relative;top: 0;width: 90%;left: 0;right: 0;margin: 8% auto 2% auto;z-index: 1;}
.e55{position: relative;top: 0;width: 90%;left: 0;right: 0;margin: 0% auto 5% auto;z-index: 1;}
.e56{position: relative;top: 0;width: 90%;left: 0;right: 0;margin: 0% auto 15% auto;z-index: 1;}
.e57{position: relative;top: 0;width: 95%;left: 0;right: 0;margin: 0% auto 5% auto;z-index: 1;}
.e58{position: relative;top: 0;width: 90%;left: 0;right: 0;margin: 0% auto 10% auto;z-index: 1;}
.num{
    margin: -35.5% 16.5% 23% auto;
    position: relative;
    right: 0;
    width: 15%;
    color: #07b53b;
    font-size: 9vw;
    font-weight: bold;
    text-align: center;
}


.num2{
	font-family: "din";
	margin: -56.3% 37.5% 17% auto;
	position: relative;
	right: 0;
	width: 28%;
	color: #ffe100;
	font-size: 23.5vw;
	font-weight: bold;
	text-align: center;
	z-index: 2;
}

.popad {
    width: 60%;
    margin: 0 auto;
    display:block;
}


.iPhone .num2{margin: -53.3% 37.5% 17% auto;}

}

@media screen and ( max-width:600px )
{


}

@media screen and ( max-width:425px )
{

}


@media screen and ( max-width:393px )
{
}


@media screen and ( max-width:375px )
{
	

}

@media screen and ( max-width:360px )
{


}

@media screen and ( max-width:320px )
{


}




  .loop_css2 {
    position: relative;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row nowrap;
    flex-flow: row nowrap;
    width: 100vw;
    overflow: hidden;
	margin-bottom:8%;
  }

  .loop_css2 ul {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row nowrap;
    flex-flow: row nowrap;
    width: 100%;
    margin: 0 0px 0 0px;
    padding: 0;
  }

  .loop_css2 li {
    display: inline-block;
    width: calc(100vw / 2);
    min-width: 150px;
    margin: 0 10px 0 0;
    list-style: none;
    text-align: center;
  }

  .loop_css2 li a {
    display: block;
  }

  .loop_css2 li img {
    display: block;
    width: 100%;
    height: auto;
  }

  .loop_css2 li a:hover {
    opacity: .7;
  }

  .loop_css2 ul:first-child {
    -webkit-animation: loop 50s -25s linear infinite;
    animation: loop 50s -25s linear infinite;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform;
  }

  .loop_css2 ul + ul {
    -webkit-animation: loop2 50s  linear infinite;
    animation: loop2 50s linear infinite;
  }
  

  @-webkit-keyframes loop {
    0% {
      -webkit-transform: translateX(100%);
      -ms-transform: translateX(100%);
      transform: translateX(100%);
    }
    to {
      -webkit-transform: translateX(-100%);
      -ms-transform: translateX(-100%);
      transform: translateX(-100%);
    }
  }

  @keyframes loop {
    0% {
      -webkit-transform: translateX(100%);
      -ms-transform: translateX(100%);
      transform: translateX(100%);
    }
    to {
      -webkit-transform: translateX(-100%);
      -ms-transform: translateX(-100%);
      transform: translateX(-100%);
    }
  }

  @-webkit-keyframes loop2 {
    0% {
      -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
      transform: translateX(0);
    }
    to {
      -webkit-transform: translateX(-200%);
      -ms-transform: translateX(-200%);
      transform: translateX(-200%);
    }
  }

  @keyframes loop2 {
    0% {
      -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
      transform: translateX(0);
    }
    to {
      -webkit-transform: translateX(-200%);
      -ms-transform: translateX(-200%);
      transform: translateX(-200%);
    }
  }
  
@media screen and ( max-width:768px )
{
	  .loop_css2 ul {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row nowrap;
    flex-flow: row nowrap;
    width: 100%;
    margin: 0 -55px 0 0px;
    padding: 0;
  }
}