#reform	#mainheader	{background: url("../image/reform_head.png") no-repeat;background-size: cover}
#mainheader	h2	span{max-width : 300px;}


#example,#flow		{padding: 70px 0}
#flow		{background:#f7f7f7;}

.blcktitle	{margin: 20px 0;padding: 10px 15px;color: #2d64af;border-left: 2px solid #2d64af;font-size: 18px;font-weight: 500;line-height: 1em;}

/*フォーム事例*/
#example	.inner	{display:-webkit-box;display:-ms-flexbox;display:flex;border-bottom: 1px dotted #ccc;}
 #example	.inner.ex2	{padding-top: 30px;}
#example	p	{margin-bottom: 20px;}

#example	.cmnt	{-ms-flex-preferred-size: 43%;flex-basis: 43%;padding-right: 2%;}
#example	.beforephoto	{-ms-flex-preferred-size: 20%;flex-basis: 20%;}
#example	.ga	{-ms-flex-preferred-size: 5%;flex-basis: 5%;padding-top: 3%;text-align: center;}
#example	.afterphoto	{-ms-flex-preferred-size: 30%;flex-basis: 30%;}

#example	.bftext,#example	.attext	{display: block;margin: 0;padding: 0 10px;font-size: 80%;font-weight: 400;letter-spacing: .1em;}
#example	.bftext	{background: #999;color: #fff;}
#example	.attext	{background: #2d64af;color: #fff;}

.arrowright{width:0;height:0;margin:0 auto;font-size:15px;border-left:1em solid transparent;border-right:1em solid transparent;border-bottom:1.5em solid #7da4d9;transform: rotate(90deg);display:inline-block}




/*otherexample　リフォーム事例ギャラリー*/
#otherexample	{padding: 60px 0;}
#otherexample	.jissekiicon{text-align: center}
#otherexample	.jissekiicon	i	{font-size: 50px;font-weight: 400;color: #2d64af}
#otherexample	h4{margin-bottom: 10px;text-align: center;font-size: 25px;font-weight: 400;color: #2d64af}
#otherexample	.jisseki	{margin-bottom: 40px;text-align: center}
#otherexample	.gallery{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap: wrap;flex-wrap: wrap;}
#otherexample	.gallery	p{-ms-flex-preferred-size: 30%;flex-basis: 30%;margin: 0 1.5% 1.5% 1.5%}

/*リフォームの流れ*/
#flow		.innerbox	{display:-webkit-box;display:-ms-flexbox;display:flex;margin-bottom: 20px;padding: 30px 30px 30px 15px;background: #fff;border-bottom: 1px solid #ccc;}
#flow		.icon{display:block;-ms-flex-preferred-size:  180px;flex-basis:  180px;}
#flow		.icon	img{width: 120px;height: 120px;margin-left: 20px;}
#flow		.cmnt{-ms-flex-preferred-size: calc(100% - 180px);flex-basis: calc(100% - 180px);}

.flowttle	{margin-bottom: 10px;padding: 0px 8px;font-size: 18px;font-weight: 400;border-left: 4px solid #2d64af;}
.flowsubttle	{color: #528754}

.arrowbottom{width:0;height:0;margin:0 0 13px 8%;font-size:15px;border-left:1em solid transparent;border-right:1em solid transparent;transform: rotate(180deg);border-bottom:1.5em solid #7da4d9;display:inline-block}

.fonepoint	{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;margin-top: 15px;}
.fonepoint	div{-ms-flex-preferred-size: 48%;flex-basis: 48%;}
.fonepoint h6{margin-bottom: 0.5em;border: 1px solid #7da4d9;color: #7da4d9;text-align: center;font-weight: 400;}



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

#example	.inner	{-ms-flex-wrap: wrap;flex-wrap: wrap;}
#example	.cmnt	{-ms-flex-preferred-size: 100%;flex-basis: 100%;padding-right: 0;}
#example	.beforephoto	{-ms-flex-preferred-size: 35%;flex-basis: 35%;}
#example	.ga	{-ms-flex-preferred-size: 15%;flex-basis: 15%;padding-top: 3%;}
#example	.afterphoto	{-ms-flex-preferred-size: 50%;flex-basis: 50%;}

#otherexample	.gallery	p{-ms-flex-preferred-size: 47%;flex-basis: 47%;margin: 0 1.5% 1.5% 1.5%}


#flow		.next	{text-align: center}
.arrowbottom{margin: 0 auto 13px auto;}


.fonepoint	{display:block;margin: 15px 0;}
.fonepoint	div{margin-bottom: 20px;}

}

@media screen and (max-width: 640px) {
#flow		{}
#flow		.innerbox	{display:block;padding: 25px;background: #fff;border-bottom: 1px solid #ccc;}
#flow		.icon{text-align: center}
#flow		.icon	img{margin-left:0;}

.flowttle	{margin: 0 10% 20px 10%;padding: 0px 10px 10px 10px;border-left: none;border-bottom: 1px dotted #2d64af;text-align-last: center}

#flow		.next	{text-align: center}

}