/* ==================================================
History
================================================== */

.history-modaal {
  display: none;
}

.history-content {
  overflow: hidden;
}

.modaal-wrapper {
  z-index: 999999;
}
.modaal-wrapper img {
  text-align: center;
  display: block;
  margin: calc(20 / 14 * 1em) auto;
}
.modaal-overlay {
  z-index: 99999;
}

@media all and (min-width: 751px) {

  .modaal-content ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: auto;
    max-width: 710px;
  }

  .history-head {
    background: url(../img/history/img.jpg) no-repeat center;
    width: 100%;
    height: calc(388 / 14 * 1em);
    display: flex;
    justify-content: center;
  }
  .history-head img {
    width: calc(180 / 14 * 1em);
    height: calc(180 / 14 * 1em);
    margin-top: calc(-55 / 14 * 1em);
  }

  .history-content {
    position: relative;
    margin-top: calc(-264 / 14 * 1em);
    display: flex;
    padding-top: calc(390 / 14 * 1em);
    padding-bottom: 0;
  }
  .history-content::before {
    content: '';
    display: block;
    width: 6px;
    height: 100%;
    background-color: #0c6ac2;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-3px);
    z-index: 2;
  }

  .history__inner {
    max-width: 1060px;
    width: 100%;
    margin: auto;
    padding: 0 calc(30 / 14 * 1em);
  }

  .history .c-pagetitle {
    padding: 40px 0 90px 0;
  }

  .history__li .img {
    position: relative;
    width: calc(540 / 14 * 1em);
    margin-top: calc(100 / 14 * 1em);
    padding-bottom: calc(100 / 14 * 1em);
  }

  .history__li .img img {
    position: absolute;
  }

  .history__li {
    width: calc(430 / 14 * 1em);
    position: relative;
    left: 0;
  }

  .history__li:nth-child(even) {
    margin-left: auto;
    margin-top: calc(-70 / 14 * 1em);
  }

  .history__li::before {
    content: '';
    display: block;
    width: calc(70 / 14 * 1em);
    height: 6px;
    background-color: #02b0a0;
    right: calc(-70 / 14 * 1em);
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
  }
  .history__li:nth-child(even):before {
    background-color: #0c6ac2;
    left: calc(-70 / 14 * 1em);
    top: 50%;
    position: absolute;
  }
  .history__li::after {
    content: '';
    display: block;
    width: calc(40 / 14 * 1em);
    height: calc(40 / 14 * 1em);
    background-color: #fff;
    border-radius: 20px;
    border: solid 6px #02b0a0;
    right: calc(-90 / 14 * 1em);
    top: 50%;
    position: absolute;
    z-index: 2;
    transform: translateY(-50%);
  }
  .history__li:nth-child(even):after {
    left: calc(-90 / 14 * 1em);
    top: 50%;
    position: absolute;
    border: solid 6px #0c6ac2;
  }

  .history .history__li--2013 {
    margin-top: 0;
  }

  .history .history__li--2015 {
    margin-top: 0;
  }

  .history .history__li--2016 {
    margin-top: calc(-140 / 14 * 1em);
  }

  .history .history__li--2017 {
    margin-top: calc(140 / 14 * 1em);
  }

  .history .history__li--2018 {
    margin-top: 0;
  }

  .history .history__li--2019 {
    margin-top: 0;
  }

  .history .history__li--2018 .c-btn.-type-1,
  .history .history__li--2019 .c-btn.-type-1 {
    margin-top: calc(20 / 14 * 1em);;
  }

  .history .history__li--2020 {
    margin-top: 0;
  }

  .history .history__li--2015::before,
  .history .history__li--2015::after {
    top: 28%;
  }
  .history .history__li--2016::before,
  .history .history__li--2016::after {
    top: 17%;
  }

  .history .history__li--2016 .img {
    margin-left: calc(-110 / 14 * 1em);
  }

  .history__li dl {
    padding: 0 calc(30 / 14 * 1em) calc(30 / 14 * 1em);
    position: relative;
    background-color: #f0f4f5;
    border-radius: 20px;
  }
  .history__li dt {
    text-align: center;
    top: calc(-45 / 14 * 1em);
    position: relative;
  }
  .history__li dt strong {
    color: #0c6ac2;
    font-size: calc(90 / 14 * 1em);
    font-family: 'Oswald';
    font-weight: 500;
    display: block;
    line-height: 1;
  }
  .history__li dt small {
    color: #0c6ac2;
    font-size: calc(13 / 14 * 1em);
  }
  .history__li dd {
    font-size: calc(18 / 14 * 1em);
    text-align: center;
    margin-top: calc(-30 / 14 * 1em);
  }
  .history__li dd p {
    font-weight: bold;
    padding: 0 0 calc(15 / 14 * 1em) 0;
  }
  .history__li dd nav {
    display: flex;
    flex-wrap: wrap;
  }
  .history__li dd nav div {
    width: calc(140 / 14 * 1em);
  }
  .history__li dd nav small {
    font-size: 1.2rem;
    display: inherit;
    margin-top: 4px;
  }
  .history__li dd nav a {
    width: 100%;
    display: block;
    border: solid 2px #0c6ac2;
    border-radius: 20px;
    text-decoration: none;
    font-size: 1.4rem;
    font-weight: bold;
    padding: calc(6 / 14 * 1em);
    position: relative;
  }
  [lang="en"] .history__li dd nav a {
    font-size: 1.1rem;
    line-height: 2;
  }
  .history__li dd nav a span {
    position: absolute;
    width: 1.2rem;
    height: 1.2rem;
    background: url(../img/history/btn-ar.png) no-repeat;
    background-size: cover;
    right: 1.6rem;
    top: 1rem;
  }
  .history__li dd nav div:nth-of-type(odd) {
    margin-right: calc(7 / 14 * 1em);
  }
  .history__li dd nav div:nth-child(1),
  .history__li dd nav div:nth-child(2) {
    margin-bottom: calc(10 / 14 * 1em);
  }

  .history__end {
    margin-top: calc(90 / 14 * 1em);
    padding-top: calc(90 / 14 * 1em);
    padding-bottom: calc(120 / 14 * 1em);
    background: #fff;
    position: relative;
    z-index: 3;
  }
  .history__end dl {
    top: calc(-30 / 14 * 1em);
    position: relative;
  }
  .history__end dt {
    text-align: center;
    top: calc(-15 / 14 * 1em);
    position: relative;
  }
  .history__end dt strong {
    color: #0c6ac2;
    font-size: calc(90 / 14 * 1em);
    font-family: 'Oswald';
    font-weight: 500;
    display: block;
    line-height: 1;
  }
  .history__end dt small {
    color: #0c6ac2;
    font-size: calc(13 / 14 * 1em);
    display: block;
  }
  .history__end dt img {
    width: calc(455 / 14 * 1em);
    margin: auto;
    margin-top: calc(10 / 14 * 1em);
  }
  .history__end dd {
    font-size: calc(18 / 14 * 1em);
    text-align: center;
  }
  .history__end dd p {
    font-weight: bold;
    padding: 0 0 calc(15 / 14 * 1em) 0;
  }
  .history .c-btn.-type-1 {
    width: calc(220 / 14 * 1em);
    height: calc(42 / 14 * 1em);
    padding: 0 calc(15 / 14 * 1em);
  }
  .history .c-btn.-type-1 .c-btn__label {
    right: auto;
    top: auto;
    background: none;
    width: auto;
    height: auto;
    padding-left: calc(7 / 14 * 1em);
  }
  .history .c-btn.-type-1 .c-btn__ico {
    right: .5rem;
    top: auto;
    width: calc(54 / 14 * 1em);
  }

}

@media screen and (max-width: 1060px) {
  .history__li::after {
    right: calc(-72 / 14 * 1em);
  }
  .history__li:nth-child(even):after {
    left: calc(-72 / 14 * 1em);
  }
}

@media screen and (max-width: 750px) {

  .history-head {
    background: url(../img/history/img_sp.jpg) no-repeat center;
    background-size: cover;
    width: 100%;
    height: calc(400 / 14 * .5em);
    display: flex;
    justify-content: center;
  }
  .history-head img {
    width: calc(250 / 14 * .5em);
    height: calc(250 / 14 * .5em);
    margin-top: calc(-90 / 14 * .5em);
  }

  .history-content {
    position: relative;
    margin-top: calc(-120 / 14 * 1em);
    display: flex;
    justify-content: center;
    padding-top: calc(195 / 14 * 1em);
    padding-bottom: 0;
  }
  .history-content::before {
    content: '';
    display: block;
    width: 3px;
    height: 100%;
    background-color: #0c6ac2;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
  }

  .history__inner {
    width: 100%;
    margin: auto;
    padding: 0 calc(20 / 14 * 1em);
  }

  .history .c-pagetitle {
    padding: 20px 0 60px 0;
  }

  .history__li .img {
    position: relative;
    width: calc(370 / 14 * .5em);
    margin-top: calc(100 / 14 * 1em);
    padding-bottom: calc(100 / 14 * 1em);
    margin-left: auto;
    margin-right: calc(-30 / 14 * 1em);
  }

  .history__li .img img {
    position: absolute;
  }

  .history__li {
    width: 100%;
    position: relative;
    margin-bottom: calc(60 / 14 * 1em);
  }

  .history__li dt small {
    padding-left: calc(10 / 14 * 1em);
  }

  .history__li:nth-child(even) dt {
    text-align: right;
  }

  .history__li:nth-child(even) dt small {
    left: 0;
  }

  .history .history__li--2015 .img {
    top: calc(220 / 14 * 1em);
  }

  .history .history__li--2016 {
    margin-top: calc(-200 / 14 * 1em);
  }

  .history .history__li--2018 .c-btn.-type-1,
  .history .history__li--2019 .c-btn.-type-1 {
    margin-top: calc(20 / 14 * 1em);
  }

  .history .history__li--2020 {
    margin-top: 0;
  }

  .history .history__li--2016 .img {
    margin-left: calc(-30 / 14 * 1em);
  }

  .history__li dl {
    padding: 0 calc(20 / 14 * 1em) calc(20 / 14 * 1em);
    position: relative;
    z-index: 2;
    background-color: #f0f4f5;
    border-radius: 20px;
  }
  .history__li dt {
    top: calc(-25 / 14 * 1em);
    position: relative;
  }
  .history__li dt strong {
    color: #0c6ac2;
    font-size: calc(60 / 14 * 1em);
    font-family: 'Oswald';
    font-weight: 500;
    line-height: 1;
    text-align: left;
  }
  .history__li dt small {
    color: #0c6ac2;
    font-size: calc(11 / 14 * 1em);
    position: absolute;
    bottom: .3rem;
  }
  .history__li dd {
    font-size: calc(16 / 14 * 1em);
    text-align: center;
    margin-top: calc(-10 / 14 * 1em);
  }
  .history__li dd p {
    font-weight: bold;
    padding: 0 0 calc(15 / 14 * 1em) 0;
  }
  .history__li dd nav {
    display: flex;
    flex-wrap: wrap;
  }
  .history__li dd nav div {
    width: calc(125 / 14 * 1em);
  }
  .history__li dd nav small {
    font-size: 1.2rem;
    display: inherit;
    margin-top: 4px;
  }
  .history__li dd nav a {
    width: 100%;
    display: block;
    border: solid 2px #0c6ac2;
    border-radius: 20px;
    text-decoration: none;
    font-size: 1.4rem;
    font-weight: bold;
    padding: calc(6 / 14 * 1em);
    position: relative;
  }
  [lang="en"] .history__li dd nav a {
    font-size: 1rem;
    line-height: 2.4;
    text-align: left;
    padding-left: calc(16 / 14 * 1em);
  }
  .history__li dd nav a span {
    position: absolute;
    width: 1.2rem;
    height: 1.2rem;
    background: url(../img/history/btn-ar.png) no-repeat;
    background-size: cover;
    right: calc(16 / 14 * 1em);
    top: 1rem;
  }
  .history__li dd nav div:nth-of-type(odd) {
    margin-right: calc(7 / 14 * 1em);
  }
  .history__li dd nav div:nth-child(1),
  .history__li dd nav div:nth-child(2) {
    margin-bottom: calc(10 / 14 * 1em);
  }

  .history__end {
    margin-top: calc(90 / 14 * 1em);
    padding-top: calc(90 / 14 * 1em);
    padding-bottom: calc(40 / 14 * 1em);
    background: #fff;
    position: relative;
    z-index: 3;
  }
  .history__end dl {
    top: calc(-30 / 14 * 1em);
    position: relative;
  }
  .history__end dt {
    text-align: center;
    top: calc(-15 / 14 * 1em);
    position: relative;
  }
  .history__end dt strong {
    color: #0c6ac2;
    font-size: calc(60 / 14 * 1em);
    font-family: 'Oswald';
    font-weight: 500;
    display: block;
    line-height: 1;
  }
  .history__end dt small {
    color: #0c6ac2;
    font-size: calc(13 / 14 * 1em);
    display: block;
  }
  .history__end dt img {
    width: calc(568 / 14 * .5em);
    margin: auto;
    margin-top: calc(10 / 14 * 1em);
  }
  .history__end dd {
    font-size: calc(18 / 14 * 1em);
    text-align: center;
  }
  .history__end dd p {
    font-weight: bold;
    padding: 0 0 calc(15 / 14 * 1em) 0;
  }
  .history .c-btn.-type-1 {
    width: calc(220 / 14 * 1em);
    height: calc(42 / 14 * 1em);
    padding: 0 calc(15 / 14 * 1em);
  }
  .history .c-btn.-type-1 .c-btn__label {
    right: auto;
    top: auto;
    background: none;
    width: auto;
    height: auto;
    padding-left: calc(7 / 14 * 1em);
  }
  .history .c-btn.-type-1 .c-btn__ico {
    right: .5rem;
    top: auto;
    width: calc(54 / 14 * 1em);
  }

}