/* ========================================
   リセット & 基本設定 (元のまま)
   ======================================== */
   * {
    font-size: 1em;
    font-weight: normal;
    font-style: normal;
    font-family:"ヒラギノ明朝 StdN W4", "Hiragino Mincho ProN","游明朝", YuMincho,"HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
    margin: 0;
    padding: 0;
    border: none;
    list-style: none;
    box-sizing: border-box;
}

body {
    line-height: 1.6; /* 基本の行間を設定 */
    color: #333; /* 基本の文字色 */
    /* background-color: #fff; */ /* 元の指定 */
    background-color: #f0f0f0; /* ★ サイト外側の背景色 */
}

/* === ★★★ サイト全体の幅を設定 (追記) ★★★ === */
/* 主要なコンテンツブロック（ヘッダー、メインコンテンツ、フッター）を囲む想定 */
#page, /* 一般的なWordPressテーマのラッパーID */
.site { /* またはクラス */
    max-width: 1200px; /* ★ サイトの最大幅 */
    margin-left: auto;
    margin-right: auto;
    background-color: #fff; /* ★ サイト内側の背景色 */
    /* 必要に応じて box-shadow を追加 */
    /* box-shadow: 0 0 15px rgba(0,0,0,0.1); */
}
/* コンテンツエリア内の左右パディング (必要に応じて調整) */
.content-area, /* メインコンテンツエリア */
.widget-area, /* サイドバーエリア */

.site-content, /* コンテンツラッパー */
.site-footer, /* フッター内部コンテナ */
.m01, /* トップページセクション */
.m02, /* トップページセクション */
.container /* 他のページコンテナ */ {
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
}
/* 個別ページで padding を上書きする場合は .container などで指定 */
.container.area-page { padding: 0 20px; /* 元の指定を尊重する場合 */ }
.container.place-detail-page { padding: 0 15px; /* 元の指定を尊重する場合 */ }
/* トップページの左右paddingを %指定から固定値に */
.m01 { padding: 15px 20px; } /* 元の padding はコメントアウトされていたので値は推測 */
.m02 { padding: 30px 20px; } /* 元の padding は 5vw だったので固定値に */
footer { padding: 40px 20px; } /* 元の padding は 5vw だったので固定値に */
/* === ★★★ サイト幅の設定 ここまで ★★★ === */


a {
    color: #0073aa; /* WordPressブルーをリンクの基本色に */
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

img {
    max-width: 100%; /* 画像が親要素からはみ出ないように */
    height: auto;    /* アスペクト比を維持 */
    vertical-align: middle; /* 画像下の隙間対策 */
}

hr {
    border: none;
    border-top: 1px solid #ccc; /* 少し細めの線に */
    margin: 10px 0; /* 上下マージン調整 */
}


/* ========================================
   トップページ (front-page.php)
   ======================================== */
/*--------------MAP表示---------------------*/
/* --- レイアウト調整用CSS --- */
.m01 {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 30px;
    align-items: flex-start;
}
.m01 > .map_container {
    flex: 3;
    min-width: 320px;
    display: flex;
    flex-direction: column;
    order: 1;
}
#leaflet-map {
    width: 100%;
    order: 2;
    background-color: #e9e9e9;
}
.map_controls {
    order: 1;
    margin-bottom: 10px;
    /* padding, background 等は style.css 側で指定 */
}
.m01_right {
    flex: 1;
    min-width: 280px;
    order: 2;
}
.m01_right .search {
    margin-bottom: 20px;
    display: flex;
    /* flex-wrap: wrap; を追加してバナーが多くなっても折り返すようにする */
    flex-wrap: wrap;
    gap: 10px;
}
.m01_right .search .search_box {
    flex-basis: calc(33.333% - 10px); /* 3列表示の場合の目安。gapを考慮 */
    /* もし2列にしたい場合は flex-basis: calc(50% - 10px); などに調整 */
    /* 画像が可変サイズになるように調整 */
    max-width: 150px; /* バナー画像の最大幅を指定 */
}
.m01_right .search .search_box img {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid #eee; /* 見た目の調整 */
    box-shadow: 0 1px 3px rgba(0,0,0,0.1); /* 見た目の調整 */
}

@media (max-width: 800px) {
    .m01 {
        flex-direction: column;
        gap: 30px;
    }
    .m01 > .map_container { order: 1; }
    .m01_right { order: 2; }
    .m01 > .map_container,
    .m01_right {
        flex: none;
        width: 100%;
    }
    #leaflet-map {
        height: 450px;
    }
    .m01_right .search {
        justify-content: space-around; /* スマホ表示では中央寄せ気味に */
    }
    .m01_right .search .search_box {
        flex-basis: calc(33.333% - 10px); /* スマホでも3列維持、または調整 */
        max-width: 120px; /* スマホでのバナー最大幅調整 */
    }
}
/* --- ここまで レイアウト調整用CSS --- */




/* --- : Google広告 --- */
.ad-container {
    max-width: 1200px;
    margin: 20px auto; /* 上下マージンを減らす */
    padding: 15px; /* パディングを減らす */
    text-align: center;
}

.ad-header {
    margin-top: 15px; /* ヘッダー直後の余白を減らす */
    margin-bottom: 30px;
}

.ad-footer {
    margin-top: 40px;
    margin-bottom: 20px;
    border-top: 1px solid #eee;
    padding-top: 30px;
}
/* 広告ユニット自体のサイズを制限 */
.ad-container ins {
    max-height: 120px; /* 高さを制限 */
    display: block;
}

/* レスポンシブ広告の高さ調整 */
.ad-container .adsbygoogle {
    min-height: 90px !important;
    max-height: 120px !important;
}
.ad-card-wrapper {
    background-color: #fafafa;
    border: 1px dashed #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    grid-column: 1 / -1; /* グリッド全体の幅を使う */
}
.ad-in-content {
    margin: 40px 0;
    padding: 30px 0;
    text-align: center;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}
/* --- m01: 日本地図とリストのセクション --- */
.m01 {
    /* display: flex; etc... は front-page.php の <style>タグで指定されている前提 */
    /* gap, margin-bottom も同様 */
    /* padding: 15px 20px; /* 上の共通設定で指定済み */
    box-sizing: border-box;
}

.map_controls {
    /* order, margin-bottom は front-page.php 側で指定されている可能性 */
    padding: 12px 18px; /* ★ 上下左右のパディングを少し増やす */
    background-color: #f5f5f5;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 0.9em;
    box-sizing: border-box;
    line-height: 1.5; /* ★ 行の高さを設定して揃えやすくする */
}
.map_controls fieldset {
    border: none;
    padding: 0;
    margin: 0;
    /* ★ Flexboxを使って legend と ラベル群を横並びにする */
    display: flex;
    align-items: center; /* ★ 垂直方向中央揃え */
}
.map_controls legend {
    font-weight: bold;
    margin: 0; /* ★ マージンリセット */
    padding: 0;
    margin-right: 12px; /* ★ legend と最初のラベルの間隔を少し広げる */
    flex-shrink: 0; /* ★ legend が縮まないように */
}
.map_controls .radio-options { /* ★ ラジオボタンとラベルを囲む div (HTMLに追加推奨) */
   display: flex; /* ★ ラベル間も Flexbox で制御 */
   align-items: center;
   flex-wrap: wrap; /* スマホなどで折り返す場合 */
   gap: 0 18px; /* ★ ラベル間の横方向の間隔 (縦方向は 0) */
}
.map_controls label {
    cursor: pointer;
    display: inline-flex; /* ★ input とテキストの垂直中央揃え */
    align-items: center;
    margin: 0; /* ★ マージンリセット (gap で制御) */
    /* margin-left は不要に */
}
.map_controls input[type="radio"] {
    margin: 0; /* ★ マージンリセット */
    margin-right: 5px; /* ★ ラジオボタンとラベルの間隔を少し広げる */
    /* vertical-align は display:inline-flex で不要に */
}
/* アクセス数ラベルの左マージンは gap で制御するため削除 */
/* .map_controls label + label {
    margin-left: 18px;
} */



/* map_japan スタイルは元のまま */
.map_japan { /* 注意: Leaflet使用時はこのクラスは使われない可能性 */
    flex: 1 1 500px;
    max-width: 60%;
    min-width: 300px;
}
.map_japan img {
    width: 100%;
    height: auto;
    display: block;
    border: solid 1px #ccc;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* m01_right スタイルは元のまま */
.m01_right {
    /* flex, order などは front-page.php 側で指定されている前提 */
    display: flex;
    flex-direction: column;
    gap: 20px; /* search と list47 の間のスペース */
}

/* search, search_box スタイルは元のまま */
.search {
    /* display: flex; etc... は front-page.php 側で指定されている前提 */
}
.search_box {
    flex: 1; /* front-page.php 側で指定されている可能性 */
    max-width: 400px; /* 元の指定 */
    border: solid 1px #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border-radius: 4px;
    overflow: hidden; /* 画像はみ出し防止のため追加推奨 */
}
.search_box:hover {
    transform: translateY(-3px);
    box-shadow: 0 3px 8px rgba(0,0,0,0.1);
}
.search_box a {
    display: block;
    text-align: center;
    line-height: 0; /* 画像下隙間対策 */
}
.search_box img {
    /* width, height, display は front-page.php 側で指定されている可能性 */
    max-width: 100%; /* 元の指定 */
    height: auto; /* 元の指定 */
    max-height: 400px; /* 元の指定 */
    object-fit: contain; /* 元の指定 */
    display: block; /* 元の指定 */
    margin: 0 auto; /* 元の指定 */
}

/* --- list47: 都道府県リストの表示改善 (Grid Layout版) --- */
/* ★HTML構造がペアになっている前提★ */
.list47 {
    display: grid;
    grid-template-columns: auto 1fr; /* エリア名 auto幅, 残りリスト */
    /* === ★ 列間とパディングを調整してインデント変更 ★ === */
    gap: 6px 20px; /* ★ 行間6px, 列間20px に調整 */
    align-items: baseline;
    border: solid 1px #ccc;
    padding: 15px; /* ★ 全体のパディングを上下左右15pxに */
    background-color: #f9f9f9;
    border-radius: 5px;
}

.list47_area {
    grid-column: 1 / 2;
    text-align: right;
    white-space: nowrap;
}
.list47_area p {
    margin: 0;
    font-weight: bold;
    color: #555;
    line-height: 1.7;
}

.list47_pf {
    grid-column: 2 / 3;
}
.list47_pf > div {
    margin: 0;
    line-height: 1.7;
}
.list47_pf a {
    margin-right: 12px;
    display: inline-block;
    margin-bottom: 4px;
}
/* --- list47 スタイルここまで --- */

/* =================================================================
   カード型レイアウト (人気記事・新着・検索結果で共通使用)
   ファイル: style.css (m02セクション)
   ================================================================= */

/* --- セクション全体のラッパー (m02) --- */
.m02 {
    padding: 30px 20px;
    margin-bottom: 50px;
    background-color: #fdfdfd;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

.m02 h2 {
    font-size: 1.8em;
    margin-bottom: 15px;
    text-align: center;
    color: #444;
}

.m02 hr {
    margin-top: 0;
    margin-bottom: 40px;
    width: 80px;
    margin-left: auto;
    margin-right: auto;
    border-top-width: 3px;
    border-top-color: #888;
}

/* --- カードグリッドコンテナ --- */
.popular-posts-grid {
    display: grid;
    /* 
     * ★修正: auto-fit → auto-fill に変更
     * auto-fill: カードが少ない場合でも、最小幅を維持し、
     * 余白を空けることで不自然な拡大を防ぎます
     */
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px; /* カード間の隙間 */
    justify-content: center; /* グリッド全体を中央寄せ */
}

/* --- カード全体 --- */
.popular-card {
    background-color: #fff;
    border: 1px solid #e0e0e0; /* 境界線を少し見やすく */
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06); /* 影を少し調整 */
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    display: flex;
    flex-direction: column;
    max-width: 400px; /* ★カードの最大幅を制限 */
    margin: 0 auto; /* ★カード自体も中央寄せ */
}

.popular-card:hover {
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
    transform: translateY(-5px);
}

.popular-card-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* --- カード画像部分 --- */
.popular-card-image {
    width: 100%;
    /* 
     * ★改善点★ 高さを固定(height: 180px)する代わりに、
     * アスペクト比(4:3)を指定することで、どの画面幅でも画像の比率を維持します。
     */
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background-color: #f0f0f0; /* 画像読み込み中の背景色 */
}

.popular-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease; /* アニメーションを少し滑らかに */
}

.popular-card:hover .popular-card-image img {
    transform: scale(1.05);
}

/* --- カードのテキストコンテンツ部分 --- */
.popular-card-content {
    padding: 20px;
    flex-grow: 1; /* 残りの高さを埋める */
    display: flex;
    flex-direction: column;
}

.popular-card-title {
    font-size: 1.15em;
    font-weight: bold;
    color: #333;
    line-height: 1.4;
    margin: 0 0 10px 0;
    transition: color 0.3s ease;
}

/* ★改善点★ ホバー時にタイトル色を変更するエフェクトを追加 */
.popular-card-link:hover .popular-card-title {
    color: #0073aa;
}

.popular-card-excerpt {
    font-size: 0.9em;
    color: #666;
    line-height: 1.6;
    margin: 0;
    flex-grow: 1; /* ★改善点★ この要素が伸びることで、下の要素（住所やタグ）を一番下に押しやります */
}

/* --- カード下部のメタ情報 (住所やタグ) をまとめるラッパー --- */
.popular-card-meta {
    margin-top: 15px; /* 上の抜粋文との間に隙間を作る */
    padding-top: 15px; /* ★改善点★ 罫線を追加してデザインを区切る */
    border-top: 1px solid #f0f0f0;
}

.popular-card-address {
    font-size: 0.85em;
    color: #4a6f4a;
    display: flex;
    align-items: center;
    margin-bottom: 8px; /* タグとの間に少し隙間 */
}

.popular-card-address .dashicons {
    margin-right: 5px;
    font-size: 1.2em;
}

/* 住所がない場合はマージンをなくす */
.popular-card-address:empty {
    margin-bottom: 0;
}

.popular-card-pref {
    text-align: right; /* タグを右寄せ */
}

.popular-card-pref span {
    display: inline-block;
    background-color: #f0f0f0;
    color: #777;
    font-size: 0.75em;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 4px;
}/* ========================================
   都道府県アーカイブ (taxonomy-prefecture.php) - (元のまま)
   ======================================== */
.container.area-page {
    max-width: 1200px; /* 元の指定 */
    margin: 40px auto 60px; /* 元の指定 */
    padding: 0 20px; /* 元の指定 */
    /* 上の共通設定と重複するが、元の指定を維持 */
}

.page-header {
    margin-bottom: 50px; /* 下マージン */
    padding-bottom: 30px; /* パディング調整 */
    text-align: center;
    border-bottom: 1px solid #eee;
}

.page-title { /* 都道府県名 */
    font-size: 2.4em; /* 少し大きく */
    margin-bottom: 15px; /* 下マージン */
    color: #333; /* 少し濃く */
}

.term-description { /* 都道府県の説明文 */
    font-size: 1.05em; /* 少し大きく */
    color: #555; /* 少し濃く */
    max-width: 800px; /* 説明文の最大幅 */
    margin: 0 auto; /* 中央寄せ */
    line-height: 1.7;
}

/* --- 観光地カードリスト (都道府県ページ) --- */
.place-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px; /* 隙間調整 */
}

.place-card { /* 人気記事カードと共通化も可能だが、少しスタイルを変える */
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    background-color: #fff;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    display: flex;
    flex-direction: column;
}
.place-card a { /* カード内リンクのデフォルト下線は消す */
    text-decoration: none;
    color: inherit;
    display: flex; /* Flexboxで内容を配置 */
    flex-direction: column;
    height: 100%; /* 高さを100%に */
}
.place-card a:hover {
    text-decoration: none; /* ホバー時も下線不要 */
}

.place-card:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12); /* ホバー時の影 */
    transform: translateY(-4px); /* 少し浮き上がる */
}

.place-card .card-image {
    width: 100%;
    height: 190px; /* 少し高めに */
    overflow: hidden;
    position: relative;
}

.place-card .card-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease; /* アニメーション少しゆっくり */
}

.place-card:hover .card-image img {
    transform: scale(1.08); /* ズーム効果を少し強く */
}

.place-card .card-content {
    padding: 20px; /* パディングを少し広げる */
    flex-grow: 1; /* 残りのスペースを埋める */
    display: flex;
    flex-direction: column;
}

.place-card .card-title {
    font-size: 1.25em; /* 少し大きく */
    font-weight: bold;
    margin: 0 0 10px 0;
    line-height: 1.4;
    color: #333;
    transition: color 0.3s ease; /* 色変化アニメーション */
}
.place-card a:hover .card-title { /* カード全体ホバーでタイトル色変更 */
    color: #0073aa;
}

.place-card .card-address {
    font-size: 0.9em;
    color: #555;
    margin-top: auto; /* 下に配置 */
    padding-top: 12px; /* 上との間隔 */
    border-top: 1px solid #f0f0f0; /* 上に区切り線 */
}


/* --- ページネーション --- */
.pagination {
    margin-top: 50px; /* 上マージン */
    text-align: center;
}
.pagination .nav-links {
    display: inline-block;
}
.pagination .page-numbers {
    display: inline-block;
    padding: 10px 18px; /* パディング調整 */
    margin: 0 4px; /* 左右マージン */
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #0073aa;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.pagination .page-numbers:hover,
.pagination .page-numbers.current {
    background-color: #0073aa;
    color: #fff;
    border-color: #0073aa;
}
.pagination .page-numbers.dots {
    border: none;
    padding: 10px 5px;
}


/* ========================================
   観光地詳細ページ (single-place.php) - 基本スタイル (元のまま)
   ======================================== */
.container.place-detail-page {
    max-width: 900px; /* 元の指定 */
    margin: 40px auto 60px; /* 元の指定 */
    padding: 0 15px; /* 元の指定 */
     /* 上の共通設定と重複するが、元の指定を維持 */
}

.place-article {
    background-color: #fff;
    padding: 30px 40px 40px 40px; /* パディング調整 */
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 40px; /* 下マージン */
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.place-article .entry-header {
    margin-bottom: 30px;
    padding-bottom: 25px; /* 下パディング */
    border-bottom: 1px solid #eee;
    text-align: center;
}

.place-article .entry-title { /* 観光地名 H1 */
    font-size: 2.5em; /* さらに大きく */
    margin-bottom: 15px;
    color: #333;
    line-height: 1.3;
}

.place-features { /* 特徴タグエリア */
    margin-top: 15px;
    padding-bottom: 20px;
}

.feature-tag { /* 各特徴タグ */
    display: inline-block;
    background-color: #eef; /* 少し色をつける */
    color: #555;
    padding: 6px 14px; /* パディング調整 */
    margin: 5px;
    border-radius: 15px; /* 楕円形に */
    font-size: 0.85em; /* 少し小さく */
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
    border: 1px solid #dde; /* 細い枠線 */
}
.feature-tag:hover {
     background-color: #ddebff; /* ホバー色 */
     border-color: #cce;
}
/* 例: 特定の特徴に色を付ける場合 */
.feature-tag.feature-art { background-color: #e1f5fe; color: #0277bd; border-color: #b3e5fc; }
.feature-tag.feature-nature { background-color: #e8f5e9; color: #2e7d32; border-color: #c8e6c9; }


.place-article .entry-content {
    line-height: 1.8;
    font-size: 1.05em;
    color: #444;
}
.place-article .entry-content p {
    margin-bottom: 1.5em;
}
.place-article .entry-content h3 {
    font-size: 1.5em; /* 少し大きく */
    margin: 2em 0 1em 0; /* 上下マージン調整 */
    font-weight: bold;
    padding-bottom: 5px;
    border-bottom: 1px dashed #ccc; /* 下線を追加 */
}
.place-article .entry-content ul,
.place-article .entry-content ol {
     margin: 0 0 1.5em 1.5em;
     padding-left: 1em; /* 左パディング追加 */
}
.place-article .entry-content li {
     margin-bottom: 0.6em; /* 間隔調整 */
}


.place-main-image { /* メイン画像 */
    margin-bottom: 40px; /* 下マージン */
    text-align: center;
}

.place-main-image img {
    max-width: 100%;
    height: auto;
    border-radius: 8px; /* 角丸調整 */
    border: 1px solid #eee;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* 影 */
}


.place-section { /* 各情報セクション */
    margin-bottom: 40px; /* 下マージン */
    padding-top: 30px; /* 上パディング */
    border-top: 1px solid #eee; /* 区切り線を少し変更 */
}
.place-section:first-of-type {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
}

.place-section h2 { /* セクション見出し (H2) */
    font-size: 1.7em; /* 少し大きく */
    margin-bottom: 20px; /* マージン調整 */
    padding-bottom: 10px; /* 下線とのスペース */
    border-bottom: 2px solid #0073aa;
    display: inline-block;
    color: #333;
    font-weight: bold;
}

.place-section p:last-child {
     margin-bottom: 0;
}

.place-section a {
    /* color: #0073aa; デフォルトのリンク色を使用 */
    word-break: break-all; /* URLなどがはみ出ないように */
}


/* 地図コンテナ */
.map-container { /* 詳細ページ用 */
    position: relative;
    padding-bottom: 56.25%; /* 16:9 アスペクト比 */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #f0f0f0 url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'); /* ローディング表示 */
    border: 1px solid #ccc;
    margin-top: 15px; /* 上マージン */
    border-radius: 6px; /* 角丸 */
}

.map-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ★★★ 追記・変更箇所 開始 ★★★ */
/* ========================================
   モバイル表示への最適化 (観光地詳細ページ)
   ======================================== */
@media screen and (max-width: 768px) {

    /* 記事全体のコンテナの左右の余白を少し狭くする */
    .container.place-detail-page {
        padding-left: 10px;
        padding-right: 10px;
    }

    /* 【ご要望の箇所】記事本体（白色の背景部分）のパディングを減らし、楽天広告の幅に近づける */
    .place-article {
        padding-left: 15px;  /* 元の40pxから削減 */
        padding-right: 15px; /* 元の40pxから削減 */
        padding-top: 25px;   /* 上下の余白も少し調整 */
        padding-bottom: 30px;
    }

    /* 参考：タイトルや見出しが大きすぎる場合、ここでサイズを調整できます */
    .place-article .entry-title {
        font-size: 1.8em;
    }

    .place-section h2 {
        font-size: 1.4em;
    }
}
/* ★★★ 追記・変更箇所 終了 ★★★ */


/* --- フッターのスタイル（デザイン改善・均等割り付け版） --- */
.site-footer-wrapper {
    margin-top: 60px;        /* フッターと本文の間隔 */
    padding: 60px 20px 0;    /* ← 下パディングを 0 に変更 */
    background-color: #f9f9f9;
    border-top: 1px solid #e9e9e9;
    text-align: center;
    font-family: sans-serif;
    position: sticky;
}

.site-footer-inner {
    max-width: 1200px;
    margin: 0 auto;
}

/* フッターロゴのスタイル */
.footer-logo {
    margin-bottom: 35px;
}
.footer-logo a {
    font-size: 36px;
    color: #222;
    text-decoration: none;
    font-weight: 700;
    letter-spacing: 1px;
}

/* 関連リンクのスタイル（均等割り付け） */
.footer-related-links {
    margin-bottom: 35px;
}
.footer-related-links ul {
    list-style: none;
    padding: 0;
    margin: 0 auto; /* 中央寄せ */
    display: flex;
    justify-content: center; /* ★ 中央揃えに変更 */
    align-items: center; /* 垂直方向の中央揃え */
    width: 100%;
    gap: 20px 30px; /* ★ リンク間の固定の隙間を50pxに設定（お好みで調整） */
}
.footer-related-links li {
    flex: 1; /* 各要素の幅を均等にするためのキープロパティ */
    text-align: center; /* 各ボックス内でテキストを中央揃え */
}
.footer-related-links a {
    color: #333;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    transition: color 0.2s ease;
    letter-spacing: 0.5px;
    display: inline-block;
    padding: 5px 10px;
}
.footer-related-links a:hover {
    color: #0073aa; /* サイトのキーカラーなどに合わせると良い */
    text-decoration: none;
}


/* フッターナビゲーション（プライバシーポリシー等）のスタイル */
.footer-navigation {
    margin-bottom: 35px;
    padding-top: 35px;
    border-top: 1px dotted #ccc; /* 区切り線を点線に */
}
.footer-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px 28px;
}
.footer-navigation a {
    color: #666;
    text-decoration: none;
    font-size: 13px;
    transition: color 0.2s ease;
}
.footer-navigation a:hover {
    color: #222;
    text-decoration: underline;
}

/* コピーライトのスタイル */
.copyright {
    margin: 0;
    font-size: 12px;
    color: #888;
}

/* スマートフォン表示用の調整 */
@media (max-width: 768px) {
    .site-footer-wrapper {
        padding: 40px 15px;
        margin-top: 40px;
    }
    .footer-logo a {
        font-size: 28px;
    }
    /* スマホではflexboxを解除して縦積みにする */
    .footer-related-links ul {
        flex-direction: column;
        gap: 20px; /* 縦の隙間 */
        max-width: 100%; /* 幅の制限を解除 */
    }
    .footer-related-links a {
        font-size: 15px;
    }
}
/* ========================================
   WordPress生成クラスなど (元のまま)
======================================== */
.alignleft { float: left; margin: 0.5em 1.5em 1em 0; } /* マージン調整 */
.alignright { float: right; margin: 0.5em 0 1em 1.5em; } /* マージン調整 */
.aligncenter { display: block; margin-left: auto; margin-right: auto; margin-bottom: 1.5em; } /* マージン調整 */
.alignnone { margin-bottom: 1.5em; } /* マージン追加 */

/* 画像キャプション */
.wp-caption { max-width: 100%; margin-bottom: 1.5em; background: #f9f9f9; padding: 15px; text-align: center; border: 1px solid #eee; } /* 少しスタイル調整 */
.wp-caption img { display: block; margin: 0 auto 10px; } /* 画像下のマージン */
.wp-caption .wp-caption-text { font-size: 0.9em; color: #555; text-align: center; margin: 0; line-height: 1.5; }

/* スクリーンリーダー用テキスト */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}
/* --- GonnaTonai関連記事 表示スタイル (元のまま) --- */
.gtn-related-section {
    margin-top: 40px; /* 上のコンテンツとの間隔 */
    padding-top: 30px; /* セクション開始の余白 */
    border-top: 1px solid #eee; /* 区切り線 */
    clear: both; /* 前の要素の回り込み解除 */
}

.gtn-related-group {
    margin-bottom: 40px; /* 各セクション間の間隔 */
}

.gtn-related-group h2 {
    font-size: 1.6em; /* セクション見出しのサイズ調整 */
    margin-bottom: 25px; /* 見出しとカードの間隔 */
    padding-bottom: 10px; /* 見出しの下線用スペース */
    border-bottom: 2px solid #0073aa; /* 見出しの下線 (色は適宜変更) */
    /* border-left スタイルは削除 */
    /* padding-left スタイルは削除 */
}
.gtn-related-group h2 i { /* Font Awesomeアイコン (使う場合) */
    margin-right: 10px;
    color: #0073aa; /* アイコン色 */
    font-size: 0.9em; /* アイコンサイズ調整 */
}


.gtn-related-cards {
    display: grid; /* グリッドレイアウト */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* 列の自動調整 */
    gap: 25px; /* カード間の隙間 */
}

.gtn-card {
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.08);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    display: flex;
    flex-direction: column; /* ← row（横並び）から column（縦積み）に変更 */
    overflow: hidden;
}
.gtn-card:hover {
    box-shadow: 0 6px 12px rgba(0,0,0,0.12);
    transform: translateY(-3px); /* 少し浮き上がる効果 */
}

/* サムネイル部分 */
.gtn-card-thumbnail {
    /* flexプロパティは不要になるので削除 */
    width: 100%;     /* ← 横幅を100%に */
    height: 100px;   /* ← 高さを自由に設定（例: 160px） */
    overflow: hidden;
    position: relative;
}
.gtn-card-thumbnail a {
    display: block;
    width: 100%;
    height: 100%;
}
.gtn-card-thumbnail img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.gtn-card-thumbnail a:hover img {
    transform: scale(1.08);
}

/* テキストコンテンツ部分 */
.gtn-card-text-content {
    flex: 0;
    padding: 15px; /* 上下左右の余白を少し調整 */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* min-heightは不要になるので削除 */
    box-sizing: border-box;
}
.gtn-card h3 {
    font-size: 1.05em; /* 見出しサイズ調整 */
    margin: 0 0 8px 0; /* 上マージン削除、下を少し空ける */
    line-height: 1.4;
}
.gtn-card h3 a {
    text-decoration: none;
    color: #333; /* リンク色調整 */
}
.gtn-card h3 a:hover {
    color: #0073aa; /* ホバー色 */
    text-decoration: underline;
}

.gtn-card-excerpt {
    font-size: 0.88em; /* 抜粋サイズ調整 */
    color: #555;
    line-height: 1.5;
    margin-bottom: 10px; /* 下のメタ情報との間隔 */
    /* display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; */ /* 2行で省略する場合 (ブラウザ依存) */
}

.gtn-card-meta {
    font-size: 0.8em;
    color: #777;
    border-top: 1px solid #eee; /* 区切り線 */
    padding-top: 8px;
    margin-top: auto; /* 下端に配置 */
    line-height: 1.5; /* 行間 */
}
.gtn-card-meta span {
    margin-right: 12px; /* メタ情報間の間隔 */
    display: inline-flex; /* アイコンとテキストの縦中央揃え */
    align-items: center;
}
/* Font Awesome アイコンを使う場合 */
.gtn-card-meta i {
     margin-right: 4px;
     /* vertical-align: middle; */ /* display:inline-flex で不要に */
     font-size: 0.9em; /* アイコンサイズ調整 */
     color: #999; /* アイコン色 */
}
/*.gtn-card-writer {} /* 執筆者特有のスタイルがあれば */

/* --- レスポンシブ調整 (元のまま) --- */
@media (max-width: 480px) {
     .gtn-related-cards {
         grid-template-columns: 1fr; /* スマホでは1列表示 */
         gap: 15px;
     }
     .gtn-card-thumbnail {
         flex: 0 0 80px; /* スマホではサムネイル少し小さく */
         height: 80px;
     }
      .gtn-card-text-content {
         min-height: 80px;
         padding: 10px 12px;
     }
     .gtn-card h3 {
         font-size: 1em;
     }
      .gtn-card-excerpt {
         font-size: 0.85em;
     }
      .gtn-card-meta {
         font-size: 0.75em;
     }
}

/* --- Leaflet凡例スタイル (追記/移動推奨) --- */
/* front-page.php の <style> タグから style.css に移動推奨 */
.leaflet-control-container .leaflet-control.info.legend {
    background: rgba(255, 255, 255, 0.85);
    padding: 10px 15px;
    border-radius: 5px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
    line-height: 1.5;
    font-size: 0.85em;
    max-width: 150px;
}
.leaflet-control-container .leaflet-control.info.legend h4{
    margin: 0 0 8px 0;
    font-size: 1.1em;
    font-weight: bold;
    text-align: center;
}
.leaflet-control-container .leaflet-control.info.legend i {
    width: 18px;
    height: 18px;
    float: left;
    margin-right: 8px;
    border: 1px solid #999;
    opacity: 0.8;
}
/* 特徴タグのコンテナ（ACFのplace_featuresフィールドの親div） */
/* この指定により、このdiv自体はレイアウトに影響せず、中のspanタグが直接flexアイテムとして扱われます */
.entry-header .place-features {
    display: contents;
}

/* 全ての feature-tag (特徴タグおよび都道府県タグ) に共通するスタイル */
.feature-tag {
    padding: 0.4em 0.9em;     /* タグの内側の余白（上下 左右） */
    border-radius: 16px;      /* 角の丸み */
    font-size: 0.875em;       /* 文字サイズ (例: 14px相当、基本フォントサイズに依存) */
    font-weight: 500;         /* 文字の太さ (normalより少し太め) */
    line-height: 1.5;         /* 行の高さ */
    text-align: center;       /* 文字を中央揃え（タグ幅が文字幅より広い場合） */
    border: 1px solid transparent; /* 枠線。デフォルトは透明にして高さを揃える */
    display: inline-flex;     /* フレックスアイテムとして振る舞い、内容物を中央揃えにしやすくする */
    align-items: center;      /* タグ内のテキストを垂直中央揃え */
    justify-content: center;  /* タグ内のテキストを水平中央揃え */
    /* transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out; */ /* ホバー時のトランジション（任意） */
}

/* タグ内のリンクスタイル */
.feature-tag a {
    color: inherit;          /* 親要素 (.feature-tag) の文字色を継承 */
    text-decoration: none;   /* リンクの下線を消す */
    display: block;          /* リンク領域をタグ全体に広げる */
}

/* 既存の特徴タグ（例: アクティビティ、歴史など）のスタイル */
/* .prefecture-term-tag クラスが付いていない .feature-tag に適用されます */
.feature-tag:not(.prefecture-term-tag) {
    background-color: #F3EFFF; /* 薄いラベンダー系の背景 */
    color: #673AB7;            /* 濃い紫系の文字色 */
    border-color: #D1C4E9;     /* やや薄い紫系の枠線 (border: 1px solid #D1C4E9; と同じ効果) */
}

/* 都道府県タグ（例: 宮城）の特有スタイル */
.feature-tag.prefecture-term-tag {
    background-color: #FFF0F5; /* 薄いピンク系の背景 (ラベンダーピンク) */
    color: #E91E63;            /* 濃いピンク系の文字色 (マゼンタ系) */
    border-color: #FFCDD2;     /* やや薄いピンク系の枠線 */
}

/* ==========================================================================
   Search Results Page (search.php) Styles
   ========================================================================== */

/* 検索結果ページ全体のコンテナ */
.search-results-page {
    padding: 20px 5vw;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    top: -2em; /* ページ全体を2行分上げる */
}

/* ページヘッダー (検索キーワードと件数表示部分) */
.search-results-page .page-header {
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 2px solid #f0f0f0;
    position: relative; /* ★追加: 相対位置指定を可能にする */
    top: -1em;          /* ★追加: 例として、さらに1行分上に移動 (この値を調整) */
    /* z-index: 1; */   /* ★必要に応じて: 他の要素との重なりを調整する場合 */
}

.search-results-page .page-header .page-title {
    font-size: 2.2em; /* タイトルのフォントサイズ */
    font-weight: 600;
    margin-bottom: 8px; /* タイトルと件数の間の余白 */
    color: #333;
}

.search-results-page .page-header .page-title span {
    font-weight: bold;
    color: #007bff; /* 検索キーワードのハイライト色 (例: 青) */
}

.search-results-page .search-results-count {
    font-size: 1em; /* 件数表示のフォントサイズ */
    color: #555;
}

/* カードリストのコンテナ (グリッドレイアウト) */
.search-results-list.place-list { /* .place-list は taxonomy-prefecture.php と共通の可能性あり */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* レスポンシブなカード列 */
    gap: 30px; /* カード間の隙間 */
}

/* 個々のカード (place-card) */
.place-card.search-result-item { /* .place-card は taxonomy-prefecture.php と共通の可能性あり */
    background-color: #ffffff;
    border: 1px solid #e9ecef; /* カードの境界線 */
    border-radius: 8px; /* カードの角丸 */
    overflow: hidden; /* 画像などがはみ出さないように */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* カードの影 */
    transition: transform 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
    display: flex; /* カード内部をflexboxで管理 (任意) */
    flex-direction: column; /* 縦方向に要素を配置 */
}

.place-card.search-result-item:hover {
    transform: translateY(-6px); /* ホバー時に少し浮き上がる効果 */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
}

.place-card .card-link {
    text-decoration: none;
    color: inherit; /* 親要素の色を継承 */
    display: flex; /* リンクをカード全体に広げ、内部要素もflexで管理 */
    flex-direction: column;
    height: 100%; /* カードの高さいっぱいに */
}

/* カード内の画像部分 */
.place-card .card-image {
    width: 100%;
    padding-top: 56.25%; /* アスペクト比 16:9 を維持 (height / width * 100) もし高さ固定が良いなら height: 200px; のまま */
    position: relative; /* img を絶対配置するため */
    overflow: hidden; /* はみ出し防止 */
}

.place-card .card-image img {
    position: absolute; /* 親要素(.card-image)に対して絶対配置 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* 親要素いっぱいに表示 */
    object-fit: cover; /* 画像がコンテナに合わせてトリミング/拡大縮小 */
    display: block;
    /* border-bottom: 1px solid #e9ecef; (アスペクト比維持の場合不要かも) */
}

.place-card .card-image img[src$="1113.jpg"], /* デフォルト画像を指定する場合 */
.place-card .card-image img[src$="placeholder.png"] { /* 汎用プレースホルダーの場合 */
    background-color: #f8f9fa; /* デフォルト画像の背景色 */
    object-fit: contain; /* 画像全体が見えるように (cover のままでも良い) */
    padding: 10px; /* 画像に少し余白 (任意) */
}

/* カード内のコンテンツ部分 (タイトル、住所、説明) */
.place-card .card-content {
    padding: 20px; /* コンテンツの余白 */
    flex-grow: 1; /* 残りの高さを埋める */
    display: flex;
    flex-direction: column;
}

.place-card .card-title {
    font-size: 1.3rem; /* タイトルのフォントサイズ */
    font-weight: 600;
    margin: 0 0 10px 0; /* 下マージン */
    line-height: 1.35;
    color: #212529; /* タイトルの色 */
}
.place-card .card-link:hover .card-title { /* リンクホバー時にタイトル色変更 */
    color: #0056b3; /* 例: 少し濃い青 */
}

.place-card .card-address,
.place-card .card-description,
.place-card .card-excerpt {
    font-size: 0.95rem; /* 住所や説明のフォントサイズ */
    color: #495057; /* テキストの色 */
    margin-bottom: 10px; /* 各要素間の下マージン */
    line-height: 1.6;
}
.place-card .card-address:last-child,
.place-card .card-description:last-child,
.place-card .card-excerpt:last-child {
    margin-bottom: 0; /* 最後の要素の下マージンを削除 */
}

/* ページネーション */
.search-results-page .navigation.pagination {
    margin-top: 50px; /* カードリストとの間の余白 */
    padding-top: 20px; /* ページネーション上部の余白 */
    border-top: 1px solid #f0f0f0; /* 区切り線 (任意) */
    text-align: center;
}

.search-results-page .navigation.pagination .nav-links .page-numbers {
    display: inline-block;
    padding: 10px 15px; /* ボタンのパディング */
    margin: 0 4px; /* ボタン間のマージン */
    border: 1px solid #dee2e6; /* ボタンの境界線 */
    border-radius: 6px; /* ボタンの角丸 */
    text-decoration: none;
    color: #007bff; /* 通常時の文字色 */
    background-color: #fff;
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.search-results-page .navigation.pagination .nav-links .page-numbers.current,
.search-results-page .navigation.pagination .nav-links .page-numbers:hover {
    background-color: #007bff; /* 現在のページ/ホバー時の背景色 */
    color: #fff; /* 現在のページ/ホバー時の文字色 */
    border-color: #007bff; /* 現在のページ/ホバー時の境界線色 */
}
.search-results-page .navigation.pagination .nav-links .page-numbers.dots { /* ... の部分 */
    border: none;
    background-color: transparent;
    color: #6c757d;
}


/* 検索結果がなかった場合の表示 */
.search-results-page .no-results.not-found {
    text-align: center; /* 中央揃え */
    padding: 40px 20px;
    background-color: #f8f9fa; /* 背景色 (任意) */
    border-radius: 8px;
}

.search-results-page .no-results .page-title {
    font-size: 1.8em;
    color: #333;
    margin-bottom: 20px;
}

.search-results-page .no-results .page-content p {
    font-size: 1.1em;
    color: #555;
    margin-bottom: 30px;
}

/* 検索結果がない場合に表示されるWordPress標準検索フォームのスタイル (任意) */
.search-results-page .no-results .search-form {
    display: flex;
    justify-content: center;
    max-width: 500px;
    margin: 0 auto; /* 中央揃え */

}
.search-results-page .no-results .search-form label { /* ラベルは非表示の場合が多いので省略可 */
    /* ... */
}
.search-results-page .no-results .search-form .search-field {
    flex-grow: 1;
    padding: 12px 15px;
    font-size: 1rem;
    border: 1px solid #ced4da;
    border-radius: 6px 0 0 6px;
}
.search-results-page .no-results .search-form .search-submit {
    padding: 12px 20px;
    font-size: 1rem;
    color: #fff;
    background-color: #007bff;
    border: 1px solid #007bff;
    border-radius: 0 6px 6px 0;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
    position: relative;
    top: -5em;

}
.search-results-page .no-results .search-form .search-submit:hover {
    background-color: #0056b3;
}

/* スクリーンリーダー用テキストの非表示 (既に他で定義されていれば不要) */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important; /* Ensures the text does not wrap. */
    top: -2em;
}
.copy-line1 {
  position: relative;
  top: -4em;
/* ==========================================================================
   まとめ記事 (single-matome_article.php) 固有のスタイル
   ========================================================================== */

/* --- 記事全体を囲むコンテナ (PHP側で適切なクラスを付与) --- */
/* 例えば、<div id="primary" class="content-area matome-article-container"> のようにする */
.matome-article-container {
    /* 上の .container のスタイルを継承・利用する。
       もし固有のパディングやマージンが必要ならここで指定。 */
    padding-top: 30px; /* 記事上部の余白 */
    padding-bottom: 40px; /* 記事下部の余白 */
    /* background-color: #fff; は .container で指定されていれば不要 */
    /* border: 1px solid #e0e0e0; (枠線が必要なら) */
    /* border-radius: 8px; (角丸が必要なら) */
    /* margin-bottom: 40px; (フッターとの間隔) */
}

/* 記事本体のラッパー (.matome-article-entry) */
.matome-article-entry {
    /* ここでは特に幅やマージンを指定せず、親の .matome-article-container や
       .container の幅制御に任せる。
       固有の背景色やパディングが必要な場合はここにも指定可能。 */
}

/* (以下、既存の .matome-article-entry 配下のCSSはそのまま活用) */

/* --- 観光地カードの基本情報部分 (spot-base-info-card) のスタイル調整 --- */
/* single-place.php の .place-card やトップページのカードとデザインを近づける場合 */
.spot-base-info-card {
    display: flex;
    gap: 1.5em; /* 画像とテキストの間隔 */
    margin-bottom: 1.5em;
    padding: 1em;
    border-radius: 8px; /* 角丸を少し大きく */
    border: 1px solid #e0e0e0; /* 枠線を少しはっきり */
    background-color: #fff; /* 背景色 */
    box-shadow: 0 2px 5px rgba(0,0,0,0.08); /* 影を少しつける */
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.spot-base-info-card:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.12);
    transform: translateY(-3px);
}

.spot-base-info-card a {
    text-decoration: none;
    color: inherit;
    display: flex;
    width: 100%;
}

.spot-base-info-card img {
    width: 150px; /* 画像の幅 */
    height: 100px; /* 画像の高さ */
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
    /* margin-right は gap で指定 */
}

.spot-base-info-card .spot-card-content { /* テキストコンテンツ部分 */
    flex-grow: 1;
    display: flex;
    flex-direction: column; /* タイトルと抜粋を縦に並べる */
}

.spot-base-info-card .spot-card-content p { /* カード内の抜粋など */
    font-size: 0.9em;
    color: #555;
    margin-bottom: 0; /* 抜粋が複数行になることを想定し、最後の要素としてマージンなし */
    line-height: 1.5;
}

/* 各スポットのタイトル (place投稿のタイトル) をカード内に入れる場合 */
/* もしPHP側で .spot-item > h3 を .spot-base-info-card の中に入れたい場合は、
   そのようにHTML構造を変更し、CSSも調整します。
   現状のPHPでは .spot-item > h3 はカードの外にあります。
   もし .spot-item > h3 をカードデザインに含めたい場合は、PHPの構造変更も検討してください。
   ここでは、現状のPHP構造のままで、カードデザインを少しリッチにする方向で調整しています。
*/
.spot-item > h3 { /* 各スポットのタイトル (place投稿のタイトル) */
    font-size: 1.6em;
    color: #333; /* single-place.php の .entry-title のような色 */
    margin-top: 0;
    margin-bottom: 0.8em;
    /* 必要であれば下線などを追加 */
    /* padding-bottom: 0.5em; */
    /* border-bottom: 1px solid #eee; */
}


/* --- レスポンシブ対応 --- */
@media (max-width: 768px) {
    .site-content, /* または #content, .main-content など */
    .container {
        padding-left: 10px;
        padding-right: 10px;
    }
    .matome-article-container {
        padding-top: 20px;
        padding-bottom: 30px;
    }
    .matome-article-entry .entry-title {
        font-size: 1.8em;
    }
    .spot-item > h3 {
        font-size: 1.4em;
    }
    .spot-base-info-card {
        flex-direction: column;
        gap: 1em;
    }
    .spot-base-info-card img {
        width: 100%;
        height: auto; /* スマホでは高さを自動に */
        max-height: 200px; /* 高すぎないように上限 */
        object-fit: contain; /* または cover のまま */
        margin-bottom: 1em;
    }
}/* ================================================== */
/* 楽天ホテルバナー用スタイル (index.css に直接記述)  */
/* ================================================== */

/* バナー全体を囲むボックス */
.rakuten-hotel-banner-container {
    margin-top: 40px;
    margin-bottom: 40px;
    padding-top: 30px;
    border-top: 1px solid #eee;
}

/* 「〇〇の人気ホテル」という見出し */
.rakuten-hotel-banner-container h3 {
    font-size: 1.7em;
    font-weight: bold;
    color: #333;
    margin-bottom: 25px;
    padding-bottom: 10px;
    border-bottom: 2px solid #0073aa;
    display: inline-block;
}

/* 3つのホテルを横並びにするための設定 */
.rakuten-hotel-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
}

/* 各ホテル情報（カードデザイン） */
.rakuten-hotel-item {
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    display: flex;
    flex-direction: column;
}

.rakuten-hotel-item:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    transform: translateY(-4px);
}

/* カード全体をリンクに */
.rakuten-hotel-item a {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* ホテルの画像部分 */
.rakuten-hotel-item .hotel-image-wrapper {
    width: 100%;
    padding-top: 75%;
    position: relative;
    overflow: hidden;
}
.rakuten-hotel-item img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.rakuten-hotel-item:hover img {
    transform: scale(1.08);
}

/* ホテルのテキスト情報部分 */
.rakuten-hotel-item .hotel-text-content {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

/* ホテルの名前 */
.rakuten-hotel-item .hotel-name {
    font-size: 1.1em;
    font-weight: bold;
    color: #333;
    line-height: 1.4;
    margin: 0 0 10px 0;
    transition: color 0.3s ease;
}
.rakuten-hotel-item a:hover .hotel-name {
    color: #0073aa;
}

/* ホテルのキャッチコピー */
.rakuten-hotel-item .hotel-caption {
    font-size: 0.9em;
    color: #555;
    line-height: 1.6;
    margin-top: auto;
    padding-top: 12px;
}

/* 楽天のクレジット表示 */
.rakuten-credit {
    text-align: right;
    font-size: 0.8em;
    color: #777;
    margin-top: 25px;
    margin-bottom: 0;
}
.rakuten-credit a {
    color: #777;
    text-decoration: none;
}
.rakuten-credit a:hover {
    text-decoration: underline;
}

/* スマートフォン表示用の設定 */
@media (max-width: 768px) {
    .rakuten-hotel-list {
        grid-template-columns: 1fr;
    }
    .rakuten-hotel-banner-container h3 {
        font-size: 1.4em;
    }
}
/* ======================================== */
/*  サイドバー Ver.9 (おしゃれ改善版)      */
/* ======================================== */

/* --- 2カラムレイアウト基本構造 --- */
.content-wrapper { display: flex; gap: 30px; max-width: 1200px; margin: 40px auto; padding: 0 15px; align-items: flex-start; }
#sidebar { width: 280px; flex-shrink: 0; }
.site-main { flex-grow: 1; min-width: 0; }
.site-main .place-article { margin-top: 0; margin-bottom: 0; }

/* --- ウィジェット共通スタイル --- */
.sidebar-widget { 
    border: 1px solid #e5e7eb; 
    border-radius: 12px; 
    margin-bottom: 24px; 
    background-color: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    transition: box-shadow 0.3s ease;
}
.sidebar-widget:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.widget-title { 
    font-size: 15px; 
    font-weight: 700; 
    padding: 16px 18px; 
    margin: 0; 
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    border-radius: 11px 11px 0 0;
    text-align: center;
    letter-spacing: 0.5px;
}
.widget-content { padding: 18px; }
/* ======================================================= */
/*  【修正用コード】モバイル表示でサイドバーを記事の下に移動  */
/* ======================================================= */
@media (max-width: 992px) {

    /* 親要素(.content-wrapper)が縦積み(column)になった際に
       中の要素の表示順を制御できるように display: flex を維持します */
    .content-wrapper {
        display: flex;
        flex-direction: column;
    }

    /* メインコンテンツ（記事）を先に表示する */
    .site-main {
        order: 1;
    }

    /* サイドバーを後に表示する */
    #sidebar {
        order: 2;
    }
}

/* --- [個別] カテゴリウィジェット --- */
.parent-category-group { margin-bottom: 14px; }
.parent-category-group:last-child { margin-bottom: 0; }
.accordion-title-inner, .parent-category-name-no-children { 
    font-size: 14px; 
    font-weight: 600; 
    color: #1f2937; 
    padding: 10px 14px; 
    margin: 0; 
    position: relative; 
    border-radius: 6px;
    background-color: #f9fafb;
    border: 1px solid #e5e7eb;
}
.accordion-title-inner { 
    cursor: pointer; 
    transition: all 0.2s ease;
}
.accordion-title-inner:hover { 
    background-color: #f3f4f6;
    border-color: #d1d5db;
}
.accordion-title-inner::after { 
    content: '▼'; 
    font-size: 10px; 
    color: #6b7280; 
    position: absolute; 
    right: 14px; 
    top: 50%; 
    transform: translateY(-50%) rotate(0deg); 
    transition: transform 0.3s ease; 
}
.accordion-title-inner.active {
    background-color: #eef2ff;
    border-color: #c7d2fe;
}
.accordion-title-inner.active::after { 
    transform: translateY(-50%) rotate(180deg); 
}
.child-category-list { 
    list-style: none; 
    padding-left: 0; 
    margin: 10px 0 0 0; 
    display: none; 
}
.child-category-list li a { 
    display: block; 
    padding: 8px 14px; 
    font-size: 13px; 
    color: #4f46e5; 
    text-decoration: none; 
    border-radius: 5px;
    margin-bottom: 4px;
    transition: all 0.2s ease;
}
.child-category-list li a:hover { 
    background-color: #eef2ff;
    padding-left: 18px;
}

/* --- [個別] 都道府県ウィジェット --- */
.region-group { 
    margin-bottom: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid #f3f4f6;
}
.region-group:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}
.region-name { 
    font-size: 14px; 
    font-weight: 700; 
    margin: 0 0 10px 0; 
    padding: 6px 10px;
    background: linear-gradient(90deg, #f0f9ff 0%, transparent 100%);
    border-left: 3px solid #0ea5e9;
    color: #0c4a6e;
}
.prefecture-list { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 8px; 
}
.prefecture-list a { 
    font-size: 13px; 
    color: #0369a1; 
    text-decoration: none;
    padding: 4px 10px;
    background-color: #f0f9ff;
    border-radius: 4px;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}
.prefecture-list a:hover { 
    background-color: #0ea5e9;
    color: #fff;
    border-color: #0284c7;
}

/* --- [個別] 関連/最新スポットウィジェット --- */
.post-list-widget .post-item { 
    display: flex; 
    align-items: center; 
    gap: 12px; 
    padding: 10px; 
    text-decoration: none; 
    color: #1f2937; 
    border-radius: 8px; 
    transition: all 0.3s ease; 
    margin-bottom: 10px;
    border: 1px solid #f3f4f6;
}
.post-list-widget .post-item:last-child { margin-bottom: 0; }
.post-list-widget .post-item:hover { 
    background-color: #fafafa;
    border-color: #e5e7eb;
    transform: translateX(4px);
}
.post-list-widget .thumb { 
    width: 70px; 
    height: 70px; 
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 6px;
}
.post-list-widget .thumb img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover;
    transition: transform 0.3s ease;
}
.post-list-widget .post-item:hover .thumb img {
    transform: scale(1.1);
}
.post-list-widget .title { 
    font-size: 13px; 
    line-height: 1.6;
    font-weight: 500;
}
.post-list-widget .no-posts { 
    font-size: 13px; 
    color: #9ca3af; 
    padding: 15px 10px;
    text-align: center;
}

/* --- [個別] 広告ウィジェット --- */
.ad-widget-content { 
    padding: 10px; 
    text-align: center; 
}
.ad-widget-content a { 
    display: inline-block; 
    margin: 8px 4px;
    border-radius: 6px;
    overflow: hidden;
    transition: transform 0.2s ease;
}
.ad-widget-content a:hover {
    transform: scale(1.02);
}
.ad-widget-content img { 
    max-width: 100%; 
    height: auto; 
    border: 1px solid #e5e7eb;
    border-radius: 6px;
}

/* --- レスポンシブ対応 --- */
@media (max-width: 992px) { 
    .content-wrapper { flex-direction: column; } 
    #sidebar { width: 100%; margin-bottom: 30px; } 
}

/* ===== ▼▼▼ Leafletポップアップのカスタムデザイン ▼▼▼ ===== */

/* ポップアップ全体の角を丸くし、影を付ける */
.leaflet-popup-content-wrapper {
    background: #ffffff;
    border-radius: 12px; /* 角の丸み */
    box-shadow: 0 4px 12px rgba(0,0,0,0.15); /* 影を付けて立体感を出す */
    padding: 0; /* 内側の余白をリセット */
}

/* Leafletデフォルトの余白をなくす */
.leaflet-popup-content {
    margin: 0 !important;
    padding: 0;
    width: 250px; /* ポップアップの横幅を固定 */
}

/* ポップアップの「しっぽ」部分にも影を適用 */
.leaflet-popup-tip {
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* ---- ▼ ポップアップの中身のデザイン ---- */

/* コンテンツ全体のラッパー */
.custom-leaflet-popup {
    padding: 12px; /* 内側に余白を作る */
    text-align: center; /* 文字を中央揃えに */
}

/* 画像のデザイン */
.custom-leaflet-popup img {
    width: 100%;
    height: auto;
    border-radius: 8px; /* 画像の角も少し丸くする */
    margin-bottom: 12px;
}

/* テキスト（観光地名）のデザイン */
.custom-leaflet-popup b a {
    color: #333; /* 文字色を濃いグレーに */
    text-decoration: none; /* 下線を消す */
    font-size: 16px; /* 文字サイズを少し大きく */
    font-weight: bold;
    display: block; /* ブロック要素にしてクリックしやすく */
}

/* テキストにマウスが乗った時の効果 */
.custom-leaflet-popup b a:hover {
    color: #007bff; /* マウスが乗ったら色を変える */
}

/* 右上の「×」閉じるボタンを少し大きく、押しやすくする */
.leaflet-popup-close-button {
    padding: 8px 8px 0 0 !important;
    font-size: 18px;
}