@charset "UTF-8";
/*
    Step3-42 縦切り23枚目 `/user/{userId}/map` ＋ `/user/map`（フォトマップ）
    — **狭い幅（767.98px 以下）専用の1枚**。
    Blue の `Areas/User/Content/Css/Shared/_LayoutUserMap.Mobile.css`（5,730B・31規則）の**逐語移送**。
    🔴 1バイトも変えていない（変えたくなったら green.css を作ってそちらに書くこと）。

    ── 🔴 案A＝2枚とも「その幅だけで自己完結」（22枚目 L-89 と同じ型）──────
    Blue はこの2枚を **UA で丸ごと着せ替えて**いた（どちらも `@media` を1つも持たない）。
    Green は `<link media>` で **完全排他**にする＝打ち消しが原理的に要らない。
    ⚠️ 「土台＋上書き」にはできない（[[feedback_ua_split_css_cannot_be_layered]]）。
    しきい値 **768px** ＝ Green の他ページと同値。境界の 0.02px はどちらも当たらない。

    ── 🔴 位置セレクタが骨格そのもの（罠 T-1）─────────────────────
    全規則が `html > body > div:nth-of-type(2) > div:nth-of-type(3) > …` と
    **並び順で場所を指している**。レイアウトの `div` を1つ足す・順番を変える・
    入れ子を浅くする、のどれをやっても **規則が丸ごと空振りする**（例外もエラーも出ない）。
    → `Views/Shared/_LayoutUserMap.cshtml` の骨格は Blue のまま1ミリも動かさないこと。

    ── 📌 PC 版 ⇔ モバイル版の差は **6箇所＋3規則だけ**（規則単位の全数 diff）──
      1. 見出し `> p > a`     font-size … PC 1.6rem / モバイル 1.4rem
      2. 見出し `> p > span`  font-size … PC 1.2rem / モバイル 1.0rem
      3. フッタ `ul` grid-template-columns … repeat(5, minmax(44px,100px)) / repeat(5, minmax(44px,1fr))
      4. フッタ `ul` justify-content      … center / space-around
      5. フッタ `ul` gap                  … 15px / 10px
      6. ボタン `li > span` font-size     … PC 1.4rem / モバイル 1.2rem
      ＋ PC にしか無い3規則 … `li{cursor:pointer}` / `li:hover{opacity:.8}` / `li.disable:hover{opacity:1}`
      🔑 全部ホバー系＝狭い幅に要らないのが道理。**逆向き（モバイルにしか無い規則）は 0件**
         ＝「排他にすると共有部品の担い手が片側から消える」型（41-4 §9-4）には当たらない。
*/
html {
  font-size: 62.5%;
  font-family: 'ヒラギノ角ゴシック', 'Hiragino Sans', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; }
  html > body {
    font-size: 1.6rem;
    margin: 0; }
    html > body > div:nth-of-type(1) {
      position: absolute;
      top: 0;
      left: 0;
      background-color: rgba(0, 0, 0, 0.9);
      z-index: 999999; }
      html > body > div:nth-of-type(1) > div {
        width: 100vw;
        height: 100vh;
        text-align: center;
        line-height: 100vh; }
        html > body > div:nth-of-type(1) > div > p {
          color: #fff;
          margin: 0;
          font-size: 1.8rem; }
    html > body > div:nth-of-type(2) {
      height: 100vh;
      display: grid;
      grid-template-rows: auto 1fr auto; }
      html > body > div:nth-of-type(2) > div:nth-of-type(1) {
        box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.2);
        z-index: 99999; }
        html > body > div:nth-of-type(2) > div:nth-of-type(1) > div > div:nth-of-type(1) {
          text-align: center;
          background-color: #25A8F0; }
          html > body > div:nth-of-type(2) > div:nth-of-type(1) > div > div:nth-of-type(1) > a > img {
            width: 100%;
            max-width: 350px;
            max-height: 50px;
            vertical-align: bottom; }
        html > body > div:nth-of-type(2) > div:nth-of-type(1) > div > div:nth-of-type(2) > p {
          text-align: center;
          margin: 0;
          padding: 10px; }
          html > body > div:nth-of-type(2) > div:nth-of-type(1) > div > div:nth-of-type(2) > p > a {
            font-size: 1.4rem;
            color: #05f; }
          html > body > div:nth-of-type(2) > div:nth-of-type(1) > div > div:nth-of-type(2) > p > span {
            font-size: 1.0rem; }
      html > body > div:nth-of-type(2) > div:nth-of-type(2) #map_canvas {
        width: 100vw;
        height: 100%; }
        html > body > div:nth-of-type(2) > div:nth-of-type(2) #map_canvas .infowindow {
          width: 150px; }
          html > body > div:nth-of-type(2) > div:nth-of-type(2) #map_canvas .infowindow > p {
            margin: 0 0 10px;
            font-size: 1.2rem;
            text-decoration: underline;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap; }
          html > body > div:nth-of-type(2) > div:nth-of-type(2) #map_canvas .infowindow > a {
            position: relative; }
            html > body > div:nth-of-type(2) > div:nth-of-type(2) #map_canvas .infowindow > a > span {
              display: block;
              position: absolute;
              color: #fff;
              background-color: rgba(0, 0, 0, 0.2);
              background: linear-gradient(rgba(0, 0, 0, 0.4) 30%, transparent);
              width: 100%;
              padding: 5px;
              box-sizing: border-box; }
            html > body > div:nth-of-type(2) > div:nth-of-type(2) #map_canvas .infowindow > a > img {
              width: 150px;
              height: 150px; }
          html > body > div:nth-of-type(2) > div:nth-of-type(2) #map_canvas .infowindow .bottom_link {
            margin: 5px 0 0;
            text-align: right; }
            html > body > div:nth-of-type(2) > div:nth-of-type(2) #map_canvas .infowindow .bottom_link > a {
              color: #05f; }
      html > body > div:nth-of-type(2) > div:nth-of-type(3) {
        box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.2);
        z-index: 99999; }
        html > body > div:nth-of-type(2) > div:nth-of-type(3) > div > ul {
          margin: 0;
          padding: 10px;
          list-style-type: none;
          display: grid;
          grid-template-columns: repeat(5, minmax(44px, 1fr));
          justify-content: space-around;
          gap: 10px; }
          html > body > div:nth-of-type(2) > div:nth-of-type(3) > div > ul > li:after {
            content: "";
            display: block;
            width: 100%;
            height: 5px;
            margin: 5px 0 0;
            border-radius: 3px;
            background-color: #ddd; }
          html > body > div:nth-of-type(2) > div:nth-of-type(3) > div > ul > li.active:after {
            background-color: #05f; }
          html > body > div:nth-of-type(2) > div:nth-of-type(3) > div > ul > li.disable > span {
            background-color: #eee !important;
            color: #ccc; }
          html > body > div:nth-of-type(2) > div:nth-of-type(3) > div > ul > li > span {
            display: flex;
            flex-direction: column;
            justify-content: center;
            color: #000;
            text-align: center;
            text-decoration: none;
            height: 50px;
            width: 100%;
            font-size: 1.2rem;
            border: 1px solid #ccc;
            box-sizing: border-box;
            border-radius: 5px; }
          html > body > div:nth-of-type(2) > div:nth-of-type(3) > div > ul > li:nth-of-type(1) > span {
            background-color: #fff; }
          html > body > div:nth-of-type(2) > div:nth-of-type(3) > div > ul > li:nth-of-type(2) > span {
            background-color: #f6e82c; }
          html > body > div:nth-of-type(2) > div:nth-of-type(3) > div > ul > li:nth-of-type(3) > span {
            background-color: #f07b50; }
          html > body > div:nth-of-type(2) > div:nth-of-type(3) > div > ul > li:nth-of-type(4) > span {
            background-color: #585aa4;
            color: #fff; }
          html > body > div:nth-of-type(2) > div:nth-of-type(3) > div > ul > li:nth-of-type(5) > span {
            background-color: #ededed; }