@charset "UTF-8";

.page-online {
    overflow: hidden;
}

.page-online ul,
.page-online ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

.page-online dl,
.page-online dt,
.page-online dd,
.page-online h2,
.page-online h3,
.page-online p {
    margin: 0;
}

.page-online_nb {
    display: inline-block;
    white-space: nowrap;
}

.page-online h2,
.page-online h3,
.page-online_intro-copy {
    line-break: strict;
    word-break: normal;
    overflow-wrap: normal;
}

.page-online_fv {
    margin: -20px 0 115px;
    padding: 0 0 78px;
    position: relative;
}

.page-online_fv:before {
    content: "";
    position: absolute;
    width: calc(50% + 515px);
    height: 470px;
    right: 0;
    top: 92px;
    background: #F4FAFA;
    z-index: -1;
}

.page-online_fv:after {
    content: "ONLINE VIEWING";
    position: absolute;
    left: calc(50% - 710px);
    right: 0;
    bottom: -48px;
    color: #E8E8E8;
    font-family: "din-2014", sans-serif;
    font-size: 118px;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1;
    opacity: 0.55;
    white-space: nowrap;
    z-index: -2;
    pointer-events: none;
}

.page-online_fv-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    gap: 64px;
    z-index: 2;
}

.page-online_fv-inner:before {
    content: "";
    position: absolute;
    width: 210px;
    height: 260px;
    left: 138px;
    bottom: -44px;
    background: #fff;
    z-index: -1;
}

.page-online_fv-content {
    width: 520px;
    padding: 12px 0 38px;
    position: relative;
    z-index: 2;
}

.page-online_fv-kicker {
    font-size: 28px;
    line-height: 1;
    margin-bottom: 14px;
}

.page-online_fv-title {
    color: #1A1A1A;
    font-size: 40px;
    font-weight: 900;
    letter-spacing: 0.11em;
    line-height: 1.42;
    margin-bottom: 34px !important;
}

.page-online_fv-title span {
    display: block;
    white-space: nowrap;
}

.page-online_fv-title em {
    color: var(--main-color);
    font-style: normal;
}

.page-online_fv-lead {
    font-size: 15px;
    line-height: 1.95;
    letter-spacing: 0.09em;
    margin-bottom: 46px !important;
}

.page-online_fv-image {
    width: 590px;
    position: relative;
    line-height: 0;
    margin-right: -12px;
}

.page-online_fv-image:before {
    content: "";
    position: absolute;
    width: 52px;
    height: 52px;
    background: var(--main-color);
    left: -34px;
    bottom: -30px;
    z-index: 2;
}

.page-online_fv-image:after {
    content: "";
    position: absolute;
    border: 1px solid #A5A5A5;
    top: -14px;
    right: -14px;
    left: 14px;
    bottom: 14px;
    z-index: -1;
}

.page-online_fv-image img {
    width: 100%;
    aspect-ratio: 732 / 500;
    object-fit: cover;
    box-shadow: 22px 22px 0 rgb(76 167 168 / 18%);
}

.page-online_btn {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 230px;
    height: 58px;
    padding: 0 28px;
    color: #1A1A1A;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.12em;
    position: relative;
    border: 2px solid transparent;
    box-shadow: 0 10px 22px rgb(0 0 0 / 7%);
}

.page-online_btn:after {
    content: "";
    width: 9px;
    height: 9px;
    border: solid currentColor;
    border-width: 2px 2px 0 0;
    transform: rotate(45deg);
    margin-left: 16px;
    flex-shrink: 0;
}

.page-online_btn.-primary {
    background: #fcc331;
}

.page-online_btn.-tel {
    background: #fff;
    border-color: var(--main-color);
    color: #329091;
    font-size: 19px;
    letter-spacing: 0.04em;
    box-shadow: none;
}

.page-online_fv-btns,
.page-online_cta-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.page-online_fv-btns {
    flex-wrap: nowrap;
    gap: 12px;
}

.page-online_fv-btns .page-online_btn {
    padding-inline: 22px;
}

.page-online_fv-btns .page-online_btn.-primary {
    width: 270px;
    min-width: 0;
}

.page-online_fv-btns .page-online_btn.-tel {
    width: 224px;
    min-width: 0;
}

.page-online_intro {
    margin-bottom: 100px;
    position: relative;
    z-index: 0;
}

.page-online_intro:before,
.page-online_remote:after,
.page-online_merit:after,
.page-online_check:after,
.page-online_scene:before,
.page-online_flow:before,
.page-online_faq:before {
    content: "";
    position: absolute;
    background-image: url("../image/top-reason-object-line.png");
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
    display: none;
    opacity: 0.1;
    z-index: 0;
}

.page-online_intro .wrap,
.page-online_remote .wrap,
.page-online_merit .wrap,
.page-online_check .wrap,
.page-online_scene .wrap,
.page-online_flow .wrap,
.page-online_faq .wrap {
    position: relative;
    z-index: 1;
}

.page-online_lineart {
    position: absolute;
    background-image: url("../image/top-reason-object-line.png");
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
    opacity: 0.16;
    z-index: 0;
}

.page-online_lineart:after {
    display: none;
}

.page-online_lineart.-fv {
    width: 1080px;
    height: 423px;
    right: calc(50% - 820px);
    top: 58px;
    opacity: 0.17;
}

.page-online_lineart.-intro {
    width: 860px;
    height: 337px;
    right: -220px;
    bottom: -34px;
    opacity: 0.09;
}

.page-online_lineart.-remote {
    display: none;
}

.page-online_lineart.-merit {
    display: none;
}

.page-online_lineart.-check {
    display: none;
}

.page-online_lineart.-flow {
    width: 900px;
    height: 352px;
    left: -260px;
    bottom: -120px;
    opacity: 0.09;
}

.page-online_intro:before {
    width: 460px;
    height: 330px;
    right: calc(50% - 675px);
    top: -95px;
}

.page-online_intro-main {
    font-size: 15px;
    line-height: 2.05;
    background: #F4FAFA;
    padding: 46px 54px;
    border-left: 6px solid var(--main-color);
    position: relative;
    overflow: hidden;
}

.page-online_intro-main:after {
    content: "";
    position: absolute;
    right: -180px;
    bottom: -76px;
    width: 720px;
    height: 282px;
    background-image: url("../image/top-reason-object-line.png");
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.08;
    pointer-events: none;
}

.page-online_intro-main > * {
    position: relative;
    z-index: 1;
}

.page-online_intro-copy {
    color: #1A1A1A;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0.12em;
    line-height: 1.8;
    margin-bottom: 18px !important;
}

.page-online_intro-main p + p {
    margin-top: 1.2em;
}

.page-online_remote {
    margin-bottom: 110px;
    position: relative;
    z-index: 0;
}

.page-online_remote:after {
    width: 430px;
    height: 300px;
    left: calc(50% - 650px);
    bottom: -105px;
    opacity: 0.36;
}

.page-online_remote-inner {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 48px;
}

.page-online_remote-content {
    width: 690px;
    position: relative;
}

.page-online_remote-content:before {
    content: "";
    position: absolute;
    left: -70px;
    bottom: -80px;
    width: 360px;
    height: 190px;
    background-image: url("../image/top-reason-object-line.png");
    background-repeat: no-repeat;
    background-size: contain;
    display: none;
    opacity: 0.08;
    pointer-events: none;
    z-index: -1;
}

.page-online_remote-content p {
    font-size: 15px;
    line-height: 2.05;
}

.page-online_remote-content p + p {
    margin-top: 1.2em;
}

.page-online_remote-panel {
    width: 400px;
    background: #1A1A1A;
    color: #fff;
    padding: 38px 34px;
    position: relative;
    overflow: hidden;
}

.page-online_remote-panel:before {
    content: "NIPPORI";
    position: absolute;
    right: -8px;
    bottom: -14px;
    color: #fff;
    opacity: 0.08;
    font-family: "din-2014", sans-serif;
    font-size: 66px;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1;
}

.page-online_remote-panel-title {
    color: #98CDCE;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0.12em;
    line-height: 1.6;
    margin-bottom: 24px !important;
    position: relative;
    z-index: 1;
}

.page-online_remote-panel li {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.75;
    padding-left: 22px;
    position: relative;
    z-index: 1;
}

.page-online_remote-panel li:before {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    left: 0;
    top: 0.66em;
    background: #fcc331;
}

.page-online_remote-panel li + li {
    margin-top: 16px;
}

.page-online_merit {
    margin-bottom: 120px;
    position: relative;
    z-index: 0;
}

.page-online_merit:before {
    content: "";
    position: absolute;
    left: 0;
    right: calc(50% + 330px);
    top: 120px;
    bottom: -55px;
    background: #F7F7F7;
    z-index: -1;
}

.page-online_merit:after {
    width: 380px;
    height: 280px;
    right: calc(50% - 660px);
    top: -95px;
    opacity: 0.38;
}

.page-online_merit-list {
    display: flex;
    justify-content: space-between;
    gap: 30px;
}

.page-online_merit-list li {
    width: 360px;
    min-height: 282px;
    background: #fff;
    border: 2px solid #EAEAEA;
    border-top: 6px solid var(--main-color);
    padding: 38px 30px 34px;
    position: relative;
    box-shadow: 0 14px 32px rgb(0 0 0 / 6%);
}

.page-online_merit-num {
    color: #98CDCE;
    font-size: 46px;
    line-height: 1;
    display: block;
    margin-bottom: 20px;
}

.page-online_merit-list h3 {
    color: #1A1A1A;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: 0.12em;
    line-height: 1.65;
    margin-bottom: 16px;
}

.page-online_merit-list p {
    font-size: 14px;
    line-height: 2;
}

.page-online_check {
    background: #F7F7F7;
    padding: 100px 0;
    margin-bottom: 110px;
    position: relative;
    z-index: 0;
    overflow: hidden;
}

.page-online_check:after {
    width: 470px;
    height: 330px;
    right: calc(50% - 680px);
    bottom: -95px;
    opacity: 0.4;
}

.page-online_check-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    position: relative;
}

.page-online_check-grid:before {
    content: "";
    position: absolute;
    right: -40px;
    top: -88px;
    width: 430px;
    height: 230px;
    background-image: url("../image/top-reason-object-line.png");
    background-repeat: no-repeat;
    background-size: contain;
    display: none;
    opacity: 0.08;
    pointer-events: none;
}

.page-online_check-grid > div {
    background: #fff;
    border: 1px solid #E4EAEA;
    padding: 30px 28px 32px;
    position: relative;
    z-index: 1;
    min-height: 214px;
}

.page-online_check-grid > div:before {
    content: "";
    position: absolute;
    width: 30px;
    height: 3px;
    background: var(--main-color);
    top: 0;
    left: 28px;
}

.page-online_check-grid span {
    color: #98CDCE;
    display: block;
    font-size: 22px;
    line-height: 1;
    margin-bottom: 16px;
}

.page-online_check-grid h3 {
    color: #1A1A1A;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0.12em;
    line-height: 1.55;
    margin-bottom: 12px;
}

.page-online_check-grid p {
    font-size: 14px;
    line-height: 1.95;
}

.page-online_scene {
    margin-bottom: 120px;
    position: relative;
    z-index: 0;
}

.page-online_scene:before {
    width: 420px;
    height: 300px;
    left: calc(50% - 670px);
    top: -90px;
    opacity: 0.38;
}

.page-online_scene-grid {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.page-online_scene-image {
    width: 430px;
    line-height: 0;
    position: relative;
    box-shadow: 20px 20px #F4FAFA;
}

.page-online_scene-image:after {
    content: "";
    position: absolute;
    border: 1px solid #A5A5A5;
    top: -10px;
    right: -10px;
    left: 10px;
    bottom: -10px;
}

.page-online_scene-image img {
    width: 100%;
    aspect-ratio: 16 / 11;
    object-fit: cover;
}

.page-online_scene-list {
    width: 640px;
}

.page-online_scene-list li {
    min-height: 72px;
    display: flex;
    align-items: center;
    padding: 16px 20px 16px 58px;
    background: #fff;
    border: 1px solid #E4EAEA;
    color: #1A1A1A;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.9;
    position: relative;
    box-shadow: 0 8px 22px rgb(0 0 0 / 4%);
}

.page-online_scene-list li + li {
    margin-top: 12px;
}

.page-online_scene-list li:before {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--main-color);
    left: 22px;
    top: 50%;
    transform: translateY(-50%);
}

.page-online_scene-list li:after {
    content: "";
    position: absolute;
    width: 8px;
    height: 5px;
    border: solid #fff;
    border-width: 0 0 2px 2px;
    left: 27px;
    top: 50%;
    transform: translateY(-62%) rotate(-45deg);
}

.page-online_flow {
    background: #F4FAFA;
    padding: 100px 0;
    margin-bottom: 100px;
    position: relative;
    z-index: 0;
    overflow: hidden;
}

.page-online_flow:before {
    width: 520px;
    height: 360px;
    left: calc(50% - 700px);
    bottom: -110px;
    opacity: 0.38;
}

.page-online_flow-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    counter-reset: online-flow;
    position: relative;
}

.page-online_flow-list:after {
    content: "";
    position: absolute;
    right: -60px;
    bottom: -90px;
    width: 440px;
    height: 240px;
    background-image: url("../image/top-reason-object-line.png");
    background-repeat: no-repeat;
    background-size: contain;
    display: none;
    opacity: 0.08;
    pointer-events: none;
}

.page-online_flow-list li {
    background: #fff;
    min-height: 272px;
    padding: 34px 24px;
    border-left: 0;
    border-top: 5px solid var(--main-color);
    position: relative;
    z-index: 1;
    box-shadow: 0 14px 28px rgb(0 0 0 / 5%);
}

.page-online_flow-list li + li:before {
    content: "";
    width: 18px;
    height: 18px;
    border: solid #A7A7A7;
    border-width: 2px 2px 0 0;
    transform: rotate(45deg);
    position: absolute;
    left: -25px;
    top: 50%;
    margin-top: -9px;
}

.page-online_flow-num {
    color: #fff;
    background: var(--main-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
    height: 32px;
    min-width: 86px;
    padding: 0 14px;
    margin-bottom: 22px;
}

.page-online_flow-list h3 {
    color: #1A1A1A;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0.12em;
    line-height: 1.55;
    margin-bottom: 14px;
}

.page-online_flow-list p {
    font-size: 14px;
    line-height: 1.95;
}

.page-online_prepare {
    margin-bottom: 100px;
}

.page-online_prepare-box {
    display: flex;
    justify-content: space-between;
    gap: 50px;
    background: #F4FAFA;
    border: 0;
    padding: 48px 52px;
    position: relative;
}

.page-online_prepare-box:before {
    content: "";
    position: absolute;
    width: 6px;
    left: 0;
    top: 0;
    bottom: 0;
    background: var(--main-color);
}

.page-online_prepare-box ul {
    width: 520px;
}

.page-online_prepare-box li {
    color: #1A1A1A;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.9;
    padding-left: 22px;
    position: relative;
}

.page-online_prepare-box li:before {
    content: "";
    width: 7px;
    height: 7px;
    background: var(--main-color);
    position: absolute;
    left: 0;
    top: 0.72em;
}

.page-online_prepare-box li + li {
    margin-top: 18px;
}

.page-online_prepare-box p {
    width: 460px;
    font-size: 15px;
    line-height: 2.05;
}

.page-online_faq {
    margin-bottom: 100px;
    position: relative;
    z-index: 0;
}

.page-online_faq:before {
    width: 420px;
    height: 300px;
    right: calc(50% - 670px);
    top: -95px;
    opacity: 0.36;
}

.page-online_faq-list {
    border-top: 0;
}

.page-online_faq-list div {
    display: flex;
    background: #fff;
    border: 1px solid #E4EAEA;
    padding: 28px 30px;
    box-shadow: 0 8px 22px rgb(0 0 0 / 4%);
}

.page-online_faq-list div + div {
    margin-top: 14px;
}

.page-online_faq-list dt {
    width: 360px;
    flex-shrink: 0;
    color: #1A1A1A;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.1em;
    line-height: 1.85;
    padding: 0 28px 0 42px;
    position: relative;
}

.page-online_faq-list dt:before {
    content: "Q";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--main-color);
    font-family: "din-2014", sans-serif;
    font-size: 26px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0;
}

.page-online_faq-list dd {
    font-size: 15px;
    line-height: 2;
}

.page-online_cta {
    margin-bottom: -80px;
}

.page-online_cta-inner {
    background: #1A1A1A;
    color: #fff;
    padding: 60px 70px;
    position: relative;
    overflow: hidden;
}

.page-online_cta-inner:before {
    content: "SET OYA";
    position: absolute;
    right: -20px;
    bottom: -28px;
    color: #fff;
    opacity: 0.07;
    font-family: "din-2014", sans-serif;
    font-size: 118px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0;
}

.page-online_cta-en {
    color: #98CDCE;
    font-size: 32px;
    line-height: 1;
    margin-bottom: 12px;
    position: relative;
    z-index: 1;
}

.page-online_cta h2 {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: 0.14em;
    line-height: 1.5;
    margin-bottom: 14px;
    position: relative;
    z-index: 1;
}

.page-online_cta p:not(.page-online_cta-en) {
    font-size: 15px;
    line-height: 1.8;
    margin-bottom: 40px;
    position: relative;
    z-index: 1;
}

.page-online_cta-btns {
    position: relative;
    z-index: 1;
}

@media (hover: hover) and (pointer: fine) {
    .page-online_btn:hover {
        opacity: 0.76;
    }
}

@media (max-width: 750px) {
    .page-online_fv {
        margin: -5vw 0 20vw;
        padding: 0 0 10vw;
    }

    .page-online_fv:before {
        width: 88vw;
        height: 118vw;
        top: 56vw;
    }

    .page-online_fv:after {
        left: -2vw;
        bottom: -7vw;
        font-size: 18vw;
    }

    .page-online_fv-inner {
        display: block;
    }

    .page-online_fv-inner:before {
        width: 36vw;
        height: 42vw;
        left: 8vw;
        bottom: 32vw;
    }

    .page-online_fv-content {
        width: 100%;
        padding: 0 0 10vw;
    }

    .page-online_fv-kicker {
        font-size: 6vw;
        margin-bottom: 2vw;
    }

    .page-online_fv-title {
        font-size: 7.2vw;
        letter-spacing: 0.07em;
        line-height: 1.42;
        margin-bottom: 7vw !important;
    }

    .page-online_fv-title span {
        white-space: nowrap;
    }

    .page-online_fv-lead {
        font-size: 3.6vw;
        line-height: 2;
        margin-bottom: 9vw !important;
    }

    .page-online_fv-image {
        width: 100%;
        margin: 0;
    }

    .page-online_fv-image:before {
        width: 9vw;
        height: 9vw;
        left: -3vw;
        bottom: -4.5vw;
    }

    .page-online_fv-image:after {
        top: -2vw;
        right: -2vw;
        left: 2vw;
        bottom: 2vw;
    }

    .page-online_btn {
        width: 100%;
        min-width: 0;
        height: 14vw;
        padding: 0 5vw;
        font-size: 3.8vw;
    }

    .page-online_btn.-tel {
        font-size: 5vw;
    }

    .page-online_btn:after {
        width: 2vw;
        height: 2vw;
        margin-left: 3vw;
    }

    .page-online_fv-btns,
    .page-online_cta-btns {
        flex-wrap: wrap;
        gap: 3vw;
    }

    .page-online_fv-btns .page-online_btn {
        width: 100%;
        padding-inline: 5vw;
    }

    .page-online_fv-btns .page-online_btn.-primary,
    .page-online_fv-btns .page-online_btn.-tel {
        width: 100%;
        min-width: 0;
    }

    .page-online_fv-btns .page-online_btn.-tel {
        white-space: nowrap;
    }

    .page-online_intro,
    .page-online_remote,
    .page-online_merit,
    .page-online_check,
    .page-online_scene,
    .page-online_prepare,
    .page-online_faq {
        margin-bottom: 20vw;
    }

    .page-online_intro-main {
        font-size: 3.6vw;
        line-height: 2;
        padding: 8vw 6vw;
        border-left-width: 1.5vw;
    }

    .page-online_intro-main:after {
        width: 70vw;
        height: 34vw;
        right: -18vw;
        bottom: -8vw;
        opacity: 0.08;
    }

    .page-online_intro:before,
    .page-online_remote:after,
    .page-online_merit:after,
    .page-online_check:after,
    .page-online_scene:before,
    .page-online_flow:before,
    .page-online_faq:before {
        width: 66vw;
        height: 48vw;
        opacity: 0.28;
    }

    .page-online_intro:before {
        right: -18vw;
        top: -10vw;
    }

    .page-online_lineart {
        opacity: 0.12;
    }

    .page-online_lineart:after {
        display: none;
    }

    .page-online_lineart.-fv {
        width: 150vw;
        height: 59vw;
        right: -72vw;
        top: 74vw;
        opacity: 0.14;
    }

    .page-online_lineart.-intro {
        width: 138vw;
        height: 54vw;
        right: -76vw;
        bottom: -5vw;
        opacity: 0.08;
    }

    .page-online_lineart.-remote {
        width: 82vw;
        height: 40vw;
        left: -30vw;
        bottom: -12vw;
    }

    .page-online_lineart.-merit {
        width: 84vw;
        height: 40vw;
        right: -30vw;
        top: -5vw;
    }

    .page-online_lineart.-check {
        width: 90vw;
        height: 44vw;
        right: -32vw;
        bottom: 2vw;
    }

    .page-online_lineart.-flow {
        width: 90vw;
        height: 44vw;
        left: -32vw;
        bottom: 4vw;
    }

    .page-online_remote:after {
        left: -20vw;
        bottom: -10vw;
    }

    .page-online_merit:after {
        right: -22vw;
        top: -8vw;
    }

    .page-online_check:after {
        right: -24vw;
        bottom: -9vw;
    }

    .page-online_scene:before {
        left: -22vw;
        top: -8vw;
    }

    .page-online_flow:before {
        left: -24vw;
        bottom: -10vw;
    }

    .page-online_faq:before {
        right: -22vw;
        top: -8vw;
    }

    .page-online_intro-copy {
        font-size: 4.4vw;
        line-height: 1.75;
        margin-bottom: 4vw !important;
    }

    .page-online_remote-inner {
        display: block;
    }

    .page-online_remote-content,
    .page-online_remote-panel {
        width: 100%;
    }

    .page-online_remote-content:before {
        width: 68vw;
        height: 34vw;
        left: -24vw;
        bottom: -12vw;
        opacity: 0.1;
    }

    .page-online_remote-content p {
        font-size: 3.6vw;
        line-height: 2;
    }

    .page-online_remote-panel {
        margin-top: 8vw;
        padding: 8vw 6vw;
    }

    .page-online_remote-panel:before {
        font-size: 16vw;
    }

    .page-online_remote-panel-title {
        font-size: 4.2vw;
        margin-bottom: 5vw !important;
    }

    .page-online_remote-panel li {
        font-size: 3.5vw;
        line-height: 1.85;
        padding-left: 5vw;
    }

    .page-online_remote-panel li:before {
        width: 1.6vw;
        height: 1.6vw;
    }

    .page-online_remote-panel li + li {
        margin-top: 3vw;
    }

    .page-online_merit:before {
        right: 20vw;
        top: 28vw;
        bottom: -8vw;
    }

    .page-online_merit-list {
        display: block;
    }

    .page-online_merit-list li {
        width: 100%;
        min-height: auto;
        padding: 8vw 6vw;
    }

    .page-online_merit-list li + li {
        margin-top: 5vw;
    }

    .page-online_merit-num {
        font-size: 11vw;
        margin-bottom: 4vw;
    }

    .page-online_merit-list h3 {
        font-size: 4.5vw;
        line-height: 1.7;
    }

    .page-online_merit-list p {
        font-size: 3.5vw;
        line-height: 2;
    }

    .page-online_check {
        padding: 15vw 0;
    }

    .page-online_check-grid {
        display: block;
    }

    .page-online_check-grid:before {
        width: 72vw;
        height: 38vw;
        right: -22vw;
        top: -8vw;
        opacity: 0.1;
    }

    .page-online_check-grid > div {
        min-height: auto;
        padding: 7vw 6vw;
    }

    .page-online_check-grid > div + div {
        margin-top: 4vw;
    }

    .page-online_check-grid > div:before {
        width: 8vw;
        left: 6vw;
    }

    .page-online_check-grid span {
        font-size: 5vw;
        margin-bottom: 4vw;
    }

    .page-online_check-grid h3 {
        font-size: 4.4vw;
    }

    .page-online_check-grid p {
        font-size: 3.5vw;
        line-height: 2;
    }

    .page-online_scene-grid {
        display: block;
    }

    .page-online_scene-image {
        width: 100%;
        margin-bottom: 10vw;
        box-shadow: 5vw 5vw #F4FAFA;
    }

    .page-online_scene-image:after {
        top: -2vw;
        right: -2vw;
        left: 2vw;
        bottom: -2vw;
    }

    .page-online_scene-list {
        width: 100%;
    }

    .page-online_scene-list li {
        min-height: 14vw;
        padding: 4vw 4vw 4vw 12vw;
        font-size: 3.6vw;
        line-height: 1.9;
    }

    .page-online_scene-list li + li {
        margin-top: 3vw;
    }

    .page-online_scene-list li:before {
        width: 4.5vw;
        height: 4.5vw;
        left: 2vw;
    }

    .page-online_scene-list li:after {
        width: 2vw;
        height: 1.2vw;
        left: 3.2vw;
    }

    .page-online_flow {
        padding: 15vw 0;
        margin-bottom: 20vw;
    }

    .page-online_flow-list {
        display: block;
    }

    .page-online_flow-list:after {
        width: 74vw;
        height: 40vw;
        right: -26vw;
        bottom: -10vw;
        opacity: 0.1;
    }

    .page-online_flow-list li {
        min-height: auto;
        padding: 8vw 6vw;
    }

    .page-online_flow-list li + li {
        margin-top: 8vw;
    }

    .page-online_flow-list li + li:before {
        width: 4vw;
        height: 4vw;
        left: 50%;
        top: -7.5vw;
        margin: 0 0 0 -2vw;
        transform: rotate(135deg);
    }

    .page-online_flow-num {
        font-size: 3.8vw;
        height: 8vw;
        min-width: 22vw;
    }

    .page-online_flow-list h3 {
        font-size: 4.5vw;
        line-height: 1.7;
    }

    .page-online_flow-list p {
        font-size: 3.5vw;
        line-height: 2;
    }

    .page-online_prepare-box {
        display: block;
        padding: 8vw 6vw;
    }

    .page-online_prepare-box:before {
        width: 1.5vw;
    }

    .page-online_prepare-box ul,
    .page-online_prepare-box p {
        width: 100%;
    }

    .page-online_prepare-box li {
        font-size: 3.6vw;
        padding-left: 5vw;
        line-height: 1.9;
    }

    .page-online_prepare-box li:before {
        width: 1.6vw;
        height: 1.6vw;
    }

    .page-online_prepare-box li + li {
        margin-top: 3vw;
    }

    .page-online_prepare-box p {
        font-size: 3.6vw;
        line-height: 2;
        margin-top: 6vw;
    }

    .page-online_faq-list div {
        display: block;
        padding: 6vw;
    }

    .page-online_faq-list div + div {
        margin-top: 4vw;
    }

    .page-online_faq-list dt {
        width: 100%;
        font-size: 4vw;
        padding: 0 0 3vw 9vw;
    }

    .page-online_faq-list dt:before {
        font-size: 7vw;
    }

    .page-online_faq-list dd {
        font-size: 3.6vw;
        line-height: 2;
    }

    .page-online_cta {
        margin-bottom: -5vw;
    }

    .page-online_cta-inner {
        padding: 10vw 6vw;
    }

    .page-online_cta-inner:before {
        right: -7vw;
        bottom: -2vw;
        font-size: 18vw;
    }

    .page-online_cta-en {
        font-size: 6vw;
    }

    .page-online_cta h2 {
        font-size: 5.6vw;
    }

    .page-online_cta p:not(.page-online_cta-en) {
        font-size: 3.6vw;
        margin-bottom: 9vw;
    }
}