nav.navbar {

    margin-bottom: 0;

}

.strongred {

    color: #cf0050;

    font-weight: 700;

}

.mt1 {

    margin-top:1em !important;

}

.mt2 {

    margin-top:2em !important;

}

.content {

    color: #333;

}

.title {

    text-align: center;

    font-size: 32px;

    padding: 60px;

    font-weight: 700;

    line-height: 1.4em;

}

.explain {

    width: 60%;

    margin: 0 auto;

    font-size: 1.2em;

    padding-bottom: 30px;

}

.oshirase {

    padding: 15px;

    background: #f0f0f0;

    margin-bottom: 15px;

    color: darkcyan;

    margin-top: 30px;

}



#sec1 {

    width: 100%;

}

#sec1 img {

    width: 100%;

    backface-visibility: hidden;

}

#sec2  {

    padding: 1vh 0 60px;

    background: #fff;

    text-align: center;

    font-size: 1.2em;

    line-height: 1.8em;

}

#sec2-2-1 {

    background: #fdffec;

    width: 80%;

    margin: 0 auto 30px;

    padding: 30px;

}



#sec2-2-2 {

    width: 80%;

    margin: 0 auto;

    background: #fff;

    padding: 30px;

    border-radius: 5px;

    border: 1px solid #ccc;

    text-align: left;

}

#sec2-2-3 {

    width: 80%;

    margin: 30px auto;

}

#sec2-3 {

    text-align: center;

}

#sec2-3-1, #sec2-3-2 {

    width: 80%;

    margin: 0 auto 60px;

    padding: 30px 50px;

    font-size:1.2em;

    color:#666;

    line-height: 1.7em;

}

#sec2-3-1-1 {

    font-weight: bold;

    font-size: 1.2em;

    margin-bottom: 30px;

}

#sec2-3-1-2 {

    font-size: 1em;

    text-align: left;

}

#sec3 {

    background: #95c8bf;

    height: 760px;

}

#sec3-2 {

    display: flex;

    -ms-flex-pack: distribute;

    justify-content: space-around;

    -webkit-box-align: start;

    -ms-flex-align: start;

    align-items: flex-start;

    width: 90%;

    margin: 0 auto 50px;

}

#sec3-2 .title {

    color: orange;

    font-weight: 700;

    font-size: 25px;

    margin: 95px 0 30px 30px;

    text-align: center;

    line-height: 1.5em;

    padding: 0;

}

#sec3-2 .cont {

    font-size: 18px;

    text-align: left;

    width: 249px;

    margin: 0 0 0 45px;

    word-wrap: break-word;

}

#sec3-2-1 {

    background-image: url('/img/top/sec10_check1.png');

    background-repeat: no-repeat;

    width: 317px;

    height: 450px;

}

#sec3-2-2 {

    background-image: url('/img/top/sec10_check2.png');

    background-repeat: no-repeat;

    width: 315px;

    height: 450px;

}

#sec3-2-2 .title {

    margin-left: 15px;

}

#sec3-2-2 .cont {

    width: 249px;

    margin: 0 0 0 40px;

}

#sec3-2-3 {

    background-image: url('/img/top/sec10_check3.png');

    background-repeat: no-repeat;

    width: 315px;

    height: 450px;

}

#sec3-2-3 .title {

    margin-left: 28px;

    font-size: 24px;

}

}

#sec3-2-3 .cont {

    width: 249px;

    margin: 0 0 0 45px;

}

#sec3-3 {

    width: 87%;

    margin: 0 auto;

    font-size: 24px;

}

#sec11 {

    background: #eeefea;

    padding: 50px 0;

}

.flowchart {

    padding:50px;

    background: #ffffff;

    border-radius: 5px;

    border: 1px solid #ccc;

    width: 80%;

    margin: 0 auto 30px;

    color: #333;

    text-align: center;

    font-size: 1.2em;

}

.flowchart_title {

    text-decoration: underline;

    font-size:20px;

    font-weight: bold;

}

.flowchart .alert {

    width:72%;

    margin:0 auto;

    position: relative;

}

.flowchart .badge.customer {

    background: crimson;

    margin-right: 10px;

    display: inline-block;

    position: absolute;

    left: 15px;

    top: 20px;

}

.flowchart .badge.unei {

    background: #4CAF50;

    margin-right: 10px;

    display: inline-block;

    position: absolute;

    left: 15px;

    top: 20px;

}

.price_well {

    border-radius: 5px;

    display: block;

    width: 80%;

    padding: 30px;

    border: 1px solid #FF9800;

    font-size: 20px;

    color: #333;

    margin: 30px auto;

}

.alert .price {

    font-size: 46px;

}

#sec4 {

    background: #ffffff;

    padding: 0 50px 50px;

    text-align:center;

}

#sec4-3-2 {

    font-size: 1.8em;

}

#sec4-3-5 {

    font-size: 1.8em;

}

#sec5 {

    background: #eeefea;

    position: relative;

    padding-bottom: 60px;

}

#sec5-1 {

    padding-bottom: 30px;

}

#sec5-2  {

    font-size: 18px;

    text-align: center;

}

.sec5-step-title {

    width: 60%;

    margin: 30px auto;

}

.sec5-step-title p {

    font-size: 2vw;

    font-weight: 700;

    margin-left: 30px;

    display: inline-block;

}

.sec5-step_expl {

    text-align: center;

}

.sec5-step_expl img {

    margin: 30px;

}

#sec5-4 {

    text-align: center;

    margin-bottom: 30px;

}

#sec5-5 {

    display:flex;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    -webkit-box-align: start;

    -ms-flex-align: start;

    align-items: flex-start;

    padding-bottom: 30px;

}

#sec5-5 p {

    color:#f9a327;

    font-size:2vw;

    font-weight: bold;

}

#sec6 {

    background: #95c8bf;

    position: relative;

    padding: 0 50px;

}

#sec6-2-1 {

    font-size:1.3em;

    padding-bottom: 60px;

}

#sec7 {

    background: #fff;

    position: relative;

    padding-bottom: 60px;

}

#sec7-2 li {

    margin-bottom: 20px;

}

#sec8 {

    background: #fff;

}

#sec8-6 {

    color: #333;

    font-size: 18px;

    width: 80%;

    margin: 0 auto;

    background: #fff;

    padding: 0;

}

#sec8-6 .table>tbody>tr>td, #sec8-6 .table>tbody>tr>th, #sec8-6 .table>tfoot>tr>td, #sec8-6 .table>tfoot>tr>th, #sec8-6 .table>thead>tr>td, #sec8-6 .table>thead>tr>th {

    padding: 20px;

}

#sec8-6 .orange {

    background: #f8991d;

    color: #fff;

}

#sec8-6 td {

    vertical-align: middle;

}

#sec8-7 {

    width: 80%;

    margin:0 auto;

    font-size:14px;

    text-align: right;

    padding-bottom: 60px;

}

#sec9 {

    display:flex;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    padding-bottom: 30px;

    background: #c66e6e;

}

#sec9-2 {

    font-size:1.8em;

    font-weight: bold;

    color: #ffffff;

    padding: 60px 0;

    text-align:center;

}

#sec10 {

    margin-top:30px;

}

.isbn_midasi {

    font-size:20px;

    font-weight: bold;

    margin: 30px;

}

.isbn_cont {

    margin: 0 auto 2em;

    width: 90%;

    text-align: left;

}

.middlediv {

    width: 80%;

    margin: 30px auto;

    padding: 10px;

}

.process_title {

    font-weight: bold;

    font-size: 28px;

    color: #333;

    margin-bottom: 30px;

    text-decoration: underline;

}

.process_cont {

    padding: 30px;

}

/* iPAD */

@media screen and (min-device-width:480px) and (max-device-width:1024px){

    .container {

        width: 100%;

    }

    .title {

        font-size: 1.8em;

    }

    .middlediv {

        width: 90%;

    }

    #sec2 {

        font-size: 1.1em;

    }

    #sec2-3-1-1 {

        font-size: 1.2em;

        margin-bottom: 1em;

    }

    #sec2-3-1 img {

        max-width: 70%;

    }

    #sec3 {

        height: auto;

        padding-bottom: 2em;

    }

    #sec3-2 {

        -ms-flex-wrap: wrap;

        flex-wrap: wrap;

    }

    #sec3-2-3 {

        margin-top: 2em;

    }

    .flowchart {

        padding: 50px 0;

    }

    .flowchart .badge.customer {

        position: static;

    }

    .flowchart .badge.unei {

        position: static;

    }

    .sec5-step-title {

        width: 80%;

        margin: 30px auto;

    }

    .explain {

        width: 80%;

        font-size: 1.2em;

    }

    .sec5-step-title p {

        font-size: 1.6em;

    }

    #sec5-5 p {

        font-size: 2em;

    }

    #sec8 .title {

        font-size: 1.6em;

    }

}

/* iPAD Pro */

@media screen and (min-device-width:1024px){

    .explain {

        font-size: 1.3em;

    }

    .flowchart {

        font-size: 1.3em;

    }

    .flowchart_title {

        font-size: 1.3em;

    }

}

/* スマホ */

@media screen and (max-width:480px){

    .br::before {

        content: "\A" ;

        white-space: pre ;

    }

    .container {

        padding: 0;

    }

    .title {

        font-size: 1.5em;

        padding: 30px;

    }

    .middlediv {

        width: 95%;

    }

    #sec2-2-1 {

        width: 100%;

        padding: 30px 10px;

    }

    #sec2 img {

        max-width: 100%;

    }

    #sec2-2-2, #sec2-2-3, #sec2-3-1 {

        width: 90%;

    }

    #sec2-3-1 {

        padding: 30px 20px;

    }

    #sec2-3-1 img {

        max-width: 100%;

    }

    #sec3 {

        height: auto;

    }

    #sec3-2 {

        display: flex;

        -webkit-box-orient: vertical;

        -webkit-box-direction: normal;

        -ms-flex-direction: column;

        flex-direction: column;

        width: fit-content;

        margin: 30px auto 0;

        padding-bottom: 30px;

    }

    #sec3-2-1 {

        height: 350px;

        margin-bottom: 30px;

    }

    #sec3-2-2 {

        width: 315px;

        height: 450px;

        margin-bottom: 30px;

    }

    #sec3-2-3 {

        width: 315px;

        height: 380px;

    }    

    #sec8-6 {

        overflow: scroll;

        width: 90%;

    }

    .flowchart {

        padding: 50px 0px;

        width: 90%;

    }

    }

    .flowchart .alert {

        width: 85%;

    }

    .flowchart .badge.customer {

        position: static;

    }

    .flowchart .badge.unei {

        position: static;

    }

    .sec5-step-title {

        width: 90%;

        margin: 30px auto;

    }

    .explain {

        width: 80%;

        font-size: 1.2em;

    }

    .sec5-step-title p {

        font-size: 1.6em;

        display: block;

        text-align: center;

    }

    .sec5-step_expl img {

        margin: 0px;

    }

    #sec5-5 p {

        font-size: 2em;

    }

    #sec5 img {

        max-width: 300px;

    }

    #sec8 .title {

        font-size: 1.6em;

    }

    .price_well {

        font-size: 1.3em;

    }

    .price_well .price {

        font-size: 1.8em;

    }

    #sec4-3-2, #sec4-3-5 {

        font-size: 1.5em;

    }

    #sec9-2 {

        font-size: 1.4em;

    }

}