@charset "UTF-8";


.outline{
margin:1em;
padding:1em;
text-align:left;
font-size:14px;
border:#CCC solid 5px;
background-color:#F5F3F2;
}



#housingcompany-selection-support #content-main .icon-col{
margin:0 auto 1em; 
padding:0.5em;
background-color:#FFF;
border:#DCB967 solid 1px;
text-align:center;
}

#housingcompany-selection-support #content-main .icon-col i{
display:block;
font-size:1000%;
color:#DCB967;
}


#housingcompany-selection-support #content-main div.cost{
margin:0 auto;
font-size:160%;
padding:0.2em;
background-color:#FFF;
}




#housingcompany-selection-support #content-main p{
font-size:120%;
}

#housingcompany-selection-support #content-main p.catch{
position:relative;
color:#FFF;
background-color:#DCB967;
padding:0.5em;
margin:2em 0 1em;
}

#housingcompany-selection-support #content-main p.catch span{
display:block;
padding:0.5em 1em;
border:2px dashed #FFF;
}




#housingcompany-selection-support #content-main h2{
clear:left;
position:relative;
margin:2em 0 1em;
padding:20px 10px;
border:5px solid #DCB967;
background:none;
color:#333;
text-align:left;
font-size:180%;
}

#housingcompany-selection-support #content-main h2:after{
content:"★ Point ★";
position:absolute;
top:-18px;
left:16px;
padding:4px;
background:#FFF;
font-size:18px;
font-weight:bold;
color:#DCB967;
}


#housingcompany-selection-support #content-main h3{
clear:left;
position:relative;
margin:2em 0 0.5em;
padding:10px 20px;
border:none;
background-color:#DCB967;
color:#FFF;
text-align:center;
font-size:140%;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
}


/*　------------　「ハウス仲人」５つの安心　------------　*/


#t01 h3.p01{
background-color:#8FB27A !important;	
}

#t01 h3.p02{
background-color:#7AB2A5 !important;	
}

#t01 h3.p03{
background-color:#A1B27B !important;	
}

#t01 h3.p04{
background-color:#B2A57B !important;	
}

#t01 h3.p05{
background-color:#BE9FAF !important;	
}


#housingcompany-selection-support #content-main h3 span{
color:#FF0;
font-size:120%;
}



table.type{
width:96%;
margin:5px auto 30px;
border-collapse:collapse;
border:#8FB27A solid 2px;
border-spacing:0;
text-align:left;
font-size:120%;
}

table.type th{
padding:5px;
border:#FFF solid 1px;
background:#8FB27A;
color:#FFF;
white-space:nowrap;
text-align:center;
line-height:1.5;
}

table.type td{
padding:5px;
border:#8FB27A solid 1px;
background-color:#FFFFFF;
line-height:1.5;
}



table.type th:nth-child(1){
width:20%;
}

table.type th:nth-child(2){
width:80%;
}

table.type td:nth-child(1){
background-color:#F2F7EC;
}


/*　------------　「ハウス仲人」ご利用の流れ　------------　*/



/* .flow-step-col
------------------------------------- */
.flow-step-col{
margin:1em auto 0;
padding:0.5em;
text-align:center;
font-size:120%;
}

.flow-step-col li{
position:relative;
width:96%;
margin:0 auto;
margin-bottom:2em;
border:#DCB967 solid 1px;
-webkit-border-radius:4px;
-moz-border-radius:4px; 
border-radius:4px;
background-color:#FEFFE6;
list-style-type:none;
}

.flow-step-col li:last-child{
margin-bottom:0;
}

.flow-step-col li span{
display:block;
margin-bottom:0.5em;
font-size:120%;
font-weight:700;
padding:5px 10px;
-webkit-border-radius:4px 4px 0 0 / 4px 4px 0 0;
-moz-border-radius:4px 4px 0 0 / 4px 4px 0 0; 
border-radius:4px 4px 0 0 / 4px 4px 0 0;
background-color:#DCB967;
color:#FFF;
}


.flow-step-col div.step{
margin:0.5em auto 0;
max-width:260px;
font-size:100%;
font-weight:700;
padding:5px 10px;
border:#DCB967 solid 4px;
-webkit-border-radius:50px;
-moz-border-radius:50px; 
border-radius:50px;
background-color:#FFF;
color:#333;
}

.flow-step-col li p{
font-size:100% !important;
text-align:left;
}



div.triangle{
margin:0 auto;
}

div.triangle{
position:absolute;
left:46%;
bottom:-15px;
width:0;
height:0;
margin:0 auto -25px;
background:transparent;
border-top:15px solid #CC0000;
border-left:15px solid transparent;
border-bottom:15px solid transparent;
border-right:15px solid transparent;  
}


/*　------------　「ハウス仲人」ご利用者の声　------------　*/

.users-voice{
margin:1em;
padding:0.5em;
font-size:140%;
background-color:#F5F3F2;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;	
}

.users-voice li{
margin:0 1em 0 2em;
text-indent:-1em;
padding:0.4em 0;
}

.users-voice li:before{
display:inline-block;
margin:0 0.4em 0 0.2em;
font-family:FontAwesome;
font-style:normal;
font-weight:normal;
line-height:1;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
content:"\f086";
font-size:150%;
color:#DCB967;
}


/*　------------　よくある質問とその答え　------------　*/


dl.faq{
font-size:120%;
margin:1em;
padding:0.5em 1em;
border:#F90 solid 1px;
background-color:rgba(255,153,102,0.05);
-webkit-border-radius:5px;
-moz-border-radius:5px; 
border-radius:5px;
}

dl.faq dt{
margin:0 1em 1em 2.5em;
text-indent:-2.8em;
padding:0.5em 0;
font-weight:700;	
}

dl.faq dd{
margin:0 1em 1em 2.5em;
text-indent:-2.8em;
padding:0.5em 0;
}


dl.faq dt span,
dl.faq dd span{
width:2em;
line-height:2em;
margin:0 10px 0 0;
padding:3px 10px;
font-size:120%;
font-weight:700;
-webkit-border-radius:50px;
-moz-border-radius:50px; 
border-radius:50px;
text-align:center;
background-color:#DCB967;
color:#FFF;
}


dl.faq dd span{
background-color:#FF6666;
color:#FFF;	
}
	





@media (min-width:700px) {

#housingcompany-selection-support #content-main .icon-col{
float:left;
margin:0 1em 1em 0; 
padding:1em;
}


.image-explanation{
display:flex;
flex-wrap:wrap;
margin:1em auto;
max-width:1000px;
}

.image-explanation dl{
position:relative;
width:28%;
margin:1%;
text-decoration:none
}

#housingcompany-selection-support #content-main h3{
text-align:left;
}


/*　------------　「ハウス仲人」５つの安心　------------　*/

table.type{
width:90%;
}


/*　------------　「ハウス仲人」ご利用の流れ　------------　*/

/* .flow-step-col
------------------------------------- */
.flow-step-col{
margin:1em auto 0;
padding:0.5em;
text-align:center;
font-size:120%;
}

.flow-step-col li{
width:90%;
}

.flow-step-col div.step{
max-width:300px;
font-size:120%;
}

div.triangle{
left:48%;
}


}



@media all and (min-width:960px) {

.image-explanation{
display:flex;
flex-wrap:wrap;
margin:1em auto;
max-width:1100px;
}

.image-explanation dl{
position:relative;
width:29%;
margin:1%;
text-decoration:none
}

}