@charset "utf-8";

/* Base */

html {
	box-sizing: border-box;
	height: 100%;
}

body {
	height: 100%;
	font-family: 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'YuGothic', '游ゴシック', 'メイリオ', 'Meiryo', 'MS PGothic', 'MS Gothic', sans-serif;
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: 0.05em;
	color: #fff;
	background-color: #000;
}

.mincho {
	font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
}

h1,
h2,
h3,
h4,
h5,
strong {
	font-weight: normal;
}

h1 {
	font-size: 180%;
}

h2 {
	font-size: 150%;
}

h3 {
	font-size: 120%;
}

img {
	width: 100%;
	height: auto;
	max-height: 100%;
	vertical-align: bottom;
}


a.btn {
	display: block;
	max-width: 12em;
	margin: 1rem auto 2.5rem auto;
	padding: 0.35rem 0;
	background: #f4c01b;
	border-radius: 0.75rem;
	font-size: 125%;
	color: #000;
	text-align: center;
	text-decoration: none;
}

header {
	background: linear-gradient(to bottom, #000, #333);
}

header nav {
	display: flex;
	max-width: 800px;
	margin: auto;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
}

header h1 {
	width: 2.5rem;
	height: 2.5rem;
}

header h1 img {
	display: block;
}

header a.btn {
	margin: 0;
	padding: 0.15rem 1rem;
	border-radius: 1rem;
	font-size: 100%;
}

header .cont {
	position: relative;
	max-width: 800px;
	margin: auto;
	padding: 1em;
	box-sizing: border-box;
	z-index: 1;
}

header .title1 {
	max-width: 600px;
	margin: 2rem auto 1rem auto;
}

header .img1 {
	width: 70%;
	max-width: 560px;
	margin: 3rem auto 2rem auto;
}

header .cont::before,
main .cont1::before,
main .cont3::before {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	width: 100%;
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
	z-index: -1;
}

header .cont::before {
	top: 0;
	background-image: url(./img/bg1.png);
	aspect-ratio: 800 / 1057;
}

main .cont1::before {
	bottom: 0;
	background-image: url(./img/bg2.png);
	aspect-ratio: 800 / 750;
}

main .cont3::before {
	bottom: -3rem;
	background-image: url(./img/bg3.png);
	aspect-ratio: 800 / 1244;
}

main {
	background: linear-gradient(to bottom, #333 0%, #555 40%, #555 100%);
}

main .cont {
	max-width: 800px;
	margin: auto;
	padding-top: 1px;
	padding-bottom: 1px;
	box-sizing: border-box;
	z-index: 1;
}

main .cont1 {
	position: relative;
	padding-left: 1rem;
	padding-right: 1rem;
}

main .cont2 {
	position: relative;
	width: 100%;
	max-width: none;
	height: 85vw;
	max-height: 687px;
}

main .cont3 {
	position: relative;
	padding-left: 1rem;
	padding-right: 1rem;
	background: #545454;
}

main .title2 {
	margin-bottom: 2rem;
	color: #f6c735;
	text-align: center;
	font-style: italic;
}

main .img2 {
	width: 70%;
	max-width: 560px;
	margin: 2rem auto 1rem auto;
}

main .img3 {
	height: 100%;
}

main .img3 img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
} 

main .title3 {
	margin: 1rem auto 0 auto;
	color: #fff;
	text-align: center;
}

main .title4 {
	margin: 0.5rem auto 1rem auto;
	color: #b3b3b3;
	text-align: center;
	line-height: 1.25;
}

main .title5 {
	margin: 4rem auto 1rem auto;
	text-align: center;
	line-height: 1.25;
}

main .img4 {
	width: 70%;
	max-width: 560px;
	margin: 1rem auto 2rem auto;
}

footer {
	padding-bottom: 1.5rem;
	background: #545454;
	text-align: center;
	box-sizing: border-box;
}

footer .cont {
	max-width: 800px;
	margin: 0 auto;
}

@media all and (min-width: 481px){
	h1 {
		font-size: 250%;
	}

	h2 {
		font-size: 200%;
	}

	h3 {
		font-size: 150%;
	}

	header h1 {
		width: 5rem;
		height: 5rem;
	}

	main .cont1,
	main .cont3 {
		padding-left: 2rem;
		padding-right: 2rem;
	}

}