@charset "UTF-8";
section#interview{
  margin-bottom: 104px;

  *:is(.h3-wrap,p.heading){
    width: min(1120px,100%);
    padding: 0 16px;
    margin-inline: auto;
  }
  p.heading{
    margin-bottom: 16px;
    font-size: 24px;
    font-weight: 700;
  }
}
ul.interviewCON{
  >*+*{
    margin-block-start: 64px;
  }
  li.item{
    width: min(1120px,100%);
    margin-inline: auto;
    .portlait-wrap{
      position: relative;
      padding: 32px 16px 68px;
      margin-bottom: 48px;

      .number,.profile{
        position: absolute;

        color: #fff;

        background: var(--tc);
        border-radius: 16px;
      }
      .number{
        z-index: 3;
        top: 0;

        display: inline-flex;
        align-items: flex-end;
        padding: 16px;

        font-size: 22px;
        font-family: acumin-pro, sans-serif;
        font-weight: 700;
        font-style: normal;
        line-height: 1; 

        span{
          font-size: 68px;
        }
      }
      picture{
        position: relative;
        z-index: 2;

        width: 80%;
        margin-inline: auto;
        
        img{
          border-radius: 20px;
        }
      }
      .profile{
        z-index: 1;
        right: 0;
        bottom: 0;

        padding: 48px;

        font-size: 20px;
      }
    }
    ul.questionList{
      display: flex;
      flex-direction: column;
      padding: 64px;
      margin-bottom: 64px;

      background: #fff;
      border-radius: 32px;
      >*+*{
        margin-block-start: 40px;
      }
      li{
        dt{
          display: flex;
          align-items: center;
          gap: 1em;
          margin-bottom: 16px;
          
          p{
            display: block;
            width: 100%;
            height: 100%;
            font-size: 18px;
            font-weight: 700;

            border-bottom: solid 1px #333;
          }
        }
        dt span{
          display: inline-flex;
          align-items: center;
          justify-content: center;
          width: 40px;
          height: 40px;

          font-size: 30px;
          font-family: acumin-pro, sans-serif;
          font-weight: 700;
          font-style: normal;
          color: #fff;

          border-radius: 4px;
          background: var(--tc);
        }
        dd{
          line-height: 1.6;
        }
      }
    }
    .scheduleCON-wrap{
      margin-bottom: 64px;

      >p{
        margin-bottom: 16px;
        font-size: 24px;
        font-weight: 700;
      }
      ul.scheduleCON{
        display: flex;
        flex-direction: column;

        li{
          position: relative;

          display: grid;
          grid-template-columns: 120px 1fr;
          row-gap: 16px;
          padding-left: 72px;
          padding-bottom: 48px;

          span.time{
            grid-column: 1/2;
            grid-row: 1/2;

            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 8px;

            font-size: 30px;
            font-family: acumin-pro, sans-serif;
            font-weight: 700;
            font-style: normal;
            line-height: 1;
            color: #fff;

            background: var(--tc);
            border-radius: 16px;
          }
          p.label{
            grid-column: 2/3;
            grid-row: 1/2;

            padding-left: 1em;
            align-self: center;

            font-size: 18px;
            font-weight: 700;
          }
          div.content{
            grid-column: 1/3;
            grid-row: 2/3;
          }
          div.imgCON{
            grid-column: 1/3;
            grid-row: 3/4;

            display: grid;
            grid-template-columns: repeat(2,240px);
            gap: 24px;

            picture{
              display: inline-block;
            }
          }
        }
        li::before{
          content: '';
          position: absolute;
          top: 0;
          left: 6px;

          display: inline-block;
          width: 9px;
          height: 100%;

          background: #C3C3C3;
        }
        li::after{
          content: '';
          position: absolute;
          top: 0;
          left: 0;

          display: inline-block;
          width: 21px;
          height: 21px;

          border-radius: 50%;
          background: radial-gradient(circle,var(--tc) 0%,var(--tc) 40%,#8AC198 40%, #8AC198 100%);
        }
      }
    }
    div.message{
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 32px;
      padding: 48px 16px;
      padding-right: 48px;

      --bg-color: var(--tc);

      background: var(--bg-color);
      border-image-source: linear-gradient(var(--bg-color), var(--bg-color));
      border-image-slice: 0 fill;
      border-image-outset: 0 0 0 100vw;

      div.textContent{
        position: relative;

        p.title{
          margin-bottom: 32px;

          font-family: acumin-pro, sans-serif;
          font-style: normal;
          line-height: 1; 
          font-size: 64px;
          color: transparent;
          -webkit-text-stroke: 1px white;
        }
        p.title::before{
          content: '';
          position: absolute;
          top: .5em;
          left: 0;

          display: inline-block;
          width: 100%;
          height: 1px;

          background: linear-gradient(to right,transparent 0,transparent 4.4em,#fff 4.4em,#fff 100%);
        }
        p.text{
          color: #fff;
          line-height: 1.6;
        }
      }
      picture{
        img{
          border-radius: 24px;
        }
      }
    }
  }
}
@media (min-width : 1200px){
}
@media (max-width : 1200px){
}
@media (max-width : 599px){
}