<?php $__env->startSection('content'); ?>
<div class="hero">
  <div class="hero__inner">
    <div class="hero__images rellax" id="parallax2" data-rellax-speed="0.5">
      <?php $group = get_field('hero_images'); ?>
      <?php if ($group) : ?>
        <div class="fade-img1">
          <?php if( $group['image1_1'] ){ echo '<img class="hero__image hero__image1 animate__animated" src="' . $group['image1_1'] . '">';} ?>
          <?php if( $group['image1_2'] ){ echo '<img class="hero__image hero__image1 animate__animated" src="' . $group['image1_2'] . '">';} ?>
          <?php if( $group['image1_3'] ){ echo '<img class="hero__image hero__image1 animate__animated" src="' . $group['image1_3'] . '">';} ?>
        </div>
        <div class="fade-img2">
          <?php if( $group['image2_1'] ){ echo '<img class="hero__image hero__image2 animate__animated" src="' . $group['image2_1'] . '">';} ?>
          <?php if( $group['image2_2'] ){ echo '<img class="hero__image hero__image2 animate__animated" src="' . $group['image2_2'] . '">';} ?>
          <?php if( $group['image2_3'] ){ echo '<img class="hero__image hero__image2 animate__animated" src="' . $group['image2_3'] . '">';} ?>
        </div>
        <div class="fade-img3">
          <?php if( $group['image3_1'] ){ echo '<img class="hero__image hero__image3 animate__animated" src="' . $group['image3_1'] . '">';} ?>
          <?php if( $group['image3_2'] ){ echo '<img class="hero__image hero__image3 animate__animated" src="' . $group['image3_2'] . '">';} ?>
          <?php if( $group['image3_3'] ){ echo '<img class="hero__image hero__image3 animate__animated" src="' . $group['image3_3'] . '">';} ?>
        </div>
        <div class="fade-img4">
          <?php if( $group['image4_1'] ){ echo '<img class="hero__image hero__image4 animate__animated" src="' . $group['image4_1'] . '">';} ?>
          <?php if( $group['image4_2'] ){ echo '<img class="hero__image hero__image4 animate__animated" src="' . $group['image4_2'] . '">';} ?>
          <?php if( $group['image4_3'] ){ echo '<img class="hero__image hero__image4 animate__animated" src="' . $group['image4_3'] . '">';} ?>
        </div>
        <div class="fade-img5">
          <?php if( $group['image5_1'] ){ echo '<img class="hero__image hero__image5 animate__animated" src="' . $group['image5_1'] . '">';} ?>
          <?php if( $group['image5_2'] ){ echo '<img class="hero__image hero__image5 animate__animated" src="' . $group['image5_2'] . '">';} ?>
          <?php if( $group['image5_3'] ){ echo '<img class="hero__image hero__image5 animate__animated" src="' . $group['image5_3'] . '">';} ?>
        </div>
      <?php endif; ?>
    </div>
    <div class="hero__videos rellax" id="parallax1" data-rellax-speed="-1.5">
      <?php  $group = get_field('hero_videos'); ?>
      <?php if ($group) : ?>
        <?php if( $group['video1_1'] ){ echo '<video id="video1_1" class="hero__video hero__video1" src="' . $group['video1_1'] . '" playsinline autoplay muted></video>';} ?>
        <?php if( $group['video1_2'] ){ echo '<video id="video1_2" class="hero__video hero__video1 video-hide" src="' . $group['video1_2'] . '" playsinline autoplay muted></video>';} ?>
        <?php if( $group['video1_3'] ){ echo '<video id="video1_3" class="hero__video hero__video1 video-hide" src="' . $group['video1_3'] . '" playsinline autoplay muted></video>';} ?>
        <?php if( $group['video2_1'] ){ echo '<video id="video2_1" class="hero__video hero__video2" src="' . $group['video2_1'] . '" playsinline autoplay muted></video>';} ?>
        <?php if( $group['video2_2'] ){ echo '<video id="video2_2" class="hero__video hero__video2 video-hide" src="' . $group['video2_2'] . '" playsinline autoplay muted></video>';} ?>
        <?php if( $group['video2_3'] ){ echo '<video id="video2_3" class="hero__video hero__video2 video-hide" src="' . $group['video2_3'] . '" playsinline autoplay muted></video>';} ?>
        <?php if( $group['video3_1'] ){ echo '<video id="video3_1" class="hero__video hero__video3" src="' . $group['video3_1'] . '" playsinline autoplay muted></video>';} ?>
        <?php if( $group['video3_2'] ){ echo '<video id="video3_2" class="hero__video hero__video3 video-hide" src="' . $group['video3_2'] . '" playsinline autoplay muted></video>';} ?>
        <?php if( $group['video3_3'] ){ echo '<video id="video3_3" class="hero__video hero__video3 video-hide" src="' . $group['video3_3'] . '" playsinline autoplay muted></video>';} ?>
        <?php if( $group['video4_1'] ){ echo '<video id="video4_1" class="hero__video hero__video4" src="' . $group['video4_1'] . '" playsinline autoplay muted></video>';} ?>
        <?php if( $group['video4_2'] ){ echo '<video id="video4_2" class="hero__video hero__video4 video-hide" src="' . $group['video4_2'] . '" playsinline autoplay muted></video>';} ?>
        <?php if( $group['video4_3'] ){ echo '<video id="video4_3" class="hero__video hero__video4 video-hide" src="' . $group['video4_3'] . '" playsinline autoplay muted></video>';} ?>
        <?php if( $group['video5_1'] ){ echo '<video id="video5_1" class="hero__video hero__video5" src="' . $group['video5_1'] . '" playsinline autoplay muted></video>';} ?>
        <?php if( $group['video5_2'] ){ echo '<video id="video5_2" class="hero__video hero__video5 video-hide" src="' . $group['video5_2'] . '" playsinline autoplay muted></video>';} ?>
        <?php if( $group['video5_3'] ){ echo '<video id="video5_3" class="hero__video hero__video5 video-hide" src="' . $group['video5_3'] . '" playsinline autoplay muted></video>';} ?>
      <?php endif; ?>
    </div>
    <div class="hero__color-bg"></div>
    <div class="hero__color-bg hero__color-bg_gra"></div>
    <div class="hero__text-wrap">
      <h3 class="hero__sub-title en">Accelerate your business through the power of content.</h3>
      <h2 class="hero__title">コンテンツの<br class="d-md-none">パワーで<br class="d-md-none">ビジネスを<br class="d-md-none">加速させる</h2>
      <p class="hero__text">BitStar Studioは、ソーシャルメディアコンテンツ制作に特化したデジタルコンテンツスタジオです。<br>創業以来培ってきたYouTube/SNSにおけるノウハウ・データ・人材と、数多くのクライアントを支援してきた業界トップクラスの実績を元に、企業のYouTube/SNS活用と動画マーケティングを総合的に支援します。</p>
      <div class="buttons">
        <a class="button button__hero button__hero_left" href="<?php echo e(home_url('/')); ?>video_production">YouTube新規開設をご検討の企業さま</a>
        <a class="button button__hero button_transprent button__hero_right" href="<?php echo e(home_url('/')); ?>consulting">YouTube運用でお悩みの企業さま</a>
      </div>

      <h3 class="hero__sp-sub en"><span class="hero__sp-sub-italic">BitStar</span>Studio</h3>

      <a class="sp-circle-button sp-circle-button_purple" href="#contact_us">
        <div class="sp-circle-button__inner en">
          <svg xmlns="http://www.w3.org/2000/svg" width="15.698" height="15.902" viewBox="0 0 15.698 15.902"><g id="arrow" transform="translate(15.044 0.756) rotate(90)"><g id="グループ_3006" data-name="グループ 3006" transform="translate(7.219 0) rotate(45)"><path id="パス_165" data-name="パス 165" d="M7.87,8.508a.638.638,0,0,1-.638-.638V1.276H.638A.638.638,0,1,1,.638,0H7.87a.638.638,0,0,1,.638.638V7.87A.638.638,0,0,1,7.87,8.508Z" transform="translate(1.701 0)" fill="currentColor" stroke="currentColor" stroke-width="1"/><path id="パス_166" data-name="パス 166" d="M.638,10A.638.638,0,0,1,.187,8.908L8.908.187a.638.638,0,1,1,.9.9L1.089,9.81A.633.633,0,0,1,.638,10Z" transform="translate(0 0.213)" fill="currentColor" stroke="currentColor" stroke-width="1"/></g></g></svg><br>Contact
        </div>
      </a>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/rellax/1.12.1/rellax.min.js"></script>
<script>
var rellax = new Rellax(' .rellax ', {
  // wrapper:'.hero'
});
</script>


<!-- ニュース&イベント情報 -->
<div class="main-block main-block_bg_white">
  <div class="main-block__item">
    <div class="side">
      <h4 class="side__sub-title">ニュース&イベント情報</h4>
      <h3 class="side__title en">News&Seminar</h3>
      <p class="side__text">BitStar Studioの<br>ニュース&イベント情報をお届けします</p>

      <a class="button" href="<?php echo e(home_url('/')); ?>news">Learn more</a>
    </div>


    <div class="cards">
      <?php
      $paged = (int) get_query_var('paged');
      $args = array(
        'paged' => $paged,
        'posts_per_page' => 2,
        'orderby' => 'post_date',
        'order' => 'DESC',
        'post_type' => 'post',
        'post_status' => 'publish'
      );
      $the_query = new WP_Query($args);

      if ( $the_query->have_posts() ) :
        while ( $the_query->have_posts() ) : $the_query->the_post();
      ?>
      <a class="cards__item card card_link card_radius" href="<?php the_permalink(); ?>">
        <figure class="card__img-wrap">
          <?php if( has_post_thumbnail() ): ?>
          <img 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 else: ?>
          <img class="card__img lazyload" data-src="<?= App\asset_path('images/no-image.jpg'); ?>">
          <?php endif; ?>
        </figure>
        <div class="card__body">
          <div class="card__meta">
            <?php if (!is_category() && has_category()): ?>

              <?php $categories = get_the_category();
              echo '<ul>';
              foreach( $categories as $category ){
                echo '<li class="card__cat en">' . $category->name . '</li>';
              }
              echo '</ul>';
            ?>
            <?php endif; ?>
            <time class="card__time en"><?php echo get_the_date('Y.n.j'); ?></time>
          </div>
          <p class="card__text"><?php the_title(); ?></p>
        </div>
      </a>

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

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

    <a class="sp-circle-button sp-circle-button_black" href="<?php echo e(home_url('/')); ?>news">
      <div class="sp-circle-button__inner en">
        <svg xmlns="http://www.w3.org/2000/svg" width="15.902" height="15.698" viewBox="0 0 15.902 15.698">
          <g id="グループ_3006" data-name="グループ 3006" transform="translate(7.975 0.654) rotate(45)">
            <path id="パス_165" data-name="パス 165" d="M7.87,8.508a.638.638,0,0,1-.638-.638V1.276H.638A.638.638,0,1,1,.638,0H7.87a.638.638,0,0,1,.638.638V7.87A.638.638,0,0,1,7.87,8.508Z" transform="translate(1.701 0)" fill="currentColor" stroke="currentColor" stroke-width="1"/>
            <path id="パス_166" data-name="パス 166" d="M.638,10A.638.638,0,0,1,.187,8.908L8.908.187a.638.638,0,1,1,.9.9L1.089,9.81A.633.633,0,0,1,.638,10Z" transform="translate(0 0.213)" fill="currentColor" stroke="currentColor" stroke-width="1"/>
          </g>
        </svg><br>Detail
      </div>
    </a>

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



<!-- 制作実績 -->
<div class="main-block">

  <div class="main-block__item">

    <div class="side">
      <h4 class="side__sub-title">制作実績</h4>
      <h3 class="side__title en">Works</h3>
      <p class="side__text">BitStar Studioの<br>最新の実績を掲載しています</p>

      <a class="button" href="<?php echo e(home_url('/')); ?>works">Learn more</a>
    </div>


    <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', 'works'), //カスタム投稿タイプ名
          'taxonomy' => 'works_cat',
          'paged' => $paged,
          // 'posts_per_page' => 15,
          'posts_per_page' => 8,
          'orderby'     => 'date',
          'order' => 'DESC'
        ) );

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

      <?php $url = get_field('works_url'); if($url): ?>
        <a class="cards__item card card_link card_radius" href="<?php echo $url; ?>" target="_blank">
      <?php else: ?>
        <a class="cards__item card card_link card_radius" href="<?php the_permalink(); ?>">
      <?php endif; ?>
        <figure class="card__img-wrap">
        <?php if( has_post_thumbnail() ): ?>
          <img 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('works_url') ): ?>
        <?php
          $works_url = get_field('works_url');
          if (preg_match('/youtu/',$works_url)) {
            $data = $youtube_url = get_field('works_url');
            $data = htmlspecialchars($data, ENT_QUOTES);
            if (strpos($youtube_url, "watch") != false){
              $youtube_url = substr($youtube_url, (strpos($youtube_url, "=")+1));
            }else{
              $youtube_url = substr($youtube_url, (strpos($youtube_url, "youtu.be/")+9));
            }

            $src = "https://img.youtube.com/vi/${youtube_url}/maxresdefault.jpg";

            echo '<img class="card__img lazyload" data-src="'.$src.'">';

          } else { ?>
            <img class="card__img lazyload" data-src="<?= App\asset_path('images/no-image.jpg'); ?>">
          <?php
          }
          ?>
        <?php else: ?>
          <img class="card__img lazyload" data-src="<?= App\asset_path('images/no-image.jpg'); ?>">
        <?php endif; ?>
        </figure>
        <div class="card__body">
          <div class="card__meta">
            <ul>
              <?php $post_id = get_the_ID(); ?>
              <?php
                if ($terms = get_the_terms($post_id, 'works_cat')) {
                  foreach ( $terms as $term ) {
                    echo '<li class="card__cat en">'.$term->name.'</li>';
                  }
                }
              ?>
            </ul>
            <ul>
              <?php $post_id = get_the_ID(); ?>
              <?php
                if ($terms = get_the_terms($post_id, 'works_tag')) {
                  foreach ( $terms as $term ) {
                    echo '<li class="card__cat en">'.$term->name.'</li>';
                  }
                }
              ?>
            </ul>
          </div>
          <p class="card__text"><?php the_title(); ?></p>
        </div>
      </a>

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

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

    <a class="sp-circle-button sp-circle-button_black" href="<?php echo e(home_url('/')); ?>works">
      <div class="sp-circle-button__inner en">
        <svg xmlns="http://www.w3.org/2000/svg" width="15.902" height="15.698" viewBox="0 0 15.902 15.698">
          <g id="グループ_3006" data-name="グループ 3006" transform="translate(7.975 0.654) rotate(45)">
            <path id="パス_165" data-name="パス 165" d="M7.87,8.508a.638.638,0,0,1-.638-.638V1.276H.638A.638.638,0,1,1,.638,0H7.87a.638.638,0,0,1,.638.638V7.87A.638.638,0,0,1,7.87,8.508Z" transform="translate(1.701 0)" fill="currentColor" stroke="currentColor" stroke-width="1"/>
            <path id="パス_166" data-name="パス 166" d="M.638,10A.638.638,0,0,1,.187,8.908L8.908.187a.638.638,0,1,1,.9.9L1.089,9.81A.633.633,0,0,1,.638,10Z" transform="translate(0 0.213)" fill="currentColor" stroke="currentColor" stroke-width="1"/>
          </g>
        </svg><br>Detail
      </div>
    </a>

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


  <!-- 主要お取引先 -->
    <div class="main-block__item">
      <div class="side">
        <h4 class="side__sub-title">主要お取引先</h4>
        <h3 class="side__title en">Our Clients</h3>
        <p class="side__text">BitStar Studioの<br>主要お取引先について</p>
      </div>

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

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

        <img class="logos__item" src="<?php echo get_field('client_logo_img'); ?>" alt="<?php the_title(); ?>">

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

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


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




<!-- 私たちについて -->
<div class="main-block main-block_bg_dark">

  <div class="main-block__item">

    <div class="side">
      <h4 class="side__sub-title">私たちについて</h4>
      <h3 class="side__title en">Who we are</h3>
      <p class="side__text">BitStar Studioとは</p>
    </div>

    <div class="big-text">
      <h4 class="big-text__sub-title en">Content Driven Studio.</h4>
      <h3 class="big-text__title">YouTubeに<br class="d-md-none">特化した<br>コンテンツ制作 &<br>コンサルティングチーム</h3>

      <div class="big-text__sp-title-wrap">
        <h4 class="big-text__sp-sub-title en">Digital Content</h4>
        <h3 class="big-text__sp-title en">Studio</h3>
      </div>

      <h5 class="big-text__ach-title en">Achievements</h5><p class="big-text__ach-time"><?php the_field('update_time'); ?></p>

      <div class="icon-unit-list icon-unit-list_ach">
        <div class="icon-unit-list__item icon-unit">
          <div class="icon-unit__icon-wrap">
            <svg width="100" height="80.538" viewBox="0 0 100 80.538"><use xlink:href="#line-camera"></use></svg>
          </div>
          <div class="icon-unit__text">
            <p>年間動画制作本数</p>
            <p><span class="icon-unit__num"><?php the_field('products_num'); ?></span>本</p>
          </div>
        </div>

        <div class="icon-unit-list__item icon-unit">
          <div class="icon-unit__icon-wrap">
            <svg width="81.999" height="82" viewBox="0 0 81.999 82"><use xlink:href="#line-youtube"></use></svg>
          </div>
          <div class="icon-unit__text">
            <p>チャンネル総再生数</p>
            <p><span class="icon-unit__num"><?php the_field('views_num'); ?></span><span class="icon-unit__billion">億</span><span class="icon-unit__small">回再生</span></p>
          </div>
        </div>
      </div><!-- icon-unit-list -->

    </div>

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



<!-- 提供サービス -->
<div class="main-block">
  <div class="main-block__item">
    <div class="side">
      <h4 class="side__sub-title">提供サービス</h4>
      <h3 class="side__title en">Service</h3>
      <p class="side__text">BitStar Studioの<br>提供サービスについて</p>

      <a class="text-link text-link_icon_left" href="<?php echo e(home_url('/')); ?>video_production">新規で制作を希望の企業様</a>
      <a class="text-link text-link_icon_left" href="<?php echo e(home_url('/')); ?>consulting">YouTubeコンサルを希望の企業様</a>
    </div>


    <div class="cards d-none d-md-flex">
      <div class="cards__item card card_radius">
        <figure class="card__img-wrap">
          <img class="card__img" src="<?= App\asset_path('images/service/s1.png'); ?>">
        </figure>
        <div class="card__body">
          <p class="card__service-sub-title">01. YouTube Production</p>
          <h3 class="card__service-title">YouTube番組制作</h3>
        </div>
      </div>

      <div class="cards__item card card_radius">
        <figure class="card__img-wrap">
          <img class="card__img" src="<?= App\asset_path('images/service/s2.png'); ?>">
        </figure>
        <div class="card__body">
          <p class="card__service-sub-title">02. YouTube Planning</p>
          <h3 class="card__service-title">YouTube企画制作</h3>
        </div>
      </div>

      <div class="cards__item card card_radius">
        <figure class="card__img-wrap">
          <img class="card__img" src="<?= App\asset_path('images/service/s3.png'); ?>">
        </figure>
        <div class="card__body">
          <p class="card__service-sub-title">03. YouTube Consulting</p>
          <h3 class="card__service-title">YouTubeコンサルティング</h3>
        </div>
      </div>

      <div class="cards__item card card_radius">
        <figure class="card__img-wrap">
          <img class="card__img" src="<?= App\asset_path('images/service/s4.png'); ?>">
        </figure>
        <div class="card__body">
          <p class="card__service-sub-title">04. Animation</p>
          <h3 class="card__service-title">アニメ動画制作</h3>
        </div>
      </div>

      <div class="cards__item card card_radius">
        <figure class="card__img-wrap">
          <img class="card__img" src="<?= App\asset_path('images/service/s5.png'); ?>">
        </figure>
        <div class="card__body">
          <p class="card__service-sub-title">05. Video Advertising</p>
          <h3 class="card__service-title">動画広告</h3>
        </div>
      </div>

      <div class="cards__item card card_radius">
        <figure class="card__img-wrap">
          <img class="card__img" src="<?= App\asset_path('images/service/s6.png'); ?>">
        </figure>
        <div class="card__body">
          <p class="card__service-sub-title">06. Live Streaming</p>
          <h3 class="card__service-title">ライブ配信</h3>
        </div>
      </div>

      <div class="cards__item card card_radius">
        <figure class="card__img-wrap">
          <img class="card__img" src="<?= App\asset_path('images/service/s7.png'); ?>">
        </figure>
        <div class="card__body">
          <p class="card__service-sub-title">07. Short Video</p>
          <h3 class="card__service-title">ショート動画</h3>
        </div>
      </div>

      <div class="cards__item card card_radius">
        <figure class="card__img-wrap">
          <img class="card__img" src="<?= App\asset_path('images/service/s8.png'); ?>">
        </figure>
        <div class="card__body">
          <p class="card__service-sub-title">08. Recruitment Consultant </p>
          <h3 class="card__service-title">動画制作人材紹介</h3>
        </div>
      </div>

      <div class="cards__item card card_radius">
        <figure class="card__img-wrap">
          <img class="card__img" src="<?= App\asset_path('images/service/s9.png'); ?>">
        </figure>
        <div class="card__body">
          <p class="card__service-sub-title">09. Advertising Effectiveness</p>
          <h3 class="card__service-title">効果測定サービス</h3>
        </div>
      </div>
    </div><!-- /cards -->


    <div class="mySwiper d-md-none">
      <div class="swiper-wrapper">
        <div class="card card_radius swiper-slide">
          <figure class="card__img-wrap">
            <img class="card__img" src="<?= App\asset_path('images/service/s1.png'); ?>">
          </figure>
          <div class="card__body">
            <p class="card__service-sub-title">YouTube Production</p>
            <h3 class="card__service-title">YouTube番組制作</h3>
          </div>
        </div>

        <div class="card card_radius swiper-slide">
          <figure class="card__img-wrap">
            <img class="card__img" src="<?= App\asset_path('images/service/s2.png'); ?>">
          </figure>
          <div class="card__body">
            <p class="card__service-sub-title">YouTube Planning</p>
            <h3 class="card__service-title">YouTube企画制作</h3>
          </div>
        </div>

        <div class="card card_radius swiper-slide">
          <figure class="card__img-wrap">
            <img class="card__img" src="<?= App\asset_path('images/service/s3.png'); ?>">
          </figure>
          <div class="card__body">
            <p class="card__service-sub-title">YouTube Consulting</p>
            <h3 class="card__service-title">YouTubeコンサルティング</h3>
          </div>
        </div>

        <div class="card card_radius swiper-slide">
          <figure class="card__img-wrap">
            <img class="card__img" src="<?= App\asset_path('images/service/s4.png'); ?>">
          </figure>
          <div class="card__body">
            <p class="card__service-sub-title">Animation</p>
            <h3 class="card__service-title">アニメ動画制作</h3>
          </div>
        </div>

        <div class="card card_radius swiper-slide">
          <figure class="card__img-wrap">
            <img class="card__img" src="<?= App\asset_path('images/service/s5.png'); ?>">
          </figure>
          <div class="card__body">
            <p class="card__service-sub-title">Video Advertising</p>
            <h3 class="card__service-title">動画広告</h3>
          </div>
        </div>

        <div class="card card_radius swiper-slide">
          <figure class="card__img-wrap">
            <img class="card__img" src="<?= App\asset_path('images/service/s6.png'); ?>">
          </figure>
          <div class="card__body">
            <p class="card__service-sub-title">Live Streaming</p>
            <h3 class="card__service-title">ライブ配信</h3>
          </div>
        </div>

        <div class="card card_radius swiper-slide">
          <figure class="card__img-wrap">
            <img class="card__img" src="<?= App\asset_path('images/service/s7.png'); ?>">
          </figure>
          <div class="card__body">
            <p class="card__service-sub-title">Short Video</p>
            <h3 class="card__service-title">ショート動画</h3>
          </div>
        </div>

        <div class="card card_radius swiper-slide">
          <figure class="card__img-wrap">
            <img class="card__img" src="<?= App\asset_path('images/service/s8.png'); ?>">
          </figure>
          <div class="card__body">
            <p class="card__service-sub-title">Recruitment Consultant </p>
            <h3 class="card__service-title">動画制作人材紹介</h3>
          </div>
        </div>

        <div class="card card_radius swiper-slide">
          <figure class="card__img-wrap">
            <img class="card__img" src="<?= App\asset_path('images/service/s9.png'); ?>">
          </figure>
          <div class="card__body">
            <p class="card__service-sub-title">Advertising Effectiveness</p>
            <h3 class="card__service-title">効果測定サービス</h3>
          </div>
        </div>
      </div>
      <div class="swiper-pagination"></div>
    </div>

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

  <!-- Swiper JS -->
  <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

  <!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper(".mySwiper", {
      slidesPerView: 1,
      spaceBetween: 30,

      pagination: {
        el: '.swiper-pagination',
      },
    });
  </script>


  <!-- Service Link -->
  <div class="main-block__item">

    <div class="big-buttons" id="big-buttons">
      <a class="big-buttons__item" href="<?php echo e(home_url('/')); ?>video_production">
        <p class="big-buttons__sub-title en">YouTube Video</p>
        <h3 class="big-buttons__title en">Production</h3>
        <p class="big-buttons__sub-title2">YouTube新規開設をご検討の企業さま</p>
        <div class="big-buttons__pill">Learn more</div>
        <svg class="big-buttons__icon" width="38" height="38"><use xlink:href="#circle-arrow"></use></svg>
      </a>

      <a class="big-buttons__item" href="<?php echo e(home_url('/')); ?>consulting">
        <p class="big-buttons__sub-title en">YouTube</p>
        <h3 class="big-buttons__title en">Consulting</h3>
        <p class="big-buttons__sub-title2">YouTubeチャンネルの運用でお悩みの企業さま</p>
        <div class="big-buttons__pill">Learn more</div>
        <svg class="big-buttons__icon" width="38" height="38"><use xlink:href="#circle-arrow"></use></svg>
      </a>
    </div>

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



  <!-- 制作の流れ -->
  <div class="main-block__item">

    <div class="side">
      <h4 class="side__sub-title">制作の流れ</h4>
      <h3 class="side__title en">Production Flow</h3>
      <p class="side__text">コンテンツ制作の流れ</p>

      <a class="button" href="<?php echo e(home_url('/')); ?>contact">Contact Us</a>
    </div>


    <div id="js_flow-slider" class="flow-slider carousel slide carousel-fade" data-ride="carousel" data-interval="false">
      <div class="flow-slider__carousel-control d-md-none">
        <a class="carousel-control-prev" href="#js_flow-slider" role="button" data-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true">
            <img class="flow-slider__carousel-control-icon" src="<?= App\asset_path('images/slider-btn-prev.png'); ?>">
          </span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#js_flow-slider" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true">
            <img class="flow-slider__carousel-control-icon" src="<?= App\asset_path('images/slider-btn-next.png'); ?>">
          </span>
          <span class="sr-only">Next</span>
        </a>
      </div>

      <ol class="flow-slider__indicators carousel-indicators d-none d-md-flex">
        <li data-target="#js_flow-slider" data-slide-to="0" class="flow-slider__indicator active">要件ヒアリング</li>
        <li data-target="#js_flow-slider" data-slide-to="1" class="flow-slider__indicator">コンテンツ制作の流れ</li>
        <li data-target="#js_flow-slider" data-slide-to="2" class="flow-slider__indicator">公開からPDCA</li>
        <li data-target="#js_flow-slider" data-slide-to="3" class="flow-slider__indicator">コンサルティング</li>
      </ol>
      <div class="carousel-inner">
        <div class="carousel-item active">
          <h3 class="flow-slider__sp-title">要件ヒアリング</h3>
          <dl class="flow-slider__item">
            <dt class="flow-slider__item-title"><div class="flow-slider__item-title-inner"><span class="flow-slider__item-title-num en">01.</span>要件ヒアリング</div></dt>
            <dd class="flow-slider__item-text">お客様のビジネスゴール・YouTubeチャンネル運用の狙いや<br>企画意図をヒアリングさせていただき、<br>弊社がどのようにサポートできるかを検討いたします。</dd>
            <dt class="flow-slider__item-title"><div class="flow-slider__item-title-inner"><span class="flow-slider__item-title-num en">02.</span>企画立案</div></dt>
            <dd class="flow-slider__item-text">お客様のニーズ・予算にマッチした企画・構成・キャスティング等のプランを作成しご提案いたします。<br>また、企画実現にかかる費用もお見積もりとして提出いたします。</dd>
          </dl>
        </div>
        <div class="carousel-item">
          <h3 class="flow-slider__sp-title">コンテンツ制作の流れ</h3>
          <dl class="flow-slider__item">
            <dt class="flow-slider__item-title"><div class="flow-slider__item-title-inner"><span class="flow-slider__item-title-num en">01.</span>動画企画<br>キャスティング</div></dt>
            <dd class="flow-slider__item-text">動画企画のより具体的な作り込み・キャスティングのご提案<br>制作チームアサイン等の準備に進みます。</dd>
            <dt class="flow-slider__item-title"><div class="flow-slider__item-title-inner"><span class="flow-slider__item-title-num en">02.</span>撮影・編集</div></dt>
            <dd class="flow-slider__item-text">貴社と弊社による綿密な企画検討に基づき撮影・編集を行います。<br>新規チャンネルの場合はチャンネルアートやサムネイル等も制作いたします。</dd>
          </dl>
        </div>
        <div class="carousel-item">
          <h3 class="flow-slider__sp-title">公開からPDCA</h3>
          <dl class="flow-slider__item">
            <dt class="flow-slider__item-title"><div class="flow-slider__item-title-inner"><span class="flow-slider__item-title-num en">01.</span>配信後の分析</div></dt>
            <dd class="flow-slider__item-text">動画配信後、視聴データを元に分析・レポーティングを行い、<br>分析から更なる改善案をご提案いたします。</dd>
            <dt class="flow-slider__item-title"><div class="flow-slider__item-title-inner"><span class="flow-slider__item-title-num en">02.</span>PDCA</div></dt>
            <dd class="flow-slider__item-text">改善したコンテンツの公開以降もPDCAを回し、YouTubeチャンネルのグロースに貢献いたします。<br>※YouTubeに限らず、その他ソーシャルメディア・TVCM・WebCM等、動画制作全般のご相談が可能です。</dd>
          </dl>
        </div>
        <div class="carousel-item">
          <h3 class="flow-slider__sp-title">コンサルティング</h3>
          <dl class="flow-slider__item">
            <dt class="flow-slider__item-title"><div class="flow-slider__item-title-inner"><span class="flow-slider__item-title-num en">01.</span>ヒアリング</div></dt>
            <dd class="flow-slider__item-text">まずはお客様のご要望をお伺いします。</dd>
            <dt class="flow-slider__item-title"><div class="flow-slider__item-title-inner"><span class="flow-slider__item-title-num en">02.</span>現状の分析</div></dt>
            <dd class="flow-slider__item-text">目的やターゲットなど細部に渡り、お客様の立場になって課題と向き合うことで最良なご提案を目指します。</dd>
            <dt class="flow-slider__item-title"><div class="flow-slider__item-title-inner"><span class="flow-slider__item-title-num en">03.</span>戦略立案<br>KPI設定</div></dt>
            <dd class="flow-slider__item-text">ヒアリング・現状の分析をもとに企画案を作成いたします。<br>ご予算に応じて複数案作成することも可能です。</dd>
            <dt class="flow-slider__item-title"><div class="flow-slider__item-title-inner"><span class="flow-slider__item-title-num en">04.</span>動画配信</div></dt>
            <dd class="flow-slider__item-text">戦略をもとに作成した動画を配信します。</dd>
            <dt class="flow-slider__item-title"><div class="flow-slider__item-title-inner"><span class="flow-slider__item-title-num en">05.</span>配信後の分析<br>PDCA</div></dt>
            <dd class="flow-slider__item-text">動画配信後、視聴データを分析します。<br>更なる改善をご提案し、PDCAを回します。</dd>
          </dl>
        </div>
      </div>
    </div>

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

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


<!-- お問い合わせ -->
<div class="main-block main-block_bg_white" id="contact_us">
  <div class="main-block__item">
    <div class="side">
      <h4 class="side__sub-title">お問い合わせ</h4>
      <h3 class="side__title en">Contact Us</h3>
      <p class="side__text">お見積もり依頼や詳しいご相談をされたい場合には<br>お問い合わせフォームをご利用ください。</p>

      <a class="button button_black" href="<?php echo e(home_url('/')); ?>contact">Learn more</a>
    </div>

    <div class="location-list">
      <div class="location-list__item">
        <p class="location-list__sub-title">本社</p>
        <h3 class="location-list__title en">Tokyo Office</h3>
        <p class="location-list__text">〒150-0002<br>東京都渋谷区渋谷2-22-3 渋谷東口ビル 10F<br>TEL  03-4520-5777<br>MAIL  contact@bitstar.tokyo</p>
      </div>
      <div class="location-list__item">
        <p class="location-list__sub-title">大阪支社</p>
        <h3 class="location-list__title en">Kansai Office</h3>
        <p class="location-list__text">〒530-0057<br>大阪府大阪市北区曾根崎2-8-5 お初天神EAST BLDG 5F<br>TEL  03-4520-5777<br>MAIL  contact@bitstar.tokyo</p>
      </div>
      <div class="location-list__item">
        <p class="location-list__sub-title">九州支社</p>
        <h3 class="location-list__title en">Kyushu Office</h3>
        <p class="location-list__text">〒810-0001<br>福岡県福岡市中央区天神 1-4-1 西日本新聞会館 16階（天神スカイホール内）<br>TEL  03-4520-5777<br>MAIL  contact@bitstar.tokyo</p>
      </div>

      <a class="sp-circle-button sp-circle-button_black" href="<?php echo e(home_url('/')); ?>contact">
        <div class="sp-circle-button__inner en">
          <svg xmlns="http://www.w3.org/2000/svg" width="15.902" height="15.698" viewBox="0 0 15.902 15.698">
            <g id="グループ_3006" data-name="グループ 3006" transform="translate(7.975 0.654) rotate(45)">
              <path id="パス_165" data-name="パス 165" d="M7.87,8.508a.638.638,0,0,1-.638-.638V1.276H.638A.638.638,0,1,1,.638,0H7.87a.638.638,0,0,1,.638.638V7.87A.638.638,0,0,1,7.87,8.508Z" transform="translate(1.701 0)" fill="currentColor" stroke="currentColor" stroke-width="1"/>
              <path id="パス_166" data-name="パス 166" d="M.638,10A.638.638,0,0,1,.187,8.908L8.908.187a.638.638,0,1,1,.9.9L1.089,9.81A.633.633,0,0,1,.638,10Z" transform="translate(0 0.213)" fill="currentColor" stroke="currentColor" stroke-width="1"/>
            </g>
          </svg><br>Contact
        </div>
      </a>
    </div>

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

<?php $__env->stopSection(); ?>

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