@charset "UTF-8";
/* ============================================
   SANKO FACILITIES INC. static mock (fable)

   命名規則: BEM（block__element--modifier）
     - 状態クラスは is-* （JSが付け外し）
     - 汎用ユーティリティ/共通部品:
       .container .en .chip .pill .prose
       .section-heading .section-gap .split
       .page-body .photo-band .venn .tag .arrow

   サイズ設計（remトークン方式）:
     - 1rem = 10px 基準（html { font-size: 62.5% }）
     - 640px以下はルートをvw化し、375px幅を基準に
       端末幅へ比例スケール（全体の比率を維持）
     - 全体のサイズ感を一括調整する場合は
       :root の --scale だけを変更する（例: 1.1）
       ※固定remはルート経由、可変clampのvw補間項にも
         --scale を乗算しているため全要素が同比率で動く
     - 固定トークン: --fs-* --lh-* --sp-* --gap-*
     - 可変トークン（ディスプレイ級・大型余白）は
       clamp の両端を rem で持ち、中間のみvw補間
     - TOPヒーローは加えて svh / max-height で天地圧縮
       （.hero の --hero-* 変数。短い画面でも View まで収める）
     - 例外（固有値のまま）: ベン図の%幾何、1px罫線、
       画像 aspect-ratio、装飾要素

   WordPress組み込みの想定:
     - header/footer/menu はテンプレートパーツ化
     - .photo-band の背景は --band-img をCSSまたは
       インラインstyleで上書き（ACF等の動的画像に対応）
     - トークン群は theme.json のカスタムプロパティへ
       そのまま移植可能
   ============================================ */

:root {
  /* --- 全体スケール（唯一の調整ノブ） --- */
  --scale: 1;

  /* --- カラー --- */
  --c-bg: #5e5e5e;          /* 本文背景 */
  --c-dark: #171717;        /* ヘッダー・フッター黒 */
  --c-text: #fff;
  --c-blue: #0d7bf5;
  --c-orange: #f8891e;
  --c-watermark: #453c2b;
  --c-chip: rgba(0, 0, 0, 0.55);          /* テキスト下敷きチップ */
  --c-line: rgba(255, 255, 255, 0.45);    /* 罫線 */

  /* --- フォント --- */
  --font-en: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;

  /* --- 文字サイズ（固定4段） --- */
  --fs-xs: 1.2rem;   /* キャプション・タグ・コピーライト */
  --fs-sm: 1.3rem;   /* 表・注記・小さめ本文 */
  --fs-md: 1.4rem;   /* 標準本文 */
  --fs-lg: 1.6rem;   /* カード名・バナー */

  /* --- 文字サイズ（可変5段：両端rem・中間vw補間×--scale） --- */
  --fs-h3:      clamp(1.6rem, calc(0.8rem + 1vw   * var(--scale)), 2.1rem);  /* 小見出し */
  --fs-h2:      clamp(1.9rem, calc(1rem + 1.25vw  * var(--scale)), 2.6rem);  /* セクション見出し・強調英字 */
  --fs-h1:      clamp(4rem,   calc(1rem + 3.9vw   * var(--scale)), 6.6rem);  /* ページタイトル・大型装飾英字 */
  /* TOPヒーロー英字：上限を抑え、実サイズは .hero 内で svh と突き合わせる */
  --fs-display: clamp(4.2rem, calc(1rem + 5.8vw   * var(--scale)), 9.6rem);
  --fs-brand:   clamp(4rem,   calc(1rem + 4.8vw   * var(--scale)), 8.4rem);  /* 大組みサイト名 */
  --fs-nav:     clamp(2.6rem, calc(1rem + 2.2vw   * var(--scale)), 3.8rem);  /* フルスクリーンメニュー */

  /* --- 行間（4段） --- */
  --lh-flat:    1.05;  /* 大型英字 */
  --lh-heading: 1.35;  /* 見出し・カード名・ナビ */
  --lh-base:    1.9;   /* UI要素・短文 */
  --lh-relaxed: 2.1;   /* 長文本文 */

  /* --- 余白・距離（固定6段） --- */
  --sp-2xs: 0.4rem;
  --sp-xs:  0.8rem;
  --sp-sm:  1.2rem;
  --sp-md:  1.6rem;
  --sp-lg:  2.4rem;
  --sp-xl:  3.2rem;

  /* --- 余白・距離（可変：両端rem・中間vw補間×--scale） --- */
  --sp-section: clamp(5.6rem, calc(2rem + 5.5vw   * var(--scale)), 9.6rem); /* セクション間 */
  --sp-band:    clamp(4.8rem, calc(1.6rem + 4.8vw * var(--scale)), 8.8rem); /* バンド上下・page-body上 */
  --sp-block:   clamp(2.8rem, calc(1.2rem + 2.9vw * var(--scale)), 4.8rem); /* 見出し下・ブロック間 */
  --gap-col:    clamp(2.4rem, calc(0.8rem + 2.8vw * var(--scale)), 5.6rem); /* カラム間gap標準 */
  --gap-col-lg: clamp(3.2rem, calc(1.2rem + 4.1vw * var(--scale)), 7.2rem); /* 大きめカラム間 */

  --container: min(116rem, 82vw);
  --hero-gutter: var(--sp-xl);
  --layout-max: 200rem;
  --layout-offset: max(0px, calc((100vw - var(--layout-max)) / 2));
  /* 本文 .container と同じ左右余白（全面写真の上に載る文字の揃え用） */
  --content-inset: max(0px, calc((100vw - var(--container)) / 2));
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  font-size: calc(62.5% * var(--scale)); /* 1rem = 10px × --scale */
  scroll-behavior: smooth;
}

/* SP帯：ルートをvw化し端末幅375pxを基準に全体を比例スケール */
@media (max-width: 640px) {
  html { font-size: calc(100vw / 37.5 * var(--scale)); }
}

body {
  font-family: var(--font-jp);
  background: var(--c-bg);
  color: var(--c-text);
  line-height: var(--lh-base);
  font-size: var(--fs-md);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* ============ 汎用ユーティリティ ============ */
.container {
  width: var(--container);
  margin-inline: auto;
}

.en { font-family: var(--font-en); }

/* テキスト下敷きの黒チップ（em基準＝文字サイズ追従） */
.chip {
  background: var(--c-chip);
  padding: 0.18em 0.4em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* 白地ピル（TEAMポイント・ABOUTサービス共通） */
.pill {
  display: inline-block;
  background: #fff;
  color: #222;
  font-size: var(--fs-sm);
  font-weight: 700;
  padding: var(--sp-xs) var(--sp-lg);
  border-radius: 4px;
}
.pill--center {
  display: block;
  text-align: center;
  padding: var(--sp-xs);
}

/* 本文組版（下層ページの説明ブロック共通）
   直下のpのみ対象（内包する.pill等への波及を防ぐ） */
.prose > p {
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
}
.prose > p + p { margin-top: 1em; }

/* セクション見出し（基本＝ページセクション用 / --sm＝バンド・ボックス内用） */
.section-heading {
  font-size: var(--fs-h2);
  font-weight: 900;
  margin-bottom: var(--sp-block);
}
.section-heading--sm {
  font-size: var(--fs-h3);
  margin-bottom: var(--sp-md);
}

/* セクション間の標準マージン */
.section-gap { margin-bottom: var(--sp-section); }

/* テキスト＋図版の2カラム分割（TEAMベン図・ABOUT歩み共通） */
.split {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--gap-col-lg);
  align-items: center;
}

/* 下層ページ本文の器（ウォーターマークより前面に） */
.page-body {
  position: relative;
  z-index: 1;
  padding-top: var(--sp-band);
}
.page-body--flush { padding-top: var(--sp-block); }
.page-body--pad-bottom { padding-bottom: var(--sp-section); }

/* 写真バンド（暗幕オーバーレイ付き背景写真セクションの共通基盤）
   使う側で --band-img / --band-overlay を上書きする */
.photo-band {
  position: relative;
  isolation: isolate;
}
.photo-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(var(--band-overlay, rgba(20, 18, 15, 0.72)),
                    var(--band-overlay, rgba(20, 18, 15, 0.72))),
    var(--band-img);
  background-size: cover;
  background-position: center;
}

/* 矢印ライン（バナー・Viewリンク共通） */
.arrow {
  position: relative;
  flex: 1;
  height: 1px;
  background: #fff;
  align-self: flex-start;
  margin-top: 0.7em;
  min-width: 4rem;
}
.arrow::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: 0;
  width: 1.1rem;
  height: 1px;
  background: #fff;
  transform: rotate(38deg);
  transform-origin: right bottom;
}

/* カテゴリタグ（塗り＝TOPヒーロー / 枠線＝WORKS一覧） */
.tag {
  font-family: var(--font-en);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: #444;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  padding: var(--sp-2xs) var(--sp-md);
  white-space: nowrap;
}
.tag--outline {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.7);
  color: rgba(255, 255, 255, 0.9);
}

/* ブランド表記（ヘッダーロゴ・メニューロゴ共通の書体設定） */
.brand-logo {
  font-family: var(--font-en);
  font-weight: 800;
  font-size: var(--fs-h2);
  letter-spacing: 0.01em;
  line-height: var(--lh-heading);
  color: #fff;
}

/* 大組みサイト名（メニュー下部・フッター共通） */
.brand-title {
  font-family: var(--font-en);
  font-weight: 800;
  font-size: var(--fs-brand);
  line-height: var(--lh-flat);
  letter-spacing: -0.01em;
}

/* ============ ヘッダー ============ */
.site-header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.site-header__logo { padding: var(--sp-lg) var(--sp-xl) var(--sp-lg) calc(var(--layout-offset) + var(--hero-gutter)); }

/* ハンバーガー：右上の黒い斜めコーナー */
.hamburger {
  position: relative;
  width: clamp(7.2rem, calc(8vw * var(--scale)), 11rem);
  height: clamp(7.2rem, calc(8vw * var(--scale)), 11rem);
  background: #111;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  border: 0;
  cursor: pointer;
}

.hamburger span {
  position: absolute;
  top: 32%;
  right: 22%;
  width: 2.6rem;
  height: 2px;
  background: #fff;
}
.hamburger span:nth-child(2) { transform: translateY(0.8rem); }
.hamburger span:nth-child(3) { transform: translateY(1.6rem); }

/* ============ フルスクリーンメニュー ============ */
.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #1d1d1d;
  display: flex;
  flex-direction: column;
  padding: var(--sp-xl) var(--gap-col);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.4s ease, visibility 0.4s;
  overflow-y: auto;
}
.menu-overlay.is-open { visibility: visible; opacity: 1; }

.menu-overlay__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.menu-overlay__logo {
  background: #111;
  padding: var(--sp-sm) var(--sp-lg);
}

.menu-close {
  width: 6.4rem;
  height: 6.4rem;
  border-radius: 50%;
  border: 1px solid #fff;
  background: transparent;
  color: #fff;
  font-size: 2.4rem;
  font-weight: 300;
  cursor: pointer;
  line-height: 1;
  flex-shrink: 0;
}

.menu-overlay__nav {
  margin: clamp(3.2rem, 6vh, 6.4rem) 0 auto; /* 例外: vh基準 */
}

.menu-overlay__nav a {
  display: inline-block;
  font-family: var(--font-en);
  font-weight: 800;
  font-size: var(--fs-nav);
  letter-spacing: 0.02em;
  padding: var(--sp-xs) 0;
  transition: opacity 0.25s;
}
.menu-overlay__nav a:hover { opacity: 0.6; }
.menu-overlay__nav a.is-current,
.menu-overlay__nav .current-menu-item > a,
.menu-overlay__nav .current-menu-ancestor > a {
  text-decoration: line-through;
  text-decoration-thickness: 3px;
}

.menu-overlay__foot { margin-top: clamp(4rem, 8vh, 9.6rem); } /* 例外: vh基準 */

.menu-overlay__info {
  margin-top: var(--sp-lg);
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: var(--lh-base);
}

.menu-overlay__copy {
  margin-top: var(--sp-md);
  font-size: var(--fs-xs);
  font-weight: 700;
}

/* ============ CTAバナー（共通パーツ：ヒーロー内・フッター共用） ============ */
.cta-banners {
  display: grid;
  gap: var(--sp-md);
  width: 100%;
}

.cta-banners__row {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: var(--sp-md);
}

.cta-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-sm);
  min-height: 9.2rem;
  padding: var(--sp-md);
  font-weight: 700;
  font-size: var(--fs-lg);
  font-family: var(--font-en);
  border-radius: 4px;
  transition: opacity 0.25s;
}
.cta-banner:hover { opacity: 0.85; }
.cta-banner--news { background: var(--c-blue); }
.cta-banner--showroom { background: var(--c-orange); }

/* ============ フッター ============ */
.site-footer {
  background: #000;
  padding: var(--sp-band) 0 var(--sp-lg);
}

.site-footer__main {
  display: grid;
  grid-template-columns: 1fr minmax(32rem, 56rem);
  gap: var(--gap-col-lg);
  align-items: start;
  margin-bottom: var(--gap-col-lg);
}

.site-footer__info {
  font-size: var(--fs-sm);
  font-weight: 700;
}
.site-footer__info span { margin-right: 1.5em; }

.site-footer__copy {
  margin-top: var(--sp-sm);
  font-size: var(--fs-xs);
  font-weight: 700;
}

/* ============ 回転ウォーターマーク（例外: 装飾のため独自サイズ） ============ */
.watermark-wrap { position: relative; overflow: hidden; }

.watermark {
  position: absolute;
  top: 0;
  left: 0.82em;
  z-index: 0;
  transform: rotate(90deg);
  transform-origin: top left;
  font-family: var(--font-en);
  font-weight: 800;
  font-size: clamp(6.4rem, calc(8.5vw * var(--scale)), 12.4rem);
  line-height: 0.95;
  letter-spacing: -0.06em;
  color: var(--c-watermark);
  opacity: 0.8;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

/* ============ TOP：ヒーロー ============
   タイトルはヘッダー直下、ケース＋CTAは画面下。
   余った高さは「キャッチとケースのあいだ」に置く。
   文字サイズは vw と svh の小さい方（小さくしすぎない上限）。 */
.hero {
  --hero-fs-title: clamp(5.2rem, min(6.8vw, 8.8svh), 11rem);
  --hero-fs-copy: var(--fs-h2);
  --hero-fs-case: var(--fs-h2);
  --hero-pad-top: clamp(7.2rem, 10svh, 10.4rem);
  --hero-pad-bottom: clamp(2.4rem, 3svh, 4rem);
  --hero-dots-gap: 1.6rem;
  --hero-gap-copy: clamp(1.2rem, 1.8svh, var(--sp-lg));
  --hero-case-gap: clamp(1rem, 1.6svh, var(--sp-md));
  --hero-banner-row-min: clamp(7.2rem, 8.5svh, 9.2rem);
  --hero-banner-gap: clamp(1rem, 1.6svh, var(--sp-md));

  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  isolation: isolate;
  padding-bottom: calc(var(--hero-pad-bottom) + var(--hero-dots-gap) + 0.9rem);
}
.admin-bar .hero { min-height: calc(100svh - 32px); }
@media screen and (max-width: 782px) {
  .admin-bar .hero { min-height: calc(100svh - 46px); }
}

.hero__slide {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.hero__slide.is-active { opacity: 1; }

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.1) 45%, rgba(0, 0, 0, 0.4));
}

.hero__inner {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: min(var(--container), calc(100% - var(--hero-gutter)));
  margin-inline: calc(var(--layout-offset) + var(--hero-gutter)) auto;
  padding-top: var(--hero-pad-top);
}

.hero__title {
  font-family: var(--font-en);
  font-weight: 800;
  font-size: var(--hero-fs-title);
  line-height: var(--lh-flat);
  letter-spacing: -0.015em;
}

.hero__copy {
  margin-top: var(--hero-gap-copy);
  font-size: var(--hero-fs-copy);
  font-weight: 900;
  line-height: var(--lh-base);
}

/* ケーススタディ情報バー
   1行目: Case Study 名称（複数行可）
   2行目: Date. | Category（タグは幅があれば横並び）. | View
   幅不足時: 先に View が落ち、そのあと Category 内でタグ改行 */
.hero__bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--gap-col);
  width: auto;
  max-width: calc(var(--layout-max) - 2 * var(--hero-gutter));
  margin-inline: calc(var(--layout-offset) + var(--hero-gutter));
  margin-top: 0;
  flex: 0 0 auto;
}

.hero__case {
  color: inherit;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--hero-case-gap);
  flex: 1;
  min-width: 0;
  max-width: none;
}

.hero__case-main {
  min-width: 0;
  width: 100%;
}

.hero__case-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  column-gap: var(--gap-col);
  row-gap: var(--hero-case-gap);
  width: 100%;
}

.hero__case-item {
  padding-right: var(--gap-col);
  border-right: 1px solid rgba(255, 255, 255, 0.6);
}
.hero__case-item:last-child {
  border-right: 0;
  padding-right: 0;
}
.hero__case-item--date {
  flex: 0 0 auto;
}
.hero__case-item--category {
  flex: 0 1 max-content;
  min-width: 0;
}

.hero__case-label {
  font-family: var(--font-en);
  font-size: var(--fs-sm);
  font-weight: 700;
  display: block;
  margin-bottom: var(--sp-2xs);
}

.hero__case-value {
  font-family: var(--font-jp);
  font-size: var(--hero-fs-case);
  font-weight: 800;
  line-height: var(--lh-heading);
  overflow-wrap: anywhere;
}
.hero__case-item--date .hero__case-value {
  font-family: var(--font-en);
  white-space: nowrap;
}

.hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-xs);
}

.hero__view {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 0 0 auto;
  gap: var(--sp-xs);
}
/* 縦フレックス内で flex:1 すると矢印が白帯になるため固定幅にする */
.hero__view .arrow {
  flex: none;
  width: 8rem;
  min-width: 8rem;
  height: 1px;
  margin-top: 0;
  align-self: flex-start;
}

.hero__banners {
  width: min(56rem, 44vw);
  flex-shrink: 0;
}
.hero__banners .cta-banners { gap: var(--hero-banner-gap); }
.hero__banners .cta-banners__row { gap: var(--hero-banner-gap); }
.hero__banners .cta-banner { min-height: var(--hero-banner-row-min); }

/* ノートPCなど、フルHDより明らかに低い画面だけ圧縮する */
@media (max-height: 780px) and (min-width: 641px) {
  .hero {
    --hero-fs-title: clamp(4.4rem, min(5.6vw, 7.4svh), 7.2rem);
    --hero-pad-top: 6.4rem;
    --hero-pad-bottom: 1.6rem;
    --hero-dots-gap: 1.2rem;
    --hero-gap-copy: 1rem;
    --hero-case-gap: 0.8rem;
    --hero-banner-row-min: 6.4rem;
    --hero-banner-gap: 0.8rem;
  }
}

/* スライダードット（原案よりも小さく調整） */
.hero__dots {
  position: absolute;
  bottom: var(--hero-pad-bottom);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: var(--sp-sm);
}

.hero__dot {
  width: 0.9rem;
  height: 0.9rem;
  border: 1px solid #fff;
  border-radius: 2px;
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition: background 0.3s;
}
.hero__dot.is-active { background: #fff; }

/* ============ 下層共通：ページヒーロー ============ */
.page-hero {
  --band-overlay: rgba(30, 28, 25, 0.45);
  min-height: 23rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: var(--sp-md);
}

.page-hero .container {
  /* 本文 .container と同じく中央寄せ（写真は全面のまま） */
  margin-inline: auto;
}

.page-hero__title {
  font-family: var(--font-en);
  font-weight: 800;
  font-size: var(--fs-h1);
  line-height: var(--lh-flat);
}

.page-hero__sub {
  font-size: var(--fs-sm);
  font-weight: 700;
  border-left: 2px solid #fff;
  padding-left: var(--sp-sm);
  margin-top: var(--sp-2xs);
  width: fit-content;
}

/* ============ ベン図（--outline＝TEAM連携図 / --filled＝ABOUT歩み）
   例外: 円の寸法・配置は%幾何（レスポンシブ維持のため） ============ */
.venn {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  margin-inline: auto;
}
.venn--outline { max-width: 46rem; }
.venn--filled  { max-width: 40rem; }

/* 外周リング（filledのみ） */
.venn--filled::before {
  content: "";
  position: absolute;
  inset: -4%;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
}

.venn__c {
  position: absolute;
  aspect-ratio: 1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.venn--outline .venn__c {
  width: 55%;
  border: 1px solid rgba(255, 255, 255, 0.9);
  font-size: var(--fs-h3);
  letter-spacing: 0.08em;
}
.venn--filled .venn__c {
  width: 48%;
  background: rgba(235, 233, 230, 0.55);
  color: #333;
  font-size: var(--fs-md);
  font-weight: 700;
}

/* TEAM：円の配置とラベル位置の微調整 */
.venn__c--sales  { top: 2%;  left: 41%; }
.venn__c--design { top: 27%; left: 0; }
.venn__c--site   { top: 46%; left: 34%; }
.venn__c--sales span  { transform: translate(12%, -12%); }
.venn__c--design span { transform: translate(-14%, 0); }
.venn__c--site span   { transform: translate(10%, 22%); }

/* ABOUT：円の配置とラベル位置の微調整 */
.venn__c--work    { top: 8%;  left: 26%; }
.venn__c--culture { top: 40%; left: 8%; }
.venn__c--value   { top: 40%; left: 44%; }
.venn__c--work span    { transform: translateY(-30%); }
.venn__c--culture span { transform: translate(-22%, 20%); }
.venn__c--value span   { transform: translate(22%, 20%); }

.venn__label {
  position: absolute;
  right: -2%;
  bottom: 2%;
  font-size: var(--fs-h2);
  font-weight: 900;
}

/* ============ 導入ヒーロー（TEAM / RECRUIT 共通） ============ */
.intro-hero { position: relative; }

.intro-hero__photo {
  min-height: clamp(32rem, calc(38vw * var(--scale)), 48rem);
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}

.intro-hero--team .intro-hero__photo {
  --band-img: url("https://images.unsplash.com/photo-1522071820081-009f0129c71c?auto=format&fit=crop&w=1800&q=60");
  --band-overlay: rgba(40, 35, 28, 0.35);
}

.intro-hero--recruit .intro-hero__photo {
  --band-img: url("https://images.unsplash.com/photo-1497215728101-856f4ea42174?auto=format&fit=crop&w=1800&q=60");
  --band-overlay: rgba(20, 18, 15, 0.35);
}

.intro-hero__en {
  font-family: var(--font-en);
  font-weight: 800;
  font-size: var(--fs-h1);
  line-height: var(--lh-flat);
  text-align: right;
  color: rgba(255, 255, 255, 0.45);
  padding: var(--gap-col) 0;
  margin-inline-end: var(--content-inset);
}

.intro-hero__box {
  position: absolute;
  left: var(--content-inset);
  bottom: var(--sp-xl);
  width: min(52rem, var(--container));
}

/* ============ TEAM ============ */
/* 3つの専門領域 */
.team-fields {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-col);
}

.team-fields__circle {
  width: min(72%, 24rem); /* 例外: 図形サイズ */
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-h2);
  font-weight: 500;
  letter-spacing: 0.1em;
  margin: 0 auto var(--sp-block);
}

.team-fields__text {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  text-align: justify;
}

/* チームで支える：白ピルの列 */
.team-points {
  display: grid;
  gap: var(--sp-xs);
  margin-top: var(--sp-lg);
  justify-items: start;
}

/* 一貫体制バンド */
.team-band {
  --band-img: url("https://images.unsplash.com/photo-1556761175-b413da4baf72?auto=format&fit=crop&w=1800&q=60");
  padding: var(--sp-band) 0;
}

.team-band .section-heading { margin-bottom: var(--sp-lg); }
.team-band p { max-width: 78rem; }

/* ============ ABOUT ============ */
.about-philosophy {
  --band-img: url("https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?auto=format&fit=crop&w=1800&q=60");
  --band-overlay: rgba(120, 60, 20, 0.25);
  padding: var(--sp-band) 0;
}

.about-philosophy__inner { max-width: 62rem; }

.about-philosophy__inner p {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  margin-bottom: 1.2em;
}

/* 会社概要テーブル */
.company-table__row {
  display: grid;
  grid-template-columns: 17rem 1fr;
  gap: 0 var(--sp-lg);
  padding: var(--sp-sm) 0;
}

.company-table dt {
  font-size: var(--fs-sm);
  font-weight: 700;
}

.company-table dd {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  border-left: 1px solid var(--c-line);
  padding-left: var(--sp-lg);
}

/* 我が信条：PCは四角枠＋左右余白。SPは上下のみ
   本文は内容幅で中央寄せ（見出し左端＝「一、」、右端＝日付） */
.creed {
  padding: var(--sp-xl) var(--sp-block);
  border: 1px solid var(--c-line);
}

.creed__body {
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
}

.creed .section-heading {
  text-align: left;
  margin-bottom: var(--sp-xl);
}

.creed__en {
  display: inline-block;
  font-family: var(--font-en);
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-left: 0.35em;
}

.creed__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.creed__list li {
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  text-align: left;
}

.creed__list li + li {
  margin-top: var(--sp-lg);
}

.creed__sign {
  margin-top: var(--sp-xl);
  text-align: right;
}

.creed__date,
.creed__by {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}

.creed__date {
  margin-bottom: var(--sp-xs);
}

/* できること */
.about-services__lead {
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  margin: calc(-1 * var(--sp-md)) 0 var(--sp-xl);
}

.services {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-col);
  align-items: start;
}

.services__note {
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-lg);
}

.services__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-lg) var(--sp-md);
}

.services__item--wide { grid-column: 1 / -1; }

.services__desc {
  font-size: var(--fs-xs);
  line-height: var(--lh-base);
  margin-top: var(--sp-xs);
}

/* 知見共有・HOCOLABバンド */
.about-band {
  padding: var(--sp-block);
  margin-bottom: var(--sp-block);
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--gap-col);
  align-items: center;
  --band-img: url("https://images.unsplash.com/photo-1504384308090-c894fdcc538d?auto=format&fit=crop&w=1800&q=60");
}
.about-band--lab {
  --band-img: url("https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&w=1800&q=60");
  --band-overlay: rgba(20, 18, 15, 0.6);
}

.about-band__lead {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--sp-md);
}

.about-band__list { display: grid; gap: var(--sp-xs); justify-items: start; }
.about-band__list li {
  font-size: var(--fs-sm);
  font-weight: 700;
}
.about-band__list li::before { content: "■ "; }

.about-band__media {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-md);
}

.sns-row { display: flex; align-items: center; gap: var(--sp-lg); }

.sns-insta { width: 5.6rem; height: 5.6rem; }
.sns-insta svg { width: 100%; height: 100%; }

.sns-note {
  background: #000;
  color: #fff;
  font-family: var(--font-en);
  font-weight: 800;
  font-size: 3rem; /* 例外: ロゴ的表現 */
  padding: var(--sp-xs) var(--sp-lg);
  letter-spacing: 0.02em;
}

.about-band__caption { font-size: var(--fs-xs); font-weight: 700; }

.about-band__visual { position: relative; }

.about-band__visual img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.about-band__visual .cta-banner {
  position: absolute;
  right: var(--sp-sm);
  bottom: var(--sp-sm);
  min-height: 5.6rem;
  width: min(24rem, 70%);
  font-size: var(--fs-sm);
}

/* ============ カテゴリフィルター（WORKS / NEWS 共通） ============ */
.filter-pills,
.works-filter,
.news-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-sm);
  margin-bottom: var(--sp-block);
}

.filter-pills__pill,
.works-filter__pill,
.news-filter__pill {
  font-family: var(--font-en);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: #fff;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 999px;
  padding: var(--sp-2xs) var(--sp-lg);
  cursor: pointer;
  transition: background 0.25s, color 0.25s;
  text-decoration: none;
  display: inline-block;
  line-height: 1.4;
}
.filter-pills__pill.is-active,
.filter-pills__pill:hover,
.works-filter__pill.is-active,
.works-filter__pill:hover,
.news-filter__pill.is-active,
.news-filter__pill:hover {
  background: #fff;
  color: #444;
}

.works-filter--grouped {
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
  margin-bottom: var(--sp-block);
}

.works-filter__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--sp-sm) var(--sp-md);
}

.works-filter__label {
  flex: 0 0 auto;
  min-width: 5.5rem;
  margin: 0;
  padding-top: 0.35rem;
  font-family: var(--font-en);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}

.works-filter__pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-sm);
  flex: 1 1 12rem;
}

@media (max-width: 640px) {
  .works-filter__row {
    flex-direction: column;
    gap: var(--sp-xs);
  }

  .works-filter__label {
    padding-top: 0;
  }
}

/* ============ WORKS 一覧 ============ */

.works-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-col) var(--sp-lg);
}

.work-card__photo {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  margin-bottom: var(--sp-md);
  transition: opacity 0.3s;
}
.work-card:hover .work-card__photo { opacity: 0.8; }

.work-card__name {
  font-family: var(--font-en);
  font-size: var(--fs-lg);
  font-weight: 800;
  line-height: var(--lh-heading);
  margin-bottom: var(--sp-xs);
}

.work-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-xs);
  margin-bottom: var(--sp-xs);
}

.work-card__date {
  font-family: var(--font-en);
  font-size: var(--fs-sm);
  font-weight: 700;
}

.work-card.is-hidden { display: none; }

.works-grid__empty {
  grid-column: 1 / -1;
}

/* ============ WORKS ページャー ============ */

.works-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-sm) var(--sp-md);
  margin-top: var(--sp-block);
}

.works-pager__nav,
.works-pager__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding: 0.45rem 1.1rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  border: none;
  border-radius: 4px;
  text-decoration: none;
  transition: background 0.25s, color 0.25s;
  box-sizing: border-box;
}

.works-pager__nav:hover,
.works-pager__num:hover {
  background: #fff;
  color: #444;
}

.works-pager__nav.is-disabled {
  opacity: 0.35;
  pointer-events: none;
}

.works-pager__nums {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-xs);
}

.works-pager__num {
  font-family: var(--font-en);
  font-weight: 700;
  min-width: 2.5rem;
  padding: 0.45rem 0.85rem;
}

.works-pager__num.is-active {
  color: #444;
  background: #fff;
  pointer-events: none;
}

.works-pager__ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--font-en);
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1;
  user-select: none;
}

@media (max-width: 640px) {
  .works-pager {
    flex-direction: column;
  }

  .works-pager__nums {
    order: -1;
  }
}

/* ============ 汎用：見出し用の小さな罫線（WORKS詳細・NEWS詳細で使用）
   例外: 装飾の短い罫線のため固定幅 ============ */
.divider {
  width: 3.2rem;
  height: 1px;
  background: var(--c-line);
  margin-bottom: var(--sp-sm);
}

/* ============ 汎用：ページ内オレンジボタン（RECRUIT系で使用） ============ */
.btn-orange {
  display: inline-block;
  background: var(--c-orange);
  color: #fff;
  font-weight: 700;
  font-size: var(--fs-sm);
  text-align: center;
  border-radius: 999px;
  padding: var(--sp-sm) var(--sp-xl);
  transition: opacity 0.25s;
}
.btn-orange:hover { opacity: 0.85; }

/* 白いページ内ボックス（RECRUIT下層ページの導入見出し共通） */
.page-box {
  background: #fff;
  color: #222;
  padding: var(--sp-lg);
}
.page-box .section-heading--sm { color: #222; }
.page-box p {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}
.page-box p + p { margin-top: 1em; }

/* ============ RECRUIT：三幸ファシリティーズを知る ============ */
.recruit-about-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(20rem, 0.85fr);
  align-items: center;
  gap: var(--sp-xl);
}
.recruit-about-intro__image {
  width: 100%;
  max-width: 36rem;
  justify-self: center;
}

/* ============ WORKS 詳細 ============ */
.works-detail__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--gap-col);
  margin-bottom: var(--sp-block);
}

.works-detail__identity {
  min-width: 0;
  flex: 1;
}

.works-detail__body {
  margin-top: var(--sp-lg);
}

.works-detail__aside {
  flex: 0 1 auto;
  width: min(44rem, 100%);
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.works-detail__name {
  font-family: var(--font-en);
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: var(--lh-heading);
}

.works-detail__name-jp {
  font-size: var(--fs-sm);
  font-weight: 700;
  margin-top: var(--sp-xs);
}

.works-detail__tag-label {
  font-family: var(--font-en);
  font-size: var(--fs-sm);
  font-weight: 700;
  text-align: left;
  margin-bottom: var(--sp-xs);
}

.works-detail__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-xs);
}

.works-detail__catch {
  font-size: var(--fs-h2);
  font-weight: 900;
  margin-bottom: var(--sp-md);
}

.works-detail__lead {
  max-width: none;
  margin-bottom: 0;
}

.works-detail__gallery {
  display: grid;
  gap: var(--sp-lg);
  margin-bottom: var(--sp-block);
}
.works-detail__gallery img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* TAG直下のスペック表（PC・SP共通） */
.works-detail__spec-wrap {
  width: 100%;
  margin: var(--sp-lg) 0 0;
}

.works-detail__actions,
.news-detail__actions,
.form__submit {
  text-align: center;
  margin-top: var(--sp-xl);
}

/* ============ NEWS 一覧・詳細 ============ */
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-col) var(--sp-lg);
}

.news-card.is-hidden { display: none; }

.news-card__photo {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  margin-bottom: var(--sp-md);
  transition: opacity 0.3s;
}
.news-card:hover .news-card__photo { opacity: 0.8; }

.news-card__important {
  color: #d32f2f;
  font-weight: 800;
}

.news-card__title {
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: var(--lh-heading);
  margin-bottom: var(--sp-xs);
}

.news-card__date {
  font-family: var(--font-en);
  font-size: var(--fs-sm);
  font-weight: 700;
  margin-top: var(--sp-xs);
}

.news-detail__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--sp-md);
}

.news-detail__date {
  font-family: var(--font-en);
  font-size: var(--fs-sm);
  font-weight: 700;
}

.news-detail__tag-label {
  font-family: var(--font-en);
  font-size: var(--fs-sm);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
}

.news-detail__title {
  font-size: var(--fs-h2);
  font-weight: 900;
  margin-bottom: var(--sp-md);
}

.news-detail__lead { max-width: 78rem; margin-bottom: var(--sp-lg); }

.news-detail__photo {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* ============ CONTACT / RECRUIT ENTRY：フォーム共通 ============ */
.form { display: grid; gap: var(--sp-lg); }
.form--narrow { max-width: 64rem; margin-inline: auto; }

.form__group { display: grid; gap: var(--sp-xs); }

.form__label { font-size: var(--fs-md); font-weight: 700; }
.form__label--note { font-weight: 400; font-size: var(--fs-sm); }

.form__input,
.form__textarea {
  width: 100%;
  background: #fff;
  color: #222;
  border: 0;
  border-radius: 4px;
  padding: var(--sp-sm) var(--sp-md);
  font-size: var(--fs-sm);
  font-family: var(--font-jp);
}
.form__textarea { min-height: 14rem; resize: vertical; }

.form__checks,
.form__radios {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-lg);
}

.form__check,
.form__radio {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  font-size: var(--fs-sm);
  font-weight: 700;
  cursor: pointer;
}
.form__check input,
.form__radio input {
  width: 1.8rem;  /* 例外: フォーム部品（チェックボックス/ラジオ）固有サイズ */
  height: 1.8rem;
}

.form__upload {
  background: #fff;
  color: #222;
  border-radius: 4px;
  padding: var(--sp-xl);
  text-align: center;
  font-size: var(--fs-sm);
}
.form__upload a { color: var(--c-blue); font-weight: 700; text-decoration: underline; }

.form__note {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}
.form__note a { text-decoration: underline; }

.form__recaptcha {
  width: 30rem; /* 例外: reCAPTCHAダミーの固定幅 */
  height: 7.4rem;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid var(--c-line);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.75);
  text-align: center;
  padding: var(--sp-sm);
}

.form__submit .pill {
  border: 0;
  cursor: pointer;
  font-family: inherit;
  min-width: 16rem;
}

/* ============ PRIVACY POLICY ============ */
.privacy-company {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}

/* ============ RECRUIT ============ */
.recruit-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.6rem, 2.2vw, 2.8rem);
  text-align: center;
}

.recruit-links__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-md);
}

.recruit-links__circle {
  --circle-scale: 0.9;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1;
}
.recruit-links__circle::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(100% * var(--circle-scale));
  height: calc(100% * var(--circle-scale));
  border-radius: 50%;
  background: #9a9a9a;
  transform: translate(-50%, -50%);
  z-index: 0;
}
/* 透過PNG（イラスト）はコンテナ幅いっぱい。円だけ ::before で縮小 */
.recruit-links__circle img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
}

.recruit-links__item .btn-orange {
  display: block;
  width: 100%;
  padding-inline: var(--sp-md);
}

/* RECRUIT：わたしたちの強み */
.strength-list { display: grid; gap: var(--sp-block); }

.strength-item { display: grid; grid-template-columns: auto 1fr; gap: var(--gap-col); align-items: start; }

.strength-item__num {
  font-family: var(--font-en);
  font-weight: 800;
  font-size: var(--fs-display);
  line-height: 1;
  color: rgba(255, 255, 255, 0.35);
}

.strength-item__title { margin-bottom: var(--sp-sm); }

.strength-item__body {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}

/* RECRUIT：わたしたちの強み（数字を本文に重ねる装飾） */
.strength-list--about .strength-item {
  position: relative;
  display: block;
  padding-left: var(--sp-md);
}
.strength-list--about .strength-item__num {
  position: absolute;
  top: -0.12em;
  left: calc(-1 * var(--sp-xl));
  z-index: 0;
  font-size: calc(var(--fs-display) * 1.35);
  color: rgba(255, 255, 255, 0.22);
}
.strength-list--about .strength-item > div {
  position: relative;
  z-index: 1;
}

/* RECRUIT：社員の声 */
.quote-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-col);
}

.quote-box {
  border: 1px solid var(--c-line);
  padding: var(--sp-lg);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}

/* RECRUIT：5つの資質 */
.quality-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-lg);
}

.quality-card {
  border: 1px solid var(--c-line);
  border-radius: 8px; /* 例外: カード装飾の固定角丸 */
  padding: var(--sp-lg);
  text-align: center;
}

.quality-card__title { font-weight: 700; margin-bottom: var(--sp-xs); }
.quality-card__desc { font-size: var(--fs-xs); line-height: var(--lh-base); }
.quality-card__en {
  font-family: var(--font-en);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-top: var(--sp-xs);
  color: rgba(255, 255, 255, 0.7);
}

.quality-card--center {
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: var(--lh-heading);
}

/* RECRUIT：5つの資質（PCは重なり配置、中央メッセージは独立） */
.quality-values {
  position: static;
}
.quality-values__layout {
  position: relative;
  min-height: 50rem;
  display: grid;
  place-items: center;
}
.quality-values__core {
  position: relative;
  z-index: 3;
  width: 34%;
  min-height: 14rem;
  display: grid;
  place-items: center;
  padding: var(--sp-lg) var(--sp-xl);
  background: transparent;
  text-align: center;
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: var(--lh-heading);
  transform: translateY(-2rem);
}
.quality-grid--values {
  position: absolute;
  inset: 0;
  display: block;
}
.quality-grid--values .quality-card {
  position: absolute;
  width: 36%;
  min-height: 18rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-inline: 4rem;
  border-radius: 2.8rem;
  background: rgba(255, 255, 255, 0.02);
}
.quality-grid--values .quality-card:nth-child(1) { top: 0; left: 31%; }
.quality-grid--values .quality-card:nth-child(2) { top: 22%; left: 0; }
.quality-grid--values .quality-card:nth-child(3) { bottom: 8%; left: 18%; width: 34%; }
.quality-grid--values .quality-card:nth-child(4) { right: 15%; bottom: 0; width: 34%; }
.quality-grid--values .quality-card:nth-child(5) { top: 31%; right: 0; }

@media (max-width: 960px) {
  .quality-values {
    position: static;
  }
  .quality-values__layout {
    min-height: 0;
    display: block;
  }
  .quality-values__core {
    width: auto;
    min-height: 0;
    display: block;
    padding: 0;
    background: transparent;
    margin-bottom: var(--sp-block);
    transform: none;
  }
  .quality-grid--values {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-lg);
  }
  .quality-grid--values .quality-card {
    position: static;
    width: auto;
    min-height: 0;
    border-radius: 1.6rem;
  }
}

/* RECRUIT：わたしたちはこんな会社です */
.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-col) var(--sp-lg);
}
.info-grid--about {
  gap: var(--sp-section) var(--gap-col-lg);
}
.info-grid--about .section-heading--sm {
  margin-bottom: var(--sp-md);
  padding-bottom: var(--sp-xs);
  border-bottom: 1px solid var(--c-line);
}
.info-grid--about .about-band__list {
  gap: var(--sp-2xs);
}
.info-grid--about .about-band__list li {
  position: relative;
  padding-left: 1.3em;
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
}
.info-grid--about .about-band__list li::before {
  content: "•";
  position: absolute;
  left: 0;
}

/* RECRUIT：求める人物像 */
.candidate-profile__layout {
  display: grid;
  grid-template-columns: minmax(22rem, 0.7fr) var(--gap-col-lg) minmax(0, 2fr);
  align-items: center;
}
.candidate-profile__lead {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 16rem;
  padding: var(--sp-md);
  border: 1px solid var(--c-line);
  background: rgba(255, 255, 255, 0.04);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: var(--lh-heading);
  white-space: nowrap;
}
.candidate-profile__connector {
  position: absolute;
  top: 50%;
  left: 0;
  width: 300%;
  border-top: 1px solid var(--c-line);
  transform-origin: left center;
}
.candidate-profile__connections {
  position: relative;
  align-self: stretch;
  overflow: hidden;
}
.candidate-profile__list {
  display: grid;
  gap: var(--sp-sm);
}
.candidate-profile__connector--h { transform: rotate(-69deg); }
.candidate-profile__connector--a { transform: rotate(-53deg); }
.candidate-profile__connector--p1 { transform: rotate(0); }
.candidate-profile__connector--p2 { transform: rotate(53deg); }
.candidate-profile__connector--y { transform: rotate(69deg); }
.candidate-profile__item {
  display: grid;
  grid-template-columns: 5.6rem minmax(14rem, 0.8fr) 1.4fr;
  gap: var(--sp-md);
  align-items: center;
  min-height: 8.8rem;
  padding: var(--sp-sm) var(--sp-lg);
  border: 1px solid var(--c-line);
  background: rgba(255, 255, 255, 0.04);
}
.candidate-profile__letter {
  display: grid;
  place-items: center;
  width: 4.8rem;
  height: 4.8rem;
  border: 1px solid var(--c-line);
  border-radius: 50%;
  font-size: var(--fs-h2);
  font-weight: 700;
}
.candidate-profile__item h3 {
  margin-top: var(--sp-2xs);
  font-size: var(--fs-sm);
  line-height: var(--lh-heading);
}
.candidate-profile__en {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: var(--lh-heading);
  letter-spacing: 0.04em;
}
.candidate-profile__item > p:last-child {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}

.recruit-cta {
  display: flex;
  justify-content: center;
  gap: var(--sp-lg);
  flex-wrap: wrap;
}

/* ============ RECRUIT：仕事を知る ============ */
.job-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--gap-col-lg);
  align-items: center;
}
.job-intro__copy > p + p { margin-top: var(--sp-sm); }
.job-intro__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.job-box {
  border: 1px solid var(--c-line);
  padding: var(--sp-lg);
}
.job-box ul { display: grid; gap: var(--sp-2xs); }
.job-box li {
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
}
.job-box li::before { content: "・"; }

.job-block {
  border-top: 1px solid var(--c-line);
  padding-top: var(--sp-lg);
}
.job-block__body {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}

/* 仕事を知る：職種紹介本文のみ */
.strength-list--job .job-block:first-child {
  border-top: 0;
  padding-top: 0;
}
.strength-list--job .job-block__lead {
  margin-bottom: var(--sp-sm);
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: var(--lh-relaxed);
}
.strength-list--job .job-block__body + .job-block__body {
  margin-top: var(--sp-sm);
}

.job-timeline { display: grid; gap: var(--sp-lg); }

.job-timeline__item {
  display: grid;
  grid-template-columns: 12rem 1fr;
  gap: var(--gap-col);
  border-top: 1px solid var(--c-line);
  padding-top: var(--sp-md);
}

.job-timeline__time {
  font-family: var(--font-en);
  font-weight: 800;
  font-size: var(--fs-h3);
}

.job-timeline__body h4 { font-weight: 700; margin-bottom: var(--sp-xs); }
.job-timeline__body ul { display: grid; gap: var(--sp-2xs); }
.job-timeline__body li {
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
}
.job-timeline__body li::before { content: "・"; }

/* 仕事を知る：一日の流れのみ */
.job-timeline--vertical {
  gap: var(--sp-lg);
  padding-left: var(--sp-lg);
  border-left: 0.45rem solid transparent;
  border-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.32)) 1;
}
.job-timeline--vertical .job-timeline__item {
  grid-template-columns: 1fr;
  gap: var(--sp-2xs);
  padding-top: 0;
  border-top: 0;
}
.job-timeline--vertical .job-timeline__body p {
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
}

/* 仕事を知る：募集要項のみ */
.company-table--job .company-table__row {
  gap: 0;
  padding: 0;
  color: #333;
  border-bottom: 1px solid #fff;
}
.company-table--job dt,
.company-table--job dd {
  padding: var(--sp-sm) var(--sp-md);
  font-size: var(--fs-md);
}
.company-table--job dt {
  display: flex;
  align-items: center;
  background: #a6a6a6;
}
.company-table--job dd {
  background: #d1d1d1;
  border-left: 1px solid #fff;
}

.job-links {
  display: flex;
  justify-content: center;
  gap: calc(var(--gap-col) / 2);
  text-align: center;
}
.job-links__item { display: block; }
.job-links__circle {
  width: min(90%, 24rem);
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto var(--sp-sm);
}
.job-links__label { font-size: var(--fs-sm); font-weight: 700; }

/* ============ アニメーション ============
   方針: 効果はフェード＋わずかな上昇のみに統一。
   stagger（時差表示）で目線を読み順（左上→右下）に誘導する。
   時差の付与は main.js（コンテナ単位で90ms刻み・上限540ms） */
.fade-in {
  opacity: 0;
  transform: translateY(1.6rem);
  transition: opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* TOPヒーロー初回シーケンス: タイトル→コピー→情報バー→ドット */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(1.6rem); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade-soft {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.hero__title,
.hero__copy,
.hero__bottom {
  animation: rise-in 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.hero__copy   { animation-delay: 0.18s; }
.hero__bottom { animation-delay: 0.4s; }
.hero__dots   { animation: fade-soft 0.8s ease 0.65s both; } /* 例外: translateX(-50%)保持のためopacityのみ */

/* フルスクリーンメニュー: ナビ項目のstagger（遅延は JS で件数に応じて付与） */
.menu-overlay__nav li {
  opacity: 0;
  transform: translateY(1.2rem);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.menu-overlay.is-open .menu-overlay__nav li {
  opacity: 1;
  transform: translateY(0);
}

/* 動きの抑制設定を尊重:
   移動（translate）のみ無効化し、フェードは残す折衷。
   ※Windowsの「アニメーション効果」オフでもこのメディア特性が有効になる */
@media (prefers-reduced-motion: reduce) {
  .fade-in,
  .menu-overlay__nav li { transform: none; }
  .hero__title, .hero__copy, .hero__bottom { animation-name: fade-soft; }
}

/* ============ レスポンシブ ============ */
@media (max-width: 900px) {
  .hero__bottom {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-xl);
  }
  .hero__banners { width: 100%; }
  .hero__case { max-width: 100%; }

  .site-footer__main { grid-template-columns: 1fr; }

  .split { grid-template-columns: 1fr; }
  .about-band { grid-template-columns: 1fr; }
  .works-grid { grid-template-columns: repeat(2, 1fr); }
  .news-grid { grid-template-columns: repeat(2, 1fr); }

  .works-detail__head { flex-direction: column; }
  .works-detail__aside { width: 100%; }

  .recruit-links {
    grid-template-columns: 1fr;
    gap: var(--sp-xl);
  }
  .recruit-links__circle { width: min(72%, 32rem); }
  .recruit-links__item .btn-orange { width: min(88%, 36rem); }
  .quote-grid { grid-template-columns: 1fr; }
  .quality-grid { grid-template-columns: repeat(2, 1fr); }
  .info-grid { grid-template-columns: 1fr; }
  .candidate-profile__layout { grid-template-columns: 1fr; gap: var(--sp-block); }
  .candidate-profile__connections { display: none; }
  .job-intro { grid-template-columns: 1fr; }
  .strength-item { grid-template-columns: 1fr; }
  .job-timeline__item { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  /* ルートvw化によりサイズは自動で比例縮小。
     ここではレイアウト構造の変更のみ行う */
  :root { --hero-gutter: var(--sp-md); }
  .site-header__logo { padding: var(--sp-md); }

  .hero {
    justify-content: flex-end;
    padding-bottom: calc(var(--sp-band) + var(--hero-dots-gap) + 0.9rem);
  }
  /*
   * SPヒーロー余白の意図:
   * 1 キャッチ / 2 Case Studyラベル / 3 名称 / 4 ボタン群
   * 距離: 2–3（同一ブロック） < 1–2（Heroに紐づく） < 3–4（他導線）
   */
  .hero__inner {
    justify-content: flex-end;
    padding-top: 8rem;
    padding-bottom: 0;
  }
  .hero__copy {
    font-size: var(--fs-lg);
    margin-top: var(--sp-md);
  }
  .hero__bottom {
    margin-top: var(--sp-sm); /* 1→2 */
    gap: var(--sp-xl);        /* 3→4 */
  }
  .hero__case {
    gap: 0;
    max-width: 100%;
  }
  .hero__case-main .hero__case-label {
    margin-bottom: 0.15em; /* 2→3：ラベルと名称は一体 */
  }
  .hero__case-meta,
  .hero__view { display: none; } /* SP：名称のみ表示 */

  .cta-banners__row { grid-template-columns: 1fr 1.3fr; gap: var(--sp-xs); }
  .cta-banner { min-height: 6.4rem; font-size: var(--fs-sm); }

  .menu-close { width: 4.8rem; height: 4.8rem; font-size: 1.8rem; }

  .watermark {
    left: 0.82em;
    font-size: 3rem;
  } /* 例外: 装飾 */

  .intro-hero__box {
    position: static;
    width: calc(100% - 3.2rem);
    margin: -4.8rem auto 0;
    left: auto;
  }
  .intro-hero__en {
    margin-inline-end: max(var(--content-inset), var(--sp-md));
  }
  .intro-hero__photo { min-height: 30rem; }

  .team-fields { grid-template-columns: 1fr; gap: var(--sp-block); }
  .team-fields__circle { width: min(64%, 22rem); }

  .venn--outline { max-width: 34rem; }
  .venn--filled  { max-width: 32rem; }

  .company-table__row {
    grid-template-columns: 1fr;
    gap: var(--sp-2xs);
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  }
  .company-table dd { border-left: 0; padding-left: 0; }
  .company-table--job .company-table__row { grid-template-columns: 1fr; gap: 0; }
  .company-table--job dd {
    padding-left: var(--sp-md);
    border-top: 1px solid #fff;
    border-left: 0;
  }

  .recruit-about-intro {
    grid-template-columns: 1fr;
    gap: var(--sp-md);
  }
  .recruit-about-intro__image { width: min(78%, 28rem); }
  .strength-list--about .strength-item__num { left: 0; }

  .creed {
    padding-left: 0;
    padding-right: 0;
    border-left: 0;
    border-right: 0;
  }

  .services { grid-template-columns: 1fr; }

  .works-grid { grid-template-columns: 1fr; }
  .news-grid { grid-template-columns: 1fr; }

  .quality-grid { grid-template-columns: 1fr; }
  .quality-values__core {
    text-align: left;
    font-size: var(--fs-lg);
  }
  .quality-grid--values .quality-card {
    min-height: 14rem;
    border-radius: 1.6rem;
  }
  .candidate-profile__lead { font-size: var(--fs-h2); white-space: normal; }
  .candidate-profile__item {
    grid-template-columns: 4.8rem 1fr;
    gap: var(--sp-sm);
    min-height: 0;
    padding: var(--sp-md);
  }
  .candidate-profile__letter {
    width: 4rem;
    height: 4rem;
    font-size: var(--fs-lg);
  }
  .candidate-profile__item > p:last-child { grid-column: 1 / -1; }
  .job-links { flex-direction: column; align-items: center; gap: var(--sp-lg); }
  .works-detail__gallery { gap: var(--sp-md); }
}


/* ============ Fluent Forms 見た目合わせ ============
   静的デザイン（.form__* ）にプラグイン生成HTMLを寄せる */
.sanko-fluentform .frm-fluent-form { color: inherit; }

.sanko-fluentform .ff-el-group {
  margin-bottom: var(--sp-lg);
}

.sanko-fluentform .ff-el-input--label label {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: #fff;
  margin-bottom: var(--sp-xs);
}
.sanko-fluentform .ff-el-is-required.asterisk-right label:after,
.sanko-fluentform .ff-el-is-required.asterisk-left label:before {
  color: #fff;
  font-weight: 400;
}

.sanko-fluentform input[type="text"],
.sanko-fluentform input[type="email"],
.sanko-fluentform input[type="tel"],
.sanko-fluentform input[type="url"],
.sanko-fluentform input[type="number"],
.sanko-fluentform input[type="date"],
.sanko-fluentform textarea,
.sanko-fluentform select {
  width: 100%;
  background: #fff;
  color: #222;
  border: 0;
  border-radius: 4px;
  padding: var(--sp-sm) var(--sp-md);
  font-size: var(--fs-sm);
  font-family: var(--font-jp);
  box-shadow: none;
}
.sanko-fluentform textarea { min-height: 14rem; resize: vertical; }
.sanko-fluentform input::placeholder,
.sanko-fluentform textarea::placeholder { color: #9a9a9a; }

/* チェックボックス・ラジオ：横並び＋白ラベル */
.sanko-fluentform .ff-el-group.ff_list_inline .ff-el-form-check,
.sanko-fluentform .ff-el-form-check {
  display: inline-flex;
  align-items: center;
  margin: 0 var(--sp-lg) var(--sp-xs) 0;
}
.sanko-fluentform .ff-el-form-check-label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-xs);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 700;
  cursor: pointer;
  margin: 0;
}
.sanko-fluentform input[type="checkbox"],
.sanko-fluentform input[type="radio"] {
  width: 1.8rem;  /* 例外: フォーム部品固有サイズ */
  height: 1.8rem;
  margin: 0;
  accent-color: var(--c-blue);
  flex: none;
}

/* ファイルアップロード：.form__upload と同じ白ドロップゾーン */
.sanko-fluentform .ff_file_upload_holder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  background: #fff;
  border-radius: 4px;
  padding: var(--sp-xl);
  text-align: center;
  cursor: pointer;
  margin: 0;
}
.sanko-fluentform .ff_upload_btn.ff-btn {
  display: inline;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0;
  font-size: 0;
  line-height: 1.6;
  color: transparent;
  cursor: pointer;
}
.sanko-fluentform .ff_upload_btn.ff-btn::before {
  content: "ファイル添付";
  font-size: var(--fs-sm);
  font-weight: 700;
  font-family: var(--font-jp);
  color: var(--c-blue);
  text-decoration: underline;
}
.sanko-fluentform .ff_upload_btn.ff-btn::after {
  content: " またはここにファイルをドロップ";
  font-size: var(--fs-sm);
  font-weight: 400;
  font-family: var(--font-jp);
  color: #666;
  text-decoration: none;
}
.sanko-fluentform .ff-uploaded-list {
  margin-top: var(--sp-md);
}
.sanko-fluentform .ff-upload-preview {
  background: #fff;
  border: 0;
  border-radius: 4px;
  color: #222;
  padding: var(--sp-sm) var(--sp-md);
}

/* 送信ボタン：白ピル・中央寄せ（.pill と同じ見た目） */
.sanko-fluentform .ff-el-group.ff-text-left,
.sanko-fluentform .ff_submit_btn_wrapper {
  text-align: center;
  margin-top: var(--sp-xl);
}
/* プラグインが form.fluent_form_N ... の高詳細度で色を出すため上書き */
.sanko-fluentform form .ff-btn-submit:not(.ff_btn_no_style),
.sanko-fluentform .ff-btn-submit,
.sanko-fluentform button[type="submit"] {
  display: inline-block;
  min-width: 16rem;
  background: #fff !important;
  background-color: #fff !important;
  background-image: none !important;
  color: #222 !important;
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 700;
  border: 0 !important;
  border-radius: 4px !important;
  padding: var(--sp-xs) var(--sp-lg);
  box-shadow: none !important;
  cursor: pointer;
}
.sanko-fluentform form .ff-btn-submit:not(.ff_btn_no_style):hover,
.sanko-fluentform form .ff-btn-submit:not(.ff_btn_no_style):focus,
.sanko-fluentform .ff-btn-submit:hover,
.sanko-fluentform button[type="submit"]:hover,
.sanko-fluentform .ff-btn-submit:focus,
.sanko-fluentform button[type="submit"]:focus {
  background: #fff !important;
  background-color: #fff !important;
  color: #222 !important;
  opacity: 0.85;
}

/* テーマ側の注記・エラー・成功メッセージ */
.sanko-fluentform .form__note { margin-bottom: var(--sp-lg); }
.sanko-fluentform .ff-el-form-hint,
.sanko-fluentform .ff-el-help-message {
  color: rgba(255, 255, 255, 0.75);
  font-size: var(--fs-xs);
}
.sanko-fluentform .error-text,
.sanko-fluentform .text-danger { color: #ffd0d0; }
.sanko-fluentform .ff-message-success {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid var(--c-line);
  border-radius: 4px;
  color: #fff;
  padding: var(--sp-lg);
}

/* reCAPTCHA バッジ位置の余白 */
.sanko-fluentform .ff-el-recaptcha { margin-bottom: var(--sp-lg); }