@charset "UTF-8";

/*-----------------------

      content

-----------------------*/
#contents {
  margin-bottom: 10%;
}

#contents h2 {
  margin: 0;
  margin-bottom: 5%;
}

#contents ul {
  margin: 0;
  padding: 0;
  font-size: 0;
}

#contents ul li {
  width: calc(98% / 3);
  display: inline-block;
  margin-right: 1%;
  margin-bottom: 3%;
}

#contents ul li.mr0 {
  margin-right: 0;
}

#contents ul li:nth-child(4) {
  width: 66.6666666%;
  float: left;
  margin-right: 1%;
  margin-bottom: 1%;
}

#contents ul li:nth-child(5) {
  width: 32.222%;
  margin-right: 0;
  margin-bottom: 2.5%;
}

#contents ul li:nth-child(6) {
  width: 32.222%;
  margin-right: 0;
}

#contents ul li:last-child {
  margin-right: 0;
}

/*-----------------------

      topics

-----------------------*/
#topics {
  margin-bottom: 10%;
}

#topics ul {
  margin: 0;
  padding: 0;
  height: 300px;
  overflow-y: scroll;
  width: 95%;
  margin: 0 auto;
  border: #c7c7c7 1px solid;
}

#topics ul li {
  width: 95%;
  margin: 0 auto;
  border-bottom: #c7c7c7 2px dotted;
  margin-top: 2%;
  list-style-type: none;
}

.detailBox-L {
  width: 40%;
  float: left;
  padding: 3%;
}

.detailBox-L img {
  display: block;
  border: #b1b1b1 1px solid;
}

.detailBox-R {
  width: 60%;
  float: right;
  overflow: hidden;
  padding-top: 3%;
  padding-bottom: 3%;
}

#topics p.date {
  color: #294357;
  margin-bottom: 2%;
  letter-spacing: 0.05em;
  font-size: 1.4rem;
  font-weight: bold;
}

#topics p.detailTtl {
  color: #e66f8e;
  font-size: 1.3rem;
  margin-bottom: 2%;
}

#topics p.detailTxt {
  font-size: 1.2rem;
  line-height: 1.6;
  color: #294357;
  margin-bottom: 3%;
}

.link a {
  display: block;
  text-align: center;
  text-decoration: none;
  color: #294357;
  font-size: 1.6rem;
  background-color: #eee;
  width: 90%;
  margin: 0 auto;
  padding: 5%;
  margin-top: 5%;
  border-radius: 7px;
  margin-bottom: 5%;
}

/*-----------------------

      sns

-----------------------*/
#sns {
  margin-bottom: 10%;
}

#sns article {
  text-align: center;
}

/*-----------------------

      link

-----------------------*/
#link {
  margin-bottom: 10%;
}

#link h2 {
  margin-top: 0;
}

#link ul {
  padding: 0;
  width: 95%;
  margin: 0 auto;
}

#link ul li {
  margin-bottom: 2%;
  list-style: none;
}