@charset "UTF-8";
@import url("base_three.css");
:root {
  --bg: #dbe4e7;
  --text-primary: #333d41;
  --primary: #21436f;
  --secondary: #f00;
  --accent: #ff3e42;
}

/* ==========================================
全体設定・CSS変数
========================================== */
:root {
  --folder-bg: rgba(255,255,255,.56); /* フォルダの背景色 */
  --text-title: #284e78;
  --text-date: #7293BE;
}

@media screen and (max-width: 768px) {
  :root {
    --folder-radius: 20px;
  }
}
@media screen and (min-width: 769px) {
  :root {
    --folder-radius: 20px;
  }
}
/* ==========================================
画面幅依存の倍率設定
========================================== */
:root {
  --fluid-w: 375;
}

@media screen and (min-width: 769px) {
  :root {
    --fluid-w: 1381;
  }
}
/* ==========================================
共通部分のオーバーライド
========================================== */
@media screen and (min-width: 769px) {
  .header_main {
    padding-bottom: 5.3440702782vw;
  }
}
@media screen and (max-width: 768px) {
  .header_main {
    padding-bottom: 26.6666666667vw;
  }
}

/* ==========================================
記事詳細
========================================== */
main {
  padding: 0 6.0761346999vw;
}

.topics-entry {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

/* ==========================================
タブデザイン（SVGパス結合方式）
========================================== */
/* フォルダコンテンツ ***************************************************/
/* フォルダコンテンツの共通設定 */
.topics-entry-content {
  background-color: var(--folder-bg);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  position: relative;
  z-index: 1;
}
@media screen and (min-width: 769px) {
  .topics-entry-content {
    padding: 4.6120058565vw 6.588579795vw 6.588579795vw; /* フォルダ内の余白（可変） */
  }
}
@media screen and (max-width: 768px) {
  .topics-entry-content {
    padding: 6.9333333333vw 8vw 16vw;
  }
}
.topics-entry-content .post-title {
  color: var(--text-title);
  line-height: 1.4;
}
.topics-entry-content .post-body p {
  color: var(--text-main);
  line-height: 1.8;
  margin: 0;
  /* リキッドレイアウトにおいて両端揃えにすると綺麗に見えます */
  text-align: justify;
  font-weight: bold;
  letter-spacing: 0.01em;
}
@media screen and (min-width: 769px) {
  .topics-entry-content .post-body p {
    font-size: 1.1713030747vw;
  }
}
@media screen and (max-width: 768px) {
  .topics-entry-content .post-body p {
    font-size: 4.2666666667vw;
  }
}

@media screen and (max-width: 768px) {
  .topics-entry-content {
    border-radius: 0 var(--folder-radius) var(--folder-radius) var(--folder-radius);
  }
  .topics-entry-content .post-date {
    margin-bottom: 7.4666666667vw;
  }
  .topics-entry-content .post-title {
    margin: 0 0 15.4666666667vw 0;
    font-size: 4.8vw;
  }
  .topics-entry-content .post-body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 4vw;
  }
  .topics-entry-content .post-image {
    margin-top: 6vw;
  }
}
@media screen and (min-width: 769px) {
  .topics-entry-content {
    border-radius: 0 var(--folder-radius) var(--folder-radius) var(--folder-radius);
  }
  .topics-entry-content .post-date {
    margin-bottom: 2.4890190337vw;
  }
  .topics-entry-content .post-title {
    margin: 0 0 3vw 0;
    letter-spacing: 0.08em;
    font-size: 2.635431918vw;
  }
  .topics-entry-content .post-body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 2vw;
  }
  .topics-entry-content .post-image {
    margin-top: 4vw;
  }
}
/* 一覧に戻るボタン ***************************************************/
.topics-entry-bottombutton {
  position: relative;
  display: block;
  z-index: 1;
  padding-top: calc(50 / var(--fluid-w) * 100vw);
  padding-bottom: calc(140 / var(--fluid-w) * 100vw);
}
.topics-entry-bottombutton .btn {
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  border-radius: 100vmax;
  background-color: #fff;
  font-weight: 700;
  color: var(--primary);
}
.topics-entry-bottombutton .btn::before {
  content: "";
  border-radius: 50%;
  background-color: #fff;
}

@media screen and (min-width: 769px) {
  .topics-entry-bottombutton .btn {
    width: 17.4904831625vw;
    height: 5.1636896047vw;
    padding: 0 2.8184480234vw 0 2.9282576867vw;
    font-size: 0.9516837482vw;
  }
  .topics-entry-bottombutton .btn::before {
    width: 2.2693997072vw;
    height: 2.2693997072vw;
    border: 0.878477306vw solid var(--primary);
  }
}
@media screen and (max-width: 768px) {
  .topics-entry-bottombutton .btn {
    width: 60.5333333333vw;
    height: 20.2666666667vw;
    padding: 0 8.2666666667vw;
    font-size: 3.4666666667vw;
  }
  .topics-entry-bottombutton .btn::before {
    width: 8.2666666667vw;
    height: 8.2666666667vw;
    border: 3.2vw solid var(--primary);
  }
}
/* ==========================================
記事一覧
========================================== */
/* 記事リスト全体 */
.topics-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 32px; /* 記事同士の縦の隙間 */
  list-style: none;
  padding: 0;
  margin: 0;
}

/* リストアイテムデザイン（横長タブとコンテンツ）*/
.topics-list-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  /* contents部分 ***********************************************/
}
.topics-list-box__content {
  background-color: rgba(255, 255, 255, 0.56);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  position: relative;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; /* タイトルとボタンを横並びにするため */
  /* --- テキスト・ボタン要素 --- */
  /* 同名クラスの競合を防ぐため、親要素を指定 */
}
.topics-list-box__content .post-date {
  position: relative;
  z-index: 3; /* 背景・3Dパーツより上に配置 */
  color: #6385a6;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.topics-list-box__content .post-title {
  margin: 0;
  color: var(--text-primary);
  line-height: 1.5;
  font-family: "Zen Kaku Gothic New", sans-serif;
  overflow-wrap: anywhere; /*アルファベットを連続で並べ連なる文言が入った時の対処*/
}
.topics-list-box__content .post-title a {
  color: inherit;
  text-decoration: none;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
.topics-list-box__content .post-title a:hover {
  opacity: 0.7;
}
.topics-list-box__content .view-more {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  color: var(--primary);
  text-decoration: none;
  font-weight: bold;
  white-space: nowrap;
  -ms-flex-negative: 0;
      flex-shrink: 0; /* タイトルが長くてもボタンが潰れないようにする */
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
.topics-list-box__content .view-more:hover {
  opacity: 0.7;
}

@media screen and (max-width: 768px) {
  :root {
    --slope-angle: 25deg;
    --fillet-radius: 14px;
    --overlap: 12px;
    --corner-smoothing: 6px;
  }
}
@media screen and (min-width: 769px) {
  :root {
    --slope-angle: 25deg;
    --fillet-radius: 20px;
    --overlap: 16px;
    --corner-smoothing: 8px;
  }
}
/* タブ要素 ***********************************************/
.topics-tab {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  z-index: 2;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
.topics-tab-main {
  background-color: var(--folder-bg);
  height: 30px;
  width: 80px;
  border-radius: var(--folder-radius) 0 0 0;
}
.topics-tab-date {
  position: absolute;
  left: 30px;
  bottom: 0;
}
@media screen and (max-width: 768px) {
  .topics-tab-date {
    left: 20px;
    bottom: 0;
    margin-left: 0;
    margin-bottom: 0;
  }
}
.topics-tab .tab-curve {
  height: 30px;
  width: 70px;
  color: var(--folder-bg);
  display: block;
}
.topics-tab .sp-curve {
  display: none;
}

.topics-tab-date,
.post-date {
  font-size: 11px;
  letter-spacing: 0;
  color: var(--text-date);
  font-family: "Albert Sans", sans-serif;
  font-weight: 600;
  line-height: 1;
  display: block;
}

@media screen and (max-width: 768px) {
  .topics-tab-main {
    height: 34px;
    width: 50px;
    border-radius: var(--folder-radius) 0 0 0;
  }
  .topics-tab .tab-curve {
    height: 34px;
    width: 90px;
  }
  .topics-tab .pc-curve {
    display: none;
  }
  .topics-tab .sp-curve {
    display: block;
  }
}
@media screen and (max-width: 768px) {
  :root {
    --topicslist-radius: 18px;
  }
  .topics-list {
    gap: 30px;
  }
  .topics-list-box__content {
    border-radius: 0 var(--topicslist-radius) var(--topicslist-radius) var(--topicslist-radius);
    padding: 8vw 5.3333333333vw 5.3333333333vw; /* SPは全体的に余白を広めに */
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column; /* SPは縦並び */
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 20px;
  }
  .topics-list-box__content .post-title a {
    font-size: 10.5pt;
  }
  .topics-list-box__content .view-more {
    font-size: 13px;
    -ms-flex-item-align: end;
        align-self: flex-end; /* SPでは右下に配置 */
  }
}
@media screen and (min-width: 769px) {
  :root {
    --topicslist-radius: 18px;
  }
  .topics-list-box__content {
    border-radius: 0 var(--topicslist-radius) var(--topicslist-radius) var(--topicslist-radius);
    padding: 30px 28px;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between; /* PCは左右に散らす */
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .topics-list-box__content .post-title {
    font-size: 20px;
  }
  .topics-list-box__content .view-more {
    font-size: 9pt;
  }
}
/* ページネーション部分 ***********************************************/
:root {
  --pagination-bg: #cedbe3; /* ページネーションのグレー背景 */
}

/*ページネーション（丸いボタン） */
.topics-pagination {
  text-align: center;
  position: relative;
  z-index: 2;
}
@media screen and (min-width: 769px) {
  .topics-pagination {
    margin-top: 5.8565153734vw;
    margin-bottom: 10.980966325vw;
  }
}
@media screen and (max-width: 768px) {
  .topics-pagination {
    margin-top: 21.3333333333vw;
    margin-bottom: 26.6666666667vw;
  }
}

.nav-links {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px; /* ボタン同士の隙間 */
}

.page-numbers {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background-color: var(--pagination-bg);
  color: var(--text-title);
  text-decoration: none;
  font-weight: bold;
  font-size: 16px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.page-numbers:hover {
  background-color: #b8c8d4; /* ホバー時は少し濃く */
}
.page-numbers {
  /* 現在のページ */
}
.page-numbers.current {
  background-color: #ffffff;
  cursor: default;
}
.page-numbers.current:hover {
  background-color: #ffffff; /* 現在ページはホバー色を変えない */
}
.page-numbers {
  /* 次へ・前への矢印 */
}
.page-numbers.next, .page-numbers.prev {
  background-color: transparent;
  width: auto;
  border-radius: 0;
  padding: 0 5px;
  font-weight: normal;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.page-numbers.next:hover, .page-numbers.next:hover, .page-numbers.prev:hover, .page-numbers.prev:hover {
  background-color: transparent;
  opacity: 0.6;
}/*# sourceMappingURL=skin_topics.css.map */