@charset "UTF-8";
/* 資料ダウンロード（会社概要＆実績資料）の見た目（2026-10-11・開発サイトだけ）。全ページ共通で読み込む。
   要件書: fiz-サイト運用/08-資料ダウンロードの要件書.md の 2-1
   色・余白・角丸の値は fiz-tokens.css の変数を使う（直書きしない）。common.css は SCSS から作られるので直接は変えず、こちらに足す。
   赤の使い方（fiz-tokens.css 冒頭の決まり）：文字に赤は使わない。赤はボタン・英字ラベル・アイコンの丸だけ。
   載せる場所：ヘッダーのボタン／スマホのメニューのボタン／フッターの CONTACT の右半分（資料ダウンロードのページでは出さない）／共通ブロック（template-parts/doc-download-block.php。meta-ads と sns-marketing のサービスページ・実績・実績のカテゴリの一覧）／コラムの記事のまとめの資料のカード（2026-10-21）／コラムの記事の左の列（目次の下）の導線（2026-10-21） */

.doc-icon {
  display: block;
  width: 20px;
  height: 20px;
  flex: none;
}

/* ---- ヘッダーのボタン（PC・1024px以上だけ。スマホはメニューの中） ---- */
.site-header__buttons .doc-button {
  display: none;
}
@media screen and (min-width: 1024px) {
  .site-header__buttons .doc-button {
    display: flex;
    align-items: center;
    height: 40px;
    margin-right: 10px;
    border-radius: var(--radius-pill);
    box-shadow: inset 0 0 0 2px var(--color-white); /* 白い線で囲む */
    transition: background-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
  }
  .site-header__buttons .doc-button__link {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    height: 100%;
    padding: 0 18px 0 16px;
    border-radius: inherit;
    color: var(--color-white);
    font-family: var(--font-jp);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-min);
    line-height: 1;
    white-space: nowrap;
    transition: color 0.3s var(--ease);
  }
  .site-header__buttons .doc-button__text {
    display: block;
    white-space: nowrap;
  }
  /* カーソルを載せると白地に赤の文字（「FIZに相談する」の動きと反対向き。2つが並ぶので、白地のボタンと線のボタンで役割が分かれる） */
  .site-header__buttons .doc-button:hover,
  .site-header__buttons .doc-button:focus-within {
    background: var(--color-white);
  }
  .site-header__buttons .doc-button:hover .doc-button__link,
  .site-header__buttons .doc-button:focus-within .doc-button__link {
    color: var(--color-primary);
  }
}
@media screen and (min-width: 1024px) and (max-width: 1279px) {
  /* ハンバーガーだけの幅（1024〜1279px）。3つ（資料・相談・メニュー）が1行に収まるよう左右を詰める */
  .site-header__buttons .doc-button { margin-right: 8px; }
  .site-header__buttons .doc-button__link { padding: 0 14px 0 12px; gap: 6px; }
}
@media screen and (min-width: 1280px) and (max-width: 1439px) {
  /* フルメニューが出る 1280〜1439px では、資料のボタンが増えたぶん、メニューと右のボタンが重なる（1280px で約56px）。
     メニューの項目の間隔を 40px → 28px に詰め、足りない幅のぶんだけ左に寄せる（1364px 以上は寄せない）。メニューの文字の大きさは変えない */
  .site-header__menuList-item:not(:first-child) {
    margin-left: 28px;
  }
  .site-header__menuList {
    transform: translate(calc(-50% - max(0px, (1364px - 100vw) / 2)), -50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .site-header__buttons .doc-button,
  .site-header__buttons .doc-button__link { transition: none; }
}

/* ---- スマホのメニュー（ハンバーガーを開いた中）のボタン：赤い地に白い線 ---- */
.drawer__menu__buttons .button-doc a {
  background: transparent;
  border-color: var(--color-white);
  color: var(--color-white);
}
.drawer__menu__buttons .button-doc .button__icon {
  display: flex;
  align-items: center;
}
.drawer__menu__buttons .button-doc .doc-icon {
  width: 20px;
  height: 20px;
}
/* 文字の太さは隣の「お問い合わせ」（本番からあるボタン。普通の太さ）にそろえる（2026-10-21。以前は太字で、2つの太さが違った） */

/* ---- ページ下の帯（フッターの CONTACT／DOCUMENT）：白地のセクションに、同じ大きさのカードを2枚（スマホは縦） ----
   2026-10-20：カード1枚の見た目（枠・余白・文字・赤いボタン・乗せたときの動き）は contact-card.css に移した
   （お問い合わせのカードを先に本番に出すため、資料DLの CSS から切り離した。カードの見た目を持つファイルは contact-card.css の1つだけ）。
   ここに残すのは、帯・2枚の並び・資料DLのカード（白抜きのボタン・ダウンロードのアイコン）だけに要るもの。
   このファイルは contact-card.css の後に読み込む（functions.php で依存に指定）。 */
.footer-cta {
  background: var(--color-white);
  padding: var(--space-40) 0;
}
.footer-cta__inner {
  width: calc(100% - 60px);
  max-width: var(--max-width-content);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-24);
}
.footer-cta__button--outline { background: var(--color-white); color: var(--color-primary); }
.footer-cta__button .doc-icon { width: 24px; height: 24px; flex: none; }
/* 押したときの動き（2026-10-11 本人指摘「アニメーションが悪い」）：サイトの主ボタン（サービスページ .svc-btn--primary・2026-09-24 本人決定）と同じ
   「赤のグラデーションが左→右へ流れる＋影＋少し浮く」。資料のページのボタン（.doc-block__btn・.fdd-submit）にも同じ背景を使う。一覧のカードのボタン（.dl-card__btn）は白地の線のボタン（page/download.css。2026-10-21 本人決定）。
   フッターの赤いボタン（.footer-cta__button--primary）の分は contact-card.css にある。白いボタンは浮くだけ。指で触る端末では動かさない（押した後に色が残るため） */
.doc-block__btn,
.fdd-submit {
  background: linear-gradient(90deg, #c10000 0%, #dc2618 50%, #c10000 100%);
  background-size: 200% 100%;
  background-position: 100% 0;
  box-shadow: 0 4px 8px rgba(0, 0, 0, .24);
}
@media (hover: hover) {
  .doc-block__btn:hover,
  .fdd-submit:hover {
    background-position: 0 0;
    color: var(--color-white);
    box-shadow: 0 8px 16px rgba(0, 0, 0, .24);
    transform: translateY(-2px);
  }
}
/* 資料のカード（2026-10-11 本人決定）：乗せるとカード全体が黒に反転するのは contact-card.css と同じ。
   白いボタンは、黒に反転したとき背景に紛れないよう赤く塗る（赤のままのボタンは contact-card.css 側）。
   マウスは :hover、キーボードは :focus-visible、指で触る端末は押している間（:active）だけ反転 */
@media (hover: hover) {
  /* 資料の札は赤く塗ったうえで、赤いボタンと同じく浮く（2026-10-11） */
  .footer-cta__card:hover .footer-cta__button--outline {
    background: var(--color-primary);
    color: var(--color-white);
    box-shadow: 0 8px 16px rgba(0, 0, 0, .4);
    transform: translateY(-2px);
  }
}
.footer-cta__card:focus-visible .footer-cta__button--outline,
.footer-cta__card:active .footer-cta__button--outline { background: var(--color-primary); color: var(--color-white); }
@media screen and (min-width: 768px) {
  .footer-cta { padding: var(--space-64) 0; }
  .footer-cta__inner { grid-template-columns: 1fr 1fr; }
  /* お問い合わせのカード1枚を横いっぱいに出す形。資料DLのスイッチを切っているとき（2026-10-20）と、資料ダウンロードのページ（2026-10-21。inc/footer.php）で使う */
  .footer-cta__inner--single { grid-template-columns: 1fr; }
}

/* ---- コラム記事のまとめ：お問い合わせのカードの横に資料のカード（2026-10-21 本人決定） ----
   HTML は inc/contact-card.php（ショートコード [お問い合わせ] の本文の最後の1つ）が、お問い合わせのカード（左）と資料のカード（右。template-parts/doc-card.php）を .fiz-contact-card--with-doc に入れて出す。
   ページ下の CONTACT（.footer-cta__inner）と同じ並び方：768px 以上は横に2枚・同じ幅、スマホは縦（お問い合わせが上）。
   カード1枚の見た目は contact-card.css（ページ下と共通）。ここは並べ方だけ。上下の余白は .fiz-contact-card（contact-card.css）のまま。
   記事の本文の幅は、目次が左に出る 1024〜1279px で最も狭く（1024px でカード1枚が約 308px）、そのままの 40px だと内側が約 228px になり、「資料をダウンロード」のボタン（約 224px）がぎりぎりで、
   ブラウザの違いで2行に折れるおそれがある。そのため 768px 以上 1279px 以下ではカードの内側の余白を 24px に詰める（実測：768px で348px・900px で414px・1024px で308px・1100px で346px・1280px 以上で420px）。
   1280px 以上はページ下のカードと同じ 40px */
.fiz-contact-card--with-doc {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-24);
}
@media screen and (min-width: 768px) {
  .fiz-contact-card--with-doc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
  .fiz-contact-card--with-doc .footer-cta__card { padding: var(--space-24); }
}

/* ---- コラム記事の左の列（目次の下）の資料の導線（2026-10-21 本人決定） ----
   HTML は template-parts/column/toc-doc.php が、資料のカードの部品（template-parts/doc-card.php）に modifier=aside で出す（.footer-cta__card--aside）。
   カード1枚の見た目（枠・角丸・英字ラベル・白抜きのボタン・乗せたときの黒い反転）は contact-card.css とこのファイルの上のものをそのまま使い、ここは左の列（幅 280px）に収める分だけ。
   中身（上から）：表紙（カードの幅いっぱい・16:9。上端にそろえる）→ 資料名 → 線のボタン「資料をダウンロード」。説明の文は入れない。
   英字ラベル DOCUMENT は出さない（2026-10-21 本人決定。理由：高さを取りすぎていた。表紙とボタンで資料だと分かる。部品は同じなので HTML には残り、ここで隠す）。
   出す・出さない（パソコン 1024px 以上だけ）と追従は page/column.css の .column-side と .column-side__doc が決める。ここには書かない。
   値の理由：
     - 内側の余白 16px（8の倍数）：列の幅 280px の内側を 246px 取り、ボタンの中に「アイコン＋資料をダウンロード」（約 176px）が1行で収まる幅を残すため。ページ下のカードの 24〜40px は広すぎる
     - 資料名 16px・行の高さ 1.5（2026-10-21 本人指摘「タイトルが大きすぎる・高さを取りすぎ」で 20px から下げた。本文の最小 16px。表紙に資料名が大きく出ているので、ここは添える大きさでよい）
     - ボタン：列の幅いっぱい・高さ 40px・左右 16px・折り返さない（white-space: nowrap）。パソコンだけで出すのでマウスで押せる高さで足り、画面が低いときに目次の見える行を減らさないため（2026-10-21 に 48px から下げた） */
.footer-cta__card.footer-cta__card--aside {
  width: 100%;
  padding: var(--space-16);
  overflow: hidden; /* 表紙の上の角を、カードの角丸で切る */
}
.footer-cta__card--aside .footer-cta__cover {
  display: block;
  align-self: stretch;
  margin: calc(-1 * var(--space-16)) calc(-1 * var(--space-16)) var(--space-16); /* カードの内側の余白を打ち消して、上・左右の端にそろえる */
}
.footer-cta__card--aside .footer-cta__cover img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.footer-cta__card--aside .footer-cta__label {
  display: none; /* 2026-10-21 本人決定（上のコメント） */
}
.footer-cta__card--aside .footer-cta__title {
  margin-top: 0;
  font-size: var(--font-size-body);
  line-height: 1.5;
}
.footer-cta__card--aside .footer-cta__button {
  align-self: stretch;
  margin-top: var(--space-16);
  min-height: 40px;
  padding: 0 var(--space-16);
  white-space: nowrap; /* 「資料をダウンロード」を折り返さない */
}

/* ---- 共通ブロック（サービスページ・実績の詳細・実績のカテゴリの一覧。2026-10-21 に、その資料の中身を出す形に） ----
   背景は薄いグレー（--color-bg-neutral）。赤はボタンと英字ラベルだけ（ページ途中の赤い帯は使わない決まり） */
.doc-block {
  width: calc(100% - 60px);
  max-width: var(--max-width-content);
  margin: var(--space-section-y) auto;
  font-family: var(--font-jp);
  color: var(--color-text);
}
.wrap .doc-block,
.wk-wrap .doc-block {
  width: 100%;
}
.doc-block__in {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  padding: var(--space-24);
  background: var(--color-bg-neutral);
  border-radius: var(--radius-card);
}
.doc-block__cover {
  flex: none;
}
.doc-block__cover img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 1px var(--color-border);
}
.doc-block__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}
.doc-block__eyebrow {
  margin: 0;
  font-family: var(--font-en);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-min);
  letter-spacing: 0.08em;
  line-height: 1;
  color: var(--color-primary); /* 英字ラベルは赤でよい */
}
.doc-block__title {
  margin: var(--space-8) 0 0;
  font-weight: var(--font-weight-bold);
  font-size: 20px;
  line-height: var(--line-height-heading);
  color: var(--color-text);
}
.doc-block__desc {
  margin: var(--space-16) 0 0;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-body);
  color: var(--color-text);
}
.doc-block__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  margin-top: var(--space-24);
  padding: 14px 32px;
  border-radius: var(--radius-pill);
  /* 背景は上の「押したときの動き」の規則で指定（赤のグラデーション） */
  color: var(--color-white);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  line-height: 1.4;
  text-decoration: none;
  transition: background-position .8s var(--ease), box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease);
}
@media screen and (min-width: 768px) {
  .doc-block__in {
    flex-direction: row;
    align-items: center;
    gap: var(--space-48);
    padding: var(--space-48);
  }
  .doc-block__cover {
    width: min(40%, 400px);
  }
  .doc-block__title {
    font-size: 28px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .doc-block__btn { transition: none; }
}

/* ---- 資料のブロックに資料が2つ以上のとき（実績の詳細だけ。2026-10-21 本人決定） ----
   ブロックは1つのまま（薄いグレーの面 .doc-block__in）。その中に資料のカード（template-parts/doc-card.php・modifier=block）を並べる。
   パソコン（2つなら 768px 以上で2列、3つなら 1024px 以上で3列）は横に、それより狭い幅とスマホは縦。並びは資料の一覧の順。資料が1つのブロックの見た目は変えない（上の .doc-block の規則のまま）。
   カード1枚の見た目（白い面・枠・角丸・DOCUMENT・資料名・線のボタン・乗せたときの黒い反転）は contact-card.css とこのファイルの上のものをそのまま使い、ここは並べ方と、
   表紙を上端いっぱいに出す分だけ（コラムの左の列の .footer-cta__card--aside と同じ作り）。
   値の理由：面の内側の余白 24px（スマホ）・40px（パソコン）、カードのあいだ 24px、カードの内側 24px（8の倍数）。3列のとき1200px の面でカード1枚が約 340px で、
   ボタンの中に「アイコン＋資料をダウンロード」（約 176px）が1行で収まる */
.doc-block--multi .doc-block__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: var(--space-24);
  padding: var(--space-24);
}
@media screen and (min-width: 768px) {
  .doc-block--multi .doc-block__in { padding: var(--space-40); }
  .doc-block--cols-2 .doc-block__in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (min-width: 1024px) {
  .doc-block--cols-3 .doc-block__in { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* 3列は 1024px 以上だけ。768〜1023px で3列にすると、カード1枚が約 190px になり、資料名が「インフルエンサ／ー」のように語の途中で折れる。その幅では縦に並べる */
}
.footer-cta__card.footer-cta__card--block {
  width: 100%;
  padding: var(--space-24);
  overflow: hidden; /* 表紙の上の角を、カードの角丸で切る */
}
.footer-cta__card--block .footer-cta__cover {
  display: block;
  align-self: stretch;
  margin: calc(-1 * var(--space-24)) calc(-1 * var(--space-24)) var(--space-24); /* カードの内側の余白を打ち消して、上・左右の端にそろえる */
}
.footer-cta__card--block .footer-cta__cover img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.footer-cta__card--block .footer-cta__label {
  line-height: 1;
}
.footer-cta__card--block .footer-cta__title {
  font-size: 20px;
}
.footer-cta__card--block .footer-cta__button {
  align-self: stretch;
  white-space: nowrap; /* 「資料をダウンロード」を折り返さない */
}