@charset "UTF-8";
/* CSS Document */

/*---------------------------------------txt-container*/

.full-width-container{
  padding-bottom: 50px;
}

.txt-container{
  padding: 30px 0 20px;
  position: relative;
}

/*---------------------------------------interview-q*/

.interview-q{
  font-family: 'Zen Old Mincho', serif;
  font-size: 1.1em;
  line-height: 1.5em;
  position: relative;
  margin: 0 0 30px;
  padding: 0 0 0.5em 3.3em;
  border-bottom: solid 1px #19baa0;
  box-sizing: border-box;
  min-height: 2em;
}

.interview-q::before{
  font-family: 'Satisfy', cursive;
  font-size: 3em;
  content: 'Q.';
  color: rgba(190,236,228,0.8);
  position: absolute;
  width: 100%;
  top: 50%;
  left: 0.2em;
  transform: translateY(-50%) skewX(-15deg);
  z-index: -1;
}

@media screen and (min-width:600px) {
  .interview-q{
    font-size: 1.3em;
  }
}

/*---------------------------------------interview-a*/

.interview-a{
  position: relative;
}

.interview-a::before{
  content: 'A.';
  color: #ffe1ab;
  float: left;
  display: block;
  margin: 0.3em 10px 0 0.3em;
  bottom: 0;
  transform: skewX(-15deg);
  font-family: 'Satisfy', cursive;
  font-size: 3em;
  z-index: -1;
}

.interview-a p{
  line-height: 1.8em;
  margin-bottom: 1em;
}

.img-container .slideUp{
  animation-delay: .5s;
}

@media screen and (min-width:600px) {
  .full-width-container{
    padding-bottom: 0;
  }
  
  .left-img-section , .right-img-section{
    display: flex;
    align-content: flex-start;
    padding: 50px 0 0;
    box-sizing: border-box;
  }
  
  .left-img-section{
    flex-direction: row-reverse;
  }
  
  .img-container{
    width: 40%;
    max-height: 600px;
    overflow: hidden;
    position: relative;
  }
  
  .img-container img{
    object-fit: fill;
    width: 100%;
    height: auto;
  }
  
  .shadow-right{
    position: relative;
    filter: drop-shadow(15px 15px rgba(190,236,228,0.9));
    transform: translateZ(0);
  }
  
  .shadow-left{
    position: relative;
    filter: drop-shadow(-15px 15px rgba(190,236,228,0.9));
    transform: translateZ(0);
  }
  
  .txt-container{
    padding: 0;
  }
  
  .left-img-section .txt-container , .right-img-section .txt-container{
    width: 60%;
    box-sizing: border-box;
  }
  
  .left-img-section .txt-container{
    padding-left: 50px;
  }
  
  .right-img-section .txt-container{
    padding-right: 50px;
  }
}

@media screen and (min-width:1000px){
  .left-img-section , .right-img-section{
    align-items: center;
  }
}

@media screen and (min-width:1200px){
  .left-img-section , .right-img-section{
    padding: 50px 8% 0;
  }
}

/*---------------------------------------crosstalk*/
.crosstalk-profile-container{
  display: flex;
  align-items: center;
  align-content: center;
  box-sizing: border-box;
  width: 220px;
}

.crosstalk-profile-container:nth-child(n+2){
  margin-top: 10px;
}

.profile-icon{
  width: 30%;
  overflow: hidden;
  border-radius: 50%;
  margin-right: 20px;
  box-sizing: border-box;
}

.crosstalk-profile-txt{
  box-sizing: border-box;
  width: auto;
  margin: 0;
  padding: 0;
}

.profile-year{
  font-size: 0.9em;
}

.profile-year br{
  display: none;
}

.profile-name{
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 700;
}

.crosstalk-a{
  display: flex;
  align-items: flex-start;
  margin-bottom: 30px;
}

.crosstalk-a:nth-child(odd){
  flex-direction: row-reverse;
}

.icon-container{
  width: 90px;
  height: 90px;
  margin: 0 15px 0 0;
  overflow: hidden;
  border-radius: 50%;
  position: relative;
}

.crosstalk-a:nth-child(odd) .icon-container{
  margin: 0 0 0 15px;
}

.icon-container .profile-icon{
  width: 100%;
}

.icon-container .profile-name{
  text-align: center;
  font-size: 0.8em;
  position: absolute;
  bottom: 0;
  background: rgba(25,186,160,0.8);
  line-height: 1.5em;
  width: 100%;
  display: block;
  color: #fff;
}

.p-container{
  width: calc(100% - 90px - 15px);
  padding: 0 0 0 15px;
  border-left: solid 1px #19baa0;
  background: #fff;
  position: relative;
  box-sizing: border-box;
}

.p-container::before{
  content: '';
  position: absolute;
  width: 16px;
  height: 8px;
  top: 41px;
  left: -9px;
  transform: rotate(55deg) skewX(-35deg);
  background: #19baa0;
  z-index: -1;
}

.p-container::after{
  content: '';
  position: absolute;
  width: 16px;
  height: 8px;
  top: 42px;
  left: -7px;
  transform: rotate(55deg) skewX(-35deg);
  background: #fff;
}

.crosstalk-a:nth-child(odd) .p-container{
  padding: 0 15px 0 0;
  border-left: none;
  border-right: solid 1px #19baa0;
}

.crosstalk-a:nth-child(odd) .p-container::before{
  left: auto;
  right: -9px;
  transform: rotate(-55deg) skewX(35deg);
}

.crosstalk-a:nth-child(odd) .p-container::after{
  left: auto;
  right: -7px;
  transform: rotate(-55deg) skewX(35deg);
}

@media screen and (min-width:600px){
  .crosstalk-a{
    align-items: center;
    margin: 50px 0;
  }
  
  .crosstalk-a:nth-child(even){
    padding-right: 105px;
  }
  
  .crosstalk-a:nth-child(odd){
    padding-left: 105px;
  }
  
  .p-container{
    padding: 10px 15px;
  }
  
  .crosstalk-a:nth-child(odd) .p-container{
    padding: 10px 15px;
  }
  
  .p-container::before{
    top: calc(50% + 4px);
    transform: rotate(55deg) skewX(-35deg) translateX(-50%) translateY(-50%);
  }
  
  .p-container::after{
    top: calc(50% + 5px);
    transform: rotate(55deg) skewX(-35deg) translateX(-50%) translateY(-50%);
  }
  
  .crosstalk-a:nth-child(odd) .p-container::before{
    transform: rotate(-55deg) skewX(35deg) translateX(50%) translateY(-50%);
  }
  
  .crosstalk-a:nth-child(odd) .p-container::after{
    transform: rotate(-55deg) skewX(35deg) translateX(50%) translateY(-50%);
  }
}

@media only screen and (min-width:600px) and (max-width:1000px){
  .crosstalk-profile-container{
    width: 80px;
  }
  
  .crosstalk-profile-container:nth-child(n+2){
    margin-top: 0;
    margin-left: 5%;
  }
  
  .profile-year br{
    display: inline;
  }
}

@media only screen and (min-width:600px) and (max-width:1200px){
  .crosstalk-profile-container{
    width: 240px;
  }
  
  .crosstalk-profile-container:nth-child(n+2){
    margin-top: 0;
    margin-left: 5%;
  }
}

@media screen and (min-width:1200px){
  .crosstalk-profile-container{
    width: 300px;
  }
  
  .crosstalk-profile-container:nth-child(n+2){
    margin-top: 0;
    margin-left: 4vw;
  }
  
  .profile-icon{
    width: 120px;
  }
  
  .icon-container{
    width: 120px;
    height: 120px;
  }
  
  .icon-container .profile-name{
    line-height: 2em;
  }
  
  .crosstalk-a:nth-child(even){
    padding-right: 135px;
  }
  
  .crosstalk-a:nth-child(odd){
    padding-left: 135px;
  }
  
}