記事ページ_パーツリスト
記事タイトルにサブテキストがある場合はここに入ります。記事タイトルにサブテキストがある場合はここに入ります。

<h2 class="p-entry-heading2"><span>記事の大見出し</span></h2>

<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

<p><strong>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</strong></p>

<h3 class="p-entry-heading3">中見出し</h3>

<h3 class="p-entry-heading3 u-align-center">中見出しー中央揃え</h3>

<ul class="p-entry-list p-entry-list--disc">
  <li>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
  <li>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
  <li><a href="#" target="_blank" rel="noopener">テキストリンク（外部リンクには文末にアイコンが付きます）</a><br><span class="u-idt-pl-1">文頭のアイコンがないインデントテキスト1 文頭のアイコンがないインデントテキスト1 文頭のアイコンがないインデントテキスト1 文頭のアイコンがないインデントテキスト1 文頭のアイコンがないインデントテキスト1</span></li>
  <li>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<br>
    <ul class="p-entry-list p-entry-list--circle">
      <li>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
    </ul>
  </li>
</ul>

<ul class="p-entry-list p-entry-list--arrow-down">
  <li>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
</ul>

<ol class="p-entry-list p-entry-list--decimal-orange">
  <li>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
  <li>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
</ol>

<ol class="p-entry-list p-entry-list--decimal">
  <li>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
</ol>

<p class="u-align-right-pc">右寄せテキスト（<span>u-align-right-pc：</span>PCでは右寄せ。SPでは左寄せ） 右寄せテキスト 右寄せテキスト 右寄せテキスト<br>右寄せテキスト</p>

<h4 class="p-entry-heading4">中見出し2</h4>

<h5 class="p-entry-heading5">小見出し</h5>

<p><a href="#" target="_blank" rel="noopener">テキストリンク（外部リンクには文末にアイコンが付きます</a></p>

<div class="c-table-scroll">
  <table class="c-table c-table--framed"><colgroup><col style="width: 24.9467%;"><col style="width: 24.9467%;"><col style="width: 24.9467%;"><col style="width: 24.9467%;"></colgroup>
    <tbody>
      <tr>
        <th style="text-align: center;">見出し</th>
        <th style="text-align: center;">見出し</th>
        <th style="text-align: center;">見出し</th>
        <th style="text-align: center;">見出し</th>
      </tr>
      <tr>
        <td>
          <p>テキストテキストテキストテキスト</p>
          <p>テキストテキストテキストテキスト</p>
        </td>
        <td>
          <p>テキストテキストテキストテキスト</p>
          <p>テキストテキストテキストテキスト</p>
        </td>
        <td>
          <p>テキストテキストテキストテキスト</p>
          <p>テキストテキストテキストテキスト</p>
        </td>
        <td>
          <ul class="p-entry-list p-entry-list--disc">
            <li>テキストテキストテキストテキスト</li>
            <li>テキストテキストテキストテキスト</li>
          </ul>
        </td>
      </tr>
    </tbody>
  </table>
</div>

<h4 class="p-entry-heading4">プログラム</h4>

<div class="p-entry-program">
  <div class="p-entry-program__time">12:00～23:59</div>
  <div class="p-entry-program__colum3">
    <div class="p-entry-program__colum3-item"><span class="p-entry-program__number">[A-01]</span> <span class="p-entry-program__title">プログラムタイトル</span> <span class="p-entry-program__content"> プログラムの内容をここに記載プログラムの内容をここに記載プログラムの内容をここに記載プログラムの内容をここに記載 </span> <span class="p-entry-program__content"> プログラムの内容をここに記載プログラムの内容をここに記載プログラムの内容をここに記載プログラムの内容をここに記載 </span></div>
    <div class="p-entry-program__colum3-item"><span class="p-entry-program__number">[A-01]</span> <span class="p-entry-program__title">プログラムタイトル</span> <span class="p-entry-program__content"> プログラムの内容をここに記載プログラムの内容をここに記載プログラムの内容をここに記載プログラムの内容をここに記載 </span> <span class="p-entry-program__content"> プログラムの内容をここに記載プログラムの内容をここに記載プログラムの内容をここに記載プログラムの内容をここに記載 </span></div>
    <div class="p-entry-program__colum3-item"><span class="p-entry-program__number">[A-01]</span> <span class="p-entry-program__title">プログラムタイトル</span> <span class="p-entry-program__content"> プログラムの内容をここに記載プログラムの内容をここに記載プログラムの内容をここに記載プログラムの内容をここに記載 </span> <span class="p-entry-program__content"> プログラムの内容をここに記載プログラムの内容をここに記載プログラムの内容をここに記載プログラムの内容をここに記載 </span></div>
  </div>
</div>

<div class="p-entry-program u-pt-0">
  <div class="p-entry-program__time">12:00～23:59</div>
  <div class="p-entry-program__colum2">
    <div class="p-entry-program__colum2-item"><span class="p-entry-program__number">[A-01]</span> <span class="p-entry-program__title">プログラムタイトル</span> <span class="p-entry-program__content"> プログラムの内容をここに記載プログラムの内容をここに記載プログラムの内容をここに記載プログラムの内容をここに記載 </span> <span class="p-entry-program__content"> プログラムの内容をここに記載プログラムの内容をここに記載プログラムの内容をここに記載プログラムの内容をここに記載 </span></div>
    <div class="p-entry-program__colum2-item"><span class="p-entry-program__number">[A-01]</span> <span class="p-entry-program__title">プログラムタイトル</span> <span class="p-entry-program__content"> プログラムの内容をここに記載プログラムの内容をここに記載プログラムの内容をここに記載プログラムの内容をここに記載 </span> <span class="p-entry-program__content"> プログラムの内容をここに記載プログラムの内容をここに記載プログラムの内容をここに記載プログラムの内容をここに記載 </span></div>
  </div>
</div>

<div class="p-entry-program">
  <div class="p-entry-program__time">12:00～23:59</div>
  <div class="p-entry-program__colum1"><span class="p-entry-program__number">[A-01]</span> <span class="p-entry-program__title">プログラムタイトル</span> <span class="p-entry-program__content"> プログラムの内容をここに記載プログラムの内容をここに記載プログラムの内容をここに記載プログラムの内容をここに記載 </span> <span class="p-entry-program__content"> プログラムの内容をここに記載プログラムの内容をここに記載プログラムの内容をここに記載プログラムの内容をここに記載 </span></div>
</div>

<div class="p-entry-program u-mb-44 u-mb-30-sp">
  <div class="p-entry-program__time">12:00～23:59</div>
  <div class="p-entry-program__colum1"><span class="p-entry-program__text">&nbsp;休憩</span><span class="p-entry-program__text"></span><span class="p-entry-program__text"></span></div>
</div>

<h4 class="p-entry-heading4">画像レイアウト</h4>

<div class="p-entry-news-img">
  <picture>
    <source srcset="/assets/img/news/img01_sp.png" media="(max-width: 768px)">
    <img src="/assets/img/news/img01.png" width="1000" height="200" alt="" loading="lazy">
  </picture>
</div>

<div class="p-entry-news-img">
  <picture>
    <source srcset="/assets/img/news/img01_sp.png" media="(max-width: 768px)">
    <img src="/assets/img/news/img01.png" width="1000" height="200" alt="" loading="lazy">
  </picture>
  <p class="p-entry-news-img__text">画像の説明文</p>
</div>

<div class="p-entry-news-img u-align-center u-mb-10">
  <picture>
    <source srcset="/assets/img/news/img01_sp.png" media="(max-width: 768px)">
    <img src="/assets/img/news/img02.png" width="800" height="200" alt="" loading="lazy">
  </picture>
</div>

<p class="u-fs-14">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

<p class="p-entry-note">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

<div class="p-entry-news-img">
  <picture>
    <source srcset="/assets/img/news/img03_sp.png" media="(max-width: 768px)">
    <img src="/assets/img/news/img03.png" width="515" height="200" alt="" loading="lazy">
  </picture>
</div>

<div class="p-entry-introduce">
  <div class="p-entry-introduce__img">
    <img src="/assets/img/news/profile-img.png" width="150" height="200" alt="">
  </div>
  <div class="p-entry-introduce__text">
    <div class="p-entry-introduce__text-name">タレント名など</div>
    <div class="p-entry-introduce__text-comment">出演コメント</div>
    <p>
      テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
    </p>
  </div>
</div>

<div class="p-flex p-flex--gap-48 p-flex--gap-20-sp p-flex--justify-end p-flex--column-sp u-mb-30">
  <div class="p-flex__item--w-40per u-ml-40 u-ml-0-sp">
    <img src="/assets/img/news/img04.png" width="384" height="200" alt="">
  </div>
  <div class="p-flex__item--w-55per">
    <p class="u-lh-2xlarge">テキストエリア横幅55% テキストエリア横幅55% テキストエリア横幅55% テキストエリア横幅55%
      テキストエリア横幅55% テキストエリア横幅55% テキストエリア横幅55% テキストエリア横幅55% テキストエリア横幅55% テキストエリア横幅55%
      テキストエリア横幅55% テキストエリア横幅55% テキストエリア横幅55% テキストエリア横幅55% テキストエリア横幅55% テキストエリア横幅55%
    </p>
  </div>
</div>

<div class="p-grid u-mb-44">
  <h4 class="p-entry-heading5-large u-mb-10">h4タイトル h4タイトル h4タイトル h4タイトル h4タイトル h4タイトル
    h4タイトル h4タイトル h4タイトル</h4>
  <div class="p-flex p-flex--justify-between p-flex--column-sp p-flex--gap-10-sp">
    <div class="p-flex__item--w-40per">
      <picture>
        <source srcset="/assets/img/news/img04_sp.png" media="(max-width: 768px)">
        <img src="/assets/img/news/img04.png" width="400" height="200" alt="" loading="lazy">
      </picture>
    </div>
    <div class="p-flex__item--w-40per">
      <picture>
        <source srcset="/assets/img/news/img04_sp.png" media="(max-width: 768px)">
        <img src="/assets/img/news/img04.png" width="400" height="200" alt="" loading="lazy">
      </picture>
    </div>
  </div>
</div>

<div class="p-flex p-flex--justify-between p-flex--column-sp p-flex--gap-10-sp u-mb-44">
  <div class="p-flex__item--w-40per">
    <h4 class="p-entry-heading5-large u-mb-10">h4タイトルh4タイトルh4タイトルh4タイトル</h4>
    <picture>
      <source srcset="/assets/img/news/img04_sp.png" media="(max-width: 768px)">
      <img src="/assets/img/news/img04.png" width="400" height="200" alt="" loading="lazy">
    </picture>
  </div>
  <div class="p-flex__item--w-40per">
    <h4 class="p-entry-heading5-large u-mb-10">h4タイトルh4タイトルh4タイトルh4タイトル</h4>
    <picture>
      <source srcset="/assets/img/news/img04_sp.png" media="(max-width: 768px)">
      <img src="/assets/img/news/img04.png" width="400" height="200" alt="" loading="lazy">
    </picture>
  </div>
</div>

<div class="p-flex p-flex--justify-between p-flex--column-sp p-flex--gap-10-sp u-ml-40 u-ml-0-sp u-mb-44">
  <div class="p-flex__item--w-40per">
    <picture>
      <source srcset="/assets/img/news/img04_sp.png" media="(max-width: 768px)">
      <img src="/assets/img/news/img04.png" width="382" height="200" alt="" loading="lazy">
    </picture>
    <p class="u-align-center u-lh-2xlarge u-mt-15"> 画像の説明文画像の説明文 画像の説明文 画像の説明文 画像の説明文
    </p>
  </div>
  <div class="p-flex__item--w-40per">
    <picture>
      <source srcset="/assets/img/news/img04_sp.png" media="(max-width: 768px)">
      <img src="/assets/img/news/img04.png" width="382" height="200" alt="" loading="lazy">
    </picture>
    <p class="u-align-center u-lh-2xlarge u-mt-15"> 画像の説明文画像の説明文 画像の説明文 画像の説明文 画像の説明文
    </p>
  </div>
</div>

<div class="p-flex p-flex--wrap p-flex--gap-20  p-flex--gap-10-sp u-mb-44">
  <div class="p-flex__item--half">
    <picture>
      <source srcset="/assets/img/news/img05_sp.png" media="(max-width: 768px)">
      <img src="/assets/img/news/img05.png" width="490" height="200" alt="" loading="lazy">
    </picture>
  </div>
  <div class="p-flex__item--half">
    <picture>
      <source srcset="/assets/img/news/img05_sp.png" media="(max-width: 768px)">
      <img src="/assets/img/news/img05.png" width="490" height="200" alt="" loading="lazy">
    </picture>
  </div>
  <div class="p-flex__item--half">
    <picture>
      <source srcset="/assets/img/news/img05_sp.png" media="(max-width: 768px)">
      <img src="/assets/img/news/img05.png" width="490" height="200" alt="" loading="lazy">
    </picture>
  </div>
  <div class="p-flex__item--half">
    <picture>
      <source srcset="/assets/img/news/img05_sp.png" media="(max-width: 768px)">
      <img src="/assets/img/news/img05.png" width="490" height="200" alt="" loading="lazy">
    </picture>
  </div>
</div>

<div class="p-flex p-flex--gap-50 p-flex--gap-30-sp p-flex--column-sp u-mb-44">
  <div class="p-flex__item--3col p-flex__item--1col-sp">
    <picture>
      <source srcset="/assets/img/news/img06_sp.png" media="(max-width: 768px)">
      <img src="/assets/img/news/img06.png" width="490" height="200" alt="" loading="lazy">
    </picture>
    <p class="u-align-center u-lh-2xlarge u-mt-15">画像の説明文画像の説明文 画像の説明文 画像の説明文 画像の説明文</p>
  </div>
  <div class="p-flex__item--3col p-flex__item--1col-sp">
    <picture>
      <source srcset="/assets/img/news/img06_sp.png" media="(max-width: 768px)">
      <img src="/assets/img/news/img06.png" width="490" height="200" alt="" loading="lazy">
    </picture>
    <p class="u-align-center u-lh-2xlarge u-mt-15">画像の説明文画像の説明文 画像の説明文 画像の説明文 画像の説明文</p>
  </div>
  <div class="p-flex__item--3col p-flex__item--1col-sp">
    <picture>
      <source srcset="/assets/img/news/img06_sp.png" media="(max-width: 768px)">
      <img src="/assets/img/news/img06.png" width="490" height="200" alt="" loading="lazy">
    </picture>
    <p class="u-align-center u-lh-2xlarge u-mt-15">画像の説明文画像の説明文 画像の説明文 画像の説明文 画像の説明文</p>
  </div>
</div>

<h4 class="p-entry-heading4">テーブル：罫線1行に3カラム</h4>

<p class="u-mb-10">テキストテキストテキストテキストテキストテキストテキスト</p>

<table class="p-entry-table p-entry-table--colum3 u-mb-44">
  <thead>
    <tr>
      <th>業種・組織形態</th>
      <th>資本金</th>
      <th>従業員数</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>製造業・建設業・運輸業</td>
      <td>3億円</td>
      <td>300人</td>
    </tr>
  </tbody>
</table>

<h4 class="p-entry-heading4 u-mb-5">テーブル：罫線1行に2カラム</h4>

<table class="p-entry-table p-entry-table--colum2 u-mb-44">
  <thead>
    <tr>
      <th>業種・組織形態</th>
      <th>従業員数</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>製造業・建設業・運輸業</td>
      <td>300人</td>
    </tr>
  </tbody>
</table>

<h4 class="p-entry-heading4 u-mb-5">リスト：罫線2つに1カラム</h4>

<div class="p-entry-description-list u-mb-44">
  <dl>
    <dt>タイトル：</dt>
    <dd>テキストテキストテキストテキストテキストテキストテキスト</dd>
  </dl>
  <dl>
    <dt>動画URL：</dt>
    <dd>
      <a href="" target="_blank" rel="noopener">「二度手間」篇（30秒）</a><br>
      <a href="" target="_blank" rel="noopener">「誤請求」篇（30秒）</a>
    </dd>
  </dl>
</div>

<h4 class="p-entry-heading4 u-mb-5">リスト：罫線2つに2カラム</h4>

<div class="p-entry-description-list u-mb-44">
  <!-- 社名 -->
  <div class="p-entry-description-list--split">
    <dl>
      <dt>社名</dt>
      <dd>テキストテキストテキストテキストテキストテキストテキスト</dd>
    </dl>
  </div>
  <!-- /社名 -->
  <!-- 動画URL -->
  <div class="p-entry-description-list--split">
    <dl>
      <dt>動画URL：</dt>
      <dd>
        <a href="" target="_blank" rel="noopener">株式会社ラクスライトクラウド</a><br>
        <a href="" target="_blank" rel="noopener">株式会社ラクスパートナーズ</a><br>
        <a href="" target="_blank" rel="noopener">株式会社ラクスみらい</a><br>
        <a href="" target="_blank" rel="noopener">RAKUS Vietnam Co., Ltd.</a>
      </dd>
    </dl>
  </div>
  <!-- /動画URL -->

  <!-- 代表取締役 -->
  <div class="p-entry-description-list--split">
    <dl>
      <dt>代表取締役</dt>
      <dd>中村崇則</dd>
    </dl>
  </div>
  <!-- /代表取締役 -->
  <!-- 事業者番号 -->
  <div class="p-entry-description-list--split">
    <dl>
      <dt>事業者番号</dt>
      <dd>
        届出電気通信事業者（旧一般第二種電気通信事業者）： E17-2681
      </dd>
    </dl>
  </div>
  <!-- /事業者番号 -->
</div>

<h3 class="p-entry-heading3">本件に関するお問い合わせ先</h3>

<h4 class="p-entry-heading4 u-mb-5">株式会社ラクス　楽楽販売事業部</h4>
<div class="p-entry-description-list u-mb-44">
  <!-- 代表取締役 -->
  <div class="p-entry-description-list--split">
    <dl>
      <dt>代表取締役</dt>
      <dd>中村崇則</dd>
    </dl>
  </div>
  <!-- /代表取締役 -->

  <!-- 事業内容 -->
  <div class="p-entry-description-list--split">
    <dl>
      <dt>事業内容</dt>
      <dd>クラウドサービス事業</dd>
    </dl>
  </div>
  <!-- /事業内容 -->

  <!-- TEL -->
  <div class="p-entry-description-list--split">
    <dl>
      <dt>TEL</dt>
      <dd>03-5369-4845</dd>
    </dl>
  </div>
  <!-- TEL -->

  <!-- e-mail -->
  <div class="p-entry-description-list--split">
    <dl>
      <dt>e-mail</dt>
      <dd>
        <a href="">rakurakuhanbai@rakus.co.jp</a>
      </dd>
    </dl>
  </div>
  <!-- e-mail -->
</div>