body {
    font-family: sans-serif;
    margin: 20px;
    line-height: 1.6;
    background-color: #f4f4f4;
    color: #333;
}

body {
    margin: 0;
    font-family: sans-serif;
    padding: 1em;
}
.image-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 1em;
    margin-bottom: 1em;
}
.image-container_imformation {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 1em;
    margin-bottom: 1em;
    background-color: #414141;
}
.left-image img {
    width: 50%;
    height: auto;
}
.left-image {
    display: flex;
    justify-content: center;
    align-items: center;
}
#search-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5em;
    flex-wrap: wrap;
    margin: 1em 0;
}
#search-input {
    flex: 1 1 auto;
    min-width: 200px;
    max-width: 500px;
    padding: 0.5em;
    font-size: 1em;
}
#search-execute-button {
    padding: 0.5em 1em;
    font-size: 1.2em;
    cursor: pointer;
}
#list-view, #detail-view, #search-results-view {
    width: 100%;
    max-width: none;
    margin: 0 auto;
    padding: 0 1em;
    box-sizing: border-box;
}
ul {
    padding-left: 1.2em;
}
#session-details, #search-results-list {
    padding: 0.5em;
}
#back-button, #back-to-list-from-search {
    margin-top: 1em;
    padding: 0.5em 1em;
    font-size: 1em;
}
#footer {
    margin-top: 2em;
    font-size: 0.9em;
    text-align: center;
    color: #666;
}
#scroll-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 0.5em 1em;
    font-size: 0.9em;
}
.hidden {
    display: none;
}


#title-image {
    width: 100%;
    max-width: 400px; /* 必要に応じて調整 */
    /* margin: 0 auto; */
    /* padding: 1rem 0; */
}

#title-image img {
    width: 80%;
    height: auto;
    display: block;
}

.image-container {
    display: flex;
    /* justify-content: space-between; */
    align-items: center;
    width:  100%;
  }

.left-image {
text-align: left;
max-width: 500px;
height: auto;
}

.right-image {
text-align: right;
max-width:  400px;
height: auto;
}

img {
max-width: 70%;
height: auto;
}

h1, h2, h3 {
    color: #333;
    border-bottom: 2px solid #007bff;
    padding-bottom: 5px;
}

h1 {
    text-align: center;
    margin-bottom: 30px;
}

/* --- List View --- */
#episode-list .episode-title {
    font-size: 1.3em; /* 文字サイズを大きくする (1.3倍、値は調整可能) */
    font-weight: bold; /* 太字にする (任意) */
    color: #222;      /* 文字色を少し濃くする (任意) */
    display: inline-block; /* 必要ならブロック要素にする display: block; も可 */
    margin-top: 4px; /* タイトルの上に少しスペースを空ける (任意) */
}

#list-view ul {
    list-style: none;
    padding: 0;
}

#episode-list li {
    background-color: #fff;
    border: 1px solid #ddd;
    margin-bottom: 10px;
    padding: 15px;
    border-radius: 5px;
    display: flex; /* Flexboxで見出しとリンクを横並び */
    justify-content: space-between; /* 要素間にスペースを空ける */
    align-items: center; /* 垂直方向中央揃え */
}

#episode-list li span {
    flex-grow: 1; /* 見出し部分が残りのスペースを埋める */
    margin-right: 15px; /* リンクとの間に隙間 */
}

#episode-list li a {
    display: inline-block; /* または block */
    padding: 8px 15px;
    background-color: #007bff;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    white-space: nowrap; /* リンクテキストが折り返さないように */
}

#episode-list li a:hover {
    background-color: #0056b3;
}

/* --- Detail View --- */
#detail-view {
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 20px;
    border-radius: 5px;
    margin-top: 20px;
}

#back-button {
    display: inline-block;
    padding: 10px 20px;
    margin-bottom: 20px;
    background-color: #6c757d;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#back-button:hover {
    background-color: #5a6268;
}

#session-details .session-item {
    border: 1px solid #eee;
    padding: 15px;
    margin-bottom: 15px;
    background-color: #f9f9f9;
    border-radius: 4px;
}

#session-details h4 {
    margin-top: 0;
    margin-bottom: 10px;
    color: #0056b3;
    border-bottom: none; /* h4には下線不要 */
}

#session-details p {
    margin: 5px 0;
}

#session-details strong {
    display: inline-block;
    min-width: 80px; /* ラベルの幅を揃える */
    color: #555;
}

#footer {
    text-align: center;
    line-height: 0.5;
    /* margin-bottom: 20px; */
    /* font-size: 0.9em; */
    color: #000000;
    /* font-style: italic; */
}
#scroll-button {
    position: fixed;
    right: 20px;
    bottom: 20px;
    padding: 12px 16px;
    font-size: 16px;
    background-color: #5b5b5b;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    z-index: 1000;
    transition: background-color 0.3s;
}

#scroll-button:hover {
    background-color: #5b5b5b;
}

/* --- Utility --- */
.hidden {
    display: none;
}

/* style.css の末尾に追加 */

/* --- Search Area --- */
#search-container {
    position: relative; /* アイコンボタンの位置調整のため */
    margin-bottom: 20px;
    padding: 10px;
    background-color: #e9ecef; /* 背景色を少しつける（任意）*/
    border-radius: 5px;
}

#search-icon-button {
    background: none;
    border: none;
    font-size: 1em; /* アイコンサイズ調整 */
    cursor: pointer;
    padding: 5px;
    /* position: absolute; 右上に配置する場合 */
    top: 10px;
    right: 10px;
}

#search-form {
    /* display: none; /* 初期状態はJSでhiddenクラス制御 */
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #ccc; /* 区切り線 */
}

#search-input {
    padding: 8px 10px;
    margin-right: 5px;
    border: 1px solid #ccc;
    border-radius: 15px;
    width: calc(100% - 100px); /* ボタン幅を考慮 */
    max-width: 350px; /* 最大幅 */
}

#search-execute-button {
    /* padding: 8px 15px;
    background-color: #9d9d9d; 
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease; */
    background: none;
    border: none;
    font-size: 1em; /* アイコンサイズ調整 */
    cursor: pointer;
    padding: 5px;
    /* position: absolute; 右上に配置する場合 */
    top: 10px;
    right: 10px;
}

#search-execute-button:hover {
    background-color: #5a5a5a;
}

/* --- Search Results View --- */
#search-results-view {
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 20px;
    border-radius: 5px;
    margin-top: 20px;
}

#search-results-list {
    list-style: none;
    padding: 0;
    margin-bottom: 20px; /* ボタンとの間隔 */
}

#search-results-list li {
    background-color: #f9f9f9;
    border: 1px solid #eee;
    margin-bottom: 10px;
    padding: 15px;
    border-radius: 5px;
}

#search-results-list li .result-title {
    font-weight: bold;
    margin-bottom: 5px;
    display: block; /* タイトルをブロック要素に */
}
#search-results-list li .result-date {
    font-size: 0.9em;
    color: #555;
    margin-bottom: 10px;
    display: block; /* 日付もブロック要素に */
}
#search-results-list li .result-song {
    margin-left: 15px; /* セッション曲を少しインデント */
    display: block; /* 曲名もブロック要素に */
    color: #0056b3; /* 曲名の色 */
}
#search-results-list li .result-song::before {
    content: "♪ "; /* 曲名の前に音符マーク */
}


#back-to-list-from-search {
    display: inline-block;
    padding: 10px 20px;
    background-color: #6c757d;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#back-to-list-from-search:hover {
    background-color: #5a6268;
}

/* --- 既存のhiddenクラスはそのまま利用 --- */
.hidden {
    display: none;
}

/* --- 既存のスタイル調整 (必要に応じて) --- */
.icon-links-container {
    display: flex;
    justify-content: center; /* This property centers flex items horizontally */
    align-items: center;
    gap: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.icon-links-container img {
    max-width: 30px; /* Adjust the size of your icons */
    height: auto;
    display: block; /* Remove extra space below images */
}