@charset "UTF-8";

/* header設定
   =================================================================== */
.main_container {
	position:relative;	
}
#video_wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 1000px;
 
}
#video_wrapper .bg {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:100;
	background:#f1e5d9;	
}
#video_wrapper .loading {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:101;
	background:url(../img/movloading.gif) no-repeat center center ;	
}
#video_wrapper h2 {
	width:494px;
	height:109px;
	z-index:101;
	position:absolute;
    top: 50%;
    left: 50%;
    margin-top: -55px;
    margin-left: -247px;
}
#video_wrapper ul {
	position: relative;
    width: 100%;
    height: 100%;
	z-index:0;
}
#video_wrapper li {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	overflow:hidden;
}
#video_wrapper li:nth-child(n + 2) img {
     top: 0 !important;
}
#video_wrapper li img {
	position:absolute;
}
#video_wrapper h3.edit {
	width:272px;
	height:126px;
	z-index:101;
	position:absolute;
    top: 50%;
    left: 50%;
    margin-top: -63px;
    margin-left: -136px;
	display:none;
}
#movie {
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	z-index:0;	
}
.top_section {
	position:relative;
	margin-right:201px;
}
.top_section .name_container {
	position:absolute;
	top:0;
	left:0;
	width:232px;
	text-align:center;
	font-family: 'Montserrat', sans-serif;
	line-height:1.7;
	font-weight:400;
	font-size:11px;
	padding-top:62px;
}
.top_section .name_container h2 {
	line-height:0;
	margin-bottom:20px;	
}
.top_section .name_container .aside {
	display:block;
	margin-bottom:10px;	
}
.top_section .name_container p {
	clear:both;
	display:inline;
	font-size:12px;
	padding-bottom:7px;
	border-bottom:#000 1px solid;
}
.top_section .name_container a {
	display:block;
	width:93px;
	height:31px;
	overflow:hidden;
	margin:20px auto 0;	
}
.top_section .name_container a:hover img {
	margin-top:-31px;	
}
.top_section .top_container {
	margin-left:250px;

}
.top_section .top_container li {
	float:left;
	line-height:0;
}
.top_section .top_container .catalog li {
	width:33.33%;	
}
.top_section .top_container .catalog li img {
	width:100%;
	height:auto;	
}
.insta_container {
	position:absolute;
	right:0;
	bottom:0;
	width:186px;
	height:100%;
	overflow:hidden;
}

.insta_container h4 {
	line-height:0;
	padding:78px 0 60px;
	text-align:center;
	position:relative;
	z-index:1;
	background:#fff;
}
.insta_container li {
	line-height:0;
	display:block;	
}
.insta_container li img {
	width:100%;
	height:auto;	
}
.banner li {
	width:50%;
	float:left;
	line-height:0;
}
.banner li img {
	width:100%;
	height:auto;	
}
.banner li.news {
	background:#000;
	text-align:center;	
}
.banner li.news img {
	width:50px;
	height:auto;	
}
.banner li.news dt {
	line-height:0;
	margin-bottom:15px;
	padding-bottom:15px;
	background: url(../img/top/line.png) no-repeat center bottom ;	
}
.banner li.blog {
	text-align:center;	
}
.banner li.blog dt {
	line-height:0;
	margin-bottom:15px;
}
.banner li.blog dt img {
	width:184px;
	height:auto;
}
.banner li.news dd {
	font-family: 'Montserrat', sans-serif;
	font-size:10px;
	line-height:1.7;
	color:#fff;
}
.banner li.news dd a,.banner li.blog dd a  {
	display:block;
	width:92px;
	height:30px;
	overflow:hidden;
	margin:15px auto 0;
}
.banner li.news dd a:hover img ,.banner li.blog dd a:hover img {
	margin-top:-30px;	
}
.banner li.news dd a img,.banner li.blog dd a img {
	width:92px;
	height:60px;	
}
.banner li.blog dd {
	font-family: 'Montserrat', sans-serif;
	font-size:10px;
	line-height:1.7;
	color:#000;
}
.banner li.news dd span {
	display:block;
	margin-bottom:5px;	
}
#non_container {
	width:100%;
	height:100%;
	overflow:hidden;
	position: relative;	
	display:none;
}
#non_container .bg_c {
	position:absolute;	
}
.ranking_container {
	margin-top:20px;	
}
.ranking_container li {
	width:20%;
	float:left;
	margin-bottom:20px;
	position:relative;
	text-align:center;
}
.ranking_container li a {
	display:block;
	padding:0 15px;	
}
.ranking_container li a img {
	width:100%;
	height:auto;
}
.ranking_container li span {
	display:inline-block;
	margin-top:15px;
	border-bottom:1px solid #000;
	font-family: "Montserrat",sans-serif;
	line-height:1;
	padding-bottom:5px;
	width:20px;	
}
@media screen and (min-width:739px) and ( max-width:1200px) {
	.banner li.cms {
	width:100%;
	}
}
@media only screen and (max-width:1024px){
.ranking_container li {
   width: 33.333%;
}	
}
@media screen and (min-width:739px) and ( max-width:950px) {
	.top_section .name_container {
	position:relative;
	top:atuo;
	left:atuo;
	width:100%;
	text-align:left;
	padding-top:15px;
	margin-bottom:25px;
	}
	.top_section .top_container {
		margin-left:0px;
		margin-bottom:30px;
	
	}
	.top_section .name_container h2 {
		position:absolute;
		top:20px;
		left:0;
		
	}
	.top_section .name_container .aside,.top_section .name_container p{
		margin-left:100px;
		
	}
}
@media only screen and (max-width:738px){
	.top_section .name_container {
	position:relative;
	top:atuo;
	left:atuo;
	width:100%;
	text-align:left;
	padding-top:15px;
	margin-bottom:25px;
	}
	.top_section .top_container {
		margin-left:0px;
		margin-bottom:30px;
	
	}
	.top_section .name_container h2 {
		position:absolute;
		top:20px;
		left:0;
		
	}
	.top_section .name_container .aside,.top_section .name_container p{
		margin-left:100px;
		
	}
	.top_section {
    margin-right: 0;
    position: relative;
	}
	.banner li {
	width:100%;
	}
	.banner li.news,.banner li.blog {
	height:200px !important;
	padding-top: 30px !important;
	}
	.insta_container {
	position:relative;
	right:auto;
	bottom:auto;
	width:100%;
	height:100%;
	overflow:hidden;
	}
	.insta_container h4 {
		line-height: 0;
		padding: 28px 0 20px;
		position: relative;
		text-align: center;
		z-index: 1;
		border-top:#ccc solid 1px;
	}
	.insta_container li {
		width:33.33%;
		float:left;	
	}
	#non_container {
	margin-top:60px;	
	}
	.ranking_container li a {
    padding: 0 5px;
	}
	.ranking_container li span {
    font-size: 11px;
    margin-top: 10px;
	}
	#video_wrapper {
    margin-top: 58px;
	}
	#video_wrapper h2 {
    width: 234px;
	margin-left: -117px;
    margin-top: -22px;
	}
	#video_wrapper h2 img {
    width: 100%;
	height:auto;
	}
	#header h1 img {
    height: 33px;
	}
}