@charset "UTF-8";

/* --------------------------------------------
PAGINATION
--------------------------------------------- */
#paginationSingle{
	display : grid;
	align-items : center;
	justify-content : center;
}
#paginationSingle{
	margin-top : calc( 40 var( --remBase ) );
}
#paginationSingle a{
	display : grid;
	grid-row : 1;
	place-items : center;
	width : auto;
	height : calc( 40 var( --remBase ) );
	border : solid 1px #c4c4c4;
}
#paginationSingle a:has( img ){
	background-color : #c4c4c4;
}
#paginationSingle .prev{
	grid-column : 1;
}
#paginationSingle a:not( :has( img ) ){
	grid-column : 2;
	font-size : 1.8rem;
	font-weight : 500;
	line-height : 1.3;
	background-color : white;
}
#paginationSingle .next{
	grid-column : 3;
}
#paginationSingle img{
	height : calc( 14 var( --remBase ) );
	filter : var( --filterWhite );
}
@media screen and ( width <= 750px ){
	#paginationSingle{
		grid-template-columns : calc( 40 var( --percentBase ) ) calc( 120 var( --percentBase ) ) calc( 40 var( --percentBase ) );
		column-gap : calc( 16 var( --percentBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#paginationSingle{
		grid-template-columns : calc( 40 * 100% / 1040 ) calc( 120 * 100% / 1040 ) calc( 40 * 100% / 1040 );
		column-gap : calc( 16 * 100% / 1040 );
	}
}
@media ( hover : hover ){
	#paginationSingle a:hover:has( img ){
		background-color : white;
	}
	#paginationSingle a:hover:has( img ) img{
		filter : invert( 91% ) sepia( 18% ) saturate( 0% ) hue-rotate( 162deg ) brightness( 85% ) contrast( 87% );
	}
	#paginationSingle a:hover:not( :has( img ) ){
		color : white;
		background-color : #c4c4c4;
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#paginationSingle a:has( img ){
		transition : background-color var( --transitionBase );
	}
	#paginationSingle a:has( img ) img{
		transition : filter var( --transitionBase );
	}
	#paginationSingle a:not( :has( img ) ){
		transition : background-color var( --transitionBase ) , color var( --transitionBase );
	}
}

/* --------------------------------------------
CASE
--------------------------------------------- */
@media screen and ( width <= 750px ){
	@media screen and ( width <= 750px ){
		#column:has( #case ){
			padding-bottom : calc( 42 var( --remBase ) );
			margin-top : calc( 42 var( --remBase ) );
		}
	}
}
@media screen and ( width > 750px ) , print{
	#column:has( #case ){
		display : grid;
		grid-template-columns : calc( 1040 var( --percentBase ) ) calc( 320 var( --percentBase ) );
		align-items : start;
		justify-content : space-between;
		padding-bottom : calc( 98 var( --remBase ) );
		margin-top : calc( 72 var( --remBase ) );
	}
}
#case > h1{
	font-weight : 700;
	line-height : 1.3;
	letter-spacing : .1em;
}
#case > h1::after{
	display : block;
	width : 100%;
	height : calc( 4 var( --remBase ) );
	margin-top : calc( 24 var( --remBase ) );
	font-size : 0;
	content : "";
}
#case > .box picture img{
	width : 100%;
	height : auto;
}
#case > .box dl{
	display : grid;
}
#case > .box :where( dt,dd ){
	font-size : 1.6rem;
	line-height : 2;
}
#case > .box :where( dt,dd ):not( :first-of-type ){
	padding-top : calc( 8 var( --remBase ) );
}
#case > .box :where( dt,dd ):not( :last-of-type ){
	padding-bottom : calc( 8 var( --remBase ) );
	border-bottom : solid 1px #d9d9d9;
}
#case > .box ul{
	display : flex;
	flex-wrap : wrap;
	row-gap : calc( 8 var( --remBase ) );
	padding-top : calc( 8 var( --remBase ) );
}
#case > .box li{
	display : grid;
	place-items : center;
	height : calc( 29 var( --remBase ) );
	padding-inline : calc( 8 var( --remBase ) );
	line-height : 1.3;
	background-color : #f1f2ed;
}
@media screen and ( width <= 750px ){
	#case > h1{
		font-size : 2.8rem;
	}
	#case > h1::after{
		background-image : linear-gradient( to right , var( --wp--custom--primary ) calc( 100 var( --percentBase ) ) , #f2f2f2 calc( 100 var( --percentBase ) ) );
	}
	#case > .box{
		margin-top : calc( 30 var( --remBase ) );
	}
	#case > .box dl{
		grid-template-columns : calc( 130 var( --percentBase ) ) 1fr;
		margin-top : calc( 32 var( --remBase ) );
	}
	#case > .box ul{
		column-gap : calc( 8 * 100% / 238 );
	}
	#case .content{
		margin-top : calc( 30 var( --remBase ) );
	}
	#paginationSingle{
		margin-top : calc( 40 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#case > h1{
		font-size : 4rem;
	}
	#case > h1::after{
		background-image : linear-gradient( to right , var( --wp--custom--primary ) calc( 100 * 100% / 1040 ) , #f2f2f2 calc( 100 * 100% / 1040 ) );
	}
	#case > .box{
		display : grid;
		grid-template-columns : calc( 440 * 100% / 1040 ) calc( 560 * 100% / 1040 );
		align-items : start;
		justify-content : space-between;
		margin-top : calc( 24 var( --remBase ) );
	}
	#case > .box > picture{
		grid-row : 1;
		grid-column : 1;
	}
	#case > .box dl{
		grid-template-columns : calc( 160 * 100% / 440 ) 1fr;
	}
	#case > .box ul{
		column-gap : calc( 8 * 100% / 560 );
	}
	#case .content{
		margin-top : calc( 40 var( --remBase ) );
	}
	#paginationSingle{
		margin-top : calc( 40 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#relationCase{
		margin-top : calc( 40 var( --remBase ) );
	}
	#relationCase .splide__track{
		margin-top : calc( 40 var( --remBase ) );
	}
	#relationCase picture{
		width : 100%;
		height : calc( 130 var( --remBase ) );
		text-align : center;
	}
	#relationCase picture img{
		width : auto;
		height : 100%;
		object-fit : contain;
	}
	#relationCase h5{
		margin-top : calc( 4 var( --remBase ) );
		font-size : 1.6rem;
		font-weight : 400;
		line-height : 1.5;
	}
	#relationCase ul ul{
		display : flex;
		flex-wrap : wrap;
		row-gap : calc( 4 var( --remBase ) );
		column-gap : calc( 4 * 100% / 200 );
	}
	#relationCase ul ul li{
		display : grid;
		place-items : center;
		height : calc( 22 var( --remBase ) );
		padding-inline : calc( 4 var( --remBase ) );
		font-size : 1.2rem;
		color : white;
	}
}
#sidebarCase h4{
	font-size : 2.8rem;
	font-weight : 500;
	line-height : 1.3;
}
#sidebarCase h4::after{
	display : block;
	height : calc( 4 var( --remBase ) );
	margin-top : calc( 16 var( --remBase ) );
	font-size : 0;
	content : "";
}
#sidebarCase :where( .categories , .tags ){
	display : grid;
	grid-template-columns : repeat( 2 , calc( 156 * 100% / 320 ) );
	justify-content : space-between;
	margin-top : calc( 8 var( --remBase ) );
}
#sidebarCase :where( .categories , .tags ) a{
	display : grid;
	align-items : center;
	justify-content : start;
	height : calc( 48 var( --remBase ) );
	font-size : 1.6rem;
	font-weight : 500;
	border-bottom : solid 1px #f1f2ed;
}
#sidebarCase .categories{
	row-gap : calc( 8 var( --remBase ) );
}
#sidebarCase .categories li:first-child{
	grid-column : span 2;
}
#sidebarCase .categories a:not( :has( img ) ){
	padding-inline : calc( 8 * 100% / 320 );
}
#sidebarCase .categories a:has( img ){
	grid-template-columns : auto auto;
	column-gap : calc( 4 * 100% / 140 );
	padding-inline : calc( 8 * 100% / 156 );
}
#sidebarCase .categories a img{
	aspect-ratio : 1;
}
#sidebarCase ul + h4{
	margin-top : calc( 40 var( --remBase ) );
}
#sidebarCase .tags a{
	padding-inline : calc( 8 * 100% / 156 );
}
#sidebarCase select{
	height : calc( 48 var( --remBase ) );
	padding-inline : calc( 7 * 100% / 318 );
	margin-top : calc( 8 var( --remBase ) );
	font-size : 1.2rem;
	line-height : 1.2;
	background-color : white;
	border : solid 1px #f1f2ed;
}
@media screen and ( width <= 750px ){
	#sidebarCase{
		margin-top : calc( 70 var( --remBase ) );
	}
	#sidebarCase h4::after{
		width : calc( 318 var( --percentBase ) );
		background-image : linear-gradient( to right , var( --wp--custom--primary ) calc( 30 * 100% / 318 ) , #f2f2f2 calc( 30 * 100% / 318 ) );
	}
	#sidebarCase :where( .categories , .tags , select ){
		width : calc( 320 var( --percentBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#sidebarCase h4::after{
		width : 100%;
		background-image : linear-gradient( to right , var( --wp--custom--primary ) calc( 30 * 100% / 320 ) , #f2f2f2 calc( 30 * 100% / 320 ) );
	}
	#sidebarCase select{
		width : 100%;
	}
}
@media ( hover : hover ){
	#sidebarCase a:hover{
		background-color : #f1f2ed;
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#sidebarCase a{
		transition : background var( --transitionBase );
	}
}

/* --------------------------------------------
PLAN
--------------------------------------------- */
@media screen and ( width <= 750px ){
	#plan{
		padding-bottom : calc( 12  var( --remBase ) );
		margin-top : calc( 38 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#plan{
		padding-bottom : calc( 66 var( --remBase ) );
		margin-top : calc( 56 var( --remBase ) );
	}
}
:where( #planHead > h1 , #planContents > h2 , #planFunction > h2 , #planFaq > h2 , #planMaker > h2 , #planCase > h2 ){
	font-weight : 700;
}
:where( #planHead > h1 , #planContents > h2 , #planFunction > h2 , #planFaq > h2 , #planMaker > h2 , #planCase > h2 )::first-letter{
	color : var( --wp--custom--primary );
}
:where( #planHead > h1 , #planContents > h2 , #planFunction > h2 , #planFaq > h2 , #planMaker > h2 , #planCase > h2 )::after{
	display : block;
	width : 100%;
	height : calc( 4 var( --remBase ) );
	font-size : 0;
	content : "";
}
@media screen and ( width > 750px ) , print{
	:where( #planHead > h1 , #planContents > h2 , #planFunction > h2 , #planFaq > h2 , #planMaker > h2 , #planCase > h2 ){
		font-size : 3.2rem;
		line-height : 1.5;
	}
	:where( #planHead > h1 , #planContents > h2 , #planFunction > h2 , #planFaq > h2 , #planMaker > h2 , #planCase > h2 )::after{
		margin-top : calc( 8 var( --remBase ) );
		background-image : linear-gradient( to right , var( --wp--custom--primary ) calc( 48 var( --percentBase ) ) , #f2f2f2 calc( 48 var( --percentBase ) ) );
	}
}
@media screen and ( width <= 750px ){
	:where( #planHead > h1 ){
		font-size : 2.8rem;
		line-height : 1.3;
	}
	:where( #planHead > h1 )::after{
		margin-top : calc( 24 var( --remBase ) );
		background-image : linear-gradient( to right , var( --wp--custom--primary ) calc( 100 var( --percentBase ) ) , #f2f2f2 calc( 100 var( --percentBase ) ) );
	}
}
@media screen and ( width <= 750px ){
	:where( #planContents > h2 , #planFunction > h2 , #planFaq > h2 , #planMaker > h2 , #planCase > h2 ){
		font-size : 2.4rem;
		line-height : 1.3;
	}
	:where( #planContents > h2 , #planFunction > h2 , #planFaq > h2 , #planMaker > h2 , #planCase > h2 )::after{
		margin-top : calc( 16 var( --remBase ) );
		background-image : linear-gradient( to right , var( --wp--custom--primary ) calc( 30 var( --percentBase ) ) , #f2f2f2 calc( 30 var( --percentBase ) ) );
	}
}
#planHead .catchcopy{
	padding-block : calc( 8 var( --remBase ) );
	padding-inline : calc( 8 var( --remBase ) );
	font-weight : 700;
	color : white;
	background-color : var( --wp--custom--red );
}
#planHead dl{
	display : grid;
}
#planHead dt{
	display : grid;
	grid-row : 1;
	grid-column : 1;
	place-items : center;
	height : calc( 52 var( --remBase ) );
	font-size : 2rem;
	font-weight : 700;
	color : black;
	border : solid 1px var( --wp--custom--base );
}
#planHead del{
	display : grid;
	grid-template-columns : auto auto;
	align-items : baseline;
	justify-content : start;
	font-weight : 700;
	-webkit-text-decoration : none;
	text-decoration : none;
}
#planHead del span:nth-of-type( 1 ){
	-webkit-text-decoration : line-through;
	text-decoration : line-through;
}
#planHead ins{
	display : grid;
	grid-template-columns : auto auto;
	font-weight : 700;
	color : var( --wp--custom--red );
	-webkit-text-decoration : none;
	text-decoration : none;
}
#planHead dd:not( :has( del ) ){
	display : grid;
	grid-template-columns : auto auto;
	font-weight : 700;
	color : var( --wp--custom--red );
}
#planHead ul{
	display : flex;
	flex-wrap : wrap;
	grid-row : 7;
	grid-column : 1;
	row-gap : calc( 4 var( --remBase ) );
}
#planHead ul li{
	display : grid;
	place-items : center;
	height : calc( 22 var( --remBase ) );
	padding-inline : calc( 4 var( --remBase ) );
	font-size : 1.2rem;
	color : white;
}
@media screen and ( width <= 750px ){
	#planHead{
		padding-bottom : calc( 30 var( --remBase ) );
		border-bottom : solid 1px #9fa0a0;
	}
	#planHead .box{
		margin-top : calc( 72 var( --remBase ) );
	}
	#planHead .catchcopy{
		margin-top : calc( 24 var( --remBase ) );
		font-size : 3rem;
		text-align : center;
	}
	#planHead .maker{
		width : 100%;
		height : calc( 48 var( --remBase ) );
		margin-top : calc( 22 var( --remBase ) );
	}
	#planHead .maker img{
		object-fit : contain;
		width : 100%;
		height : 100%;
		object-position : left center;
	}
	#planHead dl{
		grid-template-columns : calc( 134 var( --percentBase ) ) 1fr;
		row-gap : calc( 16 var( --remBase ) );
		column-gap : calc( 10 var( --percentBase ) );
		margin-top : calc( 22 var( --remBase ) );
	}
	#planHead dd:has( del ){
		display : contents;
	}
	#planHead dd:has( del ) del{
		grid-row : 1;
		grid-column : 2;
	}
	#planHead dd:has( del ) del span:nth-of-type( 1 ){
		font-size : 5.2rem;
	}
	#planHead dd:has( del ) del span:nth-of-type( 2 ){
		font-size : 1.6rem;
	}
	#planHead dd:has( del ) ins{
		grid-row : 2;
		grid-column : 1/-1;
		align-items : center;
		justify-content : end;
		padding-right : calc( 16 var( --percentBase ) );
		font-size : 6rem;
	}
	#planHead dd:has( del ) ins span{
		font-size : 2rem;
	}
	#planHead dd:not( :has( del ) ){
		grid-row : 2;
		grid-column : 1/-1;
		align-items : center;
		justify-content : end;
		padding-right : calc( 16 var( --percentBase ) );
		font-size : 6rem;
	}
	#planHead dd:not( :has( del ) ) span{
		font-size : 2rem;
	}
	#planHead ul{
		margin-top : calc( 22 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#planHead{
		padding-bottom : calc( 76 var( --remBase ) );
	}
	#planHead .box{
		display : grid;
		grid-template-rows : 1fr repeat( 4 , auto ) 1fr;
		grid-template-columns : calc( 440 var( --percentBase ) ) 1fr;
		row-gap : calc( 19 var( --remBase ) );
		column-gap : calc( 40 var( --percentBase ) );
		align-items : center;
		justify-content : start;
		margin-top : calc( 38 var( --remBase ) );
	}
	#planHead .box > picture{
		grid-row : 1/-1;
		grid-column : 1;
	}
	#planHead .catchcopy{
		grid-row : 2;
		grid-column : 2;
		width : fit-content;
		font-size : 6rem;
	}
	#planHead dl{
		grid-template-columns : calc( 128 * 100% / 920 ) auto auto;
		grid-row : 3;
		grid-column : 2;
		align-items : center;
		justify-content : start;
	}
	#planHead del{
		grid-row : 1;
		grid-column : 2;
		padding-left : calc( 10 var( --remBase ) );
	}
	#planHead del span:nth-of-type( 1 ){
		font-size : 5.2rem;
	}
	#planHead del span:nth-of-type( 2 ){
		font-size : 1.6rem;
	}
	#planHead ins{
		grid-row : 1;
		grid-column : 3;
		align-items : baseline;
		justify-content : start;
		padding-left : calc( 16 var( --remBase ) );
		font-size : 6rem;
	}
	#planHead ins span{
		font-size : 2rem;
	}
	#planHead dd:has( del ){
		display : contents;
	}
	#planHead dd:not( :has( del ) ){
		grid-row : 1;
		grid-column : 2/4;
		align-items : baseline;
		justify-content : start;
		padding-left : calc( 10 var( --remBase ) );
		font-size : 6rem;
	}
	#planHead dd:not( :has( del ) ) span{
		font-size : 2rem;
	}
	#planHead ul{
		grid-row : 4;
		grid-column : 2;
	}
	#planHead .comment{
		grid-row : 5;
		grid-column : 2;
		font-size : 1.6rem;
		line-height : 1.7;
	}
}
@media screen and ( width <= 750px ){
	#planContents{
		padding-bottom : calc( 44 var( --remBase ) );
		margin-top : calc( 44 var( --remBase ) );
	}
	#planContents .content{
		margin-top : calc( 44 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#planContents{
		padding-bottom : calc( 80 var( --remBase ) );
	}
	#planContents .content{
		margin-top : calc( 16 var( --remBase ) );
	}
}
#planFunction h3{
	font-size : 2.4rem;
	font-weight : 500;
	line-height : 1.3;
}
#planFunction p{
	font-size : 1.6rem;
	line-height : 1.5;
}
@media screen and ( width <= 750px ){
	#planFunction{
		padding-bottom : calc( 44 var( --remBase ) );
	}
	#planFunction ul{
		margin-top : calc( 44 var( --remBase ) );
	}
	#planFunction li + li{
		margin-top : calc( 40 var( --remBase ) );
	}
	#planFunction picture img{
		width : 100%;
		height : auto;
	}
	#planFunction h3{
		margin-top : calc( 16 var( --remBase ) );
	}
	#planFunction p{
		margin-top : calc( 16 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#planFunction{
		padding-bottom : calc( 80 var( --remBase ) );
	}
	#planFunction ul{
		display : grid;
		grid-template-columns : repeat( 4 , calc( 320 var( --percentBase ) ) );
		row-gap : calc( 40 var( --remBase ) );
		justify-content : space-between;
		margin-top : calc( 16 var( --remBase ) );
	}
	#planFunction ul > li{
		display : grid;
		grid-template-rows : subgrid;
		grid-row : span 3;
		row-gap : 0;
	}
	#planFunction picture{
		grid-row : 1;
		grid-column : 1;
		width : 100%;
		height : calc( 180 var( --remBase ) );
	}
	#planFunction picture img{
		width : 100%;
		height : 100%;
		object-fit : cover;
		object-position : center;
	}
	#planFunction h3{
		grid-row : 2;
		grid-column : 1;
		margin-top : calc( 16 var( --remBase ) );
	}
	#planFunction p{
		grid-row : 3;
		grid-column : 1;
		margin-top : calc( 8 var( --remBase ) );
	}
}
#planFaq details{
	padding-bottom : calc( 16 var( --remBase ) );
	border-bottom : solid 1px #d9d9d9;
}
#planFaq details + details{
	margin-top : calc( 16 var( --remBase ) );
}
#planFaq summary{
	display : grid;
	align-items : start;
}
#planFaq summary::before{
	display : grid;
	place-items : center;
	height : auto;
	aspect-ratio : 1;
	font-family : Alata;
	color : white;
	content : "Q";
	background-color : var( --wp--custom--primary );
}
#planFaq summary span{
	color : #444343;
}
#planFaq .detailsContent{
	display : grid;
	grid-template-rows : 0fr;
	grid-template-columns : 1fr;
}
#planFaq details.is-open .detailsContent{
	grid-template-rows : 1fr;
}
#planFaq .detailsContent > div{
	display : grid;
	align-items : start;
	overflow : hidden;
}
#planFaq .detailsContent > div::before{
	display : grid;
	place-items : center;
	height : auto;
	aspect-ratio : 1;
	font-family : Alata;
	color : var( --wp--custom--primary );
	content : "A";
	background-color : #f2f2f2;
}
#planFaq .link{
	font-size : 1.6rem;
	-webkit-text-decoration : underline;
	text-decoration : underline;
}
@media screen and ( width <= 750px ){
	#planFaq{
		padding-bottom : calc( 44 var( --remBase ) );
	}
	#planFaq > h2{
		margin-bottom : calc( 44 var( --remBase ) );
	}
	#planFaq summary{
		grid-template-columns : calc( 48 var( --percentBase ) ) 1fr;
		column-gap : calc( 8 var( --percentBase ) );
	}
	#planFaq summary::before{
		font-size : 2.6rem;
	}
	#planFaq summary span{
		padding-top : calc( 10 var( --remBase ) );
		font-size : 1.6rem;
		line-height : 1.8;
	}
	#planFaq .detailsContent > div{
		grid-template-columns : calc( 48 var( --percentBase ) ) 1fr;
		column-gap : calc( 8 var( --percentBase ) );
	}
	#planFaq .detailsContent > div::before{
		font-size : 2.6rem;
	}
	#planFaq .content{
		padding-top : calc( 10 var( --remBase ) );
	}
	#planFaq .content p{
		line-height : 1.8;
	}
	#planFaq .link{
		line-height : 1.8;
	}
	#planFaq details.is-open .detailsContent{
		padding-top : calc( 8 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#planFaq{
		padding-bottom : calc( 80 var( --remBase ) );
	}
	#planFaq > h2{
		margin-bottom : calc( 16 var( --remBase ) );
	}
	#planFaq summary{
		grid-template-columns : calc( 80 var( --percentBase ) ) 1fr;
		column-gap : calc( 18 var( --percentBase ) );
	}
	#planFaq summary::before{
		font-size : 3.2rem;
	}
	#planFaq summary span{
		padding-top : calc( 22 var( --remBase ) );
		font-size : 2rem;
		line-height : 2;
	}
	#planFaq .detailsContent > div{
		grid-template-columns : calc( 80 * 100% / 1320 ) 1fr;
		column-gap : calc( 18 * 100% / 1320 );
		padding-left : calc( 80 var( --percentBase ) );
	}
	#planFaq .detailsContent > div::before{
		font-size : 3.2rem;
	}
	#planFaq .content{
		padding-top : calc( 24 var( --remBase ) );
	}
	#planFaq .content p{
		line-height : 2;
	}
	#planFaq .link{
		line-height : 2;
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#planFaq summary + div{
		transition : grid-template-rows var( --transitionBase ) , padding var( --transitionBase );
	}
}
#planMaker h3{
	font-size : 2.4rem;
	font-weight : 500;
	line-height : 1.3;
}
#planMaker p{
	font-size : 1.6rem;
	line-height : 1.5;
}
#planMaker li > a{
	display : block;
	width : fit-content;
	margin-inline : auto;
	margin-top : calc( 8 var( --remBase ) );
	font-size : 1.6rem;
	line-height : 1.5;
	-webkit-text-decoration : underline;
	text-decoration : underline;
	text-underline-offset : calc( ( 1lh - 1em ) / 2 );
}
@media screen and ( width <= 750px ){
	#planMaker{
		padding-bottom : calc( 44 var( --remBase ) );
	}
	#planMaker ul{
		margin-top : calc( 44 var( --remBase ) );
	}
	#planMaker li + li{
		margin-top : calc( 40 var( --remBase ) );
	}
	#planMaker picture img{
		width : 100%;
		height : auto;
	}
	#planMaker h3{
		margin-top : calc( 8 var( --remBase ) );
	}
	#planMaker p{
		margin-top : calc( 8 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#planMaker{
		padding-bottom : calc( 80 var( --remBase ) );
	}
	#planMaker ul{
		display : grid;
		grid-template-columns : repeat( 4 , calc( 320 var( --percentBase ) ) );
		row-gap : calc( 40 var( --remBase ) );
		justify-content : space-between;
		margin-top : calc( 16 var( --remBase ) );
	}
	#planMaker ul > li{
		display : grid;
		grid-template-rows : subgrid;
		grid-row : span 4;
		row-gap : 0;
	}
	#planMaker picture{
		grid-row : 1;
		grid-column : 1;
		width : 100%;
		height : calc( 180 var( --remBase ) );
	}
	#planMaker picture img{
		width : 100%;
		height : 100%;
		object-fit : cover;
		object-position : center;
	}
	#planMaker h3{
		grid-row : 2;
		grid-column : 1;
		margin-top : calc( 8 var( --remBase ) );
	}
	#planMaker p{
		grid-row : 3;
		grid-column : 1;
		margin-top : calc( 8 var( --remBase ) );
	}
	#planMaker li > a{
		grid-row : 4;
		grid-column : 1;
	}
}
#planCase > ul > li > a{
	display : grid;
	row-gap : calc( 8 var( --remBase ) );
}
#planCase > ul > li > a > picture{
	grid-row : 1;
	grid-column : 1;
	width : 100%;
}
#planCase > ul > li > a > picture img{
	width : 100%;
	height : 100%;
	object-fit : cover;
	object-position : center;
}
#planCase > ul > li > a .area{
	display : grid;
	grid-row : 1;
	grid-column : 1;
	place-items : center;
	align-self : end;
	justify-self : start;
	width : fit-content;
	padding-block : calc( 4 var( --remBase ) );
	padding-inline : calc( 8 var( --remBase ) );
	font-size : 1.6rem;
	background-color : white;
}
#planCase > ul > li > a h2{
	grid-row : 2;
	grid-column : 1;
	font-size : 1.6rem;
	font-weight : 400;
	line-height : 1.5;
}
#planCase > ul > li > a ul{
	display : flex;
	flex-wrap : wrap;
	grid-row : 3;
	grid-column : 1;
	row-gap : calc( 4 var( --remBase ) );
}
#planCase > ul > li > a ul li{
	display : grid;
	place-items : center;
	padding-block : calc( 4 var( --remBase ) );
	padding-inline : calc( 4 var( --remBase ) );
	font-size : 1.2rem;
	line-height : 1.2;
	color : white;
}
@media screen and ( width <= 750px ){
	#planCase > ul{
		margin-top : calc( 44 var( --remBase ) );
	}
	#planCase > ul > li + li{
		margin-top : calc( 40 var( --remBase ) );
	}
	#planCase > ul > li > a > picture{
		height : calc( 256 var( --remBase ) );
	}
	#planCase > ul > li > a ul{
		column-gap : calc( 4 var( --percentBase ) );
	}
	#planCase #paginationArchive{
		margin-top : calc( 96 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#planCase > ul{
		display : grid;
		grid-template-columns : repeat( 4 , calc( 320 var( --percentBase ) ) );
		row-gap : calc( 74 var( --remBase ) );
		justify-content : space-between;
		margin-top : calc( 32  var( --remBase ) );
	}
	#planCase > ul > li{
		display : grid;
		grid-template-rows : subgrid;
		grid-row : span 3;
		row-gap : 0;
	}
	#planCase > ul > li > a{
		grid-template-rows : subgrid;
		grid-row : span 3;
	}
	#planCase > ul > li > a > picture{
		height : calc( 234 var( --remBase ) );
	}
	#planCase > ul > li > a ul{
		column-gap : calc( 4 * 100% / 320 );
	}
	#planCase #paginationArchive{
		margin-top : calc( 96 var( --remBase ) );
	}
}

/* --------------------------------------------
FAQ
--------------------------------------------- */
@media screen and ( width <= 750px ){
	#faq{
		padding-bottom : calc( 62 var( --remBase ) );
		margin-top : calc( 44 var( --remBase ) );
	}
	#faq .content{
		padding-top : calc( 10 var( --remBase ) );
	}
	#faq .content p{
		line-height : 1.8;
	}
}
@media screen and ( width > 750px ) , print{
	#faq{
		padding-bottom : calc( 394 var( --remBase ) );
		margin-top : calc( 40 var( --remBase ) );
	}
	#faq .content{
		padding-top : calc( 24 var( --remBase ) );
	}
	#faq .content p{
		line-height : 2;
	}
}

/* --------------------------------------------
INFORMATION , BLOG
--------------------------------------------- */
@media screen and ( width <= 750px ){
	#column:has( #information , #blog ){
		padding-bottom : calc( 40 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#column:has( #information , #blog ){
		display : grid;
		grid-template-columns : calc( 1040 var( --percentBase ) ) calc( 320 var( --percentBase ) );
		align-items : start;
		justify-content : space-between;
		padding-top : calc( 72 var( --remBase ) );
		padding-bottom : calc( 106 var( --remBase ) );
	}
}
:where( #information , #blog ) .head{
	display : grid;
	align-items : start;
	justify-content : start;
}
:where( #information , #blog ) .head time{
	grid-row : 1;
	grid-column : 1;
}
:where( #information , #blog ) .head ul{
	display : flex;
	flex-wrap : wrap;
	grid-row : 1;
	grid-column : 2;
	row-gap : calc( 8 var( --remBase ) );
}
:where( #information , #blog ) .head ul a{
	display : grid;
	place-items : center;
	justify-self : start;
	color : white;
	background-color : var( --wp--custom--primary );
}
:where( #information , #blog ) > h2{
	font-weight : 700;
	line-height : 1.3;
	letter-spacing : .1em;
}
:where( #information , #blog ) > h2::after{
	display : block;
	width : 100%;
	height : calc( 4 var( --remBase ) );
	margin-top : calc( 24 var( --remBase ) );
	content : "";
}

@media screen and ( width <= 750px ){
	:where( #information , #blog ){
		padding-top : calc( 28 var( --remBase ) );
	}
	:where( #information , #blog ) .head{
		column-gap : calc( 8 var( --percentBase ) );
	}
	:where( #information , #blog ) .head time{
		margin-top : calc( .9 var( --remBase ) );
		font-size : 1.4rem;
		line-height : 1.3;
	}
	:where( #information , #blog ) .head ul{
		column-gap : calc( 8 var( --percentBase ) );
	}
	:where( #information , #blog ) .head ul a{
		height : calc( 20 var( --remBase ) );
		padding-inline : calc( 8 var( --remBase ) );
		font-size : 1.2rem;
	}
	:where( #information , #blog ) > h2{
		margin-top : calc( 28 var( --remBase ) );
		font-size : 2.4rem;
	}
	:where( #information , #blog ) > h2::after{
		background-image : linear-gradient( to right , var( --wp--custom--primary ) calc( 100 var( --percentBase ) ) , #f2f2f2 calc( 100 var( --percentBase ) ) );
	}
}
@media screen and ( width > 750px ) , print{
	:where( #information , #blog ) .head{
		column-gap : calc( 16 * 100% / 1040 );
	}
	:where( #information , #blog ) .head time{
		margin-top : calc( 7 var( --remBase ) );
		font-size : 2rem;
		line-height : 1.5;
	}
	:where( #information , #blog ) .head ul{
		column-gap : calc( 8 * 100% / 1040 );
	}
	:where( #information , #blog ) .head ul a{
		height : calc( 44 var( --remBase ) );
		padding-inline : calc( 16 var( --remBase ) );
		font-size : 2rem;
		line-height : 2;
	}
	:where( #information , #blog ) > h2{
		margin-top : calc( 24 var( --remBase ) );
		font-size : 3.2rem;
	}
	:where( #information , #blog ) > h2::after{
		background-image : linear-gradient( to right , var( --wp--custom--primary ) calc( 100 * 100% / 1040 ) , #f2f2f2 calc( 100 * 100% / 1040 ) );
	}
}
:where( #contentInformation , #contentBlog ) h2{
	font-size : 2.4rem;
	font-weight : 400;
	line-height : 1.3;
	border-left-color : var( --wp--custom--primary );
	border-left-style : solid;
	border-left-width : calc( 4 var( --remBase ) );
}
:where( #contentInformation , #contentBlog ) h3{
	padding-bottom : calc( 8 var( --remBase ) );
	font-size : 2.2rem;
	font-weight : 400;
	line-height : 1.3;
	border-bottom : solid 1px #d9d9d9;
}
@media screen and ( width <= 750px ){
	:where( #contentInformation , #contentBlog ){
		margin-top : calc( 28 var( --remBase ) );
	}
	:where( #contentInformation , #contentBlog ) p{
		font-size : 1.4rem;
		line-height : 2;
	}
	:where( #contentInformation , #contentBlog ) h2{
		padding-left : calc( 8 var( --percentBase ) );
	}
	:where( #contentInformation , #contentBlog ) h2 + p{
		margin-top : calc( 28 var( --remBase ) );
	}
	:where( #contentInformation , #contentBlog ) p + h2{
		margin-top : calc( 30 var( --remBase ) );
	}
	:where( #contentInformation , #contentBlog ) p + h3{
		margin-top : calc( 30 var( --remBase ) );
	}
	:where( #contentInformation , #contentBlog ) h3 + p{
		margin-top : calc( 16 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	:where( #contentInformation , #contentBlog ){
		margin-top : calc( 28 var( --remBase ) );
	}
	:where( #contentInformation , #contentBlog ) p{
		font-size : 1.6rem;
		line-height : 1.7;
	}
	:where( #contentInformation , #contentBlog ) h2{
		padding-left : calc( 12 * 100% / 1040 );
	}
	:where( #contentInformation , #contentBlog ) h2 + p{
		margin-top : calc( 16 var( --remBase ) );
	}
	:where( #contentInformation , #contentBlog ) p + h2{
		margin-top : calc( 30 var( --remBase ) );
	}
	:where( #contentInformation , #contentBlog ) p + h3{
		margin-top : calc( 12 var( --remBase ) );
	}
	:where( #contentInformation , #contentBlog ) h3 + p{
		margin-top : calc( 16 var( --remBase ) );
	}
}



.content {
	h2.wp-block-heading {
		font-weight : 700;
		margin-bottom: calc( 16 var( --remBase ) );
		margin-top: calc( 40 var( --remBase ) );
	}
	h2.wp-block-heading::first-letter{
		color : var( --wp--custom--primary );
	}
	h2.wp-block-heading::after{
		display : block;
		width : 100%;
		height : calc( 4 var( --remBase ) );
		font-size : 0;
		content : "";
	}
	.wp-block-gallery {
		display: flex;
		flex-wrap: wrap;
		column-gap: calc( 16 var( --remBase ) );
		row-gap: calc( 16 var( --remBase ) );
	}
	ul.wp-block-list{
		padding-left: 1.5em;
		
		li {
			list-style: disc;
		}
	}
	ol.wp-block-list{
		padding-left: 1.5em;
		li {
			list-style: decimal;
		}
	}
}
@media screen and ( width <= 750px ){
	.content {
		font-size: 1.6rem;
		line-height: 1.7;
		
		h2.wp-block-heading {
			font-size : 2.4rem;
			line-height : 1.3;
		}
		h2.wp-block-heading::after{
			margin-top : calc( 16 var( --remBase ) );
			background-image : linear-gradient( to right , var( --wp--custom--primary ) calc( 30 var( --remBase ) ) , #f2f2f2 calc( 30 var( --remBase ) ) );
		}
		h3.wp-block-heading {
		}
	}
}
@media screen and ( width > 750px ) , print{
	.content {
		font-size: 1.6rem;
		line-height: 1.7;
		
		h2.wp-block-heading {
			font-size : 3.2rem;
			line-height : 1.5;
		}
		h2.wp-block-heading::after{
			margin-top : calc( 8 var( --remBase ) );
			background-image : linear-gradient( to right , var( --wp--custom--primary ) calc( 36 var( --remBase ) ) , #f2f2f2 calc( 36 var( --remBase ) ) );
		}
		h3.wp-block-heading {
			font-size : 2.8rem;
		}
	}
}

/*-------------------
FAQ
-------------------------*/
#faq .faq-title{
	display : grid;
	align-items : center;
}
#faq .faq-title::before{
	display : grid;
	place-items : center;
	height : auto;
	aspect-ratio : 1;
	font-family : Alata;
	color : white;
	content : "Q";
	background-color : var( --wp--custom--primary );
}
#faq .faq-title span{
	color : #444343;
}
#faq .faq-contents{

}
#faq details .faq-contents{
	grid-template-rows : 1fr;
}
#faq .faq-contents > div{
	display : grid;
	align-items : start;
	overflow : hidden;
}
#faq .faq-contents > div::before{
	display : grid;
	place-items : center;
	height : auto;
	aspect-ratio : 1;
	font-family : Alata;
	color : var( --wp--custom--primary );
	content : "A";
	background-color : #f2f2f2;
}
#faq .link{
	font-size : 1.6rem;
	-webkit-text-decoration : underline;
	text-decoration : underline;
}
@media screen and ( width <= 750px ){
	#faq{
		padding-bottom : calc( 62 var( --remBase ) );
		margin-top : calc( 44 var( --remBase ) );
	}
	#faq .faq-title{
		grid-template-columns : calc( 48 var( --percentBase ) ) 1fr;
		column-gap : calc( 8 var( --percentBase ) );
		font-size :2rem;
	}
	#faq .faq-title::before{
		font-size : 2.6rem;
		font-weight: 400;
	}
	#faq .faq-title span{
		padding-top : calc( 10 var( --remBase ) );
		font-size : 1.6rem;
		line-height : 1.8;
	}
	#faq .faq-contents > div{
		grid-template-columns : calc( 48 var( --percentBase ) ) 1fr;
		column-gap : calc( 8 var( --percentBase ) );
	}
	#faq .faq-contents > div::before{
		font-size : 2.6rem;
	}
	#faq .content{
		padding-top : calc( 10 var( --remBase ) );
	}
	#faq .content p{
		line-height : 1.8;
	}
	#faq .link{
		line-height : 1.8;
	}
	#faq details.is-open .detailsContent{
		padding-top : calc( 8 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#faq{
		padding-bottom : calc( 394 var( --remBase ) );
		margin-top : calc( 40 var( --remBase ) );
	}
	#faq .faq-title{
		grid-template-columns : calc( 80 var( --percentBase ) ) 1fr;
		column-gap : calc( 18 var( --percentBase ) );
		font-size : 3.2rem;
	}
	#faq .faq-title::before{
	}
	#faq summary span{
		padding-top : calc( 22 var( --remBase ) );
		font-size : 2rem;
		line-height : 2;
	}
	#faq .faq-contents > div{
		grid-template-columns : calc( 80 * 100% / 1320 ) 1fr;
		column-gap : calc( 18 * 100% / 1320 );
		padding-left : calc( 80 var( --percentBase ) );
	}
	#faq .faq-contents > div::before{
		font-size : 3.2rem;
	}
	#faq .content{
		padding-top : calc( 24 var( --remBase ) );
	}
	#faq .content p{
		line-height : 2;
	}
	#faq .link{
		line-height : 2;
	}
}