/* =========================================================================
   プランLP（AI英会話 / 映画 / 多聴多読 / 英字新聞）の共通: メリット（#merit）・学習体験（#exp）
   正典: AI英会話プラン / 映画プラン / 多聴多読プラン / 英字新聞プラン.dc.html（4ページとも同じ構造）
   メリットは site.css の .card-grid ＋ .card-l をそのまま使う（値はプロトタイプと同一）。
   学習体験の行は site.css の .exp-row（.frow 相当）に、テキストと画像枠をここで足す。
   色は site.css のトークン経由（ダークは .theme-dark で自動切替。映画固有の質感は movie.css）。
   ========================================================================= */

/* 学習体験: 見出しブロックの下余白はメリットより小さい（各行が margin-top:56px を持つため） */
.exp-sec .sec-head { margin-bottom: clamp(16px, 2vw, 24px); }

.exp-row__label { font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--accent); }
.exp-row__title { font-size: clamp(19px, 2.2vw, 24px); font-weight: 700; line-height: 1.5; margin: 10px 0 0; color: var(--c-text); }
.exp-row__body { font-size: 14px; color: var(--c-sub); line-height: 1.9; margin: 12px 0 0; }

/* 画像枠（プロトタイプの image-slot: 16:10・1px 枠・角丸 16・画像影） */
.exp-row__frame {
  position: relative; display: block; width: 100%; height: auto; aspect-ratio: 16/10; overflow: hidden;
  border: 1px solid var(--c-line); border-radius: 16px; box-shadow: var(--shadow-image);
}
.exp-row__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* 学習体験の補足チェック（多聴多読 02）。中身は site.css の .check */
.exp-row__checks { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }