/*#region var*/
:root {
    --headerH: 7rem;
    --pxunit: 1rem;
    /* Color */
    --color-black: #000000;
    --color-white: #FFFFFF;
    --color-gray: #D8DDE6;
    --color-bg-base: #02010A;
    --color-bg-section: #06010D;
    --color-red: #E90016;
    --color-neon-pink: #FF4DFF;
    --color-neon-blue: #66E0FF;
    --color-neon-purple: #8B5CFF;
    --color-neon-yellow: #FFD84D;
    --color-white: #FFFFFF;
    --color-white-sub: rgba(255, 255, 255, 0.8);
    --color-border: rgba(255, 255, 255, 0.15);
    --color-cyan-50: #00FFFF;

    /* Typography */
    --font-jp: 'Noto Sans JP', 'Zen Kaku Gothic New', sans-serif;
    --font-zen: 'Zen Kaku Gothic New', sans-serif;
    --font-bebas: 'Bebas Neue', sans-serif;
    --font-Oxanium: 'Oxanium', sans-serif;

    /* Font size */
    --font-size12: 1.2rem;
    --font-size14: 1.4rem;
    --font-size16: 1.6rem;
    --font-size18: 1.8rem;
    --font-size20: 2rem;
    --font-size22: 2.2rem;
    --font-size24: 2.4rem;
    --font-size26: 2.6rem;
    --font-size28: 2.8rem;
    --font-size30: 3rem;
    --font-size32: 3.2rem;
    --font-size36: 3.6rem;
    --font-size38: 3.8rem;
    --font-size40: 4rem;

    /* Margin */
    --margin: 1.6rem;
    /* Border radius */
    --border-radius: .8rem;
    /* Gap unit */
    --gap-unit: .8rem;
}

* {
    box-sizing: border-box;

}

html {
    font-size: 10px;
}

body {
    margin: 0;
    padding: 0;
    font-size: var(--font-size16);
    font-family: var(--font-jp);
    font-weight: 400;
    color: var(--color-white);
    line-height: 1.6;
    background-color: var(--color-bg-base);
}

.hx1 {
    content: "";
    height: var(--pxunit);
}

.hx2 {
    content: "";
    height: calc(var(--pxunit)*2);
}

.hx3 {
    content: "";
    height: calc(var(--pxunit)*3);
}

.hx4 {
    content: "";
    height: calc(var(--pxunit)*4);
}

.hx5 {
    content: "";
    height: calc(var(--pxunit)*5);
}

.hx6 {
    content: "";
    height: calc(var(--pxunit)*6);
}

.hx7 {
    content: "";
    height: calc(var(--pxunit)*7);
}

.hx8 {
    content: "";
    height: calc(var(--pxunit)*8);
}

.hx9 {
    content: "";
    height: calc(var(--pxunit)*9);
}

.hx10 {
    content: "";
    height: calc(var(--pxunit)*10);
}

.hx11 {
    content: "";
    height: calc(var(--pxunit)*11);
}

.hx12 {
    content: "";
    height: calc(var(--pxunit)*12);
}

.hx13 {
    content: "";
    height: calc(var(--pxunit)*13);
}

.hx14 {
    content: "";
    height: calc(var(--pxunit)*14);
}

.hx15 {
    content: "";
    height: calc(var(--pxunit)*15);
}

.hx16 {
    content: "";
    height: calc(var(--pxunit)*16);
}

.hx17 {
    content: "";
    height: calc(var(--pxunit)*17);
}

.hx18 {
    content: "";
    height: calc(var(--pxunit)*18);
}

.hx19 {
    content: "";
    height: calc(var(--pxunit)*19);
}

.hx20 {
    content: "";
    height: calc(var(--pxunit)*20);
}

/*#endregion var*/

/*#region RESET*/
html,
body {
    overflow-x: hidden;
}

html {
    scroll-behavior: smooth;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0px;
    padding: 0px;
    font-weight: normal;
}

p {
    margin: 0px;
    padding: 0px;
}

a {
    text-decoration: none;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    transition: all 0.3s linear;
}

a:hover,
a:focus,
a:active {
    outline: none;
    text-decoration: none;
}

input {
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    transition: all 0.3s linear;
}

input:hover,
input:focus,
input:active {
    outline: none;
}

input::-webkit-input-placeholder {
    color: #333333;
}

input::-moz-placeholder {
    color: #333333;
}

input:-ms-input-placeholder {
    color: #333333;
}

input:-moz-placeholder {
    color: #333333;
}

textarea::-webkit-input-placeholder {
    color: #333333;
}

textarea::-moz-placeholder {
    color: #333333;
}

textarea:-ms-input-placeholder {
    color: #333333;
}

textarea:-moz-placeholder {
    color: #333333;
}

button:focus {
    outline: 0;
}

ul {
    margin: 0px;
    padding: 0px;
}

strong {
    font-weight: bold;
}

ul li {
    list-style-type: none;
}

img {
    border: 0px;
    pointer-events: auto;
    user-drag: none;
    -webkit-user-drag: none;
}

.clearfix {
    clear: both;
    overflow: hidden;
}

/*#endregion RESET*/


/*#region layout*/
.wrapper {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;
    padding: calc(var(--gap-unit)*4.75) 0 calc(var(--gap-unit)*6);
    background-image: url(../img/bg.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.wrapper::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(4, 7, 12, 0.18) 0%, rgba(4, 7, 12, 0.92) 100%), linear-gradient(90deg, rgba(4, 7, 12, 0.94) 0%, rgba(4, 7, 12, 0.62) 28%, rgba(4, 7, 12, 0.68) 72%, rgba(4, 7, 12, 0.96) 100%);
}

.content {
    position: relative;
    max-width: 460px;
    margin: 0 auto;
    background-color: var(--color-black);
    border-radius: calc(var(--border-radius)*2);
    overflow: hidden;
}

.sec__heading {
    position: relative;
    display: flex;
    flex-direction: column;
    width: fit-content;
    margin: 0 auto;
    z-index: 2;
}

.sec__title {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--gap-unit);
}

.sec__title-en {
    font-size: 4.4rem;
    font-family: var(--font-bebas);
    font-weight: 400;
    text-transform: uppercase;
    color: #F5F7FA;
    line-height: 1;
    letter-spacing: -.01em;
}

.sec__title-jp {
    font-size: var(--font-size18);
    font-family: var(--font-zen);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.01em;
    color: #F5F7FA;
}

.sec__title-separator {
    display: flex;
    width: 2rem;
}

.sec__title-separator img {
    width: 100%;
}

.sec__heading-line {
    display: block;
    width: 8.6rem;
    height: .3rem;
    background: linear-gradient(90deg, #E90016 0%, rgba(233, 0, 22, 0) 100%);
    box-shadow: 0px 0px 42px 0px #E9001647, 0px 0px 18px 0px #E90016A6;
}

.lower__heading {
    position: relative;
    display: flex;
    justify-content: center;
    padding: calc(var(--gap-unit)*6) var(--margin) 0;
}

.lower__title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.lower__title img {
    width: 120%;
}

.lower__title-en {
    position: relative;
    font-size: var(--font-size36);
    font-family: var(--font-bebas);
    font-weight: 900;
    text-transform: uppercase;
    color: #D8DDE6;
    line-height: 1.4;
    letter-spacing: .02em;
}

.page__dislosure .lower__title-en {
    color: var(--color-black);
}

.lower__title-en .front {
    position: relative;
    z-index: 2;
}

.lower__title-en .back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-text-stroke: 2px #EC221F;
}

.lower__title-ja {
    font-size: var(--font-size12);
    font-weight: 900;
    line-height: 1.5;
    color: #D8DDE6;
    letter-spacing: .3em;
}

.page__dislosure .lower__title-ja {
    color: #05010B;
}

.lower__body {
    position: relative;
    padding: calc(var(--gap-unit)*10) 0;
}
/*#endregion layout*/


/*#region loading*/
.loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999999999999999999;
}

.loading__box {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30rem;
    height: 25rem;
    z-index: 9999999999999999999;
    text-align: center;
}

.loading__wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--gap-unit)*.5);
}

.loading__logo {
    width: 30rem;
    margin-bottom: 0.4rem;
    animation: flashanime .8s infinite;
}

.loading__txt {
    text-align: center;
    font-size: var(--font-size14);
    padding-top: 0.6rem;
    letter-spacing: 0.1px;
    font-weight: 600;
    animation: flashanime .8s infinite;
    color: var(--color-white);
}

@keyframes flashanime {
    0% {
      opacity:.3;
    }
    50% {
      opacity:1;
    }
    100% {
      opacity:.3;
    }
  }

.loading__txt span {
    display: inline-block;
    position: relative;
    animation-name: jump;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

.loading__txt-space {
    margin-right: 0.3em;
}

.loading__txt span:nth-child(1) { animation-delay: 0s; }
.loading__txt span:nth-child(2) { animation-delay: 0.1s; }
.loading__txt span:nth-child(3) { animation-delay: 0.2s; }
.loading__txt span:nth-child(4) { animation-delay: 0.3s; }
.loading__txt span:nth-child(5) { animation-delay: 0.4s; }
.loading__txt span:nth-child(6) { animation-delay: 0.5s; }
.loading__txt span:nth-child(7) { animation-delay: 0.6s; }
.loading__txt span:nth-child(8) { animation-delay: 0.7s; }
.loading__txt span:nth-child(9) { animation-delay: 0.8s; }
.loading__txt span:nth-child(10) { animation-delay: 0.9s; }
.loading__txt span:nth-child(11) { animation-delay: 1s; }

@keyframes jump {
    0% { transform: translateY(0); }
    10% { transform: translateY(-5px); }
    20% { transform: translateY(0); }
    100% { transform: translateY(0); }
}

.loading__mask {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100vh;
    background-color: var(--color-black);
    z-index: 999999999;
}

.loading__mask.is-loaded {
    animation:0.4s ease-in rotation1 forwards;
}

@keyframes rotation1 {
    0%{ 
        height:100vh;
    }

    100%{ 
        height:0vh; 
        background: var(--color-black); 
    }
}

.page-thanks {
    background-color: var(--color-black);
    min-height: 100vh;
}
/*#endregion loading*/




/*#region animation*/
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    filter: blur(10px);
    transition: opacity 1.5s ease, transform 1.5s ease, filter 1.5s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

.fade-in-down {
    opacity: 0;
    transform: translateY(-30px);
    filter: blur(10px);
    transition: opacity 1s ease, transform 1s ease, filter 1.5s ease
}

.fade-in-down.visible {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

.fade-in-zoom {
    opacity: 0;
    transform: scale(0);
    transition: opacity 1s ease, transform 1s ease;
}

.fade-in-zoom.visible {
    opacity: 1;
    transform: scale(1);
}


.fade-in-R {
    opacity: 0;
    transform: translateX(30px);
    filter: blur(10px);
    transition: opacity 1s ease, transform 1s ease, filter 1.5s ease
}

.fade-in-R.visible {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
}


.fade-in-L {
    opacity: 0;
    transform: translateX(-30px);
    filter: blur(10px);
    transition: opacity 1s ease, transform 1s ease, filter 1.5s ease;
}

.fade-in-L.visible {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
}

.fade-in-blur {
    opacity: 0;
    filter: blur(10px);
    transition: opacity 1.5s ease, filter 1.5s ease;
}

.fade-in-blur.visible {
    opacity: 1;
    filter: blur(0);
}
/*#endregion animation*/



/*#region header*/
.gheader {
    display: none;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 460px;
    height: var(--headerH);
    background-color: var(--color-black);
    z-index: 999;
    border: solid var(--color-gray);
    border-width: 0 2px;
}

.gheader__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 0 calc(var(--margin)*.8);
}

.gheader__logo {
    display: flex;
    width: 28rem;
}

.gheader__logo img {
    width: 100%;
}

.gheader__btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
    background: linear-gradient(180deg, #65F561 0%, #43E33F 48%, #2BC92F 100%);
    font-family: var(--font-bebas);
    font-size: var(--font-size14);
    font-weight: 400;
    color: var(--color-white);
    line-height: 1;
}

.gheader__btn img {
    width: 3rem;
}

/*#endregion header*/

/*#region nav*/
.sidenav {
    position: fixed;
    top: calc(var(--gap-unit)*4.5);
    bottom: calc(var(--gap-unit)*4.5);
    width: 24vw;
    background: linear-gradient(180deg, rgba(5, 8, 13, 0.1) 0%, rgba(5, 8, 13, 0.76) 100%);
    border-radius: calc(var(--border-radius)*3);
    overflow: hidden;
    border: 1px solid var(--color-red-4622, #E9001638)
}

.sidenav--left {
    left: 2vw;
}

.sidenav--right {
    right: 2vw;
}

.sidenav::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(176.4deg, rgba(233, 0, 22, 0.18) 0%, rgba(233, 0, 22, 0) 34%, rgba(17, 217, 255, 0.08) 72%, rgba(233, 0, 22, 0.12) 100%);
    border-radius: calc(var(--border-radius)*3);
}

.sidenav__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2vw;
    padding: 2.8vw 1.2vw;
    z-index: 2;
}

.sidenav__logo {
    display: flex;
    width: 20vw;
}

.sidenav__logo-link {
    display: flex;
    width: 100%;
}

.sidenav__logo-link img {
    width: 100%;
}

.sidenav__list {
    display: flex;
    flex-direction: column;
    gap: .7vw;
}

.sidenav--right .sidenav__list {
    align-items: flex-end;
}

.sidenav__item {
    display: flex;
}

.sidenav__brand {
    font-size: var(--font-size20);
    font-family: var(--font-bebas);
    font-weight: 100;
    line-height: 1;
    letter-spacing: 2px;
    color: #FFFFFFB8;
    margin-bottom: .5vw;
}

.sidenav__link,
.sidenav__txt {
    position: relative;
    display: flex;
    align-items: center;
    font-size: 1.2vw;
    font-family: var(--font-bebas);
    font-weight: 100;
    line-height: 1.2;
    letter-spacing: 1.5px;
    color: #FFFFFF61;
    transition: color 0.35s ease, transform 0.35s ease, text-shadow 0.35s ease;
}

.sidenav__link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -.2vw;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, #D8DDE6 0%, #61525B 31.28%, #8A1010 90.37%);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.35s ease;
}

.sidenav__link:hover,
.sidenav__link:focus-visible {
    color: var(--color-white);
    transform: translateX(.3vw);
}

.sidenav__link:hover::after,
.sidenav__link:focus-visible::after {
    transform: scaleX(1);
}

.sidenav__link--audition {
    font-size: 1.6vw;
    margin-bottom: 1.2vw;
    color: #FFFFFFB8;
}

.sidenav__link--audition::after {
    height: 2px;
    background: linear-gradient(90deg, #E90016 0%, rgba(233, 0, 22, 0.35) 100%);
}

.sidenav__link--audition:hover,
.sidenav__link--audition:focus-visible {
    text-shadow: 0 0 1.2vw rgba(233, 0, 22, 0.45);
}

.sidenav--right .sidenav__link::after {
    transform-origin: right center;
}

.sidenav--right .sidenav__link:hover,
.sidenav--right .sidenav__link:focus-visible {
    transform: translateX(-.3vw);
}

.sidenav__btn {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .55vw;
    font-size: 1.5vw;
    font-weight: bold;
    color: var(--color-white);
    letter-spacing: .04em;
    line-height: 1;
    width: fit-content;
    padding: 1.3vw 3.3vw;
    background: linear-gradient(180deg, #65F561 0%, #43E33F 48%, #2BC92F 100%);
    box-shadow: 0px 0px 40px 0px #43E33F47, 0px 0px 16px 0px #43E33FB2, 0px -5px 0px 0px #00000024 inset, 0px 2px 0px 0px #FFFFFF73 inset;
    border-radius: 999px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
}

.sidenav__btn:hover,
.sidenav__btn:focus-visible {
    transform: translateY(-.15vw);
    filter: brightness(1.08);
    box-shadow: 0px 0px 56px 0px #43E33F66, 0px 0px 24px 0px #43E33FD9, 0px -5px 0px 0px #00000024 inset, 0px 2px 0px 0px #FFFFFF73 inset;
}

.sidenav__btn:active {
    transform: translateY(.05vw);
    filter: brightness(0.98);
}

.sidenav__btn-txt {
    line-height: 1;
}

.sidenav__btn-icon {
    display: flex;
    width: 2.2vw;
}

.sidenav__btn-icon img,
.sidenav__btn-icon svg {
    width: 100%;
}



/*#endregion nav*/

/*#region content*/

/* ------fv style----- */
.fv {
    position: relative;
    background-image: url(../img/fv_bg.png);
    background-color: var(--color-black);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.fv::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(3, 5, 8, 0.1) 0%, rgba(3, 5, 8, 0.38) 41.83%, rgba(3, 5, 8, 0.82) 72.12%, #05070B 85%);
    z-index: 1;
}

.fv::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(../img/fv_mask.png);
    background-size: 100% auto;
    background-position: center bottom;
    background-repeat: no-repeat;
}

.fv__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: calc(var(--gap-unit)*2) var(--margin) calc(var(--gap-unit)*6.25);
    z-index: 2;
}

.fv__logo {
    position: absolute;
    top: calc(var(--gap-unit)*2);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    width: 8rem;
}

.fv__logo img {
    width: 100%;
}

.fv__info {
    display: flex;
    flex-direction: column;
}

.fv__status {
    display: flex;
    justify-content: space-between;
}

.fv__mission {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: calc(var(--gap-unit)*.8);
    font-size: 1.1rem;
    font-weight: 100;
    line-height: 1;
    letter-spacing: .08em;
    color: var(--color-white);
    padding: calc(var(--gap-unit)*.75) calc(var(--gap-unit)*1.25);
    padding-right: var(--gap-unit);
    background: #0305088F;
    border: 1px solid #FFFFFF2E;
    box-shadow: 0px 0px 16px 0px #00000073;
    clip-path: polygon(1rem 0%, 100% 0%, 100% calc(100% - 1rem), calc(100% - 1rem) 100%, 0% 100%, 0% 1rem);
}

.fv__mission-icon {
    display: block;
    width: 7px;
    height: 7px;
    background-color: var(--color-red);
    border-radius: 50%;
    box-shadow: 0px 0px 14px 0px #E90016;
}

.fv__mission-txt {
    flex: 1;
    opacity: .8;
}

.fv__time {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: calc(var(--gap-unit)*.8);
    font-size: var(--font-size12);
    font-weight: 100;
    line-height: 1;
    padding: calc(var(--gap-unit)*.75) calc(var(--gap-unit)*1.25); 
    background: #0305088F;
    border: 1px solid #FFFFFF2E;
    box-shadow: 0px 0px 16px 0px #00000073;
    clip-path: polygon(10px 0%, 100% 0%, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0% 100%, 0% 10px);
}

.fv__time-num {
    font-size: 1.5rem;
    color: #11D9FF;
    opacity: .8;
}

.fv__time-txt {
    opacity: .8;
}

.fv__time-count {
    font-size: var(--font-size14);
    color: #FF3346;
    opacity: .9;
}

.fv__icons {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.fv__icon {
    display: flex;
}

.fv__icon01 {
    width: 7.5rem;
    margin-left: -.9rem;
}

.fv__icon02 {
    width: 10rem;
    margin-right: -.2rem;
}

.fv__icon img {
    width: 100%;
}

.fv__main {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-unit)*3);
    margin-top: 15rem;
    padding: 0 calc(var(--gap-unit)*1.75);
}

.fv__title {
    display: flex;
    width: 100%;
}

.fv__title img {
    width: 100%;
}

.cta__btn {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: calc(var(--gap-unit)*2);
    padding: calc(var(--gap-unit)*2.75) calc(var(--gap-unit)*5);
    background: linear-gradient(180deg, #65F561 0%, #43E33F 48%, #2BC92F 100%);
    border-radius: 9999px;
    box-shadow: 0px 0px 40px 0px #43E33F47, 0px 0px 16px 0px #43E33FB2, 0px -5px 0px 0px #00000024 inset, 0px 2px 0px 0px #FFFFFF73 inset;
    transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
}

.cta__btn:hover,
.cta__btn:focus-visible {
    transform: translateY(-2px);
    filter: brightness(1.08);
    box-shadow: 0px 0px 56px 0px #43E33F66, 0px 0px 24px 0px #43E33FD9, 0px -5px 0px 0px #00000024 inset, 0px 2px 0px 0px #FFFFFF73 inset;
}

.cta__btn:active {
    transform: translateY(1px);
    filter: brightness(0.98);
}

.cta__btn-txt {
    font-size: var(--font-size22);
    font-weight: bold;
    color: var(--color-white);
    line-height: 1;
    letter-spacing: .04em;
    padding-bottom: 3px;
}

.cta__btn-icon {
    display: flex;
    width: 3rem;
}

.cta__btn-icon img,
.cta__btn-icon svg {
    width: 100%;
}



/* ------about style----- */
.about {
    position: relative;
    background-color: #0D0F12;
}

.about__inner {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-unit)*5);
    padding: calc(var(--gap-unit)*7.5) var(--margin) calc(var(--gap-unit)*3);
}

.about__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--gap-unit)*5);
}

.about__des {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-unit)*1.25);
}

.about__txt {
    font-size: var(--font-size16);
    color: var(--color-gray);
    line-height: 1.8;
    letter-spacing: .02em;
    text-align: center;
}

.about__txt-highlight {
    font-weight: 900;
    color: var(--color-white);
    text-decoration: underline;
    text-underline-offset: -.01em;
    text-decoration-thickness: .5rem;
    text-decoration-color: #E2262680;
}

.about__txt:last-child .about__txt-highlight:last-child {
    text-decoration-color: #E22626B2;
}

.about__img {
    display: flex;
    width: 100%;
}

.about__img img {
    width: 100%;
}



/* ------creator style----- */
.creator {
    position: relative;
    background-color: #0D0F12;
}

.creator__inner {
    display: flex;
    flex-direction: column;
    padding: calc(var(--gap-unit)*1.5) 0 calc(var(--gap-unit)*3);
}

.creator__slider {
    position: relative;
    display: flex;
    width: 100%;
    overflow: hidden;
}

.creator__slider-list {
    display: flex;
    list-style: none;
    animation: creator-slider 32s infinite linear both;
}

@keyframes creator-slider {
    from {
      transform: translateX(0);
    }
      to {
      transform: translateX(-100%);
    }
}

.creator__slider-item {
    display: flex;
    width: 18rem;
    aspect-ratio: 18/13;
    overflow: hidden;
}

.creator__slider-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}


/* ------recruit style----- */
.recruit {
    position: relative;
    background-color: #06080D
}

.recruit__inner {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-unit)*3);
    padding: calc(var(--gap-unit)*7.5) var(--margin);
}

.recruit__title {
    font-size: var(--font-size24);
    font-weight: bold;
    color: var(--color-white);
    line-height: 1.8;
    text-align: center;
}

.recruit__title-highlight {
    position: relative;
    display: inline-block;
    color: #11D9FFE5;
    line-height: 1.8;
    text-shadow: 0px .4rem .4rem #FFFFFF40;
}

.recruit__title-highlight::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 120%;
    height: .3rem;
    background: linear-gradient(90deg, #11D9FF 0%, rgba(17, 217, 255, 0) 100%);
    box-shadow: 0px 0px .42rem 0px #11D9FF47, 0px 0px 1.8rem 0px #11D9FFA6;
}

.recruit__content {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-unit)*1.5);
    padding: 0 calc(var(--gap-unit)*2.5);
}

.recruit__item {
    display: flex;
    align-items: center;
    gap: calc(var(--gap-unit));
    padding: calc(var(--gap-unit)*1.8) calc(var(--gap-unit)*2);
    background-color: #FFFFFF0E;
    border: 1px solid #FFFFFF1A;
    clip-path: polygon(1.2rem 0%, 100% 0%, 100% calc(100% - 1.2rem), calc(100% - 1.2rem) 100%, 0% 100%, 0% 1.2rem);
}

.recruit__check {
    display: flex;
    width: 1.8rem;
}

.recruit__check img {
    width: 100%;
}

.recruit__txt {
    line-height: 1.3;
    color: #D8DDE6;
}

.recruit__cta {
    margin-top: calc(var(--gap-unit)*1.25);
    padding: 0 calc(var(--gap-unit)*1.75);
}




/* ------benefit style----- */
.benefit {
    position: relative;
    background-color: #090B11;
    overflow: hidden;
}

.benefit::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #090B1133;
    background-image: url(../img/benefit_bg.svg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.benefit__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-unit)*5);
    padding: calc(var(--gap-unit)*7.5) calc(var(--gap-unit)*2.5) calc(var(--gap-unit)*9);
    z-index: 2;
}

.benefit__content {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-unit)*3.75);
    z-index: 2;
}

.benefit__item {
    display: flex;
    flex-direction: column;
    padding: calc(var(--gap-unit)*2);
    gap: calc(var(--gap-unit)*2);
    background-color: #080B10;
    border: 1px solid #FFFFFF24;
    box-shadow: 2px 4px 20px 0px #D8DDE633;
}

.benefit__img {
    display: flex;
    width: 100%;
    aspect-ratio: 19/8;
    box-shadow: 4px 4px 4px 0px #FFFFFF14;
    overflow: hidden;
}

.benefit__img img {
    width: 100%;
}

.benefit__main {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--gap-unit)*1.25);
}

.benefit__title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--gap-unit));
}

.benefit__title-txt {
    position: relative;
    font-size: var(--font-size24);
    font-weight: bold;
    line-height: 1.2;
    letter-spacing: .32px;
}

.benefit__title-txt .front {
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.benefit__item:nth-child(odd) .benefit__title-txt .front {
    background-image: linear-gradient(180deg, #FF3B3B -15.86%, #FF3B3B 7%, #FFFFFF 41.29%, #D7EAFF 69.86%, #3EA0FF 98.43%);
}

.benefit__item:nth-child(even) .benefit__title-txt .front {
    background-image: linear-gradient(180deg, #FF3B3B -19.43%, #FF3B3B 4.5%, #FFFFFF 40.39%, #D7EAFF 70.31%, #3EA0FF 100.22%);
}

.benefit__title-txt .back {
    position: absolute;
    top: calc(var(--gap-unit)*.7);
    left: 0;
    width: 100%;
    height: 100%;
    filter: blur(1rem);
    -webkit-filter: blur(1rem);
}

.benefit__item:nth-child(odd) .benefit__title-txt .back {
    color: #FF3B3B;
}

.benefit__item:nth-child(even) .benefit__title-txt .back {
    color: #11D9FF;
}

.benefit__title-line {
    display: flex;
    width: 24.5rem;
}

.benefit__title-line img {
    width: 100%;
}

.benefit__txt {
    line-height: 1.8;
    letter-spacing: .02em;
    color: #D8DDE6;
    text-align: center;
}

.benefit__dot {
    position: absolute;
    width: 40rem;
    height: 40rem;
    border-radius: 50%;
    filter: blur(12rem);
    -webkit-filter: blur(12rem);
    background-color: #EC221F26;
}

.benefit__dot--01 {
    top: -6rem;
    left: -17.1rem;
    
}

.benefit__dot--02 {
    bottom: -3rem;
    right: -20.6rem;
}




/* ------flow style----- */
.flow {
    position: relative;
    background-color: #06080D;
    border-top: 1px solid #FFFFFF14;
}

.flow__inner {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-unit)*10);
    padding: calc(var(--gap-unit)*7.5) calc(var(--gap-unit)*2.5);
}

.flow__content {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-unit)*5);
}

.flow__item {
    position: relative;
    display: flex;
    align-items: center;
    gap: calc(var(--gap-unit)*2);
    padding: calc(var(--gap-unit)*2) calc(var(--gap-unit)*1.5);
    background-color: #FFFFFF0B;
    border: 1px solid #FFFFFF24;
}

.flow__item::after {
    content: "";
    position: absolute;
    bottom: -3.5rem;
    left: 50%;
    display: block;
    width: 2rem;
    height: 2rem;
    transform: rotate(45deg) translateX(-50%);
    background: #FFFFFF01;
    border-width: 0 .4rem .4rem 0;
    border-style: solid;
    border-color: transparent #43E33F #11D9FF transparent;
    box-shadow: 0px 0px 1.4rem 0px #11D9FF73, .7rem 0 0px 0px #FFFFFF1F;
}

.flow__item:last-child::after {
    display: none;
}

.flow__number {
    position: absolute;
    left: 1.6rem;
    top: -1.7rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--font-size14);
    font-family: var(--font-Oxanium);
    font-weight: 100;
    color: #05070B;
    line-height: 1;
    background-color: var(--color-white);
    padding: calc(var(--gap-unit)*.7) calc(var(--gap-unit)*2.5);
    background-color: var(--color-white);
    border: 2px solid #05070B;
}

.flow__shape {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 10rem;
    height: 9rem;
    background-color: #111722;
    background-image: linear-gradient(131.27deg, rgba(17, 217, 255, 0.18) 0%, rgba(233, 0, 22, 0.16) 100%);
    border-radius: var(--gap-unit);
    border: 1px solid #FFFFFF1F;
}

.flow__shape img {
    width: 6rem;
}

.flow__main {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-unit)*.75);
}

.flow__title {
    font-size: var(--font-size18);
    font-weight: 900;
    line-height: 1.8;
    letter-spacing: .02em;
    color: var(--color-white);
}

.flow__txt {
    font-size: var(--font-size16);
    line-height: 1.3;
    letter-spacing: .32px;
    color: #A9B3C4;
}





/* ------entry style----- */
.entry {
    position: relative;
    background-color: #0D0F12;
    background-image: url(../img/entry_bg.svg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}

.entry::before,
.entry::after {
    content: "";
    position: absolute;
    width: 40rem;
    height: 40rem;
    border-radius: 50%;
    filter: blur(12rem);
    -webkit-filter: blur(12rem);
    background-color: #EC221F26;
}

.entry::before {
    top: -6rem;
    left: -17.1rem;
}

.entry::after {
    bottom: -7.2rem;
    right: -16rem;
}

.entry__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-unit)*5);
    padding: calc(var(--gap-unit)*7) calc(var(--margin)*2);
    z-index: 2;
}

.entry__content {
    display: flex;
    align-items: center;
    gap: calc(var(--gap-unit)*3.75);
}

.entry__col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-unit)*2.5);
}

.entry__item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--gap-unit)*1.25);
    aspect-ratio: 1/1;
    background-color: #FFFFFFF0;
    border: 2px solid #111111;
    padding-top: calc(var(--gap-unit)*2.5);
}

.entry__item::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    display: block;
    width: 5rem;
    height: 5rem;
    background-color: #990313;
    clip-path: polygon(0 0, 100% 0, 0 100%);
}

.entry__col:last-child .entry__item::before {
    background-color: #0D90AB;
}

.entry__item::after {
    content: "✓";
    position: absolute;
    top: -1.1rem;
    left: .3rem;
    font-size: var(--font-size32);
    font-weight: bold;
}

.entry__col:first-child .entry__item::after {
    color: #00B881;
    text-shadow: 1px 1px 2px #FFFFFF;
}

.entry__col:last-child .entry__item::after {
    color: #FFFFFF;
    text-shadow: 1px 1px 2px #06080D;
}

.entry__col:first-child .entry__item {
    box-shadow: 5px 5px 0px 0px #E90016A6;
}

.entry__col:last-child .entry__item {
    box-shadow: 5px 5px 0px 0px #11D9FFA6;
}

.entry__img {
    display: flex;
    width: 10rem;
}

.entry__img img {
    width: 100%;
}

.entry__title {
    font-size: var(--font-size14);
    font-weight: bold;
    line-height: 1.2;
    letter-spacing: .32px;
    color: #111111;
    text-align: center;
}



/* ------notice style----- */
.notice {
    position: relative;
    background-color: #06080D;
}

.notice__inner {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-unit)*5);
    padding: calc(var(--gap-unit)*7.5) var(--margin);
}

.notice__content {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-unit)*1.5);
}

.notice__txt {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--gap-unit));
    font-size: var(--font-size14);
    line-height: 1.5;
    letter-spacing: .32px;
    color: #E9EDF3;
}

.notice__txt::before {
    content: "○";
    font-size: var(--font-size12);
    color: var(--color-white);
}


/* ------privacy style----- */
.privacy {
    position: relative;
    background-color: #06080D;
}

.privacy__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-unit)*5);
    padding: calc(var(--gap-unit)*7.5) var(--margin);
    padding-top: calc(var(--gap-unit)*4);
}

.privacy__txt {
    font-size: var(--font-size14);
    line-height: 1.8;
    letter-spacing: .01em;
    color: #D8DDE6;
}
/*#endregion content*/


/*#region privacy*/
.page__privacy {
    position: relative;
    background-color: var(--color-black);
    background-image: linear-gradient(90deg, #D8DDE6 0%, #61525B 31.63%, #8A1010 90.37%);
}

.page__privacy::before {
    content: "";
    position: absolute;
    inset: 2px;
    background-color: var(--color-black);
    border-radius: calc(var(--border-radius)*2);
}

.page__dislosure {
    color: #05010B;
    background-color: var(--color-black);
    background-image: linear-gradient(90deg, #D8DDE6 0%, #61525B 31.63%, #8A1010 90.37%);
}

.page__dislosure::before {
    content: "";
    position: absolute;
    inset: 2px;
    background-color: var(--color-white);
    border-radius: calc(var(--border-radius)*2);
}

.privacy__regarding {
    margin-top: calc(var(--gap-unit)*10);
}

.privacy__block {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-unit)*2);
    padding: 0 calc(var(--margin)*1.5);
}

.privacy__regulation .privacy__block {
    padding-bottom: calc(var(--gap-unit)*10);
}

.privacy__regulation .privacy__block::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, #D8DDE6 0%, #61525B 31.63%, #8A1010 90.37%);
}

.privacy__heading {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--font-size16);
    font-weight: bold;
    line-height: 2;
    width: fit-content;
    padding: 1px calc(var(--gap-unit)*1.25);
    background: linear-gradient(90deg, #D8DDE6 0%, #61525B 31.28%, #8A1010 90.37%);
}

.privacy__txt {
    font-size: 1.5rem;
    font-weight: 400;
}

.lower__block {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-unit)*2);
    padding: 0 calc(var(--margin)*1.5);
    margin-top: calc(var(--gap-unit)*4);
}

.page__dislosure .lower__block:first-child {
    margin-top: 0;
}

.lower__subheading {
    display: flex;
    align-items: center;
    width: 100%;
}

.lower__subheading-title {
    position: relative;
    display: flex;
    font-size: var(--font-size16);
    font-weight: bold;
    line-height: 2;
    width: fit-content;
    padding: 1px;
    background: linear-gradient(90deg, #D8DDE6 0%, #61525B 31.63%, #8A1010 90.37%);
}

.lower__subheading-title span {
    display: flex;
    background-color: var(--color-black);
    padding: 1px calc(var(--gap-unit)*1.25);
}

.page__dislosure .lower__subheading-title span {
    background-color: var(--color-white);
}

.lower__subheading-line {
    flex: 1;
    display: block;
    height: 1px;
    background: linear-gradient(90deg, #D8DDE6 0%, #61525B 31.63%, #8A1010 90.37%);
}

.lower__txt {
    font-size: 1.5rem;
    font-weight: 400;
}

.lower__txt li::before {
    content: "・";
}


/*#region footer*/
.footer {
    position: relative;
    border-top: 1px solid #FFFFFF0D;
}

.page__privacy .footer,
.page__dislosure .footer {
    background-color: transparent;
}

.page__privacy .footer::before,
.page__dislosure .footer::before {
    content: "";
    position: absolute;
    inset: 2px;
    background-color: var(--color-black);
    border-radius: 0 0 calc(var(--border-radius)*2) calc(var(--border-radius)*2);
}

.footer__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--gap-unit)*5);
    padding: calc(var(--gap-unit)*4.5) var(--margin);
    z-index: 2;
}

.footer__logo {
    display: flex;
    width: 32rem;
}

.footer__logo img {
    width: 100%;
}

.footer__menu {
    display: flex;
    justify-content: center;
    gap: calc(var(--gap-unit) * 3);
}

.footer__link {
    position: relative;
    font-size: var(--font-size12);
    font-weight: 900;
    line-height: 1;
    color: #4B5563;
}

.footer__copy {
    font-size: 1rem;
    font-weight: bold;
    color: #1F2937;
    text-align: center;
    line-height: 1.5;
}
/*#endregion footer*/