main {
  margin-top: 300px;
}

.centered-1400 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

/* .article__box {
  width: calc(100% - 300px);
} */

.article__header {
  -ms-flex-preferred-size: 210px;
  flex-basis: 210px;
}

.article__breadcrumb {
  font-size: 1.7rem;
  line-height: 3.6rem;
  color: #2b1d4b;
}

.breadcrumb span, 
.breadcrumb a {
	color: #2b1d4b !important;	
}

.article__date {
  font-size: 3.3rem;
  line-height: 3.6rem;
  font-weight: 700;
  color: #4475e6;
}

.article__content {
  margin-top: 110px;
  margin-left: 120px;
  color: #4475e6;
}

.article__title {
  margin-bottom: 20px;
  font-size: 1.7rem;
  line-height: 2.1rem;
  font-weight: 700;
}

.article__body {
  font-size: 1.5rem;
  line-height: 1.9rem;
  text-align:justify;
}

.article__body h2 {
  margin-bottom: 30px;
}

.article__body ul {
  list-style-type: disc;
  margin-left: 20px;
}

.article__body ol {
  list-style-type: decimal;
  margin-left: 20px;
}

.article__body li {
  margin-bottom: 20px;
}

.article__body a {
  color: #4475e6; 
}

.article__body p {
  margin-bottom: 20px
}

.article__image {
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%;
  -webkit-box-flex: 1;
  -ms-flex: 1 0 auto;
  flex: 1 0 auto;
  margin-top: 110px;
  margin-left: 20px;
  text-align: right;
}

.pagination {
  padding: 100px 30px;
}

.pagination .navigation {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.pagination .nav-links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.pagination .screen-reader-text {
  display: none;
}

.pagination a {
  font-size: 1.7rem;
  line-height: 1.7rem;
  font-weight: 700;
  color: #4475e6;
  -webkit-transition: unset;
  transition: unset;
}

.nav-previous a:before,
.nav-next a:after {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 45px;
  height: 30px;
  background: url(../../image/sprite.svg) no-repeat 0px 0px;
}

.nav-previous a:before {
  margin-right: 10px;
  background-position: -113px -141px;
}

.nav-next a:after {
  margin-left: 10px;
  background-position: -113px -108px;
}

/* ANIMATION */
.article__breadcrumb.element-anime,
.article__date.element-anime {
  position: relative;
}

.article__breadcrumb.element-anime:before,
.article__date.element-anime:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 115%;
  background: #fff;
  -webkit-transform: translate3d(0, 0, 0) translate3d(-1px, 0, 0);
  transform: translate3d(0, 0, 0) translate3d(-1px, 0, 0);
  -webkit-transition: -webkit-transform 0.7s cubic-bezier(0.7, 0, 0.3, 1);
  transition: -webkit-transform 0.7s cubic-bezier(0.7, 0, 0.3, 1);
  transition: transform 0.7s cubic-bezier(0.7, 0, 0.3, 1);
  transition: transform 0.7s cubic-bezier(0.7, 0, 0.3, 1), -webkit-transform 0.7s cubic-bezier(0.7, 0, 0.3, 1);
}

.article__breadcrumb.element-anime--visible:before,
.article__date.element-anime--visible:before {
  -webkit-transform: translate3d(-100%, 0, 0) translate3d(1px, 0, 0);
  transform: translate3d(-100%, 0, 0) translate3d(1px, 0, 0);
}

.article__content.element-anime,
.article__image.element-anime {
  opacity: 0;
  -webkit-transform: translateY(10px);
  transform: translateY(10px);
  -webkit-transition: opacity 0.5s ease, -webkit-transform 0.5s ease;
  transition: opacity 0.5s ease, -webkit-transform 0.5s ease;
  transition: transform 0.5s ease, opacity 0.5s ease;
  transition: transform 0.5s ease, opacity 0.5s ease, -webkit-transform 0.5s ease;
}

.article__content.element-anime--visible,
.article__image.element-anime--visible {
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

@media(max-width:1024px) {
  main {
    margin-top: 100px;
  }

  .article__content {
    margin-left: 40px;
  }

  .pagination {
    padding: 50px 20px;
  }

  .article__image {
    text-align: center;
  }
}

@media(max-width:767px) {
  article.centered-1400 {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .article__header {
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
  }

  .article__content {
    margin-top: 50px;
    margin-left: 0;
  }

  .pagination span {
    display: none;
  }

  .article__date {
    font-size: 2.5rem;
  }

  .article__image {
    margin-top: 0;
    margin-left: 0;
  }

}


.breadcrumb a:not(:last-child):after {
	content: '/';
    margin: 0 5px;
}