<!-- ページタイプの条件分岐 -->
<b:switch var='data:blog.pageType'>
  <!-- 個別記事の時 -->
  <b:case value="item" />
  <b:loop var='post' values='data:posts'>
    <b:include name='single-post' />
  </b:loop>
  <!-- 固定ページの時 -->
  <b:case value="static_page" />
  <b:loop var='post' values='data:posts'>
    <b:include name='static' />
  </b:loop>
  <!-- 404ページの時 -->
  <b:case value="error_page" />
  <b:include name='404' />
  <!-- それ以外 -->
  <b:default />
  <b:loop var='post' values='data:posts'>
    <b:include name='articles' />
  </b:loop>
  <b:include name='articles-pager' />
</b:switch>
</b:includable>

<!-- 404ページ -->
<b:includable id='404'>
  <div class="post-area">
    <h1>404 Not Found（ページが見つかりませんでした）</h1>
    <div class="post-content">
      <div class="error-panel">404</div>
      <p class="error-url">
        <data:blog.url />
      </p>
      <p class="error-message">こちらのURLのページは存在しないか、移動した可能性があります。</p>
      <p class="error-message">5秒後にTOPページへ移動します。</p>
      <script>
        //<![CDATA[
        BSPNF_redirect = setTimeout(function () {
          location.pathname = "/"
        }, 5000);
        //]]>
      </script>
    </div>
  </div>
</b:includable>

/* ----------------------------------------------------------------------------
    404
---------------------------------------------------------------------------- */

.error-panel {
  display: block;
  user-select: none;
  font-size: 8vmax;
  font-weight: bold;
  font-family: 'Arial Black', sans-serif;
  text-align: center;
  color: #bbb;
  background: #eee;
  padding: 9vmax 2vmax;
  margin: 15px 6vmax 30px;
}

.error-url {
  font-size: 15px;
  font-style: italic;
  font-weight: bold;
  color: #666;
  text-align: center;
}

.error-message {
  text-align: center;
}

/* レスポンシブ（タブレット縦） */

@media screen and (max-width: 960px) {
  .error-panel {
    padding: 13vmax 2vmax;
    margin: -15px auto 10px;
  }
}

/* レスポンシブ（スマホ縦） */

@media screen and (max-width: 560px) {
  .error-url {
    font-size: 12px;
  }
}