@charset "UTF-8";

/* --------------------------------------------
PAGINATION
--------------------------------------------- */
#paginationArchive{
	position : relative;
	left : 50%;
	display : inline-grid;
	grid-auto-flow : column;
	translate : -50% 0;
}
#paginationArchive a , #paginationArchive span{
	display : grid;
	place-items : center;
	width : 100%;
	height : 100%;
	aspect-ratio : 1;
}
#paginationArchive :where( .prev , .next ){
	position : absolute;
	height : 100%;
}
#paginationArchive{
	column-gap : calc( 8 var( --remBase ) );
}
#paginationArchive a , #paginationArchive span{
	width : auto;
	height : calc( 40 var( --remBase ) );
	font-size : 1.8rem;
	font-weight : 500;
	border-style : solid;
	border-width : 1px;
}
#paginationArchive .current{
	color : white;
	background-color : var( --wp--custom--primary );
	border-color : #e85400;
}
#paginationArchive a{
	border-color : #c4c4c4;
}
#paginationArchive a:has( img ){
	background-color : #c4c4c4;
}
#paginationArchive a:not( :has( img ) ){
	color : #333;
	background-color : white;
}
#paginationArchive img{
	height : calc( 14 var( --remBase ) );
	filter : var( --filterWhite );
}
#paginationArchive .dots{
	border-color : transparent;
}
#paginationArchive .prev{
	left : calc( -48 var( --remBase ) );
}
#paginationArchive .next{
	right : calc( -48 var( --remBase ) );
}
@media ( hover : hover ){
	#paginationArchive a:hover:has( img ){
		background-color : white;
	}
	#paginationArchive a:hover:has( img ) img{
		filter : invert( 91% ) sepia( 18% ) saturate( 0% ) hue-rotate( 162deg ) brightness( 85% ) contrast( 87% );
	}
	#paginationArchive a:hover:not( :has( img ) ){
		color : white;
		background-color : #c4c4c4;
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#paginationArchive a:has( img ){
		transition : background-color var( --transitionBase );
	}
	#paginationArchive a:has( img ) img{
		transition : filter var( --transitionBase );
	}
	#paginationArchive a:not( :has( img ) ){
		transition : background-color var( --transitionBase ) , color var( --transitionBase );
	}
}

/* --------------------------------------------
STAFF
--------------------------------------------- */
#staff > ul > li{
	display : grid;
	align-items : start;
}
#staff picture{
	grid-row : 1/3;
}
#staff picture img{
	width : 100%;
	height : 100%;
	object-fit : cover;
	object-position : center;
}
#staff h2{
	grid-row : 1;
	align-items : start;
	font-size : 3.2rem;
	font-weight : 700;
	line-height : 1.5;
}
#staff h2::first-letter{
	color : var( --wp--custom--primary );
}
#staff h2::after{
	display : block;
	width : 100%;
	height : calc( 4 var( --remBase ) );
	margin-top : calc( 8 var( --remBase ) );
	font-size : 0;
	content : "";
}
#staff dl{
	display : grid;
	grid-row : 2;
}
#staff dt , #staff dd{
	font-size : 1.8rem;
	font-weight : 500;
	line-height : 1.5;
	border-bottom : solid 1px #f2f2f2;
}
#staff ul.inline{
	display : inline;
	font-size : 0;
}
#staff ul.inline li{
	display : inline;
	font-size : 1.8rem;
	line-height : 1.5;
}
#staff ul.inline li:not( :last-child ){
	padding-right : 1em;
}
#staff .messages{
	position : relative;
	grid-row : 3;
	grid-column : 1/3;
	background-color : color-mix( in sRGB , var( --wp--custom--primary ) 10% , transparent );
}
#staff .messages h3{
	position : absolute;
}
#staff .messages h3 img{
	height : calc( 67.55 var( --remBase ) );
}
#staff .messages p{
	font-size : 1.6rem;
	line-height : 2;
}
@media screen and ( width <= 750px ){
	#staff{
		padding-bottom : calc( 134 var( --remBase ) );
		margin-top : calc( 42 var( --remBase ) );
	}
	#staff > ul > li{
		column-gap : calc( 8 var( --percentBase ) );
	}
	#staff > ul > li:nth-child( odd ){
		grid-template-columns : calc( 120 var( --percentBase ) ) 1fr;
	}
	#staff > ul > li:nth-child( odd ) picture{
		grid-column : 1;
	}
	#staff > ul > li:nth-child( odd ) h2 , #staff > ul > li:nth-child( odd ) dl{
		grid-column : 2;
	}
	#staff > ul > li:nth-child( even ){
		grid-template-columns : 1fr calc( 120 var( --percentBase ) );
	}
	#staff > ul > li:nth-child( even ) h2 , #staff > ul > li:nth-child( even ) dl{
		grid-column : 1;
	}
	#staff > ul > li:nth-child( even ) picture{
		grid-column : 2;
	}
	#staff > ul > li + li{
		margin-top : calc( 30 var( --remBase ) );
	}
	#staff picture{
		height : calc( 158 var( --remBase ) );
	}
	#staff h2::after{
		background-image : linear-gradient( to right , var( --wp--custom--primary ) calc( 42 * 100% / 240 ) , #f2f2f2 calc( 42 * 100% / 240 ) );
	}
	#staff dl{
		grid-template-columns : calc( 68 * 100% / 240 ) 1fr;
	}
	#staff dt , #staff dd{
		padding-block : calc( 10 var( --remBase ) );
	}
	#staff dt{
		padding-right : calc( 8 * 100% / 68 );
	}
	#staff .messages{
		padding-top : calc( 75 var( --remBase ) );
		padding-bottom : calc( 16 var( --remBase ) );
		margin-top : calc( 20 var( --remBase ) );
	}
	#staff .messages h3{
		top : calc( -6.26 var( --remBase ) );
		left : calc( 5.14 var( --percentBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#staff{
		padding-bottom : calc( 80 var( --remBase ) );
		margin-top : calc( 80 var( --remBase ) );
	}
	#staff > ul{
		display : grid;
		grid-template-columns : repeat( 2 , calc( 680 var( --percentBase ) ) );
		row-gap : calc( 40 var( --remBase ) );
		align-items : start;
		justify-content : space-between;
	}
	#staff > ul > li{
		grid-template-rows : subgrid;
		grid-template-columns : calc( 200 * 100% / 680 ) 1fr;
		grid-row : span 5;
		row-gap : 0;
		column-gap : calc( 24 * 100% / 680 );
	}
	#staff > ul > li:nth-child( 4n+1 ) , #staff > ul > li:nth-child( 4n+2 ){
		grid-template-columns : calc( 200 * 100% / 680 ) 1fr;
	}
	#staff > ul > li:nth-child( 4n+1 ) picture , #staff > ul > li:nth-child( 4n+2 ) picture{
		grid-column : 1;
	}
	#staff > ul > li:nth-child( 4n+1 ) h3 , #staff > ul > li:nth-child( 4n+2 ) h3{
		grid-column : 2;
	}
	#staff > ul > li:nth-child( 4n+1 ) dl , #staff > ul > li:nth-child( 4n+2 ) dl{
		grid-column : 2;
	}
	#staff > ul > li:nth-child( 4n+3 ) , #staff > ul > li:nth-child( 4n+4 ){
		grid-template-columns : 1fr calc( 200 * 100% / 680 );
	}
	#staff > ul > li:nth-child( 4n+3 ) h3 , #staff > ul > li:nth-child( 4n+4 ) h3{
		grid-column : 1;
	}
	#staff > ul > li:nth-child( 4n+3 ) dl , #staff > ul > li:nth-child( 4n+4 ) dl{
		grid-column : 1;
	}
	#staff > ul > li:nth-child( 4n+3 ) picture , #staff > ul > li:nth-child( 4n+4 ) picture{
		grid-column : 2;
	}
	#staff h2{
		padding-top : calc( 16 var( --remBase ) );
	}
	#staff h2::after{
		background-image : linear-gradient( to right , var( --wp--custom--primary ) calc( 82.91 * 100% / 456 ) , #f2f2f2 calc( 82.91 * 100% / 456 ) );
	}
	#staff dl{
		grid-template-columns : calc( 128 * 100% / 456 ) 1fr;
		padding-top : calc( 24 var( --remBase ) );
	}
	#staff dt , #staff dd{
		padding-block : calc( 8 var( --remBase ) );
	}
	#staff dt{
		padding-right : calc( 8 * 100% / 128 );
	}
	#staff .messages{
		padding-inline : calc( 24 * 100% / 680 );
		padding-top : calc( 48 var( --remBase ) );
		padding-bottom : calc( 24 var( --remBase ) );
		margin-top : calc( 28 var( --remBase ) );
	}
	#staff .messages h3{
		top : calc( -20.16 var( --remBase ) );
		left : calc( -12.21 * 100% / 680 );
	}
}

/* --------------------------------------------
SHOP
--------------------------------------------- */
#shop{
	padding-bottom : calc( 102 var( --remBase ) );
}
#shop > ul > li + li{
	margin-top : calc( 120 var( --remBase ) );
}
#shop li > h2 , #shop hgroup h2{
	text-align : center;
}
#shop li > h2::first-letter , #shop hgroup h2::first-letter{
	color : var( --wp--custom--primary );
}
#shop li > h2::after , #shop hgroup h2::after{
	display : block;
	height : calc( 4 var( --remBase ) );
	margin-inline : auto;
	font-size : 0;
	content : "";
	background-color : var( --wp--custom--primary );
}
#shop hgroup{
	font-weight : 700;
	text-align : center;
}
#shop li > h2{
	font-weight : 700;
	text-align : center;
}
#shop picture img{
	width : 100%;
	height : auto;
}
#shop dl{
	display : grid;
}
#shop dt , #shop dd{
	padding-block : calc( 8 var( --remBase ) );
	font-size : 1.6rem;
	line-height : 2;
}
#shop dt:not( :last-of-type ) , #shop dd:not( :last-of-type ){
	border-bottom : solid 1px #d9d9d9;
}
#shop dt{
	padding-right : calc( 4 * 100% / 120 );
}
#shop h3{
	font-size : 3.2rem;
	font-weight : 700;
	line-height : 1.5;
}
#shop h3::after{
	display : block;
	width : 100%;
	height : calc( 4 var( --remBase ) );
	margin-top : calc( 8 var( --remBase ) );
	font-size : 0;
	content : "";
}
#shop iframe{
	width : 100%;
	height : auto;
}
@media screen and ( width <= 750px ){
	#shop{
		margin-top : calc( 42 var( --remBase ) );
	}
	#shop hgroup p{
		font-size : 1.7rem;
		line-height : 1.3;
	}
	#shop li > h2 , #shop hgroup h2{
		font-size : 2.8rem;
		line-height : 1.3;
	}
	#shop li > h2::after , #shop hgroup h2::after{
		width : calc( 220 var( --percentBase ) );
		margin-top : calc( 9 var( --remBase ) );
	}
	#shop picture{
		margin-top : calc( 40 var( --remBase ) );
	}
	#shop dl{
		grid-template-columns : calc( 120 var( --percentBase ) ) 1fr;
		margin-top : calc( 36 var( --remBase ) );
	}
	#shop h3{
		margin-top : calc( 40 var( --remBase ) );
	}
	#shop h3::after{
		background-image : linear-gradient( to right , var( --wp--custom--primary ) calc( 36 var( --percentBase ) ) , #f2f2f2 calc( 36 var( --percentBase ) ) );
	}
	#shop iframe{
		aspect-ratio : 1;
		margin-top : calc( 16 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#shop{
		margin-top : calc( 80 var( --remBase ) );
	}
	#shop > ul > li{
		display : grid;
		grid-template-rows : auto calc( 38 var( --remBase ) ) auto calc( 80 var( --remBase ) ) auto calc( 16 var( --remBase ) ) auto;
		grid-template-columns : calc( 560 var( --percentBase ) ) 1fr;
		column-gap : calc( 40 var( --percentBase ) );
	}
	#shop hgroup , #shop li > h2{
		grid-row : 1;
		grid-column : 1/-1;
	}
	#shop hgroup p{
		font-size : 3.2rem;
		line-height : 1.2;
		text-align : center;
		text-indent : .1em;
		letter-spacing : .1em;
	}
	#shop li > h2 , #shop hgroup h2{
		font-size : 5.4rem;
		line-height : 1.2;
		text-align : center;
		text-indent : .1em;
		letter-spacing : .1em;
	}
	#shop li > h2::after , #shop hgroup h2::after{
		width : calc( 156 var( --percentBase ) );
		margin-top : calc( 32 var( --remBase ) );
	}
	#shop picture{
		grid-row : 3;
		grid-column : 1;
		align-self : start;
	}
	#shop dl{
		grid-template-columns : calc( 120 * 100% / 800 ) 1fr;
		grid-row : 3;
		grid-column : 2;
		align-self : start;
	}
	#shop h3{
		grid-row : 5;
		grid-column : 1/-1;
	}
	#shop h3::after{
		background-image : linear-gradient( to right , var( --wp--custom--primary ) calc( 140 var( --percentBase ) ) , #f2f2f2 calc( 140 var( --percentBase ) ) );
	}
	#shop iframe{
		grid-row : 7;
		grid-column : 1/-1;
		aspect-ratio : 1400/437;
	}
}

/* --------------------------------------------
CASE
--------------------------------------------- */
#caseCategories ul{
	display : flex;
	flex-wrap : wrap;
	row-gap : calc( 8 var( --remBase ) );
	column-gap : calc( 8 var( --percentBase ) );
}
#caseCategories li{
	height : calc( 48 var( --remBase ) );
	font-size : 1.6rem;
	font-weight : 500;
}
#caseCategories li[aria-current] , #caseCategories a{
	display : grid;
	place-items : center;
}
#caseCategories li:not( :has( a , img ) ) , #caseCategories li:not( :has( img ) ):has( a ) a{
	padding-inline : calc( 26.5 var( --remBase ) );
}
#caseCategories li[aria-current]{
	background-color : #f1f2ed;
}
#caseCategories li:not( :has( a ) ):has( img ){
	grid-template-columns : auto auto;
	padding-inline : calc( 8 var( --remBase ) );
}
#caseCategories a{
	height : 100%;
	padding-inline : calc( 8 var( --remBase ) );
	font-size : 1.6rem;
	border : solid 1px #f1f2ed;
}
#caseCategories a:has( img ){
	grid-template-columns : auto auto;
}
#caseCategories img{
	width : auto;
	height : calc( 40 var( --remBase ) );
	aspect-ratio : 1;
}
@media screen and ( width <= 750px ){
	#caseCategories{
		padding-bottom : calc( 30 var( --remBase ) );
		margin-top : calc( 42 var( --remBase ) );
	}
	#caseCategories li:not( :has( a ) ):has( img ){
		column-gap : calc( 4 var( --remBase ) );
	}
	#caseCategories a:has( img ){
		column-gap : calc( 4 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#caseCategories{
		padding-bottom : calc( 96 var( --remBase ) );
		margin-top : calc( 80 var( --remBase ) );
	}
	#caseCategories li:not( :has( a ) ):has( img ){
		column-gap : calc( 8 var( --remBase ) );
	}
	#caseCategories a:has( img ){
		column-gap : calc( 8 var( --remBase ) );
	}
}
@media ( hover : hover ){
	#caseCategories a:hover{
		background-color : #f1f2ed;
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#caseCategories a{
		transition : background-color var( --transitionBase );
	}
}
#case > ul > li > a{
	display : grid;
	row-gap : calc( 8 var( --remBase ) );
}
#case > ul > li > a > picture{
	grid-row : 1;
	grid-column : 1;
	width : 100%;
}
#case > ul > li > a > picture img{
	width : 100%;
	height : 100%;
	object-fit : cover;
	object-position : center;
}
#case > 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;
}
#case > ul > li > a h2{
	grid-row : 2;
	grid-column : 1;
	font-size : 1.6rem;
	font-weight : 400;
	line-height : 1.5;
}
#case > ul > li > a ul{
	display : flex;
	flex-wrap : wrap;
	grid-row : 3;
	grid-column : 1;
	row-gap : calc( 4 var( --remBase ) );
}
#case > 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 ){
	#case{
		padding-bottom : calc( 44 var( --remBase ) );
	}
	#case > ul > li + li{
		margin-top : calc( 40 var( --remBase ) );
	}
	#case > ul > li > a > picture{
		height : calc( 256 var( --remBase ) );
	}
	#case > ul > li > a ul{
		column-gap : calc( 4 var( --percentBase ) );
	}
	#case #paginationArchive{
		margin-top : calc( 96 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#case{
		padding-bottom : calc( 80 var( --remBase ) );
	}
	#case > ul{
		display : grid;
		grid-template-columns : repeat( 4 , calc( 320 var( --percentBase ) ) );
		row-gap : calc( 74 var( --remBase ) );
		justify-content : space-between;
	}
	#case > ul > li{
		display : grid;
		grid-template-rows : subgrid;
		grid-row : span 3;
		row-gap : 0;
	}
	#case > ul > li > a{
		grid-template-rows : subgrid;
		grid-row : span 3;
	}
	#case > ul > li > a > picture{
		height : calc( 234 var( --remBase ) );
	}
	#case > ul > li > a ul{
		column-gap : calc( 4 * 100% / 320 );
	}
	#case #paginationArchive{
		margin-top : calc( 96 var( --remBase ) );
	}
}

/* --------------------------------------------
PLANS
--------------------------------------------- */
#planCategories a{
	display : grid;
}
#planCategories a > span{
	display : grid;
	grid-template-columns : auto auto;
	grid-row : 2;
	grid-column : 1;
	align-items : center;
	justify-content : start;
	font-size : 2rem;
	font-weight : 700;
	background-color : white;
}
#planCategories .bg{
	grid-row : 1/-1;
	grid-column : 1/-1;
	width : 100%;
	height : 100%;
	object-fit : cover;
}
#planCategories .icon{
	aspect-ratio : 1;
	font-size : 0;
}
@media screen and ( width <= 750px ){
	#planCategories{
		margin-top : calc( 38 var( --remBase ) );
	}
	#planCategories ul{
		margin-top : calc( 30 var( --remBase ) );
	}
	#planCategories li + li{
		margin-top : calc( 34 var( --remBase ) );
	}
	#planCategories a{
		grid-template-rows : calc( 104 var( --remBase ) ) calc( 80 var( --remBase ) );
		grid-template-columns : calc( 242 var( --percentBase ) ) 1fr;
		height : calc( 184 var( --remBase ) );
	}
	#planCategories a > span{
		padding-inline : calc( 8 * 100% / 242 );
	}
	#planCategories a .icon{
		height : calc( 70 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#planCategories{
		margin-top : calc( 80 var( --remBase ) );
	}
	#planCategories ul{
		display : grid;
		grid-template-columns : repeat( 4 , calc( 320 var( --percentBase ) ) );
		grid-auto-rows : calc( 160 var( --remBase ) );
		row-gap : calc( 40 var( --remBase ) );
		justify-content : space-between;
		margin-top : calc( 52 var( --remBase ) );
	}
	#planCategories a{
		grid-template-rows : calc( 90 var( --remBase ) ) calc( 70 var( --remBase ) );
		grid-template-columns : calc( 212 * 100% / 320 ) 1fr;
		height : 100%;
	}
	#planCategories a > span{
		padding-inline : calc( 8 * 100% / 212 );
	}
	#planCategories a .icon{
		height : calc( 60 var( --remBase ) );
	}
}
#plan > ul > li > a{
	display : grid;
	grid-template-rows : auto calc( 8 var( --remBase ) ) calc( 48 var( --remBase ) ) calc( 16 var( --remBase ) ) auto calc( 16 var( --remBase ) ) 1fr;
	align-items : start;
}
#plan h2{
	display : grid;
	grid-template-columns : auto auto;
	grid-row : 1;
	grid-column : 1/-1;
	align-items : center;
	justify-content : start;
	padding-bottom : calc( 4 var( --remBase ) );
	border-bottom : solid 1px #d9d9d9;
}
#plan h2 .icon{
	width : auto;
	height : calc( 40 var( --remBase ) );
	aspect-ratio : 1;
}
#plan h2 > span{
	display : grid;
	grid-template-columns : auto auto;
	align-items : baseline;
	justify-content : start;
	font-size : 2.8rem;
	font-weight : 700;
}
#plan h2 > span span{
	font-size : 2rem;
}
#plan .maker{
	grid-row : 3;
	grid-column : 1;
	width : 100%;
	height : 100%;
}
#plan .maker img{
	width : 100%;
	height : 100%;
	object-fit : contain;
	object-position : left center;
}
#plan .price{
	display : flex;
	flex-wrap : wrap;
	grid-template-columns : auto auto;
	grid-row : 5;
	grid-column : 1;
	align-items : baseline;
	justify-content : start;
	font-size : 6rem;
	font-weight : 700;
	color : var( --wp--custom--red );
}
#plan .price span{
	font-size : 2rem;
}
#plan ul ul{
	display : flex;
	flex-wrap : wrap;
	grid-row : 7;
	grid-column : 1;
	row-gap : calc( 4 var( --remBase ) );
}
#plan 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;
}
#plan picture{
	grid-row : 3 / -1;
	grid-column : 2;
	align-self : start;
	width : 100%;
}
#plan picture img{
	width : 100%;
	height : 100%;
	object-fit : cover;
	object-position : center;
}
@media screen and ( width <= 750px ){
	#plan{
		padding-bottom : calc( 98 var( --remBase ) );
		margin-top : calc( 30 var( --remBase ) );
	}
	#plan > ul{
		margin-top : calc( 30 var( --remBase ) );
	}
	#plan > ul > li + li{
		margin-top : calc( 30 var( --remBase ) );
	}
	#plan > ul > li > a{
		grid-template-columns : 1fr calc( 160 var( --percentBase ) );
	}
	#plan ul ul{
		column-gap : calc( 4 * 100% / 208 );
	}
	#plan picture{
		height : calc( 160 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#plan{
		padding-bottom : calc( 92 var( --remBase ) );
		margin-top : calc( 80 var( --remBase ) );
	}
	#plan > ul{
		display : grid;
		grid-template-columns : repeat( 3 , calc( 440 var( --percentBase ) ) );
		justify-content : space-between;
		margin-top : calc( 40 var( --remBase ) );
	}
	#plan > ul > li > a{
		grid-template-columns : 1fr calc( 200 * 100% / 440 );
	}
	#plan ul ul{
		column-gap : calc( 4 * 100% / 240 );
	}
	#plan picture{
		height : calc( 200 var( --remBase ) );
	}
}

/* --------------------------------------------
PLAN CATEGORY
--------------------------------------------- */
#planstitle{
	position : relative;
	overflow-x : clip;
}
#planstitle .icon{
	aspect-ratio : 1;
}
#planstitle > span{
	display : grid;
	grid-auto-flow : column;
	align-items : center;
	justify-content : start;
}
#planstitle > span span{
	font-weight : 700;
	letter-spacing : .1em;
}
#planstitle > span span::first-letter{
	color : var( --wp--custom--primary );
}
@media screen and ( width <= 750px ){
	#planstitle{
		margin-top : calc( 38 var( --remBase ) );
	}
	#planstitle .bg{
		width : 100%;
		height : auto;
	}
	#planstitle > span{
		column-gap : calc( 12 var( --percentBase ) );
		width : 100%;
	}
	#planstitle > span .icon{
		height : calc( 60 var( --remBase ) );
	}
	#planstitle > span span{
		font-size : 2.8rem;
		line-height : 1.3;
	}
}
@media screen and ( width > 750px ) , print{
	#planstitle{
		display : grid;
		grid-template-rows : calc( 252 var( --remBase ) ) calc( 122 var( --remBase ) );
		grid-template-columns : calc( 720 var( --percentBase ) ) 1fr;
		margin-top : calc( 40 var( --remBase ) );
	}
	#planstitle .bg{
		grid-row : 1/-1;
		grid-column : 1/-1;
		object-fit : cover;
	}
	#planstitle > span{
		grid-row : 2;
		grid-column : 1;
		column-gap : calc( 24 * 100% / 720 );
		background-color : white;
	}
	#planstitle > span .icon{
		height : 100%;
	}
	#planstitle > span span{
		font-size : 5.4rem;
	}
}
#planContents h2{
	font-weight : 700;
}
#planContents h2::after{
	display : block;
	width : 100%;
	height : calc( 4 var( --remBase ) );
	font-size : 0;
	content : "";
}
#planContents picture img{
	width : 100%;
	height : auto;
}
#planContents p{
	font-size : 1.6rem;
	line-height : 2;
}
@media screen and ( width <= 750px ){
	#planContents{
		margin-top : calc( 48 var( --remBase ) );
	}
	#planContents h2{
		font-size : 2.8rem;
		line-height : 1.3;
	}
	#planContents h2::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 ) ) );
	}
	#planContents p{
		margin-top : calc( 18 var( --remBase ) );
	}
	#planContents picture{
		margin-top : calc( 16 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#planContents{
		margin-top : calc( 76 var( --remBase ) );
	}
	#planContents section{
		display : grid;
		grid-template-rows : auto 1fr;
		grid-template-columns : calc( 920 var( --percentBase ) ) calc( 440 var( --percentBase ) );
		row-gap : calc( 16 var( --remBase ) );
		align-items : start;
		justify-content : space-between;
	}
	#planContents h2{
		grid-row : 1;
		grid-column : 1;
		font-size : 3.2rem;
		line-height : 1.5;
	}
	#planContents h2::after{
		margin-top : calc( 8 var( --remBase ) );
		background-image : linear-gradient( to right , var( --wp--custom--primary ) calc( 32 * 100% / 920 ) , #f2f2f2 calc( 32 * 100% / 920 ) );
	}
	#planContents p{
		grid-row : 2;
		grid-column : 1;
		align-self : start;
	}
	#planContents picture{
		grid-row : 1/-1;
		grid-column : 2;
	}
}
#plans h2{
	line-height : 1.5;
}
#plans h2::after{
	display : block;
	width : 100%;
	height : calc( 4 var( --remBase ) );
	font-size : 0;
	content : "";
}
#plans .catchcopy{
	display : block;
	align-items : center;
	justify-content : center;
	padding-block : calc( 8 var( --remBase ) );
	font-weight : 700;
	color : white;
	text-align : center;
	background-color : var( --wp--custom--red );
}
#plans .maker{
	width : 100%;
	height : calc( 48 var( --remBase ) );
}
#plans .maker img{
	width : 100%;
	height : 100%;
	object-fit : contain;
	object-position : left center;
}
#plans dl{
	display : grid;
}
#plans 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 );
}
#plans del{
	display : grid;
	grid-template-columns : auto auto;
	align-items : baseline;
	justify-content : start;
	font-weight : 700;
	-webkit-text-decoration : none;
	text-decoration : none;
}
#plans del span:nth-of-type( 1 ){
	-webkit-text-decoration : line-through;
	text-decoration : line-through;
}
#plans ins{
	display : grid;
	grid-template-columns : auto auto;
	font-weight : 700;
	color : var( --wp--custom--red );
	-webkit-text-decoration : none;
	text-decoration : none;
}
#plans dd:not( :has( del ) ){
	display : grid;
	grid-template-columns : auto auto;
	font-weight : 700;
	color : var( --wp--custom--red );
}
#plans ul ul{
	display : flex;
	flex-wrap : wrap;
	grid-row : 7;
	grid-column : 1;
	row-gap : calc( 4 var( --remBase ) );
}
#plans 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;
}
@media screen and ( width <= 750px ){
	#plans{
		padding-bottom : calc( 142 var( --remBase ) );
		margin-top : calc( 60 var( --remBase ) );
	}
	#plans > ul > li + li{
		padding-top : calc( 30 var( --remBase ) );
		margin-top : calc( 30 var( --remBase ) );
		border-top : solid 1px #9fa0a0;
	}
	#plans > ul > li > a{
		display : block;
	}
	#plans picture img{
		width : 100%;
		height : auto;
	}
	#plans h2{
		margin-top : calc( 24 var( --remBase ) );
		font-size : 2.4rem;
		font-weight : 500;
	}
	#plans 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 ) ) );
	}
	#plans .catchcopy{
		padding-inline : calc( 8 var( --percentBase ) );
		margin-top : calc( 24 var( --remBase ) );
		font-size : 3rem;
	}
	#plans .maker{
		margin-top : calc( 22 var( --remBase ) );
	}
	#plans 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 ) );
	}
	#plans dd:has( del ){
		display : contents;
	}
	#plans dd:has( del ) del{
		grid-row : 1;
		grid-column : 2;
	}
	#plans dd:has( del ) del span:nth-of-type( 1 ){
		font-size : 5.2rem;
	}
	#plans dd:has( del ) del span:nth-of-type( 2 ){
		font-size : 1.6rem;
	}
	#plans 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;
	}
	#plans dd:has( del ) ins span{
		font-size : 2rem;
	}
	#plans 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;
	}
	#plans dd:not( :has( del ) ) span{
		font-size : 2rem;
	}
	#plans ul ul{
		margin-top : calc( 22 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#plans{
		padding-bottom : calc( 142 var( --remBase ) );
		margin-top : calc( 40 var( --remBase ) );
	}
	#plans > ul > li + li{
		margin-top : calc( 40 var( --remBase ) );
	}
	#plans > ul > li > a{
		display : grid;
		grid-template-rows : auto auto auto auto auto;
		grid-template-columns : calc( 360 * 100% / 1320 ) 1fr;
		row-gap : calc( 22 var( --remBase ) );
		column-gap : calc( 40 * 100% / 1320 );
		padding-block : calc( 40 var( --remBase ) );
		padding-inline : calc( 40 var( --percentBase ) );
		outline : solid 1px #9fa0a0;
		outline-offset : -1px;
	}
	#plans picture{
		grid-row : 1/-1;
		grid-column : 1;
		height : calc( 360 var( --remBase ) );
	}
	#plans picture img{
		width : 100%;
		height : 100%;
		object-fit : cover;
		object-position : center;
	}
	#plans h2{
		grid-row : 1;
		grid-column : 2;
		padding-top : calc( 5 var( --remBase ) );
		font-size : 3.2rem;
		font-weight : 700;
	}
	#plans h2::after{
		margin-top : calc( 8 var( --remBase ) );
		background-image : linear-gradient( to right , var( --wp--custom--primary ) calc( 32 * 100% / 920 ) , #f2f2f2 calc( 32 * 100% / 920 ) );
	}
	#plans .catchcopy{
		grid-row : 2;
		grid-column : 2;
		width : fit-content;
		padding-inline : calc( 8 var( --remBase ) );
		font-size : 6rem;
	}
	#plans .maker{
		grid-row : 3;
		grid-column : 2;
	}
	#plans dl{
		grid-template-columns : calc( 128 * 100% / 920 ) auto auto;
		grid-row : 4;
		grid-column : 2;
		align-items : center;
		justify-content : start;
	}
	#plans del{
		grid-row : 1;
		grid-column : 2;
		padding-left : calc( 10 var( --remBase ) );
	}
	#plans del span:nth-of-type( 1 ){
		font-size : 5.2rem;
	}
	#plans del span:nth-of-type( 2 ){
		font-size : 1.6rem;
	}
	#plans ins{
		grid-row : 1;
		grid-column : 3;
		align-items : baseline;
		justify-content : start;
		padding-left : calc( 16 var( --remBase ) );
		font-size : 6rem;
	}
	#plans ins span{
		font-size : 2rem;
	}
	#plans dd:has( del ){
		display : contents;
	}
	#plans 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;
	}
	#plans dd:not( :has( del ) ) span{
		font-size : 2rem;
	}
	#plans ul ul{
		grid-row : 5;
		grid-column : 2;
	}
}

/* --------------------------------------------
FAQ
--------------------------------------------- */
#faqCategories ul{
	display : flex;
	flex-wrap : wrap;
	row-gap : calc( 8 var( --remBase ) );
	column-gap : calc( 8 var( --percentBase ) );
}
#faqCategories li{
	height : calc( 40 var( --remBase ) );
}
#faqCategories li[aria-current="page"] , #faqCategories a{
	display : grid;
	place-items : center;
	padding-inline : calc( 20 var( --remBase ) );
	font-size : 1.6rem;
	line-height : 1.5;
}
#faqCategories li[aria-current="page"]{
	color : white;
	background-color : var( --wp--custom--primary );
}
#faqCategories a{
	height : 100%;
	color : #444343;
	background-color : #f1f2ed;
}
@media screen and ( width <= 750px ){
	#faqCategories{
		margin-top : calc( 38 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#faqCategories{
		margin-top : calc( 40 var( --remBase ) );
	}
	#faqCategories ul{
		justify-content : center;
	}
}
@media ( hover : hover ){
	#faqCategories a:hover{
		color : white;
		background-color : var( --wp--custom--primary );
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#faqCategories a{
		transition : background var( --transitionBase ) , color var( --transitionBase );
	}
}
#faq details{
	padding-bottom : calc( 16 var( --remBase ) );
	border-bottom : solid 1px #d9d9d9;
}
#faq details + details{
	margin-top : calc( 16 var( --remBase ) );
}
#faq summary{
	display : grid;
	align-items : start;
}
#faq 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 );
}
#faq summary span{
	color : #444343;
}
#faq .detailsContent{
	display : grid;
	grid-template-rows : 0fr;
	grid-template-columns : 1fr;
}
#faq details.is-open .detailsContent{
	grid-template-rows : 1fr;
}
#faq .detailsContent > div{
	display : grid;
	align-items : start;
	overflow : hidden;
}
#faq .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;
}
#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 summary{
		grid-template-columns : calc( 48 var( --percentBase ) ) 1fr;
		column-gap : calc( 8 var( --percentBase ) );
	}
	#faq summary::before{
		font-size : 2.6rem;
	}
	#faq summary span{
		padding-top : calc( 10 var( --remBase ) );
		font-size : 1.6rem;
		line-height : 1.8;
	}
	#faq .detailsContent > div{
		grid-template-columns : calc( 48 var( --percentBase ) ) 1fr;
		column-gap : calc( 8 var( --percentBase ) );
	}
	#faq .detailsContent > 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 summary{
		grid-template-columns : calc( 80 var( --percentBase ) ) 1fr;
		column-gap : calc( 18 var( --percentBase ) );
	}
	#faq summary::before{
		font-size : 3.2rem;
	}
	#faq summary span{
		padding-top : calc( 22 var( --remBase ) );
		font-size : 2rem;
		line-height : 2;
	}
	#faq .detailsContent > div{
		grid-template-columns : calc( 80 * 100% / 1320 ) 1fr;
		column-gap : calc( 18 * 100% / 1320 );
		padding-left : calc( 80 var( --percentBase ) );
	}
	#faq .detailsContent > 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;
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#faq summary + div{
		transition : grid-template-rows var( --transitionBase ) , padding var( --transitionBase );
	}
}

/* --------------------------------------------
INFORMATION , BLOG
--------------------------------------------- */
@media screen and ( width <= 750px ){
	#column{
		padding-bottom : calc( 40 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#column{
		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 ) > ul > li > a{
	display : grid;
	align-items : start;
}
:where( #information , #blog ) picture{
	grid-row : 1/-1;
	grid-column : 1;
	align-self : start;
}
:where( #information , #blog ) picture img{
	width : 100%;
	height : 100%;
	object-fit : cover;
	object-position : center;
}
:where( #information , #blog ) time{
	grid-column : 3;
}
:where( #information , #blog ) p{
	display : grid;
	grid-column : 4;
	place-items : center;
	justify-self : start;
	color : white;
	background-color : var( --wp--custom--primary );
}
:where( #information , #blog ) h3{
	grid-column : 3/-1;
	font-weight : 400;
	letter-spacing : .05em;
}
:where( #information , #blog ) #paginationArchive{
	margin-top : calc( 40 var( --remBase ) );
}
@media screen and ( width <= 750px ){
	:where( #information , #blog ){
		padding-top : calc( 28 var( --remBase ) );
	}
	:where( #information , #blog ) > ul > li{
		padding-bottom : calc( 16 var( --remBase ) );
		border-bottom : solid 1px #d9d9d9;
	}
	:where( #information , #blog ) > ul > li + li{
		margin-top : calc( 16 var( --remBase ) );
	}
	:where( #information , #blog ) > ul > li > a{
		grid-template-rows : auto calc( 8 var( --remBase ) ) auto 1fr;
		grid-template-columns : calc( 113 var( --percentBase ) ) calc( 8 var( --percentBase ) ) calc( 82 var( --percentBase ) ) 1fr;
	}
	:where( #information , #blog ) picture{
		height : calc( 90 var( --remBase ) );
	}
	:where( #information , #blog ) time{
		grid-row : 1;
		margin-top : calc( .9 var( --remBase ) );
		font-size : 1.4rem;
		line-height : 1.3;
	}
	:where( #information , #blog ) p{
		grid-row : 1;
		height : calc( 20 var( --remBase ) );
		padding-inline : calc( 8 var( --remBase ) );
		font-size : 1.2rem;
	}
	:where( #information , #blog ) h3{
		grid-row : 3;
		font-size : 1.8rem;
		line-height : 1.5;
	}
}
@media screen and ( width > 750px ) , print{
	:where( #information , #blog ) > h2{
		font-size : 4rem;
		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 : "";
		background-image : linear-gradient( to right , var( --wp--custom--primary ) calc( 100 * 100% / 1040 ) , #f2f2f2 calc( 100 * 100% / 1040 ) );
	}
	:where( #information , #blog ) > ul{
		margin-top : calc( 48 var( --remBase ) );
	}
	:where( #information , #blog ) > ul > li + li{
		margin-top : calc( 40 var( --remBase ) );
	}
	:where( #information , #blog ) > ul > li > a{
		grid-template-rows : 1fr auto calc( 16 var( --remBase ) ) auto 1fr;
		grid-template-columns : calc( 300 * 100% / 1040 ) calc( 24 * 100% / 1040 ) calc( 120 * 100% / 1040 ) 1fr;
	}
	:where( #information , #blog ) picture{
		height : calc( 226 var( --remBase ) );
	}
	:where( #information , #blog ) time{
		grid-row : 2;
		margin-top : calc( 7 var( --remBase ) );
		font-size : 2rem;
		line-height : 1.5;
	}
	:where( #information , #blog ) p{
		grid-row : 2;
		height : calc( 44 var( --remBase ) );
		padding-inline : calc( 16 var( --remBase ) );
		font-size : 2rem;
		line-height : 2;
	}
	:where( #information , #blog ) h3{
		grid-row : 4;
		font-size : 3.2rem;
		line-height : 1.3;
	}
	:where( #information , #blog ) #paginationArchive{
		display : grid;
		justify-content : start;
	}
	:where( #information , #blog ) #paginationArchive .prev , :where( #information , #blog ) #paginationArchive .next{
		position : static;
	}
}

/* --------------------------------------------
VOICE
--------------------------------------------- */
#voice .area{
	display : grid;
	place-items : center;
	line-height : 1.5;
	color : white;
	background-color : var( --primary );
}
#voice .title{
	font-size : 1.6rem;
	line-height : 1.7;
	text-align : left;
}
#voice > ul > li > button{
	display : grid;
}
#voice > ul > li > button > .thumbnail{
	width : 100%;
}
#voice > ul > li > button > .thumbnail img{
	width : 100%;
	height : 100%;
	object-fit : cover;
	object-position : center;
}
#voice > ul > li > button > .area{
	justify-self : start;
	height : 100%;
	padding-inline : calc( 8 var( --remBase ) );
	font-size : 1.4rem;
}
@media screen and ( width <= 750px ){
	#voice{
		padding-bottom : calc( 44 var( --remBase ) );
		margin-top : calc( 24 var( --remBase ) );
	}
	#voice > ul > li + li{
		margin-top : calc( 20 var( --remBase ) );
	}
	#voice > ul > li > button{
		grid-template-rows : calc( 32 var( --remBase ) ) 1fr;
		grid-template-columns : calc( 178 var( --percentBase ) ) 1fr;
		row-gap : calc( 4 var( --remBase ) );
		column-gap : calc( 16 var( --percentBase ) );
	}
	#voice > ul > li > button > .thumbnail{
		grid-row : 1/-1;
		grid-column : 1;
		height : calc( 142 var( --remBase ) );
	}
	#voice > ul > li > button > .area{
		grid-row : 1;
		grid-column : 2;
	}
	#voice > ul > li > button > .title{
		grid-row : 2;
		grid-column : 2;
	}
}
@media screen and ( width > 750px ) , print{
	#voice{
		padding-bottom : calc( 68 var( --remBase ) );
		margin-top : calc( 72 var( --remBase ) );
	}
	#voice > ul{
		display : grid;
		grid-template-columns : repeat( 6 , calc( 200 var( --percentBase ) ) );
		row-gap : calc( 40 var( --remBase ) );
		justify-content : space-between;
	}
	#voice > ul > li > button{
		grid-template-rows : calc( 140 var( --remBase ) ) calc( 20 var( --remBase ) ) calc( 12 var( --remBase ) ) calc( 4 var( --remBase ) ) auto;
		grid-template-columns : 1fr;
		padding-bottom : calc( 40 var( --remBase ) );
	}
	#voice > ul > li > button > .thumbnail{
		grid-row : 1/3;
		grid-column : 1;
	}
	#voice > ul > li > button > .area{
		grid-row : 2/4;
		grid-column : 1;
		height : 100%;
	}
	#voice > ul > li > button > .title{
		grid-row : 5;
		grid-column : 1;
	}
}
#dialog[open]{
	position : fixed;
	display : grid;
	background-color : color-mix( in sRGB , black 40% , transparent );
	animation : fadeIn .3s ease-out 0s forwards;
}
#dialog.is-closing{
	animation : fadeOut .3s ease-out 0s forwards;
}
#dialog{
	align-content : center;
	width : 100%;
	height : 100dvh;
}
#dialog::backdrop{
	background-color : color-mix( in sRGB , white 80% , transparent );
}
#dialog .dialogContent{
	width : 100%;
	background-color : white;
}
#dialog .splide__list{
	align-items : flex-start ! important;
}
#dialog .splide__slide:not( .is-active ){
	height : 0 ! important;
}
#dialog header .area{
	font-size : 2rem;
	line-height : 2;
}
#dialog header h2{
	line-height : 1.3;
}
#dialog #contentVoice{
	margin-top : calc( 18 var( --remBase ) );
}
#dialog .splide__arrows{
	position : relative;
	display : grid;
	grid-template-rows : calc( 40 var( --remBase ) );
	align-items : center;
	justify-content : center;
	margin-top : calc( 18 var( --remBase ) );
}
#dialog .splide__arrows button{
	display : grid;
	grid-row : 1;
	place-items : center;
	width : 100%;
	height : 100%;
}
#dialog .splide__arrows button img{
	height : calc( 14 var( --remBase ) );
}
#dialog .splide__arrows button[disabled]{
	display : none;
}
#dialog .splide__arrows .splide__arrow--prev{
	grid-column : 1;
}
#dialog .splide__arrows .close{
	grid-column : 2;
	font-size : 1.8rem;
	font-weight : 500;
	line-height : 1.3;
	background-color : white;
	border : solid 1px #c4c4c4;
}
#dialog .splide__arrows .splide__arrow--next{
	grid-column : 3;
}
#dialog .splide__arrow{
	background-color : #c4c4c4;
}
#dialog .splide__arrow img{
	filter : var( --filterWhite );
}
@media screen and ( width <= 750px ){
	#dialog{
		padding-inline : calc( 14 var( --viewportBase ) );
	}
	#dialog .dialogContent{
		padding-block : calc( 16 var( --remBase ) );
		padding-inline : calc( 16 * 100% / 372 );
	}
	#dialog .splide__arrows{
		grid-template-columns : calc( 40 * 100% / 340 ) calc( 120 * 100% / 340 ) calc( 40 * 100% / 340 );
		column-gap : calc( 16 * 100% / 340 );
		margin-top : calc( 37 var( --remBase ) );
	}
	#dialog header picture img{
		width : 100%;
		height : auto;
	}
	#dialog header .area{
		width : fit-content;
		height : calc( 44 var( --remBase ) );
		padding-inline : calc( 8 var( --remBase ) );
		margin-top : calc( 16 var( --remBase ) );
	}
	#dialog header h2{
		margin-top : calc( 16 var( --remBase ) );
		font-size : 2.8rem;
		font-weight : 700;
	}
	#dialog #contentVoice{
		margin-top : calc( 18 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#dialog .dialogContent{
		padding-block : calc( 40 var( --remBase ) );
	}
	#dialog .splide__arrows{
		grid-template-columns : calc( 40 * 100% / 920 ) calc( 120 * 100% / 920 ) calc( 40 * 100% / 920 );
		column-gap : calc( 16 * 100% / 920 );
		margin-top : calc( 18 var( --remBase ) );
	}
	#dialog header{
		display : grid;
		grid-template-rows : 1fr calc( 44 var( --remBase ) ) calc( 16 var( --remBase ) ) auto 1fr;
		grid-template-columns : calc( 440 * 100% / 920 ) 1fr;
		column-gap : calc( 40 * 100% / 920 );
		align-items : center;
	}
	#dialog header picture{
		grid-row : 1/-1;
		grid-column : 1;
		width : 100%;
		height : calc( 352 var( --remBase ) );
	}
	#dialog header picture img{
		width : 100%;
		height : 100%;
		object-fit : cover;
		object-position : center;
	}
	#dialog header .area{
		grid-row : 2;
		grid-column : 2;
		justify-self : start;
		padding-inline : calc( 16 var( --remBase ) );
	}
	#dialog header h2{
		grid-row : 4;
		grid-column : 2;
		font-size : 3.2rem;
		font-weight : 400;
	}
}
@media screen and ( 750px < width < 1440px ){
	#dialog{
		padding-inline : calc( 200 var( --viewportBase ) );
	}
}
@media screen and ( width >= 1440px ) , print{
	#dialog{
		padding-inline : calc( ( 100% - 1000px ) / 2 );
	}
}
#contentVoice p{
	font-size : 1.6rem;
	line-height : 2;
}
@keyframes fadeIn{
	from{
		opacity : 0;
	}
	to{
		opacity : 1;
	}
}
@keyframes fadeOut{
	from{
		opacity : 1;
	}
	to{
		opacity : 0;
	}
}
#voice #dialog .dialogContent{
	overflow-y : scroll;
}
#voice #dialog .hero{
	margin-inline : auto;
	text-align : center;
}
#voice #dialog .hero img{
	object-fit : contain;
	width : 100%;
	height : 100%;
}
#voice #dialog .title p{
	width : fit-content;
	padding-block : calc( 2 var( --remBase ) );
	padding-inline : calc( 16 var( --remBase ) );
	font-size : 2rem;
	line-height : 2;
}
#voice #dialog .title h2{
	font-weight : 400;
	line-height : 1.3;
}
@media screen and ( width <= 750px ){
	#voice #dialog{
		padding-block : var( --headerHeight );
	}
	#voice #dialog .hero{
		max-width : 100%;
		max-height : calc( 510 var( --remBase ) );
	}
	#voice #dialog .title{
		margin-top : calc( 16 var( --remBase ) );
	}
	#voice #dialog .title h2{
		margin-top : calc( 16 var( --remBase ) );
		font-size : 2.8rem;
	}
}
@media screen and ( width > 750px ) , print{
	#voice #dialog{
		grid-template-rows : 1fr;
		padding-block : calc( 114 var( --remBase ) );
	}
	#voice #dialog .dialogContent{
		padding-left : calc( 40 * 100% / 1000 );
		padding-right : calc( 40 * 100% / 1000 - var( --scrollbarWidth ) );
	}
	#voice #dialog .hero{
		max-width : calc( 600 * 100% / 920 );
		max-height : calc( 900 var( --remBase ) );
	}
	#voice #dialog .title{
		display : flex;
		flex-wrap : wrap;
		row-gap : calc( 16 var( --remBase ) );
		column-gap : calc( 16 * 100% / 920 );
		align-items : start;
		justify-content : start;
		margin-top : calc( 24 var( --remBase ) );
	}
	#voice #dialog .title h2{
		margin-top : calc( .2 var( --remBase ) );
		font-size : 3.2rem;
	}
}

/* --------------------------------------------
NEW
--------------------------------------------- */
.sectionNew{
	display : grid;
	overflow-x : clip;
}
.sectionNew .title{
	font-weight : 700;
}
.sectionNew .title::first-letter{
	color : var( --wp--custom--primary );
}
.sectionNew .title::after{
	display : block;
	width : 100%;
	height : calc( 4 var( --remBase ) );
	font-size : 0;
	content : "";
}
@media screen and ( width <= 750px ){
	.sectionNew{
		grid-template-rows : auto calc( 24 var( --remBase ) ) auto calc( 4 var( --remBase ) ) auto;
		grid-template-columns : calc( 16 var( --viewportBase ) ) 1fr calc( 16 var( --viewportBase ) );
		padding-block : calc( 36 var( --remBase ) );
	}
	.sectionNew .title , .sectionNew .columnsNew{
		grid-column : 2;
	}
	.sectionNew .title{
		grid-row : 1;
		font-size : 2.8em;
		line-height : 1.3;
	}
	.sectionNew .title::after{
		margin-top : calc( 24 var( --remBase ) );
		background-image : linear-gradient( to right , var( --wp--custom--primary ) calc( 100 * 100% / 368 ) , #f2f2f2 calc( 100 * 100% / 368 ) , #f2f2f2 calc( 368 * 100% / 368 ) );
	}
	.sectionNew .slidersNew{
		grid-row : 3;
		grid-column : 1/-1;
	}
	.sectionNew .columnsNew{
		grid-row : 5;
	}
}
@media screen and ( width > 750px ) , print{
	.sectionNew{
		grid-template-columns : 1fr min( 1400px , calc( 1400 var( --viewportBase ) ) ) 1fr;
		row-gap : calc( 36 var( --remBase ) );
		padding-top : calc( 48 var( --remBase ) );
		padding-bottom : calc( 52 var( --remBase ) );
	}
	.sectionNew .title , .sectionNew .columnsNew{
		grid-column : 2;
	}
	.sectionNew .slidersNew{
		grid-column : 1/-1;
	}
	.sectionNew .title{
		font-size : 3.2em;
		line-height : 1.5;
	}
	.sectionNew .title::after{
		height : calc( 4 var( --remBase ) );
		margin-top : calc( 8 var( --remBase ) );
		background-image : linear-gradient( to right , var( --wp--custom--primary ) calc( 48 * 100% / 1400 ) , #f2f2f2 calc( 48 * 100% / 1400 ) , #f2f2f2 calc( 1352 * 100% / 1400 ) );
	}
}
.slidersNew{
	font-size : 0;
}
.sliderNew{
	position : relative;
}
.sliderNew .splide__slide picture{
	display : block;
	height : 100%;
}
@media screen and ( width <= 750px ){
	.sliderNew{
		width : 100%;
		height : calc( 100vw * var( --min-ratio ) );
		overflow : visible;
	}
	.sliderNew .splide__track{
		height : 100% ! important;
	}
	.sliderNew .splide__list{
		display : flex;
		align-items : center;
		height : 100%;
	}
	.sliderNew .splide__slide{
		display : flex;
		align-items : center;
		justify-content : center;
		width : auto ! important;
		height : 100% ! important;
	}
	.sliderNew .splide__slide img{
		width : auto;
		height : 100%;
	}
}
@media screen and ( width > 750px ) , print{
	.sliderNew .splide__slide img{
		width : auto;
		height : 100%;
	}
	.sliderNew .splide__arrow{
		position : absolute;
		top : 50%;
		display : grid;
		place-items : center;
		width : auto;
		height : calc( 48 var( --remBase ) );
		aspect-ratio : 1;
		background-color : color-mix( in sRGB , black 20% , transparent );
		translate : 0 -50%;
	}
	.sliderNew .splide__arrow img{
		height : calc( 40 var( --remBase ) );
		filter : var( --filterWhite );
	}
	.sliderNew .splide__arrow--prev{
		left : max( 0px , calc( 50% - 700px ) );
	}
	.sliderNew .splide__arrow--next{
		right : max( 0px , calc( 50% - 700px ) );
	}
}
.thumbnailNew{
	display : flex;
	flex-wrap : nowrap;
	justify-content : center;
	overflow-x : scroll;
}
.thumbnailNew img{
	width : auto;
	height : 100%;
}
@media screen and ( width <= 750px ){
	.thumbnailNew{
		column-gap : calc( 8 var( --viewportBase ) );
		margin-top : calc( 5 var( --remBase ) );
	}
	.thumbnailNew img{
		height : calc( 60 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	.thumbnailNew{
		column-gap : min( 8px , calc( 8 var( --viewportBase ) ) );
		margin-top : calc( 16 var( --remBase ) );
	}
	.thumbnailNew img{
		height : calc( 120 var( --remBase ) );
	}
}
:is( .dialogNew[open] , .dialogLayoutsNew[open] ){
	position : fixed;
	display : grid;
	background-color : color-mix( in sRGB , black 40% , transparent );
	animation : fadeIn .3s ease-out 0s forwards;
}
:is( .dialogNew , .dialogLayoutsNew ).is-closing{
	animation : fadeOut .3s ease-out 0s forwards;
}
:is( .dialogNew , .dialogLayoutsNew ){
	align-content : center;
	width : 100%;
	height : 100dvh;
}
:is( .dialogNew , .dialogLayoutsNew )::backdrop{
	background-color : color-mix( in sRGB , white 80% , transparent );
}
:is( .dialogNew , .dialogLayoutsNew ) .dialogContent{
	width : 100%;
	overflow-y : scroll;
	background-color : white;
}
:is( .dialogNew , .dialogLayoutsNew ) .splide__list{
	align-items : flex-start ! important;
}
:is( .dialogNew , .dialogLayoutsNew ) .splide__slide:not( .is-active ){
	height : 0 ! important;
}
:is( .dialogNew , .dialogLayoutsNew ) .splide__slide picture{
	text-align : center;
}
:is( .dialogNew , .dialogLayoutsNew ) .splide__slide picture img{
	width : 100%;
	max-width : 100%;
	height : auto;
}
:is( .dialogNew , .dialogLayoutsNew ) .splide__arrows{
	position : relative;
	display : grid;
	grid-template-rows : calc( 40 var( --remBase ) );
	align-items : center;
	justify-content : center;
	margin-top : calc( 18 var( --remBase ) );
}
:is( .dialogNew , .dialogLayoutsNew ) .splide__arrows button{
	display : grid;
	grid-row : 1;
	place-items : center;
	width : 100%;
	height : 100%;
}
:is( .dialogNew , .dialogLayoutsNew ) .splide__arrows button img{
	height : calc( 14 var( --remBase ) );
}
:is( .dialogNew , .dialogLayoutsNew ) .splide__arrows button[disabled]{
	display : none;
}
:is( .dialogNew , .dialogLayoutsNew ) .splide__arrows .splide__arrow--prev{
	grid-column : 1;
}
:is( .dialogNew , .dialogLayoutsNew ) .splide__arrows .close{
	grid-column : 2;
	font-size : 1.8rem;
	font-weight : 500;
	line-height : 1.3;
	background-color : white;
	border : solid 1px #c4c4c4;
}
:is( .dialogNew , .dialogLayoutsNew ) .splide__arrows .splide__arrow--next{
	grid-column : 3;
}
:is( .dialogNew , .dialogLayoutsNew ) .splide__arrow{
	background-color : #c4c4c4;
}
:is( .dialogNew , .dialogLayoutsNew ) .splide__arrow img{
	filter : var( --filterWhite );
}
@media screen and ( width <= 750px ){
	:is( .dialogNew , .dialogLayoutsNew ){
		padding-block : var( --headerHeight );
		padding-inline : calc( 14 var( --viewportBase ) );
	}
	:is( .dialogNew , .dialogLayoutsNew ) .dialogContent{
		padding-block : calc( 16 var( --remBase ) );
		padding-inline : calc( 16 * 100% / 372 );
	}
	:is( .dialogNew , .dialogLayoutsNew ) .splide__arrows{
		grid-template-columns : calc( 40 * 100% / 340 ) calc( 120 * 100% / 340 ) calc( 40 * 100% / 340 );
		column-gap : calc( 16 * 100% / 340 );
		margin-top : calc( 37 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	:is( .dialogNew , .dialogLayoutsNew ){
		grid-template-rows : 1fr;
		padding-block : calc( 114 var( --remBase ) );
	}
	:is( .dialogNew , .dialogLayoutsNew ) .dialogContent{
		padding-block : calc( 40 var( --remBase ) );
		padding-left : calc( 40 * 100% / 1000 );
		padding-right : calc( 40 * 100% / 1000 - var( --scrollbarWidth ) );
	}
	:is( .dialogNew , .dialogLayoutsNew ) .splide__arrows{
		grid-template-columns : calc( 40 * 100% / 920 ) calc( 120 * 100% / 920 ) calc( 40 * 100% / 920 );
		column-gap : calc( 16 * 100% / 920 );
		margin-top : calc( 18 var( --remBase ) );
	}
}
@media screen and ( 750px < width < 1440px ){
	:is( .dialogNew , .dialogLayoutsNew ){
		padding-inline : calc( 200 var( --viewportBase ) );
	}
}
@media screen and ( width >= 1440px ) , print{
	:is( .dialogNew , .dialogLayoutsNew ){
		padding-inline : calc( ( 100% - 1000px ) / 2 );
	}
}
.columnsNew .content .datom{
	display : grid;
}
.columnsNew .content .datom dt , .columnsNew .content .datom dd{
	padding-block : calc( 8 var( --remBase ) );
	font-size : 1.6rem;
	line-height : 2;
	border-bottom : solid 1px #d9d9d9;
}
.columnsNew .content .datom dt{
	padding-right : 1em;
}
.columnsNew .layouts{
	font-size : 0;
}
.columnsNew .layouts > li + li{
	margin-top : calc( 8 var( --remBase ) );
}
@media screen and ( width <= 750px ){
	.columnsNew .content{
		margin-top : calc( 36 var( --remBase ) );
	}
	.columnsNew .content .datom{
		grid-template-columns : calc( 100 var( --percentBase ) ) 1fr;
		margin-bottom : calc( 8 var( --remBase ) );
	}
	.columnsNew .layouts > li > button{
		display : block;
		width : calc( 300 var( --percentBase ) );
		margin-inline : auto;
	}
}
@media screen and ( width > 750px ) , print{
	.columnsNew{
		display : grid;
		grid-template-columns : calc( 680 var( --percentBase ) ) calc( 676 var( --percentBase ) );
		align-items : start;
		justify-content : space-between;
	}
	.columnsNew .content{
		grid-row : 1;
		grid-column : 1;
	}
	.columnsNew .content .datom{
		grid-template-columns : calc( 160 * 100% / 680 ) 1fr;
		padding-top : calc( 2 var( --remBase ) );
		margin-bottom : calc( 96 var( --remBase ) );
	}
	.columnsNew .layouts{
		grid-row : 1;
		grid-column : 2;
	}
	.columnsNew .layouts li + li{
		margin-top : calc( 8 var( --remBase ) );
	}
}
.columnsNew .content h2.wp-block-heading{
	margin-top : calc( 40 var( --remBase ) );
	margin-bottom : calc( 16 var( --remBase ) );
	font-weight : 700;
}
.columnsNew .content h2.wp-block-heading::first-letter{
	color : var( --wp--custom--primary );
}
.columnsNew .content h2.wp-block-heading::after{
	display : block;
	width : 100%;
	height : calc( 4 var( --remBase ) );
	font-size : 0;
	content : "";
}
.columnsNew .content .wp-block-gallery{
	display : flex;
	flex-wrap : wrap;
	row-gap : calc( 16 var( --remBase ) );
	column-gap : calc( 16 var( --remBase ) );
}
.columnsNew .content ul.wp-block-list{
	padding-left : 1.5em;
}
.columnsNew .content ul.wp-block-list li{
	list-style : disc;
}
.columnsNew .content ol.wp-block-list{
	padding-left : 1.5em;
}
.columnsNew .content ol.wp-block-list li{
	list-style : decimal;
}
@media screen and ( width <= 750px ){
	.columnsNew .content{
		font-size : 1.6rem;
		line-height : 1.7;
	}
	.columnsNew .content h2.wp-block-heading{
		font-size : 2.4rem;
		line-height : 1.3;
	}
	.columnsNew .content 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 ) ) );
	}
}
@media screen and ( width > 750px ) , print{
	.columnsNew .content{
		font-size : 1.6rem;
		line-height : 1.7;
	}
	.columnsNew .content h2.wp-block-heading{
		font-size : 3.2rem;
		line-height : 1.5;
	}
	.columnsNew .content 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 ) ) );
	}
	.columnsNew .content h3.wp-block-heading{
		font-size : 2.8rem;
	}
}