@charset 'UTF-8';

@media screen and (min-width:768px){
/*pc・タブレットcss*/

section.flow_contbox [class*='_inbox'] div.point,
section.flow_contbox .flow_01_inbox .flow_btn ul{
		zoom: 1;
}

section.flow_contbox [class*='_inbox'] div.point:after,
section.flow_contbox .flow_01_inbox .flow_btn ul:after{
		display: block;
		clear: both; 

		content: '';
}


/*--------------------------------------------------------------------/
	flow 家造りの流れ
/--------------------------------------------------------------------*/
section.flow_contbox [class*='_inbox']{
		position: relative; 

		margin-bottom: 60px;

		border: 1px solid #272727;
}

section.flow_contbox [class*='_inbox']:after{
		position: absolute;
		top: -2px;
		left: -1px; 

		visibility: visible;

		content: url('../img/flow_corner.png');
}

section.flow_contbox [class*='_inbox']:before{
		position: absolute;
		bottom: -80px;
		left: 330px; 

		visibility: visible;

		width: 0;
		height: 0;

		content: '';

		border: 30px solid transparent;
		border-top-color: #97ca53;
}

section.flow_contbox [class*='_inbox'] h4{
		font-size: 24px;

		margin-bottom: 20px;
		margin-left: 55px;
		padding-top: 30px;

		letter-spacing: 1px;
}

section.flow_contbox [class*='_inbox'] div.txt{
		width: 322px; 
		margin-bottom: 25px;
		margin-left: 55px;
}

section.flow_contbox [class*='_inbox'] div.txt p{
		line-height: 1.55;

		margin-bottom: 13px;
}

section.flow_contbox [class*='_inbox'] div.point{
		position: relative; 

		background: url('../img/common_bg_02.gif');
}

section.flow_contbox [class*='_inbox'] div.point > h5{
		line-height: 1.6;

		margin-bottom: 10px; 
		margin-left: 55px;
		padding-top: 15px;

		letter-spacing: 1px;
}

section.flow_contbox [class*='_inbox'] div.point div.txt{
		float: none;

		width: 630px;
		margin: 0 auto;
		padding: 10px;
}

section.flow_contbox .flow_01_inbox{
		background: url('../img/flow_bg_01.jpg') 407px 27px no-repeat;
}

section.flow_contbox .flow_01_inbox .flow_btn{
		margin-top: 20px;
}

section.flow_contbox .flow_01_inbox .flow_btn ul li:first-child{
		float: left;

		margin-right: 35px;
}

section.flow_contbox .flow_01_inbox .flow_btn ul li.last{
		float: right;
}

section.flow_contbox .flow_02_inbox{
		background: url('../img/flow_bg_02.jpg') 407px 70px no-repeat;
}

section.flow_contbox .flow_03_inbox{
		background: url('../img/flow_bg_03.jpg') 407px 30px no-repeat;
}

section.flow_contbox .flow_04_inbox{
		background: url('../img/flow_bg_04.jpg') 407px 70px no-repeat;
}

section.flow_contbox .flow_04_inbox .flow_btn{
		float: right;

		margin-bottom: 20px; 
		padding: 10px 15px;

		-webkit-transition: all .2s ease;
			 -moz-transition: all .2s ease;
				 -o-transition: all .2s ease;
						transition: all  .2s ease;
		text-decoration: none;

		color: #fff;
		background-color: #4f4f4f;
		letter-spacing: 1px;
		font-weight: bold;
}

section.flow_contbox .flow_04_inbox .flow_btn:before{
		padding-right: 5px; 

		content: url('../img/common_icon_05.png');
}

section.flow_contbox .flow_04_inbox .flow_btn:hover{
		background-color: #aaa;
}

section.flow_contbox .flow_04_inbox figure{
		margin-bottom: 30px;
}

section.flow_contbox .flow_05_inbox{
		background: url('../img/flow_bg_05.jpg') 407px 30px no-repeat;
}

section.flow_contbox .flow_05_inbox h4{
		padding-top: 30px;
}

section.flow_contbox .flow_05_inbox > .txt p{
		width: 330px;
}

section.flow_contbox .flow_05_inbox .att{
		font-size: 13px;
}

section.flow_contbox .flow_05_inbox .att span{
		color: #e70012;
}

section.flow_contbox .flow_06_inbox{
		background: url('../img/flow_bg_06.jpg') 407px 30px no-repeat;
}

section.flow_contbox .flow_06_inbox h4{
		padding-top: 30px;
}

section.flow_contbox .flow_06_inbox:before{
		border: none;
}

section.flow_contbox .lastbox{
		width: 712px;
		height: 338px;
		margin-bottom: 40px; 

		background: url('../img/flow_lastbox.jpg') 0 0 no-repeat;
}

section.flow_contbox .lastbox h4{
		font-size: 24px;

		width: 703px;
		height: 97px;
		margin-bottom: 20px; 
		padding-top: 40px;
		padding-left: 150px;

		letter-spacing: 1px;

		color: #ff874e;
		background: url('../img/flow_h4_02.png') 10px 10px no-repeat;
}

section.flow_contbox .lastbox div.txt{
		line-height: 1.6;

		float: right;

		width: 460px;
		margin-right: 20px;
}

}

@media screen and (max-width:767px){
/*スマホ用css*/

section.flow_contbox [class*='_inbox'] div.point,
section.flow_contbox .flow_01_inbox .flow_btn ul{
		zoom: 1;
}

section.flow_contbox [class*='_inbox'] div.point:after,
section.flow_contbox .flow_01_inbox .flow_btn ul:after{
		display: block;
		clear: both; 

		content: '';
}


/*--------------------------------------------------------------------/
	flow 家造りの流れ
/--------------------------------------------------------------------*/
section.flow_contbox [class*='_inbox']{
		position: relative; 

		margin-bottom: 60px;

		border: 1px solid #272727;
}

section.flow_contbox [class*='_inbox']:after{
		position: absolute;
		top: -2px;
		left: -2px; 

		visibility: visible;

		content: url('../img/flow_corner.png');
}

section.flow_contbox [class*='_inbox']:before{
		position: absolute;
		bottom: -80px;
		left: 0;
		right: 0;
		margin: auto;
		visibility: visible;
		width: 0;
		height: 0;
		content: '';
		border: 30px solid transparent;
		border-top-color: #97ca53;
}

section.flow_contbox [class*='_inbox'] h4{
		font-size: 24px;
		margin-bottom: 20px;
		margin-left: 55px;
		padding-top: 30px;
		letter-spacing: 1px;
}

section.flow_contbox .flow_02_inbox h4 img{
	width: 95%;
}
section.flow_contbox .flow_04_inbox h4 img{
	width: 95%;
}


section.flow_contbox [class*='_inbox'] div.txt{
		margin-bottom: 25px;
		padding: 0 15px;
		box-sizing: border-box;
}

section.flow_contbox [class*='_inbox'] div.txt p{
		line-height: 1.55;
		margin-bottom: 13px;
		box-sizing: border-box;
}

section.flow_contbox [class*='_inbox'] div.point{
		position: relative; 
		background: url('../img/common_bg_02.gif');
}

section.flow_contbox [class*='_inbox'] div.point > h5{
		line-height: 1.6;
		padding: 15px 15px 5px;
		letter-spacing: 1px;
}

section.flow_contbox [class*='_inbox'] div.point > h5 img{
	width: 100%;
	max-width: 390px;
}

section.flow_contbox [class*='_inbox'] div.point div.txt{
		float: none;
		margin: 0 auto;
		padding: 15px 15px 5px;
}

section.flow_contbox .flow_01_inbox{
		background: url('../img/flow_bg_01.jpg') center bottom 20px no-repeat;
		padding-bottom: 180px;
}

section.flow_contbox .flow_01_inbox .flow_btn{
		margin: 20px auto 0;
		text-align: center;
}

section.flow_contbox .flow_01_inbox .flow_btn li{
	margin-bottom: 10px;
	text-align: center;
}
section.flow_contbox .flow_01_inbox .flow_btn li img{
	margin: auto;
}
section.flow_contbox .flow_02_inbox{
		background: url('../img/flow_bg_02.jpg') center bottom 20px no-repeat;
		padding-bottom: 200px;
}

section.flow_contbox .flow_03_inbox{
		background: url('../img/flow_bg_03.jpg') center bottom 20px no-repeat;
		padding-bottom: 220px;
}

section.flow_contbox .flow_04_inbox{
		background: url('../img/flow_bg_04.jpg') center bottom 20px no-repeat;
		padding-bottom: 240px;
}

section.flow_contbox .flow_04_inbox .flow_btn{
		margin-bottom: 20px; 
		padding: 10px 15px;
		-webkit-transition: all .2s ease;
			 -moz-transition: all .2s ease;
				 -o-transition: all .2s ease;
						transition: all  .2s ease;
		text-decoration: none;
		color: #fff;
		background-color: #4f4f4f;
		letter-spacing: 1px;
		font-weight: bold;
		text-align: center;
		display: block;
}

section.flow_contbox .flow_04_inbox .flow_btn:before{
		padding-right: 5px; 

		content: url('../img/common_icon_05.png');
}

section.flow_contbox .flow_04_inbox .flow_btn:hover{
		background-color: #aaa;
}

section.flow_contbox .flow_04_inbox figure{
		margin-bottom: 30px;
}

section.flow_contbox .flow_05_inbox{
		background: url('../img/flow_bg_05.jpg') center bottom 20px no-repeat;
		padding-bottom: 240px;
}

section.flow_contbox .flow_05_inbox h4{
		padding-top: 30px;
}

section.flow_contbox .flow_05_inbox > .txt p{
}

section.flow_contbox .flow_05_inbox .att{
		font-size: 13px;
}

section.flow_contbox .flow_05_inbox .att span{
		color: #e70012;
}

section.flow_contbox .flow_06_inbox{
		background: url('../img/flow_bg_06.jpg') center bottom 20px no-repeat;
		padding-bottom: 240px;
}

section.flow_contbox .flow_06_inbox h4{
		padding-top: 30px;
}

section.flow_contbox .flow_06_inbox:before{
		border: none;
}

section.flow_contbox .lastbox{
		width: 100%;
		margin-bottom: 40px; 
}

section.flow_contbox .lastbox img{
		width: 100%;
}

section.flow_contbox .lastbox h4{
		font-size: 24px;

		width: 703px;
		height: 97px;
		margin-bottom: 20px; 
		padding-top: 40px;
		padding-left: 150px;

		letter-spacing: 1px;

		color: #ff874e;
		background: url('../img/flow_h4_02.png') 10px 10px no-repeat;
}

section.flow_contbox .lastbox div.txt{
		line-height: 1.6;
}

}