@charset "UTF-8";
@import url('reset.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');

:root {
    /* color */
    --color-white: #FFFFFF;
    --color-black: #1A1A1A;
    --color-blue: #009FE8;
    --color-lightblue: #E8F2F5;
    --color-darklightblue: #EBEFF1;

    --color-darkgray: #404040;
    --color-gray: #707070;
    --color-lightgray: #D6D6D6;
    --color-lightgray2: #AFAFAF;
    --color-lightgray3: #D0D0D0;

    --color-red: #FF2800;
    --color-beige: #F6F5F1;

    --color-text: #1A1A1A;
    --color-gray-pankuzu: #6E6E6E;

    --color-bg-image: #EDEDED;
    --color-bg-slider: #FAF9ED;

    --color-gradient-blue: linear-gradient(180deg, #EBEFF1 0%, #D8E9EF 100%);
    /* font */


    /* border-radius */
    --border-radius-lg: 10px;
    --border-radius: 6px;
    --border-radius-sm: 3px;

    --animation-transition: 0.2s;
}

html {
    scroll-behavior: smooth;
    /* @media (max-width: 767.98px) {
        scroll-padding: 72px;
    } */
}

html:has(.scroll-offset) {
    scroll-padding-top: 120px;
}

/* SNS非表示用 */
a[title="Instagram"],
a[title="Facebook"] {
    display: none !important;
}


body {
    font-size: 16px;
    font-family: 'Noto Sans JP', sans-serif;
    color: var(--color-text);
    line-height: 2.2;
    font-weight: 400;
    font-feature-settings: "palt";
    letter-spacing: 0.05em;
    overflow-wrap: anywhere;
    /* 収まらない場合に折り返す */
    word-break: normal;
    /* 単語の分割はデフォルトに依存 */
    line-break: strict;
    /* 行の折り返しはstrictにする */
}

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

a {
    cursor: pointer !important;
    transition: opacity 0.3s ease;
}



a:hover {
    opacity: 0.6;
}

/* 基本マージン*/
@media (max-width: 1047.98px) {
    main {
        padding-top: 80px;
    }
}

section {
    margin-bottom: 60px;
}

/* display */
.d-pc {
    display: block;
}

.d-sp {
    display: none;
}

@media (max-width: 767.98px) {
    .d-pc {
        display: none;
    }

    .d-sp {
        display: block;
    }
}

/* Material Symbols Outlined の設定 */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    transition: transform 0.3s ease;
    display: inline-block;
}

/* layout */
.header--inner {
    max-width: calc(1306px + 2rem);
    margin-inline: auto;
    padding-inline: 1rem;
}

.container {
    max-width: calc(1200px + 2rem);
    margin-inline: auto;
    padding-inline: 1rem;
}

.container-md {
    max-width: calc(1024px + 2rem);
    margin-inline: auto;
    padding-inline: 1rem;
}


/* utility */

/* color */
.bg-white {
    background-color: var(--color-white);
}

.bg-black {
    background-color: var(--color-black);
}

.bg-blue {
    background-color: var(--color-blue);
}

.bg-lightblue {
    background-color: var(--color-lightblue);
}

.bg-darklightblue {
    background-color: var(--color-darklightblue);
}

.bg-darkgray {
    background-color: var(--color-darkgray);
}

.bg-gray {
    background-color: var(--color-gray);
}

.bg-lightgray {
    background-color: var(--color-lightgray);
}

.bg-lightgray2 {
    background-color: var(--color-lightgray2);
}

.bg-lightgray3 {
    background-color: var(--color-lightgray3);
}

.bg-red {
    background-color: var(--color-red);
}

.bg-text {
    background-color: var(--color-text);
}

.bg-bg-image {
    background-color: var(--color-bg-image);
}

.bg-gradient-blue {
    background: var(--color-gradient-blue);
}

.bg-beige {
    background-color: var(--color-beige);
}

.text-white {
    color: var(--color-white);
}

.text-black {
    color: var(--color-black);
}

/* image */
.object-fit-cover {
    object-fit: cover;
}

.object-fit-contain {
    object-fit: contain !important;
}

/* button */
.btn-outline {
    display: inline-block;
    border: 1px solid var(--color-gray);
    color: var(--color-text);
    background-color: var(--color-white);
    text-align: center;
    font-size: 1.125rem;
    font-weight: 500;
    padding-block: 2rem;
    /* line-height: 100px; */
    text-decoration: none;
    font-feature-settings: "palt";
    line-height: 1.4;

    width: min(100%, 480px);
    /* height: 100px; */
}

.btn-outline.btn-w-auto {
    width: auto;
    padding-inline: 20px 60px;
}

.btn-outline.btn-noicon {
    padding-inline: 20px;
}

.btn-auto {
    width: fit-content;
    min-width: unset;
    padding-right: 6rem;
    height: unset !important;
    padding-block: 1rem;

    @media (max-width: 767.98px) {
        width: 100%;
    }
}

@media (min-width: 768px) {
    .btn-half {
        width: min(100%, calc(50% - 1rem)) !important;
        flex: 1 1 50% !important;
    }

    .btn-quarter {
        width: 25% !important;
        flex: 1 1 25% !important;
    }
}

.btn-outline.btn-sm {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-block: 1rem;
    /* height: 64px; */

    &.btn-pdf,
    &.btn-word {
        justify-content: flex-start;
        padding-left: 24px;
    }

    & h4 {
        margin: 0;
    }
}

/* button icon */
.btn-outline {
    position: relative;
}

.btn-chevron {
    @media (max-width: 767.98px) {
        padding-inline: 32px 44px;
    }
    &::after {
        font-family: 'Material Symbols Outlined';
        content: 'chevron_right';
        position: absolute;
        font-size: 40px;
        font-weight: 100;
        top: calc(50%);
        right: 16px;
        transform: translateY(-50%);
        color: var(--color-blue);

        @media (max-width: 767.98px) {
            right: 0;
        }
    }

    &.btn-chevron-blue {
        &::after {
            color: var(--color-blue);
        }
    }
}

.btn-arrow {
    &::after {
        content: url("../images/icon-arrow-right.svg");
        position: absolute;
        top: 50%;
        right: 24px;
        transform: translateY(-50%);
    }
}

.btn-pdf {
    &::after {
        content: url("../images/icon-pdf.svg");
        position: absolute;
        top: calc(50% + 2px);
        right: 24px;
        transform: translateY(-50%);
    }
}

.btn-blank {
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
    min-height: 100px;
    line-height: 1.5;
    padding: 1rem 60px;

    &::after {
        content: url("../images/icon-blank-blue.svg");
        position: absolute;
        top: 50%;
        right: 24px;
        transform: translateY(-50%);
    }
}

.btn-blank-blue {
    &::after {
        content: url("../images/icon-blank-blue.svg");
        position: absolute;
        top: calc(50% + 2px);
        right: 24px;
        transform: translateY(-50%);
    }
}


.btn-pdf {
    text-align: left;
    padding-left: 24px;

    &::after {
        content: url("../images/icon-pdf.svg");
        position: absolute;
        top: calc(50% + 4px);
        right: 24px;
        transform: translateY(-50%);
    }
}

.btn-word {
    text-align: left;
    padding-left: 24px;

    &::after {
        content: url("../images/icon-word.svg");
        position: absolute;
        top: calc(50% + 4px);
        right: 24px;
        transform: translateY(-50%);
    }
}

.btn-free {
    width: auto !important;
    height: auto !important;
    padding: 16px 64px 16px 24px;
    line-height: 1.2 !important;
}

.btn-fluide {
    width: 100% !important;
    height: auto !important;
    padding: 16px 24px 16px 24px;
    line-height: 1.2 !important;
    text-align: center !important;
}

.btn-wrapper {
    text-align: center;
    margin-top: 80px;
}

.btn-wrapper.left {
    text-align: left;
}

.btn-blank-tc {
    &::after {
        content: "";
        display: inline-block;
        background-image: url("../images/icon-blank-blue.svg");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        width: 20px;
        height: 20px;
        position: relative;
        top: 2px;
    }
}

.pb-sm:has(.btn-blank-tc) {
    margin-top: 1rem;
}

.bg-gradient-blue {
    & .container {
        padding: 100px 1rem;
    }

    & .btn-white {
        position: relative;
        background-color: var(--color-white);
        padding-inline: 40px 56px;
        /* height: 120px; */
        padding-block: 2.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 500;
        line-height: 1.4;

        &.w-half {
            width: min(100%, 580px);
            /* width: 100%; */

            @media (max-width: 1047.98px) {
                width: 100%;
            }
        }

        &.w-quarter {
            width: min(100%, 270px);

            @media (max-width: 1047.98px) {
                width: 100%;
            }
        }
    }

    /* &.bg-page-top {
        & .btn-white {
            height: 120px;
            padding-block: 2rem;
        }
    } */
}

.exhibition-index-btn {
    & .d-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 40px;

        @media (max-width: 767.98px) {
            grid-template-columns: 1fr;
        }
    }
}

/* 展覧会詳細ページ */
.exhibition-view,
.practice-view {
    & a[href$=".pdf"] {
        position: relative;

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

        justify-content: space-between;
        padding: 16px 24px;

        border: 1px solid var(--color-gray);
        color: var(--color-text);
        background-color: var(--color-white);
        text-decoration: none;
        font-weight: 500;

        /* line-height: 1.2; */

        &::after {
            content: "";
            display: block;
            background-image: url("../images/icon-pdf.svg");
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            margin-left: 4px;
            width: 24px;
            height: 24px;
        }
    }

    & a[target="_blank"]:not([href$=".pdf"]) {
        position: relative;

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

        justify-content: space-between;
        padding: 16px 24px;

        border: 1px solid var(--color-gray);
        color: var(--color-text);
        background-color: var(--color-white);
        text-decoration: none;
        font-weight: 500;

        /* line-height: 1.2; */

        &::after {
            content: "";
            display: block;
            background-image: url("../images/icon-blank-blue.svg");
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            margin-inline: 2px 4px;
            width: 20px;
            height: 20px;
            position: relative;
            top: -1px;
        }
    }

    & section.event-overview,
    & section.content,
    & section.exhibition-view-content {
        & a[target="_blank"]:not([href$=".pdf"]) {
            /* width:unset; */
            margin: 0 !important;
            padding: 0 !important;
            border: none !important;
            vertical-align: baseline !important;
        }
    }

}

& section.event-overview table {
    max-width: 100% !important;
    width: 100% !important;
}

.purchase-tickets .btn-wrapper {
    padding-inline: 0 !important;
}

.exhibition-view .btn-wrapper {
    padding-inline: 1rem;
}


/* link */

.link-item {
    display: inline-flex;
    padding: 8px 0;
    color: var(--color-blue);
    text-decoration: none;
    transition: color 0.15s ease;
    align-items: center;
    gap: 8px;


    &.link-black {
        color: var(--color-black);
        text-decoration: none !important;
    }

    &.link-pdf {
        color: var(--color-text);

        &::after {
            content: url("../images/icon-pdf.svg");
            position: relative;
            top: 4px;
        }
    }

    &.link-blank {
        gap: 12px;

        &::after {
            content: url("../images/icon-blank.svg");
            position: relative;
            top: 4px;
            transform: scale(0.8);
        }
    }

    &.link-blank-blue {
        text-decoration: underline;
        gap: 12px;

        &::after {
            content: url("../images/icon-blank-blue.svg");
            position: relative;
            top: 4px;
            transform: scale(0.8);
        }
    }

    &.link-chevron {
        gap: 12px;
        color: var(--color-text);

        &::after {
            font-family: 'Material Symbols Outlined';
            content: 'chevron_right';
            font-size: 24px;
            line-height: 0;
            color: var(--color-blue);
            position: relative;
            top: 2px;
            right: 8px;
            font-weight: 400;
        }
    }

}

.icon-blank-blue {
    display: inline-block;
    background-image: url(../images/icon-blank-blue.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 16px;
    height: 16px;
    margin-left: 4px;
    position: relative;
    top: 2px;
}

/* tag */
.tag {
    padding: 8px;
    display: inline-block;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1rem;
    width: max-content;
    min-width: 100px;
    text-align: center;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.1em;


    &.tag-news {
        font-size: 0.875rem;
        background-color: var(--color-darkgray);
        color: var(--color-white);
        width: 120px;
        padding: 8px 0;
    }

    &.tag-darkgray {
        background-color: var(--color-darkgray);
        color: var(--color-white);
    }

    &.tag-outline {
        border: 1px solid var(--color-gray);
        background-color: var(--color-white);
    }

    &.tag-gray {
        background-color: var(--color-lightgray);
        color: var(--color-text);
    }
}

.box__content-cat {
    margin-bottom: 32px;

    & .tag {
        padding: 8px;
        font-size: 1rem;
        margin-right: 24px;
    }

    & .tag:last-child {
        margin-right: 0;
    }
}

/* headding */
h2 {
    font-size: 1.5rem;
    line-height: 1.5rem;
    font-weight: 600;
    margin-bottom: 2rem;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--color-lightgray);

    &.hedding--title--no-border {
        border-bottom: none;
        text-align: center;
    }
}

h3 {
    font-size: 1.25rem;
    line-height: 1.5rem;
    font-weight: 600;
    margin-bottom: 16px;
    padding-left: 12px;
    border-left: 6px solid var(--color-blue);
}

/* list */
.news-list {
    & .news-list-inner {
        & .news-list-item {
            border-top: 1px solid var(--color-lightgray3);

            &:last-child {
                border-bottom: 1px solid var(--color-lightgray3);
            }

            &>.news-list-item-link {
                display: flex;
                align-items: baseline;
                gap: 24px;
                padding: 20px 40px;

                &>span {
                    display: block;
                }

                & .item-date {
                    font-weight: 700;
                    width: 120px;

                    @media (max-width: 767.98px) {
                        margin-right: 16px;
                    }

                }

                & .item-date,
                & .item-tag {
                    flex-shrink: 0;
                }

                & .item-content {
                    display: contents;

                    @media (max-width: 767.98px) {
                        display: block;
                    }
                }


                & .item-title {
                    width: max(600px, 60vw);
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;

                    @media (max-width: 767.98px) {
                        display: block;
                        width: 100%;
                        white-space: normal;
                        overflow: visible;
                        text-overflow: unset;
                    }

                }

                &.link-pdf {
                    &::after {
                        display: block;
                        position: relative;
                        top: 4px;
                        align-self: center;
                        margin-left: auto;
                        content: url("../images/icon-pdf.svg");
                    }
                }

                &.link-arrow {
                    &::after {
                        display: block;
                        position: relative;
                        align-self: center;
                        margin-left: auto;
                        content: url("../images/icon-arrow-right.svg");
                    }
                }

                &.link-arrow-blue {
                    &::after {
                        display: block;
                        position: relative;
                        top: 4px;
                        align-self: center;
                        margin-left: auto;
                        content: url("../images/icon-arrow-right-blue.svg");
                    }
                }

                &.link-blank {
                    &::after {
                        display: block;
                        position: relative;
                        top: 4px;
                        align-self: center;
                        margin-left: auto;
                        content: url("../images/icon-blank.svg");
                    }
                }
            }

        }
    }
}

.news-list.en {
    & .news-list-item {
        padding: 1rem;

        & .item-date {
            display: block;
            width: 100%;
            font-size: 0.875rem;
            font-weight: 700;
        }

        & .item-content {
            display: block;
            width: 100%;
        }
    }
}

/* text */
.fs-bold {
    font-weight: 600 !important;
}

.text-blue {
    color: var(--color-blue) !important;
}

.text-red {
    color: var(--color-red) !important;
}

.line-height-sm {
    line-height: 1.4;
}

.letter-spacing-sm {
    letter-spacing: 0.1em;
}

/* flex */
.d-flex {
    display: flex;
}

.d-flex-shrink {
    flex-shrink: 0;
}

@media (max-width: 767.98px) {
    .d-flex-sm-column {
        flex-direction: column;
    }
}

.d-grid {
    display: grid;
}

@media (min-width: 768px) {
    .d-grid-col-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .d-grid-col-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .d-grid-col-4 {
        grid-template-columns: repeat(4, 1fr);
    }
}



.d-justify-center {
    justify-content: center;
}

.d-justify-start {
    justify-content: flex-start;
}

.d-justify-end {
    justify-content: flex-end;
}

.d-justify-between {
    justify-content: space-between;
}

.d-align-center {
    align-items: center;
}

.d-align-start {
    align-items: flex-start;
}

.d-align-end {
    align-items: flex-end;
}

/* width */
.w-25 {
    width: 25% !important;
}

.w-50 {
    width: 50% !important;
}

@media (min-width: 768px) {
    .w-md-75 {
        width: 75% !important;
    }
}

.w-75 {
    width: 75% !important;
}

.w-100 {
    width: 100% !important;
}

/* text */
.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}


.text-blue {
    color: var(--color-blue);
}

/* table */
.table-container {
    overflow-x: auto;
}

.table {
    width: 100%;
    width: 1200px;
    border-collapse: collapse;
    line-height: 2;
}

.table th {
    background-color: var(--color-lightblue);
}

.table th,
.table td {
    border: 1px solid var(--color-gray);
    padding: 12px 16px;
    text-align: center;
    vertical-align: middle;
}

.table-help {
    font-size: 0.875rem;
    line-height: 1.4;
    margin-top: 16px;
}

/* image */
.d-grid:has(.image-box-half) {
    grid-template-columns: repeat(auto-fit, 570px);
    gap: 30px;

    @media (max-width: 767.98px) {
        grid-template-columns: 1fr;
        gap: 4rem;
    }
}

.d-grid:has(.image-box-third) {
    grid-template-columns: repeat(auto-fit, 380px);
    gap: 30px;

    @media (max-width: 767.98px) {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

.d-grid:has(.image-box-quarter) {
    grid-template-columns: repeat(auto-fit, 270px);
    gap: 30px;

    @media (max-width: 767.98px) {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    & .image-list-item {
        gap: 8px;
    }

}

.image-list-item,
.image-list-item a {
    display: flex;
    flex-direction: column;
    gap: 16px;

    @media (max-width: 767.98px) {
        gap: 8px;
    }


    & .tag-container {
        &>span:not(:first-child) {
            margin-left: 16px;
        }
    }
}

.storage-image-list {
    justify-content: space-between;

    & .image-list-item {
        background-color: var(--color-lightblue);
        padding: 2rem 0.5rem 1rem 0.5rem;

        & .image-wrapper {
            aspect-ratio: 16/ 9;
            width: 100%;
            /* height: 320px; */
            /* overflow: hidden; */
            background-color: var(--color-lightblue);

            & img {
                object-fit: contain;
                width: 100%;
                height: 100%;
                object-position: center;
            }
        }

        & figcaption {
            line-height: 1.4;
            margin-top: 0.25rem;
            color: var(--color-text);
            text-align: center;
        }
    }
}

.museum-extension-list {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}


.collection {
    & .image-list-item a {
        gap: 4px;
    }

    & .list-item-title {
        line-height: 1.4;
        font-weight: 600;
    }
}

figure.image-box {
    overflow: hidden;
    background-color: var(--color-bg-image);

    @media (max-width: 767.98px) {
        margin-bottom: 16px;
        aspect-ratio: 4/3;
    }

    & img {
        object-fit: contain;
        width: 100%;
        height: 100%;
    }
}

.image-box-half {
    width: 570px;
    height: 370px;

    @media (max-width: 767.98px) {
        aspect-ratio: 1/1;
        width: 100%;
        height: 100%;
    }
}

.image-box-third {
    width: 380px;
    height: 380px;

    @media (max-width: 767.98px) {
        aspect-ratio: 1/1;
        width: 100%;
        height: 100%;
    }
}

.image-box-quarter {
    width: 270px;
    height: 175px;

    @media (max-width: 767.98px) {
        width: 100%;
        height: auto;
    }
}

.image-box-thumbnail {
    width: 100%;
    aspect-ratio: 1/1;
}

.list-item-content {
    & .list-item--title-sub-top {
        font-weight: 600;
    }

    & .list-item-title {
        font-size: 1.25rem;
        line-height: 1.4;
        font-weight: 600;
        margin-bottom: 8px;
    }

    & .list-item--title-sub-bottom {
        font-size: 0.875rem;
        font-weight: 400;
        line-height: 1.4;
        color: var(--color-gray);
    }
}

.list-item-date {
    font-weight: 600;
    line-height: 1.4;
}

.list-item-date.museum-extension-item-date {
    background-color: var(--color-lightblue);
    padding: 1.5rem;
    margin-bottom: 1rem;
}

.list-item-date.museum-extension-item-date-history {
    padding: 0 1rem;
    margin-bottom: 4px;
    font-size: 0.875rem;
    height: 5rem;
    display: flex;
    align-items: center;
}

.image-box-quarter~.list-item-content {
    & .list-item-title {
        font-size: 1rem;

    }
}

.image-box-quarter~.list-item-date {
    font-size: 0.875rem;
}

/* space */

.m-xs {
    margin-bottom: 0.5rem !important;
}

.m-sm {
    margin-bottom: 1rem !important;
}

.m-md {
    margin-bottom: 2rem !important;
}

.m-lg {
    margin-bottom: 2.5rem !important;
}

.m-xl {
    margin-bottom: 5rem !important;
}

.m-none {
    margin-bottom: 0 !important;
}

.mt-none {
    margin-top: 0 !important;
}

.m-section {
    margin-bottom: 100px !important;
}

.pb-sm {
    padding-bottom: 1rem !important;
}

.pb-md {
    padding-bottom: 2rem !important;
}

.pb-lg {
    padding-bottom: 2.5rem !important;
}

.pb-xl {
    padding-bottom: 5rem !important;
}

.pb-none {
    padding-bottom: 0 !important;
}

.p-xs {
    padding: 0.5rem !important;
}

.p-sm {
    padding: 1rem !important;
}

.p-md {
    padding: 2rem !important;
}

.p-lg {
    padding: 2.5rem !important;
}

.p-none {
    padding: 0 !important;
}


/* outline-box */
.outline-box {
    margin-top: 40px;
    padding: 40px;
    display: flex;
    gap: 24px;
    border: 1px solid var(--color-lightgray);

    & .outline-box-inner {

        &:last-child {
            flex: 1 1 auto;
        }

        &:first-child {
            border-right: 1px solid var(--color-lightgray);
            padding-right: 24px;
        }

        & .outline-title {
            font-size: 1.125rem;
            font-weight: 600;
            line-height: 1.6;
            letter-spacing: 0.1em;
        }

        & .outline-place {
            font-weight: 600;
        }

        & .outline-time {
            & span {
                font-weight: 600;
            }
        }

        &.outline-box-inner-tel {
            align-self: center;

            & .link-tel-inner {
                border: 1px solid var(--color-lightgray);
                display: inline-block;
                padding-block: 4px;
                padding-inline: 24px;

                & .link-tel {
                    color: var(--color-blue);
                    text-decoration: none;

                    &::before {
                        display: inline-block;
                        content: "";
                        position: relative;
                        width: 20px;
                        height: 20px;
                        background-image: url("../../../assets/images/icon-tel.svg");
                        background-size: contain;
                        background-repeat: no-repeat;
                        background-position: center;
                    }
                }
            }
        }
    }
}

/* pagination */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.image-container>.pagination {
    margin-top: 4rem;
    flex-wrap: wrap;

    &>* {
        flex-shrink: 0;
    }
}

.pagination-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--color-lightgray);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-text);
    text-decoration: none;
    transition: all 0.3s ease;
}

.pagination-item-active {
    background-color: var(--color-blue);
    color: var(--color-white);
}

.pagination-ellipsis {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--color-text);
    font-size: 1.125rem;
}


/* header */

.header--inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: 1rem;

    @media (max-width: 767.98px) {
        padding-block: 0;
        height: 72px;
    }
}

.header--logo {
    width: 100%;
    max-width: 210px;
    padding-right: 1rem;

    @media (max-width: 767.98px) {
        max-width: 240px;
    }
}

.header--inner--column--item:has(.header--logo.en) {
    width: 100%;
}

.header--inner--column:has(.header--logo.en) {
    flex: 1;
}

.header--logo.en {
    max-width: 520px;
    line-height: 0;

    @media (max-width: 767.98px) {
        max-width: 520px;
    }
}

.header--inner--column:last-child {
    gap: 8px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;

    @media (max-width: 1047.98px) {
        display: none;
    }
}

.header--inner--column--item {
    display: flex;
    align-items: center;
    column-gap: 2rem;
    row-gap: 1rem;
}

.header--inner--column--item--list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.list--column-top {
    gap: 24px;
    font-size: 0.875rem;
}

.list--item {
    position: relative;

    &>a>img {
        height: 1rem;
        width: auto;
        vertical-align: middle;
        margin-right: 4px;
    }

    &.item-space {
        border-right: 1px solid var(--color-gray);
    }
}

.list--column-bottom {
    column-gap: 2rem;
    font-size: clamp(1rem, 1.25vw, 1.25rem);
    justify-content: space-between;

    &>.list--item {
        &>a>.material-symbols-outlined {
            font-size: 1.25rem;
            vertical-align: middle;
            margin-left: 4px;
            transition: transform 0.3s ease;
        }
    }
}

.list--column-bottom.en {
    font-size: 1.25rem;
    white-space: nowrap;
    font-weight: 500;
    justify-content: flex-end;
    column-gap: 4rem;
}

.navigation--header {
    position: relative;
    z-index: 100;
    background-color: var(--color-white);
}


/* PC表示用：スクロール追従ヘッダー */
.header-sticky {
    /* SPでは非表示 */
    display: none;
}

@media (min-width: 1048px) {
    .header-sticky {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 99;
        background-color: var(--color-white);
        border-bottom: 1px solid var(--color-lightgray);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        transform: translateY(-100%);
        transition: transform 0.3s ease;
    }

    .header-sticky.is-visible {
        transform: translateY(0);
    }

    .header-sticky--inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 72px;
        max-width: calc(1306px + 2rem);
        margin-inline: auto;
        padding-inline: 1rem;
    }

    .header-sticky--column {
        display: flex;
        align-items: center;
    }

    .header-sticky--logo .header--logo {
        max-width: 240px;
    }

    .header-sticky--logo.en .header--logo {
        max-width: 400px;
    }

    .header-sticky--logo .header--logo img {
        max-height: 48px;
        width: auto;
        object-fit: contain;
    }

    .header-sticky--logo.en {
        max-width: 520px;
    }

    .header-sticky--logo.en .header--logo {
        line-height: 0;
    }

    .header-sticky--logo.en .header--logo a {
        display: inline-block;
        line-height: 0;
    }

    .header-sticky--menu {
        flex: 1;
        justify-content: flex-end;

        & .list--column-bottom {
            justify-content: flex-end;
        }
    }
}

/* header-hamburger */
.header-hamburger {
    display: none;
}

@media (max-width: 1047.98px) {
    .header-hamburger {
        display: block;
    }
}

/* ハンバーガー：SPのみ表示。アイコンはspanで描画しopen時に変形 */
.header-hamburger {
    width: 48px;
    height: 48px;
}

@media (min-width: 1048px) {
    .header-hamburger {
        display: none;
    }
}

.header-hamburger button {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

/* 3本ライン */
.header-hamburger button>span {
    display: block;
    position: absolute;
    left: 11.5px;
    top: 22px;
    width: 32px;
    height: 2px;
    background: var(--color-blue);
}

/* 上・中・下のバーに変形トランジションを付与 */
.header-hamburger button>span:nth-child(1) {
    transform: translateY(-10px);
    transition: transform 350ms cubic-bezier(.215, .61, .355, 1);
}

.header-hamburger button>span:nth-child(2) {
    transition: opacity 350ms cubic-bezier(.215, .61, .355, 1);
}

.header-hamburger button>span:nth-child(3) {
    transform: translateY(10px);
    transition: transform 350ms cubic-bezier(.215, .61, .355, 1);
}

/* 開いた状態（×アイコン化） */
.header-hamburger button.is-open>span:nth-child(1) {
    transform: rotate(45deg) translateY(0px);
}

.header-hamburger button.is-open>span:nth-child(2) {
    opacity: 0;
}

.header-hamburger button.is-open>span:nth-child(3) {
    transform: rotate(-45deg) translateY(0px);
}

/* mega-menu */
/* ------------------------------------- */
/* ポップアップメニュー用のカスタムCSS (画面中央配置) */
/* ------------------------------------- */
.a-trigger {
    display: flex;
    align-items: center;
}

.a-trigger.is-open {
    color: var(--color-blue);

    & .material-symbols-outlined {
        transform: rotate(45deg);
    }
}

.mega--menu {
    /* 画面中央に固定配置 */
    position: fixed;
    top: 200px;
    left: 50%;

    /* 初期状態: 非表示 */
    opacity: 0;
    pointer-events: none;
    /* 中央配置のためのオフセットと、非表示時の少し上への移動を兼ねる */
    transform: translateX(-50%);

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

    /* スタイリング */
    background-color: #fff;
    /* bg-white */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    /* shadow-2xl */
    border-radius: 0.75rem;
    /* rounded-xl */
    border: 1px solid #e5e7eb;
    /* border border-gray-200 */

    /* 幅を固定 */
    width: 768px;
    max-width: 90vw;
    /* モバイル対応 */

    z-index: 55;
    /* バックドロップ(40)よりも高く */
    padding: 0;
}

/* is-openクラスが付与されたらメニューを表示するCSS */
.mega--menu.is-open {
    opacity: 1;
    pointer-events: auto;
    /* クリック可能にする */
    /* 中央に配置 */
    transform: translateX(-50%);
}

.mega--menu--inner {
    padding: 40px;
    /* p-6 */
}

.mega--menu--header {
    display: flex;
    /* flex */
    justify-content: space-between;
    /* justify-between */
    align-items: center;
    /* items-center */
    padding-bottom: 12px;
    /* pb-3 */
    border-bottom: 1px solid var(--color-blue);
    /* border-b border-indigo-100 */
    margin-bottom: 32px;
    /* mb-4 */
    letter-spacing: 0.05em;
}

.mega--menu--inner--column--title {
    font-size: 1.125rem;
    /* text-2xl */
    font-weight: 600;
    /* font-extrabold */
    color: var(--color-blue);
    /* text-indigo-800 */
}

/* ポップアップ内の閉じるボタン */
#close-button {
    color: #6b7280;
    /* text-gray-500 */
    transition: color 0.15s ease;
    /* transition */
    padding: 4px;
    /* 見た目の調整 */
    border: none;
    background: none;
    cursor: pointer;

    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.875rem;

    & .material-symbols-outlined {
        font-size: 0.875rem;
    }
}

#close-button:hover {
    color: #1f2937;
    /* hover:text-gray-900 */
}

/* ------------------------------------- */
/* 背景オーバーレイ（backdrop）用のCSS */
/* ------------------------------------- */
.backdrop {
    position: fixed;
    /* 画面全体を覆う */
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.4);
    /* 半透明の黒 */
    z-index: 40;
    /* メガメニュー (z-index: 55) より下 */

    /* 初期状態: 非表示 */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.backdrop.is-open {
    /* 表示状態 */
    opacity: 1;
    pointer-events: auto;
}

/* hamburger-menu */
/* ------------------------------------- */
/* ハンバーガーメニュー用のカスタムCSS (SP表示時のみ) */
/* ------------------------------------- */


/* hamburger-menu-container */
.hamburger-menu-container {
    display: none;
}

@media (max-width: 1047.98px) {


    .hamburger-menu-container.is-open {
        display: block;
        opacity: 1;
        visibility: visible;
    }

    .navigation--header {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 100;
        width: 100%;
        background-color: var(--color-white);
    }

    .hamburger-menu-container {
        position: fixed;
        top: 72px;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 100;
        display: block;
        width: 100%;
        height: calc(100vh - 72px);
        overflow: auto;
        padding: 40px 20px 140px;
        background-color: var(--color-lightblue);
        border-bottom: 1px solid var(--color-lightgray);
        /* アニメーション用の初期状態 - フェードアウト */
        opacity: 0;
        visibility: hidden;
        /* スムーズなフェードイン・フェードアウトアニメーション */
        transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
    }

    .hamburger-menu-inner {
        flex-grow: 1;
    }

    /* 開館情報 */
    .opening-date {
        display: flex;
        gap: 24px;

        & .opening-date-inner {
            flex-shrink: 0;

            &:last-child {
                display: flex;
                flex-direction: column;
                justify-content: center;
                flex-grow: 1;
            }
        }

        & .opening-date-text {
            position: relative;
            width: 140px;
            height: 140px;
            font-size: 1.875rem;
            font-weight: 600;
            color: var(--color-blue);
            background-color: var(--color-white);
        }

        & .opening-date-text-month {
            position: absolute;
            display: block;
            width: 40px;
            height: 32px;
            text-align: center;
            line-height: 24px;
            top: 34px;
            left: 30px;
        }

        & .opening-date-text-day {
            position: absolute;
            display: block;
            width: 40px;
            height: 32px;
            text-align: center;
            line-height: 24px;
            top: 76px;
            left: 70px;
        }

        & .opening-date-text-line {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translateY(-50%) translateX(-50%) rotate(135deg);
            display: block;
            width: 80%;
            height: 2px;
            background-color: var(--color-blue);
        }

        & .opening-date-place {
            display: flex;
            flex-direction: column;
            line-height: 1.4;
            gap: 8px;
            padding-bottom: 12px;

            &:last-child {
                border-top: 1px solid var(--color-lightgray);
                padding-top: 12px;
                padding-bottom: 0;
            }

        }

        & .opening-date-place-text {
            font-size: 1.25rem;
            font-weight: 600;
        }
    }

    .hamburger-menu-inner--column {
        margin-top: 40px;
    }

    .sp-details-submenu {
        border-top: 1px solid var(--color-lightgray);

        &::details-content {
            transition:
                height 0.3s,
                opacity 0.3s,
                content-visibility 0.3s allow-discrete;
            opacity: 0;
            height: 0;
            overflow: clip;
        }

        &[open]::details-content {
            opacity: 1;
        }


        &:last-child {
            border-bottom: 1px solid var(--color-lightgray);
        }

        & summary {
            position: relative;
            width: 100%;
            padding-inline: 1rem;
            padding-block: 24px;
            list-style: none;
            font-size: 1.125rem;
            font-weight: 600;
            color: var(--color-text);
            transition: color 0.3s ease;

            &::after {
                font-family: 'Material Symbols Outlined';
                content: 'add';
                position: absolute;
                top: 50%;
                right: 0;
                transform: translateY(-50%);
                font-size: 2rem;
                font-weight: 400;
                transition: transform 0.3s ease;
            }
        }

        &[open] {
            & summary {
                color: var(--color-blue);

                &::after {
                    transform: translateY(-50%) rotate(45deg);
                }
            }
        }

        & .submenu-subbox-inner {
            display: flex;
            flex-direction: column;
            gap: 16px;
            padding-left: 12px;
            padding-bottom: 24px;

            & .link-submenu-item {
                position: relative;
                border: 1px solid var(--color-lightgray);
                background-color: var(--color-white);
                padding: 16px 24px;
                border-radius: var(--border-radius-sm);
                color: var(--color-text);
                text-decoration: none;
                transition: all 0.3s ease;

                &.sub-link {
                    padding-left: 36px;
                    padding-top: 0;
                    padding-bottom: 0;
                    border: none;
                    background-color: transparent;
                    color: var(--color-text);
                }

                &::after {
                    display: block;
                    content: '';
                    position: absolute;
                    top: 50%;
                    right: 24px;
                    width: 10px;
                    height: 10px;
                    border-left: 2px solid var(--color-blue);
                    border-top: 2px solid var(--color-blue);
                    transform: translateY(-50%) rotate(135deg);
                    transition: transform 0.3s ease;
                }
            }
        }
    }


    .lang-select-box {
        display: flex;
        justify-content: center;
        gap: 16px;
        margin-top: 32px;
        padding-bottom: 32px;
        border-bottom: 1px solid var(--color-lightgray);


        &>* {
            flex: 1;
            text-align: center;
        }

        & .lang-select-box-title {
            text-align: center;
            font-weight: 600;
            color: var(--color-text);
            width: 50%;
            text-align: center;

            &>img {
                height: 1rem;
                width: auto;
                vertical-align: middle;
                margin-right: 4px;
            }
        }

        & .lang-select {
            display: flex;
            justify-content: center;
            width: 50%;

            &>a {
                text-align: center;
                width: 50%;

                &:first-child {
                    border-right: 1px solid var(--color-lightgray);
                }

                &.gt-current-lang {
                    color: var(--color-blue);
                }
            }
        }
    }

    .submenu-box-ticket {
        display: flex;
        margin-top: 32px;

        & a {
            text-align: center;
            width: 50%;
            color: var(--color-blue);

            &:first-child {
                border-right: 1px solid var(--color-lightgray);
            }
        }

        &>a>img {
            height: 1rem;
            width: auto;
            vertical-align: middle;
            margin-right: 4px;
        }
    }

    .submenu-box-sp {
        & .submenu-box-sp-inner {
            column-gap: 40px;
            row-gap: 16px;
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            padding-left: 24px;
        }

        & a {
            padding-left: 1em;
            text-indent: -0.9em;
            line-height: 1.2;

            &>span {
                vertical-align: middle;
                margin-right: 4px;
                color: var(--color-blue);
            }
        }
    }

    .sns-links {
        & .sns-links-title {
            text-align: center;
            /* font-size: 0.875rem; */
            font-weight: 600;
            color: var(--color-text);
        }

        & .sns-links-box {
            margin-top: 32px;
            margin-bottom: 80px;
            justify-content: center;
            grid-template-columns: repeat(4, 36px);
            gap: 24px;

            &>a {
                display: block;
                width: 36px;
                height: 36px;

                &>img {
                    width: 100%;
                    height: 100%;
                    object-fit: contain;
                }
            }
        }
    }
}

@media (max-width: 767.98px) {
    .navigation--header {
        height: 72px;
    }
}

@supports (interpolate-size: allow-keywords) {
    :root {
        interpolate-size: allow-keywords;
        /* height:0（数値型） → auto（文字型） のアニメーションを可能にするための指定 */
    }

    .sp-details-submenu[open]::details-content {
        height: auto;
    }
}

/* height:0→autoへのアニメーションが対応していない場合は、固定値にアニメーションさせる */
@supports not (interpolate-size: allow-keywords) {
    .sp-details-submenu[open]::details-content {
        height: auto;
        overflow-y: scroll;
    }
}

/* scroll-hint */
.scroll-hint-icon {
    top: 10px;
}

/* ------------------------------------- */
/* コンテンツエリアのスタイリング */
/* ------------------------------------- */

.submenu-box {
    &.d-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;

        & .submenu-box-inner {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        & .link-item-row {
            grid-column: span 2;
        }

        & a.link-item {
            border: 1px solid var(--color-lightgray);
            padding: 16px 24px;
            border-radius: var(--border-radius-sm);
            color: var(--color-text);
            position: relative;
            height: fit-content;

            &::after {
                content: '';
                position: absolute;
                top: 50%;
                right: 24px;
                border-left: 2px solid var(--color-blue);
                border-top: 2px solid var(--color-blue);
                width: 10px;
                height: 10px;
                transform: translateY(-50%) rotate(135deg);
            }
        }

    }

    &.submenu-box-row {
        margin-top: 20px;
        grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    }
}

.search-form {
    position: relative;
    background-color: var(--color-white);

    & input {
        width: 100%;
        border: 1px solid var(--color-lightgray);
        padding: 16px;
    }

    & button {
        position: absolute;
        top: 0;
        right: 16px;
        width: 24px;
        height: 100%;
        border: none;
        background: none;
        cursor: pointer;
    }
}

.details-submenu {
    border: 1px solid var(--color-lightgray);
    padding: 16px 24px;
    border-radius: var(--border-radius-sm);

    &>li>a {
        position: relative;
        display: block;

        &::after {
            content: '';
            position: absolute;
            top: 50%;
            right: -2px;
            border-left: 2px solid var(--color-blue);
            border-top: 2px solid var(--color-blue);
            width: 10px;
            height: 10px;
            transform: translateY(-50%) rotate(-135deg);
            transition: transform 0.3s ease;
        }
    }

    &::details-content {
        transition:
            height 0.3s,
            opacity 0.3s,
            content-visibility 0.3s allow-discrete;
        opacity: 0;
        height: 0;
        overflow: clip;
    }

    &[open]::details-content {
        opacity: 1;
    }

    & summary {
        position: relative;
        list-style: none;

        &::after {
            content: '';
            position: absolute;
            top: 50%;
            right: 0;
            border-left: 2px solid var(--color-blue);
            border-top: 2px solid var(--color-blue);
            width: 10px;
            height: 10px;
            transform: translateY(-50%) rotate(135deg);
            transition: transform 0.3s ease;
        }

        & a.link-item {
            border: none;
            padding: 0;

            &::after {
                display: none;
            }
        }
    }

    &[open] {
        & summary {
            &::after {
                transform: translateY(-50%) rotate(225deg);
            }
        }
    }

    & .submenu-subbox-inner {
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding-top: 18px;
        padding-left: 12px;
        font-size: 0.825rem;

        & ul li {
            margin-bottom: 15px;

            &:last-child {
                margin-bottom: 0;
            }
        }

        & .link-submenu-item {
            position: relative;
            display: block;

            &::after {
                content: '';
                position: absolute;
                top: 50%;
                right: 0;
                border-left: 2px solid var(--color-blue);
                border-top: 2px solid var(--color-blue);
                width: 8px;
                height: 8px;
                transform: translateY(-50%) rotate(135deg);
                transition: transform 0.3s ease;
            }
        }
    }
}


@supports (interpolate-size: allow-keywords) {
    :root {
        interpolate-size: allow-keywords;
        /* height:0（数値型） → auto（文字型） のアニメーションを可能にするための指定 */
    }

    .details-submenu[open]::details-content {
        height: auto;
    }
}

/* height:0→autoへのアニメーションが対応していない場合は、固定値にアニメーションさせる */
@supports not (interpolate-size: allow-keywords) {
    .details-submenu[open]::details-content {
        height: 150px;
        overflow-y: scroll;
    }
}

/* table date */

a:has(.table--date) {
    flex-shrink: 0;
}

.table--date {
    border-collapse: collapse;

    td {
        border: 1px solid var(--color-blue);
        padding: 0 10px;
    }

    td.border-right-none {
        border-right: none;
    }

    td.border-left-none {
        border-left: none;
    }

    .date--status {
        padding-right: 8px;
    }
}

.date--status {

    &.open {
        color: var(--color-blue);
    }

    &.close {
        color: var(--color-gray);
    }
}


.table--date-cell {
    text-align: center;
    vertical-align: middle;

    & .date--number {
        display: inline-block;
        font-variant-numeric: diagonal-fractions;
        line-height: 1;
        padding: 8px 16px;
    }
}

.table--item {
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: space-between;

    &>p:first-child {
        text-align: center;
    }
}

/* select-language */
/* language search */
.select--language {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;

    &::before {
        content: url("../images/icon-language.svg");
        display: inline-block;
        width: 20px;
        height: 20px;
    }
}

.select--language select {
    width: 100%;
    border: 1px solid var(--color-orange);
    background-color: var(--color-white);
    border-radius: var(--border-radius);
    padding-left: 32px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;

    &:focus {
        outline: none;
    }
}

/* headding */
.main--headding-title {
    background-color: var(--color-lightblue);
    margin-bottom: 0;

    &>h1 {
        font-size: 2rem;
        font-weight: 700;
        max-width: calc(1200px + 2rem);
        margin-inline: auto;
        padding-inline: 1rem;
        padding-block: 80px;
    }
}



.sub-hedding-box {
    padding: 40px;
    background-color: var(--color-lightblue);
    display: flex;
    gap: 24px;

    @media (max-width: 767.98px) {
        flex-direction: column;
        gap: 1rem;
    }

    & .sub-hedding-box-inner {

        &:last-child {
            flex: 1 1 auto;
        }

        & .sub-hedding-date {
            font-size: 1.125rem;
            border-bottom: 1px solid var(--color-lightgray2);
            padding-bottom: 12px;
        }

        & .sub-hedding-title {
            margin-top: 16px;

            & h2 {
                border: none;
                margin-bottom: 0;
                padding-bottom: 0;
            }

            & p {
                font-size: 1rem;
            }
        }
    }
}

.content-box {
    margin-top: 40px;
    display: flex;
    gap: 40px;

    @media (max-width: 767.98px) {
        flex-direction: column;
        align-items: center;
    }

    & .content-box-item {

        &.exhibition-view-img {
            width: min(480px, 40%);

            @media (max-width: 767.98px) {
                width: min(360px, 100%);
            }

            & figure {
                width: 100%;
                height: 100%;

                & .image-wrapper {
                    width: 100%;
                    height: auto;
                    aspect-ratio: 1/1;
                    background-color: var(--color-bg-image);
                }

                & img {
                    width: 100%;
                    height: 100%;
                    object-fit: contain;
                }

                & figcaption {
                    margin-top: 4px;
                    line-height: 1.4;
                }
            }
        }

        &.exhibition-view-content {
            flex: 1;
        }

        & h3 {
            border: none;
            padding-left: 0;
            margin-bottom: 1rem;
        }

        & .content-box-block {
            margin-bottom: 2.5rem;

            &:last-child {
                margin-bottom: 0;
            }
        }

        & .content-box-text {
            font-size: 1rem;
        }

        & .content-box-item-text {
            margin-bottom: 20px;

            &:last-child {
                margin-bottom: 0;
            }
        }

    }
}

.content-box-item.tools-img {
    flex: 1 0 40%;

    @media (max-width: 767.98px) {
        width: 100%;
        flex: 1;
        order: -1;
    }
}

.content-box--no-image .content-box-item:first-child {
    width: 100%;
    aspect-ratio: unset;
    background-color: unset;
}

.dl-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    &>dt {
        font-weight: 600;
        width: 100px;
        border-bottom: 1px dashed var(--color-lightgray);
        padding-block: 20px;
    }

    &>dd {
        margin-left: 0;
        width: calc(100% - 100px - 20px);
        border-bottom: 1px dashed var(--color-lightgray);
        padding-block: 20px;
    }
}

.dl-project {

    &>dt {
        font-weight: 600;
        padding-left: 1em;
        text-indent: -1em;

        &::before {
            content: '';
            display: inline-block;
            width: 8px;
            height: 8px;
            background-color: var(--color-black);
            border-radius: 50%;
            margin-right: 8px;
        }
    }

    &>dd {
        font-size: 0.875rem;
        padding-left: 1.2em;
        margin-bottom: 1.5rem;

        &:last-child {
            margin-bottom: 0;
        }
    }
}

/* pankuzu */
.pankuzu--list {
    border-bottom: 1px solid var(--color-lightgray);

    @media (max-width: 767.98px) {
        font-size: 0.875rem;
        letter-spacing: 0;
        word-break: keep-all;
    }

    @media (max-width: 767.98px) {
        margin-bottom: 48px;
    }

    & .pankuzu--list--inner {
        padding-block: 8px;
        display: flex;
        align-items: center;
        gap: 4px;
        line-height: 1.4;

        &>.pankuzu--item {
            color: var(--color-blue);
            display: contents;

            &::after {
                font-family: 'Material Symbols Outlined';
                content: 'chevron_right';
                font-size: 1.5rem;
                white-space: nowrap;
                flex-shrink: 0;
                color: var(--color-gray-pankuzu);
                position: relative;
                top: 1px;
            }

            &:last-child {
                &::after {
                    display: none;
                }
            }

            &>a {
                display: flex;
                align-items: center;

                &:first-child {
                    position: relative;
                    top: -1px;
                }
            }

            &.current {
                color: var(--color-gray-pankuzu);
            }
        }
    }
}

.bg-gradient-blue {
    margin-bottom: 0;

    @media (max-width: 767.98px) {
        padding-inline: 1rem;
    }

    & .btn {
        width: 100%;
        font-size: 1.125rem;
        line-height: 1.2;
    }

    & .d-flex {
        gap: 40px;
        flex-wrap: wrap;

        &>* {
            flex-shrink: 0;
        }
    }

    &.bg-page-top .d-grid {
        grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
        gap: 40px;

        @media (max-width: 767.98px) {
            grid-template-columns: 100%;
            /* gap: 16px; */
        }
    }
}

/* splide */
.splide__arrow {
    height: 116px;
    border-radius: 0;
    background: #222222;
}

.splide__arrow svg {
    fill: var(--color-white);
}

.splide__arrow--next {
    right: 0;
}

.splide__arrow--prev {
    left: 0;
}

#related-carousel .splide__track {
    max-width: calc(1200px + 4rem);
    margin-inline: auto;
    padding-inline: 1rem !important;
}

/* footer */
footer {
    background-color: var(--color-darkgray);
    color: var(--color-white);

    & .footer--inner {
        max-width: 1306px;
        margin-inline: auto;
        padding-inline: 30px;
        padding-top: 100px;
        padding-bottom: 60px;

        @media (max-width: 767.98px) {
            padding-top: 60px;
            padding-bottom: 40px;
        }
    }

    & .footer--nav {
        @media (max-width: 767.98px) {
            display: none;
        }

        & .footer--nav-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            row-gap: 40px;

            & .footer--line-indent {
                display: inline-block;
                margin-left: 1em;
            }

            & .footer--nav-item {
                border-left: 1px solid var(--color-gray);
                padding-left: 40px;
                margin-bottom: 16px;
                line-height: 1.5;

                &:before {
                    content: '';
                    display: inline-block;
                    width: 16px;
                    height: 16px;
                    background-color: var(--color-white);
                    border-radius: 50%;
                    position: relative;
                    top: 2px;
                }

                &:has(.link-main-item) {
                    &::before {
                        display: none;
                    }
                }

                .link-main-item {
                    &:before {
                        content: '';
                        display: inline-block;
                        width: 16px;
                        height: 16px;
                        background-color: var(--color-white);
                        border-radius: 50%;
                        position: relative;
                        top: 2px;
                    }

                }

                &:last-child {
                    border-right: 1px solid var(--color-gray);
                }

                &:br {
                    padding-left: 20px;
                }

                &>a {
                    display: flex;
                    align-items: baseline;
                    gap: 8px;
                }
            }

            & .footer--nav-sublist {
                padding-left: 24px;
                margin-top: 4px;

                & .footer--nav-subitem {
                    margin-bottom: 8px;

                    &:last-of-type {
                        margin-bottom: 0;
                    }

                    &>a {
                        font-weight: 300;
                        display: flex;
                        align-items: baseline;
                        gap: 12px;
                        line-height: 1.2;

                        &:before {
                            content: '';
                            display: inline-block;
                            width: 8px;
                            height: 8px;
                            border-top: 2px solid var(--color-white);
                            border-right: 2px solid var(--color-white);
                            transform: rotate(45deg);
                        }
                    }
                }
            }
        }
    }

    & .footer--content {
        margin-top: 70px;

        padding-bottom: 70px;
        border-bottom: 1px solid var(--color-gray);

        &>.d-flex {
            gap: 60px;
            align-items: flex-start;
            flex-wrap: wrap;

            @media (max-width: 767.98px) {
                flex-direction: column;
                align-items: center;
                row-gap: 40px;
            }
        }

        & .footer--content-logo {
            width: 100%;
            max-width: 210px;

            &.en {
                max-width: 340px;
                filter: brightness(0) invert(1);
            }
        }



        & .footer--content-address {
            flex: 1 0 auto;

            @media (max-width: 767.98px) {
                text-align: center;
            }

            & .tel {
                @media (max-width: 767.98px) {
                    display: block;
                    margin-top: 24px;
                }
            }
        }

        & .footer--content-sns {
            @media (max-width: 767.98px) {
                display: none;
            }

            &>p {
                font-size: 0.875rem;
                letter-spacing: 0.05em;
                margin-bottom: 8px;
            }
        }

        & .footer--content-sns-item {
            gap: 32px;

            &>a>img {
                width: 24px;
                height: 24px;
            }
        }
    }

    & .footer--bottom {
        margin-top: 40px;

        & .footer--bottom-inner {
            & .footer--bottom-inner--inner {

                &.d-flex {
                    align-items: end;
                    flex-wrap: wrap;

                    @media (max-width: 767.98px) {
                        flex-direction: column;
                        align-items: center;
                        row-gap: 100px;
                    }
                }

                & .footer--bottom-box {
                    flex: 1;

                    @media (max-width: 767.98px) {
                        width: 100%;
                    }

                    & .footer--bottom-list {
                        display: flex;
                        flex-wrap: wrap;
                        column-gap: 24px;
                        row-gap: 8px;
                        font-weight: 300;

                        @media (max-width: 767.98px) {
                            flex-direction: column;
                            align-self: start;
                        }

                        &>.footer--bottom-item a::before {
                            content: '';
                            display: inline-block;
                            width: 10px;
                            height: 10px;
                            margin-right: 12px;
                            border-top: 2px solid var(--color-white);
                            border-right: 2px solid var(--color-white);
                            transform: rotate(45deg);
                        }

                        &:last-of-type {
                            margin-top: 8px;
                            font-size: 0.875rem;
                            column-gap: 36px;
                            row-gap: 4px;

                            &>.footer--bottom-item a::before {
                                width: 8px;
                                height: 8px;
                            }
                        }

                        &:last-of-type {
                            @media (max-width: 767.98px) {
                                display: none;
                            }
                        }
                    }

                }
            }
        }

        & .footer--bottom-copyright {
            & .copyright {
                font-size: 0.875rem;
                letter-spacing: 0.05em;
            }
        }
    }
}

/* goToTop */
.pagetop--wrapper {
    width: 42px;
    height: 42px;
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    background-color: var(--color-white);
    border: 1px solid var(--color-darkgray);

    @media (max-width: 767.98px) {
        bottom: 6rem;
    }

    & .toTop {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    & .toTop::before {
        content: '';
        position: relative;
        top: 2px;
        display: inline-block;
        width: 12px;
        height: 12px;
        border-top: 1px solid var(--color-gray);
        border-right: 1px solid var(--color-gray);
        transform: rotate(-45deg);

    }
}

/* CMS リッチテキストエディタから出力されるテーブル用 */
.container-md table,
.content-box-item table,
.exhibition table {
    width: 100%;
    border-collapse: collapse;
    margin: 1em 0;
}

.container-md table td,
.container-md table th,
.content-box-item table td,
.content-box-item table th,
.exhibition table td,
.exhibition table th {
    border: 1px solid var(--color-gray);
    padding: 8px 12px;
}

.container-md table th,
.content-box-item table th,
.exhibition table th {
    background-color: var(--color-lightblue);
}

/* =============================================
   カレンダー
============================================= */
:root {
    --border-color: #ddd;
    --text-main: #333;
    --text-muted: #888;
    --sun-color: #d93025;
    --sat-color: #1967d2;
    --today-bg: #fff9c4;
    --all-closed-bg: #f2f2f2;
    --f10-label-bg: #43a047;
    --f8-label-bg: #ef6c00;
}

.calendar-wrapper {
    margin: 0 auto;
}

/* ヘッダー */
.calendar-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    margin-bottom: 20px;
}

.month-title {
    font-size: 24px;
    font-weight: bold;
    min-width: 200px;
    text-align: center;
}

.nav-btn {
    background: none;
    cursor: pointer;
    border-radius: 50%;
    color: var(--color-blue);
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-btn .material-symbols-outlined {
    font-size: 42px;
}

/* カレンダー本体 */
.calendar-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.calendar-table th,
.calendar-table td {
    border: 1px solid var(--border-color);
    vertical-align: top;
    padding: 0;
}

.calendar-table th {
    padding: 10px 0;
    font-weight: normal;
    font-size: 14px;
    text-align: center;
    /* background-color: var(--color-lightblue); */
}

.calendar-table th.sun,
.calendar-table .date-num.sun {
    color: var(--sun-color);
}

.calendar-table th.sat,
.calendar-table .date-num.sat {
    color: var(--sat-color);
}

/* セル内容 */
.day-cell {
    min-height: 120px;
    position: relative;
    padding: 10px 8px;
    display: flex;
    gap: 10px;
}

.date-num {
    font-size: 1rem;
    line-height: 1.2;
    font-weight: bold;
    flex-shrink: 0;
}

/* 曜日テキスト (SP用、PCでは非表示) */
.day-text {
    display: none;
    font-weight: normal;
    margin-left: 4px;
    font-size: 0.9rem;
}

/* ステータスブロック */
.floor-inner {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.floor-status {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.floor-status .label {
    display: inline-block;
    align-self: flex-start;
    font-size: 0.875rem;
    padding: 2px;
    border-radius: 2px;
    line-height: 1.2;
    word-break: keep-all;
    letter-spacing: 0;
}

.time-text {
    font-size: 0.875rem;
    color: var(--text-main);
    line-height: 1.2;
    text-align: right;
}

.closed-text {
    color: #cc0000;
    font-weight: bold;
}

/* 特殊状態 */
.is-other-month {
    opacity: 0.3;
}

.is-today {
    background-color: var(--today-bg) !important;
}

.is-all-closed {
    background-color: var(--color-lightblue);
}

.is-all-closed .floor-inner {
    display: none;
}

/* 夜間開館日（20:00閉館） */
.is-night-opening {
    border: 2px solid #AFAFAF !important;
    /* border-left: 2px solid #AFAFAF !important;
    border-right: 2px solid #AFAFAF !important; */
}

.is-first-night-opening {
    border-top: 2px solid #AFAFAF !important;
}

.is-last-night-opening {
    border-bottom: 2px solid #AFAFAF !important;
}

/* フロア間の区切り線 */
.floor-divider {
    border: none;
    border-top: 1px dashed var(--border-color);
    margin: 0;
}

/* 凡例 */
.calendar-legend {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 20px;
    margin-bottom: 10px;
    font-size: 0.875rem;
}

.calendar-legend .legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.calendar-legend .legend-closed {
    display: inline-block;
    width: 42px;
    height: 16px;
    background-color: var(--color-lightblue);
    border: 1px solid var(--border-color);
}

.calendar-legend .legend-night {
    display: inline-block;
    width: 42px;
    height: 16px;
    background-color: #fff;
    border: 2px solid #AFAFAF;
}

/* --- カレンダー モバイル対応 (SP表示) --- */
@media (max-width: 767.98px) {

    .calendar-table,
    .calendar-table thead,
    .calendar-table tbody,
    .calendar-table tr,
    .calendar-table td {
        display: block;
        width: 100%;
    }

    .calendar-table thead {
        display: none;
        /* 曜日のヘッダー行を隠す */
    }

    .calendar-table td {
        border-bottom: none;
    }

    .calendar-table tr:last-child td:last-child {
        border-bottom: 1px solid var(--border-color);
    }

    /* 他の月の日付をSPでは非表示にする（リストが長くなりすぎるのを防ぐ） */
    .is-other-month {
        display: none;
    }

    .day-cell {
        min-height: auto;
        flex-direction: row;
        /* 日付と内容を横に並べる */
        align-items: center;
        gap: 15px;
        padding: 12px 10px;
    }

    .date-num {
        width: 70px;
        /* 日付エリアの幅を固定 */
        flex-shrink: 0;
        font-size: 1.1rem;
    }

    .day-text {
        display: inline;
        /* SPでは曜日を表示 */
    }

    .floor-inner {
        flex: 1;
        flex-direction: row;
        /* 10Fと8Fを横に並べる */
        gap: 10px;
        flex-wrap: wrap;
    }

    .floor-status {
        min-width: 120px;
    }

    .month-title {
        font-size: 18px;
    }
}

.btn-wrapper {
    .btn-pdf {
        display: inline-block;
        width: 100%;
        line-height: 64px;
        font-size: 1.125rem;
        font-weight: 700;
        text-align: center;
    }
}

.d-flex:has(.select-wrapper) {
    gap: 24px;
    margin-bottom: 3rem;
    flex-wrap: wrap;
}

.select-wrapper {
    width: 100%;
    max-width: 380px;
    position: relative;

    & label {
        font-weight: 700;
        margin-bottom: 8px;
    }

    &::after {
        content: '';
        position: absolute;
        top: calc(50% + 14px);
        right: 32px;
        width: 12px;
        height: 12px;
        border-top: 2px solid var(--color-black);
        border-right: 2px solid var(--color-black);
        transform: translateY(-50%) rotate(135deg);
    }

    & select {
        text-align-last: center;
        font-size: 1.125rem;
        font-weight: 700;
        width: 100%;
        height: 75px;
        border: 1px solid var(--color-black);
        border-radius: var(--border-radius);
        padding: 4px 16px;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
    }
}

/* =============================================
   コレクションページ
============================================= */
.collection--about {

    & .d-flex {
        justify-content: space-between;
        gap: 40px;

        @media (max-width: 767.98px) {
            flex-direction: column;
        }
    }

    & .image-box {
        width: 50%;
        overflow: visible;
        background-color: unset;

        @media (max-width: 767.98px) {
            width: 100%;
        }

        & img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        &.image-box-caption {
            figcaption {
                font-size: 0.875rem;
                /* font-weight: 600; */
                line-height: 1.4;
                text-align: right;
            }
        }

    }
}

.list-box {
    padding: 48px;
    border: 1px solid var(--color-lightgray);
    margin-bottom: 2.5rem;

    & .list-box-inner {
        & .list-box-item {
            font-weight: 600;
            line-height: 1.4;
            margin-bottom: 24px;

            &:last-child {
                margin-bottom: 0;
            }
        }
    }

}

.collection--intro {
    & .d-flex {
        gap: 40px;

        @media (max-width: 767.98px) {
            flex-direction: column;
        }
    }
}

.d-box.collection--item {
    width: 50%;
    border: 1px solid var(--color-lightgray);

    @media (max-width: 767.98px) {
        width: 100%;
    }

    & a {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    & .image-box {
        width: 50%;
        aspect-ratio: 1/1;
        background-color: var(--color-bg-image);
        overflow: hidden;
        margin-bottom: 0;

        & img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
    }

    & .box-content {
        width: 50%;
        padding: 24px;
        background-color: var(--color-white);

        & p {
            font-size: 1.125rem;
            font-weight: 600;
            line-height: 1.4;

            & .material-symbols-outlined {
                color: var(--color-blue);
                font-size: 1.75rem;
                line-height: 0;
                vertical-align: middle;
            }
        }
    }
}

.pankuzu--list.m-mb-0 {
    margin-bottom: 0;
}

.m-section {
    padding-block: 80px;
}

.collection--box {
    gap: 40px;
    padding-top: 72px;
    padding-bottom: 72px;
    border-bottom: 1px solid var(--color-lightgray);

    @media (max-width: 767.98px) {
        flex-direction: column;
    }

    &:first-of-type {
        padding-top: 36px;
    }

    &:last-child {
        padding-bottom: 0;
        border-bottom: none;
    }

    & .d-box {
        flex: 1;
    }

    & .d-box:has(.image-box) {
        width: 40%;

        @media (max-width: 767.98px) {
            width: 100%;
        }

        & .image-box {
            width: 100%;
            height: 100%;
            max-height: 348px;
            overflow: hidden;
            background-color: unset;

            @media (max-width: 767.98px) {
                max-height: 100%;
            }

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

            &+figcaption {
                font-size: 0.875rem;
                font-weight: 400;
                line-height: 1.4;
                color: var(--color-darkgray);
                text-align: center;
            }
        }
    }

    &.d-box:has(.collection-box-title) {
        width: 60%;

        @media (max-width: 767.98px) {
            width: 100%;
        }
    }

    .collection-box-title {
        font-size: 1.125rem;
        font-weight: 600;
        line-height: 1.6;
        letter-spacing: 0.1em;
        border-left: none;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid var(--color-gray);
        padding-bottom: 16px;
        font-feature-settings: "palt";

        @media (max-width: 767.98px) {
            flex-direction: column;
        }

        & .text-sm {
            font-size: 1rem;
            font-weight: 400;
            line-height: 1.4;
            letter-spacing: 0;
            color: var(--color-darkgray);
            font-feature-settings: "palt";

            &.text-red {
                color: var(--color-red);
            }
        }

        & .text-important {
            color: var(--color-red);
            font-size: 1rem;
            font-weight: normal;
            letter-spacing: normal;
        }

        & .period {
            font-size: 0.875rem;
            font-weight: 400;
            line-height: 1.4;
            letter-spacing: 0;
            color: var(--color-darkgray);
            align-self: end;
            font-feature-settings: "palt";
            flex-shrink: 0;
        }
    }
}

aside {
    margin-bottom: 100px;
}

.preview-label {
    position: fixed;
    top: 0;
    z-index: 9999;
    background-color: gold;
    right: 50px;
    top: 50px;
    width: 100px;
    justify-self: right;
    text-align: center;
    font-weight: 500
}

/* 8Fギャラリー */
.navigation-button {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 32px;

    & button,
    & a {
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
        margin: 0;

        & .material-symbols-outlined {
            font-size: 42px;
            color: var(--color-blue);
            vertical-align: middle;
        }
    }

    & .navigation-button-inner-text {
        font-size: 1.25rem;
        font-weight: 700;
        margin: 0 16px;
    }
}

.gallery-table {
    table-layout: fixed;
}

.gallery-date {
    white-space: nowrap;
}

/* ============================================
   about
   ============================================ */
.history {
    margin: 2rem 2.5rem;

    @media (max-width: 768px) {
        margin: 1rem 1rem;
        overflow-x: scroll;
    }

    &>table {
        width: 100%;
        border-collapse: collapse;
        line-height: 1.8rem;
        table-layout: fixed;

        @media (max-width: 768px) {
            font-size: .875rem;
            line-height: 1.25rem;
        }
    }

    & tr {
        border-bottom: 1px solid var(--color-lightgray);

        &:first-child {
            border-top: 1px solid var(--color-lightgray);
        }
    }

    & th {
        font-size: 1.1rem;
        font-weight: 600;

        & span {
            display: inline-block;
        }

        @media (max-width: 767px) {
            width: 30%;
        }
    }

    & th,
    td {
        padding: 1.4rem 1rem;
        vertical-align: text-top;

        @media (max-width: 768px) {
            font-size: .9rem;
            line-height: 1.25rem;
        }
    }
}

/* ============================================
   facilities
   ============================================ */
.access-container {
    margin: 2.5rem 0;
    padding: 2.2rem 2.5rem;
    background-color: var(--color-lightblue);
    overflow-x: auto;

    &>ol {
        display: flex;
        align-items: flex-start;
        width: 100% !important;
        padding-left: 3rem;

        @media (max-width: 1024px) {
            padding-left: 1.4rem;
        }

        @media (max-width: 500px) {
            display: unset;
            width: 100%;
            padding-left: 0;
        }

        &>li {
            display: inline-block;
            margin: 1rem 0;
            text-align: center;

            &>img {
                width: 192px;
                height: auto;
                transform: translateY(-5px);
            }

            @media (max-width: 500px) {
                width: 100% !important;
                margin: 0;
                font-size: 1rem;
            }
        }

        &>li.place {
            flex-shrink: 0;
            border: 1.6px solid var(--color-gray);
            border-radius: var(--border-radius-sm);
            background-color: var(--color-white);
            font-weight: 600;
            padding: 1rem 1.8rem;
            width: 10%;
            min-width: fit-content;
        }

        &>li.ylw {
            flex: 3;
            min-width: fit-content;
            padding: .3rem 1rem .1rem;
            vertical-align: top;
            font-size: .86rem;
            color: rgb(220, 190, 50);
            border-bottom: 3px solid rgb(220, 190, 50);

            @media (max-width: 1024px) {
                font-size: .6rem;
            }

            @media (max-width: 500px) {
                width: 50% !important;
                margin-left: 25%;
                border-bottom: none;
                border-left: 3px solid rgb(220, 190, 50);
                font-size: 0.875rem;
            }
        }

        &>li.dgr {
            flex: 1;
            min-width: fit-content;
            padding: .3rem 1rem .1rem;
            vertical-align: top;
            font-size: .86rem;
            color: rgb(129, 167, 130);
            border-bottom: 3px dotted rgb(129, 167, 130);

            @media (max-width: 1024px) {
                font-size: .6rem;
            }

            @media (max-width: 500px) {
                width: 50% !important;
                margin-left: 25%;
                border-bottom: none;
                border-left: 3px dotted rgb(129, 167, 130);
                font-size: 0.875rem;
            }
        }

        &>li.ppl {
            flex: 3;
            min-width: fit-content;
            padding: .3rem 1rem .1rem;
            vertical-align: top;
            font-size: .86rem;
            color: rgb(131, 107, 171);
            border-bottom: 3px solid rgb(131, 107, 171);

            @media (max-width: 1024px) {
                font-size: .6rem;
            }

            @media (max-width: 500px) {
                width: 50% !important;
                margin-left: 25%;
                border-bottom: none;
                border-left: 3px solid rgb(131, 107, 171);
                font-size: 0.875rem;
            }
        }

        &>li.blue {
            flex: 6;
            min-width: fit-content;
            padding: .3rem 1rem .1rem;
            vertical-align: top;
            font-size: .86rem;
            color: rgb(107, 179, 170);
            border-bottom: 3px solid rgb(107, 179, 170);

            @media (max-width: 1024px) {
                font-size: .6rem;

                @media (max-width: 500px) {
                    width: 50% !important;
                    margin-left: 25%;
                    border-bottom: none;
                    border-left: 3px solid rgb(107, 179, 170);
                    font-size: 0.875rem;
                }
            }
        }
    }
}

.exhibition {
    & .et-date {
        padding: .5rem 1rem;
        font-size: 1.1rem;
    }

    & h4 {
        margin-top: .6rem;
        margin-bottom: .3rem;
        font-size: 1.1rem;
    }

    & h2 {
        border: none;
        margin-bottom: 0;

        &>span {
            display: block;
            padding-top: .2rem;
            font-size: .9rem;
            color: var(--color-gray);
        }
    }

    & ol.proviso {
        margin: 2rem 0 2rem .8rem;
        font-size: .85rem;
        font-weight: 500;

        &>li {
            margin-top: .5rem;
            padding-left: .4rem;
            line-height: 1.4rem;
            list-style: "※";
            text-align: justify;
        }
    }

    .table-grid2 {
        display: grid;
        grid-template-rows: 1fr;

        @media (max-width: 767px) {
            grid-template-rows: none;
            grid-template-columns: 2fr 3fr;
        }

        & ul.table-grid-child {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;

            @media (max-width: 767px) {
                grid-template-columns: none;
                grid-template-rows: 1fr;
                font-size: .825rem;

                & .bg-lightblue {
                    font-weight: 550;
                }
            }
        }

        & li {
            border: 1px solid var(--color-lightgray);
            padding: 1.4rem;
            line-height: 1;
            text-align: center;

            &>span {
                display: inline-block;
            }
        }
    }
}

.admission {
    .table-grid {
        display: grid;
        grid-template-rows: 1fr;

        @media (max-width: 767px) {
            grid-template-rows: none;
            grid-template-columns: 1fr 1fr 1fr;
        }

        & ul.table-grid-child {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr;

            @media (max-width: 767px) {
                grid-template-columns: none;
                grid-template-rows: 1fr;
                font-size: .825rem;

                & .bg-lightblue {
                    font-weight: 550;
                }
            }
        }

        & li {
            border: 1px solid var(--color-lightgray);
            padding: 1.4rem;
            line-height: 1;
            text-align: center;

            &>span {
                display: inline-block;
            }
        }
    }
}

.table .col1 {
    text-align: left;
}

.table2 {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;

    @media (max-width: 767px) {
        font-size: .875rem;
    }

    & th,
    & td {
        border: 1px solid var(--color-lightgray);
        padding: 0.8rem 1rem;
        vertical-align: middle;
    }

    & th {
        background-color: var(--color-lightblue);
        text-align: center;
    }

    & td {
        text-align: center;
    }

    & .col1 {
        min-width: 280px;
        text-align: left;

        & span {
            display: inline-block;
        }
    }

    & .col2 {
        white-space: nowrap;
    }

    & .col3 {
        white-space: nowrap;
    }

    & .tdnw {
        white-space: nowrap;
    }

    & .tdh {
        text-align: left;
    }

    & .w-20 {
        width: 20%;
    }
}

/* ============================================
   guideline
   ============================================ */
.guideline {
    /* font-size: .875rem;
    line-height: 1.2rem; */
    text-align: justify;

    &>ol {
        list-style: "・";
        margin: 0 1.5rem;

        &>li {
            padding-left: .5rem;
            margin-bottom: 1rem;
        }
    }

    &.story {
        padding: 0 0.5rem;
    }

    & ul,
    h4 {
        margin-left: 1.2rem;

        & li {
            /* margin-top: .6rem; */
            letter-spacing: 0.025rem;
            font-weight: 500;
        }
    }
}

.privacy {
    padding-inline: 2rem;
    /* font-size: .875rem; */
    /* line-height: 1.2rem; */
    text-align: justify;

    & .story {
        padding: 0 2rem;
    }

    &>ul {
        list-style: decimal;
        margin-left: 1rem;

        &>li {
            margin-top: .6rem;
            padding-left: .2rem;
            letter-spacing: 0.025rem;
        }
    }

    &>ol {
        list-style: "・";
        margin-left: .5rem;

        &>li {
            padding-left: .4rem;
            margin-bottom: 1rem;
        }
    }

    & a {
        color: var(--color-blue);
    }
}

.faq {
    &>h2 {
        border: none;
        margin: 0;
    }
}

.exam {
    border: 1px solid var(--color-lightgray);
    margin: 1.5rem 0;

    & details {
        padding: 2rem;

        & summary::-webkit-details-marker {
            display: none;
        }

        & summary {
            display: flex;
            align-items: baseline;
            gap: .6rem;
            cursor: pointer;
            list-style: none;
            font-size: 1.25rem;
            font-weight: 600;

            & .icon {
                flex: 0 0 2rem;
                font-size: 1.5rem;
                color: var(--color-blue);
            }

            & .text {
                flex: 1 1 auto;
            }
        }

        & summary::after {
            content: '＋';
        }

        & .ans {
            display: flex;
            gap: .6rem;
            margin-top: 1.5rem;
            padding-top: 1.5rem;
            border-top: 1px solid var(--color-lightgray);
            max-height: 0;
            opacity: 0;
            overflow: hidden;

            & .icon {
                flex: 0 0 2rem;
                font-size: 1.5rem;
                font-weight: 600;
                color: var(--color-blue);
            }

            & .text {
                flex: 1 1 auto;
                margin-top: 10px;
            }
        }

        & ol {
            margin-left: .7rem;
            list-style: "・";

            & li {
                padding-left: .4rem;
            }
        }
    }

    & details[open] .ans {
        max-height: 500px;
        opacity: 1;
    }

    & details[open] summary::after {
        content: 'ー';
    }
}

/* ============================================
   pressroom
   ============================================ */
.news-list .news-list-inner .news-list-item>.news-list-item-link {
    padding: 20px 40px 20px 0;
}

/* ============================================
   publications
   ============================================ */
@media (max-width: 767.98px) {
    .l-pbc-img {
        /* height: 240px; */
        justify-self: center;
    }
}

.l-pbc-column {
    aspect-ratio: unset;

    &>a {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 2px solid var(--color-lightgray);
        padding-bottom: 4px;
        margin-bottom: 2rem;

        &>span {
            color: var(--color-blue);
        }
    }

    & h3 {
        all: unset;
        font-size: 1.25rem;
        font-weight: 600;
    }
}

@media (max-width: 767.98px) {
    .l-grid-golden:has(.l-pbc-column) {
        grid-template-columns: repeat(1, 1fr);
        gap: 0;
    }
    .l-pbc-img{
        margin-bottom: 1rem;
    }
    .l-pbc-column {
        display: contents;

        & a{
            order: -1;
        }
    }
}

.l-grid-5th {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 2.5rem;

    &>figure img {
        width: 100%;
        aspect-ratio: 5/7;
        border: 1px solid var(--color-lightgray);
    }
}

details.select-list {
    width: 100%;
    max-width: 380px;
    position: relative;

    @media (max-width: 767.98px) {
        width: 100%;
    }

    & ol {
        padding-inline: 1.5rem;
        height: 300px;
        overflow-y: auto;

        & li {
            text-align: center;
            border-bottom: 1px solid var(--color-lightgray);

            &>a {
                display: block;
                padding: 1rem 0;
            }
        }

        & li:last-child {
            border: none;
        }
    }
}

.bulletin-select>div {
    width: min(360px, 100%);
}


.select-list summary {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    list-style: none;
    text-align-last: center;
    font-size: 1.125rem;
    font-weight: 700;
    width: 100%;
    height: 75px;
    border: 1px solid var(--color-black);
    border-radius: var(--border-radius);
    padding: 4px 16px;
}

.select-list summary p {
    flex: 1;
    padding-left: 16px;
}

.select-list summary::-webkit-details-marker {
    display: none;
}

.select-list summary::after {
    content: '';
    display: inline-block;
    position: absolute;
    top: 50%;
    right: 32px;
    width: 12px;
    height: 12px;
    border-top: 2px solid var(--color-black);
    border-right: 2px solid var(--color-black);
    transform: translateY(-50%) rotate(135deg);
}

details.select-list[open] summary::after {
    transform: translateY(-50%) rotate(-45deg);
}

.bulletin {
    margin-bottom: 3rem;

    & h2 {
        border: none;
        margin: 0;
        font-size: 1.8rem;
    }

    & h3 {
        border-left: none;
        border-bottom: 1.5px solid var(--color-gray);
        padding: .4rem .8rem .8rem .8rem;
        font-size: 1.4rem;
        line-height: 1.7rem;
    }
}

.bulletin-list {
    margin-bottom: 3rem;

    h4 {
        border-bottom: 1px dotted var(--color-gray);
        padding: .8rem;
        font-size: 1rem;
    }

    & dl {
        gap: 0;
        margin-left: 1.2rem;
        margin-bottom: 1.4rem;
        font-size: .9rem;
        line-height: 1.2rem;

        & dt,
        dd {
            border-bottom: 1px dotted var(--color-lightgray);
            padding: .8rem;
            font-weight: 400;
        }

        @media (max-width: 767px) {
            & dt {
                padding-bottom: 0;
                font-weight: 540;
                border: none;
            }

            & dd {
                padding-top: 0;
            }
        }
    }

    & a {
        text-decoration: underline;
        text-underline-offset: .2rem;
        color: var(--color-blue);
    }

    & a.text-pdf::after {
        content: " 【PDF】";
        text-decoration: none;
    }
}

/* ============================================
   sitemap
   ============================================ */
.sitemaps {
    padding: 0 3rem;

    @media (max-width: 768px) {
        padding: 0;
    }

    &>dl {
        display: grid;
        grid-template-columns: 1fr 3fr;
        border-bottom: 1px solid var(--color-lightgray);
        padding: 2rem;

        &:first-child {
            border-top: 1px solid var(--color-lightgray);
        }

        @media (max-width: 768px) {
            grid-template-columns: 1fr;
        }
    }

    & dt {
        font-weight: 540;
    }

    & dd>ol {
        gap: 1rem;

        & li>a {
            padding: .4rem .4rem .4rem 1.6rem;
            background-image: url("../images/icon-chevron_right.svg");
            background-repeat: no-repeat;
            background-position: left center;
            background-size: 12px 12px;
        }

        & ol {
            margin-block: 1rem;
            margin-left: 1rem;
            padding: 0 .5rem .5rem;
            gap: 1rem;
        }

        & .material-symbols-outlined {
            font-size: 18px;
            color: var(--color-blue);
            vertical-align: middle;
            margin-top: -3px;
        }
    }
}

/*-----------------------------------------*/
/* スペーシングユーティリティ
/*-----------------------------------------*/
.top-space {
    margin-top: 1rem;
}

.top-space32 {
    margin-top: 2rem;
}

.top-space48 {
    margin-top: 3rem;
}

.bottom-space {
    margin-bottom: 1rem;
}

.bottom-space32 {
    margin-bottom: 2rem;
}

.bottom-space48 {
    margin-bottom: 3rem;
}

.space32 {
    padding: 2rem 0;
}

.space48 {
    padding: 4.4rem 0 3.2rem 0 !important;
}

/*-----------------------------------------*/
/* グリッドレイアウト追加分
/*-----------------------------------------*/
.l-grid-half {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 2.6rem;
}

.l-grid-innerhalf {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.l-grid-third {
    display: grid;
    grid-template-columns: 1fr 2.4fr;
    gap: 2.5rem;
}

.l-grid-third2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.4rem;
}

.l-grid-quarter {
    display: grid;
    grid-template-columns: 1fr 4fr;
    gap: 1rem;
}

.l-grid-quarter2 {
    display: grid;
    grid-template-columns: 1fr 4fr;
    gap: 2rem;
}

.l-grid-golden {
    display: grid;
    grid-template-columns: 3fr 5fr;
    gap: 1.6rem;
}

.l-grid-golden-rv {
    display: grid;
    grid-template-columns: 5fr 3fr;
    gap: 1.6rem;
}

@media (max-width: 500px) {

    .l-grid-half,
    .l-grid-innerhalf,
    .l-grid-third,
    .l-grid-third2,
    .l-grid-quarter,
    .l-grid-quarter2,
    .l-grid-golden,
    .l-grid-golden-rv {
        grid-template-columns: 1fr;
    }
}

/*-----------------------------------------*/
/* カードレイアウト・マージン
/*-----------------------------------------*/
.l-card-1 {
    aspect-ratio: 1/1;
}

.l-card-16 {
    aspect-ratio: 16/9;
    background-color: var(--color-lightgray);
}

.l-card-5 {
    aspect-ratio: 3/5;
}

.l-margin-22 {
    margin: 2.2rem 0;
}

.obj-contain {
    object-fit: contain;
}

.obj-cover {
    object-fit: cover;
}

.l-pbc-img>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*-----------------------------------------*/
/* テキスト・ボックス
/*-----------------------------------------*/
.maintext {
    text-align: justify;
    line-height: rem;
}

.notes-box-a {
    border: 1.5px solid var(--color-lightgray);
    padding: 2rem 2.4rem;
}

.material-symbols-font22 {
    font-size: 22px;
}

/*-----------------------------------------*/
/* ボタンスペーシング
/*-----------------------------------------*/
.btn-space-narrow {
    padding: .8rem 4rem .8rem 1.6rem !important;
}

.btn-space-standard {
    padding: .8rem 4rem .8rem 1.6rem !important;
}

.btn-space-middle {
    padding: 1.2rem 4rem 1.2rem 1.6rem !important;
}

/*-----------------------------------------*/
/* テキストサイズ・ウェイト
/*-----------------------------------------*/
.text-small {
    font-size: .875rem !important;
}

.text-normal {
    font-size: 1rem !important;
}

.text-middle {
    font-size: 1.15rem !important;
}

.text-large {
    font-size: 1.4rem !important;
}

.text-bold {
    font-weight: bold !important;
}

/*-----------------------------------------*/
/* 幅ユーティリティ追加分
/*-----------------------------------------*/
.w-33 {
    width: 33% !important;
}

@media (max-width: 768px) {
    .w-33 {
        width: 100% !important;
    }
}

/*-----------------------------------------*/
/* 問い合わせボックス
/*-----------------------------------------*/
.contactus {
    border: 1px solid var(--color-lightgray);
    border-radius: var(--border-radius-sm);
    padding: 2rem 2.4rem;
}

.contactus h4 {
    font-size: 1.2rem;
}

.contactus .vartical-line {
    border-right: 1px solid var(--color-lightgray);
    padding-right: 1.4rem;
}

@media (max-width: 768px) {
    .contactus .vartical-line {
        border-right: none;
        border-bottom: 1px solid var(--color-lightgray);
    }
}

.addr {
    padding: 0 1.4rem;
    font-size: .95rem;
    font-weight: 560;
    letter-spacing: 0;
}

.addr>span {
    display: inline-block;
    padding-right: 0.5rem;
}

.addr>span.sm {
    display: block;
    font-size: .86rem;
}

.phone {
    display: block;
    position: relative;
    border: 1px solid var(--color-lightgray);
    border-radius: var(--border-radius-sm);
    margin-inline: auto;
    padding: 1rem 2.4rem;
    font-size: 1rem;
    font-weight: bolder;
    color: var(--color-blue);
    text-align: center;
}

.phone .material-symbols-outlined {
    margin-right: .5rem;
    transform: translateY(2px);
}

.phone2 {
    border: 1px solid var(--color-lightgray);
    border-radius: var(--border-radius-sm);
    padding: 1rem 1rem 1rem 2.8rem;
    align-content: center;
    line-height: 1rem;
    font-weight: bold;
    color: var(--color-blue);
    background-image: url('../images/icon-tel.svg');
    background-repeat: no-repeat;
    background-position: 1rem center;

    width: min(280px, 100%);

    @media (max-width: 767.98px) {
        width: 100%;
    }

}

.phone2>span {
    display: inline-block;
}

.fax {
    border: 1px solid var(--color-lightgray);
    border-radius: var(--border-radius-sm);
    padding: 1rem 1rem 1rem 2.8rem;
    align-content: center;
    line-height: 1rem;
    font-weight: bold;
    color: var(--color-blue);
    background-image: url('../images/icon-fax.svg');
    background-repeat: no-repeat;
    background-position: 1rem center;
    width: min(280px, 100%);

    @media (max-width: 767.98px) {
        width: 100%;
    }

}

.fax>span {
    display: inline-block;
}

.mail {
    border: 1px solid var(--color-lightgray);
    border-radius: var(--border-radius-sm);
    padding: 1rem 1rem 1rem 2.8rem;
    align-content: center;
    line-height: 1rem;
    font-weight: bold;
    color: var(--color-blue);
    background-image: url('../images/icon-mail.svg');
    background-repeat: no-repeat;
    background-position: 1rem center;

    width: min(280px, 100%);

    @media (max-width: 767.98px) {
        width: 100%;
    }
}

.mail>span {
    display: inline-block;
}

/*-----------------------------------------*/
/* アイコン追加分
/*-----------------------------------------*/
.icon-phone {
    display: inline-block;
    background-image: url(../images/icon-tel.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 16px;
    height: 16px;
    margin-left: 4px;
    position: relative;
    top: 2px;
}

.icon-phone.icon-phone-lg {
    width: 24px;
    height: 24px;
}

/*-----------------------------------------*/
/* テキストサイズ追加分
/*-----------------------------------------*/
.text-micro {
    font-size: .7rem !important;
}

/* セレクトボックス（ラベルなし時の矢印位置調整） */
.select-wrapper:not(:has(label))::after {
    top: 50%;
}

/* お知らせ詳細ページ */
.notice-view {
    & .notice-view-header {
        display: flex;
        align-items: center;
        gap: 24px;
        margin-bottom: 24px;
        padding-bottom: 8px;
        border-bottom: 1px solid var(--color-lightgray);
    }

    & .notice-view-title {
        font-size: 1.25rem;
        font-weight: 600;
        margin-bottom: 24px;
        padding-bottom: 24px;
        border-bottom: 1px solid var(--color-lightgray);
    }

    & .notice-view-content {
        font-size: 1rem;

        &>p {
            margin-bottom: 24px;
        }
    }
}

/* エデュケーションページ */
.education--about {

    & .d-flex {
        justify-content: space-between;
        gap: 40px;

        @media (max-width: 767.98px) {
            flex-direction: column;
        }
    }

    & .image-box {
        width: 50%;

        @media (max-width: 767.98px) {
            width: 100%;
        }

        & img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
}

.step-box {
    display: flex;
    padding-block: 42px;
    border-bottom: 1px solid var(--color-lightgray);

    @media (max-width: 767.98px) {
        flex-direction: column;
        padding-block: 24px;
        border-bottom: none;
    }

    &:first-of-type {
        padding-top: 0;
    }

    & .step-box-inner {

        &.fles-1 {
            flex: 1;
        }

        &:has(.step-title) {
            min-width: 270px;

            @media (max-width: 767.98px) {
                min-width: 100%;
            }
        }

        & .step-title {
            font-size: 1.125rem;
            font-weight: 600;
            line-height: 1.6;
            letter-spacing: 0.1em;

            @media (max-width: 767.98px) {
                border-bottom: 1px solid var(--color-lightgray);
                padding-bottom: 16px;
                margin-bottom: 16px;
            }
        }

        &:last-of-type {
            border-left: 1px solid var(--color-lightgray);
            padding-left: 42px;

            @media (max-width: 767.98px) {
                border-left: none;
                padding-left: 0;
            }
        }

        & .step-text:first-of-type {
            padding-bottom: 24px;

            @media (max-width: 767.98px) {
                padding-bottom: 16px;
            }
        }

        & .step-text:nth-of-type(2) {
            border-top: 1px dashed var(--color-lightgray);
            padding-top: 24px;

            @media (max-width: 767.98px) {
                padding-top: 16px;
            }
        }

    }

    & .step-btn-box {
        margin-top: 24px;
        display: flex;
        gap: 16px;

        @media (max-width: 1047.98px) {
            flex-direction: column;
        }
    }
}

.help-box {
    font-size: 0.875rem;
    margin-top: 24px;
}

.education--meeting {
    & .d-grid {
        gap: 40px;
        grid-template-columns: repeat(2, 1fr);

        @media (max-width: 767.98px) {
            grid-template-columns: repeat(1, 1fr);
        }
    }

    & .d-box {
        width: 100%;

        & figcaption {
            margin-top: 8px;
            font-weight: 600;
            line-height: 1.4;
        }
    }
}

.education--working {
    & .d-grid {
        gap: 40px;
        grid-template-columns: repeat(4, 1fr);

        @media (max-width: 767.98px) {
            grid-template-columns: repeat(1, 1fr);
        }
    }

    & .d-box {
        width: 100%;

        & figcaption {
            margin-top: 8px;
            font-weight: 600;
            line-height: 1.4;
        }
    }
}

.education--disabilities-program {
    & .d-grid {
        gap: 40px;
        grid-template-columns: repeat(2, 1fr);

        @media (max-width: 767.98px) {
            grid-template-columns: repeat(1, 1fr);
        }
    }

    & .d-box {
        width: 100%;

        & figcaption {
            margin-top: 8px;
            font-weight: 600;
            line-height: 1.4;
        }
    }
}

.practice-box {
    margin-bottom: 24px;

    @media (max-width: 767.98px) {
        margin-bottom: 40px;
    }

    &:last-of-type {
        margin-bottom: 0;
    }
}

.practice-box-item {
    display: flex;
    background-color: var(--color-beige);

    @media (max-width: 767.98px) {
        flex-direction: column;
    }

    & .practice-box-text {
        padding: 40px;
        width: 70%;

        @media (max-width: 767.98px) {
            width: 100%;
            padding: 24px;
        }
    }

    & .practice-box-image {
        width: 30%;

        @media (max-width: 767.98px) {
            width: 100%;
        }

        & img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
}

.practice-box-text h2 {
    position: relative;

    &::after {
        font-family: 'Material Symbols Outlined';
        content: 'chevron_right';
        font-size: 1.5rem;
        white-space: nowrap;
        flex-shrink: 0;
        position: absolute;
        top: 0;
        right: 16px;
        color: var(--color-blue);
    }
}

.practice-list-item {
    display: flex;
    gap: 40px;
    border-bottom: 1px solid var(--color-lightgray);
    padding-block: 40px;

    @media (max-width: 767.98px) {
        flex-direction: column;
        padding: 24px;
        border-bottom: none;
    }

    &:first-of-type {
        padding-top: 0;
    }

    &:last-of-type {
        border-bottom: none;
    }
}

.practice-list-item-image {
    flex-shrink: 0;
    width: 320px;
    height: 240px;
    background-color: var(--color-bg-image);
    overflow: hidden;

    @media (max-width: 767.98px) {
        width: 100%;
        height: 250px;
    }

    & img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
}

.practice-list-item .item-text {
    line-height: 1.6;
}

.practice-list-item-dl {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    margin-bottom: 24px;

    & dt {
        font-size: 0.875rem;
        font-weight: 600;
        width: 140px;
        border-bottom: 1px solid var(--color-lightgray);
        padding-block: 16px;

        @media (max-width: 767.98px) {
            font-size: 1rem;
        }
    }

    & dd {
        width: calc(100% - 140px);
        border-bottom: 1px solid var(--color-lightgray);
        padding-block: 16px;
    }

    &.practice-list-item-dl-view {
        & dt:first-of-type {
            border-top: 1px solid var(--color-lightgray);
        }

        & dd:first-of-type {
            border-top: 1px solid var(--color-lightgray);
        }
    }
}

.education--btn-inner {
    display: flex;
    gap: 40px;
    justify-content: center;

    @media (max-width: 767.98px) {
        flex-direction: column;
        gap: 24px;
    }
}

.practice-list-item-content {
    display: flex;
    flex-direction: column;
    flex: 1;

    & h3 {
        border-left: none;
        padding-left: 0;
        border-bottom: 1px solid var(--color-lightgray);
        padding-bottom: 20px;
        margin-bottom: 0;
    }

    & .practice-list-item-link {
        text-align: right;
        margin-top: auto;
    }

    & .practice-list-item-link a {
        font-size: 0.875rem;
        font-weight: 600;
        display: inline-block;
        padding-top: 0;
        padding-bottom: 0;

        @media (max-width: 767.98px) {
            font-size: 1rem;
            margin-top: 16px;
        }

        &::after {
            right: 0;
            top: 6px;
        }
    }
}

.practice-view-hedding {
    h2 {
        border-bottom: none;
        padding: 2rem;
        background-color: var(--color-lightblue);
    }
}

section:has(.practice-view-aim) {
    background-color: var(--color-lightblue);
    padding-block: 4.5rem;

    & .practice-view-aim p {
        margin-bottom: 1.5rem;

        &:last-of-type {
            margin-bottom: 0;
        }
    }
}

.practice-view-impressions,
.practice-view-future-objectives {
    & p {
        border-bottom: 1px dashed var(--color-lightgray);
        padding-bottom: 2.5rem;
        margin-bottom: 2.5rem;
        transition: max-height 0.4s ease, opacity 0.4s ease;
    }
}

/* 感想のトグル表示用スタイル */
.practice-view-impressions p.impression-visible {
    max-height: 500px;
    opacity: 1;
}

.practice-view-impressions p.impression-hidden {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
}

/* ユーティリティクラス */
.bg-badge {
    background-color: var(--color-beige);
}

.p-md {
    padding: 2.5rem;
}

.fs-md {
    font-size: 1.25rem;
}

.fs-sm {
    font-size: 1rem;
}

.fs-xs {
    font-size: 0.875rem;
}

.fs-line-xs {
    line-height: 1.2;
}

.fs-line-sm {
    line-height: 1.5;
}

.flex1 {
    flex: 1;
}

.gap-0 {
    gap: 0 !important;
}

.gap-sm {
    gap: 1.5rem;
}

.gap-md {
    gap: 2.5rem;
}

@media (max-width: 767.98px) {
    .gap-sp-sm {
        gap: 1rem;
    }
}

.border-bottom {
    border-bottom: 1px solid var(--color-lightgray);
}

#toggle-impressions-arrow.material-symbols-outlined {
    position: absolute;
    top: 38px;
    right: 16px;
    font-size: 2rem;
}

@media (max-width: 767.98px) {
    .d-sm-flex-column {
        flex-direction: column;
    }
}

/* コンテンツボックス */
/* .content-box {
    margin-top: 40px;
    display: flex;
    gap: 40px;

    @media (max-width: 767.98px) {
        flex-direction: column;
    }

    & .content-box-item {

        &:first-child {
            width: 60%;
            background-color: unset;
            aspect-ratio: unset;

            @media (max-width: 767.98px) {
                width: 100%;
                order: 2;
            }
        }

        &:last-child {
            width: max(480px, 40%);
            overflow: hidden;

            @media (max-width: 767.98px) {
                width: 100%;
                order: 1;
            }

            & figure {
                width: 100%;
                height: 100%;

                & img {
                    width: 100%;
                    height: 100%;
                    object-fit: contain;
                }
            }
        }

        & .content-box-block {
            margin-bottom: 2.5rem;

            &:last-child {
                margin-bottom: 0;
            }
        }

        & .content-box-text {
            font-size: 1rem;
        }

        & .content-box-item-text {
            margin-bottom: 20px;

            &:last-child {
                margin-bottom: 0;
            }
        }

    }
} */

.content-box--no-image {
    & .content-box-item {
        &:first-child {
            width: 100%;
        }

        &:last-child {
            width: 100%;
        }
    }
}

/* YouTube埋め込み */
.youtube-box {
    display: grid;
    gap: 40px;
    grid-template-columns: repeat(2, 1fr);

    @media (max-width: 767.98px) {
        grid-template-columns: repeat(1, 1fr);
    }

    & .youtube-box-item {
        width: 100%;
        aspect-ratio: 16 / 9;

        & figure {
            width: 100%;
            height: 100%;

            & iframe {
                width: 100%;
                height: 100%;
                object-fit: contain;
            }
        }
    }
}

/* タブ */
.tabs {
    & .tab-list {
        display: flex;
        padding-bottom: 0.5rem;
        margin-bottom: 2rem;

        @media (max-width: 767.98px) {
            flex-direction: column;
        }
    }

    & .tab {
        width: 50%;
        cursor: pointer;
        padding: 1rem;
        text-align: center;
        border: 1px solid #e0e0e0;
        font-size: 1.5rem;
        font-weight: 600;
        letter-spacing: 0.1em;

        @media (max-width: 767.98px) {
            width: 100%;
        }

        &.active {
            background: var(--color-darkgray);
            color: var(--color-white);
        }
    }
}

.tab-heading-box {
    display: flex;
    gap: 56px;
    background-color: var(--color-lightblue);
    padding: 36px;

    @media (max-width: 767.98px) {
        flex-direction: column;
        gap: 0;
    }

    .tab-heading-box-item {
        @media (max-width: 767.98px) {
            flex-direction: column;
        }

        &:first-child {
            font-size: 1.25rem;
            font-weight: 600;
            letter-spacing: 0.1em;
            flex-shrink: 0;
        }

        &:last-child {
            display: flex;
            column-gap: 64px;
            row-gap: 1rem;
            flex: 1 1 auto;
            flex-wrap: wrap;

            & ul {
                display: flex;
                margin-left: 1.5rem;

                &:first-child {
                    flex-direction: column;
                    flex-shrink: 0;
                }

                &:nth-child(2) {
                    flex-direction: column;
                    margin-left: 1.5rem;

                }

                & li {
                    font-size: 1rem;
                    font-weight: 400;
                    list-style: disc;

                    @media (max-width: 767.98px) {
                        margin-left: 24px;
                    }
                }
            }

            & .tab-heading-box-item-images {
                width: 100%;
                display: flex;
                gap: 2rem;

                @media (max-width: 767.98px) {
                    justify-content: center;
                    align-items: center;
                    flex-direction: column;
                }

                &>figure {
                    width: min(360px, 50%);
                    aspect-ratio: 1/1;
                    background-color: var(--color-white);
                    padding: 0.5rem;
                    overflow: hidden;

                    @media (max-width: 767.98px) {
                        width: min(480px, 80%);
                    }

                    & img {
                        width: 100%;
                        height: 100%;
                        object-fit: contain;
                    }
                }
            }

        }
    }

    @media (max-width: 767.98px) {
        .btn-pdf {
            margin-top: 16px;
        }
    }
}

h4 {
    font-size: 1.25rem;
    line-height: 1.25rem;
    font-weight: 600;
    margin-bottom: 16px;
}

.download-btn-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;

    @media (max-width: 767.98px) {
        grid-template-columns: repeat(1, 1fr);
    }

    & .btn-sm {
        width: 100%;
        padding-right: 44px;
    }

    & .btn {
        justify-content: flex-start;
        padding-left: 24px;
    }

}

/* 申込ボックス・連絡先ボックス */
.apply-box {
    background-color: var(--color-lightblue);
    padding: 2.5rem;
    margin-bottom: 2.5rem;

    & ul {
        list-style: disc;
        margin-left: 24px;
    }

    & li {
        margin-bottom: 16px;

        &:last-of-type {
            margin-bottom: 0;
        }

        & .apply-box-item {
            margin-top: 16px;
            display: flex;
            gap: 16px;

            @media (max-width: 767.98px) {
                flex-direction: column;

                & .btn-pdf {
                    width: 100%;
                }

                & .btn-word {
                    width: 100%;
                }
            }
        }
    }
}

.contact-box {
    border: 1px solid var(--color-lightgray);

    & .item {
        &:first-child {
            padding-right: 2.5rem;
            border-right: 1px solid var(--color-lightgray);

            @media (max-width: 767.98px) {
                padding-right: 0;
                border-right: none;
            }
        }
    }

    & .contact-box-item {
        margin-top: 16px;
        display: flex;
        gap: 16px;
    }

    & .contact-box-item a,
    & .contact-box-item span {
        color: var(--color-blue);
        font-size: 1rem;
        font-weight: 600;
        display: inline-block;
        gap: 8px;

        & img {
            width: 24px;
            height: 24px;
            object-fit: contain;
            vertical-align: middle;
            margin-right: 4px;
        }
    }
}

/* 移動美術館 */
.museum-extension-item a {
    flex-direction: row;
    gap: 40px;

    @media (max-width: 767.98px) {
        flex-direction: column;
        gap: 0;
    }

    & figure {
        flex-shrink: 0;

        @media (max-width: 1047.98px) {
            flex-shrink: 1;
        }
    }
}

.museum-extension-item-date+.tag-container {
    display: none;
}

@media screen and (max-width: 767.98px) {
    .museum-extension-item a .image-list-item-content {
        display: contents;
    }

    .museum-extension-item a .museum-extension-item-date {
        order: -1;
    }


}

/* コレクション件s買う 公開画像の利用について */
#guide {
    & .press {
        border: 1px solid var(--color-lightgray);
        padding: 2rem;

        &>li {
            list-style: decimal;
            margin-top: 1rem;
            margin-left: 1rem;

            &:first-child {
                margin-top: 0;
            }
        }
    }
}

/* アクセシビリティ */
.accessibility-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;

    @media (max-width: 767.98px) {
        grid-template-columns: repeat(1, 1fr);
    }

    & figure {
        width: 100%;
        line-height: 1.8;

        & .image-container {
            width: 100%;
            border: 1px solid var(--color-lightgray);
            display: grid;
            place-items: center;
        }

        & .no-image {
            background-color: var(--color-lightgray);
        }

        & img {
            width: 100%;
            height: auto;
            object-fit: cover;
        }
    }
}

/* 展覧会カタログ */
.catalog-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 3rem 2rem;

    @media (max-width: 767.98px) {
        grid-template-columns: repeat(2, 1fr);
        gap: 3rem 1rem;
    }

    @media (max-width: 479.98px) {
        gap: 3rem 1rem;
        grid-template-columns: repeat(1, 1fr);
    }

    & figure {
        width: 100%;
        aspect-ratio: 1/1.414;
        /* border: 1px solid var(--color-lightgray); */
        display: grid;
        place-items: center;
        grid-template-rows: subgrid;
        gap: 0;
        grid-row: span 3;

        & .image-container {
            background-color: #ddd;
            width: 100%;
            height: 100%;
            aspect-ratio: 1/1.414;

            & img {
                width: 100%;
                height: 100%;
                object-fit: contain;
                object-position: center;
            }
        }

        & figcaption {
            margin-top: 8px;
            width: 100%;

            & p {
                letter-spacing: 0;
                line-height: 1.4;
                text-align: left;
                word-break: keep-all;
            }

        }

        & .btn-buy {
            margin-top: 16px;
            display: block;
            width: 100%;
            text-align: center;
            padding: 4px 0;
            background-color: var(--color-blue);
            color: var(--color-white);
            letter-spacing: 0.1em;
            border-radius: var(--border-radius-sm);
        }
    }
}

.catalog-pagination {
    margin-top: 3rem;
}

.catalog-loading,
.catalog-error {
    grid-column: 1 / -1;
    padding: 2rem;
    text-align: center;
    color: var(--color-text);
}

/* English */
html[lang="en"] {

    & body {
        line-height: 1.8;
    }

    & h3>i {
        display: block;
    }

    & h2 {
        letter-spacing: 0.05em;
    }
}

.collection-copyright {
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.4;
    text-align: right;
}

.en-map {
    & .image-box {
        width: 50%;
        aspect-ratio: 1/1;
        background-color: var(--color-bg-image);
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;

        & img {
            width: auto;
            height: 100%;
            max-height: 400px;
            max-width: 100%;
            object-fit: contain;
            object-position: center;
        }
    }

    @media (max-width: 767.98px) {
        & .image-box {
            width: 100%;
        }
    }
}

ol.en {
    list-style: decimal;
    margin-left: 1.5rem;
}

ol.en.collection {
    list-style: decimal;
    margin-left: 0;
    padding-left: 3.5rem !important;
}

@media (max-width: 1047.98px) {
    .hamburger-menu-inner--column--list.en {
        flex-direction: column;

        & .list--item {
            border-bottom: 1px solid var(--color-lightgray);

            & a {
                padding-block: 24px;
                padding-inline: 1rem;
                font-size: 1.125rem;
                display: block;
                width: 100%;
                height: 100%;
                font-weight: 600;
            }

            &:first-of-type {
                border-top: 1px solid var(--color-lightgray);
            }
        }
    }

    @media (max-width: 1047.98px) {
        .lang-select-box.en {
            padding-bottom: 0;
            border-bottom: none;
        }
    }
}

table.ql-table-better * {
    width: unset;
    border-style: unset !important;
    border-color: unset !important;
    border-width: unset !important;

    & td {
        border: 1px solid var(--color-lightgray) !important;
    }
}

/* Quillエディタのスタイル */
.ql-align-center { text-align: center; }
.ql-align-right { text-align: right; }
.ql-align-justify { text-align: justify; }
.ql-size-small { font-size: 0.75em; }
.ql-size-large { font-size: 1.5em; }
.ql-size-huge { font-size: 2.5em; }