/* =========================================================
   KAITO MAP SECTION
   ========================================================= */

/* ---------- Section wrapper ---------- */
.kaito-map-section {
  max-width: 100%;
  padding: 40px 20px;
  /* #fafafa の地に白ドットを敷き詰め */
  background-color: #fafafa;
  background-image: radial-gradient(circle, #ffffff 4px, transparent 5px);
  background-size: 50px 50px;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN",
               "Hiragino Sans", Meiryo, sans-serif;
}

/* 見出し：他所で使われている h2 のデザイン（::after / 背景色 / 文字色 / padding）を打ち消す */
.kaito-map-section h2 {
  margin: 0 0 10px !important;
  padding: 0 !important;
  background: none !important;
  background-color: transparent !important;
  color: #1F2A5E !important;          /* ネイビー（任意で調整可） */
  font-size: 28px;                    /* 虫眼鏡 36px に合わせたサイズ */
  font-weight: bold;
  line-height: 1.4;
  text-align: center;
}

/* グローバル h2 の装飾を無効化 */
.kaito-map-section h2::after {
  content: none !important;
  display: none !important;
}

/* 虫眼鏡アイコン（円ごと書き出した search.svg / 36×36） */
.kaito-map-section h2::before {
  content: "";
  display: inline-block;
  width: 36px;
  height: 36px;
  margin-right: 8px;
  vertical-align: middle;            /* 文字との縦位置。微調整は数値で */
  background: url(../images/2026-top/search.svg) no-repeat center / contain;
}

/* リード文 */
.kaito-map-section .map-lead {
  margin: 0 0 30px;
  font-size: 15px;
  line-height: 1.7;
  text-align: center;
  color: #555;
}

/* ---------- Map container & base image ---------- */
.japan-map-container {
  position: relative;
  width: 100%;
  max-width: 1000px;
  margin: auto;
  aspect-ratio: 1000 / 660;
}

.japan-map-img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ---------- Region box (shared) ---------- */
.region-box {
  position: absolute;
  z-index: 3;
  width: 22%;
  min-width: 160px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.region-box .title {
  position: relative;          /* ::after の矢印基準 */
  margin: 0;
  padding: 6px 18px 6px 6px;   /* 右側は矢印スペースを確保 */
  font-size: 14px;
  font-weight: bold;
  text-align: left;
  color: #fff;
  border-radius: 8px 8px 0 0;
}

/* 各地方共通の右くの字矢印（色は地方ごとに上書き） */
.region-box .title::after {
  content: "\f054";            /* Font Awesome: chevron-right */
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome;
  font-weight: 900;            /* solid */
  font-size: 11px;
  line-height: 1;
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
}

.pref-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 8px;
}

.pref-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 1px;
  font-size: 16px;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  color: #fff;
  background-color: #fff;
  border-radius: 2px;
  text-decoration: none !important;
  transition: background-color 0.2s, color 0.2s;
}

/* =========================================================
   REGION THEMES（枠線 / 見出し / 矢印色 / リンク / hover）
   ========================================================= */

/* --- Hokkaido --- */
.hokkaido               { border-color: #626AAE; }
.hokkaido .title            { background-color: #EFF0F7; color: #525BA5 !important; }
.hokkaido .title::after     { color: #626AAE; }
.hokkaido .pref-links   { grid-template-columns: 1fr; }
.hokkaido .pref-links a { background-color: #626AAE; border: 1px solid #525BA5; color: #fff; max-width: 33%; }
.hokkaido .pref-links a:hover { background-color: #525BA5; color: #fff; }

/* --- Tohoku --- */
.tohoku               { border-color: #009FD8; }
.tohoku .title            { background-color: #D7EEF7; color: #009FD8 !important; }
.tohoku .title::after     { color: #009FD8; }
.tohoku .pref-links a { background-color: #009FD8; border: 1px solid #009FD8; color: #fff; }
.tohoku .pref-links a:hover { background-color: #009FD8; color: #fff; }

/* --- Kanto --- */
.kanto               { border-color: #4A9E5D; }
.kanto .title            { background-color: #DCF0E1; color: #4A9E5D !important; }
.kanto .title::after     { color: #4A9E5D; }
.kanto .pref-links a { background-color: #4A9E5D; border: 1px solid #4A9E5D; color: #fff; }
.kanto .pref-links a:hover { background-color: #4A9E5D; color: #fff; }

/* --- Chubu --- */
.chubu               { border-color: #A0CB58; }
.chubu .title            { background-color: #E4EFD3; color: #7FAD31 !important; }
.chubu .title::after     { color: #A0CB58; }
.chubu .pref-links a { background-color: #A0CB58; border: 1px solid #7FAD31; color: #fff; }
.chubu .pref-links a:hover { background-color: #7FAD31; color: #fff; }

/* --- Kinki --- */
.kinki               { border-color: #E6AF00; }
.kinki .title            { background-color: #FCF5DF; color: #E6AF00 !important; }
.kinki .title::after     { color: #E6AF00; }
.kinki .pref-links a { background-color: #E6AF00; border: 1px solid #F9BF0A; color: #fff; }
.kinki .pref-links a:hover { background-color: #F9BF0A; color: #fff; }

/* --- Chugoku --- */
.chugoku               { border-color: #EF821D; }
.chugoku .title            { background-color: #FCF5DF; color: #EF821D !important; }
.chugoku .title::after     { color: #EF821D; }
.chugoku .pref-links a { background-color: #EF821D; border: 1px solid #EF821D; color: #fff; }
.chugoku .pref-links a:hover { background-color: #EF821D; color: #fff; }

/* --- Shikoku --- */
.shikoku               { border-color: #EA6D93; }
.shikoku .title            { background-color: #FAE7EA; color: #EA6D93 !important; }
.shikoku .title::after     { color: #EA6D93; }
.shikoku .pref-links a { background-color: #EA6D93; border: 1px solid #EA6D93; color: #fff; }
.shikoku .pref-links a:hover { background-color: #EA6D93; color: #fff; }

/* --- Kyushu --- */
.kyushu               { border-color: #E84A20; }
.kyushu .title            { background-color: #F8ECE9; color: #E84A20 !important; }
.kyushu .title::after     { color: #EB6744; }
.kyushu .pref-links a { background-color: #EB6744; border: 1px solid #EB6744; color: #fff; }
.kyushu .pref-links a:hover { background-color: #EB6744; color: #fff; }

/* --- Okinawa --- */
/* ※ 元CSSでは枠線色・リンク背景色が未指定だったため、他地方に合わせて #f27aa2 を補completしています */
.okinawa               { border-color: #f27aa2; }
.okinawa .title            { background-color: #f27aa2; }   /* 文字色は共通の #fff */
.okinawa .title::after     { color: #f27aa2; }
.okinawa .pref-links a { background-color: #f27aa2; border: 1px solid #f27aa2; color: #fff; }
.okinawa .pref-links a:hover { background-color: #f27aa2; color: #fff; }

/* =========================================================
   REGION POSITIONS（地図上の配置）
   ========================================================= */
.hokkaido { top: 6%;     right: -2%; width: 20%; }
.tohoku   { top: 26%;    right: 2%;  width: 22%; }
.kanto    { bottom: 16%; right: 2%;  width: 22%; }
.chubu    { bottom: -4%; left: 51%;  width: 24%; }
.kinki    { top: 4%;     left: 36%;  width: 22%; }
.chugoku  { top: 30%;    left: 20%;  width: 22%; }
.shikoku  { bottom: -4%; left: 26%;  width: 22%; }
.kyushu   { bottom: 24%; left: 2%;   width: 22%; }
.okinawa  { top: 4%;     left: 2%;   width: 16%; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media screen and (max-width: 767px) {
  .japan-map-container{
    aspect-ratio: auto;
    height: auto;   
  }
  .kaito-map-section h2::before{
    width: 30px;
    height: 30px;
  }
  .region-box {
    position: relative;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    min-height: 90px;
    margin-bottom: 1em;
  }
  .japan-map-img { position: relative; margin-bottom: 1em;}
  .region-box .title { font-size: 15px; }
  .pref-links a  { font-size: 14px; }
}


/* =========================================================
   AKIYA WORRY SECTION（空き家のお悩みを解決）
   ========================================================= */

.kaito-worry-section {
  padding: 50px 20px;
  /* 背景：1枚画像 */
  background: url(../images/2026-top/wo__bg.jpg) no-repeat center top / cover;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN",
               "Hiragino Sans", Meiryo, sans-serif;
}

/* ---------- 見出し（map と同様に global h2 を打ち消し / アイコンなし） ---------- */
.kaito-worry-section h2 {
  margin: 0 0 10px !important;
  padding: 0 !important;
  background: none !important;
  background-color: transparent !important;
  color: #1F2A5E !important;
  font-size: 28px;            /* 虫眼鏡見出しと同じサイズ */
  font-weight: bold;
  line-height: 1.4;
  text-align: center;
}
.kaito-worry-section h2::after {
  content: none !important;
  display: none !important;
}

.kaito-worry-section .worry-lead {
  margin: 0 0 30px;
  font-size: 15px;
  line-height: 1.7;
  text-align: center;
  color: #555;
}

/* ---------- カードグリッド ---------- */
.worry-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));   /* 0 を許可してはみ出し防止 */
  gap: 16px;
  max-width: 1120px;
  margin: 0 auto;
}

/* ---------- カード（全体リンク） ---------- */
.worry-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;              /* はみ出し防止（…省略を効かせる） */
  padding: 24px 20px 48px;   /* 下は矢印スペース */
  background: #fff;
  border: 1px solid #d9e1ee;
  border-radius: 6px;
  color: inherit;
  text-decoration: none !important;
  transition: box-shadow .2s, transform .2s;
}
.worry-card:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, .1);
  transform: translateY(-2px);
}

/* アイコン（wo-0X.svg にグレー円が含まれている前提＝円は付けない） */
.worry-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.worry-icon img {
  width: 96px;
  height: 96px;
  object-fit: contain;
}

/* 本文 */
.worry-body {
  display: block;
  width: 100%;
}
.worry-body h3{
  margin-bottom: 0;
}
.worry-card .title {
  margin: 0 0 8px;
  padding: 0;
  background: none;
  font-size: 18px;
  font-weight: bold;
  color: #1F2A5E;
  text-align: center;
}
.worry-desc {
  display: block;
  font-size: 13px;
  line-height: 1.6;
  color: #666;
  text-align: left;
  white-space: nowrap;        /* PCは1行で…省略 */
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 右下の青い丸＋矢印 */
.worry-arrow {
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 26px;
  height: 26px;
  background: #2B5BC5;
  border-radius: 50%;
}
.worry-arrow::after {
  content: "\f054";           /* Font Awesome chevron-right */
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome;
  font-weight: 900;
  font-size: 12px;
  color: #fff;
  line-height: 1.0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* ---------- レスポンシブ（スマホ：横並びカード） ---------- */
@media screen and (max-width: 767px) {
  .Cta--blue-top .Flex .Item:nth-of-type(2){
    font-size: 0.95rem !important;
  }
  .worry-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .worry-card {
    flex-direction: row;
    align-items: center;
    padding: 16px;
  }
  .worry-icon {
    flex: 0 0 auto;
    margin: 0 14px 0 0;
  }
  .worry-icon img {
    width: 64px;
    height: 64px;
  }
  .worry-body {
    padding-right: 34px;      /* 矢印スペース */
  }
  .worry-desc {
    white-space: normal;      /* スマホは全文表示 */
    overflow: visible;
  }
  .worry-arrow {
    top: 16px;
    bottom: auto;
  }
  .worry-body h3{
    text-align: left;
    margin-bottom: .5em;
  }
}