:root {
    --pink: #f8c6b8;
    --pink2: #ef856d;
    --brown: #c9caca;
    --gray: #f0ebeb;
    --x: 2;
    --sx: 213;
}

/* animation */
@keyframes rotate {
    0% {rotate: 0deg;}
    100% {rotate:360deg;}
}
@keyframes hoverCircle {
    0% {width: 0%; height: 0%;}
    100% {width: 100%; height: 100%;}
}
@keyframes floating {
    0% {
        scale: 1;
        rotate: 0deg;
        translate: 0 0;
    }
    25% {
        scale: 1.02;
        rotate: 10deg;
        translate: 1px 2px;
    }
    50% {
        scale: 1;
        rotate: 0;
        translate: 2px 1px;
    }
    75% {
        scale: .98;
        rotate: -10deg;
        translate: 1px 0;
    }
    100% {
        scale: 1;
        rotate: 0deg;
        translate: 0 0;
    }
}

.js-fadeIn:not([data-animation-type]) {
    opacity: 0;
    transform: translate(0, 30px);
    transition: .7s;
}
.js-fadeIn:not([data-animation-type]).fadeIn {
    opacity: 1;
    transform: translate(0, 0);
}

.js-fadeIn[data-animation-type="fadeIn"] {
    opacity: 0;
    transition: .7s;
}
.js-fadeIn[data-animation-type="fadeIn"].fadeIn {
    opacity: 1;
}

/* mv animation */
.purposehalf-mv--title,
.purposehalf-mv--text,
.purposehalf-mv--rank,
.purposehalf-nav--list-i,
.purposehalf-nav--cart,
.purposehalf-nav--logo {
    opacity: 0;
    transition: .7s;
}
.purposehalf-mv--title.fadeIn,
.purposehalf-mv--text.fadeIn,
.purposehalf-mv--rank.fadeIn,
.purposehalf-nav--list-i.fadeIn,
.purposehalf-nav--cart.fadeIn,
.purposehalf-nav--logo.fadeIn {
    opacity: 1;
}


.purposehalf-mv--title,
.purposehalf-mv--text {
    transform: translate(0, 30px);
}
.purposehalf-mv--title.fadeIn,
.purposehalf-mv--text.fadeIn {
    transform: translate(0, 0);
}
.purposehalf-nav--list-i {
    transform: translate(-30px, 0);
}
.purposehalf-nav--list-i.fadeIn {
    transform: translate(0, 0);
}
.purposehalf-nav--cart,
.purposehalf-nav--logo {
    transform: translate(30px, 0);
}
.purposehalf-nav--cart.fadeIn,
.purposehalf-nav--logo.fadeIn {
    transform: translate(0, 0);
}

/* /animation */

h1 {margin: 0;}
.page-top .pane-main {
    overflow: visible;
}
#main {
    overflow: visible;
}

#purposehalf {
    display: flex;
    justify-content: center;
    column-gap: calc(12px * var(--x));
    @media screen and (max-width: 768px) {
        .pc {
            display: none !important;
        }
    }
    @media screen and (min-width: 769px) {
        .sp {
            display: none !important;
        }
    }
    * {
        box-sizing: border-box;
    }
    img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center center;
    }
    button {
        border: none;
        background: none;
        padding: 0;
    }
    input {
        border: none;
        background: none;
    }
    input:focus {
        outline: none;
    }
    .purchase-btn {
        width: calc(181px * var(--x));
        aspect-ratio: 362 / 90;
    }
    .purchase-btn a {
        display: block;
        height: 100%;
        transition: .1s;
        box-shadow: 0 10px 8px 0 rgba(0, 0, 0, .1);
        border-radius: calc(5px * var(--x));
        overflow: hidden;
    }
    .purchase-btn a:hover {
        scale: .99;
        translate: 0 1px;
        box-shadow: 0 0 0 0 rgba(0, 0, 0, .1);
    }
    .purchase-btn a img {
        object-fit: cover;
    }
    @media screen and (max-width: 768px) {
        .purchase-btn {
            width: calc((181 / var(--sx)) * 100vw);
        }
        .purchase-btn a {
            border-radius: calc((5 / var(--sx)) * 100vw);
        }
    }
    /* NBA code */
    .purchase-code {
        padding-top: calc(20px * var(--x));
        position: relative;
    }
    .purchase-code::before {
        display: block;
        content: "";
        width: calc(15.8px * var(--x));
        aspect-ratio: 15.8 / 7.4;
        background: url(../img/purchase_code_icon.png) no-repeat center / contain;
        position: absolute;
        top: 0;
        left: calc(50% - ((15.8px * var(--x)) / 2));
    }
    .purchase-code--text {
        width: calc(160px * var(--x));
        aspect-ratio: 160 / 31;
        margin: 0 auto;
    }
    .purchase-code--error {
        display: none;
        width: calc(185px * var(--x));
        aspect-ratio: 885 / 86;
        margin: calc(10px * var(--x)) auto calc(-10px * var(--x));
    }
    .purchase-code--form {
        display: flex;
        flex-direction: column;
        row-gap: calc(5px * var(--x));
        width: calc(183px * var(--x));
        margin: calc(18px * var(--x)) auto 0;
    }
    .purchase-code--input {
        display: flex;
        column-gap: calc(2px * var(--x));
    }
    .purchase-code--input input {
        width: calc(120px * var(--x));
        aspect-ratio: 120 / 33;
        font-size: calc(12px * var(--x));
        letter-spacing: .25em;
        color: #595757;
        border-radius: calc(5px * var(--x));
        background-image: url(../img/input_pink.png);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: contain;
        overflow: hidden;
        padding: 0 calc(15px * var(--x));
        box-shadow: 0 15px 20px 0 rgba(0, 0, 0, .1);
    }
    .purchase-code--input input::placeholder {
        color: #b4b4b4;
    }
    .purchase-code--input .purchase-code--btn {
        width: calc(58px * var(--x));
        aspect-ratio: 58 / 32;
        border-radius: calc(5px * var(--x));
        overflow: hidden;
        box-shadow: 0 15px 20px 0 rgba(0, 0, 0, .1);
        cursor: pointer;
    }
    .purchase-code--input .purchase-code--btn:not(.applied) {
        transition: .1s;
    }
    .purchase-code--input .purchase-code--btn:not(.applied):hover {
        scale: .99;
        translate: 0 1px;
        box-shadow: 0 0 0 0 rgba(0, 0, 0, .1);
    }
    .purchase-code--input .purchase-code--btn:not(.applied) .btn-applied,
    .purchase-code--input .purchase-code--btn.applied .btn-apply {
        display: none;
    }
    .purchase-code--purchase-btn {
        width: 100%;
        border-radius: calc(5px * var(--x));
        overflow: hidden;
        box-shadow: 0 15px 20px 0 rgba(0, 0, 0, .1);
    }
    .purchase-code--purchase-btn:disabled .btn-able {
        display: none;
    }
    .purchase-code--purchase-btn:not(:disabled) .btn-disable {
        display: none;
    }
    .purchase-code--purchase-btn:not(:disabled) {
        transition: .1s;
        cursor: pointer;
    }
    .purchase-code--purchase-btn:not(:disabled):hover {
        scale: .99;
        translate: 0 1px;
        box-shadow: 0 0 0 0 rgba(0, 0, 0, .1);
    }
    @media screen and (max-width: 768px) {
        .purchase-code {
            padding-top: calc((20 / var(--sx)) * 100vw);
        }
        .purchase-code::before {
            width: calc((15.8 / var(--sx)) * 100vw);
            left: calc(50% - (((15.8 / var(--sx)) * 100vw) / 2))
        }
        .purchase-code--text {
            width: calc((160 / var(--sx)) * 100vw);
        }
        .purchase-code--error {
            width: calc((185 / var(--sx)) * 100vw);
            margin: calc((10 / var(--sx)) * 100vw) auto calc((-10 / var(--sx)) * 100vw);
        }
        .purchase-code--form {
            row-gap: calc((5 / var(--sx)) * 100vw);
            width: calc((183 / var(--sx)) * 100vw);
            margin: calc((18 / var(--sx)) * 100vw) auto 0;
        }
        .purchase-code--input {
            column-gap: calc((2 / var(--sx)) * 100vw);
        }
        .purchase-code--input input {
            width: calc((120 / var(--sx)) * 100vw);
            font-size: calc((12 / var(--sx)) * 100vw);
            border-radius: calc((5 / var(--sx)) * 100vw);
            padding: 0 calc((15 / var(--sx)) * 100vw);
        }
        .purchase-code--input .purchase-code--btn {
            width: calc((58 / var(--sx)) * 100vw);
            border-radius: calc((5 / var(--sx)) * 100vw);
        }
        .purchase-code--purchase-btn {
            border-radius: calc((5 / var(--sx)) * 100vw);
        }
    }
}

/* ---- navigation ---- */
#purposehalf .purposehalf-nav {
    display: contents;
    width: 100%;

    .purposehalf-nav--left,
    .purposehalf-nav--right {
        display: block;
        display: flex;
        flex-direction: column;
        width: calc((100% - 430px - (12px * 2)) / 2);
        height: 100dvh;
        position: sticky;
        top: 0;
        background-color: var(--pink);
        overflow: hidden;
    }
    .purposehalf-nav--left {
        order: 1;
        left: 0;
        padding: calc(40px * var(--x)) calc(30px * var(--x));
    }
    .purposehalf-nav--list {
        display: flex;
        flex-direction: column;
        row-gap: calc(20px * var(--x));
    }
    .purposehalf-nav--list-i img {
        display: block;
        width: auto;
        height: 100%;
        object-fit: contain;
        object-position: left center;
    }
    .purposehalf-nav--list-i a {
        display: flex;
        flex-direction: column;
        row-gap: calc(6px * var(--x));
    }
    .purposehalf-nav--list-i-en {
        height: calc(12px * var(--x));
    }
    .purposehalf-nav--list-i-jp {
        height: calc(5px * var(--x));
    }

    .purposehalf-nav--right {
        order: 3;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        right: 0;
        padding: 10px;
    }
    .purposehalf-nav--cart {
        display: flex;
        justify-content: center;
        align-items: center;
        width: calc(67px * var(--x));
        aspect-ratio: 1/1;
        margin-top: calc(20px * var(--x));
        margin-right: calc(20px * var(--x));
        margin-left: auto;
        position: relative;
    }
    .purposehalf-nav--cart::before,
    .purposehalf-nav--cart::after {
        display: block;
        content: "";
        width: 0%;
        height: 0%;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, .2);
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        transition: width .4s, height .4s;
    }
    .purposehalf-nav--cart:hover::before {
        width: 100%;
        height: 100%;
    }
    .purposehalf-nav--cart-circle {
        display: block;
        width: 100%;
        height: 100%;
    }
    .purposehalf-nav--cart-circle img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center center;
        animation: rotate 10s linear infinite;
    }
    .purposehalf-nav--cart-icon {
        display: block;
        width: calc(22px * var(--x));
        position: absolute;
        top: 50%;
        left: 50%;
        translate: -50% -50%;
    }
    .purposehalf-nav--logo {
        display: flex;
        flex-direction: column;
        align-items: center;
        row-gap: calc(18px * var(--x));
        width: 100%;
        margin-bottom: calc(40px * var(--x));
    }
    .purposehalf-nav--logo-top {
        max-width: calc(129px * var(--x));
        aspect-ratio: 129 / 50;
    }
    .purposehalf-nav--logo-bottom {
        width: calc(61px * var(--x));
        aspect-ratio: 61 / 9;
    }
    @media screen and (max-width: 1000px) {
        .purposehalf-nav--left {
            padding: calc(40px * var(--x)) calc(10px * var(--x));
        }
        .purposehalf-nav--cart {
            margin-right: calc(10px * var(--x));
        }
    }
}

/* ---- main ---- */
#purposehalf .purposehalf-main {
    order: 2;
    width: 430px;
    
    @media screen and (max-width: 768px) {
        width: 100%;
        overflow: hidden;
        position: static;
        translate: 0;
    }
}

/* ---- Main Visual ---- */
#purposehalf .purposehalf-mv {
    position: relative;
    aspect-ratio: 213 / 439;

    .purposehalf-mv--title {
        width: calc(113px * var(--x));
        aspect-ratio: 113 / 22;
        position: absolute;
        top: calc(37px * var(--x));
        left: 50%;
        translate: -50% 0;
        z-index: 1;
    }
    .purposehalf-mv--img {
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
    }
    .purposehalf-mv--text {
        width: calc(116px * var(--x));
        aspect-ratio: 116 / 95;
        position: absolute;
        left: calc(17px * var(--x));
        bottom: calc(30px * var(--x));
    }
    .purposehalf-mv--rank {
        width: calc(64px * var(--x));
        aspect-ratio: 1/1;
        position: absolute;
        top: calc(64px * var(--x));
        right: calc(2px * var(--x));
    }
    @media screen and (max-width: 768px) {
        aspect-ratio: 213 / 361;

        .purposehalf-mv--title {
            width: calc((113 / var(--sx)) * 100vw);
            top: calc((25 / var(--sx)) * 100vw);
        }
        .purposehalf-mv--text {
            width: calc((116 / var(--sx)) * 100vw);
            left: calc((17 / var(--sx)) * 100vw);
            bottom: calc((30 / var(--sx)) * 100vw);
        }
        .purposehalf-mv--rank {
            width: calc((64 / var(--sx)) * 100vw);
            top: calc((64 / var(--sx)) * 100vw);
            right: calc((2 / var(--sx)) * 100vw);
        }
        .purposehalf-mv--img {
            background-color: var(--pink);
        }
        .purposehalf-mv--img picture {
            display: block;
            translate: 0 calc((-20 / var(--sx)) * 100vw);
        }
    }
}

/* ---- About ---- */
#purposehalf .purposehalf-about {
    background-color: var(--pink);
    padding: calc(10px * var(--x)) 0 calc(45px * var(--x));
    overflow: hidden;

    .purposehalf-about--note {
        width: calc(189px * var(--x));
        aspect-ratio: 189 / 12;
        margin: 0 auto;
        position: relative;
        z-index: 1;
    }
    .purposehalf-about--btn {
        width: calc(186px * var(--x));
        aspect-ratio: 910 / 424;
        margin: calc(17px * var(--x)) auto 0;
        position: relative;
        z-index: 1;
    }
    .purposehalf-about--btn a {
        display: block;
        height: 100%;
        border-radius: calc(10px * var(--x));
        overflow: hidden;
        transition: .1s;
        box-shadow: 0 15px 20px 0 rgba(0, 0, 0, .1);
    }
    .purposehalf-about--btn a:hover {
        scale: .99;
        translate: 0 1px;
        box-shadow: 0 0 0 0 rgba(0, 0, 0, .1);
    }
    .purposehalf-about--lead {
        width: calc(141px * var(--x));
        aspect-ratio: 141 / 62;
        margin: calc(100px * var(--x)) auto calc(83px * var(--x));
        position: relative;
    }
    .purposehalf-about--lead img {
        position: relative;
        z-index: 1;
    }
    .purposehalf-about--lead::before {
        display: block;
        content: "";
        background: url(../img/about_bg.jpg) no-repeat center / cover;
        width: calc(215px * var(--x));
        aspect-ratio: 211 / 316;
        position: absolute;
        top: 0;
        left: calc(((141px * var(--x)) / 2) - (430px / 2));
        bottom: 0;
        right: 0;
        margin: auto;
        z-index: 0;
    }
    .purposehalf-about--concern-title {
        width: calc(140px * var(--x));
        aspect-ratio: 140 / 76;
        margin: 0 auto;
        position: relative;
        z-index: 1;
    }
    .purposehalf-about--concern-text {
        width: calc(109px * var(--x));
        aspect-ratio: 109 / 30;
        margin: calc(19px * var(--x)) auto 0;
    }
    .purposehalf-about--concern-list {
        width: calc(197px * var(--x));
        aspect-ratio: 197 / 183;
        margin: calc(15px * var(--x)) auto 0;
        position: relative;
    }
    .purposehalf-about--concern-list-i {
        width: calc(88px * var(--x));
        aspect-ratio: 1/1;
        position: absolute;
    }
    .purposehalf-about--concern-list-i:nth-child(1) {
        top: 0;
        left: 0;
    }
    .purposehalf-about--concern-list-i:nth-child(2) {
        top: 0;
        right: 0;
    }
    .purposehalf-about--concern-list-i:nth-child(3) {
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
    }
    .purposehalf-about--concern-list-i:nth-child(4) {
        left: 0;
        bottom: 0;
    }
    .purposehalf-about--concern-list-i:nth-child(5) {
        right: 0;
        bottom: 0;
    }
    .purposehalf-about--horny-dots {
        width: calc(3px * var(--x));
        aspect-ratio: 3 / 33;
        margin: calc(-13px * var(--x)) auto 0;
    }
    .purposehalf-about--horny-img {
        width: calc(100px * var(--x));
        aspect-ratio: 100 / 40;
        margin: calc(14px * var(--x)) auto 0;
    }
    .purposehalf-about--horny-title {
        width: calc(162px * var(--x));
        aspect-ratio: 162 / 59;
        margin: calc(10px * var(--x)) auto 0;
    }
    .purposehalf-about--horny-lead {
        width: calc(163px * var(--x));
        aspect-ratio: 163 / 66;
        margin: calc(8px * var(--x)) auto 0;
    }
    .purposehalf-about--horny-text {
        width: calc(161px * var(--x));
        aspect-ratio: 161 / 30;
        margin: calc(49px * var(--x)) auto 0;
    }
    .purposehalf-about--horny-img2 {
        width: calc(213px * var(--x));
        aspect-ratio: 203 / 170;
        margin: calc(9px * var(--x)) auto 0;
    }
    .purposehalf-about--horny-img3 {
        width: calc(196px * var(--x));
        aspect-ratio: 193 / 223;
        margin: calc(30px * var(--x)) auto 0;
    }
    .purposehalf-about--horny-img4 {
        width: 100%;
        aspect-ratio: 213/262;
        margin: calc(14px * var(--x)) auto 0;
    }
    .purposehalf-about--horny-text1 {
        width: calc(186px * var(--x));
        aspect-ratio: 186 / 51;
        margin: calc(44px * var(--x)) auto 0;
        position: relative;
    }
    .purposehalf-about--horny-img5 {
        width: 100%;
        aspect-ratio: 427 / 316;
        margin: calc(22px * var(--x)) auto 0;
        position: relative;
    }
    .purposehalf-about--horny-img5--icon {
        width: calc(66px * var(--x));
        height: auto;
        aspect-ratio: 66 / 67;
        position: absolute;
        right: calc(5px * var(--x));
        bottom: 0;
    }
    .purposehalf-about--horny-text2 {
        width: calc(178px * var(--x));
        aspect-ratio: 178 / 40;
        margin: calc(5px * var(--x)) auto 0;
    }
    .purposehalf-about--horny-text3 {
        width: calc(192px * var(--x));
        aspect-ratio: 192 / 140;
        margin: calc(11px * var(--x)) auto 0 calc(2px * var(--x));
    }
    .purposehalf-about--horny-btn {
        margin: calc(22px * var(--x)) auto 0;
    }
    @media screen and (max-width: 768px) {
        padding: calc((10 / var(--sx)) * 100vw) 0 calc((45 / var(--sx)) * 100vw);

        .purposehalf-about--note {
            width: calc((189 / var(--sx)) * 100vw);
        }
        .purposehalf-about--btn {
            width: calc((186 / var(--sx)) * 100vw);
            margin: calc((17 / var(--sx)) * 100vw) auto 0;
        }
        .purposehalf-about--btn a {
            border-radius: calc((10 / var(--sx)) * 100vw);
            box-shadow: 0 calc((15 / var(--sx)) * 100vw) calc((20 / var(--sx)) * 100vw) 0 rgba(0, 0, 0, .1);
        }
        .purposehalf-about--lead {
            width: calc((141 / var(--sx)) * 100vw);
            margin: calc((100 / var(--sx)) * 100vw) auto calc((83 / var(--sx)) * 100vw);
        }
        .purposehalf-about--lead::before {
            width: calc((215 / var(--sx)) * 100vw);
            left: calc(((141px * var(--x)) / 2) - (430px / 2));
            left: calc((((141 / var(--sx)) * 100vw) / 2) - 50vw);
        }
        .purposehalf-about--concern-title {
            width: calc((140 / var(--sx)) * 100vw);
        }
        .purposehalf-about--concern-text {
            width: calc((109 / var(--sx)) * 100vw);
            margin: calc((19 / var(--sx)) * 100vw) auto 0;
        }
        .purposehalf-about--concern-list {
            width: calc((197 / var(--sx)) * 100vw);
            margin: calc((15 / var(--sx)) * 100vw) auto 0;
        }
        .purposehalf-about--concern-list-i {
            width: calc((88 / var(--sx)) * 100vw);
        }
        .purposehalf-about--horny-dots {
            width: calc((3 / var(--sx)) * 100vw);
            margin: calc((-14 / var(--sx)) * 100vw) auto 0;
        }
        .purposehalf-about--horny-img {
            width: calc((100 / var(--sx)) * 100vw);
            margin: calc((14 / var(--sx)) * 100vw) auto 0;
        }
        .purposehalf-about--horny-title {
            width: calc((162 / var(--sx)) * 100vw);
            margin: calc((10 / var(--sx)) * 100vw) auto 0;
        }
        .purposehalf-about--horny-lead {
            width: calc((163 / var(--sx)) * 100vw);
            margin: calc((8 / var(--sx)) * 100vw) auto 0;
        }
        .purposehalf-about--horny-text {
            width: calc((161 / var(--sx)) * 100vw);
            margin: calc((49 / var(--sx)) * 100vw) auto 0;
        }
        .purposehalf-about--horny-img2 {
            width: calc((213 / var(--sx)) * 100vw);
            margin: calc((9 / var(--sx)) * 100vw) auto 0;
        }
        .purposehalf-about--horny-img3 {
            width: calc((196 / var(--sx)) * 100vw);
            margin: calc((30 / var(--sx)) * 100vw) auto 0;
        }
        .purposehalf-about--horny-img4 {
            margin: calc((14 / var(--sx)) * 100vw) auto 0;
        }
        .purposehalf-about--horny-text1 {
            width: calc((186 / var(--sx)) * 100vw);
            margin: calc((47 / var(--sx)) * 100vw) auto 0;
        }
        .purposehalf-about--horny-img5 {
            margin: calc((22 / var(--sx)) * 100vw) auto 0;
        }
        .purposehalf-about--horny-img5--icon {
            width: calc((66 / var(--sx)) * 100vw);
            right: calc((5 / var(--sx)) * 100vw);
        }
        .purposehalf-about--horny-text2 {
            width: calc((178 / var(--sx)) * 100vw);
            margin: calc((10 / var(--sx)) * 100vw) auto 0;
        }
        .purposehalf-about--horny-text3 {
            width: calc((192 / var(--sx)) * 100vw);
            margin: calc((11 / var(--sx)) * 100vw) auto calc((2 / var(--sx)) * 100vw);
        }
        .purposehalf-about--horny-btn {
            margin: calc((20 / var(--sx)) * 100vw) auto 0;
        }
    }
}

/* ---- Key Benefits ---- */
#purposehalf .purposehalf-keyBenefits {
    background-color: #f5f3f2;
    padding-top: calc(90px * var(--x));
    position: relative;
    overflow: hidden;

    &::before {
        display: block;
        content: "";
        width: 100%;
        aspect-ratio: 213 / 29;
        background: url(../img/keybenefits_bg1.png) no-repeat center bottom / cover;
        position: absolute;
        top: 0;
    }
    .purposehalf-keyBenefits--title {
        width: calc(171px * var(--x));
        aspect-ratio: 171 / 50;
        margin: 0 auto;
        position: relative;
        z-index: 1;
    }
    .purposehalf-keyBenefits--point {
        width: 100%;
        aspect-ratio: 854 / 1368;
        position: relative;
        margin-top: calc(-28px * var(--x));
        z-index: 0;
    }
    .purposehalf-keyBenefits--point-img {
        position: relative;
        z-index: 1;
        margin-top: calc(-46px * var(--x));
    }
    .purposehalf-keyBenefits--point-list {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }
    .purposehalf-keyBenefits--point-list-i {
        position: absolute;
        z-index: 2;
    }
    .purposehalf-keyBenefits--point-list-i--bg {
        position: absolute;
    }
    .purposehalf-keyBenefits--point-list-i--text {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
    }
    .purposehalf-keyBenefits--point-list-i.-point1 {
        width: calc(72px * var(--x));
        aspect-ratio: 1324 / 1360;
        top: calc(53px * var(--x));
        right: calc(7px * var(--x));
    }
    .purposehalf-keyBenefits--point-list-i.-point1 .purposehalf-keyBenefits--point-list-i--text {
        width: calc(32px * var(--x));
        aspect-ratio: 32 / 35;
    }
    .purposehalf-keyBenefits--point-list-i.-point2 {
        width: calc(74px * var(--x));
        aspect-ratio: 1316 / 1352;
        top: calc(94px * var(--x));
        left: calc(-6px * var(--x));
    }
    .purposehalf-keyBenefits--point-list-i.-point2 .purposehalf-keyBenefits--point-list-i--text {
        width: calc(46px * var(--x));
        aspect-ratio: 46 / 21;
        top: calc(10px * var(--x));
        left: calc(7px * var(--x));
    }
    .purposehalf-keyBenefits--point-list-i.-point3 {
        width: calc(62px * var(--x));
        aspect-ratio: 1136 / 1220;
        right: calc(6px * var(--x));
        bottom: calc(85px * var(--x));
    }
    .purposehalf-keyBenefits--point-list-i.-point3 .purposehalf-keyBenefits--point-list-i--text {
        width: calc(35px * var(--x));
        aspect-ratio: 35 / 21;
    }
    .purposehalf-keyBenefits--point-list-i.-point4 {
        width: calc(98px * var(--x));
        aspect-ratio: 1776 /1520;
        bottom: calc(43px * var(--x));
        left: calc(7px * var(--x));
    }
    .purposehalf-keyBenefits--point-list-i.-point4 .purposehalf-keyBenefits--point-list-i--text {
        width: calc(50px * var(--x));
        aspect-ratio: 50 / 22;
        top: calc(7px * var(--x));
        right: calc(6px * var(--x));
    }
    /* exfoliation */
    .purposehalf-keyBenefits--exfoliation {
        margin-top: calc(16px * var(--x));
    }
    .purposehalf-keyBenefits--exfoliation-title {
        width: calc(104px * var(--x));
        aspect-ratio: 104 / 27;
        margin: 0 auto;
    }
    .purposehalf-keyBenefits--exfoliation-lead {
        width: calc(192px * var(--x));
        aspect-ratio: 192 / 102;
        margin: calc(-3px * var(--x)) auto 0;
    }
    .purposehalf-keyBenefits--exfoliation-body {
        width: calc(192px * var(--x));
        margin: 0 auto;
        border-left: calc(1px * var(--x)) solid var(--pink);
        border-right: calc(1px * var(--x)) solid var(--pink);
        border-bottom: calc(1px * var(--x)) solid var(--pink);
        background-color: #fff;
        border-radius: 0 0 calc(17px * var(--x)) calc(17px * var(--x));
        padding: calc(11px * var(--x)) calc(10px * var(--x)) calc(30px * var(--x));
    }
    .purposehalf-keyBenefits--exfoliation-img1 {
        width: calc(167px * var(--x));
        aspect-ratio: 167 / 106;
        margin: 0 auto;
    }
    .purposehalf-keyBenefits--exfoliation-img2 {
        width: calc(160px * var(--x));
        aspect-ratio: 160 / 37;
        margin: calc(8px * var(--x)) auto 0;
    }
    .purposehalf-keyBenefits--exfoliation-img3-wrap {
        width: calc(172px * var(--x));
        margin: calc(40px * var(--x)) auto 0;
        position: relative;
    }
    .purposehalf-keyBenefits--exfoliation-img3 {
        width: calc(92px * var(--x));
        aspect-ratio: 92 / 36;
        position: absolute;
        top: calc(-20px * var(--x));
        left: calc(-15px * var(--x));
    }
    .purposehalf-keyBenefits--exfoliation-img4 {
        width: 100%;
        aspect-ratio: 172 / 66;
    }
    .purposehalf-keyBenefits--exfoliation-img5 {
        width: calc(170px * var(--x));
        aspect-ratio: 170 / 57;
        margin: calc(10px * var(--x)) auto 0;
    }
    .purposehalf-keyBenefits--exfoliation-img6 {
        width: calc(172px * var(--x));
        aspect-ratio: 172 / 57;
        margin: calc(4px * var(--x)) auto 0;
    }
    .purposehalf-keyBenefits--exfoliation-img7 {
        width: calc(170px * var(--x));
        aspect-ratio: 170 / 57;
        margin: calc(4px * var(--x)) auto 0;
    }
    .purposehalf-keyBenefits--exfoliation-img8 {
        width: calc(164px * var(--x));
        aspect-ratio: 164 / 56;
        margin: calc(4px * var(--x)) auto 0;
    }
    .purposehalf-keyBenefits--exfoliation-img9 {
        width: calc(100% + ( 10px * var(--x) * 2));
        margin: calc(28px * var(--x)) 0 0 calc(-10px * var(--x));
        border-top: calc(1px * var(--x)) solid var(--pink);
        position: relative;
    }
    .purposehalf-keyBenefits--exfoliation-img9::before {
        display: block;
        content: "";
        width: calc(29px * var(--x));
        height: calc(18px * var(--x));
        background-color: #fff;
        position: absolute;
        top: calc(-9px * var(--x));
        left: calc(50% - ((29px * var(--x)) / 2));
    }
    .purposehalf-keyBenefits--exfoliation-img9 img {
        width: calc(21px * var(--x));
        height: calc(18px * var(--x));
        position: absolute;
        top: calc(-9px * var(--x));
        left: calc(50% - ((21px * var(--x)) / 2));
    }
    .purposehalf-keyBenefits--exfoliation-img10 {
        width: calc(143px * var(--x));
        aspect-ratio: 143 / 49;
        margin: calc(30px * var(--x)) auto 0;
    }
    .purposehalf-keyBenefits--exfoliation-note {
        width: calc(184px * var(--x));
        aspect-ratio: 184 / 25;
        margin: calc(8px * var(--x)) auto 0;
    }
    /* hydration */
    .purposehalf-keyBenefits--hydration {
        margin-top: calc(30px * var(--x));
    }
    .purposehalf-keyBenefits--hydration-title {
        width: calc(104px * var(--x));
        aspect-ratio: 104 / 27;
        margin: 0 auto;
    }
    .purposehalf-keyBenefits--hydration-lead {
        width: calc(192px * var(--x));
        aspect-ratio: 192 / 102;
        margin: calc(-3px * var(--x)) auto 0;
    }
    .purposehalf-keyBenefits--hydration-body {
        width: calc(192px * var(--x));
        margin: 0 auto;
        border-left: calc(1px * var(--x)) solid var(--pink);
        border-right: calc(1px * var(--x)) solid var(--pink);
        border-bottom: calc(1px * var(--x)) solid var(--pink);
        background-color: #fff;
        border-radius: 0 0 calc(17px * var(--x)) calc(17px * var(--x));
        padding: calc(11px * var(--x)) calc(10px * var(--x)) calc(33px * var(--x));
    }
    .purposehalf-keyBenefits--hydration-img1 {
        width: calc(169px * var(--x));
        aspect-ratio: 169 / 106;
        margin: 0 auto;
    }
    .purposehalf-keyBenefits--hydration-img2 {
        width: calc(128px * var(--x));
        aspect-ratio: 128 / 23;
        margin: calc(9px * var(--x)) auto 0;
    }
    .purposehalf-keyBenefits--hydration-img3-wrap {
        width: calc(172px * var(--x));
        margin: calc(35px * var(--x)) auto 0;
        position: relative;
    }
    .purposehalf-keyBenefits--hydration-img3 {
        width: calc(92px * var(--x));
        aspect-ratio: 92 / 37;
        position: absolute;
        top: calc(-17px * var(--x));
        left: calc(-16px * var(--x));
    }
    .purposehalf-keyBenefits--hydration-img4 {
        width: 100%;
        aspect-ratio: 171 / 83;
    }
    .purposehalf-keyBenefits--hydration-img5 {
        width: calc(158px * var(--x));
        aspect-ratio: 158 / 37;
        margin: calc(7px * var(--x)) auto 0;
    }
    .purposehalf-keyBenefits--hydration-img6 {
        width: calc(14px * var(--x));
        aspect-ratio: 1/1;
        margin: calc(13px * var(--x)) auto 0;
    }
    .purposehalf-keyBenefits--hydration-img7-wrap {
        position: relative;
        margin-top: calc(16px * var(--x));
    }
    .purposehalf-keyBenefits--hydration-img7 {
        width: calc(60px * var(--x));
        aspect-ratio: 60 / 83;
        position: absolute;
        right: calc(-20px * var(--x));
        top: calc(-52px * var(--x));
    }
    .purposehalf-keyBenefits--hydration-img8 {
        width: calc(91px * var(--x));
        aspect-ratio: 91 / 22;
        margin: 0 auto;
    }
    .purposehalf-keyBenefits--hydration-img9 {
        width: calc(176px * var(--x));
        aspect-ratio: 176 / 36;
        margin: calc(6px * var(--x)) auto 0;
    }
    .purposehalf-keyBenefits--hydration-img10,
    .purposehalf-keyBenefits--hydration-img11 {
        width: calc(176px * var(--x));
        aspect-ratio: 176 / 36;
    }
    .purposehalf-keyBenefits--hydration-arrow {
        width: calc(100% + ( 10px * var(--x) * 2));
        margin: calc(34px * var(--x)) 0 0 calc(-10px * var(--x));
        border-top: calc(1px * var(--x)) solid var(--pink);
        position: relative;
    }
    .purposehalf-keyBenefits--hydration-arrow::before {
        display: block;
        content: "";
        width: calc(29px * var(--x));
        height: calc(18px * var(--x));
        background-color: #fff;
        position: absolute;
        top: calc(-9px * var(--x));
        left: calc(50% - ((29px * var(--x)) / 2));
    }
    .purposehalf-keyBenefits--hydration-arrow img {
        width: calc(21px * var(--x));
        height: calc(18px * var(--x));
        position: absolute;
        top: calc(-9px * var(--x));
        left: calc(50% - ((21px * var(--x)) / 2));
    }
    .purposehalf-keyBenefits--hydration-img12 {
        width: calc(166 * var(--x));
        aspect-ratio: 166 / 50;
        margin: calc(35px * var(--x)) auto 0;
    }
    .purposehalf-keyBenefits--hydration-note {
        width: calc(180px * var(--x));
        aspect-ratio: 370 / 24;
        margin: calc(8px * var(--x)) auto 0;
    }
    .purposehalf-keyBenefits--hydration-img13 {
        width: 100%;
        aspect-ratio: 1279 / 1120;
        margin: calc(40px * var(--x)) auto 0;
    }
    @media screen and (max-width: 768px) {
        padding-top: calc((94 / var(--sx)) * 100vw);

        .purposehalf-keyBenefits--title {
            width: calc((171 / var(--sx)) * 100vw);
        }
        .purposehalf-keyBenefits--point {
            margin-top: calc((-28 / var(--sx)) * 100vw);
        }
        .purposehalf-keyBenefits--point-img {
            margin-top: calc((-46 / var(--sx)) * 100vw);
        }
        .purposehalf-keyBenefits--point-list-i.-point1 {
            width: calc((72 / var(--sx)) * 100vw);
            top: calc((53 / var(--sx)) * 100vw);
            right: calc((7 / var(--sx)) * 100vw);
        }
        .purposehalf-keyBenefits--point-list-i.-point1 .purposehalf-keyBenefits--point-list-i--text {
            width: calc((32 / var(--sx)) * 100vw);
        }
        .purposehalf-keyBenefits--point-list-i.-point2 {
            width: calc((74 / var(--sx)) * 100vw);
            top: calc((94 / var(--sx)) * 100vw);
            left: calc((-6 / var(--sx)) * 100vw);
        }
        .purposehalf-keyBenefits--point-list-i.-point2 .purposehalf-keyBenefits--point-list-i--text {
            width: calc((46 / var(--sx)) * 100vw);
            top: calc((10 / var(--sx)) * 100vw);
            left: calc((7 / var(--sx)) * 100vw);
        }
        .purposehalf-keyBenefits--point-list-i.-point3 {
            width: calc((62 / var(--sx)) * 100vw);
            right: calc((6 / var(--sx)) * 100vw);
            bottom: calc((85 / var(--sx)) * 100vw);
        }
        .purposehalf-keyBenefits--point-list-i.-point3 .purposehalf-keyBenefits--point-list-i--text {
            width: calc((35 / var(--sx)) * 100vw);
        }
        .purposehalf-keyBenefits--point-list-i.-point4 {
            width: calc((98 / var(--sx)) * 100vw);
            bottom: calc((43 / var(--sx)) * 100vw);
            left: calc((7 / var(--sx)) * 100vw);
        }
        .purposehalf-keyBenefits--point-list-i.-point4 .purposehalf-keyBenefits--point-list-i--text {
            width: calc((50 / var(--sx)) * 100vw);
            top: calc((7 / var(--sx)) * 100vw);
            right: calc((6 / var(--sx)) * 100vw);
        }
        /* exfoliation */
        .purposehalf-keyBenefits--exfoliation {
            margin-top: calc((16 / var(--sx)) * 100vw);
        }
        .purposehalf-keyBenefits--exfoliation-title {
            width: calc((104 / var(--sx)) * 100vw);
        }
        .purposehalf-keyBenefits--exfoliation-lead {
            width: calc((192 / var(--sx)) * 100vw);
            margin: calc((-3 / var(--sx)) * 100vw) auto 0;
        }
        .purposehalf-keyBenefits--exfoliation-body {
            width: calc((192 / var(--sx)) * 100vw);
            border-left-width: calc((1 / var(--sx)) * 100vw);
            border-right-width: calc((1 / var(--sx)) * 100vw);
            border-bottom-width: calc((1 / var(--sx)) * 100vw);
            border-radius: 0 0 calc((17 / var(--sx)) * 100vw) calc((17 / var(--sx)) * 100vw);
            padding: calc((11 / var(--sx)) * 100vw) calc((10 / var(--sx)) * 100vw) calc((30 / var(--sx)) * 100vw);
        }
        .purposehalf-keyBenefits--exfoliation-img1 {
            width: calc((167 / var(--sx)) * 100vw);
        }
        .purposehalf-keyBenefits--exfoliation-img2 {
            width: calc((160 / var(--sx)) * 100vw);
            margin: calc((8 / var(--sx)) * 100vw) auto 0;
        }
        .purposehalf-keyBenefits--exfoliation-img3-wrap {
            width: calc((172 / var(--sx)) * 100vw);
            margin: calc((40 / var(--sx)) * 100vw) auto 0;
        }
        .purposehalf-keyBenefits--exfoliation-img3 {
            width: calc((92 / var(--sx)) * 100vw);
            top: calc((-20 / var(--sx)) * 100vw);
            left: calc((-15 / var(--sx)) * 100vw);
        }
        .purposehalf-keyBenefits--exfoliation-img5 {
            width: calc((168 / var(--sx)) * 100vw);
            margin: calc((10 / var(--sx)) * 100vw) auto 0;
        }
        .purposehalf-keyBenefits--exfoliation-img6 {
            width: calc((172 / var(--sx)) * 100vw);
            margin: calc((4 / var(--sx)) * 100vw) auto 0;
        }
        .purposehalf-keyBenefits--exfoliation-img7 {
            width: calc((170 / var(--sx)) * 100vw);
            margin: calc((4 / var(--sx)) * 100vw) auto 0;
        }
        .purposehalf-keyBenefits--exfoliation-img8 {
            width: calc((164 / var(--sx)) * 100vw);
            margin: calc((4 / var(--sx)) * 100vw) auto 0;
        }
        .purposehalf-keyBenefits--exfoliation-img9 {
            width: calc(100% + ( ((10 / var(--sx)) * 100vw) * 2));
            margin: calc((28 / var(--sx)) * 100vw) 0 0 calc((-10 / var(--sx)) * 100vw);
            border-top-width: calc((1 / var(--sx)) * 100vw);
        }
        .purposehalf-keyBenefits--exfoliation-img9::before {
            width: calc((29 / var(--sx)) * 100vw);
            height: calc((18 / var(--sx)) * 100vw);
            top: calc((-9 / var(--sx)) * 100vw);
            left: calc(50% - (((29 / var(--sx)) * 100vw) / 2));
        }
        .purposehalf-keyBenefits--exfoliation-img9 img {
            width: calc((21 / var(--sx)) * 100vw);
            height: calc((18 / var(--sx)) * 100vw);
            top: calc((-9 / var(--sx)) * 100vw);
            left: calc(50% - (((21 / var(--sx)) * 100vw) / 2));
        }
        .purposehalf-keyBenefits--exfoliation-img10 {
            width: calc((143 / var(--sx)) * 100vw);
            margin: calc((30 / var(--sx)) * 100vw) auto 0;
        }
        .purposehalf-keyBenefits--exfoliation-note {
            width: calc((184 / var(--sx)) * 100vw);
            margin: calc((8 / var(--sx)) * 100vw) auto 0;
        }
        /* hydration */
        .purposehalf-keyBenefits--hydration {
            margin-top: calc((30 / var(--sx)) * 100vw);
        }
        .purposehalf-keyBenefits--hydration-title {
            width: calc((104 / var(--sx)) * 100vw);
        }
        .purposehalf-keyBenefits--hydration-lead {
            width: calc((192 / var(--sx)) * 100vw);
            margin: calc((-3 / var(--sx)) * 100vw) auto 0;
        }
        .purposehalf-keyBenefits--hydration-body {
            width: calc((192 / var(--sx)) * 100vw);
            border-left-width: calc((1 / var(--sx)) * 100vw);
            border-right-width: calc((1 / var(--sx)) * 100vw);
            border-bottom-width: calc((1 / var(--sx)) * 100vw);
            border-radius: 0 0 calc((17 / var(--sx)) * 100vw) calc((17 / var(--sx)) * 100vw);
            padding: calc((11 / var(--sx)) * 100vw) calc((10 / var(--sx)) * 100vw) calc((33 / var(--sx)) * 100vw);
        }
        .purposehalf-keyBenefits--hydration-img1 {
            width: calc((169 / var(--sx)) * 100vw);
        }
        .purposehalf-keyBenefits--hydration-img2 {
            width: calc((128 / var(--sx)) * 100vw);
            margin: calc((9 / var(--sx)) * 100vw) auto 0;
        }
        .purposehalf-keyBenefits--hydration-img3-wrap {
            width: calc((172 / var(--sx)) * 100vw);
            margin: calc((35 / var(--sx)) * 100vw) auto 0;
        }
        .purposehalf-keyBenefits--hydration-img3 {
            width: calc((92 / var(--sx)) * 100vw);
            top: calc((-17 / var(--sx)) * 100vw);
            left: calc((-16 / var(--sx)) * 100vw);
        }
        .purposehalf-keyBenefits--hydration-img5 {
            width: calc((158 / var(--sx)) * 100vw);
            margin: calc((7 / var(--sx)) * 100vw) auto 0;
        }
        .purposehalf-keyBenefits--hydration-img6 {
            width: calc((14 / var(--sx)) * 100vw);
            margin: calc((13 / var(--sx)) * 100vw) auto 0;
        }
        .purposehalf-keyBenefits--hydration-img7-wrap {
            margin-top: calc((16 / var(--sx)) * 100vw);
        }
        .purposehalf-keyBenefits--hydration-img7 {
            width: calc((60 / var(--sx)) * 100vw);
            right: calc((-20 / var(--sx)) * 100vw);
            top: calc((-52 / var(--sx)) * 100vw);
        }
        .purposehalf-keyBenefits--hydration-img8 {
            width: calc((91 / var(--sx)) * 100vw);
        }
        .purposehalf-keyBenefits--hydration-img9 {
            width: calc((176 / var(--sx)) * 100vw);
            margin: calc((6 / var(--sx)) * 100vw) auto 0;
        }
        .purposehalf-keyBenefits--hydration-img10,
        .purposehalf-keyBenefits--hydration-img11 {
            width: calc((176 / var(--sx)) * 100vw);
        }
        .purposehalf-keyBenefits--hydration-arrow {
            width: calc(100% + ((10 / var(--sx)) * 100vw) * 2);
            margin: calc((34 / var(--sx)) * 100vw) 0 0 calc((-10 / var(--sx)) * 100vw);
            border-top-width: calc((1 / var(--sx)) * 100vw);
        }
        .purposehalf-keyBenefits--hydration-arrow::before {
            width: calc(29px * var(--x));
            height: calc(18px * var(--x));
            top: calc(-9px * var(--x));
            left: calc(50% - ((29px * var(--x)) / 2));

            width: calc((29 / var(--sx)) * 100vw);
            height: calc((18 / var(--sx)) * 100vw);
            top: calc((-9 / var(--sx)) * 100vw);
            left: calc(50% - (((29 / var(--sx)) * 100vw) / 2));
        }
        .purposehalf-keyBenefits--hydration-arrow img {
            width: calc((21 / var(--sx)) * 100vw);
            height: calc((18 / var(--sx)) * 100vw);
            top: calc((-9 / var(--sx)) * 100vw);
            left: calc(50% - (((21 / var(--sx)) * 100vw) / 2));
        }
        .purposehalf-keyBenefits--hydration-img12 {
            width: calc((166 / var(--sx)) * 100vw);
            margin: calc((35 / var(--sx)) * 100vw) auto 0;
        }
        .purposehalf-keyBenefits--hydration-note {
            width: calc((180 / var(--sx)) * 100vw);
            margin: calc((8 / var(--sx)) * 100vw) auto 0;
        }
        .purposehalf-keyBenefits--hydration-img13 {
            margin: calc((40 / var(--sx)) * 100vw) auto 0;
        }
    }
}

/* kit */
#purposehalf .purposehalf-kit {
    margin-top: calc(35px * var(--x));
    background-color: #fff;

    .purposehalf-kit--title {
        width: calc(90px * var(--x));
        aspect-ratio: 90 / 21;
        margin: 0 auto;
    }
    .purposehalf-kit--lead {
        width: calc(161px * var(--x));
        aspect-ratio: 161 / 52;
        margin: calc(26px * var(--x)) auto 0;
        position: relative;
        z-index: 1;
    }
    .purposehalf-kit--img1-wrap {
        width: 100%;
        margin: calc(-28px * var(--x)) auto 0;
        position: relative;
        z-index: 0;
    }
    .purposehalf-kit--img1 {
        width: calc(201px * var(--x));
        aspect-ratio: 201 / 219;
        margin-left: calc(8px * var(--x));
    }
    .purposehalf-kit--rank {
        width: calc(57px * var(--x));
        aspect-ratio: 1 / 1;
        position: absolute;
        top: calc(41px * var(--x));
        left: calc(11px * var(--x));
    }
    .purposehalf-kit--img2 {
        width: calc(50px * var(--x));
        aspect-ratio: 1 /1;
        position: absolute;
        right: 0;
        bottom: calc(10px * var(--x));
    }
    .purposehalf-kit--img3 {
        width: calc(117px * var(--x));
        aspect-ratio: 117 / 17;
        position: absolute;
        bottom: calc(5px * var(--x));
        left: calc(50% - ((117px * var(--x)) / 2));
    }
    .purposehalf-kit--img4-wrap {
        width: calc(163px * var(--x));
        margin: calc(0px * var(--x)) auto 0;
        position: relative;
    }
    .purposehalf-kit--img4 {
        width: 100%;
        aspect-ratio: 164 / 55;
    }
    .purposehalf-kit--img5 {
        width: calc(34px * var(--x));
        aspect-ratio: 1 / 1;
        position: absolute;
        left: calc(-20px * var(--x));
        bottom: calc(-21px * var(--x));
        z-index: 1;
    }
    .purposehalf-kit--img6 {
        width: calc(172px * var(--x));
        aspect-ratio: 172 / 50;
        margin: calc(3px * var(--x)) auto 0;
    }
    .purposehalf-kit--img7 {
        width: calc(171px * var(--x));
        aspect-ratio: 171 / 85;
        margin: calc(6px * var(--x)) auto 0;
    }
    .purposehalf-kit--note {
        width: calc(165px * var(--x));
        aspect-ratio: 165 / 20;
        margin: calc(7px * var(--x)) auto 0;
    }
    .purposehalf-kit--btn {
        margin: calc(26px * var(--x)) auto 0;
    }
    .purchase-code--input input {
        background-image: url(../img/input_gray.png);
    }
    @media screen and (max-width: 768px) {
        margin-top: calc((35 / var(--sx)) * 100vw);

        .purposehalf-kit--title {
            width: calc((90 / var(--sx)) * 100vw);
        }
        .purposehalf-kit--lead {
            width: calc((161 / var(--sx)) * 100vw);
            margin: calc((26 / var(--sx)) * 100vw) auto 0;
        }
        .purposehalf-kit--img1-wrap {
            /* margin: calc((30 / var(--sx)) * 100vw) auto 0; */
        }
        .purposehalf-kit--img1 {
            width: calc((201 / var(--sx)) * 100vw);
            margin-left: calc((8 / var(--sx)) * 100vw);
        }
        .purposehalf-kit--rank {
            width: calc((57 / var(--sx)) * 100vw);
            top: calc((41 / var(--sx)) * 100vw);
            left: calc((11 / var(--sx)) * 100vw);
        }
        .purposehalf-kit--img2 {
            width: calc((50 / var(--sx)) * 100vw);
            bottom: calc((10 / var(--sx)) * 100vw);
        }
        .purposehalf-kit--img3 {
            width: calc((117 / var(--sx)) * 100vw);
            bottom: calc((5 / var(--sx)) * 100vw);
            left: calc(50% - (((117 / var(--sx)) * 100vw) / 2));
        }
        .purposehalf-kit--img4-wrap {
            width: calc((163 / var(--sx)) * 100vw);
            margin: 0 auto;
        }
        .purposehalf-kit--img5 {
            width: calc((34 / var(--sx)) * 100vw);
            left: calc((-20 / var(--sx)) * 100vw);
            bottom: calc((-21 / var(--sx)) * 100vw);
        }
        .purposehalf-kit--img6 {
            width: calc((172 / var(--sx)) * 100vw);
            margin: calc((3 / var(--sx)) * 100vw) auto 0;
        }
        .purposehalf-kit--img7 {
            width: calc((171 / var(--sx)) * 100vw);
            margin: calc((6 / var(--sx)) * 100vw) auto 0;
        }
        .purposehalf-kit--note {
            width: calc((165 / var(--sx)) * 100vw);
            margin: calc((7 / var(--sx)) * 100vw) auto 0;
        }
        .purposehalf-kit--btn {
            margin: calc((26 / var(--sx)) * 100vw) auto 0;
        }
    }
}

/* Who It's For */
#purposehalf .purposehalf-whoitsfor {
    margin-top: calc(8px * var(--x));
    padding-top: calc(80px * var(--x));
    position: relative;
    overflow: hidden;

    &::before {
        display: block;
        content: "";
        width: 100%;
        aspect-ratio: 1277 / 170;
        background: #fff url(../img/whoitsfor_bg1.png) no-repeat center bottom / 100% auto;
        position: absolute;
        top: calc(52px * var(--x));
    }
    .purposehalf-whoitsfor--recommend {
        background-image: url(../img/whoitsfor_bg2.jpg);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: bottom center;
        padding-bottom: calc(250px * var(--x));
        overflow: hidden;
        background-color: var(--pink);
    }
    .purposehalf-whoitsfor--title {
        width: calc(154px * var(--x));
        aspect-ratio: 154 / 50;
        margin: calc(50px * var(--x)) auto 0;
        position: relative;
        z-index: 1;
    }
    .purposehalf-whoitsfor--icons-i {
        aspect-ratio: 1 / 1;
        position: absolute;
        z-index: 0;
    }
    .purposehalf-whoitsfor--icons-i.-icon1 {
        width: calc(51px * var(--x));
        top: calc(30px * var(--x));
        right: calc(35px * var(--x));
        animation: floating 3s linear infinite;
    }
    .purposehalf-whoitsfor--icons-i.-icon2 {
        width: calc(117px * var(--x));
        left: calc(-20px * var(--x));
        top: calc(107px * var(--x));
        animation: floating 3s linear .5s infinite;
    }
    .purposehalf-whoitsfor--icons-i.-icon3 {
        width: calc(36px * var(--x));
        left: calc(25px * var(--x));
        top: calc(375px * var(--x));
        animation: floating 3s linear infinite;
    }
    .purposehalf-whoitsfor--icons-i.-icon4 {
        width: calc(80px * var(--x));
        right: calc(-25px * var(--x));
        top: calc(545px * var(--x));
        animation: floating 3s linear infinite;
    }
    .purposehalf-whoitsfor--text1-wrap {
        display: flex;
        justify-content: flex-end;
        position: relative;
        z-index: 1;
        margin-top: calc(51px * var(--x));
    }
    .purposehalf-whoitsfor--text1 {
        width: calc(148px * var(--x));
        aspect-ratio: 148 / 100;
        position: absolute;
        top: calc(-13px * var(--x));
        left: calc(17px * var(--x));
        z-index: 1;
    }
    .purposehalf-whoitsfor--img1 {
        width: calc(181px * var(--x));
        aspect-ratio: 181 / 187;
    }
    .purposehalf-whoitsfor--text2-wrap {
        position: relative;
        margin-top: calc(4px * var(--x));
    }
    .purposehalf-whoitsfor--text2 {
        width: calc(113px * var(--x));
        aspect-ratio: 113 / 98;
        position: absolute;
        top: calc(0px * var(--x));
        right: calc(11px * var(--x));
        z-index: 1;
    }
    .purposehalf-whoitsfor--img2 {
        width: calc(174px * var(--x));
        aspect-ratio: 174 / 173;
    }
    .purposehalf-whoitsfor--text3-wrap {
        display: flex;
        justify-content: flex-end;
        position: relative;
        margin-top: calc(10px * var(--x));
    }
    .purposehalf-whoitsfor--text3 {
        width: calc(130px * var(--x));
        aspect-ratio: 130 / 100;
        position: absolute;
        left: calc(17px * var(--x));
        bottom: calc(-22px * var(--x));
        z-index: 1;
    }
    .purposehalf-whoitsfor--img3 {
        width: calc(158px * var(--x));
        aspect-ratio: 158 / 131;
        margin-right: calc(9px * var(--x));
    }
    .purposehalf-whoitsfor--text4 {
        width: calc(175px * var(--x));
        aspect-ratio: 175 / 45;
        margin: calc(72px * var(--x)) auto 0;
    }
    .purposehalf-whoitsfor--text5 {
        width: calc(82px * var(--x));
        aspect-ratio: 82 / 17;
        margin: calc(28px * var(--x)) auto 0;
    }
    .purposehalf-whoitsfor--list {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        column-gap: calc(10px * var(--x));
        row-gap: calc(5px * var(--x));
        margin-top: calc(5px * var(--x));
    }
    .purposehalf-whoitsfor--list-i {
        width: calc(82px * var(--x));
        aspect-ratio: 1 / 1;
    }
    /* product */
    .purposehalf-whoitsfor--product {
        background-color: #fff;
        position: relative;
        padding-top: calc(53px * var(--x));
        padding-bottom: calc(47px * var(--x));
    }
    .purposehalf-whoitsfor--img8 {
        width: calc(96px * var(--x));
        aspect-ratio: 96 / 98;
        position: absolute;
        top: calc(-18px * var(--x));
        left: 0;
    }
    .purposehalf-whoitsfor--img9 {
        width: calc(46px * var(--x));
        aspect-ratio: 46 / 30;
        position: absolute;
        top: calc(13px * var(--x));
        right: calc(16px * var(--x));
    }
    .purposehalf-whoitsfor--img10 {
        width: calc(208px * var(--x));
        aspect-ratio: 208 / 189;
    }
    .purposehalf-whoitsfor--text6 {
        width: calc(178px * var(--x));
        aspect-ratio: 178 / 42;
        margin: calc(-9px * var(--x)) auto 0;
    }
    .purposehalf-whoitsfor--text7 {
        width: calc(173px * var(--x));
        aspect-ratio: 173 / 47;
        margin: calc(9px * var(--x)) auto 0;
    }
    .purposehalf-whoitsfor--text8 {
        width: calc(174px * var(--x));
        ascent-override: 174 / 23;
        margin: calc(2px * var(--x)) auto 0;
    }
    .purposehalf-whoitsfor--text9-wrap {
        width: calc(174px * var(--x));
        margin: calc(7px * var(--x)) auto 0;
        position: relative;
    }
    .purposehalf-whoitsfor--text9 {
        width: calc(132px * var(--x));
        aspect-ratio: 132 / 32;
    }
    .purposehalf-whoitsfor--img11 {
        width: calc(89px * var(--x));
        aspect-ratio: 89 / 93;
        position: absolute;
        top: calc(-30px * var(--x));
        right: calc(-20px * var(--x));
    }
    .purposehalf-whoitsfor--btn {
        margin: calc(23px * var(--x)) auto 0;
    }
    @media screen and (max-width: 768px) {
        /* margin-top: calc((8 / var(--sx)) * 100vw); */
        padding-top: calc((80 / var(--sx)) * 100vw);

        &::before {
            top: calc((53 / var(--sx)) * 100vw);
        }
        .purposehalf-whoitsfor--recommend {
            padding-bottom: calc((250 / var(--sx)) * 100vw);
        }
        .purposehalf-whoitsfor--title {
            width: calc((154 / var(--sx)) * 100vw);
            margin: calc((48 / var(--sx)) * 100vw) auto 0;
        }
        .purposehalf-whoitsfor--icons-i.-icon1 {
            width: calc((51 / var(--sx)) * 100vw);
            top: calc((30 / var(--sx)) * 100vw);
            right: calc((35 / var(--sx)) * 100vw);
        }
        .purposehalf-whoitsfor--icons-i.-icon2 {
            width: calc((117 / var(--sx)) * 100vw);
            left: calc((-20 / var(--sx)) * 100vw);
            top: calc((107 / var(--sx)) * 100vw);
        }
        .purposehalf-whoitsfor--icons-i.-icon3 {
            width: calc((36 / var(--sx)) * 100vw);
            left: calc((25 / var(--sx)) * 100vw);
            top: calc((375 / var(--sx)) * 100vw);
        }
        .purposehalf-whoitsfor--icons-i.-icon4 {
            width: calc((80 / var(--sx)) * 100vw);
            right: calc((-25 / var(--sx)) * 100vw);
            top: calc((545 / var(--sx)) * 100vw);
        }
        .purposehalf-whoitsfor--text1-wrap {
            margin-top: calc((51 / var(--sx)) * 100vw);
        }
        .purposehalf-whoitsfor--text1 {
            width: calc((148 / var(--sx)) * 100vw);
            top: calc((-13 / var(--sx)) * 100vw);
            left: calc((17 / var(--sx)) * 100vw);
        }
        .purposehalf-whoitsfor--img1 {
            width: calc((181 / var(--sx)) * 100vw);
        }
        .purposehalf-whoitsfor--text2-wrap {
            margin-top: calc((4 / var(--sx)) * 100vw);
        }
        .purposehalf-whoitsfor--text2 {
            width: calc((113 / var(--sx)) * 100vw);
            top: 0;
            right: calc((11 / var(--sx)) * 100vw);
        }
        .purposehalf-whoitsfor--img2 {
            width: calc((174 / var(--sx)) * 100vw);
        }
        .purposehalf-whoitsfor--text3-wrap {
            margin-top: calc((10 / var(--sx)) * 100vw);
        }
        .purposehalf-whoitsfor--text3 {
            width: calc((130 / var(--sx)) * 100vw);
            left: calc((17 / var(--sx)) * 100vw);
            bottom: calc((-22 / var(--sx)) * 100vw);
        }
        .purposehalf-whoitsfor--img3 {
            width: calc((158 / var(--sx)) * 100vw);
            margin-right: calc((9 / var(--sx)) * 100vw);
        }
        .purposehalf-whoitsfor--text4 {
            width: calc((175 / var(--sx)) * 100vw);
            margin: calc((72 / var(--sx)) * 100vw) auto 0;
        }
        .purposehalf-whoitsfor--text5 {
            width: calc((82 / var(--sx)) * 100vw);
            margin: calc((28 / var(--sx)) * 100vw) auto 0;
        }
        .purposehalf-whoitsfor--list {
            column-gap: calc((10 / var(--sx)) * 100vw);
            row-gap: calc((5 / var(--sx)) * 100vw);
            margin-top: calc((5 / var(--sx)) * 100vw);
        }
        .purposehalf-whoitsfor--list-i {
            width: calc((82 / var(--sx)) * 100vw);
        }
        /* product */
        .purposehalf-whoitsfor--product {
            padding-top: calc((53 / var(--sx)) * 100vw);
            padding-bottom: calc((47 / var(--sx)) * 100vw);
        }
        .purposehalf-whoitsfor--img8 {
            width: calc((96 / var(--sx)) * 100vw);
            top: calc((-18 / var(--sx)) * 100vw);
        }
        .purposehalf-whoitsfor--img9 {
            width: calc((46 / var(--sx)) * 100vw);
            top: calc((13 / var(--sx)) * 100vw);
            right: calc((16 / var(--sx)) * 100vw);
        }
        .purposehalf-whoitsfor--img10 {
            width: calc((208 / var(--sx)) * 100vw);
        }
        .purposehalf-whoitsfor--text6 {
            width: calc((178 / var(--sx)) * 100vw);
            margin: calc((-9 / var(--sx)) * 100vw) auto 0;
        }
        .purposehalf-whoitsfor--text7 {
            width: calc((173 / var(--sx)) * 100vw);
            margin: calc((9 / var(--sx)) * 100vw) auto 0;
        }
        .purposehalf-whoitsfor--text8 {
            width: calc((174 / var(--sx)) * 100vw);
            margin: calc((2 / var(--sx)) * 100vw) auto 0;
        }
        .purposehalf-whoitsfor--text9-wrap {
            width: calc((174 / var(--sx)) * 100vw);
            margin: calc((7 / var(--sx)) * 100vw) auto 0;
        }
        .purposehalf-whoitsfor--text9 {
            width: calc((132 / var(--sx)) * 100vw);
        }
        .purposehalf-whoitsfor--img11 {
            width: calc((89 / var(--sx)) * 100vw);
            top: calc((-30 / var(--sx)) * 100vw);
            right: calc((-20 / var(--sx)) * 100vw);
        }
        .purposehalf-whoitsfor--btn {
            margin: calc((23 / var(--sx)) * 100vw) auto 0;
        }
    }
}

/* How To */
#purposehalf .purposehalf-howto {
    padding: calc(84px * var(--x)) 0 calc(6px * var(--x));
    background-color: #f5f3f2;
    position: relative;
    overflow: visible;

    &::before {
        display: block;
        content: "";
        width: 100%;
        height: calc(53px * var(--x));
        background: url(../img/howto_bg.png) no-repeat center / cover;
        position: absolute;
        top: calc(-25px * var(--x));
    }
    &::after {
        display: block;
        content: "";
        width: 100%;
        aspect-ratio: 213 / 53;
        background: #fff url(../img/howto_bg3.png) no-repeat center / cover;
        position: absolute;
        bottom: calc(-50px * var(--x));
    }
    .purposehalf-howto--wrap {
        width: calc(192px * var(--x));
        margin: 0 auto;
        border: calc(1px * var(--x)) solid #898989;
        border-radius: calc(15px * var(--x));
        background: url(../img/howto_bg2.png) repeat left top / calc(10px * var(--x));
        padding-bottom: calc(13px * var(--x));
        position: relative;
    }
    .purposehalf-howto--wrap::before {
        display: block;
        content: "";
        width: 100%;
        aspect-ratio: 192 / 91;
        background-color: var(--pink2);
        border-radius: calc(14px * var(--x)) calc(14px * var(--x)) 0 0;
        position: absolute;
        top: 0;
        left: 0;
    }
    .purposehalf-howto--title {
        width: calc(93px * var(--x));
        aspect-ratio: 93 / 46;
        margin: calc(21px * var(--x)) auto 0;
        position: relative;
        z-index: 1;
    }
    .purposehalf-howto--text1 {
        width: calc(69px * var(--x));
        aspect-ratio: 69 / 37;
        margin: calc(7px * var(--x)) auto 0;
        position: relative;
        z-index: 1;
    }
    .purposehalf-howto--text2 {
        width: calc(78px * var(--x));
        aspect-ratio: 78 / 31;
        margin: calc(21px * var(--x)) auto 0;
    }
    .purposehalf-howto--img1 {
        width: calc(177px * var(--x));
        aspect-ratio: 177 / 79;
        margin: calc(13px * var(--x)) auto 0;
    }
    .purposehalf-howto--text3 {
        width: calc(139px * var(--x));
        aspect-ratio: 139 / 50;
        margin: calc(15px * var(--x)) auto 0;
    }
    .purposehalf-howto--img2 {
        width: calc(99px * var(--x));
        aspect-ratio: 99 / 106;
        margin: calc(17px * var(--x)) auto 0;
    }
    .purposehalf-howto--text4 {
        width: calc(126px * var(--x));
        aspect-ratio: 126 / 23;
        margin: calc(8px * var(--x)) auto 0;
    }
    .purposehalf-howto--arrow {
        width: calc(17px * var(--x));
        aspect-ratio: 17 / 10;
        margin: calc(19px * var(--x)) auto 0;
    }
    .purposehalf-howto--img3-wrap {
        margin-top: calc(3px * var(--x));
        position: relative;
    }
    .purposehalf-howto--img3 {
        width: calc(66px * var(--x));
        aspect-ratio: 66 / 69;
        position: absolute;
        right: calc(-12px * var(--x));
        top: calc(-20px * var(--x));
        z-index: 1;
    }
    .purposehalf-howto--img4 {
        width: calc(208px * var(--x));
        aspect-ratio: 208 / 187;
    }
    .purposehalf-howto--text5 {
        width: calc(123px * var(--x));
        aspect-ratio: 123 / 9;
        margin: calc(-3px * var(--x)) auto 0;
    }
    .purposehalf-howto--video {
        width: calc(167px * var(--x));
        aspect-ratio: 167 / 113;
        margin: calc(9px * var(--x)) auto 0;
        border-radius: calc(8px * var(--x));
        overflow: hidden;
    }
    .purposehalf-howto--video iframe {
        display: block;
        width: 100%;
        height: 100%;
    }
    @media screen and (max-width: 768px) {
        padding: calc((56 / var(--sx)) * 100vw) 0 calc((6 / var(--sx)) * 100vw);

        &::before {
            height: calc((53 / var(--sx)) * 100vw);
        }
        &::after {
            bottom: calc((-50 / var(--sx)) * 100vw);
        }
        .purposehalf-howto--wrap {
            width: calc((192 / var(--sx)) * 100vw);
            border-width: calc((1 / var(--sx)) * 100vw);
            border-radius: calc((15 / var(--sx)) * 100vw);
            padding-bottom: calc((13 / var(--sx)) * 100vw);
        }
        .purposehalf-howto--wrap::before {
            border-radius: calc((14 / var(--sx)) * 100vw) calc((14 / var(--sx)) * 100vw) 0 0;
        }
        .purposehalf-howto--title {
            width: calc((93 / var(--sx)) * 100vw);
            margin: calc((21 / var(--sx)) * 100vw) auto 0;
        }
        .purposehalf-howto--text1 {
            width: calc((69 / var(--sx)) * 100vw);
            margin: calc((7 / var(--sx)) * 100vw) auto 0;
        }
        .purposehalf-howto--text2 {
            width: calc((78 / var(--sx)) * 100vw);
            marker: calc((21 / var(--sx)) * 100vw) auto 0;
        }
        .purposehalf-howto--img1 {
            width: calc((177 / var(--sx)) * 100vw);
            margin: calc((13 / var(--sx)) * 100vw) auto 0;
        }
        .purposehalf-howto--text3 {
            width: calc((139 / var(--sx)) * 100vw);
            margin: calc((15 / var(--sx)) * 100vw) auto 0;
        }
        .purposehalf-howto--img2 {
            width: calc((99 / var(--sx)) * 100vw);
            margin: calc((17 / var(--sx)) * 100vw) auto 0;
        }
        .purposehalf-howto--text4 {
            width: calc((126 / var(--sx)) * 100vw);
            margin: calc((8 / var(--sx)) * 100vw) auto 0;
        }
        .purposehalf-howto--arrow {
            width: calc((17 / var(--sx)) * 100vw);
            margin: calc((19 / var(--sx)) * 100vw) auto 0;
        }
        .purposehalf-howto--img3-wrap {
            margin-top: calc((3 / var(--sx)) * 100vw);
        }
        .purposehalf-howto--img3 {
            width: calc((66 / var(--sx)) * 100vw);
            right: calc((-8 / var(--sx)) * 100vw);
            top: calc((-20 / var(--sx)) * 100vw);
        }
        .purposehalf-howto--img4 {
            width: calc((208 / var(--sx)) * 100vw);
        }
        .purposehalf-howto--text5 {
            width: calc((123 / var(--sx)) * 100vw);
            margin: calc((-3 / var(--sx)) * 100vw) auto 0;
        }
        .purposehalf-howto--video {
            width: calc((167 / var(--sx)) * 100vw);
            margin: calc((9 / var(--sx)) * 100vw) auto 0;
            border-radius: calc((8 / var(--sx)) * 100vw);
        }
    }
}

/* check */
#purposehalf .purposehalf-check {
    width: calc(187px * var(--x));
    background-color: #fff;
    margin: calc(80px * var(--x)) auto 0;
    border: calc(1.7px * var(--x)) solid var(--pink2);
    border-radius: calc(12.8px * var(--x));
    position: relative;

    .purposehalf-check--title {
        width: calc(123px * var(--x));
        aspect-ratio: 123 / 34;
        margin: calc(23px * var(--x)) auto calc(25px * var(--x));
    }
    .purposehalf-check--text1 {
        width: calc(55px * var(--x));
        aspect-ratio: 55 / 58;
        position: absolute;
        top: calc(-25px * var(--x));
        left: calc(-14px * var(--x));
    }
    .purposehalf-check--steps {
        background-color: var(--gray);
        border-radius: 0 0 calc(13px * var(--x)) calc(13px * var(--x));
        overflow: hidden;
    }
    .purposehalf-check--steps::before {
        display: block;
        content: "";
        width: 100%;
        aspect-ratio: 189 / 5;
        background: #fff url(../img/check_border.png) no-repeat center / cover;
    }
    .purposehalf-check--text2 {
        width: calc(150px * var(--x));
        aspect-ratio: 150 / 35;
        margin: calc(26px * var(--x)) auto calc(27px * var(--x));
    }
    .purposehalf-check--step1,
    .purposehalf-check--step2,
    .purposehalf-check--step3 {
        width: 100%;
        border-top: 2px solid var(--pink2);
    }
    .purposehalf-check--step1 img,
    .purposehalf-check--step2 img,
    .purposehalf-check--step3 img {
        width: calc(38px * var(--x));
        aspect-ratio: 34 / 13;
        margin: calc(-7px * var(--x)) auto calc(-7px * var(--x));
    }
    .purposehalf-check--text3 {
        width: calc(158px * var(--x));
        aspect-ratio: 158 / 16;
        margin: calc(12px * var(--x)) auto;
    }
    .purposehalf-check--img1 {
        width: 100%;
        padding: calc(7px * var(--x)) 0 calc(12px * var(--x));
        border-top: 1px solid var(--pink2);
    }
    .purposehalf-check--img1 img {
        width: calc(150px * var(--x));
        aspect-ratio: 150 / 87;
        margin: 0 auto;
    }
    .purposehalf-check--text4 {
        width: calc(166px * var(--x));
        aspect-ratio: 166 / 16;
        margin: calc(12px * var(--x)) auto;
    }
    .purposehalf-check--img2 {
        width: 100%;
        padding: calc(7px * var(--x)) 0 calc(12px * var(--x));
        border-top: 1px solid var(--pink2);
    }
    .purposehalf-check--img2 img {
        width: calc(150px * var(--x));
        aspect-ratio: 150 / 87;
        margin: 0 auto;
    }
    .purposehalf-check--text5 {
        width: calc(145px * var(--x));
        aspect-ratio: 145 / 16;
        margin: calc(12px * var(--x)) auto;
    }
    .purposehalf-check--img3 {
        width: 100%;
        padding: calc(3px * var(--x)) 0 0;
        border-top: 1px solid var(--pink2);
    }
    .purposehalf-check--img3 img {
        width: calc(168px * var(--x));
        aspect-ratio: 168 / 84;
        margin: 0 auto calc(5px * var(--x));
    }
    .purposehalf-check--img3::after {
        display: block;
        content: "";
        width: 100%;
        aspect-ratio: 189 / 5;
        background: #fff url(../img/check_border.png) no-repeat center / cover;
    }
    .purposehalf-check--text6 {
        width: 100%;
        background-color: #fff;
    }
    .purposehalf-check--text6 img {
        width: calc(153px * var(--x));
        aspect-ratio: 153 / 90;
        margin: calc(0px * var(--x)) auto 0;
    }
    @media screen and (max-width: 768px) {
        width: calc((187 / var(--sx)) * 100vw);
        margin: calc((80 / var(--sx)) * 100vw) auto 0;
        border-width: calc((1.7 / var(--sx)) * 100vw);
        border-radius: calc((12.8 / var(--sx)) * 100vw);

        .purposehalf-check--title {
            width: calc((123 / var(--sx)) * 100vw);
            margin: calc((23 / var(--sx)) * 100vw) auto calc((25 / var(--sx)) * 100vw);
        }
        .purposehalf-check--text1 {
            width: calc((55 / var(--sx)) * 100vw);
            top: calc((-25 / var(--sx)) * 100vw);
            left: calc((-14 / var(--sx)) * 100vw);
        }
        .purposehalf-check--steps {
            border-radius: 0 0 calc((13 / var(--sx)) * 100vw) calc((13 / var(--sx)) * 100vw);
        }
        .purposehalf-check--text2 {
            width: calc((150 / var(--sx)) * 100vw);
            margin: calc((26 / var(--sx)) * 100vw) auto calc((27 / var(--sx)) * 100vw);
        }
        .purposehalf-check--step1,
        .purposehalf-check--step2,
        .purposehalf-check--step3 {
            border-top-width: calc((2 / var(--sx)) * 100vw);
        }
        .purposehalf-check--step1 img,
        .purposehalf-check--step2 img,
        .purposehalf-check--step3 img {
            width: calc((38 / var(--sx)) * 100vw);
            margin: calc((-7 / var(--sx)) * 100vw) auto;
        }
        .purposehalf-check--text3 {
            width: calc((158 / var(--sx)) * 100vw);
            margin: calc((12 / var(--sx)) * 100vw) auto;
        }
        .purposehalf-check--img1 {
            padding: calc((7 / var(--sx)) * 100vw) 0 calc((12 / var(--sx)) * 100vw);
            border-top-width: calc((1 / var(--sx)) * 100vw);
        }
        .purposehalf-check--img1 img {
            width: calc((150 / var(--sx)) * 100vw);
        }
        .purposehalf-check--text4 {
            width: calc((166 / var(--sx)) * 100vw);
            margin: calc((12 / var(--sx)) * 100vw) auto;
        }
        .purposehalf-check--img2 {
            padding: calc((7 / var(--sx)) * 100vw) 0 calc((12 / var(--sx)) * 100vw);
            border-top-width: calc((1 / var(--sx)) * 100vw);
        }
        .purposehalf-check--img2 img {
            width: calc((150 / var(--sx)) * 100vw);
        }
        .purposehalf-check--text5 {
            width: calc((145 / var(--sx)) * 100vw);
            margin: calc((12 / var(--sx)) * 100vw) auto;
        }
        .purposehalf-check--img3 {
            padding: calc((3 / var(--sx)) * 100vw) 0 0;
            border-top-width: calc((1 / var(--sx)) * 100vw);
        }
        .purposehalf-check--img3 img {
            width: calc((160 / var(--sx)) * 100vw);
            margin: 0 auto calc((5 / var(--sx)) * 100vw);
        }
        .purposehalf-check--text6 img {
            width: calc((153 / var(--sx)) * 100vw);
        }
    }
}

/* voice */
#purposehalf .purposehalf-voice {
    margin-top: calc(48px * var(--x));
    background: url(../img/voice_bg.png) repeat left top / calc(10px * var(--x));
    padding: calc(57px * var(--x)) 0 calc(94px * var(--x));

    .purposehalf-voice--title {
        width: calc(84px * var(--x));
        aspect-ratio: 84 / 45;
        margin: 0 auto;
    }
    .purposehalf-voice--list {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        column-gap: calc(7px * var(--x));
        row-gap: calc(6px * var(--x));
        margin-top: calc(28px * var(--x));
    }
    .purposehalf-voice--list-i {
        width: calc(94px * var(--x));
    }
    .purposehalf-voice--text1 {
        width: calc(90px * var(--x));
        aspect-ratio: 90 / 14;
        margin: calc(32px * var(--x)) auto 0;
    }
    .purposehalf-voice--img5 {
        width: calc(109px * var(--x));
        aspect-ratio: 109 / 40;
        margin: calc(-4px * var(--x)) auto 0;
    }
    .purposehalf-voice--text2 {
        width: calc(120px * var(--x));
        aspect-ratio: 120 / 18;
        margin: calc(5px * var(--x)) auto 0;
    }
    .purposehalf-voice--img6 {
        width: calc(196px * var(--x));
        aspect-ratio: 196 / 65;
        margin: 0 auto;
    }
    .purposehalf-voice--img7 {
        width: calc(196px * var(--x));
        aspect-ratio: 196 / 65;
        margin: calc(-10px * var(--x)) auto 0;
    }
    .purposehalf-voice--text3 {
        width: calc(111px * var(--x));
        aspect-ratio: 111 / 12;
        margin: calc(10px * var(--x)) auto 0;
    }
    @media screen and (max-width: 768px) {
        margin-top: calc((48 / var(--sx)) * 100vw);
        padding-top: calc((48 / var(--sx)) * 100vw);

        .purposehalf-voice--title {
            width: calc((84 / var(--sx)) * 100vw);
        }
        .purposehalf-voice--list {
            column-gap: calc((7 / var(--sx)) * 100vw);
            row-gap: calc((6 / var(--sx)) * 100vw);
            margin-top: calc((28 / var(--sx)) * 100vw);
        }
        .purposehalf-voice--list-i {
            width: calc((94 / var(--sx)) * 100vw);
        }
        .purposehalf-voice--text1 {
            width: calc((90 / var(--sx)) * 100vw);
            margin: calc((32 / var(--sx)) * 100vw) auto 0;
        }
        .purposehalf-voice--img5 {
            width: calc((109 / var(--sx)) * 100vw);
            margin: calc((-4 / var(--sx)) * 100vw) auto 0;
        }
        .purposehalf-voice--text2 {
            width: calc((120 / var(--sx)) * 100vw);
            margin: calc((5 / var(--sx)) * 100vw) auto 0;
        }
        .purposehalf-voice--img6 {
            width: calc((196 / var(--sx)) * 100vw);
        }
        .purposehalf-voice--img7 {
            width: calc((196 / var(--sx)) * 100vw);
            margin: calc((-10 / var(--sx)) * 100vw) auto 0;
        }
        .purposehalf-voice--text3 {
            width: calc((111 / var(--sx)) * 100vw);
            margin: calc((10 / var(--sx)) * 100vw) auto 0;
        }
    }
}

/* product2 */
#purposehalf .purposehalf-product2 {
        background: url(../img/product2_bg.png) no-repeat center top 0 / 430px auto;
        padding: calc(112px * var(--x)) 0 calc(80px * var(--x));
        margin-top: calc(-30px * var(--x));
        position: relative;

    .purposehalf-product2--title {
        width: calc(169px * var(--x));
        aspect-ratio: 169 / 49;
        margin: 0 auto;
    }
    .purposehalf-product2-text1 {
        width: calc(86px * var(--x));
        aspect-ratio: 86 / 20;
        margin: calc(30px * var(--x)) auto 0;
    }
    .purposehalf-product2-img1 {
        width: calc(84px * var(--x));
        aspect-ratio: 1 / 1;
        position: absolute;
        left: calc(10px * var(--x));
        top: calc(310px * var(--x));
    }
    .purposehalf-product2-text2 {
        width: calc(148px * var(--x));
        aspect-ratio: 148 / 20;
        margin: calc(190px * var(--x)) auto 0;
    }
    .purposehalf-product2-text3 {
        width: calc(152px * var(--x));
        aspect-ratio: 152 / 50;
        margin: calc(9px * var(--x)) auto 0;
    }
    .purposehalf-product2-text4 {
        width: calc(113px * var(--x));
        aspect-ratio: 113 / 9;
        margin: calc(25px * var(--x)) 0 0 calc(35px * var(--x));
    }
    .purposehalf-product2-text5 {
        width: calc(140px * var(--x));
        aspect-ratio: 140 / 33;
        margin: calc(3px * var(--x)) 0 0 calc(33px * var(--x));
    }
    .purposehalf-product2-text6 {
        width: calc(41px * var(--x));
        aspect-ratio: 1 / 1;
        position: absolute;
        right: calc(10px * var(--x));
        top: calc(529px * var(--x));
        z-index: 1;
    }
    .purposehalf-product2-text7 {
        width: calc(161px * var(--x));
        aspect-ratio: 161 / 23;
        margin: calc(17px * var(--x)) auto 0;
    }
    .purposehalf-product2-text8 {
        width: calc(153px * var(--x));
        aspect-ratio: 153 / 19;
        margin: calc(2px * var(--x)) auto 0;
    }
    .purposehalf-product2-btn {
        margin: calc(34px * var(--x)) auto 0;
    }
    @media screen and (max-width: 768px) {
        background-size: 100% auto;
        padding: calc((109 / var(--sx)) * 100vw) 0 calc((80 / var(--sx)) * 100vw);
        margin-top: calc((-30 / var(--sx)) * 100vw);

        .purposehalf-product2--title {
            width: calc((169 / var(--sx)) * 100vw);
        }
        .purposehalf-product2-text1 {
            width: calc((86 / var(--sx)) * 100vw);
            margin: calc((30 / var(--sx)) * 100vw) auto 0;
        }
        .purposehalf-product2-img1 {
            width: calc((84 / var(--sx)) * 100vw);
            left: calc((10 / var(--sx)) * 100vw);
            top: calc((300 / var(--sx)) * 100vw);
        }
        .purposehalf-product2-text2 {
            width: calc((148 / var(--sx)) * 100vw);
            margin: calc((190 / var(--sx)) * 100vw) auto 0;
        }
        .purposehalf-product2-text3 {
            width: calc((152 / var(--sx)) * 100vw);
            margin: calc((9 / var(--sx)) * 100vw) auto 0;
        }
        .purposehalf-product2-text4 {
            width: calc((113 / var(--sx)) * 100vw);
            margin: calc((25 / var(--sx)) * 100vw) 0 0 calc((35 / var(--sx)) * 100vw);
        }
        .purposehalf-product2-text5 {
            width: calc((140 / var(--sx)) * 100vw);
            margin: calc((3 / var(--sx)) * 100vw) 0 0 calc((33 / var(--sx)) * 100vw);
        }
        .purposehalf-product2-text6 {
            width: calc((41 / var(--sx)) * 100vw);
            right: calc((10 / var(--sx)) * 100vw);
            top: calc((529 / var(--sx)) * 100vw);
        }
        .purposehalf-product2-text7 {
            width: calc((161 / var(--sx)) * 100vw);
            margin: calc((17 / var(--sx)) * 100vw) auto 0;
        }
        .purposehalf-product2-text8 {
            width: calc((153 / var(--sx)) * 100vw);
            margin: calc((2 / var(--sx)) * 100vw) auto 0;
        }
        .purposehalf-product2-btn {
            margin: calc(34px * var(--x)) auto 0;
            margin: calc((34/ var(--sx)) * 100vw) auto 0;
        }
    }
}

/* about2 */
#purposehalf .purposehalf-about2 {
    background-color: var(--pink);
    position: relative;
    margin-top: calc(-30px * var(--x));
    padding-top: calc(46px * var(--x));
    padding-bottom: calc(80px * var(--x));

    &::before {
        display: block;
        content: "";
        width: 100%;
        aspect-ratio: 213 / 98;
        background: url(../img/about2_bg.png) no-repeat center top / cover;
        position: absolute;
        top: calc(-27px * var(--x));
    }
    .purposehalf-about2--title {
        width: calc(91px * var(--x));
        aspect-ratio: 91 / 49;
        margin: 0 auto;
        position: relative;
        z-index: 1;
    }
    .purposehalf-about2--text1 {
        width: calc(30px * var(--x));
        aspect-ratio: 30 / 8;
        margin: calc(22px * var(--x)) 0 0 calc(24px * var(--x));
    }
    .purposehalf-about2--text2 {
        width: calc(131px * var(--x));
        aspect-ratio: 131 / 41;
        margin: calc(22px * var(--x)) 0 0 calc(24px * var(--x));
    }
    .purposehalf-about2--text3 {
        width: calc(167px * var(--x));
        aspect-ratio: 167 / 153;
        margin: calc(25px * var(--x)) 0 0 calc(24px * var(--x));
    }
    .purposehalf-about2--text4 {
        width: calc(108px * var(--x));
        aspect-ratio: 108 / 14;
        margin: calc(45px * var(--x)) auto 0;
    }
    .purposehalf-about2--text4 a {
        display: block;
    }
    .purposehalf-about2--btn {
        width: calc(181px * var(--x));
        aspect-ratio: 181 / 128;
        margin: calc(13px * var(--x)) auto 0;
    }
    .purposehalf-about2--btn a {
        display: block;
        width: 100%;
        height: 100%;
        border-radius: calc(12px * var(--x));
        position: relative;
        transition: .1s;
    }
    .purposehalf-about2--btn a:hover {
        scale: .99;
        translate: 0 1px;
    }
    .purposehalf-about2--btn a img {
        position: relative;
    }
    .purposehalf-about2--btn a::before {
        display: block;
        content: "";
        width: 99%;
        height: 99%;
        border-radius: calc(12px * var(--x));
        background-color: rgba(0, 0, 0, .2);
        position: absolute;
        top: calc(6px * var(--x));
        left: calc(7px * var(--x));
        z-index: 0;
        transition: .1s;
    }
    .purposehalf-about2--btn a:hover::before {
        opacity: 0;
    }
    .purposehalf-about2--logo {
        width: calc(127px * var(--x));
        aspect-ratio: 127 / 76;
        margin: calc(54px * var(--x)) auto 0;
    }
    @media screen and (max-width: 768px) {
        margin-top: calc((-30 / var(--sx)) * 100vw);
        padding-top: calc((46 / var(--sx)) * 100vw);
        padding-bottom: calc((80 / var(--sx)) * 100vw);

        .purposehalf-about2::before {
            top: calc((-37 / var(--sx)) * 100vw);
        }
        .purposehalf-about2--title {
            width: calc((91 / var(--sx)) * 100vw);
        }
        .purposehalf-about2--text1 {
            width: calc((30 / var(--sx)) * 100vw);
            margin: calc((22 / var(--sx)) * 100vw) 0 0 calc((24 / var(--sx)) * 100vw);
        }
        .purposehalf-about2--text2 {
            width: calc((131 / var(--sx)) * 100vw);
            margin: calc((22 / var(--sx)) * 100vw) 0 0 calc((24 / var(--sx)) * 100vw);
        }
        .purposehalf-about2--text3 {
            width: calc((167 / var(--sx)) * 100vw);
            margin: calc((25 / var(--sx)) * 100vw) 0 0 calc((24 / var(--sx)) * 100vw);
        }
        .purposehalf-about2--text4 {
            width: calc((108 / var(--sx)) * 100vw);
            margin: calc((45 / var(--sx)) * 100vw) auto 0;
        }
        .purposehalf-about2--btn {
            width: calc((181 / var(--sx)) * 100vw);
            margin: calc((13 / var(--sx)) * 100vw) auto 0;
        }
        .purposehalf-about2--btn a {
            border-radius: calc((12 / var(--sx)) * 100vw);
        }
        .purposehalf-about2--btn a::before {
            border-radius: calc((12 / var(--sx)) * 100vw);
            top: calc((6 / var(--sx)) * 100vw);
            left: calc((7 / var(--sx)) * 100vw);
        }
        .purposehalf-about2--logo {
            width: calc((127 / var(--sx)) * 100vw);
            margin: calc((54 / var(--sx)) * 100vw) auto 0;
        }
    }
}