@charset "UTF-8";

/* ========================================
   @media screen and (min-width: 768px),print
======================================== */
@media screen and (min-width: 768px),print {

/* topics -------------------------------------*/
#topics .topics-empty{background: #fff;margin-block: 50px;padding: 40px 20px;text-align: center;color: #222;font-size: 22px;line-height: 1.6;}
#topics .system-list{background: #fff;padding: 0;margin-block: 50px;display: grid;grid-template-columns: repeat(1, minmax(0, 1fr));gap: 0;}
#topics .system-list li{ overflow: hidden; line-height: 1.4; margin-bottom: 0; padding: 16px 0; background: #fff; color: #222; width: 100%;}
#topics .system-list li a{display: block;color: #222;}
#topics .system-list li a:hover{ text-decoration: none; }
#topics .system-list .system-date{font-size: 16px;line-height: 1.4;margin-bottom: 12px;color: #222;}
#topics .system-list .system-ttl{color: #222;}
#topics .system-list .system-ttl-01{font-size: 16px;line-height: 1.6;display: block;width: 100%;}
#topics .system-list .system-category-set {   margin-bottom: 15px;display: inline-block;width: 100%;}
#topics .system-category{margin-bottom: 20px;}

#topics .system-list2{ background: #eeefef; padding: 41px 21px 21px; margin-bottom: 50px; }
#topics .system-list-inner{ background: #fff; padding: 40px 20px;}
#topics .system-list2 li{ overflow: hidden; line-height: 1.4; margin-bottom: 20px; border-bottom: 1px dotted #b2b2b2; padding: 0 0 20px;}
#topics .system-list2 li a:hover{ text-decoration: none; }
#topics .system-list2 .system-date{   font-size: 15px; line-height: 1.4; }
#topics .system-list2 .system-ttl-01{   font-size: 15px; line-height: 1.6; display: block;width: 100%;}
#topics .system-list2 .system-category-set {   margin-bottom: 15px;display: block;width: 100%;}
#topics .system-list2 .system-pic{ width: 20%; float: left; text-align: center;}
#topics .system-list2 .system-pic img{ width: auto;  max-width: 100%;height: auto;}
#topics .system-list2 .textbox{ width: 78%; margin-bottom: 10px; float: right; }
#topics .system-contents {
  width: min(95%, 1100px);
  margin-inline: auto;
  padding: 0;
  margin-bottom: 30px;
}
#topics .system-contents-inner { background: #fff; padding: 40px 20px;}
#topics .system-contents .system-date{ font-size: 16px; margin-bottom: 15px; display: block; }
#topics .system-contents .system-ttl {
  font-size: 20px;
  font-weight: bold;
  padding-bottom: 16px;
  border-bottom: 1px #ccc solid;
  line-height: 1.4;
}
#topics .system-contents .system-pic{ text-align: center; margin-bottom: 50px; }
#topics .system-contents .system-pic img{ max-width: 100%; max-height: 600px; width: auto; max-height: auto; }

#topics .system-list li a:hover {
  text-decoration: underline;
}

#topics .system-category > span.icon01,
#topics .cate-list span.icon01 a {
  background: #C8A160;
  color: #fff;
}
#topics .system-category > span.icon02,
#topics .cate-list span.icon02 a {
  background: #222222;
  color: #fff;
}

#topics .cate-list {
  margin-bottom: 100px;
}





}


/* ========================================
   @media screen and (max-width: 767px)
======================================== */
@media screen and (max-width: 767px) {

/* topics -------------------------------------*/
#topics .topics-empty{background: #fff;margin-top: 10vw;padding: 8vw 0;text-align: center;color: #222;font-size: 3.6vw;line-height: 1.6;}
#topics .system-list{background: #fff;padding: 0;margin: 0 3vw 10vw;display: grid;grid-template-columns: repeat(1, minmax(0, 1fr));gap: 0;}
#topics .system-list-inner{ background: #fff; padding: 5vw 3vw;}
#topics .system-list li{overflow: hidden;line-height: 1.4;margin-bottom: 0; padding: 4vw 0;background: #fff;color: #222;width: 100%;}
#topics .system-list li a{display: block;color: #222;}
#topics .system-list li a:hover{ text-decoration: none; }
#topics .system-list .system-date{ font-size: 3.2vw; line-height: 1.4; margin-bottom: 1.5vw;color: #222;}
#topics .system-list .system-ttl{color: #222;}
#topics .system-list .system-ttl-01{ font-size: 3.6vw; line-height: 1.6; }
#topics .system-list .system-category-set { margin-bottom: 2vw;}

#topics .system-list2{ background: #eeefef; padding: 4vw 2vw; margin-bottom: 10vw; }
#topics .system-list2-inner{ background: #fff; padding: 5vw 3vw;}
#topics .system-list2 li{ overflow: hidden; line-height: 1.4; margin-bottom: 5vw; border-bottom: 0.2vw dotted #b2b2b2; padding: 0 0 5vw;}
#topics .system-list2 li a:hover{ text-decoration: none; }
#topics .system-list2 .system-date{ font-size: 3.2vw; line-height: 1.4; margin-bottom: 2vw}
#topics .system-list2 .system-pic{ width: 20vw; float: left; }
#topics .system-list2 .system-pic img{ max-width: 100%; height: auto; }
#topics .system-list2 .textbox{  width: 66vw; float: right;  }
#topics .system-list2 .system-ttl-01{ font-size: 3.6vw; line-height: 1.6; }
#topics .system-list2 .system-category-set { margin-bottom: 2vw;}

#topics .system-category span{display: inline-block;font-size: 3.4vw;padding: 1vw 3vw;}
#topics .system-category{margin-bottom: 3vw;}

#topics .system-contents{padding:10vw 1px 1px;margin: 0 3vw 10vw;}
#topics .system-contents .system-date{font-size: 3.2vw;margin-bottom: 2vw;display: block;}
#topics .system-contents .system-category-set { width: 100%; margin-bottom: 5vw;}
#topics .system-contents .system-ttl{font-size: 4vw;font-weight: bold;margin-bottom: 0;padding-bottom: 2vw;border-bottom: 0.2vw #ccc solid;line-height: 1.4;}
#topics .system-contents .system-pic { margin-bottom: 4vw; }
#topics .system-contents .system-pic img{ max-width: 100%; height: auto; }

#topics .system-category > span.icon01,
#topics .cate-list span.icon01 a {
  background: #C8A160;
  color: #fff;
}
#topics .system-category > span.icon02,
#topics .cate-list span.icon02 a {
  background: #222222;
  color: #fff;
}

#topics .cate-list {
  margin-bottom: 12vw;
}
}