@charset "utf-8";


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

    .mv {
        margin: 0 auto;
        width: 100%;
    }
    .mv .mv-bg {
        margin: 1.0vw auto;
        padding: 0;
        width: 98%;
        height: auto;
        aspect-ratio: 355 / 708;
        border-radius: 4.0vw;
        overflow: hidden;
    }
    .mv .mv-bg img {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .mv .mv-box {
        position: absolute;
        top: 50%;
        left: 50%;
        width: max-content;
        translate: -50% -50%;
    }
    .mv .mv-box .msg {
        margin: 0 auto;
        color: #fff;
        font-size: 5.6vw;
        font-weight: 700;
        text-align: center;
        line-height: calc( 36 / 24 );
    }
    .mv .mv-box .pic {
        margin: 8.0vw auto 0;
        width: 80%;
        height: auto;
    }
    .mv .mv-pic {
        display: none;
        position: absolute;
        height: auto;
    }
    .mv .mv-pic img {
        width: 100%;
        height: auto;
    }
    .mv .mv-pic.pic1 {
        top: 2%;
        left: 12%;
        width: 10%;
    }
    .mv .mv-pic.pic2 {
        top: 8%;
        left: 3%;
        width: 13%;
    }
    .mv .mv-pic.pic3 {
        bottom: 8%;
        right: 15%;
        width: 11%;
    }
    .mv .mv-pic.pic4 {
        bottom: 0;
        right: 3%;
        width: 23%;
    }

    main {
        margin: 0 auto;
        width: 100%;
    }

    #news {
        margin: 0 auto;
        padding: 8.0vw 0;
        width: 100%;
    }
    #news .news-wrap {
        margin: 0 auto;
        width: 90%;
        display: grid;
        align-items: start;
        grid-template-columns: 1fr;
        gap: 0;
    }
    #news .news-wrap > h2 {
        width: 100%;
        color: var(--color-theme);
        font-size: 16.0vw;
        font-family: var(--font-alphabet);
        font-weight: 400;
        text-align: left;
        letter-spacing: 0.04em;
        grid-row: span 3;
    }
    #news .news-wrap > .date {
        margin: 2.0em 0 0;
        width: 100%;
        color: var(--fg-color);
        font-size: 4.2vw;
        font-weight: 500;
        text-align: left;
    }
    #news .news-wrap > .title {
        margin: 0.2em 0 0;
        width: 100%;
        display: block;
        color: var(--fg-color);
        font-size: 4.2vw;
        font-weight: 500;
        text-align: left;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #concept {
        margin: 0 auto;
        padding: 8.0vw 0;
        width: 100%;
    }
    #concept .concept-box {
        margin: 0 auto;
        padding: 8.0vw 4%;
        width: 90%;
        color: #fff;
        background: var(--color-theme);
        border-radius: 4.0vw;
    }
    #concept .concept-box > h2 {
        margin: 0 0 0.5em;
        width: 100%;
        color: #fff;
        font-size: 16.0vw;
        font-family: var(--font-alphabet);
        font-weight: 400;
        text-align: center;
        letter-spacing: 0.04em;
    }
    #concept .concept-box > p {
        width: 100%;
        color: #fff;
        font-size: 4.2vw;
        font-weight: 500;
        text-align: center;
        line-height: calc( 32 / 16 );
        letter-spacing: 0.04em;
    }

    #service {
        margin: 0 auto;
        padding: 16.0vw 0;
        width: 100%;
    }
    #service h2 {
        margin: 0 0 0.5em;
        width: 100%;
        color: var(--color-theme);
        font-size: 16.0vw;
        font-family: var(--font-alphabet);
        font-weight: 400;
        text-align: center;
        letter-spacing: 0.04em;
    }
    #service .service-flex {
        margin: 12.0vw auto 0;
        padding: 0;
        width: 90%;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 4.0vw 0;
    }
    #service .service-flex figure {
        order: 1;
        margin: 0 auto;
        padding: 0;
        width: 90%;
        height: auto;
        aspect-ratio: 472 / 320;
    }
    #service .service-flex figure img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 2.0vw;
    }
    #service .service-flex .info {
        order: 2;
        margin: 0;
        padding: 0;
        width: 100%;
    }
    #service .service-flex .info h3 {
        margin: 0 0 0.5em;
        color: var(--fg-color);
        font-size: 5.2vw;
        font-weight: 700;
        text-align: center;
        line-height: calc( 36 / 24 );
    }
    #service .service-flex .info p {
        margin: 1.0em 0 0;
        color: var(--fg-color);
        font-size: 4.2vw;
        font-weight: 500;
        text-align: left;
        line-height: calc( 24 / 16 );
    }
    #service .service-flex .info p.memo {
        font-size: 3.2vw;
    }
    #service .service-flex.reverse figure {
        order: 1;
    }
    #service .service-flex.reverse .info {
        order: 2;
    }
    #service .service-grid {
        margin: 12.0vw auto 0;
        padding: 0;
        width: 90%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 12.0vw 0;
    }
    #service .service-grid figure {
        margin: 0;
        padding: 0;
        width: 100%;
        height: auto;
        aspect-ratio: 472 / 320;
    }
    #service .service-grid figure img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 2.0vw;
    }
    #service .service-grid .info {
        margin: 0;
        padding: 0;
        width: 100%;
    }
    #service .service-grid .info h3 {
        margin: 0.5em 0;
        color: var(--fg-color);
        font-size: 5.2vw;
        font-weight: 700;
        text-align: center;
        line-height: calc( 36 / 24 );
    }
    #service .service-grid .info p {
        margin: 1.0em 0 0;
        color: var(--fg-color);
        font-size: 4.2vw;
        font-weight: 500;
        text-align: left;
        line-height: calc( 24 / 16 );
    }
    #service .service-grid .info p.memo {
        font-size: 3.2vw;
    }

    #facility {
        margin: 0 auto;
        padding: 16.0vw 0;
        width: 100%;
    }
    #facility .facility-box {
        position: relative;
        margin: 0 auto;
        padding: 0;
        width: 80%;
        color: #fff;
        background: url(../images/top-facility-bg.jpg) no-repeat center / cover;
        border-radius: 4.0vw;
    }
    #facility .facility-box > h2 {
        position: absolute;
        margin: 0;
        top: 0;
        left: 0;
        width: 100%;
        color: var(--color-theme);
        font-size: 16.0vw;
        font-family: var(--font-alphabet);
        font-weight: 400;
        text-align: center;
        letter-spacing: 0.04em;
        translate: 0 -50%;
    }
    #facility .facility-box > .facility-grid {
        margin: 0 auto;
        padding: 16.0vw 0 8.0vw;
        width: 90%;
        display: grid;
        grid-template-columns: repeat( 2, 1fr );
        gap: 8.0vw 8.0vw;
    }
    #facility .facility-box > .facility-grid figure {
        width: 100%;
    }
    #facility .facility-box > .facility-grid figure figcaption {
        margin: 1.0em 0 0;
        width: 100%;
        color: var(--fg-color);
        font-size: 4.0vw;
        font-weight: 700;
        text-align: center;
        line-height: calc( 20 / 16 );
    }

    #plan {
        margin: 0 auto;
        padding: 16.0vw 0;
        width: 100%;
        background: #f4f1ec;
    }
    #plan h2 {
        margin: 0 0 0.5em;
        width: 100%;
        color: #99731b;
        font-size: 16.0vw;
        font-family: var(--font-alphabet);
        font-weight: 400;
        text-align: center;
        letter-spacing: 0.04em;
    }
    #plan .plan-grid {
        margin: 8.0vw auto;
        width: 90%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2.0vw 3.0vw;
    }
    #plan .plan-grid > div {
        margin: 0;
        padding: 0.8em 1.0em;
        width: 100%;
        color: var(--fg-color);
        font-size: 3.6vw;
        font-weight: 700;
        text-align: center;
        border-radius: 0.5em;
    }
    #plan .plan-grid > div.left {
        text-align: left;
    }
    #plan .plan-grid > div.gold {
        color: #99731b;
    }
    #plan .plan-grid > div:nth-child(odd) {
        background: #fff;
    }
    #plan .plan-grid > div:nth-child(even) {
        display: flex;
        align-items: center;
        justify-content: center;
        background: #e3ddd3;
    }
    #plan .plan-grid > div:nth-child(1) {
        grid-column: span 2;
        color: #fff;
        font-size: 3.6vw;
        background: var(--color-theme);
    }
    #plan .schedule-grid {
        margin: 8.0vw auto 0;
        width: 90%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 8.0vw 0;
    }
    #plan .schedule-grid > div {
        width: 100%;
    }
    #plan .schedule-grid > div h3 {
        margin: 0 0 1.0em;
        padding: 0.8em 0;
        width: 100%;
        color: #fff;
        font-size: 5.2vw;
        font-weight: 700;
        text-align: center;
        background: var(--color-theme);
        border-radius: 0.5em;
    }
    #plan .schedule-grid > div p {
        margin: 0.5em 0 0;
        padding: 0;
        width: 100%;
        color: var(--fg-color);
        font-size: 4.2vw;
        font-weight: 500;
        text-align: center;
        line-height: calc( 24 / 16 );
    }
    #plan .schedule-grid > div strong {
        font-size: 4.0vw;
        font-weight: 700;
    }

    #event {
        margin: 0 auto;
        padding: 16.0vw 0;
        width: 100%;
    }
    #event h2 {
        margin: 0 0 0.5em;
        width: 100%;
        color: var(--color-theme);
        font-size: 16.0vw;
        font-family: var(--font-alphabet);
        font-weight: 400;
        text-align: center;
        letter-spacing: 0.04em;
    }
    #event .event-grid {
        margin: 8.0vw auto 0;
        width: 90%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8.0vw 4.0vw;
    }
    #event .event-grid > .event-box {
        display: block;
        width: 100%;
    }
    #event .event-grid > .event-box figure {
        margin: 0 auto;
        width: 90%;
        height: auto;
        aspect-ratio: 315 / 220;
        border-radius: 4.0vw;
    }
    #event .event-grid > .event-box figure img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 4.0vw;
    }
    #event .event-grid > .event-box figure:empty {
        background:
            url(../images/icon-logo.svg) no-repeat center / 50% auto,
            #f4f1ec;
    }
    #event .event-grid > .event-box .date {
        margin: 1.0em 0 0;
        padding: 0;
        width: 100%;
        color: var(--fg-color);
        font-size: 3.2vw;
        font-weight: 500;
        text-align: left;
    }
    #event .event-grid > .event-box .cats {
        margin: 10px 0;
        padding: 0;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
    }
    #event .event-grid > .event-box .cats .cat {
        display: block;
        margin: 0;
        padding: 0.4em 0.6em;
        color: #fff;
        font-size: 3.6vw;
        font-weight: 700;
        line-height: 1.0;
        background: var(--color-theme);
        border-radius: 0.4em;
    }
    #event .event-grid > .event-box .title {
        margin: 0.5em 0 0;
        padding: 0;
        width: 100%;
        color: var(--fg-color);
        font-size: 4.2vw;
        font-weight: 700;
        text-align: justify;
        line-height: calc( 30 / 20 );
    }
    #event .event-more {
        display: block;
        margin: 8.0vw auto 0;
        padding: 0.8em 1.6em;
        width: max-content;
        color: var(--color-theme);
        font-size: 4.2vw;
        font-weight: 700;
        background: #fff;
        border: 1px solid var(--color-theme);
        border-radius: 4.0em;
    }

    #reserve {
        margin: 0 auto;
        padding: 16.0vw 0;
        width: 100%;
    }
    #reserve .reserve-bg {
        margin: 0 auto;
        padding: 0;
        width: 100%;
        height: auto;
        aspect-ratio: 375 / 504;
    }
    #reserve .reserve-bg img {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        object-position: 50% 82%;
        object-fit: cover;
        filter: brightness( 0.6 );
    }
    #reserve .reserve-info {
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        translate: 0 -50%;
    }
    #reserve .reserve-info h2 {
        margin: 0;
        width: 100%;
        color: #fff;
        font-size: 16.0vw;
        font-family: var(--font-alphabet);
        font-weight: 400;
        text-align: center;
        letter-spacing: 0.04em;
    }
    #reserve .reserve-info p {
        margin: 0;
        width: 100%;
        color: #fff;
        font-size: 4.2vw;
        font-weight: 500;
        text-align: center;
        line-height: calc( 24 / 16 );
    }
    #reserve .reserve-info .reserve-btn {
        display: block;
        margin: 3.0em auto 0;
        padding: 1.0em 2.0em;
        width: max-content;
        color: #fff;
        font-size: 4.2vw;
        font-weight: 700;
        text-align: center;
        line-height: 1.0;
        background: var(--color-theme);
        border-radius: 4.0em;
    }

    #access {
        margin: 0 auto;
        padding: 16.0vw 0;
        width: 100%;
    }
    #access h2 {
        margin: 0 0 0.5em;
        width: 100%;
        color: var(--color-theme);
        font-size: 16.0vw;
        font-family: var(--font-alphabet);
        font-weight: 400;
        text-align: center;
        letter-spacing: 0.04em;
    }
    #access .access-grid {
        margin: 8.0vw auto 0;
        width: 90%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 8.0vw 0;
    }
    #access .access-grid > div {
        width: 100%;
    }
    #access .access-grid > div .access-logo {
        width: 266px;
        max-width: 100%;
        height: auto;
    }
    #access .access-grid > div p {
        margin: 1.0em 0 0;
        color: var(--fg-color);
        font-size: 4.2vw;
        font-weight: 500;
        text-align: justify;
        line-height: calc( 24 / 16 );
    }
    #access .access-grid > div .sns-icons {
        margin: 8.0vw 0 0;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 0 4.0vw;
    }
    #access .access-grid > div .sns-icons img {
        width: 40px;
        height: 40px;
        object-fit: conatin;
    }
    #access .access-grid > div iframe {
        width: 100%;
        height: auto;
        aspect-ratio: 512 / 320;
        border: 0;
        border-radius: 4.0vw;
    }
    #access .access-grid > div:nth-child(1) {
        grid-row: 2;
    }
    #access .access-grid > div:nth-child(2) {
        grid-row: 1;
    }

}


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

    .mv {
        margin: 0 auto;
        width: 100%;
    }
    .mv .mv-bg {
        margin: 1.0vw auto;
        padding: 0;
        width: 94%;
        height: auto;
        aspect-ratio: 1432 / 780;
        border-radius: 2.0vw;
        overflow: hidden;
    }
    .mv .mv-bg img {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: brightness( 0.7 );
    }
    .mv .mv-box {
        position: absolute;
        top: 50%;
        left: 50%;
        width: max-content;
        translate: -50% -50%;
    }
    .mv .mv-box .msg {
        margin: 0 auto;
        color: #fff;
        font-size: calc( 24 * min( 100vw, 1080px ) / 1080 );
        font-weight: 700;
        text-align: center;
        line-height: calc( 36 / 24 );
    }
    .mv .mv-box .pic {
        margin: 40px auto 0;
        width: 60%;
        max-width: 204px;
        height: auto;
    }
    .mv .mv-pic {
        position: absolute;
        height: auto;
    }
    .mv .mv-pic img {
        width: 100%;
        height: auto;
    }
    .mv .mv-pic.pic1 {
        top: 2%;
        left: 12%;
        width: 10%;
    }
    .mv .mv-pic.pic2 {
        top: 8%;
        left: 3%;
        width: 13%;
    }
    .mv .mv-pic.pic3 {
        bottom: 8%;
        right: 15%;
        width: 11%;
    }
    .mv .mv-pic.pic4 {
        bottom: 0;
        right: 3%;
        width: 23%;
    }

    main {
        margin: 0 auto;
        width: 100%;
    }

    #news {
        margin: 0 auto;
        padding: 80px 0;
        width: 100%;
    }
    #news .news-wrap {
        margin: 0 auto;
        width: 90%;
        max-width: 1024px;
        display: grid;
        align-items: start;
        grid-template-columns: calc( 240 * min( 90vw, 1024px ) / 1024 ) 100px 1fr;
        gap: 0;
    }
    #news .news-wrap > h2 {
        width: 100%;
        color: var(--color-theme);
        font-size: calc( 74 * min( 90vw, 1024px ) / 1024 );
        font-family: var(--font-alphabet);
        font-weight: 400;
        text-align: left;
        letter-spacing: 0.04em;
        grid-row: span 3;
    }
    #news .news-wrap > .date {
        width: 100%;
        color: var(--fg-color);
        font-size: 16px;
        font-weight: 500;
        text-align: left;
    }
    #news .news-wrap > .title {
        width: 100%;
        display: block;
        color: var(--fg-color);
        font-size: 16px;
        font-weight: 500;
        text-align: left;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #concept {
        margin: 0 auto;
        padding: 80px 0;
        width: 100%;
    }
    #concept .concept-box {
        margin: 0 auto;
        padding: calc( 60 * min( 90vw, 1024px ) / 1024 ) 0;
        width: 90%;
        max-width: 1024px;
        color: #fff;
        background: var(--color-theme);
        border-radius: calc( 20 * min( 90vw, 1024px ) / 1024 );
    }
    #concept .concept-box > h2 {
        margin: 0 0 0.5em;
        width: 100%;
        color: #fff;
        font-size: calc( 80 * min( 90vw, 1024px ) / 1024 );
        font-family: var(--font-alphabet);
        font-weight: 400;
        text-align: center;
        letter-spacing: 0.04em;
    }
    #concept .concept-box > p {
        width: 100%;
        color: #fff;
        font-size: calc( 16 * min( 90vw, 1024px ) / 1024 );
        font-weight: 500;
        text-align: center;
        line-height: calc( 32 / 16 );
        letter-spacing: 0.04em;
    }

    #service {
        margin: 0 auto;
        padding: 80px 0;
        width: 100%;
    }
    #service h2 {
        margin: 0 0 0.5em;
        width: 100%;
        color: var(--color-theme);
        font-size: calc( 80 * min( 90vw, 1024px ) / 1024 );
        font-family: var(--font-alphabet);
        font-weight: 400;
        text-align: center;
        letter-spacing: 0.04em;
    }
    #service .service-flex {
        margin: 40px auto 0;
        padding: 0;
        width: 90%;
        max-width: 1024px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    #service .service-flex figure {
        margin: 0;
        padding: 0;
        width: 48%;
        height: auto;
        aspect-ratio: 472 / 320;
    }
    #service .service-flex figure img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: calc( 10 * min( 90vw, 1024px ) / 1024 );
    }
    #service .service-flex .info {
        margin: 0;
        padding: 0;
        width: 48%;
    }
    #service .service-flex .info h3 {
        margin: 0 0 0.5em;
        color: var(--fg-color);
        font-size: 24px;
        font-weight: 700;
        text-align: center;
        line-height: calc( 36 / 24 );
    }
    #service .service-flex .info p {
        margin: 1.0em 0 0;
        color: var(--fg-color);
        font-size: 16px;
        font-weight: 500;
        text-align: left;
        line-height: calc( 24 / 16 );
    }
    #service .service-flex .info p.memo {
        font-size: 14px;
    }
    #service .service-flex.reverse figure {
        order: 2;
    }
    #service .service-flex.reverse .info {
        order: 1;
    }
    #service .service-grid {
        margin: 80px auto 0;
        padding: 0;
        width: 90%;
        max-width: 1024px;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 0 20px;
    }
    #service .service-grid figure {
        margin: 0;
        padding: 0;
        width: 100%;
        height: auto;
        aspect-ratio: 472 / 320;
    }
    #service .service-grid figure img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: calc( 10 * min( 90vw, 1024px ) / 1024 );
    }
    #service .service-grid .info {
        margin: 0;
        padding: 0;
        width: 100%;
    }
    #service .service-grid .info h3 {
        margin: 0.5em 0;
        color: var(--fg-color);
        font-size: 24px;
        font-weight: 700;
        text-align: center;
        line-height: calc( 36 / 24 );
    }
    #service .service-grid .info p {
        margin: 1.0em 0 0;
        color: var(--fg-color);
        font-size: 16px;
        font-weight: 500;
        text-align: left;
        line-height: calc( 24 / 16 );
    }
    #service .service-grid .info p.memo {
        font-size: 14px;
    }

    #facility {
        margin: 0 auto;
        padding: 80px 0;
        width: 100%;
    }
    #facility .facility-box {
        position: relative;
        margin: 0 auto;
        padding: 0;
        width: 90%;
        max-width: 1024px;
        color: #fff;
        background: url(../images/top-facility-bg.jpg) no-repeat center / cover;
        border-radius: calc( 20 * min( 90vw, 1024px ) / 1024 );
    }
    #facility .facility-box > h2 {
        position: absolute;
        margin: 0;
        top: 0;
        left: 0;
        width: 100%;
        color: var(--color-theme);
        font-size: calc( 80 * min( 90vw, 1024px ) / 1024 );
        font-family: var(--font-alphabet);
        font-weight: 400;
        text-align: center;
        letter-spacing: 0.04em;
        translate: 0 -50%;
    }
    #facility .facility-box > .facility-grid {
        margin: 0 auto;
        padding: calc( 100 * min( 90vw, 1024px ) / 1024 ) 0 calc( 40 * min( 90vw, 1024px ) / 1024 );
        width: 90%;
        display: grid;
        grid-template-columns: repeat( 6, 1fr );
        gap: 0 20px;
    }
    #facility .facility-box > .facility-grid figure {
        width: 100%;
    }
    #facility .facility-box > .facility-grid figure figcaption {
        margin: 1.0em 0 0;
        width: 100%;
        color: var(--fg-color);
        font-size: 16px;
        font-weight: 700;
        text-align: center;
        line-height: calc( 20 / 16 );
    }

    #plan {
        margin: 0 auto;
        padding: 80px 0;
        width: 100%;
        background:
            url(../images/top-plan-pic1.png) no-repeat 0% 50% / 25% auto,
            url(../images/top-plan-pic2.png) no-repeat 100% 120% / 25% auto,
            #f4f1ec;
    }
    #plan::before {
        position: absolute;
        top: 10%;
        left: 0;
        width: 25%;
        height: auto;
        aspect-ratio: 1264 / 2748;
        background: url(../images/top-plan-pic1.png) no-repeat center / contain;
    }
    #plan h2 {
        margin: 0 0 0.5em;
        width: 100%;
        color: #99731b;
        font-size: calc( 80 * min( 90vw, 1024px ) / 1024 );
        font-family: var(--font-alphabet);
        font-weight: 400;
        text-align: center;
        letter-spacing: 0.04em;
    }
    #plan .plan-grid {
        margin: 40px auto;
        width: 90%;
        max-width: 820px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px 24px;
    }
    #plan .plan-grid > div {
        margin: 0;
        padding: 0.8em 1.0em;
        width: 100%;
        color: var(--fg-color);
        font-size: 16px;
        font-weight: 700;
        text-align: center;
        border-radius: 0.5em;
    }
    #plan .plan-grid > div.left {
        text-align: left;
    }
    #plan .plan-grid > div.gold {
        color: #99731b;
    }
    #plan .plan-grid > div:nth-child(odd) {
        background: #fff;
    }
    #plan .plan-grid > div:nth-child(even) {
        display: flex;
        align-items: center;
        justify-content: center;
        background: #e3ddd3;
    }
    #plan .plan-grid > div:nth-child(1) {
        grid-column: span 2;
        color: #fff;
        font-size: 20px;
        background: var(--color-theme);
    }
    #plan .plan-grid + h2 {
        margin-top: 80px;
    }
    #plan .schedule-grid {
        margin: 40px auto 0;
        width: 90%;
        max-width: 820px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 32px;
    }
    #plan .schedule-grid > div {
        width: 100%;
    }
    #plan .schedule-grid > div h3 {
        margin: 0 0 1.0em;
        padding: 0.8em 0;
        width: 100%;
        color: #fff;
        font-size: 20px;
        font-weight: 700;
        text-align: center;
        background: var(--color-theme);
        border-radius: 0.5em;
    }
    #plan .schedule-grid > div p {
        margin: 0.5em 0 0;
        padding: 0;
        width: 100%;
        color: var(--fg-color);
        font-size: 16px;
        font-weight: 500;
        text-align: center;
        line-height: calc( 24 / 16 );
    }
    #plan .schedule-grid > div strong {
        font-size: 20px;
        font-weight: 700;
    }

    #event {
        margin: 0 auto;
        padding: 80px 0;
        width: 100%;
    }
    #event h2 {
        margin: 0 0 0.5em;
        width: 100%;
        color: var(--color-theme);
        font-size: calc( 80 * min( 90vw, 1024px ) / 1024 );
        font-family: var(--font-alphabet);
        font-weight: 400;
        text-align: center;
        letter-spacing: 0.04em;
    }
    #event .event-grid {
        margin: 40px auto 0;
        width: 90%;
        max-width: 1024px;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 64px 32px;
    }
    #event .event-grid > .event-box {
        display: block;
        width: 100%;
    }
    #event .event-grid > .event-box:nth-child(4) {
        display: none;
    }
    #event .event-grid > .event-box figure {
        margin: 0;
        width: 100%;
        height: auto;
        aspect-ratio: 315 / 220;
        border-radius: calc( 20 * min( 90vw, 1024px ) / 1024 );
    }
    #event .event-grid > .event-box figure img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: calc( 20 * min( 90vw, 1024px ) / 1024 );
    }
    #event .event-grid > .event-box figure:empty {
        background:
            url(../images/icon-logo.svg) no-repeat center / 50% auto,
            #f4f1ec;
    }
    #event .event-grid > .event-box .date {
        margin: 1.0em 0 0;
        padding: 0;
        width: 100%;
        color: var(--fg-color);
        font-size: 16px;
        font-weight: 500;
        text-align: left;
    }
    #event .event-grid > .event-box .cats {
        margin: 10px 0;
        padding: 0;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
    }
    #event .event-grid > .event-box .cats .cat {
        display: block;
        margin: 0;
        padding: 0.4em 0.6em;
        color: #fff;
        font-size: 14px;
        font-weight: 700;
        line-height: 1.0;
        background: var(--color-theme);
        border-radius: 0.4em;
    }
    #event .event-grid > .event-box .title {
        margin: 0.5em 0 0;
        padding: 0;
        width: 100%;
        color: var(--fg-color);
        font-size: 20px;
        font-weight: 700;
        text-align: justify;
        line-height: calc( 30 / 20 );
    }
    #event .event-more {
        display: block;
        margin: 40px auto 0;
        padding: 0.8em 1.6em;
        width: max-content;
        color: var(--color-theme);
        font-size: 16px;
        font-weight: 700;
        background: #fff;
        border: 1px solid var(--color-theme);
        border-radius: 4.0em;
    }

    #reserve {
        margin: 0 auto;
        padding: 80px 0;
        width: 100%;
    }
    #reserve .reserve-bg {
        margin: 0 auto;
        padding: 0;
        width: 100%;
        height: auto;
        aspect-ratio: 1512 / 480;
    }
    #reserve .reserve-bg img {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        object-position: 50% 82%;
        object-fit: cover;
        filter: brightness( 0.6 );
    }
    #reserve .reserve-info {
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        translate: 0 -50%;
    }
    #reserve .reserve-info h2 {
        margin: 0;
        width: 100%;
        color: #fff;
        font-size: 80px;
        font-family: var(--font-alphabet);
        font-weight: 400;
        text-align: center;
        letter-spacing: 0.04em;
    }
    #reserve .reserve-info p {
        margin: 0;
        width: 100%;
        color: #fff;
        font-size: 16px;
        font-weight: 500;
        text-align: center;
        line-height: calc( 24 / 16 );
    }
    #reserve .reserve-info .reserve-btn {
        display: block;
        margin: 3.0em auto 0;
        padding: 1.0em 2.0em;
        width: max-content;
        color: #fff;
        font-size: 16px;
        font-weight: 700;
        text-align: center;
        line-height: 1.0;
        background: var(--color-theme);
        border-radius: 4.0em;
    }

    #access {
        margin: 0 auto;
        padding: 80px 0;
        width: 100%;
    }
    #access h2 {
        margin: 0 0 0.5em;
        width: 100%;
        color: var(--color-theme);
        font-size: calc( 80 * min( 90vw, 1024px ) / 1024 );
        font-family: var(--font-alphabet);
        font-weight: 400;
        text-align: center;
        letter-spacing: 0.04em;
    }
    #access .access-grid {
        margin: 40px auto 0;
        width: 90%;
        max-width: 1024px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 40px;
    }
    #access .access-grid > div {
        width: 100%;
    }
    #access .access-grid > div .access-logo {
        width: 266px;
        max-width: 100%;
        height: auto;
    }
    #access .access-grid > div p {
        margin: 1.0em 0 0;
        color: var(--fg-color);
        font-size: 16px;
        font-weight: 500;
        text-align: justify;
        line-height: calc( 24 / 16 );
    }
    #access .access-grid > div .sns-icons {
        margin: 40px 0 0;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 0 20px;
    }
    #access .access-grid > div .sns-icons img {
        width: 40px;
        height: 40px;
        object-fit: conatin;
    }
    #access .access-grid > div iframe {
        width: 100%;
        height: auto;
        aspect-ratio: 512 / 320;
        border: 0;
        border-radius: 20px;
    }

}