@charset "utf-8";
/* ===================================================
	Reset
====================================================== */
#customer_header *,
#customer_footer * { -webkit-box-sizing: content-box; box-sizing: content-box;}

#customer_header h1,
#customer_header h2,
#customer_header h3,
#customer_header h4,
#customer_header h5,
#customer_header h6,
#customer_footer h1,
#customer_footer h2,
#customer_footer h3,
#customer_footer h4,
#customer_footer h5,
#customer_footer h6 { margin: 0;}

#customer_header ul,
#customer_header ol,
#customer_header li,
#customer_footer ul,
#customer_footer ol,
#customer_footer li { padding: 0; margin: 0; list-style-type: none;}

#customer_header dl,
#customer_footer dl { padding: 0; margin: 0;}

#customer_header p,
#customer_footer p { padding: 0; margin: 0;}


/* ===================================================
	Custom CSS
	※ 予約番自体のコンテンツに影響するのを避けるため、
	　必ず #customer_header または #customer_footer からの継承で記述してください。
====================================================== */
body {
	min-width: 1100px;
	background: #f6f7f2 url(https://www.yunosato-sugina.com/commons/img/body_bg.jpg);
}

#customer_header,
#customer_footer {
	color: #434343; font-size: 14px; font-weight: normal; line-height: 1.5;
	font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3","Hiragino Kaku GothicPro","Osaka","Verdana","Helvetica","Arial","ＭＳ Ｐゴシック", sans-serif;
	-webkit-text-size-adjust: 100%;
}

#customer_header #header_wrap,
#customer_header #nav_wrap,
#customer_footer #footer_wrap {
	padding: 0; margin: 0;
}

#customer_header #header,
#customer_header #gnav ul,
#customer_footer #footer {
	width: 1100px; max-width: 100%; padding: 0; margin: 0 auto;
	-webkit-box-sizing: border-box; box-sizing: border-box;
}

#customer_header a,
#customer_footer a { color: #555; text-decoration: none;}
#customer_header a:hover,
#customer_footer a:hover { color: #555; text-decoration: underline;}
#customer_header a:hover img,
#customer_footer a:hover img { opacity: 0.75;}

#customer_header img,
#customer_footer img { max-width: 100%;}

#customer_header .ver_sp,
#customer_footer .ver_sp { display: none;}

@media screen and (orientation:landscape) {
	body { width: 100%;}
}
@media screen and (max-width: 768px) {
	body { min-width: 0;}

	#customer_header .ver_pc,
	#customer_footer .ver_pc { display: none;}
	#customer_header .ver_sp,
	#customer_footer .ver_sp { display: inline;}
}


/* Header
------------------------------------------------------ */
#customer_header #header_wrap { }
#customer_header #header { padding: 10px 0 5px;}
#customer_header #header > p { font-size: 11px;}
#customer_header #header #logo { width: 300px; float: left;}

#customer_header #h_nav {
	display: -webkit-flex; display: -ms-flex; display: flex;
	margin-top: 15px; width: 640px; float: right;
	justify-content: center;
	align-items: center;
}
#customer_header #h_nav li {
	-webkit-box-sizing: border-box; box-sizing: border-box;
	-webkit-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 0 auto;
}
#customer_header #h_nav li:first-child { width: 140px;}
#customer_header #h_nav li:nth-child(2){ width: 235px; padding: 0 25px 0 30px;}
#customer_header #h_nav li:last-child  { width: 265px; text-align: right;}

#customer_header #h_nav li:nth-child(2) img { display: block; float: left; margin-right: 15px;}
#customer_header #h_nav li:nth-child(2) span{ display: block; font-size: 10px;}
#customer_header #h_nav li:last-child span{ display: block; margin-top: 5px; text-align: right;}


@media screen and (max-width: 600px) {
	#customer_header #header { padding: 0 10px; height: 70px; -webkit-box-sizing: border-box; box-sizing: border-box;}
	#customer_header #header > p{ display: none;}
	#customer_header #header #logo { width: calc(100% - 60px); float: none;}
	#customer_header #header #logo img{ max-height: 70px;}
	#customer_header #h_nav { display: none;}
}



/* G-nav
------------------------------------------------------ */
#customer_header .close_menu { display: none;}

#customer_header #gnav { clear: both; background: #46774b;}
#customer_header #gnav li {
	width: calc(100% / 7); height: 70px; float: left;
	font-size: 16px; text-align: center; line-height: 70px;
	font-family:"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
	-webkit-box-sizing: border-box; box-sizing: border-box;
}
#customer_header #gnav li:nth-last-child(2) { background: #28542c;} /* 最後の閉じるボタンを抜かして一番最後のリスト */
#customer_header #gnav a { display:block; color: #fff;}
#customer_header #gnav a:hover { text-decoration: none; background-color: rgba( 0,0,0,0.15);}

#customer_header #gn_trigger,
#customer_header #gn_home { display: none;}

@media screen and (max-width: 600px) {
	#customer_header #gn_trigger {
		display: block;
	}

	#customer_header #gn_trigger a {
		display: block; padding: 5px; width: 50px; height: 50px;
		top: 10px; right: 10px; position: absolute; z-index: 10;
		background: #35843c; cursor: pointer; box-sizing: border-box;
	}

	/* html,body 固定用クラス ※iphoneでは効きません。 */
	#customer_header .pos_fix { overflow: hidden;}
	/* gnav外側に追加する要素 画面全体を覆います。 */
	#customer_header #gnav {
		width: 100%; position: fixed; top: 0; left: 0; z-index: 10000;
		background: rgba(0,0,0,0.5); overflow: auto; pointer-events: none;
		-webkit-transition: 0.75s; -o-transition: 0.75s; transition: 0.75s;

		/* アニメーションの設定 */
		/* CSSで設定しているので、デザインに合わせて表示の仕方は変えてください。 */
		/* アコーディオン形式サンプル */
		height: 0;
	}
	#customer_header #gnav:target {
		pointer-events: auto;

		/* アニメーションの設定 */
		/* アコーディオン形式サンプル */
		height: 100%;

	}

	#customer_header #gn_home { display: block;}

	#customer_header #gnav .close_menu { cursor: pointer;}
	#customer_header #gnav .close_menu span:before,
	#customer_header #gnav .close_menu span:after { content: ''; width: 15px; height: 3px; position: absolute; left: 0;}
	#customer_header #gnav .close_menu span:before { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg);}
	#customer_header #gnav .close_menu span:after { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);}
	#customer_header #gnav #close_top { padding: 10px 0; text-align: center; position: relative;}
	#customer_header #gnav #close_top a{ padding: 0;}
	#customer_header #gnav #close_top span {
		width: 15px; height: 0; padding: 15px 0 0;
		position: absolute; top: 13px; right: 10px; overflow: hidden;
	}
	#customer_header #gnav #close_top span:before,
	#customer_header #gnav #close_top span:after { background: #787878; margin: -2px 0 0; top: 50%;}
	#customer_header #gnav #close_bot {
		margin: 0; padding: 10px 5px; width: 100%;
		color: #fff; text-align: center; background: #35843c;
		box-sizing: border-box;
	}
	#customer_header #gnav #close_bot a{ padding: 0; color: #fff;}
	#customer_header #gnav #close_bot span { display: inline-block; padding: 0 0 0 20px; position: relative;}
	#customer_header #gnav #close_bot span:before,
	#customer_header #gnav #close_bot span:after { margin: -2px 0 0; top: 50%; background: #fff;}

	#customer_header #gnav ul {
		width: auto; padding: 0; margin: 70px 0 80px;
		-webkit-box-sizing: border-box; box-sizing: border-box;
	}
	#customer_header #gnav li {
		display: block; width: 100%; height: auto; float: none;
		font-size: 15px; line-height: 2;
		font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3","Hiragino Kaku GothicPro","Osaka","Verdana","Helvetica","Arial","ＭＳ Ｐゴシック", sans-serif;
		border-bottom: 1px solid #d2ccc3;
	}
	#customer_header #gnav li:not(:first-child),
	#customer_header #gnav li:nth-last-child(2){
		background: rgba(255, 255, 255, 0.9) url(https://www.yunosato-sugina.com/commons/img/gn_list_icon.gif) no-repeat 98% center;
	}
	#customer_header #gnav li:first-child { border-top: 1px solid #ccc; background: rgba(255, 255, 255, 0.9);}
	#customer_header #gnav li:nth-last-child(2) { border-bottom: none; }

	#customer_header #gnav a {
		height: auto; padding: 15px; color: #000;
		background: none; line-height: 1.8;
		-webkit-box-sizing: border-box; box-sizing: border-box;
	}
	#customer_header #gnav a:hover { background-color: transparent;}
}





/* breadcrumb
------------------------------------------------------ */
#customer_header #breadcrumb { margin: 15px auto 30px; width: 1100px; max-width: 96%;}
#customer_header #breadcrumb li { display: inline-block; line-height: 1.6;}
#customer_header #breadcrumb li:before { content: '>'; margin: 0 5px;}
#customer_header #breadcrumb li:first-child:before { display: none;}
#customer_header #breadcrumb,
#customer_header #breadcrumb a{ color: #4b9456;}

@media screen and (max-width: 600px) {
	#customer_header #breadcrumb { display: none;}
}


/* Footer
------------------------------------------------------ */
#customer_footer{ margin-top: 150px; /*margin-left:50px;*/}
#customer_footer > img{ width: 100%;}

#customer_footer > p img { width: 100%;}

#customer_footer #pagetop { display:block; position: fixed; bottom: 25px; right: 20px; z-index: 9999;}
#customer_footer #pagetop a { display: block; width: 50px; height: 50px;}

#customer_footer #footer_wrap { background: #fff;}
#customer_footer #footer { padding: 20px 0 40px; line-height: 1.6;}

#customer_footer #f_logo { width: 375px; float: left; font-style: normal;}
#customer_footer #f_logo img { display: block; margin: 0 0 15px;}
#customer_footer #f_logo address span:first-child{ margin-right: 20px;}
#customer_footer #f_logo address span:last-child { display: block;}

#customer_footer #ft_info{ width: 680px; float: right;}
#customer_footer #ft_info .tel_box{
	margin-top: 20px; /* margin-topは○○区民ページ公開時に削除 */
	/* margin-bottom: 15px; margin-bottomは○○区民ページ公開時に復活 */
	width: 430px; float: left;
}
#customer_footer #ft_info .tel_box p img{ margin-right: 20px; width: 240px;}
#customer_footer #ft_info .tel_box ul{ margin-top: 10px;}
#customer_footer #ft_info .tel_box li{
	display: inline-block; margin: 0 0 5px 25px; padding-left: 17px;
	background: url(https://www.yunosato-sugina.com/commons/img/icon_arrow2_gr.png) no-repeat left center;
}
#customer_footer #ft_info .btn_box{ margin-bottom: 15px; width: 230px; float: right;}

#customer_footer #f_nav { clear: both; padding-top: 20px; border-top: 1px solid #000;}
#customer_footer #f_nav .acc_tit { display: none;}
#customer_footer #f_nav ul { float: left;}
#customer_footer #f_nav ul:not(:nth-of-type(3)){ width: 23%;}
#customer_footer #f_nav ul:nth-of-type(3)      { width: 31%;}
#customer_footer #f_nav li { padding: 0 0 0 15px; margin: 0 0 10px; background: url(https://www.yunosato-sugina.com/commons/img/icon_arrow_br.png) no-repeat left center;}

#customer_footer #btn_group{ display: none;}


#customer_footer #group_wrap{ padding:27px 0 40px; background:url(https://www.yunosato-sugina.com/commons/img/ft_group_bg.jpg); width:100%; text-align:center;}
#customer_footer #group_wrap .inner{ margin: 0 auto; padding: 5px 0; width: 1100px;}

#customer_footer #group_wrap .group_logo{ display:inline-block; position:relative; margin-bottom:30px;}
#customer_footer #group_wrap .group_logo a{ display:inline-block; left:100%; bottom:0; position:absolute; width:100%; margin:0 0 7px 17px;}

#customer_footer #group_wrap ul.group_list{ display:block; width:100%; overflow:hidden;}
#customer_footer #group_wrap ul.group_list>li{ margin-bottom:20px; width:16.66%; text-align:left; float:left; overflow:hidden;}
#customer_footer #group_wrap ul.group_list>li:nth-child(6n+1){ width:189px;}
#customer_footer #group_wrap ul.group_list>li:nth-child(6n+2){ width:184px;}
#customer_footer #group_wrap ul.group_list>li:nth-child(6n+3){ width:194px;}
#customer_footer #group_wrap ul.group_list>li:nth-child(6n+4){ width:178px;}
#customer_footer #group_wrap ul.group_list>li:nth-child(6n+5){ width:188px;}
#customer_footer #group_wrap ul.group_list>li:nth-child(6n+6){ width:167px;}
#customer_footer #group_wrap ul.group_list>li a{ display:inline-block; margin-top:11px; padding-left:10px; color:#333; font-size:13px; line-height:1.4; position:relative;}
#customer_footer #group_wrap ul.group_list>li a:before{ left:0; top:0; position:absolute; content:"›"; color:#287025;}
#customer_footer #group_wrap ul.group_list>li.current a{ color:#297025; text-decoration:underline;}
#customer_footer #group_wrap ul.group_list>li img{ display:block; margin-right:8px; width: 70px; height: auto; float:left;}


#customer_footer #copyright { padding: 5px 0 7px; color: #fff; font-size: 12px; text-align: center; background: #8aae7b;}


@media screen and (max-width: 1100px) {
	#customer_footer #group_wrap .inner{ width: 96%;}
	#customer_footer #group_wrap ul.group_list>li:nth-child(6n+1),
	#customer_footer #group_wrap ul.group_list>li:nth-child(6n+2),
	#customer_footer #group_wrap ul.group_list>li:nth-child(6n+3),
	#customer_footer #group_wrap ul.group_list>li:nth-child(6n+4),
	#customer_footer #group_wrap ul.group_list>li:nth-child(6n+5),
	#customer_footer #group_wrap ul.group_list>li:nth-child(6n+6){
		padding-right: 10px; width: calc(100%/6); box-sizing: border-box;
	}
}
@media screen and (max-width: 600px) {
	#customer_footer{ margin-top: 50px;}
	#customer_footer #pagetop { display: none;}
	#customer_footer #footer { padding: 25px 4% 40px; -webkit-box-sizing: border-box; box-sizing: border-box;}
	#customer_footer #f_logo { margin-bottom: 25px; width: 100%; float: none; text-align: center;}
	#customer_footer #f_logo img { margin: 0 auto 5px;}
	#customer_footer #f_logo address span { display: block;}
	#customer_footer #f_logo address span:first-child{ margin-right: 0;}

	#customer_footer #ft_info,
	#customer_footer #ft_info .tel_box,
	#customer_footer #ft_info .btn_box{ width: 100%; float: none; text-align: center;}

	#customer_footer #ft_info .tel_box{ margin-top: 0; /* margin-topは○○区民ページ公開時に削除 */}
	#customer_footer #ft_info .tel_box p img{ display: block; margin: 0 auto 8px; width: 265px;}
	#customer_footer #ft_info .tel_box ul{ width: auto; margin: 10px auto 0; text-align: center;}
    #customer_footer #ft_info .tel_box li{ margin: 0;}
	#customer_footer #ft_info .btn_box{ margin: 15px auto 25px;}

	#customer_footer #btn_group{ display: block;}
	#customer_footer #btn_group a {
		display: block; padding: 5px 10px; font-size: 18px;
		line-height: 1; text-align: center; border: 1px solid #666;
		font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	}
	#customer_footer #btn_group a img { margin-right: 10px; width: 60px; height: auto; vertical-align: middle;}
	#customer_footer #btn_group a span{ padding-right: 25px; background: url(https://www.yunosato-sugina.com/commons/img/icon_arrow2_br.png) no-repeat right center;}

	#customer_footer #f_nav,
	#customer_footer #group_wrap { display: none;}

	#customer_footer #copyright { margin-bottom: 50px;}
}


/* sp_nav
------------------------------------------------------ */
#customer_footer #sp_nav { display: none;}

@media screen and (max-width: 600px) {
	#customer_footer #sp_nav {
		left: 0; bottom: 0; position: fixed;
		display: table; width: 100%; height: 50px;
		table-layout: fixed; z-index: 9999; border-top: 1px solid #e0dcd6;
	}
	#customer_footer #sp_nav li { display: table-cell; vertical-align: middle; text-align: center;}
	#customer_footer #sp_nav li a{ display: block; padding: 10px; height: 50px; -webkit-box-sizing: border-box; box-sizing: border-box;}
	#customer_footer #sp_nav a img { max-height: 100%; vertical-align: middle;}
	#customer_footer #sp_nav li:first-child { width: 40%; background: #eeeae4;}
	#customer_footer #sp_nav li:nth-child(2){ width: 40%; background: #35843c;}
	#customer_footer #sp_nav li:last-child  { width: 20%; background: #eeeae4;}
}


/* clear
------------------------------------------------------ */

#customer_header #header:after,
#customer_header #nav_wrap:after,
#customer_header #gnav ul:after,
#customer_footer #footer:after { content: "."; display: block; height: 0px; clear: both; visibility: hidden; font-size: 0;}


/* ---------------------------------------------------
	更新履歴
------------------------------------------------------



------------------------------------------------------ */