/*
 * 紙マップポータルトップページ用スタイル
 * 読み込み対象: is_page('map')
 *
 * 既存テーマとの競合を避けるため、.mp- プレフィックスを使用
 */

/* ===== CSS変数 ===== */
.mp-wrap {
  --mp-green:    #1D9E75;
  --mp-green-l:  #E1F5EE;
  --mp-green-m:  #5DCAA5;
  --mp-green-d:  #0F6E56;
  --mp-bg:       #F5F7F5;
  --mp-surface:  #fff;
  --mp-border:   rgba(0,0,0,0.08);
  --mp-border-m: rgba(0,0,0,0.15);
  --mp-text:     #1a1a1a;
  --mp-text2:    #666;
  --mp-text3:    #999;
  --mp-r-sm:     8px;
  --mp-r-md:     12px;
  --mp-r-lg:     16px;
  font-family: 'Noto Sans JP', sans-serif;
}

/* ===== ラッパー ===== */
.mp-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 32px 48px;
}

/* ===== タブ ===== */
.mp-tabs {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 20px;
}
.mp-tab-wrap {
  display: flex;
}
.mp-tab {
  padding: 7px 18px;
  border-radius: 40px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  border: 0.5px solid var(--mp-border-m);
  background: var(--mp-surface);
  color: var(--mp-text2);
  transition: all .2s;
}
.mp-tab.active {
  background: var(--mp-green);
  color: #fff;
  border-color: var(--mp-green);
}
.mp-tab:hover:not(.active) {
  border-color: var(--mp-green);
  color: var(--mp-green);
}

/* ===== 地図セクション ===== */
.mp-map-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
  align-items: start;
}
.mp-japan-map-card {
  background: var(--mp-surface);
  border: 0.5px solid var(--mp-border);
  border-radius: var(--mp-r-lg);
  padding: 12px;
  display: flex;
  flex-direction: column;
}
.mp-map-hint {
  font-size: 12px;
  color: var(--mp-text3);
  margin-bottom: 6px;
  flex-shrink: 0;
}
.mp-japan-map-card svg {
  width: 100%;
  height: auto;
  display: block;
}
/* SVG内テキストを既存テーマから完全リセット */
.mp-japan-map-card svg text {
  font-size: 0.55px !important;
  font-weight: bold;
  font-family: 'Noto Sans JP', sans-serif !important;
  fill: rgba(0,0,0,0.42);
  stroke: none !important;
  line-height: normal !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}
.mp-rg {
  cursor: pointer;
}
.mp-rg path {
  transition: fill .15s;
}
.mp-rl {
  pointer-events: none;
  font-size: 0.8px;
  font-weight: 700;
  text-anchor: middle;
  font-family: 'Noto Sans JP', sans-serif;
  fill: rgba(0,0,0,0.42);
}

/* ===== 右パネル ===== */
.mp-pref-panel {
  background: var(--mp-surface);
  border: 0.5px solid var(--mp-border);
  border-radius: var(--mp-r-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: sticky;
  top: 76px;
  max-height: calc(100vh - 100px);
}
.mp-panel-header {
  padding: 14px 16px 10px;
  border-bottom: 0.5px solid var(--mp-border);
  flex-shrink: 0;
}
.mp-panel-region-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--mp-text);
}
.mp-panel-meta {
  font-size: 11px;
  color: var(--mp-text3);
  margin-top: 2px;
}
.mp-panel-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 10px 14px;
}
.mp-panel-scroll::-webkit-scrollbar { width: 4px; }
.mp-panel-scroll::-webkit-scrollbar-thumb {
  background: var(--mp-border-m);
  border-radius: 2px;
}
.mp-panel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}
.mp-pref-group-label {
  font-size: 10px;
  color: var(--mp-text3);
  letter-spacing: .06em;
  margin: 6px 0;
  padding-bottom: 4px;
  border-bottom: 0.5px solid var(--mp-border);
}
.mp-pref-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 8px;
  border-radius: var(--mp-r-sm);
  font-size: 13px;
  color: var(--mp-text2);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.mp-pref-item:hover {
  background: var(--mp-green-l);
  color: var(--mp-green-d);
}
.mp-badge {
  font-size: 10px;
  background: var(--mp-green-l);
  color: var(--mp-green-d);
  padding: 2px 8px;
  border-radius: 20px;
  font-weight: 500;
}
.mp-empty-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  gap: 8px;
  color: var(--mp-text3);
  font-size: 13px;
  text-align: center;
  line-height: 1.6;
}

/* ===== 都道府県グリッド ===== */
.mp-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: var(--mp-text3);
  margin: 20px 0 16px;
}
.mp-divider::before,
.mp-divider::after {
  content: '';
  flex: 1;
  height: 0.5px;
  background: var(--mp-border-m);
}
.mp-section-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--mp-text);
  margin-bottom: 12px;
}
.mp-pref-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 6px;
  margin-bottom: 24px;
}
.mp-pref-grid-item {
  background: var(--mp-surface);
  border: 0.5px solid var(--mp-border);
  border-radius: var(--mp-r-sm);
  padding: 8px 12px;
  font-size: 12px;
  color: var(--mp-text2);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all .15s;
}
.mp-pref-grid-item:hover {
  border-color: var(--mp-green);
  color: var(--mp-green-d);
  background: var(--mp-green-l);
}
.mp-pref-grid-item span:last-child {
  font-size: 10px;
  color: var(--mp-text3);
}
.mp-pref-grid-item.active {
  border-color: var(--mp-green);
  color: var(--mp-green-d);
  background: var(--mp-green-l);
}

/* ===== 結果エリア ===== */
.mp-result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 36px;
  margin-bottom: 12px;
}
.mp-result-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--mp-text);
}
.mp-result-count {
  font-size: 13px;
  color: var(--mp-text2);
}

/* ===== テーマチップ ===== */
.mp-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.mp-chip {
  font-size: 12px;
  font-family: inherit;
  padding: 5px 14px;
  border: 0.5px solid var(--mp-border-m);
  border-radius: 40px;
  color: var(--mp-text2);
  cursor: pointer;
  background: var(--mp-surface);
  transition: all .15s;
}
.mp-chip.on {
  background: var(--mp-green-l);
  border-color: var(--mp-green-m);
  color: var(--mp-green-d);
  font-weight: 500;
}

/* ===== マップカード ===== */
.mp-map-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.mp-map-card {
  background: var(--mp-surface);
  border: 0.5px solid var(--mp-border);
  border-radius: var(--mp-r-md);
  overflow: hidden;
  cursor: pointer;
  transition: border-color .2s, transform .15s, box-shadow .2s;
}
.mp-map-card:hover {
  border-color: var(--mp-green);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(29,158,117,.1);
}
.mp-card-thumb {
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mp-card-thumb i { font-size: 30px; opacity: .6; }
.mp-card-body { padding: 10px 12px 12px; }
.mp-card-title {
  font-size: 12px;
  font-weight: 500;
  color: var(--mp-text);
  margin-bottom: 5px;
  line-height: 1.5;
}
.mp-card-tags {
  min-height: 36px; /* 2段分の高さを確保 */
  max-height: 40px;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  align-content: flex-start;
}
.mp-card-tag {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 20px;
  display: inline-block;
  font-weight: 500;
}
.mp-card-src {
  font-size: 10px;
  color: var(--mp-text3);
  margin-top: 7px;
}
.mp-no-results {
  grid-column: 1/-1;
  text-align: center;
  padding: 40px;
  color: var(--mp-text3);
  font-size: 13px;
}
.mp-placeholder {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: var(--mp-text3);
  gap: 12px;
}
.mp-placeholder i {
  font-size: 48px;
  opacity: .2;
}
.mp-placeholder p {
  font-size: 13px;
  text-align: center;
  line-height: 1.6;
}
/* ===== 都道府県グループ ===== */
.mp-pref-group-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 48px;
  margin-bottom: 24px;
}
.mp-pref-group-section {
  margin-bottom: 0;
}
.mp-pref-group-heading {
  font-size: 1em;
  font-weight: 700;
  color: var(--mp-text3);
  letter-spacing: .06em;
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 0.5px solid var(--mp-border);
}
.mp-pref-group-section .mp-pref-grid {
  margin-bottom: 0;
}
/* ===== もっと見るボタン ===== */
.mp-load-more {
  display: block;
  width: 100%;
  margin-top: 20px;
  padding: 12px;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  color: var(--mp-green-d);
  background: var(--mp-green-l);
  border: 0.5px solid var(--mp-green-m);
  border-radius: var(--mp-r-md);
  cursor: pointer;
  transition: background .2s;
  font-family: inherit;
}
.mp-load-more:hover {
  background: var(--mp-green-m);
  color: #fff;
}

/* =============================================================
   スマホ対応（768px以下）
============================================================= */
 
/* PC専用要素 */
.mp-sp-only { display: none; }
 
@media (max-width: 768px) {
 
  /* PC専用を非表示・SP専用を表示 */
  .mp-pc-only { display: none !important; }
  .mp-sp-only { display: block; }
 
  /* ラッパーのパディングを狭める */
  .mp-wrap {
    padding: 16px 16px 48px;
  }
 
  /* カードを1列に */
  .mp-map-cards {
    grid-template-columns: 1fr;
  }
 
  /* チップを2行横スクロール */
  .mp-chips {
    display: grid !important;
    grid-template-rows: repeat(2, auto);
    grid-auto-flow: column;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .mp-chips::-webkit-scrollbar {
    display: none;
  }
  .mp-chip {
    white-space: nowrap;
  }
 
  /* 説明テキスト */
  .mp-sp-guide {
    font-size: 13px;
    font-weight: 500;
    color: var(--mp-text2);
    margin-bottom: 12px;
  }
 
  /* 地方タブ */
  .mp-region-tabs {
    display: flex;
    overflow-x: auto;
    gap: 6px;
    padding-bottom: 4px;
    margin-bottom: 12px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .mp-region-tabs::-webkit-scrollbar {
    display: none;
  }
  .mp-region-tab {
    flex-shrink: 0;
    padding: 6px 14px;
    border-radius: 40px;
    font-size: 12px;
    font-weight: 500;
    border: 0.5px solid var(--mp-border-m);
    background: var(--mp-surface);
    color: var(--mp-text2);
    cursor: pointer;
    transition: all .2s;
    white-space: nowrap;
  }
  .mp-region-tab.active {
    background: var(--mp-green);
    color: #fff;
    border-color: var(--mp-green);
  }
 
  /* 地方別都道府県グリッド */
  .mp-region-pref-grid {
    display: none;
  }
  .mp-region-pref-grid.active {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 6px;
    margin-bottom: 20px;
  }
 
}
/* ===== 掲載依頼ボタン ===== */
.mp-listing-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 12px;
  background: linear-gradient(135deg, #FF6B6B 0%, #FF8E53 100%);
  color: #fff;
  border: none;
  border-radius: var(--mp-r-md);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  transition: opacity .15s;
  white-space: nowrap;
}
.mp-listing-btn:hover {
  opacity: 0.85;
  color: #fff !important;
}
 
/* SP：説明テキストと横並び */
.mp-sp-guide-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.mp-sp-guide-row .mp-sp-guide {
  margin-bottom: 0;
}

/* ===== Aboutカード ===== */
.mp-about-card-wrap {
  background: var(--mp-bg);
  padding: 48px 32px;
  margin-top: 48px;
}
.mp-about-card {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  align-items: center;
  background: var(--mp-surface);
  border: 0.5px solid var(--mp-border);
  border-radius: var(--mp-r-lg);
  overflow: hidden;
}
.mp-about-card-img {
  height: 280px;
  overflow: hidden;
}
.mp-about-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 16px;
}
.mp-about-card-body {
  padding: 32px 40px 32px 0;
}
.mp-about-card-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .15em;
  color: var(--mp-green);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.mp-about-card-heading {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--mp-text);
  margin-bottom: 16px;
}
.mp-about-card-text {
  font-size: 13px;
  line-height: 1.9;
  color: var(--mp-text2);
  margin-bottom: 24px;
}
.mp-about-card-btn {
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  color: var(--mp-green-d);
  text-decoration: none;
  border-bottom: 1px solid var(--mp-green-m);
  padding-bottom: 2px;
  transition: color .15s;
}
.mp-about-card-btn:hover {
  color: var(--mp-green);
}
 
@media (max-width: 768px) {
  .mp-about-card-wrap {
    padding: 32px 16px;
    margin-top: 32px;
  }
  .mp-about-card {
    grid-template-columns: 1fr;
  }
  .mp-about-card-img {
    height: 200px;
  }
  .mp-about-card-body {
    padding: 20px;
  }
}