@charset "UTF-8";

/* ------------- ここから雪 ------------- */

.main_winter .snows {
	background-image:  url('../images/Winter/snow1.png'), url('../images/Winter/snow2.png');
	animation: drop 10s linear infinite;
    width: 100%;
    height: 100vh;
}

@keyframes drop {
	0%   { background-position:  0 0, 0 0; }
	100% { background-position: -400px 800px, 0 600px; }
}

/* ------------- ここまで雪 ------------- */


/* ------------- ここから背景 ------------- */

main{
    background: url("../images/Winter/bg.jpg") no-repeat no-repeat;
    animation: none;
    background-size: cover;
}

/* ------------- ここまで背景 ------------- */

.main_winter{
    position: relative;
    width: 100%;
}

.main_winter .obj_tox{
    position: absolute;
    z-index: 7;
    bottom: -50px;
    width: 100%;
    overflow: hidden;
    background: url('../images/Winter/Toxtricity.png') no-repeat no-repeat;
    margin: auto;
    height: 750px;
    background-size: contain;
    background-position: center center;
}

.main_winter .obj_tox img{
    position: absolute;
    mix-blend-mode: overlay;
    left: 50%;
    transform: translate(-50%, 0%);
    /* opacity: .4; */
    animation: particleakarusa 3s ease-out 0;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
}

.main_winter .fire {
    position: absolute;
    left: calc(50% - 21px);
    bottom: calc(46% - 15px);
    width: 20px;
    height: 20px;
    background-color: transparent;
}

.main_winter  .main-fire {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(
      farthest-corner at 10px 0,
      #d43300 0%,
      #ef5a00 95%
    );
    transform: scaleX(0.8) rotate(45deg);
    border-radius: 0 40% 60% 40%;
    filter: drop-shadow(0 0 10px #d43322);
}

.main_winter .particle-fire {
    position: absolute;
    top: 60%;
    left: 35%;
    width: 5px;
    height: 5px;
    background-color: #ef5a00;
    border-radius: 50%;
    filter: drop-shadow(0 0 10px #d43322);
    animation: particleUp 2s ease-out 0;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
}

@keyframes particleUp {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    top: -100%;
    transform: scale(0.5);
  }
}

@keyframes particleakarusa {
  0% {
    opacity: .1;
  }
  50% {
    opacity: .3;
  }
  80% {
    opacity: .2;
  }
  100% {
    opacity: .1;
  }
}


@media screen and (max-width:1023px) {
    .main_winter .obj_tox{
        position: fixed;
        bottom: -40px;
        width: 130%;
        transform: translate(-10%, 5%);
    }
}

@media screen and (max-width:480px) {
    .main_winter .obj_tox{
        position: fixed;
        bottom: -30px;
        width: 180%;
        transform: translate(-20%, 17%);
    }

    .main_winter .fire {
        position: absolute;
        left: calc(50% - 15px);
        bottom: calc(46% - 0px);
        width: 15px;
        height: 15px;
        background-color: transparent;
    }
}