@charset "UTF-8";
@media screen and (min-width: 768px),print { 
/* ページ送り */
.page-list, .page-navi {  margin: 20px 0;  text-align: center; }
.page-list li, .page-navi li {  background: #f8f8f8;  display: inline-block; border: #ccc 1px solid; }
.page-list a, .page-navi a {    padding: 0 8px;    display: inline-block; }
.page-list .active{ background: #231815; }
.page-list .active a{ color: #fff; }

.page-navi{ margin-bottom: 20px; }
.page-navi .fast {  margin-right: 10px; }
.page-navi .last {  margin-left: 10px; }
.page-navi .list:before, .page-navi .list:after {  content: "|";  display: inline-block;  margin: 0 10px; }
.list-Back{ float: right; }
.contents-pager{ width: 1100px; margin: 0 auto 20px auto; padding: 20px 0; }
.contents-pager ul{ float: left; }
.list-Back{ background: #000; display: inline-block; padding: 2px 20px; }
.list-Back a{ color: #fff; }

/*----------------------------------------- h2 画像 ------------------------------------------*/
  /* PC用 共通して使える -------------------------------------*/
  .blog-Box { margin-top: 48px; width: 1100px; margin-left: auto; margin-right: auto; }
  .side { width: 240px; }
  .main { width: 800px; /* blog-dl(詳細) -------------------------------------*/ }
  .main .seo_bread_list { width: 800px; margin-top: 0px;   }
  .main .cc-ttl-02 { width: 800px; }
  .main .system-list { background: #eeefef; padding: 10px; }
  .main .system-list a:hover { text-decoration: none; }
  .main .system-list .system-ttl a:hover { text-decoration: underline; }
  .main .system-list li { width: 240px; margin-right: 20px; padding: 10px; margin-bottom: 32px; background-color: #fff; padding-bottom:60px; position: relative; }
  .main .system-list li:nth-child(3n) { margin-right: 0; }
  .main .system-list .system-pic { overflow: hidden; width: 220px; height: 180px; position: relative; }
  .main .system-list .system-pic img { width: 255px; height: 200px; }
  .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: #1b3171; }
  .main .system-category.icon02 { background-color: #5b177d; }
  .main .system-category.icon03 { background-color: #fecb00; }
  .main .system-category.icon04 { background-color: #105867; }
  .main .system-category.icon05 { background-color: #a40001; }
  .main .system-category.icon06 { background-color: #00ab84; }
  .main .system-category.icon07 { background-color: #675c47; }
	.main .system-list li .more{ position: absolute; bottom: 10px; left: 10px; color: #fff; background: #2a2827; padding: 2px; width: 200px; text-align: center; }
	
  .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; background-color: #dcdddd; padding: 10px; }
  .main #blog-dl .Box .ttl { text-align: center; margin-bottom: 16px; }
  .main #blog-dl .Box .color-Box { background-color: #fff; padding: 32px 40px 56px; }
  .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: 1px 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: #1b3171; display: inline-block; padding-left: 1.5em; padding-right: 1.5em; margin-bottom: 12px; }
  .main #blog-dl .system-category.icon02 { background-color: #5b177d; }
  .main #blog-dl .system-category.icon03 { background-color: #fecb00; }
  .main #blog-dl .system-category.icon04 { background-color: #105867; }
  .main #blog-dl .system-category.icon05 { background-color: #a40001; }
  .main #blog-dl .system-category.icon06 { background-color: #00ab84; }
  .main #blog-dl .system-category.icon07 { background-color: #675c47; }

  #blog-dl .gallery-Box { background: #eeefef; margin-top: 64px; padding: 20px; }
  #blog-dl .gallery-Box li { width: 155px; margin-right: 10px; margin-bottom: 20px; position: relative; }
  #blog-dl .gallery-Box li .zoom { position: absolute; right: 0; top: 90px; }
  #blog-dl .gallery-Box li:nth-child(4n) { margin-right: 0; }
  #blog-dl .gallery-Box li .pic { width: 155px; height: 120px; margin-bottom: .4em; overflow: hidden; }
  #blog-dl .gallery-Box li .pic:hover { -ms-filter: "alpha( opacity=80 )"; filter: alpha(opacity=80); opacity: 0.8; }
  #blog-dl .gallery-Box li .pic img { width: 180px; height: 173px; }
 .cc-ttl-03 { margin: 0 auto 30px; padding: 10px 20px; color: #fff; font-weight: bold !important; font-size: 20px; line-height: 1.4; letter-spacing: 0.5px; background: #000; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック","Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro",  Verdana, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;}
		
  .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) {

 /* ページ送り */
.page-list, .page-navi {  margin: 20px 0;  text-align: center; }
.page-list li, .page-navi li {  background: #f8f8f8;  display: inline-block; border: #ccc 1px solid; }
.page-list a, .page-navi a {    padding: 0 8px;    display: inline-block; }
.page-list .active{ background: #231815; }
.page-list .active a{ color: #fff; }


.page-navi{ margin-bottom: 20px; }
.page-navi .fast {  margin-right: 10px; }
.page-navi .last {  margin-left: 10px; }
.page-navi .list:before, .page-navi .list:after {  content: "|";  display: inline-block;  margin: 0 10px; }
.list-Back{ float: right; }
.contents-pager{ padding: 20px 0; margin-bottom: 30px; }
.contents-pager ul{ float: left; }
.list-Back{ background: #000; display: inline-block; padding: 2px 20px; }
.list-Back a{ color: #fff; } 


  .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 { width: 100%; margin-left: auto; margin-right: auto; background: #eeefef; padding: 5%; }
  .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; padding: 3%; }
  .main .system-list li:nth-child(2n) { margin-right: 0; }
  .main .system-list .system-pic { height: 230px; position: relative; text-align: center; background: #f8f8f8;}
  .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: #1b3171; font-weight: bold; }
  .main .system-category.icon02 { background-color: #5b177d; }
  .main .system-category.icon03 { background-color: #fecb00; }
  .main .system-category.icon04 { background-color: #105867; }
  .main .system-category.icon05 { background-color: #a40001; }
  .main .system-category.icon06 { background-color: #00ab84; }
  .main .system-category.icon07 { background-color: #675c47; }
  .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; padding: 5%; }
  .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: 1px 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: #1b3171; display: inline-block; padding-left: 1.5em; padding-right: 1.5em; margin-bottom: 12px; }
  .main #blog-dl .system-category.icon02 { background-color: #5b177d; }
  .main #blog-dl .system-category.icon03 { background-color: #fecb00; }
  .main #blog-dl .system-category.icon04 { background-color: #105867; }
  .main #blog-dl .system-category.icon05 { background-color: #a40001; }
  .main #blog-dl .system-category.icon06 { background-color: #00ab84; }
  .main #blog-dl .system-category.icon07 { background-color: #675c47; }

  .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-list li .more{ color: #fff; background: #2a2827; padding: 2px; width: 100%; text-align: center; }
		
		.side-contents-Box { width: 90%; 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: 16px; padding-bottom: 16px; border-bottom: 1px dotted #585352; }
  #blog-dl .gallery-Box { margin-top: 12%; margin-bottom: -5%; }
  #blog-dl .gallery-Box li { width: 32%; margin-right: 2%; margin-bottom: 5%; position: relative;}
  #blog-dl .gallery-Box li .zoom { position: absolute; right: 0; top: -5px; width: 20%; }
  #blog-dl .gallery-Box li:nth-child(3n) { margin-right: 0; }
  #blog-dl .gallery-Box li .pic { height: 75px; margin-bottom: .4em; text-align: center; }
  #blog-dl .gallery-Box li .pic:hover { -ms-filter: "alpha( opacity=80 )"; filter: alpha(opacity=80); opacity: 0.8; }
  #blog-dl .gallery-Box li .pic img { height: 75px; }
 .cc-ttl-03 { margin: 0 auto 30px; padding: 10px 20px; color: #fff; font-weight: bold !important; font-size: 20px; line-height: 1.4; letter-spacing: 0.5px; background: #000; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック","Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro",  Verdana, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;}

  .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; }
		}
@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; } }