@charset "UTF-8";
a:hover {
  opacity: 0.8;
}

@media only screen and (max-width: 768px) {
  .pc {
    display: none;
  }
  .sp {
    display: block;
    width: 100%;
  }
}
.float_btn {
  z-index: 99;
  position: fixed;
  top: 35%;
  right: 0;
}

@media only screen and (max-width: 768px) {
  .sp_float_btn {
    z-index: 99;
    position: fixed;
    bottom: 0;
    width: 95%;
    left: 0;
    right: 0;
    margin: auto;
  }
}
@media only screen and (min-width: 769px) {
  body {
    position: relative;
    background-image: url(../images/body_bg.png);
  }
  .bg_img {
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 1;
    display: flex;
    align-items: baseline;
    width: 100%;
    justify-content: space-between;
    z-index: -2;
  }
  .sp {
    display: none;
  }
  .bg {
    margin: auto;
    background-position: center center;
    background-repeat: no-repeat;
  }
  .wrap_fade_in {
    display: flex;
  }
  .fade_in_sub {
    width: 30%;
    margin: 0 10px;
  }
  .inr {
    position: relative;
    margin: auto;
    height: 100%;
    max-width: 960px;
  }
  .slick-list {
    width: 261px;
  }
  .sec_01 {
    background-image: url(../images/pc_img_01_1023.png?1023);
    height: 2021px;
    position: relative;
  }
  .sec_01 .fv_btn {
    position: absolute;
    top: 28.3%;
    left: 0;
    right: 0;
    width: 42%;
  }
  .sec_01 .btn {
    position: absolute;
    bottom: 10.8%;
    left: 0;
    right: 0;
  }
  .sec_01 .btn img {
    margin: auto;
  }
  .sec_02 {
    background-image: url(../images/pc_img_02.png);
    height: 697px;
  }
  .sec_02 .slider {
    position: absolute;
    left: 62%;
    top: 30%;
  }
  .sec_03 {
    background-image: url(../images/pc_img_03.png);
    height: 1951px;
  }
  .sec_04 {
    background-image: url(../images/pc_img_04.png);
    height: 700px;
  }
  .sec_04 .h2_ttl {
    margin: auto;
    position: absolute;
    top: 12%;
    left: 0;
    right: 0;
  }
  .sec_05 {
    background-image: url(../images/pc_img_05.png);
    height: 970px;
  }
  .sec_05 .user_voice {
    position: absolute;
    left: 0;
    right: 0;
    top: 27%;
  }
  .sec_06 {
    background-image: url(../images/pc_img_06.png);
    height: 822px;
  }
  .sec_07 {
    height: 777px;
  }
  .sec_07 .txt {
    margin: auto;
    position: absolute;
    top: 6%;
    left: 0;
    right: 0;
  }
  .sec_08 {
    background-image: url(../images/pc_img_08.png);
    height: 1057px;
  }
  .sec_08 .btn {
    position: absolute;
    bottom: 7%;
    left: 0;
    right: 0;
  }
  .sec_08 .btn img {
    margin: auto;
  }
  .sec_09 {
    background-image: url(../images/pc_img_09.png);
    height: 750px;
  }
  .sec_line {
    background-image: url(../images/pc_line.png);
    height: 322px;
  }
  .sec_line .btn {
    position: absolute;
    bottom: 14%;
    right: 159px;
  }
  .sec_10 {
    background-image: url(../images/pc_img_10.png);
    height: 1332px;
  }
  .sec_10 .btn {
    position: absolute;
    bottom: 14%;
    left: 0;
    right: 0;
  }
  .sec_10 .btn img {
    margin: auto;
  }
}
@media only screen and (max-width: 768px) {
  .bg {
    position: relative;
  }
  .slick-list {
    width: 60vw;
  }
  .slick-list .slick-slide img {
    width: 86%;
    height: auto;
  }
  .sec_01 .fv_btn {
    position: absolute;
    top: 40%;
    left: 0;
    right: 0;
    margin: auto;
    width: 90%;
  }
  .sec_01 .btn {
    position: absolute;
    bottom: 6%;
    left: 12%;
    width: 80%;
  }
  .sec_02 .slider {
    position: absolute;
    top: 28.8%;
    width: 52%;
    left: 0;
    right: 0;
    margin: auto;
  }
  .sec_04 {
    height: 275vw;
  }
  .sec_04 .h2_ttl {
    position: absolute;
    top: 7%;
    left: 0;
    right: 0;
    width: 90%;
    margin: auto;
  }
  .sec_04 .wrap_fade_in {
    padding: 0 20px;
    position: absolute;
    top: 27%;
  }
  .sec_04 .wrap_fade_in .fade_in_sub {
    margin-bottom: 2%;
  }
  .sec_05 .user_voice {
    position: absolute;
    top: 32%;
    left: 0;
    right: 0;
    width: 90%;
    margin: auto;
  }
  .sec_07 {
    height: 194vw;
  }
  .sec_07 .txt {
    position: absolute;
    top: 5%;
    left: 0;
    right: 0;
    margin: auto;
    width: 87%;
  }
  .sec_08 .btn {
    position: absolute;
    bottom: 1%;
    left: 0;
    right: 0;
    margin: auto;
  }
  .sec_line .btn {
    position: absolute;
    bottom: 37%;
    left: 0;
    right: 0;
    margin: auto;
    width: 90%;
  }
  .sec_10 .btn {
    position: absolute;
    bottom: 9%;
    left: 14%;
    width: 80%;
  }
}
/*パララックス*/
.attachment {
  position: relative;
}

.attachment1::before {
  content: "";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: -1;
  width: 1280px;
  height: 100vh;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url(../images/pc_img_04.png);
  background-size: cover;
}

.attachment2::before {
  content: "";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: -1;
  width: 1280px;
  height: 100vh;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url(../images/pc_img_07.png);
  background-size: cover;
}

@media only screen and (max-width: 768px) {
  .attachment1::before {
    background-image: url(../images/sp_img_04.png);
  }
  .attachment2::before {
    background-image: url(../images/sp_img_07.png);
  }
}
/*左から1つづフェードイン*/
.wrap_fade_in {
  width: 100%;
  justify-content: center;
  position: absolute;
  top: 31%;
}

.fadein {
  opacity: 0;
  transform: translateY(-30px); /* 画像を上に30px移動 */
  transition: opacity 0.5s, transform 1s;
}

.fadein.active {
  opacity: 1;
  transform: translateY(0); /* 画像を元の位置に戻す */
}

/*フェードイン*/
.js-fade {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-50px);
  transition: opacity 1s, visibility 1s, transform 1s;
}

.scroll {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}

/*キラッとボタン*/
@keyframes shiny {
  0% {
    left: -20%;
  }
  10% {
    left: 120%;
  }
  100% {
    left: 120%;
  }
}
.shiny-btn {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
}

.shiny-btn::after {
  content: "";
  position: absolute;
  top: -10%;
  left: -20%;
  width: 40px;
  height: 100%;
  transform: scale(2) rotate(20deg);
  background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0.5) 100%, rgba(255, 255, 255, 0) 0%);
  /* アニメーション */
  animation-name: shiny;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}/*# sourceMappingURL=style_1023.css.map */