@charset "UTF-8";
/*
flocssで記述しています
既存CSSについては命名規則を破っています
*/

/****************************

foundation(ほとんど他CSSで設定済)

****************************/
h1, h2, h3, h4, h5, h6{
  font-weight:500;
}
body{
  font-family:-apple-system, BlinkMacSystemFont, "Helvetica Neue", "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
}

/****************************

layout(全て他CSSで設定済)

****************************/

/****************************

object(component)

****************************/
/*カラムデザイン*/
.c_col_1{width:8.333%;}
.c_col_2{width:16.667%;}
.c_col_3{width:25%;}
.c_col_4{width:33.333%;}
.c_col_5{width:41.666%;}
.c_col_6{width:50%;}
.c_col_7{width:58.333%;}
.c_col_8{width:66.666%;}
.c_col_9{width:75%;}
.c_col_10{width:83.33%;}
.c_col_11{width:91.666%;}
.c_col_12{width:100%;}

/*カラムデザイン(レスポンシブタブレット用 768px以下)*/
@media screen and (max-width:768px){
.c_res_md_col_1{width:8.333%;}
.c_res_md_col_2{width:16.667%;}
.c_res_md_col_3{width:25%;}
.c_res_md_col_4{width:33.333%;}
.c_res_md_col_5{width:41.666%;}
.c_res_md_col_6{width:50%;}
.c_res_md_col_7{width:58.333%;}
.c_res_md_col_8{width:66.666%;}
.c_res_md_col_9{width:75%;}
.c_res_md_col_10{width:83.33%;}
.c_res_md_col_11{width:91.666%;}
.c_res_md_col_12{width:100%;}
}

/*カラムデザイン(レスポンシブスマホ用 599px以下)*/
@media screen and (max-width:599px){
.c_res_sm_col_1{width:8.333%;}
.c_res_sm_col_2{width:16.667%;}
.c_res_sm_col_3{width:25%;}
.c_res_sm_col_4{width:33.333%;}
.c_res_sm_col_5{width:41.666%;}
.c_res_sm_col_6{width:50%;}
.c_res_sm_col_7{width:58.333%;}
.c_res_sm_col_8{width:66.666%;}
.c_res_sm_col_9{width:75%;}
.c_res_sm_col_10{width:83.33%;}
.c_res_sm_col_11{width:91.666%;}
.c_res_sm_col_12{width:100%;}
}

/*グリッドデザイン*/
.c_grid{
  display:flex;
  flex-wrap:wrap;
  align-items:stretch;
}
.c_grid__item{
  display:flex;
}
.c_grid__inner{
  display:block;
  width:100%;
}

.c_grid--hasGutter{
  margin:-.8rem;
}

.c_grid--hasGutter > .c_grid__item{
  padding:.8rem;
}

/*メディアデザイン*/
.c_media{}
.c_media::before{
  content:"";
  display:block;
  clear:both;
}
.c_media__img{
  float:left;
  margin:0 1.6rem 1.6rem 0;
}
.c_media__img--rev{
  float:right;
  margin:0 0 1.6rem 1.6rem;
}
.c_media__body{}
.c_media__body--noFlap{overflow:hidden;}

/*リンク*/
.c_link{
  color:inherit;
}
.c_link--normal{}
.c_link--normal:hover{
  text-decoration:underline;
}
.c_link--current{
  /*text-decoration:line-through;*/
  color: #ccc;
}
.c_link--strong{
  letter-spacing:1px;
  font-size:1.8rem;
  font-weight:800;
  transition:.2 opacity;
}
.c_link--strong:hover{
  opacity:.7;
}
.c_link--hasArrow{
  position:relative;
  padding-left:calc(1em + 16px);
}
.c_link--hasArrow::before{
  content:"▲";
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%) rotate(90deg);
}


/*見出し*/
.c_heading{
  letter-spacing:1px;
}
.c_heading__ttl{
  font-size:1.6rem;
  line-height:1.6;
  letter-spacing:1px;
}
.c_heading__img{}
.c_heading__sub{
  font-size:1.6rem;
  display:inline-block;
  line-height:1;
}
.c_heading__sub + .c_heading__ttl{
  margin-top:1.6rem;
} 
.c_heading__sub--ribon{
  position:relative;
  padding:.8rem 1.6rem;
  border:2px solid #fff;
  border-radius:0 8px 8px 0;
  background:#8a5f2c;
  color:#fff;
}
.c_heading__sub--ribon::after{
  content:"";
  position:absolute;
  top:24%;
  right:-3.8rem;
  z-index:-2;
  display:block;
  padding:calc(.5em + .8rem) 2.4rem;
  border:2px solid #fff;
  border-radius:6px;
  background:#8a5f2c;
}
.c_heading__sub--ribon::before{
  content:"";
  position:absolute;
  top:24%;
  right:calc(-3.8rem - (.5em + .8rem) / 1.414);
  z-index:-1;
  display:block;
  padding:calc((.5em + .8rem) / 1.414);
  border:2px solid #fff;
  border-radius:4px;
  background:#fff;
  transform:rotate(45deg);
  transform-origin:calc((.5em + .8rem) / 2);
}

.c_heading__sub--ribon + .c_heading__ttl{
  margin-top:2.4rem;
} 

.c_heading__img > img{
  vertical-align:top;
}
.c_heading--primary{
  margin-bottom:4rem;
}
.c_heading--secondary{
  margin-bottom:5.6rem;
}
.c_heading--secondary .c_heading__ttl{
  font-size:3.2rem;
  line-height:1.4;
  letter-spacing:3px;
}
.c_heading--tertiary{
  margin-bottom:2.4rem;
}
.c_heading--colorSub{
  color:#5e7eb6;
}
@media screen and (max-width:599px){
  .c_heading--primary{
    margin-bottom:2.4rem;
  }
  .c_heading--secondary{
    margin-bottom:2.4rem;
  }
  .c_heading__sub{
    font-size:1.2rem;
  }
  .c_heading--secondary .c_heading__ttl{
    font-size:2.4rem;;
  }
}
/*ボタンコンポーネント*/
.c_btn{}
.c_btn__target{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 2.5em;
  border-radius: 2px;
  color: inherit;
  letter-spacing: .1em;
}
.c_btn__target:hover{
  opacity: .7;
}
.c_btn--lineup{}
.c_btn--lineup > .c_btn__target{
  background: #5e7eb6;
  color: #fff;
}
 

/*段落系(非コーダーが扱うため、要素指定)*/
.c_txtContainer h3{
  margin-bottom:2.4rem;
  font-size:2rem;
  font-weight:800;
  color:#5e7eb6;
  line-height:1.4;
  letter-spacing:1px;
}

.c_txtContainer__section + .c_txtContainer__section,
.c_txtContainer section + section{
  margin-top:5.3rem;
}

/*.c_txtContainer section:first-of-type{
  overflow:hidden;
}*/

.c_txtContainer p{
  line-height:1.6;
  letter-spacing:1px;
}
.c_txtContainer p + p{
  margin-top:1.6rem;
}
.c_txtContainer li + li{
  margin-top:2.4rem;
}

/****************************

object(project)

****************************/
/*記事モジュール*/
.p_article{}
.p_article__item + .p_article__item{
  margin-top:5.6rem;
}
.p_article__date{
  position:relative;
  width:150px;
  height:150px;
  background:url(/resource/img/contents/3minute_heading_month.jpg) no-repeat;
}
.p_article__month{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}
.p_article__monthEng{
  display:block;
  font-size:1.4rem;
  font-weight:800;
  line-height:1;
  letter-spacing:2px;
  text-align:center;
}
.p_article__monthNum{
  display:block;
  color:#5e7eb6;
  text-align:center;
  font:8rem / 1 'Share Tech Mono', YuGothic , '游ゴシック' , 'Hiragino Kaku Gothic ProN' , 'ヒラギノ角ゴ ProN' , Meiryo , 'メイリオ' , sans-serif;
}
.p_article__monthEng + .p_article__monthNum{
  margin-top:1rem;
}

@media screen and (max-width:599px){
  .p_article__date{
    float:none;
    width:auto;
    height:auto;
    margin:0 0 .8rem 0;
    background:none;
  }
  .p_article__month{
    position:static;
    transform:none;
  }
  .p_article__monthEng{
    text-align:right;
    font-size:1.6rem;
  }
}

/*ダウンロードモジュール*/
.p_download{}
.p_download__body{
  padding:3.2rem 6.4rem;
}
.p_download__btn > a{
  display:flex;
  justify-content:center;
  align-items:center;
  padding:0 1.6rem;
  line-height:1;
  letter-spacing:2px;
  font-size:1.6rem;
  transition:.2s opacity;
}
.p_download__btn > a:hover{
  opacity:.7;
}
.p_download__btn > a::after{
  content:"";
  display:block;
  padding:calc(.5em + 1.6rem) 0;
}
.p_download__btn > a > span{
  letter-spacing:inherit;
  font-size:inherit;
}

.p_download--hasRowBorder{
  background:linear-gradient(180deg, #ccc 0%,#ccc 10%,#fff 10%,#fff 100%) repeat left top / 100% 8px;
}
.p_download__btn--normal > a{ 
  position:relative;
  border-radius:2px;
  background:#5e7eb6;
  color:#fff;
  box-shadow: inset 0 3px 0 rgba(255,255,255,0.2), inset 0 -3px 0 rgba(0, 0, 0, 0.1);
}
.p_download__btn--normal > a::before{
  position:absolute;
  right:0;
  top:50%;
  content:"";
  display:block;
  padding:calc((.5em + 1.6rem) / 1.414);
  background:#5e7eb6;
  box-shadow: inset 0 3px 0 rgba(255,255,255,0.2), inset -3px 0 0 rgba(0, 0, 0, 0.1);
  transform:translate(50%,-50%) rotate(45deg);
}

@media screen and (max-width:768px){
  .p_download__body{
    padding:3.2rem;
  }
}
@media screen and (max-width:599px){
  .p_download__body{
    padding:3.2rem 2.4rem;
  }
  .p_download__btn > a{
    font-size:1.2rem;
    letter-spacing:1px;
  }
}
/*バックナンバーモジュール*/
.p_backnumber{}
.p_backnumber__item{
  display:flex;
  margin-left:-.8rem;
  margin-right:-.8rem;
}
.p_backnumber__item + .p_backnumber__item{
  margin-top:3.2rem;
}
.p_backnumber__year{
  flex:0 0 auto;
  padding:0 .8rem;
  font-weight:bold;
}
.p_backnumber__month{
  flex:0 1 400px;
  padding:0 .8rem;
  text-align:right;
  font-weight:bold;
}
@media screen and (max-width:599px){
  .p_backnumber__item{
    display:block;
  }
  .p_backnumber__year{
    margin-bottom:1.6rem;
  }
}

/****************************

object(utility)

****************************/
@media screen and (max-width:768px){
  .u_resMdHide{
    display:none;
  }
}
@media screen and (max-width:599px){
  .u_resSmHide{
    display:none;
  }
}