@charset "utf-8";

/* intro */
#intro{
	background: url("../img/top/mvbg_pc.webp") no-repeat top center #f7f7f7;
	background-size: cover;
	padding: 60px 60px 100px;
}
.mainvisual{
	overflow: hidden;
	position: relative;
	transition: 0.5s ease-in-out;
  transform: translateY(30px);
  opacity: 0;
}
.mainvisual.on{
	transform: translateY(0);
  opacity: 1.0;
}
.mainvisual .mvlead{
	display: flex;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	align-items: center;
	-webkit-transition: 0.5s ease-in-out;
	-moz-transition: 0.5s ease-in-out;
	-o-transition: 0.5s ease-in-out;
	transition: 0.5s ease-in-out;
	transform: translateX(-30px);
	opacity: 0;
	filter: alpha(opacity=0);
	-moz-opacity: 0;
}
.mainvisual .mvlead.on{
	opacity: 1.0;
	filter: alpha(opacity=100);
	-moz-opacity: 1.0;
	transform: translateX(0);
}
.mainvisual .mvlead .leadinner{
	color: #FFF;
	background: rgba(57,87,128,0.95);
	font-size: clamp(18px,2.8vw,28px);
	text-align: center;
	line-height: 210%;
	letter-spacing: 0.12em;
	padding: 40px 80px;
}
.mainvisual .mvlead .leadinner span{
	font-size: clamp(24px,3.6vw,36px);
	font-weight: 600;
}
.aboutcontainer{
	background: rgba(255,255,255,0.95);
	width: 94%;
	max-width: 1200px;
	margin: 100px auto 0;
	padding: 100px 100px 60px;
	overflow: hidden;
}
.about .overhead p.subtext{
	color: #395780;
}
.aboutcontents{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 10px;
}
.aboutcontents .aboutconcept{
	width: calc(400 / 994 * 100%);
}
.aboutcontents .aboutinfo{
	width: calc(536 / 994 * 100%);
}
.aboutcontents .aboutinfo p{
	color: #333333;
	font-size: clamp(16px,1.8vw,18px);
	line-height: 200%;
}

/* lineup */
#lineup .overinner{
	padding-bottom: 55px;
}
.lineupimg{
	width: calc(480 / 1040 * 100%);
}
.lineuptext{
	flex: 1;
}
#lineup .contents_container{
	margin-bottom: 30px;
}


@media screen and (max-width: 768px){
	.overinner {
		background: none;
		width: 100%;
		padding: 0px;
	}
	#intro{
		background: none;
		padding: 0;
	}
	.mainvisual{
		transform: translateY(0);
	}
	.mainvisual .mvlead{
		bottom: auto;
		filter: alpha(opacity=100);
		-moz-opacity: 1.0;
		transform: translateX(0);
		width: 100%;
	}
	.mainvisual .mvlead .leadinner{
		background: none;
		color: #395780;
		width: 100%;
		margin-top: 8%;
		padding: 20px;
		text-align: center;
		font-weight: 600;
	}
	.mainvisual .scroll_down {
		position: absolute;
		width: 100%;
		height: 60px;
		background-position: 50% 50%;
		background-repeat: no-repeat;
		background-size: cover;
		bottom: 0px;
	}
	.mainvisual .scroll_down:after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 80%;
		background: linear-gradient(180deg,rgba(#FFF, 0) 0, rgba(#FFF, .8) 80%, rgba(#FFF, .8) 100%);
	}
	.mainvisual .scroll_down span {
		display: inline-block;
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 2;
		width: 40px;
		padding: 10px 10px 60px;
		color: #FFF;
		font-size: 14px;
		font-family: YakuHanMP, "Noto Serif JP", serif;
		line-height: 0.1;
		letter-spacing: .2em;
		text-transform: uppercase;
		text-decoration: none;
		writing-mode: vertical-lr;
		transition: .2s;
		overflow: hidden;
		margin: auto;
	}
	.mainvisual .scroll_down span:before {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		width: 2px;
		height: 100px;
		background: #aaaaaa;
	}
	.mainvisual .scroll_down span:after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		width: 2px;
		height: 100px;
		background: #395780;
	}
	.mainvisual .scroll_down span:hover {
		opacity: .5;
	}
	.mainvisual #type01 span:after {
		animation: sdl01 1.5s cubic-bezier(1, 0, 0, 1) infinite;
	}
	.mainvisual .scroll_down span div{
		color: #395780;
		font-size: 10px;
		position: absolute;
		bottom: 15%;
    left: 33px;
	}
	.about {
		background: url("../img/top/mvbg_sp.webp") no-repeat top center;
		background-size: cover;
		padding: 50px 15px; 
	}
	.abouthead h2 {
		margin-bottom: 10px;
	}
	.aboutcontents{
		display: block;
	}
	.aboutcontainer {
		background: rgba(255,255,255,0.95);
		width: 100%;
		margin: 0px auto 0;
		padding: 40px 25px 40px;
		overflow: hidden;
	}
	.aboutcontents .aboutinfo{
		margin-bottom: 25px;
	}
	.aboutcontents .aboutconcept,.aboutcontents .aboutinfo{
		width: 100%;
	}
	
	#lineup{
		padding-bottom: 0;
	}
	#lineup .overinner{
		padding-bottom: 20px;
	}
	.lineupimg{
		display: none;
	}
	.lineup_spimg{
		margin: 0 -15px;
	}
	.lineup_spimg:first-child{
		margin-bottom: 35px;
	}
	
	/* page */
	#lineup .bgcontainer{
		padding: 50px 15px 0;
	}
}

@keyframes sdl01 {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  50.1% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}