@charset "UTF-8";

/* --------------------------------------------
TITLE
--------------------------------------------- */
.title01{
	font-weight : 700;
	color : var( --color02 );
	text-align : center;
	@media screen and ( width <= 780px ){
		font-size : 2.2rem;
		line-height : calc( 42 / 22 );
	}
	@media print , screen and ( width > 780px ){
		font-size : 3.2rem;
		line-height : calc( 42 / 32 );
	}
}

/* --------------------------------------------
MORE
--------------------------------------------- */
.more01{
	position : relative;
	display : grid;
	grid-template-columns : auto auto;
	align-items : center;
	justify-content : end;
	width : fit-content;
	height : auto;
	margin-left : auto;
	font-weight : 800;
	color : var( --color03 );
	opacity : 1;
	&::after{
		display : block;
		width : auto;
		aspect-ratio : 19.6255/10.9316;
		font-size : 0;
		content : "";
		background-image : url( "../../images/recruit/ui/arrow/down01.svg" );
		filter : var( --filterColor03 );
		background-repeat : no-repeat;
		background-position : left center;
		background-size : contain;
	}
	&[aria-expanded="true"]{
		&::after{
			rotate : -180deg;
		}
	}
	@media screen and ( width <= 780px ){
		column-gap : calc( 4 var( --remBase ) );
		font-size : 1.3rem;
		&::after{
			height : calc( 9.502 var( --remBase ) );
		}
	}
	@media print , screen and ( width > 780px ){
		column-gap : calc( 6 var( --remBase ) );
		font-size : 1.6rem;
		&::after{
			height : calc( 10.9316 var( --remBase ) );
		}
	}
}
@media ( hover : hover ){
	.more01:hover{
		color : var( --color04 );
		&::after{
			filter : var( --filterColor04 );
		}
	}
}
@media ( prefers-reduced-motion : no-preference ){
	.more01{
		transition : color var( --transitionBase ) , opacity var( --transitionBase );
		&::after{
			transition : filter var( --transitionBase ) , rotate var( --transitionBase );
		}
	}
}
.moreContentsWrapper{
	display : grid;
	grid-template-columns : 1fr;
	overflow : hidden;
	&[hidden]{
		display : grid;
	}
	&[aria-hidden="true"]{
		grid-template-rows : 0fr;
	}
	&[aria-hidden="false"]{
		grid-template-rows : 1fr;
	}
	> div{
		overflow : hidden;
	}
}
@media ( prefers-reduced-motion : no-preference ){
	.moreContentsWrapper{
		transition : grid-template-rows var( --transitionBase );
	}
}
.more01-sp{
	@media screen and ( width <= 780px ){
		position : relative;
		display : grid;
		grid-template-columns : auto auto;
		column-gap : calc( 4 var( --remBase ) );
		align-items : center;
		justify-content : end;
		width : fit-content;
		height : auto;
		margin-left : auto;
		font-size : 1.3rem;
		font-weight : 800;
		color : var( --color03 );
		opacity : 1;
		&::after{
			display : block;
			width : auto;
			height : calc( 9.502 var( --remBase ) );
			aspect-ratio : 19.6255/10.9316;
			font-size : 0;
			content : "";
			background-image : url( "../../images/recruit/ui/arrow/down01.svg" );
			filter : var( --filterColor03 );
			background-repeat : no-repeat;
			background-position : left center;
			background-size : contain;
		}
		&[aria-expanded="true"]{
			&::after{
				rotate : -180deg;
			}
		}
	}
	@media print , screen and ( width > 780px ){
		display : none;
	}
}
.moreContentsWrapper-sp{
	@media screen and ( width <= 780px ){
		display : grid;
		grid-template-columns : 1fr;
		overflow : hidden;
		&[hidden]{
			display : grid;
		}
		&[aria-hidden="true"]{
			grid-template-rows : 0fr;
		}
		&[aria-hidden="false"]{
			grid-template-rows : 1fr;
		}
		> div{
			overflow : hidden;
		}
	}
}
@media ( prefers-reduced-motion : no-preference ){
	.moreContentsWrapper-sp{
		@media screen and ( width <= 780px ){
			transition : grid-template-rows var( --transitionBase );
			&::after{
				transition : filter var( --transitionBase ) , rotate var( --transitionBase );
			}
		}
	}
}
.link01{
	position : relative;
	z-index : 1;
	display : grid;
	place-items : center;
	margin-inline : auto;
	font-weight : 700;
	color : white;
	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 screen and ( width <= 780px ){
		width : calc( 220 var( --percentBase ) );
		height : calc( 38 var( --remBase ) );
		font-size : 1.4rem;
		line-height : calc( 19.6 / 14 );
	}
	@media print , screen and ( width > 780px ){
		width : calc( 220 var( --percentBase ) );
		height : calc( 45 var( --remBase ) );
		font-size : 1.6rem;
		line-height : calc( 24.5 / 16 );
	}
}
@media ( hover : hover ){
	.link01:hover{
		@media print , screen and ( width > 780px ){
			color : var( --color03 );
			&::after{
				opacity : 1;
			}
		}
	}
}
@media ( prefers-reduced-motion : no-preference ){
	.link01{
		@media print , screen and ( width > 780px ){
			transition : color var( --transitionBase );
			&::after{
				transition : opacity var( --transitionBase );
			}
		}
	}
}