﻿.order-form-main,
.contact-form,
.login {
    text-align: left
}

.order-form-main img,
.contact-form img,
.login img {
    width: auto
}

.top__mv {
    background: url(../images/index/bg_mv.jpg) no-repeat center top;
    background-size: cover;
    height: 500px;
    margin-bottom: 25px;
    position: relative;
    width: 100%;
    max-width: 100%;
}

@media screen and (max-width: 767px) {
    .top__mv {
        background: url(../images/index/sp_bg_mv.jpg) no-repeat center top;
        background-size: cover;
        height: 89.7435897436vw;
        margin-bottom: 3.8461538462vw;
        text-shadow: 1px 1px 3px #000
    }
}

.top__mv.is-inview {
    transition-delay: .7s;
    margin-top: 10px;
}

.top__mv_txt {
    color: #fff;
    font-family: "M PLUS 1p", sans-serif;
    font-size: 32px;
    line-height: 1.1;
    position: relative;
    bottom: -415px;
    /* left: 30px; */
    text-align: center;
    text-shadow: 0px 2px 3px #000;
    display: block;
}

@media screen and (max-width: 1280px) {
    .top__mv_txt {
        font-size: 2.5vw;
        display: none;
    }
}

@media screen and (max-width: 767px) {
    .top__mv_txt {
        font-size: 4.1025641026vw;
        bottom: 2.5641025641vw;
        left: 0;
        text-align: center;
        width: 100%
    }
}

.top__mv_txt.js-inview {
    transform: translateY(20px)
}

.top__mv_txt.is-inview {
    transform: translateX(0);
    transition-delay: 1.2s
}

.top__bnr {
    display: flex;
    margin-bottom: 25px
}

@media screen and (max-width: 767px) {
    .top__bnr {
        margin-bottom: 3.8461538462vw
    }
}

.top__bnr a {
    display: block;
    margin: 0 13px
}

@media screen and (max-width: 767px) {
    .top__bnr a {
        width: 61.5384615385vw
    }
}

@media screen and (max-width: 767px) {
    .top #simulation {
        margin-top: -18.4615384615vw;
        padding-top: 18.4615384615vw
    }
}

.top__simulator {
    background: #FFF6EE;
    padding: 80px 0;
    position: relative
}

@media screen and (max-width: 1000px) {
    .top__simulator {
        padding: 6.6666666667vw 0
    }
}

@media screen and (max-width: 767px) {
    .top__simulator {
        padding: 12.8205128205vw 0 7.6923076923vw
    }
}

.top__simulator h3 {
    border-bottom: solid #FF9900 2px;
    color: #FF9900;
    display: inline-block;
    font-weight: 700;
    font-size: 36px;
    margin-bottom: 48px;
    padding-bottom: 5px;
    width: 620px
}
.top__simulator .biao{
    width: 45px;
    height: 45px;
    margin-right: 10px;
    margin-bottom: 3px;
}

@media screen and (max-width: 1000px) {
    .top__simulator h3 {
        font-size: 3vw;
        margin-bottom: 2vw
    }
}

@media screen and (max-width: 767px) {
    .top__simulator h3 {
        font-size: 6.1538461538vw;
        line-height: 1.2;
        margin-bottom: 6.1538461538vw;
        width: 71.7948717949vw
    }

    .top__simulator h3 span {
        display: block
    }

    .top__simulator .biao{
        width: 30px;
        height: 30px;
        margin-right: 5px;
        margin-bottom: 0px;
    }
}

.top__simulator .select-area {
    display: flex;
    justify-content: center
}

@media screen and (max-width: 767px) {
    .top__simulator .select-area {
        display: block
    }
}

.top__simulator .select-area__block {
    margin: 0 10px
}

@media screen and (max-width: 1000px) {
    .top__simulator .select-area__block {
        margin: 0 .8333333333vw
    }
}

@media screen and (max-width: 767px) {
    .top__simulator .select-area__block {
        margin: 0 auto 5.1282051282vw;
        width: 71.7948717949vw
    }
}

.top__simulator .select-area__block p {
    color: #FF9900;
    font-weight: 500;
    line-height: 1;
    margin: 0 0 8px 8px;
    text-align: left
}

@media screen and (max-width: 1000px) {
    .top__simulator .select-area__block p {
        margin-bottom: .8333333333vw
    }
}

@media screen and (max-width: 767px) {
    .top__simulator .select-area__block p {
        margin-bottom: 2.5641025641vw
    }
}

.top__simulator .select-area__block select {
    appearance: none;
    background: url(../images/index/arrow_down.png) no-repeat #fff 270px 21px !important;
    background-size: 16px !important;
    border: 2px solid #FF9900;
    border-radius: 10px;
    box-shadow: 2px 4px 4px rgba(0, 0, 0, .15);
    font-size: 16px !important;
    font-weight: 500;
    margin: 0 !important;
    height: 60px;
    padding: 15px 8px 8px 16px;
    text-align: left;
    width: 300px
}

@media screen and (max-width: 1000px) {
    .top__simulator .select-area__block select {
        background-size: 1.3333333333vw !important;
        background-position: 22.5vw 1.75vw !important;
        height: 5vw !important;
        width: 25vw
    }
}

@media screen and (max-width: 767px) {
    .top__simulator .select-area__block select {
        background-size: 2.5641025641vw !important;
        background-position: 65.3846153846vw 4.6153846154vw !important;
        height: 12.8205128205vw !important;
        margin: 0 auto 5.1282051282vw;
        padding-top: 10px;
        width: 71.7948717949vw
    }
}

.top__simulator .selected-price-list {
    margin: 0 auto;
    padding-top: 40px;
    width: 1000px
}

@media screen and (max-width: 1000px) {
    .top__simulator .selected-price-list {
        padding-top: 3.3333333333vw;
        width: 83.3333333333vw
    }
}

@media screen and (max-width: 767px) {
    .top__simulator .selected-price-list {
        padding-top: 5.1282051282vw;
        width: 89.7435897436vw
    }
}

.top__simulator .selected-price-list .loading-bg {
    z-index: 1
}

.top__simulator .selected-price-list .loading-bg img {
    height: 50%;
    width: 50%
}

.top__simulator .selected-price-list .list-body {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-bottom: 40px
}

@media screen and (max-width: 767px) {
    .top__simulator .selected-price-list .list-body {
        display: block;
        padding-bottom: 5.1282051282vw
    }
}

.top__simulator .selected-price-list .list-body .each-product {
    background: #ffffff;
    border: solid #ff9900 2px;
    border-radius: 6px;
    margin: 0 0 20px !important;
    padding: 20px 0;
    width: 480px !important
}

@media screen and (max-width: 1000px) {
    .top__simulator .selected-price-list .list-body .each-product {
        width: 40vw !important
    }
}

@media screen and (max-width: 767px) {
    .top__simulator .selected-price-list .list-body .each-product {
        padding: 5.1282051282vw;
        width: 89.7435897436vw !important
    }
}

.top__simulator .selected-price-list .list-body .each-product .plan-type {
    color: #ff9900;
    font-size: 16px !important;
    font-weight: 600
}

@media screen and (max-width: 1000px) {
    .top__simulator .selected-price-list .list-body .each-product .plan-type {
        font-size: 1.4166666667vw !important
    }
}

@media screen and (max-width: 767px) {
    .top__simulator .selected-price-list .list-body .each-product .plan-type {
        font-size: 4.6153846154vw !important;
        line-height: 1.4
    }
}

.top__simulator .selected-price-list .list-body .each-product .signal-type {
    display: none
}

.top__simulator .selected-price-list .list-body .each-product .price {
    margin-left: 0 !important
}

.top__simulator .selected-price-list .list-body .each-product .price span {
    color: red;
    font-size: 36px;
    font-weight: 600;
    margin-right: 5px
}

@media screen and (max-width: 767px) {
    .top__simulator .selected-price-list .list-body .each-product .price span {
        font-size: 7.1794871795vw
    }
}

.top__simulator .selected-price-list__caution span {
    font-weight: 700
}

.top__simulator .selected-price-list__caution a {
    margin: 30px auto 0
}

@media screen and (max-width: 767px) {
    .top__simulator .selected-price-list__caution a {
        margin: 3.8461538462vw auto 5.1282051282vw
    }
}

.top__simulator .common-modal .common-modal-header .close-button {
    width: auto
}

.top__content {
    height: 500px;
    padding: 80px 0 40px
}

@media screen and (max-width: 767px) {
    .top__content {        
        height: auto;
        padding: 10.2564102564vw 5.1282051282vw 5.1282051282vw;
    }
}

.top__content.about {
    background: url(../images/index/bg_about.jpg) no-repeat #fff right top;
    background-size: cover;
    margin-bottom: 15px;
}

@media screen and (max-width: 767px) {
    .top__content.about {
        position: relative
    }

    .top__content.about::before {
        background: rgba(255, 255, 255, .8);
        content: "";
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%
    }
}

.top__content.howtouse {
    background: url(../images/index/bg_howtouse.jpg) no-repeat #fff left top;
    background-size: cover;
    margin-bottom: 15px;
}

.top__content.howtouse .top__content_inner {
    margin: 0 200px 0 auto
}

@media screen and (max-width: 767px) {
    .top__content.howtouse {
        background: url(../images/index/bg_howtouse.jpg) no-repeat #fff 48% top;
        background-size: cover;
        position: relative;
        margin-bottom: 15px;
    }

    .top__content.howtouse::before {
        background: rgba(255, 255, 255, .7);
        content: "";
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%
    }
}

.top__content_hf{
    position: relative;
}

.top__content.plan {
    background: url(../images/index/bg_plan.jpg) no-repeat #fff left top;
    background-size: cover;
    padding: 100px 0 120px;
    margin-bottom: 15px;
}

@media screen and (max-width: 767px) {
    .top__content.plan {
        background: url(../images/index/bg_plan.jpg) no-repeat #fff right top;
        background-size: cover;
        padding: 10.2564102564vw 5.1282051282vw 5.1282051282vw;
        position: relative
    }

    .top__content.plan::before {
        background: rgba(255, 255, 255, .7);
        content: "";
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%
    }
}

.top__content.examples {
    background: url(../images/index/bg_examples.jpg) no-repeat #fff left top;
    background-size: cover
}

.top__content.examples .top__content_inner {
    margin: 0 200px 0 auto
}

@media screen and (max-width: 1000px) {
    .top__content.examples .top__content_inner {
        margin-right: auto
    }
}

@media screen and (max-width: 767px) {
    .top__content.examples .top__content_inner {
        margin-right: auto
    }
}

@media screen and (max-width: 767px) {
    .top__content.examples {
        position: relative
    }

    .top__content.examples::before {
        background: rgba(255, 255, 255, .7);
        content: "";
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%
    }
}

.top__content.faq {
    padding-bottom: 70px;
    height: 100%;
}

@media screen and (max-width: 767px) {
    .top__content.faq {
        padding-bottom: 12.8205128205vw;
        margin-bottom: 0;
    }
}

.top__content.faq .top__content_ttl {
    margin-right: 30px
}

@media screen and (max-width: 767px) {
    .top__content.faq .top__content_ttl {
        margin-right: 7.6923076923vw
    }
}

.top__content.faq .top__content_ttl::after {
    /* border-right: solid #c00 4px;
    border-left: solid #c00 4px; */
    content: "";
    display: block;
    height: 24px;
    position: absolute;
    top: 6px;
    right: -30px;
    width: 4px
}

@media screen and (max-width: 767px) {
    .top__content.faq .top__content_ttl::after {
        height: 6.1538461538vw;
        top: 0;
        right: -5.3846153846vw;
        width: 1.0256410256vw
    }
}

.top__content.faq .top__faq {
    margin: 0 auto 60px;
    text-align: left;
    width: 1000px
}

@media screen and (max-width: 767px) {
    .top__content.faq .top__faq {
        margin-bottom: 7.6923076923vw;
        width: 100%
    }
}

.top__content.faq .top__faq .faq__accordion dt {
    background: #fca324;
    color: #fff;
    cursor: pointer;
    margin-bottom: 6px;
    padding: 15px 15px 15px 45px;
    position: relative;
    text-indent: -29px;
    transition: all .3s ease-in-out;
    border-radius: 6px;
}

@media screen and (max-width: 767px) {
    .top__content.faq .top__faq .faq__accordion dt {
        font-size: 3.5897435897vw;
        padding: 3.8461538462vw 11.5384615385vw;
        text-indent: -7.4358974359vw
    }
}

.top__content.faq .top__faq .faq__accordion dt span {
    font-family: "Montserrat", sans-serif;
    margin-right: 10px
}

@media screen and (max-width: 767px) {
    .top__content.faq .top__faq .faq__accordion dt span {
        margin-right: 2.5641025641vw
    }
}

.top__content.faq .top__faq .faq__accordion dt::before {
    content: "＋";
    position: absolute;
    right: 20px
}

@media screen and (max-width: 767px) {
    .top__content.faq .top__faq .faq__accordion dt::before {
        right: 0
    }
}

.top__content.faq .top__faq .faq__accordion dt.active::before {
    content: "－"
}

.top__content.faq .top__faq .faq__accordion dt:hover {
    /* opacity: .8; */
    background: #E08600;
}

@media screen and (max-width: 767px) {
    .top__content.faq .top__faq .faq__accordion dt:hover {
        opacity: 1
    }
}

.top__content.faq .top__faq .faq__accordion dd {
    display: none;
    padding: 15px 15px 15px 45px;
    text-indent: -29px
}

@media screen and (max-width: 767px) {
    .top__content.faq .top__faq .faq__accordion dd {
        font-size: 3.5897435897vw;
        padding: 3.8461538462vw 3.8461538462vw 3.8461538462vw 11.5384615385vw;
        text-align: justify;
        text-indent: -7.4358974359vw
    }
}

.top__content.faq .top__faq .faq__accordion dd span {
    font-family: "Montserrat", sans-serif;
    margin-right: 10px
}

@media screen and (max-width: 767px) {
    .top__content.faq .top__faq .faq__accordion dd span {
        margin-right: 2.5641025641vw
    }
}

.top__content.faq .top__content_btn {
    margin: 0 auto
}

.top__content.information {
    background: #e1eaff
}

.top__content.information .top__content_ttl {
    margin-right: 30px
}

@media screen and (max-width: 767px) {
    .top__content.information .top__content_ttl {
        margin-right: 7.6923076923vw
    }
}

.top__content.information .top__content_ttl::after {
    border-right: solid #c00 4px;
    border-left: solid #c00 4px;
    content: "";
    display: block;
    height: 24px;
    position: absolute;
    top: 6px;
    right: -30px;
    width: 4px
}

@media screen and (max-width: 767px) {
    .top__content.information .top__content_ttl::after {
        top: 0;
        right: -5.1282051282vw
    }
}

.top__content.information .top__information {
    margin: 0 auto 60px;
    text-align: left;
    width: 1000px
}

@media screen and (max-width: 767px) {
    .top__content.information .top__information {
        margin-bottom: 5.1282051282vw;
        width: 100%
    }
}

.top__content.information .top__information dl {
    border-bottom: solid #fff 1px;
    display: flex;
    margin-bottom: 20px;
    padding-bottom: 20px
}

@media screen and (max-width: 767px) {
    .top__content.information .top__information dl {
        display: block;
        margin-bottom: 2.5641025641vw;
        padding-bottom: 2.5641025641vw
    }
}

.top__content.information .top__information dl:last-child {
    margin-bottom: 0
}

.top__content.information .top__information dl dt {
    margin-right: 20px;
    width: 140px
}

@media screen and (max-width: 767px) {
    .top__content.information .top__information dl dt {
        font-size: 3.5897435897vw;
        width: 100%
    }
}

@media screen and (max-width: 767px) {
    .top__content.information .top__information dl dd {
        font-size: 3.5897435897vw;
        font-weight: 500
    }
}

.top__content_inner {
    margin: 0 auto 0 200px;
    text-align: left;
    position: relative;
    width: 630px;
    z-index: 1
}

@media screen and (max-width: 1000px) {
    .top__content_inner {
        margin: 0 auto !important
    }
}

@media screen and (max-width: 767px) {
    .top__content_inner {
        margin: 0 auto;
        width: 100%
    }
}

.top__content_inner .about{
    color: #065988 !important;
}
.top__content_inner .liaojin{
    color: #002B71 !important;
}
.top__content_inner .huoyongli{
    color: #5C5C5C !important;
}

.top__content_ttl {
    color: #FF9900;
    display: inline-block;
    font-family: "M PLUS 1p", sans-serif;
    font-size: 36px;
    letter-spacing: 0;
    line-height: 1;
    margin: 0 0 40px 0px;
    position: relative
}

@media screen and (max-width: 767px) {
    .top__content_ttl {
        font-size: 6.1538461538vw;
        margin: 0 0 20px 20px
    }
}

.top__content_ttl::before {
    /* border-right: solid #c00 4px;
    border-left: solid #c00 4px; */
    content: "";
    display: block;
    height: 24px;
    position: absolute;
    top: 6px;
    left: -30px;
    width: 4px
}

@media screen and (max-width: 767px) {
    .top__content_ttl::before {
        top: 0;
        left: -5.1282051282vw
    }
}

.top__content_ttl .biao {
    width: 35px;
    height: 35px;
    margin-right: 10px;
    margin-bottom: 1px;
}

@media screen and (max-width: 767px) {
    .top__content_ttl .biao {
        width: 25px;
        height: 25px;
        margin-right: 5px;
        margin-bottom: 0px;
    }
}

.top__content_lead {
    margin-bottom: 40px
}

@media screen and (max-width: 767px) {
    .top__content_lead {
        font-size: 3.5897435897vw;
        line-height: 1.6;
        margin-bottom: 7.6923076923vw;
        text-align: justify
    }
}

.top__content_btns {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between
}

@media screen and (max-width: 767px) {
    .top__content_btns {
        display: block
    }
}

.top__content_btn {
    align-items: center;
    background: #FF9900;
    border: solid #FF9900 2px;
    border-radius: 6px;
    color: #fff;
    display: flex;
    font-family: "M PLUS 1p", sans-serif;
    height: 60px;
    justify-content: center;
    line-height: 1;
    margin-bottom: 35px;
    position: relative;
    transition: all .2s ease-in;
    width: 300px
}

@media screen and (max-width: 767px) {
    .top__content_btn {
        height: 12.8205128205vw;
        margin: 0 auto 5.1282051282vw;
        width: 71.7948717949vw
    }
}

.top__content_btn:hover {
    background: #fff;
    color: #FF9900;
    opacity: 1;
    text-decoration: none
}

.top__content_btn:hover::before {
    border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #FF9900
}

.top__content_btn::before {
    border-style: solid;
    border-width: 6px 0 6px 10.4px;
    border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #fff;
    content: "";
    height: 0;
    position: absolute;
    top: 23px;
    right: 10px;
    width: 0
}

@media screen and (max-width: 767px) {
    .top__content_btn::before {
        top: 4.358974359vw
    }
}

.top__content_btn::after {
    background: #666;
    border-radius: 6px;
    content: "";
    height: 60px;
    opacity: .6;
    position: absolute;
    right: -6px;
    bottom: -6px;
    width: 300px;
    z-index: -1
}

@media screen and (max-width: 767px) {
    .top__content_btn::after {
        height: 12.8205128205vw;
        right: -1.5384615385vw;
        bottom: -1.5384615385vw;
        width: 71.7948717949vw
    }
}

.btn_about{
    color: #FFF;
    background: #44A3DF;
    border: solid #44A3DF 2px;
}
.btn_about:hover {
    background: #fff;
    color: #44A3DF;
}
.btn_about:hover::before {
    border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #44A3DF
}
.btn_about::before {
    border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #fff;
}

.btn_liaojin{
    color: #FFF;
    background: #4A81DC;
    border: solid #4A81DC 2px;
}
.btn_liaojin:hover {
    background: #fff;
    color: #4A81DC;
}
.btn_liaojin:hover::before {
    border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #4A81DC
}
.btn_liaojin::before {
    border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #fff;
}

.btn_huoliyong{
    color: #FFF;
    background: #6e6b8c;
    border: solid #6e6b8c 2px;
}
.btn_huoliyong:hover {
    background: #fff;
    color: #6e6b8c;
}
.btn_huoliyong:hover::before {
    border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #6e6b8c
}
.btn_huoliyong::before {
    border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #fff;
}

/* 5385vw;
bottom:-1.5384615385vw;
width:71.7948717949vw
}
} */