@charset "UTF-8";

/* CSS Document */

/*==================================================

top-contents
=================================================*/

html {
	background-color: #f0e5da;
}

.top-image {
	width: 100%;
	position: relative;
	margin-bottom: 5%;
}
.catch {
	width: 70%;
	max-width: 776px;
	position: absolute;
	top: 51%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	z-index: 3;
}
.top-section-l {
	width: 100%;
	max-width: 1200px;
	display: block;
	position: relative;
	margin: 0 auto;
}
.top-section-l a {
	width: 100%;
	display: block;
	text-decoration: none;
}
.top-section-l .photo {
	width: 50%;
	position: relative;
	float: left;
}
.top-section-l .inner {
	width: 50%;
	position: relative;
	float: left;
}
.top-section-l .inner .title {
	width: 80%;
	position: absolute;
	color: #FFF;
	text-align: center;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
.top-section-l .inner .title h1 {
	font-size: 240%;
	font-family: 'Merriweather Sans', sans-serif;
}
.top-section-l .inner .title h2 {
	font-size: 120%;
}
.top-section-l .inner .title p {
	font-size: 120%;
	line-height: 200%;
	text-align: left;
	text-align: justify;
	text-justify: inter-ideograph;
	margin-top: 5%;
}
.top-section-l:nth-of-type(2) .photo {
	float: right;
}
.top-section-l:nth-of-type(2) .inner {
	float: right;
}

.top-section-m {
	width: 100%;
	max-width: 1200px;
	display: block;
	position: relative;
	margin: 8% auto 0;
}
.top-section-m a {
	width: 100%;
	display: block;
	text-decoration: none;
}
.top-section-m .photo {
	width: 100%;
}
.top-section-m .inner {
	width: 50%;
	position: absolute;
	top: 0;
	left: 0;
}
.top-section-m .inner .title {
	width: 80%;
	position: absolute;
	color: #FFF;
	text-align: center;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
.top-section-m .inner .title h1 {
	font-size: 240%;
	font-family: 'Merriweather Sans', sans-serif;
}
.top-section-m .inner .title h2 {
	font-size: 120%;
}
.top-section-m .inner .title p {
	font-size: 120%;
	line-height: 200%;
	text-align: left;
	text-align: justify;
	text-justify: inter-ideograph;
	margin-top: 5%;
}


/* cf */

.top-section-l:after {
	content:" ";
    display:block;
    clear:both;
}

/* top img */

.top-image img,.top-section-l img,.top-section-m img {
	width: 100%;
	max-width: 100%;
	height: auto;
}
@media only screen and (min-width:1px) and (max-width: 860px) {
	
	.top-section-l .inner .title h1 {
		font-size: 200%;
	}
	.top-section-l .inner .title h2 {
		font-size: 110%;
	}
	.top-section-l .inner .title p {
		font-size: 110%;
	}
	
}

@media only screen and (max-width: 768px) {
	
	.top-image {
		margin-top: 53px;
	}
	.catch {
		
	}
	
	.top-section-l .inner .title h1,.top-section-m .inner .title h1 {
		font-size: 160%;
	}
	.top-section-l .inner .title h2,.top-section-m .inner .title h2 {
		font-size: 100%;
	}
	.top-section-l .inner .title p,.top-section-m .inner .title p {
		font-size: 100%;
		line-height: 160%;
	}
	
}

@media only screen and (max-width: 568px) {
	
	.top-section-l .photo {
		width: 100%;
		position: relative;
		float: none;
	}
	.top-section-l .inner {
		width: 100%;
		position: relative;
		float: none;
		background-color: #ee7601;
		padding: 5%;
	}
	.top-section-l .inner img {
		display: none;
	}
	.top-section-l .inner .title {
		width: 100%;
		position: relative;
		color: #FFF;
		text-align: center;
		top: 0;
		left: 0;
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
		margin: 0 auto;
	}
	.top-section-l:nth-of-type(2) {
		margin-top: 8%;
	}
	.top-section-l:nth-of-type(2) .photo {
		float: none;
	}
	.top-section-l:nth-of-type(2) .inner {
		float: none;
		background-color: #ee9801;
	}
	
	.top-section-m .photo {
		width: 100%;
		position: relative;
		float: none;
	}
	.top-section-m .inner {
		width: 100%;
		position: relative;
		float: none;
		background-color: #003175;
		padding: 5%;
	}
	.top-section-m .inner img {
		display: none;
	}
	.top-section-m .inner .title {
		width: 100%;
		position: relative;
		color: #FFF;
		text-align: center;
		top: 0;
		left: 0;
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
		margin: 0 auto;
	}
}
	
@media only screen and (max-width: 480px) {
	
	
}