@charset "UTF-8";

.text-sm {
    font-size: 0.875rem;
}

.ico-category {
    display: inline-block;
    font-weight: 400;
    padding: 2px 24px;
    margin-bottom: 12px;
    border-radius: var(--border-radius);
    border: 1px solid var(--color-black);
}

.d-grid {
    row-gap: 40px;
}

.d-grid--item {
    & figure{
        aspect-ratio: 1/1.403;
        overflow: hidden;
        & img {
            object-fit: cover;
            width: 100%;
            height: 100%;
        }
    }
}

.d-grid--item figcaption {
    font-size: 0.75rem;
    text-wrap: balance;
    margin-top: 8px;
    font-weight: normal;
}

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

    .d-sm-order-1 {
        order: 1;
    }
    .d-sm-order-2 {
        order: 2;
    }
    .d-sm-order-3 {
        order: 3;
    }

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

/* 展覧会情報 */
.exhibition--item.d-flex {
    margin-top: 56px;
    padding-bottom: 56px;
    display: flex;
    flex-wrap: wrap;
    gap: 36px;
    align-items: flex-start;
    border-bottom: 2px solid var(--color-darkgreen);

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


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

    &>.exhibition--img {
        width: 248px;
        height: auto;

        &>figcaption {
            font-size: 0.75rem;
            text-wrap: balance;
            margin-top: 8px;
        }

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

    }

    &>.exhibition--info {
        flex: 1;

        & h3 {
            font-size: 1.375rem;
            padding-bottom: 12px;
            border-bottom: 1px dotted #a0a0a0;
            & > span{
                display: block;

            }
        }

        & .exhibition--date, & .exhibition--place {
            margin-top: 16px;
            display: flex;
            gap: 8px;
            &>.ico-tag {
                text-align: center;
                padding-block: 4px;
                margin-right: 8px;
                width: 72px;
                height: 24px;
            }
        }

        & .exhibition--description {
            margin-top: 20px;
        }

        & .exhibition--detail {
            margin-top: 24px;
            display: flex;
            justify-content: end;
        }
    }
}

.exhibition--info--section {
    & .exhibition--item:nth-of-type(1) {
        margin-top: 32px;
        border-bottom: none;
    }

    & .exhibition--item {
        margin-top: 64px;
    }
}

.exhibition--info--section:not(:first-child) {
    
    margin-top: 80px;

    & article {
        margin-top: 40px;

        & table {
            margin-top: 24px;
        }
    }
}

.exhibition--info--header {
    display: flex;
    flex-direction: column;
    gap: 16px;
    
    & .ico-tag{
        margin-right: 1rem;
    }

    & .exhibition--title {
        font-size: 1.3125rem;
        border-bottom: 1px dotted #a0a0a0;
        padding-bottom: 12px;
    }

    & .exhibition--description {        font-size: 1rem;
        line-height: 2;
    }

    & .exhibition--date, & .exhibition--place {
        font-size: 1.125rem;
        font-weight: bold;
    }

    & .exhibition--holiday{
        margin-top: 16px;
        margin-bottom:32px;
        & .text-help{
            font-size: 0.875rem;
        }
    }
}
.exhibition--link {
    & .text-help {
        margin-top: 24px;
        font-size: 0.875rem;
        & a {
            color: var(--color-orange);
        }
    }
}

.exhibition--guide--inner {

    border: 1px solid #707070;
    gap:0;
    
    &>*{
        padding: 24px;
    }

    & .exhibition--guide--img {
        border-right: 1px solid #707070;
        &>img{
            max-width: 180px;
        }
    }

    & .exhibition--guide--content {
        & .text--description {
            font-weight: normal;
        }
        & .text--price {
            margin-top: 16px;
        }
    }
    
}

.aside--pagenation {
    margin-top: 48px;
}

.aside--exhibition {
    margin-top: 80px;

    &>.aside--exhibition--list {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        justify-items: center;
        gap: 16px;

        &>.aside--exhibition--item {
            width: 100%;
            &>a {
                position: relative;
                display: flex;
                align-items: center;
                justify-content: center;
                /* width: 320px; */
                height: 96px;
                border-radius: var(--border-radius);
                background-color: var(--color-white);
                border: 1px solid var(--color-black);
                text-decoration: none;
                font-size: 1.125rem;
                font-weight: 500;
                color: var(--color-black);

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

/* histroy */
.history--select--wrapper{
    width: 230px;
    position: relative;
    &::after {
        content: '';
        position: absolute;
        top: calc(50% - 2px);
        right: 16px;
        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;
        width: 100%;
        height: 48px;
        border: 2px solid var(--color-orange);
        border-radius: var(--border-radius);
        padding: 4px 16px;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
    }
}

.history--select--content--item{
    & .h3{
        font-size: 1.75rem;
        margin-bottom: 24px;
    }

    .history--ancher-list{
        & .d-grid{
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 24px;
            & .d-grid--item{
                & a{
                    height: 48px;

                    position: relative;
                    display: block;
                    font-size: 0.875rem;
                    line-height: 1.2;
                    text-align: center;
                    padding: 4px 16px;
                    border-radius: var(--border-radius);
                    background-color: var(--color-white);
                    border: 2px solid var(--color-orange);
                    text-decoration: none;
                    color: var(--color-black);
                    font-feature-settings: "palt";
                    letter-spacing: 0.7px;

                    &::after {
                        content: '';
                        position: absolute;
                        top: calc(50% - 2px);

                        right: 10px;
                        width: 10px;
                        height: 10px;
                        border-top: 2px solid var(--color-black);
                        border-right: 2px solid var(--color-black);
                        transform: translateY(-50%) rotate(135deg);
                    }
                }
            }
        }
    }
}