/* ============================================================
   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では基本的にサイズだけ管理します。
   ============================================================ */

.logo {
  margin: 0;
}

.logo a {
  display: block;
}

.logo img {
  display: block;

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

  height: auto;
}

/* ============================================================
   ハンバーガーボタン
   ------------------------------------------------------------
   【動作はscript.jsと連動】
   .active が付くと「三本線 → ×」に変化します。
   ============================================================ */

.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 が付いたときの表示です。
   【基本的に変更しない】
   ============================================================ */

.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 も確認してください。
   ============================================================ */

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

/* ============================================================
   フッター会社情報
   ============================================================ */

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

/* ============================================================
   フッターナビ
   ============================================================ */

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

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

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

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

.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 が追加されて表示されます。

   【基本的に変更しない】
   位置やサイズを変更すると全ページで変わります。
   ============================================================ */

.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版の基本レイアウトは上のCSSで管理しています。
   ============================================================ */

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

  /* ==========================================================
     ハンバーガー
     ========================================================== */

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

    flex-shrink: 0;

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

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

  /* ==========================================================
     ナビ
     ========================================================== */

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

  /* ==========================================================
     メイン
     ========================================================== */

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