/* color */
/* ============================================ */
/* font */
/* ============================================ */

/* style */
/* ============================================ */

.wedding-wrap {
  img {
    max-width: 100%;
    height: auto;
    display: block;
  }
  .span_br {
    display: inline-block;
  }
  .common-btn {
    text-align: center;
    margin-top: 48px;
    @media (width < 736px) {
      margin-top: 32px;
    }
    .color-btn.blk-btn {
      background: transparent;
      &[target="_blank"] {
        .arr {
          padding-right: 32px;
          background-image: url("../../shared/img/ico/ico_externallink.png");
          @media (width < 736px) {
            padding-right: 20px;
          }
        }
      }
    }
  }
}

.wedding-catch {
  text-align: center;
  margin: 32px 0;
  font-size: 150%;
  font-weight: normal;
  font-family: 'MyKokoro';
  @media (width < 736px) {
    margin: 6% 0;
  }
}
.wedding-lead {
  text-align: center;
  margin-top: 1em;
  @media (width < 736px) {
    text-align: left;
  }
}

.wedding-detail {
  text-align: center;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  margin: 32px 0 48px;
  @media (width < 736px) {
    gap: 12px;
    margin: 24px 0 32px;
  }
}
.wedding-detail__item {
  width: 288px;
  @media (width < 736px) {
    width: calc((100% - 12px) / 2);
  }
}
.wedding-detail__contents {
  display: grid;
  place-content: center;
  padding: 24px;
  background: #DED7CE;
  width: 100%;
  height: 100%;
  @media (width < 736px) {
    padding: 16px;
  }
}

.wedding-thumbnail {
  margin-top: 10px;
  @media (width < 736px) {
    margin-top: 5px;
  }
  .splide__slide {
    border: none!important;
    &::before {
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      background: #000;
      opacity: 0;
      position: absolute;
      top: 0;
      left: 0;
      transition: opacity 0.1s ease-out;
    }
    &:not(.is-active) {
      &::before {
        opacity: 0.6;
      }
    }
  }
}

.photo-container {
  margin: 168px 0;
  @media (width < 736px) {
    margin: 80px 0;
  }
}
.photo-thumbnail {
  margin-top: 10px;
  @media (width < 736px) {
    margin-top: 5px;
  }
  .splide__slide {
    border: none!important;
    &::before {
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      background: #000;
      opacity: 0;
      position: absolute;
      top: 0;
      left: 0;
      transition: opacity 0.1s ease-out;
    }
    &:not(.is-active) {
      &::before {
        opacity: 0.6;
      }
    }
  }
}

.banquet-container {
  padding: 168px 0;
  background: #F6F2EC;
  @media (width < 736px) {
    padding: 80px 0;
  }
}
.banquet-thumbnail {
  margin-top: 10px;
  @media (width < 736px) {
    margin-top: 5px;
  }
  .splide__slide {
    border: none!important;
    &::before {
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      background: #000;
      opacity: 0;
      position: absolute;
      top: 0;
      left: 0;
      transition: opacity 0.1s ease-out;
    }
    &:not(.is-active) {
      &::before {
        opacity: 0.6;
      }
    }
  }
}