@charset "UTF-8";

/* --------------------------------------------
COMMON
--------------------------------------------- */
#pagination{
	position : relative;
	left : 50%;
	display : inline-grid;
	grid-auto-flow : column;
	translate : -50% 0;
}
#pagination a , #pagination span{
	display : grid;
	place-items : center;
	width : auto;
	height : 100%;
	aspect-ratio : 1;
}
#pagination :where( .prev , .next ){
	position : absolute;
	height : 100%;
}
#pagination{
	column-gap : calc( 16 var( --remBase ) );
	justify-content : center;
	justify-self : start;
	height : calc( 40 var( --remBase ) );
}
#pagination .current , #pagination a{
	font-size : 1.5rem;
	border-style : solid;
	border-width : 1px;
}
#pagination a{
	color : #888;
	background-color : white;
	border-color : #cacaca;
}
#pagination .current{
	color : white;
}
#pagination .prev{
	left : calc( -56 var( --remBase ) );
}
#pagination .next{
	right : calc( -56 var( --remBase ) );
}
@media ( hover : hover ){
	#pagination a:hover{
		color : white;
		background-color : #a1b2da;
		border-color : #a1b2da;
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#pagination a{
		transition : background var( --transitionBase ) , color var( --transitionBase ) , border-color var( --transitionBase );
	}
}
#product #pagination .current{
	background-color : #a1b2da;
	border-color : #a1b2da;
}
#columnSet #pagination .current{
	background-color : var( --blue );
	border-color : var( --blue );
}

/* --------------------------------------------
PRODUCT
--------------------------------------------- */
#product > ul{
	display : grid;
	justify-content : space-between;
}
#product > ul > li , #product > ul > li > a{
	display : grid;
	grid-template-rows : subgrid;
	grid-row : span 3;
	row-gap : 0;
}
#product picture{
	width : 100%;
}
#product picture img{
	width : 100%;
	height : 100%;
	object-fit : cover;
	object-position : center;
}
#product h2 , #product p{
	line-height : 1.5;
	letter-spacing : .05em;
}
#product h2{
	font-weight : 700;
	color : var( --blue );
}
@media screen and ( width <= 750px ){
	#product{
		padding-bottom : calc( 80 var( --remBase ) );
	}
	#product > ul{
		grid-template-columns : repeat( 2 , calc( 157 var( --percentBase ) ) );
		row-gap : calc( 20 var( --remBase ) );
	}
	#product h2{
		display : -webkit-box;
		margin-top : calc( 8 var( --remBase ) );
		overflow : hidden;
		font-size : 1.5rem;
		-webkit-line-clamp : 2;
		-webkit-box-orient : vertical;
	}
	#product p{
		display : -webkit-box;
		margin-top : calc( 4 var( --remBase ) );
		overflow : hidden;
		font-size : 1.4rem;
		-webkit-line-clamp : 4;
		-webkit-box-orient : vertical;
	}
	#product #pagination{
		margin-top : calc( 40 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#product{
		padding-bottom : calc( 100 var( --remBase ) );
	}
	#product > ul{
		grid-template-columns : repeat( 3 , calc( 340 var( --percentBase ) ) );
		row-gap : calc( 40 var( --remBase ) );
	}
	#product h2{
		margin-top : calc( 16 var( --remBase ) );
		font-size : 1.6rem;
	}
	#product p{
		margin-top : calc( 12 var( --remBase ) );
		font-size : 1.5rem;
	}
	#product #pagination{
		margin-top : calc( 127 var( --remBase ) );
	}
}

/* --------------------------------------------
COLUMN
--------------------------------------------- */
@media screen and ( width <= 750px ){
	#columnSet{
		padding-bottom : calc( 48 var( --remBase ) );
	}
	#columnSet #pagination{
		margin-top : calc( 40 var( --remBase ) );
	}
	#columnSet #sidebar{
		margin-top : calc( 56 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#columnSet{
		display : grid;
		grid-template-rows : auto auto;
		grid-template-columns : calc( 840 var( --percentBase ) ) calc( 122 var( --percentBase ) );
		row-gap : calc( 143 var( --remBase ) );
		align-items : start;
		justify-content : space-between;
		padding-bottom : calc( 100 var( --remBase ) );
	}
	#columnSet #column{
		grid-row : 1;
		grid-column : 1;
	}
	#columnSet #sidebar{
		grid-row : 1;
		grid-column : 2;
	}
	#columnSet #pagination{
		grid-row : 2;
		grid-column : 1/3;
	}
}
#column > ul > li > a{
	display : grid;
}
#column time{
	align-self : center;
	font-size : 1.3rem;
	line-height : 1.2;
	color : #888;
	letter-spacing : .05em;
}
#column ul ul{
	display : flex;
	flex-wrap : wrap;
	align-items : center;
}
#column ul ul li{
	display : grid;
	place-items : center;
	height : calc( 25 var( --remBase ) );
	padding-inline : calc( 8 var( --remBase ) );
	font-size : 1.2rem;
	color : #69758e;
	border : solid 1px #cacaca;
}
#column h2{
	font-weight : 700;
	line-height : 1.5;
	color : var( --blue );
}
@media screen and ( width <= 750px ){
	#column > ul > li + li{
		margin-top : calc( 35 var( --remBase ) );
	}
	#column > ul > li > a{
		grid-template-rows : auto calc( 16 var( --remBase ) ) auto calc( 8 var( --remBase ) ) auto calc( 8 var( --remBase ) ) auto;
		grid-template-columns : auto auto;
		justify-content : space-between;
	}
	#column picture{
		grid-row : 1;
		grid-column : 1/-1;
	}
	#column picture img{
		width : 100%;
		height : auto;
	}
	#column time{
		grid-row : 3;
		grid-column : 1;
	}
	#column ul ul{
		grid-row : 3;
		grid-column : 2;
		justify-content : end;
	}
	#column h2 , #column p{
		grid-column : 1/-1;
		letter-spacing : .05em;
	}
	#column h2{
		grid-row : 5;
		font-size : 1.5rem;
	}
	#column p{
		display : -webkit-box;
		grid-row : 7;
		overflow : hidden;
		font-size : 1.5rem;
		line-height : 1.5;
		-webkit-line-clamp : 2;
		-webkit-box-orient : vertical;
	}
}
@media screen and ( width > 750px ) , print{
	#column > ul > li + li{
		margin-top : calc( 40 var( --remBase ) );
	}
	#column > ul > li > a{
		grid-template-rows : auto calc( 8 var( --remBase ) ) auto calc( 16 var( --remBase ) ) 1fr;
		grid-template-columns : calc( 232 * 100% / 840 ) calc( 24 * 100% / 840 ) calc( 87 * 100% / 840 ) 1fr;
		column-gap : calc( 24 * 100% / 840 );
	}
	#column picture{
		grid-row : 1/-1;
		grid-column : 1;
		align-items : start;
		height : calc( 155 var( --remBase ) );
	}
	#column picture img{
		width : 100%;
		height : 100%;
		object-fit : cover;
		object-position : center;
	}
	#column time{
		grid-row : 1;
		grid-column : 3;
	}
	#column ul ul{
		grid-row : 1;
		grid-column : 4;
		justify-content : start;
	}
	#column h2{
		grid-row : 3;
		grid-column : 3/-1;
		font-size : 1.6rem;
		line-height : 1.5;
	}
	#column p{
		display : -webkit-box;
		grid-row : 5;
		grid-column : 3/-1;
		overflow : hidden;
		font-size : 1.4rem;
		line-height : 1.8;
		-webkit-line-clamp : 3;
		-webkit-box-orient : vertical;
	}
}
#sidebar h4{
	font-weight : 700;
	border-left-color : currentColor;
	border-left-style : solid;
	border-left-width : calc( 3 var( --remBase ) );
}
#sidebar ul{
	margin-top : calc( 24 var( --remBase ) );
}
#sidebar a{
	display : grid;
	grid-template-columns : auto auto;
	align-items : start;
	justify-content : start;
	font-size : 1.5rem;
	line-height : 1.6;
}
#sidebar a::before{
	display : block;
	width : 100%;
	height : calc( 9 var( --remBase ) );
	aspect-ratio : 5/9;
	margin-top : calc( 7.5 var( --remBase ) );
	font-size : 0;
	content : "";
	background-image : url( "../images/ui/arrow/right01.svg" );
	filter : var( --filterBase );
	background-repeat : no-repeat;
	background-position : left center;
	background-size : contain;
}
@media screen and ( width <= 750px ){
	#sidebar h4{
		padding-left : calc( 16 var( --percentBase ) );
		font-size : 1.6rem;
	}
	#sidebar ul{
		display : grid;
		grid-template-columns : repeat( 2 , 50% );
		row-gap : calc( 16 var( --remBase ) );
	}
	#sidebar a{
		column-gap : calc( 7 * 100% / 155.5 );
		padding-inline : calc( 6 * 100% / 167.5 );
	}
	#sidebar ul + h4{
		margin-top : calc( 40 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#sidebar h4{
		padding-left : calc( 16 * 100% / 122 );
		font-size : 2rem;
	}
	#sidebar li + li{
		margin-top : calc( 8 var( --remBase ) );
	}
	#sidebar a{
		column-gap : calc( 7 * 100% / 110 );
		padding-inline : calc( 6 * 100% / 122 );
	}
	#sidebar ul + h4{
		margin-top : calc( 104 var( --remBase ) );
	}
}