@charset "UTF-8";

/*--------------------------------------------
MAIN VISUAL
---------------------------------------------*/

#mv{
	font-size : 0;
}

@media screen and (max-width: 750px){
	#mv{
		padding-bottom : calc( 38 * 100vw / 750 );
	}
}

@media print,screen and (min-width: 751px){
	#mv{
		padding-bottom : 32px;
	}
}

#swiper01 a{
	display : block;
}

@media screen and (max-width: 750px){
	#swiper01{
		padding-top : calc( 20 * 100vw / 750 );
		padding-bottom : calc( 20 * 100vw / 750 );
		background-color : var(--primary);
	}
	#swiper01 .swiper-slide{
		width : calc( 670 * 100% / 750 );
		height : calc( 600 * 100vw / 750 );
		margin-left : calc( 10 * 100% / 750 );
		margin-right : calc( 10 * 100% / 750 );
	}
	#swiper01 a{
		overflow : hidden;
	}
	#swiper01 a > img{
		width : 100%;
		height : 100%;
		object-fit : cover;
	}
	#swiper01 a{
		width : 100%;
		height : 100%;
	}
}

@media print,screen and (min-width: 751px){
	#swiper01 .swiper-slide{
		width : 1200px;
		height : 400px;
		margin-left : 10px;
		margin-right : 10px;
	}
	#swiper01 a{
		overflow : hidden;
	}
	#swiper01 a > img{
		width : 100%;
		height : 100%;
		object-fit : cover;
	}
	#swiper01 a{
		width : 100%;
		height : 100%;
	}
}

#pagination01{
	display : grid;
	justify-content : center;
	grid-auto-flow : column;
}

#pagination01 span{
	background-color : #999;
}

#pagination01 .swiper-pagination-bullet-active{
	background-color : #f8c102;
}

@media screen and (max-width: 750px){
	#pagination01{
		margin-top : calc( 20 * 100vw / 750 );
		grid-auto-columns : calc( 60 * 100% / 750 );
		grid-auto-rows : calc( 8 * 100vw / 750 );
		column-gap : calc( 10 * 100% / 750 );
	}
}

@media print,screen and (min-width: 751px){
	#pagination01{
		margin-top : 16px;
		grid-auto-columns : 60px;
		grid-auto-rows : 4px;
		column-gap : 10px;
	}
}