/******************
/* topics.css
******************/
@import url("low_common.css");
/****-common--****/
#topics .main_section {
 margin: 55px 0 150px;
}
#topics .main_section h1 {
 position: relative;
 width: 100%;
 font-size: 2.4rem;
 letter-spacing: 0.2rem;
 padding-bottom: 5px;
 margin-bottom: 20px;
}
#topics .main_section h1::after {
 content: "";
 display: block;
 height: 2px;
 width: 100%;
 background: linear-gradient(to right, #315BA7 0%, #315BA7 25%, #dddddd 25%, #dddddd 100%);
}
#topics .main_section .info {
 width: 100%;
 padding: 20px 30px;
 margin-bottom: 20px;
}
#topics .main_section .info p {
 margin-bottom: 10px;
}
#topics .main_section .list{
 width: 890px;
}
#topics .main_section a{
 transition: 0.4s ease-in-out;
}
#topics .main_section a:hover{
 opacity: 0.7;
}
@media screen and (max-width: 767px) {
 #topics .main_section {
  margin: 7vw 0 20vw;
 }
 #topics .main_section h1 {
  font-size: 2.0rem;
  padding-bottom: 1vw;
  margin: 0 3vw 4.5vw;
 }
}
/****-archives--****/
#topics .main_section .archives{
 width: 190px;
 padding: 50px 0;
}
#topics .main_section .archives h2{
 display: block;
 font-size: 1.8rem;
 letter-spacing: 0.2rem;
 text-align: center;
 padding: 10px 0;
 margin: 0 0 15px;
 border-bottom: #2e62ae 1px solid;;
}
#topics .main_section .archives > ul > li{
 text-align: center;
 padding:0 10px 20px;
 margin-bottom: 20px;
 border-bottom: #ccc 1px solid;
}
@media screen and (max-width: 767px) {
}
/****-index--****/
#topics .main_section .list h2 {
 display: inline-block;
 color: #fff;
 font-size: 2.1rem;
 letter-spacing: 0.2rem;
 padding: 10px 20px;
 margin: 0 10px 20px;
 background: #2e62ae;
}
#topics .main_section .list ul {
 margin:0 30px;
}
#topics .main_section .list ul li {
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex;
 -webkit-flex-wrap: wrap;
 -ms-flex-wrap: wrap;
 flex-wrap: wrap;
 -webkit-justify-content: flex-start;
 -ms-justify-content: flex-start;
 justify-content: flex-start;
 vertical-align: middle;
 padding-bottom: 5px;
 margin-bottom: 30px;
 border-bottom: #ccc 1px dotted;
}
#topics .main_section .list ul li time {
 width: 120px;
 font-weight: bold;
}
#topics .main_section .list ul li a {
 display: block;
 width: 710px;
 transition: 0.4s ease-in-out;
}
#topics .main_section .list ul li a:hover {
 opacity: 0.7;
}
@media screen and (max-width: 767px) {
 #topics .main_section h2 {
  color: #fff;
  font-size: 1.6rem;
  padding: 1.5vw;
  margin: 0 4vw 3vw;
 }
 #topics .main_section ul {
  margin-left: 5vw;
 }
 #topics .main_section ul li {
  vertical-align: middle;
  margin-bottom: 5vw;
 }
}
@media screen and (max-width: 767px) {
}

/****-topics_detail--****/
#topics.topics_detail .main_section h1 { 
 letter-spacing: 0.2rem;
 margin-bottom: 0;
}
#topics.topics_detail .main_section time {
 font-weight: bold;
 margin-left: 10px;
}
#topics.topics_detail .main_section .detail {
  margin: 30px 10px; 
}
#topics.topics_detail .main_section .detail p{
  line-height: 3rem;
}
#topics.topics_detail .main_section .archives{
 padding: 0;
}
#topics.topics_detail .main_section .archives h1 {
 width: 100%;
 color: #fff;
 font-size: 1.8rem;
 text-align: center;
 padding: 6px 0;
 margin-bottom: 0;
 background: #315BA7;
}
#topics.topics_detail .main_section .archives h1::after{
 content: none;
}
#topics.topics_detail .main_section .archives h2{
 font-size: 1.6rem;
}
@media screen and (max-width: 767px) {
}

/****-topics_archive--****/

#topics.topics_archive .main_section .archives{
 padding: 0;
}
#topics.topics_archive .main_section .archives h1 {
 width: 100%;
 color: #fff;
 font-size: 1.8rem;
 text-align: center;
 padding: 6px 0;
 margin-bottom: 0;
 background: #315BA7;
}
#topics.topics_archive .main_section .archives h1::after{
 content: none;
}
#topics.topics_archive .main_section .archives h2{
 font-size: 1.6rem;
}
@media screen and (max-width: 767px) {
}