#banner{position:relative;overflow: hidden;margin-top: 100px;}
#banner:before{content:url(/images/01/img-banner-left.png);position: absolute;top: 0;left: 0;z-index: 2;}
#banner:after{content:url(/images/01/img-banner-left.png);position: absolute;top: 0;right: 0;z-index: 2;transform: scaleX(-1);}

#banner_box , #banner_box .item , #banner_box .img_box { position: relative; }
#banner_box .img_box img {min-width: 100vw;width: 100vw;aspect-ratio: 5/2;}

#banner_box:before{
    content: "";
    position: absolute;
    top: auto;
    bottom: 10px;
    left: 50px;
    width: 240px;
    height: 317px;
    z-index: 11;
    background-image: url(/images/01/img-pet01.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 100% 100%;
    -webkit-animation:birdJitter 3s ease-in both infinite;
    animation:birdJitter 3s ease-in both infinite
    }
@keyframes birdJitter{0%,60%,to{-webkit-transform:translate(0,0);transform:translate(0,0)}
30%{-webkit-transform:translate(-1px,0) rotate(-6deg);transform:translate(-1px,0) rotate(-6deg)}
80%{-webkit-transform:translate(0,0) rotate(3deg);transform:translate(0,0) rotate(3deg)}
}

#banner_box:after{
    content: "";
    position: absolute;
    top: auto;
    bottom: -70px;
    left: 0;
    width: 100%;
    height: 212px;
    z-index: 1;
    background-image: url(/images/01/bg_wave4.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 100% 100%;
   }
#banner_box .slick-current .img_box img {
	-webkit-animation: img_scale 5.2s ease-in both;
	        animation: img_scale 5.2s ease-in both;
}
@-webkit-keyframes img_scale {
	0% {
	  -webkit-transform: scale(1.05);
			  transform: scale(1.05);
	}
	100% {
	  -webkit-transform: scale(1);
			  transform: scale(1);
	}
  }
  @keyframes img_scale {
	0% {
	  -webkit-transform: scale(1.05);
			  transform: scale(1.05);
	}
	100% {
	  -webkit-transform: scale(1);
			  transform: scale(1);
	}
  }
  @-webkit-keyframes img_scale1 {
	0% {
	  -webkit-transform: scale(1);
			  transform: scale(1);
	}
	50% {
	  -webkit-transform: scale(1.05);
			  transform: scale(1.05);
	}
	100% {
	  -webkit-transform: scale(1);
			  transform: scale(1);
	}
  }
  @keyframes img_scale1 {
	0% {
	  -webkit-transform: scale(1);
			  transform: scale(1);
	}
	50% {
	  -webkit-transform: scale(1.05);
			  transform: scale(1.05);
	}
	100% {
	  -webkit-transform: scale(1);
			  transform: scale(1);
	}
  }

/* slick-current */
#banner_box.slick-current .info .txt * { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); transition-delay: .3s; -webkit-transition-delay: .3s; }
#banner_box .slick-current .info .txt p { letter-spacing: 2px; transition-delay: .6s; -webkit-transition-delay: .6s; }

#banner_box .img_box iframe , #banner_box .img_box video {position: absolute;width: 100%;height: auto;top: -25%;left: 0;}
#banner_box .slick-dotted .slick-track { min-width: 100vw; }
#banner_box .info_box , #banner_box .atag_item { position: absolute; }
#banner_box .info_box {width: 100%;height: 55%;display: flex;align-items: center;bottom: 200px;left: 0;}
#banner_box .info_box *{color:#fff;width: min(90vw, var(--width-xl));}
#banner_box .info_box h3{font-family: "Lilita One", sans-serif;font-size: max(6 * (1vw + 1vh) / 2, 50px);font-weight: 300;line-height: 1.2;width: min(80% , 700px);}
#banner_box .info_box p{font-size:30px;letter-spacing: 4px;}

p.baScro{position:absolute;bottom: 170px;right: 12vw;overflow: hidden;z-index: 10;}
p.baScro a{position: relative;cursor: pointer;display: flex;align-items: center;justify-content: center;flex-direction: row;writing-mode: vertical-lr;}
p.baScro a svg{width: 17px;height: 17px;fill: var(--white);margin-top: 10px;}
p.baScro a b{font-size: 14px;font-weight: 400;color: var(--white);margin-bottom: 10px;letter-spacing: 1px;-webkit-animation-name: mouse;-webkit-animation-iteration-count: infinite;-webkit-animation-timing-function: linear;-webkit-animation-duration: 1s;}
p.baScro a span{width: 26px;height: 40px;background-color: rgb(255 255 255 / 18%);border-radius: 50px;display: flex;align-items: center;justify-content: center;position: relative;}
p.baScro a span:after{content:'';width: 6px;height: 6px;background: #fff;border-radius: 50px;top: 10px;position: absolute;}
p.baScro a:hover b:after{transition: transform 0.2s cubic-bezier(0.25,1,0.5,1);top: 72px;width: 100px;}
p.baScro a:hover span:after{width: 10px;height: 10px;top: 20px;}
@keyframes mouse{0%{margin-bottom:40px}50%{margin-bottom:50px;}100%{margin-bottom:40px;}}

#banner .allwrap{position:absolute;right:0;bottom:0;width:100%}
#banner .allwrap #canvas-container{position:absolute;bottom: 550px;}

@media screen and (max-width: 1160px){
    p.baScro{display:none;}
	#banner_box .img_box img { aspect-ratio: 5/3; }
    #banner_box .img_box iframe, #banner_box .img_box video{width: auto;height: 100%;top: 0;}
    #banner{margin-top: 60px;}
    #banner:before, #banner:after,#banner_box:before,#banner_box:after{display:none;}
}
@media screen and (max-width: 640px){
    #banner_box .info_box p{font-size: 20px;}
	#banner_box .img_box img { aspect-ratio: 3/4; }
}