@charset "UTF-8";

/* [ 1200px ] ----------------- */
@media screen and (max-width:1200px) {

    html {
        font-size: calc(10 / 1200 * 100vw);
    }

    /* PC - SP */
    .pc-only {
        display: none;
    }
    .sp-only1200 {
        display: block;
    }

    /* ============================================
        component（共通：point01~03）
    ============================================ */

    .com-bg-inner::after {
        display: none;
    }

    .com-head {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 7rem;
        gap: 3rem;
        text-align: center;
    }

    .com-head::before {
        display: none;
    }

    .com-head::after {
        top: -12rem;
        right: 2rem;
        background: url(../img/point01-bgRight-sp.png) center/cover no-repeat;
        width: 17.7rem;
        height: 19.9rem;
    }

    .com-label {
        grid-column: auto;
        grid-row: auto;
        max-width: 17.55rem;
        margin-top: 0;
    }

    .com-catch {
        grid-column: auto;
        grid-row: auto;
        margin-bottom: 1rem;
        max-width: 68rem;
    }

    .com-mascot {
        grid-column: auto;
        grid-row: auto;
        max-width: 17.8rem;
    }

    .com-ttl {
        max-width: 70rem;
        font-size: 3rem;
    }

    .com-ttl01 {
        margin-bottom: 3rem;
        aspect-ratio: 1400 / 132;
        background: url(../img/point01-ttl01-sp.png) center/cover no-repeat;
    }

    .com-ttl02 {
        margin-bottom: 4.5rem;
        text-align: center;
        line-height: 1.6;
        aspect-ratio: 1398 / 300;
        background: url(../img/point01-ttl02-sp.png) center/cover no-repeat;
    }

    /* btn */
    .com-lead {
        gap: 3.5rem;
        font-size: 2.5rem;
        font-weight: 600;
    }
    .com-link {
        width: 45.4rem;
        height: 9.28rem;
        border-radius: 4.6rem;
    }
    .btn-text {
        font-size: 2.5rem;
    }
    .btn-circle {
        width: 4.7rem;
        height: 4.7rem;
    }
    .btn-arrow:before {
        -webkit-mask: url(../img/arrow.png) center / 2.3rem auto no-repeat;
        mask: url(../img/arrow.png) center / 2.3rem auto no-repeat;
    }

    /* ============================================
        point01
    ============================================ */
    .point01 {
        padding-top: 15rem;
    }

    .point01::before {
        top: -9rem;
        right: 0;
        background: url(../img/point01-bgRight02-sp.png) center/cover no-repeat;
        width: 33.55rem;
        height: 39rem;
    }

    /* typeWrite */
    .typeWrite {
        max-width: 54.125rem;
        aspect-ratio: 543.5 / 151;
        margin-bottom: 7rem;
        background: url(../img/typeWrite-bg-sp.png) center/cover no-repeat;
    }

    .typeWrite-txt {
        font-size: 3.2rem;
        line-height: 1.4;
    }

    .typeWrite-txt > i {
        display: inline-block;
        font-size: 3rem;
    }

    .typeWrite-txt-br {
        display: block;
    }

    /* future */
    .future {
        margin-inline: 2.5rem;
        margin-bottom: 15rem;
        padding: 5rem 5rem 8rem;
    }
    .future-list {
        flex-direction: column;
    }
    .future-list > li:not(:last-child)::after {
        top: auto;
        bottom: -6rem;
        right: 0;
        width: 100%;
        height: 2px;
        background: url(../img/future-list-after-sp.png) center/cover no-repeat;
    }
    .future-ttl {
        font-size: 3.856rem;
        margin-bottom: 3rem;
    }
    .future-txt {
        font-size: 3rem;
    }
    .future-img01 {
        max-width: 26.5rem;
        margin-bottom: 1.5rem;
    }
    .future-img02 {
        max-width: 26.9rem;
        margin-bottom: 2rem;
    }
    .future-img03 {
        max-width: 38.7rem;
        margin-bottom: 5rem;
    }
    .future-ttl03 {
        margin-bottom: 2rem;
    }
    .future-ttlSub {
        font-size: 2.2rem;
        margin-bottom: 3.5rem;
    }

    .future-arrow {
        margin: 7rem auto 7.7rem;
    }
    .future-job {
        flex-direction: column;
        gap: 2rem;
        background: url(../img/future-bgJob-sp.png) center/cover no-repeat;
    }
    .future-job > li {
        font-size: 3rem;
        gap: 0.5rem;
    }
    .future-job > li:not(:last-child)::before {
        width: 3rem;
        height: 3rem;
    }

    /* slider */
    .slider {
        gap: calc((100vw - 67rem) / 2);
    }
    .prevBtn {
        left: calc(50% - 36.5rem);
    }
    .nextBtn {
        right: calc(50% - 36.5rem);
    }

    .slider-tag {
        font-size: 2.5rem;
        margin-bottom: 1.5rem;
    }
    .slider-innerBox {
        padding: 6rem 6.5rem 4.5rem;
    }
    .slider-ttl {
        font-size: 3rem;
        line-height: 1.4;
    }
    .slider-txt {
        font-size: 2.5rem;
        line-height: 1.6;
    }

    /* ============================================
        point02
    ============================================ */
    .point02-head picture:has(.point02-label) {
        order: 1;
    }
    .point02-catch {
        order: 2;
        margin-left: 0;
    }
    .point02-mascot {
        order: 3;
    }
    .point02-head::after {
        background: url(../img/point02-bgRight-sp.png) center / cover no-repeat;
    }
    .point02-ttl01 {
        margin-bottom: 5rem;
        background: url(../img/point02-ttl01-sp.png) center / cover no-repeat;
    }

    /* exam */
    .exam {
        gap: 6rem;
        margin-bottom: 15rem;
        padding-inline: 2.5rem;
    }
    .exam-ttl {
        width: 52.4rem;
        font-size: 2.5rem;
    }
    .exam-txt {
        font-size: 2.5rem;
    }
    .check-list {
        flex-direction: column;
        padding: 5rem 4rem;
    }
    .check-list > li {
        justify-content: left;
    }
    .check-txt {
        font-size: 2.5rem;
        line-height: 1.4;
    }

    /* ============================================
        point03
    ============================================ */
    .point03 {
        padding-bottom: 25rem;
    }

    .table-wrap {
        display: flex;
        flex-direction: column;
        gap: 4rem;
        margin-bottom: 19rem;
        padding-inline: 2.5rem;
    }

    .table-wrap .table {
        margin-bottom: 0;
    }

    .table-wrap td.ttl {
        padding: 3rem 5rem;
        font-size: 2.5rem;
    }

    .table-wrap td.type {
        padding: 4rem 2rem;
        font-size: 2.5rem;
        border-left: 0.3rem solid var(--tableBorder);
    }

    .table-wrap td.txt {
        padding: 4rem 3rem;
        font-size: 2.5rem;
        vertical-align: text-top;
        border-left: 0.3rem solid var(--tableBorder);
        border-bottom: none;
    }

    .table-wrap span.att {
        font-size: 1.6rem;
    }

    .table-wrap td.type:first-child,
    .table-wrap td.txt:first-child {
        border-left: none;
    }
    .table-wrap tr:last-child td.txt {
        border-bottom: none;
    }
    .table-wrap td.type:last-child,
    .table-wrap td.txt:last-child {
        border-right: none;
    }

    /* ============================================
        faq
    ============================================ */
    .faq {
        padding: 15rem 2.5rem;
    }
    .faq-ttl {
        max-width: 38.5rem;
    }
    .faq-question {
        padding: 6rem 5rem;
    }
    .faq-itemOpen .faq-question {
        padding-bottom: 4rem;
    }
    .faq-question-text {
        font-size: 3rem;
    }
    .faq-question-prefix {
        font-size: 3rem;
        margin-top: 0.7rem;
        margin-bottom: auto;
    }
    .faq-answer-content {
        font-size: 2.5rem;
        line-height: 1.7;
    }
    .faq-question-icon {
        margin-left: 2rem;
    }
    .faq-answer-inner {
        padding: 0 9.1rem 6rem 9.6rem;
    }


    /* ============================================
        portal
    ============================================ */
    .portal-list {
        grid-template-columns: repeat(2, 1fr);
    }

    .portal-btn-wrap {
        flex-direction: column;
        gap: 4.8rem;
    }

    .portal-ttl {
        font-size: 3rem;
    }

    .portal-txt {
        font-size: 2rem;
    }


    /* ============================================
        footer
    ============================================ */
    .footer-inner {
        max-width: 80rem;
        padding: 15rem 2.5rem 8rem;
    }

    .footer-main {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 11rem;
        gap: 3.2rem 2.4rem;
    }

    .footer-main-link {
        font-size: 2.8rem;
    }

    .footer-sub {
        flex-direction: column;
        gap: 7.5rem;
    }

    .footer-menu {
        grid-template-columns: repeat(2, 1fr);
        gap: 4rem;
    }

    .footer-menu > li {
        position: relative;
        padding-left: 5rem;
    }

    .footer-menu > li::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        width: 2.5rem;
        height: 0.5rem;
        background-color: var(--yellow);
    }

    .footer-link {
        font-size: 2.5rem;
    }

    .footer-btn {
        gap: 2.4rem;
        height: 11rem;
        padding: 0;
        border: none;
    }

    .footer-btn > li {
        width: 100%;
    }

    .footer-btn-link {
        width: 100%;
        font-size: 2.8rem;
    }

}


/* [ 750px ] ----------------- */
@media screen and (max-width:750px) {

    html {
        font-size: calc(10 / 750 * 100vw);
    }

    /* ============================================
        fv
    ============================================ */
    .fv {
        max-height: 105rem;
        padding: 5rem 4rem;
    }
    .fv-img {
        max-width: 70rem;
    }


    .com-bg-inner::before {
        top: -13rem;
        width: calc(50rem * 0.6);
        height: calc(63.4rem * 0.6);
    }


    /* point01 */
    .slider {
        gap: 5rem;
    }

    .slider > li {
        width: 100%;
        padding-inline: 5rem;
    }
    .slider-wrap > button {
        top: 52%;
        width: 7rem;
        height: 7rem;
    }
    .slider-wrap > button::before {
        --triangle-size: 1.5rem;
    }
    .prevBtn {
        left: 1.5rem;
    }
    .nextBtn {
        right: 1.5rem;
    }

    /* point02 */
    .point02 {
        padding-top: 24rem;
    }
    .point02-bg::before {
        top: -4rem;
        right: calc(-5rem + 10vw - min(10vw, 14.4rem));
        width: calc(72.8rem * 0.6);
        height: calc(59.2rem * 0.6);
    }

    /* point03 */
    .point03 {
        padding-top: 23rem;
    }
    .point03-bg-inner::before {
        top: -3rem;
        right: calc(7rem + 10vw - min(10vw, 14.4rem));
    }


    /* ============================================
        portal
    ============================================ */
    .portal-list {
        grid-template-columns: repeat(1, 1fr);
        grid-auto-rows: calc(13.5rem + 2px);
        gap: 0;
    }

    .portal-list01 {
        margin-bottom: 0;
    }

    .portal-item {
        border-bottom: none;
    }

    .portal-list01 > li:nth-last-of-type(1),
    .portal-list02 > li:nth-last-of-type(1) {
        border-bottom: 1px solid var(--blue);
    }

    .portal-list02 > li:nth-of-type(1) {
        border-top: none;
    }

    .portal-link {
        gap: 1.2rem;
        padding-block: 2rem;
    }

    .portal-toggle {
        position: relative;
        display: block;
        margin: 11.5rem auto 0;
        padding: 0;
        width: 10rem;
        height: 10rem;
        border: none;
        border-radius: 50%;
        background-color: var(--blue);
        font: inherit;
        text-align: center;
        text-indent: -9999px;
        cursor: pointer;
        -webkit-appearance: none;
        appearance: none;
    }

    .portal-toggle::before,
    .portal-toggle::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        display: block;
        background-color: var(--white);
        border-radius: 1.6rem;
    }

    .portal-toggle::before {
        width: 4.5rem;
        height: 0.6rem;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

    .portal-toggle::after {
        width: 0.6rem;
        height: 4.5rem;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transition: -webkit-transform 0.35s ease;
        transition: transform 0.35s ease;
    }

    .portal-toggle.is-open::after {
        -webkit-transform: translate(-50%, -50%) scaleY(0);
        -ms-transform: translate(-50%, -50%) scaleY(0);
        transform: translate(-50%, -50%) scaleY(0);
    }

    .portal-listAcd {
        display: none;
    }
}