@charset "UTF-8";
/* ============= */
/* スライドショーの設定 */
/* ============= */
#l-slide-wrap {
    width: 100%; /* 幅を100%に設定 */
    height: 75vh; /* スライドショーの高さを75%に設定 */
    margin-bottom: 2rem; /* 下部に2remのマージンを設定 */
    padding: 0; /* 左右のパディングを0に設定 */
    background-color: aqua; /* 背景色を水色に設定（デバッグ用） */
}

/* スライドショーの画像設定 */
.carousel-item img {
            height: 75vh; /* 画像の高さを75vhに設定（デスクトップサイズ） */
            max-width: 100%; /* 画像の最大幅を100%に設定 */
            object-fit: cover; /* 画像の切り取り方を設定 */
}

/* スライドショーの画像位置設定 */
.slide-img-top img {
    object-position: 50% 16%; /* 画像の表示位置を設定 */
}

/*caption*/
/* 通常時のスタイル */
.slide-caption-link{
    display: block;
    color: #FFF; /* フォントの色を白に設定 */
    text-decoration: none; /* 下線を消す */
    padding: 10px; /* パディングを追加 */
      background-image: linear-gradient(90deg, rgba(54, 54, 54, 0), rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0));
    transition: background-image 0.3s ease; /* 背景グラデーションのトランジションを追加 */
}

/* 通常時のh5とpのスタイル */
.slide-caption-link h5 {
    color: #FFF; /* フォントの色を白に設定 */
    margin: 0; /* マージンをリセット */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* ドロップシャドウを追加 */
}
.slide-caption-link h5{
    font-size: 2.25rem;
}

/* リストのスタイルを設定 */
.slide-caption-details {
    list-style: none; /* デフォルトのリストスタイルを削除 */
    padding: 0; /* パディングを削除 */
    margin: 0; /* マージンを削除 */
}

.slide-caption-details li {
    padding-bottom: 0.7rem; /* 各リストアイテムの下マージン */
    color: #FFF; /* 文字の色を白に設定 */
    font-weight: 100; /* フォントの太さを細く設定 */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* ドロップシャドウを追加 */
}

.slide-caption-details strong {
    color: #FFF; /* 強調表示部分の文字の色を白に設定 */
}
.slide-caption-category{
    padding-bottom: 0.5rem; /* 各リストアイテムの下マージン */
    color: #FFF; /* 文字の色を白に設定 */
    font-weight:400; /* フォントの太さを細く設定 */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* ドロップシャドウを追加 */
}

/* ホバー時のスタイル */
.slide-caption-link:hover {
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(120, 0, 255, 0.62) 20%, rgba(0, 116, 255, 1) 50%, rgba(213, 255, 0, 0.48) 80%, rgba(255, 255, 255, 0)); /* 背景グラデーションを追加 */
    transition: background-image 0.5s ease-in-out; /* フェードインのトランジションを設定 */
}

/* ブランドロゴの設定 */
#brand-logo {
    width: 100%;
    height: 25vh; /* ブランドロゴの高さ */
    position: absolute;
    bottom: 0; /* 下部に配置 */
    left: 0;
    display: flex;
    justify-content: center;
    align-items: stretch;
    background-color: #fff; /* 背景色を必要に応じて設定 */
    padding-left: 0;
    padding-right: 0;
}
/* ブランドロゴの画像設定 */
#brand-logo svg {
    max-height: 100%;
    width: auto; /* 比率を保つ */
    margin-left: 0.2rem;
    margin-right: 0.2rem;

}

    /* スマホサイズ以下の設定 */
    @media (max-width: 991px) {
        #l-slide-wrap {
            height: 75vh; /* スライドショーの高さを75%に設定 */
        }
        .carousel-item img {
            height: 75vh; /* 画像の高さを100vhに設定（スマホサイズ） */
            max-width: 100%; /* 画像の最大幅を100%に設定 */
            object-fit: cover; /* 画像の切り取り方を設定 */
        }
        #l-top {
            height: 100vh; /* スライドショーを全画面高さに設定 */
            margin-top: 0; /* ヘッダーの高さ分のスペースをなくす */
        }
        #l-slide-wrap {
            height: 100%; /* スライドショーを全画面高さに設定 */
        }

        #Brand-logo svg{
            margin-top: 0.5rem;
            width: auto;
            height: 40%;
        }
        .section_BG_X {
            display: none;
        }
    }