@charset "utf-8";
#secondpage{
	background-color: #FFF;
}
#secondpage #mainvisual {
	display: flex;
	align-items:flex-end;
	text-align: left;
	justify-content: flex-start;
	padding: 5em;
	background-image: none;
}
#mainvisual{
	min-height: 100vh;
	background-color: #FFF;
}
#mainvisual #backgroundSlide{
	/*background-image: url("../../img/pic007.jpg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;*/
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: 2s ease 2s;
	transform: translate(0,30px);
}
#mainvisual.show #backgroundSlide{
	opacity: 1;
	transform: translate(0,0);
}
#mainvisual:after{
	background-color: rgba(255,255,255,0.75);
}
#secondpage section{
	clear: both;
}
#secondpage #mainvisual .message {
	display: block;
	position: absolute;
	top: 60%;
	transform: translate(0,-50%);
	z-index: 2;
	width: 100%;
	text-align: left;
}
#secondpage #mainvisual .message .catch{
	font-size: clamp(5vw, 9vw, 5rem);
	line-height: 1.05;
	letter-spacing: 0.05em;
	color: #FFFFFF;
	font-weight: 800;
}
#secondpage #mainvisual .message .catch span{
	display: inline-block;
	position: relative;
	color: transparent;
	-webkit-text-stroke: 1px #2c3ca0;
	background: linear-gradient(
		90deg,
		#2c3ca0 0%,
		#2c3ca0 50%,
		transparent 50%,
		transparent 100%
	);
	background-size: 200% 100%;
	background-position: 100% 0;
	background-clip: text;
	-webkit-background-clip: text;
	transition: background-position 1.8s ease;
}
#secondpage #mainvisual .message.show .catch span{
	background-position: 0 0;
}
#secondpage #mainvisual .message .catch span:nth-child(3){
	transition-delay: 1.2s;
}

#secondpage #mainvisual h1 {
	height: auto;
	width: 100%;
	color: #1a1a24;
	margin: 1em 0 0 0.3em;
	font-size: 1.5em;
	opacity: 0;
	transform: translateY(20px);
	transition:
		opacity .8s ease,
		transform .8s ease;
	transition-delay: .6s;
}
#secondpage #mainvisual .message.show h1{
	opacity: 1;
	transform: translateY(0);
}
#secondpage #mainvisual h1:before,#secondpage #mainvisual h1:after{
	display: none;
}

.cards{
	display: grid;
	grid-template-columns: repeat(2,1fr);
	gap: 2em;

	margin-top: 4em;
}
.cards li{
	position: relative;

	background: #fff;

	border:
	1px solid rgba(44,60,160,.08);

	border-radius: 0.2em;

	padding: 2.2em;
	box-shadow:
0 2px 10px rgba(25,37,87,.03),
0 8px 30px rgba(25,37,87,.04);
}
.cards li::before{
	content: "";

	position: absolute;
	top: 0;
	left: 0;

	width: 100%;
	height: 15px;

	background: #2c3ca0;

	border-radius:
	0.2em 0.2em 0 0;
}
.cards h3{
	position: relative;

	font-size: 1.2rem;
	font-weight: 700;

	color: #1a1a24;

	padding-left: .8em;

	margin-bottom: 1em;
}
.cards h3::before{
	content: "";

	position: absolute;
	left: 0;
	top: .15em;

	width: 4px;
	height: 1.1em;

	background: #cc2a3e;

	border-radius: 999px;
}
.cards p{
	line-height: 2;

	color: #3e445c;
}
.flow{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4em;
	margin-top: 4em;
	margin-bottom: 4em;
}
.flow li{
	position: relative;

	list-style: none;

	background: #fff;

	border:
	1px solid rgba(44,60,160,.08);

	border-top:
	15px solid #2c3ca0;

	border-radius: 0.2em;

	padding:
	2em 3em;

	min-width: 220px;

	text-align: center;

	box-shadow:
	0 4px 20px rgba(25,37,87,.04);
}
.flow li:not(:last-child)::after{
	content: "";

	position: absolute;

	top: 50%;
	right: -2.5em;

	width: .7em;
	height: .7em;

	border-top:
	2px solid #2c3ca0;

	border-right:
	2px solid #2c3ca0;

	transform:
	translateY(-50%)
	rotate(45deg);

	opacity: .5;
}
.flow span{
	display: block;

	font-size: .9rem;

	color:
	rgba(44,60,160,.45);

	font-weight: 700;

	letter-spacing: .08em;

	margin-bottom: .8em;
}
.flow h3{
	font-size:
	clamp(1.4rem,2vw,2rem);

	color: #2c3ca0;

	font-weight: 700;
}
.faq{
	margin-top: 4em;
}
.faq li{
	list-style: none;

	background: #fff;

	border:
	1px solid rgba(44,60,160,.08);

	border-left:
	15px solid #2c3ca0;

	border-radius: 0.2em;

	padding: 2em;

	box-shadow:
	0 4px 20px rgba(25,37,87,.04);
}
.faq li + li{
	margin-top: 1.5em;
}
.faq h3{
	display: flex;
	align-items: flex-start;
	gap: .6em;

	font-size: 1.2rem;
	font-weight: 700;

	line-height: 1.6;

	color: #1a1a24;
}
.faq h3 span{
	color: #cc2a3e;

	flex-shrink: 0;
}
.faq p{
	margin-top: 1em;
	padding-top: 1em;

	border-top:
	1px solid rgba(44,60,160,.08);

	line-height: 2;

	color: #3e445c;
}

.left-float{
	float: left;
	margin-right: 2em;
	}
#message .w920 .message .pict.left-float {
	max-width:300px; 
}

#details h3 {
	margin: 1em 0 1em;
	font-size: 1.8em;
	font-weight: 800;
	line-height: 1.4;
	letter-spacing: 0.1em;
	color: #192557;
}

#details table{
	padding: 1em 2em;
	background-color: #e0e4ff;
}
#details table tbody{
	margin-bottom: 0;
}

/*
------------------------------------------------------------*/
@media screen and (max-width:1200px){
	
}
@media screen and (max-width:1024px){
	

}

@media screen and (max-width:767px){
	#secondpage #mainvisual {
		padding: 5vw;
	}
	.indexLink ul{
		flex-wrap: wrap;
	}
	.indexLink ul li{
		flex:1 1 12em
	}
	.sBox .engH2{
		font-size: 14vw;
	}
	.cards{
		grid-template-columns: 1fr;
		gap: 1.2em;
	}

	.cards li{
		padding: 1.6em;
	}
	.flow{
		flex-direction: column;
		gap: 3em;
	}

	.flow li:not(:last-child)::after{

		top: auto;
		right: auto;

		left: 50%;
		bottom: -1.8em;

		transform:
		translateX(-50%)
		rotate(135deg);
	}
	.faq li{
		padding: 1.5em;
	}

	.faq h3{
		font-size: 1.05rem;
	}
	#message .w920 .message .pict.left-float{
		max-width: none;
		width: 50%;
		margin-right: 0em;
		float: right;
		margin-left: 1em;
	}


}

/* スマートフォン 横(ランドスケープ) */
@media only screen and (max-width:640px){







}

/* スマートフォン 縦(ポートレート) */
@media only screen and (max-width:480px){

}

@media (orientation: landscape) and (max-height: 450px) {

	
}