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

/* ---- 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; }

/* Background（三省堂との業務提携）: 学習体験の下の白カード */
.exp-bg {
  margin-top: 64px; background: var(--c-card); border: 1px solid var(--c-line); border-radius: 20px;
  padding: clamp(28px, 4vw, 44px); text-align: center; box-shadow: var(--shadow-card);
}
.exp-bg__title { font-size: clamp(19px, 2.4vw, 26px); font-weight: 900; line-height: 1.5; margin: 0 0 12px; color: var(--c-text); }
.exp-bg__body { font-size: 14px; color: var(--c-sub); line-height: 1.9; margin: 0 auto; max-width: 44em; }