@charset "UTF-8";

/*------------------------------------------------------------------------------------------------------------------------------
          
BUSINESS
									
------------------------------------------------------------------------------------------------------------------------------*/

/*------------------------------------------------------ MV */

#inrMv{
    background: url("../images/business/mv_business.jpg") center center / cover no-repeat;
}

/*------------------------------------------------------ MESSAGE */

#business .intro .introInner {
}

#business .intro .introInner .introTxt .introHead {
	font-size: 2.4rem;
    line-height: 1.48;
    color: #fff;
}

#business .intro .introInner .introTxt .txt {
    text-align: justify;
    margin-top: 15px;
}

#business .intro .introInner .introTxt .txt br {
	display: none;
}

#business .intro .introInner .introImg {
    width: calc(100% - 30px);
    position: relative;
    margin: 40px auto 0;
}

#business .intro .introInner .introImg .center {
	position: relative;
	z-index: 5;
}

/*BUSINESS*/

#business .intro .introInner .business {
    margin-top: 60px;
}

#business .intro .introInner .business .businessList .blInner {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column-reverse;
}

#business .intro .introInner .business .businessList .blInner + .blInner {
	margin-top: 45px;
}

#business .intro .introInner .business .businessList .blInner .blTxt {
    margin-top: 15px;
}

#business .intro .introInner .business .businessList .blInner .blTxt .head {
    font-size: 2rem;
    color: #0078dc;
}

#business .intro .introInner .business .businessList .blInner .blTxt .head + p {
    line-height: 1.64;
    margin-top: 5px;
}

#business .intro .introInner .business .businessList .blInner .blTxt .blBtn {
	text-align: center;
    margin-top: 20px;
}

#business .intro .introInner .business .businessList .blInner .blTxt .blBtn .blBtnInner {
	display: inline-block;
}

#business .intro .introInner .business .businessList .blInner .blImg {
}
	
/*THINKTANK*/

#business .intro .introInner .thinkTank {
	margin-top: 60px;
}

#business .intro .introInner .thinkTank .thinkTankInner {
    padding: 30px;
    border: 1px solid rgb(255 255 255 / 50%);
}

#business .intro .introInner .thinkTank .thinkTankInner .head {
    font-size: 2rem;
	text-align: center;
	color: #fff;
}

#business .intro .introInner .thinkTank .thinkTankInner .txt {
	text-align: justify;
    line-height: 1.64;
    margin-top: 15px;
    color: #fff;
    opacity: .75;
}

/*------------------------------------------------------ GROUP */

#business .group .groupInner .sectionHead {
	padding: 0;
}

#business .group .groupInner .groupTxt {
	text-align: justify;
    margin-top: 25px;
}

#business .group .groupInner .groupImg {
	position: relative
}

#business .group .groupInner .groupImg .linkArea {
    display: block;
    width: 37.8%;
    height: 9.1%;
    background-color: #0078dc;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(32%, -328%);
    transition: all 300ms cubic-bezier(0.32, 0.08, 0.24, 1);
}

#business .group .groupInner .groupImg .linkArea.hover {
	opacity: .2;
}


/*------------------------------------------------------------------------------------

以下 TAB 用
									
------------------------------------------------------------------------------------*/

@media print, screen and (min-width: 500px) {
    
    
    #business .contents {
        margin-bottom: 0;
    }

    /*------------------------------------------------------ INTRO */

    #business .intro .introInner .introTxt .introHead {
        font-size: 3.4rem;
        max-width: 880px;
        margin-left: auto;
        margin-right: auto;
    }

    #business .intro .introInner .introTxt .txt {
        max-width: 880px;
        margin-top: 40px;
        margin-left: auto;
        margin-right: auto;
    }

    #business .intro .introInner .introImg {
        width: 60%;
        max-width: 830px;
        min-width: 480px;
        margin: 60px auto 0;
    }

    /*BUSINESS*/

    #business .intro .introInner .business .businessList {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        margin-bottom: 0;
    }

    #business .intro .introInner .business .businessList .blInner {
        flex-direction: column-reverse;
        width: calc((100% - 13%) / 3);
    }

    #business .intro .introInner .business .businessList .blInner + .blInner {
        margin-top: 0;
    }

    #business .intro .introInner .business .businessList .blInner .blTxt {
        width: 100%;
        padding-left: 0;
        margin-top: 15px;
    }

    #business .intro .introInner .business .businessList .blInner .blTxt .head {
        font-size: 2rem;
    }

    #business .intro .introInner .business .businessList .blInner .blImg {
        width: 100%;
    }

    #business .intro .introInner .business .businessList .blInner .blTxt .blBtn {
        margin-top: 25px;
    }

    /*THINKTANK*/

    #business .intro .introInner .thinkTank .thinkTankInner {
        padding: 50px;
        display: flex;
        justify-content: space-between;
    }

    #business .intro .introInner .thinkTank .thinkTankInner .head {
        width: 280px;
        font-size: 2.6rem;
        text-align: left;
    }

    #business .intro .introInner .thinkTank .thinkTankInner .txt {
        width: calc(100% - 280px);
        margin-top: 0;
    }

    /*------------------------------------------------------ GROUP */

    #business .group .groupInner {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
    }

    #business .group .groupInner .sectionHead {
        width: 40%;
        margin: 0;
        position: sticky;
        top: 91px;
        left: 0;
    }

    #business .group .groupInner .groupTxt {
        margin-top: 60px;
    }

    #business .group .groupInner .groupImg {
        width: 50%;
        margin-left: 10%;
    }
    
    
}


/*------------------------------------------------------------------------------------

以下 PC 用
									
------------------------------------------------------------------------------------*/

@media print, screen and (min-width: 900px) {

/*------------------------------------------------------ MESSAGE */
    
    #business .contents {
        margin-bottom: 0;
    }

    /*------------------------------------------------------ INTRO */

    #business .intro .introInner .introTxt .introHead {
        font-size: 3.4rem;
        max-width: 880px;
        margin-left: auto;
        margin-right: auto;
    }

    #business .intro .introInner .introTxt .txt {
        max-width: 880px;
        margin-top: 40px;
        margin-left: auto;
        margin-right: auto;
    }

    #business .intro .introInner .introImg {
        width: 60%;
        max-width: 830px;
        min-width: 480px;
        margin: 60px auto 0;
    }

    /*BUSINESS*/

    #business .intro .introInner .business .businessList {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        margin-bottom: 0;
    }

    #business .intro .introInner .business .businessList .blInner {
        flex-direction: column-reverse;
        width: calc((100% - 13%) / 3);
    }

    #business .intro .introInner .business .businessList .blInner + .blInner {
        margin-top: 0;
    }

    #business .intro .introInner .business .businessList .blInner .blTxt {
        width: 100%;
        padding-left: 0;
        margin-top: 15px;
    }

    #business .intro .introInner .business .businessList .blInner .blTxt .head {
        font-size: 2.6rem;
    }

    #business .intro .introInner .business .businessList .blInner .blImg {
        width: 100%;
    }

    #business .intro .introInner .business .businessList .blInner .blTxt .blBtn {
        margin-top: 25px;
    }

    /*THINKTANK*/

    #business .intro .introInner .thinkTank .thinkTankInner {
        padding: 50px;
        display: flex;
        justify-content: space-between;
    }

    #business .intro .introInner .thinkTank .thinkTankInner .head {
        width: 280px;
        font-size: 2.6rem;
        text-align: left;
    }

    #business .intro .introInner .thinkTank .thinkTankInner .txt {
        width: calc(100% - 280px);
        margin-top: 0;
    }

    /*------------------------------------------------------ GROUP */

    #business .group .groupInner {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
    }

    #business .group .groupInner .sectionHead {
        width: 40%;
        margin: 0;
        position: sticky;
        top: 91px;
        left: 0;
    }

    #business .group .groupInner .groupTxt {
        margin-top: 60px;
    }

    #business .group .groupInner .groupImg {
        width: 50%;
        margin-left: 10%;
    }
	
	
}