@charset "utf-8";
/* CSS Document */
/*===================================
  
  新着情報CSS（topic）

===================================*/
/*=========================

  フォントサイズ調整

==========================*/
html {
  font-size: 62.5%;
}
body {
  background: transparent;
}
/*=========================

  トップページ新着情報

==========================*/
/*-------------
        PC
---------------*/
.topic #contents {
  margin: 0 auto;
  width: 100%;
}
.topic strong {
  font-weight: bold;
}
.topic em {
  font-style: italic;
}
.topic u {
  text-decoration: underline;
}
.topic img {
  vertical-align: middle;
  display: inline-block;
}
.topic_list_wrapper {
  padding-top: 20px;
  border-top: 2px solid #efefef;
}
.topic_list_wrapper dl {
  padding-left: 25px;
}
.topic_list_wrapper dl:not(:last-child) {
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 2px solid #efefef;
}
@media screen and (max-width:420px) {
  .topic_list_wrapper dl {
    padding-left: 0;
  }
  .topic_list_wrapper dl:not(:last-child) {
    padding-left: 0;
    gap: 0.5rem;
    flex-direction: column;
    padding-bottom: 1rem;
  }
}
.topic_list_wrapper dl:last-child {
  padding-bottom: 20px;
  border-bottom: 2px solid #efefef;
}
.topic_list_wrapper dl dt.topic_date {
  color: #125796;
  font-size: 1.4rem;
  font-weight: bold;
  letter-spacing: 0.1em;
}
.topic_list_wrapper dl dd p.topic_title a {
  text-decoration: underline;
}
.topic_list_wrapper dl dd p.topic_title a:hover {
  text-decoration: none;
}
.topic_list_wrapper dl dd p.topic_title {
  font-weight: bold;
  font-size: 1.5rem;
  line-height: 1.4;
  margin-bottom: 5px;
}
.topic_list_wrapper dl dd p.topic_title .topic_icon {
  width: auto;
  height: 18px;
  padding-left: 3px;
}
.topic_list_wrapper dl dd p.topic_text {
  font-size: 1.3rem;
  line-height: 1.4;
  padding-right: 10px;
  /* display: none; */
}
/*-------------
        SP
---------------*/
@media screen and (max-width: 420px) {
  .topic_list_wrapper dl dt.topic_date {
    font-size: 1.2rem;
  }
  .topic_list_wrapper dl dd p.topic_title {
    font-size: 1.4rem;
  }
  .topic_list_wrapper dl dd p.topic_text {
    font-size: 1.2rem;
    /* display: none; */
  }
}
/*=========================

  トップページ　緊急枠

==========================*/
#info_outer {
  padding: 50px 0 0;
}
#info_outer .info_box {
  max-width: 960px;
  width: 100%;
  margin: 0px auto;
  position: relative;
}
#info_outer .info_box .n_tit {
  position: absolute;
  left: 0;
  top: 20px;
  font-size: 1.9rem;
  color: #9D833E;
  letter-spacing: 0.05em;
}
#info_outer .info_box .n_tit::after {
  content: "";
  position: absolute;
  height: 1px;
  background: #CCCCCC;
  right: 0px;
  bottom: -5px;
  left: -500%;
  z-index: 0;
}
#info_outer .info_box .info_body {
  width: 850px;
  background: #EAFBF9;
  margin: 0 0 0 auto;
  padding: 30px 50px 30px 80px;
}
#info_outer .info_box .info_body dl:not(:first-child) {
  margin-top: 20px;
}
#info_outer .info_box .info_body .topic_date {
  font-size: 1.4rem;
  color: #aaa;
}
#info_outer .info_box .info_body .topic_title {
  font-size: 1.5rem;
  font-weight: bold;
}
#info_outer .info_box .info_body .topic_title img {
  width: auto;
  height: 20px;
  margin-left: 1%;
}
#info_outer .info_box .info_body .topic_text {
  font-size: 1.3rem;
}
#info_outer .info_box .info_body a {
  text-decoration: underline;
}
#info_outer .info_box .info_body a:hover {
  text-decoration: none;
}
@media screen and (max-width: 420px) {
  #info_outer {
    padding: 50px 0 0;
  }
  #info_outer .info_box {
    max-width: 960px;
    width: 88%;
    position: relative;
  }
  #info_outer .info_box .n_tit {
    top: -10px;
    font-size: 1.4rem;
  }
  #info_outer .info_box .info_body {
    width: auto;
    padding: 35px 25px 20px;
  }
  #info_outer .info_box .n_tit::after {
    bottom: 0;
  }
  #info_outer .info_box .info_body .topic_date {
    font-size: 1.2rem;
  }
  #info_outer .info_box .info_body .topic_title {
    font-size: 1.4rem;
  }
  #info_outer .info_box .info_body .topic_title img {
    padding-left: 1%;
  }
  #info_outer .info_box .info_body .topic_text {
    font-size: 1.2rem;
  }
}
/*=========================

  ポップアップ

==========================*/
.topic-pop #contents {
  text-align: left;
  width: 88%;
  margin: auto;
  padding: 30px 0 50px;
}
.topic-pop strong {
  font-weight: bold;
}
.topic-pop em {
  font-style: italic;
}
.topic-pop u {
  text-decoration: underline;
}
.topic-pop .topic-pop_title {
  font-size: 1.6rem;
  font-weight: bold;
  color: #fff;
  line-height: 1.4;
  padding: 8px 15px;
  background: #01BFF2;
  margin-bottom: 5px;
}
.topic-pop .topic-pop_date {
  text-align: right;
  color: #01BFF2;
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 15px;
}
.topic-pop .topic-pop_flex {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.topic-pop .topic-pop_flex .left {
  width: 35%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 15px 0;
}
.topic-pop .topic-pop_flex .left img {
  width: 100%;
  height: auto;
  transition: all 0.4s ease;
}
.topic-pop .topic-pop_flex .left img:hover {
  opacity: 0.8;
}
.topic-pop .topic-pop_flex .right {
  width: 60%;
}
.topic-pop .topic-pop_flex .right p {
  font-size: 1.4rem;
  margin-bottom: 15px;
}
.topic-pop .topic-pop_text {
  padding: 0 15px;
}
.topic-pop .topic-pop_text p {
  font-size: 1.4rem;
  margin-bottom: 15px;
}
.topic-pop #footer .topic_pop_close {
  text-align: center;
  margin-top: 60px;
}
.topic-pop #footer .topic_pop_close a {
  position: relative;
  padding: 0 1.5em;
  line-height: 1;
  color: #333333 !important;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.2rem;
}
.topic-pop #footer .topic_pop_close a:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 1px;
  height: 100%;
  background: #a9a9a9;
}
.topic-pop #footer .topic_pop_close a:after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 1px;
  height: 100%;
  background: #a9a9a9;
}

.topic_list_wrapper dl {
  display: flex;
  align-items: baseline;
  gap: 26px;
}

@media screen and (max-width:420px) {
  .topic_list_wrapper {
    padding-top: 1rem;
  }
  .topic_list_wrapper dl {
    display: block;
  }
}