/**************** PAGE HELP ONLINE ****************//**************** PAGE HELP ONLINE ****************//**************** PAGE HELP ONLINE ****************/

#page.help-online {}
#page.help-online .scrollpad {width: 100%; overflow: hidden;}


#page.help-online .main-section {
    align-items: center; -webkit-align-items: center; align-content: center; -webkit-align-content: center;
    width: 100%; padding: 90px 18px 90px 18px;
}

#page.help-online .main-section .text-box {width: 65%; padding: 0px 36px 0px 0px;}
#page.help-online .main-section .text-box h1 {width: 100%; padding: 0px 0px 24px 0px; font-size: 30px; line-height: 39px; color: var(--black);}
#page.help-online .main-section .text-box .sub {width: 100%; padding: 0px 0px 18px 0px; font-weight: 700; font-size: 24px; line-height: 33px; color: var(--green);}
#page.help-online .main-section .text-box .li {width: 100%; padding: 0px 0px 18px 0px; font-weight: 700; font-size: 20px; line-height: 26px; color: var(--grey);}
#page.help-online .main-section .text-box .li span {color: var(--green);}
#page.help-online .main-section .text-box .bbox {width: 100%; padding: 24px 0px 0px 0px;}
#page.help-online .main-section .main-img-box {width: 70%; margin: 0px -35% 0px 0px;}
#page.help-online .main-section .main-img-pad {width: 100%; padding-top: 58.06451%;}
#page.help-online .main-section .main-img-box img {display: block; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;}
#page.help-online .main-section .main-img-box img.sub-img {top: 5%; width: auto; height: 80%;}


@media screen and (max-width: 1000px) {
    #page.help-online .main-section {padding: 54px 18px 60px 18px;}
    #page.help-online .main-section .text-box {width: 100%; padding: 0px 0px 48px 0px; text-align: center;}
    #page.help-online .main-section .text-box .text {padding: 0px 0px 24px 0px;}
    #page.help-online .main-section .text-box .bbox {justify-content: center; -webkit-justify-content: center;}
    #page.help-online .main-section .main-img-box {width: 80%; margin: 0px 7.5% 0px 12.5%;}
}

@media screen and (max-width: 750px) {
    #page.help-online .main-section {padding: 30px 18px 48px 18px;}
    #page.help-online .main-section .text-box h1 {font-size: 24px; line-height: 33px;}
    #page.help-online .main-section .text-box .sub {width: 100%; padding: 0px 0px 12px 0px; font-weight: 700; font-size: 20px; line-height: 26px; color: var(--green);}
    #page.help-online .main-section .text-box .li {width: 100%; padding: 0px 0px 12px 0px; font-weight: 700; font-size: 16px; line-height: 22px; color: var(--grey);}
    #page.help-online .main-section .main-img-box {width: 97.5%; margin: 0px 0% 0px 2.5%;}
}



#page.help-online .psyhos-section {padding: 54px 18px 60px 18px;}
#page.help-online .psyhos-section:after {content: ''; display: block; position: absolute; top: 0px; left: 18px; right: 18px; height: 1px; background-color: var(--br-grey);}
#page.help-online .psyhos-section .main-box {width: 100%;}
#page.help-online .psyhos-section .main-box .ttl {width: 100%; padding: 0px 0px 48px 0px; color: var(--black);}
#page.help-online .psyhos-section .main-box .ttl h4 {font-size: 30px; line-height: 39px; text-align: center;}
#page.help-online .psyhos-section .main-box .psyhos-list {}
#page.help-online .psyhos-section .main-box .psyhos-list .mbox {margin: -12px;}
#page.help-online .psyhos-section .main-box .psyhos-list .lipad {width: 16.666666%; max-width: 270px; padding: 12px;}
#page.help-online .psyhos-section .main-box .psyhos-list .psyho {display: block; position: relative; width: 100%; padding-top: 100%; background: var(--white); border-radius: 12px; overflow: hidden; box-sizing: border-box;}
#page.help-online .psyhos-section .main-box .psyhos-list .psyho img {display: block; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover;}
#page.help-online .psyhos-section .main-box .psyhos-list .psyho .flex-acenter {position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;}
#page.help-online .psyhos-section .main-box .psyhos-list .psyho .flex-acenter b {display: block; width: 100%; font-weight: 800; font-size: 40px; line-height: 42px; text-align: center; color: var(--green);}
#page.help-online .psyhos-section .main-box .psyhos-list .psyho .flex-acenter b.all {margin-bottom: 18px; font-weight: 700; font-size: 20px; line-height: 26px;}

#page.help-online .psyhos-section .list-box {width: 100%; padding: 60px 0px 0px 0px;}
#page.help-online .psyhos-section .list-box .lipad {width: 25%; max-width: 360px; padding: 0px 24px 24px 24px;}
#page.help-online .psyhos-section .list-box .li {padding: 0px 0px 0px 42px;}
#page.help-online .psyhos-section .list-box .li .fa-badge-check {display: block; position: absolute; top: 0px; left: 0px; width: 30px; height: 30px; font-size: 30px; line-height: 30px; text-align: center; color: var(--green);}
#page.help-online .psyhos-section .list-box .li .number {display: block; position: absolute; top: 0px; left: 0px; width: 30px; height: 30px; font-size: 30px; line-height: 30px; text-align: center; color: var(--green);}
#page.help-online .psyhos-section .list-box .li .lttl {padding: 2px 0px 6px 0px; font-weight: 700; font-size: 20px; line-height: 26px; color: var(--black);}
#page.help-online .psyhos-section .list-box .li .ltxt {font-size: 16px; line-height: 22px; color: var(--black);}

#page.help-online .psyhos-section .more-box {width: 100%; padding: 24px 0px 0px 0px;}

#page.help-online .psyhos-section .bottom-box {width: 100%; padding: 36px 0px 0px 0px; text-align: center;}
#page.help-online .psyhos-section .bottom-box .ttl {width: 100%; padding: 2px 0px 6px 0px; font-weight: 700; font-size: 20px; line-height: 26px; color: var(--black);}
#page.help-online .psyhos-section .bottom-box .txt {width: 100%; max-width: 720px; font-size: 16px; line-height: 22px; color: var(--black);}


@media screen and (max-width: 1400px) {
    #page.help-online .psyhos-section .list-box .lipad {width: 50%;}
}

@media screen and (max-width: 1300px) {
    #page.help-online .psyhos-section .list-box .lipad {width: 25%;}
}

@media screen and (max-width: 1000px) {
    #page.help-online .psyhos-section {padding: 48px 18px 48px 18px;}
    #page.help-online .psyhos-section .list-box .lipad {width: 50%;}
}

@media screen and (max-width: 750px) {
    #page.help-online .psyhos-section {padding: 30px 18px 30px 18px;}
    #page.help-online .psyhos-section .main-box .ttl {padding: 0px 0px 24px 0px;}
    #page.help-online .psyhos-section .main-box .ttl h4 {font-size: 24px; line-height: 33px;}
    #page.help-online .psyhos-section .main-box .psyhos-list .mbox {margin: -6px;}
    #page.help-online .psyhos-section .main-box .psyhos-list .lipad {width: 33.333333%; padding: 6px;}
    #page.help-online .psyhos-section .list-box {padding: 36px 0px 0px 0px;}
    #page.help-online .psyhos-section .list-box .lipad {width: 100%; max-width: 100%; padding: 0px 0px 24px 12px;}
}



#page.help-online .steps-section {padding: 54px 18px 60px 18px;}
#page.help-online .steps-section:after {content: ''; display: block; position: absolute; top: 0px; left: 18px; right: 18px; height: 1px; background-color: var(--br-grey);}
#page.help-online .steps-section .main-box {width: 100%;}
#page.help-online .steps-section .main-box .ttl {width: 100%; padding: 0px 0px 48px 0px; color: var(--black);}
#page.help-online .steps-section .main-box .ttl h4 {font-size: 30px; line-height: 39px; text-align: center;}

#page.help-online .steps-section .list-box {width: 100%; padding: 0px 0px 0px 0px;}
#page.help-online .steps-section .list-box .lipad {width: 25%; max-width: 360px; padding: 0px 24px 24px 24px;}
#page.help-online .steps-section .list-box .li {padding: 0px 0px 0px 42px;}
#page.help-online .steps-section .list-box .li .number {display: block; position: absolute; top: 0px; left: 0px; width: 30px; height: 30px; font-weight: 700; font-size: 30px; line-height: 30px; text-align: center; color: var(--green);}
#page.help-online .steps-section .list-box .li .lttl {padding: 2px 0px 6px 0px; font-weight: 700; font-size: 20px; line-height: 26px; color: var(--black);}
#page.help-online .steps-section .list-box .li .ltxt {font-size: 16px; line-height: 22px; color: var(--black);}

#page.help-online .steps-section .more-box {width: 100%; padding: 24px 0px 0px 0px;}


@media screen and (max-width: 1400px) {
    #page.help-online .steps-section .list-box .lipad {width: 50%;}
}

@media screen and (max-width: 1300px) {
    #page.help-online .steps-section .list-box .lipad {width: 25%;}
}

@media screen and (max-width: 1000px) {
    #page.help-online .steps-section {padding: 48px 18px 48px 18px;}
    #page.help-online .steps-section .list-box .lipad {width: 50%;}
}

@media screen and (max-width: 750px) {
    #page.help-online .steps-section {padding: 30px 18px 42px 18px;}
    #page.help-online .steps-section .main-box .ttl {padding: 0px 0px 24px 0px;}
    #page.help-online .steps-section .main-box .ttl h4 {font-size: 24px; line-height: 33px;}
    #page.help-online .steps-section .main-box .psyhos-list .mbox {margin: -6px;}
    #page.help-online .steps-section .main-box .psyhos-list .lipad {width: 33.333333%; padding: 6px;}
    #page.help-online .steps-section .list-box .lipad {width: 100%; max-width: 100%; padding: 0px 0px 24px 12px;}
    #page.help-online .steps-section .more-box {width: 100%; padding: 12px 0px 0px 0px;}
}



#page.help-online .imgs-section {padding: 54px 18px 60px 18px;}
#page.help-online .imgs-section:after {content: ''; display: block; position: absolute; top: 0px; left: 18px; right: 18px; height: 1px; background-color: var(--br-grey);}
#page.help-online .imgs-section .ttl {padding: 0px 0px 24px 0px; color: var(--black);}
#page.help-online .imgs-section .ttl h4 {font-size: 30px; line-height: 39px; text-align: center;}
#page.help-online .imgs-section .mbox {margin: 0px -18px 0px -18px;}
#page.help-online .imgs-section .lipad {width: 25%; padding: 0px 18px 0px 18px;}
#page.help-online .imgs-section .img-li {width: 100%;}
#page.help-online .imgs-section .img-pad {width: 100%; padding-top: 100%; overflow: hidden;}
#page.help-online .imgs-section .img-pad img.img {display: block; position: absolute; top: 0px; left: 0%; width: 100%; height: 100%;}
#page.help-online .imgs-section .img-txt {width: 100%; min-height: 48px; font-weight: 700; font-size: 18px; line-height: 24px; text-align: center; color: var(--black);}
#page.help-online .imgs-section .img-txt span {display: block; max-width: 100%;}
#page.help-online .imgs-section .bbox {width: 100%; padding: 54px 0px 0px 0px;}


@media screen and (max-width: 1500px) {
    #page.help-online .imgs-section .img-txt {min-height: 48px; font-size: 18px; line-height: 24px;}
}

@media screen and (max-width: 1000px) {
    #page.help-online .imgs-section {padding: 54px 18px 54px 18px;}
    #page.help-online .imgs-section .lipad {width: 33.333333%;}
}

@media screen and (max-width: 750px) {
    #page.help-online .imgs-section {padding: 30px 18px 42px 18px;}
    #page.help-online .imgs-section .ttl h4 {font-size: 24px; line-height: 33px;}
    #page.help-online .imgs-section .bbox {width: 100%; padding: 30px 0px 0px 0px;}
}

@media screen and (max-width: 500px) {
    #page.help-online .imgs-section .lipad {width: 50%;}
    #page.help-online .imgs-section .img-txt {min-height: 40px; font-weight: 400; font-size: 14px; line-height: 20px;}
}



#page.help-online .faq-lnk-section {padding: 0px 18px 0px 18px;}
#page.help-online .faq-lnk-section .border {padding: 54px 0px 54px 0px; border-top: solid 1px var(--br-grey); border-bottom: solid 1px var(--br-grey);}
#page.help-online .faq-lnk-section .ttl {width: 100%; padding: 0px 0px 24px 0px; font-size: 30px; line-height: 39px; text-align: center; color: var(--black);}
#page.help-online .faq-lnk-section .txt {width: 100%; padding: 0px 0px 0px 0px; font-weight: 700; font-size: 20px; line-height: 26px; text-align: center; color: var(--black);}


@media screen and (max-width: 750px) {
    #page.help-online .faq-lnk-section .border {padding: 30px 0px 30px 0px;}
    #page.help-online .faq-lnk-section .ttl {font-size: 24px; line-height: 33px;}
}



#page.help-online .articles-section {padding: 54px 18px 30px 18px;}
#page.help-online .articles-section .border {border-bottom: solid 1px var(--br-grey);}
#page.help-online .articles-section .ttl {width: 100%; padding: 0px 0px 48px 0px; color: var(--black);}
#page.help-online .articles-section .ttl h4 {font-size: 30px; line-height: 39px; text-align: center;}
#page.help-online .articles-section .page-content-list {padding: 0px 0px 0px 0px;}
#page.help-online .articles-section .page-content-list .swiper {padding: 0px 0px 36px 0px;}


@media screen and (max-width: 750px) {
    #page.help-online .articles-section {padding: 30px 18px 0px 18px;}
    #page.help-online .articles-section .ttl h4 {font-size: 24px; line-height: 33px;}
    #page.help-online .articles-section .ttl {padding: 0px 0px 24px 0px;}
}
