@charset "UTF-8";


/* ========================================
    Base
======================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 16px;
}

body {
    margin: 0;
    padding: 0;

    color: #191919;
    background-color: #ffffff;

    font-family: "Noto Sans JP", sans-serif;

    font-weight: 400;

    overflow-x: hidden;
}

img {
    display: block;

    max-width: 100%;
    height: auto;
}

a {
    color: inherit;

    text-decoration: none;
}


/* ========================================
    Festa
======================================== */

.festa {
    position: relative;

    width: 100%;
    min-height: 100vh;

    overflow: hidden;

    background-color: #ffffff;

    /* カンプの薄い罫線 */
    background-image:
        linear-gradient(
            to right,
            rgba(0, 0, 0, 0.07) 1px,
            transparent 1px
        ),
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.07) 1px,
            transparent 1px
        );

    background-size:
        360px 100%,
        100% 224px;

    background-position:
        calc(50% - 360px) 0,
        0 0;
}


/* ========================================
    Inner
======================================== */

.festa__inner {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(430px, 510px)
        minmax(560px, 600px);

    align-items: center;

    column-gap: 45px;

    width: min(1240px, calc(100% - 80px));

    margin: 0 auto;
    padding: 5rem 0;
}


/* ========================================
    Logo
======================================== */

.festa__visual {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
}

.festa__logo {
    width: 100%;
    max-width: 500px;

    height: auto;

    object-fit: contain;
}


/* ========================================
    Content
======================================== */

.festa__content {
    width: 100%;
}


/* ========================================
    Header
======================================== */

.festa__header {
    width: 100%;

    text-align: center;
}

.festa__catch {
    margin:
        0
        0
        14px;

    color: #f39800;

    font-size: 18px;
    font-weight: 700;

    line-height: 1.4;

    letter-spacing: 0.02em;
}

.festa__title {
    margin: 0;

    color: #1a1a1a;

    font-size: clamp(40px, 3.2vw, 52px);
    font-weight: 900;

    line-height: 1.15;

    letter-spacing: -0.04em;

    white-space: nowrap;
}


/* ========================================
    Date
======================================== */

.festa__date {
    display: flex;
    align-items: center;

    margin-top: 46px;
}

.festa__year {
    flex-shrink: 0;

    margin-right: 5px;

    color: #1a1a1a;

    font-size: 19px;
    font-weight: 800;

    line-height: 1;
}

.festa__date-main {
    display: flex;
    align-items: center;

    gap: 9px;
}

.festa__date-block {
    display: flex;
    align-items: flex-end;
}

.festa__date-block--blue {
    color: #00468c;
}

.festa__date-block--pink {
    color: #dc4c69;
}

.festa__date-number {
    font-size: clamp(66px, 5.4vw, 82px);
    font-weight: 900;

    line-height: 0.9;

    letter-spacing: -0.055em;
}

.festa__date-week {
    margin:
        0
        0
        7px
        6px;

    font-size: 17px;
    font-weight: 800;

    line-height: 1;
}

.festa__date-separator {
    color: #1a1a1a;

    font-size: 35px;
    font-weight: 900;

    line-height: 1;
}


/* ========================================
    Info
======================================== */

.festa__info {
    display: flex;
    flex-direction: column;

    gap: 14px;

    margin-top: 62px;
}

.festa__info-row {
    display: grid;

    grid-template-columns:
        60px
        1fr;

    align-items: center;

    column-gap: 8px;
}

.festa__info-row--schedule {
    align-items: flex-start;
}

.festa__info-label {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 60px;
    height: 31px;

    color: #ffffff;

    border-radius: 30px;

    font-size: 14px;
    font-weight: 700;

    line-height: 1;
}

.festa__info-label--place {
    background-color: #4aa536;
}

.festa__info-label--date {
    background-color: #92377f;
}

.festa__info-content {
    min-width: 0;
}

.festa__place {
    margin: 0;

    color: #252525;

    font-size: 20px;
    font-weight: 400;

    line-height: 1.5;
}


/* ========================================
    Schedule
======================================== */

.festa__schedule {
    display: flex;
    flex-direction: column;

    gap: 4px;
}

.festa__schedule-row {
    display: flex;
    align-items: baseline;

    gap: 7px;

    white-space: nowrap;
}

.festa__schedule-day {
    flex-shrink: 0;

    font-size: 22px;
    font-weight: 800;

    line-height: 1.35;
}

.festa__schedule-day--blue {
    color: #064a8d;
}

.festa__schedule-day--pink {
    color: #dc526e;
}

.festa__schedule-time,
.festa__schedule-close {
    flex-shrink: 0;

    color: #222222;

    font-size: 22px;
    font-weight: 800;

    line-height: 1.35;
}

.festa__schedule-note {
    flex-shrink: 0;

    color: #222222;

    font-size: 12px;
    font-weight: 500;

    line-height: 1.35;
}


/* ========================================
    CTA
======================================== */

.festa__cta-area {
    margin-top: 78px;
}

.festa__cta {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 80px;

    padding:
        0
        110px
        0
        50px;

    color: #ffffff;

    border-radius: 50px;

    background:
        linear-gradient(
            90deg,
            #ffa600 0%,
            #f07155 45%,
            #ffb700 100%
        );

    box-shadow:
        6px
        8px
        13px
        rgba(0, 0, 0, 0.23);

    transition:
        transform 0.3s ease,
        opacity 0.3s ease;
}

.festa__cta:hover {
    opacity: 0.88;

    transform: translateY(-2px);
}

.festa__cta-text {
    font-size: 20px;
    font-weight: 800;

    line-height: 1.4;

    letter-spacing: 0.02em;
}

.festa__cta-arrow {
    position: absolute;

    top: 50%;
    right: 16px;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 86px;
    height: 52px;

    color: #e8506a;
    background-color: #ffffff;

    border-radius: 30px;

    font-size: 27px;
    font-weight: 400;

    line-height: 1;

    transform: translateY(-50%);
}


/* ========================================
    SNS
======================================== */

.festa__sns {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 15px;

    margin-top: 51px;
}

.festa__sns-link {
    display: block;

    width: 58px;
    height: 58px;

    border-radius: 50%;

    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}

.festa__sns-link:hover {
    opacity: 0.7;

    transform: translateY(-2px);
}

.festa__sns-link img {
    width: 100%;
    height: 100%;

    object-fit: contain;
}


/* ========================================
    Decoration
======================================== */

.festa__decoration {
    position: absolute;
    z-index: 1;

    display: block;

    height: auto;

    pointer-events: none;

    user-select: none;
}

.festa__decoration--01 {
    top: 80px;
    left: calc(50% - 100px);

    width: 50px;
}

.festa__decoration--02 {
    top: 80px;
    right: calc(50% - 585px);

    width: 57px;
}

.festa__decoration--03 {
    top: 170px;
    right: calc(50% - 545px);

    width: 25px;
}


/* ========================================
    Tablet
    1200px以下
======================================== */

@media screen and (max-width: 1200px) {

    .festa {
        background-size:
            25vw 100%,
            100% 224px;

        background-position:
            25vw 0,
            0 0;
    }

    .festa__inner {
        grid-template-columns:
            minmax(360px, 43%)
            minmax(520px, 57%);

        column-gap: 25px;

        width: calc(100% - 50px);
    }

    .festa__logo {
        max-width: 450px;
    }

    .festa__title {
        font-size: clamp(36px, 3.8vw, 46px);
    }

    .festa__date-number {
        font-size: clamp(58px, 6vw, 72px);
    }

    .festa__date-week {
        font-size: 15px;
    }

    .festa__place {
        font-size: 18px;
    }

    .festa__schedule-day,
    .festa__schedule-time,
    .festa__schedule-close {
        font-size: 19px;
    }

}


/* ========================================
    Tablet
    960px以下
======================================== */

@media screen and (max-width: 960px) {

    .festa__inner {
        grid-template-columns:
            minmax(300px, 40%)
            minmax(450px, 60%);

        column-gap: 15px;

        width: calc(100% - 30px);
    }

    .festa__logo {
        max-width: 370px;
    }

    .festa__catch {
        font-size: 16px;
    }

    .festa__title {
        font-size: 34px;
    }

    .festa__date {
        margin-top: 38px;
    }

    .festa__date-number {
        font-size: 56px;
    }

    .festa__date-week {
        margin-left: 3px;

        font-size: 12px;
    }

    .festa__date-main {
        gap: 5px;
    }

    .festa__year {
        font-size: 15px;
    }

    .festa__info {
        margin-top: 45px;
    }

    .festa__schedule-row {
        gap: 5px;
    }

    .festa__schedule-day,
    .festa__schedule-time,
    .festa__schedule-close {
        font-size: 17px;
    }

    .festa__schedule-note {
        font-size: 10px;
    }

    .festa__cta-area {
        margin-top: 55px;
    }

}


/* ========================================
    SP
    768px以下
======================================== */

@media screen and (max-width: 768px) {

    .festa {
        min-height: 100svh;

        background-size:
            calc(100% / 4) 100%,
            100% 270px;

        background-position:
            0 0,
            0 0;
    }


    /* ----------------------------------------
        Layout
    ---------------------------------------- */

    .festa__inner {
        display: flex;
        flex-direction: column;

        width: 100%;
        min-height: auto;

        padding:
            26px
            8px
            30px;

        margin: 0;
    }

    .festa__content {
        display: contents;
    }


    /* ----------------------------------------
        Header
    ---------------------------------------- */

    .festa__header {
        order: 1;

        width: 100%;

        padding:
            0
            12px;
    }

    .festa__catch {
        margin-bottom: 8px;

        font-size: 15px;
    }

    .festa__title {
        font-size: clamp(27px, 8vw, 32px);

        line-height: 1.2;

        letter-spacing: -0.04em;

        white-space: nowrap;
    }


    /* ----------------------------------------
        Logo
    ---------------------------------------- */

    .festa__visual {
        order: 2;

        margin-top: 22px;
    }

    .festa__logo {
        width: min(72vw, 285px);
        max-width: none;

        margin: 0 auto;
    }


    /* ----------------------------------------
        Date
    ---------------------------------------- */

    .festa__date {
        order: 3;

        display: block;

        width: 100%;

        margin-top: 31px;

        padding:
            0
            33px;
    }

    .festa__year {
        display: block;

        margin:
            0
            0
            14px;

        font-size: 16px;
    }

    .festa__date-main {
        justify-content: flex-start;

        gap: 4px;
    }

    .festa__date-number {
        font-size: clamp(42px, 12vw, 52px);

        line-height: 1;
    }

    .festa__date-week {
        margin:
            0
            0
            5px
            2px;

        font-size: 10px;
    }

    .festa__date-separator {
        font-size: 25px;
    }


    /* ----------------------------------------
        Info
    ---------------------------------------- */

    .festa__info {
        order: 4;

        width: 100%;

        gap: 14px;

        margin-top: 20px;

        padding:
            0
            8px;
    }

    .festa__info-row {
        display: block;
    }

    .festa__info-label {
        width: fit-content;
        min-width: 48px;
        height: 21px;

        padding:
            0
            9px;

        margin-bottom: 3px;

        border-radius: 20px;

        font-size: 11px;
    }

    .festa__place {
        font-size: 15px;

        line-height: 1.45;
    }


    /* ----------------------------------------
        Schedule
    ---------------------------------------- */

    .festa__schedule {
        gap: 5px;
    }

    .festa__schedule-row {
        gap: 5px;

        white-space: nowrap;
    }

    .festa__schedule-day {
        min-width: 59px;

        font-size: 14px;
    }

    .festa__schedule-time,
    .festa__schedule-close {
        font-size: 16px;
    }

    .festa__schedule-note {
        font-size: 9px;
    }


    /* ----------------------------------------
        CTA
    ---------------------------------------- */

    .festa__cta-area {
        order: 5;

        width: 100%;

        margin-top: 43px;
    }

    .festa__cta {
        height: 64px;

        padding:
            0
            75px
            0
            18px;

        border-radius: 40px;

        box-shadow:
            5px
            7px
            13px
            rgba(0, 0, 0, 0.22);
    }

    .festa__cta-text {
        font-size: 16px;

        white-space: nowrap;
    }

    .festa__cta-arrow {
        right: 14px;

        width: 65px;
        height: 43px;

        font-size: 21px;
    }


    /* ----------------------------------------
        SNS
    ---------------------------------------- */

    .festa__sns {
        order: 6;

        justify-content: center;

        gap: 14px;

        width: 100%;

        margin-top: 43px;
    }

    .festa__sns-link {
        width: 41px;
        height: 41px;
    }


    /* ----------------------------------------
        Decoration
    ---------------------------------------- */

    .festa__decoration--01 {
        top: 15px;
        left: 18px;

        width: 45px;
    }

    .festa__decoration--02 {
        top: 15px;
        right: 40px;

        width: 42px;
    }

    .festa__decoration--03 {
        top: 106px;
        right: 67px;

        width: 18px;
    }

}


/* ========================================
    Small SP
    390px以下
======================================== */

@media screen and (max-width: 390px) {

    .festa__inner {
        padding-left: 7px;
        padding-right: 7px;
    }

    .festa__header {
        padding:
            0
            8px;
    }

    .festa__catch {
        font-size: 14px;
    }

    .festa__title {
        font-size: 28px;
    }

    .festa__logo {
        width: 74vw;
    }

    .festa__date {
        padding:
            0
            33px;
    }

    .festa__date-number {
        font-size: 42px;
    }

    .festa__date-week {
        font-size: 9px;
    }

    .festa__schedule-row {
        gap: 4px;
    }

    .festa__schedule-day {
        min-width: 57px;

        font-size: 13px;
    }

    .festa__schedule-time,
    .festa__schedule-close {
        font-size: 15px;
    }

    .festa__schedule-note {
        font-size: 8px;
    }

    .festa__cta-text {
        font-size: 15px;
    }

}