@charset "UTF-8";

/* ------------------------------------------------
     MV               
--------------------------------------------------- */
.section.mv{
	padding-top: 80px;
	position: relative
}
.section.mv::after{
	position: absolute;
	content:'';
	width:100%;
	height:calc(100% - 20vw);
	background: var(--grad-main);
	top:0;
	left:0;
}
.section.mv .cont-inn{
	position: relative;
	z-index: 2
}
.mv-wrap{
	color:var(--col-blue);
	font-weight: 600;
	text-align: center;
	padding: 40px 0 
}
.mv-ttl-jp{
	font-size:1.6rem
}
.mv-ttl{
	font-size:6.2rem;
}

.mv-img{
	border-radius: var(--radius-180);
	overflow: hidden;
	position: relative
}
.mv-img .mv-lead{
	position: absolute;
	content:'';
	top:0;
	bottom:0;
	left:0;
	right:0;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	font-size:3.4rem;
	color:var(--col-white)
	
}

@media (max-width: 768px) {
	.section.mv{
		padding-top: 14vw;
	}
	.mv-wrap{
		padding: 4vw 0 
	}

 	.mv-ttl-jp{
		font-size:3.6vw
	}
	.mv-ttl{
		font-size:12vw;
	}
	 .mv-img{
		border-radius: var(--radius-120_sp);
	}
	.mv-img .mv-lead{
		font-size:4.4vw;
		line-height: 1.4
	}
}

/* ------------------------------------------------
     lead               
--------------------------------------------------- */
.section.lead{
	padding: 80px 0;
	text-align: center;

}
.lead .sec-ttl{
	color:var(--col-blue);
	font-size:4.2rem;
}
.lead .sec-lead{
	font-size:2.2rem;
}
.lead .sec-txt{
	font-size:1.6rem;
	line-height: 2.2
}

@media (max-width: 768px) {
	.section.lead{
		padding: 8vw 0;
		text-align: center;

	}
	.lead .sec-ttl{
		font-size:8vw;
	}
	.lead .sec-lead{
		font-size:4.2vw;
	}
	.lead .sec-txt{
		font-size:3.6vw;
		margin-top: 1.8em;
		line-height: 1.8
	}
}

/* ------------------------------------------------
     bg               
--------------------------------------------------- */
.bg-grad,
.bg-gray{
	position: relative
}
.bg-grad::before{
	position: absolute;
	content:'';
	width:96%;
	height:calc(100% - 60px);
	right:0;
	bottom:0;
	background: var(--grad-main);
	border-top-left-radius: 80px;
	border-bottom-left-radius:80px
}
.bg-gray::before{
	position: absolute;
	content:'';
	width:96%;
	height:calc(100% - 60px);
	left:0;
	bottom:0;
	background: #fbfbfb;
	border-top-right-radius: 80px;
	border-bottom-right-radius:80px
}

@media (max-width: 768px) {
	.bg-grad::before{
		height:calc(100% - 6vw);
		border-top-left-radius: 10vw;
		border-bottom-left-radius:10vw;
	}
	.bg-gray::before{
		height:calc(100% - 6vw);
		border-top-right-radius: 10vw;
		border-bottom-right-radius:10vw;
	}
}
	
/* ------------------------------------------------
     slogan               
--------------------------------------------------- */
.section.slogan{
	margin: 50px 0 100px;
	padding: 0 0 80px ;
	position: relative
}
.section.slogan::before{
	position: absolute;
	content:'';
	width:96%;
	height:calc(100% - 70px);
	right:0;
	bottom:0;
	background: var(--grad-main);
	border-top-left-radius: 80px;
	border-bottom-left-radius:80px
}


@media (max-width: 768px) {
	.section.slogan{
		margin: 4vw 0 8vw;
		padding: 0 0 8vw ;
	}

	.section.slogan::before{
		height:calc(100% - 14vw);
		border-top-left-radius: 10vw;
		border-bottom-left-radius:10vw;
	}
}



/* ------------------------------------------------
     mission               
--------------------------------------------------- */
.vision{
	margin-top: 40px;
	background-image: url("../../img/about/mission.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center bottom;

	border-radius: var(--radius-180);
	padding: 100px 0 80px;
	overflow: hidden
}

.vision .sub-ttl{
	padding: 0 80px
}
.vision .sec-lead{
	font-size:2.4rem;
	margin: 1em 0 0.5em;
	padding: 0 80px
}
.vision .sec-txt{
	padding: 0.8em 80px;
	background:rgba(255,255,255,0.80)
}


@media (max-width: 768px) {
	.vision{
		margin-top: 4vw;
		border-radius: var(--radius-120);
		padding: 8vw 0 8vw;
	}

	.vision .sub-ttl{
		padding: 0 8vw
	}
	.vision .sec-lead{
		font-size:2.4rem;
		margin: 1em 0 0.5em;
		padding: 0 8vw
	}
	.vision .sec-txt{
		padding: 0.8em 8vw;
	}

    
}




/* ------------------------------------------------
     VALUE               
--------------------------------------------------- */
.section.value{
	margin: 50px 0 100px;
	padding: 0 0 80px ;
	position: relative
}
.section.value::before{
	position: absolute;
	content:'';
	width:96%;
	height:calc(100% - 70px);
	left:0;
	bottom:0;
	background: var(--grad-main);
	border-top-right-radius: 80px;
	border-bottom-right-radius:80px
}
.value-img{
	margin: 40px auto 0;
	max-width: 880px
}

@media (max-width: 768px) {
	.section.value{
		margin: 12vw 0 ;
		padding: 0 0 8vw ;
	}
	
	.section.value::before{
		height:calc(100% - 14vw);
		border-top-right-radius: 10vw;
		border-bottom-right-radius:10vw;
	}
	.value-img{
		margin: 4vw auto 0;
		max-width: 100%
	}

}


/* ------------------------------------------------
     company link             
--------------------------------------------------- */
.section.company-link{
}
.section.company-link .cont-inn{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap:20px;
}
.section.company-link a{
	display: block;
	position: relative;
	width:calc((100% - 40px) / 3);
}

.section.company-link a .sec-ttl{
	font-size:4.2rem
}
.section.company-link .sec-ttl-wrap{
	position: absolute;
	top:20px;
	left:0;
}

.section.company-link .cta-img{
	border-radius: var(--radius-140);
	overflow: hidden
}


@media (max-width: 1080px) {
	.section.company-link a .sec-ttl{
		font-size:3.2vw
	}
	.section.company-link .sec-ttl-wrap{
		top:10px;
	}
	.section.company-link .cta-img{
		border-radius: var(--radius-100);
	}

}

@media (max-width: 768px) {

	.section.company-link .cont-inn{
		gap:4vw;
	}
	.section.company-link a{
		width:calc((100% - 8vw) / 3);
	}
	.section.company-link .sec-ttl-wrap{
		top:0;
	}
	.section.company-link .cta-img{
		border-radius: var(--radius-80_sp);
	}

}




/* ------------------------------------------------
     ancher link             
--------------------------------------------------- */
.ancher-wrap{
	display: flex;
	gap:0 28px;
	margin-top: 40px
}
.ancher-wrap .btn{
	width:calc((100% - (28px *2))/3)
}

.ancher-wrap .btn a::after{
	transform: rotate(90deg)
}

@media (max-width: 768px) {
	.ancher-wrap{
		display: flex;
		gap:0 2vw;
		margin-top: 6vw
	}
	.ancher-wrap .btn{
		width:calc((100% - (2vw *2))/3);
		
	}
	.ancher-wrap .btn a{
		padding:0.5em 1em 0.5em 0.5em;
		font-size:3.0vw;
	}
	.ancher-wrap .btn a::after{
		right:0.5em;
	}
}


/* ------------------------------------------------
     member リスト            
--------------------------------------------------- */

.member-list{
	margin: 100px 0 50px;
	padding-bottom: 90px;
}

.member-detail{
	margin-top: 60px;
	display: flex;
	align-items: flex-start;
	gap:0 48px;
}

.member-detail .detail-img{
	width:31.5%;
	border-radius: var(--radius-140);
	overflow: hidden
}
.member-detail .detail-txt{
	padding: 30px 0;
	width:calc(100% - 31.5% - 48px);
}

.member-detail .member-top{
	padding: 10px 0;
	position: relative;
}
.member-detail .member-top::before{
	position: absolute;
	content:'';
	width:calc(100% + 80px);
	height:1px;
	background: var(--col-black);
	top:0;
	right:0
}
.member-detail .member-top::after{
	position: absolute;
	content:'';
	width:calc(100% + 80px);
	height:1px;
	background: var(--col-black);
	bottom:0;
	right:0
}
.re .member-detail .member-top::before{
	right:inherit;
	left:0
}
.re .member-detail .member-top::after{
	right:inherit;
	left:0
}
.member-detail .member-name{
	font-size:2.2rem
}

.member-detail .member-lead{
	font-size:2.4rem;
	font-weight: 600;
	padding: 20px 0 10px
}

.member-detail .member-btn{
	width:100%;
	height:40px;
	position: relative;
}
.member-detail .member-btn::after{
	position: absolute;
	content:'';
	width:40px;
	height:40px;
	border:1px solid var(--col-blue);
	border-radius: 50%;
	right:0;
	bottom:0;
	margin: auto;
	background-image: url("../../img/common/arrow_blue.svg");
	background-repeat: no-repeat;
	background-size: 50%;
	background-position: center;
	transform: rotate(90deg)
}
.member-detail .member-btn::before{
	position: absolute;
	content:'VIEW MORE';
	color: var(--col-blue);
	top:calc(50% - 7px);
	right:55px;
	line-height: 1;
}

.member-detail .member-txt{
	display: none
}
.member-detail .member-btn.is-open::after{
	transform:rotate(270deg);
}
.member-detail .member-btn.is-open::before{
	position: absolute;
	content:'CLOSE';
}

@media (max-width: 768px) {
	
	.member-list{
		margin: 8vw 0 12vw;
		padding-bottom: 10vw
	}
	.member-list .sec-ttl{
		font-size:10vw
		
	}
	.member-detail{
		margin-top: 5vw;
		display: flex;
		flex-wrap: wrap;
		gap:0 1vw
	}

	.member-detail .detail-img{
		width:40%;
			border-radius: var(--radius-80_sp);
	}
	.member-detail .detail-txt{
		padding: 0 ;
		width:80%;
		margin: -1.5vw 0 0 auto
	}
	.re .member-detail .detail-img{
		order: 1;
		margin:0 0 0 auto
		}
	.re .member-detail .detail-txt{
		order: 2;
		margin: -1.5vw auto 0 0
	}

	.member-detail .member-top{
		padding: 2vw 0 ;
	}
	.member-detail .member-top::before{
		position: absolute;
		content:'';
		width:calc(100% + 8vw);
		height:1px;
		background: var(--col-black);
		top:0;
		right:0
	}
	.member-detail .member-top::after{
		position: absolute;
		content:'';
		width:calc(100% + 8vw);
		height:1px;
		background: var(--col-black);
		bottom:0;
		right:0
	}
	
	.member-detail .member-name{
		font-size:4.2vw
	}

	.member-detail .member-lead{
		font-size:4.4vw;
		font-weight: 600;
		padding: 2vw 0 1vw
	}

	.member-detail .member-btn{
		height:8vw;
	}
	.member-detail .member-btn::after{
		width:8vw;
		height:8vw;
	}
}