@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;
    --restaurant-bg: #FFFAEF;
    --apply-box-bg: #FFFAEF;
    --bottom-bg: #F5F0DB;
    --copyright-bg: #F4F5F6;
}

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

    html {
        scroll-behavior: smooth;
    }

    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;
    }

    .header-ctn {
        position: relative;
        width: 100%;
        height: 641px;
        overflow: hidden;
        background: radial-gradient(ellipse 71.95% 32.05% at 50% 50%, #FEFAF2 0%, #FFF6E3 100%);
    }

    .header-decor {
        position: absolute;
        inset: 0;
        pointer-events: none;
    }

    .header-leaf {
        position: absolute;
        mix-blend-mode: multiply;
        opacity: 0.7;
    }

    .header-leaf-l1 { left: 3.54%;  top: 18.10%; width: 4.03%; height: 13.42%; }
    .header-leaf-l2 { left: 8.34%;  top: 34.01%; width: 4.10%; height: 13.42%; }
    .header-leaf-l3 { left: 5.56%;  top: 54.76%; width: 4.03%; height: 13.42%; }
    .header-leaf-l4 { left: 13.97%; top: 7.64%;  width: 3.82%; height: 12.79%; }
    .header-leaf-l5 { left: 16.12%; top: 44.31%; width: 3.34%; height: 10.77%; }
    .header-leaf-l6 { left: 15.57%; top: 61.47%; width: 3.82%; height: 12.64%; }
    .header-leaf-l7 { left: 10.42%; top: 72.54%; width: 3.55%; height: 11.70%; }
    .header-leaf-l8 { left: 23.70%; top: 78.94%; width: 3.34%; height: 10.77%; }
    .header-leaf-l9 { left: 3.54%;  top: 80.81%; width: 3.34%; height: 10.92%; }

    .header-content {
        position: relative;
        z-index: 2;
        height: 100%;
        max-width: 1063px;
        margin: 0 auto;
        padding: 152px 0 92px;
        padding-right: 470px;
        font-family: 'LINE Seed JP_OTF Bd';
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .header-brand {
        font-size: 24px;
        line-height: 1.6;
        background: linear-gradient(to bottom, #F67705 0%, #EA550A 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        white-space: nowrap;
    }

    .header-celebration {
        position: relative;
        margin-top: 36px;
        align-self: flex-start;
    }

    .celebration-stars {
        position: absolute;
        top: -52px;
        left: 196px;
        width: 162px;
        height: 25px;
        pointer-events: none;
    }

    .cstar {
        position: absolute;
        width: 20px;
        height: 20px;
    }

    .cstar-1 { left: 0;    top: 25px; }
    .cstar-2 { left: 34px; top: 15px; }
    .cstar-3 { left: 75px; top: 5px;  }
    .cstar-4 { left: 116px; top: 15px; }
    .cstar-5 { left: 142px; top: 25px; }

    .celebration-row {
        display: flex;
        align-items: center;
        gap: 0;
        color: #DF6436;
        font-size: 32px;
        line-height: 1.6;
        white-space: nowrap;
    }

    .celebration-side {
        font-family: 'LINE Seed JP_OTF Bd';
    }

    .celebration-center {
        display: inline-flex;
        align-items: center;
        gap: 0;
    }

    .celebration-lines {
        position: relative;
        width: 56px;
        height: 64px;
        flex-shrink: 0;
        display: block;
    }

    .celebration-lines img {
        position: absolute;
        left: 0;
        width: 100%;
        height: 4px;
        display: block;
    }

    .celebration-lines img:first-child { top: 14px; }
    .celebration-lines img:last-child  { top: 46px; }

    .celebration-lines-left img { transform: scaleX(-1); }

    .celebration-number {
        font-size: 64px;
        line-height: 1;
        padding: 0 4px;
        background: linear-gradient(to bottom, #F67705 0%, #EA550A 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .header-title {
        margin: 50px 0 0;
        font-family: 'LINE Seed JP_OTF Bd';
        font-size: 36px;
        line-height: 1.6;
        font-weight: 700;
        background: linear-gradient(to bottom, #F67705 0%, #EA550A 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        white-space: nowrap;
    }

    .header-title-em {
        font-size: 40px;
    }

    .header-subtitle {
        margin: 24px 0 0;
        font-family: 'LINE Seed JP_OTF Bd';
        font-size: 24px;
        line-height: 1.6;
        background: linear-gradient(to right, #F33B01 0%, #FD7E04 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        white-space: nowrap;
    }

    .header-images {
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
    }

    .header-img {
        position: absolute;
        width: 23.35%;
        height: 38.69%;
        border-radius: 16px;
        overflow: hidden;
    }

    .header-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .header-img-1 { left: 55.66%; top: 3.74%; }
    .header-img-2 { left: 75.89%; top: 30.73%; }
    .header-img-3 { left: 55.80%; top: 57.41%; }

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

    nav.top-nav {
        padding: 48px 0;
        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 96px;
        background: var(--pair-bg);
        position: relative;
    }

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


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

    a.pair-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%;
    }

    .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;
    }

    .gridc-2-1-item-center {
        grid-column: 1 / 3;
        max-width: 525px;
        justify-self: center;
        width: 100%;
    }

    span.gridc-2-1-sub-title {
        display: block;
        font-size: inherit;
    }

    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: -10px;
        left: 0;
    }

    .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;
    }

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

    .restaurant-ctn {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: auto;
    }

    .restaurant-ctn .line-title::after {
        content: none;
    }

    p.gridc-3-2-text {
        font-weight: 500;
        line-height: 160%;
        color: var(--text-dark);
    }

    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;
        align-items: start;
    }

    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: 100%;
        max-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: 497px;
    }


    .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) {
        nav.top-nav {
            padding: 24px 16px;
        }

        .header-content {
            padding: 96px 32px 80px;
        }

        .header-brand {
            font-size: 20px;
        }

        .celebration-row {
            font-size: 26px;
        }

        .celebration-number {
            font-size: 52px;
        }

        .celebration-lines {
            width: 120px;
        }

        .header-title {
            font-size: 30px;
        }

        .header-title-em {
            font-size: 34px;
        }

        .header-subtitle {
            font-size: 20px;
        }
    }

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

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

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

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

        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 {
            display: flex;
            flex-direction: column;
            gap: 12px;
            grid-template-rows: none;
        }

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

        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 {
            display: flex;
            flex-direction: column;
            grid-row: auto;
            grid-template-rows: none;
            gap: 12px;
        }

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

        .gridc-2-1-item-center {
            grid-column: auto;
            max-width: none;
        }

        #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;
        }

        .header-ctn {
            height: auto;
            padding-bottom: 32px;
        }

        .header-content {
            align-items: center;
            text-align: center;
            padding: 40px 16px 24px;
            white-space: normal;
            width: 100%;
            max-width: 100%;
        }

        .celebration-row {
            white-space: normal;
            flex-wrap: nowrap;
        }

        .header-brand {
            font-size: 13px;
            white-space: normal;
        }

        .header-celebration {
            margin-top: 24px;
            align-self: center;
        }

        .celebration-stars {
            top: -28px;
            left: 50%;
            transform: translateX(-50%);
            width: 130px;
            height: 20px;
        }

        .cstar {
            width: 14px;
            height: 14px;
        }

        .cstar-1 { left: 0;     top: 18px; }
        .cstar-2 { left: 26px;  top: 11px; }
        .cstar-3 { left: 58px;  top: 4px;  }
        .cstar-4 { left: 90px;  top: 11px; }
        .cstar-5 { left: 116px; top: 18px; }

        .celebration-row {
            font-size: 18px;
        }

        .celebration-number {
            font-size: 36px;
        }

        .celebration-lines {
            width: 28px;
            height: 36px;
        }

        .celebration-lines img:first-child { top: 8px; }
        .celebration-lines img:last-child  { top: 26px; }

        .header-title {
            font-size: 20px;
            margin-top: 24px;
            white-space: normal;
        }

        .header-title-em {
            font-size: 22px;
        }

        .header-subtitle {
            font-size: 14px;
            margin-top: 16px;
            white-space: normal;
            line-height: 1.6;
        }

        .header-images {
            position: relative;
            inset: auto;
            display: flex;
            justify-content: center;
            gap: 8px;
            padding: 0 16px;
        }

        .header-img {
            position: relative;
            inset: auto;
            left: auto;
            top: auto;
            width: calc((100% - 16px) / 3);
            height: auto;
            aspect-ratio: 336/248;
            border-radius: 12px;
        }

        .header-leaf {
            display: none;
        }

        .pc-only {
            display: none;
        }

        .sp-only {
            display: block;
        }

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

@layer utilities {}