@charset "utf-8";

/*************************************************"
			default
*************************************************/
body {margin: 0px;padding: 0px;font-size:15px;color:#444;position: relative;height: 100%;background-color:#fff;letter-spacing:0.05em;
			text-size-adjust: none;
			-webkit-text-size-adjust: none;/*iphoneの文字サイズの自動調整解除*/
			-webkit-font-smoothing: antialiased;	/*OSXでのフォントのレンダリング方法を調整*/
			/*Macでは普通の游ゴシックが適用され、Windowsでは「 游ゴシック Medium」になる*/
		font-family: Roboto, "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", Hiragino Kaku Gothic Pro, "ヒラギノ角ゴ Pro W3" , "メイリオ", sans-serif;
			-webkit-font-feature-settings: 'palt' 1;	/*fontの自動カーニング*/
			font-feature-settings: 'palt' 1;}}

@media all and (-ms-high-contrast:none) {
body{font-family: "メイリオ", Meiryo, sans-serif !important;}		/*IE11でline-heightがずれるための処置*/
}


/* Google Fonts をWeb Font Loadeスクリプトで非同期で読み込む--Noto Serif JPの、light300、Regular 400、Medium 500
.minfont300{font-family:'Noto Serif JP', serif;font-weight:300;}
.minfont400{font-family:'Noto Serif JP', serif;font-weight:400;}
.minfont500{font-family:'Noto Serif JP', serif;font-weight:500;}
*/


a         {color: #3155a4;text-decoration:none;transition: 0.8s;}/*hover ゆっくり変わる*/
a:link    {color: #3155a4;text-decoration:none;}
a:visited {color: #5C93AD;text-decoration:none;}
a:active  {color: #3155a4;text-decoration: underline;}
a:hover   {color: #669900;text-decoration: underline;}

h1,h2,h3,h4,h5,p,ol,ul,li,span,dl,dt,dd {margin:0;padding:0;font-weight:normal;}
	
img {border:none;margin:0;padding:0;vertical-align:middle;}
a:hover img {opacity: 0.7;-webkit-transition: 0.3s ease-in-out;transition: 0.3s ease-in-out;}

ul {margin:0px;padding:0px;/*list-style:none none outside;*/}
ol{margin:0;padding:0;}

p.clear		{clear:both;line-height:0px;display:block;}
div.clear {clear:both;}

hr{ border:none;border-top:1px solid #ccc;height:1px;}
/*hr{background:url(../images/hr_bg.png) repeat-x 0 0;height:10px;border: 0;}*/

.dotline{border-top: 1px dotted #aaa;line-height: 1px;height: 1px;}
.solidline{border-top: 1px solid #bbb;line-height: 1px;height: 1px;}

.strong{font-weight:bold;}

table{border-collapse: collapse;}


/*padding や border-width がwidth内に収まる*/
*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;}


/*clearfix--------------------*/
.cf:before,
.cf:after {content: " ";display: table;} 
.cf:after {clear: both;} 
.cf{*zoom: 1;}



/*---電話番号用---768px以上の解像度だけpointer-eventsを無効にして、PCのときはTELクリックの反応なし---*/
@media screen and (min-width: 768px) {	
	a[href^="tel:"] {pointer-events: none;}
}


/*----トップローディング ---------------------*/
#loader {position: fixed;z-index:900;top: 0;text-align: center;width: 100%;height: 100%;background:#fff;}
#load-text {position: absolute;font-size:11px;color: #666;text-align: center;width: 100%;top:46%;padding-top:95px;height:130px;display: block;
						background:url(../img/loading.png) no-repeat center center,url(../js/loading.svg) no-repeat center top;background-size: 140px,auto;}


/* ページの各セクション-------------------*/
.section{padding:80px 0 80px 0;}


/*全ページ共通のテーブル構造　-------------------*/
#wrapper{position: relative;z-index:1;width:100%;background:#fff;overflow: hidden;font-size:108%;}
.container{position: relative;width:1100px;margin:0 auto;padding:0;line-height:1.9;}
.naka-cont{padding:0 5%;}

/*ページ上部右の出てくるナビmenu---*/
#menubtn{display:none;}
#navi_sp{display:none;}


/*lozad.jによるアニメーション------*/
.fadein-			{opacity: 0;transition: opacity 0.5s linear,transform 1s ease-out;}
.fadein-left	{opacity: 0;transform: translate3d(-300px, 0, 0);transition: opacity 0.5s linear,transform 1s ease-out;}
.fadein-right	{opacity: 0;transform: translate3d(300px, 0, 0);transition: opacity 0.5s linear,transform 1s ease-out;}
.fadein-up		{opacity: 0;transform: translate3d(0, 100px, 0);transition: opacity 0.5s linear,transform 1s ease-out;}
/*big画像用*/
.transition-delay{transition-delay: 0.6s;}
.transition-delay2{transition-delay: 1.2s;}
.transition-delay3{transition-delay: 1.8s;}
*[data-loaded="true"]{opacity: 1;transform: none;}




/*/////////////////////////////////////////////////////////////
 全ページ共通のheader
////////////////////////////////////////////////////////////*/
#header{position:fixed;top: 0;z-index:60;width:100%;background-color:#fff;webkit-transition: 0.5s;transition: 0.5s;}
#header > .container{height:140px;}

.header-left{position:absolute;top:29px;left:0;transition: 0.5s;}

.header-netsite{position:absolute;top:59px;right:440px;width:170px;transition: 0.5s;}
.header-netsite a{border:1px solid #aaa;line-height:1;padding:12px 0 11px 10px;text-align: center;background:url(../img/arrow_glay5-7.png) no-repeat left 15px center;display: block;color: #333;transition: 0.5s;}
.header-netsite a:hover{background:#f7f7f7 url(../img/arrow_glay5-7.png) no-repeat left 18px center;text-decoration:none;}


.header-right{position:absolute;top:26px;right:0;transition: 0.5s;width:400px;}

/*ページスクロール時*/
#header.smaller {top:-140px !important;}


.header-rogo a{background:url(../img/rogo_gray.png) no-repeat 0 0;width:180px;height:37px;background-size:contain;text-indent:-8989px;display:block;overflow:hidden;}
.header-rogo a:hover{opacity:0.6;}
.header-zip{line-height:1.4;margin-top:8px;text-align: left;font-size: 93%;}

.header-tel a{background:url(../img/freedial_gray.png) no-repeat 0 0;width:inherit;height:43px;background-size:contain;text-indent:-8989px;display:block;overflow:hidden;}
.header-tel a:hover{opacity:0.6;}
.uketuke-time{font-size:93%;line-height:1;padding:0 5px 7px 0;margin-top:12px;text-align: right;}




/* ==================== 横メニュー ==================== */
.yokomenu-bg{position:relative;z-index:60;width: 100%;text-align: center;background:url(../img/yokomenu_bg.png) no-repeat center top;background-size:cover;webkit-transition: 0.5s;/*! transition: 0.5s; */}

ul#yoko-menu {list-style-type: none;padding: 0;width:100%;display: table;font-size:0px;}

ul#yoko-menu > li{position:relative;display:inline-block;width:12%;border-left:2px solid #fff;}
ul#yoko-menu > li.yokomenu1{width:10%;}
ul#yoko-menu > li.yokomenu2{width:12%;}
ul#yoko-menu > li.yokomenu7{width:25%;}
ul#yoko-menu > li.yokomenu3{width:12%;}
ul#yoko-menu > li.yokomenu4{width:13%;}
ul#yoko-menu > li.yokomenu5{width:13%;}
ul#yoko-menu > li.yokomenu6{width:12%;}
ul#yoko-menu > li:last-child{border-right:2px solid #fff;}

ul#yoko-menu > li > a{font-size:17px;text-decoration:none;color:#fff;background-color:#717070;height:58px;line-height: 1.1;width: inherit;display:table-cell;vertical-align:middle;text-align: center;}
ul#yoko-menu > li > a:hover,
ul#yoko-menu > li.current > a{background-color:#6b2547;}



/*カレント表示用----*/
body.home ul#yoko-menu li.yokomenu1 > a,	/*ホーム*/
body.news ul#yoko-menu li.yokomenu2 > a,	/*お知らせ*/
body.oem-odm ul#yoko-menu li.yokomenu3 > a,	/*事業案内*/
body.system ul#yoko-menu li.yokomenu4 > a,	/*生産体制*/
body.company ul#yoko-menu li.yokomenu5 > a,	/*企業情報*/
body.s-labo ul#yoko-menu li.yokomenu7 > a,	/*自社開発ブランド<br>S-LABO*/
body.recruit ul#yoko-menu li.yokomenu6 > a{background-color:#6e5661;}	/*採用情報*/




/*プルダウン部分 submenu*/
/*三角の表示用
ul#yoko-menu ul li:first-child a:after {content: '';position: absolute;width: 0;height: 0;left:45%;top: -9px;border-left: 7px solid transparent;border-right: 7px solid transparent;border-bottom: 10px solid #53912b;}
*/
ul#yoko-menu > li ul {position: absolute;background-color:#6b2547;z-index:200;list-style-type: none;top:85%;left:0;width:140%;margin: 0 0 0 -20%;padding: 0;transition: 0.5s ease-in-out;}
ul#yoko-menu > li ul > li {overflow: hidden;line-height:1.2;text-align:center;background-image:none;width: 100%;height: 0;}
ul#yoko-menu > li ul > li a {font-size:14px;line-height:1.2;color:#fff;text-decoration:none;display:block;background-image: none !important;border-left:none;margin: 0;text-shadow: none;letter-spacing: 0;border-top: 1px dotted #fff;display: table-cell;vertical-align: middle;padding: 0 5px;}


ul#yoko-menu > li:hover > a {   }
ul#yoko-menu > li:hover li > a:hover {color:#fff !important;background-color:#2d0514 !important;}
ul#yoko-menu li:hover > ul > li {overflow: visible;height:45px;border-right:none;display: table;}

ul#yoko-menu li:hover > ul,
ul#yoko-menu li > ul.focused{visibility:visible;opacity:1;top:100%;}


/*subsubmenu
ul#yoko-menu li ul li ul {top: 0 !important;left: 100%;width:90%;margin:0;}
ul#yoko-menu li:last-child ul li ul {left: -110%;width: 90%;}
ul#yoko-menu li ul li ul li:first-child{border:none;}
ul#yoko-menu li ul li ul li:first-child a:after{border:none;}
ul#yoko-menu li ul li:hover ul li:first-child{height:45px;}
ul#yoko-menu li:hover ul li ul li:hover > a {}
ul#yoko-menu li ul li ul:before							{position: absolute;content: "";top:18px;left: -15px;width: 0;height: 0; border: 5px solid transparent;border-left-color:#fff;}----三角の表示用
ul#yoko-menu li:last-child ul li ul:before	{position: absolute;content: "";top:18px;left: 200%;margin-left: -20px;border: 5px solid transparent; border-right-color:#fff;}
*/





/*///////////////////////////////////////////////////////////////////////////////
 main
///////////////////////////////////////////////////////////////////////////////*/
/*全ページ共通のページ下部の上部へ戻る */
#pagetop {position: fixed;display: flex;width: 70px;height: 70px;bottom:20px;right:20px;z-index:50;}
#pagetop a {background:url(../img/pagetop.png) no-repeat 0px top;width: inherit;height: inherit;text-indent:-8989px;display:block;overflow:hidden;opacity:0.4;background-size: contain;}
#pagetop a:hover {opacity:1;}





/*///////////////////////////////////////////////////////////////////////////////
 全ページ共通のフッター
///////////////////////////////////////////////////////////////////////////////*/
#footer{width:100%;text-align:center;background-color: #2f4f0f;color:#fff;}

#footer-link{padding:30px 0 30px 0;}
#footer-link ul{}
#footer-link ul li{display:inline-block;margin: 0 12px 0 12px;text-align: left;vertical-align: top;line-height: 1;}
#footer-link ul li a{font-size:93%;line-height:1;color:#fff;background:url(../img/arrow_white3-5.png) no-repeat left top 5px;padding-left:8px;display: block;}
#footer-link ul li a:hover{color: #fff;text-decoration: underline;}

#footer-link ul li ul.sub{margin:4px 0 0 5px;}
#footer-link ul li ul.sub li{margin: 10px 0 0 0;display: block;line-height: 1;}
#footer-link ul li ul.sub li a{color:#fff;font-size:79%;background-position: left top 3px;}



.footer-cont{position:relative;padding-bottom: 25px;width: 90%;margin: 0 auto;}
.footer-left{float:left;}	
.footer-right{float:right;width:400px;}

.footer-netsite{position:absolute;top:35px;right:440px;width:170px;transition: 0.5s;}
.footer-netsite a{border:1px solid #eee;line-height:1;padding:12px 0 11px 10px;text-align: center;background:url(../img/arrow_white5-7.png) no-repeat left 15px center;display: block;color: #fff;transition: 0.5s;}
.footer-netsite a:hover{background:#9b9b9b url(../img/arrow_white5-7.png) no-repeat left 18px center;text-decoration:none;}


.footer-rogo a{background:url(../img/rogo_white.png) no-repeat 0 0;width:180px;height:37px;background-size:contain;text-indent:-8989px;display:block;overflow:hidden;}
.footer-rogo a:hover{opacity:0.6;}
.footer-zip{line-height:1.4;margin-top:8px;text-align: left;font-size: 93%;}

.footer-tel a{background:url(../img/freedial_white.png) no-repeat 0 0;width:inherit;height:43px;background-size:contain;text-indent:-8989px;display:block;overflow:hidden;}
.footer-tel a:hover{opacity:0.6;}
.footer-uketuke-time{font-size:93%;line-height:1;padding:0 5px 7px 0;margin-top:12px;text-align: right;}


.copyright{font-size:72%;color:#555;line-height:1.2;background-color:#fff;text-align:center;padding:13px 0;}



/*印刷しない--------------------*/
@media print {
#pagetop,
#pagetop a{display:none;}
#header{position: absolute !important;}
#header.smaller {top: 0px !important;}

.fadein-,
.fadein-left,
.fadein-right,
.fadein-up{opacity: 1;transform: none !important;}
}