@charset "UTF-8";
:root {
    --rate: 1;
    --min-rate: 800/1195;
}

/* pc -------------------------------------------------- */
/* is-lt */
.box__frame .frame__cell.is-lt {
    --size-1: 1197px;
    --size-2: 432px;
    left: 0;
    top: 0;
    width: min(100vmin, calc(var(--size-1) * var(--rate)));
    min-width: calc(var(--size-1) * var(--min-rate));
    z-index: 2;
}

.box__frame .frame__cell.is-lt .lt__2 {
    position: relative;
    top: -1px;
    width: calc(var(--size-2) / var(--size-1) * 100%);
}
/* is-rt */
.box__frame .frame__cell.is-rt {
    --size-1: 418px;
    right: 0;
    top: 0;

    width: min(39vmin, calc(var(--size-1) * var(--rate)));
    min-width: calc(var(--size-1) * var(--min-rate));
    z-index: 3;
}
/* is-lb */
.box__frame .frame__cell.is-lb {
    --size-1: 500px;
    --size-2: 320px;
    
    left: 0;
    bottom: 0;

    z-index: 1;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
}

.box__frame .frame__cell.is-lb .lb__1 {
    width: min(46vmin, calc(var(--size-1) * var(--rate)));
    min-width: calc(var(--size-1) * var(--min-rate));
}

.box__frame .frame__cell.is-lb .lb__2 {
    width: min(30vmin, calc(var(--size-2) * var(--rate)));
    min-width: calc(var(--size-2) * var(--min-rate));
}

/* is-rb */
.box__frame .frame__cell.is-rb {
    --size-1: 1500px;
    right: 0;
    bottom: -2px;

    width: min(140vmin, calc(var(--size-1) * var(--rate)));
    min-width: calc(var(--size-1) * var(--min-rate));

    z-index: 0;
}

/* mobile -------------------------------------------------- */
.box__frame__mobile .frame__cell.is-lt {
    --size-1: 700px;
    left: 0;
    top: 0;
    width: calc(var(--size-1) * var(--rate));
}

.box__frame__mobile .frame__cell.is-rt {
    --size-1: 124px;
    right: 0;
    top: 0;
    width: calc(var(--size-1) * var(--rate));
}

.box__frame__mobile .frame__cell.is-lb {
    --size-1: 158px;
    left: 0;
    bottom: 0;
    width: calc(var(--size-1) * var(--rate));
}

.box__frame__mobile .frame__cell.is-rb {
    --size-1: 232px;
    right: 0;
    bottom: -2px;
    width: calc(var(--size-1) * var(--rate));
}
/* ------------------------------------------------------------------ */
/* ------------------------------------------------------------------ */
.box__index .box__container {
    padding: 0;
}

.box__index .box__container .box__body {
    width: fit-content;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.box__index .box__container .box__body .body__title {
    --size: 820px;
    position: relative;
    width: min(76vmin, calc(var(--size) * var(--rate)));
    min-width: calc(var(--size) * var(--min-rate));
}

.box__index .box__container .box__body .body__btn {
    --size: 265px;
    --width: min(25vmin, calc(var(--size) * var(--rate)));
    margin-top: calc(var(--width) * 0.15);
    margin-left: max(calc(var(--width) * 1.35), 17em);
    position: relative;
    width: var(--width);
    min-width: calc(var(--size) * var(--min-rate));
}

.box__index .box__container .box__body .body__btn:hover {
    filter: invert();
}

.clipPath {
    animation-direction: alternate;
    
    /* animation-duration: 1.5s, .5s; */
    /* animation-name: glitch-anim-2, hue-rotate; */
    animation-duration: 0.8s, .5s;
    animation: noise-1, hue-rotate;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    
    background-image: url(../images/index/index-title.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    position: absolute;
    width: 100%;
    height: 100%;
    
    top: 0;
    display: block;
    z-index: 1;
}

.clipPath.noise-0 {
    animation-duration: 1.5s, .5s;
    animation-name: glitch-anim-2, hue-rotate;
}

.clipPath.noise-1 {
    animation-duration: 2s, .5s;
    animation-name: noise-1, hue-rotate;
}
.clipPath.noise-2 {
    animation-duration: 1.4s, .5s;
    animation-name: noise-2, hue-rotate;
}
/* ----------------------------------------------------------------- */
/* ----------------------------------------------------------------- */
@media only screen and (min-width:320px) {
    :root {
        --rate: 0.9;
        --min-rate: 470/700;
    }

    .box__index .box__container .box__body {
        align-items: flex-start;
    }

    .box__index .box__container .box__body .body__title {
        --size: 105px;
        width: min(26vmin, calc(var(--size) * var(--rate)));
    }

    .box__index .box__container .box__body .body__btn {
        --size: 52px;
        --width: min(14vmin, calc(var(--size) * var(--rate)));
        margin-top: calc(-1 * var(--width) * 1);
        margin-left: 0;
    }

    .clipPath {
        background-image: url(../images/index/index-m-title.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
}
@media screen and (min-width: 360px) {}
@media screen and (min-width: 390px) {}
@media screen and (min-width: 414px) {}
@media screen and (min-width: 500px) {}
@media screen and (min-width: 600px) {
    :root {
        --rate: 0;
        --min-rate: 800/1195;
    }

    .box__frame .frame__cell.is-lb .lb__2 {
        display: none;
    }

    #cube-11_1,
    #cube-11_2,
    #cube-10_1,
    #cube-10_2,
    #cube-9_1,
    #cube-9_2,
    #cube-8_1,
    #cube-8_2,
    #cube-6,
    #cube-4,
    #cube-3,
    #cube-2 {
        display: none;
    }

    .box__index .box__container .box__body {
        align-items: center;
    }

    .box__index .box__container .box__body .body__title {
        --size: 820px;
        width: min(76vmin, calc(var(--size) * var(--rate)));
    }
    
    .box__index .box__container .box__body .body__btn {
        --size: 265px;
        --width: min(25vmin, calc(var(--size) * var(--rate)));
        /* margin-top: calc(var(--width) * 0.15); */
        margin-top: 1.5em;
        margin-left: max(calc(var(--width) * 1.35), 17em);
    }

    .clipPath {
        background-image: url(../images/index/index-title.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
}
@media screen and (min-width: 768px) {}
@media screen and (min-width: 1024px) {
    .box__frame .frame__cell.is-lb .lb__2 {
        display: block;
    }

    #cube-8_1,
    #cube-8_2,
    #cube-6,
    #cube-4,
    #cube-3,
    #cube-2 {
        display: block;
    }
}
@media screen and (min-width: 1200px) {
    #cube-11_1,
    #cube-11_2,
    #cube-10_1,
    #cube-10_2,
    #cube-9_1,
    #cube-9_2,
    #cube-8_1,
    #cube-8_2,
    #cube-6,
    #cube-4,
    #cube-3,
    #cube-2 {
        display: block;
    }

}
@media screen and (min-width: 1366px) {}
@media screen and (min-width: 1400px) {}
@media screen and (min-width: 1900px) {
    :root {
        --rate: 1;
    }
}
/* ================================================== */
@media screen and (min-width: 1280px) and (max-height: 620px) {
    #cube-4,
    #cube-6 {
        display: none;
    }
}

@media screen and (min-width: 1600px) and (max-height: 620px) {
    #cube-11_1,
    #cube-10_1,
    #cube-9_1,
    #cube-8_1,
    #cube-4,
    #cube-6 {
        display: none;
    }
}