/* functions */


#toptab{
    display: block;
    width: 100%;
    margin:4rem auto 0 auto;
}


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

    #toptab{
        margin:1.5rem auto 0 auto;
    }   

}


.ftop-title{
    margin-top: 1em;
    margin-bottom:2rem;
    font-size: 32px;
    text-align: center;
}

.ftop-tabs.pc{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    max-width: 1340px;
    padding: 0 20px;
    margin: 0 auto;
}

.ftop-tabs.sp {
    display: none;
}

.ftop-tabs_block{
    position: relative;
    width: 295px;
    max-width: calc(100%/4 - 30px);
    padding: 42px 5px 36px;
    margin-bottom: 2rem;
    border: 3px solid #0C59A1;
    border-radius: 6px;
    box-shadow: 0 0 6px #b0b8bf;
}

#toptab.tab-col-3{
    width:100%;
    margin:0 auto;
}

#toptab.tab-col-3 .ftop-tabs_block{
    width: calc(100%/3 - 40px);
    max-width: 410px;
    padding: 38px 5px;
    margin: 20px;
}

.ftop-tabs_no{
    position:absolute;
    top:-10px;
    left:10px;
    z-index: -1;
    font-family: Arial, Helvetica, sans-serif;
    font-size:70px;
    font-weight: bold;
    color:#E4F2FF;
}

.ftop-tabs_title{
    padding: 0 0 35px 0;
    font-size: 21px;
    font-weight: bold;
    line-height: 1.2;
    color: #22262a;
    text-align: center;
}




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


    .tab-col-3 .ftop-tabs_title {
        font-size: 20px;
    }

}



.ftop-tabs_title span{
    color:#0E6EC8
}

.ftop-tabs_link{
    text-align: center;
    text-decoration: underline;
    color: #22262a;
}

.ftop-tabs_link a{
    position: relative;
    color:#22262a;
    text-decoration: underline;
}

.ftop-tabs_link:after {
    display: inline-block;
    width: 7px;
    height: 8px;
    margin-left: 10px;
    vertical-align: middle;
    content: '';
    background-image: url(../images/function/ftop_arrow.svg);
    background-repeat: no-repeat;
    transition: .5s;
}

.ftop-tabs_block:hover .ftop-tabs_link {
    font-weight: bold;
    color: #0e6ec8;
}

.ftop-tabs_block:hover .ftop-tabs_link:after {
    transform: translateY(.25rem);
}

.section-no{
    position:relative;
    z-index: -1;
    margin-bottom:-131px;
    font-family: Arial, Helvetica, sans-serif;
    font-size:115px;
    font-weight: bold;
    color:#E4F2FF;
    text-align: center;
}

.share-top{
    width:100%;
    margin:40px auto;
}

.share-top img {
    width: 80%;
    margin: 0 auto;
}

.share-bottom {
    text-align: center;
}

.share-bottom p {
    display: inline-block;
    font-size: 15px;
    text-align: left;
}

.sources-read {
    margin-top: 1.7rem;
}

.f-form{
    width:100%;
    margin:40px auto;
}

.f-form-main iframe{
    height: 765px;
    background:#fff !important;
}


.f-form_msg{
    width:900px;
    margin:0 auto 40px auto;
}
.f-form_msg p{
    font-size:13.5px;
    text-align: center;
}

.f-form_msg p.left{
    text-align: left;
}

.f-form .bold{
    font-weight: bold;
}

.f-form_msg .udl{
    text-decoration: underline;
}

.f-form .blk{
    color:#22262a;
}

.sp{
    display:none;
}

.tablet{
    display:block;
}

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

    .tablet{
        display:none;
    }
    
}

.pc{
    display:block;
}


.ftop-tabs_title_br {
    display: none;
}


.section.scenes-section {
    padding-top: 50px;
    margin-top:-50px;
}


@media screen and (max-width: 1140px) {
    #toptab.tab-col-3, .scenes-section {
        width: 100%;
        padding: 0 20px;
    }
    .f-form, .f-form_msg {
        width: 96%;
    }
    .ftop-tabs.pc {
        justify-content: center;
        max-width: 720px;
        margin: 0 auto;
    }
    .ftop-tabs_block {
        width: calc(100% / 2 - 40px);
        max-width: 215px;
        margin: 7.5px;
    }

    .ftop-tabs_block:nth-of-type(3) .ftop-tabs_title {
        margin: 0.6em 0;
    }

    #toptab.tab-col-3 .ftop-tabs_block:nth-of-type(3) .ftop-tabs_title {
        margin: auto;
    }

    .f-form-main iframe{
        height: 755px;
    }

    .ftop-tabs_title_br {
        display: block;
    }

    #toptab.tab-col-3 .ftop-tabs_block .ftop-tabs_title {
        font-size: 16px;
    }

}

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

    #toptab.tab-col-3 .ftop-tabs_block .ftop-tabs_title {
        font-size: 15px;
    }

}

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

    #toptab.tab-col-3 .ftop-tabs_block .ftop-tabs_title {
        font-size: 20px;
    }
}


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

    #toptab.tab-col-3 .ftop-tabs_block .ftop-tabs_title {
        font-size: 16px;
    }
}


@media screen and (max-width: 960px) {
    
    #toptab {
        width: 100%;
    }
    .ftop-tabs.pc {
        flex-wrap: wrap;
    }
    .f-form, .f-form_msg {
        width: 100%;
    }
    .f-form_msg p.left {
        padding: 0 40px;
    }

    .share-top{
        width:100%;
    }

    .share-top img {
        width: 100%;
    }
}

.ftop-title_br {
    display: none;
}

@media screen and (max-width: 810px){
    .f-form-main iframe{
        height: 795px;
    }
}

@media screen and (max-width: 800px){
    .ftop-title_br {
        display: block;
    }
}

@media screen and (max-width: 590px){
    .f-form-main iframe{
        min-height: 795px;
    }
}

@media screen and (max-width: 580px){
    .f-form-main iframe{
        min-height: 1105px;
    }
}


@media screen and (max-width: 580px){
    .ftop-title{
        font-size: 30px;
    }
}

.function-title_bk {
    display: none;
}
@media screen and (max-width: 600px){

    .function-title_bk {
        display: block;
    }
}

    
@media screen and (max-width: 540px){
    .ftop-tabs.pc {
        display: none;
    }

    .ftop-tabs.sp {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        max-width: 350px;
        margin: 0 auto;
    }

    .ftop-tabs_block {
        width: 160px;
        height: auto;
        padding: 32px 14px 33px;
        margin-bottom: 7.5px;
    }
    
    .ftop-tabs_block:nth-of-type(3) .ftop-tabs_title {
        margin: auto;
    }

    .ftop-tabs_link:after {
        right: -15px;
    }

    .ftop-tabs_block:nth-child(even) {
        margin-right: 0;
    }
    .ftop-tabs_no {
        font-size: 48px;
    }
    .ftop-title{
        margin-bottom: 20px;
        font-size: 5vw;
    }

    .ftop-tabs_title {
        padding: 0 0 12px 0;
        font-size: 15px;
        line-height: 1.3;
    }
    .ftop-tabs_link {
        font-size: 12px;
    }

    .sources-read {
        width:96%;
        margin:0 auto 0 auto;
    }

    #organize{
        padding-top:60px;
    }

    .sources-read p{
        margin-left:0;
    }
    .section-no{
        margin-bottom: -25%;
        font-size: 70px;
    }
    .sections .function-title{
        margin-bottom:10px;
        font-size:6.5vw;
    }

    .container-sources .heading-4 {
        margin-top: 0 !important;
    }
   
    .sections .heading-1{
        font-size:5.8vw;
    }

    .share-bottom{
        display:block;
        width: 96%;
    }
    .share-bottom_block{
        width:100%;
        margin-bottom:40px;
    }
    #use .heading-bottom {
        padding: 0 15px;
    }
    .f-form{
        width:96%;
    }

    .f-form .function-title{
        font-size:6.4vw;
    }

    .f-form_msg {
        width: 100%;
        padding: 0 20px;
    }

    .f-form_msg.f-form_msg_top {
        margin: 0 auto;
    }
    
    .f-form_msg.f-form_msg_top p {
        text-align: left;
    }

    .sections .fluid{
        padding:10px 20px;
    }

    .f-form_msg p.left {
        padding: 0;
    }

    .sp{
        display:block;
    }

    .pc{
        display:none;
    }

}


/* scenes */

.tab-col-3 .ftop-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: 1340px;
    padding: 0;
    margin: 0 auto;
}

.scenes-main{
    display: block;
    margin-top:90px;
}

.scenes-section{
    display:flex;
    justify-content: space-between;
    width: 100%;
    max-width: 1230px;
    padding: 0 20px;
    margin:40px auto 120px auto;
}

.scenes-left{
    position: relative;
    width: 41.8%;
    padding: 30px 20px 20px;
    background: linear-gradient(to right bottom, #fff, #f5f7fa);
    border-radius: 5px;
}

.scenes-left_no{
    position:absolute;
    top:-90px;
    left:0;
    z-index: 2;
    font-family: Arial, Helvetica, sans-serif;
    font-size:100px;
    font-weight: bold;
    color:#E4F2FF;
}
.scenes-left_title{
    position: relative;
    z-index: 3;
    font-size: 27px;
}
.scenes-left_title span{
    color:#0E6EC8; 
}

.scenes-left_img{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top:20px;
}



.scenes-sales-left_img1 img {
    width: 202px;
}

.scenes-sales-left_img2 img {
    width: 218px;
}

.scenes-sales-left_img3 img {
    width: 183px;
}

.scenes-sales-left_img4 img {
    width: 181px;
}

.scenes-sales-left_img5 img {
    width: 256px;
}
.scenes-sales-left_img6 img {
    width: 264px;
}


.scenes-planning-left_img1 img {
    width: 251px;
}

.scenes-planning-left_img2 img {
    width: 219px;
}

.scenes-planning-left_img3 img {
    width: 238px;
}

.scenes-planning-left_img4 img {
    width: 204px;
}

.scenes-planning-left_img5 img {
    width: 298px;
}
.scenes-planning-left_img6 img {
    width: 330px;
}



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


    .scenes-sales-left_img1 img {
        width: 172px;
    }
    
    .scenes-sales-left_img2 img {
        width: 185px;
    }
    
    .scenes-sales-left_img3 img {
        width: 155px;
    }
    
    .scenes-sales-left_img4 img {
        width: 154px;
    }
    
    .scenes-sales-left_img5 img {
        width: 218px;
    }
    .scenes-sales-left_img6 img {
        width: 223px;
    }

    .scenes-planning-left_img1 img {
        width: 210px;
    }

    .scenes-planning-left_img2 img {
        width: 186px;
    }

    .scenes-planning-left_img3 img {
        width: 203px;
    }

    .scenes-planning-left_img4 img {
        width: 173px;
    }

    .scenes-planning-left_img5 img {
        width: 256px;
    }
    .scenes-planning-left_img6 img {
        width: 277px;
    }

}




.scenes-left:after{
    position: absolute;
    top: 50%;
    right: -41px;
    width: 28px;
    height: 33px;
    content: "";
    background: url(../images/scenes/arrow.png) no-repeat;
    background-size: 28px 33px;
}

.scenes-right{
    width:54%;
    padding:60px 45px;
    background:#E4F2FF;
    border-radius: 5px;
}

.scenes-right_title{
    margin-bottom:20px;
    font-size:24px;
    line-height: calc(33 / 24);
    color: #0A3E6F;
}

.scenes-right_msg{
    margin-bottom:20px;
}

.scenes-right_msg p{
    font-size:16px;
}

.scenes-right_link a{
    position: relative;
    color:#22262a;
    text-decoration: underline;
}

.scenes-right_link a:after {
    position: absolute;
    top: 40%;
    right: -20px;
    display: inline-block;
    width: 8px;
    height: 8px;
    vertical-align: middle;
    content: '';
    background-image: url(../images/scenes/ftop_arrow.svg);
    background-repeat: no-repeat;
    transition: .5s;
}

.scenes-right_link a:hover {
    font-weight: bold;
    color: #0e6ec8;
}

.scenes-right_link a:hover:after {
    transform: translateX(.25rem);
}

/*
.scenes-right_link span{
    display: inline-block;
    font-size: 10px;
    margin-left: 20px;
    color:#0E6EC8;
} */

.contact-link{
    width:600px;
    margin:80px auto;
}

.contact-link-area{
    display:flex;
    justify-content: space-between;
}

.contact-link-area_block{
    width:260px;
}

.contact-link-title{
    margin-bottom:20px;
    font-size: 22px;
    text-align: center;
}

.contact-link-title .orenge{
    color:#F15A24;
}

.contact-link-title .blue{
    color:#0E6EC8;
}

.contact-link_btn{
    border-radius: 40px;
}

.contact-link_btn.orenge{
    background:linear-gradient(#F15A24,#F7931E);
}
.contact-link_btn.blue{
    background:linear-gradient(#2D8AE2,#5DAAF3);
}

.contact-link_btn a{
    display: block;
    width:260px;
    padding:10px 0;
    font-size: 15px;
    font-weight: bold;
    color:#fff;
    text-align: center;
}

.contact-link_msg{
    margin-top:32px;
}

.contact-link_msg p{
    font-size: 16px;
    text-align: center;
}

.ftop-tabs_title.pc{
    display:block;
}

.ftop-tabs_title.sp{
    display:none;
}

.sources-group:nth-child(1) .heading-4{
    margin-top:65px;
}

.sources-group:nth-child(3) .heading-4{
    margin-top:30px;
}

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

    .scenes-left_title{
        font-size: 25px;
    }
}

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

    .scenes-left_title{
        font-size: 23px;
    }
}

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

    .scenes-left_title{
        font-size: 21px;
    }
}
@media screen and (max-width: 1140px) {
    .scenes-section {
        width: 100%;
    }

    .scenes-left:after {
        right: -40px;
    }

    .tab-col-3 .ftop-tabs {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        width: 100%;
        padding: 0;
        margin: 0 auto;
    }

    #toptab.tab-col-3 .ftop-tabs_block {
        width: calc(100% / 3 - 40px);
        max-width: 400px;
        margin: 20px;
        margin-bottom: 1rem;
    }

    /* .scenes-left_img.mw-26 img {
        max-width: 280px;
    } */
}

@media screen and (max-width: 960px){
    #toptab.tab-col-3{
        justify-content: center;
        width:100%;
        padding: 0;
        margin: 40px 0 auto;
    }
    
    .scenes-main {
        padding: 0 20px; 
    }


    /* .scenes-left_img.mw-26 img {
    max-width: 185px;
    } */

    /* .scenes-left_img.mw-30 img {
        max-width: 200px;
        } */

    #toptab.tab-col-3 .ftop-tabs_block {
        width: calc(100% / 2 - 5px);
        max-width: 215px;
        padding: 32px 5px 30px;
        margin: 10px;
    }

    .tab-col-3 .ftop-tabs {
        justify-content: center;
        max-width:500px;
    }
    
    .ftop-tabs_title.pc{
        display:none;
    }
    .ftop-tabs_title.sp{
        display:block;
        padding: 0 0 12px 0;
        line-height: 1.3;
    }

    #toptab.tab-col-3 .ftop-tabs_no{
        font-size: 48px;
    }


    .scenes-section{
        display:block;
        width:100%;
        padding: 0;
        margin:40px auto 120px auto;
    }
    
    .scenes-left{
        position: relative;
        width:100%;
        padding: 10px 5px 20px 10px;        
        margin-bottom:50px; 
        border-radius: 5px;
    }
    
    .scenes-left_no{
        position:absolute;
        top:-70px;
        left:0;
        z-index: 2;
        font-family: Arial, Helvetica, sans-serif;
        font-size:70px;
        font-weight: bold;
        color:#E4F2FF;
    }
    .scenes-left_title{
        position: relative;
        z-index: 3;
        font-size: 22px;
        white-space:inherit;
    }
    .scenes-left_title span{
        color:#0E6EC8; 
    }
    
    .scenes-left_img{
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top:20px;
    }
    
    .scenes-left:after{
        position: absolute;
        top:104%;
        left: 47%;
        width:28px;
        height: 33px;
        content:"";
        background:url(../images/scenes/arrow.png) no-repeat;
        background-size: 28px 33px;
        transform: rotate(90deg);
    }
    
    .scenes-right{
        width:100%;
        padding:40px 20px;
        background:#E4F2FF;
        border-radius: 5px;
    }
    
    .scenes-right_title{
        margin-bottom:20px;
        font-size:18px;
        line-height: calc(33 / 24);
    }
    
    .scenes-right_msg{
        margin-bottom:20px;
    }
    
    .scenes-right_msg p{
        font-size:16px;
    }
    
    .scenes-right_link a{
        font-size: 15px;
        color:#22262a;
        text-decoration: underline;
    }
    
    .scenes-right_link span{
        display: inline-block;
        margin-left: 20px;
        font-size: 10px;
    }
    .contact-link{
        width:100%;
        margin:-40px auto 80px auto;
    }

    .contact-link-area{
        display:block;
        width:100%;
        margin:0 auto;
    }
    
    .contact-link-area_block{
        width:100%;
        margin-bottom:33px;
    }
    
    .contact-link-title{
        margin-bottom:20px;
        font-size: 18px;
        text-align: center;
    }
    
    .contact-link-title .orenge{
        color:#F15A24;
    }
    
    .contact-link-title .blue{
        color:#0E6EC8;
    }
    
    .contact-link_btn{
        max-width: 295px;
        margin: 0 auto;
        border-radius: 40px;
    }
    
    .contact-link_btn.orenge{
        background:linear-gradient(#F15A24,#F7931E);
    }
    .contact-link_btn.blue{
        background:linear-gradient(#2D8AE2,#5DAAF3);
    }
    
    .contact-link_btn a{
        display: block;
        width:100%;
        padding:10px 0;
        font-weight: bold;
        color:#fff;
        text-align: center;
    }
    
    .contact-link_msg{
        margin-top:40px;
    }
    
    .contact-link_msg p{
        font-size: 16px;
        font-weight: initial;
        text-align: center;
    }

    .contact-link br.pc{
        display:none;
    }

    #related .fluid {
        padding: 0 20px;
    }
}

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

    .br_tab {
        display: none;
    }

}


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

    #toptab.tab-col-3 .ftop-tabs_block {
        width: calc(100% / 2 - 5px);
        max-width: 160px;
    }

    /* .scenes-left_img img {
        max-width: 153px;
    } */


}


.form-title {
    font-size: 40px;
}