@charset "utf-8";
#header{
	position: relative;
	margin: 0 auto;
	background: rgb(238,48,198);
	background: linear-gradient(138deg, rgba(238,48,198,1) 0%, rgba(222,0,255,1) 100%);
}
/* keyvisual */
#keyvisual{
	position: relative;
	margin: 0;
	width: 100%;
	z-index: 10;
}
#keyvisual #keyvisualImg{
	position: relative;
	margin: 0;
	width: 100%;
	height: 0;
	padding-top:134.12%;
	background-image:url("../img/index/mainv2.jpg");
	background-position: 50% 0;
	background-size: cover;
	background-repeat: no-repeat;
}
#keyvisual #catch{
	display: none;
}
#keyvisual #roadshow{
	position: absolute;
	bottom: 1%;
	left: 4%;
	width: calc(22% - 5px);
	opacity: 0;
}

#topArea{position: relative;}

#spMenu{
	position: relative;
	margin: 0 auto
}
#spMenu .snsLinks{
	position: relative;
	margin: 0 auto 0 0;
	padding: 12px 5px 12px 0;
	gap: 0 10px;
}
#spMenu .snsLinks li{
	position: relative;
	margin: 0;
	width: calc(33.33333% - 7px);
	max-width: 25px;
	min-width: 20px;
}

#update{
	position: relative;
	background-color: #ffffff;
}
#update p{
	position: relative;
	padding: 5px 10px;
	font-weight: 700;
	color: #000000;
	text-align: center;
	font-size: min(4vw, .14rem);
}
#update p a{color: #000000;}

/* banner */
#banner{
	position: relative;
	margin:  0 auto;
	padding: 20px 0;
	background-color: #ffee27;
	background: linear-gradient(63deg, rgba(255,238,39,1) 0%, rgba(226,177,116,1) 28%, rgba(220,149,137,1) 67%, rgba(206,105,137,1) 89%, rgba(192,27,129,1) 100%);
	z-index: 8;
}
#banner .bg{
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image:url("../img/banner/bg_banner.png");
	background-position: 0 0;
	background-size: 64px auto;
	mix-blend-mode:screen;
	background-repeat: repeat;
}
#banner ul{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 30px);
	max-width: 800px;
	gap: 10px;
}
#banner ul li{
	position: relative;
	margin: 0;
	width: calc(50% - 5px);
}
#banner ul li:first-child, #banner ul li:nth-child(2){width: 100%;max-width: 100%;}
#banner ul li:nth-child(3){width: 100%;max-width: 460px;}
#banner ul li a:hover{opacity: 0.7;}
#banner ul li img{margin: 0 auto;}
#banner ul li img.mvtk{width: 100%; max-width: 460px;border: solid 1px #ffffff;box-sizing:border-box;}

/* award */
/* 固定背景 */
#award .bgWrap, #cast .bgWrap, #about .bgWrap{
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 100vh;
	height: 100dvh;
	min-height: 100%;
	clip-path: inset(0);
	z-index: -2;
}
#cast .bgWrap{z-index: -4;}
#about .bg{
	position: fixed;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url("../img/about/bg_intro.jpg");
	 background-repeat: no-repeat;
	 background-size: cover;
	 background-position: 50% 50%;
}
#cast .bg{
	position: fixed;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url("../img/cast/bg_aword.jpg");
	 background-repeat: no-repeat;
	 background-size: cover;
	 background-position: 50% 50%;
}
#cast .reflect{
	display: block;
    height:100%;
    width:30px;
    position:fixed;
    top:-280px;
    left:0;
    background-color: #fff;
    opacity:0;
    transform: rotate(15deg);
	animation: reflect 6.3s ease-in 0s infinite normal forwards;
	z-index: -3;
}
@keyframes reflect {
    0% { transform: scale(0, 0) rotate(-15deg); opacity: 0; }
    10% { transform: scale(0, 0) rotate(-15deg); opacity: 0; }
    13% { transform: scale(4, 4) rotate(-15deg); opacity: 0.1; }
    17% { transform: scale(120, 120) rotate(-15deg); opacity: 0; }
	100% { transform: scale(0, 0) rotate(-15deg); opacity: 0; }
}
#award .bgWrap #bgvideo{
	position: fixed;
	top:0;
	left: 0;
	min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  display: flex;
  align-items:center;
  justify-content:flex-end;
	background-image: url("http://i.ytimg.com/vi/UNKyEKLqZKA/mqdefault.jpg");
	 background-repeat: no-repeat;
	 background-size: cover;
	 background-position: 50% 50%;
}
#award{
	position: relative;
	margin: 0 auto;
	padding: 45px 0 60px 0;
	background-color: rgba(10,37,79,0.72);
}
#award .lead{position: relative;}
#award .lead #awardLogo{
	position: relative;
	margin: 0 auto;
	width: 55%;
	max-width: 300px;
	transform: scale(1.2, 1.2);
	opacity: 0;
}
#award .lead #awardTtl{
	position: relative;
	margin: 25px auto;
	width: calc(100% - 30px);
	max-width: 615px;
	border-bottom: solid 1px #ffffff;
	transform: scale(1.2, 1.2);
	opacity: 0;
}
#award .lead .awardTxt{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 80px);
	max-width: 514px;
}
@keyframes fadeIn {
	0% { transform: scale(1.2, 1.2); opacity: 0; }
	100% { transform: scale(1, 1); opacity: 1; }
}
#award .lead #awardLogo.Disp{animation: fadeIn 0.2s ease-in 0.5s 1 normal forwards;}
#award .lead #awardTtl.Disp{animation: fadeIn 0.2s ease-in 0.5s 1 normal forwards;}

/* movie */
#movie{
	position: relative;
	margin:  0 auto;
	padding: 40px 0;
	background-color: #fffff3;
}
#movie h2{
	position: relative;
	margin: 0 auto 15px auto;
	width: 100%;
	max-width: 640px;
}
#movie .movieWrap{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 30px);
}
#movie .movieList{
	position: relative;
	margin: 10px auto 0 auto;
	width: calc(100% - 30px);
	max-width: 960px;
	gap:10px;
}
#movie .movieList li{
	position: relative;
	margin: 0;
	padding: 4px 0;
	border: solid 1px #c9008e;
	width: calc(50% - 7px);
	max-width: 400px;
	text-align: center;
	transition: all .3s ease-out;
	cursor: pointer;
	color: #c9008e;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1.4em;
}
#movie .movieList li.w100S{width: 100%;}
#movie .movieList li.newIcon::after{
	position: absolute;
	top:-5px;
	right: -8px;
	width: 46px;
	height: 22px;
	content: '';
	display: block;
	background-image:url("../img/index/icon_new.png");
	background-position: 0 0;
	background-size: contain;
	background-repeat: no-repeat;
}
#movie .movieList li.disp{color: #ffffff; background-color: #c9008e;}
#movie .movieList li:hover{color: #ffffff; background-color: rgba(201,0,142,0.5);}

/* intro */
#about{
	position: relative;
	margin: 0 auto;
}
#about .bgWrap{background-color: #040A33;}
#about .bgWrap .bg{opacity: 0.4;}
#about #intro{
	position: relative;
	margin: 0 auto;
	padding: 35px 0 50px 0;
}
#about #intro h2{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 20px);
	max-width: 1300px;
}
#about #intro h2 #intro01{
	position: relative;
	margin: 0 auto;
	width: 100%;
	clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
}
#about #intro h2 #intro02{
	position: relative;
	margin: 5px auto 0 auto;
	width: 100%;
	clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
}
#about #intro h2.Disp #intro01{animation: dispTtl .5s cubic-bezier(0,1.21,1,.99) 0.8s 1 normal forwards;}
#about #intro h2.Disp #intro02{animation: dispTtl .48s cubic-bezier(0,1.21,1,.99) 1.3s 1 normal forwards;}
@keyframes dispTtl {
	0% {
		clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
	}
	100% {
		clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%);
	}
}
#about #intro .introRWrap{
	position: relative;
	margin: 10px auto 0 auto;
	width: calc(100% - 20px);
	max-width: 1300px;
}
#about #intro .introRWrap .introR{
	position: relative;
	width: 100%;
	height: 0;
	padding-top: 50%;
}
#about #intro .introRWrap .introR div{
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	opacity: 0;
	transform: scale(1.05, 1.05);
}
#about #intro .introRWrap .introR.Disp #introR01{animation: dispR .2s ease-out 0.5s 1 normal forwards;}
#about #intro .introRWrap .introR.Disp #introR02{animation: dispR .2s ease-out 0.65s 1 normal forwards;}
#about #intro .introRWrap .introR.Disp #introR03{animation: dispR .2s ease-out 0.8s 1 normal forwards;}
#about #intro .introRWrap .introR.Disp #introR04{animation: dispR .2s ease-out 0.95s 1 normal forwards;}
#about #intro .introRWrap .introR.Disp #introR05{animation: dispR .2s ease-out 1.1s 1 normal forwards;}
@keyframes dispR{
	0% {
		opacity: 0;
		transform: scale(1.05, 1.05);
	}
	100% {
		opacity: 1;
		transform: scale(1, 1);
	}
}
#about #intro h3{
	position: relative;
	margin: 10px auto 0 auto;
	width: calc(100% - 20px);
	max-width: 1300px;
	mix-blend-mode: screen;
	clip-path: polygon(100% 100%, 0 100%, 0 100%, 100% 100%);
}
#about #intro h3.Disp{animation: dispTtl1 .7s cubic-bezier(0,1.21,1,.99) 1.5s 1 normal forwards;}
@keyframes dispTtl1 {
	0% {
		clip-path: polygon(100% 100%, 0 100%, 0 100%, 100% 100%);
	}
	100% {
		clip-path: polygon(100% 100%, 0 100%, 0 0, 100% 0);
	}
}
#about #intro h3 img{
	position: relative;
	margin: 0 0 0 auto;
	width: calc(100% - 30px);
	max-width: 1000px;
}
#about #intro .introTxt{
	position: relative;
	margin: 15px auto 0 auto;
	width: calc(100% - 40px);
	max-width: 1300px;
	opacity: 0;
}
#about #intro .introTxt.Disp{animation: dispTtxt 1.2s ease-in 1.8s 1 normal forwards;}
@keyframes dispTtxt {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
#about #intro .introTxt p{
	position: relative;
	margin: 0 auto;
	color: #ffffff;
	max-width: 1000px;
}
/* story*/
#about #story{
	position: relative;
	margin: 0 auto;
	padding: 30px 0;
	background-color: rgba(77,131,159,0.5);
}
#about #story h2{
	position: relative;
	margin: 0 auto;
	width: 18%;
	max-width: 80px;
}
#about #story p{
	position: relative;
	margin: 20px auto 0 auto;
	width: calc(100% - 40px);
	color: #ffffff;
}

/* cast */
#cast{
	position: relative;
	margin: 0 auto;
	padding: 35px 0 120px 0;
}
#cast h2{
	position: relative;
	margin: 0 auto 15px auto;
	width: 100%;
	max-width: 640px;
}
#cast .charaWrap{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 30px);
	max-width: 680px;
	padding: 0;
	gap: 20px 10px;
}

/* Copyright (c) 2024 by Hakkam Abdullah (https://codepen.io/hkmDesigner/pen/zdPrVp) */
#cast .charaWrap .charaData {
	width: calc(50% - 10px);
	height:0;
	padding-top: 50%;
	position: relative;
	-webkit-transition: 0.8s ease-in-out;
	transition: 0.8s ease-in-out;
	transform-style: preserve-3d;
}

#cast .charaWrap .charaData .front, #cast .charaWrap .charaData .back  {
	position: absolute;
	top:0;
	text-align: center;
	width: 100%;
	height: auto;
	color: #fff;
	transform-style: preserve-3d;
	backface-visibility: hidden;
}
.inner {transform:  translateZ(30px) scale(0.92);}
.front {
	z-index: 2;
	background-image: url("../img/cast/def.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 50% 50%;
}
.back {
	transform: rotateY(180deg);
	z-index: 0;
	background-image: url("../img/cast/card.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 50% 50%;
}
#cast .charaWrap .charaData .back img{opacity: 0;}
#cast .charaWrap .charaData#chara01 .back{background-image: url("../img/cast/chara01.png");}
#cast .charaWrap .charaData#chara02 .back{background-image: url("../img/cast/chara02.png");}
#cast .charaWrap .charaData#chara03 .back{background-image: url("../img/cast/chara03.png");}
#cast .charaWrap .charaData#chara04 .back{background-image: url("../img/cast/chara04.png");}
#cast .charaWrap .charaData#chara05 .back{background-image: url("../img/cast/chara05.png");}
#cast .charaWrap .charaData#chara06 .back{background-image: url("../img/cast/chara06.png");}
#cast .charaWrap .charaData#chara07 .back{background-image: url("../img/cast/chara07.png");}
#cast .charaWrap .charaData#chara08 .back{background-image: url("../img/cast/chara08.png");}
#cast .charaWrap .charaData#chara09 .back{background-image: url("../img/cast/chara09.png");}
#cast .charaWrap .charaData#chara10 .back{background-image: url("../img/cast/chara10.png");}
#cast .charaWrap .charaData#chara11 .back{background-image: url("../img/cast/chara11.png");}
#cast .charaWrap .charaData#chara12 .back{background-image: url("../img/cast/chara12.png");}
#cast .charaWrap .charaData#chara13 .back{background-image: url("../img/cast/chara13.png");}
#cast .charaWrap .charaData#chara14 .back{background-image: url("../img/cast/chara14.png");}
#cast .charaWrap .charaData#chara15 .back{background-image: url("../img/cast/chara15.png");}
#cast .charaWrap .charaData#chara16 .back{background-image: url("../img/cast/chara16.png");}
#cast .charaWrap .charaData#chara17 .back{background-image: url("../img/cast/chara17.png");}
#cast .charaWrap .charaData#chara18 .back{background-image: url("../img/cast/chara18.png");}
#cast .charaWrap .charaData#chara19 .back{background-image: url("../img/cast/chara19.png");}
#cast .charaWrap .charaData#chara20 .back{background-image: url("../img/cast/chara20.png");}
#cast .charaWrap .charaData#chara21 .back{background-image: url("../img/cast/chara21.png");}
#cast .charaWrap .charaData#chara22 .back{background-image: url("../img/cast/chara22.png");}
#cast .charaWrap .charaData#chara23 .back{background-image: url("../img/cast/chara23.png");}
#cast .charaWrap .charaData#chara24 .back{background-image: url("../img/cast/chara24.png");}
#cast .charaWrap .charaData#chara25 .back{background-image: url("../img/cast/chara25.png");}
#cast .charaWrap .charaData#chara26 .back{background-image: url("../img/cast/chara26.png");}
#cast .charaWrap .charaData#chara27 .back{background-image: url("../img/cast/chara27.png");}
#cast .charaWrap .charaData#chara28 .back{background-image: url("../img/cast/chara28.png");}
#cast .charaWrap .charaData#chara29 .back{background-image: url("../img/cast/chara29.png");}
#cast .charaWrap .charaData#chara30 .back{background-image: url("../img/cast/chara30.png");}
#cast .charaWrap .charaData#chara31 .back{background-image: url("../img/cast/chara31.png");}
#cast .charaWrap .charaData#chara32 .back{background-image: url("../img/cast/chara32.png");}
#cast .charaWrap .charaData#chara33 .back{background-image: url("../img/cast/chara33.png");}
#cast .charaWrap .charaData#chara34 .back{background-image: url("../img/cast/chara34.png");}
#cast .charaWrap .charaData#chara35 .back{background-image: url("../img/cast/chara35.png");}
#cast .charaWrap .charaData#chara36 .back{background-image: url("../img/cast/chara36.png");}
#cast .charaWrap .charaData#chara37 .back{background-image: url("../img/cast/chara37.png");}
#cast .charaWrap .charaData#chara38 .back{background-image: url("../img/cast/chara38.png");}
#cast .charaWrap .charaData#chara39 .back{background-image: url("../img/cast/chara39.png");}
#cast .charaWrap .charaData#chara40 .back{background-image: url("../img/cast/chara40.png");}
#cast .charaWrap .charaData#chara41 .back{background-image: url("../img/cast/chara41.png");}
#cast .charaWrap .charaData#chara42 .back{background-image: url("../img/cast/chara42.png");}
#cast .charaWrap .charaData#chara43 .back{background-image: url("../img/cast/chara43.png");}
#cast .charaWrap .charaData#chara44 .back{background-image: url("../img/cast/chara44.png");}
#cast .charaWrap .charaData#chara45 .back{background-image: url("../img/cast/chara45.png");}
#cast .charaWrap .charaData#chara46 .back{background-image: url("../img/cast/chara46.png");}
#cast .charaWrap .charaData.Disp {
	-webkit-transform: rotateY(-180deg);
	transform: rotateY(-180deg);
}
#cast .charaWrap .charaData.Disp.castDisp01{transition-delay: 0.1s;}
#cast .charaWrap .charaData.Disp.castDisp02{transition-delay: 0.2s;}
#cast .charaWrap .charaData.Disp.castDisp03{transition-delay: 0.1s;}
#cast .charaWrap .charaData.Disp.castDisp04{transition-delay: 0.2s;}


#popUp{
	position: fixed;
	top:0;
	left: -10px;
	width: calc(100% + 20px);
	height: 100vh;
	height: 100dvh;
	background-color: rgba(1,24,34,0.9);
	opacity: 0;
	z-index: -18000;
	overflow-y: auto;
}
#popUp.disp{z-index: 18000;animation: dispMenuBtn .5s ease-in 0s 1 normal forwards;}
#popUp.nodisp{z-index: -18000;}
#popUp .close_win{
	position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
	overflow: hidden;
}
#popUp .popupInner{
	position: absolute;
	top:50px;
	left: 50%;
	padding-bottom: 50px;
	transform: translateX(-50%);
	width: calc(100% - 56px);
	max-width: 780px;
	 z-index: 18001;
}
#popUp .popupInner #castImg{
	position: relative;
	margin: 0;
	width: 70%;
	max-width: 400px;
	z-index: 18003;
	overflow: hidden;
}
#popUp .popupInner #castImg{filter: drop-shadow(-4px 5px 4px rgba(0,0,0,0.5));}
#popUp .popupInner #castImg .reflect{
	display: block;
    height:100%;
    width:30px;
    position:absolute;
    top:-180px;
    left:0;
    background-color: #fff;
    opacity:0;
    transform: rotate(25deg);
	animation: reflect 6.3s ease-in 0s infinite normal forwards;
}
#popUp .popupInner .castTxt{
	position: relative;
	margin: -80px 0 0 auto;
	width: calc(100% - 60px);
	max-width: 800px;
	padding: 100px 15px 50px 15px;
	border: solid 2px #d3ac28;
	background-color: rgba(2,40,25,0.8);
	background-image:url("../img/cast/corner01.png"), url("../img/cast/corner02.png"), url("../img/cast/corner03.png"), url("../img/cast/bg_popup.png");
	background-position: calc(100% - 4px) 4px, 4px calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), 0 0;
	background-size: auto 40px, 40px auto, auto 40px, 287px auto;
	background-repeat: no-repeat, no-repeat, no-repeat, repeat;
	z-index: 18002;
}
#popUp .popupInner .castTxt::before{
	position: absolute;
	top: -17px;
	left: -17px;
	width: calc(100% + 34px);
	height: calc(100% + 34px);
	content: '';
	display: block;
	background-image:url("../img/cast/corner01-1.png"), url("../img/cast/corner02-1.png"), url("../img/cast/corner03-1.png");
	background-position: 100% 0, 0 100%, 100% 100%;
	background-size: auto 78px, 78px auto, auto 78px;
	background-repeat: no-repeat, no-repeat, no-repeat;
}
#popUp .popupInner .castTxt #Name{
	position: relative;
	margin: 0 auto;
	width: 100%;
	max-width: 380px;
}
#popUp .popupInner .castTxt #Text{
	position: relative;
	margin: 0 auto;
	padding-top: 20px;
	color: #ffffff;
}
#popUp .popupInner .castTxt .profile{
	position: relative;
	margin: 0 auto;
	padding-top: 30px;
	color: #ffffff;
}
#popUp .popupInner .castTxt .profile.notdisp{padding-top: 0;}
#popUp .popupInner .castTxt .profile #profName{
	position: relative;
	margin: 0 auto 5px auto;
	color: #D6D1A7;
	font-size: 86%;
}
#popUp .popupInner .castTxt .profile.notdisp #profName{opacity: 0;}
#popUp .popupInner .castTxt .profile #Prof{
	position: relative;
	margin: 0 auto;
	font-size: 86%;
	line-height: 1.8em;
}

#popUp .close{
	position: fixed;
	top:0;
	left: 0;
	width: 50px;
	height: 50px;
	cursor: pointer;
	z-index: 18005;
}
#popUp .close span,
#popUp .close span::before {
	position: absolute;
	width: 25px;
	height: 2px;
	background: #ffffff;
}
#popUp .close span {
	top: calc(35% - 1px);
	left: calc(50% - 14.5px);
	transform: rotate(45deg);
}
#popUp .close span::before {
	content: '';
	top: 0;
	left: 0;
	transform: rotate(-90deg);
}

#media{
	position: relative;
	margin: 0 auto;
	padding: 40px 0;
	background-color: #ffffff;
}
#media h2.contents{
	position: relative;
	margin: 0 auto 25px auto;
	width: 100%;
	max-width: 640px;
}
#media #calendar{
	position: relative;
	margin: 0 auto;
	max-width: 1300px;
	width: calc(100% - 30px);
}
.fc .fc-toolbar.fc-header-toolbar{margin-bottom: 15px;}
.fc .fc-toolbar-title {font-size: 120%;font-weight: 700;color: #c9008e;}
.fc .fc-button-primary{background-color:#c9008e;border-color: #c9008e; transition: all .3s ease-out;}
.fc .fc-button-primary:hover{background-color: rgba(201,0,142,0.5);border-color: #c9008e;}
.fc .fc-button{padding: 0.1em 0.2em 0.5em 0.2em;}
.fc-daygrid-day .fc-daygrid-day-events a{padding: 0 5px;}
.fc-daygrid-day .fc-daygrid-day-events a.event01{background-color: #CA1FA6;}
.fc-daygrid-day .fc-daygrid-day-events a.event02{background-color: #1DA1C6;}
.fc-daygrid-day .fc-daygrid-day-events a.event03{background-color: #0E8278;}
.fc-daygrid-day .fc-daygrid-day-events a.event04{background-color: #E25000;}
.fc-daygrid-event-dot{display: none;}
.fc-h-event{border: none;}
.fc-daygrid-dot-event .fc-event-title{font-weight: normal;}
.description{padding-top: 5px;font-size: 80%;}
.tippy-box {width:calc(100% + 20px);transform: translateX(-10px);}
.tippy-box a{text-decoration: underline;}
.fc .fc-scrollgrid-section-header.fc-scrollgrid-section-sticky > *{z-index: auto;}
.fc .fc-scroller-harness{overflow: visible;}

#media ul.typelist{
	position: relative;
	margin: 10px auto 0 auto;
	gap:0 1em;
}
#media ul.typelist li{
	position: relative;
	margin: 0;
	padding: 0 0 0 15px;
	font-size: 80%;
}
#media ul.typelist li::before{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
	content: '';
	width: 11px;
	height: 11px;
	display: block;
}
#media ul.typelist li.event01::before{background-color: #CA1FA6;}
#media ul.typelist li.event02::before{background-color: #1DA1C6;}
#media ul.typelist li.event03::before{background-color: #0E8278;}
#media ul.typelist li.event04::before{background-color: #E25000;}

/* ----- pc ----- */
@media screen and (min-width: 799px) {

	/* keyvisual */
	#keyvisual{margin: 56px auto 0 auto;}
	#keyvisual #keyvisualImg{
		height: 0;
		padding-top:60%;
		background-position: 0 0;
		background-size: auto 100%;
	}
	#keyvisual #catch{
		position: absolute;
		bottom: auto;
		top: 7%;
		left: auto;
		right: 6%;
		width: 46%;
		display: block;
		opacity: 0;
	}
	#keyvisual #roadshow{
		bottom: auto;
		left: auto;
		top: 33.2%;
		right: 5.2%;
		width: 9.4%;
	}

	nav.navigation{
		position: fixed;
		top:0;
		left: 0;
		width: 100%;
		height: 55px;
		background-color: #221817;
		border-bottom: solid 1px #ffffff;
		z-index: 6000;
	}
	nav.navigation #topNavWrap{
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		width: 100%;
	}
	nav.navigation #topNavWrap #topNav{
		position: relative;
		margin: 0 auto;
		width: 60%;
		gap: 0 40px;
		flex-wrap: nowrap;
	}
	#nav.navigation #topNavWrap #topNav a{
		display: block;
		padding: 0;
	}
	nav.navigation #topNavWrap ul.snsLinks{
		position: absolute;
		right: 20px;
		top:0;
		gap: 0 15px;
		width: 8%;
		flex-wrap: nowrap;
	}
	nav.navigation #topNavWrap ul.snsLinks li{max-width: 22px;}
	
	#topArea{
		position: absolute;
		width: 51.2%;
		right: 2%;
		top:0;
		height: 100%;
		z-index: 1800;
	}
	#topArea #logo{
		position: relative;
		margin: 13% auto 0 auto;
		width: 64%;
	}

	#topArea #credit{
		position: relative;
		margin: 8% auto 0 auto;
		font-size: min(0.81vw, .16rem);
		text-align: center;
		color: #ffffff;
		line-height: 1.8em;
	}
	#topArea #credit span.small{font-size: 60%;}
	#topArea .copyright{
		margin: 1em auto 0 auto;
		font-size: min(0.506vw, .13rem);
		line-height: 1.6em;
	}
	#topArea .copyright span.small{font-size: 60%;}
	#update{
		position: absolute;
		bottom: 2%;
		right: 0;
		width: 100%;
		background-color: #ffffff;
	}
	#update p{padding: 3px 10px;font-size: min(1.4vw, .16rem);}

	/* banner */
	#banner{
		position: absolute;
		bottom: 9%;
		left: 50%;
		margin: 0;
		transform: translateX(-50%);
		padding: 0;
		background-color: transparent;
		background: none;
		width: 90%;
		max-width: 780px;
	}
	#banner .bg{display: none;}
	#banner ul li{width: calc(33.333% - 8px);max-width: 193px;}
	#banner ul li:nth-child(2), #banner ul li:nth-child(3){width: calc(50% - 8px);max-width: 295px;}
	#banner ul li:first-child{width:100%;max-width: 600px;}
	#banner ul li img.mvtk{max-width: 320px;margin: 0 auto;}

	/* 固定背景 */
	#award .bg, #cast .bg{background-image: url("../img/cast/bg_aword_pc.jpg");}
	#about .bg{background-image: url("../img/about/bg_intro_pc.jpg");}
	#award .bg::after, #cast .bg::after{
		position: absolute;
		top:0;
		left: 0;
		width: 100%;
		height: 100%;
		content: '';
		display: block;
		background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 20%, rgba(0,0,0,0) 80%, rgba(0,0,0,1) 100%);
	}
	#award{padding: 100px 0 140px 0;}
	#award .lead #awardLogo{max-width: 250px;}
	#award .lead #awardTtl{margin: 50px auto; }
	
	/* movie */
	#movie{padding: 50px 0;}
	#movie h2{margin: 0 auto 30px auto;}
	#movie .movieList{margin: 25px auto 0 auto;}
	#movie .movieList li{width: calc(33.333% - 10px);padding: 8px 0;}
	#movie .movieList li.w100S{width: calc(33.333% - 10px);}
	#movie .movieList li.newIcon::after{
		top:-8px;
		right: -8px;
		width: 50px;
		height: 26px;
	}

	/* intro */
	#about #intro{padding: 50px 0 100px 0;}
	#about #intro h2{
		width: calc(100% - 60px);
		gap: 0 10px;
	}
	#about #intro h2 #intro01{
		margin: 0;
		width: 55%;
	}
	#about #intro h2 #intro02{
		margin: 0;
		width: calc(45% - 10px);
	}
	#about #intro .introRWrap{max-width: 1164px;}
	#about #intro .introRWrap .introR{;padding-top: 20.274%;}
	#about #intro h3{
		margin: 20px auto 0 auto;
		width: calc(100% - 60px);
	}
	#about #intro h3 img{width: 100%;}
	#about #intro .introTxt{
		margin: 25px auto 0 auto;
		width: calc(100% - 60px);
	}
	#about #intro .introTxt p{margin: 0 0 0 auto;}
	/* story*/
	#about #story{padding: 80px 0;}
	#about #story h2{max-width: 110px;}
	#about #story p{
		margin: 40px auto 0 auto;
		text-align: center;
		line-height: 2em;
	}
	
	/* cast */
	#cast{padding: 40px 0 180px 0;}
	#cast h2{
		margin: 60px auto 20px auto;
		max-width: 520px;
	}
	#cast .charaWrap{
		max-width: 1200px;
		gap: 30px 20px;
	}
	/* Copyright (c) 2024 by Hakkam Abdullah (https://codepen.io/hkmDesigner/pen/zdPrVp) */
	#cast .charaWrap .charaData {
		width: calc(25% - 20px);
		padding-top: 25%;
		cursor: pointer;
	}
	.inner {transform:  translateZ(50px) scale(0.92);}
	#cast .charaWrap .charaData.Disp.castDisp03{transition-delay: 0.3s;}
	#cast .charaWrap .charaData.Disp.castDisp04{transition-delay: 0.4s;}



	#popUp .popupInner{
		top:50%;
		padding-bottom: 0;
		transform: translate(-50%, -50%);
		max-width: 840px;
	}
	#popUp .popupInner #castImg{max-width: 300px;}
	#popUp .popupInner .castTxt{
		margin: -220px 0 0 auto;
		max-width: 680px;
		padding: 70px 50px;
		border: solid 4px #d3ac28;
		background-size: auto 64px, 64px auto, auto 64px, 540px auto;
	}
	#popUp .popupInner .castTxt::before{
		top: -27px;
		left: -27px;
		width: calc(100% + 54px);
		height: calc(100% + 54px);
		background-size: auto 125px, 125px auto, auto 125px;
	}
	#popUp .popupInner .castTxt #Name{
		margin: 0 0 0 auto;
		width: 65%;
		max-width: 65%;
	}
	#popUp .popupInner .castTxt #Name img{width: 80%;margin: 0 auto;}
	#popUp .popupInner .castTxt #Text{padding-top: 50px;}
	#popUp .popupInner .castTxt .profile{padding-top: 35px;}
	#popUp .popupInner .castTxt .profile #Prof{
		font-size: 88%;
		line-height: 1.8em;
	}
	#popUp .close{
		width: 70px;
		height: 70px;
	}
	#popUp .close span,
	#popUp .close span::before {width: 45px;}
	#popUp .close span {left: calc(50% - 19.5px);}

	/* media */
	#media{padding: 50px 0;}
	#media h2.contents{margin: 0 auto 35px auto;}
	.fc .fc-toolbar.fc-header-toolbar{margin-bottom: 25px;}
	.fc .fc-toolbar-title {font-size: 140%;}
	.fc .fc-button{padding: 0.1em 0.6em;}
	.fc .fc-daygrid-body-unbalanced .fc-daygrid-day-events{min-height: 5em;}

}

@media screen and (min-width: 799px) and (max-width: 929px) {
	#banner{bottom: 3%;}
	#update{
		bottom: calc(-1em - 18px);
		width: 100vw;
		right: -4%;
		background-color: #ffffff;
		border-bottom: solid 1px #c9008e;
	}
	#update p{font-size: min(1.8vw, .16rem);}
}
@media screen and (min-width: 500px) and (max-width: 798px) {
	#update p{font-size: min(3.2vw, .16rem);}
}
	
@media screen and (max-height: 790px) {
	#popUp .popupInner{
		top:50px;
		left: 50%;
		padding-bottom: 50px;
		transform: translate(-50%, 0);
	}
}