見出し画像

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

Toyo

今回はスマホサイトのコーディングです。
コードはBEM記法にしました。
現在、Sassについて勉強中で、中級編が終えた頃にまとめてCSSはSassのネストにしようと思っています。
教材は「無料コーディング練習所」にある「初級編：企業サイト」を使いました。
教材の完成版（コーディングしたもの）は下記のサイトです。

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

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

今回はデスクトップファースト、デザインは先にパソコン用から始め、メディアクエリでスマホ用のデザインをするものです。
デザインの切り替わりとなるブレイクポイントは、課題にあわせ767pxにしました。

@media screen and (max-width: 767px) {

}


「デスクトップファースト」と「スマホファースト」について下記のようにまとめてみました。

「ハンバーガーメニュー」をクリックすると現れるメニューのコーディングは次回になります。
フッターにあるメニューの「ホーム」「メッセージ」「会社概要」をそれぞれクリックすると、各サイトに移動するようにしました。

テキストエディタは「Cursor（カーソル）」を使っています。

Cursor（カーソル）の画面

CursorにはコーディングをサポートしてくれるAI機能（ChatGPT）が付いています。無料版を利用しているのでAI機能の使用回数に制限があるが、無料で利用できる生成AI（ChatGPT、Copilot、Gemini）を使えば無料版でも十分だと思います。

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


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


関連する記事

作成したコードはこちらです。
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 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 -->

</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 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 -->

</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 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 -->

</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-navArea {
    display: none;
  }

  .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;
  }

  /* メインビジュアル */
  .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;
  }
}

いいなと思ったら応援しよう！

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

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

#最近の学び

188,730件