@charset "utf-8";
/* =====================
  TOPページ
===================== */
.grid {
  display: grid;
  /* grid-template-columns: repeat(3, 1fr); */
  grid-template-columns: minmax(180px, 1fr) 1fr 1fr;
  grid-template-rows: auto auto auto auto auto;
  grid-template-areas:
    "a a e"
    "b c f"
    "b c f"
    "d d h"
    "i j k";
  gap: 0; /* 余白はここだけ */
}

/* --- エリア指定 --- */
.a {
  grid-area: a;
}
.b {
  grid-area: b;
}
.c {
  grid-area: c;
  height: 100%;
}
.d {
  grid-area: d;
}
.e {
  grid-area: e;
}
.f {
  grid-area: f;
}
/* .g {
  grid-area: g;
} */
.h {
  grid-area: h;
}
.i {
  grid-area: i;
}
.j {
  grid-area: j;
}
.k {
  grid-area: k;
}

/* --- 画像 --- */
.img {
  overflow: hidden;
}

.img img,
.c img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

.c img {
  overflow: hidden;
}

.b {
  padding: 8px;
  line-height: 1.6;
}
.d {
  padding: 0.5rem 2rem 0 1rem;
  line-height: 1.6;
}

@media (max-width: 600px) {
  .grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "a"
      "b"
      "c"
      "d"
      "e"
      "f"
      /* "g" */
      "h"
      "i"
      "j"
      "k";
  }
  .c,
  .d,
  .e,
  .f,
  /* .g, */
  .h,
  .i,
  .j,
  .k {
    margin: 1rem auto;
  }
  .f {
    text-align: center;
  }
}

/* =========================
   ナビをコンテンツとして表示する
========================= */
#main-nav {
  margin-bottom: 24px;
}

#main-nav .sp-menu-header {
  display: none;
}

/* =========================
 マウスホバーで画像の上に説明文を表示 
========================= */
.img-wrap {
  position: relative;
  display: inline-block;
  overflow: hidden;
}
.img-wrap img {
  display: block;
  width: 100%;
  height: auto;
  transition: filter 0.5s ease;
}
.mainvisual-caption {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: var(--font-size-md);
  opacity: 0; /* 初期は非表示 */
  transition: opacity 0.5s ease;
}
.img-wrap:hover img {
  filter: brightness(60%); /* 画像を暗くする */
}
.img-wrap:hover .mainvisual-caption {
  opacity: 1; /* 文字を浮かせる */
}