@charset "UTF-8";

/* --------------------------------------------
VOICES
--------------------------------------------- */
#interview a{
	display : block;
}
@media screen and ( width <= 750px ){
	#interview{
		padding-block : calc( 19 var( --remBase ) );
	}
	#interview a{
		width : 100%;
		margin-top : calc( 19 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#interview{
		display : grid;
		grid-template-columns : calc( 160 var( --percentBase ) ) 1fr calc( 40 var( --percentBase ) ) calc( 1000 var( --percentBase ) );
		align-items : center;
		justify-content : space-between;
		padding-top : calc( 42 var( --remBase ) );
	}
	#interview p{
		grid-column : 2;
	}
	#interview a{
		grid-column : 4;
	}
}
#navVoices ul{
}
#navVoices li , #navVoices a{
	height : 100%;
}
#navVoices a{
	display : grid;
	place-items : center;
	line-height : 1.5;
	background-color : #f1f2ed;
}
#navVoices a[aria-current="page"]{
	color : white;
	background-color : var( --color );
}
@media screen and ( width <= 750px ){
	#navVoices ul{
		display : grid;
		grid-auto-flow : column;
	}
	#navVoices{
		padding-bottom : calc( 40 var( --remBase ) );
		padding-top : calc( 40 var( --remBase ) );
	}
	#navVoices ul{
		grid-auto-rows : calc( 37 var( --remBase ) );
		grid-auto-columns : max-content;
		column-gap : calc( 8 var( --percentBase ) );
		justify-content : start;
		overflow-x : auto;
	}
	#navVoices a{
		padding-inline : calc( 8 var( --remBase ) );
		font-size : 1.4rem;
	}
}
@media screen and ( width > 750px ) , print{
	#navVoices ul{
		display : flex;
		flex-wrap: wrap;
		column-gap: calc( 12 var( --remBase ) );
		row-gap: calc( 12 var( --remBase ) );
	}
	#navVoices{
		padding-bottom : calc( 56 var( --remBase ) );
		padding-top : calc( 40 var( --remBase ) );
	}
	#navVoices ul{
		grid-auto-rows : calc( 40 var( --remBase ) );
		column-gap : calc( 12 var( --percentBase ) );
		justify-content : center;
	}
	#navVoices a{
		padding-inline : calc( 16 var( --remBase ) );
		font-size : 2rem;
	}
}
@media ( hover : hover ){
	#navVoices a:hover{
		color : white;
		background-color : var( --color );
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#navVoices a{
		transition : color var( --transitionBase ) , background var( --transitionBase );
	}
}
#voices > ul > li{
	background-color : white;
}
#voices > ul > li:has( button ){
	display : grid;
}
#voices > ul > li:has( button ) > button{
	position : relative;
	display : grid;
	grid-row : 1;
	width : 100%;
	height : 100%;
}
#voices > ul > li:has( button ) > button::after{
	position : absolute;
	inset : 0;
	display : block;
	width : 100%;
	width : auto;
	aspect-ratio : 65/49;
	margin : auto;
	font-size : 0;
	content : "";
	background-image : url( "../images/ui/icon/play01.svg" );
	background-repeat : no-repeat;
	background-position : left center;
	background-size : contain;
}
#voices > ul > li:has( button ) > button img{
	width : 100%;
	height : 100%;
	object-fit : cover;
	object-position : center;
}
#voices > ul > li:has( button ) > a{
	display : block;
	grid-row : 1;
}
#voices > ul > li:not( :has( button ) ) > a{
	display : grid;
	height : 100%;
	background-color : white;
}
#voices > ul > li:not( :has( button ) ) > a > picture{
	grid-row : 1;
	width : 100%;
	height : 100%;
}
#voices > ul > li:not( :has( button ) ) > a > picture img{
	width : 100%;
	height : 100%;
	object-fit : cover;
	object-position : center;
}
#voices > ul > li:not( :has( button ) ) > a > hgroup{
	grid-row : 1;
}
#voices hgroup{
	display : grid;
	grid-template-columns : auto auto 1fr;
	font-family : "Noto Sans JP" , sans-serif;
}
#voices .school{
	display : grid;
	grid-row : 1;
	grid-column : 1/4;
	place-items : center;
	width : fit-content;
	height : 100%;
	color : white;
	background-color : var( --color );
}
#voices .name{
	grid-column : 1;
}
#voices .hometown{
	grid-column : 2;
}
#voices h2{
	grid-column : 1/4;
	font-family : "Noto Sans JP" , sans-serif;
	font-weight : 500;
	color : var( --color01 );
}
@media screen and ( width <= 750px ){
	#voices{
		padding-bottom : calc( 48 var( --remBase ) );
	}
	#voices > ul > li{
		height : calc( 112 var( --remBase ) );
	}
	#voices > ul > li + li{
		margin-top : calc( 24 var( --remBase ) );
	}
	#voices > ul > li:has( button ){
		grid-template-columns : 1fr calc( 112 var( --percentBase ) );
		align-items : start;
	}
	#voices > ul > li:has( button ) > a{
		grid-column : 1;
		padding-inline : calc( 8 * 100% / 256 );
	}
	#voices > ul > li:has( button ) > button{
		grid-column : 2;
	}
	#voices > ul > li:has( button ) > button::after{
		height : calc( 23 var( --remBase ) );
	}
	#voices > ul > li:not( :has( button ) ) > a{
		grid-template-columns : 1fr calc( 112 var( --percentBase ) );
	}
	#voices > ul > li:not( :has( button ) ) > a > hgroup{
		grid-column : 1;
		padding-inline : calc( 8 * 100% / 256 );
	}
	#voices > ul > li:not( :has( button ) ) > a > picture{
		grid-column : 2;
	}
		#voices > ul > li:not( :has( button ) ) > a > picture img{
			height: calc( 112 var( --remBase ) );
			object-fit: cover;
		}
	#voices hgroup{
		grid-template-rows : calc( 21 var( --remBase ) ) 0 auto calc( 4 var( --remBase ) ) 1fr;
		align-items : start;
	}
	#voices .school{
		padding-inline : calc( 8 var( --remBase ) );
		margin-top : calc( -7 var( --remBase ) );
		font-size : 1.4rem;
		line-height : 1.5;
	}
	#voices :where( .name , .hometown ){
		grid-row : 3;
		font-size : 1.4rem;
		line-height : 1.5;
	}
	#voices h2{
		grid-row : 5;
		font-size : 1.4rem;
		line-height : 1.5;
	}
	#voices #pagination{
		margin-top : calc( 21 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#voices{
		padding-bottom : calc( 64 var( --remBase ) );
	}
	#voices > ul{
		display : grid;
		grid-template-columns : repeat( 2 , calc( 760 * 100% / 1560 ) );
		grid-auto-rows : calc( 240 var( --remBase ) );
		row-gap : calc( 40 var( --remBase ) );
		justify-content : space-between;
		padding-inline : calc( 160 var( --percentBase ) );
	}
	#voices > ul > li:has( button ){
		grid-template-columns : calc( 240 * 100% / 760 ) 1fr;
		align-items : center;
	}
	#voices > ul > li:has( button ) button{
		grid-column : 1;
	}
	#voices > ul > li:has( button ) button::after{
		height : calc( 49 var( --remBase ) );
	}
	#voices > ul > li:has( button ) a{
		grid-column : 2;
		padding-inline : calc( 20 * 100% / 420 );
	}
	#voices > ul > li:not( :has( button ) ) > a{
		grid-template-rows : 100%;
		align-items : center;
	}
	#voices > ul > li:not( :has( button ) ) > a > :where( picture , hgroup ){
		grid-row : 1;
	}
	#voices > ul > li:not( :has( button ) ) > a > hgroup{
		padding-inline : calc( 20 * 100% / 420 );
	}
	#voices > ul > li:not( :has( button ) ):nth-child( 4n+1 ) > a , #voices > ul > li:not( :has( button ) ):nth-child( 4n+2 ) > a{
		grid-template-columns : calc( 240 * 100% / 760 ) 1fr;
	}
	#voices > ul > li:not( :has( button ) ):nth-child( 4n+1 ) > a > picture , #voices > ul > li:not( :has( button ) ):nth-child( 4n+2 ) > a > picture{
		grid-column : 1;
	}
	#voices > ul > li:not( :has( button ) ):nth-child( 4n+1 ) > a > hgroup , #voices > ul > li:not( :has( button ) ):nth-child( 4n+2 ) > a > hgroup{
		grid-column : 2;
	}
	#voices > ul > li:not( :has( button ) ):nth-child( 4n+4 ) > a , #voices > ul > li:not( :has( button ) ):nth-child( 4n+3 ) > a{
		grid-template-columns : 1fr calc( 240 * 100% / 760 );
	}
	#voices > ul > li:not( :has( button ) ):nth-child( 4n+4 ) > a > hgroup , #voices > ul > li:not( :has( button ) ):nth-child( 4n+3 ) > a > hgroup{
		grid-column : 1;
	}
	#voices > ul > li:not( :has( button ) ):nth-child( 4n+4 ) > a > picture , #voices > ul > li:not( :has( button ) ):nth-child( 4n+3 ) > a > picture{
		grid-column : 2;
	}
	#voices hgroup{
		grid-template-rows : calc( 40 var( --remBase ) );
		row-gap : calc( 8 var( --remBase ) );
	}
	#voices .school{
		height : calc( 40 var( --remBase ) );
		padding-inline : calc( 16 var( --remBase ) );
		font-size : 2rem;
		line-height : 1.5;
	}
	#voices :where( .name , .hometown ){
		grid-row : 2;
		font-size : 2rem;
		line-height : 1.5;
	}
	#voices h2{
		grid-row : 3;
		padding-top : calc( 8 var( --remBase ) );
		font-size : 2.2rem;
		line-height : 1.3;
		border-top : solid 1px #d9d9d9;
	}
	#voices #pagination{
		margin-top : calc( 80 var( --remBase ) );
	}
}
#pagination ul{
	position : relative;
	left : 50%;
	display : inline-grid;
	grid-auto-flow : column;
	translate : -50% 0;
}
#pagination ul a , #pagination ul span{
	display : grid;
	place-items : center;
	width : 100%;
	height : 100%;
	aspect-ratio : 1;
}
#pagination ul :where( .prev , .next ){
	position : absolute;
	height : 100%;
}
#pagination li > :where( a , span[aria-current] ){
	border-width : 1px;
}
#pagination li:not( :has( .prev , .next ) ) a , #pagination span{
	font-weight : 500;
}
#pagination li:not( .prev , .next ) > a{
	background-color : white;
	border-color : #c4c4c4;
}
#pagination span[aria-current]{
	color : white;
	background-color : var( --color01 );
	border-color : var( --color01 );
}
#pagination :where( .prev , .next ) a{
	background-color : var( --color01 );
	border-color : var( --color01 );
}
#pagination :where( .prev , .next ) a img{
	filter : var( --filterWhite );
}
@media screen and ( width <= 750px ){
	#pagination ul{
		grid-auto-rows : calc( 40 var( --remBase ) );
		column-gap : calc( 8 var( --remBase ) );
	}
	#pagination li:not( :has( .prev , .next ) ) a , #pagination span{
		font-size : 1.6rem;
	}
	#pagination :where( .prev , .next ) img{
		height : calc( 14 var( --remBase ) );
	}
	#pagination .prev{
		left : calc( -48 var( --remBase ) );
	}
	#pagination .next{
		right : calc( -48 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#pagination ul{
		grid-auto-rows : calc( 40 var( --remBase ) );
		column-gap : calc( 8 var( --remBase ) );
	}
	#pagination li:not( :has( .prev , .next ) ) a , #pagination span{
		font-size : 1.6rem;
	}
	#pagination :where( .prev , .next ) img{
		height : calc( 14 var( --remBase ) );
	}
	#pagination .prev{
		left : calc( -48 var( --remBase ) );
	}
	#pagination .next{
		right : calc( -48 var( --remBase ) );
	}
}
@media ( hover : hover ){
	#pagination li:not( .prev , .next ) a:hover{
		color : white;
		background-color : var( --color01 );
		border-color : var( --color01 );
	}
	#pagination :where( .prev , .next ) a:hover{
		background-color : white;
	}
	#pagination :where( .prev , .next ) a:hover img{
		filter : var( --filterColor01 );
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#pagination li:not( .prev , .next ) a{
		transition : color var( --transitionBase ) , background-color var( --transitionBase ) , border-color var( --transitionBase );
	}
	#pagination :where( .prev , .next ) a{
		transition : background-color var( --transitionBase );
	}
	#pagination :where( .prev , .next ) a img{
		transition : filter var( --transitionBase );
	}
}

/* --------------------------------------------
NEWS
--------------------------------------------- */
#news h2{
	font-weight : 500;
	line-height : 1.3;
	text-align : center;
	text-indent : .1em;
	letter-spacing : .1em;
}
#news > ul > li > a{
	display : block;
	border-bottom : solid 1px #cfd2d9;
}
#news time{
	display : block;
}
#news h3{
	margin-top : calc( 8 var( --remBase ) );
	font-weight : 600;
	line-height : 1.3;
	color : var( --color01 );
	letter-spacing : .1em;
}
#news p{
	line-height : 2;
}
@media screen and ( width <= 750px ){
	#news h2{
		font-size : 3.2rem;
	}
	#news > ul{
		margin-top : calc( 24 var( --remBase ) );
	}
	#news > ul > li + li{
		margin-top : calc( 24 var( --remBase ) );
	}
	#news > ul > li > a{
		padding-bottom : calc( 24 var( --remBase ) );
	}
	#news time{
		font-size : 1.4rem;
		line-height : 1.5;
	}
	#news h3{
		font-size : 2rem;
	}
	#news p{
		margin-top : calc( 8 var( --remBase ) );
		font-size : 1.4rem;
	}
	#news #pagination{
		margin-top : calc( 40 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#news h2{
		font-size : 4.8rem;
	}
	#news > ul{
		margin-top : calc( 80 var( --remBase ) );
	}
	#news > ul > li + li{
		margin-top : calc( 80 var( --remBase ) );
	}
	#news > ul > li > a{
		padding-bottom : calc( 80 var( --remBase ) );
	}
	#news time{
		font-size : 2rem;
		line-height : 2;
	}
	#news h3{
		font-size : 3.2rem;
	}
	#news p{
		margin-top : calc( 16 var( --remBase ) );
		font-size : 2rem;
	}
	#news #pagination{
		margin-top : calc( 80 var( --remBase ) );
	}
}