@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=family=EB+Garamond:wght@400;600&Shippori+Mincho:wght@400;600&display=swap');
/*
font-family: "Shippori Mincho", serif; font-weight: 400;
font-family: "Shippori Mincho", serif; font-weight: 600;
*/

#caption,
#heralbony,
.artbox {
    padding: 100px 4%;
}

#caption .wrap>p:not(:last-of-type),
#heralbony .wrap>p:not(:last-of-type) {
    margin-bottom: 15px;
}

#heralbony .jp{
    font-family: "Shippori Mincho", serif; font-weight: 600;
}

@media (max-width: 812px) {

    #caption,
    #heralbony,
    .artbox {
        padding: 60px 4%;
    }
}

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

@media (max-width: 812px) {}


article>section:nth-of-type(2),
article>section:nth-of-type(6)
{
    background: url(/home/artcampus/assets/img/artworks/line01.svg) no-repeat left bottom;
    background-size: 40% auto;
}

article>section:nth-of-type(3),
article>section:nth-of-type(5),
article>section:nth-of-type(7),
article>section:nth-of-type(9){
    background: url(/home/artcampus/assets/img/artworks/line02.svg) no-repeat right bottom;
    background-size: 70% auto;
}

article>section:nth-of-type(4),
article>section:nth-of-type(8) {
    background: url(/home/artcampus/assets/img/artworks/line03.svg) no-repeat left bottom;
    background-size: 60% auto;
}



.artbox .wrap {
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 60px;
}

.artbox .wrap figcaption {
    color: var(--color-text-sub);
    font-size: 1.2rem;
}

.artbox .wrap .caption h3 {
    font-size: 3.6rem;
    padding-bottom: 15px;
    margin-bottom: 20px;
    width: 100%;
    background: url(/home/artcampus/assets/img/artworks/line_tit_under.svg) no-repeat left bottom;
    background-size: contain;
}

.artbox .wrap .caption h3 .jp{
    font-family: "Shippori Mincho", serif; font-weight: 600;
    line-height: 1.6;
    display: block;
}

.artbox .wrap .caption>h4 {
    font-size: 2.8rem;
    margin-bottom: 20px;
}

.artbox .wrap .caption>h4 span {
    font-size: 1.8rem;
    color: var(--color-text-sub);
    display: block;
    font-family: "Noto Sans", sans-serif;
    letter-spacing: 0.08em;
    font-weight: 400;
}

.artbox .wrap .caption>dl dt {
    color: var(--color-text-sub);
    font-size: 1.4rem;
    line-height: 1.3;
}

.artbox .wrap .caption>dl {
    margin-bottom: 15px;
}

.artbox .wrap .caption>dl dd {
    font-size: 1.8rem;
}

.artbox .wrap .caption>dl>dd:not(:last-of-type) {
    margin-bottom: 8px;
}

.artbox .wrap .caption p.map i {
    font-size: 2.8rem;
    margin-right: 5px;
    display: inline;
    margin-top: 4px;
}

.artbox .wrap .caption p.map {
    font-size: 1.8rem;
    display: flex;
    align-items: flex-start;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.artbox .wrap .caption p.map span {
    width: 100%;
}


.artbox .wrap .caption .txt {
    font-size: 1.6rem;
}

.artbox .wrap .caption .txt h4 {
    font-size: 2.0rem;
    margin-bottom: 8px;
}

.artbox .wrap .caption .txt>p:not(:last-of-type) {
    margin-bottom: 10px;
}

.artbox .artistBox {
    max-width: 1080px;
    margin: 0 auto;
    background-color: #FBFBFB;
    padding: 40px;
}

.artbox .artistBox h4 {
    color: var(--color-text-sub);
    font-size: 2.0rem;
}


.artbox .artistBox h5 {
    font-size: 2.6rem;
    margin-bottom: 20px;
}

.artbox .artistBox h5 span {
    font-size: 1.6rem;
    margin-left: 20px;
}

.artbox .artistBox>p {
    font-size: 1.4rem;
}

.artbox .artistBox>p:not(:last-of-type) {
    margin-bottom: 15px;
}

.artbox .artistBox .sns {
    margin-top: 15px;
    display: flex;
    gap: 10px;
    font-size: 2.2rem;
}


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

    .artbox .wrap figure {
        width: calc((100% / 2) - 3.7%);
    }

    .artbox .wrap .caption {
        width: calc(100% / 2);
    }

    .artbox .artistBox .sns a:hover {
        color: var(--color-text-sub);
    }
}

@media (max-width: 812px) {
    .artbox .wrap figure {
        max-width: 520px;
        margin: 0 auto 20px;
    }

    .artbox .wrap .caption h3 {
        font-size: 3.0rem;
    }

    .artbox .wrap .caption>h4 {
        font-size: 2.4rem;
        margin-bottom: 20px;
    }

    .artbox .wrap .caption>h4 span {
        font-size: 1.6rem;
    }

    .artbox .artistBox {
        padding: 40px 4%;
    }

    .artbox .artistBox h4 {
        font-size: 1.6rem;
    }

    .artbox .artistBox h5 {
        font-size: 2.0rem;
        margin-bottom: 20px;
    }

    .artbox .artistBox h5 span {
        font-size: 1.4rem;
        margin-left: 0;
        display: block;
    }

}