@charset "UTF-8";

/* --------------------------------------------
CASE
--------------------------------------------- */
#case{
	padding-bottom : calc( 80 var( --remBase ) );
}
#caseThumbnail img {
	max-width: 100%;
	height: auto;
}
@media print , screen and ( width > 750px ){
	#case{
		display : grid;
		grid-template-rows : repeat( 5 , auto );
		grid-template-columns : calc( 440 var( --percentBase ) ) calc( 920 var( --percentBase ) );
		align-items : start;
		justify-content : space-between;
	}
}
@media print , screen and ( width > 750px ){
	#caseThumbnail{
		grid-row : 1;
		grid-column : 2;
	}
}
#caseInfo h2{
	font-weight : 700;
	line-height : 1.3;
	color : var( --title );
	letter-spacing : .1em;
}
#caseInfo dl{
	display : grid;
}
#caseInfo dt , #caseInfo dd{
	padding-bottom : calc( 8 var( --remBase ) );
	color : #3b3938;
	border-bottom : solid 1px #d9d9d9;
}
#caseInfo dt:not( :first-of-type ) , #caseInfo dd:not( :first-of-type ){
	padding-top : calc( 8 var( --remBase ) );
}
#caseInfo ul{
	display : flex;
	flex-wrap : wrap;
	row-gap : calc( 8 var( --remBase ) );
}
#caseInfo li{
	display : grid;
	place-items : center;
	padding-inline : calc( 8 var( --remBase ) );
	line-height : 1.3;
	color : #333;
	background-color : #f1f2ed;
}
@media screen and ( width <= 750px ){
	#caseInfo{
		margin-top : calc( 16 var( --remBase ) );
	}
	#caseInfo h2{
		font-size : 2.4rem;
	}
	#caseInfo dl{
		grid-template-columns : calc( 117 var( --percentBase ) ) calc( 219 var( --percentBase ) );
		margin-top : calc( 16 var( --remBase ) );
	}
	#caseInfo dt , #caseInfo dd{
		font-size : 1.4rem;
		line-height : 2;
	}
	#caseInfo ul{
		column-gap : calc( 8 * 100% / 219 );
	}
	#caseInfo li{
		height : calc( 26 var( --remBase ) );
		font-size : 1.4rem;
	}
}
@media print , screen and ( width > 750px ){
	#caseInfo{
		position : sticky;
		top : calc( 160 var( --remBase ) );
		z-index : 1;
		grid-row : 1/-1;
		grid-column : 1;
	}
	#caseInfo h2{
		width : calc( 444 * 100% / 440 );
		padding-block : calc( 40 var( --remBase ) );
		font-size : 4rem;
		background-color : white;
	}
	#caseInfo dl{
		grid-template-columns : calc( 160 * 100% / 440 ) calc( 280 * 100% / 440 );
	}
	#caseInfo dt , #caseInfo dd{
		font-size : 1.6rem;
		line-height : 1.7;
	}
	#caseInfo ul{
		column-gap : calc( 8 * 100% / 280 );
	}
	#caseInfo li{
		height : calc( 29 var( --remBase ) );
		font-size : 1.6rem;
	}
}

/* --------------------------------------------
INTERVIEW
--------------------------------------------- */
#interview{
	padding-bottom : calc( 80 var( --remBase ) );
}
@media print , screen and ( width > 750px ){
	#interview{
		display : grid;
		grid-template-rows : repeat( 3 , auto );
		grid-template-columns : calc( 440 var( --percentBase ) ) calc( 920 var( --percentBase ) );
		align-items : start;
		justify-content : space-between;
	}
}
#interviewTitle{
	font-weight : 700;
	line-height : 1.3;
	letter-spacing : .1em;
}
@media print , screen and ( width > 750px ){
	#interviewTitle{
		grid-row : 1;
		grid-column : 2;
		font-size : 4rem;
	}
}
#interviewInfo dl{
	display : grid;
}
#interviewInfo dt , #interviewInfo dd{
	padding-bottom : calc( 8 var( --remBase ) );
	color : #3b3938;
	border-bottom : solid 1px #d9d9d9;
}
#interviewInfo dt:not( :first-of-type ) , #interviewInfo dd:not( :first-of-type ){
	padding-top : calc( 8 var( --remBase ) );
}
#interviewInfo ul{
	display : flex;
	flex-wrap : wrap;
	row-gap : calc( 8 var( --remBase ) );
}
#interviewInfo li{
	display : grid;
	place-items : center;
	padding-inline : calc( 8 var( --remBase ) );
	line-height : 1.3;
	color : #333;
	background-color : #f1f2ed;
}
@media screen and ( width <= 750px ){
	#interviewInfo #interviewTitle{
		margin-top : calc( 16 var( --remBase ) );
		font-size : 2.4rem;
	}
	#interviewInfo dl{
		grid-template-columns : calc( 117 var( --percentBase ) ) calc( 219 var( --percentBase ) );
		margin-top : calc( 16 var( --remBase ) );
	}
	#interviewInfo dt , #interviewInfo dd{
		font-size : 1.4rem;
		line-height : 2;
	}
	#interviewInfo ul{
		column-gap : calc( 8 * 100% / 219 );
	}
	#interviewInfo li{
		height : calc( 26 var( --remBase ) );
		font-size : 1.4rem;
	}
}
@media print , screen and ( width > 750px ){
	#interviewInfo{
		position : sticky;
		top : calc( 200 var( --remBase ) );
		z-index : 1;
		grid-row : 1/-1;
		grid-column : 1;
	}
	#interviewInfo dl{
		grid-template-columns : calc( 160 * 100% / 440 ) calc( 280 * 100% / 440 );
		margin-top : calc( 24 var( --remBase ) );
	}
	#interviewInfo dt , #interviewInfo dd{
		font-size : 1.6rem;
		line-height : 1.7;
	}
	#interviewInfo ul{
		column-gap : calc( 8 * 100% / 280 );
	}
	#interviewInfo li{
		height : calc( 29 var( --remBase ) );
		font-size : 1.6rem;
	}
}

/* --------------------------------------------
NEWS
COLUMN
--------------------------------------------- */
:where( #news , #column ) header{
	display : grid;
	grid-template-columns : auto 1fr;
}
:where( #news , #column ) header time{
	grid-row : 1;
	grid-column : 1;
	line-height : 1.5;
	color : #333;
}
:where( #news , #column ) header p{
	display : grid;
	grid-row : 1;
	grid-column : 2;
	place-items : center;
	width : fit-content;
	color : white;
}
:where( #news , #column ) header h2{
	grid-row : 2;
	grid-column : 1/-1;
	font-weight : 700;
	letter-spacing : .1em;
}
:where( #news , #column ) header picture{
	grid-row : 3;
	grid-column : 1/3;
	margin-top : calc( 16 var( --remBase ) );
}
@media screen and ( width <= 750px ){
	:where( #news , #column ){
		padding-bottom : calc( 120 var( --remBase ) );
	}
	:where( #news , #column ) header{
		row-gap : calc( 16 var( --remBase ) );
		column-gap : calc( 9 var( --percentBase ) );
	}
	:where( #news , #column ) header time{
		margin-top : calc( 2.5 var( --remBase ) );
		font-size : 1.4rem;
	}
	:where( #news , #column ) header p{
		height : calc( 26 var( --remBase ) );
		padding-inline : calc( 8 var( --remBase ) );
		font-size : 1.4rem;
		line-height : 1.3;
	}
	:where( #news , #column ) header h2{
		font-size : 2.4rem;
		line-height : 1.5;
	}
}
@media print , screen and ( width > 750px ){
	:where( #news , #column ){
		display : grid;
		grid-template-columns : calc( 1040 var( --percentBase ) ) calc( 320 var( --percentBase ) );
		align-items : start;
		justify-content : space-between;
		padding-bottom : calc( 80 var( --remBase ) );
	}
	:where( #news , #column ) header{
		column-gap : calc( 16 * 100% / 1040 );
	}
	:where( #news , #column ) header time{
		margin-top : calc( 7 var( --remBase ) );
		font-size : 2rem;
		line-height : 1.5;
	}
	:where( #news , #column ) header p{
		height : calc( 44 var( --remBase ) );
		padding-inline : calc( 16 var( --remBase ) );
		font-size : 2rem;
		line-height : 2;
	}
	:where( #news , #column ) header h2{
		margin-top : calc( 40 var( --remBase ) );
		font-size : 4rem;
		line-height : 1.3;
	}
	:where( #news , #column ) header picture{
		margin-top : calc( 16 var( --remBase ) );
	}
}