@charset "UTF-8";
@media screen and (min-width: 768px),print {
.cc-ttl-01 {}
/*----------------------------------------- h2 画像 ------------------------------------------*/
  .cc-ttl-Box-01 { background:#ccc url(); }
  /* PC用 共通して使える -------------------------------------*/
  .blog-Box { margin-top: 48px; width: 1100px; margin-left: auto; margin-right: auto; }
  .side { width: 240px; float: left; }
  .main { width: 800px; float: right; /* blog-dl(詳細) -------------------------------------*/ }
  .main .seo_bread_list { width: 800px; margin-top: 0px; }
  .main .cc-ttl-02 { width: 800px; }
  .main .system-list { padding-top: 20px; margin-bottom: -20px; width: 800px; margin-left: auto; margin-right: auto; display: -webkit-box;display: -webkit-flex;display: -moz-flex;display: -ms-flex;display: -o-flex;display: flex;-webkit-box-lines: multiple;-moz-box-lines: multiple;-webkit-flex-wrap: wrap;-moz-flex-wrap: wrap;-ms-flex-wrap: wrap;flex-wrap: wrap;}
  .main .system-list a:hover { text-decoration: none; }
  .main .system-list .system-ttl a:hover { text-decoration: underline; }
  .main .system-list li { width: 250px; margin-left: 13px;margin-bottom: 20px; background-color: #fff;padding: 20px 10px; }
  .main .system-list li:nth-child(2n) {  }
  .main .system-list .system-pic { width: 230px; height: 210px; position: relative; margin-bottom: 4px; overflow: hidden; }
  .main .system-list .system-pic img { width: 250px; height: 210px; }
  .main .system-list .system-pic:hover { -ms-filter: "alpha( opacity=80 )"; filter: alpha(opacity=80); opacity: 0.8; }
  .main .system-category { color: #ffffff; font-size: 14px; text-align: center; background-color: #416e78; }
  .main .system-date{ color: #1c4c6e; }
.main .system-date::before{ content:"■"; }

  .main .system-category.icon02 { background-color: #416e78; }
  .main .system-category.icon03 { background-color: #416e78; }
  .main .system-category.icon04 { background-color: #416e78; }
  .main .system-category.icon05 { background-color: #416e78; }
  .main .system-category.icon06 { background-color: #416e78; }
  .main .system-category.icon07 { background-color: #416e78; }

.rel-Box .category-link{
	display: block;
	margin:0px 0px 1px 0px;
}


  .main .system-list .system-ttl { font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック","Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro",  Verdana, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; color: #010000; font-size: 15px; font-weight: 700; line-height: 1.65; margin-bottom: 8px; }
  .main .system-list .detail-Box { padding: .5em .8em; }
  .main .system-list .detail-Box .pic { margin-right: 16px; }
  .main .system-list .detail-Box .name { color: #010000; font-size: 12px; line-height: 1.65; }
  .main .system-list .date-Box .date { padding-left: .8em; color: #010000; font-size: 12px; }
  .main #blog-dl .Box { width: 800px; margin-left: auto; margin-right: auto;}
  .main #blog-dl .Box .ttl { text-align: center; margin-bottom: 16px; }
  .main #blog-dl .Box .color-Box { background-color: #fff; }
  .main #blog-dl .Box .system-customer { display: inline-block; font-family: Meiryo; color: #44a4b8; font-size: 18px; margin-bottom: 3px; }
  .main #blog-dl .Box .system-customer .system-area { display: inline-block; margin-right: 1em; padding-left: 1.3em; text-indent: -1.3em; margin-bottom: 4px; }
  .main #blog-dl .Box .system-customer .system-area:before { content: "■"; margin-right: .3em; }
  .main #blog-dl .Box .system-customer .system-name { display: inline-block; margin-bottom: 4px; }
  .main #blog-dl .Box .ttl-02 { color: #000000; font-size: 20px; font-weight: 700; line-height: 40px; padding-bottom: 16px; margin-bottom: 24px; border-bottom: 7px solid #dcdddd; }
  .main #blog-dl .Box .system-date { color: #010000; font-size: 18px; }
  .main #blog-dl .wysiwyg { margin-top: 32px; }

  .main #blog-dl .system-category { color: #ffffff; font-size: 16px; font-weight: bold; text-align: center; background-color: #416e78; display: inline-block; padding-left: 1.5em; padding-right: 1.5em; margin-bottom: 12px; }
  .main #blog-dl .system-category.icon02 { background-color: #416e78; }
  .main #blog-dl .system-category.icon03 { background-color: #416e78; }
  .main #blog-dl .system-category.icon04 { background-color: #416e78; }
  .main #blog-dl .system-category.icon05 { background-color: #416e78; }
  .main #blog-dl .system-category.icon06 { background-color: #416e78; }
  .main #blog-dl .system-category.icon07 { background-color: #416e78; }


  .main .contents-pager { width: 800px; }
  .main .system-staff-Box { margin-bottom: 16px; }
  .main .system-staff-Box .pic { width: 40px; margin-right: 0.8em; }
  .main .system-staff-Box.end-staff { display: block; margin-top: 48px; margin-bottom: 24px; }

  .side-contents-Box { width: 240px; margin-right: 60px; }
  .side-calendar { margin-bottom: 48px; }
  .side-ttl-02 { color: #333; font-size: 18px; font-weight: 400; line-height: 17px; letter-spacing: 5px; padding-bottom: 12px; text-align: center; border-bottom: 1px solid #333; }
  .side-ttl-02 .en { margin-bottom: 8px; display: block; }
  .side-ttl-02 .jp { font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック","Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro",  Verdana, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; font-weight: 500; color: #333; font-size: 14px; display: block; letter-spacing: 3px; }
  .side-list-02 li { color: #231815; font-size: 14px; line-height: 25px; padding-left: 16px; background-image: url(../images/abs-common/side-deco.jpg); background-repeat: no-repeat; background-position: 0 17px; padding-top: 16px; padding-bottom: 16px; border-bottom: 1px dotted #585352; }

		.side-list-02 a{
		display: block;
		}


  .side-new { margin-bottom: 48px; }
  .side-new li { position: relative; padding-bottom: 24px; border-bottom: 1px dotted #585352; }
  .side-new li .public-day { position: absolute;
		right: 3px;
		bottom: 3px;
		font-size: 12px; }
  .side-category { margin-bottom: 48px; }
  .side-contributor { margin-bottom: 48px; }

		}
@media screen and (max-width: 767px) {

  .blog-Box { width: 100%; margin-left: auto; margin-right: auto; }
  .side { width: 90%; margin-left: auto; margin-right: auto; }
  .main { margin-bottom: 16%; /* blog-dl(詳細) -------------------------------------*/ }
  .main .system-list { margin-bottom: -8%; width: 90%; margin-left: auto; margin-right: auto; }
  .main .system-list a:hover { text-decoration: none; }
  .main .system-list a:hover .system-ttl { text-decoration: underline; }
  .main .system-list li { width: 100%; margin-bottom: 8%; background-color: #fff; }
  .main .system-list li:nth-child(2n) { margin-right: 0; }
  .main .system-list .system-pic { height: 230px; position: relative; margin-bottom: 2%; text-align: center; }
  .main .system-list .system-pic img { height: 230px; }
  .main .system-list .system-pic:hover { -ms-filter: "alpha( opacity=80 )"; filter: alpha(opacity=80); opacity: 0.8; }
  .main .system-category { color: #ffffff; font-size: 1.6rem; text-align: center; background-color: #416e78; font-weight: bold; }
  .main .system-category.icon02 { background-color: #416e78; }
  .main .system-category.icon03 { background-color: #416e78; }
  .main .system-category.icon04 { background-color: #416e78; }
  .main .system-category.icon05 { background-color: #416e78; }
  .main .system-category.icon06 { background-color: #416e78; }
  .main .system-category.icon07 { background-color: #416e78; }
  .main .system-list .system-ttl { font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック","Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro",  Verdana, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; color: #010000; font-size: 15px; font-weight: 700; line-height: 1.65; margin-bottom: 8px; }
  .main .system-list .detail-Box { padding: .5em .8em; }
  .main .system-list .detail-Box .pic { margin-right: 16px; }
  .main .system-list .detail-Box .name { color: #010000; font-size: 12px; line-height: 1.65; }
  .main .system-list .date-Box .date { padding-left: .8em; color: #010000; font-size: 12px; }
  .main #blog-dl .Box { width: 100%; margin-left: auto; margin-right: auto; background-color: #dcdddd; }
  .main #blog-dl .Box .ttl { text-align: center; margin-bottom: 4%; width: 80%; margin-left: auto; margin-right: auto; }
  .main #blog-dl .Box .color-Box { background-color: #fff; padding: 6% 6% 8%; }
  .main #blog-dl .Box .system-date { color: #010000; font-size: 1.6rem; }
  .main #blog-dl .Box .ttl-02 { color: #000000; font-size: 1.8rem; font-weight: 700; padding-bottom: 5%; margin-bottom: 7%; border-bottom: 5px solid #dcdddd; line-height: 1.85; }
  .main #blog-dl .wysiwyg { margin-top: 6%; }
  .main #blog-dl .system-category { color: #ffffff; font-size: 16px; font-weight: bold; text-align: center; background-color: #deaf5e; display: inline-block; padding-left: 1.5em; padding-right: 1.5em; margin-bottom: 12px; }
  .main .system-staff-Box { margin-bottom: 16px; }
  .main .system-staff-Box .pic { width: 40px; margin-right: 0.8em; }
  .main .system-staff-Box.end-staff { display: block; margin-top: 48px; margin-bottom: 24px; }
  .main .system-date{ color: #1c4c6e; }
  .main .system-date::before{ content:"■"; }

	.side-contents-Box { width: 100%; margin-left: auto; margin-right: auto; }
  .side-calendar { margin-bottom: 48px; text-align: center; }
  .side-ttl-02 { color: #333; font-size: 18px; font-weight: 400; line-height: 17px; letter-spacing: 5px; padding-bottom: 12px; text-align: center; border-bottom: 1px solid #383231; }
  .side-ttl-02 .en { margin-bottom: 8px; display: block; }
  .side-ttl-02 .jp { font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック","Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro",  Verdana, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; font-weight: 500; color: #231815; font-size: 14px; display: block; letter-spacing: 3px; }
  .side-list-02 li { color: #231815; font-size: 14px; line-height: 25px; padding-left: 16px; background-image: url(../images/abs-common/side-deco.jpg); background-repeat: no-repeat; background-position: 0 17px; padding-top: 12px; padding-bottom: 12px; border-bottom: 1px dotted #585352; }

  .side-new { margin-bottom: 48px; }
  .side-new li { position: relative; padding-bottom: 30px; border-bottom: 1px dotted #585352; }
  .side-new li .public-day { position: absolute; right: 0; font-size: 12px; }
  .side-category { margin-bottom: 48px; }
  .side-contributor { margin-bottom: 48px; }

.rel-Box .category-link{
  display: block;
  margin:0px 0px 1% 0px;
}

		}
@media screen and (max-width: 380px) { .main .system-list .system-pic { height: 210px; }
  .main .system-list .system-pic img { height: 210px; } }
@media screen and (max-width: 321px) { .main .system-list .system-pic { height: 180px; }
  .main .system-list .system-pic img { height: 180px; } }