@charset "utf-8";

/* ========================================= */
/* 基本設定 & リセット */
/* ========================================= */
a:hover {
  text-decoration: none !important;
}

*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 62.5%;
}

/* ========================================= */
/* ユーティリティクラス */
/* ========================================= */
.mt30 {
  margin-top: 30px;
}
.mt50 {
  margin-top: 50px;
}
.margin-top40 {
  margin-top: 40px;
}
.margin-top-10 {
  margin-top: 10px;
}
.margin-t-20 {
  margin-top: 20px;
}
.margin-b-20 {
  margin-bottom: 20px;
}
.center {
  text-align: center !important;
}
.w100 {
  max-width: 100%;
}
.flex {
  display: flex;
}
.position {
  position: relative;
}

/* ========================================= */
/* ボタン */
/* ========================================= */
.btn,
a.btn,
button.btn {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  cursor: pointer;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  border-radius: 0.5rem;
}

/* ★修正：詳細ボタンの色をエンジ色(#8b0000)に統一 */
a.btn--orange {
  color: #fff;
  background-color: #8b0000; /* オレンジからエンジへ変更 */
  border-bottom: 5px solid #600000; /* 影の色も濃いエンジへ */
}
a.btn--orange:hover {
  margin-top: 3px;
  color: #fff;
  background: #a50000; /* ホバー時は少し明るく */
  border-bottom: 2px solid #600000;
}
a.btn--shadow {
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
}

/* ========================================= */
/* タブデザイン（王将戦とは、など） */
/* ========================================= */

/* ========================================= */
/* コンテンツ内の装飾 */
/* ========================================= */
.border {
  background: #333; /* 黒帯に変更 */
  padding: 5px 10px;
  display: inline-block;
  color: white;
  margin-bottom: 5px;
  font-weight: bold;
  font-size: 1.4rem;
}

.img-box img {
  max-width: 100%;
  height: auto;
}

.live_shogi_tbl {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  border: 1px solid #ccc;
}
.live_shogi_tbl th {
  background-color: #333;
  color: #fff;
  padding: 10px;
  border: 1px solid #ccc;
  font-weight: normal;
}
.live_shogi_tbl td {
  padding: 10px;
  border: 1px solid #ccc;
  text-align: center;
}

.tab_container {
  background-color: #ffffff !important; /* 背景を白に */
  border: 1px solid #d1d5db !important; /* トーナメント表に合わせた枠線 */
  border-radius: 0.5rem; /* 角を丸くする */
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); /* 影をつける */
  padding-bottom: 0 !important;
  overflow: hidden;
}
.tab_item {
  width: calc(100% / 3);
  padding: 15px 0;
  border-bottom: 1px solid #d1d5db !important; /* 区切り線をトーナメントの枠線と合わせる */
  background-color: #8b0000 !important;
  text-align: center;
  color: #ffd700 !important;
  display: block;
  float: left;
  font-weight: bold;
  transition: all 0.2s ease;
}
.tab_item:hover {
  opacity: 0.75;
}
input[name="tab_item"] {
  display: none;
}
.tab_content {
  display: none;
  padding: 2rem !important; /* 内側の余白を広くとる */
  clear: both;
  overflow: hidden;
}
#tab1:checked ~ #tab1_content,
#tab2:checked ~ #tab2_content,
#tab3:checked ~ #tab3_content,
#tab4:checked ~ #tab4_content {
  display: block;
}
.tab_container input:checked + .tab_item {
  background-color: #ffffff !important; /* 選択されているタブの背景を白に */
  color: #6a1c23 !important; /* 文字色を濃くして強調 */
  border-bottom-color: #ffffff !important; /* 下の線を消して一体感を出す */
  margin-bottom: -1px; /* コンテンツとタブを繋げる */
  z-index: 10;
}

/* ========================================= */
/* ▼▼▼ 追加：テーブルデザイン修正用CSS ▼▼▼ */
/* ========================================= */

/* 1. 外枠（カードデザイン） */
.design_wrapper {
  background-color: #ffffff;
  border: 1px solid #e5e7eb; /* 薄いグレー */
  border-radius: 8px; /* 角を少し丸く */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* 柔らかい影 */
  overflow: hidden;
  margin-top: 40px;
  width: 100%;
  box-sizing: border-box;
}

/* 2. ヘッダー帯（七番勝負・七番勝負日程） */
.design_wrapper .seven-battle {
  width: 100% !important;
  min-width: 100% !important;
  max-width: none !important;
  display: block !important;
  float: none !important;

  /* デザイン調整 */
  background: linear-gradient(
    135deg,
    #8b0000 0%,
    #600000 100%
  ); /* 高級感のあるグラデーション */
  color: #ffd700; /* 金文字 */
  padding: 12px 0;
  text-align: center;
  font-weight: bold;
  font-size: 1.8rem;
  letter-spacing: 0.05em;
  border-bottom: 1px solid #b91c1c;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* ヘッダー内のリストリセット */
.design_wrapper .seven-battle ul {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  width: 100% !important;
  text-align: center !important;
}
.design_wrapper .seven-battle li {
  display: block !important;
  width: 100% !important;
  margin: 0;
  padding: 0;
}

/* 3. テーブルエリア */
.design_wrapper .scroll {
  padding: 0; /* 余白なしで端までテーブルを表示 */
  background-color: #ffffff;
  overflow-x: auto;
}

/* 4. テーブル本体のデザイン（クール＆モダン） */
.design_wrapper table.type11 {
  width: 100%;
  min-width: 700px; /* スマホで横スクロールさせるための最小幅 */
  border-collapse: collapse;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 1.4rem;
}

/* テーブルヘッダー (th) */
.design_wrapper table.type11 th {
  background-color: #1f2937; /* ★ダークグレー（黒に近い）に変更 */
  color: #ffffff; /* 白文字 */
  font-weight: 600;
  padding: 15px 10px;
  border-bottom: 2px solid #8b0000; /* 下線にアクセントのエンジ色 */
  border-right: 1px solid #374151; /* 薄い区切り線 */
  white-space: nowrap;
}
.design_wrapper table.type11 th:last-child {
  border-right: none;
}

/* テーブルデータ (td) */
.design_wrapper table.type11 td {
  padding: 12px 10px;
  border-bottom: 1px solid #e5e7eb; /* 薄いグレーの罫線 */
  border-right: 1px solid #f3f4f6;
  color: #333;
  text-align: center;
  vertical-align: middle;
  transition: background-color 0.2s;
}

/* 偶数行の背景色（ストライプ） */
.design_wrapper table.type11 tr:nth-child(even) td {
  background-color: #f9fafb; /* 非常に薄いグレー */
}

/* ホバー時のハイライト */
/* 詳細度を上げて偶数行の背景色指定より優先させるために!importantを付与 */
.design_wrapper table.type11 tbody tr:hover td {
  background-color: #fff7ed !important; /* ほんのり暖色系の白 */
}

/* 1列目（対局者名・局数）を強調 */
.design_wrapper table.type11 tbody tr td:first-child {
  font-weight: bold;
  color: #111;
  background-color: #fff; /* 左端は白固定で見やすく */
  border-right: 2px solid #e5e7eb;
}

/* ▼▼▼ 追加修正：日程表（type15）の「第X局」を縦書き＆幅詰め ▼▼▼ */
/* 左端（第X局）は縦書き・白固定 */
.design_wrapper table.type15 tbody tr:nth-child(odd) td:first-child {
  /* -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl; 

  text-orientation: upright;  */

  padding: 10px 2px; /* ★調整：左右余白 */
  width: 40px; /* ★調整：正立用に少し幅を広げる */
  min-width: auto;
  letter-spacing: 0.1em;
  vertical-align: middle;
  background-color: #fff;

  white-space: nowrap; /* 改行禁止 */
  line-height: 1.2; /* 行間調整 */
}

.text-combine {
  -webkit-text-combine: horizontal;
  -ms-text-combine-horizontal: all;
  text-combine-upright: all;
}

/* 左端セル（第X局）はホバーしても色を変えない（奇数行のみ対象にする） */
.design_wrapper table.type15 tbody tr:nth-child(odd):hover td:first-child {
  background-color: #fff !important;
}

/* ▼▼▼ 追加：対局場（結合セル）の挙動調整 ▼▼▼ */
/* 偶数行ホバーで結合セルを光らせることはCSSでは不可能なため、
   逆に「奇数行ホバーでも結合セル（対局場）を光らせない（白固定）」ことで、
   どちらの行にホバーしても違和感のない統一された挙動にします */
.design_wrapper table.type15 tbody tr:nth-child(odd) td:nth-child(4) {
  background-color: #fff;
}
/* 対局場セルもホバーしても色を変えない（奇数行のみ対象にする） */
/* これを全行に適用すると、偶数行の4番目（聞き手）まで白くなってしまうため限定します */
.design_wrapper table.type15 tbody tr:nth-child(odd):hover td:nth-child(4) {
  background-color: #fff !important;
}

/* ▼▼▼ 追加修正：日程表（type15）の偶数行（日付）の調整 ▼▼▼ */
.design_wrapper table.type15 tbody tr:nth-child(even) td:first-child {
  font-weight: normal; /* 太字を解除 */
  border-right: 1px solid #e5e7eb; /* 濃くなっていた右線を他と同じ薄さに修正 */
  background-color: #f9fafb; /* 偶数行の1列目（日付）の背景色をグレーに戻す */
}

/* 勝敗の結果（○●）を見やすく */
.design_wrapper table.type11 td {
  font-feature-settings: "palt"; /* 文字詰め */
}

/* 日程表の改行調整 */
.design_wrapper table.type11 td br {
  display: block;
  margin: 4px 0;
}

/* 勝敗スコアの強調 */
.score {
  font-weight: bold;
  color: #d32f2f; /* 赤系で強調 */
}

/* ========================================= */
/* その他の要素（バナーなど） */
/* ========================================= */
.Bnr {
  position: relative;
  margin: 0 auto;
  width: 450px;
  display: none;
  font-family: "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3",
    "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", Osaka, sans-serif !important;
}

.Bnr .Bnr__img {
  position: fixed;
  bottom: 0;

  z-index: 88;
}

.Bnr__img__inner {
  width: 750px;
  box-sizing: border-box;
  padding: 10px;
}

.Bnr__img__inner2 {
  width: 600px;
  box-sizing: border-box;
  padding: 10px;
}

.Bnr .Bnr__img__inner a {
  display: block;
}

.Bnr .Bnr__img p.close {
  position: absolute;
  right: 10px;
  top: 10px;
}

.Bnr .Bnr__img p.close a {
  display: block;
  width: 20px;
  height: 25px;
  text-align: center;
}

.Bnr .Bnr__img p.close a span {
  display: block;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.Bnr .Bnr__img p.close a i {
  font-size: 20px;
  z-index: 888;
  color: black;
}

/* メディアクエリ（スマホ対応） */
@media screen and (max-width: 768px) {
  .design_wrapper .seven-battle {
    font-size: 1.6rem;
  }
  .design_wrapper table.type11 {
    font-size: 1.3rem;
  }
  .design_wrapper table.type11 th,
  .design_wrapper table.type11 td {
    padding: 10px 5px;
  }

  /* スマホでのみ表示調整 */
  .sp {
    display: block;
  }
  .br-sp {
    display: inline;
  }
}

@media screen and (min-width: 769px) {
  .sp {
    display: none;
  }
  .br-sp {
    display: none;
  }
}

/* 550pxまで適用 */
@media screen and (max-width: 550px) {
  .add {
    max-width: 100%;
    height: 100%;
  }

  .Bnr__img {
    max-width: 100%;
  }

  .Bnr__img__inner {
    max-width: 100%;
    box-sizing: border-box;
    padding: 10px;
  }
  .Bnr__img__inner2 {
    max-width: 100%;
    box-sizing: border-box;
    padding: 10px;
  }
}

@media screen and (min-width: 768px) {
  .br-sp {
    display: none;
  }
}

@media screen and (min-width: 1024px) {
  .add {
    width: 710px;
    height: 100%;
  }
}

@media screen and (min-width: 768px) {
  .br-sp {
    display: none;
  }
  .sp {
    display: none;
  }
}

@media screen and (min-width: 1024px) {
  .add {
    width: 710px;
    height: 100%;
  }
}