/* ============================================================
   common.css
   ------------------------------------------------------------
   【このファイルの役割】
   サイト全ページで共通して使用するデザイン・レイアウトを
   管理します。

   主に管理しているもの
   ・ヘッダー
   ・ロゴ
   ・ハンバーガーメニュー
   ・グローバルナビ
   ・メイン上部の余白
   ・フッター
   ・フッターナビ
   ・プライバシーポリシー／サイトポリシー
   ・コピーライト
   ・TOPへ戻るボタン
   ・電話番号リンク

   【重要】
   このCSSは複数ページで共通使用しています。
   ここを変更するとサイト全体に影響する可能性があります。

   基本的には「共通部分を変更したい場合」にだけ編集してください。

   ページごとのデザインは各ページ専用CSSで管理します。
   ------------------------------------------------------------ */

/* ============================================================
   基本設定
   ------------------------------------------------------------
   サイト全体の基本となる背景色です。

   【変更注意】
   ここを変更すると、サイト全体の背景色が変わります。
   ============================================================ */

body {
  /* サイト全体の基本背景色 */
  background-color: #fffdf9;
}

/* ============================================================
   ヘッダー
   ------------------------------------------------------------
   PC・スマートフォン共通のヘッダー設定です。

   ヘッダーの高さ・背景・位置などを変更すると、
   サイト全ページに影響します。
   ============================================================ */

.site-header {
  /* ヘッダーを画面上部に固定 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;

  /* ヘッダー背景 */
  background: #fff;

  /* 下部のオレンジライン */
  border-bottom: 3px solid #eaa317;

  /* 他の要素より前面に表示 */
  z-index: 1000;
}

.header-inner {
  /*
    ヘッダー内部の最大幅。
    PC画面で内容が広がりすぎないように制限しています。

    【変更注意】
    ヘッダー全体の横幅に関係します。
  */
  max-width: 1200px;

  /* PC版ヘッダーの高さ */
  height: 80px;

  margin: 0 auto;
  padding: 0 20px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  box-sizing: border-box;
}

/* ============================================================
   ロゴ
   ------------------------------------------------------------
   【画像変更OK】
   ロゴ画像を変更する場合はHTML側の画像ファイルを変更します。

   CSSではロゴの表示サイズを管理します。

   【変更する場合】
   ロゴ画像そのもの
   → 各HTMLファイル

   ロゴの大きさ
   → このCSS
   ============================================================ */

.logo {
  margin: 0;
}

.logo a {
  display: block;
}

.logo img {
  display: block;

  /* PC版ロゴ最大幅 */
  max-width: 220px;

  height: auto;
}

/* ============================================================
   ハンバーガーボタン
   ------------------------------------------------------------
   【script.jsと連動】

   三本線のメニューボタンです。

   .active が付くと、三本線から「×」に変化します。

   【重要】
   見た目はこのCSS、
   開閉の動作はscript.jsが担当しています。

   基本的には変更しないでください。
   ============================================================ */

.hamburger {
  width: 45px;
  height: 45px;
  padding: 0;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  gap: 6px;

  border: none;
  background: transparent;

  /* マウスを乗せたときにクリック可能であることを示す */
  cursor: pointer;
}

.hamburger span {
  display: block;

  width: 30px;
  height: 3px;

  /* ハンバーガーの色 */
  background: #eaa317;

  /* 線の端を丸くする */
  border-radius: 999px;

  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
}

/* ============================================================
   ハンバーガーを開いた状態
   ------------------------------------------------------------
   JavaScriptによって .active が付いたときの表示です。

   三本線を変形させて「×」を作っています。

   【基本的に変更しない】
   script.jsと連動しているため、
   数値を変更すると開閉時の表示が崩れる可能性があります。
   ============================================================ */

.hamburger.active span:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

/* ============================================================
   グローバルナビ
   ------------------------------------------------------------
   ページ上部のメニューを管理します。

   【script.jsと連動】
   .active が付くと右側からメニューが表示されます。

   【基本的に変更しない】
   ============================================================ */

.global-nav {
  position: fixed;

  /* PC版ヘッダーの下から表示 */
  top: 80px;

  /* 初期状態では画面右側へ隠す */
  right: -320px;

  width: 320px;

  /*
    ヘッダー高さ83px
    （80px + border-bottom 3px）
  */
  height: calc(100vh - 83px);

  background: #fff;

  /* 開閉アニメーション */
  transition: right 0.3s ease;

  z-index: 999;
}

/* メニューが開いた状態 */
.global-nav.active {
  right: 0;
}

.global-nav .menu {
  margin: 0;
  padding: 20px 0;

  list-style: none;
}

.global-nav .menu li {
  /* 各メニューの区切り線 */
  border-bottom: 1px solid #eaa317;
}

.global-nav .menu a {
  display: block;

  padding: 18px 25px;

  color: #333;
  text-decoration: none;

  font-size: 16px;
}

/* PCでマウスを乗せたとき */
.global-nav .menu a:hover {
  background: #fff4df;
  color: #eaa317;
}

/* ============================================================
   メイン
   ------------------------------------------------------------
   固定ヘッダーによって本文が隠れないように、
   ヘッダー分の上余白を確保しています。

   【重要】
   ヘッダーの高さを変更する場合は、
   この padding-top も確認してください。

   PC版のヘッダー高さは
   80px + 下線3px = 83px
   になっています。
   ============================================================ */

main {
  padding-top: 83px;
}

/* ============================================================
   フッター
   ------------------------------------------------------------
   サイト全ページ共通のフッターです。

   フッターの上余白・背景・上線を管理します。
   ============================================================ */

footer {
  /* ページ内容とフッターの間隔 */
  margin-top: 100px;

  background: #fff;

  /* フッター上部のオレンジライン */
  border-top: 3px solid #eaa317;
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;

  padding: 60px 20px;

  display: flex;
  justify-content: space-between;
  align-items: flex-start;

  gap: 60px;

  box-sizing: border-box;
}

/* ============================================================
   フッター会社情報
   ------------------------------------------------------------
   フッター左側に表示する会社情報です。

   会社名・住所・電話番号・FAX番号などの
   実際の文章はHTML側で変更します。

   このCSSでは文字の大きさや間隔を管理します。
   ============================================================ */

.footer-company {
  /*
    左側の会社情報を
    余ったスペースいっぱいに使用
  */
  flex: 1;
}

.footer-company h2 {
  margin: 0 0 20px;

  color: #333;

  font-size: 20px;
  line-height: 1.6;
}

.footer-company p {
  margin: 0 0 15px;

  color: #333;

  font-size: 14px;
  line-height: 1.8;
}

/* ============================================================
   フッター右側
   ------------------------------------------------------------
   フッターナビを配置するエリアです。

   【変更注意】
   幅を変更するとフッター全体のレイアウトが変わります。
   ============================================================ */

.footer-right {
  width: 300px;

  /*
    会社情報側が広がっても
    フッターナビ幅を維持する
  */
  flex-shrink: 0;
}

/* ============================================================
   フッターナビ
   ------------------------------------------------------------
   ページ下部のメニューです。

   メニューの内容やリンク先はHTML側で管理します。

   このCSSでは、線・文字・余白などを管理します。
   ============================================================ */

.footer-nav {
  width: 100%;
}

.footer-nav ul {
  margin: 0;
  padding: 0;

  list-style: none;
}

.footer-nav li {
  border-bottom: 1px solid #eaa317;
}

/* 一番上にも線を表示 */
.footer-nav li:first-child {
  border-top: 1px solid #eaa317;
}

.footer-nav a {
  display: block;

  padding: 12px 10px;

  color: #333;
  text-decoration: none;

  font-size: 14px;
}

/* PCでマウスを乗せたとき */
.footer-nav a:hover {
  background: #fff4df;
  color: #eaa317;
}

/* ============================================================
   プライバシーポリシー・サイトポリシー
   ------------------------------------------------------------
   フッターナビの下に表示される補助リンクです。

   リンク先や文章はHTML側で管理します。
   ============================================================ */

.footer-links {
  margin-top: 20px;

  display: flex;
  align-items: center;
  justify-content: flex-start;

  gap: 15px;
}

.footer-links a {
  display: inline-block;

  color: #333;
  text-decoration: none;

  font-size: 13px;
  line-height: 1.6;
}

/* PCでマウスを乗せたとき */
.footer-links a:hover {
  color: #eaa317;
}

.footer-links span {
  color: #999;

  font-size: 13px;
}

/* ============================================================
   コピーライト
   ------------------------------------------------------------
   ページ最下部に表示される著作権表示です。

   文章はHTML側で変更します。
   このCSSでは背景・文字色・余白などを管理します。
   ============================================================ */

.copy-right {
  margin: 0;
  padding: 15px 20px;

  /* オレンジ背景 */
  background: #eaa317;

  color: #fff;

  text-align: center;

  font-size: 13px;
  line-height: 1.5;
}

/* ============================================================
   TOPへ戻るボタン
   ------------------------------------------------------------
   【script.jsと連動】

   スクロールすると .show が追加されて表示されます。

   【基本的に変更しない】
   この設定を変更すると全ページの
   「TOPへ戻る」ボタンが変わります。
   ============================================================ */

.page-top {
  position: fixed;

  /* PC版の位置 */
  right: 25px;
  bottom: 25px;

  width: 55px;
  height: 55px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #eaa317;
  color: #fff;

  border-radius: 50%;

  font-size: 22px;
  font-weight: 400;
  line-height: 1;

  text-decoration: none;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

  z-index: 999;

  /*
    初期状態では非表示
  */
  opacity: 0;
  visibility: hidden;

  transform: translateY(10px);

  transition:
    opacity 0.3s ease,
    transform 0.3s ease,
    visibility 0.3s ease;
}

/*
  JavaScriptによって .show が付いた状態
*/
.page-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* PCでマウスを乗せたとき */
.page-top:hover {
  background: #d9930d;
  transform: translateY(-5px);
}

/* ============================================================
   スマートフォン
   ------------------------------------------------------------
   768px以下ではスマートフォン用レイアウトに切り替えます。

   【重要】
   この中の設定はスマートフォン表示にのみ影響します。

   PC版がきれいに表示されていて、
   スマートフォンだけを調整したい場合は、
   基本的にはこの中を確認します。
   ============================================================ */

@media screen and (max-width: 768px) {
  /* ==========================================================
     基本設定
     ----------------------------------------------------------
     スマートフォンで横スクロールが出ないようにしています。
     ========================================================== */

  html,
  body {
    width: 100%;
    max-width: 100%;

    margin: 0;
    padding: 0;

    /*
      スマートフォンで横スクロールが出るのを防止。
      お問い合わせフォームなどの横幅対策にも関係します。
    */
    overflow-x: hidden;
  }

  /* ==========================================================
     ヘッダー
     ----------------------------------------------------------
     スマートフォン版のヘッダーサイズを設定します。
     ========================================================== */

  .site-header {
    width: 100%;

    /* スマートフォンでは線を少し細くする */
    border-bottom-width: 2px;
  }

  .header-inner {
    width: 100%;

    /* スマートフォン版ヘッダー高さ */
    height: 65px;

    padding: 0 15px;

    box-sizing: border-box;
  }

  .logo {
    margin: 0;

    /*
      ロゴが縮みすぎないように固定
    */
    flex-shrink: 0;
  }

  .logo img {
    display: block;

    width: auto;

    /* スマートフォン版ロゴ最大幅 */
    max-width: 170px;

    height: auto;
  }

  /* ==========================================================
     ハンバーガー
     ----------------------------------------------------------
     スマートフォン版のハンバーガーボタンです。

     PC版とは別にサイズを調整しています。
     ========================================================== */

  .hamburger {
    width: 45px;
    height: 45px;
    padding: 0;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;
  }

  .hamburger span {
    width: 28px;
    height: 3px;
  }

  /* ==========================================================
     ナビ
     ----------------------------------------------------------
     スマートフォン版のメニューです。

     ハンバーガーボタンを押すと、
     script.jsによって .active が付き、
     右側からメニューが表示されます。
     ========================================================== */

  .global-nav {
    position: fixed;

    /*
      スマートフォンではヘッダー直下から表示
    */
    top: 65px;

    /*
      初期状態は画面外
    */
    right: -100%;

    /*
      画面幅の80%
      最大320px
    */
    width: 80%;
    max-width: 320px;

    /*
      ヘッダー分を引いた高さ
    */
    height: calc(100vh - 65px);

    /*
      メニューが長い場合は縦スクロール
    */
    overflow-y: auto;
    overflow-x: hidden;

    background: #fff;

    transition: right 0.3s ease;

    z-index: 999;
  }

  .global-nav.active {
    right: 0;
  }

  .global-nav .menu {
    width: 100%;

    margin: 0;
    padding: 10px 0;

    box-sizing: border-box;
  }

  .global-nav .menu li {
    width: 100%;

    margin: 0;
    padding: 0;

    box-sizing: border-box;
  }

  .global-nav .menu a {
    display: block;

    width: 100%;

    box-sizing: border-box;

    padding: 17px 20px;

    color: #333;

    font-size: 15px;
    line-height: 1.5;

    text-align: left;
    text-decoration: none;
  }

  /* ==========================================================
     メイン
     ----------------------------------------------------------
     固定ヘッダーの下に本文を表示するための余白です。

     ヘッダーの高さ65px
     ＋ 下線2px
     ＝ 67px
     となっています。
     ========================================================== */

  main {
    width: 100%;
    max-width: 100%;

    box-sizing: border-box;

    /*
      スマートフォン版ヘッダー高さ65px
      ＋ 下線2px
    */
    padding-top: 67px;
  }

  /* ==========================================================
     フッター
     ----------------------------------------------------------
     スマートフォンではフッターを縦並びにします。
     ========================================================== */

  footer {
    width: 100%;

    /*
      スマートフォンではPCより少し狭い余白
    */
    margin-top: 70px;
  }

  .footer-inner {
    width: 100%;
    max-width: 100%;

    /*
      PCの横並びから縦並びへ変更
    */
    display: block;

    padding: 40px 20px;

    box-sizing: border-box;
  }

  /* ==========================================================
     フッター会社情報
     ----------------------------------------------------------
     スマートフォン版の会社情報です。
     ========================================================== */

  .footer-company {
    width: 100%;

    margin: 0 0 35px;
  }

  .footer-company h2 {
    margin: 0 0 15px;

    font-size: 14px;
    line-height: 1.6;
    font-weight: 700;

    /*
      文字を不自然に固定幅で折り返さない
    */
    white-space: normal;
  }

  .footer-company p {
    margin: 0 0 15px;

    font-size: 14px;
    line-height: 1.8;
  }

  /* ==========================================================
     フッターナビ
     ----------------------------------------------------------
     スマートフォンでもメニューを縦方向に表示します。

     【確認ポイント】
     文字は左揃えになっています。
     ========================================================== */

  .footer-right {
    width: 100%;
    max-width: 100%;
  }

  .footer-nav {
    width: 100%;
  }

  .footer-nav ul {
    width: 100%;

    margin: 0;
    padding: 0;
  }

  .footer-nav li {
    width: 100%;

    margin: 0;
    padding: 0;
  }

  .footer-nav a {
    display: block;

    width: 100%;

    box-sizing: border-box;

    padding: 13px 10px;

    font-size: 14px;
    line-height: 1.5;

    /*
      スマートフォンでも左揃え
    */
    text-align: left;
  }

  /* ==========================================================
     プライバシー・サイトポリシー
     ----------------------------------------------------------
     フッターナビ下の補助リンクです。
     ========================================================== */

  .footer-links {
    width: 100%;

    margin-top: 18px;

    display: flex;
    align-items: center;
    justify-content: flex-start;

    gap: 12px;
  }

  .footer-links a {
    font-size: 12px;
    line-height: 1.6;
  }

  .footer-links span {
    font-size: 12px;
  }

  /* ==========================================================
     コピーライト
     ========================================================== */

  .copy-right {
    width: 100%;

    box-sizing: border-box;

    padding: 13px 15px;

    font-size: 11px;
    line-height: 1.5;

    text-align: center;
  }

  /* ==========================================================
     TOPへ戻る
     ----------------------------------------------------------
     スマートフォンではボタンを少し小さくしています。
     ========================================================== */

  .page-top {
    /*
      スマートフォンでは少し内側に配置
    */
    right: 15px;
    bottom: 15px;

    width: 48px;
    height: 48px;

    font-size: 20px;
  }
}

/* ============================================================
   電話番号リンク
   ------------------------------------------------------------
   【重要】
   href="tel:" のリンクをサイト全体で統一します。

   スマートフォンでは電話番号をタップすると
   電話アプリを起動できます。

   ブラウザ標準の「青文字＋下線」表示にならないように
   サイト全体で色と装飾を指定しています。

   【基本的にこの設定は変更しない】
   電話番号の見た目を全ページ共通にするための設定です。
   ============================================================ */

a[href^="tel:"] {
  color: #eaa317 !important;

  text-decoration: none !important;

  /*
    一部ブラウザでの文字装飾対策
  */
  -webkit-text-decoration: none !important;

  font-weight: 500;

  /*
    スマートフォンでタップしたときの
    ブラウザ標準ハイライトを透明にする
  */
  -webkit-tap-highlight-color: transparent;
}

/* PCで電話番号にマウスを乗せたとき */
a[href^="tel:"]:hover {
  opacity: 0.8;
}