.p-history {
  font-size: 1.1111vw;
  font-weight: bold;
}
.p-history-wrapper {
  display: flex;
  overflow: hidden;
}

.p-history-period-list {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.p-history-period-list li {
  width: 100%;
  margin-bottom: 2em;
}
.p-history-period-list a {
  display: block;
  background-color: #EAEAEA;
  color: #000;
  border-radius: 50px;
  text-align: center;
  padding: .4em;
  width: 96%;
}
.p-history-period-list .active a {
  background-color: #E12F2B;
  color: #FFF;
}

/* メニュー */
.p-history-menu {
  width: 16%;
}
.p-history-menu .p-history-period-list {
  flex-direction: column;
}

/* ページャー */
.p-history-pager {
  width: 40%;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3em 0;
  font-size: 1.2em;
}

.p-history-pager-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1em;
  opacity: .6;
}
.p-history-pager-item.--prev, .p-history-pager-item.--next {
  opacity: 1;
}
.p-history-pager-item:hover {
  opacity: .6;
}
.p-history-pager-item img {
  width: 20%;
}

/* コンテンツ */
.p-history-contents {
  width: 84%;
  padding: 0 8em 0 4em;
  position: relative;
}

/* 画像 */
.p-history-img {
  position: absolute;
}
.p-history-img.--p-history-img-1 {
  width: 24em;
  top: 13%;
}
.p-history-img.--p-history-img-2 {
  width: 24em;
  top: 71%;
  left: 64%;
}
.p-history-img.--p-history-img-3 {
  width: 12em;
  top: 79%;
  left: 60%;
}
.p-history-img.--p-history-img-4 {
  width: 32%;
  top: 26%;
  left: 61%;
}
.p-history-img.--p-history-img-5 {
  width: 38%;
  top: 40%;
  left: 60%;
}
.p-history-img.--p-history-img-6 {
  width: 18%;
  top: 54%;
  left: 72%;
}
.p-history-img.--p-history-img-7 {
  width: 20em;
  top: 67%;
  left: 0%;
}
.p-history-img.--p-history-img-8 {
  width: 16em;
  top: 72%;
  left: -2%;
}
.p-history-img.--p-history-img-9 {
  width: 18em;
  top: 90%;
  left: 65%;
}
.p-history-img.--p-history-img-10 {
  width: 10em;
  top: 92%;
  left: 60%;
}
.p-history-img.--p-history-img-11 {
  width: 10em;
  top: 4.8%;
  left: 10%;
}
.p-history-img.--p-history-img-12 {
  width: 18em;
  top: 8%;
  left: 66%;
}
.p-history-img.--p-history-img-13 {
  width: 22em;
  top: 30%;
  left: 64%;
}
.p-history-img.--p-history-img-14 {
  width: 18em;
  top: 34%;
  left: 58%;
}
.p-history-img.--p-history-img-15 {
  width: 21em;
  top: 52.8%;
  left: 2%;
}
.p-history-img.--p-history-img-16 {
  width: 21em;
  top: 79.6%;
  left: 60%;
}
.p-history-img.--p-history-img-17 {
  width: 20em;
  top: 4%;
  left: 53%;
}
.p-history-img.--p-history-img-18 {
  width: 22em;
  top: 11%;
  left: 60%;
}
.p-history-img.--p-history-img-19 {
  width: 20em;
  top: 48%;
  left: 62%;
}
.p-history-img.--p-history-img-20 {
  width: 22em;
  top: 80%;
  left: 55%;
}
.p-history-img.--p-history-img-21 {
  width: 21em;
  top: 13%;
  left: 58%;
}
.p-history-img.--p-history-img-22 {
  width: 10em;
  top: 46%;
  left: 55%;
}
.p-history-img.--p-history-img-23 {
  width: 10em;
  top: 50%;
  left: 67%;
}
.p-history-img.--p-history-img-24 {
  width: 21em;
  top: 59%;
  left: 50%;
}
.p-history-img.--p-history-img-25 {
  width: 15em;
  top: 66%;
  left: 66%;
}
.p-history-img.--p-history-img-26 {
  width: 5em;
  top: 73%;
  left: 62%;
}
.p-history-img.--p-history-img-27 {
  width: 5em;
  top: 77%;
  left: 53%;
}
.p-history-img.--p-history-img-28 {
  width: 11em;
  top: 77%;
  left: 71%;
}

.p-history-year__header h3 {
  font-size: 2.4em;
  color: #E12F2B;
  font-weight: bold;
}

.p-history-year__body {
  display: flex;
  align-items: stretch;
  padding: 2em 0;
}

/* イベント */
.p-history-event {
  margin-bottom: 2em;
}
.p-history-event .p-history-event__header h4 {
  padding: 1em 1em 0 1em;
  border-radius: 14px 14px 0 0;
  font-weight: bold;
}
.p-history-event .p-history-event__body {
  border-radius: 0 14px 14px 14px;
  padding: 2em 2.8em;
}

.p-history-event-detail {
  margin-bottom: 1em;
  margin-left: 1em;
  list-style: inherit !important;
}
.p-history-event-detail.--list-style-none::marker {
  content: '';
}
.p-history-event-detail:last-child {
  margin-bottom: 0;
}
.p-history-event-detail::marker {
  content: '・';
}

/* 白枠イベント */
.p-history-special-event {
  background-color: #FFF;
  border-radius: 14px;
  padding: 2em;
  margin: 2em 0;
}
.p-history-special-event__header {
  font-weight: bold;
  margin-bottom: 1em;
  font-size: 1.4em;
}
.p-history-special-event__body p {
  line-height: 2.4;
}
.p-history-special-event__footer {
  padding-top: 1em;
  display: flex;
}
.p-history-special-event__footer span {
  margin: 0 1em;
}
.p-history-special-event__footer a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .4em 2em;
  color: #FFF;
  background-color: #E12F2B;
  border-radius: 50px;
}
.p-history-special-event__footer a img {
  width: 2em;
}

/* 白枠イベント 個別対応 */
.p-history-special-event.--2005-1 {
  padding-left: 16.4em;
}
.p-history-special-event.--2012-1 {
  padding-left: 12em;
}
.p-history-special-event.--2013-1 {
  padding-left: 8em;
}
.p-history-special-event.--2015-1 {
  padding-left: 12em;
}

/* ピンク */
.p-history-event.--pink .p-history-event__body {
  background-color: #FCEAE9;
}
.p-history-event.--pink .p-history-event__header {
  display: flex;
}
.p-history-event.--pink .p-history-event__header h4 {
  background-color: #FCEAE9;
  color: #E12F2B;
}
.p-history-event.--pink .p-history-special-event__header {
  color: #E12F2B;
}

/* グリーン */
.p-history-event.--green .p-history-event__body {
  background-color: #F9FFE3;
}
.p-history-event.--green .p-history-event__header {
  display: flex;
}
.p-history-event.--green .p-history-event__header h4 {
  background-color: #F9FFE3;
  color: #009245;
}
.p-history-event.--green .p-history-special-event__header {
  color: #009245;
}

/* 点線 */
.p-history-line {
  display: flex;
  align-items: stretch;
  background-image: radial-gradient(circle farthest-side, #E12F2B, #E12F2B 26%, transparent 26%, transparent);
  background-size: 1em 1.4em;
  content: '';
  background-repeat: repeat-y;
  width: 5%;
  margin-left: 2em;
}

.p-history-event-list {
  width: 95%;
}

/* PC MAX */
@media screen and (min-width: 1260px) {
  .p-history {
    font-size: 16px;
  }
}

/* SP */
@media screen and (max-width: 767px) {
  .p-history {
    font-size: 4.26vw;
  }
  .p-history-wrapper {
    flex-direction: column;
  }

  .p-history-year__body {
    padding: 1em 0;
  }

  .p-history-menu {
    width: 90%;
    margin: auto;
  }
  .p-history-contents {
    width: 100%;
    padding: 1em 0 0;
  }
  .p-history-content {
    width: 90%;
    margin: auto;
  }
  .p-history-menu .p-history-period-list, .p-history-period-list {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .p-history-event-list {
    margin-top: 1em;
  }
  .p-history-period-list li {
    width: 50%;
    margin-bottom: 1.6em;
  }

  /* ページャー */
  .p-history-pager {
    font-size: 1.2em;
    width: 90%;
    padding: 1.4em 0;
  }

  /* 点線 */
  .p-history-line {
    width: 8%;
    margin-left: 0;
  }

  .p-history-year__header h3 {
    font-size: 2em;
  }
  .p-history-event .p-history-event__header h4 {
    font-size: 1em;
  }

  .p-history-event .p-history-event__body {
    padding: 1.2em 1em;
  }

  .p-history-special-event__body p {
    line-height: 2;
  }

  .p-history-event-detail-list, .p-history-special-event__body, .p-history-special-event__footer {
    font-size: .86em;
  }
  .p-history-event-detail {
    margin-bottom: 0;
    line-height: 2;
    white-space: nowrap;
  }

  /* 白枠イベント */
  .p-history-special-event__header {
    font-size: 1em;
  }

  .p-history-special-event {
    padding: 1em;
    border-radius: 10px;
    margin: 1em 0;
  }

  /* 白枠イベント個別対応 */
  .p-history-special-event.--2005-1,
  .p-history-special-event.--2012-1,
  .p-history-special-event.--2013-1,
  .p-history-special-event.--2015-1
  {
    padding-left: inherit;
  }

  .p-history-footer-content__footer {
    width: 90%;
    margin: auto;
  }

  /* 画像 */
  .p-history-img.--p-history-img-1 {
    width: 43%;
    top: 26%;
    left: 59%;
  }
  .p-history-img.--p-history-img-2 {
    width: 47%;
    top: 79.4%;
    left: 59%;
  }
  .p-history-img.--p-history-img-3 {
    width: 6.4em;
    top: 83.4%;
    left: 53%;
  }
  .p-history-img.--p-history-img-4 {
    width: 38%;
    top: 26%;
    left: 67%;
  }
  .p-history-img.--p-history-img-5 {
    width: 49%;
    top: 46%;
    left: 58%;
  }
  .p-history-img.--p-history-img-6 {
    width: 28%;
    top: 54%;
    left: 74%;
  }
  .p-history-img.--p-history-img-7 {
    width: 11em;
    top: 59%;
    left: 57%;
  }
  .p-history-img.--p-history-img-8 {
    width: 8em;
    top: 58.5%;
    left: 48%;
  }
  .p-history-img.--p-history-img-9 {
    width: 11em;
    top: 90%;
    left: 62%;
  }
  .p-history-img.--p-history-img-10 {
    width: 5.2em;
    top: 93%;
    left: 62%;
  }
  .p-history-img.--p-history-img-11 {
    width: 6em;
    top: 3%;
    left: 73%;
  }
  .p-history-img.--p-history-img-12 {
    width: 10em;
    top: 11.6%;
    left: 60%;
  }
  .p-history-img.--p-history-img-13 {
    width: 9em;
    top: 29%;
    left: 75%;
  }
  .p-history-img.--p-history-img-14 {
    width: 7.2em;
    top: 32.6%;
    left: 73%;
  }
  .p-history-img.--p-history-img-15 {
    width: 11em;
    top: 48.2%;
    left: 56%;
  }
  .p-history-img.--p-history-img-16 {
    width: 10em;
    top: 89.6%;
    left: 57%;
  }
  .p-history-img.--p-history-img-17 {
    width: 8em;
    top: 4.6%;
    left: 73%;
  }
  .p-history-img.--p-history-img-18 {
    width: 9em;
    top: 13.2%;
    left: 66%;
  }
  .p-history-img.--p-history-img-19 {
    width: 10em;
    top: 50.4%;
    left: 66%;
  }
  .p-history-img.--p-history-img-20 {
    width: 10em;
    top: 78.4%;
    left: 68%;
  }
  .p-history-img.--p-history-img-21 {
    width: 10em;
    top: 18%;
    left: 61%;
  }
  .p-history-img.--p-history-img-22 {
    width: 7em;
    top: 43%;
    left: 59%;
  }
  .p-history-img.--p-history-img-23 {
    width: 5em;
    top: 51.2%;
    left: 79%;
  }
  .p-history-img.--p-history-img-24 {
    width: 10em;
    top: 65.4%;
    left: 64%;
  }
  .p-history-img.--p-history-img-25 {

    width: 8em;
    top: 60%;
    left: 64%;
  }
  .p-history-img.--p-history-img-26 {
    width: 3.4em;
    top: 77%;
    left: 85%;
  }
  .p-history-img.--p-history-img-27 {
    width: 3.4em;
    top: 80%;
    left: 81%;
  }
  .p-history-img.--p-history-img-28 {
    width: 5.6em;
    top: 95.2%;
    left: 65%;
  }
}