._InteractionDisclosure_1ujau_1 {
  --icon-size: 16px;

  margin-top: var(--SPACING-MODULE-DEFAULT);
  display: flex;
  flex-direction: column;

  @media (width > 768px) {
    --icon-size: 18px;
  }
}

._detail_1ujau_13 {
  border-bottom: 1px solid var(--BORDER-BLACK);

  &[open] {
    --icon-size: 12px;
  }
}

._summary_1ujau_21 {
  --summary-icon-inset: var(--SPACE-BLOCK-SPACING-16);

  padding: var(--SPACE-BLOCK-SPACING-24)
    calc(
      var(--summary-icon-inset) +
      var(--icon-size) +
      var(--SPACE-BLOCK-SPACING-24)
    )
    var(--SPACE-BLOCK-SPACING-24) 0;
  position: relative;
  display: flex;
  align-items: baseline;
  gap: var(--SPACE-BLOCK-SPACING-16);

  @media (width > 768px) {
    padding: var(--SPACE-BLOCK-SPACING-24)
      calc(
        var(--SPACE-BLOCK-SPACING-16) +
        var(--icon-size) +
        var(--SPACE-BLOCK-SPACING-24)
      )
      var(--SPACE-BLOCK-SPACING-24) var(--SPACE-BLOCK-SPACING-16);
    font-size: var(--FONT-SIZE-BASE);
  }

  &::before,
  &::after {
    content: '';
    display: block;
    width: var(--icon-size);
    height: 2px;
    background-color: var(--BORDER-BLACK);
    position: absolute;
    right: var(--summary-icon-inset);
    top: 50%;
    transform: translateY(-50%);
    transition: transform var(--TRANSITION);
  }

  /* vertical icon */
  &::after {
    transform: translateY(-50%) rotate(90deg);
  }

  ._detail_1ujau_13[open] &::after {
    transform: translateY(-50%) rotate(0);
  }
}

._questionText_1ujau_71 {
  font-size: var(--FONT-SIZE-XS);
  font-weight: var(--FONT-WEIGHT-BOLD);
  line-height: 1.5;

  @media (width > 768px) {
    font-size: var(--FONT-SIZE-BASE);
  }
}

._questionIcon_1ujau_81,
._answerIcon_1ujau_82 {
  display: flex;
  width: 32px;
  height: 32px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  border-radius: var(--RADIUS-ROUND);
  font-size: var(--FONT-SIZE-XS);
  font-weight: var(--FONT-WEIGHT-BOLD);
  line-height: 1;

  @media (width > 768px) {
    font-size: var(--FONT-SIZE-BASE);
  }
}

._questionIcon_1ujau_81 {
  padding-bottom: 3px; /* 中身のテキストを少し上に上げるための余白 */
  background-color: var(--BG-BLACK);
  color: var(--TEXT-WHITE);
}

._answerIcon_1ujau_82 {
  background-color: var(--BORDER-DEFAULT);
  color: var(--TEXT-BLACK);
}

._inner_1ujau_111 {
  padding: 0 0 var(--SPACE-BLOCK-SPACING-16);
  display: flex;
  gap: var(--SPACE-BLOCK-SPACING-16);

  @media (width > 768px) {
    padding: 0 var(--SPACE-BLOCK-SPACING-16) var(--SPACE-BLOCK-SPACING-24);
  }
}

._answerText_1ujau_121 {
  font-size: var(--FONT-SIZE-XS);

  @media (width > 768px) {
    font-size: var(--FONT-SIZE-BASE);
  }
}
._outer_1v1z9_1 {
  display: grid;
}

._inner_1v1z9_5 {
  overflow: hidden;
  grid-row: 1 / 3;

  &:focus {
    outline: medium solid currentColor;
  }

  > :is(:last-child) {
    margin-bottom: 0;
  }
}

._control_1v1z9_18 {
  display: flex;
  justify-content: center;

  @media (scripting: none) {
    display: none;
  }
}

._button_1v1z9_27 {
  --icon-size: 24px;

  position: relative;
  margin-top: var(--SPACE-BLOCK-SPACING-40);
  padding: var(--SPACE-BLOCK-SPACING-16) var(--SPACE-BLOCK-SPACING-16)
    var(--SPACE-BLOCK-SPACING-16) var(--SPACE-BLOCK-SPACING-8);
  inline-size: auto;
  min-inline-size: 280px;
  max-inline-size: 480px;
  border: 1px solid var(--BORDER-BLACK);
  background-color: var(--BG-WHITE);
  font-size: var(--FONT-SIZE-XS);
  font-weight: var(--FONT-WEIGHT-SEMI-BOLD);
  line-height: 1.5;
  color: var(--TEXT-BLACK);
  text-align: center;
  transition:
    color var(--TRANSITION),
    background-color var(--TRANSITION);

  @media (width > 768px) {
    margin-top: var(--SPACE-BLOCK-SPACING-48);
    font-size: var(--FONT-SIZE-BASE);
  }

  &:focus-visible {
    background-color: var(--BG-BLACK);
    color: var(--TEXT-WHITE);
  }

  @media (any-hover: hover) {
    &:hover {
      background-color: var(--BG-BLACK);
      color: var(--TEXT-WHITE);
    }
  }

  /* 右アイコン */
  &::after {
    position: absolute;
    content: '';
    right: 0;
    margin-inline: 16px;
    aspect-ratio: 1 / 1;
    width: var(--icon-size);
    height: auto;
    background-color: currentColor;
    mask-image: url('/assets/images/common/icon-add.svg');
    mask-repeat: no-repeat;
    mask-size: contain;
    transition: background-color var(--TRANSITION);
  }
}