@charset "UTF-8";

/* --------------------------------------------
ARTICLES
--------------------------------------------- */
@media screen and ( max-width : 750px ){
	#articles{
		padding-top : calc( 32 var( --remBase ) );
		padding-bottom : calc( 64 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 750.02px ){
	#articles{
		padding-top : calc( 16 var( --remBase ) );
		padding-bottom : calc( 40 var( --remBase ) );
	}
}

/* --------------------------------------------
ORDER
--------------------------------------------- */
#order{
	display : grid;
	grid-auto-flow : column;
	align-items : stretch;
	border-bottom-color : black;
	border-bottom-style : solid;
	border-bottom-width : calc( 2 var( --remBase ) );
}
#order button{
	position : relative;
	display : grid;
	align-items : center;
	justify-content : start;
	width : 100%;
	color : black;
	background-color : white;
	transition : background-color var( --transitionBase ) , color var( --transitionBase );
}
#order button::after{
	position : absolute;
	display : block;
	font-size : 0;
	content : "";
	background : url( "../images/ui/arrow/down.svg" ) center / contain no-repeat;
	transition : filter var( --transitionBase ) , rotate var( --transitionBase );
}
#order button.is-selected{
	color : white;
	background-color : black;
}
#order button.is-selected::after{
	filter : var( --filterWhite );
}
#order button.is-selected[value="asc"]::after{
	rotate : -180deg;
}
@media screen and ( max-width : 750px ){
	#order{
		column-gap : calc( 2 var( --viewportBase ) );
		justify-content : stretch;
		margin-top : calc( 44 var( --remBase ) );
		background-color : black;
	}
	#order button{
		height : calc( 74 var( --remBase ) );
		padding-left : calc( 41 var( --remBase ) );
		padding-right : calc( 59 var( --remBase ) );
		font-size : 3rem;
		font-weight : 500;
		letter-spacing : .05em;
	}
	#order button::after{
		top : calc( 25 var( --remBase ) );
		right : calc( 41 var( --remBase ) );
		width : calc( 20 var( --remBase ) );
		height : calc( 24 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 750.02px ){
	#order{
		justify-content : end;
		margin-top : calc( 24 var( --remBase ) );
	}
	#order button{
		height : calc( 34 var( --remBase ) );
		padding-left : calc( 18 var( --remBase ) );
		padding-right : calc( 33 var( --remBase ) );
		font-size : 1.4rem;
		letter-spacing : .05em;
		border-right : solid calc( 2 var( --remBase ) ) black;
	}
	#order button::after{
		top : calc( 11.5 var( --remBase ) );
		right : calc( 18 var( --remBase ) );
		width : calc( 8 var( --remBase ) );
		height : calc( 11 var( --remBase ) );
	}
}
@media ( hover : hover ){
	#order button:hover{
		color : white;
		background-color : black;
	}
	#order button:hover::after{
		filter : var( --filterWhite );
	}
	#order button.is-selected[value="desc"]:hover::after{
		rotate : -180deg;
	}
	#order button.is-selected[value="asc"]:hover::after{
		rotate : 0deg;
	}
}

/* --------------------------------------------
LIST
--------------------------------------------- */
#list{
	border-bottom-color : black;
	border-bottom-style : solid;
}
#list > li + li{
	border-top-color : black;
	border-top-style : solid;
}
#list a{
	display : grid;
	align-items : start;
}
#list picture{
	width : 100%;
}
#list picture img{
	width : 100%;
	height : 100%;
	object-fit : cover;
}
#list h3{
	font-weight : 700;
	line-height : 1.56;
	letter-spacing : .05em;
}
#list p{
	display : -webkit-box;
	overflow : hidden;
	line-height : 1.56;
	letter-spacing : .05em;
	-webkit-box-orient : vertical;
}
@media screen and ( max-width : 750px ){
	#list{
		border-bottom-width : calc( 2 var( --remBase ) );
	}
	#list > li + li{
		border-top-width : calc( 2 var( --remBase ) );
	}
	#list a{
		grid-template-rows : auto auto ;
		grid-template-columns : 1fr calc( 240 var( --percentBase ) );
		row-gap : calc( 8 var( --remBase ) );
		column-gap : calc( 30 var( --percentBase ) );
		padding-block : calc( 32 var( --remBase ) );
	}
	#list h3{
		grid-row : 1;
		grid-column : 1;
		font-size : 3.2rem;
	}
	#list p{
		grid-row : 2;
		grid-column : 1;
		font-size : 2.4rem;
		-webkit-line-clamp : 3;
	}
	#list picture{
		grid-row : 1/3;
		grid-column : 2;
		height : calc( 180 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 750.02px ){
	#list{
		border-bottom-width : calc( 2 var( --remBase ) );
	}
	#list > li + li{
		border-top-width : calc( 2 var( --remBase ) );
	}
	#list a{
		grid-template-rows : auto calc( 4 var( --remBase ) ) auto calc( 4 var( --remBase ) ) auto;
		grid-template-columns : calc( 200 var( --mainBase ) ) 1fr;
		column-gap : calc( 16 var( --mainBase ) );
		padding-block : calc( 16 var( --remBase ) );
	}
	#list h3{
		grid-row : 1;
		grid-column : 2;
		font-size : 1.6rem;
	}
	#list p{
		grid-row : 3;
		grid-column : 2;
		font-size : 1.4rem;
		-webkit-line-clamp : 2;
	}
	#list picture{
		grid-row : 1/6;
		grid-column : 1;
		height : calc( 130 var( --remBase ) );
	}
/*--
	#list dl{
		display : grid;
		grid-template-columns : auto 1fr;
		grid-row : 5;
		grid-column : 2;
		column-gap : calc( 28 * 100% / 684 );
	}
---*/
	#list dl{
		display : flex;
		flex-wrap: wrap;
		grid-row : 5;
		grid-column : 2;
		column-gap : calc( 28 * 100% / 684 );
	}
	#list dl > div{
		display : grid;
		grid-template-columns : auto auto;
		align-items : start;
		justify-content : start;
		min-width: 150px;
	}
	#list dt , #list dd{
		line-height : 1.56;
		letter-spacing : .05em;
	}
	#list dt{
		padding-top : calc( ( ( ( 14 * 1.56 ) - ( 12 * 1.56 ) ) / 2 ) var( --remBase ) );
		font-size : 1.2rem;
	}
	#list dd{
		font-size : 1.4rem;
	}
}

/* --------------------------------------------
PAGINATION
--------------------------------------------- */
#pagination{
	position : relative;
	left : 50%;
	display : inline-grid;
	grid-auto-flow : column;
	translate : -50% 0;
}
#pagination a , #pagination span{
	position : relative;
	display : grid;
	place-items : center;
}
#pagination .prev{
	position : absolute;
	left : 0;
}
#pagination .next{
	position : absolute;
	right : 0;
}
#pagination .current{
	outline-style : solid;
	outline-color : black;
}
#pagination a{
	transition : color var( --transitionBase ) , background var( --transitionBase );
}
#pagination .prev{
	translate : -150% 0;
}
#pagination .next{
	translate : 150% 0;
}
#pagination :where( .prev , .next ) img{
	transition : filter var( --transitionBase );
}
@media screen and ( max-width : 750px ){
	#pagination a , #pagination span{
		width : calc( 64 var( --remBase ) );
		height : calc( 67 var( --remBase ) );
	}
	#pagination a:not(.prev, .next), #pagination span{
		font-size : 4rem;
	}
	#pagination .current{
		outline-width : calc( 2 var( --remBase ) );
		outline-offset : calc( -2 var( --remBase ) );
	}
	#pagination .prev img , #pagination .next img{
		height : calc( 52 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 750.02px ){
	#pagination a , #pagination span{
		width : calc( 20 var( --remBase ) );
		height : calc( 24 var( --remBase ) );
	}
	#pagination a:not(.prev, .next), #pagination span{
		font-size : 1.4rem;
	}
	#pagination .current{
		outline-width : 1px;
		outline-offset : -1px;
	}
	#pagination .prev img , #pagination .next img{
		height : calc( 10 var( --remBase ) );
	}
}
@media screen and ( max-width : 750px ){
	#list + #pagination{
		margin-top : calc( 60 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 750.02px ){
	#list + #pagination{
		margin-top : calc( 25 var( --remBase ) );
	}
}
@media ( hover : hover ){
	#pagination a:hover{
		color : white;
		background-color : black;
	}
	#pagination a:hover img{
		filter : var( --filterWhite );
	}
}

/* --------------------------------------------
SEARCH
--------------------------------------------- */
#search{
	background-color : #e7e7e7;
	border-bottom-color : black;
	border-bottom-style : solid;
}
#search h4{
	font-family : "Noto Serif Japanese" , serif;
	font-weight : 900;
	line-height : normal;
	text-align : center;
}
#search .tags{
	display : flex;
	flex-wrap : wrap;
	align-items : start;
	justify-content : center;
}
#search .tags label span{
	position : relative;
	display : grid;
	grid-auto-flow : column;
	align-items : center;
	justify-content : start;
	cursor : pointer;
}
#search .tags label span::before{
	display : grid;
	flex-shrink : 0;
	place-items : center;
	font-size : 0;
	content : "";
}
#search .tags label input[type="checkbox"]{
	position : absolute;
	visibility : hidden;
	opacity : 0;
}
#search .tags span{
	font-family : "Noto Serif Japanese" , serif;
	font-weight : 500;
}
#search .tags input:checked + span{
	-webkit-text-decoration : underline;
	text-decoration : underline;
	text-decoration-thickness : calc( 2 var( --remBase ) );
	text-underline-offset : calc( 2 var( --remBase ) );
}
#search .form01{
	display : grid;
	align-items : stretch;
	justify-content : space-between;
}
#search .form01 input{
	background-color : white;
	border-color : black;
	border-style : solid;
}
#search .form01 input:placeholder{
	color : #838383;
}
#search .form01 button{
	display : grid;
	place-items : center;
	background-color : black;
}
#search .form02{
	display : grid;
}
#search .form02 h5{
	display : grid;
	align-items : center;
	font-weight : 400;
	line-height : 1.56;
	letter-spacing : .05em;
}
#search .form02 h5::before{
	display : block;
	font-size : 0;
	content : "";
	background-color : black;
}
#search .form02 ul{
	display : flex;
	flex-wrap : wrap;
}
#search .form02 ul > li{
	flex-grow : 1;
	min-width : 50%;
}
#search .form02 label span{
	position : relative;
	display : grid;
	grid-auto-flow : column;
	align-items : center;
	justify-content : start;
	cursor : pointer;
}
#search .form02 label span::before{
	display : grid;
	flex-shrink : 0;
	place-items : center;
	font-size : 0;
	content : "";
}
#search .form02 label input[type="checkbox"]{
	position : absolute;
	visibility : hidden;
	opacity : 0;
}
#search .form02 label span{
	padding-right : 1em;
	line-height : 1.56;
	letter-spacing : .05em;
}
#search .form02 label span::before{
	background-color : white;
	border-color : black;
	border-style : solid;
}
#search .form02 label input:checked + span::after{
	position : absolute;
	top : 50%;
	display : block;
	content : "";
	background : url( "../images/ui/icon/check.svg" ) center / contain no-repeat;
	translate : 0 -50%;
}
#search .form02 button{
	display : grid;
	align-items : center;
	justify-content : center;
	font-weight : 700;
	color : #f5f5f5;
	background-color : black;
}
#search .form02 button::before{
	display : block;
	font-size : 0;
	content : "";
	background : url( "../images/ui/icon/search.svg" ) center / contain no-repeat;
}
@media screen and ( max-width : 750px ){
	#search{
		position : fixed;
		top : 0;
		left : 0;
		z-index : 12;
		width : 100%;
		height : 100dvh;
		max-height : 0;
		overflow-y : auto;
		transition : max-height .5s ease-in;
	}
	#search .scroll{
		position : relative;
		padding-inline : calc( 80 var( --viewportBase ) );
		padding-top : calc( 80 var( --remBase ) );
		padding-bottom : calc( 32 var( --remBase ) );
	}
	#search #closeSearch{
		position : absolute;
		top : calc( 40 var( --remBase ) );
		right : calc( 40 var( --viewportBase ) );
		display : block;
		width : fit-content;
	}
	#search #closeSearch img{
		height : calc( 78 var( --remBase ) );
	}
	#search h4{
		font-size : 5.6rem;
	}
	#search .tags{
		column-gap : calc( 40 * 100% / 590 );
		margin-top : calc( 24 var( --remBase ) );
	}
	#search .tags span{
		font-size : 4rem;
		line-height : 1.4;
	}
	#search .tags + h4{
		margin-top : calc( 64 var( --remBase ) );
	}
	#search .form01{
		grid-template-columns : calc( 494 * 100% / 590 ) calc( 80 * 100% / 590 );
		height : calc( 80 var( --remBase ) );
		margin-top : calc( 24 var( --remBase ) );
	}
	#search .form01 input{
		padding-inline : calc( 24 * 100% / 494 );
		font-size : 3rem;
		border-width : calc( 2 var( --remBase ) );
	}
	#search .form01 button{
		border-radius : calc( 10 var( --remBase ) );
	}
	#search .form01 button img{
		height : calc( 38 var( --remBase ) );
	}
	#search .form02{
		grid-template-rows : 1fr;
		margin-top : calc( 63 var( --remBase ) );
	}
	#search .form02 h5{
		grid-template-columns : calc( 41 * 100% / 590 ) auto;
		column-gap : calc( 15 * 100% / 590 );
		font-size : 3rem;
	}
	#search .form02 h5::before{
		height : calc( 41 var( --remBase ) );
	}
	#search .form02 ul{
		row-gap : calc( 29 var( --remBase ) );
		margin-top : calc( 32 var( --remBase ) );
	}
	#search .form02 label span{
		grid-template-columns : calc( 41 var( --remBase ) ) auto;
		column-gap : calc( 15 var( --remBase ) );
		font-size : 3rem;
	}
	#search .form02 label span::before{
		height : calc( 41 var( --remBase ) );
		border-width : calc( 2 var( --remBase ) );
	}
	#search .form02 label input:checked + span::after{
		left : calc( 2 var( --remBase ) );
		width : calc( 37 var( --remBase ) );
		height : calc( 32 var( --remBase ) );
		margin-top : calc( 4.5 var( --remBase ) );
	}
	#search .form02 ul + h5{
		margin-top : calc( 46 var( --remBase ) );
	}
	#search .form02 button{
		grid-template-columns : calc( 30 * 100% / 380 ) auto;
		column-gap : calc( 19 * 100% / 380 );
		width : calc( 380 * 100% / 590 );
		height : calc( 92 var( --remBase ) );
		margin-inline : auto;
		margin-top : calc( 60 var( --remBase ) );
		font-size : 3.2rem;
		border-radius : 100vmax;
	}
	#search .form02 button::before{
		height : calc( 27 var( --remBase ) );
	}
	#search #btnForm02{
		row-gap : calc( 12 var( --remBase ) );
		margin-top : calc( 32 var( --remBase ) );
		font-size : 1.2rem;
	}
	#search #btnForm02::after{
		width : calc( 8 var( --remBase ) );
		height : calc( 10 var( --remBase ) );
	}
	#search #btnForm02.is-open{
		row-gap : calc( 8 var( --remBase ) );
	}
	#search #btnForm02.is-open::before{
		font-size : 1.2rem;
	}
}
@media print , screen and ( min-width : 750.02px ){
	#search{
		padding-inline : calc( 24 * 100% / 308 );
		padding-top : calc( 24 var( --remBase ) );
		padding-bottom : calc( 49 var( --remBase ) );
		border-bottom-width : calc( 2 var( --remBase ) );
	}
	#search h4{
		font-size : 2.4rem;
	}
	#search .tags{
		column-gap : calc( 16 * 100% / 196 );
		padding-inline : calc( 16  var( --sidebarBase ) );
		margin-top : calc( 8 var( --remBase ) );
	}
	#search .tags span{
		font-size : 1.6rem;
		line-height : calc( 27 / 16 );
	}
	#search .tags + h4{
		margin-top : calc( 24 var( --remBase ) );
	}
	#search .form01{
		grid-template-columns : calc( 211 var( --sidebarBase ) ) calc( 40 var( --sidebarBase ) );
		height : calc( 40 var( --remBase ) );
		margin-top : calc( 8 var( --remBase ) );
	}
	#search .form01 input{
		padding-inline : calc( 16 * 100% / 207 );
		font-size : 1.4rem;
		border-width : calc( 2 var( --remBase ) );
	}
	#search .form01 button{
		border-radius : calc( 5 var( --remBase ) );
	}
	#search .form01 button img{
		height : calc( 20 var( --remBase ) );
	}
	#search .form02{
		grid-template-rows : 0fr;
		transition : grid-template-rows var( --transitionBase );
	}
	#search .form02.is-open{
		grid-template-rows : 1fr;
	}
	#search .form02 > div{
		overflow : hidden;
	}
	#search .form02 h5:first-of-type{
		margin-top : calc( 35 var( --remBase ) );
	}
	#search .form02 h5{
		grid-template-columns : calc( 16 var( --sidebarBase ) ) auto;
		column-gap : calc( 5 var( --sidebarBase ) );
		font-size : 1.4rem;
	}
	#search .form02 h5::before{
		height : calc( 16 var( --remBase ) );
	}
	#search .form02 ul{
		row-gap : calc( 14 var( --remBase ) );
		margin-top : calc( 16 var( --remBase ) );
	}
	#search .form02 label span{
		grid-template-columns : calc( 16 var( --remBase ) ) auto;
		column-gap : calc( 5 var( --sidebarBase ) );
		font-size : 1.4rem;
	}
	#search .form02 label span::before{
		height : calc( 16 var( --remBase ) );
		border-width : 1px;
	}
	#search .form02 label input:checked + span::after{
		left : calc( .5 var( --remBase ) );
		width : calc( 15 var( --remBase ) );
		height : calc( 11 var( --remBase ) );
		margin-top : calc( 2 var( --remBase ) );
	}
	#search .form02 ul + h5{
		margin-top : calc( 46 var( --remBase ) );
	}
	#search .form02 button{
		grid-template-columns : calc( 19 var( --sidebarBase ) ) auto;
		column-gap : calc( 8 var( --sidebarBase ) );
		width : 100%;
		height : calc( 50 var( --remBase ) );
		margin-top : calc( 32 var( --remBase ) );
		margin-bottom : calc( 16 var( --remBase ) );
		font-size : 1.8rem;
		border-radius : calc( 5 var( --remBase ) );
	}
	#search .form02 button::before{
		height : calc( 16 var( --remBase ) );
	}
	#search #btnForm02{
		display : grid;
		row-gap : calc( 12 var( --remBase ) );
		align-items : start;
		justify-content : center;
		width : fit-content;
		margin-inline : auto;
		margin-top : calc( 32 var( --remBase ) );
		font-size : 1.2rem;
		line-height : normal;
	}
	#search #btnForm02::after{
		display : block;
		width : calc( 8 var( --remBase ) );
		height : calc( 10 var( --remBase ) );
		margin-inline : auto;
		font-size : 0;
		content : "";
		background : url( "../images/ui/arrow/double/down.svg" ) 0 0 / contain no-repeat;
		transition : rotate var( --transitionBase );
	}
}
@media print , screen and ( min-width : 750.02px ){
	#form02.is-open + #btnForm02{
		row-gap : calc( 8 var( --remBase ) );
		font-size : 0;
	}
	#form02.is-open + #btnForm02::before{
		font-size : 1.2rem;
		line-height : normal;
		content : attr( data-close );
	}
	#form02.is-open + #btnForm02::after{
		order : -1;
		rotate : -180deg;
	}
}
@media screen and ( max-width : 750px ){
	body.is-search{
		overflow : hidden;
	}
	body.is-search #search{
		max-height : 100dvh;
	}
}
#sidebarNews{
	display : grid;
	grid-template-columns : auto 1fr auto;
	align-items : center;
	justify-content : space-between;
	background-color : #e7e7e7;
	border-bottom-color : black;
	border-bottom-style : solid;
}
#sidebarNews h4{
	grid-row : 1;
	grid-column : 1;
	font-weight : 700;
	line-height : normal;
}
#sidebarNews > a{
	display : grid;
	grid-row : 1;
	grid-column : 3;
	align-items : baseline;
	line-height : normal;
}
#sidebarNews > a::before{
	display : block;
	content : "";
	background : url( "../images/ui/arrow/double/right.svg" ) center / contain no-repeat;
}
#sidebarNews ul{
	grid-row : 2;
	grid-column : 1/4;
}
#sidebarNews li a{
	display : block;
}
#sidebarNews time{
	line-height : 1.3;
	color : #767676;
}
#sidebarNews h5{
	font-weight : 400;
	line-height : normal;
}
@media screen and ( max-width : 750px ){
	#sidebarNews{
		row-gap : calc( 14 var( --remBase ) );
		padding-top : calc( 34 var( --remBase ) );
		padding-bottom : calc( 73 var( --remBase ) );
		margin-top : calc( 152 var( --remBase ) );
		border-bottom-width : calc( 2 var( --remBase ) );
	}
	#sidebarNews h4{
		font-size : 3.2rem;
	}
	#sidebarNews > a{
		grid-template-columns : calc( 14 var( --remBase ) ) auto;
		column-gap : calc( 11 var( --remBase ) );
		font-size : 2.2rem;
	}
	#sidebarNews > a::before{
		height : calc( 18 var( --remBase ) );
	}
	#sidebarNews li + li{
		margin-top : calc( 58 var( --remBase ) );
	}
	#sidebarNews time{
		font-size : 2.2rem;
	}
	#sidebarNews h5{
		font-size : 3rem;
	}
}
@media print , screen and ( min-width : 750.02px ){
	#sidebarNews{
		row-gap : calc( 15 var( --remBase ) );
		padding-inline : calc( 24 * 100% / 308 );
		padding-top : calc( 16 var( --remBase ) );
		padding-bottom : calc( 19 var( --remBase ) );
		border-bottom-width : calc( 2 var( --remBase ) );
	}
	#sidebarNews h4{
		font-size : 1.4rem;
	}
	#sidebarNews > a{
		grid-template-columns : calc( 8 var( --remBase ) ) auto;
		column-gap : calc( 8 var( --remBase ) );
		font-size : 1.2rem;
	}
	#sidebarNews > a::before{
		height : calc( 10 var( --remBase ) );
	}
	#sidebarNews li + li{
		margin-top : calc( 10 var( --remBase ) );
	}
	#sidebarNews time{
		font-size : 1.2rem;
	}
	#sidebarNews h5{
		margin-top : calc( 4 var( --remBase ) );
		font-size : 1.4rem;
	}
}

/* --------------------------------------------
FOOTER
--------------------------------------------- */
#footer{
	background-color : #e7e7e7;
}
#footer ul{
	display : grid;
	grid-auto-flow : column;
	align-items : start;
}
#footer a{
	line-height : normal;
	-webkit-text-decoration : underline;
	text-decoration : underline;
}
#footer p{
	line-height : normal;
}
#footer .credit {
}
	#footer .credit ol {
		display: flex;
		align-items: center;
		justify-content: center;
		column-gap: 20px;
		margin-top: 1em;
	}
		#footer .credit ol li {
		}
		#footer .credit ol li img {
			height: auto;
		}
	#footer .credit p {
		margin-bottom: 2em;
		text-align: left;
	}
@media screen and ( max-width : 750px ){
	#footer{
		padding-top : calc( 32 var( --remBase ) );
		padding-bottom : calc( 31 var( --remBase ) );
	}
	#footer ul{
		column-gap : calc( 50 var( --percentBase ) );
		justify-content : center;
	}
	#footer a{
		font-size : 2.2rem;
	}
	#footer p{
		margin-top : calc( 39 var( --remBase ) );
		font-size : 2.2rem;
		text-align : center;
	}
		#footer .credit ol li img {
			height: calc( 120 var( --remBase ) );
		}
	#footer .credit p {
	}
}
@media print , screen and ( min-width : 750.02px ){
	#footer{
		padding-inline : calc( 24 * 100% / 308 );
		padding-top : calc( 8 var( --remBase ) );
		padding-bottom : calc( 16 var( --remBase ) );
	}
	#footer ul{
		column-gap : calc( 10 * 100% / 260 );
		justify-content : start;
	}
	#footer a{
		font-size : 1rem;
	}
	#footer p{
		margin-top : calc( 9 var( --remBase ) );
		font-size : 1rem;
	}
		#footer .credit ol li img {
			height: 80px;
		}
	#footer .credit p {
		font-size : 1.3rem;
	}
}