/*
Theme Name: Joetsu Shogi Theme
Theme URI: https://example.com/joetsu-shogi-theme/  /* 公開時にテーマ紹介ページのURLを設定 */
Author: Your Name Author URI: [あなたのサイトURL]
/* 公開時に設定 */
Description: 新潟県上越市の将棋のカスタムテーマです。 Version: 1.0.0
/* 更新のたびにバージョンアップ */
License: GNU General Public License v2 or later License URI: https: //www.gnu.org/licenses/gpl-2.0.html
Text Domain: joetsu-shogi
/* 多言語化を考慮するなら必須 */
Tags: custom-header,
flexible-header,
blog
/* テーマの特徴に合ったタグを設定 */
*/ @charset "UTF-8";

/* ==============================
   リセットCSS
   ============================== */
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

body {
    line-height: 1.6;
    /* 行の高さを少し上げて読みやすくする */
    -webkit-text-size-adjust: 100%;
    font-family: "Inter", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    color: #333;
    background-color: #f0f0f0;
    /* 薄いグレー。好みに応じて調整してください */
    background-color: #f0f0f0;
    /* 背景画像の読み込みに失敗した場合の代替色、または画像の下の色 */
    background-image: url('img/back.png');
    /* ここにアップロードした画像パスを指定 */
    background-repeat: repeat;
    /* 画像を繰り返し表示して、全体を埋める */
    background-attachment: scroll;
    /* スクロールに合わせて背景もスクロールする */
    /* background-size: auto; はデフォルトなので不要だが、もし拡大縮小したい場合は指定 */
    /* background-position: left top; はデフォルトなので不要だが、もし位置を固定したい場合は指定 */
    /* background: #f0f0f0 url('images/pattern.png') repeat scroll left top; のように短縮表記も可能 */
    /* ここまで背景設定 */
    min-width: 320px;
    /* サイト全体の最小幅 (一般的なスマホの最小幅) */
    overflow-x: hidden;
    /* 水平方向のスクロールバーを通常は非表示にする (コンテンツのはみ出しは別途対策) */
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary {
    display: block;
}

/* box-sizingの追加 (モダンなCSSの基本) */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* ==============================
   サイト全体共通のコンテナ設定
   PCでは固定幅、スマホでは可変幅
   ============================== */
.container {
    max-width: 1200px;
    /* PCでは最大1200pxで制限 */
    width: 100%;
    /* 親要素の幅に合わせて広がる (max-widthを超えない範囲で) */
    min-width: 700px;
    /* PCレイアウトを維持したい最低限の幅（768px未満で2カラムを維持する幅） */
    margin-left: auto;
    /* 中央寄せ */
    margin-right: auto;
    /* 中央寄せ */
    padding-left: 20px;
    /* 左右の余白 */
    padding-right: 20px;
    /* 左右の余白 */
}

/* ==============================
   ヘッダーとナビゲーションのスタイル
   ============================== */

/* ヘッダー全体の設定 */
.header.bIcontainer {
    width: 100%;
    padding: 20px 0;
    background: linear-gradient(to bottom, #fcfcfc, #cfbe83);
    border-bottom: 1px solid #eee;
    /* text-align: center; */
    /* 不要になるのでコメントアウトまたは削除 */
}

/* ヘッダーの内部要素の配置（ロゴとサイトタイトル、メニュー） */
.header-inner {
    display: flex;
    flex-direction: column;
    /* ★変更: タイトルとメニューブロックを縦並びにする */
    align-items: flex-start;
    /* ★変更: 左寄せにする（タイトルを左に寄せるため） */
    width: 100%;
}

/* サイトタイトルのテキストスタイル */
.site-title-text {
    font-size: 4em;
    color: #000000;
    font-weight: bold;
    white-space: nowrap;
    border: 2px solid #0056b3;
    padding: 0 10px;
    display: inline-block;
    border-radius: 5px;
    line-height: 1;
    margin-bottom: 10px;
    /* ★変更: タイトルの下にメニューが来るように余白を追加 */
    text-align: left;
    /* ★変更: 左寄せに維持 */
    /* width: fit-content; */
    /* テキストの幅に合わせる（必要に応じて追加） */
}

/* ヘッダーの右側コンテンツ（検索フォームとメニュー）の配置調整 */
.header-right-content {
    display: flex;
    flex-direction: column;
    /* 検索フォームとメニューが縦に並ぶ（もし検索フォームがある場合） */
    align-items: flex-end;
    /* ★変更: メニューを右寄せにする */
    width: 100%;
    /* 親要素の幅いっぱいに広げる */
}

/* ナビゲーションメニューのリスト（ul）の設定 */
.mainMenu-list {
    list-style: none;
    display: flex;
    /* メニュー項目（ホーム、お知らせなど）が横並びになります */
    padding: 0;
    margin: 0;
    justify-content: flex-end;
    /* ★変更: メニュー項目を右寄せにする */
    width: 100%;
    /* 親要素の幅いっぱいに広げる */
}

/* ナビゲーションメニューの項目（li）の設定 */
.mainMenu-item {
    margin-left: 30px;
    /* 各メニュー項目の左側にスペース */
    margin-right: 0;
    /* 右側のマージンは不要 */
}

/* ナビゲーションメニュー内のリンク（a）の設定 */
/* ここは変更なし */
.mainMenu-link {
    text-decoration: none;
    color: #333;
    font-weight: bold;
    padding: 6px 5px;
    display: block;
    font-size: 1.5em;
    transition: color 0.3s ease;
    white-space: nowrap;
}

.mainMenu-link:hover {
    color: #0073aa;
}

/* ==============================
   レスポンシブ対応 (ヘッダー部分のみ)
   ============================== */
@media (max-width: 768px) {
    /* 画面幅が768px以下の場合に適用されるスタイル */

    /* ヘッダー内部の配置を調整 */
    .header-inner {
        flex-direction: column;
        /* スマホでは縦積みにする */
        align-items: center;
        /* 中央揃え */
    }

    /* ヘッダーの右側コンテンツ（サイトタイトルとメニュー）の配置調整 */
    .header-right-content {
        align-items: center;
        /* 中央寄せにする */
        width: 100%;
        /* 幅をいっぱいにする */
    }

    /* サイトタイトルのテキスト */
    .site-title-text {
        margin-top: 10px;
        font-size: 1.5em;
        text-align: center;
        /* スマホでは中央寄せ */
    }

    /* ナビゲーションメニューのリスト（ul）の設定 */
    .mainMenu-list {
        flex-direction: column;
        /* メニュー項目を縦に並べる */
        align-items: center;
        /* 中央揃え */
        margin-top: 10px;
        width: 100%;
        justify-content: center;
        /* スマホでは中央寄せ */
    }

    /* ナビゲーションメニューの項目（li）の設定 */
    .mainMenu-item {
        margin-left: 0;
        margin-bottom: 10px;
        width: 100%;
        text-align: center;
    }

    /* ナビゲーションメニュー内のリンク（a）の設定 */
    .mainMenu-link {
        padding: 8px 0;
        font-size: 0.9em;
        width: 100%;
    }
}

/* ==============================
   2カラムレイアウト
   ============================== */
.two-column-layout {
    display: flex;
    /* Flexboxを使って左右に並べる */
    gap: 10px;
    /* カラム間のスペース */
    margin-top: 30px;
    /* ヘッダーとコンテンツの間に余白 */
    flex-wrap: wrap;
    /* 画面が狭くなった時に折り返す */
    /* 2カラムレイアウトが破綻しない最低限の幅を明示的に指定 */
    /* (left-column min-width + right-column min-width + gap + container padding) */
    min-width: 730px;
    /* 計算値: 280px(左) + 380px(右) + 30px(ギャップ) + 40px(コンテナ左右パディング) */
}

.left-column {
    flex: 1;
    /* 左カラムは利用可能なスペースを柔軟に使う */
    min-width: 450px;
    /* 左カラムの最小幅を設定 (コンテンツが読める程度) */
    max-width: 600px;
    /* 左カラムの最大幅を設定 (画像レイアウトを参考に調整) */
    /* overflow: hidden; /* デバッグ用: はみ出した内容を強制的に隠す。必要に応じて使用。 */
}

.right-column {
    flex: 2;
    /* 右カラムは左カラムの2倍の幅を取る (例: 1/3 vs 2/3) */
    flex-grow: 2;
    flex-shrink: 1;
    flex-basis: 0;
    /* flexアイテムの初期サイズ */
    min-width: 380px;
    /* 右カラムの最小幅を設定 (メインビジュアルが適切に表示される程度) */
    /* overflow: hidden; /* デバッグ用: はみ出した内容を強制的に隠す。必要に応じて使用。 */
}

/* ==============================
   各セクションの共通スタイルとコンテンツ固有のスタイル
   ============================== */
/* 各セクションブロックの共通スタイル */
.sidebar-section,
.main-content-block {
    background-color: #ffffff;
    /* 白い背景 */
    background-image: url('img/content.png');
    /* ここにアップロードした画像パスを指定（元に戻しました）*/
    border: 1px solid #e0e0e0;
    /* 薄い枠線 */
    padding: 25px;
    /* 内側の余白を少し増やす */
    margin-bottom: 25px;
    /* セクション間の下マージンを増やす */
    border-radius: 8px;
    /* 角丸 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    /* 軽い影 */

    /* 長いテキストのはみ出し対策 */
    word-break: break-word;
    /* 単語の途中で改行を許可する */
    overflow-wrap: break-word;
    /* 長い単語の途中で改行を許可する */
}

/* 固定ページ（例: page.php）のコンテンツブロックのスタイル */
/* 固定ページでは背景画像を削除し、中央寄せと最大幅を適用します */
body.page .main-content-block {
    background-image: none;
    /* 固定ページでは背景画像を削除 */
    max-width: 900px;
    /* 最大幅を設定 */
    margin-left: auto;
    /* 中央寄せ */
    margin-right: auto;
    /* 中央寄せ */
}

/* 各セクションの見出しスタイル */
.sidebar-section h3,
.main-content-block h3 {
    font-size: 1.3em;
    color: #0056b3;
    margin-bottom: 15px;
    border-bottom: 2px solid #0056b3;
    /* 下線を追加 */
    padding-bottom: 5px;
}

/* お知らせリストのスタイル */
.news-list {
    margin-top: 15px;
}

.news-item {
    display: flex;
    align-items: baseline;
    margin-bottom: 10px;
    font-size: 0.95em;
}

.news-item time {
    color: #666;
    margin-right: 10px;
    white-space: nowrap;
    /* 日付は途中で改行されないように */
}

.news-item a {
    color: #333;
    text-decoration: none;
    transition: color 0.3s ease;
}

.news-item a:hover {
    color: #0073aa;
    text-decoration: underline;
}

.more-link {
    text-align: right;
    margin-top: 15px;
}

.more-link a {
    color: #0056b3;
    text-decoration: none;
    font-weight: bold;
}

.more-link a:hover {
    text-decoration: underline;
}


/* メインビジュアルのセクション内の配置調整 (画像レイアウトに合わせる) */
.main-visual-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* メインビジュアルとそのキャプションを中央に配置 */
    text-align: center;
    /* タイトルや説明文も中央寄せに */
}

/* メインビジュアルの画像自体は以前のstyle.cssで定義済み */
.main-visual {
    max-width: 600px;
    /* 画像の元のサイズや表示したい最大サイズに合わせて調整 */
    margin: 0 auto 15px auto;
    /* 画像とその下のキャプションとの間にスペース */
    border: 1px solid #ccc;
    /* メインビジュアルの周りに枠線 */
    border-radius: 5px;
    overflow: hidden;
    /* 角丸にするために画像を隠す */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* 軽い影 */
}

.main-visual img {
    width: 100%;
    /* 親要素（.main-visual）の幅に合わせる */
    height: auto;
    /* アスペクト比を維持 */
    display: block;
    /* 画像の下に不要なスペースが入るのを防ぐ */
}

.main-visual-caption {
    font-size: 0.9em;
    color: #666;
    margin-top: 10px;
}

/* リンク情報リストのスタイル */
.link-list {
    list-style: none;
    padding: 0;
    margin-top: 15px;
}

.link-list li {
    margin-bottom: 8px;
}

.link-list a {
    color: #0056b3;
    text-decoration: none;
    transition: color 0.3s ease;
}

.link-list a:hover {
    color: #0073aa;
    text-decoration: underline;
}

/* Google Mapへのリンクのスタイル */
/* もしGoogle Mapへのリンクに 'google-map-link' クラスが付与されている場合 */
.google-map-link {
    font-size: 1.5em !important;
    /* フォントサイズを大きくする (例: 1.5倍) */
    font-weight: bold;
    /* 太字にする */
    color: #0056b3;
    /* リンク色 */
    text-decoration: none;
    /* 下線をなくす */
    display: inline-block;
    /* ブロック要素にして、クリック可能な領域を広げる */
    text-align: center;
    /* 中央寄せ */
    margin-top: 20px;
    /* 上部の余白 */
    margin-bottom: 20px;
    /* 下部の余白 */
    padding: 10px 0;
    /* クリックしやすいようにパディングを追加 */
    border: 2px solid #0056b3;
    /* 枠線を追加 */
    border-radius: 5px;
    /* 角を少し丸める */
    transition: all 0.3s ease;
    /* ホバー時のアニメーション */
}

.google-map-link:hover {
    background-color: #aeb0b1;
    /* ホバー時の背景色 */
    color: #000000;
    /* ホバー時の文字色 */
    border-color: #003366;
    /* ホバー時の枠線色 */
    text-decoration: none;
    /* ホバー時も下線なし */
}


/* ==============================
   レスポンシブ対応
   ============================== */
@media (max-width: 768px) {
    /* 画面幅が768px以下の場合に適用されるスタイル */

    /* ヘッダー内部の配置を調整 */
    .header-inner {
        flex-direction: column;
        /* ロゴと右側コンテンツを縦に並べる */
        align-items: center;
        /* 中央揃え */
    }

    /* ヘッダーの右側コンテンツ（サイトタイトルとメニュー）の配置調整 */
    .header-right-content {
        align-items: center;
        /* 中央寄せにする */
        width: 100%;
        /* 幅をいっぱいにする */
    }

    /* サイトタイトルのテキスト */
    .site-title-text {
        margin-top: 10px;
        /* ロゴとタイトルの間にスペース */
        font-size: 1.5em;
        /* スマホでのフォントサイズ調整 */
        text-align: center;
        /* タイトルも中央寄せに */
    }

    /* ナビゲーションメニューのリスト（ul）の設定 */
    .mainMenu-list {
        flex-direction: column;
        /* メニュー項目を縦に並べる */
        align-items: center;
        /* 中央揃え */
        margin-top: 10px;
        /* タイトルとの間にスペース */
        width: 100%;
        /* スマホで幅いっぱいにする */
    }

    /* ナビゲーションメニューの項目（li）の設定 */
    .mainMenu-item {
        margin-left: 0;
        /* 左右のマージンをリセット */
        margin-bottom: 10px;
        /* 縦並びになった際に項目間のスペース */
        width: 100%;
        /* 各項目を幅いっぱいに */
        text-align: center;
        /* 項目内のテキストを中央揃え */
    }

    /* ナビゲーションメニュー内のリンク（a）の設定 */
    .mainMenu-link {
        padding: 8px 0;
        /* スマホでのタップしやすさを考慮してパディングを増やす */
        font-size: 0.9em;
        /* スマホでのフォントサイズ調整 */
        width: 100%;
        /* リンクのクリック領域を最大化 */
    }

    /* 2カラムレイアウトを縦積みにする */
    .two-column-layout {
        flex-direction: column;
        /* スマホでは縦積みにする */
        gap: 20px;
        /* 縦積みの際のセクション間のスペース */
        min-width: unset;
        /* スマホ表示ではmin-widthをリセットし、幅100%に従う */
    }

    .left-column,
    .right-column {
        flex: auto;
        min-width: unset;
        /* 最小幅を解除し、幅100%に従う */
        max-width: 100%;
        width: 100%;
    }

    /* 各セクションブロックのパディング調整 (スマホで余白を確保) */
    .sidebar-section,
    .main-content-block {
        padding: 15px;
        /* スマホではパディングを少し小さくする */
    }

    /* メインビジュアルのセクションの幅調整 */
    .main-visual-section .main-visual {
        max-width: 100%;
        /* スマホではメインビジュアルも幅いっぱいに */
        padding: 0;
        /* スマホではメインビジュアル自体のパディングをなくす */
        border: none;
        /* スマホでは枠線をなくす */
        box-shadow: none;
        /* スマホでは影をなくす */
        margin-bottom: 10px;
        /* スマホでの下マージンを調整 */
    }

    /* 各セクションの見出しスタイル (スマホでの調整) */
    .sidebar-section h3,
    .main-content-block h3 {
        font-size: 1.1em;
        /* スマホでの見出しフォントサイズ調整 */
        margin-bottom: 10px;
    }

    /* お知らせやリンクリストのフォントサイズ調整 */
    .news-item,
    .info-list li,
    .link-list li {
        font-size: 0.9em;
    }

    .news-item time {
        margin-right: 5px;
        /* 時刻とタイトルの間隔を調整 */
    }
}