@charset "UTF-8";
@media screen and (min-width: 768px),print {
.cc-ttl-Box-01 { background: url('../images/blog/h2.jpg') top center no-repeat , url('../images/index/h-bg.jpg') top center ; }
/*----------------------------------------- h2 画像 ------------------------------------------*/
.cc-ttl-01 {}
/* PC用 共通して使える -------------------------------------*/
#blog .Box { width: 800px; margin-left: auto; margin-right: auto; background: url('../images/topics/topics-bg.jpg') top center; padding: 25px 20px; }
#blog .Box .date { color: #ffc71b; margin-bottom: 20px; font-size: 14px; }
#blog .Box .date:before{ content: '■'; }
#blog .system-list{ background: #fff; padding: 40px 20px; }
#blog .system-list li { padding-bottom: 32px; margin-bottom: 24px; border-bottom: 1px dotted #989989; position: relative; width: 100%; }
#blog .system-list li { padding-bottom: 32px; margin-bottom: 24px; border-bottom: 1px dotted #989989; position: relative; width: 100%; }
#blog .system-list a:hover { text-decoration: none; }
#blog .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: #898989; font-size: 16px; line-height: 1.8; margin-bottom: 8px; }
#blog .system-list .system-date:before{ content: '■' ; color: #0099ba ;}
#blog .system-list .system-category-set { width: 390px; overflow: hidden;}
#blog .system-list .system-category { font-size: 12px; color: #ccc; text-align: right; display: inline-block; float: right; margin-left: 1em;}
#blog .system-list .rel-Box { position: relative; }
#blog .system-list .status-icon { position: absolute; top: -10px; left: -10px; z-index: 10; }
#blog .system-list .pic-Box { width: 300px; height: 225px; margin-right: 27px; float: left; }
#blog .system-list .system-pic-Box { margin-bottom: 8px; }
#blog .system-list .system-pic { text-align: center; }
#blog .system-list .system-pic img { width: 300px; height: 225px; }
#blog .system-list .txt-Box { width: 360px; float: left; position: relative; }
#blog .system-list .txt-Box .more-link{ position: absolute; bottom: -10px; }
.system-list-comment { line-height: 1.8; }
#blog .system-list a:hover .system-list-comment{text-decoration: underline;}
#blog .system-list a:hover .system-ttl{text-decoration: underline;}
#blog .txt-Box table{ width: 100%; margin-bottom: 20px;}
#blog .txt-Box th{ padding: 10px; border-right: #ccc solid 1px; background:#f3f2e6; width: 23%;  }
#blog .txt-Box td{ padding: 10px; background:#f3f2e6;}
.topicsbox{ border-bottom: #ccc 1px dotted; padding-bottom: 20px; margin-bottom: 20px; }
#blog-dl .Box { width: 800px; margin-left: auto; margin-right: auto;  }
#blog-dl .Box .ttl { text-align: center; margin-bottom: 16px; }
#blog-dl .Box .color-Box { background-color: #fff; padding: 40px 45px 64px; }
#blog-dl .Box .ttl-02 { color: #000; font-size: 20px; font-weight: 700; line-height: 40px; margin-bottom: 16px; border-bottom: 7px solid #dcdddd; }
#blog-dl .Box .system-date { font-size: 18px;  margin-bottom: 20px;  }
#blog-dl .Box .system-date:before { content: "■"; margin-right: .3em; color: #0099ba ; }


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

.side-contents-Box { width: 240px; margin-right: 60px; margin-bottom: 80px; float: left; }
.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 { background: url('../images/blog/blog-bg.jpg') top center ;  }
#blog .ej-ttl { padding-left: .2em; }
#blog .ej-ttl .en { margin-right: 1em; width: 20%; }
#blog .ej-ttl .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: #010000; font-size: 1.5rem; }
#blog .Box { width: 100%; margin-left: auto; margin-right: auto; padding: 5% 3%; }
#blog .color-Box { background: #fff; padding: 2% 6% 6%; }
#blog .txt-Box { float: right; width: 55%; position: relative; }
#blog .pic-Box { width: 40%; height: 100%; margin-right: 5%; float: left; text-align: center; }
#blog .system-list a:hover { text-decoration: none; }
#blog .system-list a:hover .system-txt { text-decoration: underline; }
#blog .system-list li { padding-top: 3%; padding-bottom: 3%; border-bottom: 1px dotted #b9b9b9; width: 100%; }
#blog .system-list li a{display: block;}

#blog .system-list li .system-date { width: 100%; font-size: 1.5rem; color: #0099ba; }
#blog .system-list li .system-date:before { content: "■"; margin-right: .3em; }
#blog .system-list .system-category-set { }
#blog .system-list .system-category { font-size: 12px; color: #ccc; display: inline-block; margin-right: 0.5em;}
#blog .system-list li .system-txt { width: 100%; font-family: Meiryo; color: #383231; font-size: 1.4rem; }
/* blog-dl(詳細) -------------------------------------*/
#blog-dl .Box { width: 100%; margin-left: auto; margin-right: auto; background-color: #dcdddd; padding: 5%; }
#blog-dl .Box .ttl { text-align: center; margin-bottom: 16px; }
#blog-dl .Box .color-Box { background-color: #fff; padding: 6% 6% 8%; }
#blog-dl .Box .ttl-02 { color: #000000; font-size: 1.6rem; font-weight: 700; margin-bottom: 2%; line-height: 2; }
#blog-dl .Box .system-date { color: #44a3b8; font-size: 1.8rem; line-height: 2; padding-bottom: 4%; margin-bottom: 6%; border-bottom: 5px solid #dcdddd; }
#blog-dl .Box .system-date:before { content: "■"; margin-right: .3em; }

.side-contents-Box { order: -1;}
}
@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; } }