@charset "UTF-8";

/* --------------------------------------------
SERVICE
--------------------------------------------- */
:is( #service0101 , #service0201 ){
	position : relative;
	overflow-x : clip;
}
:is( #service0101 , #service0201 )::before{
	position : absolute;
	top : 0;
	z-index : -1;
	display : block;
	font-size : 0;
	content : "";
	background-color : var( --green03 );
}
:is( #service0101 , #service0201 ) h2 span{
	font-weight : 500;
	line-height : 1.3;
}
@media screen and ( width <= 750px ){
	:is( #service0101 , #service0201 ){
		padding-top : calc( 40 var( --remBase ) );
		padding-bottom : calc( 80 var( --remBase ) );
		margin-top : calc( 24 var( --remBase ) );
	}
	:is( #service0101 , #service0201 )::before{
		left : 0;
		width : calc( 272 var( --viewportBase ) );
		height : calc( 272 var( --remBase ) );
	}
	:is( #service0101 , #service0201 ) h2 span{
		font-size : 3.2rem;
	}
	:is( #service0101 , #service0201 ) p{
		margin-top : calc( 16 var( --remBase ) );
	}
	:is( #service0101 , #service0201 ) picture{
		margin-top : calc( 16 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	:is( #service0101 , #service0201 ){
		display : grid;
		grid-template-rows : auto 1fr;
		grid-template-columns : calc( 760 var( --percentBase ) ) calc( 772 var( --percentBase ) );
		row-gap : calc( 24 var( --remBase ) );
		column-gap : calc( 57 var( --percentBase ) );
		align-items : start;
		justify-content : end;
		padding-top : calc( 85 var( --remBase ) );
		margin-top : calc( 80 var( --remBase ) );
	}
	:is( #service0101 , #service0201 )::before{
		left : calc( -36 var( --viewportBase ) );
		width : calc( 490 var( --viewportBase ) );
		height : calc( 362 var( --remBase ) );
	}
	:is( #service0101 , #service0201 ) h2{
		grid-row : 1;
		grid-column : 1;
	}
	:is( #service0101 , #service0201 ) h2 span{
		display : block;
		font-size : 4rem;
	}
	:is( #service0101 , #service0201 ) h2 span:nth-of-type( 2 ){
		padding-right : 1em;
		text-align : right;
	}
	:is( #service0101 , #service0201 ) p{
		grid-row : 2;
		grid-column : 1;
	}
	:is( #service0101 , #service0201 ) picture{
		grid-row : 1/-1;
		grid-column : 2;
		align-self : end;
	}
}
:where( #service0102 , #service0202 ){
	background-color : var( --green03 );
}
:where( #service0102 , #service0202 ) .body > section{
	background-color : white;
}
@media screen and ( width <= 750px ){
	:where( #service0102 , #service0202 ){
		padding-block : calc( 64 var( --remBase ) );
	}
	:where( #service0102 , #service0202 ) .body{
		margin-top : calc( 16 var( --remBase ) );
	}
	:where( #service0102 , #service0202 ) .body > section{
		padding-block : calc( 24 var( --remBase ) );
		padding-inline : calc( 16 var( --percentBase ) );
	}
	:where( #service0102 , #service0202 ) .body > section + section{
		margin-top : calc( 16 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	:where( #service0102 , #service0202 ){
		display : grid;
		grid-template-columns : calc( 160 var( --percentBase ) ) calc( 440 var( --percentBase ) ) calc( 160 var( --percentBase ) ) calc( 1000 var( --percentBase ) );
		align-items : start;
		justify-content : space-between;
		justify-content : start;
		padding-top : calc( 128 var( --remBase ) );
		padding-bottom : calc( 168 var( --remBase ) );
		margin-top : calc( -32 var( --remBase ) );
	}
	:where( #service0102 , #service0202 ) header{
		position : sticky;
		top : calc( var( --headerHeight ) + 32 var( --remBase ) );
		grid-row : 1;
		grid-column : 2;
	}
	:where( #service0102 , #service0202 ) .body{
		grid-row : 1;
		grid-column : 4;
	}
	:where( #service0102 , #service0202 ) .body > section{
		padding-block : calc( 40 var( --remBase ) );
		padding-inline : calc( 40 * 100% / 1000 );
	}
	:where( #service0102 , #service0202 ) .body > section + section{
		margin-top : calc( 40 var( --remBase ) );
	}
}
#service010201 dt{
	font-size : 2.8rem;
	font-weight : 500;
	line-height : 1.5;
}
#service010201 dd{
	font-size : 2rem;
	line-height : 1.7;
}
@media screen and ( width <= 750px ){
	#service010201 dl{
		margin-top : calc( 16 var( --remBase ) );
	}
	#service010201 dl > div + div{
		padding-top : calc( 16 var( --remBase ) );
		margin-top : calc( 16 var( --remBase ) );
		border-top : solid 1px #d9d9d9;
	}
	#service010201 dd:nth-of-type( 1 ){
		margin-top : calc( 8 var( --remBase ) );
		text-align : right;
	}
	#service010201 dd:nth-of-type( 2 ){
		margin-top : calc( 12 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#service010201 dl{
		margin-top : calc( 20 var( --remBase ) );
	}
	#service010201 dl > div{
		display : grid;
		grid-template-columns : 1fr auto;
		row-gap : calc( 8 var( --remBase ) );
		align-items : start;
		justify-content : space-between;
	}
	#service010201 dl > div + div{
		margin-top : calc( 32 var( --remBase ) );
	}
	#service010201 dt{
		grid-row : 1;
		grid-column : 1;
	}
	#service010201 dd:nth-of-type( 1 ){
		grid-row : 1;
		grid-column : 2;
		align-self : center;
	}
	#service010201 dd:nth-of-type( 2 ){
		grid-row : 2;
		grid-column : 1/-1;
	}
}
#service010202 h4{
	position : relative;
	width : fit-content;
	padding-inline : calc( 16 var( --remBase ) );
	font-weight : 400;
	background-color : white;
}
#service010202 > ul{
	border : solid 1px #c4c4c4;
}
#service010202 > ul li{
	display : grid;
	grid-template-columns : auto auto auto;
	align-items : start;
	justify-content : start;
}
#service010202 > ul li::before{
	content : "・";
}
#service010202 dt{
	font-size : 2.8rem;
	font-weight : 500;
	line-height : 1.5;
}
#service010202 dd li{
	display : grid;
	grid-auto-flow : column;
	align-items : center;
	justify-content : start;
}
@media screen and ( width <= 750px ){
	#service010202 h4{
		margin-top : calc( 24 var( --remBase ) );
		margin-left : calc( 8 var( --remBase ) );
		font-size : 1.4rem;
		line-height : 1.7;
	}
	#service010202 > ul{
		row-gap : calc( 8 var( --remBase ) );
		column-gap : calc( 22 * 100% / 872 );
		padding-inline : calc( 8 * 100% / 336 );
		padding-top : calc( 20 var( --remBase ) );
		padding-bottom : calc( 16 var( --remBase ) );
		margin-top : calc( -11.9 var( --remBase ) );
	}
	#service010202 > ul::after{
		font-size : 1.4rem;
		line-height : 1.7;
	}
	#service010202 > ul li{
		font-size : 1.4rem;
		line-height : 1.7;
	}
	#service010202 > ul li + li{
		margin-top : calc( 8 var( --remBase ) );
	}
	#service010202 dl{
		margin-top : calc( 24 var( --remBase ) );
	}
	#service010202 dd{
		margin-top : calc( 8 var( --remBase ) );
	}
	#service010202 dd li{
		grid-template-columns : auto calc( 40 * 100% / 336 ) 1fr;
		font-size : 1.4rem;
		line-height : 1.5;
	}
	#service010202 dd li + li{
		margin-top : calc( 8 var( --remBase ) );
	}
	#service010202 dd li span{
		text-align : center;
	}
}
@media screen and ( width > 750px ) , print{
	#service010202 h4{
		margin-top : calc( 24 var( --remBase ) );
		margin-left : calc( 22 var( --remBase ) );
		font-size : 2rem;
		line-height : 1.5;
	}
	#service010202 > ul{
		display : flex;
		flex-wrap : wrap;
		row-gap : calc( 8 var( --remBase ) );
		column-gap : calc( 22 * 100% / 872 );
		padding-inline : calc( 24 * 100% / 920 );
		padding-top : calc( 25 var( --remBase ) );
		padding-bottom : calc( 22 var( --remBase ) );
		margin-top : calc( -15 var( --remBase ) );
	}
	#service010202 > ul::after{
		font-size : 2rem;
		line-height : 1.5;
	}
	#service010202 > ul li{
		font-size : 2rem;
		line-height : 1.5;
	}
	#service010202 dl{
		display : grid;
		grid-template-columns : auto auto;
		align-items : start;
		justify-content : space-between;
		margin-top : calc( 24 var( --remBase ) );
	}
	#service010202 dd li{
		column-gap : calc( 8 var( --remBase ) );
		font-size : 2rem;
		line-height : 2;
	}
}
#sevice010203 dl > div + div{
	padding-top : calc( 16 var( --remBase ) );
	margin-top : calc( 16 var( --remBase ) );
	border-top : solid 1px #cfd2d9;
}
#sevice010203 dt{
	font-weight : 500;
}
#sevice010203 dd:nth-of-type( 2 ){
	text-align : right;
}
@media screen and ( width <= 750px ){
	#sevice010203 dl{
		margin-top : calc( 24 var( --remBase ) );
	}
	#sevice010203 dt{
		font-size : 2.6rem;
		line-height : 1.3;
	}
	#sevice010203 dd{
		font-size : 1.4rem;
		line-height : 1.7;
		text-align : right;
	}
	#sevice010203 dd:first-of-type{
		margin-top : calc( 8 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#sevice010203 dl{
		margin-top : calc( 24 var( --remBase ) );
	}
	#sevice010203 dl > div{
		display : grid;
		grid-template-columns : calc( 480 * 100% / 920 ) auto;
		align-items : start;
		justify-content : space-between;
	}
	#sevice010203 dt{
		grid-row : 1;
		grid-column : 1;
		font-size : 2.8rem;
		line-height : 1.5;
	}
	#sevice010203 dd{
		font-size : 2rem;
		line-height : 2;
	}
	#sevice010203 dd:nth-of-type( 1 ){
		grid-row : 1;
		grid-column : 2;
		margin-top : calc( 1 var( --remBase ) );
	}
	#sevice010203 dd:nth-of-type( 2 ){
		grid-row : 2;
		grid-column : 1/-1;
	}
}
#service020201 > ul:nth-of-type( 1 ) li{
	line-height : 1.7;
}
#service020201 > ul:nth-of-type( 1 ) li::before{
	color : var( --orange02 );
	content : "◆";
}
#service020201 h4{
	display : grid;
	align-items : center;
	justify-content : start;
	font-weight : 500;
	line-height : 1.7;
}
#service020201 h4 span{
	display : grid;
	place-items : center;
	color : white;
	background-color : var( --green );
}
#service020201 h4 + p{
	line-height : 1.7;
}
#service020201 h5{
	font-weight : 500;
}
#service020201 dl{
	display : grid;
}
#service020201 dt , #service020201 dd{
	line-height : 1.5;
}
#service020201 dt{
	background-color : var( --green02 );
}
#service020201 li:nth-child( 1 ) dt{
	display : grid;
	place-items : center;
}
#service020201 li:nth-child( 2 ) dt{
	display : grid;
	place-items : center;
}
#service020201 li:nth-child( 2 ) dt span{
	line-height : 1.5;
}
#service020201 li:nth-child( 3 ) dl{
	align-items : center;
	justify-content : start;
}
#service020201 li:nth-child( 3 ) dd{
	display : grid;
	grid-template-columns : auto 1fr;
	align-items : center;
	justify-content : start;
}
#service020201 li:nth-child( 3 ) dd::before{
	display : block;
	clip-path : polygon( 0 0 , 100% 50% , 0 100% );
	font-size : 0;
	content : "";
	background-color : var( --orange02 );
}
@media screen and ( width <= 750px ){
	#service020201 > ul:nth-of-type( 1 ){
		margin-top : calc( 8 var( --remBase ) );
	}
	#service020201 > ul:nth-of-type( 1 ) li{
		font-size : 1.4rem;
	}
	#service020201 h4{
		grid-template-columns : calc( 80 * 100% / 336 ) auto calc( 80 * 100% / 336 ) auto calc( 128 * 100% / 336 );
		column-gap : calc( 4 * 100% / 336 );
		margin-top : calc( 8 var( --remBase ) );
		font-size : 1.4rem;
	}
	#service020201 h4 span{
		height : calc( 35 var( --remBase ) );
		font-size : 1.6rem;
	}
	#service020201 h4 + p{
		margin-top : calc( 12 var( --remBase ) );
		font-size : 1.4rem;
	}
	#service020201 > ul:nth-of-type( 2 ){
		margin-top : calc( 40 var( --remBase ) );
	}
	#service020201 > ul:nth-of-type( 2 ) > li + li{
		padding-top : calc( 16 var( --remBase ) );
		margin-top : calc( 20 var( --remBase ) );
		border-top : solid 1px #d9d9d9;
	}
	#service020201 h5{
		font-size : 2.6rem;
		line-height : 1.3;
	}
	#service020201 dl{
		grid-template-columns : calc( 160 * 100% / 336 ) 1fr;
		row-gap : calc( 8 var( --remBase ) );
		column-gap : calc( 8 * 100% / 336 );
		margin-top : calc( 8 var( --remBase ) );
	}
	#service020201 dt{
		padding-block : calc( 4 var( --remBase ) );
		padding-inline : calc( 8 * 100% / 160 );
		font-size : 1.4rem;
	}
	#service020201 dd{
		align-self : center;
		font-size : 1.4rem;
	}
	#service020201 li:nth-child( 2 ) dt{
		display : block;
	}
	#service020201 li:nth-child( 3 ) dd{
		column-gap : calc( 4 * 100% / 168 );
	}
	#service020201 li:nth-child( 3 ) dd::before{
		height : calc( 13 var( --remBase ) );
		aspect-ratio : 15/13;
	}
	#service020201 dl + p{
		margin-top : calc( 12 var( --remBase ) );
		font-size : 1.4rem;
		line-height : 1.7;
	}
}
@media screen and ( width > 750px ) , print{
	#service020201 > ul:nth-of-type( 1 ){
		display : flex;
		flex-wrap : wrap;
		column-gap : calc( 16 * 100% / 920 );
		margin-top : calc( 24 var( --remBase ) );
	}
	#service020201 > ul:nth-of-type( 1 ) li{
		font-size : 2rem;
	}
	#service020201 h4{
		grid-template-columns : calc( 176 * 100% / 920 ) auto calc( 176 * 100% / 920 ) auto calc( 208 * 100% / 920 );
		column-gap : calc( 8 * 100% / 920 );
		margin-top : calc( 24 var( --remBase ) );
		font-size : 2.8rem;
	}
	#service020201 h4 span{
		height : calc( 62 var( --remBase ) );
		font-size : 3.2rem;
	}
	#service020201 h4 + p{
		display : grid;
		grid-template-columns : auto auto;
		align-items : start;
		justify-content : start;
		margin-top : calc( 16 var( --remBase ) );
		font-size : 2rem;
	}
	#service020201 > ul:nth-of-type( 2 ){
		padding-top : calc( 24 var( --remBase ) );
		margin-top : calc( 24 var( --remBase ) );
		border-top : solid 1px #cfd2d9;
	}
	#service020201 > ul:nth-of-type( 2 ) li{
		display : grid;
		grid-template-columns : calc( 160 * 100% / 920 ) 1fr;
		row-gap : calc( 8 var( --remBase ) );
		column-gap : calc( 40 * 100% / 920 );
		justify-content : start;
	}
	#service020201 > ul:nth-of-type( 2 ) li + li{
		padding-top : calc( 24 var( --remBase ) );
		margin-top : calc( 24 var( --remBase ) );
		border-top : solid 1px #cfd2d9;
	}
	#service020201 h5{
		grid-column : 1;
		font-size : 2.4rem;
		line-height : 1.7;
	}
	#service020201 dl{
		grid-row : 1;
		grid-column : 2;
	}
	#service020201 dt , #service020201 dd{
		font-size : 2rem;
	}
	#service020201 dt{
		padding-block : calc( 8 var( --remBase ) );
	}
	#service020201 dl + p{
		grid-row : 2;
		grid-column : 2;
		font-size : 2rem;
		line-height : 1.5;
	}
	#service020201 li:nth-child( 1 ) dl{
		grid-template-columns : repeat( 2 , calc( 200 * 100% / 720 ) 1fr );
		row-gap : calc( 12 var( --remBase ) );
		column-gap : calc( 8 * 100% / 720 );
	}
	#service020201 li:nth-child( 1 ) dd{
		margin-top : calc( 4 var( --remBase ) );
	}
	#service020201 li:nth-child( 2 ) dl{
		grid-template-columns : calc( 300 * 100% / 720 ) 1fr;
		row-gap : calc( 8 var( --remBase ) );
		column-gap : calc( 8 * 100% / 720 );
	}
	#service020201 li:nth-child( 2 ) dt span{
		font-size : 1.6rem;
	}
	#service020201 li:nth-child( 2 ) dt:not( :last-of-type ){
		grid-auto-flow : column;
		align-content : center;
		align-items : baseline;
		justify-content : center;
	}
	#service020201 li:nth-child( 2 ) dt:last-of-type{
		grid-auto-flow : row;
		justify-content : center;
		justify-items : start;
	}
	#service020201 li:nth-child( 2 ) dd{
		align-self : center;
	}
	#service020201 li:nth-child( 3 ) dl{
		grid-template-columns : calc( 360 * 100% / 720 ) 1fr;
		row-gap : calc( 4 var( --remBase ) );
		column-gap : calc( 4 * 100% / 720 );
		justify-content : start;
	}
	#service020201 li:nth-child( 3 ) dt{
		padding-inline : calc( 8 * 100% / 360 );
	}
	#service020201 li:nth-child( 3 ) dd{
		column-gap : calc( 4 * 100% / 356 );
	}
	#service020201 li:nth-child( 3 ) dd::before{
		height : calc( 26.25 var( --remBase ) );
		aspect-ratio : 30.31/26.25;
	}
}
#service020202 p{
	margin-top : calc( 24 var( --remBase ) );
	line-height : 1.7;
}
@media screen and ( width <= 750px ){
	#service020202 p{
		font-size : 1.4rem;
	}
}
@media screen and ( width > 750px ) , print{
	#service020202 p{
		font-size : 2rem;
	}
}
:where( #service020202 , #service020203 , #service020204 ) dl > div + div{
	border-top : solid 1px #cfd2d9;
}
:where( #service020202 , #service020203 , #service020204 ) dt{
	font-weight : 500;
}
:where( #service020202 , #service020203 , #service020204 ) dd{
	line-height : 1.7;
}
@media screen and ( width <= 750px ){
	:where( #service020202 , #service020203 , #service020204 ) dl{
		margin-top : calc( 24 var( --remBase ) );
	}
	:where( #service020202 , #service020203 , #service020204 ) dl > div + div{
		padding-top : calc( 16 var( --remBase ) );
		margin-top : calc( 16 var( --remBase ) );
	}
	:where( #service020202 , #service020203 , #service020204 ) dt{
		font-size : 2.6rem;
		line-height : 1.3;
	}
	:where( #service020202 , #service020203 , #service020204 ) dd{
		margin-top : calc( 8 var( --remBase ) );
		font-size : 1.4rem;
	}
}
@media screen and ( width > 750px ) , print{
	:where( #service020202 , #service020203 , #service020204 ) dl{
		margin-top : calc( 24 var( --remBase ) );
	}
	:where( #service020202 , #service020203 , #service020204 ) dl > div{
		display : grid;
		grid-template-columns : auto auto;
		align-items : start;
		justify-content : space-between;
	}
	:where( #service020202 , #service020203 , #service020204 ) dl > div + div{
		padding-top : calc( 8 var( --remBase ) );
		margin-top : calc( 8 var( --remBase ) );
	}
	:where( #service020202 , #service020203 , #service020204 ) dt{
		font-size : 2.4rem;
		line-height : 1.7;
	}
	:where( #service020202 , #service020203 , #service020204 ) dd{
		margin-top : calc( 3.4 var( --remBase ) );
		font-size : 2rem;
		text-align : right;
	}
}
@media screen and ( width > 750px ) , print{
	#service020203 dl{
		padding-bottom : calc( 8 var( --remBase ) );
		border-bottom : solid 1px #cfd2d9;
	}
}
@media screen and ( width > 750px ) , print{
	#service020204 dl > div{
		grid-template-columns : calc( 480 * 100% / 920 ) 1fr;
	}
}
#serviceFlow li{
	counter-increment : no;
}
#serviceFlow h3{
	position : relative;
	align-content : center;
	font-weight : 500;
	line-height : 1.3;
}
#serviceFlow h3::before , #serviceFlow h3::after{
	position : absolute;
	left : 0;
	height : 100%;
	line-height : 1;
	color : white;
	text-align : center;
}
#serviceFlow h3::before{
	font-weight : 700;
	content : "STEP";
}
#serviceFlow h3::after{
	font-weight : 900;
	text-align : center;
	text-indent : .05em;
	letter-spacing : .05em;
	content : counter( no , decimal-leading-zero );
}
#serviceFlow p{
	margin-top : calc( 8 var( --remBase ) );
	line-height : 1.7;
}
@media screen and ( width <= 750px ){
	#serviceFlow{
		padding-block : calc( 80 var( --remBase ) );
	}
	#serviceFlow ol{
		margin-top : calc( 24 var( --remBase ) );
	}
	#serviceFlow li + li{
		margin-top : calc( 24 var( --remBase ) );
	}
	#serviceFlow h3{
		height : calc( 60 var( --remBase ) );
		padding-left : calc( 76 var( --percentBase ) );
		font-size : 2rem;
		background-image : linear-gradient( 90deg , var( --green ) 0% , var( --green ) calc( 60 var( --percentBase ) ) , #f1f2ed calc( 60 var( --percentBase ) ) , #f1f2ed 100% );
	}
	#serviceFlow h3::before , #serviceFlow h3::after{
		width : calc( 60 var( --percentBase ) );
	}
	#serviceFlow h3::before{
		top : calc( 7 var( --remBase ) );
		font-size : 1.2rem;
		line-height : calc( 14 / 12 );
	}
	#serviceFlow h3::after{
		top : calc( 21 var( --remBase ) );
		font-size : 3rem;
		line-height : calc( 32 / 30 );
	}
	#serviceFlow p{
		font-size : 1.4rem;
	}
}
@media screen and ( width > 750px ) , print{
	#serviceFlow{
		padding-block : calc( 120 var( --remBase ) );
	}
	#serviceFlow ol{
		display : flex;
		flex-wrap : wrap;
		row-gap : calc( 40 var( --remBase ) );
		column-gap : calc( 40 var( --percentBase ) );
		justify-content : center;
		margin-top : calc( 40 var( --remBase ) );
	}
	#serviceFlow ol:has( li:nth-child( 7 ):last-child )::before{
		display : block;
		order : 2;
		width : 100%;
		font-size : 0;
		content : "";
	}
	#serviceFlow ol:has( li:nth-child( 7 ):last-child ) li:nth-child( -n+4 ){
		order : 1;
	}
	#serviceFlow ol:has( li:nth-child( 7 ):last-child ) li:nth-child( n+5 ){
		order : 3;
	}
	#serviceFlow li{
		width : calc( 280 var( --percentBase ) );
	}
	#serviceFlow h3{
		height : calc( 80 var( --remBase ) );
		padding-left : calc( 96 * 100% / 280 );
		font-size : 2.4rem;
		background-image : linear-gradient( 90deg , var( --green ) 0% , var( --green ) calc( 80 * 100% / 280 ) , #f1f2ed calc( 80 * 100% / 280 ) , #f1f2ed 100% );
	}
	#serviceFlow h3::before , #serviceFlow h3::after{
		width : calc( 80 * 100% / 280 );
	}
	#serviceFlow h3::before{
		top : calc( 17 var( --remBase ) );
		font-size : 1.4rem;
	}
	#serviceFlow h3::after{
		top : calc( 31 var( --remBase ) );
		font-size : 3.6rem;
	}
	#serviceFlow p{
		font-size : 2rem;
	}
}
#serviceFaq details summary{
	position : relative;
	display : grid;
}
#serviceFaq 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 );
}
#serviceFaq details summary span{
	font-weight : 500;
	background-color : white;
}
#serviceFaq details summary span::after{
	display : block;
	width : 100%;
	font-size : 0;
	content : "";
	background-repeat : no-repeat;
	background-position : left center;
	background-size : contain;
}
#serviceFaq details.is-open summary::after{
	rotate : -180deg;
}
#serviceFaq details.is-open .detailsContent{
	grid-template-rows : 1fr;
}
#serviceFaq .detailsContent{
	display : grid;
	grid-template-rows : 0fr;
	grid-template-columns : 1fr;
	background-color : white;
}
#serviceFaq .detailsContent > div{
	overflow : hidden;
}
#serviceFaq .answer{
	position : relative;
	width : 100%;
}
#serviceFaq .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 ){
	#serviceFaq{
		padding-block : calc( 40 var( --remBase ) );
		background-color : var( --green03 );
	}
	#serviceFaq .detailsBox{
		margin-top : calc( 16 var( --remBase ) );
	}
	#serviceFaq details + details{
		margin-top : calc( 8 var( --remBase ) );
	}
	#serviceFaq summary{
		grid-template-columns : calc( 48 var( --percentBase ) ) 1fr ;
		min-height : calc( 48 var( --remBase ) );
	}
	#serviceFaq summary::before{
		height : calc( 48 var( --remBase ) );
		font-size : 2.6rem;
	}
	#serviceFaq summary span{
		padding-block : calc( 10 var( --remBase ) );
		padding-inline : calc( 8 * 100% / 312 );
		font-size : 1.4rem;
		line-height : 2;
	}
	#serviceFaq .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 );
	}
	#serviceFaq .answer::before{
		width : calc( 48 var( --percentBase ) );
		height : calc( 48 var( --remBase ) );
		font-size : 2.6rem;
	}
	#serviceFaq .link01{
		margin-top : calc( 16 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#serviceFaq{
		display : grid;
		grid-template-rows : auto auto;
		grid-template-columns : calc( 160 var( --percentBase ) ) calc( 280 var( --percentBase ) ) calc( 40 var( --percentBase ) ) calc( 1240 var( --percentBase ) );
		row-gap : calc( 32 var( --remBase ) );
		align-items : start;
		justify-content : start;
		padding-block : calc( 120 var( --remBase ) );
		background-color : #f1f2ed;
	}
	#serviceFaq .title05{
		grid-row : 1;
		grid-column : 2;
	}
	#serviceFaq .detailsBox{
		grid-row : 1;
		grid-column : 4;
	}
	#serviceFaq details + details{
		margin-top : calc( 16 var( --remBase ) );
	}
	#serviceFaq summary{
		grid-template-columns : calc( 80 * 100% / 1240 ) 1fr;
		min-height : calc( 80 var( --remBase ) );
	}
	#serviceFaq summary::before{
		font-size : 3.6rem;
	}
	#serviceFaq summary span{
		padding-block : calc( 24 var( --remBase ) );
		padding-inline : calc( 16 * 100% / 1160 );
		padding-right : calc( 80 * 100% / 1160 );
		font-size : 2.4rem;
		line-height : 1.3;
	}
	#serviceFaq summary::after{
		position : absolute;
		top : 50%;
		right : 0;
		display : block;
		width : calc( 80 * 100% / 1240 );
		height : calc( 80 var( --remBase ) );
		font-size : 0;
		content : "";
		background : url( "../images/ui/arrow/down01.svg" ) center no-repeat;
		translate : 0 -50%;
	}
	#serviceFaq .detailsContent{
		margin-left : calc( 80 * 100% / 1240 );
	}
	#serviceFaq .answer{
		min-height : calc( 80 var( --remBase ) );
		padding-top : calc( 20 var( --remBase ) );
		padding-bottom : calc( 20 var( --remBase ) );
		padding-left : calc( 96 * 100% / 1160 );
		padding-right : calc( 16 * 100% / 1160 );
		font-size : 2rem;
		line-height : 2;
		box-shadow : inset 0 1px calc( 4 var( --remBase ) ) color-mix( in srgb , #0c0c0d 5% , transparent );
	}
	#serviceFaq .answer::before{
		width : calc( 80 * 100% / 1160 );
		height : calc( 80 var( --remBase ) );
		font-size : 3.6rem;
	}
	#serviceFaq .link01{
		grid-row : 2;
		grid-column : 4;
		justify-self : end;
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#serviceFaq details .detailsContent{
		transition : grid-template-rows var( --transitionBase );
	}
	@media screen and ( width > 750px ) , print{
		#serviceFaq details summary::after{
			transition : rotate var( --transitionBase );
		}
	}
}
#serviceCase .splide__slide a{
	display : grid;
	row-gap : calc( 8 var( --remBase ) );
	background-color : #f1f2ed;
}
#serviceCase h3{
	grid-row : 1;
	grid-column : 1;
	align-self : center;
	font-weight : 500;
	line-height : 1.3;
	color : #4b505b;
}
#serviceCase picture{
	grid-row : 1;
	grid-column : 2;
	align-self : center;
	width : 100%;
	height : calc( 120 var( --remBase ) );
	overflow : hidden;
	border-radius : 50%;
}
#serviceCase picture img{
	width : 100%;
	height : 100%;
	object-fit : cover;
	object-position : center;
}
#serviceCase p{
	grid-row : 2;
	grid-column : 1/-1;
}
#serviceCase .more02{
	grid-row : 3;
	grid-column : 1/-1;
	justify-self : end;
}
@media screen and ( width <= 750px ){
	#serviceCase{
		padding-block : calc( 80 var( --remBase ) );
	}
	#serviceCase .splide__track{
		margin-top : calc( 16 var( --remBase ) );
		margin-left : calc( 16 var( --viewportBase ) );
	}
	#serviceCase .splide__slide a{
		grid-template-columns : 1fr calc( 120 * 100% / 304 );
		column-gap : calc( 8 * 100% / 304 );
		align-items : center;
		height : 100%;
		padding-block : calc( 16 var( --remBase ) );
		padding-inline : calc( 16 * 100% / 304 );
	}
	#serviceCase h3{
		font-size : 2rem;
	}
	#serviceCase p{
		font-size : 1.4rem;
		line-height : 1.5;
	}
	#serviceCase .link04{
		margin-top : calc( 40 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#serviceCase{
		padding-block : calc( 120 var( --remBase ) );
	}
	#serviceCase .splide__track{
		margin-top : calc( 40 var( --remBase ) );
	}
	#serviceCase .splide__list{
		display : grid;
		grid-template-columns : repeat( 4 , calc( 440 var( --percentBase ) ) );
		column-gap : calc( 40 var( --percentBase ) );
		align-items : start;
	}
	#serviceCase .splide__slide a{
		grid-template-columns : 1fr calc( 120 * 100% / 392 );
		column-gap : calc( 16 * 100% / 392 );
		align-items : center;
		padding-block : calc( 24 var( --remBase ) );
		padding-inline : calc( 24 * 100% / 440 );
	}
	#serviceCase h3{
		font-size : 2.4rem;
	}
	#serviceCase p{
		font-size : 2rem;
		line-height : 1.7;
	}
	#serviceCase .link04{
		margin-top : calc( 40 var( --remBase ) );
	}
}

/* --------------------------------------------
COMPANY
--------------------------------------------- */
#company01{
	position : relative;
	overflow-x : clip;
}
#company01::before{
	position : absolute;
	display : block;
	width : auto;
	font-size : 0;
	content : "";
	background-color : var( --green03 );
}
#company01 h2{
	font-weight : 500;
	line-height : 1.5;
}
#company01 h2 span{
	display : block;
}
#company01 li{
	position : absolute;
}
@media screen and ( width <= 750px ){
	#company01{
		padding-top : calc( 40 var( --remBase ) );
		padding-bottom : calc( 334 var( --remBase ) );
		margin-top : calc( 52 var( --remBase ) );
	}
	#company01::before{
		top : 0;
		left : 0;
		height : calc( 272 var( --remBase ) );
		aspect-ratio : 1;
	}
	#company01 h2{
		font-size : 3.2rem;
	}
	#company01 p{
		margin-top : calc( 16 var( --remBase ) );
	}
	#company01 li:nth-child( 1 ){
		bottom : calc( 80 var( --remBase ) );
		left : calc( 16 var( --viewportBase ) );
	}
	#company01 li:nth-child( 1 ) img{
		height : calc( 237.08 var( --remBase ) );
	}
	#company01 li:nth-child( 2 ){
		bottom : calc( 36 var( --remBase ) );
		left : calc( 8 var( --viewportBase ) );
	}
	#company01 li:nth-child( 2 ) img{
		height : calc( 134.82 var( --remBase ) );
	}
	#company01 li:nth-child( 3 ){
		bottom : calc( 9.43 var( --remBase ) );
		left : calc( 209 var( --viewportBase ) );
	}
	#company01 li:nth-child( 3 ) img{
		height : calc( 118.65 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#company01{
		display : grid;
		grid-template-columns : calc( 160 var( --percentBase ) ) calc( 760 var( --percentBase ) );
		row-gap : calc( 24 var( --remBase ) );
		align-items : start;
		justify-content : start;
		padding-top : calc( 117 var( --remBase ) );
		padding-bottom : calc( 306 var( --remBase ) );
		margin-top : calc( 80 var( --remBase ) );
	}
	#company01::before{
		height : calc( 363 var( --remBase ) );
		aspect-ratio : 489/363;
	}
	#company01 h2{
		grid-row : 1;
		grid-column : 2;
		font-size : 4rem;
	}
	#company01 h2 span:nth-of-type( 2 ){
		text-align : right;
	}
	#company01 p{
		grid-row : 2;
		grid-column : 2;
	}
	#company01 li:nth-child( 1 ){
		top : 0;
	}
	#company01 li:nth-child( 1 ) img{
		height : calc( 565 var( --remBase ) );
	}
	#company01 li:nth-child( 2 ){
		top : calc( 395 var( --remBase ) );
	}
	#company01 li:nth-child( 2 ) img{
		height : calc( 258 var( --remBase ) );
	}
	#company01 li:nth-child( 3 ){
		top : calc( 565 var( --remBase ) );
	}
	#company01 li:nth-child( 3 ) img{
		height : calc( 214.64 var( --remBase ) );
	}
}
@media screen and ( 750px < width < 1960px ){
	#company01::before{
		left : calc( -36 var( --percentBase ) );
	}
	#company01 li:nth-child( 1 ){
		left : calc( 1083 var( --viewportBase ) );
	}
	#company01 li:nth-child( 2 ){
		left : calc( 1001 var( --viewportBase ) );
	}
	#company01 li:nth-child( 3 ){
		left : calc( 1386 var( --viewportBase ) );
	}
}
@media screen and ( width >= 1960px ) , print{
	#company01::before{
		left : calc( 50% - 1016px );
	}
	#company01 li:nth-child( 1 ){
		left : calc( 50% + 103px );
	}
	#company01 li:nth-child( 2 ){
		left : calc( 50% + 21px );
	}
	#company01 li:nth-child( 3 ){
		left : calc( 50% + 406px );
	}
}
#company02{
	position : relative;
	z-index : 0;
	overflow-x : clip;
	background-color : var( --green04 );
}
#company02 hgroup p{
	position : absolute;
	z-index : -1;
}
#company02 h3{
	font-weight : 500;
	line-height : 1.5;
}
#company02 h3 span{
	color : var( --green );
}
#company02 em{
	font-weight : 700;
}
#company02 li , #company02 .box > p:nth-of-type( 1 ){
	line-height : 2;
}
@media screen and ( width <= 750px ){
	#company02{
		padding-block : calc( 64 var( --remBase ) );
	}
	#company02 hgroup{
		margin-top : calc( 16 var( --remBase ) );
	}
	#company02 hgroup p{
		top : calc( -5.47 var( --remBase ) );
		left : calc( 150.69 var( --viewportBase ) );
	}
	#company02 hgroup p img{
		height : calc( 305.08 var( --remBase ) );
	}
	#company02 h3{
		font-size : 3.2rem;
	}
	#company02 ul{
		margin-top : calc( 8 var( --remBase ) );
	}
	#company02 li , #company02 .box > p:nth-of-type( 1 ){
		font-size : 2rem;
	}
	#company02 .box > p:nth-of-type( 2 ){
		margin-top : calc( 8 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#company02{
		display : grid;
		grid-template-columns : calc( 160 var( --percentBase ) ) calc( 440 var( --percentBase ) ) calc( 40 var( --percentBase ) ) calc( 920 var( --percentBase ) );
		align-items : start;
		justify-content : start;
		padding-top : calc( 240 var( --remBase ) );
		padding-bottom : calc( 180 var( --remBase ) );
	}
	#company02 .title07{
		grid-column : 2;
	}
	#company02 .box{
		grid-column : 4;
	}
	#company02 hgroup p{
		top : calc( 149.45 var( --remBase ) );
	}
	#company02 hgroup p img{
		height : calc( 732.8 var( --remBase ) );
	}
	#company02 h3{
		font-size : 5.2rem;
	}
	#company02 ul{
		margin-top : calc( 40 var( --remBase ) );
	}
	#company02 li , #company02 .box > p:nth-of-type( 1 ){
		font-size : 2.4rem;
	}
	#company02 .box > p:nth-of-type( 2 ){
		margin-top : calc( 28 var( --remBase ) );
	}
}
@media screen and ( 750px < width < 1960px ){
	#company02 hgroup p{
		left : calc( 1318.29 var( --viewportBase ) );
	}
}
@media screen and ( width >= 1960px ) , print{
	#company02 hgroup p{
		left : calc( 50% + 338.29px );
	}
}
#company03 h3{
	font-weight : 500;
	line-height : 1.5;
}
#company03 h3 span{
	color : var( --green );
}
#company03 em{
	font-weight : 700;
	color : var( --green );
}
#company03 ol li{
	font-weight : 700;
	line-height : 2;
}
#company03 ul{
	margin-top : calc( 48 var( --remBase ) );
}
#company03 ul li{
	background-color : var( --green02 );
}
#company03 h4{
	display : grid;
	place-items : center;
	width : fit-content;
	padding-inline : calc( 8 var( --remBase ) );
	font-size : 2rem;
	font-weight : 400;
	line-height : 1.5;
	color : white;
	background-color : var( --green );
}
#company03 li p{
	line-height : 2;
}
@media screen and ( width <= 750px ){
	#company03{
		padding-block : calc( 80 var( --remBase ) );
	}
	#company03 .box{
		margin-top : calc( 16 var( --remBase ) );
	}
	#company03 h3{
		font-size : 3.2rem;
	}
	#company03 h3:first-of-type{
		text-align : center;
	}
	#company03 .box02{
		margin-top : calc( 21 var( --remBase ) );
	}
	#company03 .box02 img{
		width : 100%;
		height : auto;
	}
	#company03 .box02 ul{
		margin-top : calc( 16 var( --remBase ) );
	}
	#company03 .box02 li{
		font-size : 2rem;
	}
	#company03 .box > p{
		margin-top : calc( 16 var( --remBase ) );
	}
	#company03 h3:nth-of-type( 2 ){
		margin-top : calc( 16 var( --remBase ) );
	}
	#company03 ul li + li{
		margin-top : calc( 40 var( --remBase ) );
	}
	#company03 ul li{
		padding-bottom : calc( 16 var( --remBase ) );
	}
	#company03 ul h4{
		height : calc( 30 var( --remBase ) );
	}
	#company03 ul picture{
		margin-top : calc( -14 var( --remBase ) );
		text-align : center;
	}
	#company03 ul picture img{
		height : calc( 320 var( --remBase ) );
	}
	#company03 ul p{
		padding-inline : calc( 16 var( --percentBase ) );
		margin-top : calc( 8 var( --remBase ) );
		font-size : 1.4rem;
	}
}
@media screen and ( width > 750px ) , print{
	#company03{
		display : grid;
		grid-template-columns : calc( 160 var( --percentBase ) ) calc( 440 var( --percentBase ) ) calc( 40 var( --percentBase ) ) calc( 1080 var( --percentBase ) );
		align-items : start;
		justify-content : start;
		padding-top : calc( 240 var( --remBase ) );
		padding-bottom : calc( 144 var( --remBase ) );
	}
	#company03 .title07{
		grid-column : 2;
	}
	#company03 .box{
		grid-column : 4;
	}
	#company03 h3{
		font-size : 5.2rem;
	}
	#company03 .box02{
		display : grid;
		grid-template-columns : auto 1fr;
		column-gap : calc( 40 * 100% / 1080 );
		align-items : center;
		justify-content : start;
		margin-top : calc( 22 var( --remBase ) );
	}
	#company03 .box02 img{
		height : calc( 272 var( --remBase ) );
	}
	#company03 .box02 li{
		font-size : 2.4rem;
	}
	#company03 .box > p{
		margin-top : calc( 28 var( --remBase ) );
	}
	#company03 h3:nth-of-type( 2 ){
		margin-top : calc( 80 var( --remBase ) );
	}
	#company03 ul li + li{
		margin-top : calc( 40 var( --remBase ) );
	}
	#company03 ul li{
		display : grid;
		grid-template-rows : calc( 30 var( --remBase ) ) auto;
		grid-template-columns : calc( 160 * 100% / 1064 ) 1fr;
		row-gap : calc( 6 var( --remBase ) );
		column-gap : calc( 24 * 100% / 1080 );
		align-items : start;
		padding-right : calc( 16 * 100% / 1080 );
	}
	#company03 ul picture{
		grid-row : 1/-1;
		grid-column : 1;
		align-self : center;
	}
	#company03 ul picture img{
		height : calc( 160 var( --remBase ) );
	}
	#company03 ul h4{
		grid-row : 1;
		grid-column : 2;
		height : 100%;
	}
	#company03 ul p{
		grid-row : 2;
		grid-column : 2;
		padding-bottom : calc( 36 var( --remBase ) );
		font-size : 2rem;
	}
}
#company04 .splide__slide{
	position : relative;
	background-color : white;
}
#company04 .splide__slide picture{
	position : absolute;
}
#company04 hgroup p{
	display : grid;
	align-items : center;
	justify-content : start;
	height : calc( 31 var( --remBase ) );
	font-family : Alata;
	font-size : 1.8rem;
	font-weight : 400;
	color : white;
	background-color : var( --orange02 );
}
#company04 hgroup h3{
	font-weight : 500;
	line-height : 1.3;
}
#company04 picture img{
	height : calc( 120 var( --remBase ) );
}
#company04 h4{
	margin-top : calc( 36 var( --remBase ) );
	font-weight : 700;
	line-height : 1.7;
}
#company04 .splide__slide > p{
	margin-top : calc( 8 var( --remBase ) );
	line-height : 1.7;
}
@media screen and ( width <= 750px ){
	#company04{
		padding-top : calc( 64 var( --remBase ) );
		background-color : #f1f2ed;
	}
	#company04 .splide__track{
		margin-top : calc( 16 var( --remBase ) );
		margin-left : calc( 16 var( --viewportBase ) );
	}
	#company04 .splide__list{
		align-items : start;
	}
	#company04 .splide__slide{
		padding-inline : calc( 16 * 100% / 384 );
		padding-top : calc( 44 var( --remBase ) );
		padding-bottom : calc( 16 var( --remBase ) );
	}
	#company04 hgroup p{
		width : calc( 120 * 100% / 352 );
		padding-inline : calc( 8 * 100% / 384 );
	}
	#company04 hgroup h3{
		margin-top : calc( 8 var( --remBase ) );
		font-size : 2rem;
	}
	#company04 picture{
		top : calc( 16 var( --remBase ) );
		right : calc( 16 * 100% / 304 );
	}
	#company04 h4{
		font-size : 1.4rem;
	}
	#company04 .splide__slide > p{
		font-size : 1.4rem;
	}
}
@media screen and ( width > 750px ) , print{
	#company04{
		padding-block : calc( 120 var( --remBase ) );
		background-color : var( --green04 );
	}
	#company04 .splide__track{
		margin-top : calc( 40 var( --remBase ) );
	}
	#company04 .splide__list{
		display : flex;
		flex-wrap : wrap;
		row-gap : calc( 74 var( --remBase ) );
		column-gap : calc( 40 var( --percentBase ) );
		align-items : start;
		justify-content : center;
	}
	#company04 .splide__slide{
		width : calc( 440 var( --percentBase ) );
		padding-inline : calc( 24 var( --percentBase ) );
		padding-top : calc( 52 var( --remBase ) );
		padding-bottom : calc( 24 var( --remBase ) );
	}
	#company04 hgroup p{
		width : calc( 120 * 100% / 392 );
		padding-inline : calc( 8 * 100% / 392 );
	}
	#company04 hgroup h3{
		margin-top : calc( 4 var( --remBase ) );
		font-size : 2.4rem;
	}
	#company04 picture{
		top : calc( 24 var( --remBase ) );
		right : calc( 24 * 100% / 440 );
	}
	#company04 h4{
		font-size : 2rem;
	}
	#company04 .splide__slide > p{
		font-size : 2rem;
	}
}
#company05 .box02{
	background-color : var( --green04 );
}
#company05 .box02 hgroup h3{
	font-weight : 700;
	line-height : 1.3;
	color : var( --green );
	letter-spacing : .05em;
}
#company05 dt , #company05 dd{
	line-height : 1.7;
}
#company05 dt{
	line-height : 1.7;
	border-bottom : solid 1px var( --green );
}
@media screen and ( width <= 750px ){
	#company05{
		padding-block : calc( 80 var( --remBase ) );
	}
	#company05 .box{
		margin-top : calc( 24 var( --remBase ) );
	}
	#company05 .box > p{
		font-size : 1.4rem;
		line-height : 1.7;
	}
	#company05 picture{
		width : calc( 280 var( --percentBase ) );
		margin-inline : auto;
		margin-top : calc( 24 var( --remBase ) );
	}
	#company05 .box02{
		padding-block : calc( 24 var( --remBase ) );
		padding-inline : calc( 24 var( --percentBase ) );
		margin-top : calc( 24 var( --remBase ) );
	}
	#company05 .box02 hgroup{
		text-align : center;
	}
	#company05 .box02 hgroup h3{
		font-size : 3.2rem;
	}
	#company05 .box02 hgroup p{
		font-size : 1.4rem;
		line-height : 1.5;
	}
	#company05 dl{
		margin-top : calc( 16 var( --remBase ) );
	}
	#company05 dl > div + div{
		margin-top : calc( 20 var( --remBase ) );
	}
	#company05 dt , #company05 dd{
		font-size : 1.4rem;
	}
	#company05 dd{
		margin-top : calc( 12 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#company05{
		display : grid;
		grid-template-columns : calc( 160 var( --percentBase ) ) calc( 440 var( --percentBase ) ) calc( 40 var( --percentBase ) ) calc( 1080 var( --percentBase ) );
		align-items : start;
		padding-top : calc( 170 var( --remBase ) );
		padding-bottom : calc( 220 var( --remBase ) );
	}
	#company05 .title07{
		grid-column : 2;
		margin-top : calc( 70 var( --remBase ) );
	}
	#company05 .box{
		display : grid;
		grid-template-columns : calc( 760 * 100% / 1080 ) 1fr;
		grid-column : 4;
		row-gap : calc( 16 var( --remBase ) );
		column-gap : calc( 40 * 100% / 1080 );
		align-items : start;
	}
	#company05 .box > p{
		grid-row : 1;
		grid-column : 1;
		font-size : 2rem;
		line-height : 2;
	}
	#company05 picture{
		grid-row : 1;
		grid-column : 2;
	}
	#company05 .box02{
		grid-row : 2;
		grid-column : 1/-1;
		padding-block : calc( 24 var( --remBase ) );
		padding-inline : calc( 24 * 100% / 1080 );
	}
	#company05 .box02 hgroup{
		display : grid;
		grid-template-columns : auto auto;
		align-items : center;
		justify-content : start;
	}
	#company05 .box02 hgroup h3{
		font-size : 3.2rem;
	}
	#company05 .box02 hgroup p{
		font-size : 2rem;
		line-height : 2;
	}
	#company05 dl{
		display : grid;
		grid-template-columns : repeat( 2 , calc( 506 * 100% / 1032 ) );
		align-items : start;
		justify-content : space-between;
		margin-top : calc( 16 var( --remBase ) );
	}
	#company05 dt , #company05 dd{
		font-size : 2rem;
	}
	#company05 dd{
		margin-top : calc( 8 var( --remBase ) );
	}
}
#company06{
	background-color : var( --green04 );
}
#company06 dl > div{
	display : grid;
	align-items : start;
	border-top : solid 1px #d9d9d9;
}
#company06 dt , #company06 dd{
	padding-block : calc( 16 var( --remBase ) );
	line-height : 1.7;
}
#company06 .inline{
	font-size : 0;
}
#company06 .inline > li{
	display : inline;
	line-height : 1.7;
}
#company06 .inline > li:not( :last-child )::after{
	content : "、";
}
@media screen and ( width <= 750px ){
	#company06{
		padding-block : calc( 40 var( --remBase ) );
	}
	#company06 dl{
		margin-top : calc( 16 var( --remBase ) );
		border-bottom : solid 1px #d9d9d9;
	}
	#company06 dl > div{
		grid-template-columns : calc( 96 var( --percentBase ) ) 1fr;
		column-gap : calc( 8 var( --percentBase ) );
	}
	#company06 dt , #company06 dd{
		font-size : 1.4rem;
	}
	#company06 .inline > li{
		font-size : 1.4rem;
	}
}
@media screen and ( width > 750px ) , print{
	#company06{
		padding-block : calc( 120 var( --remBase ) );
	}
	#company06 dl{
		column-gap : calc( 40 * 100% / 1560 );
		padding-inline : calc( 160 var( --percentBase ) );
		margin-top : calc( 40 var( --remBase ) );
		columns : 2;
		column-width : calc( 760 * 100% / 1560 );
	}
	#company06 dl > div{
		grid-template-columns : calc( 200 * 100% / 760 ) calc( 440 * 100% / 760 );
		column-gap : calc( 40 * 100% / 760 );
		box-shadow : 0 1px 0 0 #d9d9d9;
	}
	#company06 dt , #company06 dd{
		font-size : 2rem;
	}
	#company06 .inline > li{
		font-size : 2rem;
	}
}
#company07 dt{
	display : grid;
	place-items : center;
	font-weight : 500;
	line-height : 2;
	color : white;
	background-color : var( --green );
}
#company07 dd{
	line-height : 2;
}
@media screen and ( width <= 750px ){
	#company07{
		padding-block : calc( 80 var( --remBase ) );
	}
	#company07 iframe{
		margin-top : calc( 16 var( --remBase ) );
	}
	#company07 dl{
		margin-top : calc( 40 var( --remBase ) );
	}
	#company07 dl > div + div{
		margin-top : calc( 16 var( --remBase ) );
	}
	#company07 dt , #company07 dd{
		font-size : 2rem;
	}
	#company07 dt{
		width : fit-content;
		height : calc( 40 var( --remBase ) );
		padding-inline : calc( 16 var( --remBase ) );
	}
	#company07 dd{
		margin-top : calc( 20 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#company07{
		padding-block : calc( 120 var( --remBase ) );
	}
	#company07 iframe{
		width : 100%;
		height : calc( 560 var( --remBase ) );
		margin-top : calc( 40 var( --remBase ) );
	}
	#company07 dl{
		display : grid;
		grid-template-columns : repeat( 2 , calc( 755 var( --percentBase ) ) );
		column-gap : calc( 40 var( --percentBase ) );
		justify-content : center;
		margin-top : calc( 40 var( --remBase ) );
	}
	#company07 dl > div{
		display : grid;
		grid-template-columns : calc( 200 * 100% / 755 ) 1fr;
		column-gap : calc( 20 * 100% / 755 );
		padding-block : calc( 16 var( --remBase ) );
		border-top : solid 1px #d9d9d9;
		border-bottom : solid 1px #d9d9d9;
	}
	#company07 dt , #company07 dd{
		font-size : 2rem;
	}
	#company07 dt{
		height : calc( 40 var( --remBase ) );
	}
}

/* --------------------------------------------
CONTACT
--------------------------------------------- */
#contact .lede{
	line-height : 1.7;
}
@media screen and ( width <= 750px ){
	#contact{
		padding-bottom : calc( 56 var( --remBase ) );
		margin-top : calc( 52 var( --remBase ) );
	}
	#contact .lede{
		font-size : 1.4rem;
	}
}
@media screen and ( width > 750px ) , print{
	#contact{
		padding-bottom : calc( 228 var( --remBase ) );
		margin-top : calc( 92 var( --remBase ) );
	}
	#contact .lede{
		font-size : 2rem;
		text-align : center;
	}
}

/* --------------------------------------------
CONTACT
--------------------------------------------- */
#contact dl{
	border-top : solid 1px #d9d9d9;
}
#contact dl > div + div{
	border-top : solid 1px #d9d9d9;
}
#contact dt > label{
	display : grid;
	align-content : start;
	justify-content : space-between;
	line-height : 2;
}
#contact dt > label::after{
	display : grid;
	place-items : center;
	font-size : 1.6rem;
	font-weight : 400;
	color : white;
}
#contact dt:has( + dd [aria-required] , + dd input[type="radio"] ) > label::after{
	content : "必須";
	background-color : #eb5757;
}
#contact dt:not( :has( + dd [aria-required] , + dd input[type="radio"] ) ) > label::after{
	content : "任意";
	background-color : #04c4d9;
}
#contact :where( input[type="text"] , input[type="email"] , input[type="tel"] , select , textarea ){
	width : 100%;
	padding-inline : calc( 8 var( --remBase ) );
	background-color : #eee;
}
#contact :where( input[type="text"] , input[type="email"] , input[type="tel"] , select , textarea )::placeholder{
	color : #989898;
}
#contact .dates li{
	display : grid;
	row-gap : calc( 8 var( --remBase ) );
	align-items : center;
	justify-content : start;
}
#contact .dates li > label{
	font-weight : 700;
}
#contact .dates li > span{
	width : 100%;
}
#contact .subjects li > label{
	font-weight : 700;
}
#contact input[type="checkbox"]{
	appearance : none;
	position : relative;
}
#contact input[type="checkbox"]::before{
	display : block;
	content : "";
	background-color : #f1f2ed;
}
#contact input[type="checkbox"]:checked::after{
	position : absolute;
	top : 50%;
	left : 50%;
	display : block;
	width : calc( 25 var( --remBase ) );
	height : calc( 16.5 var( --remBase ) );
	content : "";
	background : url( "../images/ui/icon/check01.svg" ) center / contain no-repeat;
	translate : -50% -50%;
}
#contact select{
	appearance : none;
	background-image : url( "../images/ui/icon/down02.svg" );
	background-repeat : no-repeat;
	background-position : right top;
	background-size : auto 100%;
}
#contact select::-ms-expand{
	display : none;
}
#contact .wpcf7-checkbox label{
	display : grid;
	align-items : center;
	justify-content : start;
}
#contact .wpcf7-list-item{
	display : block;
	margin-left : 0;
}
#contact .names{
	display : grid;
	align-items : start;
}
#contact .addresses{
	display : grid;
	align-items : start;
	align-items : center;
}
#contact .addresses button{
	display : grid;
	place-items : center;
	width : 100%;
	color : white;
	background-color : #989898;
	border-radius : 100vmax;
}
#contact h5{
	font-weight : 500;
	text-align : center;
}
#contact .box{
	overflow-y : auto;
	border : solid 1px #a1a1a1;
}
#contact .buttons :where( input , button ){
	display : grid;
	grid-template-columns : auto auto;
	place-items : center;
	align-items : center;
	justify-content : center;
	margin-inline : auto;
	color : white;
	text-align : center;
	text-indent : .05em;
	letter-spacing : .05em;
	border-radius : 100vmax;
}
#contact .buttons button{
	background-color : #fff;
	background-color : var( --orange02 );
}
#contact .buttons input{
	background-color : #989898;
}
#contact .wpcf7-not-valid-tip{
	color : #eb5757;
}
#contact .wpcf7-spinner{
	display : none;
}
#contact option[value$="(土)"]{
	background-color : rgb( 238 238 255 );
}
#contact option[value$="(日)"]{
	background-color : rgb( 255 238 238 );
}
@media screen and ( width <= 750px ){
	#contact dl{
		margin-top : calc( 32 var( --remBase ) );
	}
	#contact dt > label{
		grid-template-columns : auto calc( 52 * 100% / 352 );
		padding-block : calc( 16 var( --remBase ) );
		padding-left : calc( 16 var( --percentBase ) );
		font-size : 1.4rem;
	}
	#contact dt > label::after{
		height : calc( 30 var( --remBase ) );
		line-height : 1.3;
	}
	#contact dd{
		padding-top : calc( 20 var( --remBase ) );
		padding-bottom : calc( 32 var( --remBase ) );
		border-top : solid 1px #d9d9d9;
	}
	#contact :where( input[type="text"] , input[type="email"] , input[type="tel"] , select , textarea ){
		font-size : 1.4rem;
		line-height : 2;
	}
	#contact :where( input[type="text"] , input[type="email"] , input[type="tel"] , select ){
		height : calc( 40 var( --remBase ) );
	}
	#contact .dates li + li{
		margin-top : calc( 20 var( --remBase ) );
	}
	#contact .dates li{
		grid-template-rows : repeat( 2 , auto );
		grid-template-columns : calc( 78 var( --percentBase ) ) calc( 173 var( --percentBase ) ) calc( 62 var( --percentBase ) );
	}
	#contact .dates li label{
		grid-row : 1/-1;
		grid-column : 1;
		font-size : 1.4rem;
		line-height : 1.5;
	}
	#contact .dates li > span:nth-of-type( 1 ){
		grid-row : 1;
		grid-column : 2/4;
	}
	#contact .dates li > span:nth-of-type( 2 ){
		grid-row : 2;
		grid-column : 2;
	}
	#contact textarea{
		height : calc( 155 var( --remBase ) );
	}
	#contact .subjects li + li{
		margin-top : calc( 20 var( --remBase ) );
	}
	#contact .subjects .wpcf7-form-control-wrap{
		display : block;
		margin-top : calc( 20 var( --remBase ) );
	}
	#contact .subjects li > label{
		display : block;
		font-size : 1.4rem;
		line-height : 1.5;
	}
	#contact .subjects .wpcf7-list-item + .wpcf7-list-item{
		margin-top : calc( 16 var( --remBase ) );
	}
	#contact .subjects .wpcf7-checkbox label{
		grid-template-columns : calc( 28 var( --remBase ) ) auto;
		column-gap : calc( 8 var( --remBase ) );
	}
	#contact .subjects .wpcf7-checkbox label span{
		font-size : 1.4rem;
		line-height : 2;
	}
	#contact .subjects .wpcf7-checkbox input[type="checkbox"]::before{
		height : calc( 28 var( --remBase ) );
	}
	#contact .addresses{
		grid-template-rows : auto repeat( 4 , calc( 8 var( --remBase ) ) auto calc( 4 var( --remBase ) ) calc( 40 var( --remBase ) ) );
		grid-template-columns : auto calc( 149 var( --percentBase ) ) calc( 128 var( --percentBase ) );
		column-gap : calc( 13 var( --percentBase ) );
	}
	#contact .addresses label{
		font-size : 1.6rem;
		line-height : 1.7;
	}
	#contact .addresses label:nth-of-type( 1 ){
		grid-row : 1;
		grid-column : 1;
	}
	#contact .addresses label:nth-of-type( 2 ){
		grid-row : 3;
		grid-column : 1/-1;
	}
	#contact .addresses label:nth-of-type( 3 ){
		grid-row : 7;
		grid-column : 1/-1;
	}
	#contact .addresses label:nth-of-type( 4 ){
		grid-row : 11;
		grid-column : 1/-1;
	}
	#contact .addresses label:nth-of-type( 5 ){
		grid-row : 15;
		grid-column : 1/-1;
	}
	#contact .addresses > span:nth-of-type( 1 ){
		grid-row : 1;
		grid-column : 2;
	}
	#contact .addresses > span:nth-of-type( 2 ){
		grid-row : 5;
		grid-column : 1/-1;
	}
	#contact .addresses > span:nth-of-type( 3 ){
		grid-row : 9;
		grid-column : 1/-1;
	}
	#contact .addresses > span:nth-of-type( 4 ){
		grid-row : 13;
		grid-column : 1/-1;
	}
	#contact .addresses > span:nth-of-type( 5 ){
		grid-row : 17;
		grid-column : 1/-1;
	}
	#contact .addresses button{
		grid-row : 1;
		grid-column : 3;
		height : calc( 40 var( --remBase ) );
		font-size : 1.2rem;
		line-height : 1.3;
	}
	#contact .mails p{
		margin-block : calc( 9 var( --remBase ) );
		font-size : 1.4rem;
		line-height : 2;
	}
	#contact h5{
		margin-top : calc( 32 var( --remBase ) );
		font-size : 2.2rem;
		line-height : 1.3;
	}
	#contact .box{
		height : calc( 176 var( --remBase ) );
		padding-inline : calc( 7 var( --percentBase ) - 1px );
		margin-top : calc( 12 var( --remBase ) );
	}
	#contact .box p{
		font-size : 1.4rem;
		line-height : 1.7;
	}
	#contact .buttons{
		margin-top : calc( 32 var( --remBase ) );
	}
	#contact .buttons :where( input , button ){
		width : calc( 318 var( --percentBase ) );
		height : calc( 60 var( --remBase ) );
		font-size : 2rem;
		font-weight : 500;
		text-align : center;
		text-indent : .05em;
		letter-spacing : .05em;
	}
	#contact .buttons input{
		margin-top : calc( 32 var( --remBase ) );
	}
	#contact .wpcf7-not-valid-tip{
		font-size : 1.4rem;
		line-height : 2;
	}
}
@media screen and ( width > 750px ) , print{
	#contact dl{
		width : calc( 1560 var( --percentBase ) );
		margin-inline : auto;
		margin-top : calc( 40 var( --remBase ) );
	}
	#contact dl > div{
		display : grid;
		grid-template-columns : calc( 440 * 100% / 1560 ) 1fr;
		column-gap : calc( 40 * 100% / 1560 );
		align-items : center;
	}
	#contact dl > div + div{
		border-top : solid 1px #d9d9d9;
	}
	#contact dt > label{
		grid-template-columns : auto calc( 109 * 100% / 440 );
		font-size : 2rem;
		line-height : 1.7;
	}
	#contact dt > label::after{
		height : calc( 34 var( --remBase ) );
		line-height : 1.5;
	}
	#contact dd{
		padding-block : calc( 16 var( --remBase ) );
	}
	#contact :where( input[type="text"] , input[type="email"] , input[type="tel"] , select , textarea ){
		font-size : 2rem;
		line-height : 1.7;
	}
	#contact :where( input[type="text"] , input[type="email"] , input[type="tel"] , select ){
		height : calc( 50 var( --remBase ) );
	}
	#contact .dates li + li{
		margin-top : calc( 8 var( --remBase ) );
	}
	#contact .dates li{
		grid-template-columns : auto calc( 370 * 100% / 1080 ) calc( 250 * 100% / 1080 );
		column-gap : calc( 8 * 100% / 1080 );
	}
	#contact .dates li > label{
		grid-row : 1;
		grid-column : 1;
		font-size : 2rem;
		line-height : 1.7;
	}
	#contact .dates li > span{
		grid-row : 1;
	}
	#contact .dates li > span:nth-of-type( 1 ){
		grid-column : 2;
	}
	#contact .dates li > span:nth-of-type( 2 ){
		grid-column : 3;
	}
	#contact .subjects li{
		display : grid;
		grid-template-columns : calc( 240 * 100% / 1080 ) 1fr;
		align-items : start;
	}
	#contact .subjects li + li{
		margin-top : calc( 16 var( --remBase ) );
	}
	#contact .subjects li > label{
		font-size : 2rem;
		line-height : 1.7;
	}
	#contact .subjects .wpcf7-list-item + .wpcf7-list-item{
		margin-top : calc( 8 var( --remBase ) );
	}
	#contact .subjects .wpcf7-checkbox label{
		grid-template-columns : calc( 24 var( --remBase ) ) auto;
		column-gap : calc( 8 var( --remBase ) );
	}
	#contact .subjects .wpcf7-checkbox label span{
		font-size : 2rem;
		line-height : 1.7;
	}
	#contact .subjects .wpcf7-checkbox input[type="checkbox"]::before{
		height : calc( 24 var( --remBase ) );
	}
	#contact textarea{
		width : calc( 760 * 100% / 1080 );
		height : calc( 160 var( --remBase ) );
	}
	#contact .names input{
		width : calc( 400 * 100% / 1080 );
	}
	#contact .addresses{
		grid-template-columns : calc( 128 * 100% / 1080 ) calc( 234 * 100% / 1080 ) calc( 8 * 100% / 1080 ) calc( 8 * 100% / 1080 ) calc( 184 * 100% / 1080 ) calc( 196 * 100% / 1080 ) 1fr;
		row-gap : calc( 8 var( --remBase ) );
	}
	#contact .addresses label{
		grid-column : 1;
		font-size : 2rem;
		line-height : 1.7;
	}
	#contact .addresses label:nth-of-type( 1 ){
		grid-row : 1;
	}
	#contact .addresses label:nth-of-type( 2 ){
		grid-row : 2;
	}
	#contact .addresses label:nth-of-type( 3 ){
		grid-row : 3;
	}
	#contact .addresses label:nth-of-type( 4 ){
		grid-row : 4;
	}
	#contact .addresses label:nth-of-type( 5 ){
		grid-row : 5;
	}
	#contact .addresses > span:nth-of-type( 1 ){
		grid-row : 1;
		grid-column : 2;
	}
	#contact .addresses > span:nth-of-type( 2 ){
		grid-row : 2;
		grid-column : 2/5;
	}
	#contact .addresses > span:nth-of-type( 3 ){
		grid-row : 3;
		grid-column : 2/7;
	}
	#contact .addresses > span:nth-of-type( 4 ){
		grid-row : 4;
		grid-column : 2/7;
	}
	#contact .addresses > span:nth-of-type( 5 ){
		grid-row : 5;
		grid-column : 2/7;
	}
	#contact .addresses button{
		grid-row : 1;
		grid-column : 4/6;
		height : calc( 50 var( --remBase ) );
		font-size : 2rem;
		line-height : 1.7;
	}
	#contact #contact_tel{
		width : calc( 420 * 100% / 800 );
	}
	#contact .mails input{
		width : calc( 490 * 100% / 800 );
	}
	#contact .mails p{
		margin-block : calc( 10 var( --remBase ) );
		font-size : 1.6rem;
		line-height : 1.7;
	}
	#contact h5{
		margin-top : calc( 40 var( --remBase ) );
		font-size : 2.4rem;
		line-height : 1.3;
	}
	#contact .box{
		width : calc( 924 var( --percentBase ) );
		height : calc( 217 var( --remBase ) );
		padding-inline : calc( 7 var( --percentBase ) - 1px );
		margin-inline : auto;
		margin-top : calc( 28 var( --remBase ) );
	}
	#contact .box p{
		font-size : 2rem;
		line-height : 1.7;
	}
	#contact .buttons{
		display : grid;
		grid-template-rows : calc( 66 var( --remBase ) );
		grid-template-columns : calc( 303 var( --percentBase ) ) calc( 263 var( --percentBase ) );
		column-gap : calc( 16 var( --percentBase ) );
		align-items : center;
		justify-content : center;
		margin-top : calc( 40 var( --remBase ) );
	}
	#contact .buttons :where( button , input ){
		width : 100%;
		height : 100%;
		font-size : 2rem;
		font-weight : 700;
		line-height : 1.7;
	}
	#contact .buttons button{
		grid-row : 1;
		grid-column : 1;
	}
	#contact .buttons input{
		grid-row : 1;
		grid-column : 2;
	}
	#contact .wpcf7-not-valid-tip{
		font-size : 2rem;
		line-height : 1.7;
	}
}
#confirm dl{
	border-top : solid 1px #d9d9d9;
}
#confirm dl > div + div{
	border-top : solid 1px #d9d9d9;
}
#confirm .buttons :where( input , button ){
	display : grid;
	grid-template-columns : auto auto;
	place-items : center;
	align-items : center;
	justify-content : center;
	margin-inline : auto;
	color : white;
	text-align : center;
	text-indent : .05em;
	letter-spacing : .05em;
	border-radius : 100vmax;
}
#confirm .buttons button{
	background-color : #fff;
	background-color : var( --orange02 );
}
#confirm .buttons input{
	background-color : #989898;
}
@media screen and ( width <= 750px ){
	#confirm{
		padding-bottom : calc( 56 var( --remBase ) );
		margin-top : calc( 52 var( --remBase ) );
	}
	#confirm dl{
		margin-top : calc( 32 var( --remBase ) );
	}
	#confirm dt , #confirm dd{
		font-size : 1.4rem;
		line-height : 2;
	}
	#confirm dt{
		padding-block : calc( 16 var( --remBase ) );
		padding-left : calc( 16 var( --percentBase ) );
	}
	#confirm dd{
		padding-block : calc( 20 var( --remBase ) );
		border-top : solid 1px #d9d9d9;
	}
	#confirm .buttons{
		margin-top : calc( 32 var( --remBase ) );
	}
	#confirm .buttons :where( input , button ){
		width : calc( 318 var( --percentBase ) );
		height : calc( 60 var( --remBase ) );
		font-size : 2rem;
		font-weight : 500;
		text-align : center;
		text-indent : .05em;
		letter-spacing : .05em;
	}
	#confirm .buttons input{
		margin-top : calc( 32 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#confirm{
		padding-bottom : calc( 228 var( --remBase ) );
		margin-top : calc( 92 var( --remBase ) );
	}
	#confirm dl{
		width : calc( 1560 var( --percentBase ) );
		margin-inline : auto;
		margin-top : calc( 40 var( --remBase ) );
	}
	#confirm dl > div{
		display : grid;
		grid-template-columns : calc( 440 * 100% / 1560 ) 1fr;
		column-gap : calc( 40 * 100% / 1560 );
		align-items : center;
	}
	#confirm dl > div + div{
		border-top : solid 1px #d9d9d9;
	}
	#confirm dt , #confirm dd{
		padding-block : calc( 16 var( --remBase ) );
		font-size : 2rem;
		line-height : 1.7;
	}
	#confirm .buttons{
		display : grid;
		grid-template-rows : calc( 66 var( --remBase ) );
		grid-template-columns : calc( 303 var( --percentBase ) ) calc( 263 var( --percentBase ) );
		column-gap : calc( 16 var( --percentBase ) );
		align-items : center;
		justify-content : center;
		margin-top : calc( 40 var( --remBase ) );
	}
	#confirm .buttons :where( button , input ){
		width : 100%;
		height : 100%;
		font-size : 2rem;
		font-weight : 700;
		line-height : 1.7;
	}
	#confirm .buttons button{
		grid-row : 1;
		grid-column : 1;
	}
	#confirm .buttons input{
		grid-row : 1;
		grid-column : 2;
	}
}