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

/* ゲームサブ_12の覆面 ---------------------------------------------------------- */

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

/* 影の位置調整_12の覆面 ------------------------------- */
.game_top_shadow {
    bottom: 3.5%;
    left: 47.5%;
}

/* 飛び出すコンポーネント_12の覆面 ------------------------------- */

[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_comp { /* カード共通 */
    width: 20%;
    position: absolute;
}

/* カード上段共通 */
.comp_flame_upper .game_top_comp {
    /* 上段の角度 */
    transform: rotate(-10deg);
    /* 上段の影 */
    filter: drop-shadow(-0.1rem 0.1rem 0.1rem rgba(0, 0, 0, .5));
}

/* カード下段共通 */
.comp_flame_lower .game_top_comp {
    /* 下段の角度 */
    transform: rotate(10deg);
    /* 下段の影 */
    filter: drop-shadow(0.1rem 0.1rem 0.1rem rgba(0, 0, 0, .5));
}


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

/* 2枚目（上段左2枚目）のカード */
.comp_flame_upper .game_top_comp:nth-child(2) {
    z-index: calc(var(--game-z) + 2);
    left: calc((var(--game-LR-start) + 18) * 1%); /* 左右初期値 */
    bottom: calc((var(--game-b-start)) * 1%); /* 天地初期値 */
    animation: comp_ani_L2 1.5s forwards ease 2s,comp_ani_upper 3s forwards ease 0.7s,
    comp_ani_laugh_upper 1s forwards ease 4s; /* 左2,上段 */
}

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

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

/* 5枚目（下段左2枚目）のカード */
.comp_flame_lower .game_top_comp:nth-child(2) {
    z-index: calc(var(--game-z) + 2);
    right: calc((var(--game-LR-start) + 18) * 1%); /* 左右初期値 */
    bottom: calc((var(--game-b-start) - 40) * 1%); /* 天地初期値 */
    animation: comp_ani_R2 1.5s forwards ease 2s,comp_ani_lower 3s forwards ease 0.7s,
    comp_ani_laugh_lower 1s forwards ease 4s; /* 左2,下段 */
}

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

/* 飛び出すアニメーション */
@keyframes comp_ani_L1 { /* 上段左1枚目 */
    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_L2 { /* 上段左2枚目 */
    0% {
        left: calc((var(--game-LR-start) + 18) * 1%);
        right: auto;
    }
    85% {
        left: calc((var(--game-LR-end) + 18) * 1%);
        right: auto;
    }
    100% {
        left: calc((var(--game-LR-end) + 18) * 1%);
        right: auto;
    }
}

@keyframes comp_ani_L3 { /* 上段左3枚目 */
    0% {
        left: calc((var(--game-LR-start) + 36) * 1%);
        right: auto;
    }
    85% {
        left: calc((var(--game-LR-end) + 36) * 1%);
        right: auto;
    }
    100% {
        left: calc((var(--game-LR-end) + 36) * 1%);
        right: auto;
    }
}

@keyframes comp_ani_R1 { /* 下段左1枚目 */
    0% {
        right: calc((var(--game-LR-start) + 36) * 1%);
        left: auto;
    }
    85% {
        right: calc((var(--game-LR-end) + 36) * 1%);
        left: auto;
    }
    100% {
        right: calc((var(--game-LR-end) + 36) * 1%);
        left: auto;
    }
}

@keyframes comp_ani_R2 { /* 下段左2枚目 */
    0% {
        right: calc((var(--game-LR-start) + 18) * 1%);
        left: auto;
    }
    85% {
        right: calc((var(--game-LR-end) + 18) * 1%);
        left: auto;
    }
    100% {
        right: calc((var(--game-LR-end) + 18) * 1%);
        left: auto;
    }
}

@keyframes comp_ani_R3 { /* 下段左3枚目 */
    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_upper { /* 上段 */
    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% {
        opacity: 1;
        bottom: calc((var(--game-b-end) + 1) * 1%);
    }
    100% {
        opacity: 1;
        bottom: calc((var(--game-b-end)) * 1%);
    }
}

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

@keyframes comp_ani_laugh_upper { /* 上段 */
    0% {
        bottom: calc((var(--game-b-end)) * 1%);
    }
    12.5% {
        bottom: calc((var(--game-b-end)) * 1.05%);
    }
    25% {
        bottom: calc((var(--game-b-end)) * 1%);
    }
    37.5% {
        bottom: calc((var(--game-b-end)) * 1.05%);
    }
    50% {
        bottom: calc((var(--game-b-end)) * 1%);
    }
    62.5% {
        bottom: calc((var(--game-b-end)) * 1.05%);
    }
    75% {
        bottom: calc((var(--game-b-end)) * 1%);
    }
    87.5% {
        bottom: calc((var(--game-b-end)) * 1.05%);
    }
    100% {
        bottom: calc((var(--game-b-end)) * 1%);
    }
}

@keyframes comp_ani_laugh_lower { /* 下段 */
    0% {
        bottom: calc((var(--game-b-end) - 40) * 1%);
    }
    12.5% {
        bottom: calc((var(--game-b-end) - 40) * 1.2%);
    }
    25% {
        bottom: calc((var(--game-b-end) - 40) * 1%);
    }
    37.5% {
        bottom: calc((var(--game-b-end) - 40) * 1.2%);
    }
    50% {
        bottom: calc((var(--game-b-end) - 40) * 1%);
    }
    62.5% {
        bottom: calc((var(--game-b-end) - 40) * 1.2%);
    }
    75% {
        bottom: calc((var(--game-b-end) - 40) * 1%);
    }
    87.5% {
        bottom: calc((var(--game-b-end) - 40) * 1.2%);
    }
    100% {
        bottom: calc((var(--game-b-end) - 40) * 1%);
    }
}

/* グリッチノイズ */
.glitch {
    display: inline-block;
    position: relative;
    font-size: 1rem;
    color: var(--main-color);
    /* color: #9BCB6B; */
}

.glitch::before {
    content: attr(data-text);
    position: absolute;
    top: 1;
    left: -1px;
    width: 100%;
    color: #FFFFFF;
    overflow: hidden;
    clip: rect(0, 900px, 0, 0);
    animation: noise-before 2s infinite linear alternate-reverse;
}
 
.glitch::after {
    content: attr(data-text);
    position: absolute;
    top: -1px;
    left: 1px;
    width: 100%;
    color: #FFFFFF;
    overflow: hidden;
    clip: rect(0, 900px, 0, 0);
    animation: noise-after 1.3s infinite linear alternate-reverse;
}

.glitch:nth-of-type(2)::before {
    animation: noise-after 2.1s infinite linear alternate-reverse;
}

.glitch:nth-of-type(2)::after {
    animation: noise-after 1.4s infinite linear alternate-reverse;
}

.glitch:nth-of-type(3)::before {
    animation: noise-after 1.9s infinite linear alternate-reverse;
}

.glitch:nth-of-type(3)::after {
    animation: noise-after 1.2s infinite linear alternate-reverse;
}

.glitch:nth-of-type(4)::before {
    animation: noise-after 2.2s infinite linear alternate-reverse;
}

.glitch:nth-of-type(4)::after {
    animation: noise-after 1.5s infinite linear alternate-reverse;
}
 
@keyframes noise-before {
    0% {
       clip: rect(20px, 9999px, 52px, 0);
    }
    5% {
       clip: rect(33px, 9999px, 144px, 0);
    }
    10% {
       clip: rect(121px, 9999px, 115px, 0);
    }
    15% {
       clip: rect(144px, 9999px, 162px, 0);
    }
    20% {
       clip: rect(62px, 9999px, 180px, 0);
    }
    25% {
       clip: rect(34px, 9999px, 42px, 0);
    }
    30% {
       clip: rect(147px, 9999px, 179px, 0);
    }
    35% {
       clip: rect(99px, 9999px, 63px, 0);
    }
    40% {
       clip: rect(188px, 9999px, 122px, 0);
    }
    45% {
       clip: rect(154px, 9999px, 14px, 0);
    }
    50% {
       clip: rect(63px, 9999px, 37px, 0);
    }
    55% {
       clip: rect(161px, 9999px, 147px, 0);
    }
    60% {
       clip: rect(109px, 9999px, 175px, 0);
    }
    65% {
       clip: rect(157px, 9999px, 88px, 0);
    }
    70% {
       clip: rect(173px, 9999px, 131px, 0);
    }
    75% {
       clip: rect(62px, 9999px, 70px, 0);
    }
    80% {
       clip: rect(24px, 9999px, 153px, 0);
    }
    85% {
       clip: rect(138px, 9999px, 40px, 0);
    }
    90% {
       clip: rect(79px, 9999px, 136px, 0);
    }
    95% {
       clip: rect(25px, 9999px, 34px, 0);
    }
    100% {
       clip: rect(12px, 9999px, 166px, 0);
    }
 }
 
@keyframes noise-after {
    0% {
       clip: rect(10px, 9999px, 20px, 0);
    }
    5% {
       clip: rect(140px, 9999px, 198px, 0);
    }
    10% {
       clip: rect(184px, 9999px, 89px, 0);
    }
    15% {
       clip: rect(121px, 9999px, 6px, 0);
    }
    20% {
       clip: rect(181px, 9999px, 99px, 0);
    }
    25% {
       clip: rect(154px, 9999px, 133px, 0);
    }
    30% {
       clip: rect(134px, 9999px, 169px, 0);
    }
    35% {
       clip: rect(26px, 9999px, 187px, 0);
    }
    40% {
       clip: rect(147px, 9999px, 137px, 0);
    }
    45% {
       clip: rect(31px, 9999px, 52px, 0);
    }
    50% {
       clip: rect(191px, 9999px, 109px, 0);
    }
    55% {
       clip: rect(74px, 9999px, 54px, 0);
    }
    60% {
       clip: rect(145px, 9999px, 75px, 0);
    }
    65% {
       clip: rect(4px, 9999px, 198px, 0);
    }
    70% {
       clip: rect(99px, 9999px, 136px, 0);
    }
    75% {
       clip: rect(118px, 9999px, 192px, 0);
    }
    80% {
       clip: rect(1px, 9999px, 83px, 0);
    }
    85% {
       clip: rect(145px, 9999px, 98px, 0);
    }
    90% {
       clip: rect(121px, 9999px, 154px, 0);
    }
    95% {
       clip: rect(156px, 9999px, 44px, 0);
    }
    100% {
       clip: rect(5px, 9999px, 10px, 0);
    }
}