WordPressのテンプレート階層を理解しよう
front-page.phpの作り方を理解しよう
header.phpを実装しよう
footer.phpを実装しよう

footer.php として切り出す共通レイアウトのコードを確認
footer.phpを作成する
共通レイアウトのコードを front-page.php から footer.php へ切り出す
front-page.phpから、貼り付けた部分を削除する
front-page.php から共通化したフッター部分を呼び出す
footer.php のテンプレートファイルが読み込まれていることを確認
まとめ
1. 【参考リンク】

footer.phpを実装しよう

本章では、ヘッダー部分の共通化に続き、front-page.php から、各ページ共通のレイアウトになるフッター部分のパーツを部品化する手順を学んでいきます。

フッター部分の共通化もヘッダーの共通化と同じように、以下の流れで実装できれば OK です。

footer.php として切り出す共通レイアウトのコードを確認
footer.phpを作成する
共通レイアウトのコードを front-page.php から footer.php へ切り出す
front-page.phpから、移行した部分のコードを削除する
front-page.php から共通化したフッター部分を呼び出す
footer.php のテンプレートファイルが読み込まれていることを確認

footer.php として切り出す共通レイアウトのコードを確認

それでは早速、footer.php として切り出していく、共通レイアウトのコードを確認していきましょう。

front-page.php をテキストエディタで開き、フッター部分の実装を確認します。

TODO

front-page.phpの中で、共通化するfooter部分を考えてみてください

答え

共通化できるfooter部分は、以下の部分になります。

front-page.php

<footer class="footer bg-grey cl-white pt-4" id="footer">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-2 col-lg-4 mb-2 mb-sm-0 text-left">
        <div class="footer-brand">
          <a href="./index.html">Indieverse</a>
        </div>
      </div>
      <div class="col-md-9 col-lg-8 text-right">
        <ul class="list-inline d-none d-sm-block">
          <li class="list-inline-item"><a href="#service">サービス</a></li>
          <li class="list-inline-item"><a href="#company">企業概要</a></li>
          <li class="list-inline-item"><a href="./news/news.html">ニュース</a></li>
          <li class="list-inline-item"><a href="./recruit/writter.html">採用</a></li>
          <li class="list-inline-item"><a href="#contact">お問い合わせ</a></li>
        </ul>
        <ul class="d-sm-none text-left">
          <li><a href="#service">サービス</a></li>
          <li><a href="#company">企業概要</a></li>
          <li><a href="./news/news.html">ニュース</a></li>
          <li><a href="./recruit/writter.html">採用</a></li>
          <li><a href="#contact">お問い合わせ</a></li>
        </ul>
      </div>
    </div>
  </div>
  <hr class="footer-hr">
  <div class="footer-copyright text-center pb-3">©2020
    <a href="http://indieverse.jp/"> Indieverse.inc</a>
  </div>
</footer><!-- footer -->


<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

<!-- Theme JavaScript -->
<script src="<?php echo get_template_directory_uri(); ?>/js/common.js"></script>
<?php wp_footer(); ?>
</body>

</html>

footer.php に切り出すコードは、HTML タグの <footer> タグだけではなく、HTML の終了タグ部分まで全てが共通化するコードの対象になります。

scriptなどの読み込み部分もどのページからも必要となるからです。

HTML タグの <footer> タグだけを共通化するのは間違いなので、勘違いしないように気をつけましょう。

footer.phpを作成する

共通化するパーツが確認できたら、実際に footer.php を作成してヘッダー部分のコードを切り出していきます。

TODO

テキストエディタから新規ファイル footer.php を作成してください。

結果

テーマフォルダindieverseの中身は、以下のようになります。

footer.phpを新規作成

共通レイアウトのコードを front-page.php から footer.php へ切り出す

次に、front-page.php から先程確認した共通ヘッダー部分のコードを切り出して、footer.php を実装します。

TODO

footer.phpを開いてください
front-page.phpから、footer.phpに移行するコードを貼り付けてください。

現時点の footer.php と front-page.php のコードは以下のようになります。

footer.php

<footer class="footer bg-grey cl-white pt-4" id="footer">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-2 col-lg-4 mb-2 mb-sm-0 text-left">
        <div class="footer-brand">
          <a href="./index.html">Indieverse</a>
        </div>
      </div>
      <div class="col-md-9 col-lg-8 text-right">
        <ul class="list-inline d-none d-sm-block">
          <li class="list-inline-item"><a href="#service">サービス</a></li>
          <li class="list-inline-item"><a href="#company">企業概要</a></li>
          <li class="list-inline-item"><a href="./news/news.html">ニュース</a></li>
          <li class="list-inline-item"><a href="./recruit/writter.html">採用</a></li>
          <li class="list-inline-item"><a href="#contact">お問い合わせ</a></li>
        </ul>
        <ul class="d-sm-none text-left">
          <li><a href="#service">サービス</a></li>
          <li><a href="#company">企業概要</a></li>
          <li><a href="./news/news.html">ニュース</a></li>
          <li><a href="./recruit/writter.html">採用</a></li>
          <li><a href="#contact">お問い合わせ</a></li>
        </ul>
      </div>
    </div>
  </div>
  <hr class="footer-hr">
  <div class="footer-copyright text-center pb-3">©2020
    <a href="http://indieverse.jp/"> Indieverse.inc</a>
  </div>
</footer><!-- footer -->


<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

<!-- Theme JavaScript -->
<script src="<?php echo get_template_directory_uri(); ?>/js/common.js"></script>

<?php wp_footer(); ?>
</body>

</html>

front-page.phpから、貼り付けた部分を削除する

front-page.phpから、貼り付けた部分を削除します。

TODO

front-page.phpから、移行したコードを削除します。

結果

front-page.php

<?php get_header(); ?>

<article id="main">
  <section class="kv ly-section bg-gray topanime">
    <div class="container-fluid kv-container">
      <div class="row">
        <div class="kv-left col-md-7 col-lg-6">
          <div class="jumbotron bg-gray">
            <h1 class="kv-message h2">届くべき価値を<br>届くべき人へ届ける</h1>
            <p class="cl-light-gray">Indieverse.inc</p>
            <a class="btn btn-grey mt-5 d-none d-lg-block" href="#contact" role="button">ご相談・お問い合わせはこちら</a>
          </div>
        </div><!-- .kv-left -->
        <div class="kv-right col-md-5 col-lg-6">
          <img src="<?php echo get_template_directory_uri(); ?>/images/bridge-sp.png" class="img-fluid d-lg-none" alt="Responsive image">
          <img src="<?php echo get_template_directory_uri(); ?>/images/bridge.png" class="img-fluid d-none d-lg-block" alt="Responsive image">
        </div><!-- .kv-right -->
      </div>
      <div class="row justify-content-center d-lg-none">
        <div class="col-11">
          <a class="btn btn-block btn-grey mb-5" href="#contact" role="button">ご相談・お問い合わせはこちら</a>
        </div>
      </div>
    </div>
  </section><!-- .kv -->

  <section class="mission ly-section">
    <div class="container-fluid">
      <div class="row justify-content-center">
        <div class="col-md-10 col-lg-8">
          <div class="section-ttl-block scrollanime updown">
            <h2>
              Why Indieverse?
            </h2>
            <p class="cl-light-gray">
              インディバースの理念
            </p>
          </div><!-- .section-ttl-block -->
          <div class="mission-txt text-center mb-5 scrollanime updown">
            <p>
              いいサービスでも、ユーザーに届かないことが多々あります。<br>
              <br class="d-sm-none">
              インディバースは、本当に必要とされるサービスを、<br>
              本当に必要な人に届ける仕組みづくりをお手伝いします。

            </p>
          </div><!-- .mission-txt -->
        </div>
      </div>
    </div>
  </section><!-- .mission -->

  <section class="service ly-section bg-gray" id="service">
    <div class="container-fluid">
      <div class="row justify-content-center">
        <div class="col-md-10 col-lg-8">
          <div class="section-ttl-block scrollanime updown">
            <h2>
              Services
            </h2>
            <p class="cl-light-gray">
              サービス一覧
            </p>
          </div><!-- .section-ttl-block -->
          <div class="card card-border-none text-center card-mb-10 scrollanime updown">
            <img class="card-img-top" src="<?php echo get_template_directory_uri(); ?>/images/media1.png" alt="Card image cap">
            <div class="card-body py-5">
              <h3 class="card-title py-2">メディア事業</h3>
              <p class="card-text pt-3 pb-5">
                IT系のキャリアを歩みたい方向けの、<br class="d-none d-sm-block">ライフスタイルメディアDAINOTEを運営しています。
                <br><br>
                フリーランス、パラレルキャリアなどのテーマを、実体験やインタビューをもとに綴っています。
              </p>
              <a href="https://dividable.net/" class="btn btn-block btn-grey">詳細はこちら</a>
            </div>
          </div><!-- .card -->
          <div class="card card-border-none text-center card-mb-10 scrollanime updown">
            <img class="card-img-top" src="<?php echo get_template_directory_uri(); ?>/images/media2.png" alt="Card image cap">
            <div class="card-body py-5">
              <h3 class="card-title py-2">Webコンサルティング事業</h3>
              <p class="card-text pt-3 pb-5">
                マーケティング戦略の立案から、Web制作、マーケティングの実行支援まで、トータルでサポートいたします。
                <br><br>
                弊社は特に、サービスの立ち上げ時期のサポートが強みです。<br>
                お気軽にお問い合わせくださいませ。
              </p>
              <a href="#contact" class="btn btn-block btn-grey">お問い合わせはこちら</a>
            </div>
          </div><!-- .card -->
        </div>
      </div>
    </div>
  </section><!-- .service -->

  <section class="recruit ly-section">
    <div class="container-fluid">
      <div class="row justify-content-center">
        <div class="col-md-10 col-lg-8">
          <div class="section-ttl-block scrollanime updown">
            <h2>
              Recruit
            </h2>
            <p class="cl-light-gray">
              採用情報
            </p>
          </div><!-- .section-ttl-block -->
          <div class="recruit-txt-block scrollanime updown">
            <p>
              インディバースには、オフィスはありません。完全フルリモートのチームです。<br>
              <br class="d-sm-none">
              地方からのご応募もお待ちしております。現在は以下の職種を募集しています。
            </p>
          </div><!-- .recruit-txt-block -->
          <div class="row scrollanime updown">
            <div class="col-sm-6">
              <div class="card mb-5 card-border-none">
                <a href="./recruit/writter.html">
                  <img class="card-img-top" src="<?php echo get_template_directory_uri(); ?>/images/writer.png" alt="Card image cap">
                </a>
                <div class="card-body">
                  <h3 class="card-title h5 mb-4"><a href="./recruit/writter.html">Webライター</a></h3>
                  <p>
                    IT・転職領域のライターを募集しています。独自の研修制度もあり。ライターとしてスキル…
                  </p>
                </div>
              </div><!-- .card -->
            </div>
            <div class="col-sm-6">
              <div class="card mb-5 card-border-none">
                <a href="./recruit/director.html">
                  <img class="card-img-top" src="<?php echo get_template_directory_uri(); ?>/images/drector.png" alt="Card image cap">
                </a>
                <div class="card-body">
                  <h3 class="card-title h5 mb-4"><a href="./recruit/director.html">ディレクター</a></h3>
                  <p>
                    メディアディレクションを募集しています。データに基づいた意思決定…
                  </p>
                </div>
              </div><!-- .card -->
            </div>
          </div><!-- .row -->
          <div class="row scrollanime updown">
            <div class="col-sm-6">
              <div class="card mb-5 card-border-none">
                <a href="./recruit/designer.html">
                  <img class="card-img-top" src="<?php echo get_template_directory_uri(); ?>/images/designer.png" alt="Card image cap">
                </a>
                <div class="card-body">
                  <h3 class="card-title h5 mb-4"><a href="./recruit/designer.html">Webデザイナー</a></h3>
                  <p>
                    Webサイトのデザイン、コーディングを担当できる方を募集しています…
                  </p>
                </div>
              </div><!-- .card -->
            </div>
            <div class="col-sm-6">
              <div class="card mb-5 card-border-none">
                <a href="./recruit/movie.html">
                  <img class="card-img-top" src="<?php echo get_template_directory_uri(); ?>/images/movie.png" alt="Card image cap">
                </a>
                <div class="card-body">
                  <h3 class="card-title h5 mb-4"><a href="./recruit/movie.html">動画編集者</a></h3>
                  <p>
                    Youtubeで動画を制作できる方を募集しています…
                  </p>
                </div>
              </div><!-- .card -->
            </div>
          </div><!-- .row -->
        </div>
      </div>
    </div>
  </section><!-- .recruit -->

  <section class="comapany ly-section bg-gray" id="company">
    <div class="container-fluid">
      <div class="row justify-content-center">
        <div class="col-md-10 col-lg-8">
          <div class="section-ttl-block scrollanime updown">
            <h2>
              Company
            </h2>
            <p class="cl-light-gray">
              会社情報
            </p>
          </div><!-- .section-ttl-block -->
          <dl class="row mb-5">
            <dt class="col-4">設立</dt>
            <dd class="col-8">2019年7月</dd>

            <dt class="col-4">代表者</dt>
            <dd class="col-8">河合大</dd>

            <dt class="col-4">従業員数</dt>
            <dd class="col-8">5人(アルバイト含む)</dd>

            <dt class="col-4 text-truncate">所在地</dt>
            <dd class="col-8">〒180-0004 東京都武蔵野市吉祥寺本町２丁目８−４ コスモス吉祥寺ビル 2F</dd>
          </dl><!-- .row -->
          <div class="embed-responsive embed-responsive-16by9">

            <!-- Googleマップ埋め込み -->
            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3239.820519434199!2d139.57576761562848!3d35.7060340801885!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6018ee48b9fc4283%3A0x426961ceba42dc6a!2z44CSMTgwLTAwMDQg5p2x5Lqs6YO95q2m6JS16YeO5biC5ZCJ56Wl5a-65pys55S677yS5LiB55uu77yY4oiS77yUIOOCs-OCueODouOCueWQieelpeWvuuODk-ODqyAyRg!5e0!3m2!1sja!2sjp!4v1597983975220!5m2!1sja!2sjp" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>

          </div><!-- .embed-responsive -->
        </div>
      </div>
    </div>
  </section><!-- .comapany -->

  <section class="contact ly-section" id="contact">
    <div class="container-fluid">
      <div class="row justify-content-center">
        <div class="col-md-10 col-lg-8 text-center">
          <div class="section-ttl-block scrollanime updown">
            <h2>
              Contact
            </h2>
            <p class="cl-light-gray">
              お問い合わせ
            </p>
          </div><!-- .section-ttl-block -->
          <div class="contact-txt-box mb-5">
            <p>お問い合わせは、こちらからよろしくお願いいたします。</p>
          </div><!-- .contact-txt-box -->

          <!-- Googleフォーム埋め込み -->
          <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSfa0aFcPLtY0Ib3LlQLTKFZzGzkcKhigLplFwbOMaDdrRMzMQ/viewform?embedded=true" width="100%" height="1082" frameborder="0" marginheight="0" marginwidth="0">読み込んでいます…</iframe>

        </div>
      </div>
    </div>
  </section><!-- .contact -->

</article><!-- #main -->

front-page.php から共通化したフッター部分を呼び出す

共通化した footer.php を別のテンプレートファイルから読み込むためには、get_footer() というテンプレートタグを利用します。

使い方は簡単で、以下のコードを front-page.php の一番下の部分に埋め込みます。

<?php get_footer(); ?>

TODO

front-page.phpに、get_footer関数を利用して、footerを読み込めるようにしてください。

答え

get_footer() のテンプレートタグを実装した front-page.php は以下のようになります。

front-page.php

<?php get_header(); ?>

<article id="main">
  <section class="kv ly-section bg-gray topanime">
    <div class="container-fluid kv-container">
      <div class="row">
        <div class="kv-left col-md-7 col-lg-6">
          <div class="jumbotron bg-gray">
            <h1 class="kv-message h2">届くべき価値を<br>届くべき人へ届ける</h1>
            <p class="cl-light-gray">Indieverse.inc</p>
            <a class="btn btn-grey mt-5 d-none d-lg-block" href="#contact" role="button">ご相談・お問い合わせはこちら</a>
          </div>
        </div><!-- .kv-left -->
        <div class="kv-right col-md-5 col-lg-6">
          <img src="<?php echo get_template_directory_uri(); ?>/images/bridge-sp.png" class="img-fluid d-lg-none" alt="Responsive image">
          <img src="<?php echo get_template_directory_uri(); ?>/images/bridge.png" class="img-fluid d-none d-lg-block" alt="Responsive image">
        </div><!-- .kv-right -->
      </div>
      <div class="row justify-content-center d-lg-none">
        <div class="col-11">
          <a class="btn btn-block btn-grey mb-5" href="#contact" role="button">ご相談・お問い合わせはこちら</a>
        </div>
      </div>
    </div>
  </section><!-- .kv -->

  <section class="mission ly-section">
    <div class="container-fluid">
      <div class="row justify-content-center">
        <div class="col-md-10 col-lg-8">
          <div class="section-ttl-block scrollanime updown">
            <h2>
              Why Indieverse?
            </h2>
            <p class="cl-light-gray">
              インディバースの理念
            </p>
          </div><!-- .section-ttl-block -->
          <div class="mission-txt text-center mb-5 scrollanime updown">
            <p>
              いいサービスでも、ユーザーに届かないことが多々あります。<br>
              <br class="d-sm-none">
              インディバースは、本当に必要とされるサービスを、<br>
              本当に必要な人に届ける仕組みづくりをお手伝いします。

            </p>
          </div><!-- .mission-txt -->
        </div>
      </div>
    </div>
  </section><!-- .mission -->

  <section class="service ly-section bg-gray" id="service">
    <div class="container-fluid">
      <div class="row justify-content-center">
        <div class="col-md-10 col-lg-8">
          <div class="section-ttl-block scrollanime updown">
            <h2>
              Services
            </h2>
            <p class="cl-light-gray">
              サービス一覧
            </p>
          </div><!-- .section-ttl-block -->
          <div class="card card-border-none text-center card-mb-10 scrollanime updown">
            <img class="card-img-top" src="<?php echo get_template_directory_uri(); ?>/images/media1.png" alt="Card image cap">
            <div class="card-body py-5">
              <h3 class="card-title py-2">メディア事業</h3>
              <p class="card-text pt-3 pb-5">
                IT系のキャリアを歩みたい方向けの、<br class="d-none d-sm-block">ライフスタイルメディアDAINOTEを運営しています。
                <br><br>
                フリーランス、パラレルキャリアなどのテーマを、実体験やインタビューをもとに綴っています。
              </p>
              <a href="https://dividable.net/" class="btn btn-block btn-grey">詳細はこちら</a>
            </div>
          </div><!-- .card -->
          <div class="card card-border-none text-center card-mb-10 scrollanime updown">
            <img class="card-img-top" src="<?php echo get_template_directory_uri(); ?>/images/media2.png" alt="Card image cap">
            <div class="card-body py-5">
              <h3 class="card-title py-2">Webコンサルティング事業</h3>
              <p class="card-text pt-3 pb-5">
                マーケティング戦略の立案から、Web制作、マーケティングの実行支援まで、トータルでサポートいたします。
                <br><br>
                弊社は特に、サービスの立ち上げ時期のサポートが強みです。<br>
                お気軽にお問い合わせくださいませ。
              </p>
              <a href="#contact" class="btn btn-block btn-grey">お問い合わせはこちら</a>
            </div>
          </div><!-- .card -->
        </div>
      </div>
    </div>
  </section><!-- .service -->

  <section class="recruit ly-section">
    <div class="container-fluid">
      <div class="row justify-content-center">
        <div class="col-md-10 col-lg-8">
          <div class="section-ttl-block scrollanime updown">
            <h2>
              Recruit
            </h2>
            <p class="cl-light-gray">
              採用情報
            </p>
          </div><!-- .section-ttl-block -->
          <div class="recruit-txt-block scrollanime updown">
            <p>
              インディバースには、オフィスはありません。完全フルリモートのチームです。<br>
              <br class="d-sm-none">
              地方からのご応募もお待ちしております。現在は以下の職種を募集しています。
            </p>
          </div><!-- .recruit-txt-block -->
          <div class="row scrollanime updown">
            <div class="col-sm-6">
              <div class="card mb-5 card-border-none">
                <a href="./recruit/writter.html">
                  <img class="card-img-top" src="<?php echo get_template_directory_uri(); ?>/images/writer.png" alt="Card image cap">
                </a>
                <div class="card-body">
                  <h3 class="card-title h5 mb-4"><a href="./recruit/writter.html">Webライター</a></h3>
                  <p>
                    IT・転職領域のライターを募集しています。独自の研修制度もあり。ライターとしてスキル…
                  </p>
                </div>
              </div><!-- .card -->
            </div>
            <div class="col-sm-6">
              <div class="card mb-5 card-border-none">
                <a href="./recruit/director.html">
                  <img class="card-img-top" src="<?php echo get_template_directory_uri(); ?>/images/drector.png" alt="Card image cap">
                </a>
                <div class="card-body">
                  <h3 class="card-title h5 mb-4"><a href="./recruit/director.html">ディレクター</a></h3>
                  <p>
                    メディアディレクションを募集しています。データに基づいた意思決定…
                  </p>
                </div>
              </div><!-- .card -->
            </div>
          </div><!-- .row -->
          <div class="row scrollanime updown">
            <div class="col-sm-6">
              <div class="card mb-5 card-border-none">
                <a href="./recruit/designer.html">
                  <img class="card-img-top" src="<?php echo get_template_directory_uri(); ?>/images/designer.png" alt="Card image cap">
                </a>
                <div class="card-body">
                  <h3 class="card-title h5 mb-4"><a href="./recruit/designer.html">Webデザイナー</a></h3>
                  <p>
                    Webサイトのデザイン、コーディングを担当できる方を募集しています…
                  </p>
                </div>
              </div><!-- .card -->
            </div>
            <div class="col-sm-6">
              <div class="card mb-5 card-border-none">
                <a href="./recruit/movie.html">
                  <img class="card-img-top" src="<?php echo get_template_directory_uri(); ?>/images/movie.png" alt="Card image cap">
                </a>
                <div class="card-body">
                  <h3 class="card-title h5 mb-4"><a href="./recruit/movie.html">動画編集者</a></h3>
                  <p>
                    Youtubeで動画を制作できる方を募集しています…
                  </p>
                </div>
              </div><!-- .card -->
            </div>
          </div><!-- .row -->
        </div>
      </div>
    </div>
  </section><!-- .recruit -->

  <section class="comapany ly-section bg-gray" id="company">
    <div class="container-fluid">
      <div class="row justify-content-center">
        <div class="col-md-10 col-lg-8">
          <div class="section-ttl-block scrollanime updown">
            <h2>
              Company
            </h2>
            <p class="cl-light-gray">
              会社情報
            </p>
          </div><!-- .section-ttl-block -->
          <dl class="row mb-5">
            <dt class="col-4">設立</dt>
            <dd class="col-8">2019年7月</dd>

            <dt class="col-4">代表者</dt>
            <dd class="col-8">河合大</dd>

            <dt class="col-4">従業員数</dt>
            <dd class="col-8">5人(アルバイト含む)</dd>

            <dt class="col-4 text-truncate">所在地</dt>
            <dd class="col-8">〒180-0004 東京都武蔵野市吉祥寺本町２丁目８−４ コスモス吉祥寺ビル 2F</dd>
          </dl><!-- .row -->
          <div class="embed-responsive embed-responsive-16by9">

            <!-- Googleマップ埋め込み -->
            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3239.820519434199!2d139.57576761562848!3d35.7060340801885!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6018ee48b9fc4283%3A0x426961ceba42dc6a!2z44CSMTgwLTAwMDQg5p2x5Lqs6YO95q2m6JS16YeO5biC5ZCJ56Wl5a-65pys55S677yS5LiB55uu77yY4oiS77yUIOOCs-OCueODouOCueWQieelpeWvuuODk-ODqyAyRg!5e0!3m2!1sja!2sjp!4v1597983975220!5m2!1sja!2sjp" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>

          </div><!-- .embed-responsive -->
        </div>
      </div>
    </div>
  </section><!-- .comapany -->

  <section class="contact ly-section" id="contact">
    <div class="container-fluid">
      <div class="row justify-content-center">
        <div class="col-md-10 col-lg-8 text-center">
          <div class="section-ttl-block scrollanime updown">
            <h2>
              Contact
            </h2>
            <p class="cl-light-gray">
              お問い合わせ
            </p>
          </div><!-- .section-ttl-block -->
          <div class="contact-txt-box mb-5">
            <p>お問い合わせは、こちらからよろしくお願いいたします。</p>
          </div><!-- .contact-txt-box -->

          <!-- Googleフォーム埋め込み -->
          <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSfa0aFcPLtY0Ib3LlQLTKFZzGzkcKhigLplFwbOMaDdrRMzMQ/viewform?embedded=true" width="100%" height="1082" frameborder="0" marginheight="0" marginwidth="0">読み込んでいます…</iframe>

        </div>
      </div>
    </div>
  </section><!-- .contact -->

</article><!-- #main -->

<?php get_footer(); ?>