@charset "UTF-8";

/* --------------------------------------------
MORE
--------------------------------------------- */
.more01{
	display : grid;
	place-items : center;
	font-weight : 600;
	color : white;
	background-color : var( --blue02 );
	border : solid 1px var( --blue02 );
}
@media screen and ( width <= 750px ){
	.more01{
		height : calc( 80 var( --remBase ) );
		margin-inline : auto;
		font-size : 3.2rem;
	}
}
@media print , screen and ( width > 750px ){
	.more01{
		height : calc( 40 var( --remBase ) );
		font-size : 2rem;
	}
}
@media ( hover : hover ){
	.more01:hover{
		color : var( --blue02 );
		background-color : white;
	}
}
@media ( prefers-reduced-motion : no-preference ){
	.more01{
		transition : background var( --transitionBase ) , color var( --transitionBase );
	}
}

/* --------------------------------------------
TITLE
--------------------------------------------- */
.title01{
	font-weight : 700;
	color : #01426b;
	text-align : center;
	text-indent : .06em;
	letter-spacing : .06em;
}
@media screen and ( width <= 750px ){
	.title01{
		font-size : 4rem;
	}
}
@media print , screen and ( width > 750px ){
	.title01{
		font-size : 3.6rem;
	}
}

/* --------------------------------------------
LINK
--------------------------------------------- */
.link01{
	position : relative;
	z-index : 0;
	display : grid;
	grid-template-columns : calc( var( --beforeWidth ) * 100% / var( --Link01Width ) ) auto;
	column-gap : calc( var( --columnGapWidth ) * 100% / var( --Link01Width ) );
	align-items : center;
	justify-content : center;
	overflow : hidden;
	font-weight : 700;
	color : white;
	letter-spacing : .04em;
	background-image : linear-gradient( 180deg , rgb( 0 96 177 ) 0% , rgb( 0 140 221 / .99608 ) 100% );
	border-radius : calc( 6 var( --remBase ) );
}
.link01:any-link{
	color : white;
}
.link01::before{
	display : block;
	font-size : 0;
	content : "";
	background : url( "../images/ui/arrow/right02_black.svg" ) left center / contain no-repeat;
	filter : var( --filterWhite );
}
.link01::after{
	position : absolute;
	inset : 0;
	z-index : -1;
	pointer-events : none;
	content : "";
	background-image : linear-gradient( 0deg , rgb( 0 96 177 ) 0% , rgb( 0 140 221 / .99608 ) 100% );
	opacity : 0;
}
.link01.center{
	margin-inline : auto;
}
@media screen and ( width <= 750px ){
	.link01::before{
		height : calc( var( --beforeWidth ) var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	.link01{
		--beforeWidth : 14
;
	}
	.link01::before{
		height : calc( 14 var( --remBase ) );
	}
}
@media ( hover : hover ){
	.link01:hover::after , a:hover .link01::after{
		opacity : 1;
	}
}
@media ( prefers-reduced-motion : no-preference ){
	.link01::after , a:hover .link01::after{
		transition : opacity var( --transitionBase );
	}
}

/* --------------------------------------------
STEP BOX
--------------------------------------------- */
.stepBox{
	display : grid;
	align-items : center;
}
.stepBox button{
	position : relative;
	display : grid;
	place-items : center;
	justify-content : center;
	width : 100%;
	padding-inline : 1em;
	font-weight : 500;
	line-height : 1.2;
	letter-spacing : .1em;
	border-style : solid;
	border-width : 1px;
}
.stepBox button[disabled]{
	color : #333;
	background-color : #ccc;
	border-color : #ccc;
}
.stepBox:has( .backStep ):has( .nextStep ) .backStep{
	grid-template-columns : auto 1fr;
}
.stepBox:has( .backStep ):has( .nextStep ) .nextStep{
	grid-template-columns : 1fr auto;
}
.stepBox:not( :has( .backStep ) ) button , .stepBox:not( :has( .nextStep ) ) button{
	text-align : center;
	text-indent : .1em;
}
.stepBox:not( :has( .backStep ) ) .backStep , .stepBox:not( :has( .nextStep ) ) .backStep{
	grid-template-columns : auto auto 1em;
}
.stepBox:not( :has( .backStep ) ) .backStep::before , .stepBox:not( :has( .nextStep ) ) .backStep::before{
	grid-row : 1;
	grid-column : 1;
}
.stepBox:not( :has( .backStep ) ) .backStep::after , .stepBox:not( :has( .nextStep ) ) .backStep::after{
	grid-row : 1;
	grid-column : 3;
	content : "";
}
.stepBox:not( :has( .backStep ) ) .nextStep , .stepBox:not( :has( .nextStep ) ) .nextStep{
	grid-template-columns : 1em auto auto;
}
.stepBox:not( :has( .backStep ) ) .nextStep::before , .stepBox:not( :has( .nextStep ) ) .nextStep::before{
	grid-row : 1;
	grid-column : 1;
	content : "";
}
.stepBox:not( :has( .backStep ) ) .nextStep::after , .stepBox:not( :has( .nextStep ) ) .nextStep::after{
	grid-row : 1;
	grid-column : 3;
}
@media screen and ( width <= 750px ){
	.stepBox{
		column-gap : calc( 40 var( --percentBase ) );
		margin-top : calc( 80 var( --remBase ) );
	}
	.stepBox:has( .backStep ):has( .nextStep ){
		grid-template-columns : repeat( 2 , calc( 320 var( --percentBase ) ) );
		justify-content : space-between;
	}
	.stepBox:not( :has( .backStep ) ) , .stepBox:not( :has( .nextStep ) ){
		grid-template-columns : calc( 480 var( --percentBase ) );
		justify-content : center;
	}
	.stepBox button{
		column-gap : .5em;
		padding-block : calc( 24 var( --remBase ) );
		font-size : 2.2rem;
		border-radius : calc( 12 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	.stepBox{
		column-gap : calc( 40 var( --percentBase ) );
		justify-content : center;
		margin-top : calc( 64 var( --remBase ) );
	}
	.stepBox:has( .backStep ):has( .nextStep ){
		grid-template-columns : repeat( 2 , minmax( calc( 240 * 100% / 1120 ) , auto ) );
	}
	.stepBox:not( :has( .backStep ) ) , .stepBox:not( :has( .nextStep ) ){
		grid-template-columns : minmax( calc( 240 * 100% / 1120 ) , auto );
	}
	.stepBox button{
		column-gap : 1em;
		padding-block : calc( 20 var( --remBase ) );
		font-size : 1.8rem;
		border-radius : calc( 12 var( --remBase ) );
	}
}
.backStep{
	color : var( --blue );
	border-color : var( --blue );
}
.backStep::before{
	display : block;
	grid-row : 1;
	grid-column : 1;
	font-weight : 700;
	letter-spacing : 0;
	pointer-events : none;
	content : " ＜ ";
}
.nextStep{
	color : var( --orange );
	border-color : var( --orange );
}
.nextStep::after{
	display : block;
	grid-row : 1;
	grid-column : 2;
	font-weight : 700;
	letter-spacing : 0;
	pointer-events : none;
	content : " ＞ ";
}
@media ( hover : hover ){
	:is( .backStep , .nextStep ):not( [disabled] ):hover{
		color : white;
	}
	.backStep:not( [disabled] ):hover{
		background-color : var( --blue );
	}
	.backStep:not( [disabled] ):hover::before{
		translate : -25% 0;
	}
	.nextStep:not( [disabled] ):hover{
		background-color : var( --orange );
	}
	.nextStep:not( [disabled] ):hover::after{
		translate : 25% 0;
	}
}
@media ( prefers-reduced-motion : no-preference ){
	:is( .backStep , .nextStep ){
		transition : color var( --transitionBase ) , background var( --transitionBase );
	}
	.backStep::before{
		transition : translate var( --transitionBase );
	}
	.nextStep::after{
		transition : translate var( --transitionBase );
	}
}