@charset "UTF-8";

:root{
	--body : #323232;
	--link : #323232;
	--primary : #c80023;
}

/*--------------------------------------------
MAINVISUAL
---------------------------------------------*/

#mv{
	font-size : 0;
	position : relative;
}

#mv picture{
	overflow : hidden;
}

#mv picture > img{
	width : 100%;
	height : 100%;
	object-fit : cover;
	font-family : "object-fit: cover;";
}

#mv picture{
	width : 100%;
}

#mv .slick-dots{
	display : flex;
	justify-content : center;
	align-items : center;
	z-index : 5;
	position : relative;
}

#mv .slick-dots button{
	color : transparent;
	font-size : 0;
	vertical-align : top;
	cursor : pointer;
	width : 100%;
	height : 100%;
}

#mv .slick-dots{
	position : absolute;
	left : 0;
	width : 100%;
}

#mv .slick-dots button{
	display : block;
	background-color : #fff;
	transition : background-color .3s ease-in;
	-webkit-backface-visibility : hidden;
	        backface-visibility : hidden;
	will-change : background-color;
	width : 100%;
	height : 100%;
}

#mv .slick-dots .slick-active button{
	background-color : #000;
}

@media screen and (max-width: 768px){
	#mv picture{
		height : calc( 1008 * 100vw / 768 );
	}
	#mv .slick-dots{
		bottom : calc( 64 * 100vw / 768 );
	}
	#mv .slick-dots li{
		width : calc( 77 * 100% / 768 );
		height : calc( 8 * 100vw / 768 );
	}
	#mv .slick-dots li + li{
		margin-left : calc( 18 * 100% / 768 );
	}
}

@media print,screen and (min-width: 769px){
	#mv picture{
		height : 754px;
	}
	#mv .slick-dots{
		bottom : 30px;
	}
	#mv .slick-dots li + li{
		margin-left : 14px;
	}
	#mv .slick-dots li{
		width : 37px;
		height : 4px;
	}
}

/*--------------------------------------------
LEDE
---------------------------------------------*/

#lede{
	background-color : #000;
	color : #fff;
}

#lede h2{
	position : relative;
	font-weight : 700;
	letter-spacing : .02em;
	justify-content : center;
}

#lede h2:before , #lede h2:after{
	content : "";
	display : block;
	position : absolute;
}

#lede h2:before{
	border-top : 1px solid rgba(255,255,255,.5);
	border-left : 1px solid rgba(255,255,255,.5);
	top : 0;
	left : 0;
}

#lede h2:after{
	border-bottom : 1px solid rgba(255,255,255,.5);
	border-right : 1px solid rgba(255,255,255,.5);
	bottom : 0;
	right : 0;
}

#lede p{
	letter-spacing : .05em;
}

@media screen and (max-width: 768px){
	#lede{
		padding-top : calc( ( 124 - 12 ) * 100vw / 768 );
		padding-bottom : calc( ( 88 - 12 ) * 100vw / 768 );
	}
	#lede h2{
		font-size : 4.2rem;
		line-height : 1.5714;
		padding-top : calc( ( 40 - 12 ) * 100vw / 768 );
		padding-bottom : calc( ( 40 - 12 ) * 100vw / 768 );
		padding-left : calc( 37 * 100% / 680 );
		padding-right : calc( 37 * 100% / 680 );
	}
	#lede h2:before , #lede h2:after{
		width : 78px;
		height : 78px;
	}
	#lede p{
		margin-top : calc( ( 84 - 12 - 12 ) * 100vw / 768 );
		font-size : 2.8rem;
		line-height : 1.8571;
	}
}

@media print,screen and (min-width: 769px){
	#lede{
		padding-top : calc( 112px - 7px );
		padding-bottom : calc( 133px - 7px );
	}
	#lede h2{
		display : table;
		margin-left : auto;
		margin-right : auto;
		font-size : 2.6rem;
		line-height : 1.6154;
		padding-top : calc( 24px - 8px );
		padding-bottom : calc( 24px - 8px );
		padding-left : 26px;
		padding-right : 26px;
	}
	#lede h2:before , #lede h2:after{
		width : 78px;
		height : 78px;
	}
	#lede p{
		font-size : 1.6rem;
		line-height : 1.875;
	}
}

/*--------------------------------------------
INFOMATION
---------------------------------------------*/

#infomation .box ul{
	display : flex;
}

#infomation h2{
	letter-spacing : .05em;
}

#infomation #newsTabController a{
	display : block;
	color : #ccc;
	letter-spacing : -.01em;
	transition : color .3s ease-in;
	-webkit-backface-visibility : hidden;
	        backface-visibility : hidden;
	will-change : color;
}

#infomation #newsTabController a.is-active , #infomation #newsTabController a:hover{
	color : #808080;
}

#infomation picture img{
	width : 100%;
	height : auto;
}

#infomation li li{
	font-weight : 700;
	text-align : center;
	letter-spacing : .04em;
	text-indent : .04em;
}

#infomation time{
	font-weight : 700;
	letter-spacing : .03em;
}

#infomation h3{
	letter-spacing : .03em;
}

@media screen and (max-width: 768px){
	#infomation{
		padding-top : calc( ( 116 - 12 ) * 100vw / 768 );
		padding-bottom : calc( 120 * 100vw / 768 );
	}
	#infomation h2{
		font-size : 8rem;
	}
	#infomation #newsTabController{
		margin-top : calc( ( 46 - 12 - 8 ) * 100vw / 768 );
		flex-wrap : wrap;
		margin-left : calc( -26 * 100% / 680 );
	}
	#infomation #newsTabController li{
		margin-left : calc( 26 * 100% / 706 );
		margin-top : calc( 8 * 100vw / 768 );
	}
	#infomation #newsTabController a{
		font-size : 3.6rem;
	}
	#infomation #newsTab{
		margin-top : calc( 46 * 100vw / 768 );
	}
	#infomation #newsTab > li + li{
		margin-top : calc( 66 * 100vw / 768 );
	}
	#infomation #newsTab > li > a{
		display : block;
	}
	#infomation #newsTab picture{
		width : 100%;
	}
	#infomation #newsTab > li > a > div{
		margin-top : calc( 34 * 100vw / 768 );
	}
	#infomation #newsTab ul{
		margin-left : calc( -8 * 100% / 680 );
	}
	#infomation #newsTab li li{
		min-width : calc( 164 * 100% / 688 );
		height : calc( 36 * 100vw / 768 );
		font-size : 2.6rem;
		margin-left : calc( 8 * 100% / 688 );
	}
	#infomation #newsTab time{
		margin-top : calc( 12 * 100vw / 768 );
		font-size : 2.6rem;
		display : block;
	}
	#infomation #newsTab h3{
		font-size : 2.6rem;
		line-height : 1.6154;
		margin-top : calc( ( 38 - 8 ) * 100vw / 768 );
	}
	#infomation #newsTab .link-detail01{
		margin-top : calc( ( 22 - 8 ) * 100vw / 768 );
	}
	#infomation .link-more01{
		margin-top : calc( 102 * 100vw / 768 );
	}
}

@media print,screen and (min-width: 769px){
	#infomation{
		padding-top : calc( 138px - 8px );
		padding-bottom : 84px;
	}
	#infomation .box{
		display : flex;
		align-items : flex-end;
		justify-content : space-between;
	}
	#infomation h2{
		font-size : 5.2rem;
	}
	#infomation #newsTabController a{
		font-size : 2rem;
		padding-left : 16px;
		padding-right : 16px;
	}
	#infomation #newsTab{
		margin-top : calc( 76px - 8px );
	}
	#infomation #newsTab > li{
		margin-bottom : 64px;
	}
	#infomation #newsTab > li > a{
		display : flex;
		justify-content : space-between;
	}
	#infomation #newsTab picture{
		width : calc( 304 * 100% / 690 );
	}
	#infomation #newsTab > li > a > div{
		width : calc( 368 * 100% / 690 );
		position : relative;
	}
	#infomation #newsTab ul{
		margin-top : -6px;
		margin-left : -6px;
	}
	#infomation #newsTab li li{
		min-width : 81px;
		margin-top : 6px;
		height : 18px;
		font-size : 1.4rem;
		margin-left : 6px;
	}
	#infomation #newsTab time{
		margin-top : 6px;
		font-size : 1.6rem;
	}
	#infomation #newsTab h3{
		font-size : 1.6rem;
		line-height : 1.5;
		margin-top : calc( 32px - 4px );
	}
	#infomation #newsTab .link-detail01{
		margin-top : calc( 42px - 4px );
	}
	#infomation .link-more01{
		margin-top : calc( 108px - 64px );
	}
}