/*                       topics                        */
#topics,
#topics_detail {
 overflow: visible;
}
#topics .mv_inner,
#topics_detail .mv_inner {
 background-color: #ffd72e;
 padding: min(17rem, calc(170vw / 13.66)) 0 0;
 position: relative;
}
#topics .mv_ttl,
#topics_detail .mv_ttl {
 width: min(29.4rem, calc(294vw / 13.66));
 margin: 0 auto;
}

.page_inner {
 background-color: #ffd72e;
 padding-bottom: min(16rem, calc(160vw / 13.66));
}
.topics_contents {
 width: min(120rem, calc(1200vw / 13.66));
 margin: 0 auto 0;
 display: flex;
 justify-content: space-between;
 padding-top: min(12rem, calc(120vw / 13.66));
}

.topics_side {
 width: min(23rem, calc(230vw / 13.66));
 position: relative;
}

.topics_side_item {
 position: sticky;
 top: 30%;
 text-align: left;
}
.topics_side_ttl {
 font-size: 2rem;
 font-weight: 900;
 letter-spacing: 0.15em;
 margin-bottom: min(2rem, calc(20vw / 13.66));
 border-radius: min(2.4rem, calc(24vw / 13.66));
 background-color: #ffffff;
 padding: min(0.4rem, calc(4vw / 13.66)) min(2rem, calc(20vw / 13.66));
}
.topics_side_menu {
 display: flex;
 flex-direction: column;
 gap: min(1rem, calc(10vw / 13.66)) 0;
}
.topics_side_menu a {
 display: inline-block;
 font-size: 1.6rem;
 font-weight: 700;
 letter-spacing: 0.15em;
 color: #000;
 line-height: 1.85;
 background-color: #ffffff;
 border-radius: min(1.5rem, calc(15vw / 13.66));
 padding: 0 min(1.5rem, calc(15vw / 13.66));
}
.topics_side_menu a.active {
 color: #fff;
 background-color: #333333;
}

.topics_main {
 width: min(91.5rem, calc(915vw / 13.66));
 position: relative;
}
.topics_main_inner {
 box-sizing: border-box;
 background-color: #fff;
 border-radius: min(3rem, calc(30vw / 13.66));
 padding:  min(3rem, calc(30vw / 13.66))  min(3rem, calc(30vw / 13.66)) ;
}
.topics_menu a,
.topics_menu > dl {
 display: block;
 margin-bottom: min(1.5rem, calc(15vw / 13.66));
}

.topics_menu dl {
 display: flex;
 border: min(0.1rem, calc(1vw / 13.66)) solid #333333;
 border-radius: min(0.5rem, calc(5vw / 13.66));
 overflow: hidden;
 padding: min(2rem, calc(20vw / 13.66)) min(1.5rem, calc(15vw / 13.66));
 align-items: baseline;
 justify-content: space-between;
 background-color: #fff;
}

.topics_menu dt {
 width: min(19.5rem, calc(195vw / 13.66));
 font-size: 1.4rem;
 font-weight: 600;
 letter-spacing: 0.1em;
 display: flex;
 justify-content: space-between;
 align-items: center;
 line-height: 1.72;
 color: #000000;
}
.topics_menu dt .tag {
 width: min(6.5rem, calc(65vw / 13.66));
 display: block;
 font-size: 1.2rem;
 color: #fff;
 border-radius: min(0.2rem, calc(2vw / 13.66));
}
.tag_news {
 background-color: #ff5500;
}
.tag_blog {
 background-color: #96bf00;
}
.topics_menu dd {
 width: min(66rem, calc(660vw / 13.66));
 font-size: 1.6rem;
 font-weight: 600;
 line-height: 1.5;
 letter-spacing: 0.1em;
 color: #000000;
 text-align: left;
 box-sizing: border-box;
 display: flex;
 align-items: center;
 justify-content: flex-start;
}

.topics_menu a[target="_blank"] dd::after {
 content: "";
 width: min(2.6rem, calc(26vw / 13.66));
 height: min(1.6rem, calc(16vw / 13.66));
 background: url(../images/common/blank_icon_b.svg) no-repeat;
 background-size: cover;
 margin-left: min(.5rem, calc(5vw / 13.66));
}
.topics_menu a.file_link dd::after {
 content: "";
 width: min(1.6rem, calc(16vw / 13.66));
 height: min(2rem, calc(20vw / 13.66));
 background: url(../images/common/file_icon.svg) no-repeat;
 background-size: cover;
 margin-left: min(.5rem, calc(5vw / 13.66));
}

@media (hover: hover) and (pointer: fine) {
 .topics_side_menu a:where(:any-link, :enabled, summary):hover {
  color: #fff;
  background-color: #333333;
 }
 .topics_menu a:where(:any-link, :enabled, summary):hover {
  opacity: 0.7;
 }
}

@media screen and (max-width: 767px) {
 #topics .mv_inner,
 #topics_detail .mv_inner {
  padding: 11rem 0 0;
 }
 #topics .mv_ttl,
 #topics_detail .mv_ttl {
  width: 15.5rem;
 }

 .page_inner {
  padding-bottom: 9rem;
 }
 .topics_contents {
  width: 33.5rem;
  flex-direction: column-reverse;
  padding-top: 5rem;
  gap: 3rem 0;
 }

 .topics_side {
  width: 100%;
  position: relative;
 }

 .topics_side_item {
  position: relative;
  top: 0;
 }
 .topics_side_ttl {
  font-size: 1.6rem;
 }
 .topics_side_menu {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1rem;
 }
 .topics_side_menu a {
  font-size: 1.2rem;
  padding: 0 1rem;
  line-height: 2;
  border-radius: 1.2rem;
 }

 .topics_main {
  width: 100%;
 }
 .topics_main_inner {
  border-radius: 2rem;
  padding: 2rem 1.2rem ;
 }
 .topics_menu a ,
 .topics_menu > dl {
  margin-bottom: 1rem;
 }
 .topics_menu dl {
  display: flex;
  border: 0.1rem solid #333333;
  border-radius: 0.5rem;
  padding: 1rem 1.2rem;
  flex-direction: column;
  gap: 0.5rem 0;
 }

 .topics_menu dt {
  width: 100%;
  font-size: 1.2rem;
  letter-spacing: 0.08em;
  justify-content: flex-start;
  gap: 0 1.5rem;
 }
 .topics_menu dt .tag {
  width: 6.5rem;
  border-radius: 0.2rem;
 }
 .topics_menu dd {
  width: 100%;
  font-size: 1.2rem;
  line-height: 1.75;
  letter-spacing: 0.08em;
 }

 .topics_menu a[target="_blank"] dd::after {
 width: 1.9rem;
  height: 1.2rem;
 margin-left: .5rem;
}
.topics_menu a.file_link dd::after {
 width: 1.2rem;
  height: 1.5rem;
 margin-left: .5rem;
}
}

/*                       topics_detail                        */

#topics_detail .page_inner {
 padding-bottom: min(38rem, calc(380vw / 13.66));
}
.topics_item_top {
 text-align: justify;
 margin-bottom: min(3.5rem, calc(35vw / 13.66));
}
.topics_item_ttl {
 font-size: 2.4rem;
 font-weight: 900;
 letter-spacing: 0.15em;
 line-height: 1.4;
 margin-bottom: min(1.5rem, calc(15vw / 13.66));
 border: none;
}
.topics_item_date {
 font-size: 1.4rem;
 font-weight: 700;
 letter-spacing: 0.1em;
 display: flex;
 align-items: center;
 gap: 0 min(1.2rem, calc(12vw / 13.66));
 line-height: 1.7;
}
.topics_item_date .tag {
 display: block;
 width: min(6.4rem, calc(64vw / 13.66));
 font-size: 1.2rem;
 color: #fff;
 border-radius: min(0.2rem, calc(2vw / 13.66));
 text-align: center;
}
.tag_news {
 background-color: #ff5500;
}
.tag_blog {
 background-color: #96bf00;
}

.topics_item_txt {
 font-size: 1.6rem;
 font-weight: 500;
 letter-spacing: 0.15em;
 line-height: 2;
 text-align: justify;
 margin-bottom: min(4rem, calc(40vw / 13.66));
}
.topics_item_img {
 width: 100%;
 margin-bottom: min(4rem, calc(40vw / 13.66));
}

.back_btn {
 width: min(25rem, calc(250vw / 13.66));
 margin: min(10rem, calc(100vw / 13.66)) auto 0;
 position: absolute;
 bottom: max(-16rem, calc(-160vw / 13.66));
 left: 0;
 right: 0;
}
.back_btn a {
 display: block;
 width: 100%;
 font-size: 1.6rem;
 font-weight: 900;
 letter-spacing: 0.15em;
 color: #442a25;
 background-color: #fff;
 border-radius: min(3rem, calc(30vw / 13.66));
 border: min(0.2rem, calc(2vw / 13.66)) solid #fff;
 padding: min(1.2rem, calc(12vw / 13.66)) 0;
 position: relative;
 box-sizing: border-box;
 text-align: center;
}
.back_btn a::after {
 content: "";
 width: min(2rem, calc(20vw / 13.66));
 height: min(1.6rem, calc(16vw / 13.66));
 background: url(../images/topics/btn_arrow.svg) no-repeat;
 background-size: cover;
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 right: min(2rem, calc(20vw / 13.66));
}

@media (hover: hover) and (pointer: fine) {
 .back_btn a:where(:any-link, :enabled, summary):hover {
  border-color: #442a25;
 }
}

@media screen and (max-width: 767px) {
 #topics_detail .page_inner {
  padding-bottom: 9rem;
 }
 .topics_item_top {
  margin-bottom: 3rem;
 }
 .topics_item_ttl {
  font-size: 2rem;
  line-height: 1.6;
  margin-bottom: 1rem;
 }
 .topics_item_date {
  letter-spacing: 0.08em;
  gap: 0 1rem;
  line-height: 1.7;
 }
 .topics_item_date .tag {
  width: 6.5rem;
  font-size: 1.2rem;
  border-radius: 0.2rem;
 }

 .topics_item_txt {
  font-size: 1.4rem;
  margin-bottom: 3.5rem;
 }
 .topics_item_img {
  margin-bottom: 3.5rem;
 }

 .back_btn {
  width: 100%;
  margin: 4.5rem auto 0;
  position: static;
 }
 .back_btn a {
  font-size: 1.4rem;
  border-radius: 2rem;
  border: 0.1rem solid #fff;
  padding: 0.5rem 0;
  position: relative;
 }
 .back_btn a::after {
  width: 1.4rem;
  height: 1.1rem;
  right: 1.5rem;
 }
}

h3.detail_heading {
 font-size: 2rem;
 font-weight: 700;
 border-bottom: #ff5500 solid min(0.2rem, calc(2vw / 13.66));
 margin-bottom: min(1.5rem, calc(15vw / 13.66));
 text-align: justify;
}
h4.detail_heading {
 font-size: 1.8rem;
 font-weight: 700;
 margin-bottom: min(1.5rem, calc(15vw / 13.66));
 text-align: justify;
}
h5.detail_heading {
 font-size: 1.8rem;
 font-weight: 500;
 margin-bottom: min(1.5rem, calc(15vw / 13.66));
 text-align: justify;
}

.imgleft,
.imgright,
.imgcenter {
 display: flex;
 align-items: flex-start;
 justify-content: space-between;
 margin-bottom: min(4rem, calc(40vw / 13.66));
}
.imgright {
 flex-direction: row-reverse;
}
.imgcenter {
 justify-content: center;
}
.detail_text,
.detail_html {
 font-size: 1.6rem;
 font-weight: 500;
 letter-spacing: 0.15em;
 line-height: 2;
 text-align: justify;
}
.detail_html img {
 max-width: 100%;
 width: revert-layer !important;
}
.topics_item > .detail_text,
.topics_item > .detail_html {
 margin-bottom: min(4rem, calc(40vw / 13.66));
}
.min .detail_text {
 width: 68%;
}
#topics_detail .min img {
 width: 28%;
}
.mid .detail_text {
 width: 48%;
}
#topics_detail .mid img {
 width: 48%;
}
.max .detail_text {
 width: 28%;
}
#topics_detail .max img {
 width: 68%;
}

.detail_link a,
.detail_file a {
 font-size: 1.6rem;
 font-weight: 500;
 letter-spacing: 0.1em;
 line-height: 2;
 text-align: justify;
 display: flex;
 align-items: center;
 gap: 0 min(1rem, calc(10vw / 13.66));
 color: #000;
 font-weight: 500;
 text-decoration: underline;
 margin-bottom: min(4rem, calc(40vw / 13.66));
}
.detail_link a[target="_blank"]::after{
 content: "";
 width: min(2.6rem, calc(26vw / 13.66));
 height: min(1.6rem, calc(16vw / 13.66));
 background: url(../images/common/blank_icon_b.svg) no-repeat;
 background-size: cover;
}
.detail_file a::after {
 content: "";
 width: min(1.6rem, calc(16vw / 13.66));
 height: min(2rem, calc(20vw / 13.66));
 background: url(../images/common/file_icon.svg) no-repeat;
 background-size: cover;
}
hr {
 margin: min(4rem, calc(40vw / 13.66)) 0;
 border: none;
 border: min(0.1rem, calc(1vw / 13.66)) solid #000;
}

@media (hover: hover) and (pointer: fine) {
 .detail_link a:where(:any-link, :enabled, summary):hover,
 .detail_file a:where(:any-link, :enabled, summary):hover {
  text-decoration: none;
 }
}

@media screen and (max-width: 767px) {
 h3.detail_heading {
  font-size: 1.8rem;
  border-bottom: #ff5500 solid 0.2rem;
  margin-bottom: 3.5rem;
 }
 h4.detail_heading {
  font-size: 1.6rem;
  margin-bottom: 3.5rem;
 }
 h5.detail_heading {
  font-size: 1.6rem;
  margin-bottom: 3.5rem;
 }

 .imgleft,
 .imgright,
 .imgcenter {
  margin-bottom: 3.5rem;
  flex-direction: column;
  gap: 3rem 0;
 }
 .imgright {
  flex-direction: column;
 }
 .imgcenter {
  align-items: center;
 }
 .detail_text,
 .detail_html {
  font-size: 1.4rem;
 }
 .topics_item > .detail_text,
 .topics_item > .detail_html {
  margin-bottom: 3.5rem;
 }
 .min .detail_text {
  width: 100%;
 }
 #topics_detail .min img {
  width: 100%;
 }
 .mid .detail_text {
  width: 100%;
 }
 #topics_detail .mid img {
  width: 100%;
 }
 .max .detail_text {
  width: 100%;
 }
 #topics_detail .max img {
  width: 100%;
 }

 .detail_link a,
 .detail_file a {
  font-size: 1.4rem;
  gap: 0 0.5rem;
  margin-bottom: 3.5rem;
 }
 .detail_link a[target="_blank"]::after{
  width: 1.9rem;
  height: 1.2rem;
 }
 .detail_file a::after {
  width: 1.4rem;
  height: 1.8rem;
 }
 hr {
  margin: 3.5rem 0;
  border: .1rem solid #000;
 }
}



.pager {
 display: flex;
 justify-content: center;
 align-items: center;
 gap: 0  min(1rem, calc(10vw / 13.66));
 margin-top: min(6rem, calc(60vw / 13.66));
}
.pager li {
 width: min(3.4rem, calc(34vw / 13.66));
 height: min(3.4rem, calc(34vw / 13.66));
 box-sizing: border-box;
}
.pager li a{
 width: 100%;
 height: 100%;
 display: flex;
 align-items: center;
 justify-content: center;
 box-sizing: border-box;
 font-size: 1.6rem;
 font-weight: 600;
 color: #000;
 background-color: #fff;
 border-radius: 50%;
}

.pager li.prev ,
.pager li.next  {
 position: relative;
 margin: 0 min(1rem, calc(10vw / 13.66));
}
.pager li.prev a,
.pager li.next a{
 font-size: 0;
 background-color: transparent;
 position: relative;
}
.pager li.prev a::before,
.pager li.next a::before{
 content: '';
 width: min(1.4rem, calc(14vw / 13.66));
 height: min(1.6rem, calc(16vw / 13.66));
 background: url(../images/topics/pager_arrow.svg) no-repeat;
 background-size: cover;
}
.pager li.prev a::before  {
 transform: scale(-1,1);
}

@media (hover: hover) and (pointer: fine) {
 .pager a:where(:any-link, :enabled, summary):hover {
  background-color: #000;
  color: #fff;
 }
 .pager .prev a:where(:any-link, :enabled, summary):hover ,
 .pager .next a:where(:any-link, :enabled, summary):hover {
  background-color: #fff;
 }
}


@media screen and (max-width: 767px) {
 .pager {
 gap: 0  .8rem;
 margin-top:3.5rem;
}
.pager li {
 width:3rem;
 height:3rem;
}
.pager li a{
 font-size: 1.2rem;
}

.pager li.prev ,
.pager li.next  {
 margin: 0 .3rem;
}
.pager li.prev a::before,
.pager li.next a::before{
 width:1.2rem;
 height: 1.3rem;
}

}