.anxiety-grid {
  display: grid;
  background-color: var(--color--bg--2);
}

.anxiety-grid > * {
  grid-area: 1 / 1;
}

.anxiety-grid > .anxiety__inner {
  position: relative;
  place-self: center;
}
.anxiety__inner {
  padding: var(--space--4) 0;
}

/* 上部と下部の２行分確保 */
.anxiety__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(2, auto);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-areas:
    "anxiety__header"
    "anxiety__grid";
  width: 100%;
  align-items: center;
  justify-items: center;
  color: var(--color--text);
  gap: var(--space--8);
  padding: 30px 0;
}

.anxiety__header {
  grid-area: anxiety__header;
  display: grid;
  justify-items: center;
  gap: var(--space--4);
}

.anxiety__kicker, .anxiety__suffix {
  font-size: var(--font-size--lg);
}
.anxiety__title {
  font-size: var(--font-size--2xl);
  font-weight: 600;
  background-image: var(--gradation--text-marker--1);
  background-position: left bottom;
  background-size: 100% 0.6em;
  background-repeat: no-repeat;
}

.anxiety__grid {
  grid-area: anxiety__grid;
  display: grid;
  grid-template-columns: repeat(2, auto);
  grid-template-rows: 1fr;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-areas:
    "anx-card1 anx-card2";
  width: 100%;
  align-items: center;
  gap: var(--space--2);
}
.anx-card1 {
  grid-area: anx-card1;
}
.anx-card2 {
  grid-area: anx-card2;
}

.speechBubble {
  position: relative;
  display: inline-block;
  margin-bottom: 20px;
  border-radius: 4px;
  background-color: #dedede;
  width: auto;

}
.speechBubble::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  border-style: solid;
  border-width: 20px 0 0 15px;
  border-color: #dedede transparent transparent;
  translate: calc(-50% + 0.2px) 100%;
}

.anxiety-card {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(2, auto);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-areas:
    "anxiety-card__head"
    "anxiety-card__media";
  width: 100%;
  min-width: 0;
  height: 100%;
  align-items: center;
  justify-items: center;
  gap: var(--space--2);
  padding: var(--space--4);

}
.anxiety-card__head {
  grid-area: anxiety-card__head;
}
.anxiety-card__media {
  grid-area: anxiety-card__media;
  width: 100%;
  height: 100%;
}
.anxiety-card__media img {
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 2;
}

.anxiety-card__label {
  display: grid;
  font-weight: 600;
  justify-items: center;
  align-items: center;
  padding: 15px;
}
.anxiety-card__label p:first-child {
  font-size: var(--font-size--md);
}
.anxiety-card__label p:nth-child(2) {
  font-size: var(--font-size--xl);

  background-image: var(--gradation--text-marker--2);
  background-position: left bottom;
  background-size: 100% 0.6em;
  background-repeat: no-repeat;
}

@media (width <=768px) {
  .anxiety__grid {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, auto);
    grid-template-areas:
      "anx-card1"
      "anx-card2";
  }
}

@media (width <= 620px) {
  .anxiety__container {
    gap: var(--space--4);
  }

  .anxiety__header {
    gap: var(--space--2);
  }

  .anxiety__title {
    font-size: var(--font-size--xl);
  }
}