@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&display=swap');

@font-face {
    font-family: "LINE Seed JP_OTF Rg";
    src: url(../fonts/LINESeedJP_OTF_Rg.woff) format("woff");
}

@font-face {
    font-family: "LINE Seed JP_OTF Bd";
    src: url(../fonts/LINESeedJP_OTF_Bd.woff) format("woff");
}

@import url("normalize.css") layer(normalize);
@layer normalize, base, components, utilities;

:root {
    --text-light: #DF6436;
    --text-dark: #333333;
    --bottom-color: #1A1A1A;
    --text-nav: #473838;
    --text-btn: #FFFFFF;

    --header-linear: linear-gradient(90deg, #FD7E04 0%, #F33B01 100%);
    --present-linear: linear-gradient(90deg, #FFECAD 0%, #FFFFFF 100%);
    --btn-bg: #06C755;
    --pair-bg: #FFE8D2;
    --ski-bg: #FFFAEF;
    --apply-box-bg: #FFFAEF;
    --bottom-bg: #F5F0DB;
    --copyright-bg: #F4F5F6;
}

@layer base {
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    img {
        object-fit: cover;
        display: block;
    }

    button {
        cursor: pointer;
        color: inherit;
    }

    a {
        cursor: pointer;
        text-decoration: none;
        color: inherit;
    }

    a:hover {
        opacity: 0.7!important;
    }
}

@layer components {
    .full-ctn {
        width: 100%;
    }

    .ctn {
        width: 100%;
        max-width: 1112px;
    }

    body {
        font-family: "Noto Sans JP", sans-serif;
        color: var(--text-dark);
        counter-reset: step;
        line-height: 180%;
        width: 100vw;
        overflow-x: hidden;
    }

    img.header-bg {
        width: 100%;
        height: 100%;
        object-position: bottom;
        margin-top: -10%;
    }

    .header-ctn {
        position: relative;
        display: flex;
        justify-content: center;
    }

    .header-cont {
        padding: 0 16px;
        position: absolute;
        bottom: 0;
        width: 100%;
        max-width: 1080px;
        height: 43%;
        display: grid;
        grid-template-rows: auto 1fr;
        column-gap: 32px;
        row-gap: 28px;
        font-family: 'LINE Seed JP_OTF Bd';
    }

    img.header-img {
        height: 100%;
        border-radius: 8px;
        aspect-ratio: 419/279;
    }

    picture.header-img {
        grid-row: 1/3;
        grid-column: 2/3;
        translate: 0 3px;
    }

    picture.header-bg {
        width: 100%;
        height: 80vh;
        min-height: 653px;
    }

    img.header-bg {
    }

    .header-ctn::before {
        content: "";
        display: block;
        width: 100%;
        height: 40%;
        position: absolute;
        bottom: 0;
        background: var(--header-linear);
        clip-path: polygon(0 23%, 100% 0, 100% 100%, 0% 100%);
    }

    .header-text-w-bg {
        width: fit-content;
        background: white;
        color: var(--text-light);
        padding: 26px 24px;
        font-size: 24px;
        line-height: 160%;
        text-wrap: nowrap;
    }

    h1.header-text {
        font-size: 40px !important;
        margin: 0 !important;
    }

    div.header-text {
        font-size: 32px;
        color: white;
        line-height: 160%;
    }

    #nav {
        position: sticky;
        top: 0;
        background: white;
        z-index: 10;
    }

    nav.top-nav {
        padding: 40px 0 46px;
        display: flex;
        justify-content: center;
        column-gap: 58px;
        row-gap: 4px;
        flex-wrap: wrap;
    }

    a.top-nav-item:not(:first-of-type)::after {
        content: "";
        position: absolute;
        width: 1px;
        height: 1em;
        background: var(--text-light);
        top: 50%;
        left: -23.5px;
        translate: 50% -50%;
    }

    a.top-nav-item {
        position: relative;
        font-family: "Noto Sans JP";
        font-weight: 700;
    }

    a.top-nav-item:hover {
        color: var(--text-light);
    }

    .section {
        scroll-margin-top: 80px;
    }

    #present {
        background:
            linear-gradient(to bottom, rgba(255, 236, 173, 0.7) 0%, rgba(255, 255, 255, 0.3) 100%),
            url(../images/present-bg.png);
        background-size: cover;
        background-position: center;
        padding: 72px 0 64px;
        /* overflow: hidden; */
    }

    h2.ctn-title {
        width: 100%;
        font-family: 'LINE Seed JP_OTF Bd';
        color: var(--text-light);
        font-size: 40px;
        text-align: center;
        line-height: 160%;
    }

    .present-box {
        width: calc(100% - 32px);
        max-width: 800px;
        padding: 12px 52px 56px;
        background: white;
        border: 5px solid var(--text-light);
        border-radius: 29px;
        margin: 56px 16px 0;
    }

    .present-ctn {
        font-weight: 700;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: var(--text-light);
        text-align: center;
    }

    h3.present-title {
        font-size: 32px;
        font-family: 'LINE Seed JP_OTF Bd';
    }

    .present-box-sec {
        font-family: 'Noto Sans JP';
        margin-top: 40px;
    }

    strong.present-text {
        font-size: 24px;
        display: block;
        margin-top: 32px;
    }

    ul.present-list {
        width: fit-content;
        margin: 32px auto 0;
        display: flex;
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }

    li.present-text {
        list-style: none;
        text-align: left;
        margin-left: 1em;
    }

    li.present-text:before {
        content: '◆';
        margin-left: -1em;
    }

    p.present-text {
        margin-top: 48px;
    }

    .present-slide-track {
        display: flex;
        gap: 24px;
        animation: scroll 16s linear infinite;
    }

    .present-slide-track:hover {
        animation-play-state: paused;
    }

    .present-slide {
        display: flex;
        gap: 24px;
        margin-top: 56px;
    }

    img.present-img {
        height: 243px;
        aspect-ratio: 346/243;
    }

    .present-slide {
        display: flex;
        overflow: hidden;
        width: 100%;
        position: relative;
    }

    @keyframes scroll {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(-50%);
        }
    }

    #pair-ticket {
        padding: 80px 16px 100px;
        background: var(--pair-bg);
        position: relative;
    }

    #pair-ticket::before {
        content: "";
        width: 202px;
        height: 155px;
        display: block;
        background: url(../icons/pair-icon.svg);
        position: absolute;
        top: 72px;
        right: 0;
    }

    #pair-ticket::after {
        content: "";
        width: 202px;
        height: 155px;
        display: block;
        background: url(../icons/pair-icon.svg);
        rotate: 180deg;
        position: absolute;
        bottom: 72px;
        left: 0;
    }

    .pair-ctn {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: auto;
        position: relative;
        z-index: 1;
    }

    .gridc-2-1 {
        width: 100%;
        margin-top: 68px;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: 22px;
        row-gap: 48px;
        grid-template-rows: 1fr auto auto;
    }

    .gridc-2-1-item {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 3;
        gap: 28px;
    }

    p.gridc-2-1-title {
        margin-top: 6px;
        font-weight: 500;
    }

    h3.gridc-2-1-title {
        display: flex;
        flex-direction: column;
        color: var(--text-light);
        font-weight: 700;
    }

    .line-title::after {
        content: "";
        position: absolute;
        width: 64px;
        height: 4px;
        background: var(--text-light);
        bottom: -17px;
    }

    .line-title {
        position: relative;
    }

    img.gridc-2-1-img {
        border-radius: 12px;
        width: 100%;
        aspect-ratio: 525/388;
    }

    #golf-ticket {
        padding: 98px 16px;
    }

    .golf-ctn {
        margin: auto;
    }

    #ski-ticket {
        padding: 80px 16px 92px;
        background: var(--ski-bg);
    }

    .ski-ctn {
        margin: auto;
    }

    span.ctn-sub-title {
        display: block;
        font-size: 16px;
        margin-top: 48px;
        line-height: 160%;
    }

    .gridc-3-2 {
        margin-top: 48px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        column-gap: 32px;
        row-gap: 24px;
    }

    img.gridc-3-2-img {
        width: 100%;
        aspect-ratio: 336/248;
        border-radius: 8px;
    }

    .gridc-3-2-item {
        display: grid;
        gap: 24px;
    }

    h3.gridc-3-2-title {
        font-size: 16px;
        color: var(--text-light);
        line-height: 160%;
    }

    .apply-ctn {
        margin: auto;
    }

    #apply {
        padding: 80px 16px;
    }

    .apply-steps {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: auto 1fr;
        padding: 108px 80px 0;
        margin-top: 64px;
        position: relative;
    }

    .apply-box-sec {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 2;
        position: relative;
        counter-increment: step;
    }

    .apply-img {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    img.apply-img {
        width: 100%;
        object-fit: contain;
    }


    .apply-steps::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 2px;
        background: var(--text-light);
        top: 46px;
    }

    .apply-box-sec::before {
        content: "STEP";
        position: absolute;
        left: 50%;
        top: -94px;
        translate: -50% -50%;
        font-size: 24px;
        font-family: 'LINE Seed JP_OTF Bd';
        color: var(--text-light);
        z-index: 1;
    }

    .apply-box-sec::after {
        content: counter(step);
        position: absolute;
        top: -47px;
        left: 50%;
        translate: -50% -50%;
        padding: 28px;
        background: white;
        font-size: 64px;
        font-family: 'LINE Seed JP_OTF Bd';
        color: var(--text-light);
    }

    p.apply-text {
        text-align: center;
        color: var(--text-light);
        font-weight: 700;
    }

    a.apply-btn {
        height: fit-content;
        padding: 16px;
        background: var(--btn-bg) !important;
        color: white;
        border-radius: 40px;
        font-weight: 700;
        text-align: center;
        position: relative;
        align-self: end;
        justify-self: center;
        width: 100%;
        max-width: 256px;
    }

    a.apply-btn::after {
        position: absolute;
        content: "";
        width: 7px;
        height: 7px;
        border-right: 3px solid white;
        border-bottom: 3px solid white;
        rotate: -45deg;
        top: 50%;
        right: 20px;
        translate: 0 -50%;
    }

    .apply-attend {
        width: 100%;
        max-width: 800px;
        margin: auto;
        display: flex;
        flex-direction: column;
        gap: 16px;
        margin: 56px auto 8px;
        align-items: center;
        background: var(--apply-box-bg);
        border-radius: 16px;
        padding: 40px 16px;
    }

    strong.apply-text {
        color: var(--text-light);
    }

    .announcement-ctn {
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 40p;
    }

    p.announcement-text {
        color: var(--text-light);
        font-weight: 700;
        margin: 40px 0 24px;
    }

    span.announcement-text {
        color: var(--text-dark);
        margin-top: 36px;
        font-weight: 500;
    }

    a.announcement-btn {
        width: 375px;
        height: 55px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: var(--text-light) !important;
        color: white;
        border-radius: 40px;
        margin-top: 24px;
        font-weight: 700;
        position: relative;
    }

    a.announcement-btn::after {
        position: absolute;
        content: "";
        width: 7px;
        height: 7px;
        border-right: 3px solid white;
        border-bottom: 3px solid white;
        rotate: -45deg;
        top: 50%;
        right: 20px;
        translate: 0 -50%;
    }

    #announcement {
        padding: 16px 16px 80px;
    }

    .bottom-ctn {
        display: flex;
        flex-direction: column;
        margin: auto;
        justify-content: center;
        align-items: center;
        gap: 20px;
    }

    #bottom {
        padding: 64px 16px 52px;
        background: var(--bottom-bg);
    }

    p.bottom-text {
        margin: 4px 0;
        text-align: center;
    }

    nav.footer-nav {
        text-align: center;
    }

    .footer-ctn {
        margin: auto;
    }

    a.footer-nav-item:first-of-type {
        border-left: 1px solid var(--bottom-color);
    }

    #copyright {
        background: var(--copyright-bg);
        padding: 22px 16px;
        text-align: center;
        font-size: 12px;
        line-height: 126%;
        letter-spacing: 0.36px;
        font-weight: 300;
        font-family: 'Noto Serif JP';
    }

    a.footer-nav-item {
        font-weight: 500;
        border-right: 1px solid var(--bottom-color);
        padding: 0 20px;
        display: inline-block;
        line-height: 1em;
    }

    img.bottom-img {
        width: 100%;
        max-width: 654px;
    }


    .pc-only {
        display: block;
    }

    .sp-only {
        display: none;
    }

    #footer {
        padding: 32px 16px;
    }

    .fade {
        opacity: 0;
        transform: translateY(-50px);
        transition: opacity 0.8s ease, transform 0.8s ease;
    }

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

    @media screen and (max-width: 1280px) {
        .header-cont {
            display: flex;
            flex-direction: column;
        }

        nav.top-nav {
            padding: 24px 16px;
            margin-top: 78px;
        }

        picture.header-img {
            grid-row: unset;
            grid-column: unset;
            position: absolute;
            right: 16px;
            bottom: -72px;
            height: 100px;
            z-index: 11;
        }

        img.header-bg {
            margin-top: -15%;
        }
    }

    .arrow {
        position: fixed;
        bottom: 20px;
        right: 20px;
        opacity: 0;
        transition: opacity 1s;
        z-index: 12;
    }

    @media screen and (max-width: 768px) {
        * {
            margin: 0;
            padding: 0;
        }

        .section {
            scroll-margin-top: 142px;
        }

        nav.top-nav {
            padding: 20px 16px;
            margin-top: 78px;
        }

        h3.gridc-3-2-title {
            font-size: 14px;
        }

        ul.present-list {
            margin: 20px 0;
        }

        #copyright {
            font-size: 14px;
            line-height: 170%;
            padding: 14px 16px;
        }

        #footer {
            padding: 14px 16px;
            font-size: 12px;
        }

        a.bottom-img {
            margin-inline: 16px;
        }

        a.announcement-btn {
            width: 343px;
        }

        p.announcement-text {
            margin: 32px 0 10px;
        }

        #announcement {
            padding: 40px 16px 52px;
        }

        .apply-example {
            width: 100%;
        }

        .apply-example>.apply-img {
            margin: 0;
            height: 240px!important;
            width: 100%;
        }

        .apply-example img.apply-img {
            width: 100%;
            margin: 0;
            height: 240px;
        }

        .apply-example picture.apply-img {
            width: 100%;
            margin: 0;
        }

        .apply-img {
            width: 200px;
            height: 400px;
            margin: -40px auto;
        }

        p.apply-text:not(.apply-attend .apply-text)::before {
            content: "";
            width: 100%;
            height: 2px;
            display: block;
            background: var(--text-light);
            position: absolute;
            top: -60px;
        }

        .apply-steps {
            margin-top: 0;
            padding: 0;
        }

        .apply-box-sec {
            margin-top: 140px;
        }

        .apply-steps::before {
            content: none;
        }

        .apply-steps {
            grid-template-columns: 1fr;
        }

        #apply {
            padding: 40px 16px 0;
        }

        .gridc-3-2-item {
            gap: 12px;
            grid-template-rows: auto 1fr;
        }

        .gridc-3-2 {
            grid-template-columns: repeat(2, 1fr);
            row-gap: 32px;
            column-gap: 16px;
        }

        span.ctn-sub-title {
            margin-top: 32px;
        }

        #ski-ticket {
            padding: 40px 16px 56px;
        }

        #golf-ticket {
            padding: 40px 16px 56px;
        }

        h3.gridc-2-1-title {
            margin-top: 4px;
            font-size: 16px;
        }

        p.gridc-2-1-title {
            margin-top: 16px;
            font-size: 14px;
        }

        .gridc-2-1-item {
            gap: 12px;
        }

        .gridc-2-1 {
            grid-template-columns: 1fr;
            margin: 32px 0;
            padding: 0 16px;
            row-gap: 32px;
        }

        #pair-ticket {
            padding-block: 40px;
        }

        #announcement h2.ctn-title {
            font-size: 40px;
        }

        a.announcement-btn::after {
            right: 12px;
        }

        #present {
            padding: 40px 0 56px;
        }

        img.present-img {
            height: 135px;
        }

        p.present-text {
            margin-top: -8px;
        }

        .present-box {
            padding: 0 16px 52px;
        }

        strong.present-text {
            font-size: 16px;
            margin-top: 16px;
        }

        h3.present-title {
            font-size: 18px;
        }

        .present-box {
            border-width: 2px;
        }

        h2.ctn-title {
            font-size: 24px;
        }

        nav.top-nav {
            column-gap: 20px;
        }

        a.top-nav-item {
            font-size: 14px;
        }

        a.top-nav-item:not(:first-of-type)::after {
            left: -10.5px;
        }

        picture.header-img {
            height: 100px;
            bottom: -72px;
        }


        img.header-bg {
            margin-top: -20%;
        }

        .header-cont {
            height: 30%;
        }

        .header-ctn::before {
            height: 30%;
        }

        div.header-text {
            font-size: 16px;
        }

        .header-text-w-bg {
            font-size: 14px;
            padding: 16px 4px;
        }

        h1.header-text {
            font-size: 24px !important;
        }

        .pc-only {
            display: none;
        }

        .sp-only {
            display: block;
        }

        .present-slide-track {
            animation: scroll 7s linear infinite;
        }
        .apply-step3 {
            margin-top: 0px;
        }
    }
}

@layer utilities {}