/**
 * トップページ Hero 3分割レイアウト（動画 + 右パネル）
 * index.html の home-hero--split 用
 */

/* Hero 3分割レイアウト */
.home-hero {
  max-width: 100%;
  background-color: #fff;
}

/* PC: ヒーローに最低高さを確保しつつ、初期表示でPRODUCTSが下に見えるよう max-height で制限 */
.home-hero--split .home-hero__inner {
  display: flex;
  gap: 16px;
  height: 100%;
  min-height: 700px;
  max-height: 100vh;
  padding: 16px;
  box-sizing: border-box;
}

/* 左側メインエリア（70%） */
.home-hero__main {
  flex: 0 0 calc(70% - 8px);
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  overflow: hidden;
}

/* 動画エリア（高さ制限で初期表示時にPRODUCTSが見える） */
.home-hero__video-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* 動画はフロー内に置き、上端を表示。flex 内の video では object-position が逆になる環境があるため bottom を指定 */
.home-hero__video-wrap > video {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: bottom center;
}

/* 動画下部 薄い黒グラデーション + キャプション（参考: GLM） */
.home-hero__overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 24px 28px;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.75) 0%,
    rgba(0, 0, 0, 0.4) 70%,
    rgba(0, 0, 0, 0.12) 90%,
    transparent 100%
  );
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.home-hero__message {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.95);
  line-height: 1.6;
  margin: 0;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8), 0 2px 6px rgba(0, 0, 0, 0.5);
}

/* 既存ボタン踏襲（オーバーレイ・パネル共通） */
.home-hero__overlay .button,
.home-hero__panel__content .button {
  display: flex;
}

.home-hero__overlay .button .button__type,
.home-hero__panel__content .button .button__type {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 25px;
  background-color: transparent;
  color: #fff;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  padding: 10px 24px;
  font-size: 14px;
  transition: all 0.3s ease;
}

.home-hero__overlay .button .button__type:hover,
.home-hero__panel__content .button .button__type:hover {
  background-color: rgba(255, 255, 255, 0.15);
  border-color: #fff;
}

.home-hero__overlay .button__label,
.home-hero__panel__content .button__label {
  display: inline-block;
}

/* 右側パネルエリア（30%）参考: GLM 角丸・余白 */
.home-hero__aside {
  flex: 0 0 calc(30% - 8px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.home-hero__panel {
  flex: 1;
  position: relative;
  min-height: 200px;
  border-radius: 12px;
  overflow: hidden;
  background-color: #1E628D;
}

.home-hero__panel__img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* パネル内コンテンツは overlay と同じ設定 */
.home-hero__panel__content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 24px 28px;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.75) 0%,
    rgba(0, 0, 0, 0.4) 40%,
    transparent 100%
  );
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.home-hero__panel__content .button {
  display: flex;
  flex-shrink: 0;
}

.home-hero__panel--top {
  border: none;
}

/* PC/SP出し分け */
@media only screen and (min-width: 768px) {
  .util-pc-hidden {
    display: none !important;
  }
}

@media only screen and (max-width: 767.98px) {
  .util-sp-hidden {
    display: none !important;
  }

  /* SP: 縦積みレイアウト */
  .home-hero--split .home-hero__inner {
    flex-direction: column;
    padding: 12px;
    gap: 12px;
    max-height: none;
  }

  .home-hero__main {
    flex: 1 1 auto;
    min-height: 55vh;
  }

  .home-hero__aside {
    flex: 0 0 auto;
    flex-direction: column;
    min-height: 0;
    gap: 12px;
  }

  /* SP: 縦並び・横長の長方形 */
  .home-hero__panel {
    flex: 0 0 auto;
    width: 100%;
    min-height: 0;
    height: 130px;
  }

  @supports (aspect-ratio: 2 / 1) {
    .home-hero__panel {
      height: auto;
      aspect-ratio: 3 / 2;
    }
  }

  .home-hero__panel__content {
    padding: 16px 14px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 12px;
  }

  .home-hero__panel--top {
    border: none;
  }

  /* SP: オーバーレイは相対配置（動画の下にブロックとして表示） */
  .home-hero__video-wrap {
    display: flex;
    flex-direction: column;
  }

  .home-hero__video-wrap video {
    min-height: auto;
  }

  .home-hero__overlay {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    padding: 24px 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    background: rgba(0, 0, 0, 0.85);
    flex-shrink: 0;
  }

  .home-hero__message {
    font-size: 15px;
  }

  .home-hero__overlay .button .button__type,
  .home-hero__panel__content .button .button__type {
    padding: 8px 20px;
    font-size: 13px;
  }
}