@charset "UTF-8";
/* ---------------------------------------------
  TOP
-----------------------------------------------*/



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

}


/*  sec01 -------------------------------------------*/
.sec01{
    position: relative;
    padding: 10px 0 0 0;
    box-sizing: border-box;
}

.sec01 .secIn{
    position: relative;
}

.sec01 .txt{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    flex-direction: column;
    padding-bottom: 75px;
    box-sizing: border-box;
    z-index: 5;
}

.sec01 .txt p{
    color: #FFF;
    font-size: 2.0rem;
    font-weight: 700;
    box-sizing: border-box;
}
.sec01 .txt p.lead{
    font-size: 4.6rem;
    line-height: 1.86;
    font-weight: 700;
}
.sec01 .txt p+p{ margin-top: 35px;}

.sec01 .img{
    position: relative;
    width: 100%;
    z-index: 1;
}
.sec01 .img img{
    width: 100%;
    max-width: inherit;
    height: auto;
}


@media screen and (max-width: 767px) {
    .sec01{
        padding: 0;
    }
    .pc_inlie{ display: none}
    .sec01 .wrap{ width: 86%;}
    .sec01 .txt{
        padding: 6% 0;
    }
    .sec01 .txt p{
        font-size: 3.8vw;
    }
    .sec01 .txt p.lead{
        font-size: 6.8vw;
    }
    .sec01 .txt p+p{ margin-top: 4%;}
    .sec01 .secIn:last-of-type .txt{ justify-content: center;}
}


/*  sec03 -------------------------------------------*/
.sec03{
    position: relative;
    padding: 55px 0;
    box-sizing: border-box;
}

.sec03 .wrap{
    max-width: 1182px;
    text-align: center;
}
.sec03 .img{
    position: relative;
    background: url("../img/concept/bg_sec03_pc.jpg") no-repeat center center;
    background-size: 100% auto;
}
.sec03 img{
    position: relative;
    width: 100%;
    max-width: 1182px;
    height: auto;
    z-index: 2;
}
.sec03 a{
    outline: none;
}
.sec03 .hover_txt .white:before{
    position: absolute;
    display: block;
    content: '';
    background: #FFF;
    transition: .4s;
}
.sec03 .hover_txt .white.active:before{
    width: 0 !important;
}

.sec03 .hover_txt .white.txt01:before{
    top: 0px;
    right: 60%;
    width: 31%;
    max-width: 364px;
    height: 19%;
}
.sec03 .hover_txt .white.txt02:before{
    top: 21%;
    right: 70.5%;
    width: 30%;
    max-width: 364px;
    height: 20%;
}
.sec03 .hover_txt .white.txt03:before{
    top: 64.5%;
    right: 68.6%;
    width: 30%;
    max-width: 364px;
    height: 15.5%;
}
.sec03 .hover_txt .white.txt04:before{
    bottom: -2px;
    right: 51.2%;
    width: 41%;
    max-width: 464px;
    height: 15.6%;
}
.sec03 .hover_txt .white.txt05:before{
    bottom: 21%;
    right: 0;
    width: 32%;
    max-width: 378px;
    height: 14.8%;
}
.sec03 .hover_txt .white.txt06:before{
    top: 21%;
    right: 0;
    width: 32%;
    max-width: 378px;
    height: 20.6%;
}
.sec03 .hover_txt .white.txt07:before{
    top: 0;
    right: 9.5%;
    width: 30.6%;
    max-width: 378px;
    height: 19.6%;
}


@media screen and (max-width: 767px) {
    .sec03{
        padding: 10% 0;
    }

    .sec03 .wrap{
        width: 100%;
        max-width: inherit;
        display: block;
    }
    .sec03 .img{
        position: relative;
        background: none
    }
    .sec03 img{
        max-width: 960px;
    }
    /* popup */
    .mfp-container {
        padding-left: 7%;
        padding-right: 7%;
    }
    .mfp-auto-cursor .mfp-content{
        padding: 10% 0 28% 0;
    }
    .mfp-close{
        position: absolute !important;
        width: 22vw;
        height: auto;
        left: 0;
        right: 0;
        top: auto !important;
        bottom: -9vw;
        margin: 0 auto;
        outline: none;
        opacity: 1 !important;
    }
    .mfp-close-btn-in .mfp-close{position: relative;}
    .mfp-close:after{
        display: block;
        content: '';
        background: url("../img/concept/close_btn.png") no-repeat center center;
        background-size: 100% auto;
        width: 100%;
        max-width: 237px;
        height: 7vw;
        max-height: 52px;
        margin: 0 auto;
    }
    .mfp-close:hover{
        opacity: 1;
        outline: none;
    }

    .popup-box{
        position: relative;
        background: #FFF;
        padding: 16% 10%;
        box-sizing: border-box;
    }
    .popup-box h2{
        width: 70%;
        margin: 0 auto;
        font-size: 4.6vw;
        font-weight: 700;
        text-align: center;
        border-bottom: 1px solid #646464;
        padding-bottom: 10px;
        margin-bottom: 15px;
        box-sizing: border-box;
    }
    .popup-box p{
        font-size: 4vw;
        line-height: 2;
    }



}