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

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

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

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

[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) + 10);
}

.comp_flame_back {
    width: 100%;
    z-index: calc(var(--game-z));
}

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

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

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

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

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

/* 1枚目（右側下段）のカード */
.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 1.5s forwards ease 2s,comp_ani_lower 3s forwards ease 0.5s; /* 右側,下段 */
}

/* 2枚目（左側下段）のカード */
.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 1.5s forwards ease 2s,comp_ani_lower 3s forwards ease 0.5s; /* 左側,下段 */
}

/* 3枚目（右側中段）のカード */
.comp_flame_front .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枚目（左側中段）のカード */
.comp_flame_front .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; /* 左側,中段 */
}

/* 背面カード */
.comp_flame_back .game_top_comp {
    opacity: 0;
}

.comp_flame_back .game_top_comp:nth-child(1) {
    transform: rotate(-180deg);
    animation: comp_ani_back1 1s forwards ease 1s;
}

.comp_flame_back .game_top_comp:nth-child(2) {
    transform: rotate(-90deg);
    animation: comp_ani_back2 1s forwards ease 1.5s;
}

.comp_flame_back .game_top_comp:nth-child(3) {
    transform: rotate(-90deg);
    animation: comp_ani_back3 1s forwards ease 1.25s;
}

.comp_flame_back .game_top_comp:nth-child(4) {
    transform: rotate(270deg);
    animation: comp_ani_back4 1s forwards ease 1.25s;
}

.comp_flame_back .game_top_comp:nth-child(5) {
    transform: rotate(-90deg);
    animation: comp_ani_back5 1s forwards ease 1.5s;
}

.comp_flame_back .game_top_comp:nth-child(6) {
    transform: rotate(180deg);
    animation: comp_ani_back6 1s forwards ease 1s;
}

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

@keyframes comp_ani_back1 { /* 背面1枚目 */
    0% {
        opacity: 0;
        bottom: 40%;
        left: -5%;
    }
    100% {
        opacity: 1;
        bottom: 35%;
        left: -5%;
    }
}

@keyframes comp_ani_back2 { /* 背面2枚目 */
    0% {
        opacity: 0;
        bottom: 30%;
        left: 20%;
    }
    100% {
        opacity: 1;
        bottom: 35%;
        left: 20%;
    }
}

@keyframes comp_ani_back3 { /* 背面3枚目 */
    0% {
        opacity: 0;
        left: 0%;
        bottom: 11.3%;
    }
    100% {
        opacity: 1;
        left: -5%;
        bottom: 11.3%;
    }
}

@keyframes comp_ani_back4 { /* 背面4枚目 */
    0% {
        opacity: 0;
        bottom: 40%;
        right: -5%;
    }
    100% {
        opacity: 1;
        bottom: 35%;
        right: -5%;
    }
}

@keyframes comp_ani_back5 { /* 背面5枚目 */
    0% {
        opacity: 0;
        right: 25%;
        bottom: 11.3%;
    }
    100% {
        opacity: 1;
        right: 20%;
        bottom: 11.3%;
    }
}

@keyframes comp_ani_back6 { /* 背面6枚目 */
    0% {
        opacity: 0;
        right: 0%;
        bottom: 11.3%;
    }
    100% {
        opacity: 1;
        right: -5%;
        bottom: 11.3%;
    }
}

/* キャッチコピーの改行制御 */

h3 br {
    display: inline;
}

@media (width >= 445px) {

    h3 br {
        display: none;
    }

}