@charset "utf-8";

/**********
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--hasGutterMd{
  margin: -8px;
}
.l_grid--hasGutterMd > .l_grid__item{
  padding: 8px;
}

/* 節 */
.l_section{}
.l_section__item{}
.l_section--primary > .l_section__item + .l_section__item{
  margin-top: 40px;
}
/**********
module
**********/
/* 見出し */
.m_heading{}
.m_heading__ttl{
  font-weight: bold;
  line-height: 1;
}
.m_heading__img{
  line-height: 0;
}
.m_heading__img > img{
  max-width: 100%;
  height: auto;
}
.m_heading--primary{
  position: relative;
  margin-bottom: 24px;
}
.m_heading--primary .m_heading__img + .m_heading__ttl{
  margin-top: 8px;
}
.m_heading--primary .m_heading__ttl{
  width: 100%;
  padding: 12px 16px;
  background: linear-gradient(to right, #c6a86c 0, #fbe79a 50%, #bd9a54 100%);
  font-size: 20px;
}
.m_heading--primary .m_heading__img + .m_heading__sub{
  margin-top: 16px;
}
.m_heading--primary .m_heading__sub + .m_heading__ttl{
  margin-top: 16px;
}
.m_heading--primary .m_heading__sub{
  padding: 0 24px;
}
.m_heading--secondary{
  margin-bottom: 16px;
  padding: 8px 16px;
  border-left: 16px solid;
  border-bottom: 4px solid;
  color: #980416;
}
.m_heading--secondary .m_heading__ttl{
  font-size: 20px;
}
@media screen and (max-width: 768px){
  .m_heading--primary .m_heading__ttl{
    font-size: 16px;
  }
}
@media screen and (max-width: 599px){
  .m_heading--primary .m_heading__ttl{
    line-height: 1.4;
    font-size: 14px;
  }
  .m_heading--primary .m_heading__sub{
    padding: 0;
  }
}

/* カード */
.m_card{
  position: relative;
  display: block;
  padding: 16px;
  border: 1px solid #cacaca;
  box-shadow: 4px 4px 8px #777;
  color: inherit;
  transition: .3s opacity;
}
.m_card:hover{
  opacity: .7;
}
.m_card__thumbnail{
  position: relative;
  padding-top: calc(100% * 200 / 500);
  background: #f3f3f3;
}
.m_card__thumbnail > img{
  position: absolute;
  top: 0;
  left: 50%;
  width: auto;
  height: 100%;
  transform: translateX(-50%);
}
.m_card__thumbnail + .m_card__sub{
  margin-top: 16px;
}
.m_card__sub + .m_card__ttl{
  margin-top: 8px;
}
.m_card__sub{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.m_card__type{
  padding: 4px;
  line-height: 1;
  font-size: 12px;
}
.m_card__type--motion{
  background: #20D392;
  color: #fff;
}
.m_card__type--trainer{
  background: #d66363;
  color: #fff;
}
.m_card__type--slide{
  background: #d66363;
  color: #fff;
}
.m_card__type--case{
  background: #d66363;
  color: #fff;
}
.m_card__type--animation{
  background: #ba60a3;
  color: #fff;
}
.m_card__type--pc{
  background: #5c6fad;
  color: #fff;
}
.m_card__time{
  line-height: 1;
  font-size: 10px;
}
.m_card__time::before{
  content: url("/resource/img/studio/lineup/e-learning_time.png");
  margin-right: 2px;
  line-height: 0;
  vertical-align: -3px;
}
.m_card__ttl{
  padding-bottom: 32px;
  font-weight: bold;
}
.m_card__tabs{
  position: absolute;
  bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin: -2px;
}
.m_card__tabsItem{
  padding: 2px;
}
.m_card__tab{
  padding: 4px 8px;
  border: 1px solid;
  border-radius: 40px;
  line-height: 1;
  letter-spacing: 0;
  font-size: 11px;
}

/**********
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%;}
}