/*--------------------------------------------------------------
  HISTORY
--------------------------------------------------------------*/
.p-history .l-main {
  overflow: hidden;
}
.p-history .history {
  padding-top: min(40px, 2.5rem, 10.6666666667vw);
}
.p-history .history .inner {
  padding-top: min(33px, 2.0625rem, 8.8vw);
  padding-bottom: min(61px, 3.8125rem, 16.2666666667vw);
  position: relative;
  z-index: 0;
}
.p-history .history .bg-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: -1;
}
.p-history .history .title {
  width: min(51px, 3.1875rem, 13.6vw);
  margin-inline: auto;
}
.p-history .history .head {
  display: grid;
  place-content: center;
  font-size: min(18px, 1.125rem, 4.8vw);
  line-height: 1.4444444444;
  text-align: center;
  background-color: #fff;
  width: min(204px, 12.75rem, 54.4vw);
  height: min(45px, 2.8125rem, 12vw);
  margin-top: min(61px, 3.8125rem, 16.2666666667vw);
  margin-inline: auto;
}
.p-history .history .movie-container {
  width: 92%;
  aspect-ratio: 345/193;
  margin-top: min(30px, 1.875rem, 8vw);
  margin-inline: auto;
}
.p-history .history .movie-container video {
  width: 100%;
  heigh: 100%;
}
.p-history .history .list-container {
  width: 92%;
  max-width: 580px;
  margin-inline: auto;
}
.p-history .history .item {
  display: flex;
  flex-direction: row;
  border-bottom: 1px solid #e3e3e3;
}
.p-history .history .item:first-of-type {
  border-bottom: none;
  height: min(11px, 0.6875rem, 2.9333333333vw);
  margin-bottom: min(12px, 0.75rem, 3.2vw);
}
.p-history .history .item:first-of-type span {
  display: block;
  height: 100%;
}
.p-history .history .item:first-of-type span:first-of-type {
  width: 15.652173913%;
}
.p-history .history .item:first-of-type span:last-of-type {
  border-left: 2px dotted #448cd5;
  width: 81.1594202899%;
  margin-left: min(11px, 0.6875rem, 2.9333333333vw);
}
.p-history .history .item:last-of-type {
  border-bottom: none;
  height: min(14px, 0.875rem, 3.7333333333vw);
}
.p-history .history .item:last-of-type span {
  display: block;
  height: 100%;
}
.p-history .history .item:last-of-type span:first-of-type {
  width: 15.652173913%;
}
.p-history .history .item:last-of-type span:last-of-type {
  border-left: 2px dotted #448cd5;
  width: 81.1594202899%;
  margin-left: min(11px, 0.6875rem, 2.9333333333vw);
}
.p-history .history .item:nth-of-type(2) .year {
  font-size: min(24px, 1.5rem, 6.4vw);
  line-height: 1.3333333333;
  padding-top: 0;
  padding-left: min(3px, 0.1875rem, 0.8vw);
}
.p-history .history .item:nth-of-type(2) .box {
  padding-top: 0;
}
.p-history .history .item:nth-of-type(2) .box img {
  width: min(10px, 0.625rem, 2.6666666667vw);
  height: min(10px, 0.625rem, 2.6666666667vw);
  top: min(9.5px, 0.59375rem, 2.5333333333vw);
  left: min(7px, 0.4375rem, 1.8666666667vw);
}
.p-history .history .item:nth-of-type(32) {
  border-bottom: none;
}
.p-history .history .year {
  font-family: "Roboto Condensed", sans-serif;
  font-size: min(20px, 1.25rem, 5.3333333333vw);
  line-height: 1.3;
  letter-spacing: 0em;
  color: #dfeffa;
  width: 15.652173913%;
  padding-top: min(13.6px, 0.85rem, 3.6266666667vw);
  padding-left: min(8px, 0.5rem, 2.1333333333vw);
  padding-bottom: min(18.4px, 1.15rem, 4.9066666667vw);
}
.p-history .history .box {
  width: 84.347826087%;
  padding-top: min(13.6px, 0.85rem, 3.6266666667vw);
  padding-left: min(33px, 2.0625rem, 8.8vw);
  padding-bottom: min(18.4px, 1.15rem, 4.9066666667vw);
  position: relative;
  z-index: 0;
}
.p-history .history .box::before {
  content: "";
  background-color: #448cd5;
  width: min(2px, 0.125rem, 0.5333333333vw);
  height: calc(100% - 1px);
  position: absolute;
  top: 50%;
  left: min(11px, 0.6875rem, 2.9333333333vw);
  z-index: 0;
  transform: translateY(-50%);
}
.p-history .history .box > img {
  width: min(8px, 0.5rem, 2.1333333333vw);
  height: min(8px, 0.5rem, 2.1333333333vw);
  position: absolute;
  top: min(23.6px, 1.475rem, 6.2933333333vw);
  left: min(8px, 0.5rem, 2.1333333333vw);
  z-index: 1;
}
.p-history .history .month {
  /* 9/24 */
  /* font-size: min(12px, 0.75rem, 3.2vw); */
  font-size: min(16px, 1rem, 4.27vw);
  /* -------------- 9/24 */
  line-height: 2;
  letter-spacing: 0em;
  color: #0051ca;
}
.p-history .history .month span {
  font-family: "Roboto Condensed", sans-serif;
  /* 9/24 */
  /* font-size: min(18px, 1.125rem, 4.8vw); */
  font-size: min(22px, 1.375rem, 5.87vw);
  /* ------------------ 9/24 */
  line-height: 1.3333333333;
  letter-spacing: 0em;
}
.p-history .history .text {
  /* 9/24 */
  /* font-size: min(14px, 0.875rem, 3.7333333333vw); */
  font-size: min(18px, 1.125rem, 4.8vw);
  /* line-height: 1.3571428571; */
  line-height: calc(32/18);
  /* 9/24 */
  font-weight: 500;
  letter-spacing: 0em;
  margin-top: min(2px, 0.125rem, 0.5333333333vw);
}

@media (768px <= width) {
  .p-history .history {
    margin-inline: auto;
    padding-top: min(70px, 4.375rem, 4.8611111111vw);
  }
  .p-history .history .inner {
    padding-top: min(65px, 4.0625rem, 4.5138888889vw);
    padding-bottom: min(137px, 8.5625rem, 9.5138888889vw);
  }
  .p-history .history .title {
    width: min(93px, 5.8125rem, 6.4583333333vw);
  }
  .p-history .history .head {
    font-size: min(28px, 1.75rem, 1.9444444444vw);
    line-height: 1.4285714286;
    width: min(300px, 18.75rem, 20.8333333333vw);
    height: min(65px, 4.0625rem, 4.5138888889vw);
    margin-top: min(135px, 8.4375rem, 9.375vw);
  }
  .p-history .history .movie-container {
    width: min(1000px, 62.5rem, 69.4444444444vw);
    aspect-ratio: 1000/485;
    margin-top: min(40px, 2.5rem, 2.7777777778vw);
  }
  .p-history .history .list-container {
    width: min(1000px, 62.5rem, 69.4444444444vw);
    max-width: none;
    margin-top: min(50px, 3.125rem, 3.4722222222vw);
  }
  .p-history .history .item:first-of-type {
    border-bottom: none;
    height: min(32px, 2rem, 2.2222222222vw);
    margin-bottom: 0;
  }
  .p-history .history .item:first-of-type span:first-of-type {
    width: min(127px, 7.9375rem, 8.8194444444vw);
  }
  .p-history .history .item:first-of-type span:last-of-type {
    border-left: 2px dashed #448cd5;
    width: min(811px, 50.6875rem, 56.3194444444vw);
    margin-left: min(60px, 3.75rem, 4.1666666667vw);
  }
  .p-history .history .item:last-of-type {
    height: min(32px, 2rem, 2.2222222222vw);
  }
  .p-history .history .item:last-of-type span:first-of-type {
    width: min(127px, 7.9375rem, 8.8194444444vw);
  }
  .p-history .history .item:last-of-type span:last-of-type {
    border-left: 2px dashed #448cd5;
    width: min(811px, 50.6875rem, 56.3194444444vw);
    margin-left: min(60px, 3.75rem, 4.1666666667vw);
  }
  .p-history .history .item:nth-of-type(2) .year {
    font-size: min(63px, 3.9375rem, 4.375vw);
    line-height: 1.3174603175;
    padding-left: 0;
  }
  .p-history .history .item:nth-of-type(2) .box {
    padding-top: min(32px, 2rem, 2.2222222222vw);
  }
  .p-history .history .item:nth-of-type(2) .box img {
    width: min(21px, 1.3125rem, 1.4583333333vw);
    height: min(21px, 1.3125rem, 1.4583333333vw);
    top: min(33.5px, 2.09375rem, 2.3263888889vw);
    left: min(50px, 3.125rem, 3.4722222222vw);
  }
  .p-history .history .year {
    font-size: min(46px, 2.875rem, 3.1944444444vw);
    line-height: 1.3043478261;
    width: min(127px, 7.9375rem, 8.8194444444vw);
    padding-top: min(15px, 0.9375rem, 1.0416666667vw);
    padding-left: min(22px, 1.375rem, 1.5277777778vw);
    padding-bottom: min(13px, 0.8125rem, 0.9027777778vw);
  }
  .p-history .history .box {
    display: flex;
    flex-direction: row;
    width: min(873px, 54.5625rem, 60.625vw);
    padding-top: min(32px, 2rem, 2.2222222222vw);
    padding-left: min(84px, 5.25rem, 5.8333333333vw);
    padding-bottom: min(13px, 0.8125rem, 0.9027777778vw);
  }
  .p-history .history .box::before {
    left: min(60.5px, 3.78125rem, 4.2013888889vw);
  }
  .p-history .history .box > img {
    width: min(16px, 1rem, 1.1111111111vw);
    height: min(16px, 1rem, 1.1111111111vw);
    top: min(37px, 2.3125rem, 2.5694444444vw);
    left: min(53px, 3.3125rem, 3.6805555556vw);
  }
  .p-history .history .month {
    font-size: min(14px, 0.875rem, 0.9722222222vw);
    line-height: 1.8571428571;
  }
  .p-history .history .month span {
    font-size: min(20px, 1.25rem, 1.3888888889vw);
    line-height: 1.3;
  }
  .p-history .history .text {
    font-size: min(18px, 1.125rem, 1.25vw);
    line-height: 1.4444444444;
    margin-top: 0;
  }
}