@charset "UTF-8";
/*
Theme Name: Cocoon Child
Template: cocoon
Version: 1.1.3
*/ 
/* 文字の基準位置（下げる） */
.hero-text{ top:58% }  /* 56?60%で微調整可 */
/* フェードイン→6秒表示→フェードアウト→待機→ループ */
@keyframes heroTextLoop{
  0%   {opacity:0; transform:translate(-50%, calc(-50% + 80px));}
  15%  {opacity:1; transform:translate(-50%, -50%);} /* 到着 */
  55%  {opacity:1;}                                   /* 6秒程度滞在 */
  75%  {opacity:0;}                                   /* 退場 */
  100% {opacity:0;}
}
.hero-text{ animation:heroTextLoop 14s ease-in-out infinite; } /* 全体14秒に */
/* 退場のなめらかさ */
.hero-text{ transition:opacity 1.6s ease-out; }
/* ==== HERO 強制表示（デバッグ用） ==== */
.hero{position:relative !important; min-height:360px !important; width:100% !important;}
.hero-bg{position:absolute !important; inset:0 !important; background-size:cover !important; background-position:center !important; z-index:1 !important;}
.hero-overlay{position:absolute !important; inset:0 !important; background:none !important; z-index:2 !important;}
.hero-text{
  position:absolute !important; left:50% !important; top:50% !important;
  transform:translate(-50%,-50%) !important;
  color:#fff !important; background:rgba(0,0,0,.35) !important;
  padding:8px 12px !important; border-radius:6px !important;
  z-index:3 !important; opacity:1 !important; text-align:center !important;
  text-shadow:0 2px 6px rgba(0,0,0,.6) !important;
   /* ← まず動きを止めて表示だけ確認 */
}
.hero-text .line1, .hero-text .line2{
  display:block !important; margin:0 !important;
  font-weight:700 !important;
}
.hero-text .line1{font-size:clamp(22px,3.4vw,40px) !important;}
.hero-text .line2{font-size:clamp(16px,2.4vw,26px) !important; margin-top:.35em !important;}
/* ===== HERO 基本レイアウト（競合回避のため !important 併用） ===== */
.hero{position:relative !important; width:100% !important; aspect-ratio:16/9 !important; max-height:70vh !important; min-height:360px !important; overflow:hidden !important;}
.hero-bg{position:absolute !important; inset:0 !important; background-size:cover !important; background-position:center !important; transform:scale(1) !important; z-index:1 !important;
  animation:heroZoom 18s ease-in-out infinite !important;
}
@keyframes heroZoom{0%{transform:scale(1)}50%{transform:scale(1.05)}100%{transform:scale(1)}}

/* 灰色対策：薄いグラデで文字を読みやすく（真っ灰にならない） */
.hero-overlay{position:absolute !important; inset:0 !important;
  background:linear-gradient(180deg, rgba(0,0,0,.40), rgba(0,0,0,.28)) !important;
  z-index:2 !important;
}

/* 文字：大きめ・中央・アニメON */
.hero-text{
  position:absolute !important; left:50% !important; top:58% !important;
  transform:translate(-50%,-50%) !important;
  text-align:center !important; color:#fff !important;
  text-shadow:0 3px 10px rgba(0,0,0,.6) !important;
  line-height:1.3 !important; font-weight:700 !important;
  z-index:3 !important;
  animation:heroTextLoop 14s ease-in-out infinite !important; /* 動かす（止まっていたらこれが効く） */
}
.hero-text .line1{display:block !important; font-size:clamp(26px, 3.8vw, 46px) !important;}
.hero-text .line2{display:block !important; font-size:clamp(18px, 2.6vw, 28px) !important; margin-top:.4em !important;}

/* IN→6秒滞在→OUT→待機→ループ */
@keyframes heroTextLoop{
  0%   {opacity:0; transform:translate(-50%, calc(-50% + 80px));}
  15%  {opacity:1; transform:translate(-50%, -50%);} /* 到着 */
  55%  {opacity:1;}                                   /* 滞在（約6秒） */
  75%  {opacity:0;}                                   /* 退場 */
  100% {opacity:0;}
}

/* 動きが苦手な環境配慮（任意） */
@media (prefers-reduced-motion: reduce){
  .hero-bg, .hero-text{ animation:none !important; }
}
/* ===== HERO 強制安定版（子テーマ style.css の一番下） ===== */
body.home .hero{
  position:relative !important; width:100% !important;
  min-height:420px !important; aspect-ratio:16/9 !important;
  overflow:hidden !important;
}
body.home .hero-bg{
  position:absolute !important; inset:0 !important;
  background-size:cover !important; background-position:center !important;
  z-index:1 !important;
  animation: heroZoom 18s ease-in-out infinite !important;
}
@keyframes heroZoom{
  0%{transform:scale(1)} 50%{transform:scale(1.04)} 100%{transform:scale(1)}
}

/* 読みやすさ（灰色化防止の薄いグラデ） */
body.home .hero-overlay{
  position:absolute !important; inset:0 !important;
  background:linear-gradient(180deg, rgba(0,0,0,.42), rgba(0,0,0,.28)) !important;
  z-index:2 !important;
}

/* 文字：中央寄せ＆大きく＆アニメON（上端固定を解消） */
body.home .hero-text{
  position:absolute !important; left:50% !important; top:58% !important;
  transform:translate(-50%, -50%) !important; /* ← 上端固定の元凶を上書き */
  opacity:0 !important; z-index:3 !important;
  color:#fff !important; text-shadow:0 3px 10px rgba(0,0,0,.6) !important;
  text-align:center !important; line-height:1.3 !important; font-weight:700 !important;
  animation: heroTextLoop 14s ease-in-out infinite !important;
  animation-fill-mode: both !important; /* 到着位置を保持 */
}
body.home .hero-text .line1{
  display:block !important; font-weight:800 !important;
  font-size:clamp(32px, 4.6vw, 56px) !important; /* ← 大きく */
}
body.home .hero-text .line2{
  display:block !important; font-weight:700 !important;
  font-size:clamp(20px, 3.2vw, 34px) !important; margin-top:.45em !important;
}

/* IN→6秒滞在→OUT→待機→ループ */
@keyframes heroTextLoop{
  0%   {opacity:0; transform:translate(-50%, calc(-50% + 110px));}
  15%  {opacity:1; transform:translate(-50%, -50%);}
  55%  {opacity:1;}
  75%  {opacity:0;}
  100% {opacity:0;}
}

/* 安全策：過去の animation:none を無効化 */
.hero-text, .hero-bg{ animation-play-state: running !important; }

/* ※今は動作優先で reduce-motion を一時的に無視（必要なら後で戻す） */
@media (prefers-reduced-motion: reduce){
  body.home .hero-bg, body.home .hero-text{
    animation: heroTextLoop 14s ease-in-out infinite !important;
  }
}
/* ===== HERO 強制安定（cocoon-child/style.css の一番下）===== */
#hero.hero{
  position:relative !important; width:100% !important;
  min-height:420px !important; aspect-ratio:16/9 !important;
  overflow:hidden !important;
}
#hero .hero-bg{
  position:absolute !important; inset:0 !important;
  background-size:cover !important; background-position:center !important;
  z-index:1 !important; animation:heroZoomLite 18s ease-in-out infinite !important;
}
@keyframes heroZoomLite{
  0%{transform:scale(1)} 50%{transform:scale(1.03)} 100%{transform:scale(1)}
}

/* グレーべた化を防ぎつつ可読性だけ確保（必要なら濃さ調整） */
#hero .hero-overlay{
  position:absolute !important; inset:0 !important;
  background:linear-gradient(180deg, rgba(0,0,0,.40), rgba(0,0,0,.28)) !important;
  z-index:2 !important;
}

/* 文字：中央に固定。上端に貼り付く症状を transform で上書き */
#hero .hero-text{
  position:absolute !important; left:50% !important; top:58% !important;
  transform:translate(-50%, -50%) !important;
  opacity:0 !important; z-index:3 !important;
  color:#fff !important; text-align:center !important;
  text-shadow:0 3px 10px rgba(0,0,0,.6) !important;
  line-height:1.3 !important; font-weight:700 !important;
  animation: heroTextRise14 14s ease-in-out infinite !important; /* ←別名にして競合断ち切り */
  animation-fill-mode: both !important;
}
#hero .hero-text .line1,
#hero .hero-text .line2{
  display:block !important; margin:0 !important;
}
/* 文字サイズ“大きめ”に一段引き上げ */
#hero .hero-text .line1{ font-size:clamp(32px, 4.8vw, 58px) !important; font-weight:800 !important; }
#hero .hero-text .line2{ font-size:clamp(20px, 3.2vw, 34px) !important; font-weight:700 !important; margin-top:.45em !important; }

/* IN（下から）→ 6秒滞在 → OUT → 待機 → ループ */
@keyframes heroTextRise14{
  0%   {opacity:0; transform:translate(-50%, calc(-50% + 110px));}
  15%  {opacity:1; transform:translate(-50%, -50%);}
  55%  {opacity:1;}
  75%  {opacity:0;}
  100% {opacity:0;}
}

/* 過去の animation:none や transform: none を完全に無効化 */
#hero .hero-text, #hero .hero-bg{
  animation-play-state: running !important;
  transform-origin:center center !important;
}