@charset "UTF-8";


/* ----------------------------------------------------------- */
/* iPad Pro (12.9-inch) | portrait & iPad | landscape*/
@media screen and (max-width: 1080px) and (orientation: portrait) {

    /* common setting */
    p {
        font-size: 1.25rem;
    }


    /* *****************************************

        SECTIO 2 | WORRY

    ***************************************** */

    .worry .title h3 {
        font-size: 3.5vmin;
    }
    .worry .title h3::after {
        bottom: -15%;
        width: 3.5vmin;
    }
    /* ***************************************** */




    /* *****************************************

        SECTION 3 | PICK UP

    ***************************************** */

    .pickup .title h3 {
        font-size: 3.5vmin;
    }
    .pickup .title h3::after {
        width: 3.5vmin;
    }
    .pickup .text h4 {
        font-size: 2vmin;
        margin: 0 0 -1% 0;
    }
    .pickup .text h2 {
        font-size: 2.5vmin;
    }
    .pickup .text h2:nth-of-type(2) {
        margin: 1rem 0 0 1rem;
    }
    /* ***************************************** */



    /* ****** ESTIMATION ****** */
    .price .est a {
        padding: 2.6vmin 7vmin;
        font-size: 1.8vmin;
        border-radius: 2.2vmin;
    }
    .price .est a::after {
        top: 3.7vmin;
        right: 5.8vmin;
        width: 1.0vmin;
        height: 1.0vmin;
    }
    /* ***************************************** */




    /* *****************************************

        SECTION 5 | FLOW

    ***************************************** */

    .flow .title h3 {
        font-size: 3.5vmin;
    }
    .flow .title h3::after {
        width: 3.5vmin;
    }

    /* FLOW FIGS */
    .flow-container {
        gap: 3vmin;
    }
    .flow-container li {
        border-top-right-radius: 2vmin;
    }
    .flow-container .num {
        width: 6vmin;
        font-size: 6vmin;
    }
    .flow-container .num p {
        font-size: 4vmin;
    }
    .flow-container h3 {
        font-size: 1.5vmin;
    }
    .flow .caption {
        font-size: 1.25vmin;
    }
    /* ***************************************** */


    /* ***************************************** */




    /* *****************************************

        SECTION 7 | CONTACT

    ***************************************** */

    .contact .app-btn {
        display: block;
        padding: 1.5vmin 9vmin;
        font-size: 1.25vmin;
    }
    /* ***************************************** */




    /* *****************************************

        FOOTER

    ***************************************** */

    footer .contents {
        padding: 1vmin 15vmin 3vmin;
    }
    footer a {
        font-size: 1.25vmin;
    }
    footer .logo {
        margin: 5vmin auto 0;
    }
    /* ***************************************** */
}
/* ----------------------------------------------------------- */


/* Smart phone(iPhone X) | Landscape */
@media (orientation: landscape) and (max-width: 926px) {

    /* common setting */
    p {
        font-size: 1.8vmax;
    }



    /* *****************************************

        SECTION 1 | TOP

    ***************************************** */

    /*  HEADER */
    header .logo {
        width: 18%;
    }
    header .open {
        width: 5vmax;
        height: 3vmax;
    }
    /* ***************************************** */


    /* *****************************************

        SECTIO 2 | WORRY

    ***************************************** */

    .worry .title h3 {
        font-size: 3.8vmax;
    }
    .worry .title h3::after {
        bottom: -15%;
        width: 3.8vmax;
    }
    /* ***************************************** */




    /* *****************************************

        SECTION 3 | PICK UP

    ***************************************** */

    .pickup .title h3 {
        font-size: 3.8vmax;
    }
    .pickup .title h3::after {
        width: 3.8vmax;
    }
    .pickup .text h4 {
        font-size: 2.2vmax;
        margin: 0 0 -1% 0;
    }
    .pickup .text h2 {
        font-size: 2.8vmax;
    }
    .pickup .text h2:nth-of-type(2) {
        margin: 1rem 0 0 1rem;
    }
    /* ***************************************** */




    /* *****************************************

        SECTION 4 | PRIC LISTS

    ***************************************** */

    .price .title h3 {
        font-size: 3.8vmax;
    }
    .price .title h3::after {
        width: 3.8vmax;
    }

    /* ****** ESTIMATION ****** */
    .price .est a {
        padding: 2.4vmax 9vmax;
        font-size: 1.7vmax;
        border-radius: 2vmax;
    }
    .price .est a::after {
        top: 3.4vmax;
        right: 7vmax;
        width: 1vmax;
        height: 1vmax;
    }
    /* ***************************************** */




    /* *****************************************

        SECTION 5 | FLOW

    ***************************************** */

    .flow .title h3 {
        font-size: 3.8vmax;
    }
    .flow .title h3::after {
        width: 3.8vmax;
    }

    /* FLOW FIGS */
    .flow-container {
        gap: 3vmax;
    }
    .flow-container li {
        border-top-right-radius: 2vmax;
    }
    .flow-container .num {
        width: 6vmax;
        font-size: 6vmax;
    }
    .flow-container .num p {
        font-size: 4vmax;
    }
    .flow-container h3 {
        font-size: 2vmax;
    }
    .flow .caption {
        font-size: 1.8vmax;
    }
    /* ***************************************** */


    /* ***************************************** */




    /* *****************************************

        SECTION 7 | CONTACT

    ***************************************** */

    .contact .app-btn {
        display: block;
        padding: 1.5vmax 9vmax;
        font-size: 1.8vmax;
    }
    /* ***************************************** */




    /* *****************************************

        FOOTER

    ***************************************** */

    footer .contents {
        padding: 1vmax 8vmax 2vmax;
    }
    footer a {
        font-size: 1.8vmax;
    }
    footer .logo {
        margin: 5vmax auto 0;
    }
    /* ***************************************** */
}


/* ----------------------------------------------------------- */
/* iPad | Portrait*/
@media (orientation: portrait) and (max-width: 834px) {
}
/* ----------------------------------------------------------- */


/* Smat Phone(iPhone 6/7/8 Plus) | Landscape */
@media (orientation: landscape) and (max-width: 736px) {



    /* *****************************************

        SECTION 4 | PRIC LISTS

    ***************************************** */

    /* ****** ESTIMATION ****** */
    .price .est a {
        padding: 2.4vmax 6vmax;
    }
    .price .est a::after {
        right: 4vmax;
    }
    /* ***************************************** */
}
/* Smat Phone(iPhone 6/7/8) | Landscape */
@media (orientation: landscape) and (max-width: 667px) {
    

    /* *****************************************

        SECTION 4 | PRIC LISTS

    ***************************************** */

    /* ****** ESTIMATION ****** */
    .price .est a {
        padding: 2.4vmax 5vmax;
    }
    .price .est a::after {
        right: 3vmax;
    }
    /* ***************************************** */

}
/* Smart phone (iPhone 5/SE) | Landscape */
@media (orientation: landscape) and (max-width: 568px) {


    /* *****************************************

        SECTION 4 | PRIC LISTS

    ***************************************** */

    /* ****** ESTIMATION ****** */
    .price .est-container .illust {
        width: 30%;
        margin: 0 10vmax 0 6vmax;
    }
    .price .est a {
        padding: 2.4vmax 5vmax;
    }
    .price .est a::after {
        top: 3.45vmax;
        right: 3vmax;
    }
    /* ***************************************** */
}


/* ----------------------------------------------------------- */

/* Smart Phone 6/7/8 Plus | Portrait */
@media (orientation: portrait) and (max-width: 560px) {

    /* common setting */
    p {
        font-size: 3.5vmin;
        letter-spacing: .2vmin;
    }

    /* -------------------- */



    /* *****************************************

        SECTION 1 | TOP

    ***************************************** */

    /*  HEADER */
    header {
        position: fixed;
        width: 100%;
        margin: 0;
        padding: 8%;
        z-index: 99;
        transition: 1s;
    }
    header .logo {
        width: 35%;
    }
    /* ***************************************** */


    /* *****************************************

        SECTIO 2 | WORRY

    ***************************************** */

    .worry .contents {
        padding: 20% 0;
    }
    .worry .title h3 {
        position: relative;
        font-size: 5.8vmin;
        letter-spacing: .5vmin;
    }
    .worry .title h3::after {
        bottom: -10%;
        width: 5.8vmin;
    }
    .worry .ex-container {
        row-gap: 10%;
        grid-template-columns: repeat(2, 1fr);
    }
    .worry .item {
        font-size: 1.25vmin;
    }
    /* ***************************************** */



    /* *****************************************

        SECTION 3 | PICK UP

    ***************************************** */

    .pickup .contents {
        padding: 20% 0;
    }
    .pickup .title h3 {
        font-size: 5.8vmin;
        letter-spacing: .5vmin;
    }
    .pickup .title h3::after {
        bottom: -10%;
        width: 5.8vmin;
    }
    .pickup .copy {
        width: 100%;
    }
    .pickup .item {
        display: block;
        margin: 0 auto 10%;
    }
    .pickup .item:nth-of-type(2) {
        display: block;
    }
    .pickup .image {
        width: 100%;
    }
    .pickup .text {
        width: 100%;
        text-align: center;
    }
    .pickup .text h4 {
        font-size: 4.5vmin;
        font-weight: 500;
    }
    .pickup .text h2 {
        margin: 5vmin auto 10vmin;
        font-size: 6vmin;
        text-align: center;
    }
    .pickup .text:nth-of-type(2) h2:nth-of-type(2) {
        margin: -6.4vmin auto 10vmin;
    }
    .pickup .text h2::after {
        left: -2vmin;
    }
    .pickup .item:nth-of-type(2) h2:nth-of-type(2)::after {
        width: 110%;
    }
    .pickup .text p {
        text-align: left;
    }
    /* ***************************************** */




    /* *****************************************

        SECTION 4 | PRIC LISTS

    ***************************************** */

    .price {
        position: relative;
    }
    .price .title h3 {
        font-size: 5.8vmin;
        letter-spacing: .5vmin;
    }
    .price .title h3::after {
        bottom: -10%;
        width: 5.8vmin;
    }


    /* ****** ESTIMATION ****** */
    .price .est-wrapper {
        margin: 0 auto;
        padding: 1% 0;
        width: 100%;
        background-color: #F7941D;
    }
    .price .est-container {
        display: block;
    }
    .price .est-container .illust {
        width: 55%;
        margin: -26vmin auto 3vmin;
    }
    .price .est {
        margin: 0 0 10vmin 0;
    }
    .price .est a {
        padding: 6vmin 14vmin;
        font-size: 4.5vmin;
        letter-spacing: .2vmin;
        border-radius: 2vmin;
    }
    .price .est a::after {
        top: 8.8vmin;
        right: 10vmin;
        width: 2.4vmin;
        height: 2.4vmin;
        border-right: solid 2px #F7941D;
        border-bottom: solid 2px #F7941D;
    }
    /* ***************************************** */




    /* *****************************************

        SECTION 5 | FLOW

    ***************************************** */

    .flow .contents {
        padding: 20% 0;
    }
    .flow .title h3 {
        font-size: 5.8vmin;
        letter-spacing: .5vmin;
    }
    .flow .title h3::after {
        bottom: -10%;
        width: 5.8vmin;
    }

    /* FLOW FIGS */
    .flow-container {
        grid-template-columns: repeat(1, 1fr);
    }
    .flow-container li {
        border-top-right-radius: 8vmin;
    }
    .flow-container .num {
        width: 14vmin;
        height: 14vmin;
        font-size: 7vmin;
    }
    .flow-container .num p {
        font-size: 12vmin;
        line-height: 120%;
    }
    .flow-container li .illust {
        width: 80%;
        margin: -8% auto 15%;
    }
    .flow-container h3 {
        font-size: 4.5vmin;
        font-weight: 500;
        letter-spacing: .2vmin;
    }
    .flow .caption {
        font-size: 3.5vmin;
        text-align: left;
        margin: 1% 0 0 5%;
        letter-spacing: .5vmin;
    }
    /* ***************************************** */





    /* *****************************************

        SECTION 7 | CONTACT

    ***************************************** */

    .contact .app-btn {
        width: 100%;
        margin: 8% auto;
        padding: 8vmin 12vmin;
        border-radius: 2vmin;
        font-size: 4.5vmin;
        letter-spacing: .1vmin;
    }
    /* ***************************************** */




    /* *****************************************

        FOOTER

    ***************************************** */

    footer .contents {
        width: 90%;
        padding: 3vmin 12vmin 6vmin;
    }
    footer ul {
        display: block;
    }
    footer a {
        font-size: 4vmin;
        line-height: 180%;
        margin: 0 auto 3vmin;
    }
    footer .logo {
        width: 30%;
        margin: 15vmin auto 0;
    }
    /* ***************************************** */
}