@charset "utf-8";


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

    header {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: auto;
        height: 80px;
    }
    header .header-sp-menu #sp-menu-check ~ .sp-menu {
        top: auto;
        bottom: 80px;
        height: calc( 100vh - 80px );
        height: calc( 100dvh - 80px );
        transform-origin: center bottom;
    }
    header .header-sp-menu .sp-menu .header-menu-sp-wrapper {
        height: 100%;
    }
    header .header-sp-menu .sp-menu ul.header-menu-sp {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }

    main {
        margin: 0 auto;
        padding: 3.0vw 3.0vw calc( 80px + 3.0vw );
        width: 100%;
        height: auto;
        background: #fff;
    }

    #top-flex {
        margin: 0;
        padding: 0;
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2.0vw 0;
    }

    #top-flex .top-left {
        position: relative;
        margin: 0;
        padding: 3.0vw;
        width: 100%;
        height: auto;
        background: linear-gradient( to bottom, #f2dede, #ebe0e3, #ecddf8, #f9f7eb );
    }
    #top-flex .top-left {
        padding: 0;
        border-radius: 2.0vw;
        overflow: hidden;
        background: url(../images/top-mv-bg.webp) no-repeat center / cover;
    }

    .top-left .top-left-box {
        position: relative;
        top: auto;
        left: auto;
        translate: 0 0;
        padding: 8.0vw 0;
        width: 100%;
        height: auto;
        background: rgba( 255, 255, 255, 0.7 );
    }
    .top-left .top-left-box .subtitle {
        margin: 0 auto;
        padding: 0.2em 0.8em;
        width: max-content;
        font-size: 4.0vw;
        font-weight: 700;
        text-align: left;
        line-height: 1.0;
        background: #fff;
    }
    .top-left .top-left-box h1 {
        margin: 0.4em 0 0;
        font-size: 10.0vw;
        font-weight: 700;
        text-align: center;
        line-height: calc( 65 / 50 );
    }
    .top-left .top-left-box h1 em {
        color: #bf2228;
        font-style: normal;
    }
    .top-left .top-left-box p {
        margin: 2.0em 0 0;
        font-size: 3.6vw;
        font-weight: 700;
        text-align: center;
        line-height: calc( 30 / 18 );
    }
    .top-left .top-left-box p em {
        color: #bf2228;
        font-style: normal;
    }
    .top-left .top-numbers {
        display: flex;
        justify-content: space-evenly;
        gap: 0 4%;
    }
    .top-left .top-numbers .number-item {
        position: relative;
        width: 32%;
        height: auto;
        aspect-ratio: 1 / 1;
        background: url(../images/top-mv-icon-star.svg) no-repeat center / contain;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .top-left .top-numbers .number-item span:nth-child(1) {
        display: block;
        color: #db1c1d;
        font-size: 2.8vw;
        font-weight: 500;
        text-align: center;
    }
    .top-left .top-numbers .number-item span:nth-child(2) {
        display: block;
        color: #db1c1d;
        font-size: 4.8vw;
        font-weight: 700;
        font-family: var(--font-alphabet);
        text-align: center;
        background-image: linear-gradient( to right, #d70023, #ec9300 );
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    .top-left .top-numbers .number-item span:nth-child(2)::after {
        content: attr(data-tail);
        margin-left: 0.5em;
        font-size: 60%;
    }

    #top-flex .top-right {
        position: relative;
        padding: 4.0vw;
        width: 100%;
        height: 104.0vw;
        background: #f7f8fc;
        border-radius: 2.0vw;
        overflow: hidden;
    }

    #top-flex .top-selection {
        transform: translateX( 100% );
        opacity: 0;
        transition: transform 0.25s ease-out, opacity 0.25s ease-out;
        z-index: 1;
    }
    #top-flex .top-selection.show {
        transform: translateX( 0 );
        opacity: 1;
        transition: transform 0.25s ease-out, opacity 0.25s ease-out;
        z-index: 2;
    }

    .top-selection {
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        padding: 4.0vw;
        translate: 0 -50%;
    }
    .top-selection .no {
        color: #6e6e6e;
        font-size: 6.0vw;
        font-weight: 700;
        font-family: var(--font-alphabet);
        line-height: 1.0;
    }
    .top-selection .no::first-letter {
        font-size: 200%;
    }
    .top-selection h2 {
        margin: 0.5em 0 0;
        color: #3f3f3f;
        font-size: 4.0vw;
        font-weight: 700;
    }
    .top-selection .sel-flex {
        margin: 6.0vw auto 0;
        padding: 0;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        justify-content: flex-start;
        gap: 3.8vw 3.8vw;
    }
    .sel-flex .sel-item {
        display: block;
        padding: 4.0vw 0;
        width: calc( 50% - 2.0vw );
        background: #fff;
        border-radius: 2.0vw;
        cursor: pointer;
    }
    .sel-flex .sel-item figure {
        display: block;
        margin: 0 auto;
        width: 30%;
        height: auto;
        aspect-ratio: 1 / 1;
    }
    .sel-flex .sel-item figure.w40 {
        width: calc( 30% * 103 / 69 );
        aspect-ratio: 103 / 69;
    }
    .sel-flex .sel-item figure img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    .sel-flex .sel-item div {
        position: relative;
        width: 100%;
        font-weight: 500;
        text-align: center;
    }
    .sel-flex .sel-item div::after {
        position: absolute;
        content: "";
        top: calc( 50% - 10px );
        right: 4.0vw;
        width: 4.0vw;
        height: 4.0vw;
        background: url(../images/top-mv-icon-arrow-r.svg) no-repeat center / contain;
    }
    .sel-flex .sel-item div span:nth-child(1) {
        display: block;
        font-size: 3.6vw;
    }
    .sel-flex .sel-item div span:nth-child(2) {
        display: block;
        font-size: 2.8vw;
    }
    .sel-flex .sel-back {
        display: block;
        padding: 4.0vw 0;
        width: calc( 50% - 2.0vw );
        cursor: pointer;
    }
    .sel-flex .sel-back div {
        position: relative;
        height: 100%;
        color: #3f3f3f;
        font-size: 3.6vw;
        font-weight: 500;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0 8px;
    }
    .sel-flex .sel-back div::before {
        content: "";
        width: 4.0vw;
        height: 4.0vw;
        background: url(../images/top-mv-icon-arrow-l.svg) no-repeat center / contain;
    }
    .sel-flex .sel-back div span {
        display: block;
        font-size: 3.6vw;
    }

}


/**
 * PC用設定 縦表示
 */
@media ( min-width: 768.01px ) {

    header {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: auto;
        height: 100px;
    }

    main {
        margin: 0 auto;
        padding: 30px 30px 130px;
        width: 100%;
        height: auto;
        background: #fff;
    }

    #top-flex {
        margin: 0 auto;
        padding: 0;
        width: 100%;
        max-width: 800px;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 20px 0;
    }

    #top-flex .top-left {
        position: relative;
        margin: 0;
        padding: 30px;
        width: 100%;
        height: auto;
        background: linear-gradient( to bottom, #f2dede, #ebe0e3, #ecddf8, #f9f7eb );
    }
    #top-flex .top-left {
        padding: 0;
        border-radius: 16px;
        overflow: hidden;
        background: url(../images/top-mv-bg.webp) no-repeat center / cover;
    }

    .top-left .top-left-box {
        position: relative;
        top: auto;
        left: auto;
        translate: 0 0;
        padding: 60px 0;
        width: 100%;
        height: auto;
        background: rgba( 255, 255, 255, 0.7 );
    }
    .top-left .top-left-box .subtitle {
        margin: 0 auto;
        padding: 0.2em 0.8em;
        width: max-content;
        font-size: 28px;
        font-weight: 700;
        text-align: center;
        line-height: 1.0;
        background: #fff;
    }
    .top-left .top-left-box h1 {
        margin: 0.4em 0 0;
        font-size: 64px;
        font-weight: 700;
        text-align: center;
        line-height: calc( 65 / 50 );
    }
    .top-left .top-left-box h1 em {
        color: #bf2228;
        font-style: normal;
    }
    .top-left .top-left-box p {
        margin: 2.0em 0 0;
        font-size: 18px;
        font-weight: 700;
        text-align: center;
        line-height: calc( 30 / 18 );
    }
    .top-left .top-left-box p em {
        color: #bf2228;
        font-style: normal;
    }
    .top-left .top-numbers {
        display: flex;
        justify-content: space-evenly;
        gap: 0 4%;
    }
    .top-left .top-numbers .number-item {
        position: relative;
        width: 32%;
        height: auto;
        aspect-ratio: 1 / 1;
        background: url(../images/top-mv-icon-star.svg) no-repeat center / contain;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .top-left .top-numbers .number-item span:nth-child(1) {
        display: block;
        color: #db1c1d;
        font-size: min( 20px, 2.8vw );
        font-weight: 500;
        text-align: center;
    }
    .top-left .top-numbers .number-item span:nth-child(2) {
        display: block;
        color: #db1c1d;
        font-size: min( 40px, 4.8vw );
        font-weight: 700;
        font-family: var(--font-alphabet);
        text-align: center;
        background-image: linear-gradient( to right, #d70023, #ec9300 );
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    .top-left .top-numbers .number-item span:nth-child(2)::after {
        content: attr(data-tail);
        margin-left: 0.5em;
        font-size: 60%;
    }

    #top-flex .top-right {
        position: relative;
        padding: 30px;
        width: 100%;
        height: auto;
        min-height: calc( 300px + 50.0vw );
        background: #f7f8fc;
        border-radius: 16px;
        overflow: hidden;
    }

    #top-flex .top-selection {
        transform: translateX( 100% );
        opacity: 0;
        transition: transform 0.25s ease-out, opacity 0.25s ease-out;
        z-index: 1;
    }
    #top-flex .top-selection.show {
        transform: translateX( 0 );
        opacity: 1;
        transition: transform 0.25s ease-out, opacity 0.25s ease-out;
        z-index: 2;
    }

    .top-selection {
        position: absolute;
        top: 50%;
        left: 30px;
        width: calc( 100% - 60px );
        padding: 0 30px 30px;
        translate: 0 -50%;
    }
    .top-selection .no {
        color: #6e6e6e;
        font-size: 48px;
        font-weight: 700;
        font-family: var(--font-alphabet);
        line-height: 1.0;
    }
    .top-selection .no::first-letter {
        font-size: 200%;
    }
    .top-selection h2 {
        margin: 0.5em 0 0;
        color: #3f3f3f;
        font-size: 32px;
        font-weight: 700;
    }
    .top-selection .sel-flex {
        margin: 40px auto 0;
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        justify-content: flex-start;
        gap: 20px 20px;
    }
    .sel-flex .sel-item {
        display: block;
        padding: 20px 0;
        width: calc( 50% - 10px );
        background: #fff;
        border-radius: 10px;
        cursor: pointer;
    }
    .sel-flex .sel-item figure {
        display: block;
        margin: 0 auto;
        width: 30%;
        height: auto;
        aspect-ratio: 1 / 1;
    }
    .sel-flex .sel-item figure.w40 {
        width: calc( 30% * 103 / 69 );
        aspect-ratio: 103 / 69;
    }
    .sel-flex .sel-item figure img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    .sel-flex .sel-item div {
        position: relative;
        width: 100%;
        font-weight: 500;
        text-align: center;
    }
    .sel-flex .sel-item div::after {
        position: absolute;
        content: "";
        top: calc( 50% - 10px );
        right: 20px;
        width: 20px;
        height: 20px;
        background: url(../images/top-mv-icon-arrow-r.svg) no-repeat center / contain;
    }
    .sel-flex .sel-item div span:nth-child(1) {
        display: block;
        font-size: 20px;
    }
    .sel-flex .sel-item div span:nth-child(2) {
        display: block;
        font-size: 14px;
    }
    .sel-flex .sel-back {
        display: block;
        padding: 20px 0;
        width: calc( 50% - 10px );
        cursor: pointer;
    }
    .sel-flex .sel-back div {
        position: relative;
        height: 100%;
        color: #3f3f3f;
        font-weight: 500;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0 8px;
    }
    .sel-flex .sel-back div::before {
        content: "";
        width: 20px;
        height: 20px;
        background: url(../images/top-mv-icon-arrow-l.svg) no-repeat center / contain;
    }
    .sel-flex .sel-back div span {
        display: block;
        font-size: 20px;
    }

}


/**
 * PC用設定 横表示
 */
@media ( min-width: 1200px ) {
    main {
        height: 100vh;
        height: 100dvh;
        min-height: 800px;
    }
    #top-flex {
        margin: 0 auto;
        padding: 0;
        width: 100%;
        max-width: 1600px;
        height: 100%;
        display: flex;
        flex-direction: row;
        align-items: stretch;
        justify-content: space-between;
        gap: 0 20px;
    }
    #top-flex .top-left {
        padding: 0;
        width: min( 600px, 50% );
        max-width: 600px;
        height: 100%;
    }
    #top-flex .top-left {
        padding: 0;
        border-radius: 16px;
        overflow: hidden;
    }
    .top-left .top-left-box {
        position: absolute;
        /*
        top: 50%;
        left: 50%;
        width: calc( 100% - 60px );
        translate: -50% -50%;
        */
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .top-left .top-numbers {
        display: flex;
        justify-content: space-evenly;
        gap: 0 20px;
    }
    .top-left .top-numbers .number-item {
        position: relative;
        width: calc( ( 100% - 40px ) / 3 );
        height: auto;
        aspect-ratio: 1 / 1;
        background: url(../images/top-mv-icon-star.svg) no-repeat center / contain;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .top-left .top-numbers .number-item span:nth-child(1) {
        display: block;
        color: #db1c1d;
        font-size: 12px;
        font-weight: 500;
        text-align: center;
    }
    .top-left .top-numbers .number-item span:nth-child(2) {
        display: block;
        color: #db1c1d;
        font-size: 30px;
        font-weight: 700;
        font-family: var(--font-alphabet);
        text-align: center;
        background-image: linear-gradient( to right, #d70023, #ec9300 );
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    .top-left .top-numbers .number-item span:nth-child(2)::after {
        content: attr(data-tail);
        margin-left: 0.5em;
        font-size: 60%;
    }

    #top-flex .top-right {
        padding: 0;
        width: calc( 100% - min( 600px, 50% ) );
        height: 100%;
        min-height: 100%;
        border-radius: 16px;
    }
    .top-selection {
        position: absolute;
        top: 50%;
        left: 30px;
        translate: 0 -50%;
        width: calc( 100% - 60px );
    }
}