@charset "UTF-8";
/* ---------------------------------------------
*   l-wrapper
--------------------------------------------- */
.l-wrapper.lang-th {
    font-family: var(--ff-Kanit);
    word-break: break-word;
    line-break: anywhere;
}

/* ---------------------------------------------
*   l-header
--------------------------------------------- */
.l-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 110px;
    z-index: 9;
    background-color: var(--color-base-1);
    box-sizing: border-box;
    font-family: var(--ff-root);
}
@media screen and (max-width: 1060px) {
    .l-header {
        height: 74px;
    }
}
.l-header__contents {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 41px;
}
@media screen and (max-width: 1060px) {
    .l-header__contents {
        gap: 7px;
    }
}
@media screen and (max-width: 750px) {
    .l-header__contents {
        gap: calc(7 / var(--design-width) * 100vw);
    }
}
@media screen and (min-width: 1061px) {
    .l-header__copo {
        display: none;
    }
}
@media (hover: hover) and (pointer: fine) {
    .l-header__copo-link {
        transition: opacity var(--hover-duration);
    }
    .l-header__copo-link:hover {
        opacity: var(--hover-opacity-ratio);
    }
}
@media screen and (max-width: 1060px) {
    .l-header__copo-link {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        margin-top: 56px;
        padding-inline: 27px 0;
    }
}
@media screen and (max-width: 750px) {
    .l-header__copo-link {
        gap: calc(10 / var(--design-width) * 100vw);
        margin-top: calc(56 / var(--design-width) * 100vw);
        padding-inline: calc(45 / var(--design-width) * 100vw);
    }
}
@media screen and (max-width: 1060px) {
    .l-header__copo-link-ico {
        flex-shrink: 0;
        width: 48px;
    }
}
@media screen and (max-width: 750px) {
    .l-header__copo-link-ico {
        width: calc(48 / var(--design-width) * 100vw);
    }
}
.l-header__copo-link-ico img {
    width: 100%;
    height: auto;
}
@media screen and (max-width: 1060px) {
    .l-header__copo-link-txt {
        width: 167px;
        font-size: calc(16 / var(--root-fz) * 1rem);
        font-weight: 400;
        line-height: 1.5;
    }
}
@media screen and (max-width: 750px) {
    .l-header__copo-link-txt {
        width: calc(167 / var(--design-width) * 100vw);
    }
}

/*  l-header-container
--------------------------------------------- */
.l-header-container {
    display: flex;
    align-items: center;
    height: 100%;
    padding-inline: 42px;
}
@media screen and (max-width: 1060px) {
    .l-header-container {
        padding-inline: 16px;
    }
}

/*  l-header-logo
--------------------------------------------- */
.l-header-logo {
    margin-right: auto;
    padding-top: calc(13 / var(--design-width) * 100vw);
}
.l-header-logo__link {
    display: block;
    width: 210px;
}
@media (hover: hover) and (pointer: fine) {
    .l-header-logo__link {
        transition: opacity var(--hover-duration);
    }
    .l-header-logo__link:hover {
        opacity: var(--hover-opacity-ratio);
    }
}
@media screen and (max-width: 1060px) {
    .l-header-logo__link {
        width: 155px;
    }
}
.l-header-logo__link img {
    width: 100%;
    height: auto;
}

/*  l-header-nav
--------------------------------------------- */
.l-header-nav {
    height: 100%;
}
@media screen and (min-width: 1061px) {
    .l-header-nav {
        display: block !important;
    }
}
@media screen and (max-width: 1060px) {
    .l-header-nav {
        position: fixed;
        top: 74px;
        left: 0;
        width: 100%;
        height: calc(100% - 74px);
        overflow-y: auto;
        display: none;
        background-color: black;
    }
}
@media screen and (max-width: 750px) {
    .l-header-nav {
        padding: calc(63 / var(--design-width) * 100vw) calc(45 / var(--design-width) * 100vw) calc(20 / var(--design-width) * 100vw);
    }
}
.js-menu-opened .l-header-nav {
    display: block;
}

.l-header-nav__list {
    display: flex;
    gap: 32px;
}
@media screen and (max-width: 1060px) {
    .l-header-nav__list {
        flex-direction: column;
        gap: calc(26 / var(--design-width) * 100vw);
    }
}
.l-header-nav__link {
    padding-block: 10px;
    font-size: calc(16 / var(--root-fz) * 1rem);
    font-weight: 700;
    line-height: 1.25;
}
@media screen and (max-width: 1060px) {
    .l-header-nav__link {
        display: block;
        padding: calc(10 / var(--design-width) * 100vw);
        text-align: center;
        font-size: calc(30 / var(--root-fz) * 1rem);
        line-height: 1.2333333333;
    }
}
@media (hover: hover) and (pointer: fine) {
    .l-header-nav__link {
        transition: color 0.3s;
    }
    .l-header-nav__link:hover {
        color: var(--color-blue-4);
    }
}

/*  l-header-menu-button
--------------------------------------------- */
.l-header-menu-button {
    display: none;
    position: relative;
    padding: 15px;
    border: 0;
    border-radius: 0;
    background: none;
    margin: 0;
    box-shadow: none;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    outline: none;
    touch-action: manipulation;
    cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
    .l-header-menu-button {
        transition: opacity var(--hover-duration);
    }
    .l-header-menu-button:hover {
        opacity: var(--hover-opacity-ratio);
    }
}
@media screen and (max-width: 1060px) {
    .l-header-menu-button {
        display: block;
    }
}
.l-header-menu-button__lines {
    position: relative;
    display: block;
    width: 28px;
    height: 20px;
}
.l-header-menu-button__line {
    position: absolute;
    left: 0;
    display: block;
    width: 100%;
    height: 0;
    padding-top: 2px;
    background-color: var(--color-white-1);
    border-radius: 22px;
    transition: 0.3s;
}
.l-header-menu-button__line--top {
    top: 0;
}
.js-menu-opened .l-header-menu-button__line--top {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}

.l-header-menu-button__line--center {
    top: 50%;
    margin-top: -1px;
}
.js-menu-opened .l-header-menu-button__line--center {
    background-color: rgba(0, 0, 0, 0);
}

.l-header-menu-button__line--bottom {
    bottom: 0;
}
.js-menu-opened .l-header-menu-button__line--bottom {
    bottom: 50%;
    transform: translateY(50%) rotate(-45deg);
}

/* ---------------------------------------------
*   l-contents
--------------------------------------------- */
.l-contents {
    padding-top: 110px;
    background-color: var(--color-black-1);
}
@media screen and (max-width: 1060px) {
    .l-contents {
        padding-top: 74px;
    }
}

/* ---------------------------------------------
*   l-footer
--------------------------------------------- */
.l-footer {
    background: url(/en-lp/assets/img/img_footer_bg.png) no-repeat center center/cover;
    background-color: var(--color-black-1);
}
@media screen and (max-width: 750px) {
    .l-footer {
        background-image: url(/en-lp/assets/img/sp/img_footer_bg.png);
    }
}
.l-footer__container {
    margin-inline: auto;
    padding: 80px 5.25% 18px;
    max-width: 1200px;
}
@media screen and (min-width: 1201px) {
    .l-footer__container {
        padding-inline: 63px;
    }
}
@media screen and (max-width: 750px) {
    .l-footer__container {
        padding: calc(64 / var(--design-width) * 100vw) calc(20 / var(--design-width) * 100vw) calc(20 / var(--design-width) * 100vw);
    }
}
.l-footer__contents {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-direction: row-reverse;
    gap: 0.9310986965%;
}
@media screen and (max-width: 750px) {
    .l-footer__contents {
        flex-direction: column;
        gap: calc(48 / var(--design-width) * 100vw);
    }
}
.l-footer__img {
    flex-shrink: 0;
    width: 47.0204841713%;
}
@media screen and (max-width: 750px) {
    .l-footer__img {
        width: 100%;
    }
}
.l-footer__img img {
    width: 100%;
    height: auto;
}
@media print, screen and (min-width: 751px) {
    .l-footer__wrap {
        padding: 15px 0 0 8px;
    }
}
.l-footer__ttl {
    display: block;
    width: 88.160291439%;
    font-size: calc(24 / var(--root-fz) * 1rem);
    font-weight: 700;
    line-height: 1.2083333333;
}
@media screen and (max-width: 750px) {
    .l-footer__ttl {
        width: calc(244 / var(--design-width) * 100vw);
        font-size: calc(24 / var(--root-fz) * 1rem);
    }
}
.l-footer__txt {
    display: block;
    margin-top: 42px;
    width: 91.985428051%;
    font-family: var(--ff-roboto);
    font-size: calc(18 / var(--root-fz) * 1rem);
    font-weight: 400;
    line-height: 1.5;
}
@media screen and (max-width: 750px) {
    .l-footer__txt {
        margin-top: calc(20 / var(--design-width) * 100vw);
        font-size: calc(18 / var(--root-fz) * 1rem);
    }
}
.l-footer--th .l-footer__txt {
    width: 100%;
    font-family: var(--ff-Kanit);
}
.l-footer__lower {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-top: 74px;
}
@media screen and (max-width: 750px) {
    .l-footer__lower {
        flex-direction: column;
        gap: calc(48 / var(--design-width) * 100vw);
        margin-top: calc(30 / var(--design-width) * 100vw);
    }
}
.l-footer__link {
    display: flex;
    align-items: center;
    gap: 11px;
}
@media (hover: hover) and (pointer: fine) {
    .l-footer__link {
        transition: opacity var(--hover-duration);
    }
    .l-footer__link:hover {
        opacity: var(--hover-opacity-ratio);
    }
}
@media screen and (max-width: 750px) {
    .l-footer__link {
        gap: calc(10 / var(--design-width) * 100vw);
    }
}
.l-footer__link-ico {
    width: 48px;
}
@media screen and (max-width: 750px) {
    .l-footer__link-ico {
        width: calc(48 / var(--design-width) * 100vw);
    }
}
.l-footer__link-ico img {
    width: 100%;
    height: auto;
}
.l-footer__link-txt {
    font-size: calc(18 / var(--root-fz) * 1rem);
    font-family: var(--ff-root);
    font-weight: 400;
    line-height: 1.5;
}
@media screen and (max-width: 750px) {
    .l-footer__link-txt {
        font-size: calc(18 / var(--root-fz) * 1rem);
    }
}
.l-footer__copyright-txt {
    font-family: var(--ff-roboto);
    font-size: calc(14 / var(--root-fz) * 1rem);
    font-weight: 500;
    line-height: 1.4285714286;
    letter-spacing: 0.1px;
    line-break: auto;
}
@media screen and (max-width: 750px) {
    .l-footer__copyright-txt {
        font-size: calc(12 / var(--root-fz) * 1rem);
    }
}

/* ---------------------------------------------
*   c-acc
--------------------------------------------- */
.c-acc {
    position: relative;
}
@media (hover: hover) and (pointer: fine) {
    .c-acc__head {
        transition: opacity var(--hover-duration);
    }
    .c-acc__head:hover {
        opacity: var(--hover-opacity-ratio);
    }
}
@media print, screen and (min-width: 1061px) {
    .c-acc__head {
        position: relative;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 36px 10px 24px;
        border: 1px solid var(--color-white-1);
        border-radius: 22px;
    }
}
@media screen and (max-width: 1060px) {
    .c-acc__head {
        display: block;
        height: 100%;
    }
}
@media print, screen and (min-width: 1061px) {
    .c-acc__head::after {
        content: "";
        position: absolute;
        top: 50%;
        right: 15px;
        transform: translateY(-50%) rotate(180deg);
        width: 18px;
        height: 18px;
        background: url(/en-lp/assets/img/ico_arw_white.svg) no-repeat center center/contain;
        transition: transform 0.3s;
    }
}
@media print, screen and (min-width: 1061px) {
    .c-acc.is-open .c-acc__head::after {
        transform: translateY(-50%) rotate(0deg);
    }
}
.c-acc__head-ico {
    display: inline-block;
    width: 18px;
}
@media screen and (max-width: 1060px) {
    .c-acc__head-ico {
        width: 24px;
    }
}
.c-acc__head-ico img {
    width: 100%;
    height: auto;
}
.c-acc__head-txt {
    color: var(--color-white-1);
    font-family: var(--ff-root);
    font-size: calc(16 / var(--root-fz) * 1rem);
    font-weight: 700;
    line-height: 1.25;
}
@media screen and (max-width: 1060px) {
    .c-acc__head-txt {
        display: none;
    }
}
.c-acc__head-txt--th {
    font-family: var(--ff-Kanit);
    font-weight: 500;
}
.c-acc__body {
    position: absolute;
    width: 100%;
}
@media screen and (max-width: 1060px) {
    .c-acc__body {
        width: 99px;
        transform: translateX(-10%);
    }
}
@media screen and (max-width: 1060px) {
    .c-acc__list {
        margin-top: 5px;
    }
}
.c-acc__link {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 4px;
    padding: 10px 29px;
    width: 100%;
    color: var(--color-white-1);
    font-family: var(--ff-root);
    font-size: calc(16 / var(--root-fz) * 1rem);
    font-weight: 700;
    line-height: 1.25;
    border-radius: 22px;
    background-color: var(--color-blue-1);
}
@media screen and (max-width: 1060px) {
    .c-acc__link {
        margin-top: 3px;
        padding: 10px;
    }
}
@media screen and (max-width: 750px) {
    .c-acc__link {
        font-size: 16px;
    }
}
.c-acc__link--th {
    font-family: var(--ff-Kanit);
    font-weight: 500;
}
.c-acc__link + .c-acc__link {
    margin-top: 3px;
}
@media (hover: hover) and (pointer: fine) {
    .c-acc__link {
        transition: background-color 0.3s;
    }
    .c-acc__link:hover {
        background-color: var(--color-blue-3);
    }
}

/* ---------------------------------------------
*   c-block-benefits
--------------------------------------------- */
.c-block-benefits {
    margin-top: 60px;
}
@media screen and (max-width: 750px) {
    .c-block-benefits {
        margin-top: calc(48 / var(--design-width) * 100vw);
    }
}
.c-block-benefits__inner {
    padding: 38px 5.9701492537% 49px;
    background: url(/en-lp/assets/img/img_benefits_contents_bg_l.png) no-repeat center center/cover;
    border: 1px solid var(--color-black-3);
    border-radius: 20px;
}
@media screen and (max-width: 750px) {
    .c-block-benefits__inner {
        padding: calc(38 / var(--design-width) * 100vw) calc(10 / var(--design-width) * 100vw) calc(23 / var(--design-width) * 100vw);
        border-width: calc(1 / var(--design-width) * 100vw);
        border-radius: calc(20 / var(--design-width) * 100vw);
    }
}
.c-block-benefits__ttl {
    display: block;
    margin-inline: auto;
    width: 780px;
    align-self: stretch;
    text-align: center;
    color: var(--color-white-1);
    font-size: calc(32 / var(--root-fz) * 1rem);
    font-weight: 700;
    line-height: 1.21875;
}
@media screen and (max-width: 1000px) {
    .c-block-benefits__ttl {
        width: 100%;
    }
}
@media screen and (max-width: 750px) {
    .c-block-benefits__ttl {
        font-size: calc(32 / var(--root-fz) * 1rem);
    }
}
.c-block-benefits__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: flex-start;
    gap: 5.0739957717%;
    margin-top: 90px;
}
@media screen and (max-width: 750px) {
    .c-block-benefits__list {
        gap: calc(7 / var(--design-width) * 100vw);
        margin-top: calc(90 / var(--design-width) * 100vw);
        padding-inline: calc(10 / var(--design-width) * 100vw);
    }
}
@media screen and (max-width: 750px) {
    .lang-th .c-block-benefits__list {
        gap: calc(6 / var(--design-width) * 100vw);
        padding-inline: calc(7 / var(--design-width) * 100vw);
    }
}

@media screen and (max-width: 750px) {
    .windows.edge .lang-th .c-block-benefits__list {
        gap: calc(5 / var(--design-width) * 100vw);
        padding-inline: calc(3 / var(--design-width) * 100vw);
    }
}

@media screen and (max-width: 750px) {
    .windows.chrome .lang-th .c-block-benefits__list {
        gap: calc(5 / var(--design-width) * 100vw);
        padding-inline: calc(3 / var(--design-width) * 100vw);
    }
}

.c-block-benefits__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
}
@media screen and (max-width: 750px) {
    .c-block-benefits__item {
        gap: calc(24 / var(--design-width) * 100vw);
    }
}
.c-block-benefits__ico {
    width: 55px;
}
@media screen and (max-width: 750px) {
    .c-block-benefits__ico {
        width: calc(45 / var(--design-width) * 100vw);
    }
}
.c-block-benefits__ico img {
    width: 100%;
    height: auto;
}
.c-block-benefits__item-ttl {
    display: block;
    align-self: stretch;
    text-align: center;
    color: var(--color-white-1);
    font-family: var(--ff-roboto);
    font-size: calc(32 / var(--root-fz) * 1rem);
    font-weight: 700;
    line-height: 1.3125;
}
@media screen and (max-width: 750px) {
    .c-block-benefits__item-ttl {
        text-align: left;
        font-size: calc(24 / var(--root-fz) * 1rem);
        line-height: 1.2916666667;
    }
}
.lang-th .c-block-benefits__item-ttl {
    font-family: var(--ff-Kanit);
    font-weight: 500;
}
@media screen and (max-width: 750px) {
    .lang-th .c-block-benefits__item-ttl {
        font-size: calc(15 / var(--root-fz) * 1rem);
    }
}

.c-block-benefits__item-txt {
    display: block;
    align-self: stretch;
    text-align: center;
    color: var(--color-white-1);
    font-family: var(--ff-roboto);
    font-size: calc(16 / var(--root-fz) * 1rem);
    font-weight: 400;
    line-height: 1.5;
}
@media screen and (max-width: 750px) {
    .c-block-benefits__item-txt {
        text-align: left;
        font-size: calc(14 / var(--root-fz) * 1rem);
        line-height: 1.5;
    }
}
.lang-th .c-block-benefits__item-txt {
    font-family: var(--ff-Kanit);
}
@media screen and (max-width: 750px) {
    .lang-th .c-block-benefits__item-txt {
        font-size: calc(12 / var(--root-fz) * 1rem);
    }
}

/* ---------------------------------------------
*   c-btn-fixed
--------------------------------------------- */
.c-btn-fixed {
    position: fixed;
    bottom: 18px;
    right: 37px;
    width: 335px;
    height: 135px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    z-index: 7;
}
@media screen and (max-width: 750px) {
    .c-btn-fixed {
        right: calc(25 / var(--design-width) * 100vw);
        bottom: calc(19 / var(--design-width) * 100vw);
        width: calc(165 / var(--design-width) * 100vw);
        height: calc(59 / var(--design-width) * 100vw);
    }
}
.c-btn-fixed.is-show {
    opacity: 1;
    visibility: visible;
}
.c-btn-fixed__close {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(15%, -30%);
    z-index: 8;
}
@media (hover: hover) and (pointer: fine) {
    .c-btn-fixed__close {
        transition: opacity var(--hover-duration);
    }
    .c-btn-fixed__close:hover {
        opacity: var(--hover-opacity-ratio);
    }
}
@media screen and (max-width: 750px) {
    .c-btn-fixed__close {
        width: calc(29 / var(--design-width) * 100vw);
        height: calc(29 / var(--design-width) * 100vw);
        transform: translate(30%, -50%);
    }
}
.c-btn-fixed__link {
    display: block;
    width: 100%;
    height: 100%;
    background-color: var(--color-blue-3);
    border-radius: 20px;
}
@media (hover: hover) and (pointer: fine) {
    .c-btn-fixed__link {
        transition: opacity var(--hover-duration);
    }
    .c-btn-fixed__link:hover {
        opacity: var(--hover-opacity-ratio);
    }
}
@media screen and (max-width: 750px) {
    .c-btn-fixed__link {
        border-radius: calc(10 / var(--design-width) * 100vw);
    }
}
.c-btn-fixed__inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 20px 21px;
    height: 100%;
}
@media screen and (max-width: 750px) {
    .c-btn-fixed__inner {
        gap: calc(14 / var(--design-width) * 100vw);
        padding: calc(7 / var(--design-width) * 100vw) calc(32 / var(--design-width) * 100vw) calc(6 / var(--design-width) * 100vw) calc(18 / var(--design-width) * 100vw);
    }
}
.c-btn-fixed__inner::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 26px;
    transform: translateY(-50%);
    width: 17px;
    height: 16px;
    background: url(/en-lp/assets/img/ico_arw_btn.svg) no-repeat center center/contain;
}
@media screen and (max-width: 750px) {
    .c-btn-fixed__inner::after {
        right: calc(13 / var(--design-width) * 100vw);
        transform: translateY(-55%);
        width: calc(17 / var(--design-width) * 100vw);
        height: calc(16 / var(--design-width) * 100vw);
    }
}
.c-btn-fixed__img {
    flex-shrink: 0;
    width: 96px;
}
@media screen and (max-width: 750px) {
    .c-btn-fixed__img {
        display: none;
    }
}
.c-btn-fixed__img img {
    width: 100%;
    height: auto;
}
.c-btn-fixed__txt {
    display: block;
    font-size: calc(18 / var(--root-fz) * 1rem);
    font-weight: 700;
    line-height: 1.5;
}
@media screen and (max-width: 750px) {
    .c-btn-fixed__txt {
        font-size: calc(15 / var(--root-fz) * 1rem);
        line-height: 1.5333333333;
    }
}
.lang-th .c-btn-fixed__txt {
    font-weight: 500;
}
@media screen and (max-width: 750px) {
    .lang-th .c-btn-fixed__txt {
        font-size: calc(14 / var(--root-fz) * 1rem);
    }
}

/* ---------------------------------------------
*   c-card-intro
--------------------------------------------- */
.c-card-intro {
    padding: 20px;
    width: 100%;
    height: 100%;
    border: 1px solid var(--color-black-3);
    border-radius: 20px;
    background: url(/en-lp/assets/img/img_intro_card_bg.png) no-repeat center center/cover;
}
@media screen and (max-width: 750px) {
    .c-card-intro {
        padding: calc(20 / var(--design-width) * 100vw);
        border: calc(1 / var(--design-width) * 100vw) solid var(--color-gray-4);
        border-radius: calc(20 / var(--design-width) * 100vw);
        background-image: url(/en-lp/assets/img/sp/img_intro_card_bg.png);
        background-color: rgba(0, 0, 0, 0.2);
    }
}
.c-card-intro__ttl {
    display: block;
    font-family: var(--ff-roboto);
    font-size: calc(32 / var(--root-fz) * 1rem);
    font-weight: 700;
    line-height: 1.3125;
}
@media screen and (max-width: 900px) {
    .c-card-intro__ttl {
        line-height: 1.1875;
    }
}
@media screen and (max-width: 750px) {
    .c-card-intro__ttl {
        font-size: calc(24 / var(--root-fz) * 1rem);
        line-height: 1.2916666667;
    }
}
.lang-th .c-card-intro__ttl {
    font-family: var(--ff-Kanit);
}
@media print, screen and (min-width: 751px) {
    .lang-th .c-card-intro__ttl {
        font-size: calc(28 / var(--root-fz) * 1rem);
    }
}

.c-card-intro__txt {
    margin-top: 24px;
    font-family: var(--ff-roboto);
    font-size: calc(16 / var(--root-fz) * 1rem);
    font-weight: 400;
    line-height: 1.5;
}
@media screen and (max-width: 750px) {
    .c-card-intro__txt {
        margin-top: calc(20 / var(--design-width) * 100vw);
        font-size: calc(16 / var(--root-fz) * 1rem);
    }
}
.lang-th .c-card-intro__txt {
    font-family: var(--ff-Kanit);
}
@media screen and (max-width: 750px) {
    .lang-th .c-card-intro__txt {
        font-size: calc(14 / var(--root-fz) * 1rem);
    }
}

/* ---------------------------------------------
*   c-card-benefits
--------------------------------------------- */
.c-card-benefits {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 19px;
    height: 100%;
    background: url(/en-lp/assets/img/img_benefits_contents_bg.png) no-repeat center center/cover;
    border: 1px solid var(--color-black-3);
    border-radius: 20px;
}
@media screen and (max-width: 750px) {
    .c-card-benefits {
        gap: calc(32 / var(--design-width) * 100vw);
        padding: calc(19 / var(--design-width) * 100vw);
        border-width: calc(1 / var(--design-width) * 100vw);
        border-radius: calc(20 / var(--design-width) * 100vw);
    }
}
.c-card-benefits__img {
    width: 100%;
}
.c-card-benefits__img img {
    width: 100%;
    height: auto;
}
.c-card-benefits__ttl {
    display: block;
    align-self: stretch;
    font-family: var(--ff-roboto);
    font-size: calc(32 / var(--root-fz) * 1rem);
    font-weight: 700;
    line-height: 1.3125;
}
@media screen and (max-width: 900px) {
    .c-card-benefits__ttl {
        line-height: 1.1875;
    }
}
@media screen and (max-width: 750px) {
    .c-card-benefits__ttl {
        font-size: calc(24 / var(--root-fz) * 1rem);
        line-height: 1.2916666667;
    }
}
.lang-th .c-card-benefits__ttl {
    font-family: var(--ff-Kanit);
    font-weight: 500;
    line-height: 1.2857142857;
    font-size: calc(28 / var(--root-fz) * 1rem);
}
@media screen and (max-width: 750px) {
    .lang-th .c-card-benefits__ttl {
        text-align: center;
        font-size: calc(24 / var(--root-fz) * 1rem);
        line-height: 1.2916666667;
    }
}

.c-card-benefits__txt {
    margin-top: 24px;
    font-family: var(--ff-roboto);
    font-size: calc(16 / var(--root-fz) * 1rem);
    font-weight: 400;
    line-height: 1.5;
}
@media screen and (max-width: 750px) {
    .c-card-benefits__txt {
        margin-top: calc(24 / var(--design-width) * 100vw);
        font-size: calc(16 / var(--root-fz) * 1rem);
    }
}
.lang-th .c-card-benefits__txt {
    font-family: var(--ff-Kanit);
    font-size: calc(15 / var(--root-fz) * 1rem);
    font-weight: 300;
    letter-spacing: -0.01em;
}

.c-card-benefits__note {
    display: block;
    margin-top: 30px;
    font-family: var(--ff-roboto);
    font-size: calc(12 / var(--root-fz) * 1rem);
    font-weight: 400;
    line-height: 1.5;
}
@media screen and (max-width: 750px) {
    .c-card-benefits__note {
        margin-top: calc(20 / var(--design-width) * 100vw);
        font-size: calc(12 / var(--root-fz) * 1rem);
    }
}
.c-card-benefits__note span {
    vertical-align: top;
}
.lang-th .c-card-benefits__note {
    font-size: calc(16 / var(--root-fz) * 1rem);
    font-family: var(--ff-Kanit);
    line-height: 1.5;
}
@media screen and (max-width: 750px) {
    .lang-th .c-card-benefits__note {
        font-size: calc(16 / var(--root-fz) * 1rem);
    }
}

/* ---------------------------------------------
*   c-card-demo
--------------------------------------------- */
.c-card-demo {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
    height: 100%;
    gap: 27px;
    padding: 20px;
    height: 100%;
    border: 1px solid rgba(0, 85, 255, 0.3);
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
}
@media screen and (max-width: 750px) {
    .c-card-demo {
        gap: calc(24 / var(--design-width) * 100vw);
        padding: calc(20 / var(--design-width) * 100vw);
        border-width: calc(1 / var(--design-width) * 100vw);
        border-radius: calc(20 / var(--design-width) * 100vw);
    }
}
.c-section-demo__list--4col .c-card-demo {
    gap: 19px;
    padding: 20px 10px;
}
@media screen and (max-width: 750px) {
    .c-section-demo__list--4col .c-card-demo {
        gap: calc(24 / var(--design-width) * 100vw);
        padding: calc(20 / var(--design-width) * 100vw);
    }
}

.c-card-demo__ttl-wrap {
    grid-row: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}
@media screen and (max-width: 750px) {
    .c-card-demo__ttl-wrap {
        gap: calc(24 / var(--design-width) * 100vw);
    }
}
@media print, screen and (min-width: 751px) {
    .c-section-demo__list--4col .c-card-demo__ttl-wrap {
        padding-inline: 10px;
    }
}

.c-card-demo__ttl {
    align-self: stretch;
    text-align: center;
    color: var(--color-base-1);
    font-size: calc(24 / var(--root-fz) * 1rem);
    font-family: var(--ff-root);
    font-weight: 700;
    line-height: 1.2916666667;
}
@media screen and (max-width: 750px) {
    .c-card-demo__ttl {
        font-size: calc(24 / var(--root-fz) * 1rem);
    }
}
.c-card-demo__ttl--s {
    display: block;
    font-weight: 400;
}
.c-card-demo__ttl--s2 {
    font-size: calc(16 / var(--root-fz) * 1rem);
    line-height: 1.3125;
}
@media screen and (max-width: 750px) {
    .c-card-demo__ttl--s2 {
        font-size: calc(16 / var(--root-fz) * 1rem);
    }
}
.c-card-demo__txt {
    color: var(--color-base-1);
    font-family: var(--ff-roboto);
    font-size: calc(16 / var(--root-fz) * 1rem);
    font-weight: 400;
    line-height: 1.5;
}
@media screen and (max-width: 750px) {
    .c-card-demo__txt {
        width: 100%;
        font-size: calc(16 / var(--root-fz) * 1rem);
    }
}
.c-card-demo__link-wrap {
    grid-row: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
}
@media screen and (max-width: 750px) {
    .c-card-demo__link-wrap {
        gap: calc(22 / var(--design-width) * 100vw);
    }
}
.c-section-demo__list--4col .c-card-demo__link-wrap {
    gap: 14px;
}
@media screen and (max-width: 750px) {
    .c-section-demo__list--4col .c-card-demo__link-wrap {
        gap: calc(14 / var(--design-width) * 100vw);
    }
}

.c-card-demo__wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
}
@media screen and (max-width: 750px) {
    .c-card-demo__wrap {
        gap: calc(17 / var(--design-width) * 100vw);
    }
}
.c-card-demo__link {
    display: flex;
    align-items: center;
    gap: 11px;
    color: var(--color-base-1);
    font-family: var(--ff-roboto);
    font-size: calc(16 / var(--root-fz) * 1rem);
    font-weight: 400;
    line-height: 1.5;
}
@media (hover: hover) and (pointer: fine) {
    .c-card-demo__link {
        transition: opacity var(--hover-duration);
    }
    .c-card-demo__link:hover {
        opacity: var(--hover-opacity-ratio-2);
    }
}
@media screen and (max-width: 900px) {
    .c-card-demo__link {
        line-height: 1.25;
    }
}
@media screen and (max-width: 750px) {
    .c-card-demo__link {
        gap: calc(11 / var(--design-width) * 100vw);
        font-size: calc(16 / var(--root-fz) * 1rem);
    }
}
.c-card-demo__link::before {
    content: "";
    display: block;
    width: 30px;
    height: 30px;
}
@media screen and (max-width: 750px) {
    .c-card-demo__link::before {
        width: calc(30 / var(--design-width) * 100vw);
        height: calc(30 / var(--design-width) * 100vw);
    }
}
.c-card-demo__link--map::before {
    background: url(/en-lp/assets/img/ico_map.svg) no-repeat center center/contain;
}
.c-card-demo__link--tel::before {
    background: url(/en-lp/assets/img/ico_phone.svg) no-repeat center center/contain;
}
.c-card-demo__link--mail::before {
    background: url(/en-lp/assets/img/ico_mail.svg) no-repeat center center/contain;
}
.c-card-demo__link--line::before {
    background: url(/en-lp/assets/img/ico_line.svg) no-repeat center center/contain;
}

/* ---------------------------------------------
*   c-kv
--------------------------------------------- */
.c-kv {
    position: relative;
}
@media screen and (max-width: 750px) {
    .c-kv::after {
        content: "";
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 1;
    }
}
.c-kv__movie {
    margin-top: -10px;
    width: 100%;
    overflow: hidden;
}
@media screen and (max-width: 750px) {
    .c-kv__movie {
        margin-top: -2px;
        height: 660px;
    }
}
@media print, screen and (min-width: 751px) {
    .c-kv__movie video {
        width: 100%;
        aspect-ratio: 16/9;
        transform: translateY(10px);
    }
}
@media screen and (max-width: 750px) {
    .c-kv__movie video {
        position: relative;
        top: 0;
        left: 50%;
        height: 100%;
        transform: translate(-43%, 2px);
    }
}
.c-kv__contents {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
@media print, screen and (min-width: 751px) {
    .c-kv__contents {
        left: 5.4166666667%;
    }
}
@media screen and (max-width: 750px) {
    .c-kv__contents {
        z-index: 2;
    }
}
.c-kv__inner {
    width: calc(460 / var(--design-width) * 100vw);
}
@media screen and (max-width: 750px) {
    .c-kv__inner {
        padding-inline: calc(20 / var(--design-width) * 100vw);
        width: 100%;
    }
}

/* ---------------------------------------------
*   c-list-benefits
--------------------------------------------- */
.c-list-benefits {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}
@media screen and (max-width: 750px) {
    .c-list-benefits {
        grid-template-columns: repeat(1, 1fr);
        gap: calc(48 / var(--design-width) * 100vw);
    }
}

/* ---------------------------------------------
*   c-list-more
--------------------------------------------- */
.c-list-more {
    display: flex;
    align-items: stretch;
    gap: 4.4776119403%;
}
@media screen and (max-width: 750px) {
    .c-list-more {
        flex-direction: column;
        gap: calc(48 / var(--design-width) * 100vw);
    }
}
.c-list-more__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    padding: 20px;
    border: 1px solid var(--color-black-3);
    border-radius: 20px;
}
@media screen and (max-width: 750px) {
    .c-list-more__item {
        gap: calc(24 / var(--design-width) * 100vw);
        padding: calc(20 / var(--design-width) * 100vw);
        border-width: calc(1 / var(--design-width) * 100vw);
        border-radius: calc(20 / var(--design-width) * 100vw);
    }
}
.c-list-more__ttl {
    display: block;
    align-self: stretch;
    text-align: center;
    color: var(--color-white-1);
    font-size: calc(24 / var(--root-fz) * 1rem);
    font-weight: 700;
    line-height: 1.2916666667;
}
@media screen and (max-width: 750px) {
    .c-list-more__ttl {
        font-size: calc(24 / var(--root-fz) * 1rem);
    }
}
.c-list-more__txt {
    display: block;
    align-self: stretch;
    color: var(--color-white-1);
    font-family: var(--ff-roboto);
    font-size: calc(16 / var(--root-fz) * 1rem);
    font-weight: 400;
    line-height: 1.5;
}
@media screen and (max-width: 750px) {
    .c-list-more__txt {
        font-size: calc(16 / var(--root-fz) * 1rem);
    }
}
.lang-th .c-list-more__txt {
    font-family: var(--ff-Kanit);
}

/*  c-modal
--------------------------------------------- */
.c-modal {
    position: relative;
    display: none;
    z-index: 15;
}
.c-modal.is-open {
    display: block;
}
.c-modal__overlay {
    position: fixed;
    inset: 0;
    pointer-events: auto;
    background: rgba(0, 0, 0, 0.25);
}
.c-modal__inner {
    display: grid;
    place-items: center;
    height: 100%;
    max-height: 100vh;
    overflow-y: auto;
}
.c-modal__container {
    position: relative;
    z-index: 16;
    margin-block: 20px;
    width: min(100%, 600px);
    box-sizing: border-box;
    padding: 44px 30px 62px;
    border-radius: 20px;
    background-color: var(--color-white-1);
    box-shadow: 0px 4px 10px 10px rgba(0, 0, 0, 0.1);
}
.c-modal__close-btn {
    position: absolute;
    top: 17px;
    right: 22px;
    width: 48px;
    height: 48px;
    cursor: pointer;
}
.c-modal__close-btn img {
    width: 100%;
    height: auto;
}
.c-modal__icon {
    display: block;
    margin-inline: auto;
    width: 93px;
}
.c-modal__icon img {
    width: 100%;
    height: auto;
}
.c-modal__ttl {
    display: block;
    align-self: stretch;
    margin-top: 25px;
    color: var(--color-base-1);
    text-align: center;
    font-size: calc(30 / var(--root-fz) * 1rem);
    font-weight: 700;
    line-height: 1.2333333333;
}
.c-modal__txt {
    margin: 25px auto 0;
    width: 452px;
    color: var(--color-base-1);
    text-align: center;
    font-size: calc(20 / var(--root-fz) * 1rem);
    font-weight: 400;
    line-height: 1.2;
}
.c-modal__qr {
    margin: 20px auto 0;
    width: 360px;
}
.c-modal__qr img {
    width: 100%;
    height: auto;
}

/* Modal Animation Style　(アニメーション不要の場合は削除)
--------------------------------------------- */
.c-modal[aria-hidden=false] .c-modal__overlay {
    animation: mmfadeIn 0.5s cubic-bezier(0, 0, 0.2, 1);
}
.c-modal[aria-hidden=false] .c-modal__container {
    animation: mmfadeIn 0.5s cubic-bezier(0, 0, 0.2, 1);
}
.c-modal[aria-hidden=true] .c-modal__overlay {
    animation: mmfadeOut 0.3s cubic-bezier(0, 0, 0.2, 1);
}
.c-modal[aria-hidden=true] .c-modal__container {
    animation: mmfadeOut 0.3s cubic-bezier(0, 0, 0.2, 1);
}
.c-modal__overlay, .c-modal__container {
    will-change: transform;
}

@keyframes mmfadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes mmfadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
/* ---------------------------------------------
*   c-section-intro
--------------------------------------------- */
.c-section-intro {
    position: relative;
    margin-inline: auto;
    background: url(/en-lp/assets/img/img_intro_bg.png) no-repeat bottom center;
    background-size: 1425px 975px;
}
@media screen and (max-width: 1200px) {
    .c-section-intro {
        background-size: cover;
    }
}
@media screen and (max-width: 750px) {
    .c-section-intro {
        background-image: url(/en-lp/assets/img/sp/img_intro_bg.png);
        background-position: center center;
    }
}
.c-section-intro__container {
    position: relative;
    z-index: 2;
    margin-inline: auto;
    padding: 112px 5.3333333333% 197px;
    max-width: 1200px;
}
@media screen and (min-width: 1201px) {
    .c-section-intro__container {
        padding-inline: 64px;
    }
}
@media screen and (max-width: 750px) {
    .c-section-intro__container {
        padding: calc(64 / var(--design-width) * 100vw) calc(20 / var(--design-width) * 100vw) calc(65 / var(--design-width) * 100vw);
    }
}
.c-section-intro__head {
    width: 52.4253731343%;
}
@media screen and (max-width: 750px) {
    .c-section-intro__head {
        width: 100%;
    }
}
.c-section-intro__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.052238806%;
    margin-top: 30px;
}
@media screen and (max-width: 750px) {
    .c-section-intro__list {
        grid-template-columns: repeat(1, 1fr);
        gap: calc(48 / var(--design-width) * 100vw);
        margin-top: calc(120 / var(--design-width) * 100vw);
    }
}
.c-section-intro__item {
    height: 100%;
}
@media print, screen and (min-width: 751px) {
    .c-section-intro__item {
        min-height: 322px;
    }
}
@media print, screen and (min-width: 751px) {
    .c-section-intro__item:nth-of-type(2) {
        transform: translateY(56px);
    }
}
@media print, screen and (min-width: 751px) {
    .c-section-intro__item:nth-of-type(3) {
        transform: translateY(118px);
    }
}

/* ---------------------------------------------
*   c-section-benefits
--------------------------------------------- */
.c-section-benefits__head {
    overflow: hidden;
    background: url(/en-lp/assets/img/img_benefits_bg.png) no-repeat center center/cover;
}
@media screen and (max-width: 750px) {
    .c-section-benefits__head {
        background-image: url(/en-lp/assets/img/sp/img_benefits_bg.png);
    }
}
.c-section-benefits__head-inner {
    position: relative;
    margin-inline: auto;
    padding-block: 33px 78px;
    max-width: 1200px;
}
@media screen and (max-width: 750px) {
    .c-section-benefits__head-inner {
        padding-block: calc(41 / var(--design-width) * 100vw) calc(54 / var(--design-width) * 100vw);
    }
}
@media print, screen and (min-width: 751px) {
    .c-section-benefits--th .c-section-benefits__head-inner {
        padding-bottom: 40px;
    }
}
@media print, screen and (min-width: 751px) {
    .c-section-benefits__img {
        position: absolute;
        bottom: 0;
        right: 0;
        width: min(83.1666666667%, 988px);
        height: auto;
    }
}
@media screen and (max-width: 1200px) {
    .c-section-benefits__img {
        top: 0;
        bottom: initial;
    }
}
@media screen and (max-width: 750px) {
    .c-section-benefits__img {
        width: 100%;
    }
}
.c-section-benefits__img img {
    width: 100%;
    height: auto;
    -o-object-fit: cover;
       object-fit: cover;
}
.c-section-benefits__contents {
    padding-left: 4.6666666667%;
    width: 45.75%;
}
@media screen and (max-width: 750px) {
    .c-section-benefits__contents {
        padding-inline: calc(20 / var(--design-width) * 100vw) calc(4 / var(--design-width) * 100vw);
        width: 100%;
    }
}
.c-section-benefits__badge {
    padding-top: 38px;
    width: 219px;
    height: 219px;
    background-color: var(--color-blue-3);
    border-radius: 50%;
}
@media screen and (max-width: 750px) {
    .c-section-benefits__badge {
        position: absolute;
        top: calc(338 / var(--design-width) * 100vw);
        left: calc(20 / var(--design-width) * 100vw);
        padding-top: calc(28 / var(--design-width) * 100vw);
        width: calc(205 / var(--design-width) * 100vw);
        height: calc(205 / var(--design-width) * 100vw);
    }
}
.c-section-benefits--th .c-section-benefits__badge {
    padding-top: 15px;
}
@media screen and (max-width: 750px) {
    .c-section-benefits--th .c-section-benefits__badge {
        padding-top: calc(15 / var(--design-width) * 100vw);
    }
}
.c-section-benefits__badge-txt {
    display: block;
    color: var(--color-white-1);
    text-align: center;
    font-size: calc(26 / var(--root-fz) * 1rem);
    font-weight: 500;
    line-height: 1.1923076923; /* 57.6px */
}
@media screen and (max-width: 750px) {
    .c-section-benefits__badge-txt {
        font-size: calc(26 / var(--root-fz) * 1rem);
        line-height: 1.1923076923;
    }
}
.c-section-benefits__badge-txt::first-letter {
    font-weight: 700;
}
.c-section-benefits__badge-txt--l {
    display: block;
    font-size: calc(48 / var(--root-fz) * 1rem);
    font-weight: 700;
    line-height: 1.2083333333; /* 57.6px */
}
@media screen and (max-width: 750px) {
    .c-section-benefits__badge-txt--l {
        font-size: calc(48 / var(--root-fz) * 1rem);
        line-height: 1.0833333333; /* 57.6px */
    }
}
.c-section-benefits__badge-txt--2 {
    display: block;
    line-height: 1;
}
.c-section-benefits__badge-txt--3 {
    display: block;
    margin-top: 3px;
    font-size: calc(24 / var(--root-fz) * 1rem);
    line-height: 1.625;
}
@media screen and (max-width: 750px) {
    .c-section-benefits__badge-txt--3 {
        margin-top: calc(3 / var(--design-width) * 100vw);
        font-size: calc(24 / var(--root-fz) * 1rem);
    }
}
@media screen and (max-width: 750px) {
    .iphone .c-section-benefits__badge-txt--3 {
        margin-top: calc(4 / var(--design-width) * 100vw);
    }
}

.c-section-benefits__badge-txt--4 {
    display: block;
    font-size: calc(32 / var(--root-fz) * 1rem);
    font-weight: 700;
    line-height: 1.40625;
}
@media screen and (max-width: 750px) {
    .c-section-benefits__badge-txt--4 {
        font-size: calc(32 / var(--root-fz) * 1rem);
        line-height: 1.3125;
    }
}
.c-section-benefits__badge-txt--4-s {
    display: block;
    font-size: calc(32 / var(--root-fz) * 1rem);
    font-weight: 500;
    line-height: 1.09375;
}
@media screen and (max-width: 750px) {
    .c-section-benefits__badge-txt--4-s {
        font-size: calc(32 / var(--root-fz) * 1rem);
        line-height: 1;
    }
}
.c-section-benefits__badge-txt--5 {
    display: block;
    font-size: calc(22 / var(--root-fz) * 1rem);
    font-weight: 500;
    line-height: 1.4090909091;
}
@media screen and (max-width: 750px) {
    .c-section-benefits__badge-txt--5 {
        font-size: calc(22 / var(--root-fz) * 1rem);
        line-height: 1.2727272727;
    }
}
.c-section-benefits__badge-txt--6 {
    display: block;
    font-size: calc(18 / var(--root-fz) * 1rem);
    font-weight: 500;
    line-height: 1.3888888889;
}
@media screen and (max-width: 750px) {
    .c-section-benefits__badge-txt--6 {
        font-size: calc(18 / var(--root-fz) * 1rem);
        line-height: 1.2222222222;
    }
}
.c-section-benefits__body {
    margin-inline: auto;
    padding: 116px 5.3333333333% 72px;
    max-width: 1200px;
}
@media screen and (min-width: 1201px) {
    .c-section-benefits__body {
        padding-inline: 64px;
    }
}
@media screen and (max-width: 750px) {
    .c-section-benefits__body {
        padding: calc(64 / var(--design-width) * 100vw) calc(20 / var(--design-width) * 100vw) calc(64 / var(--design-width) * 100vw);
    }
}

/* ---------------------------------------------
*   c-section-case
--------------------------------------------- */
.c-section-case {
    margin-inline: auto;
    max-width: 2560px;
    background: url(/en-lp/assets/img/img_case_bg.png) no-repeat center top/cover;
}
@media screen and (max-width: 750px) {
    .c-section-case {
        background-image: url(/en-lp/assets/img/sp/img_case_bg.png);
    }
}
.c-section-case__container {
    margin-inline: auto;
    padding: 80px 5.3333333333% 34px;
    max-width: 1200px;
}
@media screen and (min-width: 1201px) {
    .c-section-case__container {
        padding-inline: 64px;
    }
}
@media screen and (max-width: 750px) {
    .c-section-case__container {
        padding: calc(51 / var(--design-width) * 100vw) calc(20 / var(--design-width) * 100vw);
    }
}
.c-section-case__ttl {
    align-self: stretch;
    text-align: center;
    color: var(--color-white-1);
    font-family: var(--ff-roboto);
    font-size: calc(48 / var(--root-fz) * 1rem);
    font-weight: 700;
    line-height: 1.2083333333;
}
@media screen and (max-width: 750px) {
    .c-section-case__ttl {
        font-size: calc(36 / var(--root-fz) * 1rem);
        line-height: 1.1944444444;
    }
}
.lang-th .c-section-case__ttl {
    font-family: var(--ff-Kanit);
}

.c-section-case__ttl-sub {
    margin-top: 24px;
    align-self: stretch;
    text-align: center;
    color: var(--color-white-1);
    font-family: var(--ff-roboto);
    font-size: calc(18 / var(--root-fz) * 1rem);
    font-weight: 400;
    line-height: 1.5;
}
@media screen and (max-width: 750px) {
    .c-section-case__ttl-sub {
        margin-top: calc(20 / var(--design-width) * 100vw);
        font-size: calc(16 / var(--root-fz) * 1rem);
        line-height: 1.5;
    }
}
.lang-th .c-section-case__ttl-sub {
    font-family: var(--ff-Kanit);
}

.c-section-case__body {
    margin-top: 28px;
}
@media screen and (max-width: 750px) {
    .c-section-case__body {
        margin-top: calc(29 / var(--design-width) * 100vw);
    }
}

/* ---------------------------------------------
*   c-section-more
--------------------------------------------- */
.c-section-more__container {
    margin-inline: auto;
    padding: 74px 5.3333333333% 50px;
    max-width: 1200px;
}
@media screen and (min-width: 1201px) {
    .c-section-more__container {
        padding-inline: 64px;
    }
}
@media screen and (max-width: 750px) {
    .c-section-more__container {
        padding: calc(64 / var(--design-width) * 100vw) calc(20 / var(--design-width) * 100vw);
    }
}
.c-section-more__ttl {
    text-align: center;
    color: var(--color-white-1);
    font-size: calc(40 / var(--root-fz) * 1rem);
    font-weight: 700;
    line-height: 1.2;
}
@media screen and (max-width: 750px) {
    .c-section-more__ttl {
        font-family: var(--ff-roboto);
        font-size: calc(36 / var(--root-fz) * 1rem);
        line-height: 1.1944444444;
    }
}
.lang-th .c-section-more__ttl {
    font-family: var(--ff-Kanit);
}

.c-section-more__body {
    margin-top: 40px;
}
@media screen and (max-width: 750px) {
    .c-section-more__body {
        margin-top: calc(48 / var(--design-width) * 100vw);
    }
}

/* ---------------------------------------------
*   c-section-demo
--------------------------------------------- */
.c-section-demo {
    background-color: var(--color-gray-2);
}
.c-section-demo__container {
    position: relative;
    margin-inline: auto;
    max-width: 1200px;
}
.c-section-demo__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
@media screen and (max-width: 750px) {
    .c-section-demo__bg {
        display: none;
    }
}
.c-section-demo__bg img {
    width: 100%;
    height: auto;
    -o-object-fit: cover;
       object-fit: cover;
}
.c-section-demo__inner {
    position: relative;
}
.c-section-demo__head {
    padding: 92px 4.4166666667% 0;
}
@media screen and (min-width: 1201px) {
    .c-section-demo__head {
        padding-inline: 53px;
    }
}
@media screen and (max-width: 750px) {
    .c-section-demo__head {
        padding: calc(64 / var(--design-width) * 100vw) calc(20 / var(--design-width) * 100vw) 0;
    }
}
.c-section-demo__body {
    line-break: auto;
}
.c-section-demo__ttl {
    align-self: stretch;
    text-align: center;
    color: var(--color-blue-3);
    font-size: calc(40 / var(--root-fz) * 1rem);
    font-weight: 700;
    line-height: 1.2;
}
@media screen and (max-width: 750px) {
    .c-section-demo__ttl {
        font-size: calc(36 / var(--root-fz) * 1rem);
        line-height: 1.1944444444;
    }
}
.c-section-demo__ttl-sub {
    margin-top: 24px;
    text-align: center;
    color: var(--color-blue-3);
    font-size: calc(16 / var(--root-fz) * 1rem);
    font-weight: 400;
    line-height: 1.5;
}
@media screen and (max-width: 750px) {
    .c-section-demo__ttl-sub {
        margin-top: calc(20 / var(--design-width) * 100vw);
        font-size: calc(16 / var(--root-fz) * 1rem);
    }
}
@media screen and (max-width: 750px) {
    .c-section-demo--th .c-section-demo__ttl-sub {
        font-size: calc(14 / var(--root-fz) * 1rem);
    }
}
.c-section-demo__img-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    grid-auto-rows: auto;
    margin-top: 92px;
}
@media screen and (max-width: 750px) {
    .c-section-demo__img-wrap {
        display: flex;
        flex-direction: column;
        gap: calc(20 / var(--design-width) * 100vw);
        margin-top: calc(20 / var(--design-width) * 100vw);
    }
}
@media print, screen and (min-width: 751px) {
    .c-section-demo--th .c-section-demo__img-wrap {
        margin-top: 20px;
    }
}
@media print, screen and (min-width: 751px) {
    .c-section-demo__img:nth-child(1) {
        grid-row: 1/span 2;
        grid-column: 1;
    }
}
@media print, screen and (min-width: 751px) {
    .c-section-demo__img:nth-child(2) {
        grid-row: 1;
        grid-column: 2;
    }
}
@media print, screen and (min-width: 751px) {
    .c-section-demo__img:nth-child(3) {
        grid-row: 2;
        grid-column: 2;
    }
}
.c-section-demo__contents:nth-of-type(1) {
    padding: 58px 5.3333333333% 30px;
}
@media screen and (max-width: 750px) {
    .c-section-demo__contents:nth-of-type(1) {
        padding: calc(42 / var(--design-width) * 100vw) calc(20 / var(--design-width) * 100vw) calc(64 / var(--design-width) * 100vw);
    }
}
.c-section-demo__contents:nth-of-type(2) {
    padding: 58px 5.3333333333% 50px;
}
@media screen and (max-width: 750px) {
    .c-section-demo__contents:nth-of-type(2) {
        padding: calc(64 / var(--design-width) * 100vw) calc(20 / var(--design-width) * 100vw);
    }
}
.c-section-demo__ttl-2 {
    text-align: center;
    color: var(--color-blue-3);
    font-size: calc(32 / var(--root-fz) * 1rem);
    font-family: var(--ff-root);
    font-weight: 700;
    line-height: 1.5;
}
@media screen and (max-width: 750px) {
    .c-section-demo__ttl-2 {
        font-size: calc(36 / var(--root-fz) * 1rem);
        line-height: 1.1944444444;
    }
}
.c-section-demo__list {
    display: grid;
}
@media screen and (max-width: 750px) {
    .c-section-demo__list {
        display: flex;
        flex-direction: column;
        gap: calc(48 / var(--design-width) * 100vw);
    }
}
@media print, screen and (min-width: 751px) {
    .c-section-demo__list--3col {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 4%;
        margin-top: 40px;
    }
}
@media screen and (max-width: 750px) {
    .c-section-demo__list--3col {
        margin-top: calc(48 / var(--design-width) * 100vw);
    }
}
@media print, screen and (min-width: 751px) {
    .c-section-demo__list--4col {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 36px 2.6666666667%;
        margin-top: 70px;
    }
}
@media screen and (max-width: 750px) {
    .c-section-demo__list--4col {
        margin-top: calc(48 / var(--design-width) * 100vw);
    }
}
.c-section-demo__item {
    display: contents;
}

/* ---------------------------------------------
/*  .c-slider
--------------------------------------------- */
.c-slider__wrapper {
    position: relative;
}
.c-slider__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 7.4626865672%;
    padding: 73px 48px;
    width: 100%;
    background-color: rgba(var(--color-black-1-rgb), 0.6);
    border: 1px solid var(--color-black-1);
    border-radius: 20px;
}
@media screen and (max-width: 750px) {
    .c-slider__item {
        flex-direction: column-reverse;
        gap: calc(21 / var(--design-width) * 100vw);
        padding: calc(19 / var(--design-width) * 100vw) calc(24 / var(--design-width) * 100vw) calc(29 / var(--design-width) * 100vw);
        border-width: calc(1 / var(--design-width) * 100vw);
        border-radius: calc(20 / var(--design-width) * 100vw);
    }
}
.c-slider__contents {
    width: 45.6967213115%;
}
@media screen and (max-width: 750px) {
    .c-slider__contents {
        width: 100%;
    }
}
.c-slider__img {
    flex-shrink: 0;
    width: 46.106557377%;
}
@media screen and (max-width: 750px) {
    .c-slider__img {
        width: 100%;
    }
}
.c-slider__ttl {
    align-self: stretch;
    color: var(--color-white-1);
    font-size: calc(20 / var(--root-fz) * 1rem);
    font-weight: 300;
    line-height: 1.4;
}
@media screen and (max-width: 750px) {
    .c-slider__ttl {
        font-size: calc(20 / var(--root-fz) * 1rem);
    }
}
.c-slider__txt {
    margin-top: 32px;
    align-self: stretch;
    color: var(--color-white-1);
    font-size: calc(16 / var(--root-fz) * 1rem);
    font-weight: 700;
    line-height: 1.375;
}
@media screen and (max-width: 750px) {
    .c-slider__txt {
        margin-top: calc(32 / var(--design-width) * 100vw);
        font-size: calc(16 / var(--root-fz) * 1rem);
    }
}
.lang-th .c-slider__txt {
    font-weight: 500;
}
@media screen and (max-width: 750px) {
    .lang-th .c-slider__txt {
        line-height: 1.4285714286;
        font-size: calc(14 / var(--root-fz) * 1rem);
    }
}

.c-slider__txt-2 {
    margin-top: 32px;
    color: var(--color-white-1);
    font-family: var(--ff-roboto);
    font-size: calc(16 / var(--root-fz) * 1rem);
    font-weight: 600;
    line-height: 1.5;
}
@media screen and (max-width: 750px) {
    .c-slider__txt-2 {
        margin-top: calc(32 / var(--design-width) * 100vw);
        font-size: calc(16 / var(--root-fz) * 1rem);
    }
}
.c-slider .splide__slide {
    transform: translate3d(0, 0, 0);
}
.c-slider .splide__pagination {
    gap: 10px;
}
@media print, screen and (min-width: 751px) {
    .c-slider .splide__pagination {
        margin-block: 31px;
    }
}
@media screen and (max-width: 750px) {
    .c-slider .splide__pagination {
        margin-top: calc(29 / var(--design-width) * 100vw);
    }
}
.c-slider .splide__pagination li {
    font-size: 0;
}
.c-slider .splide__pagination__page {
    width: 10px;
    height: 10px;
    background-color: var(--color-gray-1);
    border-radius: 50%;
    touch-action: manipulation;
    cursor: pointer;
}
@media screen and (max-width: 750px) {
    .c-slider .splide__pagination__page {
        background-color: var(--color-blue-2);
    }
}
.c-slider .splide__pagination__page.is-active {
    background-color: var(--color-gray-2);
}
.c-slider .splide__pagination__page:focus-visible {
    outline: 3px solid #b4e900;
    outline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) {
    .c-slider .splide__pagination__page {
        transition: opacity 0.3s;
    }
    .c-slider .splide__pagination__page:hover {
        opacity: 0.8;
    }
}
.c-slider__img img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
}

/* ---------------------------------------------
*   c-ttl-kv
--------------------------------------------- */
.c-ttl-kv {
    position: relative;
    align-self: stretch;
    padding-top: calc(18 / var(--design-width) * 100vw);
    color: var(--color-white-1);
    font-size: calc(48 / var(--design-width) * 100vw);
    font-weight: 700;
    line-height: 1.1875;
}
@media screen and (max-width: 750px) {
    .c-ttl-kv {
        padding-top: calc(25 / var(--design-width) * 100vw);
        font-size: calc(40 / var(--design-width) * 100vw);
        line-height: 1.2;
    }
}
@media screen and (max-width: 750px) {
    .lang-th .c-ttl-kv {
        padding-top: calc(20 / var(--design-width) * 100vw);
    }
}

@media screen and (max-width: 750px) {
    .mac.safari .lang-th .c-ttl-kv {
        padding-top: calc(15 / var(--design-width) * 100vw);
    }
}

.c-ttl-kv::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: calc(97 / var(--design-width) * 100vw);
    height: 0;
    border: calc(1 / var(--design-width) * 100vw) solid var(--color-blue-2);
}

/* ---------------------------------------------
*   c-ttl-1
--------------------------------------------- */
.c-ttl-1 {
    margin-top: 16px;
    align-self: stretch;
    color: var(--color-white-1);
    font-size: calc(40 / var(--root-fz) * 1rem);
    font-weight: 700;
    line-height: 1.2;
}
@media screen and (max-width: 750px) {
    .c-ttl-1 {
        margin-top: calc(14 / var(--design-width) * 100vw);
        font-size: calc(36 / var(--root-fz) * 1rem);
        line-height: 1.1944444444;
    }
}
@media screen and (max-width: 750px) {
    .lang-th .c-ttl-1 {
        line-height: 1.1875;
        font-size: calc(32 / var(--root-fz) * 1rem);
    }
}

@media screen and (max-width: 750px) {
    .windows.edge .lang-th .c-ttl-1 {
        line-height: 1.2666666667;
        font-size: calc(30 / var(--root-fz) * 1rem);
    }
}

@media screen and (max-width: 750px) {
    .windows.chrome .lang-th .c-ttl-1 {
        line-height: 1.2666666667;
        font-size: calc(30 / var(--root-fz) * 1rem);
    }
}

.c-ttl-1--border {
    position: relative;
    padding-top: 18px;
}
@media screen and (max-width: 750px) {
    .c-ttl-1--border {
        padding-top: calc(14 / var(--design-width) * 100vw);
    }
}
.c-ttl-1--border::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 97px;
    height: 0;
    border: 1px solid var(--color-blue-2);
}
@media screen and (max-width: 750px) {
    .c-ttl-1--border::before {
        width: calc(97 / var(--design-width) * 100vw);
        border-width: calc(1 / var(--design-width) * 100vw);
    }
}

/* ---------------------------------------------
*   c-ttl-2
--------------------------------------------- */
.c-ttl-2 {
    align-self: stretch;
    color: var(--color-white-1);
    font-size: calc(24 / var(--root-fz) * 1rem);
    font-weight: 700;
    line-height: 1.5;
}
@media screen and (max-width: 750px) {
    .c-ttl-2 {
        font-size: calc(20 / var(--root-fz) * 1rem);
        line-height: 1.5;
    }
}
.lang-th .c-ttl-2 {
    font-weight: 500;
}

/* ---------------------------------------------
*   c-ttl-3
--------------------------------------------- */
.c-ttl-3 {
    margin-top: 18px;
    color: var(--color-white-1);
    font-size: calc(24 / var(--root-fz) * 1rem);
    font-weight: 700;
    line-height: 1.2083333333;
}
@media screen and (max-width: 750px) {
    .c-ttl-3 {
        margin-top: calc(32 / var(--design-width) * 100vw);
        font-size: calc(20 / var(--root-fz) * 1rem);
        line-height: 1.2;
    }
}
.lang-th .c-ttl-3 {
    font-weight: 500;
    padding-right: 15px;
}

/* ---------------------------------------------
*   c-ttl-4
--------------------------------------------- */
.c-ttl-4 {
    margin-top: 16px;
    align-self: stretch;
    color: var(--color-white-1);
    font-size: calc(40 / var(--root-fz) * 1rem);
    font-weight: 700;
    line-height: 1.2;
}
@media screen and (max-width: 750px) {
    .c-ttl-4 {
        margin-top: calc(14 / var(--design-width) * 100vw);
        font-size: calc(28 / var(--root-fz) * 1rem);
        line-height: 1.2142857143;
    }
}
.c-ttl-4--border {
    position: relative;
    padding-top: 18px;
}
@media screen and (max-width: 750px) {
    .c-ttl-4--border {
        padding-top: calc(14 / var(--design-width) * 100vw);
    }
}
.c-ttl-4--border::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 97px;
    height: 0;
    border: 1px solid var(--color-blue-2);
}
@media screen and (max-width: 750px) {
    .c-ttl-4--border::before {
        width: calc(97 / var(--design-width) * 100vw);
        border-width: calc(1 / var(--design-width) * 100vw);
    }
}

/* ---------------------------------------------
*   c-txt-kv
--------------------------------------------- */
.c-txt-kv {
    margin-top: calc(24 / var(--design-width) * 100vw);
    align-self: stretch;
    color: var(--color-white-1);
    font-size: calc(15 / var(--design-width) * 100vw);
    font-weight: 400;
    line-height: 1.5333333333;
}
@media screen and (max-width: 750px) {
    .c-txt-kv {
        margin-top: calc(20 / var(--design-width) * 100vw);
        font-size: calc(16 / var(--root-fz) * 1rem);
        line-height: 1.5;
    }
}
@media screen and (max-width: 750px) {
    .lang-th .c-txt-kv {
        margin-top: calc(18 / var(--design-width) * 100vw);
        font-size: calc(14 / var(--design-width) * 100vw);
    }
}

@media screen and (max-width: 750px) {
    .mac.safari .lang-th .c-txt-kv {
        margin-top: calc(16 / var(--design-width) * 100vw);
        font-size: calc(12 / var(--design-width) * 100vw);
    }
}

/* ---------------------------------------------
*   c-txt-1
--------------------------------------------- */
.c-txt-1 {
    margin-top: 24px;
    align-self: stretch;
    color: var(--color-white-1);
    font-size: calc(16 / var(--root-fz) * 1rem);
    font-weight: 400;
    line-height: 1.5;
}
@media screen and (max-width: 750px) {
    .c-txt-1 {
        margin-top: calc(20 / var(--design-width) * 100vw);
        font-size: calc(16 / var(--root-fz) * 1rem);
        line-height: 1.625;
        letter-spacing: 0.03em;
    }
}
@media screen and (max-width: 750px) {
    .lang-th .c-txt-1 {
        font-size: calc(14 / var(--root-fz) * 1rem);
        line-height: 1.5;
    }
}

/* ---------------------------------------------
*   c-txt-2
--------------------------------------------- */
.c-txt-2 {
    margin-top: 26px;
    width: 87.8296146045%;
    color: var(--color-white-1);
    font-family: var(--ff-roboto);
    font-size: calc(18 / var(--root-fz) * 1rem);
    font-weight: 400;
    line-height: 1.5;
}
@media screen and (max-width: 750px) {
    .c-txt-2 {
        margin-top: calc(20 / var(--design-width) * 100vw);
        width: 97%;
        font-family: var(--ff-root);
        font-size: calc(18 / var(--root-fz) * 1rem);
        line-height: 1.5;
        letter-spacing: 0.03em;
    }
}
.lang-th .c-txt-2 {
    font-family: var(--ff-Kanit);
}
@media print, screen and (min-width: 751px) {
    .lang-th .c-txt-2 {
        width: 90.6693711968%;
    }
}

/* ---------------------------------------------
*   background-color
--------------------------------------------- */
.bg-white {
    background-color: var(--color-white-1) !important;
}

/* ---------------------------------------------
*   font-wight
--------------------------------------------- */
.fw-normal {
    font-weight: 500 !important;
}

.fw-bold {
    font-weight: 700 !important;
}

/* ---------------------------------------------
*   text-align
--------------------------------------------- */
.txt-al-center {
    text-align: center !important;
}

.txt-al-right {
    text-align: right !important;
}

.txt-al-left {
    text-align: left !important;
}

.js-acc-target {
    --acc-body-height: 0px;
    height: 0;
    overflow: hidden;
}
.js-acc-scope.is-close .js-acc-target {
    animation: closeAccAnim 0.5s forwards;
}

.js-acc-scope.is-open .js-acc-target {
    animation: openAccAnim 0.5s forwards;
}

@keyframes openAccAnim {
    0% {
        height: 0px;
        visibility: hidden;
    }
    99% {
        height: var(--acc-body-height);
        visibility: visible;
    }
    100% {
        height: auto;
    }
}
@keyframes closeAccAnim {
    0% {
        height: var(--acc-body-height);
    }
    99% {
        visibility: visible;
    }
    100% {
        height: 0px;
        visibility: hidden;
    }
}

.js-fadein-up-btn {
    opacity: 0;
    animation: fadeIn 0.8s ease forwards;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(50px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
.js-fadein-up {
    opacity: 0;
    transform: translateY(50px);
}
.js-fadein-up.is-active {
    transform: translateY(0);
    opacity: 1;
    transition: transform 0.8s, opacity 1s;
}

.js-fadein-up-intro .js-fadein-up-intro-1 {
    opacity: 0;
    transform: translateY(50px);
}
.js-fadein-up-intro.is-active .js-fadein-up-intro-1 {
    transform: translateY(0);
    opacity: 1;
    transition: transform 0.8s, opacity 1s;
}
.js-fadein-up-intro .js-fadein-up-intro-2 {
    opacity: 0;
    transform: translateY(106px);
}
@media screen and (max-width: 750px) {
    .js-fadein-up-intro .js-fadein-up-intro-2 {
        transform: translateY(50px);
    }
}
.js-fadein-up-intro.is-active .js-fadein-up-intro-2 {
    transform: translateY(56px);
    opacity: 1;
    transition: transform 0.8s, opacity 1s;
    transition-delay: 0.4s;
}
@media screen and (max-width: 750px) {
    .js-fadein-up-intro.is-active .js-fadein-up-intro-2 {
        transform: translateY(0);
    }
}
.js-fadein-up-intro .js-fadein-up-intro-3 {
    opacity: 0;
    transform: translateY(168px);
}
@media screen and (max-width: 750px) {
    .js-fadein-up-intro .js-fadein-up-intro-3 {
        transform: translateY(50px);
    }
}
.js-fadein-up-intro.is-active .js-fadein-up-intro-3 {
    transform: translateY(118px);
    opacity: 1;
    transition: transform 0.8s, opacity 1s;
    transition-delay: 0.8s;
}
@media screen and (max-width: 750px) {
    .js-fadein-up-intro.is-active .js-fadein-up-intro-3 {
        transform: translateY(0);
    }
}

@media print and (min-width: 751px), screen and (min-width: 751px) {
    .pc-hide {
        display: none !important;
    }
}
@media print and (max-width: 750px), screen and (max-width: 750px) {
    .sp-hide {
        display: none !important;
    }
}
/* ---------------------------------------------
*   margin-top
--------------------------------------------- */
.mgt-pc--0 {
    margin-top: 0 !important;
}

.mgt-pc--5 {
    margin-top: 5px !important;
}

.mgt-pc--10 {
    margin-top: 10px !important;
}

.mgt-pc--15 {
    margin-top: 15px !important;
}

.mgt-pc--20 {
    margin-top: 20px !important;
}

.mgt-pc--25 {
    margin-top: 25px !important;
}

.mgt-pc--30 {
    margin-top: 30px !important;
}

.mgt-pc--35 {
    margin-top: 35px !important;
}

.mgt-pc--40 {
    margin-top: 40px !important;
}

.mgt-pc--45 {
    margin-top: 45px !important;
}

.mgt-pc--50 {
    margin-top: 50px !important;
}

.mgt-pc--55 {
    margin-top: 55px !important;
}

.mgt-pc--60 {
    margin-top: 60px !important;
}

.mgt-pc--65 {
    margin-top: 65px !important;
}

.mgt-pc--70 {
    margin-top: 70px !important;
}

.mgt-pc--75 {
    margin-top: 75px !important;
}

.mgt-pc--80 {
    margin-top: 80px !important;
}

.mgt-pc--85 {
    margin-top: 85px !important;
}

.mgt-pc--90 {
    margin-top: 90px !important;
}

.mgt-pc--95 {
    margin-top: 95px !important;
}

.mgt-pc--100 {
    margin-top: 100px !important;
}

.mgt-pc--105 {
    margin-top: 105px !important;
}

.mgt-pc--110 {
    margin-top: 110px !important;
}

.mgt-pc--115 {
    margin-top: 115px !important;
}

.mgt-pc--120 {
    margin-top: 120px !important;
}

.mgt-pc--125 {
    margin-top: 125px !important;
}

.mgt-pc--130 {
    margin-top: 130px !important;
}

.mgt-pc--135 {
    margin-top: 135px !important;
}

.mgt-pc--140 {
    margin-top: 140px !important;
}

.mgt-pc--145 {
    margin-top: 145px !important;
}

.mgt-pc--150 {
    margin-top: 150px !important;
}

.mgt-pc--155 {
    margin-top: 155px !important;
}

.mgt-pc--160 {
    margin-top: 160px !important;
}

.mgt-pc--165 {
    margin-top: 165px !important;
}

.mgt-pc--170 {
    margin-top: 170px !important;
}

.mgt-pc--175 {
    margin-top: 175px !important;
}

.mgt-pc--180 {
    margin-top: 180px !important;
}

.mgt-pc--185 {
    margin-top: 185px !important;
}

.mgt-pc--190 {
    margin-top: 190px !important;
}

.mgt-pc--195 {
    margin-top: 195px !important;
}

.mgt-pc--200 {
    margin-top: 200px !important;
}

.mgt-pc--205 {
    margin-top: 205px !important;
}

.mgt-pc--210 {
    margin-top: 210px !important;
}

.mgt-pc--215 {
    margin-top: 215px !important;
}

.mgt-pc--220 {
    margin-top: 220px !important;
}

.mgt-pc--225 {
    margin-top: 225px !important;
}

.mgt-pc--230 {
    margin-top: 230px !important;
}

.mgt-pc--235 {
    margin-top: 235px !important;
}

.mgt-pc--240 {
    margin-top: 240px !important;
}

.mgt-pc--245 {
    margin-top: 245px !important;
}

.mgt-pc--250 {
    margin-top: 250px !important;
}

@media screen and (max-width: 750px) {
    .mgt-sp--0 {
        margin-top: 0 !important;
    }
    .mgt-sp--5 {
        margin-top: calc(5 / var(--design-width) * 100vw) !important;
    }
    .mgt-sp--10 {
        margin-top: calc(10 / var(--design-width) * 100vw) !important;
    }
    .mgt-sp--15 {
        margin-top: calc(15 / var(--design-width) * 100vw) !important;
    }
    .mgt-sp--20 {
        margin-top: calc(20 / var(--design-width) * 100vw) !important;
    }
    .mgt-sp--25 {
        margin-top: calc(25 / var(--design-width) * 100vw) !important;
    }
    .mgt-sp--30 {
        margin-top: calc(30 / var(--design-width) * 100vw) !important;
    }
    .mgt-sp--35 {
        margin-top: calc(35 / var(--design-width) * 100vw) !important;
    }
    .mgt-sp--40 {
        margin-top: calc(40 / var(--design-width) * 100vw) !important;
    }
    .mgt-sp--45 {
        margin-top: calc(45 / var(--design-width) * 100vw) !important;
    }
    .mgt-sp--50 {
        margin-top: calc(50 / var(--design-width) * 100vw) !important;
    }
    .mgt-sp--55 {
        margin-top: calc(55 / var(--design-width) * 100vw) !important;
    }
    .mgt-sp--60 {
        margin-top: calc(60 / var(--design-width) * 100vw) !important;
    }
    .mgt-sp--65 {
        margin-top: calc(65 / var(--design-width) * 100vw) !important;
    }
    .mgt-sp--70 {
        margin-top: calc(70 / var(--design-width) * 100vw) !important;
    }
    .mgt-sp--75 {
        margin-top: calc(75 / var(--design-width) * 100vw) !important;
    }
    .mgt-sp--80 {
        margin-top: calc(80 / var(--design-width) * 100vw) !important;
    }
    .mgt-sp--85 {
        margin-top: calc(85 / var(--design-width) * 100vw) !important;
    }
    .mgt-sp--90 {
        margin-top: calc(90 / var(--design-width) * 100vw) !important;
    }
    .mgt-sp--95 {
        margin-top: calc(95 / var(--design-width) * 100vw) !important;
    }
    .mgt-sp--100 {
        margin-top: calc(100 / var(--design-width) * 100vw) !important;
    }
    .mgt-sp--105 {
        margin-top: calc(105 / var(--design-width) * 100vw) !important;
    }
    .mgt-sp--110 {
        margin-top: calc(110 / var(--design-width) * 100vw) !important;
    }
    .mgt-sp--115 {
        margin-top: calc(115 / var(--design-width) * 100vw) !important;
    }
    .mgt-sp--120 {
        margin-top: calc(120 / var(--design-width) * 100vw) !important;
    }
    .mgt-sp--125 {
        margin-top: calc(125 / var(--design-width) * 100vw) !important;
    }
    .mgt-sp--130 {
        margin-top: calc(130 / var(--design-width) * 100vw) !important;
    }
    .mgt-sp--135 {
        margin-top: calc(135 / var(--design-width) * 100vw) !important;
    }
    .mgt-sp--140 {
        margin-top: calc(140 / var(--design-width) * 100vw) !important;
    }
    .mgt-sp--145 {
        margin-top: calc(145 / var(--design-width) * 100vw) !important;
    }
    .mgt-sp--150 {
        margin-top: calc(150 / var(--design-width) * 100vw) !important;
    }
    .mgt-sp--155 {
        margin-top: calc(155 / var(--design-width) * 100vw) !important;
    }
    .mgt-sp--160 {
        margin-top: calc(160 / var(--design-width) * 100vw) !important;
    }
    .mgt-sp--165 {
        margin-top: calc(165 / var(--design-width) * 100vw) !important;
    }
    .mgt-sp--170 {
        margin-top: calc(170 / var(--design-width) * 100vw) !important;
    }
    .mgt-sp--175 {
        margin-top: calc(175 / var(--design-width) * 100vw) !important;
    }
    .mgt-sp--180 {
        margin-top: calc(180 / var(--design-width) * 100vw) !important;
    }
    .mgt-sp--185 {
        margin-top: calc(185 / var(--design-width) * 100vw) !important;
    }
    .mgt-sp--190 {
        margin-top: calc(190 / var(--design-width) * 100vw) !important;
    }
    .mgt-sp--195 {
        margin-top: calc(195 / var(--design-width) * 100vw) !important;
    }
    .mgt-sp--200 {
        margin-top: calc(200 / var(--design-width) * 100vw) !important;
    }
    .mgt-sp--205 {
        margin-top: calc(205 / var(--design-width) * 100vw) !important;
    }
    .mgt-sp--210 {
        margin-top: calc(210 / var(--design-width) * 100vw) !important;
    }
    .mgt-sp--215 {
        margin-top: calc(215 / var(--design-width) * 100vw) !important;
    }
    .mgt-sp--220 {
        margin-top: calc(220 / var(--design-width) * 100vw) !important;
    }
    .mgt-sp--225 {
        margin-top: calc(225 / var(--design-width) * 100vw) !important;
    }
    .mgt-sp--230 {
        margin-top: calc(230 / var(--design-width) * 100vw) !important;
    }
    .mgt-sp--235 {
        margin-top: calc(235 / var(--design-width) * 100vw) !important;
    }
    .mgt-sp--240 {
        margin-top: calc(240 / var(--design-width) * 100vw) !important;
    }
    .mgt-sp--245 {
        margin-top: calc(245 / var(--design-width) * 100vw) !important;
    }
    .mgt-sp--250 {
        margin-top: calc(250 / var(--design-width) * 100vw) !important;
    }
}
/* ---------------------------------------------
*   margin-bottom
--------------------------------------------- */
.mgb-pc--0 {
    margin-bottom: 0 !important;
}

.mgb-pc--5 {
    margin-bottom: 5px !important;
}

.mgb-pc--10 {
    margin-bottom: 10px !important;
}

.mgb-pc--15 {
    margin-bottom: 15px !important;
}

.mgb-pc--20 {
    margin-bottom: 20px !important;
}

.mgb-pc--25 {
    margin-bottom: 25px !important;
}

.mgb-pc--30 {
    margin-bottom: 30px !important;
}

.mgb-pc--35 {
    margin-bottom: 35px !important;
}

.mgb-pc--40 {
    margin-bottom: 40px !important;
}

.mgb-pc--45 {
    margin-bottom: 45px !important;
}

.mgb-pc--50 {
    margin-bottom: 50px !important;
}

.mgb-pc--55 {
    margin-bottom: 55px !important;
}

.mgb-pc--60 {
    margin-bottom: 60px !important;
}

.mgb-pc--65 {
    margin-bottom: 65px !important;
}

.mgb-pc--70 {
    margin-bottom: 70px !important;
}

.mgb-pc--75 {
    margin-bottom: 75px !important;
}

.mgb-pc--80 {
    margin-bottom: 80px !important;
}

.mgb-pc--85 {
    margin-bottom: 85px !important;
}

.mgb-pc--90 {
    margin-bottom: 90px !important;
}

.mgb-pc--95 {
    margin-bottom: 95px !important;
}

.mgb-pc--100 {
    margin-bottom: 100px !important;
}

.mgb-pc--105 {
    margin-bottom: 105px !important;
}

.mgb-pc--110 {
    margin-bottom: 110px !important;
}

.mgb-pc--115 {
    margin-bottom: 115px !important;
}

.mgb-pc--120 {
    margin-bottom: 120px !important;
}

.mgb-pc--125 {
    margin-bottom: 125px !important;
}

.mgb-pc--130 {
    margin-bottom: 130px !important;
}

.mgb-pc--135 {
    margin-bottom: 135px !important;
}

.mgb-pc--140 {
    margin-bottom: 140px !important;
}

.mgb-pc--145 {
    margin-bottom: 145px !important;
}

.mgb-pc--150 {
    margin-bottom: 150px !important;
}

.mgb-pc--155 {
    margin-bottom: 155px !important;
}

.mgb-pc--160 {
    margin-bottom: 160px !important;
}

.mgb-pc--165 {
    margin-bottom: 165px !important;
}

.mgb-pc--170 {
    margin-bottom: 170px !important;
}

.mgb-pc--175 {
    margin-bottom: 175px !important;
}

.mgb-pc--180 {
    margin-bottom: 180px !important;
}

.mgb-pc--185 {
    margin-bottom: 185px !important;
}

.mgb-pc--190 {
    margin-bottom: 190px !important;
}

.mgb-pc--195 {
    margin-bottom: 195px !important;
}

.mgb-pc--200 {
    margin-bottom: 200px !important;
}

.mgb-pc--205 {
    margin-bottom: 205px !important;
}

.mgb-pc--210 {
    margin-bottom: 210px !important;
}

.mgb-pc--215 {
    margin-bottom: 215px !important;
}

.mgb-pc--220 {
    margin-bottom: 220px !important;
}

.mgb-pc--225 {
    margin-bottom: 225px !important;
}

.mgb-pc--230 {
    margin-bottom: 230px !important;
}

.mgb-pc--235 {
    margin-bottom: 235px !important;
}

.mgb-pc--240 {
    margin-bottom: 240px !important;
}

.mgb-pc--245 {
    margin-bottom: 245px !important;
}

.mgb-pc--250 {
    margin-bottom: 250px !important;
}

@media screen and (max-width: 750px) {
    .mgb-sp--0 {
        margin-bottom: 0 !important;
    }
    .mgb-sp--5 {
        margin-bottom: calc(5 / var(--design-width) * 100vw) !important;
    }
    .mgb-sp--10 {
        margin-bottom: calc(10 / var(--design-width) * 100vw) !important;
    }
    .mgb-sp--15 {
        margin-bottom: calc(15 / var(--design-width) * 100vw) !important;
    }
    .mgb-sp--20 {
        margin-bottom: calc(20 / var(--design-width) * 100vw) !important;
    }
    .mgb-sp--25 {
        margin-bottom: calc(25 / var(--design-width) * 100vw) !important;
    }
    .mgb-sp--30 {
        margin-bottom: calc(30 / var(--design-width) * 100vw) !important;
    }
    .mgb-sp--35 {
        margin-bottom: calc(35 / var(--design-width) * 100vw) !important;
    }
    .mgb-sp--40 {
        margin-bottom: calc(40 / var(--design-width) * 100vw) !important;
    }
    .mgb-sp--45 {
        margin-bottom: calc(45 / var(--design-width) * 100vw) !important;
    }
    .mgb-sp--50 {
        margin-bottom: calc(50 / var(--design-width) * 100vw) !important;
    }
    .mgb-sp--55 {
        margin-bottom: calc(55 / var(--design-width) * 100vw) !important;
    }
    .mgb-sp--60 {
        margin-bottom: calc(60 / var(--design-width) * 100vw) !important;
    }
    .mgb-sp--65 {
        margin-bottom: calc(65 / var(--design-width) * 100vw) !important;
    }
    .mgb-sp--70 {
        margin-bottom: calc(70 / var(--design-width) * 100vw) !important;
    }
    .mgb-sp--75 {
        margin-bottom: calc(75 / var(--design-width) * 100vw) !important;
    }
    .mgb-sp--80 {
        margin-bottom: calc(80 / var(--design-width) * 100vw) !important;
    }
    .mgb-sp--85 {
        margin-bottom: calc(85 / var(--design-width) * 100vw) !important;
    }
    .mgb-sp--90 {
        margin-bottom: calc(90 / var(--design-width) * 100vw) !important;
    }
    .mgb-sp--95 {
        margin-bottom: calc(95 / var(--design-width) * 100vw) !important;
    }
    .mgb-sp--100 {
        margin-bottom: calc(100 / var(--design-width) * 100vw) !important;
    }
    .mgb-sp--105 {
        margin-bottom: calc(105 / var(--design-width) * 100vw) !important;
    }
    .mgb-sp--110 {
        margin-bottom: calc(110 / var(--design-width) * 100vw) !important;
    }
    .mgb-sp--115 {
        margin-bottom: calc(115 / var(--design-width) * 100vw) !important;
    }
    .mgb-sp--120 {
        margin-bottom: calc(120 / var(--design-width) * 100vw) !important;
    }
    .mgb-sp--125 {
        margin-bottom: calc(125 / var(--design-width) * 100vw) !important;
    }
    .mgb-sp--130 {
        margin-bottom: calc(130 / var(--design-width) * 100vw) !important;
    }
    .mgb-sp--135 {
        margin-bottom: calc(135 / var(--design-width) * 100vw) !important;
    }
    .mgb-sp--140 {
        margin-bottom: calc(140 / var(--design-width) * 100vw) !important;
    }
    .mgb-sp--145 {
        margin-bottom: calc(145 / var(--design-width) * 100vw) !important;
    }
    .mgb-sp--150 {
        margin-bottom: calc(150 / var(--design-width) * 100vw) !important;
    }
    .mgb-sp--155 {
        margin-bottom: calc(155 / var(--design-width) * 100vw) !important;
    }
    .mgb-sp--160 {
        margin-bottom: calc(160 / var(--design-width) * 100vw) !important;
    }
    .mgb-sp--165 {
        margin-bottom: calc(165 / var(--design-width) * 100vw) !important;
    }
    .mgb-sp--170 {
        margin-bottom: calc(170 / var(--design-width) * 100vw) !important;
    }
    .mgb-sp--175 {
        margin-bottom: calc(175 / var(--design-width) * 100vw) !important;
    }
    .mgb-sp--180 {
        margin-bottom: calc(180 / var(--design-width) * 100vw) !important;
    }
    .mgb-sp--185 {
        margin-bottom: calc(185 / var(--design-width) * 100vw) !important;
    }
    .mgb-sp--190 {
        margin-bottom: calc(190 / var(--design-width) * 100vw) !important;
    }
    .mgb-sp--195 {
        margin-bottom: calc(195 / var(--design-width) * 100vw) !important;
    }
    .mgb-sp--200 {
        margin-bottom: calc(200 / var(--design-width) * 100vw) !important;
    }
    .mgb-sp--205 {
        margin-bottom: calc(205 / var(--design-width) * 100vw) !important;
    }
    .mgb-sp--210 {
        margin-bottom: calc(210 / var(--design-width) * 100vw) !important;
    }
    .mgb-sp--215 {
        margin-bottom: calc(215 / var(--design-width) * 100vw) !important;
    }
    .mgb-sp--220 {
        margin-bottom: calc(220 / var(--design-width) * 100vw) !important;
    }
    .mgb-sp--225 {
        margin-bottom: calc(225 / var(--design-width) * 100vw) !important;
    }
    .mgb-sp--230 {
        margin-bottom: calc(230 / var(--design-width) * 100vw) !important;
    }
    .mgb-sp--235 {
        margin-bottom: calc(235 / var(--design-width) * 100vw) !important;
    }
    .mgb-sp--240 {
        margin-bottom: calc(240 / var(--design-width) * 100vw) !important;
    }
    .mgb-sp--245 {
        margin-bottom: calc(245 / var(--design-width) * 100vw) !important;
    }
    .mgb-sp--250 {
        margin-bottom: calc(250 / var(--design-width) * 100vw) !important;
    }
}