/* ============================================================
   トップページ ワールドマップの配置（2026-08-25）

   ★このCSSを子テーマ側に置いている理由
     ページの「カスタムCSS」は本文と同時に保存されるため、
     古い編集画面から更新されると本文もろとも巻き戻り、
     看板の座標が消えてPC用の座標が当たってしまう事故が起きた。
     子テーマのファイルにしておけば、ページが巻き戻っても残る。

   ★ブロック構成（本文側）
     ① .icw-map.icw-map-pc            … 横長画像（PC・タブレット用）
     ② .icw-map.icw-map-pc.sp_only    … 縦長画像（スマホ用／①の複製なので
                                        icw-map-pc というクラスを持つ）
     ③ .icw-map.icw-map-sp            … 旧マップ。ページCSSの display:none で非表示

     ②は①の複製のため、そのままだと横長画像向けの座標が当たる。
     ここで縦長画像用の座標に上書きする。

   ★詳細度について
     ページのカスタムCSSは <head> にインラインで後から出力されるため、
     同じ詳細度だと負ける。ここでは
       .icw-map-pc.sp_only .icw-sign.icw-f-xxx = クラス4つ (0,4,0)
     とし、ページ側の
       .icw-map-pc .icw-sign.icw-f-xxx        = クラス3つ (0,3,0)
     に必ず勝つようにしている。
   ============================================================ */

/* ---- スマホ用マップ：看板の位置とサイズ（left/top は看板の中心） ---- */
.icw-map-pc.sp_only .icw-sign.icw-f-manga     { left: 29%; top: 41.5%; width: 24%; }
.icw-map-pc.sp_only .icw-sign.icw-f-product   { left: 70%; top: 41.5%; width: 24%; }
.icw-map-pc.sp_only .icw-sign.icw-f-event     { left: 49%; top: 51%; width: 24%; }
.icw-map-pc.sp_only .icw-sign.icw-f-movie     { left: 24%; top: 66%; width: 24%; }
.icw-map-pc.sp_only .icw-sign.icw-f-character { left: 75%; top: 66%; width: 28%; }

/* ---- スマホ用マップ：建物のタップ範囲（left/top は左上の角） ---- */
.icw-map-pc.sp_only .icw-hot.icw-f-manga     { left: 9%;  top: 33%; width: 32%; height: 16%; border-radius: 18px 18px 48px 18px; }
.icw-map-pc.sp_only .icw-hot.icw-f-product   { left: 57%; top: 32%; width: 31%; height: 20%; border-radius: 18px 18px 18px 38px; }
.icw-map-pc.sp_only .icw-hot.icw-f-event     { left: 33%; top: 45%; width: 29%; height: 18%; border-radius: 118px 118px 18px 18px; }
.icw-map-pc.sp_only .icw-hot.icw-f-movie     { left: 2%;  top: 55%; width: 31%; height: 22%; border-radius: 98px 68px 18px 18px; }
.icw-map-pc.sp_only .icw-hot.icw-f-character { left: 60%; top: 56%; width: 38%; height: 22%; border-radius: 120px 18px 18px 18px; }

/* ---- 「看板を押してみてね」の高さ（縦長画像はタイトル看板が上にあるぶん下げる） ---- */
.icw-map-pc.sp_only .icw-maphint { top: 15.5%; }

/* ------------------------------------------------------------
   PC用 / スマホ用 の出し分けを、ここで完全に決める。

   ブロック側の「表示する端末」設定（pc_only / sp_only / タブレット非表示）は
   一切あてにしない。理由は2つ。

   1) 端末設定は「枠（グループ）」と「中の画像」で別々にかかる。
      画像だけ隠れて枠が残ると、枠の中の「看板を押してみてね」だけが
      行き場を失ってもう一方のマップに重なる（＝ヒントが2つ見える）。
   2) 端末設定は本文と一緒に保存されるため、古い編集画面から更新されると
      巻き戻って表示が壊れる（実際に発生）。

   そこで枠も画像も、ここで強制的に出し分ける。
   こうしておけば、本文が巻き戻ってもマップの表示は崩れない。

   :not(.sp_only) を付けているのは、スマホ用ブロックも icw-map-pc という
   クラスを持っているため。外すとスマホ用まで消えるので注意。
   （旧マップ .icw-map-sp は icw-map-pc を持たないのでここでは対象外。
     従来どおりページCSSの display:none で非表示のまま）
   ------------------------------------------------------------ */
/* スマホ（≤599px）… 縦長のスマホ用マップだけ出す */
@media (max-width: 599px) {
  #body_wrap .icw-map-pc:not(.sp_only) { display: none !important; }
  #body_wrap .icw-map-pc.sp_only,
  #body_wrap .icw-map-pc.sp_only .icw-mapbg { display: block !important; }
}
/* タブレット・PC（≥600px）… 横長のPC用マップだけ出す */
@media (min-width: 600px) {
  #body_wrap .icw-map-pc.sp_only { display: none !important; }
  #body_wrap .icw-map-pc:not(.sp_only),
  #body_wrap .icw-map-pc:not(.sp_only) .icw-mapbg { display: block !important; }
}