@charset "utf-8";

body,
footer {
	padding-top: 0 !important;
}


/* -------------------------------------------------
	opening
------------------------------------------------- */

#op {
	background-color: #d20a1e;
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 1000;
	animation: op 2s linear 3.5s forwards;
}
@keyframes op {
	0% { filter: blur(0); opacity: 1;}
	100% { filter: blur(50px); opacity: 0;}
}
#op .opTtl {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 38%;
	line-height: 0;
	transform: translate(-50%, -50%);
	overflow: hidden;
	opacity: 0;
	animation: opImg 2s ease-out 0.5s forwards;
}
@keyframes opImg {
	0% { opacity: 0;}
	100% { opacity: 1;}
}


#main-visual {
	background-color: #d20a1e;
}
/*#main-visual .slick-slide {
	filter: blur(50px);
	animation: opShow 2s linear 3.5s forwards;
}*/
@keyframes opShow {
	0% { filter: blur(50px);}
	100% { filter: blur(0);}
}


@media screen and (max-width:767px) {
	
	#op .opTtl {
		top: 43%;
		left: 48%;
		width: 60%;
	}
	
}



/* -------------------------------------------------
	title
------------------------------------------------- */

@keyframes ttl1 {
	0% { height: 0;}
	100% { height: 482px;}
}
@keyframes ttl1sp {
	0% { width: 0;}
	100% { width: calc(470 / 750 * 100vw);}
}
@keyframes ttl1spls {
	0% { width: 0;}
	100% { width: calc(280 / 750 * 100vw);}
}

@keyframes ttlSub {
	0% { height: 0;}
	100% { height: 321px;}
}
@keyframes ttlSubsp {
	0% { width: 0;}
	100% { width: calc(340 / 750 * 100vw);}
}
@keyframes ttlSubspls {
	0% { width: 0;}
	100% { width: calc(202 / 750 * 100vw);}
}

@media screen and (min-width:768px) {
	
	header .ttl1Wrap {
		height: 0;
		animation: ttl1 0.8s cubic-bezier(0.785, 0.135, 0.15, 0.86) 6s forwards;
		overflow: hidden;
	}
	header .ttl1SubWrap {
		height: 0;
		animation: ttlSub 0.8s cubic-bezier(0.785, 0.135, 0.15, 0.86) 6.3s forwards;
		overflow: hidden;
	}
}
@media screen and (max-width:767px) {
	header .ttl1Wrap {
		width: 0;
		height: calc(78 / 750 * 100vw);
		animation: ttl1sp 0.8s cubic-bezier(0.785, 0.135, 0.15, 0.86) 6s forwards;
		overflow: hidden;
	}
	header .ttl1SubWrap {
		width: 0;
		height: calc(44 / 750 * 100vw);
		animation: ttlSubsp 0.8s cubic-bezier(0.785, 0.135, 0.15, 0.86) 6.3s forwards;
		overflow: hidden;
	}
}
@media (max-width:767px) and (orientation:landscape) {
	header .ttl1Wrap {
		width: 0;
		height: calc(47 / 750 * 100vw);
		animation: ttl1spls 0.8s cubic-bezier(0.785, 0.135, 0.15, 0.86) 6s forwards;
	}
	header .ttl1SubWrap {
		width: 0;
		height: calc(26 / 750 * 100vw);
		animation: ttlSubspls 0.8s cubic-bezier(0.785, 0.135, 0.15, 0.86) 6.3s forwards;
	}
}


/* -------------------------------------------------
	main-visual
------------------------------------------------- */

#main-visual {
	height: 100vh;
	position: relative;
}
#main-visual h1 {
	position: absolute;
	top: -100px;
}
#main-visual ul,
#main-visual ul li {
	height: 100vh;
}
#main-visual .item {
	width: 100%;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	left: 0;
	top: 0;
}
#main-visual .item.text {
	background: #fff;
}
#main-visual .item.text img {
	height: 65px;
}
#main-visual .item.i1 { background: url(../images/index/mv_01.jpg) no-repeat center center / cover; }
#main-visual .item.i2 { background: url(../images/index/mv_02.jpg) no-repeat center center / cover; }
#main-visual .item.i3 { background: url(../images/index/mv_03.jpg) no-repeat center center / cover; }
#main-visual .item.i4 { background: url(../images/index/mv_04.jpg) no-repeat center center / cover; }
#main-visual .item.i5 { background: url(../images/index/mv_05.jpg) no-repeat center center / cover; }
#main-visual .item.i6 { background: url(../images/index/mv_06.jpg) no-repeat center center / cover; }

@media screen and (max-width:767px) {
	#main-visual .item.text img {
		height: calc(80 / 750 * 100vw);
	}
}

/* -------------------------------------------------
	schedule
------------------------------------------------- */

#schedule {
	background: #d20a1e;
}
#schedule .group {
	padding: 70px 0;
}
#schedule ul {
	margin-top: 60px;
}
#schedule ul li + li {
	margin-top: 40px;
}
#schedule ul li a {
	display: block;
	color: #000;
	transition: color 0.2s ease-out;
}
#schedule ul li .place,
#schedule ul li .date {
	padding-left: 45px;
	white-space: nowrap;
}
#schedule ul li .place {
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	font-size: 30px;
    letter-spacing: 0.18em;
	position: relative;
}
#schedule ul li .date {
	margin-top: 0.4em;
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	font-size: 16px;
	letter-spacing: 0.1em;
}
#schedule ul li .place::before {
	width: 30px;
	height: 1px;
	background: #000;
	content: "";
	display: block;
	position: absolute;
	top: 0.5em;
	left: 0;
	transition: background 0.2s ease-out;
}

#schedule ul li.closed .place,
#schedule ul li.closed .place::before,
#schedule ul li.closed .date {
	opacity: 0.5;
}

@media print, screen and (min-width:768px) {
	#schedule .group {
		margin-left: calc(100% - 330px);
    	min-height: 430px;
	}
	#schedule .sign {
		width: 360px;
		position: absolute;
		left: 15px;
		bottom: 65px;
		z-index: 10;
	}
	#schedule ul li.closed {
		margin-top: 80px;
	}
	#schedule ul li .image {
		width: calc(100% - 370px);
		max-width: 600px;
		opacity: 0;
		transition: opacity 0.2s ease-out;
		position: absolute;
		left: 0;
		top: 70px;
		z-index: 5;
	}
	#schedule ul li .image.on {
		opacity: 1;
	}
	#schedule ul li a:hover {
		color: #fff;
	}
	#schedule ul li a:hover .place::before {
		background: #fff;
	}
}

@media print, screen and (min-width:768px) and (max-width:1040px) {
	#schedule .sign {
		width: calc(360 / 1040 * 100vw);
		left: calc(15 / 1040 * 100vw);
		bottom: calc(65 / 1040 * 100vw);
	}
	#schedule .group {
		margin-left: calc(430 / 1040 * 100vw);
	}
	#schedule ul li .place,
	#schedule ul li .date {
		padding-left: calc(45 / 1040 * 100vw);
	}
	#schedule ul li .place {
		font-size: calc(30 / 1040 * 100vw);
	}
	#schedule ul li .date {
		font-size: calc(16 / 1040 * 100vw * 0.9);
		letter-spacing: 0;
	}
	#schedule ul li .place::before {
		width: calc(30 / 1040 * 100vw);
	}
	#schedule ul li .image {
		width: calc(410 / 1040 * 100vw);
	}
}

@media screen and (max-width:767px) {
	#schedule .group {
		padding: calc(335 / 750 * 100vw) calc(90 / 750 * 100vw) calc(140 / 750 * 100vw);
	}
	#schedule .sign {
		width: calc(425 / 750 * 100vw);
		position: absolute;
		top: calc(-65 / 750 * 100vw);
		right: 3%;
	}
	#schedule ul {
		margin-top: calc(85 / 750 * 100vw);
	}
	#schedule ul li + li {
		margin-top: calc(90 / 750 * 100vw);
	}
	#schedule ul li .place,
	#schedule ul li .date {
		padding-left: calc(60 / 750 * 100vw);
	}
	#schedule ul li .place {
		font-size: calc(50 / 750 * 100vw);
	}
	#schedule ul li .place::before {
		width: calc(40 / 750 * 100vw);
	}
	#schedule ul li .date {
		margin-bottom: calc(35 / 750 * 100vw);
		font-size: calc(26 / 750 * 100vw * 0.9);
	}
}