/* =========================
   MIRAKURU - site.css (GLOBAL)
   ========================= */

/* ---------- Tokens ---------- */
:root{
  --bg:#ffffff;
  --ink:#0f172a;
  --sub:#475569;
  --line:#e5e7eb;

  --pri:#2563eb;
  --pri2:#0b5ea8;

  --priSoft:#eef2ff;

  --fold: 22px;
  --foldColor:#1d4ed8;

  --container: min(1120px, 92vw);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: system-ui, -apple-system, "Noto Sans JP", sans-serif;
  color:var(--ink);
  background:var(--bg);
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

/* ---------- Header (sticky) ---------- */
.header{ position:sticky; top:0; z-index:100; }

/* top white row */
.headerTop{
  background:var(--bg);
  border-bottom:1px solid var(--line);
}
.headerTop .in{
  width:var(--container);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:12px 0;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:220px;
}
.logo{
  width:44px;
  height:44px;
  border-radius:14px;
  background:linear-gradient(135deg,#3b82f6,#60a5fa);
  box-shadow: 0 10px 26px rgba(37,99,235,.22);
}
.brand strong{ font-weight:1000; letter-spacing:.02em; }
.brand small{
  display:block;
  margin-top:2px;
  font-size:12px;
  color:var(--sub);
}

.nav{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.nav a{
  padding:8px 12px;
  border-radius:999px;
  border:1px solid transparent;
  font-weight:800;
}
.nav a:hover{
  border-color:rgba(37,99,235,.20);
  background:rgba(37,99,235,.06);
}
.nav a.cta{
  background:var(--priSoft);
  border-color:rgba(37,99,235,.18);
  color:#1d4ed8;
}

/* dark bar row */
.headerBar{
  background:#3f3f46;
  color:#fff;
}
.headerBar .in{
  width:var(--container);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:10px 0;
}

/* crumbs */
.crumbs{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  opacity:.92;
  white-space:nowrap;
  margin-left:16px;
}
.crumbs a{ opacity:.92; }
.crumbs a:hover{ opacity:1; text-decoration:underline; }
.crumbs .sep{ opacity:.55; }

/* bar search */
.barSearchWrap{
  position:relative;
  flex:1;
  display:flex;
  justify-content:flex-end;
}
.barSearch{
  width:min(370px, 62vw);
  display:flex;
  align-items:center;
  gap:10px;
  background:#fff;
  border-radius:999px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.15);
  box-shadow:
    0 18px 44px rgba(0,0,0,.25),
    0 3px 10px rgba(0,0,0,.18);
}
.barSearch input{
  flex:1;
  border:0;
  outline:0;
  font-size:14px;
  min-width:160px;
}
.barSearch button{
  border:0;
  cursor:pointer;
  width:20px;
  height:20px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:rgba(15,23,42,.04);
}
.barSearch button:hover{ background:rgba(37,99,235,.10); }

/* suggestions (header) */
.barSg{
  position:absolute;
  top:58px;
  right:0;
  width:min(680px, 92vw);
  background:#fff;
  border:1px solid rgba(15,23,42,.10);
  border-radius:16px;
  overflow:hidden;
  display:none;
  box-shadow: 0 26px 70px rgba(15,23,42,.18);
}
.barSg a{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border-bottom:1px solid rgba(15,23,42,.06);
}
.barSg a:last-child{ border-bottom:none; }
.barSg a:hover{ background:#f8fafc; }

.badge{
  font-size:12px;
  padding:4px 9px;
  border-radius:999px;
  background:var(--priSoft);
  color:#1d4ed8;
  font-weight:900;
  white-space:nowrap;
}

/* buttons (shared) */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.10);
  color:#fff;
  font-weight:900;
  backdrop-filter: blur(10px);
  transition:transform .12s ease;
}
.btn:hover{ transform:translateY(-1px); }
.btn.primary{
  background:rgba(37, 133, 235, 0.4);
  border-color:rgba(255,255,255,.45);
}
.btn.tel{
  background:rgba(37, 133, 235, 0.4);
  border-color:rgba(255,255,255,.45);
}

/* ---------- Accordion ---------- */
.acc{
  border:1px solid rgba(15,23,42,.10);
  border-radius:16px;
  overflow:hidden;
  background:#fff;
}
.acc summary{
  cursor:pointer;
  padding:14px 14px;
  font-weight:1000;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.acc summary::-webkit-details-marker{ display:none; }
.acc summary .hint{
  color:var(--sub);
  font-weight:800;
  font-size:12px;
}
.acc .box{
  border-top:1px solid rgba(15,23,42,.08);
  padding:10px 10px 2px;
}

/* ---------- Trust chips ---------- */
.chips{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.chip{
  font-size:12px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background:#fff;
  font-weight:1000;
  color:rgba(15,23,42,.85);
}
.chip.ac{
  border-color:rgba(37,99,235,.22);
  background:rgba(37,99,235,.06);
  color:#1d4ed8;
}

/* ---------- Footer ---------- */
.footer{
  padding:26px 0 12px;
  color:var(--sub);
  font-size:13px;
  display:flex;
  gap:12px;
  justify-content:space-between;
  border-top:1px solid rgba(15,23,42,.06);
}

/* PCだけ表示 / スマホだけ表示 */
.pcOnly{ display:inline; }
.spOnly{ display:none; }
@media (max-width: 768px){
  .pcOnly{ display:none; }
  .spOnly{ display:inline; }
}

/* =========================
   Hamburger + Mobile Header (FINAL)
   ※ここだけに統一。重複のFix Packは全部捨てる
   ========================= */

/* PCは非表示 */
.hamburger{
  display:none;
  width:44px;
  height:44px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.12);
  background:#fff;
  cursor:pointer;
  padding:10px;
  overflow:hidden;
}
.hamburger span{
  display:block;
  width:22px;
  height:2px;
  background:#0f172a;
  border-radius:999px;
  margin:6px 0;
}

/* Mobile */
@media (max-width: 760px){
  .hamburger{
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }

  .headerTop .in{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:12px 0;
  }

  .nav{
    position:fixed;
    top:0; right:0;
    width:min(320px, 86vw);
    height:100dvh;
    background:#fff;
    padding:14px;
    display:flex;
    flex-direction:column;
    gap:0;
    transform:translateX(110%);
    transition:transform .18s ease;
    box-shadow:-20px 0 60px rgba(0,0,0,.18);
    z-index:9999;
  }
  .nav.is-open{ transform:translateX(0); }

  .nav a{
    border:0;
    border-radius:0;
    padding:14px 6px;
    font-size:15px;
    font-weight:900;
    border-bottom:1px solid rgba(15,23,42,.08);
  }
  .nav a:last-child{ border-bottom:0; }
  .nav a.cta{ margin-left:0; }

  .headerBar .in{
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:10px;
    flex-wrap:nowrap;
    padding:8px 12px; /* ←左右の欠け防止をここに統一 */
  }

  .crumbs{
    flex:0 0 auto;
    font-size:12px;
    white-space:nowrap;
    margin-left:0;
  }

  .barSearchWrap{ flex:1; min-width:0; justify-content:flex-end; }

  /* ★ここが “最終決定版”：スマホは細く右寄せ */
  .barSearch{
    width:68%;
    max-width:240px;
    min-width:180px;
    height:34px;
    padding:0 8px;
    gap:8px;
    border-radius:999px;
    overflow:hidden;
  }
  .barSearch input{
    min-width:0;
    font-size:12.5px;
    line-height:34px;
  }
  .barSearch button{
    width:26px;
    height:26px;
  }
}

/* PCに戻す */
@media (min-width: 761px){
  .nav{
    position:static;
    transform:none;
    width:auto;
    height:auto;
    background:transparent;
    box-shadow:none;
    padding:0;
    display:flex;
    flex-direction:row;
    gap:12px;
  }
}

/* bigSearch など form横並び保険（共通に置く） */
.topSearch form,
.heroSearch form,
.bigSearch form,
.mainSearch form{
  display:flex;
  gap:10px;
  align-items:center;
}
.topSearch input, .heroSearch input, .bigSearch input, .mainSearch input{
  height:42px;
  border-radius:999px;
  padding:0 16px;
  font-size:14px;
  flex:1;
  min-width:0;
}
.topSearch button, .heroSearch button, .bigSearch button, .mainSearch button{
  height:42px;
  border-radius:999px;
  padding:0 18px;
  font-size:14px;
  white-space:nowrap;
  line-height:1;
  writing-mode:horizontal-tb;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}
/* ===== Hamburger: ALWAYS 3 lines (kill pseudo-elements) ===== */
.hamburger{
  display:inline-flex;          /* ※Mobile側で表示する前提 */
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  width:44px;
  height:44px;
  padding:0;                    /* ← 余計なはみ出し防止 */
  overflow:hidden;
}

/* 3本線の本体 */
.hamburger span{
  display:block !important;
  width:22px !important;
  height:2px !important;
  margin:0 !important;          /* ← 余計なmarginで潰れないように */
  background:#0f172a !important;
  border-radius:999px !important;
}

/* spanを1本 + ::before/after で作る方式を完全に殺す */
.hamburger span::before,
.hamburger span::after{
  content:none !important;
  display:none !important;
}
/* ===== FINAL KILL SWITCH: PCではハンバーガーを絶対出さない ===== */
@media (min-width: 769px){
  .hamburger{ display:none !important; }
}

/* =========================================================
   Category Tiles - SINGLE LAYER FINAL
========================================================= */

.catTiles{
  padding: 30px 0 14px;
  background:#fff;
}
.catTiles .in{
  width:var(--container);
  margin:0 auto;
}

.catTitle{
  margin: 6px 0 16px;
  font-size:22px;
  font-weight:1000;
  letter-spacing:.04em;
  text-align:center;
}
.catTitle::after{
  content:"";
  display:block;
  width:52px;
  height:4px;
  margin:12px auto 0;
  border-radius:999px;
  background:var(--pri);
  opacity:.9;
}

.tileGrid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}

/* カード本体：1枚板 */
.tile{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;

  padding:18px 14px 16px;

  background:#fff;
  border:1px solid rgba(15,23,42,.08);
  border-radius:18px;

  /* 影を切る要素を完全排除 */
  clip-path:none;
  overflow:visible;

  box-shadow:
    0 10px 26px rgba(15,23,42,.12),
    0 2px 8px rgba(15,23,42,.06);

  transition: transform .16s ease, box-shadow .16s ease;
}
.tile:hover{
  transform: translateY(-4px);
  box-shadow:
    0 18px 44px rgba(15,23,42,.16),
    0 6px 16px rgba(15,23,42,.10);
}

/* アイコン：ただ置くだけ（分離しない） */
.tileIcon{
  height:118px;
  display:grid;
  place-items:center;
  background:none;
  border:none;
}

/* SVG */
.tileIcon svg{
  width:72px;
  height:72px;
  fill:none;
  stroke:#334155;
  stroke-width:2.2;
}

/* 画像 */
.catIconImg{
  width:140px;
  height:140px;
  object-fit:contain;
}

/* テキスト */
.tileLabel{
  text-align:center;
  font-weight:1000;
  letter-spacing:.03em;
  color:var(--ink);
}
.tileLabel span{
  display:block;
  margin-top:4px;
  font-size:12px;
  font-weight:900;
  color:var(--sub);
}

/* ribbon（必要なら） */
.ribbon{
  position:absolute;
  top:12px;
  left:12px;
  padding:6px 10px;
  border-radius:10px;
  font-size:12px;
  font-weight:1000;
  color:#fff;
  box-shadow:0 12px 22px rgba(15,23,42,.16);
}
.ribbon.red{ background:#ef4444; }
.ribbon.orange{ background:#f97316; }

/* 旧要素完全無効 */
.cornerFold{ display:none !important; }

@media (max-width: 980px){
  .tileGrid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 520px){
  .tile{ border-radius:16px; padding:14px 12px 12px; }
  .tileIcon{ height:104px; }
  .tileIcon svg, .catIconImg{ width:62px; height:62px; }
}

/* =========================================================
   BLUE ZONE (Blog + News)  - shared component
   - used on TOP / City pages
   - scope all rules under .blueZone to avoid conflicts
========================================================= */

.blueZone{
  padding: 70px 0 100px;
  background: linear-gradient(180deg,#0b4fa3 0%,#0b4fa3 80%,#ffffff 100%);
  color:#fff;

  /* 横はみ出し防止 */
  overflow-x: clip;
}
@supports not (overflow: clip){
  .blueZone{ overflow-x:hidden; }
}

.blueZone .in{
  width: var(--container);
  margin: 0 auto;
  max-width: 100%;
  min-width: 0;
}

/* head */
.blueZone .zoneHead{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
}
.blueZone .zoneTitle{
  margin:0;
  font-size:28px;
  font-weight:1000;
  letter-spacing:.04em;
}
.blueZone .zoneSub{
  margin:10px 0 18px;
  color:rgba(255,255,255,.86);
  line-height:1.8;
}
.blueZone .zoneMore{
  color:rgba(255,255,255,.92);
  font-weight:900;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.08);
}
.blueZone .zoneMore:hover{ background:rgba(255,255,255,.12); }

/* slider */
.blueZone .slider{
  position:relative;
  overflow:hidden;
  padding: 6px 0 4px;
  width: 100%;
  min-width: 0;
}

/* ✅ track：広がらない + 横スクロールは残す */
.blueZone .track{
  display:flex;
  gap:18px;

  overflow-x:auto;
  overflow-y:hidden;

  width:100%;
  max-width:100%;
  min-width:0;

  inline-size:100%;
  max-inline-size:100%;

  padding: 10px 6px 14px;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;

  box-sizing:border-box;
}
.blueZone .track > *{ min-width:0; }

.blueZone .track::-webkit-scrollbar{ height:10px; }
.blueZone .track::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.22);
  border-radius:999px;
}

/* cards (scoped!) */
.blueZone .card{
  flex:0 0 340px;
  scroll-snap-align:start;
  background:#fff;
  color:#0f172a;
  border-radius:18px;
  overflow:hidden;
  box-shadow: 0 22px 60px rgba(0,0,0,.25);
  border:1px solid rgba(15,23,42,.08);
  text-decoration:none;
}
.blueZone .thumb{
  height:190px;
  background-size:cover;
  background-position:center;
}
.blueZone .cardBody{ padding:14px 14px 16px; }
.blueZone .card .meta{
  display:inline-block;
  font-size:12px;
  font-weight:1000;
  padding:6px 10px;
  border-radius:999px;
  background:#eef2ff;
  color:#1d4ed8;
}
.blueZone .card .title{
  margin-top:10px;
  font-size:16px;
  font-weight:1000;
  line-height:1.35;
}

/* news list */
.blueZone .newsList{
  margin-top:12px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
  border-radius:18px;
  overflow:hidden;
}
.blueZone .newsItem{
  display:grid;
  grid-template-columns: 110px 1fr 22px;
  gap:12px;
  align-items:center;
  padding:14px 14px;
  color:#fff;
  border-top:1px solid rgba(255,255,255,.14);
  text-decoration:none;
}
.blueZone .newsItem:first-child{ border-top:none; }
.blueZone .newsItem:hover{ background:rgba(255,255,255,.08); }
.blueZone .newsItem .date{ font-weight:1000; opacity:.9; }
.blueZone .newsItem .txt{ opacity:.92; line-height:1.5; }
.blueZone .newsItem .arr{ font-weight:1000; opacity:.85; }

/* responsive */
@media (max-width: 760px){
  .blueZone .zoneTitle{ font-size:24px; }
  .blueZone .card{ flex-basis: 82vw; }
  .blueZone .newsItem{ grid-template-columns: 96px 1fr 18px; }
}

/* =========================================================
   SHARED COMPONENTS (GLOBAL)
   - BlueZone (Blog + News)
   - Area Preview (KINKI MAP + Address Search) CLEAN
========================================================= */

/* =========================
   BLUE ZONE (Blog + News)  - shared component
   - used on TOP / City / Service pages
   - scope all rules under .blueZone to avoid conflicts
========================= */

.blueZone{
  padding: 70px 0 100px;
  background: linear-gradient(180deg,#0b4fa3 0%,#0b4fa3 80%,#ffffff 100%);
  color:#fff;

  /* 横はみ出し防止 */
  overflow-x: clip;
}
@supports not (overflow: clip){
  .blueZone{ overflow-x:hidden; }
}

.blueZone .in{
  width: var(--container);
  margin: 0 auto;
  max-width: 100%;
  min-width: 0;
}

/* head */
.blueZone .zoneHead{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
}
.blueZone .zoneTitle{
  margin:0;
  font-size:28px;
  font-weight:1000;
  letter-spacing:.04em;
}
.blueZone .zoneSub{
  margin:10px 0 18px;
  color:rgba(255,255,255,.86);
  line-height:1.8;
}
.blueZone .zoneMore{
  color:rgba(255,255,255,.92);
  font-weight:900;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.08);
}
.blueZone .zoneMore:hover{ background:rgba(255,255,255,.12); }

/* slider */
.blueZone .slider{
  position:relative;
  overflow:hidden;
  padding: 6px 0 4px;
  width: 100%;
  min-width: 0;
}

/* ✅ track：広がらない + 横スクロールは残す */
.blueZone .track{
  display:flex;
  gap:18px;

  overflow-x:auto;
  overflow-y:hidden;

  width:100%;
  max-width:100%;
  min-width:0;

  inline-size:100%;
  max-inline-size:100%;

  padding: 10px 6px 14px;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;

  box-sizing:border-box;
}
.blueZone .track > *{ min-width:0; }

.blueZone .track::-webkit-scrollbar{ height:10px; }
.blueZone .track::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.22);
  border-radius:999px;
}

/* cards (scoped!) */
.blueZone .card{
  flex:0 0 340px;
  scroll-snap-align:start;
  background:#fff;
  color:#0f172a;
  border-radius:18px;
  overflow:hidden;
  box-shadow: 0 22px 60px rgba(0,0,0,.25);
  border:1px solid rgba(15,23,42,.08);
  text-decoration:none;
}
.blueZone .thumb{
  height:190px;
  background-size:cover;
  background-position:center;
}
.blueZone .cardBody{ padding:14px 14px 16px; }
.blueZone .card .meta{
  display:inline-block;
  font-size:12px;
  font-weight:1000;
  padding:6px 10px;
  border-radius:999px;
  background:#eef2ff;
  color:#1d4ed8;
}
.blueZone .card .title{
  margin-top:10px;
  font-size:16px;
  font-weight:1000;
  line-height:1.35;
}

/* news list */
.blueZone .newsList{
  margin-top:12px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
  border-radius:18px;
  overflow:hidden;
}
.blueZone .newsItem{
  display:grid;
  grid-template-columns: 110px 1fr 22px;
  gap:12px;
  align-items:center;
  padding:14px 14px;
  color:#fff;
  border-top:1px solid rgba(255,255,255,.14);
  text-decoration:none;
}
.blueZone .newsItem:first-child{ border-top:none; }
.blueZone .newsItem:hover{ background:rgba(255,255,255,.08); }
.blueZone .newsItem .date{ font-weight:1000; opacity:.9; }
.blueZone .newsItem .txt{ opacity:.92; line-height:1.5; }
.blueZone .newsItem .arr{ font-weight:1000; opacity:.85; }

/* responsive */
@media (max-width: 760px){
  .blueZone .zoneTitle{ font-size:24px; }
  .blueZone .card{ flex-basis: 82vw; }
  .blueZone .newsItem{ grid-template-columns: 96px 1fr 18px; }
}

/* =========================
   Area Preview (Map + Address Search)  ★CLEAN版（共通）
========================= */

.areaPreview{ padding: 26px 0 14px; background:#fff; }
.areaPreview .in{ width:var(--container); margin:0 auto; }

.areaTitle{
  margin: 6px 0 16px;
  font-size:22px;
  font-weight:1000;
  letter-spacing:.04em;
  text-align:center;
}
.areaTitle::after{
  content:"";
  display:block;
  width:52px;
  height:4px;
  margin:12px auto 0;
  border-radius:999px;
  background:var(--pri);
  opacity:.9;
}

/* ---- Layout ---- */
.areaSplit{
  display:grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap:18px;
  align-items:stretch;
}
.areaMapPane,
.areaFormPane{
  min-width:0;
  max-width:100%;
}

/* ---- Map ---- */
.areaMapPane{
  position:relative;
  border-radius:22px;
  overflow:hidden;
  border:1px solid rgba(15,23,42,.12);
  background:#dff3ff;
  box-shadow:0 16px 34px rgba(15,23,42,.12);

  /* PCは横長 */
  aspect-ratio: 16 / 10;
  min-height: 320px;
}
.areaMapImg{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* ---- Pref buttons ---- */
.rBtn{
  position:absolute;
  left: var(--x, 50%);
  top:  var(--y, 50%);
  transform: translate(-50%, -50%);

  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(15,23,42,.14);
  box-shadow: 0 12px 20px rgba(2,6,23,.14);

  font-weight:1000;
  letter-spacing:.06em;
  font-size: 14px;
  color: rgba(15,23,42,.86);
  white-space:nowrap;
  text-decoration:none;

  min-width: 96px;
  max-width: calc(100% - 24px);
  overflow:hidden;
  text-overflow:ellipsis;

  transition: box-shadow .15s ease, filter .15s ease;
}
.rBtn:hover{ box-shadow: 0 18px 30px rgba(2,6,23,.16); filter:brightness(.99); }

.rBtn .dot{
  width: 12px;
  height: 12px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 4px rgba(255,255,255,.92), 0 8px 14px rgba(2,6,23,.14);
}
.dot.g{ background:#19b35b; }
.dot.b{ background:#1f7ae0; }
.dot.c{ background:#19b0b0; }
.dot.y{ background:#f0b400; }
.dot.p{ background:#ff4a8b; }
.dot.r{ background:#ff6b52; }

/* ---- Form ---- */
.areaFormPane{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.areaFormCard{
  border-radius: 22px;
  border:1px solid rgba(15,23,42,.12);
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
  box-shadow: 0 16px 34px rgba(15,23,42,.10);
  padding: 18px 18px 16px;
}

.formEyebrow{
  margin:0 0 6px;
  color: rgba(15,23,42,.64);
  font-size: 13px;
  letter-spacing:.06em;
}
.formTitle{
  margin:0 0 12px;
  font-size: 18px;
  letter-spacing:.05em;
}

.addrForm{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.addrField span{
  display:block;
  font-size: 12px;
  color: rgba(15,23,42,.70);
  margin-bottom:6px;
  letter-spacing:.04em;
}
.addrField input{
  width:100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.14);
  background:#fff;
  outline:none;
  box-sizing:border-box;
}
.addrField input:focus{
  border-color: rgba(37,99,235,.45);
  box-shadow: 0 0 0 4px rgba(37,99,235,.12);
}

.addrSubmit{ width:100%; }

.geoBlock{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(15,23,42,.10);
}
.geoTitle{
  font-weight: 900;
  letter-spacing:.04em;
  margin: 0 0 10px;
  color: rgba(15,23,42,.80);
}
.geoBtn{
  width:100%;
  background:#fff;
  color:#0f172a;
  border:1px solid rgba(15,23,42,.18);
}
.geoMsg{
  margin-top:10px;
  font-size:12px;
  color: rgba(15,23,42,.62);
  line-height:1.6;
  min-height: 18px;
}

.addrNote{
  margin: 6px 0 0;
  font-size: 12px;
  color: rgba(15,23,42,.60);
  line-height:1.6;
}

.areaMiniCta{
  display:grid;
  gap:10px;
  margin-top:12px;
}
.areaMiniCta .btn{ width:100%; box-sizing:border-box; }

/* ---- Responsive: SPは縦積み固定 ---- */
@media (max-width: 900px){
  .areaSplit{ grid-template-columns: 1fr; }

  /* ★SPは“見え方を固定”して座標調整を安定させる */
  .areaMapPane{
    aspect-ratio: 16 / 11;
    min-height: 280px;
  }

  .rBtn{
    font-size: 12px;
    padding: 9px 12px;
    border-radius: 14px;
    min-width: 92px;
    gap:7px;
  }
  .rBtn .dot{ width:11px; height:11px; box-shadow: inset 0 0 0 4px rgba(255,255,255,.92), 0 8px 14px rgba(2,6,23,.14); }
}

/* =========================
   KINKI MAP BUTTON POSITIONS
========================= */

/* PC */
.r-hyogo     { --x:30%; --y:38%; }
.r-kyoto     { --x:45%; --y:28%; }
.r-shiga     { --x:64%; --y:30%; }
.r-osaka     { --x:49%; --y:56%; }
.r-nara      { --x:65%; --y:59%; }
.r-wakayama  { --x:47%; --y:78%; }

/* SP */
@media (max-width: 520px){
  .r-hyogo     { --x:24%; --y:38%; }
  .r-kyoto     { --x:46%; --y:23%; }
  .r-shiga     { --x:75%; --y:30%; }
  .r-osaka     { --x:48%; --y:56%; }
  .r-nara      { --x:80%; --y:59%; }
  .r-wakayama  { --x:46%; --y:78%; }
}

@media (max-width: 768px){
  .nav{
    padding: 14px;
  }

  .navHead{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding: 8px 4px 14px;
    border-bottom:1px solid rgba(15,23,42,.10);
    margin-bottom:6px;
  }
  .navTitle{
    font-weight:1000;
    font-size:16px;
    letter-spacing:.04em;
  }
  .navClose{
    width:40px;
    height:40px;
    border-radius:12px;
    border:1px solid rgba(15,23,42,.12);
    background:#fff;
    cursor:pointer;
    font-size:22px;
    line-height:1;
  }
}

/* アンカー飛びで sticky header に隠れないように */
#cat, #area, #note, #contact{
  scroll-margin-top: calc(var(--header-h, 90px) + 12px);
}

/* PC表示では×(閉じる)を隠す（ハンバーガー開いた時だけSPで出す） */
@media (min-width: 981px){
  .navHead{ display:none; }         /* メニュー見出しごと非表示 */
  .navClose{ display:none !important; }
}

@media (max-width: 640px){
  .header .crumbs{
    display:none !important;
  }

  /* ついでに検索を横いっぱいに（任意） */
  .header .headerBar .in{
    justify-content:flex-end;
  }
  .header .barSearchWrap{
    width:100%;
  }
  .header .barSearch{
    width:100%;
  }
}

/* =========================================================
   Drawer Menu - Premium (Mobile)
   右からスライド / ガラス感 / 影 / オーバーレイ / アニメ
========================================================= */

/* オーバーレイ（HTMLに <div id="drawerOverlay"> がある前提）
   無い場合でも nav 自体は強化される */
.drawerOverlay{
  position: fixed;
  inset: 0;
  background: rgba(2,6,23,.55);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
  z-index: 9998;
}

/* body に nav-open が付いたらオーバーレイ表示（あなたの main.js が付けてる） */
body.nav-open .drawerOverlay{
  opacity: 1;
  pointer-events: auto;
}

/* ドロワー本体（#navが右から出る想定） */
@media (max-width: 760px){

  /* navを“メニュー専用のドロワー”に見せる */
  #nav.nav{
    position: fixed;
    top: 10px;
    right: 10px;

    width: min(360px, 88vw);
    height: calc(100dvh - 20px);

    border-radius: 22px;
    background: rgba(255,255,255,.86);
    backdrop-filter: blur(14px);

    border: 1px solid rgba(15,23,42,.10);
    box-shadow:
      -24px 0 70px rgba(2,6,23,.22),
      0 10px 26px rgba(2,6,23,.10);

    display: flex;
    flex-direction: column;

    transform: translateX(110%);
    transition: transform .26s cubic-bezier(.2,.9,.2,1);

    z-index: 9999;
    overflow: hidden;
  }
  #nav.nav.is-open{ transform: translateX(0); }

  /* ヘッダー（上部固定っぽく） */
  #nav .navHead{
    position: sticky;
    top: 0;
    padding: 14px 14px 12px;

    background: linear-gradient(180deg,
      rgba(255,255,255,.92),
      rgba(255,255,255,.72)
    );
    border-bottom: 1px solid rgba(15,23,42,.10);

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  #nav .navTitle{
    font-weight: 1000;
    letter-spacing: .05em;
    font-size: 16px;
  }

  /* 閉じるボタンを“丸ボタン”に */
  #nav .navClose{
    width: 42px;
    height: 42px;
    border-radius: 999px;
    border: 1px solid rgba(15,23,42,.12);
    background: rgba(255,255,255,.85);
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
    display: grid;
    place-items: center;
    transition: transform .12s ease, background .12s ease;
  }
  #nav .navClose:hover{
    transform: scale(1.03);
    background: rgba(248,250,252,.95);
  }

  /* メニューリスト（スクロール領域） */
  #nav.nav > a{
    padding: 14px 14px;
    border: 0;
    border-radius: 0;
    font-size: 15px;
    font-weight: 950;
    border-bottom: 1px solid rgba(15,23,42,.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  /* “→”の軽い導線 */
  #nav.nav > a::after{
    content: "›";
    font-size: 18px;
    opacity: .55;
    transform: translateY(-1px);
  }

  /* ホバー/タップ感 */
  #nav.nav > a:hover{
    background: rgba(37,99,235,.06);
  }

  /* 下のCTAエリアを“固定”に見せる */
  #nav .navCta{
    margin-top: auto;
    padding: 14px;
    background: linear-gradient(180deg,
      rgba(255,255,255,0),
      rgba(255,255,255,.92) 28%,
      rgba(255,255,255,.98)
    );
    border-top: 1px solid rgba(15,23,42,.08);
  }

  #nav .navBtn{
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 46px;
    border-radius: 16px;
    font-weight: 1000;
    border: 1px solid rgba(15,23,42,.10);
    background: #fff;
    box-shadow: 0 12px 26px rgba(2,6,23,.10);
  }
  #nav .navBtn.primary{
    background: linear-gradient(135deg, rgba(37,99,235,.95), rgba(11,94,168,.95));
    color: #fff;
    border-color: rgba(255,255,255,.18);
  }

  /* 開いた瞬間に中身が“ふわっ”と出る（上級） */
  #nav.nav.is-open > a,
  #nav.nav.is-open .navCta{
    animation: drawerPop .30s ease both;
  }
  #nav.nav.is-open > a:nth-of-type(1){ animation-delay: .02s; }
  #nav.nav.is-open > a:nth-of-type(2){ animation-delay: .04s; }
  #nav.nav.is-open > a:nth-of-type(3){ animation-delay: .06s; }
  #nav.nav.is-open > a:nth-of-type(4){ animation-delay: .08s; }
  #nav.nav.is-open .navCta{ animation-delay: .10s; }

  @keyframes drawerPop{
    from{ opacity: 0; transform: translateX(8px); }
    to  { opacity: 1; transform: translateX(0); }
  }
}

/* 端末が“動きを減らす”設定ならアニメ切る（上級の作法） */
@media (prefers-reduced-motion: reduce){
  #nav.nav, .drawerOverlay{ transition: none !important; }
  #nav.nav.is-open > a, #nav.nav.is-open .navCta{ animation: none !important; }
}

@media (max-width: 520px){
  .tileGrid{ grid-template-columns:repeat(2,1fr); gap:12px; }

  .tile{ padding:12px 10px 10px; gap:8px; border-radius:16px; }

  .tileIcon{ height:72px; }
  .catIconImg{ width:56px; height:56px; }

  .tileLabel{ font-size:14px; line-height:1.2; }
}

.barSg{
  width: 100%;
  max-width: 370px;   /* PCの.barSearchの最大と揃える */
}
@media (max-width:760px){
  .barSg{ max-width:240px; } /* SPの.barSearch maxと揃える */
}
/* =========================
   Header Suggest FIX (文字が白のまま問題を強制解決)
   ※必ず site.css の一番下
========================= */

/* 候補ボックス自体を黒文字に固定 */
.header .barSearchWrap .barSg{
  background:#fff !important;
  color:#0f172a !important;
}

/* 中の文字を全部 “黒” に固定（白継承を完全に殺す） */
.header .barSearchWrap .barSg,
.header .barSearchWrap .barSg *{
  color:#0f172a !important;
}

/* クリック行（リンク）も確実に黒 */
.header .barSearchWrap .barSg a{
  color:#0f172a !important;
}

/* バッジだけは青に戻す */
.header .barSearchWrap .barSg .badge{
  color:#1d4ed8 !important;
}