@charset "UTF-8";
/* CSS Document */
html{/*　文字づめ用　*/
  -moz-font-feature-settings: "palt";
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
  font-variant-ligatures: no-common-ligatures;
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;}
  
body{margin:0; padding:0; background:#000000; color:#FFFFFF;  overflow-x:hidden; font-size:1em;}
#header{width:100%;
		max-width:1260px;
		margin:0 auto;
		}

#content{width:100%;
		position:relative;
		}


ul{margin:0; padding:0;}
li{margin:0; padding:0; list-style:none;}

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

#page-top {
display: inline-block;
position: fixed;
right: 30px;
bottom:15px !important;
color: #fff;
font-size: 17px;
line-height: 50px;
width: 200px;
text-align: center;
background: rgba(255,0,0,.5);
border: 1px solid rgba(255,255,255,.7);
border-radius: 30px;
z-index: 9999;
cursor: pointer;
}

.copy {font-size:12px; margin-bottom:25px;}

/*コンテンツ動画*/
.yt_box {width:95%; margin:0 auto; padding:2% 0 2% 0;}
.youtube2 {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.youtube2 iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}
/*コンテンツ動画*/

/*----------------------------------------------------------------ヘッダーアニメーション*/
.kakioroshi_block div{position:relative;
						z-index:-999;
						text-align:center;
						width:100%;
						margin:0 auto;}
						
.kakioroshi_block4 img{width:100%;}

					
.kakioroshi_block4{animation: fadeIn 0.5s linear 1s 1 forwards;
   					 -webkit-animation: fadeIn 0.5s linear 1s 1 forwards;
					 -moz-opacity: 0;
					opacity: 0;}
 
.bounceIn {
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
  -webkit-animation-duration: .2s;
  animation-duration: .2s;
}

.fig_img1 {position:absolute;
			z-index:2;
			animation: bounceIn .3s linear 2.6s 1 forwards;
			-webkit-animation: bounceIn .3s linear 2.6s 1 forwards;
			-moz-opacity: 0;
			opacity: 0;
			width:100%;
			max-width:1260px;
			height:100%;
			max-height:1079px;
			filter: drop-shadow(0px 0px 5px rgba(0,0,0,1));}

.fig_img1 img{width:100%;
				max-width:1260px;
				max-height:1079px;
				display:inline;
				filter: drop-shadow(0px 0px 8px rgba(0,0,0,1));}


.fig_img2 {position:absolute;
			z-index:1;
			animation: bounceIn .3s linear 2.4s 1 forwards;
			-webkit-animation: bounceIn .3s linear 2.4s 1 forwards;
			-moz-opacity: 0;
			opacity: 0;
			width:100%;
			max-width:1260px;
			height:100%;
			max-height:1079px;
			filter: drop-shadow(0px 0px 15px rgba(0,0,0,1));}

.fig_img2 img{width:100%;
				max-width:1260px;
				max-height:1079px;
				display:inline;
				filter: drop-shadow(0px 0px 15px rgba(0,0,0,1));}


.logo_img{position:relative;
			z-index:3;
			display: inline-block;
  			text-align: center;
			margin:0 auto;
			-moz-opacity: 0;
			opacity: 0;}
.logo_img img{width:100%;
				margin-bottom:20%;}

.kuji_logo{position:absolute;
			z-index:5;
			top:1%;
			opacity: 0;
			animation: bounceIn .3s linear 3s 1 forwards;
			-webkit-animation: bounceIn .3s linear 3s 1 forwards;
			-moz-opacity: 0;}
.kuji_logo img{width:100%;}


.anime_logo img{width:100%; margin:0 auto;}


.anime_logo{position:absolute;
			z-index:4;
			top:0;
			opacity: 0;
			animation: bounceIn .3s linear 3s 1 forwards;
			-webkit-animation: bounceIn .3s linear 3s 1 forwards;
			-moz-opacity: 0;}


@keyframes fadeIn {
    0% {opacity: 0.7}
	25% {opacity: 0}
	50% {opacity: 0.7}
	75% {opacity: 0}
	100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0.7}
	25% {opacity: 0}
	50% {opacity: 0.7}
	75% {opacity: 0}
	100% {opacity: 1}
}

@keyframes logofadeIn {
    100% {opacity: 1}
}

@-webkit-keyframes logofadeIn {
    100% {opacity: 1}
}

@-webkit-keyframes bounceIn {
  0%, 20%, 40%, 60%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }
 
  0% {
    opacity: 0;
    -webkit-transform: scale3d(2, 2, 2);
    transform: scale3d(2, 2, 2);
  }
 
 
  80% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  80% {
	  opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    transform: translate(0px, 0px) rotateZ(0deg)
  }
  85% {
	  opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    transform: translate(2px, 2px) rotateZ(1deg)
  }
  90% {
	  opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    transform: translate(0px, 2px) rotateZ(0deg)
  }
  95% {
	  opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    transform: translate(2px, 0px) rotateZ(-1deg)
  }
  100% {
	  opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    transform: translate(0px, 0px) rotateZ(0deg)
  }
}
 
@keyframes bounceIn {
  0%, 20%, 40%, 60%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }
 
  0% {
    opacity: 0;
    -webkit-transform: scale3d(2, 2, 2);
    transform: scale3d(2, 2, 2);
  }
 
 
  80% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  80% {
	  opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    transform: translate(0px, 0px) rotateZ(0deg)
  }
  85% {
	  opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    transform: translate(2px, 2px) rotateZ(1deg)
  }
  90% {
	  opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    transform: translate(0px, 2px) rotateZ(0deg)
  }
  95% {
	  opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    transform: translate(2px, 0px) rotateZ(-1deg)
  }
  100% {
	  opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    transform: translate(0px, 0px) rotateZ(0deg)
  }
}


/*----------------------------------------------------------------ヘッダーアニメーション*/

/*----------------------------------------------------------------コンテンツ*/
.gold_border{background:url(img/gold_border.jpg) repeat-x;
				width:100%;
				height:58px;
				position:relative;
				z-index:-1;}

#content_box {width:100%;
				max-width:1024px;
				margin:0 auto;
				text-align:center;
				padding:20px 0 0 0;}

.item_states {width:895px;
				margin:0 auto;
				padding-top:15px;}

.item_states_left {float:left;
					width:776px;
					text-align:left;
					color:#FFFFFF;
					font-size:0.8em;
					line-height:140%;}

.item_states_right {float:left;
					width:113px;}

/*----------------------------------------------------------------コンテンツ*/

/*----------------------------------------------------------------ラインナップ*/

#lineup {text-align:left;
			line-height:180%;}

.item_txt{margin:10px 0 10px 0;}

#item_a {width:485px;
			float:right;
			padding-right:14px;}

#item_b {width:485px;
			float:left;
			padding-left:14px;}

#item_c {width:485px;
			float:left;
			padding-left:14px;}

#item_d {width:485px;
			float:right;
			padding-right:14px;}

#item_e {width:1024px;
			height:486px;
			background:url(img/item_e.jpg);
			padding:130px 0 0 0;
			margin:25px 0 0 0;}

#item_f {margin-top:25px;}

.item_f_left {float:left; width:448px; padding:2% 0 2% 0;}
.item_f_right {float:right; width:500px; margin-right:10px;}

#item_g {margin-top:35px;}

#item_lo {width:1014px;
			background:url(img/item_lo.jpg) no-repeat;
			padding:330px 0 0 10px;
			margin:45px 0 0 0;}

.lo_slide {width:500px;}
.lo_txt {margin-top:200px; font-size:1.2em;}

.bnr_box {width:100%;
			max-width:546px;
			margin:0 auto;
			padding:2% 0 2% 0;
			text-align:center;}

.bnr_box a{color:#FFFFFF;}

.bnr_left {float:left; width:45%; max-width:250px;}
.bnr_right {float:right; width:45%; max-width:250px;}

/*----------------------------------------------------------------ラインナップ*/

@media all and (max-width:950px) {
	.pc {display:none;}
	.sp {display:block;}
	
	#sp-nav {position:fixed; display: inline-block; width:100%; top:0; right:0; margin:0 auto; z-index:9999;}
	.spmenu{
			-webkit-border-radius: 50%;/* 50%でもOK */
			-moz-border-radius: 50%;
			border-radius: 50%;
			background-color: #FFF;/* 円の色 */
			width:50px;
			height:50px;
			}
			
	.spmenu	{top:13px; right:10px; position:absolute; cursor:pointer; overflow:hidden; z-index:997;  }
	div .spmenu1{width:25px; height:3px; background-color:#333; top:15px; left:12px; position:absolute; } 
	div .spmenu2{width:25px; height:3px; background-color: #333; top:23px; left:12px; position:absolute; } 
	div .spmenu3{width:25px; height:3px; background-color: #333; top:31px; left:12px; position:absolute; }
	
	div .spmenu1,div .spmenu2,div .spmenu3
						{transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; /* Opera */ -moz-transition: all 0.5s ease-out; /* Firefox */
						 -webkit-transition: all 0.5s ease-out; /* GoogleChrome, Safari */ -ms-transition: all 0.5s ease-out; /* IE */ }
	
	

/*----------------------------------------------------------------コンテンツ*/
.gold_border{background:url(img/gold_border.jpg) repeat-x;
				width:100%;
				height:25px;
				background-size:contain;
				position:relative;
				z-index:-1;}

#content_box {width:96%;
				max-width:100%;
				margin:0 auto;
				text-align:center;
				padding:2%;}

#content_box img{width:100%;}

.item_states {width:100%;
				margin:0 auto;
				padding-top:15px;}

.item_states_left {float:left;
					width:80%;
					text-align:left;
					color:#FFFFFF;
					font-size:0.8em;
					line-height:140%;}

.item_states_right {float:left;
					width:20%;}
					
.item_states_right img{position:relative;
						z-index:9998;}

/*----------------------------------------------------------------コンテンツ*/

/*----------------------------------------------------------------ラインナップ*/

#lineup {text-align:left;
			line-height:180%;}

#item_a {width:100%;
			float:none;
			padding-right:0;
			margin-top:2%;}

#item_b {width:100%;
			float:none;
			padding-left:0;
			margin-top:2%;}

#item_c {width:100%;
			float:none;
			padding-left:0;
			margin-top:2%;}

#item_d {width:100%;
			float:none;
			padding-right:0;
			margin-top:2%;}

#item_e {width:100%;
			height:100%;
			background:none;
			padding:0;
			margin-top:0;}

#item_f {margin-top:25px;}

.item_f_left {float:none; width:100%;}
.item_f_right {float:none; width:100%; margin-right:0;}

#item_g {margin-top:2%;}

#item_lo {width:100%;
			background:none;
			padding:0;
			margin-top:2%;}

.lo_slide {width:100%;}
.lo_txt {margin-top:15%; font-size:1em;}

.bnr_left {float:none; width:85%; max-width:250px; margin:0 auto;}
.bnr_right {float:none; width:85%; max-width:250px; margin:0 auto;}


/*----------------------------------------------------------------ラインナップ*/


	#spmenu {display:none;}
	
	#spmenu {width:100%;
				height:100%;
				background:rgba(0,0,0,0.8);
				font-size:0.7rem !important;
				padding:20%  0 100% 0;
				margin:0 auto;
				overflow: auto;
				-webkit-overflow-scrolling: touch;}
	
	#spmenu li{width:47%;
				text-align:center;
				border:1px solid #7D7D7D;
				color:#FFF;
				background: rgba(255,0,0,.5);
				float:left;
				margin:1%;}
	#spmenu li a{color:#FFF;
					display:block;
					padding:5% 0 5% 0;
					text-decoration:none;}
	

	div .menuclick1		{ top:23px; -o-transform: rotate(405deg); -moz-transform: rotate(405deg); -webkit-transform: rotate(405deg);
				 	-ms-transform: rotate(405deg); transform: rotate(405deg); }
	div .menuclick2		{ background-color:rgba(255,255,255,0);  }
	div .menuclick3		{ top:23px; -o-transform: rotate(-405deg); -moz-transform: rotate(-405deg);
						-webkit-transform: rotate(-405deg); -ms-transform: rotate(-405deg); transform: rotate(-405deg); }

	
	#page-top {
				display: inline-block;
				position: fixed;
				right: 15px;
				bottom:0;
				color: #fff;
				font-size: 0.8em;
				line-height: 40px;
				width: 150px;
				text-align: center;
				background: rgba(255,0,0,.5);
				border: 1px solid rgba(255,255,255,.7);
				border-radius: 30px;
				z-index: 9999;
				cursor: pointer;
				}



}
@media(orientation: landscape){
#spmenu {width:100%;
				height:30%;
				background:rgba(0,0,0,0.8);
				font-size:0.7rem !important;
				padding:10%  0 100% 0;
				margin:0 auto;
				right:50%;
				overflow: auto;
				-webkit-overflow-scrolling: touch;}
 
 #spmenu li{width:47%;
				height:calc(100% / 5);
				height:-webkit-calc(100% / 5);
				text-align:center;
				border:1px solid #7D7D7D;
				color:#FFF;
				background: rgba(255,0,0,.5);
				float:left;
				margin:0.5%;}
	#spmenu li a{color:#FFF;
					display:block;
					padding:2% 0 2% 0;
					text-decoration:none;}
}