@charset "UTF-8";

/*--------------------------------------------
HOVER
---------------------------------------------*/

a:not(.noAnimation) , button:not(.noAnimation) , input[type="submit"]{
	transition : filter .3s ease-in;
}

a:not(.noAnimation):hover , button:not(.noAnimation):hover , input[type="submit"]:hover{
	filter : opacity(.75) brightness(110%);
}

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

.title01{
	font-weight : 700;
	background-color : var(--primary);
	overflow : hidden;
	color : #fff;
	position : relative;
}

.title01:before{
	content : "";
	display : block;
	background-repeat : no-repeat;
	background-size : contain;
	background-position : 0 0;
	position : absolute;
}

@media screen and (max-width: 750px){
	.title01{
		font-size : 4rem;
		line-height : 1.35;
	}
	.title01{
		padding-top : calc( 13 * 100vw / 750 );
		padding-bottom : calc( 13 * 100vw / 750 );
		padding-left : calc( 72 * 100% / 750 );
		padding-right : calc( 72 * 100% / 750 );
	}
}

@media print,screen and (min-width: 751px){
	.title01{
		font-size : 2.8rem;
	}
	.title01{
		padding-top : 11px;
		padding-bottom : 11px;
		padding-left : 50px;
		padding-right : 50px;
	}
}

.title02{
	background-color : var(--primary);
	color : #fff;
	font-weight : 700;
}

@media screen and (max-width: 750px){
	.title02{
		font-size : 3.2rem;
		padding-top : calc( 24 * 100vw / 750 );
		padding-bottom : calc( 24 * 100vw / 750 );
		padding-left : calc( 35 * 100% / 750 );
		padding-right : calc( 35 * 100% / 750 );
	}
}

@media print,screen and (min-width: 751px){
	.title02{
		font-size : 2.8rem;
		padding-top : 11px;
		padding-bottom : 11px;
		padding-left : 18px;
		padding-right : 18px;
	}
}

.title03{
	border-left-style : solid;
	border-left-color : currentColor;
	color : var(--primary);
	font-weight : 700;
	background-color : #e5e5e5;
	display : grid;
}

@media screen and (max-width: 750px){
	.title03{
		border-left-width : calc( 10 * 100vw / 750 );
		padding-left : calc( 16 * 100% / 690 );
		padding-right : calc( 16 * 100% / 690 );
	}
	.title03{
		font-size : 3.4rem;
		line-height : 1.11;
	}
	.title03{
		padding-top : calc( 22 * 100vw / 750 );
		padding-bottom : calc( 22 * 100vw / 750 );
	}
}

@media print,screen and (min-width: 751px){
	.title03{
		border-left-width : 5px;
		padding-left : 20px;
		padding-right : 20px;
	}
	.title03{
		font-size : 3rem;
	}
	.title03{
		padding-top : 25px;
		padding-bottom : 25px;
	}
}

.title04{
	border-bottom-style : solid;
	font-weight : 700;
	color : #575757;
}

@media screen and (max-width: 750px){
	.title04{
		border-bottom-width : calc( 6 * 100vw / 750 );
		border-image : linear-gradient(90deg, var(--primary) 0%, var(--primary) calc( 100 * 100% / 690 ) , #e5e5e5 calc( 100 * 100% / 690 ) , #e5e5e5 100% );
		border-image-slice : 1;
	}
	.title04{
		font-size : 3.8rem;
		line-height : 1.2;
	}
	.title04{
		padding-bottom : calc( ( 14 - 3.8 ) * 100vw / 750 );
	}
}

@media print,screen and (min-width: 751px){
	.title04{
		border-bottom-width : 5px;
		border-image : linear-gradient(90deg, var(--primary) 0%, var(--primary) 100px , #e5e5e5 100px , #e5e5e5 100% );
		border-image-slice : 1;
	}
	.title04{
		font-size : 3.4rem;
		line-height : 1.2;
	}
	.title04{
		padding-bottom : calc( 17px - 3.4px );
	}
}

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

.link01{
	display : grid;
	place-items : center;
	background-color : var(--primary);
	color : #fff;
	margin-left : auto;
	margin-right : auto;
}

@media screen and (max-width: 750px){
	.link01{
		width : calc( 240 * 100% / 690 );
		height : calc( 60 * 100vw / 750 );
		font-size : 2.6rem;
	}
}

@media print,screen and (min-width: 751px){
	.link01{
		width : 140px;
		height : 45px;
		font-size : 1.6rem;
	}
}

.sublinks{
	display : flex;
	flex-wrap : wrap;
	justify-content : center;
}

.sublinks a{
	border-bottom-style : solid;
	border-bottom-color : transparent;
	transition : border-color .3s ease-in;
	display : inline-grid;
	align-items : center;
}

.sublinks a.is-current , .sublinks a:hover{
	border-color : var(--primary);
}

@media screen and (max-width: 750px){
	.sublinks{
		row-gap : calc( 17 * 100vw / 750 );
	}
	.sublinks li:not(:last-child):after{
		content : "｜";
		margin-left : 2.2rem;
		margin-right : 2.2rem;
		white-space : pre;
	}
	.sublinks a{
		font-size : 2.6rem;
	}
	.sublinks a{
		padding-bottom : calc( 7 * 100vw / 750 );
		padding-top : calc( 9 * 100vw / 750 );
		border-bottom-width : calc( 2 * 100vw / 750 );
	}
}

@media print,screen and (min-width: 751px){
	.sublinks li:not(:last-child):after{
		content : "｜";
		margin-left : 24px;
		margin-right : 24px;
		white-space : pre;
	}
	.sublinks a{
		font-size : 1.6rem;
		line-height : 1.5;
	}
	.sublinks a{
		padding-bottom : calc( 8px - 4px );
		padding-top : calc( 9px - 4px );
		border-bottom-width : 1px;
	}
}

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

#paginationArchive{
	display : inline-flex;
	align-items : center;
	justify-content : center;
	left : 50%;
	transform : translateX( -50% );
	position : relative;
}

#paginationArchive .page-numbers , #paginationArchive .current{
	display : inline-flex;
	justify-content : center;
	position : relative;
}

#paginationArchive .prev{
	position : absolute;
	top : 50%;
	right : 100%;
	transform : translateY(-50%);
}

#paginationArchive .next{
	position : absolute;
	top : 50%;
	left : 100%;
	transform : translateY(-50%);
}

#paginationArchive a , #paginationArchive .current{
	display : flex;
	align-items : center;
	justify-content : center;
}

#paginationArchive .dots{
	display : flex;
	align-items : center;
}

#paginationArchive .prev , #paginationArchive .next , #paginationArchive .current{
	background-color : #e5e5e5;
}

@media screen and (max-width: 750px){
	#paginationArchive{
		height : calc( 50 * 100vw / 750 );
	}
	#paginationArchive a , #paginationArchive span{
		height : calc( 50 * 100vw / 750 );
		font-size : 2.4rem;
		width : calc( 50 * 100vw / 750 );
	}
	#paginationArchive .prev{
		left : calc( -50 * 100vw / 750 );
	}
	#paginationArchive .next{
		right : calc( -50 * 100vw / 750 );
	}
}

@media print,screen and (min-width: 751px){
	#paginationArchive{
		height : 50px;
	}
	#paginationArchive a , #paginationArchive span{
		height : 50px;
		font-size : 1.6rem;
	}
	#paginationArchive .prev , #paginationArchive .next , #paginationArchive .current{
		width : 50px;
	}
	#paginationArchive a:not(:where(.prev,.next)){
		width : 40px;
	}
	#paginationArchive .prev{
		left : -50px;
	}
	#paginationArchive .next{
		right : -50px;
	}
}