Style Guide β

カラー — アクセント

カラー — ベース & ニュートラル

タイポグラフィスケール

行間 (Line Height) ポリシー

シャドウ

ボーダーラジウス

レイアウト・ブレイクポイント

標準 CTA — .cm-btn

<a class="cm-btn" href="/inquiry/">お問い合わせはこちら</a>

サービスカード内 CTA — .service-banner-btn

<a class="service-banner-btn" href="/inquiry/">詳細はこちら →</a>

フォントファミリー

font-family: "Inter", "Noto Sans JP", sans-serif;

フォントウェイト

ページ最大見出し — h1.page-title

<h1 class="page-title">ページタイトル</h1>

セクションラベル + 見出し — .eyebrow + h2

■ トップページ（.page-top）での表示例 — 中央揃え

■ 下層ページ（.page-main）での表示例 — 左揃え

<p class="eyebrow">SECTION LABEL</p>
<h2>セクション見出し</h2>

補足見出し — .sub

■ トップページ（.page-top）での表示例 — 中央揃え

■ 下層ページ（.page-main）での表示例 — 左揃え

<p class="sub">サブ見出し・補足テキスト</p>

本文テキストコンテナ — .content-stack

<div class="content-stack">
  <p>本文テキスト。</p>
  <p>2段落目。</p>
</div>

標準パネル — .panel

<section class="panel" data-aos="fade-up" data-aos-duration="700">
  <p class="eyebrow">LABEL</p>
  <h2>見出し</h2>
  <!-- コンテンツ -->
</section>

イントロパネル — .panel.about-intro-dark

<section class="panel about-intro-dark" data-aos="fade-up" data-aos-duration="700">
  <h1 class="page-title">ページタイトル</h1>
  <div class="content-stack">
    <p>概要文。</p>
  </div>
</section>

インナーパネル — .inner-panel

<div class="inner-panel">
  <!-- ネストしたコンテンツ -->
</div>

カード内タイポグラフィ原則 (Card Typography Policy)

5-1. 汎用カード — .cards > .card（3カラム） ※太字中央・細字左寄せ

情報発信

ウェビナー・交流会・note

詳細はこちら →

「自分だけがうまくできていないのか」と思ったことはないか。ウェビナー・交流会・noteで、現場の生の声を集め、一緒に前に進む場をつくっています。

体系化

ナレッジ化・共同講座の開発

詳細はこちら →

現場で積み上げてきた経験やノウハウを整理し、次の世代に渡せる形にする。それがナレッジ化の目的です。

サポート

スポット支援・法人会員

詳細はこちら →

困ったときに頼れる専門家が、すぐそこにいる環境をつくります。

<div class="cards">
  <article class="card" data-aos="flip-left" data-aos-duration="400"
           data-aos-delay="0" data-aos-easing="ease" data-aos-once="true">
    <div class="card-banner">
      <img src="/assets/wp/photo.webp" alt="説明" loading="lazy">
      <h3>見出し</h3>
      <h4>サブ見出し</h4>
      <a class="card-banner-btn" href="/...">詳細はこちら →</a>
    </div>
    <div class="card-body"><p>本文。</p></div>
  </article>
</div>

5-2. サポートカード（3カラム） — .support-grid--3 > .support-card ※太字中央・細字左寄せ

※ モバイル（≤768px）では3個以上の子要素を持つ場合、自動でスワイプ可能なスライダーに変換されます（2個以下の場合は静的グリッドレイアウトを維持）

▼ 画像あり（アバター写真）

DIRECTOR

ディレクター

説明文テキスト。

DESIGNER

デザイナー

説明文テキスト。

ENGINEER

エンジニア

説明文テキスト。

<div class="support-grid support-grid--3">
  <div class="support-card" data-aos="flip-left" data-aos-duration="400"
       data-aos-delay="0" data-aos-easing="ease" data-aos-once="true">
    <div class="support-icon">
      <img src="/assets/wp/support-faces/director.webp" alt="ディレクター" loading="lazy">
    </div>
    <span class="en-label">DIRECTOR</span>
    <h3>ディレクター</h3>
    <p>説明文。</p>
  </div>
</div>

▼ 絵文字アイコン

<div class="support-grid support-grid--3">
  <article class="support-card">
    <div class="support-icon">🏔️</div>
    <span class="en-label">MISSION</span>
    <h3>ミッション</h3>
    <p>説明文。</p>
  </article>
</div>

▼ 画像なし（.detail-card 修飾子）

<div class="support-grid support-grid--3">
  <article class="support-card cm-card detail-card">
    <h3>見出し</h3>
    <p>説明文。</p>
  </article>
</div>

5-3. サポートカード（4カラム / 丸アバタ写真） — .support-grid > .support-card ※太字中央・細字左寄せ

※ モバイル（≤768px）では3個以上の子要素を持つ場合、自動でスワイプ可能なスライダーに変換されます

▼ 画像あり（アバター写真）

DIRECTOR

ディレクター

説明文テキスト。

DESIGNER

デザイナー

説明文テキスト。

ENGINEER

エンジニア

説明文テキスト。

MARKETER

マーケター

説明文テキスト。

<div class="support-grid">
  <div class="support-card" data-aos="flip-left" data-aos-duration="400"
       data-aos-delay="0" data-aos-easing="ease" data-aos-once="true">
    <div class="support-icon">
      <img src="/assets/wp/support-faces/director.webp" alt="ディレクター" loading="lazy">
    </div>
    <span class="en-label">DIRECTOR</span>
    <h3>ディレクター</h3>
    <p>説明文。</p>
  </div>
</div>

▼ 絵文字アイコン

<div class="support-grid">
  <article class="support-card">
    <div class="support-icon">🎯</div>
    <span class="en-label">PLAN</span>
    <h3>企画</h3>
    <p>説明文。</p>
  </article>
</div>

5-4. サービスカード — .service-grid > .service-card（3カラム） ※太字中央・細字左寄せ

<div class="service-grid">
  <article class="service-card" data-aos="flip-left" data-aos-duration="400"
           data-aos-delay="0" data-aos-easing="ease" data-aos-once="true">
    <div class="service-banner">
      <img class="service-banner-avatar" src="/assets/wp/photo.webp" alt="担当者名">
      <p class="service-banner-title">サービス名</p>
      <a class="service-banner-btn" href="/partner/">詳細はこちら →</a>
    </div>
    <div class="service-body"><p>説明文。</p></div>
  </article>
</div>

5-5. 制作実績カード — .tile-grid > .works-tile（3カラム） ※太字中央・細字左寄せ

DXプロジェクト支援

サイトを見る →

実績の概要文。DX、業務改善PJのPMO、イベントレポートなど実績の詳細を記載します。

<div class="tile-grid">
  <article class="works-tile" data-aos="flip-left" data-aos-duration="400"
           data-aos-delay="0" data-aos-easing="ease" data-aos-once="true">
    <div class="works-tile-banner">
      <img src="/assets/wp/toma.webp" alt="TOMAP" loading="lazy">
      <h3>DXプロジェクト支援</h3>
      <a class="works-tile-btn" href="https://tomap.co/" target="_blank"
         rel="noopener noreferrer">サイトを見る →</a>
    </div>
    <div class="works-tile-body">
      <p>実績の概要文。</p>
    </div>
  </article>
</div>

5-6. メンバーカード — .member-cards > .member-card（3カラム） ※太字中央・細字左寄せ

助田 正樹（すけだ）

代表理事

プロフィール文が入ります。

↗詳細プロフィール

<div class="member-cards">
  <article class="member-card" data-aos="flip-left" data-aos-duration="400"
           data-aos-delay="0" data-aos-easing="ease" data-aos-once="true">
    <img src="/assets/wp/photo.webp" alt="氏名" loading="lazy">
    <h3>氏名（ニックネーム）</h3>
    <p class="role">役職</p>
    <p>プロフィール文。</p>
    <div class="member-links">
      <a href="/member/...">↗詳細プロフィール</a>
      <a class="x-icon-link" href="https://x.com/handle" target="_blank"
         rel="noopener noreferrer">𝕏</a>
    </div>
  </article>
</div>

5-7. FAQカード — .faq-grid > .faq-card（2カラム）

<div class="faq-grid">
  <dl class="faq-card" data-aos="flip-left" data-aos-duration="400"
      data-aos-delay="0" data-aos-easing="ease" data-aos-once="true">
    <dt>Q：質問文</dt>
    <dd>A：回答文。</dd>
  </dl>
</div>

5-8. スポットCTAカード — .spot-cta-card.cm-card

<article class="spot-cta-card cm-card">
  <p class="spot-cta-label">INQUIRY</p>
  <p class="spot-cta-copy">メールはASAPで返信します</p>
  <a class="service-banner-btn cm-btn" href="/inquiry/">お問い合わせはこちら →</a>
</article>

5-9. Slackカード — .slack-cards > .slack-card.cm-card（ai-bu専用）

<div class="slack-cards">
  <div class="slack-card cm-card" data-aos="fade-up" data-aos-duration="500"
       data-aos-delay="0" data-aos-once="true">
    <p class="slack-card-label">🛠️ ラベル</p>
    <div class="slack-msgs">
      <div class="slack-msg">
        <span class="slack-avatar">M</span>
        <div class="slack-body">
          <span class="slack-name">ユーザー名</span>
          <p>メッセージ。</p>
        </div>
      </div>
      <div class="slack-reactions">
        <span class="slack-reaction">👍 3</span>
      </div>
    </div>
  </div>
</div>

.flow-list > .flow-item（縦並び）

<div class="flow-list">
  <div class="flow-item">
    <div class="flow-num">1</div>
    <div class="flow-content">
      <h3>ステップ見出し</h3>
      <p>説明文。</p>
    </div>
  </div>
</div>

.law-grid > .law-table

<table class="law-table">
  <tr>
    <th>法人名</th>
    <td>一般社団法人ディレクションサポート協会</td>
  </tr>
</table>

グリッドクラス一覧

※ すべてのグリッドは 960px 以下で 1カラムに折り返します。

使用パターン

<!-- data-aos-once="true" は必須 -->
<div class="support-card" data-aos="flip-left" data-aos-duration="400"
     data-aos-delay="0" data-aos-easing="ease" data-aos-once="true">
<div class="support-card" data-aos="flip-left" data-aos-duration="400"
     data-aos-delay="100" data-aos-easing="ease" data-aos-once="true">
<div class="support-card" data-aos="flip-left" data-aos-duration="400"
     data-aos-delay="200" data-aos-easing="ease" data-aos-once="true">

10-1. スキップリンク（キーボードナビゲーション）

/* main.js — 全ページ自動挿入 */
const skip = document.createElement('a');
skip.href = '#main-content';
skip.className = 'skip-link';
skip.textContent = 'メインコンテンツへスキップ';

10-2. フォーカスリング（:focus-visible）

/* マウス操作では非表示、Tab/キーボード操作時のみ表示 */
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
  border-radius: 4px;
}

10-3. 必須フィールドマーク（自動付与）

/* HTML — required を付けるだけで * が自動表示される */
<label for="name">お名前</label>
<input type="text" id="name" required aria-required="true" autocomplete="name">

/* CSS */
.form-field:has(input[required]) label::after,
.form-field:has(textarea[required]) label::after {
  content: " *";
  color: #c0392b;
  font-weight: 900;
}

10-4. フォームエラー状態（:user-invalid）

/* ユーザーが操作した後 invalid になった場合のみ赤枠 */
.form-field input:user-invalid,
.form-field textarea:user-invalid {
  border-color: #c0392b;
  background: #fff8f8;
}

/* JS から付与するフォールバック用クラス */
.form-field input.is-invalid { ... }

10-5. フォーム送信フィードバック

/* HTML — フォーム直下に配置 */
<div id="form-result" class="form-result" role="alert" aria-live="polite" hidden></div>

/* main.js が送信結果に応じてクラスを付与して hidden を解除 */
resultEl.className = 'form-result form-result--success';
resultEl.hidden = false;

10-6. ナビゲーション現在ページ表示（aria-current）

/* CSS */
nav a[aria-current="page"]:not(.nav-cta) {
  color: var(--blue-deep);
}
nav a[aria-current="page"]:not(.nav-cta)::after {
  opacity: 1;
  transform: scaleX(1); /* アンダーラインを表示 */
}

/* main.js — 全ページ自動実行 */
const path = window.location.pathname.replace(/\/$/, '');
for (const link of document.querySelectorAll('.site-header nav a')) {
  const linkPath = link.getAttribute('href').replace(/\/$/, '');
  if (linkPath === path || path.startsWith(linkPath + '/')) {
    link.setAttribute('aria-current', 'page');
  }
}

10-7. タッチターゲット最小サイズ

.member-links a:not(.x-icon-link),
.member-links .x-icon-link {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
}

10-8. ボタンホバートランジション

.card-banner-btn,
.service-banner-btn,
.works-tile-btn,
.cm-btn {
  transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.card-banner-btn:hover,
.service-banner-btn:hover,
.works-tile-btn:hover,
.cm-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.14);
}

/* 送信ボタン */
.form-submit {
  transition: background-color 0.2s ease, transform 0.15s ease;
}
.form-submit:active:not(:disabled) { transform: scale(0.98); }
.form-submit:disabled { opacity: 0.6; cursor: not-allowed; }

10-9. フォーム autocomplete 属性

<input type="text" id="name" name="name"
       required aria-required="true" autocomplete="name">
<input type="text" id="company" name="company" autocomplete="organization">
<input type="email" id="email" name="email"
       required aria-required="true" autocomplete="email">