@charset "UTF-8";
@media screen and (min-width: 768px),print { /*----------------------------------------- h2 画像 ------------------------------------------*/
.cc-ttl-Box-01 { background: url('../images/topics/h2.jpg') top center no-repeat , url('../images/index/h-bg.jpg') top center ; }
.cc-ttl-01 { color: #fff; }
/* PC用 共通して使える -------------------------------------*/
/* topics(一覧) -------------------------------------*/
#topics .Box { width: 800px; margin-left: auto; margin-right: auto; background: url('../images/topics/topics-bg.jpg') top center; padding: 25px 20px; }
#topics .Box .date { color: #ffc71b; margin-bottom: 20px; font-size: 14px; }
#topics .Box .date:before{ content: '■'; }
#topics .system-list{ background: #fff; padding: 40px 20px; }
#topics .system-list li { padding-bottom: 32px; margin-bottom: 24px; border-bottom: 1px dotted #989989; position: relative; width: 100%; }
#topics .system-list li { padding-bottom: 32px; margin-bottom: 24px; border-bottom: 1px dotted #989989; position: relative; width: 100%; }
#topics .system-list a:hover { text-decoration: none; }
#topics .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; }
#topics .system-list .system-date:before{ content: '■' ; color: #0099ba ;}
#topics .system-list .rel-Box { position: relative; }
#topics .system-list .status-icon { position: absolute; top: -10px; left: -10px; z-index: 10; }
#topics .system-list .pic-Box { width: 300px; height: 225px; margin-right: 27px; float: left; }
#topics .system-list .system-pic-Box { margin-bottom: 8px; }
#topics .system-list .system-pic { text-align: center; }
#topics .system-list .system-pic img { width: 300px; height: 225px; }
#topics .system-list .system-category { display: inline-block; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック","Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro",  Verdana, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; color: #ffffff; font-size: 16px; font-weight: 700; background-color: #e04040; text-align: center; padding: 0px 20px; margin-bottom: 10px; }
#topics .system-list .txt-Box { width: 360px; float: left; padding-top: 20px; position: relative; }
#topics .system-list .txt-Box .more-link{ position: absolute; bottom: -10px; }
.system-list-comment { line-height: 1.8; }

#topics .system-list a:hover .system-list-comment{text-decoration: underline;}
#topics .system-list a:hover .system-ttl{text-decoration: underline;}
#topics .txt-Box table{ width: 100%; margin-bottom: 20px;}
#topics .txt-Box th{ padding: 10px; border-right: #ccc solid 1px; background:#f3f2e6; width: 23%;  }
#topics .txt-Box td{ padding: 10px; background:#f3f2e6;}
.topicsbox{ border-bottom: #ccc 1px dotted; padding-bottom: 20px; margin-bottom: 20px; }
/* topics-dl(詳細) -------------------------------------*/
#topics-dl .Box { width: 800px; margin-left: auto; margin-right: auto; background-color: #dcdddd; padding:30px; }
#topics-dl .Box .ttl { text-align: center; margin-bottom: 16px; }
#topics-dl .Box .color-Box { background-color: #fff; padding: 40px 45px 64px; }
#topics-dl .Box .ttl-02 { color: #000; font-size: 20px; font-weight: 700; line-height: 40px; margin-bottom: 16px; border-bottom: 7px solid #dcdddd; }
#topics-dl .Box .system-date { font-size: 18px;  margin-bottom: 20px;  }
#topics-dl .Box .system-date:before { content: "■"; margin-right: .3em; }
#topics-dl .Box .cc-pdf {text-align: center; margin: 50px 0 20px; padding: 0; }
#topics-dl .Box .cc-pdf a{ font-weight: bold; margin: 0 auto; color: #fff; padding: 10px 50px; font-size: 16px; text-align: center; display: block; background: #433526; letter-spacing: 1px; width: 60%;}
#topics-dl .Box .cc-pdf a:hover{ background: #65584a; text-decoration: none; }
}

@media screen and (max-width: 767px) { /* SP用 共通して使える -------------------------------------*/
/* topics(一覧) -------------------------------------*/
#topics { background: url('../images/topics/topics-bg.jpg') top center ; padding: 6% 3%; }
#topics .ej-ttl { padding-left: .2em; }
#topics .ej-ttl .en { margin-right: 1em; width: 20%; }
#topics .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; }
#topics .Box { width: 100%; margin-left: auto; margin-right: auto; }
#topics .color-Box { background: #fff; padding: 2% 6% 6%; }
#topics .txt-Box { float: right; width: 55%; position: relative; }
#topics .pic-Box { width: 40%; height: 100%; margin-right: 5%; float: left; text-align: center; }
#topics .system-list a:hover { text-decoration: none; }
#topics .system-list a:hover .system-txt { text-decoration: underline; }
#topics .system-list li { padding-top: 3%; padding-bottom: 3%; border-bottom: 1px dotted #b9b9b9; width: 100%; }
#topics .system-list li a{display: block;}

#topics .system-list li .system-date { width: 100%; font-size: 1.5rem; color: #0099ba; }
#topics .system-list li .system-date:before { content: "■"; margin-right: .3em; }
#topics .system-list li .system-txt { width: 100%; font-family: Meiryo; color: #383231; font-size: 1.4rem; }
/* topics-dl(詳細) -------------------------------------*/
#topics-dl .Box { width: 100%; margin-left: auto; margin-right: auto; background-color: #dcdddd; padding: 5%; }
#topics-dl .Box .ttl { text-align: center; margin-bottom: 16px; }
#topics-dl .Box .color-Box { background-color: #fff; padding: 6% 6% 8%; }
#topics-dl .Box .ttl-02 { color: #000000; font-size: 1.6rem; font-weight: 700; margin-bottom: 2%; line-height: 2; }
#topics-dl .Box .system-date { color: #44a3b8; font-size: 1.8rem; line-height: 2; padding-bottom: 4%; margin-bottom: 6%; border-bottom: 5px solid #dcdddd; }
#topics-dl .Box .system-date:before { content: "■"; margin-right: .3em; }
#topics-dl .Box .cc-pdf {text-align: center; margin: 50px 0 20px; padding: 0; }
#topics-dl .Box .cc-pdf a{ margin: 0 auto; color: #fff; padding: 10px 50px; text-align: center; display: block; background: #433526; letter-spacing: 1px; width: 100%;}
#topics-dl .Box .cc-pdf a:hover{ background: #65584a; text-decoration: none; }
}