@media (max-width: 767px) {
    html {
        font-size: 1vw;
    }
    body {
        font-family: var(--NotoSansJP);
    }

    h2 {
        font-family: var(--Antique-Kaku_M);
    }

    .pc {
        display: none!important;
    }

    /* click */
    .click {
        background-image: url(../img/click.png);
        background-size: contain;
        background-repeat: no-repeat;
        width: 30rem;
        height: 30rem;
        position: fixed;
        top: 43rem;
        right: 5rem;
        z-index: 99;
    }

    /* MV */
    .mv-area-bg {
        background-image: url(../img/mv02sp.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: top;
        width: 100%;
        height: 78vw;
    }

    .on-area {
        top: 6vw;
        left: 0vw;
        background-color: #fff;
        padding-left: 4rem;
        padding-right: 3.5rem;
        padding-bottom: 4.5rem;
    }

    .on-area .on-area-bg {
        background-image: url(../img/mv_bg1.png);
        background-size: contain;
        background-repeat: no-repeat;
        width: 29.5rem;
        height: 59.5rem;
        left: 0;
        top: 0rem;
        z-index: 0;
    }

    .on-area .on-area-oblique {
        border-bottom: solid 1px #efb400;
        transform: rotate(-5deg);
        margin-top: 1.5rem;
    }

    .on-area .on-area-oblique h2{
        font-size: 4.3rem;
        color: #efb400;
    }

    .on-area .on-area-oblique h2 .big{
        font-size: 4.8rem;
    }

    .on-area .on-area-main{
        margin-top: 19vw;
        z-index: 1;
    }

    .on-area .on-area-main h1{
        font-size: 5rem;
        color: var(--PointColor);
        line-height: 7.5rem;
        font-family: var(--NotoSansJPBold);
    }

    .on-area .on-area-main h1 .big{
        font-size: 6rem;
    }

    .on-area .on-area-main h1 .huge{
        font-size: 6.5rem;
    }

    .on-area .on-area-main h1 .marker {
        background-image: linear-gradient(transparent 82%, #cee3fe 82%);
        background-position-y: -0.4rem;
    }

    .on-area .on-area-main h2{
        font-size: 3.0rem;
        color: var(--PointColor);
        line-height: 3.5rem;
        font-family: var(--NotoSansJPBold);
    }

    .on-area-main-desc{
        width: 85%;
        margin: 4rem auto;
        font-size: 3.5rem;
        color: #363636;
    }

    .on-area-btn{
        background-color: #ffb500;
        color: #fff;
        border-radius: 9rem;
        padding: 1.5rem 0rem 3.5rem;
        font-size: 4.5rem;
        line-height: 6rem;
        width: 80%;
        margin: 2rem auto;
    }

    .on-area-btn a{
        color: #fff;
    }

    .on-area-btn .big{
        font-size: 7rem;
    }

    .on-area-btn .huge{
        font-size: 7rem;
    }

    .on-area-btn .clock-icon{
        background-image: url(../img/mark_clock.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        width: 4.5rem;
        height: 4.5rem;
        top: 2rem;
        left: 6rem;
    }

    .on-area-btn .sec-top {
        margin-left: 12rem;
        font-size: 3.7rem;
    }

    .on-area-btn .sec-bottom {
        margin-left: 5rem;
    }

    .on-area-btn .right-arrow-icon {
        background-image: url(../img/mark_right_arrow.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        width: 9.8rem;
        height: 9.8rem;
        top: 9rem;
        right: 1.3rem;
        transition: .5s;
    }

    .on-area-btn:hover .right-arrow-icon {
        right: 1rem;
    }

    /* three-sec */
    .three-sec {
        width: 90%;
        margin: 5.5rem auto;
    }

    .three-sec .ttl h2 {
        font-size: 4.5rem;
        font-family: var(--NotoSansJPBold);
        color: var(--PointColor);
    }

    .three-sec .ttl h2 .big{
        font-size: 5rem;
    }

    .three-sec .ttl h2 .huge{
        font-size: 11rem;
        margin: 0 1rem;
    }

    .three-sec .ttl h2 .marker{
        background-image: linear-gradient(transparent 65%, #efb400 65%);
    }

    .three-sec .three-row.row1 {
        margin: 10rem auto 5vw;
    }

    .three-sec .three-row {
        width: 80%;
        margin: 3rem auto;
    }

    .three-sec .three-row .col1,
    .three-sec .three-row .col2,
    .three-sec .three-row .col3 {
        width: 33rem;
        height: 33rem;
        border-radius: 16.5rem;
        background-color: var(--PointColor);
        color: #fff;
        font-size: 3rem;
    }

    .three-sec .three-row .col1 .icon1{
        background-image: url(../img/mark01.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        width: 8rem;
        height: 8rem;
        top: 3rem;
        right: 12.5rem;
    }

    .three-sec .three-row .col1 .desc {
        margin-top: 12.5rem;
    }

    .three-sec .three-row .col2 .icon2{
        background-image: url(../img/mark02.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        width: 8rem;
        height: 8rem;
        top: 3.5rem;
        right: 12.5rem;
    }

    .three-sec .three-row .col2 .desc {
        margin-top: 14.25rem;
    }

    .three-sec .three-row .col3 .icon3{
        background-image: url(../img/mark03.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        width: 9rem;
        height: 9rem;
        top: 4.5rem;
        right: 11.5rem;
    }

    .three-sec .three-row .col3 .desc {
        margin-top: 16.25rem;
    }

    /* x-job-sec */
    .x-job-sec .x-job-bg {
        background-image: url(../img/x-job-bgsp.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        width: 100%;
        height: 84rem;
    }

    .x-job-sec .x-job-bg .on-text1 {
        top: 28rem;
        left: 4rem;
    }

    .x-job-sec .x-job-bg .on-text1 h3{
        color: var(--PointColor);
        font-size: 3.25rem;
        line-height: 4.5rem;
    }

    .x-job-sec .x-job-bg .on-text2 {
        top: 47rem;
        left: 4.5rem;
        letter-spacing: -0.2rem;
    }

    .x-job-sec .x-job-bg .on-text2 h2{
        color: var(--PointColor);
        font-size: 16rem;
        font-family: var(--NotoSansJPBold);
    }

    .x-job-sec .x-job-bg .on-text3 {
        top: 64rem;
        left: 5.5rem;
    }

    .x-job-sec .x-job-bg .on-text3 h2{
        color: var(--PointColor);
        font-size: 3.5rem;
        font-family: var(--NotoSansJPBold);
    }

    /* four-sec */
    .four-sec-bg {
        background-image: url(../img/page-bg.png);
        background-size: cover;
        width: 100%;
        padding: 4rem 0 10rem;
    }

    .four-sec .bg-col {
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        width: 100%;
        height: 63rem;
    }

    .four-sec .bg-col.bg1 {
        background-image: url(../img/sec4-1.png);
    }

    .four-sec .bg-col.bg2 {
        background-image: url(../img/sec4-2.png);
    }

    .four-sec .bg-col.bg3 {
        background-image: url(../img/sec4-3.png);
    }

    .four-sec .bg-col.bg4 {
        background-image: url(../img/sec4-4.png);
    }

    .four-sec .four-sec-row1,
    .four-sec .four-sec-row2 {
        width: 90%;
        margin: auto;
        padding: 6rem;
        background-color: #fff;
        margin-bottom: 3.5rem;
        box-shadow: 2px 5px 2px #eee;
    }

    .four-sec .four-sec-row1 h2,
    .four-sec .four-sec-row2 h2 {
        font-family: var(--NotoSansJPBold);
        font-size: 5.2rem;
        background-image: linear-gradient(transparent 75%, #ffb500 75%);
        display: inline-block;
        color: var(--PointColor);
    }

    .four-sec .four-sec-row1 .desc-col{
        width: 100%;
        margin-top: 4rem;
    }

    .four-sec .four-sec-row2 .desc-col{
        width: 100%;
        margin-top: 4rem;
    }

    .four-sec .four-sec-row1 p{
        font-size: 3.6rem;
        margin-top: 2.5rem;
        line-height: 6rem;
    }

    .four-sec .four-sec-row2 p{
        font-size: 3.5rem;
        margin-top: 2.5rem;
        line-height: 6rem;
    }

    /* five-sec */
    .five-sec-bg {
        background-image: url(../img/sec5-bgsp.png);
        background-repeat: no-repeat;
        background-size: contain;
        width: 100%;
        height: 32.3rem;
    }

    .five-sec-bg .on-text {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        width: 100%;
        text-align: center;
    }

    .five-sec-bg .on-text h2 {
        color: #fff;
        text-shadow: 2px 2px 2px #78c9ff;
        font-size: 3.8rem;
        font-family: var(--NotoSansJP);
    }

    .five-sec-bg .on-text h2 .big{
        font-size: 5rem;
    }

    /* six-sec */
    .six-sec .three-row {
        width: 90%;
        margin: 6rem auto;
    }

    .six-sec .three-row .col1,
    .six-sec .three-row .col2,
    .six-sec .three-row .col3 {
        background-color: #ecf5fe;
        padding: 2rem 6.5rem 8rem;
        margin-bottom: 7.5rem;
    }

    .six-sec .three-row .col1 .icon1 {
        background-image: url(../img/sec6-1.jpg);
        background-repeat: no-repeat;
        background-size: contain;
        height: 55rem;
        margin: 3rem auto;
        width: 100%;
    }

    .six-sec .three-row .col2 .icon2 {
        background-image: url(../img/sec6-2.jpg);
        background-repeat: no-repeat;
        background-size: contain;
        height: 55rem;
        margin: 3rem auto;
        width: 100%;
    }

    .six-sec .three-row .col3 .icon3 {
        background-image: url(../img/sec6-3.png);
        background-repeat: no-repeat;
        background-size: contain;
        height: 55rem;
        margin: 3rem auto;
        width: 100%;
    }

    .six-sec .three-row .desc {
        border-top: solid 4px #00a2fe;
        line-height: 7.5rem;
        font-size: 3.6rem;
        padding-top: 2.5rem;      
    }

    .six-sec .three-row .title {
        font-size: 3.6rem;
        margin: 3rem auto;
    }

    /* seven-sec */

    .seven-sec-bg {
        background-image: url(../img/page-bg.png);
        background-size: cover;
        width: 100%;
        padding: 8rem 0;
    }

    .seven-sec .ttl h2{
        color: var(--PointColor);
        font-size: 5.5rem;
        width: 80%;
        margin: auto;
        border-bottom: solid 2px var(--PointColor);
        font-family: var(--NotoSansJPBold);
        padding-bottom: 1.75rem;
    }

    .seven-sec .ttl p{
        font-size: 4rem;
        margin-top: 0.5rem;
        color: var(--PointColor);
        font-family: var(--Inter);
    }

    .seven-sec .three-row {
        width: 85%;
        margin: 5rem auto 0;
    }

    .seven-sec .three-row.row2 {
        margin: 3rem auto 0;
    }

    .seven-sec .three-row .col1,
    .seven-sec .three-row .col2,
    .seven-sec .three-row .col3 {
        background-color: #fff;
        border: solid 1px #eee;
        box-shadow: 0px 5px 2px #eee;
        padding: 5rem;
        width: 100%;
        margin-bottom: 5rem;
    }

    .seven-sec .three-row .bg-col{
        background-repeat: no-repeat;
        background-size: contain;
        height: 34rem;
        width: 65%;
        margin: auto;
    }

    .seven-sec .three-row .bg-col.bg1 {
        background-image: url(../img/sec7-1-new.png);
    }

    .seven-sec .three-row .bg-col.bg2 {
        background-image: url(../img/sec7-2-new.png);
    }

    .seven-sec .three-row .bg-col.bg3 {
        background-image: url(../img/sec7-3-new.png);
    }

    .seven-sec .three-row .bg-col.bg4 {
        background-image: url(../img/sec7-4.png);
    }

    .seven-sec .three-row .bg-col.bg5 {
        background-image: url(../img/sec7-5.png);
    }

    .seven-sec .three-row .bg-col.bg6 {
        background-image: url(../img/sec7-6.png);
    }

    .seven-sec .three-row h2{
        font-size: 3.3rem;
        color: var(--PointColor);
        line-height: 4.5rem;
        margin: 1rem 0 4rem;
        font-family: var(--NotoSansJPBold);
    }

    .seven-sec .three-row h3{
        font-size: 4rem;
        border-top: solid 1px var(--PointColor);
        border-bottom: solid 1px var(--PointColor);
        padding: 1.5rem 2rem;
    }

    .seven-sec .three-row .desc {
        font-size: 3.75rem;
    }

    .seven-sec .three-row .desc .month{
        background-color: #ebe9e9;
        margin-top: 2rem;
        padding: 0.25rem 2.5rem;
    }

    .seven-sec .three-row .desc .fee{
        background-color: #f7f5f5;
        margin: 2rem 0;
        padding: 0.25rem 2.5rem;
    }

    .seven-sec .three-row.row2 h2{
        min-height: 5rem;
    }

    /* eight-sec */
    .eight-sec {
        padding: 8rem 0;
    }

    .eight-sec .vertical-line{
        border-right: solid 1px #efb400;
        height: 75%;
        right: 50%;
        top: 10.8%;
        z-index: -1;
    }

    .eight-sec .ttl {
        margin-bottom: 4rem;
    }
    
    .eight-sec .ttl h2{
        color: var(--PointColor);
        font-size: 5.5rem;
        width: 85%;
        margin: auto;
        border-bottom: solid 2px var(--PointColor);
        font-family: var(--NotoSansJPBold);
        padding-bottom: 1.75rem;
    }

    .eight-sec .ttl p{
        font-size: 4rem;
        margin-top: 0.5rem;
        color: var(--PointColor);
        font-family: var(--Inter);
    }

    .eight-sec-row {
        width: 90%;
        margin: 2.5rem auto;
        background-color: #f9f9f9;
        padding: 4rem 1.5rem 4rem 5rem;
    }

    .eight-sec-step-row {
        width: 20%;
        margin: 10rem auto 2.5rem;
    }

    .eight-sec-row .desc-col{
        width: 55rem;
    }

    .eight-sec-row .img-col{
        width: 35rem;
    }

    .eight-sec-row .img-col .eight-row-bg{
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        height: 21rem;
        margin-left: 3rem;
    }

    .eight-sec-row .img-col .eight-row-bg.bg1{
        background-image: url(../img/sec8-1.png);
    }

    .eight-sec-row .img-col .eight-row-bg.bg2{
        background-image: url(../img/sec8-2.png);
    }

    .eight-sec-row .img-col .eight-row-bg.bg3{
        background-image: url(../img/sec8-3.png);
    }

    .eight-sec-row .img-col .eight-row-bg.bg4{
        background-image: url(../img/sec8-4.png);
    }

    .eight-sec-row .img-col .eight-row-bg.bg5{
        background-image: url(../img/sec8-5.png);
    }

    .eight-sec-row .img-col .eight-row-bg.bg6{
        background-image: url(../img/sec8-6.png);
    }

    .eight-sec-step-row .step-col .step {
        width: 20rem;
        height: 20rem;
        background-color: #ffb500;
        border-radius: 10rem;
        font-family: var(--NotoSansJP);
        color: #fff;
        margin: auto;
    }

    .eight-sec-step-row .step-col .step .s{
        left: 4.5rem;
        top: 3rem;
        font-size: 4.5rem;
    }

    .eight-sec-step-row .step-col .step .n{
        left: 7rem;
        top: 6rem;
        font-size: 9rem;
        font-family: var(--SchibstedGrotesk);
    }

    .eight-sec-step-row .step-col .step .n.n1{
        left: 8rem;
    }

    .eight-sec-row .desc-col h2 {
        font-size: 4.8rem;
        color: var(--PointColor);
        font-family: var(--NotoSansJPBold);
        margin-bottom: 1rem;
    }

    .eight-sec-row .desc-col p{
        font-size: 3.6rem;
        line-height: 5.5rem;
    }

    /* nine-sec */

    .nine-sec-bg {
        background-image: url(../img/page-bg.png);
        background-size: cover;
        width: 100%;
        padding: 8rem 0;
    }

    .nine-sec .ttl {
        margin-bottom: 4rem;
    }
    
    .nine-sec .ttl h2{
        color: var(--PointColor);
        font-size: 5.5rem;
        width: 80%;
        margin: auto;
        border-bottom: solid 2px var(--PointColor);
        font-family: var(--NotoSansJPBold);
        padding-bottom: 1.75rem;
    }

    .nine-sec .ttl p{
        font-size: 4rem;
        margin-top: 0.5rem;
        color: var(--PointColor);
        font-family: var(--Inter);
    }

    .nine-sec .faq-row {
        width: 80%;
        margin: 5rem auto 0;
    }

    .nine-sec .faq-question-row {
        background-color: #00356d;
        padding: 2rem 2rem 2rem 0;
    }

    .nine-sec .faq-question-row .question{
        color: #efb400;
        border-right: solid 1px #fff;
        width: 15rem;
    }

    .nine-sec .faq-question-row .question p{
        font-size: 5.5rem;
        line-height: 5rem;
        font-family: var(--Inter);
    }

    .nine-sec .faq-question-row .question-ttl {
        margin-left: 3rem;
        width: 85rem;
    }

    .nine-sec .faq-question-row .question-ttl h3{
        font-size: 3.5rem;
        color: #fff;
        line-height: 5rem;
    }

    .nine-sec .faq-answer-row {
        background-color: #fff;
        padding: 2rem 2rem 2rem 0;
    }

    .nine-sec .faq-answer-row .answer{
        color: var(--PointColor);
        border-right: solid 1px #f1f1f1;
        width: 15rem;
    }

    .nine-sec .faq-answer-row .answer p{
        font-size: 5.5rem;
        line-height: 5rem;
        font-family: var(--Inter);
    }

    .nine-sec .faq-answer-row .answer-content {
        margin-left: 3rem;
        width: 85rem;
    }

    .nine-sec .faq-answer-row .answer-content p{
        font-size: 3.5rem;
        line-height: 5rem;
    }

    /* ten-sec */
    .ten-sec-bg {
        background-image: url(../img/sec10-bgsp.png);
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        width: 100%;
        height: 251rem;
    }

    .ten-sec .ttl{
        padding: 15rem 0 5rem;
        margin-left: 10rem;
    }

    .ten-sec .ttl .ttl1 h2{
        font-family: var(--NotoSansJP);
        color: #fff;
        font-size: 3.5rem;
    }

    .ten-sec .ttl .ttl2 {
        margin-left: -2rem;
    }

    .ten-sec .ttl .ttl2 h2{
        font-family: var(--NotoSansJPBold);
        color: #fff;
        font-size: 7rem;
        z-index: 1;
    }

    .ten-sec .ttl .ttl2 h2 .big{
        font-size: 9rem;
    }

    .ten-sec .ttl .ttl2 .marker {
        background-image: linear-gradient(transparent 75%, var(--PointColor) 75%);
        width: 46.5rem;
        height: 9rem;
        left: 6rem;
        top: 2.8rem;
        z-index: 0;
    }

    .ten-sec .ten-content-row {
        width: 80%;
        margin: auto;
        background-color: #ffffffa6;
    }

    .ten-sec .ten-content-row .content{
        padding: 4rem;
    }

    .ten-sec .ten-content-row .content p{
        font-size: 3.7rem;
        line-height: 7.5rem;
    }

    .ten-sec .ten-content-bg{
        background-image: url(../img/sec10-1.png);
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        width: 80rem;
        height: 64rem;
        margin-left: 10rem;
        margin-top: 5rem;
    }

    /* contact-sec */
    .contact-sec-bg {
        background-image: url(../img/page-bg.png);
        background-size: cover;
        width: 100%;
        padding: 10rem 0 0;
    }

    .contact-sec .ttl {
        margin-bottom: 4rem;
    }
    
    .contact-sec .ttl h2{
        color: var(--PointColor);
        font-size: 5.25rem;
        width: 80%;
        margin: auto;
        border-bottom: solid 2px var(--PointColor);
        font-family: var(--NotoSansJPBold);
        padding-bottom: 1.75rem;
    }

    .contact-sec .ttl p{
        font-size: 4rem;
        margin-top: 0.5rem;
        color: var(--PointColor);
        font-family: var(--Inter);
    }

    .contact-sec .contact-main{
        width: 85%;
        margin: auto;
    }

    .contact-sec .contact-main .bg-white{
        padding: 1rem 0;
        border-radius: 0.25rem;
    }

    .contact-sec .contact-main .contact-row2{
        width: 95%;
        margin: 1.5rem auto 0;
    }

    .contact-sec .contact-main .ttl-col {
        font-size: 3.5rem;
    }

    .contact-sec .contact-main .ttl-col .req{
        color: #89bafc;
    }

    .contact-sec .contact-main .input-col {
        margin: 1rem 0 5rem;
    }

    .contact-sec .contact-main .input-col input:not([type=checkbox]) {
        width: 100%;
        padding: 2rem;
    }

    .contact-sec .contact-main .input-col input,
    .contact-sec .contact-main .input-col p {
        font-size: 3.5rem;
    }

    .contact-sec .contact-main .privacypolicy {
        padding: 1rem;
    }

    .contact-sec .contact-main .privacypolicy h3{
        font-size: 3.5rem;
    }

    .contact-sec .contact-main .privacypolicy .p-content{
        height: 40rem;
        overflow: scroll;
        border: solid 1px #333;
        margin-top: 3.5rem;
        padding: 3rem;
        border-radius: 0.5rem;
    }

    .contact-sec .contact-main .privacypolicy .p-content h2{
        font-size: 3.5rem;
        margin: 2.5rem 0;
        font-family: var(--NotoSansJP);
    }

    .contact-sec .contact-main .privacypolicy .p-content p{
        font-size: 2.8rem;
        line-height: 4rem;
    }

    .contact-sec .contact-main .privacypolicy-checkbox, 
    .contact-sec .contact-main .privacypolicy-checkbox + span{
        vertical-align: middle;
        font-size: 3.5rem;
    }

    .contact-sec .contact-main .button-area{
        width: 100%;
    }

    .contact-sec .contact-main .submit-button{
        width: 100%;
        background-color: #ffb500;
        border: solid 1px #ffb500;
        padding: 4rem 0;
        color: #fff;
        border-radius: 7rem;
        font-size: 6rem;
        margin-top: 3rem;
        font-family: var(--NotoSansJPBold);
    }

    .contact-sec .contact-main .submit-bg{
        background-image: url(../img/mark_right_arrow.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        width: 8rem;
        height: 8rem;
        top: 6rem;
        right: 3.5rem;
        transition: .5s;
    }

    .contact-sec .contact-main .button-area:hover .submit-bg{
        right: 2.5rem;
    }

    .wpcf7-response-output {
        font-size: 2.8rem;
    }

    .copyright{
        margin-top: 10rem;
        font-size: 2rem;
        color: #b0b0b0;
        padding-bottom: 2rem;
    }

    /* thanks */

    .thanks-bg{
        background-image: url(../img/page-bg.png);
        background-size: cover;
        width: 100%;
        height: 100vh;
    }

    .thanks-container {
        padding: 30rem 0;
        width: 80%;
        margin: auto;
    }

    .thanks-container h2{
        font-family: var(--NotoSansJP);
        color: var(--PointColor);
        font-size: 6rem;
        margin-bottom: 10rem;
        line-height: 10rem;
    }

    .thanks-container p{
        font-size: 4rem;
        line-height: 7rem;
        letter-spacing: 0.1rem;
    }
}