@charset "UTF-8";

/* --------------------------------------------
MVS
--------------------------------------------- */
#mvs{
	position : relative;
	z-index : 1;
}

/* --------------------------------------------
MAIN VISUAL
--------------------------------------------- */
#mv{
	@media screen and ( width <= 750px ){
		height : calc( 590 * var( --remBase ) );
	}
	@media print , screen and ( width > 750px ){
		height : calc( 690 * var( --remBase ) );
	}
}
#slider{
	height : 100%;
	font-size : 0;
	.slick-list{
		height : 100%;
	}
	a{
		display : block;
	}
	picture{
		width : 100vw;
		img{
			width : 100%;
			height : 100%;
			object-fit : cover;
		}
	}
	.slider-html{
		width : 100vw;
		background-color : #fff;
		p:nth-of-type( 1 ){
			strong{
				display : block;
				font-weight : 500;
				text-align : center;
				text-indent : .15em;
				letter-spacing : .15em;
			}
		}
		p:nth-of-type( 2 ){
			text-align : center;
			text-indent : .15em;
			letter-spacing : .15em;
		}
		.more01{
			justify-content : center;
		}
	}
	.slick-dots{
		position : absolute;
		z-index : 5;
		display : flex;
		align-items : flex-start;
		font-size : 0;
		li{
			display : block;
			font-size : 0;
		}
		button{
			width : 100%;
			height : 100%;
			overflow : hidden;
			font-size : 0;
			color : transparent;
			vertical-align : top;
			cursor : pointer;
			background-color : #9e937d;
			border-radius : 50%;
		}
		.slick-active button{
			background-color : #36bbcc;
		}
	}
	@media screen and ( width <= 750px ){
		picture{
			height : calc( 650 * var( --remBase ) );
		}
		.slider-html{
			height : calc( 650 * var( --remBase ) );
		}
		.slider-html{
			padding-top : calc( ( 163 + 5 ) * var( --remBase ) );
			p:nth-of-type( 1 ){
				strong{
					font-size : calc( 21 * var( --remBase ) );
				}
			}
			p:nth-of-type( 2 ){
				margin-top : calc( ( 32 + 5 ) * var( --remBase ) );
				font-size : calc( 13 * var( --remBase ) );
				line-height : 2.3077;
			}
			.more01{
				margin-top : calc( 25 * var( --remBase ) );
			}
		}
		.slick-dots{
			bottom : calc( 25 * var( --remBase ) );
			left : 0;
			justify-content : center;
			width : 100%;
			li{
				width : calc( 7 * var( --viewportBase ) );
				height : calc( 7 * var( --remBase ) );
				margin-inline : calc( 14 * var( --viewportBase ) );
			}
		}
	}
	@media print , screen and ( width > 750px ){
		picture{
			height : calc( 690 * var( --remBase ) );
		}
		.slider-html{
			height : calc( 690 * var( --remBase ) );
		}
		.slider-html{
			padding-top : calc( ( 214 + 9.5 ) * var( --remBase ) );
			p:nth-of-type( 1 ){
				strong{
					font-size : calc( 40 * var( --remBase ) );
				}
			}
			p:nth-of-type( 2 ){
				margin-top : calc( ( 39 + 9.5 ) * var( --remBase ) );
				font-size : calc( 15 * var( --remBase ) );
				line-height : 2;
			}
			.more01{
				margin-top : calc( 26 * var( --remBase ) );
			}
		}
		.slick-dots{
			bottom : calc( 25 * var( --remBase ) );
			left : calc( 35 * var( --viewportBase ) );
			column-gap : calc( 28 * var( --remBase ) );
			li{
				width : auto;
				width : 7px;
				height : calc( 7 * var( --remBase ) );
				aspect-ratio : 1;
			}
		}
	}
}

/* --------------------------------------------
NEWS
--------------------------------------------- */
#news{
	position : absolute;
	z-index : 6;
	background-color : #fff;
	border : solid #36bbcc 1px;
	h2{
		display : inline-block;
		color : #36bbcc;
		letter-spacing : .15em;
		border-bottom : 1px solid #36bbcc;
	}
	li + li{
		max-height : 0;
		margin-top : 0;
		overflow : hidden;
		transition : max-height .3s ease-in , margin .3s ease-in;
	}
	a , li > div{
		color : #36bbcc;
	}
	time{
		letter-spacing : .1em;
	}
	h3{
		letter-spacing : .12em;
	}
	&.items{
		&::after{
			position : absolute;
			left : 50%;
			display : block;
			content : "";
			background : url( "../images/ui/parts/down01.svg" ) 0 0 / contain no-repeat;
			transform : translateX( -50% );
		}
		&.is-open{
			li + li{
				max-height : 3em;
			}
			&::after{
				display : none;
			}
		}
	}
	@media screen and ( width <= 750px ){
		top : calc( 430 * var( --remBase ) );
		left : calc( 31.5 * var( --viewportBase ) );
		width : calc( 312 * var( --viewportBase ) );
		padding-top : calc( ( 10 - 3 ) * var( --remBase ) );
		padding-bottom : calc( 10 * var( --remBase ) );
		padding-left : calc( 18 * var( --viewportBase ) );
		padding-right : calc( 18 * var( --viewportBase ) );
		h2{
			font-size : calc( 13 * var( --remBase ) );
			line-height : 1.4615;
		}
		ul{
			margin-top : calc( 8 * var( --remBase ) );
		}
		a , li > div{
			display : block;
		}
		time{
			font-size : calc( 12 * var( --remBase ) );
		}
		h3{
			margin-top : calc( ( 6 - 3.5 ) * var( --remBase ) );
			font-size : calc( 13 * var( --remBase ) );
			line-height : 1.5385;
		}
		&.items{
			padding-bottom : calc( 23 * var( --remBase ) );
			&::after{
				bottom : calc( 10 * 100% / 276 );
				width : calc( 11 * 100% / 276 );
				height : calc( 7 * var( --remBase ) );
			}
			&.is-open{
				padding-bottom : calc( 12 * var( --remBase ) );
				li + li{
					margin-top : calc( ( 9 - 3.5 - 3.5 ) * var( --remBase ) );
				}
			}
		}
	}
	@media print , screen and ( width > 750px ){
		top : calc( 648 * var( --remBase ) );
		right : calc( 100 * var( --viewportBase ) );
		width : calc( 480 * var( --viewportBase ) );
		padding-inline : calc( 18 * var( --viewportBase ) );
		padding-top : calc( ( 10 - 3 ) * var( --remBase ) );
		padding-bottom : calc( ( 13 + 3 ) * var( --remBase ) );
		border-width : 1px;
		a , li > div{
			display : flex;
			align-items : flex-start;
		}
		h2{
			font-size : calc( 13 * var( --remBase ) );
			line-height : 1.4615;
		}
		ul{
			margin-top : calc( ( 6 + 3 ) * var( --remBase ) );
		}
		time{
			flex-shrink : 0;
			width : 86px;
			margin-top : calc( .5 * var( --remBase ) );
			font-size : calc( 12 * var( --remBase ) );
		}
		h3{
			font-size : calc( 13 * var( --remBase ) );
		}
	}
	&.items{
		padding-bottom : calc( ( 26 + 3 ) * var( --remBase ) );
		&.is-open{
			padding-bottom : calc( ( 13 + 3 ) * var( --remBase ) );
			li + li{
				margin-top : calc( ( 6 + 3 + 3 ) * var( --remBase ) );
			}
		}
		&::after{
			bottom : calc( 11 * var( --remBase ) );
			width : auto;
			height : calc( 7 * var( --remBase ) );
			aspect-ratio : 11/7;
		}
	}
}