@charset "utf-8";

/* CSS Document */

img {
    max-width: 100%;
}

.font18 {
    font-size: 18px;
}

.font14 {
    font-size: 14px;
}

.font12 {
    font-size: 12px;
}

.font9 {
    font-size: 9px;
    line-height: 1.2;
}

#switch_btn_pc {
    text-align: center;
    padding: 0 0 10px;
}

#switch_btn_pc a {
    display: inline-block;
    padding: 0px 10px;
    margin: 0;  
}

#switch_btn_pc img {
    max-width:100%;
    width /***/:auto; /* IE8のみ */
    height:auto;
    vertical-align:bottom;
}

#switch_btn_sp {
    text-align: center;
    padding: 0 0 10px;
}

#switch_btn_sp a {
/*    display: inline-block;*/
    padding: 0px 10px;
    margin: 0;  
}

#switch_btn_sp img {
    max-width:40%;
    width /***/:auto; /* IE8のみ */
    height:auto;
    vertical-align:bottom;
}


/*==================================================================
スマホ用CSS
==================================================================*/

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

    /* 共通 */
    .sp_none {
        display: none !important;
    }
    hr {
        display: block !important;
        height: 1px;
        border: 0;
        border-top: 1px solid #cccccc;
        margin: 1em 0;
        padding: 0;
    }
    .mt10 {
        margin-top: 10px !important;
    }
    .mb10 {
        margin-bottom: 10px !important;
    }
    .mb20 {
        margin-bottom: 20px !important;
    }
    .mb30 {
        margin-bottom: 30px !important;
    }
    .fl {
        float: left;
    }
    .fr {
        float: right;
    }
    .clearfix {
        clear: both;
        zoom: 100%;
    }
    .clearfix:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
        overflow: hidden;
        font-size: 0.1em;
        line-height: 0;
    }
    
    /* ヘッダー */
    #head {
        margin: 10px 10px 0 10px;
        overflow: hidden;
        clear: both;
    }
    #head img {
        width: 100%;
        height: auto;
        display: block;
    }
    
    /* コンテンツ */
    #content_frame {
        width: 95%;
        margin: 0 auto;
        overflow: hidden;
        float: none !important;
    }
        
    /* ビルボード */
    #bb_message {
        font-size: 12px;
        line-height: 1.2em;
        font-weight: bold;
        color: #017f00;
        text-align: center;
        margin: 15px 0;
        letter-spacing: -0.03em;
    }

	
	/* 休業案内 こちらを使用*/
	.holiday_info {
		margin: 0px 0px 30px 0px;
		padding: 20px;
		border: 5px solid #ccc;
		text-align: center;
	}
	
	

    /* リフォームメニュー */    
    .reform_menu {
        margin: 0px;
        padding: 0px;
    }
    .reform_left {
        float: left;
        width: 49%;
        margin-right: 2%;
        box-sizing: border-box;
    }
    .reform_right {
        float: left;
        width: 49%;
        box-sizing: border-box;
    }
    .reform_btn {
        width: 100%;
        text-align: center;
        position: relative;
        z-index: 1;
        overflow: hidden;
        clear: both;
        margin-bottom: 16px;
    }
    .reform_btn img {
        height: 100%;
    }
    .reform_btn_text1 {
        font-size: 16px;
        font-weight: bold;
        color: #000;
        position: absolute;
        z-index: 2;
        top: 0;
        left: 0;
        letter-spacing: -0.05em;
        text-align: left;
        height: 25%;
        margin: 5% 0 0 5%;
    }
    .reform_btn_off {
        position: absolute;
        z-index: 2;
        top: 0;
        right: 0;
        width: 25%;
    }
    .reform_btn_off img {
        width: 100%;
    }
    .text1_sub {
        font-size: 2.5vw;
        font-weight: bold;
        color: #666;
        display: inline-block;
        margin-left: 14px;
    }
    .reform_btn_text2 {
        font-size: 12px;
        color: #333;
        position: absolute;
        z-index: 2;
        top: 90px;
        left: 228px;
        letter-spacing: -0.04em;
    }
    .reform_btn_text3 {
        display: block;
        width: 100%;
        height: 16%;
        font-size: 12px;
        color: #e70202;
        position: absolute;
        z-index: 2;
        top: 0;
        left: 0;
        text-align: center;
        line-height: 120%;
        margin: 62% 0 0 5%;
    }
    .reform_btn_text4 {
        display: inline-block;
        font-size: 8px;
        font-weight: bold;
        /*        position: relative;*/
        z-index: 2;
        top: -130px;
        left: -8px;
        text-align: right;
        float: left;
        margin: 0 2px 0 0;
    }
    .text4_sub {
        font-size: 8px;
        font-weight: bold;
    }
    .reform_btn_text5 {
        display: inline-block;
        font-size: 16px;
        font-weight: bold;
        /*        position: relative;*/
        z-index: 2;
        top: -138px;
        left: -8px;
        text-align: left;
        float: left;
        letter-spacing: -0.07em;
    }
    .reform_btn_text6 {
        display: inline-block;
        font-size: 6px;
        font-weight: bold;
        /*        position: relative;*/
        z-index: 2;
        top: 5%;
        text-align: left;
        float: left;
        margin: 0 0 0 2px;
    }
    .text6_sub {
        font-size: 6px;
        font-weight: normal;
    }
    .text6_sub2 {
        letter-spacing: -0.3em;
    }

    /* お客様・事例系＆スタッフ系コンテンツ */    
    .reform_btn2 {
        width: 100%;
        position: relative;
        z-index: 1;
        overflow: hidden;
        clear: both;
        margin-bottom: 16px;
    }
    .reform_btn2_text1 {
        font-size: 14px;
        font-weight: bold;
        color: #FFF;
        position: absolute;
        z-index: 2;
        top: 0;
        left: 0;
        letter-spacing: -0.03em;
        margin: 1% 0 0 10%;
    }
    .reform_btn2_text2 {
        width: 45%;
        font-size: 10px;
        color: #333;
        position: absolute;
        z-index: 2;
        top: 0;
        left: 0;
        letter-spacing: -0.01em;
        line-height: 1.4em;
        text-align: left;
        margin: 14% 0 0 54%;
    }
    .reform_btn2_text3 {
        font-size: 14px;
        font-weight: bold;
        color: #FFF;
        position: absolute;
        z-index: 2;
        top: 7px;
        left: 200px;
        letter-spacing: -0.03em;
    }
    .btn2_text3_sub2 {
        font-size: 22px;
        color: #FF0;
        display: inline-block;
        position: relative;
        top: 1px;
    }
    .reform_btn3_text2 {
        width: 180px;
        height: 50px;
        font-size: 12px;
        color: #333;
        position: absolute;
        z-index: 2;
        top: 170px;
        left: 10px;
        letter-spacing: -0.01em;
        line-height: 1.4em;
        text-align: left;
    }
    
    /* SPメインコンテンツ */
    .title {
        background: #004358;
        color: #fff;
        padding: 10px 5px;
        text-align: center;
        line-height: 1.4;
        font-size: 115%;
        margin-bottom: 10px;
    }
    .chapter {
        margin: 0 10px 10px 10px;
        clear: both;
        overflow: hidden;
    }
    .step_title {
        background: #fd7400;
        border-radius: 4px;
        text-align: center;
        color: #fff;
        margin-bottom: 10px;
        line-height: 1.6;
    }  
    .customers_title {
        border-radius: 4px;
        background: #fd7400;
        color: #fff;
        padding: 10px;
        font-size: 14px;
        margin-top: 16px;
    }
    .customers_name {
        background: #004358;
        color: #fff;
        padding: 5px;
    }
    .customers_text {
        border: solid 1px #ccc;
        padding: 4px;
        margin-bottom: 10px;
    }
    .btn_area {
        position: relative;
    }
    .btn_erea_name {
        position: absolute;
        top: 5px;
        left: 8px;
        width: auto;
    }
    .green {
        color: #40b11d;
    }
    .free_wrap {
        background: #eee;
        text-align: center;
        padding: 0 10px;
    }
    .free_box {
        background: #fff;
        color: #e60012;
        padding: 10px 0;
        position: relative;
    }
    .free {
        position: relative;
    }
    .tel {
        font-size: 165%;
        position: absolute;
        top: 22%;
        left: 31%;
    }
    .tel a {
        color: #d40000 !important;
        text-decoration: none;
    }
    
    /* フッター */
    .office {
        margin-top: 10px;
        border-top: solid 1px #ccc;
        padding-top: 10px;
    }
    .office dt {
        font-weight: bold;
    }
    #foot {
        padding: 10px 0 0 0;
        background: #eee;
    }
    #foot nav ul {
        margin: 0 0 10px 0;
        text-align: center;
        font-size: 72%;
    }
    #foot nav ul li {
        display: inline;
        margin: 0 10px 0 0;
    }
    #foot section {
        font-size: 55%;
        padding: 5px;
        background: #22ac38;
        color: #fff;
    }
    #foot section p {
        text-align: center;
    }
}
    
 /*==================================================================
PC用CSS
==================================================================*/   

@media screen and (min-width: 641px) {
    .pc_none {
        display: none !important;
    }
    #content_frame {
        width: 755px;
    }
    #bb_message {
        font-size: 14px;
        line-height: 1.5em;
        font-weight: bold;
        color: #017f00;
        text-align: center;
        margin: 15px 0;
        letter-spacing: -0.03em;
    }
	/* 休業案内 こちらを使用*/
	.holiday_info {
		margin: 0px 0px 30px 0px;
		padding: 20px;
		border: 5px solid #ccc;
		text-align: center;
	}
	
    .reform_menu {
        margin: 0px;
        padding: 0px;
    }
    .reform_left {
        float: left;
        width: 371px;
        margin-right: 13px;
    }
    .reform_right {
        float: left;
        width: 371px;
    }
    .reform_btn {
        width: 371px;
        height: 279px;
        text-align: center;
        position: relative;
        z-index: 1;
        overflow: hidden;
        clear: both;
        margin-bottom: 24px;
    }
    .reform_btn_text1 {
        font-size: 28px;
        font-weight: bold;
        color: #000;
        position: absolute;
        z-index: 2;
        top: 25px;
        left: 12px;
        letter-spacing: -0.05em;
        text-align: left;
        line-height: 1.0em;
    }
    .reform_btn_off {
        position: absolute;
        z-index: 2;
        top: 0;
        right: 0;
    }
    .text1_sub {
        font-size: 18px;
        font-weight: bold;
        color: #666;
        display: inline-block;
        margin-left: 15px;
    }
    .reform_btn_text2 {
        font-size: 12px;
        color: #333;
        position: absolute;
        z-index: 2;
        top: 90px;
        left: 228px;
        letter-spacing: -0.04em;
    }
    .reform_btn_text3 {
        display: block;
        width: 288px;
        height: 58px;
        font-size: 12px;
        color: #e70202;
        position: absolute;
        z-index: 2;
        top: 240px;
        left: 10px;
        text-align: center;
    }
    .reform_btn_text4 {
        display: inline-block;
        font-size: 16px;
        font-weight: bold;
        position: relative;
        z-index: 2;
        top: -8px;
        left: 3px;
        text-align: right;
        float: left;
        margin: 0 2px 0 0;
        line-height: 1.0em;
    }
    .text4_sub {
        font-size: 12px;
        font-weight: bold;
    }
    .reform_btn_text5 {
        display: inline-block;
        font-size: 40px;
        font-weight: bold;
        position: relative;
        z-index: 2;
        top: -20px;
        left: 3px;
        text-align: left;
        float: left;
        letter-spacing: -0.07em;
    }
    .reform_btn_text6 {
        display: inline-block;
        font-size: 18px;
        font-weight: bold;
        position: relative;
        z-index: 2;
        top: 2px;
        left: 3px;
        text-align: left;
        float: left;
        margin: 0 0 0 2px;
    }
    .text6_sub {
        font-size: 12px;
        font-weight: normal;
    }
    .text6_sub2 {
        letter-spacing: -0.3em;
    }
    .reform_btn2 {
        width: 371px;
        height: 227px;
        text-align: center;
        position: relative;
        z-index: 1;
        overflow: hidden;
        clear: both;
        margin-bottom: 24px;
    }
    .reform_btn2_text1 {
        font-size: 22px;
        font-weight: bold;
        color: #FFF;
        position: absolute;
        z-index: 2;
        top: 7px;
        left: 40px;
        letter-spacing: -0.03em;
    }
    .reform_btn2_text2 {
        width: 162px;
        height: 131px;
        font-size: 13px;
        color: #333;
        position: absolute;
        z-index: 2;
        top: 50px;
        left: 200px;
        letter-spacing: -0.01em;
        line-height: 1.4em;
        text-align: left;
    }
    .reform_btn2_text3 {
        font-size: 14px;
        font-weight: bold;
        color: #FFF;
        position: absolute;
        z-index: 2;
        top: 7px;
        left: 200px;
        letter-spacing: -0.03em;
    }
    .btn2_text3_sub2 {
        font-size: 22px;
        color: #FF0;
        display: inline-block;
        position: relative;
        top: 1px;
    }
    .reform_btn3_text2 {
        width: 180px;
        height: 50px;
        font-size: 12px;
        color: #333;
        position: absolute;
        z-index: 2;
        top: 170px;
        left: 10px;
        letter-spacing: -0.01em;
        line-height: 1.4em;
        text-align: left;
    }
    #reform_2ban {
        width: 755px;
        height: 136px;
        background-image: url(/img/reform_bg_2ban.gif);
        position: relative;
        z-index: 1;
        overflow: hidden;
        clear: both;
    }
    #ban_staff {
        width: 358px;
        height: 100px;
        position: absolute;
        z-index: 2;
        top: 17px;
        left: 15px;
    }
    #ban_area {
        width: 358px;
        height: 100px;
        position: absolute;
        z-index: 2;
        top: 17px;
        left: 382px;
    }
    .ban_staff_text {
        font-size: 18px;
        font-weight: bold;
        color: #FF0;
        position: absolute;
        z-index: 3;
        top: 34px;
        left: 15px;
        text-shadow: 0em 0em 3px #000000;
    }
    .ban_area_text {
        font-size: 11px;
        color: #FFF;
        position: absolute;
        z-index: 3;
        top: 54px;
        left: 18px;
        line-height: 1.4em;
        letter-spacing: 0.05em;
    }

    #g1_contents {
        width: 755px;
        height: 283px;
        position: relative;
        z-index: 1;
        overflow: hidden;
    }
    .g1_text1 {
        font-size: 18px;
        font-weight: bold;
        color: #333;
        position: absolute;
        z-index: 2;
        top: 6px;
        left: 65px;
        letter-spacing: -0.03em;
    }
    .g1_text2 {
        font-size: 18px;
        font-weight: bold;
        color: #333;
        position: absolute;
        z-index: 2;
        top: 6px;
        left: 246px;
        letter-spacing: -0.03em;
    }
    .g1_text3 {
        font-size: 18px;
        font-weight: bold;
        color: #333;
        position: absolute;
        z-index: 2;
        top: 6px;
        left: 442px;
        letter-spacing: -0.03em;
    }
    .g1_text4 {
        font-size: 18px;
        font-weight: bold;
        color: #333;
        position: absolute;
        z-index: 2;
        top: 6px;
        left: 601px;
        letter-spacing: -0.03em;
    }
    .g1_text5 {
        width: 160px;
        font-size: 12px;
        color: #333;
        position: absolute;
        z-index: 2;
        top: 125px;
        left: 26px;
        letter-spacing: -0.03em;
        line-height: 1.5em;
    }
    .g1_text6 {
        width: 160px;
        font-size: 12px;
        color: #333;
        position: absolute;
        z-index: 2;
        top: 125px;
        left: 209px;
        letter-spacing: -0.03em;
        line-height: 1.5em;
    }
    .g1_text7 {
        width: 160px;
        font-size: 12px;
        color: #333;
        position: absolute;
        z-index: 2;
        top: 125px;
        left: 389px;
        letter-spacing: -0.03em;
        line-height: 1.5em;
    }
    .g1_text8 {
        width: 160px;
        font-size: 12px;
        color: #333;
        position: absolute;
        z-index: 2;
        top: 125px;
        left: 571px;
        letter-spacing: -0.03em;
        line-height: 1.5em;
    }
    .g1_text9 {
        font-size: 12px;
        color: #333;
        position: absolute;
        z-index: 2;
        top: 239px;
        left: 27px;
        letter-spacing: -0.03em;
        line-height: 1.3em;
    }
    #g2_contents {
        width: 755px;
        text-align: center;
        position: relative;
        z-index: 1;
        overflow: hidden;
    }
    #g3_contents {
        width: 755px;
        text-align: center;
        position: relative;
        z-index: 1;
        overflow: hidden;
    }
    .g3_text1 {
        font-size: 12px;
        color: #333;
        position: absolute;
        z-index: 2;
        top: 265px;
        left: 570px;
        letter-spacing: -0.03em;
        line-height: 1.5em;
        text-align: right;
    }
    #g4_contents {
        width: 755px;
        text-align: center;
        position: relative;
        z-index: 1;
        overflow: hidden;
    }
    #g5_contents {
        width: 755px;
        text-align: center;
        position: relative;
        z-index: 1;
        overflow: hidden;
    }
    .g5_left {
        float: left;
        width: 371px;
        margin-right: 13px;
        text-align: center;
    }
    .g5_right {
        float: left;
        width: 371px;
        text-align: center;
    }
    .g5_text {
        width: 350px;
        font-size: 12px;
        color: #333;
        letter-spacing: -0.02em;
        line-height: 1.5em;
        margin: 15px 0 10px 10px;
        text-align: left;
    }
    #g6_contents {
        width: 755px;
        text-align: center;
        position: relative;
        z-index: 1;
        overflow: hidden;
    }
    #g7_contents {
        width: 755px;
        text-align: center;
        position: relative;
        z-index: 1;
        overflow: hidden;
    }
    .g_contents_text0 {
        font-size: 16px;
        color: #333;
        font-weight: bold;
        letter-spacing: -0.03em;
        line-height: 1.5em;
        margin: 0 0 15px 0;
        display: block;
    }
    .g_contents_text1 {
        width: 755px;
        font-size: 14px;
        color: #333;
        letter-spacing: -0.02em;
        line-height: 1.5em;
        margin: 0;
        text-align: left;
        display: inline-block;
    }
    #g7_ban {
        width: 398px;
        height: 72px;
        position: relative;
        z-index: 1;
        left: 178px;
    }
    .g7_text1 {
        font-size: 16px;
        font-weight: bold;
        color: #FF0;
        position: absolute;
        z-index: 2;
        top: 12px;
        left: 15px;
        text-shadow: 0em 0em 3px #000000;
    }
    #b3_contents {
        width: 755px;
        text-align: center;
        position: relative;
        z-index: 1;
        overflow: hidden;
    }
    .banner_s {
        margin-bottom: 20px;
    }
    .banner_r {
        position: relative;
    }
    .kensu_text {
        position: absolute;
        top: 2px;
        left: 500px;
        color: #ffffff;
        font-weight: bold;
    }
    .kensu_count {
        font-size: 28px;
    }
	
	/* 工事エリア追加 20160719 */
.const_area_box {
	margin-bottom: 15px;
	border-left:solid 1px #999;
	border-right:solid 1px #999;
	border-bottom:solid 1px #999;
	width:753px;
	text-align:center;
	padding-top:9px;
	padding-bottom:8px;
	background-color:#fcf4f1;
}


.satisfaction {
display: flex;
justify-content: space-between;
}



}