@charset "UTF-8";
/* CSS Document */
/*===== header setting ===========================*/
header{
position:relative; z-index:3;
width:100%; height:174px;
background-color:#f49224;
}
@media screen and (min-width:640px) and (max-width:680px) {
header{height:164px;}
}
@media screen and (min-width:0px) and (max-width:639px) {
header{
position:fixed; height:79px;
box-shadow: 0 2px 3px #9a9b9f;
-webkit-box-shadow: 0 2px 3px #9a9b9f;
-moz-box-shadow: 0 2px 3px #9a9b9f;
}
}
header>h1{
max-width:1000px; height:10px;
margin:0 auto 0; padding:4px 0 4px;
font-size:10px; font-weight:normal; line-height:10px; text-align:center;
border-bottom:solid 1px #dd730c;
}
@media screen and (min-width:0px) and (max-width:639px) {
header>h1{display:none;}
}

header>h6{
max-width:1000px; height:10px;
margin:0 auto 0; padding:4px 0 4px;
font-size:10px; font-weight:normal; line-height:10px; text-align:right;
border-bottom:solid 1px #dd730c;
}
@media screen and (min-width:640px) and (max-width:50000px) {
header>h6{display:none;}
}

ul#h-container{
position: relative;
max-width:1000px; height:94px;
margin:0 auto 0;
border-top:solid 1px #f8ac29;
}
@media screen and (min-width:640px) and (max-width:680px) {
ul#h-container{height:85px;}
}
@media screen and (min-width:0px) and (max-width:639px) {
ul#h-container{height:60px;}
}
#h-container li#h-logo{
position:absolute;
background-image:url(/common/img/h-logo.png);
background-repeat:no-repeat;
background-size:408px 72px;
width:408px; height:72px;
bottom:10px; left:10px;
text-indent:-50000px;
}
#h-container li#h-logo a{display:block; width:100%; height:100%;}
@media screen and (min-width:640px) and (max-width:680px) {
#h-container li#h-logo{background-size:368px 65px; width:368px; height:65px;}
}
@media screen and (min-width:475px) and (max-width:639px) {
#h-container li#h-logo{background-size:227px 40px; width:227px; height:40px;}
}
@media screen and (min-width:345px) and (max-width:474px) {
/*#h-container li#h-logo{
background-image:url(/common/img/h-logo-2.png);
background-size:113px 40px; width:113px; height:40px; left:15px;}*/
#h-container li#h-logo {
    background-image: url(/common/img/h-logo-2.png);
    background-size: 100%;
    width: 80px;
    height: 40px;
    left: 15px;
}	
	
}
@media screen and (min-width:0px) and (max-width:344px) {
/*#h-container li#h-logo{
background-image:url(/common/img/h-logo-2.png);
background-size:85px 30px; width:85px; height:30px; bottom:15px; left:15px;}*/
#h-container li#h-logo {
    background-image: url(/common/img/h-logo-2.png);
    background-size: 100%;
    width: 70px;
    height: 35px;
    bottom: 15px;
    left: 15px;
}	
	
	
}

table#h-time{
position:absolute;
bottom:10px; right:274px;
border:solid 1px #dd730c;
width:210px; height:auto;
}
table#h-time th{
border:solid 1px #dd730c;
padding:3px 5px;
background-color:#facd89;
font-weight:normal;
text-align:center;
}
table#h-time td{
border:solid 1px #dd730c;
padding:5px 8px;
background-color:#eeeeee;
text-align:center;
}
@media screen and (min-width:0px) and (max-width:930px) {
table#h-time{display:none}
}

#h-container li#h-tel{
    position: absolute;
    background-image: url(/common/img/h-tel-1.png);
    background-repeat: no-repeat;
    background-size: 244px 45px;
    width: 244px;
    height: 45px;
    bottom: 16px;
    right: 38px;
	text-indent:-50000px;
}
@media screen and (min-width:640px) and (max-width:940px) {
#h-container li#h-tel{
bottom:20px; right:10px;
}
}
@media screen and (min-width:0px) and (max-width:639px) {
#h-container li#h-tel{
position:absolute;
background-image:url(/common/img/h-tel-sp.png);
background-repeat:no-repeat;
background-size:40px 40px;
width:40px; height:40px;
bottom:10px; right:160px;
text-indent:-50000px;
}
}
@media screen and (min-width:0px) and (max-width:480px) {
#h-container li#h-tel a{display:block; width:100%; height:100%;}
}

#h-container li#h-tel2{
	display: none;
/*position:absolute;
background-image:url(/common/img/h-tel-2.png);
background-repeat:no-repeat;
background-size:244px 36px;
width:244px; height:36px;
bottom:20px; right:10px;
text-indent:-50000px;*/
}
}
@media screen and (min-width:640px) and (max-width:680px) {
#h-container li#h-tel2{background-size:230px 65px; width:230px; height:65px;}
}
@media screen and (min-width:0px) and (max-width:940px) {
#h-container li#h-tel2{display:none}
}

@media screen and (min-width:0px) and (max-width:480px) {
#h-container li#h-tel2 a{display:block; width:100%; height:100%;}
}

#h-request{
position:absolute;
background-image:url(/common/img/h-request.gif);
background-size:40px 40px;
width:40px; height:40px;
bottom:10px; right:110px;
text-indent:-10000px;
}
#h-appoint{
position:absolute;
background-image:url(/common/img/h-appoint.gif);
background-size:40px 40px;
width:40px; height:40px;
bottom:10px; right:110px;
text-indent:-10000px;
}
#h-request a, #h-appoint a{display:block; width:100%; height:100%;}
#h-access{
position:absolute;
background-image:url(/common/img/h-access.gif);
background-size:40px 40px;
width:40px; height:40px;
bottom:10px; right:60px;
text-indent:-10000px;
}
#h-access a{display:block; width:100%; height:100%;}
#menu{
position:absolute;
background-image:url(/common/img/h-menu-sp.gif);
background-size:40px 40px;
width:40px; height:40px;
bottom:10px; right:10px;
text-indent:-10000px;
}
@media screen and (min-width:640px) and (max-width:50000px) {
#h-request{ display:none;}
#h-access{ display:none;}
#h-appoint{ display:none;}
#menu{ display:none;}
}

#h-container li#h-arrow1{
position:absolute;
bottom:65px; right:190px;
font-size:12px;
}
#h-container li#h-arrow1 a:hover{
color:#FFFFFF;
text-shadow:0 1px 3px #000000;
-webkit-text-shadow:0 1px 3px #000000;
-moz-text-shadow:0 1px 3px #000000;
}
@media screen and (min-width:0px) and (max-width:940px) {
#h-container li#h-arrow1{display:none}
}
#h-container li#h-arrow2{
position:absolute;
bottom:65px; right:40px;
font-size:12px;
}
#h-container li#h-arrow2 a:hover{
color:#FFFFFF;
text-shadow:0 1px 3px #000000;
-webkit-text-shadow:0 1px 3px #000000;
-moz-text-shadow:0 1px 3px #000000;
}
@media screen and (min-width:0px) and (max-width:940px) {
#h-container li#h-arrow2{display:none}
}

@media screen and (min-width:640px) and (max-width:50000px) {
#h-request{ display:none;}
#h-access{ display:none;}
#menu{ display:none;}
}

#h-container li#tel-time{
position:absolute;
bottom:55px; right:5px;
font-size:12px;
color:#000000;
text-shadow:0 1px 3px #FFFFFF;
-webkit-text-shadow:0 1px 3px #000000;
-moz-text-shadow:0 1px 3px #000000;
}
@media screen and (min-width:941px) and (max-width:50000px) {
#h-container li#tel-time{display:none}
}
@media screen and (min-width:0px) and (max-width:639px) {
#h-container li#tel-time{display:none}
}

/* !!グローバルメニュー*/
nav#g-nav{
position:relative; z-index:6; width:100%;
background-color:#f49224;
box-shadow: 0 2px 3px #9a9b9f;
-webkit-box-shadow: 0 2px 3px #9a9b9f;
-moz-box-shadow: 0 2px 3px #9a9b9f;
height: 60px;
box-sizing: border-box;
padding: 10px 0;
overflow:visible !important;
}

nav#g-nav.fixed{position: fixed; top:0px; right:0px;}
@media screen and (min-width:0px) and (max-width:639px) {
	nav#g-nav.fixed{position: fixed; top:85px; right:10px;}
}
	
	nav#g-nav ul#g-menu{
	max-width:1000px; height: 40px;
	margin:0 auto 0; padding:0;
}

ul#g-menu{overflow:visible !important;}

nav#g-nav ul#g-menu>li{
float: left; position:relative;
background-image:url(/common/img/nav-li-bg.gif);
background-repeat:no-repeat;
background-position:right top;
width:20%;
padding-top: 5px;
margin-top: 5px;height: 40px;
overflow:visible !important;
}
nav#g-nav ul#g-menu li:nth-child(2){
width:25%;
}
nav#g-nav ul#g-menu li:nth-child(3){
width:20%;
}
nav#g-nav ul#g-menu li:nth-child(4){
width:20%;
}
nav#g-nav ul#g-menu>li>a{
display:block;
background-image:url(/common/img/nav-li-a-bg.gif);
background-repeat:no-repeat;
background-position:left top;
height:22px;
color:#000000;
text-shadow:0 1px 3px #FFFFFF;
-webkit-text-shadow:0 1px 3px #FFFFFF;
-moz-text-shadow:0 1px 3px #FFFFFF;
text-align:center;
}
nav#g-nav ul#g-menu>li>a:hover{
color:#FFFFFF;
text-shadow:0 1px 3px #000000;
-webkit-text-shadow:0 1px 3px #000000;
-moz-text-shadow:0 1px 3px #000000;
}
nav#g-nav ul#g-menu>li.menu-start{width:15%;}
nav#g-nav ul#g-menu>li.menu-start a{background-image:none;}
nav#g-nav ul#g-menu>li.menu-end{background-image:none;}
@media screen and (min-width:0px) and (max-width:639px) {
	nav#g-nav{
	position:absolute; display:none; top:85px; right:10px;
	background-color:#797979; width:298px; height:auto;
	padding:2px 1px;
	border-radius:3px 3px 3px 3px;
	}
	nav#g-nav ul#g-menu{width:298px; height:auto; padding:0; border-top:solid 1px #e5e5e5;list-style: none !important;}
	nav#g-nav ul#g-menu>li{
	list-style: none !important;
	padding-top: 0;
	float:none;
	background-image:none;
	background-color:#a09a9a;
	border-top:solid 1px #797979;
	border-bottom:solid 1px #e5e5e5;
	width:100%; margin:0;
	height: auto !important;
	}
	nav#g-nav ul#g-menu>li.menu-start{width:300px; border-top:none;}
	nav#g-nav ul#g-menu>li>a{
	background-image:none;
	padding:10px 0 10px 10px;
	width:188px; height:16px;
	text-align:left;
	color: #FFFFFF;
	text-shadow:1px 1px 2px #3E3A39;
	-webkit-text-shadow:1px 1px 2px #3E3A39;
	-moz-text-shadow:1px 1px 2px #3E3A39;
	}
}
/* !!サブメニュー*/
nav#g-nav ul#g-menu>li>ul.sub{
position:absolute; top:40px; display: none;
background-color: rgba(245,245,245,1);
border-radius:3px 3px 3px 3px;
box-shadow: 0 2px 3px #9a9b9f;
-webkit-box-shadow: 0 2px 3px #9a9b9f;
-moz-box-shadow: 0 2px 3px #9a9b9f;
z-index:3;
overflow:visible !important;
width: 200px;
left:-10px;
}
nav#g-nav ul#g-menu>li>ul.nomal{margin:0 !important; padding:0; list-style: none !important;}
nav#g-nav ul#g-menu>li>ul.behind{right:0;}
nav#g-nav ul#g-menu>li>ul.sub>li{
border-bottom: 1px dotted #CCCCCC;
width:100% !important;
text-align:left; font-size:12px;
list-style: none;

}
nav#g-nav ul#g-menu>li>ul.sub>li a{
display:block;
width:100%; height:36px;
line-height: 36px;padding:0 10px ;
box-sizing: border-box;
white-space:nowrap;
}
@media screen and (min-width:0px) and (max-width:639px) {
nav#g-nav ul#g-menu>li>ul.sub{
display:none; position: static;
background-color:#fffdfb;
border-radius:0 0 0 0;
}
nav#g-nav ul#g-menu>li>ul.sub>li{border-bottom:dotted 1px #CCCCCC; width:178px;}
}
/* !!サブメニュー2列*/
@media screen and (min-width:0px) and (max-width:639px) {
	nav#g-nav{
		width:298px !important;
		height:auto !important;
		/* 		display: block !important; */
	}
	nav#g-nav ul#g-menu{
		width:298px;list-style: none !important;
		padding: 0 !important;
	}

	nav#g-nav ul#g-menu > li{width: 298px !important;}

	ul.sub{padding: 0 !important;overflow: hidden;width: 100% !important;}

	ul.sub.nomal > li{
		list-style: none !important;
		box-sizing: border-box;
		width: 100% !important;
		padding: 0;
	}

		ul.sub.nomal > li >a{
			display: block;
			margin: 0;
			height: 36px !important;
			line-height: 36px !important;
			padding:0 10px !important;
		}

		nav#g-nav ul#g-menu > li:nth-child(4) > ul.sub>li{
			width: 50% !important;
			float: left;
			padding: 0;
		}

			nav#g-nav ul#g-menu > li:nth-child(4) > ul.sub>li a{
				background:url(http://www.comfort-hp.com/common/img/icon-document.gif) no-repeat ;
				background-position:6px center;
				background-size: 12px;
				box-sizing: border-box;
				padding-left: 22px !important;
				padding-right: 0 !important;
				width:100%; height:36px;
				line-height: 36px;
				box-sizing: border-box;
			}
    
    ul.sub.nomal:before,
    ul.sub.nomal:after {content: ''; display: block;}
    ul.sub.nomal:after {clear: both;}
    ul.sub.nomal {*zoom: 1;}

}
/* !!サブメニュー2列 ここまで*/



/*===== keyvisual setting ===========================*/
/* ヘッダー画像 */
#keyvisual{max-width:1000px; height:auto;margin:0 auto 10px; padding:5px 0 0;}
#keyvisual img{width:100%; height:auto;}
@media screen and (min-width:0px) and (max-width:639px) {
#keyvisual{padding:85px 0 0;}
}
/*===== main setting ===========================*/
article{
max-width:1000px;
margin:0 auto 10px;
}
#contents{
float:right;
width:75%; height:auto;
}
#top-contents{
width:100%; height:auto;
}
#side{
float:left;
width:21%; height:auto;
margin:0 0 0 0;
}
@media screen and (min-width:0px) and (max-width:1000px) {
#top-contents{width:98%; margin:0 1% 0 1%;}
}
@media screen and (min-width:641px) and (max-width:1000px) {
#contents{margin:0 0.5% 0 0;}
#side{margin:0 0 0 0.5%;}
}
@media screen and (min-width:0px) and (max-width:640px) {
#contents{
float:none;
width:98%; height:auto;
margin:0 1% 20px 1%;
}
#side{
float:none;
width:98%; height:auto;
margin:0 1% 0 1%;
}
}
/* サイドナビコンタクト */
ul#side-navi-contact{margin:0 0 10px;}
ul#side-navi-contact li{width:100%; height:auto;}
ul#side-navi-contact li img{width:100%; height:auto;}
@media screen and (min-width:0px) and (max-width:640px) {
ul#side-navi-contact{display:none;}
}
/* サイドメニュー */
ul#side-menu li{
background-image:url(/common/img/side-menu-bg.png);
background-repeat:no-repeat;
background-size:100% 40px;
width:93%; height:22px;
margin:0 0 5px; padding:9px 0 9px 7%;
}
ul#side-menu li:first-child{
	font-size: 95%;
}
@media screen and (min-width:0px) and (max-width:749px) {
ul#side-menu li:first-child{
	font-size: 80%;
}
}
ul#side-menu li a{display:block; width:100%; height:auto;}
@media screen and (min-width:0px) and (max-width:640px) {
ul#side-menu{display:none;}
}
/* サイドバナー */
ul#side-banner li img{width:100%; height:auto;}
ul#side-banner li.fixed{
	position: fixed;
	top: 70px;
	width: 210px;
}
@media screen and (min-width:0px) and (max-width:640px) {
ul#side-banner{display:none;}
}

/*===== footer setting ===========================*/
footer{background-color:#f5f5f5;}
/* パン屑 */
#Breadcrumb{border-bottom:solid 1px #e5e5e5;}
#Breadcrumb-inner{max-width:980px; margin:0 auto 0; padding:3px 5px; font-size:12px;}
#Breadcrumb-inner div{float:left;}
/* フッターロゴ・TEL */
#f-container{position:relative; max-width:1000px; height:80px; margin:0 auto 0;}
#f-logo{	
    background-size: 26px 50px;
    position: absolute;
    background-image: url(/common/img/h-logo.png);
    background-size: 100%;
    background-repeat: no-repeat;
    width: 262px;
    height: 52px;
    top: 15px;
    left: 10px;
    text-indent: -50000px;
}
#f-logo a{display:block; width:100%; height:100%;}
#f-tel{
	position: absolute;
	top: 10px;
	right: 10px;
	max-width: 260px;
	font-size: 11px;
}
#f-tel p{
	margin: 0!important;
}
#f-tel img{
	width: 100%;
	vertical-align: top;
}

@media screen and (min-width:0px) and (max-width:640px) {
#f-tel{display:none;}
}
/* フッターメニュー  */
#f-menu-grp{max-width:1000px; margin:0 auto 20px;}
#f-menu-grp>li{float: left; width:19%; margin:0 0.5% 0 0.5%;}
#f-menu-grp>li>span{
display: block;
background-color:#a09a9a;
color: #FFFFFF;
text-shadow:1px 1px 2px #3E3A39;
-webkit-text-shadow:1px 1px 2px #3E3A39;
-moz-text-shadow:1px 1px 2px #3E3A39;
text-align:center;
margin-bottom:10px;
}
#f-menu-grp>li>ul.nomal{margin:0 0 0 15px !important; padding:0;}
#f-menu-grp>li>ul.f-menu>li{font-size:11px;}
#f-menu-grp>li>ul.f-menu>li>a{color: #3E3A39;}
#f-menu-grp>li>ul.f-menu>li>a:hover{color:#08c;}

@media screen and (min-width:0px) and (max-width:640px) {
#f-menu-grp{margin:0px; border-top:solid 1px #e5e5e5;}
#f-menu-grp>li{float: none; width:100%; margin:0;}
#f-menu-grp>li>span{
background-color:#a09a9a;
padding:10px 20px 10px;
border-bottom:1px solid #e5e5e5;
text-align:left;
margin-bottom:0;
}
#f-menu-grp>li>span:before{content: "▶ "}
#f-menu-grp>li>span.opend:before{content: "▼ "}
#f-menu-grp>li>ul.nomal{margin:0 0 0 20px !important; padding:5px;}
#f-menu-grp>li>ul.f-menu{display:none;}
#f-menu-grp>li>ul.f-menu>li{margin:10px; font-size:12px;}
}

/* フッターバナーエリア */
#newfooter{
	z-index: 10;
	width: 100%;
	background: rgba(255, 255, 255, 0.9);
	position: fixed;
	bottom: 0;
	left: 0;
	display: none ;
}

#newfooter .inner{
	max-width: 1000px;
	margin: 0 auto;
	padding: 0 1%;
	position: relative;
}
#newfooter ul{
	margin-top: 7px;
}
#newfooter ul li{
	float: left;
	margin: 0 2% 0 0;
}
#newfooter ul li:last-child{
	float: left;
	margin: 0;
}

#newfooter ul li img{
	width: 100%;
}

#newfooter ul li.logo{
	width: 23.5%;
}
#newfooter ul li.tel{
	width: 23.5%;
}
#newfooter ul li.f-req{
	width: 23.5%;
}
#newfooter ul li.f-rese{
	width: 23.5%;
}
.f-req a{
}

@media screen and (min-width:481px) and (max-width:640px) {
#newfooter{
	padding-left: 2%;
}
#newfooter ul li.logo{
	width: 48%;
	height: 60px;
}
#newfooter ul li.tel{
	width: 48%;
    height: 60px;
}
#newfooter ul li.f-req{
	width: 48%;
}
#newfooter ul li.f-rese{
	width: 48%;
}
}

@media screen and (min-width:0px) and (max-width:480px) {
#newfooter{
	display: none !important;}
}

/* 追加20190528   */


#f-fix{
	margin: 0px;
	width: 100%;
	background-color: #513418;
	position:fixed;
	bottom: -80px;
	transition: all 1s ease 0s;
	z-index: 100;
	display:none;
}

#f-fix.show{
	bottom:0;
	
}
#f-fix .f-fixSpBox{
		display: none;
	}
#f-fix .f-fixBox{
	margin: 0px auto;
	padding: 12px 0px 0px 0px;
	max-width: 1000px;
}
#f-fix .f-fix-logo{
	margin: 0 0 0 1%;
	padding: 0;
	width: 100%;
	max-width: 232px;
	float: left;
}

#f-fix .f-fix-tel{
	margin: 0 0 0 1.5%;
	padding: 0;
	width: 100%;
	max-width: 248px;
	float: left;
}
#f-fix .f-fix-request{
	margin: 0 0 0 1.5%;
	padding: 0;
	max-height: 40px;
	width: 23%;
	max-width: 228px;
	float: left;
}
#f-fix .f-fix-reserve{
	margin: 0 0 0 1%;
	padding: 0;
	max-height: 40px;
	width: 21%;
	max-width: 192px;
	float: left;
}



#f-fix img{
	width: 100%;
}

@media screen and (min-width:0px) and (max-width:480px) {
	#f-fix{
	margin: 0px;
	width: 100%;
	background: rgba(255,255,255,0.7);
	position:fixed;
	transition: all 1s ease 0s;
	z-index: 11;
	border-top: none;
	display: block!important;
	}
	#f-fix .f-fixBox{
		display:none;
	}
	#f-fix .f-fixSpBox{
		display: block;
		padding-top: 1.5%;
		width: 94%;
		margin: 0 auto;
	}
	#f-fix .f-fixSpBox .f-fix-tel,
	#f-fix .f-fixSpBox .f-fix-request{
		width: 48%;
	}
	#f-fix .f-fix-tel{
	margin: 0;
	padding: 0;
	max-width: 100%;
	}
	#f-fix .f-fix-request{
	margin: 0 0 0 2%;
	padding: 0;
	max-width: 100%;
	}

}

/* end  */
	
/* Copyright   */
#Copyright{border-top:solid 1px #e5e5e5; padding:0px 0 70px 0; text-align:center; font-size:10px;}
	@media screen and (min-width:0px) and (max-width:865px){
		#Copyright{padding:0px 0 90px 0;}
	}


/* 整体用フォームエリア */

#form-contents{
	width: 80%;
	height: auto;
	margin-left: auto;
	margin-right: auto;
}