<?php $__env->startSection('content'); ?>
<div class="page-header">
  <h1 class="page-header__title en">Works</h1>
  <h2 class="page-header__sub-title">制作&運用実績</h2>
</div>

<div class="page-content">
  <div class="page-content__nav-wrap">
    <div class="page-content__nav" id="fix-element">
      <h3 class="page-content__nav-title"><img class="page-content__nav-icon" src="<?= App\asset_path('images/icon-cat-title.svg'); ?>">カテゴリー</h3>
      <ul class="page-content__nav-cat-list">
        <li><a class="page-content__nav-link" href="#"><img class="page-content__nav-icon" src="<?= App\asset_path('images/icon-cat.svg'); ?>">All</a></li>
        <li><a class="page-content__nav-link" href="#"><img class="page-content__nav-icon" src="<?= App\asset_path('images/icon-cat.svg'); ?>">YouTube</a></li>
        <li><a class="page-content__nav-link" href="#"><img class="page-content__nav-icon" src="<?= App\asset_path('images/icon-cat.svg'); ?>">YouTube Ch</a></li>
        <li><a class="page-content__nav-link" href="#"><img class="page-content__nav-icon" src="<?= App\asset_path('images/icon-cat.svg'); ?>">SNS</a></li>
        <li><a class="page-content__nav-link" href="#"><img class="page-content__nav-icon" src="<?= App\asset_path('images/icon-cat.svg'); ?>">Live Stream</a></li>
      </ul>
    </div>
  </div>

  <div class="page-content__cards cards">
    <a class="cards__item card card_link card_radius" href="#">
      <figure class="card__img-wrap">
        <img class="card__img" src="<?= App\asset_path('images/sample/poru.jpg'); ?>">
      </figure>
      <div class="card__body">
        <div class="card__meta">
          <ul>
            <li class="card__cat en">CreatorsTV</li>
          </ul>
          <div class="card__type">
            <div><i class="fas fa-link"></i></div>
            <p class="card__type-text en">URL</p>
          </div>
        </div>
        <p class="card__text">【ぽるぽるふぁみりー】家族にぴったりのミラーレスカメラZ50を紹介！【Nikon Z50】</p>
      </div>
    </a>

    <a class="cards__item card card_link card_radius" href="#">
      <figure class="card__img-wrap">
        <img class="card__img" src="<?= App\asset_path('images/sample/peke.jpg'); ?>">
      </figure>
      <div class="card__body">
        <div class="card__meta">
          <ul>
            <li class="card__cat en">YouTube Ch</li>
          </ul>
          <div class="card__type">
            <div><i class="fas fa-link"></i></div>
            <p class="card__type-text en">CONTENT</p>
          </div>
        </div>
        <p class="card__text">ペケペケ! ペケッツくん</p>
      </div>
    </a>

    <a class="cards__item card card_link card_radius" href="#">
      <figure class="card__img-wrap">
        <img class="card__img" src="<?= App\asset_path('images/sample/hina.jpg'); ?>">
      </figure>
      <div class="card__body">
        <div class="card__meta">
          <ul>
            <li class="card__cat en">CreatorsTV</li>
          </ul>
          <div class="card__type">
            <div><i class="fas fa-link"></i></div>
            <p class="card__type-text en">URL</p>
          </div>
        </div>
        <p class="card__text">【ぽるぽるふぁみりー】家族にぴったりのミラーレスカメラZ50を紹介！【Nikon Z50】</p>
      </div>
    </a>

    <a class="cards__item card card_link card_radius" href="#">
      <figure class="card__img-wrap">
        <img class="card__img" src="<?= App\asset_path('images/sample/bb.jpg'); ?>">
      </figure>
      <div class="card__body">
        <div class="card__meta">
          <ul>
            <li class="card__cat en">YouTube Ch</li>
          </ul>
          <div class="card__type">
            <div><i class="fas fa-link"></i></div>
            <p class="card__type-text en">CONTENT</p>
          </div>
        </div>
        <p class="card__text">ペケペケ! ペケッツくん</p>
      </div>
    </a>

    <a class="cards__item card card_link card_radius" href="#">
      <figure class="card__img-wrap">
        <img class="card__img" src="<?= App\asset_path('images/sample/tennis.jpg'); ?>">
      </figure>
      <div class="card__body">
        <div class="card__meta">
          <ul>
            <li class="card__cat en">CreatorsTV</li>
          </ul>
          <div class="card__type">
            <div><i class="fas fa-link"></i></div>
            <p class="card__type-text en">URL</p>
          </div>
        </div>
        <p class="card__text">【ぽるぽるふぁみりー】家族にぴったりのミラーレスカメラZ50を紹介！【Nikon Z50】</p>
      </div>
    </a>

    <a class="cards__item card card_link card_radius" href="#">
      <figure class="card__img-wrap">
        <img class="card__img" src="<?= App\asset_path('images/sample/occult.jpg'); ?>">
      </figure>
      <div class="card__body">
        <div class="card__meta">
          <ul>
            <li class="card__cat en">YouTube Ch</li>
          </ul>
          <div class="card__type">
            <div><i class="fas fa-link"></i></div>
            <p class="card__type-text en">CONTENT</p>
          </div>
        </div>
        <p class="card__text">ペケペケ! ペケッツくん</p>
      </div>
    </a>

    <a class="cards__item card card_link card_radius" href="#">
      <figure class="card__img-wrap">
        <img class="card__img" src="<?= App\asset_path('images/sample/tairiku.jpg'); ?>">
      </figure>
      <div class="card__body">
        <div class="card__meta">
          <ul>
            <li class="card__cat en">CreatorsTV</li>
          </ul>
          <div class="card__type">
            <div><i class="fas fa-link"></i></div>
            <p class="card__type-text en">URL</p>
          </div>
        </div>
        <p class="card__text">【ぽるぽるふぁみりー】家族にぴったりのミラーレスカメラZ50を紹介！【Nikon Z50】</p>
      </div>
    </a>

    <a class="cards__item card card_link card_radius" href="#">
      <figure class="card__img-wrap">
        <img class="card__img" src="<?= App\asset_path('images/sample/poru.jpg'); ?>">
      </figure>
      <div class="card__body">
        <div class="card__meta">
          <ul>
            <li class="card__cat en">YouTube Ch</li>
          </ul>
          <div class="card__type">
            <div><i class="fas fa-link"></i></div>
            <p class="card__type-text en">CONTENT</p>
          </div>
        </div>
        <p class="card__text">ペケペケ! ペケッツくん</p>
      </div>
    </a>
  </div><!-- /cards -->
</div>

<div class="pagination d-block text-center">
  pagination
</div>


<div class="bg-text en">News&Event</div>

<script>
jQuery(function(){
  jQuery(window).on('scroll resize', function() {
    let scroll = jQuery(document).scrollTop();
    let contenttop = jQuery(".page-content").offset().top;
    let sideheight = jQuery("#fix-element").outerHeight();
    let sidemargintop = 40;
    let sidemarginbottom = 90;
    let footertop = jQuery(".pagination").offset().top;

    if (scroll > (footertop - sidemarginbottom - sidemargintop - sideheight)) {
      // フッターにあたった場合
      jQuery("#fix-element").css({
        'position': 'absolute',
        'top': 'auto',
        'bottom': sidemarginbottom + 'px',
      });
    } else if (scroll > (contenttop - sidemargintop)) {
      // 追従時
      jQuery("#fix-element").css({
        'position': 'fixed',
        'top': sidemargintop + 'px',
        'bottom': 'auto',
      });
    } else {
      // 追従するまでスクロールされてないとき
      jQuery("#fix-element").css({
        'position': 'static',
        'top': 'auto',
        'bottom': 'auto',
      });
    }
  });
});
</script>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.app', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>