/* ============================================================
   01 / Reset & Foundation
   ============================================================ */

:root {
  --umap-primary: #2D5836;
  --umap-primary-dark: #1F4D2E;
  --umap-primary-light: #4A7556;
  --umap-accent: #3DA866;
  --umap-accent-light: #7CCC55;
  --umap-bg: #F5F3E8;
  --umap-bg-alt: #EBEDE0;
  --umap-surface: #FFFFFF;
  --umap-text: #333333;
  --umap-text-sub: #666666;
  --umap-text-muted: #888888;
  --umap-warm: #E58A00;
  --umap-warm-text: #FFFFFF;
  --umap-warm-bg: #FFF4E0;
  --umap-warm-border: #B86F00;
  --umap-purple: #6B4E8E;
  --umap-ocean: #3B7AB8;
  --umap-pink: #C65A86;
  --umap-teal: #287C78;
  --umap-brown: #8B6A3F;
  --umap-sunset: #D66A3A;
  --umap-border: #DDD9C7;
  --umap-border-light: #EEEBD9;
  --umap-link: #2D5836;
  --umap-link-hover: #1F4D2E;
  --umap-shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --umap-shadow-md: 0 8px 24px rgba(0,0,0,0.12);
  --umap-radius-sm: 4px;
  --umap-radius-md: 8px;
  --umap-radius-lg: 14px;
  --umap-radius-pill: 999px;
  --umap-space-1: 4px;
  --umap-space-2: 8px;
  --umap-space-3: 12px;
  --umap-space-4: 16px;
  --umap-space-5: 24px;
  --umap-space-6: 32px;
  --umap-space-7: 48px;
  --umap-space-8: 64px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  scroll-behavior: smooth;
  text-size-adjust: 100%;
  /* 横スクロール完全封じ: clip は overflow:hidden と違いスクロールコンテナを作らないので
     固定要素・sticky 要素の挙動を壊さない。未対応ブラウザは hidden にフォールバック。 */
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  margin: 0;
  color: var(--umap-text);
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", "Yu Gothic", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0;
  /* html と同じ：clip でスクロールコンテナを作らず sticky を壊さない */
  overflow-x: hidden;
  overflow-x: clip;
  background: #ffffff;
}

/* 背景装飾は使わない。 */
body::before {
  content: none;
}

main {
  display: block;
}

h1,
h2,
h3,
p,
dl,
dd,
ol,
ul,
figure {
  margin-top: 0;
}

h1,
h2,
h3 {
  color: var(--umap-primary-dark);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0;
}

h1 {
  font-size: 3.4rem;
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.12rem;
}

p {
  margin-bottom: var(--umap-space-4);
}

a {
  color: var(--umap-link);
  text-decoration: underline;
  text-decoration-color: rgba(45, 88, 54, 0.35);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.2em;
  transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease, text-decoration-thickness 0.25s ease;
}

a:hover,
a:focus-visible {
  color: var(--umap-link-hover);
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
}

img,
svg,
iframe {
  max-width: 100%;
}

.umap-icon {
  flex: 0 0 auto;
  width: 1.12em;
  height: 1.12em;
  color: currentColor;
  vertical-align: -0.16em;
}

iframe {
  border: 0;
}

button,
input,
select,
textarea {
  font: inherit;
  letter-spacing: inherit;
}

table {
  width: 100%;
  border-collapse: collapse;
}

*:focus-visible {
  outline: 3px solid var(--umap-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ============================================================
   02 / Layout Primitives
   ============================================================ */

.container {
  width: 1100px;
  max-width: calc(100% - 32px);
  margin-inline: auto;
}

.skip-link {
  position: absolute;
  top: -48px;
  left: 16px;
  z-index: 100;
  padding: 8px 12px;
  border-radius: var(--umap-radius-sm);
  color: #fff;
  background: var(--umap-primary-dark);
}

.skip-link:focus {
  top: 14px;
}

/* ============================================================
   03 / Header & Brand
   ============================================================ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  color: var(--umap-primary-dark);
  background: rgba(255, 255, 255, 0.95);
  border-bottom: 1px solid rgba(45, 88, 54, 0.12);
  box-shadow: var(--umap-shadow-sm);
  backdrop-filter: blur(8px);
}

.site-header__inner {
  /* 記事コンテナと同じ幅・パディングで左右端を揃える */
  width: 1100px;
  max-width: calc(100% - 32px);
  min-height: 72px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: var(--umap-space-4);
}

.site-header__brand {
  flex: 0 0 auto;
  order: 1;
}

/* HTML 順は brand → button → nav だが、見た目は brand → nav → button にしたい。
   order で並び順を入れ替え、nav に margin-left: auto で右寄せ集約。 */
.site-header__nav {
  order: 2;
  margin-left: auto;
}

/* ハンバーガー：PC・モバイル共に画面右上に常時表示 */
.menu-button {
  order: 3;
  display: grid;
  width: 48px;
  height: 48px;
  margin-left: var(--umap-space-3);
  border-radius: var(--umap-radius-pill);
  color: #fff;
  background: var(--umap-primary);
  border: 1px solid rgba(45, 88, 54, 0.28);
  box-shadow: var(--umap-shadow-sm);
  place-items: center;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.menu-button__text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* PC ：インライン desktop nav は普通に表示。mobile-nav はドロワーとしてヘッダー下に絶対配置。 */
@media (min-width: 821px) {
  /* PC では body スクロールロックを無効化（ドロワーが背景に被さるだけ） */
  body.has-mobile-nav {
    position: static;
    overflow: visible;
  }

  /* PC では mobile-nav はドロワーとしてヘッダー下に全幅展開 */
  .mobile-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 119;
    margin: 0;
    padding: 0;
    background: var(--umap-bg);
    border-bottom: 1px solid var(--umap-border-light);
    box-shadow: 0 16px 32px rgba(45, 88, 54, 0.12);
    min-height: 0;
  }
  .mobile-nav.is-open {
    display: block;
  }
  /* brand バー & primary-link はヘッダー（インライン nav）に既にあるため、ドロワーでは非表示 */
  .mobile-nav__bar,
  .mobile-nav__primary-link {
    display: none !important;
  }
  /* body を container 幅に集約・エリア / カテゴリの 2 カラム */
  .mobile-nav__body {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr) !important;
    align-items: start !important;
    gap: var(--umap-space-6) !important;
    width: 1100px !important;
    max-width: calc(100% - 32px) !important;
    margin: 0 auto !important;
    padding: var(--umap-space-6) 0 !important;
  }
  .mobile-nav__section {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }
  /* アコーディオン無効・常時展開 */
  .mobile-nav__toggle {
    pointer-events: none;
    cursor: default;
    background: none !important;
    border: 0 !important;
    border-bottom: 0 !important;
    padding: 0 !important;
    margin-bottom: var(--umap-space-3) !important;
    min-height: auto !important;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--umap-primary-dark);
    display: flex;
    justify-content: flex-start !important;
  }
  .mobile-nav__toggle span[aria-hidden="true"] {
    display: none !important;
  }
  .mobile-nav__panel,
  .mobile-nav__panel[hidden] {
    display: block !important;
    padding: var(--umap-space-4) !important;
    border: 1px solid var(--umap-border);
    border-radius: var(--umap-radius-md);
    background: var(--umap-surface);
    box-shadow: var(--umap-shadow-sm);
  }
  /* カテゴリの 5 グループを 4 + 1 のメガメニュー grid に整列 */
  .mobile-nav__panel#mobile-categories {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: start;
    gap: var(--umap-space-4) !important;
  }
  .mobile-nav__panel#mobile-categories > .mobile-nav__category {
    justify-content: flex-start !important;
    gap: var(--umap-space-2);
    min-width: 0;
    height: auto;
  }
  .mobile-nav__category strong {
    font-size: 0.95rem;
    white-space: nowrap;
  }
  .mobile-nav__panel#mobile-categories > .mobile-nav__category:nth-child(5) {
    grid-column: 1 / -1;
  }
  /* すべて見るリンク：横並びにせず下端に配置 */
  .mobile-nav__all-link {
    display: inline-flex;
    align-items: center;
    justify-self: flex-start;
    grid-column: 1 / -1;
    width: 100%;
    padding-left: 0 !important;
    margin-top: var(--umap-space-3) !important;
  }
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--umap-space-3);
  color: var(--umap-primary-dark);
  text-decoration: none;
}

.brand:hover,
.brand:focus-visible {
  color: var(--umap-primary-dark);
}

.brand__mark {
  position: relative;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: var(--umap-radius-pill);
  background:
    radial-gradient(circle at 50% 52%, #fff 0 52%, transparent 53%),
    radial-gradient(circle at 72% 28%, rgba(124, 204, 85, 0.32) 0 12%, transparent 13%),
    radial-gradient(circle at 27% 72%, rgba(255, 214, 122, 0.50) 0 13%, transparent 14%),
    var(--umap-bg);
  box-shadow: 0 2px 10px rgba(31, 77, 46, 0.18);
}

.brand__mark img {
  width: 48px;
  height: 48px;
  display: block;
  border-radius: var(--umap-radius-pill);
}

.brand__text {
  display: block;
}

.brand__name {
  display: block;
  font-size: 1.05rem;
  letter-spacing: 0;
}

.brand__tagline {
  display: block;
  color: var(--umap-text-sub);
  font-size: 0.72rem;
  line-height: 1.4;
  letter-spacing: 0;
}

/* ============================================================
   04 / Site Nav, Mega Menu & Mobile Nav
   ============================================================ */

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--umap-space-2);
}

.site-nav__item {
  position: relative;
}

.site-nav__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35em;
  min-height: 44px;
  padding: 8px 14px;
  border: 0;
  border-radius: var(--umap-radius-pill);
  color: var(--umap-primary-dark);
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  background: transparent;
  cursor: pointer;
}

.site-nav__link:hover,
.site-nav__link:focus-visible {
  color: #fff;
  background: var(--umap-primary);
}

.site-nav__item.is-open > .site-nav__link {
  color: #fff;
  background: var(--umap-primary);
}

.mega-menu {
  position: fixed;
  top: 72px;
  left: 50%;
  z-index: 110;
  width: 900px;
  max-width: calc(100vw - 32px);
  padding-top: var(--umap-space-3);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 8px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}

.site-nav__item--mega:hover .mega-menu,
.site-nav__item--mega:focus-within .mega-menu,
.site-nav__item.is-open .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.mega-menu__inner {
  padding: var(--umap-space-5);
  border: 1px solid rgba(45, 88, 54, 0.14);
  border-radius: var(--umap-radius-md);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: var(--umap-shadow-md);
}

.mega-menu__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--umap-space-4);
  margin-bottom: var(--umap-space-4);
}

.mega-menu__eyebrow {
  margin: 0;
  color: var(--umap-primary);
  font-size: 0.84rem;
  font-weight: 700;
}

.mega-menu__all-link,
.mobile-nav__all-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  min-height: 44px;
  color: var(--umap-primary-dark);
  font-weight: 700;
  text-decoration: none;
}

.mega-menu__area-grid,
.mega-menu__category-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--umap-space-3);
}

.mega-menu__area,
.mega-menu__category {
  min-width: 0;
  padding: var(--umap-space-4);
  border: 1px solid var(--umap-border);
  border-left: 5px solid var(--umap-primary);
  border-radius: var(--umap-radius-md);
  color: var(--umap-primary-dark);
  text-decoration: none;
  background: var(--umap-surface);
}

.mega-menu__area {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--umap-space-3);
}

.mega-menu__area--naha,
.living-area-card--naha {
  border-left-color: var(--umap-ocean);
}

.mega-menu__area--tomigusuku,
.living-area-card--tomigusuku {
  border-left-color: var(--umap-purple);
}

.mega-menu__area--nishihara,
.living-area-card--nishihara {
  border-left-color: var(--umap-teal);
}

.mega-menu__area--yaese,
.living-area-card--yaese {
  border-left-color: var(--umap-warm);
}

.mega-menu__area--nanjo,
.living-area-card--nanjo {
  border-left-color: var(--umap-sunset);
}

.mega-menu__category {
  border-left-color: var(--umap-primary);
}

.mega-menu__category h2 {
  display: flex;
  align-items: center;
  gap: var(--umap-space-2);
  margin-bottom: var(--umap-space-2);
  font-size: 1rem;
}

.mega-menu__category h2 span {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--umap-radius-pill);
  color: #fff;
  background: var(--umap-primary);
}

.mega-menu__category ul {
  display: grid;
  gap: var(--umap-space-1);
  margin: 0;
  padding-left: 1.2em;
  color: var(--umap-text-sub);
  font-size: 0.9rem;
}

.mega-menu__category--blue {
  border-left-color: var(--umap-ocean);
}

.mega-menu__category--pink {
  border-left-color: var(--umap-pink);
}

.mega-menu__category--warm {
  border-left-color: var(--umap-warm);
}

.mega-menu__category--brown {
  border-left-color: var(--umap-brown);
}

.mobile-nav {
  display: none;
}

/* メニュー開時のスクロール固定。
   position: fixed + top: -scrollY 方式で背景スクロールを完全停止しつつ
   表示中の位置を保持する（単純な overflow:hidden だとスクロール位置が 0 にリセットされ
   ヘッダーが「ズレた」ように見える挙動が出る）。 */
.has-mobile-nav {
  position: fixed;
  inset-inline: 0;
  width: 100%;
  overflow: hidden;
}

.mobile-nav__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--umap-space-4);
  padding: var(--umap-space-4);
  border-bottom: 1px solid var(--umap-border-light);
}

.mobile-nav__body {
  display: grid;
  gap: var(--umap-space-4);
  width: min(100%, 640px);
  margin-inline: auto;
  padding: var(--umap-space-5) var(--umap-space-4) var(--umap-space-7);
}

.mobile-nav__close,
.mobile-nav__toggle,
.mobile-nav__primary-link {
  min-height: 44px;
  border-radius: var(--umap-radius-md);
  font-weight: 700;
}

.mobile-nav__close {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--umap-border);
  color: var(--umap-primary-dark);
  background: var(--umap-surface);
  cursor: pointer;
}

.mobile-nav__close span {
  font-size: 1.8rem;
  line-height: 1;
}

.mobile-nav__section {
  border: 1px solid var(--umap-border);
  border-radius: var(--umap-radius-md);
  background: var(--umap-surface);
  overflow: hidden;
}

.mobile-nav__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 13px 16px;
  border: 0;
  color: var(--umap-primary-dark);
  background: var(--umap-bg-alt);
  cursor: pointer;
}

.mobile-nav__panel {
  display: grid;
  gap: var(--umap-space-2);
  padding: var(--umap-space-3);
}

.mobile-nav__row,
.mobile-nav__category,
.mobile-nav__primary-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--umap-space-3);
  min-height: 48px;
  padding: 11px 13px;
  border-radius: var(--umap-radius-md);
  color: var(--umap-primary-dark);
  text-decoration: none;
  background: var(--umap-bg);
}

.mobile-nav__category {
  align-items: flex-start;
  flex-direction: column;
  border-left: 5px solid var(--umap-primary);
}

.mobile-nav__category strong {
  display: inline-flex;
  align-items: center;
  gap: var(--umap-space-2);
}

.mobile-nav__category span {
  color: var(--umap-text-sub);
  font-size: 0.9rem;
}

.mobile-nav__category--blue {
  border-left-color: var(--umap-ocean);
}

.mobile-nav__category--pink {
  border-left-color: var(--umap-pink);
}

.mobile-nav__category--warm {
  border-left-color: var(--umap-warm);
}

.mobile-nav__category--brown {
  border-left-color: var(--umap-brown);
}

.mobile-nav__primary-link {
  justify-content: center;
  color: #fff;
  background: var(--umap-primary);
}

/* ============================================================
   05 / Breadcrumb
   ============================================================ */

.breadcrumb {
  background: #ffffff;
  border-bottom: 1px solid var(--umap-border-light);
}

.breadcrumb__inner {
  width: 1100px;
  max-width: calc(100% - 32px);
  margin-inline: auto;
  padding: 12px 0;
}

.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  color: var(--umap-text-sub);
  font-size: 0.86rem;
  list-style: none;
}

.breadcrumb__item:not(:last-child)::after {
  content: ">";
  margin-left: 8px;
  color: var(--umap-text-muted);
}

.breadcrumb__item:last-child a {
  color: var(--umap-text-sub);
  text-decoration: none;
  pointer-events: none;
}

/* ============================================================
   06 / Top Hero & Page Hero
   ============================================================ */

.hero {
  min-height: 620px;
  color: #fff;
  background:
    linear-gradient(90deg, rgba(31, 77, 46, 0.86), rgba(31, 77, 46, 0.58) 46%, rgba(245, 243, 232, 0.24)),
    url("https://images.unsplash.com/photo-1629975012468-989edbbabf3d?auto=format&fit=crop&w=1920&q=80") center / cover no-repeat;
}

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(280px, 0.55fr);
  gap: var(--umap-space-6);
  align-items: center;
  min-height: 620px;
  padding: var(--umap-space-8) 0 var(--umap-space-7);
}

.hero__label,
.eyebrow {
  margin: 0 0 var(--umap-space-3);
  color: var(--umap-accent);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0;
}

.hero__label {
  color: rgba(255, 255, 255, 0.86);
}

.hero__title {
  max-width: 780px;
  margin-bottom: var(--umap-space-4);
  color: #fff;
  letter-spacing: 0;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.16);
}

.hero__copy {
  max-width: 720px;
  margin-bottom: var(--umap-space-5);
  color: rgba(255, 255, 255, 0.92);
  font-size: 1.05rem;
}

.hero__actions,
.filter-bar,
.internal-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--umap-space-3);
}

.hero__panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--umap-space-3);
  padding: var(--umap-space-4);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--umap-radius-lg);
  background: rgba(255, 255, 255, 0.18);
  box-shadow: var(--umap-shadow-md);
  backdrop-filter: blur(10px);
}

.hero__area-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--umap-space-2);
  min-height: 58px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: var(--umap-radius-md);
  color: var(--umap-primary-dark);
  font-weight: 700;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.90);
}

.hero__area-link strong {
  line-height: 1.25;
}

.hero__area-link--pending {
  background: rgba(255, 255, 255, 0.72);
}

.hero__area-link:hover,
.hero__area-link:focus-visible {
  color: #fff;
  background: var(--umap-accent);
  transform: translateY(-2px);
}

.hero__area-link--pending:hover,
.hero__area-link--pending:focus-visible {
  color: var(--umap-primary-dark);
  background: rgba(255, 255, 255, 0.72);
  transform: none;
}

/* ============================================================
   07 / Buttons, Filters & Section Headings
   ============================================================ */

.button,
.filter-bar a,
.internal-links a,
.text-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  background: var(--umap-primary);
  box-shadow: var(--umap-shadow-sm);
}

.button--light {
  color: var(--umap-primary-dark);
  border-color: rgba(45, 88, 54, 0.22);
  background: #fff;
}

.button--light:hover,
.button--light:focus-visible {
  color: #fff;
  background: var(--umap-primary);
}

/* B 案：暖色プライマリ CTA（左ボタン） */
.button--warm {
  color: #fff;
  background: var(--umap-warm);
  border-color: transparent;
  box-shadow: 0 2px 6px rgba(229, 138, 0, 0.28);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.button--warm:hover,
.button--warm:focus-visible {
  color: #fff;
  background: #C97900;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(229, 138, 0, 0.36);
}

.button:hover,
.button:focus-visible,
.filter-bar a:hover,
.filter-bar a:focus-visible,
.internal-links a:hover,
.internal-links a:focus-visible,
.text-link:hover,
.text-link:focus-visible {
  color: #fff;
  background: var(--umap-primary-dark);
  transform: translateY(-1px);
}

.button--ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.48);
  background: rgba(255, 255, 255, 0.12);
  box-shadow: none;
}

.button--ghost:hover,
.button--ghost:focus-visible {
  color: var(--umap-primary-dark);
  background: #fff;
}

.section {
  position: relative;
  padding: var(--umap-space-8) 0;
  background: var(--umap-bg);
}

.section::after {
  content: "";
  display: block;
  width: 176px;
  height: 20px;
  margin: var(--umap-space-7) auto calc(var(--umap-space-7) * -0.65);
  opacity: 0.48;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='176' height='20' viewBox='0 0 176 20' fill='none'%3E%3Cpath d='M4 10H172' stroke='%232D5836' stroke-opacity='.32'/%3E%3Cg stroke='%232D5836' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M34 5v10M29 10h10'/%3E%3Cpath d='M61 5v10M56 10h10'/%3E%3Cpath d='M88 5v10M83 10h10'/%3E%3Cpath d='M115 5v10M110 10h10'/%3E%3Cpath d='M142 5v10M137 10h10'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}

.section--tight {
  padding-top: var(--umap-space-6);
}

.section-heading {
  margin-bottom: var(--umap-space-5);
  text-align: center;
}

.section-heading--left {
  text-align: left;
}

.section-title {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.72em;
  margin-bottom: 0;
  color: var(--umap-primary-dark);
  font-size: 2rem;
  letter-spacing: 0;
}

/* 改行＋横幅を絞った見出し（About タイトル等） */
.section-title--narrow {
  font-size: 1.7rem;
  line-height: 1.4;
  text-align: left;
  white-space: normal;
}

/* — Mobile 640px — */
@media (max-width: 640px) {
  .section-title--narrow {
    font-size: 1.4rem;
  }
}

/* About 説明文：横幅を絞って読みやすく（1 行 30 文字前後）*/
.about-panel__lead {
  max-width: 32em;
  line-height: 1.85;
}

/* — Mobile 640px — */
@media (max-width: 640px) {
  .about-panel__lead {
    max-width: 100%;
  }
}

.section-title::before,
.section-title::after {
  content: "";
  width: 0.64em;
  height: 1.8em;
  border-color: var(--umap-primary);
  border-style: solid;
}

.section-title::before {
  border-width: 2px 0 2px 2px;
}

.section-title::after {
  border-width: 2px 2px 2px 0;
}

/* セクション見出しはメインカラーに統一。 */
.section-heading--primary .section-title::before,
.section-heading--primary .section-title::after,
.section-heading--purple .section-title::before,
.section-heading--purple .section-title::after,
.section-heading--warm .section-title::before,
.section-heading--warm .section-title::after,
.section-heading--ocean .section-title::before,
.section-heading--ocean .section-title::after {
  border-color: var(--umap-primary);
}

.section-heading--primary .eyebrow,
.section-heading--purple .eyebrow,
.section-heading--warm .eyebrow,
.section-heading--ocean .eyebrow {
  color: var(--umap-primary);
}

.handwritten {
  margin: 0 0 var(--umap-space-2);
  color: var(--umap-accent);
  font-family: "Caveat", "Brush Script MT", cursive;
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
}

.page-hero .handwritten,
.handwritten {
  color: var(--umap-primary);
}

.page-hero {
  position: relative;
  overflow: hidden;
  background: var(--umap-bg-alt);
  border-bottom: 1px solid var(--umap-border-light);
}

.page-hero__inner {
  position: relative;
  z-index: 1;
  padding: var(--umap-space-7) 0;
}

.page-hero h1 {
  max-width: 880px;
  margin-bottom: var(--umap-space-3);
}

.page-hero p:not(.eyebrow):not(.handwritten):not(.byline) {
  max-width: 760px;
  color: var(--umap-text-sub);
}

/* データベース・コラムページのヒーローは、タイトル＋説明文を container 幅いっぱいに広げる */
.page-hero--facility h1,
.page-hero--facility p:not(.eyebrow):not(.handwritten):not(.byline),
.page-hero--column h1,
.page-hero--column p:not(.eyebrow):not(.handwritten):not(.byline) {
  max-width: none;
}

/* eyebrow のバッジ表示：エリア（塗り） + カテゴリ（線取り） */
.eyebrow--badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.eyebrow-tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
}

.eyebrow-tag--filled {
  background: var(--umap-accent);
  color: #fff;
}

.eyebrow-tag--outline {
  background: #fff;
  color: var(--umap-accent);
  border: 1.5px solid var(--umap-accent);
}

a.eyebrow-tag {
  text-decoration: none;
}

.top-hero {
  min-height: 620px;
}

.top-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(280px, 0.55fr);
  gap: var(--umap-space-6);
  align-items: center;
  min-height: 620px;
  padding: var(--umap-space-8) 0 var(--umap-space-7);
}

.hero-actions,
.hero-panel {
  display: contents;
}

/* ============================================================
   08 / About Panel, Feature List & Animations
   ============================================================ */

.about-panel {
  display: grid;
  gap: var(--umap-space-6);
}

.about-panel__top {
  display: grid;
  /* PC: 右側のビジュアルを横長にできるよう右カラムを広めに、その分左テキストを狭く */
  grid-template-columns: minmax(0, 1fr) minmax(420px, 520px);
  gap: var(--umap-space-7);
  align-items: center;
}

.about-panel__text {
  /* 右が広くなった分、左の本文幅も狭めて読みやすく */
  max-width: 520px;
}

.about__visual {
  /* flex に切替: img の max-height: 100% が grid より確実に効く */
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  padding: var(--umap-space-4);
  border: 1px solid var(--umap-border);
  border-radius: var(--umap-radius-lg);
  background: var(--umap-surface);
  box-shadow: var(--umap-shadow-md);
  overflow: hidden;
}

.about__mascot {
  display: block;
  /* 枠の高さ（4:3 - padding）を超えない */
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 0;
  animation: ramoon-float 3.5s ease-in-out infinite;
  will-change: transform;
}

.about__features,
.feature-list {
  width: 100%;
}

.feature-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--umap-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.feature-item {
  display: grid;
  justify-items: center;
  gap: var(--umap-space-2);
  min-height: 190px;
  padding: var(--umap-space-5);
  border: 1px solid var(--umap-border);
  border-radius: var(--umap-radius-md);
  background: var(--umap-surface);
  box-shadow: var(--umap-shadow-sm);
  text-align: center;
}

.feature-item__icon {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--umap-radius-pill);
  color: #fff;
  background: var(--umap-primary);
}

.feature-item--source .feature-item__icon {
  background: var(--umap-ocean);
}

.feature-item--education .feature-item__icon {
  background: var(--umap-purple);
}

.feature-item__title,
.feature-item__text {
  margin-bottom: 0;
}

.feature-item__title {
  color: var(--umap-primary-dark);
  font-weight: 700;
}

.feature-item__text {
  color: var(--umap-text-sub);
  font-size: 0.92rem;
}

@keyframes ramoon-float {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-8px) rotate(2deg); }
}

/* — Reduced Motion — */
@media (prefers-reduced-motion: reduce) {
  .about__mascot {
    animation: none;
  }
}

/* ============================================================
   09 / Cards, Tags & Content Grids
   ============================================================ */

.category-tiles,
.card-grid,
.article-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--umap-space-5);
}

.category-tiles a,
.facility-card,
.info-card,
.side-box,
.ad-slot,
.disclosure,
.link-panel,
.article-card {
  border: 1px solid var(--umap-border);
  border-radius: var(--umap-radius-lg);
  background: var(--umap-surface);
  box-shadow: var(--umap-shadow-sm);
}

.category-tiles a,
.article-card,
.link-panel a {
  text-decoration: none;
}

.category-tiles a {
  display: block;
  min-height: 132px;
  padding: var(--umap-space-5);
  position: relative;
  overflow: hidden;
}

.category-tiles a::before,
.article-card::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 7px;
  height: 100%;
  background: var(--umap-accent);
}

.category-tiles a:hover,
.category-tiles a:focus-visible,
.facility-card:hover,
.facility-card:focus-within,
.article-card:hover,
.article-card:focus-within {
  box-shadow: var(--umap-shadow-md);
  transform: translateY(-2px);
}

.category-tiles strong {
  display: block;
  margin-bottom: var(--umap-space-2);
  color: var(--umap-primary-dark);
  font-size: 1.18rem;
  letter-spacing: 0;
}

.category-tiles span {
  color: var(--umap-text-sub);
  font-size: 0.94rem;
}

.facility-card {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--umap-text);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.25s ease;
}

.facility-card:hover,
.facility-card:focus-visible {
  color: var(--umap-text);
  text-decoration: none;
}

.facility-card__body {
  flex: 1;
  padding: var(--umap-space-5);
}

.facility-card__meta,
.meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--umap-space-2);
  margin-bottom: var(--umap-space-3);
}

.facility-card__title {
  margin-bottom: var(--umap-space-3);
  font-size: 1.12rem;
}

.facility-card__title {
  color: var(--umap-primary-dark);
  text-decoration: none;
}

.facility-card__link,
.text-link {
  width: calc(100% - var(--umap-space-5) * 2);
  margin: 0 var(--umap-space-5) var(--umap-space-5);
}

.facility-card__link {
  margin-top: auto;
}

.tag,
.pill,
.ad-label,
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: var(--umap-radius-pill);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.35;
  background: var(--umap-primary);
}

.status-badge {
  width: fit-content;
  color: var(--umap-primary-dark);
  font-size: 0.76rem;
  white-space: nowrap;
  background: var(--umap-bg-alt);
}

.status-badge--live {
  color: #fff;
  background: var(--umap-accent);
}

.status-badge--soon {
  color: var(--umap-warm-text);
  border: 1px solid var(--umap-warm-border);
  background: var(--umap-warm);
}

.status-badge--neutral {
  color: var(--umap-text-sub);
  background: var(--umap-border-light);
}

.tag--soft,
.pill--soft {
  color: var(--umap-primary-dark);
  background: var(--umap-bg-alt);
}

.ad-label {
  color: var(--umap-warm-text);
  border: 1px solid var(--umap-warm-border);
  background: var(--umap-warm);
}

.compact-list,
.info-grid {
  margin: 0;
}

.compact-list div {
  display: grid;
  grid-template-columns: 5.5em minmax(0, 1fr);
  gap: var(--umap-space-3);
  padding: 9px 0;
  border-bottom: 1px solid var(--umap-border-light);
}

.info-grid div {
  display: grid;
  /* 「公式ホームページ」(8 文字) が改行されない幅 */
  grid-template-columns: 9em minmax(0, 1fr);
  gap: var(--umap-space-3);
  padding: 9px 0;
  border-bottom: 1px solid var(--umap-border-light);
}

.info-grid dt {
  white-space: nowrap;
}

.compact-list dt,
.info-grid dt {
  color: var(--umap-text-sub);
  font-weight: 700;
}

.compact-list dd,
.info-grid dd {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
}

.info-grid__value {
  flex: 1 1 auto;
  min-width: 0;
}

/* 値の右に控えめに表示する出典・確認日（「公式 5/29」） */
.info-grid__source {
  flex: 0 0 auto;
  color: var(--umap-text-muted);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(31, 77, 46, 0.06);
  white-space: nowrap;
}

/* 公式 HP リンク */
.info-grid__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--umap-primary-dark);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.info-grid__link:hover {
  color: var(--umap-primary);
  border-color: transparent;
}

.info-grid__link svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

/* URL 直リンク形式：長い URL も改行で破綻させない */
.info-grid__link--url {
  align-items: flex-start;
  border-bottom: 0;
}

.info-grid__link--url span {
  word-break: break-all;
  overflow-wrap: anywhere;
  font-weight: 600;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}

.info-grid__value--muted {
  color: var(--umap-text-muted);
  font-size: 0.92rem;
}

/* 施設の自己紹介文（ヒーロー直下）。container 幅いっぱいに広げる */
.facility-description {
  margin: var(--umap-space-4) 0 0;
  max-width: none;
  padding: 16px 20px;
  border-radius: var(--umap-radius-md);
  background: rgba(255, 255, 255, 0.55);
  border-left: 4px solid var(--umap-primary);
  color: var(--umap-text);
  font-size: 0.98rem;
  line-height: 1.85;
  letter-spacing: 0;
}

.source-note {
  margin: var(--umap-space-3) 0 var(--umap-space-6);
  padding: 14px 16px;
  border-left: 3px solid var(--umap-primary);
  background: rgba(31, 77, 46, 0.04);
  color: var(--umap-text-sub);
  font-size: 0.88rem;
  line-height: 1.75;
  border-radius: 0 var(--umap-radius-sm) var(--umap-radius-sm) 0;
}

.source-note strong {
  color: var(--umap-primary-dark);
}

.card-note,
.byline,
.site-footer small {
  color: var(--umap-text-muted);
  font-size: 0.86rem;
}

/* byline: 公開日／更新日を区切り線付きの個別チップで並べる */
.byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  margin-top: var(--umap-space-3);
}

.byline__item {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 4px 18px;
  position: relative;
}

.byline__item:first-child {
  padding-left: 0;
}

.byline__item + .byline__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 1em;
  background: currentColor;
  opacity: 0.35;
}

.byline__label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--umap-primary-dark);
  letter-spacing: 0.06em;
}

.byline__value {
  color: var(--umap-text-sub);
  font-weight: 600;
}

.split-section {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--umap-space-5);
}

.link-panel {
  display: grid;
  gap: var(--umap-space-2);
  padding: var(--umap-space-4);
}

.link-panel a,
.link-panel span {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 12px 14px;
  border-radius: var(--umap-radius-md);
  color: var(--umap-primary-dark);
  background: var(--umap-bg);
}

.link-panel a:hover,
.link-panel a:focus-visible {
  color: #fff;
  background: var(--umap-primary);
}

.category-outlook,
.living-area-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--umap-space-5);
}

.category-outlook__group,
.living-area-card {
  min-width: 0;
  padding: var(--umap-space-5);
  border: 1px solid var(--umap-border);
  border-radius: var(--umap-radius-md);
  background: var(--umap-surface);
  box-shadow: var(--umap-shadow-sm);
}

.category-outlook__group {
  border-top: 5px solid var(--umap-accent);
}

.category-outlook__group--blue {
  border-top-color: var(--umap-ocean);
}

.category-outlook__group--pink {
  border-top-color: var(--umap-pink);
}

.category-outlook__group--warm {
  border-top-color: var(--umap-warm);
}

.category-outlook__group--brown {
  border-top-color: var(--umap-brown);
}

.category-outlook__group--feedback {
  border-top-color: var(--umap-teal);
}

.category-outlook__group h3,
.living-area-card h3 {
  display: flex;
  gap: var(--umap-space-2);
  align-items: center;
  margin-bottom: var(--umap-space-3);
  font-size: 1.08rem;
}

.category-outlook__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--umap-radius-pill);
  color: #fff;
  background: var(--umap-primary);
}

.category-outlook__group--blue .category-outlook__icon {
  background: var(--umap-ocean);
}

.category-outlook__group--pink .category-outlook__icon {
  background: var(--umap-pink);
}

.category-outlook__group--warm .category-outlook__icon {
  color: #fff;
  background: var(--umap-warm);
}

.category-outlook__group--brown .category-outlook__icon {
  background: var(--umap-brown);
}

.category-outlook__group--feedback .category-outlook__icon {
  background: var(--umap-teal);
}

.category-outlook__icon .umap-icon {
  width: 18px;
  height: 18px;
}

.status-list {
  display: grid;
  gap: var(--umap-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.status-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--umap-space-3);
  padding-bottom: var(--umap-space-2);
  border-bottom: 1px solid var(--umap-border-light);
}

.status-list li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.status-list span:first-child {
  min-width: 0;
}

.living-area-card {
  display: flex;
  flex-direction: column;
  gap: var(--umap-space-3);
  border-left: 5px solid var(--umap-primary);
}

.living-area-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--umap-space-3);
}

.living-area-card__head h3,
.living-area-card p {
  margin-bottom: 0;
}

.living-area-card__count {
  color: var(--umap-primary-dark);
  font-weight: 700;
}

.living-area-card__button {
  width: 100%;
  margin-top: auto;
}

.living-area-card__button--muted {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--umap-border);
  border-radius: 6px;
  color: var(--umap-text-sub);
  font-weight: 700;
  background: var(--umap-border-light);
}

.filter-bar {
  margin-bottom: var(--umap-space-5);
}

.internal-links {
  margin-top: var(--umap-space-6);
  padding-top: var(--umap-space-5);
  border-top: 1px solid var(--umap-border-light);
}

.empty-state {
  padding: var(--umap-space-6);
  border: 1px dashed var(--umap-border);
  border-radius: var(--umap-radius-lg);
  color: var(--umap-text-sub);
  text-align: center;
  background: rgba(255, 255, 255, 0.62);
}

/* ============================================================
   10 / Detail Page Layout, Maps & Tables
   ============================================================ */

.detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--umap-space-6);
  padding: 0;
}

/* 記事・施設詳細ページのセクション余白をヒーロー（48px）と揃える */
.section:has(> .container > .detail-layout),
.section:has(> .detail-layout) {
  padding-block: var(--umap-space-7);
}

.detail-main,
.detail-side {
  min-width: 0;
}

.detail-main {
  display: grid;
  gap: var(--umap-space-6);
}

.info-card {
  padding: var(--umap-space-6);
}

.map-frame {
  overflow: hidden;
  border: 1px solid var(--umap-border);
  border-radius: var(--umap-radius-lg);
  background: var(--umap-surface);
  box-shadow: var(--umap-shadow-sm);
}

.map-frame iframe {
  display: block;
  width: 100%;
  height: 420px;
  min-height: 420px;
}

.detail-side {
  display: flex;
  flex-direction: column;
  gap: var(--umap-space-4);
}

.side-box,
.ad-slot,
.disclosure {
  padding: var(--umap-space-5);
}

.side-box h2,
.ad-slot p,
.disclosure p {
  margin-bottom: var(--umap-space-3);
}

.link-list {
  display: grid;
  gap: var(--umap-space-2);
  margin: 0;
  padding-left: 1.25em;
}

.comparison-table-wrap,
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--umap-border);
  border-radius: var(--umap-radius-lg);
  background: var(--umap-surface);
  box-shadow: var(--umap-shadow-sm);
  /* スクロール可能を視覚的に分かりやすく：右端にうっすらシャドウ */
  background-image:
    linear-gradient(to right, var(--umap-surface), transparent 4%),
    linear-gradient(to left, var(--umap-surface), transparent 4%);
  background-attachment: local, local;
}

.comparison-table,
.table-scroll table {
  min-width: 780px;
  width: 100%;
}

.comparison-table th,
.comparison-table td,
.table-scroll th,
.table-scroll td {
  border-bottom: 1px solid var(--umap-border-light);
  text-align: left;
  vertical-align: top;
}

.table-scroll th,
.table-scroll td {
  padding: 12px 14px;
  white-space: nowrap;
}

.comparison-table th,
.comparison-table td {
  padding: 14px 16px;
}

.comparison-table thead th,
.table-scroll thead th {
  color: #fff;
  background: var(--umap-primary);
}

.comparison-table tbody th,
.table-scroll tbody th {
  color: var(--umap-primary-dark);
  background: rgba(235, 237, 224, 0.45);
}

.table-scroll tbody th {
  white-space: nowrap;
}

/* 会社概要表の複合セル装飾 */
.table-scroll td {
  white-space: normal;
}

.company-table__ruby {
  color: var(--umap-text-sub);
  font-size: 0.86rem;
  margin-left: 6px;
}

.company-table__group-title {
  margin: 0 0 4px;
  font-weight: 700;
  color: var(--umap-primary-dark);
}

.company-table__group-title + p {
  margin: 0 0 var(--umap-space-3);
  line-height: 1.7;
}

.company-table__note {
  margin: 8px 0 0;
  color: var(--umap-text-sub);
  font-size: 0.86rem;
  line-height: 1.7;
}

.company-table__list {
  margin: 0;
  padding-left: 1.2em;
  line-height: 1.85;
}

.company-table__list li {
  margin-bottom: 2px;
}

/* ============================================================
   11 / Article Body & Utility Pages
   ============================================================ */

.article-body {
  /* 表が入る記事ページ（運営者情報・プライバシー）で見出しと表が狭く見えていたのを解消。
     コンテナ幅いっぱいまで使う。本文段落は段落側で読み幅を制御。 */
  align-self: start;
  max-width: none;
  padding: var(--umap-space-7) 0 var(--umap-space-8);
}

/* コラム（記事）ページは detail-layout 内で article-body を使うため
   detail-layout 親の section 余白で十分。内側 article-body は padding 0。 */
.detail-layout .article-body {
  padding: 0;
}

.article-body > p,
.article-body > ul,
.article-body > ol {
  /* 段落・箇条書きは可読幅にとどめる */
  max-width: 860px;
  font-size: 1.04rem;
}

/* セクション見出しと直前要素の余白を確保 */
.article-body h2 {
  margin-top: var(--umap-space-7);
  padding-top: var(--umap-space-3);
  border-top: 1px solid var(--umap-border-light);
}

.article-body h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.article-body .card-grid {
  margin-top: var(--umap-space-5);
}

.article-card {
  position: relative;
  padding: var(--umap-space-5);
  color: var(--umap-primary-dark);
  text-decoration: none;
}

.article-card:hover,
.article-card:focus-visible {
  color: var(--umap-primary-dark);
}

.meta-band {
  display: flex;
  flex-wrap: wrap;
  gap: var(--umap-space-2);
  max-width: 860px;
  margin: var(--umap-space-4) 0 0;
  padding: var(--umap-space-3);
  border: 1px solid var(--umap-border-light);
  border-radius: var(--umap-radius-md);
  color: var(--umap-text-sub);
  font-size: 0.88rem;
  background: rgba(255, 255, 255, 0.72);
}

.meta-band span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
}

.page-404 {
  min-height: 68vh;
  display: grid;
  align-items: center;
  background:
    radial-gradient(circle at 20% 24%, rgba(124, 204, 85, 0.24), transparent 26%),
    linear-gradient(135deg, var(--umap-bg), var(--umap-bg));
}

.not-found {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: var(--umap-space-6);
  align-items: center;
  padding: var(--umap-space-8) 0;
}

.not-found__mascot {
  width: 128px;
  height: 128px;
  border-radius: var(--umap-radius-pill);
  background: #fff;
  box-shadow: var(--umap-shadow-md);
}

/* ============================================================
   12 / Footer & Late Nav Enhancements
   ============================================================ */

.site-footer {
  margin-top: 0;
  color: var(--umap-text);
  background: #ffffff;
  border-top: 1px solid var(--umap-border);
}

/* メガメニュー内：データありカテゴリはリンク化、未整備は dim 表示 */
.mega-menu__category ul li a {
  color: var(--umap-primary-dark);
  text-decoration: none;
  font-weight: 700;
  display: inline-block;
  padding: 2px 0;
  border-bottom: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.mega-menu__category ul li a:hover {
  color: var(--umap-primary);
  border-bottom-color: currentColor;
}

.mega-menu__category-pending {
  color: var(--umap-text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
}

.mega-menu__pending-label {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.06);
  color: var(--umap-text-muted);
  letter-spacing: 0.04em;
}

/* モバイルナビのカテゴリ項目（折返しチップ風） */
.mobile-nav__category-items {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.mobile-nav__category-item {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--umap-primary-dark);
  background: var(--umap-bg);
  text-decoration: none;
  border: 1px solid var(--umap-border-light);
}

.mobile-nav__category-item:hover,
.mobile-nav__category-item:focus-visible {
  background: var(--umap-primary);
  color: #fff;
}

.mobile-nav__category-item--pending {
  color: var(--umap-text-muted);
  background: transparent;
  border-style: dashed;
  cursor: default;
}

.mobile-nav__category-item--pending:hover {
  background: transparent;
  color: var(--umap-text-muted);
}

/* フッター下部：copyright と法務リンクを 1 行で */
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding-top: var(--umap-space-5);
  margin-top: var(--umap-space-5);
  border-top: 1px solid var(--umap-border-light);
  grid-column: 1 / -1; /* footer__inner が grid のため横幅全部使う */
}

/* copyright と法務リンクの高さを完全一致させる */
.site-footer__copyright {
  margin: 0;
  padding: 0;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--umap-text-sub);
}

.site-footer__legal {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 18px;
  margin-left: auto; /* 右寄せ */
}

.site-footer__legal a {
  color: var(--umap-text-sub);
  font-size: 0.85rem;
  line-height: 1.6;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.site-footer__legal a:hover {
  color: var(--umap-primary-dark);
  border-bottom-color: currentColor;
}

.site-footer__inner {
  width: 1100px;
  max-width: calc(100% - 32px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1.1fr 1.25fr 0.9fr;
  gap: var(--umap-space-6);
  padding: var(--umap-space-7) 0 var(--umap-space-5);
}

.site-footer__title {
  margin-bottom: var(--umap-space-3);
  color: var(--umap-primary-dark);
  font-size: 1rem;
  letter-spacing: 0;
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--umap-space-2);
  margin: var(--umap-space-3) 0 0;
  padding: 0;
  list-style: none;
}

.site-footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 6px 10px;
  border-radius: var(--umap-radius-pill);
  color: var(--umap-primary-dark);
  text-decoration: none;
  background: rgba(255, 255, 255, 0.62);
}

.site-footer__contact {
  display: inline-flex;
  align-items: center;
  gap: var(--umap-space-2);
}

/* フッター クイックリンク（縦並び・控えめなアンダーライン） */
.site-footer__quick {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}

.site-footer__quick li {
  line-height: 1.6;
}

.site-footer__quick a {
  display: inline-block;
  color: var(--umap-primary-dark);
  text-decoration: none;
  font-size: 0.92rem;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: border-color 0.15s ease;
}

.site-footer__quick a:hover {
  border-bottom-color: currentColor;
}

.site-footer__contact .umap-icon,
.site-footer__categories .umap-icon {
  color: var(--umap-primary);
}

.site-footer__section--categories {
  grid-column: 1 / -1;
}

.site-footer__categories {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--umap-space-3);
}

.site-footer__categories span {
  display: inline-flex;
  align-items: center;
  gap: var(--umap-space-2);
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid rgba(45, 88, 54, 0.14);
  border-radius: var(--umap-radius-md);
  color: var(--umap-primary-dark);
  font-weight: 700;
  background: rgba(255, 255, 255, 0.58);
}

/* ============================================================
   20 / Responsive (Media Queries)
   ============================================================ */

/* — Desktop 1280px — */
@media (min-width: 1280px) {
  .category-tiles,
  .article-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* — Tablet 1024px — */
@media (max-width: 1024px) {
  .hero__inner,
  .top-hero__inner,
  .detail-layout {
    grid-template-columns: 1fr;
  }

  .card-grid,
  .category-tiles,
  .article-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  .site-footer__categories {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .detail-side {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-footer__inner {
    grid-template-columns: 1fr 1fr;
  }
}

/* — Mobile 767px — */
@media (max-width: 767px) {
  body {
    font-size: 16px;
  }

  h1 {
    font-size: 2rem;
  }

  h2 {
    font-size: 1.45rem;
  }

  .site-header__inner {
    min-height: 64px;
  }

  .brand__mark {
    width: 48px;
    height: 48px;
  }

  .brand__mark img {
    width: 42px;
    height: 42px;
  }

  /* スマホでもサイト名は出す。タグラインだけは横幅節約のため非表示。 */
  .brand__text {
    display: inline-flex;
    flex-direction: column;
    min-width: 0;
    flex: 0 1 auto;
  }

  .brand__name {
    font-size: 1.05rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .brand__tagline {
    display: none;
  }

  /* ハンバーガーボタンの押し出しを保つ */
  .site-header__brand {
    min-width: 0;
    flex: 1 1 auto;
  }

  /* モバイル：ハンバーガー表示・インライン desktop nav は非表示 */
  .site-nav--desktop {
    display: none;
  }

  /* モバイル：nav 不在のため button を margin-left: auto で右寄せ */
  .menu-button {
    margin-left: auto;
  }

  /* モバイル：ドロワーをフルスクリーン化 */
  .site-header__nav {
    display: none;
    position: fixed;
    inset: 0;
    top: 0;
    z-index: 120;
    width: 100%;
    max-width: 100vw;
    height: 100vh;
    height: 100dvh;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    background: var(--umap-bg);
    box-shadow: none;
    border: 0;
  }

  .site-header__nav.is-open {
    display: block;
  }

  .mobile-nav {
    display: block;
    min-height: 100vh;
  }

  .mobile-nav__brand .brand__text {
    display: block;
  }

  .about-panel__top,
  .feature-list {
    grid-template-columns: 1fr;
  }

  .breadcrumb__inner {
    overflow-x: auto;
  }

  .breadcrumb__list {
    flex-wrap: nowrap;
    white-space: nowrap;
  }

  .hero,
  .hero__inner,
  .top-hero,
  .top-hero__inner {
    min-height: auto;
  }

  .hero__inner,
  .top-hero__inner {
    padding: var(--umap-space-7) 0;
  }

  .card-grid,
  .category-tiles,
  .category-outlook,
  .living-area-grid,
  .article-grid,
  .split-section,
  .detail-side,
  .site-footer__inner,
  .hero__inner,
  .top-hero__inner {
    grid-template-columns: 1fr;
    gap: var(--umap-space-4);
  }

  .hero__panel {
    width: 100%;
  }

  .site-footer__categories {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-footer__bottom {
    justify-content: flex-start;
  }

  .site-footer__legal {
    margin-left: 0;
    width: 100%;
  }

  .section {
    padding: var(--umap-space-7) 0;
  }

  .section-heading,
  .section-heading--left {
    text-align: left;
  }

  .section-title {
    justify-content: flex-start;
    font-size: 1.4rem;
    letter-spacing: 0;
  }

  .handwritten {
    font-size: 2rem;
  }

  .section-title::before,
  .section-title::after {
    height: 1.55em;
  }

  .compact-list div,
  .info-grid div {
    grid-template-columns: 1fr;
    gap: var(--umap-space-1);
  }

  .info-card,
  .side-box,
  .ad-slot,
  .disclosure {
    padding: var(--umap-space-4);
  }

  .map-frame iframe {
    height: 360px;
    min-height: 360px;
  }

  .not-found {
    grid-template-columns: 1fr;
    gap: var(--umap-space-4);
  }
}

/* — Mobile 420px — */
@media (max-width: 420px) {
  .container,
  .breadcrumb__inner,
  .site-footer__inner {
    width: min(100% - 24px, 1100px);
  }

  .button,
  .filter-bar a,
  .internal-links a,
  .text-link {
    width: 100%;
  }

  .hero__area-link {
    min-height: 52px;
  }

  .map-frame iframe {
    height: 280px;
    min-height: 280px;
  }

  .site-footer__categories {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   13 / Related Facilities & Ad Slots
   ============================================================ */

/* =========================================================
   近い条件の施設（フルワイド・フッターウィジェット風）
   ========================================================= */

.related-facilities {
  /* 上の .section との白い隙間を撤去。section の padding-bottom と関連施設の padding-top
     だけで自然な余白になる。border-top で視覚的な区切りも入れている。 */
  margin-top: 0;
  padding: var(--umap-space-7) 0 var(--umap-space-8);
  background: var(--umap-bg-alt);
  border-top: 1px solid var(--umap-border-light);
  border-bottom: 1px solid var(--umap-border-light);
}

.related-facilities__inner {
  display: grid;
  gap: var(--umap-space-5);
}

.related-facilities__head {
  display: grid;
  gap: 6px;
  text-align: left;
}

/* セクションタイトル内の [ ] 装飾を左寄せ配置に */
.related-facilities__head .section-title {
  justify-content: flex-start;
}

.related-facilities__lead {
  margin: 0;
  color: var(--umap-text-sub);
  font-size: 0.95rem;
  line-height: 1.75;
}

.related-facilities__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--umap-space-4);
}

.related-facilities__more {
  justify-self: center;
  align-self: center;
  padding: 12px 22px;
  border-radius: var(--umap-radius-pill);
  color: var(--umap-primary-dark);
  background: var(--umap-surface);
  border: 1px solid var(--umap-primary);
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--umap-shadow-sm);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.related-facilities__more:hover {
  transform: translateY(-1px);
  box-shadow: var(--umap-shadow-md);
}

/* ===========================
   広告枠
   =========================== */

.page-hero--with-ad .page-hero__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--umap-space-6);
  align-items: start;
}

/* 広告の top を h1（施設名タイトル）の top に合わせる。
   handwritten + eyebrow + その margin の合計を margin-top で吸収する。 */
.page-hero--with-ad .page-hero__ad {
  margin-top: 5.5rem;
}

.page-hero--with-ad .page-hero__inner {
  /* container クラスの max-width は維持。左カラム内で全幅。 */
  width: auto;
  max-width: none;
  padding-inline: 0;
}

.page-hero__ad {
  display: flex;
  align-items: stretch;
}

/* IAB レクタングル 300x250。すべてのスロットでこのサイズを基準に枠を整える。
   admax 配信が 300x250 のため、コンテナを過大にせず広告とぴったり同じサイズで囲む。 */
.ad-slot--skyscraper,
.ad-slot--leaderboard,
.ad-slot--side {
  width: 300px;
  min-height: 250px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #ececec, #d8d8d8);
  border: 1px dashed rgba(0, 0, 0, 0.18);
  border-radius: var(--umap-radius-md);
  padding: 24px 0 0; /* 上に PR ラベル分の余白 */
  position: relative;
  overflow: hidden;
}

.ad-slot--leaderboard {
  margin: var(--umap-space-6) auto;
}

.ad-slot__body {
  width: 300px;
  min-height: 250px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ad-slot__label {
  position: absolute;
  top: 8px;
  left: 8px;
}

/* — Related facilities tablet 1024px — */
@media (max-width: 1024px) {
  .related-facilities__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* — Related facilities mobile 767px — */
@media (max-width: 767px) {
  .related-facilities {
    padding: var(--umap-space-6) 0 var(--umap-space-7);
  }

  .related-facilities__grid {
    grid-template-columns: 1fr;
  }

  .related-facilities__more {
    justify-self: stretch;
    text-align: center;
  }

  .page-hero--with-ad .page-hero__layout {
    grid-template-columns: 1fr;
  }

  .page-hero__ad {
    display: flex;
    justify-content: center;
    margin-top: var(--umap-space-5);
  }
}