@charset "UTF-8";

/* --------------------------------------------
PAGINATION
--------------------------------------------- */
#pagination ul{
	display : grid;
	align-items : center;
}
#pagination ul li{
	width : auto;
	height : 100%;
}
#pagination ul a{
	display : grid;
	grid-row : 1;
	place-items : center;
	width : auto;
}
#pagination ul .archive{
	grid-column : 2;
}
#pagination ul :where( .prev , .next ){
	aspect-ratio : 1;
}
#pagination ul .prev{
	grid-column : 1;
}
#pagination ul .next{
	grid-column : 3;
}
#pagination ul{
	justify-content : center;
}
#pagination a{
	height : calc( 40 var( --remBase ) );
	border : solid 1px #c4c4c4;
}
#pagination .prev img , #pagination .next img{
	height : calc( 14 var( --remBase ) );
	filter : var( --filterWhite );
}
#pagination .archive{
	font-weight : 500;
	line-height : 1.3;
}
@media screen and ( width <= 750px ){
	#pagination ul{
		grid-template-columns : calc( 40 var( --percentBase ) ) calc( 112 var( --percentBase ) ) calc( 40 var( --percentBase ) );
		column-gap : calc( 16 var( --percentBase ) );
	}
	#pagination .prev a , #pagination .next a{
		background-color : var( --green );
		border : solid 1px var( --green );
	}
	#pagination .archive{
		font-size : 1.6rem;
	}
}
@media screen and ( width > 750px ) , print{
	#pagination{
		margin-top : calc( 18 var( --remBase ) );
	}
	#pagination ul{
		grid-template-columns : calc( 40 * 100% / 1360 ) calc( 112 * 100% / 1360 ) calc( 40 * 100% / 1360 );
		column-gap : calc( 16 * 100% / 1360 );
	}
	#pagination .prev a , #pagination .next a{
		background-color : #c4c4c4;
		border : solid 1px #c4c4c4;
	}
	#pagination .archive{
		font-size : 1.4rem;
	}
}
@media ( hover : hover ){
	#pagination :is( .prev , .next ) a:hover{
		background-color : white;
	}
	#pagination :is( .prev , .next ) a:hover img{
		filter : var( --filterBase );
	}
	#pagination .archive a:hover{
		color : white;
		background-color : #c4c4c4;
	}
	@media screen and ( width <= 750px ){
		#pagination :is( .prev , .next ) a:hover img{
			filter : var( --filterWhite );
		}
	}
	@media screen and ( width > 750px ) , print{
		#pagination :is( .prev , .next ) a:hover img{
			filter : invert( 91% ) sepia( 0% ) saturate( 0% ) hue-rotate( 186deg ) brightness( 87% ) contrast( 92% );
		}
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#pagination :is( .prev , .next ) a{
		transition : background var( --transitionBase );
	}
	#pagination :is( .prev , .next ) a img{
		transition : filter var( --transitionBase );
	}
	#pagination .archive a{
		transition : background var( --transitionBase ) , color var( --transitionBase );
	}
}

/* --------------------------------------------
NEWS
--------------------------------------------- */
@media screen and ( width <= 750px ){
	#column:has( #news ){
		padding-bottom : calc( 40 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#column:has( #news ){
		padding-bottom : calc( 176 var( --remBase ) );
	}
}
@media screen and ( width <= 750px ){
	#column:has( #blog ){
		padding-bottom : calc( 40 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#column:has( #blog ){
		padding-bottom : calc( 176 var( --remBase ) );
	}
}
:where( #news , #blog ) .head{
	display : grid;
	align-items : start;
}
:where( #news , #blog ) .head time{
	font-size : 2rem;
}
:where( #news , #blog ) .head ul{
	display : flex;
	flex-wrap : wrap;
}
:where( #news , #blog ) .head a{
	display : grid;
	place-items : center;
	color : white;
}
:where( #news , #blog ) .head{
	display : grid;
	align-items : start;
}
:where( #news , #blog ) > h2{
	font-weight : 500;
	line-height : 1.3;
	border-bottom : solid 1px #d9d9d9;
}
:where( #news , #blog ) #content{
	margin-top : calc( 16 var( --remBase ) );
}
@media screen and ( width <= 750px ){
	:where( #news , #blog ) .head{
		grid-template-columns : calc( 82 var( --percentBase ) ) 1fr;
	}
	:where( #news , #blog ) .head time{
		margin-top : calc( .9 var( --remBase ) );
		font-size : 1.4rem;
		line-height : 1.3;
	}
	:where( #news , #blog ) .head ul{
		column-gap : calc( 8 * 100% / 286 );
	}
	:where( #news , #blog ) .head a{
		height : calc( 20 var( --remBase ) );
		padding-inline : calc( 8 var( --remBase ) );
		font-size : 1.2rem;
	}
	:where( #news , #blog ) > h2{
		padding-bottom : calc( 16 var( --remBase ) );
		margin-top : calc( 8 var( --remBase ) );
		font-size : 2.6rem;
	}
	:where( #news , #blog ) #pagination{
		margin-top : calc( 40 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	:where( #news , #blog ) .head{
		grid-template-columns : calc( 108 * 100% / 1360 ) 1fr;
	}
	:where( #news , #blog ) .head time{
		margin-top : calc( 7 var( --remBase ) );
		font-size : 2rem;
		line-height : 1.5;
	}
	:where( #news , #blog ) .head ul{
		column-gap : calc( 16 * 100% / 1252 );
	}
	:where( #news , #blog ) .head a{
		height : calc( 44 var( --remBase ) );
		padding-inline : calc( 16 var( --remBase ) );
		font-size : 2rem;
	}
	:where( #news , #blog ) > h2{
		padding-bottom : calc( 24 var( --remBase ) );
		margin-top : calc( 16 var( --remBase ) );
		font-size : 3.4em;
	}
}
#content p{
	line-height : 2;
}
@media screen and ( width <= 750px ){
	#content p{
		font-size : 1.4rem;
	}
}
@media screen and ( width > 750px ) , print{
	#content p{
		font-size : 2rem;
	}
}

/* --------------------------------------------
CASE
--------------------------------------------- */
#case .head picture{
	width : 100%;
	overflow : hidden;
	border-radius : 50%;
}
#case .head picture img{
	width : 100%;
	height : 100%;
	object-fit : cover;
	object-position : center;
}
#case .head h2{
	padding-bottom : calc( 16 var( --remBase ) );
	font-weight : 500;
	line-height : 1.3;
	border-bottom : solid 1px var( --orange02 );
}
#case .head dl > div{
	display : grid;
	align-items : start;
	justify-content : start;
}
#case .head dt{
	display : grid;
	place-items : center;
	line-height : 1.5;
	background-color : var( --green02 );
}
#case .head dd ul{
	font-size : 0;
}
#case .head dd ul li{
	display : inline;
}
#case .head dd ul li:not( :last-child )::after{
	content : "、";
}
#case .box{
	background-color : var( --green04 );
}
#case .box h2{
	font-weight : 500;
	line-height : 1.3;
	color : var( --green );
}
#case .box p{
	line-height : 1.7;
}
@media screen and ( width <= 750px ){
	#case{
		padding-bottom : calc( 40 var( --remBase ) );
		margin-top : calc( 52 var( --remBase ) );
	}
	#case .head h2{
		font-size : 3.2rem;
	}
	#case .head dl{
		margin-top : calc( 16 var( --remBase ) );
	}
	#case .head dl > div + div{
		margin-top : calc( 8 var( --remBase ) );
	}
	#case .head dl > div{
		grid-template-columns : calc( 112 var( --percentBase ) ) 1fr;
		column-gap : calc( 8 var( --percentBase ) );
	}
	#case .head dt , #case .head dd , #case .head li{
		font-size : 1.4rem;
	}
	#case .head dt{
		height : calc( 38 var( --remBase ) );
		font-size : 1.4rem;
	}
	#case .head dd{
		margin-top : calc( 7.1 var( --remBase ) );
		line-height : 1.7;
	}
	#case .head li{
		line-height : 1.7;
	}
	#case .head #contentCase{
		margin-top : calc( 16 var( --remBase ) );
	}
	#case .head picture{
		width : auto;
		height : calc( 160 var( --remBase ) );
		aspect-ratio : 1;
		margin-inline : auto;
		margin-top : calc( 16 var( --remBase ) );
	}
	#case .box{
		padding-block : calc( 16 var( --remBase ) );
		padding-inline : calc( 16 var( --percentBase ) );
		margin-top : calc( 40 var( --remBase ) );
	}
	#case .box h2{
		font-size : 3.2rem;
	}
	#case .box p{
		margin-top : calc( 16 var( --remBase ) );
		font-size : 1.4rem;
	}
}
@media screen and ( width > 750px ) , print{
	#case{
		padding-bottom : calc( 120 var( --remBase ) );
		margin-top : calc( 64 var( --remBase ) );
	}
	#case .head{
		display : grid;
		grid-template-rows : repeat( 3 , auto );
		grid-template-columns : calc( 160 * 100% / 1560 ) 1fr;
		row-gap : calc( 16 var( --remBase ) );
		column-gap : calc( 16 * 100% / 1560 );
		align-items : start;
		width : calc( 1560 var( --percentBase ) );
		margin-inline : auto;
	}
	#case .head picture{
		grid-row : 1/-1;
		grid-column : 1;
		align-self : start;
		height : calc( 160 var( --remBase ) );
	}
	#case .head h2{
		grid-row : 1;
		grid-column : 2;
		font-size : 4rem;
	}
	#case .head dl{
		display : grid;
		grid-template-columns : auto auto;
		grid-row : 2;
		grid-column : 2;
		column-gap : calc( 40 * 100% / 1384 );
		align-items : start;
		justify-content : start;
	}
	#case .head dl > div{
		grid-template-columns : calc( 158 var( --remBase ) ) auto;
		column-gap : calc( 18 var( --remBase ) );
	}
	#case .head dt , #case .head dd , #case .head li{
		font-size : 2rem;
	}
	#case .head dt{
		height : calc( 45 var( --remBase ) );
	}
	#case .head dd{
		margin-top : calc( 7.5 var( --remBase ) );
		line-height : 1.5;
	}
	#case .head li{
		line-height : 1.5;
	}
	#case .head #contentCase{
		grid-row : 3;
		grid-column : 2;
	}
	#case .box{
		width : calc( 1560 var( --percentBase ) );
		padding-block : calc( 32 var( --remBase ) );
		padding-inline : calc( 32 var( --percentBase ) );
		margin-inline : auto;
		margin-top : calc( 80 var( --remBase ) );
	}
	#case .box h2{
		font-size : 4rem;
	}
	#case .box p{
		margin-top : calc( 24 var( --remBase ) );
		font-size : 1.6rem;
	}
}
@media screen and ( width <= 750px ){
	#contentCase{
		font-size : 1.4rem;
		line-height : 2;
	}
}
@media screen and ( width > 750px ) , print{
	#contentCase p{
		font-size : 2rem;
		line-height : 1.7;
	}
}
#caseFaq details summary{
	position : relative;
	display : grid;
}
#caseFaq details summary::before{
	display : grid;
	grid-column : 1;
	place-items : center;
	font-weight : 700;
	line-height : 1;
	color : white;
	content : "Q";
	background-color : var( --green );
}
#caseFaq details summary span{
	font-weight : 500;
	background-color : white;
}
#caseFaq details summary span::after{
	display : block;
	width : 100%;
	font-size : 0;
	content : "";
	background-repeat : no-repeat;
	background-position : left center;
	background-size : contain;
}
#caseFaq details.is-open summary::after{
	rotate : -180deg;
}
#caseFaq details.is-open .detailsContent{
	grid-template-rows : 1fr;
}
#caseFaq .detailsContent{
	display : grid;
	grid-template-rows : 0fr;
	grid-template-columns : 1fr;
	background-color : white;
}
#caseFaq .detailsContent > div{
	overflow : hidden;
}
#caseFaq .answer{
	position : relative;
	width : 100%;
}
#caseFaq .answer::before{
	position : absolute;
	top : 0;
	left : 0;
	display : grid;
	place-items : center;
	font-weight : 700;
	line-height : 1;
	color : white;
	content : "A";
	background-color : var( --orange02 );
}
@media screen and ( width <= 750px ){
	#caseFaq{
		padding-block : calc( 40 var( --remBase ) );
		background-color : var( --green03 );
	}
	#caseFaq .detailsBox{
		margin-top : calc( 16 var( --remBase ) );
	}
	#caseFaq details + details{
		margin-top : calc( 8 var( --remBase ) );
	}
	#caseFaq summary{
		grid-template-columns : calc( 48 var( --percentBase ) ) 1fr ;
		min-height : calc( 48 var( --remBase ) );
	}
	#caseFaq summary::before{
		height : calc( 48 var( --remBase ) );
		font-size : 2.6rem;
	}
	#caseFaq summary span{
		padding-block : calc( 10 var( --remBase ) );
		padding-inline : calc( 8 * 100% / 312 );
		font-size : 1.4rem;
		line-height : 2;
	}
	#caseFaq .answer{
		min-height : calc( 48 var( --remBase ) );
		padding-block : calc( 10 var( --remBase ) );
		padding-left : calc( 56 var( --percentBase ) );
		font-size : 1.4rem;
		line-height : 2;
		box-shadow : inset 0 1px calc( 4 var( --remBase ) ) color-mix( in srgb , #000 10% , transparent );
	}
	#caseFaq .answer::before{
		width : calc( 48 var( --percentBase ) );
		height : calc( 48 var( --remBase ) );
		font-size : 2.6rem;
	}
	#caseFaq .link01{
		margin-top : calc( 16 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#caseFaq{
		display : grid;
		grid-template-rows : auto auto;
		grid-template-columns : calc( 160 var( --percentBase ) ) calc( 280 var( --percentBase ) ) calc( 40 var( --percentBase ) ) calc( 1240 var( --percentBase ) );
		row-gap : calc( 32 var( --remBase ) );
		align-items : start;
		justify-content : start;
		padding-block : calc( 120 var( --remBase ) );
		background-color : #f1f2ed;
	}
	#caseFaq .title05{
		grid-row : 1;
		grid-column : 2;
	}
	#caseFaq .detailsBox{
		grid-row : 1;
		grid-column : 4;
	}
	#caseFaq details + details{
		margin-top : calc( 16 var( --remBase ) );
	}
	#caseFaq summary{
		grid-template-columns : calc( 80 * 100% / 1240 ) 1fr;
		min-height : calc( 80 var( --remBase ) );
	}
	#caseFaq summary::before{
		font-size : 3.6rem;
	}
	#caseFaq summary span{
		padding-block : calc( 24 var( --remBase ) );
		padding-inline : calc( 16 * 100% / 1160 );
		padding-right : calc( 80 * 100% / 1160 );
		font-size : 2.4rem;
		line-height : 1.3;
	}
	#caseFaq summary::after{
		position : absolute;
		top : 50%;
		right : 0;
		display : block;
		width : calc( 80 * 100% / 1240 );
		height : calc( 80 var( --remBase ) );
		font-size : 0;
		content : "";
		background : url( "../images/ui/arrow/down01.svg" ) center no-repeat;
		translate : 0 -50%;
	}
	#caseFaq .detailsContent{
		margin-left : calc( 80 * 100% / 1240 );
	}
	#caseFaq .answer{
		min-height : calc( 80 var( --remBase ) );
		padding-top : calc( 20 var( --remBase ) );
		padding-bottom : calc( 20 var( --remBase ) );
		padding-left : calc( 96 * 100% / 1160 );
		padding-right : calc( 16 * 100% / 1160 );
		font-size : 2rem;
		line-height : 2;
		box-shadow : inset 0 1px calc( 4 var( --remBase ) ) color-mix( in srgb , #0c0c0d 5% , transparent );
	}
	#caseFaq .answer::before{
		width : calc( 80 * 100% / 1160 );
		height : calc( 80 var( --remBase ) );
		font-size : 3.6rem;
	}
	#caseFaq .link01{
		grid-row : 2;
		grid-column : 4;
		justify-self : end;
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#caseFaq details .detailsContent{
		transition : grid-template-rows var( --transitionBase );
	}
	@media screen and ( width > 750px ) , print{
		#caseFaq details summary::after{
			transition : rotate var( --transitionBase );
		}
	}
}
#otherCase .splide__slide a{
	display : grid;
	row-gap : calc( 8 var( --remBase ) );
	background-color : #f1f2ed;
}
#otherCase h3{
	grid-row : 1;
	grid-column : 1;
	align-self : center;
	font-weight : 500;
	line-height : 1.3;
	color : #4b505b;
}
#otherCase picture{
	grid-row : 1;
	grid-column : 2;
	align-self : center;
	width : 100%;
	height : calc( 120 var( --remBase ) );
	overflow : hidden;
	border-radius : 50%;
}
#otherCase picture img{
	width : 100%;
	height : 100%;
	object-fit : cover;
	object-position : center;
}
#otherCase p{
	grid-row : 2;
	grid-column : 1/-1;
}
#otherCase .more02{
	grid-row : 3;
	grid-column : 1/-1;
	justify-self : end;
}
@media screen and ( width <= 750px ){
	#otherCase{
		padding-block : calc( 80 var( --remBase ) );
	}
	#otherCase .splide__track{
		margin-top : calc( 16 var( --remBase ) );
		margin-left : calc( 16 var( --viewportBase ) );
	}
	#otherCase .splide__slide a{
		grid-template-columns : 1fr calc( 120 * 100% / 304 );
		column-gap : calc( 8 * 100% / 304 );
		align-items : center;
		height : 100%;
		padding-block : calc( 16 var( --remBase ) );
		padding-inline : calc( 16 * 100% / 304 );
	}
	#otherCase h3{
		font-size : 2rem;
	}
	#otherCase p{
		font-size : 1.4rem;
		line-height : 1.5;
	}
	#otherCase .link04{
		margin-top : calc( 40 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#otherCase{
		padding-block : calc( 120 var( --remBase ) );
	}
	#otherCase .splide__track{
		margin-top : calc( 40 var( --remBase ) );
	}
	#otherCase .splide__list{
		display : grid;
		grid-template-columns : repeat( 4 , calc( 440 var( --percentBase ) ) );
		column-gap : calc( 40 var( --percentBase ) );
		align-items : start;
	}
	#otherCase .splide__slide a{
		grid-template-columns : 1fr calc( 120 * 100% / 392 );
		column-gap : calc( 16 * 100% / 392 );
		align-items : center;
		padding-block : calc( 24 var( --remBase ) );
		padding-inline : calc( 24 * 100% / 440 );
	}
	#otherCase h3{
		font-size : 2.4rem;
	}
	#otherCase p{
		font-size : 2rem;
		line-height : 1.7;
	}
	#otherCase .link04{
		margin-top : calc( 40 var( --remBase ) );
	}
}