@charset "UTF-8";

.history {
  /* 基本の共通定数 */
  --dot-size: 10px;
  --rail-x: 14px;
  --gap: 40px;
  --rail-w: 1px;

  /* 通常時の計算値 */
  --current-lh: 32px;
  --dot-top: calc((var(--current-lh) / 2) - (var(--dot-size) / 2));

  .history-item-title {
    margin-top: 40px;
    margin-bottom: 24px;
    line-height: var(--current-lh);
    font-size: 3.2rem;
    font-family: "Junge", cursive;
    font-weight: 400;
    position: relative;
    /* PCでのドット配置の基準 */
    z-index: 1;

    /* ★修正ポイント：largeの時は計算式を再宣言して上書きする */
    &.large {
      --current-lh: 48px;
      --dot-top: calc((var(--current-lh) / 2) - (var(--dot-size) / 2));
      font-size: 4.8rem;
    }
  }

  .history-item {
    padding-bottom: 56px;
  }

  .history-item-list {
    >*:nth-child(2) {
      padding-left: 32px;
      border-left: 1px solid var(--Devider_gray);
    }

    dl {
      display: flex;
      gap: 8px;

      +dl {
        margin-top: 12px;
      }
    }

    dt {
      min-width: 2em;
      color: var(--Text_sub_black);
      font-weight: 700;
      line-height: 28.80px;
      white-space: nowrap;

      span {
        font-size: 1.2rem;
        line-height: 21.60px;
      }
    }

    figure {
      max-width: 300px;
    }
  }

  dd {
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 28.80px;
  }
}




@media screen and (min-width: 770px) {
  .history-item::before {
    content: "";
    position: absolute;
    left: var(--rail-x);
    top: calc(var(--dot-top) + (var(--dot-size) / 2));
    bottom: 0;
    width: var(--rail-w);
    height: 100%;
    z-index: 0;
    background: var(--Devider_gray);
  }
}

.history-item {
  position: relative;
  padding-left: var(--gap);
}

.history-item:last-child::before {
  content: none;
}

.history-item-title::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--gap) + var(--rail-x) - (var(--dot-size) / 2) + (var(--rail-w) / 2));
  top: var(--dot-top);
  width: var(--dot-size);
  height: var(--dot-size);
  border-radius: 50%;
  background: var(--Primary_black);
  z-index: 2;
}

/* .anchor-link-list a {
  display: flex;
  align-items: center;
  gap: 8px;
} */


@media screen and (max-width: 769px) {
  .history {
    .history-item-title {
      font-size: 2.4rem;
      margin-bottom: 20px;
      line-height: 1.4;
      padding-left: calc(var(--dot-size) + 8px);

      &.large {
        font-size: 3.2rem;
      }

      &::before {
        left: 0;
        width: 6px;
        height: 6px;
      }
    }

    .history-item {
      padding: 0 0 32px 0;
      padding-bottom: 32px;
      border-bottom: 1px solid var(--Devider_gray);

      +.history-item {
        margin-top: 32px;
      }

    }

    .history-item-list {

      >*:nth-child(2) {
        padding-left: 0;
        border: none;
      }

      dl {
        +dl {
          margin-top: 12px;
        }
      }

      figure {
        min-width: 100%;
      }
    }
  }
}