@charset "utf-8";

.l-extra {
	height: 70vh;
}
.l-extra-image.default {
	background-image: url("../../img/2-7-B.jpg");
	background-image: image-set(url("../../img/2-7-B.jpg") 1x, url("../../img/2-7-B@2x.jpg") 2x);
	background-image: -webkit-image-set(url("../../img/2-7-B.jpg") 1x, url("../../img/2-7-B@2x.jpg") 2x);
}
.l-extra-image.c2 {
	background-image: url("../../img/2-2.jpg");
	background-image: image-set(url("../../img/2-2.jpg") 1x, url("../../img/2-2.jpg") 2x);
	background-image: -webkit-image-set(url("../../img/2-2.jpg") 1x, url("../../img/2-2.jpg") 2x);
}

/*
.img_2-9 {
	min-height: 50vh;
	background-image: url("../../img/2-9.jpg");
	background-image: image-set(url("../../img/2-9.jpg") 1x, url("../../img/2-9.jpg") 2x);
	background-image: -webkit-image-set(url("../../img/2-9.jpg") 1x, url("../../img/2-9.jpg") 2x);
}
.img_2-9::before {
	padding-top: calc(((900 / 1200) * 100%));
}
*/

.img_2-2 {
	width: 90%;
	margin: 5em auto;
	background-image: url("../../img/2-2.jpg");
	background-image: image-set(url("../../img/2-2.jpg") 1x, url("../../img/2-2.jpg") 2x);
	background-image: -webkit-image-set(url("../../img/2-2.jpg") 1x, url("../../img/2-2.jpg") 2x);
}

.img_2-3 {
	width: 90%;
	margin: 6em auto;
	background-image: url("../../img/2-3.jpg");
	background-image: image-set(url("../../img/2-3.jpg") 1x, url("../../img/2-3.jpg") 2x);
	background-image: -webkit-image-set(url("../../img/2-3.jpg") 1x, url("../../img/2-3.jpg") 2x);
}

.img_2-4 {
	width: 90%;
	margin: 6em auto;
	background-image: url("../../img/2-4.jpg");
	background-image: image-set(url("../../img/2-4.jpg") 1x, url("../../img/2-4.jpg") 2x);
	background-image: -webkit-image-set(url("../../img/2-4.jpg") 1x, url("../../img/2-4.jpg") 2x);
}

.l-main h1 {
	margin-top: 2rem;
}
.content h2 {
	margin: 3em 0 1.5em;
	font-size: 6.5vw;
	font-weight: 700;
	line-height: 1.8;
	letter-spacing: 0.1em;
}
.content h3 {
	margin: 5em 0 1.5em;
	font-size: 22px;
	letter-spacing: 0.1em;
}
.content p {
	font-size: 16px;
	line-height: 2;
	font-feature-settings: "palt";
	letter-spacing: 0.1em;
}
.content p.lead {
	font-size: 17px;
}
.content p + p {
	margin-top: 1em;
}
.content p + .image {
	margin-top: 5em;
	margin-bottom: 5em;
}

.intro p {
	font-size: 16px;
	line-height: 2;
	font-feature-settings: "palt";
	letter-spacing: 0.15em;
}
.intro p + p {
	margin-top: 2em;
}

.story {
	margin-top: 10rem;
}

@media screen and (min-width: 768px) {

	.l-extra {
		height: 100vh;
	}

	.l-main h1 {
		margin-top: 6rem;
	}
	.content h2 {
		font-size: 30px;
	}

	.intro {
		margin-top: 3rem;
	}
	.intro p {
		font-size: 17px;
	}

	.story {
		margin-top: 14rem;
	}

}