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

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

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

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

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

.comp_flame {
    width: calc(100% + 40px);
    padding-top: 105%;
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    overflow: hidden;
}

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

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

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

/* 下段のカード共通_重なり */
.game_top_comp:nth-child(-n+2) {
    z-index: calc(var(--game-z) + 3);
}

/* 中段のカード共通_重なり */
.game_top_comp:nth-child(n+3):nth-child(-n+4) {
    z-index: calc(var(--game-z) + 2);
}

/* 上段のカード共通_重なり */
.game_top_comp:nth-child(n+5):nth-child(-n+6) {
    z-index: calc(var(--game-z) + 1);
}

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

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

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

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

/* 5枚目（右側上段）のカード */
.game_top_comp:nth-child(5) {
    right: calc(var(--game-LR-start) * 1%); /* 左右初期値 */
    bottom: calc((var(--game-b-start) + 30) * 1%); /* 天地初期値 */
    animation: comp_ani_R 1.5s forwards ease 2s,comp_ani_upper 3s forwards ease 0.5s; /* 右側,上段 */
}

/* 4枚目（左側中段）のカード */
.game_top_comp:nth-child(6) {
    left: calc(var(--game-LR-start) * 1%); /* 左右初期値 */
    bottom: calc((var(--game-b-start) + 30) * 1%); /* 天地初期値 */
    animation: comp_ani_L 1.5s forwards ease 2s,comp_ani_upper 3s forwards ease 0.5s; /* 左側,上段 */
}



/* 飛び出すアニメーション */
@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) + 15) * 1%);
    }
    60% {
        opacity: 0;
        bottom: calc(((var(--game-b-start) + 15) - (var(--game-b-end) + 15) + 1) * (60 / 85) * 1%);
    }
    85% {
        bottom: calc((var(--game-b-end) + 15 + 1) * 1%);
    }
    100% {
        opacity: 100;
        bottom: calc((var(--game-b-end) + 15) * 1%);
    }
}

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