@charset "UTF-8";

/* ========================================================
   ハロウィン仕様
   style.css の後に読み込んで、必要なところだけ上書きする
   ON/OFF は functions.php の $season で切り替え（このファイルは消さなくてOK）
   ======================================================== */

/* フッターの背景画像：ハート（bk.png）→ ハロウィンのお城（bk_halloween.png）に差し替え
   背景は1枚だけ替えられないので3枚とも書く。2枚目（世界地図）は style.css と同じ
   3枚目のグラデ：虹色 → パステルのハロウィンカラー
     かぼちゃオレンジ → キャンディコーンのクリーム → ピンクがかった藤色 → ラベンダー → 紫 → 藤ピンク → （最初の3色に戻る）
     ロゴの黒文字が読めるよう、全体を明るめのパステルにしている
     最後の3色は最初の3色と同じにしておく（ループのつなぎ目を目立たなくするため）
   流れるアニメ（rainbowFlow）や位置・大きさは style.css のまま */
html{
  background-image:
    url('../images/bk_halloween.png?26100801'),
    url('../images/bk_world_pc.png?26072001'),
    linear-gradient(180deg,
      #ffd6a5, #ffe9c4, #f5d3ec, #dfd0ff,
      #cfc0f2, #f2d0e8, #ffd6a5, #ffe9c4, #f5d3ec
    );
}

@media (max-width:768px) {
  html{
    background-image:
      url('../images/bk_halloween_sp.png?26100801'),
      url('../images/bk_world_sp.png?26072001'),
      linear-gradient(180deg,
        #ffd6a5, #ffe9c4, #f5d3ec, #dfd0ff,
        #cfc0f2, #f2d0e8, #ffd6a5, #ffe9c4, #f5d3ec
      );
    background-size: contain, 100%, 100% 400%;  /* 通常版は1枚目が 310%（ハート用）。お城は contain */
  }
}

/* フッター：お城の黒いシルエットの上でも読めるようにする（PC・スマホ共通） */
.footer-disclaimer li{
  background-color: rgba(255,255,255,0.8);  /* 通常は 0.5 */
}
.copyright{
  color: #fff;
}

/* トップのはあちゃまアニメ：歩くイラスト → 羽はあちゃま（images/akai-haato-halloween/ の8枚）に差し替え
   コマ送りと上下の揺れをハロウィン用の keyframes に切り替える（style.css の歩くアニメはそのまま残る）
   数値の意味は style.css の「トップのはあちゃまアニメ」のコメント [1]〜[6] を参照 */
.title-img::before {
  content:
    url('../images/akai-haato-halloween/akai-haato_1.png?26100801')
    url('../images/akai-haato-halloween/akai-haato_2.png?26100801')
    url('../images/akai-haato-halloween/akai-haato_3.png?26100801')
    url('../images/akai-haato-halloween/akai-haato_4.png?26100801')
    url('../images/akai-haato-halloween/akai-haato_5.png?26100801')
    url('../images/akai-haato-halloween/akai-haato_6.png?26100801')
    url('../images/akai-haato-halloween/akai-haato_7.png?26100801')
    url('../images/akai-haato-halloween/akai-haato_8.png?26100801');
}
/* PC・スマホ共通
   コマ送り：1.6s で8枚（通常と同じ）
   上下の揺れ：0.8s で上がって 0.8s で下がる（通常は 0.4s）→ 1往復1.6s でコマ送り1周とそろう */
.title-img {
  animation:
    title-halloween-cycle 1.6s steps(1) infinite,
    title-halloween-float 0.8s ease-in-out infinite alternate;
}

/* PC：羽はあちゃまを一回り大きく（約1.15倍）
   通常（style.css）は width/height: clamp(200px, 23vw, 330px) / right: clamp(-260px, -20vw, -170px)
   大きくした分（+3.5vw、最大+50px）だけ右と下にずらして、ロゴやヘッダーにかぶらないようにする */
@media (min-width:769px) {
  .title-img {
    width: clamp(230px, 26.5vw, 380px);
    height: clamp(230px, 26.5vw, 380px);
    right: clamp(-310px, -23.5vw, -200px);  /* 右へ：通常より 3.5vw 多くマイナス */
    margin-top: clamp(30px, 3.5vw, 50px);   /* 下へ：上下中央そろえなので、この半分だけ下がる */
  }
}

/* スマホ：羽はあちゃまを一回り大きく（約1.15倍）、少し下・右に
   通常（style.css）は width/height: clamp(170px, 62vw, 430px) / bottom: clamp(90px, 25vw, 180px) / right: clamp(-260px, -1vw, -10px) */
@media (max-width:768px) {
  /* メインロゴを下げる（通常は margin-top: 52vw）。イラストの足元がロゴの「あ」にかからないようにするため */
  .title-wrap {
    margin-top: 67vw;
  }
  .title-img {
    width: clamp(195px, 71vw, 495px);
    height: clamp(195px, 71vw, 495px);
    /* 数字を小さくするほど下がる。ロゴを下げた分（+15vw）だけ大きくして、イラストは元の高さに残す
       ロゴの下げ幅を変えるときは、ここも同じだけ変えること */
    bottom: 28vw;
    /* 右に寄せる：枠ごと動かすと画面からはみ出して横スクロールが出るので、
       枠は画面の右端ギリギリ（-4.8vw）に置き、中の絵だけを右にずらす（画像右側の透明な余白を使う）
       background-position の +6.5vw を大きくするほど右へ。約9vw を超えると髪が切れるので注意 */
    right: -4.8vw;  /* 通常は clamp(-260px, -1vw, -10px)。これ以上マイナスにすると画面からはみ出す */
    background-position: calc(100% + 6.5vw) center;
  }
}

/* 上下の揺れ幅（通常は -2px） */
@keyframes title-halloween-float {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-6px); }
}

@keyframes title-halloween-cycle {
  0%     { background-image: url('../images/akai-haato-halloween/akai-haato_1.png?26100801'); }
  12.5%  { background-image: url('../images/akai-haato-halloween/akai-haato_2.png?26100801'); }
  25%    { background-image: url('../images/akai-haato-halloween/akai-haato_3.png?26100801'); }
  37.5%  { background-image: url('../images/akai-haato-halloween/akai-haato_4.png?26100801'); }
  50%    { background-image: url('../images/akai-haato-halloween/akai-haato_5.png?26100801'); }
  62.5%  { background-image: url('../images/akai-haato-halloween/akai-haato_6.png?26100801'); }
  75%    { background-image: url('../images/akai-haato-halloween/akai-haato_7.png?26100801'); }
  87.5%  { background-image: url('../images/akai-haato-halloween/akai-haato_8.png?26100801'); }
}