/* home.css — トップページ専用の見た目（うちなーまっぷ）。
   ⚠ トップでだけ読み込まれる（index.php が view=home の時に <link> を出す）。
   ⚠ 共通の見た目は style.css が持つ。ここに書くのは**トップにしか出ない部品**だけ。

   本番（tyuraumi.info）はトップ専用CSSを分離できておらず、実体は全ページ共通の
   original.css（76KB）の中に混ざっている。ここへ移したのは、そのうち
   **ローカルの header.php / footer.php / sidebar.php / list.php / content.php / parts.php で
   1度も使われていないクラス**だけ（2026-08-21 に grep で実測）。
   .container / .section / .button / .text-link も実測0件だったのでここへ入れた。
   逆に style.css が既に持っているもの（.card 系・.db-block 系・.content-h2/h3・
   .eyebrow の詳細ページ用・.ic・.meta-date・.cta-wrap）は二重定義になるので入れていない。

   ⚠ .hero の背景画像はここに書かない。site_settings.hero_image から functions.php が
      組み立てる（1920/1280/768 × avif/webp/jpg）。ここが持つのは版面と文字の大きさだけ。
   ⚠ 幅いっぱいの帯にするための main の解除は style.css の main.has-hero を使う
      （home.php が <main id="main" class="has-hero"> を出す）。
   ⚠ 区切り幅だけは style.css（720/640）と揃えず、本番と同じ 1024/767/640/420 を使う。
      ここで畳むのはトップの版面（ヒーロー2段組・3列グリッド）だけで、共通ヘッダーとは
      別の器のため。揃えると 3列のカードが 760px 幅で潰れる。 */

/* ── うちなーまっぷの色と間隔 ───────────────────────────
   style.css の :root は4CMS共通の5色しか持たないので、本番 original.css の :root から
   **このファイルで実際に使う分だけ**を持ってくる。 */
:root {
  --umap-primary: #2D5836;
  --umap-primary-dark: #1F4D2E;
  --umap-accent: #3DA866;
  --umap-bg-alt: #EBEDE0;
  --umap-surface: #FFFFFF;
  --umap-text-sub: #666666;
  --umap-text-muted: #888888;
  --umap-warm: #E58A00;
  --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-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-md: 8px;
  --umap-radius-lg: 14px;
  --umap-radius-pill: 999px;
  --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;
}

/* ── 版面 ───────────────────────────────────────────── */
.container { width: 1000px; max-width: calc(100% - 32px); margin-inline: auto; }

/* ⚠ 節の地色は書かない。body の背景は site_settings.color_bg が正本で、同じ色を
   2箇所に持つと DB を変えた時に節だけ取り残される（本番は background を持っている）。 */
.section { position: relative; padding: var(--umap-space-8) 0; }

/* 節の区切り飾り（本番と同じSVG。色は #2D5836 が焼き込まれた素材そのもの）。 */
.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;
}

/* 本番は素の p に margin-top:0 を当てている。4CMS共通の style.css は当てていないので、
   トップの器の中だけ同じ状態にする（ブラウザ既定の 1em ぶん行が下がるのを防ぐ）。 */
.hero__inner p, .about-panel p, .living-area-card p, .category-outlook__group p { margin-top: 0; }

/* ── 節の見出し（eyebrow ＋ 見出し） ────────────────────
   ⚠ .eyebrow は style.css では `.page-hero .eyebrow`（記事上部の帯用）としてしか
      定義されていない。トップに .page-hero は出ないので二重定義にならない。
   ⚠ .simple-heading はファイル末尾に置く（本番と同じ位置）。詳細度が並ぶ相手が居るので、
      前に持ってくると勝敗が入れ替わって見出しの余白が変わる。 */
.section-heading { margin-bottom: var(--umap-space-5); text-align: center; }
.section-heading--left { text-align: left; }
.section-heading--primary .eyebrow { color: var(--umap-primary); }
.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; }
/* 見出し自身が上下の余白を持つので、器側の余白は足さない（本番と同じ理由）。 */
.section-heading:has(> .content-h2) { margin-bottom: 0; }
.section-heading:first-child > .content-h2 { margin-top: 0; padding-top: 0; border-top: 0; }

/* ── ボタン ─────────────────────────────────────────── */
.button, .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:hover, .button:focus-visible, .text-link:hover, .text-link:focus-visible {
  color: #fff; background: var(--umap-primary-dark); transform: translateY(-1px);
}
/* ⚠ 本番は .text-link に width と左右マージンを無条件で掛けており、カテゴリ展望の
      「要望を送る」だけがカード内で二重に内側へ寄っていた。2026-08-21 CEO 判断で外し、
      他のボタンと同じ幅に揃えた。 */
.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--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; }

/* ── メインビジュアル ─────────────────────────────────
   ⛔ background / image-set はここに書かない（functions.php が site_settings.hero_image から生成）。 */
.hero, .top-hero { min-height: 620px; }
.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 { color: rgba(255, 255, 255, 0.86); }
/* style.css は素の h1 に大きさを持たない（h1.page-title だけ）。ヒーローの見出しはここが正本。 */
.hero__title { max-width: 780px; margin: 0 0 var(--umap-space-4); font-size: 3.4rem; font-weight: 700; line-height: 1.35; color: #fff; letter-spacing: 0; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.16); }
.hero__copy { max-width: 720px; margin: 0 0 var(--umap-space-5); color: rgba(255, 255, 255, 0.92); font-size: 1.05rem; }
.hero__actions { 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:hover, .hero__area-link:focus-visible { color: #fff; background: var(--umap-accent); transform: translateY(-2px); }

/* ── サイト紹介パネル ─────────────────────────────────── */
.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-panel__lead { max-width: 32em; line-height: 1.85; }
.about__visual {
  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; max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain; animation: ramoon-float 3.5s ease-in-out infinite; will-change: transform;
}
@keyframes ramoon-float {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-8px) rotate(2deg); }
}
@media (prefers-reduced-motion: reduce) { .about__mascot { animation: none; } }

/* ── 特徴の3枚 ───────────────────────────────────────── */
.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: 0; }
.feature-item__title { color: var(--umap-primary-dark); font-weight: 700; }
.feature-item__text { color: var(--umap-text-sub); font-size: 0.92rem; }

/* ── エリアカード・カテゴリ展望（同じ器） ───────────────── */
.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);
}
/* カード内の見出し。位置はカードの内側余白で決まるので、simple-heading が持つ上下の
   マージン（1.75rem / 0.75rem）は打ち消す。⚠ margin-bottom だけ上書きすると**上に
   1.75rem の余白が残る**（2026-08-21 CEO 指摘）。 */
.category-outlook__group h3, .living-area-card h3 { display: flex; gap: var(--umap-space-2); align-items: center; }
/* 同上。要素名つきで simple-heading に勝たせる。 */
.category-outlook__group h3.simple-heading { margin: 0 0 var(--umap-space-3); }

.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__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 { 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 .ic { width: 18px; height: 18px; }

/* エリアカード。左の色帯だけがエリアごとに変わる。
   ⚠ 本番はメガメニュー（.mega-menu__area--{地域}）とコンマ結合で宣言を共有しているが、
      ローカルにメガメニューは無いのでカード側だけを持ってきた。
      haebaru / yonabaru は本番でも色指定を持たず、下の既定色（--umap-primary）のままになる。 */
.living-area-card { display: flex; flex-direction: column; gap: var(--umap-space-3); border-left: 5px solid var(--umap-primary); }
.living-area-card--naha       { border-left-color: var(--umap-ocean); }
.living-area-card--tomigusuku { border-left-color: var(--umap-purple); }
.living-area-card--nishihara  { border-left-color: var(--umap-teal); }
.living-area-card--yaese      { border-left-color: var(--umap-warm); }
.living-area-card--nanjo      { border-left-color: var(--umap-sunset); }
/* 「公開中」バッジを外したので、見出しだけが入る器になった（2026-08-21 CEO 指示）。
   横並びの指定はもう要らない。 */
/* ⚠ `.living-area-card__head h3` は **1クラス＋1要素＝詳細度 0,1,1** で、
      ファイル末尾の `h3.simple-heading`（これも 0,1,1）と同点。後に書いたほうが勝つので、
      要素名を足して 0,2,1 にしないと margin が効かない。
      2026-08-21 に `margin: 0` を書いたが同点で負けており、見出しの上に 28px 残っていた
      （2026-08-23 CEO 指摘で発覚）。 */
.living-area-card__head h3.simple-heading { margin: 0; }
.living-area-card p { margin: 0; }
/* 説明文の行数が違うと、グリッドが高さを揃えるぶん**2行のカードだけ文末〜ボタンの余白が
   広がる**（2026-08-21 実測＝12px と 36px。本番も同じ状態だった）。3行ぶんを下限にして揃える。
   ⚠ line-height を明示するのは、下限の 4.5em（1.5×3行）が font-size 依存で狂わないようにするため。
      1.5 は今の実測値（line-height:normal ＝ 16px の行が 24px）と同じなので見た目は変わらない。
   ⚠ 1カラムになる幅では下限を外す。説明が短く収まるので空白が増えるだけになる。 */
.living-area-card p { line-height: 1.5; }
@media (min-width: 768px) { .living-area-card p { min-height: 4.5em; } }
.living-area-card__button { width: 100%; margin-top: auto; }

/* ── 状態バッジ・予定リスト ───────────────────────────── */
.status-badge {
  display: inline-flex; align-items: center; gap: 0.35em;
  width: fit-content; min-height: 28px; padding: 4px 10px;
  border-radius: var(--umap-radius-pill);
  color: var(--umap-primary-dark); font-size: 0.76rem; font-weight: 700; line-height: 1.35;
  white-space: nowrap; background: var(--umap-bg-alt);
}
.status-badge--live { color: #fff; background: var(--umap-accent); }
.status-list { list-style: disc; padding-left: 1.2em; margin: 0; }
.status-list li { margin-bottom: 4px; line-height: 1.7; }
.status-list a { color: var(--umap-primary-dark); text-decoration: underline; font-weight: 600; }
.status-list a:hover, .status-list a:focus-visible { color: var(--umap-primary); }
.status-list li > span { color: var(--umap-text-muted); }

/* ── 狭い画面 ─────────────────────────────────────────
   区切り幅は本番と同じ 1024 / 767 / 640 / 420（冒頭の注記を参照）。 */
@media (max-width: 1024px) {
  .hero__inner { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .hero, .hero__inner, .top-hero { min-height: auto; }
  .hero__inner { grid-template-columns: 1fr; gap: var(--umap-space-4); padding: var(--umap-space-7) 0; }
  .hero__title { font-size: 2rem; }
  .hero__panel { width: 100%; }
  .about-panel__top, .feature-list, .category-outlook, .living-area-grid { grid-template-columns: 1fr; gap: var(--umap-space-4); }
  .section { padding: var(--umap-space-7) 0; }
  .section-heading, .section-heading--left { text-align: left; }
}
@media (max-width: 640px) {
  .about-panel__lead { max-width: 100%; }
}
@media (max-width: 420px) {
  .container { width: min(100% - 24px, 1000px); }
  .button, .text-link { width: 100%; }
  .hero__area-link { min-height: 52px; }
}

/* ── 見出しの打ち消し（ファイル末尾に置く） ────────────────
   見出しを「文字の大きさだけ」で階層表現する。style.css の .content-h2 / .content-h3 が持つ
   地色・左罫を打ち消す。
   ⚠ 要素名を付けた形にすること（.simple-heading 単独だと .content-h2 と詳細度が並ぶ）。
   ⚠ 置き場所は末尾。.living-area-card__head h3 などと詳細度が同じなので、本番と同じく
      **後に書いたほうを勝たせる**ことで見出しの余白が本番と一致する。 */
h2.simple-heading, h3.simple-heading {
  background: none; background-image: none; border: 0; padding: 0;
  color: #111827; font-weight: 700; line-height: 1.4;
}
h2.simple-heading { font-size: 1.5rem;  margin: 2rem 0 1rem; }
h3.simple-heading { font-size: 1.25rem; margin: 1.75rem 0 0.75rem; }