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


/* ヘッダー
------------------------------------- */

header{
	width:100%;
	height:6.5em;
}	

/* 
------------------------------------- */

.frame,
.step{
	width:80%;
	height:auto;
	display:block;
	margin:0 auto;
	padding:1em 0;
}

.frame img{
	width:100%;
	height:auto;
}

.frame h2,
.stepH2{
	width:100%;
	height:auto;
	font-weight:bold;
	font-size:2em;
	background:#999;
	color:#fff;
	padding:0.3em 0;
	margin:1em 0;
}

.frame p{
	font-size:1.4em;
	text-align:left;
}

.present,
.present2{
	width:90%;
	height:auto;
	display:block;
	margin:0 auto;
}

.btn a,
.btn2 a,
.btn3 a{
	width:90%;
	display:block;
	padding:0.4em 0;
	margin:1em auto 0;
    background:#2bd1b3;
	text-align:center;
    font-size:1.5em;
	color:#fff;
}

.btn{
	margin:1em 0;
}


.comment{
	height:auto;
	padding:2em 2em;
	font-size:0.9em;
	text-align:left;
}

.wrap{
	width:90%;
	margin:0 auto;
	padding-bottom:2em;
}

.wrap2{
	width:75%;
	margin:0 auto;
	text-align:left;
	padding:1em 0 ;
}

ul{
	list-style-type:none;
}

.step,
.step2{
	width:100%;
	height:inherit;
	display:block;
	float:left;
	margin: 0 0.2em 0.4em 0.2em;
	padding:2em 0;
}

.wrap h2{
	width:100%;
	font-size:1.7em;
	background:#999;
	color:#fff;
	padding-bottom:0.2em;
	font-weight:100;
}

.wrap p{
	text-align:left;
}

.step2 h3{
	font-size:1.8em;
	margin-bottom:0.5em;
}


.step p,
.step2 p{
	padding:0 1.5em;
	font-size:1.5em;
}

.wrap img{
	width:100%;
	height:auto;
}

.border{
	border:#333 1px solid;
}

.content2{
	margin-top:3em;
}

@media (min-width:481px) and (max-width: 1000px) {	
.frame h2,
.stepH2{
	font-size:1.6em;
}
}

@media (min-width:481px) and (max-width: 769px) {	

	header{
		width:100%;
		height:6.5em;
	}	
	
	.content1{
		width:48%;
		float:left;
		margin-top:3em;
		font-size:1em;
		line-height:1.5;
		text-align: justify;
		text-justify: inter-ideograph;
	}
	
	.content2{
		width:48%;
		float:right;
		margin-top:2.5em;
		font-size:1em;
		line-height:1.5;
		text-align: justify;
		text-justify:auto;
		text-justify: inter-ideograph;
	}
	
	.btn{
		width:100%;
	}
	
	.wrap2{
		width:80%;
		font-size:1.5em;
	}
	
	.plan1{
		float:left;
		font-size:1.2em;
	}
	
	.plan2{
		float:right;
		font-size:1.2em;
	}

}

@media (min-width:769px) {
	
	.frame{
		float:left;
		width:25%;
		margin:2% 4%;
	}
	
	.btn a{
		width:70%;
		margin:1em 0 1em auto;
	}
	
	.btn2 a{
		width:17.5%;
		margin:1em 2.8em 1em auto;
	}

	.btn3 a{
		width:17.5%;
	}

	.present{
		height:20em;
	}
	
	.wrap{
		width:100%;
	}
	
	.wrap2{
		width:70%;
	}
	
	.wrap h2{
		text-align:left;
		padding-left:2em;
	}
	
	.step,
	.step2{
		width:31%;
		margin:1%;
	}
	
	.step2{
		margin-top:3em;
	}

	.step2 h3{
		margin-bottom:1em;
	}

	.content1{
		width:48%;
		float:left;
		margin-top:3em;
		font-size:1.4em;
		line-height:2;
	}
	
	.content2{
		width:48%;
		float:right;
		margin-top:2.5em;
		font-size:1.4em;
		line-height:2;
	}
	
	.wrap2{
		width:55%;
		font-size:1.5em;
	}
	
	.plan1{
		float:left;
		font-size:1.2em;
	}
	
	.plan2{
		float:right;
		font-size:1.2em;
	}
	
	
}