@charset "utf-8";
/* CSS Document */

.flow-h1 { line-height: 1.0em; }
.flow-h1 h1 { font-size: 26px; text-align:left !important;}
.flow-h1 #flow-p1 { font-size: 20px; color: #f4597a; font-weight: normal; }
.flow-h1 #flow-p2 { font-size: 14px; font-weight: normal; padding-bottom: 0; }
.flow { max-width: 950px; margin: 0 auto; width:100%; }
.flow h2 { width: 100%; text-align: center; font-weight: bold; font-size: 26px; color: #fff; background-color: #444; padding: 15px 0; }
.flow #flow-content { width: 100%; background-color: #94bff9; padding: 25px 0 7px 0; }
.flow #flow-content .flow-box { width: 44%; margin: 0 auto; border-radius: 5px; color: #fff; padding: 10px 10px 10px 15px; }
.flow #flow-content .flow-box.flow-center { background-color: #3a4879; color: #fff; }
.flow #flow-content .flow-box.flow-left { background-color: #14c041; color: #fff; width: 88%; }
.flow #flow-content .flow-box.flow-right { background-color: #f4597a; color: #fff; width: 88%; }
.flow #flow-content .flow-box h3 { text-align: center; font-weight: bold; padding: 10px 0 8px 0;  }
.flow #flow-content .flow-box p { color: #fff; }
.flow #flow-content .arrow-box { width: 100%; text-align: center; }
.flow #flow-content .arrow-box #arrow-left1 { position: relative; right: 18%; top: -3px; z-index: 1; }
.flow #flow-content .arrow-box #arrow-right1 { position: relative; left: 18%; top: -3px; z-index: 1; }
.flow #flow-content .arrow-box #arrow-left2 { position: relative; left: 18%; top: -9px; z-index: 1; }
.flow #flow-content .arrow-box #arrow-right2 { position: relative; right: 18%; top: -9px; z-index: 1; }
.flow #flow-content .flow4-box { position: relative; top: -12px; width: 60%; }
.flow #flow-content .arrow-centerbox { position: relative; top: -15px; }
.flow #flow-content .arrow-centerbox #arrow-center { position: relative; z-index: 1; }
.flow #flow-content .flow5-box { position: relative; top: -18px; width: 60%; }
.flow #flow-content table { width: 100%; position: relative; top: -6px; }
.flow #flow-content table td { width: 50%; vertical-align: top; border: none; padding: 0; }
.flow #flow-content .flow-box h3#flow1 { background: url(../../flow/icon-flow1.png) no-repeat; background-position: 11% 2px; }
.flow #flow-content .flow-box h3#flow2 { background: url(../../flow/icon-flow2.png) no-repeat; background-position: 23% 0px; }
.flow #flow-content .flow-box h3#flow3 { background: url(../../flow/icon-flow3.png) no-repeat; background-position: 15% 0px; background-size: 38px; }
.flow #flow-content .flow-box h3#flow4 { background: url(../../flow/icon-flow4.png) no-repeat; background-position: 31% 0px; }
.flow #flow-content .flow-box h3#flow5 { background: url(../../flow/icon-flow5.png) no-repeat; background-position: 33% 0px; }
.flow .btn-flow { width: 100%; text-align: center; margin-top: 30px; }
.flow .btn-flow p { width: 100%; text-align: center; font-weight: bold; color: #f4597a; font-size: 16px; }
.flow .btn-flow .button { width: auto; padding: 0 20px; }
.flow #flow-p3 { width: 100%; text-align: center; font-size: 16px; }
.flow #flow-p4 { width: 100%; text-align: center; font-size: 16px; margin-top: 30px; }
.low_logo.flow_low_logo { border-bottom: none; }
.flow .disp-sp { display: none; }
.flow-h1 #flow_head { width: 520px; margin: 0 auto; }
.flow-h1 #flow_head #flow-img1 { width: 180px; float: left; }
.flow-h1 #flow_head #flow-img1 img { width: 100%; }
.flow-h1 #flow_head #flow-p2 { text-align: left; padding: 55px 0 0 200px; font-size: 16px; }
#flow-img2 { width: 37%; float: left; margin-right: 10px; }
#flow-img2 img { width: 100%; }

.flow_low {
	width:100%;
	max-width:950px;
	margin:20px auto 0 auto;
}

.flow_left {
	float:left;
	width:50%;
}


.flow_right {
	float:right;
	width:50%;
	text-align:left;
}

.flow_right h1 {
	margin:10% 0 0 10%;
	line-height:36px;
}

.flow_right_low {
	background-color:#ffefde;
	color:#d1985b;
	padding:40px;
	font-size:14px;
	margin-top:-4%;
	line-height:20px;
}

.flow_nbox {
	padding:10px 0 0 0;
}

.flow_nbox2 {
	padding:40px 0 0 0;
}

.flow_nbox_left {
	width:60%;
	float:left;
	max-width:528px;
	padding:0 20px 0 0;
	text-align:left !important;
}

.flow_nbox_right {
	width:40%;
	float:right;
}


.flow_nbox2_left {
	width:40%;
	float:left;
	
}

.flow_nbox2_right {
	width:60%;
	float:right;
	max-width:528px;
	padding:0 0 0 20px;
	text-align:left !important;
}

.flow_title {
	/*background-image:url(../../flow/title_back.jpg);*/
	background-repeat:no-repeat;
	width:100%;
	max-width:528px;
	height:65px;
	
}

.flow_title p {
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	padding:3.1% 0 0 3% !important;
	font-weight:900 !important;
	display:block;
	-webkit-font-smoothing: subpixel-antialiased;
	font-size:16px !important;
}

.flow_title span {
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:20px;
	font-weight:900 !important;
	-webkit-font-smoothing: subpixel-antialiased;
}

.brown {
	color:#d1985b !important;
	font-weight:bold;
	margin:10px 0;
}

.title_back {
	/*background-image:url(../../flow/title_back2.jpg) !important;*/
	background-repeat:no-repeat;
	width:100%;
	max-width:528px;
	height:37px;
}

.title_back p {
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	padding:1.3% 0 0px 1% !important;
	font-weight:900 !important;
	display:block;
	-webkit-font-smoothing: subpixel-antialiased;
	font-size:16px !important;
	color:#000 !important;
	
}



.title_back2 {
	/*background-image:url(../../flow/title_back2.jpg) !important;*/
	background-repeat:no-repeat;
	width:100%;
	max-width:528px;
	height:37px;
}

.title_back2 p {
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	padding:1.3% 0 0px 1% !important;
	font-weight:900 !important;
	display:block;
	-webkit-font-smoothing: subpixel-antialiased;
	font-size:16px !important;
	margin-top:15px;
	color:#000 !important;
	
}


.demo5 {
  background: linear-gradient(transparent 60%, #ff0 0%);
}

.g_box {
	background-color:#eee;
	margin-top:20px;
	padding:0 0 20px 0;
}

.g_box p {
	color:#F30 !important;
	display:block;
	width:96%;
	margin:auto;
	font-size:14px !important;
}

.flow_btn {
	background-color:#0e68b2;
	width:75%;
	padding:10px 20px;
	margin:10px auto 0 auto;
	color:#FFF;
	text-align:center;
}

@media screen and (min-width : 768px) {/*768以上(タブレット/PC)*/

}


@media screen and (min-width : 600px) {/*600以上(タブレット/PC)*/



}


@media screen and (min-width:0px) and ( max-width:599px) {/*600まで(SP)*/
.flow .disp-sp { display: block; }
.flow { width: 100%; margin: 0 auto; }
.flow-h1 h1 { font-size: 18px; font-weight: bold; }
.flow-h1 #flow-p1 { font-size: 16px; color: #f4597a; font-weight: bold; }
.flow-h1 #flow-p2 { text-align: left; padding: 0 10px 20px 10px; line-height: 1.5em; }
.low_logo.flow_low_logo { padding-top: 3px; padding-bottom: 0; }
.flow h2 { font-size: 20px; }
.flow #flow-content .flow-box { width: 98%; margin: 0 auto; border-radius: 5px; color: #fff; padding: 8px; }
.flow #flow-content .flow-box.flow-center { background-color: #3a4879; color: #fff; }
.flow #flow-content .flow-box.flow-left { background-color: #14c041; color: #fff; width: 95%; height: 100%; }
.flow #flow-content .flow-box.flow-right { background-color: #f4597a; color: #fff; width: 95%; }
.flow #flow-content .flow-box h3 { font-size: 15px; text-align: center; font-weight: bold; padding: 10px 0 8px 0;  }
.flow #flow-content .flow-box h3#flow1 { background-position: 20% 5px; background-size: 22px; }
.flow #flow-content .flow-box h3#flow2 { background-position: 3% 7px; background-size: 18px; }
.flow #flow-content .flow-box h3#flow3 { background-position: 0% 4px; background-size: 20px; }
.flow #flow-content .flow-box h3#flow4 { background-position: 30% 10px; background-size: 20px; }
.flow #flow-content .flow-box h3#flow5 { background-position: 32% 3px; background-size: 18px; }
.flow-h1 #flow_head { width: 100%; padding: 0 10px; }
.flow-h1 #flow_head #flow-img1 { width: 100px; float: left; }
.flow-h1 #flow_head #flow-img1 img { width: 100%; }
.flow-h1 #flow_head #flow-p2 { text-align: left; padding: 20px 0 0 110px; font-size: 13px; }
#flow-img2 { width: 41%; float: left; margin-right: 10px; padding-bottom: 5px; }
#flow-img2 img { width: 100%; }


.flow_left {
	float:none;
	width:100%;
	display:none;
}


.flow_right {
	float:right;
	width:100%;
	text-align:none;
}


.flow_right h1 {
	margin:-5% 0 20px 5%;
	line-height:36px;
	font-size:20px !important;
	padding-bottom:20px;
}

.flow_right_low {
	background-color:#ffefde;
	color:#d1985b;
	padding:40px;
	font-size:16px;
	margin-top:-4%;
	line-height:24px;
}


.flow_nbox_left {
	width:95%;
	float:none;
	max-width:528px;
	padding:0 0px 0 0;
	margin:auto;
}

.flow_nbox_right {
	width:50%;
	float:none;
	margin:auto;
	display:none;
}


.flow_nbox2_left {
	width:100%;
	float:none;
	
}

.flow_nbox2_right {
	width:95%;
	float:none;
	max-width:528px;
	padding:0 0 0 0px;
	margin:auto;
}

.flow_title {
	margin:20px 0 0 0;
}

.flow_title p {
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	padding:5% 0 0 3% !important;
}



}