body {
    font-family: 'Arial', sans-serif;
    background-color: lightblue; /* 淡いピンク色に変更 */
}

header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 10px;
}

h1 {
    font-size: 2em;
    margin-right: 10px; /* 右に少しスペースを設ける */
    white-space: nowrap;
    order: 1; /* タイトルを最初に表示 */
}

/* タブ関連のスタイル */
#tabs {
    display: flex; /* タブを横並びにする */
    justify-content: flex-start; /* タブを左から順に配置する */
    margin: 0; /* 上下のマージンを取り除く */
    padding: 0;
}

.tab {
    flex: 1; /* タブの横幅を等分に設定 */
    text-align: center; /* タブ内のテキストを中央揃えにする */
    padding: 10px 0; /* タブの上下のパディングを設定 */
    margin-right: 5px; /* タブ間の右のマージンを設定 */
    border-radius: 5px 5px 0 0; /* タブの上部の角に丸みを持たせる */
    background-color: lightgrey; /* 非アクティブなタブの背景色 */
    border: 1px solid #ccc; /* タブの境界線を設定 */
    border-bottom: none; /* 下部の境界線を取り除く */
    box-sizing: border-box; /* パディングとボーダーを横幅に含める */
}

.tab:last-child {
    margin-right: 0; /* 最後のタブの右のマージンを0にする */
}

/* アクティブなタブのスタイル */
.tab.active {
    background-color: white; /* アクティブなタブの背景色 */
    border-bottom: 1px solid white; /* アクティブなタブの境界線を隠す */
}

.tab:hover {
    background-color: #ddd;
}

/* タブコンテンツ関連のスタイル */
.tab-content {
    border: 1px solid #ccc; /* タブコンテンツの境界線を設定 */
    padding: 10px; /* タブコンテンツのパディングを設定 */
    margin-top: -1px; /* タブとの間のスペースをなくす */
}


/* バナーエリアのスタイル */
.swiper-container {
    height: 150px;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
}

/* バナースライドのスタイル調整 */
.swiper-slide {
    display: flex; /* Flexboxを使用して中央揃えを実現 */
    justify-content: center; /* 水平方向の中央揃え */
    align-items: center; /* 垂直方向の中央揃え */
    text-align: center; /* テキストを中央揃えにする */
    height: 100%; /* スライドの高さをコンテナに合わせる */
}

/* バナー画像のスタイル調整 */
.swiper-slide img {
    height: 100%; /* 高さをバナーエリアに合わせて調整 */
    width: auto; /* 幅は自動調整 */
    object-fit: cover; /* 画像のアスペクト比を保持しつつ、エリアを埋める */
}

/* ページ全体に適用するためのスタイル調整 */
body {
    padding-bottom: 160px; /* バナーの高さ + 追加の余白 */
}


/* サウンドボタンのスタイル */
.sound-button {
    background-color: #b3e5fc; /* ボタンの背景色を淡い水色に設定 */
    border-radius: 5px; /* ボタンの角に丸みを持たせる */
    border: none; /* ボタンの境界線を取り除く */
    padding: 10px 20px; /* ボタンのパディングを設定 */
    margin: 5px; /* ボタン間のマージンを設定 */
    cursor: pointer; /* カーソルをポインタにする */
}

.sound-button:hover {
    background-color: #f0f0f0;
}

#volume-control {
    margin-left: auto; /* ボリュームコントロールを右側に押し出す */
    order: 3; /* ボリュームコントロールを最後に表示 */
}

#sound-count {
    order: 2; /* 音声の数をタイトルの後に表示 */
    margin-right: 10px; /* 右に少しスペースを設ける */
}



.form-row {
    display: flex;
    justify-content: space-between; /* 左右のスペースを揃える */
    align-items: center; /* 中央揃え */
    margin-bottom: 10px; /* 各行の下にスペースを作る */
}

.form-row label {
    flex-basis: 20%; /* ラベルの基本幅 */
    text-align: right; /* ラベルのテキストを右揃えに */
    margin-right: 10px; /* ラベルとフィールドの間にスペースを作る */
}

.form-row input,
.form-row select {
    flex-basis: 70%; /* 入力フィールドの基本幅 */
    /* 必要に応じて他のスタイル指定 */
}

/* 登録ボタンのスタイル */
.form-row.button-row {
    justify-content: center; /* ボタンを中央に配置 */
}

/* 登録ボタンのスタイル */
.form-row.button-row button {
    text-align: center;
    display: block;
    width: 50%; /* ボタンの幅を50%に設定 */
    margin: 0 auto; /* ボタンを中央揃えにする */
}

/* ボタンのスタイル */
input[type="submit"] {
    padding: 5px 15px; /* ボタンのパディング */
    /* 必要に応じて他のスタイル指定 */
}

#continuous .list-area {
    display: flex;
    align-items: center;
    justify-content: center;
}

.list-block {
    width: 40%;
    margin: 10px;
}

.list-title {
    margin-bottom: 5px;
}

.sound-list {
    border: 1px solid #ccc;
    padding: 10px;
    overflow-y: auto;
    height: 200px;
}

#continuous .playlist-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 200px;
    margin: 10px;
}

.playlist-controls button {
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    padding: 10px 20px;
    width: 100%; 
    border-radius: 10px; /* 角を丸くする */
    margin: 5px 0;
    cursor: pointer;
    font-size: 1.2em;
}

.controls-bottom {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}

.control-button, .bottom-button {
    padding: 5px 15px;
}

.sound-list li.selected {
    background-color: lightblue;
}



/* 出典元動画一覧タブ */
.source-list .source-item {
    border-bottom: 1px solid #ccc;
    padding: 10px;
}

    .source-list .source-item:last-child {
        border-bottom: none;
    }

/* rgy-style.css の修正部分 */
.source-entry {
    display: flex;
    align-items: center;
    margin-bottom: 20px; /* 適宜調整 */
}

    .source-entry .thumbnail {
        margin-right: 20px; /* 右側のマージンを設定 */
        /* その他のスタイル設定（必要に応じて） */
    }

/* 追加: インフォメーションコンテナのスタイル */
.info-container {
    margin-left: 20px; /* 左側のマージンを設定 */
}

/* 中程度の画面幅で適用されるスタイル */
@media (min-width: 769px) {
    header {
        justify-content: flex-start;
    }

    #sound-count {
        flex-grow: 1;
        text-align: left;
    }
}

/* 小さい画面幅で適用されるスタイル */
@media (max-width: 768px) {
    header {
        justify-content: center;
    }

    h1, #sound-count, #volume-control {
        flex-basis: 100%;
        text-align: center;
        margin: 0; /* 行間のマージンを0に設定 */
    }
}


/* Custom styles for the registration form */

/* Aligning left-side labels to the right */
.form-row label {
    text-align: right;
    display: block;
}

/* Aligning right-side input elements to the left */
.form-row input, 
.form-row select {
    text-align: left;
    display: block;
    width: 100%;
    box-sizing: border-box; /* Ensures padding doesn't affect overall width */
}

/* Making form responsive */
@media screen and (max-width: 600px) {
    .form-row label,
    .form-row input,
    .form-row select {
        width: 100%;
    }
}

/* Ellipsis for dropdown options */
.form-row select {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}