@font-face {
    font-family: "HanSans";
    src: url("../fonts/SourceHanSans-Medium.woff2") format("woff2");
    font-style: normal;
    font-weight: 500
}

@font-face {
    font-family: "HanSans";
    src: url("../fonts/SourceHanSans-Bold.woff2") format("woff2");
    font-style: normal;
    font-weight: 700
}

.top .mv {
    padding: 0 9px
}

@media (min-width: 768px) {
    .top .mv {
        padding: 0 15px
    }
}

@media screen and (min-width: 1070px) {
    .top .mv {
        padding: 0 28px
    }
}

.top .mv__body {
    height: 380px;
    position: relative
}

@media (min-width: 768px) {
    .top .mv__body {
        height: 380px
    }
}

.top .mv__body--bg {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    border-radius: 20px;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: 35% 60%;
    object-position: 35% 60%
}

@media (min-width: 768px) {
    .top .mv__body--bg {
        -o-object-position: 63% 50%;
        object-position: 63% 50%
    }
}

@media (min-width: 1024px) {
    .top .mv__body--bg {
        -o-object-position: center;
        object-position: center
    }
}

.top .mv__body--ver {
    position: absolute;
    top: 12.5px;
    right: 14.5px;
    width: 90px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100px;
    border: 1px solid #0066c3;
    color: #0066c3;
    font-weight: 400;
    font-size: 18px;
    letter-spacing: .06em
}

@media (min-width: 768px) {
    .top .mv__body--ver {
        width: 138px;
        height: 138px;
        font-size: 30px;
        position: unset
    }
}

.top .mv__body--ver.u-is-md {
    display: none
}

@media (min-width: 768px) {
    .top .mv__body--ver.u-is-md {
        display: flex
    }
}

.top .mv__body--ver.u-md-none {
    display: flex
}

@media (min-width: 768px) {
    .top .mv__body--ver.u-md-none {
        display: none
    }
}

.top .mv__cont {
    padding: 86px 22px 20px;
    max-width: 440px;
    position: relative;
    z-index: 1
}

@media (min-width: 600px) {
    .top .mv__cont {
        padding: 86px 0 20px 10vw;
    }
}

@media (min-width: 768px) {
    .top .mv__cont {
        padding: 74px 35px 20px;
        max-width: 1070px;
        margin-inline: auto
    }
}

.top .mv__cont--ttl {
    font-size: 29px;
    letter-spacing: .1em;
    line-height: 1.3103448276;
    color: #0066c3;
    font-weight: 500
}

.top .mv__cont--ttl small {
    font-size: 25px
}

@media (min-width: 768px) {
    .top .mv__cont--ttl {
        font-size: 48px
    }

    .top .mv__cont--ttl small {
        font-size: 42px
    }
}

.top .mv__cont--msg {
    font-size: 12px;
    letter-spacing: .06em;
    font-weight: 500;
    line-height: 1.8333333333;
    color: #0066c3
}

@media (min-width: 768px) {
    .top .mv__cont--msg {
        font-size: 14px
    }
}

.top .mv__cont--flex {
    margin-top: 18px;
    display: revert;
    max-width: 440px;
}

@media (min-width: 768px) {
    .top .mv__cont--flex {
        margin-top: 8px;
        display: revert;
    }
}

@media (min-width: 1024px) {
    .top .mv__cont--flex {
        margin-top: 8px;
        display: revert;
    }
}

.top .mv__nav {
    width: 100%;
    margin-top: 18px
}

@media (min-width: 768px) {
    .top .mv__nav {
        margin-top: 22px
    }
}

.top .mv__nav--flex {
    display: flex;
    gap: 7px
}

@media (min-width: 768px) {
    .top .mv__nav--flex {
        gap: 8px
    }
}

.top .mv__nav--btn {
    width: 100%;
    height: 52px;
    font-size: 13px;
    letter-spacing: .1em;
    position: relative;
    flex: 1;
    flex-direction: column;
    gap: 2px
}

.top .mv__nav--btn small {
    font-size: 11px
}

@media (min-width: 768px) {
    .top .mv__nav--btn {
        height: 57px;
        font-size: 14px
    }
}

.top .mv__nav--btn svg {
    position: absolute;
    top: 50%;
    right: 5px
}

@media (min-width: 768px) {
    .top .mv__nav--btn svg {
        right: 15px
    }
}

.top .mv__nav--sellBtn {
    margin-top: 8px;
    height: 36px;
    font-size: 14px;
    max-width: none
}

.top .mv__nav--sellBtn small {
    font-size: 11px
}

@media (min-width: 768px) {
    .top .mv__nav--sellBtn {
        margin-top: 9px;
        height: 38px;
        width: 100%;
        max-width: none
    }
}

.top .mv__nav--sellBtn svg {
    right: 5px
}

@media (min-width: 768px) {
    .top .mv__nav--sellBtn svg {
        right: 15px
    }
}

.top .pickup {
    margin-top: 40px;
}

@media (min-width: 768px) {
    .top .pickup {
        margin-top: 40px;
    }
}

@media (min-width: 768px) {
    .top .pickup__head {
        display: flex;
        align-items: flex-end;
        justify-content: space-between
    }

    .top .pickup__head .c-btn-global {
        width: 320px
    }
}

.top .pickup__list {
    margin-top: 20px
}

@media (min-width: 768px) {
    .top .pickup__list {
        margin-top: 18px
    }
}

.top .pickup__list .c-record {
    width: 320px
}

.top .pickup .c-btn-global {
    margin-top: 44px
}

@media (min-width: 768px) {
    .top .pickup .c-btn-global {
        margin-top: 0;
        margin-right: 0
    }
}

.top .about {
    padding: 60px 24px;
    background-color: #fff;
    border-radius: 20px;
    margin-top: 60px
}

@media (min-width: 768px) {
    .top .about {
        padding: 60px;
        margin-top: 80px
    }
}

.top .about--ttl {
    font-size: 25px;
    letter-spacing: .08em;
    line-height: 1;
    text-align: center;
    color: #0066c3;
    margin-top: -10px
}

.top .about--ttl small {
    font-family: "Oswald", "HanSans", sans-serif;
    font-size: 12px;
    letter-spacing: 0;
    display: inline-block;
    margin-bottom: .4em
}

@media (min-width: 768px) {
    .top .about--ttl {
        font-size: 28px
    }

    .top .about--ttl small {
        font-size: 14px;
        letter-spacing: .02em
    }
}

.top .about__lead {
    font-size: 14px;
    letter-spacing: .04em;
    line-height: 1.9285714286;
    text-align: justify;
    margin-top: 14px
}

@media (min-width: 768px) {
    .top .about__lead {
        font-size: 14px;
        line-height: 1.5714285714;
        text-align: center;
        margin-top: 14px
    }
}

.top .about__list {
    display: flex;
    flex-direction: column;
    gap: 26px;
    margin-top: 44px;
    max-width: 450px;
    margin-inline: auto
}

@media (min-width: 768px) {
    .top .about__list {
        flex-direction: row;
        gap: 20px;
        margin-top: 52px;
        max-width: unset
    }
}

.top .about__risk {
    text-align: center
}

.top .about__risk--head {
    display: flex;
    gap: 15px
}

.top .about__risk--num {
    width: 62px;
    height: 62px
}

.top .about__risk--ttl {
    display: flex;
    align-items: center;
    gap: 15px;
    text-align: left;
    font-size: 18px;
    letter-spacing: .04em;
    line-height: 1.5555555556;
    color: #0066c3;
    justify-content: center
}

.top .about__risk--ttl img {
    width: 62px
}

@media (min-width: 600px) {
    .top .about__risk--ttl {
        flex-direction: column;
        gap: 10px
    }

    .top .about__risk--ttl .half-br {
        display: none
    }
}

@media (min-width: 768px) {
    .top .about__risk--ttl {
        justify-self: flex-start;
        text-align: center;
        font-size: 16px
    }

    .top .about__risk--ttl .half-br {
        display: inline
    }
}

@media (min-width: 1024px) {
    .top .about__risk--ttl {
        text-align: left;
        flex-direction: row;
        gap: 15px;
        font-size: 18px
    }
}

.top .about__risk--img {
    margin-top: 16px;
    display: inline-block;
    max-width: 350px;
    width: 79.8561151079%;
    margin-inline: auto
}

@media (min-width: 768px) {
    .top .about__risk--img {
        margin-top: 32px;
        max-width: unset;
        width: 100%
    }
}

.top .fix {
    padding: 60px 24px;
    background-color: #fff;
    border-radius: 20px;
    margin-top: 17px
}

@media (min-width: 768px) {
    .top .fix {
        padding: 60px;
        margin-top: 21px
    }
}

.top .fix--ttl {
    font-size: 25px;
    letter-spacing: .08em;
    line-height: 1.375;
    text-align: center;
    color: #0066c3
}

.top .fix--ttl small {
    font-family: "Oswald", "HanSans", sans-serif;
    font-size: 12px;
    letter-spacing: 0;
    display: inline-block;
    margin-bottom: .4em;
    line-height: 1
}

.top .fix--ttl span {
    display: block;
    margin-top: -0.2em
}

@media (min-width: 768px) {
    .top .fix--ttl {
        font-size: 28px
    }

    .top .fix--ttl small {
        font-size: 14px;
        letter-spacing: .02em
    }
}

.top .fix--thumb {
    width: 68.2926829268%;
    display: block;
    margin-inline: auto;
    margin-top: 40px;
    max-width: 300px
}

@media (min-width: 768px) {
    .top .fix--thumb {
        max-width: unset;
        width: 71.4285714286%
    }
}

.top .fix--lead {
    margin-top: 32px;
    font-size: 14px;
    line-height: 1.9285714286;
    text-align: justify
}

@media (min-width: 768px) {
    .top .fix--lead {
        line-height: 3;
        text-align: center
    }
}

.top .fix-service--figure {
    margin-top: 32px;
    margin-inline: auto;
    max-width: 400px
}

@media (min-width: 768px) {
    .top .fix-service--figure {
        max-width: 100%;
        margin-top: 35px
    }
}

.top .fix-service--ttl {
    width: 223px;
    text-align: center;
    margin-inline: auto;
    display: block;
    margin-top: 60px
}

@media (min-width: 768px) {
    .top .fix-service--ttl {
        width: 320px;
        margin-top: 75px
    }
}

.top .fix-service--lead {
    font-size: 14px;
    letter-spacing: .04em;
    margin-top: 24px;
    line-height: 1.9285714286
}

.top .fix-service--lead span {
    letter-spacing: 0
}

@media (min-width: 768px) {
    .top .fix-service--lead {
        margin-top: 27px;
        text-align: center;
        line-height: 2
    }
}

.top .fix .c-btn-global {
    margin-top: 44px
}

.top .contents {
    margin-top: 60px
}

@media (min-width: 768px) {
    .top .contents {
        margin-top: 80px
    }
}

@media (min-width: 768px) {
    .top .contents__head {
        display: flex;
        align-items: flex-end;
        justify-content: space-between
    }

    .top .contents__head .c-btn-global {
        width: 320px
    }
}

.top .contents__list {
    margin-top: 20px
}

@media (min-width: 768px) {
    .top .contents__list {
        margin-top: 36px
    }
}

.top .contents__list .swiper-button-next, .top .contents__list .swiper-button-prev {
    top: 94px
}

@media (min-width: 768px) {
    .top .contents__list .swiper-button-next, .top .contents__list .swiper-button-prev {
        top: 98px
    }
}

.top .contents__item {
    width: 290px
}

@media (min-width: 768px) {
    .top .contents__item {
        width: 310px
    }
}

.top .contents__item .c-article {
    width: 290px
}

@media (min-width: 768px) {
    .top .contents__item .c-article {
        width: 310px
    }
}

.top .contents .c-btn-global {
    margin-top: 60px
}

@media (min-width: 768px) {
    .top .contents .c-btn-global {
        margin-top: 0;
        margin-right: 0
    }
}

._pharmacy.top .mv__body--bg {
    -o-object-position: 35% 60%;
    object-position: 35% 60%
}

@media (min-width: 768px) {
    ._pharmacy.top .mv__body--bg {
        -o-object-position: 63% 50%;
        object-position: 63% 50%
    }
}

@media (min-width: 1280px) {
    ._pharmacy.top .mv__body--bg {
        -o-object-position: center;
        object-position: center
    }
}

._pharmacy.top .mv__body--ver {
    border: 1px solid #00877f;
    color: #00877f
}

._pharmacy.top .mv__cont--ttl {
    color: #00877f
}

._pharmacy.top .mv__cont--msg {
    color: #00877f
}

@media (min-width: 768px) {
    ._pharmacy.top .mv__cont--msg {
        font-size: 14px
    }
}

._pharmacy.top .about--ttl {
    color: #00877f
}

._pharmacy.top .about__risk--ttl {
    color: #00877f;
    font-size: 16px;
    width: 280px;
    margin-inline: auto;
    justify-content: flex-start
}

@media (min-width: 600px) {
    ._pharmacy.top .about__risk--ttl {
        width: auto;
        justify-content: center
    }
}

@media (min-width: 768px) {
    ._pharmacy.top .about__risk--ttl {
        font-size: 15px;
        letter-spacing: 0
    }
}

@media (min-width: 1280px) {
    ._pharmacy.top .about__risk--ttl {
        font-size: 16px;
        letter-spacing: .04em
    }
}

._pharmacy.top .fix--ttl {
    color: #00877f
}



.top .mv__cont--freeicon {
    position: absolute;
    left: auto;
    top: 20px;
    width: 168px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    border: 1px solid #0066c3;
    color: #0066c3;
    font-weight: 400;
    font-size: 18px;
    letter-spacing: .06em;
    background-color: white;
}

@media (min-width: 768px) {
    .top .mv__cont--freeicon {
        left: auto;
    }
}

@media (min-width: 600px) {
    .top .mv__cont--freeicon {
        left: auto;
    }
}

.top .mv__cont--freetext {
    position: absolute;
    left: auto;
    top: 56px;
    margin-left: 0px;
    color: #0066c3;
    font-size: 11px;
}

@media (min-width: 768px) {
    .top .mv__cont--freetext {
        left: auto;
        top: 28px;
        margin-left: 178px;
    }
}

._pharmacy.top .mv__cont--freeicon {
    border: 1px solid #00877f;
    color: #00877f;
}
._pharmacy.top .mv__cont--freetext {
    color: #00877f;
}