@charset "UTF-8";

/* --------------------------------------------
LAYOUT
--------------------------------------------- */
:where( .layout01 , .layout0102 ){
	position : relative;
	overflow-x : clip;
}
:where( .layout01 , .layout0102 )::before{
	position : absolute;
	z-index : -1;
	display : block;
	width : 100%;
	font-size : 0;
	content : "";
	background-repeat : no-repeat;
	background-position : center;
	background-size : contain;
}
:where( .layout01 , .layout0102 ) .pics{
	position : relative;
}
:where( .layout01 , .layout0102 ) .pics > p{
	position : absolute;
}
@media screen and ( width <= 750px ){
	:where( .layout01 , .layout0102 ) > p{
		margin-top : calc( 8 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	:where( .layout01 , .layout0102 ){
		display : grid;
		column-gap : calc( 40 var( --percentBase ) );
	}
}
.layout01::before{
	background-color : var( --color0103 );
}
@media screen and ( width <= 750px ){
	.layout01::before{
		top : calc( 117 var( --remBase ) );
		left : 0;
		width : calc( 320 var( --viewportBase ) );
		height : calc( 339 var( --remBase ) );
	}
	.layout01 > :where( h2 , h3 , h4 , h5 , h6 ){
		margin-top : calc( 16 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	.layout01{
		min-height : calc( 633 var( --remBase ) );
	}
	.layout01::before{
		top : calc( 56 var( --remBase ) );
		height : calc( 577 var( --remBase ) );
	}
	.layout01 > :where( picture , .pics ){
		grid-row : 1 / -1;
	}
	.layout01 > :where( h2 , h3 , h4 , h5 , h6 ){
		grid-row : 2;
	}
	.layout01 > p{
		grid-row : 4;
	}
	.layout01.align-start , .layout01:not( .align-center ){
		grid-template-rows : calc( 56 var( --remBase ) ) auto calc( 16 var( --remBase ) ) auto 1fr;
	}
	.layout01.align-center{
		grid-template-rows : 1fr auto calc( 16 var( --remBase ) ) auto 1fr;
	}
	.layout01.forward , .layout01:not( .reverse ){
		grid-template-columns : calc( 920 var( --percentBase ) ) calc( 760 var( --percentBase ) );
		justify-content : start;
	}
	.layout01 > :where( picture , .pics ){
		grid-column : 1;
	}
	.layout01 > :where( h2 , h3 , h4 , h5 , h6 , p ){
		grid-column : 2;
	}
	.layout01.reverse{
		grid-template-columns : calc( 760 var( --percentBase ) ) calc( 920 var( --percentBase ) ) ;
		justify-content : end;
	}
	.layout01.reverse > :where( picture , .pics ){
		grid-column : 2;
	}
	.layout01.reverse > :where( h2 , h3 , h4 , h5 , h6 , p ){
		grid-column : 1;
	}
}
@media screen and ( 750px < width < 1960px ) , print{
	.layout01::before{
		width : calc( 1595 var( --viewportBase ) );
	}
	.layout01.forward::before , .layout01:not( .reverse )::before{
		left : calc( 280 var( --viewportBase ) );
	}
	.layout01.reverse::before{
		left : 0;
	}
}
@media screen and ( width >= 1960px ){
	.layout01::before{
		width : 1595px;
	}
	.layout01.forward::before , .layout01:not( .reverse )::before{
		left : calc( 50% - 660px );
	}
	.layout01.reverse::before{
		left : calc( 50% - 980px );
	}
}
.layout0102{
	align-items : start;
}
.layout0102 .splide__slide picture{
	width : 100%;
	height : 100%;
}
.layout0102 .splide__slide picture img{
	width : 100%;
	height : 100%;
	object-fit : cover;
	object-position : center;
}
.layout0102 figure{
	display : grid;
}
.layout0102.forward::before , .layout0102:not( .reverse )::before{
	background-color : var( --color0103 );
}
.layout0102.parts01::before{
	background-image : url( "../images/ui/parts/layout010201.svg" );
}
.layout0102.parts02::before{
	background-image : url( "../images/ui/parts/layout010202.svg" );
}
@media screen and ( width <= 750px ){
	.layout0102.forward , .layout0102:not( .reverse ){
		min-height : calc( 627 var( --remBase ) );
	}
		.ichikawa .layout0102.forward , .ichikawa .layout0102:not( .reverse ) , .seiseki .layout0102.forward , .seiseki .layout0102:not( .reverse ){
		min-height : calc( 360 var( --remBase ) );
		}
	.layout0102.forward::before , .layout0102:not( .reverse )::before{
		top : calc( 112 var( --remBase ) );
		left : 0;
		width : calc( 320 var( --viewportBase ) );
		height : calc( 515 var( --remBase ) );
	}
		.ichikawa .layout0102.forward::before , .ichikawa .layout0102:not( .reverse )::before , .seiseki .layout0102.forward::before , .seiseki .layout0102:not( .reverse )::before{
			top : calc( 112 var( --remBase ) );
			left : 0;
			width : calc( 320 var( --viewportBase ) );
			height : calc( 300 var( --remBase ) );
		}
	.layout0102 > :where( h2 , h3 , h4 , h5 , h6 ){
		margin-top : calc( 8 var( --remBase ) );
	}
	.layout0102.reverse.parts01{
		min-height : calc( 662.56 var( --remBase ) );
		padding-top : calc( 32.24 var( --remBase ) );
	}
		.ichikawa .layout0102.reverse.parts01 , .seiseki .layout0102.reverse.parts01{
			min-height : calc( 400 var( --remBase ) );
			padding-top : calc( 32.24 var( --remBase ) );
			padding-bottom : calc( 80 var( --remBase ) );
		}
	.layout0102.reverse.parts01::before{
		top : 0;
		left : calc( -137.23 var( --viewportBase ) );
		width : calc( 773.6 var( --viewportBase ) );
		height : calc( 662.56 var( --remBase ) );
	}
		.ichikawa .layout0102.reverse.parts01::before , .seiseki .layout0102.reverse.parts01::before{
			top : 0;
			left : calc( -40.23 var( --viewportBase ) );
			width : calc( 500.6 var( --viewportBase ) );
			height : calc( 500 var( --remBase ) );
		}
	.layout0102.reverse.parts02{
		min-height : calc( 672.61 var( --remBase ) );
		padding-top : calc( 47.61 var( --remBase ) );
	}
	.layout0102.reverse.parts02::before{
		top : 0;
		left : calc( -316 var( --viewportBase ) );
		width : calc( 724 var( --viewportBase ) );
		height : calc( 672.61 var( --remBase ) );
	}
	.layout0102.reverse.parts03{
		min-height : calc( 710 var( --remBase ) );
	}
	.layout0102.reverse.parts03::before{
		top : calc( 67 var( --remBase ) );
		left : calc( -225 var( --viewportBase ) );
		width : calc( 858 var( --viewportBase ) );
		height : calc( 643 var( --remBase ) );
		background-image : url( "../images/ui/parts/layout010203_sp.webp" );
	}
}
@media screen and ( width > 750px ) , print{
	.layout0102{
		grid-template-rows : calc( 56 var( --remBase ) ) auto calc( 16 var( --remBase ) ) auto auto 1fr;
	}
	.layout0102 > :where( picture , .splide__track ){
		grid-row : 1/7;
		align-self : start;
	}
	.layout0102 > :where( h2 , h3 , h4 , h5 , h6 ){
		grid-row : 2;
	}
	.layout0102 > p:first-of-type{
		grid-row : 4;
	}
	.layout0102 > p:nth-of-type( 2 ){
		grid-row : 5;
	}
	.layout0102.forward , .layout0102:not( .reverse ){
		grid-template-columns : calc( 920 var( --percentBase ) ) calc( 760 var( --percentBase ) ) 1fr;
		justify-content : start;
	}
	.layout0102 > :where( picture , .pics , .splide__track ){
		grid-column : 1;
	}
	.layout0102 > :where( h2 , h3 , h4 , h5 , h6 , p:first-of-type ){
		grid-column : 2;
	}
	.layout0102.forward , .layout0102:not( .reverse ){
		min-height : calc( 617 var( --remBase ) );
	}
	.layout0102.forward::before , .layout0102:not( .reverse )::before{
		top : calc( 40 var( --remBase ) );
		height : calc( 577 var( --remBase ) );
	}
	.layout0102.forward > p:nth-of-type( 2 ) , .layout0102:not( .reverse ) > p:nth-of-type( 2 ){
		grid-column : 2/4;
	}
	.layout0102.reverse{
		grid-template-columns : 1fr calc( 760 var( --percentBase ) ) calc( 920 var( --percentBase ) ) ;
		justify-content : end;
	}
	.layout0102.reverse > :where( picture , .pics , .splide__track ){
		grid-column : 3;
	}
	.layout0102.reverse > :where( h2 , h3 , h4 , h5 , h6 , p:first-of-type ){
		grid-column : 2;
	}
	.layout0102.reverse > p:nth-of-type( 2 ){
		grid-column : 1/3;
	}
	.layout0102.reverse.parts01{
		min-height : calc( 828.52 var( --remBase ) );
		padding-top : calc( 108.72 var( --remBase ) );
	}
	.layout0102.reverse.parts01::before{
		top : 0;
		height : calc( 828.52 var( --remBase ) );
	}
	.layout0102.reverse.parts02{
		min-height : calc( 813.89 var( --remBase ) );
		padding-top : calc( 93 var( --remBase ) );
	}
	.layout0102.reverse.parts02::before{
		top : 0;
		height : calc( 813.89 var( --remBase ) );
	}
	.layout0102.reverse.parts03{
		min-height : calc( 862 var( --remBase ) );
		padding-top : calc( 129 var( --remBase ) );
	}
	.layout0102.reverse.parts03::before{
		top : 0;
		height : calc( 862 var( --remBase ) );
		background-image : url( "../images/ui/parts/layout010203_pc.webp" );
	}
}
@media screen and ( 750px < width < 1960px ) , print{
	.layout0102.forward::before , .layout0102:not( .reverse )::before{
		left : calc( 325 var( --viewportBase ) );
		width : calc( 1595 var( --viewportBase ) );
	}
	.layout0102.reverse.parts01::before{
		left : calc( 134.76 var( --viewportBase ) );
		width : calc( 967.38 var( --viewportBase ) );
	}
	.layout0102.reverse.parts02::before{
		left : calc( -140 var( --viewportBase ) );
		width : calc( 930.01 var( --viewportBase ) );
	}
	.layout0102.reverse.parts03::before{
		left : calc( -151 var( --viewportBase ) );
		width : calc( 1150 var( --viewportBase ) );
	}
}
@media screen and ( width >= 1960px ){
	.layout0102.forward::before , .layout0102:not( .reverse )::before{
		right : 0;
		width : calc( 50% + 615px );
	}
	.layout0102.reverse.parts01::before{
		left : calc( 50% - ( ( 980px - 134.76px ) ) );
		width : 967.38px;
	}
	.layout0102.reverse.parts02::before{
		left : calc( 50% - ( ( 980px + 140px ) ) );
		width : 930.01px;
	}
	.layout0102.reverse.parts03::before{
		left : calc( 50% + ( ( -980px - 151px ) ) );
		width : 1150px;
	}
}
.layout02 .splide__slide{
	width : 100%;
}
.layout02 .splide__slide img{
	width : 100%;
	height : 100%;
	object-fit : cover;
	object-position : center;
}
.layout02 .splide__slide > :where( h3 , h4 , h5 , h6 ){
	font-family : "Noto Sans JP" , sans-serif;
	font-weight : 700;
	line-height : 2;
}
.layout02 .splide__slide .text .inline{
	display : block;
	font-size : 0;
}
.layout02 .splide__slide .text .inline > *{
	display : inline;
	line-height : 1.7;
}
@media screen and ( width <= 750px ){
	.layout02{
		padding-top : calc( 40 var( --remBase ) );
		padding-bottom : calc( 32 var( --remBase ) );
		background-color : var( --color0103 );
	}
	.layout02 > :where( h2 , h3 , h4 , h5 , h6 , .texts ){
		padding-inline : calc( 16 var( --viewportBase ) );
	}
	.layout02 .texts p{
		margin-top : calc( 8 var( --remBase ) );
	}
	.layout02 .splide__track{
		margin-left : calc( 16 var( --viewportBase ) );
	}
	.layout02 > :where( h2 , h3 , h4 , h5 , h6 ) + .splide__track{
		margin-top : calc( 16 var( --remBase ) );
	}
	.layout02 > .texts + .splide__track{
		margin-top : calc( 8 var( --remBase ) );
	}
	.layout02 .splide__slide img{
		height : calc( 167 var( --remBase ) );
	}
	.layout02 .splide__slide :where( h3 , h4 , h5 , h6 ){
		font-size : 1.4rem;
	}
	.layout02 .splide__slide :where( p ){
		font-size : 1.4rem;
		line-height: 1.5;
	}
	.layout02 .text .inline > *{
		font-size : 1.4rem;
	}
}
@media screen and ( width > 750px ) , print{
	.layout02{
		display : grid;
		grid-template-rows : 1fr auto 1fr;
		align-content : center;
		min-height : calc( 566 var( --remBase ) );
		padding-top : calc( 40 var( --remBase ) );
		padding-bottom : calc( 62 var( --remBase ) );
	}
	.layout02:has( .texts ){
		align-items : start;
	}
	.layout02:not( :has( .texts ) ) , .layout02.align-center{
		align-items : center;
	}
	.layout02::before{
		position : absolute;
		top : 0;
		z-index : -1;
		display : block;
		width : 100%;
		height : 100%;
		font-size : 0;
		content : "";
		background-color : var( --color0103 );
		background-repeat : no-repeat;
		background-position : center;
		background-size : contain;
	}
	.layout02 > :where( h2 , h3 , h4 , h5 , h6 ){
		grid-row : 2;
	}
	.layout02 .texts{
		grid-row : 1/4;
		padding-top : calc( 56 var( --remBase ) );
	}
	.layout02 .texts p{
		margin-top : calc( 16 var( --remBase ) );
	}
	.layout02 .splide__track{
		grid-row : 1/-1;
		grid-column : -1;
	}
	.layout02 .splide__slide img{
		height : calc( 274 var( --remBase ) );
	}
	.layout02 .splide__slide > :where( h3 , h4 , h5 , h6 ){
		font-size : 2rem;
	}
	.layout02 .splide__slide picture + :where( p , . text ){
		margin-top : calc( 8 var( --remBase ) );
	}
	.layout02 .splide__slide picture + :where( h3 , h4 , h5 , h6 ){
		margin-top : calc( 8 var( --remBase ) );
	}
	.layout02 .text .inline > *{
		font-size : 2rem;
	}
	.layout02 .splide__slide p{
		line-height: 1.5;
	}
}
@media screen and ( 750px < width < 1960px ) , print{
	.layout02{
		grid-template-columns : calc( 40 var( --viewportBase ) ) calc( 600 var( --viewportBase ) ) calc( 40 var( --viewportBase ) ) 1fr;
	}
	.layout02::before{
		left : calc( 200 var( --viewportBase ) );
		width : calc( 1772 var( --viewportBase ) );
	}
	.layout02 > :where( h2 , h3 , h4 , h5 , h6 , .texts ){
		grid-column : 2;
	}
	.layout02 .splide__slide p{
		font-size: 1.6rem;
	}
}
@media screen and ( 750px < width <= 1200px ) {
	.layout02 .splide__slide p{
		font-size:max(1.2rem,12px) !important;
	}
}@media screen and ( 1200px < width < 1568px ) {
	.layout02 .splide__slide p{
		font-size:max(1.4rem,14px) !important;
	}
}
@media screen and ( width >= 1960px ){
	.layout02{
		grid-template-columns : calc( ( 100% - 1960px ) / 2 ) 40px 600px 40px 1fr;
	}
	.layout02::before{
		right : 0;
		width : calc( 50% + 780px );
		width : 1772px;
	}
	.layout02 > :where( h2 , h3 , h4 , h5 , h6 , .texts ){
		grid-column : 3;
	}
	.layout02 .splide__slide p{
		font-size: 1.6rem;
	}
}
@media screen and ( 750px < width <= 1200px ) {
	.layout02 .splide__slide > :where( h3 , h4 , h5 , h6 ){
		font-size:max(1.4rem,14px) ;
	}
	.layout02 .text .inline > *{
		font-size:max(1.4rem,14px) ;
	}
}@media screen and ( 1200px < width < 1568px ) {
	.layout02 .splide__slide > :where( h3 , h4 , h5 , h6 ){
		font-size:max(1.6rem,16px) ;
	}
	.layout02 .text .inline > *{
		font-size:max(1.6rem,16px) ;
	}
}
/* --------------------------------------------
SIDEBAR
--------------------------------------------- */
#sidebar01{
	background-color : white;
}
#sidebar01 h4{
	display : grid;
	align-items : center;
	justify-content : start;
	font-family : "Noto Sans JP" , sans-serif;
	color : white;
	background-color : var( --color01 );
}
#sidebar01 :where( ul , ol ){
	padding-block : calc( 24 var( --remBase ) );
}
#sidebar01 a{
	display : block;
}
@media screen and ( width <= 750px ){
	#sidebar01{
		margin-top : calc( 56 var( --remBase ) );
	}
	#sidebar01 :where( h4 , ul , ol ){
		padding-inline : calc( 24 var( --percentBase ) );
	}
	#sidebar01 h4{
		height : calc( 70 var( --remBase ) );
		font-size : 2rem;
		line-height : 1.3;
	}
	#sidebar01 li + li{
		margin-top : calc( 16 var( --remBase ) );
	}
	#sidebar01 a{
		font-size : 1.4rem;
		line-height : 1.5;
	}
}
@media screen and ( width > 750px ) , print{
	#sidebar01{
		position : sticky;
		top : var( --headerHeight );
	}
	#sidebar01 :where( h4 , ul , ol ){
		padding-inline : calc( 24 * 100% / 440 );
	}
	#sidebar01 h4{
		height : calc( 80 var( --remBase ) );
		font-size : 2.4rem;
		line-height : 2;
	}
	#sidebar01 li + li{
		margin-top : calc( 10 var( --remBase ) );
	}
	#sidebar01 a{
		font-size : 2rem;
		line-height : 2;
	}
}

/* --------------------------------------------
DIALOG
--------------------------------------------- */
:where( .dialog01 , .dialog02 ){
	position : fixed;
	top : 0;
	left : 0;
	z-index : 15;
	align-content : center;
	justify-content : center;
	width : 100%;
	height : 100dvh;
	overflow-y : auto;
	background-color : color-mix( in srgb , #fff 90% , transparent );
}
:where( .dialog01 , .dialog02 )[open]{
	display : grid;
	background: rgba(0,0,0,.7);
}
:where( .dialog01 , .dialog02 ) .close{
	position : absolute;
	aspect-ratio : 1;
}
@media screen and ( width <= 750px ){
	:where( .dialog01 , .dialog02 ){
		padding-block : calc( 16 var( --remBase ) );
		padding-inline : calc( 16 var( --viewportBase ) );
	}
	:where( .dialog01 , .dialog02 ) .close{
		top : calc( 16 var( --remBase ) );
		right : calc( 16 var( --viewportBase ) );
	}
	:where( .dialog01 , .dialog02 ) .close img{
		height : calc( 16 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	:where( .dialog01 , .dialog02 ){
		padding-block : calc( 40 var( --remBase ) );
	}
	:where( .dialog01 , .dialog02 ) .close{
		top : calc( 40 var( --remBase ) );
	}
	:where( .dialog01 , .dialog02 ) .close img{
		height : calc( 28 var( --remBase ) );
	}
}
@media screen and ( 750px < width < 1960px ) , print{
	:where( .dialog01 , .dialog02 ){
		padding-inline : calc( 40 var( --viewportBase ) );
	}
	:where( .dialog01 , .dialog02 ) .close{
		right : calc( 40 var( --viewportBase ) );
	}
}
@media screen and ( width >= 1960px ){
	:where( .dialog01 , .dialog02 ){
		padding-inline : 40px;
	}
	:where( .dialog01 , .dialog02 ) .close{
		right : 40px;
	}
}
.dialog01 .splide__slide{
	display : grid;
	align-items : center;
	justify-content : center;
}
.dialog01 picture{
	width : fit-content;
	margin-inline : auto;
}
.dialog01 picture img{
	max-width : 100%;
	height : auto;
}
.dialog02 picture img{
	max-width : 100%;
	height : auto;
}
.dialog02 iframe{
	max-width : 100%;
	height : auto;
	aspect-ratio : 16/9;
}

/* --------------------------------------------
BREAD CRUMB
--------------------------------------------- */
#breadcrumb{
	padding-block : calc( 16 var( --remBase ) );
}
#breadcrumb ol{
	display : flex;
	flex-wrap : wrap;
	row-gap : calc( 8 var( --remBase ) );
	column-gap : calc( 8 var( --percentBase ) );
}
#breadcrumb li:not( :last-child ){
	display : grid;
	grid-template-columns : auto auto;
	column-gap : calc( 8 var( --remBase ) );
	align-items : baseline;
}
#breadcrumb li:not( :last-child )::after{
	content : "／";
}
@media screen and ( width <= 750px ){
	#breadcrumb li{
		font-size : 1.4rem;
		line-height : 1.5;
	}
}
@media screen and ( width > 750px ) , print{
	#breadcrumb li{
		font-size : 1.8rem;
		line-height : 1.5;
	}
}
/* --------------------------------------------
FOOTER
--------------------------------------------- */
#footer{
	position : relative;
}
@media screen and ( width <= 750px ){
	#footer{
		display : grid;
		grid-template-columns : 1fr;
		grid-auto-flow : row;
	}
}
@media screen and ( width <= 750px ){
	#footer01{
		display : contents;
	}
}
@media screen and ( width > 750px ) , print{
	#footer01{
		display : grid;
		grid-template-columns : auto 1fr auto calc( 28 var( --percentBase ) ) calc( 600 var( --percentBase ) );
		align-items : center;
		padding-block : calc( 36 var( --remBase ) );
		background-color : var( --color0102 );
	}
	#footer-kaga {
		display: flex;
		flex-wrap: wrap;
		align-items : center;
		justify-content: space-between;
		padding-block : calc( 36 var( --remBase ) );
		background-color : var( --color0102 );
	}
}
#footerLinks{
	display : grid;
	grid-template-columns : repeat( 2 , 50% );
	justify-content : space-between;
	font-family : "Zen Kaku Gothic New" , sans-serif;
}
#footerLinks li{
	width : 100%;
	height : 100%;
}
#footerLinks a{
	display : grid;
	grid-template-columns : auto auto;
	align-items : center;
	width : 100%;
	height : 100%;
	color : black;
	background-color : white;
}
#footerLinks a::before{
	display : block;
	width : 100%;
	font-size : 0;
	content : "";
	filter : var( --filterColor0102 );
	background-repeat : no-repeat;
	background-position : left center;
	background-size : contain;
}
#footerLinks li.request a::before{
	background-image : url( "../images/ui/icon/edit01.svg" );
}
#footerLinks li.apply a::before{
	background-image : url( "../images/ui/icon/document01.svg" );
}
#footerLinks li.contact a::before{
	background-image : url( "../images/ui/icon/email02.svg" );
}
@media screen and ( width <= 750px ){
	#footerLinks{
		grid-template-rows : calc( 64 var( --remBase ) );
		grid-template-columns : repeat( 3 , 33% );
		grid-row : 1;
		grid-column : 1;
		padding-top : calc( 16 var( --remBase ) );
		padding-bottom : calc( 16 var( --remBase ) );
		background-color : var( --color01 );
	}
	#footerLinks a{
		justify-content : center;
		font-size : 1.8rem;
	}
	#footerLinks li a::before{
		display: none;
	}
	#footerLinks li.request a{
	}
	#footerLinks li.apply a{
	}
	#footerLinks li.contact a{
	}
}
@media screen and ( width > 750px ) , print{
	#footerLinks{
		grid-template-rows: calc(73 var(--remBase));
        grid-template-columns: repeat(3, 33%);
        grid-row: 1;
        grid-column: 5;
        column-gap: calc(4 var(--remBase));
	}
	#footerLinks a{
		justify-content : center;
		font-size : 1.8rem;
	}
	#footerLinks li.request a{
		column-gap : calc( 12.57 * 100% / 222 );
	}
	#footerLinks li.request a::before{
		height : calc( 32 var( --remBase ) );
		aspect-ratio : 25/32;
	}
	#footerLinks li.apply a{
		column-gap : calc( 6.86 * 100% / 222 );
	}
	#footerLinks li.apply a::before{
		height : calc( 31 var( --remBase ) );
		aspect-ratio : 29/31;
	}
	#footerLinks li.contact a{
		column-gap : calc( 6.86 * 100% / 222 );
	}
	#footerLinks li.contact a::before{
		height : calc( 32 var( --remBase ) );
		aspect-ratio : 25/32;
	}
}
#footerContacts{
	font-family : "Zen Kaku Gothic New" , sans-serif;
}
#footerContacts a{
	display : grid;
	grid-template-columns : auto auto;
	align-items : center;
	justify-content : start;
}
#footerContacts a::before{
	display : block;
	width : 100%;
	font-size : 0;
	content : "";
	filter : var( --filterWhite );
	background-repeat : no-repeat;
	background-position : left center;
	background-size : contain;
}
#footerContacts li:nth-child( 1 ) a{
	letter-spacing : .1em;
}
#footerContacts li:nth-child( 1 ) a::before{
	background-image : url( "../images/ui/icon/tel01.svg" );
}
#footerContacts li.mail a::before{
	background-image : url( "../images/ui/icon/email01.svg" );
}
#footerContacts li.line a::before{
	background-image : url( "../images/ui/icon/comment.svg" );
}
@media screen and ( width <= 750px ){
	#footerContacts{
		display : grid;
		padding-bottom : calc( 8 var( --remBase ) );
		color : white;
		background-color : var( --color01 );
	}
	#footerContacts figcaption{
		display : grid;
		grid-row : 1;
		grid-column : 1;
		align-items : center;
		justify-content : center;
		height : calc( 44 var( --remBase ) );
		font-size : 1.4rem;
		font-size : 2.2rem;
	}
	#footerContacts ul{
		display : flex;
		justify-content: center;
		align-items: center;
		column-gap: calc( 8 var( --remBase ) );
	}
	#footerContacts li:nth-child( 1 ){
	}
	#footerContacts li:nth-child( 1 ) a{
		column-gap : calc( 4 var( --remBase ) );
		align-content : center;
		justify-content : center;
		height : calc( 48 var( --remBase ) );
		font-size : 2.4rem;
	}
	#footerContacts li:nth-child( 1 ) a::before{
		height : calc( 21 var( --remBase ) );
		aspect-ratio : 22/21;
	}
	#footerContacts li.mail{
	}
	#footerContacts li.mail a{
		column-gap : calc( 4 * 100% / 184 );
		align-content : center;
		justify-content : center;
		height : calc( 40 var( --remBase ) );
		font-size : 1.8rem;
		white-space: nowrap;
	}
	#footerContacts li.mail a::before{
		height : calc( 18 var( --remBase ) );
		aspect-ratio : 24/18;
	}
	#footerContacts li.mail{
		position : relative;
		grid-row : 2;
		grid-column : 3;
	}
	#footerContacts li.line::before{
		position : absolute;
		top : 0;
		left : -.5px;
		display : block;
		width : 1px;
		height : 100%;
		font-size : 0;
		content : "";
		background-color : white;
	}
	#footerContacts li.line a{
		column-gap : calc( 4 * 100% / 184 );
		align-content : center;
		justify-content : center;
		height : calc( 40 var( --remBase ) );
		font-size : 1.8rem;
		white-space: nowrap;
	}
	#footerContacts li.line a::before{
		height : calc( 23 var( --remBase ) );
		aspect-ratio : 24/23;
	}
}
@media screen and ( width > 750px ) , print{
	#footerContacts{
		display : grid;
		grid-row : 1;
		grid-column : 3;
		grid-auto-flow : column;
		column-gap : calc( 24 var( --remBase ) );
		align-items : center;
		justify-content : start;
		color : white;
	}
	#footerContacts figcaption{
		font-size : 2.2rem;
	}
	#footerContacts ul{
		display : grid;
		grid-auto-flow : column;
		column-gap : calc( 24 var( --remBase ) );
		align-items : center;
		justify-content : start;
	}
	#footerContacts li:nth-child( 1 ) a{
		column-gap : calc( 4 var( --remBase ) );
		font-size : 2.4rem;
	}
	#footerContacts li:nth-child( 1 ) a::before{
		height : calc( 21 var( --remBase ) );
		aspect-ratio : 22/21;
	}
	#footerContacts li.mail a{
		column-gap : calc( 4 var( --remBase ) );
		font-size : 1.8rem;
	}
	#footerContacts li.mail a::before{
		height : calc( 18 var( --remBase ) );
		aspect-ratio : 24/18;
	}
	#footerContacts li.line a{
		column-gap : calc( 2.5 var( --remBase ) );
		font-size : 1.8rem;
	}
	#footerContacts li.line a::before{
		height : calc( 23 var( --remBase ) );
		aspect-ratio : 24/23;
	}
}
@media screen and ( 750px < width <= 1200px ) {
	#footerContacts figcaption{
		font-size:max(2.2rem,16px) !important;
	}
}@media screen and ( 1200px < width < 1568px ) {
	#footerContacts figcaption{
		font-size:max(2.2rem,16px) !important;
	}
}

@media screen and ( width <= 750px ){
	#footerMe{
		height : calc( 250 var( --remBase ) );
		color : white;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
		.kitazono #footerMe{
			background : url( "../images/footer/bg_kitazono_sp.webp" ) center / cover no-repeat;
		}
		.seiseki #footerMe{
			background : url( "../images/footer/bg_seiseki_sp.webp" ) center / cover no-repeat;
		}
		.ichikawa #footerMe{
			background : url( "../images/footer/bg_ichikawa_sp.webp" ) center / cover no-repeat;
		}
	#footerMe .logo::before{
		display : block;
		font-family : "Noto Serif JP" , serif;
		font-size : 2.6rem;
		text-align : center;
		text-indent : -.022em;
		letter-spacing : -.022em;
		content : attr( data-sp );
	}
	#footerMe .logo::after{
		display : block;
		width : calc( 120 var( --percentBase ) );
		height : 1px;
		margin-inline : auto;
		margin-top : calc( 16 var( --remBase ) );
		content : "";
		background-color : white;
	}
	#footerMe p{
		margin-top : calc( 16 var( --remBase ) );
		font-family : "Zen Kaku Gothic New" , sans-serif;
		font-size : 1.4rem;
		line-height : 1.7;
		text-align : center;
		text-indent : -.022em;
		letter-spacing : -.022em;
	}
	#footerMe dl{
		font-family : "Zen Kaku Gothic New" , sans-serif;
	}
	#footerMe dl > div{
		display : grid;
		grid-template-columns : auto auto;
		align-items : center;
		justify-content : center;
	}
	#footerMe dt , #footerMe dd{
		font-size : 1.4rem;
		line-height : 1.7;
		text-align : center;
		text-indent : -.022em;
		letter-spacing : -.022em;
	}
}
@media screen and ( width > 750px ) , print{
	#footerMe .logo{
		display : block;
		grid-row : 1;
		grid-column : 1;
	}
	#footerMe .logo img{
		height : calc( 62 var( --remBase ) );
	}
}
@media screen and ( width <= 750px ){
	#footerSns{
		display : grid;
		grid-auto-flow : column;
		column-gap : calc( 8 var( --percentBase ) );
		align-items : center;
		justify-content : center;
		margin-top : calc( 16 var( --remBase ) );
	}
	#footerSns img{
		height : calc( 45 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#footer02{
		display : grid;
		grid-template-columns : calc( 480 var( --percentBase ) ) 1fr;
		row-gap : calc( 24 var( --remBase ) );
		column-gap : calc( 60 var( --percentBase ) );
		padding-top : calc( 56 var( --remBase ) );
		padding-bottom : calc( 96 var( --remBase ) );
		color : white;
		background-color : #686666;
	}
	#footer02 > a{
		display : block;
		grid-row : 2;
		grid-column : 1;
		width : fit-content;
	}
	#footer02 > a img{
		height : calc( 37 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#footerNavGlobal{
		grid-row : 1;
		grid-column : 1;
		padding-bottom : calc( 24 var( --remBase ) );
		border-bottom : solid 1px #d9d9d9;
	}
	#footerNavGlobal li + li{
		margin-top : calc( 16 var( --remBase ) );
	}
	#footerNavGlobal a{
		display : grid;
		grid-template-rows : 1fr auto auto 1fr;
		grid-template-columns : calc( 120 * 100% / 480 ) auto;
		column-gap : calc( 16 * 100% / 480 );
		align-items : center;
		justify-content : start;
	}
	#footerNavGlobal a::before{
		display : block;
		grid-row : 1/-1;
		grid-column : 1;
		width : 100%;
		height : calc( 80 var( --remBase ) );
		font-size : 0;
		content : "";
		background-repeat : no-repeat;
		background-position : left center;
		background-size : contain;
	}
	#footerNavGlobal span:nth-of-type( 1 ){
		grid-row : 2;
		grid-column : 2;
		font-size : 2.2rem;
		font-weight : 500;
		line-height : 1.3;
	}
	#footerNavGlobal span:nth-of-type( 2 ){
		grid-row : 3;
		grid-column : 2;
		margin-top : calc( 8 var( --remBase ) );
		font-size : 1.8rem;
		line-height : 1.5;
	}
	#footerNavGlobal li:nth-child( 1 ) a::before{
		background-image : url( "../images/nav/nav0201.webp" );
	}
	#footerNavGlobal li:nth-child( 2 ) a::before{
		background-image : url( "../images/nav/nav0202.webp" );
	}
	#footerNavGlobal li:nth-child( 3 ) a::before{
		background-image : url( "../images/nav/nav0203.webp" );
	}
	#footerNavGlobal li:nth-child( 4 ) a::before{
		background-image : url( "../images/nav/nav0204.webp" );
	}
}
@media screen and ( width > 750px ) , print{
	#footerNavSub{
		display : grid;
		grid-template-rows : repeat( 5 , auto );
		grid-row : 1/3;
		grid-column : 2;
		grid-auto-columns : calc( 200 * 100% / 1340 );
		grid-auto-flow : column;
		row-gap : calc( 20 var( --remBase ) );
		column-gap : calc( 40 * 100% / 1340 );
		align-content : start;
		justify-content : start;
		padding-left : calc( ( 60 * 100% / 1400 ) - 1px );
		border-left : solid 1px #d9d9d9;
	}
	#footerNavSub a{
		font-size : max(1.8rem,14px) !important;
		line-height : 1.5;
	}
}
#toTop{
	position : absolute;
	display : block;
	width : fit-content;
}
@media screen and ( width <= 750px ){
	#toTop{
		top : calc( 28 var( --remBase ) );
		right : calc( 16 var( --viewportBase ) );
	}
	#toTop img{
		height : calc( 59 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#toTop{
		top : calc( 202 var( --remBase ) );
		display : grid;
		grid-template-rows : calc( 59 var( --remBase ) ) auto;
		row-gap : calc( 13 var( --remBase ) );
		align-items : start;
		justify-content : center;
		justify-items : center;
	}
	#toTop img{
		grid-row : 1;
		grid-column : 1;
		height : 100%;
	}
	#toTop span{
		display : block;
		grid-row : 2;
		grid-column : 1;
		margin-inline : auto;
		font-size : 1.8rem;
		writing-mode : vertical-rl;
		rotate : -180deg;
	}
}
@media screen and ( 750px < width < 1960px ) , print{
	#toTop{
		right : calc( 40 var( --viewportBase ) );
	}
}
@media screen and ( width >= 1960px ){
	#toTop{
		right : 40px;
	}
}
#copyrights{
	font-family : Poppins , sans-serif;
	color : white;
	background-color : #686666;
}
@media screen and ( width <= 750px ){
	#copyrights{
		position : relative;
		padding-top : calc( 28 var( --remBase ) );
		padding-bottom : calc( 80 var( --remBase ) );
	}
	#copyrights p{
		font-size : 1.4rem;
		line-height : 1.6;
	}
}
@media screen and ( width > 750px ) , print{
	#copyrights{
		padding-top : calc( 17 var( --remBase ) );
		padding-bottom : calc( 22 var( --remBase ) );
		border-top : solid 1px #fff;
	}
	#copyrights p{
		font-size : 1.8rem;
		line-height : 1.5;
		text-align : right;
	}
}
@media screen and ( 750px < width <= 1200px ) {
	#footerNavGlobal span:nth-of-type( 2 ){
		font-size :  max(1.1rem,11px) !important;
	}	
}
@media screen and ( 1200px < width < 1568px ) {
	#footerNavGlobal span:nth-of-type( 2 ){
		font-size :  max(1.2rem,12px) !important;
	}	
}



/*--加賀倶楽部------------------------*/
@media screen and ( width <= 750px ){
}
@media screen and ( width <= 750px ){
}
@media screen and ( width > 750px ) , print{
	#footer-kaga {
		display: flex;
		flex-wrap: wrap;
		align-items : center;
		justify-content: space-between;
		padding-block : calc( 36 var( --remBase ) );
		background-color : var( --color0102 );
	}
	#footer-kaga .agent-wrap {
		display: flex;
		flex-wrap: wrap;
		column-gap: 4em;
		align-items: center;
		justify-content: center;
	}
		#footer-kaga .agent {
			color: #fff;
			font-size:1.8rem;
			line-height: 1.7;
			display: flex;
			flex-direction: row;
			column-gap: 1em;
	}	
		#footer-kaga .agent dt {
			font-weight: 600;
		}	
		#footer-kaga .agent dd {
		}	
}

        /* モーダルのスタイル */
        .modal {
            display: none; /* 初期状態では非表示 */
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 80%;
            max-width: 1000px;
            padding: 20px;
            background: white;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            z-index: 1000;
        }
        .modal img {
			width: 100%;
			height: auto;
        }
        .modal-overlay {
            display: none; /* 初期状態では非表示 */
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 999;
        }
        .modal.active,
        .modal-overlay.active {
            display: block;
        }
        .modal-close {
            display: inline-block;
            margin-top: 10px;
            padding: 10px 15px;
            background: var( --color01 );
            color: white;
            text-decoration: none;
            text-align: center;
        }


@media screen and ( width <= 750px ){

	.koteicv{
		width : 100%;
		position : fixed;
		background-color : #fff;
		left : 0;
		bottom : 0;
		display : flex;
		justify-content : space-between;
		z-index : 10;
		column-gap: 1px;
	}
	.koteicv .tels{
		width : calc( 70 var( --remBase ) );
		height : calc( 100 * 100vw / 768 );
	}
	.koteicv .tels a{
		width : 100%;
		height : 100%;
		display : flex;
		align-items : center;
		justify-content : center;
		text-align : center;
		background-color :#333;
		color : #fff;
	}
	.koteicv .tels span span{
		font-size : 1.8rem;
		letter-spacing : .1em;
		text-indent : .1em;
	}
	.koteicv .links{
		display : flex;
		justify-content : space-between;
		column-gap: 1px;

	}
	.koteicv .links li{
		width : calc( 110 var( --remBase ) );
		height : calc( 100 * 100vw / 768 );
	}
	.koteicv .links a{
		width : 100%;
		height : 100%;
		display : flex;
		align-items : center;
		justify-content : center;
		text-align : center;
		font-size : 1.6rem;
		letter-spacing : .1em;
		text-indent : .1em;
		color : #fff;
	}
	.koteicv .links .apply{
		background-color : #00C300;
	}
	.koteicv .links .request , .koteicv .links .contact{
		background-color : #333;
	}
}