@charset "Utf-8";
/* 回遊エリア */
.autoplay {
  margin-bottom: 60px;
}
.autoplay h3 {
  font-size: 3rem;
  color: #ffc43c;
  margin-bottom: 40px;
  padding: 0 40px;
}
.autoplay span {
  display: block;
  font-size: 1.3rem;
  color: #d9d9d9;
}
.sloder {
  width: 94%;
  margin: 0 auto;
}
.autoplay a {
  color: #666;
  font-size: 1.6rem;
}
.work-image {
  width: 100%;
  max-width: 300px;
  height: 100%;
  object-fit: cover;
  margin-bottom: 15px;
}
.work-image img {
  border-radius: 15px;
  max-width: 100%;
  width: 60vw;
  height: auto;
}
.slider .slick-slide {
  transform: scale(0.8); /*左右の画像のサイズを80%に*/
  transition: all 0.5s; /*拡大や透過のアニメーションを0.5秒で行う*/
  opacity: 0.5; /*透過50%*/
}
.slider .slick-slide.slick-center {
  transform: scale(1); /*中央の画像のサイズだけ等倍に*/
  opacity: 1; /*透過なし*/
} /*ドットナビゲーションの設定*/

.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; /*ドットボタンの現在地表示の色*/
}
@media (max-width: 830px) {
  .autoplay h3 {
    font-size: 2.4rem;
    margin-bottom: 20px;
    padding: 0 20px;
  }
}

/* フッター */
.footer-wrap {
  background-color: #fff;
  padding: 40px 100px;
  display: flex;
  justify-content: space-between;
}
.footer-wrap ul {
  display: flex;
  align-items: flex-end;
  gap: 40px;
  font-size: 2rem;
  margin-bottom: 40px;
}
.footer-wrap ul li {
  width: 90px;
  padding: 0px 10px;
  text-align: center;
}
.footer-wrap ul li a {
  color: #404040;
}
.footer-wrap ul li a:hover {
  color: #e37c88;
}
.footer-sns__image {
  width: 50px;
  padding: 10px 25px 5px 15px;
}
.footer-sns__image:hover {
  background-color: #e37c88;
  border-radius: 20px;
}
.footer-sns__image img {
  width: 20px;
}
.footer-image {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.footer-image img {
  width: 100%;
  height: 100px;
}
.footer-image small {
  font-size: 1.2rem;
  color: #666666;
}
@media (max-width: 830px) {
  .footer-wrap {
    align-items: flex-end;
    padding: 40px 20px;
  }
  .footer-wrap ul {
    display: block;
    font-size: 2rem;
    margin-bottom: 60px;
  }
  .footer-wrap ul li {
    margin-bottom: 20px;
    text-align: left;
  }
  .footer-image img {
    width: 60px;
    height: 100%;
  }
}