@charset "utf-8"; /* CSS Document */
/* コンテナの基本設定 */
.visual-container{  position: relative;width: 80%;height: auto;margin: 0 auto;overflow: hidden}
/* --- 背景画像用のスタイル --- */
.mv img.background-image{  width: 100%;opacity: 0.4}
/* 共通要素のスタイル */
.mv img.element{  position: absolute;opacity: 0;/* アニメーションの準備 */ /* 実行時間は0.6秒を維持 (重なり効果のため) */ animation-duration: 1s;animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);/* ease-outより滑らかに */ animation-fill-mode: forwards;}
/* 13の長方形要素（メッセージ）のスタイル */
.rect{  width: 400px;height: 100px;font-size: 40px;opacity: 0;z-index: 20;/* 最前面に */}
/* --- 要素ごとの位置調整 (vw, vhでレスポンシブに対応) --- */
/* ※順序を.el-1から.el-12の番号順に並べ替えました。 */
.mv img.el-1{  bottom: 2%;left: 39.3%;width: 9%;}
.mv img.el-2{  top: 57%;right: 30%;width: 19%;}
.mv img.el-3{  bottom: 27%;left: 19%;width: 21%;}
.mv img.el-4{  bottom: 2%;right: 23%;width: 28%;}
.mv img.el-5{  top: 34%;right: 16%;width: 13%;}
.mv img.el-6{  bottom: 0;left: 16%;width: 19%;}
.mv img.el-7{  bottom: 16%;left: 0;width: 16%;}
.mv img.el-8{  top: 17%;right: 6.5%;width: 11.72%;}
.mv img.el-9{  top: 52%;right: 0%;width: 15%;}
.mv img.el-10{  top: 25%;left: 3.5%;width: 19%;}
.mv img.el-11{  top: 0%;right: 16%;width: 27%;}
.mv img.el-12{  top: 1%;left: 11%;width: 43%;}
/* 13は中央に配置 (最終停止位置) */
.mv img.el-13{  top: 46%;left: 50%;width: 34%;--final-transform: translate(-50%, -50%);transform: var(--final-transform);}
/* ------------------- アニメーションのキーフレーム定義 ------------------- */
/* 1〜12: 下からふわっと表示 */
@keyframes fadeInUp{  0%{  opacity: 0;transform: translateY(40px) scale(0.9);}
100%{  opacity: 1;transform: translateY(0) scale(1);}
}
/* 13: 画面外最大サイズから中心に向かって縮小・スライド表示 */
@keyframes slideToCenterAndZoom{  /* 0%: 開始位置 (画面中央から上に16.67vh移動した位置 = 上部1/3相当) */ 0%{  opacity: 0;/* X軸中央寄せを維持しつつ、Y軸を上に移動 (-16.67vh) し、拡大する */ transform: translate(-50%, -50%) translateY(-16.67vh) scale(5);}
/* 100%: 最終停止位置 (画面中央 top: 50%) */ 100%{  opacity: 1;/* --final-transform の値 (translate(-50%, -50%)) に戻り、スケールは1になる */ transform: var(--final-transform) scale(1);}
}
/* ------------------- アニメーションの適用 ------------------- */
/* 1〜12の共通アニメーション設定 */
.mv img.element.is-animated{  animation-name: fadeInUp;}
/* 13のアニメーション設定 (時間とアニメーション名を上書き) */
.mv img.el-13.is-animated{  animation-name: slideToCenterAndZoom;/* 新しいキーフレームを適用 */ /* メッセージの実行時間は0.8秒を維持 */ animation-duration: 0.8s;}
/* --- 遅延時間 (Delay) の設定 (0.1秒間隔で連続) --- */
.mv img.el-1.is-animated{  animation-delay: 0s;}
.mv img.el-2.is-animated{  animation-delay: 0.1s;}
.mv img.el-3.is-animated{  animation-delay: 0.2s;}
.mv img.el-4.is-animated{  animation-delay: 0.3s;}
.mv img.el-5.is-animated{  animation-delay: 0.4s;}
.mv img.el-6.is-animated{  animation-delay: 0.5s;}
.mv img.el-7.is-animated{  animation-delay: 0.6s;}
.mv img.el-8.is-animated{  animation-delay: 0.7s;}
.mv img.el-9.is-animated{  animation-delay: 0.8s;}
.mv img.el-10.is-animated{  animation-delay: 0.9s;}
.mv img.el-11.is-animated{  animation-delay: 1.0s;}
.mv img.el-12.is-animated{  animation-delay: 1.1s;}
/* 13は、最後の円形要素の開始直後 (1.2秒開始) に調整 */
.mv img.el-13.is-animated{  animation-delay: 1.2s;}
@media (max-width: 958px){  #top .mv{  width: 100%;padding-top: 45px}
.visual-container{  width: 100%}
.mv img.el-1{  bottom: 1%;left: 31.3%;width: 13%;}
.mv img.el-2{  top: 75%;right: 25%;width: 28%;}
.mv img.el-3{  bottom: 23%;left: 1%;width: 31%;}
.mv img.el-4{  bottom: 0%;right: 15%;width: 41%;}
.mv img.el-5{  top: 29%;right: 2%;width: 19%;}
.mv img.el-6{  bottom: 0;left: 3%;width: 27%;}
.mv img.el-7{  bottom: 52%;left: 0;width: 22%;}
.mv img.el-8{  top: 31%;right: 30.5%;width: 16.72%;}
.mv img.el-9{  top: 60%;right: 4%;width: 22%;}
.mv img.el-10{  top: 24%;left: 21.5%;width: 27%;}
.mv img.el-11{  top: 8%;right: 0%;width: 39%;}
.mv img.el-12{  top: 0.5%;left: 3%;width: 60%;}
.mv img.el-13{  top: 57%;left: 50%;width: 69%;}
}