@charset "UTF-8";

/* Pad Pro (12.9-inch) | Landscape */
@media screen and (max-width: 1368px)
                    and (orientation: landscape) {
    /* responsive control */
    .pc {
        display: none;
    }
    .tab-portrait {
        display: none;
    }
    .tab-landscape {
        display: block;
    }
    .sp-portrait {
        display: none;
    }
    .sp-landscape {
        display: none;
    }
    /* ------------------- */

    
}

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

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

    /* reponsive control */
    .pc {
        display: none;
    }
    .tab-portrait {
        display: block;
    }
    .tab-landscape {
        display: none;
    }
    .sp-portrait {
        display: none;
    }
    .sp-landscape {
        display: none;
    }
    /* ------------------- */


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

        SECTION 1 | TOP

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

    .top .sub-copy h2 {
        font-size: 2vmin;
    }
    .top .copy h1 {
        font-size: 5.4vmin;
    }
    .top .copy .orange {
        font-size: 5.6vmin;
    }
    .top .copy h1 span {
        font-size: 4.5vmin;
    }
    .top .est a {
        padding: 2.6vmin 8vmin;
        font-size: 1.8vmin;
        border-radius: 2.2vmin;
    }
    .top .est a::after {
        top: 3.6vmin;
        right: 5.8vmin;
        width: 1.0vmin;
        height: 1.0vmin;
    }
    /* ***************************************** */




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

        SECTION | COUPON

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

    .coupon .title h2 {
        font-size: 1.5rem;
    }
    .coupon h1:nth-of-type(1) {
        font-size: 16vmax;
    }
    .coupon h1:nth-of-type(2) {
        font-size: 4.5vmax;
        margin: 0 0 2.2vmax 0;
    }
    .coupon .term h2 {
        font-size: 1.5rem;
    }
    /* ***************************************** */




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

        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;
    }
    /* ***************************************** */




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

        SECTION 4 | PRIC LISTS

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

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

    /* PRICE LISTS */
    .price .icon {
        top: -5vmin;
    }
    /* FONT SETTING */
    .list-container .type {
        font-size: 1.25rem;
    }
    .list-container .item {
        font-size: 1rem;
    }
    .list-container .price-num {
        font-size: 1.5rem;
    }
    .list-container .box-15 span:nth-of-type(1) {
        font-size: .8vmin;
        vertical-align: 0rem;
    }
    .list-container .box-15 span:nth-of-type(2),
    .list-container .box-15 span:nth-of-type(4) {
        font-size: 1.25vmin;
        vertical-align: -.1vmin;
    }
    .list-container .box-15 span:nth-of-type(3) {
        font-size: 1.25vmin;
    }
    /* BACKGOUNRD COLOUR */
    /* LINES */
    /* GRID SETTING */
    .list-container .line-1st,
    .list-container .line-2nd {
        padding: 2vmin 0;
    }
    .list-container .line-3rd,
    .list-container .line-common {
        padding: 1.5vmin 0;
    }
    .list-container .line-4th {
        padding: 5vmin 0 2vmin;
    }
    .list-container .box-15 {
        padding: 9vmin 0 0;
    }
    /* OPTION LIST */
    .list-container .box-16,
    .list-container .box-18,
    .list-container .box-20,
    .list-container .box-22,
    .list-container .box-24 {
        padding-left: 3vmin;
    }

    /* ****** 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 6 | Q & A

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

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

    /* Q & A */
    .question-area {
        border-radius: 1vmin;
    }
    .question-area .arrow-box {
        width: 2vmin;
        height: 2vmin;
    }
    .qa-container .question-text p {
        font-size: 1.5vmin;
    }
    .qa-container .question-text span {
        font-size: 2vmin;
    }
    .qa-container .answer-area {
        border-radius: 1vmin;
    }
    .qa-container .answer-text span {
        font-size: 2vmin;
    }
    .qa-container .answer-text p {
        vertical-align: 15vmin
    }
    /* ***************************************** */




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

        SECTION 7 | CONTACT

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

    .contact .title h3 {
        font-size: 3.5vmin;
    }
    .contact .title h3::after {
        width: 3.5vmin;
    }
    .contact .form-container {
        row-gap: 2vmin;
    }
    .contact .form-title {
        font-size: 1.25vmin;
    }
    .contact .form-required::before {
        top: .8vmin;
        padding: .3vmin .8vmin;
        font-size: 1vmin;
    }
    .contact .form-text {
        font-size: 1.25vmin;
    }
    .contact .form-text::-webkit-input-placeholder {
        padding: 1% 0 0 2%;
        font-size: 1.25vmin;
    }
    .contact .message {
        height: 30vmin;
    }
    .contact .form-box-7 {
        font-size: 1.25vmin;
    }

    .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;
    }

    /* responsive control */
    .pc {
        display: none;
    }
    .tab-portrait {
        display: none;
    }
    .tab-landscape {
        display: none;
    }
    .sp-portrait {
        display: none;
    }
    .sp-landscape {
        display: block;
    }
    /* ------------------- */




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

        SECTION 1 | TOP

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

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




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

        SECTION | COUPON

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

    .coupon .title h2 {
        font-size: 2vmax;
    }
    .coupon .term h2 {
        font-size: 2vmax;
    }
    /* ***************************************** */




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

        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;
    }

    /* PRICE LISTS */
    .price .icon {
        top: -5vmax;
    }
    /* FONT SETTING */
    .list-container .type {
        font-size: 1.8vmax;
    }
    .list-container .item {
        font-size: 1.5vmax
    }
    .list-container .price-num {
        font-size: 2vmax;
    }
    .list-container .box-15 span:nth-of-type(1) {
        font-size: .8vmax;
        vertical-align: 0rem;
    }
    .list-container .box-15 span:nth-of-type(2),
    .list-container .box-15 span:nth-of-type(4) {
        font-size: 1.25vmax;
        vertical-align: -.1vmin;
    }
    .list-container .box-15 span:nth-of-type(3) {
        font-size: 1.25vmax;
    }
    /* BACKGOUNRD COLOUR */
    /* LINES */
    /* GRID SETTING */
    .list-container .line-1st,
    .list-container .line-2nd {
        padding: 2vmax 0;
    }
    .list-container .line-3rd,
    .list-container .line-common {
        padding: 1.5vmax 0;
    }
    .list-container .line-4th {
        padding: 5vmax 0 2vmax;
    }
    .list-container .box-15 {
        padding: 9vmax 0 0;
    }
    /* OPTION LIST */
    .list-container .box-16,
    .list-container .box-18,
    .list-container .box-20,
    .list-container .box-22,
    .list-container .box-24 {
        padding-left: 3vmax;
    }

    /* ****** 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 6 | Q & A

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

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

    /* Q & A */
    .question-area {
        border-radius: 1vmax;
    }
    .question-area .arrow-box {
        width: 2vmax;
        height: 2vmax;
    }
    .qa-container .question-text p {
        font-size: 2vmax;
    }
    .qa-container .question-text span {
        font-size: 2.5vmax;
    }
    .qa-container .answer-area {
        border-radius: 1vmax;
    }
    .qa-container .answer-text span {
        font-size: 2.5vmax;
    }
    .qa-container .answer-text p {
        vertical-align: 15vmax
    }
    /* ***************************************** */




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

        SECTION 7 | CONTACT

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

    .contact .title h3 {
        font-size: 3.5vmax;
    }
    .contact .title h3::after {
        width: 3.5vmax;
    }
    .contact .form-container {
        row-gap: 2vmax;
    }
    .contact .form-container {
        column-gap: 2%;
    }
    .contact .form-title {
        font-size: 1.8vmax;
    }
    .contact .form-required::before {
        top: 1.5vmax;
        padding: .3vmax .8vmax;
        font-size: 1vmax;
    }
    .contact .form-text {
        font-size: 1.8vmax;
    }
    .contact .form-text::-webkit-input-placeholder {
        font-size: 1.6vmax;
    }
    .contact .message {
        height: 30vmax;
    }
    .contact .form-box-7 {
        font-size: 1.8vmax;
    }

    .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) {
}
/* ----------------------------------------------------------- */


/* Smart Phone(iPhone X) | Landscape  */
@media (orientation: Landscape) and (max-width: 812px) {
}
/* Smat Phone(iPhone 6/7/8 Plus) | Landscape */
@media (orientation: landscape) and (max-width: 736px) {
    /* responsive control */
    .pc {
        display: none;
    }
    .tab-portrait {
        display: none;
    }
    .tab-landscape {
        display: none;
    }
    .sp-portrait {
        display: none;
    }
    .sp-landscape {
        display: block;
    }
    /* -------------------------------- */



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

        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) {
    /* responsive control */
    .pc {
        display: none;
    }
    .tab-portrait {
        display: none;
    }
    .tab-landscape {
        display: none;
    }
    .sp-portrait {
        display: none;
    }
    .sp-landscape {
        display: block;
    }
    /* ------------------- */


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

        SECTION 4 | PRIC LISTS

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

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



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

        SECTION 7 | CONTACT

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

    .contact .form-container {
        column-gap: 2%;
        grid-template-columns: 1.5fr 3fr;
    }
    /* ***************************************** */
}
/* Smart phone (iPhone 5/SE) | Landscape */
@media (orientation: landscape) and (max-width: 568px) {
    /* responsive control */
    .pc {
        display: none;
    }
    .tab-portrait {
        display: none;
    }
    .tab-landscape {
        display: none;
    }
    .sp-portrait {
        display: none;
    }
    .sp-landscape {
        display: block;
    }
    /* ------------------- */



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

        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;
    }
    /* ***************************************** */


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

        SECTION 7 | CONTACT

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

    .contact .form-container {
        column-gap: 2%;
        grid-template-columns: 1.5fr 3fr;
    }
    /* ***************************************** */
}


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

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

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

    /* responsive control */
    .pc {
        display: none;
    }
    .tab-portrait {
        display: none;
    }
    .tab-landscape {
        display: none;
    }
    .sp-portrait {
        display: block;
    }
    .sp-landscape {
        display: none;
    }
    .common {
        display: none;
    }
    /* -------------------- */



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

        SECTION 1 | TOP

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

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

    .top .sub-copy {
        width: 100%;
        top: 18%;
        left: 50%;
        transform: translateX(-50%);
    }
    .top .sub-copy h2 {
        font-size: 3vmin;
    }
    .top .copy {
        position: absolute;
        top: 22%;
    }
    .top .copy h1 {
        font-size: 13.5vmin;
        /* font-weight: 00; */
        line-height: 120%;
        letter-spacing: .9vmin;
    }
    .top .copy .orange {
        font-size: 15.5vmin;
        line-height: 120%;
    }
    .top .copy h1 span {
        font-size: 7.5vmin;
        line-height: 120%;
    }
    .top picture {
        width: 50%;
        margin: 68% 0 0;
    }
    .top .est {
        top: 83%;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
    }
    .top .est a {
        padding: 6vmin 14vmin;
        font-size: 4.5vmin;
        letter-spacing: .2vmin;
        border-radius: 2vmin;
    }
    .top .est a::after {
        top: 8.8vmin;
        right: 10vmin;
        width: 2.4vmin;
        height: 2.4vmin;
        border-right: solid 2px #fff;
        border-bottom: solid 2px #fff;
    }
    .top .bg {
        width: 48%;
        float: left;
        margin: 50% 0 0 0;
    }
    /* ***************************************** */




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

        SECTION | COUPON

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

    .coupon .title {
        border: solid 1px #FC4E12;
    }
    .coupon .title h2 {
        font-size: 3.2vmin;
    }
    .coupon h1:nth-of-type(1) {
        font-size: 21vmin;
        letter-spacing: -2vmin;
    }
    .coupon h1:nth-of-type(2) {
        font-size: 6.0vmin;
        margin: 0 0 3vmin 0;
    }
    .coupon .term h2 {
        font-size: 3.2vmin;
    }
    .coupon .text {
        text-align: left;
    }
    /* ***************************************** */



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

        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;
    }

    /* PRICE LISTS */
    .price .icon {
        top: 16vmin;
        left: 7%;
        width: 14%;
        z-index: 10;
    }
    .list-container {
        position: relative;
        width: 100%;
        margin: 0 0 2vmin;
        padding: 0;
        display: grid;
        gap: 0;
        grid-template-columns: repeat(3, 30%) 50%;
        border: solid .3px #C1C1C1;
        text-align: center;
        overflow: scroll;
    }
    .option-container {
        position: relative;
        width: 100%;
        margin: 0 0 27vmin;
        padding: 0;
        display: grid;
        gap: 0;
        grid-template-columns: 1.8fr 1fr;
        border: solid .3px #C1C1C1;
        text-align: center;
    }
    /* FONT SETTING */
    .list-container .type {
        font-size: 4vmin;
        line-height: 150%;
        font-weight: 500;
    }
    .list-container .type span {
        font-size: 3vmin;
        font-weight: 400;
    }
    .list-container .item {
        font-size: 3vmin;
        font-weight: 300;
    }
    .list-container .price-num {
        font-family: 'Roboto', sans-serif;
        font-size: 4vmin;
        font-weight: 700;
        color: #F7941D;
    }
    .list-container .price-num span {
        font-size: 2vmin;
    }
    .list-container .price-num .name-plan {
        font-size: 2.4vmin;
        color: #000;
    }
    .price .sub-title {
        width: 100%;
        margin: 10vmin auto 2vmin;
        text-align: center;
        /* font-weight: 500; */
    }
    .price .sub-title h3 {
        line-height: 300%;
        font-weight: 500;
    }
    .price .sub-title span {
        color: #FC4E12;
        line-height: 0%;
    }
    .price .sub-title span:nth-of-type(1) {
        font-size: 3vmin;
        vertical-align: -1vmin;
    }
    .price .sub-title span:nth-of-type(2),
    .price .sub-title span:nth-of-type(4) {
        font-family: 'hiragino', sans-serif;
        font-size: 5.5vmin;
        font-weight: normal;
        vertical-align: -.1vmin;
    }
    .price .sub-title span:nth-of-type(3) {
        font-size: 5vmin;
    }
    .list-container .box-8 span {
        color: #7B7B7B;
    }
    /* BACKGOUNRD COLOUR */
    .list-container .box-16 {
        background-color: #FFF3E2;
    }
    .list-container .box-5,
    .list-container .box-6,
    .list-container .box-7,
    .list-container .box-8,
    .list-container .box-15 {
        background-color: #fff;
    }
    /* GRID SETTING */
    .list-container .line-1st {
        padding: 7vmin 0 2vmin;
    }
    .list-container .line-2nd,
    .list-container .line-3rd,
    .list-container .line-4th {
        padding: 7vmin 0;
    }
    .option-container .box-16 {
        padding: 7vmin 0;
    }
    .option-container .line-common {
        padding: 7vmin 0;
    }
    .option-container .box-21,
    .option-container .box-23 {
        padding: 3vmin 0;
    }
    .list-container .box-15 {
        padding: 12vmin 0 0;
    }
    /* NORMAL */
    /* 1st LINE */
    .list-container .box-1 {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
    }
    .list-container .box-2 {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
    }
    .list-container .box-3 {
        grid-column: 3 / 4;
        grid-row: 1 / 2;
    }
    .list-container .box-4 {
        grid-column: 4 / 5;
        grid-row: 1 / 2;
    }
    /* 2nd LINE */
    .list-container .box-5 {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
    }
    .list-container .box-6 {
        grid-column: 2 / 3;
        grid-row: 2 / 3;
    }
    .list-container .box-7 {
        grid-column: 3 / 4;
        grid-row: 2 / 3;
    }
    .list-container .box-8 {
        grid-column: 4 / 5;
        grid-row: 2 / 5;
    }
    /* 3rd LINE */
    .list-container .box-9 {
        grid-column: 1 / 2;
        grid-row: 3 / 4;
    }
    .list-container .box-10 {
        grid-column: 2 / 3;
        grid-row: 3 / 4;
    }
    .list-container .box-11 {
        grid-column: 3 / 4;
        grid-row: 3 / 4;
    }
    /* 4th LINE */
    .list-container .box-12 {
        grid-column: 1 / 2;
        grid-row: 4 / 5;
    }
    .list-container .box-13 {
        grid-column: 2 / 3;
        grid-row: 4 / 5;
    }
    .list-container .box-14 {
        grid-column: 3 / 4;
        grid-row: 4 / 5;
    }
    /* OPTION */
    .list-container .box-15 {
        grid-column: 1 / 3;
        grid-row: 1 / 2;
    }
    .list-container .box-16 {
        grid-column: 1 / 3;
        grid-row: 2 / 3;
        padding-left: auto;
        text-align: center;
    }
    /* 1st LINE */
    .list-container .box-17 {
        grid-column: 1 / 2;
        grid-row: 3 / 4;
    }
    .list-container .box-18 {
        grid-column: 2 / 3;
        grid-row: 3 / 4;
        padding-left: auto;
        text-align: center;
    }
    /* 2nd LINE */
    .list-container .box-19 {
        grid-column: 1 / 2;
        grid-row: 4 / 5;
    }
    .list-container .box-20 {
        grid-column: 2 / 3;
        grid-row: 4 / 5;
        padding-left: auto;
        text-align: center;
    }
    /* 3rd LINE */
    .list-container .box-21 {
        grid-column: 1 / 2;
        grid-row: 5 / 6;
    }
    .list-container .box-22 {
        grid-column: 2 / 3;
        grid-row: 5 / 6;
        padding-left: auto;
        text-align: center;
    }
    /* 4th LINE */
    .list-container .box-23 {
        grid-column: 1 / 2;
        grid-row: 6 / 7;
    }
    .list-container .box-24 {
        grid-column: 2 / 3;
        grid-row: 6 / 7;
        padding-left: auto;
        text-align: center;
    }
    /* 5th LINE */
    .list-container .box-25 {
        grid-column: 1 / 2;
        grid-row: 7 / 8;
    }
    .list-container .box-26 {
        grid-column: 2 / 3;
        grid-row: 7 / 8;
    }
    .list-container .box-6,
    .list-container .box-7,
    .list-container .box-10,
    .list-container .box-11,
    .list-container .box-13,
    .list-container .box-14 {
        padding: 10vmin 0 0 0;
    }
    .list-container .box-8 {
        padding: 23vmin 0 0 0;
    }

    /* ****** 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 6 | Q & A

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

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

    /* Q & A */
    .question-area {
        padding: 5%;
        border-radius: 3vmin;
    }
    .question-area .arrow-box {
        margin: .7% 0 0;
        width: 4vmin;
        height: 4vmin;
    }
    .question-area .arrow-box span:nth-of-type(1) {
        border-right: solid 2px #707070;
    }
    .question-area .arrow-box span:nth-of-type(2) {
        border-bottom: solid 2px #707070;
    }
    .qa-container .question-text p {
        width: 95%;
        font-size: 4vmin;
        line-height: 160%;
    }
    .qa-container .question-text span {
        font-size: 5.5vmin;
        color: #FC4E12;
    }
    .qa-container .answer-area {
        border-radius: 3vmin;
    }
    .qa-container .answer-text span {
        font-size: 4.5vmin;
    }
    /* ***************************************** */




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

        SECTION 7 | CONTACT

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

    .contact .contents {
        width: 85%;
    }.contact .title h3 {
        font-size: 5.8vmin;
        letter-spacing: .5vmin;
    }
    .contact .title h3::after {
        bottom: -10%;
        width: 5.8vmin;
    }
    .contact .form-container {
        row-gap: 1vmin;
        grid-template-columns: 1fr;
    }
    .contact .form-title {
        margin: 5vmin 0 0;
        font-size: 3.5vmin;
        font-weight: 500;
        padding: 0 0 0 16%;
        letter-spacing: .5vmin;
    }
    .contact .form-required::before {
        top: 1.8vmin;
        padding: 1vmin 1.2vmin;
        font-size: 3vmin;
    }
    .contact .form-text {
        font-size: 4.5vmin;
        border-radius: 1vmin;
    }
    .contact .form-text::-webkit-input-placeholder {
        font-size: 3vmin;
    }
    .contact .message {
        height: 60vmin;
    }
    .contact .form-box-7 {
        margin: 5vmin 0 0;
        grid-column: 1 / 2;
        font-size: 3.5vmin;
    }

    .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;
    }
    /* ***************************************** */
}
/* Smart Phone 6/7/8 X〜 | portrait */
@media (orientation: portrait) and (max-width: 375px) {

}
/* Smart Phone 5/SE | portrait */
@media (orientation: portrait) and (max-width: 320px) {
}