@charset 'utf-8';
/* ======================================================
CSS information

 File Name  : works-single.css
 Style Info : 「施工事例 - 詳細」のCSS
====================================================== */

#post-block.grid {
  display: grid;
  gap: 3rem;
}

/* 768px～（タブレット）
------------------------------------*/
@media (min-width: 768px) {

  #post-block.grid {
    gap: 4rem;
  }

}

/* 960px～（パソコン）
------------------------------------*/
@media (min-width: 960px) {

  #post-block.grid {
    grid-template-areas: "img-box title-box"
                         "img-box text-box";
    grid-template-columns: 55% 1fr;
    grid-template-rows: auto 1fr;
    gap: 3rem 6rem;
  }

  #post-block.grid > .title-box {
    grid-area: title-box;
  }

  #post-block.grid > .img-box {
    grid-area: img-box;
  }

  #post-block.grid > .text-box {
    grid-area: text-box;
  }

}

#post-block.grid > .title-box > h2 {
  letter-spacing: .1rem;
  position: relative;
  padding-bottom: 2rem;
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--basecolor3);
}

/* 768px～（タブレット）
------------------------------------------------------ */
@media (min-width: 768px) {

  #post-block.grid > .title-box > h2 {
    font-size: 2.9rem;
  }

}

/* 960px～（パソコン）
------------------------------------------------------ */
@media (min-width: 960px) {

  #post-block.grid > .title-box > h2 {
    padding-bottom: 2.6rem;
    font-size: 3.2rem;
  }

}

#post-block.grid > .title-box > h2::before,
#post-block.grid > .title-box > h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
}

#post-block.grid > .title-box > h2::before {
  z-index: 1;
  width: 60px;
  background: var(--basecolor3);
}

#post-block.grid > .title-box > h2::after {
  width: 100%;
  background: rgb(8 65 92 / .1);
}

#post-block.grid > .text-box > p {
  letter-spacing: .1rem;
  line-height: 2;
  margin-top: 1rem;
  text-align: justify;
}

/* 768px～（タブレット）
------------------------------------*/
@media (min-width: 768px) {

  #post-block.grid > .text-box > p {
    line-height: 2.1;
  }

}

/* 960px～（パソコン）
------------------------------------*/
@media (min-width: 960px) {

  #post-block.grid > .text-box > p {
    line-height: 2.2;
  }

}

#post-block.grid > .text-box > .area-text {
  opacity: .5;
  letter-spacing: 0;
  margin-top: 0;
}

:root {
  --easing: cubic-bezier(.2, 1, .2, 1);
  --transition: .8s var(--easing);
}

[class*=swiper]:focus {
  outline: none;
}

.swiper-slide {
  width: 100% !important;
}

.slide-media,
.thumb-media {
  position: relative;
  overflow: hidden;
}

.slide-media img,
.thumb-media img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.swiper-button-prev,
.swiper-button-next {
  display: grid;
  place-content: center;
  width: 6.4rem;
  height: 6.4rem;
  cursor: pointer;
  transition: var(--transition);
}

.swiper-button-prev::before,
.swiper-button-next::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: "";
  background: rgb(0 164 151 / .4);
  border-radius: 50%;
}

.swiper-button-prev::after,
.swiper-button-next::after {
  width: 1.2rem;
  height: 1.2rem;
  content: "";
  border: solid #ddd;
  border-width: 3px 3px 0 0;
}

.swiper-button-prev::after {
  margin-left: .4rem;
  transform: rotate(-135deg);
}

.swiper-button-next::after {
  margin-right: .4rem;
  transform: rotate(45deg);
}

.swiper-button-disabled {
  pointer-events: none;
  opacity: 0 !important;
}

.gallery01 {
  overflow: hidden;
}

.gallery01 .swiper,
.gallery01 .thumb-wrapper {
  max-width: 720px;
  margin: auto;
}

.gallery01 .swiper {
  overflow: visible;
}

.gallery01 .swiper-fade .swiper-slide {
  transition-property: opacity, transform !important;
  pointer-events: none;
}

.gallery01 .swiper-fade .swiper-slide-active {
  pointer-events: auto;
}

.gallery01 .swiper-controller {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding-top: 62.5%;
}

.gallery01 .swiper-button-prev,
.gallery01 .swiper-button-next {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  margin: auto;
}

.gallery01 .swiper-button-prev {
  left: 0;
}

.gallery01 .swiper-button-next {
  right: 0;
}

.gallery01 .slide {
  display: block;
  overflow: hidden;
}

.gallery01 .slide-media {
  display: block;
  padding-top: 62.5%;
  border-radius: 4px;
}

.gallery01 .slide-media img {
  object-fit: contain;
}

.gallery01 .thumb-wrapper {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  margin-top: 1rem;
}

/* 768px～（タブレット）
------------------------------------*/
@media (min-width: 768px) {

  .gallery01 .thumb-wrapper {
    gap: 1.5rem;
    margin-top: 1.5rem;
  }

}

/* 960px～（パソコン）
------------------------------------*/
@media (min-width: 960px) {

  .gallery01 .thumb-wrapper {
    gap: 2rem;
    margin-top: 2rem;
  }

}

.gallery01 .thumb-media {
  padding-top: 100%;
  cursor: pointer;
  transition: var(--transition);
  border-radius: 4px;
}

.gallery01 .thumb-media img {
  transition: var(--transition);
}

.gallery01 .thumb-media-active {
  opacity: .3;
}