@charset "UTF-8";

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

}

body {
  background: #231815;
}

.c_red {
  color: #db004a;
}

#autumn [data-color=seasonal_main] {
  color: #d094e7 !important;
}


#autumn div,
#autumn section {
  position: relative;
  overflow: hidden;
}

.background-image:before,
.background-image:after{
	content: "";
	background-size: cover;
	background-position: center;
	width: 100%;
	height: 100%;
	position:fixed;
	top: 0;
	left: 0;
	z-index: -3;
	transition: all 0.8s;
	opacity: 0;
}
.background-image:after{
	background:#231815;
	opacity: 0;
	transition: all 1.5s;
}
.in_active .background-image:before{
	z-index: -2;
	opacity: 1;
}
.is_active .background-image:after{
	opacity:0.5;
	z-index: -1;
}


.cover:before,
.cover:after {
	content: "";
	background: linear-gradient(to bottom, rgba(35, 24, 21, 0) 60%, #231815 100%);
	width: 100%;
	height: 50%;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 1;
}
.cover:before {
	transform: rotate(180deg);
	top: 0;
	bottom:auto;
}


.haunted-ttl{
  position: relative;
  line-height: 1.4;
    display: inline-block;
}
.haunted-ttl:first-letter{
	color:#db004a;
	font-size:140%;
 }
.haunted-ttl:before{
	content: "";
	width: 50px;
	height: 1px;
	display: block;
background: rgb(214,82,240);
background: linear-gradient(90deg, rgba(214,82,240,1) 46%, #db004a 46%);
	transform: rotate(-45deg);
	position: absolute;
	top: 5px;
	left: -25px;
}
.haunted-ttl:after{
  content: "";
  width: 50px;
  height: 1px;
  display: block;
background: rgb(214,82,240);
background: linear-gradient(90deg, rgba(214,82,240,1) 46%, #db004a 46%);
  transform: rotate(-45deg);
  position: absolute;
  bottom:5px;
  right: -25px;
}


/****************************
.pege__kv
****************************/
	.pege__kv .img__16x9 img {
	  aspect-ratio: 16 / 8;
	   aspect-ratio: 250 / 107;
	  object-position: top;
	}

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

	.pege__kv .img__16x9 img {
	  aspect-ratio: 110 / 141;
	}
}
/****************************
.pege__about
****************************/


.pege__about .background-image:before{
	background-image: url(../img/haunted/about/bg.jpg);
}
.pege__about.is_active .background-image:before{
	animation: zoom 15s 1;
	animation-fill-mode: forwards;
}
@keyframes zoom {
   0% {
      transform: scale(1);
   }
   100% {
      transform: scale(1.3);
   }
}



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

.pege__about .background-image:before {
  background-size: 180%;
  background-repeat: no-repeat;
}

}

/****************************
.pege__navi
****************************/

.pege__navi ul{
  display: flex;
  align-items: start;
  column-gap: 24px;
  row-gap: 24px;
  max-width: 880px;
  margin: 0 auto;
  flex-wrap: wrap;
  justify-content: center;
}
.pege__navi ul li{
	transition: all 0.4s;
	line-height: 1.2;
	width: calc(100% / 3.2);
	position: relative;
}

.pege__navi ul li a{
	display: block;
}


.pege__navi ul li img {
  border-radius: 9999px;
  position: relative;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  outline: 10px solid rgb(198 80 80 / 40%);
  outline-offset: -20px;
  border: 5px #581b1b solid;
  margin-top: -20px;
}
.pege__navi ul li p{
  font-size: 13px;
  color: #000;
  position: relative;
  z-index: 2;
  background: #d094e7;
  border-radius: 9999px;
  padding: 5px 10px;
  display: inline-block;
  margin-top: -25px;
    font-weight: 500;
}
.pege__navi ul li p:first-child{
	font-size: 24px;
	background: transparent;
	margin-top: 0px;
	color: #fff;
	top: 0px;
	padding: 0;
}
.pege__navi ul li p:first-child:first-letter{
 }


.pege__navi ul li:hover img{
	transform: scale(1.1);
	transition: all 0.4s;
}

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

	.pege__navi ul li {
	  width: calc(100% / 2.2);
	}
	.pege__navi ul li p:first-child{
	  font-size: 16px;
	}
}

/****************************
.pege__silence
****************************/

.pege__silence::before,.pege__silence::after{
  position: absolute;
  z-index: 2;
  top: 0%;
  display: block;
  width: 50%;
  height: 100%;
  content: '';
  background-color:#231815;
  top: 0;
	transition: all 0.4s;
}
.pege__silence::before{
  left: 0;
}
.pege__silence::after{
  right: 0;
}
.pege__silence.is_active::before{
  left: 0;
  animation : curtain_l 1s;
　-webkit-animation : curtain_l 3s;
  visibility: hidden;
  top: 0%;
  height: 100%;
}
.pege__silence.is_active::after{
  right: 0;
  animation : curtain_r 1s;
　-webkit-animation : curtain_r 3s;
  visibility: hidden;
  top: 0%;
  height: 100%;
}

@keyframes curtain_l{
  0%{visibility: visible;}
  20%{transform: rotate(0deg) translateX(0%); background-color: #231815;}
  60%{transform: rotate(0deg) translateX(-50%);}
  80%{opacity: 1;}
  100%{transform: rotate(0deg) translateX(-100%); opacity:0; visibility: hidden;}
}
@-webkit-keyframes curtain_l{
  0%{visibility: visible;}
  20%{-webkit-transform: rotate(0deg) translateX(0%); background-color: #231815;}
  60%{-webkit-transform: rotate(0deg) translateX(-50%);}
  80%{opacity: 1;}
  100%{-webkit-transform: rotate(0deg) translateX(-100%); opacity:0; visibility: hidden;}
}
@keyframes curtain_r{
  0%{ visibility: visible;}
  20%{transform: rotate(0deg) translateX(0%); background-color: #231815;}
  60%{transform: rotate(-0deg) translateX(50%);}
  80%{opacity: 1;}
  100%{transform: rotate(0deg) translateX(100%); opacity:0; visibility: hidden;}
}
@-webkit-keyframes curtain_r{
  0%{visibility: visible;}
  20%{-webkit-transform: rotate(0deg) translateX(0%); background-color: #231815;}
  60%{-webkit-transform: rotate(-0deg) translateX(50%);}
  80%{opacity: 1;}
  100%{-webkit-transform: rotate(0deg) translateX(100%); opacity:0; visibility: hidden;}
}



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

/****************************
.pege__story
****************************/

.pege__story .background-image:before{
	background-image: url(../img/haunted/story/01.jpg);
}


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



.stamp{}
.stamp:before{
	content: attr(data-stamp-txt) "";
  position: relative;
	background: #5b2464;
	border-radius:10px 10px 0 0;
	overflow: hidden;
	color: #fff;
	font-size: 21px;
	top: 0;
	left: 0;
	z-index: 3;
	display: block;
	width: 100%;
	padding: 10px;
}


em.highlights {
  font-style: normal;
  background: #FFEB3B;
  line-height: 1;
  padding: 5px 10px;
  font-size: 10px;
    color: #9C27B0;
  margin: 0 5px;
  position: absolute;
  left: -10px;
  font-weight: bold;
}

.btn_inborder{
  outline: 1px solid rgb(212 121 228);
  outline-offset: -4px;
}

.daynight{
  display: inline-block;
  background: #000;
  color: #fff;
  background: linear-gradient(140deg, rgb(240 171 82) 46%, rgba(117, 39, 212, 1) 46%);
  border-radius: 9999px;
  line-height: 1;
  padding: 5px 10px;
}


.pege__navi,
#dance,
#escape{
padding:30px 0;
}
ul.note {
font-size: 13px;
}
[data-button=basic] {
  text-decoration: none;
}

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

	#dance .pege__body__rounds,
	#escape .pege__body__rounds {
		max-width: 1440px;
		margin: 0 auto;
	}
}

.newcharacter{
	background: #000;
	padding: 40px 0;
}
.newcharacter-inner {
	padding: 0 30px;
	z-index: 2;
	opacity: 0;
	transition: opacity 1.8s cubic-bezier(.27,1.2,.6,1);
}
.newcharacter.is_active .newcharacter-inner{
    opacity: 1;
}


.newcharacter .img{
	aspect-ratio: 1 / 1;
	object-position: top;
	max-width: 450px;
	animation: borderAnimation 4s linear infinite;
	margin: 0 auto;
	padding: 50px;
}


.newcharacter.in_active .img::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url(../img/haunted/character/waku.svg);
	z-index: 2;
	opacity: 0.5;
	background-size: contain;
	background-repeat: no-repeat;
	mix-blend-mode: hard-light;
}

.newcharacter img{
  aspect-ratio: 1 / 1;
  object-position: top;
  max-width: 400px;
}

/*
.replay-gif {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.replay-gif.is-loaded {
    opacity: 1;
}
*/

.newcharacter .img > div{
	font-size: 24px;
	color: #c8B172!important;
	top: 50%;
	transform: translate(-50%);
	left: 50%;
	text-align: center;
	position: absolute !important;
	white-space: nowrap;
	  line-height: 100%;
}
.newcharacter.in_active .img > div{
    /* アニメーションの設定 */
    animation-name: shrinkAndFadeIn;      /* アニメーション名（@keyframesで定義したもの） */
    animation-duration: 0.5s;              /* アニメーションが完了するまでの時間（2.5秒） */
    animation-timing-function: ease-out; /* アニメーションの速度（最後はゆっくり） */
    animation-fill-mode: forwards;       /* アニメーション終了後、最後の状態を維持する */
	animation-delay: 1.8s;
    /* アニメーション開始前の初期状態を念のため指定 */
    font-size: 26px;
    opacity: 0;
}
/* アニメーションの動きを定義 */
@keyframes shrinkAndFadeIn {
    /* アニメーション開始時 (0%) */
    from {
        opacity: 0;       /* 開始時は透明 */
    }

    /* アニメーション終了時 (100%) */
    to {
        opacity: 1;       /* 終了時は不透明 */
    }
}
@keyframes shimmer {
  100% {
    /* 最終的に右端の外側へ移動させる */
    transform: translateX(100%);
  }
}
@keyframes borderAnimation {
  0% {
    border-color:#333;
  }
  50% {
    border-color:#666;
  }
  100% {
    border-color:#333;
  }
}