/* 
 sub
----------------------------------------------------------- */ 

.sub-inner{
	width: 90%;
	margin-inline: auto;
}
.sub-secion{
	padding-block: clamp(30px, 3.4vw, 65px) clamp(60px, 7.6vw, 145px);
	border-top: 1px solid var(--border-color);
}
.sub-content{
	width: 70%;
	max-width: calc(100% - 250px);
	margin-left: auto;
}
.sub-main-title{
	font-size: var(--fontsize-33);
	margin-bottom: 20px;
}
.sub-flex{
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: clamp(20px, 2.6vw, 50px);
	flex-wrap: wrap;
}
.sub-flex__content{
	width: 50%;
}
.sub-flex__img{
	flex: 1;
}
.sub-flex__img img{
	width: 100%;
	height: auto;
	border-radius: 10px;
}

/* nav */
.sub-nav{
	position: fixed;
	bottom: 0;
	left: 5%;
	margin-bottom: clamp(20px, 3.6vw, 70px);
	z-index: 999;
	width: 220px;
}
.sub-nav__title{
	text-align: center;
	padding-bottom: 15px;
	margin-bottom: 25px;
	font-size: var(--fontsize-14);
	background-image: repeating-linear-gradient(
		to right,
		var(--gray-color) 0,
		var(--gray-color) 1px,
		transparent 1px,
		transparent 5px
	);
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size: 100% 1px;
	position: relative;
}
.sub-nav__title::before{
	content: "";
	position: absolute;
	left: 0;
	bottom: -3px;
	width: 0;
	height: 0;
	border-style: solid;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	border-left: 7px solid var(--gray-color);
	border-right: 0;
}
.sub-nav__title::after{
	content: "";
	position: absolute;
	right: 0;
	bottom: -3px;
	width: 0;
	height: 0;
	border-style: solid;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	border-right: 7px solid var(--gray-color);
	border-left: 0;
}
.sub-nav__item:not(:last-child){
	margin-bottom: 16px;
}
.sub-nav__link{
	padding-left: 30px;
	transition: margin-left var(--trans-base), color var(--trans-base), text-decoration var(--trans-base);
	display: block;
	color: var(--gray-color);
	position: relative;
	letter-spacing: 0.08em;
	font-size: var(--fontsize-14);
}
html[lang="en"] .sub-nav__link{
	letter-spacing: 0;
}
.sub-nav__link:hover,
.sub-nav__link.is-active{
	margin-left: 10px;
	text-decoration: underline;
	color: var(--font-color);
}
.sub-nav__link::before,
.sub-nav__link::after{
	content: "";
	position: absolute;
	left: 0;
	top: 6px;
	width: 18px;
	height: 18px;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	transition: opacity var(--trans-base);
}
.sub-nav__link::before{
	background-image: url("../img/common/nav-arrow-gray.svg");
}
.sub-nav__link::after{
	background-image: url("../img/common/nav-arrow.svg");
	opacity: 0;
}
.sub-nav__link:hover:before,
.sub-nav__link.is-active::before{
	opacity: 0;
}
.sub-nav__link:hover::after,
.sub-nav__link.is-active::after{
	opacity: 1;
}
.sub-nav{
	transition: opacity var(--trans-base), visibility var(--trans-base), transform var(--trans-base);
}
.sub-nav.is-hidden{
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
}

/* fv */
.sub-fv{
	height: clamp(350px, 25.5vw, 490px);
	position: relative;
	background: url("../img/common/sub-fv-grade.jpg") center center / cover no-repeat;
}
.sub-fv::before{
	content: "";
	height: 80px;
	width: 90%;
	position: absolute;
	left: 50%;
	bottom: -1px;
	transform: translateX(-50%);
	background: url("../img/common/sub-fv-bg.png") center bottom -1px / contain no-repeat;
	z-index: 3;
}
.sub-fv .c-fv-glass,
.sub-fv .c-fv-overlay{
	width: 100%;
}
.sub-fv .u-text-loop{
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: auto;
}
.sub-fv .u-text-loop div{
	line-height: 1.2;
	font-weight: 300;
	font-family: var(--font-en);
	font-size: clamp(150px, 13.5vw, 260px);
	color: rgba(0,0,0,0.7);
	mix-blend-mode: overlay;
}
.sub-fv__text{
	position: relative;
	z-index: 4;
	color: #fff;
	width: min(90%,1570px);
	margin-inline: auto;
	padding-top: clamp(135px, 10.9vw, 210px);
}
.sub-fv__title {
	font-size: clamp(33px, 2.9vw, 55px);
	font-weight: 700;
	letter-spacing: 0.08em;
	margin-bottom: 5px;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	column-gap: 28px;
}
html[lang="en"] .sub-fv__title {
	font-size: clamp(30px, 2.9vw, 55px);
	letter-spacing: 0;
}
.sub-fv__en {
	font-size: var(--fontsize-16);
	font-weight: 400;
	letter-spacing: 0;
	font-family: var(--font-en);
}
@media screen and (max-width: 1280px) {
	.sub-nav{
		width: 180px;
	}
	.sub-content{
		width: calc(95% - 180px);
		max-width: none;
	}
}
@media screen and (max-width: 1024px) {
	.sub-nav{
		display: none;
	}
	.sub-content{
		width: 100%;
		max-width: none;
	}
}
@media screen and (max-width: 767px){
	.sub-fv{
		background-image: url("../img/common/sub-fv-grade-sp.jpg");
	}
	.sub-flex__content{
		width: 100%;
	}
	.sub-flex__img{
		flex: auto;
		width: 100%;
	}
}