/* ============================================================
   main-content-store-detail.css (Structured Version)
   店舗詳細ページの個別スタイル管理
   ============================================================ */

/* --- 1. Lower Hero Section (ページ上部ヘッダー) --- */
.lower-hero {
    width: 100%;
    margin-bottom: 20px;
    padding: 100px 0 60px;
    text-align: center;
    background-color: #f8f9fa;
    border-bottom: 1px solid #eee;
}

.section-title-area .section-title {
    font-size: 3rem;
    color: #333;
    letter-spacing: 0.1em;
    margin-bottom: 10px;
}

.section-title-area .section-subtitle {
    font-size: 1rem;
    color: #c5a059;
    font-weight: 600;
    letter-spacing: 0.2em;
}

/* --- 2. Store Hero (店舗別メインビジュアル) --- */
/* 【クリーンアップ修正】
   HTML内に記述のなかった不要な旧 .store-hero 関連モジュールを削除、
   または干渉を防ぐため将来的な拡張用として完全コメントアウト、もしくは整理しました。
   （他のレイアウト要素への影響・余白の崩れを完全に防止します） */

/* --- 3. Layout Control (全体コンテナとPC並列設定) --- */
.store-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px 80px;
}

@media (min-width: 768px) {
    .store-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: flex-start;
    }
}

/* --- 4. Store Visual (店舗画像エリア) --- */
.store-visual {
    margin: 0 auto 40px;
}

@media (min-width: 768px) {
    .store-visual {
        flex: 0 0 46%; /* タブレット・PC時：左カラム */
        margin-bottom: 60px;
        margin-top: 40px; /* 👈 【この1行を追加】右側カードの padding: 40px; と高さを完全に同期させます */
    }
}

/* 💡【ここを修正・追記】 */
.store-visual-main {
    overflow: hidden; /* 👈【追加】画像が拡大しても、元の枠線（画面枠）からはみ出さないようにマスクします */
}

.store-visual-main img {
    width: 100%;
    /* 長方形（横3:縦2）に変更 */
    aspect-ratio: 3 / 2; 
    
    /* 枠いっぱいに表示（少し端は切れますが、隙間なく表示されます） */
    object-fit: cover; 
    
    /* 画像の中心を基準に切り抜く */
    object-position: center; 
    
    background-color: #f8f9fa; 
    border-radius: 0;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    
    /* 💡【追加】ここで拡大率を調整します */
    transform: scale(1.3); /* 👈 1.15倍に拡大（好みに合わせて 1.1 〜 1.3 あたりで調整してください） */
}

@media (min-width: 768px) {
    .store-visual-main img {
        height: auto; 
        /* PCで横幅が広すぎる場合は、ここで比率を 16 / 9 などに変えて高さを抑えることも可能です */
    }
}

/* 【修正】地図画像を廃止し、Googleマップ（iframe）の比率維持・レスポンシブ用に最適化 */
.store-visual-sub iframe {
    width: 100%;
    margin-top: 20px;
    aspect-ratio: 3 / 2; /* メイン画像と同じく3:2 of 比率に統一 */
    border-radius: 0;
    border: 1px solid #eee;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1); /* 影の質感を上の写真と統一 */
}

/* 【修正】Googleマップで見るボタン（明るく目立つビビッドオレンジ・角丸なしに統一） */
.btn-map-link {
    display: block;
    width: 100%;
    margin-top: 15px;
    padding: 14px 20px;
    text-align: center;
    text-decoration: none;
    font-weight: 800;
    font-size: 0.95rem;
    color: #fff;
    background: #ff9100; /* 💡 LINEの緑やDMMの赤と被らない、アクティブで明るく非常に目立つオレンジ */
    border-radius: 0;    /* 直角シャープ（角丸なし）に完全統一 */
    box-shadow: 0 4px 15px rgba(255, 145, 0, 0.25);
    transition: all 0.3s ease;
}

/* ボタンホバー時の挙動 */
.btn-map-link:hover {
    transform: translateY(-2px);
    background: #f57c00; /* ホバー時は少し深みのある濃厚なオレンジに変化させ、質感を強調 */
    box-shadow: 0 6px 20px rgba(255, 145, 0, 0.4);
}

/* PCのみ表示 */
.pc-only-map {
    display: block;
}

/* 💡【新規追加】住所下に新規設置するSP専用ボタンは、PC環境（768px以上）では非表示にする */
.sp-only-map-btn {
    display: none;
}

/* --- 5. Store Info Card (基本情報テーブル) --- */
.store-info-card {
    margin-bottom: 60px;
    padding: 40px 40px 32px; /* 💡 下側の内側余白を 40px から 32px に引き締め、タグ削除後の空間を最適化 */
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.05);
}

@media (min-width: 768px) {
    .store-info-card {
        flex: 0 0 50%; /* タブレット・PC時：右カラム */
        margin-top: 0;
    }
}

.store-section-title {
    margin-bottom: 25px;
    padding-left: 12px;
    border-left: 6px solid #e60012;
    font-size: 1.6rem;
    font-weight: 900;
    color: #222;
}

.store-info-table {
    width: 100%;
    border-collapse: collapse;
}

.store-info-table th,
.store-info-table td {
    padding: 18px 10px;
    border-bottom: 1px solid #eee;
    text-align: left;
    vertical-align: top; /* 縦並び構造 of 崩れを防ぐため上揃えに統一 */
}

/* 💡 テーブル最下部（店内サービス）の境界線を消し、余白を詰めてカード底面とのバランスを保持 */
.store-info-table tr:last-child th,
.store-info-table tr:last-child td {
    border-bottom: none;
    padding-bottom: 5px;
}

.store-info-table th {
    width: 28%;
    font-weight: 800;
    color: #333;
}

.unit-line {
    margin-bottom: 6px;
}

/* 【修正】切替用メディアクエリを完全に撤搬し、全画面幅において「常に縦表示（縦に2つ並ぶ）」に固定 */
.pachinko-slot-summary {
    display: flex;
    flex-direction: column; /* 常に縦並び(上下構造)に固定してレイアウトの美しさをホールド */
    gap: 12px;
    max-width: 200px; /* ★ここを「280px sink」や「300px」など、お好みの細さに数値を小さくしてください */
}

.summary-group-box {
    flex: 1;
    background: #fdfdfd;
    border: 1px solid #eef0f2;
    border-radius: 6px;
    padding: 12px;
}

.group-badge {
    display: block;
    font-size: 0.8rem;
    font-weight: 800;
    text-align: center;
    padding: 4px 8px;
    border-radius: 4px;
    color: #fff;
    margin-bottom: 10px;
    letter-spacing: 0.05em;
}

.p-badge { background: #e60012; }
.s-badge { background: #333333; }

/* 【修正】常に縦表示となったため、全ての画面幅で間延びしない「左詰め＋適正な固定距離」の挙動に統一 */
.unit-line-flex {
    display: flex;
    justify-content: flex-start; /* 常に左詰めに統一し、1カラム化に伴う中央エリアの間延びを完全に防止 */
    align-items: center;
    gap: 16px; /* レートバッジと台数の間の最適な固定距離 */
    padding: 6px 0;
    font-size: 0.9rem;
    border-bottom: 1px dashed #edeef0;
}

.unit-line-flex:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.rate-lbl {
    font-weight: 700;
    color: #555;
    background: #f0f1f4;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 0.75rem;
    white-space: nowrap; /* テキストの途中で予期せぬ改行が入るのを完全に防止 */
}

.rate-lbl.flex-long {
    max-width: 120px;
    white-space: nowrap;
}

.count-val {
    font-weight: 800;
    color: #111;
    white-space: nowrap;
}

/* 【構造化追加】店内サービスカードモジュール */
.service-box-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 2px;
}

.service-item-box {
    background: #f9f9fb;
    border-left: 4px solid #c5a059; /* グループサブカラーのゴールド */
    padding: 12px 14px;
    border-radius: 0 6px 6px 0;
}

.service-box-title {
    font-weight: 800;
    font-size: 0.95rem;
    color: #111;
    margin-bottom: 4px;
}

.service-box-text {
    font-size: 0.85rem;
    line-height: 1.5;
    color: #666;
    margin: 0;
}

/* --- 6. Store Tags (設置レート等) --- */
/* 💡 HTMLから削除されたため関連スタイルは除去し、余白への予期せぬ干渉を防ぎます */


/* --- 7. Store Feature Card (店舗の特徴) --- */
.store-feature-card {
    margin-bottom: 60px;
    padding: 40px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.05);
}

@media (min-width: 1025px) {
    .store-feature-card {
        flex: 0 0 100%; /* 下段全幅 */
    }
}

/* 【最適化】店長挨拶メインブロック */
.feature-main-block {
    margin-bottom: 50px;
}

.feature-title {
    margin-bottom: 15px;
    font-size: 1.4rem;
    font-weight: 900;
    color: #222;
    letter-spacing: 0.02em;
}

.feature-lead {
    font-size: 1rem;
    line-height: 1.8;
    color: #444;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f0f0f0;
}

/* 【新規】店長挨拶用 3カラムグリッドレイアウト */
.feature-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

@media (min-width: 768px) {
    .feature-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.feature-grid-item {
    background: #fdfdfd;
    border: 1px solid #eef0f2;
    padding: 24px 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
}

.feature-item-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 800;
    color: #c5a059; /* サブアクセント of ゴールド色 */
    background: #fbf7f0;
    padding: 4px 10px;
    border-radius: 4px;
    margin-bottom: 12px;
}

.feature-item-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: #111;
    margin-bottom: 10px;
    line-height: 1.4;
}

.feature-item-text {
    font-size: 0.85rem;
    line-height: 1.6;
    color: #666;
    margin: 0;
}

/* --- 【最適化】お食事処ハイライトボックス設定 --- */
/* 💡 うどんをイメージした温かみのある上品なライトベージュ（#f6f0e5）をベースに存在感を強化 */
.feature-sub-block {
    background: #f6f0e5; /* 視認性を重視し、温もりを感じる特製和風ベージュ背景 */
    border-radius: 8px;
    padding: 30px;
    border-left: 5px solid #d0a46c; /* 出汁や伝統を感じさせる深みのあるゴールドベージュ적アクセント線 */
    box-shadow: inset 0 0 0 1px rgba(208, 164, 108, 0.2), 0 4px 15px rgba(208, 164, 108, 0.08); /* 埋もれないよう僅かな陰影を付与 */
}

/* 💡【指定箇所のみ差替】老舗の暖簾（のれん）を模した極濃の漆黒炭バッジ（金風立体シャドウ・zeroUnits対応） */
.feature-sub-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 900;
    color: #fff;
    background: #1e1c1a; /* 暖簾の引き染め文字のように重厚感を与える、極濃の漆黒炭色 */
    padding: 5px 14px;
    border-radius: 0;    /* 直角でシャープな気品ある角なしに調整 */
    margin-bottom: 14px;
    letter-spacing: 0.12em;
    box-shadow: 2px 2px 0 #b88d4c; /* 右下に鈍く輝く金風のソリッドシャドウ（0pxの単位を除去） */
}

.feature-text {
    font-size: 0.95rem;
    line-height: 1.8;
    color: #42352b; /* 背景色に対してコントラストが美しく映える濃茶色のテキスト */
    font-weight: 700; /* 文字がしっかりと目に入るようやや太めのフォントウェイトへ引き上げ */
    margin: 0;
}

/* --- 8. External Links (外部リンクボタン：ヒーロー内配置最適化) --- */
.store-links {
    margin-bottom: 80px;
}

@media (min-width: 1025px) {
    .store-links {
        flex: 0 0 100%; /* 下段全幅 */
    }
}

/* クラス名を店舗一覧と統一 / HTMLの要素数に応じて2列並列と1-2ピラミッド型を全自動で切り替える構造 */
.lower-hero .store-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 横並び2列の均等分割を指定 */
    gap: 10px;
    width: 100%;
    max-width: 600px;        /* PC表示での最大横幅 */
    margin: 30px auto 0;     /* 上部マージンと、左右中央の自動整列 */
    padding: 0 20px;         
    box-sizing: border-box;
}

/* 共通ボタン設定（💡 .btn-instagram を完全統合） */
.lower-hero .btn-line-add,
.lower-hero .btn-external,
.lower-hero .btn-dmm,
.lower-hero .btn-instagram {
    min-width: 0; 
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 10px;        
    box-sizing: border-box;
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
    border-radius: 0;           /* 直角シャープ（角丸なし）を維持 */
}

/* ------------------------------------------------------------
   【自動制御】3項目の時のみ（ピラミッド型）に条件変更：
   子要素が3つ存在し、かつ4つ目が存在しない（インスタがない等）場合のみ適用。
   4項目（LINE・インスタ両方存在）ある場合はこの幅広化が無視され、綺麗な2×2で横並びになります。
   ------------------------------------------------------------ */
.lower-hero .store-actions:has(> :nth-child(3)):not(:has(> :nth-child(4))) .btn-line-add { 
    grid-column: 1 / span 2;   /* 上段を2列分ぶち抜きで結合する */
    justify-self: center;      /* 結合したエリアの【中央】に自動整列 */
    width: calc(50% - 5px);    /* 他ボタン群と同じ大きさ（横幅半分）に保ち、巨大化を抑止 */
}

/* ------------------------------------------------------------
   【自動制御】デフォルト状態（均等横並び）
   ------------------------------------------------------------ */
/* LINEお友達登録 */
.lower-hero .btn-line-add { 
    background: #06C755; 
    color: #fff !important; 
}
.lower-hero .btn-line-add:hover { 
    background: #05a346; 
    box-shadow: 0 4px 12px rgba(6, 199, 85, 0.3);
    transform: translateY(-2px);
}

/* P-WORLD & DMMぱちタウン & Instagram（各Gridセルへ自動追従） */
.lower-hero .btn-external,
.lower-hero .btn-dmm,
.lower-hero .btn-instagram {
    grid-column: auto;
}

/* P-WORLD */
.lower-hero .btn-external { 
    border: 1px solid #12458f; 
    color: #12458f !important; 
    background: #fff;
}
.lower-hero .btn-external:hover { 
    background: #f0f4f9; 
    border-color: #c5a059; 
    color: #c5a059 !important; 
    transform: translateY(-2px);
}

/* DMM ぱちタウン */
.lower-hero .btn-dmm { 
    border: 1px solid #d32f2f; 
    color: #d32f2f !important; 
    background: #fff;
}
.lower-hero .btn-dmm:hover { 
    background: #fff5f5; 
    border-color: #c5a059; 
    color: #c5a059 !important; 
    transform: translateY(-2px);
}

/* Instagram（💡 新規追加：洗練されたインスタグラデーション仕様） */
.lower-hero .btn-instagram {
    background: linear-gradient(135deg, #405DE6 0%, #5851DB 15%, #833AB4 30%, #C13584 50%, #E1306C 70%, #FD1D1D 85%, #F56040 100%);
    color: #fff !important;
}
.lower-hero .btn-instagram:hover {
    opacity: 0.9;
    box-shadow: 0 4px 12px rgba(131, 58, 180, 0.3);
    transform: translateY(-2px);
}

/* --- 9. Responsive Layout (各デバイス調整) --- */

/* タブレット〜小型PC (960px以下) */
@media (max-width: 960px) {
    .lower-hero { padding: 80px 0 40px; }
    .section-title-area .section-title { font-size: 2.2rem; }
}

/* スマートフォン (768px以下) */
@media (max-width: 768px) {
    /* 【追記・構造改編】SP表示時のみ画像 ➔ 店舗情報 の並び順を自在にコントロールする設定 */
    .store-container {
        display: flex;
        flex-direction: column;
    }

    /* 親要素のブロック概念を contents に変更し、子要素(画像とMAP)をcontainer直下と同等に扱う */
    .store-visual {
        display: contents;
    }

    /* 各要素の順序(order)指定 */
    .store-visual-main {
        order: 1;            /* ①店舗画像（一番上） */
        margin-bottom: 20px; /* 💡【修正】店舗情報カードとの間の余白が開きすぎないよう 40px から 20px に引き締め */
    }

    .store-info-card {
        order: 2;            /* ②店舗情報カード（二番目） */
        padding: 28px 28px 22px; /* スマホ表示時も下側の余白を適切に絞り、空間の延びをシャットアウト */
        margin-bottom: 25px; /* 💡【修正】MAPブロック削除に伴起、次の「店舗の特徴」との間に綺麗に収まる隙間（25px）を新設 */
    }

    /* 💡【超重要・最適化修正】基本情報テーブルのレスポンス崩れ・2行折れ曲がり対策
       SP表示（画面幅が狭い環境）において、横並びテーブルを1カラム（上下並び）のブロック構造へ変換。
       これにより見出しテキストや長文コンテンツ、複数レートバッジが枠内で圧迫されてレイアウトが崩れるのを100%防止します。 */
    .store-info-table,
    .store-info-table tbody,
    .store-info-table tr,
    .store-info-table th,
    .store-info-table td {
        display: block;
        width: 100% !important;
        box-sizing: border-box;
    }

    /* 💡【新規追加】SP表示における各項目の境界認識・視覚区別のための最適化 */
    .store-info-table tr {
        margin-bottom: 12px;
        padding: 16px 14px; /* 各項目を独立した「箱」のように包む内側余白 */
        border-bottom: none;
        border-radius: 6px;
        border: 1px solid #eaeaea; /* 四方をうっすら囲む境界線 */
        transition: background-color 0.2s ease;
    }

    /* 奇数番目の項目（住所、遊技台数など）に淡い背景色を敷いて縞模様（ストライプ）にし、項目の境界線をハッキリ区別 */
    .store-info-table tr:nth-child(odd) {
        background: #f9f9fb;
    }
    
    /* 偶数番目の項目（電話番号、営業時間など）は白背景 */
    .store-info-table tr:nth-child(even) {
        background: #ffffff;
    }

    .store-info-table tr:last-child {
        margin-bottom: 0;
    }

    /* 💡【バグ修正・多重パディング最適化】
       tr自体に十分なインナーマージンが確保されたため、th and tdの不要な上下余白をリセット。
       窮屈感をなくし、テキストの視認性を劇的に向上させる黄金バランスに再調整しました。 */
    .store-info-table th {
        width: 100%;
        padding: 0 0 6px 0; /* 下部余白を適正に引き締め、tdとの一体感を保持 */
        border-bottom: none;
        font-size: 0.95rem;
        font-weight: 800;
        color: #222;
        display: flex;
        align-items: center;
    }
    
    /* 疑似要素でゴールドのバーを見出しテキストの左隣に設置 */
    .store-info-table th::before {
        content: "";
        display: inline-block;
        width: 4px;
        height: 1.1em;
        background-color: #c5a059; /* 店舗グループサブカラーのゴールド */
        margin-right: 8px;
        border-radius: 2px;
    }

    .store-info-table td {
        width: 100%;
        padding: 4px 0 0 0; /* thとの間に適度な近接余白を設定 */
        border-bottom: none;
        font-size: 0.9rem;
        line-height: 1.6;
        color: #444;
    }

    /* 縦に並るレート・台数サマリーボックスの幅制限を解除し、スマホ画面幅いっぱいにのびのびと配置 */
    .pachinko-slot-summary {
        max-width: 100%;
        margin-top: 4px; /* 見出しとの間隔調整 */
    }

    /* 💡【超重要・最適化修正】
       SP表示時は、左カラムにあった重いGoogleマップ（iframe）とPC用の周辺ボタンが含まれる「.store-visual-sub」を丸ごと完全に非表示（消去）にします。
       これにより、読み込み通信負荷の劇的削減と、スクロール時の地図暴走トラブルを根本からゼロにします。 */
    .store-visual-sub {
        display: none !important;
    }

    /* SPではPC地図を完全に消す（HTMLは残るが表示しない） */
    .pc-only-map {
        display: none;
    }

    /* 💡【新規追加】HTMLのテーブル内（住所直下）に仕込まれたSP専用ボタンを、ここで初めてブロック表示化 */
    .sp-only-map-btn {
        display: block;
        margin-top: 10px;    /* 住所テキストとの間の適切な余白 */
        padding: 11px 15px;  /* テーブルのセル幅にスッキリ綺麗に収まる押しやすい高さに微調整 */
        font-size: 0.85rem;
        box-shadow: 0 4px 10px rgba(255, 145, 0, 0.15); /* 白カード内での表示に合わせて影の質感を上品に最適化 */
    }

    /* 💡【ここを調整】SP表示時の .store-feature-card の下部余白を設定（例として30pxを設定） */
    .store-feature-card {
        order: 4;            /* ④店舗の特徴セクション（一番下） */
        padding: 28px;
        margin-bottom: 30px; /* 👈 ここの数値を好みの広さ（20px〜40px等）に変更して微調整してください */
    }

    /* 💡【追加】SP表示時、うどんどん（.feature-sub-block）を包むメインブロックの下部余白を引き締め */
    .feature-main-block {
        margin-bottom: 24px; /* PC用の 50px から 24px に縮小し、うどんどん下の間延びを完全に解消 */
    }

    .feature-sub-block {
        padding: 20px;
    }
}

/* モバイル極小画面 (400px以下) 微調整 */
@media (max-width: 400px) {
    /* モバイル時はGridを縦1列（1カラム）へ再構築し、すべてのボタンを等しく全幅にします */
    .lower-hero .store-actions {
        grid-template-columns: 1fr;
    }
    .lower-hero .store-actions .btn-line-add { 
        grid-column: 1 !important;
        width: 100% !important; 
    }
}