/*=========================================
        1. カラー変数・基本設定
========================================= */
:root {
  --c-bg: #f8f9f9;
  --c-bg-sub2: #F0F2F3;/* グレー */
  --c-bg-sub: #f5f5f5;

  --c-kaida: #4DD7E3;

  /* 未選択時のデフォルトカラー */
  --c-main-light:#1EC4EE;
  --c-main-dark:#0068AF;
  --c-main-darker:#009B52;
  --c-main-gra:#009B52;
  --c-main-waku:#1EC4EE;
  --c-sub-hatena:#FA7820;
  --c-sub-pd:#FA7820;
  --c-sub-line:#E80132;
  --c-text-liver:#FFFFFF;
  --c-text-gra:#FFFFFF;
  --c-text-sb:#FFFFFF;
  --c-main-light-shadow: rgba(0,0,0,0.2);
  --c-main-light-bg:rgba(30, 196, 238, 0.1);

  --c-text-main: #030A11;
  --c-text-sub2: #616568;
  --c-text-sub: #6b7a80;
  
　--space-section: 80px;
  --space-card: 32px;
  }
   
 @media (max-width: 767px) {
  :root {
    --space-section: 40px;
    --space-card: 20px;
  }
}
/* ===== ページ全体 ===== */
body { 
  font-family:sans-serif;
  color:var(--c-text-main);
  line-height: 1.7;
  background:var(--c-main-light-bg); 
  margin: 0;
  overflow-x: hidden;
    position: relative;
    width: 100%;
}   

/* =========================================
    2. レイアウト（ヘッダー・ヒーロー・メイン）
 ========================================= */   
/* =====ヘッダー ===== */    
.site-header {
  backdrop-filter: blur(8px);
  background:#030A11;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  color:#FFFFFF; 
}
.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center; 
}
.cta-group {
  margin-left: auto;    /* これでグループ全体を右端に寄せる */
  display: flex;
  gap: 10px;            /* ボタン同士の隙間（お好みで調整） */
  align-items: center;
}
.cta-button {
  background: #FFFFFF;
  color:var(--c-kaida);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 14px;
  text-decoration: none;
  font-weight: 600;
}
.cta-button1 {
  background:#FFF;
  color:#030A11;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 14px;
  text-decoration: none;
  font-weight: 600;
  margin-left: auto;
}

/* h1そのものの装飾を消して、親要素(.logo)に従わせる */
.logo h1 {
  margin: 0;
  padding: 0;
  font-size: inherit;   /* 親要素(.logo)で設定したサイズを引き継ぐ */
  font-weight: inherit; /* 親要素(.logo)の太さを引き継ぐ */
  line-height: inherit;
}

/* リンクの装飾を消す */
.logo h1 a {
  text-decoration: none; /* 下線を消す */
  color: inherit;        /* 文字の色を親要素に合わせる */
  display: block;        /* クリックできる範囲を広げる */
}
 @media (max-width: 768px) {
  .header-inner {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 8px;
    padding: 6px 12px;
  }
  .logo {
    grid-column: 1 / -1; /* 1行目を全部使う */
    white-space: nowrap;
    line-height: 1.2;
    font-size: 16px; /* まだ大きければ 15px */
  }
   
  .cta-button {
    padding: 6px 10px;
    font-size: 13px;
  }
}
   .cta-button1 {
    padding: 6px 10px;
    font-size: 13px;
     margin-left: auto;
  }
}

/* ===== ヒーロー画像・メイン共通設定 ===== */
.hero { width: 100%; }
.hero img { width: 100%; height: auto; display: block; }
.main { width: 100%; } /* 基本は100%にしておく */

/* PC版（画面が広い時だけ制限をかける） */
@media (min-width: 769px) {
    .hero { width: 50vw; margin: 0 auto; }
    .main { width: 70vw; margin: 0 auto; }
}

/* スマホ版（画面が狭い時の微調整） */
@media (max-width: 768px) {
  .main {
    width: 96%;      /* 幅をしっかり固定 */
    margin: 0 auto;  /* 真ん中に寄せる */
    padding: 0;      /* sectionの余白をリセットしてwidthで制御 */
    max-width: 100vw;
    overflow-x: hidden;
    padding-left: 10px;  /* 左右に最低限の余白 */
    padding-right: 10px;
    box-sizing: border-box;
  }
}
/*余白設定：隙間を消す */ 
section {padding: var(--space-section) 16px;box-sizing: border-box;}
section.hero {padding: 0;}
section.hero + section.main {padding-top: 0;}
    

 /* =========================================
      4. 見出し・ヒント（吹き出し）
========================================= */  
h2 {
  display: flex;
  align-items: center; /* 縦中央揃え */
  gap: 6px;            /* アイコンと文字の間隔 */
  color: var(--c-main-darker);
  margin-bottom: 2px !important; /* 見出しのすぐ下の余白を固定 */
}
h2::before {
  content: "";
  display: block;
  width: 30px;
  height: 30px;
  background-image: url('../images/nijimark.png');
  background-size: contain;
  background-repeat: no-repeat;
}
   
h2 .hint {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: 4px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: bold;
  background: var(--c-sub-hatena);
  color: var(--c-text-sb);
  cursor: help;
}

/* 吹き出し本体 */
.hint-text {
  position: absolute;
  top: 50%;
  left: calc(100% + 8px);
  transform: translateY(-50%);
  background:#FFF;
  border: 2px solid var(--c-sub-hatena);
  color: var(--c-main-dark);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  font-size: 11px;
  line-height: 1.5;
  padding: 6px 8px;
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 9999;
  white-space: normal;     /* 折り返し可能 */
  width: auto;             /* 自然に横幅を取る */
  min-width:300px;        /* 最低限の横幅を確保 */
  max-width: 600px;       /* 横幅の上限を大きくする */
  }  
@media (max-width: 768px) {
  h2 {font-size: 16px; gap: 4px; }
  h2::before {width: 20px; height: 20px; }
  .hint-text {font-size: 8px;}
}
/* 吹き出しのしっぽ */
.hint-text::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  transform: translateY(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: transparent var(--c-sub-hatena) transparent transparent;
}

/* ホバーで表示 */
.hint:hover .hint-text {
  opacity: 1;
}
/* PCのみホバーで表示（マウスがあるデバイスのみ） */
@media (hover: hover) {
  .hint:hover .hint-text {
    opacity: 1;
    pointer-events: auto;
  }
}

/* JSで「active」クラスがついた時に表示（スマホ・PC共通） */
.hint.active .hint-text {
  opacity: 1;
  pointer-events: auto;
}   
@media (max-width: 768px) {
   .hint-text { 
  min-width:150px;        /* 最低限の横幅を確保 */
  max-width: 90vw;       /* 横幅の上限を大きくする */}
  h2:has(+ #unitButtons) .hint-text,
h2:has(+ #specialUnitButtons) .hint-text {
  min-width:120px;        /* 最低限の横幅を確保 */
  max-width: 90vw;       /* 横幅の上限を大きくする */
}    
} 

 /* =========================================
     5. フィルターボタン・グリッド
========================================= */
.group { 
  margin-bottom:24px; 
  display:flex;          /* 横並び */
  flex-wrap:wrap;        /* 行を折り返す */
  gap:10px 6px;               /* ボタン間の隙間 */
}
 @media (max-width: 768px) {
  #mediaButtons {gap: 6px 6px; }
}

}
/* 通常ユニット行 歌ってみたまでの隙間を縮める*/
#unitButtons {margin-bottom:12px;}
@media (max-width: 768px) {
  #unitButtons {margin-bottom: 6px;}
   }
   
/* フィルタ用ボタンの基本スタイル */
.toggle { 
  background: rgba(255, 255, 255, 0.9); /* 白を少し透かす */
  border: 1px solid #d1dce0; /* 基本は控えめな色 */
  border-radius: 12px; /*丸くする */
  box-shadow:none; /* 重い影は消す */
  color: var(--c-text-sub);
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  padding: 0 12px;/*内側の余白 上下  左右*/
  line-height: 30px;/*行の高さ（縦のサイズ）*/
  transition: all 0.2s ease;/*変化をなめらかに*/
}
.toggle:hover {
  border-color: var(--c-main-dark);
  color: var(--c-main-dark);
  background: #ffffff;
}
/* 選択済みボタン */
.toggle.active {
  background:var(--c-main-light);
  border-color: var(--c-main-waku);
  color:var(--c-text-liver);
  transform: translateY(1px);
  box-shadow: inset 0 2px 4px var(--c-main-light-shadow);
}
/* --- 5. フィルターボタン・グリッド内に追加 --- */

/* 活動形態ボタンのグループ設定 */
#unitButtons {
    display: flex;
    flex-wrap: wrap;
    align-items: center; /* 縦方向を中央に揃える */
    gap: 10px 6px;
}

/* 「※追加表示」という文字自体のスタイル */
.special-label {
    font-size: 11px;
    color: var(--c-text-sub);
    font-weight: bold;
    align-self: center; /* 縦方向の中央に合わせる */
    margin-left: 10px;  /* 前のボタンとの間隔 */
    white-space: nowrap; /* 改行させない */
}
.unit-mini {
  display: flex;
  gap: 6px;
  margin: 0px;
}
.unit-mini button {
  background: transparent;
  border: 1px solid var(--c-text-sub);
  color: var(--c-text-sub);
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
}
.unit-mini button:hover {
  border-color: var(--c-main-dark);
  color: var(--c-main-dark);
}
.option-group {
    margin-top: 15px;
    border-top: 1px dashed #ccc; /* 破線で区切り */
    padding-top: 10px;           /* 上の余白 */
    display: flex;               /* ボタンを横並びにする場合 */
    flex-wrap: wrap;             /* 折り返し許可 */
    gap: 8px;                    /* ボタン同士の間隔 */
}

/* もしスマホ等で見た目を調整したい場合 */
@media (max-width: 600px) {
    .option-group {
        margin-top: 10px;
        padding-top: 8px;
    }
}
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  gap: 8px 24px;
  max-width: 720px;   /* ← 横幅制限 */
  margin: 0 ;     /* ← 中央寄せ */
  margin-bottom:10px;
}
@media (max-width: 768px) {
  .feature-grid .toggle {
    padding: 0 8px;
    line-height: 26px;
  }
  .feature-grid {gap: 8px 8px; }
  .toggle { font-size: 10px; }
  #specialUnitButtons .toggle {font-size: 9px;}

  #unitButtons .toggle,
  #specialUnitButtons .toggle,
  #mediaButtons .toggle,
  #bpmButtons .toggle {
    padding: 0 8px;      /* 横余白を削る */
    line-height: 26px;   /* 高さを揃える */
    font-size: 10px;     /* 文字サイズも統一 */
  }
}
@media (max-width: 450px) {
  .toggle { font-size: 8px; }
  .unit-mini button{ font-size: 9px; }
  #specialUnitButtons .toggle {font-size: 8px;}

  #unitButtons .toggle,
  #specialUnitButtons .toggle,
  #mediaButtons .toggle,
  #bpmButtons .toggle {
    font-size: 8px;     /* 文字サイズも統一 */
  }
}
/* グループごとの枠 */
.filter-group {
  background: rgba(255, 255, 255, 0.7); /* 非常に薄い白 */
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 24px; /* グループ間の隙間 */
  border: 1px solid var(--c-main-dark); /* 控えめな縁取り */
}

/* グループ内の見出し余白を調整 */
.filter-group h2 {
  margin-top: 0;
  margin-bottom: 12px !important;
  font-size: 1.1rem;
}

/* グループ内の最後の要素の余白を消す */
.filter-group > *:last-child {
  margin-bottom: 0;
}

/* スマホ版の調整 */
@media (max-width: 768px) {
  .filter-group {
    padding: 14px;
    margin-bottom: 16px;
    border-radius: 12px;
  }
  .filter-group h2 {
    font-size: 0.95rem;
  }
} 
/* =========================================
      3. RESULTバー（固定ヘッダー）
========================================= */
#countTop {
  position: relative;
  top: 0;                /* 隙間なく画面上端に貼り付く */
  z-index: 100;          /* 他の要素より前面に */
  width: 100%;
  margin: 0;             /* 外側の余白をゼロに */
  padding: 6px 20px;    /* 内側の余白を少し広げて読みやすく */
  box-sizing: border-box; /* paddingを含めた幅計算 */
  background:transparent;
  border-bottom: 1.5px solid var(--c-sub-line); /* 甲斐田カラーの細い線で締める */
  font-weight:bold;
  font-size:16px;
  color: var(--c-main-dark);
  text-transform: uppercase;
  display: block;
  letter-spacing: 0.05em;
}
.count-num {
  color: var(--c-main-darker);
  font-weight:600;
  font-size:25px;
  letter-spacing: 0.02em;
  text-shadow: 1px 1px 0px var(--c-main-light-shadow); /* 重なりを綺麗に見せる */
}    
/* ヒーロー画像とRESULTバーの間の隙間を消す */
.hero + .main {padding-top: 0; }
/* スマホ版の調整 */
@media (max-width: 768px) {
  #countTop {padding: 6px 16px;  }
}
      
#generate {
  padding-top: 8px;     /* 境界線からボタンまでの距離（内側の空白） */
 }
/* 表示ボタン */
#showBtn { 
  padding:12px 24px; 
  font-size:18px; 
  font-weight:bold; 
  margin-right:12px; 
  border:var(--c-main-light); 
  border-radius:6px; 
  cursor:pointer; 
  color: var(--c-text-gra); 
  background: linear-gradient(135deg, var(--c-main-light) 0%, var(--c-main-gra) 100%);
  box-shadow: 0 6px 16px var(--c-main-light-shadow);
}

#showBtn:hover { 
  background: linear-gradient(
    135deg,
    var(--c-main-gra),
    var(--c-main-light)
 );
}
.showBtn-hint {font-size:13px;}
    
/* リセットボタン */
#resetBtn {
  background: transparent;
  color: var( --c-text-sub);
  border: 1px solid var( --c-text-sub);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 500;
}
#resetBtn:hover {
  border-color: var(--c-main-dark);
  color: var(--c-main-dark);
}
/* ボタン全体の下の余白 */
.button-group {margin-bottom:2px;}
   
/* --- 下部固定パネル本体 --- */
.footer-controls {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 2000;
  /* 背景を透かす（rgbaの最後の0.9が透明度です） */
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px)saturate(160%); /* 後ろをぼかす */
  -webkit-backdrop-filter: blur(15px) saturate(160%); /* Safari対応 */
  border-top: 2px solid var(--c-sub-line);
  padding: 0px 16px calc(10px + env(safe-area-inset-bottom));
  box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.1);
}
.controls-inner {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}
   
/* --- メインコンテンツが隠れないように下部余白を確保 --- */
.main {
  padding-bottom: 200px !important; 
}

@media (max-width: 768px) {
  .main {
    padding-bottom: 180px !important;
  }
  #countTop { font-size: 14px; }
  .count-num { font-size: 20px; }
  #showBtn { padding: 10px 18px; font-size: 16px; }
}  

@media (max-width: 768px) {
  #showBtn {
    padding: 8px 16px;   /* 上下を 10px → 6px に縮小 */
    font-size: 14px;      /* 文字も少しだけ小さくしてバランス調整 */
  }
  /* 撤回だ！ボタンの縦幅をスリムにする */
  #resetBtn {
    padding: 4px 12px;   /* 上下を 8px → 4px に縮小 */
    font-size: 11px;
  }
  /* ボタンを包むグループの余白も微調整 */
  .button-group {
    margin-bottom: 0;
  }
   .main {
    padding-bottom: 180px !important;
  }
  #countTop { font-size: 14px; }
  .count-num { font-size: 20px; }
}   
/* =========================================
      ソート
========================================= */   
/* ===== ソートエリア ===== */
.sort-group {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 15px; /* ★追加：線とボタンの間の余白 */
  border-top: 0.5px solid var(--c-sub-line); /* メインの水色（少し太くして存在感を出す） */
  width: 100%;
}
/* PC版（画面が広い時）の設定 */
@media (min-width: 769px) {
  .sort-group {
    /* 親の .main (70vw) より左右に 5vw ずつ広げて 80vw にする */
    width: calc(100% + 10vw); 
    margin-left: -5vw;
    
    /* ボタンの開始位置を元の 70vw の位置に合わせるための調整 */
    padding-left: 5vw;
    padding-right: 5vw;
    box-sizing: border-box;
  }
}

/* スマホ版（画面が狭い時）の微調整 */
@media (max-width: 768px) {
  .sort-group {
    margin-top: 16px;
    padding-top: 12px;
    width: 100% !important; /* 100%を超えないように強制 */
    margin-left: 0 !important;
    padding-left: 0;
    box-sizing: border-box;
  }   
 } 
/* ===== ソートボタン ===== */
.sortBtn {
  padding: 5px 12px;
  font-size: 12px;
  letter-spacing: 0.05em;
  font-weight: 500;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--c-text-sub);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.25s ease;
}
.sortBtn:hover {
  background: var(--c-sub-pd);
  color: var(--c-text-main);
}
.sortBtn.active {
  background: var(--c-main-light);
  color: var(--c-text-liver);
  border-color: var(--c-main-waku);
  font-weight: 600;
}
.sortBtn.disabled {
  opacity: 0.35;
  pointer-events: none;
}
@media (max-width: 768px) {
  .sortBtn {font-size: 10px;}
}
@media (max-width: 768px) {
  h2 { margin-bottom: 4px; }
  .group { margin-bottom: 16px; }
  .sort-group {
    margin-top: 12px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }
}
/* カウント数字やボタンの文字など */
.count-num, .cta-button, .sortBtn, .toggle {
  font-family: 'Montserrat', 'Zen Kaku Gothic New', sans-serif;
}
 /* =========================================
      7. 楽曲カード表示
 ========================================= */
#cards { 
  margin-top:20px; 
  display:grid; 
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap:20px; 
}
/* スマホは2列固定 */
@media (max-width: 768px) {
  #cards {grid-template-columns: repeat(2, 1fr);}
}
/* 個別カード */
.card {
  background: rgba(255, 255, 255, 0.8); /* 透明感の核心 */
  border: 1px solid rgba(255, 255, 255, 0.6); /* 縁だけ少し光らせる */
  backdrop-filter: none; /* 挙動重視のため、ここではあえてボカさない */
  color: var(--c-text-main);
  padding:16px; 
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(31, 42, 46, 0.05); /* 非常に薄い影 */
}
/* サムネ画像 */
.thumb {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 12px;
  margin-bottom: 8px;
}
.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* 曲名 */
.title { 
  font-size:16px; 
  font-weight:bold; 
  margin-bottom:6px; 
}
/* メタ情報（歌唱、作詞、作曲など） */
.meta { 
  font-size:13px; 
  line-height:1.6; 
  margin-bottom:6px; 
}
/* 説明文 */
.desc { 
  font-size:11px; 
  margin-bottom:10px; 
}
/* リンク類 */
.links a { 
  display:inline-block; 
  margin-right:8px; 
  font-size:13px; 
  color: var(--c-main-dark); 
  font-weight:bold; 
  text-decoration:none; 
}
.links a {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  gap: 1px; /* 文字とアイコンの隙間 */
  color: var(--c-main-dark);
  font-weight: bold;
}
.links a:hover {
  opacity: 0.8;
}
.links a::after {
  content: "";
  display: inline-block;
  width: 1.1em;  /* アイコンのサイズ（文字の大きさに連動） */
  height: 1.1em;
  /* アイコンのデザインデータ（SVG） */
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 19H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h5V3H6a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h12a3 3 0 0 0 3-3v-5h-2v5c0 .55-.45 1-1 1zm-4-16v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 19H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h5V3H6a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h12a3 3 0 0 0 3-3v-5h-2v5c0 .55-.45 1-1 1zm-4-16v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

@media (max-width: 768px) {
  .title { 
    font-size: 14px; /* 曲名を少し小さく */
    line-height: 1.3;
    margin-bottom: 4px;
  }
  .meta { 
    font-size: 12px; /* 歌唱・作詞などを小さく */
    line-height: 1.4;
    opacity: 0.9;
  }
  .desc {line-height: 1.4;}
  .links a { 
    font-size: 12px; /* リンクボタンを小さく */
    margin-right: 6px;
  }
  .card {padding:12px;  border-radius: 12px; }
} 
@media (max-width: 450px) {
  .title {font-size: 12px;  }
  .meta { 
    font-size: 9px; /* 歌唱・作詞などを小さく */
  }
  .desc {font-size: 8px;line-height: 1.4;}
  .links a { 
    font-size: 10px; /* リンクボタンを小さく */
  }
  .card {padding:8px;  border-radius: 12px; }
  #cards {gap:10px;}
}    

        .search-container { position: relative; margin-bottom: 20px; }
        .tags-area { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; min-height: 32px; }
        .tag { background: #2b5797; color: white; padding: 4px 12px; border-radius: 20px; font-size: 0.9rem; display: flex; align-items: center; }
        .tag .remove-btn { cursor: pointer; margin-left: 8px; font-weight: bold; }
        input#liver-input { width: 100%; padding: 12px; border: 2px solid #ddd; border-radius: 8px; box-sizing: border-box; font-size: 1rem; outline: none; }
        input#liver-input:focus { border-color: var(--c-sub-pd); }
        .suggestions { position: absolute; width: 100%; max-height: 300px; border: 1px solid #ccc; background: white; overflow-y: auto; display: none; z-index: 1000; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
        .suggestion-item { padding: 6px; cursor: pointer; border-bottom: 1px solid #eee; }
        .suggestion-item:hover { background-color: var(--c-sub-pd); }
/* 卒業済みライバーの背景を薄いグレーにする */
.suggestion-item.is-graduated {
    background-color: #f5f5f5; /* ほんのりグレー */
    color: #666;              /* 文字色も少し薄くすると分かりやすいです */
}
/* ホバーした時は分かりやすくするために色を変える（任意） */
.suggestion-item.is-graduated:hover {
    background-color: var(--c-sub-pd); color: var(--c-text-main); 
}

.tag {
    /* colorはJSで動的に変わるため、ここでは基本設定のみ */
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    font-weight: 700; /* 文字を太くすると視認性がさらに向上します */
    transition: all 0.3s ease;
}

/* ×ボタンのホバー。背景が白・黒どちらでも馴染むように */
.tag .remove-btn:hover {
    opacity: 0.6;
}
/* 外部リンク用：文字の後ろにアイコンを付与 */
.ext-link {
  display: inline-flex;
  align-items: center;
  gap: 2px; /* 文字とアイコンの隙間 */
  text-decoration: none;
  color: var(--c-main-dark);
  text-decoration: underline; /* 下線をつける */
}

.ext-link::after {
  content: "";
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  background-color: currentColor;
  /* SVGアイコンの設定 */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 19H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h5V3H6a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h12a3 3 0 0 0 3-3v-5h-2v5c0 .55-.45 1-1 1zm-4-16v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 19H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h5V3H6a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h12a3 3 0 0 0 3-3v-5h-2v5c0 .55-.45 1-1 1zm-4-16v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.ext-link:hover {
  opacity: 0.7;
  text-decoration: underline;
}
.ext-link2 {
  display: inline-flex;
  align-items: center;
  gap: 2px; /* 文字とアイコンの隙間 */
  text-decoration: none;
  color: var(--c-main-dark);
}

.ext-link2::after {
  content: "";
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  background-color: currentColor;
  /* SVGアイコンの設定 */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 19H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h5V3H6a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h12a3 3 0 0 0 3-3v-5h-2v5c0 .55-.45 1-1 1zm-4-16v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 19H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h5V3H6a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h12a3 3 0 0 0 3-3v-5h-2v5c0 .55-.45 1-1 1zm-4-16v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.tiisaku{
  color:var(--c-text-sub2);        /* 文字を赤にする */
  font-size: 9px;   /* サイズを大きくする */
}
.deka{
  color:var(--c-main-dark);
  font-weight:bold;
  font-size: 12px;   /* サイズを大きくする */
  marzin:none;
}
.remarks-start {
    margin-top: 0.5em; /* 1行分の余白 */
}
.in-link{
  color:var(--c-main-dark);}