/* PR広告 */

#includ_pr {
  color: #757575;
  float: right; /* 自身を右端に寄せる */
}
#includ_pr p {
  padding: 0 3px;
  margin: 0;
}
.index_pr {
  text-align: right;
  cursor: pointer;
}
#details_pr {
  text-align: left;
  display: none;
}

@media only screen and (min-width: 768px) {
  #includ_pr {
    font-size: 12px;
    width: 350px;
    background-color: rgba(255, 255, 255, 0.8); /* 背景を半透明の白に設定 */
    border-radius: 8px;
    backdrop-filter: blur(4px); /* 背景をぼかして高級感を演出 */
  }
}
@media only screen and (max-width: 768px) {
  #includ_pr{
    font-size: 11px;
    width: 170px;
  }
  #details_pr {
    background-color: #fafafa;
    border-radius: 5px;
  }
}

/* サイト内検索フォーム */
#site_search {
  padding: 0;
  margin: 0;
  float: right; /* 自身を右端に寄せる */
}

form.site_search {
  display: flex; /* 入力フィールドとボタンを横並びに */
  align-items: center;
}

form.site_search input[type="text"] {
  border: 1px solid #ccc;
  outline: none;
  transition: border-color 0.3s;
}

form.site_search input[type="text"]:focus {
  border-color: #007BFF; /* フォーカス時に青のアクセント */
}

form.site_search button {
  background-color: #007BFF; /* 青系のサイトカラー */
  color: white; /* 白い文字でコントラスト */
  border: none;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s;
}

form.site_search button:hover {
  background-color: #0056b3; /* ホバー時に濃い青 */
}

@media only screen and (min-width: 768px) {
  form.site_search {
    padding-right: 3px; 
    margin: 5px 3px; /* 上部余白をつける */
    gap: 8px; /* フィールド間の余白 */
  }
  
  form input[type="text"] {
    width: 140px;
    padding: 3px;
    font-size: 13px;
    border-radius: 4px;
  }
  
  form button {
    border-radius: 4px;
    padding: 2px 5px;
    font-size: 13px;
  }
}

@media only screen and (max-width: 768px) {
  form.site_search {
    padding-right: 3px; 
    margin: 1px 2px; /* 上部余白をつける */
    gap: 5px; /* フィールド間の余白 */
  }
  
  form input[type="text"] {
    width: 85px;
    padding: 1px 3px;
    font-size: 12px;
    border-radius: 3px;
  }
  
  form button {
    border-radius: 3px;
    padding: 1px 3px;
    font-size: 12px;
  }
}

/* 表示 ⇆ 非表示 */
p.expansion {
    font-size: 13px !important;
    margin: 0 !important;
}

#financial_statement{
    display: none; /* 初期状態は非表示 */
    margin: 0 0 20px 0;
}
ul.expansion_text{
    display: none; /* 初期状態は非表示 */
    padding-left: 10px !important;
    margin: 0 0 10px 0 !important;
    color: #333 !important;
}
ul.expansion_text li.index::before,
ul.expansion_text li.index_top::before{ /* li.indexの前に仮想的な要素を作成して調整 */
    content: "";
    display: inline-block;
    width: 4px; /* 円の幅 */
    height: 4px; /* 円の高さ */
    background-color: black; /* 円の色 */
    border-radius: 50%; /* 円形にする */
    vertical-align: middle; /* 縦位置を真ん中に揃える */
    margin: 0 5px 0 0 !important;
}
ul.expansion_text li.index,
ul.expansion_text li.index_top {
    list-style-type: none !important; /* デフォルトのリストマーカーを非表示にします */
    font-size: 13px !important;
    line-height: 1.2; /* 行間を狭くする */
    position: relative !important;
    padding: 0 !important; /* 左はマーク分 */
    margin: 6px 0 2px 0;
}
ul.expansion_text li.index_top {
    padding-top: 0 !important;
    margin-top: 0 !important;
}
ul.expansion_text li.explanation {
    list-style-type: none !important; /* デフォルトのリストマーカーを非表示にします */
    font-size: 12px !important;
    line-height: 1.4; /* 行間を狭くする */
    padding: 0 0 0 20px !important; /* 左はマーク分 */
    margin: 0 !important;
}

/* 表示/非表示ボタン */
.toggle_button {
  background-color: #3498db; /* ボタンの背景色 */
  color: white; /* 文字色 */
  margin: 0 0 0 2px;
  padding: 0 3px; /* パディング */
  border: none; /* ボーダーを非表示 */
  border-radius: 5px; /* 角丸にする */
  cursor: pointer; /* カーソルをポインターにする */
  font-size: 11px; /* フォントサイズ */
  transition: background-color 0.3s ease; /* ホバー時のトランジション */
}

.toggle_button:hover {
  background-color: #2980b9; /* ホバー時の色 */
}

.toggle_button:focus {
  outline: none; /* フォーカス時のアウトラインを非表示 */
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* フォーカス時のシャドウ */
}

.toggle_button:active {
  background-color: #003f7f; /* さらに濃い青 */
  transform: scale(0.95); /* 少し縮小 */
}

/* fiscalChart */
#fiscalChart{
  width: 100%;
  max-height: 300px;
  margin: 0;
}

/* テーブルチェンジボタン */
.scroll_button_underwriters_table {
  background-color: #007BFF;
  color: white;
  border: none;
  border-radius: 25px;
  font-weight: bold;
  cursor: pointer;
  font-size: 14px;
  padding: 1px 4px;
  margin: 5px 5px 5px 0;
  transition: background-color 0.3s ease, transform 0.2s ease; /* 背景色と拡大時のトランジション */
}

/* ホバー時のデザイン */
.scroll_button_underwriters_table:hover {
  background-color: #0056b3; /* 少し濃い青 */
}

/* アクティブ時のデザイン */
.scroll_button_underwriters_table:active {
  background-color: #003f7f; /* さらに濃い青 */
  transform: scale(0.95); /* 少し縮小 */
}


/* ratingツールチップ */

.rating {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.rating::after {
  content: ""; /* デフォルトで空 */
  position: absolute;
  bottom: 100%; /* 親要素の上に表示 */
  left: 50%; /* 水平方向中央 */
  transform: translateX(10%);
  background-color: #333; /* 背景色 */
  color: #fff; /* 文字色 */
  padding: 5px 10px; /* 内側の余白 */
  border-radius: 5px; /* 角丸 */
  white-space: nowrap; /* テキストを1行に */
  font-size: 12px; /* 文字サイズ */
  opacity: 0; /* 初期状態は非表示 */
  visibility: hidden; /* 初期状態は非表示 */
  transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
  z-index: 10; /* 他要素より前面に表示 */
}

/* 表示時のスタイル */
.rating.active::after {
  opacity: 1;
  visibility: visible;
}

/* 個別のツールチップメッセージ */
.rating_S::after {
  content: "+20万円以上期待。";
}

.rating_A::after {
  content: "+10万円〜+20万円期待。";
}

.rating_B::after {
  content: "+3万円〜+10万円期待。公募割れは考えにくい。";
}

.rating_C::after {
  content: "+3万円まで期待。公募割れの可能性もあり。";
}

.rating_D::after {
  content: "公募割れの可能性が高い。";
}