<style>

.pagination {
    white-space: nowrap; /* ボタンが途切れないようにする */
    overflow-x: auto; /* 小さい画面で横スクロールを可能にする */
    -webkit-overflow-scrolling: touch; /* スクロールをスムーズに */
}

.pagination .page-item .page-link {
    font-size: 14px; /* ボタンのフォントサイズを調整 */
    padding: 8px 12px; /* ボタンの内側余白を調整 */
    margin: 2px; /* ボタン同士の間隔 */
}

@media (max-width: 576px) {
    .pagination .page-item .page-link {
        font-size: 12px; /* 小さい画面ではフォントサイズをさらに縮小 */
        padding: 6px 8px; /* ボタンの内側余白をさらに調整 */
    }
}



.genre_title{
  color:snow;
}
/* ボタン全体のスタイル */
.btn-like {
    font-size: 1.2rem;
    padding: 10px 20px;
    border: 2px solid #ff6f61;
    background: linear-gradient(45deg, #ff6f61, #ff9472);
    color: white;
    border-radius: 50px;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.btn-like:hover {
    background: linear-gradient(45deg, #ff9472, #ff6f61);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.btn-like:focus {
    outline: none;
    box-shadow: 0 0 0 4px rgba(255, 111, 97, 0.5);
}

/* アイコンのスタイル */
.btn-like i {
    font-size: 1.5rem;
    transition: transform 0.2s ease;
}

.btn-like.clicked i {
    transform: scale(1.3);
    color: gold;
}

/* カウントのスタイル */
#likeCount {
    font-weight: bold;
    margin-left: 5px;
}
/* ボタンのレスポンシブ対応 */
.btn-group-responsive {
    display: flex;
    flex-wrap: wrap;
    gap: 5px; /* ボタン間の隙間を調整 */
    justify-content: flex-end; /* デフォルトは右揃え */
}

@media (max-width: 576px) {
    h1{
      font-size: 18px;
    }
    .navbar-brand > p{
      font-size: 12px;
      margin-bottom: 0px;
    }
    .btn-group-responsive {
        justify-content: center; /* スマホでは中央揃え */
    }

    .btn-group-responsive .btn {
        flex: 1 1 auto; /* ボタン幅を自動調整して均等配置 */
        min-width: calc(33.33% - 10px); /* 3ボタンを一行に並べる */
        max-width: 100%;
    }
}

/* ナビゲーションバーの全体調整 */
 .navbar {
     background-color: #f8f9fa; /* 明るい背景色 */
 }

 .navbar-brand {
     font-size: 20px;
     color: #333; /* ロゴのテキスト色 */
 }

 .navbar-brand:hover {
     color: #007bff; /* ホバー時のロゴ色 */
     text-decoration: none;
 }

 /* ナビゲーションリンクのスタイル */
 .nav-link {
     font-size: 16px;
     margin-right: 15px;
     transition: color 0.3s ease;
 }

 .nav-link:hover {
     color: #007bff; /* ホバー時のリンク色 */
 }

 /* ボタンスタイル */
 .btn-primary {
     border-radius: 20px; /* 丸みを追加 */
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* ボタンの影 */
 }

 .btn-primary:hover {
     background-color: #0056b3; /* ホバー時のボタン色 */
 }

 /* モバイルでの調整 */
 @media (max-width: 576px) {
     .nav-link {
         text-align: center;
         margin: 5px 0;
     }

     .btn-primary {
         width: 100%;
         margin-top: 10px;
     }
 }
    /* ナビゲーションバーの全体調整 */
    .navbar {
        background-color: #ffc0f3;
    }
    .navbar > h1{
      color: #003f0c¡important;
    }

    .navbar-brand {
        font-size: 20px;
        color: #333; /* ロゴのテキスト色 */
    }

    .navbar-brand:hover {
        color: #007bff; /* ホバー時のロゴ色 */
        text-decoration: none;
    }

    /* ナビゲーションリンクのスタイル */
    .nav-link {
        font-size: 16px;
        margin-right: 15px;
        transition: color 0.3s ease;
    }

    .nav-link:hover {
        color: #007bff; /* ホバー時のリンク色 */
    }

    /* ボタンスタイル */
    .btn-primary {
        border-radius: 20px; /* 丸みを追加 */
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* ボタンの影 */
    }

    .btn-primary:hover {
        background-color: #0056b3; /* ホバー時のボタン色 */
    }

    /* モバイルでの調整 */
    @media (max-width: 576px) {
        .nav-link {
            text-align: center;
            margin: 5px 0;
        }

        .btn-primary {
            width: 100%;
            margin-top: 10px;
        }
    }
.collapse {
    transition: height 0.35s ease, opacity 0.35s ease;
}
    /* 詳細情報の初期状態: 非表示 */
    .collapse-hide {
        height: 0;
        opacity: 0;
        overflow: hidden;
        transition: height 0.5s ease, opacity 0.5s ease;
    }

    /* 詳細情報の表示状態 */
    .collapse-show {
        height: auto; /* 高さを自動調整 */
        opacity: 1;
        overflow: visible;
        transition: height 0.5s ease, opacity 0.5s ease;
    }

    /* スムーズな表示・非表示のためのトランジション */
.collapse-show {
    height: auto;
    opacity: 1;
    overflow: hidden;
    transition: height 0.5s ease, opacity 0.5s ease;
}

.collapse-hide {
    height: 0;
    opacity: 0;
    overflow: hidden;
    transition: height 0.5s ease, opacity 0.5s ease;
}
        /* テーブル全体のデザイン */
        .table {
            font-size: 16px; /* 見やすいフォントサイズ */
        }
        .table th, .table td {
            vertical-align: middle; /* 垂直方向を中央寄せ */
            padding: 10px; /* 適度な余白 */
            word-wrap: break-word; /* 長いテキストを折り返す */
            white-space: normal; /* 折り返し許可 */
        }
            .btn {
                font-size: 16px;
                padding: 10px 20px;
            }
            .like-button {
    border-radius: 50px;
    font-size: 16px;
    font-weight: bold;
    padding: 10px 20px;
    transition: all 0.3s ease;
}

.like-button.btn-outline-primary:hover {
    background-color: #007bff;
    color: white;
}

.like-button.btn-primary {
    background-color: #E575AD;
    color: white;
}

.like-button.btn-primary:hover {
    background-color: #0056b3;
}

        /* スマホ向けの調整 */
        @media (max-width: 576px) {
            .table th, .table td {
                display: block; /* ラベルと値を縦並びに */
                width: 100%; /* 幅を全体に広げる */
                font-size: 14px; /* フォントサイズを縮小 */
            }

            .table th {
                font-weight: bold; /* ラベルを強調 */
                background-color: #f8f9fa; /* ラベル部分の背景色を変更 */
            }
        }
    </style>
