コンポーネントの見本 Components

<div class="ratio ratio-3x2">
  <img src="noimg.jpg" class="object-fit-contain">
</div>

<div class="ratio ratio-3x2">
  <img src="noimg.jpg" class="object-fit-cover">
</div>

<p class="mincho">.mincho 明朝体</p>

<p class="lh-lg">.lh-lg 行間広め</p>

<p><a href="" class="text-decoration-underline">リンク下線あり class="text-decoration-underline"</a></p>

<p><a href="" class="pe-none">リンク無効 class="pe-none"</a></p>

<p class="text-main">.text-main</p>

<p class="bg-main text-white p-3 mb-2 rounded-3">.bg-main text-white p-3 mb-2 rounded-3</p>

<p class="bg-sub text-white p-3 mb-2 rounded-3">.bg-sub text-white p-3 mb-2 rounded-3</p>

<p class="bg-sub2 text-white p-3 mb-2 rounded-3">.bg-sub2 text-white p-3 mb-2 rounded-3</p>

<p class="shadow-sm p-3 mb-2 rounded-3">shadow-sm p-3 mb-2 rounded-3</p>

<p class="bg-main--light p-3 mb-2 rounded-3">.bg-main--light p-3 mb-2 rounded-3</p>

<p class="bg-sub--light p-3 mb-2 rounded-3">.bg-sub--light p-3 mb-2 rounded-3</p>

<p class="bg-sub2--light p-3 mb-2 rounded-3">.bg-sub2--light p-3 mb-2 rounded-3</p>

<p class="border border-main p-3 mb-2 rounded-3">.border border-main ボーダー</p>

<p class="text-bg-main p-3 mb-2 rounded-3">.text-bg-main</p>

<p class="text-bg-sub p-3 mb-2 rounded-3">.text-bg-sub</p>

<p class="text-bg-sub2 p-3 mb-2 rounded-3">.text-bg-sub2</p>

<p class="line-clamp">長い文章が2行で省略されます。長い文章が2行で省略されます。長い文章が2行で省略されます。長い文章が2行で省略されます。長い文章が2行で省略されます。長い文章が2行で省略されます。長い文章が2行で省略されます。</p>

<p class="text-sm-mobile">SP（575px以下）でフォントサイズが縮小されます。</p>

<p class="text-note">※ 表示価格はすべて税込です。お住まいの地域によっては別途送料がかかる場合があります。長い注釈でも折り返し行が記号の後ろに揃います。</p>

<p>本文の中で<span class="text-marker">ここが重要なポイント</span>という形で使います。</p>

<p>色は<span class="text-marker text-marker--main">メインカラー</span>と<span class="text-marker text-marker--sub2">サブカラー2</span>の淡色もあります。</p>

<p><span class="text-marker fw-bold">太字と組み合わせた強調</span>もできます。</p>

<div class="alert alert-main--light">alert alert-main--light（メインカラーの淡色アラート）</div>

<div class="alert alert-gray--light">alert alert-gray--light（グレーの淡色アラート）</div>

<div class="container">
  <div class="container-inner-xl">
    ここに内容
  </div>
</div>

<div class="row g-3">
  <div class="col-lg-6">カラム1</div>
  <div class="col-lg-6">カラム2</div>
</div>

<div class="row">
  <div class="col-lg-4">カラム1</div>
  <div class="col-lg-4">カラム2</div>
  <div class="col-lg-4">カラム3</div>
</div>

<h2 class="text-main">h2 .text-main</h2>

<h2 class="headline bg bg-main">h2.headline.bg.bg-main</h2>

<h2 class="headline border-b border-main">h2.headline.border-b.border-main</h2>

<h2 class="headline border-s border-main">h2.headline.border-s.border-main</h2>

<h2 class="headline border-y border-main">h2.headline.border-y.border-main</h2>

<h2 class="headline border-sb border-main">h2.headline.border-sb.border-main</h2>

<h2 class="headline border-b border-sub">h2.headline.border-b.border-sub</h2>

<h2 class="headline border-s border-sub">h2.headline.border-s.border-sub</h2>

<h2 class="headline border-y border-sub">h2.headline.border-y.border-sub</h2>

<h2 class="headline border-sb border-sub">h2.headline.border-sb.border-sub</h2>

<h3 class="headline bg bg-main">h3.headline.bg.bg-main</h3>

<h3 class="headline border-s border-main">h3.headline.border-s.border-main</h3>

<a href="" class="btn btn-main">標準ボタン</a>

<a href="" class="btn btn-sub">サブカラーボタン</a>

<a href="" class="btn btn-outline-main">アウトラインボタン</a>

<a href="" class="btn btn-outline-sub">アウトラインボタン</a>

<a href="" class="btn btn-link">テキストリンク</a>

<a href="" class="btn btn-main rounded-pill">角丸メインボタン</a>

<a href="" class="btn btn-sub rounded-pill">角丸サブボタン</a>

<a href="" class="btn btn-main disabled">ボタン無効</a>

<a href="/test.html" class="btn btn-main btn-arrow btn-with-icon">内部リンク</a>

<a href="/test.html" class="btn btn-outline-main btn-arrow btn-with-icon">内部リンク</a>

<a href="https://www.google.com/?hl=ja" class="btn btn-main btn-external btn-with-icon" target="_blank" rel="noopener">外部リンク</a>

<a href="https://www.google.com/?hl=ja" class="btn btn-outline-main btn-external btn-with-icon" target="_blank" rel="noopener">外部リンク</a>

<a href="document.pdf" class="btn btn-main btn-pdf btn-with-icon" target="_blank" rel="noopener">PDFリンク</a>

<a href="document.pdf" class="btn btn-outline-main btn-pdf btn-with-icon" target="_blank" rel="noopener">PDFリンク</a>

<a href="/test.html" class="btn btn-link btn-arrow btn-with-icon">内部リンク</a>

<a href="https://www.google.com/?hl=ja" class="btn btn-link btn-external btn-with-icon" target="_blank" rel="noopener">外部リンク</a>

<a href="document.pdf" class="btn btn-link btn-pdf btn-with-icon" target="_blank" rel="noopener">PDFリンク</a>

<a href="" class="btn btn-main btn-sm">小さめボタン</a>

<a href="" class="btn btn-main w-100">幅100%ボタン</a>

<a href="" class="btn btn-main">最小幅リセットボタン</a>

<a href="" class="btn btn-main min-w-100">min-width ボタン</a>

<a href="" class="btn btn-main min-w-200">min-width 200px</a>

<a href="" class="btn btn-main min-w-300">min-width 300px</a>

<a href="/test.html" class="btn btn-main btn-arrow btn-with-icon">中央寄せテキスト</a>

<a href="/test.html" class="btn btn-main btn-arrow btn-with-icon btn-sm">小さいボタン中央寄せ</a>

<a href="https://www.google.com/?hl=ja" class="btn btn-outline-main btn-external btn-with-icon btn-sm" target="_blank" rel="noopener">外部リンク中央寄せ</a>

<a href="document.pdf" class="btn btn-outline-main btn-pdf btn-with-icon btn-sm" target="_blank" rel="noopener">PDF中央寄せ</a>

<table class="table table--stack">
  <colgroup>
    <col class="w-100px">
    <col class="w-auto">
  </colgroup>
  <tbody>
    <tr>
      <th>Header 1</th>
      <td>Data 1</td>
    </tr>
    <tr>
      <th>Header 2</th>
      <td>Data 2</td>
    </tr>
    <tr>
      <th>Header 3</th>
      <td>Data 3</td>
    </tr>
  </tbody>
</table>

<table class="table table--th-main table--stack">
  <colgroup>
    <col class="w-100px">
    <col class="w-auto">
  </colgroup>
  <tbody>
    <tr>
      <th>Header 1</th>
      <td>Data 1</td>
    </tr>
    <tr>
      <th>Header 2</th>
      <td>Data 2</td>
    </tr>
    <tr>
      <th>Header 3</th>
      <td>Data 3</td>
    </tr>
  </tbody>
</table>

<table class="table table-lg table--stack">
  <colgroup>
    <col class="w-100px">
    <col class="w-auto">
  </colgroup>
  <tbody>
    <tr>
      <th>Header 1</th>
      <td>Data 1</td>
    </tr>
    <tr>
      <th>Header 2</th>
      <td>Data 2</td>
    </tr>
    <tr>
      <th>Header 3</th>
      <td>Data 3</td>
    </tr>
  </tbody>
</table>

<table class="table no-responsive">
  <colgroup>
    <col class="w-100px">
    <col class="w-auto">
  </colgroup>
  <tbody>
    <tr>
      <th>Header 1</th>
      <td>Data 1</td>
    </tr>
    <tr>
      <th>Header 2</th>
      <td>Data 2</td>
    </tr>
    <tr>
      <th>Header 3</th>
      <td>Data 3</td>
    </tr>
  </tbody>
</table>

<table class="table table-bordered table--stack">
  <colgroup>
    <col class="w-100px">
    <col class="w-auto">
  </colgroup>
  <tbody>
    <tr>
      <th>Header 1</th>
      <td>Data 1</td>
    </tr>
    <tr>
      <th>Header 2</th>
      <td>Data 2</td>
    </tr>
    <tr>
      <th>Header 3</th>
      <td>Data 3</td>
    </tr>
  </tbody>
</table>

<table class="table table-bordered table-color table--stack">
  <colgroup>
    <col class="w-100px">
    <col class="w-auto">
  </colgroup>
  <tbody>
    <tr>
      <th>Header 1</th>
      <td>Data 1</td>
    </tr>
    <tr>
      <th>Header 2</th>
      <td>Data 2</td>
    </tr>
    <tr>
      <th>Header 3</th>
      <td>Data 3</td>
    </tr>
  </tbody>
</table>

<table class="table table-bordered">
  <colgroup>
    <col class="w-150px">
    <col class="w-auto">
  </colgroup>
  <thead>
    <tr>
      <th>thead Header 1</th>
      <td>thead Data 1</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Header 1</th>
      <td>Data 1</td>
    </tr>
    <tr>
      <th>Header 2</th>
      <td>Data 2</td>
    </tr>
    <tr>
      <th>Header 3</th>
      <td>Data 3</td>
    </tr>
  </tbody>
</table>

<table class="table table--top-header">
  <colgroup>
    <col class="w-150px">
    <col class="w-auto">
    <col class="w-auto">
  </colgroup>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
  </tbody>
</table>

<table class="table table--has-total table--stack">
  <colgroup>
    <col class="w-150px">
    <col class="w-auto">
    <col class="w-auto">
  </colgroup>
  <tbody>
    <tr>
      <th>Header 1</th>
      <td>Data 1</td>
      <td>Data 1</td>
    </tr>
    <tr>
      <th>Header 2</th>
      <td>Data 2</td>
      <td>Data 2</td>
    </tr>
    <tr>
      <th>Header 3</th>
      <td>Data 3</td>
      <td>Data 3</td>
    </tr>
  </tbody>
</table>

<table class="table table--two-header">
  <colgroup>
    <col class="w-150px">
    <col class="w-auto">
    <col class="w-auto">
    <col class="w-auto">
  </colgroup>
  <thead>
    <tr>
      <th></th>
      <th>Header 2</th>
      <th>Header 3</th>
      <th>Header 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Header 1</th>
      <td>Data 1</td>
      <td>Data 1</td>
      <td>Data 1</td>
    </tr>
    <tr>
      <th>Header 2</th>
      <td>Data 2</td>
      <td>Data 2</td>
      <td>Data 2</td>
    </tr>
    <tr>
      <th>Header 3</th>
      <td>Data 3</td>
      <td>Data 3</td>
      <td>Data 3</td>
    </tr>
  </tbody>
</table>

<div class="js-scrollable">
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
        <th>Header 4</th>
        <th>Header 5</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>Data 3</td>
        <td>Data 4</td>
        <td>Data 5</td>
      </tr>
    </tbody>
  </table>
</div>

<ul class="list list--dot">
  <li>ul class="list--dot"</li>
  <li>丸</li>
</ul>

<ul class="list list--sq">
  <li>ul class="list--sq"</li>
  <li>四角</li>
</ul>

<ol class="list">
  <li>ol</li>
  <li>丸番号</li>
</ol>

<ol class="list list--round-num">
  <li>ol class="list--round-num"</li>
  <li>丸番号</li>
</ol>

<ol class="list list--sq-num">
  <li>ol class="list--sq-num"</li>
  <li>四角番号</li>
</ol>

<ul class="list list--dot marker--sub">
  <li>ul class="list--dot marker--sub"</li>
  <li>マーカー色がサブカラーになります</li>
</ul>

<!-- ピル部分 -->
<ul class="nav nav--default nav-pills mb-2" id="pills-tab" role="tablist">
  <li class="nav-item" role="presentation">
    <button type="button" class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">ホーム</button>
  </li>
  <li class="nav-item" role="presentation">
    <button type="button" class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">プロフィール</button>
  </li>
  <li class="nav-item" role="presentation">
    <button type="button" class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">コンタクト</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-disabled-tab" data-bs-toggle="pill" data-bs-target="#pills-disabled" type="button" role="tab" aria-controls="pills-disabled" aria-selected="false" disabled>無効</button>
  </li>
</ul>

<!-- パネル部分 -->
<div class="tab-content" id="pills-tabContent">
  <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab" tabindex="0">
    ul class="nav nav--default nav-pills"
    <p>これは、<strong>ホームタブ</strong>に関連付けられたコンテンツのプレースホルダコンテンツ。...</p>
  </div>
  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab" tabindex="0">
    <p>これは、<strong>プロフィールタブ</strong>に関連付けられたコンテンツのプレースホルダコンテンツ。...</p>
  </div>
  <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab" tabindex="0">
    <p>これは、<strong>コンタクトタブ</strong>に関連付けられたコンテンツのプレースホルダコンテンツ。...</p>
  </div>
  <div class="tab-pane fade" id="pills-disabled" role="tabpanel" aria-labelledby="pills-disabled-tab" tabindex="0">
    <p>これは、<strong>無効タブ</strong>の関連コンテンツの一部のプレースホルダーコンテンツ。</p>
  </div>
</div>

<!-- ピル部分 -->
<ul class="nav nav--default nav-pills tab-sub mb-2" id="sub-tab" role="tablist">
  <li class="nav-item" role="presentation">
    <button type="button" class="nav-link active" id="sub-home-tab" data-bs-toggle="pill" data-bs-target="#sub-home" role="tab" aria-controls="sub-home" aria-selected="true">ホーム</button>
  </li>
  <li class="nav-item" role="presentation">
    <button type="button" class="nav-link" id="sub-profile-tab" data-bs-toggle="pill" data-bs-target="#sub-profile" role="tab" aria-controls="sub-profile" aria-selected="false">プロフィール</button>
  </li>
  <li class="nav-item" role="presentation">
    <button type="button" class="nav-link" id="sub-contact-tab" data-bs-toggle="pill" data-bs-target="#sub-contact" role="tab" aria-controls="sub-contact" aria-selected="false">コンタクト</button>
  </li>
</ul>

<!-- パネル部分 -->
<div class="tab-content" id="sub-tabContent">
  <div class="tab-pane fade show active" id="sub-home" role="tabpanel" aria-labelledby="sub-home-tab" tabindex="0">
    ul class="nav nav--default nav-pills tab-sub"
    <p>これは、<strong>ホームタブ</strong>に関連付けられたコンテンツのプレースホルダコンテンツ。...</p>
  </div>
  <div class="tab-pane fade" id="sub-profile" role="tabpanel" aria-labelledby="sub-profile-tab" tabindex="0">
    <p>これは、<strong>プロフィールタブ</strong>に関連付けられたコンテンツのプレースホルダコンテンツ。...</p>
  </div>
  <div class="tab-pane fade" id="sub-contact" role="tabpanel" aria-labelledby="sub-contact-tab" tabindex="0">
    <p>これは、<strong>コンタクトタブ</strong>に関連付けられたコンテンツのプレースホルダコンテンツ。...</p>
  </div>
</div>

<!-- ピル部分 -->
<ul class="nav nav--default nav-pills nav--belt mb-2" id="belt-tab" role="tablist">
  <li class="nav-item" role="presentation">
    <button type="button" class="nav-link active" id="belt-home-tab" data-bs-toggle="pill" data-bs-target="#belt-home" role="tab" aria-controls="belt-home" aria-selected="true">ホーム</button>
  </li>
  <li class="nav-item" role="presentation">
    <button type="button" class="nav-link" id="belt-profile-tab" data-bs-toggle="pill" data-bs-target="#belt-profile" role="tab" aria-controls="belt-profile" aria-selected="false">プロフィール</button>
  </li>
  <li class="nav-item" role="presentation">
    <button type="button" class="nav-link" id="belt-contact-tab" data-bs-toggle="pill" data-bs-target="#belt-contact" role="tab" aria-controls="belt-contact" aria-selected="false">コンタクト</button>
  </li>
</ul>

<!-- パネル部分 -->
<div class="tab-content" id="belt-tabContent">
  <div class="tab-pane fade show active" id="belt-home" role="tabpanel" aria-labelledby="belt-home-tab" tabindex="0">
    ul class="nav nav--default nav-pills nav--belt"
    <p>これは、<strong>ホームタブ</strong>に関連付けられたコンテンツのプレースホルダコンテンツ。...</p>
  </div>
  <div class="tab-pane fade" id="belt-profile" role="tabpanel" aria-labelledby="belt-profile-tab" tabindex="0">
    <p>これは、<strong>プロフィールタブ</strong>に関連付けられたコンテンツのプレースホルダコンテンツ。...</p>
  </div>
  <div class="tab-pane fade" id="belt-contact" role="tabpanel" aria-labelledby="belt-contact-tab" tabindex="0">
    <p>これは、<strong>コンタクトタブ</strong>に関連付けられたコンテンツのプレースホルダコンテンツ。...</p>
  </div>
</div>

<!-- ピル部分 -->
<ul class="nav nav--default nav-pills nav--btn mb-2" id="btn-tab" role="tablist">
  <li class="nav-item" role="presentation">
    <button type="button" class="nav-link active" id="btn-home-tab" data-bs-toggle="pill" data-bs-target="#btn-home" role="tab" aria-controls="btn-home" aria-selected="true">ホーム</button>
  </li>
  <li class="nav-item" role="presentation">
    <button type="button" class="nav-link" id="btn-profile-tab" data-bs-toggle="pill" data-bs-target="#btn-profile" role="tab" aria-controls="btn-profile" aria-selected="false">プロフィール</button>
  </li>
  <li class="nav-item" role="presentation">
    <button type="button" class="nav-link" id="btn-contact-tab" data-bs-toggle="pill" data-bs-target="#btn-contact" role="tab" aria-controls="btn-contact" aria-selected="false">コンタクト</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="btn-disabled-tab" data-bs-toggle="pill" data-bs-target="#btn-disabled" type="button" role="tab" aria-controls="btn-disabled" aria-selected="false" disabled>無効</button>
  </li>
</ul>

<!-- パネル部分 -->
<div class="tab-content" id="btn-tabContent">
  <div class="tab-pane fade show active" id="btn-home" role="tabpanel" aria-labelledby="btn-home-tab" tabindex="0">
    ul class="nav nav--default nav-pills nav--btn"
    <p>これは、<strong>ホームタブ</strong>に関連付けられたコンテンツのプレースホルダコンテンツ。...</p>
  </div>
  <div class="tab-pane fade" id="btn-profile" role="tabpanel" aria-labelledby="btn-profile-tab" tabindex="0">
    <p>これは、<strong>プロフィールタブ</strong>に関連付けられたコンテンツのプレースホルダコンテンツ。...</p>
  </div>
  <div class="tab-pane fade" id="btn-contact" role="tabpanel" aria-labelledby="btn-contact-tab" tabindex="0">
    <p>これは、<strong>コンタクトタブ</strong>に関連付けられたコンテンツのプレースホルダコンテンツ。...</p>
  </div>
  <div class="tab-pane fade" id="btn-disabled" role="tabpanel" aria-labelledby="btn-disabled-tab" tabindex="0">
    <p>これは、<strong>無効タブ</strong>の関連コンテンツの一部のプレースホルダーコンテンツ。</p>
  </div>
</div>

<!-- タブ部分 -->
<ul class="nav nav--default nav-tabs mb-2" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button type="button" class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-pane" role="tab" aria-controls="home-tab-pane" aria-selected="true">ホーム</button>
  </li>
  <li class="nav-item" role="presentation">
    <button type="button" class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile-tab-pane" role="tab" aria-controls="profile-tab-pane" aria-selected="false">プロフィール</button>
  </li>
  <li class="nav-item" role="presentation">
    <button type="button" class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact-tab-pane" role="tab" aria-controls="contact-tab-pane" aria-selected="false">コンタクト</button>
  </li>
  <li class="nav-item" role="presentation">
    <button type="button" class="nav-link" id="disabled-tab" data-bs-toggle="tab" data-bs-target="#disabled-tab-pane" role="tab" aria-controls="disabled-tab-pane" aria-selected="false" disabled>無効</button>
  </li>
</ul>

<!-- パネル部分 -->
<div id="myTabContent" class="tab-content">
  <div class="tab-pane active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">
    ul class="nav nav--default nav-tabs"
    <p>これは、<strong>ホームタブ</strong>に関連付けられたコンテンツのプレースホルダコンテンツ。...</p>
  </div>
  <div class="tab-pane" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">
    <p>これは、<strong>プロフィールタブ</strong>に関連付けられたコンテンツのプレースホルダコンテンツ。...</p>
  </div>
  <div class="tab-pane" id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">
    <p>これは、<strong>コンタクトタブ</strong>に関連付けられたコンテンツのプレースホルダコンテンツ。...</p>
  </div>
  <div class="tab-pane" id="disabled-tab-pane" role="tabpanel" aria-labelledby="disabled-tab" tabindex="0">
    <p>これは、<strong>無効タブ</strong>の関連コンテンツの一部のプレースホルダーコンテンツ。</p>
  </div>
</div>

<div class="tab-vertical">
  <div class="tab-vertical__inner">
    <div>
      <ul class="tab-vertical__container">
        <li class="tab-vertical__item slug_01 tab-vertical__item--active" data-target="slug_01">カテゴリー01</li>
        <li class="tab-vertical__item slug_02" data-target="slug_02">カテゴリー02</li>
        <li class="tab-vertical__item slug_03" data-target="slug_03">カテゴリー03</li>
      </ul>
    </div>
  </div>

  <div class="tab-vertical__content-wrapper">
    <div class="tab-vertical__content tab-vertical__content--active" data-content="slug_01">
      <ul class="topics-list">
        <li class="topics-item">
          <a href="#" class="topics-link">
            <div class="topics-meta">
              <p class="topics-date text-main fw-bold mb-0">2025/01/01</p>
              <span class="topics-category">カテゴリー01</span>
            </div>
            <div class="topics-content">
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p>
            </div>
          </a>
        </li>
        <li class="topics-item">
          <a href="#" class="topics-link">
            <div class="topics-meta">
              <p class="topics-date text-main fw-bold mb-0">2025/01/01</p>
              <span class="topics-category">カテゴリー01</span>
            </div>
            <div class="topics-content">
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p>
            </div>
          </a>
        </li>
      </ul>
    </div>
    <div class="tab-vertical__content" data-content="slug_02">
      <ul class="topics-list">
        <li class="topics-item">
          <a href="#" class="topics-link">
            <div class="topics-meta">
              <p class="topics-date text-main fw-bold mb-0">2025/01/01</p>
              <span class="topics-category">カテゴリー02</span>
            </div>
            <div class="topics-content">
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p>
            </div>
          </a>
        </li>
        <li class="topics-item">
          <a href="#" class="topics-link">
            <div class="topics-meta">
              <p class="topics-date text-main fw-bold mb-0">2025/01/01</p>
              <span class="topics-category">カテゴリー02</span>
            </div>
            <div class="topics-content">
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p>
            </div>
          </a>
        </li>
      </ul>
    </div>
    <div class="tab-vertical__content" data-content="slug_03">
      <ul class="topics-list">
        <li class="topics-item">
          <a href="#" class="topics-link">
            <div class="topics-meta">
              <p class="topics-date text-main fw-bold mb-0">2025/01/01</p>
              <span class="topics-category">カテゴリー03</span>
            </div>
            <div class="topics-content">
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p>
            </div>
          </a>
        </li>
        <li class="topics-item">
          <a href="#" class="topics-link">
            <div class="topics-meta">
              <p class="topics-date text-main fw-bold mb-0">2025/01/01</p>
              <span class="topics-category">カテゴリー03</span>
            </div>
            <div class="topics-content">
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p>
            </div>
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>

<div class="accordion accordion__bg mb-3" id="accordionExample-bg">
  <div class="accordion-item">
    <h3 class="accordion-header">
      <button type="button" class="accordion-button" data-bs-toggle="collapse" data-bs-target="#collapseOne-bg" aria-expanded="true" aria-controls="collapseOne-bg">
        アコーディオン・アイテム #1
      </button>
    </h3>
    <div id="collapseOne-bg" class="accordion-collapse collapse show" data-bs-parent="#accordionExample-bg">
      <div class="accordion-body">
        <strong>これが最初のアイテムのアコーディオン本体。</strong>...
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h3 class="accordion-header">
      <button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#collapseTwo-bg" aria-expanded="false" aria-controls="collapseTwo-bg">
        アコーディオン・アイテム #2
      </button>
    </h3>
    <div id="collapseTwo-bg" class="accordion-collapse collapse" data-bs-parent="#accordionExample-bg">
      <div class="accordion-body">
        <strong>これは2番目のアイテムのアコーディオン本体。</strong>...
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h3 class="accordion-header">
      <button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#collapseThree-bg" aria-expanded="false" aria-controls="collapseThree-bg">
        アコーディオン・アイテム #3
      </button>
    </h3>
    <div id="collapseThree-bg" class="accordion-collapse collapse" data-bs-parent="#accordionExample-bg">
      <div class="accordion-body">
        <strong>これは3番目のアイテムのアコーディオン本体。</strong>...
      </div>
    </div>
  </div>
</div>

<div class="accordion accordion__line" id="accordionExample-line">
  <div class="accordion-item">
    <h3 class="accordion-header">
      <button type="button" class="accordion-button" data-bs-toggle="collapse" data-bs-target="#collapseOne-line" aria-expanded="true" aria-controls="collapseOne-line">
        アコーディオン・アイテム #1
      </button>
    </h3>
    <div id="collapseOne-line" class="accordion-collapse collapse show" data-bs-parent="#accordionExample-line">
      <div class="accordion-body">
        <strong>これが最初のアイテムのアコーディオン本体。</strong>...
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h3 class="accordion-header">
      <button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#collapseTwo-line" aria-expanded="false" aria-controls="collapseTwo-line">
        アコーディオン・アイテム #2
      </button>
    </h3>
    <div id="collapseTwo-line" class="accordion-collapse collapse" data-bs-parent="#accordionExample-line">
      <div class="accordion-body">
        <strong>これは2番目のアイテムのアコーディオン本体。</strong>...
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h3 class="accordion-header">
      <button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#collapseThree-line" aria-expanded="false" aria-controls="collapseThree-line">
        アコーディオン・アイテム #3
      </button>
    </h3>
    <div id="collapseThree-line" class="accordion-collapse collapse" data-bs-parent="#accordionExample-line">
      <div class="accordion-body">
        <strong>これは3番目のアイテムのアコーディオン本体。</strong>...
      </div>
    </div>
  </div>
</div>

<div class="card">
  <div class="card-body">
    <h3 class="card-title">カードタイトル</h3>
    <p class="card-text mb-0">カードの本文テキスト。カードの本文テキスト。</p>
  </div>
</div>

<div class="card">
  <div class="card-img-top ratio ratio-3x2 bg-gray"></div>
  <div class="card-body">
    <h3 class="card-title">カードタイトル</h3>
    <p class="card-text mb-0">カードの本文テキスト。</p>
  </div>
</div>

<div class="row g-3">
  <div class="col-md-4">
    <a href="#" class="card card-hover h-100">
      <div class="card-img-top ratio ratio-3x2 bg-gray"></div>
      <div class="card-body">
        <h3 class="card-title">カード1</h3>
        <p class="card-text mb-0">カードの本文テキスト。</p>
      </div>
    </a>
  </div>
  <div class="col-md-4">
    <a href="#" class="card card-hover h-100">
      <div class="card-img-top ratio ratio-3x2 bg-gray"></div>
      <div class="card-body">
        <h3 class="card-title">カード2</h3>
        <p class="card-text mb-0">カードの本文テキスト。カードの本文テキスト。</p>
      </div>
    </a>
  </div>
  <div class="col-md-4">
    <a href="#" class="card card-hover h-100">
      <div class="card-img-top ratio ratio-3x2 bg-gray"></div>
      <div class="card-body">
        <h3 class="card-title">カード3</h3>
        <p class="card-text mb-0">カードの本文テキスト。</p>
      </div>
    </a>
  </div>
</div>

<ol class="step">
  <li class="step__item">
    <p class="step__title">お問い合わせ</p>
    <div class="step__body">フォームまたはお電話でご連絡ください。</div>
  </li>
  <li class="step__item">
    <p class="step__title">お打ち合わせ</p>
    <div class="step__body">ご要望をうかがい、内容とお見積りをご提案します。</div>
  </li>
  <li class="step__item">
    <p class="step__title">ご契約・着手</p>
    <div class="step__body">ご契約後、制作に着手します。</div>
  </li>
  <li class="step__item">
    <p class="step__title">納品</p>
    <div class="step__body">検収後、納品となります。</div>
  </li>
</ol>

<ol class="step">
  <li class="step__item">
    <p class="step__title">お問い合わせ</p>
  </li>
  <li class="step__item">
    <p class="step__title">お打ち合わせ</p>
  </li>
  <li class="step__item">
    <p class="step__title">納品</p>
  </li>
</ol>

<span class="badge text-bg-main">NEW</span>

<span class="badge text-bg-sub">カテゴリー</span>

<span class="badge text-bg-sub2">重要</span>

<span class="badge text-bg-main rounded-pill">ピル型バッジ</span>

<h3 class="mb-0">お知らせのタイトル <span class="badge text-bg-main">NEW</span></h3>

<p class="mb-0"><span class="badge text-bg-sub2">重要</span> 本文テキストの先頭に付ける例。</p>

<nav aria-label="パンくず">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="/">ホーム</a></li>
    <li class="breadcrumb-item"><a href="/service/">サービス</a></li>
    <li class="breadcrumb-item active" aria-current="page">Web制作</li>
  </ol>
</nav>

<nav aria-label="パンくず">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="/">ホーム</a></li>
    <li class="breadcrumb-item active" aria-current="page">会社概要</li>
  </ol>
</nav>

<a href="#" class="link-arrow">サービスの詳細を見る</a>

<a href="https://getbootstrap.jp/" class="link-external" target="_blank" rel="noopener">Bootstrap 5 公式ドキュメント</a>

<a href="#" class="link-pdf">会社案内をダウンロード</a>

<div class="more">
  <p>導入のテキストはそのまま見せておき、続きだけを畳みます。</p>
  <div class="collapse" id="moreDemo1">
    <p>ここが畳まれている続きの本文です。開いた状態ではボタンが「閉じる」に切り替わり、矢印が上向きになります。</p>
  </div>
  <button type="button" class="more__toggle collapsed" data-bs-toggle="collapse" data-bs-target="#moreDemo1" aria-expanded="false" aria-controls="moreDemo1">
    <span class="more__label more__label--open">もっと見る</span>
    <span class="more__label more__label--close">閉じる</span>
  </button>
</div>

<div class="more">
  <div class="collapse" id="moreDemo2">
    <p>畳まれている本文。トグルを中央に置きたいときは囲みに text-center を付けます。</p>
  </div>
  <div class="text-center">
    <button type="button" class="more__toggle collapsed" data-bs-toggle="collapse" data-bs-target="#moreDemo2" aria-expanded="false" aria-controls="moreDemo2">
      <span class="more__label more__label--open">もっと見る</span>
      <span class="more__label more__label--close">閉じる</span>
    </button>
  </div>
</div>