@charset "utf-8";

/*===============================================
●共通
===============================================*/
#contents .title01 h2 {
	width: auto;
}
#contents .title01 span {
	width: 15em;
}

.cautionText {
	font-size: 1.13em;
	color: #ff0000;
	font-weight: bold;
	font-family: "M PLUS 1p", sans-serif;
	font-weight: 400;
}

/* メリット
---------------------------------------- */
.meritSection + .meritSection {
	margin-top: 1em;
}

.meritSection h3 {
	font-weight: 700;
	color: #cc3300;
}

/* flow
---------------------------------------- */
.flow section h4 {
	font-family: "Kosugi", sans-serif;
	font-weight: 400;
}
.flow section h4.step01 {
	background: url(../../images/flow/step01.gif) no-repeat 10px center;
}
.flow section h4.step02 {
	background: url(../../images/flow/step02.gif) no-repeat 10px center;
}
.flow section h4.step03 {
	background: url(../../images/flow/step03.gif) no-repeat 10px center;
}
.flow section h4.step04 {
	background: url(../../images/flow/step04.gif) no-repeat 10px center;
}
.flow .textBox h5 {
	font-size: 1.13em;
	font-weight: bold;
	font-family: "M PLUS 1p", sans-serif;
	font-weight: 400;
	color: #116532;
	margin-bottom: 0.5em;
}
#payment dt {
	font-size: 1.25em;
	font-weight: bold;
	margin-bottom: 0.3em;
	font-family: "M PLUS 1p", sans-serif;
	font-weight: 400;
}
#payment dd {
	line-height: 1.5em;
	margin-bottom: 1.5em;
}

/*===============================================
●画面の横幅が740px以下
===============================================*/
@media screen and (max-width: 739px) {
	/* flow
	---------------------------------------- */
	.flow section {
		margin-bottom: 15px;
		border: #ccc 1px solid;
	}
	.flow section h4 {
		font-size: 1.4em;
		line-height: 1.5em;
		padding: 10px 10px 10px 60px;
		border-bottom: #ccc 1px solid;
		background-size: 40px 32px !important;
	}
	.flow .textBox {
		padding: 10px;
	}
	.cautionText {
		margin-bottom: 2.5em;
	}

	.btnBox li {
		width: 100%;
		margin-bottom: 1em;
		box-sizing: border-box;
	}
}

/*===============================================
●画面の横幅が740px以上
===============================================*/
@media screen and (min-width: 740px) {
	/* flow
	---------------------------------------- */
	.flow section {
		padding-bottom: 30px;
		margin-bottom: 30px;
		background: url(../../images/flow/arrow01.gif) no-repeat 60px bottom;
		background-size: 20px 13px;
	}
	.flow section:last-child {
		padding-bottom: 0;
		background: none;
	}
	.flow section h4 {
		width: 100px;
		height: 80px;
		font-size: 1.5em;
		line-height: 1.3em;
		overflow: hidden;
		padding-left: 120px;
		display: table-cell;
		vertical-align: middle;
	}
	.flow section .textBox {
		display: table-cell;
		vertical-align: middle;
	}

	#payment dd span {
		width: 357px;
		display: block;
	}
	.cautionText {
		margin-bottom: 3.5em;
	}
}

/*===============================================
●画面の横幅が940px以上
===============================================*/
@media screen and (min-width: 960px) {
	#flow01 {
		background: url(../../images/flow/image01.gif) no-repeat right top;
	}
	#flow02 {
		background: url(../../images/flow/image02.gif) no-repeat right top;
	}
}