@charset "utf-8";

#campaign a,
#campaign li,
#campaign p {
    color: #111;
    font-family: 'メイリオ', Osaka, 'MS PGothic', arial, helvetica, sans-serif !important;
    font-size: 16px;
    line-height: 1.5rem;
}

#campaign {
    width: 100%;
    max-width: 1220px;

    height: 600px;
    margin: 0 auto 100px;
}

#campaign .title {
    margin: 30px auto 30px;
}

#campaign .title h1 {
    font-size: 34px;
    color: #000;
    margin: 0 0 25px;
    padding: 10px 0 10px 15px;
    border-left: #E50012 2px solid;
}

#campaign .main ul {
    display: flex;
    flex-flow: wrap;
    width: 100%;
    max-width: 1220px;

}

#campaign .main ul li {
    width: 31.333%;
    margin: 0 3% 3% 0;
    transition: 0.5s;
}

#campaign .main ul li:nth-child(3n) {
    margin: 0 0 2%;
}

#campaign .main ul li:hover {
    opacity: 0.8;
}

#campaign .main ul li img {
    width: 100%;
    border-radius: 14px;
}


@media only screen and (max-width: 767px) {

    #campaign .pc {
        display: none !important;
    }

    #campaign .sp {
        display: block !important;
    }

    #campaign a,
    #campaign h2,
    #campaign h3,
    #campaign p {
        font-size: 16px;
        line-height: 1.5rem;
    }

    #campaign {
        height: auto;
        width: 90%;
    }

    #campaign .title {
        margin: 20px auto 20px;
    }

    #campaign .title h1 {
        font-size: 28px;
        line-height: 30px;
        margin: 0 0 20px;
        padding: 8px 20px 8px 15px;
        border-left: #E50012 2px solid;
    }

    #campaign .main ul {
        display: block;
        width: 100%;
        margin: 0 auto;
    }

    #campaign .main ul li,
    #campaign .main ul li:nth-child(3n) {
        width: 100%;
        margin: 0 0 20px;
    }
}