/* main *************************************************************/


main{
    position: relative;
    height: 750px;
    z-index: 1;
}


@media screen and (max-width: 1000px) {
    main{
        height: 75vw;
    }
}

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

    main{
        height: calc(80vh - 100px);
        min-height: 600px;
    }
}


@media screen and (max-width: 560px) {
    main{
        min-height: auto;
        height: 80vh;
    }
}


/* main photo */

main ul{
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-bottom-right-radius: 100px;
    border-bottom-left-radius: 100px;  
    overflow: hidden;  
}


@media screen and (max-width: 1920px) {
    main ul{
        border-bottom-right-radius: 5.2vw;
        border-bottom-left-radius: 5.2vw;
    }
}


main ul li{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-size: cover;
    background-position: center top
}

main ul li#main_1{
    background-image: url(../img/feature/main_1.jpg);
}

main ul li#main_2{
    background-image: url(../img/feature/main_2.jpg);
}

main ul li#main_3{
    background-image: url(../img/feature/main_3.jpg);
}

main ul li#main_4{
    background-image: url(../img/feature/main_4.jpg);
}

main ul li:nth-child(1){
    z-index: 10;
}

main ul li:nth-child(2){
    z-index: 8;
}

main ul li:nth-child(3){
    z-index: 6;
}

main ul li:nth-child(24){
    z-index: 4;
}

main ul li.move{
    opacity: 0;
    animation: alpha_100 .7s forwards cubic-bezier(.07,.68,.41,1) .3s;
}



/* main photo */



/* main text */

main div {
    position: relative;
    width: 92%;
    max-width: 850px;
    text-align: center;
    margin: 0 auto;
    z-index: 100;
    padding-top: 160px;
    color: var(--white);
}

main div aside{
    display: block;
    width: 200px;
    height: 40px;
    margin: 0 auto;
}

main div h1{
    font-size: 110px;
    font-weight: 700;
    line-height: 1;
    padding: 10px 0px;
}

main div p{
    text-align: center;
}

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

    main div {
        padding-top: 16vw;
    }

    main div aside{
        width: 160px;
        height: auto;
    }
    
    main div h1{
        font-size: 11vw;
        padding: 10px 0px;
    }
    
}


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

    main{
        display: flex;
        align-items: center;
		justify-content: center;
    }

    main div {
        padding-top: 0vw;
        padding-bottom: 3vw;
    }

}

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

    main div aside{
        width: 30vw;
    }
    

}


/* main text */


/* main *************************************************************/



/* button area *************************************************************/



.bt_man ul{
    position: relative;
    width: 92%;
    max-width: 1150px;
    margin: 0 auto;
    z-index: 300;
    z-index: 1;
}

.bt_man ul li{
    position: relative;
    width: 23.5%;
    max-width: 250px;
    cursor: pointer;
    z-index: 1;
}

.bt_man ul li section{
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 125px;
    overflow: hidden;
    z-index: 1;
}

.bt_man ul li div{
    position: absolute;
    width: 100%;
    line-height: 1.1;
    top: 48%;
    transform: translateY(-50%);
    z-index: 200;
    text-align: center;
}

.bt_man ul li div span{
    font-size: 30px;
    font-weight: 400;
    color: var(--white);
}

.bt_man ul li article{
    transition: all 500ms 0s ease;
    position: absolute;
    width: 100%;
    line-height: 1.4;
    top: 70%;
    transform: translateY(-50%);
    z-index: 150;
    text-align: center;
    color: var(--white);
    opacity: 0;
}

.bt_man ul li article strong{
    display: block;
    text-align: center;
    font-size: 20px;
    padding-bottom: 5px;
}

.bt_man ul li article small{
    font-size: 14px;
}

#wrapper.man_1 .bt_man ul li:nth-child(1) article ,
#wrapper.man_2 .bt_man ul li:nth-child(2) article ,
#wrapper.man_3 .bt_man ul li:nth-child(3) article ,
#wrapper.man_4 .bt_man ul li:nth-child(4) article {
    opacity: 1;
}


.bt_man ul li figure{
    background-size: cover;
    background-position: center center;
}

#wrapper.man_1 .bt_man ul li:nth-child(1) figure{
    background-image: url(../img/feature/man_1_f.jpg);
}

#wrapper.man_2 .bt_man ul li:nth-child(2) figure{
    background-image: url(../img/feature/man_2_f.jpg);
}

#wrapper.man_3 .bt_man ul li:nth-child(3) figure{
    background-image: url(../img/feature/man_3_f.jpg);
}

#wrapper.man_4 .bt_man ul li:nth-child(4) figure{
    background-image: url(../img/feature/man_4_f.jpg);
}

.bt_man ul li figure span{
    transition: all 500ms 0s ease;
    filter: grayscale(1);
}


.pc .bt_man ul li:hover figure span{
    filter: grayscale(0);
}

#wrapper.man_1 .bt_man ul li:nth-child(1) figure span,
#wrapper.man_2 .bt_man ul li:nth-child(2) figure span,
#wrapper.man_3 .bt_man ul li:nth-child(3) figure span,
#wrapper.man_4 .bt_man ul li:nth-child(4) figure span{
    transition: all 500ms 0s ease;
    filter: grayscale(0);
    opacity: 0;
}

.bt_man ul li section::before{
    transition: all 500ms 0s ease;
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgb(0, 0, 0, .3);
    z-index: 100;
}

#wrapper.man_1 .bt_man ul li:nth-child(1) section::before,
#wrapper.man_2 .bt_man ul li:nth-child(2) section::before,
#wrapper.man_3 .bt_man ul li:nth-child(3) section::before,
#wrapper.man_4 .bt_man ul li:nth-child(4) section::before{
    background-color: rgb(20, 125, 179, .4);
}


#header_bt{
    position: relative;
    z-index: 50;
    margin-top: -300px;
    padding-bottom: 160px;
}

#header_bt.bt_man ul li::after{
    content: "";
    display: block;
    position: absolute;
    width: 22px;
    height: 20px;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    background-color: var(--white);
    clip-path: polygon(100% 0, 0 0, 50% 100%);
    z-index: 250;
}


#footer_bt.bt_man{
    position: relative;
    padding-bottom: 180px;
    margin-top: 150px;
}

#footer_bt.bt_man::before{
    content: "";
    position: absolute;
    display: block;
    width: 100vw;
    height: 400px;
    background-color: var(--blue);
    left: 0%;
    z-index: 1;
    bottom: 0
}













@media screen and (max-width: 1150px) {
    
    .bt_man ul li div span{
        font-size: 2.6vw;
    }

    .bt_man ul li article strong{
        font-size: 1.7vw;
        padding-bottom: 5px;
    }
    
    .bt_man ul li article small{
        font-size: 1.2vw;
    }

    #header_bt{
        margin-top: -26vw;
        padding-bottom: 13.5vw;
    }
    

}

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

    #header_bt.bt_man ul li::after{
        width: 2.2vw;
        height: 2vw;
        bottom: 2vw;
    }
    
    .bt_man ul li article{
        line-height: 1.5vw;
    }


    #footer_bt.bt_man{
        position: relative;
        padding-bottom: 10vw;
        margin-top: 0vw;
    }
    
    #footer_bt.bt_man::before{
        content: "";
        position: absolute;
        display: block;
        width: 100vw;
        height: 30vw;
        background-color: var(--blue);
        left: 0%;
        z-index: 1;
        bottom: 0
    }

}

@media screen and (max-width: 767px) {
    
    .bt_man ul li article{
        display: none;
    }

}

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

    .bt_man ul{
        width: 370px;
    }

    .bt_man ul li{
        width: 180px;
        height: 160px;
        max-width: 250px;
        padding-bottom: 60px;
    }

    .bt_man ul li section{
        border-radius: 20vw;
        overflow: hidden;
    }

    .bt_man ul li figure span{
        display: block;
        margin-top: -30px;
    }

    .bt_man ul li figure{
        background-size: cover;
        background-position: center center;
    }

    .bt_man ul li div{
        position: absolute;
        width: 100%;
        line-height: 1.1;
        top: 125px;
        transform: translateY(-50%);
        z-index: 200;
        text-align: center;
       
    }

    .bt_man ul li div span{
        font-size: 15px;
        font-weight: 400;
    }

    #header_bt.bt_man ul li div span{
        color: var(--black);
    }

    #header_bt{
        margin-top: -50px;
        padding-bottom: 100px;
    }

    #header_bt.bt_man ul li::after{
        bottom: auto;
        top: 24vw;
    }

    #footer_bt.bt_man{
        padding-bottom: 20px;
    }

    #footer_bt.bt_man::before{
        content: "";
        position: absolute;
        display: block;
        width: 100vw;
        height: calc(100% - 50px) ;
        background-color: var(--blue);
        left: 0%;
        z-index: 1;
        bottom: 0
    }

}


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

    .bt_man ul{
        width: 90vw;
    }

    .bt_man ul li{
        width: 43vw;
        height: 160px;
        max-width: 250px;
        padding-bottom: 60px;
    }

    .bt_man ul li figure span{
        display: block;
        margin-top: -7vw;
    }

}




/* button area *************************************************************/





/* content *************************************************************/

.contentsbox{
    position: relative;
    width: 100%;
    top: 0px;
}



#wrapper.man_1 .contentsbox#content_1,
#wrapper.man_2 .contentsbox#content_2,
#wrapper.man_3 .contentsbox#content_3,
#wrapper.man_4 .contentsbox#content_4{
    height: auto;
}

#wrapper.man_1 .contentsbox:not(#content_1),
#wrapper.man_2 .contentsbox:not(#content_2),
#wrapper.man_3 .contentsbox:not(#content_3),
#wrapper.man_4 .contentsbox:not(#content_4){
    height: 0px;
    overflow: hidden;
}



.contentsbox .photobox{
    position: sticky;
    top: 100px;

    width: 100%;
    height: 100vh;
    aspect-ratio: inherit;
    display: flex;
    justify-content: flex-end;
    z-index: 3;
    pointer-events: none;
    background: none;
}

.contentsbox .photobox ul{
    position: relative;
    width: 45vw;
}

@media screen and (max-width: 1350px) {
    .contentsbox .photobox ul{
        position: relative;
        width: 47vw;
    }
}

@media screen and (max-width: 800px) {
    .contentsbox .photobox.no_800{
        display: none;
    }
}

.contentsbox .photobox ul li{
    transition: all 500ms 0s ease;
    position: absolute;
    width: 100%;
    top: 0;
    right: 0;
}

.contentsbox .photobox ul li:nth-child(1){
    z-index: 10;
}

.contentsbox .photobox ul li:nth-child(2){
    z-index: 9;
}

.contentsbox .photobox ul li:nth-child(3){
    z-index: 8;
}

.contentsbox .photobox ul li:nth-child(4){
    z-index: 7;
}


.contentsbox .photobox ul:not(.bg_set_1) li:nth-child(1){
    opacity: 0;
}

.contentsbox .photobox ul:not(.bg_set_2) li:nth-child(2){
    opacity: 0;
}

.contentsbox .photobox ul:not(.bg_set_3) li:nth-child(3){
    opacity: 0;
}

.contentsbox .photobox ul:not(.bg_set_4) li:nth-child(4){
    opacity: 0;
}





.contentsbox section{
    position: relative;
    width: 92%;
    max-width: 1300px;
    margin: 0 auto;
    z-index: 1;
    margin-top: -100vh;
}

.contentsbox section article{
    width: 48.461538%;
    max-width: 630px;
    padding-left: 80px;
    padding-bottom: 400px;
}

.contentsbox section article.titlebox {
    width: 55%;
    max-width: 715px;
}


@media screen and (max-width: 1350px) {
    .contentsbox section article.titlebox {
        width: 48.461538%;
        max-width: 630px;
    }
}


@media screen and (max-width: 1000px) {
    .contentsbox section article,
    .contentsbox section article.titlebox{
        width: 48.461538%;
        max-width: 630px;
        padding-left: 40px;
        padding-bottom: 400px;
    }
    
}


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

    .contentsbox{
        position: relative;
        width: 100%;
        top: 0px;
        overflow: hidden;
    }
    

    .contentsbox section{
        position: relative;
        width: 92%;
        max-width: 1300px;
        margin: 0 auto;
        z-index: 1;
        margin-top: 0vh;
    }


    .contentsbox section article,
    .contentsbox section article.titlebox{
        width: 100%;
        max-width: 630px;
        padding-left: 30px;
        padding-bottom: 15vh;
        padding-right: 20px;
    }
}






/* titlebox */

.contentsbox section .titlebox h1{
    font-size: 42px;
    line-height: 1.4;
    font-weight: 300;
    padding-bottom: 120px;
    text-align:justify;
    text-justify:distribute;
}

#wrapper.man_4 .contentsbox section .titlebox h1{
    font-size: 40px;
    letter-spacing: -.5px;
}


.contentsbox section .titlebox .namebox{
    line-height: 1.4;
    padding-bottom: 70px;
}

.contentsbox section .titlebox .namebox strong{
    display: inline-block;
    padding-right: 20px;
    font-size: 26px;
}

.contentsbox section .titlebox .namebox small{
    font-size: 14px;
}

.contentsbox section .titlebox .namebox span{
    display: block;
    font-size: 18px;
    padding-top: 10px;
}

.contentsbox section article.titlebox .namebox i{
    display: inline-block;
}

.contentsbox section article.titlebox .profilebox{
    width: 86.614173%;
}



@media screen and (max-width: 1350px) {
    .contentsbox section article.titlebox .profilebox{
        width: 100%;
    }
}


.contentsbox section .titlebox .profilebox strong{
    display: inline-block;
    border: #000 solid 1px;
    padding: 4px 15px;
    line-height: 1;
    font-size: 14px;
    letter-spacing: 2px;
}

.contentsbox section .titlebox .profilebox p{
    padding-top: 10px;
}


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

    .contentsbox section .titlebox h1,
    #wrapper.man_4 .contentsbox section .titlebox h1{
        font-size: 36px;
        padding-bottom: 80px;
        letter-spacing: 1px;
    }

}


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

    .titlebox figure{
        width: 92vw;
    }

    .contentsbox section .titlebox h1,
    #wrapper.man_4 .contentsbox section .titlebox h1{
        font-size: 30px;
        padding-top: 20px;
    }

    .contentsbox section .titlebox .namebox{
        padding-bottom: 40px;
    }
    
    .contentsbox section .titlebox .namebox strong{
        font-size: 20px;
    }

    .contentsbox section .titlebox .namebox span{
        font-size: 15px;
        padding-top: 7px;
    }

}


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

    .contentsbox section .titlebox h1,
    #wrapper.man_4 .contentsbox section .titlebox h1{
        font-size: 24px;
        padding-top: 20px;
    }

}



/* titlebox */




/* txtbox */

.contentsbox section .txtbox{
    position: relative;
	word-break:break-all
}

.contentsbox section .txtbox::before{
    content: "";
    display: block;
    position: absolute;
    width: 1px;
    height: calc(100% - 100px) ;
    top: -80px;
    background-color: var(--black);
    z-index: 20;
}


.contentsbox section .txtbox article{
    position: relative;
}


.contentsbox section .txtbox article h2{
    position: relative;
    width: 100%;
    font-size: 24px;
    line-height: 1.4;
    padding-bottom: 5px;
}

.contentsbox section .txtbox article i{
    position: relative;
    display: block;
    line-height: 1;
    width: 106.3%;
    left: -4%;
}

.contentsbox section .txtbox article p{
    padding-top: 20px;
    padding-bottom: 100px;
    letter-spacing: 2px;
}

.contentsbox section .txtbox article div{
    position: absolute;
    width: 900px;
    height: 600px;
    z-index: -1;
}

.contentsbox section .txtbox article div span{
    display: block;
    width: 100%;
    height: 100%;
    transform: skewX(-10deg);
}

.contentsbox section .txtbox article.txtbox_1 div{
    left: -500px;
    top: 150px;
}

.contentsbox section .txtbox article.txtbox_1 div span{
    background-color: #e5f1f6;
}

.contentsbox section .txtbox article.txtbox_3 div{
    left: 300px;
    top: 150px;
}

.contentsbox section .txtbox article.txtbox_3 div span{
    background-color: #d5eff7;
}


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

    .contentsbox section .txtbox article h2{
        font-size: 5vw;
        padding-top: 20px;
        padding-bottom: 5px;
    }

    .contentsbox section .txtbox article div{
        position: absolute;
        width: 600px;
        height: 300px;
        z-index: -1;
    }

    .contentsbox section .txtbox article.txtbox_1 div{
        left: -75vw;
        top: 150px;
    }

    .contentsbox section .txtbox article.txtbox_3 div{
        left: 25vw;
        top: 50vw;
    }

}


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

    .contentsbox section .txtbox article.txtbox_1 div{
        left: -75vw;
        top: 150vw;
    }

    .contentsbox section .txtbox article.txtbox_3 div{
        left: 25vw;
        top: 50vw;
    }

}



/* txtbox */



/* content *************************************************************/