@charset "UTF-8";

/*---------------------------- 共通部分 ----------------------------*/

html, body, header, nav, article, section, aside, footer,
div, span, p, h1, h2, h3, h4,
ul, ol, li, dl, dt, dd,
table, tr, th, td, tbody, thead, tfoot {
  margin: 0;
  padding: 0;
}

header, section, footer {
    display: block; /* 他の要素を下に押し下げ、横に並ばせない */
}

body {
  width: 100%;
  font-family: "メイリオ", Meiryo, sans-serif;
  margin: 0;
  padding: 0;
  color: #333333;
  background-color: #f9f9f9;
}

ol, ul {
    list-style: none;
}

p {
    margin: 15px 0;
    line-height: 1.7;
  }

a {
    text-decoration: none;
    color: #007bbb;
    font-weight: bold;
}

a:visited {
    color:darkslateblue;
    font-style: normal;
}

a:hover {
    color: #004080;
    text-decoration: none;
}

.align_right {
  text-align: right;
}

/*---------- ページ全体の指定 ----------*/

#main {
  width: 100%;
  overflow: hidden;
  margin: 0 auto;
  padding: 0;
  text-align: center;
  background-color: #ffffff;
}

/*---------- ヘッダー ----------*/

#header {
  width: 100%;
  padding: 0;
  background-color: #ffffff;
}
#header_top{
  height: 10px;
  margin: 0;
  padding: 0;
  background-color: #004080;
}
#header_inner {
  max-width: 900px; /* 最大幅を指定 */
  margin: 0 auto; /* 左右の余白を自動にして中央配置 */
  background-position: left center;
  background-repeat: no-repeat;
  background-position: left;
}
#header_inner h1,
#header_inner p.logo_side {
  font-family: 'Arial', sans-serif;
  text-align: left;
  font-weight: bold;
  line-height: 1.5;
  margin: 0;
}

#header-menu {
  text-align: left;
  background-color: #003366;
}
#header-menu ul {
  max-width: 900px; /* 最大幅を指定 */
  margin: 0 auto; /* 左右の余白を自動にして中央配置 */
}
#header-menu li {
  display: inline-block;
}
#header-menu li a {
  text-decoration: none; /* デフォルトの下線を削除 */
  color: #ffffff;
  transition: background-color 0.5s ease;
}

#header-menu li a:hover {
  background-color: #00509e;
}

.clearfix:after {
  content: "";
  display: block;
  clear: both;
  height: 0; 
  visibility: hidden;
}

/*---------- メインコンテンツ ----------*/

#contents,
#contents_calendar {
  text-align: left;
  background-color: #ffffff;
}

/*---------- 見出しタイトル装飾（共通部分） ----------*/

#contents h1,
#contents_calendar h1 {
    font-weight: bold;
    color: #003366;
    border-bottom: solid 3px #00509e;
    background-color: #e6f0fa;
}
#contents_calendar h1,
#contents h1.index_top {
  margin: 0 0 10px 0 !important;
}

#contents h2 {
    font-weight: bold;
    color: #ffffff;
    border-left: solid 4px #003366;
    background-color: #007bbb;
}

/*---------- コンテンツ内 ----------*/
#contents p {
  padding: 0 5px;
}

#contents.column p {
  text-indent: 1em; /* 全角スペース程度のインデントを設定 */
}
#contents.column p.no_indent {
  text-indent: 0em;
}

/*---------- 補足情報デザイン ----------*/
div.add_info {
  margin: 15px 0 !important;
  padding: 5px 15px !important;
  border: 1px solid #ddd; /* 薄い枠線 */
  background-color: #f9f9f9; /* 少し明るいグレー背景 */
  border-left: 4px solid #007bbb; /* 左側にアクセントカラー */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 軽い影で立体感 */
  border-radius: 5px; /* 角を丸く */
}
div.add_info p{
  color: #333333; /* 本文と同じ文字色 */
  margin: 0 !important;
  padding: 5px 0 !important;
  text-indent: 0em !important;;
  font-size: 0.9em; /* フォントサイズを少し小さく */
  line-height: 1.6;
}

/*---------- コンテンツ内 テーブル ----------*/

.table_top_right {
    text-align: right;
    width: 100%;
    margin: 0;
    padding: 0;
}
#contents table {
    text-align: center;
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    border: 1px solid #cccccc;
}
#contents table th {
    background-color: #f2f4f8;
    color: #333333;
    font-weight: bold;
    border: 1px solid #cccccc;
}
#contents table td {
    background-color: #ffffff;
    border: 1px solid #cccccc;
}

td.bb_period {
    background-color: #fff4e6 !important;
}
/*---------- レーティング装飾 ----------*/

td.overall_rating span.rating_S {
  background: linear-gradient(45deg, #d9d9d9, #ffffff, #e6e6e6);
  color: #000000;
  border: 1px solid #a6a6a6;
  border-radius: 5px;
  font-weight: bold;
  text-transform: uppercase;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}

td.overall_rating span.rating_A {
  background-color: #ffebee;
  color: #d32f2f;
  border: 1px solid #d32f2f;
  border-radius: 5px;
  font-weight: bold;
}

td.overall_rating span.rating_B {
  background-color: #fff4e6;
  color: #d48806;
  border: 1px solid #d48806;
  border-radius: 5px;
  font-weight: bold;
}

td.overall_rating span.rating_C {
  background-color: #e3fcec;
  color: #237804;
  border: 1px solid #237804;
  border-radius: 5px;
  font-weight: bold;
}

td.overall_rating span.rating_D {
  background-color: #d4eaff;
  color: #0056b3;
  border: 1px solid #0056b3;
  border-radius: 5px;
  font-weight: bold;
}

/*---------- 証券会社付加情報装飾 ----------*/

sup.commissioned,
span.commissioned {
  font-size: 0.8em; 
  color: #ffffff; /* 白い文字でコントラストを強調 */
  background-color: #28a745; /* 緑系で信頼感を演出 */ 
  border-radius: 50px; 
  font-weight: bold; 
  box-shadow: 0 4px 6px rgba(40, 167, 69, 0.3); /* 緑系の影 */
}

sup.equal_lottery100 {
  font-size: 0.8em; 
  color: #ffffff; /* 白い文字でコントラストを確保 */
  background-color: #f0ad4e; /* 落ち着いた黄色 */
  border-radius: 8px;
  font-weight: bold; 
  box-shadow: 0 3px 5px rgba(240, 173, 78, 0.2); /* 軽い影で控えめに */
}

sup.no_deposit,
span.no_deposit {
  font-size: 0.8em; 
  color: #ffffff; /* 白い文字でコントラストを強調 */
  background-color: #dc3545; /* 赤系で緊急感を演出 */
  border-radius: 8px; 
  font-weight: bold; 
  box-shadow: 0 4px 6px rgba(220, 53, 69, 0.3); /* 赤系の影 */
}

span.late_model {
  font-size: 0.8em; 
  color: #ffffff; /* 白い文字で高コントラスト */
  background-color: #6f42c1; /* 落ち着いた紫 */
  border-radius: 8px; /* 丸みを持たせたデザイン */
  font-weight: bold; 
  box-shadow: 0 4px 6px rgba(111, 66, 193, 0.3); /* 控えめな紫の影 */
}

/*---------- 文字装飾 ----------*/

span.red,
td.red {
  color: #d32f2f;
}
  
span.red_b {
  color: #d32f2f;
  font-weight: bold;
}
  
span.blue {
  color: #0056b3;
}
  
span.blue_b {
  color: #0056b3;
  font-weight: bold;
}

span.orange {
  color: #d48806;
}

span.orange_b {
  color: #d48806;
  font-weight: bold;
}

span.green {
  color: #237804;
}

span.green_b {
  color: #237804;
  font-weight: bold;
}

span.purple {
  color: #6A5ACD;
}

span.purple_b {
  color: #6A5ACD;
  font-weight: bold;
}

span.gray {
  color: #757575;
}

span.gray_b {
  color: #757575;
  font-weight: bold;
}

span.platinum {
  color: #000000; /* 基調はブラック */
  text-shadow: 
      0 0 5px rgba(255, 255, 255, 0.6), /* 白の広がる光 */
      0 0 10px rgba(255, 255, 255, 0.4), /* ソフトな光沢 */
      -1px -1px 2px rgba(255, 255, 255, 0.8), /* 上方向の光沢 */
      1px 1px 2px rgba(255, 255, 255, 0.8); /* 下方向の光沢 */
  background: linear-gradient(45deg, #e6e6e6, #ffffff, #bdbdbd); /* プラチナ調のグラデーション */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3), /* 軽い影で浮かせる */
              0 0 10px rgba(255, 255, 255, 0.5); /* 光沢感のハイライト */
  padding: 1px 3px; /* 内側の余白 */
  display: inline-block; /* 背景を文字サイズに合わせる */
}

span.platinum_b {
  color: #000000; /* 基調はブラック */
  text-shadow: 
      0 0 5px rgba(255, 255, 255, 0.6), /* 白の広がる光 */
      0 0 10px rgba(255, 255, 255, 0.4), /* ソフトな光沢 */
      -1px -1px 2px rgba(255, 255, 255, 0.8), /* 上方向の光沢 */
      1px 1px 2px rgba(255, 255, 255, 0.8); /* 下方向の光沢 */
  font-weight: bold;
  background: linear-gradient(45deg, #e6e6e6, #ffffff, #bdbdbd); /* プラチナ調のグラデーション */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3), /* 軽い影で浮かせる */
              0 0 10px rgba(255, 255, 255, 0.5); /* 光沢感のハイライト */
  padding: 1px 3px; /* 内側の余白 */
  display: inline-block; /* 背景を文字サイズに合わせる */
}

/*---------- 画像（共通部分） ----------*/

img {
  max-width: 100%; /*画像の横幅を、親要素の横幅までに。画像が小さい場合には、そのままのサイズを維持*/
  max-height: 100%;
  object-fit: contain; /* 画像のアスペクト比を保ちながら*/
}

.align_center {
  display: flex;
  justify-content: center;
  align-items: center;
}

br.clear {
    display: block;
    clear: both;
}

.bnr_recommend_securities {
  margin-top: 10px;
}

/*---------- サイドエリア ----------*/

.menulist {
  background-color: #f4f4f4;
}

.menulist p.index {
  font-weight: bold;
  color: #004080;
}
.menulist ul {
    margin: 0;
    padding: 0;
}

.menulist li {
    margin: 0;
    padding: 0;
    list-style: none;
}
.menulist li a {
  display: block;
  color: #333333;
  background-color: #ffffff;
  border: 1px solid #ddd;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.menulist li a:hover {
  background-color: #004080;
  color: #ffffff;
}

/*---------- トップに戻る 共通 ----------*/
p.back {
    margin: 6px 0 6px 0;
    padding: 0;
    text-align: right;
}

p.back a {
    display: inline-block;
    font-weight: bold;
    color: #ffffff;
    background-color: #007bbb;
    transition: all 0.3s ease;
    text-decoration: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* 影を追加 */
}

p.back a:hover {
    background-color: #005f9e;
    transform: translateY(-2px);
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.3); /* 影を強調 */
}

p.back a:active {
    background-color: #004080;
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 影を縮小 */
}

/*---------- フッター ----------*/

#footer {
  clear: both; /* フロートされた要素の下に配置 */
  margin: 20px 0 0 0;
  padding: 15px 0;
  background-color: #004080; /* サイトの青を基調に設定 */
  color: #ffffff;
  font-size: 0.9em;
  text-align: center;
  box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.2); /* 上部に軽い影を追加 */
}
#footer_inner {
  max-width: 900px; /* 最大幅を指定 */
  margin: 0 auto; /* 左右の余白を自動にして中央配置 */ 
}

#footer .footer_menu {
  list-style: none; /* デフォルトのリストスタイルを削除 */
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center; /* メニューを中央揃え */
  gap: 20px; /* 各メニュー間にスペースを追加 */
}

#footer ul.footer_menu {
  margin: 10px 0 !important;
}

#footer .footer_menu li {
  display: inline-block;
}

#footer .footer_menu a {
  text-decoration: none; /* デフォルトの下線を削除 */
  color: #ffffff;
  padding: 8px 15px;
  border-radius: 5px; /* ボタン風に角を丸める */
  transition: all 0.5s ease; /* ホバー時のアニメーション効果 */
}

#footer .footer_menu a:hover {
  background-color: #0066CC;
}

#footer ul.footer_menu {
  max-width: 900px; /* 最大幅を指定 */
  margin: 0 auto; /* 左右の余白を自動にして中央配置 */
}

#footer p {
  margin: 15px 0 10px 0;
  font-size: 0.8em;
  color: #d0d0d0; /* 著作権表記を少し薄く */
}