* {
    box-sizing: border-box; /* パディングやボーダーを含めた幅を計算 */
}

body {
    padding-left: 0; /* サイドバー分のパディングを調整 */
    font-family: "Noto Serif JP", serif;
}

#main {
    margin-left: 150px; /* サイドバーの幅分だけ右にずらす */
    width: calc(100% - 150px); /* サイドバーを除いた幅を計算 */
    overflow-x: hidden; /* 横方向のはみ出しを防ぐ */
}

.section {
    padding: 60px 40px; /* セクション全体の余白を調整 */
    margin-bottom: 20px; /* セクション間の余白を調整 */
    opacity: 0; /* 初期状態で透明 */
    transform: translateX(-50px); /* 左からずらす */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out; /* アニメーションの設定 */
}

.section h2 {
    font-size: 4rem; /* 見出しのサイズを調整 */
    margin:40px;
    font-weight: bold; /* 太字に設定 */
}

.section img {
    border-radius: 10px; /* 角を丸くする */
}

.section.fade-in-left {
    opacity: 1; /* 表示 */
    transform: translateX(0); /* 元の位置に移動 */
}

.section.fade-in-right {
    opacity: 1; /* 表示 */
    transform: translateX(0); /* 元の位置に移動 */
}

.sidebar {
    top: 0; /* 画面の一番上に固定 */
    left: 0;
    height: 100vh; /* 画面の高さ全体に広げる */
    width: 150px; /* ロゴの最大幅に合わせてサイドバーの横幅を調整 */
    padding-top: 3.5rem; /* ヘッダーなどがある場合は調整 */
    overflow-y: auto; /* コンテンツが多い場合にスクロール可能にする */
    background-color: #A30000;
    transition: transform 0.3s ease; /* アニメーションを追加 */
}

.sidebar.hidden {
    transform: translateX(-100%); /* サイドバーを隠す */
}

.sidebar .text-center img {
    display: block; /* インライン要素のimgをブロック要素にする */
    margin-left: auto;
    margin-right: auto; /* 中央揃えにする */
}
.sidebar .nav-link{
    color:white;
}

.sidebar .nav-item {
    border-top: 2px solid #ddd; /* 上部のボーダー */
}

.sidebar .nav-item:first-child {
    border-top: none; /* 最初の項目の上部ボーダーを削除 */
}

.sidebar .nav-item:last-child {
    border-bottom: 2px solid #ddd; /* 最後の項目の下部ボーダーを削除 */
}

.ms-sm-auto {
    margin-left: 150px; /* メインコンテンツをサイドバーの幅だけ右にずらす */
}

.nav-padding {
    padding: 10px; /* サイドバー内の余白を調整 */
}

/* TOP画像 */
#top-image {
    width: 100%;
    height: auto;
    max-height: 1080px; /* 最大高さを設定 */
    object-fit: cover; /* 画像のアスペクト比を維持しつつ、要素のサイズに合わせる */
    background-image: url('../img/top_image.jpg'); /* 画像のURLを指定 */
    display: flex; /* 左右に配置 */
    height: 100vh; /* 画面全体の高さに設定 */
}

.catch-copy-container {
    flex: 1; /* 左側のキャッチコピーを占める領域 */
    display: flex;
    justify-content: center; /* 水平方向に中央揃え */
    align-items: center; /* 垂直方向に中央揃え */
}

/* キャッチコピーのフェードインアニメーション */
@keyframes fadeInFromTop {
    from {
        opacity: 0; /* 完全に透明 */
        transform: translateY(-50px); /* 上から移動 */
    }
    to {
        opacity: 1; /* 完全に表示 */
        transform: translateY(0); /* 元の位置に移動 */
    }
}

.text-vertical {
    writing-mode: vertical-rl; /* テキストを縦書きに設定 */
    text-orientation: upright; /* 縦書きの文字を正しい向きに */
    font-size: 2.5rem; /* フォントサイズを大きく調整 */
    font-weight: 900; /* より太い文字に設定 */
    color: white; /* 文字色を白に設定 */
    text-align: center; /* テキストを中央揃え */
    line-height: 2; /* 行間を調整 */
    opacity: 0; /* 初期状態で透明 */
    animation: fadeInFromTop 3.5s ease-out forwards; /* アニメーションを適用 */
}

.top-image-container {
    flex: 1; /* 右側のトップイメージを占める領域 */
    display: flex;
    justify-content: center; /* 水平方向に中央揃え */
    align-items: center; /* 垂直方向に中央揃え */
}

#top-video {
    width: auto; /* 横幅を画面いっぱいに設定 */
    height: 100vh; /* 縦幅を画面の高さいっぱいに設定 */
    object-fit: cover; /* 画像や動画のアスペクト比を維持しつつ、要素全体を埋める */
    margin-left: auto; /* 要素を右寄せ */
    margin-right: 0; /* 右側の余白をなくす */
    display: block; /* 必要に応じてブロック要素にする */
    max-width: 100%; /* 画像の横幅を親要素に合わせる */
    max-height: 100%; /* 画像の高さを親要素に合わせる */
    object-fit: cover; /* 画像のアスペクト比を維持しつつ要素全体を埋める */
}

/* NEWS枠 */
.list-news {
    padding: 10px; /* 内側の余白を調整 */
    border-radius: 5px; /* 角を丸くする */
}

/* 店舗情報 */
#storeCarousel{
    max-width: 940px;
    margin: 0 auto; /* カルーセルを中央寄せ */
    display: block; /* ブロック要素として扱う */
}
.carousel-item img {
    width: 100%; /* 横幅を親要素に合わせる */
    height: auto; /* 高さを自動調整 */
    aspect-ratio: 16 / 9; /* アスペクト比を4:3に設定 */
    object-fit: cover; /* 画像のアスペクト比を維持しつつ要素全体を埋める */
}

.carousel-item {
    position: relative; /* キャプションや背景を画像に重ねるために必要 */
}

.carousel-item h5{
    font-size:40px;
    font-weight:bold;
    margin-bottom:20px;
}

.carousel-item::before {
    content: ""; /* 疑似要素を表示するために必要 */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* 半透明の黒い背景 */
    z-index: 1; /* キャプションの下に配置 */
}

.carousel-caption {
    position: absolute; /* キャプションを画像に重ねる */
    top: 50%; /* 垂直方向の中央に配置 */
    left: 50%; /* 水平方向の中央に配置 */
    transform: translate(-50%, -50%); /* 中央揃え */
    padding: 20px; /* 内側の余白を調整 */
    border: 2px solid #fff; /* 白い枠線を追加 */
    border-radius: 10px; /* 角を丸くする */
    z-index: 2; /* キャプションを最前面に表示 */
    text-align: center; /* テキストを中央揃え */
    color: #fff; /* テキストの色を白に設定 */
    background: none; /* 背景を透明に設定 */
    width: 80%; /* 横幅を画像全体の80%に設定 */
    height: 80%; /* 高さを画像全体の60%に設定 */
}

.carousel-control-prev,
.carousel-control-next {
    margin:10px;
    width: 50px; /* ボタンの幅 */
    height: 50px; /* ボタンの高さ */
    color: #fff; /* アイコンの色を白に設定 */
    background-color: #A30000; /* 赤い背景色 */
    border-radius: 50%; /* 円形にする */
    border: 2px solid #fff; /* 白い縁取りを追加 */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1; /* ボタンの透明度を100%に設定 */
    transition: background-color 0.3s ease, transform 0.3s ease; /* ホバー時のアニメーション */
    position: absolute; /* 上下中央に配置するために絶対位置を設定 */
    top: 50%; /* 上下中央に配置 */
    transform: translateY(-50%); /* 中央揃え */
    z-index: 2; /* ボタンを最前面に表示 */
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
    background-color: #FF0000; /* ホバー時の色を明るい赤に変更 */
    transform: translateY(-50%) scale(1.1); /* ホバー時に少し拡大 */
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 20px; /* アイコンのサイズを調整 */
    height: 20px;
}

/**
＊ 代表挨拶
**/
.img-ceo{
    width: auto; /* 画像の幅を100%に設定 */
    height: 100%; /* 高さは自動調整 */
    min-height:400px;
    max-height: 500px;
    object-fit: cover; /* 画像のアスペクト比を維持しつつ、要素全体を埋める */
}

/* モバイル用のスタイル */
@media (max-width: 767.98px) {
    .sidebar {
        display: none; /* モバイルではサイドバーを非表示 */
    }
    #mobileNavbar{
        background-color: #A30000;
    }
    .red-nav{
        background-color: #A30000;
    }
    .ms-sm-auto {
        margin-left: 0;
    }
}

footer {
    background-color: #343a40; /* 背景色をダークグレーに設定 */
    color: #f8f9fa; /* テキストの色を薄いグレーに設定 */
    padding: 40px 0; /* 上下の余白を広めに設定 */
    border-top: 3px solid #A30000; /* 上部にアクセントカラーのボーダーを追加 */
    margin-left: 150px; /* サイドバー分右にずらす */
    width: calc(100% - 150px); /* サイドバーを除いた幅を計算 */
}

footer h5 {
    font-size: 1.5rem; /* 見出しのサイズを調整 */
    font-weight: bold; /* 見出しを太字に設定 */
    color: #f8f9fa; /* 見出しの色を白に設定 */
}

footer ul {
    padding: 0;
    list-style: none; /* リストのマーカーを削除 */
}

footer ul li {
    margin-bottom: 10px; /* 各項目の間隔を調整 */
    font-size: 1rem; /* テキストサイズを調整 */
}

footer img {
    max-height: 150px; /* ロゴ画像の高さを制限 */
    object-fit: contain; /* ロゴ画像のアスペクト比を維持 */
}

footer p {
    font-size: 0.9rem; /* コピーライトのフォントサイズを小さめに設定 */
    margin: 0;
    color: #ccc; /* コピーライトの色を薄いグレーに設定 */
}