/* CSS Document */

#pagePath{
	display: none;
}

#main{
	margin-bottom: clamp(56px, calc(112 / 1200 * 100dvw), 112px);
}

#hero{
	position: relative;
	display: grid;
	.slick-dots{
		position: relative;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		grid-gap: clamp(16px, calc(32 / 1200 * 100dvw), 32px);
		z-index: 1;
		& li{
			aspect-ratio: 1;
			width: 9px;
			background: currentColor;
			border-radius: 100%;
			overflow: hidden;
			&.slick-active{
				outline: 1px solid currentColor;
				outline-offset: 4px;
			}
		}
		& button{
			visibility: hidden;
		}
	}
	.slick-arrow{
		all: unset;
		box-sizing: border-box;
		cursor: pointer;
		position: relative;
		display: grid;
		align-items: center;
		column-gap: 4px;
		color: inherit;
		font-weight: 500;
		font-size: 12px;
		text-transform: uppercase;
		z-index: 1;
		&:before{
			all: unset;
			box-sizing: border-box;
			content: "";
			aspect-ratio: 1;
			width: 10px;
			background: currentColor;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><polygon points="2 9 2 1 8 5 2 9"/></svg>') no-repeat center / contain;
		}
		&.slick-prev{
			grid-template-columns: auto 1fr;
			&:before{
				transform: scale(-1, 1);
			}
		}
		&.slick-next{
			grid-template-columns: 1fr auto;
			&:before{
				order: 1;
			}
		}
	}
	@media (max-width: 991.98px) {
		#heroSlide{
			grid-column: 1;
			grid-row: 1;
		}
	}
	@media (max-width: 991.98px) {
		.slick-slider{
			grid-template-columns: clamp(24px, calc(32 / 1200 * 100dvw), 32px) auto 1fr auto clamp(24px, calc(32 / 1200 * 100dvw), 32px);
			grid-row-gap: clamp(16px, calc(24 / 768 * 100dvw), 24px);
			padding-bottom: clamp(16px, calc(24 / 768 * 100dvw), 24px);
			border-bottom: 1px solid currentColor;
			.slick-list{
				grid-column: 1 / 6;
			}
		}
	}
	@media (max-width: 575.98px) {
		.slick-slider{
			.slick-dots{
				grid-column: 2 / 5;
				grid-row: 2;
			}
			.slick-arrow{
				grid-row: 3;
			}
			.slick-prev{
				grid-column: 2;
			}
			.slick-next{
				grid-column: 4;
			}
		}
	}
	@media (min-width: 576px) and (max-width: 991.98px) {
		.slick-slider{
			.slick-dots{
				grid-column: 3;
				grid-row: 2;
			}
			.slick-arrow{
				grid-row: 2;
			}
			.slick-prev{
				grid-column: 2;
			}
			.slick-next{
				grid-column: 4;
			}
		}
	}
	@media (min-width: 992px) {
		#heroSlide{
			overflow: hidden;
		}
		.slick-slider{
			grid-template-columns: clamp(48px, calc(72 / 1400 * 100dvw), 72px) 1fr clamp(48px, calc(72 / 1400 * 100dvw), 72px);
			grid-row-gap: 32px;
			&:after{
				content: "";
				grid-row: 3;
				grid-column: 2;
				margin-bottom: 48px;
				border-bottom: 1px solid #fff;
				z-index: 1;
				pointer-events: none;
			}
			.slick-list{
				grid-column: 1 / 4;
				grid-row: 1 / 4;
			}
			.slick-dots{
				grid-column: 2;
				grid-row: 2;
				color: #fff;
			}
			.slick-arrow{
				grid-row: 3;
				grid-column: 2;
				margin-bottom: 56px;
				color: #fff;
			}
			.slick-next{
				justify-self: end;
			}
		}
	}
}

#heroSlide{
	display: grid;
	&:not(.slick-initialized){
		& dl{
			grid-column: 1;
			grid-row: 1;
			&:nth-child(n+2){
				visibility: hidden;
			}
		}
	}
	& dl{
		position: relative;
		display: grid;
		&:before{
			content: "";
			grid-column: 1;
			grid-row: 1;
			align-self: end;
			height: clamp(200px, calc(280 / 1200 * 100dvw), 280px);
			background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
			z-index: 1;
		}
	}
	& dt{
		grid-column: 1;
		grid-row: 1;
		align-self: end;
		padding: 1em;
		color: #fff;
		font-weight: 500;
		font-size: clamp(22px, calc(28 / 768 * 100dvw), 28px);
		letter-spacing: 0.1em;
		text-align: center;
		z-index: 1;
		@media (min-width: 992px) {
			padding-bottom: 144px;
		}
	}
	& dd{
		display: contents;
		& img{
			grid-column: 1;
			grid-row: 1;
			width: 100%;
			height: clamp(560px, calc(752 / 1200 * 100dvw), 752px);
			object-fit: cover;
		}
		& a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			font-size: 0;
		}
	}
}

#intro{
	position: relative;
	display: grid;
	grid-template-columns: var(--wrap);
	justify-content: center;
	padding: clamp(32px, calc(64 / 1200 * 100dvw), 64px) 0 clamp(80px, calc(112 / 1200 * 100dvw), 112px) 0;
	background: #172970;
	&:before{
		content: "";
		position: absolute;
		left: 50%;
		bottom: 0;
		width: min(var(--wrap-fit), 1400px);
		height: clamp(80px, calc(140 / 1200 * 100dvw), 140px);
		background: url("/images/ml.recommendPict.svg") no-repeat center right / contain;
		transform: translate(-50%, 30%);
	}
	& h2{
		color: #fff;
		font-weight: 700;
		font-size: clamp(18px, calc(40 / 768 * 100dvw), 40px);
		letter-spacing: 0.1em;
	}
	& h2+div{
		display: grid;
		grid-row-gap: 2em;
		margin-top: clamp(24px, calc(32 / 1200 * 100dvw), 32px);
		color: #fff;
		font-weight: 500;
		font-size: clamp(16px, calc(20 / 768 * 100dvw), 20px);
	}
	& figure{
		position: relative;
		display: grid;
		align-content: center;
		aspect-ratio: 5 / 4;
		color: #fff;
		text-align: center;
		&:before{
			content: "";
			position: absolute;
			top: -24px;
			left: 0;
			aspect-ratio: 33 / 25;
			background: url("/images/ml.introPict.svg") no-repeat center / contain;
		}
	}
	#introLink{
		margin-top: clamp(32px, calc(56 / 768 * 100dvw), 56px);
	}
	@media (max-width: 991.98px) {
		& figure{
			margin-top: clamp(48px, calc(64 / 768 * 100dvw), 64px);
			&:before{
				width: 30%;
			}
		}
	}
	@media (min-width: 992px) {
		& h2+div{
			grid-column: 1;
			grid-row: 2;
		}
		& figure{
			grid-column: 1;
			grid-row: 2;
			justify-self: end;
			width: clamp(400px, calc(555 / 1200 * 100dvw), 555px);
			&:before{
				top: -40px;
				left: -32px;
				width: clamp(120px, calc(180 / 1200 * 100dvw), 180px);
			}
		}
	}
}

#introLink{
	display: grid;
	grid-template-columns: min(100%, clamp(480px, calc(560 / 1200 * 100dvw), 560px));
	justify-content: center;
	& a{
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		column-gap: 0.5em;
		min-height: 48px;
		padding: 8px 24px;
		background: var(--color-theme);
		border-radius: 24px;
		color: inherit;
		font-weight: 700;
		font-size: 14px;
		letter-spacing: 0.05em;
		text-align: center;
		&:after{
			content: "";
			aspect-ratio: 1;
			width: 10px;
			background: currentColor;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round;"><polyline points="7 2.5 9.5 5 7 7.5"/><line x1=".5" y1="5" x2="9.5" y2="5"/></svg>') no-repeat center / contain;
		}
		&:hover{
			background: #fff;
		}
	}
}

#recommend{
	display: grid;
	grid-template-columns: var(--wrap);
	justify-content: center;
	margin-top: clamp(48px, calc(96 / 1200 * 100dvw), 96px);
	overflow: hidden;
	& h2{
		position: relative;
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		grid-gap: 0.5em 1em;
		padding-bottom: 0.5em;
		font: 600 clamp(24px, calc(64 / 768 * 100dvw), 64px) sofia-pro, sans-serif;
		&:after{
			content: "";
			position: absolute;
			right: 0;
			bottom: 0;
			width: 100dvw;
			border-bottom: 1px dashed currentColor;
		}
	}
	.slick-list{
		margin-inline: calc(0px - clamp(8px, calc(16 / 768 * 100dvw), 16px));
		overflow: visible;
	}
	.slick-slide{
		margin: 0 clamp(8px, calc(16 / 768 * 100dvw), 16px);
	}
	@media (max-width: 1199.98px) {
		.slick-slide{
			width: min(70dvw, 360px);
		}
	}
	@media (max-width: 991.98px) {
		#recommendList{
			margin-top: clamp(32px, calc(48 / 1200 * 100dvw), 48px);
		}
		.slick-slider{
			display: grid;
			grid-template-columns: 0 1fr 0;
			align-items: center;
			&:before{
				content: "";
				grid-column: 2;
				grid-row: 1;
				aspect-ratio: 3 / 2;
				width: min(70dvw, 360px);
			}
		}
		.slick-list{
			grid-column: 2;
			grid-row: 1 / 3;
		}
		.slick-arrow{
			justify-self: center;
		}
	}
	@media (min-width: 992px) {
		& h2{
			grid-column: 1;
			grid-row: 1;
			padding-right: clamp(102px, calc(120 / 768 * 100dvw), 120px);
		}
		.slick-slider{
			display: contents;
		}
		.slick-list{
			margin-top: clamp(32px, calc(48 / 1200 * 100dvw), 48px);
		}
		.slick-arrow{
			grid-column: 1;
			grid-row: 1;
			align-self: center;
			justify-self: end;
			margin-bottom: 8px;
		}
		.slick-prev{
			transform: translateX(-125%);
		}
	}
}

#recommendList{
	display: grid;
	&:not(.slick-initialized){
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 264px), 1fr));
		grid-gap: clamp(24px, calc(32 / 768 * 100dvw), 32px);
	}
	& section{
		position: relative;
		display: grid;
		align-content: start;
		grid-row-gap: 8px;
		&:not(:has(img)):before{
			content: "";
			aspect-ratio: 3 / 2;
			border-radius: 16px;
			background: var(--dummy);
		}
		&:hover{
			& h3{
				&:before{
					background: #172970;
				}
				&:after{
					background: #fff;
				}
			}
		}
	}
	& h3{
		display: grid;
		grid-template-columns: 1fr auto;
		column-gap: 8px;
		order: 1;
		font-weight: 700;
		font-size: clamp(15px, calc(18 / 768 * 100dvw), 18px);
		letter-spacing: 0.025em;
		&:before,
		&:after{
			content: "";
			grid-column: 2;
			grid-row: 1;
			align-self: start;
			aspect-ratio: 1;
			width: 40px;
			transition: all 0.2s ease-out;
		}
		&:before{
			background: var(--color-theme);
			border-radius: 100%;
		}
		&:after{
			content: "";
			background: currentColor;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round;"><polyline points="7 2.5 9.5 5 7 7.5"/><line x1=".5" y1="5" x2="9.5" y2="5"/></svg>') no-repeat center / 10px;
		}
	}
	& h3+div{
		display: contents;
		& a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			font-size: 0;
		}
	}
	& figure{
		& img{
			aspect-ratio: 3 / 2;
			object-fit: cover;
			border-radius: 16px;
		}
	}
}

#news{
	position: relative;
	width: var(--wrap);
	margin: clamp(120px, calc(160 / 1200 * 100dvw), 160px) auto 0 auto;
	padding: clamp(96px, calc(120 / 1200 * 100dvw), 120px) clamp(24px, calc(96 / 1200 * 100dvw), 96px);
	background: #172970;
	border-radius: 16px;
	&:before{
		content: "";
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: clamp(120px, calc(190 / 1200 * 100dvw), 190px);
		background: url("/images/ml.newsPict.svg") no-repeat clamp(24px, calc(48 / 1200 * 100dvw), 48px) center / contain;
		transform: translate(0, -50%);
		pointer-events: none;
	}
	& h2{
		color: #fff;
		font: 600 clamp(24px, calc(56 / 768 * 100dvw), 56px) sofia-pro, sans-serif;
	}
	@media (max-width: 991.98px) {
		& h2{
			text-align: center;
		}
		#newsLink{
			margin-top: clamp(24px, calc(40 / 1200 * 100dvw), 40px);
		}
	}
	@media (min-width: 992px) {
		display: grid;
		grid-template-columns: auto clamp(480px, calc(560 / 1200 * 100dvw), 560px);
		align-items: center;
		column-gap: clamp(24px, calc(40 / 1200 * 100dvw), 40px);
	}
}

#newsLink{
	& a{
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		column-gap: 0.5em;
		min-height: 48px;
		padding: 8px 24px;
		background: var(--color-theme);
		border-radius: 24px;
		color: inherit;
		font-weight: 700;
		font-size: 14px;
		letter-spacing: 0.05em;
		text-align: center;
		&:after{
			content: "";
			aspect-ratio: 1;
			width: 10px;
			background: currentColor;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round;"><polyline points="7 2.5 9.5 5 7 7.5"/><line x1=".5" y1="5" x2="9.5" y2="5"/></svg>') no-repeat center / contain;
		}
		&:hover{
			background: #fff;
		}
	}
}

#link{
	display: grid;
	grid-template-columns: var(--wrap);
	justify-content: center;
	margin-top: clamp(48px, calc(80 / 1200 * 100dvw), 80px);
	& ul{
		display: grid;
		grid-gap: clamp(24px, calc(64 / 1200 * 100dvw), 64px) clamp(32px, calc(96 / 1200 * 100dvw), 96px);
		padding: clamp(24px, calc(64 / 1200 * 100dvw), 64px);
		border: 10px solid #f7f4be;
		border-radius: 16px;
	}
	& a{
		display: block;
	}
	& img{
		width: 100%;
		height: auto;
	}
	@media (min-width: 768px) {
		& ul:has(li:nth-child(2)){
			grid-template-columns: repeat(2, auto);
			align-items: center;
		}
		& li:only-child{
			width: 50%;
			margin-inline: auto;
		}
	}
}

#useful{
	display: grid;
	grid-template-columns: min(var(--wrap-fit), 1200px);
	justify-content: center;
	margin-top: clamp(48px, calc(96 / 1200 * 100dvw), 96px);
	overflow: hidden;
	& h2{
		position: relative;
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		grid-gap: 0.5em 1em;
		padding-bottom: 0.5em;
		font: 600 clamp(24px, calc(64 / 768 * 100dvw), 64px) sofia-pro, sans-serif;
		&:after{
			content: "";
			position: absolute;
			right: 0;
			bottom: 0;
			width: 100dvw;
			border-bottom: 1px dashed currentColor;
		}
	}
	#usefulList{
		margin-top: clamp(24px, calc(40 / 1200 * 100dvw), 40px);
	}
}

#usefulList{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(calc(50% - 24px), 216px), 1fr));
	grid-gap: clamp(40px, calc(64 / 1200 * 100dvw), 64px) clamp(24px, calc(40 / 1200 * 100dvw), 40px);
	& section{
		position: relative;
		display: grid;
		grid-row-gap: 16px;
		&:not(:has(img)):before{
			content: "";
			aspect-ratio: 3 / 2;
			background: var(--dummy);
			border-radius: 16px;
		}
		&:hover{
			& h3{
				&:before{
					background: #172970;
				}
				&:after{
					background: #fff;
				}
			}
		}
	}
	& h3{
		display: grid;
		grid-template-columns: 1fr auto;
		column-gap: 8px;
		order: 1;
		font-weight: 700;
		letter-spacing: 0.025em;
		&:before,
		&:after{
			content: "";
			grid-column: 2;
			grid-row: 1;
			align-self: start;
			aspect-ratio: 1;
			width: 40px;
			transition: all 0.2s ease-out;
		}
		&:before{
			background: var(--color-theme);
			border-radius: 100%;
		}
		&:after{
			content: "";
			background: currentColor;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round;"><polyline points="7 2.5 9.5 5 7 7.5"/><line x1=".5" y1="5" x2="9.5" y2="5"/></svg>') no-repeat center / 10px;
		}
	}
	& h3+div{
		display: contents;
		& a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			font-size: 0;
		}
	}
	& figure{
		order: -1;
		& img{
			aspect-ratio: 3 / 2;
			object-fit: cover;
			border-radius: 16px;
		}
	}
}

.slick-arrow{
	all: unset;
	box-sizing: border-box;
	cursor: pointer;
	position: relative;
	aspect-ratio: 1;
	width: clamp(40px, calc(56 / 1200 * 100dvw), 56px);
	background: #fff;
	border: 1px solid currentColor;
	border-radius: 100%;
	font-size: 0;
	z-index: 1;
	&:hover{
		background: var(--color-theme);
	}
	&:before{
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: currentColor;
		-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px;"><polyline points="5 2 11 8 5 14"/></svg>') no-repeat center / 16px;
	}
	&.slick-prev:before{
		transform: scale(-1, 1);
	}
}