@charset "UTF-8";

@import url("https://fonts.googleapis.com/css2?family=Teko:wght@400;500;600;700&display=swap");

:root{
	--body : #333;
	--link : #333;
	--primary : #100454;
}

/*--------------------------------------------
STATE
---------------------------------------------*/

@media screen and (max-width: 768px){
	.is-pc{
		display : none;
	}
}

@media print,screen and (min-width: 769px){
	.is-sp{
		display : none;
	}
}

/*--------------------------------------------
DATA TEXT
---------------------------------------------*/

[data-before]:before{
	content : attr( data-before );
	white-space : pre;
}

[data-after]:after{
	content : attr( data-after );
	white-space : pre;
}

[data-both]:before{
	content : attr( data-both );
	white-space : pre;
}

[data-both]:after{
	content : attr( data-both );
	white-space : pre;
}

@media screen and (max-width: 768px){
	[data-sp-after]:after{
		content : attr( data-sp-after );
		white-space : pre;
	}
}

@media screen and (max-width: 768px){
	[data-sp-befpre]:befpre{
		content : attr( data-sp-before );
		white-space : pre;
	}
}

@media print,screen and (min-width: 769px){
	[data-pc-after]:after{
		content : attr( data-pc-after );
		white-pcace : pre;
	}
}

@media print,screen and (min-width: 769px){
	[data-pc-befpre]:befpre{
		content : attr( data-pc-before );
		white-space : pre;
	}
}

/*--------------------------------------------
FONTS
---------------------------------------------*/

.teko{
	font-family : "Teko", sans-serif;
}

/*--------------------------------------------
TITLE
---------------------------------------------*/

.title01{
	font-family : "Teko", sans-serif;
	text-align : center;
	letter-spacing : .1em;
	text-indent : .1em;
	font-weight : 700;
}

.title01:before , .title01:after{
	content : "";
	display : block;
	width : 100%;
}

@media screen and (max-width: 768px){
	.title01{
		font-size : 10rem;
		text-align : center;
		text-indent : .1em;
	}
	.title01:before{
		margin-top : calc( ( ( -100 + 65 ) * 1 / 3 ) * 100vw / 768 );
	}
	.title01:after{
		margin-top : calc( ( ( -100 + 65 ) * 2 / 3 ) * 100vw / 768 );
	}
}

@media print,screen and (min-width: 769px){
	.title01{
		font-size : 6rem;
	}
	.title01:before{
		margin-top : calc( ( -60px + 39px ) * 1 / 3 );
	}
	.title01:after{
		margin-top : calc( ( -60px + 39px ) * 2 / 3 );
	}
}

.title02{
	display : flex;
	align-items : center;
	justify-content : center;
	text-align : center;
	background-size : cover;
	background-repeat : no-repeat;
	background-position : 0 0;
	display : flex;
	align-items : center;
	justify-content : center;
	text-align : center;
	color : #fff;
	text-align : center;
	letter-spacing : .1em;
	text-indent : .1em;
	font-weight : 700;
}

@media screen and (max-width: 768px){
	.title02{
		background-image : url("../images/ui/bg/title02_sp.jpg");
		width : 100%;
		height : calc( 90 * 100vw / 768 );
		font-size : 3.2rem;
	}
}

@media print,screen and (min-width: 769px){
	.title02{
		background-image : url("../images/ui/bg/title02_pc.jpg");
		width : 580px;
		height : 72px;
		font-size : 2.4rem;
	}
}

.title03{
	text-align : center;
	letter-spacing : .1em;
	text-indent : .1em;
	color : #bb0a17;
	font-family : "Teko", sans-serif;
	font-weight : 700;
}

@media screen and (max-width: 768px){
	.title03{
		height : calc( 70 * 100vw / 768 );
		font-size : 5rem;
		background-color : #fff;
		color : #999;
		display : flex;
		align-items : center;
		justify-content : center;
		padding-top : calc( ( ( 50 - 33 ) * 1 / 3 ) * 100vw / 768 );
		transition : color .3s ease-in , background-color .3s ease-in;
		-webkit-backface-visibility : hidden;
		        backface-visibility : hidden;
		will-change : color, background-color;
		cursor : pointer;
	}
	.title03.is-active{
		background-color : #bb0a17;
		color : #fff;
	}
}

@media print,screen and (min-width: 769px){
	.title03{
		font-size : 8rem;
	}
	.title03:before , .title03:after{
		content : "";
		display : block;
		width : 100%;
	}
	.title03:before{
		margin-top : calc( ( -80px + 52px ) * 1 / 3 );
	}
	.title03:after{
		margin-bottom : calc( ( -80px + 52px ) * 2 / 3 );
	}
	.title03.black{
		color : #000;
	}
}

.title04{
	font-family : "Teko", sans-serif;
	font-weight : 700;
	letter-spacing : .1em;
	color : #bb0a17;
}

.title04:before , .title04:after{
	content : "";
	display : block;
}

@media print,screen and (min-width: 769px){
	.title04{
		font-size : 4rem;
	}
	.title04:before{
		margin-top : calc( ( -40px - 26px ) / 1 / 3 );
	}
	.title04:after{
		margin-bottom : calc( ( -40px - 26px ) / 2 / 3 );;
	}
}

/*--------------------------------------------
LIST
---------------------------------------------*/

.archive-topics li{
	background-color : #fff;
}

.archive-topics .category{
	display : table;
	color : #fff;
	font-weight : 500;
}

.archive-topics time , .archive-topics .title{
	letter-spacing : .1em;
	font-weight : 500;
}

.archive-topics time{
	display : block;
}

.archive-topics picture{
	overflow : hidden;
}

.archive-topics picture > img{
	width : 100%;
	height : 100%;
	object-fit : cover;
	font-family : "object-fit: cover;";
}

@media screen and (max-width: 768px){
	.archive-topics > li{
		box-shadow : 0 0 calc( 10 * 100vw / 768 ) rgba(0,0,0,.1);
	}
	.archive-topics > li + li{
		margin-top : calc( 41 * 100vw / 768 );
	}
	.archive-topics li > a{
		display : -ms-grid;
		display :     grid;
		-ms-grid-columns : calc( 336 * 100% / 720 ) calc( 14 * 100% / 720 ) auto auto calc( 27 * 100% / 720 );
		grid-template-columns : calc( 336 * 100% / 720 ) calc( 14 * 100% / 720 ) auto auto calc( 27 * 100% / 720 );
		-ms-grid-rows : calc( 31 * 100vw / 768 ) calc( 40 * 100vw / 768 ) calc( 18 * 100vw / 768 ) calc( 26 * 100vw / 768 ) calc( 10 * 100vw / 768 ) auto;
		grid-template-rows : calc( 31 * 100vw / 768 ) calc( 40 * 100vw / 768 ) calc( 18 * 100vw / 768 ) calc( 26 * 100vw / 768 ) calc( 10 * 100vw / 768 ) auto;
	}
	.archive-topics picture{
		width : 100%;
		height : 100%;
		-ms-grid-row : 1;
		-ms-grid-row-span : 6;
		    grid-row : 1/7;
		-ms-grid-column : 1;
		-ms-grid-column-span : 1;
		    grid-column : 1/2;
	}
	.archive-topics .category{
		-ms-grid-column : 3;
		-ms-grid-column-span : 1;
		    grid-column : 3/4;
		-ms-grid-row : 2;
		-ms-grid-row-span : 1;
		    grid-row : 2/3;
		font-size : 2.6rem;
		padding-top : calc( 7 * 100vw / 768 );
		padding-left : calc( 18 * 100vw / 768 );
		padding-right : calc( 18 * 100vw / 768 );
		white-space : nowrap;
	}
	.archive-topics time{
		-ms-grid-column : 3;
		-ms-grid-column-span : 2;
		    grid-column : 3/5;
		-ms-grid-row : 4;
		-ms-grid-row-span : 1;
		    grid-row : 4/5;
		font-size : 2.6rem;
	}
	.archive-topics .title{
		-ms-grid-column : 3;
		-ms-grid-column-span : 2;
		    grid-column : 3/5;
		-ms-grid-row : 6;
		-ms-grid-row-span : 1;
		    grid-row : 6/7;
		font-size : 2.6rem;
		line-height : 1.3;
		padding-bottom : calc( ( 51 - 3.9 ) * 100vw / 768 );
	}
}

@media print,screen and (min-width: 769px){
	.archive-topics{
		display : flex;
		flex-wrap : wrap;
	}
	.archive-topics > li{
		width : 280px;
		box-shadow : 0 0 10px rgba(0,0,0,.1);
	}
	.archive-topics > li:not(:nth-child(4n+1)){
		margin-left : 20px;
	}
	.archive-topics > li:nth-child(n+5){
		margin-top : 20px;
	}
	.archive-topics li > a{
		display : block;
		padding-bottom : calc( 40px - 3px );
	}
	.archive-topics picture{
		width : 100%;
		height : 200px;
	}
	.archive-topics .category{
		font-size : 1.6rem;
		height : 30px;
		margin-left : auto;
		margin-right : 5px;
		margin-top : -15px;
		position : relative;
		padding-left : 6px;
		padding-right : 6px;
		padding-top : 7px;
	}
	.archive-topics time , .archive-topics .title{
		font-size : 1.8rem;
		padding-left : 10px;
		padding-right : 10px;
	}
	.archive-topics time{
		display : block;
		margin-top : 2px;
	}
	.archive-topics .title{
		margin-top : 10px;
		line-height : 1.3333;
	}
}

/*--------------------------------------------
PAGINATION
---------------------------------------------*/

#pagination{
	position : relative;
	width : 100%;
}

#pagination:before{
	content : "  |  ";
	position : absolute;
	left : 50%;
	top : 50%;
	transform : translateX(-50%) translateY(-50%);
	text-align : center;
	display : block;
	letter-spacing : 0;
}

#pagination a{
	display : block;
	font-family : "Teko", sans-serif;
	letter-spacing : .1em;
	position : absolute;
	top : 0;
	border-bottom-style : solid;
	border-bottom-color : currentColor;
}

#pagination a:before{
	content : "";
	display : block;
}

@media screen and (max-width: 768px){
	#pagination{
		margin-top : calc( 48 * 100vw / 768 );
		height : calc( 50 * 100vw / 768 );
		font-size : 5rem;
	}
	#pagination:before{
		margin-top : calc( ( ( -50 + 32 ) * 1 / 3 ) * 100vw / 768 );
	}
	#pagination a:before{
		margin-top : calc( ( ( 50 - 32 ) * 1 / 3 ) * 100vw / 768 );
	}
	#pagination a{
		border-bottom-width : calc( 2 * 100vw / 768 );
	}
	#pagination .prev{
		left : calc( 235 * 100% / 720 );
	}
	#pagination .next{
		right : calc( 235 * 100% / 720 );
	}
}

@media print,screen and (min-width: 769px){
	#pagination{
		margin-top : 50px;
		height : 40px;
		font-size : 4rem;
	}
	#pagination:before{
		margin-top : calc( ( -40px + 26px ) * 1 / 3 );
	}
	#pagination a:before{
		margin-top : calc( ( 40px - 26px ) * 1 / 3 );
	}
	#pagination a{
		border-bottom-width : 2px;
	}
	#pagination .prev{
		left : 490px;
	}
	#pagination .next{
		right : 490px;
	}
}

/*--------------------------------------------
LINK
---------------------------------------------*/

.link01{
	display : flex;
	align-items : center;
	justify-content : center;
	text-align : center;
	text-align : center;
	letter-spacing : .1em;
	text-indent : .1em;
	color : #fff;
	background-color : #bb0a17;
	margin-left : auto;
	margin-right : auto;
}

@media screen and (max-width: 768px){
	.link01{
		width : calc( 600 * 100vw / 768 );
		height : calc( 80 * 100vw / 768 );
		font-size : 2.6rem;
	}
}

@media print,screen and (min-width: 769px){
	.link01{
		width : 300px;
		height : 60px;
		font-size : 1.8rem;
	}
}