<?php $__env->startSection('content'); ?>

<!-- hero -->
<div class="network-hero">
  <div class="network-hero__inner">
    <h1 class="network-hero__title en js-content-anime">BitStar <span>Network</span></h1>
    <h2 class="network-hero__text"><span class="js-hero-anime">イ</span><span class="js-hero-anime">ン</span><span class="js-hero-anime">フ</span><span class="js-hero-anime">ル</span><span class="js-hero-anime">エ</span><span class="js-hero-anime">ン</span><span class="js-hero-anime">サ</span><span class="js-hero-anime">ー</span><span class="js-hero-anime">と</span><span class="js-hero-anime">し</span><span class="js-hero-anime">て</span><br class="d-none d-md-inline"><span class="js-hero-anime">稼</span><span class="js-hero-anime">ぐ</span><span class="js-hero-anime">。</span></h2>
    <h3 class="network-hero__text2 js-content-anime">インフルエンサー向け<br class="d-md-none">成果報酬型案件紹介サービス</h3>

    <ul class="network-hero__link-list js-content-anime">
      <li class="network-hero__link-list-item">
        <a class="network-hero__btn network-hero__btn_purple" href="https://bitstar.tokyo/users/sign_up">新規会員登録(無料)</a>
      </li>
      <li class="network-hero__link-list-item">
        <a class="network-hero__btn" href="https://bitstar.tokyo/users/sign_in">ログイン</a>
      </li>
    </ul>
  </div>
</div>

<!-- about -->
<div class="network-about js-about-anime">
  <div class="network-about__inner">
    <h2 class="network-about__title en">
      About
    </h2>
    <div class="d-md-flex align-items-center">
      <div class="network-about__image-wrap">
        <img class="network-about__image" src="<?= App\asset_path('images/network/about-img.jpg'); ?>">
      </div>
      <div class="network-about__text-wrap">
        <h3 class="network-about__text1">
          誰でも手軽に！<br>成果報酬型案件紹介サービス
        </h3>
        <p class="network-about__text2">
          BitStar Networkは、<br>インフルエンサー向けの成果報酬型広告（アフィリエイト）案件紹介サービスです。<br><br>
          YouTubeやInstagramでご紹介いただける案件に特化してご用意しております。
        </p>

        <a href="#contact_us" class="network-about__btn">お問い合わせはこちら</a>
      </div>
    </div>

    <a class="sp-circle-button sp-circle-button_white" href="#contact_us">
      <div class="sp-circle-button__inner en">
        <svg xmlns="http://www.w3.org/2000/svg" width="11.279" height="11.21" viewBox="0 0 11.279 11.21">
          <g id="arrow" transform="translate(-4.536 5.605) rotate(-45)">
            <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 class="main-block main-block_bg_white">
  <div class="main-block__item d-block">

    <!-- How to -->
    <div class="network-howto">
      <div class="network-title-unit">
        <h2 class="network-title-unit__title en">
          How to
        </h2>
        <h3 class="network-title-unit__sub">
          BitStar Networkの使い方
        </h3>
      </div>

      <div class="network-howto__slide carousel slide d-none d-md-block" id="howto-slide" data-ride="carousel">
        <div class="carousel-inner">
          <div class="carousel-item active">
            <div class="network-howto__slide-item">
              <div>
                <h4 class="network-howto__step en">Step.1</h4>
                <h5 class="network-howto__title">案件を選ぶ</h5>
              </div>
              <div>
                <img class="network-howto__image" src="<?= App\asset_path('images/network/s01.jpg'); ?>">
              </div>
            </div>
          </div>
          <div class="carousel-item">
            <div class="network-howto__slide-item">
              <div>
                <h4 class="network-howto__step en">Step.2</h4>
                <h5 class="network-howto__title">案件をSNSなどで<br>投稿</h5>
              </div>
              <div>
                <img class="network-howto__image" src="<?= App\asset_path('images/network/s02.jpg'); ?>">
              </div>
            </div>
          </div>
          <div class="carousel-item">
            <div class="network-howto__slide-item">
              <div>
                <h4 class="network-howto__step en">Step.3</h4>
                <h5 class="network-howto__title">あなたの投稿を見た人が<br>商品購入・サービス利用</h5>
              </div>
              <div>
                <img class="network-howto__image" src="<?= App\asset_path('images/network/s03.jpg'); ?>">
              </div>
            </div>
          </div>
          <div class="carousel-item">
            <div class="network-howto__slide-item">
              <div>
                <h4 class="network-howto__step en">Step.4</h4>
                <h5 class="network-howto__title">条件を満たすことで<br>報酬がもらえる！</h5>
                <p class="network-howto__note">※閲覧者が商品購入／サービス利用することで報酬につながる成果報酬型です</p>
              </div>
              <div>
                <img class="network-howto__image" src="<?= App\asset_path('images/network/s04.jpg'); ?>">
              </div>
            </div>
          </div>
        </div>

        <div class="carousel-control-wrapper d-flex mb-5 mb-md-0">
          <a class="carousel-control-prev" href="#howto-slide" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>

          <ol class="carousel-indicators">
            <li data-target="#howto-slide" data-slide-to="0" class="active content-indicators"></li>
            <li data-target="#howto-slide" class="content-indicators" data-slide-to="1"></li>
            <li data-target="#howto-slide" class="content-indicators" data-slide-to="2"></li>
            <li data-target="#howto-slide" class="content-indicators" data-slide-to="3"></li>
          </ol>

          <a class="carousel-control-next" href="#howto-slide" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
        </div>
      </div>

      <div class="network-howto__slide d-md-none">
        <div class="network-howto__slide-item">
          <div>
            <h4 class="network-howto__step en">Step.1</h4>
            <h5 class="network-howto__title">案件を選ぶ</h5>
          </div>
          <div>
            <img class="network-howto__image" src="<?= App\asset_path('images/network/s01_sp.jpg'); ?>">
          </div>
        </div>

        <div class="network-howto__slide-item">
          <div>
            <h4 class="network-howto__step en">Step.2</h4>
            <h5 class="network-howto__title">案件をSNSなどで投稿</h5>
          </div>
          <div>
            <img class="network-howto__image" src="<?= App\asset_path('images/network/s02_sp.jpg'); ?>">
          </div>
        </div>

        <div class="network-howto__slide-item">
          <div>
            <h4 class="network-howto__step en">Step.3</h4>
            <h5 class="network-howto__title">あなたの投稿を見た人が商品購入・サービス利用</h5>
          </div>
          <div>
            <img class="network-howto__image" src="<?= App\asset_path('images/network/s03_sp.jpg'); ?>">
          </div>
        </div>

        <div class="network-howto__slide-item">
          <div>
            <h4 class="network-howto__step en">Step.4</h4>
            <h5 class="network-howto__title">条件を満たすことで報酬がもらえる！</h5>
            <p class="network-howto__note">※閲覧者が商品購入／サービス利用することで報酬につながる成果報酬型です</p>
          </div>
          <div>
            <img class="network-howto__image" src="<?= App\asset_path('images/network/s04_sp.jpg'); ?>">
          </div>
        </div>
      </div>
      
    </div><!-- /howto -->

    <!-- about2 -->
    <div class="network-about2">
      <div class="network-title-unit">
        <h2 class="network-title-unit__title en">
          About
        </h2>
        <h3 class="network-title-unit__sub">
          BitStar Networkとは
        </h3>
      </div>

      <div class="network-about2__list">
        <div class="network-about2__list-item">
          <img class="network-about2__image" src="<?= App\asset_path('images/network/icon1.svg'); ?>">
          <h4 class="network-about2__title">インフルエンサーとして誰でも登録OK</h4>
          <p class="network-about2__text">BitStar Networkは、アカウントのチャンネル登録者数・フォロワー数に関係なく登録可能です。BitStar Networkへの登録・案件実施に関する費用は、もちろん無料！</p>
          <p class="network-about2__note">※案件実施には審査があります。</p>
        </div>
        <div class="network-about2__list-item">
          <img class="network-about2__image" src="<?= App\asset_path('images/network/icon2.svg'); ?>">
          <h4 class="network-about2__title">商品を自分で試して<br class="d-md-none">紹介できる</h4>
          <p class="network-about2__text">スマホケースやカラコン、子供服の案件など、実際にサンプルを試してSNSでご紹介いただける案件をご用意しています。</p>
        </div>
        <div class="network-about2__list-item">
          <img class="network-about2__image" src="<?= App\asset_path('images/network/icon3.svg'); ?>">
          <h4 class="network-about2__title">バリエーション豊かな案件から選べる</h4>
          <p class="network-about2__text">「化粧品」から「アパレル」、「オンラインスクール」まで、バラエティに富んだ案件を続々追加中！紹介したいと思う案件をご自身で選んで、ご応募いただけます。</p>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- お問い合わせ -->
<div class="main-block" 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="https://bitstar.tokyo/creator/contact" target="_blank">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 渋谷東口ビル 10<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-0011<br>大阪府大阪市北区大深町6-38 グラングリーン大阪北館 9F<br>MAIL contact@bitstar.tokyo</p>
      </div>

      <a class="sp-circle-button sp-circle-button_black" href="https://bitstar.tokyo/creator/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 -->



<!-- link-agent -->
<div class="footer-cta" id="js-bg-dark-footer2">
  <div class="footer-cta__inner">
    <div>
      <h4 class="footer-cta__sub-title">広告事業のご紹介</h4>
      <h3 class="footer-cta__title en">BitStar Agent</h3>
      <p class="footer-cta__text">クリエイターのポテンシャルを加速させる。<br>BitStar Agentは、人とテクノロジーの力でクリエイターの成長とマネタイズ機会の創出を支援します。</p>
    </div>
    <a class="footer-cta__button" href="https://bitstar.tokyo" target="_blank">
      <svg class="footer-cta__button-arrow" xmlns="http://www.w3.org/2000/svg" width="17.921" height="17.826" viewBox="0 0 17.921 17.826">
        <g id="グループ_4248" data-name="グループ 4248" transform="translate(-1724.254 -8917.728)">
          <path id="パス_165" data-name="パス 165" d="M12.971,14.022a1.052,1.052,0,0,1-1.052-1.052V2.1H1.052a1.052,1.052,0,1,1,0-2.1H12.971a1.052,1.052,0,0,1,1.052,1.052V12.971A1.052,1.052,0,0,1,12.971,14.022Z" transform="translate(1727.652 8918.228)" fill="#f1edec" stroke="#f0eceb" stroke-width="1" />
          <path id="パス_166" data-name="パス 166" d="M1.051,16.476a1.052,1.052,0,0,1-.743-1.795L14.681.308a1.051,1.051,0,1,1,1.486,1.486L1.795,16.168A1.043,1.043,0,0,1,1.051,16.476Z" transform="translate(1724.848 8918.578)" fill="#f1edec" stroke="#f0eceb" stroke-width="1" />
        </g>
      </svg>
      <span class="footer-cta__button-text en">Detail</span>
    </a>
  </div>
  <a class="sp-circle-button sp-circle-button_white" href="https://bitstar.tokyo" target="_blank">
    <div class="sp-circle-button__inner en">
      <svg xmlns="http://www.w3.org/2000/svg" width="11.279" height="11.21" viewBox="0 0 11.279 11.21">
        <g id="arrow" transform="translate(-4.536 5.605) rotate(-45)">
          <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>Detail
    </div>
  </a>
  <div class="footer-cta__bg">
    <img class="footer-cta__bg-img d-md-none lazyload" data-src="<?= App\asset_path('images/agent-link-bg-sp.jpg'); ?>">
    <img class="footer-cta__bg-img d-none d-md-inline lazyload" data-src="<?= App\asset_path('images/agent-link-bg.jpg'); ?>">
  </div>
</div>

<script>
window.addEventListener('load', heroAnime);

function heroAnime() {
  gsap.timeline().to('.js-hero-anime', {
    stagger: 0.07,
    ease: Circ.easeOut,
    delay: 0.5,
    duration: 0.6,
    opacity: 1,
    x: 0
  }).to('.js-header-anime', {
    opacity: 1,
    y: 0,
    duration: 0.6,
    ease: Circ.easeOut
  }).to('.js-content-anime', {
    opacity: 1,
    // y: 0,
    stagger: 0.2,
    ease: Circ.easeOut,
    duration: 0.6
  }, '-=0.2').to('.js-about-anime', {
    opacity: 1,
    ease: Circ.easeOut,
    duration: 0.6,
    y: 0
  }); // gsap.to(
  //   '.js-hero-anime',
  //   {
  //     stagger: 0.07, 
  //     ease: Circ.easeOut,
  //     delay: 0.5,
  //     duration: 0.6,
  //     opacity: 1,
  //     x: 0,
  //   },
  // )
}
  </script>
<?php $__env->stopSection(); ?>

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