@charset "UTF-8";
/*
 * Manjaro Area Map - Plugin Stylesheet
 * Version: 2.1.0
 *
 * 表示モード:
 *  - コンテナ幅 > 820px: 日本地図の長方形タイル配置（固定サイズ 777×482）
 *  - コンテナ幅 ≤ 820px: 地域別グリッド表示（4列、自動レスポンシブ）
 *  ※ コンテナクエリで判定するため、サイドバー有りの狭い記事領域でも
 *    自動的にグリッド表示に切り替わり、レイアウト崩れを防ぎます。
 */

/* ===== ラッパー（コンテナクエリの基準） ===== */
.manjaro-area-map-wrap {
  max-width: 900px;
  margin: 40px auto;
  padding: 20px 16px;
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #e3eaf2;
  box-shadow: 0 4px 20px rgba(0,0,0,0.04);
  box-sizing: border-box;
  container-type: inline-size;
  container-name: mam;
}
/* タイトル・リード文（H3ではなく<p>タグ。目次・SEO見出しに拾われない） */
.manjaro-area-map-wrap .mam-title {
  text-align: center;
  font-size: 1.3em;
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 8px;
  padding: 0;
  color: #1e3a5f;
}
.manjaro-area-map-wrap .mam-lead {
  text-align: center;
  font-size: 0.9em;
  font-weight: normal;
  line-height: 1.5;
  color: #6a7a8c;
  margin: 0 0 25px;
  padding: 0;
}

.manjaro-area-map-wrap .clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

.manjaro-area-map-wrap a {
  text-decoration: none;
  color: inherit;
}

/* ===== 地図成形（デフォルト = 広い領域用の固定レイアウト） ===== */
.manjaro-area-map-wrap #japan-map div div.area div {
  border: 1px #ffffff solid;
  text-align: center;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  position: absolute;
  box-sizing: border-box;
  transition: 0.2s;
  color: #ffffff;
  font-weight: 700;
}

.manjaro-area-map-wrap #japan-map div div.area a div {
  cursor: pointer;
}
.manjaro-area-map-wrap #japan-map div div.area a:hover div {
  opacity: 0.7;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transition: 0.2s;
}

.manjaro-area-map-wrap #japan-map div div.area .disabled {
  background-color: #d6d9de !important;
  opacity: 0.55;
  cursor: default;
}

.manjaro-area-map-wrap #japan-map {
  display: block;
  width: 777px;
  height: 482px;
  margin: 0 auto;
  position: relative;
}
.manjaro-area-map-wrap #japan-map p.area-title { display: none; }

/* 北海道・東北（紫） */
.manjaro-area-map-wrap #hokkaido-touhoku {
  width: 136px; display: block; height: 265px;
  position: absolute; top: 0; left: 638px;
}
.manjaro-area-map-wrap #hokkaido-touhoku div.area div { background-color: #7478c2; }
.manjaro-area-map-wrap #hokkaido  { width: 133px; height: 70px;  top: 0;    left: 0; }
.manjaro-area-map-wrap #aomori    { width: 93px;  height: 43px;  top: 96px; left: 21px; }
.manjaro-area-map-wrap #akita     { width: 67px;  height: 42px;  top: 139px; left: 3px; }
.manjaro-area-map-wrap #iwate     { width: 67px;  height: 42px;  top: 139px; left: 70px; }
.manjaro-area-map-wrap #yamagata  { width: 67px;  height: 42px;  top: 181px; left: 3px; }
.manjaro-area-map-wrap #miyagi    { width: 67px;  height: 42px;  top: 181px; left: 70px; }
.manjaro-area-map-wrap #fukushima { width: 67px;  height: 42px;  top: 223px; left: 70px; }

/* 関東（青緑） */
.manjaro-area-map-wrap #kantou {
  width: 158px; display: block; height: 174px;
  position: absolute; top: 265px; left: 623px; z-index: 2;
}
.manjaro-area-map-wrap #kantou div.area div { background-color: #31beca; }
.manjaro-area-map-wrap #ibaraki  { width: 52px;  height: 85px; top: 0;    left: 100px; }
.manjaro-area-map-wrap #tochigi  { width: 50px;  height: 42px; top: 0;    left: 50px; }
.manjaro-area-map-wrap #gunma    { width: 50px;  height: 42px; top: 0;    left: 0; }
.manjaro-area-map-wrap #saitama  { width: 100px; height: 43px; top: 42px; left: 0; }
.manjaro-area-map-wrap #chiba    { width: 52px;  height: 84px; top: 85px; left: 100px; }
.manjaro-area-map-wrap #tokyo    { width: 100px; height: 42px; top: 85px; left: 0; }
.manjaro-area-map-wrap #kanagawa { width: 67px;  height: 42px; top: 127px; left: 0; }

/* 中部（緑） */
.manjaro-area-map-wrap #tyubu {
  width: 270px; height: 211px; position: absolute; left: 438px; top: 223px;
}
.manjaro-area-map-wrap #tyubu div.area div { background-color: #4ab969; }
.manjaro-area-map-wrap #nigata    { width: 85px; height: 42px; left: 185px; top: 0; }
.manjaro-area-map-wrap #toyama    { width: 67px; height: 42px; left: 118px; top: 0; }
.manjaro-area-map-wrap #ishikawa  { width: 50px; height: 57px; left: 68px;  top: 0; }
.manjaro-area-map-wrap #fukui     { width: 68px; height: 42px; left: 0;     top: 0; z-index: 2; }
.manjaro-area-map-wrap #nagano    { width: 67px; height: 85px; left: 118px; top: 42px; }
.manjaro-area-map-wrap #yamanashi { width: 67px; height: 42px; left: 118px; top: 127px; }
.manjaro-area-map-wrap #gifu      { width: 50px; height: 55px; left: 68px;  top: 57px; }
.manjaro-area-map-wrap #shizuoka  { width: 67px; height: 42px; left: 118px; top: 169px; }
.manjaro-area-map-wrap #aichi     { width: 50px; height: 57px; left: 68px;  top: 112px; }

/* 近畿（オリーブ） */
.manjaro-area-map-wrap #kinki {
  width: 186px; height: 211px; position: absolute; left: 320px; top: 223px;
}
.manjaro-area-map-wrap #kinki div.area div { background-color: #b0b72f; }
.manjaro-area-map-wrap #kyoto    { width: 67px;  height: 84px; left: 51px;  top: 0; }
.manjaro-area-map-wrap #shiga    { width: 68px;  height: 42px; left: 118px; top: 42px; }
.manjaro-area-map-wrap #osaka    { width: 67px;  height: 85px; left: 51px;  top: 84px; }
.manjaro-area-map-wrap #nara     { width: 34px;  height: 85px; left: 118px; top: 84px; }
.manjaro-area-map-wrap #mie      { width: 34px;  height: 85px; left: 152px; top: 84px; }
.manjaro-area-map-wrap #wakayama { width: 113px; height: 42px; left: 61px;  top: 169px; }
.manjaro-area-map-wrap #hyougo   { width: 51px;  height: 98px; left: 0;     top: 0; }

/* 中国（オレンジ） */
.manjaro-area-map-wrap #tyugoku {
  width: 151px; height: 98px; position: absolute; left: 169px; top: 223px;
}
.manjaro-area-map-wrap #tyugoku div.area div { background-color: #ef9f27; }
.manjaro-area-map-wrap #tottori   { width: 50px; height: 49px; left: 101px; top: 0; }
.manjaro-area-map-wrap #okayama   { width: 50px; height: 49px; left: 101px; top: 49px; }
.manjaro-area-map-wrap #shimane   { width: 51px; height: 49px; left: 50px;  top: 0; }
.manjaro-area-map-wrap #hiroshima { width: 51px; height: 49px; left: 50px;  top: 49px; }
.manjaro-area-map-wrap #yamaguchi { width: 50px; height: 98px; left: 0;     top: 0; }

/* 四国（茶） */
.manjaro-area-map-wrap #shikoku {
  width: 184px; height: 84px; position: absolute; left: 169px; top: 350px;
}
.manjaro-area-map-wrap #shikoku div.area div { background-color: #d08f68; }
.manjaro-area-map-wrap #kagawa    { width: 92px; height: 42px; right: 0; top: 0; }
.manjaro-area-map-wrap #ehime     { width: 92px; height: 42px; left: 0;  top: 0; }
.manjaro-area-map-wrap #tokushima { width: 92px; height: 42px; right: 0; top: 42px; }
.manjaro-area-map-wrap #kouchi    { width: 92px; height: 42px; left: 0;  top: 42px; }

/* 九州・沖縄（赤） */
.manjaro-area-map-wrap #kyusyu {
  width: 152px; height: 247px; position: absolute; left: 0; top: 235px;
}
.manjaro-area-map-wrap #kyusyu div.area div { background-color: #ff7575; }
.manjaro-area-map-wrap #fukuoka   { width: 50px; height: 50px;  left: 101px; top: 0; }
.manjaro-area-map-wrap #saga      { width: 50px; height: 50px;  left: 51px;  top: 0; }
.manjaro-area-map-wrap #nagasaki  { width: 50px; height: 50px;  left: 1px;   top: 0; }
.manjaro-area-map-wrap #oita      { width: 50px; height: 50px;  left: 101px; top: 50px; }
.manjaro-area-map-wrap #kumamoto  { width: 50px; height: 100px; left: 51px;  top: 50px; }
.manjaro-area-map-wrap #miyazaki  { width: 50px; height: 50px;  left: 101px; top: 100px; }
.manjaro-area-map-wrap #kagoshima { width: 68px; height: 49px;  left: 83px;  top: 150px; }
.manjaro-area-map-wrap #okinawa   { width: 50px; height: 50px;  left: 1px;   top: 197px; }


/* ============================================================
   コンテナクエリ：コンテナ幅 ≤ 820px で地域別グリッドへ切替
   （記事領域が狭いSANGOテーマでも崩れない）
   ============================================================ */
@container mam (max-width: 820px) {
  .manjaro-area-map-wrap #japan-map {
    display: block;
    width: 100%;
    height: auto;
  }
  .manjaro-area-map-wrap #hokkaido-touhoku,
  .manjaro-area-map-wrap #kantou,
  .manjaro-area-map-wrap #tyubu,
  .manjaro-area-map-wrap #kinki,
  .manjaro-area-map-wrap #tyugoku,
  .manjaro-area-map-wrap #shikoku,
  .manjaro-area-map-wrap #kyusyu {
    display: block;
    width: 100%;
    height: auto;
    position: static;
    margin: 0 0 12px 0;
  }
  .manjaro-area-map-wrap #japan-map p.area-title {
    display: block;
    font-size: 0.9em;
    font-weight: 700;
    color: #1e3a5f;
    margin: 16px 0 8px;
    padding-left: 4px;
    border-left: 3px solid #1e3a5f;
    padding-left: 8px;
  }
  .manjaro-area-map-wrap #japan-map div div.area {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 6px;
  }
  .manjaro-area-map-wrap #japan-map div div.area a,
  .manjaro-area-map-wrap #japan-map div div.area > span {
    height: auto;
    width: calc(25% - 6px);
    display: block;
  }
  .manjaro-area-map-wrap #japan-map div div.area div {
    display: flex;
    border-radius: 6px;
    position: static;
    height: auto;
    width: 100%;
    padding: 0.7em 0.3em;
    font-size: 14px;
  }
}

/* ============================================================
   フォールバック：コンテナクエリ非対応ブラウザ向け
   ============================================================ */
@supports not (container-type: inline-size) {
  @media screen and (max-width: 820px) {
    .manjaro-area-map-wrap #japan-map {
      display: block; width: 100%; height: auto;
    }
    .manjaro-area-map-wrap #hokkaido-touhoku,
    .manjaro-area-map-wrap #kantou,
    .manjaro-area-map-wrap #tyubu,
    .manjaro-area-map-wrap #kinki,
    .manjaro-area-map-wrap #tyugoku,
    .manjaro-area-map-wrap #shikoku,
    .manjaro-area-map-wrap #kyusyu {
      display: block; width: 100%; height: auto;
      position: static; margin: 0 0 12px 0;
    }
    .manjaro-area-map-wrap #japan-map p.area-title {
      display: block; font-size: 0.9em; font-weight: 700;
      color: #1e3a5f; margin: 16px 0 8px;
      padding-left: 8px; border-left: 3px solid #1e3a5f;
    }
    .manjaro-area-map-wrap #japan-map div div.area {
      display: flex; flex-wrap: wrap; width: 100%; gap: 6px;
    }
    .manjaro-area-map-wrap #japan-map div div.area a,
    .manjaro-area-map-wrap #japan-map div div.area > span {
      height: auto; width: calc(25% - 6px); display: block;
    }
    .manjaro-area-map-wrap #japan-map div div.area div {
      display: flex; border-radius: 6px; position: static;
      height: auto; width: 100%; padding: 0.7em 0.3em; font-size: 14px;
    }
  }
}

/* 超狭幅（スマホ縦）: 4列 → 3列 */
@container mam (max-width: 400px) {
  .manjaro-area-map-wrap #japan-map div div.area a,
  .manjaro-area-map-wrap #japan-map div div.area > span {
    width: calc(33.333% - 6px);
  }
  .manjaro-area-map-wrap #japan-map div div.area div {
    font-size: 13px;
    padding: 0.6em 0.2em;
  }
}