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

/*　基本のFV　*/
.c-sub-fv {
	background: url("../img/sub/sub-fv-bg.jpg") center center / cover no-repeat;
	color: #fff;
	height: clamp(380px, 30.7vw, 590px);
	padding-block: 80px 28px;
	display: grid;
	place-items: center center;
	position: relative;
	z-index: 0;
	overflow: hidden;
}
.c-sub-fv::before{
	content: "";
	position: absolute;
	height: clamp(18px, 1.5vw, 28px);
	width: 100%;
	background-size: contain;
	background-repeat: no-repeat;
	pointer-events: none;
	display: block;
	left: 0;
	bottom: -1px;
	background-position: left bottom;
	background-image: url("../img/sub/sub-fv-left.png");
}
.c-sub-fv__title {
	font-size: clamp(35px, 3.4vw, 65px);
	font-weight: 600;
	margin-bottom: 32px;
}
.c-sub-fv__en{
	display: block;
	font-size: var(--fontsize-16);
	font-family: var(--font-en);
	font-weight: 500;
	padding-left: 30px;
	position: relative;
	z-index: 0;
}
.c-sub-fv__en::before{
	content: "";
	position: absolute;
	height: 20px;
	width: 20px;
	background: url("../img/common/logo-icon-white.svg") center center / contain no-repeat;
	display: block;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
}
.c-sub-fv__title,
.c-sub-fv .c-breadcrumb{
	padding-left: clamp(20px, 3.6vw, 70px);
}
.c-sub-fv .u-text-loop{
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: -1;
	line-height: 1;
	font-family: var(--font-en);
	font-style: italic;
	font-weight: 500;
	font-size: clamp(125px, 9.9vw, 190px);
	width: fit-content;
	/*background: linear-gradient(to bottom, rgba(255,255,255,0.25), rgba(255,255,255,0));
	-webkit-background-clip: text;
	color: transparent;*/
	
	color: rgba(255,255,255,0.25);
	-webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
	mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
}
.c-sub-fv .u-text-loop > div{
	padding-right: 0;
}

/*　広いFV　*/
.c-sub-fv-bg{
	background: url("../img/sub/sub-fv-bg-big.jpg") center center / cover no-repeat;
}
.c-sub-fv-bg .c-sub-fv{
	background-image: none;
}
.c-sub-fv-bg .c-sub-fv::before{
	display: none;
}
.c-sub-next {
	position: relative;
	z-index: 0;
	padding-bottom: clamp(50px, 6.8vw, 130px);
}
.c-sub-next::before {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: -1;
	width: 98%;
	height: calc(100% - (var(--img-h, 0px) / 2));
	background-color: var(--bg-color);
	border-radius: 100px 0 0 0;
}
.c-sub-next::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	z-index: -2;
	width: 100%;
	height: 100%;
	background: url("../img/sub/sub-next-btm.png") center bottom / 100% auto no-repeat;
}
.c-sub-next .l-inner {
	padding-left: clamp(30px, 4.9vw, 95px);
}
.c-sub-next__img {
	margin-right: calc(50% - 50vw);
}
.c-sub-next__img img {
	border-radius: 20px 0 0 20px;
	width: 100%;
	height: 100%;
}

/*　画像のFV　*/
.c-sub-fv--img::after{
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: clamp(240px, 30.7vw, 590px);
	height: clamp(230px, 22.9vw, 440px);
	background: url("../img/sub/sub-fv-img-bg.png") left bottom / contain no-repeat;
	z-index: -1;
}
.c-sub-fv--img .l-inner{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: center;
}
.c-sub-fv--img__text{
	flex: 1;
	position: relative;
	z-index: 0;
}
.c-sub-fv__img {
	width: 50vw;
	margin-right: calc(50% - 50vw);
}
.c-sub-fv__img img {
	border-radius: 20px 0 0 20px;
	width: 100%;
	height: 100%;
}
.c-sub-fv--img .c-sub-fv__title,
.c-sub-fv--img .c-breadcrumb{
	padding-left: 0;
}

/*　nav　*/
.c-sub-nav{
	margin-top: clamp(20px, 2vw, 40px);
}
.c-sub-nav__list{
	display: grid;
	grid-column-gap: 20px;
	grid-row-gap: 16px;
	grid-template-columns: repeat(2, 1fr);
}
.c-sub-nav__link{
	width: 100%;
	height: 100%;
	border: 1px solid var(--border-dark);
	border-radius: 8px;
	background-color: #fff;
	transition: border-color var(--trans-base), color var(--trans-base);
	padding: 10px 20px 10px clamp(20px, 2vw, 40px);
	font-weight: 500;
	font-size: var(--fontsize-18);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}
.c-sub-nav__link::after{
	content: "";
	width: clamp(25px, 2.3vw, 45px);
	height: clamp(25px, 2.3vw, 45px);
	background: url("../img/common/maru-arrow.svg") center center / contain no-repeat;
	transform: rotate(90deg);
}
@media (hover: hover) {
	.c-sub-nav__link:hover{
		border-color: var(--main-color);
		color: var(--main-color);
	}
}

/*　共通　*/
.c-sub-line{
	padding-top: clamp(40px, 4.1vw, 80px);
	position: relative;
	z-index: 0;
	margin-right: calc(50% - 50vw);	
}
.c-sub-line::before{
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	height: 1px;
	width: 15px;
	background-color: var(--main-color);
	z-index: 1;
}
.c-sub-line::after{
	content: "";
	position: absolute;
	right: 0;
	top: 0;
	height: 1px;
	width: 100%;
	background-color: var(--border-dark);
}
.c-sub-title{
	font-size: var(--fontsize-33);
	font-weight: 500;
	margin-bottom: clamp(40px, 4.1vw, 80px);
}
.c-sub-title--white{
	color: #fff;
}
.c-sub-title > span{
	display: block;
	font-size: var(--fontsize-14);
	color: var(--main-color);
	font-weight: 400;
}
.c-sub-simple-title{
	font-weight: 600;
	line-height: 2;
	margin-bottom: clamp(25px, 2.6vw, 50px);
	font-size: var(--fontsize-25);
}

/*　footer　*/
.footer-recruit__link::before{
	background-image: url("../img/common/footer-recruit-right-gray.png");
}
@media screen and (max-width:767px) {
	.c-sub-fv::before{
		height: 28px;
		background-image: url("../img/sub/sub-fv-left-sp.png");
	}
	.c-sub-fv__title,
	.c-sub-fv .c-breadcrumb{
		padding-left: 0;
	}
	.c-sub-nav__list{
		gap: 16px;
	}
	.c-sub-nav__link{
		font-size: 16px;
		padding: 10px 10px 10px 16px;
	}
	.c-sub-fv--img{
		height: auto;
		padding-top: 0;
	}
	.c-sub-fv--img::after{
		bottom: auto;
		top: 50px;
	}
	.c-sub-fv--img .c-sub-fv--img__text{
		height: calc(clamp(380px, 30.7vw, 590px) - 37px);
		padding-block: 80px 28px;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.c-sub-fv__img {
		width: 95vw;
		padding-left: 30px;
		margin-bottom: 30px;
	}
	.footer-recruit__link::before{
		background-image: url("../img/common/footer-recruit-right-gray-sp.png");
	}
}
@media screen and (max-width:480px) {
	.c-sub-nav__list{
		grid-template-columns: repeat(1, 1fr);
	}
}