@charset "UTF-8";

#mainvisual {
	background: none;
	width: 100%;
	height: calc(100vh - 100px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: relative;
	overflow: hidden;
}

#mainvisual::before {
	background-color: #33333380;
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
}

#mainvisual::after {
	color: #ffffff;
	background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 12 60"><path fill="%23ffffff" d="M10.801,46.078 L3.172,59.292 L3.172,60.078 L2.718,60.078 L2.666,60.169 L2.509,60.078 L1.172,60.078 L1.172,59.306 L0.934,59.169 L1.172,58.756 L1.172,46.078 L1.172,44.078 L1.172,0.078 L3.172,0.078 L3.172,44.078 L11.172,44.078 L11.172,46.078 L10.801,46.078 ZM3.172,55.292 L8.492,46.078 L3.172,46.078 L3.172,55.292 Z" /></svg>') no-repeat bottom center;
	background-size: auto 60px;
	content: "Scroll";
	position: absolute;
	bottom: 0;
	right: 80px;
	font-size: 18px;
	font-family: "Noto Serif JP", serif;;
	text-align: center;
	padding-bottom: 65px;
	z-index: 3;
}

#mainvisual .mainvisual-copy {
	color: #ffffff;
	font-size: 60px;
	font-family: "Noto Serif JP", serif;;
	font-weight: 500;
	font-feature-settings: "palt";
	text-align: center;
	position: relative;
	z-index: 3;
}

#mainvisual .mainvisual-video {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	overflow: hidden;
	z-index: 1;
}

#mainvisual .mainvisual-video video {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	object-fit: cover;
}

@media screen and (min-width:767px) and (max-width:1079px) {
	#mainvisual {
		height: calc(100vh - 60px);
	}

	#mainvisual .mainvisual-copy {
		font-size: calc(60 / 1079 * 100vw);
	}

}

@media screen and (max-width:767px) {
	#mainvisual {
		height: calc(100vh - 60px);
		min-height: calc(80vw - 60px);
	}

	#mainvisual::after {
		right: 15px;
	}

	#mainvisual .mainvisual-copy {
		font-size: calc(38 / 375 * 100vw);
	}

}

@media screen and (max-width:430px) {
	#mainvisual {
		height: calc(100vh - 60 / 375 * 100vw);
		min-height: calc(80vw - 60 / 375 * 100vw);
	}

	#mainvisual::after {
		background-size: auto calc(60 / 375 * 100vw);
		right: calc(15 / 375 * 100vw);
		font-size: calc(18 / 375 * 100vw);
		padding-bottom: calc(65 / 375 * 100vw);
	}
}

section {
	border-top: 2px solid #4c94b5;
}

@media screen and (max-width:430px) {
	section {
		border-top-width: calc(2 / 375 * 100vw);
	}
}

#outline {
	padding-bottom: 0;
}

#outline .outline-item {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 40px;
}

#outline .outline-item .outline-item-image {
	max-width: 400px;
	aspect-ratio: 400 / 430;
	overflow: hidden;
}

#outline .outline-item .outline-item-image img {
	width: 100%;
}

#outline .outline-item .outline-item-body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 20px;
}

#outline .town-images {
	display: flex;
	margin: 60px -20px 0;
}

#outline .town-images .town-image {
	width: calc(100% / 4);
	aspect-ratio: 400 / 300;
	position: relative;
	overflow: hidden;
}

#outline .town-images .town-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

@media screen and (max-width:767px) {
	#outline {
		padding-bottom: 0;
	}

	#outline .outline-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 30px;
	}

	#outline .outline-item .outline-item-image {
		max-width: 400px;
	}

	#outline .outline-item .outline-item-body {
		gap: 20px;
	}

	#outline .town-images {
		flex-wrap: wrap;
		margin: 40px -15px 0;
	}

	#outline .town-images .town-image {
		width: calc(100% / 2);
	}
}

@media screen and (max-width:430px) {
	#outline .outline-item {
		gap: calc(30 / 375 * 100vw);
	}

	#outline .outline-item .outline-item-image {
		max-width: calc(400 / 375 * 100vw);
	}

	#outline .outline-item .outline-item-body {
		gap: calc(20 / 375 * 100vw);
	}

	#outline .town-images {
		margin: calc(40 / 375 * 100vw) calc(-15 / 375 * 100vw) 0;
	}
}

#about .about-lead {
	text-align: center;
}

#about .about-note {
	color: #666666;
	font-size: 16px;
	text-align: center;
	margin-top: 20px;
}

#about .about-mission {
	background-color: #ffffff;
	border: 4px solid #ababab;
	padding: 40px 20px;
	margin: 40px 0;
}

#about .about-mission-text {
	font-size: 36px;
	font-family: "Noto Serif JP", serif;;
	font-weight: 700;
	text-align: center;
}

#about .about-mission-text .marker {
	position: relative;
	z-index: 1;
}

#about .about-mission-text .marker::after {
	background: linear-gradient(to bottom, #f3d62e 0%, #ffffff 100%);
	content: "";
	position: absolute;
	bottom: -5px;
	left: -10px;
	right: -10px;
	width: calc(100% + 20px);
	height: 20px;
	z-index: -1;
}

#about .about-mission-sub-text {
	font-size: 28px;
	font-family: "Noto Serif JP", serif;;
	font-weight: 700;
	text-align: center;
	margin-bottom: 20px;
}

#about .about-mission-elements {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: 40px;
	margin-top: 40px;
}

#about .about-mission-elements > .about-mission-element {
	width: fit-content;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

#about .about-mission-elements > .about-mission-element .about-mission-element-icon {
	height: 120px;
}

#about .about-mission-elements > .about-mission-element .about-mission-element-icon img {
	width: auto;
	height: 100%;
}

#about .about-mission-elements > .about-mission-element .about-mission-element-text {
	font-size: 20px;
	font-weight: 700;
	text-align: center;
}

@media screen and (max-width:767px) {
	#about .about-lead {
		text-align: left;
	}

	#about .about-note {
		font-size: 14px;
		text-align: left;
		margin-top: 20px;
	}

	#about .about-mission {
		padding: 30px 10px;
		margin: 30px 0;
	}

	#about .about-mission-text {
		font-size: 28px;
	}

	#about .about-mission-text .marker::after {
		bottom: -5px;
		left: -5px;
		right: -5px;
		width: calc(100% + 10px);
		height: 20px;
	}

	#about .about-mission-sub-text {
		font-size: 24px;
		margin-bottom: 10px;
	}

	#about .about-mission-elements {
		flex-wrap: wrap;
		gap: 20px 40px;
		margin-top: 40px;
	}

	#about .about-mission-elements > .about-mission-element {
		width: fit-content;
		gap: 10px;
	}

	#about .about-mission-elements > .about-mission-element .about-mission-element-icon {
		height: 80px;
	}

	#about .about-mission-elements > .about-mission-element .about-mission-element-text {
		font-size: 18px;
	}
}

@media screen and (max-width:430px) {
	#about .about-note {
		font-size: calc(14 / 375 * 100vw);
		margin-top: calc(20 / 375 * 100vw);
	}

	#about .about-mission {
		padding: calc(30 / 375 * 100vw) calc(10 / 375 * 100vw);
		margin: calc(30 / 375 * 100vw) 0;
	}

	#about .about-mission-text {
		font-size: calc(28 / 375 * 100vw);
	}

	#about .about-mission-text .marker::after {
		bottom: calc(-5 / 375 * 100vw);
		left: calc(-5 / 375 * 100vw);
		right: calc(-5 / 375 * 100vw);
		width: calc(100% + 10 / 375 * 100vw);
		height: calc(20 / 375 * 100vw);
	}

	#about .about-mission-sub-text {
		font-size: calc(24 / 375 * 100vw);
		margin-bottom: calc(10 / 375 * 100vw);
	}

	#about .about-mission-elements {
		gap: calc(20 / 375 * 100vw) calc(40 / 375 * 100vw);
		margin-top: calc(40 / 375 * 100vw);
	}

	#about .about-mission-elements > .about-mission-element {
		gap: calc(10 / 375 * 100vw);
	}

	#about .about-mission-elements > .about-mission-element .about-mission-element-icon {
		height: calc(80 / 375 * 100vw);
	}

	#about .about-mission-elements > .about-mission-element .about-mission-element-text {
		font-size: calc(18 / 375 * 100vw);
	}
}

@media screen and (max-width:767px) {
	#stories .section-button {
		width: 100%;
	}

	#stories .section-button > a {
		padding: 19px 15px;
	}
}

@media screen and (max-width:430px) {
	#stories .section-button > a {
		padding: calc(19 / 375 * 100vw) calc(15 / 375 * 100vw);
	}
}