.cards {
  --cards-padding-inline: 20px 0px;
  --header-max-width: 320px;
  --header-height: min(calc(44200cqw / 1280) 442px);
  --header-padding-inline: 0 min(calc(4000cqw / 1280), 40px);
  --header-padding-block-start: min(calc(3000cqw / 1280), 30px);
  --header-padding-block-end: min(calc(16500cqw / 1280), 165px);
  --header-row-gap: min(calc(4800cqw / 1280), 48px);
  --header-title-fsize: clamp(28px, calc(4400cqw / 1280), 44px);
  --header-description-fsize: clamp(14px, calc(1600cqw / 1280), 16px);
  --header-link-fsize: clamp(13px, calc(1600cqw / 1280), 16px);
  --header-link-align: stretch;
  --panel-radius: min(calc(4000cqw / 1280), 40px);
  --panel-width: min(calc(62000cqw / 1280), 620px);
  --panel-height: min(calc(85000cqw / 1280), 850px);
  --panel-content-padding-inline: calc(40 / 620 * 100%) calc(40 / 620 * 100% + var(--panel-title-width));
  --panel-content-padding-block: min(calc(16500cqw / 1280), 165px);
  --panel-content-row-gap: min(calc(4000cqw / 1280), 40px);
  --panel-img-radius: min(calc(1500cqw / 1280), 15px);
  --panel-title-width: min(calc(9000cqw / 1280), 90px);
  --panel-title-arrow-top: calc(var(--panel-height) / 2);
  --panel-title-fsize: clamp(20px, calc(2200cqw / 1280), 22px);
  --panel-description-fsize: 16px;
  --panel-link-fsize: clamp(13px, calc(1600cqw / 1280), 16px);
  --panel-link-color: #266155;
  --panel-icn-filter: none;
  container-type: inline-size;
  display: grid;
  padding-inline: var(--cards-padding-inline);
}
.cards::before {
  content: "";
  display: block;
  position: absolute;
  background-color: #dae4e2;
  z-index: 0;
}

@media (min-width: 768px) {
  .cards {
    grid-template-columns: auto calc(var(--panel-width) + var(--panel-title-width) * 3);
    margin-inline-start: max((100cqw - 1300px) / 2, 0px);
  }
  .cards::before {
    width: 100dvw;
    height: 100%;
    top: 0;
    right: 0%;
  }
  .cards__wrapper {
    position: relative;
    container-type: inline-size;
  }
  .cards .cards__header__link-link {
    justify-content: flex-end;
  }
}
@media (max-width: 767px) {
  .cards {
    --cards-padding-inline: 0px;
    --header-max-width: none;
    --header-height: auto;
    --header-padding-inline: max(calc(3000cqw / 375), 30px);
    --header-padding-block-start: 85px;
    --header-padding-block-end: 48px;
    --header-row-gap: 24px;
    --header-link-align: flex-end;
    --panel-radius: 20px;
    --panel-width: calc(210 * 100cqw / 320);
    --panel-height: 100%;
    --panel-content-padding-inline: max(calc(1000cqw / 375), 10px) max(calc(6500cqw / 375), 65px);
    --panel-content-padding-block: 85px 60px;
    --panel-content-row-gap: min(calc(4000cqw / 1280), 40px);
    --panel-img-radius: max(calc(600cqw / 375), 15px);
    --panel-title-width: clamp(40px, calc(4000cqw / 375), 80px);
    width: 100cqw;
    left: 50%;
    transform: translateX(-50%);
    position: relative;
  }
  .cards::before {
    width: 100cqw;
    height: 80%;
    top: 0;
    left: 0;
  }
}
.cards__header {
  padding-block: var(--header-padding-block-start) var(--header-padding-block-end);
  padding-inline: var(--header-padding-inline);
  margin-top: auto;
  height: calc(var(--header-height) + var(--header-padding-block-start) + var(--header-padding-block-end));
  display: flex;
  flex-direction: column;
  row-gap: var(--header-row-gap);
  position: relative;
  z-index: 0;
}
.cards__header > * {
  max-width: var(--header-max-width);
}

.cards__header__title {
  font-weight: 700;
  font-size: var(--header-title-fsize);
  overflow-wrap: break-word;
  word-break: keep-all;
}

.cards__header__description {
  font-size: var(--header-description-fsize);
  line-height: 2;
}

.cards__header__link {
  font-size: var(--header-link-fsize);
  color: #266155;
  margin-top: auto;
  align-self: var(--header-link-align);
}

.cards__header__link-link {
  display: flex;
  align-items: center;
  column-gap: 1.25em;
}
.cards__header__link-link:hover {
  text-decoration: underline;
}

.cards__header__link-tx {
  white-space: nowrap;
}

.cards__header__link-icn {
  width: 3.125em;
  aspect-ratio: 1;
  background: url(common/icn-circle-arrow-gr.svg) no-repeat;
  background-size: contain;
}

.cards__board {
  display: flex;
  width: fit-content;
}

.cards__item {
  width: var(--panel-title-width);
  transition: width 0.5s;
  position: relative;
  z-index: 0;
}
.cards__item:has(.cards__panel[data-open=true]) {
  width: calc(var(--panel-width) - var(--panel-title-width));
}

.cards__panel {
  border-radius: var(--panel-radius);
  display: flex;
  width: var(--panel-width);
  height: var(--panel-height);
}
.cards__panel[data-open=true] .cards__panel__title-button::after {
  transform: translateY(-50%) scaleX(-1);
}

.cards__panel__content {
  padding-inline: var(--panel-content-padding-inline);
  padding-block: var(--panel-content-padding-block);
  display: flex;
  flex-direction: column;
  row-gap: var(--panel-content-row-gap);
}

.cards__panel__title {
  width: var(--panel-title-width);
  flex: none;
  font-size: var(--panel-title-fsize);
  font-weight: 700;
}

.cards__panel__title-button {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.cards__panel__title-button::after {
  content: "";
  width: 0.68em;
  aspect-ratio: 1;
  background: url(cards/cards-arrow.svg) no-repeat center;
  background-size: contain;
  filter: var(--panel-icn-filter);
  margin-top: max(var(--panel-title-arrow-top), 17em);
  margin-bottom: auto;
  transform: translateY(-50%);
}

.cards__panel__title-text {
  transform: rotate(90deg);
  transform-origin: 0% 50%;
  width: max-content;
  position: absolute;
  left: 50%;
  top: 0;
  margin-top: 50%;
}

.cards__panel__img {
  border-radius: var(--panel-img-radius);
  overflow: hidden;
}
.cards__panel__img img {
  display: block;
}

.cards__panel__description {
  font-size: var(--panel-description-fsize);
}

.cards__panel__link {
  margin-inline-start: auto;
  font-size: var(--panel-link-fsize);
  color: var(--panel-link-color);
}

.cards__panel__link-link {
  display: flex;
  align-items: center;
  column-gap: 1.25em;
}

.cards__panel__link-icn {
  width: 3.125em;
  aspect-ratio: 1;
  background: url(common/icn-circle-arrow-line.svg) no-repeat;
  background-size: contain;
  filter: var(--panel-icn-filter);
}

.cards__panel--card-1 {
  background-color: #ffe06b;
}

.cards__panel--card-2 {
  background-color: #add0e7;
}

.cards__panel--card-3 {
  background-color: #fff;
}

.cards__panel--card-4 {
  background-color: #004273;
  color: #fff;
  --panel-link-color: #fff;
  --panel-icn-filter: brightness(0) invert(1);
}

.cards__panel--card-5 {
  background-color: #ffbfb0;
}