@charset "UTF-8";

/* ---------------------------------------------------
 TOP
--------------------------------------------------- */

/* ----------------------------------------
 base / module
---------------------------------------- */
#tel + p,
p#notice{
margin-top:0.35em;
}
#tel + p i,
p#notice i{
margin-right:0.35em;
}
#contents {
	font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO", 'メイリオ',Meiryo, 'ＭＳ Ｐゴシック','MS PGothic', sans-serif;
	padding-top: 110px; /* header height */
}
#header .logo {
    margin-right: 16px;
}
#contents .layoutInner {
	width: 780px;
	margin: 0 auto;
}
p.title {
	position:relative;
}
#return_top {
    border-radius: 50%;
    bottom: 10px;
    color: #fff;
    height: 50px;
    line-height: 50px;
    outline: 0;
    position: fixed;
    right: 10px;
    width: 50px;
}
#return_top {
    font-size: 14px;
    text-align: center;
}
#return_top {
    background-color: #6262d6;
}
html *{
	max-width:100%;
}
html #faq {
    width: 90%;
    margin: 0 auto;
}
.info {
	    margin-bottom: 120px;
    margin:auto;
    padding: 1.15em 1.5em 0 1.5em;
    border: 1px solid #ccc;
    text-align: left;
    font-size: 2em;
    border-radius: 5px;

    line-height: 1.3;
    color: #444;
    overflow: hidden;;
    width: 90%;

        box-sizing: border-box;
}
#price_list{
	margin-top:-2em;
	margin-bottom:3em;
}
.info dl {padding: 0.5em 0;border-bottom: 1px dashed #ccc;overflow: hidden;}
.info dt {padding-bottom: 0;width: 12em;display: list-item;}
.info dt.center,#option .center{display:inline-block;text-align:center;}
.info dd {text-align:right;;}
.info dl:last-child {
    margin-bottom: 2em;

}
#option .center{display:block;padding: 20px 0;}
#mainvisual{
	position:relative;
}
.commenter #tel,
#mainvisual #tel{
	position: absolute;
    top: 36%;
    right: 8%;
    font-size: 3vw;
    background-color: #36b37d;
    padding: 1.25% 3.75% 1.25% 7.5%;
    border-radius: 40px;
    background: url(../../images/hokan_b/gadget5.png) #36b37d;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
}
html .commenter #tel{
	position:static;
	top:auto;
	right:auto;
	background:none;
	background-color:#36b37d;
	display:inline-block;
	padding:10px;
	line-height:1;
}
p.right {
    text-align: right;
    line-height: 1.3em;
    margin: 0.5em 0;
    font-size: 21px;
}
html .commenter #tel a{
	padding:10px;
	line-height:1;
}
#mainvisual #tel a{
	color: white;
}
@media screen and (max-width: 374px) {
	html body .wrapper > div .title img{
		visibility:hidden;;
	}
}
@media screen and (min-width: 480px) {
.info dt {clear: left;float: left;}
.info dd {
    margin: 0 0 0 1.5em;
    list-style: none;
    list-style-type: none;
    display: inline-block;
    text-align: right;
    float: right;
}

}
@media screen and (min-width: 700px) and (max-width: 980px) {
	html .title img+span {
    top: 7vw;
    top: 34%;
	}
	html #header .header_message {
    font-size: 1.65vw;
    padding-top: 2vw;
    padding-right: 10px;
    box-sizing: border-box;
	}

}
@media screen and (min-width: 420px) and (max-width: 980px) {
	.info {
	    font-size: 4vw;
	}
	#step img {
	    max-width: 100%;
	    margin-left: 0%;
	    margin-right: 0%;
	}
	html body{
		min-width:410px;
	}
	#header .layoutInner,
	html body div#contents{
    min-width: 312px;
    width:100%;
    max-width:100%;
    margin:auto;
	}
	#price_list{
	margin-top:0;
	}
	html #step img {
    max-width: 100%;
    margin-left: 0%;
    margin-right: 0%;
	}
}
@media screen and (max-width: 980px) {

	html #step img {
    max-width: 100%;
    margin-left: 0%;
    margin-right: 0%;
	}
	.info{
	border:none;}
	html #step .title img+span {
    top: 20vw;
	}
	html .title img+span {
    top: 30%;
    font-size: 2.0em;
}
html #price .title img+span {
    top: 10vw;
}
}
#director_okada{
	margin-top:-2em;
	text-align:center;
}
#director_okada .name{
	font-size:1.85em;
	margin-bottom:35px;
}
.green{
	color:green;
}

html .pcOnly .title img+span {
    top: 46%;
    /*font-size:5vw;*/
}
#header .layoutInner,
html body #contents{
    min-width: 312px;

    max-width:100%;
    margin:auto;
}
html body  #contents section.wrapper > div{
	width:980px;
}
html .wrapper > div img,
html .wrapper > div {
    width: 100%;
    max-width: 100%;
}
html #faq {
    max-width: 100%;
}

.page_top i{
	color:white;
}
.page_top {
    position: fixed;
    bottom: 10px;
    right: 10px;
    /* padding: 5px 15px; */
    color: #fff;
    font-size: 20px;
    text-decoration: none;
    background: #122A88;
    border-radius: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    z-index: 100;
    width: 30px;
    height: 30px;
    display: block;
    /* box-sizing: border-box; */
    padding: 10px;
    text-align: center;
}
.page_top:hover {
    background:#2626D6;
    opacity: 0.7;
}
.title img+span{
    font-size: 3em;
    font-weight: bold;
    text-align: center;
    width: 100%;
    position: absolute;
    color: #2288e0;
    left: 0;
    top:15vw;
}

.pcOnly .title img+span{
    top: 133px;
}
.tac .courseLinkPC span{
	font-size: 1.8em;
    display: inline-block;
    padding: 10px 30px;
    border: solid 1px #2288e0;
    border-radius: 10px;
    background: #2288e0;
    color: white;
    cursor:pointer;
}
.tac .courseLinkPC span:hover{
	opacity:0.85;
}

/* --- media 700px以下 --- */
@media (max-width: 700px) {
	#contents {
		padding-top: 70px;
	}

	#contents .layoutInner {
		width: auto;
		margin: 0;
		padding: 0 10px;
	}
}/* --- media 700px以下 --- */
#header .header_message{
	color:black;
	padding:36px 0 0 20px;
	margin-left:20px;
	font-size: 1.15em;
}

/* button */
.centerBtn {
	text-align: center;
	margin-top: 60px;
}

.centerBtn a {
	display: inline-block;
	font-size: 30px;
	text-decoration: none;
	background: #fff100;
	border-radius: 10px;
	padding: 13px 40px;
}

.centerBtn a:hover {
	background: #fff776;
	color: #0074be;
}

.centerBtn.gray {
	margin-top: 30px;
}

.centerBtn.gray a {
	font-size: 24px;
	background: #ccc;
}

.centerBtn.gray a:hover {
	background: #ddd;
	color: #999;
}

/* --- media 700px以下 --- */
@media (max-width: 700px) {
	.centerBtn {
		margin-top: 25px;
		padding: 0 10px;
	}

	.centerBtn a {
		display: block;
		font-size: 18px;
		border-radius: 5px;
		padding: 11px 5px;
	}

	.centerBtn.gray {
		margin-top: 15px;
	}

	.centerBtn.gray a {
		font-size: 17px;
	}
}/* --- media 700px以下 --- */


/* title pony image */
.titlePony {
	text-align: center;
	padding: 0 10px;
}


/* ----------------------------------------
 mainvisual
---------------------------------------- */
#mainvisual {
	text-align: center;
	background: url("../../images/hokan_b/index_mainvisual_bg.jpg") center 0 no-repeat;
}

/* ----------------------------------------
 Contents
---------------------------------------- */
.wrapper > div {
	width: 980px;
	margin: 0 auto;
}
@media (max-width: 700px) {
	.wrapper > div {
		width: auto;
		margin: 0;
	}
}

.m0a {
	margin: 0 auto;
}

.blue {
	background: #0074be;
}

.grey {
	background: #efefef;
}

.orangeBg {
	background: url("../../images/hokan/img25.jpg") repeat-y;
}

.blueBg {
	background: url("../../images/hokan/img35.jpg") repeat-y;
}

#faq {
	width: 858px;
	margin: 0 auto;
}
@media (max-width: 700px) {
	#faq {
		width: auto;
		margin: 0;
	}
}


/* ----------------------------------------
 introduce
---------------------------------------- */

.dayArea {
	margin-top: 10px;
}

#introduce .visual {
	margin-top: 20px;
}

#introduce .balloon02 {
	position: relative;
	height: 610px;
}



/* ----------------------------------------
 quality
---------------------------------------- */


/* ----------------------------------------
 step
---------------------------------------- */
#step {
}

#step .stepFlow {
	background: url("https://hokan.pony-cl.co.jp/css/images/index_step_arrow01.png") center top no-repeat;
	-webkit-background-size: 50px auto;
	background-size: 50px auto;
	margin-top: 20px;
	padding-top: 88px;
}

#step .stepFlow:first-child {
	background: none;
	margin-top: 40px;
	padding-top: 0;
}

#step .stepFlow .box {
	text-align: center;
	border: 5px solid #9fbee4;
	border-radius: 20px;
	margin-top: 20px;
	padding-bottom: 30px;
}

#step .stepFlow .box .num {
	margin-top: -44px;
	margin-bottom: 15px;
}

#step .stepFlow .box .title {
	font-size: 34px;
	color: #0074be;
	margin-bottom: 20px;
}

#step .stepFlow .box .text {
	font-size: 18px;
	margin-top: 15px;
}

/* --- media 700px以下 --- */
@media (max-width: 700px) {
	#step {
	}

	#step .stepFlow {
		-webkit-background-size: 40px auto;
		background-size: 40px auto;
		margin-top: 10px;
		padding: 60px 10px 0;
	}

	#step .stepFlow:first-child {
		background: none;
		margin-top: 40px;
		padding-top: 0;
	}

	#step .stepFlow .box {
		border-width: 3px;
		border-radius: 10px;
		margin-top: 20px;
		padding: 0 17px 20px;
	}

	#step .stepFlow .box .num {
		margin-top: -32px;
		margin-bottom: 15px;
	}

	#step .stepFlow .box .num img {
		width: 65px;
	}

	#step .stepFlow .box .title {
		font-size: 26px;
		margin-bottom: 15px;
	}

	#step .stepFlow .box .text {
		font-size: 14px;
		margin-top: 15px;
		text-align: left;
	}

	#step .stepFlow .box .text br {
		display: none;
	}
}/* --- media 700px以下 --- */


/* ----------------------------------------
 attention
---------------------------------------- */


#attention .section > .title {
	font-size: 34px;
	color: #0074be;
	text-align: center;
	margin-bottom: 25px;
}

/* --- media 700px以下 --- */
@media (max-width: 700px) {

	#attention .section > .title {
		font-size: 26px;
		margin-bottom: 15px;
	}
}/* --- media 700px以下 --- */


/* ----------------------------------------
 attention > excluded item
---------------------------------------- */
#excluded .itemList {
	overflow: hidden;
	margin-left: -5px;
}

#excluded .itemList li {
	float: left;
	width: calc((100% - 20px) / 4);
	background: #eee;
	font-size: 24px;
	text-align: center;
	padding: 16px;
	margin-left: 5px;
	margin-bottom: 5px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

#excluded .other {
	background: #eee;
	padding: 25px;
	font-size: 14px;
	line-height: 2.0;
}

/* --- media 700px以下 --- */
@media (max-width: 700px) {
	#excluded .itemList {
		margin-left: 0;
	}

	#excluded .itemList li {
		float: none;
		width: auto;
		font-size: 18px;
		padding: 12px;
		margin-left: 0;
		margin-bottom: 3px;
	}

	#excluded .other {
		padding: 15px;
		line-height: 1.6;
	}
}/* --- media 700px以下 --- */



/* ----------------------------------------
 other notes
---------------------------------------- */
#notes .otherNotes {
	background: #eee;
	padding: 30px;
}

#notes .otherNotes li {
	position: relative;
	padding-left: 1.2em;
	font-size: 14px;
	line-height: 1.6;
}

#notes .otherNotes li:not(:first-child) {
	margin-top: 1em;
}

#notes .otherNotes li span:first-child {
	position: absolute;
	top: 0;
	left: 0;
}

/* --- media 700px以下 --- */
@media (max-width: 700px) {
	#faqttl{
		overflow:hidden;
	}
	#faqttl img{
		display:block;
		width:150%;
		margin-right:-25%;
		margin-left:-25%;
		max-width: 150%;
	}
	#quality img{
		width:100%!important;
	}
	html #director .title img+span{
		top: 5vw;
	}
	#notes .otherNotes {
		padding: 15px;
	}

	#notes .otherNotes li {
		font-size: 13px;
		line-height: 1.6;
	}

	#notes .otherNotes li:not(:first-child) {
		margin-top: 10px;
	}
}/* --- media 700px以下 --- */


/* ----------------------------------------
 footer
---------------------------------------- */
#contents > .footer {
	width: 980px;
	margin: 60px auto 0;
	padding-bottom: 40px;
}

#contents > .footer .image {
	text-align: right;
	padding-left: 10px;
}

/* --- media 700px以下 --- */
@media (max-width: 700px) {
	#price_list{
		margin-left:0%;
		margin-right:0%;
		width:100%;
		margin-bottom:0;
	}
	html #price .title img+span {
	    	top: 4vw;
	}
	html body #mouten .title span {
    	top: 6vw;
	}
	#contents > .footer {
		width: auto;
		margin: 30px 0 0;
		padding-bottom: 10px;
	}
	html body #step .title img+span {
    	top: 28vw;
	}
}/* --- media 700px以下 --- */

.greyBox {
	background: #f4f4f4;
}

.bgPrice {
	background: url("../../images/hokan_b/pricearea_bg.jpg") center 0 repeat-y;
}

.bgPrice ul {float: left; padding-left: 34px;}
.bgPrice ul:last-child {padding-left: 67px;}

.bgPrice ul li {margin-bottom: 10px}

.label {margin-left: -11px;}

.blueBox {background: #d7effd;}

.commenter {
    overflow: hidden;
    padding: 6px;
    margin-bottom: -7px;
}
.commenter .avater {
    float: left;
    max-width: 120px;
    max-height: 120px;
    border-radius: 120px;
    width:30%;
    height:30%;
    display: block;
    border: solid 3px #fff;
    overflow: hidden;
    box-shadow: 0px 0px 5px #999;
    margin-right: 40px;
        margin-right: 6%;
}
.commenter .author {
    font-size: 40px;
    font-size:3vw;
    font-size: 300%;
}
.commenter .shop {
    font-size: 40px;
    font-size:3vw;
    font-size: 300%;
    font-weight: bold;
}
.commenter span {
    font-size: 14px;
    font-size:2.0vw;
    font-size: 70%;
    font-weight: 300;
}
.balloon1-top {
    position: relative;
    display: block;
    margin: 1.5em 0;
    padding: 12px;
    min-width: 120px;
    /*max-width: 100%;*/
    color: #555;
    font-size: 16px;
    background: #fff;
    box-shadow: 0 0 6px rgba(0,0,0,0.35);
    background-color: white;

}
.balloon1-top:before {
    content: "";
    position: absolute;
    top: -28px;
    left: 13%;
    margin-left: -14px;
    border: 9px solid transparent;
    border-bottom: 23px solid #fff;
}
.rate_comment_wrapper {
    float: left;
    margin-left: 20px;
    height: 36px;
    padding-top: 7px;
}
.rate_before {
    float: left;
    border-right: 10px solid #ddd;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    margin-right: -1px;
}
.rate_comment {
    float: left;
    background-color: #ddd;
    color: #fff;
    height: 20px;
    width: 42px;
    padding: 3px 3px 3px 8px;
    line-height: 11px;
    border-radius: 3px;
}
.rate_comment span {
    font-size: 11px;
    color: #888;
    font-weight: bold;
}
.balloon .comment {
    clear: both;
    text-align: left;
    font-size: 14px;
    color: black;
    /*display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 10;
    overflow: hidden;*/
    padding: 10px;
}
.balloon .comment li{
	font-size:20px;
}
.balloon1-top p {
    margin: 0;
    padding: 0;
}
.clearfix:before, .clearfix:after, .cf:before, .comment-respond:before, .cf:after, .comment-respond:after, .widget ul li:before, .widget ul li:after {
    content: "";
    display: table;
}
.clearfix:after, .cf:after, .comment-respond:after, .widget ul li:after {
    clear: both;
}
.commenter {
	position:relative;
}
.commenter #tel{
    padding: 0.125% 1.875% 0.625% 4.875%;
    min-width: 12em;
    min-width:19%;
    min-width:18vw;
    background-size: 2em;
}
.commenter #tel a{
	padding-left:10%;
	color:white;
	/*font-size:60%;*/
}
html #footer {
    margin-top: 0px;
}
.author_wrapper{
	overflow:hidden;
	float:left;
	width: 69%;
}
.comment ul{
	    list-style: disc;
    list-style-position: outside;
    margin-left: 20px;
}
.comment ul li{
	margin-bottom:0.5em;
}
.info dl {
    font-size: 0.75em;
    list-style: disc;
    display: list-item;
    list-style-type: disc;
    list-style-position: inherit;
    padding-left: 30px;
}
.info dt.orange{
	width:99%;
}
.info dt.orange + dd{
	width:1%;
	visibility:hidden;
}
.info dt.orange strong,#option .orange strong{
	font-weight:900;
	color:orange;
	font-size:1.4em;
}
.greyBox {
    background: #f4f4f4;
    overflow: hidden;
    display: block;
}
#price .title img+span{
	top:8vw;
}
#director .title img+span{
	top:8vw;
}
html #mouten .title span{
	    top: 11vw;
}
html #mouten.wrapper.greyBox > div {
    margin: 0;
    padding: 0;
    border: none;
    display: block;

}
html #mouten.wrapper.greyBox .mainmessage {
		margin:auto;
	margin-bottom:50px;
	max-width:750px;
	display:block;

}
@media screen and (min-width: 560px) and (max-width: 948px) {
		html .commenter {
		    margin-top: 0%;
		}
html body .commenter #tel {
    /*font-size: 119%;*/
    top: 10%;
    bottom: auto;
    display: inline-block;
    z-index: 6;
    right: 0;
    padding-right: 30px;
}
		html body .commenter #tel a{
			/*font-size:200%;*/
			    /*font-size: 88%;*/
    		padding: 3%;
    		margin:2%;
    		text-align: center;
    		display: block;
    		min-width: 100%;
    		font-size: 4vw;
		}
	}
@media (max-width: 560px) {
	html .commenter {
    margin-top: 5%;
	}
	.genre{
		display:block;
	}
	html .commenter{
	margin-right:-30%;
	}
		html .commenter #tel{
			top:3%;
			min-width: 12em;
		}
	html .commenter #tel a {
	    font-size: 46%;
	    text-align: center;
	    /*padding-left: 19%;*/
	    font-size: 1.5em;
	        font-size: 4vw;
	    display: inline-block;
	        display: block;

	}
		.commenter .avater{
			margin-right:7%;
		}
		.author_wrapper {
    		width:59%;
    		    display: block;
    		padding-bottom: 12px;
		}
		.commenter{
		margin-top:10%;
		}
		.commenter .author {
		    display:none;
		}
		.commenter .shop {
		    font-size: 200%;
		}
	html .commenter #tel {
	    top: auto;
	    min-width: 12em;
	    right: 8%;
	    bottom: 4%;
	    font-size: 1em;
	    padding: 1%;
	    margin-top: 2%;
	}
}
@media screen and (min-width: 980px) {

	#price .title img+span,
	.title img+span {
    	top: 88px;
	}
	#step .title img+span{
	top: 190px;
	}
	#director .title img+span {
	    top: 87px;
	}
}
@media screen and (min-width: 1261px) {

.commenter #tel {
    top: 0;
    font-size: 39px;
    min-width: 6em;
    padding: 10px;
    display: block;
    background-size: auto;
    clear: both;
    max-width: auto;
    width: auto;
    height: auto;
    min-width: 3em;
    position: static;
    line-height: 1;
    margin-top: 20px;
    width: auto;
    display: inline-block;
}
.commenter #tel a {
    /* padding-left: 10%; */
    color: white;
    font-size: 60%;
    padding: 10px;
    line-height: 1;
    font-size: 25px;
        display: block;
}
}

/* リフォーム実績 */
.page .f-box,.b-a-section .f-box{
	overflow:hidden;
}
.page .f-div,.b-a-section .f-div{
	float:left;
	width:50%;
	box-sizing:border-box;
	padding:10px;
}
.page .f-div>img{
	width:100%;
	height:auto;
}
.page #contents {
    font-family: "ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO", 'メイリオ',Meiryo, 'ＭＳ Ｐゴシック','MS PGothic', sans-serif;
    padding-top: 104px;
}
.buttom-white{
	padding-top: 5em;
}
.page #contents h2{
	font-size:2em;
	color: orange;
	margin-bottom: 2em;
	line-height: 1.6em;
}
.page #contents p{
	font-size:1.15em;
	line-height:2em;
}
#jisseki{
	padding-bottom:5em;
}
/* ハウスクリーニング */
#page-c #contents .img-left .f-box>.f-div:first-child,#page-c #contents .img-right .f-box>.f-div:last-child{
	width:30%;
}
#page-c #contents .img-left .f-box>.f-div:last-child,#page-c #contents .img-right .f-box>.f-div:first-child{
	width:70%;
}
#page-c #contents .last-section,#page-w #contents .last-section{
	padding-bottom:5em;
}
/* 塗装 */
#page-p .info dt,#page-w .info dt {
    width: 100%;
}
.orange{
	color: orange;
}
.t-blue{
	color:#2288e0;
}
.page .center{
	text-align:center;
}
#page-p #price_list,#page-w #price_list{
	background:#fff;
	margin-top:2em;
}
#page-p .last-section{
	padding:4em 0;
}
.author_wrapper p.t-blue {
	font-size:1.5em;
}
.b-a-section .center{
	text-align: center;
	font-size: 2em;
	margin-bottom: 2em;
	background: #ffed00;
	padding: 0.5em;
}
html .wrapper >div.b-a-section{
	margin-bottom:5em;
}
#page-w .img-c{
	width:70%;
	margin:0 auto;
	display:block;
}
@media (max-width: 560px) {
	.page #contents{
		padding-top:6em;
	}
	.page{
		background:#f4f4f4;
	}
	.page .f-div{
		width:100%;
	}
	.page .non-arrow span{
		top:4vw;
	}
	#page-c .buttom-white {
    	padding: 2em 0;
	}
	.sp-img{
		display:none;
	}
	#page-c #contents .img-left .f-box>.f-div:first-child,#page-c #contents .img-right .f-box>.f-div:last-child,#page-c #contents .img-left .f-box>.f-div:last-child,#page-c #contents .img-right .f-box>.f-div:first-child{
		width:100%;
	}
	#page-c .img-left,#page-c .img-right{
		background:#fff;
	}
	#page-c .img-left .f-div img,#page-c .img-right .f-div img{
		width:60%;
		margin:0 auto;
		display: block;
	}
	#page-p .right.orange{
		text-align:center;
	}

}