/* CSS Document */
/*==================================================

top-contents
=================================================*/

.learning-cont {
	
}
.learning-cont > section {
	position: relative;
	padding: 80px 0;
}
.learning-cont > section:nth-last-of-type(1) {
	padding: 80px 0 0;
}
.learning-cont > section {
	background-image: url("../../about/images/gray_bg.png");
	background-position: top center;
	background-repeat: no-repeat;
	background-size: contain;
}
.learning-cont > section:nth-of-type(even) {
	background: linear-gradient(0deg, #0070df, #00a5ee);
}
.learning-cont > section:nth-of-type(even)::before {
	content: " ";
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	mix-blend-mode: multiply;
	background-image: url("../../about/images/gray_bg.png");
	background-position: top center;
	background-repeat: no-repeat;
	background-size: contain;
	top: 0;
	left: 0;
	z-index: 1;
}
.learning-cont > section .inner {
	width: 90%;
	max-width: 1200px;
	position: relative;
	margin: 0 auto;
	z-index: 1;
}
.learning-cont section .inner h1 {
	color: #FFF;
	background-image: url("../../about/images/icon1.png"),url("../../environment/images/title_bg.png");
	background-position: left -20px center,right center;
	background-repeat: no-repeat;
	background-size: auto,cover;
	padding: .8em 1em .8em 160px;
}
.learning-cont section .inner h1.icon2 {
	background-image: url("../../about/images/icon2.png"),url("../../environment/images/title_bg.png");
}
.learning-cont section .inner h1.icon3 {
	background-image: url("../../about/images/icon3.png"),url("../../environment/images/title_bg.png");
}
.learning-cont section .inner h1.icon4 {
	background-image: url("../../about/images/icon4.png"),url("../../environment/images/title_bg.png");
}
.learning-cont section .inner h1.icon5 {
	background-image: url("../../about/images/icon5.png"),url("../../environment/images/title_bg.png");
}

.learning-cont section .inner p {
	font-size: clamp(1.6rem, 2vw, 2rem);
	margin: 2em 0;
}
.learning-cont > section:nth-of-type(even) .inner p {
	color: #FFF;
}
.learning-cont section .inner .photo {
	display: flex;
	flex-flow: row wrap;
}
.learning-cont section .inner .photo div {
	width: 50%;
}
.learning-cont section .inner .pict {
	width: 100%;
}

.learning-cont img {
	width: 100%;
	max-width: 100%;
	height: auto;
}

.about-cont {
	width: 100%;
	background: linear-gradient(0deg, #00bbff, #008dff);
}
.about-cont .inner {
	width: 100%;
	max-width: 1600px;
	background-image: url("../../about/images/bg.png");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	margin: 0 auto;
	padding: 80px 0 0;
}
.about-cont .inner p {
	width: 90%;
	color: #FFF;
	text-align: center;
	font-size: clamp(1.8rem, 2.4vw, 2.4rem);
	line-height: 200%;
	font-weight: 600;
	margin: 0 auto;
}
.about-cont .inner h2 {
	width: 90%;
	max-width: 580px;
	position: relative;
	margin: 2% auto 0;
	z-index: 2;
}
.about-cont .inner h1 {
	width: 90%;
	max-width: 880px;
	position: relative;
	margin: 3% auto 0;
	z-index: 2;
}
.about-cont .inner .stadium {
	width: 100%;
	position: relative;
	margin-top: -15%;
	z-index: 1;
}
.about-cont .inner .click-area {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}
.about-cont .inner .click-area > div {
	width: 13.125%;
	position: absolute;
	cursor: pointer;
	user-select: none;
	top: 0;
	left: 0;
	z-index: 1;
}
.about-cont .inner .click-area > div.point1 {
	transform: translate(272%, 300%);
}
.about-cont .inner .click-area > div.point2 {
	transform: translate(345%, 180%);
}
.about-cont .inner .click-area > div.point3 {
	transform: translate(497%, 130%);
}
.about-cont .inner .click-area > div.point4 {
	transform: translate(140%, 220%);
}
.about-cont .inner .click-area > div.point5 {
	transform: translate(115%, 110%);
}
.about-cont .inner img {
	width: 100%;
	max-width: 100%;
	height: auto;
}

.job-mw {
	width: 90%;
	max-width: 1250px;
}
.job-mw .inner .mw-cont {
	padding: 4% 5% 0;
}
.job-mw .inner .mw-cont dl {
	width: 100%;
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
	align-items: center; 
}
.job-mw .inner .mw-cont dl dt {
	width: 45%;
}
.job-mw .inner .mw-cont dl dd {
	width: 55%;
	color: #FFF;
	padding-top: .5em;
}
.job-mw .inner .mw-cont dl dd h1 {
	font-size: clamp(2.4rem, 4vw, 4rem);
	line-height: 160%;
}
.job-mw .inner .mw-cont dl dd h2 {
	font-size: clamp(2rem, 3.2vw, 3.2rem);
	line-height: 160%;
	margin: 3% 0;
}
.job-mw .inner .mw-cont dl dd a {
	width: 100%;
	display: block;
	color: #FFF;
	text-align: center;
	font-size: clamp(1.8rem, 2vw, 2rem);
	text-decoration: none;
	border: 2px solid #FFF;
	border-radius: 60px;
	background-image: url("../../images/arrow.svg");
	background-position: right 5% center;
	background-repeat: no-repeat;
	background-size: 2%;
	margin-top: 5%;
	padding: .5em 1em;
}

.close-area {
	width: 100%;
	min-height: 80px;
	display: flex;
	flex-flow: row wrap;
	align-items: flex-start;
	justify-content: space-between;
	margin-top: 3%;
	padding-left: 5%;
}
.close-area .ft-txt {
	width: 55%;
}
.close-area .mw-close {
	width: 100%;
	max-width: 280px;
	cursor: pointer;
	color: #FFF;
	text-align: center;
	background-color: #000;
	background-image: url("../../about/images/close.png");
	background-position: right 5% center;
	background-repeat: no-repeat;
	background-size: auto;
	padding: .6em 1em;
}

/* modal */

.white-popup {
	width: 100%;
	position: relative;
	background: #00a2ff;
	background-image: url("../../images/footer_border.png");
	background-position: left top;
	background-repeat: no-repeat;
	background-size: 100% 8px;
	margin: 0 auto;
	padding: 0;
}
.white-popup img {
	width: 100%;
	max-width: 100%;
	height: auto;
}
.white-popup .mfp-close {
	color: #FFF !important;
	background: #000 !important;
	opacity: 1;
}
@media only screen and (min-width:1px) and (max-width: 768px) {
	
	.top-image .bg-photo {
		width: 100%;
		position: relative;
		z-index: 0;
	}
	.top-image .bg-photo img {
		width: 130%;
		max-width: 130%;
		height: auto;
		margin-left: -12%;
	}
	
	.learning-cont {

	}
	.learning-cont > section {
		position: relative;
		padding: 8% 0;
	}
	.learning-cont > section:nth-last-of-type(1) {
		padding: 8% 0 0;
	}
	.learning-cont > section {
		background-position: center center;
		background-repeat: no-repeat;
		background-size: contain;
	}
	.learning-cont > section:nth-of-type(even)::before {
		background-image: url("../../about/images/gray_bg.png");
		background-position: center center;
	}
	.learning-cont > section .inner {
		width: 90%;
		max-width: 1200px;
		position: relative;
		margin: 0 auto;
		z-index: 1;
	}
	.learning-cont section .inner h1 {
		color: #FFF;
		background-position: left -5px center,left center;
		background-repeat: no-repeat;
		background-size: 90px,cover;
		padding: .8em 1em .8em 80px;
	}

	.learning-cont section .inner p {
		font-size: clamp(1.6rem, 2vw, 2rem);
		margin: 5% 0;
	}
	.learning-cont > section:nth-of-type(even) .inner p {
		color: #FFF;
	}
	.learning-cont section .inner .photo {
		flex-direction: column;
	}
	.learning-cont section .inner .photo div {
		width: 100%;
	}
	
	.about-cont {
		width: 100%;
		background: linear-gradient(0deg, #00bbff, #008dff);
	}
	.about-cont .inner {
		padding: 8% 0 0;
	}
	.about-cont .inner p {
		width: 90%;
		color: #FFF;
		text-align: left;
	}
	.about-cont .inner p br {
		display: none;
	}
	.about-cont .inner h2 {
		margin: 5% auto 0;
		z-index: 2;
	}
	.about-cont .inner h1 {
		width: 90%;
		max-width: 880px;
		position: relative;
		margin: 5% auto 0;
		z-index: 2;
	}
	.about-cont .inner .stadium {
		width: 100%;
		position: relative;
		margin-top: -8%;
		z-index: 1;
	}
	.about-cont .inner .click-area {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
	}
	.about-cont .inner .click-area > div {
		width: 13.125%;
		position: absolute;
		cursor: pointer;
		user-select: none;
		top: 0;
		left: 0;
		z-index: 1;
	}
	.about-cont .inner .click-area > div.point1 {
		transform: translate(272%, 300%);
	}
	.about-cont .inner .click-area > div.point2 {
		transform: translate(345%, 180%);
	}
	.about-cont .inner .click-area > div.point3 {
		transform: translate(497%, 130%);
	}
	.about-cont .inner .click-area > div.point4 {
		transform: translate(140%, 220%);
	}
	.about-cont .inner .click-area > div.point5 {
		transform: translate(115%, 110%);
	}
	.about-cont .inner img {
		width: 100%;
		max-width: 100%;
		height: auto;
	}

	.job-mw {
		width: 90%;
		max-width: 1250px;
	}
	.job-mw .inner .mw-cont {
		padding: 4% 5% 0;
	}
	.job-mw .inner .mw-cont dl {
		width: 100%;
		flex-direction: column;
	}
	.job-mw .inner .mw-cont dl dt {
		width: 80%;
	}
	.job-mw .inner .mw-cont dl dd {
		width: 100%;
		color: #FFF;
		padding-top: .5em;
	}
	.job-mw .inner .mw-cont dl dd h1 {
		text-align: center;
	}
	.job-mw .inner .mw-cont dl dd h2 {
		text-align: center;
		margin: 3% 0;
	}
	.job-mw .inner .mw-cont dl dd a {
		width: 100%;
		display: block;
		color: #FFF;
		text-align: center;
		font-size: clamp(1.8rem, 2vw, 2rem);
		text-decoration: none;
		border: 2px solid #FFF;
		border-radius: 60px;
		background-image: url("../../images/arrow.svg");
		background-position: right 5% center;
		background-repeat: no-repeat;
		background-size: 2%;
		margin-top: 5%;
		padding: .5em 1em;
	}

	.close-area {
		width: 100%;
		min-height: 120px;
		display: block;
		margin-top: 5%;
		padding-left: 5%;
	}
	.close-area .ft-txt {
		width: 55%;
		display: none;
	}
	.close-area .mw-close {
		width: 100%;
		max-width: 280px;
		cursor: pointer;
		color: #FFF;
		text-align: center;
		background-color: #000;
		background-image: url("../../about/images/close.png");
		background-position: right 5% center;
		background-repeat: no-repeat;
		background-size: auto;
		margin: 0 auto;
		padding: .8em 1em;
	}

	/* modal */

	.white-popup {
		width: 100%;
		position: relative;
		background: #00a2ff;
		background-image: url("../../images/footer_border.png");
		background-position: left top;
		background-repeat: no-repeat;
		background-size: 100% 8px;
		margin: 0 auto;
		padding: 0;
	}
	.white-popup img {
		width: 100%;
		max-width: 100%;
		height: auto;
	}
	.white-popup .mfp-close {
		color: #FFF !important;
		background: #000 !important;
		opacity: 1;
	}
}
@media only screen and (min-width:1px) and (max-width: 568px) {}
@media only screen and (min-width:1px) and (max-width: 480px) {}