@charset "utf-8";



/* --- アニメーションの設定 --- */
/* 全体カバー：すべて終わったら消す*/
.opening {
    animation: hideOpening 1s ease 6s forwards;
    /* 6秒後に背景ごと消す設定例 */
}

.op_logo, .op_block {
    opacity: 0;
    pointer-events: none; 
}

/* ロゴのアニメーション：0秒〜2秒でフェードイン・アウト */
.op_logo {
    animation: oplogo 2s ease forwards;
}

/* ブロックのアニメーション：2.5秒後からフェードイン */
.op_block__ {
    animation: opblock 2s ease 2.5s forwards; /* 実行時間 動き方 開始遅延 終了後の状態 */
}

.op_block {
    opacity: 1;
    animation: none;
}



/* フェードインしてフェードアウトする動き */
@keyframes oplogo {
    0%   { opacity: 0; }
    20%  { opacity: 1; } /* 開始早々に表示完了 */
    80%  { opacity: 1; } /* しばらく維持 */
    100% { opacity: 0; } /* 2.5秒時点で消える */
}

/* 単純なフェードイン */
@keyframes opblock {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

/* オープニング画面自体を消して、下のコンテンツを触れるようにする */
@keyframes hideOpening {
    0%   { opacity: 1; }
    99%  { opacity: 0; visibility: visible; }
    100% { opacity: 0; visibility: hidden; }
}

.op_bg_gray{
    animation: hide_bg_gray 1s ease 4.5s forwards;
}
@keyframes hide_bg_gray {
    0%   { opacity: 1; }
    99%  { opacity: 0; visibility: visible;}
    100% { opacity: 0; visibility: hidden;}
}


.op_block .inner > div {
    opacity: 1; 
}

/* --- 共通設定 --- */
.op_block .inner > div {
    opacity: 0;
    pointer-events: none;
    /*
    animation-duration: 0.2s, 0.5s;
    animation-timing-function: ease-out, ease-in-out;
    animation-fill-mode: forwards, forwards;
    */
}

/* --- 個別の指定 --- */
.op_copy {
    /* 1つ目のアニメーション名を指定 */
    animation-name: fadeInRight, scatter_copy;
    
    /* それぞれのアニメーションにかける時間を個別に指定 */
    animation-duration: 0.7s, 3.5s; 
    
    /* 開始のタイミング */
    animation-delay: 2.2s, 4.5s; 
    
    /* 共通設定を維持しつつ上書き */
    animation-timing-function: ease-out, cubic-bezier(0.1, 1, 0.3, 1);
    animation-fill-mode: forwards, forwards;

    position: absolute;
    top: 34%;
    left: 0;
    z-index: 20;
}

/* 画像群の共通設定 */
.op_img5, .op_img4, .op_img3, .op_img2, .op_img1 {
    animation-duration: 0.25s, 4s;
    animation-timing-function: ease-out, cubic-bezier(0.1, 1, 0.3, 1);
    animation-fill-mode: forwards, forwards;
}

/* 画像群 個別の名前とディレイ設定 */
.op_img5 { animation-name: zoomIn, scatter_img5; animation-delay: 2.6s, 4.5s; }
.op_img4 { animation-name: zoomIn, scatter_img4; animation-delay: 2.7s, 4.5s; }
.op_img3 { animation-name: zoomIn, scatter_img3; animation-delay: 2.8s, 4.5s; }
.op_img2 { animation-name: zoomIn, scatter_img2; animation-delay: 2.9s, 4.5s; }
.op_img1 { animation-name: zoomIn, scatter_img1; animation-delay: 3.0s, 4.5s; }



/* --- 登場アニメーション --- */
@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translate(180px, 0); /* 右から */
    }
    100% {
        opacity: 1;
        transform: translate(0, 0);
    }
}

@keyframes zoomIn {
    0% { opacity: 0; transform: scale(0.2); }
    100% { opacity: 1; transform: scale(1); }
}

/* --- 飛び散りアニメーション --- */
/* キーフレーム名をクラス名と被らないように変更 */
@keyframes scatter_copy {
    0%   { transform: translate(0, 0); opacity: 1; filter: blur(0); }
    30%  { opacity: 1; filter: blur(0); }
    100% { transform: translate(-30vw, 0); opacity: 0; filter: blur(10px); }
}

@keyframes scatter_img5 {
    0%   { transform: translate(0, 0); opacity: 1; filter: blur(0); }
    30%  { opacity: 1; filter: blur(0); }
    100% { transform: translate(-30vw, 30vh); opacity: 0; filter: blur(10px); }
}

@keyframes scatter_img4 {
    0%   { transform: translate(0, 0); opacity: 1; filter: blur(0); }
    30%  { opacity: 1; filter: blur(0); }
    100% { transform: translate(-30vw, -30vh); opacity: 0; filter: blur(10px); }
}

@keyframes scatter_img3 {
    0%   { transform: translate(0, 0); opacity: 1; filter: blur(0); }
    30%  { opacity: 1; filter: blur(0); }
    100% { transform: translate(30vw, 30vh); opacity: 0; filter: blur(10px); }
}

@keyframes scatter_img2 {
    0%   { transform: translate(0, 0); opacity: 1; filter: blur(0); }
    30%  { opacity: 1; filter: blur(0); }
    100% { transform: translateX(30vw); opacity: 0; filter: blur(10px); }
}

@keyframes scatter_img1 {
    0%   { transform: translate(0, 0); opacity: 1; filter: blur(0); }
    30%  { opacity: 1; filter: blur(0); }
    100% { transform: translate(30vw, -30vh); opacity: 0; filter: blur(10px); }
}





#frame{
    opacity: 0;
    animation: frame_fadein 1.5s ease 7.0s forwards;
}
#frame.trans{
    opacity: 0;
    animation: frame_fadein 1s ease 5.5s forwards;
}
@keyframes frame_fadein {
    0% { opacity: 0; }
    100% { opacity: 1; }
}






.bg_copy{
    opacity: 0;
    animation: bg_copy_fadein 1.5s ease 8s forwards;
}
@keyframes bg_copy_fadein {
    0% { opacity: 0; }
    100% { opacity: 1; pointer-events: auto; }
}


.bg_lt_logo{
    opacity: 0;
    animation: bg_lt_logo_fadein 1.5s ease 8.5s forwards;
}

@keyframes fadein_article {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
        pointer-events: auto; /* 表示されたらクリックできるようにする */
    }
}
@keyframes bg_lt_logo_fadein {
    0% { opacity: 0; }
    100% { opacity: 1; pointer-events: auto; }
}


.op_base_fadein{
    opacity: 0;
    animation: op_base_fadein 1.5s ease 8.5s forwards;
    z-index: 4;
}
@keyframes op_base_fadein {
    0% { opacity: 0; }
    100% { opacity: 1; }
}



.trans .bg_copy{
    opacity: 0;
    animation: bg_copy_fadein 1.5s ease 6.5s forwards;
}

.trans .bg_lt_logo{
    opacity: 0;
    animation: bg_lt_logo_fadein 1.5s ease 6.8s forwards;
}