/* ================================
 * Hero04（3分割カード）
 * ================================ */
 
.lc-hero--04 {
  position: relative;
  min-height: 800px;
}

.lc-hero04-wrap {
  position: relative;
  height: 800px;
}

.lc-hero04-grid {
  display: flex;
  height: 100%;
  position: relative;
  z-index: 1;
}

.lc-hero04-card,
.lc-hero04-card:hover,
.lc-hero04-card:focus,
.lc-hero04-card:active {
  color: #fff;
}

/* カード基本 */
.lc-hero04-card {
  position: relative;
  flex: 1 0 0%;
  flex-grow: 1;
  min-width: 0;
  overflow: hidden;
  display: block;
  color: #fff;
  text-decoration: none;
  transition: flex-grow 0.4s ease;
}

/* 背景画像 */
.lc-hero04-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.lc-hero04-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* オーバーレイ */
.lc-hero04-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0);
  z-index: 1;
  transition: background 0.3s ease;
  pointer-events: none;
}

/* テキスト */
.lc-hero04-body {
  position: relative;
  z-index: 2;
  padding: 40px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  text-align: center;
}

.lc-hero04-body::before {
  content: "";
  position: absolute;
  top: 72%;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.6) 0%,
    rgba(0,0,0,0.4) 50%,
    rgba(0,0,0,0.25) 75%,
    rgba(0,0,0,0) 100%
  );
  z-index: -1;
}

.lc-hero04-title {
  font-size: 24px;
  margin-bottom: 10px;
}

.lc-hero04-text {
  opacity: 0.9;
  transition: all 0.3s ease;
}

/* CTA */
.lc-hero04-cta {
  display: inline-block;
  margin-top: 15px;
  padding: 10px 18px;
  border: 1px solid #fff;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease;
}

/* ================================
 * ヒーロー中央テキスト
 * ================================ */

.lc-hero04-header {
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -40%);
  z-index: 10;
  text-align: center;
  color: #fff;
  width: 90%;
  max-width: 900px;
  pointer-events: none;
}

.lc-hero04-header::before {
  content: "";
  position: absolute;
  inset: -60px;
  background: radial-gradient(
    rgba(0,0,0,0.5) 0%,
    rgba(0,0,0,0.4) 40%,
    rgba(0,0,0,0) 70%
  );
  z-index: -1;
}

.lc-hero--04 .lc-hero-title {
  font-size: 2.3rem;
  text-shadow:
    0 2px 4px rgba(0,0,0,0.9),
    0 4px 12px rgba(0,0,0,0.7);
}

.lc-hero--04 .lc-hero-title,
.lc-hero--04 .lc-hero-lead {
  text-shadow:
    0 1px 2px rgba(0,0,0,0.8),
    0 2px 8px rgba(0,0,0,0.6);
}

/* ================================
 * ホバー挙動（横幅のみ伸縮）
 * ================================ */

/* ホバーしたカードだけ拡大 */
.lc-hero04-card:hover::after {
  background: rgba(0,0,0,0);
}

.lc-hero04-card:hover .lc-hero04-cta {
  opacity: 1;
  transform: translateY(0);
}

/* flex-grow の安定化（JS の挙動と完全一致） */
.lc-hero04-grid {
  justify-content: space-between; /* 2枚でも中央タイトルが動かないように */
}
.lc-hero04-card {
  transition: flex-grow 0.4s ease;
}

/* ======================================
   Hero04 タイプD：テキストボタン化
   ====================================== */

.lc-hero04-text-btn {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid #fff; /* ホバー前は枠だけ */
  border-radius: 0px;
  background-color: transparent;
  color: #fff;
  cursor: default;
  text-align: center;
  transition: all 0.3s ease; /* サイズ・背景・ボーダーがアニメーション */
}

/* ホバー後に大きく・塗りつぶし */
.lc-hero04-card:hover .lc-hero04-text-btn {
  background-color: var(--lc-accent-color);
  border: 1px solid #fff;
  transform: scale(1.1); /* 10%拡大 */
  cursor: pointer;
}

/* ボタン自体にホバーしても色は変えない */
.lc-hero04-card:hover .lc-hero04-text-btn:hover {
  background-color: var(--lc-accent-color);
  border-color: #fff;
}


@media screen and (max-width: 768px) {

  /* ヘッダーをカード上にブロック化 + 三角形背景（擬似要素使用） */
  .lc-hero04-header {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: auto;
    max-width: 95%;
    padding: 20px 16px;
    text-align: center;
    order: -1;
    margin: calc(16px + 60px) auto 16px auto;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    overflow: hidden; /* ★追加：はみ出し制御 */
  }

  /* 背景用の斜め三角形（修正版） */
.lc-hero04-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 140%;
  height: 120%;

  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,0) 30%,
      rgba(255,255,255,0.9) 80%,
      rgba(255,255,255,1) 100%
    ),
    repeating-linear-gradient(
      135deg,
      rgba(200,200,200,0.18) 0px,
      rgba(200,200,200,0.18) 4px,
      rgba(255,255,255,0.05) 4px,
      rgba(255,255,255,0.05) 10px
    );

  clip-path: polygon(
    100% 0,
    0 100%,
    100% 100%
  );

  z-index: 1;
  pointer-events: none;
}

  /* 文字は必ず前面に表示 */
  .lc-hero04-header .lc-hero-title,
  .lc-hero04-header .lc-hero-lead {
    display: block;
    width: 100%;
    margin: 0 0 30px 0;
    word-break: break-word;
    line-height: 1.5;
    color: #000;
    text-shadow: none;
    position: relative;
    z-index: 2;
  }

  /* カード縦並び・隙間ゼロ */
  .lc-hero04-wrap {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  .lc-hero04-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  .lc-hero04-card {
    width: 100%;
    flex-grow: unset;
    margin: 0;
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
  }

  /* カード黒フィルター */
  .lc-hero04-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(0,0,0,0.35);
    z-index: 1;
    pointer-events: none;
  }

  /* テキストはフィルターより前に表示 */
  .lc-hero04-body {
    position: relative;
    z-index: 2;
  }

  /* テキストボタン */
  .lc-hero04-text-btn {
    display: inline-block;
    width: auto;
  }

  /* 画像は親幅内に収める */
  .lc-hero04-bg img {
    width: 100%;
    max-width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* 横スクロール防止だけに特化 */
  html, body {
    overflow-x: hidden;
  }

  .lc-hero04-wrap,
  .lc-hero04-grid,
  .lc-hero04-card {
    box-sizing: border-box;
    max-width: 100%;
  }

}