@charset "utf-8";

/* 1. 先頭メディア全幅表示 */
.gc-fullwidth-media {
    width: 100%;
    position: relative;
    overflow: hidden;
}
.gc-fullwidth-media img,
.gc-fullwidth-media video {
    width: 100%;
    height: auto;
    display: block;
}
.gc-fullwidth-media .wp-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}
.gc-fullwidth-media .wp-caption .wp-caption-text {
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    padding: 10px;
    font-size: 1em;
    text-align: center;
}

/* 2. Masonry コンテナ */
.gc-masonry-grid {
    width: 100%;
    margin: 20px auto;
    position: relative;
}

/* 3. Masonry の基準要素（デスクトップ用：固定300px幅） */
.gc-grid-sizer {
    width: 300px;
}

/* 4. 各 Masonry アイテム（デスクトップの場合 3列表示） */
.gc-masonry-item {
    width: 300px; /* デスクトップ用 固定サイズ */
    margin-bottom: 10px;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    border-radius: 3px;
    transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out;
}

/* ↓ 元の固定サイズ設定（高さ200px、object-fit: cover） */
/*
.gc-masonry-item img,
.gc-masonry-item video {
    width: 300px !important;
    height: 200px !important;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out;
}
*/

/* 【追加】 変更：画像・動画は横幅300px固定、縦は自動調整して元のアスペクト比を保持 */
.gc-masonry-item img,
.gc-masonry-item video {
    width: 300px !important;
    height: auto !important;  /* 高さは自動調整 */
    display: block;
    transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out;
    /* object-fit は削除 */
}

.gc-masonry-item:hover img,
.gc-masonry-item:hover video {
    transform: scale(1.02);
    filter: brightness(0.95);
}
.gc-masonry-item:hover {
    transform: scale(1.01);
    filter: brightness(0.98);
}
.gc-masonry-item .wp-caption {
    position: relative;
    overflow: hidden;
}

/* ↓ 元の設定（固定高さ200px、object-fit: cover） */
/*
.gc-masonry-item .wp-caption img,
.gc-masonry-item .wp-caption video {
    display: block;
    width: 300px !important;
    height: 200px !important;
    object-fit: cover;
}
*/

/* 【追加】 変更：キャプション内の画像・動画も高さを自動調整 */
.gc-masonry-item .wp-caption img,
.gc-masonry-item .wp-caption video {
    display: block;
    width: 300px !important;
    height: auto !important;
    transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out;
}

.gc-masonry-item .wp-caption .wp-caption-text {
    position: absolute;
    bottom: 15px;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    padding: 5px;
    box-sizing: border-box;
    text-align: center;
    font-size: 0.9em;
    z-index: 1;
}

/* 5. タブレット (min-width:768px～max-width:959px)：2列表示 */
@media (min-width: 768px) and (max-width: 959px) {
    .gc-grid-sizer,
    .gc-masonry-item {
        width: 50% !important;
    }
    .gc-masonry-item img,
    .gc-masonry-item video {
        width: 100% !important;
        height: auto !important;
    }
}

/* 6. スマホ (max-width:767px)：1列表示 */
@media (max-width: 767px) {
    .gc-grid-sizer,
    .gc-masonry-item {
        width: 100% !important;
    }
    .gc-masonry-item img,
    .gc-masonry-item video {
        width: 100% !important;
        height: auto !important;
    }
}

/* 既存CSSオーバーライド */
img[class*="align"], img[class*="wp-image-"], .galleryclassSingle img.size-thumbnail {
    border: none;
    padding: 0;
    max-width: initial;
}

.gc-masonry-item .wp-caption {
    background-color: transparent;
    margin: 0;
    max-width: initial;
    padding: 0;
}

body.single.galleryclass header {
/*    margin-bottom:20px; */
}

.entry-content:has(> br:only-child) {
  display: none;
}
.entry-content:enpty {
    display: none;
}

/* 個別投稿で高さを修正する */
/* ↓ 元の固定サイズ指定 */
/*
.gc-masonry-grid .gc-masonry-item img {
    width: 300px;
    height: auto;
    display: block;
}
*/

/* 【追加】 この設定は上記の .gc-masonry-item img で既に自動調整されているので不要 */

}

/* === Masonry 用「行送りスペーサー」 ===================== */
.gmg-post-divider{
    /* Masonry が書く width を無効化して 1 段すべてを占有させる */
    width: 100% !important;
    min-width: 100% !important;

    /* 高さ 1px + マージンで “改行” と余白を作る */
    height: 1px;
    margin: 40px 0;

    pointer-events: none;   /* クリック不可 */
}