@charset "UTF-8";

/**********************************************************************
  タイムライン用css
**********************************************************************/

.container .timeline-container {
  margin-bottom: 1.5rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background-clip: padding-box;

  .timeline-title {
    padding: 0.8rem 0.4rem;
    font-weight: bold;
    font-size: 1.1em;
    text-align: center;
    background-color: var(--color-back-gray);
    border-bottom: 1px solid var(--color-border);
  }

  .timeline-contents {
    position: relative;
    margin: 2.0rem 5.0rem 1.5rem 5.0rem;
    padding: 0;
    list-style: none;

    &::after {
      position: absolute;
      content: "";
      bottom: 0px;
      left: 4.0rem;
      height: 100%;
      border-left: 2px solid var(--color-border-light);
    }
    li {
      position: relative;
      display: flex;
      justify-content: start;
      align-items: start;
      flex-direction: row;
      margin-bottom: 2.0rem;

      &::before {
        position: absolute;
        content: "●";
        top: 0.1rem;
        left: 3.58rem;
        color: var(--color-site-key);
        z-index: 1;
      }
      > div:nth-child(1)  { margin-right: 3.0rem; }
      > div:nth-child(2) > div:nth-child(1) {
        margin-bottom: 0.2rem;
        font-weight: bold;
      }
      &:not(:last-child)::after {
        position: absolute;
        content: "";
        bottom: 0px;
        left: 4.6rem;
        width: 93%;
        border-bottom: 1px dashed var(--color-border-light);
      }
    }
  }
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/* 1279px（タブレット）以下 */
@media screen and (max-width: 1279px) {
  .container .timeline-container {
    .timeline-contents {
      margin: 2.0rem 3.0rem 1.5rem 3.0rem;
    }
  }
}

/* 767px（スマホ）以下 */
@media screen and (max-width: 767px) {
  .container .timeline-container {
    .timeline-contents {
      margin: 1.5rem;
      li:not(:last-child)::after { width: 83%; }
    }
  }
}