@charset "UTF-8";

#caption{
    padding: 100px 4%;
    text-align:center;
}

#caption h2{
    font-size: 2.8rem;
    margin-bottom: 30px;
}

@media (max-width: 812px) {
#caption{
    padding: 60px 4%;
}
#caption h2{
    font-size: 2.4rem;
}
}

#environment{
    padding: 100px 4%;
    background-color: var(--select-color03);
    background:url(/home/artcampus/assets/img/di_initiatives/bg.svg) no-repeat right var(--select-color03);
    background-position:center right 8vw;
    background-size:auto;
}

#environment .enList dt{
    font-size: 2.8rem;
    margin-bottom: 10px;
    font-weight: 600;
}

#environment .enList dl:not(:last-of-type){
    margin-bottom: 40px;
}

#environment .enList dd > p:not(:last-of-type){
    margin-bottom: 10px;
}

@media (max-width: 812px) {
#environment{
    padding: 60px 4%;
    background-size: 78vw;
    background-position: bottom 80px right 2%;
}
#environment .enList dt{
    font-size: 2.4rem;
}
}

#social{
    padding: 100px 4%;
}

#social .socialList{
    margin: 0 auto;
    max-width: 1080px;
}

#social .socialList h3{
    font-size: 2.8rem;
    margin-bottom: 20px;
}

.socialList > div figure {
    margin-bottom: 10px;
    position:relative;
}

.socialList > div > p:not(:last-child){margin-bottom: 10px;}

@media (min-width: 813px) {
    #social .socialList{
        display: flex;
        flex-wrap: wrap;
        gap: 60px 5.56%;
    }

#social .socialList > div {
        width: calc((100% - 5.56%) / 2);
    }
}


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

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

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

#social .socialList h3{
    font-size: 2.4rem;
}
}

#area{
    padding: 100px 4%;
    background-color: var(--select-color03);
}



.areaList > div{
    display: flex;
    gap: 15px;
    align-items:flex-start;
}

.areaList > div > a{
    width: 46.15%;
}

.areaList > div dl{
    flex:1;
    padding-left: 10px;
}

.areaList > div dl dt{
    font-weight: 600;
    margin-bottom: 15px;
    font-size: 2.0rem;
}

.areaList > div dl dd > p:not(:last-of-type){margin-bottom: 10px;}

@media (min-width: 813px) {
.areaList{display: flex;flex-wrap: wrap;gap: 40px 3.7%;}
.areaList > div{
    width: calc((100% - 3.7%) / 2);
}


.areaList > div figure {
    overflow: hidden;
}

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

.areaList > div a:hover figure img {
    -webkit-transform: scale(1.3);
    transform: scale(1.3)
}
}
@media (max-width: 812px) {
#area{
    padding: 80px 4%;
}

.areaList > div:not(:last-of-type){
    margin-bottom: 20px;
    border-bottom: 1px dashed var(--color-text-sub);
    padding-bottom: 20px;
}

.areaList > div > a{
    width: 30%;
}

}

#education{
    padding: 100px 4%;
}

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



.educationList dt{
    font-size: 2.2rem;
    margin-bottom: 10px;
    font-weight: 600;
}

.educationList dl:not(:last-of-type){
    margin-bottom: 40px;
}

.educationList dd > p:not(:last-of-type){
    margin-bottom: 10px;
}

@media (max-width: 812px) {
    #education{
    padding: 80px 4%;
}
#environment .enList dt{
    font-size: 2.4rem;
}
}