@charset "utf-8";

body #container {
	background-image: url(../imgs/bg.png);
	background-repeat: no-repeat;
	background-position: top 90px right;
	background-size: 100% auto;
	background-attachment: fixed;
	}
#titleimg{
	height:160px;
	width:100%;
	text-align:center;
	color:#FFF;
	background-image: url(../imgs/headimg.jpg);
	background-size: cover;
	background-position:center center;
	margin-bottom:60px;
	}
/*#titleimg .mark{
	padding:18px 0;
	}
#titleimg h3{
	font-size:36px;
	font-weight:bold;
	margin-bottom:20px;
	}
#titleimg p{
	font-size:13px;
	font-weight:bold;
	}	*/
#R-SIDE h6 a{
	color:#c96a70;
	}	
#titleimg span.m {
		font-size: 17px;
	}
#titleimg span.l {
		font-size: 23px;
	}
	
@media only screen and (max-width:820px) {
		body #container {padding-top: 90px;}
	}
@media only screen and (max-width:470px) {
		body #container { padding-top: 80px;}
	}	
	/* .radius */
	body .radius {
		border-radius: 4px;
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		-ms-border-radius: 4px;
		-o-border-radius: 4px;
		border-style: solid;
		border-width: 1px;
	}
	/* box */
	.box {
		padding: 30px;
	}
	.box { zoom:1; }
	.box:after { content:"."; display: block; height:0px; clear:both; line-height:0; visibility:hidden; }
	
	.box.nextBtn { margin-top: 60px; padding: 15px; text-align: center;}
	.box.nextBtn a { display: inline-block; padding: 10px 33px; width: 400px;
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-ms-box-sizing: border-box;
		-o-box-sizing: border-box;
	}
	.box.nextBtn a.hasArrow { position: relative;}
	.box.nextBtn a.hasArrow span.arrow { position: absolute; top: 50%; margin-top: -9px; right: -1px; font-size: 20px; line-height: 21px;}
	
	.box.nextBtn a.hasArrow.iconOut span.arrow { position: absolute; top: 50%; margin-top: -5px; left: 50px; right: auto; font-size: 20px; line-height: 21px;}
	/* ttl */
	.ttl { font-weight: bold;}
h3.ttl { font-size: 24px; line-height: 40px; margin-bottom: 30px;}
h4.ttl { font-size: 20px; line-height: 30px; margin-bottom: 25px; padding-bottom: 4px; border-bottom-width: 1px; border-bottom-style: solid;}
h5.ttl { font-size: 16px; line-height: 26px; margin-bottom: 15px;}
h5.ttl.blt { padding-left: 15px; background-position: left 0.45em; background-repeat: no-repeat;}
	
/* ttl */
	h3.ttl { color: #c96a70;}
	h4.ttl { border-color: #cf737a;}
	h5.ttl.p-color { color: #cf737a;}
	h5.ttl.blt { background-image:url(../imgs/blt-ttl.gif);}
	/* box */
	.box { background-color: #fbeeef;}
	.box.nextBtn a.radius{ background: #cf737a; border-color: #f8f4f0 #ece7e2 #b3afab #ece7e2; color: #fff; text-decoration: none;}
	.box.nextBtn a.radius:hover{ background: #e0939a; border-color: #f8f4f0 #ece7e2 #b3afab #ece7e2;}
	
	.box h5.ttl.blt { margin-bottom: 5px;}
	.box h5.ttl.blt:last-child { margin-bottom: 0;}
	.noBold h5.ttl.blt { font-weight: normal;}

/* ftrTxtLinks */
	.ftrTxtLinks {
		position: relative;
		margin-top: 20px;
		text-align: center;
	}
	.ftrTxtLinks li {
		display: inline-block;
	}
	.ftrTxtLinks li a {
		display: block;
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-ms-box-sizing: border-box;
		-o-box-sizing: border-box;
		padding-top: 10px;
		padding-bottom: 10px;
		width: 51px;
		height: 51px;
		color: #666;
		text-decoration: none;
		font-size: 20px;
		line-height: 31px;
		background-color: #e6e6e6;
	}
	.ftrTxtLinks li a:hover {
		color: #fff;
	}
	.ftrTxtLinks .hasSubTxt li a {
		padding-top: 10px;
		padding-bottom: 10px;
		font-size: 14px;
		line-height: 16px;
	}
	.ftrTxtLinks li a span {
		display:block;
		font-size: 10px;
	}
	.ftrTxtLinks .pre,
	.ftrTxtLinks .next {
		position: absolute;
		top: 15px;
	}
	.ftrTxtLinks .pre a,
	.ftrTxtLinks .next a {
		font-size: 25px;
		line-height: 26px;
		color: #999999;
		text-decoration: none;
	}
	.ftrTxtLinks .on a {
		cursor: default;
	}
		
	/* ftrTxtLinks */
	.ftrTxtLinks li a:hover { background-color: #cf737a;}
	.ftrTxtLinks li.on a { color: #fff; background-color: #cf737a;}
	.ftrTxtLinks li.on a:hover { background: #e0939a; border-color: #f8f4f0 #ece7e2 #b3afab #ece7e2;}
	.ftrTxtLinks .pre a:hover,
	.ftrTxtLinks .next a:hover  { color: #cf737a;}
	.ftrTxtLinks .pre { left: 110px;}
	.ftrTxtLinks .next { right: 110px;}
	
	@media only screen and (max-width:959px) {
		/* ftrTxtLinks */
		.ftrTxtLinks .pre { left: 5%;}
		.ftrTxtLinks .next { right: 5%;}
		#L-SIDE { width: 65%; }
	}
	@media only screen and (max-width:900px) {	
		#L-SIDE { width: 96%;margin-left: 2%; margin-right: 2%;}
		.stepbox { margin-left:auto; margin-right:auto;}
	}
	@media only screen and (max-width:800px) {
		#sideNav.radius { border-top-color:#cf737a; background-color:#fbeeef;}
		.ftrTxtLinks .pre { left: 0px;}
		.ftrTxtLinks .next { right: 0px;}
	}
	@media only screen and (max-width:599px) {
		.box.nextBtn a { width: 100%;}
	}
	@media only screen and (max-width:550px) {
		.ftrTxtLinks { padding:15px 0 15px; margin-bottom:60px;}
		.ftrTxtLinks li { display: none;}
		.ftrTxtLinks .next a { padding: 8px 0 8px 15px; display: block; text-align: center; border: #999 solid 1px;
			border-radius: 4px;
			-webkit-border-radius: 4px;
			-moz-border-radius: 4px;
			-ms-border-radius: 4px;
			-o-border-radius: 4px;
		}
		.ftrTxtLinks .pre a { padding: 8px 15px 8px 0px; display: block; text-align: center; border: #999 solid 1px;
			border-radius: 4px;
			-webkit-border-radius: 4px;
			-moz-border-radius: 4px;
			-ms-border-radius: 4px;
			-o-border-radius: 4px;
		}
		.box.nextBtn a span { display: block;}
	}
	/* page style [Start] */
	.lead { margin-bottom: 40px;}
	.lead h3.ttl { float: left; margin-bottom: 10px;}
	.lead .txt { float: left; width: 76%;}
	.lead .img { float: right; width: 22.45%;}
	@media only screen and (max-width:599px) {
		.lead h3.ttl { float: none;}
		.lead .txt { float: none; width: 100%;}
		.lead .img { float: none; width: 80%; margin: 0 auto 20px;}
	}
	.box h5.ttl.blt { margin-bottom: 5px;}
	.box h5.ttl.blt:last-child { margin-bottom: 0;}
	.noBold h5.ttl.blt { font-weight: normal;}
	.numb span {
		display: inline-block;
		width: 30px;
		height: 30px;
		margin-right: 10px;
		color: #fff;
		text-align: center;
		font-weight: normal;
		background: url(../imgs/bg-numb.png) no-repeat 50% 50%;
		border-radius: 99px;
		-webkit-border-radius: 99px;
		-moz-border-radius: 99px;
		-ms-border-radius: 99px;
		-o-border-radius: 99px;
	}
	.link, .link:hover { color: #cf737a;}


	/* step box */
	.stepbox {
		padding-top: 50px;
		background: url(../imgs/arrow.png) no-repeat 50% 20px;
		max-width:700px;
		/*margin-left:auto;
		margin-right:auto;*/
	}
	.stepbox.first {
		padding-top: 0;
		background: none;
	}
	.stepbox .radius {
		position: relative;
		border-color: #f8f4f0;
		border-bottom-color: #b3afab;
		background: #fff;
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-ms-box-sizing: border-box;
		-o-box-sizing: border-box;
		cursor: pointer;
	}
	.stepbox .radius:hover {
		background: #fbeeef;
	}
	.stepbox .img {
		float: left;
		/*width: 27.946%;*/
		width: 35.714%;
		border-radius: 4px 0 0 4px;
		-webkit-border-radius: 4px 0 0 4px;
		-moz-border-radius: 4px 0 0 4px;
		-ms-border-radius: 4px 0 0 4px;
		-o-border-radius: 4px 0 0 4px;
		background: #f5d8da;
	}
	.stepbox .radius:hover img {
		opacity:0.8;
		filter: alpha(opacity=80);
		-ms-filter: "alpha(opacity=80)";
		-moz-opacity:0.8;
		-khtml-opacity: 0.8;
		zoom:1;
	}
	.stepbox .txtarea {
		float: right;
		/*width: 69.197%;*/
		width: 61.429%;
		padding-top: 15px;
	}
	.stepbox .txtarea h5.ttl.step {
		margin-bottom: 7px;
		font-weight: normal;
	}
	.stepbox .txtarea h5.ttl.step span {
		color: #cf737a;
	}
	.stepbox .txtarea h5.ttl.blt {
		margin-bottom: 0;
	}
	.stepbox .bt {
		position: absolute; bottom: 0; right: 0;
		width: 64.286%;
		/*width: 72.054%;*/
	}
	.stepbox .bt a {
		display: block;
		width: 100%;
		padding: 5px 0;
		color: #fff;
		text-decoration: none;
		text-align: center;
		background: #cf737a;
		border-radius: 0 0 4px 0;
		-webkit-border-radius: 0 0 4px 0;
		-moz-border-radius: 0 0 4px 0;
		-ms-border-radius: 0 0 4px 0;
		-o-border-radius: 0 0 4px 0;
	}
	.stepbox .radius:hover .bt a,
	.stepbox .bt a:hover { background: #e0939a;}
	@media only screen and (max-width:959px) {
		.stepbox .img {
			border-radius: 4px 0 0 0;
			-webkit-border-radius: 4px 0 0 0;
			-moz-border-radius: 4px 0 0 0;
			-ms-border-radius: 4px 0 0 0;
			-o-border-radius: 4px 0 0 0;
		}
		.stepbox .bt {
			clear: both;
			position: static;
			width: 100%;
		}
		.stepbox .bt a {
			border-radius: 0 0 4px 4px;
			-webkit-border-radius: 0 0 4px 4px;
			-moz-border-radius: 0 0 4px 4px;
			-ms-border-radius: 0 0 4px 4px;
			-o-border-radius: 0 0 4px 4px;
		}
	}
	@media only screen and (max-width:599px) {
		.stepbox .txtarea {
			width: 59.286%;
			padding-right: 2.143%;
			padding-bottom: 15px;
		}
		.stepbox .img {
			padding-top: 30px;
			background: transparent;
		}
	}

	/* step02 */
	.formula dt,
	.formula dd {
		float: left;
		padding-right: 3px;
		color: #000;
		font-weight: bold;
	}
	.formula span {
		display: inline-block;
		margin-right: 5px;
		padding: 10px 20px;
		color: #fff;
		line-height: 1em;
		border-radius: 4px;
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		-ms-border-radius: 4px;
		-o-border-radius: 4px;
		background: #c96a70;
	}
	.formula br { display: none;}
	@media only screen and (max-width:599px) {
		.formula span {
			padding: 10px;
			line-height: 1.2em;
		}
		.formula br { display: block;}
	}
	@media only screen and (max-width:400px) {
		.formula dt { float: none;}
		.formula br { display: none;}
		.formula dd { margin-top: 5px;}
		.formula dd span {
			padding: 10px 6px;
		}
	}

	/* step06 */
	.paylist li {
		float: left;
		width: 50%;
	}
	@media only screen and (max-width:599px) {
		.paylist li {
			float: none;
			width: 100%;
		}
	}

	/* step07 */
	.checkbox {
		padding-top: 40px;
		background: url(../imgs/arrow.png) no-repeat 50% 10px;
	}
	.checkbox.first {
		padding-top: 0;
		background: none;
	}
	.checkbox .checktime {
		display: table-cell;
		width: 130px;
		height: 130px;
		color: #c96a70;
		font-weight: bold;
		text-align: center;
		vertical-align: middle;
		background: #fbeeef;
		border-radius: 999px;
		-webkit-border-radius: 999px;
		-moz-border-radius: 999px;
		-ms-border-radius: 999px;
		-o-border-radius: 999px;
	}
	.checkbox .checklist {
		display: table-cell;
		width: 81.429%;
		padding-left: 4.286%;
		vertical-align: middle;
	}
	.checkbox h5.ttl.blt {
		margin: 0;
	}