@charset "UTF-8";

/* =====================================
Individual class
------------------------------------- */

/*ある1日のスケジュール*/
:root {
  --txt-color: #08107b;
}
ul {
  &.interview_schedule-ul {
    position: relative;
    &:before{
        position: absolute;
        content: "";
        display: block;
        width: 1px;
        height: 100%;
        background: var(--txt-color);
        top: 0;
        left: 25px;
    }
    li {
      display: grid;
      grid-template-columns: 8% 92%;
      gap: 40px;
      &+li {
        margin-top: 30px;
      }

      .interview_schedule-time {
        font-weight: bold;
        color: var(--txt-color);
        font-size: 18px;
        line-height: 1;
        text-align: right;
        position: relative;
        &::before{
          content: "";
          border: 3px solid var(--txt-color);
          background: #fff;
          width: 15px;
          height: 15px;
          border-radius: 15px;
          position: absolute;
          left: 18px;
        }
      }

      .interview_schedule-txt {
        p {
          margin-bottom: 0;
        }

        .interview_schedule-ttl {
          font-weight: bold;
          color: var(--txt-color);
          font-size: 18px;
          line-height: 1;
        }
      }
    }
  }
}


@media only screen and (max-width: 767px) {
  ul {
    &.interview_schedule-ul {
      &:before
      {
       left: 15px;
      }
      li {
        display: block;

        .interview_schedule-time {
          padding-left: 40px;
          text-align: left;
          p{
           margin-bottom: 15px ;
          }
          &::before{
                    left: 8px;
          }
        }
        .interview_schedule-txt{
          padding-left: 40px;
        }
      }

    }
  }



}