@charset "UTF-8";
/* =========================
変数 
============================*/
body {
  --s-val: 10px;
  --max-w-menu: 1635px;
  --w-menu: 87vw;
  --base-color: #000;
  --base-color-2: #555;
  --color-dark-blue: #052850;
  --border-color: #555;
  --color-bg-main: #E7E4DD;
  --color-bg-gray: #F7F7F7;
}

/* レスポンシブ */
@media screen and (max-width: 767px) {
  body {
    --s-val: 9px;
  }
}
@media screen and (max-width: 540px) {
  body {
    --w-menu: 100%;
  }
}
/* === このCSSは全ページ共通です === */
/* =========================
共通 
============================*/
body {
  --page-pdg-inline: calc(var(--s-val) * 2);
  --max-w-out: calc(1200px + calc(var(--page-pdg-inline) * 2));
  --max-w-in: calc(1100px + calc(var(--page-pdg-inline) * 2));
  --max-w-offset: calc(1320 / 1440 * 100%);
  --color-bg-main-txt: #C7C7C7;
  --border-position: 8.3vw;
}

.page-main img {
  display: block;
}

/* 記事共通 ============== */
.column {
  width: calc(33.33% - var(--s-val) * 1.67);
  min-width: 200px;
  background-color: rgb(255, 255, 255);
}
.column__thumb {
  width: 100%;
  aspect-ratio: 700/596;
  overflow: hidden;
}
.column__thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
.column__info {
  -webkit-margin-before: calc(var(--s-val) * 2);
          margin-block-start: calc(var(--s-val) * 2);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: calc(var(--s-val) * 2);
}
.column__category {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: calc(var(--s-val) * 0.5);
}
.column__category-item {
  font-size: calc(var(--s-val) * 1.4);
  background-color: #eee;
  padding: calc(var(--s-val) * 0.3) calc(var(--s-val) * 1);
}
.column__title {
  font-size: calc(var(--s-val) * 2);
  font-weight: 600;
  line-height: 1.5em;
  -webkit-margin-before: calc(var(--s-val) * 2.8);
          margin-block-start: calc(var(--s-val) * 2.8);
}
.column__catch {
  -webkit-margin-before: calc(var(--s-val) * 1.7);
          margin-block-start: calc(var(--s-val) * 1.7);
  line-height: 1.5em;
}
.column__cta {
  max-width: 129px;
  width: 100%;
  border: 1px solid var(--base-color);
  font-size: calc(var(--s-val) * 1.4);
  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;
  gap: calc(var(--s-val) * 0.8);
  padding: calc(var(--s-val) * 0.8) calc(var(--s-val) * 1);
  -webkit-margin-before: calc(var(--s-val) * 3);
          margin-block-start: calc(var(--s-val) * 3);
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.column__cta::after {
  content: "";
  display: block;
  width: 7px;
  aspect-ratio: 1/1;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.column__cta:hover {
  color: #fff;
  background-color: var(--base-color-2);
  border: 1px solid var(--base-color-2);
}

/* レスポンシブ ============= */
@media screen and (max-width: 767px) {
  .column {
    width: calc(50% - var(--s-val) * 1.25);
  }
  .column__info {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: calc(var(--s-val) * 0.5);
  }
  .column__title {
    -webkit-margin-before: 7%;
            margin-block-start: 7%;
  }
  .column__catch {
    -webkit-margin-before: 3.5%;
            margin-block-start: 3.5%;
  }
}
@media screen and (max-width: 540px) {
  .column {
    background: none;
    width: 100%;
  }
  .column__info {
    -webkit-margin-before: 4%;
            margin-block-start: 4%;
  }
  .column__cta {
    -webkit-margin-before: 7%;
            margin-block-start: 7%;
  }
}
/* =========================
archive-top 
============================*/
.archive-top {
  border-bottom: 1px solid var(--border-color);
  padding: 0 0 calc(var(--s-val) * 6.3) var(--page-pdg-inline);
  position: relative;
}
.archive-top::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--color-bg-main);
  position: absolute;
  top: 0;
  left: 0;
  z-index: -10;
}
.archive-top__lead {
  -webkit-padding-start: calc(var(--s-val) * 5);
          padding-inline-start: calc(var(--s-val) * 5);
  width: 92.7%;
  margin-inline: auto 0;
  position: relative;
}
.archive-top__lead::after {
  content: "";
  display: block;
  width: 1px;
  height: 335%;
  background-color: var(--border-color);
  position: absolute;
  top: calc(var(--s-val) * 1.2);
  left: 0;
  z-index: -1;
}
.archive-top__heading {
  font-size: calc(var(--s-val) * 4);
  color: var(--color-dark-blue);
}
.archive-top__content {
  -webkit-margin-before: calc(var(--s-val) * 1);
          margin-block-start: calc(var(--s-val) * 1);
}

/* レスポンシブ ============= */
@media screen and (max-width: 540px) {
  .archive-top__heading {
    font-size: calc(var(--s-val) * 3.5);
  }
  .archive-top__lead {
    padding-inline: calc(var(--s-val) * 2.5) calc(var(--s-val) * 2);
    width: 100%;
  }
  .archive-top__lead::after {
    height: 210%;
  }
  .archive-top__content {
    max-width: 370px;
  }
}
/* =========================
人気コラム 
============================*/
.popular-list {
  -webkit-padding-before: calc(var(--s-val) * 16);
          padding-block-start: calc(var(--s-val) * 16);
  position: relative;
}
.popular-list::before {
  content: "";
  display: block;
  width: 100%;
  height: 40%;
  background-color: var(--color-bg-main);
  position: absolute;
  top: 0;
  left: 0;
  z-index: -10;
}
.popular-list__lead {
  text-align: center;
  padding-inline: var(--page-pdg-inline);
}
.popular-list__heading {
  font-size: calc(var(--s-val) * 4);
  font-weight: bold;
}
.popular-list__content {
  -webkit-margin-before: calc(var(--s-val) * 1);
          margin-block-start: calc(var(--s-val) * 1);
}
.popular-list__bg-txt {
  width: calc(var(--s-val) * 98.1);
  max-width: 981px;
  font-size: calc(var(--s-val) * 4.8);
  font-weight: 500;
  line-height: 1em;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
  color: #C7C7C7;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: calc(var(--s-val) * 5);
  position: absolute;
  top: calc(var(--s-val) * 63);
  right: calc(var(--s-val) * -40);
  z-index: -1;
}
.popular-list__bg-txt::after {
  content: "";
  display: block;
  width: auto;
  height: 1px;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  background-color: var(--border-color);
}
.popular-list__block {
  max-width: var(--max-w-in);
  padding-inline: var(--page-pdg-inline);
  margin: calc(var(--s-val) * 7.7) auto 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  gap: calc(var(--s-val) * 9) calc(var(--s-val) * 2.5);
}

/* レスポンシブ ============= */
@media screen and (max-width: 767px) {
  .popular-list {
    -webkit-padding-before: calc(var(--s-val) * 12);
            padding-block-start: calc(var(--s-val) * 12);
  }
  .popular-list::before {
    height: 48%;
  }
  .popular-list__bg-txt {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
    gap: calc(var(--s-val) * 2);
    width: calc(var(--s-val) * 49);
    top: auto;
    bottom: calc(var(--s-val) * -11);
    right: calc(var(--s-val) * -20);
  }
}
@media screen and (max-width: 540px) {
  .popular-list__heading {
    font-size: calc(var(--s-val) * 3.5);
  }
  .popular-list__bg-txt {
    font-size: calc(var(--s-val) * 3);
    width: calc(var(--s-val) * 29);
    bottom: calc(var(--s-val) * -13);
    right: calc(var(--s-val) * -12);
  }
  .popular-list__block {
    max-width: 380px;
    margin: 9% auto 9%;
    gap: calc(var(--s-val) * 7) calc(var(--s-val) * 2.5);
  }
}
/* =========================
最近の記事 
============================*/
.column-list {
  -webkit-margin-before: calc(var(--s-val) * 5);
          margin-block-start: calc(var(--s-val) * 5);
  padding-block: calc(var(--s-val) * 16);
  border-top: 1px solid var(--border-color);
}
.column-list__lead {
  text-align: center;
  padding-inline: var(--page-pdg-inline);
}
.column-list__heading {
  font-size: calc(var(--s-val) * 4);
  font-weight: bold;
}
.column-list__content {
  -webkit-margin-before: calc(var(--s-val) * 1);
          margin-block-start: calc(var(--s-val) * 1);
}
.column-list__container {
  max-width: var(--max-w-out);
  padding-inline: var(--page-pdg-inline);
  margin: calc(var(--s-val) * 7.7) auto 0;
}
.column-list__tab-content {
  background-color: #fff;
  border: 1px solid #9D9D9D;
}
.column-list__block {
  max-width: var(--max-w-in);
  padding-inline: var(--page-pdg-inline);
  margin: calc(var(--s-val) * 7.7) auto calc(var(--s-val) * 6);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  gap: calc(var(--s-val) * 9) calc(var(--s-val) * 2.5);
}
.column-list__tab {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: calc(var(--s-val) * 0.9);
  position: relative;
  bottom: -1px;
  z-index: 1;
}
.column-list__tab li {
  width: calc(20% - var(--s-val) * 0.72);
  height: calc(var(--s-val) * 5.7);
  border-radius: 0;
  font-size: calc(var(--s-val) * 1.6);
  font-weight: 600;
  text-align: center;
  padding: calc(var(--s-val) * 0.6) calc(var(--s-val) * 0.9) calc(var(--s-val) * 0.4);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: #F7F7F7;
  color: #9D9D9D;
  cursor: pointer;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  position: relative;
  bottom: 1px;
}
.column-list__tab li:hover {
  opacity: 0.7;
}
.column-list__tab li:hover.current {
  opacity: 1;
}
.column-list__tab li.current {
  padding: calc(var(--s-val) * 0.5) calc(var(--s-val) * 1);
  background-color: #fff;
  border: 1px solid #9D9D9D;
  border-bottom: 1px solid #fff;
  color: var(--base-color);
  position: relative;
  bottom: 0;
}

/* レスポンシブ ============= */
@media screen and (max-width: 767px) {
  .column-list {
    -webkit-margin-before: calc(var(--s-val) * 10);
            margin-block-start: calc(var(--s-val) * 10);
    padding-block: calc(var(--s-val) * 12);
  }
  .column-list__heading {
    font-size: calc(var(--s-val) * 3.5);
  }
  .column-list__container {
    margin: calc(var(--s-val) * 4) auto 0;
  }
  .column-list__tab {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: calc(var(--s-val) * 1);
    -webkit-margin-after: 4%;
            margin-block-end: 4%;
    position: initial;
  }
  .column-list__tab li {
    padding: calc(var(--s-val) * 0.5) calc(var(--s-val) * 1);
    width: calc(50% - var(--s-val) * 0.5);
    position: initial;
  }
  .column-list__tab li.current {
    padding: calc(var(--s-val) * 0.5) calc(var(--s-val) * 1);
    border: 1px solid #9D9D9D;
    bottom: 0;
    position: initial;
  }
}
@media screen and (max-width: 540px) {
  .column-list__block {
    margin: 10% auto;
    gap: calc(var(--s-val) * 7) calc(var(--s-val) * 2.5);
    max-width: 380px;
  }
}
/* =========================
 ページネーション（タブあり）
============================*/
#jquery-tab-pager-navi {
  margin-block: calc(var(--s-val) * 8) calc(var(--s-val) * 6);
  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;
  gap: calc(var(--s-val) * 2);
}

#jquery-tab-pager-navi li a {
  margin: 0;
  display: block;
  font-size: calc(var(--s-val) * 1.6);
  font-weight: normal;
  width: calc(var(--s-val) * 3.4);
  aspect-ratio: 1/1;
  background-color: #fff;
  border: 1px solid #D9D9D9;
  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;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
#jquery-tab-pager-navi li a.previos, #jquery-tab-pager-navi li a.next {
  border: none;
  background: none;
  color: var(--border-color);
}
#jquery-tab-pager-navi li a.previos.disable, #jquery-tab-pager-navi li a.next.disable {
  display: none;
}

/* === レスポンシブ === */
@media screen and (max-width: 767px) {
  #jquery-tab-pager-navi {
    margin-block: calc(var(--s-val) * 7) calc(var(--s-val) * 6);
    gap: calc(var(--s-val) * 1.3);
  }
}