/* ------------------------------
 ヒーローエリアスライド */
#slideshow {
  height: 80vh !important;
  position: relative;
}
#slideshow > .slides-wrap {
  height: 100%;
  display: flex;
}
.slides-control {
  width: 100% !important;
  left: auto !important;
}
.slides-container {
  background: linear-gradient(
    180deg,
    #84cdbf 0%,
    #84cdbf 50%,
    #ffffff 50%,
    #ffffff 100%
  ) !important;
  position: relative !important;
  align-content: center;
}
.slide-item {
  width: 100% !important;
  height: 70% !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  margin: auto !important;
  background-attachment: local !important;
  background-position: center !important;
  background-size: contain !important;
}
.slide-item > img {
  width: 200%;
}
.slides-control > .slides-container > .slide-item {
  position: relative;
  display: flex;
  justify-content: center;
  align-content: center;
}

/* ------------------------------
 navigation */
#slideshow > .slides-navigation {
  width: 100%;
  height: 8%;
  position: absolute;
  top: 49%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 0;
  z-index: 2;
}
#slideshow > .slides-navigation > .prev {
  position: absolute;
  left: 4%;
}
#slideshow > .slides-navigation > .next {
  position: absolute;
  right: 4%;
}
#slideshow > .slides-navigation > a > i {
  color: #565656;
  font-size: 1.2em;
  position: relative;
}
#slideshow > .slides-navigation > a > i::after {
  content: "";
  position: absolute;
  top: -11px;
  right: -14px;
  display: block;
  width: 40px;
  height: 40px;
  background-color: #ffffff;
  border-radius: 50%;
  z-index: -1;
}

/* ------------------------------
 pagenation */
#slideshow > .slides-pagination {
  position: absolute;
  bottom: 4%;
  left: 50%;
  -ms-transform: translate(-50%, -90%);
  -webkit-transform: translate(-50%, -90%);
  transform: translate(-50%, -90%);
  margin: 0;
  padding: 0;
  display: flex;
}
#slideshow > .slides-pagination > a {
  width: 24px;
  height: 24px;
  cursor: default !important;
}
#slideshow > .slides-pagination > a::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  background-color: #ffffff;
  border: 1px solid #84cdbf;
  border-radius: 50%;
  margin: 4px;
}
#slideshow > .slides-pagination > a.current::before {
  background-color: #84cdbf;
}

/* ------------------------------
   背景飾り */
#slideshow > .parts {
  position: relative;
}
#slideshow > .parts > img {
  position: absolute;
  z-index: 1;
}
#slideshow > .parts > img.parts-2 {
  top: 0;
}
#slideshow > .parts > img.parts-2 {
  top: 30vh;
  animation: bounce 10s linear infinite;
}
#slideshow > .parts > img.parts-3 {
  top: 68vh;
}
#slideshow > .parts > img.parts-4 {
  top: 10vh;
  right: 0%;
}
#slideshow > .parts > img.parts-42 {
  top: 68vh;
  transform: rotate(180deg);
}
#slideshow > .parts > img.parts-5 {
  top: 2vh;
  right: 28%;
  animation: flip 15s infinite;
  width: 5%;
}
#slideshow > .parts > img.parts-6 {
  display: none;
}
#slideshow > .parts > img.parts-7 {
  top: -4vh;
  right: 1%;
  animation: tada 15s infinite;
}
#slideshow > .parts > img.parts-72 {
  top: 16vh;
  left: 2%;
  animation: tada2 18s infinite 1s;
}
#slideshow > .parts > img.parts-8 {
  top: 39vh;
  right: 4%;
  animation: rotate 2s infinite;
}
#slideshow > .parts > img.parts-82 {
  top: 62vh;
  left: 9%;
  animation: rotate2 3s infinite;
}
#slideshow > .parts > img.parts-9 {
  top: 12vh;
  left: 6%;
  animation: tada 6s infinite;
}
#slideshow > .parts > img.parts-92 {
  top: 37vh;
  right: 28%;
  animation: tada 6s infinite;
}
#slideshow > .parts > img.parts-10 {
  top: 10vh;
  left: 4%;
}
#slideshow > .parts > img.parts-102 {
  top: 3vh;
  right: 8%;
}
#slideshow > .parts > img.parts-103 {
  right: 29%;
  top: 16vh;
}
#slideshow > .parts > img.parts-1 {
  width: 40%;
  top: -65px;
  transform: rotate(-12deg);
  left: -2%;
}
#slideshow > .parts > img.parts-11 {
  width: 40%;
  top: -70px;
  transform: rotate(-12deg);
  left: -2%;
}
#slideshow > .parts > img.parts-12 {
  left: 19%;
  top: 44vh;
}
#slideshow > .parts > img.parts-122 {
  right: 3%;
  top: 57vh;
}

@keyframes bounce {
  0%,
  20%,
  53%,
  80%,
  100% {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 0, 0);
  }
  40%,
  43% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -30px, 0);
  }
  70% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -15px, 0);
  }
  90% {
    transform: translate3d(0, -4px, 0);
  }
}
@keyframes tada {
  0% {
    transform: scale3d(1, 1, 1);
  }
  10%,
  20% {
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }
  30%,
  50%,
  70%,
  90% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }
  40%,
  60%,
  80% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }
  100% {
    transform: scale3d(1, 1, 1);
  }
}
@keyframes tada2 {
  0% {
    transform: scale3d(1, 1, 1);
  }
  10%,
  20% {
    transform: scale3d(0.6, 0.6, 0.6) rotate3d(0, 0, 1, 3deg);
  }
  30%,
  50%,
  70%,
  90% {
    transform: scale3d(0.8, 0.8, 0.8) rotate3d(0, 0, 1, -3deg);
  }
  40%,
  60%,
  80% {
    transform: scale3d(0.8, 0.8, 0.8) rotate3d(0, 0, 1, 3deg);
  }
  100% {
    transform: scale3d(1, 1, 1);
  }
}
@keyframes rotate {
  100% {
    transform: scale(0.7, 0.7) rotate(360deg);
  }
  0% {
    transform: scale(0.7, 0.7) rotate(0deg);
  }
}
@keyframes rotate2 {
  100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(-180deg);
  }
  0% {
    transform: rotate(0deg);
  }
}
@keyframes flip {
  0% {
    transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    animation-timing-function: ease-out;
  }
  40% {
    transform: perspective(400px) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    animation-timing-function: ease-out;
  }
  50% {
    transform: perspective(400px) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    animation-timing-function: ease-in;
  }
  80% {
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
    animation-timing-function: ease-in;
  }
  100% {
    transform: perspective(400px);
    animation-timing-function: ease-in;
  }
}

/* ------------------------------
   スライド: text-slider-stopped */
.slide-inner.text-slider-stopped > .contain > h2.maintitle {
  font-family: "Baloo Bhaijaan 2", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 100px !important;
  margin-bottom: 16px !important;
}
.slide-inner.text-slider-stopped > .contain > .subtitle.title1,
.slide-inner.text-slider-stopped > .contain > .subtitle.title2 {
  text-align: left;
  padding-left: 8%;
  padding-top: 0 !important;
}
.slide-inner.text-slider-stopped > .contain > .subtitle.title1 {
  padding-bottom: 0 !important;
}
.slide-inner.text-slider-stopped > .contain > .subtitle.title2 {
  padding-bottom: 10% !important;
}
.slide-inner.text-slider-stopped > .contain > .subtitle.title3,
.slide-inner.text-slider-stopped > .contain > .subtitle.title4 {
  padding-top: 0 !important;
  color: black;
  text-shadow: none;
}
.slide-inner.text-slider-stopped > .contain > .subtitle.title3 {
  padding-bottom: 0 !important;
}
.slide-inner.text-slider-stopped > .contain > .subtitle.title4 {
  padding-bottom: 8% !important;
  margin-top: -2%;
}

/* safariではスライドではなくfade-in/outにする */
/* safari（macOS）用 */
body.safari .slide-item {
  overflow: visible !important;
}
body.safari .slides-container {
  overflow: visible !important;
}
/* safari（IOS）用 */
@supports (-webkit-touch-callout: none) {
  .slide-item {
    overflow: visible !important;
  }
  .slides-container {
    overflow: visible !important;
  }
}