@charset "UTF-8";
/* ハロウィン特集
----------------------------------------------------------*/

/* reset
---------------------- */
#hallow{
	text-align: center;
	overflow: hidden;
	padding-bottom: 85px;
}
h2.h1{
	text-align:center;
}
/* contents
---------------------- */
#hallow .main{
	width:1100px;
	height:1020px;
	background:url(/img/event/ehallow2026/main_bg.png)no-repeat;
	position: relative;
}
#hallow .main img{
	position: absolute;
}
#hallow .main .ttl{
	top:86px;
	left:24px;
	z-index:1;
}
#hallow .main .ttl.active{
	animation:rubberBand 1.5s forwards;
}
#hallow .main .ico1{
	top:353px;
	left:173px;
	z-index:1;
}
#hallow .main .ico1.active{
	animation:heartBeat 1.5s forwards .3s;
}
#hallow .main .ico2{/* ねずみ */
	bottom:23px;
	right:19px;
	z-index:2;
}
#hallow .main .ico2.active{
	animation:shakeY 1.5s forwards 1.2s;
}
#hallow .main .ico3{
	top:-5px;
	left:0;
	z-index:1;
}
#hallow .main .ico3.active{
	animation:flash 1s forwards 2;
}
#hallow .main .ico4{
	top:-8px;
	right:104px;
}
#hallow .main .ico4.active{
	animation:fadeInDown 1.5s forwards;
}
#hallow .main .ico5{
	top:-26px;
	right:17px;
}
#hallow .main .ico5.active{
	animation:fadeInDown 2s forwards;
}
#hallow .main .ico6{/* こうもり1 */
	top:93px;
	left:318px;
}
#hallow .main .ico6.active{
	animation:rubberBand 3s forwards;
}
#hallow .main .ico7{/* こうもり2 */
	top:89px;
	right:395px;
}
#hallow .main .ico7.active{
	animation:tada 2s forwards 1.2s;
}
#hallow .main .ico8{/* おばけ */
	top:86px;
	right:194px;
}
#hallow .main .ico8.active{
	animation:fadeInUp 2s forwards;
}
#hallow .main .ico9{/* 窓1 */
	top:417px;
	left:18px;
}
#hallow .main .ico9.active{
	animation:fadeInLeft 1s forwards .5s;
}
#hallow .main .ico10{/* 窓2 */
	top:460px;
	right:21px;
}
#hallow .main .ico10.active{
	animation:fadeInRight 1.5s forwards;
}
#hallow .main .ico11{/* キャンディ */
	bottom:53px;
	left:50px;
}
#hallow .main .ico11.active{
	animation:rotateIn 1s forwards 1.5s;
}
#hallow .menu{
	display:flex;
	gap:20px;
	justify-content: center;
	margin-top: 45px;
}
#hallow .menu li{
	width:340px;
	height:260px;
}
#hallow .menu li:nth-child(1){
	background:url(/img/event/ehallow2026/menu_01_bg.png)no-repeat;
}
#hallow .menu li:nth-child(2){
	background:url(/img/event/ehallow2026/menu_02_bg.png)no-repeat;
}
#hallow .menu li:nth-child(3){
	background:url(/img/event/ehallow2026/menu_03_bg.png)no-repeat;
}
#hallow .menu li a{
	width:100%;
	height:100%;
	display:flex;
	align-items: center;
	justify-content: center;
	position: relative;
}
#hallow .menu li a::after{
	content:url(/img/event/ehallow2026/menu_arr1.png);
	position: absolute;
	bottom:-15px;
	left:calc(50% - 33px);
}
#hallow .menu li:nth-child(3) a::after{
	content:url(/img/event/ehallow2026/menu_arr2.png);
}
#hallow .menu li a:hover{
	opacity:1;
}
#hallow .menu li a:hover img{
	animation:rotateIn 1s forwards;
}
#hallow .menu li a:hover::after{
	animation:shakeY 1s forwards;
}
#hallow .menu li:nth-child(3) a:hover::after{
	animation:shakeX 1s forwards;
}
ul.btm_banner{
	display:flex;
	align-items: center;
	flex-direction: column;
	gap: 70px;
	padding: 50px 50px 0;
}
ul.btm_banner li{

}
ul.btm_banner li img{
	max-width:100%;
}
ul.btm_banner li p{
	font-size: 20px;
	line-height: 1;
	text-align: center;
	text-decoration: underline;
	padding-top: 1em;
}
ul.btm_banner li p::after{
	content:" >";
}
ul.to_top{
	text-align:center;
	margin-top:50px;
}

/*
 * Custom animations
 * Extracted from animate.css
 */

@keyframes rubberBand {
  from {
    transform: scale3d(1, 1, 1);
  }

  30% {
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    transform: scale3d(0.95, 1.05, 1);
  }

  75% {
    transform: scale3d(1.05, 0.95, 1);
  }

  to {
    transform: scale3d(1, 1, 1);
  }
}

@keyframes heartBeat {
  0% {
    transform: scale(1);
  }

  14% {
    transform: scale(1.3);
  }

  28% {
    transform: scale(1);
  }

  42% {
    transform: scale(1.3);
  }

  70% {
    transform: scale(1);
  }
}

@keyframes shakeX {
  from,
  to {
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translate3d(-10px, 0, 0);
  }

  20%,
  40%,
  60%,
  80% {
    transform: translate3d(10px, 0, 0);
  }
}

@keyframes shakeY {
  from,
  to {
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translate3d(0, -10px, 0);
  }

  20%,
  40%,
  60%,
  80% {
    transform: translate3d(0, 10px, 0);
  }
}

@keyframes flash {
  from,
  50%,
  to {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes tada {
  from {
    transform: scale3d(1, 1, 1);
  }

  10%,
  20% {
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }

  30%,
  50%,
  70%,
  90% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%,
  60%,
  80% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  to {
    transform: scale3d(1, 1, 1);
  }
}

@keyframes rotateIn {
  from {
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }

  to {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}