/* --------------------
 Front
-------------------- */
.hero {
    background: var(--color-white);
    overflow: hidden;
    padding: 36.1111111111vw 0 8.3333333333vw;
    position: relative;
}

@media (min-width: 768px) {
    .hero {
        padding: 250px 0 76px;
    }
}

.hero-container {
    align-items: flex-start;
    display: flex;
    flex-flow: row wrap;
    margin: 0 auto;
    max-width: calc(1200px + var(--c-pad)*2);
    padding: 0 5.5555555556vw;
    position: relative;
    width: 100%;
}

@media (min-width: 768px) {
    .hero-container {
        flex-wrap: nowrap;
        padding: 0 var(--c-pad);
    }
}

.hero__main {
    flex: 0 0 100%;
    padding: 0 3.3333333333vw;
    position: relative;
    z-index: 1;
}

@media (min-width: 768px) {
    .hero__main {
        flex: 0 0 58.3333333333%;
        padding: 0;
    }
}

@media (min-width: 992px) {
    .hero__main {
        flex: 0 0 50%;
    }
}

@media (min-width: 1240px) {
    .hero__main {
        flex: 0 0 45%;
    }
}

.hero__main__title {
    font-size: var(--fs10);
    line-height: 1;
    margin: 0 0 12.2222222222vw;
}

@media (min-width: 768px) {
    .hero__main__title {
        margin: 0 0 min(90px, 8.7890625vw);
    }
}

@media (min-width: 992px) {
    .hero__main__title {
        margin: 0 0 min(90px, 7.2580645161vw);
    }
}

@media (min-width: 1240px) {
    .hero__main__title {
        margin: 0 0 90px;
    }
}

.hero__main__title img {
    height: 22.7777777778vw;
    width: auto;
}

@media (min-width: 768px) {
    .hero__main__title img {
        height: min(158px, 15.4296875vw);
    }
}

@media (min-width: 992px) {
    .hero__main__title img {
        height: min(158px, 12.7419354839vw);
    }
}

@media (min-width: 1240px) {
    .hero__main__title img {
        height: 158px;
    }
}

.hero__main__subtitle {
    font-size: 5.8333333333vw;
    line-height: 1.8;
    margin: 0 0 112.5vw;
}

@media (min-width: 768px) {
    .hero__main__subtitle {
        font-size: min(1.8125rem, 2.83203125vw);
        margin: 0 0 min(50px, 4.8828125vw);
    }
}

@media (min-width: 992px) {
    .hero__main__subtitle {
        font-size: min(var(--fs29), 2.3387096774vw);
        margin: 0 0 min(50px, 4.0322580645vw);
    }
}

@media (min-width: 1240px) {
    .hero__main__subtitle {
        font-size: var(--fs29);
        margin: 0 0 50px;
    }
}

.hero__main__subtitle img {
    height: 6.6666666667vw;
    width: auto;
}

@media (min-width: 768px) {
    .hero__main__subtitle img {
        height: min(34px, 3.3203125vw);
    }
}

@media (min-width: 992px) {
    .hero__main__subtitle img {
        height: min(34px, 2.7419354839vw);
    }
}

@media (min-width: 1240px) {
    .hero__main__subtitle img {
        height: 48px;
    }
}

.hero__main__contact__mail {
    margin: 0 0 6.6666666667vw;
}

@media (min-width: 768px) {
    .hero__main__contact__mail {
        margin: 0 0 min(20px, 1.953125vw);
    }
}

@media (min-width: 992px) {
    .hero__main__contact__mail {
        margin: 0 0 min(20px, 1.6129032258vw);
    }
}

@media (min-width: 1240px) {
    .hero__main__contact__mail {
        margin: 0 0 20px;
    }
}

.hero__main__contact__mail a {
    align-items: center;
    background-color: var(--color-gray-850);
    border-radius: 3px;
    color: var(--color-white);
    display: flex;
    flex-flow: row nowrap;
    font-size: 5vw;
    height: 21.1111111111vw;
    justify-content: center;
    letter-spacing: 0.12em;
    line-height: 1.2;
    position: relative;
    text-decoration: none;
    transition: background-color var(--duration) var(--cubic) 0s;
    width: 100%;
}

@media (min-width: 768px) {
    .hero__main__contact__mail a {
        font-size: var(--fs18);
        height: min(76px, 7.421875vw);
        max-width: min(470px, 45.8984375vw);
    }
}

@media (min-width: 992px) {
    .hero__main__contact__mail a {
        height: min(76px, 6.1290322581vw);
        max-width: min(470px, 37.9032258065vw);
    }
}

@media (min-width: 1240px) {
    .hero__main__contact__mail a {
        height: 76px;
        max-width: 470px;
    }
}

.hero__main__contact__mail a span {
    display: block;
    margin: 0 auto;
    position: relative;
    text-box: trim-both cap alphabetic;
    width: -webkit-fit-content;
    width: fit-content;
}

.hero__main__contact__mail a span:before {
    background-color: var(--color-red-primary);
    border-radius: 50%;
    bottom: 0;
    content: "";
    display: block;
    height: 1.3888888889vw;
    left: -3.3333333333vw;
    margin: auto 0;
    position: absolute;
    right: auto;
    top: 0;
    width: 1.3888888889vw;
}

@media (min-width: 768px) {
    .hero__main__contact__mail a span:before {
        height: 10px;
        left: -16px;
        width: 10px;
    }
}

.hero__main__contact__mail a:after {
    background-image: url(../images/commons/com-button-white-angle-right.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 3.6111111111vw 1.3888888889vw;
    bottom: 0;
    content: "";
    display: block;
    height: 1.3888888889vw;
    left: auto;
    margin: auto 0;
    position: absolute;
    right: 6.6666666667vw;
    top: 0;
    width: 3.6111111111vw;
    z-index: 1;
}

@media (min-width: 768px) {
    .hero__main__contact__mail a:after {
        background-size: 13px 5px;
        height: 5px;
        right: 24px;
        width: 13px;
    }
}

.hero__main__contact__mail a:focus {
    background-color: var(--color-red-primary);
}

@media (hover: hover) and (pointer: fine) {
    .hero__main__contact__mail a:hover {
        background-color: var(--color-red-primary);
    }
}

.hero__main__contact__tel {
    align-items: stretch;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    margin: 0 -5.5555555556vw 0 -2.7777777778vw;
}

@media (min-width: 768px) {
    .hero__main__contact__tel {
        gap: 0 min(10px, 0.9765625vw);
        margin: 0;
    }
}

@media (min-width: 992px) {
    .hero__main__contact__tel {
        gap: 0 min(10px, 0.8064516129vw);
    }
}

@media (min-width: 1240px) {
    .hero__main__contact__tel {
        gap: 0 10px;
    }
}

.hero__main__contact__tel__title {
    position: relative;
    width: 18.0555555556vw;
}

@media (min-width: 768px) {
    .hero__main__contact__tel__title {
        width: min(100px, 9.765625vw);
    }
}

@media (min-width: 992px) {
    .hero__main__contact__tel__title {
        width: min(100px, 8.064516129vw);
    }
}

@media (min-width: 1240px) {
    .hero__main__contact__tel__title {
        width: 100px;
    }
}

.hero__main__contact__tel__title:before {
    background-image: url(../images/icons/icon-black-headset-chat.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
    display: block;
    height: 10.7692307692vw;
    margin: 0 0 1.6666666667vw 1.1111111111vw;
    width: 10vw;
}

@media (min-width: 768px) {
    .hero__main__contact__tel__title:before {
        height: min(56px, 5.46875vw);
        margin: 0 0 min(8px, 0.9765625vw) min(4px, 0.390625vw);
        width: min(52px, 5.078125vw);
    }
}

@media (min-width: 992px) {
    .hero__main__contact__tel__title:before {
        height: min(56px, 4.5161290323vw);
        margin: 0 0 min(10px, 0.8064516129vw) min(4px, 0.3225806452vw);
        width: min(52px, 4.1935483871vw);
    }
}

@media (min-width: 1240px) {
    .hero__main__contact__tel__title:before {
        height: 56px;
        margin: 0 0 10px 4px;
        width: 52px;
    }
}

.hero__main__contact__tel__title:after {
    background-image: url(../images/commons/com-contact-tel-line-mb.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 1.6666666667vw 20.8333333333vw;
    bottom: 0;
    content: "";
    display: block;
    height: auto;
    margin: auto 0;
    position: absolute;
    right: 2.2222222222vw;
    top: 0;
    width: 1.6666666667vw;
}

@media (min-width: 768px) {
    .hero__main__contact__tel__title:after {
        background-image: url(../images/commons/com-contact-tel-line.svg);
        background-size: contain;
        height: min(114px, 11.1328125vw);
        right: min(5px, 0.48828125vw);
        width: min(10px, 0.9765625vw);
    }
}

@media (min-width: 992px) {
    .hero__main__contact__tel__title:after {
        height: min(114px, 9.1935483871vw);
        right: min(5px, 0.4032258065vw);
        width: min(10px, 0.8064516129vw);
    }
}

@media (min-width: 1240px) {
    .hero__main__contact__tel__title:after {
        height: 114px;
        right: 5px;
        width: 10px;
    }
}

.hero__main__contact__tel__title__text {
    color: var(--color-gray-850);
    display: block;
    font-size: 2.5vw;
    line-height: 1.5;
    text-align: center;
    transform: translateX(-2.2222222222vw);
    white-space: nowrap;
    width: -webkit-fit-content;
    width: fit-content;
}

@media (min-width: 768px) {
    .hero__main__contact__tel__title__text {
        font-size: min(0.8125rem, 1.26953125vw);
        transform: translateX(max(-8px, -0.78125vw));
    }
}

@media (min-width: 992px) {
    .hero__main__contact__tel__title__text {
        font-size: min(var(--fs13), 1.0483870968vw);
        transform: translateX(max(-8px, -0.6451612903vw));
    }
}

@media (min-width: 1240px) {
    .hero__main__contact__tel__title__text {
        font-size: var(--fs13);
        transform: translateX(-8px);
    }
}

.hero__main__contact__tel__title__text span {
    display: block;
}

@media (min-width: 768px) {
    .hero__main__contact__tel__title__text span:first-child {
        letter-spacing: 0.2em;
        padding-left: 0.2em;
    }
}

.hero__main__contact__tel__contents {
    width: calc(100% - 18.05556vw);
}

@media (min-width: 768px) {
    .hero__main__contact__tel__contents {
        width: calc(100% - min(100px, 9.765625vw));
    }
}

@media (min-width: 992px) {
    .hero__main__contact__tel__contents {
        width: calc(100% - min(100px, 8.064516129vw));
    }
}

@media (min-width: 1240px) {
    .hero__main__contact__tel__contents {
        width: calc(100% - 100px);
    }
}

.hero__main__contact__tel__contents__head {
    align-items: center;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    margin: 0;
}

.hero__main__contact__tel__contents__head__title {
    align-items: center;
    background-color: var(--color-gray-850);
    color: var(--color-white);
    display: flex;
    flex-flow: row nowrap;
    font-size: 2.5vw;
    height: 6.9444444444vw;
    justify-content: center;
    line-height: 1.1;
    width: 6.9444444444vw;
}

@media (min-width: 768px) {
    .hero__main__contact__tel__contents__head__title {
        font-size: min(0.8125rem, 1.26953125vw);
        height: min(38px, 3.7109375vw);
        width: min(38px, 3.7109375vw);
    }
}

@media (min-width: 992px) {
    .hero__main__contact__tel__contents__head__title {
        font-size: min(var(--fs13), 1.0483870968vw);
        height: min(38px, 3.064516129vw);
        width: min(38px, 3.064516129vw);
    }
}

@media (min-width: 1240px) {
    .hero__main__contact__tel__contents__head__title {
        font-size: var(--fs13);
        height: 38px;
        width: 38px;
    }
}

.hero__main__contact__tel__contents__head__title span {
    display: block;
}

.hero__main__contact__tel__contents__head__number {
    margin: 0;
    padding: 0 0 0 2.2222222222vw;
    width: calc(100% - 6.94444vw);
}

@media (min-width: 768px) {
    .hero__main__contact__tel__contents__head__number {
        padding: 0 0 0 min(4px, 0.390625vw);
        width: calc(100% - min(38px, 3.7109375vw));
    }
}

@media (min-width: 992px) {
    .hero__main__contact__tel__contents__head__number {
        padding: 0 0 0 min(4px, 0.3225806452vw);
        width: calc(100% - min(38px, 3.064516129vw));
    }
}

@media (min-width: 1240px) {
    .hero__main__contact__tel__contents__head__number {
        padding: 0 0 0 4px;
        width: calc(100% - 38px);
    }
}

.hero__main__contact__tel__contents__head__number a {
    color: var(--color-gray-850);
    font-size: 8.6111111111vw;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
    text-box: trim-both cap alphabetic;
    text-decoration: none;
}

@media (min-width: 768px) {
    .hero__main__contact__tel__contents__head__number a {
        font-size: min(3rem, 4.6875vw);
    }
}

@media (min-width: 992px) {
    .hero__main__contact__tel__contents__head__number a {
        font-size: min(3rem, 3.8709677419vw);
    }
}

@media (min-width: 1240px) {
    .hero__main__contact__tel__contents__head__number a {
        font-size: 3rem;
    }
}

.hero__main__contact__tel__contents__list {
    align-items: center;
    display: flex;
    flex-flow: row nowrap;
    gap: 1.1111111111vw;
    justify-content: flex-start;
    margin: 0 0 1.6666666667vw;
}

@media (min-width: 768px) {
    .hero__main__contact__tel__contents__list {
        gap: min(4px, 0.390625vw);
        margin: 0 0 min(6px, 0.5859375vw);
    }
}

@media (min-width: 992px) {
    .hero__main__contact__tel__contents__list {
        gap: min(4px, 0.3225806452vw);
        margin: 0 0 min(6px, 0.4838709677vw);
    }
}

@media (min-width: 1240px) {
    .hero__main__contact__tel__contents__list {
        gap: 4px;
        margin: 0 0 6px;
    }
}

.hero__main__contact__tel__contents__list__item {
    align-items: center;
    display: flex;
    flex-flow: row nowrap;
    gap: 0 0.8333333333vw;
    justify-content: flex-start;
}

@media (min-width: 768px) {
    .hero__main__contact__tel__contents__list__item {
        gap: 0 min(6px, 0.5859375vw);
    }
}

@media (min-width: 992px) {
    .hero__main__contact__tel__contents__list__item {
        gap: 0 min(6px, 0.4838709677vw);
    }
}

@media (min-width: 1240px) {
    .hero__main__contact__tel__contents__list__item {
        gap: 0 6px;
    }
}

.hero__main__contact__tel__contents__list__item__title {
    background: var(--color-gray-850);
    color: var(--color-white);
    display: block;
    font-size: 2.3611111111vw;
    line-height: 1.2;
    padding: 0.5555555556vw 0;
    text-align: center;
    width: 13.8888888889vw;
}

@media (min-width: 768px) {
    .hero__main__contact__tel__contents__list__item__title {
        font-size: min(0.8125rem, 1.26953125vw);
        padding: min(1.6px, 0.1953125vw) 0px;
        width: min(75px, 7.32421875vw);
    }
}

@media (min-width: 992px) {
    .hero__main__contact__tel__contents__list__item__title {
        font-size: min(var(--fs13), 1.0483870968vw);
        padding: min(2px, 0.1612903226vw) 0px;
        width: min(75px, 6.0483870968vw);
    }
}

@media (min-width: 1240px) {
    .hero__main__contact__tel__contents__list__item__title {
        font-size: var(--fs13);
        padding: 2px 0;
        width: 75px;
    }
}

.hero__main__contact__tel__contents__list__item__title span {
    text-box: trim-both cap alphabetic;
}

.hero__main__contact__tel__contents__list__item__number {
    font-size: 2.7777777778vw;
    width: calc(100% - 13.88889vw);
}

@media (min-width: 768px) {
    .hero__main__contact__tel__contents__list__item__number {
        font-size: min(0.9375rem, 1.46484375vw);
        width: calc(100% - min(75px, 7.32421875vw));
    }
}

@media (min-width: 992px) {
    .hero__main__contact__tel__contents__list__item__number {
        font-size: min(var(--fs15), 1.2096774194vw);
        width: calc(100% - min(75px, 6.0483870968vw));
    }
}

@media (min-width: 1240px) {
    .hero__main__contact__tel__contents__list__item__number {
        font-size: var(--fs15);
        width: calc(100% - 75px);
    }
}

.hero__main__contact__tel__contents__list__item__number a {
    color: var(--color-gray-850);
    font-size: inherit;
    font-weight: 700;
    line-height: 1;
    margin: 0;
    text-box: trim-both cap alphabetic;
    text-decoration: none;
}

.hero__main__contact__tel__contents__note {
    align-items: center;
    display: flex;
    flex-flow: row nowrap;
    gap: 0 0.8333333333vw;
    justify-content: flex-start;
}

@media (min-width: 768px) {
    .hero__main__contact__tel__contents__note {
        gap: 0 min(3px, 0.29296875vw);
    }
}

@media (min-width: 992px) {
    .hero__main__contact__tel__contents__note {
        gap: 0 min(3px, 0.2419354839vw);
    }
}

@media (min-width: 1240px) {
    .hero__main__contact__tel__contents__note {
        gap: 0 3px;
    }
}

.hero__main__contact__tel__contents__note__title {
    align-items: center;
    background: var(--color-gray-75);
    color: var(--color-black);
    display: flex;
    flex-flow: row nowrap;
    font-size: 2.2222222222vw;
    justify-content: center;
    letter-spacing: 0.06em;
    line-height: 1.2;
    padding: 1.1111111111vw 0;
    text-align: center;
    width: 6.9444444444vw;
}

@media (min-width: 768px) {
    .hero__main__contact__tel__contents__note__title {
        font-size: min(0.75rem, 1.171875vw);
        padding: min(3.2px, 0.390625vw) 0;
        width: min(36px, 3.515625vw);
    }
}

@media (min-width: 992px) {
    .hero__main__contact__tel__contents__note__title {
        font-size: min(var(--fs12), 0.9677419355vw);
        padding: min(4px, 0.3225806452vw) 0;
        width: min(36px, 2.9032258065vw);
    }
}

@media (min-width: 1240px) {
    .hero__main__contact__tel__contents__note__title {
        font-size: var(--fs12);
        padding: 4px 0;
        width: 36px;
    }
}

.hero__main__contact__tel__contents__note__title span {
    display: block;
    text-box: trim-both cap alphabetic;
}

.hero__main__contact__tel__contents__note__content {
    font-size: 2.5vw;
    width: calc(100% - 6.94444vw);
}

@media (min-width: 768px) {
    .hero__main__contact__tel__contents__note__content {
        font-size: min(0.8125rem, 1.26953125vw);
        width: calc(100% - min(36px, 3.515625vw));
    }
}

@media (min-width: 992px) {
    .hero__main__contact__tel__contents__note__content {
        font-size: min(var(--fs13), 1.0483870968vw);
        width: calc(100% - min(36px, 2.9032258065vw));
    }
}

@media (min-width: 1240px) {
    .hero__main__contact__tel__contents__note__content {
        font-size: var(--fs13);
        width: calc(100% - 36px);
    }
}

.hero__main__contact__tel__contents__note__content p {
    color: var(--color-gray-850);
    font-size: inherit;
    letter-spacing: 0.16em;
    line-height: 1.2;
    margin: 0;
    padding: 0 0 0 0.16em;
    white-space: nowrap;
}

.hero__fig {
    flex: 0 0 100%;
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 59.7222222222vw;
}

@media (min-width: 768px) {
    .hero__fig {
        flex: 0 0 41.6666666667%;
        inset: auto;
        position: relative;
    }
}

@media (min-width: 992px) {
    .hero__fig {
        flex: 0 0 50%;
    }
}

@media (min-width: 1240px) {
    .hero__fig {
        flex: 0 0 55%;
    }
}

@media (min-width: 768px) {
    .hero__fig__viewer {
        position: absolute;
        right: max(-66px, -4.7265625vw);
        top: max(-106px, -3.90625vw);
        width: min(731px, 52.3502604167vw);
    }
}

@media (min-width: 992px) {
    .hero__fig__viewer {
        right: max(-66px, -5.3225806452vw);
        top: max(-106px, -8.5483870968vw);
        width: min(731px, 58.9516129032vw);
    }
}

@media (min-width: 1240px) {
    .hero__fig__viewer {
        right: -66px;
        top: -106px;
        width: 731px;
    }
}

.hero__fig__viewer img {
    max-width: 100%;
    width: 100%;
}

@media (min-width: 768px) {
    .hero__fig__viewer img {
        max-width: min(716px, 51.2760416667vw);
    }
}

@media (min-width: 992px) {
    .hero__fig__viewer img {
        max-width: min(716px, 57.7419354839vw);
    }
}

@media (min-width: 1240px) {
    .hero__fig__viewer img {
        max-width: 716px;
    }
}

.hero__badge {
    align-items: center;
    bottom: auto;
    display: flex;
    flex-flow: row nowrap;
    gap: 3.3333333333vw;
    justify-content: center;
    left: 0;
    margin: 0 auto;
    max-width: 1320px;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 163.8888888889vw;
    z-index: 1;
}

@media (min-width: 768px) {
    .hero__badge {
        bottom: min(40px, 3.90625vw);
        gap: min(16px, 1.5625vw);
        justify-content: flex-end;
        top: auto;
        width: calc(100% - var(--c-pad)*2);
    }
}

@media (min-width: 992px) {
    .hero__badge {
        bottom: min(40px, 3.2258064516vw);
        gap: min(16px, 1.2903225806vw);
    }
}

@media (min-width: 1240px) {
    .hero__badge {
        bottom: 40px;
        gap: 16px;
    }
}

.hero__badge__item {
    align-items: center;
    background-color: var(--color-gray-850);
    border: 0.5555555556vw solid var(--color-white);
    border-radius: 50%;
    box-shadow: 1.1111111111vw 1.1111111111vw 0.8333333333vw rgba(var(--color-black-rgb), 0.1);
    color: var(--color-white);
    display: flex;
    flex-flow: row nowrap;
    font-size: 3.6111111111vw;
    height: 32.2222222222vw;
    justify-content: center;
    line-height: 1.21;
    text-align: center;
    width: 32.2222222222vw;
}

@media (min-width: 768px) {
    .hero__badge__item {
        border: min(4px, 0.390625vw) solid var(--color-white);
        box-shadow: min(8px, 0.78125vw) min(8px, 0.78125vw) min(6px, 0.5859375vw) rgba(var(--color-black-rgb), 0.1);
        font-size: min(1.4375rem, 2.24609375vw);
        height: min(210px, 20.5078125vw);
        width: min(210px, 20.5078125vw);
    }
}

@media (min-width: 992px) {
    .hero__badge__item {
        border: min(4px, 0.3225806452vw) solid var(--color-white);
        box-shadow: min(8px, 0.6451612903vw) min(8px, 0.6451612903vw) min(6px, 0.4838709677vw) rgba(var(--color-black-rgb), 0.1);
        font-size: min(var(--fs23), 1.8548387097vw);
        height: min(210px, 16.935483871vw);
        width: min(210px, 16.935483871vw);
    }
}

@media (min-width: 1240px) {
    .hero__badge__item {
        border: 4px solid var(--color-white);
        box-shadow: 8px 8px 6px rgba(var(--color-black-rgb), 0.1);
        font-size: var(--fs23);
        height: 210px;
        width: 210px;
    }
}

.hero__badge__item-inner {
    width: 100%;
}

@media (max-width: 767px) {
    .hero__badge__item .--large {
        font-size: 5.5555555556vw;
    }
}

@media (max-width: 767px) {
    .hero__badge__item__title {
        font-size: 3.8888888889vw;
    }
}

.hero__badge__item em {
    font-size: 7.5vw;
    font-style: normal;
    font-weight: 700;
    margin: 0 0.075em;
}

@media (min-width: 768px) {
    .hero__badge__item em {
        font-size: min(3.0625rem, 4.78515625vw);
    }
}

@media (min-width: 992px) {
    .hero__badge__item em {
        font-size: min(3.0625rem, 3.9516129032vw);
    }
}

@media (min-width: 1240px) {
    .hero__badge__item em {
        font-size: 3.0625rem;
    }
}

.banners {
    background: var(--color-white);
    box-shadow: 0 1.6666666667vw 1.9444444444vw rgba(53, 53, 53, 0.15), 0 -0.8333333333vw 1.9444444444vw rgba(53, 53, 53, 0.07);
    padding: 4.4444444444vw 0;
    position: relative;
    z-index: 1;
}

@media (min-width: 768px) {
    .banners {
        box-shadow: 0 6px 7px rgba(53, 53, 53, 0.15), 0 -3px 7px rgba(53, 53, 53, 0.07);
        padding: 22px var(--c-pad);
    }
}

.banners__item-wrapper {
    display: none;
}

@media (min-width: 768px) {
    .banners__item-wrapper {
        align-items: center;
        display: flex;
        flex-flow: row nowrap;
        gap: 24px;
        justify-content: center;
        margin: 0 auto;
        max-width: 1200px;
    }
}

.banners__item {
    flex: 0 0 calc(16.66667% - 20px);
}

@media (min-width: 768px) {
    .banners .splide {
        display: none !important;
    }
}

@media (max-width: 767px) {
    .banners img {
        height: 11.1111111111vw;
        width: auto;
    }
}

.about {
    background-color: var(--color-gray-850);
    padding: 9.4444444444vw 0 9.7222222222vw;
    position: relative;
}

@media (min-width: 768px) {
    .about {
        padding: 106px 0 90px;
    }
}

.about:before {
    background-image: url(../images/pages/front/front-about-bg-01.webp);
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: cover;
    bottom: auto;
    content: "";
    display: block;
    height: 28.6111111111vw;
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 0;
}

@media (min-width: 768px) {
    .about:before {
        height: 206px;
    }
}

.about:after {
    background-image: url(../images/pages/front/front-about-bg-02.webp);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    bottom: 0;
    content: "";
    display: block;
    height: 28.6111111111vw;
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: auto;
    width: 100%;
    z-index: 0;
}

@media (min-width: 768px) {
    .about:after {
        height: 206px;
    }
}

.about-container {
    margin: 0 auto;
    max-width: calc(1200px + var(--c-pad)*2);
    padding: 0 4.4444444444vw;
    position: relative;
    width: 100%;
    z-index: 1;
}

@media (min-width: 768px) {
    .about-container {
        padding: 0 var(--c-pad);
    }
}

.about__title {
    color: var(--color-white);
    font-size: 6.6666666667vw;
    font-weight: 400;
    letter-spacing: 0.04em;
    line-height: 1.7;
    margin: 0 0 8.3333333333vw;
}

@media (max-width: 767px) {
    .about__title {
        white-space: nowrap;
    }
}

@media (min-width: 768px) {
    .about__title {
        font-size: 3rem;
        line-height: 1.2;
        margin: 0 0 103px;
    }
}

@media (min-width: 992px) {
    .about__title {
        font-size: 3.1rem;
    }
}

@media (min-width: 1240px) {
    .about__title {
        font-size: 3.25rem;
    }
}

.about__item-wrapper {
    align-items: flex-start;
    display: flex;
    flex-flow: row wrap;
    gap: 10vw 2.2222222222vw;
    justify-content: flex-start;
    margin: 0 -2.7777777778vw 10vw;
    width: auto;
}

@media (min-width: 768px) {
    .about__item-wrapper {
        flex-wrap: nowrap;
        gap: 0 40px;
        margin: 0 0 98px;
        width: 100%;
    }
}

@media (min-width: 1240px) {
    .about__item-wrapper {
        gap: 0 48px;
    }
}

.about__item {
    flex: 0 0 calc(50% - 1.11111vw);
}

@media (min-width: 768px) {
    .about__item {
        flex: 0 0 calc(25% - 30px);
    }
}

@media (min-width: 1240px) {
    .about__item {
        flex: 0 0 calc(25% - 36px);
    }
}

.about__item__icon {
    margin: 0 0 1.1111111111vw;
    text-align: center;
}

@media (min-width: 768px) {
    .about__item__icon {
        margin: 0 0 18px;
    }
}

.about__item__icon img {
    width: 70%;
}

@media (min-width: 768px) {
    .about__item__icon img {
        max-width: 175px;
        width: 80%;
    }
}

.about__item__content {
    margin: 0 auto;
    padding: 0 0 0 3.3333333333vw;
    position: relative;
    width: -webkit-fit-content;
    width: fit-content;
}

@media (min-width: 768px) {
    .about__item__content {
        gap: 0 8px;
        padding: 0 0 0 20px;
    }
}

.about__item__content:before {
    background-color: var(--color-red-primary);
    border-radius: 50%;
    bottom: auto;
    content: "";
    display: block;
    height: 1.6666666667vw;
    left: 0;
    margin: auto 0;
    position: absolute;
    right: auto;
    top: 1.6666666667vw;
    width: 1.6666666667vw;
}

@media (min-width: 768px) {
    .about__item__content:before {
        height: 10px;
        top: 11px;
        width: 10px;
    }
}

.about__item__content p {
    color: var(--color-white);
    font-size: 3.8888888889vw;
    line-height: 1.64;
    margin: 0;
}

@media (min-width: 768px) {
    .about__item__content p {
        font-size: var(--fs16);
        line-height: 1.6;
    }
}

@media (min-width: 992px) {
    .about__item__content p {
        font-size: var(--fs19);
    }
}

@media (min-width: 1240px) {
    .about__item__content p {
        font-size: var(--fs20);
    }
}

.about__action a {
    align-items: center;
    background: var(--color-white);
    border-radius: 0.8333333333vw;
    color: var(--color-gray-850);
    display: flex;
    flex-flow: row nowrap;
    font-size: 4.4444444444vw;
    height: 21.1111111111vw;
    justify-content: center;
    line-height: 1.2;
    margin: 0 auto;
    max-width: 83.3333333333vw;
    position: relative;
    text-align: center;
    text-decoration: none;
    transition: background-color var(--duration) var(--cubic) 0s, color var(--duration) var(--cubic) 0s;
    width: 100%;
}

@media (min-width: 768px) {
    .about__action a {
        border-radius: 3px;
        font-size: var(--fs18);
        height: 76px;
        max-width: 470px;
    }
}

.about__action a:after {
    background-color: var(--color-gray-850);
    bottom: 0;
    content: "";
    display: block;
    height: 1.3888888889vw;
    left: auto;
    margin: auto 0;
    -webkit-mask-image: url(../images/commons/com-button-white-angle-right.svg);
    mask-image: url(../images/commons/com-button-white-angle-right.svg);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 3.6111111111vw 1.3888888889vw;
    mask-size: 3.6111111111vw 1.3888888889vw;
    position: absolute;
    right: 4.4444444444vw;
    top: 0;
    transition: background-color var(--duration) var(--cubic) 0s;
    width: 3.6111111111vw;
    z-index: 1;
}

@media (min-width: 768px) {
    .about__action a:after {
        height: 5px;
        -webkit-mask-size: 13px 5px;
        mask-size: 13px 5px;
        right: 32px;
        width: 13px;
    }
}

.about__action a:focus {
    background-color: var(--color-red-primary);
    color: var(--color-white);
}

.about__action a:focus:after {
    background-color: var(--color-white);
}

@media (hover: hover) and (pointer: fine) {
    .about__action a:hover {
        background-color: var(--color-red-primary);
        color: var(--color-white);
    }

    .about__action a:hover:after {
        background-color: var(--color-white);
    }
}

.solution {
    background-color: var(--color-gray-50);
    padding: 20.8333333333vw 0 27.7777777778vw;
}

@media (min-width: 768px) {
    .solution {
        padding: 80px 0 100px;
    }
}

.solution-container {
    margin: 0 auto;
    max-width: calc(1100px + var(--c-pad)*2);
    padding: 0 5.5555555556vw;
    position: relative;
    width: 100%;
    z-index: 1;
}

@media (min-width: 768px) {
    .solution-container {
        padding: 0 var(--c-pad);
    }
}

.solution__title {
    color: var(--color-black);
    font-size: 6.6666666667vw;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 12.2222222222vw;
    text-align: center;
}

@media (min-width: 768px) {
    .solution__title {
        font-size: 3rem;
        font-weight: 400;
        margin: 0 0 74px;
    }
}

@media (min-width: 992px) {
    .solution__title {
        font-size: 3.1rem;
    }
}

@media (min-width: 1240px) {
    .solution__title {
        font-size: 3.25rem;
    }
}

.solution__item-wrapper {
    align-items: stretch;
    display: flex;
    flex-flow: row wrap;
    gap: 8.8888888889vw 0;
}

@media (min-width: 768px) {
    .solution__item-wrapper {
        flex-wrap: nowrap;
        gap: 24px;
    }
}

@media (min-width: 992px) {
    .solution__item-wrapper {
        gap: 32px;
    }
}

@media (min-width: 1240px) {
    .solution__item-wrapper {
        gap: 40px;
    }
}

.solution__item {
    align-items: stretch;
    background-color: var(--color-gray-50);
    border-radius: 2.7777777778vw;
    display: flex;
    flex: 0 0 100%;
    flex-flow: column nowrap;
    justify-content: stretch;
    padding: 13.8888888889vw 0 0;
    position: relative;
}

@media (min-width: 768px) {
    .solution__item {
        border-radius: 10px;
        flex: 0 0 calc(33.33333% - 16px);
        padding: 20px 0 0;
    }
}

@media (min-width: 992px) {
    .solution__item {
        flex: 0 0 calc(33.33333% - 21.33333px);
        padding: 46px 0 0;
    }
}

@media (min-width: 1240px) {
    .solution__item {
        flex: 0 0 calc(33.33333% - 26.66667px);
    }
}

.solution__item:before {
    background: linear-gradient(135deg, #ffffff 0%, #e1e2e6 100%);
    border-radius: 2.7777777778vw;
    bottom: -2.7777777778vw;
    content: "";
    display: block;
    filter: blur(4px);
    left: -2.7777777778vw;
    pointer-events: none;
    position: absolute;
    right: -2.7777777778vw;
    top: -2.7777777778vw;
    z-index: -1;
}

@media (min-width: 768px) {
    .solution__item:before {
        border-radius: 10px;
        bottom: -10px;
        filter: blur(4px);
        left: -10px;
        right: -10px;
        top: -10px;
    }
}

.solution__item__main {
    flex: 1 1 auto;
    width: 100%;
}

.solution__item__main__head {
    margin: 0 0 9.4444444444vw;
}

@media (min-width: 768px) {
    .solution__item__main__head {
        margin: 0 0 29px;
    }
}

.solution__item__main__head__title {
    color: var(--color-gray-850);
    font-size: 8.3333333333vw;
    font-weight: 700;
    letter-spacing: 0.14em;
    line-height: 1.2;
    margin: 0 0 2.7777777778vw;
    text-align: center;
}

@media (min-width: 768px) {
    .solution__item__main__head__title {
        font-size: var(--fs20);
        margin: 0 0 12px;
    }
}

@media (min-width: 992px) {
    .solution__item__main__head__title {
        font-size: var(--fs27);
    }
}

@media (min-width: 1240px) {
    .solution__item__main__head__title {
        font-size: var(--fs30);
    }
}

.solution__item__main__head__subtitle {
    background: var(--color-gray-850);
    border-radius: 1.3888888889vw;
    color: var(--color-white);
    font-size: 4.1666666667vw;
    line-height: 1;
    margin: 0 auto;
    padding: 1.1111111111vw 2.7777777778vw;
    text-align: center;
    width: -webkit-fit-content;
    width: fit-content;
}

@media (min-width: 768px) {
    .solution__item__main__head__subtitle {
        border-radius: 5px;
        font-size: var(--fs12);
        padding: 4px 14px;
    }
}

@media (min-width: 992px) {
    .solution__item__main__head__subtitle {
        font-size: var(--fs13);
    }
}

@media (min-width: 1240px) {
    .solution__item__main__head__subtitle {
        font-size: var(--fs15);
    }
}

.solution__item__main__head__subtitle span {
    text-box: trim-both cap alphabetic;
}

.solution__item__main__head__subtitle .--ls-1 {
    letter-spacing: 0.1em;
}

.solution__item__main__btb {
    margin: 0 0 8.3333333333vw;
    padding: 0;
    position: relative;
}

@media (min-width: 768px) {
    .solution__item__main__btb {
        margin: 0 0 16px;
    }
}

@media (min-width: 992px) {
    .solution__item__main__btb {
        margin: 0 0 32px;
    }
}

.solution__item__main__btb:before {
    background-image: url(../images/pages/front/front-solution-btb-bg.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
    display: block;
    height: 38vw;
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 59.1111111111vw;
    z-index: 0;
}

@media (min-width: 768px) {
    .solution__item__main__btb:before {
        height: 116px;
        width: 180px;
    }
}

@media (min-width: 992px) {
    .solution__item__main__btb:before {
        height: 144px;
        width: 224px;
    }
}

.solution__item__main__btb__main {
    margin: 0 0 25vw;
    position: relative;
}

@media (min-width: 768px) {
    .solution__item__main__btb__main {
        margin: 0 0 80px;
    }
}

@media (min-width: 992px) {
    .solution__item__main__btb__main {
        margin: 0 0 100px;
    }
}

.solution__item__main__btb__main__title {
    color: var(--color-blue-bright);
    font-size: 6.3888888889vw;
    font-weight: 700;
    letter-spacing: 0.14em;
    line-height: 1.2;
    margin: 0 0 4.4444444444vw;
    text-align: center;
}

@media (min-width: 768px) {
    .solution__item__main__btb__main__title {
        font-size: var(--fs20);
        margin: 0 0 16px;
    }
}

@media (min-width: 992px) {
    .solution__item__main__btb__main__title {
        font-size: var(--fs24);
    }
}

.solution__item__main__btb__main__content p {
    color: var(--color-slate-dark);
    font-size: 3.8888888889vw;
    letter-spacing: 0.14em;
    line-height: 1.2;
    margin: 0;
    text-align: center;
}

@media (min-width: 768px) {
    .solution__item__main__btb__main__content p {
        font-size: var(--fs12);
    }
}

@media (min-width: 992px) {
    .solution__item__main__btb__main__content p {
        font-size: var(--fs14);
    }
}

.solution__item__main__btb__company {
    background: var(--color-white);
    border-radius: 3.3333333333vw;
    box-shadow: 0.8333333333vw 0.8333333333vw 0.8333333333vw rgba(var(--color-black-rgb), 0.05);
    margin: 0 auto;
    padding: 0 0 3.8888888889vw;
    position: relative;
    width: calc(100% - 20vw);
}

@media (min-width: 768px) {
    .solution__item__main__btb__company {
        border-radius: 12px;
        box-shadow: 3px 3px 3px rgba(var(--color-black-rgb), 0.05);
        padding: 0 0 14px;
        width: calc(100% - 32px);
    }
}

@media (min-width: 992px) {
    .solution__item__main__btb__company {
        width: calc(100% - 52px);
    }
}

@media (min-width: 1240px) {
    .solution__item__main__btb__company {
        width: calc(100% - 72px);
    }
}

.solution__item__main__btb__company__your {
    margin: 0 0 2.2222222222vw;
    padding: 17.2222222222vw 0 0;
    position: relative;
}

@media (min-width: 768px) {
    .solution__item__main__btb__company__your {
        margin: 0 0 8px;
        padding: 60px 0 0;
    }
}

.solution__item__main__btb__company__your:before {
    background-image: url(../images/icons/icon-building.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
    display: block;
    height: 17.9444444444vw;
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    top: -3.3333333333vw;
    width: 12.6666666667vw;
}

@media (min-width: 768px) {
    .solution__item__main__btb__company__your:before {
        height: 68px;
        top: -14px;
        width: 48px;
    }
}

.solution__item__main__btb__company__your:after {
    background-image: url(../images/pages/front/front-solution-icon-plus.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
    display: block;
    height: 3.3333333333vw;
    margin: 2.7777777778vw auto 0;
    width: 3.3333333333vw;
}

@media (min-width: 768px) {
    .solution__item__main__btb__company__your:after {
        height: 14px;
        margin: 10px auto 0;
        width: 14px;
    }
}

.solution__item__main__btb__company__your span {
    color: var(--color-slate-dark);
    display: block;
    font-size: 4.1666666667vw;
    letter-spacing: 0.14em;
    line-height: 1.2;
    text-align: center;
}

@media (min-width: 768px) {
    .solution__item__main__btb__company__your span {
        font-size: var(--fs14);
    }
}

@media (min-width: 992px) {
    .solution__item__main__btb__company__your span {
        font-size: var(--fs16);
    }
}

.solution__item__main__btb__company__logo {
    padding: 0 5.5555555556vw;
    text-align: center;
}

@media (min-width: 768px) {
    .solution__item__main__btb__company__logo {
        padding: 0 12px;
    }
}

@media (min-width: 992px) {
    .solution__item__main__btb__company__logo {
        padding: 0 24px;
    }
}

.solution__item__main__cbtc {
    margin: 0 0 8.3333333333vw;
    padding: 0;
    position: relative;
}

@media (min-width: 768px) {
    .solution__item__main__cbtc {
        margin: 0 0 16px;
    }
}

@media (min-width: 992px) {
    .solution__item__main__cbtc {
        margin: 0 0 32px;
    }
}

.solution__item__main__cbtc:before {
    background-image: url(../images/pages/front/front-solution-cbtc-bg.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
    display: block;
    height: 38vw;
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 59.1111111111vw;
    z-index: 0;
}

@media (min-width: 768px) {
    .solution__item__main__cbtc:before {
        height: 116px;
        width: 180px;
    }
}

@media (min-width: 992px) {
    .solution__item__main__cbtc:before {
        height: 144px;
        width: 224px;
    }
}

.solution__item__main__cbtc__main {
    margin: 0 0 25vw;
    position: relative;
}

@media (min-width: 768px) {
    .solution__item__main__cbtc__main {
        margin: 0 0 80px;
    }
}

@media (min-width: 992px) {
    .solution__item__main__cbtc__main {
        margin: 0 0 100px;
    }
}

.solution__item__main__cbtc__main__title {
    color: var(--color-blue-bright);
    font-size: 6.3888888889vw;
    font-weight: 700;
    letter-spacing: 0.14em;
    line-height: 1.2;
    margin: 0 0 4.4444444444vw;
    text-align: center;
}

@media (min-width: 768px) {
    .solution__item__main__cbtc__main__title {
        font-size: var(--fs20);
        margin: 0 0 16px;
    }
}

@media (min-width: 992px) {
    .solution__item__main__cbtc__main__title {
        font-size: var(--fs24);
    }
}

.solution__item__main__cbtc__main__content p {
    color: var(--color-slate-dark);
    font-size: 3.8888888889vw;
    letter-spacing: 0.14em;
    line-height: 1.2;
    margin: 0;
    text-align: center;
}

@media (min-width: 768px) {
    .solution__item__main__cbtc__main__content p {
        font-size: var(--fs12);
    }
}

@media (min-width: 992px) {
    .solution__item__main__cbtc__main__content p {
        font-size: var(--fs14);
    }
}

.solution__item__main__cbtc__company {
    background: var(--color-white);
    border-radius: 3.3333333333vw;
    box-shadow: 0.8333333333vw 0.8333333333vw 0.8333333333vw rgba(var(--color-black-rgb), 0.05);
    margin: 0 auto;
    padding: 0 0 3.8888888889vw;
    position: relative;
    width: calc(100% - 20vw);
}

@media (min-width: 768px) {
    .solution__item__main__cbtc__company {
        border-radius: 12px;
        box-shadow: 3px 3px 3px rgba(var(--color-black-rgb), 0.05);
        padding: 0 0 14px;
        width: calc(100% - 32px);
    }
}

@media (min-width: 992px) {
    .solution__item__main__cbtc__company {
        width: calc(100% - 52px);
    }
}

@media (min-width: 1240px) {
    .solution__item__main__cbtc__company {
        width: calc(100% - 72px);
    }
}

.solution__item__main__cbtc__company__your {
    margin: 0 0 8px;
    padding: 60px 0 0;
    position: relative;
}

.solution__item__main__cbtc__company__your:before {
    background-image: url(../images/icons/icon-building.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
    display: block;
    height: 68px;
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    top: -14px;
    width: 48px;
}

.solution__item__main__cbtc__company__your:after {
    background-image: url(../images/pages/front/front-solution-icon-plus.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
    display: block;
    height: 3.3333333333vw;
    margin: 2.7777777778vw auto 0;
    width: 3.3333333333vw;
}

@media (min-width: 768px) {
    .solution__item__main__cbtc__company__your:after {
        height: 14px;
        margin: 10px auto 0;
        width: 14px;
    }
}

.solution__item__main__cbtc__company__your span {
    color: var(--color-slate-dark);
    display: block;
    font-size: 4.1666666667vw;
    letter-spacing: 0.14em;
    line-height: 1.2;
    text-align: center;
}

@media (min-width: 768px) {
    .solution__item__main__cbtc__company__your span {
        font-size: var(--fs14);
    }
}

@media (min-width: 992px) {
    .solution__item__main__cbtc__company__your span {
        font-size: var(--fs16);
    }
}

.solution__item__main__cbtc__company__logo {
    padding: 0 5.5555555556vw;
    text-align: center;
}

@media (min-width: 768px) {
    .solution__item__main__cbtc__company__logo {
        padding: 0 12px;
    }
}

@media (min-width: 992px) {
    .solution__item__main__cbtc__company__logo {
        padding: 0 24px;
    }
}

.solution__item__main__btbtb {
    margin: 0 0 8.3333333333vw;
    padding: 0;
    position: relative;
}

@media (min-width: 768px) {
    .solution__item__main__btbtb {
        margin: 0 0 16px;
    }
}

@media (min-width: 992px) {
    .solution__item__main__btbtb {
        margin: 0 0 32px;
    }
}

.solution__item__main__btbtb:before {
    background-image: url(../images/pages/front/front-solution-btbtb-bg.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
    display: block;
    height: 53vw;
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    top: -1.1111111111vw;
    width: 56vw;
    z-index: 0;
}

@media (min-width: 768px) {
    .solution__item__main__btbtb:before {
        height: 170px;
        top: 0;
        width: 180px;
    }
}

@media (min-width: 992px) {
    .solution__item__main__btbtb:before {
        height: 212px;
        width: 224px;
    }
}

.solution__item__main__btbtb__head {
    color: var(--color-slate-dark);
    font-size: 4.4444444444vw;
    letter-spacing: 0.14em;
    line-height: 1.2;
    margin: 0 0 12.2222222222vw;
    padding: 2.2222222222vw 0 0;
    position: relative;
    text-align: center;
}

@media (min-width: 768px) {
    .solution__item__main__btbtb__head {
        font-size: var(--fs14);
        margin: 0 0 40px;
        padding: 14px 0 0;
    }
}

@media (min-width: 992px) {
    .solution__item__main__btbtb__head {
        font-size: var(--fs16);
        margin: 0 0 50px;
    }
}

.solution__item__main__btbtb__main {
    margin: 0 0 13.3333333333vw;
    position: relative;
}

@media (min-width: 768px) {
    .solution__item__main__btbtb__main {
        margin: 0 0 48px;
    }
}

@media (min-width: 992px) {
    .solution__item__main__btbtb__main {
        margin: 0 0 60px;
    }
}

.solution__item__main__btbtb__main__title {
    color: var(--color-blue-bright);
    font-size: 6.3888888889vw;
    font-weight: 700;
    letter-spacing: 0.14em;
    line-height: 1.2;
    margin: 0 0 2.2222222222vw;
    text-align: center;
}

@media (min-width: 768px) {
    .solution__item__main__btbtb__main__title {
        font-size: var(--fs20);
        margin: 0 0 8px;
    }
}

@media (min-width: 992px) {
    .solution__item__main__btbtb__main__title {
        font-size: var(--fs24);
    }
}

.solution__item__main__btbtb__main__content p {
    color: var(--color-slate-dark);
    font-size: 3.8888888889vw;
    letter-spacing: 0.14em;
    line-height: 1.2;
    margin: 0;
    text-align: center;
}

@media (min-width: 768px) {
    .solution__item__main__btbtb__main__content p {
        font-size: var(--fs12);
    }
}

@media (min-width: 992px) {
    .solution__item__main__btbtb__main__content p {
        font-size: var(--fs14);
    }
}

.solution__item__main__btbtb__company {
    background: var(--color-white);
    border-radius: 3.3333333333vw;
    box-shadow: 0.8333333333vw 0.8333333333vw 0.8333333333vw rgba(var(--color-black-rgb), 0.05);
    margin: 0 auto;
    padding: 0 0 3.8888888889vw;
    position: relative;
    width: calc(100% - 20vw);
}

@media (min-width: 768px) {
    .solution__item__main__btbtb__company {
        border-radius: 12px;
        box-shadow: 3px 3px 3px rgba(var(--color-black-rgb), 0.05);
        padding: 0 0 14px;
        width: calc(100% - 32px);
    }
}

@media (min-width: 992px) {
    .solution__item__main__btbtb__company {
        width: calc(100% - 52px);
    }
}

@media (min-width: 1240px) {
    .solution__item__main__btbtb__company {
        width: calc(100% - 72px);
    }
}

.solution__item__main__btbtb__company__your {
    margin: 0 0 2.2222222222vw;
    padding: 8.3333333333vw 0 0;
    position: relative;
}

@media (min-width: 768px) {
    .solution__item__main__btbtb__company__your {
        margin: 0 0 8px;
        padding: 26px 0 0;
    }
}

.solution__item__main__btbtb__company__your:before {
    background-image: url(../images/icons/icon-building.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
    display: block;
    height: 17.9444444444vw;
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    top: -11.1111111111vw;
    width: 12.6666666667vw;
}

@media (min-width: 768px) {
    .solution__item__main__btbtb__company__your:before {
        height: 55px;
        top: -40px;
        width: 39px;
    }
}

@media (min-width: 992px) {
    .solution__item__main__btbtb__company__your:before {
        height: 68px;
        top: -50px;
        width: 48px;
    }
}

.solution__item__main__btbtb__company__your:after {
    background-image: url(../images/pages/front/front-solution-icon-plus.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
    display: block;
    height: 3.3333333333vw;
    margin: 2.7777777778vw auto 0;
    width: 3.3333333333vw;
}

@media (min-width: 768px) {
    .solution__item__main__btbtb__company__your:after {
        height: 14px;
        margin: 10px auto 0;
        width: 14px;
    }
}

.solution__item__main__btbtb__company__your span {
    color: var(--color-slate-dark);
    display: block;
    font-size: 4.1666666667vw;
    letter-spacing: 0.14em;
    line-height: 1.2;
    text-align: center;
}

@media (min-width: 768px) {
    .solution__item__main__btbtb__company__your span {
        font-size: var(--fs14);
    }
}

@media (min-width: 992px) {
    .solution__item__main__btbtb__company__your span {
        font-size: var(--fs16);
    }
}

.solution__item__main__btbtb__company__logo {
    padding: 0 5.5555555556vw;
    text-align: center;
}

@media (min-width: 768px) {
    .solution__item__main__btbtb__company__logo {
        padding: 0 12px;
    }
}

@media (min-width: 992px) {
    .solution__item__main__btbtb__company__logo {
        padding: 0 24px;
    }
}

.solution__item__action {
    flex: 0 0 18.8888888889vw;
    width: 100%;
}

@media (min-width: 768px) {
    .solution__item__action {
        flex: 0 0 70px;
    }
}

.solution__item__action a {
    align-items: center;
    background: var(--color-gray-850);
    border-radius: 0 0 2.7777777778vw 2.7777777778vw;
    color: var(--color-white);
    display: flex;
    flex-flow: row nowrap;
    font-size: 3.6111111111vw;
    height: 100%;
    justify-content: center;
    letter-spacing: 0.14em;
    line-height: 1.2;
    position: relative;
    text-align: center;
    text-decoration: none;
    transition: background-color var(--duration) var(--cubic) 0s;
    width: 100%;
}

@media (min-width: 768px) {
    .solution__item__action a {
        border-radius: 0 0 10px 10px;
        font-size: var(--fs14);
    }
}

.solution__item__action a:after {
    background-color: var(--color-white);
    bottom: 0;
    content: "";
    display: block;
    height: 1.3888888889vw;
    left: auto;
    margin: auto 0;
    -webkit-mask-image: url(../images/commons/com-button-white-angle-right.svg);
    mask-image: url(../images/commons/com-button-white-angle-right.svg);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 3.6111111111vw 1.3888888889vw;
    mask-size: 3.6111111111vw 1.3888888889vw;
    position: absolute;
    right: 8.8888888889vw;
    top: 0;
    transition: background-color var(--duration) var(--cubic) 0s;
    width: 3.6111111111vw;
    z-index: 1;
}

@media (min-width: 768px) {
    .solution__item__action a:after {
        height: 5px;
        -webkit-mask-size: 13px 5px;
        mask-size: 13px 5px;
        right: 32px;
        width: 13px;
    }
}

.solution__item__action a:focus {
    background-color: var(--color-red-primary);
}

.solution__item__action a:focus:after {
    background-color: var(--color-white);
}

@media (hover: hover) and (pointer: fine) {
    .solution__item__action a:hover {
        background-color: var(--color-red-primary);
    }

    .solution__item__action a:hover:after {
        background-color: var(--color-white);
    }
}

.reason {
    background-color: var(--color-white);
    overflow: hidden;
    padding: 12.5vw 0 0;
}

@media (min-width: 768px) {
    .reason {
        padding: 94px 0 0;
    }
}

.reason__head {
    margin: 0 0 21.1111111111vw;
}

@media (min-width: 768px) {
    .reason__head {
        margin: 0 0 76px;
    }
}

.reason__head__logo {
    margin: 0 0 3.3333333333vw;
    text-align: center;
}

@media (min-width: 768px) {
    .reason__head__logo {
        margin: 0 0 16px;
    }
}

.reason__head__logo img {
    height: 4.4444444444vw;
    width: auto;
}

@media (min-width: 768px) {
    .reason__head__logo img {
        height: 26px;
    }
}

.reason__head__title {
    font-size: 10.5555555556vw;
    font-weight: 400;
    line-height: 1.2;
    margin: 0;
    text-align: center;
}

@media (min-width: 768px) {
    .reason__head__title {
        font-size: 3rem;
    }
}

@media (min-width: 992px) {
    .reason__head__title {
        font-size: 3.1rem;
    }
}

@media (min-width: 1240px) {
    .reason__head__title {
        font-size: 3.25rem;
    }
}

.reason__1st {
    background: linear-gradient(to bottom, #2a3d66 0%, #374f85 100%);
    color: var(--color-white);
    padding: 16.6666666667vw 0 8.3333333333vw;
}

@media (min-width: 768px) {
    .reason__1st {
        padding: 80px 0;
    }
}

@media (min-width: 992px) {
    .reason__1st {
        padding: 115px 0 85px;
    }
}

.reason__1st-container {
    align-items: stretch;
    display: flex;
    flex-flow: row wrap;
    gap: 11.1111111111vw 0;
    margin: 0 auto;
    max-width: calc(1200px + var(--c-pad)*2);
    padding: 0 5.5555555556vw;
    position: relative;
    width: 100%;
}

@media (min-width: 768px) {
    .reason__1st-container {
        gap: 40px 0;
        padding: 0 var(--c-pad);
    }
}

@media (min-width: 992px) {
    .reason__1st-container {
        flex-wrap: nowrap;
    }
}

.reason__1st__main {
    flex: 0 0 100%;
}

@media (min-width: 992px) {
    .reason__1st__main {
        flex: 0 0 66.3636363636%;
    }
}

@media (min-width: 1240px) {
    .reason__1st__main {
        flex: 0 0 63.6363636364%;
    }
}

.reason__1st__main__title {
    font-size: 8.3333333333vw;
    font-weight: 400;
    line-height: 1.26;
    margin: 0 0 13.8888888889vw;
    text-align: center;
}

@media (min-width: 768px) {
    .reason__1st__main__title {
        font-size: 2.85rem;
        line-height: 1.18;
        margin: 0 0 70px;
    }
}

@media (min-width: 992px) {
    .reason__1st__main__title {
        font-size: 3.028125rem;
        text-align: left;
    }
}

@media (min-width: 1240px) {
    .reason__1st__main__title {
        font-size: 3.15rem;
    }
}

.reason__1st__main__list {
    list-style: none;
    margin: 0;
    padding: 0;
    width: auto;
}

@media (min-width: 768px) {
    .reason__1st__main__list {
        margin: 0 auto;
        width: -webkit-fit-content;
        width: fit-content;
    }
}

@media (min-width: 992px) {
    .reason__1st__main__list {
        width: 100%;
    }
}

.reason__1st__main__list li {
    font-size: 4.4444444444vw;
    line-height: 1.66;
    margin: 0 0 6.9444444444vw;
    padding: 0 0 0 6.6666666667vw;
    position: relative;
}

@media (min-width: 768px) {
    .reason__1st__main__list li {
        font-size: var(--fs20);
        margin: 0 0 28px;
        padding: 0 0 0 32px;
    }
}

@media (min-width: 1240px) {
    .reason__1st__main__list li {
        font-size: var(--fs24);
        line-height: 1.23;
    }
}

.reason__1st__main__list li:last-child {
    margin-bottom: 0;
}

.reason__1st__main__list li:before {
    background-color: var(--color-red-primary);
    border-radius: 50%;
    bottom: auto;
    content: "";
    display: block;
    height: 2.7777777778vw;
    left: 0;
    margin: auto 0;
    position: absolute;
    right: auto;
    top: 2.7777777778vw;
    width: 2.7777777778vw;
}

@media (min-width: 768px) {
    .reason__1st__main__list li:before {
        height: 10px;
        top: 10px;
        width: 10px;
    }
}

.reason__1st__fig {
    flex: 0 0 100%;
    position: relative;
}

@media (min-width: 992px) {
    .reason__1st__fig {
        flex: 0 0 33.6363636364%;
    }
}

@media (min-width: 1240px) {
    .reason__1st__fig {
        flex: 0 0 36.3636363636%;
    }
}

.reason__1st__fig__viewer {
    text-align: center;
    transform: translateX(-3.8888888889vw);
}

@media (min-width: 768px) {
    .reason__1st__fig__viewer {
        transform: none;
    }
}

@media (min-width: 992px) {
    .reason__1st__fig__viewer {
        text-align: right;
        transform: translateX(-14px);
    }
}

.reason__1st__fig__viewer img {
    max-width: 50vw;
    width: 100%;
}

@media (min-width: 768px) {
    .reason__1st__fig__viewer img {
        max-width: 296px;
    }
}

@media (min-width: 992px) {
    .reason__1st__fig__viewer img {
        max-width: 370px;
    }
}

.reason__2nd {
    background: linear-gradient(to bottom, #336699 0%, #3f7dbd 100%);
    color: var(--color-white);
    padding: 19.4444444444vw 0 15.2777777778vw;
}

@media (min-width: 768px) {
    .reason__2nd {
        padding: 80px 0;
    }
}

@media (min-width: 992px) {
    .reason__2nd {
        padding: 55px 0 120px;
    }
}

.reason__2nd-container {
    align-items: stretch;
    display: flex;
    flex-flow: row wrap;
    gap: 18.0555555556vw 0;
    margin: 0 auto;
    max-width: calc(1200px + var(--c-pad)*2);
    padding: 0 5.5555555556vw;
    position: relative;
    width: 100%;
}

@media (min-width: 768px) {
    .reason__2nd-container {
        gap: 40px 0;
        padding: 0 var(--c-pad);
    }
}

@media (min-width: 992px) {
    .reason__2nd-container {
        flex-flow: row-reverse nowrap;
    }
}

.reason__2nd__main {
    flex: 0 0 100%;
}

@media (min-width: 992px) {
    .reason__2nd__main {
        flex: 0 0 61.8181818182%;
    }
}

@media (min-width: 1240px) {
    .reason__2nd__main {
        flex: 0 0 58.1818181818%;
    }
}

.reason__2nd__main__title {
    font-size: 8.0555555556vw;
    font-weight: 400;
    line-height: 1.3;
    margin: 0 0 19.4444444444vw;
    text-align: center;
}

@media (min-width: 768px) {
    .reason__2nd__main__title {
        font-size: 2.85rem;
        margin: 0 0 70px;
    }
}

@media (min-width: 992px) {
    .reason__2nd__main__title {
        font-size: 3.028125rem;
        text-align: left;
    }
}

@media (min-width: 1240px) {
    .reason__2nd__main__title {
        font-size: 3.15rem;
    }
}

.reason__2nd__main__title .--small {
    font-size: 6.6666666667vw;
    margin: 0;
}

@media (min-width: 768px) {
    .reason__2nd__main__title .--small {
        font-size: var(--fs24);
    }
}

.reason__2nd__main__list {
    list-style: none;
    margin: 0;
    padding: 0;
    width: auto;
}

@media (min-width: 768px) {
    .reason__2nd__main__list {
        margin: 0 auto;
        width: -webkit-fit-content;
        width: fit-content;
    }
}

@media (min-width: 992px) {
    .reason__2nd__main__list {
        width: 100%;
    }
}

.reason__2nd__main__list li {
    font-size: 4.4444444444vw;
    line-height: 1.66;
    margin: 0 0 6.9444444444vw;
    padding: 0 0 0 6.6666666667vw;
    position: relative;
}

@media (min-width: 768px) {
    .reason__2nd__main__list li {
        font-size: var(--fs20);
        margin: 0 -1em 28px 0;
        padding: 0 0 0 32px;
    }
}

@media (min-width: 1240px) {
    .reason__2nd__main__list li {
        font-size: var(--fs24);
        line-height: 1.23;
    }
}

.reason__2nd__main__list li:last-child {
    margin-bottom: 0;
}

.reason__2nd__main__list li:before {
    background-color: var(--color-red-primary);
    border-radius: 50%;
    bottom: auto;
    content: "";
    display: block;
    height: 2.7777777778vw;
    left: 0;
    margin: auto 0;
    position: absolute;
    right: auto;
    top: 2.7777777778vw;
    width: 2.7777777778vw;
}

@media (min-width: 768px) {
    .reason__2nd__main__list li:before {
        height: 10px;
        top: 10px;
        width: 10px;
    }
}

.reason__2nd__fig {
    flex: 0 0 100%;
    position: relative;
}

@media (min-width: 992px) {
    .reason__2nd__fig {
        flex: 0 0 38.1818181818%;
    }
}

@media (min-width: 1240px) {
    .reason__2nd__fig {
        flex: 0 0 41.8181818182%;
    }
}

.reason__2nd__fig__viewer {
    text-align: center;
    transform: translateX(3.8888888889vw);
}

@media (min-width: 768px) {
    .reason__2nd__fig__viewer {
        transform: none;
    }
}

@media (min-width: 992px) {
    .reason__2nd__fig__viewer {
        text-align: left;
        transform: translate(-40px, 65px);
    }
}

.reason__2nd__fig__viewer img {
    max-width: 67.7777777778vw;
    width: 100%;
}

@media (min-width: 768px) {
    .reason__2nd__fig__viewer img {
        max-width: 340px;
    }
}

@media (min-width: 992px) {
    .reason__2nd__fig__viewer img {
        max-width: 424px;
    }
}

.reason__3rd {
    background: linear-gradient(to bottom, #344b75 0%, #3b5585 100%);
    color: var(--color-white);
    padding: 16.6666666667vw 0;
}

@media (min-width: 768px) {
    .reason__3rd {
        padding: 80px 0;
    }
}

@media (min-width: 992px) {
    .reason__3rd {
        padding: 85px 0 115px;
    }
}

.reason__3rd-container {
    align-items: stretch;
    display: flex;
    flex-flow: row wrap;
    gap: 11.1111111111vw 0;
    margin: 0 auto;
    max-width: calc(1200px + var(--c-pad)*2);
    padding: 0 5.5555555556vw;
    position: relative;
    width: 100%;
}

@media (min-width: 768px) {
    .reason__3rd-container {
        gap: 40px 0;
        padding: 0 var(--c-pad);
    }
}

@media (min-width: 992px) {
    .reason__3rd-container {
        align-items: center;
        flex-wrap: nowrap;
    }
}

.reason__3rd__main {
    flex: 0 0 100%;
}

@media (min-width: 992px) {
    .reason__3rd__main {
        flex: 0 0 68.1818181818%;
        padding: 0 30px 0 0;
    }
}

.reason__3rd__main__title {
    font-size: 8.3333333333vw;
    font-weight: 400;
    line-height: 1.26;
    margin: 0 0 13.8888888889vw;
    text-align: center;
}

@media (min-width: 768px) {
    .reason__3rd__main__title {
        font-size: 2.85rem;
        line-height: 1.18;
        margin: 0 0 70px;
    }
}

@media (min-width: 992px) {
    .reason__3rd__main__title {
        font-size: 3.028125rem;
        text-align: left;
    }
}

@media (min-width: 1240px) {
    .reason__3rd__main__title {
        font-size: 3.15rem;
    }
}

.reason__3rd__main__list {
    list-style: none;
    margin: 0;
    padding: 0;
    width: auto;
}

@media (min-width: 768px) {
    .reason__3rd__main__list {
        margin: 0 auto;
        width: -webkit-fit-content;
        width: fit-content;
    }
}

@media (min-width: 992px) {
    .reason__3rd__main__list {
        width: 100%;
    }
}

.reason__3rd__main__list li {
    font-size: 4.4444444444vw;
    line-height: 1.66;
    margin: 0 0 7.7777777778vw;
    padding: 0 0 0 6.6666666667vw;
    position: relative;
}

@media (min-width: 768px) {
    .reason__3rd__main__list li {
        font-size: var(--fs20);
        margin: 0 0 28px;
        padding: 0 0 0 32px;
    }
}

@media (min-width: 1240px) {
    .reason__3rd__main__list li {
        font-size: var(--fs24);
        line-height: 1.23;
    }
}

.reason__3rd__main__list li:last-child {
    margin-bottom: 0;
}

.reason__3rd__main__list li:before {
    background-color: var(--color-red-primary);
    border-radius: 50%;
    bottom: auto;
    content: "";
    display: block;
    height: 2.7777777778vw;
    left: 0;
    margin: auto 0;
    position: absolute;
    right: auto;
    top: 2.7777777778vw;
    width: 2.7777777778vw;
}

@media (min-width: 768px) {
    .reason__3rd__main__list li:before {
        height: 10px;
        top: 10px;
        width: 10px;
    }
}

.reason__3rd__fig {
    flex: 0 0 100%;
    position: relative;
}

@media (min-width: 992px) {
    .reason__3rd__fig {
        flex: 0 0 31.8181818182%;
    }
}

.reason__3rd__fig__viewer {
    text-align: center;
}

@media (min-width: 992px) {
    .reason__3rd__fig__viewer {
        margin: 0 -44px 0 0;
        text-align: right;
        transform: translateY(8px);
    }
}

.reason__3rd__fig__viewer img {
    max-width: 76.3888888889vw;
    width: 100%;
}

@media (min-width: 768px) {
    .reason__3rd__fig__viewer img {
        max-width: 312px;
    }
}

@media (min-width: 992px) {
    .reason__3rd__fig__viewer img {
        max-width: 390px;
    }
}

.reason__4th {
    background: linear-gradient(to bottom, #3c73a0 0%, #4e96d1 100%);
    color: var(--color-white);
    padding: 23.6111111111vw 0 19.4444444444vw;
}

@media (min-width: 768px) {
    .reason__4th {
        padding: 80px 0;
    }
}

@media (min-width: 992px) {
    .reason__4th {
        padding: 80px 0 90px;
    }
}

.reason__4th-container {
    align-items: stretch;
    display: flex;
    flex-flow: row wrap;
    gap: 11.1111111111vw 0;
    margin: 0 auto;
    max-width: calc(1200px + var(--c-pad)*2);
    padding: 0 5.5555555556vw;
    position: relative;
    width: 100%;
}

@media (min-width: 768px) {
    .reason__4th-container {
        gap: 40px 0;
        padding: 0 var(--c-pad);
    }
}

@media (min-width: 992px) {
    .reason__4th-container {
        flex-flow: row-reverse nowrap;
    }
}

.reason__4th__main {
    flex: 0 0 100%;
}

@media (min-width: 992px) {
    .reason__4th__main {
        flex: 0 0 63.6363636364%;
        padding: 0 0 0 30px;
    }
}

@media (min-width: 1240px) {
    .reason__4th__main {
        flex: 0 0 60%;
    }
}

.reason__4th__main__title {
    font-size: 8.3333333333vw;
    font-weight: 400;
    line-height: 1.26;
    margin: 0 0 16.6666666667vw;
    text-align: center;
}

@media (min-width: 768px) {
    .reason__4th__main__title {
        font-size: 2.85rem;
        line-height: 1.18;
        margin: 0 0 55px;
    }
}

@media (min-width: 992px) {
    .reason__4th__main__title {
        font-size: 3.028125rem;
        text-align: left;
    }
}

@media (min-width: 1240px) {
    .reason__4th__main__title {
        font-size: 3.15rem;
    }
}

.reason__4th__main__list {
    list-style: none;
    margin: 0;
    padding: 0;
    width: auto;
}

@media (min-width: 768px) {
    .reason__4th__main__list {
        margin: 0 auto;
        width: -webkit-fit-content;
        width: fit-content;
    }
}

@media (min-width: 992px) {
    .reason__4th__main__list {
        width: 100%;
    }
}

.reason__4th__main__list li {
    font-size: 4.4444444444vw;
    line-height: 1.66;
    margin: 0 0 6.9444444444vw;
    padding: 0 0 0 6.6666666667vw;
    position: relative;
}

@media (min-width: 768px) {
    .reason__4th__main__list li {
        font-size: var(--fs20);
        margin: 0 -1em 28px 0;
        padding: 0 0 0 32px;
    }
}

@media (min-width: 1240px) {
    .reason__4th__main__list li {
        font-size: var(--fs24);
        line-height: 1.23;
    }
}

.reason__4th__main__list li:last-child {
    margin-bottom: 0;
}

.reason__4th__main__list li:before {
    background-color: var(--color-red-primary);
    border-radius: 50%;
    bottom: auto;
    content: "";
    display: block;
    height: 2.7777777778vw;
    left: 0;
    margin: auto 0;
    position: absolute;
    right: auto;
    top: 2.7777777778vw;
    width: 2.7777777778vw;
}

@media (min-width: 768px) {
    .reason__4th__main__list li:before {
        height: 10px;
        top: 10px;
        width: 10px;
    }
}

.reason__4th__fig {
    flex: 0 0 100%;
    position: relative;
}

@media (min-width: 992px) {
    .reason__4th__fig {
        flex: 0 0 36.3636363636%;
    }
}

@media (min-width: 1240px) {
    .reason__4th__fig {
        flex: 0 0 40%;
    }
}

.reason__4th__fig__viewer {
    text-align: center;
}

@media (min-width: 992px) {
    .reason__4th__fig__viewer {
        text-align: left;
        transform: translate(-8px, 16px);
    }
}

.reason__4th__fig__viewer img {
    max-width: 66.6666666667vw;
    width: 100%;
}

@media (min-width: 768px) {
    .reason__4th__fig__viewer img {
        max-width: 301px;
    }
}

@media (min-width: 992px) {
    .reason__4th__fig__viewer img {
        max-width: 376px;
    }
}

.reason__detail {
    background-color: var(--color-gray-50);
    padding: 15.2777777778vw 0 19.4444444444vw;
}

@media (min-width: 768px) {
    .reason__detail {
        padding: 90px 0 70px;
    }
}

.reason__detail-container {
    margin: 0 auto;
    max-width: calc(1200px + var(--c-pad)*2);
    padding: 0 5.5555555556vw;
    position: relative;
    width: 100%;
}

@media (min-width: 768px) {
    .reason__detail-container {
        padding: 0 var(--c-pad);
    }
}

.reason__detail__head {
    margin: 0 0 12.7777777778vw;
}

@media (min-width: 768px) {
    .reason__detail__head {
        margin: 0 0 58px;
    }
}

.reason__detail__head__title {
    font-size: 8.3333333333vw;
    font-weight: 400;
    line-height: 1.2;
    margin: 0 0 4.4444444444vw;
    text-align: center;
}

@media (min-width: 768px) {
    .reason__detail__head__title {
        font-size: 3rem;
        margin: 0 0 30px;
    }
}

@media (min-width: 992px) {
    .reason__detail__head__title {
        font-size: 3.1rem;
    }
}

@media (min-width: 1240px) {
    .reason__detail__head__title {
        font-size: 3.25rem;
    }
}

.reason__detail__head__logo {
    text-align: center;
}

.reason__detail__head__logo img {
    height: 6.6666666667vw;
    width: auto;
}

@media (min-width: 768px) {
    .reason__detail__head__logo img {
        height: 42px;
    }
}

@media (min-width: 992px) {
    .reason__detail__head__logo img {
        height: 47px;
    }
}

@media (min-width: 1240px) {
    .reason__detail__head__logo img {
        height: 52px;
    }
}

.reason__detail__content {
    margin: 0 0 1.6666666667vw;
}

@media (min-width: 768px) {
    .reason__detail__content {
        margin: 0 0 34px;
    }
}

.reason__detail__content p {
    color: var(--color-slate-dark);
    font-size: 4.4444444444vw;
    line-height: 2;
    margin: 0;
}

@media (min-width: 768px) {
    .reason__detail__content p {
        font-size: var(--fs16);
        line-height: 1.64;
        text-align: center;
    }
}

@media (min-width: 992px) {
    .reason__detail__content p {
        font-size: var(--fs18);
    }
}

.reason__detail__fig {
    margin: 0 -2.7777777778vw;
    text-align: center;
}

@media (min-width: 768px) {
    .reason__detail__fig {
        margin: 0;
    }
}

@media (max-width: 767px) {
    .reason__detail__fig img {
        width: 100%;
    }
}

.price {
    background-color: var(--color-gray-50);
    padding: 16.6666666667vw 0 0;
}

@media (min-width: 768px) {
    .price {
        padding: 80px 0 110px;
    }
}

.price-container {
    margin: 0 auto;
    max-width: calc(1222px + var(--c-pad)*2);
    padding: 0 5.5555555556vw;
    position: relative;
    width: 100%;
}

@media (min-width: 768px) {
    .price-container {
        padding: 0 var(--c-pad);
    }
}

.price__title {
    font-size: 8.3333333333vw;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 11.1111111111vw;
    text-align: center;
}

@media (min-width: 768px) {
    .price__title {
        font-size: 3rem;
        margin: 0 0 65px;
    }
}

@media (min-width: 992px) {
    .price__title {
        font-size: 3.1rem;
    }
}

@media (min-width: 1240px) {
    .price__title {
        font-size: 3.25rem;
    }
}

.price__basic {
    margin: 0 auto 8.8888888889vw;
    max-width: 1212px;
}

@media (min-width: 768px) {
    .price__basic {
        margin: 0 auto 46px;
    }
}

@media (min-width: 992px) {
    .price__basic {
        align-items: stretch;
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-start;
        margin: 0 0 46px auto;
    }
}

.price__basic__title {
    background-color: var(--color-gray-550);
    color: var(--color-white);
    font-size: 5vw;
    line-height: 1.2;
    margin: 0 auto -6.1111111111vw;
    padding: 12px 0;
    position: relative;
    text-align: center;
    width: 38.8888888889vw;
    z-index: 1;
}

@media (min-width: 768px) {
    .price__basic__title {
        font-size: var(--fs26);
        margin: 0 auto -20px;
        padding: 12px 0;
        width: 200px;
    }
}

@media (min-width: 992px) {
    .price__basic__title {
        font-size: var(--fs29);
        margin: 0;
        padding: 20px 0 0;
        width: 113px;
    }
}

@media (min-width: 1240px) {
    .price__basic__title {
        width: 125px;
    }
}

.price__basic__list {
    width: 100%;
}

@media (min-width: 992px) {
    .price__basic__list {
        padding: 0 0 0 12px;
        width: calc(100% - 113px);
    }
}

@media (min-width: 1240px) {
    .price__basic__list {
        width: calc(100% - 125px);
    }
}

.price__basic__list__startup {
    align-items: center;
    background-color: var(--color-white);
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    margin: 0 auto 2.7777777778vw;
    padding: 11.1111111111vw 3.3333333333vw 5.5555555556vw;
    position: relative;
    width: 66.6666666667vw;
}

@media (min-width: 768px) {
    .price__basic__list__startup {
        flex-wrap: nowrap;
        margin: 0 auto 12px;
        padding: 50px 22px 36px;
        width: 660px;
    }
}

@media (min-width: 992px) {
    .price__basic__list__startup {
        justify-content: flex-start;
        margin: 0 0 12px;
        max-width: 797px;
        padding: 24px 22px;
        width: 80%;
    }
}

@media (min-width: 1240px) {
    .price__basic__list__startup {
        width: 74.4859813084%;
    }
}

.price__basic__list__startup__logo {
    margin: 0 0 3.3333333333vw;
    text-align: center;
    width: 100%;
}

@media (min-width: 768px) {
    .price__basic__list__startup__logo {
        margin: 0 40px 0 0;
        width: auto;
    }
}

@media (min-width: 992px) {
    .price__basic__list__startup__logo {
        margin: 0 60px 0 0;
    }
}

@media (min-width: 1240px) {
    .price__basic__list__startup__logo {
        margin: 0 90px 0 0;
    }
}

.price__basic__list__startup__logo img {
    height: 5.8333333333vw;
    width: auto;
}

@media (min-width: 768px) {
    .price__basic__list__startup__logo img {
        height: 23px;
    }
}

.price__basic__list__startup__name {
    align-items: center;
    background-color: var(--color-gray-850);
    border-radius: 3.3333333333vw;
    color: var(--color-white);
    display: flex;
    flex-flow: row nowrap;
    font-size: 3.3333333333vw;
    height: 7.2222222222vw;
    justify-content: center;
    left: 45.8333333333vw;
    letter-spacing: 0.16em;
    line-height: 1.2;
    position: absolute;
    right: auto;
    text-align: center;
    top: 1.6666666667vw;
    width: 35.5555555556vw;
    z-index: 1;
}

@media (min-width: 768px) {
    .price__basic__list__startup__name {
        border-radius: 12px;
        font-size: var(--fs16);
        height: 40px;
        left: 460px;
        top: -6px;
        width: 180px;
    }
}

@media (min-width: 992px) {
    .price__basic__list__startup__name {
        font-size: var(--fs18);
        height: 44px;
        left: 600px;
        top: -24px;
        width: 220px;
    }
}

@media (min-width: 1240px) {
    .price__basic__list__startup__name {
        left: 655px;
    }
}

.price__basic__list__startup__name:after {
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 22"><path d="M27.23.06c-1.25,5.13-4.02,9.89-7.91,13.46-4.99,4.58-11.77,7.15-18.54,7.02,3.37-3.79,6.63-7.9,8.03-12.77.71-2.49.84-5.24.27-7.77,6.59,0,11.59.06,18.15.06Z" style="fill: %23202023;"/></svg>');
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto;
    bottom: -3.6944444444vw;
    content: "";
    display: block;
    height: 3.9722222222vw;
    left: 7.2222222222vw;
    position: absolute;
    width: 5.0555555556vw;
}

@media (min-width: 768px) {
    .price__basic__list__startup__name:after {
        bottom: -18px;
        height: 22px;
        left: 46px;
        width: 28px;
    }
}

.price__basic__list__startup__price {
    align-items: flex-start;
    display: flex;
    flex-flow: row nowrap;
    gap: 0 4.4444444444vw;
    justify-content: center;
}

@media (min-width: 768px) {
    .price__basic__list__startup__price {
        gap: 0 40px;
        justify-content: flex-start;
    }
}

@media (min-width: 992px) {
    .price__basic__list__startup__price {
        gap: 0 60px;
    }
}

@media (min-width: 1240px) {
    .price__basic__list__startup__price {
        gap: 0 80px;
    }
}

.price__basic__list__startup__price__item {
    color: var(--color-black);
    font-size: 3.6111111111vw;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}

@media (min-width: 768px) {
    .price__basic__list__startup__price__item {
        font-size: var(--fs28);
    }
}

.price__basic__list__startup__price__item .--small {
    color: var(--color-black);
    font-size: 3.6111111111vw;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}

@media (min-width: 768px) {
    .price__basic__list__startup__price__item .--small {
        font-size: var(--fs12);
        margin: 0 0 0 0.5em;
    }
}

.price__basic__list__highend {
    align-items: center;
    background-color: var(--color-white);
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    margin: 0 auto;
    padding: 7.2222222222vw 3.3333333333vw 3.8888888889vw;
    position: relative;
    width: 66.6666666667vw;
}

@media (min-width: 768px) {
    .price__basic__list__highend {
        flex-wrap: nowrap;
        padding: 50px 22px 14px;
        width: 660px;
    }
}

@media (min-width: 992px) {
    .price__basic__list__highend {
        justify-content: flex-start;
        margin: 0;
        max-width: 1073px;
        width: 100%;
    }
}

.price__basic__list__highend__logo {
    margin: 0 0 3.3333333333vw;
    text-align: center;
    width: 100%;
}

@media (min-width: 768px) {
    .price__basic__list__highend__logo {
        margin: 0 40px 0 0;
        width: auto;
    }
}

@media (min-width: 992px) {
    .price__basic__list__highend__logo {
        margin: 0 60px 0 0;
    }
}

@media (min-width: 1240px) {
    .price__basic__list__highend__logo {
        margin: 0 90px 0 0;
    }
}

.price__basic__list__highend__logo img {
    height: 12.2222222222vw;
    width: auto;
}

@media (min-width: 768px) {
    .price__basic__list__highend__logo img {
        height: 50px;
    }
}

.price__basic__list__highend__name {
    align-items: center;
    background-color: var(--color-gray-850);
    border-radius: 3.3333333333vw;
    color: var(--color-white);
    display: flex;
    flex-flow: row nowrap;
    font-size: 3.3333333333vw;
    height: 7.2222222222vw;
    justify-content: center;
    left: 45.8333333333vw;
    letter-spacing: 0.16em;
    line-height: 1.2;
    position: absolute;
    right: auto;
    text-align: center;
    top: -1.6666666667vw;
    width: 35.5555555556vw;
}

@media (min-width: 768px) {
    .price__basic__list__highend__name {
        border-radius: 12px;
        font-size: var(--fs16);
        height: 40px;
        left: 460px;
        top: -6px;
        width: 180px;
    }
}

@media (min-width: 992px) {
    .price__basic__list__highend__name {
        font-size: var(--fs18);
        height: 44px;
        left: 600px;
        top: -24px;
        width: 220px;
    }
}

@media (min-width: 1240px) {
    .price__basic__list__highend__name {
        left: 745px;
    }
}

.price__basic__list__highend__name:after {
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 22"><path d="M27.23.06c-1.25,5.13-4.02,9.89-7.91,13.46-4.99,4.58-11.77,7.15-18.54,7.02,3.37-3.79,6.63-7.9,8.03-12.77.71-2.49.84-5.24.27-7.77,6.59,0,11.59.06,18.15.06Z" style="fill: %23202023;"/></svg>');
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto;
    bottom: -3.6944444444vw;
    content: "";
    display: block;
    height: 3.9722222222vw;
    left: 7.2222222222vw;
    position: absolute;
    width: 5.0555555556vw;
}

@media (min-width: 768px) {
    .price__basic__list__highend__name:after {
        bottom: -18px;
        height: 22px;
        left: 46px;
        width: 28px;
    }
}

.price__basic__list__highend__price {
    align-items: flex-start;
    display: flex;
    flex-flow: row nowrap;
    gap: 0 4.4444444444vw;
    justify-content: center;
}

@media (min-width: 768px) {
    .price__basic__list__highend__price {
        gap: 0 40px;
        justify-content: flex-start;
    }
}

@media (min-width: 992px) {
    .price__basic__list__highend__price {
        gap: 0 60px;
    }
}

@media (min-width: 1240px) {
    .price__basic__list__highend__price {
        gap: 0 80px;
    }
}

.price__basic__list__highend__price__item {
    color: var(--color-black);
    font-size: 3.6111111111vw;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}

@media (min-width: 768px) {
    .price__basic__list__highend__price__item {
        font-size: var(--fs28);
    }
}

.price__basic__list__highend__price__item .--small {
    color: var(--color-black);
    font-size: 3.6111111111vw;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}

@media (min-width: 768px) {
    .price__basic__list__highend__price__item .--small {
        font-size: var(--fs12);
        margin: 0 0 0 0.5em;
    }
}

.price__basic__list__highend__or {
    align-items: center;
    background-color: var(--color-gray-800);
    border-radius: 50%;
    color: var(--color-white);
    display: flex;
    flex-flow: row nowrap;
    font-size: 3.0555555556vw;
    font-weight: 700;
    height: 7.7777777778vw;
    justify-content: center;
    left: 0;
    letter-spacing: 0.08em;
    line-height: 1.2;
    margin: 0 auto;
    position: absolute;
    right: 0;
    text-align: center;
    top: -5vw;
    width: 7.7777777778vw;
}

@media (min-width: 768px) {
    .price__basic__list__highend__or {
        font-size: var(--fs15);
        height: 38px;
        top: -26px;
        width: 38px;
    }
}

@media (min-width: 992px) {
    .price__basic__list__highend__or {
        left: 106px;
        margin: 0;
        right: auto;
    }
}

.price__option {
    margin: 0 auto;
    max-width: 1212px;
}

@media (min-width: 992px) {
    .price__option {
        align-items: stretch;
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-start;
        margin: 0 0 0 auto;
    }
}

.price__option__title {
    background-color: var(--color-gray-550);
    color: var(--color-white);
    font-size: 5vw;
    line-height: 1.2;
    margin: 0 auto -5.5555555556vw;
    padding: 4.4444444444vw 0 2.2222222222vw;
    position: relative;
    text-align: center;
    width: 38.8888888889vw;
    z-index: 1;
}

@media (min-width: 768px) {
    .price__option__title {
        font-size: var(--fs26);
        margin: 0 auto -20px;
        padding: 20px 0 12px;
        width: 200px;
    }
}

@media (min-width: 992px) {
    .price__option__title {
        font-size: var(--fs29);
        margin: 0;
        padding: 40px 0 0;
        width: 113px;
    }
}

@media (min-width: 1240px) {
    .price__option__title {
        width: 125px;
    }
}

.price__option__title:before {
    background-image: url(../images/pages/front/front-price-icon-plus.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
    display: block;
    height: 8.3333333333vw;
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    top: -4.1666666667vw;
    width: 8.3333333333vw;
}

@media (min-width: 768px) {
    .price__option__title:before {
        height: 40px;
        top: -20px;
        width: 40px;
    }
}

.price__option__list {
    background-color: var(--color-white);
    margin: 0 -5.5555555556vw;
    padding: 16.6666666667vw 7.7777777778vw 5.5555555556vw;
    position: relative;
}

@media (min-width: 768px) {
    .price__option__list {
        margin: 0;
        padding: 50px 20px 20px;
        width: 100%;
    }
}

@media (min-width: 992px) {
    .price__option__list {
        padding: 22px 12px 0 12px;
        width: calc(100% - 113px);
    }
}

@media (min-width: 1240px) {
    .price__option__list {
        width: calc(100% - 125px);
    }
}

.price__option__list__logo {
    margin: 0 0 40px;
    text-align: center;
}

@media (min-width: 992px) {
    .price__option__list__logo {
        left: 30px;
        margin: 0;
        position: absolute;
        text-align: left;
        top: 30px;
        z-index: 1;
    }
}

@media (min-width: 1240px) {
    .price__option__list__logo {
        left: 70px;
        top: 50px;
    }
}

.price__option__list__logo img {
    height: 7.7777777778vw;
    width: auto;
}

@media (min-width: 768px) {
    .price__option__list__logo img {
        height: 39px;
    }
}

@media (min-width: 992px) {
    .price__option__list__logo img {
        height: 44px;
    }
}

@media (min-width: 1240px) {
    .price__option__list__logo img {
        height: 48px;
    }
}

.price__option__list__item-wrapper {
    align-items: flex-end;
    display: flex;
    flex-flow: row wrap;
    gap: 4.4444444444vw;
}

@media (min-width: 768px) {
    .price__option__list__item-wrapper {
        gap: 20px 12px;
    }
}

@media (min-width: 992px) {
    .price__option__list__item-wrapper {
        flex-wrap: nowrap;
    }
}

.price__option__list__item {
    flex: 0 0 100%;
}

@media (min-width: 992px) {
    .price__option__list__item {
        flex: 0 0 calc(25% - 9px);
    }
}

.price__option__list__item__main {
    border-radius: 1.3888888889vw 1.3888888889vw 0 0;
    padding: 0;
}

@media (min-width: 768px) {
    .price__option__list__item__main {
        border-radius: 5px 5px 0 0;
    }
}

.price__option__list__item__main__basic__title {
    align-items: center;
    background: var(--color-slate-light);
    border-radius: 6.1111111111vw;
    color: var(--color-white);
    display: flex;
    flex-flow: row nowrap;
    font-size: 5.2777777778vw;
    height: 13.8888888889vw;
    justify-content: center;
    letter-spacing: 0.16em;
    line-height: 1.2;
    margin: 0 auto;
    max-width: 55.5555555556vw;
    text-align: center;
    width: 100%;
}

@media (min-width: 768px) {
    .price__option__list__item__main__basic__title {
        border-radius: 22px;
        font-size: var(--fs16);
        height: 42px;
        max-width: 168px;
    }
}

.price__option__list__item__main__option {
    margin: 0 0 5.5555555556vw;
    padding: 0 3.3333333333vw;
}

@media (min-width: 768px) {
    .price__option__list__item__main__option {
        margin: 0 0 20px;
        padding: 0 12px;
    }
}

.price__option__list__item__main__option__title {
    align-items: center;
    background: var(--color-blue-dark);
    border-radius: 6.1111111111vw;
    color: var(--color-white);
    display: flex;
    flex-flow: row nowrap;
    font-size: 5.2777777778vw;
    height: 13.8888888889vw;
    justify-content: center;
    letter-spacing: 0.16em;
    line-height: 1.2;
    margin: 0 auto;
    max-width: 55.5555555556vw;
    text-align: center;
    width: 100%;
}

@media (min-width: 768px) {
    .price__option__list__item__main__option__title {
        border-radius: 22px;
        font-size: var(--fs16);
        height: 42px;
        max-width: 168px;
    }
}

.price__option__list__item__main__option__list {
    margin: 6.6666666667vw auto 11.1111111111vw;
    max-width: 69.4444444444vw;
    width: 100%;
}

@media (min-width: 768px) {
    .price__option__list__item__main__option__list {
        margin: 20px auto 36px;
        max-width: none;
        width: -webkit-fit-content;
        width: fit-content;
    }
}

@media (min-width: 992px) {
    .price__option__list__item__main__option__list {
        max-width: 210px;
        width: 100%;
    }
}

.price__option__list__item__main__option__list__item {
    font-size: var(--fs10);
    margin: 0 0 3.6111111111vw;
    padding: 0 0 0 4.4444444444vw;
}

@media (min-width: 768px) {
    .price__option__list__item__main__option__list__item {
        margin: 0 0 13px;
        padding: 0 0 0 16px;
    }
}

.price__option__list__item__main__option__list__item:last-child {
    margin-bottom: 0;
}

.price__option__list__item__main__option__list__item a {
    color: var(--color-white);
    display: block;
    font-size: 3.8888888889vw;
    letter-spacing: 0.16em;
    line-height: 1.2;
    margin: 0;
    padding: 0 3.3333333333vw 0 0;
    position: relative;
    -webkit-text-decoration-color: color-mix(in srgb, currentColor, transparent 100%);
    text-decoration-color: color-mix(in srgb, currentColor, transparent 100%);
    transition: -webkit-text-decoration-color var(--duration) var(--cubic) 0s;
    transition: text-decoration-color var(--duration) var(--cubic) 0s;
    transition: text-decoration-color var(--duration) var(--cubic) 0s, -webkit-text-decoration-color var(--duration) var(--cubic) 0s;
}

@media (min-width: 768px) {
    .price__option__list__item__main__option__list__item a {
        font-size: var(--fs12);
        padding: 0 12px 0 0;
    }
}

.price__option__list__item__main__option__list__item a:after {
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8"><path d="M7.12,3.98v.03L1.13,7.1l-.25-.49,5.08-2.6v-.02L.88,1.39l.25-.49,5.98,3.08Z" style="fill: %23fff;"/></svg>');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    bottom: 0;
    content: "";
    display: block;
    height: 2.2222222222vw;
    margin: auto 0;
    position: absolute;
    right: -1.1111111111vw;
    top: 0;
    width: 2.2222222222vw;
}

@media (min-width: 768px) {
    .price__option__list__item__main__option__list__item a:after {
        height: 8px;
        right: -4px;
        width: 8px;
    }
}

.price__option__list__item__main__option__list__item a:focus {
    -webkit-text-decoration-color: currentColor;
    text-decoration-color: currentColor;
}

@media (hover: hover) and (pointer: fine) {
    .price__option__list__item__main__option__list__item a:hover {
        -webkit-text-decoration-color: currentColor;
        text-decoration-color: currentColor;
    }
}

.price__option__list__item__main__customize {
    margin: 0 0 6.6666666667vw;
    padding: 0 3.3333333333vw;
}

@media (min-width: 768px) {
    .price__option__list__item__main__customize {
        margin: 0 0 20px;
        padding: 0 12px;
    }
}

.price__option__list__item__main__customize__title {
    color: var(--color-white);
    font-size: 5.2777777778vw;
    font-weight: 700;
    letter-spacing: 0.16em;
    line-height: 1.4;
    margin: 0 auto 10vw;
    position: relative;
    text-align: center;
    width: -webkit-fit-content;
    width: fit-content;
}

@media (min-width: 768px) {
    .price__option__list__item__main__customize__title {
        font-size: var(--fs16);
        margin: 0 auto 32px;
    }
}

.price__option__list__item__main__customize__title:before {
    background-color: var(--color-red-primary);
    border-radius: 50%;
    bottom: 0;
    content: "";
    display: block;
    height: 2.7777777778vw;
    left: -4.4444444444vw;
    margin: auto 0;
    position: absolute;
    right: auto;
    top: 0;
    width: 2.7777777778vw;
}

@media (min-width: 768px) {
    .price__option__list__item__main__customize__title:before {
        height: 10px;
        left: -16px;
        width: 10px;
    }
}

.price__option__list__item__main__customize__list {
    margin: 0 auto;
    max-width: 69.4444444444vw;
    width: 100%;
}

@media (min-width: 768px) {
    .price__option__list__item__main__customize__list {
        max-width: none;
        width: -webkit-fit-content;
        width: fit-content;
    }
}

@media (min-width: 992px) {
    .price__option__list__item__main__customize__list {
        max-width: 216px;
        width: 100%;
    }
}

.price__option__list__item__main__customize__list__item {
    font-size: var(--fs10);
    margin: 0 0 4.1666666667vw;
}

@media (min-width: 768px) {
    .price__option__list__item__main__customize__list__item {
        margin: 0 0 13px;
    }
}

.price__option__list__item__main__customize__list__item:last-child {
    margin-bottom: 0;
}

.price__option__list__item__main__customize__list__item a {
    color: var(--color-white);
    display: block;
    font-size: 3.8888888889vw;
    letter-spacing: 0.16em;
    line-height: 1.2;
    margin: 0;
    padding: 0 3.3333333333vw 0 0;
    position: relative;
    -webkit-text-decoration-color: color-mix(in srgb, currentColor, transparent 100%);
    text-decoration-color: color-mix(in srgb, currentColor, transparent 100%);
    transition: -webkit-text-decoration-color var(--duration) var(--cubic) 0s;
    transition: text-decoration-color var(--duration) var(--cubic) 0s;
    transition: text-decoration-color var(--duration) var(--cubic) 0s, -webkit-text-decoration-color var(--duration) var(--cubic) 0s;
}

@media (min-width: 768px) {
    .price__option__list__item__main__customize__list__item a {
        font-size: var(--fs12);
        padding: 0 12px 0 0;
    }
}

@media (min-width: 1240px) {
    .price__option__list__item__main__customize__list__item a {
        padding: 0 6px 0 0;
    }
}

.price__option__list__item__main__customize__list__item a:after {
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8"><path d="M7.12,3.98v.03L1.13,7.1l-.25-.49,5.08-2.6v-.02L.88,1.39l.25-.49,5.98,3.08Z" style="fill: %23fff;"/></svg>');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    bottom: 0;
    content: "";
    display: block;
    height: 8px;
    margin: auto 0;
    position: absolute;
    right: -4px;
    top: 0;
    width: 8px;
}

.price__option__list__item__main__customize__list__item a:focus {
    -webkit-text-decoration-color: currentColor;
    text-decoration-color: currentColor;
}

@media (hover: hover) and (pointer: fine) {
    .price__option__list__item__main__customize__list__item a:hover {
        -webkit-text-decoration-color: currentColor;
        text-decoration-color: currentColor;
    }
}

.price__option__list__item__main__customize__note {
    margin: 13.8888888889vw 0 0;
}

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

.price__option__list__item__main__customize__note p {
    color: var(--color-white);
    font-size: 3.8888888889vw;
    letter-spacing: 0.16em;
    line-height: 1.4;
    margin: 0;
    text-align: center;
}

@media (min-width: 768px) {
    .price__option__list__item__main__customize__note p {
        font-size: var(--fs12);
    }
}

.price__option__list__item--1st .price__option__list__item__main {
    background-color: var(--color-gray-100);
    padding: 5.5555555556vw 0 2.7777777778vw;
}

@media (min-width: 768px) {
    .price__option__list__item--1st .price__option__list__item__main {
        padding: 20px 0 10px;
    }
}

.price__option__list__item--2nd .price__option__list__item__main {
    background: linear-gradient(to right, #2389ca 0%, rgba(35, 137, 202, 0.8) 100%);
    padding: 8.3333333333vw 0 5.5555555556vw;
}

@media (min-width: 768px) {
    .price__option__list__item--2nd .price__option__list__item__main {
        padding: 24px 0 10px;
    }
}

.price__option__list__item--3rd .price__option__list__item__main {
    background: linear-gradient(to right, #336699 0%, rgba(51, 102, 153, 0.9) 100%);
    padding: 12.5vw 0 5.5555555556vw;
}

@media (min-width: 768px) {
    .price__option__list__item--3rd .price__option__list__item__main {
        padding: 30px 0 10px;
    }
}

.price__option__list__item--4th .price__option__list__item__main {
    background: linear-gradient(to right, #2a3d66 0%, rgba(42, 61, 102, 0.9) 100%);
    padding: 15.2777777778vw 0 5.5555555556vw;
}

@media (min-width: 768px) {
    .price__option__list__item--4th .price__option__list__item__main {
        padding: 40px 0 10px;
    }
}

.price__option__list__item__price {
    align-items: center;
    background-color: var(--color-gray-850);
    color: var(--color-white);
    display: flex;
    flex-flow: row nowrap;
    font-size: 9.4444444444vw;
    font-weight: 700;
    height: 25.5555555556vw;
    justify-content: center;
    line-height: 1.2;
    text-align: center;
    width: 100%;
}

@media (min-width: 768px) {
    .price__option__list__item__price {
        font-size: var(--fs24);
        height: 78px;
    }
}

@media (min-width: 1240px) {
    .price__option__list__item__price {
        font-size: var(--fs28);
    }
}

.price__option__list__item__price .--small {
    color: var(--color-white);
    font-size: 3.8888888889vw;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 0 0.1em;
    text-align: center;
}

@media (min-width: 768px) {
    .price__option__list__item__price .--small {
        font-size: var(--fs10);
    }
}

@media (min-width: 1240px) {
    .price__option__list__item__price .--small {
        font-size: var(--fs12);
    }
}

.case {
    background-color: var(--color-white);
    padding: 19.4444444444vw 0 16.6666666667vw;
}

@media (min-width: 768px) {
    .case {
        padding: 110px 0 130px;
    }
}

.case-container {
    margin: 0 auto;
    max-width: calc(1100px + var(--c-pad)*2);
    padding: 0 5.5555555556vw;
    position: relative;
    width: 100%;
}

@media (min-width: 768px) {
    .case-container {
        padding: 0 var(--c-pad);
    }
}

.case__title {
    color: var(--color-black);
    font-size: 8.3333333333vw;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 12.7777777778vw;
    text-align: center;
}

@media (min-width: 768px) {
    .case__title {
        font-size: 3rem;
        margin: 0 0 100px;
    }
}

@media (min-width: 992px) {
    .case__title {
        font-size: 3.1rem;
    }
}

@media (min-width: 1240px) {
    .case__title {
        font-size: 3.25rem;
    }
}

.case__item {
    align-items: flex-start;
    display: flex;
    flex-flow: row wrap;
    gap: 8.3333333333vw;
    justify-content: flex-start;
    margin: 0 0 33.3333333333vw;
}

@media (min-width: 768px) {
    .case__item {
        flex-wrap: nowrap;
        gap: 0 30px;
        margin: 0 0 120px;
    }
}

@media (min-width: 992px) {
    .case__item {
        gap: 0 50px;
    }
}

.case__item:last-child {
    margin-bottom: 0;
}

.case__item__fig {
    flex: 0 0 100%;
}

@media (min-width: 768px) {
    .case__item__fig {
        flex: 0 0 calc(50% - 30px);
    }
}

@media (min-width: 992px) {
    .case__item__fig {
        flex: 0 0 calc(50% - 50px);
    }
}

.case__item__fig img {
    border-radius: 6.1111111111vw;
}

@media (max-width: 767px) {
    .case__item__fig img {
        width: 100%;
    }
}

@media (min-width: 768px) {
    .case__item__fig img {
        border-radius: 22px;
    }
}

.case__item__main {
    flex: 0 0 100%;
}

@media (min-width: 768px) {
    .case__item__main {
        flex: 0 0 50%;
        padding: 20px 0 0;
    }
}

.case__item__main__title {
    font-size: 5vw;
    font-weight: 700;
    line-height: 1.94;
    margin: 0 0 11.1111111111vw;
}

@media (min-width: 768px) {
    .case__item__main__title {
        font-size: var(--fs24);
        line-height: 1.45;
        margin: 0 0 30px;
    }
}

.case__item__main__name {
    font-size: 5.5555555556vw;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 auto 12.2222222222vw;
    padding: 0;
    position: relative;
    width: -webkit-fit-content;
    width: fit-content;
}

@media (min-width: 768px) {
    .case__item__main__name {
        font-size: var(--fs20);
        margin: 0 0 29px;
        padding: 0 0 0 16px;
        width: 100%;
    }
}

.case__item__main__name:before {
    background-color: var(--color-red-primary);
    border-radius: 50%;
    bottom: 0;
    content: "";
    display: block;
    height: 2.7777777778vw;
    left: -5vw;
    margin: auto 0;
    position: absolute;
    right: auto;
    top: 0;
    width: 2.7777777778vw;
}

@media (min-width: 768px) {
    .case__item__main__name:before {
        height: 10px;
        left: 0;
        width: 10px;
    }
}

.case__item__main__content {
    margin: 0 0 8.3333333333vw;
}

@media (min-width: 768px) {
    .case__item__main__content {
        margin: 0 0 20px;
    }
}

.case__item__main__content p {
    color: var(--color-slate-dark);
    font-size: 4.4444444444vw;
    line-height: 2;
    margin: 0;
}

@media (min-width: 768px) {
    .case__item__main__content p {
        font-size: var(--fs16);
        line-height: 1.85;
    }
}

@media (min-width: 768px) {
    .case__item__main__action {
        padding: 0 10px 0 0;
    }
}

.case__item__main__action a {
    color: var(--color-slate-dark);
    display: block;
    font-size: var(--fs16);
    line-height: 1.2;
    margin: 0 auto;
    padding: 0.8333333333vw 8.3333333333vw 0.8333333333vw 0;
    position: relative;
    text-decoration: none;
    width: -webkit-fit-content;
    width: fit-content;
}

@media (min-width: 768px) {
    .case__item__main__action a {
        margin: 0 0 0 auto;
        padding: 3px 30px 3px 0;
    }
}

.case__item__main__action a:before {
    background-color: var(--color-slate-dark);
    border-radius: 50%;
    bottom: 0;
    content: "";
    display: block;
    height: 5.5555555556vw;
    left: auto;
    margin: auto 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: background-color var(--duration) var(--cubic) 0s;
    width: 5.5555555556vw;
    z-index: 1;
}

@media (min-width: 768px) {
    .case__item__main__action a:before {
        height: 22px;
        width: 22px;
    }
}

.case__item__main__action a:after {
    background-color: var(--color-white);
    border-radius: 50%;
    bottom: 0;
    content: "";
    display: block;
    height: 5.5555555556vw;
    left: auto;
    margin: auto 0;
    -webkit-mask-image: url(../images/commons/com-button-white-angle-right.svg);
    mask-image: url(../images/commons/com-button-white-angle-right.svg);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 3.6111111111vw 1.3888888889vw;
    mask-size: 3.6111111111vw 1.3888888889vw;
    position: absolute;
    right: 0;
    top: -0.2777777778vw;
    width: 5.5555555556vw;
    z-index: 1;
}

@media (min-width: 768px) {
    .case__item__main__action a:after {
        height: 22px;
        -webkit-mask-size: 13px 5px;
        mask-size: 13px 5px;
        top: -1px;
        width: 22px;
    }
}

.case__item__main__action a:focus:before {
    background-color: var(--color-red-primary);
}

@media (hover: hover) and (pointer: fine) {
    .case__item__main__action a:hover:before {
        background-color: var(--color-red-primary);
    }
}

@media (min-width: 768px) {
    .case__item:nth-child(odd) {
        flex-direction: row-reverse;
    }
}

.menu {
    background-color: var(--color-white);
    border-radius: 14px;
    display: none;
    padding: 45px 0 45px 26px;
    position: fixed;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 220px;
    z-index: 10;
}

@media (max-width: 1399px) {
    .menu {
        display: none !important;
    }
}

.menu__item {
    margin: 0 0 30px;
}

.menu__item:last-child {
    margin-bottom: 0;
}

.menu__item a {
    color: var(--color-slate-dark);
    display: block;
    font-size: var(--fs14);
    line-height: 1.2;
    padding: 0 0 0 36px;
    position: relative;
    text-decoration: none;
    transition: color var(--duration) var(--cubic) 0s;
}

.menu__item a:before {
    background-color: var(--color-slate-light);
    border-radius: 50%;
    bottom: auto;
    content: "";
    display: block;
    height: 14px;
    left: 5px;
    margin: auto 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: background-color var(--duration) var(--cubic) 0s;
    width: 14px;
}

.menu__item a:after {
    border: 1px solid var(--color-blue-primary);
    border-radius: 50%;
    bottom: auto;
    content: "";
    display: block;
    height: 24px;
    left: 0;
    margin: auto 0;
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: opacity var(--duration) var(--cubic) 0s;
    width: 24px;
}

@media (hover: hover) and (pointer: fine) {
    .menu__item a:hover {
        color: var(--color-blue-primary);
    }

    .menu__item a:hover:before {
        background-color: var(--color-blue-primary);
    }

    .menu__item a:hover:after {
        opacity: 1;
    }
}

.menu__item a.-active {
    color: var(--color-blue-primary);
}

.menu__item a.-active:before {
    background-color: var(--color-blue-primary);
}

.menu__item a.-active:after {
    opacity: 1;
}

.menu__active span {
    color: var(--color-blue-primary);
    font-size: var(--fs14);
    line-height: 2.11;
}

.menu__active__ellipse-204 {
    border: 1px solid var(--color-blue-primary);
    border-radius: 50%;
    height: 24px;
    width: 24px;
}

.menu__active__ellipse-203 {
    background-color: var(--color-blue-primary);
    border-radius: 50%;
    height: 14px;
    width: 14px;
}