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

.exhibition--item.d-flex:first-child {
    margin-top: 0;
}

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

.exhibition--cat {
    margin-bottom: 8px;
}

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

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

.article--main_content--item.event--index {
    & .exhibition--item {
        &>.exhibition--img {
            max-width: 248px !important;
        }
    }
}

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

    &>.exhibition--img {
        max-width: 40%;
        flex:1;
        height: auto;

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

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

        & figure {
            @media (max-width: 991.98px) {
                max-width: 60%;
                margin: 0 auto;
            }
        }

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

    }

    & .exhibition--info {
        flex: 1;
        
        @media (max-width: 991.98px) {
            width: 100;
            order: 2;
        }

        & a {
            @media (max-width: 991.98px) {
                /* display:contents; */
                word-wrap: break-word;
            }
        }


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

            }
        }

        & p:has(a[href$=".pdf"] ) {
            @media (max-width: 991.98px) {
                text-align: center;
            }
        }

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

            & .text-help {
                font-size: 0.875rem;
                display: contents;
            }
        }

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

        &.item--sub--event {
            margin-top: 40px;
            padding-bottom: 40px;
            border-bottom: 1px dotted #a0a0a0;
            &:last-child {
                border-bottom: none;
                padding-bottom: 0;
            }
        }
    
    }
}

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