/*==================================================
packageスライダーのためのcss
===================================*/
.lp-package_slider { /*横幅94%で左右に余白を持たせて中央寄せ*/
  width: 94%;
  margin: 0 auto;
}
.lp-package_slider img {
  width: 60vw; /*スライダー内の画像を60vwにしてレスポンシブ化*/
  height: auto;
}
.lp-package_slider .slick-slide {
  transform: scale(0.8); /*左右の画像のサイズを80%に*/
  transition: all .5s; /*拡大や透過のアニメーションを0.5秒で行う*/
  opacity: 0.5; /*透過50%*/
}
.lp-package_slider .slick-slide.slick-center {
  transform: scale(1); /*中央の画像のサイズだけ等倍に*/
  opacity: 1; /*透過なし*/
}
/*矢印の設定*/
/*戻る、次へ矢印の位置*/
.slick-prev, .slick-next {
  position: absolute; /*絶対配置にする*/
  top: 42%;
  cursor: pointer; /*マウスカーソルを指マークに*/
  outline: none; /*クリックをしたら出てくる枠線を消す*/
  border-top: 2px solid #666; /*矢印の色*/
  border-right: 2px solid #666; /*矢印の色*/
  height: 15px;
  width: 15px;
}
.slick-prev { /*戻る矢印の位置と形状*/
  left: -1.5%;
  transform: rotate(-135deg);
}
.slick-next { /*次へ矢印の位置と形状*/
  right: -1.5%;
  transform: rotate(45deg);
}
/*ドットナビゲーションの設定*/
.slick-dots {
  text-align: center;
  margin: 20px 0 0 0;
}
.slick-dots li {
  display: inline-block;
  margin: 0 5px;
}
.slick-dots button {
  color: transparent;
  outline: none;
  width: 8px; /*ドットボタンのサイズ*/
  height: 8px; /*ドットボタンのサイズ*/
  display: block;
  border-radius: 50%;
  background: #ccc; /*ドットボタンの色*/
}
.slick-dots .slick-active button {
  background: #333; /*ドットボタンの現在地表示の色*/
}
/*==================================================
closeスライダーのためのcss
===================================*/
.lp_close_slider { /*横幅94%で左右に余白を持たせて中央寄せ*/
  width: 94%;
  margin: 2em auto 2em;
}
.lp_close_slider img {
  width: 100%; /*スライダー内の画像を横幅100%に*/
  height: auto;
}
.lp_close_slider div {
  text-align: left;
  margin: 1em auto 0.3em;
  font-size: 1.7rem;
}
.lp_close_slider p {
  text-align: left;
  font-size: 1.4rem;
}
/*slickのJSで書かれるタグ内、スライド左右の余白調整*/
.lp_close_slider .slick-slide {
  margin: 0 10px;
}
/*矢印の設定*/
/*戻る、次へ矢印の位置*/
.slick-prev, .slick-next {
  position: absolute; /*絶対配置にする*/
  top: 42%;
  cursor: pointer; /*マウスカーソルを指マークに*/
  outline: none; /*クリックをしたら出てくる枠線を消す*/
  border-top: 2px solid #666; /*矢印の色*/
  border-right: 2px solid #666; /*矢印の色*/
  height: 15px;
  width: 15px;
}
.slick-prev { /*戻る矢印の位置と形状*/
  left: -1.5%;
  transform: rotate(-135deg);
}
.slick-next { /*次へ矢印の位置と形状*/
  right: -1.5%;
  transform: rotate(45deg);
}
/*==================================================
mv
===================================*/
/* lp_mvbg */
.lpmv_bg01 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50vh;
  opacity: 0;
  z-index: 2;
  background: url("https://yataro.itembox.design/item/lpmv_casualbg01.png") center / cover;
  background-repeat: no-repeat;
}
.lpmv_bg01_on {
  animation-name: slide;
  animation-duration: 2s;
  animation-timing-function: ease;
}
@keyframes slide {
  0% {
    transform: translateX(0%);
    opacity: 0;
  }
  1% {
    transform: translateX(0%);
    opacity: 1;
  }
  100% {
    transform: translateX(100%);
    opacity: 1;
  }
}
.lpmv_bg02 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50vh;
  opacity: 0;
  z-index: 2;
  background: url("https://yataro.itembox.design/item/lpmv_casualbg02.png") center / cover;
  background-repeat: no-repeat;
}
.lpmv_bg02_on {
  animation-name: slide2;
  animation-duration: 2s;
  animation-timing-function: ease;
}
@keyframes slide2 {
  0% {
    transform: translateX(0%);
    opacity: 0;
  }
  1% {
    transform: translateX(0%);
    opacity: 1;
  }
  100% {
    transform: translateX(-100%);
    opacity: 1;
  }
}
/* lp_mv */
.lp_mainv_on {
  animation-name: lp_mainvAnime;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}
@keyframes lp_mainvAnime {
  from {
    filter: grayscale(100%);
  }
  to {
    filter: grayscale(0);
  }
}

/*==================================================
fadein
===================================*/

/* その場で */
.fadeIn {
  animation-name: fadeInAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes fadeInAnime {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* 下から */
.fadeUp {
  animation-name: fadeUpAnime;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* 上から */
.fadeDown {
  animation-name: fadeDownAnime;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes fadeDownAnime {
  from {
    opacity: 0;
    transform: translateY(-100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.fadeInTrigger, .fadeUpTrigger, .fadeDownTrigger, /*==================================================
アニメーション設定
===================================*/ /* アニメーションスタートの遅延時間を決めるCSS*/
.delay-time05 {
  animation-delay: 0.5s;
}
.delay-time1 {
  animation-delay: 1s;
}