/*==============================
ウェディングスタイルギャラリー
==============================*/

.gallery-style{
    max-width:960px;
    margin:0 auto;
    padding:60px 0;
}

.gallery-style__heading{
    text-align:center;
    margin-bottom:80px;
}

.gallery-style__en{
    margin:0;
    color:var(--color-main);
    font-family:var(--font-en);
    font-size:40px;
    line-height:1.2;
    letter-spacing:.06em;
}

.gallery-style__title{
    margin-top:8px;
    font-size:16px;
    font-weight:400;
    letter-spacing:.12em;
}

.gallery-style__lead{
    margin-top:64px;
    line-height:2;
    letter-spacing:.08em;
}

.gallery-style__gallery{
    display:grid;
    grid-template-columns:repeat(3,309px);
    gap:16px;
}

.gallery-style__item{
    margin:0;
    overflow:hidden;
}

.gallery-style__item img{
    display:block;
    width:100%;
    aspect-ratio:1 / 1;
    object-fit:cover;
}

.gallery-style__item--wide{
    grid-column:1 / -1;
}

.gallery-style__item--wide img{
    aspect-ratio:auto;
    height:auto;
}
/*SP表示*/
@media (max-width: 767px) {
    .gallery-style__lead  {
        text-align: left;
        margin: 32px 0 0 0;
    }
    .gallery-style {
        padding:40px 20px 24px;
    }
    .gallery-style__heading {
    margin: 0 0 24px 0;
}
    .gallery-style__gallery {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap:8px;
    }
  
   /* PCで設定した配置をすべて一度解除 */
  .gallery-style__gallery > .gallery-style__item {
    grid-column: auto;
    grid-row: auto;
  }

  /* PC時に横長だった画像もSPでは通常の1マスに戻す */
  .gallery-style__gallery > .gallery-style__item--wide {
    grid-column: auto;
  }

  /* 画像を正方形に統一 */
  .gallery-style__item img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
  }

  /* 枚数が奇数なら、最後の1枚だけ横幅いっぱい */
  .gallery-style__gallery
    > .gallery-style__item:last-child:nth-child(odd) {
    grid-column: 1 / -1;
   
  }
  .gallery-style__gallery
    > .gallery-style__item:last-child:nth-child(odd) img {
        object-position: center 40%;
        height:196px;
    }
 
  

}
