@charset "UTF-8";

.pht-bg {
	position: relative;
	width: fit-content;
}
.pht-bg:before {
	content: "";
	width: 100%;
	height: 100%;
	background: #002153;
	opacity: 0.1;
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: -1;
}

.sp {
	display: none;
}
@media screen and (max-width: 1024px) {
	.pht-bg:before {
		top: 1vw;
		left: 1vw;
	}
}
@media screen and (max-width: 767px) {
	.pht-bg:before {
		top: 2vw;
		left: 2vw;
	}

	.sp {
		display: block;
	}
	.pc {
		display: none;
	}
}
	




/* about-fv
--------------------- */
#about-fv {
	position: relative;
	margin-top: 120px;
}
	#about-fv .about-fv-inner {
		width: calc( 100% - 80px );
		margin: 0 auto;
		background: url("../images/fv_bg.webp") no-repeat center / cover;
	}

		#about-fv .wrapper {
			position: relative;
			padding: 141px 0 161px;
		}
		#about-fv .wrapper::before {
			content: "Q";
			position: absolute;
			top: 30px;
			left: 15px;
			font-size: 172px;
			line-height: 1;
			font-weight: 500;
			font-family: "Jost", sans-serif;
			color: #fff;
		}
		#about-fv .wrapper::after {
			content: "A";
			position: absolute;
			bottom: -4px;
			right: 24px;
			font-size: 172px;
			line-height: 1;
			font-weight: 500;
			font-family: "Jost", sans-serif;
			color: #fff;
		}
			#about-fv .wrapper .title-box .en {
				font-size: 9rem;
				text-align: center;
				line-height: 1;
				font-weight: 500;
				margin-bottom: 20px;
			}
			#about-fv .wrapper .title-box h1 {
				font-size: 2.6rem;
				text-align: center;
				line-height: 1;
				font-weight: 700;
				margin-bottom: 50px;
			}

			#about-fv .wrapper .lead {
				font-size: 1.6rem;
				text-align: center;
				line-height: 2em;
			}
			#about-fv .wrapper .lead.start {
				margin-bottom: 30px;
			}
@media screen and (max-width: 1024px) {
	#about-fv {
		margin-top: 12vw;
	}
		#about-fv .about-fv-inner {
			width: 94.29%;
		}

			#about-fv .wrapper {
				padding: 14.1vw 0 16.1vw;
			}
			#about-fv .wrapper::before {
				top: 3vw;
				left: 1.5vw;
				font-size: 12vw;
			}
			#about-fv .wrapper::after {
				bottom: -.4vw;
				right: 2.4vw;
				font-size: 12vw;
			}
				#about-fv .wrapper .title-box .en {
					font-size: 9vw;
					margin-bottom: 2vw;
				}
				#about-fv .wrapper .title-box h1 {
					font-size: 2.6vw;
					margin-bottom: 5vw;
				}

				#about-fv .wrapper .lead {
					font-size: 1.6vw;
					line-height: 2em;
				}
				#about-fv .wrapper .lead.start {
					margin-bottom: 3vw;
				}
}
@media screen and (max-width: 767px) {
#about-fv {
	margin-top: 80px;
}
	#about-fv .about-fv-inner {
		width: 100%;
	}
		#about-fv .wrapper {
			padding: 17vw 0 16.1vw;
		}
		#about-fv .wrapper::before {
			top: 1vw;
			left: 1.6vw;
			font-size: 11vw;
		}
		#about-fv .wrapper::after {
			bottom: .7vw;
			right: 2.2vw;
			font-size: 11vw;
		}
			#about-fv .wrapper .title-box .en {
				font-size: 12.5vw;
				margin-bottom: 2.5vw;
			}
			#about-fv .wrapper .title-box h1 {
				font-size: 4.6vw;
				line-height: 1.5em;
				margin-bottom: 7vw;
			}

			#about-fv .wrapper .lead {
				font-size: 3.5vw;
				line-height: 2em;
				text-align: left;
				padding: 0 7%;
			}
			#about-fv .wrapper .lead.start {
				margin-bottom: 3vw;
			}
}





/* contents
--------------------- */
.contents-01 {
	overflow: hidden;
	padding-top: 141px;
}
	.contents-01 .box {
		margin-right: 60px;
	}
		.contents-01 .answer::before{
			left: -150px;
		}
		
.contents-02 {
	overflow: hidden;
	padding-top: 141px;
}
	.contents-02 .box {
		margin-left: 60px;
	}
		.contents-02 .answer::before{
			right: -150px;
		}
			.contents-02 .inner{
				flex-direction: row-reverse;
			}

.contents.end {
	padding-bottom: 120px;
}


.contents .inner {
	display: flex;
	justify-content: space-between;
}
	.contents .pht {
		flex-shrink: 0;
		width: 550px;
		margin-top: 60px;
	}

	.contents .box {
		position: relative;
		flex-shrink: 1;
	}
		.contents .box .question h2 {
			margin-bottom: 46px;
		}
			.contents .box .question h2 {
				font-size: 3rem;
				line-height: 1.5em;
				font-weight: 700;
			}
			.contents .box .question .sub {
				display: flex;
				align-items: center;
			}
				.contents .box .question .sub .en {
					font-size: 3rem;
					font-weight: 500;
				}
				.contents .box .question .sub .border {
					display: block;
					width: 30px;
					height: 1px;
					margin: 0 12px; 
					background: #DDDDDD;
				}
				.contents .box .question .sub .jp {
					font-size: 2rem;
					font-weight: 700;
				}
		
		.contents .answer{
			position: relative;
			padding: 45px 0 55px;
		}
		.contents .answer::before{
			content: "";
			position: absolute;
			z-index: -1;
			top: 0;
			width: 975px;
			height: 100%;
			background: #007CB5;
		}
			.contents .answer .en {
				font-size: 3rem;
				font-weight: 500;
				color: #fff;
				margin-bottom: 10px;
			}
			.contents .answer h3 {
				font-size: 2.65rem;
				font-weight: 700;
				color: #fff;
				line-height: 1.45em;
				margin-bottom: 30px;
			}
			.contents .answer .txt {
				font-size: 1.5rem;
				font-weight: 500;
				color: #fff;
			}
@media screen and (max-width: 1200px) {
	.contents-01 .box {
		margin-right: 50px;
	}
		.contents-01 .answer::before{
			left: -90px;
		}
	.contents-02 .box {
		margin-left: 60px;
	}
		.contents-02 .answer::before{
			right: -90px;
		}

	.contents .pht {
		width: 480px;
	}
	
	.contents .box .question h2 {
		font-size: 2.7rem;
	}
		.contents .box .question .sub .en {
			font-size: 2.7rem;
		}
		.contents .box .question .sub .jp {
			font-size: 2rem;
		}
	
	.contents .answer::before{
		width: calc(67.29vw + 90px);
	}
		.contents .answer .en {
			font-size: 2.7rem;
		}
		.contents .answer h3 {
			font-size: 2.5rem;
			line-height: 1.5em;
		}
		.contents .answer .txt {
			font-size: 1.6rem;
		}
}
@media screen and (max-width: 1024px) {
	.contents-01 {
		padding-top: 14.1vw;
	}
		.contents-01 .box {
			margin-right: 4.7vw;
		}
			.contents-01 .answer::before{
				left: -15vw;
			}
			
	.contents-02 {
		padding-top: 14.1vw;
	}
		.contents-02 .box {
			margin-left: 4.7vw;
		}
			.contents-02 .answer::before{
				right: -15vw;
			}
	
	.contents.end {
		padding-bottom: 12vw;
	}

	.contents .pht {
		flex-shrink: 0;
		width: 40vw;
		margin-top: 5vw;
	}
	
	.contents .box .question h2 {
		margin-bottom: 3.8vw;
	}
		.contents .box .question h2 {
			font-size: 2.4vw;
		}
		
		.contents .box .question .sub .en {
			font-size: 2.5vw;
		}
		.contents .box .question .sub .border {
			width: 2.5vw;
			margin: 0 1.2vw; 
		}
		.contents .box .question .sub .jp {
			font-size: 1.6vw;
		}
	
	.contents .answer{
		padding: 4.1vw 0 5.5vw;
	}
	.contents .answer::before{
		width: 81.5vw;
	}
		.contents .answer .en {
			font-size: 2.5vw;
			margin-bottom: .6vw;
		}
		.contents .answer h3 {
			font-size: 2.15vw;
			line-height: 1.45em;
			margin-bottom: 2.5vw;
		}
		.contents .answer .txt {
			font-size: 1.5vw;
		}
}
@media screen and (max-width: 767px) {
	.contents-01 {
		padding-top: 17vw;
	}
		.contents-01 .box {
			margin-right: 0;
		}
			.contents .contents-01 .answer::before {
				left: -8%;
			}

	.contents-02 {
		padding-top: 15vw;
	}
		.contents-02 .box {
			margin-left:0;
		}
			
	.contents.end {
		padding-bottom: 20vw;
	}

	.contents .inner {
		display: block;
	}
	.contents .pht {
		flex-shrink: 0;
		width: 100%;
		margin-top: 0;
	}
	.contents .box .question h2 {
		margin-bottom: 5.4vw;
	}
		.contents .box .question h2 {
			font-size: 5.3vw;
		}
		
		.contents .box .question .sub .en {
			font-size: 5.3vw;
			line-height: 1.9;
		}
		.contents .box .question .sub .border {
			width: 4vw;
			margin: 0 2vw; 
		}
		.contents .box .question .sub .jp {
			font-size: 4vw;
		}
	
	.contents .answer{
		padding: 4.1vw 0 5.7vw;
	}
	.contents .answer::before{
		width: 130%;
		height: 120%;
	}
		.contents .answer .en {
			font-size: 5.5vw;
			margin-bottom: 0vw;
		}
		.contents .answer h3 {
			font-size: 4.7vw;
			line-height: 1.45em;
			margin-bottom: 5vw;
		}
		.contents .answer .txt {
			font-size: 3.8vw;
		}
}