@charset "utf-8";


/**
 * スマホ用設定
 */
@media ( width < 768px ) {

    #mv-slider-1 {
        position: relative;
        margin: calc( 100vw * 144 / 780 ) auto 0;
        padding: 0;
        width: 100%;
        height: auto;
        aspect-ratio: 780 / 1100;
        background: #a00100;
    }
    #mv-slider-1::before {
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        width: 100%;
        height: auto;
        aspect-ratio: 1052 / 572;
        background: #860200;
        clip-path: polygon( 0 0, 100% 0, 0 100% );
    }
    #mv-slider-1 .mv-txt1 {
        position: absolute;
        top: 5%;
        left: 5%;
        margin: 0;
        padding: 0;
        width: 90%;
        height: auto;
    }
    #mv-slider-1 .mv-txt1 img {
        margin: 0;
        padding: 0;
        width: 100%;
        height: auto;
    }
    #mv-slider-1 .mv-txt2 {
        position: absolute;
        top: 59%;
        right: 5%;
        margin: 0;
        padding: 0;
        width: 67%;
        height: auto;
    }
    #mv-slider-1 .mv-txt2 img {
        margin: 0;
        padding: 0;
        width: 100%;
        height: auto;
    }
    #mv-slider-1 .mv-txt3 {
        position: absolute;
        top: 83%;
        left: 5%;
        margin: 0;
        padding: 0;
        width: 90%;
        color: #fff;
        font-size: 3.6vw;
        font-weight: 500;
        text-align: center;
        line-height: calc( 45 / 23 );
    }

    #you-can-shine {
        margin: 0 auto;
        padding: 0;
        width: 100%;
        height: auto;
        aspect-ratio: 780 / 1600;
    }
    #you-can-shine .shine-pic {
        position: absolute;
        top: 2%;
        left: 5%;
        margin: 0;
        padding: 0;
        width: 90%;
        height: auto;
    }
    #you-can-shine .shine-pic img {
        margin: 0;
        padding: 0;
        width: 100%;
        height: auto;
    }
    #you-can-shine .shine-catch {
        display: none;
    }
    #you-can-shine .shine-info {
        position: absolute;
        top: 40%;
        left: 5%;
        width: 90%;
    }
    #you-can-shine .shine-info > h2 {
        margin: 0;
        padding: 0;
        color: #a00200;
        font-size: 7.2vw;
        font-weight: 900;
        line-height: calc( 79 / 70 );
    }
    #you-can-shine .shine-info > p {
        margin: 1.0em 0 0;
        padding: 0;
        font-size: 3.6vw;
        font-weight: 500;
        line-height: calc( 54 / 30 );
    }
    #you-can-shine .shine-info > a {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin: 2.0em 0 0;
        padding: 0 6.0vw;
        width: 90%;
        height: auto;
        aspect-ratio: 664 / 144;
        font-size: 4.0vw;
        font-weight: 500;
        line-height: 1.0;
        border: 1px solid #B5B5B5;
        border-radius: 4.0em;
    }
    #you-can-shine .shine-info > a span {
        position: absolute;
        content: "";
        display: block;
        top: calc ( 50% - 4.0vw );
        right: 4.0vw;
        width: 8.0vw;
        height: auto;
        aspect-ratio: 1 / 1;
        background: #c30000;
        border-radius: 100%;
        transition: background 0.5s ease-out;
        overflow: hidden;
    }
    #you-can-shine .shine-info > a span::before {
        position: absolute;
        content: "";
        display: block;
        top: 30%;
        left: 30%;
        width: 40%;
        height: auto;
        aspect-ratio: 1 / 1;
        background: url(../images/icon-arrow-r-white.svg) no-repeat center / contain;
        transition: left 0.5s ease-out;
    }
    #you-can-shine .shine-info > a span::after {
        position: absolute;
        content: "";
        display: block;
        top: 30%;
        left: -130%;
        width: 40%;
        height: auto;
        aspect-ratio: 1 / 1;
        background: url(../images/icon-arrow-r-red.svg) no-repeat center / contain;
        transition: left 0.5s ease-out;
    }
    @media ( hover: hover ) {
        #you-can-shine .shine-info > a:hover {
            opacity: 1.0;
        }
        #you-can-shine .shine-info > a:hover span {
            background: #fff;
        }
        #you-can-shine .shine-info > a:hover span::before {
            left: 130%;
        }
        #you-can-shine .shine-info > a:hover span::after {
            left: 30%;
        }
    }

    #number {
        margin: 0 auto;
        padding: 12.0vw 5% 20.0vw;
        width: 100%;
        background: url(../images/top-pic02-sp.png) no-repeat center / contain;
    }
    #number > h2 {
        margin: 0;
        padding: 0;
        font-size: 7.2vw;
        font-weight: 900;
        text-align: left;
        line-height: calc( 79 / 70 );
    }
    #number > p {
        margin: 1.0em 0 0;
        padding: 0;
        font-size: 3.6vw;
        font-weight: 500;
        text-align: left;
        line-height: calc( 54 / 30 );
    }
    #number > .number-grid {
        margin: 8.0vw auto 0;
        padding: 0;
        width: 100%;
        display: grid;
        grid-template-columns: repeat( 2, 1fr );
        gap: 0;
    }
    #number > .number-grid .number-item {
        position: relative;
        margin: 0;
        padding: 4.0vw 4.0vw;
        width: 100%;
        background: #f4f4f480;
        border: 1px solid #cecece;
        border-radius: 1.0vw;

        -webkit-backdrop-filter: blur(0.2em);
        backdrop-filter: blur(0.2em);
    }
    #number > .number-grid .number-item > h3 {
        margin: 0;
        padding: 0;
        width: 100%;
    }
    #number > .number-grid .number-item > h3 span:nth-of-type(1) {
        display: block;
        margin: 0;
        padding: 0;
        width: 100%;
        color: #c30000;
        font-size: 4.0vw;
        font-weight: 400;
        font-family: var(--font-alphabet);
        text-align: center;
        line-height: 1.0;
    }
    #number > .number-grid .number-item > h3 span:nth-of-type(2) {
        display: block;
        margin: 0.5em 0 0;
        padding: 0;
        width: 100%;
        font-size: 5.2vw;
        font-weight: 700;
        text-align: center;
        line-height: 1.0;
    }
    #number > .number-grid .number-item > .number-icon {
        margin: 4.0vw auto 0;
        padding: 0;
        width: 40%;
        height: auto;
        aspect-ratio: 1 / 1;
    }
    #number > .number-grid .number-item > .number-icon img {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    #number > .number-grid .number-item > .number-txt {
        margin: 4.0vw auto 0;
        padding: 0;
        width: 100%;
        font-size: 4.0vw;
        font-weight: 500;
        font-family: var(--font-alphabet);
        text-align: center;
        line-height: 1.0;
    }
    #number > .number-grid .number-item > .number-txt span {
        font-size: 8.0vw;
        letter-spacing: 0.03em;
    }
    #number > .number-grid .number-item > .number-txt span.mid {
        font-size: 8.0vw;
    }
    #number > .number-grid .number-item:nth-child(1) {
        rotate: -3deg;
        z-index: 1;
    }
    #number > .number-grid .number-item:nth-child(2) {
        rotate: 3deg;
        translate: 0 15%;
        z-index: 3;
    }
    #number > .number-grid .number-item:nth-child(3) {
        z-index: 2;
    }
    #number > .number-grid .number-item:nth-child(4) {
        rotate: -3deg;
        translate: 0 5%;
        z-index: 4;
    }

    #genuine {
        margin: 0 auto;
        padding: 0;
        width: 100%;
        height: auto;
        aspect-ratio: 780 / 1400;
        background: #a00100;
    }
    #genuine > .genuine-pic {
        position: absolute;
        top: 45%;
        left: 0;
        translate: 0 -50%;
        margin: 0;
        padding: 0;
        width: 100%;
        height: auto;
        opacity: 0.2;
    }
    #genuine > .genuine-circle {
        position: absolute;
        top: 45%;
        left: 5%;
        translate: 0 -50%;
        margin: 0;
        padding: 0;
        width: 90%;
        height: auto;
        aspect-ratio: 1 / 1;
    }
    #genuine > .genuine-info {
        position: absolute;
        top: 45%;
        left: 0;
        translate: 0 -50%;
        margin: 0;
        padding: 0;
        width: 100%;
    }
    #genuine > .genuine-info > h2 {
        margin: 0;
        padding: 0;
        font-kerning: normal;
    }
    #genuine > .genuine-info > h2 > span:nth-of-type(1) {
        display: block;
        margin: 0 auto;
        padding: 0.2em;
        width: max-content;
        color: #fff;
        font-size: 8.0vw;
        font-weight: 900;
        text-align: center;
        line-height: 1.0;
        background: #000;
        border-radius: 1.0vw;
    }
    #genuine > .genuine-info > h2 > span:nth-of-type(1) span {
        font-weight: 700;
        font-family: var(--font-mincho);
    }
    #genuine > .genuine-info > h2 > span:nth-of-type(2) {
        display: block;
        margin: 4.0vw auto 0;
        padding: 0.2em;
        width: max-content;
        color: #fff;
        font-size: 8.0vw;
        font-weight: 900;
        text-align: center;
        line-height: 1.0;
        background: #000;
        border-radius: 1.0vw;
    }
    #genuine > .genuine-info > p {
        margin: 1.0em auto 0;
        padding: 0;
        color: #fff;
        font-size: 3.6vw;
        font-weight: 700;
        text-align: center;
        line-height: calc( 55 / 28 );
    }
    #genuine > .genuine-info > a {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin: 2.0em auto 0;
        padding: 0 6.0vw;
        width: 90%;
        height: auto;
        aspect-ratio: 664 / 144;
        color: #fff;
        font-size: 4.0vw;
        font-weight: 500;
        line-height: 1.0;
        border: 1px solid #B5B5B5;
        border-radius: 4.0em;
    }
    #genuine > .genuine-info > a span {
        position: absolute;
        content: "";
        display: block;
        top: calc ( 50% - 4.0vw );
        right: 4.0vw;
        width: 8.0vw;
        height: auto;
        aspect-ratio: 1 / 1;
        background: #fff;
        border-radius: 100%;
        transition: background 0.5s ease-out;
        overflow: hidden;
    }
    #genuine > .genuine-info > a span::before {
        position: absolute;
        content: "";
        display: block;
        top: 30%;
        left: 30%;
        width: 40%;
        height: auto;
        aspect-ratio: 1 / 1;
        background: url(../images/icon-arrow-r-red.svg) no-repeat center / contain;
        transition: left 0.5s ease-out;
    }
    #genuine > .genuine-info > a span::after {
        position: absolute;
        content: "";
        display: block;
        top: 30%;
        left: -130%;
        width: 40%;
        height: auto;
        aspect-ratio: 1 / 1;
        background: url(../images/icon-arrow-r-white.svg) no-repeat center / contain;
        transition: left 0.5s ease-out;
    }
    @media ( hover: hover ) {
        #genuine > .genuine-info > a:hover {
            opacity: 1.0;
        }
        #genuine > .genuine-info > a:hover span {
            background: #c30000;
        }
        #genuine > .genuine-info > a:hover span::before {
            left: 130%;
        }
        #genuine > .genuine-info > a:hover span::after {
            left: 30%;
        }
    }
    #genuine > .genuine-telop {
        position: absolute;
        bottom: 3.5%;
        left: 0%;
        width: max-content;
        color: #fff;
        font-size: 16.0vw;
        font-weight: 400;
        font-family: var(--font-alphabet);
        line-height: 1.0;
        letter-spacing: 0.03em;
        animation: anim-telop-sp 8.0s linear 0s infinite;
    }

    #results {
        margin: 0 auto;
        padding: 12.0vw 5%;
        width: 100%;
        height: auto;
    }
    #results .results-pic {
        margin: 0 auto;
        padding: 0;
        width: 100%;
        height: auto;
    }
    #results .results-pic img {
        margin: 0;
        padding: 0;
        width: 100%;
        height: auto;
    }
    #results .results-catch {
        display: none;
    }
    #results .results-info {
        margin: 8.0vw auto 0;
        padding: 0;
        width: 100%;
    }
    #results .results-info > h2 {
        margin: 0;
        padding: 0;
        font-size: 7.2vw;
        font-weight: 900;
        text-align: left;
        line-height: calc( 79 / 70 );
    }
    #results .results-info > h2 span {
        color: #a00200;
    }
    #results .results-info > p {
        margin: 1.0em 0 0;
        padding: 0;
        font-size: 3.6vw;
        font-weight: 500;
        line-height: calc( 54 / 30 );
    }
    #results .results-info > a {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin: 2.0em auto 0;
        padding: 0 6.0vw;
        width: 90%;
        height: auto;
        aspect-ratio: 664 / 144;
        font-size: 4.0vw;
        font-weight: 500;
        line-height: 1.0;
        border: 1px solid #B5B5B5;
        border-radius: 4.0em;
    }
    #results .results-info > a span {
        position: absolute;
        content: "";
        display: block;
        top: calc ( 50% - 4.0vw );
        right: 4.0vw;
        width: 8.0vw;
        height: auto;
        aspect-ratio: 1 / 1;
        background: #c30000;
        border-radius: 100%;
        transition: background 0.5s ease-out;
        overflow: hidden;
    }
    #results .results-info > a span::before {
        position: absolute;
        content: "";
        display: block;
        top: 30%;
        left: 30%;
        width: 40%;
        height: auto;
        aspect-ratio: 1 / 1;
        background: url(../images/icon-arrow-r-white.svg) no-repeat center / contain;
        transition: left 0.5s ease-out;
    }
    #results .results-info > a span::after {
        position: absolute;
        content: "";
        display: block;
        top: 30%;
        left: -130%;
        width: 40%;
        height: auto;
        aspect-ratio: 1 / 1;
        background: url(../images/icon-arrow-r-red.svg) no-repeat center / contain;
        transition: left 0.5s ease-out;
    }
    @media ( hover: hover ) {
        #results .results-info > a:hover {
            opacity: 1.0;
        }
        #results .results-info > a:hover span {
            background: #fff;
        }
        #results .results-info > a:hover span::before {
            left: 130%;
        }
        #results .results-info > a:hover span::after {
            left: 30%;
        }
    }

    #entry {
        margin: 0 auto;
        padding: 12.0vw 5%;
        width: 100%;
        background: #a00100;
    }
    #entry > h2 {
        margin: 0 auto;
        padding: 0;
        color: #fff;
        font-size: 7.2vw;
        font-weight: 700;
        font-family: var(--font-mincho);
        text-align: center;
        line-height: calc( 81 / 70 );
    }
    #entry > p {
        margin: 1.0em auto 0;
        padding: 0;
        color: #fff;
        font-size: 3.6vw;
        font-weight: 700;
        text-align: center;
        line-height: calc( 54 / 30 );
    }
    #entry > .txt {
        margin: 4.0vw auto 0;
        padding: 0;
        width: 90%;
        height: auto;
        aspect-ratio: 536 / 152;
    }
    #entry > .txt img {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    #entry > .entry-btns {
        margin: 8.0vw auto 0;
        padding: 0;
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 2.0vw 0;
    }
    #entry > .entry-btns > .entry-btn {
        position: relative;
        margin: 0;
        padding: 0;
        width: 100%;
        height: auto;
        aspect-ratio: 712 / 328;
        background: #950200;
        border-radius: 1.0vw;
        transition: none;
    }
    #entry > .entry-btns > .entry-btn > span:nth-of-type(1) {
        position: absolute;
        top: 50%;
        left: 0;
        translate: 0 -50%;
        margin: 0;
        padding: 0;
        width: 100%;
        color: #a00200;
        font-size: 8.0vw;
        font-weight: 400;
        font-family: var(--font-alphabet);
        text-align: center;
        line-height: 1.0;
        letter-spacing: 0.03em;
    }
    #entry > .entry-btns > .entry-btn > span:nth-of-type(2) {
        position: absolute;
        bottom: 52%;
        left: 0;
        margin: 0;
        padding: 0;
        width: 100%;
        color: #fff;
        font-size: 7.2vw;
        font-weight: 700;
        font-family: var(--font-mincho);
        text-align: center;
        line-height: 1.0;
    }
    #entry > .entry-btns > .entry-btn > span:nth-of-type(3) {
        position: absolute;
        top: 52%;
        left: 0;
        margin: 0;
        padding: 0;
        width: 100%;
        color: #fff;
        font-size: 3.6vw;
        font-weight: 500;
        text-align: center;
        line-height: 1.0;
    }
    #entry > .entry-btns > .entry-btn > span:nth-of-type(4) {
        position: absolute;
        bottom: 10%;
        right: 5%;
        display: block;
        width: 8.0vw;
        height: auto;
        aspect-ratio: 1 / 1;
        background: #c30000;
        border-radius: 100%;
        transition: background 0.5s ease-out;
        overflow: hidden;
    }
    #entry > .entry-btns > .entry-btn > span:nth-of-type(4)::before {
        position: absolute;
        content: "";
        display: block;
        top: 30%;
        left: 30%;
        width: 40%;
        height: auto;
        aspect-ratio: 1 / 1;
        background: url(../images/icon-arrow-r-white.svg) no-repeat center / contain;
        transition: left 0.5s ease-out;
    }
    #entry > .entry-btns > .entry-btn > span:nth-of-type(4)::after {
        position: absolute;
        content: "";
        display: block;
        top: 30%;
        left: -130%;
        width: 40%;
        height: auto;
        aspect-ratio: 1 / 1;
        background: url(../images/icon-arrow-r-red.svg) no-repeat center / contain;
        transition: left 0.5s ease-out;
    }
    @media ( hover: hover ) {
        #entry > .entry-btns > .entry-btn:hover {
            opacity: 1.0;
        }
        #entry > .entry-btns > .entry-btn:hover > span:nth-of-type(4) {
            background: #fff;
        }
        #entry > .entry-btns > .entry-btn:hover > span:nth-of-type(4)::before {
            left: 130%;
        }
        #entry > .entry-btns > .entry-btn:hover > span:nth-of-type(4)::after {
            left: 30%;
        }
    }

}


/**
 * PC用設定
 */
@media ( width >= 768px ) {

    #mv-slider-1 {
        position: relative;
        margin: 128px auto 0;
        padding: 0;
        width: 100%;
        height: auto;
        aspect-ratio: 1920 / 807;
        background: #a00100;
        z-indnex: 1;
    }
    #mv-slider-1::before {
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        width: calc( 100vw * 800 / 1920 );
        height: auto;
        aspect-ratio: 1052 / 572;
        background: #860200;
        clip-path: polygon( 0 0, 100% 0, 0 100% );
    }
    #mv-slider-1 .mv-txt1 {
        position: absolute;
        top: 14%;
        left: 0%;
        margin: 0;
        padding: 0;
        width: 100%;
        height: auto;
    }
    #mv-slider-1 .mv-txt1 img {
        margin: 0;
        padding: 0;
        width: 100%;
        height: auto;
    }
    #mv-slider-1 .mv-txt2 {
        position: absolute;
        top: 56%;
        right: 5%;
        margin: 0;
        padding: 0;
        width: calc( 100vw * 524 / 1920 );
        height: auto;
    }
    #mv-slider-1 .mv-txt2 img {
        margin: 0;
        padding: 0;
        width: 100%;
        height: auto;
    }
    #mv-slider-1 .mv-txt3 {
        position: absolute;
        top: 76%;
        left: 19%;
        margin: 0;
        padding: 0;
        color: #fff;
        font-size: calc( 100vw * 23 / 1920 );
        font-weight: 500;
        line-height: calc( 45 / 23 );
    }

    #you-can-shine {
        margin: 0 auto;
        padding: 0;
        width: 100%;
        height: auto;
        aspect-ratio: 1920 / 870;
    }
    #you-can-shine .shine-pic {
        position: absolute;
        top: 50%;
        right: 0;
        translate: 0 -50%;
        margin: 0;
        padding: 0;
        width: calc( 100vw * 873 / 1920 );
        height: auto;
    }
    #you-can-shine .shine-pic img {
        margin: 0;
        padding: 0;
        width: 100%;
        height: auto;
    }
    #you-can-shine .shine-catch {
        position: absolute;
        bottom: 88%;
        left: 1%;
        transform-origin: left bottom;
        transform: rotate( 90deg );
        margin: 0;
        padding: 0;
        color: #a00200;
        font-size: calc( 100vw * 115 / 1920 );
        font-weight: 400;
        font-family: var(--font-alphabet);
        line-height: 1.0;
        letter-spacing: 0.03em;
    }
    #you-can-shine .shine-info {
        position: absolute;
        top: 10%;
        left: 18%;
    }
    #you-can-shine .shine-info > h2 {
        margin: 0;
        padding: 0;
        color: #a00200;
        font-size: calc( 100vw * 70 / 1920 );
        font-weight: 900;
        line-height: calc( 79 / 70 );
    }
    #you-can-shine .shine-info > p {
        margin: 1.0em 0 0;
        padding: 0;
        font-size: calc( 100vw * 23 / 1920 );
        font-weight: 500;
        line-height: calc( 46 / 23 );
    }
    #you-can-shine .shine-info > a {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: flex-start;;
        margin: 2.0em 0 0;
        padding: 0 calc( 40 * 100vw / 1920 );
        width: calc( 392 * 100vw / 1920 );
        height: auto;
        aspect-ratio: 392 / 92;
        font-size: calc( 19 * 100vw / 1920 );
        font-weight: 500;
        line-height: 1.0;
        border: 1px solid #B5B5B5;
        border-radius: 4.0em;
    }
    #you-can-shine .shine-info > a span {
        position: absolute;
        content: "";
        display: block;
        top: calc ( 50% - 30 * 100vw / 1920 );
        right: calc( 20 * 100vw / 1920 );
        width: calc( 60 * 100vw / 1920 );
        height: auto;
        aspect-ratio: 1 / 1;
        background: #c30000;
        border-radius: 100%;
        transition: background 0.5s ease-out;
        overflow: hidden;
    }
    #you-can-shine .shine-info > a span::before {
        position: absolute;
        content: "";
        display: block;
        top: 30%;
        left: 30%;
        width: 40%;
        height: auto;
        aspect-ratio: 1 / 1;
        background: url(../images/icon-arrow-r-white.svg) no-repeat center / contain;
        transition: left 0.5s ease-out;
    }
    #you-can-shine .shine-info > a span::after {
        position: absolute;
        content: "";
        display: block;
        top: 30%;
        left: -130%;
        width: 40%;
        height: auto;
        aspect-ratio: 1 / 1;
        background: url(../images/icon-arrow-r-red.svg) no-repeat center / contain;
        transition: left 0.5s ease-out;
    }
    @media ( hover: hover ) {
        #you-can-shine .shine-info > a:hover {
            opacity: 1.0;
        }
        #you-can-shine .shine-info > a:hover span {
            background: #fff;
        }
        #you-can-shine .shine-info > a:hover span::before {
            left: 130%;
        }
        #you-can-shine .shine-info > a:hover span::after {
            left: 30%;
        }
    }

    #number {
        margin: 0 auto;
        padding: 80px max( 5%, calc( 50vw - 640px ) ) 160px;
        width: 100%;
        background: url(../images/top-pic02-pc.png) no-repeat center / contain;
    }
    #number > h2 {
        margin: 0;
        padding: 0;
        font-size: 70px;
        font-weight: 900;
        text-align: left;
        line-height: calc( 79 / 70 );
    }
    #number > p {
        margin: 1.0em 0 0;
        padding: 0;
        font-size: 23px;
        font-weight: 500;
        text-align: left;
        line-height: calc( 46 / 23 );
    }
    #number > .number-grid {
        margin: 60px auto 0;
        padding: 0;
        width: 100%;
        display: grid;
        grid-template-columns: repeat( 4, 1fr );
        gap: 0;
    }
    #number > .number-grid .number-item {
        position: relative;
        margin: 0;
        padding: 40px 20px;
        width: 100%;
        background: #f4f4f480;
        border: 1px solid #cecece;
        border-radius: 8px;

        -webkit-backdrop-filter: blur(0.2em);
        backdrop-filter: blur(0.2em);
    }
    #number > .number-grid .number-item > h3 {
        margin: 0;
        padding: 0;
        width: 100%;
    }
    #number > .number-grid .number-item > h3 span:nth-of-type(1) {
        display: block;
        margin: 0;
        padding: 0;
        width: 100%;
        color: #c30000;
        font-size: 19px;
        font-weight: 400;
        font-family: var(--font-alphabet);
        text-align: center;
        line-height: 1.0;
    }
    #number > .number-grid .number-item > h3 span:nth-of-type(2) {
        display: block;
        margin: 0.5em 0 0;
        padding: 0;
        width: 100%;
        font-size: 28px;
        font-weight: 700;
        text-align: center;
        line-height: 1.0;
    }
    #number > .number-grid .number-item > .number-icon {
        margin: 24px auto 0;
        padding: 0;
        width: 96px;
        height: auto;
        aspect-ratio: 1 / 1;
    }
    #number > .number-grid .number-item > .number-icon img {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    #number > .number-grid .number-item > .number-txt {
        margin: 24px auto 0;
        padding: 0;
        width: 100%;
        font-size: 23px;
        font-weight: 500;
        font-family: var(--font-alphabet);
        text-align: center;
        line-height: 1.0;
    }
    #number > .number-grid .number-item > .number-txt span {
        font-size: 48px;
        letter-spacing: 0.03em;
    }
    #number > .number-grid .number-item > .number-txt span.mid {
        font-size: 40px;
    }
    #number > .number-grid .number-item:nth-child(1) {
        rotate: -3deg;
        z-index: 1;
    }
    #number > .number-grid .number-item:nth-child(2) {
        rotate: 3deg;
        translate: 0 15%;
        z-index: 3;
    }
    #number > .number-grid .number-item:nth-child(3) {
        z-index: 2;
    }
    #number > .number-grid .number-item:nth-child(4) {
        rotate: -3deg;
        translate: 0 5%;
        z-index: 4;
    }

    #genuine {
        margin: 0 auto;
        padding: 0;
        width: 100%;
        height: auto;
        aspect-ratio: 1920 / 1280;
        background: #a00100;
    }
    #genuine > .genuine-pic {
        position: absolute;
        top: 40%;
        left: 0;
        translate: 0 -50%;
        margin: 0;
        padding: 0;
        width: 100%;
        height: auto;
        opacity: 0.2;
    }
    #genuine > .genuine-circle {
        position: absolute;
        top: 40%;
        left: 50%;
        translate: -50% -50%;
        margin: 0;
        padding: 0;
        width: calc( 100vw * 840 / 1920 );
        height: auto;
        aspect-ratio: 1 / 1;
    }
    #genuine > .genuine-info {
        position: absolute;
        top: 40%;
        left: 0;
        translate: 0 -50%;
        margin: 0;
        padding: 0;
        width: 100%;
    }
    #genuine > .genuine-info > h2 {
        margin: 0;
        padding: 0;
        font-kerning: normal;
    }
    #genuine > .genuine-info > h2 > span:nth-of-type(1) {
        display: block;
        margin: 0 auto;
        padding: 0.2em;
        width: max-content;
        color: #fff;
        font-size: calc( 84 * 100vw / 1920 );
        font-weight: 900;
        text-align: center;
        line-height: 1.0;
        background: #000;
        border-radius: 8px;
    }
    #genuine > .genuine-info > h2 > span:nth-of-type(1) span {
        font-weight: 700;
        font-family: var(--font-mincho);
    }
    #genuine > .genuine-info > h2 > span:nth-of-type(2) {
        display: block;
        margin: calc( 16 * 100vw / 1920 ) auto 0;
        padding: 0.2em;
        width: max-content;
        color: #fff;
        font-size: calc( 84 * 100vw / 1920 );
        font-weight: 900;
        text-align: center;
        line-height: 1.0;
        background: #000;
        border-radius: 8px;
    }
    #genuine > .genuine-info > p {
        margin: 1.0em auto 0;
        padding: 0;
        color: #fff;
        font-size: calc( 28 * 100vw / 1920 );
        font-weight: 700;
        text-align: center;
        line-height: calc( 55 / 28 );
    }
    #genuine > .genuine-info > a {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: flex-start;;
        margin: 2.0em auto 0;
        padding: 0 calc( 40 * 100vw / 1920 );
        width: calc( 392 * 100vw / 1920 );
        height: auto;
        aspect-ratio: 392 / 92;
        color: #fff;
        font-size: calc( 19 * 100vw / 1920 );
        font-weight: 500;
        line-height: 1.0;
        border: 1px solid #B5B5B5;
        border-radius: 4.0em;
    }
    #genuine > .genuine-info > a span {
        position: absolute;
        content: "";
        display: block;
        top: calc ( 50% - 30 * 100vw / 1920 );
        right: calc( 20 * 100vw / 1920 );
        width: calc( 60 * 100vw / 1920 );
        height: auto;
        aspect-ratio: 1 / 1;
        background: #fff;
        border-radius: 100%;
        transition: background 0.5s ease-out;
        overflow: hidden;
    }
    #genuine > .genuine-info > a span::before {
        position: absolute;
        content: "";
        display: block;
        top: 30%;
        left: 30%;
        width: 40%;
        height: auto;
        aspect-ratio: 1 / 1;
        background: url(../images/icon-arrow-r-red.svg) no-repeat center / contain;
        transition: left 0.5s ease-out;
    }
    #genuine > .genuine-info > a span::after {
        position: absolute;
        content: "";
        display: block;
        top: 30%;
        left: -130%;
        width: 40%;
        height: auto;
        aspect-ratio: 1 / 1;
        background: url(../images/icon-arrow-r-white.svg) no-repeat center / contain;
        transition: left 0.5s ease-out;
    }
    @media ( hover: hover ) {
        #genuine > .genuine-info > a:hover {
            opacity: 1.0;
        }
        #genuine > .genuine-info > a:hover span {
            background: #c30000;
        }
        #genuine > .genuine-info > a:hover span::before {
            left: 130%;
        }
        #genuine > .genuine-info > a:hover span::after {
            left: 30%;
        }
    }
    #genuine > .genuine-telop {
        position: absolute;
        bottom: 4%;
        left: 0%;
        width: max-content;
        color: #fff;
        font-size: calc( 236 * 100vw / 1920 );
        font-weight: 400;
        font-family: var(--font-alphabet);
        line-height: 1.0;
        letter-spacing: 0.03em;
        animation: anim-telop-pc 12.0s linear 0s infinite;
    }

    #results {
        margin: 0 auto;
        padding: 0;
        width: 100%;
        height: auto;
        aspect-ratio: 1920 / 732;
        overflow: hidden;
    }
    #results .results-pic {
        position: absolute;
        top: 50%;
        left: calc( -100vw * 164 / 1920 );
        translate: 0 -50%;
        margin: 0;
        padding: 0;
        width: calc( 100vw * 1008 / 1920 );
        height: auto;
    }
    #results .results-pic img {
        margin: 0;
        padding: 0;
        width: 100%;
        height: auto;
    }
    #results .results-catch {
        position: absolute;
        top: 12%;
        left: 99%;
        transform-origin: left top;
        transform: rotate( 90deg );
        margin: 0;
        padding: 0;
        color: #a00200;
        font-size: calc( 100vw * 120 / 1920 );
        font-weight: 400;
        font-family: var(--font-alphabet);
        line-height: 1.0;
        letter-spacing: 0.03em;
        white-space: nowrap;
    }
    #results .results-info {
        position: absolute;
        top: 10%;
        left: 48%;
    }
    #results .results-info > h2 {
        margin: 0;
        padding: 0;
        font-size: calc( 100vw * 70 / 1920 );
        font-weight: 900;
        text-align: left;
        line-height: calc( 79 / 70 );
    }
    #results .results-info > h2 span {
        color: #a00200;
    }
    #results .results-info > p {
        margin: 1.0em 0 0;
        padding: 0;
        font-size: calc( 100vw * 23 / 1920 );
        font-weight: 500;
        line-height: calc( 46 / 23 );
    }
    #results .results-info > a {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: flex-start;;
        margin: 2.0em 0 0;
        padding: 0 calc( 40 * 100vw / 1920 );
        width: calc( 392 * 100vw / 1920 );
        height: auto;
        aspect-ratio: 392 / 92;
        font-size: calc( 19 * 100vw / 1920 );
        font-weight: 500;
        line-height: 1.0;
        border: 1px solid #B5B5B5;
        border-radius: 4.0em;
    }
    #results .results-info > a span {
        position: absolute;
        content: "";
        display: block;
        top: calc ( 50% - 30 * 100vw / 1920 );
        right: calc( 20 * 100vw / 1920 );
        width: calc( 60 * 100vw / 1920 );
        height: auto;
        aspect-ratio: 1 / 1;
        background: #c30000;
        border-radius: 100%;
        transition: background 0.5s ease-out;
        overflow: hidden;
    }
    #results .results-info > a span::before {
        position: absolute;
        content: "";
        display: block;
        top: 30%;
        left: 30%;
        width: 40%;
        height: auto;
        aspect-ratio: 1 / 1;
        background: url(../images/icon-arrow-r-white.svg) no-repeat center / contain;
        transition: left 0.5s ease-out;
    }
    #results .results-info > a span::after {
        position: absolute;
        content: "";
        display: block;
        top: 30%;
        left: -130%;
        width: 40%;
        height: auto;
        aspect-ratio: 1 / 1;
        background: url(../images/icon-arrow-r-red.svg) no-repeat center / contain;
        transition: left 0.5s ease-out;
    }
    @media ( hover: hover ) {
        #results .results-info > a:hover {
            opacity: 1.0;
        }
        #results .results-info > a:hover span {
            background: #fff;
        }
        #results .results-info > a:hover span::before {
            left: 130%;
        }
        #results .results-info > a:hover span::after {
            left: 30%;
        }
    }

    #entry {
        margin: 0 auto;
        padding: 80px 0;
        width: 100%;
        background: #a00100;
    }
    #entry > h2 {
        margin: 0 auto;
        padding: 0;
        color: #fff;
        font-size: 70px;
        font-weight: 700;
        font-family: var(--font-mincho);
        text-align: center;
        line-height: calc( 81 / 70 );
    }
    #entry > p {
        margin: 1.0em auto 0;
        padding: 0;
        color: #fff;
        font-size: 28px;
        font-weight: 700;
        text-align: center;
        line-height: calc( 53 / 28 );
    }
    #entry > .txt {
        margin: 32px auto 0;
        padding: 0;
        width: 90%;
        max-width: 536px;
        height: auto;
        aspect-ratio: 536 / 152;
    }
    #entry > .txt img {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    #entry > .entry-btns {
        margin: 72px auto 0;
        padding: 0;
        width: 90%;
        max-width: 1760px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 24px;
    }
    #entry > .entry-btns > .entry-btn {
        position: relative;
        margin: 0;
        padding: 0;
        width: 100%;
        height: auto;
        aspect-ratio: 868 / 400;
        background: #950200;
        border-radius: 8px;
        transition: none;
    }
    #entry > .entry-btns > .entry-btn > span:nth-of-type(1) {
        position: absolute;
        top: 50%;
        left: 0;
        translate: 0 -50%;
        margin: 0;
        padding: 0;
        width: 100%;
        color: #a00200;
        font-size: calc( 95 * min( 90vw, 1760px ) / 1760 );
        font-weight: 400;
        font-family: var(--font-alphabet);
        text-align: center;
        line-height: 1.0;
        letter-spacing: 0.03em;
    }
    #entry > .entry-btns > .entry-btn > span:nth-of-type(2) {
        position: absolute;
        bottom: 52%;
        left: 0;
        margin: 0;
        padding: 0;
        width: 100%;
        color: #fff;
        font-size: calc( 70 * min( 90vw, 1760px ) / 1760 );
        font-weight: 700;
        font-family: var(--font-mincho);
        text-align: center;
        line-height: 1.0;
    }
    #entry > .entry-btns > .entry-btn > span:nth-of-type(3) {
        position: absolute;
        top: 52%;
        left: 0;
        margin: 0;
        padding: 0;
        width: 100%;
        color: #fff;
        font-size: calc( 33 * min( 90vw, 1760px ) / 1760 );
        font-weight: 500;
        text-align: center;
        line-height: 1.0;
    }
    #entry > .entry-btns > .entry-btn > span:nth-of-type(4) {
        position: absolute;
        bottom: 10%;
        right: 5%;
        display: block;
        width: calc( 60 * min( 90vw, 1760px ) / 1760 );
        height: auto;
        aspect-ratio: 1 / 1;
        background: #c30000;
        border-radius: 100%;
        transition: background 0.5s ease-out;
        overflow: hidden;
    }
    #entry > .entry-btns > .entry-btn > span:nth-of-type(4)::before {
        position: absolute;
        content: "";
        display: block;
        top: 30%;
        left: 30%;
        width: 40%;
        height: auto;
        aspect-ratio: 1 / 1;
        background: url(../images/icon-arrow-r-white.svg) no-repeat center / contain;
        transition: left 0.5s ease-out;
    }
    #entry > .entry-btns > .entry-btn > span:nth-of-type(4)::after {
        position: absolute;
        content: "";
        display: block;
        top: 30%;
        left: -130%;
        width: 40%;
        height: auto;
        aspect-ratio: 1 / 1;
        background: url(../images/icon-arrow-r-red.svg) no-repeat center / contain;
        transition: left 0.5s ease-out;
    }
    @media ( hover: hover ) {
        #entry > .entry-btns > .entry-btn:hover {
            opacity: 1.0;
        }
        #entry > .entry-btns > .entry-btn:hover > span:nth-of-type(4) {
            background: #fff;
        }
        #entry > .entry-btns > .entry-btn:hover > span:nth-of-type(4)::before {
            left: 130%;
        }
        #entry > .entry-btns > .entry-btn:hover > span:nth-of-type(4)::after {
            left: 30%;
        }
    }

}


@keyframes anim-telop-pc {
    0%   { transform: translateX( 0vw ); }
    100% { transform: translateX( -192.0vw ); }
}


@keyframes anim-telop-sp {
    0%   { transform: translateX( 0 ); }
    100% { transform: translateX( -250vw ); }
}