@charset "UTF-8";

/**
 * 企業_広告_スポットページ（産業医EXPRESS 広告LP）のヘッダー・フッター用CSS
 *
 * 担当範囲はページ共通のベースと、ショートコードで出力するヘッダー / フッター のみ。
 * 2カラムレイアウト・本文・資料請求フォームのCSSはWordPress管理画面の本文側 \3c style> で管理している。
 *
 * 本文に [company_spot_header] があるページだけ、functions/short-code.php の
 * company_spot_enqueue_assets() が読み込む。
 *
 * LPの直下（.company-spot-lp）と各モジュールの先頭で `all: revert` を当てて
 * UA スタイルまで巻き戻し、テーマやプラグインのCSSに依存せず
 * モジュール内のCSSだけで見た目が閉じるようにしている。
 * 本文側の \3c style> はこのCSSより後に出るので、本文のCSSが必ず勝つ。
 */

/* ---------------------------------------------------------------
 * ページ全体のベース
 * ------------------------------------------------------------- */

/* UAのbody余白を消しつつ、テーマCSSが読み込まれる状況になっても
   min-width / overflow / zoom でLPが崩れないようにしておく */
body:has(.company-spot-lp) {
  min-width: 0;
  max-width: none;
  margin: 0;
  overflow: visible;
  background-color: #f5f5f5;
  color: #000;
  zoom: normal;
}

/* scroll-behavior: smooth は付けない。ページ内リンクのスクロールは
   テーマの SmoothScroll と Table of Contents Plus が jQuery の
   animate({scrollTop}) で行っており、CSS側のスムーススクロールと
   競合して1フレーム1px程度まで減速してしまうため。 */
html:has(.company-spot-lp) {
  overflow: auto;
}

/* LP配下は一度すべてUAスタイルまで巻き戻し、以降のCSSだけで組み立てる。
   :where() で詳細度を下げているので、この後に書くCSSと本文側の \3c style> が必ず勝つ。 */
.company-spot-lp,
.company-spot-lp :where(*),
.company-spot-lp :where(*)::before,
.company-spot-lp :where(*)::after {
  all: revert;
}

.company-spot-lp {
  width: 100%;
  font-family: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.8;
  color: #000;

  &,
  & *,
  & *::before,
  & *::after {
    box-sizing: border-box;
  }

  /* 本文・テンプレート共通で使うユーティリティ */
  em {
    font-style: normal;
  }

  a {
    text-decoration: none;

    &:hover {
      text-decoration: none;
    }
  }

  .blue {
    color: #1565c0;
  }

  /*
   * デザインデータは Adobe Fonts（nitalago-ruika / din-2014）を指定しているが、
   * 本サイトではkitを読み込まない方針のため、雰囲気の近いGoogle Fontsで代替する。
   * ・.title_f（丸ゴシック見出し） → M PLUS Rounded 1c
   * ・.num（数字）               → Barlow
   */
  .title_f {
    font-family: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Noto Sans JP", sans-serif;

    /* デザインは nitalago-ruika の font-weight: 100（細め）指定なので、代替フォントでも細めに寄せる */
    font-weight: 400;
    font-style: normal;
  }

  .num {
    font-family: Barlow, "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-style: normal;
  }

  .view_pc {
    @media screen and (max-width: 768px) {
      display: none;
    }
  }

  .view_sp {
    @media screen and (min-width: 769px) {
      display: none;
    }
  }
}

/* ---------------------------------------------------------------
 * ヘッダー
 * ------------------------------------------------------------- */
.company-spot-lp .header,
.company-spot-lp .header * {
  all: revert;
}

.company-spot-lp .header {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 12px;
  margin: 0;
  background-color: #fff;
  box-shadow: 0 2px 10px rgb(0 0 0 / 5%);
  font-family: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  line-height: 1.5;

  &,
  & *,
  & *::before,
  & *::after {
    box-sizing: border-box;
  }

  :where(a) {
    text-decoration: none;
  }

  :where(ul) {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  :where(p) {
    margin: 0;
  }

  :where(img) {
    display: block;
    max-width: 100%;
    height: auto;
  }

  /* ロゴ */
  .l-header__logo {
    flex-shrink: 0;
    width: 180px;
    margin-right: 16px;

    a,
    img {
      display: block;
      width: 100%;
      height: auto;
    }
  }

  /* グローバルナビ（ページ内アンカー） */
  .global-nav ul {
    display: flex;
    align-items: center;

    li {
      margin-right: 24px;

      a {
        color: #333;
        font-size: 13px;
        font-weight: 700;
        white-space: nowrap;

        &:hover {
          color: #1565c0;
        }
      }
    }
  }

  /* 右側（保健師リンク / 電話 / CTA） */
  .box_right {
    display: flex;
    align-items: center;
    margin-left: auto;

    .txt_link_blue {
      margin-right: 16px;

      a {
        display: inline-flex;
        gap: 4px;
        align-items: center;
        color: #1565c0;
        font-size: 12px;
        text-decoration: underline;
        white-space: nowrap;

        &::after {
          content: "";
          display: inline-block;
          width: 10px;
          height: 10px;
          background: url("../../img/external-link_s.webp") no-repeat center center / contain;
        }
      }
    }

    /* 電話番号はサイト共通ヘッダー（header.php）と同じテキスト表現に合わせる */
    .l-header__info-tel {
      flex-shrink: 0;
      margin-right: 16px;
    }

    .tel {
      display: block;
    }

    .tel__num {
      padding-left: 24px;
      background: url("../../img/common/icon_tel_blue.svg") no-repeat left center;
      color: #434e5b;
      font-family: Lato, "Noto Sans JP", sans-serif;
      font-size: 18px;
      font-weight: 900;
      line-height: 26px;
      letter-spacing: 1px;
      white-space: nowrap;
    }

    .tel__reception {
      padding-left: 10px;
      color: #434e5b;
      font-size: 10px;
      line-height: 18px;
      text-align: center;
      white-space: nowrap;
    }

    .header_btn a {
      display: inline-block;
      padding: 10px 16px;
      border-radius: 100px;
      background: #ffb32c;
      color: #fff;
      font-size: 13px;
      font-weight: 700;
      line-height: 1.2;
      white-space: nowrap;
      transition: opacity 200ms;

      &:hover {
        opacity: 0.8;
      }
    }
  }

  /* 左カラムは画面幅の75%しかないため、ビューポート幅より一段早く詰めていく */
  @media screen and (max-width: 1520px) {
    .l-header__logo {
      width: 160px;
    }

    .global-nav ul li {
      margin-right: 14px;

      a {
        font-size: 12px;
      }
    }

    .box_right {
      .tel__num {
        padding-left: 20px;
        background-size: 14px auto;
        font-size: 16px;
        line-height: 24px;
      }

      .tel__reception {
        padding-left: 0;
        font-size: 9px;
        line-height: 14px;
      }

      .header_btn a {
        padding: 9px 12px;
        font-size: 12px;
      }
    }
  }

  /* 収まらなくなったら優先度の低いものから落とす */
  @media screen and (max-width: 1300px) {
    .box_right .txt_link_blue {
      display: none;
    }
  }

  @media screen and (max-width: 1100px) {
    .box_right .l-header__info-tel {
      display: none;
    }
  }

  @media screen and (max-width: 900px) {
    .global-nav {
      display: none;
    }
  }

  /* SPはロゴのみの追従ヘッダー（CTAは画面下の固定ボタンに寄せる） */
  @media screen and (max-width: 768px) {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 100;
    padding: 8px 12px;

    .l-header__logo {
      width: 238px;
      max-width: 65%;
      margin-right: 0;
    }

    .box_right {
      display: none;
    }
  }
}

/* ---------------------------------------------------------------
 * フッター
 * ------------------------------------------------------------- */
.company-spot-lp .footer,
.company-spot-lp .footer * {
  all: revert;
}

.company-spot-lp .footer {
  display: block;
  font-family: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  line-height: 1.6;

  &,
  & *,
  & *::before,
  & *::after {
    box-sizing: border-box;
  }

  :where(a) {
    text-decoration: none;
  }

  :where(ul) {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  :where(p) {
    margin: 0;
  }

  :where(img) {
    display: block;
    max-width: 100%;
    height: auto;
  }

  .l-footer {
    background: #434e5b;
  }

  .l-footer__inner {
    width: auto;
    padding: 70px 30px 55px;

    @media screen and (max-width: 992px) {
      width: 100%;
      padding: 50px 30px;
    }
  }

  .l-footer__main {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;

    @media screen and (max-width: 992px) {
      display: block;
      margin-bottom: 0;
    }
  }

  .l-footer__logo {
    width: 250px;

    @media screen and (max-width: 992px) {
      width: 100%;
      max-width: 315px;
    }

    a,
    img {
      display: block;
      width: 100%;
      height: auto;
    }
  }

  .l-footer__tel {
    display: block;
    padding-top: 35px;
    color: #fff;
    font-size: 25px;
    font-weight: 700;

    a {
      display: block;
      color: #fff;

      &::before {
        content: "";
        display: inline-block;
        width: 18px;
        height: 18px;
        margin-right: 8px;
        vertical-align: baseline;
        background: url("../../img/common/icon_tel_white.svg") no-repeat center center / contain;
      }
    }

    span {
      display: block;
      font-size: 13px;
      font-weight: 400;
    }
  }

  .footer-nav {
    display: flex;

    @media screen and (max-width: 992px) {
      display: block;
      margin-top: 40px;
    }
  }

  .footer-nav__list {
    margin-right: 80px;

    @media screen and (max-width: 992px) {
      margin-right: 0;

      &:not(:first-child) {
        margin-top: 25px;
        padding-top: 25px;
        border-top: 1px solid #fff;
      }
    }

    li {
      display: block;
    }

    a {
      color: #fff;
      font-size: 13px;
      line-height: 32px;
      transition: opacity 200ms;

      &:hover {
        opacity: 0.7;
      }
    }
  }

  .l-footer__sub {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;

    @media screen and (max-width: 992px) {
      display: block;
    }
  }

  .footer-copyright {
    color: #fff;
    font-size: 12px;
    font-weight: 400;

    @media screen and (max-width: 992px) {
      margin-top: 60px;
    }
  }

  .footer-notice {
    color: #bfbfbf;
    font-size: 11px;

    @media screen and (max-width: 992px) {
      margin-top: 10px;
      margin-bottom: 12px;
    }
  }
}