/* ===== /water トラブルアイコン & エリア吹き出し調整 ===== */

/* グリッド：PC=4列 / タブ=2列 / SP=1列、中央寄せ */
.page-template-page_water_top .lrp-tiles-grid{
  max-width:1060px;margin:0 auto;padding:0 12px;
  display:grid;grid-template-columns:repeat(4,minmax(180px,1fr));gap:12px;
  list-style:none;
}
@media (max-width:1024px){
  .page-template-page_water_top .lrp-tiles-grid{grid-template-columns:repeat(2,minmax(160px,1fr))}
}
@media (max-width:560px){
  .page-template-page_water_top .lrp-tiles-grid{grid-template-columns:1fr}
}

/* カード本体は小さめ＆“空白はクリック不可”にする */
.page-template-page_water_top .lrp-tiles-item{
  background:#0d4ff1;border-radius:16px;box-shadow:0 6px 16px rgba(16,24,40,.08);
  padding:12px;text-align:center;min-height:110px;
  pointer-events:none; /* ← li全体はクリック無効 */
}
/* 文字＋アイコン部分だけをクリック可に、幅も自動に */
.page-template-page_water_top .lrp-tiles-link{
  pointer-events:auto;display:inline-flex;flex-direction:column;align-items:center;gap:8px;
  padding:8px 10px;border-radius:10px;text-decoration:none;color:#fff;line-height:1.2;
  width:auto !important;
}
.page-template-page_water_top .lrp-tiles-link:hover{background:rgba(255,255,255,.08)}

/* アイコン＆ラベルの縮尺 */
.page-template-page_water_top .lrp-tiles-ico{
  width:32px;height:32px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.14)
}
.page-template-page_water_top .lrp-tiles-ico svg{width:20px;height:20px}
.page-template-page_water_top .lrp-tiles-txt{font-weight:700;font-size:14px}



/* 吹き出し：最大幅を抑える＆当たり判定を小さめに */
.page-template-page_water_top .lrp-area-pop{
  position:absolute;right:12px;top:calc(100% + 10px);
  width:min(920px,calc(100vw - 32px));max-height:min(80vh,640px);
  overflow:auto;border-radius:16px;border:1px solid #e5e8ef;background:#fff;
  box-shadow:0 16px 40px rgba(16,24,40,.18);padding:16px;
}
@media (max-width:720px){
  .page-template-page_water_top .lrp-area-pop{
    position:fixed;left:50%;right:auto;top:10px;transform:translateX(-50%);
    width:calc(100vw - 24px)
  }
}
.page-template-page_water_top .lrp-area-pop .tabs button{padding:8px 10px;font-size:14px}
.page-template-page_water_top .lrp-area-pop .pref-list a{display:inline-block;padding:8px 10px;border-radius:8px}

/* ❶ エリアボタンはテキストぶんだけ・前面に */
.lrp-tiles-head{ position:relative; z-index:30; }
.lrp-tiles-head .lrp-area-btn{
  display:inline-flex !important;
  align-items:center; gap:6px;
  width:auto !important;             /* 横一杯をやめる */
  padding:8px 12px;
  border:1px solid #e5e8ef;
  border-radius:999px;
  background:#f7f9ff;
  font-weight:700; line-height:1;
  cursor:pointer;
  position:relative; z-index:31;     /* かぶさり対策 */
}

/* ❷ ヒーローの被りを無効化（クリックを透過させる） */
#main_banner,
#main_banner::before,
#main_banner::after{
  pointer-events:none;               /* 背景はクリックを拾わない */
}
/* もし #main_banner 内にリンクがある場合は下を併用 */
#main_banner a, #main_banner button, #main_banner input{
  pointer-events:auto;
}

/* ❸ 吹き出しも前面へ（既に入れていなければ） */
.lrp-area-pop{
  position:absolute; left:0; top:calc(100% + 10px);
  width:min(920px, calc(100vw - 32px));
  max-height:min(80vh,640px); overflow:auto;
  background:#fff; border:1px solid #e5e8ef; border-radius:16px;
  box-shadow:0 16px 40px rgba(16,24,40,.18);
  padding:16px; z-index:9999;
}
.lrp-area-pop[hidden]{ display:none !important; }

/* ====== トラブルアイコン＋エリア選択の整列＆クリック不具合修正 ====== */

/* 1) 見出し(「お困りの場所から探す」) と ボタン/グリッドを同じ幅のコンテナに */
.lrp-tiles-head,
.lrp-tiles-grid{
  max-width:1060px;            /* 中央に 1060px コンテナ */
  margin-left:auto;
  margin-right:auto;
  padding-left:12px;           /* 左に少し余白 → “左寄り過ぎ”を解消 */
  padding-right:12px;
}

/* 2) 見出し＋「エリアを選ぶ」を横並びにして、ボタンは右端すぎないよう“コンテナ内”で配置 */
.lrp-tiles-head{
  position:relative;           /* 吹き出しの基準にする */
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

/* 3) エリアボタンはテキスト分だけの大きさ＆前面に（クリック取りこぼし防止） */
.lrp-tiles-head .lrp-area-btn{
  display:inline-flex !important;
  align-items:center;
  gap:6px;
  width:auto !important;       /* 横いっぱい→やめる（空白がクリック判定にならない） */
  padding:8px 12px;
  border:1px solid #e5e8ef;
  border-radius:999px;
  background:#f7f9ff;
  font-weight:700;
  line-height:1;
  cursor:pointer;
  position:relative;
  z-index:31;
}

/* 4) ヒーロー（上の青いバナー）がクリックを奪うのを防止 */
#main_banner,
#main_banner::before,
#main_banner::after{ pointer-events:none; }
#main_banner a, #main_banner button, #main_banner input{ pointer-events:auto; }

/* 5) 吹き出し（都道府県リスト）は“見出しの右”に開く＆前面に */
.lrp-area-pop{
  position:absolute;
  right:12px;                  /* 画面右端ではなく、見出しコンテナの右端に合わせる */
  left:auto;
  top:calc(100% + 10px);
  width:min(920px, calc(100vw - 32px));
  max-height:min(80vh, 640px);
  overflow:auto;
  background:#fff;
  border:1px solid #e5e8ef;
  border-radius:16px;
  box-shadow:0 16px 40px rgba(16,24,40,.18);
  padding:16px;
  z-index:9999;
}
.lrp-area-pop[hidden]{ display:none !important; }

/* スマホ時は中央配置に切り替え */
@media (max-width: 720px){
  .lrp-area-pop{
    left:50%;
    right:auto;
    top:10px;
    transform:translateX(-50%);
    width:calc(100vw - 24px);
  }
}

/* 6) アイコンカードの当たり判定はアイコン＋文字だけに（空白はクリック無し） */
.lrp-tiles-item{ text-align:center; }
.lrp-tiles-link{
  display:inline-flex;         /* ← blockから変更して空白クリックを無効化 */
  flex-direction:column;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:10px;
  text-decoration:none;
}
.lrp-tiles-link:hover{ background:rgba(13,79,241,.08); }