/* =================================================
 * HERO タイプC
 * ================================================= */

.lc-hero--03 {
  background: var(--lc-accent-color);
  color: #fff;
  overflow: hidden;
}

.lc-hero03-inner {
  display: flex;
  min-height: 800px;
  position: relative;
}

/* =========================
 * 左：テキスト（矩形＋グリッド＋フェード）
 * ========================= */

.lc-hero03-text {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0px 64px 96px clamp(24px, 6vw, 96px);
  box-sizing: border-box;
  position: relative;
  z-index: 2;

  background-color: var(--lc-accent-color);
  background-image:
    linear-gradient(
    to right,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0) 55%,
    rgba(0,0,0,0) 80%,
    rgba(0,0,0,0) 88%,
    var(--lc-accent-color) 96%
  ),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M48 0H0V48' fill='none' stroke='rgba(255,255,255,0.08)' stroke-width='1'/%3E%3C/svg%3E");
  background-position: 0 0, 0 0;
}

.lc-hero03-title {
  font-size: clamp(2rem, 3vw, 2.6rem);
  line-height: 1.4;
  margin-bottom: 24px;
}

.lc-hero03-lead {
  font-size: 1.05rem;
  line-height: 1.9;
  color: rgba(255,255,255,.85);
	margin-bottom: 40px;
}

/* =========================
 * 右：ビジュアル（左端を斜めカット）
 * ========================= */

.lc-hero03-media {
  width: 50%;
  position: relative;
  overflow: hidden;
  z-index: 1;

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

/* 各スライド */
.lc-hero03-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: hero03Fade3 15s infinite;
}

/* 3枚用（デフォルト） */
.lc-hero03-slide:nth-child(1) { animation-delay: 0s; }
.lc-hero03-slide:nth-child(2) { animation-delay: 5s; }
.lc-hero03-slide:nth-child(3) { animation-delay: 10s; }

/* 画像はそのまま（サイズ触らない） */
.lc-hero03-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
  display: block;
}

/* 3枚用：5秒ずつで切り替え（空白なし） */
@keyframes hero03Fade3 {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  33%  { opacity: 1; }
  43%  { opacity: 0; }
  100% { opacity: 0; }
}


/* 2枚だけのとき：2枚用の時間割に切り替え（空白なし） */
.lc-hero03-media:has(.lc-hero03-slide:nth-child(2):last-child) .lc-hero03-slide {
  animation-name: hero03Fade2;
  animation-duration: 10s;
}

.lc-hero03-media:has(.lc-hero03-slide:nth-child(2):last-child) .lc-hero03-slide:nth-child(1) { animation-delay: 0s; }
.lc-hero03-media:has(.lc-hero03-slide:nth-child(2):last-child) .lc-hero03-slide:nth-child(2) { animation-delay: 5s; }

@keyframes hero03Fade2 {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  50%  { opacity: 1; }
  60%  { opacity: 0; }
  100% { opacity: 0; }
}


/* 1枚だけなら固定（挙動だけ。サイズ触らない） */
.lc-hero03-media:has(.lc-hero03-slide:only-child) .lc-hero03-slide {
  animation: none;
  opacity: 1;
}


/* =====================================
 * ボタン
 * ===================================== */

.lc-hero--03 .lc-hero-btn {
  display: inline-block;
  text-align: center;
  width: 50%;
  min-width: 35%;
  padding: 14px 36px;
  margin-top: 20px;
  white-space: nowrap;
  border: 1px solid #dcdcdc;
  background-color: var(--lc-accent-color);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: background-color .25s ease, color .25s ease;
}

.lc-hero--03 .lc-hero-btn:hover {
  background-color: #fff;
  color: var(--lc-accent-color);
}

/* tablet ボタン */
@media (max-width: 1024px) {
.lc-hero--03 .lc-hero-btn {
    display: block;
    text-align: center;
    width: auto;
    min-width: 0;
    white-space: normal;
  }
}

/* SP ボタン */
@media (max-width: 768px) {
.lc-hero--03 .lc-hero-btn {
    display: block;
    text-align: center;
    width: 70%;
    min-width: 0;
    white-space: normal;
	margin: 0 auto;
  }
}


/* =========================
 * フェード
 * ========================= */

@keyframes hero03Fade {
  0%   { opacity: 0; }
  5%   { opacity: 1; }
  30%  { opacity: 1; }
  35%  { opacity: 0; }
  100% { opacity: 0; }
}

/* HERO C：1枚だけならスライド無効 */
.lc-hero03-media:has(.lc-hero03-slide:only-child)
.lc-hero03-slide {
  animation: none;
  opacity: 1;
}


/* =========================
 * SP
 * ========================= */

@media (max-width: 768px) {

  .lc-hero03-inner {
    flex-direction: column;
    min-height: auto;
  }

  .lc-hero03-media {
    width: 100%;
    height: 240px;
    clip-path: none;
  }

  .lc-hero03-text {
    width: 100%;
    padding: 64px 24px;
    background-image: none;
  }
}