/* ══════════════════════════════════════════════════════════════
   人物写真なしの見た目（2026-10-07 リデザインで本番採用）
   人が写っている写真だけを外す。製品画面・コラムのサムネ・ロゴ・線画は残す。
   対象: aboutus / about1 / about2（About）・contactus（お問い合わせ）・
         Service.webp（握手。サービス・建設ページ）・recruit/*（職種ページ）
   refined.css の後に読む（functions.php）。写真を戻すときはこのファイルを外す。
   （全画像を外した版は _archive/skin-refined-2026-10-07/no-images-before/no-images.all.css）
   ══════════════════════════════════════════════════════════════ */

/* ─── About（TOP・下層）：写真の列を外す ───
   写真があった左列には見出ししか残らず、下が丸ごと空く。
   左右2列をやめて「見出し → 本文」の縦積みにする（Aboutページは表が全幅になる）。 */
.top-about__heading__img,
.top-about__content__img { display: none; }
.top-about__grid {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto;
  row-gap: 44px;
  min-height: 0 !important; /* page-about.php のインライン min-height:600px を打ち消す */
}
.top-about__heading,
.top-about__content { grid-area: auto; padding: 0 !important; }
.top-about__heading__title { padding-top: 0; }
.top-about { padding-top: 112px; padding-bottom: 112px; }

/* TOPの Our value は1列・中央揃えの「声明」型にする（参考サイトの会社紹介と同じ）。
   左右2列だと短い文章の両側に大きな空きが出て間延びしていた。
   本文は <br> で行を組んであるので、中央揃えにしてもそのまま読める。 */
.top-about .top-about__grid { justify-items: center; text-align: center; row-gap: 36px; }
.top-about .c-title__primary { align-items: center; }
.top-about .c-title__primary .\:en br { display: none; } /* 「Our value」を1行に（テンプレート側で br の前に空白を入れてある） */
.top-about .top-about__content { max-width: 680px; }
.top-about .top-about__content > .c-title__secondary { font-size: 2rem; line-height: 1.45; margin-bottom: 32px; }
.top-about .top-about__content__body { margin-bottom: 20px; }
.top-about .c-button__wrap { justify-content: center; margin-top: 36px !important; }

/* 中央の本文（最大680px）の左右の空きにイラストを置く（最大300px）。
   幅は「左右の空き − 余白」と 300px の小さい方。小さくなりすぎる幅（1100px未満＝180px未満）では出さない */
.top-about__illust {
  display: block;
  position: absolute; top: 50%;
  width: min(300px, calc((100% - 740px) / 2));
  height: auto;
  transform: translateY(-50%);
  pointer-events: none;
}
/* 左右とも「本文の外側の空き」の中央に置く（左右で絵の幅が違っても見た目の余白が揃う） */
.top-about__illust--l { left: calc((100% - 680px) / 4); transform: translate(-50%, -50%); }
.top-about__illust--r { right: calc((100% - 680px) / 4); transform: translate(50%, -50%); }
@media (max-width: 1099px) {
  .top-about__illust { display: none; }
}

/* ─── サービス・建設ページ：右の握手の写真を外し、見出しを全幅に ─── */
.top-service__main { display: none; }
.top-service__heading { grid-area: 1 / 1 / 2 / 3; max-width: 760px; }

/* ─── 採用：職種ページの写真 ─── */
.job__figure { display: none; }
.job__lead { margin-top: 32px; }

/* ─── お問い合わせ（全ページ共通）：左の人物写真を外す ───
   1カラムにすると見出し・本文・ボタンが左に縦積みになり、右半分が空いたまま
   縦に長い黒い面になる。「見出し（左）／本文＋ボタン（右）」の2列にして詰める。 */
.l-aside__contact__l { display: none; }
.l-aside__contact__r {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 60px;
  padding: 64px 60px;
}
/* 見出しは左列の上下中央、本文とボタンは右列で1かたまりにして上下中央に置く
   （以前は align-items:end で見出しが下に寄って見えた） */
.l-aside__contact__heading { grid-column: 1; grid-row: 1 / span 2; align-self: center; margin-bottom: 0; }
.l-aside__contact__body { grid-column: 2; grid-row: 1; align-self: end; margin-top: 0 !important; }
.l-aside__contact .c-button__wrap { grid-column: 2; grid-row: 2; align-self: start; margin-top: 24px !important; }

@media (max-width: 767px) {
  .top-about__grid { row-gap: 28px; }
  .top-about { padding-top: 64px; padding-bottom: 64px; }
  /* SPは本文の <br> が消えて流し込みになるので、中央揃えにせず左揃えに戻す */
  .top-about .top-about__grid { justify-items: stretch; text-align: left; }
  .top-about .c-title__primary { align-items: flex-start; }
  .top-about .top-about__content > .c-title__secondary { font-size: 1.3125rem; margin-bottom: 20px; }
  .top-about .c-button__wrap { justify-content: flex-start; margin-top: 28px !important; }
  .l-aside__contact__r { display: block; padding: 40px 4px 12px; }
  .l-aside__contact__heading { margin-bottom: 20px; }
}