/* #region MARK:cms-zigzag コンポーネント */
/*
 * cms-zigzag: CMS化した汎用コンテンツブロック（タイトル＋メディア/本文カード群）。
 * 複数ページで再利用するため lineup_n.css から分離して管理する。
 * カラー・フルードタイポは global.css の CSS 変数を参照する。
 *
 * 構造:
 * .cms-zigzag                   コンポーネント根（この単位で左右反転の順番がリセットされる）
 *   .cms-zigzag__title          見出し
 *   .cms-zigzag__group          グループ（白背景の箱・1グループ=箱+カード1枚）
 *     .cms-zigzag__item         カード枠
 *       .cms-zigzag__item-title カード見出し
 *       .cms-zigzag__layout     メディア＋本文の2カラム（偶数番グループで自動左右反転）
 *         .cms-zigzag__media    メディア枠（figure）
 *           .cms-zigzag__link   リンク/ラッパー
 *           .cms-zigzag__image  画像
 *           .cms-zigzag__play   再生ボタン
 *         .cms-zigzag__body     本文枠
 *           .cms-zigzag__description 説明文
 *           .cms-zigzag__note   注釈
 */

/* 見出し（旧: .section-series__header） */
.cms-zigzag__title {
  font-size: var(--fluid-24-36);
  color: var(--c-primary);
  text-align: center;
  padding-block: 4rem 2rem;
}

/* グループ＝カード群を囲む箱（背景・余白を持つ）（旧: .section-category__container） */
.cms-zigzag__group {
  background-color: #fff;
  border-radius: 0;
  padding: 1px 2rem 0;
  margin-top: 0;
  display: grid;
  gap: 0;
}

/* 角丸は外側のみ：先頭=上だけ / 末尾=下だけ / 単独=全角丸（積み重ねを1つの箱に見せる） */
.cms-zigzag__group:first-of-type {
  border-radius: 0.6rem 0.6rem 0 0;
}

.cms-zigzag__group:last-of-type {
  border-radius: 0 0 0.6rem 0.6rem;
  padding-bottom: 5rem;
}

.cms-zigzag__group:only-of-type {
  border-radius: 0.6rem;
}

/* カード見出し（旧: .section-category__article-title） */
.cms-zigzag__item-title {
  font-size: var(--fluid-20-32);
  text-align: center;
  padding-block: 2.3rem;
}

/* メディア＋本文 内部要素（旧: .feature-block__*） */
.cms-zigzag__link {
  position: relative;
  display: block;
}

.cms-zigzag__image {
  border-radius: 0.4rem;
}

.cms-zigzag__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 3.6rem;
  aspect-ratio: 1;
  height: auto;
}

.cms-zigzag__description {
  font-size: var(--fluid-14-18);
  margin-top: 2rem;
}

.cms-zigzag__note {
  font-size: var(--fluid-12-14);
  margin-top: 1.6rem;
}

@media (min-width: 768px) {
  .cms-zigzag__title {
    padding-block: 8.4rem 3.6rem;
  }

  .cms-zigzag__group {
    padding: 1px 10rem 0;
    gap: 0;
  }

  .cms-zigzag__group:last-of-type {
    padding-bottom: 10rem;
  }

  .cms-zigzag__item-title {
    padding-block: 3.6rem;
  }

  /* メディア＋本文を2カラムに（旧: .feature-block） */
  .cms-zigzag__layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
  }

  .cms-zigzag__play {
    width: 5.5rem;
  }

  .cms-zigzag__description {
    margin-top: 0;
  }

  /*
   * 順番で左右反転（モディファイア不要・デスクトップのみ）。
   * .cms-zigzag 内の偶数番目のグループはメディアを右カラムへ送る。
   * order は 2 カラム grid（=768px 以上）でのみ効くため、SP では無効。
   */
  .cms-zigzag__group:nth-of-type(even) .cms-zigzag__media {
    order: 2;
  }
}
/* #endregion */