/* PC 1680px reference. Shared header/footer remain in common.css. */
html {
  font-size: 100%;
}
.wb-blog {
  position: relative;
  isolation: isolate;
  color: #00006b;
  -webkit-font-smoothing: antialiased;
}
/* 見た目は common.css の .wb-breadcrumb。ここでは一覧ページでの位置だけ指定する */
.wb-breadcrumb--blog {
  padding-top: 109.274px;
  padding-top: 6.8296rem;
}
.wb-blog__decoration {
  position: absolute;
  z-index: -1;
  top: 3.1071rem;
  right: 0;
  max-width: 100%;
  overflow: hidden;
  color: transparent;
  background-image: linear-gradient(110.88914057661981deg, #f0effc 8.1107%, #e3eefd 76.025%);
  background-clip: text;
  font-family: "Ubuntu", sans-serif;
  font-size: 12.2233rem;
  font-weight: 700;
  line-height: 1.75;
  letter-spacing: 2.078rem;
  opacity: 0.59;
}
.wb-blog__inner {
  display: flex;
  align-items: flex-start;
  gap: min(5.3477rem, 5.093vw);
  width: 90%;
  max-width: 89rem;
  margin-inline: auto;
  padding: 6.9025rem 0 11.1942rem;
  padding-left: clamp(0rem, calc((100vw - 1000px) * 0.223529), 9.5rem);
}
.wb-blog__primary {
  flex: 1;
  min-width: 0;
}
/* figma-css:start nodeId=2101-19005 */
.wb-blog-intro__inner {
  width: 100%;
  max-width: 51.3801rem;
  margin-inline: auto;
}
.wb-blog-intro__ttl {
  margin-bottom: 1.5719rem;
  color: #00006b;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 2.8925rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.1446rem;
}
.wb-blog-intro__lead {
  padding-left: 0.1145rem;
}
.wb-blog-intro__txt {
  color: #00006b;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.85;
  letter-spacing: 0.0744rem;
}
/* figma-css:end nodeId=2101-19005 */
/* figma-css:start nodeId=2101-19128 */
.wb-blog-featured {
  padding-top: 100.44px;
  padding-top: 6.2775rem;
}
.wb-blog-featured__inner {
  width: 100%;
  max-width: 49.2612rem;
}
.wb-blog-featured__header {
  margin-bottom: 44.38px;
  margin-bottom: 2.7738rem;
}
.wb-blog-featured__label {
  padding-top: 10px;
  padding-top: 0.625rem;
  padding-right: 0;
  padding-bottom: 9.88px;
  padding-bottom: 0.6175rem;
  padding-left: 6px;
  padding-left: 0.375rem;
  margin-bottom: 4.29px;
  margin-bottom: 0.2681rem;
}
.wb-blog-featured__label-img {
  width: 97.74px;
  width: 6.1088rem;
  height: 13px;
  height: 0.8125rem;
}
.wb-blog-featured__ttl {
  color: transparent;
  background-image: linear-gradient(98.09937020655578deg, #084eb7 0.513%, #1a298b 94.347%), linear-gradient(90deg, #000030 0%, #000030 100%);
  background-clip: text;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 2.375rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.1663rem;
}
.wb-blog-featured__cards {
  display: flex;
  flex-direction: column;
  gap: 41.38px;
  gap: 2.5863rem;
  padding-left: 1.83px;
  padding-left: 0.1144rem;
}
.wb-blog-new {
  padding-top: 6.165rem;
}
/* 注目記事のあとに続くときは、カンプどおり上の余白を詰める */
.wb-blog-new--with-featured {
  padding-top: 80.11px;
  padding-top: 5.0069rem;
}
.wb-blog-new__inner {
  width: 100%;
  max-width: 49.2612rem;
}
.wb-blog-new__header {
  margin-bottom: 2.8034rem;
}
.wb-blog-new__label {
  padding-top: 10px;
  padding-top: 0.625rem;
  padding-right: 0;
  padding-bottom: 9.88px;
  padding-bottom: 0.6175rem;
  padding-left: 6px;
  padding-left: 0.375rem;
  margin-bottom: 4.29px;
  margin-bottom: 0.2681rem;
}
.wb-blog-new__label-img {
  width: 43.5px;
  width: 2.7188rem;
  height: 13px;
  height: 0.8125rem;
}
.wb-blog-new__ttl {
  color: transparent;
  background-image: linear-gradient(98.09937020655578deg, #084eb7 0.513%, #1a298b 94.347%), linear-gradient(90deg, #000030 0%, #000030 100%);
  background-clip: text;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 2.375rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.1663rem;
}
.wb-blog-new__cards {
  display: flex;
  flex-direction: column;
  gap: 2.586rem;
  padding-left: 0.1145rem;
}
.wb-blog-new__empty {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 1.0625rem;
  line-height: 1.85;
}
.wb-blog-card {
  display: flex;
  align-items: flex-start;
  gap: 1.9543rem;
  padding-bottom: 2.1691rem;
  border-bottom: 1.2px solid #d6d8dc;
  position: relative;
}
/* カード全体を記事へのリンクにするため、タイトルのリンクをカード全面へ広げる */
.wb-blog-card__link::after {
  position: absolute;
  inset: 0;
  content: "";
}
.wb-blog-card__media {
  display: block;
  flex: 0 0 38.105%;
  aspect-ratio: 1760 / 1136;
  overflow: hidden;
  border-radius: 0.5rem;
  background-image: linear-gradient(-51.063645657157025deg, #e3eefd 5.5652%, #f0effc 100%);
}
.wb-blog-card__img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1760 / 1136;
  object-fit: cover;
  object-position: center;
  transition: transform 0.3s ease;
}
@media (hover: hover) {
  .wb-blog-card:hover .wb-blog-card__img {
    transform: scale(1.08);
  }
}
@media (prefers-reduced-motion: reduce) {
  .wb-blog-card__img {
    transition: none;
  }
}
.wb-blog-card__content {
  flex: 1;
  min-width: 0;
  padding-top: 0.1104rem;
}
.wb-blog-card__categories {
  display: flex;
  flex-wrap: wrap;
  gap: 0.450625rem;
  margin-bottom: 0.4888rem;
  list-style: none;
}
.wb-blog-card__category-link {
  display: block;
  padding: 0.2497rem 1.2974rem;
  border: 1.5px solid transparent;
  border-radius: 6.25rem;
  color: #ffffff;
  background: linear-gradient(90deg, #33bcd9 0%, #74a2f1 82.17%), #00006b;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.0375rem;
  text-decoration: none;
}
.wb-blog-card__ttl {
  margin-bottom: 0.4553rem;
  color: #000e27;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.65;
  letter-spacing: 0.0531rem;
  overflow-wrap: anywhere;
}
.wb-blog-card__link {
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-decoration: none;
}
.wb-blog-card__link:not(.is-split) {
  background-image: linear-gradient(#000e27, #000e27);
  background-position: left bottom;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
.wb-blog-card__line {
  width: fit-content;
  max-width: 100%;
  display: block;
  position: relative;
}
.wb-blog-card__line::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  height: 0.0625rem;
  background: #000e27;
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
@media (hover: hover) {
  .wb-blog-card:hover .wb-blog-card__link:not(.is-split) {
    background-size: 100% 1px;
  }
  .wb-blog-card:hover .wb-blog-card__line::after {
    transform: scaleX(1);
  }
  .wb-blog-card:hover .wb-blog-card__line:nth-child(2)::after {
    transition-delay: 0.1s;
  }
  .wb-blog-card:hover .wb-blog-card__line:nth-child(3)::after {
    transition-delay: 0.2s;
  }
  .wb-blog-card:hover .wb-blog-card__line:nth-child(4)::after {
    transition-delay: 0.3s;
  }
}
.wb-blog-card__link:not(.is-split):focus-visible {
  background-size: 100% 1px;
}
.wb-blog-card__link:focus-visible .wb-blog-card__line::after {
  transform: scaleX(1);
}
@media (prefers-reduced-motion: reduce) {
  .wb-blog-card__link:not(.is-split) {
    transition: none;
  }
  .wb-blog-card__line::after {
    transition: none;
  }
}
.wb-blog-card__date {
  display: block;
  margin-bottom: 1.0356rem;
  color: #b2b2b2;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: 0.0263rem;
}
.wb-blog-card__author {
  display: flex;
  align-items: center;
  gap: 0.3901rem;
}
.wb-blog-card__author-img {
  flex: 0 0 2.9673rem;
  width: 2.9673rem;
  height: 2.9673rem;
}
.wb-blog-card__author-name {
  color: #000;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: 0.0525rem;
  overflow-wrap: anywhere;
}
/* figma-css:end nodeId=2101-19128 */
/* figma-css:start nodeId=2101-19296 */
.wb-blog-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.6rem;
  padding-top: 2.787rem;
}
.wb-blog-pagination .page-numbers {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #00006b;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.2864rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.0643rem;
  text-decoration: none;
}
.wb-blog-pagination a.page-numbers {
  transition: opacity 0.3s ease;
}
@media (hover: hover) {
  .wb-blog-pagination a.page-numbers:hover {
    opacity: 0.6;
  }
}
.wb-blog-pagination .current {
  width: 2.4807rem;
  height: 2.4807rem;
  border-radius: 50%;
  background: #00006b;
  color: #fff;
  padding-bottom: 0.2rem;
  padding-left: 0.1rem;
}
.wb-blog-pagination__arrow {
  width: 1.152rem;
  height: 1.0017rem;
}
/* figma-css:end nodeId=2101-19296 */
/* figma-css:start nodeId=2101-19260 */
.wb-blog-sidebar {
  flex: 0 0 28.59%;
  min-width: 0;
  padding-top: 0.2594rem;
}
.wb-blog-sidebar__search {
  display: flex;
  align-items: center;
  gap: 0.9541rem;
  padding: 0.894rem 1.2523rem;
  margin-bottom: 2.0872rem;
  border: 1.5px solid #00006b;
  border-radius: 0.5963rem;
  background: #fff;
}
.wb-blog-sidebar__search-icon {
  flex: 0 0 1.3119rem;
  width: 1.3119rem;
  height: 1.3119rem;
}
.wb-blog-sidebar__search-label {
  width: 100%;
  min-width: 0;
  background: transparent;
  color: #000036;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.0138rem;
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.1115rem;
}
/* 入力した文字はそのままの濃さで、プレースホルダーだけ薄くする */
.wb-blog-sidebar__search-label::placeholder {
  color: #000036;
  opacity: 0.3;
}
.wb-blog-categories__inner {
  width: 100%;
}
.wb-blog-categories__header {
  display: flex;
  align-items: center;
  gap: 0.4174rem;
  margin-bottom: 1.2001rem;
}
.wb-blog-categories__icon {
  flex: 0 0 1.0734rem;
  width: 1.0734rem;
  height: 1.0745rem;
}
.wb-blog-categories__ttl {
  color: #00006b;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 1.1406rem;
  font-weight: 700;
  line-height: 1.4247;
  letter-spacing: 0.057rem;
}
.wb-blog-categories__nav {
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.1811rem;
  row-gap: 0.505rem;
}
.wb-blog-categories__link {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.2879rem 1.0875rem;
  border: 1.355px solid #00006b;
  border-radius: 5.6464rem;
  color: #00006b;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 0.8469rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.0339rem;
  text-decoration: none;
  min-height: 2.0153rem;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.wb-blog-categories__link::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #33bcd9 0%, #74a2f1 82.17%), #00006b;
  content: "";
  opacity: 0;
  transition: opacity 0.3s ease;
}
.wb-blog-categories__link--all {
  padding-inline: 1.2218rem;
  font-weight: 700;
  letter-spacing: 0.0678rem;
}
.wb-blog-categories__link.is-active {
  border-color: transparent;
  color: #fff;
}
.wb-blog-categories__link.is-active::before {
  opacity: 1;
}
@media (hover: hover) {
  .wb-blog-categories__link:hover {
    color: #ffffff;
    border-color: transparent;
  }
  .wb-blog-categories__link:hover::before {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .wb-blog-categories__link {
    transition: none;
  }
  .wb-blog-categories__link::before {
    transition: none;
  }
}
/* figma-css:end nodeId=2101-19260 */
@media (min-width: 768px) and (max-width: 1399px) {
  html {
    font-size: calc((100vw - 768px) / 632 * 3 + 13px);
  }
}

/* PC基準幅1680pxを超えたら同じ倍率で拡大する（TOP・SEOと同じ基準） */
@media (width > 1680px) {
  html {
    font-size: 0.9523809524vw;
  }
}

@media (max-width: 767.98px) {
  /* 414pxで1rem = 16px。幅に合わせて全体が同じ倍率で変わる（TOP・SEOと同じ基準） */
  html {
    font-size: 3.8647342995vw;
  }
  /* SP。Figma 2202:22615、414px基準。右上の大きな英字が画面外へ出るため横だけ切り取る */
  .wb-blog {
    overflow-x: clip;
  }
  .wb-breadcrumb--blog {
    max-width: none;
    width: 100%;
    padding-top: 60.5px;
    padding-top: 3.7813rem;
    padding-right: 13.62px;
    padding-right: 0.8513rem;
    padding-left: 13.62px;
    padding-left: 0.8513rem;
  }
  .wb-blog__decoration {
    top: 58.03px;
    top: 3.6269rem;
    right: -8.42px;
    right: -0.5263rem;
    font-size: 62.082px;
    font-size: 3.8801rem;
    letter-spacing: 8.0706px;
    letter-spacing: 0.5044rem;
    background-image: linear-gradient(110.0655206550097deg, #f0effc 8.1107%, #e3eefd 76.025%);
  }
  .wb-blog__inner {
    display: block;
    max-width: none;
    width: 100%;
    padding-top: 32.33px;
    padding-top: 2.0206rem;
    padding-right: 25px;
    padding-right: 1.5625rem;
    padding-bottom: 86.57px;
    padding-bottom: 5.4106rem;
    padding-left: 25px;
    padding-left: 1.5625rem;
  }
  .wb-blog-intro__inner {
    max-width: none;
  }
  .wb-blog-intro__ttl {
    font-size: 33px;
    font-size: 2.0625rem;
    line-height: 1.45;
    letter-spacing: 2.31px;
    letter-spacing: 0.1444rem;
    margin-bottom: 11.58px;
    margin-bottom: 0.7238rem;
  }
  .wb-blog-intro__lead {
    padding-left: 0;
  }
  .wb-blog-intro__txt {
    font-size: 15px;
    font-size: 0.9375rem;
    line-height: 1.65;
    letter-spacing: 1.05px;
    letter-spacing: 0.0656rem;
  }
  .wb-blog-featured {
    padding-top: 58.63px;
    padding-top: 3.6644rem;
  }
  .wb-blog-featured__inner {
    max-width: none;
  }
  .wb-blog-featured__header {
    margin-bottom: 26.43px;
    margin-bottom: 1.6519rem;
  }
  .wb-blog-featured__label {
    padding-top: 7.6px;
    padding-top: 0.475rem;
    padding-bottom: 9.33px;
    padding-bottom: 0.5831rem;
    padding-left: 3px;
    padding-left: 0.1875rem;
    margin-bottom: 0.17px;
    margin-bottom: 0.0106rem;
  }
  .wb-blog-featured__label-img {
    width: 83.23px;
    width: 5.2019rem;
    height: 11.07px;
    height: 0.6919rem;
  }
  .wb-blog-featured__ttl {
    font-size: 29px;
    font-size: 1.8125rem;
    line-height: 1.4;
    letter-spacing: 1.74px;
    letter-spacing: 0.10875rem;
    background-image: linear-gradient(110.75169832739691deg, #084eb7 0.513%, #1a298b 94.347%), linear-gradient(90deg, #000030 0%, #000030 100%);
  }
  .wb-blog-featured__cards {
    gap: 39.6px;
    gap: 2.475rem;
    padding-left: 0;
  }
  .wb-blog-new {
    padding-top: 96.71px;
    padding-top: 6.0444rem;
  }
  .wb-blog-new--with-featured {
    padding-top: 96.71px;
    padding-top: 6.0444rem;
  }
  .wb-blog-new__inner {
    max-width: none;
  }
  .wb-blog-new__header {
    margin-bottom: 26.44px;
    margin-bottom: 1.6525rem;
  }
  .wb-blog-new__label {
    padding-top: 7.6px;
    padding-top: 0.475rem;
    padding-bottom: 9.33px;
    padding-bottom: 0.5831rem;
    padding-left: 3px;
    padding-left: 0.1875rem;
    margin-bottom: 0.17px;
    margin-bottom: 0.0106rem;
  }
  .wb-blog-new__label-img {
    width: 37.04px;
    width: 2.315rem;
    height: 11.07px;
    height: 0.6919rem;
  }
  .wb-blog-new__ttl {
    font-size: 29px;
    font-size: 1.8125rem;
    line-height: 1.4;
    letter-spacing: 1.74px;
    letter-spacing: 0.10875rem;
    background-image: linear-gradient(110.75169832739691deg, #084eb7 0.513%, #1a298b 94.347%), linear-gradient(90deg, #000030 0%, #000030 100%);
  }
  .wb-blog-new__cards {
    gap: 39.61px;
    gap: 2.4756rem;
    padding-left: 0;
  }
  /* カンプではカードが画像を上に置く縦並びになる */
  .wb-blog-card {
    display: block;
    padding-bottom: 27.12px;
    padding-bottom: 1.695rem;
  }
  .wb-blog-card__media {
    width: 100%;
    aspect-ratio: 1760 / 1136;
    border-radius: 8px;
    margin-bottom: 18.73px;
    margin-bottom: 1.1706rem;
  }
  .wb-blog-card__img {
    aspect-ratio: 1760 / 1136;
  }
  .wb-blog-card__content {
    padding-top: 0;
  }
  .wb-blog-card__categories {
    gap: 3.21px;
    gap: 0.350625rem;
    margin-bottom: 15.98px;
    margin-bottom: 0.9988rem;
  }
  .wb-blog-card__ttl {
    margin-bottom: 9.28px;
    margin-bottom: 0.58rem;
  }
  .wb-blog-card__date {
    margin-bottom: 20.44px;
    margin-bottom: 1.2775rem;
  }
  .wb-blog-pagination {
    gap: 21px;
    gap: 1.3125rem;
    padding-top: 29.06px;
    padding-top: 1.8163rem;
  }
  .wb-blog-pagination .page-numbers {
    font-size: 18.524px;
    font-size: 1.1578rem;
    letter-spacing: 0.9262px;
    letter-spacing: 0.0579rem;
  }
  .wb-blog-pagination .current {
    width: 35.723px;
    width: 2.2327rem;
    height: 35.723px;
    height: 2.2327rem;
  }
  .wb-blog-pagination__arrow {
    width: 16.591px;
    width: 1.0369rem;
    height: 14.425px;
    height: 0.9016rem;
  }
  /* カンプではページ送りの下に記事検索とカテゴリーが並ぶ */
  .wb-blog-sidebar {
    padding-top: 80.68px;
    padding-top: 5.0425rem;
  }
  .wb-blog-sidebar__search {
    gap: 15.27px;
    gap: 0.9544rem;
    padding-top: 15.27px;
    padding-top: 0.9544rem;
    padding-right: 20.99px;
    padding-right: 1.3119rem;
    padding-bottom: 15.27px;
    padding-bottom: 0.9544rem;
    padding-left: 20.99px;
    padding-left: 1.3119rem;
    margin-bottom: 18.4px;
    margin-bottom: 1.15rem;
    border: 0;
    border-radius: 9.541px;
    background: #f3f3f3;
  }
  .wb-blog-categories__header {
    margin-bottom: 14.2px;
    margin-bottom: 0.8875rem;
  }
}