@charset "utf-8";

/*//////////// 基本サイズ16px  ////////////
表示サイズ　指定する値
10px　63%
11px　69%
12px　75%
13px　82%
14px　88%
15px　94%			29px　181%
16px　100%		30px　187%
17px　107%		31px　193%
18px　113%		32px　200%
19px　119%		33px　206%
20px　125%		34px　212%
21px　132%		35px　218%
22px　138%		36px　224%
23px　144%		37px　230%
24px　150%		38px　236%
25px　157%		39px　242%
26px　163%		40px　248%
27px　169%		41px　254%
28px　175%		42px　260%
//////////////////////////////*/

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

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


/*
@font-face {
	font-display:swap;	フォントが利用可能となるまでの間、そのフォントが適用されているテキストには代替フォントが適用
	font-family: "centurygothic";
	src: url("../webfont/centurygothic.woff") format('woff');
}
*/


/*Google Fonts をWeb Font Loadeスクリプトで非同期で読み込む--M PLUS 1pのbold 700   Extra-bold 800 */
/*font-family:'M PLUS 1p';font-weight:700;*/
/*font-family:'M PLUS 1p';font-weight:800;*/
/*font-family:'Noto Sans JP';font-weight:800;*/

a         {color:#ff3300;text-decoration:underline;transition: 0.8s;}/*hover ゆっくり変わる*/
a:link    {color:#ff3300;text-decoration:underline;}
a:visited {color:#BF4A2D;text-decoration:underline;}
a:active  {color:#ff3300;text-decoration: underline;}
a:hover   {color:#871900;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;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(../img/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:#ff3300;}
#load-text {position: absolute;font-size:11px;color: #fff;text-align: center;width: 100%;top:40%;padding-top: 140px;height:60px;display: block;
						background:url(../img/loading.png) no-repeat center top,url(../js/loading_white.svg) no-repeat center bottom;}


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



/*全ページ共通のテーブル構造　-------------------*/
#wrapper{position: relative;z-index:10;width:100%;/*min-width: 1300px;*/background: url(../img/bg_wrapper.jpg) no-repeat center top;}
#main{overflow:hidden;}
.container {width:1200px;margin:0 auto;padding:0;line-height:1.8;}



/*ページ上部右の出てくるナビ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;}
.zoomin				{opacity: 0;transform: perspective(500px) translateZ(100px);transition: opacity 0.5s linear,transform 1s ease-out;}



.transition-delay{transition-delay: 0.3s;}
.transition-delay2{transition-delay: 0.5s;}
.transition-delay3{transition-delay: 0.8s;}
.transition-delay4{transition-delay: 1.0s;}
*[data-loaded="true"]{opacity: 1;transform: none;}
/*big画像用*/
.transition-delay10{transition-delay: 1s;}
.transition-delay11{transition-delay: 1.5s;}
.transition-delay12{transition-delay: 2s;}
/*
.transition-delay10{transition-delay: 3s;}
.transition-delay11{transition-delay: 3.5s;}
.transition-delay12{transition-delay: 4s;}
*/


/*///////////////////////////////////////////////////////////////////////////////
 全ページ共通のheader
///////////////////////////////////////////////////////////////////////////////*/
#header{position:fixed;top: 0;z-index:50;width:100%;transition: 0.5s;height:100px;padding-top:9px;background-color: rgba(255,255,255,0.8);}
/* 縮小時のheader*/
#header.smaller{height:70px;padding-top:0px;background-color:rgba(255,255,255,0.9);border-bottom:1px solid #ddd;}
#header.smaller .header-rogo {margin-top: 9px;}
#header.smaller ul#yoko-menu > li a {height: 70px;}
#header.smaller .header-rogo .rogo {width: 248px;height: 32px;}
#header.smaller .header-rogo .cap {font-size: 10px;}
.header-rogo .rogomark{margin-top: 3px;}
.header-rogo .rogomark img{width:46px;height:auto;}

#header-box{position: relative;}

.header-rogo{float:left;width:340px;margin-top: 12px;}
.header-rogo a{display:block;text-decoration: none;}
.header-rogo a:hover{opacity:0.6;}
.header-rogo .rogomark{float:left;margin-right:4px;margin-top: 5px;transition: 0.8s;}
.header-rogo .cap{color:#ff3300;font-size:11px;line-height:1;margin-bottom:5px;transition: 0.8s;}
.header-rogo .rogo{background:url(../img/rogo.png) no-repeat 0 0;width:267px;height:35px;text-indent:-8989px;display:block;overflow:hidden;background-size: contain;transition: 0.8s;}

#header-right{float:right;width:60%;}



/* ==================== 全ページ共通の横メニュー ==================== */
ul#yoko-menu {width:100%;list-style-type: none;padding: 0;display: table;}

ul#yoko-menu > li{position:relative;float:left;}
ul#yoko-menu > li a{display: flex;justify-content: center;align-items: center;height:80px;}

ul#yoko-menu li.yokomenu1{width:9.4%;}
ul#yoko-menu li.yokomenu2,
ul#yoko-menu li.yokomenu3,
ul#yoko-menu li.yokomenu4,
ul#yoko-menu li.yokomenu5{width:18%;}
ul#yoko-menu li.yokomenu6{width:18.5%;}

ul#yoko-menu li > a{font-size:17.5px;color:#000;line-height: 1.1;text-decoration: none;}
ul#yoko-menu li > a p{font-weight: bold;text-align: center;}
ul#yoko-menu li > a span{font-size:74%;color:#888;font-weight: bold;letter-spacing: 0;}
ul#yoko-menu li.yokomenu1 > a{text-indent:-8989px;display:block;overflow:hidden;background:url(../img/home.png) no-repeat center center;}
ul#yoko-menu li.yokomenu6 > a{color:#fff;background-color:#ff3300;}
ul#yoko-menu li.yokomenu6 > a span{color:rgba(255,255,255,0.5);}

ul#yoko-menu li.current > a,
ul#yoko-menu li a:hover{background-color:#e0e0e0;}
ul#yoko-menu li.yokomenu6 a:hover{background-color:#b52400;}


/*TOPページのカレント表示用------*/
body.home ul#yoko-menu li.yokomenu1 a{background:url(../img/home_red.png) no-repeat center center;}
body.home ul#yoko-menu li.yokomenu1 a,			/*home*/
body.company ul#yoko-menu li.yokomenu2 a,		/*会社案内*/
body.business ul#yoko-menu li.yokomenu3 a,			/*事業内容*/
body.machine ul#yoko-menu li.yokomenu4 a,				/*保有車輌*/
body.recruit ul#yoko-menu li.yokomenu5 a,		/*採用情報*/
body.toiawase ul#yoko-menu li.yokomenu6 a{background-color:#e0e0e0;color:#ff3300;}	/*お問合せ*/


/*プルダウン submenuが必要な場合は常総工業*/





/*///////////////////////////////////////////////////////////////////////////////
 main
///////////////////////////////////////////////////////////////////////////////*/

/*色*/
.color1{color:#ff3300;}/*基本色 レッド*/
.color-red{color:#ff0000;}
.color2{color:#cc3333;}/*注意色*/


/*------------ 動画 -----------*/

/*先方担当者がUPするyoutubeの動画レスポンシブ*/
.responsive-video{position:relative;width: 100%;max-width:1200px;margin:15px auto 80px auto;} 
.responsive-video::before {content: "";display: block;width: 100%;padding-top: 56.25%;}
.responsive-video video, 
.responsive-video iframe, 
.responsive-video object, 
.responsive-video embed { position: absolute !important; top: 0; left: 0; width: 100%; height: 100%;}
.responsive-video .mce-preview-object{position: unset;}

/*サーバー内埋め込み*/
#index-movie-box{max-width:780px;margin:0 auto 50px auto;}
.index-movie{position: relative;width:100%;height: 0;padding-bottom:56.3%;}/*padding-bottom:56.3%;padding-bottom:48.2%;*/
.index-movie video {position: absolute;top: 0;left: 0;width: 100% !important;height: auto !important;}

/*facebook動画のiframe埋め込み*/
.video-container{position: relative;text-align: center;max-width:900px;margin:0 auto 50px auto;}




/*全ページ共通のSNSボタン----------------このサイトでは未使用
#sns-box{margin-top:10px;text-align:center;}
#sns-box ul{margin:0 !important;padding:0;}
#sns-box ul li{display:inline-block;margin: 0 4px;width: 25px;height: 25px;padding:0 !important;}
#sns-box ul li a img{width:100%;height:100%;}
#sns-box ul li a:hover,
#sns-box ul li a:active{opacity:0.6;}
*/



/*このボタンは、中ページ全ページで使用*/
.naka-kuwashii{margin-top: 25px;text-align:center;line-height:1.1;}
.naka-kuwashii a{color: #fff;text-align: center;text-decoration: none;display: inline-block;background:#ff3300 url(../img/arrow_white68-105.png) no-repeat left -17px center;background-size: 40px;
																				border: 3px solid #fff;position: relative;z-index: 2;width: 380px;font-family: 'M PLUS 1p';font-weight: 700;line-height:2.4;font-size:140%;transition: 0.8s;}
.naka-kuwashii a:hover{color: #fff;background:#b52400 url(../img/arrow_white68-105.png) no-repeat left -12px center;background-size:40px;padding-left:10px;border: 3px solid #e29b89;}



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



/*///////////////////////////////////////////////////////////////////////////////
 全ページ共通のフッター
///////////////////////////////////////////////////////////////////////////////*/
#footer{width:100%;text-align:center;background-color:#ff3300;margin-top:30px;}

ul.footer-menu-ul{text-align: center;margin-top: 20px;}
ul.footer-menu-ul li{margin: 0 30px 15px 20px;font-size:100%;line-height:1;display: inline-block;}
ul.footer-menu-ul li a{color:#fff;text-decoration: none;}
ul.footer-menu-ul li a:hover{color: #fff;text-decoration: underline;}

dl.footer-dl{text-align:center;margin-top:25px;color: #fff;}
dl.footer-dl dt{display:inline-block;margin-right:10%;}
dl.footer-dl dd{display:inline-block;vertical-align: top;}

dl.footer-dl dt .rogo-cap{font-size: 86%;line-height: 1;}
dl.footer-dl dt .header-rogo{float:none;width:330px;margin: 12px auto 0 auto;}
dl.footer-dl dt .header-rogo a{display:block;text-decoration: none;}
dl.footer-dl dt .header-rogo a:hover{opacity:0.6;}
dl.footer-dl dt .header-rogo .rogomark{float:left;margin-right:4px;margin-top: 5px;}
dl.footer-dl dt .header-rogo .cap{color:#fff;font-size:11px;line-height:1;margin-bottom:5px;text-align: left;}
dl.footer-dl dt .header-rogo .rogo{background:url(../img/rogo_white.png) no-repeat 0 0;width:267px;height:35px;text-indent:-8989px;display:block;overflow:hidden;background-size: contain;}

.footer-zip{text-align:center;font-size: 90%;line-height: 1.5;margin-top: 10px;}
.footer-zip span{}

.footer-tel-cap{font-size:79%;text-align:right;letter-spacing: 1.2em;line-height: 1;}
.footer-tel{}
.footer-tel a{background:url(../img/tel_white.png) no-repeat left center;padding-left:41px;background-size:36px;text-decoration:none;color:#fff;font-family:'M PLUS 1p';font-weight:800;font-size: 48px;letter-spacing: -0.02em;line-height: 1;}
.footer-tel a:hover{}


dl.footer-dl dd .naka-kuwashii{margin-top: 12px;}
dl.footer-dl dd .naka-kuwashii a{background:#b52400 url(../img/arrow_white68-105.png) no-repeat left -10px center;background-size: 30px;
																	border: 2px solid #fff;width: 360px;line-height:2.0;font-size:130%;}
dl.footer-dl dd .naka-kuwashii a:hover{color: #fff;background:#480f00 url(../img/arrow_white68-105.png) no-repeat left -6px center;background-size:30px;padding-left:10px;border: 2px solid #e29b89;}



.copyright{font-size:68%;line-height:1;text-align:center;color:#fff;padding:15px 0 20px 0;border-top:1px solid #fff;margin-top: 28px;}



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

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