@charset "UTF-8";

/* ＝＝＝＝＝＝＝＝＝＝ */
/*　　　 全体設定 　　　*/
/* ＝＝＝＝＝＝＝＝＝＝ */
html {
  scroll-behavior: smooth;
}

:root {
  --main-width: 100vw;
  --device-width: 750;
  margin-top: 0 !important;
}

img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

body {
  position: relative;
  background-color: #FFF;
  color: #000;
}

a {
  text-decoration: none;
  color: #000;
}

a:hover {
  opacity: 0.5;
  transition: 0.4s;
}

.spbr {
  display: block;
}

.pcbr {
  display: none;
}

header, main, footer {
  position: relative;
}

main>div {
  position: relative;
}


@media screen and (min-width:750px) {
  :root {
    --main-width: 100vw;
    --device-width: 1280;
  }

  .spbr {
    display: none;
  }

  .pcbr {
    display: block;
  }
}

/* ＝＝＝＝＝＝＝＝＝＝ */
/*　　content01 　　　*/
/* ＝＝＝＝＝＝＝＝＝＝ */
.fuwafuwa {
  position: absolute;
  top: 22%;
  right: 0;
  left: 0;
  animation: fuwafuwa 3s ease-in-out infinite alternate;
  background-image: url();
  background-size: 100%;
  background-repeat: no-repeat;
  display: inline-block;
  transition: 1.5s ease-in-out;
  width: 44%;
  margin: auto;
}

@keyframes fuwafuwa {
  0% {
    transform: translate(0, 0) rotate(-7deg);
  }

  50% {
    transform: translate(0, -7px) rotate(0deg);
  }

  100% {
    transform: translate(0, 0) rotate(7deg);
  }
}


/* スライダー全体 */
.slider-wrapper {
  position: absolute;
  bottom: 4%;
  left: 0;
  gap: 1.8%;
  display: flex;
  overflow: hidden;
  width: 100%;
}

/* スライド3枚のグループ */
.slider {
  animation: scroll-left 60s infinite linear .5s both;
  display: flex;
  /* スライド3枚を横並び */
}

/* スライド */
.slide {
  width: 200vw;
  /* width: calc(100vw / 1); */
}

/* スライドの画像 */
.slide img {
  display: block;
  width: 100%;
}

/* CSSアニメーション */
@keyframes scroll-left {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}

@media screen and (min-width:750px) {
  .fuwafuwa {
    position: absolute;
    top: 33%;
    right: 7%;
    left: initial;
    animation: fuwafuwa 3s ease-in-out infinite alternate;
    background-image: url();
    background-size: 100%;
    background-repeat: no-repeat;
    display: inline-block;
    transition: 1.5s ease-in-out;
    width: 24%;
    margin: initial;
  }

  /* スライド */
  .slide {
    /* width: 150vw; */
    width: calc(100vw / 1);
  }

  .slider-wrapper {
    bottom: 5%;
  }
}

/* ＝＝＝＝＝＝＝＝＝＝ */
/*　　content02 　　　*/
/* ＝＝＝＝＝＝＝＝＝＝ */
@media screen and (min-width:750px) {}

/* ＝＝＝＝＝＝＝＝＝＝ */
/*　　content03 　　　*/
/* ＝＝＝＝＝＝＝＝＝＝ */
/* モーダルと背景の指定 */
.modal-video {
  width: 100vw;
}

.js-modal-btn01 {
position: absolute;
    left: 0;
    right: 0;
    bottom: 35%;
    width: 70%;
    margin: auto;
}

.js-modal-btn02 {
position: absolute;
    left: 0;
    right: 0;
    bottom: 9%;
    width: 70%;
    margin: auto;
}

@media screen and (min-width:750px) {
  .js-modal-btn01 {
    position: absolute;
    left: 0;
    right: 35%;
    bottom: 12%;
    width: 27%;
    margin: auto;
}

.js-modal-btn02 {
    position: absolute;
    left: 50%;
    right: 17%;
    bottom: 12%;
    width: 27%;
    margin: auto;
}
}

/* ＝＝＝＝＝＝＝＝＝＝ */
/*      footer 　　　*/
/* ＝＝＝＝＝＝＝＝＝＝ */
footer .logo {
  position: absolute;
  top: 61.5%;
  left: 2%;
  width: 27%;
}

footer .logo a {
  display: block;
}

@media screen and (min-width:750px) {
  footer .logo {
    position: absolute;
    top: 18%;
    left: 68%;
    width: 7%;
}
}