@charset "utf-8";
/* ==========================================================================
   fgnetwork 子テーマ 追加CSS
   親テーマ TREE のスタイルを上書きする。親テーマのファイルは直接編集しない。
   ========================================================================== */


#site_loader_logo .logo_image.mobile {
  max-width: 90%;
  height: auto;
}

#footer_logo .pc_logo_image {
  max-width: 400px;
  height: auto;
}

#footer_logo .mobile_logo_image {
  max-width: 90%;
  height: auto;
}

/* --------------------------------------------------------------------------
   1. メインビジュアル：キャッチコピーの縦書き　★ 2026-08-13 無効化
   --------------------------------------------------------------------------
   【無効化の理由】
   2026-08-13 の入稿で、メインビジュアルはスライド4枚案を取りやめ、
   動画1本（TOP動画_web.mp4）に確定した。動画にロゴが焼き込まれているため
   キャッチコピー欄はすべて空にしており、表示するテキストが存在しない。

   下記の指定はすべて #index_slider（スライダー表示時のみ出力される要素）が
   対象のため、動画表示（index_header_content_type = type2）では
   そもそも適用されないが、意図を明示するためコメントアウトしている。

   スライダー表示に戻す場合は、このブロックと、下部スマホ用ブロック内の
   「#index_slider」の指定（同じく無効化済み）のコメントを外せば復帰する。

   TREE に縦書きの設定項目はないため子テーマCSSで実装していた。
   （親テーマもサイド見出しで writing-mode:vertical-rl を使っており相性は良い）

   ⚠️ 復帰させるときは、下の無効化ブロックの「/*」と「*／」を外すこと。
   CSSのコメントは入れ子にできないため、無効化ブロックの中には
   コメント記号（スラッシュ＋アスタリスク）を書かないこと。
   説明は下記のとおり、この見出しコメント側にまとめてある。

   ・.catch span の line-height:1.9
     … 縦書きでは「行間 = 列の間隔」。余白をしっかり取るための指定
   ・.caption_inner .desc span
     … 説明文は縦書きのキャッチの左隣に置く。現在は原稿が空だが、
       入稿後に使う場合の受け皿として定義していた
-------------------------------------------------------------------------- */
/*
#index_slider .caption {
  height: 68vh;
}
#index_slider .caption_inner {
  height: 100%;
  display: flex;
  align-items: flex-start;
}
#index_slider .direction_type1 .caption_inner { justify-content: flex-start; }
#index_slider .direction_type2 .caption_inner { justify-content: center; }
#index_slider .direction_type3 .caption_inner { justify-content: flex-end; }

#index_slider .catch span {
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
  text-orientation: upright;
  display: inline-block;
  letter-spacing: 0.18em;
  line-height: 1.9;
  text-indent: 0;
}

#index_slider .caption_inner .desc span {
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
  display: inline-block;
  letter-spacing: 0.1em;
  line-height: 2.2;
}
#index_slider .desc {
  margin: 0 30px 0 0;
}
*/


/* --------------------------------------------------------------------------
   1-b. メインビジュアル：ロゴ（キャッチフレーズ画像）を動画の手前に出す
   --------------------------------------------------------------------------
   2026-08-18、動画を「ロゴなし版」に差し替えた。
   代わりにロゴを、テーマオプションのキャッチフレーズ（タイプ「画像」）として
   動画の手前に重ねている（管理画面：トップページ > メインビジュアル）。

   ロゴは黒文字のため、映像の明るい部分では読めても、川面や樹木など
   中間色の上では沈む。色を変えずに視認性を上げるため、白い薄い影を敷く。
   PCの表示幅は管理画面の「画像の幅」（460px）、スマホは画面幅に対して指定する。
-------------------------------------------------------------------------- */
#index_slider.video .catch_image img {
  filter: drop-shadow(0 0 14px rgba(255, 255, 255, 0.65));
}

@media screen and (max-width: 750px) {
  /* 管理画面の「画像の幅」はPC用の1つしかないため、スマホ幅はCSSで抑える */
  #index_slider.video .catch_image img {
    width: 72vw !important;
    max-width: 320px;
  }
}

/* ロゴの出るタイミングを動画に合わせて遅らせる。

   ⚠️ .first_animate と .animate の両方に当てること。
   親テーマはローディング画面の有無で付けるクラスを変えている
   （functions/loading_script.php）。
     ローディングあり → after_load() で .first_animate（親の既定は2.0s）
     ローディングなし → DOM構築時に .animate     （親の既定は1.0s）
   どちらの場合も動画の再生開始とほぼ同時にクラスが付くので、遅延は同じ8秒でよい。
   .first_animate だけに書くと、ローディング画面が出ない回
   （「ロード中表示を1日1回だけにする」がONの2回目以降など）にロゴが早く出てしまう。 */
#index_slider.video .caption.first_animate .animate1,
#index_slider.video .caption.animate .animate1 {
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-animation: slideUp 1.0s cubic-bezier(0.165, 0.84, 0.44, 1) forwards 8.0s !important;
  animation: slideUp 1.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards 8.0s !important;
}

#index_video_mp4, #youtube_video_player { width:auto !important; }


/* --------------------------------------------------------------------------
   2. アンカー着地時の見出しかぶり対策
   --------------------------------------------------------------------------
   TREE 標準の内部リンクJSは「クリック時」だけ固定ヘッダー高さを差し引く。
   #付きURLに直接着地した場合（外部リンク・301リダイレクト経由など）は
   見出しが固定ヘッダー(PC:121px)の下に潜るため、CSSで着地位置をずらす。
   詳細: /docs/tree-verification.md 検証3
-------------------------------------------------------------------------- */
.fg-anchor-section,
.post_content [id^="sec-"] {
  scroll-margin-top: 140px;
}


/* --------------------------------------------------------------------------
   3. アンカーナビ
-------------------------------------------------------------------------- */
/* セレクタを `ul.fg-anchor-nav` にしているのは詳細度のため。
   TCDクラシックエディタが
     :is(.tcdce-body, .editor-styles-wrapper) ul { list-style-type: var(--tcdce-ul-list-style) }
   （editor.css:1339 / 既定 disc）を当てており、
   ページビルダーの文章ウィジェットは .tcdce-body で包まれる。
   単なる .fg-anchor-nav（0,1,0）では負けて中黒が出てしまう。 */
ul.fg-anchor-nav {
  list-style: none;
  margin: 0 0 60px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
.fg-anchor-nav li { margin: 0; }
.fg-anchor-nav li + li { 
  border-left: 1px solid rgba(0, 0, 0, 0.12);
}
.fg-anchor-nav a {
  display: block;
  padding: 16px 22px;
  font-size: 15px;
  line-height: 1.4;
  text-decoration: none;
}
@media only screen and (max-width: 767px) {
  .fg-anchor-nav li + li { 
    border-left: none;
  }
}


/* --------------------------------------------------------------------------
   3-2. 社員の声のページ見出し（#page_header）を固定ページと揃える
   --------------------------------------------------------------------------
   TREE の見出しボックスの位置指定は「.page（固定ページ）」に限定されており、
   親テーマが知らないカスタム投稿タイプ（interview）では効かない。
   また背景色もテーマのアクセントカラー（オレンジ）が当たってしまう。
   固定ページと同じ「黒60%」に揃える。
-------------------------------------------------------------------------- */
#page_header .headline .title_area {
  line-height: 1.4;
  font-weight: 500;
  width: 100%;
  padding: 0 20px;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  box-sizing: border-box;
}
#page_header .headline .title_area h1 { font-weight: 500; }

/* 文字色・文字サイズは、固定ページなら「ヘッダーの設定」から
   ページごとのCSSが出力される（functions/head.php）。
   カスタム投稿タイプ（interview）にはその出力が無く、
   **文字が黒のまま背景写真に埋もれる**ため、ここで指定する。 */
.post-type-archive-interview #page_header .headline,
.single-interview #page_header .headline {
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 30px;
}
.post-type-archive-interview #page_header .headline .main,
.single-interview #page_header .headline .main,
.post-type-archive-interview #page_header .headline h1,
.single-interview #page_header .headline h1 {
  color: #fff;
}
.post-type-archive-interview #page_header .headline .sub_title,
.single-interview #page_header .headline .sub_title {
  font-size: 13px;
  letter-spacing: 0.12em;
  margin-top: 8px;
  opacity: 0.85;
}


/* --------------------------------------------------------------------------
   4. Instagram（Spotlight）の表示制御
   --------------------------------------------------------------------------
   プラグイン標準スタイルに依存せず、レイアウトは子テーマ側で持つ。
   将来プラグインを差し替えても、取得部分だけ交換すればこの定義はそのまま使える。
   テンプレート側の受け皿は .fg-instagram でラップする。
-------------------------------------------------------------------------- */
.fg-instagram {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}
.fg-instagram__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.fg-instagram__grid img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}


/* --------------------------------------------------------------------------
   5. 社員の声（interview）
-------------------------------------------------------------------------- */
/* 一覧：顔写真＋氏名＋職種のカード */
.fg-interview-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 30px;
  margin: 0 0 60px;
  padding: 0;
  list-style: none;
}
.fg-interview-card { margin: 0; }
.fg-interview-card a { display: block; text-decoration: none; }
/* ⚠️ height:auto を必ず入れること。
   <img> には width/height 属性が付く（1024x683 など）。これは指定値として
   効くため、height を auto にしないと aspect-ratio が無視され、
   **カードごとに写真の高さが変わって一覧が崩れる**（実際に踏んだ）。 */
.fg-interview-card__photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: #eee;
}
.fg-interview-card__body { padding: 18px 4px 0; }
.fg-interview-card__job {
  display: block;
  font-size: 13px;
  letter-spacing: 0.08em;
  opacity: 0.7;
}
.fg-interview-card__name {
  display: block;
  margin: 6px 0 0;
  font-size: 20px;
  line-height: 1.5;
}
.fg-interview-card__year {
  display: block;
  margin: 4px 0 0;
  font-size: 13px;
  opacity: 0.7;
}

/* 詳細ページ
   ---------------------------------------------------------------------
   一覧用の写真（アイキャッチ）は詳細では出さない。
   顔写真ではなく仕事中・趣味の写真を仮に当てているため、
   下の2枚と同じ写真が並んで見えてしまうため（ご指定）。

   プロフィールは名前を主役にした横書きのブロックにして、
   その下に「仕事中／素顔・趣味」の2枚を少し傾けて並べる。 */
.fg-interview-profile {
  margin: 0 0 46px;
  padding: 0 0 0 18px;
  border-left: 3px solid #151f5d;
}
.fg-interview-profile__job {
  font-size: 14px;
  letter-spacing: 0.08em;
  color: #151f5d;
  font-weight: 600;
  margin: 0;
}
.fg-interview-profile__name { font-size: 32px; line-height: 1.4; margin: 8px 0 0; }
.fg-interview-profile__year { font-size: 14px; opacity: 0.7; margin: 8px 0 0; }

/* 写真2枚（仕事中／素顔・趣味）。少し傾けて重ねる。
   採用ページの「働く環境・制度」と同じ見せ方でそろえている。 */
.fg-interview-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 10px;
  margin: 0 0 60px;
  align-items: start;
}
.fg-interview-photos__item { margin: 0; }
.fg-interview-photos__item img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  display: block;
}
.fg-interview-photos__item figcaption {
  margin: 14px 0 0;
  font-size: 13px;
  letter-spacing: 0.06em;
  opacity: 0.7;
  text-align: center;
}

@media only screen and (min-width: 768px) {
  /* 回転はさせず、右の写真を下げて「斜めの並び」にする（ご指定）。
     段差を付けることで、真横に並べたときの平坦さを避けている。 */
  .fg-interview-photos__item--work {
    position: relative;
    z-index: 1;
  }
  .fg-interview-photos__item--private {
    position: relative;
    z-index: 2;
    margin: 56px 0 0 -28px;   /* 下へずらし、少しだけ重ねる */
  }
  .fg-interview-photos { padding: 0 0 20px; }
  /* 1枚しか無いときは幅を広げない */
  .fg-interview-photos--single { grid-template-columns: 1fr; max-width: 560px; margin-left: auto; margin-right: auto; }
  .fg-interview-photos--single .fg-interview-photos__item { transform: none; margin: 0; }
}

/* スマホ：横並びをやめて縦に積み、幅を少し絞って左右に寄せ、少しだけ重ねる（ご指定）。 */
@media only screen and (max-width: 767px) {
  .fg-interview-photos {
    display: block;
    padding: 0;
    margin-bottom: 46px;
  }
  .fg-interview-photos__item { width: 80%; }
  .fg-interview-photos__item img { height: 230px; }
  .fg-interview-photos__item--work { margin: 0 auto 0 0; }        /* 左寄せ */
  .fg-interview-photos__item--private {
    margin: -70px 0 0 auto;                                        /* 右寄せ・重ねる */
    position: relative;
    z-index: 2;
  }
  .fg-interview-photos__item--work figcaption { text-align: left; }
  .fg-interview-photos__item--private figcaption { text-align: right; }

  /* 1枚だけの記事は幅いっぱいで中央に */
  .fg-interview-photos--single .fg-interview-photos__item { width: 100%; margin: 0; }
}

.fg-interview-qa { margin: 0 0 70px; }
.fg-interview-qa__item { margin: 0 0 46px; }
.fg-interview-qa__q {
  font-size: 20px;
  line-height: 1.6;
  margin: 0 0 16px;
  padding: 0 0 0 46px;
  position: relative;
}
.fg-interview-qa__q:before {
  content: "Q";
  position: absolute;
  left: 0;
  top: -2px;
  font-size: 26px;
  line-height: 1;
  opacity: 0.35;
}
.fg-interview-qa__a {
  margin: 0;
  padding: 0 0 0 46px;
  line-height: 2.1;
}

/* （旧）1枚ずつ全幅で出していたときの指定。
   2枚を横並びにしたため未使用。テンプレートを戻す場合に備えて残している。 */
.fg-interview-photo2 { margin: 0 0 60px; }
.fg-interview-photo2 img { width: 100%; height: auto; display: block; }
.fg-interview-photo2 figcaption { margin: 12px 0 0; font-size: 13px; opacity: 0.7; }


/* ==========================================================================
   タブレット
   ========================================================================== */
@media only screen and (max-width: 1200px) {
  /* メインビジュアル動画化にともない無効化（section 1 のコメント参照）
  #index_slider .caption { width: auto; padding: 0 40px; }
  */
}

@media only screen and (max-width: 1000px) {
  .fg-interview-list { grid-template-columns: repeat(2, 1fr); }
}


/* ==========================================================================
   スマートフォン（767px 以下）
   ==========================================================================
   【縦書きの扱い】2026-08-13 のメインビジュアル動画化にともない、
   スライダー用の縦書き指定（#index_slider）は上部ブロックとあわせて無効化した。
   スライダー表示に戻す場合は、このブロック内のコメントも一緒に外すこと。
   ========================================================================== */
@media only screen and (max-width: 767px) {

  /*
  #index_slider .caption {
    height: 68vh;
    width: auto;
    padding: 0 24px;
  }
  #index_slider .caption_inner {
    height: 100%;
  }
  #index_slider .catch span {
    letter-spacing: 0.12em;
  }
  #index_slider .desc {
    margin: 0 20px 0 0;
  }
  */

  /* スマホの固定ヘッダーは 61px。着地位置もそれに合わせる */
  .fg-anchor-section,
  .post_content [id^="sec-"] {
    scroll-margin-top: 80px;
  }

  /* スマホは横一列に収まらず、折り返すたびに項目の幅がバラバラになって
     階段状に見えていた。**2列のタイル**に組み替えて、どの項目も同じ幅・
     同じ高さで並ぶようにする。
     項目数が奇数のときは、最後の1つだけ2列ぶんに広げて余りマスを作らない。 */
  ul.fg-anchor-nav {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin-bottom: 40px;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
    border-left: 1px solid rgba(0, 0, 0, 0.12);
    border-bottom: none;
  }
  .fg-anchor-nav li {
    border-right: 1px solid rgba(0, 0, 0, 0.12);
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    border-left: none;
  }
  .fg-anchor-nav li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .fg-anchor-nav a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 52px;
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
    box-sizing: border-box;
  }

  .fg-instagram__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }

  .fg-interview-list { grid-template-columns: repeat(2, 1fr); gap: 26px 14px; }
  .fg-interview-card__name { font-size: 17px; }

  .fg-interview-profile { grid-template-columns: 1fr; gap: 24px; }
  .fg-interview-profile__name { font-size: 26px; }
  .fg-interview-qa__q { font-size: 18px; padding-left: 38px; }
  .fg-interview-qa__a { padding-left: 38px; line-height: 2; }
}


/* ==========================================================================
   [予備] スマホのキャッチコピーを横書きに切り替えたい場合
   ==========================================================================
   コピーが長くなって縦書きでは収まらない、あるいはデザイン判断で
   スマホだけ横書きにしたい場合は、下記のコメントを外すだけで切り替わる。
   （上のスマホ用ブロックより後ろにあるため、こちらが優先される）

@media only screen and (max-width: 767px) {
  #index_slider .caption { height: auto; }
  #index_slider .caption_inner { height: auto; display: block; }
  #index_slider .catch span,
  #index_slider .caption_inner .desc span {
    writing-mode: horizontal-tb;
    -webkit-writing-mode: horizontal-tb;
    text-orientation: mixed;
    display: block;
    letter-spacing: 0.08em;
    line-height: 1.8;
  }
  #index_slider .desc { margin: 20px 0 0 0; }
}

   ========================================================================== */


/* ==========================================================================
   9. 原稿流し込みで使う共通パーツ（2026-08-13 追加）
   ==========================================================================
   会社案内・事業内容・採用情報の本文は post_content に直接HTMLで入れている。
   TREE の .post_content が持つ既定スタイルを土台に、最小限の指定だけを足す。
   ========================================================================== */

/* --- リード文・見出し --- */
.post_content .fg-lead {
  font-size: 18px;
  line-height: 2;
  margin: 0 0 1em;
}
.post_content .fg-heading {
  font-size: 26px;
  line-height: 1.5;
  margin: 70px 0 28px;
  padding: 0 0 14px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
.post_content .fg-subheading {
  font-size: 19px;
  margin: 40px 0 14px;
}
.post_content .fg-menu-heading {
  font-size: 17px;
  margin: 32px 0 12px;
  padding-left: 12px;
  border-left: 3px solid currentColor;
}
.post_content .fg-menu-group {
  font-weight: 600;
  margin: 20px 0 6px;
}
.post_content .fg-note {
  font-size: 14px;
  color: #555;
}
.post_content .fg-sign {
  margin-top: 2em;
  text-align: right;
  line-height: 2;
}

/* --- 箇条書き --- */
.post_content .fg-list {
  list-style: none;
  margin: 0 0 1.5em;
  padding: 0;
}
.post_content .fg-list li {
  position: relative;
  padding: 6px 0 6px 18px;
  line-height: 1.8;
}
.post_content .fg-list li::before {
  content: "";
  position: absolute;
  top: 15px;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
}

/* --- 表（会社概要・沿革・事業所・募集要項） --- */
.post_content .fg-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.5em;
}
.post_content .fg-table th,
.post_content .fg-table td {
  padding: 16px 18px;
  text-align: left;
  vertical-align: top;
  line-height: 1.9;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.post_content .fg-table th {
  width: 26%;
  font-weight: 600;
  white-space: nowrap;
  background: rgba(0, 0, 0, 0.02);
}
/* 沿革は年月列を詰めて、内容の行を読ませる */
.post_content .fg-table--history th { width: 22%; }

/* --- 写真 --- */
.post_content .fg-figure {
  margin: 0 0 28px;
}
.post_content .fg-figure img {
  width: 100%;
  height: auto;
  display: block;
}

/* --- ボタン --- */
.post_content .fg-button a {
  display: inline-block;
  padding: 16px 40px;
  text-decoration: none;
  border: 1px solid currentColor;
  transition: opacity 0.3s;
}
/* ボタンのホバーはベースカラーの赤で塗る（ご指定）。
   透過（opacity）だと背景によって色が変わって見えるため、色で指定する。 */
.post_content .fg-button a:hover {
  background: #cc3333;
  border-color: #cc3333;
  color: #fff;
  opacity: 1;
}


/* --------------------------------------------------------------------------
   9-1. 事業内容インデックス：強み3項目 と 4本柱カード
-------------------------------------------------------------------------- */
/* 強み3項目
   ---------------------------------------------------------------------
   写真を大きく、左右交互に置く（行の組み立てはページビルダー側）。
   ここでは文章側の体裁だけを持つ。

   写真は行のカラム幅いっぱいに出るので、比率だけ揃えて高さを合わせる。
   .content_area のような背景は敷かない。写真を主役にしたいため。 */
.post_content .fg-strength {
  padding: 10px 0 0;
}

/* 01 / 02 / 03。数字は飾りなので読み上げ順を邪魔しない位置に置く */
.post_content .fg-strength__num {
  font-family: "Times New Roman", "Noto Serif JP", serif;
  font-size: 46px;
  line-height: 1;
  letter-spacing: 0.02em;
  color: #151f5d;
  opacity: 0.22;
  margin: 0 0 14px;
}

.post_content .fg-strength__catch {
  font-size: 22px;
  line-height: 1.7;
  margin: 0 0 18px;
  padding: 0 0 18px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
.post_content .fg-strength p { line-height: 2; }

/* 強みの写真。3枚とも同じ比率に切り抜いて、左右交互でも高さが揃うようにする */
body.page-id-24 #page_content .tcd-pb-widget.pb-widget-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

/* スマホ：写真の下に「番号 → キャッチ → 本文」が続くと間延びするので、
   番号を写真の角に重ねて、文章のかたまりを引き締める。 */
@media only screen and (max-width: 767px) {
  body.page-id-24 #page_content .tcd-pb-row:has(.pb-widget-image) .tcd-pb-widget.pb-widget-image img { aspect-ratio: 3 / 2; }

  /* ⚠️ 並び順をそろえる。
     STRENGTH は写真の左右が交互なので、02 だけカラムの並びが
     「文章 → 写真」になり、スマホでは写真が文章の下に落ちていた。
     カラムの箱を無くして（display:contents）ウィジェットを直接並べ替え、
     3つとも「見出し → 写真 → 文章」にする。 */
  body.page-id-24 #page_content .tcd-pb-row:has(.pb-widget-image) .tcd-pb-row-inner {
    display: flex;
    flex-direction: column;
  }
  body.page-id-24 #page_content .tcd-pb-row:has(.pb-widget-image) .tcd-pb-col { display: contents; }
  body.page-id-24 #page_content .tcd-pb-row:has(.pb-widget-image) .pb-widget-fg-side-headline { order: -2; }
  body.page-id-24 #page_content .tcd-pb-row:has(.pb-widget-image) .pb-widget-image { order: -1; }

  /* 文章のかたまりを写真に少しかぶせる（他ページと同じリズム）
     ⚠️ 対象は「写真のある行」だけに絞ること。
        page-id-24 の文章ウィジェットすべてに当てると、
        冒頭のリード文や4本柱のカードまで白い箱になって右に寄る。 */
  body.page-id-24 #page_content .tcd-pb-row:has(.pb-widget-image) .tcd-pb-widget.pb-widget-editor {
    position: relative;
    z-index: 2;
    width: 88%;
    margin: -34px 0 0 auto;      /* 右寄せ。写真は全幅なので左に写真が覗く */
    padding: 22px 22px 4px;
    background: #fff;
    box-shadow: 0 2px 18px rgba(0, 0, 0, 0.07);
  }

  .post_content .fg-strength { padding-top: 0; }
  .post_content .fg-strength__num {
    font-size: 30px;
    line-height: 1;
    margin: 0 0 8px;
    opacity: 0.28;
  }
  .post_content .fg-strength__catch {
    font-size: 19px;
    line-height: 1.6;
    margin: 0 0 14px;
    padding: 0 0 12px;
  }
  .post_content .fg-strength p { line-height: 1.95; }
}

.post_content .fg-pillars {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  margin: 0 0 40px;
}
/* ⚠️ カード（a）の間に <br> が入るのを打ち消す。
   ページビルダーの文章ウィジェットは wpautop を通るため、
   管理画面で読みやすいように入れた改行が <br> になる。
   a も span もインライン要素で、直前・直後がブロック要素ではないため
   wpautop の <br> 除去にも引っかからない。
   grid の直下に <br> が入るとそれが1マスを占め、
   カードが1列に落ちてしまう（2026-08-18 発生）。
   生成側で改行を消す手もあるが、管理画面で1行の長大なHTMLになり編集しづらいため、
   表示側で消す。編集時に改行を足しても崩れない利点もある。 */
.post_content .fg-pillars > br,
.post_content .fg-pillar > br { display: none; }

.post_content .fg-pillar {
  display: block;
  text-decoration: none;
  border: 1px solid rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
.post_content .fg-pillar__image {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.post_content .fg-pillar__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s;
}
.post_content .fg-pillar:hover .fg-pillar__image img { transform: scale(1.05); }
.post_content .fg-pillar__body { display: block; padding: 22px 24px 26px; }
.post_content .fg-pillar__name {
  display: block;
  font-size: 20px;
  margin: 0 0 8px;
}
.post_content .fg-pillar__fields {
  display: block;
  font-size: 13px;
  line-height: 1.8;
  opacity: 0.7;
}


/* --------------------------------------------------------------------------
   9-2. 採用情報
-------------------------------------------------------------------------- */
/* 完全週休二日制。建設業界でいち早く導入した点が採用の最重要訴求のため、
   本文中でもっとも目を引く扱いにしている。 */
/* 働く環境・制度の見せ場（完全週休二日制）。
   採用で一番効く一文なので、濃紺のパネルにして白抜きで置く。 */
.post_content .fg-highlight {
  padding: 34px 36px;
  background: #151f5d;
  color: #fff;
  margin: 0 0 34px;
}
.post_content .fg-highlight__label {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.06em;
  margin: 0 0 16px;
  padding: 0 0 14px;
  position: relative;
}
.post_content .fg-highlight__label:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 38px;
  height: 2px;
  background: #cc3333;
}
.post_content .fg-highlight p { line-height: 2.1; }
.post_content .fg-highlight p:last-child { margin-bottom: 0; }

/* 数字で見るフジ技研
   ラベル（小）と値（大）に分けて、値を主役にする。
   罫線だけのカードにして、写真の多いページの中で軽く見せる。 */
.post_content .fg-numbers {
  list-style: none;
  margin: 0 0 1.5em;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.post_content .fg-numbers li {
  padding: 26px 20px 24px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-top: 2px solid #151f5d;
  background: #fff;
  text-align: center;
  line-height: 1.7;
}
.post_content .fg-numbers__label {
  display: block;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: rgba(0, 0, 0, 0.55);
  margin: 0 0 10px;
}
.post_content .fg-numbers__value {
  display: block;
  font-size: 21px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  font-weight: 600;
}

/* プライバシーポリシーの見出し（ページビルダーの見出しウィジェット）。
   本文中の .fg-heading と同じ体裁にそろえる。 */
body.page-id-3 #page_content .pb_headline {
  padding: 0 0 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   9-6. 採用情報ページ
   --------------------------------------------------------------------------
   ページビルダーは行やウィジェットにクラスを振れないので、
   アンカーID（#sec-message ほか）と body.page-id-29 を手がかりにしている。
   /recruit/ のページID(29)が変わったらここも直すこと。
-------------------------------------------------------------------------- */

/* 採用メッセージ：文章（濃紺パネル）を写真に重ねる。
   事業詳細は「白いカード＋写真」なので、こちらは色を変えて差をつけている。 */
@media only screen and (min-width: 1260px) {
  /* 写真は右へはみ出させる。はみ出したぶんは負のマージンで打ち消す
     （打ち消さないとカラム幅の合計が100%を超えてフロートが回り込む） */
  /* 写真を少し小さく：ビルダー既定（文章46%／写真54%）を 52%／48% に振り直す */
  body.page-id-29 #page_content #sec-message .tcd-pb-col.col1 { width: 52%; }
  body.page-id-29 #page_content #sec-message .tcd-pb-col.col2 {
    width: calc(48% + 110px);
    margin-right: -110px;
  }
  body.page-id-29 #page_content #sec-message .tcd-pb-col.col1 .tcd-pb-widget.pb-widget-editor {
    position: relative;
    z-index: 2;
    /* 写真の人物の頭にかからないよう、パネルは写真の下寄りに置く */
    margin: 240px -80px 0 0;
  }
}

body.page-id-29 #page_content #sec-message .fg-message {
  background: #151f5d;
  color: #fff;
  padding: 38px 40px;
}
body.page-id-29 #page_content #sec-message .fg-message p {
  line-height: 2.2;
  margin: 0 0 1.4em;
}
body.page-id-29 #page_content #sec-message .fg-message p:last-child { margin-bottom: 0; }

/* 写真は縦長ぎみに。パネルと高さが揃って見える */
body.page-id-29 #page_content #sec-message .tcd-pb-widget.pb-widget-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
}

/* ⚠️ 上限だけでなく下限も指定すること（768px〜1259px）。
   `max-width:1259px` だけだとスマホにも効き、
   しかもセレクタが長い（詳細度が高い）ぶん、スマホ用の重ね指定を打ち消してしまう。 */
@media only screen and (min-width: 768px) and (max-width: 1259px) {
  body.page-id-29 #page_content #sec-message .tcd-pb-col.col1 .tcd-pb-widget.pb-widget-editor {
    margin-top: 24px;
  }
  /* この幅では2カラム横並びのままで写真の列が狭い（約380px）。
     横長の比率にすると高さが潰れて見切れるので、元写真と同じ 4:3 にし、
     小さくしたいぶんは列幅（文章52%／写真48%）で調整する */
  body.page-id-29 #page_content #sec-message .tcd-pb-col.col1 { width: 52%; }
  body.page-id-29 #page_content #sec-message .tcd-pb-col.col2 { width: 48%; }
  body.page-id-29 #page_content #sec-message .tcd-pb-widget.pb-widget-image img { aspect-ratio: 4 / 3; }
  /* ※スマホ（767px以下）では縦長に戻す。下の指定を参照 */
}
/* スマホ：トップのデザインコンテンツと同じ「画像 右上 ／ 文章 左下」に。
   ページビルダーはカラムを縦積みにするだけなので、
   ・行を flex にして画像のカラムを先頭へ回す
   ・画像は右寄せ、文章は左寄せにして少し重ねる
   の2つで組み替えている。 */
@media only screen and (max-width: 767px) {
  /* ⚠️ 事業詳細と同じ理由でカラムを display:contents にしている。
     カラムごと入れ替えるとサイド見出しが画像と文章の間に残ってしまう。 */
  body.page-id-29 #page_content #sec-message .tcd-pb-row-inner {
    display: flex;
    flex-direction: column;
  }
  body.page-id-29 #page_content #sec-message .tcd-pb-col { display: contents; }
  body.page-id-29 #page_content #sec-message .pb-widget-fg-side-headline { order: -2; }
  body.page-id-29 #page_content #sec-message .pb-widget-image { order: -1; }

  body.page-id-29 #page_content #sec-message .tcd-pb-widget.pb-widget-image {
    width: 78%;
    margin-left: 22%;
  }
  /* 写真はPCと同じ縦長のまま（16:9にすると小さくなりすぎるため） */
  body.page-id-29 #page_content #sec-message .tcd-pb-widget.pb-widget-image img {
    aspect-ratio: 3 / 4;
  }

  body.page-id-29 #page_content #sec-message .tcd-pb-widget.pb-widget-editor {
    width: 88%;
    /* 画像とのあいだにカラムの余白が入るため、そのぶんも見込んで引き上げる */
    margin: -46px 0 0;
    position: relative;
    z-index: 2;
  }
  body.page-id-29 #page_content #sec-message .fg-message { padding: 24px 22px; }
}

/* 働く環境・制度の写真（イベント大＋仕事中小）。
   事業所一覧と同じく、アンカー行の次の行として拾っている。

   2枚を少し傾けて重ねる。写真を無造作に置いたような見え方にして、
   ページ全体が四角い箱の連続にならないようにしている。
   （白フチ＋影の「写真風」の装飾はご指定により無し） */
body.page-id-29 #page_content #sec-welfare + .tcd-pb-row .tcd-pb-widget.pb-widget-image img {
  width: 100%;
  height: 330px;
  object-fit: cover;
  display: block;
}
@media only screen and (min-width: 768px) {
  /* 回転はさせず、右（仕事中）を下げて「斜めの並び」にする（ご指定） */
  body.page-id-29 #page_content #sec-welfare + .tcd-pb-row .tcd-pb-col.col1 .pb-widget-image {
    position: relative;
    z-index: 1;
  }
  body.page-id-29 #page_content #sec-welfare + .tcd-pb-row .tcd-pb-col.col2 .pb-widget-image {
    position: relative;
    z-index: 2;
    margin: 60px 0 0 -34px;   /* 下へずらし、少しだけ重ねる */
  }
  body.page-id-29 #page_content #sec-welfare + .tcd-pb-row { padding: 0 0 24px; }
}

/* --- 4) エントリーの連絡先カード（表をやめた） --- */
/* エントリーの連絡先。
   募集要項がすでに表なので、罫線は横線だけにして軽くする。
   幅は本文いっぱいにせず、少し狭めて中央に置く。 */
.post_content .fg-entry {
  max-width: 620px;
  margin: 0 auto 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}
.post_content .fg-entry__item {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 0 20px;
  align-items: baseline;
  padding: 14px 4px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
.post_content .fg-entry__label {
  margin: 0;
  font-size: 14px;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.post_content .fg-entry__value {
  margin: 0;
  font-size: 16px;
  line-height: 1.8;
}
.post_content .fg-entry__value a { text-decoration: underline; }

@media only screen and (max-width: 767px) {
  /* スマホ：縦に積み、左右に寄せて少しだけ重ねる（社員の声の詳細と同じ扱い） */
  body.page-id-29 #page_content #sec-welfare + .tcd-pb-row .tcd-pb-widget.pb-widget-image img {
    height: auto;
    aspect-ratio: 4 / 3;
  }
  body.page-id-29 #page_content #sec-welfare + .tcd-pb-row .tcd-pb-col.col1 .tcd-pb-widget.pb-widget-image {
    width: 80%;
    margin-right: auto;
  }
  body.page-id-29 #page_content #sec-welfare + .tcd-pb-row .tcd-pb-col.col2 .tcd-pb-widget.pb-widget-image {
    width: 80%;
    margin: -26px 0 0 auto;
    position: relative;
    z-index: 2;
  }
  .post_content .fg-entry__item {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 12px 2px;
  }
  .post_content .fg-entry__label { font-size: 13px; color: #151f5d; }
}

/* 募集要項のタブ。選択中を黒で塗って、他は罫線だけにする */
body.page-id-29 .pb_tab .resp-tabs-list li {
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: #fff;
  transition: background 0.3s, color 0.3s;
}
body.page-id-29 .pb_tab .resp-tabs-list li.resp-tab-active {
  background: #000;
  border-color: #000;
  color: #fff;
}

/* ボタンは黒で統一（ご指定）。ホバーでメインカラー */
body.page-id-29 .post_content .fg-button a,
.post_content .wpcf7 input[type="submit"] {
  background: #000;
  border-color: #000;
  color: #fff;
}
body.page-id-29 .post_content .fg-button a:hover,
.post_content .wpcf7 input[type="submit"]:hover {
  background: #cc3333;
  border-color: #cc3333;
  color: #fff;
  opacity: 1;
}

@media only screen and (max-width: 767px) {
  .post_content .fg-numbers { gap: 10px; }
  .post_content .fg-numbers li { padding: 18px 14px; }
  .post_content .fg-numbers__value { font-size: 18px; }
}

/* --------------------------------------------------------------------------
   9-2. 会社案内：沿革（年表）と 事業所一覧（カード）
   --------------------------------------------------------------------------
   会社概要・有資格一覧が表なので、この2つは別の見せ方にして
   同じ形が3つ続かないようにしている。

   沿革はスクロールに合わせて1件ずつ出す（assets/js/script.js）。
   ⚠️ 既定は「見えている」状態にしておくこと。
      最初から opacity:0 にすると、JSが動かない環境で沿革が丸ごと消える。
      JSが動くときだけ .fg-history--js を付けて、そこから隠す。
-------------------------------------------------------------------------- */
.post_content .fg-history {
  list-style: none;
  margin: 0 0 0 20px;
  padding: 0 0 0 26px;
  position: relative;
}
/* 縦のライン */
.post_content .fg-history:before {
  content: "";
  position: absolute;
  left: 5.5px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  height: 99%;
  background: rgba(0, 0, 0, 0.15);
}

.post_content .fg-history__item {
  position: relative;
  margin: 0 0 30px;
  padding: 0 0 0 4px;
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 0 24px;
  align-items: baseline;
}
.post_content .fg-history__item:last-child { margin-bottom: 0; }

/* ラインの上の点 */
.post_content .fg-history__item:before {
  content: "";
  position: absolute;
  left: -26px;
  top: 9px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #151f5d;
}

.post_content .fg-history__date {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #151f5d;
  white-space: nowrap;
}
.post_content .fg-history__body p {
  margin: 0 0 6px;
  line-height: 1.9;
}
.post_content .fg-history__body p:last-child { margin-bottom: 0; }

/* スクロールで1件ずつ出す（JSが .fg-history--js を付けたときだけ） */
.post_content .fg-history--js .fg-history__item {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.post_content .fg-history--js .fg-history__item.is-visible {
  opacity: 1;
  transform: none;
}

/* 事業所一覧：カード */
.post_content .fg-offices {
  list-style: none;
  margin: 0 0 34px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.post_content .fg-offices__item {
  margin: 0;
  padding: 24px 26px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-left: 3px solid #151f5d;
  background: #fff;
}
/* 営業所（複数入っているもの）は横幅いっぱいに */
.post_content .fg-offices__item:has(.fg-offices__list) { grid-column: 1 / -1; }

.post_content .fg-offices__name {
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.post_content .fg-offices__addr {
  margin: 0;
  line-height: 1.9;
}
.post_content .fg-offices__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
}
.post_content .fg-offices__list li {
  margin: 0;
  padding: 7px 14px;
  background: rgba(21, 31, 93, 0.06);
  font-size: 14px;
  line-height: 1.4;
}

@media only screen and (max-width: 767px) {
  .post_content .fg-history { 
    padding-left: 20px;
    margin-left: 0;
  }
  .post_content .fg-history__item {
    grid-template-columns: 1fr;
    gap: 4px;
    margin-bottom: 24px;
  }
  .post_content .fg-history__item:before { left: -20px; top: 7px; }
  .post_content .fg-history__date { font-size: 14px; }
  .post_content .fg-offices { grid-template-columns: 1fr; gap: 12px; }
  .post_content .fg-offices__item { padding: 20px 20px; }
}

/* 事業所一覧の写真（社屋＋室内2枚のモザイク）
   ---------------------------------------------------------------------
   ページビルダーは行にクラスを振れないので、
   アンカーID の付いた事業所一覧の行の**次の行**として拾っている
   （#sec-office + .tcd-pb-row）。行の順番を入れ替えたらここも直すこと。

   高さは px で決め打ちしている。左右のカラムは独立して高さが決まるため、
   比率（aspect-ratio）任せだと大小の写真の下端がそろわない。 */
body.page-id-23 #page_content #sec-office + .tcd-pb-row .tcd-pb-widget.pb-widget-image img {
  width: 100%;
  object-fit: cover;
  display: block;
}
/* 大（社屋） */
body.page-id-23 #page_content #sec-office + .tcd-pb-row .tcd-pb-col.col1 .pb-widget-image img {
  height: 420px;
}
/* 小2枚（420 = 202 + 16 + 202） */
body.page-id-23 #page_content #sec-office + .tcd-pb-row .tcd-pb-col.col2 .pb-widget-image img {
  height: 202px;
}
body.page-id-23 #page_content #sec-office + .tcd-pb-row .tcd-pb-col.col2 .tcd-pb-widget {
  margin-bottom: 0;
}
body.page-id-23 #page_content #sec-office + .tcd-pb-row .tcd-pb-col.col2 .tcd-pb-widget + .tcd-pb-widget {
  margin-top: 16px;
}

@media only screen and (max-width: 767px) {
  /* スマホはカラムが縦積みになるので、高さの決め打ちをやめて比率にする */
  body.page-id-23 #page_content #sec-office + .tcd-pb-row .tcd-pb-col.col1 .pb-widget-image img,
  body.page-id-23 #page_content #sec-office + .tcd-pb-row .tcd-pb-col.col2 .pb-widget-image img {
    height: auto;
    aspect-ratio: 16 / 9;
  }
  /* 3枚を等間隔にする。
     1枚目（col1）と2枚目（col2の先頭）のあいだはカラムの区切りなので余白が付かず、
     2枚目と3枚目のあいだだけウィジェット間の余白が入って、最後だけ空いて見えていた。 */
  body.page-id-23 #page_content #sec-office + .tcd-pb-row .tcd-pb-col.col1 .tcd-pb-widget.pb-widget-image {
    margin-bottom: 10px;
  }
  body.page-id-23 #page_content #sec-office + .tcd-pb-row .tcd-pb-col.col2 .tcd-pb-widget + .tcd-pb-widget {
    margin-top: 10px;
  }
}

/* 有資格一覧
   ---------------------------------------------------------------------
   原稿は「資格名：内訳／内訳／…　＝合計N」の1行。
   表に入れると「／」区切りの長い文字列になって読めないので、
   資格ごとのカードにして、内訳をタグ、合計をバッジで出す。

   合計は原稿に書かれている行にだけ出る（勝手に足し算していない）。 */
.post_content .fg-license__group { margin: 0 0 34px; }
.post_content .fg-license__group:last-child { margin-bottom: 0; }

.post_content .fg-license__group-name {
  margin: 0 0 14px;
  padding: 0 0 0 12px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-left: 3px solid #151f5d;
  line-height: 1.5;
}

.post_content .fg-license__items {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.post_content .fg-license__item {
  display: grid;
  grid-template-columns: 190px 62px 1fr;   /* 中央は合計バッジ（「18名」が入る幅） */
  align-items: start;
  gap: 0 16px;
  padding: 16px 20px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: #fff;
}

.post_content .fg-license__name {
  margin: 0;
  font-weight: 600;
  line-height: 1.6;
}

/* 合計（人数）。数字だけを置くので、丸で囲って数字だと分かるようにする */
.post_content .fg-license__total {
  margin: 0;
  min-width: 52px;
  height: 40px;
  padding: 0 6px;
  border-radius: 20px;
  background: #151f5d;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  line-height: 40px;
  text-align: center;
  box-sizing: border-box;
}

/* 内訳のタグ
   ⚠️ grid-column を明示すること。合計バッジが無い資格（施工管理技士など）は
      タグが2列目（バッジ用の52px）に入り込んで潰れる。 */
.post_content .fg-license__tags {
  grid-column: 3 / -1;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.post_content .fg-license__tags li {
  margin: 0;
  padding: 6px 12px;
  background: rgba(21, 31, 93, 0.06);
  font-size: 13px;
  line-height: 1.5;
}
.post_content .fg-license__tags b {
  margin-left: 6px;
  font-weight: 600;
  color: #151f5d;
}

/* 単位「名」。数字より小さく添えて、数字そのものは読みやすく保つ。
   （原稿に単位が無く、数字だけでは何の数か分からないため補っている） */
.post_content .fg-license__unit {
  margin-left: 1px;
  font-size: 0.78em;
  font-weight: 400;
}
.post_content .fg-license__total .fg-license__unit { opacity: 0.85; }

/* 内訳が無い資格（測量士など）は名前と人数だけ */
.post_content .fg-license__item--single { grid-template-columns: 1fr 62px; }
.post_content .fg-license__item--single .fg-license__name { align-self: center; }

@media only screen and (max-width: 767px) {
  .post_content .fg-license__item {
    grid-template-columns: 1fr 54px;
    gap: 10px 12px;
    padding: 14px 16px;
  }
  /* タグは名前・人数の下に回り込ませる */
  .post_content .fg-license__tags { grid-column: 1 / -1; }
  .post_content .fg-license__total {
    min-width: 46px; height: 34px; line-height: 34px; font-size: 14px;
  }
  .post_content .fg-license__item--single { grid-template-columns: 1fr 54px; }
}

/* --------------------------------------------------------------------------
   9-3. 社員の声：顔写真が無い場合の代替表示
   --------------------------------------------------------------------------
   顔出しNGのご本人と、単に写真が未提供の方で見た目をそろえている。
   一覧に並べたときに「この人だけ顔出しNG」と分からないようにするため。
-------------------------------------------------------------------------- */
.fg-avatar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  background: rgba(0, 0, 0, 0.06);
  overflow: hidden;
}
.fg-avatar__icon {
  width: 62%;
  height: 62%;
  fill: rgba(0, 0, 0, 0.16);
}
.fg-avatar__initials {
  position: absolute;
  font-size: 26px;
  letter-spacing: 0.08em;
  color: rgba(0, 0, 0, 0.45);
}


/* --------------------------------------------------------------------------
   9-4. トップページの追加ブロック
-------------------------------------------------------------------------- */
/* コンセプト（トップのリード文）
   ---------------------------------------------------------------------
   英字の小見出し → キャッチ（明朝）→ 本文、の3段。
   キャッチだけ明朝にしてトーンを変え、下に細い赤線を引いて視線を止める。

   ⚠️ 明朝は Web フォントを読み込まず、端末のフォントを使う
      （游明朝／ヒラギノ明朝など）。表示速度を落とさないため。
      サイトの他の文字は親テーマのゴシック指定のまま。 */
/* ⚠️ セレクタに .tcdce-body / .post_content を足しているのは詳細度のため。
   TCDクラシックエディタが本文の見出し・段落に強めのスタイルを当てており
   （editor.css:777 の font-family、833 の `* + h2 { margin-top:100px }`）、
   素のクラス（0,1,0）では負ける。
   ・明朝の指定が効かない
   ・キャッチの上に 100px の余白が入って間延びする
   の2つはこれが原因だった。 */
.fg-top-lead {
  text-align: center;
  padding: 10px 20px 0;
}

.tcdce-body .fg-top-lead__label,
.post_content .fg-top-lead__label {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-indent: 0.34em;      /* letter-spacing のぶん右にずれるのを戻す */
  color: #cc3333;
  margin: 0 0 22px;
}

.tcdce-body .fg-top-lead__catch,
.post_content .fg-top-lead__catch {
  margin-top: 0;
  font-family: "Times New Roman", "游明朝", YuMincho, "Hiragino Mincho ProN",
               "ヒラギノ明朝 ProN W3", "HGS明朝E", serif;
  font-size: 46px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.14em;
  text-indent: 0.14em;
  margin: 0 0 42px;
  padding: 0 0 34px .5em;
  position: relative;
}
/* キャッチの下の赤い短い線 */
.tcdce-body .fg-top-lead__catch:after,
.post_content .fg-top-lead__catch:after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 46px;
  height: 2px;
  margin-left: -23px;
  background: #cc3333;
}

/* 本文は行を長くしすぎない。1行が長いと中央揃えは読みにくいため */
.fg-top-lead__body {
  max-width: 760px;
  margin: 0 auto;
}
.fg-top-lead__body p {
  line-height: 2.4;
  margin: 0 0 26px;
}
.fg-top-lead__body p:last-child { margin-bottom: 0; }
.fg-top-heading {
  font-size: 24px;
  letter-spacing: 0.08em;
  text-align: center;
  margin: 0 0 34px;
}
.fg-top-access .fg-table { width: 100%; border-collapse: collapse; }
.fg-top-access .fg-table th,
.fg-top-access .fg-table td {
  padding: 14px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.fg-top-access .fg-table th { width: 26%; white-space: nowrap; font-weight: 600; }
.fg-map { margin-top: 34px; }
.fg-map iframe { display: block; width: 100%; border: 0; }


/* --- タブレット --- */
@media only screen and (max-width: 991px) {
  .post_content .fg-strengths { grid-template-columns: 1fr; gap: 34px; }
  .post_content .fg-numbers { grid-template-columns: repeat(2, 1fr); }
}

/* --- スマートフォン --- */
@media only screen and (max-width: 767px) {
  .post_content .fg-heading { font-size: 21px; margin-top: 50px; }
  .post_content .fg-lead { font-size: 16px; }
  .post_content .fg-pillars { grid-template-columns: 1fr; gap: 20px; }
  .post_content .fg-numbers { grid-template-columns: 1fr; }
  .post_content .fg-highlight { padding: 24px 22px; }
  .post_content .fg-highlight__label { font-size: 20px; }

  /* 表は縦積みにして、狭い画面でも折り返しで潰れないようにする */
  .post_content .fg-table th,
  .post_content .fg-table td {
    display: block;
    width: auto;
    white-space: normal;
  }
  .post_content .fg-table th { border-bottom: none; padding-bottom: 0; }


  .tcdce-body .fg-top-lead__label,
  .post_content .fg-top-lead__label { font-size: 11px; letter-spacing: 0.28em; margin-bottom: 16px; }
  .tcdce-body .fg-top-lead__catch,
  .post_content .fg-top-lead__catch {
    font-size: 27px;
    letter-spacing: 0.1em;
    margin-bottom: 30px;
    padding-bottom: 24px;
  }
  .fg-top-lead__body p { 
    line-height: 2.1; 
    margin-bottom: 20px;
  }
  /* スマホでは原稿どおりの改行だと折り返しが不自然になるので、
     <br> を無効にしてブラウザに任せる */
  .fg-top-lead__body br { display: none; }
}


/* --------------------------------------------------------------------------
   9-5. お問い合わせフォーム（Contact Form 7）
   --------------------------------------------------------------------------
   プラグイン標準の見た目に依存させず、他ページの表・見出しと調子をそろえる。
-------------------------------------------------------------------------- */
.post_content .fg-form__row { margin: 0 0 26px; }
.post_content .fg-form__row > label {
  display: block;
  font-weight: 600;
  margin: 0 0 8px;
}
.post_content .fg-form__req {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: #fff;
  background: #c1272d;
  vertical-align: 2px;
}
.post_content .wpcf7 input[type="text"],
.post_content .wpcf7 input[type="email"],
.post_content .wpcf7 input[type="tel"],
.post_content .wpcf7 textarea {
  width: 100%;
  padding: 13px 14px;
  font-family: inherit;
  font-size: 16px;   /* 16px 未満だと iOS で入力時に拡大されるため下げない */
  line-height: 1.6;
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 2px;
  background: #fff;
  box-sizing: border-box;
}
.post_content .wpcf7 textarea { min-height: 190px; resize: vertical; }
.post_content .wpcf7 .wpcf7-radio { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.post_content .wpcf7 .wpcf7-list-item { margin: 0; }

.post_content .fg-form__consent {
  padding: 20px 22px;
  background: rgba(0, 0, 0, 0.04);
}
.post_content .fg-form__consent .wpcf7-list-item { margin: 0; }

.post_content .fg-form__submit { margin-top: 34px; text-align: center; }
.post_content .wpcf7 input[type="submit"] {
  min-width: 280px;
  font-family: inherit;
  font-size: 16px;
  letter-spacing: 0.08em;
  color: #fff;
  border: 1px solid #000;   /* 色は 9-6章でまとめて指定（黒で統一） */
  border-radius: 2px;
  cursor: pointer;
  transition: opacity 0.3s;
}
.post_content .wpcf7 input[type="submit"]:hover { opacity: 0.8; }

@media only screen and (max-width: 767px) {
  .post_content .wpcf7 input[type="submit"] { width: 100%; min-width: 0; }
}


/* ==========================================================================
   10. ページビルダー出力の調整（2026-08-13）
   ==========================================================================
   会社案内・事業内容インデックス・採用情報は TREE のページビルダーで組んでいる。
   表・タブ・見出しはテーマ標準のモジュール出力（.pb_simple_table / .pb_tab /
   .tcd-pb-widget）なので、ここでは余白と、本文用に自作したパーツとの
   なじみだけを整える。モジュールの見た目そのものは親テーマに任せる。
   ========================================================================== */

/* 行間の余白。見出し行と本文行が続くため、行単位で詰めすぎないようにする */
.tcd-pb-row + .tcd-pb-row { margin-top: 10px; }

/* アンカー着地（子テーマが行に id="sec-xxx" を差し込む） */
.tcd-pb-row[id^="sec-"] { scroll-margin-top: 140px; }

/* 見出しウィジェットの下に区切り線を入れ、本文の塊を読み取りやすくする */
.tcd-pb-widget.pb-widget-headline h2 {
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  margin-bottom: 4px;
}

/* 表モジュール：他ページの .fg-table と行の高さ・区切りをそろえる */
.pb_simple_table { width: 100%; border-collapse: collapse; }
.pb_simple_table th,
.pb_simple_table td {
  padding: 16px 18px;
  text-align: left;
  vertical-align: top;
  line-height: 1.9;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.pb_simple_table th { width: 26%; white-space: nowrap; }
/* 表モジュールは各セルを wpautop するため、段落の余白を詰める */
.pb_simple_table td p { margin: 0 0 0.4em; }
.pb_simple_table td p:last-child { margin-bottom: 0; }

/* タブモジュール内は本文と同じ見出し・表のスタイルを使う */
.pb_tab_content .fg-menu-heading {
  font-size: 17px;
  margin: 26px 0 12px;
  padding-left: 12px;
  border-left: 3px solid currentColor;
}
.pb_tab_content .fg-menu-heading:first-child { margin-top: 0; }
.pb_tab_content .fg-table { width: 100%; border-collapse: collapse; margin: 0 0 10px; }
.pb_tab_content .fg-table th,
.pb_tab_content .fg-table td {
  padding: 14px 16px;
  text-align: left;
  vertical-align: top;
  line-height: 1.9;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.pb_tab_content .fg-table th { width: 26%; white-space: nowrap; font-weight: 600; }

/* ページビルダーの表（simple_table）の見出し。
   文字色はウィジェットの設定（黒）に任せ、ここでは太さだけ足す。 */
.post_content .pb_simple_table th { font-weight: 600; }

/* 文章ウィジェット内に置いた自作パーツ（強み・4本柱・数値など）の余白 */
.tcd-pb-widget .fg-strengths,
.tcd-pb-widget .fg-pillars,
.tcd-pb-widget .fg-numbers { margin-bottom: 0; }

@media only screen and (max-width: 767px) {
  .pb_simple_table th,
  .pb_simple_table td,
  .pb_tab_content .fg-table th,
  .pb_tab_content .fg-table td {
    display: block;
    width: auto;
    white-space: normal;
  }
  .pb_simple_table th,
  .pb_tab_content .fg-table th { border-bottom: none; padding-bottom: 0; }

  .tcd-pb-row[id^="sec-"] { scroll-margin-top: 80px; }
}


/* --------------------------------------------------------------------------
   10-2. サイド見出しウィジェット（子テーマ追加モジュール）
   --------------------------------------------------------------------------
   親テーマのデザインコンテンツと同じ見え方にする。
   あちらは
     .cb_side_headline { position:absolute; top:0; left:0; width:150px;
                         writing-mode:vertical-rl; display:flex; align-items:center; }
     .design1_content1 .cb_side_headline { left:-150px; }
   として、本文ブロックの「外側・左上」に縦書きで出している。

   ページビルダーでも同じにするため、
   ・行(.tcd-pb-row)を位置の基準にする
   ・サイド見出しは絶対配置で本文の左脇へ出す（＝本文の幅を削らない）
   ようにしている。カラム分割にしないのは、分割すると本文が狭くなり
   テーマ標準の #page_content(860px) の組みから外れるため。

   ⚠️ font-size / font-weight / letter-spacing は指定しないこと。
      テーマオプション「サイドの見出し」から親テーマが動的CSSで出しており
      （functions/head.php:178-183）、上書きすると管理画面の設定が効かなくなる。
   ⚠️ height を与えないこと。親テーマの align-items:center と相まって
      見出しが縦中央に落ちる。
-------------------------------------------------------------------------- */
/* 行を絶対配置の基準にする */
#page_content .tcd-pb-row { position: relative; }

/* ページビルダーは #tcd-pb-wrap と .tcd-pb-row に overflow:hidden を当てている
   （pagebuilder.css:4）。カラムが float:left なので、それを包含するための指定。
   ただしこのままだと本文の外に出したサイド見出しが切り取られてしまう。
   display:flow-root なら同じくフロートを包含でき、かつクリップしない。

   ⚠️ セレクタに #page_content を足しているのは詳細度のため。
      pagebuilder.css は wp_head の後半で <link> 出力されており、
      子テーマCSS（wp_enqueue_scripts）より後に読み込まれる。
      同じ詳細度だと後勝ちで overflow:hidden に戻されてしまう。 */
#page_content #tcd-pb-wrap,
#page_content .tcd-pb-row {
  overflow: visible;
  display: flow-root;
}

/* ページビルダーは**ウィジェット間の余白を既定で持たない**。
   pagebuilder.php は「余白の値が入っているウィジェットだけ」CSSを出すため
   （pagebuilder.php:1614）、同じカラムに積んだウィジェットが密着してしまう。
   ここで既定の余白を足す。 */
#page_content .tcd-pb-widget + .tcd-pb-widget { margin-top: 30px; }

/* サイド見出しは本文の外に絶対配置されるので、次の要素に余白は要らない */
#page_content .pb-widget-fg-side-headline + .tcd-pb-widget { margin-top: 0; }

@media only screen and (max-width: 767px) {
  #page_content .tcd-pb-widget + .tcd-pb-widget { margin-top: 20px; }
}

/* ラッパは位置の基準にしない（見出しは行を基準に置きたいため） */
.tcd-pb-widget.pb-widget-fg-side-headline { position: static; }
.fg-side-headline {
  position: static;
  padding-top: 40px;   /* 本文の1行目より少し下げて始める */
}

/* 見出しは上端そろえ・全体は中央寄せ。
   writing-mode:vertical-rl では
     flex-direction:column … 主軸＝横（右→左）＝「見出し」と「英字」の並び
     align-items          … 交差軸＝縦。start で2つとも上端からそろう
     justify-content      … 主軸＝横。center で150px幅の中央に寄る */
.fg-side-headline .cb_side_headline h2 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

/* #page_content は 860px 幅で中央寄せ。その左右どちらかに 150px 分はみ出させる。
   デザインコンテンツの
     .design1_content1 .cb_side_headline             { left:-150px }
     .design1_content1.layout_type2 .cb_side_headline { left:auto; right:-150px }
   と同じ考え方で、左右はウィジェットの「表示位置」で選ぶ。 */
@media only screen and (min-width: 1260px) {
  /* #page_content を足して詳細度を上げる。
     親テーマの #page_content .page_animate_item が position:relative を当てており
     （style.css:177）、そのままだと見出しが本文と同じ流れに入って
     本文を 150px ほど下へ押し下げてしまう。絶対配置に戻して本文の外へ出す。
     top はあえて指定しない。親テーマのスクロール表示アニメーション
     （top:70px → .active で 0）をそのまま活かすため。 */
  #page_content .fg-side-headline .cb_side_headline {
    position: absolute;
    left: -150px;
    /* ここで margin-top は入れないこと。
       ラッパ(.fg-side-headline)の padding-top:40px は流れの中に残るため、
       見出しだけが行の上端（top:0）に留まり、本文が 40px 下がる。
       この差が「見出しは本文より少し上」という意図した見え方になる。 */
  }

  /* 右に出す場合。親テーマの .cb_side_headline は left:0 を持っているため、
     right を指定するだけでは効かない。left:auto で必ず打ち消すこと。 */
  #page_content .fg-side-headline--right .cb_side_headline {
    left: auto;
    right: -150px;
  }
}

/* 1259px 以下は左に150px出す余白が無いため、本文の上に中央寄せで置く。
   親テーマも responsive.css の 750px 以下で同じ形（left:50% + translateX(-50%)）に
   切り替えているので、その扱いを 1199px まで広げるかたちに揃えている。
   縦書きのままにするのもテーマの挙動に合わせたもの。

   境界を 1260px にしているのは、#page_content が 860px 固定で中央寄せのため。
   左に 150px 出すには (幅-860)/2 ≧ 150、つまり 1160px 以上が必要で、
   ぎりぎりだと画面端に貼り付くので 50px の余裕を見ている。 */
@media only screen and (max-width: 1259px) {
  .fg-side-headline .cb_side_headline {
    position: relative;
    top: 0;
    right: auto;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    margin: 0 0 35px 3px;
  }
}

/* 前後のインタビュー
   ---------------------------------------------------------------------
   左に「前」、右に「次」。矢印はCSSの三角で描き、アイコンフォントに依存させない。
   4名と少ないため、端まで行ったら先頭へ戻る（行き止まりを作らない）。 */
.fg-interview-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 70px 0 0;
}
.fg-interview-nav__item {
  display: block;
  padding: 20px 22px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  text-decoration: none;
  position: relative;
  transition: background 0.3s;
}
.fg-interview-nav__item:hover { background: rgba(21, 31, 93, 0.04); }

.fg-interview-nav__item--prev { padding-left: 40px; }
.fg-interview-nav__item--next { padding-right: 40px; text-align: right; }

/* 矢印（三角） */
.fg-interview-nav__item:before {
  content: "";
  position: absolute;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-top: 1px solid #151f5d;
  border-right: 1px solid #151f5d;
}
.fg-interview-nav__item--prev:before { left: 20px; transform: rotate(-135deg); }
.fg-interview-nav__item--next:before { right: 20px; transform: rotate(45deg); }

/* 「次」だけのとき（前が無いとき）は右側に寄せる */
.fg-interview-nav__item--next:first-child { grid-column: 2; }

.fg-interview-nav__label {
  display: block;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: #151f5d;
  font-weight: 600;
  margin: 0 0 8px;
}
.fg-interview-nav__name {
  display: block;
  font-size: 18px;
  line-height: 1.5;
}
.fg-interview-nav__job {
  display: block;
  font-size: 12px;
  opacity: 0.65;
  margin: 4px 0 0;
}

@media only screen and (max-width: 767px) {
  .fg-interview-nav {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 50px;
  }
  .fg-interview-nav__item { padding: 16px 18px; }
  .fg-interview-nav__item--prev { padding-left: 34px; }
  .fg-interview-nav__item--next { padding-right: 34px; }
  .fg-interview-nav__item--next:first-child { grid-column: 1; }
  .fg-interview-nav__name { font-size: 16px; }
}

/* 社員の声の詳細ページ末尾のボタン（→ 採用情報ページ）
   親テーマのボタン指定（.cb_contents .link_button a など）はすべて
   トップページ用にスコープが切られているため、同じ見た目をここで持つ。 */
#body .fg-interview-back {
  margin: 70px 0 0;
  text-align: center;
}
#body .fg-interview-back a {
  display: inline-block;
  min-width: 270px;
  height: 60px;
  line-height: 60px;
  padding: 0 20px;
  background: #000;          /* 塗りボタンは黒（ご指定）。ホバーでメインカラー */
  color: #fff;
  font-size: 16px;
  text-decoration: none;
  box-sizing: border-box;
  transition: background 0.3s;
}
#body .post_content .fg-interview-back a:hover,
.fg-interview-back a:hover { background: #cc3333; color: #fff; }

@media only screen and (max-width: 767px) {
  #body .fg-interview-back { margin-top: 50px; }
  #body .fg-interview-back a { min-width: 220px; height: 50px; line-height: 50px; font-size: 14px; }
}

/* --------------------------------------------------------------------------
   3-3. ドロワーメニューの英字＋日本語
   --------------------------------------------------------------------------
   TREE は「タイトル属性」が入っているメニュー項目に
     <span class="main">英字</span><span class="sub">日本語</span>
   を出す（functions/menu.php:54）。ただしCSSを持っているのは
   グローバルナビとフッターメニューだけで、ドロワーには何も無い。
   そのままだと2つのspanが横に並んで「COMPANY会社案内」と繋がって見えるので、
   ここで縦に積む。

   フッターは「ホバーで下からサブが出る」テーマ標準の動きをそのまま使う。
   ドロワーは開いた時点で全部見せたいので、常に2行で出す。
-------------------------------------------------------------------------- */
#drawer_menu .menu a .title,
#drawer_menu .menu a .title_inner,
#drawer_menu .menu a .main,
#drawer_menu .menu a .sub {
  display: block;
}
#drawer_menu .menu a { padding: 16px 0; }
#drawer_menu .menu a .sub {
  margin-top: 5px;
  font-size: 12px;
  letter-spacing: 0.08em;
  opacity: 0.65;
}

@media only screen and (max-width: 750px) {
  #drawer_menu .menu a { padding: 13px 0; }
  #drawer_menu .menu a .sub { font-size: 11px; margin-top: 3px; }
}

/* --------------------------------------------------------------------------
   4-0. ニュースの絞り込みリンク／記事のカテゴリー
   --------------------------------------------------------------------------
   一覧の上に「すべて / お知らせ / 活動報告 …」を並べる。
   ページ内アンカーナビ（3章）と同じ見た目にして、サイト内で揃えている。
-------------------------------------------------------------------------- */
ul.fg-news-filter {
  list-style: none;
  margin: 0 0 60px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
.fg-news-filter li { margin: 0; }
.fg-news-filter li + li { border-left: 1px solid rgba(0, 0, 0, 0.12); }
.fg-news-filter a {
  display: block;
  padding: 15px 24px;
  font-size: 14px;
  line-height: 1.4;
  text-decoration: none;
  transition: opacity 0.3s;
}
.fg-news-filter a:hover { opacity: 0.65; }

/* 表示中のカテゴリー。色ではなく下線で示す（テーマのアクセント色に依存しない） */
.fg-news-filter a.is-current {
  box-shadow: inset 0 -2px 0 #151f5d;
  font-weight: 600;
}

/* 件数は控えめに */
.fg-news-filter .count {
  margin-left: 6px;
  font-size: 11px;
  opacity: 0.5;
}

/* 記事詳細のカテゴリー。位置と見た目は親テーマの #post_title_area .category に
   合わせてあるので、ここでは複数選択されたときの間隔だけ足す。 */
.fg-news-category a + a { margin-left: 12px; }

@media only screen and (max-width: 767px) {
  /* スマホはページ内アンカーナビ（3章）と同じ2列のタイルにする。
     横一列に収まらず、折り返すと項目の幅がバラバラになって階段状に見えるため。
     項目数が奇数のときは最後の1つを2列ぶんに広げて余りマスを作らない。 */
  ul.fg-news-filter {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin-bottom: 40px;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
    border-left: 1px solid rgba(0, 0, 0, 0.12);
    border-bottom: none;
  }
  .fg-news-filter li {
    border-right: 1px solid rgba(0, 0, 0, 0.12);
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    border-left: none;
  }
  .fg-news-filter li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .fg-news-filter a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 50px;
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
    box-sizing: border-box;
  }
  /* 表示中の下線は内側の影で描いているので、マスの底に張り付かないよう少し上げる */
  .fg-news-filter a.is-current { box-shadow: inset 0 -3px 0 #151f5d; }
}

/* 記事本文に置くPDFリンク（旧サイトでアイキャッチにPDFが入っていた記事の受け皿）。
   本文の流れの中で目立つように、枠線のボタンにしている。 */
.post_content .fg-pdf { margin: 34px 0 0; }
.post_content .fg-pdf a {
  display: inline-block;
  padding: 14px 30px 14px 52px;
  border: 1px solid #000;
  text-decoration: none;
  font-size: 15px;
  position: relative;
  transition: background 0.3s, color 0.3s;
}
/* 紙のアイコン（画像もアイコンフォントも使わずCSSで描く） */
.post_content .fg-pdf a:before {
  content: "";
  position: absolute;
  left: 22px;
  top: 50%;
  width: 13px;
  height: 16px;
  margin-top: -8px;
  border: 1px solid currentColor;
  border-top-width: 1px;
  box-shadow: inset 0 4px 0 -3px currentColor, inset 0 8px 0 -3px currentColor;
}
.post_content .fg-pdf a:hover {
  background: #cc3333;
  border-color: #cc3333;
  color: #fff;
}

/* --------------------------------------------------------------------------
   4-1. ニュース一覧：アイキャッチが無い記事の NoImage
   --------------------------------------------------------------------------
   旧サイトから移行した記事の一部はアイキャッチが無い。
   親テーマは背景画像を style="background:url(...)" と**直接**書くため、
   画像が無いと url() が空のまま出力されて白く抜ける（archive-news.php:108）。
   親テーマは編集しない方針なので、1つ下の階層（.image_wrap）に
   NoImage画像を敷いて、その上に来る空の .image から透けさせる。

   ★ NoImage画像は2か所にあります。差し替えるときは両方そろえてください。
     1. 管理画面：テーマオプション → 基本設定 → 「NO IMAGE画像」
        親テーマが「アイキャッチが無いとき」に出す画像。ニュース一覧・検索結果・
        トップの新着など、ほとんどの箇所はこちらが使われます。
        （未設定だと親テーマ同梱の汎用GIF「NO IMAGE」が出ます）
     2. ファイル：themes/fgnetwork/assets/img/noimage.jpg（推奨 1200×800 前後）
        親テーマが url() を空で書き出す箇所用の下敷き。下のCSSで使っています。
-------------------------------------------------------------------------- */
#news_list .image_wrap,
.index_post_list .image_wrap,
#related_post .image_wrap,
#next_prev_post .image_wrap {
  background: #eceef0 url(../img/noimage.jpg) no-repeat center center;
  background-size: cover;
}

/* 記事詳細の「関連記事」だけは、写真が無いとき NoImage を出さずに
   画像の枠ごと隠す（ご指定）。
   一覧（ニュース／トップ）は NoImage のままにしている。
   関連記事は本文の付け足しなので、写真が無い記事に仮の画像を当てるより
   タイトルだけを見せた方が素直なため。

   空の画像は style="background:url() …" と出力されるので、
   インラインstyleの中身で拾う（要素側に手がかりが無いため）。
   :has() で「空の画像を含む枠」を狙っている。 */
#related_post .image_wrap:has(.image[style*="url()"]) {
  display: none;
}
/* 画像が消えたぶん、タイトルの位置を少し下げて間を持たせる */
#related_post .item:has(.image[style*="url()"]) .title_area {
  padding-top: 26px;
}

/* 親テーマが持っている汎用のNOIMAGE（img/common/no_image*.gif）が
   前面に出る箇所があるので、そこだけ消して上のNoImageを見せる。
   インライン style の中身で判定している（要素側にクラスが無いため）。 */
.index_post_list .image[style*="no_image"],
#related_post .image[style*="no_image"],
#next_prev_post .image[style*="no_image"] {
  background-image: none !important;
}

/* --------------------------------------------------------------------------
   4-2. Instagramギャラリー（手動選択 / トップの代替表示）
   --------------------------------------------------------------------------
   [fg_insta_grid] と [fg_instagram_feed] の共通の見た目。
   中身は「リンク＋画像」を素のまま書けるようにしてあるので、
   セレクタは要素で拾う（クラスを付けさせない＝編集画面の操作を増やさない）。
-------------------------------------------------------------------------- */
/*
.fg-insta-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 0 0 20px;
}
.fg-insta-grid a,
.fg-insta-grid img {
  display: block;
  width: 100%;
}
.fg-insta-grid a {
  position: relative;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.06);
  transition: opacity 0.3s;
}
.fg-insta-grid a:hover { opacity: 0.75; }
.fg-insta-grid img {
  aspect-ratio: 1 / 1; 
  object-fit: cover;
  height: auto;
} 
*/

.home .fg-insta-grid{
  margin: 60px 0;
}
.fg-insta-more {
  text-align: center;
  margin: 0;
}
.fg-insta-more a {
  display: inline-block;
  padding: 12px 34px;
  border: 1px solid currentColor;
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 0.06em;
  transition: opacity 0.3s;
}
/* ⚠️ .post_content を足しているのは詳細度のため。
   テーマの `.post_content a:hover { color:#cc3333 }`（0,2,0）と同点で、
   テーマのCSSが後に読まれるため負けて、赤地に赤文字になっていた。 */
.post_content .fg-insta-more a:hover,
.fg-insta-more a:hover {
  background: #cc3333;
  border-color: #cc3333;
  color: #fff;
  opacity: 1;
}

@media only screen and (max-width: 767px) {
  .home .fg-insta-grid{
    margin: 30px 0;
  }
  .fg-insta-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}

/* --------------------------------------------------------------------------
   5-2. 社員の声スライダー（採用ページ）
   --------------------------------------------------------------------------
   カード自体は一覧（.fg-interview-card）と同じものを使う。
   ここではスライダーとしての体裁（左右の余白・矢印・ドット）だけを持つ。

   slick は親テーマ同梱のものを読み込んでいる（js/slick.css）。
   矢印はテーマのアイコンフォントに依存せず、CSSの三角で描いている。
   ページビルダーのスライダー用CSS（pagebuilder/assets/css/slider.css）を
   読み込まずに済ませるため。
-------------------------------------------------------------------------- */
.fg-interview-slider {
  margin: 0 0 20px;
  position: relative;
}

/* slick 初期化前でも横並びに見えるようにしておく（読み込み中のガタつき防止）。
   初期化後は slick-track が幅を持つので、この指定は無視される。 */
.fg-interview-slider__track {
  display: flex;
  gap: 30px;
  overflow: hidden;
}
/* ⚠️ overflow は必ず visible に戻すこと。
   初期化後、slick は矢印(.slick-prev/.slick-next)をこの要素の中に差し込む。
   左右にはみ出させて置いているため、hidden のままだと矢印が途中で切れる。
   （はみ出しの担当は .slick-list 側の overflow:hidden で足りている） */
.fg-interview-slider__track.slick-initialized {
  display: block;
  gap: 0;
  overflow: visible;
}
.fg-interview-slider__item { min-width: 0; }
.fg-interview-slider__track.slick-initialized .fg-interview-slider__item {
  padding: 0 15px;
}
.fg-interview-slider .slick-list { margin: 0 -15px; }

/* カードは「写真の上に名前を重ねる」形にする（ご指定）。
   下側だけ黒のグラデーションを敷いて、写真の明るさに関係なく文字を読ませる。 */
.fg-interview-slider .fg-interview-card {
  display: block;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  color: #fff;
}
.fg-interview-slider .fg-interview-card:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 62%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0));
  z-index: 1;
  pointer-events: none;
}
.fg-interview-slider .fg-interview-card__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 0 16px 16px;
  color: #fff;
}
.fg-interview-slider .fg-interview-card__job,
.fg-interview-slider .fg-interview-card__year {
  color: rgba(255, 255, 255, 0.85);
  opacity: 1;
}
.fg-interview-slider .fg-interview-card__name { color: #fff; }

/* 入社年は1行に収める。「2021年入社（新卒）」のように長い場合は末尾を省略する */
.fg-interview-slider .fg-interview-card__year {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 左右の矢印。カードの外側（一覧の幅いっぱい）に置く */
.fg-interview-slider .slick-prev,
.fg-interview-slider .slick-next {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: #151f5d;
  cursor: pointer;
  position: absolute;
  top: 38%;                    /* 写真の中心あたり。文字部分の高さに影響されない */
  z-index: 2;
  font-size: 0;
  transition: opacity 0.3s;
}
.fg-interview-slider .slick-prev { left: -22px; }
.fg-interview-slider .slick-next { right: -22px; }
.fg-interview-slider .slick-prev:hover,
.fg-interview-slider .slick-next:hover { opacity: 0.7; }

/* 三角形。border だけで描くので画像もアイコンフォントも要らない */
.fg-interview-slider .slick-prev:before,
.fg-interview-slider .slick-next:before {
  content: "";
  width: 9px;
  height: 9px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  position: absolute;
  top: 50%;
  left: 50%;
}
.fg-interview-slider .slick-prev:before { transform: translate(-30%, -50%) rotate(-135deg); }
.fg-interview-slider .slick-next:before { transform: translate(-70%, -50%) rotate(45deg); }

/* ドット */
.fg-interview-slider .slick-dots {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 10px;
}
.fg-interview-slider .slick-dots li { margin: 0; line-height: 1; }
.fg-interview-slider .slick-dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.2);
  font-size: 0;
  cursor: pointer;
}
.fg-interview-slider .slick-dots .slick-active button { background: #151f5d; }

/* 矢印を外に出す余白が無い幅では、カードの内側に重ねる */
@media only screen and (max-width: 1000px) {
  .fg-interview-slider .slick-prev { left: 0; }
  .fg-interview-slider .slick-next { right: 0; }
}
@media only screen and (max-width: 767px) {
  .fg-interview-slider__track { gap: 16px; }
  .fg-interview-slider__track.slick-initialized .fg-interview-slider__item { padding: 0 8px; }
  .fg-interview-slider .slick-list { margin: 0 -8px; }
  .fg-interview-slider .slick-prev,
  .fg-interview-slider .slick-next { width: 36px; height: 36px; }
}

/* --------------------------------------------------------------------------
   10-2-2. ページヘッダーのタイトル箱が長い英字ではみ出る
   --------------------------------------------------------------------------
   親テーマは箱を 200×200px の正方形で固定し、中のタイトルを絶対配置で
   中央に置いている（style.css:980 / 981）。そのため
   CONSULTANT・COMPENSATION・PRIVACY POLICY のような長い英字が箱からはみ出す。

   箱の幅を「文字に合わせて伸びる」形に変えた。短い英字（NEWS・COMPANY）は
   これまでどおり正方形のままで、長いものだけ横に伸びる。

   ⚠️ セレクタの先頭に body を足しているのは詳細度のため。
      responsive.css（幅の再指定を持つ）が子テーマCSSより後に読み込まれる。
   ⚠️ .title_area の position:absolute は解除する。
      絶対配置のままだと中身が箱の幅に影響せず、幅が潰れる。
-------------------------------------------------------------------------- */
/* ⚠️ inline-flex にしないこと。
   説明文（.desc）を inline-block にしているため、箱もインラインだと
   **タイトルと説明文が同じ行に並んでしまう**（実際に踏んだ）。
   display:flex（ブロックレベル）＋ width:fit-content で
   「中身に合わせて縮み、中央に寄る」箱にする。 */
body #page_header .headline {
  display: flex;
  align-items: center;
  justify-content: center;
  width: -webkit-fit-content;
  width: fit-content;
  min-width: 200px;
  max-width: 92vw;
  margin-left: auto;
  margin-right: auto;
  padding: 0 26px;
  box-sizing: border-box;
}
body #page_header .headline .title_area {
  position: static;
  width: auto;
  padding: 0;
  -ms-transform: none;
  -webkit-transform: none;
  transform: none;
}

@media only screen and (max-width: 1201px) {
  body #page_header .headline { min-width: 170px; height: 170px; }
}
@media only screen and (max-width: 550px) {
  body #page_header .headline { min-width: 130px; height: 130px; padding: 0 18px; }
}

/* --------------------------------------------------------------------------
   10-3. ページヘッダーの説明文
   --------------------------------------------------------------------------
   説明文は白抜きで写真の上に乗るため、明るい部分（空・社屋のサインなど）に
   重なると読めなくなる。ページ側で薄いオーバーレイをかけたうえで、
   文字にも軽い影を入れて最低限のコントラストを確保する。

   タイトルは .title_area に背景色の箱があるので対象外。
-------------------------------------------------------------------------- */
#page_header .desc {
  display: inline-block;
  max-width: 100%;
  padding: 12px 22px;
  background: rgba(0, 0, 0, 0.45);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
  line-height: 2;
  box-sizing: border-box;
}

/* スマホは1行が画面幅を超える。inline-block のままだと文字がはみ出して
   横スクロールが出るため、左右に余白を取ったブロックに切り替えて折り返させる。 */
/* スマホ。文字数が多いと帯が画面幅を超えてしまうため、
   親要素の幅ではなく画面幅（vw）で頭打ちにして折り返させる。
   スマホ用の短い説明文（ヘッダーの設定「説明文（スマホ）」）も併用すること。 */
@media only screen and (max-width: 767px) {
  #page_header .desc {
    display: block;
    width: -webkit-fit-content;
    width: fit-content;
    max-width: 88vw;
    margin: 0 auto;
    padding: 10px 14px;
    line-height: 1.9;
    text-align: center;
  }
}

/* --------------------------------------------------------------------------
   11. 事業詳細ページ（/service/ の子ページ）
   --------------------------------------------------------------------------
   1区分ぶんの組み方（ページビルダーの行で組んでいる）：
     サイド見出し（縦書き・左右交互）
     ├ リード文 ＋ メイン写真（2カラムの行）
     ├ 主な業務内容（1カラムの行）
     └ その他の写真（最大3カラムの行）

   ⚠️ ここは body.parent-pageid-24（＝/service/ の子ページ）で絞っている。
      ビルダーは行やウィジェットに任意のクラスを振れないため、
      「どのページか」でしか対象を限定できない。
      /service/ 自体のID(24)が変わるとここも直す必要がある。

   2026-08-13：エディター直書き（.fg-svc__intro 等）からページビルダーへ移行。
   旧レイアウト用のCSSは削除した（必要になれば git 履歴から戻せる）。
-------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   11-2. 事業詳細：区分の頭（メイン写真＋リード文）
   --------------------------------------------------------------------------
   写真を外側へ大きくはみ出させ、文章を紺のパネルにして少し重ねる。

   ⚠️ パネルの指定は「写真がある行」だけに当てること（:has(.pb-widget-image)）。
      補償・施工支援ページの「調査区分の詳細」などは写真の無いアンカー行で、
      同じ指定が当たると長文が紺一色の大きな塊になってしまう。

   対象の行の見分け方：
     区分の先頭の行にはアンカーID（id="sec-xxx" / .fg-anchor-section）が入る。
     写真が左右どちらかは、サイド見出しの向きで分かる（写真の反対側に出しているため）。
       .fg-side-headline--right がある行 → 写真は左（col1）／文章は右（col2）
       .fg-side-headline--left  がある行 → 文章は左（col1）／写真は右（col2）

   ⚠️ はみ出しは 1260px 以上のときだけ。#page_content は 860px 固定なので、
      画面が狭いと外側に余白が無く、横スクロールが出てしまう。
-------------------------------------------------------------------------- */
@media only screen and (min-width: 1260px) {
  /* 写真：外側（ページの端の方）へ広げる */
  body.parent-pageid-24 #page_content .fg-anchor-section:has(.fg-side-headline--right) .tcd-pb-col.col1,
  body.parent-pageid-24 #page_content .fg-anchor-section:has(.fg-side-headline--left) .tcd-pb-col.col2 {
    width: calc(56% + 110px);
  }
  /* はみ出したぶんは反対側のマージンで打ち消す。
     打ち消さないとカラム幅の合計が100%を超えて、フロートが回り込む
     （＝写真が文章の下に落ちる）。 */
  body.parent-pageid-24 #page_content .fg-anchor-section:has(.fg-side-headline--right) .tcd-pb-col.col1 {
    margin-left: -110px;
  }
  body.parent-pageid-24 #page_content .fg-anchor-section:has(.fg-side-headline--left) .tcd-pb-col.col2 {
    margin-right: -110px;
  }

  /* 文章：紺のパネルにして写真へ少し重ねる。下にずらして「載っている」感を出す */
  body.parent-pageid-24 #page_content .fg-anchor-section:has(.pb-widget-image) .tcd-pb-widget.pb-widget-editor {
    position: relative;
    z-index: 2;
    background: #151f5d;
    color: #fff;
    padding: 34px 36px;
    margin-top: 56px;
  }
  body.parent-pageid-24 #page_content .fg-anchor-section:has(.fg-side-headline--right) .tcd-pb-col.col2 .tcd-pb-widget.pb-widget-editor {
    margin-left: -72px;
  }
  body.parent-pageid-24 #page_content .fg-anchor-section:has(.fg-side-headline--left) .tcd-pb-col.col1 .tcd-pb-widget.pb-widget-editor {
    margin-right: -72px;
  }

  /* 写真は少し縦長にして存在感を出す（ギャラリーの3:2とは変えている） */
  body.parent-pageid-24 #page_content .fg-anchor-section .tcd-pb-widget.pb-widget-image img {
    aspect-ratio: 4 / 3;
  }

  /* カードの中は余白を詰める（枠の padding で足りているため） */
  body.parent-pageid-24 #page_content .fg-anchor-section .pb-widget-editor .tcdce-body > :first-child { margin-top: 0; }
  body.parent-pageid-24 #page_content .fg-anchor-section .pb-widget-editor .tcdce-body > :last-child { margin-bottom: 0; }
}

/* 768〜1259px は重ねない（外側に余白が無い）。パネルの体裁だけ残す。
   スマホ（767px以下）は別に「画像右上／説明文左下」で組んでいるので含めない。 */
@media only screen and (min-width: 768px) and (max-width: 1259px) {
  body.parent-pageid-24 #page_content .fg-anchor-section:has(.pb-widget-image) .tcd-pb-widget.pb-widget-editor {
    background: #151f5d;
    color: #fff;
    padding: 24px 24px 4px;
    margin-top: 24px;
  }
}
/* スマホ：トップのデザインコンテンツと同じ「画像 右上 ／ 説明文 左下」に。
   ページビルダーはカラムを縦積みにするだけなので、
   ・行を flex にして画像のカラムを先頭へ回す（区分によって左右が入れ替わるため）
   ・画像は右寄せ、説明文は左寄せにして少し重ねる
   の2つで組み替えている。 */
@media only screen and (max-width: 767px) {
  /* ⚠️ カラムを display:contents にして、中のウィジェットを直接並べ替える。
     カラム単位で入れ替えるだけだと「サイド見出し」が画像と説明文の間に残り、
     重ねようとしても見出しが挟まって重ならない。
     見出し → 画像 → 説明文 の順に並べ替えたうえで、説明文を上へ引き上げる。 */
  body.parent-pageid-24 #page_content .fg-anchor-section:has(.pb-widget-image) .tcd-pb-row-inner {
    display: flex;
    flex-direction: column;
  }
  body.parent-pageid-24 #page_content .fg-anchor-section:has(.pb-widget-image) .tcd-pb-col {
    display: contents;
  }
  body.parent-pageid-24 #page_content .fg-anchor-section:has(.pb-widget-image) .pb-widget-fg-side-headline { order: -2; }
  body.parent-pageid-24 #page_content .fg-anchor-section:has(.pb-widget-image) .pb-widget-image { order: -1; }

  body.parent-pageid-24 #page_content .fg-anchor-section:has(.pb-widget-image) .tcd-pb-widget.pb-widget-image {
    width: 86%;
    margin-left: 14%;
  }
  body.parent-pageid-24 #page_content .fg-anchor-section:has(.pb-widget-image) .tcd-pb-widget.pb-widget-image img {
    aspect-ratio: 4 / 3;
  }

  body.parent-pageid-24 #page_content .fg-anchor-section:has(.pb-widget-image) .tcd-pb-widget.pb-widget-editor {
    width: 88%;
    margin: -48px 0 0;
    position: relative;
    z-index: 2;
    padding: 22px 20px;
    /* ⚠️ 背景と文字色はここにも書くこと。
       768〜1259px 用のブロックに下限を付けたため、スマホには届かない。 */
    background: #151f5d;
    color: #fff;
  }
}

/* パネルの中の文字は白。見出し（■付きの小見出し）やリンクも合わせる */
body.parent-pageid-24 #page_content .fg-anchor-section:has(.pb-widget-image) .pb-widget-editor .fg-menu-heading,
body.parent-pageid-24 #page_content .fg-anchor-section:has(.pb-widget-image) .pb-widget-editor a {
  color: #fff;
}

/* 写真の見え方をそろえる。
   画像ウィジェットは原寸をそのまま出すため、比率のばらつきが
   そのまま並びの乱れになる。3:2 に切り抜いて高さをそろえる。
   height:auto を入れているのは、<img> に width/height 属性が付くため。 */
body.parent-pageid-24 #page_content .tcd-pb-widget.pb-widget-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
}

/* 業務項目が多い区分（測量17件など）は2段組にして縦に伸びすぎないようにする */
body.parent-pageid-24 .post_content .fg-list {
  columns: 2;
  column-gap: 40px;
}
body.parent-pageid-24 .post_content .fg-list li {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}

/* 「主な業務内容」の見出しがウィジェットの先頭に来るときは上の余白を詰める
   （行の間隔はビルダー側の margin_bottom で持っているため） */
body.parent-pageid-24 .post_content .fg-menu-heading:first-child { margin-top: 0; }
body.parent-pageid-24 .post_content .tcdce-body > :first-child { margin-top: 0; }

@media only screen and (max-width: 767px) {
  body.parent-pageid-24 .post_content .fg-list { columns: 1; }
  /* スマホはカラムが縦積みになる。写真が続くと間延びするので浅めに切り抜く */
  body.parent-pageid-24 #page_content .tcd-pb-widget.pb-widget-image img {
    aspect-ratio: 16 / 9;
  }
}

@media only screen and (max-width: 767px) {
  table.pb_simple_table th {width: 100%;}
}

@media only screen and (max-width: 1201px) {
    body #page_header .headline {
        min-width: 210px;
        height: 210px;
    }
}

@media only screen and (max-width: 550px) {
    body #page_header .headline {
        min-width: 170px;
        height: 170px;
    }
}


/* --------------------------------------------------------------------------
 フッター：ロゴ・住所は左、SNSと追加エリアは右（PCのみ）

 #footer_inner の中身は
   #footer_logo → .footer_info.pc → .footer_info.mobile → #footer_sns → #footer_extra
 という並びで、親テーマは全部を中央揃えで縦に積んでいる。
 これを2列のグリッドにして、右列に #footer_sns と #footer_extra を寄せる。

 ⚠️ 行(grid-row)まで明示しているのは、grid-column だけ指定すると
 自動配置が「1要素＝1行」で下へ流れてしまい、SNSがロゴの右ではなく
 下に落ちるため。.footer_info.mobile は親テーマ側で display:none なので
 グリッドの要素として数えられない。

 境界の 1201px は親テーマが css/responsive.css を読み込む
 media="screen and (max-width:1201px)" に合わせている。
-------------------------------------------------------------------------- */
.header_sns li a:before {
  font-size: 18px;
}
#footer_sns li a {
  width: 30px;
  height: 30px;
  line-height: 30px;
}
#footer_sns li a:before {
  font-size: 26px;
}
@media screen and (min-width:1202px) {
  #footer_inner {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    column-gap: 40px;
    /* 親テーマの #footer は左右の余白が 0 で、中身は全部センター寄せ。
       左右に振り分けると端に貼り付いてしまうので、本文と同じ 1160px の
       カラム幅（#main_contents）に合わせて中央に置く。 */
    width: 1160px;
    max-width: calc(100% - 100px);
    margin: 0 auto;
  }
  #footer_logo { grid-row: 1; grid-column: 1; text-align: left; }
  #footer_logo img { margin: 0; }
  .footer_info.pc { grid-row: 2; grid-column: 1; text-align: left; }
  #footer_sns { grid-row: 1; grid-column: 2; text-align: right; margin-top: 0; }
  #footer_sns li a {
    width: 40px;
    height: 40px;
    line-height: 40px;
  }
  #footer_sns li a:before {
    font-size: 34px;
  }
  #footer_sns li:last-child { margin-right: 0; }
  #footer_extra { grid-row: 2; grid-column: 2; justify-content: flex-end; }
}

/* 追加エリア（管理画面: FG NETWORK 追加設定 → フッターの追加エリア）
   中に入れた画像を横並びにする。数が増えても折り返して崩れないようにする。 */
#footer_extra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin: 20px 0 0 0;
  position: relative;
  z-index: 20;
}
#footer_extra p { margin: 0; }
#footer_extra img {
  display: block;
  width: auto;
  height: auto;
  max-height: 100px;
}

@media screen and (max-width:750px) {
  #footer_extra { gap: 10px; }
  #footer_extra img { max-height: 60px; }
}


/* --------------------------------------------------------------------------
 ログイン中（管理バー表示）にスクロールするとページ全体がガタッと飛ぶのを止める

 親テーマは「スクロール量 > 120px」で body に header_fix / header_fix_mobile を付け、
 管理バーがあるときだけ body の padding-top を増やす作りになっている。

   PC   : .pc body.admin-bar          → padding-top:32px
          .pc .admin-bar.header_fix   → padding-top:190px   ← スクロールで +158px
   SP   : body.admin-bar              → padding-top:32px（781px以下は46px）
          .mobile .admin-bar.header_fix_mobile → padding-top:102px（同126px） ← +70px
          body.admin-bar.header_fix_mobile #header → margin-top:32px（同46px） ← ヘッダーも動く

 ヘッダーが position:fixed だった頃の名残と思われる。今は position:sticky で
 ヘッダーは元から場所を取っているため、この差分は詰める必要がない。
 スクロールした瞬間にページ全体とメインビジュアルが飛んで見えるだけなので、
 スクロール前の値のまま固定する。

 ⚠️ 未ログインの閲覧者にはこのクラスが付かないため、元から影響はない。
 「ヘッダーの背景を常に不透過にする」のON/OFFとも無関係な、親テーマ側の挙動。
-------------------------------------------------------------------------- */
.pc body.admin-bar.header_fix { padding-top: 32px !important; }

body.admin-bar.header_fix_mobile #header { margin-top: 0 !important; }
.mobile body.admin-bar.header_fix_mobile { padding-top: 32px !important; }
@media screen and (max-width:781px) {
  .mobile body.admin-bar.header_fix_mobile { padding-top: 46px !important; }
}

/* ついでに、固定されたヘッダーが管理バーの下に潜って上端が欠けるのも直す。
   sticky の停止位置を管理バーのぶんだけ下げる。
   782px以下は WordPress 側で管理バーが position:absolute（＝一緒にスクロールして
   消える）になるため、下げる必要はない。 */
body.admin-bar #header { top: 32px; }
@media screen and (max-width:782px) {
  body.admin-bar #header { top: 0; }
}