@charset "utf-8";

/* ------------------------------------
   hero-chiba（画像＋PNG＋グラデーション＋星）
------------------------------------ */
.hero-chiba {
  position: relative;
  max-width: 1040px;   /* PCでも最大1040px */
  width: 100%;
  margin: 60px auto -20px auto;      /* 中央寄せ */
  overflow: hidden;    /* 星やPNGがはみ出さない */
}
@media (min-width: 1025px) {
.hero-chiba {
  margin: 0px auto 20px auto;      /* 中央寄せ */
}
}










/* JPG（ベース画像） */
.hero-chiba-base {
  width: 100%;
  height: auto;
  display: block;
}

/* PNG（文字・炎など） */
.hero-chiba-text-img {
  position: absolute;
  inset: 0;            /* JPG と完全に同じ位置に重ねる */
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none;
  opacity: 0;          /* 初期は非表示 */
  z-index: 5;          /* グラデーションより上 */
}

/* ------------------------------------
   PNG①：右からフェードイン（速度3倍）
------------------------------------ */
.img1 {
  animation: slideInRight1 0.5s ease-out forwards;
  animation-delay: 1s; /* PNG①が終わった後に開始 */
}

/* ------------------------------------
   PNG②：PNG①の後に右からフェードイン（速度2倍）
------------------------------------ */
.img2 {
  animation: slideInRight2 1s ease-out forwards;
  animation-delay: 1.5s; /* PNG①が終わった後に開始 */
}

/* ------------------------------------
   PNG③：フェードイン → 炎ゆらぎ
------------------------------------ */
.img3 {
  /* まずは fadeIn だけを実行 */
  animation: fadeIn 2s ease-out forwards;
  animation-delay: 2.5s; /* PNG②の後に開始 */
}

/* fadeIn が終わったら flameFlicker を追加 */
.img3.flame {
  animation: flameFlicker 1.5s ease-in-out infinite alternate;
}

/* ------------------------------------
   グラデーション（画像の上に重ねる）
------------------------------------ */
.hero-chiba::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    45deg,
    rgba(255,175,189,.4),
    rgba(100,216,243,.3),
    rgba(234,236,198,.4),
    rgba(245,146,176,.3),
    rgba(52,219,216,.4)
  );
  background-size: 1000% 1000%;
  animation: gradientAnimation 10s ease infinite;
  z-index: 3;          /* JPGの上、PNGの下 */
  pointer-events: none;
}

/* ------------------------------------
   アニメーション定義
------------------------------------ */

/* PNG①：もっと右からスタート（100px → 300px） */
@keyframes slideInRight1 {
  0% {
    opacity: 0;
    transform: translateX(400px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* PNG②：PNG①より少し右からスタート（200px） */
@keyframes slideInRight2 {
  0% {
    opacity: 0;
    transform: translateX(200px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* PNG③：フェードイン */
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* PNG③：炎のゆらぎ（80〜100％） */
@keyframes flameFlicker {
  0%   { opacity: 1.0; transform: scale(1.00); }
  50%  { opacity: 1.0; transform: scale(1.03); }
  100% { opacity: 0.85; transform: scale(1.01); }
}

/* グラデーションの動き */
@keyframes gradientAnimation {
  0%   { background-position: 0% 30%; }
  50%  { background-position: 100% 70%; }
  100% { background-position: 0% 30%; }
}









/* 星・星雲・流れ星のコンテナ（画像の上に重ねる） */
.bga-03 {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
}

/* 星・星雲・流れ星のシーン */
.bga-03__scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* ★ 中央の文字（必要なら） */
.bga-03__text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 80px;
  font-weight: bold;
  color: white;
  text-shadow: 0 0 30px rgba(255,255,255,1);
  z-index: 10;
  pointer-events: none;
}

/* ------------------------------
   星の基本設定
------------------------------ */
.bga-03__stars,
.bga-03__stars2,
.bga-03__stars3 {
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 3px;
  background: transparent;
  border-radius: 50%;
}

/* ★ 星レイヤー1（白） */
.bga-03__stars {
  box-shadow:
    100px 100px #fff, 300px 200px #fff, 500px 350px #fff, 700px 150px #fff,
    900px 400px #fff, 1100px 250px #fff, 1300px 300px #fff, 1500px 200px #fff,
    200px 450px #fff, 400px 500px #fff, 600px 50px #fff, 800px 300px #fff,
    1000px 100px #fff, 1200px 350px #fff, 1400px 450px #fff,
    20px 20px #fff, 40px 60px #fff, 80px 30px #fff, 120px 10px #fff,
    160px 50px #fff, 200px 80px #fff, 50px 120px #fff, 30px 160px #fff,
    10px 200px #fff, 70px 240px #fff, 150px 300px #fff,
    180px 180px #fff, 360px 260px #fff, 540px 420px #fff, 720px 220px #fff,
    880px 500px #fff, 1040px 180px #fff, 1240px 260px #fff, 1440px 380px #fff,
    160px 520px #fff, 460px 560px #fff, 760px 120px #fff, 960px 360px #fff,
    1160px 160px #fff, 1360px 420px #fff, 1560px 520px #fff,
    210px 140px #fff, 410px 240px #fff, 610px 340px #fff, 810px 440px #fff,
    1010px 540px #fff, 1210px 640px #fff, 1410px 740px #fff;
  animation:
    bga-03-twinkle 0.7s ease-in-out infinite alternate,
    bga-03-diagonalDownA 1.5s linear infinite,
    bga-03-diagonalDownB 2.2s linear infinite,
    bga-03-diagonalDownC 1.8s linear infinite;
}

/* ★ 星レイヤー2（青白） */
.bga-03__stars2 {
  box-shadow:
    200px 300px #e8f4ff, 450px 150px #e8f4ff, 800px 350px #e8f4ff,
    1200px 200px #e8f4ff, 1600px 300px #e8f4ff,
    300px 500px #e8f4ff, 900px 100px #e8f4ff,
    20px 20px #fff, 40px 60px #fff, 80px 30px #fff, 120px 10px #fff,
    160px 50px #fff, 200px 80px #fff, 50px 120px #fff, 30px 160px #fff,
    10px 200px #fff, 70px 240px #fff, 150px 300px #fff,
    250px 350px #e8f4ff, 550px 200px #e8f4ff, 850px 450px #e8f4ff,
    1150px 250px #e8f4ff, 1450px 350px #e8f4ff,
    350px 420px #e8f4ff, 650px 260px #e8f4ff, 950px 520px #e8f4ff;
  width: 4px; height: 4px;
  animation:
    bga-03-twinkle 1s ease-in-out infinite alternate,
    bga-03-diagonalDownA 1.5s linear infinite,
    bga-03-diagonalDownD 1.8s linear infinite,
    bga-03-diagonalDownE 3.2s linear infinite;
}

/* ★ 星レイヤー3（黄白） */
.bga-03__stars3 {
  box-shadow:
    300px 250px #fff9d6, 600px 100px #fff9d6, 900px 300px #fff9d6,
    1400px 200px #fff9d6, 500px 450px #fff9d6,
    20px 20px #fff, 40px 60px #fff, 80px 30px #fff, 120px 10px #fff,
    160px 50px #fff, 200px 80px #fff, 50px 120px #fff, 30px 160px #fff,
    10px 200px #fff, 70px 240px #fff, 150px 300px #fff,
    350px 300px #fff9d6, 650px 150px #fff9d6, 950px 350px #fff9d6,
    1250px 250px #fff9d6, 1550px 350px #fff9d6,
    450px 380px #fff9d6, 750px 180px #fff9d6, 1050px 480px #fff9d6;
  width: 5px; height: 5px;
  animation:
    bga-03-twinkle 0.9s ease-in-out infinite alternate,
    bga-03-diagonalDownA 2.0s linear infinite,
    bga-03-diagonalDownC 3.0s linear infinite,
    bga-03-diagonalDownE 2.0s linear infinite;
}

/* ★ 星雲 */
.bga-03__nebula {
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(35% 40% at 25% 30%, rgba(98,71,170,0.45), transparent 60%),
    radial-gradient(40% 45% at 75% 65%, rgba(36,120,160,0.40), transparent 60%),
    radial-gradient(30% 30% at 60% 20%, rgba(170,60,120,0.32), transparent 60%);
  filter: blur(25px);
  animation: bga-03-nebulaShift 8s ease-in-out infinite alternate;
}

/* ★ 流れ星 */
.bga-03__shoot {
  position: absolute;
  width: 180px;
  height: 3px;
  background: linear-gradient(90deg, #fff, transparent);
  transform: rotate(-35deg);
  opacity: 0;
}

.shoot1 { top: 10%; left: 70%; animation: bga-03-shootA 1.2s ease-in infinite; }
.shoot2 { top: 30%; left: 60%; animation: bga-03-shootB 1.8s ease-in infinite; }
.shoot3 { top: 50%; left: 80%; animation: bga-03-shootC 2.4s ease-in infinite; }

/* ★ 流星アニメーション */
@keyframes bga-03-shootA {
  0%,40% { opacity:0; transform:translate(0,0) rotate(-35deg); }
  45%    { opacity:1; }
  100%   { opacity:0; transform:translate(-450px,300px) rotate(-35deg); }
}
@keyframes bga-03-shootB {
  0%,60% { opacity:0; transform:translate(0,0) rotate(-30deg); }
  65%    { opacity:1; }
  100%   { opacity:0; transform:translate(-500px,350px) rotate(-30deg); }
}
@keyframes bga-03-shootC {
  0%,70% { opacity:0; transform:translate(0,0) rotate(-40deg); }
  75%    { opacity:1; }
  100%   { opacity:0; transform:translate(-550px,400px) rotate(-40deg); }
}

/* ★ 星の点滅 */
@keyframes bga-03-twinkle {
  0% { opacity:0.4; }
  100% { opacity:1; }
}

/* ★ 星群の方向 */
@keyframes bga-03-diagonalDownA {
  from { transform: translate(300px, -300px); }
  to   { transform: translate(-300px, 300px); }
}
@keyframes bga-03-diagonalDownB {
  from { transform: translate(250px, -200px); }
  to   { transform: translate(-250px, 200px); }
}
@keyframes bga-03-diagonalDownC {
  from { transform: translate(300px, -250px); }
  to   { transform: translate(-300px, 250px); }
}
@keyframes bga-03-diagonalDownD {
  from { transform: translate(220px, -180px); }
  to   { transform: translate(-220px, 180px); }
}
@keyframes bga-03-diagonalDownE {
  from { transform: translate(200px, -150px); }
  to   { transform: translate(-200px, 150px); }
}

/* ★ 星雲の動き */
@keyframes bga-03-nebulaShift {
  0%   { transform:translate(-2%,-1%) scale(1.05); }
  100% { transform:translate(2%,2%) scale(1.15); }
}

/* ★ グラデーションの動き */
@keyframes gradientAnimation {
  0%   { background-position: 0% 30%; }
  50%  { background-position: 100% 70%; }
  100% { background-position: 0% 30%; }
}


.hero-chiba-text {
  position: absolute;
  top: 20%;
  left: 35%;
  transform: translate(-50%, -50%);
  z-index: 5;

  /* 文字サイズを画面幅に応じて自動調整 */
  font-size: clamp(18px, 4vw, 50px);
  font-weight: bold;
  color: white;

  /* 青い縁取り */
  text-shadow:
    2px 2px 0 #007FFF,
    -2px 2px 0 #007FFF,
    2px -2px 0 #007FFF,
    -2px -2px 0 #007FFF;

  /* 折り返しを自然にする */
  max-width: 90%;
  text-align: center;

  /* 右からスライドイン */
  animation: hero-chibaTextIn 1.2s ease-out forwards;

  pointer-events: none;
}
@keyframes hero-chibaTextIn {
  0% {
    opacity: 0;
    transform: translate(50%, -50%);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}