@charset "utf-8";



/*---------------------------------------------------
 カテゴリー
---------------------------------------------------*/
#CategoryBannerBox {
  display: flex;
  align-items: center;
  padding: 10px 20px;
  background: #F4F4F8;
}

#CategoryBannerBox>img {
  width: 15%;
  margin: 15px;
}

.CategoryTitle {
  margin: 0 0 0 30px;
  font-size: 40px;
  font-weight: 700;
  color: #338DC3;
}


.CategoryMainTitle {
  display: flex;
  align-items: center;
  margin: 20px 0 0;
  padding: 0 0 15px 0;
  font-size: 16px;
  font-weight: 500;
  color: #333;
  border-bottom: #CCCCCC dashed 1px;
}

.CategoryMainTitle:before {
  padding: 0 2px 0 0;
  font-family: 'Material Icons';
  content: '\e1c4';
  font-size: 16px;
  font-weight: bold;
  line-height: 1.5;
  color: #787AB0;
  vertical-align: middle;
}

.CategoryMainTitle:hover {
  color: #787AB0;
}




/*---------------------------------------------------------
  大型モニターのレイアウトの指定：1501px〜
---------------------------------------------------------*/
@media screen and (min-width:1501px) {


  /*---------- テーブル：1501px〜  ----------*/



} /* 〜1501px END */







/*---------------------------------------------------------
  タブレットのレイアウトの指定：960px 〜 1280px
---------------------------------------------------------*/
@media screen and (min-width:960px) and ( max-width:1280px) {



  /*---------- レイアウト　： 〜1280px  ----------*/
  #content { width: 850px; }




} /* 〜1280px END */




/*---------------------------------------------------------
  タブレットのレイアウトの指定：601px 〜 959px
---------------------------------------------------------*/
@media screen and (min-width:601px) and ( max-width:959px) {


  /*---------- レイアウト　：〜959px  ----------*/
  #content { width: 550px; }
  .postcard_item {width: 47%; margin: 20px 0;}


  /*---------- 記事　：　〜959px  ----------*/
  .postcard_title {font-size: 20px; }
  .postcard_text {font-size: 15px;}





} /* 〜959px END */




/*---------------------------------------------------------
  スマートフォン用の指定：351px 〜 600px
---------------------------------------------------------*/
@media screen and (min-width:351px) and ( max-width:600px) {


  /*---------- レイアウト ：〜600px  ----------*/
  #content { width: 340px; }


  /*---------- ヘッダータイトル ：〜600px  ----------*/
  #CategoryBannerBox>img { width: 25%; margin: 5px 10px; }
  .CategoryTitle { font-size: 25px; }

  /*---------- カテゴリーテキスト ：〜600px  ----------*/
  .CategoryMainTitle { font-size: 14px;}

  
  
  
  
} /* 〜600px END */





/*---------------------------------------------------------
  iPhone SE用：320px 〜 370px
---------------------------------------------------------*/
@media screen and (min-width:320px) and ( max-width:350px) {



/*---------- テーブル：〜350px  ----------*/



} /* 〜350px END */