@charset "UTF-8";
/*
    地図ページの「3層目」＝意図的な差分だけを置く（Step3-14-5a-2）。
    層の順序は _LayoutMap.cshtml で固定：
      ① モバイル土台（layoutmap.mobile）→ ② PC を media で上書き（layoutmap/*）
      → ③ ページ CSS も同じ2枚重ね → ④ ここ（最後・意図的な差分だけ）

    🔴 なぜ3層目が要るか＝モバイル CSS は @media を1つも持たず全幅に効く上に、
       `html body > table > tbody > tr > td #map_canvas` のように骨格へ直付けしていて
       詳細度が高い。PC 側の素の id セレクタ（#map_canvas）では勝てないので、
       広い幅で効かせたい打ち消しはここに書く。
       ⚠️ `/home`（_LayoutMain）とは力関係が逆＝あちらは Blue の PC CSS が強すぎた。
*/

/* ---- 768px 未満＝モバイル。PC 専用の器は出さない ---- */
#title_wrap,
#bottom_content {
    display: none;
}

/*
    PC 専用の部品（Step3-14-5a-3）。

    🔴 こちらは「隠す側」を max-width に置く＝広い幅では display を一切指定しない。
       理由＝#hint_mask は hint.css で display:none にして JS の show()/hide() で開閉する。
       広い幅で display:block を被せると「閉じる」を押しても次の描画で復活してしまう。
       #move_state / #sun_solstice_button の display:block も PC 側の info.css が持っているので、
       ここで指定し直す必要が無い（指定すると二重管理になる）。
*/
@media (max-width: 767.98px) {
    #move_state,
    /*
        🔴 Step3-21-2a＝`/moon` は都道府県リンクを `div#move_state_wrap > p > a#move_state` と
           **器で包む**（Moon 固有の info.css が `#move_state_wrap` に余白と中央揃えを持つため）。
           アンカーの `#move_state` だけ隠すと**空の器の margin 10px が狭い幅に残る**ので、
           器ごと隠す。⚠️ `/` にこの器は無いので、あちらでは何も起きない（無害）。
    */
    #move_state_wrap,
    #sun_solstice_button,
    #function_notes_wrap,
    #common_map_ctrl_buttons_wrap,
    #new_post_wrap {
        display: none;
    }
}

/*
    🔴 #hint_mask だけは `!important` が要る（Step3-14-5b-7a）。

    理由＝5b-7 で入口の Main.js を1本に統合した結果、**両幅で `openHintPanel()` が呼ばれる**
    ようになった（Blue のモバイルは呼んでいない＝PC 専用機能）。
    `openHintPanel()` は `$("#hint_mask").show()` で開くが、
    **jQuery の show() はインラインに `display:block` を書く**ため、
    上のブロックのような素の `display:none` では**インラインに負ける**。
    → 初回訪問のモバイルで、Blue に存在しない黒い半透明オーバーレイが全画面に出る。

    🎯 **JS 側で幅を見ない**のがこの手当ての要点＝
       「幅で分岐する処理」を JS に戻すと §9 要件1（初期化で1回だけ決める）の再生産になる。
       判定を CSS のこの1箇所に集約し、JS は幅を知らないままにしておく。

    ⚠️ **`!important` はこの id だけ**に付ける（上の5つには付けない）。
       JS が `.show()` を呼ぶのは全走査で `#calendar_wrap` / `#hint_mask` /
       `#new_post_photos_wrap` の3つだけで、狭い幅で隠す対象に当たるのは #hint_mask のみ。
       強すぎる道具なので、必要な1箇所以外に広げない。
    📌 広い幅では `!important` が効かない＝hint.css の `display:none` と
       show()/hide() の開閉が今までどおり動く。
*/
@media (max-width: 767.98px) {
    #hint_mask {
        display: none !important;
    }
}

/*
    🔴 Step3-14-5b-8a＝カレンダーを #info_wrap の中へ移したことによる**継承の打ち消し**。

    5b-8a で `#date_wrap` / `#calendar_wrap` の DOM を `#info_wrap` の中
    （Blue の PC と同じ `#move_state` の直後）へ移した。

    ✅ **座標は動かない**（着手前に算数で確認）＝`#info_wrap` はモバイルで
       `left:50%` / `margin-left:-160px` / `width:320px` / `top:0` / 左右 padding 0 なので、
       **内側の 50% がちょうど画面中央**。絶対配置の基準が変わっても同じ位置を指す。

    🔴 **動くのは `line-height` の継承だけ**＝`#info_wrap` はモバイルで `line-height:32px` を
       宣言しており、`#date_wrap` は line-height を持たない（移す前は body の `normal` を継承）。
       中に入れると 32px を継承し、**日付バーの行が伸びて箱が高くなる**。
       → 移す前と同じ `normal` に戻す＝**打ち消しは初期値だけを使う**（13-2e／5a-3a-2 と同じ作法）。

    📌 `#calendar_wrap` は自分で `line-height:25px` を宣言しているので手当て不要。
    📌 `text-align:center` の継承は無害（`#date_wrap` は自分で center・カレンダーは子要素側で center）。
*/
@media (max-width: 767.98px) {
    #date_wrap {
        line-height: normal;
    }
}


/*
    🔴 幅で出し分けるユーティリティ（.pc-only / .mobile-only）。

    ⚠️ **!important は必須**。ユーザーの目視で発覚した実バグ（2026-08-02）＝
       モバイル幅で .pc-only の home ボタンが「影だけの幽霊ボタン」として見えていた。

    理由は詳細度負け：
      モバイル `#map_control_button_wrap a` = id 1 + 要素 1 で `display: block`
      こちらの `.pc-only`                   = クラス 1 で `display: none`
    **id は class に勝つ**ので display:block が残り、さらに同じ規則が持つ box-shadow で
    中身が空の <a> が 45×40 の影付きの箱として浮かんでいた。

    🎯 同じ理由で `.mobile-only` も効いておらず、**PC 幅で投稿写真ボタンが右上に残っていた**
       （見た目が自然なので目視をすり抜けた＝1件目より質が悪い）。

    📌 このクラスは「どこに付けても確実に消える」ことが存在意義なので、
       個別にセレクタを強めるのではなく !important で一律に勝たせる。
       ⚠️ 逆に **display 以外はここに書かない**（強すぎる道具なので用途を1つに絞る）。
*/
@media (max-width: 767.98px) {
    .pc-only { display: none !important; }
}

@media (min-width: 768px) {
    .mobile-only { display: none !important; }
}

@media (min-width: 768px) {
    /* PC 専用の器を出す（bottom_content は Blue と同じ flex） */
    #title_wrap { display: block; }
    #bottom_content { display: flex; }

    /*
        🔴 PC 幅のタイトル帯（Step3-14-5b-7d）。

        HTML を1種類にしたので文書に `<h1>` が2つ並んでいたのを1本に寄せた。
        残したのは**モバイル側**（`#header_wrap` 内）＝**Googlebot はモバイル優先で描画する**ため。
        こちらは `<div id="pc_title">` に降格したので、**素の `h1` を狙っていた Blue の装飾が
        当たらなくなる**。同じ見た目になるよう、ここで引き取る。

        📌 値は `layoutmap/title.css` の素の `h1` 規則と `base.css` の
           `h1 { cursor:pointer } / h1:hover { opacity:.9 }` をそのまま写しただけ
           ＝**箱の位置・大きさ・絵柄は1ミリも変わらない**。
        🎯 **写す必要があったのは素の規則1つだけ**＝`title.css` には
           `@media (max-width:730px)` と `(max-width:500px)` の変種も在るが、
           **そのファイル自体が `media="(min-width:768px)"` で読まれている**ので
           **絶対に発火しない**（実測・5b-7d）。
        ⚠️ Blue 由来の `title.css` / `base.css` は触らない（意図的な差分はこの層に置く）。
    */
    #pc_title {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 100;
        width: 350px;
        height: 50px;
        background-image: url(https://hinode.blob.core.windows.net/images/Shared/LayoutMap/title.png);
        cursor: pointer;
    }

    #pc_title:hover { opacity: 0.9; }

    /*
        モバイルのヘッダ行（table の thead）を丸ごと消す。
        PC はタイトル帯（#title_wrap）が絶対配置で別に在るため。
        📌 ここを消すと、bare な `h1` を狙う PC CSS がモバイルの h1 に当たっても見えない。
        ⚠️ ただし DOM には h1 が2つ在る状態＝14-5b で1本に寄せる（台帳へ登録済）。
    */
    html body > table > thead { display: none; }

    /*
        🔴 詳細度の手当て（この層の本題）。
        モバイルは `html body > table { height: 100% }` で表を画面いっぱいにするが、
        PC は「地図の高さ＝ウィンドウ高 − 下部コンテンツ高」を JS が px で入れる作り
        （Blue の PC レイアウトと同じ）。表が 100% のままだと下部コンテンツが画面外へ出る。
        → 広い幅では表を中身なりにして、下部コンテンツが表の下に並ぶようにする。
    */
    html body > table { height: auto; }

    /*
        🔴🎯 Step3-14-5a-3a-2＝この重ね方の構造的な穴（`/home` の 13-2e と同型）。

        **モバイル版だけが宣言していて PC 版が宣言していないプロパティは、広い幅でも残り続ける。**
        PC 版は自分が書いた宣言しか上書きしないので、モバイル固有の指定が生き残る。

        #info_wrap の実害（機械検出）：
          ・left:50%  → PC は right:0 を宣言しているが、left/right/width が同時指定＝
                        over-constrained になり **left が勝つ**（パネルが画面中央へ）
          ・margin-left:-160px → さらに 160px 左へ
          ・height:32px → 白い箱が潰れ、中身が箱からはみ出して垂れ下がる
          ・line-height:32px / text-align:center → 行間と揃えがモバイルのまま

        ⚠️ PC の info.css にも height の宣言は在るが `@media (max-width: 500px)` の中＝
           広い幅では絶対に発火しない。**「宣言はあるのに効かない」形**なので、
           ファイルを目で追うだけでは気付けない（機械で全走査して初めて出た）。

        📌 打ち消しの値は「Blue の PC が宣言していない＝初期値/継承」に合わせる。
           勝手な数値を入れると Blue と別物になるので、auto / 0 / inherit だけを使う。
    */
    #info_wrap {
        left: auto;
        margin: 0;
        height: auto;
        line-height: inherit;
        text-align: inherit;
    }

    /*
        モバイル専用の投稿写真ストリップ（画面下部）は PC に存在しない。
        PC は #new_post_wrap（左下の「最新の投稿画像５件」パネル）が同じ役割を持つ。
        ⚠️ #left_panel_wrap（home ボタン）と #date_wrap / #calendar_wrap は
           まだ隠さない＝前者は PC の置き場所（#map_control_button_wrap 内）が
           DOM 変更を伴い、後者は 14-5a-3c のカレンダー統合で置き場所を決めるため。
    */
    #new_post_photos_wrap { display: none; }

    /*
        🔴 Step3-14-5a-3a-3＝住所検索が地図に隠れて見えなかった問題。

        原因は<b>DOM の順序</b>。Blue の PC レイアウトは body 直下が
          #map_canvas → #title_wrap(h1 + #search_wrap)
        の順で、地図が先に描かれるので後から来るタイトル帯が自然に上に乗る。
        Green はモバイルの table 骨格を土台にした都合で
          #title_wrap → <table>(… #map_canvas …)
        と<b>逆順</b>になっており、z-index を持たない絶対配置は DOM 順で塗られるため
        <b>地図が検索ボックスを覆う</b>。
        📌 h1 だけ無事だったのは Blue の CSS が h1 に z-index:100 を持っていたから
           （＝「たまたま生き残った」ので気付きにくい）。
        → 同じ層に載せる。Blue の h1 と同値にして並びを揃える。
    */
    #search_wrap { z-index: 100; }

    /*
        🔴 Step3-14-5a-3e-1＝「最新の投稿画像５件」パネルが Blue より高い位置に出ていた問題。

        原因は<b>絶対配置の基準がズレていた</b>こと。
          Blue  ＝ #new_post_wrap は body 直下で、body は配置されていない → <b>ビューポート基準</b>
          Green ＝ @RenderBody() が <table> の中なので <td> の中に入るが、モバイル CSS が
                   `html body > table > tbody > tr > td { position: relative }` を当てているため
                   → <b>td 基準</b>。td の下端は「ウィンドウ高 − 下部コンテンツ高」なので、
                   `bottom: 80px` が<b>下部コンテンツの高さぶん丸ごと上へずれる</b>。

        → 広い幅では基準そのものを Blue と同じ（ビューポート）に戻す。
        📌 <b>個々の座標を書き直さない</b>のが要点＝13-2d の教訓（Blue の値をいじると別物になる）。

        ⚠️ 影響するのは <b>bottom 起点と height:100% の要素だけ</b>（実測で確認）。
           top / right 起点のものは、広い幅では thead が消えて
           <b>td の左上とビューポートの左上が一致する</b>ため位置が変わらない
           （#info_wrap・#map_control_button_wrap・#date_wrap 等）。
           ずれていたのは #new_post_wrap（bottom:80px）と #hint_mask（height:100%）の2つ。
    */
    html body > table > tbody > tr > td { position: static; }

    /*
        モバイル用の home ボタン（左パネル）は PC に無い。
        PC は #map_control_button_wrap の先頭に置いた .pc-only の方を使う。
    */
    #left_panel_wrap { display: none; }

    /*
        🔴 Step3-14-5b-8b＝カレンダーを情報パネルの「中身」にする（`/` の最後の1件）。

        Blue の PC は #datepicker_wrap（jQuery UI）を**流れの中**に置いており、
        **パネルの高さがカレンダーのぶん伸びる**。Green も同じ形にする＝
        モバイル由来の「画面上部中央への絶対配置」を降ろしてフローに戻す。

        🎯 **JS は1行も触らない**＝幅で分岐する処理を JS に足すのは §9 要件1 の再生産。
           「常時出す／死んだボタンを消す」の判定は**全部この CSS に集約**する。
        📌 カレンダーの中身は初期表示の時点で既に組まれている（setCalendar() が append 済で
           display:none なだけ）＝**display を変えるだけで最初から出る**。
    */
    #date_wrap,
    #calendar_wrap {
        position: static;
        width: auto;
        margin: 0 0 10px;
        padding: 0;
        background-color: transparent;
    }

    /*
        🔴 **常時表示には `!important` が要る**＝`closeCalendar()` は
           `$("#calendar_wrap").hide()` で**インラインに display:none を書く**。
           作者スタイルの `!important` は**インラインの非 !important に勝つ**ので、
           日付を選んでもカレンダーが消えない。
        📌 5b-7a の #hint_mask と**同じ手筋の逆向き**（あちらは隠す・こちらは出す）。
    */
    #calendar_wrap {
        display: block !important;
        z-index: auto;
        font-size: 12px;
        line-height: 20px;
    }

    /*
        🔴 **日送りバーは PC では出さない**（Blue 忠実・ユーザー判断 2026-08-03）。

        ⚠️ **一度は「残す」と決めたが、実物を見て覆した**＝日送りバー（◀ 2026/08/03 ▶）と
           カレンダーの月送りヘッダ（◀ 2026年8月 ▶）は**絵柄も大きさも同じ**なので、
           縦に並ぶと**「カレンダーが2階建て」に見える**（ユーザーの目視で発覚）。
           Blue の PC は日送りバーを持たず、月送りヘッダ1本だけ。
        🎯 **機能の重複ではなく"見た目の重複"が問題**＝日送りと月送りは別の機能だが、
           **同じ形をしているので同じ物が2つ在るように読める**。

        📌 `#date` 入力そのものは残る（Calendar.js が値を書き込む先＝隠れていても動く）。
    */
    #date_wrap { display: none; }

    /*
        🔴 常時出ているので「開く」と「閉じる」は**押しても何も起きない死んだボタン**になる
           （閉じる → hide() → 上の !important が勝つ → 見た目が変わらない）。→ 出さない。

        ⚠️ **詳細度に注意**＝#open_calendar_button は素の id（1個）だと
           モバイルの `#date_wrap table tbody tr td span { display: inline-block }`
           （id 1 + 要素 5）に**負ける**。id の数で勝つ形に書く。
           📌 これは .pc-only の幽霊ボタン（5a-3b）と同じ負け方＝**見た目が自然なので目視をすり抜ける**。
    */
    #date_wrap #open_calendar_button,
    #calendar_wrap #calendar_footer_wrap {
        display: none;
    }

    /*
        7列を情報パネルの中に収める（#info_wrap の内側は 200px）。
        22px ＋ border 1px×2 ＋ margin 1px×2 ＝ **26px × 7列 ＝ 182px**。
        ⚠️ モバイルの 25＋2＋12 ＝ 39px のままだと **273px で溢れる**。
        📌 ここは Blue の値を写せない（Blue は jQuery UI の別物）＝**Green 独自の値**。台帳へ登録。
    */
    #calendar_wrap #calendar_header_wrap p {
        font-size: 14px;
        padding: 0 5px;
    }

    #calendar_wrap #calendar_header_wrap #week_string_wrap span,
    #calendar_wrap #calendar_body_wrap span {
        width: 22px;
        height: 22px;
        line-height: 22px;
        margin: 1px;
    }

    /*
        🔴 Step3-14-5b-8d＝**自作カレンダーに差し替えたときに落とした Blue の挙動**を戻す
        （ユーザーの目視で発覚・3件）。改善ではなく**移行の未達**。

        ── ①ホバーで赤くなる ／ ②指差しカーソル ──────────────────────
        Blue の PC（jQuery UI）は `info.css` で次を宣言していた：
          .ui-state-default:hover { border: 1px solid #f00; background-color: #ffc7ce; }
          .ui-widget-header .ui-icon { cursor: pointer; }
        📌 **値は Blue から写しただけ**（勝手な色を決めない＝13-2d の作法）。
        ⚠️ `blank_day`（前後の月を埋める空マス）は押しても何も起きないので除く。
           除かないと**押せそうに見えて反応しないマス**が生まれる。

        📌 詳細度＝`:not(.blank_day):hover` は クラス2 相当なので、
           選択中の `.selected_day`（クラス1）に勝つ＝**なぞっている間はホバー色が上に出る**。
    */
    #calendar_wrap #calendar_body_wrap span:not(.blank_day):hover {
        border-color: #f00;
        background-color: #ffc7ce;
    }

    #calendar_wrap #calendar_body_wrap span:not(.blank_day),
    #calendar_wrap #calendar_header_wrap > span {
        cursor: pointer;
    }

    /*
        ── ③月送りの三角と「2026年8月」の高さを揃える ─────────────────
        🔴 これは Blue 由来ではなく**こちらが作った粗**＝PC 用に見出しを 18px → 14px へ
           縮めた結果、25px の三角（背景画像の空 span）と文字の**ベースライン揃え**がズレた。
           インライン要素は既定でベースラインに揃うので、**中身の高さが違うと上下にずれる**。
        → 両方を中央揃えにする（どちらか片方だけだと基準が合わずズレたまま）。
    */
    #calendar_wrap #calendar_header_wrap > span,
    #calendar_wrap #calendar_header_wrap p {
        vertical-align: middle;
    }

    /* 📌 .mobile-only の非表示は下のユーティリティ節にまとめた（!important が要るため） */
}

/*
    🔴 Step3-14-5b-8b＝**縦が狭いときは常時表示をやめる**（Blue と同じ考え方）。

    Blue の PC も `info.css` の `@media (max-height: 550px)` で
    **インラインカレンダー `#datepicker` を隠し、代わりに `#inline_datepicker`
    （押すとカレンダーが開くテキスト）を出す**。
    Green は器が違うだけで役者は1:1で対応する＝
      Blue #datepicker        → Green #calendar_wrap（常時表示をやめる）
      Blue #inline_datepicker → Green #date_wrap（日付＋開くボタンを戻す）
    ⚠️ これが無いと、縦 550px 程度のウィンドウで**パネルが画面からはみ出す**。

    🔴 **日送りバーをここで戻すのは必須**＝広い幅では「2階建て」を避けるために
       `#date_wrap` ごと隠している。カレンダーも隠したまま日送りバーも出さないと、
       **PC で日付を変える手段が1つも無くなる**（Blue は同じ場面で日付テキストを出す）。
    📌 ここでは日送りバーが**唯一の入口**なので、広い幅で消した「開く」ボタンも戻す。

    📌 **この節は min-width ブロックより後に置く**＝`display:none !important` と
       `display:block !important` は同じ詳細度なので、**後に書いた方が勝つ**。
*/
@media (min-width: 768px) and (max-height: 550px) {
    #calendar_wrap { display: none !important; }
    #date_wrap { display: block; }
    #date_wrap #open_calendar_button { display: inline-block; }
}

/*
    🔴 Step3-21-2b＝**`/moon` 限定の打ち消し**（`/` を巻き添えにしない書き方）。

    ⚠️⚠️ **この節は必ずファイルの末尾に置くこと。**
       `MapPageTests.広い幅でモバイル固有の指定を打ち消している` は
       **「最初の `@media (min-width: 768px)` の中の、最初の `#info_wrap`」を位置で解析する**。
       この節を上の方へ移すと、解析の当たり先が `#info_wrap #time_wrap #moon_…` にすり替わり
       **`/` のテストが赤くなる**（2026-08-04 に実際に踏んだ）。
       📌 カスケード的にも末尾が正しい（後に書いた方が勝つ・打ち消しは後）。

    ── 根っこは1つ＝「モバイル CSS が詳細度で PC に勝っている」──────────────
    Moon のモバイル CSS は `#info_wrap #time_wrap div`（**id 2個**）と書いており、
    Blue の PC 側は `#time_wrap div`（**id 1個**）。**順序に関係なくモバイルが勝つ**ので、
    広い幅でも padding や背景色がモバイルのまま残る。
    ⚠️ `/home` の 13-2e ／ 14-5a-3a-2 は「**PC が宣言していないプロパティ**が残る」形だったが、
       こちらは「**PC が宣言しているのに負ける**」形＝**さらに気付きにくい**
       （ファイルを見ると PC 側にちゃんと書いてあるので、読むだけでは異常に見えない）。

    ── 🔴 なぜ Moon 限定の id で書くのか ─────────────────────────────
    `#info_wrap #time_wrap div` は **`/`（日の出マップ）にも存在する**。
    素直に打ち消すと**`/` の時刻パネルを巻き添えで壊す**ので、
    Moon にしか無い id（`#moon_rise_time_wrap` / `#moon_set_time_wrap` / `#normal_calendar_wrap`）を使う。
    📌 **id 3個**にしてモバイルの (0,2,1) を上回らせている。id 2個では**負ける**。

    📌 値は Blue 本番の `/moon` を chrome-devtools で実測して写した（勝手な数値を入れない）。
*/
@media (min-width: 768px) {
    /* Blue: #time_wrap div { padding: 0 10px 10px }（2枠 ×(80+20) ＝ 200px でパネル幅ちょうど） */
    #info_wrap #time_wrap #moon_rise_time_wrap,
    #info_wrap #time_wrap #moon_set_time_wrap {
        padding: 0 10px 10px;
    }

    /* Blue: ラベルの span に padding も背景も無い（枠の #ddd / #ccc が透けるのが正） */
    #info_wrap #time_wrap #moon_rise_time_wrap span,
    #info_wrap #time_wrap #moon_set_time_wrap span {
        padding: 0;
        background-color: transparent;
    }

    /* Blue: 時刻の p は既定サイズ（16px）で padding 無し */
    #info_wrap #time_wrap #moon_rise_time_wrap p,
    #info_wrap #time_wrap #moon_set_time_wrap p {
        font-size: medium;
        padding: 0;
    }

    /*
        🔴 `/` が `#calendar_wrap { font-size:12px }` を入れているが、これは
           **`/` の jQuery UI 置き換え用に Green が発明した値**（14-5b-8b）。
           Moon は Blue 自身の `Calendar.css` が PC の寸法を持っているので**要らない**
           （Blue 実測＝`#calendar_wrap` の font-size は **16px**）。
    */
    #calendar_wrap #normal_calendar_wrap {
        font-size: medium;
    }
}

/*
    🔴 `line-height` は**両方の幅で**戻す（Blue 実測＝`normal`）。
      ・広い幅＝`/` の `#calendar_wrap { line-height: 20px }` を打ち消す
      ・狭い幅＝21-2b-1 で `#info_wrap` の中へ移したことによる **32px の継承**を打ち消す
    📌 `/` の `#calendar_wrap` は自分で `line-height:25px` を宣言しているので、
       **素の `#calendar_wrap` に書くと `/` を壊す**。必ず `#normal_calendar_wrap`（Moon 専用）に付ける。
*/
#calendar_wrap #normal_calendar_wrap {
    line-height: normal;
}