@charset "UTF-8";
/* 資料ダウンロードの一覧・資料ごとのページ（フォーム）・完了・中間のページ（2026-10-11・開発サイトだけ。見た目は仮。2026-10-21 に一覧と資料ごとの作りに直した）。
   フォームの部品（.fdd-*）は mu-plugins/fiz-document-download.php が出す。値は fiz-tokens.css の変数。
   赤の決まり：文字に赤は使わない。赤はボタンと「必須」のバッジ（白字）だけ。エラー文は #212121 に太字＋左の線（赤い目印）で示す */
.page-title1 {
  background-image: url("../../../images/page/contact/contact-bg.webp");
}

.site-main__download.pad-tb {
  padding: var(--space-section-y) 0;
}
.site-main__download .wrap {
  max-width: 960px;
  font-family: var(--font-jp);
  color: var(--color-text);
}

/* 資料名と説明は、文節の途中で改行しない（コラムの題名 .column-card__title と同じ word-break: auto-phrase。対応していないブラウザでは今までどおり折れるだけ） */
.dl-card__title,
.dl-card__desc,
.dl-intro__title,
.dl-intro__desc,
.fdd-extra .fdd-check span {
  word-break: auto-phrase;
  overflow-wrap: anywhere; /* 1つの文節が行の幅より長いときは、その中で折る（スマホで横にはみ出さないように） */
  min-width: 0;
}

/* 資料の一覧ページ（/download/・2026-10-21）：カードを横に並べる。パソコンは2列、出す資料が3つ以上なら3列（.dl-list--3・1024px以上）、スマホは1列。
   カードの見た目は実績の一覧（.works-list-item）にそろえる：表紙は角丸 --radius-card＋同じ影、その下に題名・説明。文字に赤は使わず、赤はボタンだけ */
.dl-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-40);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media screen and (min-width: 768px) {
  .dl-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-48) var(--space-40);
  }
}
@media screen and (min-width: 1024px) {
  .dl-list--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.dl-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.dl-card__cover img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-card);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); /* 実績の一覧のサムネ（.works-thumb）と同じ影 */
}
.dl-card__title {
  margin: var(--space-24) 0 0;
  font-size: 20px;
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  text-wrap: balance; /* 2行に折れるとき、1文字だけ次の行に残らないようにする */
}
.dl-intro__title { text-wrap: balance; }
.dl-card__desc {
  flex: 1;
  margin: var(--space-8) 0 0;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-body);
}
.dl-card__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  align-self: flex-start;
  min-height: 56px;
  margin-top: var(--space-24);
  padding: 14px var(--space-40);
  border-radius: var(--radius-pill);
  /* 白地に赤い線と赤い文字。カーソルを乗せると赤く塗り、ほかのボタンと同じく少し浮く（2026-10-21 本人決定。理由：表紙もボタンも赤で、一覧が真っ赤に見えた） */
  border: 2px solid var(--color-primary);
  background: var(--color-white);
  color: var(--color-primary);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  line-height: 1.4;
  text-decoration: none;
  transition: background-color .3s var(--ease), color .3s var(--ease), box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease);
}
/* マウスは :hover、キーボードは :focus-visible。指で触る端末では塗らない（押した後に色が残るため） */
@media (hover: hover) {
  .dl-card__btn:hover {
    background: var(--color-primary);
    color: var(--color-white);
    box-shadow: 0 8px 16px rgba(0, 0, 0, .24);
    transform: translateY(-2px);
  }
}
.dl-card__btn:focus-visible {
  background: var(--color-primary);
  color: var(--color-white);
}
@media screen and (max-width: 767px) {
  .dl-card__btn { align-self: stretch; }
}

/* 資料ごとのページの紹介（表紙・資料名・説明1文・目次） */
.dl-intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  margin-bottom: var(--space-40);
}
.dl-intro__cover img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 1px var(--color-border);
}
.dl-intro__title {
  margin: 0 0 var(--space-16);
  font-size: 20px;
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
}
.dl-intro__desc {
  margin: 0;
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
}
.dl-intro__list-title {
  margin: var(--space-24) 0 0;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
}
.dl-intro__list {
  margin: var(--space-8) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
}
.dl-intro__list li {
  position: relative;
  padding-left: var(--space-24);
}
.dl-intro__list li:before { /* 赤い目印（小さな丸） */
  content: "";
  position: absolute;
  left: 4px;
  top: 0.75em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary);
}
@media screen and (min-width: 768px) {
  .dl-intro {
    flex-direction: row;
    align-items: center;
    gap: var(--space-48);
    margin-bottom: var(--space-64);
  }
  .dl-intro__cover { width: 45%; flex: none; }
  .dl-intro__title { font-size: 24px; }
}

/* スマホ（1023px 以下）：小さな表紙＋資料名＋説明1文の次にすぐフォーム。目次は出さない（2026-10-11 本人決定「長い紹介は出さない」を引き継ぐ） */
@media screen and (max-width: 1023px) {
  /* 帯を詰めるのはフォームのあるページ（資料ごと・完了・中間）だけ。一覧ページはほかのページと同じ帯を出す（2026-10-21） */
  body:not(.page-template-pagepage-download-php) .page-title1 { height: 96px; }
  .site-main__download.pad-tb { padding: var(--space-16) 0 var(--space-40); }
  .dl-intro {
    display: grid;
    grid-template-columns: 96px 1fr;
    grid-template-areas: "cover title" "desc desc";
    align-items: center;
    gap: var(--space-8) var(--space-16);
    margin-bottom: var(--space-16);
  }
  .dl-intro__cover { grid-area: cover; width: 96px; }
  .dl-intro__body { display: contents; }
  .dl-intro__title {
    grid-area: title;
    margin: 0;
    font-size: 20px;
  }
  .dl-intro__desc { grid-area: desc; }
  .dl-intro__list-title,
  .dl-intro__list { display: none; }
  .dl-form__title { margin-bottom: var(--space-16); padding-bottom: var(--space-8); }
  .fdd-field { margin-bottom: var(--space-16); }
}

/* フォーム */
.dl-form__title {
  margin: 0 0 var(--space-24);
  padding-bottom: var(--space-16);
  border-bottom: 2px solid var(--color-text);
  font-size: 20px;
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
}
.fdd-summary {
  margin-bottom: var(--space-24);
  padding: var(--space-16);
  border-left: 4px solid var(--color-primary);
  background: var(--color-bg-neutral);
  font-weight: var(--font-weight-bold);
}
.fdd-summary p { margin: 0; }
.fdd-field {
  margin-bottom: var(--space-24);
}
.fdd-label {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  margin-bottom: var(--space-8);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  line-height: 1.4;
}
.fdd-req {
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: var(--color-white);
  font-size: var(--font-size-min);
  font-weight: var(--font-weight-bold);
  line-height: 1.4;
}
.fdd-input {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 10px var(--space-16);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-normal);
  line-height: 1.5;
  box-sizing: border-box;
}
.fdd-input:focus-visible,
.fdd-check input:focus-visible {
  outline: 3px solid var(--color-text);
  outline-offset: 2px;
}
.fdd-field.is-error .fdd-input {
  border-color: var(--color-text);
  border-width: 2px;
}
.fdd-error {
  margin: var(--space-8) 0 0;
  padding-left: var(--space-8);
  border-left: 4px solid var(--color-primary);
  color: var(--color-text);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  line-height: 1.5;
}
.fdd-check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
  font-size: var(--font-size-body);
  line-height: 1.6;
  cursor: pointer;
}
.fdd-check input {
  flex: none;
  width: 24px;
  height: 24px;
  margin: 0;
  accent-color: var(--color-text);
}
.fdd-check a {
  color: inherit;
  text-decoration: underline;
}
/* あわせて受け取る資料（資料ごとのページのフォーム。チェック欄を縦に並べる） */
.fdd-extra .fdd-label { margin-top: 0; }
.fdd-extra .fdd-check + .fdd-check { margin-top: var(--space-8); }
/* 2026-10-21：「あわせて受け取る資料」を薄いグレーの枠で囲み、プライバシーポリシーの同意と別のものに見せる（どちらも同じ形のチェックが縦に並び、両方とも同意に見えた）。
   枠の後に細い線を引き、同意・注意書き・送信ボタンを線の下に一続きで置く。HTML は変えず、今ある .fdd-extra と .fdd-agree だけで組む。
   枠は出す資料があるときだけ出る（.fdd-extra が無ければ線も出ない）。値は fiz-tokens.css の変数・余白は8の倍数 */
.fdd-field.fdd-extra {
  margin-bottom: var(--space-24);
  padding: var(--space-16);
  border-radius: var(--radius-card);
  background: var(--color-bg-neutral);
}
@media screen and (min-width: 768px) {
  .fdd-field.fdd-extra { padding: var(--space-24); }
}
.fdd-extra + .fdd-agree {
  padding-top: var(--space-24);
  border-top: 1px solid var(--color-border);
}
.fdd-field.fdd-agree { margin-bottom: var(--space-16); } /* 同意・注意書き・送信ボタンの間は16px。線の下で一続きに見せる */
.fdd-note {
  margin: 0 0 var(--space-16);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-muted);
}
.fdd-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 14px var(--space-48);
  border: 0;
  border-radius: var(--radius-pill);
  /* 背景は doc-download.css の「押したときの動き」の規則で指定（赤のグラデーション） */
  color: var(--color-white);
  font-family: inherit;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  line-height: 1.4;
  text-decoration: none;
  cursor: pointer;
  transition: background-position .8s var(--ease), box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease);
}
/* 押したときの動きは doc-download.css にまとめた（サイトの主ボタンと同じ。2026-10-11） */
@media screen and (max-width: 767px) {
  .fdd-submit { width: 100%; }
}

/* 完了・中間のページ */
.fdd-thanks__lead {
  margin: 0 0 var(--space-16);
  font-size: 20px;
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
}
.fdd-thanks p,
.fdd-open p {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
}
.fdd-link {
  color: inherit;
  text-decoration: underline;
}
.fdd-open__doc {
  font-weight: var(--font-weight-bold);
}
@media (prefers-reduced-motion: reduce) {
  .fdd-submit,
  .dl-card__btn { transition: none; }
}