/*///////////////////////////////////////////////////////////
　メインビジュアル
///////////////////////////////////////////////////////////*/

#eWhiteboard_visual{
    position: relative;
    background-color: #f4f4f4;
}

.visual_wrap{
    position: relative;
    z-index: 0;
}

@media screen and (min-width: 641px) {
    .visual_wrap{
        max-width: 1366px;
        margin: 0 auto;
    }
}

.bx-wrapper{
    box-shadow: none;
    border: none;
}

ul.bxslider {
    margin: 0;
    padding: 0;
}

ul.bxslider img{
    width: 100%;
}

.bx-wrapper{
    margin: 0;
}

.bxslider li:not(:first-child){
    display: none;
}

.text{
    color: #ffffff;
    font-size: 24px;
    text-align: center;
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
    z-index: 1;
}

@media screen and (max-width: 1000px) {
    .text{
        font-size: 20px;
    }
}

@media screen and (max-width: 640px) {
    .text{
        font-size: 16px;
    }
}

.text p{
    margin: 0;
}

.text p img{
    width: 100%;
}

.text p:first-child{
    width: 541px;
    margin: 0 auto 20px;
}

.text p:nth-child(2){
    width: 288px;
    margin: 0 auto;
}

@media screen and (max-width: 1000px) {
    .text p:first-child{
        width: 68%;
        margin: 0 auto 2vw;
    }

    
    .text p:nth-child(2){
        width: 28%;
        margin: 0 auto;
    }
}


@media screen and (max-width: 1000px) {
    .text p:first-child{
        font:32px bold ;
    }
}

@media screen and (max-width: 640px) {
    .text p:first-child{
        font:24px bold ;
    }
}

.border-wrap{
    position: absolute;
    top: calc(50% - 140px);
    left: calc(50% - 186px);
    z-index: 1;
}

@media screen and (max-width: 1000px) {
    .border-wrap{
        top: calc(50% - 14vw);
        left: calc(50% - 18vw);
    }
}

@media screen and (max-width: 640px) {
    .border-wrap{
        top: calc(50% - 75px);
        left: calc(50% - 97px);
    }
}

.border-wrap .container{
    transition: all 300ms 0s ease;
}

.border-wrap .container.active{
    clip-path: polygon(100% 0%, 0% 0%, 0% 24%, 100% 24%, 100% 46%, 0% 46%,0% 100%, 100% 100%);
}

@media screen and (max-width: 1000px) {
    .border-wrap .container.active{
        clip-path: polygon(100% 0%, 0% 0%, 0% 22%, 100% 22%, 100% 56%, 0% 56%,0% 100%, 100% 100%);
    }
}

@media screen and (max-width: 640px) {
    .border-wrap .container.active{
        clip-path: polygon(100% 0%, 0% 0%, 0% 28%, 100% 28%, 100% 62%, 0% 62%,0% 100%, 100% 100%);
    }
}

/* ここから下がボーダーのCSS　*/
.border {
    position: relative;
    display: block;
    width: 372px;
    height: 280px;
    line-height: 57px;
    text-align: center;
    text-decoration: none;
    transform: rotate(180deg) ;
}

@media screen and (max-width: 1000px) {
    .border {
        width: 36vw;
        height: 28vw;
    }
}

@media screen and (max-width: 640px) {
    .border {
        width: 194px;
        height: 150px;
    }
}
    
.border::before {
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    width: 0;
    height: 0;
    border: 4px solid transparent;
    box-sizing: border-box;
    
}
    
.border::after {
    content: '';
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: 0;
    height: 0;
    border: 4px solid transparent;
    box-sizing: border-box;
}

@media screen and (max-width: 640px) {
    .border::before {
        border: 3px solid transparent;
    }

    .border::after {
        border: 3px solid transparent;
    }
}


.border.active {
    color: #384878;
}
    
.border.active::before {
    width: 100%;
    height: 100%;
    border-top-color: #ffffff;
    border-right-color: #ffffff;
    transition: width .5s ease-out, height .5s ease-out .5s;

}

.border.active::after {
    width: 100%;
    height: 94%;
    border-bottom-color: #ffffff;
    border-left-color: #ffffff;
    transition: border-color 0s ease-out 1s, width .5s ease-out 1s, height .5s ease-out 1.5s;
}


/*fadeup*/
.fadeup_main {
	opacity: 0;
	-webkit-transform: translate(0, 20px);
	transform: translate(0, 20px);
	-webkit-transition: all 1.5s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
	transition: all 1.5s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
    z-index: 999999;
}
.fadeup_main.active {
	opacity: 1;
	-webkit-transform: translate(0, 0);
	transform: translate(0, 0);
}

.fade_cont.fadeup {
	opacity: 0;
	-webkit-transform: translate(0, 50px);
	transform: translate(0, 50px);
	-webkit-transition: 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0s;
	transition: 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0s;
    z-index: 999999;
}

.eWhiteboard_contents04 .fade_cont.fadeup:nth-child(2){
	-webkit-transition: 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.25s;
	transition: 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.25s;
}
@media screen and (min-width: 641px) {
    .eWhiteboard_contents04 .fade_cont.fadeup:nth-child(3){
        -webkit-transition: 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.5s;
        transition: 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.5s;
    }
    .eWhiteboard_contents04 .fade_cont.fadeup:nth-child(4){
        -webkit-transition: 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.75s;
        transition: 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.75s;
    }
}
@media screen and (max-width: 640px) {
    .eWhiteboard_contents04 .fade_cont.fadeup:nth-child(3){
        -webkit-transition: 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0s;
        transition: 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0s;
    }
    .eWhiteboard_contents04 .fade_cont.fadeup:nth-child(4){
        -webkit-transition: 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.25s;
        transition: 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.25s;
    }
}

.fade_cont.fadeup.active {
	opacity: 1;
	-webkit-transform: translate(0, 0);
	transform: translate(0, 0);
}

/*fadein*/
.fade_cont.fadein {
	opacity: 0;
	-webkit-transition: all 1.5s cubic-bezier(0.22, 1, 0.36, 1) 0s;
	transition: all 1.5s cubic-bezier(0.22, 1, 0.36, 1) 0s;
}
.fade_cont.fadein.active {
	opacity: 1;
}

.jp_movie_box:after{
    content: "";
}


/*///////////////////////////////////////////////////////////
　メインビジュアル
///////////////////////////////////////////////////////////*/

#eWhiteboard_movie .movie_wrap{
    width: 300px;
    margin:  50px auto 10px;
}

@media screen and (max-width: 640px) {
    #eWhiteboard_movie .movie_wrap{
        width: 88%;
        margin:  6vw auto 2vw;
    }
}

@media screen and (max-width: 640px) {
    #eWhiteboard_movie .movie_wrap a{

    }
}

/*///////////////////////////////////////////////////////////
　コンテンツ
///////////////////////////////////////////////////////////*/
.eWhiteboard_contents .wide_cont {
    position: relative;
}

.eWhiteboard_contents img{
    width: 100%;
    height: auto;
    vertical-align: bottom;
}

@media screen and (min-width: 641px) {
    .eWhiteboard_contents01 .wide_cont_wrap{
        background: linear-gradient(180deg,#ffffff 0%,#ffffff 40px,#f2f2f2 40px,#f2f2f2 100%);
    }
    .eWhiteboard_contents02 .wide_cont_wrap{
        width: 100%;
        background: #eaeaea;
    }

    .eWhiteboard_contents03 .wide_cont_wrap{
        width: 100%;
        background: #615e5b;
    }


    .eWhiteboard_contents .wide_cont{
        max-width: 1366px;
        margin: 0 auto;
    }

    .eWhiteboard_contents .wide_cont .text_area{
        line-height: 1.5em;
        position: absolute;
        top: 50%;
        left: 18%;
        -webkit-transform: translateY(-50%) translateX(-18%);
        transform: translateY(-50%) translateX(-18%);
    }

    .eWhiteboard_contents.eWhiteboard_contents01 .wide_cont .text_area{
        top: 55%;
        -webkit-transform: translateY(-55%) translateX(-18%);
        transform: translateY(-55%) translateX(-18%);
    }
}

@media screen and (min-width: 641px) {
    .eWhiteboard_contents.eWhiteboard_contents03 .wide_cont .text_area{
        left: 50%;
        -webkit-transform: translateY(-50%) translateX(-50%);
        transform: translateY(-50%) translateX(-50%);
        text-align: center;
    }
}

@media screen and (max-width: 640px) {
    .eWhiteboard_contents .wide_cont .text_area{
        line-height: 1.5em;
        padding: 30px;
        background: #a5a5a5;
    }

    .eWhiteboard_contents.eWhiteboard_contents01 .wide_cont .text_area{
        background: #f1f1f1;
    }

}

@media screen and (min-width: 641px) {
    .half_cont{
        max-width: 1366px;
        margin: 0 auto;
    }
}

.half_cont_btn a{
    font-size: 14px;
    font-weight: bold;
    display: inline-block;
    padding:0.5em 1em;
    background-color: #A5A5A5;
    color: #ffffff;
    border-radius: 8px;
    text-align: center;
}

.half_cont_btn a:hover{
    text-decoration: none;
    background: #666666;
}

.half_cont_btn a span,
.cont_btm_btn a span{
    color: #ffffff;
    position: relative;
    padding: 0 40px;
}
.half_cont_btn a span::before{
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 7px;
    height: 7px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
    margin-top: -5px;
}

.cont_btm_btn{
    text-align: center;
    margin: 100px 0;
}

@media screen and (max-width: 640px) {
    .cont_btm_btn{
        text-align: center;
        margin: 40px 0;
    }
}

.eWhiteboard_contents04 .cont_btm_btn,
.eWhiteboard_contents05 .cont_btm_btn{
    margin: 40px 0;
}

@media screen and (max-width: 640px) {
    .eWhiteboard_contents04 .cont_btm_btn,
    .eWhiteboard_contents05 .cont_btm_btn{
        margin: 20px 0;
    }
}

.cont_btm_btn a{
    font-size: 18px;
    font-weight: bold;
    display: inline-block;
    padding:0.5em 1em;
    background-color: #0d63dc;
    color: #ffffff;
    border-radius: 8px;
    text-align: center;
}

.cont_btm_btn a:hover{
    text-decoration: none;
    background-color: #0b51b3;
}

.cont_btm_btn a span::before{
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 9px;
    height: 9px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
    margin-top: -5px;
}

.eWhiteboard_contents .wide_cont{
    color: #ffffff;
}

.eWhiteboard_contents.eWhiteboard_contents01 .wide_cont{
    color: #3e3e3e;
}

.eWhiteboard_contents .half_cont_icon{
    margin: 0 auto;
}

.eWhiteboard_contents01 .half_cont:nth-child(2) .half_cont_icon{ width: 91px;}
.eWhiteboard_contents01 .half_cont:nth-child(3) .half_cont_icon{ width: 132px;}
.eWhiteboard_contents01 .half_cont:nth-child(4) .half_cont_icon{ width: 120px;}
.eWhiteboard_contents02 .half_cont:nth-child(2) .half_cont_icon{ width: 161px;}
.eWhiteboard_contents02 .half_cont:nth-child(3) .half_cont_icon{ width: 114px;}
.eWhiteboard_contents02 .half_cont:nth-child(4) .half_cont_icon{ width: 97px;}
.eWhiteboard_contents03 .half_cont:nth-child(2) .half_cont_icon{ width: 92px;}
.eWhiteboard_contents03 .half_cont:nth-child(3) .half_cont_icon{ width: 139px;}

@media screen and (min-width: 641px) {
    .eWhiteboard_contents{
        max-width: 100%;
        margin: 0 auto;
    }

    .eWhiteboard_contents .wide_cont .text_area p:first-child{
        margin-bottom: 1.5em;
    }
    .eWhiteboard_contents01 .text_area p:first-child{
        width: 388px;
    }
    .eWhiteboard_contents02 .text_area p:first-child{
        width: 440px;
    }
    .eWhiteboard_contents03 .text_area p:first-child{
        width: 390px;
        margin:0 auto 1.5em;
    }

    .half_cont dl{
        display: flex;
        align-items: center;
    }

    .half_cont dl dt,
    .half_cont dl dd{
        text-align: center;
        width: 50%;
        margin: 0;
    }

    .half_cont.left_text dl dt{
        order: 1;
    }

    .half_cont_text{
        margin: 1.5em 0;
    }
}

@media screen and (max-width: 1000px) {
    .eWhiteboard_contents01 .half_cont:nth-child(2) .half_cont_icon{ width: 8vw;}
    .eWhiteboard_contents01 .half_cont:nth-child(3) .half_cont_icon{ width: 13vw;}
    .eWhiteboard_contents01 .half_cont:nth-child(4) .half_cont_icon{ width: 12vw;}
    .eWhiteboard_contents02 .half_cont:nth-child(2) .half_cont_icon{ width: 16vw;}
    .eWhiteboard_contents02 .half_cont:nth-child(3) .half_cont_icon{ width: 11vw;}
    .eWhiteboard_contents02 .half_cont:nth-child(4) .half_cont_icon{ width: 9vw;}
    .eWhiteboard_contents03 .half_cont:nth-child(2) .half_cont_icon{ width: 8vw;}
    .eWhiteboard_contents03 .half_cont:nth-child(3) .half_cont_icon{ width: 14vw;}

    .half_cont_text{
        margin: 1em 0;
    }
}

@media screen and (max-width: 640px) {
    .eWhiteboard_contents .wide_cont .text_area p:first-child{
        margin-bottom: 1.5em;
    }

    .eWhiteboard_contents.eWhiteboard_contents03 .wide_cont .text_area p:first-child{
        text-align: center;
    }

    .eWhiteboard_contents .wide_cont .text_area p:first-child img{
        width: auto;
        height: 50px;
    }

    .eWhiteboard_contents01 .half_cont:nth-child(2) .half_cont_icon{ width: 91px;}
    .eWhiteboard_contents01 .half_cont:nth-child(3) .half_cont_icon{ width: 132px;}
    .eWhiteboard_contents01 .half_cont:nth-child(4) .half_cont_icon{ width: 120px;}
    .eWhiteboard_contents02 .half_cont:nth-child(2) .half_cont_icon{ width: 161px;}
    .eWhiteboard_contents02 .half_cont:nth-child(3) .half_cont_icon{ width: 114px;}
    .eWhiteboard_contents02 .half_cont:nth-child(4) .half_cont_icon{ width: 97px;}
    .eWhiteboard_contents03 .half_cont:nth-child(2) .half_cont_icon{ width: 92px;}
    .eWhiteboard_contents03 .half_cont:nth-child(3) .half_cont_icon{ width: 139px;}

    .half_cont dl dd{
        text-align: center;
        margin: 3em auto 4em;
    }

    .half_cont_text{
        margin: 1em 0;
    }

}

/*eWhiteboard_contents04*/

.eWhiteboard_contents04{
    background: #f4f4f4;
}

.eWhiteboard_contents04 img{
    width: 100%;
}

.eWhiteboard_contents04 .cnt_max{
    max-width: 1366px;
}

.eWhiteboard_contents04 .clm1.clm4.rsp_break_clm2{
    width: 70%;
    margin: 16px auto 0;
}

@media screen and (max-width: 640px) {
    .eWhiteboard_contents04 .clm1.clm4.rsp_break_clm2{
        width: 100%;
    }
}

.eWhiteboard_contents04 .clm4 .clm{
    color: #7c7c7C;
    padding: 0 20px;
}

@media screen and (max-width: 640px) {
    .eWhiteboard_contents04 .clm4 .clm{
        margin-bottom: 1.5em;
    }
}

.eWhiteboard_contents04 .clm4 .clm .al_c{
    margin-top: 1em;
    font-weight: bold;
}

.eWhiteboard_contents04 .clm1:first-child p:first-child{
    width: 252px;
    margin:  0 auto;
}


/*eWhiteboard_contents05*/

.eWhiteboard_contents05 img{
    width: 100%;
    height: auto;
}

.eWhiteboard_contents05 .cnt_max{
    max-width: 1366px;
}

.eWhiteboard_contents05 .clm:first-child p:first-child{
    width: 404px;
    margin:  0 auto;
}

@media screen and (max-width: 640px) {
    .eWhiteboard_contents05 .clm:first-child p:first-child{
        width: 303px;
    }
}

.eWhiteboard_contents05 .clm:nth-child(2) img{
    width: 404px;
}

@media screen and (max-width: 640px) {
    .eWhiteboard_contents05 .clm:nth-child(2) img{
        width: 303px;
    }
}

.eWhiteboard_contents05 .clm:nth-child(3) p{
    font-size: 20px;
    font-weight: bold;
}


@media screen and (max-width: 640px) {
    .eWhiteboard_contents .pc{
        display: none;
    }
}
/*///////////////////////////////////////////////////////////
　コンテンツ
///////////////////////////////////////////////////////////*/