/* =========================================================================
   /eiken/ 固有（英検プラン.dc.html の Hero 見出し / Experience）
   共通部品（Hero・カード・チェック項目・学習体験の行）は site.css。色は site.css のトークン経由。
   ※ Experience（学習体験）の見た目は /textbook/ と同一（textbook.css にも同じ定義がある）。
   ========================================================================= */

/* ---- Hero ---- */
/* プロトタイプ: .hero-grid>div:first-child{container-type:inline-size} */
.hero__copy { container-type: inline-size; }
/* 見出し2行目（.hero-l2）。折り返し可否は .nowrap と site.css の ≤999px 規則（span は normal）に任せる */
.hero-l2 { display: inline-block; }

/* ---- Experience（収録コンテンツと学習体験） ---- */
.sec-head.exp__head { margin-bottom: clamp(16px, 2vw, 24px); }
.exp__label { font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--accent); }
.exp__title { font-size: clamp(19px, 2.2vw, 24px); font-weight: 700; line-height: 1.5; margin: 10px 0 0; color: var(--c-text); }
.exp__body { font-size: 14px; color: var(--c-sub); line-height: 1.9; margin: 12px 0 0; }
.exp__note { font-size: 12px; color: var(--c-muted); line-height: 1.7; margin: 8px 0 0; }
.exp__checks { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
/* 画像枠（image-slot: 16:10・枠 1px・角丸 16・影） */
.exp-row__img {
  position: relative; display: block; width: 100%; height: auto; aspect-ratio: 16/10; overflow: hidden;
  border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-image);
}
.exp-row__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }