/*
Theme Name: Hairline Faithlink
Template: Hairline
Version: 1.0.0
Description: Faith Link公式サイト専用 Hairline子テーマ
*/

/* ==========================================================================
   カスタムCSS変数
   ========================================================================== */
:root {
  --fl-color-navy: #16233F;
  --fl-color-wine: #8b0000;
  --fl-color-white: #ffffff;
  --fl-color-cream: #fff5ee; /* 現在は未使用（過去の背景色候補） */
  /* サイト全体の背景色（ヘッダー・フッターを含む） */
  --fl-color-bg: #f3f3f2;
  --fl-header-height: 80px;
  --fl-content-width: 1600px;
  /* サイト全体の優先フォント（functions.php で Google Fonts から読み込む） */
  --fl-font-primary: "Shippori Mincho B1";
}

/* ==========================================================================
   サイト全体の背景色
   ========================================================================== */
/* 親テーマの body { background: var(--color-background) }（白）を上書きする。
   フッター（.site-footer）は親テーマ・子テーマとも背景色を持たないため、
   この body の指定をそのまま継承して同じ色になる（個別指定は不要）。
   色を変えるときは :root の --fl-color-bg の1箇所だけを変更すればよい。 */
body {
  background-color: var(--fl-color-bg);
  font-family: var(--fl-font-primary), var(--font-serif);
}

/* フォーム部品はブラウザ既定で body のフォントを継承しないため、明示的に継承させる */
button,
input,
select,
textarea {
  font-family: inherit;
}

/* ==========================================================================
   ヘッダー
   ========================================================================== */
.fl-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: var(--fl-color-bg);
  border-bottom: 1px solid #e3e6e9;
}

.fl-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--fl-content-width);
  margin: 0 auto;
  padding: 14px 48px;
  min-height: var(--fl-header-height);
}

/* ---------- ロゴ ---------- */
.fl-header__logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--fl-color-navy);
  flex-shrink: 0;
}

.fl-header__logo:hover {
  opacity: 0.8;
}

.fl-header__logo-img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.fl-header__logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.fl-header__site-name {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--fl-color-navy);
}

.fl-header__tagline {
  font-size: 0.6875rem;
  color: #6b7280;
  letter-spacing: 0.02em;
}

/* ---------- ナビゲーション ---------- */
.fl-header__nav-list {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.fl-header__nav-list li a {
  display: block;
  padding: 8px 18px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--fl-color-navy);
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: color 0.2s ease;
}

.fl-header__nav-list li a:hover {
  color: var(--fl-color-wine);
}

/* ---------- CTAボタン（お問い合わせ・ご相談） ---------- */
.fl-header__nav-list li.fl-header__nav-cta a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: var(--fl-color-wine);
  color: var(--fl-color-white);
  border-radius: 6px;
  padding: 10px 24px;
  margin-left: 8px;
  font-weight: 600;
  transition: background-color 0.2s ease, opacity 0.2s ease;
}

.fl-header__nav-list li.fl-header__nav-cta a:hover {
  background-color: #6a0000;
  color: var(--fl-color-white);
}

.fl-header__nav-cta-icon {
  flex-shrink: 0;
  color: var(--fl-color-white);
}

/* ==========================================================================
   ヒーローセクション（トップページ）
   ========================================================================== */
.fl-hero {
  /* ---- 寸法の基準値（ここを変えると画像サイズ・地面ライン位置が連動する） ---- */
  /* ヒーローの基本高さ */
  --fl-hero-height: clamp(400px, 42vw, 620px);

  /* 背景イラストの倍率。従来の contain 相当（=1）に対して 0.75 に縮小。
     さらに小さく／大きくしたい場合はこの数値だけを変更する。 */
  --fl-hero-image-scale: 0.75;

  /* 背景イラストの描画高さ。％ではなく実寸で指定しているため、
     ヒーローの高さが content で伸びても画像サイズは変わらない
     （= 地面ラインの位置がずれない）。 */
  --fl-hero-image-height: calc(var(--fl-hero-height) * var(--fl-hero-image-scale));

  /* 画像の地面ライン（下部の水平線）は、画像下端から画像高さの 16.29% 上にある。
     ※ 実測値：1774x887 の元画像で y=741〜744 が水平線。
       (887 - 742.5) / 887 = 0.1629
     画像を差し替えた場合はこの係数を測り直す。 */
  --fl-hero-ground-offset: calc(var(--fl-hero-image-height) * 0.1629);

  /* 背景（静止画・動画）の横方向の位置。
     コンテンツ幅（--fl-content-width）を超える画面ではコンテンツ列の右端に
     合わせ、それより狭い画面では画面右端に寄せる。
     単純に常に画面右端へ寄せたい場合は 0px に書き換える。 */
  --fl-hero-bg-inset-x: max(0px, calc(50vw - var(--fl-content-width) / 2));

  /* ---- 背景動画（1600x900）の補正値 ----
     動画は静止画（1774x887）とは別に描き起こされたイラストで、
     余白の取り方が異なるため、そのまま同じ大きさで置くとズレる。
     下記2つの係数で「イラストの大きさ」と「地面ラインの高さ」を静止画に合わせている。

     ・静止画のイラスト部分：1742x812（余白を除いた実測値）
     ・動画のイラスト部分  ：1580x737（同上）
       → イラストの高さを揃える倍率 = (812/887) / (737/900) = 1.118 */
  --fl-hero-video-scale: 1.118;
  --fl-hero-video-height: calc(var(--fl-hero-image-height) * var(--fl-hero-video-scale));

  /* 動画は地面ラインより下の余白が静止画より広いため、その差分だけ下へ沈ませて
     地面ラインの高さを静止画と揃える（はみ出した余白は overflow: hidden で隠れる）。
     ・静止画の地面ライン：下端から 16.29%（y=740〜745 / 887）
     ・動画の地面ライン  ：下端から 22.11%（y=698〜704 / 900）
     動画を差し替えた場合はこの係数を測り直す。 */
  --fl-hero-video-drop: calc(var(--fl-hero-image-height) * 0.0843);

  /* 背景レイヤーを重ねるための基準 */
  position: relative;

  /* テキストブロックを下寄せし、CTAボタンの下端を地面ラインに合わせる。
     下パディング = 地面ラインの高さ、としているため両者がちょうど揃う。 */
  display: flex;
  align-items: flex-end;

  padding-top: clamp(56px, 8vw, 120px);
  padding-bottom: var(--fl-hero-ground-offset);

  min-height: var(--fl-hero-height);
  box-sizing: border-box;
}

/* ---------- 背景レイヤー（静止画／動画） ---------- */
/* 2枚を同じ位置に重ね、opacity の切り替えでフェード差し替えする */
.fl-hero__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  transition: opacity 0.8s ease;
}

/* 静止画：初期表示はこちら（スマホ・タブレットでは常にこのまま）。
   動画レイヤーより前面に置き、この1枚だけをフェードアウトさせることで
   下の動画が現れる（クロスフェード）。 */
.fl-hero__bg--image {
  z-index: 1;
  opacity: 1;
  background-image: url("https://faithlink.jp/a/wp-content/uploads/fl_hero_image.png");
  background-repeat: no-repeat;
  /* 高さを基準に縮小し、幅は縦横比（2:1）から自動算出 */
  background-size: auto var(--fl-hero-image-height);
  background-position: right var(--fl-hero-bg-inset-x) bottom 0;
}

/* 動画の再生が始まったら静止画をフェードアウトさせる。
   （CSSには「前の兄弟要素」を選ぶ手段がないため、JSがセクション側にも
     is-video-active クラスを付けている） */
.fl-hero.is-video-active .fl-hero__bg--image {
  opacity: 0;
}

/* 動画：初期は非表示。JSが再生開始を検知して is-active を付けると表示される。
   （フェードは上に重なる静止画側で行うため、こちらは表示/非表示の切り替えのみ）

   ※ このレイヤーには z-index / opacity を指定しないこと。
     どちらもスタッキングコンテキストを作り、下の mix-blend-mode が
     ページ背景と合成されなくなって白い矩形が見えてしまう。 */
.fl-hero__bg--video {
  visibility: hidden;
}

.fl-hero__bg--video.is-active {
  visibility: visible;
}

/* 動画は「画面いっぱい」ではなく、静止画のイラストと同じ大きさ・同じ位置に置く。
   object-fit ではなく実寸指定にしているのは、静止画と動画で余白の取り方が
   異なり、cover/contain では位置が揃わないため。 */
.fl-hero__bg--video video {
  position: absolute;
  right: var(--fl-hero-bg-inset-x);
  bottom: calc(var(--fl-hero-video-drop) * -1);
  width: auto;
  height: var(--fl-hero-video-height);
  max-width: none;

  /* 動画は静止画（透過PNG）と違い白背景が焼き込まれているため、そのまま置くと
     サイト背景色（--fl-color-bg）の上に白い矩形が見えてしまう。
     乗算合成で白を透明化し、線画だけを背景になじませる。
     背景色を変えても自動的に追従する。 */
  mix-blend-mode: multiply;
}

/* ヘッダー（.fl-header__inner）と横幅・左右パディングを揃える */
.fl-hero__inner {
  /* 背景レイヤー（静止画 z-index:1／動画）より前面に置く */
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--fl-content-width);
  margin-inline: auto;
  padding-inline: 48px;
}

/* 背景画像（右下）と文字が重ならないよう、テキストの幅を左半分に抑える */
.fl-hero__text {
  max-width: 54%;
}

/* ---------- キャッチコピー ---------- */
.fl-hero__catch {
  margin: 0;
  /* ヘッダーのサイト名（1.25rem）より一回り以上大きいサイズ */
  font-size: clamp(1.75rem, 4vw, 3.25rem);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--fl-color-navy);
}

/* 「取引の先に、」：下線なしの通常表示（強調は行わない） */
.fl-hero__catch-underline {
  text-decoration: none;
}

/* 「続く信頼と絆をー」：周囲の見出しと同じ色（.fl-hero__catch のネイビー）を継承 */
.fl-hero__catch-accent {
  color: inherit;
}

/* ---------- リード文 ---------- */
.fl-hero__lead {
  /* 見出しとの間隔（旧 28px → 48px） */
  margin: 48px 0 0;
  max-width: 34em;
  font-size: 1rem;
  line-height: 2;
  letter-spacing: 0.03em;
  /* 既存の本文色（親テーマの --color-text）に準拠 */
  color: var(--color-text, #1c2730);
}

/* ---------- CTAボタン（アウトラインスタイル） ---------- */
.fl-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* リード文との間隔（旧 36px → 64px） */
  margin-top: 64px;
  /* 2pxのボーダーが付くぶん、上下左右のパディングを2px減らして
     従来（16px 36px・ボーダーなし）と同じ外形サイズを保っている。 */
  padding: 14px 34px;
  background-color: transparent;
  border: 2px solid var(--fl-color-wine);
  color: var(--fl-color-wine);
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* ホバー時のみワインレッドで塗りつぶし、文字色を白に反転させる */
.fl-hero__cta:hover {
  background-color: var(--fl-color-wine);
  color: var(--fl-color-white);
}

/* ---------- レスポンシブ ---------- */
/* タブレット：画像の占有幅が増えるため、テキスト幅をやや広げる */
@media (max-width: 1200px) {
  .fl-hero__text {
    max-width: 62%;
  }

  .fl-hero__inner {
    padding-inline: 28px;
  }
}

/* 狭い画面：背景画像と文字が重なって読みにくくなるため画像を非表示にする。
   （薄く残したい場合は background-image を維持し、opacity を持つ疑似要素に
     切り替えるなどの調整を次のタスクで行う）
   画像が無くなると地面ラインに合わせる必要もなくなるため、
   下パディングと最低高さを通常の値に戻す。 */
@media (max-width: 900px) {
  /* 静止画・動画とも非表示（動画はそもそもJSが生成しない） */
  .fl-hero__bg {
    display: none;
  }

  .fl-hero {
    min-height: 0;
    padding-bottom: clamp(48px, 8vw, 112px);
  }

  .fl-hero__text {
    max-width: 100%;
  }
}

@media (max-width: 600px) {
  .fl-hero__inner {
    padding-inline: 20px;
  }

  .fl-hero {
    padding-top: clamp(40px, 8vw, 56px);
  }

  .fl-hero__lead {
    margin-top: 32px;
  }

  .fl-hero__cta {
    margin-top: 40px;
    padding: 12px 24px;
  }
}

/* ==========================================================================
   About Us ／ 会社概要ダイジェスト（トップページ）
   ========================================================================== */
/* 背景色は指定せず、body の --fl-color-bg をそのまま見せる */
.fl-about {
  padding-block: clamp(64px, 9vw, 120px);
}

/* ヒーロー（.fl-hero__inner）と横幅・左右パディングを揃える */
.fl-about__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 88px);
  align-items: start;
  width: 100%;
  max-width: var(--fl-content-width);
  margin-inline: auto;
  padding-inline: 48px;
}

/* ---------- 左カラム：About Us ---------- */
.fl-about__label {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--fl-color-wine);
}

.fl-about__title {
  position: relative;
  margin: 18px 0 0;
  /* 見出し下の横線ぶんの余白を確保する */
  padding-bottom: 22px;
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--fl-color-navy);
}

/* 見出しの下の短い横線 */
.fl-about__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 56px;
  height: 2px;
  background-color: var(--fl-color-wine);
}

.fl-about__body {
  margin: 28px 0 0;
  font-size: 1rem;
  line-height: 2;
  letter-spacing: 0.03em;
  /* 既存の本文色（親テーマの --color-text）に準拠 */
  color: var(--color-text, #1c2730);
}

/* ---------- 右カラム：会社概要カード（ネイビー） ---------- */
.fl-about__profile {
  background-color: var(--fl-color-navy);
  /* CTAボタン等と同じ角丸に揃える */
  border-radius: 6px;
  padding: clamp(32px, 4vw, 56px);
}

.fl-profile__label {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.7);
}

.fl-profile__title {
  margin: 18px 0 0;
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--fl-color-white);
}

/* 「（ダイジェスト）」は見出しと同じ行に、一回り小さく表示する */
.fl-profile__title-sub {
  font-size: 0.6em;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* ---------- 会社概要テーブル ---------- */
.fl-profile__table {
  width: 100%;
  margin-top: 28px;
  /* 区切り線を1本に重ねるため */
  border-collapse: collapse;
  font-size: 0.9375rem;
  line-height: 1.8;
}

.fl-profile__table th,
.fl-profile__table td {
  padding: 16px 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

/* 項目名：幅を固定し、内容より少し暗めの白にして主従をつける */
.fl-profile__table th {
  width: 30%;
  padding-right: 16px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  white-space: nowrap;
}

.fl-profile__table td {
  color: var(--fl-color-white);
}

/* 最終行の下線は不要（行と行の“間”だけに線を引く） */
.fl-profile__table tr:last-child th,
.fl-profile__table tr:last-child td {
  border-bottom: none;
}

/* ---------- レスポンシブ ---------- */
/* ヒーローと左右パディングを揃える */
@media (max-width: 1200px) {
  .fl-about__inner {
    padding-inline: 28px;
  }
}

/* タブレット・スマホ：2カラムをやめて縦積みにする */
@media (max-width: 900px) {
  .fl-about__inner {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .fl-about__inner {
    padding-inline: 20px;
  }

  /* 幅が狭いと項目名が窮屈になるため、比率を広げて折り返しを許可する */
  .fl-profile__table th {
    width: 34%;
    white-space: normal;
  }
}

/* ==========================================================================
   区切りライン＋スクロール誘導の矢印（ヒーローとABOUTの間）
   ========================================================================== */
/* 装飾のみの要素。リンクでもボタンでもないため、クリックしても何も起きない。 */
.fl-divider {
  position: relative;
  padding-block: clamp(32px, 5vw, 56px);
}

/* ---------- 横線 ---------- */
/* 画面の左端から右端まで引く。初期は scaleX(0) で見えない状態。
   width ではなく transform を使うのは、描画負荷が軽く滑らかなため。 */
.fl-divider__line {
  width: 100%;
  height: 2px;
  background-color: var(--fl-color-navy);
  transform: scaleX(0);
  transform-origin: left center;
  /* JS側の LINE_DURATION_MS と合わせること */
  transition: transform 0.8s ease-out;
}

/* JSが is-line-active を付けると左から右へ伸びる */
.fl-divider.is-line-active .fl-divider__line {
  transform: scaleX(1);
}

/* ---------- 矢印 ---------- */
/* 他セクションと同じコンテンツ幅に収め、その右端に寄せる */
.fl-divider__arrows {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  width: 100%;
  max-width: var(--fl-content-width);
  margin-inline: auto;
  margin-top: 20px;
  padding-inline: 48px;
  color: var(--fl-color-navy);
  /* 装飾要素なので、カーソルは通常のままにする */
  cursor: default;
}

.fl-divider__arrow {
  opacity: 0;
  transition: opacity 0.5s ease-out;
}

/* JSが is-arrows-active を付けるとフェードイン */
.fl-divider.is-arrows-active .fl-divider__arrow {
  opacity: 1;
}

/* 3つを少しずつ時間差で出して動きを付ける */
.fl-divider.is-arrows-active .fl-divider__arrow:nth-child(1) {
  transition-delay: 0s;
}

.fl-divider.is-arrows-active .fl-divider__arrow:nth-child(2) {
  transition-delay: 0.1s;
}

.fl-divider.is-arrows-active .fl-divider__arrow:nth-child(3) {
  transition-delay: 0.2s;
}

/* ---------- レスポンシブ ---------- */
/* 矢印の位置を他セクションの左右パディングに揃える */
@media (max-width: 1200px) {
  .fl-divider__arrows {
    padding-inline: 28px;
  }
}

@media (max-width: 600px) {
  .fl-divider__arrows {
    padding-inline: 20px;
  }
}

/* OS側で「視差効果を減らす」が有効な場合はアニメーションせず即座に表示する
   （JS側のタイマーで is-arrows-active は付くため、矢印も確実に表示される） */
@media (prefers-reduced-motion: reduce) {
  .fl-divider__line,
  .fl-divider__arrow {
    transition-duration: 0.01ms;
    transition-delay: 0s;
  }
}

/* ==========================================================================
   取扱業務（トップページ）
   ========================================================================== */
/* 背景色は指定せず、body の --fl-color-bg をそのまま見せる。
   上下余白は .fl-about と同じ値。 */
.fl-service {
  padding-block: clamp(64px, 9vw, 120px);
  /* sticky ヘッダーにアンカー（#service）が隠れないようにする */
  scroll-margin-top: calc(var(--fl-header-height) + 24px);
}

/* ヒーロー・About（.fl-about__inner）と横幅・左右パディングを揃える */
.fl-service__inner {
  width: 100%;
  max-width: var(--fl-content-width);
  margin-inline: auto;
  padding-inline: 48px;
}

/* ---------- ラベル・見出し（.fl-about__label / .fl-about__title と同じ値） ---------- */
.fl-service__label {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--fl-color-wine);
}

.fl-service__title {
  position: relative;
  margin: 18px 0 0;
  /* 見出し下の横線ぶんの余白を確保する */
  padding-bottom: 22px;
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--fl-color-navy);
}

/* 見出しの下の短い横線 */
.fl-service__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 56px;
  height: 2px;
  background-color: var(--fl-color-wine);
}

/* ---------- カードのグリッド（PC：2カラム） ---------- */
.fl-service__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(24px, 2.8vw, 40px);
  /* 見出しとの間の余白 */
  margin-top: clamp(40px, 5vw, 64px);
}

/* ---------- カード ---------- */
/* フラットなデザイン（影なし）。同じ段のカードは grid の stretch で高さが揃い、
   flex column + リンクの margin-top: auto で「詳細を見る」が常に下端に並ぶ。 */
.fl-service__card {
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 3vw, 40px);
  background-color: #ffffff;
  border: 1px solid rgba(22, 35, 63, 0.12);
  border-radius: 2px;
}

.fl-service__num {
  display: block;
  margin-bottom: 16px;
  /* body と同じ指定（しっぽり明朝B1 → 親テーマのセリフ体） */
  font-family: var(--fl-font-primary), var(--font-serif);
  font-size: 2.75rem;
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--fl-color-wine);
}

.fl-service__name {
  margin: 0;
  font-size: clamp(1.125rem, 1.5vw, 1.375rem);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--fl-color-navy);
}

.fl-service__text {
  margin: 20px 0 0;
  font-size: 1rem;
  line-height: 2;
  letter-spacing: 0.03em;
  /* 既存の本文色（親テーマの --color-text）に準拠 */
  color: var(--color-text, #1c2730);
}

/* 「主な対象」：本文より小さく、やや薄い色。
   下の margin-bottom が、リンクとの間の最低限の余白になる。 */
.fl-service__target {
  margin: 24px 0 28px;
  font-size: 0.8125rem;
  line-height: 1.8;
  letter-spacing: 0.03em;
  color: rgba(28, 39, 48, 0.7);
}

/* 枠付きの小さなタグ風ラベル */
.fl-service__target-label {
  display: inline-block;
  margin-right: 10px;
  padding: 2px 8px;
  border: 1px solid rgba(28, 39, 48, 0.4);
  line-height: 1.6;
}

/* 「詳細を見る」：クリック対象はこのリンクのみ（カード全体はリンクにしない）。
   margin-top: auto でカード下端に揃える。align-self で文字幅だけをクリック領域にする。 */
.fl-service__link {
  align-self: flex-start;
  margin-top: auto;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--fl-color-wine);
  text-decoration: none;
}

.fl-service__link:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ---------- レスポンシブ ---------- */
/* ヒーロー・Aboutと左右パディングを揃える */
@media (max-width: 1200px) {
  .fl-service__inner {
    padding-inline: 28px;
  }
}

/* 768px以下：1カラム */
@media (max-width: 768px) {
  .fl-service__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .fl-service__inner {
    padding-inline: 20px;
  }
}

/* ==========================================================================
   取引実績（トップページ／濃紺・全幅）
   ========================================================================== */
/* 全幅：.fl-divider と同じく、外側のセクションには max-width / margin を付けない。
   中身だけを .fl-achievement__inner でコンテンツ幅に収める。
   背景は Company Profile カード（.fl-about__profile）と同じ --fl-color-navy。 */
.fl-achievement {
  position: relative;
  overflow: hidden;
  /* ::before（z-index: -1）をこのセクション内に閉じ込め、背景色の上・文字の下に置く */
  isolation: isolate;
  /* 上下余白：.fl-about / .fl-service（clamp(64px, 9vw, 120px)）以上になるようにする */
  padding-block: clamp(88px, 10vw, 120px);
  background-color: var(--fl-color-navy);
  color: var(--fl-color-white);
  /* sticky ヘッダーにアンカー（#achievement）が隠れないようにする */
  scroll-margin-top: calc(var(--fl-header-height) + 24px);
}

/* ---------- 背景のスカイライン装飾 ---------- */
/* 画像は透過PNG（線の色が濃紺）。filter は ::before にのみ掛けているため、
   文字などセクション本体には影響しない。線の濃さは opacity で調整する（0.08〜0.15 の範囲）。 */
.fl-achievement::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url("https://faithlink.jp/a/wp-content/uploads/fl_hero_image.png") no-repeat right bottom / 60% auto;
  /* 濃紺の線画を白抜きにする */
  filter: brightness(0) invert(1);
  opacity: 0.12;
}

/* ヒーロー・About・取扱業務（__inner）と横幅・左右パディングを揃える */
.fl-achievement__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
  width: 100%;
  max-width: var(--fl-content-width);
  margin-inline: auto;
  padding-inline: 48px;
}

/* ---------- 左カラム：テキスト ---------- */
/* 濃紺の上ではワインレッドが見えにくいため、ラベルは白の透過にする */
.fl-achievement__label {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.7);
}

/* サイズは .fl-service__title と同じ */
.fl-achievement__title {
  position: relative;
  margin: 18px 0 0;
  /* 見出し下の横線ぶんの余白を確保する */
  padding-bottom: 22px;
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--fl-color-white);
}

/* 見出しの下の短い横線（白の透過） */
.fl-achievement__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 56px;
  height: 2px;
  background-color: rgba(255, 255, 255, 0.5);
}

.fl-achievement__lead {
  margin: 28px 0 0;
  font-size: 1rem;
  line-height: 2;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.92);
}

/* 対応エリア：上に薄い区切り線 */
.fl-achievement__area {
  margin: 36px 0;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.fl-achievement__area-label {
  margin: 0;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.6);
}

.fl-achievement__area-text {
  margin: 8px 0 0;
  font-size: 1rem;
  line-height: 1.9;
  letter-spacing: 0.03em;
  color: var(--fl-color-white);
}

/* 枠線ボタン（.fl-hero__cta と同程度のサイズ。ホバーで白背景・濃紺文字に反転） */
.fl-achievement__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 14px 34px;
  background-color: transparent;
  border: 2px solid var(--fl-color-white);
  color: var(--fl-color-white);
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.fl-achievement__link:hover {
  background-color: var(--fl-color-white);
  color: var(--fl-color-navy);
}

/* ---------- 右カラム：数字 ---------- */
.fl-achievement__stats {
  display: flex;
  flex-direction: column;
}

/* 数字ブロックの間に薄い区切り線 */
.fl-achievement__stat {
  padding-block: 32px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.fl-achievement__stat:first-child {
  padding-top: 0;
}

.fl-achievement__stat-label {
  margin: 0;
  font-size: 0.875rem;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.7);
}

/* 数字と単位のベースラインを揃える */
.fl-achievement__stat-value {
  display: flex;
  align-items: baseline;
  margin: 12px 0 0;
  line-height: 1;
}

.fl-achievement__num {
  /* .fl-service__num と同じフォント指定（しっぽり明朝B1 → 親テーマのセリフ体） */
  font-family: var(--fl-font-primary), var(--font-serif);
  font-size: clamp(56px, 7vw, 104px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--fl-color-white);
}

.fl-achievement__unit {
  margin-left: 12px;
  font-size: clamp(1.125rem, 1.6vw, 1.5rem);
  font-weight: 500;
  color: var(--fl-color-white);
}

.fl-achievement__note {
  margin: 24px 0 0;
  font-size: 0.75rem;
  line-height: 1.8;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.6);
}

/* ---------- レスポンシブ ---------- */
/* 他セクションと左右パディングを揃える */
@media (max-width: 1200px) {
  .fl-achievement__inner {
    padding-inline: 28px;
  }
}

/* 768px以下：1カラム（テキスト→数字の順）。装飾は文字の可読性を優先して薄く・全幅に */
@media (max-width: 768px) {
  .fl-achievement__inner {
    grid-template-columns: 1fr;
  }

  .fl-achievement::before {
    background-size: 100% auto;
    opacity: 0.07;
  }
}

@media (max-width: 600px) {
  .fl-achievement__inner {
    padding-inline: 20px;
  }

  .fl-achievement__link {
    padding: 12px 24px;
  }
}

/* ==========================================================================
   FLOW ／ ご相談から取引までの流れ（トップページ）
   ========================================================================== */
/* 背景色は指定せず、body の --fl-color-bg をそのまま見せる。
   上下余白・scroll-margin-top は .fl-service と同じ値。 */
.fl-flow {
  padding-block: clamp(64px, 9vw, 120px);
  /* sticky ヘッダーにアンカー（#flow）が隠れないようにする */
  scroll-margin-top: calc(var(--fl-header-height) + 24px);
}

/* ヒーロー・About・取扱業務（__inner）と横幅・左右パディングを揃える */
.fl-flow__inner {
  width: 100%;
  max-width: var(--fl-content-width);
  margin-inline: auto;
  padding-inline: 48px;
}

/* ---------- ラベル・見出し（.fl-service__label / .fl-service__title と同じ値） ---------- */
.fl-flow__label {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--fl-color-wine);
}

.fl-flow__title {
  position: relative;
  margin: 18px 0 0;
  /* 見出し下の横線ぶんの余白を確保する */
  padding-bottom: 22px;
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--fl-color-navy);
}

/* 見出しの下の短い横線 */
.fl-flow__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 56px;
  height: 2px;
  background-color: var(--fl-color-wine);
}

/* ---------- ステップ一覧（PC：5カラム） ---------- */
.fl-flow__list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 32px;
  /* 見出しとの間の余白（.fl-service__grid と同じ値） */
  margin: clamp(40px, 5vw, 64px) 0 0;
  padding: 0;
  list-style: none;
}

/* 数字：角丸なしの正方形の枠。数字はワインレッド */
.fl-flow__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 42px;
  height: 42px;
  border: 1px solid var(--fl-color-wine);
  font-family: var(--fl-font-primary), var(--font-serif);
  font-size: 1.125rem;
  line-height: 1;
  color: var(--fl-color-wine);
}

.fl-flow__text {
  margin: 20px 0 0;
  font-size: 0.9375rem;
  line-height: 1.9;
  letter-spacing: 0.03em;
  color: var(--fl-color-navy);
}

/* ---------- レスポンシブ ---------- */
/* 他セクションと左右パディングを揃える */
@media (max-width: 1200px) {
  .fl-flow__inner {
    padding-inline: 28px;
  }
}

/* 900px以下：1カラム。数字を左・テキストを右に横並びにし、項目の間に細い区切り線を入れる */
@media (max-width: 900px) {
  .fl-flow__list {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .fl-flow__item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-block: 20px;
    border-bottom: 1px solid rgba(22, 35, 63, 0.12);
  }

  /* 項目の“間”だけに線を引く */
  .fl-flow__item:last-child {
    border-bottom: none;
  }

  /* 横並びでは数字の下の余白は不要 */
  .fl-flow__text {
    margin: 0;
  }
}

@media (max-width: 600px) {
  .fl-flow__inner {
    padding-inline: 20px;
  }
}

/* ==========================================================================
   MESSAGE ／ 代表者・会社紹介（トップページ）
   ========================================================================== */
/* 背景色は指定せず、body の --fl-color-bg をそのまま見せる。
   上下余白は .fl-service と同じ値。上端に画面全幅の区切り線を入れる。 */
.fl-message {
  padding-block: clamp(64px, 9vw, 120px);
  border-top: 1px solid rgba(22, 35, 63, 0.12);
  /* sticky ヘッダーにアンカー（#message）が隠れないようにする */
  scroll-margin-top: calc(var(--fl-header-height) + 24px);
}

/* 他セクションと横幅・左右パディングを揃える */
.fl-message__inner {
  width: 100%;
  max-width: var(--fl-content-width);
  margin-inline: auto;
  padding-inline: 48px;
}

/* ---------- ラベル・見出し（.fl-service__label / .fl-service__title と同じ値） ---------- */
.fl-message__label {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--fl-color-wine);
}

.fl-message__title {
  position: relative;
  margin: 18px 0 0;
  /* 見出し下の横線ぶんの余白を確保する */
  padding-bottom: 22px;
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--fl-color-navy);
}

/* ---------- 本文 ---------- */
.fl-message__text {
  margin: 0;
  max-width: 36em;
  font-size: 1.0625rem;
  line-height: 1.9;
  letter-spacing: 0.03em;
  color: var(--fl-color-navy);
}

/* ---------- 枠線ボタン（.fl-achievement__link と同じ見た目・ネイビー反転） ---------- */
.fl-message__link {
  display: inline-block;
  margin-top: 28px;
  padding: 14px 34px;
  background-color: transparent;
  border: 2px solid var(--fl-color-navy);
  border-radius: 6px;
  color: var(--fl-color-navy);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.fl-message__link:hover {
  background-color: var(--fl-color-navy);
  color: var(--fl-color-white);
}

/* ---------- レスポンシブ ---------- */
/* 他セクションと左右パディングを揃える */
@media (max-width: 1200px) {
  .fl-message__inner {
    padding-inline: 28px;
  }
}

@media (max-width: 600px) {
  .fl-message__inner {
    padding-inline: 20px;
  }
}

/* ==========================================================================
   CONTACT ／ お問い合わせCTA（トップページ）
   ========================================================================== */
/* 背景色は指定せず、body の --fl-color-bg をそのまま見せる。
   上下余白は .fl-service と同じ値。上端に画面全幅の区切り線を入れる。 */
.fl-contact {
  padding-block: clamp(64px, 9vw, 120px);
  border-top: 1px solid rgba(22, 35, 63, 0.12);
  /* sticky ヘッダーにアンカー（#contact）が隠れないようにする */
  scroll-margin-top: calc(var(--fl-header-height) + 24px);
}

/* About・取扱業務（__inner）と横幅・左右パディング・2カラムを揃える */
.fl-contact__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 64px);
  align-items: center;
  width: 100%;
  max-width: var(--fl-content-width);
  margin-inline: auto;
  padding-inline: 48px;
}

/* ---------- 左カラム：ラベル・見出し・リード文 ---------- */
.fl-contact__label {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--fl-color-wine);
}

.fl-contact__title {
  position: relative;
  margin: 18px 0 0;
  /* 見出し下の横線ぶんの余白を確保する */
  padding-bottom: 22px;
  /* 一文が長いため .fl-service__title より一段小さいサイズにする */
  font-size: clamp(1.25rem, 2.1vw, 1.75rem);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--fl-color-navy);
}

/* 見出しの下の短い横線 */
.fl-contact__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 56px;
  height: 2px;
  background-color: var(--fl-color-wine);
}

.fl-contact__lead {
  margin: 20px 0 0;
  font-size: 0.9375rem;
  line-height: 1.9;
  letter-spacing: 0.03em;
  color: var(--fl-color-navy);
}

/* ---------- 右カラム：ボックス（ボタン＋電話） ---------- */
.fl-contact__box {
  background-color: var(--fl-color-white);
  border: 1px solid rgba(22, 35, 63, 0.12);
  border-radius: 0;
  box-shadow: none;
  padding: 40px;
}

.fl-contact__button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  background-color: var(--fl-color-wine);
  color: var(--fl-color-white);
  border-radius: 6px;
  padding: 20px 24px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.fl-contact__button:hover {
  background-color: #6a0000;
}

.fl-contact__button-icon {
  flex-shrink: 0;
  color: currentColor;
}

.fl-contact__note {
  margin: 14px 0 0;
  font-size: 0.8125rem;
  color: rgba(22, 35, 63, 0.6);
  text-align: center;
}

/* 電話番号ブロック：上に区切り線 */
.fl-contact__tel {
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid rgba(22, 35, 63, 0.12);
  text-align: center;
}

.fl-contact__tel-label {
  margin: 0;
  font-size: 0.8125rem;
  color: rgba(22, 35, 63, 0.6);
}

.fl-contact__tel-number {
  display: inline-block;
  margin: 8px 0 0;
  font-family: var(--fl-font-primary), var(--font-serif);
  font-size: clamp(30px, 4vw, 42px);
  letter-spacing: 0.04em;
  color: var(--fl-color-navy);
  text-decoration: none;
  transition: color 0.2s ease;
}

.fl-contact__tel-number:hover {
  color: var(--fl-color-wine);
}

.fl-contact__tel-hours {
  margin: 8px 0 0;
  font-size: 0.8125rem;
  color: rgba(22, 35, 63, 0.6);
}

/* ---------- レスポンシブ ---------- */
/* 他セクションと左右パディングを揃える */
@media (max-width: 1200px) {
  .fl-contact__inner {
    padding-inline: 28px;
  }
}

/* 768px以下：1カラムに切り替え */
@media (max-width: 768px) {
  .fl-contact__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

@media (max-width: 600px) {
  .fl-contact__inner {
    padding-inline: 20px;
  }

  .fl-contact__box {
    padding: 28px;
  }
}

/* アンカーリンク（#flow 等）クリック時にスムーススクロールさせる */
html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ==========================================================================
   FOOTER ／ フッター（全ページ共通）
   ========================================================================== */
/* 親テーマの .site-footer は使用しない（子テーマ独自の .fl-footer に置き換え）ため
   打ち消しは不要。画面全幅・濃紺背景にするため左右の幅制限は付けない。 */
.fl-footer {
  background-color: var(--fl-color-navy);
  color: rgba(255, 255, 255, 0.85);
  padding-block: clamp(64px, 8vw, 80px) 32px;
}

/* 他セクションと横幅・左右パディングを揃える */
.fl-footer__inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1.4fr;
  gap: 48px;
  width: 100%;
  max-width: var(--fl-content-width);
  margin-inline: auto;
  padding-inline: 48px;
}

/* ---------- ブランド（ロゴ・社名・タグライン） ---------- */
.fl-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* 赤いロゴは濃紺背景で視認性が低いため白抜きにする */
.fl-footer__logo-img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.fl-footer__name {
  margin-top: 14px;
  font-family: var(--fl-font-primary), var(--font-serif);
  font-size: 1.125rem;
  letter-spacing: 0.04em;
  color: var(--fl-color-white);
}

.fl-footer__tagline {
  margin-top: 6px;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.6);
}

/* ---------- フッターナビゲーション ---------- */
.fl-footer__nav-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fl-footer__nav-list a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  transition: color 0.2s ease;
}

.fl-footer__nav-list a:hover {
  color: var(--fl-color-white);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ---------- 会社情報 ---------- */
.fl-footer__info {
  font-size: 0.8125rem;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.7);
}

.fl-footer__info p {
  margin: 0;
}

/* ---------- 最下部（コピーライト・トップへ戻るボタン） ---------- */
.fl-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--fl-content-width);
  margin-inline: auto;
  padding-inline: 48px;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.fl-footer__copy {
  margin: 0;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.7);
}

.fl-footer__top {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  color: var(--fl-color-white);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.fl-footer__top:hover {
  background-color: var(--fl-color-white);
  color: var(--fl-color-navy);
}

/* ---------- レスポンシブ ---------- */
/* 他セクションと左右パディングを揃える */
@media (max-width: 1200px) {
  .fl-footer__inner,
  .fl-footer__bottom {
    padding-inline: 28px;
  }
}

/* 768px以下：1カラムに切り替え */
@media (max-width: 768px) {
  .fl-footer__inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

@media (max-width: 600px) {
  .fl-footer__inner,
  .fl-footer__bottom {
    padding-inline: 20px;
  }
}

/* ==========================================================================
   取扱業務ページ（page-service.php）
   ========================================================================== */
/* 他セクションと左右端を揃える */
.fl-svc__inner {
  width: 100%;
  max-width: var(--fl-content-width);
  margin-inline: auto;
  padding-inline: 48px;
}

/* ---------- ページ見出し ---------- */
.fl-svc-head {
  padding-block: clamp(56px, 8vw, 104px);
}

.fl-svc-head__label,
.fl-svc-section__label {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--fl-color-wine);
}

.fl-svc-head__title,
.fl-svc-section__title {
  position: relative;
  margin: 18px 0 0;
  padding-bottom: 22px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--fl-color-navy);
}

.fl-svc-head__title {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
}

.fl-svc-section__title {
  font-size: clamp(1.375rem, 2.2vw, 1.875rem);
}

/* 見出しの下の短い横線 */
.fl-svc-head__title::after,
.fl-svc-section__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 56px;
  height: 2px;
  background-color: var(--fl-color-wine);
}

.fl-svc-head__lead,
.fl-svc-section__intro {
  max-width: 40em;
  margin: 28px 0 0;
  font-size: 1rem;
  line-height: 1.9;
  letter-spacing: 0.03em;
  color: var(--fl-color-navy);
}

/* ---------- 各セクション共通 ---------- */
.fl-svc-lineup,
.fl-svc-section {
  padding-block: clamp(56px, 7vw, 96px);
  border-top: 1px solid rgba(22, 35, 63, 0.12);
  scroll-margin-top: calc(var(--fl-header-height) + 24px);
}

/* ---------- LINEUP ---------- */
.fl-svc-lineup__head,
.fl-svc-lineup__row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 40px;
  gap: 16px;
  align-items: center;
}

.fl-svc-lineup__head {
  margin-top: clamp(32px, 4vw, 48px);
  padding: 0 8px 12px;
  border-bottom: 1px solid rgba(22, 35, 63, 0.12);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  color: rgba(22, 35, 63, 0.55);
}

.fl-svc-lineup__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.fl-svc-lineup__row {
  padding: 20px 8px;
  border-bottom: 1px solid rgba(22, 35, 63, 0.12);
  color: var(--fl-color-navy);
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.fl-svc-lineup__row:hover {
  background-color: var(--fl-color-white);
}

.fl-svc-lineup__name {
  font-weight: 700;
  line-height: 1.6;
}

.fl-svc-lineup__target {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: rgba(22, 35, 63, 0.7);
}

.fl-svc-lineup__arrow {
  justify-self: end;
  color: var(--fl-color-wine);
}

/* ---------- 条件一覧（LAND・AREA） ---------- */
.fl-svc-specs {
  margin: clamp(32px, 4vw, 48px) 0 0;
  border-top: 1px solid rgba(22, 35, 63, 0.12);
}

.fl-svc-specs__row {
  display: grid;
  grid-template-columns: minmax(180px, 260px) 1fr;
  gap: 32px;
  padding-block: 22px;
  border-bottom: 1px solid rgba(22, 35, 63, 0.12);
}

.fl-svc-specs__row dt {
  font-weight: 700;
  line-height: 1.8;
  color: var(--fl-color-navy);
}

.fl-svc-specs__row dd {
  margin: 0;
  line-height: 1.9;
  color: var(--fl-color-navy);
}

.fl-svc-chip {
  display: inline-block;
  margin: 0 8px 8px 0;
  padding: 4px 14px;
  border: 1px solid var(--fl-color-navy);
  border-radius: 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--fl-color-navy);
}

.fl-svc-area__note {
  margin: 20px 0 0;
  font-size: 0.875rem;
  line-height: 1.9;
  color: rgba(22, 35, 63, 0.7);
}

/* ---------- 項目カード（BROKERAGE・MANAGEMENT・VACANT HOME） ---------- */
.fl-svc-items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin: clamp(32px, 4vw, 48px) 0 0;
  padding: 0;
  list-style: none;
}

.fl-svc-items__item {
  padding: 28px;
  background-color: var(--fl-color-white);
  border: 1px solid rgba(22, 35, 63, 0.12);
  border-radius: 0;
  box-shadow: none;
}

.fl-svc-items__title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--fl-color-navy);
}

.fl-svc-items__text {
  margin: 12px 0 0;
  font-size: 0.9375rem;
  line-height: 1.9;
  color: var(--fl-color-navy);
}

/* ---------- FLOW ---------- */
.fl-svc-flow {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 32px;
  margin: clamp(32px, 4vw, 48px) 0 0;
  padding: 0;
  list-style: none;
}

.fl-svc-flow__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 42px;
  height: 42px;
  border: 1px solid var(--fl-color-wine);
  font-family: var(--fl-font-primary), var(--font-serif);
  font-size: 1.125rem;
  line-height: 1;
  color: var(--fl-color-wine);
}

.fl-svc-flow__title {
  margin: 20px 0 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--fl-color-navy);
}

.fl-svc-flow__text {
  margin: 8px 0 0;
  font-size: 0.875rem;
  line-height: 1.9;
  color: rgba(22, 35, 63, 0.7);
}

/* ---------- FAQ ---------- */
.fl-svc-faq {
  margin-top: clamp(32px, 4vw, 48px);
  border-top: 1px solid rgba(22, 35, 63, 0.12);
}

.fl-svc-faq__item {
  border-bottom: 1px solid rgba(22, 35, 63, 0.12);
}

.fl-svc-faq__q {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 48px 22px 0;
  list-style: none;
  cursor: pointer;
  font-weight: 700;
  line-height: 1.6;
  color: var(--fl-color-navy);
}

.fl-svc-faq__q::-webkit-details-marker {
  display: none;
}

.fl-svc-faq__q::after {
  content: "＋";
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  font-weight: 400;
  color: var(--fl-color-wine);
}

.fl-svc-faq__item[open] .fl-svc-faq__q::after {
  content: "−";
}

.fl-svc-faq__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: var(--fl-color-navy);
  font-family: var(--fl-font-primary), var(--font-serif);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1;
  color: var(--fl-color-white);
}

.fl-svc-faq__mark--a {
  background-color: transparent;
  border: 1px solid var(--fl-color-wine);
  color: var(--fl-color-wine);
}

.fl-svc-faq__a {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding-bottom: 24px;
}

.fl-svc-faq__a p {
  margin: 0;
  padding-top: 2px;
  line-height: 1.9;
  color: var(--fl-color-navy);
}

/* ---------- CTA ---------- */
.fl-svc-cta {
  padding-block: clamp(64px, 9vw, 112px);
  background-color: var(--fl-color-navy);
  color: var(--fl-color-white);
  text-align: center;
}

.fl-svc-cta__title {
  margin: 0;
  font-family: var(--fl-font-primary), var(--font-serif);
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--fl-color-white);
}

.fl-svc-cta__button {
  display: inline-block;
  margin-top: 32px;
  padding: 20px 56px;
  background-color: var(--fl-color-white);
  border-radius: 6px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--fl-color-navy);
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.fl-svc-cta__button:hover {
  background-color: var(--fl-color-wine);
  color: var(--fl-color-white);
}

/* ---------- レスポンシブ ---------- */
@media (max-width: 1200px) {
  .fl-svc__inner {
    padding-inline: 28px;
  }
}

/* 900px以下：FLOWは1列。数字を左、見出しと説明を右に並べ、項目間に区切り線 */
@media (max-width: 900px) {
  .fl-svc-flow {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .fl-svc-flow__item {
    display: grid;
    grid-template-columns: 42px 1fr;
    column-gap: 16px;
    align-items: start;
    padding-block: 20px;
    border-bottom: 1px solid rgba(22, 35, 63, 0.12);
  }

  .fl-svc-flow__item:last-child {
    border-bottom: none;
  }

  .fl-svc-flow__num {
    grid-row: span 2;
  }

  .fl-svc-flow__title {
    margin-top: 8px;
  }
}

/* 768px以下：一覧・条件・カードを1列に */
@media (max-width: 768px) {
  .fl-svc-lineup__head {
    display: none;
  }

  .fl-svc-lineup__row {
    grid-template-columns: 1fr 24px;
    row-gap: 4px;
  }

  .fl-svc-lineup__name {
    grid-column: 1;
    grid-row: 1;
  }

  .fl-svc-lineup__target {
    grid-column: 1;
    grid-row: 2;
  }

  .fl-svc-lineup__arrow {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .fl-svc-specs__row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .fl-svc-items {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .fl-svc__inner {
    padding-inline: 20px;
  }

  .fl-svc-items__item {
    padding: 22px;
  }

  .fl-svc-cta__button {
    padding: 18px 32px;
  }
}

/* ==========================================================================
   お問い合わせページ（page-contact.php）
   ========================================================================== */
.fl-ct {
  padding-block: clamp(56px, 8vw, 104px);
}

/* 他セクションと左右端を揃える */
.fl-ct__inner {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
  width: 100%;
  max-width: var(--fl-content-width);
  margin-inline: auto;
  padding-inline: 48px;
}

/* ---------- 左カラム：ラベル・見出し・導入文・電話 ---------- */
.fl-ct__label {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--fl-color-wine);
}

.fl-ct__title {
  position: relative;
  margin: 18px 0 0;
  padding-bottom: 22px;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--fl-color-navy);
}

/* 見出しの下の短い横線 */
.fl-ct__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 56px;
  height: 2px;
  background-color: var(--fl-color-wine);
}

.fl-ct__intro {
  margin-top: 28px;
  font-size: 1rem;
  line-height: 1.9;
  letter-spacing: 0.03em;
  color: var(--fl-color-navy);
}

.fl-ct__intro p {
  margin: 0 0 1em;
}

.fl-ct__intro p:last-child {
  margin-bottom: 0;
}

.fl-ct__tel {
  margin-top: 40px;
  padding: 32px;
  background-color: var(--fl-color-white);
  border: 1px solid rgba(22, 35, 63, 0.12);
  border-radius: 0;
  text-align: center;
}

.fl-ct__tel-label,
.fl-ct__tel-hours {
  margin: 0;
  font-size: 0.8125rem;
  color: rgba(22, 35, 63, 0.6);
}

.fl-ct__tel-number {
  display: inline-block;
  margin: 8px 0;
  font-family: var(--fl-font-primary), var(--font-serif);
  font-size: clamp(28px, 3.4vw, 36px);
  letter-spacing: 0.04em;
  color: var(--fl-color-navy);
  text-decoration: none;
  transition: color 0.2s ease;
}

.fl-ct__tel-number:hover {
  color: var(--fl-color-wine);
}

/* ---------- 右カラム：フォーム ---------- */
.fl-ct__formbox {
  padding: clamp(28px, 4vw, 48px);
  background-color: var(--fl-color-white);
  border: 1px solid rgba(22, 35, 63, 0.12);
  border-radius: 0;
  box-shadow: none;
}

.fl-ct__note {
  margin: 0 0 28px;
  font-size: 0.8125rem;
  color: rgba(22, 35, 63, 0.6);
}

/* ---------- フォーム部品（Contact Form 7） ---------- */
.fl-form__row {
  margin-bottom: 24px;
}

.fl-form__label {
  display: block;
  margin: 0 0 8px;
  font-weight: 700;
  color: var(--fl-color-navy);
}

.fl-form__req,
.fl-form__opt {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border: 1px solid currentColor;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.6;
  vertical-align: middle;
}

.fl-form__req {
  color: var(--fl-color-wine);
}

.fl-form__opt {
  color: rgba(22, 35, 63, 0.45);
}

.fl-form__hint {
  margin: 0 0 12px;
  font-size: 0.8125rem;
  line-height: 1.8;
  color: rgba(22, 35, 63, 0.6);
}

/* CF7 は各入力欄を inline の span で包むため、縦に積むようにする */
.fl-form__row .wpcf7-form-control-wrap {
  display: block;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 select,
.wpcf7 textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 14px 16px;
  background-color: var(--fl-color-white);
  border: 1px solid rgba(22, 35, 63, 0.3);
  border-radius: 0;
  font: inherit;
  color: var(--fl-color-navy);
}

.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 input[type="tel"]:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
  border-color: var(--fl-color-navy);
  outline: 2px solid rgba(22, 35, 63, 0.2);
}

.wpcf7 textarea {
  min-height: 200px;
  resize: vertical;
}

.wpcf7 input[type="file"] {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 10px;
  padding: 10px;
  background-color: var(--fl-color-white);
  border: 1px solid rgba(22, 35, 63, 0.3);
  border-radius: 0;
  font: inherit;
  font-size: 0.875rem;
  color: var(--fl-color-navy);
}

/* 同意チェック：チェックボックスと文を横並びにする */
.fl-form__row--consent .wpcf7-list-item {
  margin: 0;
}

.fl-form__row--consent label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  line-height: 1.7;
  color: var(--fl-color-navy);
}

.fl-form__row--consent input[type="checkbox"] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin: 3px 0 0;
}

.fl-form__row--consent a {
  color: var(--fl-color-wine);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.fl-form__row--turnstile {
  margin-block: 8px 24px;
}

.fl-form__row--submit input[type="submit"] {
  display: block;
  width: 100%;
  padding: 20px;
  background-color: var(--fl-color-wine);
  border: 0;
  border-radius: 6px;
  font: inherit;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--fl-color-white);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.fl-form__row--submit input[type="submit"]:hover {
  background-color: #6a0000;
}

.fl-form__row--submit .wpcf7-spinner {
  display: block;
  margin: 12px auto 0;
}

.wpcf7 .wpcf7-not-valid-tip {
  margin-top: 6px;
  font-size: 0.8125rem;
  color: var(--fl-color-wine);
}

.wpcf7 form .wpcf7-response-output {
  margin: 24px 0 0;
  padding: 14px 16px;
  border-width: 1px;
  font-size: 0.9375rem;
  line-height: 1.7;
}

/* ---------- レスポンシブ ---------- */
@media (max-width: 1200px) {
  .fl-ct__inner {
    padding-inline: 28px;
  }
}

@media (max-width: 900px) {
  .fl-ct__inner {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .fl-ct__inner {
    padding-inline: 20px;
  }

  .fl-ct__tel {
    margin-top: 32px;
    padding: 24px;
  }

  .fl-ct__formbox {
    padding: 24px 20px;
  }

  .fl-form__row {
    margin-bottom: 20px;
  }

  .wpcf7 input[type="text"],
  .wpcf7 input[type="email"],
  .wpcf7 input[type="tel"],
  .wpcf7 select,
  .wpcf7 textarea {
    padding: 12px 14px;
  }

  .fl-form__row--submit input[type="submit"] {
    padding: 18px;
  }
}

/* ==========================================================================
   取引実績ページ（page-jisseki.php）
   ========================================================================== */
/* 他セクションと左右端を揃える */
.fl-wk__inner {
  width: 100%;
  max-width: var(--fl-content-width);
  margin-inline: auto;
  padding-inline: 48px;
}

/* ---------- ページ見出し ---------- */
.fl-wk-head {
  padding-top: clamp(56px, 8vw, 104px);
  padding-bottom: clamp(32px, 4vw, 56px);
}

.fl-wk-head__label {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--fl-color-wine);
}

.fl-wk-head__title {
  position: relative;
  margin: 18px 0 0;
  padding-bottom: 22px;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--fl-color-navy);
}

/* 見出しの下の短い横線 */
.fl-wk-head__title::after,
.fl-wk-year__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 56px;
  height: 2px;
  background-color: var(--fl-color-wine);
}

.fl-wk-head__lead {
  max-width: 40em;
  margin: 28px 0 0;
  font-size: 1rem;
  line-height: 1.9;
  letter-spacing: 0.03em;
  color: var(--fl-color-navy);
}

/* ---------- 累計の数字 ---------- */
.fl-wk-stats {
  padding-bottom: clamp(40px, 5vw, 72px);
}

.fl-wk-stats__card {
  padding: clamp(28px, 4vw, 48px);
  background-color: var(--fl-color-white);
  border: 1px solid rgba(22, 35, 63, 0.12);
  border-radius: 0;
  box-shadow: none;
}

.fl-wk-stats__items {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.fl-wk-stats__item + .fl-wk-stats__item {
  padding-left: clamp(24px, 4vw, 56px);
  border-left: 1px solid rgba(22, 35, 63, 0.12);
}

.fl-wk-stats__label {
  margin: 0;
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  color: rgba(22, 35, 63, 0.6);
}

.fl-wk-stats__value {
  display: flex;
  align-items: baseline;
  margin: 12px 0 0;
}

.fl-wk-stats__num {
  font-family: var(--fl-font-primary), var(--font-serif);
  font-size: clamp(56px, 8vw, 96px);
  font-weight: 300;
  line-height: 1;
  color: var(--fl-color-navy);
}

.fl-wk-stats__unit {
  margin-left: 8px;
  font-size: clamp(20px, 2vw, 24px);
  color: var(--fl-color-navy);
}

.fl-wk-stats__note {
  margin: 24px 0 0;
  font-size: 0.8125rem;
  color: rgba(22, 35, 63, 0.6);
}

/* ---------- 年区分へのジャンプ ---------- */
.fl-wk-nav {
  padding-bottom: clamp(32px, 4vw, 56px);
}

.fl-wk-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fl-wk-nav__link {
  display: inline-block;
  padding: 6px 16px;
  border: 1px solid var(--fl-color-navy);
  border-radius: 0;
  font-size: 0.875rem;
  color: var(--fl-color-navy);
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.fl-wk-nav__link:hover {
  background-color: var(--fl-color-navy);
  color: var(--fl-color-white);
}

/* ---------- 年区分ごとの一覧 ---------- */
.fl-wk-year {
  padding-block: clamp(40px, 5vw, 72px);
  border-top: 1px solid rgba(22, 35, 63, 0.12);
  scroll-margin-top: calc(var(--fl-header-height) + 24px);
}

.fl-wk-year__inner {
  display: grid;
  grid-template-columns: minmax(200px, 280px) 1fr;
  gap: clamp(32px, 5vw, 72px);
}

/* スクロール中も年区分の見出しを固定ヘッダーの下に残す */
.fl-wk-year__head {
  position: sticky;
  top: calc(var(--fl-header-height) + 32px);
  align-self: start;
}

.fl-wk-year__title {
  position: relative;
  margin: 0;
  padding-bottom: 18px;
  font-family: var(--fl-font-primary), var(--font-serif);
  font-size: clamp(1.5rem, 2.4vw, 2.125rem);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: var(--fl-color-navy);
}

.fl-wk-year__meta {
  margin: 14px 0 0;
  font-size: 0.875rem;
  color: rgba(22, 35, 63, 0.6);
}

.fl-wk-year__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 48px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fl-wk-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding-block: 16px;
  border-bottom: 1px solid rgba(22, 35, 63, 0.12);
}

.fl-wk-item__name {
  color: var(--fl-color-navy);
}

.fl-wk-item__units {
  font-size: 0.875rem;
  color: var(--fl-color-wine);
  white-space: nowrap;
}

/* ---------- レスポンシブ ---------- */
@media (max-width: 1200px) {
  .fl-wk__inner {
    padding-inline: 28px;
  }
}

@media (max-width: 1000px) {
  .fl-wk-year__list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  .fl-wk-year__inner {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .fl-wk-year__head {
    position: static;
  }
}

@media (max-width: 600px) {
  .fl-wk__inner {
    padding-inline: 20px;
  }

  .fl-wk-stats__items {
    grid-template-columns: 1fr;
  }

  .fl-wk-stats__item + .fl-wk-stats__item {
    margin-top: 24px;
    padding-top: 24px;
    padding-left: 0;
    border-left: none;
    border-top: 1px solid rgba(22, 35, 63, 0.12);
  }

  .fl-wk-year__list {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   会社概要ページ（page-company.php）
   取扱業務ページの .fl-svc-* を再利用し、不足分だけをここで追加する
   ========================================================================== */
/* 事業内容カードの番号 */
.fl-co-num {
  display: block;
  margin-bottom: 14px;
  font-family: var(--fl-font-primary), var(--font-serif);
  font-size: clamp(1.75rem, 2.4vw, 2.25rem);
  font-weight: 300;
  line-height: 1;
  color: var(--fl-color-wine);
}

.fl-co-link {
  display: inline-block;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--fl-color-wine);
  text-decoration: none;
}

.fl-co-link:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.fl-svc-items__item .fl-co-link {
  margin-top: 16px;
}

/* ---------- 代表挨拶 ---------- */
.fl-co-message {
  max-width: 44em;
  margin-top: clamp(28px, 3vw, 40px);
}

.fl-co-message p {
  margin: 0 0 1.4em;
  font-size: 1.0625rem;
  line-height: 2;
  letter-spacing: 0.03em;
  color: var(--fl-color-navy);
}

.fl-co-message .fl-co-message__sign {
  margin-top: 2em;
  font-family: var(--fl-font-primary), var(--font-serif);
  font-weight: 700;
}

/* ---------- 私たちが大切にしていること ---------- */
.fl-co-phil {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: clamp(28px, 3vw, 40px) 0 0;
  padding: 0;
  list-style: none;
}

.fl-co-phil__item {
  padding: 20px 24px;
  background-color: var(--fl-color-white);
  border: 1px solid rgba(22, 35, 63, 0.12);
  border-left: 3px solid var(--fl-color-wine);
  border-radius: 0;
  box-shadow: none;
  font-weight: 600;
  line-height: 1.7;
  color: var(--fl-color-navy);
}

/* ---------- 免許の注記・表内リンク ---------- */
.fl-co-note {
  margin: 20px 0 0;
  font-size: 0.8125rem;
  line-height: 1.9;
  color: rgba(22, 35, 63, 0.6);
}

.fl-svc-specs dd a[href^="tel:"] {
  color: var(--fl-color-navy);
  text-decoration: none;
  transition: color 0.2s ease;
}

.fl-svc-specs dd a[href^="tel:"]:hover {
  color: var(--fl-color-wine);
}

/* ---------- レスポンシブ ---------- */
@media (max-width: 1000px) {
  .fl-co-phil {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .fl-co-phil {
    grid-template-columns: 1fr;
  }
}

/* トップページ About（#about）へのアンカーが固定ヘッダーに隠れないようにする */
.fl-about {
  scroll-margin-top: calc(var(--fl-header-height) + 24px);
}

/* 会社概要ページ：PROFILE は小見出しを置かずページ見出しの直下に表を続けるため、上余白だけ詰める */
#profile.fl-svc-section {
  padding-top: clamp(32px, 4vw, 56px);
}

/* ==========================================================================
   プライバシーポリシーページ（page-privacy.php）
   本文は通常のエディタで編集するため、出力される要素（p・h2・ul・a）に直接スタイルを当てる
   ========================================================================== */
.fl-privacy {
  max-width: 46em;
}

.fl-privacy > *:first-child {
  margin-top: 0;
}

.fl-privacy p {
  margin: 0 0 1.2em;
  font-size: 1rem;
  line-height: 2;
  letter-spacing: 0.03em;
  color: var(--fl-color-navy);
}

.fl-privacy h2 {
  margin: 2.6em 0 0.8em;
  padding-left: 14px;
  border-left: 3px solid var(--fl-color-wine);
  font-family: var(--fl-font-primary), var(--font-serif);
  font-size: clamp(1.125rem, 1.6vw, 1.25rem);
  font-weight: 700;
  line-height: 1.6;
  color: var(--fl-color-navy);
}

.fl-privacy h2:first-of-type {
  margin-top: 1.6em;
}

.fl-privacy ul {
  margin: 0 0 1.2em;
  padding-left: 1.4em;
  list-style: disc;
}

.fl-privacy li {
  margin-bottom: 0.3em;
  line-height: 1.9;
  color: var(--fl-color-navy);
}

.fl-privacy a {
  color: var(--fl-color-wine);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.fl-privacy .fl-privacy__address {
  margin-top: 1.2em;
  padding: 20px 24px;
  background-color: var(--fl-color-white);
  border: 1px solid rgba(22, 35, 63, 0.12);
  line-height: 1.9;
}

.fl-privacy .fl-privacy__date {
  margin-top: 3em;
  font-size: 0.9375rem;
  color: rgba(22, 35, 63, 0.7);
}

/* ==========================================================================
   スマホ用ハンバーガーメニュー（900px以下。PC幅の表示は変えない）
   ========================================================================== */
.fl-header__toggle {
  display: none;
}

@media (max-width: 900px) {
  /* 他セクションの左右余白（1200px以下は28px）に揃える */
  .fl-header__inner {
    padding-inline: 28px;
  }

  .fl-header__toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 48px;
    height: 48px;
    margin-left: auto;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
  }

  .fl-header__toggle:focus-visible {
    outline: 2px solid var(--fl-color-navy);
    outline-offset: 2px;
  }

  .fl-header__toggle-bar {
    display: block;
    width: 24px;
    height: 2px;
    background-color: var(--fl-color-navy);
    transition: transform 0.2s ease, opacity 0.2s ease;
  }

  /* 開いている間は × にする（バーの中心間隔 8px＝高さ2px＋gap 6px） */
  .fl-header__toggle[aria-expanded="true"] .fl-header__toggle-bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .fl-header__toggle[aria-expanded="true"] .fl-header__toggle-bar:nth-child(2) {
    opacity: 0;
  }

  .fl-header__toggle[aria-expanded="true"] .fl-header__toggle-bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  /* ナビ：sticky の .fl-header を基準に、ヘッダー下端から全幅のパネルとして開く */
  .fl-header__nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(100vh - var(--fl-header-height));
    max-height: calc(100dvh - var(--fl-header-height));
    overflow-y: auto;
    background-color: var(--fl-color-bg);
    border-top: 1px solid rgba(22, 35, 63, 0.12);
    border-bottom: 1px solid rgba(22, 35, 63, 0.12);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
  }

  .fl-header.is-menu-open .fl-header__nav {
    opacity: 1;
    visibility: visible;
  }

  .fl-header__nav-list {
    flex-direction: column;
    align-items: stretch;
  }

  .fl-header__nav-list li {
    border-bottom: 1px solid rgba(22, 35, 63, 0.12);
  }

  .fl-header__nav-list li a {
    display: flex;
    align-items: center;
    min-height: 56px;
    padding: 0 28px;
    font-size: 1rem;
  }

  /* お問い合わせ・ご相談：パネル最下部の全幅ボタン */
  .fl-header__nav-list li.fl-header__nav-cta {
    padding: 20px 28px 24px;
    border-bottom: none;
  }

  .fl-header__nav-list li.fl-header__nav-cta a {
    display: flex;
    justify-content: center;
    width: 100%;
    min-height: 56px;
    margin-left: 0;
    padding: 0 24px;
  }

  /* メニューを開いている間は背景をスクロールさせない */
  html.fl-menu-open {
    overflow: hidden;
  }
}

@media (max-width: 600px) {
  .fl-header__inner {
    padding-inline: 20px;
  }

  /* 375px幅ではロゴ＋キャッチフレーズ（約247px）とボタンが収まらないため、サイト名とロゴ画像だけにする */
  .fl-header__tagline {
    display: none;
  }

  .fl-header__nav-list li a {
    padding: 0 20px;
  }

  .fl-header__nav-list li.fl-header__nav-cta {
    padding: 20px 20px 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fl-header__nav,
  .fl-header__toggle-bar {
    transition: none;
  }
}

/* ==========================================================================
   日本語の折り返し（文節の途中で改行しにくくする）
   word-break: auto-phrase は対応ブラウザのみ有効。未対応では従来どおりの折り返しになる。
   ========================================================================== */
main p,
main li,
main dd,
main dt,
.fl-footer p,
.fl-form__label,
.fl-form__hint,
.wpcf7-list-item-label {
  word-break: auto-phrase;
  line-break: strict;
  overflow-wrap: break-word;
}

main h1,
main h2,
main h3,
.fl-hero__catch {
  word-break: auto-phrase;
  text-wrap: balance;
}

/* 電話番号・メールアドレス・数字だけの表示は、上の指定の影響を受けないよう初期値に戻す */
.fl-contact__tel-number,
.fl-ct__tel-number,
.fl-achievement__num,
.fl-wk-stats__num,
.fl-service__num,
.fl-flow__num,
.fl-svc-flow__num,
.fl-co-num,
a[href^="tel:"],
a[href^="mailto:"] {
  word-break: normal;
  line-break: auto;
  overflow-wrap: normal;
}

/* ==========================================================================
   フッター最下部の区切り線を中身の左右端に揃える
   上線を、左右の余白を持つ .fl-footer__bottom から内側の .fl-footer__bottom-inner へ移す
   ========================================================================== */
.fl-footer__bottom {
  display: block;
  padding-top: 0;
  border-top: 0;
}

.fl-footer__bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}