.sp-only {
    display: none
}

@media(max-width: 767px) {
    .sp-only {
        display:block
    }
}

.pc-only {
    display: block
}

@media(max-width: 767px) {
    .pc-only {
        display:none
    }
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0
}

.l-mv {
    min-height: 56rem;
    min-width: 1100px;
    margin: 0;
    padding: 4rem 0;
    background: url(img/bg_mv.png) 90% center no-repeat;
    background-size: 600px auto;
    position: relative
}

.l-mv::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url(img/mv_bg.png) top center no-repeat #f7fafe;
    z-index: -1;
    background-size: auto 100%
}

@media screen and (max-width: 480px) {
    .l-mv::before {
        background: url(img/mv_bg_sp.png) top center no-repeat #f7fafe;
        background-size: inherit;
    }
}

.l-mv .l-mv-check {
    position: absolute;
    right: 2rem;
    bottom: -100px;
    color: #fff;
    font-size: 2.1rem;
    font-weight: bold;
    font-family: "游明朝",YuMincho,"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif;
    text-align: center;
    line-height: 1.2
}

.l-mv .l-mv-check a {
    width: 205px;
    height: 195px;
    padding: 7rem 3.5rem 2.5rem;
    display: block;
    color: #fff;
    text-decoration: none;
    background: url(img/icon_check.svg) no-repeat center center;
    background-size: 100%
}

.l-mv .l-mv-check a:hover {
    opacity: .7
}

.l-mv .l-mv-check p {
    padding-bottom: 2.3rem;
    background: url(img/arrow01_white.svg) no-repeat center bottom;
    background-size: 10px;
    margin: 0
}

.l-mv .l-mv-wrapper {
    max-width: 1000px;
    margin: 0 auto
}

.l-mv .l-mv-box {
    width: 32vw;
    max-width: 1000px;
    margin: 0 auto 0 0;
    color: #333
}

@media screen and (max-width: 480px) {
    .l-mv .l-mv-box p:not([class]) {
        position:relative;
        /* background: hsla(0,0%,100%,.8); */
        padding: .5rem
    }
}

.l-mv .l-mv-logo {
    max-width: 34rem;
    height: auto
}

.l-mv .l-mv-title {
    margin: 2rem 0;
    font-weight: bold;
    font-size: 3.2rem;
    color: #000;
    line-height: 1.4
}

.l-mv .l-mv-title span {
    font-size: 3.6rem;
    color: #24a298;
    background: none
}

.l-mv p.l-mv-title {
    margin: 2rem auto 2rem 0
}

.l-mv .btn-internal a {
    max-width: 40rem;
    width: 100%
}

.l-mv .btn-internal a::after {
    background: url(img/arrow01_white.svg) no-repeat right center;
    transform: translateY(-50%) rotate(90deg);
    background-size: 96%
}

@media screen and (max-width: 480px) {
    .l-mv {
        min-height:inherit;
        min-width: inherit;
        margin-bottom: 2rem;
        padding: 0;
        background: none;
        position: relative
    }

    .l-mv p {
        padding: 0 2rem;
        color: #333
    }

    .l-mv .l-mv-check {
        display: none
    }

    .l-mv .l-mv-wrapper {
        width: 100%
    }

    .l-mv .l-mv-logo {
        width: 45%;
        background: none;
        text-align: center;
        margin: 0 auto;
        padding-top: 1rem
    }

    .l-mv .l-mv-logo img {
        max-width: inherit;
        width: 100%;
        height: auto
    }

    .l-mv .l-mv-box {
        width: 100%;
        margin: 0 auto;
        padding-bottom: 2rem
    }

    .l-mv .l-mv-box p {
        margin: 0
    }

    .l-mv .l-mv-box p:not([class]) {
        padding: 1.5rem
    }

    .l-mv .l-mv-box p:not([class])::before {
        left: 60%;
        top: 90%
    }

    .l-mv .l-mv-title {
        width: 100%;
        margin: 1rem 0 2rem 0;
        padding: 1px 5% 70% 5%;
        background: url(img/bg_mv.png) center top 7rem no-repeat;
        background-size: 80% auto;
        font-size: 2rem;
        text-align: center
    }

    .l-mv .l-mv-title span {
        font-size: 2.4rem
    }

    .l-main-area p.btn-internal {
        margin: 2rem auto
    }
}