/* ベース設定 */
html {
  height: auto;
  min-height: 100%;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  font-family: "Noto Sans JP", sans-serif;
  background-color: #1e1e1e;
  /* color: #f1f1f1; */
}
body {
  margin: 0;
}

h1,
h2,
h3,
p,
label,
span {
  color: #f1f1f1;
}

ul {
  padding: 0;
}

/*****************/
/* ライトモード用 */
/*****************/
html.light-mode {
  background-color: #f8f9fa !important;
  color: #333 !important;
}
/* body.light-mode {
  background-color: #f8f9fa !important;
  color: #333 !important;
} */

h1.light-mode,
h2.light-mode,
h3.light-mode,
.light-modep,
label.light-mode,
span.light-mode {
  color: #333 !important;
}

html.light-mode h1,
html.light-mode h2,
html.light-mode h3,
html.light-mode p,
html.light-mode label,
html.light-mode span {
  color: #333;
}

html.light-mode .card {
  background-color: #f9f9f9;
}

html.light-mode input[type="text"],
html.light-mode input[type="number"],
html.light-mode select {
  background-color: #f8f9fa;
  color: #333;
  border: 1px solid #ccc;
}

/* タイトル */
html.light-mode .pageTitleContainer {
  background-color: #f8f9fa;
  color: #333;
  border-bottom: none;
  box-shadow: 0 1px 12px rgba(0, 0, 0, 0.15);
}

/* コンテナ */
html.light-mode .container {
  background: #fff;
}

html.light-mode .helpBtn {
  background-color: #f1f1f1;
  color: #333;
  border: 1px solid #d1d1d1;
}

html.light-mode #resultList li {
  background-color: #ffffff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

html.light-mode .select2-container .select2-dropdown {
  background-color: #f8f9fa;
}

html.light-mode .select2-container .select2-results__option {
  color: #333;
  padding: 8px 12px;
  line-height: 1.4;
}

/* 曲選択は2段表示（ライトモード） */
html.light-mode
  .select2-container
  .select2-results__option[data-select2-id*="selectSong"] {
  white-space: pre-line;
  min-height: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 曲選択のoption全体のフォントサイズ（ライトモード） */
html.light-mode
  .select2-container
  .select2-results__option[data-select2-id*="selectSong"] {
  font-size: 0.9rem;
}

html.light-mode
  span.select2-container--default
  .select2-selection--single
  .select2-selection__rendered {
  color: #333;
  /* height: 100%; */
  /* line-height: 100%; */
  /* padding: 0.6rem; */
}

html.light-mode span .select2-selection.select2-selection--single {
  background-color: #f1f1f1;
  color: #333;
  border-radius: 8px;
  height: 100%;
}

/* レンジスライダー */
html.light-mode .inputRange {
  border: 2px solid #333333a3;
}

/* アコーディオンメニュー */
html.light-mode .accordion-header {
  color: #333;
}
/* アコーディオンメニューのボタン */
html.light-mode .accordionArrow {
  background-color: #f1f1f1;
}
html.light-mode .accordionArrow::before {
  border-left: 3px solid #444;
  border-bottom: 3px solid #444;
}

/* チップス */
html.light-mode .key-tips {
  background-color: #f1f1f1;
  color: #333;
}

html.light-mode .key-tips summary {
  color: #ffaf14;
}

/* 検索結果 */
html.light-mode #resultSection #result {
  background: #ffffff;
  color: #333;
}

/* ボトムナビ */
html.light-mode .bottomNavContainer {
  background-color: #f1f1f1;
  border-top: 1px solid #ccc;
}

html.light-mode .toggleSwitchContainer {
  color: #333;
}

html.light-mode .bottomNavTop a {
  color: #1e1e1e;
}

html.light-mode .nav-item {
  color: #1e1e1e;
}

html.light-mode .nav-item.active {
  color: white;
  background: linear-gradient(135deg, #1e7a95, #58bcd1);
}

html.light-mode .bottomNavLinkWraper {
  background-color: white;
  border: 1px solid #d1d1d1;
}

/* disabled */
html.light-mode select:disabled {
  background-color: #f1f1f1;
}
html.light-mode
  span.select2-container--default.select2-container--disabled
  .select2-selection--single {
  background-color: #f1f1f1;
}

/* modal */
html.light-mode .modal h2 {
  color: #fff;
}

/* TuneFinder */
html.light-mode #resultSection {
  color: #333;
}

html.light-mode .result-key {
  color: #666;
}

/* モーダル */
html.light-mode #closeModal {
  color: #333;
  border: 1px solid #333;
}
html.light-mode .modal-content {
  background: linear-gradient(135deg, #95d0cc, #bce4e0);
}

html.light-mode .modalTitle h2 {
  color: #4b3f72;
}
html.light-mode .modalStep {
  background: rgba(255, 255, 255, 0.6);
}
html.light-mode #helpModal .modal-content .modalStep .modalStepText {
  color: #333;
}
html.light-mode .modalStepNumber {
  background: #4b3f72;
  color: white;
}
html.light-mode .modalStepEnd {
  color: #6d6d6d;
}

html.light-mode .textRed {
  color: #ff7eb9;
}

html.light-mode .searchButton {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  background: linear-gradient(135deg, #1e7a95, #58bcd1);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
html.light-mode #resultSection button {
  background: linear-gradient(135deg, #1e7a95, #58bcd1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
html.light-mode .borderFrame::before {
  background-color: white;
  color: #333;
}

html.light-mode .errorMessage {
  color: #ff4d4f;
}

/* index */
html.light-mode .index-accordion.accordion-content.open {
  background: #f1f1f1;
}
html.light-mode .current-value {
  color: #333;
}

/* ライトモード用のキー表示カード */
html.light-mode .key-display-card {
  background: linear-gradient(135deg, #ffffff 0%, #f0f4ff 100%) !important;
  color: #1a202c !important;
  border: 1px solid rgba(59, 130, 246, 0.3) !important;
  box-shadow: 0 3px 12px rgba(59, 130, 246, 0.2) !important;
}

html.light-mode .key-display-title {
  opacity: 0.7 !important;
  color: #4a5568 !important;
}

html.light-mode .key-display-value {
  background: rgba(59, 130, 246, 0.15) !important;
  color: #333;
  border: 1px solid rgba(59, 130, 246, 0.2) !important;
}

/* KaraokeTune */
html.light-mode .key-tips li {
  background: white;
  color: #333;
}

/*---------------------------*/
/* ライトモード終わり */
/*---------------------------*/

/******************/
/* 全画面共通コンテナ */
.container {
  width: 85%;
  max-width: 480px;
  margin: 0 auto;
  padding: 1rem;
  margin-top: 90px;
  margin-bottom: 90px;
  background: #2b2f3a;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

@media screen and (max-height: 800px) {
  .keyAdjustContainer {
    margin-bottom: 140px;
  }
}

/* カードUI */
.card {
  background-color: #2b2b2b;
  border-radius: 12px;
  padding: 1.2rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* 見出し */
header h1 {
  font-size: 1.5rem;
  text-align: center;
  margin-bottom: 1.5rem;
}

input[type="text"] {
  box-sizing: border-box;
}

/* 入力とボタン */
input[type="text"],
input[type="number"],
select {
  width: 100%;
  padding: 0.6rem;
  margin-top: 0.3rem;
  margin-bottom: 0.8rem;
  border: 1px solid #aaa;
  border-radius: 8px;
  font-size: 1rem;
  background-color: #3a3a3a;
  color: #ffffff;
}

/* ボタン */
button {
  padding: 0.6rem;
  font-size: 1rem;
  border: none;
  border-radius: 8px;
  background: linear-gradient(135deg, #2f3d56, #6a7ba1);
  color: white;
  cursor: pointer;
  width: 100%;
  margin-top: 0.5rem;
  transition: background-color 0.2s ease;
}

/* タイトル */
.pageTitleContainer {
  margin-top: 0;
  border-bottom: 1px solid #333;
  padding: 12px;
  background-color: #181818;
  box-shadow: 0 1px 12px rgba(0, 0, 0, 0.15);
  position: fixed;
  width: 100%;
  z-index: 100;
  top: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-around;
  box-sizing: border-box;
}
.pageTitleContainer h1 {
  margin: 0;
}
.pageTitleContainer .pageTitleLeft {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}
.pageTitleContainer .pageTitleRight {
  display: flex;
  align-items: center;
  width: 80px;
  color: #fff;
}
.pageTitleRight p {
  margin: 0;
}

/* ヘルプボタン */
.helpBtn {
  margin-left: 8px;
  font-size: 14px;
  border: none;
  background: #444;
  color: #fff;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.modal {
  display: none;
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
}
.modal li {
  list-style: none;
}

.modal-content {
  background: linear-gradient(135deg, #2f3d56, #6a7ba1);
  color: #fff;
  margin: 5% auto;
  padding: 20px;
  border-radius: 16px;
  width: 80%;
  max-width: 400px;
  border: 2px solid rgb(182 234 255 / 50%);
  /* 動的な高さ設定 */
  max-height: var(--modal-max-height, calc(100vh - 300px));
  overflow-y: auto; /* 中身がはみ出したら縦スクロール */
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch; /* iOSでスムーズスクロール */
  position: relative;

  /* iPhone SE等の小さい画面用 */
  @media screen and (max-height: 667px) {
    max-height: calc(100vh - 230px);
  }

  /* 非常に小さい画面用 */
  @media screen and (max-height: 600px) {
    max-height: calc(100vh - 230px);
  }
}

.modalTitle h2 {
  font-size: 1.3rem;
  letter-spacing: 0.5px;
}
.modalTextArea {
  position: relative;
}

#helpModal .modal-content .modalStep .modalStepText {
  color: #f1f1f1;
}

.modalStep {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  color: white;
  background: rgba(255, 255, 255, 0.05);
  padding: 10px 14px;
  border-radius: 12px;
}
/* ③番だけ番号とテキストを上揃え */
/* .modalStep:nth-child(3) {
  align-items: flex-start;
} */
.modalStepNumber {
  display: inline-block;
  font-size: 0.9rem;
  width: 2em;
  height: 2em;
  line-height: 2em;
  text-align: center;
  border-radius: 50%;
  background: #fff; /* アクセントカラー */
  color: #333;
  font-weight: bold;
  margin-right: 10px;
  flex-shrink: 0;
}
.modalStepText {
  flex: 1;
  word-break: break-word;
}
.modalStepEnd {
  padding-bottom: 100px;
  color: #ddd;
}
.modalStepAnime {
  position: absolute;
  bottom: 0;
  right: -35px;
}
.modalStepAnime video {
  width: 200px;
}

.close {
  font-size: 20px;
  height: 32px;
  width: 32px;
  bottom: 30px;
  left: 50%;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  cursor: pointer;
  z-index: 9999;
  transform: translateX(-50%);
}

/* 上下補正ボタン */
.adjust-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}

.form-group {
  width: 100%;
}

.adjust-controls button {
  width: 2.5rem;
  flex-shrink: 0;
}

.adjust-options {
  margin-top: 12px;
}
.adjust-row {
  margin-bottom: 8px;
}

.adjust-section {
  display: none;
  margin-top: 10px;
}

.adjust-section.open {
  display: block;
}

.adjust-input {
  margin: 0; /* ← 余計な margin を除去 */
  padding: 6px 8px; /* ← 必要に応じて調整（高さや余白） */
  font-size: 16px;
  border-radius: 4px;
  border: none;
  background-color: #333;
  color: #fff;
  text-align: center;
  width: 60px;
  box-sizing: border-box;
}

.adjust-controls input[type="number"] {
  flex: 1;
  margin-bottom: 0;
  margin-top: 0.5rem;
}

/* セレクトエリア */
.select-group {
  margin-bottom: 1rem;
}

/* 結果リスト */
#resultList li.result-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* background-color: #3a3a3a; */
  background: #2b2f3a;
  padding: 1rem;
  margin-bottom: 0.8rem;
  border-radius: 12px;
  flex-wrap: wrap; /* 小さい画面でも崩れにくい */
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* 左側：曲名・アーティスト名 */
.result-info {
  display: flex;
  flex-direction: column;
  /* max-width: 50%; */
  flex: 1;
  min-width: 0;
}
/* 曲名太字 */
.result-title {
  font-weight: bold;
  font-size: 1rem;
  color: #fff;
}
/* アーティスト名 */
.result-artist {
  font-size: 0.85rem;
  color: #ccc;
}

/* キー情報 */
.result-key {
  font-size: 0.75rem;
  color: #999;
  display: block;
  margin-top: 2px;
  text-align: left;
  flex-shrink: 0;
}

/* 中央：リンク */
.result-links {
  width: 100px;
  text-align: right;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.result-links a {
  margin: 0 6px;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nicoIcon {
  height: 18px;
  width: 18px;
  object-fit: contain;
  display: block;
}

/* 右側：キー・リンク */
.result-extra {
  display: flex;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: #eee;
  flex-shrink: 0;
  align-items: center;
  max-width: 50%;
}

/* 入力欄が親の幅を超えないように */
#songInput {
  width: 100%;
  box-sizing: border-box;
}

.bottom-nav button {
  margin-top: 0;
}

/* select2 */
span.select2 {
  margin-top: 0.3rem;
  margin-bottom: 0.8rem;
  height: 40px;
}

/* 文字の上の要素 */
span .select2-selection.select2-selection--single {
  height: 100%;
  border-radius: 8px;
  background: #232730;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* テキスト表示 */
span.select2-container--default
  .select2-selection--single
  .select2-selection__rendered {
  color: #fff; /* 白色に変更 */
  /* height: 100%; */
  line-height: 100%;
  padding: 0.6rem;
}

/* テキスト横の矢印 */
span.select2-container--default
  .select2-selection--single
  .select2-selection__arrow {
  height: 100%;
}

span.select2-container--default
  .select2-selection--single
  .select2-selection__arrow
  b {
  border-color: #f1f1f1 transparent transparent transparent;
}

/* Select2 の表示部分（選択中のエリア） */
.select2-container .select2-selection--single {
  height: auto; /* 高さをテキストに合わせる */
  border: none;
  border-radius: 8px;
  background-color: #3a3a3a;
  color: #ffffff;
  font-size: 1rem;
}

/* 検索ボックス */
.select2-container--default .select2-search--dropdown .select2-search__field {
  font-size: 1rem;
  padding: 0.6rem;
}

/* 選択中テキストの位置合わせ */
.select2-container .select2-selection__rendered {
  color: #ffffff;
  line-height: 1.4;
  padding-left: 0; /* 余分な左paddingをなくす */
}

/* 矢印部分の調整 */
.select2-container .select2-selection__arrow {
  height: 100%;
}

/* ドロップダウンの背景 */
.select2-container .select2-dropdown {
  background-color: #3a3a3a;
  border: none;
}

/* ドロップダウンの各項目（基本） */
.select2-container .select2-results__option {
  color: #ffffff;
  padding: 5px 12px;
  line-height: 1.4;
}

/* 曲選択は2段表示 */
.select2-container .select2-results__option[data-select2-id*="selectSong"] {
  white-space: pre-line;
  min-height: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 曲選択のoption全体のフォントサイズ */
.select2-container .select2-results__option[data-select2-id*="selectSong"] {
  font-size: 0.9rem;
}

/* 選択中 or hover中の背景色 */
.select2-container .select2-results__option--highlighted {
  background-color: #555555;
}

/* アコーディオンメニュー */
.accordion {
  border-radius: 6px;
  overflow: hidden;
  margin-top: 15px;
  margin-bottom: 0.8rem;
}

.accordion-header {
  cursor: pointer;
  color: #fff;
  transition: background-color 0.3s;
  display: flex;
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out, padding 0.3s ease-out;
}

.accordion-content.open {
  /* 最大の大きさに合わせるのでmax-height */
  max-height: 260px;
}

/* indexのみ */
.index-accordion.accordion-content.open {
  margin-top: 0.3rem;
  padding: 1rem;
  border-radius: 8px;
  background: #232730;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* レンジスライダー */
.rangeLabels {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
}

.rangeLabel {
  font-size: 14px;
  color: #ccc; /* ダークテーマ用に淡いグレー */
  white-space: nowrap;
}

.slider-container {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.inputRange {
  appearance: none;
  width: 100%;
  height: 15px;
  border: 1px solid #ffffff;
  border-radius: 9999px;
  background: linear-gradient(90deg, #4ec6ff 30%, #f5f5f5 30%);
  cursor: pointer;
}

/* ツマミ：Chrome, Safari, Edge用 */
.inputRange::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border: 2px solid #ffffff;
  border-radius: 9999px;
  background: #06b6d4;
  box-shadow: none;
}

/* ツマミ：Firefox用 */
.inputRange::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border: 2px solid #ffffff;
  border-radius: 9999px;
  box-shadow: none;
}

input[type="range"] {
  flex: 1;
  accent-color: #007bff;
}

.step-btn {
  background: #4b5563;
  border: none;
  font-size: 1.2rem;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0;
}

.step-btn:hover {
  background: #ddd;
}

.current-value {
  margin-top: 4px;
  font-size: 0.9rem;
  color: #fff;
  text-align: center;
}

/* 検索結果 */
#resultSection #result {
  padding: 1rem;
  background-color: #2b2f3a;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  border-radius: 12px;
  flex-wrap: wrap;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
#resultSection #result #resultText {
  padding: 0 5px;
  border-radius: 6px;
  font-weight: bold;
}

/* プラス値 */
#resultSection #result #resultText.plusText {
  color: #4a90e2;
  background: rgba(74, 144, 226, 0.1);
}

/* マイナス値 */
#resultSection #result #resultText.minusText {
  color: #e57373;
  background: rgba(229, 115, 115, 0.1);
}

/* 普通 */
#resultSection #result #resultText.neutralText {
  color: #90a4ae;
  background: rgba(144, 164, 174, 0.1);
}

/* selectのdisabled */
select:disabled {
  background-color: #3a3a3a;
}
span.select2-container--default.select2-container--disabled
  .select2-selection--single {
  background-color: #3a3a3a;
}

/* ------------ */
/* ボトムナビ */
/* ------------ */

/* ボトムナビ全体 */
.bottomNavContainer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #181818;
  padding: 0.5em 0;
  border-top: 1px solid #333;
  z-index: 999;
}

.bottomNav {
  display: flex;
  justify-content: space-around;
  width: 100%;
}
.bottomNav button {
  margin-top: 0;
}

/* ボトムナビの上 */
.bottomNavTop {
  width: 100%;
}
.bottomNavTop a {
  text-align: center;
  color: white;
  text-decoration: none;
}

.toggleSwitchContainer {
  display: flex;
  color: #fff;
}
.toggleSwitchContainer p {
  margin: 0;
}

/* ボトムナビのアイコンの親要素 */
/* .bottomNav .bottomNavLinkWraper {
  background-color: #3a3a3a;
  position: relative;
  padding: 0 45px;
  border-radius: 5px;
  border: 1px solid #595959;
} */

.bottomNavLinkWraper a {
  position: absolute;
  inset: 0;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.bottomNavIcon {
  margin: 0;
  font-size: 16px;
}

/* トグルスイッチの見た目 */
.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 28px;
  margin-left: 10px;
}

.switch input {
  display: none;
}

.slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: #555;
  border-radius: 28px;
  transition: background-color 0.3s;
}

.slider::before {
  content: "";
  position: absolute;
  height: 22px;
  width: 22px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  border-radius: 50%;
  transition: transform 0.3s;
}

input:checked + .slider {
  background-color: #4caf50;
}

input:checked + .slider::before {
  transform: translateX(22px);
}

/* ボトムナビの下 */
.nav-item {
  background: none;
  border: none;
  color: #eee;
  font-size: 0.8rem;
  padding: 0.5em 0.7em;
  cursor: pointer;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  text-decoration: none;
}
/* アイコン */
.nav-item i {
  font-size: 18px;
  height: 15px;
}
/* ラベル */
.nav-item span {
  font-size: 10px;
  margin-top: 7px;
}

.nav-item.active {
  color: white;
  background: linear-gradient(135deg, #2f3d56, #6a7ba1);
}

/* ------------ */
/* ボトムナビ */
/* ------------ */

/**************************/
/* キー類似検索 */
/**************************/
#selectSongKey {
  margin: 20px 0;
}

/* 鍵盤表示 */
.piano-keyboard {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  margin-bottom: 12px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow-x: auto;
  min-height: 100px;
  position: relative;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.piano-keyboard::-webkit-scrollbar {
  height: 6px;
}

.piano-keyboard::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 3px;
}

.piano-keyboard::-webkit-scrollbar-thumb {
  background: rgba(102, 126, 234, 0.5);
  border-radius: 3px;
}

.piano-keyboard::-webkit-scrollbar-thumb:hover {
  background: rgba(102, 126, 234, 0.7);
}

.piano-key {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 2px;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.piano-key.white {
  width: 36px;
  height: 80px;
  background: #ffffff;
  border: 1px solid #ccc;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding: 6px 0;
  position: relative;
}

.piano-key.black {
  width: 24px;
  height: 55px;
  background: #333;
  border-radius: 0 0 4px 4px;
  margin-left: -12px;
  margin-right: -12px;
  z-index: 2;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding: 6px 0;
  position: relative;
}

.piano-key.highlighted {
  background: linear-gradient(135deg, #a8c8ec 0%, #b8a8e8 100%);
  box-shadow: 0 0 6px rgba(168, 200, 236, 0.4);
  transform: scale(1.02);
}

.piano-key.black.highlighted {
  background: linear-gradient(135deg, #8bb3e8 0%, #9a8be3 100%);
}

.piano-key-label {
  font-size: 10px;
  font-weight: 600;
  color: #666;
  text-align: center;
  line-height: 1;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
}

.piano-key.black .piano-key-label {
  color: #ccc;
}

.piano-key.highlighted .piano-key-label {
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.piano-key.black.highlighted .piano-key-label {
  color: white;
}

/* ライトモード用の鍵盤 */
html.light-mode .piano-keyboard {
  background: rgba(0, 0, 0, 0.05);
}

html.light-mode .piano-key.white {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

html.light-mode .piano-key.black {
  background: #1f2937;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

html.light-mode .piano-key.highlighted {
  background: linear-gradient(135deg, #93c5fd 0%, #60a5fa 100%);
  box-shadow: 0 0 6px rgba(147, 197, 253, 0.4);
}

html.light-mode .piano-key.black.highlighted {
  background: linear-gradient(135deg, #7bb3f0 0%, #4f9ef7 100%);
}

html.light-mode .piano-key-label {
  color: #6b7280;
}

html.light-mode .piano-key.highlighted .piano-key-label {
  color: white;
}

.key-display-card {
  display: block;
  background: linear-gradient(135deg, #667eea6e 0%, #764ba21c 100%);
  color: white;
  padding: 12px 16px;
  border-radius: 10px;
  box-shadow: 0 3px 12px rgba(102, 126, 234, 0.3);
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  transition: all 0.2s ease;
  width: 100%;
  max-width: 100%;
  text-align: center;
  box-sizing: border-box;
}

.key-display-title {
  font-size: 12px;
  opacity: 0.9;
  font-weight: 500;
  margin-bottom: 6px;
  line-height: 1.2;
  text-align: left;
}

.key-display-value {
  font-size: 14px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.2);
  padding: 6px 10px;
  border-radius: 6px;
  text-align: center;
  display: block;
  word-break: break-all;
  line-height: 1.3;
  min-height: 20px;
}

#selectSongKeyLabel:empty {
  display: none;
}

#resultSection {
  display: none;
  color: #f1f1f1;
}
#resultSection button {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
#resultHeader {
  display: flex;
  margin-top: 20px;
  margin-bottom: 8px;
  align-items: center; /* 縦中央揃え */
  gap: 8px; /* h2 と件数の間の余白 */
}

#resultHeader h2 {
  margin: 0;
}

#resultHeader .resultCount {
  font-size: 1rem;
  color: #f0c674; /* 件数だけ目立たせる色 */
}

.index-song {
  margin-top: 15px;
}

/**************************/
/* キー調整シミュレーション */
/**************************/
#referenceSection {
  margin-top: 15px;
}
#referenceSection::before {
  content: "歌える曲";
  /* font-weight: bold;
  padding: 3px 10px;
  position: absolute;
  top: -15px;
  background-color: #fff; */
}
#referenceSection.borderFrame {
  border-color: rgb(28, 180, 211);
}

.keyAdjustContainer #targetSection::before {
  content: "歌いたい曲";
}

#targetSection.borderFrame {
  border-color: rgb(211 148 28);
}

.key-tips {
  position: fixed;
  bottom: 70px;
  left: 0;
  right: 0;
  background-color: #222;
  color: #eee;
  padding: 8px;
  font-size: 0.95rem;
}
/* summary 部分の見た目 */
.key-tips summary {
  font-size: 1.1rem;
  font-weight: bold;
  color: #f0c674;
  cursor: pointer;
  outline: none;
  max-width: 500px;
  margin: 0 auto;
}

/* summary のデフォルト矢印を白く */
.key-tips summary::-webkit-details-marker {
  color: #fff;
}

/* 開閉アニメーション用 */
.key-tips[open] ul {
  animation: fadeIn 0.2s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.key-tips ul {
  list-style: none;
  padding-left: 0;
}
.key-tips li {
  margin-bottom: 0.5em;
  max-width: 500px;
  margin: 0 auto;
  background-color: rgba(255, 255, 255, 0.05);
  color: white;
  margin-bottom: 0.6em;
  padding: 10px 14px;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  gap: 8px;
}
/**************************/
/* KaraokeTune */
/**************************/
.keyAdjustContainer #targetSection {
  margin-top: 35px;
}

.borderFrame .accordion {
  margin-top: 0;
}

/**************************/
/* UtaiteTune */
/**************************/
#utaiteSection {
  margin-top: 15px;
}

#resultSection #utaiteResult {
  padding: 1rem;
  background-color: #ffffff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
}

/**************************/
/* キーの範囲検索 */
/**************************/
#piano-container {
  position: relative;
}

.piano {
  position: relative;
  display: inline-block;
  padding-top: 0;
}

/* .key {
  position: relative;
  border: 1px solid #000;
} */

.key.white {
  width: 150px;
  height: 35px;
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 5px;
  padding-left: 100px;
}

.key.black {
  position: absolute;
  width: 60px;
  height: 35px;
  background: #000;
  border: 1px solid #333;
  z-index: 2;
  color: white;
  text-align: center;
}

.label-en {
  font-size: 10px;
  color: #000;
}

.label-jp {
  font-size: 14px;
  color: #000;
}

.white.selected {
  background: #4caf50;
}

.black.selected {
  background: #4caf50;
}

.searchButton {
  width: 100%;
  color: white;
  border: none;
  padding: 12px;
  font-size: 16px;
  border-radius: 25px;
  cursor: pointer;
  margin: 35px 0;
  font-weight: bold;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

#searchBtn {
  margin-top: 20px;
  padding: 10px 20px;
  font-size: 16px;
  background: #45a049;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/**************************/
/* デバッグ用 */
/**************************/
#debugPage div h1 {
  color: white;
}
.debugPage {
  color: white;
  list-style: none;
}

/**************************/
/* その他 */
/**************************/
.marginTop15 {
  margin-top: 15px;
}

.borderFrame {
  border: 2px solid #333;
  border-radius: 16px;
  padding: 20px;
  position: relative;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
.borderFrame::before {
  /* content: "title"; 各自で埋める*/
  font-weight: bold;
  padding: 3px 10px;
  position: absolute;
  top: -15px;
  background-color: #2b2f3a;
  color: white;
}

/* 文字装飾 */
.textRed {
  color: #ff7eb9;
  font-weight: bold;
}
.accordionArrow {
  display: flex;
  width: 25px;
  border-radius: 50%;
  background-color: #4b5563;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-left: 5px;
  position: relative;
}
.accordionArrow::before {
  content: "";
  display: block;
  width: 5px;
  height: 5px;
  border-left: 3px solid #e5e7eb;
  border-bottom: 3px solid #e5e7eb;
  transform: rotate(-45deg);
}
.accordionArrow.down::before {
  transform: rotate(-45deg);
}
/* 上向き */
.accordionArrow.up::before {
  transform: rotate(135deg);
}

/* エラーメッセージ */
.errorMessage {
  display: none;
  color: #ff4d4f;
  font-size: 0.875rem;
  margin-top: 4px;
  min-height: 1em;
}
.form-group.error {
  border: 2px solid #ff4d4f;
  background-color: #fff0f029;
  border-radius: 6px;
}

.show {
  display: block;
}

/* トースト通知 */
.toast {
  position: fixed;
  bottom: 50%;
  left: 50%;
  width: 65%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 9999;
}
.toast.show {
  opacity: 1;
}

/* iPhoneでダブルタップ拡大を無効化 */
* {
  touch-action: manipulation;
}