@charset "utf-8";

/* =====================================================
  about
===================================================== */
#about{
	background: #FFF;
	position: relative;
	padding: 6.625rem 0 1.625rem;
}
#about::before{
	position: absolute;
	top: 0;
	left: 0;
	background: url("../img/about/about_bg.webp") no-repeat;
	background-size: cover;
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	z-index: 1;
	opacity: 0.1;
}
#about .inner{
	position: relative;
	max-width: 1200px;
	width: 80%;
	margin: 0 auto;
	z-index: 2;
}
.headlogo img{
	width: 23.125rem;
	filter: drop-shadow(2px 0px 0px #fff) drop-shadow(-2px 0px 0px #fff) drop-shadow(0px 2px 0px #fff) drop-shadow(0px -2px 0px #fff);
}
.aboutflex{
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-direction: row-reverse;
}
.aboutflex .flexright{
	width: 50rem;
	margin-left: 3.125rem;
}
.aboutflex .flexleft{
	flex: 1;
}
.aboutflex .flexleft p{
	font-size: 1.2rem; /* 0.9375rem; */
	margin-bottom: 1.875rem;
	line-height: 1.8;
	letter-spacing: 0.05em;
}
.aboutbtn{
	font-size: 0;
	margin-top: 1.875rem;
}
.aboutbottom {
	margin: 4.5rem 0;
}
.aboutbottom h3{
	color: #0f73b8;
	font-size: 2.25rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	line-height: 0.8;
	text-align: center;
	margin-bottom: 3rem;
}
.aboutbottom .founder_list{
	display: flex;
	justify-content: space-between;
}
.aboutbottom .founder_list li{
	max-width: 19%;
	width: 14.25rem;
	text-align: left;
}
.aboutbottom .founder_list li p{
	font-size: 14px; /*0.875rem; */
	margin: 0.25rem 0 0;
}
.aboutbottom .founder_list li h4{
	font-size: 16px; /* 1rem; */
	line-height: 1.25;
}
.aboutbottom .founder_list li h4 span{
	font-size: 13px; /* 0.8125rem; */
}
.borderbtn{
	color: #FFF;
	background: #0f73b8;
	display: inline-block;
	font-size: 1.25rem;
	padding: 9px;
	margin: 2rem 0 0.9375rem;
}
.borderbtn:hover{
	opacity: 0.8;
}
.borderbtn .btninner{
	border: 1px solid #FFF;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 23.75rem;
	height: 3.75rem;
}
.borderbtn .btninner div{
	display: inline-flex;
	align-items: center;
	letter-spacing: 0;
}
.borderbtn .btninner div.iconsignup::before{
	background: url("../common/img/icon_signup.svg") no-repeat center center;
	background-size: cover;
	content: "";
	display: block;
	width: 1.5rem;
	height: 1.5rem;
	margin-right: 1rem;
	filter: brightness(0) saturate(100%) invert(100%) sepia(54%) saturate(2%) hue-rotate(227deg) brightness(107%) contrast(101%);
}
.aboutmain{
	position: relative;
	display: flex;
	align-items: flex-start;
	width: 100%;
}
.aboutvisual{
	position: sticky;
	top: 0;
	width: 50%;
	height: 100vh;
	overflow: hidden;
	flex-shrink: 0;
}
.aboutvisual_image{
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
}
.aboutvisual_image.is-active{
	opacity: 1;
	visibility: visible;
}
.aboutvisual_image img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.aboutinfos{
	position: relative;
	width: 50%;
}
.aboutinfos_bg{
	position: sticky;
	top: 0;
	z-index: -1;
	width: 100%;
	height: 100vh;
	background: url("../img/about/about_contentsbg.webp") no-repeat center center;
	background-size: cover;
	margin-bottom: -100vh;
	pointer-events: none;
}
.aboutcontents_info{
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	width: 100%;
	min-height: 100vh;
	background: transparent;
}
.aboutcontents_spimage{
	display: none;
}


.aboutcontents{
	display: flex;
}
.aboutcontents_image{
	width: 50%;
}
.aboutcontents_image img{
	object-fit: cover;
	width: 100%;
}
.infoinner{
	padding: 0 9.375rem;
	text-align: center;
}
.infoinner h3{
	color: #0f73b8;
	font-size: 2rem;
	margin-bottom: 2rem;
	letter-spacing: 0.08em;
}
.infoinner .about_movie{
	max-width: 640px;
	width: 100%;
	aspect-ratio: 16 / 9;
	margin-bottom: 2.5rem;
}
.infoinner .about_movie iframe {
  width: 100%;
  height: 100%;
}
#media .infoinner .about_movie{
	margin-bottom: 1rem;
}
.infoinner .about_logo{
	margin-bottom: 2.5rem;
}
.infoinner .about_logos{
	margin-bottom: 2.5rem;
}
.infoinner .about_logos img{
	margin: 0 1rem;
}
.infoinner .contentstext{
	text-align: left;
}
.infoinner .contentstext p{
	font-size: 15px; /* 0.9375rem; */
	line-height: 1.86;
	letter-spacing: 0.06em;
	margin-top: 2rem;
}
.infoinner .contentstext p:nth-child(1){
	margin-top: 0;
}
#academy .infoinner .about_logo img{
	width: 32.125rem;
}
#meeting .infoinner .about_logos img{
	width: 15rem;
}
#tours .infoinner .about_logo img{
	width: 17.4375rem;
}
.bslogo{
	color: #0f73b8;
	font-size: 1.5rem;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	margin: 1.75rem;
}
.bslogo img{
	width: 10rem;
	margin-right: 1rem;
}
.aboutlinks{
	display: flex;
	justify-content: center;
	align-items: flex-end;
	column-gap: 2rem;
	margin-top: 2rem;
	margin-bottom: 5rem;
}
.aboutlinks a{
	display: inline-block;
}
.youtubelogo{
	width: 12rem;
	height: auto;
}
.successionlogo{
	width: 12.875rem;
	height: auto;
}

/*flow*/
.flowflex{
	display: flex;
	justify-content: space-between;
	gap:1.875rem;
	max-width: 60rem;
	width: 100%;
	margin: 2.5rem auto 5rem;
}
.step{
	position: relative;
	background: #FFF;
	width: calc((100% - 3.75rem) / 3);
	padding: 1.25rem 0 0;
}
.step .steplabel{
	position: relative;
	display: inline-flex;
	align-items: center;
	color: #FFF;
	font-size: 1.125rem;
	letter-spacing: 0.1em;
	height: 2.3125rem;
	padding-left: 1.4rem;
	padding-right: 3.75rem;
}
.step .steplabel span{
	z-index: 10;
}
.step .steplabel::before{
	position: absolute;
	left: 0;
	background: url("../common/img/bg_ribbon.svg") no-repeat right center;
	background-size: auto 100%;
	content: "";
	display: block;
	width: 100%;
	height: 100%;
}
.step::after{
	position: absolute;
	bottom: 0;
	background-size: 100% auto;
	content: "";
	display: block;
	width: 100%;
	height: 100%;
}
.step h3{
	font-size: 1.5rem;
	margin: 2.25rem 0 11.25rem;
	text-align: center;
}
.step01::after{
	background: url("../img/step01.png") no-repeat;
	background-position: bottom 1.875rem center;
	background-size: 100% auto;
}
.step02::after{
	background: url("../img/step02.png") no-repeat bottom center;
	background-position: bottom 1.25rem center;
	background-size: 100% auto;
}
.step03::after{
	background: url("../img/step03.png") no-repeat bottom center;
	background-size: 100% auto;
}
.step01::before,.step02::before{
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto 0;
	right: -1.25rem;
	background: url("../common/img/icon_steparw.svg") no-repeat;
	background-size: cover;
	content: "";
	display: block;
	width: 0.6875rem;
	height: 1.3125rem;
}
.feeinner{
	max-width: 900px;
	width: 94%;
	margin: 0 auto;
}
.feeflex{
	display: flex;
	justify-content: space-between;
	column-gap: 5rem;
	margin-bottom: 2.5rem;
}
.feeflex .flexitem{
	text-align: center;
	width: calc((100% - 5rem) / 2);
	letter-spacing: 0.1em;
}
.feeflex .flexitem h4{
	border-bottom: 1px solid #0f73b8;
	font-size: 1.5rem;
	margin-bottom: 0.625rem;
	padding-bottom: 0.625rem;
}
.feeflex .flexitem .price{
	font-size: 1.5rem;
}
.feeflex .flexitem .price span{
	font-size: 0.875rem;
}
.feeinner p{
	font-size: 0.9375rem;
	line-height: 1.8;
}

@media screen and (min-width: 1021px) and (max-width: 1600px){
	.aboutflex .flexleft p{
		font-size:16px;
	}
	.aboutbottom h3{
		font-size:24px;
	}
	.aboutbottom .founder_list li{
		width: 190px;
	}
	.aboutbottom .founder_list li p{
		font-size:13px;
	}
	.aboutbottom .founder_list li h4{
		font-size:14px;
	}
	.infoinner h3{
		font-size:26px;
	}
	.infoinner .contentstext p{
		font-size:14px;
		line-height: 1.5;
	}
	.step h3{
		font-size:20px;
	}
	.step .steplabel{
		font-size: 12px;
		padding-left: 8px;
	}
	.feeflex .flexitem h4{
		font-size:20px;
	}
	.feeflex .flexitem .price{
		font-size:18px;
	}
	.feeflex .flexitem .price span{
		font-size:14px;
	}
	.feeinner p{
		font-size:13px;
	}
	.borderbtn{
		font-size:15px;
	}
}

@media screen and (min-width: 768px) and (max-width: 1020px){
	.aboutflex .flexleft p{
		font-size:15px;
	}
	.aboutbottom h3{
		font-size:20px;
	}
	.aboutbottom .founder_list li{
		width: 150px;
	}
	.aboutbottom .founder_list li p{
		font-size:13px;
	}
	.aboutbottom .founder_list li h4{
		font-size:15px;
	}
	.infoinner h3{
		font-size:24px;
	}
	.infoinner .contentstext p{
		font-size:13px;
		line-height: 1.5;
	}
	.step h3{
		font-size:16px;
	}
	.step .steplabel{
		font-size: 12px;
		padding-left: 8px;
	}
	.feeflex .flexitem h4{
		font-size:20px;
	}
	.feeflex .flexitem .price{
		font-size:18px;
	}
	.feeflex .flexitem .price span{
		font-size:13px;
	}
	.feeinner p{
		font-size:12px;
	}
	.borderbtn{
		font-size:13px;
	}
	.borderbtn .btninner{
		width: 28.75rem;
	}
}

@media screen and (max-width: 767px){
	.headlogo img {
		width: 12rem;
	}
	.aboutflex {
		display: block;
	}
	.aboutflex .flexright {
		width:100%;
		margin-left: 0;
		margin-bottom: 1.5rem;
	}
	.borderbtn {
		display: block;
		font-size: 1rem;
		padding: 4px;
		margin: 0.5rem 0.5rem;
	}
	.borderbtn .btninner {
		border: 1px solid #FFF;
		display: inline-flex;
		justify-content: center;
		align-items: center;
		width: 100%;
	}
	.flowflex {
		display: flex;
		flex-wrap: wrap;
		margin: 1.25rem auto 2.5rem;
		gap: 2rem 0;
	}
	.step {
		position: relative;
		background: #FFF;
		width: 100%;
		padding: 0.625rem 0 0;
	}
	.step01::before,.step02::before{
		position: absolute;
		top: auto;
		left: 0;
		right: 0;
		margin: 0 auto ;
		bottom: -1.25rem;
		background: url("../common/img/icon_steparw_bottom.svg") no-repeat;
		background-size: cover;
		content: "";
		display: block;
		width: 1.3125rem;
		height: 0.6875rem;
	}
	.feeflex {
		column-gap: 2rem;
		margin-bottom: 1.25rem;
	}
	.feeflex .flexitem {
		width: calc((100% - 2rem) / 2);
	}
	.feeflex .flexitem span{
		display: block;
		text-align: center;
	}
	.borderbtn {
		display: block;
		font-size: 1rem;
		width: 100%;
		padding: 4px;
		margin: 0;
	}
	.aboutbottom {
		margin: 2.25rem 0;
	}
	.aboutbottom h3 {
		font-size: 1.5rem;
		margin-bottom: 1.5rem;
	}
	.aboutbottom .founder_list {
		display: flex;
		flex-wrap: wrap;
	}
	.aboutbottom .founder_list li {
		max-width: 100%;
		width: 48%;
		margin-bottom: 1.5rem;
	}
	.aboutmain{
		display: block;
	}

	.aboutvisual{
		display: none;
	}
	.aboutinfos{
		width: 100%;
	}
	.aboutcontents_info{
		display: block;
		width: 100%;
		min-height: 0;
	}
	.infoinner{
		background: url("../img/about/about_contentsbg.webp") no-repeat;
		background-size: cover;
	}
	.aboutcontents_spimage{
		display: block;
		width: 100%;
	}
	.aboutcontents_spimage img{
		display: block;
		width: 100%;
		height: auto;
	}
	.infoinner{
		padding: 2.5rem 1rem;
	}
	.infoinner .about_logo{
		margin-bottom: 1.25rem;
	}
	.infoinner h3{
		font-size: 1.5rem;
		margin-bottom: 1.5rem;
	}
	.infoinner .contentstext p{
		margin-top: 1rem;
	}
	.infoinner .about_logo img{
		max-width: 80% !important;
	}
	#tours .infoinner .about_logo img{
		max-width: 50% !important;
	}
	.infoinner .about_logos img{
		max-width: 45% !important;
		margin: 0 2%;
	}
	.bslogo{
		font-size: 1.25rem;
		margin: 1rem;
	}
	.bslogo img{
		width: 5rem;
		margin-right: 0.5rem;
	}
	.aboutflex .flexleft p{
		font-size:15px;
	}
	
}