@charset "UTF-8";
/*index*/
body{
	background: #000000;
	}
/*mainimg*/

#mainimg{
	position: relative;
	overflow: hidden;
	height: 755px;
	}

video{
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	background: #000000 url('../jpg/mainimg-2.jpg') center top no-repeat;
	background-size: cover;
	z-index: -100;
	}

/*index*/
#index{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	background: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0) 25%);
	background: -moz-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0));
	background: -webkit-gradient(linear, left top, left 25%, from(rgba(0,0,0,0.5)), to(rgba(0,0,0,0)));
	}

#entrance .proterial_logo {
	text-align: right;
}

@media screen and (max-width:699px) {
	#entrance .proterial_logo img {
		width: 96px;	
	}
}

/*entrance*/
#entrance{
	height: 662px;
	}

#entrance .title{
	float: right;
	display: block;
	text-decoration: none;
	text-indent: -9999px;
	width: 649px;
	height: 36px;
	margin-top: 260px;
	background: url('../png/title-2.png') left top no-repeat;
	}

#entrance a.popup-youtube{
	display: block;
	width: 125px;
	height: 35px;
	line-height: 35px;
	margin: 20px auto 0px;
	padding-left: 20px;
	background: #000000;
	background: rgba(0,0,0,.3);
	color: #ffffff;
	font-weight: bold;
	position: relative;
	}

#entrance a.popup-youtube:after{
	content: "";
	display: block;
	border: 8px solid transparent;
	border-left-width: 13px;
	border-left-color: #ffffff;
	position: absolute;
	top: 9px;
	left: 120px;
	}


#entrance nav.ouroffering{
	width: 970px;
	margin: 15px auto 25px;
	}

#entrance nav.ouroffering a{
	float: left;
	display: block;
	width: 207px;
	height: 232px;
	margin-right: 15px;
	padding: 12px;
	color: #ffffff;
	}

#entrance nav.ouroffering a span.js-matchHeight{
	font-size: 1.4em;
	line-height: 120%;
	display: block;
	/*margin-bottom: 1.2em;*/
	}

#entrance nav.ouroffering a.ouroffering_01{
	background: #877850;
	background: rgba(135,120,80,.85);
	}
#entrance nav.ouroffering a.ouroffering_02{
	background: #325078;
	background: rgba(50,80,120,.85);
	}
#entrance nav.ouroffering a.ouroffering_03{
	background: #7d4b69;
	background: rgba(125,75,105,.85);
	}
#entrance nav.ouroffering a.ouroffering_04{
	width: 208px;
	margin-right: 0px;
	background: #5a6e5f;
	background: rgba(90,110,95,.85);
	}
#entrance nav.ouroffering a.ouroffering_01:hover{
	background: rgba(135,120,80,1);
	}
#entrance nav.ouroffering a.ouroffering_02:hover{
	background: rgba(50,80,120,1);
	}
#entrance nav.ouroffering a.ouroffering_03:hover{
	background: rgba(125,75,105,1);
	}
#entrance nav.ouroffering a.ouroffering_04:hover{
	background: rgba(90,110,95,1);
	}

/*ouroffering*/
h3.ouroffering{
	margin-bottom: 20px;
	font-size: 2.1em;
	font-weight: normal;
	line-height: 130%;
	}

.ouroffering_txt{
	width: 696px;
	float: left;
	margin: 40px 0px 65px;
	}

.ouroffering_txt div.left{
	margin: 0px;
	width: 338px;
	}

.productlist{
	float: right;
	width: 232px;
	margin: 40px 0px;
	}

.productlist h3{
	height: 70px;
	margin-bottom: 25px;
	padding-left: 85px;
	font-size: 1.7em;
	font-weight: normal;
	line-height: 140%;
	}

.productlist ul li{
	margin-bottom: 1em;
	}

/*ouroffering_01*/
#ouroffering_01{
	background: #877850 url('../jpg/bg_ouroffering_01-2.jpg') center top no-repeat;
	color: #ffffff;
	}
#ouroffering_01 a:link{
	color: #ffffff;
	text-decoration: none;
	}

#ouroffering_01 a:active{
	color: #ffffff;
	text-decoration: none;
	}

#ouroffering_01 a:visited{
	color: #ffffff;
	}

#ouroffering_01 a:hover{
	color: #ffffff;
	text-decoration: none;
	}

#ouroffering_01 .submenu{
	background: #877850;
	background: rgba(135,120,80,0.7);
	}

#ouroffering_01 h2.line_135_fff{
	margin-bottom: 105px;
	}

.productlist h3.productlist_01{
	background: url('../gif/h3_productlist_01-2.gif') left top no-repeat;
	font-size: 1.4em;
	}

/*ouroffering_02*/
#ouroffering_02{
	background: #ffffff url('../jpg/bg_ouroffering_02-2.jpg') center top no-repeat;
	color: #325078;
	}

#ouroffering_02 .submenu{
	background: #325078;
	background: rgba(50,80,120,0.7);
	}

#ouroffering_02 h2.line_135_fff{
	margin-bottom: 105px;
	}

.productlist h3.productlist_02{
	background: url('../gif/h3_productlist_02-2.gif') left top no-repeat;
	font-size: 1.4em;
	}


/*ouroffering_03*/
#ouroffering_03{
	background: #ffffff url('../jpg/bg_ouroffering_03-2.jpg') center top no-repeat;
	color: #7d4b69;
	}

#ouroffering_03 .submenu{
	background: #7d4b69;
	background: rgba(125,75,105,0.7);
	}

#ouroffering_03 h2.line_135_fff{
	margin-bottom: 105px;
	}

.productlist h3.productlist_03{
	background: url('../gif/h3_productlist_03-2.gif') left top no-repeat;
	font-size: 1.4em;
	}


/*ouroffering_04*/
#ouroffering_04{
	background: #ffffff url('../jpg/bg_ouroffering_04-2.jpg') center top no-repeat;
	color: #5a6e5f;
	}

#ouroffering_04 a:link{
	color: #5a6e5f;
	text-decoration: none;
	}

#ouroffering_04 a:active{
	color: #5a6e5f;
	text-decoration: none;
	}

#ouroffering_04 a:visited{
	color: #5a6e5f;
	}

#ouroffering_04 a:hover{
	color: #5a6e5f;
	text-decoration: none;
	}

#ouroffering_04 .submenu{
	background: #5a6e5f;
	background: rgba(90,110,95,0.7);
	}

#ouroffering_04 h2.line_135_fff{
	margin-bottom: 105px;
	}

.productlist h3.productlist_04{
	background: url('../gif/h3_productlist_04-2.gif') left top no-repeat;
	font-size: 1.4em;
	}

/* Media Queries
==========================================================================*/
@media screen and (min-width: 979px) {
}

@media screen and (max-width:799px) {
body{
	background: #000000 url('../jpg/mainimg_sp-2.jpg') center top no-repeat;
	}
#index{
	background: none;
	}

#mainimg{
	display: none;
	}
#entrance{
	height: auto;
	}

#entrance nav.ouroffering{
	width: 100%;
	margin: 30px auto 25px;
	}

#entrance nav.ouroffering a{
	width: 156px;
	width : -webkit-calc(25% - 35px);
	width : calc(25% - 35px);
	height: 240px;
	margin-right: 15px;
	}
#entrance nav.ouroffering a.ouroffering_04{
	width: 156px;
	width : -webkit-calc(25% - 36px);
	width : calc(25% - 36px);
	}

/*ouroffering*/
h3.ouroffering{
	float: none;
	width: 100%;
	}

.ouroffering_txt{
	width : 67%;
	}

.ouroffering_txt div.left{
	width : -webkit-calc(50% - 20px);
	width : calc(50% - 20px);
	}

.productlist{
	width : -webkit-calc(33% - 30px);
	width : calc(33% - 30px);
	}
}

@media screen and (max-width:699px) {

#entrance .title{
	width: 320px;
	height: 27px;
	margin-top: 100px;
	/* -webkit-background-size: 320px 27px;
	-o-background-size: 320px 27px;
	-khtml-background-size: 320px 27px; */
	background-size: contain;
	}

#entrance nav.ouroffering a{
	float: none;
	display: block;
	width: 90%;
	width : -webkit-calc(100% - 24px);
	width : calc(100% - 24px);
	height: auto;
	margin-bottom: 10px;
	}
#entrance nav.ouroffering a.ouroffering_04{
	width: 90%;
	width : -webkit-calc(100% - 24px);
	width : calc(100% - 24px);
	margin-bottom: 0px;
	}

h3.ouroffering{
	font-size: 1.8em;
	}

.ouroffering_txt{
	float: none;
	width: 100%;
	margin: 25px 0px 0px;
	}

.ouroffering_txt div.left{
	float: none;
	width: 100%;
	}

#ouroffering_01 h2.line_135_fff,#ouroffering_02 h2.line_135_fff,#ouroffering_03 h2.line_135_fff,#ouroffering_04 h2.line_135_fff{
	margin-bottom: 30px;
	}

.productlist{
	float: none;
	width: 100%;
	margin: 20px 0px 40px;
	}

.productlist h3{
	height: 35px;
	margin-bottom: 25px;
	padding-left: 50px;
	font-size: 1.8em;
	}

.productlist h3.productlist_01,.productlist h3.productlist_02,.productlist h3.productlist_03,.productlist h3.productlist_04{
	-webkit-background-size: 35px 35px;
	-o-background-size: 35px 35px;
	-khtml-background-size: 35px 35px;
	background-size: 35px 35px;
	}
#ouroffering_01,#ouroffering_02,#ouroffering_03,#ouroffering_04{
	-webkit-background-size: 960px 200px;
	-o-background-size: 960px 200px;
	-khtml-background-size: 960px 200px;
	background-size: 960px 200px;
	}
}
