@charset "UTF-8";
#title {  background-image: url("images/title-bg.jpg");}

.inner { max-width:1040px;}

.intro { text-align: left; padding: 40px 0;}
	.intro h2 { padding:10px 0; text-align: center;}
	.intro h3 { padding:10px 0 20px 0; text-align: center;}
		.intro h3 img {padding: 4px 0;}
	.intro p { padding:20px 0; font-size:16px;}

.planning { text-align: left; padding: 40px 0;}
	.planning h3 { padding:10px 0; text-align: left; font-size: 25px;}
	.planning p { padding:10px 0; font-size:16px;}
	.planning ul { padding:10px 0; display: flex; justify-content: space-between; flex-wrap: wrap; }
	.planning li { padding:20px 0; font-size:20px; font-weight: bold;}
		.planning li::before { content:""; display: block; width: 40px; height: 40px; margin: 0 0 5px 0; background: url("images/q.svg") center / contain no-repeat;}
	.planning h4 { padding:15px 15px; margin: 10px 0; text-align: center; font-size: 25px; background: #E7AD80; color:#301314;}

.feature { text-align: left; padding: 40px 0;}
	.feature h3 { padding:20px 0 20px 0;}
	.feature h4 { padding:20px 0 20px 0; font-size: 20px;}
	.feature p { padding:10px 0 10px 0; font-size:16px;}


@media all and (min-width:320px) {
	/* 320px+ settings */
	.feature h3 { text-align: center;}
}

@media all and (min-width:640px) {
	/* 640px+ settings */
}

@media all and (min-width:960px) {
	/* 960px+ settings */
	.planning li { width: 32%;}
	.feature h3 { text-align: left;}
}

@media all and (min-width:1200px) {
	/* 1200px+ settings */
	.featureinner { padding:0 100px;}
}