@import url(./reset.css);

.wrap {
    width: 100%;
    overflow: hidden;
}

.m_img {
    display: none;
}

.content {
    width: 100%;
    max-width: 1080px;
    padding: 100px 20px 0;
    margin:0 auto;
    background:url(../images/image_index/bg.png) top center no-repeat #fff;
    background-size: 100%;
    text-align: center;
}

.content img {
    width: auto;
    max-width: 100%;
    margin:0 auto
}

.content > h1 {
    font-size:32px;
    margin-bottom: 60px;
}

.content > h1 > img {
    max-width: 217px;
    display: block;
    margin:28px auto 0;
}

.content nav {
    width: 100%;
    display: flex;
    justify-content: center;
    font-size: 0;
    gap: 12px;
    margin:0 auto 20px;
}

.content p {
    font-size: 16px;
    color: #606060;
    margin-bottom: 30px;
}

footer {
    width: 100%;
    height: auto;
    background-color: #fff;
}

footer .footer {
    width: 100%;
    max-width: 1080px;
    padding: 20px;
    margin: 0 auto;
}
footer .footer img {
    width: 100px;
    margin-bottom: 10px;
}
footer .footer ul li {
    color: #606060;
    font-size: 16px;
    line-height: 24px;
}
footer .footer a {
    color: #606060;    
}


/* mobile */
@media screen and (max-width: 768px) {
    .pc_img {
        display: none;
    }
    .m_img {
        display: block;
    }
    .content {
        background:url(../images/image_index/m_bg.png) top center no-repeat #fff;
        background-size: 100%;
        padding: 100px 20px 0;
    }    
    .content > h1 {
        font-size: 20px;
    }
    .content > h1 > img {
        max-width: 217px;
        margin-top: 16px;
    }
    .content nav {
        margin-bottom: 16px;
    }
    .content nav a img {
        max-width: 121px;
    }
    .content p {
        font-size: 10px;
    }
    footer .footer img {
        width: 64px;
        margin-bottom: 0;
    }
    footer .footer ul li {
        font-size: 12px;
        line-height: 18px;
    }
}