/* =================================================================
 * c-announce — アナウンス枠（告知）
 * Figma: パーツ集「29 アナウンス枠」5371:85770 / 5371:85772
 *   <div class="c-announce">
 *     <div class="c-announce__head">
 *       <span class="c-announce__icon"></span>          ← info アイコン
 *       <p class="c-announce__title">ここにタイトルが入ります</p>
 *     </div>
 *     <div class="c-announce__body">
 *       <div class="c-announce__text">本文…<a>テキストリンク</a></div>
 *       <… c-button--tertiary（任意）…>
 *     </div>
 *   </div>
 *   ヘッダーは BG02 地、本体は白地。枠線は Neutral04@88%。head/body の接合部は
 *   線なし（head は下線なし・body は上線なし）。
 * =================================================================*/

.c-announce {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

/* ヘッダー（info アイコン＋見出し）*/
.c-announce__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);                       /* 8px */
  width: 100%;
  background-color: var(--color-bg-02);
  border: 1px solid color-mix(in srgb, var(--color-neutral-04) 88%, transparent);
  border-bottom: 0;                          /* 本体上辺と二重線にしない */
  border-radius: 12rem 12rem 0 0;              /* Figma: 12px */
  padding: var(--space-2) var(--space-5);    /* 8px 24px */
}

.c-announce__icon {
  flex-shrink: 0;
  width: 18rem;
  height: 18rem;
  background-color: var(--color-text-default);
  -webkit-mask-image: url("/img/common/icons/info.svg");
          mask-image: url("/img/common/icons/info.svg");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}

.c-announce__title {
  font-family: var(--font-jp);
  font-weight: var(--fw-bold);
  font-size: var(--fs-body);                 /* 16px */
  line-height: var(--lh-loose);              /* 1.8 */
  letter-spacing: var(--letter-spacing-body);
  color: var(--color-text-default);
}

/* 本体 */
.c-announce__body {
  display: flex;
  align-items: center;
  gap: var(--space-6);                       /* 32px */
  width: 100%;
  background-color: var(--color-white);
  border: 1px solid color-mix(in srgb, var(--color-neutral-04) 88%, transparent);
  border-top: 0;                             /* ヘッダー下辺と接合（線なし）*/
  border-radius: 0 0 12rem 12rem;              /* Figma: 12px */
  padding: var(--space-5) var(--space-6);    /* 24px 32px */
}

.c-announce__text {
  flex: 1;
  min-width: 0;
  font-family: var(--font-jp);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);                 /* 16px */
  line-height: var(--lh-loose);              /* 1.8 */
  letter-spacing: var(--letter-spacing-body);
  color: var(--color-text-default);
}

/* 本文中のテキストリンク */
.c-announce__text a {
  color: var(--color-key);
  text-decoration: underline;
  text-underline-position: from-font;
}

.c-announce__btn { flex-shrink: 0; }

@media (max-width: 1023.98px) {
  /* head は PC と同じ 8px 24px（Figma SP も px-24 py-8）*/
  .c-announce__body {
    flex-direction: column;
    align-items: center;                                     /* Figma SP: ボタンは中央 */
    gap: var(--space-2);                                     /* 8px */
    padding: var(--space-4) var(--space-5) var(--space-5);   /* Figma SP: 16px 24px 24px */
  }
  .c-announce__text { width: 100%; }                         /* 本文は全幅・左寄せ、ボタン中央 */
}