/* =========================
  Home
========================= */

.h-home {
  /* これで「bg」と「card」を同じ場所に“重ねて”置ける */
  display: grid;
  grid-template-areas: "stack";
  margin-top: -44px;
}

#h__top_logo_header {
  display: none;
}

/* =========================
  Homeのグリッド画像一覧
========================= */


/* 背景画像：子要素の数だけ「縦カラム」が自動で増える */
.h-home__bg {

  /*仮*/


  /***/

  grid-area: stack;

  display: grid;
  grid-template-columns: repeat(2, 1fr);

  /* 白枠っぽく見せる：外側余白 & 画像間の余白 */
  /* padding: var(--grid_margin);
  gap: var(--grid_margin); */
}

/* ▼ グリッドの各セルを「必ず正方形」にする */
.h-home__bg>div {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

/* ▼ 画像をセルにきっちりフィット（比率維持） */
.h-home__bg img {

  width: 100%;
  height: 100vh;
  display: block;
  object-fit: cover;
  aspect-ratio: 4 / 5;
}

/* =========================
  Homeの中央エリア
========================= */

/* ヘッダー＋TOHAKUをまとめるラッパ */
.h-home__wrap {
  grid-area: stack;
  justify-self: center;

  /* ★ここがポイント：viewport基準で中央に見せる */
  align-self: start;
  margin-top: 50vh;
  transform: translateY(-50%);
}

/* =========================
  ナビ下コンテンツ
========================= */

/* TOHAKUエリア（水色） */
.h-home__inner {
  background-color: rgb(var(--main-color-rgb) / 0.85);
  height: 23vh;
  /* 画面の約1/3の高さ */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 90;
  max-width: 100%;
  margin-top: -3px;
  border-top: solid 5px var(--color-sub);
  border-bottom: solid 5px var(--color-sub);
  flex-wrap: wrap;
}

/* ロゴ画像エリア - 画像 */
.h-home__inner img {
  padding-top: 10px;
  width: 45%;
  min-width: 550px;
  height: auto;
  object-fit: contain;
  opacity: 1;
}

/* 中央ロゴ テキスト */
.h-logo_bottom_tx {
  width: 100%;
  text-align: center;
  margin-top: 14px;
  opacity: .3;
}

/* サブ テキスト */
.h-sub_tx {
  margin: 28px 0;
  width: 100%;
  font-size: var(--font-default-size);
  text-align: center;
  line-height: var(--font-default-size);
}

/* ボトム テキスト */
.h-bottom_tx {
  position: absolute;
  bottom: 14px;
  width: 100%;
  text-align: center;
  padding: 0 28px;
  color: black;
  font-size: 12px;

}


/* =========================
  Homeのヘッダー v1 : 現在使用していない
  id="h__header"をつける
========================= */

/* 中央カラムだけ黄色 */
.h-home__header__inner {
  height: var(--home-header-height);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* ナビは今まで通り */
.h-home__header-nav__list {
  display: flex;
  gap: calc(100% / 6);
  padding: 0 24px;
  margin: 0;
  list-style: none;
  font-size: 18px;
  justify-content: center;
}

.h-home__header-nav__item {
  white-space: nowrap;
}

/* ナビ */
.h-home__header-nav__list {
  display: flex;
  justify-content: center;
  align-items: center;

  flex-wrap: nowrap;
  /* ← 折り返せるように */
  gap: clamp(12px, 8vw, 200px);
  /* ← 安定するgap */

  padding: 0 clamp(12px, 3vw, 24px);
  margin: 0;
  list-style: none;
  font-size: clamp(14px, 1.8vw, 18px);
  /* ← 文字も自然に */
}

/* 項目 */
.h-home__header-nav__item {
  white-space: nowrap;
}