@charset "UTF-8";

/* --------------------------------------------
SETTINGS
--------------------------------------------- */
@media screen and ( width <= 780px ){
	:root{
		font-size : calc( 10 * 100vw / var( --breakPoint ) );
	}
}
@media screen and ( 780px < width < 1240px ){
	:root{
		font-size : calc( 10 * 100vw / var( --breakPoint ) );
	}
}
@media print , screen and ( width >= 1240px ){
	:root{
		font-size : 10px;
	}
}
:root{
	@media screen and ( width <= 780px ){
		--headerHeight : calc( 88 var( --remBase ) );
	}
	@media print , screen and ( width > 780px ){
		--headerHeight : calc( 114 var( --remBase ) );
	}
}
html{
	scroll-padding-top : var( --headerHeight );
}
body{
	position : relative;
	padding-top : var( --headerHeight );
	font-size : clamp( var( --min ) , 1.6rem , var( --max ) );
}

/* --------------------------------------------
CONTAINER
--------------------------------------------- */
.container{
	@media screen and ( width <= 780px ){
		width : 100%;
		padding-inline : calc( var( --gutter ) var( --viewportBase ) );
	}
	@media print , screen and ( width > 780px ){
		width : min( 100% , calc( var( --breakPoint ) * 1px ) );
		padding-inline : min( calc( var( --gutter ) * 1px ) , calc( var( --gutter ) var( --viewportBase ) ) );
		margin-inline : auto;
	}
}
.container-sp{
	@media screen and ( width <= 780px ){
		width : 100%;
		padding-inline : calc( var( --gutter ) var( --viewportBase ) );
	}
}
.container-pc{
	@media print , screen and ( width > 780px ){
		width : min( 100% , calc( var( --breakPoint ) * 1px ) );
		padding-inline : min( calc( var( --gutter ) * 1px ) , calc( var( --gutter ) var( --viewportBase ) ) );
		margin-inline : auto;
	}
}
.gridContainer{
	display : grid;
	grid-auto-flow : column;
	row-gap : 0;
	> *{
		grid-column : 2;
	}
	.fluid{
		grid-column : 1/-1;
	}
	.left-start{
		grid-column : 1/3;
	}
	.right-end{
		grid-column : 2/-1;
	}
	@media screen and ( width <= 780px ){
		grid-template-columns : calc( var( --gutter ) var( --viewportBase ) ) calc( var( --wrapperSize ) var( --viewportBase ) ) calc( var( --gutter ) var( --viewportBase ) );
		.fluid-sp{
			grid-column : 1/-1;
		}
		.left-start-sp{
			grid-column : 1/3;
		}
		.right-end-sp{
			grid-column : 2/-1;
		}
	}
	@media print , screen and ( width > 780px ){
		grid-template-columns : max( calc( var( --gutter ) var( --viewportBase ) ) , calc( ( 100% - ( var( --wrapperSize ) * 1px ) ) / 2 ) ) min( calc( var( --wrapperSize ) var( --viewportBase ) ) , calc( var( --wrapperSize ) * 1px ) ) max( calc( var( --gutter ) var( --viewportBase ) ) , calc( ( 100% - ( var( --wrapperSize ) * 1px ) ) / 2 ) );
		.fluid-pc{
			grid-column : 1/-1;
		}
		.left-start-pc{
			grid-column : 1/3;
		}
		.right-end-pc{
			grid-column : 2/-1;
		}
	}
}
.gridContainer-sp{
	@media screen and ( width <= 780px ){
		display : grid;
		grid-template-columns : calc( var( --gutter ) var( --viewportBase ) ) calc( var( --wrapperSize ) var( --viewportBase ) ) calc( var( --gutter ) var( --viewportBase ) );
		grid-auto-flow : column;
		row-gap : 0;
		> *:not( .fluid-sp , .right-end-sp ){
			grid-column : 2;
		}
		.fluid-sp{
			grid-column : 1/-1;
		}
		.left-start-sp{
			grid-column : 1/3;
		}
		.right-end-sp{
			grid-column : 2/-1;
		}
	}
}
.gridContainer-pc{
	@media print , screen and ( width >= 1240px ){
		display : grid;
		grid-template-columns : max( calc( var( --gutter ) var( --viewportBase ) ) , calc( ( 100% - ( var( --wrapperSize ) * 1px ) ) / 2 ) ) min( calc( var( --wrapperSize ) var( --viewportBase ) ) , calc( var( --wrapperSize ) * 1px ) ) max( calc( var( --gutter ) var( --viewportBase ) ) , calc( ( 100% - ( var( --wrapperSize ) * 1px ) ) / 2 ) );
		grid-auto-flow : column;
		row-gap : 0;
		> *:not( .fluid-pc , .right-end-pc ){
			grid-column : 2;
		}
		.fluid-pc{
			grid-column : 1/-1;
		}
		.left-start-pc{
			grid-column : 1/3;
		}
		.right-end-pc{
			grid-column : 2/-1;
		}
	}
}

/* --------------------------------------------
WRAPPER
--------------------------------------------- */
.wrap{
	@media screen and ( width <= 780px ){
		width : 100%;
		padding-inline : calc( var( --gutter ) var( --viewportBase ) );
	}
	@media print , screen and ( width > 780px ){
		padding-inline : max( calc( var( --gutter ) var( --viewportBase ) ) , calc( ( 100% - ( var( --wrapperSize ) * 1px ) ) / 2 ) );
	}
}
.wrap-sp{
	@media screen and ( width <= 780px ){
		width : 100%;
		padding-inline : calc( var( --gutter ) var( --viewportBase ) );
	}
}
.wrap-pc{
	@media print , screen and ( width > 780px ){
		padding-inline : max( calc( var( --gutter ) var( --viewportBase ) ) , calc( ( 100% - ( var( --wrapperSize ) * 1px ) ) / 2 ) );
	}
}
.wrap02{
	@media screen and ( width <= 780px ){
		width : 100%;
		padding-inline : calc( var( --gutter ) var( --viewportBase ) );
	}
	@media print , screen and ( width > 780px ){
		padding-inline : max( calc( 85 var( --viewportBase ) ) , calc( ( 100% - 1030px ) / 2 ) );
	}
}

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

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

/* --------------------------------------------
  COMMON MODULES
  --------------------------------------------- */
.full{
	width : 100%;
	height : auto;
}
.full-sp{
	@media screen and ( width <= 780px ){
		width : 100%;
		height : auto;
	}
}
.full-pc{
	@media print , screen and ( width > 780px ){
		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 <= 780px ){
		white-space : pre;
		content : attr( data-before-sp );
	}
}
[data-both]{
	&::before , &::after{
		white-space : pre;
		content : attr( data-both );
	}
}
@media screen and ( width <= 780px ){
	[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 > 780px ){
	[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 );
		}
	}
}

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

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

/* --------------------------------------------
HEADER
--------------------------------------------- */
#header{
	position : fixed;
	top : 0;
	left : 0;
	z-index : 10;
	display : grid;
	align-items : center;
	width : 100%;
	height : var( --headerHeight );
	background-color : white;
	box-shadow : 0 calc( 4 var( --remBase ) ) calc( 8 var( --remBase ) ) color-mix( in sRGB , var( --color06 ) 70% , transparent );
	.logo{
		grid-row : 1;
		grid-column : 1;
		width : fit-content;
		font-weight : 700;
	}
	@media screen and ( width <= 780px ){
		grid-template-columns : auto calc( 88 * 100% / 284 );
		justify-content : space-between;
		padding-left : calc( 18 var( --viewportBase ) );
		padding-right : calc( 88 var( --viewportBase ) );
		.logo{
			font-size : 1.7rem;
			line-height : calc( 23 / 17 );
			span{
				display : block;
			}
		}
	}
	@media print , screen and ( width > 780px ){
		position : fixed;
		top : 0;
		left : 0;
		z-index : 10;
		grid-template-columns : auto 1fr auto calc( 30 var( --wrapperSize ) ) calc( 180 var( --percentBase ) );
		width : 100%;
		.logo{
			display : grid;
			grid-auto-flow : column;
			column-gap : calc( 25 var( --remBase ) );
			align-items : center;
			justify-content : start;
			font-size : 2.4rem;
			line-height : 1.75;
		}
	}
}
#headerApply{
	position : relative;
	z-index : 1;
	display : grid;
	width : 100%;
	color : white;
	@media screen and ( width <= 780px ){
		grid-template-rows : calc( 32 var( --remBase ) ) auto;
		grid-column : 2;
		row-gap : calc( ( 10 - 4.5 ) var( --remBase ) );
		align-items : start;
		justify-items : center;
		height : 100%;
		padding-top : calc( 20 var( --remBase ) );
		font-size : 1.2rem;
		font-weight : 700;
		line-height : 1.75;
		background-image : var( --gradation01 );
		&::before{
			display : block;
			grid-row : 1;
			width : auto;
			height : 100%;
			aspect-ratio : 43/32;
			font-size : 0;
			content : "";
			background-image : url( "../../images/recruit/ui/icon/email01.svg" );
			filter : var( --filterWhite );
			background-repeat : no-repeat;
			background-position : left center;
			background-size : contain;
		}
	}
	@media print , screen and ( width > 780px ){
		grid-row : 1;
		grid-column : 5;
		grid-auto-flow : column;
		align-items : center;
		justify-content : center;
		height : calc( 45 var( --remBase ) );
		font-size : 1.4rem;
		line-height : 1.75;
		border-radius : 100vmax;
		&::before , &::after{
			position : absolute;
			z-index : -1;
			font-size : 0;
			content : "";
			border-radius : 100vmax;
		}
		&::before{
			inset : 0;
			background-image : var( --gradation01 );
			opacity : 1;
		}
		&::after{
			inset : 1px;
			background-color : white;
			opacity : 0;
		}
	}
}
@media ( hover : hover ){
	#headerApply:hover{
		@media print , screen and ( width > 780px ){
			color : var( --color03 );
			&::after{
				opacity : 1;
			}
		}
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#headerApply{
		@media print , screen and ( width > 780px ){
			transition : color var( --transitionBase );
			&::after{
				transition : opacity var( --transitionBase );
			}
		}
	}
}
#menuBtn{
	@media screen and ( width <= 780px ){
		position : fixed;
		top : 0;
		right : 0;
		z-index : 12;
		width : calc( 88 var( --viewportBase ) );
		height : calc( 88 var( --remBase ) );
		border-color : transparent;
		border-style : solid;
		border-block : solid calc( 28 var( --remBase ) ) transparent;
		border-inline : solid calc( 20.5 var( --remBase ) ) transparent;
		span{
			position : absolute;
			left : 0;
			display : block;
			width : 100%;
			height : 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( 3 var( --remBase ) );
			background-image : var( --gradation01 );
			border-radius : 100vmax;
			&:nth-of-type( 2 ) , &:nth-of-type( 3 ){
				top : calc( 14.5 var( --remBase ) );
			}
		}
	}
}
#nav{
	@media screen and ( width <= 780px ){
		position : fixed;
		top : var( --headerHeight );
		left : 0;
		z-index : 11;
		display : grid;
		grid-template-columns : 1fr;
		width : 100%;
		overflow : hidden;
		background-color : white;
		box-shadow : 0 calc( 4 var( --remBase ) ) calc( 8 var( --remBase ) ) color-mix( in sRGB , var( --color06 ) 70% , transparent );
		body:has( &:not( [inert] ) ){
			overflow : hidden;
		}
		&[inert]{
			grid-template-rows : 0fr;
		}
		&:not( [inert] ){
			grid-template-rows : 1fr;
		}
		> div{
			overflow : hidden;
		}
		.scroll{
			padding-inline : calc( 30 var( --viewportBase ) );
		}
		&:not( [inert] ){
			.scroll{
				padding-top : calc( 28 var( --remBase ) );
				padding-bottom : calc( 160 var( --remBase ) );
			}
		}
	}
	@media print , screen and ( width > 780px ){
		grid-row : 1;
		grid-column : 3;
		justify-self : end;
		.scroll{
			display : contents;
		}
	}
}
#nav{
	@media screen and ( width <= 780px ){
		@media ( prefers-reduced-motion : no-preference ){
			transition : grid-template-rows var( --transitionBase );
			> div{
				transition : padding var( --transitionBase );
			}
		}
	}
}
#navGlobal{
	a{
		font-weight : 700;
	}
	@media screen and ( width <= 780px ){
		a{
			position : relative;
			z-index : 1;
			display : grid;
			place-items : center;
			width : 100%;
			height : calc( 80 var( --remBase ) );
			font-size : 2rem;
			line-height : calc( 24.5 / 20 );
			border-radius : 100vmax;
			&::before{
				position : absolute;
				inset : 0;
				z-index : -1;
				content : "";
				background-image : var( --gradation01 );
				border-radius : 100vmax;
				opacity : 0;
			}
			&:active , &:hover{
				&::before{
					opacity : .25;
				}
			}
		}
	}
	@media print , screen and ( width > 780px ){
		display : grid;
		grid-auto-flow : column;
		align-items : center;
		justify-content : end;
		a{
			position : relative;
			display : block;
			padding-inline : calc( 22 var( --remBase ) );
			font-size : 1.4rem;
			line-height : 1.75;
			&::after{
				position : absolute;
				bottom : calc( -8 var( --remBase ) );
				left : 50%;
				width : auto;
				height : calc( 5 var( --remBase ) );
				aspect-ratio : 18/5;
				content : "";
				background-image : var( --gradation01 );
				border-radius : 100vmax;
				opacity : 0;
				translate : -50% 0;
			}
			&[aria-current="page"]{
				&::after{
					opacity : 1;
				}
			}
			&:not( [aria-current="page"] ){
				color : var( --color06 );
			}
		}
	}
}
@media ( hover : hover ){
	@media print , screen and ( width > 780px ){
		#navGlobal:hover{
			a:hover{
				color : var( --base );
				&::after{
					opacity : 1;
				}
			}
			a:not( :hover ){
				color : var( --color06 );
				&::after{
					opacity : 0;
				}
			}
		}
	}
}
@media ( prefers-reduced-motion : no-preference ){
	@media print , screen and ( width > 780px ){
		#navGlobal a{
			transition : color var( --transitionBase );
			&::after{
				transition : opacity var( --transitionBase );
			}
		}
	}
}
#subLinks{
	border-top : solid 1px #e4e4e4;
	> a{
		font-weight : 700;
	}
	ul{
		display : grid;
		grid-auto-flow : column;
	}
	img{
		height : calc( 22 var( --remBase ) );
	}
	@media screen and ( width <= 780px ){
		padding-top : calc( ( 58 - 27.75 ) var( --remBase ) );
		margin-top : calc( 30 var( --remBase ) );
		> a{
			position : relative;
			z-index : 1;
			display : grid;
			place-items : center;
			width : 100%;
			height : calc( 80 var( --remBase ) );
			font-size : 2rem;
			line-height : calc( 24.5 / 20 );
			border-radius : 100vmax;
			&::before{
				position : absolute;
				inset : 0;
				z-index : -1;
				content : "";
				background-image : var( --gradation01 );
				border-radius : 100vmax;
				opacity : 0;
			}
			&:active , &:hover{
				&::before{
					opacity : .25;
				}
			}
		}
		ul{
			column-gap : calc( 48 * 100% / 330 );
			justify-content : center;
			margin-top : calc( ( 76 - 27.75 ) var( --remBase ) );
		}
	}
}

/* --------------------------------------------
BREAD CRUMB
--------------------------------------------- */
#breadcrumb{
	display : grid;
	align-items : start;
	justify-content : start;
	color : var( --color06 );
	ol{
		display : flex;
		flex-wrap : wrap;
	}
	li:not( :last-child )::after{
		white-space : pre;
		content : " > ";
	}
	a{
		color : var( --color06 );
	}
	@media screen and ( width <= 780px ){
		padding-top : calc( ( 40 - 2.9 ) var( --remBase ) );
		&:has( + :where( #title01 , #title02 ) ){
			height : calc( ( 100 - 5.7 ) var( --remBase ) );
		}
		li{
			font-size : 1.1rem;
			line-height : calc( 16.8 / 11 );
		}
	}
	@media print , screen and ( width > 780px ){
		padding-top : calc( ( 40 - 5 ) var( --remBase ) );
		&:has( + :where( #title01 , #title02 ) ){
			height : calc( ( 80 - 12 ) var( --remBase ) );
		}
		li{
			font-size : 1.4rem;
			line-height : calc( 24 / 14 );
		}
	}
}

/* --------------------------------------------
TITLE
--------------------------------------------- */
#title01{
	font-weight : 700;
	text-align : center;
	&::before{
		display : block;
		font-family : Arial , "Helvetica Neue" , Helvetica , sans-serif;
		color : var( --color02 );
	}
	@media screen and ( width <= 780px ){
		font-size : 1.8rem;
		line-height : calc( 29.4 / 18 );
		&::before{
			margin-bottom : calc( ( 33 - 8.25 - 5.7 ) var( --remBase ) );
			font-size : 2.2rem;
			line-height : 1.75;
		}
	}
	@media print , screen and ( width > 780px ){
		font-size : 2.4rem;
		line-height : 1.75;
		&::before{
			margin-bottom : calc( ( 30 - 12 - 9 ) var( --remBase ) );
			font-size : 3.2rem;
			line-height : 1.75;
		}
	}
}
#title02{
	font-weight : 700;
	&::before{
		display : block;
		font-family : Arial , "Helvetica Neue" , Helvetica , sans-serif;
		color : var( --color02 );
		text-align : center;
	}
	@media screen and ( width <= 780px ){
		font-size : 1.8rem;
		line-height : calc( 29.4 / 18 );
		text-align : center;
		&::before{
			margin-bottom : calc( ( 29 - 8.25 - 5.7 ) var( --remBase ) );
			font-size : 2.2rem;
			line-height : 1.75;
		}
	}
	@media print , screen and ( width > 780px ){
		font-size : 3.6rem;
		line-height : calc( 42 / 36 );
		&::before{
			margin-bottom : calc( ( 100 - 12 - 3 ) var( --remBase ) );
			font-size : 3.2rem;
			line-height : 1.75;
		}
	}
}