@charset "UTF-8";
/**
 * レスポンシブのブレイクポイント設定
 */
/*
COLORS
================================================ */
:root {
  --blue: #1B6EB1;
  --orange: #ED794D;
  --yellow: #FFDC5A;
  --light-green: #E4E8E5;
  --light-grey: #F7F7F7;
  --grey: #ddd;
  --black: #333;
  --white: #fff;
  --gradation-orange: linear-gradient(180deg, #EA8863, #CC5223);
  --gradation-orange_hover: linear-gradient(180deg, #ea7b52, #cd4510);
  --gradation-blue: linear-gradient(180deg, #1C96CE, #1F67AF);
  --gradation-blue_hover: linear-gradient(180deg, #0b8fcc, #0154a7);
}

/*
NEWS
================================================ */
@media (769px <= width) {
  #article {
    padding: 60px 0 70px;
  }
}
@media (width < 769px) {
  #article {
    padding: 10vw 4vw;
  }
}
#article .inner {
  margin-inline: auto;
  max-width: 900px;
}
@media (769px <= width) {
  #article .inner {
    padding: 26px 50px;
    gap: 0 60px;
  }
}
@media (width < 769px) {
  #article .inner {
    flex-direction: column;
    gap: 2.667vw;
  }
}
#article .article-table {
  width: 100%;
}
@media (769px <= width) {
  #article .article-table {
    font-size: 1.6rem;
  }
}
@media (width < 769px) {
  #article .article-table {
    font-size: 3.733vw;
  }
}
@media (769px <= width) {
  #article .article-table li:not(:last-of-type) {
    border-bottom: 1px solid var(--grey);
  }
}
@media (width < 769px) {
  #article .article-table li:not(:last-of-type) {
    border-bottom: 0.267vw solid var(--grey);
  }
}
#article .article-table li a {
  position: relative;
  display: flex;
}
#article .article-table li a::after {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  content: "";
  display: block;
  background-image: url(../img/common/icon_arrow_black.svg);
}
@media (769px <= width) {
  #article .article-table li a::after {
    right: 20px;
    width: 20px;
    height: 20px;
    background-size: 20px 20px;
  }
}
@media (width < 769px) {
  #article .article-table li a::after {
    right: 0;
    width: 4.8vw;
    height: 4.8vw;
    background-size: 4.8vw 4.8vw;
  }
}
#article .article-date {
  font-weight: 600;
}
@media (769px <= width) {
  #article .article-date {
    padding: 20px 20px 20px 14px;
  }
}
@media (width < 769px) {
  #article .article-date {
    padding: 2.667vw 0;
    font-size: 3.2vw;
  }
}
@media (769px <= width) {
  #article .article-content {
    padding: 20px 50px 20px 20px;
  }
}
@media (width < 769px) {
  #article .article-content {
    padding: 2.667vw 8vw 2.667vw 2.667vw;
  }
}

.l-mainContent__inner .postTitle__ttl {
  border-bottom: 1px solid #333;
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1.4;
  padding-bottom: 0.8em;
}
@media (width < 769px) {
  .l-mainContent__inner .postTitle__ttl {
    font-size: 5vw;
  }
}
.l-mainContent__inner .postTimes {
  color: var(--blue);
  text-align: right;
  margin-top: 0.8em;
}
@media (width < 769px) {
  .l-mainContent__inner .postTimes {
    font-size: 3.4vw;
  }
}
.l-mainContent__inner .post_content {
  margin: 60px 0;
  line-height: 1.6;
}
@media (width < 769px) {
  .l-mainContent__inner .post_content {
    margin: 10vw 0;
    font-size: 3.6vw;
  }
}
.l-mainContent__inner .post_content h3 {
  background-color: #eee;
  font-size: 1.4em;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 5px;
  margin-bottom: 0.6em;
}
.l-mainContent__inner .post_content h4 {
  border-left: 5px solid var(--blue);
  font-size: 1.3em;
  font-weight: 600;
  padding-left: 10px;
  margin-bottom: 0.4em;
}
.l-mainContent__inner .post_content h5 {
  font-size: 1.2em;
  font-weight: 600;
  margin-bottom: 0.3em;
}
.l-mainContent__inner .post_content table {
  border-top: 1px solid var(--grey);
  border-left: 1px solid var(--grey);
}
.l-mainContent__inner .post_content th, .l-mainContent__inner .post_content td {
  border-bottom: 1px solid var(--grey);
  border-right: 1px solid var(--grey);
  padding: 0.4em 0.6em;
}
.l-mainContent__inner .post_content th {
  background-color: var(--light-grey);
}

.link-back {
  text-align: center;
}
.link-back a {
  color: var(--blue);
}
@media (width < 769px) {
  .link-back a {
    font-size: 3.6vw;
  }
}
.link-back a:hover {
  text-decoration: underline;
}

#article.blog-index .inner {
  margin-inline: auto;
  max-width: 1100px !important;
  padding: 0 10px;
}
#article.blog-index .lead-text {
  font-size: 2rem;
  font-weight: 600;
  text-align: center;
}
@media (width < 769px) {
  #article.blog-index .lead-text {
    font-size: 4.5vw;
  }
}

.l-category-filter {
  display: flex;
  margin: 60px 0 40px;
}
@media (769px <= width < 1070px) {
  .l-category-filter {
    flex-direction: column;
  }
}
@media (width < 769px) {
  .l-category-filter {
    flex-direction: column;
    margin: 5vw 0 8vw;
  }
}
.l-category-filter .category-heading {
  font-weight: 600;
}
@media (769px <= width) {
  .l-category-filter .category-heading {
    margin-right: 20px;
  }
}
@media (769px <= width < 1070px) {
  .l-category-filter .category-heading {
    margin-bottom: 1vw;
  }
}
@media (width < 769px) {
  .l-category-filter .category-heading {
    margin-bottom: 1.5vw;
    font-size: 3.6vw;
  }
}

.category-filter {
  display: flex;
  justify-content: center;
  gap: 10px;
}
@media (769px <= width < 1070px) {
  .category-filter {
    gap: 1vw;
  }
}
@media (width < 769px) {
  .category-filter {
    flex-wrap: wrap;
    gap: 2vw;
  }
}
.category-filter li {
  border: 2px solid var(--blue);
  color: var(--blue);
  text-align: center;
  font-weight: 600;
  padding: 5px;
  border-radius: 5px;
}
@media (769px <= width) {
  .category-filter li {
    width: 125px;
  }
}
@media (769px <= width < 1070px) {
  .category-filter li {
    width: 15vw;
    font-size: 1.8vw;
  }
}
@media (width < 769px) {
  .category-filter li {
    width: 27.5vw;
    font-size: 3.5vw;
  }
}
.category-filter li:hover {
  cursor: pointer;
  opacity: 0.8;
}
.category-filter li.active {
  background: var(--gradation-blue);
  color: var(--white);
  border: none;
}

.blog-index-list {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 70px;
}
@media (769px <= width) {
  .blog-index-list {
    gap: 30px 20px;
  }
}
@media (769px <= width < 1070px) {
  .blog-index-list {
    padding: 0 4vw;
    gap: 4vw;
  }
}
@media (width < 769px) {
  .blog-index-list {
    margin-bottom: 5vw;
  }
}
.blog-index-list li {
  width: calc((100% - 40px) / 3);
  border: 1px solid var(--grey);
  border-radius: 10px;
}
@media (769px <= width < 1070px) {
  .blog-index-list li {
    width: 42.5vw;
  }
}
@media (width < 769px) {
  .blog-index-list li {
    width: 100%;
    margin-bottom: 5vw;
  }
}
.blog-index-list li img {
  border-radius: 9px 9px 0 0;
}
.blog-index-list li .article-title {
  padding: 20px;
}
.blog-index-list li a:hover {
  opacity: 0.8;
}