@charset "UTF-8";
/* ######################################################################################

　ご契約の流れ

###################################################################################### */

@media print, screen and (min-width: 768px) {
	.pageFlow .flow{padding-bottom: 120px;padding-top: 80px;}
}
@media screen and (max-width: 767px) {
}

/***************************************
 * Flow
 */

#Flow .flow p{ line-height: 1.8;}

#Flow h3 {
	width:100%;
	text-align:center;
	font-size:36px;
}

#Flow .contents.flow {
	width:980px;
	margin:0 auto 50px;
}

#Flow .row {
	display:flex;
	margin:0 0 30px;
}

#Flow .row .left {
	width:45%;
}

#Flow .row .right {
	width:55%;
	padding:40px 0 0 40px;
	text-align: left;
}

/*#Flow .left img {width:100%;}*/

#Flow .row .right h4 {
	margin:0;
	padding:0;
	color: #000000;
	font-weight:normal;
	display: block;
	margin-bottom: 15px;
	font-size: 30px;
}

#Flow .row .right p {
	font-size: 16px;
}

#Flow .row .right .note {
	padding: 3px;
	margin-top: 20px;
	/*background:#eeeeee;*/
	text-align: left;
}

#Flow .row .right .note .inner {
	margin: 3px;
    padding: 15px;
	border:1px solid rgba(219,58,60,1.00);
}

#Flow .row .right h5 {
	margin:0;
	padding:0;
	font-size: 16px;
    font-weight: 700;
}

#Flow .row .right ul {
	margin:0;
	padding:0;
	list-style:none;
}

#Flow .row .right ul li {
	font-size: 16px;
	line-height: 1.5em;
	padding-top: 2px;
	padding-bottom: 2px;
	position: relative;
	text-indent: -1.5em;
	padding-left: 2em;
}

#Flow .row .right ul li::before {
	content: "●";
	color: rgba(219,58,60,1.00);
	font-size: 12px;
	margin-right: 10px;
}

#Flow .caution {
	color:#000000;
}

#Flow .arrow {
	width :100%;
	text-align:center;
	padding:10px;
	margin: 20px 0;
}

#Flow .dark {
	background:#333333;
}

#Flow .dark .contents.flow {
	margin:0 auto;
}

#Flow .dark .contents.flow .row {
	margin:0;
	padding:50px;
}

#Flow .dark .contents.flow .left {
	width:35%;
	margin:0;
}

#Flow .dark .contents.flow .right {
	width:65%;
	padding:0 0 0 40px;
	color:#ffffff;
	line-height:1.8;
}

#Flow .dark .contents.flow .btn-area {
	width:100%;
	display:flex;
	justify-content:space-between;
}

#Flow .dark .contents.flow .btn-area div {
	width:49%;
}


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

@media screen and (max-width: 980px) {
	#Flow .contents.flow {
		width:100%;
	}
	
}

@media screen and (max-width: 896px) {
	#Flow .row {
		margin:0;
	}
	
	#Flow .contents.flow .row {
		flex-wrap:wrap;
	}
	
	#Flow .contents.flow .left {
		width:100%;
		padding:15px;
	}
	
	#Flow .contents.flow .right {
		width:100%;
		padding:0 15px 15px;
	}

	#Flow .dark .contents.flow .row {
		flex-wrap:wrap;
		padding:0;
	}
	

	#Flow .dark .contents.flow .left {
		width:100%;
		padding:20px 20px 0;
	}

	#Flow .dark .contents.flow .right {
		width:100%;
		padding:0 20px 20px;
	}

	#Flow .arrow {
		width:60%;
		margin:0 auto;
		text-align:center;
	}

	#Flow .arrow img {
		width:100%;
	}
	
	#Flow .annotation {
		padding:0 15px;
	}
}

@media screen and (max-width: 480px) {
	#Flow .dark .contents.flow .btn-area {
		flex-wrap:wrap;
	}
	#Flow .dark .contents.flow .btn-area div {
		width:100%;
		margin:0 0 10px;
	}
	#Flow .dark .contents.flow .btn-area div a {
	}
	#Flow .row .right h4 {
		font-size: 25px;
	}	
}




/* end */