@charset "utf-8";

/* Crossin Techno CSS [Default Style] ver 1.0 */

/* フォルダ font 内の源の角ゴシック使用準備 */
@font-face {  font-family: "myFontExtraLight";  src: url("font/SourceHanSansJP-ExtraLight.woff") format('woff');}
@font-face {  font-family: "myFontLight";  src: url("font/SourceHanSansJP-Light.woff") format('woff');}
@font-face {  font-family: "myFontNormal";  src: url("font/SourceHanSansJP-Normal.woff") format('woff'); }
@font-face {  font-family: "myFontRegular";  src: url("font/SourceHanSansJP-Regular.woff") format('woff');}
@font-face {  font-family: "myFontMedium";  src: url("font/SourceHanSansJP-Medium.woff") format('woff'); }
@font-face {  font-family: "myFontBold";  src: url("font/SourceHanSansJP-Bold.woff") format('woff');}
@font-face {  font-family: "myFontHeavy";  src: url("font/SourceHanSansJP-Heavy.woff") format('woff');}
 
.ggel{  font-family: "myFontExtraLight";}
.ggl {  font-family: "myFontLight";}
.ggn {  font-family: "myFontNormal";}
.ggr {  font-family: "myFontRegular";}
.ggm {  font-family: "myFontMedium";}
.ggb {  font-family: "myFontBold";}
.ggh {  font-family: "myFontHeavy";}


/* ****************************************************************************** */
/* 基本設定 */ 
/* ****************************************************************************** */

/* 480px以降(スマホ縦?PC) */
@media screen and (min-width:480px){

}

/* 768px以降(タブレット?PC) */
@media screen and (min-width:768px){

}

/* 1024px以降(PC) */
@media screen and (min-width:1024px){

}

* {
    margin: 0;
    padding: 0;
    font-family:'myFontNormal','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
    line-height: 180%;
    color: #595757;
}

html,body { width: 100%; height:100%; }

body {
    font-size: 18px;
    /* background-color: #361047; */
	-webkit-text-size-adjust: 100%;
}

h1,h2,h3,h4 { font-weight: normal; }
h1 {
	position: absolute;
	float: right; 
	width: 100%;
	font-size: 14px;
	text-align: right;
	color: #fff;
	z-index: 9999;
}

h2 { font-size: 54px; color: #a4803d; font-family: "myFontExtraLight"; }
h3 { font-size: 24px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }

hr {
	width: 100%;
	border: 0;
    height: 1px;
    background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
    background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
    background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
    background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
	margin: 40px 0px;
}

.cf { clear: both; }


/* ****************************************************************************** */
/* コンテナ                                                                       */ 
/* ****************************************************************************** */
#baseContainer {
	width: %;
	background-color: #fff;
	margin: 0px auto 0px auto;
	border-bottom: solid 1px #fff;
	min-height: 450px;
}

/* 1024px以降(PC) */
@media screen and (min-width:1024px){

}

@media (max-width: 1250px) {
	#baseContainer {
		width: 100%;
	}
}

#container {
	width: 850px;
	margin: 0px auto 0px auto;
	/* padding: 10px 20px 10px 20px; */
	padding: 10px 20px 10px 10px;

	/* width: 960px; */
	/* marign: 0px auto; */

}

@media (max-width: 1250px) {
	#container {
		width: 95%;
		padding: 10px 0px 10px 0px;
	}
}

#explainContainer {
	
}

	#explainContainer .bge {
		width: 100%;
        background-color: rgba(0,0,0,0.7);
        color: #fff;
        margin: 0px auto;
        text-align: center;
		
	}

@media (max-width: 1250px) {
	#explainContainer {
		display: none;
	}

}

#companyLogoContainer {
	width: 100%;
    height: 100px;
	font-size: 20px;
    color: #000;
}

@media (max-width: 1250px) {
	#companyLogoContainer {
	    height: 100px;
        font-size: 20px;
	}
}

#companyLogoContainer div.logo{
    width: 240px;
    margin: 50px auto 0px auto;
    
}

/* ****************************************************************************** */
/* アイキャッチ                                                                   */ 
/* ****************************************************************************** */

#bannerContainer {
	position: relative;
	margin: 0px auto 0px auto;
	width: 100%;
    height: 675px;
    background-size: cover;
    background-image: url(images/banner.png);
    background-position: center;
}

@media (max-width: 1250px) {
	#bannerContainer {
		width: 100%;
        height: 300px;
	}

	#header {
		margin-bottom: 25px;
	}
}





/* ****************************************************************************** */
/* ヘッダ                                                                         */ 
/* ****************************************************************************** */
#header {
	display: block;
	width: 100%;
}

#header IMG {
	width: 100%;
}

@media (max-width: 1250px) {
	#header {
		height: auto;
	}
}

#headerMini {
	display: none;
	width: 100%;
	background-color: #fff;
	height: 125px;
	background-image:url(images/smf_header_back.png);
	background-repeat:repeat-x;
}

@media (max-width: 1250px) {

	#headerMini {
		display: block;
	}

}





/* ****************************************************************************** */
/* 商品紹介                                                                       */ 
/* ****************************************************************************** */
#productContainer {
	margin: 0px auto;
    width: 1200px; 

}

#productBox {
	position: static;
    float: left;
    width: 50%;
    margin: 80px 0px;
}


@media (max-width: 1250px) {
	#productContainer {
    	width: 100%;
    }
	#productBox {
		position: static;
		float: none;
		width: 90%;
		margin: 140px auto;
	}
}


/* ****************************************************************************** */
/* マップ                                                                         */ 
/* ****************************************************************************** */
.maps {
	padding: 0px;
	margin: 0px 0px 0px 0px;
	border-top: none;
	border-bottom: solid 3px #CCC;
	z-index;0;
}

#map_canvas {
	width:100%;
	height:500px;
}

/* ****************************************************************************** */
/* フッタ                                                                         */ 
/* ****************************************************************************** */
#footer {
	width: 100%;
	padding: 20px 0px 20px 0px;
	background-color: #333;
	color: #fff;
	text-align: center;
	line-height: 200%;
	z-index: 9999;	
}

/* ****************************************************************************** */
/* メニュー                                                                       */ 
/* ****************************************************************************** */
#fixedBox {
	width: 100%; 
	text-align: center;
	margin: 0px auto 0px auto;
	font-size: 20px;
	color: #fff;
	background-color: rgba(200,126,34,0.8);
	/* background-color: rgba(211,84,34,0.8); */
    
	padding: 0px 0px 0px 0px;
	background-color: 
	height: auto;
}

@media (max-width: 1250px) {
	#fixedBox { display: none; }	
}


.fixed {
    position: fixed;
    top: 0;
    z-index: 10000;
	height: 40px;
	width: 100%;
	margin-top: 10px;
}


DIV.menuButton {
	font-family: "myFontExtraLight";
	padding: 20px 0px 0px 0px;
	color: #fff;
	height: 60px;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	DIV.menuButton {
		height: 60px;
		padding: 15px 0px 0px 0px;
	}
}


DIV.menuButton:hover {
	color: #000;

}

#fixedBox a{
	color:#fff;
	-webkit-transition: all 1s ease-out;
	-moz-transition: all 1s ease-out;
	-o-transition: all 1s ease-out;
	transition: all 1s ease-out;
}
 
#fixedBox a:hover{
	color:#000;
	-webkit-transition: all 0.4s ease;
	-moz-transition: all 0.4s ease;
	-o-transition: all 0.4s ease;
	transition: all 0.4s ease;
}

#fixedBox .button {
	position: relative;
	float: left;
	font-size: 22px;
	width : 150px;
	font-family: "myFontNormal";	
	color: #fff;
}

#fixedBox .button:hover {
	background: #fff;
}



/* ****************************************************************************** */
/* スマホメニュー                                                                 */ 
/* ****************************************************************************** */
#smfMenu {
	display: none;	
	width: 100%;	
	padding: 40px 0px;
	background-color: #fff;
}

#smfMenu DIV.button {
	width: 95%;
	height: 75px;
	background-color: #111;
	border: solid 1px #333;
	margin: 0px auto;
	padding: 25px 0px 0px 0px;
	color: #fff;
}

#smfMenu a,a:hover, a:active, a:link {
	font-size: 30px;
	color: #fff;
	text-decoration:none;
}

@media (max-width: 1250px) {
/*
	#smfMenu {
		display: block;	
	}

	#fixedBox {
		display: none;
	}
*/
}

/* ****************************************************************************** */
/* セクション　カバーアート */ 
/* ****************************************************************************** */
.section-cover1 { background-size: cover; background-repeat: repeat; background-image: url(images/profile-back.jpg); background-position: center; height: 840px; width: 100%; }
.section-cover1-5 { height: auto; width: 98%; display: none; }
.section-cover2 { background-size: cover; background-repeat: repeat; background-image: url(images/profile.png); }
.section-cover3 { background-size: cover; background-repeat: repeat; background-color: #2b8ac3 !important; }
.section-cover4 { width: 95%; background-size: cover; background-repeat: repeat; background-image: url(images/suikinkutu-back.png); }
.section-cover5 { background-size: cover; background-repeat: repeat; background-color: #fff !important; }
.section-cover6 { background-size: cover; background-repeat: repeat; background-image: url(images/okyou-back.jpg); }

@media (max-width: 1250px) {
	.section-cover1 {
		height: 300px;
    }
}

/* ****************************************************************************** */
/* 代表メッセージ                                                                     */ 
/* ****************************************************************************** */
.messageBox1 {
	position: relative;
	top: 20px;
	left: 25%;
	text-align: left;
	color: #fff;
    width: 100px;
}

.messageBox3 {
	position: relative;
	float: left;
	top: -550px;
	left: 60%;
	width: 450px;
	height: auto;
}

.messageBox2 {
	position: relative;
	float: left;
	top: -50px;
	left: 35%;
	width: 400px;
	height: auto;
	color: #000;
}

.messageBox1-smf {
	width: 90%;
	font-size: 28px;
	margin-top: 20% auto 0px auto;
	padding: 40px 20px 0px 20px;
	text-align: center;

}

.messageBox2-smf {
	width: 90%;
	font-size: 28px;
	margin: 0px auto;
	padding: 20px 20px 20px 20px;
	text-align: center;
}

.messageBox3-smf {
	display:none;
	width: 90%;
	font-size: 28px;
	margin: 0px auto;
	padding: 20px;
	text-align: center;
	
}

@media (max-width: 1250px) {

	.section-cover1-5 {
		display: block;	
	}

	.messageBox1-smf {
		display:block;
    }
	
	.messageBox2-smf {
		display:block;
	}
	
	.messageBox3-smf {
		display:block;
	}

	.messageBox1 {
		display: none;
	}
	.messageBox2 {
		display: none;
	}
	.messageBox3 {
		display: none;
	}


}

/* ****************************************************************************** */
/* スライダー                                                                     */ 
/* ****************************************************************************** */
.profile-table {
	color: #fff;
	margin: 0px auto;
	width: 75%;
}

.profile-table TD,TH {
	color: #fff;
	text-align: left;
	vertical-align: top;
}


/* =======================================
	ページトップに戻るボタン
======================================= */
.pagetop {
	display: none;
	position: fixed;
	bottom: 30px;
	right: 0px;
	z-index;9999;
	background-image:url(images/top_icon.png);
	background-repeat: no-repeat;
	width: 52px;
	height: 105px;
}

.pagetop a {
	display: block;
	width: 80px;
	height: 70px;
	background-color: #d35400;
	text-align: center;
	color: #fff;
	font-size: 36px;
	text-decoration: none;
	line-height: 50px;
	border-radius: 50px;
	padding-top: 10px;
}

@media (max-width: 1250px) {
	.pagetop {
		background-image:url(images/top_icon_s.png);
		background-repeat: no-repeat;
		width: 30px;
		height: 61px;
		right: 0px;
	}

	.pagetop a {
		width: 40px;
		height: 40px;
        padding: 0px 0px 0px 0px;
		font-size: 20px;
	}
}


/* =======================================
	ループスライダースタイル
======================================= */

#loopslider {
	margin: 0 auto;
	width: 100%;
	height: 235px;
	text-align: left;
	position: relative;
	overflow: hidden;
}

#loopslider ul {
	width: 100%;
	float: left;
	display: inline;
	overflow: hidden;
	padding: 30px 0px;
}

#loopslider ul li {
	width: 235px;
	height: 235px;
	float: left;
	display: inline;
	overflow: hidden;
	background-color: #fff0f0;
	margin: 0px 0px;
}

#loopslider #loopleft {
	display:none;
	top: 0;
	left: 0;
	width: 20px;
	height: 200px;
	line-height: 200px;
	color: #fff;
	text-align: center;
	font-weight: bold;
	background: #555;
	position: absolute;
	overflow: hidden;
	cursor: pointer;
	z-index: 99;
}
#loopslider #loopright {
	display:none;
	top: 0;
	right: 0;
	width: 20px;
	height: 200px;
	line-height: 200px;
	color: #fff;
	text-align: center;
	font-weight: bold;
	background: #555;
	position: absolute;
	overflow: hidden;
	cursor: pointer;
	z-index: 99;
}

#loopslider ul:after {
	content: ".";
	height: 0;
	clear: both;
	display: block;
	visibility: hidden;
}

#loopslider ul {
	display: inline-block;
	overflow: hidden;
}

#loopslider div.item {
    position: static;
    width: 225px;
    height: 205px;
    float: left;
    padding: 5px;
    background-size: cover;
	border: solid 10px #fff;
}



/* =======================================
	ループスライダースタイル
======================================= */

.linkAnimation	{
	width: 400px;
	color: #999;
	/* -webkit-transition: background-color 1s linear; */
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	transition: all 0.2s linear;
}

@media (max-width: 1250px) {
	.linkAnimation	{
		width: 97%;
	}
	.linkAnimation a {
		font-size: 20px;
	}
}


.linkAnimation:hover	{
	color: #000;
}