/*
inc-flow.css
=================================================================
ご注文の流れページ(HCD-4)の設定を表記

*/

@charset "utf-8";


.flow-wrap {
	width: 780px;
	margin: 0 auto;
}



/*
注文ステップのボックスの指定
=================================================================
*/

.flow {
	/* 角丸 */
	border-radius: 10px;        /* CSS3草案 */  
    -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 10px;   /* Firefox用 */
	/* レイアウト */
	width: 772px;
	height: 250px; 
	border: 3px solid;
	border-color: #b3d34c;
	background-color: #fbf5e8;
	position: relative;
	margin: 0 auto;
	}


.step01 {
	margin-top: 50px;
}



/*動画（右ボックス）の範囲設定/.video
---------------------------------------------------------
*/
.step_no {
	position: absolute;
	margin-left: -40px;
	margin-top: -30px;
}



/*説明（左ボックス）の範囲設定/.explain
---------------------------------------------------------
*/

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

.flow .explain {
	width: 400px;
	height: auto;
	margin: 6px 0 6px 20px;
	padding: 0;
}


/* 説明ボックス内の大見出しの位置設定
---------------------------------------------------------
 */
 .explain h2 {
	margin: 25px 0 15px 15px;
	font-size: 26px;
	font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
}

/* 説明文（step1）の範囲設定 */
.step01 .explain p {
	padding-left: 20px;
	margin-bottom: 15px;
}

/* step01「見積無料」バナー */
.sign {
	margin-left: 30px;
	background-color: #ffcc00;
	padding: 3px 6px;
	font-size: 28px;
	font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
	/* 角丸 */
	border-radius: 10px;        /* CSS3草案 */  
    -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 10px;   /* Firefox用 */
	display: block;
	width: 200px;
	text-align: center;
	color: #454545;
	}
	
/* 説明文（step2）の範囲設定 */
.step02 .explain p {
	padding-left: 20px;
	margin-bottom: 15px;
	margin-top: 30px;
}

/* 説明文（step3）の範囲設定 */
.step03 .explain p {
	padding-left: 20px;
	margin-bottom: 15px;
	margin-top: 30px;

}

/* 説明文（step4）の範囲設定 */
.step04 .explain p {
	padding-left: 20px;
	margin-bottom: 15px;
	margin-top: 30px;
}




/*動画（右ボックス）の範囲設定/.video
---------------------------------------------------------
*/

.flow .video {
	width: 389px;
	height: 219px;
	margin: 12px;
	padding: 0;
	background-color: #F7FB75;
}


/*
矢印アイコンの位置指定
=================================================================
*/

.arrow {
	width: 44px;
	height: 60px;
	margin: 0 auto;
}


/*
スマホ
=================================================================
*/

@media screen and (max-width:600px){
	.flow-wrap {
		width: 100%;
	}

	.flow {
		width: 90%;
		height: 100%; 
		margin-bottom: 2.5%;
	}

	.step_no {
		position: absolute;
		margin-left: -7%;
		margin-top: -30px;
	}

	.flow-inner {
		display: block;
		
	}
	
	.flow .explain {
		width: 90%;
		height: auto;
		margin: 8% 0 1% 5%;
		padding: 0;
	}

	.explain h2 {
		font-size: 1.3em;
	}
	
	/* 説明文（step1）の範囲設定 */
	.step01 .explain p,
	.step02 .explain p,
	.step03 .explain p,
	.step04 .explain p {
		font-size: 1em;
		margin-top: 0;
	}
	
	/* step01「見積無料」バナー */
	.sign {
		font-size: 1.3em;
		padding: 2.5%;
		width: 80%;
		margin: 0 auto;
	}

	.flow .video {
		width: 94%;
		position: relative;
		padding-bottom: 56.25%;
		height: 0;
		overflow: hidden;
		margin-bottom: 5%;
	}
	
	.flow .video iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}


	.arrow {
		width: 10%;
		height: 10%;
		margin: 0 auto 2.5%;
	}
}