@charset "UTF-8";
/*
Theme Name: tridot
Description: tridot WordPressテーマ
Version: 1.0
Author: shimesu
*/

/* ゲームサブ_本の虫 ---------------------------------------------------------- */

/* カスタムプロパティ ゲームのテーマカラー */
:root {
    /* 背景 */
    --game-bg-color: linear-gradient(/*上部*/#6D6C6A 35%, /*下部*/#ACABA9);
    /* 土台 */
    --game-bm-color: #585858;
    /* コンポーネント画像z-index指定用 */
    --game-z: 0;
    /* コンポーネント画像基準位置指定用 */
    --game-LR-start: 19.5;
    --game-LR-end: 4.5;
    --game-b-start: -70;
    --game-b-end: 0;
}

/* 飛び出すコンポーネント本の虫 ------------------------------- */

/* ロゴ調整 */
@media (1201px <= width <= 1250px ) {
    .game_top_logo {
        top: 10%;
    }
}

[class^="comp_flame_"] {
    width: calc(100% + 40px);
    padding-top: 105%;
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    overflow: hidden;
}

/* 前面トリミング */
.comp_flame_front {
    bottom: 0%;
    z-index: calc(var(--game-z) + 11);
}

/* ついたてトリミング */
.comp_flame_back {
    width: 100%;
    z-index: calc(var(--game-z));
}

/* ついたて共通 */
.game_top_comp_back {
    width: 55%;
    position: absolute;
    bottom: -20%;
    animation: comp_ani_back 1s forwards ease 1s
}

/* ついたて左 */
.game_top_comp_back:nth-child(1) { 
    left: -28%;
}

/* ついたて右 */
.game_top_comp_back:nth-child(2) {
    right: -28%;
}

/* カード共通 */
.game_top_comp {
    width: 25%;
    position: absolute;
}

/* カード右側共通 */
.game_top_comp:nth-child(2n+1) {
    /* 右側の角度 */
    transform: rotate(10deg);
    /* 右側の影 */
    filter: drop-shadow(0.1rem 0.1rem 0.1rem rgba(0, 0, 0, .5));
}

/* カード左側共通 */
.game_top_comp:nth-child(2n) {
    /* 左側の角度 */
    transform: rotate(-10deg);
    /* 左側の影 */
    filter: drop-shadow(-0.1rem 0.1rem 0.1rem rgba(0, 0, 0, .5));
}

/* 中段右側のカード */
.comp_flame_middle .game_top_comp:nth-child(1) {
    right: calc(var(--game-LR-start) * 1%); /* 左右初期値 */
    bottom: calc((var(--game-b-start) + 15) * 1%); /* 天地初期値 */
    animation: comp_ani_R 2s forwards ease 0.5s,comp_ani_middle 2s forwards ease 0.5s; /* 右側,中段 */
}

/* 中段左側のカード */
.comp_flame_middle .game_top_comp:nth-child(2)  {
    left: calc(var(--game-LR-start) * 1%); /* 左右初期値 */
    bottom: calc((var(--game-b-start) + 15) * 1%); /* 天地初期値 */
    animation: comp_ani_L 2s forwards ease 0.5s,comp_ani_middle 2s forwards ease 0.5s; /* 左側,中段 */
}

/* 下段右側のカード */
.comp_flame_front .game_top_comp:nth-child(1) {
    right: calc(var(--game-LR-start) * 1%); /* 左右初期値 */
    bottom: calc(var(--game-b-start) * 1%); /* 天地初期値 */
    animation: comp_ani_R 2s forwards ease 0.75s,comp_ani_lower 2s forwards ease 0.75s; /* 右側,下段 */
}

/* 下段左側のカード */
.comp_flame_front .game_top_comp:nth-child(2) {
    left: calc(var(--game-LR-start) * 1%); /* 左右初期値 */
    bottom: calc(var(--game-b-start) * 1%); /* 天地初期値 */
    animation: comp_ani_L 2s forwards ease 0.75s,comp_ani_lower 2s forwards ease 0.75s; /* 左側,下段 */
}

/* 飛び出すアニメーション */

@keyframes comp_ani_R { /* 右側 */
    0% {
        right: calc(var(--game-LR-start) * 1%);
        left: auto;
    }
    85% {
        right: calc(var(--game-LR-end) * 1%);
        left: auto;
    }
    100% {
        right: calc(var(--game-LR-end) * 1%);
        left: auto;
    }
}

@keyframes comp_ani_L { /* 左側 */
    0% {
        left: calc(var(--game-LR-start) * 1%);
        right: auto;
    }
    85% {
        left: calc(var(--game-LR-end) * 1%);
        right: auto;
    }
    100% {
        left: calc(var(--game-LR-end) * 1%);
        right: auto;
    }
}

@keyframes comp_ani_lower { /* 下段 */
    0% {
        opacity: 0;
        bottom: calc(var(--game-b-start) * 1%);
    }
    60% {
        opacity: 0;
        bottom: calc((var(--game-b-start) - var(--game-b-end) + 1) * (60 / 85) * 1%);
    }
    85% {
        bottom: calc((var(--game-b-end) + 1) * 1%);
    }
    100% {
        opacity: 100;
        bottom: calc(var(--game-b-end) * 1%);
    }
}

@keyframes comp_ani_middle { /* 中段 */
    0% {
        opacity: 0;
        bottom: calc((var(--game-b-start) + 0) * 1%);
    }
    60% {
        opacity: 0;
        bottom: calc(((var(--game-b-start) + 0) - (var(--game-b-end) + 0) + 1) * (60 / 85) * 1%);
    }
    85% {
        bottom: calc((var(--game-b-end) + 0 + 1) * 1%);
    }
    100% {
        opacity: 100;
        bottom: calc((var(--game-b-end) + 0) * 1%);
    }
}

/* ついたて */
@keyframes comp_ani_back {
    0% {
        bottom: -40%;
        top: auto;
    }
    85% {
        bottom: 0%;
        top: auto;
    }
    100% {
        bottom: -1%;
        top: auto;
    }
}