@charset "UTF-8";
@media screen and (min-width: 768px), print {
  .main {
    width: 800px;
  }

  /* カテゴリーカラー
  -------------------------------------*/
  .main .system-category.icon01 {
    background-color: #283b29;
  }

  .main .system-category.icon02 {
    background-color: #81501c;
  }

  .main .system-category.icon03 {
    background-color: #0f184f;
  }

  .main .system-category.icon04 {
    background-color: #651010;
  }

  .main .system-category.icon05 {
    background-color: #0a4544;
  }

  .main .system-category {
    font-size: 14px;
    text-align: center;
    color: #ffffff;
  }

  /* PC用 共通して使える -------------------------------------*/
  .main .seo_bread_list {
    width: 800px;
    margin-top: 0px;
  }

  .blog-Box {
    width: 1100px;
    margin-left: auto;
    margin-right: auto;
  }

  #blog .ttl {
    margin-bottom: 16px;
  }
  #blog .Box {
    background: url(../images/blog/bg01.jpg) repeat top;
    padding: 30px 20px 1px;
  }
  #blog .Box .system-list li {
    width: 240px;
    background-color: #fff;
    padding: 10px 13px 20px;
    margin: 0 20px 20px 0;
  }
	
	#blog .Box .system-list li .rel-Box{margin-bottom: 10px;}	
	
  #blog .Box .system-list li:nth-child(3n) {
    margin-right: 0px;
  }
  #blog .Box .system-list li .system-pic {
    width: 214px;
    height: 170px;
	  margin-bottom: 10px;
  }
  #blog .Box .system-list li .system-pic img {
    width: 214px;
    height: 170px;
  }
  #blog .Box .system-list li .category {
    margin-bottom: 10px;
  }
  #blog .Box .system-list li .date {
    font-size: 15px;
    line-height: 1.5;
    color: #ad3434;
  }
  #blog .Box .system-list li .date::before {
    content: "■";
    margin-right: .3em;
  }
  #blog .Box .system-list li .system-ttl {
    font-size: 15px;
    line-height: 1.65;
    letter-spacing: 0.05em;
    margin-bottom: 30px;
    color: #010000;
  }
  #blog .Box .system-list li .btn {
    background: url(../images/blog/btn-icon.png) no-repeat center right 8px, url(../images/common/contents-pager-stripe01.png) repeat top;
    line-height: 1.5;
    padding: 5px 0 12px;
    position: relative;
  }

  	/* サイド
  -------------------------------------*/
  .side {
    width: 260px;
  }

  /* blog-dl(詳細)
-------------------------------------*/
  .contents-pager {
    width: 800px;
  }

  #blog-dl .Box {
    width: 800px;
    margin-left: auto;
    margin-right: auto;
    padding: 25px 20px;
    background: url(../images/blog/bg01.jpg) repeat top;
  }
  #blog-dl .Box .color-Box {
    background-color: #fff;
    padding: 40px 20px 20px;
  }
  #blog-dl .Box .system-date {
    font-size: 18px;
    line-height: 1.5;
    color: #ad3434;
    margin-bottom: 15px;
  }
  #blog-dl .Box .system-date::before {
    content: "■";
    margin-right: .3em;
  }
  #blog-dl .Box .ttl-02 {
    font-size: 22px;
    font-weight: bold;
    line-height: 1.5;
    letter-spacing: 0.05em;
    color: #1a1a1a;
    padding-bottom: 15px;
    border-bottom: 1px dashed #a0a0a0;
    margin-bottom: 30px;
  }
  #blog-dl .Box .sis-pic {
    margin-bottom: 30px;
  }
  #blog-dl .Box .sis-pic img{
    max-width: 100%;
    max-height: 700px!important;
  }

  #blog-dl .system-category {
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    display: inline-block;
    margin-bottom: 12px;
  }
  #blog-dl .system-category a {
    display: block;
    padding-left: 1.5em;
    padding-right: 1.5em;
    color: #fff;
  }
}
@media screen and (max-width: 767px) {
  .main {
    margin-bottom: 8%;
  }

  /* カテゴリーカラー
-------------------------------------*/
  .main .system-category.icon01 {
    background-color: #283b29;
  }

  .main .system-category.icon02 {
    background-color: #81501c;
  }

  .main .system-category.icon03 {
    background-color: #0f184f;
  }

  .main .system-category.icon04 {
    background-color: #651010;
  }

  .main .system-category.icon05 {
    background-color: #0a4544;
  }

  .main .system-category {
    font-size: 1.4rem;
    text-align: center;
    color: #ffffff;
  }

  /* PC用 共通して使える -------------------------------------*/
  #blog .ttl {
    margin-bottom: 4%;
    padding: 0 5%;
  }
  #blog .Box {
    background: url(../images/blog/bg01.jpg) repeat top;
    padding: 6% 3% 1%;
  }
  #blog .Box .system-list li {
    width: 48%;
    background-color: #fff;
    padding: 3%;
    margin: 0 4% 4% 0;
  }
  #blog .Box .system-list li:nth-child(2n) {
    margin-right: 0px;
  }
  #blog .Box .system-list li .system-pic {
    height: 109px;
  }
  #blog .Box .system-list li .system-pic img {
    height: 109px;
  }
  #blog .Box .system-list li .category {
    margin-bottom: 3%;
  }
  #blog .Box .system-list li .date {
    font-size: 1.4rem;
    line-height: 1.5;
    color: #ad3434;
  }
  #blog .Box .system-list li .date::before {
    content: "■";
    margin-right: .3em;
  }
  #blog .Box .system-list li .system-ttl {
    font-size: 1.5rem;
    line-height: 1.5;
    letter-spacing: 0.05em;
    margin-bottom: 8%;
    color: #010000;
    margin-bottom: 15%;
  }
  #blog .Box .system-list li .btn {
    background: url(../images/blog/btn-icon.png) no-repeat center right 8px, url(../images/common/contents-pager-stripe01.png) repeat top;
    line-height: 1.5;
    padding: 1% 2% 5%;
    position: relative;
    margin: 0 8%;
  }
  #blog .Box .system-list li .btn img {
    width: 53%;
  }

  	/* サイド
  -------------------------------------*/
  /* blog-dl(詳細)
-------------------------------------*/
  #blog-dl .Box {
    padding: 4% 3%;
    background: url(../images/blog/bg01.jpg) repeat top;
  }
  #blog-dl .Box .color-Box {
    background-color: #fff;
    padding: 6% 3%;
  }
  #blog-dl .Box .system-date {
    font-size: 1.6rem;
    line-height: 1.5;
    color: #ad3434;
    margin-bottom: 4%;
  }
  #blog-dl .Box .system-date::before {
    content: "■";
    margin-right: .3em;
  }
  #blog-dl .Box .ttl-02 {
    font-size: 2rem;
    font-weight: bold;
    line-height: 1.5;
    letter-spacing: 0.05em;
    color: #1a1a1a;
    padding-bottom: 3%;
    border-bottom: 1px dashed #a0a0a0;
    margin-bottom: 6%;
  }
  #blog-dl .Box .sis-pic {
    margin-bottom: 6%;
  }
  #blog-dl .system-category {
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    display: inline-block;
    margin-bottom: 12px;
  }
  #blog-dl .system-category a {
    display: block;
    padding-left: 1.5em;
    padding-right: 1.5em;
    color: #fff;
  }
}
@media screen and (max-width: 380px) {
  #blog .Box .system-list li .system-pic {
    height: 100px;
  }
  #blog .Box .system-list li .system-pic img {
    height: 100px;
  }
}
@media screen and (max-width: 321px) {
  #blog .Box .system-list li .system-pic {
    height: 84px;
  }
  #blog .Box .system-list li .system-pic img {
    height: 84px;
  }
}