#feature-index header {
    padding: 48px 0;
}

#feature-index .page-title {
    padding: 0 0 24px;
}

@media screen and (min-width: 640px) {
    #feature-index header {
        padding: 72px 0;
    }
    #feature-index .page-title {
        padding-bottom: 36px;
    }
}

@media screen and (min-width: 1080px) {
    #feature-index header {
        padding: 96px 0;
    }
    #feature-index .page-title {
        padding-bottom: 48px;
    }
}

.mod__btn {
    margin-top: 40px;
}

@media screen and (min-width: 640px) {
    .mod__btn {
        margin-top: 60px;
    }
    .mod__btn.large {
        width: 480px;
        font-size: 18px;
        font-size: 1.125rem;
    }
}

@media screen and (min-width: 1080px) {
    .mod__btn {
        margin-top: 80px;
    }
    .mod__btn.large {
        width: 580px;
        font-size: 22px;
        font-size: 1.375rem;
    }
}

.section-title {
    font-size: 26px;
    font-size: 1.625rem;
    margin-bottom: 48px;
}

@media screen and (min-width: 640px) {
    .section-title {
        font-size: 30px;
        font-size: 1.875rem;
        margin-bottom: 72px;
    }
}

@media screen and (min-width: 1080px) {
    .section-title {
        font-size: 35px;
        font-size: 2.1875rem;
        margin-bottom: 96px;
    }
}

.mv img {
    width: 100%;
}

.mv.mv-pc {
    display: none;
}

.mv.mv-sp {
    margin-bottom: 20px;
}

@media screen and (min-width: 640px) {
    .mv.mv-pc {
        display: block !important;
    }
    .mv.mv-sp {
        display: none !important;
    }
}

.page-header p {
    text-align: left;
}

@media screen and (min-width: 640px) {
    .page-header p {
        text-align: center;
    }
}

.s1 {
    text-align: center;
    padding-bottom: 80px;
}

.s1 .flex {
    display: block;
}

.s1 .item:nth-of-type(n+2) {
    margin-top: 40px;
}

.s1 .img-box {
    padding: 40px 0 20px;
}

.s1 .mod__ttl {
    font-size: 20px;
    font-size: 1.25rem;
}

.s1 .mod__ttl + p {
    margin-top: 10px;
    font-size: 13px;
    font-size: 0.8125rem;
}

@media screen and (min-width: 480px) {
    .s1 .mod__ttl + p {
        width: 80%;
        margin: 10px auto 0;
    }
}

@media screen and (min-width: 640px) {
    .s1 {
        padding-bottom: 120px;
    }
    .s1 .flex {
        display: flex;
        justify-content: center;
    }
    .s1 .item {
        flex: 0 1 50%;
        padding: 0 15px;
    }
    .s1 .item:nth-of-type(n+2) {
        margin-top: 0;
    }
    .s1 .img-box {
        padding: 60px 0 30px;
    }
    .s1 .mod__ttl {
        font-size: 24px;
        font-size: 1.5rem;
    }
    .s1 .mod__ttl + p {
        width: auto;
        font-size: 14px;
        font-size: 0.875rem;
    }
}

@media screen and (min-width: 1080px) {
    .s1 {
        padding-bottom: 160px;
    }
    .s1 .img-box {
        padding: 80px 0 40px;
    }
    .s1 .mod__ttl {
        font-size: 28px;
        font-size: 1.75rem;
    }
    .s1 .mod__ttl + p {
        margin-top: 20px;
        font-size: 15px;
        font-size: 0.9375rem;
    }
}

.s2 {
    margin-top: 0 !important;
    background-image: url(../img/common/mesh_pattern_gray.png);
    background-position: top center;
    background-repeat: repeat;
    text-align: center;
    padding: 48px 0 80px;
}

@media screen and (min-width: 640px) {
    .s2 {
        padding: 72px 0 120px;
    }
}

@media screen and (min-width: 1080px) {
    .s2 {
        padding: 96px 0 160px;
    }
}

.block {
    background: #fff;
    padding: 30px 30px 40px;
}

.block:nth-of-type(n+2) {
    margin-top: 50px;
}

.block-title {
    margin-bottom: 40px;
}

.block .top,
.block .bottom {
    display: block;
}

.block .top {
    color: #88c347;
    font-size: 18px;
    font-size: 1.125rem;
}

.block .num {
    font-size: 1.8em;
    line-height: 1;
    transform: translateY(1px);
    display: inline-block;
    margin-left: .4rem;
}

.block .bottom {
    margin-top: 10px;
    font-size: 20px;
    font-size: 1.25rem;
}

.block p {
    font-size: 13px;
    font-size: 0.8125rem;
    margin-top: 10px;
    line-height: 1.5;
}

@media screen and (min-width: 640px) {
    .block {
        padding: 45px 30px 60px;
    }
    .block:nth-of-type(n+2) {
        margin-top: 75px;
    }
    .block-title {
        margin-bottom: 60px;
    }
    .block .top {
        font-size: 20px;
        font-size: 1.25rem;
    }
    .block .bottom {
        margin-top: 20px;
        font-size: 24px;
        font-size: 1.5rem;
    }
    .block p {
        font-size: 14px;
        font-size: 0.875rem;
    }
}

@media screen and (min-width: 1080px) {
    .block {
        padding: 60px 76px 80px;
    }
    .block:nth-of-type(n+2) {
        margin-top: 100px;
    }
    .block-title {
        margin-bottom: 80px;
    }
    .block .top {
        font-size: 25px;
        font-size: 1.5625rem;
    }
    .block .bottom {
        font-size: 28px;
        font-size: 1.75rem;
    }
    .block p {
        font-size: 15px;
        font-size: 0.9375rem;
    }
}

.block-1 .flex-3col {
    display: block;
}

.block-1 .flex-3col .flex-item:nth-of-type(n+2) {
    margin-top: 30px;
}

.block-1 .flex-3col .flex-item:nth-of-type(even) {
    margin-left: 0;
}

.block-1 p {
    font-size: 13px;
    font-size: 0.8125rem;
    text-align: left;
}

@media screen and (min-width: 480px) {
    .block-1 .flex-3col {
        display: flex;
    }
    .block-1 .flex-3col .flex-item {
        flex: 0 1 47.5%;
    }
    .block-1 .flex-3col .flex-item:nth-of-type(2) {
        margin-top: 0;
    }
    .block-1 .flex-3col .flex-item:nth-of-type(n+3) {
        margin-top: 40px;
    }
    .block-1 .flex-3col .flex-item:nth-of-type(even) {
        margin-left: 5%;
    }
}

@media screen and (min-width: 640px) {
    .block-1 {
        font-size: 14px;
        font-size: 0.875rem;
    }
    .block-1 .flex-3col .flex-item {
        flex: 0 1 30%;
    }
    .block-1 .flex-3col .flex-item:nth-of-type(n+2) {
        margin-top: 0;
        margin-left: 5%;
    }
}

@media screen and (min-width: 1080px) {
    .block-1 {
        font-size: 15px;
        font-size: 0.9375rem;
    }
}

.block-2 .flex {
    display: block;
}

.block-2 .item:nth-of-type(n+2) {
    margin-top: 40px;
}

.block-2 .img-2 {
    margin-top: 40px;
}

.block-2 p {
    text-align: left;
}

.block-2 .item:nth-of-type(1) p {
    transform: translateY(-30px);
}

@media screen and (min-width: 640px) {
    .block-2 .flex {
        display: flex;
        justify-content: space-between;
    }
    .block-2 .item {
        text-align: left;
    }
    .block-2 .item:nth-of-type(1) {
        flex: 0 0 56%;
    }
    .block-2 .item:nth-of-type(2) {
        flex: 0 1 auto;
        margin-top: 0;
    }
    .block-2 .item:nth-of-type(2) .img-2 {
        margin-top: 30px;
    }
    .block-2 .mod__btn {
        margin-top: 40px;
    }
}

@media screen and (min-width: 1080px) {
    .block-2 .item:nth-of-type(1) p {
        transform: translateY(-50px);
    }
}

.block-4 {
    background-image: url(../img/feature/04.jpg);
    background-size: cover;
    background-position: center center;
}

.block-4 .mod__btn {
    margin-top: 15vw;
}

@media screen and (min-width: 1260px) {
    .block-4 .mod__btn {
        margin-top: 236px;
    }
}