@charset "UTF-8";

/*----------------------------------------------------
	☆PC
----------------------------------------------------*/

#wrapper{
    overflow: visible;
}

/*--- mv --*/
#mv{
    background: url("../images/manager-staff-crosstalk/mv_base.jpg") center bottom / cover no-repeat;
    width: 100%;
    height: 50vw;
    position: relative;
    max-height: 980px;
}
#mv::after{
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    background: url("../images/manager-staff-crosstalk/mv_layer.png") center bottom / cover no-repeat;
    width: 100%;
    height: 100%;
    z-index: 1;
}

#mv .title{
    width: 65%;
    left: 50%;
    top: 15.56%;
    transform: translate(-50%,0);
    z-index: 1;
    position: absolute;
}

#mv .inr{
    height: 100%;
    width: auto;
    aspect-ratio: 2 / 1; 
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%,0);
    z-index: 2;
}
#mv .inr02{
    z-index: 1;
}
#mv .letter{
    position: absolute;
    left: 0;
    top: 0;
}

#mv .letter01{
    width: 13.15%;
    margin: 2% 0 0 18%;
}
#mv .letter02{
    width: 30.8%;
    margin: 2.4% 0 0 34.4%;
}
#mv .letter03{
    width: 13.6%;
    margin: 2.7% 0 0 68%;
}
#mv .letter04{
    width: 21%;
    margin: 6% 0 0 3%;
}
#mv .letter05{
    width: 20.2%;
    margin: 8.2% 0 0 64.8%;
}
#mv .letter06{
    width: 9.7%;
    margin: 8.1% 0 0 87.6%;
}
#mv .letter07{
    width: 2.7%;
    margin: 12.4% 0 0 4.6%;
}
#mv .letter08{
    width: 3.9%;
    margin: 12.7% 0 0 11.6%;
}
#mv .letter09{
    width: 17.9%;
    margin: 21.3% 0 0 39%;
}
#mv .letter10{
    width: 5.56%;
    margin: 21.4% 0 0 59.7%;
}
#mv .letter11{
    width: 6.72%;
    margin: 21.7% 0 0 77.9%;
}
#mv .letter12{
    width: 25.6%;
    margin: 25.1% 0 0 3.1%;
}
#mv .letter13{
    width: 2.9%;
    margin: 31.8% 0 0 3.3%;
}
#mv .letter14{
    width: 13.2%;
    margin: 32.6% 0 0 9.4%;
}
#mv .letter15{
    width: 9.6%;
    margin: 42.8% 0 0 6.2%;
}
#mv .letter16{
    width: 4.8%;
    margin: 40.9% 0 0 16.9%;
}
#mv .letter17{
    width: 20.4%;
    margin: 41.2% 0 0 76.2%;
}


/*--- memberList --*/
#contents .memberList li .image{
    max-width: 120px;
}
#contents .memberList li .info {
    position: relative;
}
#contents .memberList li .info .icon{
    display: table;
    width: fit-content;
    padding: 5px 15px;
    border-radius: 100px;
    line-height: 1;
    color: #fff;
    font-size: 12px;
    background: #e21b13;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%,-150%);
}

/*--- talk --*/

#contents .talk-contents .talk{
    display: flex;
    justify-content: space-between;
    position: relative;
}
#contents .talk-contents .talk .sideImage {
    width: 40%;
    height: calc(100vh - 75px);
    margin: 0;
    position: sticky;
    top: 75px;
    left: 0;
    background-position: center top ;
    background-size: cover;
    z-index: 2;
}

#contents .talk-contents .talk .talkBox{
    width: 60%;
    position: relative;
    z-index: 0;
}

#contents .talk-contents .talk .talkInr{
    max-width: 900px;
    margin: 0 auto;
    width: 85%;
    position: relative;
    z-index: 1;
}

#contents .talk-contents .talk .talkBox .talkInr .chapter{
    margin-bottom: 40px;
    padding-bottom: 8px;
    line-height: 1;
    position: relative;
    display: table;
    width: fit-content;
}
#contents .talk-contents .talk .talkBox .talkInr .chapter::after{
    width: 100%;
    height: 2px;
    content: "";
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    background: #e21b13;
}
#contents .talk-contents .talk .talkBox .talkInr .title{
    font-size: 24px;
    line-height: 1.5;
    margin-bottom: 60px;
}


#contents .talk-contents .talk .talkInr dl{
    margin: 0 auto;
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
    align-items: flex-start;
}
#contents .talk-contents .talk .talkInr dl:last-child{
    margin-bottom: 0;
}
#contents .talk-contents .talk .talkInr dl dt{
    width: 90px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-weight: bold;
}
#contents .talk-contents .talk .talkInr dl dt .name{
    font-size: 12px;
}
#contents .talk-contents .talk .talkInr dl dd{
    width: calc(100% - 90px - 110px);
    background: #fff;
    padding: 40px;
    text-align: justify;
    line-height: 1.75;
    position: relative;
}
#contents .talk-contents .talk .talkInr dl dd:before {
  width: 0;
  height: 0;
  border-style: solid;
    content: "";
    display: block;
    position: absolute;
    top: 35px;
}

#contents .talk-contents .talk .talkInr dl:nth-child(odd) dd:before {
    left: -15px;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 15px solid #ffffff;
  border-left: 0;
}
#contents .talk-contents .talk .talkInr dl:nth-child(even) dd:before {
    right: -15px;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 15px solid #ffffff;
  border-right: 0;
}

#contents .talk-contents .talk .talkInr dl:nth-child(even){
    flex-direction: row-reverse;
}




#contents .talk-contents .talk:nth-child(even){
    flex-direction: row-reverse;
}
#contents .talk-contents .talk:nth-child(even) .talkBox::before{
    content: "";
    display: block;
    width: 75vw;
    height: calc(100% + 120px + 120px);
    background: #fff;
    z-index: 0;
    position: absolute;
    left: 0;
    top: -120px;
}
#contents .talk-contents .talk:nth-child(even) .talkInr dl dd{
    background: #f2f2f2;
}
#contents .talk-contents .talk:nth-child(even) .talkInr dl:nth-child(odd) dd:before {
  border-right: 15px solid #f2f2f2;
}
#contents .talk-contents .talk:nth-child(even) .talkInr dl:nth-child(even) dd:before {
  border-left: 15px solid #f2f2f2;
}

/*--- slide --*/

#contents .slide {
	position: relative;
	z-index: 1;    
	overflow: hidden;
    content: "";
    display: block;
    width: 100%;
	height: 41.6666vw;
    background: url(../images/manager-staff-crosstalk/end.jpg) left top / cover no-repeat;
    animation: slidePC 3s steps(1) infinite;
}

@keyframes slidePC {
    0%   { background-position:   0% top; }
    20%  { background-position:  25% top; }
    40%  { background-position:  50% top; }
    60%  { background-position:  75% top; }
    80%  { background-position: 100% top; }
}
@keyframes slideTAB {
    0%   { background-position:   2.7% top; }
    20%  { background-position:  25.6% top; }
    40%  { background-position:  49.5% top; }
    60%  { background-position:  73% top; }
    80%  { background-position:  97% top; }
}




/*----------------------------------------------------
	☆ANIMATION
----------------------------------------------------*/

#mv .title img,
#mv .letter{
    opacity: 0;
}

#mv .title img,
#mv .letter{
    animation: slidein 1.2s ease forwards;
}

#mv .letter02{ animation-delay: 1.8s !important;}
#mv .letter03{ animation-delay: 0.6s !important;}
#mv .letter04{ animation-delay: 2.6s !important;}
#mv .letter05{ animation-delay: 0.4s !important;}
#mv .letter06{ animation-delay: 3.0s !important;}
#mv .letter07{ animation-delay: 1.2s !important;}
#mv .letter08{ animation-delay: 0.8s !important;}
#mv .letter09{ animation-delay: 2.4s !important;}
#mv .letter10{ animation-delay: 0.2s !important;}
#mv .letter11{ animation-delay: 2.8s !important;}
#mv .letter12{ animation-delay: 1.6s !important;}
#mv .letter13{ animation-delay: 0.4s !important;}
#mv .letter14{ animation-delay: 2.0s !important;}
#mv .letter15{ animation-delay: 3.2s !important;}
#mv .letter16{ animation-delay: 1.0s !important;}
#mv .letter17{ animation-delay: 1.4s !important;}


#mv .title img{ animation-delay: 3.6s !important;}


/*----------------------------------------------------
	☆901以上　PCのみ & HOVER
----------------------------------------------------*/

@media screen and (min-width:901px) {
}


/*----------------------------------------------------
	☆TOP UNDER 1200
----------------------------------------------------*/

@media screen and (max-width:1200px) {
    
    #contents .talk-contents .talk .sideImage{
        height: 80vh;
        max-height: 800px;
    }
    
}

/*----------------------------------------------------
	☆TOP UNDER 900
----------------------------------------------------*/

@media screen and (max-width:900px) {    
    
    #contents .talk-contents .talk,
    #contents .talk-contents .talk:nth-child(even){
        flex-direction: column;
    }
    #contents .talk-contents .talk .sideImage,
    #contents .talk-contents .talk:nth-child(even) .sideImage{
        width: 85%;
        height: 60vw;
        max-width: 600px;
        margin: 0 auto 60px;
        position: static;
    }
    #contents .talk-contents .talk .talkBox,
    #contents .talk-contents .talk:nth-child(even) .talkBox{
        width: 100%;
    }
    #contents .talk-contents .talk:nth-child(even) .talkBox::before {
        content: "";
        display: block;
        width: 100%;
        height: calc(100% + 100px + 120px);
    }
    
    #contents .slide{
        height: 55vw;
        background-position: 2.7% center;
        animation: slideTAB 3s steps(1) infinite;
    }
    
    
}


/*----------------------------------------------------
	☆TOP UNDER 600
----------------------------------------------------*/

@media screen and (max-width:600px) {
    
    /*--- mv --*/
    #mv{
        background: url("../images/manager-staff-crosstalk/mv_base_sp.jpg") center bottom / cover no-repeat;
        width: 100%;
        height: 132.5vw;
    }
    #mv::after{
        background: url("../images/manager-staff-crosstalk/mv_layer_sp.png") center bottom / cover no-repeat;
    }

    #mv .title{
        width: 52.25%;
        left: 50%;
        top: 14.1%;
    }

    #mv .inr{
        aspect-ratio: 1 / 1.325; 
    }
    
    
    /*--- section --*/
    #contents .section {
        padding: 40px 0;
    }
    
    
    /*--- talk --*/
    #contents .talk-contents .talk:nth-child(even) .talkBox::before {
        height: calc(100% + 80px + 80px);
    }
    
    #contents .talk-contents .talk .talkInr dl dt{
        width: 23%;
    }
    #contents .talk-contents .talk .talkInr dl dd {
        width: 75%;
        background: #fff;
        padding: 25px;
    }
    
    #contents .talk-contents .talk .talkBox .talkInr .chapter{
        margin-bottom: 20px;
    }
    #contents .talk-contents .talk .talkBox .talkInr .title{
        font-size: 22px;
        line-height: 1.4;
        margin-bottom: 40px;
    }
    
    #mv .letter07{
        width: 3.3%;
        margin: 67.4% 0 0 22.8%;
    }
    #mv .letter08{
        width: 14.6%;
        margin: 17.1% 0 0 4.9%;
    }
    #mv .letter10{
        width: 9.7%;
        margin: 53.1% 0 0 75.9%;
    }
    #mv .letter11{
        width: 14.4%;
        margin: 18.7% 0 0 81.4%;
    }
    #mv .letter12{
        width: 40.2%;
        margin: 57.5% 0 0 28.1%;
    }
    #mv .letter14{
        width: 13.5%;
        margin: 48.3% 0 0 12.5%;
    }
    #mv .letter17{
        width: 23.3%;
        margin: 63.3% 0 0 51.1%;
    }
    #mv .letter01,
    #mv .letter02,
    #mv .letter03,
    #mv .letter04,
    #mv .letter05,
    #mv .letter06,
    #mv .letter09,
    #mv .letter13,
    #mv .letter15,
    #mv .letter16{ display: none;}
    
    
    
}