@charset "utf-8";

/*
******************************************************************
* top.css
******************************************************************
*/

/*
******************************************************************
* wrapper
******************************************************************/
#wrapper {
	height: 100%;
}


/*  #container
===================================================== */
#container {
	position: relative;
	width: 100%;
	height: 100%;
	min-width: 1000px;
	min-height: 600px;
	overflow: hidden;
}
#container .img__bg {
	position: absolute;
	width: 100%;
	height: 100%;
	background: url(../img/bg_01.jpg) center #111 no-repeat;
	-webkit-background-size: cover;
	background-size: cover;
	-webkit-transform-origin: center;
	-moz-transform-origin: center;
	-ms-transform-origin: center;
	-o-transform-origin: center;
	transform-origin: center;
}
#container .img__yujiro {
	display: block;
	position: absolute;
	z-index: 0;
	left: 50%;
	width: 1536px;
	height: 1329px;
	margin: 0 0 0 -768px;
	background: url(../img/img_04.png) center 0px no-repeat;
	opacity: 0;
	-webkit-transform-origin: center;
	-moz-transform-origin: center;
	-ms-transform-origin: center;
	-o-transform-origin: center;
	transform-origin: center;
}


/*  #header__top
===================================================== */
#header__top {
	display: table;
	position: absolute;
	z-index: 11;
	top: 0;
	left: 50%;
	width: 1000px;
	margin: 0 0 0 -500px;
}
#header__top > * {
	display: table-cell;
	vertical-align: middle;
	color: #fff;
	line-height: 1;
	padding: 10px 0;
	margin: 0;
}
#header__top .header__maker {
	width: 145px;
}
#header__top .header__maker h2 {
	margin: 0px;
}
#header__top .header__copy {
	font-size: 12px;
	text-align: right;
}

#header__top .sns_btn {
	display: none;
	position: absolute;
	left: 0;
	top: 30px;
	z-index: 100;
}
#header__top .sns_btn ul {
	padding: 0;
}
#header__top .sns_btn ul li {
	list-style: none;
	display: inline-block;
	vertical-align: middle;
	margin-right: 10px;
}

/*  main
===================================================== */
#main {
	position: relative;
	width: 1000px;
	height: 100%;
	margin: auto;
}

/*  #nav__top
===================================================== */
#nav__top {
	position: fixed;
	z-index: 100;
	left: 0;
	right: 0;
	bottom: -80px;
	width: 1000px;
	margin: auto;
}
#nav__top * {
	margin: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
#nav__top .nav__main {
	display: block;
	height: 80px;
	padding: 7px 0 8px 9px;
	background: url(../img/nav_bg01.png) 0 0 no-repeat;
}
#nav__top .nav__list {
	float: left;
}
#nav__top .nav__list a {
	display: block;
	vertical-align: top;
	text-align: left;
	text-decoration: none;
}
#nav__top .nav__list a:hover,
#nav__top .nav__list a.nav--current {
	background: url(../img/nav_bg02.png) right center no-repeat;
}


/*  #top
===================================================== */
#top {}
#top__inner {}
#top__inner > * {
	position: absolute;
	margin: auto;
	opacity: 0;
}

/* logo */
#top .img__logo {
	z-index: 3;
	top: 245px;
	width: 356px;
	height: 223px;
	right: 0;
	left: 0;
	-webkit-transform: scale(3);
	-ms-transform: scale(3);
	-o-transform: scale(3);
	transform: scale(3);
}

/* baki */
#top .img__baki {
	z-index: 4;
	top: 100%;
	right: 0;
	left: 0;
	width: 430px;
	height: 660px;
	-webkit-transform-origin: bottom center;
	-moz-transform-origin: bottom center;
	-ms-transform-origin: bottom center;
	-o-transform-origin: bottom center;
	transform-origin: bottom center;
}

/* left Chara */
#top .img__lChara {
	top: 150px;
	left: 100%;
	width: 572px;
	height: 600px;
	-webkit-transform-origin: right center;
	-moz-transform-origin: right center;
	-ms-transform-origin: right center;
	-o-transform-origin: right center;
	transform-origin: right center;
}

/* right Chara */
#top .img__rChara {
	top: 150px;
	right: 100%;
	width: 528px;
	height: 600px;
	-webkit-transform-origin: left center;
	-moz-transform-origin: left center;
	-ms-transform-origin: left center;
	-o-transform-origin: left center;
	transform-origin: left center;
}

#top .img__baki > *,
#top .img__lChara > *,
#top .img__rChara > * {
	position: absolute;
	top: 0;
	left: 0;
}


/* -- サイズによる全体調整 */
@media screen and (max-height: 768px){
	#container .img__yujiro {
		-webkit-background-size: 80% auto;
		background-size: 80% auto;
		background-position: center 40px;
	}
	#top {
		-webkit-transform: scale(0.8);
		-ms-transform: scale(0.8);
		-o-transform: scale(0.8);
		transform: scale(0.8);
	}
}

@media screen and (max-height: 600px){
	#container .img__yujiro {
		-webkit-background-size: 70% auto;
		background-size: 70% auto;
		background-position: center 65px;
	}
	#top {
		-webkit-transform: scale(0.7);
		-ms-transform: scale(0.7);
		-o-transform: scale(0.7);
		transform: scale(0.7);
	}
}


/*  #info
===================================================== */
/* .info__pv */
.info__pv {
	position: fixed;
	z-index: 10;
	bottom: 120px;
	left: 50%;
	width: 246px;
	height: 136px;
	margin-left: 220px;
	opacity: 0;
}
.info__pv a {
	position: relative;
	z-index: 100;
	display: inline-block;
	text-decoration: none;
	-webkit-transition: transform 3s ease-out;
	-o-transition: transform 3s ease-out;
	transition: transform 3s ease-out;
}
.info__pv a:before {
	content: "";
	display: block;
	position: absolute;
	z-index: -1;
	top: 5%;
	left: 5%;
	width: 90%;
	height: 90%;
}
.info__pv a:hover {
	-webkit-transform: scale(1.1);
	-ms-transform: scale(1.1);
	-o-transform: scale(1.1);
	transform: scale(1.1);
}
.info__pv a:hover:before {
	-webkit-animation: hover--orga 3s ease-in-out infinite;
	-o-animation: hover--orga 3s ease-in-out infinite;
	animation: hover--orga 3s ease-in-out infinite;
}

@media screen and (max-height: 700px){
	.info__pv {
		bottom: auto;
		top: 80px;
	}
}

@keyframes hover--orga {
	0% {
		-webkit-box-shadow: 0px 0px 45px 5px rgba(70, 10, 130, 0.5);
		-moz-box-shadow: 0px 0px 45px 5px rgba(70, 10, 130, 0.5);
		box-shadow: 0px 0px 45px 5px rgba(70, 10, 130, 0.5);
	}
	20% {
		-webkit-box-shadow: -1px 1px 65px 5px rgba(140, 90, 188, 0.8);
		-moz-box-shadow: -1px 1px 65px 5px rgba(140, 90, 188, 0.8);
		box-shadow: -1px 1px 65px 5px rgba(140, 90, 188, 0.8);
	}
	50% {
		-webkit-box-shadow: 3px -1px 75px 5px rgba(70, 10, 130, 0.5);
		-moz-box-shadow: 3px -1px 75px 5px rgba(70, 10, 130, 0.5);
		box-shadow: 3px -1px 75px 5px rgba(70, 10, 130, 0.5);
	}
	76% {
		-webkit-box-shadow: 2px 1px 50px 5px rgba(150, 100, 180, 0.8);
		-moz-box-shadow: 2px 1px 50px 5px rgba(150, 100, 180, 0.8);
		box-shadow: 2px 1px 50px 5px rgba(150, 100, 180, 0.8);
	}
	100% {
		-webkit-box-shadow: -2px -1px 80px 5px rgba(70, 10, 130, 0.5);
		-moz-box-shadow: -2px -1px 80px 5px rgba(70, 10, 130, 0.5);
		box-shadow: -2px -1px 80px 5px rgba(70, 10, 130, 0.5);
	}
}



/*
******************************************************************
* #modal video
******************************************************************/
#mdl-box {
	position: fixed;
	z-index: 1100;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
#mdl-box .mdl-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(../common/img/modal_bg.png);
}
#mdl-box #mdl-plr {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -270px;
	margin-left: -480px;
}
#mdl-box .btn {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -326px;
	margin-left: 303px;
}
#mdl-box .btn a {
	display: block;
	width: 179px;
	height: 50px;
	text-indent: -9999px;
	background-image: url(../common/img/v_close.png);
	background-position: 0 top;
}
#mdl-box .btn a:hover {
	background-position: 0 bottom;
}


/*
******************************************************************
* .video.js
******************************************************************/
#mdl-box .vjs-default-skin .vjs-slider-handle {
	background: #5cffd7;
}
#mdl-box .vjs-default-skin .vjs-play-progress {
	background: #0f7374;
}
#mdl-box .vjs-default-skin .vjs-volume-level {
	background: #0f7374;
}