@charset "utf-8";

/* 必ず定義する基本keyframes */
@keyframes opa_on  { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes opa_off { 0% { opacity: 1; } 100% { opacity: 0; } }

/* ローディング(初回読み込み時のみ。挙動はjs/common.js loadingAnimation()参照) */
/* 海岸線は0.8s(sine.out)でフェードイン。ロゴは0.6s後に0.6s(sine.out)でパキッと表示 */
.loading .loading_bg { opacity: 0; animation: opa_on 0.8s cubic-bezier(0.39, 0.575, 0.565, 1) forwards; }
/* ロゴは帯スライス(10本)が左から順にフワッと表示(umibeno-ie.com text-katakata準拠: 30%下からフェード+0.5s ease。0.6s後開始・帯ごと0.04sずらし) */
.loading .loading_ttl__band img {
  opacity: 0;
  transform: translateY(30%);
  animation: loading_ttl_up 0.5s forwards;
}
@keyframes loading_ttl_up {
  0% { opacity: 0; transform: translateY(30%); }
  100% { opacity: 1; transform: translateY(0); }
}
.loading .loading_ttl__band:nth-of-type(1) img { animation-delay: 0.6s; }
.loading .loading_ttl__band:nth-of-type(2) img { animation-delay: 0.64s; }
.loading .loading_ttl__band:nth-of-type(3) img { animation-delay: 0.68s; }
.loading .loading_ttl__band:nth-of-type(4) img { animation-delay: 0.72s; }
.loading .loading_ttl__band:nth-of-type(5) img { animation-delay: 0.76s; }
.loading .loading_ttl__band:nth-of-type(6) img { animation-delay: 0.8s; }
.loading .loading_ttl__band:nth-of-type(7) img { animation-delay: 0.84s; }
.loading .loading_ttl__band:nth-of-type(8) img { animation-delay: 0.88s; }
.loading .loading_ttl__band:nth-of-type(9) img { animation-delay: 0.92s; }
.loading .loading_ttl__band:nth-of-type(10) img { animation-delay: 0.96s; }
/* 消える瞬間: img_fadeと同じマスクの動きで下から上にワイプして消える(1s) */
.loading.loading_off { animation: loading_wipe_off 1s cubic-bezier(.165, .84, .44, 1) forwards; }
@keyframes loading_wipe_off {
  0%   { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(0 0 100% 0); }
}
.loading.loading_off2 { display: none; }

/* スクロール表示アニメーション2種(発火は既存の.fadein→.scrollin機構を使用)
   ①box_fade: 要素全体が30px下からふわっと表示(itsuki-outdoor .box-fade準拠)
     使い方: 要素自身に「fadein box_fade」、または親に「fadein」+子に「box_fade」 */
.box_fade {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s cubic-bezier(0.37, 0, 0.63, 1), transform 0.6s cubic-bezier(0.37, 0, 0.63, 1);
}
.box_fade.scrollin,
.fadein.scrollin .box_fade {
  opacity: 1;
  transform: translateY(0);
}

/* ②img_fade: 中の画像がマスクの開きで下から上に表示(umibeno-ie.com準拠)
     使い方: imgを包む要素に「img_fade」を付け、その要素自身または親に「fadein」。
     複数を時間差で見せる場合は style="--img-fade-delay:0.5s" 等で個別指定(未指定は0s) */
.img_fade img {
  opacity: 0;
  clip-path: inset(100% 0 0 0);
  /* transformも列挙する(列挙しないとリンク画像のhover拡大がアニメーションせず一瞬で切り替わる) */
  transition: opacity 1s cubic-bezier(.23, 1, .32, 1), clip-path .8s cubic-bezier(.165, .84, .44, 1), transform .7s ease-in-out;
  transition-delay: var(--img-fade-delay, 0s), var(--img-fade-delay, 0s), 0s;
}
.img_fade.scrollin img,
.fadein.scrollin .img_fade img {
  opacity: 1;
  clip-path: inset(0% 0 0 0);
}

/* 英字水彩見出し(.title_suisai.-split): フワッと表示(umibeno-ie.com text-katakata準拠)。
   帯(文字)を個別に動かすとマスクの帯境界に切れ目が出るため、ドリフト(30%下から0.5s)は見出し全体で行い、
   文字は左から順に0.04sずらしのフェードのみで出す */
.title_suisai.-split {
  transform: translateY(30%);
}
.title_suisai.-split .title_suisai_char {
  opacity: 0;
}
.title_suisai.-split.is-active {
  transform: translateY(0);
  transition: transform 0.5s ease;
}
.title_suisai.-split.is-active .title_suisai_char {
  opacity: 1;
  transition: opacity 0.5s ease;
  transition-delay: calc(var(--char-i, 0) * 0.04s);
}

/* オープニング */
.wrap_off .home_mv__pic { opacity: 0; }
.wrap_on .home_mv__pic { animation: opa_on 0.6s ease-in-out forwards; }
/* MVスライド:前の画像(.is-off)は不透明のまま下に残し、次の画像(.is-on)を上から1s ease-in-outでフェードイン。
   ズーム(1.1→1・10s linear)は切替後も同じ方向に進み続けるので、切替時に動きが止まったり戻ったりしない */
.home_mv__slide.is-on { animation: opa_on 1s ease-in-out forwards; }
.home_mv__slide.is-on .home_mv__pic_img,
.home_mv__slide.is-off .home_mv__pic_img { animation: home_mv_zoom 10s linear forwards; }
@keyframes home_mv_zoom {
  0%   { transform: scale(1.1); }
  100% { transform: scale(1); }
}
/* FVコピーはtitle_suisaiと同じフワッと文字送り(text-katakata準拠。wrap_on(ローディング明け0.7s前)起点で1.0s後=ワイプ通過後に開始+1文字0.04sずらし) */
.home_mv__copy_char {
  opacity: 0;
  transform: translateY(30%);
}
.wrap_on .home_mv__copy_char {
  opacity: 1;
  transform: translateY(0);
  transition: transform 0.5s ease, opacity 0.5s ease;
  transition-delay: calc(1s + var(--char-i, 0) * 0.04s);
}

/* フッタータグライン: FVコピーと同じフワッと文字送り(発火はjs/common.js footerTaglineAnimationIO) */
.footer_tagline_char {
  opacity: 0;
  transform: translateY(30%);
}
.footer_tagline.is-active .footer_tagline_char {
  opacity: 1;
  transform: translateY(0);
  transition: transform 0.5s ease, opacity 0.5s ease;
  transition-delay: calc(var(--char-i, 0) * 0.04s);
}

/* メニュー開閉 */
.menu_off .menu { animation: opa_off 0.5s ease-in-out forwards; }
.menu_on  .menu { animation: opa_on  0.5s ease-in-out forwards; }

/* MVトピックス速報の消去アニメーション */
.home_mv__news.is-hidden { animation: opa_off 0.4s ease-in-out forwards; }