@charset "UTF-8";
:root {
  --_mb-topics-keizai: 172px;
  --_c-light-blue-topics-keizai: #effafa;
  --_c-blue01-topics-keizai: #171673;
  --_c-blue02-topics-keizai: #0052a5;
  --_c-blue03-topics-keizai: #003c8a;
  --c-light-yellow-topics-keizai: #f2f1ed;
}

@media screen and (max-width: 767px) {
  :root {
    --_mb-topics-keizai: 100px;
  }
}
.c-topics-keizai-checkered-headline {
  --_line-height: 1.35;
  --_font-size: 1.5rem;
  --_c-checkered01: #00a0aa;
  --_c-checkered02: #00c8d5;
  --_c-checkered03: #008088;
  position: relative;
  font: 600 var(--_font-size)/var(--_line-height) YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
  padding-left: 1.25em;
}
@media screen and (max-width: 767px) {
  .c-topics-keizai-checkered-headline {
    --_font-size: 1.25rem;
    padding-left: 1.051em;
  }
}
.c-topics-keizai-checkered-headline::before {
  content: "";
  position: absolute;
  inset: 0.1913580247lh auto auto 0;
  display: block;
  width: 0.6172839506lh;
  height: auto;
  aspect-ratio: 1/1;
  background: conic-gradient(var(--_c-checkered01) 0deg 90deg, var(--_c-checkered02) 90deg 180deg, var(--_c-checkered01) 180deg 270deg, var(--_c-checkered03) 270deg 360deg);
  background-size: 20px 20px;
}
@media screen and (max-width: 767px) {
  .c-topics-keizai-checkered-headline::before {
    inset-block-start: 0.2037037037lh;
    width: 0.5925925926lh;
  }
}

.l-topics-keizai {
  container-type: inline-size;
  font-family: "Noto Sans JP", sans-serif;
}
.l-topics-keizai :where(ul, ol) {
  list-style: none;
  margin: 0;
  padding: 0;
}

.l-topics-keizai-unit {
  position: relative;
  display: flex;
  flex-direction: column-reverse;
  background-color: var(--_c-light-blue-topics-keizai);
  border-inline: 1px solid transparent;
  border-image-source: linear-gradient(var(--_c-light-blue-topics-keizai), var(--_c-light-blue-topics-keizai));
  border-image-outset: 0 100vw;
  border-image-slice: 0 fill;
  padding-bottom: calc(var(--_mb-topics-keizai) - 57px);
  margin-top: 35px;
}
@media screen and (max-width: 767px) {
  .l-topics-keizai-unit {
    padding-bottom: calc(var(--_mb-topics-keizai));
    margin-top: 45px;
  }
}
.l-topics-keizai-unit::before {
  content: "";
  display: block;
  position: absolute;
  inset: auto auto 0 0;
  width: 55.4639175258%;
  height: var(--_mb-topics-keizai);
  border-left: 1px solid transparent;
  border-image-source: linear-gradient(white, white);
  border-image-outset: 0 0 0 100vw;
  border-image-slice: inherit;
}
@media screen and (max-width: 767px) {
  .l-topics-keizai-unit::before {
    width: 75vw;
    height: calc(var(--_mb-topics-keizai) / 2);
  }
}
.l-topics-keizai-unit__wrapper {
  z-index: 1;
  position: relative;
  margin-top: 50px;
}
@media screen and (max-width: 767px) {
  .l-topics-keizai-unit__wrapper {
    margin-top: 32px;
  }
}
.l-topics-keizai-unit h1 {
  font: 600 2rem/1.4 YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
  text-align: center;
}
@media screen and (max-width: 767px) {
  .l-topics-keizai-unit h1 {
    font-size: clamp(1.25rem, 5.3333333333vw, 1.5rem);
  }
}
.l-topics-keizai-unit figure {
  margin-top: 32px;
  width: 100cqw;
}
@media screen and (max-width: 767px) {
  .l-topics-keizai-unit figure {
    margin-top: 24px;
    width: 100%;
  }
}

.l-topics-keizai-unit-catch {
  --_pbl: .24em;
  width: 100%;
  background-color: #00a0aa;
  font-size: 26px;
  font-weight: 400;
  color: white;
  text-align: center;
  letter-spacing: 0.1em;
  border-radius: 99em;
  padding: var(--_pbl) 1em;
  margin-top: calc(var(--_pbl) * -1 - 0.4lh);
}
@media screen and (max-width: 767px) {
  .l-topics-keizai-unit-catch {
    --_pbl: .45em;
    font-size: 1rem;
    line-height: 1.5;
    margin-top: calc((var(--_pbl) + 1lh) * -1);
  }
}

.l-topics-keizai-digital {
  position: relative;
  margin-top: calc((var(--_mb-topics-keizai) - 100px) * -1);
}
@media screen and (max-width: 767px) {
  .l-topics-keizai-digital {
    margin-top: calc(var(--_mb-topics-keizai) / 3.7 * -1);
  }
}
.l-topics-keizai-digital__head {
  position: relative;
  width: min(63.9175257732%, 620px);
}
@media screen and (max-width: 767px) {
  .l-topics-keizai-digital__head {
    width: 100%;
  }
}
.l-topics-keizai-digital__head::after {
  --_w-icon: calc(115 / 970 * 100cqw);
  content: ""/"パソコンを操作しているアイコン";
  position: absolute;
  inset: auto calc(var(--_w-icon) * -1 - 6.3917525773cqw) 0 auto;
  display: block;
  width: var(--_w-icon);
  height: auto;
  aspect-ratio: 115/174;
  background: url(../img/topics/keizai/icon_work.svg) no-repeat left top/contain;
}
@media screen and (max-width: 767px) {
  .l-topics-keizai-digital__head::after {
    --_w-icon: 45px;
    inset: calc(var(--_w-icon) * -1 - 4px) 0 auto auto;
  }
}
.l-topics-keizai-digital h2 {
  font: 600 2rem/1.4 YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
}
@media screen and (max-width: 767px) {
  .l-topics-keizai-digital h2 {
    font-size: 1.5rem;
  }
}
.l-topics-keizai-digital h2 + p {
  font-size: 1rem;
  line-height: 1.8125;
  margin-top: 1em;
}
.l-topics-keizai-digital__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px 50px;
  margin-top: 40px;
}
@media screen and (max-width: 767px) {
  .l-topics-keizai-digital__grid {
    grid-template-columns: 1fr;
    margin-top: 32px;
  }
}

.l-topics-keizai-digital-child {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  gap: 8px;
}
@media screen and (max-width: 767px) {
  .l-topics-keizai-digital-child {
    gap: 12px;
  }
}
.l-topics-keizai-digital-child h3 {
  --_c-checkered01: var(--_c-blue03-topics-keizai);
  --_c-checkered02: var(--_c-blue02-topics-keizai);
  --_c-checkered03: var(--_c-blue01-topics-keizai);
}
.l-topics-keizai-digital-child__contents {
  background-color: var(--c-light-yellow-topics-keizai);
  padding: 30px 36px 32px;
  border-left: 4px solid var(--_c-blue02-topics-keizai);
}
@media screen and (max-width: 767px) {
  .l-topics-keizai-digital-child__contents {
    padding: 18px 22px;
  }
}
.l-topics-keizai-digital-child__contents:not(:first-of-type) {
  margin-top: 8px;
}
@media screen and (max-width: 767px) {
  .l-topics-keizai-digital-child__contents:not(:first-of-type) {
    margin-top: 0;
  }
}
.l-topics-keizai-digital-child__contents p, .l-topics-keizai-digital-child__contents li, .l-topics-keizai-digital-child__contents dd {
  font-size: 1rem;
  line-height: 1.6;
}
.l-topics-keizai-digital-child__caption {
  display: block;
  font-size: 0.75rem;
  line-height: 1.4;
  margin-top: 1em;
}
@media screen and (max-width: 767px) {
  .l-topics-keizai-digital-child__caption {
    margin-top: 0.8em;
  }
}
.l-topics-keizai-digital-child__list {
  padding-left: 22px;
  margin-top: 20px;
}
@media screen and (max-width: 767px) {
  .l-topics-keizai-digital-child__list {
    margin-top: 10px;
  }
}
.l-topics-keizai-digital-child__list > li {
  position: relative;
  font-size: 1rem;
  line-height: 1.6;
}
.l-topics-keizai-digital-child__list--num {
  counter-reset: mycounter;
}
.l-topics-keizai-digital-child__list--num > li::before {
  counter-increment: mycounter;
  content: counter(mycounter);
  position: absolute;
  inset: calc((1.6rem - 1em) / 3) auto auto -24px;
  display: grid;
  place-items: center;
  line-height: 1;
  font-size: 0.875em;
  color: white;
  width: 1.4285714286em;
  height: auto;
  aspect-ratio: 1/1;
  background-color: var(--_c-blue02-topics-keizai);
  border-radius: 50%;
}
.l-topics-keizai-digital-child--demand .l-topics-keizai-digital-child__contents {
  grid-area: 2/1/4/3;
}

.l-topics-keizai-message {
  background-color: var(--_c-light-blue-topics-keizai);
  border-inline: 1px solid transparent;
  border-image-source: linear-gradient(var(--_c-light-blue-topics-keizai), var(--_c-light-blue-topics-keizai));
  border-image-slice: 0 fill;
  border-image-outset: 0 100vw;
  padding-block: 98px 96px;
  margin-top: 100px;
}
@media screen and (max-width: 767px) {
  .l-topics-keizai-message {
    padding-block: 48px 42px;
    margin-top: 56px;
  }
}
.l-topics-keizai-message h2 {
  color: var(--_c-checkered01);
}

.l-topics-keizai-message-card {
  display: flex;
  align-items: flex-end;
  gap: 32px 40px;
}
@media screen and (max-width: 767px) {
  .l-topics-keizai-message-card {
    flex-direction: column-reverse;
    justify-content: center;
    align-items: center;
    gap: 24px;
    margin-top: 20px;
  }
}
@media screen and (max-width: 767px) {
  .l-topics-keizai-message-card__right {
    width: 100%;
  }
}
.l-topics-keizai-message-card__right img {
  width: 100%;
  height: auto;
}
.l-topics-keizai-message-card__left {
  flex: 1 0 280px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.l-topics-keizai-message-card__head {
  margin-top: 20px;
}
@media screen and (max-width: 767px) {
  .l-topics-keizai-message-card__head {
    margin-top: 0;
  }
}
.l-topics-keizai-message-card__head h3 {
  font-size: 2rem;
  font-weight: 600;
  font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
  line-height: 1.4;
}
@media screen and (max-width: 767px) {
  .l-topics-keizai-message-card__head h3 {
    font-size: 1.5rem;
  }
}
.l-topics-keizai-message-card__head p {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
  font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
  margin-top: 18px;
}
@media screen and (max-width: 767px) {
  .l-topics-keizai-message-card__head p {
    font-size: 1rem;
    gap: 16px;
    margin-top: 10px;
  }
}
.l-topics-keizai-message-card__head p > span {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
}
.l-topics-keizai-message-card__head p::after {
  content: "";
  position: relative;
  display: block;
  flex: 1;
  width: 100%;
  height: 2px;
  background-color: #00a0aa;
}
.l-topics-keizai-message-card__head .name {
  font-size: 1.3333333333em;
}
.l-topics-keizai-message-card__inner {
  font-size: 1rem;
  line-height: 1.6;
}

.l-topics-keizai-button {
  position: relative;
  display: block;
  width: min(100%, 445px);
  text-align: center;
  font-size: 1.375rem;
  font-weight: 600;
  color: white;
  line-height: 1.4;
  background-color: #1eafe6;
  margin: 56px auto 0;
  padding: 2.0454545455em 2.7272727273em;
  transition: opacity 0.3s;
}
@media screen and (max-width: 767px) {
  .l-topics-keizai-button {
    font-size: 1.125rem;
    padding: 1em 1.25em;
    margin-top: 46px;
  }
}
.l-topics-keizai-button svg {
  position: absolute;
  inset: 50% 20px auto auto;
  translate: 0 -50%;
  width: 24px;
  height: 24px;
}
.l-topics-keizai-button use {
  fill: white;
}
.l-topics-keizai-button:focus-visible {
  opacity: 0.8;
  color: white;
  text-decoration: none;
}
@media (any-hover: hover) {
  .l-topics-keizai-button:hover {
    cursor: pointer;
    opacity: 0.8;
    color: white;
    text-decoration: none;
  }
}