<?php $__env->startSection('content'); ?>
  <!-- ヒーローコンテンツ -->
  <div class="new-hero" id="hero">
    <img width="1930" height="922" class="new-hero__img lazyload d-none d-md-block" data-src="<?= App\asset_path('images/new-hero_pc.jpg'); ?>">
    <img width="375" height="667" class="new-hero__img lazyload d-md-none" data-src="<?= App\asset_path('images/new-hero_sp.jpg'); ?>">
  </div>
  <div class="about">
    <img width="661" height="181" class="about__img lazyload" data-src="<?= App\asset_path('images/bitstaranime_katakana.png'); ?>">
    <p class="about__text">SNS・YouTubeアニメ制作のBitStar Anime</p>
  </div>

  <?php $animation_news = animation_news_api_data(15); ?>
  <?php if (!empty($animation_news)) : ?>
  <div class="main-block main-block_bg_white" id="news">
    <div class="main-block__item d-block news">
      <div class="news__head">
        <div class="new-title">
          <h2 class="new-title__title">ニュース</h2>
          <div class="new-title__divider"></div>
          <p class="en new-title__text">News</p>
        </div>
        <a class="news__list-link news__list-link--desktop" href="https://bitstar.tokyo/corp/tag/animation-news/" target="_blank" rel="noopener noreferrer">
          <span class="news__list-text">ニュース一覧はこちら</span>
          <img width="14" height="14" class="news__list-icon" src="<?= App\asset_path('images/external-link.svg'); ?>" alt="" aria-hidden="true">
        </a>
      </div>

      <div class="news-swiper-wrapper">
        <div class="news-swiper swiper js-news-swiper">
          <div class="swiper-wrapper">
            <?php foreach ($animation_news as $news) : ?>
            <div class="swiper-slide">
              <a class="news-card" href="<?php echo esc_url($news['link']); ?>" target="_blank" rel="noopener">
                <?php if (!empty($news['thumbnail'])) : ?>
                <figure class="news-card__thumb">
                  <img width="512" height="288" class="news-card__img lazyload" data-src="<?php echo esc_url($news['thumbnail']); ?>"
                    alt="<?php echo esc_attr($news['title']); ?>">
                </figure>
                <?php endif; ?>
                <div class="news-card__body">
                  <?php if (!empty($news['date'])) : ?>
                  <time class="news-card__date en"><?php echo esc_html($news['date']); ?></time>
                  <?php endif; ?>
                  <p class="news-card__title"><?php echo esc_html($news['title']); ?></p>
                </div>
              </a>
            </div>
            <?php endforeach; ?>
          </div>
          <div class="news-swiper__pagination swiper-pagination"></div>
        </div>
        <div class="news-swiper__nav news-swiper__nav--prev swiper-button-prev" aria-label="前へ"></div>
        <div class="news-swiper__nav news-swiper__nav--next swiper-button-next" aria-label="次へ"></div>
      </div>
      <a class="news__list-link news__list-link--mobile" href="https://bitstar.tokyo/corp/tag/animation-news/" target="_blank" rel="noopener noreferrer">
        <span class="news__list-text">ニュース一覧はこちら</span>
        <img width="14" height="14" class="news__list-icon" src="<?= App\asset_path('images/external-link.svg'); ?>" alt="" aria-hidden="true">
      </a>
    </div>
  </div>
  <?php endif; ?>

  <!-- 制作実績 -->
  <div class="main-block main-block_bg_grid-pattern" id="works">

    <div class="main-block__item works">

      <div class="new-title">
        <h2 class="new-title__title">作品情報</h2>
        <div class="new-title__divider"></div>
        <p class="en new-title__text">Works</p>
      </div>

      <h4 class="new-works-title">オリジナル作品</h4>
      <div class="cards">
        <?php
      $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
      $wp_query = new WP_Query(array(
        'post_status' => 'publish',
        'post_type' => array('works_url'), //カスタム投稿タイプ名
        'taxonomy' => 'works_cat',
        'paged' => $paged,
        'posts_per_page' => -1,
        'orderby'     => 'date',
        'order' => 'DESC'
      ));

      if ($wp_query->have_posts()) : while ($wp_query->have_posts()) : $wp_query->the_post();
      ?>

        <a class="cards__item card card_link card_radius mb-md-5 pb-md-5" href="https://youtu.be/<?php echo get_field('youtube_id'); ?>"
          target="_blank">
          <figure class="card__img-wrap">
            <?php if (has_post_thumbnail()) : ?>
            <img width="300" height="200" class="card__img lazyload" src="<?php echo get_the_post_thumbnail_url(get_the_ID(), 'thumbnail'); ?>"
              data-src="<?php echo get_the_post_thumbnail_url(get_the_ID(), 'large'); ?>">
            <?php elseif (get_field('youtube_id')) : ?>
            <?php
            $y_id = get_field('youtube_id');
            $src = "https://img.youtube.com/vi/${y_id}/maxresdefault.jpg";
            
            echo '<img width="300" height="200" class="card__img lazyload" data-src="' . $src . '">';
            ?>
            <?php else : ?>
            <img width="300" height="200" class="card__img lazyload" data-src="<?= App\asset_path('images/no-image.jpg'); ?>">
            <?php endif; ?>
          </figure>
          <div class="card__body">
            <p class="card__text"><?php the_title(); ?></p>
            <div class="card__meta-wrap">
              <div class="card__meta">
                <?php $post_id = get_the_ID(); ?>
                <?php
                $term = get_the_terms($post_id, 'works_cat');
                $term2 = get_the_terms($post_id, 'works_tag');
                $name = $term[0]->name;
                $img = get_field('ch_img', 'category' . '_' . $term[0]->term_id);
                $desc = nl2br(esc_html($term[0]->description));
                if ($term[0]) {
                    echo '<img class="card__cat-img" src=' . $img . '><div>';
                    echo '<p class="card__cat">' . $name . '</p>';
                }
                if ($term2[0]) {
                    echo '<p class="card__tag en">' . $term2[0]->name . '</p></div>';
                }
                ?>
              </div>
              <div class="card__yt en">YouTube</div>
            </div>
            <?php
            if ($desc) {
                echo '<div class="card__desc">';
                echo '<p class="card__desc-title">YouTubeチャンネル<br class="d-md-none">「' . $name . '」とは</p>';
                echo '<p class="card__desc-text">' . $desc . '</p>';
                echo '</div>';
            }
            ?>

          </div>
        </a>

        <?php endwhile;
      endif;
      wp_reset_postdata(); ?>

      </div><!-- /cards -->

      <h4 class="new-works-title">その他映像作品</h4>

      <div class="cards">
        <?php
      $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
      $wp_query = new WP_Query(array(
        'post_status' => 'publish',
        'post_type' => array('works2'), //カスタム投稿タイプ名
        'paged' => $paged,
        'posts_per_page' => -1,
        'orderby'     => 'date',
        'order' => 'DESC'
      ));

      if ($wp_query->have_posts()) : while ($wp_query->have_posts()) : $wp_query->the_post();
      ?>

        <a class="cards__item card card_link card_radius" href="https://youtu.be/<?php echo get_field('youtube_id'); ?>" target="_blank">
          <figure class="card__img-wrap">
            <?php if (has_post_thumbnail()) : ?>
            <img width="300" height="200" class="card__img lazyload" src="<?php echo get_the_post_thumbnail_url(get_the_ID(), 'thumbnail'); ?>"
              data-src="<?php echo get_the_post_thumbnail_url(get_the_ID(), 'large'); ?>">
            <?php elseif (get_field('youtube_id')) : ?>
            <?php
            $y_id = get_field('youtube_id');
            $src = "https://img.youtube.com/vi/${y_id}/maxresdefault.jpg";
            
            echo '<img width="300" height="200" class="card__img lazyload" data-src="' . $src . '">';
            ?>
            <?php else : ?>
            <img width="300" height="200" class="card__img lazyload" data-src="<?= App\asset_path('images/no-image.jpg'); ?>">
            <?php endif; ?>
          </figure>
          <div class="card__body">
            <p class="card__text"><?php the_title(); ?></p>
          </div>
        </a>

        <?php endwhile;
      endif;
      wp_reset_postdata(); ?>

      </div><!-- /cards -->

      <h4 class="new-works-title">ショート動画作品</h4>

      <div class="shorts">
        <?php
      $wp_query = new WP_Query(array(
        'post_status' => 'publish',
        'post_type' => array('works_short'), //カスタム投稿タイプ名
        'posts_per_page' => 4,
        'orderby'     => 'date',
        'order' => 'DESC'
      ));

      if ($wp_query->have_posts()) : while ($wp_query->have_posts()) : $wp_query->the_post();
      ?>
        <div class="short">
          <iframe width="467" height="831" src="https://www.youtube.com/embed/<?php echo get_field('youtube_id'); ?>" frameborder="0"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
            referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
        </div>

        <?php endwhile;
      endif;
      wp_reset_postdata(); ?>
      </div>

    </div><!-- /main-block__item -->
  </div><!-- /main-block -->

  <div class="main-block main-block_bg_cream" id="message">
    <div class="main-block__item d-block message">
      <div class="new-title">
        <h2 class="new-title__title">メッセージ</h2>
        <div class="new-title__divider"></div>
        <p class="en new-title__text">Message</p>
      </div>
      <div class="message__box">
        <h3 class="message__title">今こそ、<br />子ども目線で</h3>
        <p class="message__text">
          ビットスターアニメは今の時代を生きる子ども向けのショートアニメーションを作ります。<br /><br />
          近年の少子化によって子ども向けの作品や事業は数を減らしていっているように感じます。<br />
          大人向けのコンテンツがあふれるそんな時代だからこそ、<br />
          私たちは子どもたちが楽しめる、子どもたちに寄り添った作品を作りたいと思っています。<br /><br />
          子どもの頃に見た作品がその後の人生に与える影響は大きく、<br />
          大人になったときに「あの作品のおかげで今の自分がある」と思えるような、<br />
          心に残る作品を提供することが私たちの目標です。<br /><br />
          これから先、社会的にも厳しい時代を迎えていくかもしれません。<br />
          そんな中でも、子どもたちがどんな困難にも負けずに前を向いて進んでいけるように。<br />
          我々の生み出す作品を通じて、何かを感じ取ってくれればいいなと。<br />
          そんなことを思いながら制作しております。
        </p>
      </div>
    </div><!-- /main-block__item -->
  </div><!-- /main-block -->

  <!-- お問い合わせフォーム -->
  <div class="main-block main-block_bg_white">
    <div class="main-block__item contact-form" id="contact-form">

      <div class="new-title">
        <h2 class="new-title__title">お問い合わせ</h2>
        <div class="new-title__divider"></div>
        <p class="en new-title__text">Contact</p>
      </div>
      <div class="contact-wrap" id="contact">
        <p class="contact-wrap__text">コラボレーション・PR・商品企画のご相談。アニメーション映像制作についてのご相談。<br />その他のお問い合わせはこちら</p>
        <?php $get_form = get_posts(['post_type' => 'wpcf7_contact_form', 'posts_per_page' => -1])[0]; ?>
        <?php echo do_shortcode('[contact-form-7 id="' . $get_form->ID . '" title="' . $get_form->post_title . '"]'); ?>
      </div>

    </div><!-- /main-block__item -->
  </div><!-- /main-block -->

  <!-- 採用 -->
  <div class="main-block main-block_bg_white" id="recruit">
    <div class="main-block__item d-block recruit">
      <div class="new-title">
        <h2 class="new-title__title">採用</h2>
        <div class="new-title__divider"></div>
        <p class="en new-title__text">Recruit</p>
      </div>
      <div class="recruit__intro">
        <p>一緒に働く仲間を募集しています。</p>
        <p>ビットスターアニメのキャラクター作りに参加しませんか？</p>
        <p>詳細は下記より</p>
      </div>
      <div class="recruit__list">
        <a class="recruit__card" href="https://herp.careers/v1/bitstarinc/e_NYlsDXoeoG" target="_blank" rel="noopener">イラストレーター</a>
        <a class="recruit__card" href="https://herp.careers/v1/bitstarinc/e_NYlsDXoeoG" target="_blank" rel="noopener">脚本家</a>
        <a class="recruit__card" href="https://herp.careers/v1/bitstarinc/qyZbsGg_jM9E" target="_blank" rel="noopener">アニメプロデューサー</a>
      </div>
    </div>
  </div>

  <script>
    document.addEventListener('wpcf7mailsent', function(event) {
      location = '/anime/thanks/';
    }, false);
  </script>
<?php $__env->stopSection(); ?>

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