<?php $__env->startSection('content'); ?>
  <div class="hero">
    <div class="hero-inner">
      <?php if(is_ie()): ?>
      <div class="hero-ie">
        <img class="d-none d-md-inline w-100" src="<?= App\asset_path('images/fv_title.svg'); ?>">
        <img class="d-md-none my-5 w-100" src="<?= App\asset_path('images/fv_title_sp.svg'); ?>">

        <div class="d-none d-md-flex justify-content-between align-items-center my-5 py-5">
          <div class="link-unit d-flex">
            <a href="/en/creator-en/" class="btn-purple2 mr-2">For Creators</a>
            <a href="/en/biz-en/" class="btn-mint">For Businesses</a>
          </div>

          <div class="ml-3 d-none d-lg-block">
          Next-Generation Creator Agent ｜ BitStar Agent
          </div>
        </div>
      </div>
      <?php else: ?>
      <div><!-- home-animation -->
        <?php echo $__env->make('home-animation_new', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>
      </div><!-- /home-animation -->
      <?php endif; ?>

      <div class="d-md-none">
        <p style="font-size: 13px;" class="text-center mb-4 pb-2">Next-Generation Creator Agent<br>BitStar Agent</p>
        <div class="link-unit d-flex">
          <a href="<?php echo e(home_url('/en/creator-en/')); ?>" class="btn-purple2 mr-2 d-block w-100">For Creators</a>
          <a href="<?php echo e(home_url('/en/biz-en/')); ?>" class="btn-mint d-block w-100">For Businesses</a>
        </div>
      </div>

    </div>
  </div>


  <?php if(is_ie()): ?><?php else: ?>
    <div class="top-hero-link d-none d-md-block">
      <div class="d-none d-md-flex justify-content-between align-items-center mb-5 py-5 top-hero-link-inner">
        <div class="link-unit d-flex">
          <a href="/en/creator-en/" class="btn-purple2 mr-2">For Creators</a>
          <a href="/en/biz-en/" class="btn-mint">For Businesses</a>
        </div>

        <div class="ml-3 d-none d-lg-block">
        Next-Generation Creator Agent ｜ BitStar Agent
        </div>
      </div>
    </div>
  <?php endif; ?>


  <div class="top-about" id="about-us">
    <h3>About Us</h3>
    <p class="en sub mb-4">About Us</p>

    <div class="top-movie">
      <div class="top-movie-inner">
        <a href="#" class="top-movie-inner-btn" data-toggle="modal" data-target="#play-movie">
          <span class="play"><img width="300" height="200" src="<?= App\asset_path('images/btn-play.png'); ?>"></span>
          <picture>
            <source data-srcset="<?= App\asset_path('images/thumb-movie-sp.webp'); ?> 767w, <?= App\asset_path('images/thumb-movie.webp'); ?>" type="image/webp">
            <img width="300" height="200" class="thumb-movie lazyload" data-src="<?= App\asset_path('images/thumb-movie.jpg'); ?>" data-srcset="<?= App\asset_path('images/thumb-movie-sp.jpg'); ?> 767w, <?= App\asset_path('images/thumb-movie.jpg'); ?>">
          </picture>
        </a>
      </div>
    </div>

    <h2 class="mb-4 mb-md-4">Amplifying the potential of creators</h2>
    <p class="pb-4 pb-md-5">We support the growth of creators and the creation of monetization opportunities by harnessing the power of people and technology.</p>
    <a href="<?php echo e(home_url('/en/biz-en/contact/')); ?>" class="btn-gra mx-auto mt-1 mt-md-0">Contact us</a>
  </div>


  <div class="for-creator">
    <div class="for-creator-inner">
      <div class="title-unit">
        <h2 class="en"><span>for</span><br>Creator</h2>
        <p class="sub mt-2 mt-md-4">Our Services for Creators</p>
      </div>

      <div class="desc d-flex flex-wrap-reverse flex-md-nowrap align-items-center pt-4 pb-5 my-md-5 pt-md-0 pb-md-4">
        <a href="<?php echo e(home_url('/en/creator-en/')); ?>" class="btn-gra d-md-none mt-4 mx-auto">Learn more</a>
        <div class="image mr-md-3"><img width="300" height="200" class="lazyload img-fluid p-md-3 w-100" data-src="<?= App\asset_path('images/char1.png'); ?>"></div>
        <div class="text">
          <p class="color-purple en sub mb-1 mb-lg-3">About</p>
          <h3 class="mb-2 mb-lg-4">An agent for all creators</h3>
          <p class="mb-4 mb-lg-4">We provide support for your new challenges and business activities by adopting a creator-first approach regardless of whether you are affiliated with an agency.</p>

          <a href="<?php echo e(home_url('/en/creator-en/')); ?>" class="btn-gra d-none d-md-table">For Creators</a>
        </div>
      </div>

    </div>

    <div class="service-list-wrap py-5 py-md-0">

      <div class="top-service mt-1 mt-md-0 mb-5">
        <div class="title-unit">
          <h3>Service</h3>
          <p class="color-purple en sub">Service</p>
        </div>
      </div>

      <?php
        $wp_query = new WP_Query( array(
          'post_status' => 'publish',
          'post_type' => array('services_for_creator'), //カスタム投稿タイプ名
          'posts_per_page' => -1,
          'orderby'     => 'date',
          'order' => 'DESC',
        ) );
      ?>

      <ul class="service-list d-flex flex-wrap justify-content-between">
      <?php
        if( $wp_query->have_posts() ): while( $wp_query->have_posts() ) : $wp_query->the_post();
      ?>
        <li>
          <div class="service-list-image">
            <?php $url = get_field('service_page'); if(preg_match('/tieup/',$url)): ?>
            <a class="img-transform-wrap" href="<?php echo get_field('service_page'); ?>"><img width="300" height="200" class="lazyload img-transform" data-src="<?php the_post_thumbnail_url(); ?>"></a>
            <?php else: ?>
            <a class="img-transform-wrap" href="<?php echo get_field('service_page'); ?>" target="_blank"><img width="300" height="200" class="lazyload img-transform" data-src="<?php the_post_thumbnail_url(); ?>"></a>
            <?php endif; ?>
          </div>
          <div class="service-list-text">
            <div class="d-flex justify-content-between align-items-end">
              <p class="service-name en"><?php the_title(); ?></p>
              <?php $post_id = get_the_ID(); ?>
              <?php
                $terms = get_the_terms($post_id, 'service_cat');
                if (!empty($terms)) {
                  echo '<ul class="cat-list">';
                  foreach ($terms as $term) {
                    echo '<li class="' . $term->slug . '">' . $term->name . '</li>';
                  }
                  echo '</ul>';
                }
              ?>
            </div>
            <?php $url = get_field('service_page'); if(preg_match('/tieup/',$url)): ?>
            <a href="<?php echo get_field('service_page'); ?>">
            <?php else: ?>
            <a href="<?php echo get_field('service_page'); ?>" target="_blank">
            <?php endif; ?>
              <?php the_content(); ?>
            </a>

            <?php $url = get_field('service_page'); if($url): ?>
            <p class="d-none d-md-block en mt-2 text-right">
              <?php if(preg_match('/tieup/',$url)): ?>
                <a href="<?php echo $url; ?>">
                <?php else: ?>
                <a href="<?php echo $url; ?>" target="_blank">
              <?php endif; ?>
                View details&nbsp;&nbsp;<svg class="" width="13.712" height="13.545"><use xlink:href="#arrow"></use></svg></a></p>
            <?php endif; ?>
          </div>
        </li>

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


      <a href="/en/creator-en/" class="btn-gra d-md-none mx-auto my-3">Learn more</a>

    </div>
  </div>


  <div class="for-business">
    <div class="for-business-inner pt-0 pt-md-5">
      <div class="title-unit">
        <h2 class="en"><span class="bpt">for</span>Business</h2>
        <p class="sub mt-2 mt-md-4">Our Services for Businesses</p>
      </div>

      <div class="desc d-flex flex-wrap-reverse flex-md-nowrap align-items-center pt-4 pb-5 my-md-5 pt-md-0 pb-md-5">
        <a href="/en/biz-en/" class="btn-gra d-md-none mt-4 mx-auto">Learn more</a>
        <div class="image mr-md-3"><img width="300" height="200" class="lazyload img-fluid p-md-5 w-100" data-src="<?= App\asset_path('images/char3.png'); ?>"></div>
        <div class="text">
          <p class="color-purple en sub mb-1 mb-lg-3">About</p>
          <h3 class="mb-2 mb-lg-4"><span>Providing optimal solutions for leveraging influencers</span>based on our proprietary database</h3>
          <p class="mb-4 mb-lg-4">We can make recommendations and tap on a wide range of creators regardless if they are affiliated with an agency. We also implement one-stop promotion strategies that have been optimized based on our proprietary database in response to your issues and objectives.</p>

          <a href="/en/biz-en/" class="btn-gra d-none d-md-table">For Businesses</a>
        </div>
      </div>

    </div>

    <div class="service-list-wrap pt-5 pt-md-0">

      <div class="top-service mt-1 mt-md-0 mb-5">
        <div class="title-unit">
          <h3>Service</h3>
          <p class="color-purple en sub">Service</p>
        </div>
      </div>

      <ul class="service-list d-flex flex-wrap justify-content-between mb-md-4">
        <li>
          <div class="service-list-image">
            <picture>
              <source data-srcset="<?= App\asset_path('images/sfb-1.webp'); ?>" type="image/webp">
              <img width="300" height="200" class="lazyload" data-src="<?= App\asset_path('images/sfb-1.png'); ?>">
            </picture>
          </div>
          <div class="service-list-text">
            <div class="d-flex justify-content-between align-items-end">
              <p class="service-name en">001</p>
            </div>
            <h4>YouTube/Social media tie-ups</h4>
            <p>We offer integrated support for creative production, influencer casting, and video ad management.</p>
          </div>
        </li>

        <li>
          <div class="service-list-image">
            <picture>
              <source data-srcset="<?= App\asset_path('images/sfb-2.webp'); ?>" type="image/webp">
              <img width="300" height="200" class="lazyload" data-src="<?= App\asset_path('images/sfb-2.png'); ?>">
            </picture>
          </div>
          <div class="service-list-text">
            <div class="d-flex justify-content-between align-items-end">
              <p class="service-name en">002</p>
            </div>
            <h4>Influencer casting</h4>
            <p>We can tap on a wide range of influencers for optimal casting, including creators who are affiliated with our agency, our partner agencies, as well as freelance creators.</p>
          </div>
        </li>

        <li>
          <div class="service-list-image">
            <picture>
              <source data-srcset="<?= App\asset_path('images/sfb-4.webp'); ?>" type="image/webp">
              <img width="300" height="200" class="lazyload" data-src="<?= App\asset_path('images/sfb-4.png'); ?>">
            </picture>
          </div>
          <div class="service-list-text">
            <div class="d-flex justify-content-between align-items-end">
              <p class="service-name en">003</p>
            </div>
            <h4>Video creative production</h4>
            <p>We provide highly precise direction and superior QA through our creative team and technology under the BitStar system.</p>
          </div>
        </li>

        <li>
          <div class="service-list-image">
            <picture>
              <source data-srcset="<?= App\asset_path('images/sfb-3.webp'); ?>" type="image/webp">
              <img width="300" height="200" class="lazyload" data-src="<?= App\asset_path('images/sfb-3.png'); ?>">
            </picture>
          </div>
          <div class="service-list-text">
            <div class="d-flex justify-content-between align-items-end">
              <p class="service-name en">004</p>
            </div>
            <h4>Research and data analysis</h4>
            <p>In addition to conducting quantitative analysis of viewer demographics and other kinds of numerical data, we also provide reports containing in-depth influencer insights and qualitative information.</p>
          </div>
        </li>
      </ul>

      <a href="/en/biz-en/" class="btn-gra mx-auto mb-5 mb-md-0">Click here for details</a>
    </div>
  </div>

  <!-- BitStar Studio -->
  <div class="studio-banner mb-5 pb-5">
    <a href="https://studio.bitstar.tokyo/" target="_blank">
      <div class="studio-banner-inner">
        <div class="text">
          <p class="studio-title1">Overview of our content production service</p>
          <p class="en d-none d-md-block">BitStar Studio</p>
          <h2 class="studio-title2 studio-title2-en my-4 my-md-2 my-lg-4">BitStar is also perfect for content production</h2>
          <p class="mb-4 px-4 px-md-0">BitStar Studio is our creative team that specializes in the production and management of YouTube videos/programs.<br>
We provide integrated support for everything ranging from launching your YouTube channel to the planning, production, and management of its content.</p>
          <span href="https://studio.bitstar.tokyo/" target="_blank" class="btn-purple2 position-relative mx-auto">Go to BitStar Studio
            <span class="position-absolute" style="right: 20px; top: -2px;"><svg xmlns="http://www.w3.org/2000/svg" width="9.727" height="9.664" viewBox="0 0 9.727 9.664"><g transform="translate(-5.437 -5.5)"><path d="M14.678,13.22a.542.542,0,0,1-.541-.541v-5.6h-5.6A.541.541,0,1,1,8.542,6h6.137a.542.542,0,0,1,.541.541v6.137A.542.542,0,0,1,14.678,13.22Z" transform="translate(-0.556)" fill="#fff" stroke="#fff" stroke-width="1"/><path  d="M6.542,14.734a.542.542,0,0,1-.383-.924l7.4-7.4a.541.541,0,1,1,.765.765l-7.4,7.4A.537.537,0,0,1,6.542,14.734Z" transform="translate(0 -0.07)" fill="#fff" stroke="#fff" stroke-width="1"/></g></svg></span>
          </span>
        </div>
        <picture>
          <source data-srcset="<?= App\asset_path('images/studio-link-bg.webp'); ?>" type="image/webp">
          <img width="300" height="200" class="lazyload studio-banner-bg d-none d-md-inline" data-src="<?= App\asset_path('images/studio-link-bg.jpg'); ?>">
        </picture>
        <picture>
          <source data-srcset="<?= App\asset_path('images/studio-link-bg-sp.webp'); ?>" type="image/webp">
          <img width="300" height="200" class="lazyload studio-banner-bg d-md-none" data-src="<?= App\asset_path('images/studio-link-bg-sp.jpg'); ?>">
        </picture>
      </div>
    </a>
  </div>


  <!-- YouTube Modal -->
  <div class="modal fade" id="play-movie" tabindex="-1" role="dialog" aria-labelledby="play-movieLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
      <div class="modal-content">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <div class="modal-body">
          <div class="video-wrapper">
            <!-- <div id="player"></div> -->
            <!-- <iframe id="player" frameborder="0" allowfullscreen="1" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" title="YouTube video player" width="640" height="360" data-src="https://www.youtube.com/embed/aKf0Q3xYSLI?loop=1&amp;playlist=aKf0Q3xYSLI&amp;enablejsapi=1&amp;origin=<?php echo urlencode( home_url() ); ?>&amp;widgetid=1" data-gtm-yt-inspected-1_19="true"></iframe> -->
          </div>
        </div>
      </div>
    </div>
  </div>

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

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