@charset "UTF-8";
/*!
 * freee-support.css
 * freee導入・運用支援LP（/services/freee-support/）の追加スタイル（2026-08-01）
 *
 * style.css は SCSS からのコンパイル成果物のため、再ビルドで上書きされないよう
 * 本ファイルに分離している。読み込みは page-freee-support.php を参照（このページ専用）。
 *
 * 内容
 *   1. ファーストビューの重なり順の固定
 *   2. FV「導入後も続く運用定着支援」アイコン（1枚画像に変更したため正方形に）
 *   3. COMPANY（事務所概要）セクション
 */

/* =========================================
   1. ファーストビュー（MV）の重なり順を明示する

   背景の白い線画（hero-bg.svg）は必ず背面、人物イラスト（mv-illu.png）は前面。
   もともとは重なり順を DOM の並び順だけに任せ、人物側に mix-blend-mode: multiply を
   掛けていたため、画像のキャッシュ状態（＝読み込み・デコードの完了タイミング）に
   よっては白い線画が最前面に合成されてしまうことがあった。
   実際には multiply は見た目に影響していない（背景が透過のため）ので外し、
   z-index で「最初から白い線画が後ろ」になるように固定する。
   ========================================= */
.m-freee-support-hero__mv {
  isolation: isolate;
}

.m-freee-support-hero__mv-bg {
  z-index: 0;
}

.m-freee-support-hero__mv-illu {
  z-index: 1;
  mix-blend-mode: normal;
}

/* =========================================
   2. FV ポイントアイコン（運用定着支援）
   2枚重ねの SVG から 1枚の PNG に差し替えたため、正方形の枠に変更する
   ========================================= */
.m-freee-support-hero__point-icon-inner--shake {
  inline-size: calc(52 * 1rem / var(--font-size));
  block-size: calc(52 * 1rem / var(--font-size));
}

/* =========================================
   3. COMPANY（事務所概要）
   表と地図そのものは .m-top-company__*（style.css）を共用しているため、
   ここではセクションの余白・背景だけを定義する。
   前後の MESSAGE / FAQ と同じ gray100 背景で連続させる。
   ========================================= */
.m-freee-support-access {
  padding-block: calc(60 * 1rem / var(--font-size)) calc(20 * 1rem / var(--font-size));
  background-color: var(--color__gray100);
}

.m-freee-support-access__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media (max-width: 767px) {
  .m-freee-support-hero__point-icon-inner--shake {
    inline-size: calc(36 * 1rem / var(--font-size));
    block-size: calc(36 * 1rem / var(--font-size));
  }

  .m-freee-support-access {
    padding-block: calc(40 * 1rem / var(--font-size)) 0;
  }
}