<div class="c-breadcrumb" role="navigation" aria-label="現在地表示">
  <div class="c-breadcrumb__inner">
    <span><a href="/">ホーム</a></span>
        <span><a href="/category/">カテゴリー</a></span>
        <span>ページタイトル</span>
  </div>
</div>

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement":
  [

    {
      "@type": "ListItem",
      "position": 1,
      "item":
      {
        "@id": "/category/",
        "name": "カテゴリー"
      }
    },

    {
      "@type": "ListItem",
      "position": 2,
      "item":
      {
        "@id": "",
        "name": "ページタイトル"
      }
    }

  ]
}
</script>

<ul class="c-headline">
    <li class="c-headline__item">
      <span class="c-headline__date">2017.10.01 </span>
      <p class="c-headline__title"><a href="">ニュースタイトルが入りますニュースタイトルが入ります。ニュースタイトルが入りますニュースタイトルが入ります。<span class="is-new">New<span></a></p>
    </li>
     <li class="c-headline__item">
      <span class="c-headline__date">2017.10.01 </span>
      <p class="c-headline__title"><a href="">ニュースタイトルが入りますニュースタイトルが入ります。ニュースタイトルが入りますニュースタイトルが入ります。</a></p>
    </li>
     <li class="c-headline__item">
      <span class="c-headline__date">2017.10.01 </span>
      <p class="c-headline__title"><a href="">ニュースタイトルが入りますニュースタイトルが入ります。ニュースタイトルが入りますニュースタイトルが入ります。</a></p>
    </li>

   </ul>

<ul class="c-headline-search">
    <li class="c-headline-search__item">
      <p class="c-headline-search__title"><a href="">ニュースタイトルが入りますニュースタイトルが入ります。ニュースタイトルが入りますニュースタイトルが入ります。</a></p>
      <p class="c-headline-search__url">news/index.html</p>
      <p class="c-headline-search__text">ニュースニュースニュースニュース<span class="c-headline-search__sub-text"> 2018.01.01</span></p>
    </li>
   </ul>

<div class="c-keyword-search" role="search">
  <div class="c-keyword-search__body">
    <p class="c-keyword-search__title">検索キーワード</p>
    <input type="text" name="#" class="c-keyword-search__input" value="" placeholder="キーワードを入力してください" autocomplete="off" aria-autocomplete="list" role="textbox">
    <button type="submit" class="c-keyword-search__button"><i class="material-icons">search</i></button>
  </div>
  <div class="c-keyword-search__control">
    <p class="c-keyword-search__control-lead">100アイテムが検索キーワードに該当</p>
    <div class="c-keyword-search__control-item">
      <p class="c-keyword-search__control-title">絞り込み</p>
      <select class="c-keyword-search__control-select">
        <option>すべて</option>
        <option>すべて</option>
        <option>すべて</option>
        <option>すべて</option>
      </select>
    </div>
    <div class="c-keyword-search__control-item">
      <p class="c-keyword-search__control-title">ソート</p>
      <select class="c-keyword-search__control-select">
        <option>関連度</option>
        <option>関連度</option>
        <option>関連度</option>
        <option>関連度</option>
      </select>
    </div>
  </div>
</div>

<div class="c-menu">
  <h3 class="c-menu__title">カテゴリー名</h3>
  <ul class="c-menu__list">
    <li><a href="">タイトル</a>
      <ul class="c-menu__list">
        <li><a href="" class="is-active">タイトル</a></li>
        <li><a href="">タイトル</a></li>
        <li><a href="">タイトル</a></li>
      </ul>
    </li>
    <li><a href="">タイトル</a></li>
    <li><a href="">タイトル</a></li>
  </ul>
</div>

<div class="c-pagenavi">
  <p class="c-pagenavi__title">100件中　11 - 20件表示</p>

  <div class="c-pagenavi__body">
    <a class="c-previouspostslink" rel="prev" href=""></a>
    <span class="is-current">1</span>
    <a href="">2</a>
    <a href="">3</a>
    <a href="">4</a>
    <span class="c-extend">...</span>
    <a href="">10</a>
    <a class="c-nextpostslink" rel="next" href=""></a>
  </div>
</div>

<div class="c-pager">
    <ul class="c-pager__inner">
      <li class="c-pager__prev"><a href="" class="is-disabled"><i class="material-icons">chevron_left</i> 前へ</a></li>
      <li class="c-pager__to-list"><a href="">一覧</a></li>
      <li class="c-pager__next"><a href="">次へ<i class="material-icons">chevron_right</i></a></li>
    </ul>
  </div>

<ul class="c-summary1">
   <li class="c-summary__item e-card">
        <a href="">
          <div class="e-card__img"><img src="/assets/img/common/card.png" alt=""></div>
          <div class="e-card__body">
            <p class="e-card__title">タイトル</p>
            <p class="e-card__text">テキストテキストテキストテキストテキスト</p>
          </div>
        </a>
      </li>
   <li class="c-summary__item e-card">
        <a href="">
          <div class="e-card__img"><img src="/assets/img/common/card.png" alt=""></div>
          <div class="e-card__body">
            <p class="e-card__title">タイトル</p>
            <p class="e-card__text">テキストテキストテキストテキストテキスト</p>
          </div>
        </a>
      </li>
   <li class="c-summary__item e-card">
        <a href="">
          <div class="e-card__img"><img src="/assets/img/common/card.png" alt=""></div>
          <div class="e-card__body">
            <p class="e-card__title">タイトル</p>
            <p class="e-card__text">テキストテキストテキストテキストテキスト</p>
          </div>
        </a>
      </li>
         <li class="c-summary__item e-card">
        <a href="">
          <div class="e-card__img"><img src="/assets/img/common/card.png" alt=""></div>
          <div class="e-card__body">
            <p class="e-card__title">タイトル</p>
            <p class="e-card__text">テキストテキストテキストテキストテキスト</p>
          </div>
        </a>
      </li>
         <li class="c-summary__item e-card">
        <a href="">
          <div class="e-card__img"><img src="/assets/img/common/card.png" alt=""></div>
          <div class="e-card__body">
            <p class="e-card__title">タイトル</p>
            <p class="e-card__text">テキストテキストテキストテキストテキスト</p>
          </div>
        </a>
      </li>
         <li class="c-summary__item e-card">
        <a href="">
          <div class="e-card__img"><img src="/assets/img/common/card.png" alt=""></div>
          <div class="e-card__body">
            <p class="e-card__title">タイトル</p>
            <p class="e-card__text">テキストテキストテキストテキストテキスト</p>
          </div>
        </a>
      </li>
         <li class="c-summary__item e-card">
        <a href="">
          <div class="e-card__img"><img src="/assets/img/common/card.png" alt=""></div>
          <div class="e-card__body">
            <p class="e-card__title">タイトル</p>
            <p class="e-card__text">テキストテキストテキストテキストテキスト</p>
          </div>
        </a>
      </li>
         <li class="c-summary__item e-card">
        <a href="">
          <div class="e-card__img"><img src="/assets/img/common/card.png" alt=""></div>
          <div class="e-card__body">
            <p class="e-card__title">タイトル</p>
            <p class="e-card__text">テキストテキストテキストテキストテキスト</p>
          </div>
        </a>
      </li>
  </ul>