@charset "UTF-8";
.comMenuArea {
  padding-bottom: 100px;
}

.commonTitleArea1 {
  padding-bottom: 80px;
}

@media screen and (max-width: 767px) {
  .commonTitleArea1 {
    padding-bottom: 40px;
  }
}
.comSection {
  padding: 100px 0 0;
  position: relative;
  overflow: hidden;
}
.comSection .secVenue {
  padding: 120px 0 100px;
}
.comSection:first-of-type {
  padding: 0;
}

/* ---------------------------------------------------------
   comSection / CHURCH
--------------------------------------------------------- */
.comSection {
  /* ----------------------------------------------------------------
     PC Styles (min-width: 768px)
     ここがリッチアニメーションの核心部分です
  ---------------------------------------------------------------- */
  /* ----------------------------------------------------------------
     SP Styles (max-width: 767px)
  ---------------------------------------------------------------- */
}
.comSection .mainImgArea {
  position: relative;
  z-index: 1;
}
.comSection .mainImgArea .scroll-container .scroll-content {
  gap: clamp(1.25rem, -0.964rem + 4.62vw, 2.5rem);
}
@media screen and (min-width: 768px) {
  .comSection {
    /* SP用の複製コンテンツは隠す */
    /* .imgArea をマスク枠として定義 */
  }
  .comSection .visible-xs {
    display: none !important;
  }
  .comSection .mainImgArea {
    /* --- JSで .is-inview クラスが付与された時の状態 --- */
  }
  .comSection .mainImgArea .scroll-container {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .comSection .mainImgArea .scroll-container .scroll-content {
    display: flex;
    justify-content: left;
    width: 100%;
    margin: 0;
    /* 提供コードのpadding維持 → ただし、直後に0で上書きされていたため整理 */
    padding-right: 0;
  }
  .comSection .mainImgArea.is-inview .imgArea {
    clip-path: inset(0 0 0 0);
    opacity: 1;
    /* --- Stagger (時間差表示) --- */
  }
  .comSection .mainImgArea.is-inview .imgArea img {
    transform: scale(1);
    filter: blur(0);
  }
  .comSection .mainImgArea.is-inview .imgArea:nth-child(1) {
    transition-delay: 0s;
  }
  .comSection .mainImgArea.is-inview .imgArea:nth-child(1) img {
    transition-delay: 0s;
  }
  .comSection .mainImgArea.is-inview .imgArea:nth-child(2) {
    transition-delay: 0.2s;
  }
  .comSection .mainImgArea.is-inview .imgArea:nth-child(2) img {
    transition-delay: 0.2s;
  }
  .comSection .mainImgArea.is-inview .imgArea:nth-child(3) {
    transition-delay: 0.4s;
  }
  .comSection .mainImgArea.is-inview .imgArea:nth-child(3) img {
    transition-delay: 0.4s;
  }
  .comSection .imgArea {
    position: relative;
    overflow: hidden;
    flex: 1;
    max-width: 400px;
    aspect-ratio: 400/470;
    /* 初期状態: 下から上へ隠す */
    clip-path: inset(100% 0 0 0);
    opacity: 0;
    will-change: clip-path, opacity;
    transition: clip-path 1.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease;
  }
  .comSection .imgArea img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    vertical-align: bottom;
    /* 初期状態: 拡大＆ブラー */
    transform: scale(1.15);
    filter: blur(5px);
    will-change: transform, filter;
    transition: transform 1.8s cubic-bezier(0.16, 1, 0.3, 1), filter 1.2s ease;
  }
}
@media screen and (max-width: 767px) {
  .comSection .mainImgArea {
    width: 100%;
    overflow: hidden;
  }
  .comSection .scroll-container {
    display: flex;
    width: -moz-fit-content;
    width: fit-content;
  }
  .comSection .scroll-content {
    display: flex;
    animation: infinite-scroll 20s linear infinite;
  }
  .comSection .imgArea {
    flex-shrink: 0;
    width: 300px;
    height: auto;
    margin-right: 20px;
  }
  .comSection .imgArea img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
    -o-object-fit: cover;
       object-fit: cover;
    /* PC用のアニメーション無効化 */
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    opacity: 1 !important;
  }
  @keyframes infinite-scroll {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-100%);
    }
  }
}

.comSection:first-of-type .secVenue:first-of-type:after {
  content: "";
  background: #fff;
}
.comSection .secVenue {
  display: grid;
  grid-template-columns: 1fr max-content;
  position: relative;
  /* 左側：情報エリア */
  /* 右側：スライダーエリア */
  /* Swiperが無効な時のための微調整 */
  /* ホバー効果 */
}
.comSection .secVenue:after {
  content: "";
  background: #F2F2F2;
  height: 130%;
  width: 100%;
  bottom: 0;
  left: 0;
  position: absolute;
  z-index: -1;
}
.comSection .secVenue .venueIn {
  width: 1300px;
  grid-column: 2/3;
  display: flex;
  flex: 1;
  justify-content: space-between;
  align-items: flex-start;
  gap: 5%;
}
.comSection .secVenue .infoWrap .infoItem {
  padding: 18px 0;
}
.comSection .secVenue .infoWrap .infoItem:first-child {
  padding: 25px 0 18px;
  border-bottom: 1px solid #d1d1d1;
}
.comSection .secVenue .infoWrap .infoItem .infoTtl {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 8px;
  border-left: 1px solid #333;
  padding-left: 12px;
}
.comSection .secVenue .infoWrap .infoItem .infoTxt {
  font-size: 15px;
  padding-left: 12px;
}
.comSection .secVenue .infoWrap .infoDesc {
  padding-top: 20px;
  border-top: 1px solid #d1d1d1;
  line-height: 1.8;
  font-size: 15px;
}
.comSection .secVenue .infoWrap .infoDesc p {
  margin: 0;
}
.comSection .secVenue .infoWrap .galleryLink {
  margin-top: 60px;
  border-bottom: 1px solid #969696;
  background: #fff;
}
.comSection .secVenue .infoWrap .galleryLink .arrow {
  padding: 0 9px;
  border-left: 1px solid #080808;
  display: flex;
  align-items: center;
  width: 32px;
}
.comSection .secVenue .infoWrap .galleryLink .btnGallery {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  text-decoration: none;
  color: #333;
  padding-left: 10px;
}
.comSection .secVenue .infoWrap .galleryLink .btnGallery span {
  font-size: 16px;
  padding: 20px 0;
}
.comSection .secVenue .infoWrap .galleryLink .btnGallery .btnArrow {
  position: relative;
  width: 35px;
  height: 1px;
  background-color: #333;
}
.comSection .secVenue .infoWrap .galleryLink .btnGallery .btnArrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: -4px;
  width: 8px;
  height: 8px;
  border-top: 1px solid #333;
  border-right: 1px solid #333;
  transform: rotate(45deg);
}
.comSection .secVenue .perfWrap {
  min-width: 0;
  /* Swiperの崩れ防止 */
  overflow: hidden;
  /* Swiperナビゲーションボタン */
}
.comSection .secVenue .perfWrap .perfTtl {
  font-size: 14px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 100%;
}
.comSection .secVenue .perfWrap .perfTtl::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  background-color: #B8B8B8;
  border-radius: 50%;
}
.comSection .secVenue .perfWrap .perfSlider .perfItem .perfImg {
  aspect-ratio: 1.4/1;
  overflow: hidden;
  margin-bottom: 15px;
}
.comSection .secVenue .perfWrap .perfSlider .perfItem .perfImg img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.comSection .secVenue .perfWrap .perfSlider .perfItem .perfCaption {
  font-size: 14px;
  border-bottom: 1px solid #969696;
  padding-bottom: 10px;
  line-height: 1.5;
}
.comSection .secVenue .perfWrap .perfNav {
  margin-top: 30px;
  display: flex;
  gap: 15px;
}
.comSection .secVenue .perfWrap .perfNav .navBtn {
  width: 46px;
  height: 46px;
  border: 1px solid #333;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  position: relative;
  transition: background-color 0.3s;
  padding: 0;
}
.comSection .secVenue .perfWrap .perfNav .navBtn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-top: 1px solid #333;
  border-left: 1px solid #333;
}
.comSection .secVenue .perfWrap .perfNav .navBtn.btnPrev::after {
  transform: translate(-30%, -50%) rotate(-45deg);
}
.comSection .secVenue .perfWrap .perfNav .navBtn.btnNext::after {
  transform: translate(-70%, -50%) rotate(135deg);
}
.comSection .secVenue .perfWrap .perfNav .navBtn:hover {
  background-color: #f8f8f8;
}
.comSection .secVenue .swiper-slide {
  height: auto;
}
.comSection .secVenue .ro:hover {
  opacity: 0.7;
}

@media screen and (min-width: 1401px) {
  .comSection .secVenue .venueIn .infoWrap {
    width: 35%;
  }
  .comSection .secVenue .venueIn .perfWrap {
    width: 65%;
  }
}
@media screen and (max-width: 1400px) {
  .comSection .secVenue {
    grid-template-columns: 1fr;
  }
  .comSection .secVenue .venueIn {
    display: grid;
    padding-left: 5%;
    width: 100%;
    grid-column: initial;
    grid-template-columns: 1fr 1.5fr;
  }
}
@media screen and (min-width: 768px) {
  .comSection .secVenue .venueIn .infoWrap {
    max-width: 360px;
  }
}
@media screen and (max-width: 767px) {
  .comSection .secVenue {
    background: #F2F2F2;
    padding: 50px 0 100px;
  }
  .comSection .secVenue .venueIn {
    gap: 30px;
    grid-template-columns: 1fr;
    padding-left: initial;
  }
  .comSection .secVenue .venueIn .infoWrap {
    padding: 0 clamp(30px, 30px + 15 * (100vw - 375px) / 15, 45px);
  }
  .comSection .secVenue .venueIn .infoWrap .infoItem {
    padding: 15px 0;
  }
  .comSection .secVenue .venueIn .infoWrap .infoItem:first-child {
    padding: 0px 0 15px;
  }
  .comSection .secVenue .venueIn .infoWrap .galleryLink {
    margin-top: 15px;
  }
  .comSection .secVenue .venueIn .perfWrap .perfTtl {
    padding: 0 clamp(30px, 30px + 15 * (100vw - 375px) / 15, 45px);
    margin-bottom: 25px;
  }
  .comSection .secVenue .venueIn .perfWrap .perfNav {
    justify-content: center;
  }
}
.secBanner {
  padding-bottom: 130px;
}/*# sourceMappingURL=style.css.map */