/*
Theme Name: ORIGINAL
*/


* {
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}


html {
font-size: 100%;
overflow-y: scroll;
-webkit-font-smoothing: antialiased;
text-rendering:optimizeLegibility;
}


ul, li{
list-style:none;
}


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



::selection {
background-color: #000;
color:#fff;
}



a{
text-decoration:none;
color:#000;
}



.text_border{
text-decoration:underline;
}


.font_bold{
font-weight:bold;
}


.font12{
font-size:12pt;
}


.font13{
font-size:13pt;
}


.font14{
font-size:14pt;
}

.font15{
font-size:15pt;
}

.font16{
font-size:16pt;
}

.font17{
font-size:17pt;
}

.font18{
font-size:18pt;
}

.font19{
font-size:19pt;
}

.font20{
font-size:20pt;
}

p{
font-size:10pt;
}


.clear{
clear: both;
}





body {
	color:#000;
	line-height: 160%;
	font-family: "Gothic MB101 Bold", sans-serif;
	
	background-color:#e5e5e5;
	background-image:url(images/bg.png);
	background-size: contain;
	background-position: center;
}





/* 共通ページ */


#menu_scroll{
position:fixed;
top:-100px;
z-index:9999;
background:#fff;
width:100%;
-moz-box-shadow: 3px 3px 4px 3px #ccc;
-webkit-box-shadow: 3px 3px 4px 3px #ccc;
box-shadow: 0 0 14px rgba(0,0,0,.2);
-webkit-transition: 0.4s cubic-bezier(0.78, .18, .34, .98);
-moz-transition: 0.4s cubic-bezier(0.78, .18, .34, .98);
-ms-transition: 0.4s cubic-bezier(0.78, .18, .34, .98);
-o-transition: 0.4s cubic-bezier(0.78, .18, .34, .98);
transition: 0.4s cubic-bezier(0.78, .18, .34, .98);
}

#menu_scroll.active{
top:0px;
-webkit-transition: 0.4s cubic-bezier(0.78, .18, .34, .98);
-moz-transition: 0.4s cubic-bezier(0.78, .18, .34, .98);
-ms-transition: 0.4s cubic-bezier(0.78, .18, .34, .98);
-o-transition: 0.4s cubic-bezier(0.78, .18, .34, .98);
transition: 0.4s cubic-bezier(0.78, .18, .34, .98);
}




.inner{
	max-width: 1280px;
position: relative;
overflow: hidden;
margin:0 auto;
padding: 0px 120px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}


.wrap{
	display: -ms-flexbox;
	display: flex;
	display: -webkit-flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
}





/* TOPページ */


#heaader{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 999;
	background:#fff;
	padding:20px 0;
}

.heaader_inner{
	padding:0 30px;
	max-width:1280px;
	margin:0 auto;
	overflow:hidden;
}


.logo{
	float:left;
}

.logo a{
	width:150px;
	display:block;
}

.menu{
	float:right;
}



.menu ul li{
	display:inline-block;
	margin-left:50px;
}


.menu ul li a{
	font-weight:bold;
	font-size:13pt;
	font-family: din-2014, sans-serif;
}


.menu ul li.sns_icon a{
	height:22px;
	display:inline-block;
	vertical-align: sub;
}

.menu ul li.sns_icon a img{
	width:auto;
	height:100%;
}



.menu ul li.sns_icon a{
	margin-left:20px;
}

.menu ul li.sns_icon a:first-child{
	margin-left:0px;
}





	

#footer{
	margin-top:120px;
	margin-bottom:50px;
}




.fonnter_sec{
	background:rgba(255,255,255,.8);
	text-align:center;
	padding-bottom:30px;
}


.footer_logo {
	margin-top:200px;
	display:inline-block;
}

.footer_logo a{
	display:block;
	width:250px;
}



.icon_sns {
	margin-top:30px;
}



.icon_sns ul li{
	display:inline-block;
	margin:0 12px;
	height:22px;
}


.icon_sns ul li img{
	width:auto;
	height:100%;
}





.footer_copy{
	padding:0 30px;
	margin-top:30px;
}

.footer_copy p{
	font-weight:bold;
	font-family: din-2014, sans-serif;
}


.footer_menu {
	margin-top:20px;
}

.footer_menu ul li{
	display:inline-block;
	padding:0 10px;
}

.footer_menu ul li a{
	font-size:10pt;
	font-family: YuGothic, 游ゴシック, sans-serif;
}





#sp_header{
display:none;
}



.loading {
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	bottom: 0;
	z-index: 999999;
	opacity: 1;
	background: #e5e5e5;
}


.loader-inner{
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -50px;
	margin-left: -25px;
}


@-webkit-keyframes ball-scale-ripple {
	0% {
	-webkit-transform: scale(0.1);
	transform: scale(0.1);
opacity: 1; }
70% {
	-webkit-transform: scale(1);
	transform: scale(1);
opacity: 0.7; }
100% {
opacity: 0.0; } }

@keyframes ball-scale-ripple {
	0% {
	-webkit-transform: scale(0.1);
	transform: scale(0.1);
opacity: 1; }
70% {
	-webkit-transform: scale(1);
	transform: scale(1);
opacity: 0.7; }
100% {
opacity: 0.0; } }

.ball-scale-ripple > div {
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	height: 50px;
	width: 50px;
	border-radius: 100%;
	border: 2px solid #000;
	-webkit-animation: ball-scale-ripple 1s 0s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8);
animation: ball-scale-ripple 1s 0s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8);

}




.top_section{
	margin-top:150px;
	position: relative;
	z-index: 99;
}





























.main_title{
	opacity:0;
}

.active .main_title{
	opacity:1;
	-webkit-transition: .8s cubic-bezier(0.78, .18, .34, .98) .2s;
	-moz-transition: .8s cubic-bezier(0.78, .18, .34, .98) .2s;
	-ms-transition: .8s cubic-bezier(0.78, .18, .34, .98) .2s;
	-o-transition: .8s cubic-bezier(0.78, .18, .34, .98) .2s;
	transition: .8s cubic-bezier(0.78, .18, .34, .98) .2s;
}

.main_title p{
	font-family: din-2014, sans-serif;
	font-size:18pt;
	font-weight:bold;
}



.main_title p span{
	position:relative;
}



.main_title p span:after{
	content:"";
	background:#fff;
	width:0%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	z-index:-99;
}




.active .main_title p span:after {
	width:100%;
	-webkit-transition: .8s cubic-bezier(0.78, .18, .34, .98) .6s;
	-moz-transition: .8s cubic-bezier(0.78, .18, .34, .98) .6s;
	-ms-transition: .8s cubic-bezier(0.78, .18, .34, .98) .6s;
	-o-transition: .8s cubic-bezier(0.78, .18, .34, .98) .6s;
	transition: .8s cubic-bezier(0.78, .18, .34, .98) .6s;
}

.main_title p span:before{
	content:"";
	background:#000;
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	z-index:-99;
}


.active .main_title p span:before {
	width:100%;
	-webkit-transition: .8s cubic-bezier(0.78, .18, .34, .98) .4s;
	-moz-transition: .8s cubic-bezier(0.78, .18, .34, .98) .4s;
	-ms-transition: .8s cubic-bezier(0.78, .18, .34, .98) .4s;
	-o-transition: .8s cubic-bezier(0.78, .18, .34, .98) .4s;
	transition: .8s cubic-bezier(0.78, .18, .34, .98) .4s;
}






#top_section01 {
	margin-top: 200px;
}




#top_section02{
	opacity:0;
}



#top_section02.active{
	opacity:1;
	-webkit-transition: .8s cubic-bezier(0.78, .18, .34, .98) .2s;
	-moz-transition: .8s cubic-bezier(0.78, .18, .34, .98) .2s;
	-ms-transition: .8s cubic-bezier(0.78, .18, .34, .98) .2s;
	-o-transition: .8s cubic-bezier(0.78, .18, .34, .98) .2s;
	transition: .8s cubic-bezier(0.78, .18, .34, .98) .2s;
}

.philo_index {
	overflow:hidden;
}



.philo_index .main_title{
	float:left;
}

.philo_index .philo_text{
	float:left;
	margin-left:80px;
}

.philo_index .philo_text p{
	font-feature-settings: "palt";
	font-size:20pt;
	font-weight:bold;
	margin-bottom:10px;
	position:relative;
}


.philo_index .philo_text p{
	opacity:0;
}

.active .philo_index .philo_text p{
	opacity:1;
}

.philo_index .philo_text p span{
	position:relative;
}







.philo_index .philo_text p span:after{
	content:"";
	background:#fff;
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	top:0;
	z-index:-99;
}



.philo_index .philo_text p span:before{
	content:"";
	background:#000;
	width:100%;
	height:100%;
	position:absolute;
	right:0;
	top:0;
	z-index:99;
}


.active .philo_index .philo_text p:nth-child(1) span:before{
	width:0%;
	-webkit-transition: .8s cubic-bezier(0.78, .18, .34, .98) .8s;
	-moz-transition: .8s cubic-bezier(0.78, .18, .34, .98) .8s;
	-ms-transition: .8s cubic-bezier(0.78, .18, .34, .98) .8s;
	-o-transition: .8s cubic-bezier(0.78, .18, .34, .98) .8s;
	transition: .8s cubic-bezier(0.78, .18, .34, .98) .8s;
}


.active .philo_index .philo_text p:nth-child(2) span:before{
	width:0%;
	-webkit-transition: .8s cubic-bezier(0.78, .18, .34, .98) .9s;
	-moz-transition: .8s cubic-bezier(0.78, .18, .34, .98) .9s;
	-ms-transition: .8s cubic-bezier(0.78, .18, .34, .98) .9s;
	-o-transition: .8s cubic-bezier(0.78, .18, .34, .98) .9s;
	transition: .8s cubic-bezier(0.78, .18, .34, .98) .9s;
}

.active .philo_index .philo_text p:nth-child(3) span:before{
	width:0%;
	-webkit-transition: .8s cubic-bezier(0.78, .18, .34, .98) 1s;
	-moz-transition: .8s cubic-bezier(0.78, .18, .34, .98) 1s;
	-ms-transition: .8s cubic-bezier(0.78, .18, .34, .98) 1s;
	-o-transition: .8s cubic-bezier(0.78, .18, .34, .98) 1s;
	transition: .8s cubic-bezier(0.78, .18, .34, .98) 1s;
}

.active .philo_index .philo_text p:nth-child(4) span:before{
	width:0%;
	-webkit-transition: .8s cubic-bezier(0.78, .18, .34, .98) 1.1s;
	-moz-transition: .8s cubic-bezier(0.78, .18, .34, .98) 1.1s;
	-ms-transition: .8s cubic-bezier(0.78, .18, .34, .98) 1.1s;
	-o-transition: .8s cubic-bezier(0.78, .18, .34, .98) 1.1s;
	transition: .8s cubic-bezier(0.78, .18, .34, .98) 1.1s;
}

.active .philo_index .philo_text p:nth-child(5) span:before{
	width:0%;
	-webkit-transition: .8s cubic-bezier(0.78, .18, .34, .98) 1.2s;
	-moz-transition: .8s cubic-bezier(0.78, .18, .34, .98) 1.2s;
	-ms-transition: .8s cubic-bezier(0.78, .18, .34, .98) 1.2s;
	-o-transition: .8s cubic-bezier(0.78, .18, .34, .98) 1.2s;
	transition: .8s cubic-bezier(0.78, .18, .34, .98) 1.2s;
}

.active .philo_index .philo_text p:nth-child(6) span:before{
	width:0%;
	-webkit-transition: .8s cubic-bezier(0.78, .18, .34, .98) 1.3s;
	-moz-transition: .8s cubic-bezier(0.78, .18, .34, .98) 1.3s;
	-ms-transition: .8s cubic-bezier(0.78, .18, .34, .98) 1.3s;
	-o-transition: .8s cubic-bezier(0.78, .18, .34, .98) 1.3s;
	transition: .8s cubic-bezier(0.78, .18, .34, .98) 1.3s;
}


.active .philo_index .philo_text p:nth-child(6) span:before{
	width:0%;
	-webkit-transition: .8s cubic-bezier(0.78, .18, .34, .98) 1.4s;
	-moz-transition: .8s cubic-bezier(0.78, .18, .34, .98) 1.4s;
	-ms-transition: .8s cubic-bezier(0.78, .18, .34, .98) 1.4s;
	-o-transition: .8s cubic-bezier(0.78, .18, .34, .98) 1.4s;
	transition: .8s cubic-bezier(0.78, .18, .34, .98) 1.4s;
}

.active .philo_index .philo_text p:nth-child(7) span:before{
	width:0%;
	-webkit-transition: .8s cubic-bezier(0.78, .18, .34, .98) 1.5s;
	-moz-transition: .8s cubic-bezier(0.78, .18, .34, .98) 1.5s;
	-ms-transition: .8s cubic-bezier(0.78, .18, .34, .98) 1.5s;
	-o-transition: .8s cubic-bezier(0.78, .18, .34, .98) 1.5s;
	transition: .8s cubic-bezier(0.78, .18, .34, .98) 1.5s;
}

.active .philo_index .philo_text p:nth-child(8) span:before{
	width:0%;
	-webkit-transition: .8s cubic-bezier(0.78, .18, .34, .98) 1.6s;
	-moz-transition: .8s cubic-bezier(0.78, .18, .34, .98) 1.6s;
	-ms-transition: .8s cubic-bezier(0.78, .18, .34, .98) 1.6s;
	-o-transition: .8s cubic-bezier(0.78, .18, .34, .98) 1.6s;
	transition: .8s cubic-bezier(0.78, .18, .34, .98) 1.6s;
}

.active .philo_index .philo_text p:nth-child(9) span:before{
	width:0%;
	-webkit-transition: .8s cubic-bezier(0.78, .18, .34, .98) 1.7s;
	-moz-transition: .8s cubic-bezier(0.78, .18, .34, .98) 1.7s;
	-ms-transition: .8s cubic-bezier(0.78, .18, .34, .98) 1.7s;
	-o-transition: .8s cubic-bezier(0.78, .18, .34, .98) 1.7s;
	transition: .8s cubic-bezier(0.78, .18, .34, .98) 1.7s;
}

.active .philo_index .philo_text p:nth-child(10) span:before{
	width:0%;
	-webkit-transition: .8s cubic-bezier(0.78, .18, .34, .98) 1.8s;
	-moz-transition: .8s cubic-bezier(0.78, .18, .34, .98) 1.8s;
	-ms-transition: .8s cubic-bezier(0.78, .18, .34, .98) 1.8s;
	-o-transition: .8s cubic-bezier(0.78, .18, .34, .98) 1.8s;
	transition: .8s cubic-bezier(0.78, .18, .34, .98) 1.8s;
}

.active .philo_index .philo_text p:nth-child(11) span:before{
	width:0%;
	-webkit-transition: .8s cubic-bezier(0.78, .18, .34, .98) 1.9s;
	-moz-transition: .8s cubic-bezier(0.78, .18, .34, .98) 1.9s;
	-ms-transition: .8s cubic-bezier(0.78, .18, .34, .98) 1.9s;
	-o-transition: .8s cubic-bezier(0.78, .18, .34, .98) 1.9s;
	transition: .8s cubic-bezier(0.78, .18, .34, .98) 1.9s;
}

.active .philo_index .philo_text p:nth-child(12) span:before{
	width:0%;
	-webkit-transition: .8s cubic-bezier(0.78, .18, .34, .98) 2s;
	-moz-transition: .8s cubic-bezier(0.78, .18, .34, .98) 2s;
	-ms-transition: .8s cubic-bezier(0.78, .18, .34, .98) 2s;
	-o-transition: .8s cubic-bezier(0.78, .18, .34, .98) 2s;
	transition: .8s cubic-bezier(0.78, .18, .34, .98) 2s;
}


.active .philo_index .philo_text p:nth-child(13) span:before{
	width:0%;
	-webkit-transition: .8s cubic-bezier(0.78, .18, .34, .98) 2.1s;
	-moz-transition: .8s cubic-bezier(0.78, .18, .34, .98) 2.1s;
	-ms-transition: .8s cubic-bezier(0.78, .18, .34, .98) 2.1s;
	-o-transition: .8s cubic-bezier(0.78, .18, .34, .98) 2.1s;
	transition: .8s cubic-bezier(0.78, .18, .34, .98) 2.1s;
}


.active .philo_index .philo_text p:nth-child(14) span:before{
	width:0%;
	-webkit-transition: .8s cubic-bezier(0.78, .18, .34, .98) 2.2s;
	-moz-transition: .8s cubic-bezier(0.78, .18, .34, .98) 2.2s;
	-ms-transition: .8s cubic-bezier(0.78, .18, .34, .98) 2.2s;
	-o-transition: .8s cubic-bezier(0.78, .18, .34, .98) 2.2s;
	transition: .8s cubic-bezier(0.78, .18, .34, .98) 2.2s;
}

.active .philo_index .philo_text p:nth-child(15) span:before{
	width:0%;
	-webkit-transition: .8s cubic-bezier(0.78, .18, .34, .98) 2.3s;
	-moz-transition: .8s cubic-bezier(0.78, .18, .34, .98) 2.3s;
	-ms-transition: .8s cubic-bezier(0.78, .18, .34, .98) 2.3s;
	-o-transition: .8s cubic-bezier(0.78, .18, .34, .98) 2.3s;
	transition: .8s cubic-bezier(0.78, .18, .34, .98) 2.3s;
}





















.main_copy{
	padding: 150px 0;
}



.main_copy h4{
	text-align:center;
	font-size: 4.8vw;
	line-height: 120%;
}



.main_copy h4 span{
	position:relative;
}

.main_copy h4 span:after{
	content:"";
	background:#fff;
	width:0%;
	height: 100%;
	position:absolute;
	left: -15px;
	top:0;
	z-index:-99;
}


.open .main_copy h4 span:after{
	width:100%;
	-webkit-transition: .8s cubic-bezier(0.78, .18, .34, .98) .6s;
	-moz-transition: .8s cubic-bezier(0.78, .18, .34, .98) .6s;
	-ms-transition: .8s cubic-bezier(0.78, .18, .34, .98) .6s;
	-o-transition: .8s cubic-bezier(0.78, .18, .34, .98) .6s;
	transition: .8s cubic-bezier(0.78, .18, .34, .98) .6s;
}


.main_copy h4 span:before{
	content:"";
	background:#000;
	width:100%;
	height: 100%;
	position:absolute;
	right:0;
	top:0;
	z-index:-99;
}

.open .main_copy h4 span:before{
	width:0%;
	-webkit-transition: .8s cubic-bezier(0.78, .18, .34, .98) .4s;
	-moz-transition: .8s cubic-bezier(0.78, .18, .34, .98) .4s;
	-ms-transition: .8s cubic-bezier(0.78, .18, .34, .98) .4s;
	-o-transition: .8s cubic-bezier(0.78, .18, .34, .98) .4s;
	transition: .8s cubic-bezier(0.78, .18, .34, .98) .4s;
}



.product_index{
	margin-top:40px;
	display: flex;
	justify-content: space-between;
}



.product_box{
	background:rgba(255,255,255,.8);
	width:48%;
	padding:35px;
	display: inline-block;
	position: relative;
	opacity:0;
}


.product_box:after{
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	background: #000;
	width: 100%;
	height: 100%;
	z-index: 99;
}



.product_box:first-child.active:after{
	width: 0%;
	-webkit-transition: .8s cubic-bezier(0.78, .18, .34, .98) .6s;
	-moz-transition: .8s cubic-bezier(0.78, .18, .34, .98) .6s;
	-ms-transition: .8s cubic-bezier(0.78, .18, .34, .98) .6s;
	-o-transition: .8s cubic-bezier(0.78, .18, .34, .98) .6s;
	transition: .8s cubic-bezier(0.78, .18, .34, .98) .6s;
}


.product_box:last-child.active:after{
	width: 0%;
	-webkit-transition: .8s cubic-bezier(0.78, .18, .34, .98) 1s;
	-moz-transition: .8s cubic-bezier(0.78, .18, .34, .98) 1s;
	-ms-transition: .8s cubic-bezier(0.78, .18, .34, .98) 1s;
	-o-transition: .8s cubic-bezier(0.78, .18, .34, .98) 1s;
	transition: .8s cubic-bezier(0.78, .18, .34, .98) 1s;
}





.active .product_box{
	opacity:1;
	-webkit-transition: .8s cubic-bezier(0.78, .18, .34, .98) .4s;
	-moz-transition: .8s cubic-bezier(0.78, .18, .34, .98) .4s;
	-ms-transition: .8s cubic-bezier(0.78, .18, .34, .98) .4s;
	-o-transition: .8s cubic-bezier(0.78, .18, .34, .98) .4s;
	transition: .8s cubic-bezier(0.78, .18, .34, .98) .4s;
}



.product_top{
	position:relative;
	display: -ms-flexbox;
	display: flex;
	display: -webkit-flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
}



.product_img{
	width:70%;
}


.product_img{
	display:inline-block;
	width:70%;
}



.product_box:first-child .product_img{
	animation:buruburu 10s infinite ease alternate ;
}

@keyframes buruburu {
0% {transform:translate(0, 0) rotate(0deg);}

1% {transform:translate(0, 0) rotate(0deg);}
2% {transform:translate(0, 0) rotate(-3deg);}
3% {transform:translate(0, -1px) rotate(0deg);}
4% {transform:translate(0, -1px) rotate(3deg);}

5% {transform:translate(0px, 0) rotate(0deg);}

21% {transform:translate(0, 0) rotate(0deg);}
22% {transform:translate(0, 0) rotate(-3deg);}
23% {transform:translate(0, -1px) rotate(0deg);}
24% {transform:translate(0, -1px) rotate(3deg);}

25% {transform:translate(0px, 0) rotate(0deg);}

41% {transform:translate(0, 0) rotate(0deg);}
42% {transform:translate(0, 0) rotate(-3deg);}
43% {transform:translate(0, -1px) rotate(0deg);}
44% {transform:translate(0, -1px) rotate(3deg);}

45% {transform:translate(0px, 0) rotate(0deg);}

61% {transform:translate(0, 0) rotate(0deg);}
62% {transform:translate(0, 0) rotate(-3deg);}
63% {transform:translate(0, -1px) rotate(0deg);}
64% {transform:translate(0, -1px) rotate(3deg);}

65% {transform:translate(0px, 0) rotate(0deg);}

81% {transform:translate(0, 0) rotate(0deg);}
82% {transform:translate(0, 0) rotate(-3deg);}
83% {transform:translate(0, -1px) rotate(0deg);}
84% {transform:translate(0, -1px) rotate(3deg);}


85% {transform:translate(0px, 0) rotate(0deg);}

100% {transform:translate(0, 0) rotate(0deg);}
}



.product_box:last-child .product_img{
	animation:ageage 10s infinite ease alternate ;
}

@keyframes ageage {
0% {transform:translate(0px, 0px) rotate(0deg);}

11% {transform:translate(0px, 0px) rotate(0deg);}
12% {transform:translate(0px, 6px) rotate(0deg);}
13% {transform:translate(0px, -4px) rotate(0deg);}
14% {transform:translate(0px, 6px) rotate(0deg);}

15% {transform:translate(0, 0) rotate(0deg);}

31% {transform:translate(0px, 0px) rotate(0deg);}
32% {transform:translate(0px, 6px) rotate(0deg);}
33% {transform:translate(0px, -4px) rotate(0deg);}
34% {transform:translate(0px, 6px) rotate(0deg);}

35% {transform:translate(0, 0) rotate(0deg);}

51% {transform:translate(0px, 0px) rotate(0deg);}
52% {transform:translate(0px, 6px) rotate(0deg);}
53% {transform:translate(0px, -4px) rotate(0deg);}
54% {transform:translate(0px, 6px) rotate(0deg);}

55% {transform:translate(0, 0) rotate(0deg);}

71% {transform:translate(0px, 0px) rotate(0deg);}
72% {transform:translate(0px, 6px) rotate(0deg);}
73% {transform:translate(0px, -4px) rotate(0deg);}
74% {transform:translate(0px, 6px) rotate(0deg);}

75% {transform:translate(0, 0) rotate(0deg);}

91% {transform:translate(0px, 0px) rotate(0deg);}
92% {transform:translate(0px, 6px) rotate(0deg);}
93% {transform:translate(0px, -4px) rotate(0deg);}
94% {transform:translate(0px, 6px) rotate(0deg);}

95% {transform:translate(0, 0) rotate(0deg);}

100% {transform:translate(0, 0) rotate(0deg);}

}



.product_note{
	display:inline-block;
	width:20%;
	margin-left:10%;
}

.product_copy{
	width:52%;
	position:absolute;
	bottom:0;
}


.product_detail{
	margin-top:30px;
}




.product_detail .copy p{
	font-weight:bold;
	position:relative;
	color:#fff;
	font-size:12pt;
}



.product_detail .copy p span{
position: relative;
	z-index: 99;
}

.product_detail .copy p span:after{
	content:"";
	background:#000;
	width:100%;
	height: 100%;
	position:absolute;
	left:0;
	top:0;
	z-index:-9;
}



.product_box .product_detail .copy p span:before{
	content:"";
	background:#000;
	width:100%;
	height: 100%;
	position:absolute;
	right:0;
	top:0;
}


.product_box:first-child.active .product_detail .copy p span:before{
	width:0%;
	-webkit-transition: .8s cubic-bezier(0.78, .18, .34, .98) 1.2s;
	-moz-transition: .8s cubic-bezier(0.78, .18, .34, .98) 1.2s;
	-ms-transition: .8s cubic-bezier(0.78, .18, .34, .98) 1.2s;
	-o-transition: .8s cubic-bezier(0.78, .18, .34, .98) 1.2s;
	transition: .8s cubic-bezier(0.78, .18, .34, .98) 1.2s;
}




.product_box:last-child.active .product_detail .copy p span:before{
	width:0%;
	-webkit-transition: .8s cubic-bezier(0.78, .18, .34, .98) 1.6s;
	-moz-transition: .8s cubic-bezier(0.78, .18, .34, .98) 1.6s;
	-ms-transition: .8s cubic-bezier(0.78, .18, .34, .98) 1.6s;
	-o-transition: .8s cubic-bezier(0.78, .18, .34, .98) 1.6s;
	transition: .8s cubic-bezier(0.78, .18, .34, .98) 1.6s;
}





.product_detail .price p{
	font-weight:bold;
	font-family: din-2014, sans-serif;
}

.product_detail .price p .t01{
	font-size:13pt;
}

.product_detail .price p .t02{
	font-size:18pt;
}

.product_detail .price p .t03{
	font-size:13pt;
}

.product_detail .price p .t04{
	font-size:13pt;
}

.product_detail .note p{
	line-height:150%;
	font-weight:bold;
	font-size:12pt;
}





.product_main_img{
	margin-top:20px;
}


.product_bottom{
	position:relative;
}

.product_copy02{
	width:52%;
	margin-top:20px;
}


.product_sub_img{
	width:46%;
	top:-50px;
	right:0;
	position:absolute;
}




.product_button {
	position:relative;
	z-index:99;
	margin-top:30px;
	width:100%;
}


.product_button a{
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	font-size:16pt;
	display:block;
	padding: 10px 6px;
	text-align:center;
	font-weight:bold;
	background:#000;
	color:#fff;
	border:2px solid #000;
	-webkit-transition: 0.4s cubic-bezier(0.78, .18, .34, .98);
	-moz-transition: 0.4s cubic-bezier(0.78, .18, .34, .98);
	-ms-transition: 0.4s cubic-bezier(0.78, .18, .34, .98);
	-o-transition: 0.4s cubic-bezier(0.78, .18, .34, .98);
	transition: 0.4s cubic-bezier(0.78, .18, .34, .98);
}


.product_button a:hover{
	background:transparent;
	color:#000;
	-webkit-transition: 0.4s cubic-bezier(0.78, .18, .34, .98);
	-moz-transition: 0.4s cubic-bezier(0.78, .18, .34, .98);
	-ms-transition: 0.4s cubic-bezier(0.78, .18, .34, .98);
	-o-transition: 0.4s cubic-bezier(0.78, .18, .34, .98);
	transition: 0.4s cubic-bezier(0.78, .18, .34, .98);
}




#top_section04{
	background: rgba(255,255,255,.8);
}



.title_play_upper{
	padding-bottom:30px;
	border-bottom:2px solid #000;
}


.title_play_upper p{
	width:58%;
}

.play_upper_wrap{
	padding:60px 0px;
}





.play_upper_index{
	display: flex;
	justify-content: space-between;
	margin-top:40px;
}


.play_upper_box{
	width:28%;
}



.play_upper_box ul li.number p{
	font-size:32pt;
	font-weight:bold;
	font-family: 'din-2014', 'Noto Sans JP', sans-serif;
}

.play_upper_box ul li.title{
	margin-top:20px;
}

.play_upper_box ul li.title p{
	font-size:18pt;
	font-weight:bold;
}




.play_upper_box ul li.title p span{
	position:relative;
	z-index:99;
	color:#fff;
}


.play_upper_box ul li.title p span:after{
	content:"";
	background:#000;
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	top:0;
	z-index:-99;
}



.play_upper_box ul li.title p span:before{
	content:"";
	background:#000;
	width:100%;
	height:100%;
	position:absolute;
	right:0;
	top:0;
	z-index:99;
}



.active .play_upper_box:nth-child(1) ul li.title p span:before{
	width:0%;
	-webkit-transition: .8s cubic-bezier(0.78, .18, .34, .98) .8s;
	-moz-transition: .8s cubic-bezier(0.78, .18, .34, .98) .8s;
	-ms-transition: .8s cubic-bezier(0.78, .18, .34, .98) .8s;
	-o-transition: .8s cubic-bezier(0.78, .18, .34, .98) .8s;
	transition: .8s cubic-bezier(0.78, .18, .34, .98) .8s;
}


.active .play_upper_box:nth-child(2) ul li.title p span:before{
	width:0%;
	-webkit-transition: .8s cubic-bezier(0.78, .18, .34, .98) 1.2s;
	-moz-transition: .8s cubic-bezier(0.78, .18, .34, .98) 1.2s;
	-ms-transition: .8s cubic-bezier(0.78, .18, .34, .98) 1.2s;
	-o-transition: .8s cubic-bezier(0.78, .18, .34, .98) 1.2s;
	transition: .8s cubic-bezier(0.78, .18, .34, .98) 1.2s;
}

.active .play_upper_box:nth-child(3) ul li.title p span:before{
	width:0%;
	-webkit-transition: .8s cubic-bezier(0.78, .18, .34, .98) 1.6s;
	-moz-transition: .8s cubic-bezier(0.78, .18, .34, .98) 1.6s;
	-ms-transition: .8s cubic-bezier(0.78, .18, .34, .98) 1.6s;
	-o-transition: .8s cubic-bezier(0.78, .18, .34, .98) 1.6s;
	transition: .8s cubic-bezier(0.78, .18, .34, .98) 1.6s;
}



.play_upper_box ul li.note {
	margin-top:20px;
}


.play_upper_box ul li.note p{
	font-size:11pt;
	line-height:180%;
	font-weight:bold;
}







#top_section06{
	background: rgba(255,255,255,.8);
	text-align:center;
}

.shop_wrap{
	display:inline-block;
	padding:60px 0;
	text-align:left;
}



.title_shop p{
	font-family: din-2014, sans-serif;
	font-weight:bold;
	font-size:18pt;
}

.shop_index{
	margin-top:50px;
}

.shop_box{
	margin-top:30px;
}



.sub_title p{
	font-weight:bold;
	font-size:12pt;
}


.shop_box p{
	font-weight:bold;
	font-size:12pt;
	line-height: 150%;
}







.movie_index{
	margin-top:40px;
	opacity: 0;
}


.active .movie_index{
	opacity: 1;
	-webkit-transition: .8s cubic-bezier(0.78, .18, .34, .98) .8s;
	-moz-transition: .8s cubic-bezier(0.78, .18, .34, .98) .8s;
	-ms-transition: .8s cubic-bezier(0.78, .18, .34, .98) .8s;
	-o-transition: .8s cubic-bezier(0.78, .18, .34, .98) .8s;
	transition: .8s cubic-bezier(0.78, .18, .34, .98) .8s;
}


.slick-initialized .slick-slide {
	margin-right: 30px;
}

.carousel_box{
	background: rgba(255,255,255,.8);
	padding:20px;
}



.carousel_box a{
	display:block;
	outline: none;
	opacity:1;
	-webkit-transition: .4s cubic-bezier(0.78, .18, .34, .98);
	-moz-transition: .4s cubic-bezier(0.78, .18, .34, .98);
	-ms-transition: .4s cubic-bezier(0.78, .18, .34, .98);
	-o-transition: .4s cubic-bezier(0.78, .18, .34, .98);
	transition: .4s cubic-bezier(0.78, .18, .34, .98);
}

.carousel_box a:hover{
	opacity:0.8;
	-webkit-transition: .4s cubic-bezier(0.78, .18, .34, .98);
	-moz-transition: .4s cubic-bezier(0.78, .18, .34, .98);
	-ms-transition: .4s cubic-bezier(0.78, .18, .34, .98);
	-o-transition: .4s cubic-bezier(0.78, .18, .34, .98);
	transition: .4s cubic-bezier(0.78, .18, .34, .98);
}







.bg_ani{
	position:absolute;
}

#bg01{
	top:100px;
}

#bg02{
	top:100px;
}

#bg03{
	top:1200px;
}

#bg04{
	top:1200px;
}


#bg05{
	top:2400px;
}

#bg06{
	top:2400px;
}


#bg07{
	top:3600px;
}

#bg08{
	top:3600px;
}


#bg09{
	top:4800px;
}

#bg10{
	top:4800px;
}










.sp_img{
display:none!important;
}











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

	
	
	
.sp_img{
	display:block!important;
}

.pc_img{
	display:none!important;
}





body {
	background-size: initial;
}












.sub_grand_menu{
	position:fixed;
	z-index:9999;
	width: 50px;
	top: 7px;
	right: 5px;
	-webkit-transition: 1s cubic-bezier(0.78, .18, .34, .98);
	-moz-transition: 1s cubic-bezier(0.78, .18, .34, .98);
	-ms-transition: 1s cubic-bezier(0.78, .18, .34, .98);
	-o-transition: 1s cubic-bezier(0.78, .18, .34, .98);
	transition: 1s cubic-bezier(0.78, .18, .34, .98);
}


.sub_grand_menu.sub_grand_menu_ani{
	position:fixed;
	top:0px;
	-webkit-transition: 1s cubic-bezier(0.78, .18, .34, .98);
	-moz-transition: 1s cubic-bezier(0.78, .18, .34, .98);
	-ms-transition: 1s cubic-bezier(0.78, .18, .34, .98);
	-o-transition: 1s cubic-bezier(0.78, .18, .34, .98);
	transition: 1s cubic-bezier(0.78, .18, .34, .98);
}


.sub_grand_menu .button-navi-icon {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 1px;
	margin: 0px 0 0 -11px;
	background: #000;
	-webkit-transition: 0.2s ease-out;
	-moz-transition: 0.2s ease-out;
	-ms-transition: 0.2s ease-out;
	-o-transition: 0.2s ease-out;
	transition: 0.2s ease-out;
}

.sub_grand_menu .button-navi-icon:after, .sub_grand_menu .button-navi-icon:before {
	display: block;
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 20px;
	height: 1px;
	background: #000;
	-webkit-transition: 0.3s ease-out;
	-moz-transition: 0.3s ease-out;
	-ms-transition: 0.3s ease-out;
	-o-transition: 0.3s ease-out;
	transition: 0.3s ease-out;
}

.sub_grand_menu .button-navi-icon:before {
	margin-top: -8px;
}

.sub_grand_menu .button-navi-icon:after {
	margin-top: 6px;
}

.sub_grand_menu .button-navi-icon.close:after, .sub_grand_menu .button-navi-icon.close:before {
	background: #fff;
}



.sub_grand_menu_top{
	padding: 24px 0px;
	overflow:hidden;
}



.sub_grand_menu_top .sub_menu ul li{
	display: inline-block;
	padding:0 20px;
}




.sub_grand_menu .button-navi-icon.close:before, .sub_grand_menu .button-navi-icon.close:after {
	margin-top: 0;
}

.sub_grand_menu .button-navi-icon.close:after {
	margin-left: 0px;
}


.button-navi-icon.close:after {
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

.button-navi-icon.close:before {
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}


.button-navi-icon.close {
	background: transparent;
}



.button-close{
	position:absolute;
	padding: 24px 0px;
	width: 38px;
	top: 0;
	z-index:-9999;
}







#menu_index{
position:fixed;
top: 0;
width:100%;
height:100%;
	background: #000;
z-index: 9998;
}



.menu_index_inner .logo{
text-align: center;
margin-top:60px;
}

.menu_index_inner .logo p{
display:inline-block;
}


.menu_index_inner{
width: auto;
height: 100%;
overflow: scroll;
margin: 0 auto;
position: relative;
padding:0 20px;
}

.menu_index_sp{
margin-top: 150px;
}


.menu_index_inner ul{
overflow:hidden;
}




.menu_index_inner .menus ul li{
	margin-bottom: 35px;
}


.menu_index_inner .menus ul li a{
font-size: 16pt;
	color:#fff;
	font-family: din-2014, sans-serif;
	font-weight: bold;

}



.menu_index_inner .menus ul li.sns_icon a{
	display:inline-block;
	margin-right:15px;
}

.menu_index_inner .menus ul li.sns_icon img{
width:auto;
height:23px;
}







.menus{
	margin-top: 40%;
}


.bottom{
	position:absolute;
	bottom:40px;
}


.bottom .copy p{
	color:#fff;
	font-size: 8pt;
	font-family: din-2014, sans-serif;
}


.bottom_menu{
	margin-top:30px;
}

.bottom_menu a{
	color:#fff;
	font-size: 7pt;
	line-height: 160%;
	display: block;
	font-family: YuGothic, 游ゴシック, sans-serif;
}













#top_menu{
display:none;
}

#menu_scroll{
display:none;
}

#top_logo{
display:none;
}




.logo {
	float: none;
	text-align:center;
}

.logo a {
	display: inline-block;
}



.wooslider_wrap{
display:none;
}

.wooslider_wrap02{
display:block;
}


.top_section{
	margin-top: 80px;
}


#top_section01 {
	margin-top: 80px;
}






#heaader{
	padding: 18px 0 10px;
}


.menu {
	display:none;
}






.main_copy h4 {
	font-size: 10vw;
}

.main_copy h4 span:after {
	left: -8px;
}



.product_index {
	margin-top: 20px;
	display: block;
}

.product_box {
	width: 100%;
	padding: 20px;
	margin-bottom:	30px;
}

.product_box:last-child {
	margin-bottom:0px;
}


.title_play_upper{
	padding:0 20px 20px;
}

.title_play_upper p {
	width: 100%;
}



.play_upper_index {
	display: block;
}



.play_upper_box {
	width: 100%;
	margin-bottom:30px;
}

.play_upper_box ul li.title p {
	font-size: 16pt;
}



.play_upper_box:last-child {
	margin-bottom:0px;
}


.play_upper_box ul li.note p {
	font-size: 10pt;
	line-height:150%;
}





.product_button a {
	font-size: 14pt;
}
	



.logo_sp{
	width: 150px;
	margin-top: 22px;
}

.logo_sp a{
	display:block;
}


.inner{
	padding: 0px 20px;
}



.footer_logo {
	margin-top: 100px;
}


.main_title p {
	font-size: 14pt;
}


.movie_index {
	margin-top: 20px;
}




.philo_index .main_title {
	float: none;
}


.philo_index .philo_text {
	float: none;
	margin-left: 0px;
	margin-top: 30px;
}


.philo_index .philo_text p {
	font-size: 3.8vw;
	line-height: 140%;
	margin-bottom: 0px;
}


.title_shop p {
	font-size: 14pt;
}


.sub_title p {
	font-size: 10pt;
}

.shop_box p {
	font-size: 9pt;
}




.product_detail .note p {
	font-size: 10pt;
}


.footer_copy p {
	font-size: 8pt;
}


.footer_menu ul li a {
	font-size: 7pt;
}



.product_detail .copy p {
	font-size: 11pt;
}




}


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



}