/* common
===============================================================*/
img{
	max-width: 100%;
}

/* Hero_area
===============================================================*/
#Hero_area {
	position: relative;
}
#Hero_area .logo{
	position: absolute;
	top: 0;
	left: 0;
	width: 53px;
	margin: 17px 20px;
}

#Hero_area .navWrap{
	position: relative;
	z-index: 12;
	background: url(../images/bg01.png?20210310) no-repeat top center / cover;
	margin: -13% 0 0;
/*	padding: 60px 0 40px;*/
	padding: 22vw 0 17vw;
}
#Hero_area ul{
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: center;
}
#Hero_area ul li{
	width: 30%;
	margin: 0 5px 9px;
}
#Hero_area ul li a{
	display: block;
}




/* Event_area
===============================================================*/
section{
	position: relative;
	margin: -50px 0 0;
	padding: 67px 0 0;
}
section h2,
section h3{
	text-indent: -9999em;
}



#Concert{
	z-index: 10;
	background: url(../images/bg02.png) no-repeat bottom center / cover;
	padding: 67px 0 50px;
}
#Concert h2{
	background: url(../../images/concert_title.png) no-repeat center / contain;
	width: 190px;
	height: 66px;
	margin: 0 auto 20px;
}
#Concert h3{
	background: url(../../images/concert_text.png) no-repeat center / contain;
	width: 325px;
	height: 13px;
	margin: 0 auto 38px;
}
#Concert ul{
	padding: 0 22px;
}
#Concert ul li{
	margin: 0 0 24px;
	text-align: center;
}
#Concert ul li .ph{
	max-width: 285px;
	margin: 0 auto;
}
#Concert ul li p.name{
	padding: 18px 0 5px;
	font-size: 18px;
}
#Concert ul li p:last-of-type{
	padding: 4px 0 0;
}
#Concert ul li p span{
	font-size: 12px;
}
#Concert a.btn{
	display: block;
	width: 165px;
	margin: 50px auto 0;
}



#Dance{
	z-index: 8;
	background: url(../images/bg03.png) no-repeat bottom center / cover;
/*	margin-top: -60px;
	padding: 97px 0 50px;*/
	padding: 67px 0 50px;
}
#Dance h2{
	background: url(../../images/dance_title.png) no-repeat center / contain;
	width: 190px;
	height: 65px;
	margin: 0 auto 17px;
}
#Dance h3{
	background: url(../../images/dance_text.png) no-repeat center / contain;
	width: 281px;
	height: 13px;
	margin: 0 auto 43px;
}
#Dance ul{
	padding: 0 22px;
}
#Dance ul li{
	margin: 0 0 36px;
	text-align: center;
}
#Dance ul li .ph{
	max-width: 285px;
	margin: 0 auto;
}
#Dance ul li p.name{
	padding: 0 0 4px;
	font-size: 18px;
}
#Dance ul li p.name span.tag{
	display: inline-block;
	color: #fff;
	background: #e23f29;
	height: 17px;
	margin: 0 0 0 7px;
	padding: 0 5px;
	font-size: 10px;
	line-height: 17px;
	text-align: center;
	vertical-align: middle;
}
#Dance ul li p.text{
	font-size: 12px;
}
#Dance a.btn{
	display: block;
	width: 165px;
	margin: 45px auto 0;
}



#Parade{
	z-index: 6;
	background: url(../images/bg04.png) no-repeat bottom center / cover;
	padding: 87px 0 25px;
}
#Parade h2{
	background: url(../../images/parade_title.png) no-repeat center / contain;
	width: 190px;
	height: 66px;
	margin: 0 auto 17px;
}
#Parade h3{
	background: url(../../images/parade_text.png) no-repeat center / contain;
	width: 236px;
	height: 13px;
	margin: 0 auto 30px;
}
#Parade .info{
	padding: 0 45px;
}
#Parade .info .textWrap{
	padding: 26px 0 0;
}
#Parade .info .textWrap dl{
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 0 15px;
}

#Parade .info .textWrap dl.tt {
	align-items: flex-start;
}
#Parade .info .textWrap dl dt{
	color: #fff;
	background: #58a529;
	width: 56px;
	height: 35px;
	border-radius: 3px;
	font-size: 12px;
	line-height: 35px;
	letter-spacing: 0.1em;
	text-align: center;
	vertical-align: top;
}
#Parade .info .textWrap dl dd{
	width: calc(100% - 67px);
	font-size: 12px;
}

#Parade .info .textWrap dl.tt dd span {
	display: inline-block;
	text-indent:-42px;
	margin:0 0 0 42px;
	font-size: 12px;
}

#Parade .info .textWrap dl dd strong{
	font-size: 14px;
}
#Parade .info .textWrap dl dd span{
	font-size: 18px;
}
#Parade .course{
	padding: 0 45px;
}
#Parade .course p.tl{
	color: #fff;
	background: #58a529;
	width: 70px;
	height: 21px;
	margin: 30px auto 14px;
	border-radius: 3px;
	font-size: 12px;
	line-height: 21px;
	letter-spacing: 0.1em;
	text-align: center;
}
#Parade .course .mapWrap ul li{
	margin: 0 0 25px;
}
#Parade .course .mapWrap ul li p{
	padding: 0 0 2px;
	font-size: 12px;
	text-indent:-40px;
	margin:0 0 0 40px;
 }



#Workshop{
	z-index: 4;
	background: url(../images/bg05.png?20210310) no-repeat bottom center / cover;
	padding: 87px 0 31.7vw;
	margin-bottom: -35px;
}
#Workshop h2{
	background: url(../../images/work_title.png) no-repeat center / contain;
	width: 212px;
	height: 67px;
	margin: 0 auto 15px;
}
#Workshop h3{
	background: url(../../images/work_text.png) no-repeat center / contain;
	width: 242px;
	height: 13px;
	margin: 0 auto 30px;
}
#Workshop .box{
	background: #fff;
	margin: 0 22px 20px;
	padding: 15px 23px 25px;
	border-radius: 15px;
}
#Workshop .box03{
	margin-bottom: 0;
}
#Workshop .box .textWrap{
	margin: 20px 0 0;
}
#Workshop .box .textWrap p.name{
	position: relative;
	margin: 0 0 12px;
	border-bottom: 1px solid #d0e2e8;
	font-size: 18px;
	text-align: center;
}
#Workshop .box .textWrap p.name span{
	font-size: 12px;
}
#Workshop .box .textWrap p.info{
	margin: 0 0 24px;

	font-size: 12px;
}
#Workshop .box .textWrap ul{
	display: flex;
	flex-wrap: wrap;
}
#Workshop .box .textWrap ul li{
	display: flex;
	align-items: center;
	margin: 0 0 16px;
	width: 100%;
}
/*
#Workshop .box .textWrap ul li.day{
	margin: 0 0 16px;
}
#Workshop .box .textWrap ul li.place{
	width: 63%;
}
#Workshop .box .textWrap ul li.price{
	width: 37%;
}*/
#Workshop .box .textWrap ul li p{
	font-size: 12px;
	white-space: nowrap;
}
#Workshop .box .textWrap ul li p.tag{
	color: #fff;
	background: #00a1d6;
	width: 56px;
	height: 35px;
	margin-right: 12px;
	border-radius: 3px;
	font-size: 12px;
	line-height: 35px;
	letter-spacing: 0.1em;
	text-align: center;
}
#Workshop .box .textWrap ul li.day p span{
	font-size: 18px;
	line-height: 1.2;
}
#Workshop .box .textWrap ul li.price p span.gray {
	color: #6a6a6a;
	font-weight: normal;
}
#Workshop .box03 .ph{
	position: relative;
}
/* #Workshop .box03 .ph::after{
	content: "";
	position: absolute;
	right: -25px;
	bottom: -7px;
	background: url(../images/work_ph03_item.png) no-repeat center / contain;
	width: 115px;
	height: 108px;
} */



#Timetable{
	z-index: 2;
	background: url(../images/bg06.png) no-repeat bottom center / cover;
	margin-top: -100px;
	padding: 72px 0 70px;
}
#Timetable h2{
	background: url(../../images/time_title.png) no-repeat center / contain;
	width: 231px;
	height: 67px;
	margin: 0 auto 15px;
}
#Timetable h3{
	background: url(../../images/time_text.png) no-repeat center / contain;
	width: 182px;
	height: 13px;
	margin: 0 auto 43px;
}
#Timetable p.scroll{
	padding: 0 0 8px;
	font-size: 10px;
	text-align: center;
}
#Timetable .wrap{
	-webkit-overflow-scrolling: touch;
	overflow: scroll;
}
#Timetable .wrap .table{
	position: relative;
	width: 736px;
	padding: 12px 22px 0;
}
#Timetable .wrap .table::after{
	content: "";
	position: absolute;
	top: -2px;
	left: 6px;
	background: url(../../images/time_item01.png) no-repeat center / contain;
	width: 87px;
	height: 45px;
}
#Timetable p.attr{
	margin: 18px 0 0;
	font-size: 10px;
	text-align: center;
}