@charset "UTF-8";

/* --------------------------------------------------------------------------------------
	キービジュアル
--------------------------------------------------------------------------------------- */

.key-top {
	aspect-ratio: 16 / 9;
	background: url(../img/top/key-image.jpg) no-repeat center center;
	background-size: cover;
	height: 100%;
	max-height: 1080px;
	min-height: 880px;
	position: relative;
	width: 100%;
	z-index: 0;
}

.key-movie {
	height: 100%;
	left: 0;
	object-fit: cover;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: -1;
}

.key-top::before {
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.6) 40%, rgba(0, 0, 0, 0) 100%);
	content: '';
	display: block;
	height: 300px;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}

.key-head {
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin: auto;
	padding-top: 127px;
	text-align: center;
}

.key-head h3 {
	color: #fff;
	font-size: 32px;
	font-weight: var(--Regular);
	margin-top: 28px;
}

.key-news {
	bottom: 40px;
	color: #fff;
	overflow: hidden;
	position: absolute;
	right: 0;
	text-align: left;
	width: 29.333vw;
}

.key-news h2 {
	align-items: center;
	display: flex;
	gap: 10px;
}

.key-news h2 strong {
	font-size: 32px;
	font-weight: var(--Medium);
	line-height: 1;
}

.key-news h2 small {
	display: inline-block;
	line-height: 1;
	margin-top: 6px;
}

.key-news .news-swiper { margin-top: 16px; }

.key-news .swiper-slide { display: block; }

.key-news .swiper-slide time {
	border-bottom: 1px solid #fff;
	display: block;
	padding-bottom: 4px;
}

.key-news .swiper-slide p { max-width: 86%; }

.key-news .swiper-slide .head {
	font-size: 20px;
	margin-top: 21px;
}

.key-news .swiper-slide .text {
	-webkit-box-orient: vertical;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	margin-top: 16px;
	overflow: hidden;
	text-overflow: ellipsis;
}

.key-news .swiper-slide .more {
	font-size: 14px;
	margin-top: 16px;
}

@media (max-width: 900px) {

	.key-top {
		aspect-ratio: auto;
		height: auto;
		max-height: none;
		min-height: 158.778vw;
		padding-bottom: 4.494vw;
	}

	.key-movie {
		height: 101%;
		object-position: bottom;
	}

	.key-head {
		align-items: center;
		padding-top: 14.357vw;
	}

	.key-head h2 { max-width: 23.72vw; }

	.key-head h3 {
		font-size: 3.945vw;
		margin-top: 4.494vw;
	}

	.key-news {
		bottom: auto;
		margin-left: 6.242vw;
		margin-right: 6.242vw;
		margin-top: 3.496vw;
		position: relative;
		right: auto;
		width: auto;
	}

	.key-news h2 { gap: 1.998vw; }

	.key-news h2 strong { font-size: 4.494vw; }

	.key-news h2 small {
		font-size: 2.996vw;
		margin-top: .833vw;
	}

	.key-news .news-swiper { margin-top: 2.247vw; }

	.key-news .swiper-slide time {
		font-size: 2.996vw;
		padding-bottom: 1.748vw;
	}

	.key-news .swiper-slide .head {
		font-size: 3.745vw;
		margin-top: .999vw;
	}

	.key-news .swiper-slide .text,
	.key-news .swiper-slide .more {
		font-size: 2.996vw;
		margin-top: 1.498vw;
	}

	.key-news .swiper-slide p { max-width: 100%; }
}


/* --------------------------------------------------------------------------------------
	lead
--------------------------------------------------------------------------------------- */

.lead-wrap {
	background: url(../img/top/main-bg.jpg) no-repeat right bottom ;
	padding-bottom: 200px;
	padding-top: 108px;
}

@media (min-width: 1681px) {

	.lead-wrap { background-size: cover; }
}

.lead-award {
	background: url(../img/top/aword-head.jpg) no-repeat center top;
	min-height: 860px;
}

@media (min-width: 1681px) {
	.lead-award {
		background-size: cover;
		min-height: 50.333vw;
	}
}

.award-slider {
	margin-top: 64px;
	overflow: hidden;
}

.award-slider .swiper-container {
	left: 24px;
	max-width: 936px;
	overflow: visible;
	position: relative;
	width: 100%;
}

.award-slider .swiper-slide {
	align-items: flex-start;
	display: flex;
	flex-direction: row-reverse;
	justify-content: revert;
	position: relative;
	width: 448px;
}

@media (any-hover: hover) {

	.award-slider .swiper-slide:hover {
		text-decoration: none;
	}

}

.award-slider .swiper-slide .title {
	font-size: 22px;
	font-weight: 600;
	letter-spacing: 6px;
	line-height: 80%;
	margin-left: 10px;
	writing-mode: vertical-rl;
}

.award-slider .swiper-slide .photo { position: relative; }

.award-slider .swiper-slide .image {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	border-top-left-radius: 16px;
	height: 624px;
	overflow: hidden;
	width: 416px;
}

.award-slider .swiper-slide .icon-banner {
	bottom: 32px;
	position: absolute;
	right: 32px;
}

.lead-head {
	align-items: center;
	display: flex;
	flex-direction: row-reverse;
	gap: 100px;
	justify-content: space-between;
	margin-top: 216px;
}

.lead-head .lead-main {
	display: flex;
	flex-direction: row-reverse;
	gap: 40px;
	margin-right: 10.333vw;
	padding-bottom: 42px;
	position: relative;
	text-align: left;
}

.lead-head .lead-main h2 { min-width: 171px; }

.lead-head .lead-main .text {
	block-size: 100%;
	color: #fff;
	display: flex;
	flex-direction: column;
	font-feature-settings: "vpal" 1;
	gap: 8px;
	letter-spacing: 8px;
	line-break: strict;
	line-height: 2.4;
	margin-inline: auto;
	max-block-size: 80vh;
	overflow-wrap: anywhere;
	writing-mode: vertical-rl;
}

.lead-head .lead-main .text p { font-weight: var(--Regular); }

.lead-head .lead-main .icon-banner {
	bottom: 0;
	position: absolute;
	right: 35px;
}

.lead-head .image {
	max-height: 400px;
	overflow: hidden;
	width: 36.333vw;
}

.lead-wrap .english-text { margin-top: 72px; }

.lead-wrap .english-text h3 {
	font-size: 20px;
	font-weight: var(--SemiBold);
}

.lead-wrap .english-text p {
	line-height: 200%;
	margin-top: 26px;
}

@media (max-width: 900px) {

	.lead-wrap {
		background-image: url(../img/top/main-bg-sp.jpg);
		background-size: 100% auto;
		padding-bottom: 8.739vw;
		padding-top: 17.478vw;
	}

	.lead-award {
		background-size: cover;
		min-height: 110.333vw;
	}

	.award-slider { margin-top: 11.361vw; }

	.award-slider .swiper-container {
		left: 0;
		margin: auto;
		max-width: 57.428vw;
	}

	.award-slider .swiper-slide { width: 57.428vw; }

	.award-slider .swiper-slide .image {
		border-top-left-radius: 1.998vw;
		height: 77.903vw;
		width: 51.935vw;
	}

	.award-slider .swiper-slide .title {
		font-size: 3.646vw;
		margin-left: 2.248vw;
	}

	.award-slider .swiper-slide .icon-banner {
		bottom: 3.995vw;
		right: 3.995vw;
	}

	.lead-head {
		display: block;
		gap: 0;
		margin-top: 12.233vw;
	}

	.lead-head::after {
		clear: both;
		content: '';
		display: block;
	}

	.lead-head .lead-main {
		align-items: flex-end;
		flex-direction: column;
		gap: 8.739vw;
		margin-left: 6.242vw;
		margin-right: 6.242vw;
	}

	.lead-head .lead-main h2 {
		min-width: 0;
		width: 17.228vw;
	}

	.lead-head .lead-main .text {
		gap: 0.799vw;
		letter-spacing: 3px;
	}

	.lead-head .lead-main .icon-banner {
		bottom: -5.667vw;
		left: 50%;
		right: auto;
		transform: translateX(-50%);
	}

	.lead-head .image {
		float: right;
		margin-top: 19.333vw;
		max-width: 100%;
		width: 71.66vw;
	}

	.lead-wrap .english-text { margin-top: 13.733vw; }

	.lead-wrap .english-text h3 { font-size: 4.494vw; }

	.lead-wrap .english-text p {
		line-height: 180%;
		margin-top: 2.996vw;
	}

}

/* --------------------------------------------------------------------------------------
	main-image
--------------------------------------------------------------------------------------- */

.main-image { height: 400px; }

@media (max-width: 900px) {
	.main-image { height: 62.422vw; }
}

/* --------------------------------------------------------------------------------------
	other-content
--------------------------------------------------------------------------------------- */

.top-news .news-list { margin-top: 16px; }

.top-news .more {
	margin-top: 42px;
	text-align: right;
}

.white-texture:has(.banner-section) {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, #FFF 25%, #FFF 85%, rgba(255, 255, 255, 0.00) 100%),
		url(../img/common/white-bg.jpg) repeat-y center top / 100% auto,
		#FFF;
}

.banner-section.box,
.banner-section .box { width: min(100% - 60px, 1217px);}

.banner-section > section:nth-of-type(n+2) { margin-top: 110px; }

.banner-section .banner-area {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	justify-content: center;
	margin-top: 42px;
}

.banner-section .banner-area li img { max-height: 91.3px; }
.banner-section .banner-area .kankokeizai img { max-height: 61.777px; }

.banner-section .banner-area .forum {
	align-items: center;
	display: flex;
	gap: 24px;
}

.banner-section .banner-area .forum img { max-height: 72px; }

.banner-section .banner-area .forum span {
	font-family: var(--font-noto-sans);
	font-size: 24px;
	font-weight: var(--Bold);
}

@media (max-width: 900px) {

	.top-news .news-list { margin-top: 2.333vw; }

	.top-news .more {
		margin-top: 6.739vw;
		text-align: center;
	}

	.banner-section .banner-area {
		gap: 3.995vw;
		margin-top: 6.744vw;
	}

	.banner-section.box, .banner-section .box { width: min(100% - 12.484vw, 1217px); }

	.banner-section > section:nth-of-type(n+2) { margin-top: 9.988vw; }

	.banner-section .banner-area li img { max-height: 7.99vw; }
	.banner-section .banner-area .kankokeizai img { max-height: 5.406vw; }

	.banner-section .banner-area .forum { gap: 2.996vw; }

	.banner-section .banner-area .forum img { max-height: 6.301vw; }

	.banner-section .banner-area .forum span { font-size: 2.996vw; }
}

/* --------------------------------------------------------------------------------------
	howto
--------------------------------------------------------------------------------------- */

.howto .inner { text-align: center; }

.howto .text-section { margin-top: 28px; }

.howto .text-section .text {
	font-size: 20px;
	line-height: 180%;
}

.howto .text-section .more { margin-top: 38px; }

@media (max-width: 900px) {
	.howto .text-section { margin-top: 4.744vw; }

	.howto .text-section .text {
		font-size: 2.996vw;
		line-height: 200%;
	}

	.howto .text-section .more {
		margin-top: 6.739vw;
		text-align: center;
	}
}

/* --------------------------------------------------------------------------------------
	clause
--------------------------------------------------------------------------------------- */

.clause-section {
	display: grid;
	gap: 32px;
	grid-template-columns: repeat(2, minmax(0, max-content));
	margin-inline: auto;
	margin-top: 42px;
	width: fit-content;
}

.clause-section li .jp-text,
.clause-section li .en-text { display: block; }

.clause-section li .jp-text {
	font-size: 115%;
	font-weight: var(--SemiBold);
}

.clause-section li .en-text {
	color: rgba(255, 255, 255, 0.80);
	font-size: 90%;
}

@media (max-width: 900px) {
	.clause-section {
		gap: 5.333vw;
		grid-template-columns: auto;
		margin-top: 8.744vw;
	}

	.clause-section li .jp-text { font-size: 100%; }
}