/* ============================================================
   hero.css — ヒーローセクション専用スタイル
   依存：common.css を先に読み込むこと
   最終更新：2026-03-24
   ============================================================ */

/* ── ヒーロー：外枠 ─────────────────────────────────────────── */
.fk-hero {
  position: relative;
  width: 100%;
  min-height: 890px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── ヒーロー：背景画像 ─────────────────────────────────────── */
.fk-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  /* 仮素材：要差し替え（本番背景画像に変更） */
}

/* ── ヒーロー：テキストコンテンツ ──────────────────────────── */
.fk-hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 40px;
  width: 100%;
  max-width: var(--max-width);
}

.fk-hero__heading-sub {
  font-family: 'Shippori Mincho', serif;
  font-size: 76.8px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.3;
  letter-spacing: 0.05em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
  margin-bottom: 0;
}

.fk-hero__heading-main {
  font-family: 'Shippori Mincho', serif;
  font-size: 76.8px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.3;
  letter-spacing: 0.05em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
  margin-bottom: 24px;
}

.fk-hero__desc {
  font-family: var(--font-jp-serif);
  font-size: 16px;
  font-weight: 400;
  color: #ffffff;
  line-height: 1.9;
  letter-spacing: 0.05em;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
  margin-bottom: 40px;
}

/* ── ヒーロー：ボタン ───────────────────────────────────────── */
.fk-hero__btn {
  display: inline-block;
  font-family: var(--font-jp-serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
  background-color: var(--color-white);
  letter-spacing: 0.1em;
  padding: 16px 48px;
  border: 2px solid var(--color-white);
  transition: background-color var(--transition-base), color var(--transition-base);
}

.fk-hero__btn:hover {
  background-color: #ece228;
  color: var(--color-text);
  border-color: #ece228;
}

/* ── ヒーロー：商品画像エリア ───────────────────────────────── */
.fk-hero__items {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.fk-hero__item {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  opacity: 0;
}

/* 1枚目：110%大きく（scale に 1.1 を掛けた値） */
.fk-hero__item--1 {
  animation: fk-hero-item-show-1 8s ease-in-out infinite;
  transform-origin: bottom center;
}

/* 2枚目：4秒ずらして交互に */
.fk-hero__item--2 {
  animation: fk-hero-item-show-2 8s ease-in-out 4s infinite;
  transform-origin: bottom center;
}

@keyframes fk-hero-item-show-1 {
  0%   { opacity: 0;   transform: scale(0.968); } /* 0.88 × 1.1 */
  8%   { opacity: 1;   transform: scale(1.166); } /* 1.06 × 1.1 */
  18%  { opacity: 1;   transform: scale(1.1);   } /* 1.0  × 1.1 */
  42%  { opacity: 1;   transform: scale(1.1);   }
  50%  { opacity: 0;   transform: scale(1.056); } /* 0.96 × 1.1 */
  100% { opacity: 0;   transform: scale(0.968); }
}

@keyframes fk-hero-item-show-2 {
  0%   { opacity: 0;   transform: scale(0.88); }
  8%   { opacity: 1;   transform: scale(1.06); }
  18%  { opacity: 1;   transform: scale(1.0);  }
  42%  { opacity: 1;   transform: scale(1.0);  }
  50%  { opacity: 0;   transform: scale(0.96); }
  100% { opacity: 0;   transform: scale(0.88); }
}

/* ── ヒーロー：波コンテナ ───────────────────────────────────── */
.fk-hero__waves {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 3;
  /* NOTE: テキスト(.fk-hero__content)は z-index:2
     波がテキストに被る場合は z-index: 1 に変更する */
  pointer-events: none;
  overflow: hidden;
  line-height: 0;
}

/* ── ヒーロー：奥波（白い渦巻き・70%縮小・左に揺れる） ─────── */
.fk-hero__wave--back {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  mix-blend-mode: screen;
  transform-origin: bottom center;
  animation: fk-wave-back 6s ease-in-out infinite;
  /* 仮素材：要差し替え → mv_wave_back02.png（透過PNG） */
}

/* ── アニメーション：奥波（70%縮小・左に揺れる） ────────────── */
@keyframes fk-wave-back {
  0%   { transform: scale(0.7) translateX(0%); }
  50%  { transform: scale(0.7) translateX(-3%); }
  100% { transform: scale(0.7) translateX(0%); }
}

/* ── ヒーロー：手前波（右に揺れる） ─────────────────────────── */
.fk-hero__wave--front {
  display: block;
  position: relative;
  top: 0;
  width: 100%;
  height: auto;
  animation: fk-wave-front 4s ease-in-out infinite;
  /* 仮素材：要差し替え → mv_wave_back01.png（透過PNG） */
}

/* ── アニメーション：手前波（右に揺れる） ───────────────────── */
@keyframes fk-wave-front {
  0%   { transform: scaleX(1.2) translateX(0%); }
  50%  { transform: scaleX(1.2) translateX(3%); }
  100% { transform: scaleX(1.2) translateX(0%); }
}

/* ── アクセシビリティ：動き軽減設定 ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .fk-hero__wave--front,
  .fk-hero__wave--back {
    animation: none;
  }
}

/* ── レスポンシブ（Tablet: 〜1023px） ──────────────────────── */
@media (max-width: 1023px) {
  .fk-hero {
    min-height: 600px;
  }

  .fk-hero__heading-sub,
  .fk-hero__heading-main {
    font-size: 52px;
  }

  .fk-hero__content {
    padding: 0 24px;
  }
}

/* ── レスポンシブ（SP: 〜767px） ────────────────────────────── */
@media (max-width: 767px) {
  .fk-hero {
    min-height: 500px;
  }

  .fk-hero__heading-sub,
  .fk-hero__heading-main {
    font-size: 36px;
    letter-spacing: 0.03em;
    line-height: 1.1;
  }

  .fk-hero__heading-main {
    margin-bottom: 12px;
  }

  .fk-hero__desc {
    font-size: 13px;
    margin-bottom: 0;
    margin-top: 8px;
  }

  .fk-hero__items {
    width: 100%;
    height: 100%;
    right: 0;
    bottom: 0;
    opacity: 1; /* PCと同様のスライドショー表示 */
  }

  .fk-hero__btn {
    font-size: 14px;
    padding: 14px 36px;
    margin-top: auto; /* テキスト群の下・ボタンを下端に押し出す */
  }

  .fk-hero__heading-sub {
    margin-bottom: 0;
  }

  .fk-hero__content {
    padding: 40px 16px 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
  }

  .fk-hero__heading-sub {
    margin-bottom: 0;
  }

  .fk-hero__wave--front {
    animation: fk-wave-front-sp 5s ease-in-out infinite;
  }

  .fk-hero__wave--back {
    animation: fk-wave-back-sp 8s ease-in-out infinite;
  }

  /* SP：アイテム画像アニメーション上書き（縮小版・PCと同じ交互スライド） */
  .fk-hero__item--1 {
    animation: fk-hero-item-show-1-sp 8s ease-in-out infinite;
    object-position: center 85%;
  }

  .fk-hero__item--2 {
    animation: fk-hero-item-show-2-sp 8s ease-in-out 4s infinite;
  }
}

/* ── SP用アニメーション（scale 1.5で横を埋める） ────────────── */
@keyframes fk-wave-front-sp {
  0%   { transform: scaleX(1.2) translateX(-3%); }
  50%  { transform: scaleX(1.2) translateX(3%); }
  100% { transform: scaleX(1.2) translateX(-3%); }
}

@keyframes fk-wave-back-sp {
  0%   { transform: scale(0.7) translateX(0%); }
  50%  { transform: scale(0.7) translateX(-5%); }
  100% { transform: scale(0.7) translateX(0%); }
}

/* ── SP：アイテム画像アニメーション（PCの scale値を SP縮小率に合わせて調整） ── */
/* item--1：SP向け拡大 */
@keyframes fk-hero-item-show-1-sp {
  0%   { opacity: 0;   transform: scale(0.88); }
  8%   { opacity: 1;   transform: scale(1.06); }
  18%  { opacity: 1;   transform: scale(0.98); }
  42%  { opacity: 1;   transform: scale(0.98); }
  50%  { opacity: 0;   transform: scale(0.94); }
  100% { opacity: 0;   transform: scale(0.88); }
}

/* item--2：SP向け拡大 */
@keyframes fk-hero-item-show-2-sp {
  0%   { opacity: 0;   transform: scale(0.88); }
  8%   { opacity: 1;   transform: scale(1.06); }
  18%  { opacity: 1;   transform: scale(1.0);  }
  42%  { opacity: 1;   transform: scale(1.0);  }
  50%  { opacity: 0;   transform: scale(0.96); }
  100% { opacity: 0;   transform: scale(0.88); }
}