@charset "UTF-8";

/* ! CSSの構成 記事 ================================================== 

記事リスト
詳細コンテンツ
  
-------------------------------------------------- */


/* ! 記事リスト ================================================== */
.list_articles > li {
  display: -webkit-flex; display: flex;
}
.list_articles article {
  background: #fff;
  padding: 24px;
  display: -webkit-flex; display: flex;
  -webkit-flex-wrap: nowrap; flex-wrap: nowrap;
  -webkit-flex: 1 1 auto; flex: 1 1 auto;
  -webkit-align-items: flex-start; align-items: flex-start;
}
.list_articles article .img {
  width: 200px;
  margin: 0 16px 0 0;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  -webkit-flex: 0 0 200px; flex: 0 0 200px;
}
.list_articles article .img:before {
  content: "";
  display: block;
  width: 100%;
  padding-top: 56.25%;
}
.list_articles article .text {
  -webkit-flex: 1 1 auto; flex: 1 1 auto;
}
.list_articles article .h4 {
  margin: 0 0 12px;
}
.list_articles article .text p {
  font: 300 13px/1.4em 'noto sans japanese';
}
@media screen and (max-width: 560px){
  .list_articles article {
    -webkit-flex-wrap: wrap; flex-wrap: wrap;
  }
  .list_articles article .img {
    margin: 0 auto 20px;
    -webkit-flex: 1 1 auto; flex: 1 1 auto;
    width: 100%;
  }
  .list_articles article .text {
    width: 100%;
  }
}


/* ! 詳細コンテンツ ================================================== */
.article_detail img {
  display: block;
  margin: 40px auto;
  max-width: 100%;
}
@media screen and (max-width: 480px){
  .article_detail img {
    margin: 20px auto;
  }
}


.article_detail .aside {
  border-left: 1px solid #ccc;
}


/* テキスト */
.article_detail .main h2 {
  margin: 0 0 20px;
}
.article_detail .main h3 {
  margin: 60px 0 15px;
}
.article_detail .main h4 {
  margin: 40px 0 15px;
}
.article_detail .main p + p {
  margin: 15px 0 0;
}
@media screen and (max-width: 600px){
  .article_detail .main h2 {
    font-size: 18px;
    margin: 0 0 12px;
  }
}



/* ! 関連する記事 ================================================== */
.aside_wrap h3.h3 {
  padding: 0 0 20px;
  margin: 0 0 20px;
  border-bottom: 1px solid #ccc;
}
.list_related > li {
}
.list_related article{
  display: -webkit-flex; display: flex;
  -webkit-flex-wrap: nowrap; flex-wrap: nowrap;
  -webkit-align-items: flex-start; align-items: flex-start;
}
.list_related .img {
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  -webkit-flex: 0 0 120px; flex: 0 0 120px;
}
.list_related .img:before {
  content: "";
  width: 100%;
  padding-top: 75%;
  display: block;
}
.list_related .text {
  -webkit-flex: 1 1 auto; flex: 1 1 auto;
  padding: 12px;
}
.list_related .text p {
  font: 600 14px/1.4em 'noto sans japanese';
}