@charset "UTF-8";
body {
  font-family: "Helvetica Neue", "游ゴシック", "YuGothic", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "Osaka", "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
  background-color: #000;
}


.l-header {
}

body {
    margin: 0;
}

.snsnav {
    position: absolute;
    z-index: 1;
    bottom: 25px;
    right: 15px;
}

    .snsnav li {
        margin: 34px 0 0 0;
    }

    .snsnav li img {
        width: 65px;
        height: auto;
    }
    
@media screen and (max-width: 768px) {
.snsnav {
    bottom: 18px;
    left: 18px;
}

    .snsnav li {
        margin: 20px 0 0 0;
    }

    .snsnav li img {
        width: 32px;
    }
}

.glitch {
    background: #000 no-repeat center;
    background-image: url(../img/bg_pc2.jpg);
    background-size: 0;
    height: 100vh;
    position: relative;
    overflow: hidden;
}
.glitch::before, .glitch::after, .glitch .channel {
    background: inherit;
    background-size: cover;
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}
@media screen and (max-width: 768px) {
.glitch {
    background-image: url(../img/bg_sp.jpg);
    height: 100vh;
}
}

.glitch::before {
    animation: glitch-before 3s linear infinite alternate both;
    content: "";
}
@keyframes glitch-before {
    0% {
        clip-path: polygon(0% 37.602018812%, 100% 37.602018812%, 100% 44.4654409555%, 0% 44.4654409555%);
        transform: translate(-4.5717072449%, -0.2562992348%);
    }
    2% {
        clip-path: polygon(0% 22.2692641892%, 100% 22.2692641892%, 100% 31.5512629641%, 0% 31.5512629641%);
        transform: translate(-3.4235525166%, -0.0417569551%);
    }
    4% {
        clip-path: polygon(0% 67.7784546153%, 100% 67.7784546153%, 100% 70.6335986561%, 0% 70.6335986561%);
        transform: translate(1.1789729135%, 0.2535244493%);
    }
    6% {
        clip-path: polygon(0% 25.8282973361%, 100% 25.8282973361%, 100% 27.8522575277%, 0% 27.8522575277%);
        transform: translate(1.2365095538%, -0.4408703768%);
    }
    8% {
        clip-path: polygon(0% 89.4668400212%, 100% 89.4668400212%, 100% 96.8378104022%, 0% 96.8378104022%);
        transform: translate(-7.0861938191%, 0.49739305%);
    }
    10% {
        clip-path: polygon(0% 3.8169925877%, 100% 3.8169925877%, 100% 7.9581699738%, 0% 7.9581699738%);
        transform: translate(-7.3739968353%, 0.4988174902%);
    }
    12% {
        clip-path: polygon(0% 81.8939933124%, 100% 81.8939933124%, 100% 84.6726186884%, 0% 84.6726186884%);
        transform: translate(-5.1943023356%, 0.2705735608%);
    }
    14% {
        clip-path: polygon(0% 23.1005820233%, 100% 23.1005820233%, 100% 29.1758323817%, 0% 29.1758323817%);
        transform: translate(0.4970923824%, -0.2913378037%);
    }
    16% {
        clip-path: polygon(0% 30.1286434875%, 100% 30.1286434875%, 100% 32.2642559347%, 0% 32.2642559347%);
        transform: translate(-7.5152580952%, -0.0519905239%);
    }
    18% {
        clip-path: polygon(0% 18.1434595744%, 100% 18.1434595744%, 100% 26.2634811165%, 0% 26.2634811165%);
        transform: translate(3.3598338036%, -0.028492426%);
    }
    20%, 100% {
        clip-path: none;
        transform: none;
    }
}
.glitch::after {
    animation: glitch-after 3s linear infinite alternate both;
    content: "";
}
@keyframes glitch-after {
    0% {
        clip-path: polygon(0% 63.6071094068%, 100% 63.6071094068%, 100% 73.3128112629%, 0% 73.3128112629%);
        transform: translate(-7.1839708782%, 0.3555865125%);
    }
    2% {
        clip-path: polygon(0% 46.6839883612%, 100% 46.6839883612%, 100% 55.9666401913%, 0% 55.9666401913%);
        transform: translate(-7.6010991718%, -0.1199804757%);
    }
    4% {
        clip-path: polygon(0% 25.8086496775%, 100% 25.8086496775%, 100% 28.3045675256%, 0% 28.3045675256%);
        transform: translate(2.4787465093%, 0.1902797368%);
    }
    6% {
        clip-path: polygon(0% 12.8550500191%, 100% 12.8550500191%, 100% 14.1868564508%, 0% 14.1868564508%);
        transform: translate(-2.496037219%, -0.0846487925%);
    }
    8% {
        clip-path: polygon(0% 42.8995418094%, 100% 42.8995418094%, 100% 44.3471551269%, 0% 44.3471551269%);
        transform: translate(-4.5893290397%, -0.2796753949%);
    }
    10% {
        clip-path: polygon(0% 78.2975107784%, 100% 78.2975107784%, 100% 83.605053591%, 0% 83.605053591%);
        transform: translate(-4.1638986637%, 0.1711770962%);
    }
    12% {
        clip-path: polygon(0% 75.1230745913%, 100% 75.1230745913%, 100% 84.1110332673%, 0% 84.1110332673%);
        transform: translate(6.7199415825%, 0.1558898062%);
    }
    14% {
        clip-path: polygon(0% 61.8850737085%, 100% 61.8850737085%, 100% 69.9764969105%, 0% 69.9764969105%);
        transform: translate(-0.8978483063%, 0.4543341508%);
    }
    16% {
        clip-path: polygon(0% 52.1351575733%, 100% 52.1351575733%, 100% 55.9197872943%, 0% 55.9197872943%);
        transform: translate(4.6121283089%, 0.148039921%);
    }
    18% {
        clip-path: polygon(0% 12.3053432551%, 100% 12.3053432551%, 100% 14.1683654954%, 0% 14.1683654954%);
        transform: translate(7.33964317%, 0.2149632123%);
    }
    20%, 100% {
        clip-path: none;
        transform: none;
    }
}
.glitch .channel {
    mix-blend-mode: screen;
}
.glitch .channel::before {
    bottom: 0;
    content: "";
    display: block;
    mix-blend-mode: multiply;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
}
.glitch .r {
    animation: rgb-shift-r 3s steps(1, jump-end) infinite alternate both;
}
@keyframes rgb-shift-r {
    0% {
        transform: translate(-0.2254784427%, -0.0379685843%);
    }
    2% {
        transform: translate(-1.5810901303%, 0.4152575956%);
    }
    4% {
        transform: translate(-0.4133549055%, 0.1664410358%);
    }
    6% {
        transform: translate(-1.4086223963%, -0.290263385%);
    }
    8% {
        transform: translate(-1.9928689375%, -0.0884754248%);
    }
    10% {
        transform: translate(-1.3030852021%, 0.0182337021%);
    }
    12% {
        transform: translate(0.5049166861%, 0.2723175843%);
    }
    14% {
        transform: translate(-0.7733460058%, 0.4447250468%);
    }
    16% {
        transform: translate(-0.3326217644%, -0.0195512649%);
    }
    18% {
        transform: translate(-0.726324833%, 0.1497010001%);
    }
    20%, 100% {
        transform: none;
    }
}
.glitch .r::before {
    background: #f00;
}
.glitch .g {
    animation: rgb-shift-g 3s steps(1, jump-end) infinite alternate both;
}
@keyframes rgb-shift-g {
    0% {
        transform: translate(0.0620080231%, 0.1240979097%);
    }
    2% {
        transform: translate(0.8342639824%, 0.1435843113%);
    }
    4% {
        transform: translate(-0.2621741222%, 0.3218591668%);
    }
    6% {
        transform: translate(-1.9238155212%, -0.1844405625%);
    }
    8% {
        transform: translate(0.5894617984%, -0.3266778916%);
    }
    10% {
        transform: translate(-1.1112644145%, 0.302264172%);
    }
    12% {
        transform: translate(1.8838877878%, -0.0470289175%);
    }
    14% {
        transform: translate(-1.3330218703%, -0.251729947%);
    }
    16% {
        transform: translate(-1.374388531%, -0.0206240758%);
    }
    18% {
        transform: translate(1.4233317004%, 0.4309020918%);
    }
    20%, 100% {
        transform: none;
    }
}
.glitch .g::before {
    background: #0f0;
}
.glitch .b {
    animation: rgb-shift-b 3s steps(1, jump-end) infinite alternate both;
}
@keyframes rgb-shift-b {
    0% {
        transform: translate(1.4724049642%, -0.3329711636%);
    }
    2% {
        transform: translate(0.9973180425%, -0.0062515927%);
    }
    4% {
        transform: translate(0.3162362978%, -0.0493224345%);
    }
    6% {
        transform: translate(0.2216575146%, -0.1039983208%);
    }
    8% {
        transform: translate(1.1162975267%, -0.1533889651%);
    }
    10% {
        transform: translate(-0.7681120674%, 0.0518861419%);
    }
    12% {
        transform: translate(-1.2131552885%, -0.4102007325%);
    }
    14% {
        transform: translate(-0.4922228083%, 0.4926692129%);
    }
    16% {
        transform: translate(1.8752785138%, -0.1478263122%);
    }
    18% {
        transform: translate(-0.1509754769%, -0.034370661%);
    }
    20%, 100% {
        transform: none;
    }
}
.glitch .b::before {
    background: #00f;
}