@charset "utf-8";





@media only screen and (max-width: 480px) {


.black-bg{
	background: #000;
height:100vh;
background: #ddd;
}

.loader{
	height: 100vh;
	position: relative;
	width:100%;
}
.loader__img {
	width:100%;
	height: 100vh;
	position: relative;
	width:100%;
}
.loader__img img {
	position:absolute;
	width:300px;
	height:auto;
	top: 50%;
	left: 50%;
	transform: translate( -50%,-50%);
}

.main{

padding: 0 40px 0 40px;
position:relative;
width:100%;
overflow:hidden;
margin: 0 0 0px 0;
height:100vh;
z-index: 10;
background: #000;
}


.main-inner{
	width:100%;
	padding: 30px 30px 21px 30px;
	height:auto;
	position:absolute;
	top: 0%;
	left: 0%;
	transform: translate(0%,0%);
	margin:auto;
	z-index: 30;
	text-align: center;
	background-color: rgba(255, 255, 255, 1);
}

.main-inner h1{
	width:100%;
	height:auto;
	padding:0;
	margin: 0px auto;
	line-height: 1;
	font-size: 18px;
	}

.main-inner h1 img{
	width:100%;
	height: auto;
}


.top-catch{
	width:80%;
}
.top-catch img{
	width:100%;
}


.top-navi-common{
	position:absolute;
	top: 30%;
	right: 0%;
	transform: translate(0%,-50%);
	width: 500px;
	height: 60px;
	display: none;
	justify-content: center;
	background: #fff;
	margin-top: 12px;
}

.top-navi-common a{
	display: inline-block;
	color:#333;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 2px;
	text-decoration: none;
	margin:9px 12px 0 12px;
	text-align: center;
}

.top-navi-common a:hover{
	opacity: 0.7;
}

.top-navi-common a span{
	display: block;
	color:#333;
	font-size: 11px;
	font-weight: 400;
	color:#999;
}


/*======================================

	main-inner-banner 
	
========================================*/

.main-inner-banner{
	position:absolute;
	bottom: 0%;
	left: 50%;
	transform: translate(-50%,0%);
	width: 70%;
	padding: 12px;
	background: #4a483b;
	display: block;
	justify-content: space-between;
	align-items:center;
}

.main-inner-banner-left{
	width: 100%;
	text-align: center;
}
.main-inner-banner-center{
	width: 100%;
	text-align: center;
}
.main-inner-banner-right{
	width: 100%;
	text-align: center;
}

.main-inner-banner-left img{
	width: 110px;
	margin: 15px auto 0 auto;
}

.main-inner-banner-h3{
	font-size: 18px;
	color: #fff;
	padding: 0;
	margin:  0 0 0px 0;
}

.main-inner-banner p{
	font-size: 11px;
	line-height: 1.5;
	padding: 0;
	margin: 0;
	color: #fff;
}

.main-banner-to-catalog{
	width: 100%;
	margin: 18px 0 0px 0;
}

.main-banner-to-catalog a{
	display: block;
	width: 100%;
	text-align: center;
	background: #fff;
	border: 1px solid #ddd;
	margin: 0px 0 12px 0;
	padding: 9px 9px 9px 9px;
	text-decoration: none;
	color:#000;
	font-size:12px;
}

.main-banner-to-catalog a:hover{
	opacity: 0.7;
}

.main-banner-to-catalog a span{
	font-size:13px;
	display: block;
	margin-top: 3px;
	color: #666;
}

.banner_youtube{
	width: 100%;
	margin-top: 15px;
	
}
.banner_youtube img{
	width: 100%;
	
}




/*======================================

	top-banner 
	
========================================*/

.top-banner{
	width: 100%;
	padding: 24px;
	background: #4a483b;
	display: block;
	justify-content: space-between;
	align-items:center;
}

.top-banner-left{
	width: 100%;
}
.top-banner-center{
	width: 100%;
}
.top-banner-right{
	width: 100%;
}

.top-banner-left img{
	width: 100%;
}

.top-banner-h3{
	font-size: 24px;
	color: #fff;
	padding: 0;
	margin:  0 0 12px 0;
}

.top-banner p{
	font-size: 18px;
	color: #fff;
}

.to-catalog{
	width: 100%;
	margin: 18px 0 18px 0;
}

.to-catalog a{
	display: block;
	width: 100%;
	text-align: center;
	background: #fff;
	border: 1px solid #ddd;
	margin: 0px 0 12px 0;
	padding: 12px 12px 12px 12px;
	text-decoration: none;
	color:#000;
	font-size:15px;
}

.to-catalog a:hover{
	opacity: 0.7;
}



/*======================================

	top-news-wrapper 
	
========================================*/

.top-news-wrapper{
	width: 100%;
	margin: 45px 0 0 0;
}

.top-news-h2{
	font-size:21px;
	color:#333;
	font-weight: 600;
	margin: 0 0 21px 0px;
}
.top-news-h2 span{
	display: inline-block;
	font-size:15px;
	color:#999;
	font-weight: 500;
	margin: 0 0 0 9px;
}

.top-news-box{
	display: block;
	justify-content: flex-start;
	align-items: center;
	margin: 0 0 18px 0;
}

.top-news-box-left{
	display: block;
	width: 100%;
}

.top-news-date{
	font-size: 15px;
	font-weight: 500;
	padding: 0;
	margin: 0;
}
.top-news-h3{
	font-size: 15px;
	font-weight: 600;
	padding: 0;
	margin: 0;
}


.top-to-news{
	margin: 60px 0 0 0;
}






}/*//end  min-width: 481px ///////////////////////*/











@media only screen and (min-width: 481px) {



.black-bg{
	background: #000;
height:100vh;
background: #ddd;
}

.loader{
	height: 100vh;
	position: relative;
	width:100%;
}
.loader__img {
	width:100%;
	height: 100vh;
	position: relative;
	width:100%;
}
.loader__img img {
	position:absolute;
	width:300px;
	height:auto;
	top: 50%;
	left: 50%;
	transform: translate( -50%,-50%);
}

.main{

min-width: 1040px;
padding: 0 40px 0 40px;
position:relative;
width:100%;
overflow:hidden;
margin: 0 0 0px 0;
height:100vh;
z-index: 10;
background: #000;
}


.top-20th{
	width:200px;
	padding: 0 0px 0 0px;
	height:auto;
	position:absolute;
	top: 80%;
	left: 78%;
	transform: translate(-20%,-50%);
	margin:auto;
	z-index: 30;
	text-align: center;
}

.main-inner{
	width:600px;
	padding: 30px 30px 21px 30px;
	height:auto;
	position:absolute;
	top: 35%;
	left: 0%;
	transform: translate(0%,-50%);
	margin:auto;
	z-index: 30;
	text-align: center;
	background-color: rgba(255, 255, 255, 1);
}

.main-inner h1{
	width:100%;
	height:auto;
	padding:0;
	margin: 0px auto;
	line-height: 1;
	font-size: 18px;
	}

.main-inner h1 img{
	width:100%;
	height: auto;
}


.top-catch{
	width:80%;
}
.top-catch img{
	width:100%;
}


.top-navi-common{
	position:absolute;
	top: 20%;
	right: 0%;
	transform: translate(0%,-50%);
	width: 700px;
	height: 60px;
	display: flex;
	justify-content: center;
	background: #fff;
	margin-top: 12px;
}

.top-navi-common a{
	display: inline-block;
	color:#333;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 2px;
	text-decoration: none;
	margin:9px 12px 0 12px;
	text-align: center;
}

.top-navi-common a:hover{
	opacity: 0.7;
}

.top-navi-common a span{
	display: block;
	color:#333;
	font-size: 11px;
	font-weight: 400;
	color:#999;
}


/*======================================

	top-banner 
	
========================================*/

.main-inner-banner{
	position:absolute;
	bottom: 5%;
	left: 50%;
	transform: translate(-50%,0%);
	width: 75%;
	padding: 24px;
	background: #4a483b;
	display: flex;
	justify-content: space-between;
	align-items:center;
}

.main-inner-banner-left{
	width: 15%;
	margin-right: 20px;
}



.main-inner-banner-left-w{
	width: 45%;
	margin-right: 20px;
}

.main-inner-banner-center{
	width: 50%;
}


.main-inner-banner-right{
	width: 400px;
}

.main-inner-banner-left img, .main-inner-banner-left-w img{
	width: 100%;
}

.main-inner-banner-h3{
	font-size: 30px;
	color: #fff;
	padding: 0;
	margin:  0 0 15px 0;
}

.main-inner-banner p{
	font-size: 14px;
	line-height: 1.5;
	color: #fff;
}

.main-banner-to-catalog{
	width: 100%;
	margin: 18px 0 18px 0;
}

.main-banner-to-catalog a{
	display: block;
	width: 100%;
	text-align: left;
	background: #fff;
	border: 1px solid #ddd;
	margin: 0px 0 12px 0;
	padding: 12px 12px 12px 12px;
	text-decoration: none;
	color:#000;
	font-size:15px;
}

.main-banner-to-catalog a:hover{
	opacity: 0.7;
}

.main-banner-to-catalog a span{
	font-size:13px;
	display: inline-block;
	margin-left: 6px;
	color: #666;
}

.banner_youtube{
	width: 100%;
	
}
.banner_youtube img{
	width: 100%;
	
}




/*======================================

	top-banner 
	
========================================*/

.top-banner{
	width: 100%;
	padding: 24px;
	background: #4a483b;
	display: flex;
	justify-content: space-between;
	align-items:center;
}

.top-banner-left{
	width: 20%;
}
.top-banner-center{
	width: 40%;
}
.top-banner-right{
	width: 30%;
}

.top-banner-left img{
	width: 100%;
}

.top-banner-h3{
	font-size: 30px;
	color: #fff;
	padding: 0;
	margin:  0 0 21px 0;
}

.top-banner p{
	font-size: 18px;
	color: #fff;
}

.to-catalog{
	width: 100%;
	margin: 18px 0 18px 0;
}

.to-catalog a{
	display: block;
	width: 240px;
	text-align: left;
	background: #fff;
	border: 1px solid #ddd;
	margin: 0px 0 12px 0;
	padding: 12px 12px 12px 12px;
	text-decoration: none;
	color:#000;
	font-size:15px;
}

.to-catalog a:hover{
	opacity: 0.7;
}



/*======================================

	top-news-wrapper 
	
========================================*/

.top-news-wrapper{
	width: 100%;
	margin: 45px 0 0 0;
}

.top-news-h2{
	font-size:24px;
	color:#333;
	font-weight: 600;
	margin: 0 0 21px 0px;
}
.top-news-h2 span{
	display: inline-block;
	font-size:18px;
	color:#999;
	font-weight: 500;
	margin: 0 0 0 9px;
}

.top-news-box{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	margin: 0 0 18px 0;
}

.top-news-box-left{
	display: block;
	width: 120px;
}

.top-news-date{
	font-size: 16px;
	font-weight: 500;
	padding: 0;
	margin: 0;
}
.top-news-h3{
	font-size: 16px;
	font-weight: 600;
	padding: 0;
	margin: 0;
}


.top-to-news{
	margin: 60px 0 0 0;
}




}/*//end  min-width: 769px ///////////////////////*/