@charset "utf-8";

/*___________スマホ用CSS_____________*/
@media print, screen and (max-width: 767px) {
  /*ウィンドウ幅が最大767pxまでの場合に適用*/

  body,
  html {
    overflow-x: hidden;
  }

  body {
    background-color: #fff;
    background-color: #000;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  @keyframes fadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  @-webkit-keyframes fadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  img {
    vertical-align: bottom;
    height: auto;
  }
  a img {
    -webkit-transition: 0.8s;
    -moz-transition: 0.8s;
    -o-transition: 0.8s;
    -ms-transition: 0.8s;
    transition: 0.8s;
  }
  a img:hover {
    opacity: 0.6;
    filter: alpha(opacity=60);
    -moz-opacity: 0.6;
  }

  #content_wrapper {
    width: 80%;
    max-width: none;
    margin: 0 10%;
    z-index: 10;
  }
  #content_wrapper img {
    width: 100%;
    height: auto;
  }

  /*FV*/
  #fv {
    position: relative;
    width: 100%;
  }
  #fv .fv_btn {
    position: absolute;
    bottom: 3.5%;
    left: 7%;
    width: 86%;
  }
  #fv .fv_btn:hover {
    opacity: 0.7;
  }

  /*message*/
  #message {
    position: relative;
    width: 100%;
  }

  /*set*/
  #set {
    position: relative;
    width: 100%;
  }

  /*cta*/
  #cta {
    position: relative;
    width: 100%;
  }
  #cta .cta_btn {
    position: absolute;
    bottom: 6%;
    left: 7%;
    width: 86%;
  }
  #fv .fv_btn:hover {
    opacity: 0.7;
  }

  /* 背景の雪コンテナ */
  .snow-bg {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
  }

  /* 雪の粒 */
  .snowflake {
    position: absolute;
    top: -10vh; /* 画面の上から降ってくる起点 */
    width: 2vw;
    height: 2vw;

    background-image: url("/christmas2025/img/snow.png");
    background-repeat: no-repeat;
    background-size: contain;

    opacity: 0.6;
    animation-name: snowFall;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }

  /* 上から下へ落ちるアニメーション */
  @keyframes snowFall {
    0% {
      transform: translate3d(0, -10vh, 0);
    }
    50% {
      transform: translate3d(10px, 50vh, 0); /* ちょっと横に揺れる */
    }
    100% {
      transform: translate3d(-10px, 110vh, 0);
    }
  }
}