@charset "utf-8";
/*ビデオ部分*/
#videowrapper{
	position: relative;
	width: 100vw;
	height: 100vh;
	max-height: 1080px;
	overflow: hidden;
}
video{
	display: block;
	z-index: -1000;
	position: absolute;
	min-width: 100vw;
	min-height: 100vh;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	-webkit-transform: translateY(-50%) translateX(-50%);
	-ms-transform: translateY(-50%) translateX(-50%);
}
#videoinner{
	position: absolute;
	top:0;
	width: 100vw;
	height: 100vh;
	max-height: 1080px;
	color:#FFF;
}
#videoinner mark{
	text-align: center;
	line-height:160%;
	color: #FFF;
	background:none;
	font-size:220%;
	letter-spacing:3px;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%,-50%);
	-moz-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	-o-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}
#videoinner mark span{
	display:inline-block;
}
#videoinner i a{
	padding:5px;
	position: absolute;
	color: #FFF;
	font-size:150%;
	letter-spacing:3px;
	z-index: 100;
	top: 65%;
	left: 50%;
	-webkit-transform: translate(-50%,-50%);
	-moz-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	-o-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	-webkit-transition: background-color 0.3s ease-in-out;
}
#videoinner i a:hover{
	text-decoration: none;
	background-color:rgba(0,0,0,0.3);
}

#scroll{
	position: absolute;
	bottom:50px;
	width: 100%;
	text-align: center;
	-webkit-animation:blink 2.0s ease-in-out infinite;
	-moz-animation:blink 2.0s ease-in-out infinite;
	animation:blink 2.0s ease-in-out infinite;
}
@-webkit-keyframes blink{
	30% {opacity:0.3;}
	100% {opacity:1;} }
@-moz-keyframes blink{
	30% {opacity:0.3;}
	100% {opacity:1;}
}
@keyframes blink{
	30% {opacity:0.3;}
	100% {opacity:1;}
}
h1{
	color:#FFF;
}
#linego img:hover{
	opacity: 0.7;
}
h2{
	width:auto;
	text-align:left;
	font-weight:bold;
	padding:0 0 0 30px;
	margin-bottom:20px;
	font-size:110%;
	background:url(../img/h2.png) left center no-repeat;
	letter-spacing:1px;
}
section{
	padding:20px;
}

/*アイコンナビ*/
.icon_navi{
	background:none;
	text-align:center;
	margin-bottom:0;
}
.icon_navi > div{
	font-size:90%;
	margin:10px 0;
	text-align:left;
}
.icon_navi > div > span{
	display:block;
}
.icon_navi .in_goto{
	font-size:80%;
	text-align:center;
	color:#fcfaf4;
	background:#AA0000;
	padding:5px;
	border-radius:5px;
	cursor:pointer;
}
.icon_navi .in_goto:hover{
	opacity:0.8;
}

/*２段組*/
.main-sub{
	width:1000px;
	overflow:hidden;
	display:table;
	margin-bottom:20px;
}
.main-sub .main{
	width:645px;
	display:table-cell;
}
.main > section:last-of-type{
	margin-bottom:0;
}
.main-sub .sub{
	width:355px;
	display:table-cell;
	vertical-align:middle;
}
.main-sub .main section:first-of-type,.main-sub .sub section:first-of-type{
	margin-top:0;
}

/*ついった*/
#twi{
	margin-left:40px;
}
/*４段組*/
.four-box{
	overflow:hidden;
	clear:left;
	margin: 30px 0;
}
.four-box > *{
	padding:0;
	margin-top:0;
	float:left;
	width:235px;
	clear:none;
	margin-left:20px;
}
.four-box > *:first-of-type{
	margin-left:0;
}

/*ニュース*/
#newslist{
}
#newslist li{
	margin:20px 0 0;
	padding:5px 10px;
	background:url(../img/news_arrow.png) 98% center no-repeat #F9F6EF;
	cursor:pointer;
}
#newslist li:hover{
	opacity:0.7;
}
#newslist li span{
	font-size:80%;
	display:block;
	padding:5px 8px 5px 0;
	border-radius:20px;
}

/*セクションナビ*/
.sec_navi{
	padding:30px;
	margin:20px 0;
	font-weight:bold;
	vertical-align:middle;
	cursor:pointer;
}
.sec_navi:hover{
	opacity:0.7;
}
.sec_navi img{
	width:40px;
	height:40px;
	vertical-align:middle;
}
#sn_self{
	background:url(../img/sn_self.jpg) left center;
}
#sn_a{
	background:url(../img/sn_access.jpg) left center;
}
#sn_c{
	background:url(../img/sn_contact.jpg) left center;
}
#sn_s{
	background:url(../img/sn_studioorque.jpg) left center;
	margin-bottom:0;
}

/*スマホ*/
@media screen and (max-width: 1366px) {
	#scroll{
		bottom: 80px;
	}
}
@media screen and (max-width: 999px) {
	.four-box{
		width:510px;
		margin:0 auto 30px;
	}
	.main-sub{
		width:100%;
        display: block;
	}
	.main-sub .main{
		display:block;
		margin:0 auto;
	}
	.main-sub .sub{
		display:block;
		margin:30px auto 0;
		width:645px;
	}
	#twi{
		margin:0;
		width:100%;
	}
	#twi #twitter-widget-0{
		width:100%!important;
		height:300px!important;
	}
	mark{
		font-size: 3.5vw !important;
	}
}
@media screen and (max-width: 669px) {
	video{
		height: 100vh;
	}
	.main-sub .main{
		width:100%;
	}
	.main-sub .sub{
		width:100%;
	}
	mark{
		font-size: 5vw !important;
	}
	#videoinner i a{
		font-size: 5vw;
	}
    #twi{
        padding: 0 10px;
    }
}
@media screen and (max-width: 589px) {
	.four-box{
		width:490px;
		margin:0 auto;
	}
	.icon_navi{
		width: 100%;
		margin: 20px 0;
	}
	.four-box > div:first-of-type{
		margin-left: 0 !important;
	}
}
@media screen and (max-width: 519px) {
	.four-box{
		width:auto;
		margin:0 20px !important;
	}
	.icon_navi > div > span{
		display:inline;
	}
	.sec_navi{
		display:none;
	}
}
@media screen and (max-width: 499px) {
}
@media screen and (max-width: 374px) {
	#sitename{
		line-height:1.8;
	}
}