@charset "UTF-8";
/* .header_include {
    display: none;
} */

body.is-min .box__index .box__container .box__body {
    height: 100%;
    align-items: flex-start;
}

.header_include .nav {
    opacity: 0;
}

.footer_include .footer__inner .inner__con {
    transform: translateY(var(--footer-h));
    -webkit-transform: translateY(var(--footer-h));
    -moz-transform: translateY(var(--footer-h));
    -ms-transform: translateY(var(--footer-h));
    -o-transform: translateY(var(--footer-h));
}

/* .box__bg .bg__light {
    transform: translateY(20%);
} */

.header_include .nav .nav__inner {
    top: 0;
}

.header_include .nav .nav__logo {
    visibility: hidden;
}

/* .header_include .nav .nav__inner .inner__con .con__list {
    --cube-size: calc(var(--fsize) * 1.1);
} */

.header_include .nav .nav__inner .inner__con .con__list .list__item .box__line,
#go-to-rules,
#back-to-stage {
    display: none;
}

.header_include .nav .nav__inner .inner__con .con__list .list__bg {
    width: 100%;
    height: 100%;
    top: 35%;
    right: 20%;
}

.header_include .nav .nav__inner .inner__con .con__list .list__bg::before {
    --cube-size2: calc(var(--cube-size) * 0.85);
    content: "";
    position: absolute;
    width: var(--cube-size2);
    height: var(--cube-size2);
    background-color: var(--color-blue);
    bottom: calc(var(--cube-size2) * -1);
    right: 0;
    -webkit-transition: all .1s ease-in-out 0s;
    -o-transition: all .1s ease-in-out 0s;
    -moz-transition: all .1s ease-in-out 0s;
    transition: all .1s ease-in-out 0s;
    box-shadow: var(--box-shadows);
}

.header_include .nav .nav__inner .inner__con .con__list .list__bg,
.header_include .nav .nav__inner .inner__con .con__list::before,
.header_include .nav .nav__inner .inner__con .con__list::after {
    background-color: var(--color-blue);
}


.header_include .nav .nav__inner .inner__con .con__list::before {
    bottom: initial;
    top: calc(35% + var(--cube-size));
    left: calc(var(--cube-size) * -3.75);
}

.header_include .nav .nav__inner .inner__con .con__list::after {
    bottom: initial;
    top: 35%;
    left: calc(var(--cube-size) * -2.75);
}

.header_include .nav .nav__inner .inner__con .con__list .list__item .item__text {
    color: var(--color-green);
}

.header_include .nav #nav-hamber-switch:checked~ .nav__hamber {
    top: calc(var(--header-top-space) + 0.85em);
}
/* ------------------------------------------------------------------ */
/* ------------------------------------------------------------------ */
.box__index {
    height: 100%;
    overflow: initial;

    /* pointer-events: none;
    opacity: 0.2; */
}

.box__index .box__container {
    padding: 0;
}

.box__index .box__container .box__body {
    display: flex;
    justify-content: center;
    
    
    height: calc(100% - var(--footer-h));
    align-items: center;
}

.box__index .body__con {
    --title-w: 45%;
    --group-w: calc(100% - var(--title-w));
    --off-space: 0%;

    display: flex;
    flex-direction: row;
    justify-content: center;

    position: relative;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}

.box__index.is-min .box__container .box__body {
    overflow-y: auto;
}

.box__index.is-min .body__con {
    top: 0;
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
}

.box__index.is-none {
    display: none;
}

.box__index .body__con .con__title {
    position: relative;
    width: calc(var(--title-w));
    margin-right: var(--off-space);
    animation: slide-Y 1.5s ease-in-out infinite alternate both;
}

/* .box__index .body__con .con__title .title__pic {
    animation: hue-rotate2 15s linear infinite alternate both;
} */

.box__index .body__con .con__title .title__pic > img {
    animation: scale-up2 1s ease-in-out infinite alternate both;
}

.box__index .body__con .con__group {
    /* flex: 1; */
    position: relative;
    width: var(--group-w);
    z-index :1;
    animation: slide-top 1.5s ease-in-out infinite alternate-reverse both;
}


/* ------------------------------- */
.box__index .body__con .con__bottom,
.box__index .body__con .con__title .title__bottom {
    /* 768:16px 1440:26px */
    --fsize-normal: clamp(1rem, 0.286rem + 1.49vw, 1.625rem);
    --fsize: min(4vmin, var(--fsize-normal));
    color: var(--color-blue);
    font-size: var(--fsize);
    font-weight: 500;
    letter-spacing: 0.05em;

    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 1em 2em 0 0 ;
}

.box__index .body__con .con__bottom {
    --fsize: 20px;
    margin: 1em 0em 0 0 ;
    padding-bottom: 0em;
}

.box__index .body__con .con__bottom .bottom__tips,
.box__index .body__con .con__title .title__bottom .bottom__tips {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.box__index .body__con .con__bottom .bottom__tips .tips__item,
.box__index .body__con .con__title .title__bottom .bottom__tips .tips__item {
    --cube-size: calc(var(--fsize));
    --cube-size-s: calc(var(--cube-size) * 0.75);
    position: relative;
    padding: calc(var(--fsize) * 0.5) calc(var(--fsize) * 1.8);
    
}

.box__index .body__con .con__bottom .bottom__tips .tips__item.is-bg,
.box__index .body__con .con__title .title__bottom .bottom__tips .tips__item.is-bg {
    background-color: var(--color-green);
}

.box__index .body__con .con__bottom .bottom__tips .tips__item.is-bg::before,
.box__index .body__con .con__title .title__bottom .bottom__tips .tips__item.is-bg::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: calc(var(--fsize) * 1.25);;
    left: calc(var(--fsize) * 2);
    background-color: var(--color-green);
    z-index: -1;
}

.box__index .body__con .con__bottom .bottom__tips .tips__item.is-bg::after,
.box__index .body__con .con__title .title__bottom .bottom__tips .tips__item.is-bg::after {
    content: "";
    position: absolute;
    width: var(--cube-size);
    height: var(--cube-size);
    top: calc(var(--cube-size) * -1);
    left: calc(var(--cube-size) * -1);
    background-color: var(--color-green);
}

.box__index .body__con .con__bottom .bottom__tips .tips__item.is-not-bg,
.box__index .body__con .con__title .title__bottom .bottom__tips .tips__item.is-not-bg {
    background-color: initial;
    margin-top: calc(var(--fsize) * -0.75);
    margin-left: calc(var(--fsize) * 2);
}

.box__index .body__con .con__bottom .bottom__tips .tips__item.is-not-bg::before,
.box__index .body__con .con__title .title__bottom .bottom__tips .tips__item.is-not-bg::before {
    content: "";
    position: absolute;
    width: var(--cube-size-s);
    height: var(--cube-size-s);
    top: calc(var(--cube-size) * 0);
    left: calc(var(--cube-size) * -3.75);
    background-color: var(--color-green);
}

.box__index .body__con .con__bottom .bottom__tips .tips__item.is-not-bg::after,
.box__index .body__con .con__title .title__bottom .bottom__tips .tips__item.is-not-bg::after {
    content: "";
    position: absolute;
    width: var(--cube-size);
    height: var(--cube-size);
    bottom: calc(var(--cube-size) * -1);
    right: calc(var(--cube-size) * -1);
    background-color: var(--color-green);
}

.box__index .body__con .con__bottom .bottom__btn,
.box__index .body__con .con__title .title__bottom .bottom__btn {
    margin-top: 1.8em;

    position: relative;
    width: calc(75%);
    aspect-ratio: 443 / 75;

    display: flex;
    justify-content: center;
    align-items: center;

    background-color: var(--color-blue);
    /* background-color: var(--color-green); */
}

/* .box__index .body__con .con__title .title__bottom .bottom__btn .btn__text {
    mix-blend-mode: color-dodge;
}

.box__index .body__con .con__title .title__bottom .bottom__btn .btn__fire {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    overflow: hidden;

    mask: url('../images/index/index-title-btn-star-text.svg') no-repeat 100%;
    -webkit-mask: url('../images/index/index-title-btn-star-text.svg') no-repeat 100%;
    mask-position: bottom 50% center;
    -webkit-mask-position: bottom 50% center;
    z-index: 1;
}

.box__index .body__con .con__title .title__bottom .bottom__btn .btn__fire > svg {
    position: absolute;
    width: 125%;
    bottom: -3vw;
    left: 50%;
    transform: translateX(-50%);
} */


.box__index .body__con .con__title .title__bottom .bottom__btn:hover {
    background-color: var(--color-green);
}

.box__index .body__con .con__title .title__bottom .bottom__btn:hover .btn__frame,
.box__index .body__con .con__title .title__bottom .bottom__btn:hover .btn__frame.is-bottom::after, 
.box__index .body__con .con__title .title__bottom .bottom__btn:hover .btn__frame.is-bottom::before, 
.box__index .body__con .con__title .title__bottom .bottom__btn:hover .btn__frame.is-top::after, 
.box__index .body__con .con__title .title__bottom .bottom__btn:hover .btn__frame.is-top::before {
    background-color: #fff;
}

.box__index .body__con .con__title .title__bottom .bottom__btn:hover .btn__text {
    filter: brightness(0) saturate(100%) invert(18%) sepia(89%) saturate(2426%) hue-rotate(219deg) brightness(96%) contrast(108%);
    mix-blend-mode:initial;
}

/* .box__index .body__con .con__title .title__bottom .bottom__btn:hover {
    background: var(--color-green) url(../images/common/btn-pixel.png);
    transition-delay: 0.35s;
    background-size: 180px;
    animation: animate-btn 0.35s steps(8) forwards;
} */

.box__index .body__con .con__bottom .bottom__btn {
    margin-top: 1.2em;
    width: 85%;
}

.box__index .body__con .con__bottom .bottom__btn .btn__frame,
.box__index .body__con .con__title .title__bottom .bottom__btn .btn__frame {
    --border-w: clamp(0.25rem, -0.036rem + 0.6vw, 0.5rem);
    position: absolute;
    background-color: var(--color-green);
}

.box__index .body__con .con__bottom .bottom__btn .btn__frame {
    --border-w: 4px;
}

.box__index .body__con .con__bottom .bottom__btn .btn__frame.is-top,
.box__index .body__con .con__title .title__bottom .bottom__btn .btn__frame.is-top {
    width: calc(100%);
    height: var(--border-w);
    left: 0;
    top: calc(var(--border-w) * -1);
}

.box__index .body__con .con__bottom .bottom__btn .btn__frame.is-bottom,
.box__index .body__con .con__title .title__bottom .bottom__btn .btn__frame.is-bottom {
    width: calc(100%);
    height: var(--border-w);
    left: 0;
    bottom: calc(var(--border-w) * -1);
}

.box__index .body__con .con__bottom .bottom__btn .btn__frame.is-right,
.box__index .body__con .con__title .title__bottom .bottom__btn .btn__frame.is-right {
    width: var(--border-w);
    height: calc(100%);
    right: calc(var(--border-w) * -1);
    top: 0;
}

.box__index .body__con .con__bottom .bottom__btn .btn__frame.is-left,
.box__index .body__con .con__title .title__bottom .bottom__btn .btn__frame.is-left {
    width: var(--border-w);
    height: calc(100%);
    left: calc(var(--border-w) * -1);
    top: 0;
}

.box__index .body__con .con__bottom .bottom__btn .btn__frame.is-bottom::after,
.box__index .body__con .con__bottom .bottom__btn .btn__frame.is-bottom::before,
.box__index .body__con .con__bottom .bottom__btn .btn__frame.is-top::after,
.box__index .body__con .con__bottom .bottom__btn .btn__frame.is-top::before,

.box__index .body__con .con__title .title__bottom .bottom__btn .btn__frame.is-bottom::after,
.box__index .body__con .con__title .title__bottom .bottom__btn .btn__frame.is-bottom::before,
.box__index .body__con .con__title .title__bottom .bottom__btn .btn__frame.is-top::after,
.box__index .body__con .con__title .title__bottom .bottom__btn .btn__frame.is-top::before {
    content: "";
    position: absolute;
    width: calc(var(--border-w) * 1.1);
    aspect-ratio: 1 / 1;
    background-color: var(--color-green);
}

.box__index .body__con .con__bottom .bottom__btn .btn__frame.is-top::before,
.box__index .body__con .con__title .title__bottom .bottom__btn .btn__frame.is-top::before {
    top: calc(var(--border-w) * 0.9);
    left: calc(var(--border-w) * -0.1);
}

.box__index .body__con .con__bottom .bottom__btn .btn__frame.is-top::after,
.box__index .body__con .con__title .title__bottom .bottom__btn .btn__frame.is-top::after {
    top: calc(var(--border-w) * 0.9);
    right: calc(var(--border-w) * -0.1);
}

.box__index .body__con .con__bottom .bottom__btn .btn__frame.is-bottom::before,
.box__index .body__con .con__title .title__bottom .bottom__btn .btn__frame.is-bottom::before {
    bottom: calc(var(--border-w) * 0.9);
    left: calc(var(--border-w) * -0.1);
}

.box__index .body__con .con__bottom .bottom__btn .btn__frame.is-bottom::after,
.box__index .body__con .con__title .title__bottom .bottom__btn .btn__frame.is-bottom::after {
    bottom: calc(var(--border-w) * 0.9);
    right: calc(var(--border-w) * -0.1);
}

.box__index .body__con .con__bottom .bottom__btn .btn__text,
.box__index .body__con .con__title .title__bottom .bottom__btn .btn__text {
    width: 32%;
    z-index: 1;
}
/* ----------------------------------------------------------------- */
/* ----------------------------------------------------------------- */
@media only screen and (min-width:320px) {
    .header_include .nav .nav__inner {
        top: calc(var(--header-top-space));
    }

    .header_include .nav .nav__inner .inner__con .con__list {
        /* height: calc(var(--fsize) * 4.5); */
        /* padding-top: calc(var(--logo-size) / var(--logo-rate) + var(--fsize) * -0.25); */
        width: calc(var(--fsize) * 8.5);
        height: calc(var(--fsize) * 2.5);
        padding-top: 0;
        /* padding-top: calc(var(--logo-size) / var(--logo-rate) + var(--fsize) * -2.1); */
        background-color: var(--color-blue);
        justify-content: center;
    }

    .header_include .nav .nav__inner .inner__con .con__list::before {
        top: calc(15% + var(--cube-size));
        left: calc(var(--cube-size) * -3.25);
    }

    .header_include .nav .nav__inner .inner__con .con__list::after {
        top: 15%;
        left: calc(var(--cube-size) * -2.25);
    }

    .header_include .nav .nav__inner .inner__con .con__list .list__bg {
        top: 15%;
        right: 15%;
    }

    .header_include .nav .nav__inner .inner__con .con__list .list__bg::before {
        visibility: hidden;   
    }
    
    .header_include .nav .nav__inner .inner__con .con__list .list__item .item__text {
        padding: 0 calc(var(--nav-space) * 0.5);
    }

    .box__index .box__container {
        padding: calc(var(--main-padding-side) * 1.5) calc(var(--main-padding-side) * 1.5) 0 calc(var(--main-padding-side) * 1.5);
    }

    .box__index .box__container .box__body {
        height: calc(100% - var(--footer-h));
        align-items: center;
    }

    .box__index .body__con {
        --off-space: 0em;
        flex-direction: column;
        top: 0%;
        transform: translateY(0);
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
    }

    .box__index .body__con .con__title {
        width: 100%;
    }

    .box__index .body__con .con__group {
        width: 100%;
        margin-top: -8%;
    }

    .box__index .body__con .con__bottom {
        display: flex;
    }

    .box__index .body__con .con__title .title__bottom {
        display: none;
    }


}
@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) {
    .box__index .body__con .con__bottom {
        --fsize: 26px;
    }
}
@media screen and (min-width:768px) {
    .box__index .box__container {
        padding: 0 calc(var(--main-padding-side) * 0.5);
    }

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

    .box__index .body__con {
        --off-space: -3%;
        flex-direction: row;
        top: 50%;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);

        /* width: 167vmin; */
        width: 150vmin;
        min-width: 65%;
        
        padding: 1.5em 0 0 0;
    }

    body.is-min .box__index .body__con {
        top: 0%;
        transform: translateY(0);
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
    }

    .box__index .body__con .con__title {
        width: calc(var(--title-w));
    }

    .box__index .body__con .con__group {
        width: calc(var(--group-w));
        margin-top: 0%;
    }

    .box__index .body__con .con__bottom {
        display: none;
    }

    .box__index .body__con .con__title .title__bottom {
        display: flex;
    }

}
@media screen and (min-width:1024px) {
    .header_include .nav .nav__inner {
        top: 0;
    }

    .header_include .nav .nav__inner .inner__con .con__list {
        width: calc(var(--fsize) * 9.5);
        height: calc(var(--fsize) * 2.2);
        padding-top: 0;
        padding: 0 calc(var(--fsize) * 2.5) 0 0;
        justify-content: flex-end;
    }

    .header_include .nav .nav__inner .inner__con .con__list::before {
        top: calc(35% + var(--cube-size));
        left: calc(var(--cube-size) * -3.75);
    }

    .header_include .nav .nav__inner .inner__con .con__list::after {
        top: 35%;
        left: calc(var(--cube-size) * -2.75);
    }

    .header_include .nav .nav__inner .inner__con .con__list .list__bg {
        top: 35%;
        right: 20%;
    }

    .header_include .nav .nav__inner .inner__con .con__list .list__bg::before {
        visibility: visible;
    }

    .header_include .nav .nav__inner .inner__con .con__list .list__item .item__text {
        padding: 0 calc(var(--nav-space) * 0);
    }
}
@media screen and (min-width:1200px) {}
@media screen and (min-width: 1300px) {}
@media screen and (min-width: 1400px) {}
@media screen and (min-width: 1900px) {}
/* ================================================== */
@media screen and (min-width: 768px) and (min-height: 880px) {}
@media screen and (min-width: 1400px) and (min-height: 980px) {}