@charset "UTF-8";

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

トピックス一覧

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

#topics .page-fv {
  margin: 0;
}
#topics .page-container {
  padding-top: 0;
}
#topics .page-bg-trans {
  padding: 0;
}

.topics-content {
  padding: 5rem 0 0;
}
.topics-wrap {
  margin-bottom: 5rem;
}
.topics-box {
  padding: 3rem 0;
  border-bottom: 0.1rem #ccc solid;
}
.topics-box .topics-dc {
  display: flex;
  align-items: center;
  line-height: 1;
  margin-bottom: 1em;
}
.topics-box .date {
  font-family: "Figtree", sans-serif;
  font-size: 1.4rem;
  color: var(--blue);
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}
.topics-box .cate {
  text-align: center;
  margin-left: 1em;
}
.topics-box .cate {
  display: block;
  font-size: 1.2rem;
  color: var(--blue);
  font-weight: 700;
  border: 0.1rem var(--blue) solid;
  padding: 0.1rem 1.5rem;
  border-radius: 1.5rem;
}
.topics-box p.title a {
  display: block;
  padding-right: 2em;
  position: relative;
}
.topics-box p.title a:hover {
  color: var(--blue);
}
.topics-box p.title a::after {
  content: "";
  display: block;
  width: 1.8rem;
  height: 1.8rem;
  background: url(../img/btn-ar-bl-bg-bl.svg) no-repeat;
  position: absolute;
  top: 0.3rem;
  right: 0;
  transition: .5s;
}
.topics-box p.title a:hover::after {
  background: url(../img/btn-ar-wh-bg-bl.svg) no-repeat;
}


/* ページネーション ------　*/
.page-nation {
  color: var(--blue);
  font-weight: 500;
}
.page-nation a {
  color: var(--blue);
}
.page-nation ul {
  display: flex;
  justify-content: center;
  align-items: center;
}
.page-nation li {
  padding: 0 0.5rem;
}
.page-nation li a,
.page-nation li.current span {
  display: block;
  width: 3rem;
  height: 3rem;
  text-align: center;
  line-height: 1;
  padding-top: 0.5rem;
  border: 0.2rem var(--blue) solid;
  border-radius: 0.5rem;
}
.page-nation li.prev,
.page-nation li.next {
  position: relative;
}
.page-nation li.prev a,
.page-nation li.next a {
  width: auto;
  height: auto;
  padding-top: 0.3rem;
  white-space: nowrap;
  border: none;
}
.page-nation li.prev a::before {
  content: "←";
  padding-right: 0.3rem;
}
.page-nation li.next a::after {
  content: "→";
  padding-left: 0.3rem;
}
.page-nation li.skip {
  letter-spacing: -0.5em;
  padding: 0 0.5rem 0 0;
}
.page-nation li.current span {
  background: var(--blue);
  color: #fff;
}



/*----------------------------------------------------
SP 374 ↓
----------------------------------------------------*/
@media only screen and (max-width: 374px) {

  /* ページネーション ------　*/
  .page-nation {
    font-size: 1.4rem;
  }
  .page-nation li a,
  .page-nation li.current span {
    padding-top: 0.6rem;
  }


}



/*----------------------------------------------------
タブレット・PC用
----------------------------------------------------*/
@media only screen and (min-width: 750px) {

  .topics-box {
    display: flex;
    align-items: flex-start;
  }
  .topics-box .topics-dc {
    padding-top: 0.3rem;
  }
  .topics-box .date {
    width: 9rem;
  }
  .topics-box .cate {
    width: 8.5rem;
    margin-left: 0;
  }
  .topics-box p.title {
    width: calc(100% - 18rem);
    padding-left: 2rem;
  }


}



/*----------------------------------------------------
PC 1000-
----------------------------------------------------*/
@media only screen and (min-width: 1000px) {

  .topics-content {
    padding: 10rem 0 5rem;
  }

  .topics-box .date {
    width: 10rem;
  }
  .topics-box p.title {
    width: calc(100% - 19rem);
    padding-left: 3rem;
  }
  .topics-box p.title a {
    padding-right: 3em;
  }

  

}



/*----------------------------------------------------
PC 1200-
----------------------------------------------------*/
@media only screen and (min-width: 1200px) {

  .topics-box p.title a {
    padding-right: 4em;
    margin-right: 2em;
  }





}



/*----------------------------------------------------
PC 1400-
----------------------------------------------------*/
@media only screen and (min-width: 1400px) {

  .topics-content {
    padding: 10rem 0 0;
  }

  .topics-wrap {
    margin-bottom: 8rem;
  }
  .topics-box {
    padding: 5rem 0;
  }
  .topics-box .date {
    width: 15rem;
    font-size: 1.8rem;
    padding-left: 1.5rem;
  }
  .topics-box .cate {
    width: 11rem;
  }
  .topics-box .cate {
    font-size: 1.4rem;
    padding: 0.5rem 1.5rem;
  }
  .topics-box p.title {
    font-size: 2.1rem;
    width: calc(100% - 26rem);
    padding-left: 5rem;
  }
  .topics-box p.title a::after {
    width: 2.4rem;
    height: 2.4rem;
  }


  /* ページネーション ------　*/
  .page-nation {
    font-size: 2.4rem;
  }
  .page-nation li {
    padding: 0 1rem;
  }
  .page-nation li a,
  .page-nation li.current span {
    width: 6rem;
    height: 6rem;
    padding-top: 1.7rem;
  }
  .page-nation li.prev,
  .page-nation li.next {
    font-size: 2.1rem;
  }
  .page-nation li.prev {
    padding-right: 5rem;
  }
  .page-nation li.next {
    padding-left: 5rem;
  }
  .page-nation li.skip {
  padding: 0 1rem 0 0;
}


}



/*----------------------------------------------------
PC 1600-
----------------------------------------------------*/
@media only screen and (min-width: 1600px) {}









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

個別記事（トピック）

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

.topic-content {
  max-width: 109rem;
  padding: 5rem 0 0;
  margin: 0 auto;
}
.topic-box {
  padding: 3rem 0 10rem;
}
.topic-box .topic-dc {
  display: flex;
  line-height: 1;
  margin-bottom: 2.5rem;
}
.topic-box .topic-dc .date {
  font-family: "Figtree", sans-serif;
  font-size: 1.6rem;
  color: var(--blue);
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}
.topic-box .topic-dc .cate {
  margin-left: 1em;
}
.topic-box .topic-dc .cate {
  display: block;
  font-size: 1.2rem;
  color: var(--blue);
  font-weight: 700;
  border: 0.1rem var(--blue) solid;
  padding: 0.1rem 1.5rem;
  border-radius: 1.5rem;
}
.topic-box h3 {
  font-size: 2rem;
  font-weight: 500;
  padding-bottom: 3rem;
  border-bottom: 0.1rem #ccc solid;
  margin-bottom: 3rem;
}
.topic-txt {
  overflow-wrap: break-word;
}
.topic-txt a {
  color: var(--blue);
  text-decoration: underline;
}

.topic-btn {
  width: 22rem;
  margin: 0 auto;
}

/*--------------------------
[青⇐白]（右から左へ動く）
---------------------------*/

/*[青⇐白] SP ------*/
.topic-btn .button-link {
  display: block;
  color: #fff;
  border-radius: 0.5rem;
  background: var(--blue) url(../img/btn-arbk-blround-bg-bgwh.svg) no-repeat 10% center;
  background-size: 1.8rem;
  transition: .3s;
}
.topic-btn .button-text {
  display: block;
  font-weight: 700;
  text-align: right;
  padding: 1.4rem 3rem;
}
.topic-btn .button-text:hover {
  color: var(--blue);
}
/* 色変化 ------------- */
.topic-btn .bg-extend-right {
  border: 1px solid var(--blue);
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.topic-btn .bg-extend-right::before {
  content: '';
  width: 100%;
  height: 100%;
  background: #fff url(../img/btn-arbk-blround-bg-bgwh.svg) no-repeat 10% center;
  background-size: 2rem;  
  position: absolute;
  right: -100%;
  top: 0;
  transition: .2s;
  z-index: -1;
}
.topic-btn .bg-extend-right:hover::before {
  right: 0;
}



@media screen and (min-width:1000px) {

  .topic-content {
    padding: 10rem 0 5rem;
  }

  /* [青⇐白] PC 1000 -----------*/
  .topic-btn .button-link {
    border-radius: 1rem;
    background-color: var(--blue);
    background-size: 2.4rem;
  }
  .topic-btn .bg-extend-right::before {
    background-color: #fff;
    background-size: 2.6rem;
  }

}



@media screen and (min-width:1400px) {

  .topic-btn {
    width: 32rem;
  }
  .topic-btn .button-text {
    font-size: 2.1rem;
    padding: 1.4rem 5rem;
  }

  /* [青⇐白] PC 1400 -----------*/
  .topic-btn .button-link {
    background-size: 3rem;
  }
  .topic-btn .bg-extend-right::before {
    background-size: 3.2rem;
  }





}