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

/* トップ画像 */
div#topimage{
	position: relative;
	width: 100%;
	background-color: #fae7d8;
	background-repeat: no-repeat;
	background-position: right top;
}
div#topimage div#image_box{
	position: relative;
	background-size: contain;
	width: 80%;
	left: 20%;
	top:0;
	padding-top: calc(692 / 1033 * 80%); /* calc(画像高さ ÷ 画像横幅 × 100%) */
}
div#topimage div.content_box{
	background-color: #FFF;
	position: absolute;
	top: calc(27.9vw - 150px);
	left: 5%;
	padding-left: 40px;
	padding-right: 40px;
	padding-top: 30px;
	padding-bottom: 30px;
	width: 520px;
	z-index: 5;
}
div#topimage div.content_box h4,
div#topimage2 div.content_box h4{
	margin: 0;
	padding: 0;
	font-weight: 400;
	line-height: 1.0em;
	margin-bottom: 10px;
	font-size: 0.9375rem;
}
div#topimage div.content_box h3,
div#topimage2 div.content_box h3{
	margin: 0;
	padding: 0;
	font-size: 1.875rem;
	font-weight: 400;
	letter-spacing: 4px;
	line-height: 0.8em;
}
div#topimage div.content_box h3 span,
div#topimage2 div.content_box h3 span{
	font-size: 0.9375rem;
	letter-spacing: 2px;
}
div#topimage div.content_box p,
div#topimage2 div.content_box p{
	margin-bottom: 30px;
	font-size: 1.125rem;
}

div#topimage2{
	position: relative;
	width: 100%;
	background-color: #fae7d8;
	background-repeat: no-repeat;
	background-position: left top;
}
div#topimage2 div#image_box{
	position: relative;
	background-size: contain;
	width: 80%;
	left: 0;
	top:0;
	padding-top: calc(692 / 1033 * 80%); /* calc(画像高さ ÷ 画像横幅 × 100%) */
}
div#topimage2 div.content_box{
	background-color: #FFF;
	position: absolute;
	top: calc(27.9vw - 150px);
	right: 5%;
	padding-left: 40px;
	padding-right: 40px;
	padding-top: 30px;
	padding-bottom: 30px;
	width: 520px;
	z-index: 5;
}

/* メインコンテンツ */
div#main_content{
	
}
div#main_content div.content_area{
	background-repeat: no-repeat;
	margin-top: 140px;
}
div#main_content div.content_area h2{
	height: 80px;
}
div#main_content div.content_area p{
	width: 460px;
	margin: 0;
	font-size: 1.0rem;
	line-height: 30px;
}
div#main_content div#content1_area{
	background-position: top 80px right 0px;
}
div#main_content div#content2_area{
	background-position: top 80px left 0px;
}
div#main_content div#content3_area{
	background-position: top 80px right 0px;
}
div#main_content div#content1_area p{
}
div#main_content div#content2_area p{
	width: 100%;
	padding-left: 580px;
}
div#main_content div#content3_area p{
}
div#main_content div#content2_area h2{
	padding-left: 580px;
}
div.image_area{
	margin-top: 140px;
}
div#main_content div#content3_area{
	padding-bottom: 80px;
}

@media screen and (min-width:641px) and (max-width:960px) { 
	div#topimage div.content_box,
	div#topimage2 div.content_box{
		width: 420px;
	}
	div#main_content div.content_area{
		width: 80%;
		margin-left: auto;
		margin-right: auto;
		background-repeat: no-repeat;
		margin-top: 140px;
	}
	div#main_content div#content1_area{
		background-position: bottom center;
	}
	div#main_content div#content2_area{
		background-position: bottom center;
	}
	div#main_content div#content3_area{
		background-position: bottom 80px center;
	}
	div#main_content div#content1_area p{
		width: 100%;
		padding-left: 0px;
	}
	div#main_content div#content2_area p{
		width: 100%;
		padding-left: 0px;
	}
	div#main_content div#content3_area p{
		width: 100%;
		padding-left: 0px;
	}
	div#main_content div#content2_area h2{
		padding-left: 0;
	}
	div.image_area{
		width: 80%;
		margin-left: auto;
		margin-right: auto;
	}
	div.image_area img{
		width: 100%;
		height: auto;
	}
}


@media screen and (max-width:640px) {
	div#topimage,
	div#topimage2{
		position: relative;
		width: 100%;
		background-color: #fae7d8;
		background-repeat: no-repeat;
		background-position: right top;
	}
	div#topimage div#image_box,
	div#topimage2 div#image_box{
		position: relative;
		background-size: contain;
		width: 100%;
		left: 0;
		top:0;
		padding-top: calc(692 / 1033 * 100%); /* calc(画像高さ ÷ 画像横幅 × 100%) */
	}
	div#topimage div.content_box,
	div#topimage2 div.content_box{
		background-color: #FFF;
		position: relative;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 5;
	}
	
	div#main_content div.content_area{
		width: 560px;
		margin-left: auto;
		margin-right: auto;
		background-repeat: no-repeat;
		margin-top: 140px;
	}
	div#main_content div#content1_area{
		background-position: bottom center;
	}
	div#main_content div#content2_area{
		background-position: bottom center;
	}
	div#main_content div#content3_area{
		background-position: bottom 80px center;
	}
	div#main_content div#content1_area p{
		width: 100%;
		padding-left: 0px;
	}
	div#main_content div#content2_area p{
		width: 100%;
		padding-left: 0px;
	}
	div#main_content div#content3_area p{
		width: 100%;
		padding-left: 0px;
	}
	div#main_content div#content2_area h2{
		padding-left: 0;
	}
	div.image_area{
		width: 560px;
		margin-left: auto;
		margin-right: auto;
	}
	div.image_area img{
		width: 100%;
		height: auto;
	}
}