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

/* ゲームサブ_きつねつき ---------------------------------------------------------- */

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

/* コピー改行調整_きつねつき ------------------------------- */
@media (930px <= width) or (490px <= width <= 768px) {
    .pc_no_br {
        display: none; /* PCのみ改行削除 */
    }
}

/* 飛び出すコンポーネント_きつねつき ------------------------------- */

[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_lower {
    z-index: 11;
    bottom: 0;
}

/* ロゴの調整_きつねつき ------------------------------- */
.game_top_logo {
    top: 7%;
    width: 65%;
}

@media (1201px <= width <= 1300px ) {
    .game_top_logo {
        top: 11%;
        width: 70%;
    }
}

/* 箱の位置調整_きつねつき ------------------------------- */
.game_top_img {
    left: 52%;
    bottom: 1.5%;
}

/* 影の位置調整_きつねつき ------------------------------- */
.game_top_shadow {
    left: 43%;
}

/* 影のトリミング ------------------------------- */
.game_bottom {
    overflow: hidden;
}

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

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

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

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

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

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

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

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

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

/* 6枚目（左側上段）のカード */
.comp_flame_upper .game_top_comp:nth-child(6) {
    left: calc(var(--game-LR-start) * 1%); /* 左右初期値 */
    bottom: calc((var(--game-b-start) + 80) * 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: 1;
        bottom: calc((var(--game-b-start) - var(--game-b-end) + 1) * (60 / 85) * 1%);
    }
    85% {
        opacity: 1;
        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: 1;
        bottom: calc(((var(--game-b-start) + 15) - (var(--game-b-end) + 15) + 1) * (60 / 85) * 1%);
    }
    85% {
        opacity: 1;
        bottom: calc((var(--game-b-end) + 15 + 1) * 1%);
    }
    100% {
        opacity: 1;
        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: 1;
        bottom: calc(((var(--game-b-start) + 30) - (var(--game-b-end) + 30) + 1) * (60 / 85) * 1%);
    }
    85% {
        opacity: 1;
        bottom: calc((var(--game-b-end) + 30 + 1) * 1%);
    }
    100% {
        opacity: 1;
        bottom: calc((var(--game-b-end) + 30) * 1%);
    }
}

/* コマ共通 */
.comp_flame_lower .game_top_comp {
    position: absolute;
    opacity: 0;
}

/* コマ右側 */
.comp_flame_lower .game_top_comp:nth-child(2n+1) {
    bottom: 3.5%;
    right: 6%;
    width: 18%;
    /* 右側の影 */
    filter: drop-shadow(0.1rem 0px 0.15rem rgba(0, 0, 0, .8));
    animation: comp_piece_ani_R 1s forwards ease 2.75s;
}

/* コマ左側 */
.comp_flame_lower .game_top_comp:nth-child(2n) {
    bottom: 3.5%;
    left: 6%;
    width: 20%;
    /* 左側の影 */
    filter: drop-shadow(-0.1rem 0px 0.15rem rgba(0, 0, 0, .8));
    animation: comp_piece_ani_L 1s forwards ease 2.75s;
}

@keyframes comp_piece_ani_R { /* コマ右側 */
    0% {
        opacity: 0;
        bottom: 1%;
        transform: rotate(0deg) scale(0.85);
    }
    85% {
        opacity: 1;
        bottom: 5.2%;
        transform: rotate(20deg) scale(1.02);
    }
    100% {
        opacity: 1;
        bottom: 5%;
        transform: rotate(20deg) scale(1);
    }
}

@keyframes comp_piece_ani_L { /* コマ左側 */
    0% {
        opacity: 0;
        bottom: 1%;
        transform: rotate(-30deg) scale(0.85);
    }
    85% {
        opacity: 1;
        bottom: 5.2%;
        transform: rotate(-10deg) scale(1.02);
    }
    100% {
        opacity: 1;
        bottom: 5%;
        transform: rotate(-10deg) scale(1);
    }
}