/* Split from stylesheet.css for page-scoped delivery. Do not @import the old monolith. */
/*#region pg_contact*/
.contact_hero {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 1px 0;
}
/* お問合せページのヒーローは初回から。電話モーダルは .open 時のみ（閉じたまま display:block だと JPG がトップで読まれる） */
#contain > .contact_hero,
.access_dlg.open .contact_hero {
    background-image: url(../images/pg_contact.webp);
}
.contact_hero1 {
    margin-top: 20vw;
    margin-bottom: 2vw;
    display: flex;
    justify-content: center;
    align-items: center;
}
.contacthero_text {
    text-align: center;
    font-size: 36px;
    color: #01ABAB;
    font-family: var(--fontT);
    background-color: #fff;
    padding: 12px 15px;
}
.cfsteps {
    display: flex;
}
.cfstep1 {
    font-size: 20px;
    flex: 1;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    color: #fff;
    background-color: #01ABAB;
    clip-path: polygon(0% 0%, calc(100% - 10px) 0%, 100% 50%, calc(100% - 10px) 100%, 0% 100%);
    padding: 12px 10px;
}
.cfstep1.X_2 {
    background-color: #F5F5F5;
    color: #707070;
}
.cfstep1.X_3 {
    background-color: #F5F5F5;
    color: #707070;
}
.cfstep2 {
    font-size: 20px;
    flex: 1;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    background-color: #F5F5F5;
    clip-path: polygon(0% 0%, calc(100% - 10px) 0%, 100% 50%, calc(100% - 10px) 100%, 0% 100%);
    margin-left: -10px;
    padding: 12px 10px;
}
.cfstep2.X_2 {
    background-color: #01ABAB;
    color: #fff;
}
.cfstep2.X_3 {
    background-color: #EBEBEB;
    color: #707070;
}
.cfstep3 {
    font-size: 20px;
    flex: 1;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #EBEBEB;
    clip-path: polygon(0% 0%, calc(100% - 10px) 0%, 100% 50%, calc(100% - 10px) 100%, 0% 100%);
    margin-left: -10px;
    padding: 12px 10px;
}
.cfstep3.X_2 {
}
.cfstep3.X_3 {
    background-color: #01ABAB;
    color: #fff;
}
.cf_h2 h2 {
    font-size: 28px;
    text-align: center;
}
.cf_p p {
    text-align: center;
    line-height: 2;
}
@media (min-width: 768px) and (max-width: 991px) {
    .contacthero_text {
        font-size: 24px;    
    }
}
@media (max-width: 767px) {
    .contact_hero1 {
        position: relative;
        margin-top: 30vw;
    }
    .contacthero_text {
        font-size: 3.5vw;
        padding: 4px 8px;
    }

    .cfstep1 {
        flex: 1;
        font-size: 12px;
        font-weight: bold;
        text-align: center;
    }
    .cfstep2 {
        flex: 1;
        font-size: 12px;
        font-weight: bold;
        text-align: center;
    }
    .cfstep3 {
        flex: 1;
        font-size: 12px;
        font-weight: bold;
        text-align: center;
    }
    .cf_h2 h2 {
        font-size: 16px;
    }
    .cf_p p {
        font-size: 14px;
        text-align: left;
        margin-top: 12px;
    }
}

.contactform_width {width: 800px;margin: auto;}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: #707070 !important;
}
::-moz-placeholder { /* Firefox 19+ */
    color: #707070 !important;
}
:-ms-input-placeholder { /* IE 10+ */
    color: #707070 !important;
}
:-moz-placeholder { /* Firefox 18- */
    color: #707070 !important;
}
.form_field {
    border-top: solid 1px #E0E0E0;padding: 20px 0;
    display: flex;
}
.field_left {
    /* width: 31%; */
    width: 312px;
    padding-top: 8px;
    padding-right: 15px;
    line-height: 2;
}
.field_right {
    /* width: 70%; */
    flex: 1;
    display: flex;
}
.field_reqtext {
    padding-top: 12px;
    width: 40px;
}
.field_reqtext span {
    background-color: #01ABAB;
    color: #fff;
    font-size: 14px;
    border-radius: 3px;
    padding: 0 2px;
}
.field_vert {
    width: calc(100% - 40px);
}
.field_dateset1 {
    display: flex;
}
.field_dateset2 {
    width: 76px;
    padding-top: 12px;
    word-break: keep-all;
}
.field_dateset3 {
    width: 50px;
    padding-top: 12px;
    word-break: keep-all;
}
.field_dateset4 {
    width: 140px;
    word-break: keep-all;
}
.field_dateset4.X_confirm {
    padding-top: 12px;
}
.field_dateset5 {
    width: 85px;
}
.field_dateset5.X_confirm {
    padding-top: 12px;
}
.field_dateset3 {
    width: 50px;
    padding-top: 12px;
    padding-left: 24px;
}
.field_datesetp {
    line-height: 2;
}
.field_nameset1 {
    display: flex;
}
.field_nameset2 {
    width: 50px;
    padding-top: 12px;
}
.field_nameset3 {
    width: 30%
}
.field_nameset4 {
    width: 60px;
    text-align: right;
    padding-top: 12px;
    padding-right: 8px;
}
.field_nameset4 span {
    font-size: 14px;
    padding: 0 4px;
    border-radius: 3px;
    background-color: #01ABAB;
    color: #fff;
}
.field_nameset5 {
    flex: 1;
}
.privacy_cap {
    margin-bottom: 20px;
}
.privacy_field {
    border-top: solid 1px #E0E0E0;
    padding-top: 20px;
}
.two_fields {
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.twofields_one {
    width: 48%;
}
.multifields_row {
    display: flex;
    justify-content: space-between;
}
.twocols_field {
    border-top: solid 1px #E0E0E0;padding: 20px 0;
    width: 48%;
}
.field_cap {font-weight: bold;margin-bottom: 12px;}
.field_cap span {color: #fff;background: #A9CD36;font-size: 14px;line-height: 20px;padding: 0 3px;margin-left: 11px;}
.form_block input {
    border-radius: 3px;
    height: 50px;width: 100%;background: transparent;border: solid 1px #CCCCCC;color: #707070;padding: 10px;font-size: 16px;line-height: 30px;}
.form_block textarea {
    border-radius: 3px;
    height: 130px;width: 100%;background: transparent;border: solid 1px #CCCCCC;color: #707070;padding: 20px 20px;font-size: 16px;line-height: 24px;outline: none;}
.form_block select {
    height: 50px;
    width: 100%;
    background: transparent;
    border: solid 1px #CCCCCC;
    color: #707070;
    border-radius: 0px;
    padding: 10px;
    font-size: 16px;
    line-height: 30px;
    border-radius: 3px;
}
.radio_set {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    row-gap: 20px;
    column-gap: 20px;
    padding-top: 12px;
}
.radio_wrap {
    position: relative;
}
.radio_wrap span.error {
    position: absolute;
    top: -24px;
    left: 0;
}
@media (max-width: 800px) {
    .radio_wrap span.error {
        position: absolute;
        top: 0;
        left: unset;
        right: 0;
    }   
}
.select_set {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}
.field_checkbox {padding-top: 20px;}
.form_block input[type=radio],
.form_block input[type=checkbox] {
    transform: translateY(2px);
    height: 16px; width: 16px;background: transparent;border: solid 1px #CCCCCC; border-radius: 0px;color: #5A4941;padding: 12px;font-size: 16px;line-height: 30px;
}
.form_block label {
    margin-bottom: 0;
    padding-left: 8px;
}
.privacy_desc {
    text-align: center;
}
.privacy_desc a {
    color: #2C4298;
    text-decoration: underline;
    transition: all .3s;
}
.privacy_desc a:hover {
    opacity: .7;
}
.privacy_checkbox {
    display: flex;
    justify-content: center;
    align-items: center;
}
.field_contactbtn {
    text-align: center;
    padding-top: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5%;
}
.field_contactbtn input[type=submit],
.field_contactbtna {
    font-size: 16px;
    font-weight: 500;
    line-height: 23px;color: #ffffff;
    border: none;
    width: auto;
    height: auto;
    background: #01ABAB;
    padding: 12px 40px;
    border-radius: 50px;
    display: inline-block;position: relative;text-align: center;transition: all .3s;
}
.field_contactbtn input[type=submit]:hover,
.field_contactbtna:hover {
    scale: 1.05;
    color: #fff;
}
.field_contactbtna.X_2 {
    min-width: 260px;
    background-color: #707070;
}
.field_contactbtna.X_3 {
    min-width: 260px;
}
.field_control.X_confirm {
    padding-top: 8px;
    line-height: 2;
}
.nameconfirm {
    padding-top: 12px;
}
.confirm_line {
    height: 1px;
    background-color: #E0E0E0;
}
@media (max-width: 800px) {
    .contactform_width {width: calc( 100% - 30px );margin: auto;}
    .multifields_row {
        display: block;
    }
    .twocols_field {
        width: 100%;
    }
    .form_field {
        display: block;
    }
    .field_left {
        width: 100%;
        padding-top: 0;
        padding-bottom: 8px;
        padding-right: 0;
    }
    .field_right {
        width: 100%;
    }
    .field_dateset2 {
        width: auto;
    }
    .field_dateset3 {
        width: auto;
        padding-left: 4px;
        padding-right: 4px;
    }
    .field_dateset4 {
        width: auto;
        flex: 1;
    }
    .privacy_cap {
        margin-bottom: 12px;
    }
    .form_block textarea {
        padding: 15px;
    }
    .field_contactbtna.X_2 {
        width: 40%;
        min-width: unset;
        padding: 12px 0;
    }
    .field_contactbtna.X_3 {
        width: 40%;
        min-width: unset;
        padding: 12px 0;
    }
    .js_datepicker {
        padding: 10px 2px !important;
    }
    .js_timepicker {
        padding: 10px 2px !important;
    }
}
@media (max-width: 767px) {
    .form_field {
        padding: 15px 0;
    }
    .field_datesetp {
        font-size: 14px;
    }
    .field_reqtext {
        padding-top: 10px;
    }
    .field_reqtext span {
        font-size: 12px;
    }
    .form_block input {
        padding: 4px;
        line-height: 26px;
        height: 40px;
    }
    .form_block select {
        padding: 4px;
        line-height: 26px;
        height: 40px;
    }
    .js_timepicker {
        padding: 4px 2px !important;
    }
    .field_contactbtn input[type=submit], 
    .field_contactbtna {
        font-size: 14px;
    }
    .radio_set {
        gap: 16px;
    }
}
.thanks_block {
    background-color: rgba(1, 171, 171, 0.2);
    padding: 10px;
}
.thanks_inner {
    border: solid 1px #01ABAB;
    background-color: #F1FBFC;
    position: relative;
    padding-left: 10%;
    padding-top: 80px;
    padding-bottom: 80px;
}
.thanks_title {
    font-size: 56px;
    color: #01ABAB;
    font-family: var(--fontT);
}
.thanks_text {
    font-size: 26px;
    color: #01ABAB;
    line-height: 2;
}
.thansk_img {
    position: absolute;
    bottom: 0;
    right: 6%;
    width: 20%;
}
.thansk_img img {
    width: 100%;
}
@media (max-width: 1030px) {
    .thanks_inner {
        padding: 20px 15px;
    }
    .thanks_title {
        font-size: 5.6vw;
    }
    .thanks_text {
        font-size: 3.2vw;
    }
    .thansk_img {
        right: 2%;
    }
}
@media (max-width: 1030px) {
    .thansk_img {
        right: -15px;
    }
}
span.error {
    color: #E74B21;
    font-size: 14px;
}
@media (max-width: 800px) {
    span.error {
        font-size: 12px;
    }
}
.form_privacy {
    max-height: 200px;
    /* padding: 15px; */
    border: solid 1px #CCCCCC;
    overflow-y: scroll;
}
@media (max-width: 767px) {
    .form_privacy {
        overflow: auto;
    }
}

.form_privacy_inner {
    padding: 15px 0 15px 15px;
    line-height: 1.8;
}
.mCSB_inside>.mCSB_container {
    margin-right: 20px;
}
.mCSB_scrollTools .mCSB_draggerRail {
    width: 15px;
    border-radius: 0px;
    background-color: #F1F1F1 !important;
}
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    background-color: #B5B5B5 !important;
    width: 10px;
    border-radius: 3px;
}
.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
    margin: 0;
    height: 100%;
}
.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_draggerRail {
    margin: 0;
    height: 100%;
}
/*#endregion pg_contact*/

/*#region pg_privacy*/
.privacy_blog {
    line-height: 2;
}
/*#endregion pg_privacy*/
/*#region pg_guide*/
.guide_row {
    display: flex;
    justify-content: space-between;
}
.guide_row.X_2 {
    justify-content: center;
}
.guide_col {
    width: 48%;
}
.guide_col:last-child {
    margin-bottom: 0;
}
.guideitem_cap {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}
.guideitem_cap1 {
    flex: 1;
}
.guideitem_no {
    width: 60px;
    font-size: 40px;
    font-family: var(--fontN);
    font-weight: 500;
    display: flex;
    align-items: center;
    color: #01ABAB;
}
.guideitem_img img {
    max-width: 100%;
}
.guide_arrow {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
}
@media (max-width: 1030px) {
    .guide_row {
        display: block;
    }
    .guide_col {
        width: 480px;
        margin: auto;
        margin-bottom: 64px;
    }
    .guide_col:last-child {
        margin-bottom: 0;
    }
}
@media (max-width: 767px) {
    .guide_col {
        width: 100%;
    }
    .guideitem_cap {
        height: auto;
    }
    .guideitem_no {
        font-size: 30px;
        width: 46px;
        height: 46px;
    }
    .guide_arrow {
        height: 26px;
    }
    .guide_arrow img {
        height: 8px;
    }
}
/*#endregion pg_guide*/

/*#region pg_background*/
.pgback_ad {
    display: flex;
    justify-content: center;
    align-items: center;
}
.pgback_ad img {
    max-height: 50vh;
    max-width: 90%;
}
.pgback_row {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.pgback_left {
    margin-right: -86px;
    position: relative;
    z-index: 1;
}
.pgback_center {
    width: 460px;
    height: 460px;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: dashed 1px #01ABAB;
    position: relative;
}
.pgback_center img {
    width: 190px;
}
.pgback_right {
    margin-left: -86px;
    position: relative;
    z-index: 1;
}
@media (max-width: 767px) {
    .pgback_left {
        width: 30vw;
        margin-right: 0;
        position: absolute;
        left: 0;
    }
    .pgback_left img {
        width: 100%;
    }
    .pgback_center {
        width: 60vw;
        height: 60vw;
    }
    .pgback_center img {
        width: 26vw;
    }
    .pgback_right {
        width: 30vw;
        position: absolute;
        right: 0;
    }
    .pgback_right img {
        width: 100%;
    }
}
.pg_twocols {
    display: flex;
    justify-content: space-between;
}
.pg_twocols1 {
    width: 48%;
}
.pg_twocols1:last-child {
    margin-bottom: 0;
}
.pg_twocols1 .justimg {
    width: 100%;
}
@media (max-width: 767px) {
    .pg_twocols {
        display: block;
    }
    .pg_twocols1 {
        width: 100%;
        margin-right: 0;
        margin-bottom: 26px;
    }
}
/*#endregion pg_background*/

/*region pg_access*/
.access_row {
    display: flex;
    justify-content: flex-end;
    gap: 40px;
    padding-left: 5vw;
    padding-right: 5vw;
}
.access_row.X_2 {
    flex-direction: row-reverse;
    padding-left: 5vw;
    padding-right: 5vw;
}
.access_left {
    display: flex;
    justify-content: flex-end;
}
.access_content {
    justify-content: flex-end;
}
.access_prov {
    display: inline-block;
    color: #01ABAB;
    border: solid 1px #01ABAB;
    padding: 0 8px;
}
.access_company {
    color: #01ABAB;
    font-size: 20px;
    font-weight: 500;
}
.access_text {
    line-height: 2;
}
.access_phone {
    display: inline-flex;
    gap: 12px;
    justify-content: center;
    align-items: center;
    color: #01ABAB;
    font-size: 36px;
    font-family: var(--fontN);
    transition: all .3s;
}
.access_phone:hover {
    color: #01ABAB;
    opacity: .7;
}
.access_phone img {
    width: 26px;
}
.access_table table {
    width: 450px;
}
.access_table tr {
    border-top: solid 1px #CCCCCC;
}
.access_table tr:first-child {
    border: none;
}
.access_table tr td {
    text-align: center;
    vertical-align: middle;
    padding: 12px 0;
}
.access_table.X_2 tr td {
    color: #01ABAB;
}
.access_table .X_last {
    width: 50px;
    padding-left: 12px;
}
.access_table .X_lt {
    color: #01ABAB;
    width: 100px;
    text-align: left;
}
.access_table .X_time {
    width: 100px;
    text-align: left;
}
.access_right {
    width: 50%;
}
.access_right iframe {
    width: 100%;
    height: 580px;
}
@media (max-width: 767px) {
    .access_row {
        gap: 26px;
        flex-direction: column;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .access_left {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .access_content {
        width: calc(100% - 30px);
    }
    .access_table {
        width: 100%;
    }
    .access_table table {
        width: 100%;
    }
    .access_right {
        width: 100%;
    }
    .access_right iframe {
        width: 100%;
        height: 300px;
    }
    .access_row.X_2 {
        flex-direction: column;
    }
    .access_btn .com_btn {
        width: 100%;
        height: auto;
        padding: 12px 0;
    }
    .access_company {
        font-size: 16px;
    }
}
/*endregion pg_access*/

/*region pg_faq*/
.faq_row {
    border-top: solid 1px #CCCCCC;
    padding: 20px 0;
}
.faq_row:last-child {
    border-bottom: solid 1px #CCCCCC;
}
.faq_cap {
    display: flex;
    margin-bottom: 16px;
}
.faq_cap1 {
    width: 40px;
    font-size: 28px;
    color: #01ABAB;
}
.faq_cap2 {
    font-size: 18px;
    color: #01ABAB;
    padding-top: 6px;
    line-height: 1.8;
}
.faq_body {
    padding-left: 40px;
}
.faq_btn .com_btn {
    height: auto;
    padding: 6px 40px;
    font-size: 16px;
    min-width: 200px;
}
.faq_btn .com_btn span {
    font-size: 16px;
}
@media (max-width: 767px) {
    .faq_row {
        padding: 12px 0;
    }
    .faq_cap {
        margin-bottom: 12px;
    }
    .faq_cap1 {
        width: 32px;
        font-size: 21px;
    }
    .faq_cap2 {
        padding-top: 3px;
        font-size: 16px;
    }
    .faq_body {
        padding-left: 32px;
    }
    .faq_btn .com_btn span {
        font-size: 14px;
    }
}

/*endregion pg_faq*/

/*region pg_connect*/
.connect_rect {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #F1FBFC;
    padding: 40px 0;
}
.connect_title {
    color: #01ABAB;
    font-family: var(--fontT);
    font-size: 36px;
}
.connect_p {
    color: #01ABAB;
    line-height: 2.2;
}
.footcontact_btns.X_2 {
    justify-content: space-around;
}
.footcontact_btns.X_3 {
    justify-content: space-around;
}
@media (max-width: 767px) {
    .connect_rect {
        margin-left: -15px;
        margin-right: -15px;
        padding: 15px;
    }
    .connect_title {
        text-align: center;
        font-size: 20px;
    }
    .footcontact_btns.X_3 {
        flex-direction: row;
        gap: 5vw;
    }
}
/*endregion pg_connect*/

/*region pg_case*/
.case_title1 h2 {
    font-size: 36px;
    color: #01ABAB;
    text-align: center;
    font-family: var(--fontT);
}
.case_cap {
    text-align: center;
    font-size: 34px;
    color: #006385;
    font-family: var(--fontT);
}
.case_cap.X_2 {
    color: #E74B21;
}
.case_cap.X_3 {
    color: #006385;
}
.case_titlep {
    color: #01ABAB;
}
.case_row {
    display: flex;
    flex-wrap: wrap;
}
.case_col {
    width: 48%;
    margin-right: 4%;
    margin-bottom: 60px;
}
.case_col:nth-child(2n) {
    margin-right: 0;
}
.case_ankeito {
    background-color: #F1FBFC;
}
.ankeito_img {
    width: 70%;
    margin: auto;
}
.ankeito_img img {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
}
@media (max-width: 767px) {
    .case_title1 h2 {
        font-size: 4.8vw;
    }
    .case_row .pg_p p {
        font-size: 13px;
    }
    .case_cap {
        font-size: 20px;
    }
    .case_col {
        margin-bottom: 26px;
    }
    .ankeito_img {
        width: 100%;
    }
}
/*endregion pg_case*/

/*region pg_course*/
.main_course {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    row-gap: 26px;
    column-gap: 4%;
}
.main_course1 {
    border: solid 1px #01ABAB;
    border-top-left-radius: 16px;
    overflow: hidden;
    background-color: #F1FBFC;
    width: 48%;
}
.main_course1.X_2 {
    width: 100%;
}
.mcourse_cap {
    background-color: #01ABAB;
    color: #fff;
    text-align: center;
    padding: 8px 4px;
}
.mcourse_body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px 4px 15px;
}
.mcourse_title {
    font-size: 28px;
    color: #01ABAB;
}
.mcourse_time {
    border: solid 1px #01ABAB;
    line-height: 2;
    background-color: #fff;
    border-radius: 40px;
    color: #01ABAB;
    padding: 2px 16px 1px;
}
.mcourse_time .span1 {
    font-family: var(--fontN);
    font-size: 34px;
    line-height: 38px;
    font-weight: bold;
}
.mcourse_time .span2 {
    font-size: 26px;
    font-weight: 500;
    line-height: 38px;
}
.mcourse_p span {
    color: #01ABAB;
    font-size: 22px;
}
@media (max-width: 767px) {
    .main_course1 {
        width: 100%;
    }
    .mcourse_title {
        font-size: 24px;
    }
}
.price_row {
    display: flex;
}
.price_left {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: #F1FBFC;
    padding: 40px 34px;
}
.price_btn {
    width: 100%;
}
.price_btn .com_btn {
    width: 100%;
}
.price_right {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image: url(../images/price_bg.jpg);
    width: 50%;
}
@media (max-width: 767px) {
    .price_row {
        display: block;
    }
    .price_left {
        width: 100%;
        padding: 15px;
        margin-bottom: 10px;
    }
    .price_right {
        width: 100%;
        height: 200px;
    }
}

.opflow_row {
    display: flex;
    flex-wrap: wrap;
}
.opflow_item {
    width: 48%;
    margin-right: 4%;
    margin-bottom: 20px;
}
.opflow_item:nth-child(2n) {
    margin-right: 0;
}
.opflowitem_img img {
    width: 100%;
}
.opflow_cap {
    display: flex;
}
.opflow_cap1 {
    width: 54px;
    font-size: 36px;
    font-family: var(--fontN);
    font-weight: 500;
    color: #01ABAB;
}
.opflow_cap2 {
    flex: 1;
    border-left: solid 1px #EBEBEB;
    padding-left: 20px;
}
@media (max-width: 767px) {
    .opflow_item {
        width: 100%;
        margin-right: 0;
    }
    .opflow_cap1 {
        font-size: 24px;
        width: 40px;
    }
    .opflow_cap2 {
        padding-left: 12px;
    }
}
.course_title1 {
    font-size: 22px;
    color: #01ABAB;
}
.stap_row {
    display: flex;
    justify-content: space-between;
}
.stap_item {
    width: 32%;
    background-color: #F1FBFC;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 20px 4px;
}
.stapitem_cap {
    font-family: var(--fontN);
    color: #01ABAB;
    font-size: 36px;
    font-weight: 500;
}
.stap_text {
    text-align: center;
    height: 100%;
    text-align: center;
    display: flex;
    align-content: center;
    flex-wrap: wrap;
}
.stap_text {
    text-align: center;
}
@media (max-width: 767px) {
    .course_title1 {
        font-size: 20px;
    }
    .stap_row {
        display: block;
    }
    .stap_item {
        width: 100%;
        margin-bottom: 20px;
        padding: 15px;
        height: 105px;
        /* flex-direction: row; */
        justify-content: flex-start;
    }
    .stap_item:last-child {
        margin-bottom: 0;
    }
    .stapitem_cap {
        font-size: 22px;
        margin-right: 10px;
    }
}

/*endregion pg_course*/

/*region pg_compare*/
.aga_diff {
    display: flex;
}
.agadiff_left {
    width: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image: url(../images/aga_diff.jpg);
}
.agadiff_right {
    width: 50%;
    height: 300px;
    display: flex;
    align-items: center;
    padding-left: 4%;
}
@media (max-width: 767px) {
    .aga_diff {
        display: block;
    }
    .agadiff_left {
        width: 100%;
        height: 200px;
    }
    .agadiff_right {
        width: 100%;
        height: auto;
        padding: 0;
        margin-top: 20px;
    }
}
.aga_table {
    width: 100%;
}
.aga_table1 {

}
.agatb_row1 {
    display: flex;
    align-items: flex-end;
    border-bottom: solid 1px #fff;
}
.agacell_11 {
    content: "";
    width: 100px;
}
.agacell_12 {
    background-color: #01ABAB;
    color: #fff;
    width: 290px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    font-size: 22px;
    font-weight: 500;
}
.agacell_13 {
    background-color: #999999;
    color: #fff;
    width: 190px;
    height: 66px;
    font-weight: 500;
    display: flex;
    justify-content: center;
    align-items: center;
}
.agacell_14 {
    background-color: #707070;
    color: #fff;
    width: 220px;
    height: 66px;
    font-weight: 500;
    display: flex;
    justify-content: center;
    align-items: center;
}
.agacell_15 {
    background-color: #999999;
    color: #fff;
    width: 180px;
    height: 66px;
    font-weight: 500;
    display: flex;
    justify-content: center;
    align-items: center;
}
.agatb_row2 {
    display: flex;
    border-bottom: solid 1px #fff;
}
.agacell_21 {
    background-color: #999999;
    color: #fff;
    width: 100px;
    height: 60px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
}
.agacell_22 {
    background-color: #F1FBFC;
    color: #01ABAB;
    width: 290px;
    height: 60px;
    display: flex;
    align-items: center;
    padding: 4px 24px;
}
.agacell_23 {
    background-color: #F5F5F5;
    width: 190px;
    height: 60px;
    display: flex;
    align-items: center;
    padding: 4px 24px;
}
.agacell_24 {
    background-color: #EBEBEB;
    width: 220px;
    height: 60px;
    display: flex;
    align-items: center;
    padding: 4px 24px;
}
.agacell_25 {
    background-color: #F5F5F5;
    width: 180px;
    height: 60px;
    display: flex;
    align-items: center;
    padding: 4px 24px;
}
@media (max-width: 1030px) {
    .aga_table1 {
        width: 980px;
    }
    .aga_table {
        overflow-x: scroll;
    }
}
@media (max-width: 767px) {
    .aga_table {
        scrollbar-width: 100px;
    }
    .aga_table1 {
        width: 674px;
    }
    .agacell_11 {
        width: 86px;
    }
    .agacell_12 {
        font-size: 16px;
        width: 220px;
        height: 60px
    }
    .agacell_13 {
        width: 120px;
        height: 44px;
    }
    .agacell_14 {
        width: 120px;
        height: 44px;
    }
    .agacell_15 {
        width: 130px;
        height: 44px;
    }
    .agacell_21 {
        width: 86px;
        height: 50px;
        padding: 4px 8px;
        font-size: 13px;
    }
    .agacell_22 {
        padding: 4px 8px;
        width: 220px;
        height: 50px;
        font-size: 13px;
    }
    .agacell_23 {
        padding: 4px 8px;
        width: 120px;
        height: 50px;
        font-size: 13px;
    }
    .agacell_24 {
        padding: 4px 8px;
        width: 120px;
        height: 50px;
        font-size: 13px;
    }
    .agacell_25 {
        padding: 4px 8px;
        width: 130px;
        height: 50px;
        font-size: 13px;
    }
    
}
.agadiff_btn {
    display: flex;
    justify-content: center;
    align-items: center;
}
.compare_btn {
    display: flex;
    justify-content: center;
    align-items: center;
}
/*endregion pg_compare*/

/*region pg_reason*/
.agatask_row {
    display: flex;
}
.agatask_left {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.agatask_right {
    width: 50%;
    padding-top: 40px;
}
@media (max-width: 767px) {
    .agatask_row {
        display: block;
    }
    .agatask_left {
        width: 100%;
    }
    .agatask_left img {
        width: 40%;
    }
    .agatask_right {
        padding-top: 10px;
        width: 100%;
    }
}
.stable_row {
    display: flex;
}
.stable_left {
    width: 50%;
    padding-right: 4%;
}
.stable_right {
    width: 50%;
}
.stable_preimg01 {
    display: flex;
}
.stable_preimg01 span {
    width: 50%;
    padding-left: 8px;
}
.stable_afterimg {
    font-size: 12px;
}
.stable_img02 {
    border: solid 1px #EBEBEB;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}
.stable_img01 img{
    width: 100%;
    height: auto;
}
@media (max-width: 1030px) {
    .stable_row {
        display: block;
    }
    .stable_left {
        width: 100%;
        padding-right: 0;
    }
    .stable_right {
        width: 100%;
        margin-top: calc(var(--pxunit) * 4);
    }
    .stable_img02 {
        display: inline-block;
        padding: 15px;
    }
}
@media (max-width: 767px) {
    .stable_img01 img {
        max-width: 100%;
    }
    .stable_img02 img {
        max-width: 100%;
    }
}
.stable4_row {
    display: flex;
}
.stable4_left {
    width: 50%;
}
.stable4_right {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 4%;
    padding-top: 30px;
}
@media (max-width: 767px) {
    .stable4_row {
        display: block;
    }
    .stable4_left {
        width: 100%;
    }
    .stable4_right {
        width: 100%;
        padding-left: 0;
        padding-top: 20px;
    }
    .stable4_right img {
        max-width: 50vw;
    }
}
.caution {
    display: flex;
    background-color: #FEF6F3;
}
.caution_content {
    width: 72%;
    padding: 30px 0 40px 30px;
}
.caution_cap {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 26px;
    color: #E74B21; 
}
.caution_cap img {
    height: 28px;
}
.caution_img {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}
.caution_img img {
    margin-top: -20px;
    margin-bottom: -10px;
}
@media (max-width: 767px) {
    .caution {
        position: relative;
        margin-top: 100px;
    }
    .caution_content {
        width: 100%;
        padding: 60px 15px 15px 15px;
    }
    .caution_img {
        width: auto;
        position: absolute;
        right: 0;
        height: 200px;
        top: -100px;
    }
    .caution_img img {
        width: auto;
        height: 100%;
    }
}
.matome_row {
    display: flex;
}
.matome_left {
    width: 50%;
    padding-right: 40px;
}
.matome_ul {
    padding-left: 40px;    
}
.matome_ul li {
    line-height: 2.1;
}
.matome_ul li::before {
    content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
    color: #01ABAB; /* Change the color */
    font-weight: bold; /* If you want it to be bold */
    display: inline-block; /* Needed to add space between the bullet and the text */
    width: 1em; /* Also needed for space (tweak if needed) */
    margin-left: -1em; /* Also needed for space (tweak if needed) */
}
.matome_right {
    width: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image: url(../images/stable06.jpg);
}
@media (max-width: 767px) {
    .matome_row {
        display: block;
    }
    .matome_left {
        width: 100%;
        padding-right: 0;
    }
    .matome_right {
        width: 100%;
        height: 200px;
        margin-top: 20px;
    }
}
/*endregion pg_reason*/
/*region pg_about*/
.about_slogan {
    background-color: #F1FBFC;
    display: flex;

}
.aboutslogan_content {
    font-size: 26px;
    color: #01ABAB;
    line-height: 2.5;
    padding: 40px;
}
.aboutslogan_img {
    flex: 1;
    margin-top: 20px;
    margin-bottom: -10px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}
@media (max-width: 1030px) {
    .aboutslogan_content {
        
    }
    .aboutslogan_img {
        width: calc(100% - 400px);
    }
    .aboutslogan_img img {
        width: 100%;
    }
}
@media (max-width: 767px) {
    .about_slogan {
        display: block;
    }
    .aboutslogan_content {
        padding: 15px 15px 0 15px;
        line-height: 2.1;
        font-size: 16px;
    }
    .aboutslogan_img {
        width: 100%;
        justify-content: flex-end;
        margin-bottom: -6px;
        padding-right: 15px;
    }
    .aboutslogan_img img {
        width: 70%;
    }
}
.about_point  {
    position: relative
}
.aboutpoint_layer0 {
    position: absolute;
    height: 60%;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #F2F7F9;
}
.aboutpoint_layer0.X_2 {
    background-color: #FEF6F3;
}
.aboutpoint_layer1 {
    position: relative;
    z-index: 1;
}
.aboutpoint_row {
    display: flex;
    align-items: center;
    padding-bottom: 40px;
}
.aboutpoint_right {
    padding-left: 17%;
    color: #006385;
    line-height: 1.8;
}
.aboutpoint_right.X_2 {
    color: #E74B21;
}
@media (max-width: 767px) {
    .aboutpoint_row {
        padding-bottom: 20px;
    }
    .aboutpoint_layer0 {
        height: auto;
        top: 100px;
    }
    .aboutpoint_row {
        display: block;
    }
    .aboutpoint_left {
        width: 100%;
    }
    .aboutpoint_left img {
        width: 36%;
        max-width: 160px;
    }
    .aboutpoint_right {
        width: 100%;
        padding: 15px 0;
        line-height: 2.1;
    }
}
.special_title {

}
.special_row {
    display: flex;
}
.special_row.X_2 {
    flex-direction: row-reverse;
}
.special_left {
    width: 50%;
    height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-right: 40px;
}
.special_left.X_2 {
    padding-left: 40px;
    padding-right: 0;
}
.special_content {

}
.special_no {

}
.special_cap {
    font-size: 24px;
    color: #006385;
    line-height: 1.8;
}
.special_right {
    width: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.special_right {
    background-image: url(../images/special01.jpg);
}
.special_right.X_2 {
    background-image: url(../images/special02.jpg);
}
.special_right.X_3 {
    background-image: url(../images/special03.jpg);
}
@media (max-width: 767px) {
    .special_title {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .special_title img {
        width: 30vw;
    }
    .special_no img {
        width: 7vw;
    }
    .special_row {
        display: block;
        margin-bottom: 26px;
    }
    .special_row:last-child {
        margin-bottom: 0;
    
    }
    .special_left {
        width: 100%;
        height: auto;
        padding: 0 !important;
    }
    .special_cap {
        font-size: 16px;
    }
    .special_right {
        width: 100%;
        height: 240px;
        margin-top: 20px;
    }
}

.special_before {
    display: flex;
    justify-content: center;
    align-items: center;
}
.special_extra {
    color: #006385;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    font-size: 18px;
}
.special_extra img {
    /* width: 11px; */
}
.special_extra span {
    padding-bottom: 4px;
}
.special_btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.special_btn .com_btn1 {
    border: solid 1px #006385;
    color: #006385;
}
.special_btn .com_btn1 span {
    color: #006385;
}
.special_btn .com_btn1:hover span {
    color: #006385;
}
.special_btn2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.special_btn2 .special_before span {
    color: #E74B21;
}
.special_btn2 .com_btn1 {
    border: solid 1px #E74B21;
    color: #E74B21;
    min-width: 420px;
}
.special_btn2 .com_btn1 span {
    color: #E74B21;
}
.special_btn2 .com_btn1:hover span {
    color: #E74B21;
}
@media (max-width: 767px) {
    .special_btn .com_btn1 {
        padding: 0.2em 0;
    }
    .special_btn2 .com_btn1 {
        width: 100%;
        min-width: auto;
        padding: 1em 0;
    }
}
.patent_row {
    display: flex;
}
.patent_left {
    width: 50%;
    padding: 0 40px 40px 0;
}
.patent_content {

}
.patent_right {
    width: 50%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(../images/patent.jpg);
}
@media (max-width: 767px) {
    .patent_row {
        display: block;
    }
    .patent_left {
        width: 100%;
        padding: 0;
        margin-bottom: 20px;
    }
    .patent_right {
        width: 100%;
        height: 240px;
        margin-bottom: 26px;
    }
}
.patent_table table {
    width: 100%;
}
.patent_table td {
    border: solid 1px rgba(231, 75, 33, 0.15);
    padding: 15px;
}
.patent_table td.patentb_th {
    background-color: #FEF6F3;
    color: #E74B21;
}
@media (max-width: 767px) {
    .patent_table td {
        padding: 8px 5px;
    }
    .patent_table td.patentb_th {
        width: 124px;
    }
}
/*endregion pg_about*/

/*#region shared-from-top: inner templates reuse these blocks. Do not load all of front.css. */
.tppoint_row {
    display: flex;
    justify-content: space-evenly;
}
.tppoint_row img {
    height: auto;
}
.tphcr_btn {
    display: flex;
    justify-content: center;
    align-items: center;
}
.tpeffect_hx2 {
    content: "";
    height: 80px;
}
.tpeffect_p p {
    text-align: center;
}
.tpeffect_p p span {
    color: #01ABAB;
}
.tpeffect_h3 h3 {
    font-size: 26px;
    text-align: center;
}
.tpeffect_chartcap {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: calc(var(--pxunit) * 4);
}
.tpeffect_chartcap1 {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    background-color: #F1FBFC;
    padding: 8px 20px;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}
.tpeffect_chartcap3 {
    color: #01ABAB;
    font-size: 26px;
}
.tpeffect_chartcap3 span {
    font-size: 48px;
    font-family: var(--fontN);
    font-weight: 500;
}
.tpeffect_chartsvg {
    display: flex;
    justify-content: center;
    align-items: center;
}
.tpeffect_chartsvg img {
    max-width: 100%;
    height: auto;
}
.tpeffect_chartxy {
    display: flex;
    justify-content: center;
    align-items: center;
}
.tpeffect_chartx {
    position: relative;
    padding-left: 30px;
    font-size: 14px;
}
.tpeffect_chartx::before {
    position: absolute;
    content: "";
    top: 8px;
    left: 0;
    width: 24px;
    height: 8px;
    background-color: #01ABAB;
}
.tpeffect_charty {
    position: relative;
    padding-left: 30px;
    font-size: 14px;
}
.tpeffect_charty::before {
    position: absolute;
    content: "";
    top: 8px;
    left: 0;
    width: 24px;
    height: 8px;
    background-color: #EBEBEB;
}
.tpeffect_chartdesc {
    text-align: center;
    font-size: 14px;
}
.tpfail_desc {
    padding: 0 100px;
}
.tpfail_desc p span {
    color: #01ABAB;
    line-height: 1.8;
}
.tpfail_row {
    display: flex;
    padding-left: 100px;
    gap: 10px;
    justify-content: center;
    align-items: center;
}
.tpfail_left {
    flex: 1;
    position: relative;
    background-color: #F5F5F5;
    border-top-left-radius: 100px;
    padding-top: 36px;
}
.tpfail_left.X_2 {
    background-color: #F1FBFC;
    padding-top: 0;
}
.tpfail_h3 h3 {
    font-size: 28px;
    text-align: center;
}
.tpfail_img {
    width: 100%;
    margin-top: 116px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
}
.tpfail_img img {
    height: auto;
    max-width: 100%;
}
.tpfail_svg {
    position: absolute;
    top: 90px;
    left: 3%;
    right: 3%;
    bottom: 0;
}
.tpfail_svg img {
    width: 100%;
    height: auto;
}
.tpfail_arrow {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
}
.tpfail_right {
    width: 240px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.pie {
    scale: 1.1;
}
.tpfail_r1 {
    text-align: center;
}
.tpfail_r2 {
    font-size: 20px;
    text-align: center;
}
.tpfail_up {
    width: 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 70px 15px 50px;
}
.tpfailup_text {
    font-size: 22px;
    font-family: var(--fontT);
    color: #01ABAB;
    text-align: center;
}
.tpfail_img1 {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: calc(100% - 400px);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.tpfail_img1.is-near {
    background-image: url(../images/tpfail_img1.webp);
}
.tpfail_hx1 {
    content: "";
    height: 80px;
}
.tpfailr_hx1 {
    content: "";
    height: 0;
}
.tpfail_lastwrap {
    width: 600px;
    margin: auto;
}
.tpfail_round {
    background: none;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 10px;
    font-size: 18px;
    text-align: center;
    color: #01ABAB;
}
.tpfail_last {
    background-color: transparent;
    color: #707070;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
}
.tpfail_last1 {
    height: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    border: solid 1px #01ABAB;
    gap: 20px;
}
.tpfail_last1 .span1 {
    font-size: 18px;
}
.tpfail_last1 .span2 {
    font-size: 36px;
    font-weight: 500;
    font-family: var(--fontN);
    color: #01ABAB;
}
.tpfail_last1 .span2 span {
    font-size: 24px;
}
@media (max-width: 1230px) {
    .tpfail_desc {
        padding: 0;
    }
    .tpfail_row {
        padding: 0;
    }
}
@media (max-width: 991px) {
    .tpfail_h3 h3 {
        font-size: 3vw;
    }
    .tpfail_left.X_2 {
        display: flex;
    }
    .tpfail_up {
        width: auto;
    }
    .tpfail_img1 {
        position: relative;
        content: "";
        flex: 1;
        left: auto;
    }
}
@media (max-width: 767px) {
    .tppoint_row .img1 {
        width: 40%;
    }
    .tppoint_row .img2 {
        width: 15%;
    }
    .tphcr_btn {
        width: 100%;
    }
    .tpeffect_hx2 {
        height: 20px;
    }
    .tpeffect_h3 h3 {
        font-size: 16px;
    }
    .tpeffect_chart {
        position: relative;
    }
    .tpeffect_chartcap {
        margin-bottom: 0;
    }
    .tpeffect_chartcap1 {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-40%);
        background-color: #01ABAB;
        color: #fff;
        display: block;
        padding: 12px 7px;
        text-align: center;
        z-index: 2;
    }
    .tpeffect_chartcap2 {
        font-size: 12px;
    }
    .tpeffect_chartcap3 {
        color: #fff;
        text-align: center;
        font-size: 20px;
        line-height: 1;
        margin-top: 7px;
    }
    .tpeffect_chartcap3 span {
        font-size: 40px;
    }
    .tpeffect_chartsvg img {
        width: 100%;
    }
    .tpeffect_chartdesc {
        font-size: 10px;
    }
    .tpeffect_p p {
        font-size: 14px;
    }
    .tpeffect_chartx,
    .tpeffect_charty {
        font-size: 12px;
    }
    .tpfail_row {
        flex-direction: column;
        background-color: #F5F5F5;
        border-top-left-radius: 50px;
        gap: 16px;
        padding-bottom: 10px;
    }
    .tpfail_row.X_2 {
        background-color: #F1FBFC;
    }
    .tpfail_left {
        border-bottom: dashed 1px #CCCCCC;
    }
    .tpfail_h3 h3 {
        font-size: 14px;
        line-height: 1.5;
    }
    .tpfail_img {
        width: 50%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 35vw;
    }
    .tpfail_img img {
        width: 100%;
    }
    .tpfail_svg {
        top: 20vw;
    }
    .tpfail_r1 {
        font-size: 12px;
    }
    .tpfail_r2 {
        font-size: 14px;
    }
    .tpfail_arrow {
        height: 60px;
    }
    .tpfail_arrow img {
        height: 30px;
        width: auto;
    }
    .pie {
        scale: 1;
    }
    .tpfail_left.X_2 {
        display: flex;
        width: 100%;
        background-color: transparent;
        border-bottom: dashed 1px #7FD5D5;
    }
    .tpfail_up {
        width: 55%;
        padding: 40px 4px 20px;
    }
    .tpfail_img1 {
        width: 45%;
        position: relative;
        left: auto;
    }
    .tpfail_logo {
        width: 60%;
    }
    .tpfail_logo img {
        width: 100%;
        height: auto;
    }
    .tpfailup_text {
        font-size: 3.6vw;
    }
    .tpfail_desc p {
        font-size: 14px;
        line-height: 2;
    }
    .tpfail_hx1 {
        height: 40px;
    }
    .tpfail_lastwrap {
        width: 100%;
    }
    .tpfail_round {
        font-size: 14px;
    }
    .tpfail_last {
        font-size: 16px;
    }
    .tpfail_last1 {
        flex-direction: column;
        height: auto;
        padding: 10px 15px 4px;
        gap: 4px;
    }
    .tpfail_last1 .span1 {
        text-align: center;
        font-size: 12px;
    }
    .tpfail_last1 .span2 {
        font-size: 30px;
    }
}
/*#endregion shared-from-top*/