/* デフォルトスタイルをリセット */
body, h1, h2, h3, p, ul, li, a {
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
}

body {
    background-image: url('IMG_0284.jpeg');
    background-size: 100% auto;
    background-attachment: fixed;
    background-repeat: repeat;
    margin: 0;
    padding: 0;
    font-family: 'Kiwi Maru', 'nicomoji', sans-serif;
}

/* h1をよもぎフォントに設定 */
h1, li {
    font-family: "Kiwi Maru";
}

.music_record ul {
    max-width: 0%;
    margin: 0;
    background: #2b1628;
    max-height: 0;
    overflow: hidden;
    transition: all 1.5s;
}
.music_record ul li {
    white-space: nowrap;
    margin: 1px;
    background: #ece6e9;
    padding: 5px 10px;
}
.music_record ul li:hover {
    background: #ecaecd;
}
.music_record {
    cursor: pointer;
}
.music_record.open ul {
    max-height: 50px;
    max-width: 100%;
    background-color: #e7e7e7;
    transition: all 1s;
}
.music_record li {
    padding: 5px 10px;
}

.music_record ul li button {
    background-color: #bb4bac;
    color: #fff;
    margin-left: 50px;
    padding: 5px 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
/* 改行させない */
.playbutton {
    background-color: #bb4bac;
    color: #fff;
    margin: 5px;
    padding: 2px 5px;
    border: none;
    border-radius: 4px;
    display: inline-block;
    white-space: nowrap;
}

/* div class=thの文字色を薄ピンクに変更 */
.th {
    color: #f4a4a4;
}

/* ボディの背景色とフォントを設定 */
body {
    background-color: #ffe4e1; /* 薄ピンク */
    font-family: 'Arial', sans-serif;
    color: #333;
    line-height: 1.6;
    padding: 20px;
}

/* メインコンテナのスタイル */
.container {
    max-width: 800px;
    margin: 0 auto;
    background: #fff;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* ヘッダーのスタイル */
header {
    text-align: center;
    margin-bottom: 20px;
}

header h1 {
    font-size: 2.5em;
    color: #ff69b4; /* ショッキングピンク */
}

/* セクション間のスペースを追加 */
section {
    margin-bottom: 20px;
}

.sort_menu {
    max-width: 300px;
    justify-content: space-between;
    display: flex;
    background-color: #f3e4eb;
    cursor: pointer;
}
.sort_menu:hover {
    background-color: #ecaecd;
}
.sort_button ul {
    max-width: 300px;
    margin: 0;
    background: #bb4bac;
    max-height: 0;
    overflow: hidden;
    transition: all .5s;
}
.sort_button ul li {
    margin: 1px;
    background: #f3e4eb;
    padding: 5px 10px;
    cursor: pointer;
}
.sort_button ul li:hover {
    background: #ecaecd;
}
.sort_button.open ul {
    max-height: 300px;
    max-width: 300px;
    background-color: #e7e7e7;
}
.sort_button li {
    margin-left: 20px;
    padding: 5px 10px;
}

/* desccriptionの設定　注釈の表示　小さめの文字 */
.description {
    font-size: 0.8em;
    color: #999;
}

/* streamingクラスのdivを画面右下に固定表示 */
.streaming {
    position: fixed;
    bottom: 10px;
    right: 10px;
    background: #ff69b4; /* ショッキングピンク */
    color: #fff;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
}

/* tweet-box クラスの div タグを画面右上に表示 */
.tweet-box {
    position: absolute;
    /* スクロール可能にする */
    overflow-x: hidden;
    overflow-y: scroll;
    /* サイズは横20%縦50% */
    width: 60%;
    max-width: 570px;
    min-width: 260px;
    height: 50%;
    /* 位置は右上 */
    top: 10px;
    right: 10px;
    color: #fff;
    cursor: pointer;
}