@charset "UTF-8";

/* --------------------------------------------
SETTINGS
--------------------------------------------- */
@media screen and ( width <= 768px ){
	:root{
		--headerHeight : calc( 134 * var( --remBase ) );
	}
}
@media print , screen and ( width > 768px ){
	:root{
		--headerHeight : calc( 294 * var( --remBase ) );
	}
}
html{
	scroll-padding-top : var( --headerHeight );
}
body{
	padding-top : var( --headerHeight );
	@media screen and ( width <= 768px ){
		font-size : calc( 16 * var( --remBase ) );
	}
	@media print , screen and ( width > 768px ){
		font-size : calc( 16 * var( --remBase ) );
	}
}

/* --------------------------------------------
WRAPPER , CONTAINER , GRID CONTAINER
--------------------------------------------- */
@media screen and ( width <= 768px ){
	:root{
		--wrapPaddingInline : calc( var( --gutter ) * var( --viewportBase ) );
	}
}
@media print , screen and ( width > 768px ){
	:root{
		--wrapPaddingInline : max( calc( ( 100% - ( var( --contentWidth ) * 1px ) ) / 2 ) , calc( var( --gutter ) * var( --viewportBase ) ) );
	}
}
:root{
	--containerWidth : calc( var( --contentWidth ) * var( --viewportBase ) );
	--gridContainerGutter : calc( var( --gutter ) * var( --viewportBase ) );
	--gridContainerGridTemplateColumns : var( --gridContainerGutter ) var( --containerWidth ) var( --gridContainerGutter );
	--gridContainerColumnCenter : 2;
	--gridContainerLeftStartEnd : 3;
	--gridContainerRightEndStart : 2;
}
.wrap{
	padding-inline : var( --wrapPaddingInline );
}
.wrap-sp{
	@media screen and ( width <= 768px ){
		padding-inline : var( --wrapPaddingInline );
	}
}
.wrap-pc{
	@media print , screen and ( width > 768px ){
		padding-inline : var( --wrapPaddingInline );
	}
}
.wrap02{
	@media screen and ( width <= 768px ){
		padding-inline : var( --wrapPaddingInline );
	}
	@media print , screen and ( width > 768px ){
		padding-inline : max( calc( ( 100% - 932px ) / 2 ) , calc( 24 * var( --viewportBase ) ) );
	}
}
.container{
	width : var( --containerWidth );
	margin-inline : auto;
}
.container-sp{
	@media screen and ( width <= 768px ){
		width : var( --containerWidth );
		margin-inline : auto;
	}
}
.container-pc{
	@media print , screen and ( width > 768px ){
		width : var( --containerWidth );
		margin-inline : auto;
	}
}
.gridContainer{
	display : grid;
	grid-template-columns : var( --gridContainerGridTemplateColumns );
	grid-auto-flow : column;
	row-gap : 0;
	>*:not( .fluid , .left-start , .right-end ){
		grid-column : var( --gridContainerColumnCenter );
	}
	.fluid{
		grid-column : 1/-1;
	}
	.left-start{
		grid-column : 1 / 3;
	}
	.right-end{
		grid-column : 2 / 4;
	}
}

/* --------------------------------------------
  STATE
  --------------------------------------------- */
.is-sp{
	@media print , screen and ( width > 768px ){
		display : none;
	}
}
.is-pc{
	@media screen and ( width <= 768px ){
		display : none;
	}
}
.is-tb{
	@media screen and ( width <= 768px ){
		display : none;
	}
	@media print , screen and ( width >= 1020px ){
		display : none;
	}
}

/* --------------------------------------------
  ACCESSIBILITY
  --------------------------------------------- */
.visually-hidden{
	position : absolute;
	width : 1px;
	height : 1px;
	overflow : hidden;
	clip : rect( 0 0 0 0 );
	clip-path : inset( 50% );
	white-space : nowrap;
}
.visually-hidden-text{
	overflow : hidden;
	color : transparent;
}
[hidden]{
	display : none;
}

/* --------------------------------------------
  COMMON MODULES
  --------------------------------------------- */
.full{
	width : 100%;
	height : auto;
}
.full-sp{
	@media screen and ( width <= 768px ){
		width : 100%;
		height : auto;
	}
}
.full-pc{
	@media print , screen and ( width > 768px ){
		width : 100%;
		height : auto;
	}
}
[data-before]::before{
	white-space : pre;
	content : attr( data-before );
}
[data-after]::after{
	white-space : pre;
	content : attr( data-after );
}
[data-before-sp]::before{
	@media screen and ( width <= 768px ){
		white-space : pre;
		content : attr( data-before-sp );
	}
}
[data-both]{
	&::before , &::after{
		white-space : pre;
		content : attr( data-both );
	}
}
@media screen and ( width <= 768px ){
	[data-after-sp]::after{
		white-space : pre;
		content : attr( data-after-sp );
	}
	[data-both-sp]{
		&::before , &::after{
			white-space : pre;
			content : attr( data-both );
		}
	}
}
@media print , screen and ( width > 768px ){
	[data-before-pc]::before{
		white-space : pre;
		content : attr( data-before-pc );
	}
	[data-after-pc]::after{
		white-space : pre;
		content : attr( data-after-pc );
	}
	[data-both-pb]{
		&::before , &::after{
			white-space : pre;
			content : attr( data-both );
		}
	}
}
[data-outline]{
	position : relative;
	z-index : 0;
	display : inline-block;
	&::before{
		position : absolute;
		inset : 0;
		z-index : -1;
		white-space : pre;
		content : attr( data-outline );
	}
}

/* --------------------------------------------
  BR TO SPCE
  --------------------------------------------- */
.sp-space{
	@media screen and ( width <= 768px ){
		&::after{
			content : " ";
		}
	}
	@media print , screen and ( width > 768px ){
		&::after{
			white-space : pre;
			content : "\A";
		}
	}
}
.pc-space{
	@media screen and ( width <= 768px ){
		&::after{
			white-space : pre;
			content : "\A";
		}
	}
	@media print , screen and ( width > 768px ){
		&::after{
			content : " ";
		}
	}
}
.sp-spaceEm{
	@media screen and ( width <= 768px ){
		&::after{
			content : "　";
		}
	}
	@media print , screen and ( width > 768px ){
		&::after{
			white-space : pre;
			content : "\A";
		}
	}
}
.pc-spaceEm{
	@media screen and ( width <= 768px ){
		&::after{
			white-space : pre;
			content : "\A";
		}
	}
	@media print , screen and ( width > 768px ){
		&::after{
			content : "　";
		}
	}
}

/* --------------------------------------------
  LH NAGATIVE MARGIN
  --------------------------------------------- */
.lh-up{
	margin-top : calc( ( 1em - 1lh )  / 2 );
}
.lh-up-sp{
	@media screen and ( width <= 768px ){
		margin-top : calc( ( 1em - 1lh )  / 2 );
	}
}
.lh-up-pc{
	@media print , screen and ( width > 768px ){
		margin-top : calc( ( 1em - 1lh )  / 2 );
	}
}

/* --------------------------------------------
HEADER
--------------------------------------------- */
#header{
	position : fixed;
	top : 0;
	left : 0;
	z-index : 10;
	display : grid;
	width : 100%;
	height : var( --headerHeight );
	background-color : white;
	.logo{
		display : block;
		width : fit-content;
	}
	.contacts{
		.contact{
			display : grid;
			grid-auto-flow : column;
			align-items : center;
			justify-content : start;
			font-weight : 700;
			color : white;
			background-color : #009df0;
			&::after{
				display : block;
				width : auto;
				aspect-ratio : 33/22;
				font-size : 0;
				content : "";
				background-image : url( "../images/parts/header/mail.avif" );
				background-repeat : no-repeat;
				background-position : center;
				background-size : contain;
			}
		}
		.tel{
			display : block;
			font-family : "Noto Serif JP" , serif;
			font-weight : 700;
			color : var( --blue );
		}
	}
	.address{
		font-family : "Noto Serif JP" , serif;
		font-weight : 700;
		color : var( --blue );
		span + span{
			padding-left : 1em;
		}
	}
	.links01 , .links02{
		display : grid;
		justify-content : space-between;
		li{
			width : 100%;
			height : 100%;
		}
		a{
			display : grid;
			place-items : center;
			width : 100%;
			height : 100%;
			font-family : "Noto Serif JP" , serif;
			color : white;
			background-color : var( --headerLinks01Color );
			outline : solid 1px var( --headerLinks01Color );
			outline-offset : -1px;
			box-shadow : calc( .68 * var( --remBase ) ) calc( .73 * var( --remBase ) ) calc( 4 * var( --remBase ) ) 0 color-mix( in sRGB , black 60% , transparent );
		}
	}
	.links01{
		li:nth-child( 1 ){
			--headerLinks01Color : #ff4040;
		}
		li:nth-child( 2 ){
			--headerLinks01Color : #1d2cf3;
		}
	}
	.links02{
		--headerLinks01Color : var( --blue );
	}
	@media screen and ( width <= 768px ){
		grid-template-columns : repeat( 2 , auto ) 1fr;
		column-gap : calc( 10 * var( --contentBase ) );
		justify-content : start;
		padding-inline : calc( 10 * var( --viewportBase ) );
		padding-top : calc( 5 * var( --remBase ) );
		.logo{
			grid-row : 1/3;
			grid-column : 1;
			justify-self : end;
			img{
				height : calc( 59 * var( --remBase ) );
			}
		}
		.contacts{
			grid-row : 1;
			grid-column : 2;
			padding-top : calc( 5 * var( --remBase ) );
			.contact{
				justify-content : space-between;
				width : calc( 82 * var( --remBase ) );
				height : calc( 18 * var( --remBase ) );
				padding-inline : calc( 5 * var( --contentBase ) );
				font-size : calc( 9 * var( --remBase ) );
				&::after{
					height : calc( 10 * var( --remBase ) );
				}
			}
			.tel{
				padding-block : calc( 3.4 * var( --remBase ) );
				padding-inline : calc( 9 * var( --remBase ) );
				margin-top : calc( 3 * var( --remBase ) );
				font-size : calc( 8 * var( --remBase ) );
				line-height : 1.4;
			}
		}
		.partner{
			grid-row : 2;
			grid-column : 2;
			img{
				height : calc( 16 * var( --remBase ) );
			}
		}
		.address{
			grid-row : 3;
			grid-column : 1/-1;
			justify-content : center;
			font-size : calc( 8 * var( --remBase ) );
			line-height : 2;
			text-align : center;
		}
		.links01 , .links02{
			a{
				border-radius : calc( 3 * var( --remBase ) );
			}
		}
		.links01{
			grid-template-columns : repeat( 2 , calc( 147.5 * var( --contentBase ) ) );
			grid-row : 4;
			grid-column : 1/-1;
			grid-auto-rows : calc( 16 * var( --remBase ) );
			margin-top : calc( 10 * var( --remBase ) );
			font-size : calc( 10 * var( --remBase ) );
		}
		.links02{
			grid-template-columns : repeat( 4 , calc( 71.25 * var( --contentBase ) ) );
			grid-row : 5;
			grid-column : 1/-1;
			grid-auto-rows : calc( 18 * var( --remBase ) );
			margin-top : calc( 6 * var( --remBase ) );
			font-size : calc( 10 * var( --remBase ) );
		}
	}
	@media print , screen and ( width > 768px ){
		grid-template-rows : calc( 52 * var( --remBase ) ) 1fr auto calc( 5 * var( --remBase ) ) calc( 32 * var( --remBase ) ) calc( 4 * var( --remBase ) ) calc( 40 * var( --remBase ) ) calc( 7 * var( --remBase ) ) calc( 57 * var( --remBase ) );
		grid-template-columns : calc( 470 * 100% / 950 ) calc( 480 * 100% / 950 );
		padding-inline : max( calc( ( 100% - 950px ) / 2 ) , calc( 45 * var( --viewportBase ) ) );
		padding-top : calc( 14 * var( --remBase ) );
		padding-bottom : calc( 4 * var( --remBase ) );
		.logo{
			grid-row : 1/6;
			grid-column : 1;
			align-self : start;
			img{
				height : calc( 154 * var( --remBase ) );
			}
		}
		.contacts{
			display : grid;
			grid-template-columns : calc( 254 * 100% / 480 ) calc( 206 * 100% / 480 );
			grid-row : 1;
			grid-column : 2;
			grid-auto-flow : column;
			column-gap : calc( 20 * 100% / 480 );
			align-items : end;
			justify-content : end;
			li{
				width : 100%;
				&:nth-child( 1 ){
					grid-column : 2;
					height : 100%;
				}
				&:nth-child( 2 ){
					grid-column : 1;
				}
			}
			.tel{
				font-size : calc( 24 * var( --remBase ) );
				line-height : 1.4;
				text-align : center;
			}
			.contact{
				column-gap : calc( 20 * 100% / 182 );
				height : 100%;
				padding-inline : calc( 12 * 100% / 206 );
				font-size : calc( 20 * var( --remBase ) );
				&::after{
					height : calc( 22 * var( --remBase ) );
				}
			}
		}
		.address{
			grid-row : 3;
			grid-column : 2;
			font-size : calc( 16 * var( --remBase ) );
			line-height : calc( 23 / 16 );
			text-align : right;
		}
		.partner{
			grid-row : 7;
			grid-column : 1;
			text-align : center;
			img{
				height : 100%;
			}
		}
		.links01 , .links02{
			grid-column : 2;
			grid-auto-rows : 100%;
			a{
				font-size : calc( 15 * var( --remBase ) );
				border-radius : calc( 3 * var( --remBase ) );
			}
		}
		.links01{
			grid-template-columns : repeat( 2 , calc( 235 * 100% / 480 ) );
			grid-row : 5;
		}
		.links02{
			grid-template-columns : repeat( 4 , calc( 112.5 * 100% / 480 ) );
			grid-row : 7;
		}
	}
	#nav{
		grid-row : 9;
		grid-column : 1/-1;
	}
}
@media ( hover : hover ){
	#header{
		.contacts .contact:hover{
			&::after{
				aspect-ratio : 1;
				background-image : url( "../images/parts/header/mail_open.avif" );
			}
		}
		.links01 , .links02{
			a:hover{
				color : var( --headerLinks01Color );
				background-color : white;
			}
		}
		@media print , screen and ( width > 768px ){
			.contacts .contact:hover{
				&::after{
					height : calc( 32 * var( --remBase ) );
				}
			}
		}
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#header{
		.contacts .contact:{
			&::after{
				transition : background var( --transitionBase );
			}
		}
		.links01 , .links02{
			a{
				transition : background var( --transitionBase ) , color var( --transitionBase );
			}
		}
	}
}

/* --------------------------------------------
MENU BUTTON
--------------------------------------------- */
#menuBtn{
	@media screen and ( width <= 768px ){
		position : fixed;
		top : calc( 10 * var( --remBase ) );
		right : 0;
		z-index : 12;
		height : calc( 50 * var( --remBase ) );
		aspect-ratio : 1;
		border-block : calc( 15 * var( --remBase ) ) solid transparent;
		border-inline : calc( 14 * var( --remBase ) ) solid transparent;
		span{
			position : absolute;
			left : 0;
			display : block;
			width : 100%;
			transition : all .4s;
			&:nth-of-type( 1 ){
				top : 0;
			}
			&:nth-of-type( 4 ){
				bottom : 0;
			}
		}
		&[aria-expanded="true"]{
			span:nth-of-type( 1 ){
				scale : 0;
				translate : calc( $( top ) var( --remBase ) ) 0;
			}
			span:nth-of-type( 2 ){
				rotate : -45deg;
			}
			span:nth-of-type( 3 ){
				rotate : 45deg;
			}
			span:nth-of-type( 4 ){
				scale : 0;
				translate : calc( -$( top ) var( --remBase ) ) 0;
			}
		}
		span{
			height : calc( 2 * var( --remBase ) );
			border-radius : 100vmax;
			&:nth-of-type( 2 ) , &:nth-of-type( 3 ){
				top : calc( 9 * var( --remBase ) );
			}
		}
		&[aria-expanded="false"]{
			span{
				background-color : var( --base );
			}
		}
		&[aria-expanded="true"]{
			span{
				background-color : white;
			}
		}
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#menuBtn{
		@media screen and ( width <= 768px ){
			transition : background var( --transitionBase );
		}
	}
}

/* --------------------------------------------
NAVIGATION
--------------------------------------------- */
#header{
	@media screen and ( width <= 768px ){
		&::before{
			position : fixed;
			top : 0;
			left : 0;
			z-index : -1;
			display : block;
			width : 100%;
			height : 100%;
			content : "";
			background-color : color-mix( in srgb , #2f2e2e 60% , transparent );
		}
		&:has( #nav[inert] ){
			&::before{
				pointer-events : none;
				opacity : 0;
			}
		}
		&:has( #nav:not( [inert] ) ){
			&::before{
				pointer-events : auto;
				opacity : 1;
			}
		}
	}
}
#nav{
	@media screen and ( width <= 768px ){
		position : fixed;
		left : 100%;
		z-index : 11;
		width : calc( 224 * var( --viewportBase ) );
		height : 100dvh;
		overflow-y : auto;
		background-color : var( --blue02 );
		translate : 0 0;
		body:has( &:not( [inert] ) ){
			overflow : hidden;
		}
		&:not( [inert] ){
			translate : -100% 0;
		}
		&[inert]{
			translate : 0 0;
		}
		.scroll{
			overflow-y : auto;
		}
		.scroll{
			padding-inline : calc( 18 * 100% / 224 );
			padding-top : calc( 69 * var( --remBase ) );
		}
	}
	@media print , screen and ( width > 768px ){
		border-image-source : linear-gradient( var( --blue ) , var( --blue ) );
		border-image-slice : 0 fill;
		border-image-outset : 0 100vw 0 100vw;
		.scroll{
			display : contents;
		}
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#header{
		@media screen and ( width <= 768px ){
			&::before{
				transition : opacity var( --transitionBase );
			}
		}
	}
	#nav{
		@media screen and ( width <= 768px ){
			@media ( prefers-reduced-motion : no-preference ){
				transition-duration : .4s;
				transition-property : translate;
				&[inert]{
					transition-timing-function : ease-out;
				}
				&:not( [inert] ){
					transition-timing-function : ease-in;
				}
			}
		}
	}
}
#navGlobal{
	a{
		font-family : "Noto Serif JP" , serif;
	}
	> li{
		.subMenu{
			display : grid;
			grid-template-rows : 0fr;
			overflow : hidden;
			> ul{
				overflow : hidden;
			}
		}
	}
	@media screen and ( width <= 768px ){
		a , .buttons{
			display : grid;
			align-items : center;
		}
		a{
			color : white;
		}
		> li > a , .buttons{
			height : calc( 56 * var( --remBase ) );
		}
		> li > a , .buttons a{
			font-size : calc( 17 * var( --remBase ) );
		}
		.buttons{
			grid-template-columns : 1fr calc( 56 * 100% / 188 );
			justify-content : space-between;
			button{
				display : grid;
				place-content : center;
				img{
					height : calc( 11 * var( --remBase ) );
					filter : var( --filterWhite );
				}
				&[aria-expanded="true"]{
					img{
						rotate : -180deg;
					}
				}
			}
		}
		.subMenu{
			a{
				height : calc( 36 * var( --remBase ) );
				padding-left : calc( 25 * 100% / 188 );
				font-size : calc( 12 * var( --remBase ) );
			}
		}
		.subMenu[aria-hidden="false"]{
			grid-template-rows : 1fr;
		}
	}
	@media print , screen and ( width > 768px ){
		display : grid;
		grid-template-rows : 100%;
		grid-template-columns : repeat( 6 , calc( 100% / 6 ) );
		grid-auto-flow : column;
		height : 100%;
		> li{
			width : 100%;
			height : 100%;
			+ li{
				&:not( :nth-child( 2 ) ){
					border-left : solid 1px white;
				}
			}
			> a , .buttons a{
				display : grid;
				place-items : center;
				width : 100%;
				height : 100%;
				font-size : calc( 18 * var( --remBase ) );
				color : white;
			}
		}
		.buttons{
			width : 100%;
			height : 100%;
		}
		> li:not( .is-sp ){
			position : relative;
			&:has( .subMenu ):hover{
				.subMenu{
					grid-template-rows : 1fr;
				}
			}
			.subMenu{
				position : absolute;
				top : calc( 100% - 1px );
				left : 50%;
				width : max-content;
				min-width : 100%;
				translate : -50% 0;
				ul{
					padding-top : calc( 7 * var( --remBase ) );
				}
				li + li{
					border-top : solid 1px white;
				}
				a{
					display : grid;
					place-content : center;
					width : 100%;
					height : calc( 33 * var( --remBase ) );
					padding-inline : calc( 9 * var( --remBase ) );
					font-size : calc( 18 * var( --remBase ) );
					color : white;
					white-space : nowrap;
					background-color : #0b50e3;
				}
			}
		}
	}
}
@media ( hover : hover ){
	#navGlobal{
		a:hover{
			background-color : #fa7d7d ! important;
		}
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#navGlobal{
		a{
			transition : background var( --transitionBase );
		}
		.subMenu{
			transition : grid-template-rows var( --transitionBase );
		}
		button img{
			transition : rotate var( --transitionBase );
		}
	}
}

/* --------------------------------------------
BREADCRUMBS
--------------------------------------------- */
#breadcrumbs{
	ol{
		display : flex;
		flex-wrap : wrap;
	}
	li:not( :last-child )::after{
		white-space : pre;
		content : " > ";
	}
	li:not( :last-child )::after , a , span{
		color : #605e5e;
	}
	@media screen and ( width <= 768px ){
		padding-block : calc( 10 * var( --remBase ) );
		padding-inline : calc( 20 * var( --viewportBase ) );
		li:not( :last-child )::after , a , span{
			font-size : calc( 10 * var( --remBase ) );
			line-height : 1.6;
		}
	}
	@media print , screen and ( width > 768px ){
		padding-block : calc( 10 * var( --remBase ) );
		li:not( :last-child )::after , a , span{
			font-size : calc( 12 * var( --remBase ) );
			line-height : calc( 14 / 12 );
		}
	}
}

/* --------------------------------------------
TITLE
--------------------------------------------- */
.title01{
	position : relative;
	padding-left : calc( 24 * var( --viewportBase ) );
	font-weight : 700;
	color : #605e5e;
	border-bottom-color : currentColor;
	border-bottom-style : solid;
	border-bottom-width : calc( 3 * var( --remBase ) );
	&::before{
		position : absolute;
		top : 0;
		left : 0;
		z-index : 1;
		display : block;
		width : calc( 12 * var( --contentBase ) );
		height : 100%;
		content : "";
		background-color : #1c2984 ;
	}
	@media screen and ( width <= 768px ){
		padding-block : calc( 3.5 * var( --remBase ) );
		margin-bottom : calc( 10 * var( --remBase ) );
		font-size : calc( 19 * var( --remBase ) );
		line-height : calc( 26 / 19 );
	}
	@media print , screen and ( width > 768px ){
		margin-bottom : calc( 29 * var( --remBase ) );
		font-size : calc( 28 * var( --remBase ) );
		line-height : calc( 34 / 28 );
	}
}
.title02{
	display : grid;
	place-items : center;
	font-family : "Noto Serif JP" , serif;
	font-weight : 700;
	color : #1c2984;
	text-align : center;
	background-repeat : no-repeat;
	background-position : center;
	background-size : cover;
	@media screen and ( width <= 768px ){
		height : calc( 94 * var( --remBase ) );
		margin-top : calc( -29 * var( --remBase ) );
		font-size : calc( 34 * var( --remBase ) );
		line-height : 1.4;
	}
	@media print , screen and ( width > 768px ){
		height : calc( 250 * var( --remBase ) );
		margin-top : calc( -37 * var( --remBase ) );
		font-size : calc( 80 * var( --remBase ) );
		line-height : 1.4;
	}
}