@charset "utf-8";
body {
	background:#fff;
	position:relative;
}
#wrapper{
	width:100%;
	position:relative;
	overflow:hidden;
	margin-top:70px;
}
.top_wrap{
	position:absolute;
	left:0;
	top:0;
	width:100%;	
}
.bg_set{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
}
.bg_set h1 {
	margin:0;
	padding:0;
}
.bg_set .top_mv {
	position: relative;
	width:auto;
	margin:0 auto;
}
.top_mv img {
	display:block;
	width:100%;
	margin:0 auto;
}
.synopsis_wrap{
	position:absolute;
	left:100%;
	top:0%;
	background:url(../img/backgrounds/synopsis.jpg) no-repeat center center;
	background-size:cover;
	width:100%;	
}

.menu{
	position:absolute;
	width:167px;
	height:42px;
	line-height:42px;
	text-align:center;
	color:#a63535;
	left:0;
	top:0;
}


#trailer{
	position:absolute;
	width: 209px;
	height:42px;
    left: 50%;
    margin-left: 10px;
    top: 69%;
	font-size:1.3em;
	font-weight: 100;
/*	font-family: "alternate-gothic-no-1-d";*/
	font-family:'Oswald', sans-serif;
	letter-spacing:0.1em;
	border:solid 1px #5e1e1b;
}

#sinopsis_over{
	position:absolute;
	left:0;
	top:0;
	width:0;
	height: 39px;
	border-left:solid 1px #B74646;
	border-top:solid 1px #B74646;
	border-bottom:solid 1px #B74646;
	opacity:0;
}
.e_mask{
	position:absolute;
	right:0;
	top:0;
	width:0;
	height:40px;
	overflow:hidden;
	opacity:0;
}
.e_square_o{
	position:absolute;
	right:0;
	top:0;
	width:40px;
	height:41px;
	background:#B74646;
}



.e_square{
	position:absolute;
	right:0;
	top:0;
	width:40px;
	height:41px;
	background:#a63535;
	opacity:0;
}

.triangle-right{
    position:absolute;
    top: 50%;
	left:50%;
	margin-left:-3px;
	margin-top:-6px;
    width: 0px;
    height: 0px;
    padding: 0px;
    display: inline-block;
    border-top: 6px solid transparent;
    border-left: 8px solid #000;
    border-bottom: 6px solid transparent;
    transition: margin-left 0.2s ease 0s;
}

#share{
    position: absolute;
    right: 14px;
    bottom: 15px;
    font-size: 10px;
    color: #777;
    overflow: hidden;
    width: 120px;
    height: 15px;
}
.s_text{
/*
	position:absolute;
	left:0;
	top:0;
	cursor:pointer;
*/
	position:absolute;
	right: 90px;
	bottom: 15px;
	font-size:10px;
	color:#777777;
	cursor:pointer;

}
.s_text:hover{
	color:#FFF;
}

#close{
	position:absolute;
	left:15px;
	top:-55px;
	cursor:pointer;
	opacity:0.9;
}
#close:hover{
	opacity:1;
}

#loading_bar{
	width:0%;
	height:1px;
	background:#a63535;
	position:absolute;
	left:0;
	top:50%;
	z-index:990;
}
#loading_img{
	position:absolute;
	left:50%;
	top:50%;
	margin-top:-40px;
	margin-left:-40px;
	z-index:990;
	width:80px;
	height:80px;
	opacity:0;
}
#count{
	font-family: 'Source Sans Pro', sans-serif;
	font-weight:400;
	text-align:center;
	color:#888;
	line-height:80px;
	height:80px;
	width:80px;
	font-size:20px;
	letter-spacing:3px;
}

.target{
	color:#FFF !important;
}

#soundButton{
	position:absolute;
	left:15px;
	width:20px;
	height:12px;
	cursor:pointer;
	display:block;
	bottom: 18px;
}
.bars{
	position:absolute;
	width:1px;
	height:12px;
	background:#777;
	bottom:0;
}
.n1{
	position:absolute;
	left:0;
}
.n2{
	position:absolute;
	left:3px;
}
.n3{
	position:absolute;
	left:6px;
}
.n4{
	position:absolute;
	left:9px;
}
.n5{
	position:absolute;
	left:12px;
}


.pc_open{
	position:absolute;
	left:50%;
	margin-left:-153px;
	bottom:10%;	
}
.sp_open{
	width:100%;
	position:absolute;
	top:72%;
	left:0;
}
.sp_in{
	position:relative;
	margin:0 20%;
	text-align:center;
}

#trailer_btn{
	position:absolute;
	left:50%;
	bottom:19.5%;
	margin-left:-160px;
}

.nav{
	display:block;
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:70px;
	background:#fff;
	z-index:100;
	
}
.nav ul{
	margin:0;
}
.nav li{
	float:left;
	position:relative;
	line-height:none;
	font-size:14px;
	color:#9A918C;
	height:70px;
	line-height:50px;
	width:auto;
	margin:0 20px;
	font-family: 'Lora', serif;
	cursor:pointer;
	letter-spacing:0.3em;
	font-weight:bold;
}
.nav li.logo{
	float:right;
	position:relative;
	line-height:none;
	font-size:14px;
	color:#9A918C;
	height:70px;
	line-height:50px;
	width:auto;
	margin:0 20px;
	font-family: 'Lora', serif;
	cursor:pointer;
	letter-spacing:0.3em;
	font-weight:bold;
}
.nav .on {
	position:absolute;
	top:0;
	left:0;
	opacity:0;
}
#trailer_btn{
	display:none;
}
.nav a {
	display:block;
}
.nav a span {
    display: block;
    width:0px;
	height:3px;
	margin:-2px auto 0;
	background:#004da0;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -o-transition: 0.4s;
    -ms-transition: 0.4s;
    transition: 0.4s;
}
.nav .here span,
.nav a:hover span {
    width:100%;
}

.about {
	width:100%;
	min-width:1000px;
	padding:16px 0 130px;
	background:url(../img/top/about_bg.jpg) center center no-repeat;
	background-size:cover;
}
.about .inner {
	width:980px;
	margin:0 auto;
}
.about .scroll {
	display:block;
	margin:0 auto 100px;
}
.about h2 {
	text-align:center;
	margin:0 0 40px;
}
.about ul {
	width:980px;
	margin:20px 0;
}
.about ul:after {
    content: "";
    display: block;
    clear: both;
}
.about li {
	float:left;
	position:relative;
	width:245px;
	height:180px;
	margin:0;
}
.about .on {
	display:block;
	position:absolute;
	top:0;
	left:0;
	width:245px;
	height:180px;
	margin:0;
	opacity:0;
}

/* 画面外にいる状態 */
.fadein {
    opacity : 0;
    transform : translate(0, 50px);
    transition : all 700ms;
}
 
/* 画面内に入った状態 */
.fadein.scrollin {
    opacity : 1;
    transform : translate(0, 0);
	transition : all 700ms;
}


.btn_pagetop {
	position: fixed;
	bottom: 0;
	right: 40px;
	width:150px;
	height:40px;
	z-index:800;
}
.btn_pagetop p {
	display:block;
	width:150px;
	height:40px;
	margin:0;
	padding:0;
	background:#7fbe27;
	border-radius:5px 5px 0 0;
	cursor:pointer;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -o-transition: 0.4s;
    -ms-transition: 0.4s;
    transition: 0.4s;
}
.btn_pagetop img {
	display:block;
	width:150px;
	heigt:40px;
}
.btn_pagetop p:hover {
	opacity:0.5;
}


/*-------------------------------------
画面サイズ640px以下設定用のCSS
---------------------------------------*/
@media screen and (min-width: 0px) and (max-width: 640px) {
	.bg_set{
		position:absolute;
		left:0;
		top:0;
		width:100%;	
	}
	#trailer_btn {
		position: absolute;
		left: 50%;
		margin-left: -160px;
	}
	#sp_banner{
		position:absolute;
		bottom:45px;
		left:50%;
		margin-left:-90px;
	}

	.nav{
		display:none;
	}

	#trailer_btn{
		display:block;
	}

	#soundButton{
		display:none;
	}
	.s_text:hover{
		color:#777;
	}
	#hash a:hover{
		text-decoration:none;
		font-size:15px;
		color:#777;
	}
	
	#trailer_btn{
		position:absolute;
		left:50%;
		bottom:32%;
		margin-left:-160px;
	}
	#videoPlayer {
		position:absolute;
		width:320px !important;
		height:213px !important;
		z-index:999;
		padding:0;
		left:50%;
		top:70px;
		margin-left:-160px !important;
		z-index:990;
	}

}


/* aisatsu */
.btn_aisatsu {
	display:none;
	position:absolute;
	top :14%;
	right:1%;
	width:12.5%;
    -webkit-transition: 0.6s;
    -moz-transition: 0.6s;
    -o-transition: 0.6s;
    -ms-transition: 0.6s;
    transition: 0.6s;
}
.btn_teachin {
	display:none;
	position:absolute;
	top :24%;
	right:1%;
	width:12.5%;
    -webkit-transition: 0.6s;
    -moz-transition: 0.6s;
    -o-transition: 0.6s;
    -ms-transition: 0.6s;
    transition: 0.6s;
}
.btn_world {
	display:none;
	position:absolute;
	bottom :5%;
	right:23%;
	width:25%;
    -webkit-transition: 0.6s;
    -moz-transition: 0.6s;
    -o-transition: 0.6s;
    -ms-transition: 0.6s;
    transition: 0.6s;
}
.btn_world:hover {
  opacity:0.5;
}

.hitnow {
	display:none;
	position:absolute;
	bottom :5%;
	right:3%;
	width:19%;
}
.btn_aisatsu img,
.btn_teachin img,
.btn_world img,
.hitnow img {
	display:block;
	width:100%;
}
.btn_scale {
	-webkit-animation: scale 0.7s ease-in-out;
	animation: scale 0.7s ease-in-out;
}
@-webkit-keyframes scale {
  0% { -webkit-transform: scale(0.7) }
  100% { -webkit-transform: scale(1.0) }
}

@keyframes scale {
  0% { transform: scale(0.7) }
  100% { transform: scale(1.0) }
}
.btn_anime {
    -moz-transform: rotate(-20deg);
    -webkit-transform: rotate(-20deg);
    -o-transform: rotate(-20deg);
    -ms-transform: rotate(-20deg);
    transform: rotate(-20deg);
}