@charset "UTF-8";

/* ----------------------------------------------------------------------------
 空撮実績 - top、drone
---------------------------------------------------------------------------- */
.c-work__outer {
  margin-top: 60px;
}
.c-work__inner {
  width: 100%;
  background-color: #fff;
  border-radius: 20px;
  overflow: hidden;
  /* margin: 0 18px 5px; */
  margin: 0 clamp(12px, 1.25vw, 18px) 5px;
  box-shadow: 2px 3px 5px rgba(0, 78, 162, .2);
  transition: all .3s;
}
.c-work__img {
  overflow: hidden;
  position: relative;
  max-height: 285px;
}
.c-work__img img {
  width: 100%;
  object-fit: cover;
  height: auto;
}
.c-work__location {
  font-size: 1.2rem;
  font-weight: 700;
  background-color: #d00000;
  color: #fff;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  padding: 4px 10px;
  position: absolute;
  left: 0;
  bottom: 0;
}
.c-work__info {
  /* padding: 25px 35px 40px; */
  padding: 25px clamp(20px, 2.43vw, 35px) 40px;
}
.c-work__tag {
  font-size: 1.2rem;
  font-weight: 700;
  display: flex;
  gap: 5px;
}
.c-work__tag p {
  border: 1px solid #333;
  padding: 4px 10px;
}
.c-work__date {
  font-size: 1.2rem;
  font-weight: 700;
  color: #999;
  letter-spacing: .2em;
  margin-top: 10px;
}
.c-work__title {
  font-size: 2rem;
  font-weight: 500;
  margin-top: 6px;
}
.c-work__btn {
  margin-top: 90px;
}

/* マウスホバー時に画像拡大 */
.c-work__inner:hover .c-work__img img {
  transform: scale(1.1, 1.1);
  transition: all .3s;
}

@media (max-width: 767px) {
  .c-work__outer {
    margin-top: 40px;
  }
  .c-work__inner {
    margin:0 10px 5px;
  }
  .c-work__info {
    padding: 25px 35px 40px;
  }
  .c-work__btn {
    margin-top: 70px;
  }
}

/* Slick Slider
-------------------------------------------------- */

/* 高さを均一化 */
.work-slider .slick-track {
  display: flex;
}
.work-slider .slick-slide {
  height: auto !important;
}

/* ドットスタイル */
.work-slider .slick-dots {
  bottom: -30px;
}
.work-slider .slick-dots li {
  margin: 0;
}
.work-slider .slick-dots li button {
  padding: 0;
}
.work-slider .slick-dots li button:before {
  font-size: 1rem;
  color: #004ea2;
}
.work-slider .slick-dots li.slick-active button:before {
  color: #004ea2;
}

/* 矢印スタイル */
.work-slider .slick-arrow {
  display: block;
  width: 46px;
  height: 46px;
  background-color: rgba(11, 53, 77, .4);
  border-radius: 50vh;
  border: 2px solid #fff;
  z-index: 99;
  transition: opacity .3s;
}
.work-slider .slick-prev {
  top: 47%;
  left: -15px;
}
.work-slider .slick-next {
  top: 47%;
  right: -15px;
}
.work-slider .slick-prev::before, .work-slider .slick-next::before {
  display: block;
  content: "";
  width: 15px;
  height: 15px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  position: absolute;
}
.work-slider .slick-prev::before { 
  transform:rotate(-135deg);
  top: 30%;
  left: 40%
}
.work-slider .slick-next::before {
  transform:rotate(45deg);
  top: 30%;
  right: 40%;
}

@media (max-width: 767px) {
  .work-slider .slick-prev {
    left: -15px;
  }
  .work-slider .slick-next {
    right: -15px;
  }
}

/* ----------------------------------------------------------------------------
 空撮実績 - 一覧
---------------------------------------------------------------------------- */

/* メインビジュアル
-------------------------------------------------- */
#work .c-mv--small {
  width: 100%;
  background-image: url("https://skylink.atsuko-tutto-bene.jp/wp-content/themes/skylink.atsuko-tutto-bene/assets/images/MV-small__work.jpg");
  background-size: cover;
  background-position: right 0 bottom 35%;
  color: #fff;
}
#work .c-mv--small::after {
  content: "";
  background-color: rgba(11,53,77,.38);
  position: absolute;
  inset: 0; /* 親要素内にフルサイズで配置 */
}
#work .c-page-heading {
  z-index: 99;
}

/* flexbox
-------------------------------------------------- */
#work .c-work__outer {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* gap: 30px 36px; */
  gap: 30px clamp(26px, 2.5vw, 36px);
  margin-top: 0;
}
#work .c-work__inner {
  margin: 0;
}
@media (max-width: 767px) {
  #work .c-work__outer {
    display: flex;
    flex-direction: column;
    margin-top: 0;
  }
}