@charset "UTF-8";

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

/* --------------------------------------------
WRAPPER , CONTAINER , GRID CONTAINER
--------------------------------------------- */
@media screen and ( width <= 750px ){
	:root{
		--wrapPaddingInline : calc( var( --gutter ) * var( --viewportBase ) );
		--containerWidth : 100%;
		--gridContainerGutter : calc( var( --gutter ) * var( --viewportBase ) );
		--gridContainerContent : calc( var( --contentWidth ) * var( --viewportBase ) )
			--gridcontainergridtemplatecolumns : var( --gridContainerGutter ) var( --gridColumnContent ) var( --gridContainerGutter );
		--gridContainerColumnCenter : 2;
		--gridContainerLeftStartEnd : 3;
		--gridContainerRightEndStart : 2;
	}
}
@media print , screen and ( width > 750px ){
	:root{
		--wrapPaddingInline : max( calc( var( --gutter ) * var( --viewportBase ) ) , calc( ( 100% - ( var( --contentWidth ) * 1px ) ) / 2 ) );
		--containerWidth : max( 100% , calc( var( --breakPoint ) * 1px ) );
		--gridContainerGutter : min( calc( var( --gutter ) * var( --viewportBase ) ) , calc( var( --gutter ) * 1px ) );
		--gridContainerContent : min( calc( var( --contentWidth ) * var( --viewportBase ) ) , calc( var( --contentWidth ) * 1px ) );
		--gridContainerGridTemplateColumns : 1fr var( --gridContainerGutter ) var( --gridContainerContent ) var( --gridContainerGutter ) 1fr;
		--gridContainerColumnCenter : 3;
		--gridContainerLeftStartEnd : 4;
		--gridContainerRightEndStart : 3;
	}
}
.wrap{
	padding-inline : var( --wrapPaddingInline );
}
.wrap-sp{
	@media screen and ( width <= 750px ){
		padding-inline : var( --wrapPaddingInline );
	}
}
.wrap-pc{
	@media print , screen and ( width > 750px ){
		padding-inline : var( --wrapPaddingInline );
	}
}
.container{
	width : var( --containerWidth );
	@media print , screen and ( width > 750px ){
		margin-inline : auto;
	}
}
.container-sp{
	@media screen and ( width <= 750px ){
		width : var( --containerWidth );
	}
}
.container-pc{
	@media print , screen and ( width > 750px ){
		width : var( --containerWidth );
	}
}
.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 / var( --gridContainerLeftStartEnd );
	}
	.right-end{
		grid-column : var( --gridContainerRightEndStart ) / -1;
	}
}
.gridContainer-sp{
	@media screen and ( width <= 750px ){
		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 / var( --gridContainerLeftStartEnd );
		}
		.right-end{
			grid-column : var( --gridContainerRightEndStart ) / -1;
		}
	}
}
.gridContainer-pc{
	@media print , screen and ( width >= 1120px ){
		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 / var( --gridContainerLeftStartEnd );
		}
		.right-end{
			grid-column : var( --gridContainerRightEndStart ) / -1;
		}
	}
}

/* --------------------------------------------
  STATE
  --------------------------------------------- */
.is-sp{
	@media print , screen and ( width > 750px ){
		display : none;
	}
}
.is-pc{
	@media screen and ( width <= 750px ){
		display : none;
	}
}
.is-tb{
	@media screen and ( width <= 750px ){
		display : none;
	}
	@media print , screen and ( width >= 1120px ){
		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 <= 750px ){
		width : 100%;
		height : auto;
	}
}
.full-pc{
	@media print , screen and ( width > 750px ){
		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 <= 750px ){
		white-space : pre;
		content : attr( data-before-sp );
	}
}
[data-both]{
	&::before , &::after{
		white-space : pre;
		content : attr( data-both );
	}
}
@media screen and ( width <= 750px ){
	[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 > 750px ){
	[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
  --------------------------------------------- */
.sp-space{
	@media screen and ( width <= 750px ){
		&::after{
			content : " ";
		}
	}
	@media print , screen and ( width > 750px ){
		&::after{
			white-space : pre;
			content : "\A";
		}
	}
}
.pc-space{
	@media screen and ( width <= 750px ){
		&::after{
			white-space : pre;
			content : "\A";
		}
	}
	@media print , screen and ( width > 750px ){
		&::after{
			content : " ";
		}
	}
}
.sp-spaceEm{
	@media screen and ( width <= 750px ){
		&::after{
			content : "　";
		}
	}
	@media print , screen and ( width > 750px ){
		&::after{
			white-space : pre;
			content : "\A";
		}
	}
}
.pc-spaceEm{
	@media screen and ( width <= 750px ){
		&::after{
			white-space : pre;
			content : "\A";
		}
	}
	@media print , screen and ( width > 750px ){
		&::after{
			content : "　";
		}
	}
}

/* --------------------------------------------
  LH NAGATIVE MARGIN
  --------------------------------------------- */
.lh-up{
	margin-top : calc( ( 1em - 1lh )  / 2 );
}
.lh-up-sp{
	@media screen and ( width <= 750px ){
		margin-top : calc( ( 1em - 1lh )  / 2 );
	}
}
.lh-up-pc{
	@media print , screen and ( width > 750px ){
		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;
	.logo{
		display : block;
		flex-shrink : 0;
		grid-row : 1;
	}
	@media screen and ( width <= 750px ){
		padding-inline : calc( 10 * var( --viewportBase ) );
		.logo{
			img{
				height : calc( 38.86 * var( --remBase ) );
			}
		}
	}
	@media print , screen and ( width > 750px ){
		grid-template-columns : calc( 25 * 100% / 1440 ) auto 1fr auto calc( 20 * 100% / 1440 );
		align-items : center;
		padding-inline : calc( ( 100% - 1440px ) / 2 );
		.logo{
			grid-column : 2;
			img{
				height : calc( 51 * var( --remBase ) );
			}
		}
		.contact{
			display : grid;
			grid-row : 1;
			grid-column : 4;
			place-items : center;
			height : calc( 37 * var( --remBase ) );
			padding-inline : calc( 20 * var( --remBase ) );
			font-size : calc( 14 * var( --remBase ) );
			font-weight : 500;
			color : var( --blue );
			border-radius : 100vmax;
			outline : solid var( --blue ) 1px;
			outline-offset : -1px;
		}
	}
}

/* --------------------------------------------
FRAME
--------------------------------------------- */
.frame01{
	position : relative;
	z-index : 0;
	overflow : clip;
	background-color : var( --cyan03 );
	&::before{
		position : absolute;
		top : 0;
		left : 0;
		z-index : -1;
		display : block;
		width : 100%;
		aspect-ratio : 1;
		font-size : 0;
		content : "";
		background-color : var( --cyan02 );
	}
	@media screen and ( width <= 750px ){
		&::before{
			height : calc( 1600 * var( --remBase ) );
			clip-path : polygon( 0 0 , calc( 60 * var( --viewportBase ) ) 0 , 100% calc( 315 * var( --remBase ) ) , 100% 100% , 0% calc( 1220 * var( --remBase ) ) );
		}
	}
	@media print , screen and ( width > 750px ){
		&::before{
			height : calc( 2631 * var( --remBase ) );
			clip-path : polygon( 0 0 , calc( 50% - ( 250 * var( --viewportBase ) ) ) 0 , 100% calc( 969 * 100vw / 1440 ) , 100% 100% , 0% calc( 1191 * 100vw / 1440 ) );
		}
	}
}
.frame02{
	position : relative;
	z-index : 0;
	overflow : clip;
	background-color : var( --cyan03 );
	&::before{
		position : absolute;
		left : 0;
		z-index : -1;
		display : block;
		width : 100%;
		aspect-ratio : 1;
		font-size : 0;
		content : "";
		background-color : var( --cyan02 );
	}
	@media screen and ( width <= 750px ){
		&::before{
			top : calc( 60 * var( --remBase ) );
			height : calc( 1656 * var( --remBase ) );
			clip-path : polygon( 0 0 , 100% calc( 370 * 100% / 1656 ) , 100% 100% , 0 calc( 100% - ( 370 * 100% / 1656 ) ) );
		}
	}
	@media print , screen and ( width > 750px ){
		&::before{
			top : 0;
			height : calc( 2640 * var( --remBase ) );
			clip-path : polygon( 0 0 , calc( 50% - ( 250 * var( --viewportBase ) ) ) 0 , 100% calc( 969 * 100vw / 1440 ) , 100% 100% , 0% calc( 1191 * 100vw / 1440 ) );
		}
	}
}

/* --------------------------------------------
BREADCRUMBS
--------------------------------------------- */
#breadcrumbs{
	ol{
		display : flex;
		flex-wrap : wrap;
		align-items : center;
	}
	li{
		font-size : calc( 16 * var( --remBase ) );
		font-weight : 700;
		line-height : calc( 22 / 16 );
		color : var( --blue );
	}
	a{
		display : block;
		color : var( --base );
	}
	li:not( :last-child ) a{
		display : grid;
		grid-template-columns : auto auto;
		align-items : start;
		justify-content : start;
		&::after{
			display : block;
			width : auto;
			aspect-ratio : 8 / 10;
			margin-inline : calc( 15 * var( --remBase ) );
			font-size : 0;
			content : "";
			background : url( "../images/parts/breadcrumbs/arrow.svg" ) left top / contain no-repeat;
		}
	}
	@media screen and ( width <= 750px ){
		padding-block : calc( 30 * var( --remBase ) );
		li{
			&:not( :last-child ) a{
				&::after{
					height : calc( 9.12 * var( --remBase ) );
					margin-top : calc( ( ( 22 - 9.12 ) / 2 ) * var( --remBase ) );
				}
			}
		}
	}
	@media print , screen and ( width > 750px ){
		height : calc( 102 * var( --remBase ) );
		ol{
			height : 100%;
		}
		li{
			&:not( :last-child ) a{
				&::after{
					height : calc( 9.82 * var( --remBase ) );
					margin-top : calc( ( ( 22 - 9.82 ) / 2 ) * var( --remBase ) );
				}
			}
		}
	}
}

/* --------------------------------------------
TITLE
--------------------------------------------- */
.title01{
	font-family : "Zen Kaku Gothic New" , sans-serif;
	font-weight : 700;
	line-height : 1.5;
	color : var( --blue );
	text-align : center;
	&::before , &::after{
		display : block;
		font-size : 0;
		content : "";
	}
	&::before{
		width : 100%;
		background-repeat : no-repeat;
		background-position : center top;
		background-size : auto 100%;
	}
	&::after{
		width : fit-content;
		width : auto;
		height : calc( 12 * var( --remBase ) );
		aspect-ratio : 56/12;
		margin-inline : auto;
		margin-top : calc( 20 * var( --remBase ) );
	}
	&.dots01::after{
		background : url( "../images/ui/parts/dots01.svg" ) left top / contain no-repeat;
	}
	&.dots02::after{
		background : url( "../images/ui/parts/dots02.svg" ) left top / contain no-repeat;
	}
	&.dots03::after{
		background : url( "../images/ui/parts/dots03.svg" ) left top / contain no-repeat;
	}
	@media screen and ( width <= 750px ){
		font-size : calc( 24 * var( --remBase ) );
	}
	@media print , screen and ( width > 750px ){
		font-size : calc( 36 * var( --remBase ) );
	}
}
.title02{
	font-family : "Zen Kaku Gothic New" , sans-serif;
	color : var( --blue );
	text-align : center;
	&::before{
		display : block;
		width : 100%;
		font-size : 0;
		content : "";
		filter : var( --filterCyan01 );
		background-repeat : no-repeat;
		background-position : center;
		background-size : auto 100%;
	}
	@media screen and ( width <= 750px ){
		font-size : calc( 24 * var( --remBase ) );
		line-height : 1.5;
	}
	@media print , screen and ( width > 750px ){
		font-size : calc( 36 * var( --remBase ) );
		line-height : calc( 52 / 36 );
	}
}

/* --------------------------------------------
LIST
--------------------------------------------- */
.card-job{
	position : relative;
	background-color : white;
	hgroup{
		p{
			position : absolute;
			font-family : "Noto Sans JP" , sans-serif;
			font-weight : 700;
			line-height : 1.2;
		}
		.growth{
			line-height : 1.2;
			color : #574212;
			text-align : center;
			background-color : var( --gold );
		}
		.inexperienced{
			display : grid;
			align-items : center;
			justify-content : start;
			color : var( --blue );
			background-color : #dce5fb;
			&::after{
				position : absolute;
				display : block;
				width : auto;
				aspect-ratio : 30/44;
				font-size : 0;
				content : "";
				background : url( "../images/ui/icon/inexperienced.svg" ) left top / contain no-repeat;
			}
		}
		:where( h1 , h2 ){
			padding-bottom : calc( 10 * var( --remBase ) );
			font-weight : 700;
			line-height : 1.6;
			color : var( --blue );
			border-bottom : solid calc( 2 * var( --remBase ) ) var( --cyan01 );
		}
	}
	.update{
		display : grid;
		grid-template-columns : auto auto;
		align-items : baseline;
		justify-content : end;
		font-size : calc( 14 * var( --remBase ) );
		font-weight : 500;
		line-height : 1.6;
		color : #979797;
		+ .body{
			dl{
				border-top : 1px solid var( --cyan01 );
			}
		}
	}
	.body{
		dl{
			> div{
				border-bottom : 1px solid var( --cyan01 );
			}
		}
		:where( dt , dd ){
			font-size : calc( 16 * var( --remBase ) );
			line-height : 1.6;
		}
		dt{
			font-weight : 700;
		}
		dt[class]{
			display : grid;
			grid-template-columns : auto auto;
			align-items : center;
			justify-content : start;
			&::before{
				display : block;
				width : auto;
				height : calc( 30 * var( --remBase ) );
				aspect-ratio : 1;
				font-size : 0;
				content : "";
				background-repeat : no-repeat;
				background-position : left center;
				background-size : contain;
			}
		}
		dd{
			font-weight : 500;
		}
		.company{
			&::before{
				background-image : url( "../images/ui/icon/company.svg" );
			}
		}
		.salary{
			&::before{
				background-image : url( "../images/ui/icon/money.svg" );
			}
		}
		.occupation{
			&::before{
				background-image : url( "../images/ui/icon/person.svg" );
			}
		}
		.hours{
			&::before{
				background-image : url( "../images/ui/icon/time.svg" );
			}
		}
		.workplace{
			&::before{
				background-image : url( "../images/ui/icon/mappin.svg" );
			}
		}
	}
	@media screen and ( width <= 750px ){
		padding-block : calc( 30 * var( --remBase ) );
		padding-inline : calc( 20 * var( --contentBase ) );
		border-radius : calc( 15 * var( --remBase ) );
		+ .card-job{
			margin-top : calc( 30 * var( --remBase ) );
		}
		hgroup{
			p{
				font-size : calc( 11 * var( --remBase ) );
			}
			.inexperienced{
				top : calc( -10.46 * var( --remBase ) );
				width : calc( 64 * var( --contentBase ) );
				height : calc( 19 * var( --remBase ) );
				padding-left : calc( 5 * var( --contentBase ) );
				&::after{
					top : calc( -6 * var( --remBase ) );
					left : calc( 56.16 * 100% / 64 );
					height : calc( 29 * var( --remBase ) );
				}
				&:has( + .growth ){
					left : calc( 116 * var( --contentBase ) );
				}
				&:not( :has( + .growth ) ){
					right : calc( 31.34 * var( --contentBase ) );
				}
			}
			.growth{
				top : calc( -10 * var( --remBase ) );
				right : calc( 20 * var( --contentBase ) );
				width : calc( 108 * var( --contentBase ) );
				height : calc( 29 * var( --remBase ) );
				padding-top : calc( 5 * var( --remBase ) );
				clip-path : polygon( 0 0 , 100% 0 , 100% calc( 23 * 100% / 29 ) , 50% 100% , 0 calc( 23 * 100% / 29 ) );
			}
			:where( h1 , h2 ){
				font-size : calc( 18 * var( --remBase ) );
			}
		}
		.update{
			margin-top : calc( 15 * var( --remBase ) );
		}
		.update + .body{
			margin-top : calc( 15 * var( --remBase ) );
		}
		.body{
			dl{
				> div{
					padding-block : calc( 10 * var( --remBase ) );
				}
			}
			dt[class]{
				column-gap : calc( 10 * var( --contentBase ) );
			}
			dd{
				margin-top : calc( 8 * var( --remBase ) );
			}
			picture{
				width : calc( 275 * var( --contentBase ) );
				margin-inline : auto;
				margin-top : calc( 20 * var( --remBase ) );
			}
		}
		.btn01{
			margin-top : calc( 20 * var( --remBase ) );
		}
	}
	@media print , screen and ( width > 750px ){
		padding-inline : calc( 30 * var( --contentBase ) );
		padding-top : calc( 40 * var( --remBase ) );
		padding-bottom : calc( 30 * var( --remBase ) );
		border-radius : calc( 20 * var( --remBase ) );
		+ .card-job{
			margin-top : calc( 40 * var( --remBase ) );
		}
		hgroup{
			p{
				font-size : calc( 16 * var( --remBase ) );
			}
			.inexperienced{
				top : calc( -9 * var( --remBase ) );
				width : calc( 94 * var( --contentBase ) );
				height : calc( 29 * var( --remBase ) );
				padding-left : calc( 10 * var( --contentBase ) );
				&::after{
					top : calc( -11 * var( --remBase ) );
					left : calc( 81.5 * 100% / 94 );
					height : calc( 44 * var( --remBase ) );
				}
				&:has( + .growth ){
					left : calc( 592 * var( --contentBase ) );
				}
				&:not( :has( + .growth ) ){
					right : calc( 36 * var( --contentBase ) );
				}
			}
			.growth{
				top : calc( -20 * var( --remBase ) );
				right : calc( 20 * var( --contentBase ) );
				width : calc( 168 * var( --contentBase ) );
				height : calc( 52 * var( --remBase ) );
				padding-top : calc( 10 * var( --remBase ) );
				clip-path : polygon( 0 0 , 100% 0 , 100% calc( 39 * 100% / 52 ) , 50% 100% , 0 calc( 39 * 100% / 52 ) );
			}
			:where( h1 , h2 ){
				font-size : calc( 20 * var( --remBase ) );
			}
		}
		.update{
			margin-top : calc( 10 * var( --remBase ) );
		}
		.update + .body{
			margin-top : calc( 10 * var( --remBase ) );
		}
		.body{
			&:has( picture ){
				display : grid;
				grid-template-columns : calc( 430 * 100% / 850 ) calc( 400 * 100% / 850 );
				align-items : start;
				justify-content : space-between;
				dl{
					> div{
						grid-template-columns : calc( 160 * 100% / 430 ) 1fr;
					}
				}
				dd{
					padding-inline : calc( 10 * 100% / 270 );
				}
			}
			&:not( :has( picture ) ){
				dl{
					> div{
						grid-template-columns : calc( 160 * 100% / 850 ) 1fr;
					}
				}
				dd{
					padding-inline : calc( 10 * 100% / 690 );
				}
			}
			dl{
				> div{
					display : grid;
					padding-block : calc( 10 * var( --remBase ) );
				}
				dt[class]{
					column-gap : calc( 10 * 100% / 420 );
					padding-left : calc( 10 * 100% / 430 );
				}
				dd{
					padding-block : calc( 2.2 * var( --remBase ) );
				}
			}
		}
		.btn01{
			margin-top : calc( 30 * var( --remBase ) );
		}
	}
}