@charset "utf-8";

/*###########################################################

 全ページ共通のレスポンシブ
 
#############################################################/*/

@media screen and (max-width: 1550px) {
	/*=======  事業内容 Business  ===========*/
	.container.indexbusiness{width: 97%;}
}





@media screen and (max-width: 1300px) {
	#wrapper {min-width: unset;}
	
	/*=======  紹介文 About  ===========*/
	.container.indexabout {width: 97%;}
}






@media screen and (max-width: 1200px) {
	img{max-width: 100%;height: auto;width /***/:auto;}	
	.container {width: 97%;}

	/*youtube動画レスポンシブ*/
  .container.video {width: 90%;}
	
	/*=======  紹介文 About  ===========*/
	.section.indexabout {background-size: 80%;}
	dl.indexabout-dl dd .midashi {margin-top: 0;}
	dl.indexabout-dl dt{width:47%;}
	dl.indexabout-dl dd{width:49%;}
	
	/*=========　事業内容 Business　==============*/
	.section.indexbusiness {padding: 60px 0 70px 0;background-size: 75% , auto;background-position: top 40px left , center top;}
	ul.index-business-ul {margin-top: 60px;}
	
	/*========== 採用情報　Recruit ==============*/
	.section.bg-recruit {padding: 70px 0 60px 0;background-size: 70% , 1400px;background-position: top 40px right , center center;}
	dl.indexrecruit-dl {margin: 40px 0 30px 0;}
}





@media screen and (max-width: 1150px) {
	/* =========== 全ページ共通の横メニュー =========== */
	#header-right{width:650px;}
	.header-rogo {width: 270px;margin-top: 5px;}
	.header-rogo a .rogomark {width: 45px;}
	.header-rogo a .rogo-cap {font-size: 9px;margin:0 0 2px 0;}
	.header-rogo a .rogo {width: 210px;}
}





@media screen and (max-width: 1000px) {
	/*=======  紹介文 About  ===========*/
	dl.indexabout-dl dd .midashi {font-size: 180%;}
	
	/* =========== 全ページ共通の横メニュー =========== */
	#header-right{width:610px;}
	ul#yoko-menu li a {font-size: 15.5px;}
	
	/*=========　事業内容 Business　==============*/
	ul.index-business-ul li {width: 45%;}
	ul.index-business-ul li:last-child{margin-top: 30px;}
}





@media screen and (max-width: 930px) {
	/* =========== 全ページ共通の横メニュー =========== */
	#header-right{width:550px;}
	ul#yoko-menu li.yokomenu7{display:none;}
	
	ul#yoko-menu li.yokomenu1{width:9%;}
	ul#yoko-menu li.yokomenu2{width:16%;}
	ul#yoko-menu li.yokomenu3{width:27%;}
	ul#yoko-menu li.yokomenu4{width:16%;}
	ul#yoko-menu li.yokomenu5{width:16%;}
	ul#yoko-menu li.yokomenu6{width:15%;}


	/*index上部の切り替わる画像 slider-pro -------------*/
	/*スクロールダウンボタン*/
	.btn-scroll-box{display: none;}
}






@media screen and (max-width: 860px) {
	#wrapper {font-size: 96%;}

	/*＝＝＝＝＝ 全ページ共通のheader ＝＝＝＝＝＝＝*/
	#header {height: 60px;padding-top: 0;}/*background-color: #f3f3f3;*/
	.header-rogo {width: 265px;margin-top: 10px;transform: scale(0.9);margin-left: -10px;}
	
	#header.smaller .header-rogo {transform: scale(0.9);}
  #header.smaller {height: 60px;padding-top: 0;background-color:none;border-bottom: 1px solid #ddd;} 


	/*上部の大きな固定画像-----------------------*/	
	.headerimgs-wrapper {margin-top: 60px;}
	
	
	/*-------------------------------------------------------------------------
	ページ上部右の出てくるナビmenuが出現して、入れ替わりに横メニューが消える
	--------------------------------------------------------------------------*/
	#header-right{display:none;}
	
	#menubtn{position:absolute;z-index:700;top:9px;right:15px;background:url(../img/header_menu.png) no-repeat 0 0;width:54px;height:42px;text-indent:-8989px;display:block;overflow:hidden;cursor:pointer;}
	#menubtn.off{background-position:0 0;}
	#menubtn.on{background-position:0 -42px;}


	/*右側のメニューボタン*/
	.menu-trigger {position:absolute;right: 0;top: 11px;z-index:200;width:34px;height:20px;display: inline-block;transition: all .4s;box-sizing: border-box;left: 0;margin: 0 auto;}
	.menu-trigger span {position: absolute;left: 0;width: 100%;height:2px;background-color:#000;display: inline-block;transition: all .4s;box-sizing: border-box;}
	
	/*
	.menu-trigger::after {position: absolute;left: 0;bottom: -25px;content: 'メニュー';display: block;width: 100%;color: #003540;font-size:79%;font-weight: 600;text-decoration: none;text-align: center;transition: all .4s;white-space: nowrap;letter-spacing: -0.2em;}
	.menu-trigger.active::after {content: '閉じる';color:#fff;bottom: -33px;font-weight: normal;}
	a.menu-trigger{text-decoration:none;}
	*/
	.menu-trigger span:nth-of-type(1) {}
	.menu-trigger span:nth-of-type(2) {top: 50%;left: 50%;-webkit-transform: translate3d(-50%, -50%, 0);transform: translate3d(-50%, -50%, 0);}
	.menu-trigger span:nth-of-type(3) {bottom: 0;}
	
	.menu-trigger.active span{height: 2px;}
	.menu-trigger.active span:nth-of-type(1) {z-index: 10;-webkit-transform: translateY(9px) rotate(-317deg) scale(1.15);transform: translateY(9px) rotate(-317deg) scale(1.15);}
	.menu-trigger.active span:nth-of-type(2) {display: none;}
	.menu-trigger.active span:nth-of-type(3) {-webkit-transform: translateY(-9px) rotate(317deg) scale(1.15);transform: translateY(-9px) rotate(317deg) scale(1.15);}


	/*------------------------------------
	ページ上部右の出てくるナビmenu
	------------------------------------*/
	/*#navi_sp {display:none;width:100%;background-color:#fde6ed;filter: alpha(opacity=95);-moz-opacity:0.95;opacity:0.95;position:absolute;z-index:400;margin-top:-35px;padding-bottom:15px;}--固定しない*/
	/*#navi_sp {display: none;width: 100%;position: fixed;z-index: 400;padding-top: 32px;width:85%;overflow-y: scroll;right: 0;height: 100%;top: 0;}--固定で幅85%*/
	#navi_sp {display: none;position: fixed;width:100%;z-index:49;overflow-y: scroll;height:100%;right: 0;top: 0;background-color:#0186be;opacity:0.95;}
	#navi_sp a,
	#navi_sp a:hover{text-decoration:none;}

	#navi_sp ul#yoko-menu-sp {width:100%;clear: both;font-size:108%;padding:65px 10px 0 10px;list-style:none none outside;background-image:none;background-color:#0186be;text-align: center;}
	#navi_sp ul#yoko-menu-sp li {margin:21px 0;font-family:'Noto Serif JP', serif;font-weight:400;}
	#navi_sp ul#yoko-menu-sp li a {color: #fff;text-decoration: none;line-height:1.2;}
	#navi_sp ul#yoko-menu-sp li a:hover{opacity:0.7;}

	/*submenu*/
	#navi_sp ul#yoko-menu-sp li.spbox01{display:inline-block;width:50%;margin:1px 0;}
	#navi_sp ul#yoko-menu-sp li.spbox00 > a{}
	#navi_sp ul#yoko-menu-sp li.spbox02.title > a{}
	#navi_sp ul#yoko-menu-sp li.spbox02 > a{background:url(../img/header_menu_down.png) no-repeat left center;padding-left:14px;}
	#navi_sp ul#yoko-menu-sp li.selected > a{background:url(../img/header_menu_up.png) no-repeat left center;padding-left:14px;}

	#navi_sp ul#yoko-menu-sp ul.sub{font-size: 93%;line-height: 1.2;width: 94%;background-color: #0b6f9f;margin: 7px auto 0 auto;}
	#navi_sp ul#yoko-menu-sp ul.sub div{display:inline-block;width:40%;margin:0 3% 5px 3%;vertical-align:top;}
	#navi_sp ul#yoko-menu-sp ul.sub div > li a{border-bottom: 1px solid #ccc;padding-bottom: 10px;display: block;}
	#navi_sp ul#yoko-menu-sp ul.sub div > ul > li a{font-size: 93%;}
	#navi_sp ul#yoko-menu-sp ul.sub li {margin: 20px 0;}

	/*サブメニューの閉じる
	#navi_sp ul#yoko-menu-sp .sn_close{margin:0 0 0px 0;}
	#navi_sp ul#yoko-menu-sp .sn_close a{color:#fff;padding:11px 10px 11px 25px;display:block;background:#555 url(../img/header_menu_close.gif) no-repeat right center;cursor: pointer;}
	#navi_sp ul#yoko-menu-sp .sn_close a:hover{background-color:#111;opacity:1;filter: alpha(opacity=100);-ms-filter: "alpha( opacity=100 )";}
	*/
	/*subsubmenu
	#navi_sp ul#yoko-menu-sp ul.sub ul.children{display:block !important;}
	#navi_sp ul#yoko-menu-sp ul.sub ul.children li {margin:3px 0;}
	#navi_sp ul#yoko-menu-sp ul.sub ul.children li a{text-indent:30px;}
	*/

	/*メニューの閉じる*/
	#navi_sp p#menuclose{padding: 5px 0 25px 0;background-color:#0186be;}
	#navi_sp p#menuclose a{font-size:100%;color:#FFF;padding:11px 0;line-height: 1.0;display: block;background:#444 url(../img/header_menu_close.gif) no-repeat right 15px center;cursor: pointer;width: 290px;margin: 0 auto;text-align: center;}
	#navi_sp p#menuclose a:hover{background-color:#777;opacity:1;}
}







@media screen and (max-width: 800px) {
	/*youtube動画レスポンシブ*/
	body.home .responsive-video {margin: 60px auto 0px auto;}
	
	/*=======  紹介文 About  ===========*/
	.section.indexabout {background-size: 80%;padding: 90px 0 70px 0;background-position: top 40px right;}
	dl.indexabout-dl dd {float: none;width: 100%;}
	dl.indexabout-dl dt {float: none;width: 70%;margin: 50px auto 0 auto;}
	dl.indexabout-dl dd .midashi {font-size: 210%;text-align: center;}

}







@media screen and (max-width: 740px) {
	/*lozad.jによるアニメーション------*/
	.fadein-			{opacity: 1;transition:none;}
	.fadein-left	{opacity: 1;transform:none;transition:none;}
	.fadein-right	{opacity: 1;transform:none;transition:none;}
	.fadein-up		{opacity: 1;transform:none;transition:none;}
	.transition-delay{transition-delay:0s;}
	
	
	/*index上部の切り替わる背景画像-----------------------*/
	.sp-mask,
	.sp-mask.sp-grab{height:380px !important;}
	.sp-slide,
	.sp-image-container{height: inherit !important;align-items: center;display: flex;justify-content: center;}
	.sp-image-container img {max-width: unset;width:740px !important;height: 380px !important;margin-left:0 !important;}
	
	/*index上部の切り替わる背景画像  slider-pro内のタイトル	*/
	.slider-pro p.sp-layer.bigimg-title{transform: scale(0.5) !important;}
}







@media screen and (max-width:620px) {
	.container {width: 94%;}
	
	/*index上部の切り替わる背景画像  slider-pro内のタイトル	-----ここで大きさ固定*/
	.slider-pro p.sp-layer.bigimg-title{left: auto !important;right: -40px;top: 10px !important;}
	.slider-pro p.sp-layer.text-title{margin-left: 0;left: auto !important;right: 104px;top: 10px !important;font-size: 175%;transform: scale(0.4) !important;}
	/*左右の矢印*/
	.sp-horizontal .sp-arrows {display: none;}

	/*=======  紹介文 About  ===========*/
	.container.indexabout {width: 94%;}
	
	/*=========　事業内容 Business　==============*/
	.container.indexbusiness{width:94%;}
	.index-h2 {font-size: 250%;}
	ul.index-business-ul li {width: 80%;margin: 0 auto 20px auto;}
	ul.index-business-ul {margin-top: 50px;}
	ul.index-business-ul li a .index-business-img-box {padding-bottom: 65%;}
	ul.index-business-ul li:nth-child(2) {margin-top: 30px;}
	ul.index-business-ul li a .index-business-img {padding-top: 65%;}
	
	/*========== 採用情報　Recruit ==============*/
	dl.indexrecruit-dl dt .naka-kuwashii a {width: 300px;}

	/*全ページ共通のページ下部の上部へ戻る */
	#pagetop a {bottom: 15px;right: 15px;width: 50px;height: 50px;}
	
	/*/////////   全ページ共通のフッター  ////////////*/
	dl.footer-dl dt {margin-right: 0;}
	dl.footer-dl dd {margin-top: 10px;}
}








@media screen and (max-width:540px) {
	/*/////////   全ページ共通のフッター  ////////////*/
	ul.footer-menu-ul {display: none;}
	
}







@media screen and (max-width:480px) {
	/*index上部の切り替わる背景画像  slider-pro内のタイトル	*/
	.slider-pro p.sp-layer.bigimg-title{right: -50px;}
	.slider-pro p.sp-layer.text-title{right: 91px;}

	/*=======  紹介文 About  ===========*/
	dl.indexabout-dl dt {width: 85%;}
	dl.indexabout-dl dd .midashi {font-size: 170%;}
	dl.indexabout-dl dd .com {margin-top: 10px;}
		
	/*=========　事業内容 Business　==============*/
	ul.index-business-ul li a .index-business-title {width: 80px;height: 210px;}
	
	/*========== 採用情報　Recruit ==============*/
	.index-recruit-com {font-size: 115%;}
	.index-recruit-com span{display: block;margin-bottom: -2em;}
}






@media screen and (max-width:380px) {
	/*index上部の切り替わる背景画像  slider-pro内のタイトル*/
	.slider-pro p.sp-layer.bigimg-title{right: -75px;transform: scale(0.45) !important;}
	.slider-pro p.sp-layer.text-title{right: 64px;}
	
	/*=======  紹介文 About  ===========*/
	dl.indexabout-dl dd .midashi {font-size: 150%;}
	
	/*=========　事業内容 Business　==============*/
	ul.index-business-ul li {width: 90%;}
	
}





@media screen and (max-width:350px) {
	/*/////////   全ページ共通のフッター  ////////////*/
	.footer-zip {font-size: 86%;}
	dl.footer-dl dd .naka-kuwashii a {min-width: 270px;}
	
}