@charset "UTF-8";

html {
	overflow-y: hidden;
}

.slide__section {
	position: relative;
	height: calc(100vh - 120px);
	height: calc(100dvh - 120px);
}
.slide__section.slide__section--main {
	height: 100vh;
	height: 100dvh;
}
.slide__sp {
	display: none;
}
.slide__bg {
	width: 100%;
	height: 100%;
}
.slide__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.slide__title {
	position: absolute;
	top: calc(50% - 7vw);
	left: 0;
	right: 0;
	width: 50.4%;
	aspect-ratio: 776 / 306;
	margin: 0 auto;
	text-align: center;
	color: #fff;
}
.slide__title h1 {
	width: 85.9%;
	margin: 7.6% auto 3%;
}
.slide__title p {
	font-size: 1.17vw;
	line-height: 1.8;
}
.slide__scroll {
	position: relative;
	margin-top: 2%;
	padding-top: 3em;
	font-size: 0.78vw;
}
.slide__scroll::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	width: 0;
	margin: 0 auto;
	border-left: 1px solid #fff;
	animation: scrollLine 1.5s infinite;
}
@keyframes scrollLine {
	0% { height: 0; }
	70% { height: 2.5em; }
	100% { height: 2.5em; }
}
.slide__inner {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	aspect-ratio: 1540 / 700;
	max-width: 100%;
	max-height: 100%;
}
.slide__inner h2 {
	margin: 2.3% 5.2% 0;
}
.slide__text {
	margin: 1.17% 11.7% 0;
}
.slide__img {
	margin: 1.3% 15.6% 0;
}
.slide__section--04 .slide__img {
	margin: 1.3% 27.9% 0;
}
.slide__section--05 .slide__img {
	margin: 1.3% 11.7% 0;
}
.slide__btn {
	margin-top: 2.3%;
	display: flex;
	justify-content: center;
	gap: 0 2.6%;
}
.slide__btn li {
	width: 24.7%;
	background-color: #fff;
	border-radius: 5px;
}
.slide__btn a {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	aspect-ratio: 380 / 52;
	background: url(/assets/images/common/mod_icon_link_02.svg) no-repeat 95% 50%;
	background-size: 5.3% auto;
	text-align: center;
	font-size: 1.95vh;
	font-size: 1.95dvh;
	font-weight: 700;
	line-height: 1.3;
	color: #fff !important;
	border-radius: 5px;
	box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.20);
	transition: opacity 0.4s;
}
.slide__section--01 .slide__btn a {
	background-color: #5a96c2;
}
.slide__section--02 .slide__btn a {
	background-color: #e58c96;
}
.slide__section--03 .slide__btn a {
	background-color: #6cb899;
}
.slide__section--04 .slide__btn a {
	background-color: #83b8cb;
}
.slide__section--05 .slide__btn a {
	background-color: #8593d1;
}
.slide__btn a:hover {
	opacity: 0.7;
}
.slide__control {
	position: fixed;
	top: 120px;
	right: 5.2%;
	bottom: 0;
	z-index: 100;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	transition: opacity 0.3s;
}
.slide__control.is-hide {
	opacity: 0;
	pointer-events: none;
}
.slide__control ul {
	padding: 4px 2px;
}
.slide__control li {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background-color: #959595;
}
.slide__control li.is_cur {
	background-color: #2e6da4;
}
.slide__control li + li {
	margin-top: 10px;
}
.slide__prevBtn {
	width: 14px;
	height: 14px;
	border: 2px solid #2e6da4;
	border-left-color: transparent;
	border-bottom-color: transparent;
	transform: rotate(-45deg);
	cursor: pointer;
}
.slide__nextBtn {
	width: 14px;
	height: 14px;
	border: 2px solid #2e6da4;
	border-top-color: transparent;
	border-left-color: transparent;
	transform: rotate(45deg);
	cursor: pointer;
}
@media only screen and (max-width: 1400px) {
	.slide__section {
		height: calc(100vh - 7.17vw - 20px);
		height: calc(100dvh - 7.17vw - 20px);
	}
}
@media only screen and (max-width: 767px) {
	.slide__section {
		height: calc(100vh - 70px);
		height: calc(100dvh - 70px);
	}
}
@media only screen and (max-aspect-ratio: 1540/820) {
	.slide__title {
		top: 36.8%;
		width: auto;
		max-width: 100%;
		height: 37.3%;
	}
	.slide__title p {
		font-size: 2.2vh;
		font-size: 2.2dvh;
	}
	.slide__scroll {
		font-size: 1.46vh;
		font-size: 1.46dvh;
	}
	.slide__btn a {
		font-size: 1.04vw;
	}
}
@media only screen and (max-aspect-ratio: 1) {
	.slide__pc {
		display: none;
	}
	.slide__sp {
		display: block;
	}
	.slide__section:not(.slide__section--main) {
		margin-top: 15vw;
	}
	.slide__section:not(.slide__section--main)::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 5vw;
		background: linear-gradient(180deg, rgba(250,250,250,1) 0%, rgba(250,250,250,0) 100%);
	}
	.slide__section:not(.slide__section--main)::after {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 5vw;
		background: linear-gradient(0deg, rgba(250,250,250,1) 0%, rgba(250,250,250,0) 100%);
	}
	.slide__title {
		top: calc(50% - 26.9vw);
		width: 100%;
		height: auto;
		aspect-ratio: 390 / 205;
	}
	.slide__title h1 {
		width: 54.9%;
		margin: 5.1% auto 2%;
	}
	.slide__title p {
		font-size: 3.08vw;
		line-height: 1.6;
	}
	.slide__scroll {
		margin-top: 3%;
		font-size: 2.82vw;
	}
	.slide__inner {
		aspect-ratio: 390 / 700;
	}
	.slide__inner h2 {
		margin: 7.7% 0 0;
	}
	.slide__text {
		margin: 5.1% 3.9% 0;
	}
	.slide__img {
		margin: 5.1% 8.5% 0 3.6%;
	}
	.slide__section--02 .slide__img {
		margin: 5.1% 11% 0 6.2%;
	}
	.slide__section--03 .slide__img {
		margin: 5.1% 11% 0 6.2%;
	}
	.slide__section--04 .slide__img {
		margin: 7.2% 12.8% 0 10.3%;
	}
	.slide__section--05 .slide__img {
		margin: 7.7% 10.8% 0 6.2%;
	}
	.slide__btn {
		margin: 7.4% auto 0;
		width: 89.7%;
		flex-direction: column;
		gap: 2.5vw;
	}
	.slide__btn li {
		width: 100%;
	}
	.slide__btn a {
		aspect-ratio: 350 / 36;
		font-size: 3.59vw;
	}
}

.more {
	padding: 70px 20px;
}
.more h2 {
	margin-bottom: 60px;
	text-align: center;
	font-size: 2.4rem;
	font-weight: 500;
}
.more h2 strong {
	font-size: 3.2rem;
	font-weight: bold;
}
.more .c-buttonGroup {
	margin-bottom: 0;
}
.more .c-buttonGroup__items {
	justify-content: center !important;
}
.more .c-buttonGroup__item {
	max-width: 310px;
}
@media only screen and (max-width: 767px) {
	.more {
		padding: 60px 40px 80px;
	}
	.more h2 {
		margin-bottom: 30px;
		font-size: 1.4rem;
	}
	.more h2 strong {
		font-size: 2rem;
	}
}
