@charset "utf-8";
/*******************************************************
meysen Academy Copyright(c) All Rights Reserved.
*******************************************************/

/*****************************************************
TOP
******************************************************/

#pg-volunteer {
	background-image: linear-gradient(to bottom, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, .3) 100%), url(/img/volunteer/mainVisual.jpg);
}
#pg-volunteer-heart {
	background-image: linear-gradient(to bottom, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, .3) 100%), url(/img/volunteer/heart-hands/mainVisual.jpg);
}
#pg-volunteer-legacy {
	background-image: linear-gradient(to bottom, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, .3) 100%), url(/img/volunteer/legacy-league/mainVisual.jpg);
}
.hp-bg-sub {
	padding: 0 calc((var(--window-width) - 1400px) / 2) 0;
	background: rgb(var(--season-sub-color));
	border-bottom: 0;
}

.hp-bg-sub .el-tabSelector {
	display: flex;
	flex-direction: column;
	width: calc(100% / 3);
	justify-content: center;
	align-items: center;
	color: #fff;
}

.hp-bg-sub .el-tabSelector:nth-child(2) {
	border-right: solid 1px #fff;
	border-left: solid 1px #fff;
}

.hp-bg-sub .el-tabSelector span{
  font-size: .9em;
	padding-top: .3rem;
}

.hp-bg-sub .js-active, .hp-bg-sub .el-tabSelector:hover{
	background: rgb(var(--season-main-color));
	color: #fff;
}

.el-sectionTitle.hp-marBtm-ll {
	margin-bottom: 5rem;
}

.ly-contentWide-single {
	padding-right: 5%;
	padding-left: 5%;
  padding-left: max(5%, calc((var(--window-width) - 1100px) / 2)) !important;
	padding-right: max(5%, calc((var(--window-width) - 1100px) / 2)) !important;
}

.bl-concept-wrap {
	display: flex;
}

.bl-concept-wrap p {
	width: 60%;
	margin-right: auto;
}

.bl-concept-wrap img {
	width: 30%;
	width: clamp(150px, 30%, 300px);
	height: 100%;
	object-fit: contain;
	margin-left: auto;
}

.bl-pageIntro-imgCutIn {
	 padding: 7% max(5%, calc((var(--window-width) - 1000px) / 2)) 5% !important;
	background:  linear-gradient(to bottom, rgba(var(--season-main-color), 1) 0%, rgba(var(--season-main-color), 1) 40%, rgb(256, 256, 256) 40%);
}

.bl-pageIntro-imgCutIn .el-sectionTitle{
 margin-bottom: 7%;
}

.bl-units-wrap {
  display: flex;
	justify-content: space-between;
}

.bl-unit {
	display: flex;
	flex-direction: column;
	width: 45%;
	background: #fff;
	padding: 7.5% 2.5%;
	color: var(--font-color);
}

.bl-unit img{
	width: 100%;
	margin: 0 auto 3rem;
	object-fit: contain;
	object-position: top;
}

.bl-unit .el-sectionTitle {
	font-weight: normal;
	text-align: center;
	margin-bottom: 1.5rem;
}

.bl-unit p {
  text-align: left;
	margin-bottom: 2.5rem;
}

.bl-unit a {
	display: flex;
	width: fit-content;
	width: max-content;
	margin: auto auto 0;
	padding: .5rem 2rem;
	color: rgb(var(--season-main-color)) !important;
	border: solid 2px rgb(var(--season-main-color)) !important;
	border-radius: 5rem;
  font-size: .9375rem;
}
	
.el-title-img {
	display: flex;
	width: 215px;
	height: 100%;
	object-fit: contain;
	margin: 0 auto 3rem;
}

.bl-dualRow-textBox  {
	background: #fff !important;
	color: var(--font-color) !important;
}

.bl-unit .el-footer-contact:hover, .bl-unit .el-footer-contact:active {
	background: rgb(var(--season-main-color)) !important;
	color: #fff !important;
	border: solid 2px rgb(var(--season-main-color)) !important;
}

.el-parent-btn {
	display: flex;
	width: fit-content;
	width: max-content;
	margin: auto;
	padding: .5rem 2rem;
	text-align: center;
	border: solid 2px rgb(var(--season-main-color));
	border-radius: 5rem;
	color: rgb(var(--season-main-color));
	font-size: .8125rem !important;
}

.el-parent-btn:hover, .el-parent-btn:active {
	background: rgb(var(--season-main-color));
	color: rgb(var(--season-sub-color));
}

#volunteer-qr {
	color: #fff;
	background: linear-gradient(to bottom, rgba(var(--season-main-color), .8) 0%, rgba(var(--season-main-color), .8) 100%), url(/img/volunteer/heart-hands/img4.jpg);
	background-position: center;
	background-size: cover;
}

#volunteer-qr .el-line-qr-wrap {
	display: flex;
	width: 230px;
	height: 230px;
	/* margin: auto auto min(5rem, 15%); */
	margin: auto auto;
	padding: 3rem;
	background: #fff;
	border-radius: 50%;
}

#volunteer-qr .el-line-qr-wrap img {
	display: flex;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/**text space**/
.hp-mt-spacer { margin:60px 0 28px 0 }

@media screen and (max-width : 1200px) {
}
@media screen and (max-width : 960px) {
}
@media screen and (max-width : 768px) {
	.bl-concept-wrap {
		flex-direction: column-reverse;
	}
	.bl-concept-wrap p{
	   width: 100%;
	}

	.bl-concept-wrap img{
		display: flex;
   margin: 0 auto 2rem;
	}
	
	.bl-units-wrap {
		flex-direction: column;
	}
	
	.bl-unit {
		width: 100%;
		padding: 10% 5%;
	}
	
		.bl-unit:last-of-type {
	 margin-top: 3.5rem;
	}
	
	.bl-pageIntro-imgCutIn {
		padding-bottom: 5%;
	}
	
}
@media screen and (max-width : 640px) {
	#pg-volunteer {
		background-image: linear-gradient(to bottom, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, .3) 100%), url(/img/volunteer/sp-mainVisual.jpg);
	}
	#pg-volunteer-heart {
		background-image: linear-gradient(to bottom, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, .3) 100%), url(/img/volunteer/heart-hands/sp-mainVisual.jpg);
	}
	#pg-volunteer-legacy {
		background-image: linear-gradient(to bottom, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, .3) 100%), url(/img/volunteer/legacy-league/sp-mainVisual.jpg);
	}
		.hp-bg-sub .el-tabSelector {
			width: 100%;
			height: 90px;
			}

	.hp-bg-sub .el-tabSelector:nth-child(2) {
		border-right: solid 0px #fff;
		border-left: solid 0px #fff;
		border-top: solid 1px #fff;
		border-bottom: solid 1px #fff;
	}
}
/*****************************************************
	for Microsoft Edge
*****************************************************/
@supports (-ms-ime-align:auto) {
	.bl-concept-wrap {
		max-width: 1250px;
		margin:auto;
		padding:5%;
	}
	.bl-units-wrap {
		max-width: 1250px;
		margin:auto;
		padding:0 5%;
	}
	h3.el-sectionTitle {padding:4rem 0 0;}
	#volunteer-qr .el-line-qr-wrap { margin:auto auto 1rem; }
	.ly-contentWide-single.bl-landing-smallSpace { text-align:center; }
	.el-parent-btn { display: inline-flex; }
}