@charset "UTF-8";

html { font-size: 62.5%; }
body { font-size: 1.4rem; }

* {
  box-sizing: border-box;
}

@media screen and (min-width: 768px){
  .nav-arrow_right{padding:8px 0;}
  .dropdown_multilayer_menu_sub.js-menu .nav-arrow_right{padding-left:16px;}
  .nav-item.dropdown_multilayer .nav-link {margin-bottom: 3px !important;}
  .navbar-brand {margin-top: -53px;}
  #footer_sitemaps .sitemap_column dl {line-height: 1.65;}
}

.topcis-detail-content p {
  line-height: 1.6;
}
.himotoku {
  line-height: 1.8 !important;
}

.topcis-detail-content a {
  word-wrap: break-word;
}

.site-top {
  margin: 0 auto;
  max-width: 1200px;
}
.topcis-wrap {
  background-color: #f3f8fc;
  background-image: url("/img/topics/topics_bg01.svg"), url("/img/topics/topics_bg02.svg"), url("/img/topics/topics_bg03.svg"), url("/img/topics/topics_bg04.svg");
  background-position: top left, top right, bottom left, bottom right;
  background-size: 40% auto, 36% auto, 20% auto, 10% auto;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  padding-bottom: 100px;
  padding-top: 10px;
}
.topcis-hdg-wrap {
  text-align: center;
  max-width: 1200px;
  margin: 80px auto 0;
}
.topcis-hdg {
  color: #0081cc;
  font-size: 24px;
  font-weight: bold;
  padding: 0 0 24px;
  position: relative;
  margin-bottom: 24px;
}
.topcis-hdg::after {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  background: #0081cc;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
.topcis-hdg-txt {
  font-size: 16px;
}
.topcis-nav {
  margin: 90px auto 0;
  max-width: 1200px;
}
.topcis-nav-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  list-style: none;
  padding: 0;
}
.topcis-nav-list-itm-btn {
  cursor: pointer;
  min-width: 160px;
  height: 57px;
  padding: 11px 10px 10px;;
  border-radius: 30px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 13px;
  border: solid 2px #0081cc;
  color: #0081cc;
  transition: 0.3s;
  font-weight: bold;
  line-height: 1;
}
.btn-all.is-active {
  background: #0081cc url("/img/topics/nav-btn-bg.svg") no-repeat center center / 59px auto;
  color: #fff;
}
.btn-all:not(.is-active):hover {
  background: #0081cc;
  color: #fff;
}
.btn-01 {
  border: solid 2px #007c7b;
  color: #007c7b;
}
.btn-01.is-active {
  background: #007c7b url("/img/topics/nav-btn-bg.svg") no-repeat center center / 59px auto;
  color: #fff;
}
.btn-01:not(.is-active):hover {
  background: #007c7b;
  color: #fff;
}
.btn-02 {
  border: solid 2px #00037c;
  color: #00037c;
}
.btn-02.is-active {
  background: #00037c url("/img/topics/nav-btn-bg.svg") no-repeat center center / 59px auto;
  color: #fff;
}
.btn-02:not(.is-active):hover {
  background: #00037c;
  color: #fff;
}
.btn-03 {
  border: solid 2px #7c6900;
  color: #7c6900;
}
.btn-03.is-active {
  background: #7c6900 url("/img/topics/nav-btn-bg.svg") no-repeat center center / 59px auto;
  color: #fff;
}
.btn-03:not(.is-active):hover {
  background: #7c6900;
  color: #fff;
}
.btn-04 {
  border: solid 2px #7c1200;
  color: #7c1200;
}
.btn-04.is-active {
  background: #7c1200 url("/img/topics/nav-btn-bg.svg") no-repeat center center / 59px auto;
  color: #fff;
}
.btn-04:not(.is-active):hover {
  background: #7c1200;
  color: #fff;
}
.btn-05 {
  border: solid 2px #7c0060;
  color: #7c0060;
}
.btn-05.is-active {
  background: #7c0060 url("/img/topics/nav-btn-bg.svg") no-repeat center center / 59px auto;
  color: #fff;
}
.btn-05:not(.is-active):hover {
  background: #7c0060;
  color: #fff;
}
.topics-pager {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin: 40px auto 0;
  max-width:1200px;
}
.topics-pager button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  appearance: none;
  color: #0081cc;
  padding: 0 0 0 20px;
}
.topics-pager .next-page span {
  color: #000;
  display: inline-block;
  margin-left: 11px;
}
.topics-pager .prev-page span {
  color: #000;
  display: inline-block;
  margin-right: 11px;
}
.topics-pager .disabled {
  display: none;
}
.topics-pager ul {
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 0;
  gap: 10px;
  padding: 0 0 0 20px;
}
.topics-pager ul a {
  display: flex;
  width: 30px;
  height: 30px;
  line-height: 1;
  justify-content: center;
  align-items: center;
  background: #fff;
  color: #0081cc;
  font-size: 14px;
  transition: 0.3s;
}
.topics-pager ul a:hover {
  opacity: 0.7;
}
.topics-pager .current a {
  background: #0081cc;
  color: #fff;
  pointer-events: none;
}

/* detail */

.topcis-detail {
  background: #cee6f4;
  padding: 57px 60px 100px;
  max-width: 1200px;
  margin: 10px auto 0;
  min-height: 300px;
}
@media screen and (max-width: 1240px){
  .topcis-wrap {
    padding: 10px 20px 100px;
  }
}
@media screen and (max-width: 1130px){
  .topcis-wrap {
    padding: 30px 20px 100px;
  }
}
.topcis-detail-hdg {
  color: #000;
  font-size: 22px;
  font-weight: bold;
}
.topcis-detail-hdg-data {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 20px;
}
.topcis-detail-hdg-date {
  font-size: 14px;
  color: #666;
}
.topcis-detail-hdg-category {
  display: inline-block;
  padding: 7px 10px;
  background: #007c7b;
  color: #fff;
  border-radius: 3px;
  line-height: 1;
  font-size: 11px;
}
.topcis-detail-content {
  margin: 38px auto 0;
  max-width: 720px;
}
.topics-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-top: 1.4rem;
}

@media screen and (max-width: 767px){
  .topcis-wrap {
    background-image: url("/img/topics/topics_bg01_sp.svg"), url("/img/topics/topics_bg02_sp.svg"), url("/img/topics/topics_bg03_sp.svg"), url("/img/topics/topics_bg04_sp.svg");
    background-position: top left, top 10.4vw right, bottom 79.86666667vw left, bottom 133.3333333vw right;
    background-size: 62.93333333% auto, 34% auto, 35.06666667% auto, 31.2% auto;
    padding-bottom: 19.73333333vw;
    padding-top: 5.333333333vw;
  }
  .topcis-hdg-wrap {
    max-width: 89.33333333vw;
    margin: 10.66666667vw auto 0;
  }
  .topcis-hdg {
    font-size: 5.333333333vw;
    padding: 0 0 2.8vw;
    margin-bottom: 5.2vw;
  }
  .topcis-hdg::after {
    width: 5.333333333vw;
  }
  .topcis-hdg-txt {
    font-size: 3.2vw;
  }
  .topcis-nav {
    margin: 13.33333333vw auto 0;
    max-width: 89.33333333vw;
  }
  .topcis-nav-list {
    gap: 1.333333333vw;
  }
  .topcis-nav-list-itm-btn {
    min-width: 26.66666667vw;
    height: 7.6vw;
    padding: 1.866666667vw;
    border-radius: 4vw;
    font-size: 2.933333333vw;
  }
  .topcis-nav-list-itm-btn.is-active {
    background-size: 7.733333333vw auto;
  }
  .topics-pager {
    margin: 8vw auto 0;
    max-width:89.33333333vw;
    flex-wrap: wrap;
  }
  .topics-pager button {
    padding: 0 0 0 2.666666667vw;
  }
  .topics-pager button span {
    color: #000;
    display: inline-block;
    margin-left: 1.466666667vw;
  }
  .topics-pager ul {
    flex-wrap: wrap;
    gap: 1.333333333vw;
  }
  .topics-pager ul a {
    width: 8vw;
    height: 8vw;
    font-size: 3.2vw;
  }
  .topics-pager ul a:hover {
    opacity: 1;
  }
  .page-info {
    width: 100%;
    text-align: right;
    margin-bottom: 2.6vw;
  }
  
  /* detail */

  .topcis-detail {
    padding: 8.533333333vw 3vw 6vw;
    max-width: 94.8vw;
    margin: 5.066666667vw auto 0;
    min-height: 100vw;
  }
  .topcis-wrap {
    padding: 5.6vw 0 13.33333333vw;
  }
  .topcis-detail-hdg {
    font-size: 4.266666667vw;
  }
  .topcis-detail-hdg-data {
    gap: 2.666666667vw;
    margin-top: 4.8vw;
  }
  .topcis-detail-hdg-date {
    font-size: 3.2vw;
  }
  .topcis-detail-hdg-category {
    padding: 0.933333333vw 1.333333333vw;
    font-size: 2.666666667vw;
  }
  .topcis-detail-content {
    margin: 8.266666667vw auto 0;
    max-width: 100%;
  }
  .site-top {
    display: block !important;
    line-height: 1.3;
  }
  .topics-buttons {
    flex-direction: column;
    gap: 5.333333333vw;
    margin-top: 5.333333333vw;
  }
}

.topics-list{display:flex;gap:34px 2.916666666666667%;max-width:1200px;flex-wrap:wrap;list-style:none;margin:0 auto;padding:0;}
.topics-list-itm{max-width:273px;width:22.75%;position: relative;}
.topics-list-itm.pinned::after {content: "";display: block;width: 26px;height: 28px;background: url("/img/icon_pin.png") no-repeat center center / 100% auto;position: absolute;top: -6px;right: -4px;}
.topics-list-itm-link{display:flex;height:100%;background:#fff;flex-direction:column;justify-content:flex-start;border-radius:6px;overflow: hidden;}
.topics-list-itm-img{margin-bottom:0;background:#ebebeb;}
.topics-list-itm-img img{width:100%;height:153px;object-fit:contain;}
.topics-list-itm-hdg{font-size:14px;color:#000;font-weight:normal;line-height:2;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.topics-list-itm-inner{padding:17px 20px 20px;display:flex;flex-direction:column;justify-content:space-between;height:100%;}
.topics-list-itm-data{display:flex;justify-content:space-between;align-items:center;}
.topics-list-itm-data-date{font-size:12px;color:#666;}
.topics-list-itm-data-category{background:#929292;padding:7px 10px;line-height:1;color:#fff;font-size:11px;max-width:56%;}
.label-1 {background: #007c7b;}
.label-2 {background: #00037c;}
.label-3 {background: #7c6900;}
.label-4 {background: #7c1200;}
.label-5 {background: #7c0060;}
@media screen and (max-width: 767px){
.topics-list{display:flex;gap:6.333vw 5.333vw;max-width:89.33333333vw;}
.topics-list-itm{max-width:42vw;width:42vw;}
.topics-list-itm.pinned::after {width: 4.133333333vw;height: 4.666666667vw;top: -2.266666667vw;right: -1.6vw;}
.topics-list-itm-img img{height:22.66666667vw;object-fit:contain;}
.topics-list-itm-hdg{font-size:3.733333333vw;line-height:1.5;}
.topics-list-itm-inner{padding:4.266666667vw;}
.topics-list-itm-data{flex-direction:column;align-items:flex-start;margin-top:3.466666667vw;gap:3.866666667vw;}
.topics-list-itm-data-date{font-size:3.2vw;}
.topics-list-itm-data-category{padding:1.2vw 1.466666667vw;font-size:2.666666667vw;max-width: 100%;}
}