/* グリッド */
.download-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
}
@media (max-width: 1024px){
  .download-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 640px){
  .download-grid{ grid-template-columns:1fr; }
}

/* カード */
.download-card{
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:20px;
  background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
  display:flex;
  flex-direction:column;
  gap:12px;
}
.download-card__title{ font-size:1.05rem; margin:0; }
.download-card__excerpt{ color:#555; font-size:.95rem; }
.download-card__actions{
  margin-top:auto; display:flex; align-items:center; gap:12px; justify-content:space-between;
}
.download-card__link{ text-decoration:underline; font-size:.92rem; }
.download-card__btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:10px; border:none;
  background:#111; color:#fff; font-weight:700; letter-spacing:.03em; cursor:pointer;
}
.download-card__btn:disabled{ background:#aaa; cursor:not-allowed; }
.download-card__note{ color:#999; font-size:.85rem; }

/* モーダル */
.dl-modal{ position:fixed; inset:0; display:none; }
.dl-modal.is-open{ display:block; }
.dl-modal__overlay{ position:absolute; inset:0; background:rgba(0,0,0,.45); }
.dl-modal__dialog{
  position:relative; z-index:1; max-width:560px; margin:8vh auto; background:#fff; border-radius:14px;
  padding:24px 22px 22px; box-shadow:0 20px 60px rgba(0,0,0,.25);
}
.dl-modal__close{
  position:absolute; top:8px; right:10px; width:36px; height:36px; border:none; background:transparent;
  font-size:22px; line-height:1; cursor:pointer;
}
.dl-modal__title{ margin:0 0 6px; font-size:1.25rem; }
.dl-modal__subtitle{ margin:0 0 16px; color:#666; font-size:.95rem; }

/* フォーム */
.dl-form__row{ display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.dl-form__row label{ font-weight:600; }
.dl-form__row input[type="text"],
.dl-form__row input[type="email"]{
  border:1px solid #d1d5db; border-radius:10px; padding:10px 12px; font-size:16px; width:100%;
}
.dl-form__agree{ margin-top:6px; }
.dl-form__agree label{ display:flex; gap:10px; align-items:flex-start; font-weight:500; }
.dl-form__actions{ margin-top:14px; }
.dl-form__submit{
  width:100%; padding:12px 16px; border:none; border-radius:10px; background:#111; color:#fff; font-weight:700; cursor:pointer;
}
.req{ background:#ef4444; color:#fff; font-size:.72rem; padding:1px 6px; border-radius:999px; margin-left:8px; }

/* --- Fix: モーダル内の入力欄のはみ出し対策 --- */
.dl-modal *, .dl-modal *::before, .dl-modal *::after {
  box-sizing: border-box;
}

/* 画面幅に応じて左右に余白を確保（はみ出し防止） */
.dl-modal__dialog{
  width: min(560px, calc(100vw - 32px));
  margin: 8vh auto;
}

/* 念のため100%幅＆はみ出し防止を明示 */
.dl-form__row input[type="text"],
.dl-form__row input[type="email"],
.dl-form__row input[type="search"],
.dl-form__row input[type="tel"],
.dl-form__row input[type="url"],
.dl-form__row input[type="password"],
.dl-form__row textarea,
.dl-form__row select{
  width: 100%;
  max-width: 100%;
}

/* ====== Archive Download のレイアウト調整 ====== */
/* コンテンツ幅に上限を設けて中央寄せ（横長を抑制） */
.download-archive .page-header,
.download-archive .download-grid{
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}

/* 1件だけのときはカード幅をコンパクトにして中央配置 */
.download-archive .download-grid.is-single{
  grid-template-columns: minmax(0, 640px);
  justify-content: center;
}

/* ====== DLカテゴリごとのリスト表示 ====== */
.dl-group{
  max-width: 1120px;
  margin: 0 auto 32px;
  padding: 0 16px;
}
.dl-group__title{
  font-size: 1.25rem;
  margin: 24px 0 8px;
  border-left: 4px solid #111;
  padding-left: 10px;
}
.dl-group__desc{
  color:#666;
  margin: 0 0 8px;
  font-size:.95rem;
}
.dl-list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
}
.dl-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:12px 0;
  border-bottom:1px solid #e5e7eb;
}
.dl-item__title{
  font-weight:600;
  line-height:1.5;
  flex:1 1 auto;
  min-width:0;
}
.dl-item__actions{
  display:flex;
  align-items:center;
  gap:12px;
  flex:0 0 auto;
}
.dl-item__note{
  color:#999;
  font-size:.85rem;
}
@media (max-width: 480px){
  .dl-item{
    flex-direction:column;
    align-items:stretch;
    gap:8px;
  }
  .dl-item__actions{
    justify-content:flex-end;
  }
}