@charset "utf-8";

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

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

@media screen and (max-width: 1150px) {
	/*全ページ共通のテーブル構造-----------*/
	.container {width: 96%;}
	
	/* ========= 横メニュー ========== */
	ul#yoko-menu {width: 100%;}
}




@media screen and (max-width: 1070px) {
	/*//////// 全ページ共通のfooter ///////////////*/
	.footer-cont{width:100%;}
}




@media screen and (max-width: 1000px) {
	/*全ページ共通のテーブル構造-----------*/
	.naka-cont {padding: 0 2%;}
	
	/*//////// 全ページ共通のheader ///////////////*/
	#header > .container {height: 112px;}
	#header.smaller {top: -112px !important;}
	
	.header-left {top: 20px;}
	.header-rogo a {width: 240px;height: 30px;}
	.header-zip {font-size: 90%;letter-spacing: 0;}
	
	.header-right {top: 15px;width: 350px;}
	.header-tel a {height: 35px;}
	.uketuke-time {font-size: 86%;padding: 8px 0;margin-top: 9px;}
	
	.header-netsite {top: 48px;right: 380px;}
		
	/*index上部の切り替わる画像 slider-pro -------------*/
	body.home .headerimgs-wrapper {padding: 40px 0 40px 0;}
	.slider-pro p.index-bigimg1-text1 {width: 600px;font-size: 59px;margin-left: -2.4%;padding: 4px 0 10px 0;}
	.slider-pro p.index-bigimg1-text2 {width: 600px;font-size: 24px;margin-left: -2.4%;line-height: 2;}
		
	/* ページの各セクション-------------------*/
	.section {padding: 60px 0 60px 0;}

	/*全ページ共通のテーブル構造　-------------------*/
	#wrapper{font-size:106%;}

	/*ページ上部の緊急告知部分 */
	#window{font-size:90%;}

	/*＝＝＝＝＝＝　ひとつひとつ丁寧に　＝＝＝＝＝＝*/
	.section.teinei {border-top: 2px solid #555;border-bottom: 2px solid #555;}
	.index-midashi{font-size:38px;}
	.index-com1 {width: 90%;margin: 25px auto 0 auto;}
	
	/*開発スタイル*/
	ul.style-box li .cont {padding:9px 20%;bottom: 20px;}
	ul.style-box li .cont img{width:100%;height:auto;}
	
	
	/*全ページ共通のページ下部の上部へ戻る */
	#pagetop {width:40px;height:40px;right: 10px;bottom: 10px;}

	/*//////// 全ページ共通のfooter ///////////////*/
	.footer-right{width:350px;}
	
	.footer-rogo a{width:240px;height:30px;}
	.footer-zip{font-size: 90%;letter-spacing: 0;}
	
	.footer-tel a{height:34px;}
	.footer-uketuke-time{font-size: 86%;padding: 8px 0;margin-top: 9px;}
	
	.footer-netsite {top:36px;right: 380px;}
}






@media screen and (max-width: 900px) {
	/*全ページ共通のテーブル構造-----------*/
	.naka-cont {padding: 0;}

	/*＝＝＝＝＝＝　ひとつひとつ丁寧に　＝＝＝＝＝＝*/
	.index-soap{padding:0 10%;}
	
	/* ==== お知らせ =====*/
	dl.indexnews-dl {width: 100%;}
}




@media screen and (max-width: 870px) {
	#header{border-bottom: 1px solid #ccc;}
	#header.smaller {top: 0 !important;}
	#header .container {height: 60px;}
	.header-left {top:18px;}
	.header-rogo a {width: 122px;height:29px;background: url(../img/rogo_gray.png) no-repeat 0 0;background-size: contain;}
	.header-zip {display: none;}
	.header-right{display: none;}
	.header-netsite {display: none;}

	/*-------------------------------------------------------------------------
	ページ上部右の出てくるナビmenuが出現して、入れ替わりに横メニューが消える
	--------------------------------------------------------------------------*/
	.yokomenu-bg{display:none;}
	
	#menubtn{position:fixed;z-index:700;top:9px;right:15px;background:#ccc url(../img/header_menu.png) no-repeat 0 0;width:54px;height:42px;display:block;cursor:pointer;}/*overflow:hidden;text-indent:-8989px;*/
	#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:#00536d;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{background-color: #666;}
	.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;position: fixed;width:100%;z-index:49;overflow-y: scroll;height:100%;right: 0;top: 0;background-color:#eff1f1;}
	#navi_sp a,
	#navi_sp a:hover{text-decoration:none;}

	#navi_sp ul#yoko-menu-sp {width:100%;clear: both;padding:70px 10px 0 10px;list-style:none none outside;background-image:none;text-align: center;}
	#navi_sp ul#yoko-menu-sp li {margin:24px 0;line-height: 1.2;}
	#navi_sp ul#yoko-menu-sp li a {font-size:108%;color: #333;text-decoration: none;line-height:1;}
	#navi_sp ul#yoko-menu-sp li a:hover{opacity:0.6;}

	.yoko-menu-netsite{max-width: 260px;margin: 25px auto 0 auto;}
	.yoko-menu-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;}
	.yoko-menu-netsite a:hover{background:#f7f7f7 url(../img/arrow_glay5-7.png) no-repeat left 18px center;text-decoration:none;}

	/*submenu*/
	#navi_sp ul#yoko-menu-sp li.spbox01{display:inline-block;width:48%;margin:1px 0;}
	#navi_sp ul#yoko-menu-sp li.spbox01 > a{border: 1px solid #999;font-size: 90%;display: block;margin: 0 3%;padding: 7px 0;}
	
	#navi_sp ul#yoko-menu-sp li.spbox00 > a{}
	#navi_sp ul#yoko-menu-sp li.spbox02 > a{background:url(../img/header_menu_down.png) no-repeat left center;padding-left:17px;}
	#navi_sp ul#yoko-menu-sp li.spbox02.selected > a{background:url(../img/header_menu_up.png) no-repeat left center;padding-left:15px;opacity: 0.5;}
	
	#navi_sp ul#yoko-menu-sp li.spbox03 > a{border: 1px solid #999;font-size: 90%;display: block;margin: 0 3%;padding: 7px 0;}
	
	#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%;list-style: none;}
	#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: 0 0 25px 0;}
	#navi_sp p#menuclose a{font-size:100%;color:#FFF;padding:9px 0;line-height: 1.0;display: block;background:#444 url(../img/header_menu_close.gif) no-repeat right 15px center;cursor: pointer;width: 260px;margin: 0 auto;text-align: center;}
	#navi_sp p#menuclose a:hover{background-color:#666;opacity:1;}

	/*フリーダイヤル電話*/
	ul#yoko-menu-sp .header-tel a {width: 220px;height: 22px;background-size: contain;margin:15px auto 0 auto;}
	ul#yoko-menu-sp .uketuke-time {border: none;font-size: 76%;padding: 0;margin-top: 6px;letter-spacing: 0;text-align: center;}



	/*index上部の切り替わる画像 slider-pro -------------*/
	body.home .headerimgs-wrapper{padding: 40px 0 20px 0;background-size: 150%;}
	.sp-slides-container {margin-top: 0;}
	.popup-btn {margin: 40px auto 0 auto;}

	/*ページ上部の緊急告知部分 */
	#window{top: 24px;}
	
	/*＝　ひとつひとつ丁寧に　＝*/
	.section.teinei {background-size: 130%;}
	/*＝　開発スタイル　＝*/
	.section.style{background-size: 130%;}
	/*＝　お知らせ　＝*/
	.section.oshirase{background-size: 130%;background-position:center top -100px;}

	/*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;}
	
	
	
	/*//////// 全ページ共通のfooter ///////////////*/
	#footer-link ul li {margin: 0 10px 8px 10px;}
	.footer-cont {width:100%;padding-bottom: 15px;}
	.footer-rogo a {width:120px;height: 26px;}
	.footer-zip {font-size: 85%;margin-top: 6px;}
	.footer-right {width: 270px;}
	.footer-tel a {height: 28px;}
	.footer-uketuke-time {font-size: 72%;padding: 8px 0;margin-top: 7px;}
	.footer-netsite {top: 27px;right: 300px;width:155px;}
	.footer-netsite a {padding: 9px 0 9px 10px;}
}




@media screen and (max-width: 800px) {
	/*index上部の切り替わる画像 slider-pro -------------*/
	 body.home .headerimgs-wrapper{background-size: 170%;}
}





@media screen and (max-width: 740px) {
	/*//////// 全ページ共通のfooter ///////////////*/
	.footer-cont {padding-bottom: 20px;}
	#footer-link {padding: 15px 0 20px 0;}
	.footer-left {float: none;display: inline-block; }
	.footer-right {float: none;margin: 20px auto 0 auto;}
	.footer-rogo a {margin: 0 auto;}
	.footer-zip {text-align: center;}
	.footer-netsite {position: unset;margin: 15px auto 0 auto;}
}





@media screen and (max-width: 700px) {
	/*index上部の切り替わる画像 slider-pro -------------*/
	.headerimgs-wrapper{padding: 80px 0 15px 0;}
	
	/* indexのポップアップ表示-----------------*/
	#window {width:85%;}
	
	/*開発スタイル*/
	.index-midashi2 {font-size: 26px;padding: 9px 0 10px 0;}
	ul.style-box li {width: 47.5%;margin: 0 0.3%;}
	ul.style-box li .cont {bottom: 10px;}
}






@media screen and (max-width: 640px) {
	/*全ページ共通のテーブル構造　-------------------*/
	#wrapper{font-size:100%;}
	.container {width: 94%;}

	/*開発スタイル*/
  .section.style {background-size: 150%;background-position: center top -200px;}
	
	/*＝＝＝ ひとつひとつ丁寧に ＝＝*/
	.index-midashi{font-size:30px;letter-spacing: 0.1em;}
	.index-com1 {width: 95%;font-size: 93%;}
	.index-soap {margin-top: 30px;}
	
	/* ==== お知らせ =====*/
	.section.oshirase{background-size: 150%;padding: 0;}
	dl.indexnews-dl {padding-bottom: 40px;}
	dl.indexnews-dl {margin: 20px auto 0 auto;}
	dl.indexnews-dl dd dl.news-dl dt {width: 90px;font-size: 79%;background: url(../img/arrow_glay3-5.png) no-repeat right 7px;padding-top: 3px;}
	dl.indexnews-dl dd dl.news-dl a dd {padding: 0 0 0 95px;}
	dl.indexnews-dl dd dl.news-dl a:hover dd {padding: 0 0 0 95px;}
	.section.oshirase {background-size:cover;background-position: center top 0;}
	.news-more{margin: -35px 0 0 0;padding-bottom: 40px;}

	/*//////// 全ページ共通のfooter ///////////////*/
	#footer-link {display: none;}
	.footer-cont {padding-top: 20px;}
}





@media screen and (max-width: 600px) {
	/*index上部の切り替わる画像 slider-pro -------------*/
	 body.home .headerimgs-wrapper{background-size: 192%;}
}





@media screen and (max-width: 560px) {
	/* ページの各セクション-------------------*/
	.section {padding: 40px 0 40px 0;}

	/*index上部の切り替わる画像 slider-pro ------ ここで固定画像に変更 -------*/
	.sp-layer{display:none;}
	.popup-btn {margin: 25px auto 0 auto;}
	
	/* indexのポップアップ表示-----------------*/
	.sp-pop{display:block;}	/*スマホ時*/
	#txt_label{font-size: clamp(10.5px, 3vw, 16px);height: 48px;padding: 13px 0 0 15px;width: 380px;}	
	
	/*＝＝＝ ひとつひとつ丁寧に ＝＝*/
	.index-midashi {font-size: 26px;}
		
	/*開発スタイル*/
	.index-midashi2 {font-size: 21px;padding: 7px 0 8px 0;}
	ul.style-box li {width: 80%;padding-bottom: 45%;margin: 0;}
	ul.style-box li .cont {bottom: 15px;padding: 7px 25%;}
	ul.style-box li.slabo {margin-top: 10px;}

}




@media screen and (max-width: 500px) {
	/*index上部の切り替わる画像 slider-pro -------------*/
	body.home .headerimgs-wrapper {padding: 70px 0 25px 0;background-size: 1300px;}

	 body.home .headerimgs-wrapper{}
	/*ページ上部の緊急告知部分 */
	 #window{font-size: 80%;padding: 12px 25px 17px 25px;}
	
	/*＝　ひとつひとつ丁寧に　＝*/
	.section.teinei {background-size: 200%;}
	.section.teinei .container {padding: 30px 0 25px 0;}
	
	/*開発スタイル*/
	 .section.style {background-size: 200%;}

}





@media screen and (max-width: 460px) {
	/*開発スタイル*/
	ul.style-box li {width: 90%;padding-bottom: 50%;}
	
}





@media screen and (max-width: 440px) {
	.header-left {top:19px;}
	.header-rogo a {width:110px;height:27px;}
	
	/* ==== お知らせ =====*/
	dl.indexnews-dl dd dl.news-dl dt {float: none;background:none;}
	dl.indexnews-dl dd dl.news-dl a dd {padding: 3px 0 0 5px;}
	dl.indexnews-dl dd dl.news-dl a:hover dd {padding: 3px 0 0 5px;}
}




@media screen and (max-width: 400px) {
}



@media screen and (max-width: 370px) {
	/*ページ上部の緊急告知部分 */
	 #window{font-size: 76%;padding: 7px 17px 17px 17px;}
}