/* 生成日時: 2025-07-15 10:15:00 JST */

@charset "utf-8";

/* ============================== */
/* CSSカスタムプロパティ (変数) の定義 */
/* サイト全体の主要な色などを一元管理します */
/* ============================== */
:root {
  --color-primary-text: #ffffff;
  --color-link: #ffffff;
  --color-link-hover: #ffff00;
  --color-accent: #00ffff;
  --color-background-body: #006633;
  --color-table-border: #ffffff;
  --color-dark-green: #006033;
  --color-black: #000000;
  --color-ad-placeholder: #006633;

  /* 背景色 #063 をRGBAで指定するために、RGB値を個別に変数定義 (0, 102, 51) */
  --color-background-body-r: 0;
  --color-background-body-g: 102;
  --color-background-body-b: 51;
}

/* ============================== */
/* グローバルリセットと基本スタイル */
/* 全ての要素に適用される共通のスタイル定義 */
/* ============================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.m-plus-1p-thin {
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.m-plus-1p-light {
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.m-plus-1p-regular {
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.m-plus-1p-medium {
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.m-plus-1p-bold {
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.m-plus-1p-extrabold {
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 800;
  font-style: normal;
}

.m-plus-1p-black {
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 900;
  font-style: normal;
}

body {
  font-family: 'M PLUS 1p', sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-primary-text);
  text-align: center;
  overflow-x: hidden;
}

a {
  color: var(--color-link);
  font-weight: bold;
  text-decoration: none;
  transition: color 0.3s ease, text-decoration 0.3s ease;
}

a:visited{
  color: var(--color-link);
}

a:hover{
  color: var(--color-link-hover);
  text-decoration: underline;
}

a img {
  border-style:none;
}

/* ============================== */
/* サイト全体の背景とコンテンツラッパー */
/* ============================== */
#background{
  /* 複数の背景レイヤーを使用します */
  /* 1. 半透明の黒色オーバーレイ (背景画像を薄く見せるため) */
  /* 2. 背景画像 (background.svg) */
  /* 3. ベースの背景色 (var(--color-background-body)) */
  background: 
  var(--color-background-body); /* ベースの背景色 */
  width:100%;
  min-width:1024px;
}

#contents{
  width:100%;
  max-width:1024px;
  margin: 0 auto;
  overflow: hidden;
}

/* ============================== */
/* トップページ専用スタイル */
/* ============================== */
.homepage-intro-text {
    text-align: center;
    margin-top: 0px; /* メニューバーからの余白 */
    margin-bottom: 50px; /* 紹介文と球場一覧の間の余白 */
    color: var(--color-primary-text);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px; /* 左右の余白 */
}

/* homepage-intro-text 内のコンテンツ（段落や見出し）のスタイルを調整 */
.homepage-intro-text p,
.homepage-intro-text h1,
.homepage-intro-text .wp-block-paragraph, /* ブロックエディタがPタグに付与するクラス */
.homepage-intro-text .wp-block-heading /* ブロックエディタが見出しに付与するクラス */
{
    font-size: 1.6rem !important; /* <--- 修正: カテゴリータイトルと同じサイズに、!importantで強制 */
    line-height: 1.6;
    letter-spacing: 2px;
    font-weight: 500 !important; /* <--- 修正: カテゴリータイトルと同じ太さに、!importantで強制 */
    margin-top: 0 !important; /* ブロックエディタが自動で付与するマージンをリセット */
    margin-bottom: 0 !important; /* ブロックエディタが自動で付与するマージンをリセット */
    padding: 0 !important; /* ブロックエディタが自動で付与するパディングをリセット */
    color: var(--color-primary-text) !important; /* 色を強制 */
}

/* ============================== */
/* ヘッダーセクション */
/* サイトロゴと上部広告バナーの配置 */
/* ============================== */

#header{
  height:130px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 70px;
}

/* サイトロゴのラッパー */
.logo{}

/* 上部広告バナーのエリア */
.banner-top{
  width:468px !important;
  height:60px !important;
  margin-left:15px;
}

/* ============================== */
/* ナビゲーションメニュー */
/* サイトの主要カテゴリリンク */
/* ============================== */
#menu{
  height:35px;
  background-color: rgba(0, 0, 0, 0.6);
  color: var(--color-primary-text);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  position:relative;
  overflow-x: hidden;
  border-radius:8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.menu-list{  
  list-style-type:none;
  display: flex;
  gap: 90px;
  padding:0;
  margin:0;
  flex-wrap:wrap;
  justify-content:center;
  width:100%;
  overflow: hidden;
}

.menu-list li a{  
  letter-spacing:1px;
  padding:5px 0;
  white-space:nowrap;
  display: block;
}

/* ============================== */
/* メインコンテンツエリア */
/* 球場イラストとデータセクションのラッパー */
/* ============================== */
#main-content{
  color: var(--color-primary-text);
  padding:30px 0;
}

/* 球場イラストとデータパネルのコンテナ */
.stadium-detail-container{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap:30px;
  max-width:1024px;
  margin:0 auto;
}

/* 左パネル (イラストと選択肢) */
.left-panel, .capturea {
  flex: 1;
  min-width:300px;
  max-width:475px;
  padding:5px;
 /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0);*/
  }

/* 右パネル (データ) - 左パネルと共通スタイルだがmax-widthを維持 */
.right-panel{
 width:475px;
 border-radius:8px; /* FIX: 8px に修正 */
 background-color: rgba(0, 0, 0, 0.15); 
}

/* #captureArea のスタイルを再設計 (PC版) */
#captureArea {
    padding: 10px;
    margin: 0 auto; /* 中央寄せ */
    width: 100%; /* 親要素の幅いっぱいに */
    max-width: 500px; /* PCでの最大幅 */
    height: auto; /* 高さはコンテンツに合わせる */
    min-height: 480px; /* 最低限の高さを保証（大きい画像に対応するため調整） */
    background-color: #006633;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* コンテンツを上揃えにする */
    align-items: center; /* 水平方向中央揃え */
    overflow: hidden; /* <--- 修正: はみ出しを許容（画像が切れないように） */
    position: relative;
    
    /* 極端なwidthやtransformはここで削除済み */
}

/* .illust-display のスタイルを調整 */
.illust-display {
  width: 100%; /* 親要素 (#captureArea) の幅いっぱいに広げる */
  position: relative; /* padding-bottomで高さを定義するため */
  padding-bottom: 100%; /* 親要素の幅に対する比率で高さを確保（例: 正方形なら100%）。これが重要 */
                        /* 画像のアスペクト比に合わせて調整してください (例: 1:1なら100%, 4:3なら75%) */
                        /* 基本的には、イラストが収まる最大の正方形に近いサイズを設定すると良いでしょう */
  display: flex; /* 子要素を中央寄せするため */
  justify-content: center;
  align-items: center;
  margin-top: 10px; /* イラスト全体の表示位置を下にずらす */
  margin-left: 0;
  overflow: hidden; /* <--- 修正: イラストがはみ出す場合はここで隠す */
  height: 0; /* padding-bottomで高さを定義するため、heightは0にする */
  /*filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.3));*/
}

/* illust-layer (baseImage/overlayImage) のスタイルを調整 */
.illust-display .illust-layer {
  position: absolute; /* 親要素の padding-bottom で確保された領域内に配置 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain; /* 親要素に収まるように画像を伸縮 */

  /* キャプチャエンジンの歪み補正はCSSの表示段階では行わない */
  /* transform: scale(1); を初期値として残し、必要であればJavaScriptで調整 */
  transform: scale(1);
  transform-origin: center center;
}

.illust-display #baseImage {
  z-index: 1;
  display: block;
}

.illust-display #overlayImage {
  z-index: 2;
  pointer-events: none;
}

/* 動的な比較テキスト表示 */
.compare-result-text {
  color: var(--color-primary-text);
  font-size: 1rem;
  font-weight: 500;
  text-align: center;
  margin-top: -15px; /* <--- 修正: イラストの下から比較テキストまでの距離を短縮 */
  margin-bottom: -5px; /* <--- 修正: 比較テキストの下からボタンまでの距離を短縮 */
  height: auto;
  display: block;
  line-height: 1.5em;
  letter-spacing:1px;
  position: relative;
  z-index: 98;
}

.compare-result-text .compare-text-white {
    color: var(--color-primary-text);
    overflow-wrap: break-word;
}

.compare-result-text .compare-text-accent {
    color: var(--color-accent);
    text-decoration: underline;
    overflow-wrap: break-word;
}

.compare-result-text .compare-text-accent:hover {
    color: var(--color-link-hover);
}

/* 比較テキストの3行目 (YAKYUJO.com) のスタイル */
.compare-result-text .compare-text-site-name {
    color: var(--color-primary-text);
    font-size: 0.9em; 
    font-weight: 700; 
    display: block;
    margin-top: 5px;
    letter-spacing:0.5px;
}

/* 球場選択ドロップダウン */
.stadium-selector{
  width:80%;
  max-width:500px;
  margin:-10px auto 0;
}

.stadium-selector select{
  width:80%;
  padding:8px;
  text-align: center; 
  font-size:0.9rem;
  font-weight: 700; 
  letter-spacing:0.75px;
  border:0px solid #cccccc;
  border-radius:4px;
  background-color:#f9f9f9;
  color:#333333;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23333' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592c.859 0 1.319 1.013.753 1.658L8.753 11.14a1 1 0 01-1.506 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
  cursor: pointer;
  position: relative;
  z-index: 99;
}

/* プルダウンにフォーカスが当たった時のスタイル */
.stadium-selector select:focus {
    outline: none;
    border: 0px solid #007bff; */
}

/* ドロップダウンリストのoptgroupラベルのスタイル */
.stadium-selector select optgroup {
    color: #cccccc;
    font-weight: bold;
    background-color: #333333;
    padding: 5px 10px;
}

/* option要素の背景色もoptgroupに合わせて調整が必要な場合があります */
.stadium-selector select option {
    background-color: #f9f9f9;
    color: #333333;
}

/* 球場名タイトル */
.stadium-title h1{
  padding:25px 25px;
  font-size:1.5rem;
  letter-spacing:2px;
  text-align:left;
  font-weight: 500;
}

/* ============================== */
/* データテーブルセクション */
/* 球場の寸法や名称変遷などのデータ表示 */
/* ============================== */
.stadium-data-section{
  display: flex;
  flex-direction: column;
  gap:25px;
}

/* 統合された単一のデータテーブル */
.stadium-data-table{
  width:100%;
  overflow:hidden;
  margin-bottom:10px;
}

.stadium-data-table table{
  width:100%;
  border-collapse:collapse;
}

/* th と td の共通スタイル（上下のパディングとボーダー） */
.stadium-data-table th, .stadium-data-table td{
  padding-top: 8px; /* 上パディング */
  padding-bottom: 8px; /* 下パディング */
  text-align:left;
  letter-spacing:2px;
  border-top:1px solid rgba(255,255,255,0.2);
  border-bottom:1px solid rgba(255,255,255,0.2);
}

.stadium-data-table tr:last-child th, .stadium-data-table tr:last-child td{
  /* border-bottom:none; */
}

/* 項目ラベル (th) のスタイル - ここで右側のスペースを調整 */
.stadium-data-table tr th{
  width:170px; /* 現状の幅を維持 */
  font-size:0.9rem;
  font-weight: 500;
  white-space: nowrap;
  padding-left: 30px; /* 左端揃えを維持 */
  padding-right: 0px;  /* ★ ラベルの右側を詰める値（ここを調整してください） */
}

/* データ項目 (td) のスタイル - 左側のスペースを調整（共通化） */
.stadium-data-table td{
  /* font-size, line-height, font-weight は個別のtdセレクタで設定 */
  padding-left: 0px;   /* ★ データの左側を詰める値（ここを調整してください） */
  padding-right: 20px; /* 右側のパディング（必要に応じて調整） */
}

/* 数値データ (td.data-value) - 個別のフォントスタイル */
.stadium-data-table tr:nth-child(-n+4) td.data-value{
  font-size:1.6rem;
  letter-spacing:2px;
  font-weight:700;
  white-space: nowrap;
  /* padding-leftとpadding-rightは上記の共通tdスタイルから継承 */
}

/* 注釈 (変更なし) */
.caption{
  font-size:0.6rem;
  letter-spacing:3px;
  vertical-align:baseline;
}

/* テキストデータ (td) - 個別のフォントスタイル */
.stadium-data-table tr:nth-child(n+5) td{
  line-height:1.5;
  font-size:0.75rem;
  font-weight:400;
  /* padding-leftとpadding-rightは上記の共通tdスタイルから継承 */
}

/* 備考 */
.other{
  width:100%;
  font-size:0.75rem;
  text-align:left;
  letter-spacing:2px;
  margin-top:-5px;
  padding:10px 30px;
  font-weight:400;
}

/* 関連項目 */
.related-links{
  width:100%;
  font-size:0.75rem;
  text-align:left;
  letter-spacing:2px;
  margin-top:-5px;
  padding:10px 30px;
  font-weight:400;
}

.related-links a{
  color: var(--color-link);
  text-decoration:underline;
  font-weight:400;
}

.related-links a:hover{
  color: var(--color-link-hover);
}

/* クリアフィックス (float要素のクリア) */
span.clear, div.clear{
  clear:both;
}

/* ============================== */
/* フッターセクション */
/* 著作権情報と下部広告バナー */
/* ============================== */
#footer-content {
  padding:0px 0;
  color: var(--color-primary-text);
}

.f-contents{
  width:100%;
  max-width:1024px;
  margin:0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap:10px;
  padding:0 20px;
}

/* ============================== */
/* フッター広告エリア */
/* ============================== */
.footer-banners-container {
    width: 100%;
    max-width: 990px;
    margin: 20px auto 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px; /* PC時の広告間の水平・垂直方向の余白 */
}

.footer-banner-item {
    /* PC用サイズ（モバイルではメディアクエリで上書き） */
    flex-basis: 468px; /* <--- PC用の幅 */
    max-width: 468px;  /* <--- PC用の最大幅 */
    width: 468px !important;   /* <--- PC用の固定幅を強制 */
    height: 60px !important;   /* <--- PC用の固定高さを強制 */
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-banner-wide {
    width: 970px !important;   /* <--- PC用の固定幅を強制 */
    height: 90px !important;   /* <--- PC用の固定高さを強制 */
    align-items: center;
    justify-content: center;
}

/* レスポンシブデザインのためのメディアクエリ */
@media (max-width: 768px) {
    /* ... 省略 ... */

    /* フッター内の広告バナーエリア (モバイル時) */
    .footer-banners-container{
        flex-direction: column; /* 縦並びにする */
        align-items: center; /* 中央揃え */
        gap: 15px; /* 縦並び時の広告間隔 */
        padding: -10px 10px; /* 左右の余白 */
    }

    .footer-banner-item{
        /* モバイル用サイズに上書き */
        width: 300px !important;   /* <--- 修正: モバイルで250px固定幅を強制 */
        max-width: 300px;           /* <--- 修正: 最大幅も250pxに */
        height: 250px !important;  /* <--- 修正: モバイルで250px固定高さを強制 */

        /* モバイルではflex-basisは不要 */
        flex-basis: auto; /* <--- 追加: モバイルではflex-basisをリセット */
    }
}

/* サイト情報 (about us) */
.about-us{
  width:100%;
  max-width:960px;
  font-size:0.65rem;
  line-height:1.75;
  letter-spacing:0.75px;
  text-align:left;
  font-weight:400;
  margin-bottom:20px;
}

.about-us a{
  font-weight:400;
  text-decoration:underline;
}
.about-us a:hover{
  text-decoration:underline;
}

.footer-space{
  height:50px;
  width:100%;
  clear:both;
}

/* ============================== */
/* レスポンシブデザインのためのメディアクエリ */
/* 画面幅が768px以下のデバイスに適用されるスタイル */
/* ============================== */
@media (max-width: 768px) {
    body {
        font-size: 13px;
        overflow-x: hidden;
    }

    /* モバイル版の illust-display も固定高さを考慮 */
    .illust-display {
        width: 100%;
        height: 350px; /* モバイルでのイラスト表示エリアの高さ固定 (必要に応じて調整) */
        margin-top: 0;
        margin-left: 0;
    }

    /* min-width設定を解除 */
    #background {
        min-width: unset;
    }
    /* ヘッダー */
    #header {
        flex-direction: column;
        height: auto;
        padding: 0px;
    }
    .logo, .banner-top {
        margin: 15px 0;
    }
    .banner-top {
        margin-top: 0px;
    }
    .banner-top { /* ディスプレイ広告 */
        order: 1;
    }
    .logo { /* サイトロゴ */
        order: 2;
    }

    /*
     * 問題点の解決: スマートフォン表示時の重なりとレイアウト調整
     * 現状の重なり問題を解消し、要素間の適切な間隔を確保します。
     */
    .stadium-selector {
        width:100%;
        margin-top: -10px;
        margin-bottom: 0px;
        margin-left:auto;
        margin-right:auto;
    }

    .compare-result-text {
        margin-top: -15px;
        margin-bottom: 7px;
        position: relative;
        z-index: 98;
     }

    /* #captureArea のスタイルを再設計 (モバイル版) */
    #captureArea {
        width: 100%; /* <--- 修正: 親要素の幅いっぱいに */
        max-width: 450px; /* PCと同じmax-widthか、モバイルに適した値を設定 */
        min-height: 380px; /* モバイルでの最低限の高さを保証 */
        margin: 15px auto 0; /* <--- 修正: 中央寄せと上部マージンをシンプルに */
                                /* margin-left, margin-right は auto */

        /* キャプチャエンジンのためのtransform補正はillust-layerに移譲 */
        transform: none; /* <--- 修正: transform をリセット */
    }
    body.is-ios #captureArea {
        /* width: 147%; は削除。#captureAreaのwidth:100%が基本 */
        /* max-width: 450px; は #captureAreaで一括定義 */
        /* margin-left: -70px; も削除 */
        transform: none; /* <--- 修正: transform をリセット */
    }
    /* iOS固有のキャプチャ歪み補正は illust-layer に記述 */
    body.is-ios .illust-display .illust-layer {
        transform: scale(1); /* <--- 初期値。iOSでの歪み補正をここで調整 (例: scaleX(1.05) など) */
    }


    /* .share-options はプルダウンの下にくるので、プルダウンのmargin-bottomで間隔を確保 */
    .share-options {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 0px;
        margin-bottom: 20px;
    }


    /* ナビゲーションメニュー (モバイル) - PCと同じ常に表示されるメニューバーに */
    #menu {
        height: auto;
        padding: 8px 5px;
        border-radius: 0;
    }

    .menu-list {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        padding: 0;
        margin: 0;
        width: 100%;
        overflow: hidden;
    }

    .menu-list li {
        flex-shrink: 0;
        width: auto;
    }

    .menu-list li a {
        padding: 8px 12px;
        font-size: 0.95rem;
        white-space: nowrap;
        border: none;
        border-radius: 0;
        display: block;
        background-color: transparent;
        font-weight: 500;
    }
    .menu-list li a:hover {
        background-color: transparent;
        text-decoration: underline;
    }

    /* メインコンテンツエリア */
    .stadium-detail-container {
        flex-direction: column;
        align-items: center;
    }
    /* スマホ時：球場名 (h1) をleft-panelの最上段に移動 */
    /* right-panel内のh1ラッパーを非表示にし、複製したものをleft-panelのプレースホルダーに表示 */
    .left-panel {
        position: relative;
        padding-top: 30px;
    }
    .right-panel .stadium-title { /* 右パネルの元のh1ラッパーを非表示 */
        display: none;
    }
    .stadium-title-mobile-placeholder { /* モバイル用h1のプレースホルダー */
        display: block;
        position: absolute;
        top: 10px;
        width: 100%;
        text-align: center;
        z-index: 10;
    }
    .stadium-title-mobile-placeholder h1 {
        font-size: 1.2rem;
        letter-spacing: 1.5px;
        color: var(--color-primary-text);
        line-height:1.3;
        padding: 0;
        font-weight: 500;
   }

    .left-panel, .right-panel {
        min-width: unset;
        width: 95%;
        max-width: 450px;
        padding: 5px;
    }

    /* 球場名タイトル (これはPC用のスタイルなので影響なし) */
    .stadium-title h1 {
        font-size: 1.8rem;
        text-align: center;
    }
    
.stadium-data-table th, .stadium-data-table td{
        padding-top: 8px;    /* 上パディングを維持 */
        padding-bottom: 8px; /* 下パディングを維持 */
        text-align:left;
        letter-spacing:2px;
        border-top:1px solid rgba(255,255,255,0.2);
        border-bottom:1px solid rgba(255,255,255,0.2);
    }

.stadium-data-table tr th{
      width:170px; /* 現状の幅を維持 */
      font-size:0.8rem;
      font-weight: 500;
      white-space: nowrap;
      padding-left: 25px; /* 左端揃えを維持 */
      padding-right: 0px;  /* ★ ラベルの右側を詰める値（ここを調整してください） */
    }
    
    /* スマホ時の数値データ (td.data-value) のパディングを調整 */
    .stadium-data-table tr:nth-child(-n+4) td.data-value{
        font-size:1.2rem; /* スマホ用フォントサイズを維持 */
        letter-spacing:1.5px;
        text-align:left;
        font-weight:700;
        padding-right: 25px; /* 右側のパディング（必要に応じて調整） */
    }
    
    /* スマホ時のテキストデータ (td) のパディングを調整 (このルールは新規追加の可能性が高い) */
    .stadium-data-table tr:nth-child(n+5) td{
        line-height:1.5;
        font-size:0.75rem;
        font-weight:400;
        padding-right: 10px; /* 右側のパディング（必要に応じて調整） */
    }


    /* スマホ時：データテーブルの一番上の行のボーダーをすべて削除 */
    .stadium-data-table table tr:first-child th,
    .stadium-data-table table tr:first-child td {
        border-top: none;
    }

    /* 備考 */
    .other{
      padding:5px 25px;
      font-weight:400;
    }   


    /* 関連項目 */
    .related-links {
       padding:10px 25px ;
       text-align: left;
   }
   
   .f-contents{
  margin-top:-15px;
}

    /* フッターの広告バナーエリア */
    .footer-banners {
        flex-direction: column;
        align-items: center; 
    }
    
    .banner-left, .banner-right {
        width: 95%;
        max-width: 468px;
        margin-top:-50px;
    }
     
    .about-us {
        text-align: left;
        width: 95%;
        margin-bottom:20px;
    }
} /* @media (max-width: 768px) の閉じ括弧 */

/* main.css の末尾、または関連するセクションに追記 */
.action-button {
    background-color: #ffff00;
    color: #333333;
    border: none;
    padding: 8px 20px;
    margin: 5px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.9rem;
    transition: background-color 0.3s ease;
    white-space: nowrap;
}

.action-button:hover {
   color: #ffffff;
   background-color: #de3d12;
   /* outline: 0px solid #000000; */
   /* outline-offset: 0px; */
}


/* スマホ表示時のボタン調整 */
@media (max-width: 768px) {
    .share-options {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 0px;
        margin-bottom: 20px;
    }
    .action-button {
        width: 80%;
        margin: 5px 0;
    }
} /* @media (max-width: 768px) の閉じ括弧 */

/* 画面幅が480px以下のデバイスに適用されるスタイル (必要であれば) */
@media (max-width: 480px) {
    /* スマホでの更なる調整（例: 2列にしたい場合など） */
    /* .stadium-grid,
    .stadium-grid-npb,
    .stadium-grid-other {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    } */
}

/* ============================== */
/* 球場アーカイブページ (カテゴリートップ) のスタイル */
/* グリッドレイアウト */
/* ============================== */
.stadium-archive-container {
    max-width: 1024px;
    margin: 0 auto;
    padding: 30px 40px;
}

.archive-title {
    text-align: center;
    font-size: 1.8rem;
    margin-bottom: 20px;
    color: var(--color-primary-text);
    letter-spacing: 2px;
    font-weight: 500;
}

.stadium-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
    justify-content: center;
}

@media (max-width: 768px) {
.stadium-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    justify-content: center;
}

.stadium-item img.stadium-thumb {
    width: 150%;
    height: auto;
    max-width: 200px;
    margin: 0 auto 5px;
    display: block;
    transition: filter 0.3s ease;
}



}


/* 旧NPBの野球場 (PC版: 6列) のスタイルは不要になるので削除またはコメントアウト */
/*
.stadium-grid-npb {
    grid-template-columns: repeat(6, 1fr);
    max-width: 1024px;
    margin: 0 auto;
}
*/

/* 旧その他のカテゴリー (PC版: 5列) のスタイルは、.stadium-grid で共通化されるので削除またはコメントアウト */
/*
.stadium-grid-other {
    grid-template-columns: repeat(5, 1fr);
    max-width: 900px;
    margin: 0 auto;
}
*/

.stadium-item {
    text-align: center;
    background-color: transparent;
    border-radius: 8px;
}

.stadium-item a {
    display: block;
    color: var(--color-primary-text);
    text-decoration: none;
    transition: all 0.3s ease;
}

.stadium-item img.stadium-thumb {
    width: 100%;
    height: auto;
    max-width: 200px;
    margin: 0 auto 5px;
    display: block;
    transition: filter 0.3s ease;
}

.stadium-item-title {
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    line-height: 1.4;
    margin-top: 0;
    margin-bottom: 0;
    transition: color 0.3s ease, text-decoration 0.3s ease;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

/* マウスホバーエフェクト */
.stadium-item a:hover .stadium-thumb {
    filter: none;
    transform: none;
}

.stadium-item a:hover .stadium-item-title {
    color: var(--color-link-hover);
    text-decoration: underline;
}