@charset "utf-8";

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

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

@media screen and (max-width: 1200px) {
	/* ==================== 全ページ共通の横メニュー ==================== */
	ul#yoko-menu > li > a {padding: 0 20px;}
}




@media screen and (max-width: 1100px) {
	/*//////// 全ページ共通のheader //////////////*/
	#header .container {padding:0;}

	/*TOPページ 上部のslider-pro背景big画像-------------*/
	.headerimgs-wrapper{margin-top:90px;}
	.slider-pro,
	.slider-pro .sp-mask,
	.slider-pro .sp-mask.sp-grab{height:700px !important;}
	.slider-pro .sp-slide,
	.slider-pro .sp-image-container{height: inherit !important;align-items: center;display: flex;justify-content: center;}
	.slider-pro .sp-image-container a{display: contents;}
	.slider-pro .sp-image-container img {max-width: unset;height: 700px !important;margin-left:0 !important;}
	.index-bigimg-text {width: 100px;top:314px;}
}





@media screen and (max-width: 1000px) {
	/* ==================== 全ページ共通の横メニュー ==================== */
	ul#yoko-menu > li > a {padding: 0 14px;}
}




@media screen and (max-width: 960px) {
	/*//////// 全ページ共通のheader //////////////*/
	#header {height: 68px;}
	.top-rogo {top: 10px;margin-left: 15px;}
	.top-rogo a {width: 186px;height: 52px;}

	/* 縮小時のheader*/
	#header.smaller{height: 68px;}
	#header.smaller .top-rogo {top: 10px;margin-left: 15px;}
	#header.smaller .top-rogo a {width: 186px;height: 52px;}


	/*TOPページ 上部のslider-pro背景big画像-------------*/
	.headerimgs-wrapper{margin-top:68px;}


	/*-------------------------------------------------------------------------
	ページ上部右の出てくるナビmenuが出現して、入れ替わりに横メニューが消える
	--------------------------------------------------------------------------*/
	.yokomenu-bg{display:none;}
	
	#menubtn{position:fixed;z-index:700;top:10px;right:15px;/*! background:#06c755; */width:60px;height:47px;display:block;cursor:pointer;}/*overflow:hidden;text-indent:-8989px;*/
	#menubtn.off{background-position:0 0;}
	#menubtn.on{/*background-position:0 -42px;background-color: #888;*/}


	/*右側のメニューボタン*/
	.menu-trigger {position:absolute;right: 0;top: 11px;z-index:200;width:40px;height:24px;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:#666;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(12px) rotate(-317deg) scale(1.15);transform: translateY(12px) 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;position: fixed;width:100%;z-index:49;overflow-y: scroll;height:100%;right: 0;top: 0;background-color: rgba(0,0,0,0.9);}
	#navi_sp a,
	#navi_sp a:hover{text-decoration:none;}

	#navi_sp ul#yoko-menu-sp {width:100%;clear: both;padding:77px 10px 0 10px;list-style:none none outside;background-image:none;text-align: center;}
	#navi_sp ul#yoko-menu-sp li {margin: 18px 0;}
	#navi_sp ul#yoko-menu-sp li a {font-size: 90%;color:#fff;text-decoration: none;line-height:1.2;}
	#navi_sp ul#yoko-menu-sp li a:hover{opacity: 0.8;color: #c5e4ff;}

	/*ネット予約*/
	#navi_sp ul#yoko-menu-sp li.spbox00.reserve{display:none;}
 #navi_sp ul#yoko-menu-sp li.spbox00.reserve > a{background-color: #fff;color: #000;display: block;width: 260px;margin: 0 auto;padding: 8px 0;}

	/*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 > a{background:url(../img2/header_menu_down.png) no-repeat left center;padding-left:15px;}
	#navi_sp ul#yoko-menu-sp li.spbox02 > a br{display:none;}
	#navi_sp ul#yoko-menu-sp li.spbox02.selected > a{background:url(../img2/header_menu_up.png) no-repeat left center;padding-left:15px;opacity: 0.5;}

	#navi_sp ul#yoko-menu-sp ul.sub{border-top: 1px solid #ccc;border-bottom: 1px solid #ccc;margin: 10px auto 0 auto;padding: 5px 0 0 0;font-size: 93%;width:70%;}
	#navi_sp ul#yoko-menu-sp ul.sub li {margin: 20px 0;}

	#navi_sp ul#yoko-menu-sp ul.sub li small{background-color: #23386a;position: relative;display: inline-block;color: #a3b5c8;padding: 1px 4px 2px 4px;font-size: 12px;letter-spacing: 0.05em;top: -1px;right: 6px;}

	/*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: 0 0 25px 0;margin-top: 5px;}
	#navi_sp p#menuclose a{font-size:85%;color:#FFF;padding:9px 0;line-height: 1.0;display: block;background:#444 url(../img2/header_menu_close.gif) no-repeat right 15px center;cursor: pointer;width: 230px;margin: 0 auto;text-align: center;}
	#navi_sp p#menuclose a:hover{background-color:#666;opacity:1;}

	.insta.sp{margin: 0 0 15px 0;}
	.insta.sp a{width: 27px;height: 28px;}


	/*全ページ共通のページ下部のお問合せ・協力会社様募集*/		
	ul.toiawase-waku {text-align: center;}
	ul.toiawase-waku li {margin-right: 1%;}
	ul.toiawase-waku li.toiawase-form a {width: 250px;line-height: 60px;height: 60px;}
}




@media screen and (max-width: 900px) {
	/*/////////////　施工実績　////////////////*/
	.section.sekou{padding: 100px 0 50px 0;}
	.sekou-box .sekou-title {top: 58px;}
	
	/*全ページ共通のページ下部のお問合せ・協力会社様募集*/	
	ul.toiawase-waku {margin: 10px auto 0 auto !important;}
	ul.toiawase-waku li.toiawase-tel{display: block;margin:0 auto 14px auto !important;width: fit-content;}
	ul.toiawase-waku li {width: 260px;}

}





@media screen and (max-width: 750px) {
	/*TOPページ 上部のslider-pro背景big画像-------------*/
	.headerimgs-wrapper{margin-top: 60px;height:540px !important;}
	.slider-pro,
	.slider-pro .sp-mask,
	.slider-pro .sp-mask.sp-grab{height:540px !important;}
	.slider-pro .sp-image-container img {height: 540px !important;}
	.index-bigimg-text {top: 235px;}
	
	/*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;}
	.zoomin				{opacity: 1;transform:none;transition:none;}
	.widthleft		{opacity: 1;transform:none;transition:none;}
	.widthright		{opacity: 1;transform:none;transition:none;}

	.transition-delay,
	.transition-delay1,
	.transition-delay2,
	.transition-delay3,
	.transition-delay4,
	.transition-delay5,
	.transition-delay6,
	.transition-delay7,
	.transition-delay8,
	.transition-delay9,
	.transition-delay10,
	.transition-delay11,
	.transition-delay12{transition-delay:0s;}


	/* =============全ページ共通のスタイル================== */
	/* ページの各セクション-------------------*/
	.section{padding:60px 0 60px 0;}

	/*このボタンは、中ページ全ページで使用*/
	.naka-kuwashii{max-width: 380px;margin: 25px auto 0 auto;}

	/*/////////////　introduction　////////////////*/
	.section.intro {padding: 75px 20px 65px 20px;}
	.intro-midashi {font-size: 120%;}
	.intro-midashi span {display: block;}
	.intro-com {text-align: left;line-height: 2.4;margin-top: 21px;}
	.intro-com br{display:none;}
	
	/*全ページ共通のページ下部の上部へ戻る */
	#pagetop a {width:40px;height:40px;bottom: 15px;}
}





@media screen and (max-width: 680px) {
	/*/////////////　施工実績　////////////////*/
	fieldset {width: 90%;margin: 0 0 0 auto;}
	fieldset span {width: 46%;}
	fieldset span:nth-child(3n){width: 46%;margin-right:2%;}
	fieldset span:nth-child(2n){margin-right:0;}
}





@media screen and (max-width: 640px) {
	/*全ページ共通のテーブル構造　-------------------*/
	#wrapper {font-size: 93% !important;}
	
	/*TOPページ上部の背景big画像-------------*/
	.btn-scroll-box {display: none;}
	.sp-buttons {display: none;}

	/*/////////////　NEWS　////////////////*/
	dl.news-dl a{padding: 10px 1% 21px 1.3%;}
	dl.news-dl dt{float:none;}
	dl.news-dl dd{padding:0 0 0 10px;}
	.index-kuwashiku.news a {height: 17px;padding-left: 23px;background-size: 17px;}
}





@media screen and (max-width: 570px) {
	/*TOPページ 上部のslider-pro背景big画像-------------*/
	.headerimgs-wrapper,
	.slider-pro,
	.slider-pro .sp-mask,
	.slider-pro .sp-mask.sp-grab{height:450px !important;}
	.slider-pro .sp-image-container img {height: 450px !important;}
	.index-bigimg-text {top: 192px;width:80px;}
	
	/*/////////////　施工実績　////////////////*/
	.section.sekou{padding: 60px 0 20px 0;}
	.gyoutai-box {padding: 25px 2%;}
	fieldset {width: 95%;}
	/*― 業態で検索 ー*/
	.sekou-box.gyoutai{margin:110px auto 0 auto;}

	/*全ページ共通のページ下部のお問合せ・協力会社様募集*/	
	.section.end {padding:30px 0 28px 0;}
 ul.toiawase-waku li {display: table;margin: 0 auto;}
	ul.toiawase-waku li:last-child {margin-right: auto;margin-top: 14px;}
	ul.toiawase-waku li.toiawase-form a {line-height: 48px;height: 50px;}

	/*////////////  全ページ共通のフッター  //////////////*/
	ul.footer-menu-ul {margin-bottom: 28px;padding: 3px 0;}
	ul.footer-menu-ul li {display: none;}
	.footer-rogo a {height: 53px;}
	.copyright {font-size: 10px;padding: 11px 0 11px 0;margin-top: 23px;}
}





@media screen and (max-width: 500px) {
	/*全ページ共通のテーブル構造　-------------------*/
	#wrapper {font-size: 86% !important;}
	.container {padding: 0 15px;}

	/*全ページ共通のボタン*/
	.naka-kuwashii {max-width: 300px;}
	.naka-kuwashii a{height: 50px;line-height: 50px;width: 85%;}

	/*全ページ共通のページ下部のお問合せ・協力会社様募集*/		
	.toiawase-tel dl a dd {background: url(../img2/tel.png) no-repeat 0 7px;padding-left: 38px;background-size: 32px;}
}





@media screen and (max-width: 450px) {
	/*TOPページ 上部のslider-pro背景big画像-------------*/
	.headerimgs-wrapper,
	.slider-pro,
	.slider-pro .sp-mask,
	.slider-pro .sp-mask.sp-grab{height:420px !important;}
	.slider-pro .sp-image-container img {height: 420px !important;}
	.index-bigimg-text {top: 182px;width:75px;}
	
	/* ページの各セクション-------------------*/
	.section {padding: 50px 0 50px 0;}
	
	/*/////////////　施工実績　////////////////*/
	.sekou-box .sekou-title {top: 49px;}
	.section.sekou h2 {margin-bottom: 56px;}
	.sekou-box.gyoutai {margin: 85px auto 0 auto;}
	.sekou-box.gyoutai .sekou-title {top: -57px;}
	.gyoutai-box {padding: 18px 2%;}
	fieldset span {width: unset;margin-right: 24px;margin-bottom: 12px;}
	fieldset span:nth-child(2n) {margin-right: 24px;}
	fieldset span:nth-child(3n) {width: unset;margin-right: 24px;}
	.gyoutai-box .form-submit {margin-top: 9px;}
	.form-submit input {max-width: 280px;}
	
	/*////////////  全ページ共通のフッター  //////////////*/
	.footer-rogo a {height: 50px;width: 191px;}
	.insta {margin: 0 0 0 15px;}
	.partnership {margin: 6px 0 0 0;}
}





@media screen and (max-width: 400px) {
	/*全ページ共通のテーブル構造　-------------------*/
	#wrapper {font-size: 80% !important;}
		
	/*/////////////　introduction　////////////////*/
	.section.intro {padding: 65px 20px 58px 20px;}
	.intro-midashi span {display: unset;}
	
	/*/////////////　NEWS　////////////////*/
	.index-kuwashiku.news{display:none;}

	/*全ページ共通のページ下部のお問合せ・協力会社様募集*/	
	ul.toiawase-waku li.toiawase-form a {line-height: 41px;height: 43px;width: 220px;}
	
	/*////////////  全ページ共通のフッター  //////////////*/
	.footer-zip span {display: block;padding-left: 1em;}
	.insta {margin: 15px auto -7px auto;display: table;}
	.insta a {width: 28px;height: 28px;}
}





@media screen and (max-width: 350px) {
	/*/////////////　施工実績　////////////////*/
	.form-submit input {max-width: 250px;}
}