@import url('./header.css');
@import url('./footer.css');
@import url('./common-style.css');


.article-section {
  width: 100%;
}

.article-section .article-img img {
  width: 100%;
}

.article-section .article-content {
  width: 70vw;
  max-width: 70vw;
  margin: 0 auto 100px auto;
}

.article-section .article-content h1.title {
  color: #3072fe;
  font-size: 300%;
  font-family: 'FbForma-medium';
  margin: 25px 0px 15px 0;
  line-height: 1.07;
}

.article-section .article-content h2.sub-title {
  font-size: 170%;
  line-height: 1.15;
  font-family: 'FbForma-medium';
  margin: 0px 0px 25px 0px;
}

.article-section .article-content h1.title.en {
    font-size: 225%;
    font-family: sans-serif;
    font-weight: bold;
    text-align: left;
    direction: ltr;
}

.article-section .article-content h2.sub-title.en {
    font-size: 125%;
    font-family: sans-serif;
    font-weight: bold;
    text-align: left;
    direction: ltr;
}

.article-section .article-content .date {
  opacity: 0.7;
  margin: 0px 0px 40px 0px;
}


.article-section .article-content .text {
  font-size: 120%;
  line-height: 1.7;
}

.article-section .article-content .text.en,
.article-section .article-content .date.en {
    text-align: left;
    direction: ltr;
}

.article-section .article-content .text img {
  max-width: 100% !important;
  height: auto !important;
  margin: 15px 0;
}

.more-article-section {
  width: 90vw;
  max-width: 90vw;
  margin: 0 auto;
}

.more-article-section .articles-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 30px;
}

.more-article-section .more-articles {
  margin: 30px 0;
  display: flex;
  justify-content: center;
  width: 100%;
}

.article-content h2 a,
.article-content h2 a:hover,
.article-content h2 a:visited,
.article-content h2 a:link,
.article-content h2 a:active,
.article-content .text a,
.article-content .text a:hover,
.article-content .text a:link,
.article-content .text a:visited,
.article-content .text a:active
.date a,
.date a:hover,
.date a:link,
.date a:visited,
.date a:active {
    color: #000;
}


@media screen and (max-width: 1024px) {
    .article-section .article-content {
    width: 90vw;
    max-width: 90vw;
  }

  .article-section .article-content h1.title {
    font-size: 200%;
  }

  .article-section .article-content h2.sub-title {
    font-size: 170%;
    line-height: 1.2;
  }

  .more-article-section .articles-grid {
    grid-template-columns: 1fr;
    grid-row-gap: 35px;
  }

  .article-section .article-content {
    margin-bottom: 50px;
  }

    
}