@charset "UTF-8";

#event {
    padding: 100px 4%;
}

.eventBox {
    margin: 0 auto;
    max-width: 1080px;
}
.eventBox > div.closed{
    position:relative;
}

:lang(ja) .eventBox > div.closed::before{
    content:"開催終了";
}
:lang(en) .eventBox > div.closed::before{
    content:"Closed";
    text-transform: uppercase;
}
.eventBox > div.closed::before{
    position:absolute;
    left:0;
    top:0;
    display:block;
    background-color: #656464;
    z-index: 1;
    margin-left: 10px;
    margin-top: -14px;
    font-size: 1.4rem;
    padding: 10px;
    line-height: 1;
    color: #fff;
}

.eventBox > div.com {
    position: relative;
}

:lang(ja) .eventBox > div.com::before{
    content:"準備中";
}
:lang(en) .eventBox > div.com::before{
    content:"Coming Soon";
}
.eventBox > div.com::before{
    position:absolute;
    left:0;
    top:0;
    display:block;
    background-color: #ff739f;
    z-index: 1;
    margin-left: 10px;
    margin-top: -14px;
    font-size: 1.4rem;
    padding: 10px;
    line-height: 1;
    color: #fff;
}


.eventBox > div.closed figure::after{
    content:"";
    width:100%;
    height:100%;
    display:block;
    background-color: rgb(0 0 0 / 40%);
    top: 0;
    left: 0;
    position: absolute;
}

.eventBox > div figure {
    margin-bottom: 10px;
    position:relative;
}
.eventBox>div h3 {
    font-size: 2.0rem;
    margin-bottom: 10px;
}

.eventBox>div dl {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0 5px;
}

.eventBox>div dl dt {
    width: 22px;
}

.eventBox>div dl dt i {
    font-size: 2.6rem;
    color:#FF739F;
}

.eventBox>div dl dd {
    width: calc(100% - 27px);
    font-size: 1.4rem;
    color: var(--color-text-sub);
}

@media (min-width: 813px) {
    .eventBox {
        display: flex;
        flex-wrap: wrap;
        gap: 2.78%;
    }

    .eventBox>div {
        width: calc((100% - (2.78% * 2)) / 3);
    }

.eventBox > div figure {
    overflow: hidden;
}

.eventBox > div figure img {
    width: 100%;
    height: auto;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: .5s ease-in-out;
    transition: .5s ease-in-out
}

.eventBox > div a:hover figure img {
    -webkit-transform: scale(1.3);
    transform: scale(1.3)
}
.eventBox > div a:hover h3{color: var(--color-text-sub);}

}


@media (max-width: 812px) {
    #event {
    padding: 80px 4%;
}

    .eventBox > div:not(:last-of-type){margin-bottom:40px;}

    .eventBox > div figure img{
        width:100%;
    }

}



#artmap {
    padding: 100px 4% 50px 4%;
    background-color: var(--select-color03);
    overflow: hidden;
}

#artmap .mapTitle {
    text-align: center;
}

#artmap .mapTitle::before {
    content: "";
    width: 179px;
    height: 28px;
    display: block;
    background-image: url(../../img/common/ico-title01.svg);
    background-repeat: no-repeat;
    background-size: contain;
    margin:0 auto;
}

#artmap .mapTitle .sub-tit {
    font-size: 2.3rem;
    font-weight: 600;
    /* margin-bottom: 10px; */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
}
#artmap .mapTitle .sub-tit i{
    font-size: 4rem;
    line-height: 1;
}

#artmap .mapTitle h2 {
    font-size: 3.6rem;
    margin-bottom:40px;
}



@media (min-width: 813px) {
}

@media (max-width: 812px) {
    #artmap .mapTitle .sub-tit {
        font-size: 2.0rem;
    }

    #artmap .mapTitle h2 {
        font-size: 2.8rem;
    }
}

#artmap .slideBox {
    background: url("/home/artcampus/assets/img/projects/img-slider.jpg");
    width: 100vw;
    background-position-x: 0%;
    background-position-y: 0%;
    background-repeat: repeat;
    background-size: auto;
    background-repeat: repeat-x;
    background-size: 1968px;
    height: 328px;
    background-position: bottom;
    animation-name: slide_img;
    animation-duration: 200s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    margin: 60px calc(-50vw + 50%) 0;
}

@media (max-width: 812px) {
    #artmap {
        padding: 80px 4%;
    }

    #artmap .slideBox {
        height: 164px;
        background-size: 984px;
    }
}

@keyframes slide_img {
    100% {
        background-position: -10000px 0
    }
}

@keyframes slide_img_r {
    100% {
        background-position: 10000px 0
    }
}

@keyframes slide_img_h {
    100% {
        background-position-x: 10000px
    }
}

.breadcrumbsBox {
    background-color: var(--select-color03);
}