@charset "UTF-8";

/** parts **/
body > .container .box-container-02 {
	letter-spacing: -.40em;
}
body > .container .box-container-02 > * {
	display: inline-block;
	letter-spacing: normal;
	width: 440px;
	margin-right: 37px;
}
body > .container .box-container-02 > *:nth-child(2n) {
	margin-right: 0;
}
@media screen and (max-width:960px){
	img { max-width: 100%; height: auto; }
}

body {
	text-align: center;
	overflow-x: hidden;
	background-color: #000;
}
body > .container {
}

/** main-container **/
body > .container > .main-container {
	position: relative;
	background-image: url(../img/bg.jpg);
	background-position: top center;
	background-repeat: no-repeat;
	background-size: cover;
	padding-bottom: 40px;
}



/** HEADER **/
body > .container > .main-container > header {
	position: relative;
}
body > .container > .main-container > header .spmenu { display: none; }
body > .container.top > .main-container {
	padding-top: 70px;
	min-width: 960px;
}
body > .container.top > .main-container > .header-bg {
	position: absolute;
	display: block;
	width: 100%;
	height: 210px;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 0;
}
body > .container.top > .main-container > header {
	position: relative;
	display: block;
	width: 100%;
	height: 210px;
	z-index: 2;
}
body > .container.top > .main-container > header > nav {
	display: block;
	width: 1450px;
	margin: auto;
}
body > .container.top > .main-container > header h1 {
	display: block;
	text-align: left;
}
body > .container.top > .main-container > header > nav ul {
	display: block;
	width: 577px;
}
body > .container.top > .main-container > header > nav ul li {
	display: inline-block;
}

body > .container.sub > .main-container > header > nav ul {
	width: 960px;
	margin: auto;
}
body > .container.sub > .main-container > header > nav ul li {
	display: inline-block;
}



body > .container > .main-container > header > nav div.gnavi ul {}
body > .container > .main-container > header > nav div.gnavi ul li {
	background-image: url(../img/gnavi.png);
	background-repeat: no-repeat;
	background-position: left top;
	height: 37px;
	margin: 0 5px;
}
body > .container > .main-container > header > nav div.gnavi ul li a {
	display: block;
	text-align: left;
	text-indent: -9999px;
	overflow: hidden;
}
body > .container > .main-container > header > nav div.gnavi ul li.top { width: 55px; background-position: 0px 0px; }
body > .container > .main-container > header > nav div.gnavi ul li.news { width: 70px; background-position: -55px 0px; }
body > .container > .main-container > header > nav div.gnavi ul li.intro { width: 170px; background-position: -125px 0px; }
body > .container > .main-container > header > nav div.gnavi ul li.chara { width: 140px; background-position: -295px 0px; }
body > .container > .main-container > header > nav div.gnavi ul li.story { width: 80px; background-position: -435px 0px; }
body > .container > .main-container > header > nav div.gnavi ul li.anime { width: 75px; background-position: -515px 0px; }
body > .container > .main-container > header > nav div.gnavi ul li.figure { width: 87px; background-position: -590px 0px; }
body > .container > .main-container > header > nav div.gnavi ul li.goods { width: 90px; background-position: -677px 0px; }
body > .container.top > .main-container > header > nav div.gnavi ul li.top { background-position: 0px -77px; }
body > .container.news > .main-container > header > nav div.gnavi ul li.news { width: 70px; background-position: -55px -77px; }
body > .container.intro > .main-container > header > nav div.gnavi ul li.intro { width: 170px; background-position: -125px -77px; }
body > .container.chara > .main-container > header > nav div.gnavi ul li.chara { width: 140px; background-position: -295px -77px; }
body > .container.story > .main-container > header > nav div.gnavi ul li.story { width: 80px; background-position: -435px -77px; }
body > .container.anime > .main-container > header > nav div.gnavi ul li.anime { width: 75px; background-position: -515px -77px; }
body > .container.figure > .main-container > header > nav div.gnavi ul li.figure { width: 87px; background-position: -590px -77px; }
body > .container.goods > .main-container > header > nav div.gnavi ul li.goods { width: 90px; background-position: -677px -77px; }
body > .container > .main-container > header > nav div.gnavi ul li.top:hover { background-position: 0px -39px; }
body > .container > .main-container > header > nav div.gnavi ul li.news:hover { width: 70px; background-position: -55px -39px; }
body > .container > .main-container > header > nav div.gnavi ul li.intro:hover { width: 170px; background-position: -125px -39px; }
body > .container > .main-container > header > nav div.gnavi ul li.chara:hover { width: 140px; background-position: -295px -39px; }
body > .container > .main-container > header > nav div.gnavi ul li.story:hover { width: 80px; background-position: -435px -39px; }
body > .container > .main-container > header > nav div.gnavi ul li.anime:hover { width: 75px; background-position: -515px -39px; }
body > .container > .main-container > header > nav div.gnavi ul li.figure:hover { width: 87px; background-position: -590px -39px; }
body > .container > .main-container > header > nav div.gnavi ul li.goods:hover { width: 90px; background-position: -677px -39px; }
body > .container > .main-container > header > nav div.gnavi ul li.top.inactive { background-position: 0px -115px; }
body > .container > .main-container > header > nav div.gnavi ul li.news.inactive { width: 70px; background-position: -55px -115px; }
body > .container > .main-container > header > nav div.gnavi ul li.intro.inactive { width: 170px; background-position: -125px -115px; }
body > .container > .main-container > header > nav div.gnavi ul li.chara.inactive { width: 140px; background-position: -295px -115px; }
body > .container > .main-container > header > nav div.gnavi ul li.story.inactive { width: 80px; background-position: -435px -115px; }
body > .container > .main-container > header > nav div.gnavi ul li.anime.inactive { width: 75px; background-position: -515px -115px; }
body > .container > .main-container > header > nav div.gnavi ul li.figure.inactive { width: 87px; background-position: -590px -115px; }
body > .container > .main-container > header > nav div.gnavi ul li.goods.inactive { width: 90px; background-position: -677px -115px; }

body > .container > .main-container > header > nav div.gnavi ul li.anime {
	animation: anim-navi1 2s ease infinite alternate, anim-navi2 4s ease infinite;
}
@keyframes anim-navi1 {
0% { opacity: 0.2; }
40% { opacity: 1; }
100% { opacity: 1; }
}
@keyframes anim-navi2 {
	0% { transform: scale(0.8, 0.8); }
	5% { transform: scale(1.2, 1.2); }
	10% { transform: scale(1, 1); }
	15% { transform: scale(1.1, 1.1); }
	20% { transform: scale(1, 1); }
	100% { transform: scale(1, 1); }
}
body > .container > .main-container > header > nav div.gnavi ul li.spclose { display: none; }
body > .container > .main-container > header > nav div.gnavi ul li.inactive > a{
	cursor: default;
}

@media screen and (max-width:960px){
	body > .container > .main-container > header h1 {
		max-width: 80vw;
		margin: auto;
	}
	body > .container.top > .main-container { width: 100%; min-width: auto; padding-top: 0; }
	body > .container.top > .main-container > .header-bg { display: none; }
	body > .container.top > .main-container > header { height: auto; background-color: rgba(0, 0, 0, 0.5); }
	body > .container.top > .main-container > header > nav { width: 100%; }
	body > .container.top > .main-container > header h1 {
		width: 100%;
		text-align: center;
	}
	body > .container.top > .main-container > header > nav div.gnavi ul { width: 100%; }
	body > .container.sub > .main-container > header > nav div.gnavi { display: none; }

	body > .container > .main-container > header {
		z-index: 999;
	}
	body > .container.sub > .main-container > header > nav .spmenu {
		display: inline-block;
		position: absolute;
		top: 3vw;
		right: 3vw;
		background: none;
		background-image: url(../img/btn_menu.png);
		background-size: cover;
		background-repeat: no-repeat;
		width: 5vw;
		height: 5vw;
		border: 0;
		text-align: left;
		text-indent: -999px;
		overflow: hidden;
	}
	body > .container.sub > .main-container > header > nav div.gnavi ul li.spclose { display: block;  margin-top: 40px; height: auto; background: none; }
	body > .container.sub > .main-container > header > nav div.gnavi ul li.spclose > a {
		display: inline-block;
		background: none;
		background-image: url(../img/btn_close.png);
		background-size: cover;
		background-repeat: no-repeat;
		width: 3vw;
		height: 3vw;
		border: 0;
		text-align: left;
		text-indent: -999px;
		overflow: hidden;
	}
	body > .container.sub > .main-container > header > nav.show .spmenu { display: none; }
	body > .container.sub > .main-container > header > nav.show div.gnavi {
		position: absolute;
		display: block;
		top: 0;
		right: 0;
		width: 100vw;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.6);
		overflow: hidden;
	}
	body > .container.sub > .main-container > header > nav div.gnavi ul {
		position: absolute;
		display: block;
		top: 0;
		right: 0;
		width: 180px;
		height: 100vh;
		background-color: #000;
		padding-top: 25px;
		transform: translateX(180px);
	}
	body > .container.sub > .main-container > header > nav div.gnavi ul.show {
		transform: translateX(0);
		transition: opacity 1s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform .5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	}
	body > .container.sub > .main-container > header > nav div.gnavi ul li {
		display: block;
	}
}



/** SNS **/
body > .container > .main-container > .sns-share {
	position: absolute;
	display: block;
	width: 100%;
	height: 40px;
	background-image: url(../img/bg_sns.png);
	background-repeat: no-repeat;
	background-position: center right;
	text-align: right;
	z-index: 99999;
	transition: all .1s linear;
}
body > .container > .main-container > .sns-share::before {
	content: "";
	display: inline-block;
	width: 51px;
	height: 40px;
	background-image: url(../img/icon_share.png);
	background-repeat: no-repeat;
	background-position: center;
	margin-right: 20px;
}
body > .container > .main-container > .sns-share > .twitter {
	display: inline-block;
	height: 40px;
	vertical-align: top;
	padding: 5px 0 0 0;
	box-sizing: border-box;
	margin-right: 20px;
}
body > .container > .main-container > .sns-share > .facebook {
	display: inline-block;
	height: 40px;
	vertical-align: top;
	padding: 7px 0 0 0;
	box-sizing: border-box;
	margin-right: 20px;
}
body > .container > .main-container > .sns-share > .facebook .inlineBlock {
	display: none !important;
}
body > .container > .main-container > .sns-share > .pagetop {
	display: inline-block;
	text-align: left;
	text-indent: -9999px;
	overflow: hidden;
	width: 45px;
	height: 40px;
	background-image: url(../img/btn_pagetop.png);
	background-repeat: no-repeat;
	vertical-align: top;
}


/** FOOTER **/
body > .container > footer {
	vertical-align: top;
}
body > .container > footer > nav {
	background-color: #131313;
	letter-spacing: -.40em;
	padding-top: 45px;
	padding-bottom: 45px;
	background-size: auto 100%;
	background-position: center;
	background-repeat: no-repeat;
}
body > .container > footer.bg001 > nav { background-image: url(../img/footer/bg001.png); }
body > .container > footer.bg002 > nav { background-image: url(../img/footer/bg002.png); }
body > .container > footer.bg003 > nav { background-image: url(../img/footer/bg003.png); }
body > .container > footer.bg004 > nav { background-image: url(../img/footer/bg004.png); }
body > .container > footer.bg005 > nav { background-image: url(../img/footer/bg005.png); }
body > .container > footer.bg006 > nav { background-image: url(../img/footer/bg006.png); }
body > .container > footer.bg007 > nav { background-image: url(../img/footer/bg007.png); }
body > .container > footer ul {
	list-style: none;
	letter-spacing: -.40em;
}
body > .container > footer ul li {
	display: inline-block;
	letter-spacing: normal;
}
body > .container > footer .menu {
	display: inline-block;
	width: 350px;
	vertical-align: top;
}
body > .container > footer .menu > h4 {
	width: 100%;
	height: 52px;
	margin-bottom: 6px;
	background: url(../img/footer/t_logo.png) no-repeat top left;
	overflow: hidden;
	text-indent: -9999px;
}
body > .container > footer .menu ul {
	margin-top: 30px;
}
body > .container > footer .menu ul > li {
	display: block;
	text-align: left;
	font-size: 12px;
	margin-bottom: 10px;
}
body > .container > footer .menu ul > li a{
	color: #b2b2b2;
}
body > .container > footer .menu ul > li.inactive a{
	cursor: default;
	text-decoration: none;
	color: #717171;
}
body > .container.top > footer .menu ul > li.top a{ color: #FFF; font-weight: bold; }
body > .container.news > footer .menu ul > li.news a{ color: #FFF; font-weight: bold; }
body > .container.intro > footer .menu ul > li.intro a{ color: #FFF; font-weight: bold; }
body > .container.chara > footer .menu ul > li.chara a{ color: #FFF; font-weight: bold; }
body > .container.story > footer .menu ul > li.story a{ color: #FFF; font-weight: bold; }
body > .container.anime > footer .menu ul > li.anime a{ color: #FFF; font-weight: bold; }
body > .container.figure > footer .menu ul > li.figure a{ color: #FFF; font-weight: bold; }
body > .container.goods > footer .menu ul > li.goods a{ color: #FFF; font-weight: bold; }
body > .container > footer .menu ul > li a::before{
	content: "-";
	display: inline-block;
	margin-right: 5px;
}
body > .container > footer .twitter {
	display: inline-block;
	width: 280px;
	max-height: 320px;
	margin-left: 45px;
	color: #FFF;
	vertical-align: top;
}
body > .container > footer .twitter h3 {
	width: 100%;
	height: 15px;
	margin-bottom: 6px;
	background: url(../img/footer/t_twitter.png) no-repeat top left;
	overflow: hidden;
	text-indent: -9999px;
}
body > .container > footer .twitter iframe {
	background-color: rgba(60, 66, 70, 0.7);
}
body > .container > footer ul.banner {
	display: inline-block;
	width: 240px;
	margin-left: 40px;
	vertical-align: top;
}
body > .container > footer ul.banner li {
	width: 240px;
	box-sizing: border-box;
	border: 1px solid #4b4b4b;
	border-radius: 1px;
	font-size: 0px;
}
body > .container > footer ul.banner li img {
	width: 100%;
	height: auto;
}
body > .container > footer > .sub {
	padding-top: 30px;
	padding-bottom: 30px;
}
body > .container > footer small {
	display: block;
	color: #FFF;
	font-size: 12px;
}
@media screen and (max-width:960px){
	body > .container > footer > nav { padding: 7vw 0; }
	body > .container > footer .menu { display: none; }
	body > .container > footer .twitter { display: none; margin: auto; }
	body > .container > footer ul.banner { margin: auto; width: 100%; }
	body > .container > footer ul.banner li { width: 40vw; margin: 0 2vw; }
	body > .container > footer > .sub { padding: 2vw 0; }
}

#youtube {
	width: 840px;
	height: 472px;
}

@media screen and (max-width:1220px){
	#youtube {
		width: 100%;
		min-width: 80vw;
    height: 48vw;
	}
}