@charset "UTF-8";

/**
 * 全ページ共通の追加スタイル（style.css の後に読み込む）
 *
 * assets/css/style.css は SCSS のビルド成果物で、SCSS ソースが手元に無いため直接編集しない。
 * ヘッダー・フッターなど「全ページ共通パーツ」に後から足したスタイルはこのファイルに書く。
 * ページ単位のスタイルは assets/css/{page}.css（fee.css / services.css など）へ。
 *
 * 目次
 *   1. ヘッダー：サービスのプルダウン（PC・マウスオン）
 *   2. フッター最下部：プライバシーポリシー／サイトマップ
 */

/* =========================================================
   1. ヘッダー：サービスのプルダウン（PC・マウスオン）
   ---------------------------------------------------------
   .m-header__item--has-menu にマウスを乗せる（またはキーボードで
   フォーカスが入る）と .m-header__menu を表示する。
   キーボード判定は :focus-within ではなく :has(:focus-visible) を使う。
   「事務所情報」のトリガーは遷移しない <button> なので、:focus-within だと
   クリック後もフォーカスが残ってメニューが開きっぱなしになる。
   SP はドロワー側のアコーディオンを使うため、PC 幅だけで有効にする。
   ========================================================= */
@media (min-width: 768px) {
  .m-header__item {
    position: relative;
  }

  /* プルダウンを持つ項目は、リンクの右に小さな▼を付ける */
  .m-header__item--has-menu > .m-header__link {
    display: inline-flex;
    align-items: center;
    gap: calc(6 * 1rem / var(--font-size));
  }

  .m-header__item--has-menu > .m-header__link::after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: calc(4 * 1rem / var(--font-size)) calc(3.5 * 1rem / var(--font-size)) 0;
    border-color: currentColor transparent transparent;
    transition: rotate var(--duration);
  }

  .m-header__item--has-menu:hover > .m-header__link::after,
  .m-header__item--has-menu:has(:focus-visible) > .m-header__link::after {
    rotate: 180deg;
  }

  /* パネル本体。上の padding-block-start がリンクとパネルの隙間を埋めるので、
     マウスを下ろす途中でホバーが切れない。 */
  .m-header__menu {
    position: absolute;
    z-index: 10;
    top: 100%;
    left: 50%;
    translate: -50% 0;
    padding-block-start: calc(18 * 1rem / var(--font-size));
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity var(--duration),
      visibility var(--duration);
  }

  .m-header__item--has-menu:hover > .m-header__menu,
  .m-header__item--has-menu:has(:focus-visible) > .m-header__menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .m-header__menu-list {
    display: flex;
    flex-direction: column;
    min-width: calc(240 * 1rem / var(--font-size));
    padding: calc(12 * 1rem / var(--font-size));
    border: calc(2 * 1rem / var(--font-size)) solid var(--color__black);
    border-radius: calc(16 * 1rem / var(--font-size));
    background-color: var(--color__white);
    box-shadow: 0 calc(8 * 1rem / var(--font-size)) calc(24 * 1rem / var(--font-size)) rgba(0, 0, 0, 0.08);
  }

  .m-header__menu-link {
    display: block;
    padding: calc(9 * 1rem / var(--font-size)) calc(12 * 1rem / var(--font-size));
    border-radius: calc(8 * 1rem / var(--font-size));
    font-family: var(--font-family__zen);
    font-weight: 500;
    font-size: calc(14 * 1rem / var(--font-size));
    line-height: 1.6;
    letter-spacing: 0.05em;
    white-space: nowrap;
    color: var(--color__text);
    transition: background-color var(--duration);
  }

  .m-header__menu-link:hover,
  .m-header__menu-link:focus-visible {
    background-color: var(--color__yellow);
  }

  /* 「サービス一覧を見る」は区切り線を入れて他の項目と分ける */
  .m-header__menu-item--all {
    margin-block-start: calc(8 * 1rem / var(--font-size));
    padding-block-start: calc(8 * 1rem / var(--font-size));
    border-top: 1px solid var(--color__border-gray, #e5e5e5);
  }

  .m-header__menu-item--all .m-header__menu-link {
    font-weight: 700;
  }
}

/* =========================================================
   2. フッター最下部：区切り線の下に「プライバシーポリシー／サイトマップ」
   ---------------------------------------------------------
   style.css の .m-footer__bottom は justify-content: flex-end
   （コピーライトのみ）だったので、左にリンク・右にコピーライトの
   2カラムに変更する。SP は縦積みで、どちらも左寄せにする。
   ========================================================= */
.m-footer__bottom {
  justify-content: space-between;
  gap: calc(24 * 1rem / var(--font-size));
}

.m-footer__legal {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(8 * 1rem / var(--font-size)) calc(24 * 1rem / var(--font-size));
  font-family: var(--font-family__zen);
  font-weight: 500;
  font-size: calc(13 * 1rem / var(--font-size));
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: var(--color__gray700);
}

.m-footer__legal-link {
  color: inherit;
}

@media (max-width: 767px) {
  .m-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: calc(16 * 1rem / var(--font-size));
  }

  .m-footer__copyright {
    text-align: left;
  }
}