@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,600,700&display=swap');

.font-montserrat {
    font-family: 'Montserrat', sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 700;
}

.mv {
    display: flex;
    width: 100%;
    height: calc(518 / 1440 * 100vw);
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-position: 100% 0;
    -webkit-background-size: 50%;
    background-size: 50%;
}
@media screen and (max-width: 767px) {
    .mv {
        height: auto;
        flex-direction: column;
        gap: calc(52 / 750 * 100vw);
    }
}
@media screen and (min-width: 1440px), print {
    .mv {
        height: 518px;
    }
}

.mv > * {
    width: 50%;
}
@media screen and (max-width: 767px) {
    .mv > * {
        width: 100%;
    }
}

.mv-text-wrapper {
    position: relative;
}
@media screen and (max-width: 767px) {
    .mv-text-wrapper {

    }
}

.mv-text-inner {
    position: absolute;
}
@media screen and (max-width: 767px) {
    .mv-text-inner {
        position: relative;
        padding: calc(36 / 750 * 100vw) calc(48 / 750 * 100vw) 0;
    }
}
@media screen and (min-width: 768px), print {
    .mv-text-inner {
        width: calc(496 / 1440 * 100vw);
    }
}
@media screen and (min-width: 1440px), print {
    .mv-text-inner {
        width: 496px;
    }
}

.mv .mv-text-inner-wrap {
    margin: 0 0 calc(40 / 1440 * 100vw);
}
@media screen and (max-width: 767px) {
    .mv .mv-text-inner-wrap {
        margin: 0;
    }
}
@media screen and (min-width: 1440px), print {
    .mv .mv-text-inner-wrap {
        margin: 0 0 40px;
    }
}

.mv .mv-ttl .mv-ttl-body {
    font-feature-settings: 'palt';
}

.mv .mv-txt {
    display: flex;
    gap: calc(24 / 1440 * 100vw);
    align-items: flex-end;
}
@media screen and (max-width: 767px) {
    .mv .mv-txt {
        flex-direction: column;
        gap: calc(16 / 750 * 100vw);
        align-items: flex-start;
    }
}
@media screen and (min-width: 1440px), print {
    .mv .mv-txt {
        gap: 24px;
    }
}

.mv-txt .mv-achievements {
    padding: 0 0 calc(7 / 1440 * 100vw);
    font-size: calc(20 / 1440 * 100vw);
    font-weight: 700;
    line-height: 1;
    border-bottom: solid 2px #C8C8C8;
}
@media screen and (max-width: 767px) {
    .mv-txt .mv-achievements {
        padding: 0 0 calc(10 / 750 * 100vw);
        font-size: calc(30 / 750 * 100vw);
        border-bottom: solid calc(3 / 750 * 100vw) #C8C8C8;
    }
}
@media screen and (min-width: 1440px), print {
    .mv-txt .mv-achievements {
        padding: 0 0 7px;
        font-size: 20px;
    }
}

.mv .mv-txt p .font-montserrat {
    padding: 0 calc(7 / 1440 * 100vw);
    font-size: calc(48 / 1440 * 100vw);
}
@media screen and (max-width: 767px) {
    .mv .mv-txt p .font-montserrat {
        padding: 0 calc(10 / 750 * 100vw);
        font-size: calc(84 / 750 * 100vw);
    }
}
@media screen and (min-width: 1440px), print {
    .mv .mv-txt p .font-montserrat {
        padding: 0 7px;
        font-size: 48px;
    }
}

.mv .mv-txt .mv-notice {
    font-size: calc(10 / 1440 * 100vw);
    line-height: 1.4em;
    font-feature-settings: 'palt';
    color: #9fa0a0;
    flex: 1;
}
@media screen and (max-width: 767px) {
    .mv .mv-txt .mv-notice {
        font-size: calc(20 / 750 * 100vw);
    }
}
@media screen and (min-width: 1440px), print {
    .mv .mv-txt .mv-notice {
        font-size: 10px;
    }
}

.mv .btn-mv {
    width: calc(393 / 1440 * 100vw);
    height: calc(88 / 1440 * 100vw);
    border-radius: calc(12 / 1440 * 100vw);
}
@media screen and (max-width: 767px) {
    .mv .btn-mv {
        position: absolute;
        left: 50%;
        width: calc(656 / 750 * 100vw);
        height: calc(128 / 750 * 100vw);
        border-radius: calc(16 / 750 * 100vw);
        transform: translateX(-50%);
        z-index: 1;
    }
}
@media screen and (min-width: 1440px), print {
    .mv .btn-mv {
        width: 393px;
        height: 88px;
        border-radius: 12px;
    }
}

.mv .btn-mv a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0 calc(32 / 1440 * 100vw);
    box-sizing: border-box;
    font-weight: 700;
    color: #fff;
    background-repeat: no-repeat;
    background-position: right calc(32 / 1440 * 100vw) top 50%;
    background-size: calc(28 / 1440 * 100vw) calc(28 / 1440 * 100vw);
}
@media screen and (max-width: 767px) {
    .mv .btn-mv a {
        padding: 0 calc(32 / 750 * 100vw);
        background-position: right calc(32 / 750 * 100vw) top 50%;
        -webkit-background-size: calc(48 / 750 * 100vw);
        background-size: calc(48 / 750 * 100vw);;
    }
}
@media screen and (min-width: 1440px), print {
    .mv .btn-mv a {
        padding: 0 32px;
        background-position: right 32px top 50%;
        background-size: 28px 28px;
    }
}

.mv .btn-mv a .line1 {
    font-size: calc(14 / 1440 * 100vw);
    font-weight: 700;
    line-height: 1;
}
@media screen and (max-width: 767px) {
    .mv .btn-mv a .line1 {
        font-size: calc(28 / 750 * 100vw);
    }
}
@media screen and (min-width: 1440px), print {
    .mv .btn-mv a .line1 {
        font-size: 14px;
    }
}

.mv .btn-mv a .line1 .font-montserrat {
    padding: 0 1px;
    font-size: calc(21 / 1440 * 100vw);
    font-weight: 600;
}
@media screen and (max-width: 767px) {
    .mv .btn-mv a .line1 .font-montserrat {
        font-size: calc(40 / 750 * 100vw);
    }
}
@media screen and (min-width: 1440px), print {
    .mv .btn-mv a .line1 .font-montserrat {
        font-size: 21px;
    }
}

.mv .btn-mv a .line2 {
    font-size: calc(22 / 1440 * 100vw);
    font-weight: 700;
    /*line-height: 1;*/
    line-height: 1.3em;
}
@media screen and (max-width: 767px) {
    .mv .btn-mv a .line2 {
        font-size: calc(44 / 750 * 100vw);
    }
}
@media screen and (min-width: 1440px), print {
    .mv .btn-mv a .line2 {
        font-size: 22px;
    }
}

.mv .mv-img-wrapper {
    position: relative;
    background-image: url("/assets/img/common/bg_product_mv.webp");
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
}
@media screen and (max-width: 767px) {
    .mv .mv-img-wrapper {
        height: calc(848 / 750 * 100vw);
        background-image: url("/assets/img/common/bg_product_mv_sp.webp");
    }
}

.mv .mv-img-wrapper > * {
    position: absolute;
}

.mv .mv-img-wrapper img {
    width: 100%;
}

.mv .mv-img-wrapper .mv-award {
    top: calc(47 / 1440 * 100vw);
    left: calc(522 / 1440 * 100vw);
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc(130 / 1440 * 100vw);
    padding: calc(16 / 1440 * 100vw);
    box-sizing: border-box;
    background-color: #fff;
    border-radius: calc(8 / 1440 * 100vw);
    box-shadow: 0 4px 24px rgba(0, 0, 0, .05);
}
@media screen and (max-width: 767px) {
    .mv .mv-img-wrapper .mv-award {
        top: calc(26 / 750 * 100vw);
        right: calc(22 / 750 * 100vw);
        left: auto;
        width: calc(218 / 750 * 100vw);
        padding: calc(20 / 750 * 100vw);
        border-radius: calc(10.78 / 750 * 100vw);
        box-shadow: 0 2.7px 16.17px rgba(0, 0, 0, .05);
    }
}
@media screen and (min-width: 1440px), print {
    .mv .mv-img-wrapper .mv-award {
        top: 47px;
        left: 522px;
        width: 130px;
        padding: 16px;
        border-radius: 8px;
    }
}

.mv .mv-img-wrapper .mv-award .mv-award-img {
    margin: 0 auto calc(16 / 1440 * 100vw);
}
@media screen and (max-width: 767px) {
    .mv .mv-img-wrapper .mv-award .mv-award-img {
        width: calc(123.44 / 750 * 100vw);
    }
}
@media screen and (min-width: 1440px), print {
    .mv .mv-img-wrapper .mv-award .mv-award-img {
        margin-bottom: 16px;
    }
}

.mv .mv-img-wrapper .mv-award .mv-award-title {
    margin: 0 0 calc(2 / 1440 * 100vw);
    font-family: 'Montserrat', sans-serif;
    font-size: calc(21.26 / 1440 * 100vw);
    font-weight: 700;
    line-height: .9em;
    text-align: center;

}
.mv .mv-img-wrapper .mv-award .mv-award-title .small {
    font-size: calc(16.64 / 1440 * 100vw);
}
@media screen and (max-width: 767px) {
    .mv .mv-img-wrapper .mv-award .mv-award-title {
        margin-bottom: calc(2 / 750 * 100vw);
        font-size: calc(36 / 750 * 100vw);
    }
    .mv .mv-img-wrapper .mv-award .mv-award-title .small {
        font-size: calc(28 / 750 * 100vw);
    }
}
@media screen and (min-width: 1440px), print {
    .mv .mv-img-wrapper .mv-award .mv-award-title {
        margin-bottom: 2px;
        font-size: 21.26px;
    }
    .mv .mv-img-wrapper .mv-award .mv-award-title .small {
        font-size: 16.64px;
    }
}

.mv .mv-img-wrapper .mv-award .mv-award-prize {
    margin: 0 0 calc(10 / 1440 * 100vw);
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: calc(11.09 / 1440 * 100vw);
    color: #C8A85B;
}
@media screen and (max-width: 767px) {
    .mv .mv-img-wrapper .mv-award .mv-award-prize {
        margin-bottom: calc(6 / 750 * 100vw);
        font-size: calc(20 / 750 * 100vw);
    }
}
@media screen and (min-width: 1440px), print {
    .mv .mv-img-wrapper .mv-award .mv-award-prize {
        margin-bottom: 10px;
        font-size: 11.09px;
    }
}

.mv .mv-img-wrapper .mv-award .mv-award-list {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: calc(2 / 1440 * 100vw);
}
@media screen and (max-width: 767px) {
    .mv .mv-img-wrapper .mv-award .mv-award-list {
        gap: calc(3 / 750 * 100vw);
    }
}
@media screen and (min-width: 1440px), print {
    .mv .mv-img-wrapper .mv-award .mv-award-list {
        gap: 2px;
    }
}

.mv .mv-img-wrapper .mv-award .mv-award-list li {
    font-size: calc(10 / 1440 * 100vw);
    line-height: 1.4em;
    font-feature-settings: 'palt';
    color: #808282;
}
@media screen and (max-width: 767px) {
    .mv .mv-img-wrapper .mv-award .mv-award-list li {
        font-size: calc(20 / 750 * 100vw);
    }
}
@media screen and (min-width: 1440px), print {
    .mv .mv-img-wrapper .mv-award .mv-award-list li {
        font-size: 10px;
    }
}