/* ================================
common
================================= */
:root {


    --primary--background: var(--BG-main, #F0F2F2);
    --primary--background: var(--BG-b, #DAE1E2);
    --primary--background_blue: var(--BG-blue, #E7ECED);
    --primary--background_sub: var(--vg, #191B28);
    --primary--txt_gold: var(--txt_gold, #C2A76B);
    --primary--txt_main: var(--txt_normal, #191B28);
    --contentWith: 90%;
    --contentPadding: 4%;
}

html {
    font-size: 62.5%;
}

body {
    margin: 0;
    color: var(--txt_normal, #191B28);
    font-family: "Zen Kaku Gothic New";
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    color: var(--txt_main, #191b28);
    background-color: var(--BG-main, #F0F2F2);
    line-height: 1.7;
    font-size: 1.7rem;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

/* 白SP見出し */
title {
    color: var(--B, #151622);
    font-family: YuMincho;
    font-size: 2.4rem;
    font-style: normal;
    font-weight: 500;
    line-height: 170%;
    font-size: 1.6rem;
    font-weight: 400;
}

/* レイアウト共通 */
.l-inner {
    width: min(1200px, 100% - 32px);
    margin-inline: auto;
}

/* ヘッダー */
.l-header {
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(8px);
    background: #c2cace;
    padding: 14px 0;
    box-sizing: border-box;
}

.header__logo {
    max-width: 140px;
    height: auto;
    margin-left: clamp(16px, 2.8vw, 44px);
}

/* Mobile: reduce header height and logo size */
@media (max-width: 480px) {
    .l-header {
        padding: 6px 0;
        background: transparent;
    }

    .header__logo {
        max-width: 100px;
        margin-left: 12px;
    }

    .l-header .header__logo img {
        display: block;
        width: 100%;
        height: auto;
    }
}

/* btn */
.btn {
    display: flex;
    width: 202px;
    height: 20px;
    padding: 16px 24px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 3px;
    background: var(--BTN, linear-gradient(90deg, #A73737 0%, #7A2828 100%));
    color: #FFF;
    text-align: center;
    font-family: YuMincho;
    font-size: 1.6rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-decoration: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    border: none;
}

.card__btn {
    display: flex;
    width: 202px;
    height: 20px;
    padding: 16px 24px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 3px;
    background: var(--BTN, linear-gradient(90deg, #A73737 0%, #7A2828 100%));
    color: #FFF;
    text-align: center;
    font-family: YuMincho;
    font-size: 1.6rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-decoration: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    border: none;
}

.btn-wrap {
    align-items: center;
}

.btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -150%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.9) 50%,
            rgba(255, 255, 255, 0) 100%);
    transform: skewX(-25deg);
    pointer-events: none;
    animation: btn-shine 3s linear infinite;
}


.card__btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -150%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.9) 50%,
            rgba(255, 255, 255, 0) 100%);
    transform: skewX(-25deg);
    pointer-events: none;
    animation: btn-shine 3s linear infinite;
}

@keyframes btn-shine {
    0% {
        left: -150%;
        opacity: 0;
    }

    20% {
        left: 150%;
        opacity: 1;
    }

    100% {
        left: 150%;
        opacity: 0;
    }
}


.btn,
.card__btn:hover,
.card__btn-carousel:hover {
    opacity: 0.9;
}

/* main visual */
.main {
    position: relative;
    max-width: 1280px;
    margin: 0 auto;
}

.main picture {
    display: block;
}

.main picture img {
    width: 100%;
    display: block;
}

.main>a.btn.btn--primary {
    position: absolute;
    left: clamp(28px, 13.5vw, 170px);
    bottom: min(3.75vw, 96px);
    display: flex;
    width: clamp(343px, 26.796875vw, 686px);
    height: clamp(48px, 3.75vw, 96px);
    padding: clamp(16px, 1.25vw, 32px) clamp(24px, 1.875vw, 48px);
    justify-content: center;
    align-items: center;
    gap: clamp(10px, 0.78125vw, 20px);
    margin: 0;
    font-size: 1.6rem;
    letter-spacing: 0.08em;
    font-weight: 500;
}


/* ざっくり共通 */
.inner {
    width: min(1100px, 92%);
    margin: 0 auto;
}

.sec {
    padding: 42px 0 0 0;
}

.sec__title,
.point__title,
.usecase__titles {
    color: var(--B, #151622);
    font-family: YuMincho;
    font-size: 2.4rem;
    font-style: normal;
    font-weight: 500;
}

.sec__title {
    text-align: center;
    margin-top: 48px;
}

.last__title {
    color: var(--txt, #C2A76B);
    text-align: center;
    font-family: YuMincho;
    font-size: 4rem;
    font-style: normal;
    font-weight: 500;
    background-color: var(--BG-blue, #E7ECED);
    margin: 0;
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}

.last__line {
    display: block;
    opacity: 0;
    transform: translateY(10px);
}

.last__title.is-visible .last__line {
    animation: last-line-fade 1.2s ease forwards;
}

.last__title.is-visible .last__line:nth-of-type(2) {
    animation-delay: 0.5s;
}

.last__title.is-visible .last__line:nth-of-type(3) {
    animation-delay: 1s;
}

@keyframes last-line-fade {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 767px) {
    .last__title {
        font-size: 2.4rem;
    }
}

.sec__title_eng {
    text-align: center;
    font-family: "Cormorant Garamond",
        "EB Garamond",
        "Cormorant",
        "Libre Baskerville",
        "Playfair Display",
        Georgia,
        serif;
    font-size: 2.4rem;
    font-style: normal;
    font-weight: 300;
    position: relative;
    padding-bottom: 5px;
}

.sec__title_eng::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 10px;
    height: 2px;
    background: var(--txt, #C2A76B);
    border-radius: 999px;
}

.sec.sec-usecase .sec__title,
.sec.sec-step .sec__title,
#sec09 .sec__title {
    position: relative;
    padding-bottom: 5px;
}

.sec.sec-usecase .sec__title,
.sec.sec-step .sec__title,
.sec.sec-lineup .sec__title_eng {
    margin-bottom: 15px;
}

.sec.sec-usecase .sec__title::after,
.sec.sec-step .sec__title::after,
#sec09 .sec__title::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 10px;
    height: 2px;
    background: var(--txt, #C2A76B);
    border-radius: 999px;
}


.number__eng {
    font-family: "Cormorant Garamond",
        "EB Garamond",
        "Cormorant",
        "Libre Baskerville",
        "Playfair Display",
        Georgia,
        serif;
    font-size: 1.6rem;
}

.sec__subtitle {
    color: var(--B, #151622);
    text-align: center;
    font-family: YuMincho;
    font-size: 2.4rem;
    font-style: normal;
    font-weight: 500;
}

.sec.sec-lineup .sec__subtitle {
    color: #F0F2F2;
}

/* sec-recommend */
.sec.sec-recommend .recommend__inner {
    background-image: url("../images/sec-recommend__spbg.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 48px 0;
    width: 100%;
}

@media (min-width: 768px) {
    .sec.sec-recommend {
        position: relative;
        z-index: 0;
        overflow: hidden;

        width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        min-height: min(calc(100vw * 0.55859375), 1430px);
        padding: 0 0 clamp(48px, 4vw, 92px);
    }



    .sec.sec-recommend::before {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: min(100vw, 2560px);
        height: 100%;
        background-image: url("../images/osusume-bg.png");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
        z-index: -1;
    }

    .sec.sec-recommend::after {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(240, 242, 242, 0.62);
        z-index: 0;
    }

    .sec.sec-recommend .sec__title {
        position: relative;
        z-index: 1;
        width: min(100vw, 2560px);
        margin: 0 auto;
        text-align: left;
        padding-top: clamp(108px, 9vw, 218px);
        /* checklist画像内のチェックマーク開始位置に合わせる */
        padding-left: calc(min(10vw, 256px) + 56px);
        font-size: 4rem;
        line-height: 1.7;
    }

    .sec.sec-recommend .recommend__inner {
        position: relative;
        z-index: 1;
        width: min(100vw, 2560px);
        margin: 0 auto;
        background: transparent;
        padding: clamp(20px, 2vw, 42px) 0 0;
        display: flex;
        justify-content: flex-start;
    }

    .sec.sec-recommend .checklist {
        width: min(calc(100vw * 0.40625), 1040px);
        max-width: 1040px;
        height: auto;
        box-sizing: border-box;
        margin: 0;
        margin-left: min(10vw, 256px);
        margin-right: auto;
        display: block;
    }
}

/* 768px only: keep other breakpoints unchanged */
@media (width: 768px) {
    .sec.sec-recommend .sec__title {
        padding-left: min(10vw, 256px);
    }

    .sec.sec-recommend .checklist {
        width: min(calc(100vw * 0.40625 * 1.1), 1040px);
    }
}

@media (width: 1024px) {
    .sec.sec-recommend .sec__title {
        padding-left: min(10vw, 256px);
    }

    .sec.sec-recommend .checklist {
        width: min(calc(100vw * 0.40625 * 1.15), 1040px);
    }
}

@media (width: 1440px) {
    .sec.sec-recommend .sec__title {
        padding-left: calc(min(10vw, 256px) + 56px);
    }

    .sec.sec-recommend .checklist {
        width: min(calc(100vw * 0.40625 * 1.15), 1040px);
    }
}

@media (min-width: 1441px) {
    .sec.sec-recommend .sec__title {
        /* checklist画像のチェックマーク開始位置に合わせる（画像幅連動） */
        padding-left: calc(min(10vw, 256px) + (min(calc(100vw * 0.40625 * 1.15), 1040px) * 0.055));
    }

    .sec.sec-recommend .checklist {
        width: min(calc(100vw * 0.40625 * 1.15), 1040px);
    }
}

/* sec-usecase */
.sec.sec-usecase {
    --usecase-notch-h: clamp(56px, 9vw, 170px);
    position: relative;
    background-image: url("../images/user-casebg-sp.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    clip-path: polygon(0 0, 50% var(--usecase-notch-h), 100% 0, 100% 100%, 0 100%);
    padding-top: calc(42px + var(--usecase-notch-h));
}

.sec.sec-usecase .inner {
    width: 90%;
    margin: 0 auto;

}

.usecase__title {
    margin-top: 30px;
    text-align: center;
}

@media (min-width: 768px) {
    .usecase__title {
        font-size: 3.2rem;
        margin: 0 0 clamp(20px, 2.2vw, 36px);
    }

    .usecase__text,
    .usecase__name {
        font-size: 2rem;
    }

    .sec.sec-usecase .usecase {
        display: grid;
        grid-template-columns: minmax(0, 1fr) clamp(240px, 24vw, 360px);
        column-gap: clamp(24px, 3vw, 56px);
        row-gap: clamp(16px, 1.8vw, 28px);
        align-items: start;
        margin-top: clamp(48px, 5vw, 88px);
    }

    .sec.sec-usecase .usecase__title {
        grid-column: 1 / -1;
    }

    .sec.sec-usecase .usecase>.usecase__media:first-of-type {
        grid-column: 1 / -1;
        margin: 0 auto;
        width: min(53.671875vw, 100%);
    }

    .sec.sec-usecase .usecase>.usecase__media:first-of-type img {
        width: 100%;
        height: auto;
        display: block;
    }

    .sec.sec-usecase .usecase__text {
        grid-column: 1 / -1;
        text-align: left;
        margin: 35px 0 0;
        width: min(60.390625vw, 100%);
        max-width: 773px;
        justify-self: center;
        position: relative;
        z-index: 2;
    }

    .sec.sec-usecase .usecase__name {
        grid-column: 1 / -1;
        text-align: right;
        margin: 0;
        width: min(60.390625vw, 100%);
        max-width: 773px;
        justify-self: center;
        position: relative;
        z-index: 2;
    }

    .sec.sec-usecase .usecase>.usecase__media:last-of-type {
        grid-column: 2;
        grid-row: 3 / span 2;
        margin: 0;
        align-self: end;
    }

    .sec.sec-usecase .usecase>.usecase__media:last-of-type img {
        width: 100%;
        height: auto;
        display: block;
    }

    .sec.sec-usecase .usecase:nth-of-type(2) {
        grid-template-columns: clamp(240px, 24vw, 360px) minmax(0, 1fr);
        position: relative;
        padding-bottom: clamp(120px, 12vw, 190px);
    }


    .sec.sec-usecase .usecase:nth-of-type(2)>.usecase__media:last-of-type {
        position: absolute;
        left: calc(50% - 50vw);
        bottom: 100px;
        width: clamp(260px, 33vw, 430px);
        margin: 0;
        z-index: 1;
        grid-column: auto;
        grid-row: auto;
    }

    .sec.sec-usecase .usecase:nth-of-type(2) .usecase__name {
        text-align: center;
    }

    .sec.sec-usecase .usecase:nth-of-type(1),
    .sec.sec-usecase .usecase:nth-of-type(3) {
        position: relative;
        padding-bottom: clamp(120px, 12vw, 190px);
    }



    .sec.sec-usecase .usecase:nth-of-type(1)>.usecase__media:last-of-type,
    .sec.sec-usecase .usecase:nth-of-type(3)>.usecase__media:last-of-type {
        position: absolute;
        right: calc(50% - 50vw);
        bottom: 100px;
        width: clamp(260px, 33vw, 430px);
        margin: 0;
        z-index: 1;
        grid-column: auto;
        grid-row: auto;
    }

    .sec.sec-usecase .usecase:nth-of-type(3)>.usecase__media:last-of-type {
        bottom: 100px;
    }
}



@media (max-width: 480px) {
    .sec.sec-usecase .usecase>.usecase__media:first-of-type img {
        margin-inline: auto;
    }
}

@media (min-width: 1024px) {
    .sec.sec-usecase .usecase>.usecase__media:last-of-type .usecase__img--mb50 {
        width: 80%;
        height: auto;
        margin-left: auto;
        margin-right: 0;
        display: block;
    }
}

/* checklist image */
.checklist {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
}

.checklist picture {
    display: block;
    width: 100%;
}

.checklist img {
    display: block;
    width: 100%;
    height: auto;
}

/* sec-point*/
.sec.sec-points,
.l-footer {
    background-color: var(--BG-blue, #E7ECED);
}

.point__title {
    margin-top: 0;
}

.number__eng {
    margin: 0;
}

.point__01,
.point__02,
.point__03 {
    margin-top: 30px;
}

.point__01 {
    margin-top: 41px;
}

.point__02 {
    background: var(--BG-main, #F0F2F2);
}

.point__03 {
    margin-bottom: 61px;
}

.point03__mieman {
    background-image: url("../images/mieman-img.png");
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto;
    padding: 16px;
}

/* point01 media switch */
.point__01 .point01__img--left,
.point__01 .point01__img--right {
    display: none;
}

.point__02 .point02__img--left,
.point__02 .point02__img--right-top {
    display: none;
}

.point__02 .point02__img--right-bottom,
.point__02 .point02__img--sp {
    display: block;
    width: 100%;
    height: auto;
}

.point__01 .point01__img--sp {
    display: block;
    width: 100%;
    height: auto;
}

.point__03 .point__media picture {
    display: block;
    width: 100%;
    line-height: 0;
}

.point__03 .point__media img {
    display: block;
    width: 100%;
    height: auto;
}

@media (min-width: 768px) {
    .sec.sec-lineup .inner>h3.sec__subtitle:nth-of-type(2) {
        margin-top: 90px;
    }

    .sec.sec-lineup .sec__title_eng {
        color: var(--sec-03txt, #FFF);
        text-align: center;
        font-family: "Cormorant Garamond";
        font-size: 3.6rem;
        font-style: normal;
        font-weight: 300;
        line-height: 1.7;
    }

    .sec.sec-points .number__eng {
        color: #353954;
        font-family: "Cormorant Garamond";
        font-size: 3.6rem;
        font-weight: 300;
        line-height: 1.7;
    }

    .sec.sec-points .point__title {
        color: var(--B, #151622);
        font-family: "Zen Kaku Gothic New";
        font-size: 3.2rem;
        font-style: normal;
        font-weight: 400;
        line-height: 1.7;
    }

    .sec.sec-points .point__text {
        font-size: 2rem;
    }

    .point__03 {
        margin-top: 70px;
    }

    .point__01 {
        display: grid;
        width: min(1280px, 100%);
        margin-inline: auto;
        grid-template-columns: minmax(280px, 560px) minmax(280px, 620px);
        justify-content: space-between;
        column-gap: clamp(24px, 4vw, 110px);
        align-items: start;
        padding-block: clamp(65px, 5vw, 110px);
        position: relative;
    }

    .point__01 .point01__copy {
        grid-column: 1;
        max-width: 560px;
        width: 100%;
        position: relative;
        align-self: start;
    }

    .point__01 .number__eng,
    .point__01 .point__title,
    .point__01 .point__text {
        position: relative;
        z-index: 1;
    }

    .point__01 .point__media {
        display: contents;
    }

    .point__01 .point01__img--sp {
        display: none;
    }

    .point__01 .point01__img--left {
        display: none;
        position: absolute;
        left: clamp(0px, 1.8vw, 24px);
        top: 0;
        bottom: auto;
        width: clamp(340px, 44vw, 620px);
        max-width: none;
        height: auto;
        opacity: 0.3;
        z-index: 0;
        pointer-events: none;
        transform: none;
    }

    .point__01 .point01__img--right {
        display: block;
        grid-column: 2;
        grid-row: 1;
        max-width: 620px;
        width: 100%;
        height: auto;
        align-self: start;
        justify-self: end;
        margin-top: 0;
    }

    .point__02 {
        display: grid;
        width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        grid-template-columns: minmax(320px, 520px) minmax(320px, 620px);
        justify-content: space-between;
        column-gap: clamp(24px, 4vw, 100px);
        align-items: start;
        padding-top: 0;
        padding-bottom: 70px;
    }

    .point__02 .point02__img--left {
        display: block;
        grid-column: 1;
        grid-row: 1 / span 5;
        width: 100%;
        height: auto;
        max-width: 520px;
        align-self: center;
        margin-top: 89px;
    }

    .point__02 .point02__img--right-top {
        display: block;
        grid-column: 2;
        grid-row: 1;
        width: 100%;
        height: auto;
        max-width: 360px;
        justify-self: end;
        margin-top: 89px;
        margin-bottom: 24px;
        margin-right: 0;
    }

    .point__02 .number__eng,
    .point__02 .point__title,
    .point__02 .point__text,
    .point__02 .point__media {
        grid-column: 2;
        width: 100%;
        max-width: 360px;
        justify-self: end;
        margin-right: 16px;
    }

    .point__02 .point02__img--sp {
        display: none;
    }

    .point__02 .point02__img--right-bottom {
        width: 100%;
        max-width: 100%;
        margin-top: 16px;
        justify-self: start;
    }

    .point__03>.number__eng,
    .point__03>.point__title,
    .point__03>.point__text,
    .point__03>.point03__mieman,
    .point__03>p:not(.number__eng):not(.point__text) {
        width: 550px;
        max-width: 550px;
        margin-left: 0;
        margin-right: auto;
    }

    .point__03 {
        position: relative;
        display: grid;
        grid-template-columns: 347px minmax(0, 1fr);
        column-gap: 20px;
        align-items: end;
    }

    .point__03::before {
        content: "";
        position: absolute;
        top: 58px;
        left: calc(50% - 50vw);
        width: min(48vw, 640px);
        aspect-ratio: 1268 / 1062;
        background-image: url("../images/point03-bgimg.png");
        background-repeat: no-repeat;
        background-position: left center;
        background-size: contain;
        pointer-events: none;
        z-index: 0;
    }

    .point__03>.number__eng,
    .point__03>.point__title,
    .point__03>.point__text,
    .point__03>.point03__mieman,
    .point__03>p:not(.number__eng):not(.point__text) {
        position: relative;
        z-index: 1;
    }

    .point__03>p:last-of-type {
        margin-bottom: 0;
    }

    .point__03 .point__media {
        grid-column: 2;
        grid-row: 1 / span 5;
        margin: 0;
        justify-self: start;
        align-self: stretch;
        display: flex;
        align-items: flex-end;
        position: relative;
        z-index: 1;
    }

    .point__03 .point__media picture,
    .point__03 .point__media img {
        display: block;
    }
}

@media (min-width: 768px) and (max-width: 768px) {
    .point__01 .point01__img--right {
        transform: translateY(16.8rem);
    }
}

@media (max-width: 767px) {
    .sec.sec-lineup .inner>h3.sec__subtitle:nth-of-type(2) {
        margin-top: 70px;
    }

    .point__01 {
        position: relative;
        z-index: 2;
    }

    .point__02 {
        position: relative;
        z-index: 1;
        width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        margin-top: -70px;
        padding-top: 100px;
    }

    .point__02>.number__eng,
    .point__02>.point__title,
    .point__02>.point__text {
        width: min(1100px, 92%);
        margin-left: auto;
        margin-right: auto;
    }

    .point__02 .point02__img--right-bottom {
        width: min(1100px, 92%);
        margin-left: auto;
        margin-right: auto;
    }

    .point__03 {
        position: relative;
    }

    .point__03::before {
        content: "";
        position: absolute;
        top: 6px;
        right: 8px;
        width: min(40vw, 150px);
        aspect-ratio: 150 / 128;
        background-image: url("../images/point03-spbgimg.png");
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        pointer-events: none;
        z-index: 0;
    }

    .point__03>* {
        position: relative;
        z-index: 1;
    }
}

@media (min-width: 1280px) {
    .point__01 {
        column-gap: 80px;
    }

    .point__01 .point__text {
        width: 42.96875vw;
        max-width: 100%;
    }

    .point__01 .point01__img--left {
        width: 570px;
        max-width: 570px;
    }

    .point__01 .point01__img--right {
        width: 570px;
        max-width: 570px;
    }

    .point__02 .point02__img--right-top {
        width: 635px;
        max-width: 635px;
    }

    .point__02 .point02__img--right-bottom {
        width: 100%;
        max-width: 100%;
    }

    .point__02 .point02__img--left {
        width: 600px;
        max-width: 600px;
    }

    .point__02 {
        width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        grid-template-columns: 600px minmax(0, 1fr);
        column-gap: 40px;
    }

    .point__02 .point02__img--left {
        justify-self: start;
    }

    .point__02 .point02__img--right-top {
        justify-self: end;
        margin-right: 0;
    }

    .point__02 .number__eng,
    .point__02 .point__title,
    .point__02 .point__text,
    .point__02 .point__media {
        width: 635px;
        max-width: 635px;
        justify-self: end;
    }

    .point__03 .point__media {
        width: 42.96875vw;
        max-width: none;
        margin-left: 0;
        margin-right: auto;
    }

    .point__03 {
        column-gap: 40px;
    }

    .point__03 .point__media img {
        display: block;
    }
}

@media (width: 1440px) {
    .point__01 .point01__img--right {
        transform: translateX(15px);
    }

    .point__02 .point02__img--left {
        margin-left: 0;
        justify-self: start;
    }

    .point__02 .point02__img--right-top {
        margin-right: 0;
        justify-self: end;
    }

    .point__03 .point__media {
        transform: translateX(49px);
    }
}

@media (min-width: 1024px) and (max-width: 1440px) {
    .point__03 {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: 40px;
        align-items: start;
    }

    .point__03>.number__eng,
    .point__03>.point__title,
    .point__03>.point__text,
    .point__03>.point03__mieman,
    .point__03>p:not(.number__eng):not(.point__text),
    .point__03 .point__media {
        width: 100%;
        max-width: none;
    }

    .point__03 .point__media {
        justify-self: stretch;
    }

    .point__03 .point__media picture,
    .point__03 .point__media img {
        width: 100%;
        height: auto;
    }
}

@media (min-width: 1441px) {
    .point__03 {
        grid-template-columns: 550px minmax(0, 1fr);
        column-gap: 40px;
        align-items: start;
    }

    .point__03>.number__eng,
    .point__03>.point__title,
    .point__03>.point__text,
    .point__03>.point03__mieman,
    .point__03>p:not(.number__eng):not(.point__text) {
        width: 100%;
        max-width: 550px;
    }

    .point__03 .point__media {
        width: 100%;
        min-width: 0;
        justify-self: start;
    }

    .point__03 .point__media picture,
    .point__03 .point__media img {
        width: 100%;
        height: auto;
    }
}

/*cta-banner*/
.cta-banner {
    background-color: transparent;
    padding: 40px 0;
    text-align: center;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.cta-banner picture,
.cta-banner picture img {
    display: block;
    width: 100%;
    height: auto;
}

.cta-banner__text {
    color: #FFF;
    font-family: YuMincho;
    font-size: 1.9rem;
    position: relative;
    padding-bottom: 12px;
    display: inline-block;
    white-space: nowrap;
}

.cta-banner__text::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 318px;
    height: 0.5px;
    background: #fff;
    border-radius: 999px;
}

/* SP: smaller font for 320px */
@media (max-width: 480px) {
    .cta-banner__text {
        font-size: 1.5rem;
    }

    .cta-banner__text::after {
        width: 250px;
    }
}

.btn.btn--primary {
    margin-top: 44px;
}

@media (max-width: 767px) {
    .cta-banner {
        position: relative;
        padding: 0;
    }

    .cta-banner>.btn.btn--primary {
        position: absolute;
        left: 50%;
        bottom: 48px;
        transform: translateX(-50%);
        margin: 0;
        z-index: 2;
    }
}

@media (min-width: 768px) {
    .btn.btn--primary {
        margin-bottom: 8px;
    }

    .cta-banner {
        position: relative;
        padding: 0;
    }

    .cta-banner>.btn.btn--primary {
        position: absolute;
        right: clamp(24px, 13.171875vw, 207px);
        bottom: clamp(16px, 2.890625vw, 37px);
        display: flex;
        width: clamp(343px, 26.796875vw, 686px);
        height: clamp(48px, 3.75vw, 96px);
        padding: clamp(16px, 1.25vw, 32px) clamp(24px, 1.875vw, 48px);
        justify-content: center;
        align-items: center;
        gap: clamp(10px, 0.78125vw, 20px);
        font-size: 1.6rem;
        letter-spacing: 0.08em;
        font-weight: 500;
        margin: 0;
        z-index: 2;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .cta-banner>.btn.btn--primary {
        width: 202px;
        height: 20px;
        padding: 16px 24px;
        gap: 10px;
        font-size: 16px;
        letter-spacing: normal;
        font-weight: 500;
    }
}

.sec__lead {
    text-align: center;
    font-family: YuMincho;
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 500;
}

/*sec-history*/
.sec.sec-history .inner {
    width: 100%;
}

.sec__heading {
    position: relative;
    margin: 3rem 0;
    /* ←SPで左右16px */
    padding: 1px 12px;
    /* 中の余白：お好みで調整 */

    /* 調整用 */
    --corner-size: 28px;
    /* 線の長さ */
    --corner-weight: 1px;
    /* 線の太さ */
    --corner-color: var(--txt_normal, #191B28);
    /* 線の色 */
    --corner-inset: 0px;
    /* ラッパー端からどれだけ内側に入れるか */
}

.sec__heading::before,
.sec__heading::after {
    content: "";
    position: absolute;
    width: var(--corner-size);
    height: 52px;
    pointer-events: none;
}

/* 左上 */
.sec__heading::before {
    top: var(--corner-inset);
    left: var(--corner-inset);
    border-top: var(--corner-weight) solid var(--corner-color);
    border-left: var(--corner-weight) solid var(--corner-color);
}

/* 右下 */
.sec__heading::after {
    right: var(--corner-inset);
    bottom: var(--corner-inset);
    border-right: var(--corner-weight) solid var(--corner-color);
    border-bottom: var(--corner-weight) solid var(--corner-color);
}

@media (min-width: 768px) {
    .sec.sec-history .inner {
        display: grid;
        grid-template-columns: minmax(320px, 1fr) minmax(320px, 1fr);
        column-gap: clamp(24px, 4vw, 72px);
        align-items: start;
    }

    .sec.sec-history .inner>img:first-of-type {
        grid-column: 1;
        grid-row: 1;
        width: 100%;
        height: auto;
        display: block;
        margin-top: 100px;
    }

    .sec.sec-history .inner>.sec__heading {
        grid-column: 2;
        grid-row: 1;
        margin: 100px 0 0;
        align-self: center;
    }

    .sec.sec-history .inner>.sec__text:first-of-type {
        grid-column: 1;
        grid-row: 2;
        margin: 171px 0 0;
    }

    .sec.sec-history .inner>.sec__image {
        grid-column: 2;
        grid-row: 2;
        margin: 100px 0 0;
        justify-self: start;
    }

    .sec.sec-history .inner>.sec__subtitle,
    .sec.sec-history .inner>.sec__text:not(:first-of-type) {
        grid-column: 1 / -1;
    }

    .sec.sec-history .inner>.sec__subtitle {
        color: var(--B, #151622);
        text-align: center;
        font-family: "Zen Old Mincho";
        font-size: 4rem;
        font-style: normal;
        font-weight: 400;
        line-height: 1.7;
        margin: 120px 0;
    }

    .sec.sec-history .inner>.sec__text {
        color: var(--B, #151622);
        text-align: center;
        font-family: "Zen Kaku Gothic New";
        font-size: 2rem;
        font-style: normal;
        font-weight: 400;
        line-height: 1.7;
    }

    .sec.sec-history .inner>.sec__heading>.sec__title {
        color: var(--B, #151622);
        text-align: center;
        font-family: "Zen Old Mincho";
        font-size: 4rem;
        font-style: normal;
        font-weight: 400;
        line-height: 1.7;
    }
}

.sec-step__image {
    margin-top: 18px;
    margin-bottom: 50px;
}

.sec-step__image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 16px;
}

@media (min-width: 768px) {
    .sec-step__image {
        width: 81.25vw;
        max-width: 100%;
        margin-inline: auto;
    }
}



/* SP: center the button under the main visual and hide the desktop button */
@media (max-width: 767px) {

    /* hide desktop inline button inside .main (if present) */
    .main a.btn.btn--primary {
        display: none;
    }

    .mainvisual__btnwrap-sp {
        display: block;
        text-align: center;
        margin-top: 37px;
    }

    .mainvisual__btn--sp {
        display: flex;
        width: 202px;
        height: 20px;
        padding: 16px 24px;
        justify-content: center;
        align-items: center;
        gap: 10px;
        border-radius: 3px;
        background: var(--BTN, linear-gradient(90deg, #A73737 0%, #7A2828 100%));
        color: #FFF;
        text-align: center;
        font-family: YuMincho;
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        text-decoration: none;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        margin: 0 auto;
        border: none;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .main a.btn.btn--primary {
        display: flex;
        left: 9%;
        width: 202px;
        height: 20px;
        padding: 16px 24px;
        gap: 10px;
        font-size: 16px;
        letter-spacing: normal;
        font-weight: 500;
    }

    .mainvisual__btnwrap-sp {
        display: none;
    }
}

@media (width: 1024px) {
    .main a.btn.btn--primary {
        left: 13%;
    }

    .point__02 {
        width: min(1280px, 100%);
        margin-left: auto;
        margin-right: auto;
        grid-template-columns: minmax(280px, 560px) minmax(280px, 620px);
        column-gap: clamp(24px, 4vw, 110px);
        position: relative;
        isolation: isolate;
        background: transparent;
    }

    .point__02::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        width: 100vw;
        transform: translateX(-50%);
        background: var(--BG-main, #F0F2F2);
        z-index: 0;
        pointer-events: none;
    }

    .point__02 > * {
        position: relative;
        z-index: 1;
    }

    .point__02 .point02__img--left {
        justify-self: start;
    }

    .point__02 .point02__img--right-top,
    .point__02 .number__eng,
    .point__02 .point__title,
    .point__02 .point__text,
    .point__02 .point__media {
        justify-self: start;
        margin-right: 0;
    }
}

/* Desktop: hide the SP duplicate button */
@media (min-width: 1025px) {

    .sec.sec-points .sec__title_eng,
    .sec.sec-usecase .sec__title,
    .sec.sec-step .sec__title,
    .sec.sec-lineup .sec__title_eng,
    #sec09 .sec__title {
        color: var(--B, #151622);
        text-align: center;
        font-family: "Cormorant Garamond",
            "EB Garamond",
            "Cormorant",
            "Libre Baskerville",
            "Playfair Display",
            Georgia,
            serif;
        font-size: 3.6rem;
        font-weight: 300;
        line-height: 1.7;
    }

    .main {
        position: relative;
        width: 100%;
        max-width: none;
        margin: 0;
    }

    .main picture {
        position: static;
        width: min(100vw, 2560px);
        height: auto;
    }

    .main picture img {
        width: 100%;
        height: auto;
    }

    .mainvisual__btnwrap-sp {
        display: none;
    }

    .l-header {
        backdrop-filter: none;
    }

    .sec.sec-lineup .sec__title_eng {
        color: var(--sec-03txt, #FFF);
    }

}



/* CAROUSEL */
.carousel {
    margin-top: 14px;
    overflow: visible;
    position: relative;
    /* 影を見せたいので hidden じゃなくてOK */
}

.carousel__track {
    display: flex;
    gap: 0px;
    overflow-x: auto;
    padding: 10px 6% 18px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

/* SP: adjust track padding to leave 16px on sides */
@media (max-width: 480px) {
    .carousel__track {
        padding: 10px 16px 18px;
    }
}

.carousel__track::-webkit-scrollbar {
    display: none;
}

.carousel__arrow {
    position: absolute;
    top: 46%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid rgba(194, 167, 107, 0.9);
    background: rgba(25, 27, 40, 0.55);
    color: #F0F2F2;
    display: grid;
    place-items: center;
    cursor: pointer;
    z-index: 3;
    transition: opacity .2s ease, background .2s ease;
}

.carousel__arrow span {
    font-size: 2.2rem;
    line-height: 1;
}

.carousel__arrow:hover {
    background: rgba(25, 27, 40, 0.78);
}

.carousel__arrow:disabled {
    opacity: .35;
    cursor: default;
}

.carousel__arrow--prev {
    left: 6px;
}

.carousel__arrow--next {
    right: 6px;
}

/* 1スライド（画像＋台） */
.slide {
    flex: 0 0 78%;
    scroll-snap-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;

    transform: scale(.92);
    opacity: .65;
    transition: transform .25s ease, opacity .25s ease;
}

/* SP: adjust slide width to match card */
@media (max-width: 480px) {
    .slide {
        flex: 0 0 auto;
        width: clamp(256px, 80vw, 300px);
    }

    .carousel__track {
        gap: 16px;
        padding-left: calc((100% - clamp(256px, 80vw, 300px)) / 2);
        padding-right: calc((100% - clamp(256px, 80vw, 300px)) / 2);
    }

    .slide__img {
        width: clamp(256px, 80vw, 300px);
        max-width: 100%;
        height: auto;
    }
}

.slide__img {
    width: min(300px, 80vw);
    height: auto;
    display: block;
}

/* 下の“台” */
.card {
    width: min(360px, 88vw);
    border-radius: 18px;
    padding: 28px 22px;
    text-align: center;

    background: rgba(160, 165, 175, .55);
    /* 非アクティブのグレー */
    color: rgba(255, 255, 255, .9);
    border: 1px solid rgba(255, 255, 255, .12);
}

/* SP: adjust card width to leave 16px on both sides */
@media (max-width: 480px) {
    .card {
        width: clamp(256px, 80vw, 300px);
        min-height: 206px;
        height: auto;
        padding: 18px 16px 20px;
        box-sizing: border-box;
    }
}

/* 中央（アクティブ） */
.slide.is-active {
    transform: scale(1);
    opacity: 1;
}

.slide.is-active .card {
    background: #fff;
    color: #111;
    border-color: rgba(0, 0, 0, .08);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .20);
}

/* badge（人気No.1） */
.badge {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 10px;
    background: #e8b37a;
    color: #fff;
}

/* 文字 */
.card__title {
    font-size: 1.6rem;
    margin: 0 0 5px;
    font-weight: 700;
}

.card>.card__title:first-child {
    margin-top: 36px;
}

.card__price {
    margin: 0 0 5px;
    font-size: 16px;
    opacity: .85;
}

/* ボタン */
.card__btn-carousel {
    display: flex;
    width: clamp(150px, 62%, 202px);
    aspect-ratio: 202 / 52;
    min-height: 44px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 3px;
    background: var(--BTN, linear-gradient(90deg, #A73737 0%, #7A2828 100%));
    color: #FFF;
    text-align: center;
    font-family: YuMincho;
    font-size: clamp(1.3rem, 1.8vw, 1.6rem);
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    margin-inline: auto;
    box-sizing: border-box;
}

.card__btn-carousel::before {
    content: "";
    position: absolute;
    top: 0;
    left: -150%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.9) 50%,
            rgba(255, 255, 255, 0) 100%);
    transform: skewX(-25deg);
    pointer-events: none;
    animation: btn-shine 3s linear infinite;
}

.slide.is-active .card__btn-carousel {
    background: linear-gradient(to right, #A73737, #7A2828);
}

/* 注釈 */
.note {
    margin-top: 16px;
    font-size: 12px;
    opacity: .7;
    text-align: right;
}

/* sec-lineup */
.sec.sec-lineup {
    background-color: var(--primary--background_sub, #191B28);
    color: #ffffff;
    padding: 0;
    position: relative;
}

.sec.sec-lineup::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 100%;
    background-color: var(--primary--background_sub, #191B28);
    z-index: -1;
}

/* fade-in animation */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.sec.sec-lineup .inner {
    padding: 42px 0;
}

.faq__item {
    margin-bottom: 30px;
    text-align: left;
}

.faq__q {
    font-weight: 500;
    margin-left: 0;
}

.faq__a {
    margin-left: 0;
}

@media (min-width: 768px) {

    #sec09 .faq__q,
    #sec09 .faq__a {
        font-size: 2rem;
    }
}


.footer__logo,
.footer__copy {

    color: var(--B, #151622);
    font-family: YuMincho;
    font-size: 1rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-align: center;
    margin: 0;
}

.footer__copy {
    margin-top: 8px;
}

.txt-sm {
    color: var(--B, #151622);
    text-align: center;
    font-family: YuMincho;
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 500;
    margin: 0 0 3px;
}

.point-popup {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 16px;
    box-sizing: border-box;
}

.point-popup.is-open {
    display: flex;
}

.point-popup__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
}

.point-popup__content {
    position: relative;
    width: 338.926px;
    height: 212.754px;
    z-index: 1;
}

.point-popup__content img {
    width: 100%;
    height: 100%;
    display: block;
}

.point-popup__btn {
    position: absolute;
    left: 2.2569%;
    bottom: 3.125%;
    transform: none;
    display: flex;
    width: 94.1208%;
    height: 11.7507%;
    padding: 5.68779% 5.35545%;
    justify-content: center;
    align-items: center;
    gap: 2.23146%;
    border-radius: clamp(1.4px, 0.25vw, 2.269px);
    background: var(--txt, #C2A76B);
    font-size: clamp(10px, 4.2vw, 16px);
    line-height: 1;
    white-space: nowrap;
    box-sizing: border-box;
    margin: 0;
    z-index: 2;
}

.point-popup__close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    font-size: 2.4rem;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
    z-index: 2;
}

@media (max-width: 767px) {
    .point-popup {
        padding: 10px;
    }

    .point-popup__content {
        width: min(338.926px, calc(100vw - 20px));
        height: auto;
        aspect-ratio: 338.926 / 212.754;
    }

    .point-popup__close {
        width: 32px;
        height: 32px;
        font-size: 2rem;
        top: 6px;
        right: 6px;
    }
}

@media (min-width: 768px) {
    .point-popup__btn {
        bottom: 1%;
    }
}

@media (width: 768px) {
    .point-popup__btn {
        bottom: 0%;
    }
}

@media (width: 320px) {

    h3.sec__title,
    h3.point__title,
    h3.usecase__titles,
    h3.sec__subtitle,
    .sec__title,
    .point__title,
    .usecase__titles,
    .sec__subtitle,
    .sec__title_eng {
        font-size: 2.2rem;
    }

    .last__title {
        font-size: 2.1rem;
    }
}

@media (width: 375px) {
    .point__02 {
        padding-top: 100px;
    }

    .point__02>.number__eng {
        margin-top: 0;
    }
}

@media (width: 768px) {

    .point__03>.number__eng,
    .point__03>.point__title,
    .point__03>.point__text,
    .point__03>.point03__mieman,
    .point__03>p:not(.number__eng):not(.point__text) {
        width: 100%;
        max-width: 360px;
    }

    .point__03 .point__media picture {
        width: 100%;
        max-width: 360px;
        height: auto;
    }

    .point__03 .point__media img {
        width: 100%;
        height: auto;
        object-fit: contain;
    }
}

/* POINT03: SafariでもPC表示で画像がテキストに被らないよう最終上書き */
@media (min-width: 768px) and (max-width: 1279px) {
    .sec.sec-points .inner .point__03 {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: 40px;
        align-items: start;
    }

    .sec.sec-points .inner .point__03>.number__eng,
    .sec.sec-points .inner .point__03>.point__title,
    .sec.sec-points .inner .point__03>.point__text,
    .sec.sec-points .inner .point__03>.point03__mieman,
    .sec.sec-points .inner .point__03>p:not(.number__eng):not(.point__text),
    .sec.sec-points .inner .point__03 .point__media {
        width: 100%;
        max-width: none;
        min-width: 0;
    }

    .sec.sec-points .inner .point__03 .point__media {
        grid-column: 2;
        margin: 0;
        justify-self: stretch;
        align-self: start;
    }

    .sec.sec-points .inner .point__03 .point__media picture,
    .sec.sec-points .inner .point__03 .point__media img {
        width: 100%;
        height: auto;
    }
}

@media (min-width: 1280px) {
    .sec.sec-points .inner .point__03 {
        display: grid;
        grid-template-columns: 550px minmax(0, 1fr);
        column-gap: 40px;
        align-items: start;
    }

    .sec.sec-points .inner .point__03>.number__eng,
    .sec.sec-points .inner .point__03>.point__title,
    .sec.sec-points .inner .point__03>.point__text,
    .sec.sec-points .inner .point__03>.point03__mieman,
    .sec.sec-points .inner .point__03>p:not(.number__eng):not(.point__text) {
        width: 100%;
        max-width: 550px;
        min-width: 0;
    }

    .sec.sec-points .inner .point__03 .point__media {
        grid-column: 2;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin: 0;
        justify-self: start;
        align-self: start;
        transform: none;
    }

    .sec.sec-points .inner .point__03 .point__media picture,
    .sec.sec-points .inner .point__03 .point__media img {
        width: 100%;
        max-width: 100%;
        height: auto;
    }
}

/* Desktop cap: MacBook Pro 16-inch相当(1728px)を超えたら固定 */
@media (min-width: 1729px) {
    .main {
        width: 100%;
        max-width: 1728px;
        margin-left: auto;
        margin-right: auto;
    }

    .main picture {
        width: 100%;
        max-width: 1728px;
        margin-left: auto;
        margin-right: auto;
    }

    .main>a.btn.btn--primary {
        left: 170px;
        bottom: 64.8px;
        width: 463.05px;
        height: 64.8px;
        padding: 21.6px 32.4px;
        gap: 13.5px;
    }

    .sec.sec-recommend,
    .sec.sec-usecase {
        width: 1728px;
        margin-left: calc(50% - 864px);
        margin-right: calc(50% - 864px);
    }

    .cta-banner {
        width: 1728px;
        margin-left: calc(50% - 864px);
        margin-right: calc(50% - 864px);
    }

    .sec.sec-recommend {
        min-height: min(calc(1728px * 0.55859375), 1430px);
    }

    .sec.sec-recommend::before,
    .sec.sec-recommend .sec__title,
    .sec.sec-recommend .recommend__inner,
    .sec.sec-lineup::before {
        width: 1728px;
    }

    .sec.sec-recommend .checklist {
        width: min(calc(1728px * 0.40625 * 1.15), 1040px);
        margin-left: calc(1728px * 0.1);
    }

    .sec.sec-recommend .sec__title {
        padding-left: calc((1728px * 0.1) + (min(calc(1728px * 0.40625 * 1.15), 1040px) * 0.055));
    }

    .sec.sec-usecase .usecase>.usecase__media:first-of-type {
        width: min(calc(1728px * 0.53671875), 100%);
    }

    .sec.sec-usecase .usecase:nth-of-type(2)>.usecase__media:last-of-type {
        left: calc(50% - 864px);
    }

    .sec.sec-usecase .usecase:nth-of-type(1)>.usecase__media:last-of-type,
    .sec.sec-usecase .usecase:nth-of-type(3)>.usecase__media:last-of-type {
        right: calc(50% - 864px);
    }

    .point__03::before {
        left: 0;
        width: 640px;
    }

    .sec.sec-points .inner .point__03 {
        column-gap: 96px;
    }

    .point__02 {
        width: 1728px;
        margin-left: calc(50% - 864px);
        margin-right: calc(50% - 864px);
        grid-template-columns: 600px 635px;
        justify-content: center;
        column-gap: 40px;
    }

    .point__02 .point02__img--right-top {
        width: 100%;
        max-width: 635px;
        justify-self: stretch;
        margin-right: 0;
    }

    .point__02 .number__eng,
    .point__02 .point__title,
    .point__02 .point__text,
    .point__02 .point__media {
        width: 100%;
        max-width: 635px;
        justify-self: stretch;
        margin-right: 0;
    }

    .cta-banner>.btn.btn--primary {
        right: 207px;
        bottom: 37px;
        width: 463.05px;
        height: 64.8px;
        padding: 21.6px 32.4px;
        gap: 13.5px;
    }
}

/* Keep POINT02 layout consistent from 1024px */
@media (min-width: 1024px) and (max-width: 1440px) {
    .point__02 {
        width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: clamp(24px, 4vw, 96px);
        justify-content: center;
        padding-inline: clamp(24px, 4vw, 96px);
        box-sizing: border-box;
        position: relative;
        isolation: isolate;
        background: transparent;
    }

    .point__02::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        width: 100vw;
        transform: translateX(-50%);
        background: var(--BG-main, #F0F2F2);
        z-index: 0;
        pointer-events: none;
    }

    .point__02>* {
        position: relative;
        z-index: 1;
    }

    .point__02 .point02__img--left {
        width: min(100%, 600px);
        max-width: 100%;
        justify-self: start;
    }

    .point__02 .point02__img--right-top,
    .point__02 .number__eng,
    .point__02 .point__title,
    .point__02 .point__text,
    .point__02 .point__media {
        width: min(100%, 635px);
        max-width: 100%;
        justify-self: start;
        margin-right: 0;
    }
}

@media (min-width: 1441px) {
    .point__02 {
        width: min(1280px, 100%);
        max-width: 1280px;
        margin-left: auto;
        margin-right: auto;
        grid-template-columns: minmax(0, 600px) minmax(0, 635px);
        column-gap: clamp(24px, 3vw, 56px);
        justify-content: center;
        padding-inline: 0;
        box-sizing: border-box;
        position: relative;
        isolation: isolate;
        background: transparent;
    }

    .point__02::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        width: 100vw;
        transform: translateX(-50%);
        background: var(--BG-main, #F0F2F2);
        z-index: 0;
        pointer-events: none;
    }

    .point__02>* {
        position: relative;
        z-index: 1;
    }

    .point__02 .point02__img--left {
        width: 100%;
        max-width: 600px;
        justify-self: start;
    }

    .point__02 .point02__img--right-top,
    .point__02 .number__eng,
    .point__02 .point__title,
    .point__02 .point__text,
    .point__02 .point__media {
        width: 100%;
        max-width: 635px;
        justify-self: stretch;
        margin-right: 0;
    }
}