/*---------------------------- スマートフォン向けのスタイル ----------------------------*/
@media only screen and (max-width: 768px) {
  
/* スマホのみ表示*/
span.pc_none {
  display: inline; /* <span> や <a> として表示*/
}
div.pc_none,
h1.pc_none,
p.pc_none {
  display: block; /* <div> や <p> として表示*/
}

/* スマホのみ非表示*/
.sp_none {
  display: none;
}
/*
#menu {
  display: none !important;
}
*/
/*---------------------------- ページ全体の指定 ----------------------------*/

body {
  font-size: 13px;
  letter-spacing: 0.05em;
  -webkit-text-size-adjust: 100%;
}

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

#header_inner {
  height: 45px;
  background-image: url(../img/logo_sp.png?v=1.2);
}
#header_inner h1,
#header_inner p.logo_side {
  font-size: 11px;
  line-height: 1.3;
  padding: 10px 0 0 76px;
}

/*---------- スクロール対応ヘッダーメニュー ----------*/
#header-menu-container {
  position: relative;
  overflow: hidden;
}
#header-menu {
  overflow-x: auto; /* 横スクロールを許可 */
  white-space: nowrap; /* メニューが折り返されないようにする */
  padding: 5px 0;
  margin: 0 0 3px 0;
}
.scroll-indicator {
  position: absolute;
  top: 50%;
  right: 3px;
  transform: translateY(-50%);
  width: 20px; /* 正円を維持 */
  height: 20px; /* 正円を維持 */
  background-color: #007bbb;
  color: #ffffff;
  font-size: 12px;
  line-height: 20px; /* 高さと一致させて中央揃え */
  align-items: center; /* 縦方向の中央揃え */
  line-height: 18px; /* 要素全体の高さより少し小さくすることで中央揃えを微調整 */
  text-align: center; /* 水平中央揃え */
  border-radius: 50%; /* 正円にする */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  pointer-events: none;
  z-index: 10;
}

#header-menu li {
  display: inline-flex; /* フレックスボックスを維持しつつ横スクロール対応 */
  justify-content: flex-start; /* 左寄せ（必要なら調整） */
  font-size: 12px;
  margin: 0 0 0 10px;
}
#header-menu li a {
  padding: 3px 5px;
  border-radius: 3px;
}

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

#container {
  width: 100%; /* コンテンツの幅を設定 */
}

#contents,
#contents_calendar {
  box-sizing: border-box; /* padding と border を幅に含める */
  display: block; /* 確実にブロック要素にする */
  float: none;    /* 浮動も無効化 */
  clear: both;    /* 両側の浮動要素を解除 */
  margin: 0 0 5px 0;
  padding: 0 3px 20px 3px;
  width: 100%;
}
#contents.column {
  padding: 0 10px 20px 10px;
}

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

#pannavi{
  font-size: 11px;
}

#contents h1,
#contents_calendar h1 {
  margin: 10px 0 10px 0;
  padding: 5px 6px;
  line-height: 1.6;
  font-size: 1.6em;
  border-radius: 5px;
}
#contents.column h1 {
  margin-bottom: 20px;
}
#contents h2 {
  margin: 40px 0 10px 0;
  padding: 3px 7px;
  line-height: 1.5;
  font-size: 1.3em;
  border-radius: 4px;
}

/*---------- コンテンツ内 ----------*/

#contents.column p {
  margin: 30px 0;
}

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

.table_top_right {
  font-size: 11px;
}
#contents table {
  font-size: 12px;
}

/*---------- レーティング装飾 ----------*/

table td.overall_rating span.rating_S,
table td.overall_rating span.rating_A,
table td.overall_rating span.rating_B,
table td.overall_rating span.rating_C,
table td.overall_rating span.rating_D{
  padding: 2px 5px;
  line-height: 1; /* 縦幅調整 */
}

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

sup.commissioned {
  margin-left: 1px;
  padding: 3px; 
}
span.commissioned {
  padding: 2px 5px; 
}

sup.equal_lottery100 {
  margin-left: 1px;
  padding: 2px 5px; 
}

sup.no_deposit {
  margin-left: 1px;
  padding: 2px 5px; 
}
span.no_deposit {
  padding: 2px 5px; 
}
span.late_model {
  padding: 2px 5px; 
}

/*---------- サイドエリア ----------*/
.side_bnr {
  margin-bottom: 5px;
}
#menu {
  display: block; /* 確実にブロック要素にする */
  float: none;    /* 浮動も無効化 */
  clear: both;    /* 両側の浮動要素を解除 */
  width: 100%;    /* 必要に応じて全幅指定 */
  margin: 0 0 10px 0;
}
.menulist{
  box-sizing: border-box; /* padding と border を幅に含める */
  margin: 0;
  padding: 7px 15px 7px 15px;
  border-radius: 5px;
}
.menulist p.index {
  font-size: 1.1em;
  margin: 7px 0;
}
.menulist li a {
  padding: 5px 8px;
  font-size: 0.9em;
  border-radius: 4px;
  margin-bottom: 7px;
}

/*---------- トップに戻る 共通 ----------*/

p.back {
  position: fixed; /* 固定配置 */
  bottom: 20px; /* 下からの距離 */
  right: 20px; /* 右からの距離 */
  z-index: 1000; /* 他の要素より前面に配置 */
}

p.back a {
  font-size: 15px;
  padding: 0;
  width: 36px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  border-radius: 50%;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}

p.back a:hover {
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.2);
}

p.back a:active {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

span.navi_page {
  display: none !important;
}

/*---------- standalone設定 ----------*/

html.standalone .app_install {
  display: none;
}
html.standalone p.reload {
  display: block !important;
  position: fixed;
  bottom: 34px; /* 画面下からの距離 */
  left: 20px; /* 画面左からの距離 */
  z-index: 1000; /* 他の要素よりも前面に配置 */
}
html.standalone span.navi_page {
  display: inline !important;
}
html.standalone p.back {
  bottom: 50px !important;
}
html.standalone #footer_inner {
  padding-bottom: 35px;
}
}