@charset "UTF-8";
/* CSS Document */
/* ==================================================
BASE OVERWRITE
================================================== */

@media screen and (max-width: 1100px) {

}

@media screen and (max-width: 768px) {

}

@media screen and (max-width: 480px) {

}

/*
===== COLOR =====
紺：#09094f
黄色：#fbb03b
赤：#de0a16
水色：#29abe2
ピンク：#e229a2
紫：#ba00c9
黄緑：#008989 or rgba(0, 137, 137, 0.9)
*/

/* ==================================================
CONTENTS
================================================== */
.timetablePage {
}

/* #detailArea
------------------------------ */
#detailArea.area {
}

#detailArea.area .areaBg2 {
}

#detailArea.area .tableBox {
}

#detailArea.area .tableBox .detailBlk {
}

@media screen and (min-width: 769px) {
	#detailArea.area {
		max-width: 1400px !important;
	}

	#detailArea.area .areaBg2 {
	}

	#detailArea.area .tableBox {
	}

	#detailArea.area .tableBox .detailBlk {
	}
}

/* .stage */
#detailArea .tableMain {
	font-weight: inherit;
}
#detailArea .tableMain .stage {
}

#detailArea .tableMain #day1-stage1.stage {
	border-bottom: 2px dotted #29abe2;
	margin-bottom: 40px;
	padding-bottom: 30px;
}
#detailArea .tableMain #day1-stage2.stage {
}
#detailArea .tableMain #day2-stage1.stage {
	border-bottom: 2px dotted #e229a2;
	margin-bottom: 40px;
	padding-bottom: 30px;
}
#detailArea .tableMain #day2-stage2.stage {
}

#detailArea .tableMain .stage .stageBg {
	/*! background: #e9eef2; */ 
	background: #001a44;
	padding-bottom: 20px;
	margin-bottom: 10px;
	border-top-left-radius: 12px;
	border-top-right-radius: 12px;
}
#detailArea .stage .guide {
	display: flex;
	justify-content: flex-end;
	align-items: flex-start;
	flex-wrap: wrap;
	flex-direction: row;
	line-height: 1;
	height: 40px;
}
#detailArea .stage .guide .icon {
	margin-right: 6px;
}
#detailArea .stage .guide .txt {
	/*color: #df0000;*/
	color: #fff;
	font-size: 1.3rem;
	font-weight: 700;
	padding-top: 5px;
}
#detailArea .stage h3 {
	background: linear-gradient(11deg, #0c447f 4%, #4d94bf 44%, #a99cd5 88%);
	color: #fff;
	font-size: 1.8rem;
	position: relative;
	padding: 15px 3% 35px;
	margin-bottom: 40px;
	border-top-left-radius: 12px;
	border-top-right-radius: 12px;
}
#detailArea .stage h3 .title {
	font-weight: 700;
	font-size: 1.8rem;
	border-bottom: 2px dotted #fff;
	padding: 0 0 10px;
	margin-bottom: 15px;
}
#detailArea .stage h3 .subtitle {	
	font-size: 90%;
	line-height: 1.4;
	width: 70%;
	margin: 0 auto;
	max-width: 240px;
}
#detailArea .stage h3 .subtitle img {
}
#detailArea .stage h3 .ticket {
	font-weight: 700;
	position: absolute;
	margin: auto;
	bottom: -14px;
	font-size: 90%;
	width: 90%;
	left: 0;
	right: 0;
	border: 2px solid #de0000;
	border-radius: 100px;
	line-height: 1;
	background: #de0000;
	padding: 6px;
}
#detailArea .stage h3 .ticket.paid {
}
#detailArea .stage h3 .ticket.free {
	background: #fff;
	color: #de0000;
}
#detailArea .stage .timeblock {
	padding: 0 2%;
}
#detailArea .stage .timeblock .program {
	font-weight: 700;
	background: #fff;
	border: 2px solid #ddd;
	text-align: left;
	color: #001659;
	padding: 6px;
	line-height: 1.4;
	margin-bottom: 15px;
	position: relative;
}

#detailArea .stage .timeblock .program.stage-open {
	text-align: center;
}

#detailArea .stage .timeblock .program.opening {
	background: #44ae2e;
	color: #fff;
	border: 2px solid #7ac447;
}
#detailArea .stage .timeblock .program.talk {
	background: #0072c0;
	color: #fff;
	border: 2px solid #19a9ff;
}
#detailArea .stage .timeblock .program.live,
#detailArea .stage .timeblock .program.talk.live {
	background: #ee5a00;
	color: #fff;
	border: 2px solid #ff881f;
}
#detailArea .stage .timeblock .program.performance {
	background: #9c1da6;
	color: #fff;
	border: 2px solid #dc26ec;
}

#detailArea .stage .timeblock .program::before,
#detailArea .stage .timeblock .program::after {
	content: "MARK";
	position: absolute;
	width: 46px;
	height: 20px;
	top: -2px;
	right: -2px;
	line-height: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1.2rem;
	font-weight: 700;
	background: #000;
	color: #fff;
	letter-spacing: 0.02em;
	z-index: 1;
	opacity: 0;
	border: 2px solid #001a44;
}
#detailArea .stage .timeblock .program.talk::before {
	opacity: 1;
	content: "TALK";
	background: #19a9ff;
	border: 2px solid #19a9ff;
}
#detailArea .stage .timeblock .program.live::after {
	opacity: 1;
	content: "LIVE";
	background: #ff881f;
	border: 2px solid #ff881f;
	z-index: 2;
}
#detailArea .stage .timeblock .program.live.talk::before {
	right: 44px;
	border: 2px solid #ff881f;
	width: 48px;
}
#detailArea .stage .timeblock .program.performance::after {
	opacity: 1;
	content: "PERFORMANCE";
	background: #dc26ec;
	border: 2px solid #dc26ec;
	width: 106px;
}


#detailArea .stage .timeblock .program .time {
	font-size: 1.6rem;
}
#detailArea .stage .timeblock .program .time .txt {
	font-weight: inherit;
	display: inline-block;
	margin-left: 12px;
}
#detailArea .stage .timeblock .program .ttl {
	font-weight: inherit;
	margin: 5px 0 8px;
	font-size: 1.5rem;
	position: relative;
}
#detailArea .stage .timeblock .program.paid .ttl {
	padding-right: 34px;
}
#detailArea .stage .timeblock .program.paid .ttl::after {
	content: "";
	position: absolute;
	width: 26px;
	height: 26px;
	top: -2px;
	right: 0;
	background: url("/iwf2021/asset/img/timetable/icon_star.svg") no-repeat center center;
	background-size: contain;
}
#detailArea .stage .timeblock .program .ttl a {
	text-decoration: underline;
}
#detailArea .stage .timeblock .program .credit {
	font-weight: 400;
	color: #0ff;
}








@media screen and (min-width: 841px) {
	#detailArea .tableMain {
		display: flex;
		justify-content: center;
		align-items: flex-start;
		flex-wrap: nowrap;
		flex-direction: row;
	}
	#detailArea .tableMain .stage {
		width: 50%;
	}
	#detailArea .tableMain .stage.st1 {
		padding: 0 10px 0 65px;
	}
	#detailArea .tableMain .stage.st2 {
		padding: 0 65px 0 10px;
	}

	#detailArea .tableMain #day1-stage1.stage {
		border-bottom: none;
		margin-bottom: 0;
		padding-bottom: 0;
	}
	#detailArea .tableMain #day1-stage2.stage {
		
	}
	#detailArea .tableMain #day2-stage1.stage {
		border-bottom: none;
		margin-bottom: 0;
		padding-bottom: 0;
	}
	#detailArea .tableMain #day2-stage2.stage {
		
	}

	#detailArea .tableMain .stage .stageBg {
		
	}
	#detailArea .stage .guide {
		
	}
	#detailArea .stage .guide .icon {
		
	}
	#detailArea .stage .guide .txt {
		
	}
	#detailArea .stage h3 {
		/*! height: 155px; */
	}
	#detailArea .stage h3 .title {
		
	}
	#detailArea .stage h3 .subtitle {
		width: 200px;
		margin: 0 auto;
		height: 90px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	#detailArea .stage h3 .ticket {
		
	}
	#detailArea .stage h3 .ticket.paid {
		
	}
	#detailArea .stage h3 .ticket.free {
		
	}
	
	#detailArea .stage .timeblock {
		position: relative;
		height: 300px;
		padding: 0;
	}
	
	#detailArea .stage .timeblock::after {
		content: "";
		position: absolute;
		top: 0;
		left: -15px;
		width: calc(100% + 30px);
		height: 1px;
		background: #fff;
		z-index: 1;
	}
	#detailArea .stage .timeblock::before {
		position: absolute;
		width: 50px;
		color: #fff;
		font-size: 1.3rem;
		line-height: 1;
		/*! border: 1px solid #fff; */
		top: -7px;
	}
	#detailArea .stage.st1 .timeblock::before {
		left: -65px;
	}
	#detailArea .stage.st2 .timeblock::before {
		right: -65px;
	}
	
	#detailArea .stage .timeblock.time12::before {content: "12:00";}
	#detailArea .stage .timeblock.time13::before {content: "13:00";}
	#detailArea .stage .timeblock.time14::before {content: "14:00";}
	#detailArea .stage .timeblock.time15::before {content: "15:00";}
	#detailArea .stage .timeblock.time16::before {content: "16:00";}
	#detailArea .stage .timeblock.time17::before {content: "17:00";}
	#detailArea .stage .timeblock.time18::before {content: "18:00";}
	#detailArea .stage .timeblock.time19::before {content: "19:00";}
	#detailArea .stage .timeblock.time20::before {content: "20:00";}
	
	#detailArea .stage .timeblock.head-blank {height: 0;}
	#detailArea .stage .timeblock.time12 {height: 50px;}
	/*#detailArea .stage .timeblock.time13 {height: 420px;}*/
	#detailArea .stage .timeblock.time14 {}
	#detailArea .stage .timeblock.time15 {}
	#detailArea .stage .timeblock.time16 {}
	#detailArea .stage .timeblock.time17 {}
	#detailArea .stage .timeblock.time18 {}
	#detailArea .stage .timeblock.time19 {}
	/*#detailArea #day2 .stage .timeblock.time19 {height: 300px;}*/
	#detailArea .stage .timeblock.time20 {height: 30px;}
	

	#detailArea .stage .timeblock .program {
		position: absolute;
		left: 0;
		z-index: 2;
		width: 100%;
	}
	
	#detailArea .stage .timeblock .program.start0 {top: 0;}
	#detailArea .stage .timeblock .program.start2 {top: 10px;}
	#detailArea .stage .timeblock .program.start4 {top: 20px;}
	#detailArea .stage .timeblock .program.start5 {top: 25px;}
	#detailArea .stage .timeblock .program.start6 {top: 30px;}
	#detailArea .stage .timeblock .program.start8 {top: 40px;}
	#detailArea .stage .timeblock .program.start10 {top: 50px;}
	#detailArea .stage .timeblock .program.start12 {top: 60px;}
	#detailArea .stage .timeblock .program.start14 {top: 70px;}
	#detailArea .stage .timeblock .program.start15 {top: 75px;}
	#detailArea .stage .timeblock .program.start16 {top: 80px;}
	#detailArea .stage .timeblock .program.start18 {top: 90px;}
	#detailArea .stage .timeblock .program.start20 {top: 100px;}
	#detailArea .stage .timeblock .program.start22 {top: 110px;}
	#detailArea .stage .timeblock .program.start24 {top: 120px;}
	#detailArea .stage .timeblock .program.start25 {top: 125px;}
	#detailArea .stage .timeblock .program.start26 {top: 130px;}
	#detailArea .stage .timeblock .program.start28 {top: 140px;}
	#detailArea .stage .timeblock .program.start30 {top: 150px;}
	#detailArea .stage .timeblock .program.start32 {top: 160px;}
	#detailArea .stage .timeblock .program.start34 {top: 170px;}
	#detailArea .stage .timeblock .program.start35 {top: 175px;}
	#detailArea .stage .timeblock .program.start36 {top: 180px;}
	#detailArea .stage .timeblock .program.start38 {top: 190px;}
	#detailArea .stage .timeblock .program.start40 {top: 200px;}
	#detailArea .stage .timeblock .program.start45 {top: 225px;}
	#detailArea .stage .timeblock .program.start50 {top: 250px;}
	#detailArea .stage .timeblock .program.start55 {top: 275px;}
	#detailArea .stage .timeblock .program.start56 {top: 280px;}
	#detailArea .stage .timeblock .program.start58 {top: 290px;}
	
	/*#detailArea .stage .timeblock.time13 .program.start0 {top: 0;}
	#detailArea .stage .timeblock.time13 .program.start10 {top: 70px;}
	#detailArea .stage .timeblock.time13 .program.start15 {top: 105px;}
	#detailArea .stage .timeblock.time13 .program.start20 {top: 140px;}
	#detailArea .stage .timeblock.time13 .program.start22 {top: 154px;}
	#detailArea .stage .timeblock.time13 .program.start25 {top: 175px;}
	#detailArea .stage .timeblock.time13 .program.start30 {top: 210px;}
	#detailArea .stage .timeblock.time13 .program.start35 {top: 245px;}
	#detailArea .stage .timeblock.time13 .program.start40 {top: 280px;}
	#detailArea .stage .timeblock.time13 .program.start45 {top: 315px;}
	#detailArea .stage .timeblock.time13 .program.start50 {top: 350px;}
	#detailArea .stage .timeblock.time13 .program.start55 {top: 385px;}*/
	
	#detailArea .stage .timeblock .program.min5 {height: 25px;}
	#detailArea .stage .timeblock .program.min6 {height: 30px;}
	#detailArea .stage .timeblock .program.min8 {height: 40px;}
	#detailArea .stage .timeblock .program.min10 {height: 50px;}
	#detailArea .stage .timeblock .program.min12 {height: 60px;}
	#detailArea .stage .timeblock .program.min14 {height: 70px;}
	#detailArea .stage .timeblock .program.min15 {height: 75px;}
	#detailArea .stage .timeblock .program.min16 {height: 80px;}
	#detailArea .stage .timeblock .program.min18 {height: 90px;}
	#detailArea .stage .timeblock .program.min20 {height: 100px;}
	#detailArea .stage .timeblock .program.min22 {height: 110px;}
	#detailArea .stage .timeblock .program.min24 {height: 120px;}
	#detailArea .stage .timeblock .program.min25 {height: 125px;}
	#detailArea .stage .timeblock .program.min26 {height: 130px;}
	#detailArea .stage .timeblock .program.min28 {height: 140px;}
	#detailArea .stage .timeblock .program.min30 {height: 150px;}
	#detailArea .stage .timeblock .program.min35 {height: 175px;}
	#detailArea .stage .timeblock .program.min40 {height: 200px;}
	#detailArea .stage .timeblock .program.min45 {height: 225px;}
	#detailArea .stage .timeblock .program.min50 {height: 250px;}
	
	/*#detailArea .stage .timeblock.time13 .program.min5 {height: 40px;}
	#detailArea .stage .timeblock.time13 .program.min10 {height: 70px;}
	#detailArea .stage .timeblock.time13 .program.min15 {height: 105px;}
	#detailArea .stage .timeblock.time13 .program.min20 {height: 140px;}
	#detailArea .stage .timeblock.time13 .program.min25 {height: 175px;}
	#detailArea .stage .timeblock.time13 .program.min30 {height: 210px;}
	#detailArea .stage .timeblock.time13 .program.min35 {height: 245px;}
	#detailArea .stage .timeblock.time13 .program.min40 {height: 280px;}
	#detailArea .stage .timeblock.time13 .program.min45 {height: 315px;}
	#detailArea .stage .timeblock.time13 .program.min50 {height: 350px;}*/

	#detailArea .stage .timeblock .program.stage-open {
		
	}

	#detailArea .stage .timeblock .program.opening {
		
	}
	#detailArea .stage .timeblock .program.talk {
		
	}
	#detailArea .stage .timeblock .program.live,
	#detailArea .stage .timeblock .program.talk.live {
		
	}
	#detailArea .stage .timeblock .program.performance {
		
	}

	#detailArea .stage .timeblock .program::before,
	#detailArea .stage .timeblock .program::after {
		
	}
	#detailArea .stage .timeblock .program.talk::before {
		
	}
	#detailArea .stage .timeblock .program.live::after {
		
	}
	#detailArea .stage .timeblock .program.live.talk::before {
		
	}
	#detailArea .stage .timeblock .program.performance::after {
		
	}


	#detailArea .stage .timeblock .program .time {
		
	}
	#detailArea .stage .timeblock .program .time .txt {
		font-size: 1.4rem;
	}
	#detailArea .stage .timeblock .program .ttl {
		font-size: 1.4rem;
	}
	#detailArea .stage .timeblock .program.paid .ttl {
		
	}
	#detailArea .stage .timeblock .program.paid .ttl::after {
		
	}
	#detailArea .stage .timeblock .program .ttl a {
		
	}
	#detailArea .stage .timeblock .program .credit {
		
	}
}


/* #attention */
#attention {
	max-width: 800px;
	margin: 0 auto 50px;
	text-align: left;
	border: 2px solid #09094f;
	color: #09094f;
}

#attention dl {
	padding: 12px 10px;
}

#attention dl:nth-child(2) {
	border-top: 2px solid #09094f;
}

#attention dt  {
	font-weight: 700;
	font-size: 1.5rem;
	margin-bottom: 8px;
}

#attention dd {
	text-indent: -16px;
	padding: 0 0 0 30px;
	line-height: 1.4;
	margin-bottom: 3px;
}

#attention dd::before {
	content: "・";
	display: inline-block;
	width: 16px;
	text-indent: 0;
	text-align: center;
}

#attention dd * { text-indent: 0; }

#attention dd.normal {
	text-indent: 0;
	padding-left: 8px;
	margin-top: 10px;
}

#attention dd.normal::before {
	display: none;
	text-indent: 0;
}

#attention dd .icon {
	display: inline-block;
	margin: 0 2px;
}

#attention dd .icon  img {
	width: 22px;
	transform: translateY(2px);
}
