@charset "UTF-8";
/*============================================================
	Base
============================================================*/

@keyframes fuwa01 {
  0% {
    transform:translate(0, 0) rotate(-2deg);
  }
  50% {
    transform:translate(0, -15px) rotate(0deg);
  }
  100% {
    transform:translate(0, 0) rotate(2deg);
  }
}
@keyframes fuwa02 {
  0% {
    transform:translate(0, -1rem) rotate(1deg);
  }
  50% {
    transform:translate(0, 0) rotate(0deg);
  }
  100% {
    transform:translate(0, -1rem) rotate(-1deg);
  }
}
@keyframes fuwa03 {
  0% {
    transform:translate(5px, 0) rotate(-2deg);
  }
  50% {
    transform:translate(0, -.6rem) rotate(0deg);
  }
  100% {
    transform:translate(5px, 0) rotate(2deg);
  }
}


#wrapper {
  overflow: hidden;
}
#mv .inner h1 {
  animation: unset;
}
.youtube {
  width: 100%;
  height: 0;
  padding-top: 56.25%;
  overflow: hidden;
  position: relative;
  background: #fff000;
}
.youtube iframe {
  position: absolute;
  left: -0.35vw;
  top: 0;
  width: 101%;
  height: 101%;
}

/* ポテチ */
#eyewitness .inner .potato {
  background: url(../img/side_img-01.svg) no-repeat;
  background-size: 100%;
  position: absolute;
  width: 32rem;
  height: 26.0952380952rem;
  /* top: -21rem; */
  top: -4rem;
  left: -18.0952380952rem;
  -webkit-transform: translateX(-32rem);
          transform: translateX(-32rem);
  animation: fuwa01 5s infinite ease-in-out alternate;
}
@media only screen and (max-width: 767px) {
  #eyewitness .inner .potato {
    width: 24.6428571429rem;
    height: 20.0714285714rem;
    /* top: -18rem; */
    top: -1rem;
    left: -12.5714285714rem;
    -webkit-transform: rotate(-90deg) translateX(-24.6428571429rem);
            transform: rotate(-90deg) translateX(-24.6428571429rem);
  }
}
#eyewitness .inner .potato .inside .chip01 {
  position: absolute;
  width: 5.1428571429rem;
  height: 4rem;
  top: 0;
  left: 0;
}
@media only screen and (max-width: 767px) {
  #eyewitness .inner .potato .inside .chip01 {
    width: 4rem;
    height: 3.0714285714rem;
  }
}
#eyewitness .inner .potato .inside .chip01.action {
  -webkit-animation: chip01 0.8s linear forwards;
          animation: chip01 0.8s linear forwards;
}
@media only screen and (max-width: 767px) {
  #eyewitness .inner .potato .inside .chip01.action {
    -webkit-animation: chip01-sp 0.8s linear forwards;
            animation: chip01-sp 0.8s linear forwards;
  }
}
#eyewitness .inner .potato .inside .chip02 {
  position: absolute;
  width: 4.6666666667rem;
  height: 4.0476190476rem;
  top: 4.5238095238rem;
  left: 0;
}
@media only screen and (max-width: 767px) {
  #eyewitness .inner .potato .inside .chip02 {
    width: 3.5714285714rem;
    height: 3.1428571429rem;
    top: 3.4642857143rem;
  }
}
#eyewitness .inner .potato .inside .chip02.action {
  -webkit-animation: chip02 0.8s linear forwards;
          animation: chip02 0.8s linear forwards;
}
@media only screen and (max-width: 767px) {
  #eyewitness .inner .potato .inside .chip02.action {
    -webkit-animation: chip02-sp 0.8s linear forwards;
            animation: chip02-sp 0.8s linear forwards;
  }
}
#eyewitness .inner .potato {
  transform: unset;
  opacity: 1;
}
#eyewitness .inner .potato .inside .chip02 ,
#eyewitness .inner .potato .inside .chip02.action {
  animation: unset;
  left: 28rem;
}
#eyewitness .inner .potato .inside .chip01 ,
#eyewitness .inner .potato .inside .chip01.action {
  animation: unset;
  left: 24rem;
}
@media only screen and (max-width: 767px) {
  #eyewitness .inner .potato .inside .chip02,
  #eyewitness .inner .potato .inside .chip02.action {
    left: 22rem;
  }
  #eyewitness .inner .potato .inside .chip01,
  #eyewitness .inner .potato .inside .chip01.action {
    left: 18rem;
  }
}


/* サボローの目撃情報、ふえてます。 */
#saboro .inner.top .slide-right,
#saboro .inner.top .slide-left {
  transform: unset;
  opacity: 1;
}
#saboro .slide.slide-left.show .inside {
  animation: fuwa02 5s infinite ease-in-out alternate;
}
#saboro .slide.slide-right.show .inside {
  animation: fuwa03 6s infinite ease-in-out alternate;
}

/* サボローって、どんなやつ？ */
#saboro .inner.top .slide-left .inside figure.cream01 {
  height: 13rem;
  opacity: 1;
  /* bottom: 47rem; */
  top: auto;
}
#saboro .inner.top .slide-left .inside figure.donut {
  /* bottom: 26rem; */
}
#saboro .inner.top .slide-right .inside figure.candy01 {
  height: 17.3rem;
  /* bottom: 29rem; */
}
#saboro .inner.top .slide-right .inside figure.candy02 {
  height: 10.3rem;
  right: 0rem;
  top: auto;
  /* bottom: 36.5rem; */
}
#saboro .inner.bottom .slide-right {
  position: absolute;
  width: 30.1904761905rem;
  height: 15.619047619rem;
  bottom: 1rem;
  left: 33.285714rem;
  animation: fuwa03 6s infinite ease-in-out alternate;
}
#saboro > .slide-left {
  position: absolute;
  bottom: 0rem;
  left: -6.6666666667rem;
  height: 30.6666666667rem;
  width: 37.8rem;
}
#saboro > .slide-left > .line-btn {
  position: absolute;
  bottom: 3rem;
  right: -0.5rem;
  width: 7rem;
}

#saboro .saboro > figure.slide-top ,
#saboro .saboro .slide_list figure ,
#saboro .saboro > figure.slide-right ,
#saboro .saboro > figure.slide-left {
  opacity: 1;
  transform: unset !important;
}
#saboro .inner .link {
  width: 21.756554%;
}
/* #eyewitness .inner .link {
  z-index: -2;
} */
@media only screen and (min-width: 768px) {
  #saboro .inner.top .slide-left .inside figure.cream01 {
    width: 18.333333rem;
  }
}
@media only screen and (max-width: 767px) {
  #saboro .inner.top .slide-left .inside figure.cream01 {
    height: 9.4rem;
    /* bottom: 50rem; */
  }
  #saboro .inner.top .slide-left .inside figure.donut {
    /* bottom: 31rem; */
  }
  #saboro .inner.top .slide-right .inside figure.candy01 {
    height: 13.3rem;
    /* bottom: 36rem; */
  }
  #saboro .inner.top .slide-right .inside figure.candy02 {
    height: 8rem;
    /* bottom: 38rem; */
  }
  #saboro .inner.bottom .slide-right {
    width: 23.2857142857rem;
    height: 12.0714285714rem;
    left: 7.7142857143rem;
    bottom: -5rem;
  }
  #saboro > .slide-left {
    bottom: 12.714286rem;
    left: -5rem;
    height: 23.5714285714rem;
    width: 31rem;
  }
  #saboro > .slide-left > .line-btn {
    osition: absolute;
    bottom: -3rem;
    right: 0.5rem;
    width: 7rem;
  }

  #saboro .inner .link {
    width: 38.588235%;
  }
}

/* サボロー動画 */
#cm .inner .container h3 {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}
#cm .inner .slide-right {
  position: absolute;
  width: 22.2857142857rem;
  height: 22.4761904762rem;
  bottom: -6rem;
  left: 44.380952rem;
  animation: fuwa02 6s infinite ease-in-out alternate;
}
#tw .inner .slide-left {
  position: absolute;
  width: 26.2380952381rem;
  height: 24.5238095238rem;
  bottom: 77rem;
  left: -13rem;
  transform: translate(0);
  top: auto;
  animation: fuwa01 5s infinite ease-in-out alternate;
}
#tw .inner .slide-right {
  /* bottom: 6rem;
  left: auto;
  right: 7rem; */
  bottom: -7rem;
  left: auto;
  /* right: 10rem; */
  right: -14rem;
  animation: fuwa01 5s infinite ease-in-out alternate;
}
#cm .inner .container .swiper .swiper-wrapper {
  padding-bottom: .5rem;
}
#cm .inner .container .swiper .swiper-button-prev,
#cm .inner .container .swiper .swiper-button-next {
  /*bottom: -1.2rem;*/
  bottom: -1rem;
  top: auto;
  background-image: url("../img/slide-arrow.svg");
  background-size: cover;
  height: 2.5rem;
  width: 2.5rem;
  z-index: 40;
}
.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
  bottom: 1rem;
}
#cm .inner .container .swiper .swiper-button-prev {
  /*left: 23rem;*/
  left: 6rem;
  transform: scale(-1, 1);
  bottom: 0.1rem;
}
#cm .inner .container .swiper .swiper-button-next {
  /*right: 23rem;*/
  right: 6rem;
}
#cm .inner .container .swiper .swiper-button-disabled {
  display: none;
}
#cm .inner .link {
  position: absolute;
  width: 37.917603%;
  left: 8.254682%;
  bottom: 3.5rem;
}
#cm .inner .container .movie::before {
  left: 0.19vw;
}
#cm .inner .container .movie::after {
  right: 00.065vw;
}
@media only screen and (max-width: 767px) {
  #cm .inner .slide-right {
    width: 17.1428571429rem;
    height: 17.2857142857rem;
    /* left: 12.5rem;
    bottom: -9rem; */
    left: -1.5rem;
    bottom: -22rem;
  }
  #tw .inner .slide-left {
    width: 20.2142857143rem;
    height: 18.9285714286rem;
    left: 12.5rem;
    bottom: 130rem;
  }
  #tw .inner .slide-left:first-of-type {
    width: 20.2142857143rem;
    height: 18.9285714286rem;
    left: -7rem;
    bottom: 110rem;
  }
  #tw .inner .slide-right {
    right: -7rem;
    bottom: -7rem;
  }
  #cm .inner .container .swiper .swiper-button-prev {
    /*left: 11rem;*/
    left: 5rem;
  }
  #cm .inner .container .swiper .swiper-button-next {
    /*right: 11rem;*/
    right: 5rem;
  }
  #cm .inner .link {
    position: static;
    width: 80.529412%;
    margin: 0 auto;
  }
  #cm .inner .slide-right:first-of-type {
    left: 12.5rem;
    bottom: -10rem;
  }
}
footer .inner .link {
  opacity: 1;
  animation: unset !important;
  transform: translate(-50%, 0) !important;
}

/*壁紙ダウンロード*/
#wp .inner {
  padding-top: 16.9523809524rem;
  padding-bottom: 10.380952rem;
}
@media only screen and (max-width: 767px) {
#wp .inner {
  padding-bottom: 6.380952rem;
}
}
#wp .inner .wp_wrap p {
  font-size: 1.6rem;
  color: #0081cc;
  text-align: center;
  margin-top: 7rem;
  padding-bottom: 3rem;
}
@media only screen and (max-width: 767px) {
  #wp .inner .wp_wrap p {
    font-size: 1.4rem;
    margin-top: 4rem;
    padding-bottom: 2.5rem;
  }
}
#wp .inner .wp_wrap p.dl-size {
  /* margin-top: 2rem; */
  width: 79.9625468165%;
  color: #0081cc;
  text-align: center;
  margin: auto;
  font-size: 1rem;
  padding-bottom: 0.2em;
}
@media only screen and (max-width: 767px) {
  #wp .inner .wp_wrap p.dl-size {
    padding-bottom: 4rem;
  }
}
#wp .inner .wp_wrap ul {
  display: flex;
  justify-content: center;
}

@media only screen and (max-width: 767px) {
  #wp .inner .wp_wrap ul {
    display: flex;
    flex-wrap: wrap;
  }
}
#wp .inner .wp_wrap ul li{
  display: flex;
  justify-content: center;
  display: inline-block;
  width: 47%;
  margin: 0 auto;
}
#wp .inner .wp_wrap ul li:nth-child(2n){
  margin-right: 0;
}
@media only screen and (max-width: 767px) {
  #wp .inner .wp_wrap ul li {
    width: 100%;
  }
}
#wp .inner .wp_wrap figure.dl-thm {
  border: 1px solid #0080cb;
}
#wp .inner .wp_wrap span {
  display: block;
  background: #fff000;
  text-align: center;
  font-size: 1.32rem;
  width: 40%;
  height: 3.68rem;
  line-height: 3.68rem;
  border-radius: 0.64rem;
  margin: 2rem auto;
  margin-bottom: 1.2rem;
  box-shadow: 0 0.3rem 0 #000;
  transition: all ease-in-out .4s;
}
#wp .inner .wp_wrap span:hover {
  box-shadow: none;
  transform: translateY(0.3rem);
}
#wp .inner .wp_wrap span a {
  display: block;
  color: #000;
}
#wp .inner .wp_content {
  text-align: center;
  width: 57%;
  margin: 0 auto;
}
@media only screen and (max-width: 767px) {
  #wp .inner .wp_content {
    width: 100%;
  }
}
#wp .inner .wp_content .sp-dl {
  display: flex;
  flex-wrap: nowrap;
}
@media only screen and (max-width: 767px) {
  #wp .inner .wp_content .sp-dl li  {
    display: inline-block;
    width: 46.5%;
    margin: 0 auto;
  }
}
#wp .inner .wp_content .sp-dl span {
  width: 80%;
}
@media only screen and (min-width: 767px) {
  #wp .inner .sp-only {
    display: none;
  }
}
@media only screen and (max-width: 767px) {
  #wp .inner .pc-only {
    display: none;
  }
}
#wp .inner .wp-img {
  width: 57%;
  margin: 0 auto;
  margin-top: 4rem;
  margin-left: 23rem;
}
@media only screen and (max-width: 767px) {
  #wp .inner .wp-img {
    width: 100%;
    margin-left: 0;
  }
}
/* SNSシェア */
#share .inner {
  text-align: center;
}
#share .inner ul {
  display: flex;
  justify-content: center;
  margin: 0 1.5rem;
}
#share .inner .sns-icon {
  width: 4rem;
  margin: 0 1rem;
}
#share .share-img {
  width: 32%;
  margin: 0 auto;
  margin-top: 2rem;
  margin-left: 21rem;
}
@media only screen and (max-width: 767px) {
  #share .share-img {
    width: 15rem;
    margin-top: 3rem;
    margin-left: 7rem;
  }
}
@media only screen and (min-width: 767px) {
  footer {
    margin-top: 10rem;
  }
}