@charset "UTF-8";

/* --------------------------------------------
CONFIRM
--------------------------------------------- */
.id-confirm01{
	position : relative;
	overflow-x : clip;
	background-color : color-mix( in srgb , #001535 70% , transparent );
}
.id-confirm01::before{
	position : absolute;
	top : 0;
	left : 0;
	z-index : -1;
	display : block;
	width : 100%;
	height : 100%;
	content : "";
	background-image : var( --gradation01 );
}
.id-confirm01 .title01{
	color : white;
}
.id-confirm01 dl > div > dt{
	font-size : 1.5rem;
	font-weight : 700;
	line-height : 1.6;
	color : white;
}
.id-confirm01 dl > div > dd{
	font-size : 1.5rem;
	line-height : 1.6;
	color : white;
}
.id-confirm01 .buttons{
	font-size : 0;
}
.id-confirm01 .wpcf7-previous{
	display : grid;
	align-items : center;
	justify-content : center;
	background-color : white;
	border : solid 1px currentColor;
}
.id-confirm01 .submit{
	position : relative;
}
.id-confirm01 .submit::before , .id-confirm01 .submit::after{
	position : absolute;
	top : 0;
	left : 0;
	display : block;
	width : 100%;
	height : 100%;
	font-size : 0;
	content : "";
}
.id-confirm01 .submit::before{
	background : var( --gradation01 );
}
.id-confirm01 .submit::after{
	background : var( --gradation02 );
	opacity : 0;
}
.id-confirm01 .submit button[type="submit"]{
	position : relative;
	z-index : 1;
	display : grid;
	grid-template-columns : auto auto;
	align-items : center;
	justify-content : center;
	width : 100%;
	height : 100%;
	font-weight : 500;
	color : white;
}
.id-confirm01 .submit button[type="submit"]::after{
	display : block;
	width : 100%;
	aspect-ratio : 5.83/10.5;
	font-size : 0;
	content : "";
	background-image : url( "../images/ui/arrow/right01.svg" );
	filter : var( --filterWhite );
	background-repeat : no-repeat;
	background-position : left center;
	background-size : contain;
}
@media screen and ( width <= 750px ){
	.id-confirm01{
		padding-top : calc( 64 var( --remBase ) );
		padding-bottom : calc( 80 var( --remBase ) );
	}
	.id-confirm01 form{
		margin-top : calc( 50 var( --remBase ) );
	}
	.id-confirm01 dl > div + div{
		margin-top : calc( 24 var( --remBase ) );
	}
	.id-confirm01 dl > div > dd{
		margin-top : calc( 12 var( --remBase ) );
	}
	.id-confirm01 .buttons{
		margin-top : calc( 56 var( --remBase ) );
	}
	.id-confirm01 .buttons input , .id-confirm01 .buttons .submit{
		width : calc( 247 var( --percentBase ) );
		height : calc( 52 var( --remBase ) );
		margin-inline : auto;
		font-size : 1.5rem;
	}
	.id-confirm01 .buttons .submit{
		margin-top : calc( 24 var( --remBase ) );
	}
	.id-confirm01 .buttons button{
		column-gap : calc( 11.5 * 100% / 247 );
	}
	.id-confirm01 .buttons button::after{
		height : calc( 11 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	.id-confirm01{
		padding-block : calc( 100 var( --remBase ) );
	}
	.id-confirm01 form{
		margin-top : calc( 50 var( --remBase ) );
	}
	.id-confirm01 dl{
		width : calc( 800 var( --percentBase ) );
		margin-inline : auto;
	}
	.id-confirm01 dl > div{
		display : grid;
		grid-template-columns : calc( 180 * 100% / 800 ) 1fr;
		column-gap : calc( 24 * 100% / 800 );
		align-items : center;
	}
	.id-confirm01 dl > div + div{
		margin-top : calc( 40 var( --remBase ) );
	}
	.id-confirm01 .buttons{
		display : grid;
		grid-template-rows : calc( 92 var( --remBase ) );
		grid-template-columns : repeat( 2 , calc( 391 var( --percentBase ) ) );
		column-gap : calc( 40 var( --percentBase ) );
		align-items : start;
		justify-content : center;
		margin-top : calc( 56 var( --remBase ) );
	}
	.id-confirm01 .buttons input , .id-confirm01 .buttons .submit{
		grid-row : 1;
		width : 100%;
		height : 100%;
		font-size : 1.9rem;
	}
	.id-confirm01 .buttons input{
		grid-column : 1;
	}
	.id-confirm01 .buttons .submit{
		grid-column : 2;
	}
	.id-confirm01 .buttons button[type="submit"]{
		column-gap : calc( 18.5 * 100% / 391 );
	}
	.id-confirm01 .buttons button[type="submit"]::after{
		height : calc( 10.5 var( --remBase ) );
	}
}
@media ( hover : hover ){
	.id-confirm01 .submit:has( button[type="submit"]:not( :disabled ) ):hover::after{
		opacity : 1;
	}
}
@media ( prefers-reduced-motion : no-preference ){
	.id-confirm01 .submit::after{
		transition : opacity var( --transitionBase );
	}
}

/* --------------------------------------------
THANKS
--------------------------------------------- */
.id-thanks01{
	position : relative;
	overflow-x : clip;
	background-color : color-mix( in srgb , #001535 70% , transparent );
}
.id-thanks01::before{
	position : absolute;
	top : 0;
	left : 0;
	z-index : -1;
	display : block;
	width : 100%;
	height : 100%;
	content : "";
	background-image : var( --gradation01 );
}
.id-thanks01 .title01{
	color : white;
}
.id-thanks01 p{
	font-size : 1.5rem;
	line-height : 1.6;
	color : white;
}
@media screen and ( width <= 750px ){
	.id-thanks01{
		padding-top : calc( 64 var( --remBase ) );
		padding-bottom : calc( 80 var( --remBase ) );
	}
	.id-thanks01 p{
		margin-top : calc( 50 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	.id-thanks01{
		padding-block : calc( 100 var( --remBase ) );
	}
	.id-thanks01 p{
		width : calc( 800 var( --percentBase ) );
		margin-inline : auto;
		margin-top : calc( 50 var( --remBase ) );
	}
}

/* --------------------------------------------
COMPANY
--------------------------------------------- */
.id-company01{
	position : relative;
	overflow-x : clip;
}
.id-company01 picture{
	position : absolute;
}
.id-company01 li{
	display : grid;
	grid-template-columns : auto auto;
	justify-content : start;
	counter-increment : no;
}
.id-company01 li::before{
	align-items : start;
	font-family : Poppins , serif;
	font-weight : 500;
	line-height : 1;
	content : counter( no ) ".";
	background : var( --gradation01 );
	-webkit-background-clip : text;
	-webkit-text-fill-color : transparent;
}
.id-company01 li span{
	font-weight : 700;
	background : var( --gradation01 );
	-webkit-background-clip : text;
	-webkit-text-fill-color : transparent;
}
@media screen and ( width <= 750px ){
	.id-company01{
		padding-top : calc( 228.62 var( --remBase ) );
		padding-bottom : calc( 80 var( --remBase ) );
		margin-top : calc( 40 var( --remBase ) );
	}
	.id-company01 picture{
		top : 0;
		right : 0;
	}
	.id-company01 picture img{
		height : calc( 180.62 var( --remBase ) );
	}
	.id-company01 > div{
		margin-top : calc( 48 var( --remBase ) );
	}
	.id-company01 > div p , .id-company01 > div li span{
		font-size : 1.5rem;
		line-height : 1.7;
	}
	.id-company01 > div p:nth-of-type( 2 ){
		margin-top : 1lh;
	}
	.id-company01 > div ul{
		margin-block : calc( 8 var( --remBase ) );
	}
	.id-company01 > div li{
		column-gap : calc( 8 var( --percentBase ) );
		align-items : center;
	}
	.id-company01 > div li::before{
		font-size : 2rem;
	}
	.id-company01 > div li + li{
		margin-top : calc( 4 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	.id-company01{
		display : grid;
		grid-template-rows : auto calc( 466.5 var( --remBase ) );
		grid-template-columns : calc( 527 var( --percentBase ) ) 1fr;
		row-gap : calc( 56 var( --remBase ) );
		margin-bottom : calc( 136 var( --remBase ) );
	}
	.id-company01 .title01{
		grid-row : 1;
		grid-column : 1/3;
	}
	.id-company01 > div{
		grid-row : 2;
		grid-column : 1;
		align-self : center;
	}
	.id-company01 > div p , .id-company01 > div li span{
		font-size : 1.6rem;
		line-height : 2;
	}
	.id-company01 > div p:nth-of-type( 2 ){
		margin-top : 1lh;
	}
	.id-company01 > div ul{
		margin-block : calc( 16 var( --remBase ) );
	}
	.id-company01 > div li{
		column-gap : calc( 8 * 100% / 527 );
		align-items : start;
	}
	.id-company01 > div li::before{
		margin-top : calc( 4 var( --remBase ) );
		font-size : 2.4rem;
	}
	.id-company01 > div li + li{
		margin-top : calc( 8 var( --remBase ) );
	}
	.id-company01 > picture{
		bottom : 0;
	}
	.id-company01 > picture img{
		height : calc( 466.5 var( --remBase ) );
	}
}
@media screen and ( 750px < width < 1440px ){
	.id-company01 picture{
		left : calc( 515.5 var( --viewportBase ) );
	}
}
@media screen and ( width >= 1440px ) , print{
	.id-company01 > picture{
		left : calc( 50% - 54.5px );
	}
}
.id-company02 li{
	display : grid;
	align-items : center;
	justify-content : start;
	border-bottom : solid 1px #dbdbdb;
}
.id-company02 dl{
	display : grid;
	grid-auto-flow : row;
}
.id-company02 dt{
	order : 2;
}
.id-company02 dd{
	order : 1;
	font-size : 1.4rem;
}
.id-company02 time{
	font-weight : 700;
}
.id-company02 time , .id-company02 p{
	line-height : 1.6;
}
@media screen and ( width <= 750px ){
	.id-company02{
		padding-top : calc( 64 var( --remBase ) );
		padding-bottom : calc( 80 var( --remBase ) );
		background-color : color-mix( in srgb , #dfedf7 40% , transparent );
	}
	.id-company02 .box{
		width : calc( 247 var( --percentBase ) );
		margin-inline : auto;
		margin-top : calc( 48 var( --remBase ) );
	}
	.id-company02 .box picture img{
		width : 100%;
		height : auto;
	}
	.id-company02 .box dl{
		margin-top : calc( 8 var( --remBase ) );
	}
	.id-company02 .box dd{
		line-height : 1.7;
	}
	.id-company02 .box dt{
		font-size : 2rem;
		line-height : 1.7;
	}
	.id-company02 ol{
		margin-top : calc( 48 var( --remBase ) );
	}
	.id-company02 li{
		grid-template-columns : calc( 88 var( --percentBase ) ) 1fr;
		padding-bottom : calc( 22 var( --remBase ) );
	}
	.id-company02 li + li{
		padding-top : calc( 16 var( --remBase ) );
	}
	.id-company02 time , .id-company02 p{
		font-size : 1.5rem;
	}
}
@media screen and ( width > 750px ) , print{
	.id-company02 .bg{
		width : calc( 1094 var( --percentBase ) );
		padding-inline : calc( 90.5 var( --percentBase ) );
		padding-top : calc( 80 var( --remBase ) );
		padding-bottom : calc( 174 var( --remBase ) );
		margin-inline : auto;
		background-color : color-mix( in srgb , #dfedf7 40% , transparent );
	}
	.id-company02 .box{
		display : grid;
		grid-template-columns : auto auto;
		column-gap : calc( 52 * 100% / 913 );
		align-items : center;
		justify-content : center;
		margin-top : calc( 56 var( --remBase ) );
	}
	.id-company02 .box picture{
		grid-row : 1;
		grid-column : 1;
	}
	.id-company02 .box picture img{
		height : calc( 242 var( --remBase ) );
	}
	.id-company02 .box dl{
		row-gap : calc( 8 var( --remBase ) );
	}
	.id-company02 .box dd{
		line-height : 2;
	}
	.id-company02 .box dt{
		font-size : 2.4rem;
		line-height : 2;
	}
	.id-company02 ol{
		margin-top : calc( 56 var( --remBase ) );
	}
	.id-company02 li{
		grid-template-columns : calc( 120 * 100% / 913 ) 1fr;
		padding-bottom : calc( 24 var( --remBase ) );
	}
	.id-company02 li + li{
		padding-top : calc( 24 var( --remBase ) );
	}
	.id-company02 time , .id-company02 p{
		font-size : 1.6rem;
	}
}
.id-company03 dl > div{
	display : grid;
	align-items : center;
	justify-content : start;
	border-bottom : solid 1px #dbdbdb;
}
.id-company03 dt , .id-company03 dd{
	line-height : 1.6;
}
.id-company03 dt{
	font-weight : 700;
}
.id-company03 li{
	display : grid;
	grid-template-columns : 1em auto;
	align-items : start;
	justify-content : start;
}
.id-company03 li::before{
	font-weight : 700;
	text-align : center;
	content : "・";
}
@media screen and ( width <= 750px ){
	.id-company03{
		padding-bottom : calc( 80 var( --remBase ) );
		margin-top : calc( 64 var( --remBase ) );
	}
	.id-company03 dl{
		margin-top : calc( 48 var( --remBase ) );
	}
	.id-company03 dl > div{
		grid-template-columns : calc( 88 var( --percentBase ) ) 1fr;
		padding-bottom : calc( 22 var( --remBase ) );
	}
	.id-company03 dl > div + div{
		padding-top : calc( 22 var( --remBase ) );
	}
	.id-company03 dt , .id-company03 dd{
		font-size : 1.5rem;
	}
}
@media screen and ( width > 750px ) , print{
	.id-company03{
		padding-bottom : calc( 144 var( --remBase ) );
		margin-top : calc( 136.5 var( --remBase ) );
	}
	.id-company03 dl{
		width : calc( 908 var( --percentBase ) );
		margin-inline : auto;
		margin-top : calc( 56 var( --remBase ) );
	}
	.id-company03 dl > div{
		grid-template-columns : calc( 120 * 100% / 908 ) 1fr;
		padding-bottom : calc( 24 var( --remBase ) );
	}
	.id-company03 dl > div + div{
		padding-top : calc( 24 var( --remBase ) );
	}
	.id-company03 dt , .id-company03 dd{
		font-size : 1.6rem;
	}
}