@charset "UTF-8";

/* --------------------------------------------
COLUMN
--------------------------------------------- */
@media print , screen and ( width > 750px ){
	#column01{
		display : grid;
		grid-template-columns : calc( 1040 var( --percentBase ) ) calc( 320 var( --percentBase ) );
		align-items : start;
		justify-content : space-between;
	}
}
#sidebar h4{
	display : grid;
	align-items : center;
	justify-content : start;
	height : calc( 69 var( --remBase ) );
	margin-bottom : calc( 16 var( --remBase ) );
	color : var( --color01 );
	color : white;
	background-color : var( --color01 );
}
#sidebar li{
	border-bottom : solid 1px #cfd2d9;
}
#sidebar a{
	display : block;
}
@media screen and ( width <= 750px ){
	#sidebar{
		margin-top : calc( 40 var( --remBase ) );
		margin-bottom : calc( 88 var( --remBase ) );
		font-family : "Noto Sans JP";
	}
	#sidebar h4{
		padding-inline : calc( 19.5 var( --percentBase ) );
		font-size : 2rem;
		font-weight : 600;
		line-height : 1.3;
	}
	#sidebar h5{
		padding-left : calc( 4.59 var( --percentBase ) );
		font-size : 2rem;
		line-height : 1.3;
		border-left : solid calc( 4.59 var( --remBase ) ) var( --color01 );
	}
	#sidebar ul{
		margin-top : calc( 12 var( --remBase ) );
	}
	#sidebar li{
		padding-bottom : calc( 4 var( --remBase ) );
	}
	#sidebar a{
		padding-block : calc( 5.6 var( --remBase ) );
		padding-inline : calc( 6 var( --percentBase ) );
		font-size : 1.4rem;
		line-height : 1.7;
	}
	#sidebar * + h5{
		margin-top : calc( 32 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#sidebar h4{
		padding-inline : calc( 17 * 100% / 320 );
	}
	#sidebar h5{
		padding-bottom : calc( 8 var( --remBase ) );
		border-bottom : solid calc( 2 var( --remBase ) ) var( --color01 );
	}
	#sidebar a{
		padding-inline : calc( 6 * 100% / 320 );
		padding-top : calc( 8 var( --remBase ) );
		padding-bottom : calc( 7 var( --remBase ) );
	}
	#sidebar * + h5{
		margin-top : calc( 40 var( --remBase ) );
	}
}

/* --------------------------------------------
SECTION
--------------------------------------------- */
#sectionOnline{
	position : relative;
	overflow-x : clip;
}
#sectionOnline .trapezoid{
	z-index : 0;
	background-color : #e7eaed;
}
#sectionOnline :where( .title01 , .catchcopy01 , .text , .link01 ){
	position : relative;
	z-index : 1;
}
@media screen and ( width <= 750px ){
	#sectionOnline{
		padding-block : calc( 188 var( --remBase ) );
	}
	#sectionOnline .catchcopy01{
		margin-top : calc( 16 var( --remBase ) );
	}
	#sectionOnline .text{
		margin-top : calc( 16 var( --remBase ) );
	}
	#sectionOnline .link01{
		margin-top : calc( 16 var( --remBase ) );
	}
	#sectionOnline .trapezoid{
		bottom : 0;
		left : calc( 33 var( --viewportBase ) );
		width : calc( 624 var( --viewportBase ) );
		height : calc( 297 var( --remBase ) );
		clip-path : polygon( calc( 67.4558 * 100% / 624 ) 0 , 100% 0 , 100% 100% , 0% 100% );
	}
}
@media print , screen and ( width > 750px ){
	#sectionOnline{
		min-height : calc( 497 var( --remBase ) );
		padding-top : calc( 12 var( --remBase ) );
	}
	#sectionOnline .catchcopy01{
		margin-top : calc( 24 var( --remBase ) );
	}
	#sectionOnline .text{
		width : calc( 600 var( --percentBase ) );
		margin-top : calc( 16 var( --remBase ) );
	}
	#sectionOnline .link01{
		margin-top : calc( 24 var( --remBase ) );
	}
	#sectionOnline .trapezoid{
		top : 0;
		height : calc( 497 var( --remBase ) );
	}
}
@media screen and ( 750px < width < 1440px ){
	#sectionOnline .trapezoid{
		left : calc( 622 var( --viewportBase ) );
		width : calc( 1044 var( --viewportBase ) );
		clip-path : polygon( calc( 112.859 * 100% / 1044 ) 0 , 100% 0 , 100% 100% , 0% 100% );
	}
}
@media print , screen and ( width >= 1440px ){
	#sectionOnline .trapezoid{
		right : 0;
		width : calc( 50% + 98px );
		clip-path : polygon( 112.859px 0 , 100% 0 , 100% 100% , 0% 100% );
	}
}
#servicesContact{
	position : relative;
	overflow-x : clip;
	overflow-y : hidden;
	background-color : white;
}
#servicesContact h2{
	color : #25292e;
}
#servicesContact a:nth-of-type( 1 ){
	display : grid;
	align-items : center;
}
#servicesContact a:nth-of-type( 1 )::before{
	display : block;
	font-size : 0;
	content : "";
	background : url( "../images/ui/icon/tel01.svg" ) left center / contain no-repeat;
}
#servicesContact a:nth-of-type( 2 ){
	display : grid;
	place-items : center;
	font-weight : 700;
	color : white;
	text-align : center;
	text-indent : .05em;
	letter-spacing : .05em;
	background-color : var( --color04 );
	border : solid 1px var( --color04 );
}
@media screen and ( width <= 750px ){
	#servicesContact{
		padding-top : calc( 52 var( --remBase ) );
		padding-bottom : calc( 56 var( --remBase ) );
		margin-bottom : calc( 56 var( --remBase ) );
	}
	#servicesContact picture{
		margin-top : calc( 42 var( --remBase ) );
	}
	#servicesContact picture img{
		width : 100%;
		height : auto;
	}
	#servicesContact a:nth-of-type( 1 ){
		grid-template-columns : calc( 36.67 var( --percentBase ) ) auto;
		column-gap : calc( 12 var( --percentBase ) );
		justify-content : center;
		font-size : 3rem;
	}
	#servicesContact a:nth-of-type( 1 )::before{
		height : calc( 47.49 var( --remBase ) );
	}
	#servicesContact a:nth-of-type( 2 ){
		width : calc( 198 var( --percentBase ) );
		height : calc( 78 var( --remBase ) );
		margin-inline : auto;
		margin-top : calc( 28 var( --remBase ) );
		font-size : 2rem;
	}
}
@media print , screen and ( width > 750px ){
	#servicesContact{
		min-height : calc( 391 var( --remBase ) );
		padding-top : calc( 129 var( --remBase ) );
	}
	#servicesContact :where( h2 , .box ){
		margin-left : calc( 124 var( --percentBase ) );
	}
	#servicesContact picture{
		position : absolute;
		top : calc( -41 var( --remBase ) );
		z-index : 0;
	}
	#servicesContact picture img{
		height : calc( 552 var( --remBase ) );
	}
	#servicesContact .box{
		display : grid;
		grid-template-columns : auto calc( 224 * 100% / 1276 );
		column-gap : calc( 16 * 100% / 1276 );
		align-items : center;
		justify-content : start;
		margin-top : calc( 36 var( --remBase ) );
	}
	#servicesContact a:nth-of-type( 1 ){
		grid-template-columns : calc( 70 var( --remBase ) ) auto;
		column-gap : calc( 8 var( --remBase ) );
		justify-content : start;
		font-size : 6rem;
	}
	#servicesContact a:nth-of-type( 1 )::before{
		height : calc( 57 var( --remBase ) );
	}
	#servicesContact a:nth-of-type( 2 ){
		height : calc( 68 var( --remBase ) );
		font-size : 2rem;
	}
}
@media screen and ( 750px < width < 1440px ){
	#servicesContact picture{
		left : calc( 909 var( --viewportBase ) );
	}
}
@media print , screen and ( width >= 1440px ){
	#servicesContact picture{
		left : calc( 50% + 189px );
	}
}
@media ( hover : hover ){
	#servicesContact a:nth-of-type( 2 ):hover{
		color : var( --color04 );
		background-color : white;
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#servicesContact a:nth-of-type( 2 ){
		transition : background-color var( --transitionBase ) , color var( --transitionBase );
	}
}
@media print , screen and ( width > 750px ){
	#servicesLinks{
		display : grid;
		grid-auto-flow : column;
		align-items : center;
		justify-content : center;
		margin-top : calc( 40 var( --remBase ) );
		margin-bottom : calc( 46 var( --remBase ) );
	}
	#servicesLinks li:not( :last-child ){
		display : grid;
		grid-template-columns : auto auto;
		align-items : center;
	}
	#servicesLinks li:not( :last-child ) a{
		height : calc( 34 var( --remBase ) );
		border-bottom-style : solid;
		border-bottom-width : calc( 2 var( --remBase ) );
	}
	#servicesLinks li:not( :last-child ) a:not( .is-current ){
		border-bottom-color : transparent;
	}
	#servicesLinks li:not( :last-child ) a.is-current{
		border-bottom-color : var( --color02 );
	}
	#servicesLinks li:not( :last-child )::after{
		display : block;
		margin-inline : calc( 16 var( --remBase ) );
		font-size : 1.6rem;
		line-height : 2;
		content : "｜";
	}
	#servicesLinks a{
		display : grid;
		place-items : center;
		font-size : 1.6rem;
		line-height : 2;
	}
	#servicesLinks li:last-child{
		width : calc( 120 var( --remBase ) );
		height : calc( 48 var( --remBase ) );
	}
	#servicesLinks li:last-child a{
		width : 100%;
		height : 100%;
		color : white;
		background-color : var( --color04 );
		border : solid 1px var( --color04 );
	}
}
@media ( hover : hover ){
	#servicesLinks li:not( :last-child ) a:hover{
		border-bottom-color : var( --color02 );
	}
	#servicesLinks li:last-child a:hover{
		color : var( --color04 );
		background-color : white;
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#servicesLinks li:not( :last-child ) a{
		transition : border-color var( --transitionBase );
	}
	#servicesLinks li:last-child a{
		transition : background-color var( --transitionBase ) , color var( --transitionBase );
	}
}

/* --------------------------------------------
LAYOUT
--------------------------------------------- */
@media screen and ( width <= 750px ){
	:where( .bg01,.bg-color0103 ):where( .layout0101 , .layout0102 ){
		padding-top : calc( 40 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	:where( .bg01,.bg-color0103 ):where( .layout0101 , .layout0102 ){
		padding-block : calc( 80 var( --remBase ) );
	}
}
@media screen and ( width <= 750px ){
	.bg01:where( .layout0101 , .layout0102 ){
		padding-bottom : calc( 25 var( --remBase ) );
	}
}
@media screen and ( width <= 750px ){
	.bg-color0103:where( .layout0101 , .layout0102 ){
		padding-bottom : calc( 47 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	:where( .layout0101 , .layout0102 ):not( .align-center ){
		grid-template-rows : auto 1fr;
	}
	:where( .layout0101 , .layout0102 ).align-center{
		align-items : center;
	}
	:where( .layout0101 , .layout0102 ).align-center :where( h1 , h2 , h3, h4 , h5, h6 ){
		align-self : end;
	}
	:where( .layout0101 , .layout0102 ).align-center .text{
		align-self : start;
	}
}
@media screen and ( width <= 750px ){
	.layout0101 p{
		margin-top : calc( 16 var( --remBase ) );
	}
	.layout0101 > picture{
		margin-top : calc( 16 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	.layout0101{
		display : grid;
		grid-template-columns : 1fr calc( 560 var( --percentBase ) );
		row-gap : calc( 16 var( --remBase ) );
		column-gap : calc( 40 var( --percentBase ) );
	}
	.layout0101 :where( h1 , h2 , h3, h4 , h5, h6 ){
		grid-row : 1;
		grid-column : 1;
	}
	.layout0101 p{
		grid-row : 2;
		grid-column : 1;
	}
	.layout0101 > picture{
		grid-row : 1/3;
		grid-column : 2;
	}
}
@media screen and ( width <= 750px ){
	.layout0102 p{
		margin-top : calc( 16 var( --remBase ) );
	}
	.layout0102 > picture{
		margin-top : calc( 16 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	.layout0102{
		display : grid;
		grid-template-columns : calc( 560 var( --percentBase ) ) 1fr ;
		row-gap : calc( 16 var( --remBase ) );
		column-gap : calc( 40 var( --percentBase ) );
	}
	.layout0102 :where( h1 , h2 , h3, h4 , h5, h6 ){
		grid-row : 1;
		grid-column : 2;
	}
	.layout0102 p{
		grid-row : 2;
		grid-column : 2;
	}
	.layout0102 > picture{
		grid-row : 1/3;
		grid-column : 1;
	}
}

/* --------------------------------------------
FOOTER
--------------------------------------------- */
@media screen and ( width <= 750px ){
	#toTop{
		right : calc( 16 var( --viewportBase ) );
		z-index : 9;
		display : grid;
		place-items : center;
		width : calc( 40 var( --viewportBase ) );
		height : calc( 40 var( --remBase ) );
		background-color : var( --color01 );
	}
	#toTop.is-fixed{
		position : fixed;
		bottom : 0;
	}
	#toTop:not( .is-fixed ){
		position : absolute;
		translate : 0 -100%;
		top : 0;
	}
	#toTop img{
		height : calc( 24 var( --remBase ) );
	}
}

/* --------------------------------------------
FAQ
--------------------------------------------- */
.faqList summary{
	display : grid;
	align-items : start;
	justify-content : start;
}
.faqList summary::-webkit-details-marker{
	display : none;
}
.faqList summary::before{
	display : grid;
	place-items : center;
	font-family : Alata , sans-serif;
	font-weight : 400;
	line-height : 1;
	color : white;
	content : "Q";
	background-color : var( --color01 );
}
.faqList .answer{
	display : grid;
	grid-template-rows : 0fr;
	grid-template-columns : 1fr;
}
.faqList .answer > div{
	display : grid;
	align-items : start;
	justify-content : start;
	overflow : hidden;
}
.faqList .answer > div::before{
	display : grid;
	place-items : center;
	font-family : Alata , sans-serif;
	font-weight : 400;
	line-height : 1;
	color : var( --color02 );
	content : "A";
	background-color : var( --color0203 );
}
.faqList .answer a{
	-webkit-text-decoration : underline;
	text-decoration : underline;
}
.faqList details.is-open .answer{
	grid-template-rows : 1fr;
}
@media screen and ( width <= 750px ){
	.faqList details{
		padding-top : calc( 16 var( --remBase ) );
	}
	.faqList details:not( :last-of-type ){
		padding-bottom : calc( 16 var( --remBase ) );
		border-bottom : solid 1px #d9d9d9;
	}
	.faqList summary{
		grid-template-columns : calc( 48 var( --percentBase ) ) auto;
		column-gap : calc( 8 var( --percentBase ) );
	}
	.faqList summary::before{
		height : calc( 48 var( --remBase ) );
		font-size : 2.6rem;
	}
	.faqList summary span{
		padding-block : calc( 9.6 var( --remBase ) );
		font-size : 1.6rem;
		line-height : 1.8;
	}
	.faqList .answer > div{
		grid-template-columns : calc( 48 var( --percentBase ) ) auto;
		column-gap : calc( 8 var( --percentBase ) );
	}
	.faqList .answer > div::before{
		height : calc( 48 var( --remBase ) );
		font-size : 2.6rem;
	}
	.faqList .answer > div > div{
		padding-top : calc( 9.6 var( --remBase ) );
		font-size : 1.6rem;
		line-height : 1.8;
	}
	.faqList details.is-open .answer > div{
		padding-top : calc( 8 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	.faqList details{
		padding-block : calc( 16 var( --remBase ) );
		border-bottom : solid 1px #d9d9d9;
	}
	.faqList summary{
		grid-template-columns : calc( 80 var( --percentBase ) ) auto;
		column-gap : calc( 18 var( --percentBase ) );
	}
	.faqList summary::before{
		height : calc( 80 var( --remBase ) );
		font-size : 3.2rem;
	}
	.faqList summary span{
		padding-block : calc( 20 var( --remBase ) );
		font-size : 2rem;
		line-height : 2;
	}
	.faqList .answer{
		margin-left : calc( 80 var( --percentBase ) );
	}
	.faqList .answer > div{
		grid-template-columns : calc( 80 * 100% / 1320 ) auto;
		column-gap : calc( 18 * 100% / 1320 );
	}
	.faqList .answer > div::before{
		height : calc( 80 var( --remBase ) );
		font-size : 3.2rem;
	}
	.faqList .answer > div > div{
		padding-top : calc( 24 var( --remBase ) );
		font-size : 1.6rem;
		line-height : 2;
	}
}
@media ( prefers-reduced-motion : no-preference ){
	.faqList .answer{
		transition : grid-template-rows var( --transitionBase );
	}
	.faqList .answer > div{
		transition : padding var( --transitionBase );
	}
}

/* --------------------------------------------
PAGINATION
--------------------------------------------- */
.pagination{
	position : relative;
	left : 50%;
	display : inline-grid;
	grid-auto-flow : column;
	translate : -50% 0;
}
.pagination a , .pagination span{
	display : grid;
	place-items : center;
}
.pagination .prev{
	position : absolute;
	left : 0;
}
.pagination .next{
	position : absolute;
	right : 0;
}
.pagination{
	grid-auto-columns : calc( 40 var( --remBase ) );
	column-gap : calc( 8 var( --remBase ) );
}
.pagination :is( a , span ){
	height : calc( 40 var( --remBase ) );
}
.pagination :is( .prev , .next , .current ){
	background-color : var( --color01 );
}
.pagination :is( .prev , .next ){
	width : calc( 40 var( --remBase ) );
	border : solid 1px var( --color01 );
}
.pagination :is( .prev , .next ) img{
	height : calc( 14 var( --remBase ) );
	filter : var( --filterWhite );
}
.pagination a:not( .prev,.next ) , .pagination span{
	font-size : 1.6rem;
}
.pagination a:not( .prev,.next ){
	background-color : var( --color0103 );
}
.pagination .current{
	color : white;
}
.pagination .prev{
	left : calc( -48 var( --remBase ) );
}
.pagination .next{
	right : calc( -48 var( --remBase ) );
}
@media ( hover : hover ){
	.pagination a:not( .prev,.next ):hover{
		color : white;
		background-color : var( --color01 );
	}
	.pagination a:is( .prev , .next ):hover{
		background-color : white;
	}
	.pagination a:is( .prev , .next ):hover img{
		filter : var( --filterColor01 );
	}
}
@media ( prefers-reduced-motion : no-preference ){
	.pagination a:not( .prev,.next ){
		transition : background-color var( --transitionBase ) , color var( --transitionBase );
	}
	.pagination a:is( .prev , .next ){
		transition : background-color var( --transitionBase );
	}
	.pagination a:is( .prev , .next )::after{
		transition : filter var( --transitionBase );
	}
}
.paginatinArchive{
	display : grid;
	grid-template-rows : calc( 40 var( --remBase ) );
	grid-template-columns : calc( 40 var( --remBase ) ) calc( 136 var( --remBase ) ) calc( 40 var( --remBase ) );
	column-gap : calc( 8 var( --remBase ) );
	align-items : center;
	justify-content : center;
}
.paginatinArchive a{
	display : grid;
	place-items : center;
	height : 100%;
}
.paginatinArchive :where( .prev , .next ){
	display : grid;
	grid-row : 1;
	place-items : center;
	background-color : var( --color01 );
	border : solid 1px var( --color01 );
}
.paginatinArchive :where( .prev , .next ) img{
	height : calc( 14 var( --remBase ) );
	filter : var( --filterWhite );
}
.paginatinArchive .prev{
	grid-column : 1;
}
.paginatinArchive .archive{
	grid-row : 1;
	grid-column : 2;
	font-size : 1.6rem;
	background-color : var( --color0103 );
}
.paginatinArchive .next{
	grid-column : 3;
}

/* --------------------------------------------
FOOTER
--------------------------------------------- */
@media screen and ( width <= 750px ){
	#footer{
		background-color : var( --color01 );
	}
	#footer .copyrights{
		position : relative;
		padding-top : calc( 48 var( --remBase ) );
		padding-bottom : calc( 92 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#footer{
		padding-top : calc( 48 var( --remBase ) );
		border-top : solid calc( 4 var( --remBase ) ) #d9d9d9;
	}
	#footer .box{
		display : grid;
		grid-template-columns : auto auto;
		align-items : center;
		justify-content : space-between;
	}
	#footer .logo{
		display : block;
		grid-row : 1;
		grid-column : 1;
		width : fit-content;
	}
	#footer .logo img{
		height : calc( 83 var( --remBase ) );
	}
	#footer .nav{
		display : grid;
		grid-auto-flow : column;
		column-gap : calc( 40 var( --remBase ) );
		align-items : center;
		justify-content : end;
	}
	#footer .nav > li:not( :last-child ) a{
		display : grid;
		align-items : center;
		justify-content : center;
		height : calc( 32 var( --remBase ) );
		font-size : 1.6rem;
		line-height : 2;
	}
	#footer .nav > li:last-child{
		width : calc( 200 var( --remBase ) );
		height : calc( 48 var( --remBase ) );
	}
	#footer .nav > li:last-child a{
		display : grid;
		align-items : center;
		justify-content : center;
		width : 100%;
		height : 100%;
		font-size : 1.6rem;
		font-weight : 500;
		line-height : 2;
		color : white;
		background-color : var( --color01 );
		border : solid 1px var( --color01 );
	}
	#footer .services{
		display : grid;
		grid-auto-flow : column;
		column-gap : calc( 24 var( --percentBase ) );
		align-items : center;
		justify-content : end;
		margin-top : calc( 8 var( --remBase ) );
	}
	#footer .services a{
		height : calc( 34 var( --remBase ) );
		font-size : 1.6rem;
		line-height : 2;
	}
	#footer .subs{
		display : grid;
		grid-auto-flow : column;
		align-items : center;
		justify-content : end;
		padding-top : calc( 18 var( --remBase ) );
		padding-bottom : calc( 29 var( --remBase ) );
		margin-top : calc( 42 var( --remBase ) );
		border-top : solid 1px #aaa;
	}
	#footer .subs li + li::before{
		margin-inline : calc( 16 var( --remBase ) );
		font-size : 1.6rem;
		line-height : 1.5;
		content : "｜";
	}
	#footer .subs a{
		height : calc( 24 var( --remBase ) );
		font-size : 1.6rem;
		line-height : 1.5;
	}
	#footer .copyrights{
		display : grid;
		align-items : center;
		justify-content : end;
		height : calc( 106 var( --remBase ) );
		border-image-source : linear-gradient( var( --color01 ) , var( --color01 ) );
		border-image-slice : 0 fill;
		border-image-outset : 0 100vw 0 100vw;
	}
}
#copyright{
	display : grid;
	place-items : center;
	color : white;
	text-align : center;
}
@media screen and ( width <= 750px ){
	#copyright{
		font-size : 1.6rem;
		font-weight : 500;
		line-height : 1.7;
	}
}
@media print , screen and ( width > 750px ){
	#copyright{
		font-family : Quattrocento , serif;
		font-size : 2rem;
		line-height : 1.5;
	}
}
@media ( hover : hover ){
	#footer .nav > li:last-child a:hover{
		color : var( --color01 );
		background-color : white;
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#footer .nav > li:last-child a{
		transition : background var( --transitionBase ) , color var( --transitionBase );
	}
}