/* ==========

oocss、smacssでコーディング

========== */

/* ==========
  oocss、smacssでコーディング
========== */

/* ======
base 
====== */
.main{
  color:#333;
  font:400 16px "Helvetica Neue", "Noto Sans JP", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Arial, メイリオ, Meiryo, sans-serif;
  line-height:1.6;
  letter-spacing:.1em;
}

/* ======
layout 
====== */
/* グリッドレイアウト */
.l_grid{
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: wrap;
}
.l_grid__item{
  display: flex;
}
.l_grid__inner{
  display: block;
  width: 100%:
}
.l_grid--hasGutter{
  margin: -20px;
}
.l_grid--hasGutter > .l_grid__item{
  padding: 20px;
}

/* 節 */
.l_section{}
.l_section__item{}
.l_section--primary > .l_section__item + .l_section__item{
  margin-top: 64px;
}
/* ======
module
====== */
/* 見出し */
.m_heading{}
.m_heading__ttl{
  line-height: 1;
  font-weight: bold;
}
.m_heading__img{
  line-height: 0;
}
.m_heading__img > img{
  max-width: 100%;
  height: auto;
}
.m_heading--primary{
  margin-bottom: 24px;
}
.m_heading--secondary{
  margin-bottom: 24px;
}
.m_heading--secondary > .m_heading__ttl{
  padding: 8px 0 8px 16px;
  border-left: 6px solid;
  color:  #164a84;
  font-size: 20px;
}

/* ヒーローズエリア */
.m_herosArea{
  padding-bottom: 24px;
  border-bottom: 3px solid;
}
.m_herosArea--colorTheme{
  border-color: #164a84;
}
/* リード文 */
.m_lead{}

/* 背景　*/
.m_background{}
.m_background__img{
  line-height: 0;
}
.m_background__img > img{
  max-width: 100%;
  height: auto;
}
.m_background__note{
  display: flex;
  justify-content: flex-end;
  font-size: 11px;
}
.m_background__ttl{}
.m_background__author{}
.m_background__ttl + .m_background__author{
  padding-left: 12px;
}
.m_background__img + .m_background__note{
  margin-top: 8px;
}
.m_background__list{
  display: flex;
  align-items: stretch;
   justify-content: flex-start;
}
.m_background__img + .m_background__list{
  margin-top: 16px;
}
.m_background__note + .m_background__list{
  margin-top: 8px;
}
.m_background__item{
  display: flex;
}
.m_background__item + .m_background__item {
  margin-left: 24px;
}
.m_background__download{
  position: relative;
  display: block;
  width: 100%;
  padding-left: 20px;
  color: #052674;
  text-decoration: underline;
}
.m_background__download:hover{
  color: #f9b56c;
  text-decoration: underline;
}
.m_background__download::before{
  content: '\f019';
  position: absolute;
  top: 50%;
  left: 0;
  font: 16px / 1 "FontAwesome";
  transform: translateY(-50%);
}
/**********
utility
**********/
/*横幅*/
.u_col1{width:8.333%;}
.u_col2{width:16.667%;}
.u_col3{width:25%;}
.u_col4{width:33.333%;}
.u_col5{width:41.666%;}
.u_col6{width:50%;}
.u_col7{width:58.333%;}
.u_col8{width:66.666%;}
.u_col9{width:75%;}
.u_col10{width:83.33%;}
.u_col11{width:91.666%;}
.u_col12{width:100%;}
@media screen and (max-width:768px){
  .u_resMdCol1{width:8.333%;}
  .u_resMdCol2{width:16.667%;}
  .u_resMdCol3{width:25%;}
  .u_resMdCol4{width:33.333%;}
  .u_resMdCol5{width:41.666%;}
  .u_resMdCol6{width:50%;}
  .u_resMdCol7{width:58.333%;}
  .u_resMdCol8{width:66.666%;}
  .u_resMdCol9{width:75%;}
  .u_resMdCol10{width:83.33%;}
  .u_resMdCol11{width:91.666%;}
  .u_resMdCol12{width:100%;}
}
@media screen and (max-width:599px){
  .u_resSmCol1{width:8.333%;}
  .u_resSmCol2{width:16.667%;}
  .u_resSmCol3{width:25%;}
  .u_resSmCol4{width:33.333%;}
  .u_resSmCol5{width:41.666%;}
  .u_resSmCol6{width:50%;}
  .u_resSmCol7{width:58.333%;}
  .u_resSmCol8{width:66.666%;}
  .u_resSmCol9{width:75%;}
  .u_resSmCol10{width:83.33%;}
  .u_resSmCol11{width:91.666%;}
  .u_resSmCol12{width:100%;}
}
/* 間隙　*/
.u_mb24{
  margin-bottom: 24px;
}
.u_mb64{
  margin-bottom: 64px;
}