見出し画像

コーディング練習 初級編：企業サイト No.5

Toyo

今回は前回の続きで、スマホサイトのメニュー部分の実装です。
ハンバーガーメニューをクリックするとメニューが現れ、項目をクリックすると各サイトに移動します。
この部分のプログラムはJavaScriptを使いました。
教材ではjQueryを使っていますが、使わないようにしました。
教材は「無料コーディング練習所」にある「初級編：企業サイト」を使いました。
今回で「初級編：企業サイト」は終わりになります。
教材の完成版（コーディングしたもの）は下記のサイトにあります。


記事の内容は主に練習結果で、作成方法の説明ではありません。

作成したコードは記事の最後に載せています。

完成したものは画像では上手く伝えることができないので動画にしました。
動画には音声はありません、無音です。
ご覧いただけましたら幸いです。


教材として使っている「無料コーディング練習所」のサイトはこちらです。


関連する記事


作成したコードはこちらです。
HTML（ホーム）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta name="description"
    content="株式会社STARTは、幸せにつながるお仕事を紹介する人材紹介会社です。人材紹介サービス『スタート』や人材紹介SNS『ゴール』を運営し、またWebデザインを学べるスクール『Webの学校』を開講しています。" />
  <title>START</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link
    href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500;700&family=Roboto:wght@400;700&display=swap"
    rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet">
  <link href="css/destyle.css" rel="stylesheet" />
  <link href="style.css" rel="stylesheet" />
  <link rel="icon" type="image/png" href="icon-192x192.png">
  <link rel="apple-touch-icon" type="image/png" href="apple-touch-icon-180x180.png">
  <link rel="icon" href="favicon.ico">
</head>

<body class="body">

    <!-- header -->
    <header class="header">
      <div class="header-logo">
        <a href="index.html"><img class="header-logo__img" src="img/logo.svg" alt="START"></a>
      </div>
      <div class="header-nav">
        <nav id="js-gnav" class="header-nav-inner">
          <ul class="header-navArea">
            <li class="header-navArea-box"><a class="header-navArea-box__link header-navArea-box__link--active" href="index.html">ホーム</a></li>
            <li class="header-navArea-box"><a class="header-navArea-box__link" href="message.html">メッセージ</a></li>
            <li class="header-navArea-box"><a class="header-navArea-box__link" href="company.html">会社概要</a></li>
          </ul>
        </nav>
        <button type="button" id="js-btn-menu" class="header-navArea-btn">
          <span id="js-btn-line" class="header-navArea-btn__line"></span>
        </button>
      </div>
    </header>
    <!-- /header -->

    <!-- mv -->
    <div class="mv">
      <div class="mv-titleArea">
        <h2 class="mv-titleArea__title">START</h2>
        <div class="mv-titleArea__subtitle">仕事に最高のスタートを</div>
      </div>
    </div>
    <!-- /mv -->

    <!-- content -->
    <main class="content">

      <!-- news -->
      <section class="news">
        <div class="news-container">
          <div class="news-inner">
            <div class="news-heading">
              <h2 class="news-heading__title">ニュース</h2>
            </div>
            <div class="news-body">

              <div class="news-menu">
                <ul class="news-menu__list">
                  <li class="news-menu__item">
                    <a href="#" class="news-menu__link">
                      <div class="news-menu__date">
                        <time datetime="2020-02-10">2030.02.10</time>
                      </div>
                      <div class="news-menu__title">
                        コーポレートサイトをリニューアルしました。
                      </div>
                    </a>
                  </li>
                  <li class="news-menu__item">
                    <a href="#" class="news-menu__link">
                      <div class="news-menu__date">
                        <time datetime="2020-02-08">2030.02.08</time>
                      </div>
                      <div class="news-menu__title">
                        採用を強化中です！一緒に働きませんか？
                      </div>
                    </a>
                  </li>
                  <li class="news-menu__item">
                    <a href="#" class="news-menu__link">
                      <div class="news-menu__date">
                        <time datetime="2020-02-02">2030.02.02</time>
                      </div>
                      <div class="news-menu__title">
                        人材紹介SNS『スタート』をリリースしました。3/31まで新規登録キャンペーンを開催中です！サービス内で使える500ポイントをプレゼント！
                      </div>
                    </a>
                  </li>
                </ul>
              </div>

            </div>
          </div>
        </div>
      </section>
      <!-- /news -->

      <!-- service -->
      <section class="service">
        <div class="service-container">
          <div class="service-heading">
            <h2 class="service-heading__title">サービス</h2>
          </div>
            <div class="service-menu">
              <div class="service-menu-inner">
                <figure class="service-imgArea">
                  <span class="service-imgArea__img material-icons-round">
                    work
                  </span>
                </figure>
                  <div class="service-desc__title">人材紹介業</div>
                  <div class="service-desc__text">
                    <p>新規サイトの制作はもちろんサイトリニューアルやランディングページの制作も可能です。</p>
                  </div>
              </div>
              <div class="service-menu-inner">
                <figure class="service-imgArea">
                  <span class="service-imgArea__img material-icons-round">
                    location_city
                  </span>
                </figure>
                  <div class="service-desc__title">スクール事業</div>
                  <div class="service-desc__text">
                    <p>オンラインでWeb制作を学べるスクールを運営しています。</p>
                  </div>
              </div>
              <div class="service-menu-inner">
                <figure class="service-imgArea">
                  <span class="service-imgArea__img material-icons-round">
                    desktop_windows
                  </span>
                </figure>
                  <div class="service-desc__title">Webメディア運営</div>
                  <div class="service-desc__text">
                    <p>人事系メディアやWebデザイン関連のメディアなどを複数運営しています。</p>
                  </div>
              </div>
            </div>
        </div>
      </section>
      <!-- /service -->

    </main>
    <!-- /content -->

    <!-- footer -->
    <footer class="footer">
      <div class="footer-container">
        <nav class="footer-nav">
          <ul class="footer-navArea">
            <li class="footer-navArea-box"><a class="footer-navArea-box__link" href="index.html">ホーム</a></li>
            <li class="footer-navArea-box"><a class="footer-navArea-box__link" href="message.html">メッセージ</a></li>
            <li class="footer-navArea-box"><a class="footer-navArea-box__link" href="company.html">会社概要</a></li>
          </ul>
        </nav>
        <div class="footer-copyright">&copy;START</div>
      </div>
    </footer>
    <!-- /footer -->

  <script src="js/script.js"></script>
</body>
</html>

HTML（メッセージ）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta name="description"
    content="株式会社STARTは、幸せにつながるお仕事を紹介する人材紹介会社です。人材紹介サービス『スタート』や人材紹介SNS『ゴール』を運営し、またWebデザインを学べるスクール『Webの学校』を開講しています。" />
  <title>メッセージ - START</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link
    href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500;700&family=Roboto:wght@400;700&display=swap"
    rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet">
  <link href="css/destyle.css" rel="stylesheet" />
  <link href="style.css" rel="stylesheet" />
  <link rel="icon" type="image/png" href="icon-192x192.png">
  <link rel="apple-touch-icon" type="image/png" href="apple-touch-icon-180x180.png">
  <link rel="icon" href="favicon.ico">
</head>

<body class="body">

    <!-- header -->
    <header class="header">
      <div class="header-logo">
        <a href="index.html"><img class="header-logo__img" src="img/logo.svg" alt="START"></a>
      </div>
      <div class="header-nav">
        <nav id="js-gnav" class="header-nav-inner">
          <ul class="header-navArea">
            <li class="header-navArea-box"><a class="header-navArea-box__link" href="index.html">ホーム</a></li>
            <li class="header-navArea-box"><a class="header-navArea-box__link header-navArea-box__link--active" href="message.html">メッセージ</a></li>
            <li class="header-navArea-box"><a class="header-navArea-box__link" href="company.html">会社概要</a></li>
          </ul>
        </nav>
        <button type="button" id="js-btn-menu" class="header-navArea-btn">
          <span id="js-btn-line" class="header-navArea-btn__line"></span>
        </button>
      </div>
    </header>
    <!-- /header -->

    <!--page-header-->
    <div class="pageHeader">
      <div class="pageHeader-titleArea">
        <h2 class="pageHeader-titleArea__title">メッセージ</h2>
      </div>
    </div>
    <!--/page-header-->

    <!--content-->
    <main class="content">

      <!--message-->
      <section class="message">
        <div class="message-ceo-container">
          <h3 class="message-ceo__title">「仕事」をきっかけに<br>人生の新しいスタートを！</h3>
          <div class="message-ceo__subtitle">大事なお仕事探しを応援させてください</div>
          <div class="message-ceo-box">
            <div class="message-ceo-imgArea">
              <img class="message-ceo-imgArea__img" src="img/ceo.jpg" width="100" height="100" alt="ショーン・デイビット・ジュニア">
            </div>
            <div class="message-ceo-desc__text">
              <p>
                はじめまして。代表取締役社長のショーン・デイビット・ジュニアです。<br>私はそこそこ幸せです。それは仕事が楽しいからです。もちろん仕事イコール人生ではありません。でも仕事は人生の大事な基盤のように思っています。<br>株式会社STARTは、みなさんが仕事をきっかけに理想の人生を実現する手助けをしています。幸せにつながるお仕事紹介サービス<a class="message-ceo-desc__link"
                  href="#">『スタート』</a>や、共通の目標を目指す仲間が見つかる人材紹介SNS<a class="message-ceo-desc__link"
                  href="#">『ゴール』</a>を運営しています。また、Webデザインの基礎スキルを身につけられるスクール<a class="message-ceo-desc__link" href="#">『Webの学校』</a>も随時開講しています。
              </p>
            </div>
          </div>
        </div>
      </section>
      <!--/message-->

      <!--office-->
      <div class="office">
        <div class="office-container">
          <img class="office-imgArea__img" src="img/office.jpg" width="1100" height="400" alt="会議室">
        </div>
      </div>
      <!--/office-->

    </main>
    <!--/content-->

    <!-- footer -->
    <footer class="footer">
      <div class="footer-container">
        <nav class="footer-nav">
          <ul class="footer-navArea">
            <li class="footer-navArea-box"><a class="footer-navArea-box__link" href="index.html">ホーム</a></li>
            <li class="footer-navArea-box"><a class="footer-navArea-box__link" href="message.html">メッセージ</a></li>
            <li class="footer-navArea-box"><a class="footer-navArea-box__link" href="company.html">会社概要</a></li>
          </ul>
        </nav>
        <div class="footer-copyright">&copy;START</div>
      </div>
    </footer>
    <!-- /footer -->

  <script src="js/script.js"></script>
</body>
</html>

HTML（会社概要）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta name="description"
    content="株式会社STARTは、幸せにつながるお仕事を紹介する人材紹介会社です。人材紹介サービス『スタート』や人材紹介SNS『ゴール』を運営し、またWebデザインを学べるスクール『Webの学校』を開講しています。" />
  <title>会社概要 - START</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link
    href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500;700&family=Roboto:wght@400;700&display=swap"
    rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet">
  <link href="css/destyle.css" rel="stylesheet" />
  <link href="style.css" rel="stylesheet" />
  <link rel="icon" type="image/png" href="icon-192x192.png">
  <link rel="apple-touch-icon" type="image/png" href="apple-touch-icon-180x180.png">
  <link rel="icon" href="favicon.ico">
</head>

<body class="body">

    <!-- header -->
    <header class="header">
      <div class="header-logo">
        <a href="index.html"><img class="header-logo__img" src="img/logo.svg" alt="START"></a>
      </div>
      <div class="header-nav">
        <nav id="js-gnav" class="header-nav-inner">
          <ul class="header-navArea">
            <li class="header-navArea-box"><a class="header-navArea-box__link" href="index.html">ホーム</a></li>
            <li class="header-navArea-box"><a class="header-navArea-box__link" href="message.html">メッセージ</a></li>
            <li class="header-navArea-box"><a class="header-navArea-box__link header-navArea-box__link--active" href="company.html">会社概要</a></li>
          </ul>
        </nav>
        <button type="button" id="js-btn-menu" class="header-navArea-btn">
          <span id="js-btn-line" class="header-navArea-btn__line"></span>
        </button>
      </div>
    </header>
    <!-- /header -->

    <!--page-header-->
    <div class="pageHeader">
      <div class="pageHeader-titleArea">
        <h2 class="pageHeader-titleArea__title">会社概要</h2>
      </div>
    </div>
    <!--/page-header-->

    <!--content-->
    <main class="content">

      <!--company-info-->
      <div class="company-info">
        <div class="company-info-container">
          <div class="company-info-box">
            <table class="company-info-table">
              <tbody>
                <tr class="company-info-table__row">
                  <th class="company-info-table__head">社名</th>
                  <td class="company-info-table__data">株式会社START</td>
                </tr>
                <tr class="company-info-table__row">
                  <th class="company-info-table__head">設立</th>
                  <td class="company-info-table__data">2025.02.10</td>
                </tr>
                <tr class="company-info-table__row">
                  <th class="company-info-table__head">代表取締役</th>
                  <td class="company-info-table__data">ショーン・デイビット・ジュニア</td>
                </tr>
                <tr class="company-info-table__row">
                  <th class="company-info-table__head">資本金</th>
                  <td class="company-info-table__data">10,000,000円</td>
                </tr>
                <tr class="company-info-table__row">
                  <th class="company-info-table__head">所在地</th>
                  <td class="company-info-table__data">〒555-5555 東京都千代田区 スタートビルディング 606</td>
                </tr>
              </tbody>
            </table>
          </div>
          <div class="company-info-access">
              <iframe class="company-info-map"
                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3240.828030380878!2d139.76493611544558!3d35.68123618019435!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bfbd89f700b%3A0x277c49ba34ed38!2z5p2x5Lqs6aeF!5e0!3m2!1sja!2sjp!4v1603888975255!5m2!1sja!2sjp"
                width="100%" height="auto" frameborder=" 0" style="border:0;" allowfullscreen="" aria-hidden="false"
                tabindex="0"></iframe>
            <div class="company-info-map__link">
              <a href="https://goo.gl/maps/b5AqA853AfsPSw1Y7" target="_blank">Google mapで見る</a>
            </div>
          </div>
        </div>
      </div>
      <!--/company-info-->

      <!--company-news-->
      <div class="company-announce">
        <div class="company-announce-container">

          <!-- <div class="company-announce-inner"> -->
            <ul class="company-announce-inner">
              <li class="company-announce-box">
                <a href="#" class="company-announce-box__link">
                  <div class="company-announce-box__date">
                    <time datetime="2020-02-10">2030.02.10</time>
                  </div>
                  <div class="company-announce-box__title">
                    コーポレートサイトをリニューアルしました。
                  </div>
                </a>
              </li>
              <li class="company-announce-box">
                <a href="#" class="company-announce-box__link">
                  <div class="company-announce-box__date">
                    <time datetime="2020-02-08">2030.02.08</time>
                  </div>
                  <div class="company-announce-box__title">
                    採用を強化中です！一緒に働きませんか？
                  </div>
                </a>
              </li>
              <li class="company-announce-box">
                <a href="#" class="company-announce-box__link">
                  <div class="company-announce-box__date">
                    <time datetime="2020-02-02">2030.02.02</time>
                  </div>
                  <div class="company-announce-box__title">
                    人材紹介SNS『スタート』をリリースしました。3/31まで新規登録キャンペーンを開催中です！サービス内で使える500ポイントをプレゼント！
                  </div>
                </a>
              </li>
            </ul>
          <!-- </div> -->

        </div>
      </div>
      <!--/company-news-->

    </main>
    <!--/content-->

    <!-- footer -->
    <footer class="footer">
      <div class="footer-container">
        <nav class="footer-nav">
          <ul class="footer-navArea">
            <li class="footer-navArea-box"><a class="footer-navArea-box__link" href="index.html">ホーム</a></li>
            <li class="footer-navArea-box"><a class="footer-navArea-box__link" href="message.html">メッセージ</a></li>
            <li class="footer-navArea-box"><a class="footer-navArea-box__link" href="company.html">会社概要</a></li>
          </ul>
        </nav>
        <div class="footer-copyright">&copy;START</div>
      </div>
    </footer>
    <!-- /footer -->

  <script src="js/script.js"></script>
</body>
</html>

CSS

@charset "UTF-8";

:root {
  --link-color: #349bf4;
  --main-color: #dd1b57;
  --text-color: #333;
}

/*--------------------------------
レイアウト
---------------------------------*/
.body {
  font-family: "Roboto", "Noto Sans JP", Arial, "Hiragino Kaku Gothic ProN",
    "Hiragino Sans", Meiryo, sans-serif;
  font-size: 16px;
  color: var(--text-color);
  overflow-x: hidden;
}

.content {
  display: grid;
  padding: 60px 0 100px;
  row-gap: 80px;
}

/*--------------------------------
ヘッダー
---------------------------------*/
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 90px;
  padding: 30px 70px;
}

.header-logo {
  line-height: 1;
}

.header-logo__img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

/*--------------------------------
グローバルナビ
---------------------------------*/
.header-navArea {
  display: flex;
  padding-top: 18px;
  column-gap: 30px;
}

.header-navArea-box {
  font-size: 16px;
  font-weight: bold;
  line-height: 1;
  letter-spacing: 0.05em;
}

.header-navArea-box__link {
  color: var(--text-color);
  text-decoration: none;
}

.header-navArea-box__link:hover {
  color: var(--main-color);
}

.header-navArea-box__link--active {
  color: var(--main-color);
}

.header-nav-btn {
  display: none;
}

/*--------------------------------
メインビジュアル
---------------------------------*/
.mv {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 600px;
  background-image: url(img/pc_mv.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.mv-titleArea {
  color: #fff;
  text-align: center;
}

.mv-titleArea__title {
  font-size: 160px;
  font-weight: bold;
  line-height: 1;
  text-shadow: 0 4px 6px rgb(0 0 0 / 25%);
  margin-bottom: 10px;
}

.mv-titleArea__subtitle {
  font-size: 24px;
  line-height: 1;
  letter-spacing: 0.1em;
}

/*--------------------------------
ニュース
---------------------------------*/
.news-container {
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 30px;
}

.news-inner {
  display: flex;
  column-gap: 90px;
}

.news-heading__title {
  font-size: 40px;
  font-weight: bold;
  line-height: 1;
  letter-spacing: 0.05em;
  color: var(--main-color);
}

.news-body {
  flex: 1;
}

.news-menu__link {
  display: flex;
  color: var(--text-color);
  text-decoration: none;
}

.news-menu__link:hover {
  color: var(--main-color);
}

.news-menu__item {
  font-size: 15px;
  line-height: 1.8;
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e8e8e8;
}

.news-menu__item:last-child {
  margin-bottom: 0;
}

.news-menu__title {
  font-size: 15px;
  line-height: 1.8;
}

.news-menu__date {
  margin-right: 20px;
}

/*--------------------------------
サービス
---------------------------------*/
.service-container {
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 30px;
}

.service-heading {
  position: relative;
  margin-bottom: 50px;
}

.service-heading::before {
  display: block;
  content: "SERVICE";
  position: absolute;
  top: -40px;
  right: -20px;
  z-index: -1;
  font-size: 168px;
  font-weight: bold;
  line-height: 1;
  color: #f2f2f2;
}

.service-heading__title {
  font-size: 40px;
  font-weight: bold;
  line-height: 1;
  letter-spacing: 0.05em;
  color: var(--main-color);
}

.service-menu {
  display: grid;
  column-gap: 30px;
  grid-template-columns: repeat(3, 1fr);
}

.service-menu-inner {
  padding: 50px;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 3px 21px rgba(0, 0, 0, 0.16);
}

.service-imgArea {
  text-align: center;
  margin-bottom: 10px;
}

.service-imgArea__img {
  font-size: 48px;
  color: var(--main-color);
  vertical-align: bottom;
}

.service-desc__title {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
}

.service-desc__text {
  font-size: 14px;
  line-height: 1.7;
  margin-top: 15px;
}

/*--------------------------------
下層ページ：ヘッダー
---------------------------------*/
.pageHeader {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 190px;
  background-image: url(img/pc_header.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.pageHeader-titleArea {
  color: #fff;
  text-align: center;
}

.pageHeader-titleArea__title {
  font-size: 40px;
  font-weight: bold;
  line-height: 1;
  letter-spacing: 0.1em;
}

/*--------------------------------
下層ページ：メッセージ
---------------------------------*/
.message {
  max-width: 850px;
  margin: 0 auto;
}

.message-ceo-container {
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 30px;
}

.message-ceo__title {
  font-size: 40px;
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--main-color);
  text-align: center;
  margin-bottom: 20px;
}

.message-ceo__subtitle {
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: 0.05em;
  text-align: center;
  margin-bottom: 40px;
}

.message-ceo-imgArea {
  width: 100px;
  margin: 0 25px 15px 0;
  float: left;
}

.message-ceo-imgArea__img {
  border-radius: 50%;
}

.message-ceo-desc__text {
  line-height: 1.6;
  letter-spacing: 0.05em;
}

.message-ceo-desc__link {
  color: var(--link-color);
  text-decoration: underline;
}

.office-container {
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 30px;
}

.office-imgArea__img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

/*--------------------------------
下層ページ：会社概要
---------------------------------*/
.company-info-container {
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 30px;
}

.company-info-box {
  margin-bottom: 50px;
}

.company-info-table {
  width: 100%;
  font-size: 15px;
  border-collapse: collapse;
  border-spacing: 0;
}

.company-info-table__row {
  border-bottom: solid 1px #ddd;
}

.company-info-table__head {
  width: 20%;
  text-align: left;
  padding: 30px;
}

.company-info-table__data {
  text-align: left;
  padding: 30px;
}

.company-info-map {
  height: 400px;
}

.company-info-map__link {
  font-size: 14px;
  text-align: right;
  margin-top: 20px;
  color: var(--link-color);
  text-decoration: underline;
}

.company-announce-container {
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 30px;
}

.company-announce-box {
  font-size: 15px;
  line-height: 1.8;
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e8e8e8;
}

.company-announce-box:last-child {
  margin-bottom: 0;
}

.company-announce-box__link {
  display: flex;
  color: var(--text-color);
  text-decoration: none;
}

.company-announce-box__link:hover {
  color: var(--main-color);
}

.company-announce-box__date {
  margin-right: 20px;
}

.company-announce-box__title {
  font-size: 15px;
  line-height: 1.8;
}

/*--------------------------------
フッター
---------------------------------*/
.footer {
  color: #fff;
  padding: 60px 20px 50px;
  background-color: var(--main-color);
}

.footer-container {
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 30px;
}

.footer-nav {
  margin-bottom: 20px;
}

.footer-navArea {
  display: flex;
  column-gap: 30px;
}

.footer-navArea-box {
  font-size: 14px;
  font-weight: bold;
  line-height: 1;
  letter-spacing: 0.05em;
}

.footer-navArea-box__link {
  color: var(--text-color);
  color: #fff;
  text-decoration: none;
}

.footer-copyright {
  font-size: 12px;
  letter-spacing: 0.03em;
}

/*media Queries 767
----------------------------------------------------*/
@media screen and (max-width: 767px) {
  /* レイアウト */
  .body {
    font-size: 15px;
  }

  .content {
    padding: 40px 0 60px;
    row-gap: 50px;
  }

  /* ヘッダー */
  .header {
    position: relative;
    height: 60px;
    padding: 20px;
  }

  .header-logo {
    width: 107px;
  }

  .header-nav-inner {
    /* display: none; */
    position: fixed;
    top: 0;
    right: 0;
    z-index: 10;
    width: 180px;
    height: 100%;
    background-color: var(--main-color);
    box-shadow: -10px 0 35px -20px rgb(0 0 0 / 25%);
    transform: translate(180px, 0);
    transition: 0.2s;
  }

  .header-nav-inner.close {
    transform: translate(0, 0);
    transition: 0.2s;
  }

  .header-navArea {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 180px;
    padding: 90px 20px 20px 50px;
    row-gap: 25px;
  }

  .header-navArea-box__link {
    color: #fff;
  }

  .header-navArea-box__link:hover {
    color: #fff;
  }

  .header-navArea-box__link--active {
    opacity: 0.6;
  }

  .header-navArea-btn {
    display: flex;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 100;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    text-align: center;
    padding: 21px 16px;
    border: none;
    outline: none;
    background: none;
    background-color: var(--main-color);
    cursor: pointer;
    appearance: none;
  }

  .header-navArea-btn__line {
    display: block;
    position: relative;
    left: 0;
    width: 100%;
    height: 2px;
    transition: all 0.4s;
    border-radius: 4px;
    background-color: #fff;
  }

  .header-navArea-btn__line::before {
    display: block;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    transition: inherit;
    border-radius: 4px;
    background-color: #fff;
    top: -8px;
  }

  .header-navArea-btn__line::after {
    display: block;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    transition: inherit;
    border-radius: 4px;
    background-color: #fff;
    top: 8px;
  }

  .header-navArea-btn__line.active {
    background-color: transparent;
  }

  .header-navArea-btn__line.active::before {
    top: 0;
    background-color: #fff;
    transform: rotate(45deg);
  }

.header-navArea-btn__line.active::after {
    top: 0;
    background-color: #fff;
    transform: rotate(-45deg);
  }

  /* メインビジュアル */
  .mv {
    height: 460px;
    background-image: url(img/sp_mv.jpg);
  }

  .mv-titleArea__title {
    font-size: 80px;
  }

  .mv-titleArea__subtitle {
    font-size: 20px;
  }

  /* ニュース */
  .news-container {
    padding: 0 20px;
  }

  .news-inner {
    display: block;
  }

  .news-heading {
    margin-bottom: 20px;
  }

  .news-heading__title {
    font-size: 32px;
  }

  .news-menu__link {
    flex-direction: column;
  }

  .news-menu__item {
    font-size: 15px;
    line-height: 1.8;
  }

  .news-menu__item:last-child {
    margin-bottom: 0;
  }

  .news-menu__title {
    line-height: 1.6;
  }

  .news-menu__date {
    margin-right: 0;
  }

  /* サービス */
  .service-container {
    padding: 0 20px;
  }

  .service-heading {
    margin-bottom: 20px;
  }

  .service-heading::before {
    top: -2px;
    right: -30px;
    font-size: 70px;
  }

  .service-heading__title {
    font-size: 32px;
  }

  .service-menu {
    row-gap: 20px;
    grid-template-columns: 1fr;
  }

  .service-menu-inner {
    padding: 40px 30px;
  }

  .service-imgArea {
    margin-bottom: 5px;
  }

  .service-imgArea__img {
    font-size: 60px;
  }

  .service-desc__title {
    font-size: 16px;
  }

  .service-desc__text {
    margin-top: 10px;
  }

  /* 下層ページ：ヘッダー */
  .pageHeader {
    height: 160px;
    background-image: url(img/sp_header.jpg);
  }

  .pageHeader-titleArea__title {
    font-size: 28px;
  }

  /* 下層ページ：メッセージ */
  .message-ceo-container {
    padding: 0 20px;
  }

  .message-ceo__title {
    font-size: 24px;
    margin-bottom: 15px;
  }

  .message-ceo__subtitle {
    font-size: 15px;
    margin-bottom: 30px;
  }

  .message-ceo-imgArea {
    margin: 0 15px 10px 0;
  }

  .office-container {
    padding: 0 20px;
  }

  .office-imgArea__img {
    height: 260px;
    object-fit: cover;
  }

  /* 下層ページ：会社概要 */
  .company-info-container {
    padding: 0 20px;
  }

  .company-info-table {
    font-size: 14px;
    line-height: 1.5;
  }

  .company-info-table__head {
    width: 100px;
    padding: 20px 0;
  }

  .company-info-table__data {
    padding: 20px 0;
  }

  .company-info-map {
    height: 300px;
  }

  .company-info-map__link {
    font-size: 12px;
    margin-top: 15px;
  }

  .company-announce-container {
    padding: 0 20px;
  }

  .company-announce-box {
    font-size: 15px;
    line-height: 1.8;
  }

  .company-announce-box:last-child {
    margin-bottom: 0;
  }

  .company-announce-box__link {
    flex-direction: column;
  }

  .company-announce-box__title {
    line-height: 1.6;
  }

  .company-announce-box__date {
    margin-right: 0;
  }

  /* フッター */
  .footer {
    padding: 40px 0 30px;
  }

  .footer-container {
    padding: 0 20px;
  }

  .footer-navArea {
    column-gap: 25px;
  }

  .footer-navArea-box {
    font-size: 12px;
  }

  .footer-copyright {
    font-size: 10px;
  }
}

JavaScript

// ハンバーガーメニュー（SP）
const btnMenu = document.getElementById('js-btn-menu');
const btnLine = document.getElementById('js-btn-line');
const gNav = document.getElementById('js-gnav');

btnMenu.addEventListener('click', () => {
  // ハンバーガーメニュー
  btnMenu.classList.toggle('active');
  btnLine.classList.toggle('active');
  // メニュー表示
  gNav.classList.toggle('close');
});

この記事が参加している募集

#最近の学び

181,634件

よろしければサポートお願いします！いただいたサポートはクリエーターとしての活動費に使わせていただきます！