/*  ———————————————————————————————————————————————————————————— 汎用クラス  */

@media (min-width: 768px) {
	.sp-only {
		display: none;
	}
}
@media (max-width: 768px) {
	.pc-only {
		display: none;
	}
}

.mt0 {
  margin-top: 0px !important;
}
.mt10 {
  margin-top: 10px !important;
}
.mt20 {
  margin-top: 20px !important;
}
.mt30 {
  margin-top: 30px !important;
}
.mt40 {
  margin-top: 40px !important;
}
.mt60 {
  margin-top: 60px !important;
}
.mt80 {
  margin-top: 80px !important;
}
.mt100 {
  margin-top: 100px !important;
}

.mb0 {
  margin-bottom: 0px !important;
}
.mb10 {
  margin-bottom: 10px !important;
}
.mb20 {
  margin-bottom: 20px !important;
}
.mb30 {
  margin-bottom: 30px !important;
}
.mb40 {
  margin-bottom: 40px !important;
}
.mb60 {
  margin-bottom: 60px !important;
}
.mb80 {
  margin-bottom: 80px !important;
}
.mb100 {
  margin-bottom: 100px !important;
}

.pt0 {
  padding-top: 0px !important;
}
.pt10 {
  padding-top: 10px !important;
}
.pt20 {
  padding-top: 20px !important;
}
.pt30 {
  padding-top: 30px !important;
}
.pt40 {
  padding-top: 40px !important;
}
.pt60 {
  padding-top: 60px !important;
}
.pt80 {
  padding-top: 80px !important;
}
.pt100 {
  padding-top: 100px !important;
}

.pb0 {
  padding-bottom: 0px !important;
}
.pb10 {
  padding-bottom: 10px !important;
}
.pb20 {
  padding-bottom: 20px !important;
}
.pb30 {
  padding-bottom: 30px !important;
}
.pb40 {
  padding-bottom: 40px !important;
}
.pb60 {
  padding-bottom: 60px !important;
}
.pb80 {
  padding-bottom: 80px !important;
}
.pb100 {
  padding-bottom: 100px !important;
}




/*  ———————————————————————————————————————————————————————————— リンクバナー用  */

.banner {
  margin: 0px auto;
}



/*  ———————————————————————————————————————————————————————————— コンテンツ include用  */

.related_articles {
  background-color: #eee;
}

.related_articles .inner {
  padding-bottom: 30px;
  width: 90%;
  margin: 0px auto;
}
@media (min-width: 768px) {
  .related_articles .inner {
    padding-bottom: 10px;
    width: 1000px;
    margin: auto;
  }
}

/* 見出し　ここから */
.heading {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  color: #00465E;
  font-size: 16px;
  padding: 30px 0px;
}
.heading::before,
.heading::after {
  background-color: #00465E;
  content: "";
  height: 1px;
  width: 100px;
}
@media (min-width: 768px) {
  .heading::before,
  .heading::after {
    background-color: #00465E;
    content: "";
    height: 1px;
    width: 450px;
  }
}
.heading::before {
  margin-right: 15px;
}
.heading::after {
  margin-left: 15px;
}
/* 見出し　ここまで */

.related_articles .item_area {
  margin-bottom: 20px;
}
@media (min-width: 768px) {
  .related_articles .item_area {
    overflow: hidden;
  }
  .related_articles .item_area > div {
    margin-right: 18px;
  }
  .related_articles .item_area > div:nth-child(3n) {
    margin-right: 0;
  }
  .related_articles .item_area > div:nth-child(n+4) {
    margin-top: 25px;
  }
}

.related_articles .related_articles_item {
  display: flex;
  flex-direction: column;
  background-color: #fff;
}
@media (min-width: 768px) {
  .related_articles .related_articles_item {
    padding: 1px;
    float: left;
  }
}

.related_articles .related_articles_item:not(:first-child) {
  margin-top: 20px;
}
@media (min-width: 768px) {
  .related_articles .related_articles_item:not(:first-child) {
    margin-top: 0;
  }
}

@media (min-width: 768px) {
  .related_articles .related_articles_item {
    display: block;
    width: calc((100% - 36px) / 3);
  }
}

.related_articles .label {
  margin: 0px 0px 2px 2px;
  padding: 2px 2px 2px 10px;
  border-left: solid 8px #b5ec06;
  font-weight: 600;
  color: #00465E;
  font-size: 14px;
}

.related_articles h3 {
  margin: 3px;
  padding: 5px;
  font-weight: 500;
  color: #00465E;
  font-size: 16px;
}

@media (min-width: 768px) {
  .related_articles h3 {
    padding-left: 10px;
    letter-spacing: -.5px;
    font-size: .94rem;
  }
}

.related_articles h3 + p {
  margin-top: .5em;
}

.related_articles figure {
  margin-top: calc((10 / 750) * 100vw);
  padding: 0 calc((30 / 750) * 100vw);
}

@media (min-width: 768px) {
  .related_articles figure {
    margin-top: 0;
    padding: 0 10px 10px;
  }
}

.related_articles figure a {
  display: block;
}

.related_articles figure img {
  vertical-align: top;
}

.related_articles .detail_btn {
  margin-top: calc((30 / 750) * 100vw);
  padding: 0 calc((30 / 750) * 100vw) calc((30 / 750) * 100vw);
}

@media (min-width: 768px) {
  .related_articles .detail_btn {
    margin-top: 0;
    padding: 0 10px 10px;
  }
}

.related_articles .detail_btn a {
  display: block;
  padding: 5px 0;
  border-radius: 30px;
  border: 1px solid #00465E;
  background-color: #fff;
  letter-spacing: calc((-20 / 1000) * 1em);
  text-decoration: none;
  text-align: center;
  font-weight: 600;
  color: #00465E;
  font-size: 13px;
}

@media (min-width: 768px) {
  .related_articles .detail_btn a {
  }
  .related_articles .detail_btn a:hover {
      opacity: .7;
  }
}