@charset "UTF-8";

/* --------------------------------------------
FAQ
--------------------------------------------- */
#faqLinks ul{
	display : flex;
	flex-wrap : wrap;
	row-gap : calc( 8 var( --remBase ) );
	column-gap : calc( 8 var( --percentBase ) );
}
#faqLinks a{
	display : grid;
	place-items : center;
	height : calc( 40 var( --remBase ) );
	padding-inline : calc( 20 var( --remBase ) );
	font-size : 1.6rem;
	line-height : 1.5;
	background-color : #f1f2ed;
}
#faqLinks a[aria-current="page"]{
	color : white;
	background-color : var( --green );
}
@media screen and ( width <= 750px ){
	#faqLinks{
		margin-top : calc( 52 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#faqLinks{
		margin-top : calc( 80 var( --remBase ) );
	}
	#faqLinks ul{
		justify-content : center;
	}
}
@media ( hover : hover ){
	#faqLinks a:hover{
		color : white;
		background-color : var( --green );
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#faqLinks a{
		transition : color var( --transitionBase ) , background-color var( --transitionBase );
	}
}
#faq details summary{
	position : relative;
	display : grid;
}
#faq 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 );
}
#faq details summary span{
	font-weight : 500;
	background-color : white;
}
#faq details summary span::after{
	display : block;
	width : 100%;
	font-size : 0;
	content : "";
	background-repeat : no-repeat;
	background-position : left center;
	background-size : contain;
}
#faq details.is-open summary::after{
	rotate : -180deg;
}
#faq details.is-open .detailsContent{
	grid-template-rows : 1fr;
}
#faq .detailsContent{
	display : grid;
	grid-template-rows : 0fr;
	grid-template-columns : 1fr;
	background-color : white;
}
#faq .detailsContent > div{
	overflow : hidden;
}
#faq .answer{
	position : relative;
	width : 100%;
}
#faq .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 ){
	#faq{
		padding-bottom : calc( 64 var( --remBase ) );
		margin-top : calc( 44 var( --remBase ) );
	}
	#faq details + details{
		margin-top : calc( 44 var( --remBase ) );
	}
	#faq summary{
		grid-template-columns : calc( 48 var( --percentBase ) ) 1fr ;
		min-height : calc( 48 var( --remBase ) );
	}
	#faq summary::before{
		height : calc( 48 var( --remBase ) );
		font-size : 2.6rem;
	}
	#faq summary span{
		padding-block : calc( 10 var( --remBase ) );
		padding-inline : calc( 8 * 100% / 312 );
		font-size : 1.4rem;
		line-height : 2;
	}
	#faq .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 );
	}
	#faq .answer::before{
		width : calc( 48 var( --percentBase ) );
		height : calc( 48 var( --remBase ) );
		font-size : 2.6rem;
	}
}
@media screen and ( width > 750px ) , print{
	#faq{
		padding-bottom : calc( 120 var( --remBase ) );
		margin-top : calc( 100 var( --remBase ) );
	}
	#faq details{
		width : calc( 1560 var( --percentBase ) );
		margin-inline : auto;
	}
	#faq details + details{
		margin-top : calc( 16 var( --remBase ) );
	}
	#faq summary{
		grid-template-columns : calc( 80 * 100% / 1560 ) 1fr;
		min-height : calc( 80 var( --remBase ) );
	}
	#faq summary::before{
		font-size : 3.6rem;
	}
	#faq summary span{
		padding-block : calc( 24 var( --remBase ) );
		padding-inline : calc( 16 * 100% / 1480 );
		padding-right : calc( 80 * 100% / 1480 );
		font-size : 2.4rem;
		line-height : 1.3;
	}
	#faq summary::after{
		position : absolute;
		top : 50%;
		right : 0;
		display : block;
		width : calc( 80 * 100% / 1560 );
		height : calc( 80 var( --remBase ) );
		font-size : 0;
		content : "";
		background : url( "../images/ui/arrow/down01.svg" ) center no-repeat;
		translate : 0 -50%;
	}
	#faq .detailsContent{
		margin-left : calc( 80 * 100% / 1560 );
	}
	#faq .answer{
		min-height : calc( 80 var( --remBase ) );
		padding-top : calc( 20 var( --remBase ) );
		padding-bottom : calc( 20 var( --remBase ) );
		padding-left : calc( 96 * 100% / 1480 );
		padding-right : calc( 16 * 100% / 1480 );
		font-size : 2rem;
		line-height : 2;
		box-shadow : inset 0 1px calc( 4 var( --remBase ) ) color-mix( in srgb , #0c0c0d 5% , transparent );
	}
	#faq .answer::before{
		width : calc( 80 * 100% / 1480 );
		height : calc( 80 var( --remBase ) );
		font-size : 3.6rem;
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#faq details .detailsContent{
		transition : grid-template-rows var( --transitionBase );
	}
	@media screen and ( width > 750px ) , print{
		#faq details summary::after{
			transition : rotate var( --transitionBase );
		}
	}
}

/* --------------------------------------------
PAGINATION
--------------------------------------------- */
#pagination{
	position : relative;
	left : 50%;
	display : inline-grid;
	grid-template-rows : 100%;
	grid-auto-flow : column;
	translate : -50% 0;
}
#pagination a , #pagination span{
	display : grid;
	place-items : center;
	width : auto;
	aspect-ratio : 1;
}
#pagination :where( .prev , .next ){
	position : absolute;
}
#pagination{
	column-gap : calc( 8 var( --remBase ) );
}
#pagination a , #pagination span{
	height : calc( 40 var( --remBase ) );
	border-style : solid;
	border-width : 1px;
}
#pagination a:not( .prev,.next ) , #pagination span{
	font-size : 1.6rem;
	font-weight : 500;
	line-height : 1.3;
}
#pagination span{
	color : white;
	background-color : var( --green );
	border-color : var( --green );
}
#pagination a:not( .prev,.next ){
	background-color : white;
	border-color : #c4c4c4;
}
#pagination .prev , #pagination .next{
	background-color : var( --green );
	border-color : var( --green );
}
#pagination .prev img , #pagination .next img{
	height : calc( 14 var( --remBase ) );
	filter : var( --filterWhite );
}
#pagination .prev{
	left : calc( -48 var( --remBase ) );
}
#pagination .next{
	right : calc( -48 var( --remBase ) );
}
@media ( hover : hover ){
	#pagination a:not( .prev,.next ):hover{
		color : white;
		background-color : var( --green );
	}
	#pagination :is( .prev , .next ):hover{
		background-color : white;
		border : solid 1px #c4c4c4;
	}
	#pagination :is( .prev , .next ):hover img{
		filter : var( --filterBase );
	}
}
@media ( prefers-reduced-motion : no-preference ){
	a:not( .prev,.next ){
		transition : background var( --transitionBase ) , color var( --transitionBase );
	}
	:is( .prev , .next ){
		transition : background var( --transitionBase ) , border var( --transitionBase );
	}
	:is( .prev , .next ) img{
		transition : filter 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( 142 var( --remBase ) );
	}
}
#news .posts li{
	border-bottom : solid 1px #cfd2d9;
}
@media screen and ( width <= 750px ){
	#news .posts li{
		padding-bottom : calc( 16 var( --remBase ) );
	}
	#news .posts li + li{
		margin-top : calc( 16 var( --remBase ) );
	}
	#news .posts a{
		display : grid;
		grid-template-columns : calc( 82 var( --percentBase ) ) 1fr;
		row-gap : calc( 8 var( --remBase ) );
	}
	#news .posts time{
		grid-row : 1;
		grid-column : 1;
		margin-top : calc( .9 var( --remBase ) );
		font-size : 1.4rem;
		line-height : 1.3;
	}
	#news .posts .category{
		display : grid;
		grid-row : 1;
		grid-column : 2;
		place-items : center;
		width : fit-content;
		height : calc( 20 var( --remBase ) );
		padding-inline : calc( 8 var( --remBase ) );
		font-size : 1.2rem;
		color : white;
	}
	#news .posts h3{
		grid-row : 2;
		grid-column : 1/-1;
		font-size : 1.8rem;
		font-weight : 400;
		line-height : 1.5;
	}
	#news #pagination{
		margin-top : calc( 40 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#news h2{
		font-size : 3.2rem;
		font-weight : 700;
		line-height : 1.3;
		text-align : center;
		text-indent : .05em;
		letter-spacing : .05em;
	}
	#news .posts{
		margin-top : calc( 80 var( --remBase ) );
	}
	#news .posts > li{
		padding-bottom : calc( 80 var( --remBase ) );
	}
	#news .posts > li + li{
		margin-top : calc( 80 var( --remBase ) );
	}
	#news .posts time{
		font-size : 3rem;
		line-height : 1.5;
	}
	#news .posts h3{
		margin-top : calc( 8 var( --remBase ) );
		font-size : 3.2rem;
		font-weight : 700;
		line-height : 1.3;
		color : var( --green );
		letter-spacing : .05em;
	}
	#news .posts p{
		margin-top : calc( 16 var( --remBase ) );
		font-size : 2rem;
		line-height : 2;
	}
	#news #pagination{
		margin-top : calc( 80 var( --remBase ) );
	}
}

/* --------------------------------------------
BLOG
--------------------------------------------- */
@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( 134 var( --remBase ) );
	}
}
#blog .posts a{
	display : grid;
	grid-template-rows : repeat( 3 , auto );
	align-items : start;
	justify-content : start;
}
#blog .posts picture{
	grid-row : 1/-1;
	grid-column : 1;
	width : 100%;
}
#blog .posts picture img{
	width : 100%;
	height : 100%;
	object-fit : cover;
	object-position : center;
}
#blog .posts time{
	grid-row : 1;
	grid-column : 3;
}
#blog .posts .category{
	display : grid;
	grid-row : 1;
	grid-column : 4;
	place-items : center;
	width : fit-content;
	font-family : "Noto Sans JP";
	color : white;
}
#blog .posts h3{
	grid-row : 2;
	grid-column : 3/-1;
}
@media screen and ( width <= 750px ){
	#blog .posts li{
		padding-bottom : calc( 16 var( --remBase ) );
		border-bottom : solid 1px #cfd2d9;
	}
	#blog .posts li + li{
		margin-top : calc( 16 var( --remBase ) );
	}
	#blog .posts a{
		display : grid;
		grid-template-columns : calc( 113 var( --percentBase ) ) calc( 8 var( --percentBase ) ) calc( 82 var( --percentBase ) ) 1fr;
		row-gap : calc( 8 var( --remBase ) );
	}
	#blog .posts time{
		margin-top : calc( .9 var( --remBase ) );
		font-size : 1.4rem;
		line-height : 1.3;
	}
	#blog .posts .category{
		height : calc( 20 var( --remBase ) );
		padding-inline : calc( 8 var( --remBase ) );
		font-size : 1.2rem;
		color : white;
	}
	#blog .posts h3{
		font-size : 1.8rem;
		font-weight : 400;
		line-height : 1.5;
	}
	#blog #pagination{
		margin-top : calc( 40 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#blog h2{
		font-size : 3.2rem;
		font-weight : 700;
		line-height : 1.3;
		text-align : center;
		text-indent : .05em;
		letter-spacing : .05em;
	}
	#blog .posts{
		margin-top : calc( 80 var( --remBase ) );
	}
	#blog .posts > li + li{
		margin-top : calc( 80 var( --remBase ) );
	}
	#blog .posts a{
		grid-template-columns : calc( 280 * 100% / 1360 ) calc( 38 * 100% / 1360 ) calc( 108 * 100% / 1360 ) 1fr;
		row-gap : calc( 16 var( --remBase ) );
	}
	#blog .posts picture{
		height : calc( 280 var( --remBase ) );
	}
	#blog .posts time{
		grid-column : 3;
		margin-top : calc( 7 var( --remBase ) );
		font-size : 2rem;
		line-height : 1.5;
	}
	#blog .posts .category{
		height : calc( 44 var( --remBase ) );
		padding-inline : calc( 16 var( --remBase ) );
	}
	#blog .posts h3{
		font-size : 3.2rem;
		font-weight : 700;
		line-height : 1.3;
		color : var( --green );
		letter-spacing : .05em;
	}
	#blog .posts .excerpt{
		grid-row : 3;
		grid-column : 3/-1;
		font-size : 2rem;
		line-height : 2;
	}
	#blog #pagination{
		margin-top : calc( 80 var( --remBase ) );
	}
}

/* --------------------------------------------
CASE
--------------------------------------------- */
#case .posts a{
	row-gap : calc( 8 var( --remBase ) );
	background-color : #f1f2ed;
}
#case picture{
	grid-row : 1;
	grid-column : 2;
	width : 100%;
	height : calc( 120 var( --remBase ) );
	overflow : hidden;
	border-radius : 50%;
}
#case picture img{
	width : 100%;
	height : 100%;
	object-fit : cover;
	object-position : center;
}
#case h2{
	grid-row : 1;
	grid-column : 1;
	align-self : center;
	font-weight : 500;
	line-height : 1.3;
}
#case .excerpt{
	grid-row : 2;
	grid-column : 1/-1;
}
#case .more01{
	grid-row : 3;
	grid-column : 1/-1;
	justify-self : end;
}
@media screen and ( width <= 750px ){
	#case{
		padding-top : calc( 60 var( --remBase ) );
		padding-bottom : calc( 48 var( --remBase ) );
	}
	#case .posts li + li{
		margin-top : calc( 16 var( --remBase ) );
	}
	#case .posts a{
		display : grid;
		grid-template-columns : 1fr calc( 120 * 100% / 336 );
		column-gap : calc( 8 * 100% / 336 );
		padding-block : calc( 16 var( --remBase ) );
		padding-inline : calc( 16 var( --percentBase ) );
	}
	#case .posts h2{
		font-size : 2rem;
	}
	#case .posts .excerpt{
		font-size : 1.4rem;
		line-height : 1.5;
	}
	#case #pagination{
		margin-top : calc( 40 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#case{
		padding-bottom : calc( 176 var( --remBase ) );
		margin-top : calc( 80 var( --remBase ) );
	}
	#case .posts{
		display : grid;
		grid-template-columns : repeat( 4 , calc( 440 var( --percentBase ) ) );
		row-gap : calc( 40 var( --remBase ) );
		justify-content : space-between;
	}
	#case .posts a{
		display : grid;
		grid-template-columns : 1fr calc( 120 * 100% / 392 );
		column-gap : calc( 16 * 100% / 392 );
		padding-block : calc( 24 var( --remBase ) );
		padding-inline : calc( 24 * 100% / 440 );
	}
	#case .posts h2{
		font-size : 2.4rem;
	}
	#case .posts .excerpt{
		font-size : 2rem;
		line-height : 1.7;
	}
	#case #pagination{
		margin-top : calc( 80 var( --remBase ) );
	}
}