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

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

#pg-campus {
	background-image: linear-gradient(to bottom, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, .3) 100%), url(/img/campus/mainVisual.jpg);
}

.bl-campus-info-wrap {
	display: flex;
	max-height: 600px;
}

.el-campus-movie, .el-campus-map {
	width: calc(var(--window-width) / 2);
	height: calc(var(--window-width) / 2);
	max-height: 600px;
}

#maruyama-movie {
	background: url(/img/campus/img.jpg);
	background-size: cover;
}

#maruyama-movie::after, #takamori-movie::after { 
background: linear-gradient(to bottom, rgba(0, 0, 0, .2) 0%, rgba(0, 0, 0, .2) 100%);
}

#takamori-movie {
	background: url(/img/campus/img4.jpg);
	background-size: cover;
}

#maruyama-map::after, #takamori-map::after{ 
background: linear-gradient(to bottom, rgba(227, 224, 220, .85) 0%, rgba(227, 224, 220, .85) 100%);
}

#maruyama-map:hover::after, #takamori-map:hover::after{ 
background: linear-gradient(to bottom, rgba(var(--season-main-color), .85) 0%, rgba(var(--season-main-color), .85) 100%);
}


.popup-image {
	width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 20% -10%;
}

.js-popup-img .icon-plus {
			position: absolute;
			top: 50%;
			left: 50%;
			width: 4rem;
			height: 4rem;
			border-radius: 50%;
			border: solid 2px rgb(var(--season-main-color));
			transform: translate( -50%, -50%);
			transition: all .3s ease-in;
			z-index: 12;
		}
			.js-popup-img .icon-plus::before {
				position: absolute;
				top: 50%;
				left: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 3rem;
				height: 3rem;
				border-radius: 50%;
				background: transparent;
				font-size: 1.5rem;
				color: rgb(var(--season-main-color));
				transform: translate( -50%, -50%);
				transition: all .3s ease-in;
			}
			.js-popup-img:hover .icon-plus {
				border:solid 2px #fff;
			}
			.js-popup-img:hover .icon-plus::before {
				background: #fff;
			}

.el-campus-movie p, .el-campus-map p {
  position: absolute;
	top: 7%;
	left: 5.5%;
  top: max(7%, 2rem);
	left: max(5.5%, 1.5rem);
	font-size: 1.5rem;
	font-weight: bold;
	line-height: 1.5em;
	z-index: 15;
	transition: all .3s ease-in;
}

.el-campus-movie p {
	color: #fff;
}

.el-campus-movie p span, .el-campus-map p span{
	font-size: .8rem;
	line-height: 0;
}

.el-campus-map:hover p {
	color:#fff;
}

/**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-campus-info-wrap {
	display: flex;
	flex-direction: column;
	max-height: none;
}

.bl-campus-info-wrap:last-of-type {
	flex-direction: column-reverse;
	}
	
.el-campus-movie, .el-campus-map {
	width: var(--window-width);
	height: var(--window-width);
	max-height: 600px;
}

.el-campus-movie p, .el-campus-map p {
  top: max(5%, 1rem);
	left: max(5%, 1rem);
	font-size: 1.2rem;
	}
}

@media screen and (max-width : 640px) {
#pg-campus {
	background-image: linear-gradient(to bottom, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, .3) 100%), url(/img/campus/sp-mainVisual.jpg);
}
	

		
	
}