/* movie */
.movie-container {
  margin: 0 4rem;
}

.movie-container .movie-wrap {
  border: solid 1px #ddd;
  aspect-ratio: 640 / 360;
  position: relative;
  max-width: 800px;
}

.movie-container .movie-text {
  font-size: 14px;
  display: flex;
  align-items: baseline;
  max-width: 800px;
  margin: 10px auto 0;
}

.movie-container .movie-text > .ico {
  width: 14px;
  height: auto;
  display: inline-block;
  margin-right: 8px;
}

.movie-container .movie-text > .ico img {
  width: 100%;
  height: auto;
  vertical-align: middle;
}

@media screen and (max-width: 40rem) {
  .movie-container {
    margin: 0;
  }

  .movie-container .movie-text > .ico {
    width: 18px;
  }
}

.cta-appeal-word {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-2) var(--spacing-1);
  font-size: var(--font-size-20);

  .item {
    display: inline-flex;
    padding-block: var(--spacing-2);
    padding-inline: var(--spacing-4);
    justify-content: center;
    align-items: center;
    border-radius: var(--radius-full);
    border: var(--border-width-level-1) solid var(--semantic-stroke-tertiary);
    text-align: center;
    font-size: var(--font-size-16);
    line-height: var(--line-height-one);

    @media (40.1rem < width) {
      font-size: var(--font-size-18);
    }
  }

  .plus {
    position: relative;
    inline-size: 12px;
    block-size: 12px;

    &::before,
    &::after {
      content: "";
      position: absolute;
      inset-block-start: 50%;
      inset-inline-start: 50%;
      transform: translate(-50%, -50%);
      display: block;
      background-color: #849aa6;
    }

    &::before {
      inline-size: 3px;
      block-size: 100%;
    }

    &::after {
      inline-size: 100%;
      block-size: 3px;
    }
  }

  em {
    --semantic-text-promotion: #be0b00;
    color: var(--semantic-text-promotion);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-18);
    line-height: var(--line-height-one);

    @media (40.1rem < width) {
      font-size: var(--font-size-24);
    }

    sup {
      font-weight: var(--font-weight-normal);
    }

    .num {
      font-family: var(--font-family, Inter);
      font-size: var(--font-size-32);
      line-height: var(--line-height-one);

      @media (40.1rem < width) {
        font-size: var(--font-size-40);
      }
    }
  }
}

.cta-area {
  .box-outline & {
    @media (40.1rem < width) {
      text-align: center;
    }

    .cta-appeal-word {
      @media (40.1rem < width) {
        justify-content: center;
      }
    }

    .cta-button {
      margin-block-start: var(--spacing-2);
    }
  }
}

/* モーダル本文の共通レイアウト */
.foreign-language-support-modal,
.document-omission-modal {
  --ui-modal-contents-gap: var(--spacing-6);
  --ui-modal-contents-detail-gap: var(--spacing-6);
  --ui-modal-contents-heading-inline-end-space: var(--spacing-5);

  @media (40.1rem < width) {
    --ui-modal-contents-gap: var(--spacing-8);
    --ui-modal-contents-heading-inline-end-space: var(--spacing-3);
  }

  display: grid;
  gap: var(--ui-modal-contents-gap);

  /* 右上の閉じるボタンが本文領域に食い込む分を見出しから逃がす */
  > .heading-level2 {
    margin-block-start: 0;
    padding-inline-end: var(--ui-modal-contents-heading-inline-end-space);
  }

  > .detail {
    display: grid;
    gap: var(--ui-modal-contents-detail-gap);
  }
}

/* 外国語事故対応サービスのモーダル */
.foreign-language-support-modal {
  --ui-foreign-language-support-modal-image-max-inline-size: 542px;

  /* 画像は Figma 実寸（542px）を上限に中央寄せ。
     width 属性は responsive-helper の inline-size 指定に負けるため max-width で制御する */
  > .detail > img {
    max-width: min(100%, var(--ui-foreign-language-support-modal-image-max-inline-size));
    margin-inline: auto;
  }
}

/* 書類省略サービスのモーダル */
.document-omission-modal {
  --ui-document-omission-modal-item-gap: var(--spacing-6);

  > .detail > section {
    display: grid;
    gap: var(--ui-document-omission-modal-item-gap);

    > .heading-level3 {
      margin-block-start: var(--ui-document-omission-modal-item-gap);
    }
  }

  /* 縦余白は .detail の gap で統一するため、note-list 自前のマージンは無効化する */
  > .detail > .note-list {
    margin-block-start: 0;
  }
}