@charset "UTF-8";

/*---------------------------- PC向けのスタイル ----------------------------*/
@media only screen and (min-width: 768px) {

/* PCのみ非表示*/
.pc_none {
    display: none !important;
 }

/* PCのみ表示*/
span.sp_none {
  display: inline; /* <span> や <a> として表示*/
}
div.sp_none,
h1.sp_none,
p.sp_none {
  display: block; /* <div> や <p> として表示*/
}

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

body {
  font-size: 14px;
}

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

#header_inner {
  height: 80px;
  background-image: url(../img/logo.png?v=1.2);
}
#header_inner h1,
#header_inner p.logo_side {
  font-size: 14px;
  padding: 26px 0 0 140px;
}

#header-menu {
  padding: 10px 0;
  margin: 0 0 5px 0;
}
#header-menu li {
  margin: 0 0 0 20px;
}
#header-menu li a {
  padding: 8px 15px;
  border-radius: 5px;
}

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

#container {
  width: 100%; /* コンテンツの幅を設定 */
  max-width: 900px; /* 最大幅を指定 */
  margin: 0 auto; /* 左右の余白を自動にして中央配置 */
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0;
}

#contents {
  order: 1; /* フレックスボックスの順序を指定 */
  margin: 0 0 5px 0;
  padding: 0 10px 30px 10px;
  width: 620px;
}
#contents.column {
  padding: 0 20px 30px 20px;
}

#contents_calendar {
  margin: auto;
  padding: 0 10px 20px 10px;
  width: 800px;
}

/*---------- 見出しタイトル装飾（共通部分） ----------*/
#pannavi{
  font-size: 12px;
}

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

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

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

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

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

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

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: 3px 8px;
  line-height: 1; /* 縦幅調整 */
}

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

sup.commissioned {
  margin-left: 1px;
  padding: 4px; 
}
span.commissioned {
  padding: 3px 8px; 
}

sup.equal_lottery100 {
  margin-left: 1px;
  padding: 3px 8px; 
}
sup.no_deposit {
  margin-left: 1px;
  padding: 3px 8px; 
}
span.no_deposit {
  padding: 3px 8px; 
}

span.late_model {
  padding: 3px 8px; 
}

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

#menu {
  order: 2; /* フレックスボックスの順序を指定 */
  margin: 0 0 15px 0;
  width: 220px;
}
.menulist {
  box-sizing: border-box; /* padding と border を幅に含める */
  margin: 0;
  padding: 2px 7px 10px 7px;
  border-radius: 8px;
}
.menulist p.index {
  font-size: 1.1em;
}
.menulist li a {
  padding: 10px 15px;
  font-size: 0.9em;
  border-radius: 4px;
  margin-bottom: 10px;
}

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

p.back a {
  font-size: 14px;
  padding: 10px 15px;
  border-radius: 25px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

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

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

}