@charset "UTF-8";
@media (max-width: 1440px) {
}
@media (max-width: 1280px) {
    html,
    body {
        font-size: 15px;
    }
    #nav {
        display: none;
    }
    #menuToggle {
        display: block;
        right: 2rem;
    }
    .m-section .inner,
    .header-inner,
    #footer .inner {
        padding: 2.5rem 2rem;
    }
    .login-area {
        margin-right: 4rem;
    }
    .logo-item {
        width: 210px;
        height: 80px;
    }
    .process-area .proc-item {
        width: 150px;
        height: 150px;
    }
    .process-area .proc-item:after {
        width: 130px;
        height: 130px;
    }
}
@media (max-width: 1024px) {
    html,
    body {
        font-size: 14px;
    }
    .main-banner {
        background: #66b3e2 url(../img/main-banner-mo.png) center 0 / cover no-repeat;
    }

    .m-section .inner,
    .header-inner,
    #footer .inner {
        padding: 2.5rem 2rem;
    }

    .m-section.section02 .box-cont {
        flex-direction: column;
    }
    .m-section .tab {
        width: 100%;
        margin-bottom: 2rem;
    }
    .m-section .tab-item {
        margin: 0 0.375rem 0.375rem 0;
    }
    .m-section.section07 .inner {
        flex-direction: column;
    }
    .m-section.section07 .notice-area,
    .m-section.section07 .faq-area {
        width: 100%;
    }
    .m-section.section07 .notice-area {
        margin-bottom: 3.125rem;
    }
    .subPage .inner {
        padding: 2.5rem 2rem;
    }
    .fi-page01 .info-area {
        flex-direction: column;
    }
    .fi-page01 .info-area .img-box {
        width: 60%;
        margin: 0 auto 3.125rem;
    }
    .item-list,
    .item-list03 {
        justify-content: flex-start;
    }
    .item-box,
    .item-list03 .item-box03 {
        width: 48%;
    }
    .item-list03 .item-box03:nth-child(2n) {
        margin-right: 0;
    }
    .badge-area span {
        margin: 0.375rem;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    .tab-list {
        display: none;
    }
    .loginPage .tab-list {
        display: flex !important;
    }
    .tab-select {
        display: block;
    }
    .company-head .company-info .col {
        flex-direction: column;
    }
    .company-head .company-info dl {
        width: 100%;
    }
    .resume-area .res-item {
        width: 100%;
        margin: 0 0 1% 0;
    }
    .process-area .proc-item {
        margin: 1%;
    }
    .m-section.section05 .arti-area .img-area > img {
        display: none;
    }
    .m-section.section05 .arti-area .img-area-mo {
        display: block;
        width: 60%;
        margin: 0 auto;
    }
    .ao-page02 .process-area .proc-item02:after {
        right: -20%;
    }
    .company-head .company-visual > img {
        width: auto;
        height: 100%;
    }
}

@media (max-width: 768px) {
    .company-logo {
        width: 160px;
    }
    .header-inner,
    #footer .inner {
        padding: 1.25rem;
    }
    #menuToggle {
        right: 1.25rem;
    }
    .loginPage .login-wrap {
        width: 80%;
    }
    .logo-item,
    .rc-logo-wrap .logo-item {
        width: 32%;
        height: 65px;
        margin: 0 1% 1% 0;
    }
    .logo-item img {
        width: 60%;
    }
    .tabs .tab-cont {
        padding: 2rem 0;
    }
    .company-hire .hire-item {
        width: 49%;
    }
    .process-area ul {
        justify-content: flex-start;
    }
    .process-area .proc-item {
        width: 130px;
        height: 130px;
        margin: 1% 2.5rem 1% 1%;
    }
    .process-area .proc-item:after {
        width: 110px;
        height: 110px;
    }
    .m-section.section04 .info-program .ip-item {
        width: 48%;
    }
    .m-section.section04 .ip-item:nth-child(2n) {
        padding-top: 0;
    }
    .table-noline th,
    .table-noline td {
        padding: 1rem;
    }
    .time-table {
        overflow-x: auto;
    }
    .m-section.section05 .arti-area {
        width: 90%;
    }
    .info-program .ip-item {
        width: 100%;
        margin: 0 0 1.5rem 0;
    }
    .fi-page02 .text-area {
        width: 100%;
    }
    .ao-page01 .flex {
        flex-direction: column;
    }
    .ao-page01 .flex.button-wrap {
        flex-direction: row;
    }
    .jaso-item {
        width: 100%;
        margin: 0 0 1.5rem 0;
    }
    .fi-page02 .img-area > img {
        display: none;
    }
    .fi-page02 .img-area .img-area-mo {
        display: block;
    }
    .fi-page02 .arti-area:nth-child(2) .img-area img,
    .rc-page03 .arti-area .img-area img,
    .fi-page02 .arti-area:nth-child(3) .img-area img,
    .rc-page04 .arti-area .img-area img {
        width: 80%;
    }
    #menu-mobile {
        width: 480px;
    }
    .ao-page04 .process-area ul {
        justify-content: center;
    }
    .jaso02-img .text-area {
        margin-bottom: 1.5rem;
    }
    .ao-page01 .flex.jaso03-img {
        flex-direction: row;
    }
    .jaso03-img .item {
        width: 48%;
        margin: 0 0.5%;
    }
    .point:after {
        top: 7px;
        transform: translateY(0);
    }
    .ao-page02 .process-area .proc-item02 .icon,
    .ao-page04 .process-area .proc-item02 .icon {
        width: 135px;
        height: 135px;
    }
    .ao-page02 .process-area ul,
    .ao-page04 .process-area ul {
        justify-content: space-around;
        align-items: flex-start;
    }
    .ao-page02 .process-area .proc-item02,
    .su-page03 .process-area .proc-item02,
    .ao-page04 .process-area .proc-item02 {
        width: 48%;
        margin-bottom: 2rem;
    }
    .ao-page02 .process-area .proc-item02:after,
    .ao-page04 .process-area .proc-item02:after,
    .su-page03 .process-area .proc-item02:after {
        right: -10%;
    }
    .ao-page02 .process-area .proc-item02 {
        margin-bottom: 1rem;
        width: 25%;
    }
    .ao-page02 .process-area .proc-item02:after {
        top: 80px;
        right: -10%;
    }
    .empty-box {
        height: 240px;
        padding-top: 0;
    }
    .my-page03 .box dl dt {
        width: 100px;
    }
    .sub-tab > ul {
        display: none;
    }
    .select-menu-cs {
        display: block;
    }
    .iframe-area {
        height: 600px;
    }
    .jaso03-img .item .text-area .point:after {
        top: 5px;
    }
    .sup-01 .img-box {
        width: 100%;
        margin-top: 1.25rem;
    }
    .video-list .video-item .thumbnail {
        height: 120px;
    }
    .su-page02 .box {
        width: 100%;
        height: 500px;
        background: url(../img/img-support04-mo.jpg) center/cover no-repeat;
    }
    .su-page02 .img-area {
        display: none;
    }
    .su-page02 .box .text-area {
        width: 80%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .video-list .video-item {
        width: calc(98% / 2);
    }
    .my-page01 .table-wrap:first-of-type table {
        width: 768px;
    }
    #Container.Testpopup {
        width: 100%;
    }
    .testpop-head {
        padding: 15px 0 15px 120px;
        background: var(--color-secondary) url(../img/img-test.png) -1px 0/125px no-repeat;
    }
}
@media (max-width: 480px) {
    html,
    body {
        font-size: 12px;
    }
    #menu-mobile {
        width: 320px;
    }
    .subPage .inner {
        width: 95%;
        padding: 2.5rem 0;
    }
    .main-banner .video-wrap iframe {
        height: 200px;
    }
    .sub-visual.visual01,
    .sub-visual.visual02,
    .sub-visual.visual03,
    .sub-visual.visual04,
    .sub-visual.visual05,
    .sub-visual.visual06,
    .sub-visual.visual07,
    .sub-visual.visual08 {
        background-position: 70% 0;
    }
    .btn {
        padding: 8px 16px;
    }
    .company-logo {
        width: 125px;
    }
    #menu-mobile {
        width: 100vw;
    }
    /* .main-banner {
        height: 200px;
    } */
    .fi-page01 .info-area .img-box {
        width: 100%;
    }
    .item-box {
        padding: 0.75rem;
    }
    .item-box .logo-area {
        height: 60px;
    }
    .item-box .logo-area img {
        width: 70%;
    }
    .item-box .title-03 {
        font-size: 1.25rem;
    }
    .item-box .badge-area {
        height: 58px;
    }
    .item-box .badge-area span {
        font-size: 0.75rem;
        margin: 2px;
    }
    .item-box.on:after {
        width: 55px;
        height: 21px;
        line-height: 21px;
        border-radius: 21px;
        top: 0.5rem;
        left: 0.5rem;
    }
    .company-head .box {
        flex-direction: column;
    }
    .company-head .company-visual {
        height: 180px;
    }
    .company-head .company-logo {
        width: 70%;
    }
    .company-head .company-logo .img-box {
        height: 80px;
    }
    .company-head .company-info {
        width: 100%;
    }
    .company-head .company-info dt {
        width: 100px;
    }
    .company-head .company-info dd {
        flex: 1;
    }
    .company-hire .hire-item {
        width: 100%;
        margin: 0 0 1% 0;
        flex-direction: column;
        align-items: flex-start;
    }
    .company-hire .hire-item .btn {
        margin: 1rem 0;
    }
    .process-area .proc-item span {
        line-height: 1.4;
    }
    .company-detail .video-area {
        height: 360px;
    }
    .company-welf {
        grid-template-columns: repeat(auto-fill, minmax(50%, auto));
    }
    .resume-area .res-item {
        padding: 1.5rem;
    }
    .m-section.section02 #tab1 .logo-area {
        justify-content: center;
    }
    .m-section.section03 .text-area .title-04 {
        font-size: 1rem;
    }
    .m-section.section03 .logo-wrap .logo-item {
        width: 48%;
    }
    .fi-page01 .cont-area .img-float {
        display: none;
    }
    .table-style01 .table-cell.no {
        width: 50px;
    }
    .table-style01 .table-cell.count {
        display: none;
    }
    .ao-page03 .box .img-area {
        display: none;
    }
    .shcedule-sort,
    .ao-page01 .flex.jaso03-img {
        flex-direction: column;
    }
    .shcedule-sort .select-wrarp,
    .shcedule-sort .select-wrap {
        margin-bottom: 1.5rem;
    }
    .sub-tabItem a {
        font-size: 1.125rem;
    }
    .jaso02-img .img-box {
        width: 100%;
    }

    .jaso03-img .item {
        width: 100%;
        margin-bottom: 1.5rem;
    }
    .ao-page02 .process-area .proc-item02 .icon,
    .ao-page04 .process-area .proc-item02 .icon {
        width: 120px;
        height: 120px;
    }
    .ao-page02 .process-area .proc-item02 {
        width: 45%;
    }
    .my-page03 .box dl {
        flex-direction: column;
    }
    .my-page03 .box dl dt {
        width: 100%;
    }
    .my-page03 .box .email-box input[type='text'] {
        width: 100px;
    }
    .table-style01 .table-cell.no {
        width: 15%;
    }
    .table-style01 .table-cell.title {
        width: 45%;
        flex: none;
    }
    .table-style01 .table-cell.date {
        width: 25%;
    }
    .table-style01 .table-cell.state {
        width: 15%;
    }
    .my-page02 .row.flex {
        flex-direction: column;
    }
    .my-page02 .table-wrap .row dt.cols,
    .my-page02 .table-wrap .row dd.cols {
        width: 100%;
        flex: none;
    }
    .input-area label {
        width: 90px;
    }
    .input-area .inputbirth {
        width: 55px;
    }
    .su-page01 .su-list {
        flex-direction: column;
    }
    .su-page01 .su-list .item {
        margin-bottom: 2rem;
        width: 100%;
    }
    .su-page01 .su-list .item h4 {
        height: 35px;
        width: 100%;
        line-height: 35px;
    }
    .ac-page02 .box .text-area {
        width: 100%;
    }
    .ac-page02 .img-area ul {
        flex-wrap: wrap;
    }
    .ac-page02 .img-area li {
        width: 46%;
        margin: 1%;
    }
    .ao-page04 .box .top-bx {
        flex-direction: column;
        align-items: center;
    }
    .ao-page04 .box .top-bx > div {
        margin-bottom: 2rem;
    }
    .video-list .video-item {
        width: 100%;
        margin: 0 0 2rem 0;
    }
    .loginPage .login-wrap {
        width: 90%;
    }
    .input-area .input-box .btn {
        width: 60px;
    }
    .login-box .img-area {
        width: 100px;
        height: 100px;
    }
    .ao-page03 .text-col p {
        flex-direction: column;
        margin-bottom: 8px;
    }
}
@media (max-width: 360px) {
    .input-area .inputbirth {
        width: 45px;
    }
    .input-area label {
        width: 80px;
    }
}