/* datadrivenux.jp だけのスタイル
   読み込みは common.css → site.css の順。共通の部品・変数は common.css を見る（3サイト共通。正典 §8）。
   構成：2. 値の上書き  4. 部品（このサイトだけのもの）  6. スマホ（番号は common.css と合わせてある） */

/* ========== 2. 値の上書き ========== */
:root { --logo-w: 287px; --logo-h: 32px; --header-btn-w: 175px; --logo-w-sp: 20rem; --logo-h-sp: 2.2rem; --logo-top-sp: 1.9rem; }

/* ========== 4. 部品（datadrivenux.jp だけ） ========== */
/* 下層ページのキービジュアルの画像 */
.hero--uxmodeling { background-image: url(/assets/img/hero-uxmodeling.jpg); }
.hero--dataethnography { background-image: url(/assets/img/hero-dataethnography.jpg); }

/* 「７つの実行ステップ」：横長の箱（左に太字の名前、右に説明）を下向きの矢印でつなぐ */
.steps { display: flex; flex-direction: column; align-items: center; gap: 15px; }
.step { display: grid; grid-template-columns: 205px 1fr; column-gap: 19px; align-items: center; width: 100%; min-height: 75px; padding: 10px 20px 10px 0;
  border: var(--line); text-align: left; font-size: var(--card-size); line-height: var(--card-lh); }
.step b { text-align: right; font-weight: 700; }

/* 「２つの実現メソッド」のカード：本文の下に小さいボタン。ボタンは箱の下端にそろえる */
.card--action { display: flex; flex-direction: column; padding-bottom: 30px; }
.card--action p { margin-bottom: 24px; }
.card--action .btn { align-self: center; margin-top: auto; }

/* 「詳しく知るための記事」：枠の中に記事へのリンクを2つ並べる */
.articles { display: grid; grid-template-columns: 1fr 1fr; align-items: center; height: 80px; padding: 0 14px; border: var(--line); }
.articles a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 18px; line-height: 30px; text-decoration: none; }
.articles svg { width: 18px; height: 18px; fill: currentColor; }

/* 見出し・導入文・ボタンの区画（別のメソッドへの誘導） */
.band--more .lead { margin-bottom: 27px; }

/* ========== 6. スマホ（Wix のモバイル版：幅 320px 基準） ========== */
@media (max-width: 767px) {
  .steps { gap: 0.5rem; }
  .step { display: block; min-height: 0; padding: 1.1rem 1rem 1.2rem; font-size: 1.2rem; line-height: 1.8rem; }
  .step b { display: block; margin-bottom: 1rem; text-align: left; font-size: 1.4rem; line-height: 2.1rem; }
  .card--action { padding-bottom: 2rem; }
  .card--action p { margin-bottom: 1.4rem; }
  .articles { grid-template-columns: 1fr; height: auto; padding: 1rem; row-gap: 1rem; }
  .articles a { font-size: 1.2rem; line-height: 2.5rem; gap: 0.5rem; }
  .articles svg { width: 1.2rem; height: 1.2rem; }
  .band--more .lead { margin-bottom: 2rem; }
}