@charset "utf-8";

/**
 * ***************************************
 * ページ全体に関わるCSSの設定
 * ***************************************
 */
html *,
::before,
::after {
  box-sizing: border-box;
}
html {
  font-size: 14px;
}
body {
  color: #333;
  font-family: Hiragino Kaku Gothic ProN,  sans-serif;

}
/* 標準的なリンクのテキスト色 */
a {
  color: #f30;
}
/* レスポンシブイメージと画像下スペース防止 */
img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;/* 画像下のスペースを消す */
}

/**
 * ***************************************
 * ヘッダー
 * ***************************************
 *
 * ヘッダーコンテナ
 */
 .page-header {
  background-color: #ccc;
 }

 .header-container {
  padding: 0px 0 0 0;
}
/**
 * ---------------------------------------
 * ヘッダーモジュール
 */
.sitetitle {
 display: flex;
 justify-content: space-between;
 align-items: center;
}

.header-logo {
 margin: 0;
 padding-left: 0px;
 font-size: 0;
 line-height: 0;
}

.header-logo img {
 width: 225px;
}

/* ヘッダーボタン */
.navbtn {
 display: block;
 width: 60px;
 height: 60px;
 background-image: url("../img/nav-mobile-open.svg");
 background-repeat: no-repeat;
 background-position: center center;
}

.navbtn.close {
  background-image: url("../img/nav-mobile-close.svg");
}

/* ナビゲーションリンク */
.header-nav {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.header-nav.collapse {
  display: none;
}

.header-nav li a {
  display: block;
  padding: 20px 50px;
  border-top: 1px solid #d8d8d8;
  background: #efefef;
  color: #000;
  font-size: 1.25rem;
  text-decoration: none;
  background-position: 5px center;
  background-size: 35px;
  background-repeat: no-repeat;
}

.header-nav li a:hover {
  background: #b8e5ea;
  background-position: 5px center;
  background-size: 35px;
  background-repeat: no-repeat;
}

/**
 * ***************************************
 * メインコンテナ
 * ***************************************
 */
/**
 * ***************************************
 * ページ - メインコンテナ
 * ***************************************
 */
.basicpage .main-container {
  padding: 20px 6px 20px 6px;
}

.cheerresult h1 {
  margin: 0 0 10px 0;
  font-size: 1.5rem;
  line-height: 1.5;
}

.cheerresultbox {
  background-color: rgba(255, 255, 192, 0.2);
  border-top: 5px solid #ffc000;
  border-bottom: 5px solid #ffc000;
  margin: 0 0 5px 0;
}

.cheerresultbox_f {
  background-color: rgba(4, 97, 152, 0.2);
  border-top: 5px solid #046198;
  border-bottom: 5px solid #046198;
}

.cheerresultbox_e {
  background-color: rgba(135, 0, 17, 0.2);
  border-top: 5px solid #870011;
  border-bottom: 5px solid #870011;
}

.cheerresultbox_l {
  background-color: rgba(4, 31, 69, 0.2);
  border-top: 5px solid #041f45;
  border-bottom: 5px solid #041f45;
}

.cheerresultbox_m {
  background-color: rgba(128, 128, 128, 0.2);
  border-top: 5px solid #808080;
  border-bottom: 5px solid #808080;
}

.cheerresultbox_b {
  background-color: rgba(0, 1, 33, 0.2);
  border-top: 5px solid #000121;
  border-bottom: 5px solid #000121;
}

.cheerresultbox_h {
  background-color: rgba(255, 192, 0, 0.2);
  border-top: 5px solid #ffc000;
  border-bottom: 5px solid #ffc000;
}

.cheerresultbox_g {
  background-color: rgba(245, 155, 0, 0.2);
  border-top: 5px solid #f59b00;
  border-bottom: 5px solid #f59b00;
}

.cheerresultbox_ys {
  background-color: rgba(15, 19, 80, 0.2);
  border-top: 5px solid #0f1350;
  border-bottom: 5px solid #0f1350;
}

.cheerresultbox_db {
  background-color: rgba(0, 64, 145, 0.2);
  border-top: 5px solid #044ec7;
  border-bottom: 5px solid #044ec7;
}

.cheerresultbox_d {
  background-color: rgba(0, 65, 142, 0.2);
  border-top: 5px solid #00418e;
  border-bottom: 5px solid #00418e;
}

.cheerresultbox_t {
  background-color: rgba(255, 225, 0, 0.2);
  border-top: 5px solid #ffe100;
  border-bottom: 5px solid #ffe100;
}

.cheerresultbox_c {
  background-color: rgba(234, 57, 49, 0.2);
  border-top: 5px solid #ea3931;
  border-bottom: 5px solid #ea3931;
}

.cheerresultbox h1 {
  margin: 0;
  padding: 10px;
  font-size: 1.5rem;
  line-height: 1.5;
  text-align: center; /* 中央寄せを追加 */
}

/* 観戦成績のマーカー表示 */
.cheerresult mark {
  background:linear-gradient(transparent 85%, #000000 15%);
  display: inline;
}

.cheerresult mark.marker_f {
  background:linear-gradient(transparent 85%, #046198 15%);
  display: inline;
}

.cheerresult mark.marker_e {
  background:linear-gradient(transparent 85%, #870011 15%);
  display: inline;
}

.cheerresult mark.marker_l {
  background:linear-gradient(transparent 85%, #041f45 15%);
  display: inline;
}

.cheerresult mark.marker_m {
  background:linear-gradient(transparent 85%, #808080 15%);
  display: inline;
}

.cheerresult mark.marker_b {
  background:linear-gradient(transparent 85%, #000121 15%);
  display: inline;
}

.cheerresult mark.marker_h {
  background:linear-gradient(transparent 85%, #ffc000 15%);
  display: inline;
}

.cheerresult mark.marker_g {
  background:linear-gradient(transparent 85%, #f59b00 15%);
  display: inline;
}

.cheerresult mark.marker_ys {
  background:linear-gradient(transparent 85%, #0f1350 15%);
  display: inline;
}

.cheerresult mark.marker_db {
  background:linear-gradient(transparent 85%, #044ec7 15%);
  display: inline;
}

.cheerresult mark.marker_d {
  background:linear-gradient(transparent 85%, #00418e 15%);
  display: inline;
}

.cheerresult mark.marker_t {
  background:linear-gradient(transparent 85%, #ffe100 15%);
  display: inline;
}

.cheerresult mark.marker_c {
  background:linear-gradient(transparent 85%, #ea3931 15%);
  display: inline;
}

/* 日程表チーム選択部分 */

/* 年月選択部分*/
.yearselect,
.monthselect {
 display: flex;
 align-items: center;
}

.yearselect {
  overflow-x: auto; /* 横スクロール可能にする */
  white-space: nowrap; /* 改行を防ぐ */
  -webkit-overflow-scrolling: touch; /* スマホのスムーズスクロール */
}

.teamselect{
  display: inline-block;
}
 
.yearnav,
.monthnav {
 list-style: none; /* リストのデフォルトスタイルを削除 */
 padding: 0; /* パディングをリセット */
 margin: 0; /* マージンをリセット */
}

.yearnav {
  display: flex; /* 横並びにする */
  gap: 5px; /* 年ごとの間隔を調整 */
}

.teamnav {
  list-style: none; /* リストのデフォルトスタイルを削除 */
  padding: 0; /* パディングをリセット */
  margin: 0; /* マージンをリセット */
  float: left; /* 左寄せ */
  margin-right: 8px; /* 右のマージンを追加 */
}

.yearnav li,
.monthnav li {
 display: inline-block; /* 要素を横並びに配置 */
 margin-right: 15px;
 margin-bottom: 10px;
}

.yearnav li {
  flex-shrink: 0; /* 幅が縮まないようにする */
  margin-right: 1px;
}

.teamnav li {
  margin-bottom: 10px; /* 下のマージンを追加 */
}

.yearnav li a,
.monthnav li a,
.teamnav li a,
.yearnav li span,
.monthnav li span,
.teamnav li span {
 display: flex; /* リンク内のテキストをFlexコンテナにする */
 align-items: center; /* テキストを中央揃えにする */
 justify-content: center; /* 横方向を中央揃えにする */
 text-align: center;
 border: 1px solid #000000;
 background-color: #ffffff;
 color: #000000;
 text-decoration: none;
}

.teamnav li a,
.teamnav li span {
 font-size: 1.25rem;
 height: 40px;
 width: 40px;
 border-radius: 10px;
}

.teamnav li .nonselectedteam_n {
 border: 1px solid #ccc;
 background-color: #ffffff;
 color: #000000;
}

.teamnav li .selectedteam_n,
.teamnav li .nonselectedteam_n:hover {
 border: 1px solid #ffffff;
 background-color: #ccc;
 color: #ffffff;
}

.yearnav li a,
.yearnav li span {
 font-size: 1.25rem;
 height: 40px;
 width: 90px;
 border-radius: 10px;
}
.monthnav li a,
.monthnav li span {
 font-size: 1.0em;
 height: 30px;
 width: 60px;
 border-radius: 5px;
}

.yearnav li .selectedyear,
.yearnav li a:hover,
.monthnav li .selectedmonth,
.monthnav li a:hover {
 background-color: #000000;
 color: #ffffff;
}

.monthnav li .nonselectedmonth_n,
.yearnav li .nonselectedyear_n {
  border: 1px solid #ccc;
  background-color: #ffffff;
  color: #000000;
}

.yearnav li .selectedyear_n,
.yearnav li .nonselectedyear_n:hover,
.monthnav li .selectedmonth_n,
.monthnav li .nonselectedmonth_n:hover {
  border: 1px solid #ffffff;
  background-color: #ccc;
  color: #ffffff;
}


.monthnav li .nonselectedmonth_f,
.yearnav li .nonselectedyear_f {
  border: 1px solid #046198;
  background-color: #ffffff;
  color: #046198;
}

.yearnav li .selectedyear_f,
.yearnav li .nonselectedyear_f:hover,
.monthnav li .selectedmonth_f,
.monthnav li .nonselectedmonth_f:hover {
  border: 1px solid #046198;
  background-color: #046198;
  color: #ffffff;
}

.yearnav li .nonselectedyear_e,
.monthnav li .nonselectedmonth_e {
  border: 1px solid #870011;
  background-color: #ffffff;
  color: #870011;
}

.yearnav li .selectedyear_e,
.yearnav li .nonselectedyear_e:hover,
.monthnav li .selectedmonth_e,
.monthnav li .nonselectedmonth_e:hover {
  border: 1px solid #870011;
  background-color: #870011;
  color: #ffffff;
}

.yearhnav li .nonselectedyear_l,
.monthnav li .nonselectedmonth_l {
  border: 1px solid #041f45;
  background-color: #ffffff;
  color: #041f45;
}

.yearnav li .selectedyear_l,
.yearnav li .nonselectedyear_l:hover,
.monthnav li .selectedmonth_l,
.monthnav li .nonselectedmonth_l:hover {
  border: 1px solid #041f45;
  background-color: #041f45;
  color: #ffffff;
}

.yearnav li .nonselectedyear_m,
.monthnav li .nonselectedmonth_m {
  border: 1px solid #808080;
  background-color: #ffffff;
  color: #808080;
}

.yearnav li .selectedyear_m,
.yearnav li .nonselectedyear_m:hover,
.monthnav li .selectedmonth_m,
.monthnav li .nonselectedmonth_m:hover {
  border: 1px solid #808080;
  background-color: #808080;
  color: #ffffff;
}

.yearnav li .nonselectedyear_b,
.yearnav li .nonselectedyear_b {
  border: 1px solid #000121;
  background-color: #ffffff;
  color: #000121;
}

.yearnav li .selectedyear_b,
.yearnav li .nonselectedyear_b:hover,
.monthnav li .selectedmonth_b,
.monthnav li .nonselectedmonth_b:hover {
  border: 1px solid #000121;
  background-color: #000121;
  color: #ffffff;
}

.yearnav li .nonselectedyear_h,
.monthnav li .nonselectedmonth_h {
  border: 1px solid #ffc000;
  background-color: #ffffff;
  color: #000;
}

.yearnav li .selectedyear_h,
.yearnav li .nonselectedyear_h:hover,
.monthnav li .selectedmonth_h,
.monthnav li .nonselectedmonth_h:hover {
  border: 1px solid #ffc000;
  background-color: #ffc000;
  color: #ffffff;
}

.yearnav li .nonselectedyear_g,
.monthnav li .nonselectedmonth_g {
  border: 1px solid #f59b00;
  background-color: #ffffff;
  color: #f59b00;
}

.yearnav li .selectedyear_g,
.yearnav li .nonselectedyear_g:hover,
.monthnav li .selectedmonth_g,
.monthnav li .nonselectedmonth_g:hover {
  border: 1px solid #f59b00;
  background-color: #f59b00;
  color: #ffffff;
}

.yearnav li .nonselectedyear_ys,
.monthnav li .nonselectedmonth_ys {
  border: 1px solid #0f1350;
  background-color: #ffffff;
  color: #0f1350;
}

.yearnav li .selectedyear_ys,
.yearnav li .nonselectedyear_ys:hover,
.monthnav li .selectedmonth_ys,
.monthnav li .nonselectedmonth_ys:hover {
  border: 1px solid #0f1350;
  background-color: #0f1350;
  color: #ffffff;
}

.yearnav li .nonselectedyear_db,
.monthnav li .nonselectedmonth_db {
  border: 1px solid #044ec7;
  background-color: #ffffff;
  color: #044ec7;
}

.yearnav li .selectedyear_db,
.yearnav li .nonselectedyear_db:hover,
.monthnav li .selectedmonth_db,
.monthnav li .nonselectedmonth_db:hover {
  border: 1px solid #044ec7;
  background-color: #044ec7;
  color: #ffffff;
}

.yearnav li .nonselectedyear_d,
.monthnav li .nonselectedmonth_d {
  border: 1px solid #00418e;
  background-color: #ffffff;
  color: #00418e;
}

.yearnav li .selectedyear_d,
.yearnav li .nonselectedyear_d:hover,
.monthnav li .selectedmonth_d,
.monthnav li .nonselectedmonth_d:hover {
  border: 1px solid #00418e;
  background-color: #00418e;
  color: #ffffff;
}

.yearnav li .nonselectedyear_t,
.monthnav li .nonselectedmonth_t {
  border: 1px solid #ffe100;
  background-color: #ffffff;
  color: #000000;
}

.yearnav li .selectedyear_t,
.yearnav li .nonselectedyear_t:hover,
.monthnav li .selectedmonth_t,
.monthnav li .nonselectedmonth_t:hover {
  border: 1px solid #ffe100;
  background-color: #ffe100;
  color: #000000;
}

.yearnav li .nonselectedyear_c,
.monthnav li .nonselectedmonth_c {
  border: 1px solid #ea3931;
  background-color: #ffffff;
  color: #ea3931;
}

.yearnav li .selectedyear_c,
.yearnav li .nonselectedyear_c:hover,
.monthnav li .selectedmonth_c,
.monthnav li .nonselectedmonth_c:hover {
  border: 1px solid #ea3931;
  background-color: #ea3931;
  color: #ffffff;
}

/* Xポストボタン */
.x-share-button {
  margin: 4px 0px 0px 0px;
  white-space: nowrap;
  overflow: hidden;
  text-align: left;
  height: 40px;
  line-height: 27px;
  font-weight: 500;
  font-size: 18px;
}

.x-share-button a {
  display: inline-block;
  height: 40px;
  box-sizing: border-box;
  padding: 1px 18px 1px 18px;
  background-color: #eee;
  color: #000;
  border-color: #000;
  border-style: solid;
  border-radius: 9999px;
  text-decoration: none;
  cursor: pointer;
}

.x-share-button i {
  position: relative;
  top: 3px;
  display: inline-block;
  width: 20px;
  height: 15px;
  background: transparent 0 0 no-repeat;
  background-image: url('../img/x_logo-black.png');
  background-size: 15px;
}

.x-share-button span {
  display: inline-block;
  vertical-align: middle;
}

/* 試合結果表示*/
.scoreList {
  display: grid;
  width: 365px;
  height: 70px;
  grid-template-columns: 60px 5px 100px 35px 25px 35px 100px 5px;
  grid-template-rows: 14px 40px 14px;
  margin: 5px 0 0 0;
  border-bottom: 1px solid #e9e9e9;
  place-items: center;
}

.scoreList_datebox {
  grid-row: 1/4;
  grid-column: 1/2;
  width: 60px;
}

.scoreList_gamecategorybox {
  grid-row: 1/2;
  grid-column: 2/9;
}

.scoreList_hometeamcolorbox {
  grid-row: 2/3;
  grid-column: 2/3;
  background-color: #000;
  width: 5px;
  height: 20px;
}

.scoreList_visitorteamcolorbox {
  grid-row: 2/3;
  grid-column: 8/9;
  background-color: #000;
  width: 5px;
  height: 20px;
}
.scoreList_teamcolor_f {
  background-color: #046198;
}
.scoreList_teamcolor_e {
  background-color: #870011;
}
.scoreList_teamcolor_l {
  background-color: #041f45;
}
.scoreList_teamcolor_m {
  background-color: #808080;
}
.scoreList_teamcolor_b {
  background-color: #000121;
}
.scoreList_teamcolor_h {
  background-color: #ffc000;
}
.scoreList_teamcolor_g {
  background-color: #f59b00;
}
.scoreList_teamcolor_ys {
  background-color: #0f1350;
}
.scoreList_teamcolor_db {
  background-color: #044ec7;
}
.scoreList_teamcolor_d {
  background-color: #00418e;
}
.scoreList_teamcolor_t {
  background-color: #ffe100;
}
.scoreList_teamcolor_c {
  background-color: #ea3931;
}

.scoreList_hometeambox {
  grid-row: 2/3;
  grid-column: 3/4;
}

.scoreList_homeScorebox {
  grid-row: 2/3;
  grid-column: 4/5;
}

.scoreList_scorehyphenbox {
  grid-row: 2/3;
  grid-column: 5/6;
}

.scoreList_visitorScorebox {
  grid-row: 2/3;
  grid-column: 6/7;
}

.scoreList_visitorteambox {
  grid-row: 2/3;
  grid-column: 7/8;
}

.scoreList_stadiumbox {
  grid-row: 3/4;
  grid-column: 2/9;
  padding: 0 0 5px 0;
}

/* 日付 */
.scoreList_date{
  font-size: 11px;
  margin: 0 0 4px;
}

/* プレイボール時刻 */
.scoreList_time {
  font-size: 11px;
  margin: 0 0 4px;
}

/* 試合開催状況 */
.scoreList_state {
  font-size: 11px;
  margin: 0 0 0px;
}

/* 球場名 */
.scoreList_stadium {
  font-size: 12px;
  margin: 0px;
}

/* 試合区分 */
.scoreList_gamecategory {
  font-size: 12px;
  margin: 0px;
}

/* ホームチーム名 */
.scoreList_hometeam {
  font-size: 16px;
  font-weight: bold;
  line-height: 1;
  font-feature-settings: "palt" 1;
  margin: 0px;
}

/* ビジターチーム名 */
.scoreList_visitorteam {
  font-size: 16px;
  font-weight: bold;
  line-height: 1;
  font-feature-settings: "palt" 1;
  margin: 0px;
}

/* ホームチーム得点 */
.scoreList_homeScore {
  font-size: 24px;
  font-weight: bold;
  margin: 0px;
}

/* ビジターチーム得点 */
.scoreList_visitorScore {
  font-size: 24px;
  font-weight: bold;
  margin: 0px;
}


/* 敗戦チームの文字色 */
.scoreList_loseteamcolor {
  color: #888; 
}

/**
* ***************************************
* ページ - ログイン/新規会員登録コンテナ
* ***************************************
*/
.basicpage .login-container {
 padding: 20px 6px 20px 6px;
}

.login-area {
 width: 85%;
 background: #ddd;
 border: 1px solid #aaa;
 border-radius: 10px;
 text-align: center;
 /* 水平方向の中央揃え */
 margin: 0 auto;
}

.loginheader h1 {
 margin: 0 0 20px 0;
 font-size: 1.5rem;
 line-height: 1.5;
}

.loginokheader h1 {
  margin: 0 0 20px 0;
  font-size: 1.25rem;
  line-height: 1.5;
}

.loginngheader h1 {
  margin: 0 0 20px 0;
  font-size: 1.25rem;
  color: #f00;
  line-height: 1.5;
}

.logoutheader h1 {
  margin: 0 0 20px 0;
  font-size: 1.25rem;
  color: #f00;
  line-height: 1.5;
}

.login-area .formItem {
  margin-bottom: 2em;
  align-items: center;
}
 
input[type=text], input[type=email], input[type=password], textarea[type=text], select {
  padding: 10px;
  border: 1px solid #999;
  width: 80%;
  border-radius: 5px;
}

input[type=submit] {
  background: #d70c19;
  border: none;
  width: 80%;
  padding: 10px;
  border-radius: 5px;
  color: #fff;
  margin-left: auto;
  margin-right: auto;
}

.backbutton {
  background:#c0c0c0;
  border: none;
  width: 80%;
  padding: 10px;
  border-radius: 5px;
  color: #fff;
  margin: 20px auto 10px auto;
 }

input[type=submit].watchedgameeditsubmit {
  position: fixed;
  bottom: 10px; /* 画面下部からの距離 */
  right: 10px; /* 画面右端からの距離 */
  z-index: 999; /* 必要に応じてz-indexを設定 */
}
 
.basicpage .signup-container {
  padding: 20px 6px 20px 6px;
}
  
.signup-area {
  width: 85%;
  background: #ddd;
  border: 1px solid #aaa;
  border-radius: 10px;
  text-align: center;
  /* 水平方向の中央揃え */
  margin: 0 auto;
}

.signup-area .linebutton ,
.login-area .linebutton {
  display: block;
  background: #06C755;
  border: none;
  width: 80%;
  padding: 10px 10px 10px 30px;
  border-radius: 5px;
  color: #fff;
  text-decoration: none;
  margin: 20px auto;
  background-position: 5px center;
  background-size: 30px;
  background-repeat: no-repeat;
  background-image: url("../img/LINE.png");
}

.signup-area .linebutton:hover ,
.login-area .linebutton:hover {
  background: rgba(6, 199, 85, 0.9); /* 不透明度を追加 */
  background-position: 5px center;
  background-size: 30px;
  background-repeat: no-repeat;
  background-image: url("../img/LINE.png");
}

.signup-area .mailbutton ,
.login-area .mailbutton {
  display: block;
  background: #2862ae;
  border: none;
  width: 80%;
  padding: 10px 10px 10px 30px;
  border-radius: 5px;
  color: #fff;
  text-decoration: none;
  margin: 20px auto;
  background-position: 5px center;
  background-size: 30px;
  background-repeat: no-repeat;
  background-image: url("../img/mail_white.png");
}

.signup-area .mailbutton:hover ,
.login-area .mailbutton:hover {
  background: rgba(40, 98, 174, 0.9); /* 不透明度を追加 */
  background-position: 5px center;
  background-size: 30px;
  background-repeat: no-repeat;
  background-image: url("../img/mail_white.png");
}

.signupheader h1 {
  margin: 0 0 20px 0;
  font-size: 1.5rem;
  line-height: 1.5;
}

.signup-area .formItem {
  margin-bottom: 2em;
  align-items: center;
}

.autologinattention {
  padding: 0px 10px 0px 10px;
  font-size: 0.75rem;
  color: #c00;
}

/**
* ***************************************
* ページ - マイページコンテナ
* ***************************************
*/
.basicpage .mypage-container {
  padding: 20px 6px 20px 6px;
 }
 
.mypage-area {
 width: 85%;
 background: #ddd;
 border: 1px solid #aaa;
 border-radius: 10px;
 text-align: center;
 /* 水平方向の中央揃え */
 margin: 0 auto;
}

.mypage-area .header {
 margin: 0 0 20px 0;
}

.mypage-area .header h1 {
 font-size: 1.5rem;
 line-height: 1.5;
}

.mypage-area .header h2 {
 font-size: 1.15rem;
 line-height: 1.15;
}

.mypage-area .category {
 background-color: #c2c2c2;
 width: 80%;
 height: 40px;
 /* 水平方向の中央揃え */
 margin: 5px auto 0px;
 display: flex;
 justify-content: center;
 align-items: center;
 border-top: 1px solid #999;
 border-left: 1px solid #999;
 border-right: 1px solid #999;
 border-radius: 5px 5px 0 0;
}

.mypage-area .value {
 background-color: #fff;
 font-weight: 500;
 width: 80%;
 min-height: 50px;
 /* 水平方向の中央揃え */
 margin: 0px auto 15px;
 display: flex;
 justify-content: center;
 align-items: center;
 border: 1px solid #999;
 border-radius: 0 0 5px 5px;
}

.mypage-area .valueoldpass {
 border-radius: 0;
 margin: 0px auto 0px;
}

.mypage-area .categorynewpass {
 border-radius: 0;
 margin: 0px auto 0px;
 border-top: 0px solid #999;
}


.mypage-area .button {
 background: #d70c19;
 border: none;
 width: 80%;
 padding: 10px;
 border-radius: 5px;
 color: #fff;
 margin: 20px auto 10px auto;
}

.mypage-area .backbutton {
  background:#c0c0c0;
  border: none;
  width: 80%;
  padding: 10px;
  border-radius: 5px;
  color: #fff;
  margin: 20px auto 10px auto;
 }
 

/**
 * ***************************************
 * ページ下部
 * ***************************************
 *
 * ページ下部コンテナ
 */
 .page-bottom {
  background-color: #ccc;
 }
 .bottom-container {
  padding: 10px 10px 10px 10px;
}

/**
 * ---------------------------------------
 * ページ下部モジュール
 */

/**
 * ***************************************
 * フッター
 * ***************************************
 *
 * フッターコンテナ
 */
.page-footer {
  background: #000;
}
 .footer-container {
  padding: 20px 20px 20px 20px;
  text-align: center;
  color: #fff;
}

.snstitle {
  margin: 0 0 5px 0;
  font-weight: 400;
  font-size: 1rem;
  text-align: center;
}
.sns {
  display: flex;
  justify-content: center;
}
.sns div {
  margin: 0 10px;
}

.sns div a {
  display: block;
  width: 50px;
  height: 50px;
  background: #424242;
  border-radius: 50%;
  font-size: 20px;
  line-height: 50px;
  text-align: center;
  color: #ffffff;
}

.sns div a:hover {
  opacity: .8;
}

.topimage {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 0 auto 5px; /* 横方向中央寄せを追加 */
  padding: 0px;
}

.topimage .imagefile {
  display: block;
  width: 100%;
  height: 250px; /* 適切な高さを指定 */
  background-image: url("../img/topimage.png");
  background-repeat: no-repeat;
  background-position: center center;
  /* background-position: left center; ロゴ右に試合結果を表示する場合*/
  background-size: contain;
}

/* トップページリンク */
.indexmenu {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.indexmenu li {
  padding: 5px 5px 5px 5px ;
}

.indexmenu li a {
  display: block;
  padding: 20px 20px 20px 70px;
  height: 60px;
  background: #eee;
  font-size: 24px;
  font-weight: 700;
  color: #000;
  line-height: 16px;
  text-decoration: none;
  border: #000;
  border-style: solid;
  border-width: 2px;
  border-radius: 10px;
  background-position: 5px center;
  background-size: 50px;
  background-repeat: no-repeat;
}


.header-nav .home ,
.header-nav .home:hover {
    background-image: url("../img/home.png");
}

.indexmenu .siteabout ,
.indexmenu .siteabout:hover ,
.header-nav .siteabout ,
.header-nav .siteabout:hover {
  background-image: url("../img/siteabout.png");
}

.indexmenu .schedule ,
.indexmenu .schedule:hover ,
.header-nav .schedule ,
.header-nav .schedule:hover {
  background-image: url("../img/schedule.png");
}

.indexmenu .login ,
.indexmenu .login:hover ,
.header-nav .login ,
.header-nav .login:hover {
  background-image: url("../img/login.png");
}

.indexmenu .register ,
.indexmenu .register:hover ,
.header-nav .register ,
.header-nav .register:hover {
  background-image: url("../img/register.png");
}

.indexmenu .favschedule ,
.indexmenu .favschedule:hover ,
.header-nav .favschedule ,
.header-nav .favschedule:hover {
  background-image: url("../img/favschedule.png");
}

.indexmenu .my89diary ,
.indexmenu .my89diary:hover ,
.header-nav .my89diary ,
.header-nav .my89diary:hover {
  background-image: url("../img/my89diary.png");
}

.indexmenu .watchedgameedit ,
.indexmenu .watchedgameedit:hover ,
.header-nav .watchedgameedit ,
.header-nav .watchedgameedit:hover {
  background-image: url("../img/watchedgameedit.png");
}

.indexmenu .mypage ,
.indexmenu .mypage:hover ,
.header-nav .mypage ,
.header-nav .mypage:hover {
  background-image: url("../img/mypage.png");
}

.indexmenu .logout,
.indexmenu .logout:hover ,
.header-nav .logout ,
.header-nav .logout:hover {
  background-image: url("../img/logout.png");
}

.indexmenu .faq,
.indexmenu .faq:hover ,
.header-nav .faq ,
.header-nav .faq:hover {
  background-image: url("../img/faq.png");
}

.indexmenu li a:hover {
  background-color: #b8e5ea;
}

.about {
  margin: 5px 0 0 0;
  padding: 10px;
  border-top: #ccc solid;
  border-width: 2px;
}

.about .aboutheader {
  font-size: 1.5rem;
  color: #d70c19;
  padding: 5px;
  background-color: #ffcccc;
  border-radius: 5px;
}

.about .aboutheader:before {
 content:'■';
}

.about .abouttext {
  font-size: 1.2rem;
  margin: 5px 0;
  padding: 0px 10px 10px 10px;
  line-height: 24px;
}

.imagescroll {
  display:flex;
  overflow-x:scroll;
  text-align:center;
}
.imagescroll img {
  width:35vw;
  max-width: none;
  padding:2vw;
}

.imagescroll2 {
  display:flex;
  overflow-x:scroll;
  text-align:center;
  justify-content: center;
}
.imagescroll2 img {
  width:35vw;
  max-width: none;
  padding:2vw;
}


/**
 * ---------------------------------------
 * フッターモジュール
 */
/* バージョン情報 */
/* コピーライト */
.version {
  font-size: .75rem;
  color: #d8d8d8;
  text-align: center;
  margin-bottom: 5px;
}

.copyright {
  font-size: .75rem;
  color: #d8d8d8;
  text-align: center;
  margin-top: 0px;
}


/* 免責事項 */
.disclaimer {
  font-size: .75rem;
  color: #d8d8d8;
  text-align: center;
}

.policy , .contact {
  font-size: 1rem;
  color: #d8d8d8;
  text-align: center;
  line-height: 1.75rem;
}

.policy:hover, .contact:hover {
  background-color: #b8e5ea;
}

.grid-container {
  display: flex;
  gap: 2px;
}

.subgrid-container {
  color: #fff;
  text-align: center;
  background-color: rgba(128, 128, 128, 1);
  width: 100%;
  border-radius: 5%;
  margin: 1px;
}

.index-record-f {
  background-color: rgba(4, 97, 152, 1);
}

.index-record-e {
  background-color: rgba(135, 0, 17, 1);
}

.index-record-l {
  background-color: rgba(4, 31, 69, 1);
}

.index-record-m {
  background-color: rgba(128, 128, 128, 1);
}

.index-record-b {
  background-color: rgba(0, 1, 33, 1);
}

.index-record-h {
  background-color: rgba(255, 192, 0, 1);
  color: #000;
}

.index-record-g {
  background-color: rgba(245, 155, 0, 1);
  color: #000;
}

.index-record-ys {
  background-color: rgba(15, 19, 80, 1);
}

.index-record-db {
  background-color: rgba(0, 64, 145, 1);
}

.index-record-d {
  background-color: rgba(0, 65, 142, 1);
}

.index-record-t {
  background-color: rgba(255, 225, 0, 1);
  color: #000;
}

.index-record-c {
  background-color: rgba(234, 57, 49, 1);
}

.streak-personal-area{
  padding: 0 0 4px 0;
}

.streak-personal1{
  font-size: 1.25rem;
  font-weight: 500;
  padding: 0 0 0px 0;
}
.streak-personal2{
  font-size: 1.875rem;
  font-weight: 800;
  padding: 0 0 4px 0;
}

.subgrid-container-description {
  font-size: 0.9rem;
  line-height: 0;
}

.subgrid-container-personal{
  font-size: 1.875rem;
  font-weight: 800;
  line-height: 0;
  padding: 0 4px 0 4px;
}

.subgrid-container-team{
  font-size: 0.75rem;
  line-height: 0;
}

.example_record {
  padding: 5px 0;
  font-size: 1.25rem;
  font-weight: 800;
  background-color: #ccc;
  border-radius: 5px;
  text-align: center;

}