@charset "utf-8";

/* CSS INFORMATION -====================================================
File name : top.css
Description :　トップページ
===================================================================== */

html {
	font-size: calc(10 / 980 * 100vw);
}

body {
	height: 100vh;
	max-width: 1120px;
	margin: auto;
	padding: calc(70 / 980 * 100%);
}

.top_wrap {
	background: url(../images/top/bg_wood.png) no-repeat center/cover;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-moz-flex-direction: column;
	-ms-flex-direction: column;
	-o-flex-direction: column;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	flex-direction: column;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	border-radius: 1em;
	height: 100%;
	padding: calc(400 / 980 * 100%) calc(80 / 980 * 100%) calc(50 / 980 * 100%);
}

.header_top h1 {
	width: calc(627 / 780 * 100%);
	margin: 0 auto;
}

.top {
	margin: calc(240 / 780 * 100%) 0;
}


.btn_list li {
	margin: 1em auto;
	text-align: center;
}

.btn_list li a {
	font-size: 3.5rem;
	padding: .8em 1em;
}

.btn_list li:nth-child(1) a {
	letter-spacing: .15em;
}

.btn_list li:nth-child(2) a {
	background: rgba(255, 255, 255, 0.5);
	color: #77a658 !important;
	border: .2em solid #77a658;
}

.btn_list li:nth-child(2) a::before {
	background: url(../images/common/icon_arrow2.png) no-repeat center/contain;
}

.footer_top p {
	text-align: center;
	font-size: 2.2rem;
	letter-spacing: .15em;
	color: #686360;
}

@media screen and (min-width: 500px) {
	.top_wrap {
		height: auto;
	}
}

@media screen and (min-width: 768px) {
	body {
		padding: 8vh 70px;
		height: auto;
	}

	.top_wrap {
		padding: calc(150 / 980 * 100vh) calc(20 / 980 * 100%) calc(50 / 980 * 100vh);
	}

	.header_top h1 {
		width: calc(500 / 880 * 100vh);
		max-width: 500px;
		min-width: 400px;
	}

	.top {
		margin: calc(100 / 880 * 100vh) 0;
	}

	.btn_list {
		display: -moz-flex;
		display: -ms-flex;
		display: -o-flex;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
	}

	.btn_list li {
		margin: 0 .5em;
	}

	.btn_list li a {
		font-size: 2.4rem;
		padding: .5em 2.8em .5em 2em;
	}

	.footer_top p {
		font-size: 1.8rem;
	}

}


@media screen and (min-width: 980px) {
	html {
		font-size: 10px;
	}

}