/* Hero_area
===============================================================*/
#Hero_area {
    position: relative;
}
#Hero_area .logo{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	width: 1000px;
	margin: 12px auto 50px;
}
#Hero_area .ph img{
	width: 100%;
}
#Hero_area h1{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 31%;
	background: url(../images/main_title.png) no-repeat center / contain;
	width: 74.9%;
	max-width: 1023px;
	height: 314px;
	margin: 0 auto;
	text-indent: -9999em;
}
/*
#Hero_area p.day{
	position: absolute;
	top: 8.3%;
	left: 0;
	right: 0;
	background: url(../images/main_day.png) no-repeat top left / 380px 248px;
	width: 74.9%;
	max-width: 1003px;
	height: 248px;
	margin: 0 auto;
	text-indent: -9999em;
}*/
#Hero_area p.day{
	position: absolute;
	top: 9.2vw;
	left: 9.6vw;
	background: url(../images/main_day.png?20210310) no-repeat top left / 380px 248px;
	width: 31.7%;
	max-width: 380px;
	height: 248px;
	text-indent: -9999em;
}
#Hero_area ul{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 14%;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	width: 74.9%;
	/* max-width: 1003px;*/
	max-width: 594px;
	margin: 0 auto;
}
#Hero_area ul li{
	/* width: 18.7%; */
	width: 31.5%;
	max-width: 187px;
}
#Hero_area ul li a{
	display: block;
	transition: .3s;
}
#Hero_area ul li a:hover{
	transform: translate(0, -10px);
}
#Hero_area ul li img{
	width: 100%;
}
#Hero_area p.copy{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 9.7%;
	/*color: #8e6325;*/
	color: #ffffff;
	width: 1080px;
	margin: 0 auto;
	font-size: 10px;
	font-weight: normal;
	text-align: right;
}




/* Event_area
===============================================================*/
section{
	position: relative;
	margin: -162px 0 0;
	padding: 162px 0 0;
}
section .inner{
	max-width: 1003px;
	margin: 0 auto;
}
section h2,
section h3{
	text-indent: -9999em;
}



#Concert{
	z-index: 10;
	background: url(../images/bg01.png) no-repeat top center / 2000px;
	height: 874px;
}
#Concert h2{
	background: url(../images/concert_title.png) no-repeat center / contain;
	width: 381px;
	height: 133px;
	margin: 0 auto 42px;
}
#Concert h3{
	background: url(../images/concert_text.png) no-repeat center / contain;
	width: 649px;
	height: 26px;
	margin: 0 auto 32px;
}
#Concert ul{
	display: flex;
	justify-content: space-between;
}
#Concert ul li{
	text-align: center;
}
#Concert ul li p.name{
	padding: 18px 0 5px;
	font-size: 24px;
}
#Concert ul li p:last-of-type{
	padding: 10px 0 0;
}
#Concert ul li p span{
	font-size: 14px;
}
#Concert a.btn{
	display: block;
	background: url(../images/btn_more01_hover.png) no-repeat;
	width: 330px;
	margin: 50px auto 0;
}
#Concert a.btn:hover img{
	opacity: 0;
}



#Dance{
	z-index: 8;
	background: url(../images/bg02.png?20210310) no-repeat bottom center / 2000px;
	/*padding: 233px 0 93px;*/
	height: 834px;
}
#Dance h2{
	background: url(../images/dance_title.png) no-repeat center / contain;
	width: 380px;
	height: 131px;
	margin: 0 auto 32px;
}
#Dance h3{
	background: url(../images/dance_text.png) no-repeat center / contain;
	width: 563px;
	height: 25px;
	margin: 0 auto 56px;
}
#Dance ul{
	display: flex;
	flex-wrap: wrap;
}
#Dance ul li{
	width: 50%;
	margin: 0 0 45px;
	text-align: center;
}
#Dance ul li p.name{
	position: relative;
	margin: 6px 0 0;
	padding: 35px 0 4px;
	font-size: 24px;
}
#Dance ul li p.name span.tag{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	display: block;
	color: #fff;
	background: #e23f29;
	width: 68px;
	height: 22px;
	margin: 0 auto;
	font-size: 12px;
	line-height: 22px;
	text-align: center;
}
#Dance ul li p.text span{
	font-size: 14px;
}
#Dance a.btn{
	display: block;
	background: url(../images/btn_more02_hover.png) no-repeat;
	width: 330px;
	margin: 30px auto 0;
}
#Dance a.btn:hover img{
	opacity: 0;
}



#Parade{
	z-index: 6;
	background: url(../images/bg03.png) no-repeat bottom center / 2000px;
	padding: 233px 0 127px;
}
#Parade h2{
	background: url(../images/parade_title.png) no-repeat center / contain;
	width: 380px;
	height: 132px;
	margin: 0 auto 30px;
}
#Parade h3{
	background: url(../images/parade_text.png) no-repeat center / contain;
	width: 472px;
	height: 26px;
	margin: 0 auto 30px;
}
#Parade .info{
	display: flex;
	align-items: center;
	margin: 0 0 54px;
}
#Parade .info .textWrap{
	margin-left: 40px;
	padding: 22px 0 0;
}
#Parade .info .textWrap dl dt{
	color: #fff;
	background: #58a529;
	width: 64px;
	height: 23px;
	margin: 0 0 6px;
	border-radius: 5px;
	font-size: 14px;
	line-height: 23px;
	letter-spacing: 0.1em;
	text-align: center;
}
#Parade .info .textWrap dl dd{
	margin: 0 0 20px;
}
#Parade .info .textWrap dl:last-child dd{
	margin-bottom: 0;
}
#Parade .info .textWrap dl dd span{
	font-size: 26px;
}

#Parade .info .textWrap dl.tt dd span {
	font-size:16px;
}

#Parade .course{
	display: flex;
}
#Parade .course p.tl{
	color: #fff;
	background: #58a529;
	width: 64px;
	height: 23px;
	margin-right: 9px;
	border-radius: 5px;
	font-size: 14px;
	line-height: 23px;
	letter-spacing: 0.1em;
	text-align: center;
}
#Parade .course .mapWrap{
	width: calc(100% - 73px);
}
#Parade .course .mapWrap ul{
	display: flex;
	justify-content: space-between;
}
#Parade .course .mapWrap ul li p{
	padding: 0 0 10px;
}



#Workshop{
	z-index: 4;
	background: url(../images/bg04.png?20210310) no-repeat bottom center / 2000px;
	padding: 233px 0 151px;
}
#Workshop h2{
	background: url(../images/work_title.png?20210310) no-repeat center / contain;
	width: 424px;
	height: 134px;
	margin: 0 auto 30px;
}
#Workshop h3{
	background: url(../images/work_text.png) no-repeat center / contain;
	width: 484px;
	height: 26px;
	margin: 0 auto 50px;
}
#Workshop .box{
	background: #fff;
	display: flex;
	margin: 0 0 35px;
	padding: 23px 52px 52px;
	border-radius: 30px;
}
#Workshop .box03{
	margin-bottom: 0;
	padding-bottom: 40px;
}
#Workshop .box .textWrap{
	padding: 29px 0 0 29px;
}

#Workshop .box .textWrap p.name{
	position: relative;
	margin: 0 0 25px;
	padding: 0 0 6px;
	font-size: 26px;
}
#Workshop .box .textWrap p.name::after{
	content: "";
	position: absolute;
	left: -29px;
	bottom: 0;
	background: #d0e2e8;
	width: 393px;
	height: 2px;
}
#Workshop .box .textWrap p.name span{
	font-size: 18px;
}
/*
#Workshop .box .textWrap ul{
	display: flex;
}
#Workshop .box .textWrap ul li.day{
	display: flex;
	width: 260px;
}
#Workshop .box .textWrap ul li.place{
	width: 184px;
}*/
#Workshop .box .textWrap ul li {
	margin-bottom: 15px;
}
#Workshop .box .textWrap ul li p.tag{
	color: #fff;
	background: #00a1d6;
	width: 64px;
	height: 24px;
	margin: 0 15px 6px 0;
	border-radius: 5px;
	font-size: 14px;
	line-height: 24px;
	letter-spacing: 0.1em;
	text-align: center;
}
#Workshop .box .textWrap ul li.day p{
	font-size: 14px;
}
#Workshop .box .textWrap ul li.day p.tx {
	display:block;
	width:100%;
}
#Workshop .box .textWrap ul li.day p span{
	font-size: 18px;
}
#Workshop .box .textWrap ul li.price p span.gray {
	font-size: 14px;
	color: #6a6a6a;
	font-weight: normal;
}
#Workshop .box .textWrap p.info{
	padding: 16px 0 0;
}



#Timetable{
	z-index: 2;
	background: url(../images/bg05.png) no-repeat bottom center / 2000px;
	padding: 233px 0 120px;
}
#Timetable h2{
	background: url(../images/time_title.png) no-repeat center / contain;
	width: 462px;
	height: 134px;
	margin: 0 auto 30px;
}
#Timetable h3{
	background: url(../images/time_text.png) no-repeat center / contain;
	width: 365px;
	height: 26px;
	margin: 0 auto 54px;
}
#Timetable .wrap .table{
	position: relative;
}
#Timetable .wrap .table::after{
	content: "";
	position: absolute;
	top: -36px;
	left: -42px;
	background: url(../images/time_item01.png) no-repeat center / contain;
	width: 147px;
	height: 90px;
}
#Timetable p.attr{
	margin: 18px 0 0;
	font-size: 14px;
	text-align: center;
}