@charset "UTF-8";
@import url("global.css");
/* ---------- archive ---------- */
#categorynavi {
  margin-bottom: 100px;
}
#categorynavi ul.topicsnavi {
  width: fit-content;
  margin: 0 auto;
  background-color: #E5DED3;
  padding: 10px 50px;
  -webkit-border-radius: 99px;
  border-radius: 99px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
#categorynavi ul.topicsnavi li {
  letter-spacing: -.4em;
  overflow: hidden;
}
#categorynavi ul.topicsnavi li + li::before {
  content: "/";
  display: inline-block;
  margin: 0 10px;
  color: #A49375;
}
#categorynavi ul.topicsnavi li a {
  display: inline-block;
  letter-spacing: 1px;
  padding: 5px 10px;
  font-weight: 500;
  text-decoration-color: rgba(164, 147, 117, 0.6);
  text-decoration-line: underline;
  text-decoration-thickness: 6px;
  text-underline-offset: 16px;
}
@media (any-hover: hover) {
  #categorynavi ul.topicsnavi li a:hover {
    text-underline-offset: -2px;
  }
}
.cat-all #categorynavi ul.topicsnavi li.all a, .cat-satsumasendai #categorynavi ul.topicsnavi li.satsumasendai a, .cat-izumi #categorynavi ul.topicsnavi li.izumi a, .cat-yatsushiro #categorynavi ul.topicsnavi li.yatsushiro a {
  cursor: default;
  text-underline-offset: -2px;
}

.topicslist {
  border-top: #E3E3E3 solid 1px;
}
.topicslist li {
  border-bottom: #E3E3E3 solid 1px;
}
.topicslist li .inner {
  display: flex;
  align-items: flex-start;
  width: 100%;
  padding: 25px 50px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.topicslist li .inner .postinfo {
  display: flex;
  align-items: center;
}
.topicslist li .inner .postinfo .date {
  font-weight: 700;
  font-family: "Outfit", "Zen Kaku Gothic New", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "游ゴシック Medium", "Yu Gothic Medium", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Meiryo", "メイリオ", Helvetica, sans-serif;
}
.topicslist li .inner .postinfo .area {
  text-align: center;
  margin: 0 35px 0 25px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  width: 110px;
  background-color: #A49375;
  color: #FFF;
}
.topicslist li .inner .posttitle {
  font-weight: 500;
}
.topicslist li a {
  position: relative;
}
.topicslist li a.pdf::after {
  content: "\f1c1";
  font-size: 1.1em;
}
.topicslist li a.blank::after {
  content: "\f35d";
}
.topicslist li a::after {
  content: "\f061";
  position: absolute;
  right: 20px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  margin-top: 1px;
  line-height: 1;
  color: #E5DED3;
  font-family: 'Font Awesome 6 free','Font Awesome 6 Brands';
  font-weight: 900;
}
@media (any-hover: hover) {
  .topicslist li a:hover {
    background-color: rgba(229, 222, 211, 0.5);
  }
}

/* ---------- single ---------- */
#post .postinfo {
  display: flex;
  align-items: center;
}
#post .postinfo .date {
  font-weight: bold;
  font-size: 1.125em;
}
#post .postinfo .area {
  text-align: center;
  margin-left: 25px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  width: fit-content;
  padding: 0 25px;
  background-color: #A49375;
  color: #FFF;
  font-weight: 600;
  font-size: .9em;
}
#post .posttitle {
  font-size: clamp(18px, 2.4vw, 30px);
  font-weight: 500;
  padding: 5px 0 35px;
  border-bottom: #A49375 solid 1px;
  margin-bottom: 60px;
}
#post #postbody {
  text-align: center;
}
#post #postbody:has(.postimg) {
  display: flex;
}
#post #postbody:has(.postimg) .postbody {
  display: block;
  width: 50%;
}
#post #postbody .postbody {
  display: inline-block;
  text-align: justify;
}
#post #postbody .postbody .pdfbtn {
  margin-top: 50px;
}
#post #postbody .postbody .pdfbtn a {
  display: block;
  border: #E5DED3 1px solid;
  color: #A49375;
  padding: 15px 25px;
  position: relative;
  font-weight: 500;
  font-size: .9em;
}
#post #postbody .postbody .pdfbtn a::before {
  content: "\f1c1";
  display: inline-block;
  margin: 0 10px 0 0;
  font-family: 'Font Awesome 6 free','Font Awesome 6 Brands';
  font-weight: 900;
}
#post #postbody .postimg {
  width: 50%;
  padding-left: 5vw;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

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

 Responsive-Breakpoint-1 ( 1600px )
 
------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-2 ( 1300px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 1300px) {
  /* ---------- archive ---------- */
  #categorynavi ul.topicsnavi {
    padding: 8px 45px;
  }

  .topicslist li .inner {
    padding: 20px 35px;
  }
  .topicslist li .inner .postinfo .area {
    margin: 0 25px 0 15px;
  }

  /* ---------- single ---------- */
  #post .postinfo .area {
    margin: 0 25px 0 15px;
  }
  #post .posttitle {
    padding: 5px 0 25px;
    margin-bottom: 45px;
  }
  #post #postbody .postimg {
    padding-left: 4vw;
  }
}
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-3 ( 959px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 959px) {
  /* ---------- archive ---------- */
  #categorynavi {
    margin-bottom: 60px;
  }
  #categorynavi ul.topicsnavi {
    padding: 8px 40px;
  }
  #categorynavi ul.topicsnavi li + li::before {
    margin: 0 8px;
  }

  .topicslist li .inner {
    align-items: center;
    padding: 20px 25px;
  }
  .topicslist li .inner .postinfo .area {
    margin: 0 15px 0 10px;
    width: 94px;
  }

  /* ---------- single ---------- */
  #post .postinfo .area {
    margin: 0 15px 0 10px;
    padding: 0 20px;
  }
  #post .posttitle {
    padding: 5px 0 20px;
    margin-bottom: 30px;
  }
  #post #postbody .postbody .pdfbtn {
    margin-top: 45px;
  }
  #post #postbody .postbody .pdfbtn a {
    padding: 15px 20px;
  }
  #post #postbody .postimg {
    padding-left: 3.6vw;
  }
}
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-4 ( 644px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 644px) {
  /* ---------- archive ---------- */
  #categorynavi {
    margin-bottom: 45px;
  }
  #categorynavi ul.topicsnavi {
    padding: 7px 35px;
  }
  #categorynavi ul.topicsnavi li + li::before {
    margin: 0 5px;
  }
  #categorynavi ul.topicsnavi li + li:nth-child(2)::before {
    display: none;
  }
  #categorynavi ul.topicsnavi li:first-child {
    width: 100%;
    text-align: center;
  }
  #categorynavi ul.topicsnavi li a {
    letter-spacing: 0;
    padding: 3px 6px;
    text-decoration-thickness: 4px;
    text-underline-offset: 14px;
  }
}
@media only screen and (max-width: 644px) and (any-hover: hover) {
  #categorynavi ul.topicsnavi li a:hover {
    text-underline-offset: 0px;
  }
}
@media only screen and (max-width: 644px) {
  .cat-all #categorynavi ul.topicsnavi li.all a, .cat-satsumasendai #categorynavi ul.topicsnavi li.satsumasendai a, .cat-izumi #categorynavi ul.topicsnavi li.izumi a, .cat-yatsushiro #categorynavi ul.topicsnavi li.yatsushiro a {
    text-underline-offset: 0px;
  }

  .topicslist li .inner {
    padding: 15px 10px;
  }
  .topicslist li .inner .postinfo {
    display: block;
    margin-right: 15px;
  }
  .topicslist li .inner .postinfo .date {
    line-height: 1;
    margin-bottom: 3px;
  }
  .topicslist li .inner .postinfo .area {
    display: block;
    margin: 0;
    width: auto;
    font-size: 10px;
    letter-spacing: 0;
  }

  /* ---------- single ---------- */
  #post .posttitle {
    padding: 0 0 15px;
    margin-bottom: 25px;
  }
  #post #postbody {
    text-align: justify;
  }
  #post #postbody:has(.postimg) {
    display: block;
  }
  #post #postbody:has(.postimg) .postbody {
    width: auto;
  }
  #post #postbody .postbody {
    display: block;
  }
  #post #postbody .postbody .pdfbtn {
    margin-top: 30px;
  }
  #post #postbody .postbody .pdfbtn a {
    padding: 12px 16px;
  }
  #post #postbody .postimg {
    width: auto;
    padding: 30px 0 0;
  }
}

/*# sourceMappingURL=topics.css.map */