/* ==========================================================================
   p-download — PC/14_DownloadIndex (24381:7394) / SP (24381:7451)
   ＋ PC/15_MaterialDetail (24381:7810) / SP (24381:7837) のページ固有部分
   ========================================================================== */

/* ---- 一覧: まずはこの1冊（bg/brand-subtle） ---- */
.p-download-featured {
  background-color: var(--color-bg-brand-subtle);
}

/* ---- 一覧: カテゴリへのページ内リンク（Figma: 上 80px・下 0 / SP: 上 48px・左右 16px） ---- */
.p-download-anchor {
  padding-top: var(--space-80);
}

@media (max-width: 1023px) {

  .p-download-anchor {
    padding-top: var(--space-48);
  }

  .p-download-anchor .l-container {
    padding-inline: var(--space-16); /* Figma SP: 左右 16px */
  }
}

/* ---- 詳細: 資料の内容（左 626px）+ 資料請求フォーム（右 422px）
   Figma: 間 24px・左列のブロック間 32px / SP: 1 列（表紙 → 本文 → フォーム → シェア → 戻る）・間 24px ---- */
.p-material {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 422px; /* Figma 固有寸法: フォーム列の幅 */
  gap: var(--space-24);
  align-items: start;
}

.p-material__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
  min-width: 0;
}

.p-material__cover {
  width: 100%;
  aspect-ratio: 626 / 352; /* Figma 固有寸法 */
  object-fit: cover;
}

.p-material__share {
  justify-content: flex-end;
}

.p-material__back {
  align-self: center;
}

/* フォームは長い本文と並ぶため、スクロールに追従させる（Figma に指定なし・実装判断） */
.p-material__aside {
  position: sticky;
  top: var(--space-24);
}

/* 見出し「資料ダウンロード」は Figma PC では非表示・SP で表示。PC はスクリーンリーダー向けに残す */
.p-material__form-title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (min-width: 1024px) and (max-width: 1339px) {

  .p-material {
    grid-template-columns: minmax(0, 1fr) 360px; /* Tablet: フォーム列を縮める（実装判断） */
  }
}

@media (max-width: 1023px) {

  .p-material {
    display: flex;
    flex-direction: column;
    padding-inline: var(--space-16); /* Figma SP: 左右 16px */
  }

  .p-material__main {
    display: contents;
  }

  .p-material__aside {
    position: static;
    order: 1;
  }

  .p-material__share,
  .p-material__back {
    order: 2;
  }

  .p-material__back {
    align-self: stretch;
  }

  .p-material__form-title {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
    font-size: 1rem; /* SP: renewal/JP/16/Bold（tokens.css .t-jp-16-bold） */
    line-height: calc(28 / 16);
  }
}