@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%);
} */
/* ------------------------------------------------------------------ */
/* ------------------------------------------------------------------ */
.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) {
    .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) {}
@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) {}