/*
 *============stream-log-div 専用の設定============================
 */

/*
 * ----------- 一般的な設定----------------------------------------------
 */

/* youtube,niconicoのアイコンのサイズを指定 */
#stream-log-div img.logo-youtube {
	width: 16px;
}
#stream-log-div {
	color: #000000;
}

/*--------フィルター部分のスタイル-----------------------*/
/* 親要素の定義 */
#stream-log-filter-controls .stream-year-pull-down-label {
	position: relative;
}

/* 擬似要素の共通定義 */
#stream-log-filter-controls .stream-year-pull-down-label::before,
#stream-log-filter-controls .stream-year-pull-down-label::after {
	position: absolute;
	content: "";
	pointer-events: none;
}

/* 擬似要素::before (背景の青いボックス) */
#stream-log-filter-controls .stream-year-pull-down-label::before {
	right: 0;
	display: inline-block;
	width: 2em;
	height: 2.1em;
	border-radius: 0 3px 3px 0;
	background-color: #2589d0;
	content: "";
}

/* 擬似要素::after (白い矢印) */
#stream-log-filter-controls .stream-year-pull-down-label::after {
	position: absolute;
	top: 50%;
	right: 1em;
	transform: translate(50%, -50%) rotate(45deg);
	width: 6px;
	height: 6px;
	border-bottom: 3px solid #fff;
	border-right: 3px solid #fff;
	content: "";
}

/* select要素本体 (ネイティブの矢印を非表示にする) */
#stream-log-filter-controls .stream-year-pull-down-label select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding: 0.4em 2.4em 0.4em 0.4em;
	border: 2px solid #2589d0;
	border-radius: 3px;
	color: #333333;
	font-size: 1em;
	cursor: pointer;
}

/* select要素本体 (フォーカス時のスタイル) */
#stream-log-filter-controls .stream-year-pull-down-label select:focus {
	outline: 1px solid #2589d0;
}

/*
 * ----------- article のレイアウト設定----------------------------------
 */
/* --- カード本体（グリッド定義） --- */
#stream-log-container-div > .stream-article {
	display: grid;
	/* 列の定義: 日付幅 | 名前幅 | 残り全て */
	grid-template-columns: 120px 150px 1fr;
	/* 行の定義: 自動 | 自動 | 自動 */
	grid-template-rows: auto auto auto;

	border: 2px solid #000; /* 全体の枠線 */
	border-radius: 10px; /* 角を丸くする */
	margin-bottom: 20px; /* 各カード間のスペース */
	background-color: #fff;
}

/* --- 各セルの配置設定 --- */

/* 共通設定*/

#stream-log-container-div > .stream-article > div.bg-color-kasuka {
	background-color: #fff3ec;
}
#stream-log-container-div > .stream-article > div.bg-color-yomi {
	background-color: #efffff;
}

/* (1) 配信日 (左上: 黒色) */
#stream-log-container-div > .stream-article > .stream-date-div {
	grid-column: 1 / 2; /* 1列目 */
	grid-row: 1 / 2; /* 1行目 */
	color: #ffffff;
	background-color: #000000; /* 黒色 */
	padding: 5px 10px;
	font-weight: bold;
	border-top-left-radius: 8px;
}

/* (2) 配信者 (中央上: 緑色) */
#stream-log-container-div > .stream-article > .stream-streamer-div {
	grid-column: 2 / 3; /* 2列目 */
	grid-row: 1 / 2; /* 1行目 */
	padding: 5px 10px;
	font-weight: bold;
}
#stream-log-container-div > .stream-article > div.stream-streamer-div.bg-color-yomi {
	background-color: #67bbff;
}
#stream-log-container-div > .stream-article > div.stream-streamer-div.bg-color-kasuka {
	background-color: #ff9f42;
}
#stream-log-container-div > .stream-article > div.stream-streamer-div > span.guest-span {
	background-color: #eaff03;
}

/* 空白スペース (右上: 白) */
#stream-log-container-div > .stream-article > .stream-spacer-div {
	grid-column: 3 / -1; /* 3列目から最後まで */
	grid-row: 1 / 2;
	background-color: #000000;
}

/* (3) 配信タイトル (中段: 青色) */
#stream-log-container-div > .stream-article > .stream-title-div {
	grid-column: 1 / -1; /* 1列目から最後までぶち抜き */
	grid-row: 2 / 3; /* 2行目 */
	font-size: 120%;
	padding: 10px;
	margin: 0;
	border-bottom: 1px solid #ccc;
}

/* 詳細表示切替バー */
#stream-log-container-div > .stream-article > .stream-toggle-bar {
	grid-column: 1 / -1; /* 1列目から最後までぶち抜き */
	grid-row: 4 / 5; /* 4行目 */
	color: #fff;
	background-color: #000;
	padding: 2px;
	text-align: center;
	margin: 0;
	border-bottom-right-radius: 8px;
	border-bottom-left-radius: 8px;
}

/* タイトル内の【】部分の色を反転する */
#stream-log-container-div > .stream-article > .stream-title-div > span.title-bracket-span {
	color: #fff;
	background-color: #8d8d8d;
	border-radius: 5px;
	font-size: 80%;
}

/*
 * ----------- detail内のCSS ---------------------------
 */

/* detail共通 */
#stream-log-container-div > .stream-article > .stream-detail-div {
	grid-column: 1 / -1; /* 1列目から最後までぶち抜き */
	grid-row: 3 / 4; /* 3行目 */
	padding: 15px;
	white-space: pre-wrap; /* 改行をそのまま表示する場合 */
}

#stream-log-container-div > .stream-article > .stream-detail-div-mobile {
	grid-column: 1 / -1; /* 1列目から最後までぶち抜き */
	grid-row: 3 / 4; /* 3行目 */
	padding: 15px;
	white-space: normal; /* 改行をそのまま表示する場合 */
}

/* setlist-olの基本スタイル */
#stream-log-container-div > article.stream-article > .stream-detail-div > ol.setlist-ol,
#stream-log-container-div > article.stream-article > .stream-detail-div-mobile > ol.setlist-ol {
	list-style: none; /* デフォルトのナンバリングを非表示 */
	counter-reset: custom-counter; /* ナンバリング用カウンタをリセット */
	padding-left: 0;
}

/* setlist-song-liの基本スタイル */
#stream-log-container-div
	> article.stream-article
	> .stream-detail-div
	> ol.setlist-ol
	> li.setlist-song-li,
#stream-log-container-div
	> article.stream-article
	> .stream-detail-div-mobile
	> ol.setlist-ol
	> li.setlist-song-li {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline; /* 垂直方向の位置合わせ（必要に応じて baseline に変更） */
	padding-left: 5px;
	margin-bottom: 20px;
	counter-increment: custom-counter; /* カウンタをインクリメント */
}

/* song-ts-aのスタイル */
#stream-log-container-div
	> article.stream-article
	> .stream-detail-div
	> ol.setlist-ol
	> li.setlist-song-li
	> a.song-ts-a,
#stream-log-container-div
	> article.stream-article
	> .stream-detail-div-mobile
	> ol.setlist-ol
	> li.setlist-song-li
	> a.song-ts-a {
	order: 1; /* 1番目に配置 */
	margin-right: 8px; /* ナンバリングとの間隔 */
}

/* song-number-spanのスタイル */
#stream-log-container-div
	> article.stream-article
	> .stream-detail-div
	> ol.setlist-ol
	> li.setlist-song-li
	> span.song-number-span,
#stream-log-container-div
	> article.stream-article
	> .stream-detail-div-mobile
	> ol.setlist-ol
	> li.setlist-song-li
	> span.song-number-span {
	order: 2; /* 2番目に配置 */
	margin-right: 8px; /* ナンバリングとの間隔 */
	padding: 0 5px;
	border-radius: 4px;
	flex-shrink: 0; /* ナンバリングのブロックが縮まないようにする */
	white-space: nowrap;
	color: #fff;
	background-color: #000;
}

/* song-number-span::beforeのスタイル */
#stream-log-container-div
	> article.stream-article
	> .stream-detail-div
	> ol.setlist-ol
	> li.setlist-song-li
	> span.song-number-span::before,
#stream-log-container-div
	> article.stream-article
	> .stream-detail-div-mobile
	> ol.setlist-ol
	> li.setlist-song-li
	> span.song-number-span::before {
	/* カウンタの値とドットを表示 */
	content: counter(custom-counter) ".";
}

/* song-title-singer-wrap-spanのスタイル */
#stream-log-container-div
	> article.stream-article
	> .stream-detail-div
	> ol.setlist-ol
	> li.setlist-song-li
	> span.song-title-singer-wrap-span,
#stream-log-container-div
	> article.stream-article
	> .stream-detail-div-mobile
	> ol.setlist-ol
	> li.setlist-song-li
	> span.song-title-singer-wrap-span {
	order: 3; /* 3番目に配置 */
	flex: 1; /* 余った幅を全て使う（これによりナンバリングと同じ行に収まろうとします） */
	min-width: 0; /* Flexアイテム内のテキスト折り返しを正常に動作させるためのおまじない */
	display: block; /* 念のためブロック要素として振る舞わせる */
	color: #389400;
}

/* song-title-spanのスタイル */
#stream-log-container-div
	> article.stream-article
	> .stream-detail-div
	> ol.setlist-ol
	> li.setlist-song-li
	> span.song-title-singer-wrap-span
	> span.song-title-span,
#stream-log-container-div
	> article.stream-article
	> .stream-detail-div-mobile
	> ol.setlist-ol
	> li.setlist-song-li
	> span.song-title-singer-wrap-span
	> span.song-title-span {
	color: #000000;
	font-size: 120%;
	font-weight: bold;
}

/* song-singer-spanのスタイル */
#stream-log-container-div
	> article.stream-article
	> .stream-detail-div
	> ol.setlist-ol
	> li.setlist-song-li
	> span.song-title-singer-wrap-span
	> span.song-singer-span,
#stream-log-container-div
	> article.stream-article
	> .stream-detail-div-mobile
	> ol.setlist-ol
	> li.setlist-song-li
	> span.song-title-singer-wrap-span
	> span.song-singer-span {
	color: #389400;
}

/* song-detail-ulのスタイル */
#stream-log-container-div
	> article.stream-article
	> .stream-detail-div
	> ol.setlist-ol
	> li.setlist-song-li
	> ul.song-detail-ul,
#stream-log-container-div
	> article.stream-article
	> .stream-detail-div-mobile
	> ol.setlist-ol
	> li.setlist-song-li
	> ul.song-detail-ul {
	position: relative;
	padding-left: 45px;
	list-style: "➤"; /* ツリーアイコンとして矢印を使用 */
	order: 4;
	width: 100%;
}

#stream-log-container-div
	> article.stream-article
	> .stream-detail-div-mobile
	> ol.setlist-ol
	> li.setlist-song-li
	> ul.song-detail-ul
	> li.song-detail-li {
	margin: 5px;
}

#stream-log-container-div
	> article.stream-article
	> .stream-detail-div-mobile
	> ol.setlist-ol
	> li.setlist-song-li
	> ul.song-detail-ul
	> li.song-detail-li::marker {
	color: #7a7a7a;
}

#stream-log-container-div
	> article.stream-article
	> .stream-detail-div-mobile
	> ol.setlist-ol
	> li.setlist-song-li
	> ul.song-detail-ul
	> li.song-detail-li
	> span.song-cover-singer-span {
	color: #4e4c4c;
	background-color: #f1eded;
}

/*
 * ----------- モバイル用の設定----------------------------------
 */
@media (max-width: 768px) {
	/* PC用の3列目を非表示にする */
	#stream-log-container-div > .stream-article > .stream-detail-div.hide-on-mobile {
		display: none;
	}
}

/*
 *============stream-log-div 専用の設定おわり============================
 */

/* 
 *============stream-title-div 専用の設定============================ 
 */

/*
 * ----------- 一般的な設定----------------------------------------------
 */
/* streamSingerに合わせて行に背景色を設定 */
[data-stream-singer="Yomi"] {
	background-color: #e5f9ff;
}
[data-stream-singer="Kasuka"] {
	background-color: #ffeee5;
}
/* youtube,niconicoのアイコンのサイズを指定 */
#stream-title-sorted-div img {
	width: 14px;
}

/* テーブルヘッダーのスタイル */
#stream-title-sorted-table > thead > tr {
	text-align: center;
	background-color: #1a9336;
	color: white;
	border: 1px solid #4a758e;
	padding: 8px;
}


#stream-title-sorted-table > tbody > tr.expanded {
	box-shadow: 0 0 0 3px  #2600ff;
        z-index: 1; 
        position: relative;


}

/* ---------テーブルレイアウトの制御------------------------------------ */

#stream-title-sorted-div table#stream-title-sorted-table {
	display: table;
	border-collapse: collapse;
	table-layout: fixed;
	width: 100%;
}

#stream-title-sorted-div table#stream-title-sorted-table > thead {
	display: table-header-group;
}
#stream-title-sorted-div table#stream-title-sorted-table > tbody {
	display: table-row-group;
}
#stream-title-sorted-div table#stream-title-sorted-table > tbody > tr {
	display: table-row;
}
#stream-title-sorted-div table#stream-title-sorted-table td {
	display: table-cell;
}

/* PCビューで歌った回の列の折り返しを許可*/
#stream-title-sorted-div table#stream-title-sorted-table td .stream-title-sorted-stream-content {
        white-space: normal;
        overflow-wrap: break-word;
        word-wrap: break-word;
}

/*
 * -------------モバイルビュー用の設定------------------------------------
 */

@media (max-width: 768px) {
	/* PC用の3列目を非表示にする */
	#stream-title-sorted-div table#stream-title-sorted-table .hide-on-mobile {
		display: none;
	}

	/* 表示される2列の幅を均等に設定 */
	#stream-title-sorted-div table#stream-title-sorted-table .stream-title-sorted-title-col,
	#stream-title-sorted-div table#stream-title-sorted-table .stream-title-sorted-singer-col {
		width: 50%;
	}

	/* 展開行のテキストが正しく折り返されるようにする */
	#stream-title-sorted-div .title-sorted-song-stream-row td,
	#stream-title-sorted-div .title-sorted-song-cover-row td {
		white-space: normal;
		overflow-wrap: break-word;
		word-wrap: break-word; /* 古いブラウザ用 */
	}
	#stream-title-sorted-div .title-sorted-song-stream-row td,
	#stream-title-sorted-div .title-sorted-song-cover-row td {
		background-color: #fdfd7d;
		border: 1px solid #99c2ff;
		border-top: 1px solid #5d8aa8;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
	}

	/* モバイルビューでトグル可能であることを示すカーソル設定 */
	#stream-title-sorted-div tr.title-sorted-song-row {
		cursor: pointer;
	}
}

/*
 * ==============stream-title-sorted-div 専用の設定 終わり================================
 */


/* ===========.fix-table専用のレイアウト設計=========================================== */
/* --- 1. テーブル全体のレイアウトを固定幅に強制（.fix-table限定） --- */

.fix-table {
  /* <table>要素を Flexbox の影響から解放し、テーブルとして強制 */
  display: table !important;
  /* 列幅の計算を固定幅 (width: N% に従う) に強制 */
  table-layout: fixed !important; 
  /* テーブルの幅を親要素に合わせる */
  width: 100% !important; 
  /* border-collapse: separate; の競合対策 */
  border-collapse: collapse !important; 
  /* 横スクロール対策 */
  overflow: hidden !important;
}

/* <tr>要素をテーブルの行として強制 */
.fix-table tr {
  display: table-row !important;
  width: 100% !important;
}

/* <tbody>要素もテーブルのグループとして強制 (念のため) */
.fix-table tbody {
  display: table-row-group !important;
}

/* td 要素の表示形式を table-cell に強制的に戻す */
.fix-table td {
  display: table-cell !important;
}

/* --- 2. 列幅の定義（高い詳細度で固定） --- */

/* table-date (1列目) */
.fix-table td.table-date { 
  width: 15% !important; 
  min-width: 0 !important; 
 background-color: #000000;
color: #ffffff;
}

/* table-streamer (2列目) */
.fix-table td.table-streamer { 
  width: 35% !important; 
  min-width: 0 !important; 
}

/* 3列目 (タイトル) */
.fix-table td:nth-child(3) { 
  width: 50% !important; 
  min-width: 0 !important; 
}

/* --- 3. タイトルセルの改行強制 --- */

.fix-table td.table-title {
  /* Uikitの nowrap !important を打ち破る */
  white-space: normal !important;
  word-wrap: break-word !important; 
  /* コールスパンを持つタイトル行も幅を均等に */
  display: table-cell !important;
}

/* --- 4. 親要素の横スクロールを強制的に無効化（.fix-tableがあるページ限定） --- */

/* JSによって付与されたクラスを持つ #atwiki-contents にのみ適用 */
#atwiki-contents.no-scroll-on-fix-table {
    overflow-x: hidden !important; 
    max-width: 100% !important;
}

.bg-yomi {
  background-color: #AFEEEE;
}

.bg-kasuka {
  background-color: #FFDAB9;
}
/* =====================.fix-table専用のレイアウト設定 終わり ============================== */

/* ===========#karaoke-cover-div 専用のレイアウト設定===================================== */
/* スタイリング強化版CSS: Flexboxラッパーを使用し、ヘッダーのアイコンとテキストの配置を制御 */

/* ================共通スタイル================= */
*,
*::before,
*::after {
	box-sizing: border-box;
}
#karaoke-cover-div {
	font-family: "Inter", "Noto Sans JP", Arial, sans-serif; /* フォントを調整 */
	max-width: 100%;
	margin: 0 auto;
}
/* ==========フィルターコントロール (簡素化)================= */
#cover-filter-controls {
	display: flex;
	gap: 10px;
	margin-bottom: 10px;
	flex-wrap: wrap;
}
#cover-filter-controls fieldset {
	flex: 1;
	min-width: 200px;
	border: 1px solid #ccc;
	border-radius: 8px; /* 角を丸く */
	padding: 10px;
	margin: 0; /* atwikiのデフォルトmarginを上書き */
	background-color: #f7f7f7; /* 背景色を追加 */
}
#cover-filter-controls legend {
	font-weight: bold;
	color: #333;
	padding: 0 5px;
}
#cover-filter-controls label {
	display: inline-flex;
	align-items: center;
	margin-right: 15px;
	white-space: nowrap;
}

/* =====================テーブル (PCビュー) ====================== */
.cover-table-container {
	overflow-x: auto;
	border: 1px solid #ddd;
}
#cover-song-table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
	cursor: pointer;
}

/* ヘッダーの設定: th要素自体はテーブルセルとしての役割を維持 */
#cover-song-table thead th {
	position: relative;
	text-align: center;

	background-color: #5d8aa8;
	color: white;
	border: 1px solid #4a758e;
	padding: 8px; /* パディングを統一 */
}

/* 【PCビュー: Flexboxラッパーのスタイル (共通設定: 横並びがデフォルト)】 */
.cover-header-content-wrapper {
	display: inline-flex;
	flex-direction: row; /* PCビューは横並び (デフォルト) */
	align-items: center; /* 垂直方向中央揃え */
	justify-content: center; /* 中央に配置 */
	width: 100%;
	height: 100%;
	white-space: nowrap; /* PCビューでヘッダーが崩れるのを防ぐために改行を禁止 */
}

/* th内のテキストコンテナ（ヘッダー文字列）の設定 */
.cover-header-text {
	font-weight: bold;
	margin-left: 5px; /* PCビュー: アイコンとの間に隙間を追加 */
}

/* th.sortable がクリック可能であることを明示 */
#cover-song-table th.sortable {
	cursor: pointer;
	user-select: none;
}

/* 【ソートアイコンの配置】 */
.cover-sort-icon {
	display: inline-block;
	font-size: 13px;
	color: white;
}

/* アクティブなソートアイコンの色を強調 */
[data-sort-direction="asc"] .cover-sort-icon,
[data-sort-direction="desc"] .cover-sort-icon {
	color: white;
	font-size: 13px;
}

/* ---------------------------------- */
/* ヘッダー文字列のスタイリング要件 */
/* ---------------------------------- */

/* 1. 曲名ヘッダーの注意書きを非強調・縮小 */
/* 【★修正点 1/2】: PCビューでは非表示にする */
.cover-toggle-hint {
	font-weight: normal;
	font-size: 70%;
	line-height: 1.2;
	display: none; /* デフォルト（PCビュー）で非表示 */
}

/* 2. キー、最高音ヘッダーの文字列を縮小 (列幅節約) */
.cover-key-high-text {
	font-size: 0.9em;
}

/* ---------------------------------- */
/* テーブル本体の調整 */
/* ---------------------------------- */
#cover-song-table td {
	border: 1px solid #ddd;
	text-align: left;
	font-size: 14px;
	vertical-align: top;
}
/* カラム幅の設定 (PCビュー) */
.cover-title-col {
	width: 45%;
}
.cover-key-col {
	width: 10%;
	text-align: center;
}
.cover-high-col {
	width: 15%;
	text-align: center;
}
.cover-location-col {
	width: 30%;
}
/* 行の交互背景色とホバー効果 */
#cover-song-table tbody tr:nth-child(even) {
	background-color: #f9f9f9;
}
#cover-song-table tbody tr:hover {
	background-color: #e6f7ff;
}
/* PCビューではモバイル用の詳細要素を完全に非表示にする */
.cover-location-col-mobile {
	display: none;
}
.cover-pc-lyric-content {
	display: inline;
}

/* =========================テーブル (モバイルビュー) - @media query================================================ */
@media (max-width: 768px) {
	/* ------------------------------------------------------------- */
	/* 【★修正点 2/2】: モバイルでのみ toggle-hint を表示する */
	/* ------------------------------------------------------------- */
	.cover-toggle-hint {
		/* モバイルビューでは表示する (flexアイテムとして機能するよう display: block/inline-block 等を使用) */
		display: block !important;
	}

	/* ------------------------------------------------------------- */
	/* キーと最高音のヘッダーだけ縦並びにする */
	/* ------------------------------------------------------------- */

	/* キー (.cover-key-col) と最高音 (.cover-high-col) の Flexboxラッパーを縦並びにする */
	#cover-song-table .cover-key-col .cover-header-content-wrapper,
	#cover-song-table .cover-high-col .cover-header-content-wrapper {
		flex-direction: column !important; /* 縦並びを強制 */
		white-space: normal !important; /* コンテナ内での改行を許可 */
	}

	/* 縦並びになった要素の調整 */
	#cover-song-table .cover-key-col .cover-header-text,
	#cover-song-table .cover-high-col .cover-header-text {
		margin-left: 0; /* PCビューの横マージンをリセット */
		margin-top: 2px; /* アイコンとテキストの間に少し隙間を空ける */
		white-space: nowrap; /* テキスト自体が縦書きにならないように改行を禁止 */
	}

	/* モバイルでは th や td は display: table-cell のまま変更なし */
	#cover-song-table th,
	#cover-song-table td {
		display: table-cell !important;
		border: 1px solid #eee;
	}

	#cover-song-table tr.cover-song-row {
		border-bottom: 5px solid #f0f0f0;
	}
	/* 最後の列の右線を消す */
	#cover-song-table th:last-child,
	#cover-song-table td:last-child {
		border-right: none;
	}

	/* ------------------------------------------------------------- */
	/* カラム幅を調整し、合計が100%を超えないようにする */
	/* ------------------------------------------------------------- */

	/* 幅の割合を変更: 70% + 15% + 15% = 100% */
	#cover-song-table .cover-title-col {
		width: 70% !important; /* 曲名: 70% */
		font-size: 14px;
	}
	#cover-song-table .cover-key-col {
		width: 15% !important; /* キー: 15% */
		text-align: center;
	}
	#cover-song-table .cover-high-col {
		width: 15% !important; /* 最高音: 15% */
		text-align: center;
	}

	/* PC用の「最高音の場所」列 (4列目) を完全に非表示にする設定は変更なし */
	#cover-song-table th.cover-location-col,
	#cover-song-table td.cover-location-col .cover-pc-lyric-content {
		display: none !important;
	}
	#cover-song-table td.cover-location-col {
		width: 0 !important;
		padding: 0 !important;
		border: none !important;
	}

	/* モバイル専用詳細要素のスタイル */
	.cover-location-col-mobile {
		display: none; /* JSで制御するためデフォルトは非表示 */
		font-size: 13px;
		padding: 10px 0px 10px 0px;
	}

	.cover-detail-label {
		font-weight: bold;
		color: #333;
	}

	/* JSで動的に挿入される詳細行のスタイル */
	.cover-detail-row td {
		background-color: rgb(253, 253, 125);
		border: 1px solid #99c2ff;
		border-top: 3px solid #5d8aa8;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
	}

	/* モバイルビューでトグル可能であることを示すカーソル設定 */
	#cover-song-table tr.cover-song-row {
		cursor: pointer;
	}
}

/* ===========#karaoke-orig-div 専用のレイアウト設定===================================== */
/* スタイリング強化版CSS: Flexboxラッパーを使用し、ヘッダーのアイコンとテキストの配置を制御 */

/* ================共通スタイル================= */
*,
*::before,
*::after {
	box-sizing: border-box;
}
#karaoke-orig-div {
	font-family: "Inter", "Noto Sans JP", Arial, sans-serif; /* フォントを調整 */
	width: 100%;
	margin: 0 auto;
	box-sizing: border-box;
}
/* ==========フィルターコントロール (簡素化)================= */
#orig-filter-controls {
	display: flex;
	gap: 10px;
	margin-bottom: 10px;
	flex-wrap: wrap;
}
#orig-filter-controls fieldset {
	flex: 1;
	min-width: 200px;
	border: 1px solid #ccc;
	border-radius: 8px; /* 角を丸く */
	margin: 0;
	padding: 10px;
	background-color: #f7f7f7; /* 背景色を追加 */
}
#orig-filter-controls legend {
	font-weight: bold;
	color: #333;
	padding: 0 5px;
}
#orig-filter-controls label {
	display: inline-flex;
	align-items: center;
	margin-right: 15px;
	white-space: nowrap;
}

/* =====================テーブル (PCビュー) ====================== */
.orig-table-container {
	overflow-x: auto;
	border: 1px solid #ddd;
}
#orig-karaoke-table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
	cursor: pointer;
}

/* ヘッダーの設定: th要素自体はテーブルセルとしての役割を維持 */
#orig-karaoke-table thead th {
	position: relative;
	text-align: center;

	background-color: #5d8aa8;
	color: white;
	border: 1px solid #4a758e;
	padding: 8px; /* パディングを統一 */
}

/* 【PCビュー: Flexboxラッパーのスタイル (共通設定: 横並びがデフォルト)】 */
.orig-header-content-wrapper {
	display: inline-flex;
	flex-direction: row; /* PCビューは横並び (デフォルト) */
	align-items: center; /* 垂直方向中央揃え */
	justify-content: center; /* 中央に配置 */
	width: 100%;
	height: 100%;
	white-space: nowrap; /* PCビューでヘッダーが崩れるのを防ぐために改行を禁止 */
}

/* th内のテキストコンテナ（ヘッダー文字列）の設定 */
.orig-header-text {
	font-weight: bold;
	margin-left: 5px; /* PCビュー: アイコンとの間に隙間を追加 */
}

/* th.sortable がクリック可能であることを明示 */
#orig-karaoke-table th.sortable {
	cursor: pointer;
	user-select: none;
}

/* 【ソートアイコンの配置】 */
.orig-sort-icon {
	display: inline-block;
	font-size: 13px;
	color: white;
}

/* アクティブなソートアイコンの色を強調 */
[data-sort-direction="asc"] .orig-sort-icon,
[data-sort-direction="desc"] .orig-sort-icon {
	color: white;
	font-size: 13px;
}

/* ---------------------------------- */
/* ヘッダー文字列のスタイリング要件 */
/* ---------------------------------- */

/* 1. 曲名ヘッダーの注意書きを非強調・縮小 */
.orig-toggle-hint {
	font-weight: normal;
	font-size: 70%;
	line-height: 1.2;
	display: none; /* デフォルト（PCビュー）で非表示 */
}

/* 2. 最高音、最低音ヘッダーの文字列を縮小 (列幅節約) */
.orig-key-high-text,
.orig-key-low-text {
	font-size: 0.9em;
}

/* ---------------------------------- */
/* テーブル本体の調整 */
/* ---------------------------------- */
#orig-karaoke-table tbody tr.orig-song-row {
	position: relative;
}
#orig-karaoke-table td {
	border: 1px solid #ddd;
	text-align: left;
	font-size: 14px;
	vertical-align: top;
}
/* カラム幅の設定 (PCビュー) */
.orig-title-col {
	width: 35%;
}
.orig-high-col,
.orig-low-col {
	width: 10%;
	text-align: center;
}
.orig-location-col {
	width: 20% !important;
}

.orig-title-col {
	width: 40% !important;
}

/* 行の交互背景色とホバー効果 */
#orig-karaoke-table tbody tr:nth-child(even) {
	background-color: #f9f9f9;
}
#orig-karaoke-table tbody tr:hover {
	background-color: #e6f7ff;
}
/* PCビューではモバイル用の詳細要素を完全に非表示にする */
.orig-location-col-mobile {
	display: none;
}
.orig-pc-lyric-content {
	display: inline;
}

/* =========================テーブル (モバイルビュー) - @media query================================================ */
@media (max-width: 768px) {
	#karaoke-orig-div {
		margin-left: -10px;
		margin-right: -10px;
		width: calc(100% + 20px);
	}
	.orig-toggle-hint {
		display: block !important;
	}

	/* 最高音 (.orig-high-col) と最低音 (.orig-low-col) の Flexboxラッパーを縦並びにする */
	#orig-karaoke-table .orig-high-col .orig-header-content-wrapper,
	#orig-karaoke-table .orig-low-col .orig-header-content-wrapper {
		flex-direction: column !important; /* 縦並びを強制 */
		white-space: normal !important; /* コンテナ内での改行を許可 */
	}

	/* 縦並びになった要素の調整 */
	#orig-karaoke-table .orig-high-col .orig-header-text,
	#orig-karaoke-table .orig-low-col .orig-header-text {
		margin-left: 0; /* PCビューの横マージンをリセット */
		margin-top: 2px; /* アイコンとテキストの間に少し隙間を空ける */
		white-space: nowrap; /* テキスト自体が縦書きにならないように改行を禁止 */
	}

	#orig-karaoke-table th,
	#orig-karaoke-table td {
		display: table-cell !important;
		border: 1px solid #eee;
	}

	#orig-karaoke-table tr.orig-song-row {
		border-bottom: 5px solid #f0f0f0;
	}
	#orig-karaoke-table th:last-child,
	#orig-karaoke-table td:last-child {
		border-right: none;
	}

	/* カラム幅を調整 */
	#orig-karaoke-table {
		width: 100% !important;
		table-layout: fixed;
	}
	#orig-karaoke-table .orig-title-col {
		width: 50% !important;
		font-size: 14px;
	}
	#orig-karaoke-table .orig-high-col,
	#orig-karaoke-table .orig-low-col {
		width: 25% !important;
		text-align: center;
	}

	/* モバイルコンテナborder除去 for全幅 */
	.orig-table-container {
		border: none !important;
		border-top: 1px solid #ddd !important;
		border-bottom: 1px solid #ddd !important;
		padding: 0 !important;
		margin: 0 !important;
	}

	#orig-karaoke-table th,
	#orig-karaoke-table td {
		border-left: 1px solid #eee !important;
		border-right: 1px solid #eee !important;
	}

	/* モバイル専用詳細要素のスタイル */
	.orig-location-col-mobile {
		display: none; /* JSで制御するためデフォルトは非表示 */
		font-size: 13px;
		padding: 10px 0px 10px 0px;
	}

	/* 展開された行の詳細表示（カバーページと同様の方式） */
	#orig-karaoke-table tr.orig-song-row.expanded .orig-location-col-mobile {
		display: block;
		background-color: rgb(253, 253, 125);
		border: 1px solid #99c2ff;
		border-top: 3px solid #5d8aa8;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
	}

	.orig-detail-label {
		font-weight: bold;
		color: #333;
	}

	.orig-detail-row td {
		background-color: rgb(253, 253, 125);
		border: 1px solid #99c2ff;
		border-top: 3px solid #5d8aa8;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
	}

	/* モバイルビュー（767px以下）でのみトグル可能であることを示すカーソル設定 */
	#orig-karaoke-table tr.orig-song-row {
		cursor: pointer;
	}
}

/* PCビュー（768px以上）ではトグル機能を無効化 */
@media (min-width: 768px) {
	#orig-karaoke-table tr.orig-song-row {
		cursor: default;
	}
}

/* =========================トグルスイッチのスタイル========================= */
.switch-container {
	display: flex;
	align-items: center;
	justify-content: flex-end; /* 右寄せにする */
	padding: 5px 0;
}

.switch-label {
	margin-right: 10px;
	font-weight: normal;
	font-size: 0.9em;
}

.switch {
	position: relative;
	display: inline-block;
	width: 50px; /* 少し小さく */
	height: 28px; /* 少し小さく */
}

.switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	-webkit-transition: 0.4s;
	transition: 0.4s;
}

.slider:before {
	position: absolute;
	content: "";
	height: 20px; /* ボールを小さく */
	width: 20px; /* ボールを小さく */
	left: 4px;
	bottom: 4px;
	background-color: white;
	-webkit-transition: 0.4s;
	transition: 0.4s;
}

input:checked + .slider {
	background-color: #5d8aa8; /* テーマカラーに合わせる */
}

input:focus + .slider {
	box-shadow: 0 0 1px #5d8aa8;
}

input:checked + .slider:before {
	-webkit-transform: translateX(22px); /* 移動距離を調整 */
	-ms-transform: translateX(22px);
	transform: translateX(22px);
}

/* Rounded sliders */
.slider.round {
	border-radius: 28px;
}

.slider.round:before {
	border-radius: 50%;
}

/* 追加: 全幅強制修正 (全デバイス) */
#karaoke-orig-div {
	width: 100% !important;
	max-width: none !important;
	padding: 0 !important;
	margin: 0 !important;
	box-sizing: border-box !important;
}

.orig-table-container {
	width: 100% !important;
	max-width: none !important;
	padding: 0 !important;
	margin: 0 !important;
	box-sizing: border-box !important;
	overflow-x: auto;
}

#orig-karaoke-table {
	width: 100% !important;
	table-layout: fixed !important;
}

/* PCビューでのみ音域場所列を表示 */
@media (min-width: 769px) {
	.orig-location-col-high,
	.orig-location-col-low {
		display: table-cell !important;
	}
}

/* モバイルビューで音域場所列を非表示 (詳細なセレクタで上書き) */
@media (max-width: 768px) {
	#orig-karaoke-table thead th.orig-location-col-high,
	#orig-karaoke-table thead th.orig-location-col-low {
		display: none !important;
		width: 0 !important;
		height: 0 !important;
		padding: 0 !important;
		border: none !important;
	}
}