@charset "UTF-8";

/* --------------------------------------------
CONTENT
--------------------------------------------- */
#content h2{
	font-family : Afacad , "Noto Sans JP" , serif;
	font-weight : 700;
	line-height : 1.2;
	color : var( --title );
}
#content h3{
	font-size : 3.2rem;
	font-weight : 700;
	line-height : 1.5;
}
#content p{
	font-size : 1.6rem;
	line-height : 2;
}
#content h3 + p{
	margin-top : calc( 16 var( --remBase ) );
}
#content h3 + picture{
	margin-top : calc( 16 var( --remBase ) );
}
#content picture + p{
	margin-top : calc( 16 var( --remBase ) );
}
@media screen and ( width <= 750px ){
	#content h2{
		font-size : 5rem;
	}
	#content .before_after + h2{
		margin-top : calc( 40 var( --remBase ) );
	}
	#content p + h3{
		margin-top : calc( 24 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#content h2{
		font-size : 7rem;
	}
	#content .before_after + h2{
		margin-top : calc( 40 var( --remBase ) );
	}
	#content p + h3{
		margin-top : calc( 24 var( --remBase ) );
	}
}
:where( #caseRelated , #interviewRelated ) h4{
	font-family : Afacad , sans-serif;
	font-weight : 700;
	line-height : 1.2;
}
:where( #caseRelated , #interviewRelated ) .splide{
	margin-top : calc( 16 var( --remBase ) );
}
:where( #caseRelated , #interviewRelated ) .splide__list{
	display : grid;
	grid-auto-flow : column;
}
:where( #caseRelated , #interviewRelated ) .splide__slide > li , :where( #caseRelated , #interviewRelated ) .splide__slide a , :where( #caseRelated , #interviewRelated ) .splide__slide section{
	display : grid;
	grid-template-rows : subgrid;
	grid-row : span 3;
}
:where( #caseRelated , #interviewRelated ) .splide__slide picture{
	width : 100%;
	height : calc( 207 var( --remBase ) );
}
:where( #caseRelated , #interviewRelated ) .splide__slide picture img{
	width : 100%;
	height : 100%;
	object-fit : cover;
	object-position : center;
}
:where( #caseRelated , #interviewRelated ) h5{
	font-size : 1.6rem;
	color : var( --title );
}
:where( #caseRelated , #interviewRelated ) .splide__slide ul{
	display : flex;
	flex-wrap : wrap;
	row-gap : calc( 8 var( --remBase ) );
	column-gap : calc( 8 * 100% / 320 );
	margin-top : calc( 8 var( --remBase ) );
}
:where( #caseRelated , #interviewRelated ) .splide__slide li{
	display : grid;
	place-items : center;
	height : calc( 26 var( --remBase ) );
	padding-inline : calc( 8 var( --remBase ) );
	font-size : 1.4rem;
	line-height : 1.3;
	color : white;
}
@media screen and ( width <= 750px ){
	:where( #caseRelated , #interviewRelated ){
		margin-top : calc( 40 var( --remBase ) );
	}
	:where( #caseRelated , #interviewRelated ) h4{
		font-size : 5rem;
	}
	:where( #caseRelated , #interviewRelated ) .splide__list{
		grid-auto-columns : calc( 320 * 100% / 368 );
	}
	:where( #caseRelated , #interviewRelated ) h5{
		margin-top : calc( 10 var( --remBase ) );
		font-weight : 400;
		line-height : 1.5;
	}
}
@media print , screen and ( width > 750px ){
	:where( #caseRelated , #interviewRelated ){
		grid-column : 2;
		margin-top : calc( 80 var( --remBase ) );
	}
	:where( #caseRelated , #interviewRelated ) h4{
		font-size : 7rem;
	}
	:where( #caseRelated , #interviewRelated ) .splide__list{
		grid-auto-columns : calc( 360 * 100% / 920 );
	}
	:where( #caseRelated , #interviewRelated ) h5{
		margin-top : calc( 13 var( --remBase ) );
		font-weight : 700;
		line-height : 1.3;
	}
}

/* --------------------------------------------
PAGINATION
--------------------------------------------- */
#pagination ul{
	display : grid;
	align-items : center;
}
#pagination li{
	width : auto;
}
#pagination a{
	display : grid;
	grid-row : 1;
	place-items : center;
}
#pagination .archive{
	grid-column : 2;
}
#pagination :where( .prev , .next ){
	aspect-ratio : 1;
}
#pagination .prev{
	grid-column : 1;
}
#pagination .next{
	grid-column : 3;
}
#pagination ul{
	column-gap : calc( 16 var( --remBase ) );
	justify-content : center;
}
#pagination :where( .prev , .next ){
	width : auto;
	height : calc( 40 var( --remBase ) );
	aspect-ratio : 1;
}
#pagination :where( .prev , .next ) a{
	display : grid;
	place-items : center;
	width : 100%;
	height : 100%;
	overflow : hidden;
	background-color : var( --base );
	border-radius : 50%;
}
#pagination :where( .prev , .next ) img{
	height : calc( 14 var( --remBase ) );
	filter : var( --filterWhite );
}
#pagination .archive a{
	display : grid;
	place-items : center;
	height : calc( 40 var( --remBase ) );
	padding-inline : calc( 19 var( --remBase ) );
	font-size : 1.6rem;
	font-weight : 500;
	line-height : 1.3;
}
@media ( hover : hover ){
	#pagination :where( .prev , .next ) a:hover{
		background-color : white;
	}
	#pagination :where( .prev , .next ) a:hover img{
		filter : var( --filterBase );
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#pagination :where( .prev , .next ) a:hover{
		transition : background-color var( --transitionBase );
	}
	#pagination :where( .prev , .next ) a:hover img{
		transition : filter var( --transitionBase );
	}
}

/* --------------------------------------------
CASE
--------------------------------------------- */
@media screen and ( width <= 750px ){
	.contentCase{
		margin-top : calc( 40 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	.contentCase{
		grid-row : 2;
		grid-column : 2;
		margin-top : calc( 80 var( --remBase ) );
	}
}
.before_after .splide{
	margin-top : calc( 16 var( --remBase ) );
}
.before_after .splide + h4{
	margin-top : calc( 24 var( --remBase ) );
}
.before_after .splide__slide img{
	height : calc( 240 var( --remBase ) );
}
.before_after .splide__pagination{
	row-gap : calc( 4 var( --remBase ) );
	justify-content : end;
	margin-top : calc( 6 var( --remBase ) );
}
.before_after .splide__pagination > li{
	height : calc( 6 var( --remBase ) );
}
.before_after .splide__pagination button:not( .is-active ){
	background-color : black;
}
.before_after .splide__pagination button.is-active{
	background-color : var( --yellow );
}
.before_after .splide__arrow{
	position : absolute;
	top : calc( 100 var( --remBase ) );
}
.before_after .splide__arrow img{
	height : calc( 51 var( --remBase ) );
}
@media screen and ( width <= 750px ){
	.before_after > li + li{
		margin-top : calc( 40 var( --remBase ) );
	}
	.before_after .splide__pagination{
		column-gap : calc( 4 * 100% / 368 );
	}
	.before_after .splide__pagination > li{
		width : calc( 60 * 100% / 368 );
	}
	.before_after .splide__arrow--prev{
		left : calc( 3 * 100% / 368 );
	}
	.before_after .splide__arrow--next{
		right : calc( 3 * 100% / 368 );
	}
}
@media print , screen and ( width > 750px ){
	.before_after > li + li{
		margin-top : calc( 80 var( --remBase ) );
	}
	.before_after .splide__pagination{
		column-gap : calc( 4 * 100% / 920 );
	}
	.before_after .splide__pagination > li{
		width : calc( 60 * 100% / 920 );
	}
	.before_after .splide__arrow--prev{
		left : calc( 8 * 100% / 920 );
	}
	.before_after .splide__arrow--next{
		right : calc( 8 * 100% / 920 );
	}
}
#caseFaq h3{
	font-family : Afacad , sans-serif;
	font-weight : 700;
	line-height : 1.2;
}
#caseFaq > p{
	margin-block : calc( 16 var( --remBase ) );
	line-height : 2;
}
@media screen and ( width <= 750px ){
	#caseFaq{
		margin-top : calc( 40 var( --remBase ) );
	}
	#caseFaq h3{
		font-size : 5rem;
	}
	#caseFaq > p{
		font-size : 1.4rem;
	}
}
@media print , screen and ( width > 750px ){
	#caseFaq{
		grid-row : 3;
		grid-column : 2;
		margin-top : calc( 80 var( --remBase ) );
	}
	#caseFaq h3{
		font-size : 7rem;
	}
	#caseFaq > p{
		font-size : 1.6rem;
	}
	#caseFaq summary{
		column-gap : calc( 18 * 100% / 920 );
	}
	#caseFaq summary span{
		font-size : 1.6rem;
	}
	#caseFaq .detailsContent{
		margin-left : calc( 80 * 100% / 920 );
	}
	#caseFaq .detailsContent > div{
		column-gap : calc( 18 * 100% / 840 );
	}
}
:where( #caseRelated , #interviewRelated ) h4{
	font-family : Afacad , sans-serif;
	font-weight : 700;
	line-height : 1.2;
}
:where( #caseRelated , #interviewRelated ) .splide{
	margin-top : calc( 16 var( --remBase ) );
}
:where( #caseRelated , #interviewRelated ) .splide__list{
	display : grid;
	grid-auto-flow : column;
}
:where( #caseRelated , #interviewRelated ) .splide__slide > li , :where( #caseRelated , #interviewRelated ) .splide__slide a , :where( #caseRelated , #interviewRelated ) .splide__slide section{
	display : grid;
	grid-template-rows : subgrid;
	grid-row : span 3;
}
:where( #caseRelated , #interviewRelated ) .splide__slide picture{
	width : 100%;
	height : calc( 207 var( --remBase ) );
}
:where( #caseRelated , #interviewRelated ) .splide__slide picture img{
	width : 100%;
	height : 100%;
	object-fit : cover;
	object-position : center;
}
:where( #caseRelated , #interviewRelated ) h5{
	font-size : 1.6rem;
	color : var( --title );
}
:where( #caseRelated , #interviewRelated ) .splide__slide ul{
	display : flex;
	flex-wrap : wrap;
	row-gap : calc( 8 var( --remBase ) );
	column-gap : calc( 8 * 100% / 320 );
	margin-top : calc( 8 var( --remBase ) );
}
:where( #caseRelated , #interviewRelated ) .splide__slide li{
	display : grid;
	place-items : center;
	height : calc( 26 var( --remBase ) );
	padding-inline : calc( 8 var( --remBase ) );
	font-size : 1.4rem;
	line-height : 1.3;
	color : white;
}
@media screen and ( width <= 750px ){
	:where( #caseRelated , #interviewRelated ){
		margin-top : calc( 40 var( --remBase ) );
	}
	:where( #caseRelated , #interviewRelated ) h4{
		font-size : 5rem;
	}
	:where( #caseRelated , #interviewRelated ) .splide__list{
		grid-auto-columns : calc( 320 * 100% / 368 );
	}
	:where( #caseRelated , #interviewRelated ) h5{
		margin-top : calc( 10 var( --remBase ) );
		font-weight : 400;
		line-height : 1.5;
	}
}
@media print , screen and ( width > 750px ){
	:where( #caseRelated , #interviewRelated ){
		grid-row : 4;
		grid-column : 2;
		margin-top : calc( 80 var( --remBase ) );
	}
	:where( #caseRelated , #interviewRelated ) h4{
		font-size : 7rem;
	}
	:where( #caseRelated , #interviewRelated ) .splide__list{
		grid-auto-columns : calc( 360 * 100% / 920 );
	}
	:where( #caseRelated , #interviewRelated ) h5{
		margin-top : calc( 13 var( --remBase ) );
		font-weight : 700;
		line-height : 1.3;
	}
}
:where( #case , #interview ) #pagination{
	grid-column : 1/-1;
	margin-top : calc( 120 var( --remBase ) );
}
@media print , screen and ( width > 750px ){
	#caseRelated{
		grid-row : 4;
	}
}
@media screen and ( width <= 750px ){
	#case #pagination{
		margin-top : calc( 60 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#case #pagination{
		grid-row : 5;
	}
}

/* --------------------------------------------
INTERVIEW
--------------------------------------------- */
@media screen and ( width <= 750px ){
	.contentInterview{
		margin-top : calc( 40 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	.contentInterview{
		grid-row : 2;
		grid-column : 2;
		margin-top : calc( 80 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#interviewRelated{
		grid-row : 3;
	}
}
@media screen and ( width <= 750px ){
	#interview #pagination{
		margin-top : calc( 180 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#interview #pagination{
		grid-row : 4;
	}
}

/* --------------------------------------------
NEWS
COLUMN
--------------------------------------------- */
:where( #news , #column ) #pagination{
	margin-top : calc( 80 var( --remBase ) );
}
@media screen and ( width <= 750px ){
	:where( #news , #column ) #content{
		margin-top : calc( 16 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	:where( #news , #column ) #content{
		grid-row : 2;
		grid-column : 1;
		margin-top : calc( 40 var( --remBase ) );
	}
	:where( #news , #column ) #pagination{
		grid-row : 3;
		grid-column : 1;
	}
}
@media print , screen and ( width > 750px ){
	:is( #content.contentNews , #content.contentColumn ) p + h4{
		margin-top : calc( 16 var( --remBase ) );
	}
}