@charset "UTF-8";
#cx_spContentsMain{overflow: auto !important; contain: none;}

header {position: relative;}
.keyvisual{
	position: relative;
	padding: 35px 0 30px 0;
	background: rgb(250,218,47);
	background: linear-gradient(41deg, rgba(250,218,47,1) 0%, rgba(225,211,44,1) 50%, rgba(208,177,45,1) 100%);
}
.keyvisual h1{
	position: relative;
	margin: 0 auto;
	width: 70%;
	max-width: 620px;
}
header .onairDate{
	position: relative;
	margin: 0 auto;
	padding: 8px 0;
	background-color: #260031;
}
header .onairDate img{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 120px);
	max-width: 600px;
}

/* chart */
#chart{
	position: relative;
	margin: 0 auto;
	padding: 40px 0 60px 0;
}
#chart h2{
	position: relative;
	margin:  0 auto;
	width: 100%;
	height: auto;
	max-width: 640px;
}
#chart #cahrtLinks{
	position: relative;
	margin: 0 0 0 auto;
	transform: translate(-5px, -12px);
	width: 50%;
	max-width: 220px;
	gap:0 5px;
}
#chart #cahrtLinks li{
	position: relative;
	margin: 0;
	width: calc(50% - 5px);
}

#chart .chartWrap{
	position: relative;
	margin: 0 auto 10px auto;
	padding: 0;
	width: calc(100% - 10px);
	max-width: 1000px;
	overflow: visible;
}
#chart .chartWrap .clickTxt{
	position: absolute;
	top: -4%;
	left: 8px;
	width: 28%;
}
#chart .chartWrap ul{
	position: relative;
	margin: 0 auto;
	width: 100%;
	height: 0;
	padding-top: 158.833%;
	background-image: url("../../img/chart/bg_chart.png");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: 50% 0;
}
#chart .chartWrap ul li{
	position: absolute;
	width: 22.5%;
	cursor: pointer;
}
#chart .chartWrap ul li img{transition: 0.3s ease-in-out;}
#chart .chartWrap ul li:hover img{transform: scale(1.02, 1.02);}
#chart .chartWrap ul li:nth-child(1){
	top: 21.8%;
	left: 36%;
	width: 27.25%;
}
#chart .chartWrap ul li:nth-child(2){
	top:24%;
	left: 6%;
	width: 24.167%;
}
#chart .chartWrap ul li:nth-child(3){
	top:1%;
	left: 20.5%;
}
#chart .chartWrap ul li:nth-child(4){
	top: .7%;
	right: 1%;
}
#chart .chartWrap ul li:nth-child(5){
	bottom: 24%;
	right: 15%;
}
#chart .chartWrap ul li:nth-child(6){
	bottom: 1.6%;
	right:26.5%;
}
#chart .chartWrap ul li:nth-child(7){
	bottom: 1.6%;
	right: 1.6%;
}
#chart .chartWrap ul li:nth-child(8){
	bottom:23.5%;
	left:13%;
}
#chart .chartWrap ul li:nth-child(9){
	bottom: 0;
	left:13%;
	width: 21.0835%;
}
#chart .chartWrap ul li:nth-child(10){
	top:23.8%;
	right: 5%;
	width: 21.0835%;
}
#popUp{
	position: fixed;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(111,84,0,.95);
	z-index: 100000;
	opacity: 0;
	filter: blur(100px);
	display: none;
	overflow-y: auto !important;
}
#popUp.disp{display: block;animation: display .8s ease-out 0s 1 forwards;}
@keyframes display {
  100% {filter: blur(0);opacity: 1; }
}
#popUp.disp.notdisp{animation: notdisplay .8s ease-out 0s 1 forwards;}
@keyframes notdisplay {
	0% {filter: blur(0);opacity: 1; }
  100% {filter: blur(100px);opacity: 0; }
}
#popUp::-webkit-scrollbar{display:none;}
#winClose{
	position: fixed;
	left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 1501;
	overflow: hidden;
	scrollbar-width: none;
}
#closeBtn{
	position: absolute;
	top: -1px;
	right: 0;
	width: 40px;
	height: 40px;
	background-color: #000000;
	cursor: pointer;
	z-index: 2008;
	transition: all .3s ease-out;
}
#closeBtn:hover{transform: scale(1.08, 1.08);}
#closeBtn img{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 23px;
	display: block;
}
.castArea {
	position: relative;
	margin: 30px auto 20px auto;
	z-index: 1502;
	width: calc(100% - 30px);
    max-width:320px;
	height: auto;
}
.castArea .castInner{
	position: absolute;
	top: 50px;
	width: 100%;
	height: calc(100% - 50px);
	border: solid 3px #000000;
}
.castArea #castImg{
	position: relative;
	margin: 0 auto;
	width: 100%;
	z-index: 2000;
}
.castArea #castImg::before, .castArea #castTxt::before{
	position: absolute;
	bottom: 0;
	left: 3px;
	display: block;
	content: '';
	width: calc(100% - 6px);
	height: calc(100% - 53px);
	background: #ffffff;
	background: linear-gradient(0deg, #838383 0%, #FFFFFF 80%);
}
.castArea #castTxt::before{bottom: 3px;}
.castArea #castImg img{
	position: relative;
	display: block;
	z-index: 2002;
}

.castArea #castTxt{
	position: relative;
	margin:0 auto;
	width: 100%;
	color: #000000;
}
.castArea #castTxt .textArea{
	position: relative;
	margin: 0 auto;
	z-index: 2003;
}
.castArea #name{
	position: relative;
	margin: 0 auto;
	padding: 10px 0;
	width: calc(100% - 6px);
	background-image: url("../../img/chart/nameBg.jpg");
	background-position: 0 0;
	background-repeat: repeat;
	background-size: 64px auto;
	border-left: solid 5px #430974;
}
.castArea #name img{
	position: relative;
	margin: 0 auto;
	display: block;
	width: 90%;
	max-width: 515px;
}
.castArea #txt{
	position: relative;
	margin: 0 auto;
	font-size: 1.4rem;
	padding: 25px 20px;
	line-height: 1.7em;
}

#chart .chartWrap ul li.item.onclick{animation: blur 2s ease-in 0s 1 normal forwards, blur01 1.6s ease-in 4s 1 normal forwards; pointer-events: none;}
@keyframes blur {
	0%{
		opacity: 1;
		transform:rotateY(0)  scale(1,1);
		filter: blur(0);
	}
	25%{
		opacity: .9;
		transform:rotateY(5deg)  scale(1,1.04);
		filter: blur(5px);
	}
	50%{
		opacity: .7;
		transform:rotateY(30deg)  scale(1.08,1.09);
		filter: blur(10px);
	}
	75%{
		opacity: .5;
		transform:rotateY(10deg)  scale(1.1,1.3);
		filter: blur(40px);
	}
	78%{
		opacity: .2;
		transform:rotateY(-10deg)  scale(1.5,1.8);
		filter: blur(60px);
	}
	100% { 
		opacity: 0;
		transform:rotateY(-18deg)  scale(1.9,1.8);
		filter: blur(100px);
	}
}
@keyframes blur01 {
	100%{
		opacity: 1;
		transform:rotateY(0)  scale(1,1);
		filter: blur(0);
	}
	78%{
		opacity: .9;
		transform:rotateY(5deg)  scale(1,1.04);
		filter: blur(5px);
	}
	75%{
		opacity: .7;
		transform:rotateY(30deg)  scale(1.08,1.09);
		filter: blur(10px);
	}
	50%{
		opacity: .5;
		transform:rotateY(10deg)  scale(1.1,1.3);
		filter: blur(40px);
	}
	25%{
		opacity: .2;
		transform:rotateY(-10deg)  scale(1.5,1.8);
		filter: blur(60px);
	}
	0% { 
		opacity: 0;
		transform:rotateY(-18deg)  scale(1.9,1.8);
		filter: blur(100px);
	}
}


@media screen and (min-width: 769px) {

	.keyvisual{padding: 80px 0;}
	
	/* chart */
	#chart {padding: 60px 0 120px 0;}
	#chart #cahrtLinks{
		position: absolute;
		margin: auto;
		top:30px;
		left: calc(50% + 210px);
		transform: translate(0, 0);
		width:293px;
		max-width: 293px;
		gap:0 10px;
	}
	#chart .chartWrap{margin: 0 auto;}
	#chart .chartWrap .clickTxt{
		top: -3.3%;
		left: 30px;
		width: 26%;
	}

	#closeBtn{
		width: 50px;
		height: 50px;
	}
	.castArea {
		position: absolute;
		top:50%;
		left: 50%;
		transform: translate(-50%, -50%);
		margin: auto;
		max-width:1100px;
	}
	.castArea .castInner{
		top: 80px;
		height: calc(100% - 80px);
		border: solid 6px #000000;
	}
	.castArea #castImg{
		margin: 0;
		width: 37%;
	}
	.castArea #castImg img{width: calc(100% - 6px); transform: translate(6px, -6px);}
	.castArea #castImg::before, .castArea #castTxt::before{
		left: 6px;
		bottom: 6px;
		width: calc(100% - 6px);
		height: calc(100% - 92px);
	}
	.castArea #castTxt::before{left: 0;}

	.castArea #castTxt{
		margin: 0;
		width: 63%;
		padding-top: 86px;
	}
	.castArea #name{
		padding: 15px 0;
		width: calc(100% - 12px);
		background-size: 124px auto;
		border-left: solid 10px #430974;
	}
	.castArea #name img{
		margin: 0 0 0 20px;
		width: 70%;
	}
	.castArea #txt{
		font-size: 1.6rem;
		line-height: 1.7em;
	}
	.chart01 .castArea #castTxt{padding-top: 61px;}
	.chart01 .castArea #name{
		margin: 0;
		width: calc(100% - 6px);
	}
	
}


@media screen and (max-height: 500px) and (min-width: 769px){
	.castArea {
		position: relative;
		margin: 40px auto 20px auto;
		top:auto;
		left: auto;
		transform: translate(0, 0);
	}
}