@charset "UTF-8";
/* ==========================================================================
   common.css — レイアウト（l-）と共通コンポーネント（c-）
   参照カンプ：01_top_pc_01（ヘッダー）／01_top_pc_menuopen_01〜04（展開メニュー）／
               01_top_pc_04（フッター）／01_top_sp_*・01_top_sp_menuopen_*（SP）
   ※ 数値はスキャフォールド時点の近似。TOP実装（指示書02）でカンプ実測に合わせて確定する。
   ========================================================================== */

/* --------------------------------------------------------------------------
   l-container
   -------------------------------------------------------------------------- */
.l-container {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--content-pad);
}

/* --------------------------------------------------------------------------
   l-main
   -------------------------------------------------------------------------- */
.l-main {
  display: block; /* 旧ブラウザ互換 */
  padding-block-end: var(--sp-16);
}

/* --------------------------------------------------------------------------
   l-header（カンプ：ロゴ左／PCはインラインナビ＋右端の丸型メニューボタン。
   SPはロゴ＋メニューボタンのみ。展開メニューはPC/SP共通で l-menu）
   -------------------------------------------------------------------------- */
.l-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--c-white);
  transition: background var(--dur) var(--ease);
}

/* スクロール追従時：背景を白75%＋背後をぼかす（js/common.jsが is-fixed を付与） */
.l-header.is-fixed {
  background: rgba(255, 255, 255, 0.75);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* ドロワー展開中は backdrop-filter を無効化。
   is-fixed の backdrop-filter は position:fixed の含みブロックを作り、
   全面ドロワー .l-menu（position:fixed）がビューポートでなくヘッダー内（高さ80px）に
   閉じ込められて画面上部で破綻する。展開中は背後をドロワーが覆うためぼかしは不要。 */
.l-header.is-open {
  background: var(--c-white);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.l-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: 80px;
  padding-inline: var(--content-pad);
}

.l-header__logo-link { display: block; }

.l-header__logo-link img {
  width: 224px;
  height: auto;
}

@media (max-width: 767px) {
  /* SPヘッダー縮小（00_hrader_design_20260727 カンプ・指定h60px）。円ボタン44pxはPCと共通 */
  .l-header__inner { min-height: 60px; }
  .l-header__logo-link img { width: 160px; }
}

.l-header__nav { margin-left: auto; }

.l-header__nav-list {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

/* 直下の a のみ（> a）＝トップレベル項目とメガのトリガー。
   メガパネル内（.l-mega__title / .l-mega__list a）へは波及させない */
.l-header__nav-item > a {
  font-size: .875rem; /* 例外：ナビ実測14px相当（仮）。TOP実装時に確定 */
  font-weight: 700;
  transition: color var(--dur) var(--ease);
}

.l-header__nav-item > a:hover { color: var(--c-nav-underline); } /* ホバー文字色＝下線と同じ #2673BC（指定） */

/* お問い合わせ：初期（最上部）は他メニューと同じ通常リンク。
   ヘッダーがスクロール追従で固定される（is-fixed）と青ボタン化する */
.l-header__nav-item--contact > a {
  display: inline-block;
  padding: 10px 24px; /* 例外：ボタン内余白（固定時のボタンサイズ。非固定でも位置ズレ防止のため確保） */
  border: 1px solid transparent;
  border-radius: 6px;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

/* 固定時＝青ボタン（青背景・白文字）。ホバーで白背景＋青文字＋下線 */
.l-header.is-fixed .l-header__nav-item--contact > a {
  border-color: var(--c-contact);
  background: var(--c-contact);
  color: var(--c-white);
}

.l-header.is-fixed .l-header__nav-item--contact > a:hover {
  background: var(--c-white);
  color: var(--c-contact);
  text-decoration: underline;
  text-underline-offset: 5px;
}

/* --------------------------------------------------------------------------
   ① グローバルナビ：中央から開く下線ホバー（transform: scaleX / origin center）
   お問い合わせ（--contact＝ボタン扱い）は対象外。メガのトリガーは対象。
   -------------------------------------------------------------------------- */
.l-header__nav-item > a {
  position: relative;
  display: inline-block;
}

.l-header__nav-item:not(.l-header__nav-item--contact) > a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 1px;
  background: var(--c-nav-underline);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--dur) var(--ease);
}

.l-header__nav-item:not(.l-header__nav-item--contact) > a:hover::after,
.l-header__nav-item:not(.l-header__nav-item--contact) > a:focus-visible::after {
  transform: scaleX(1);
}

/* --------------------------------------------------------------------------
   ② 「サービス」メガメニュー（PCのみ。SPは既存ドロワーに委譲）
   親liは position:static、パネルはヘッダー幅いっぱいに絞り出す。
   開閉は is-open（common.jsが付与）＋ :hover / :focus-within の併用フォールバック。
   -------------------------------------------------------------------------- */
.l-header__nav-item--mega { position: static; }

.l-mega {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: calc(var(--z-header) - 1); /* ヘッダーバーより下・本文より上 */
  background: var(--c-white);
  border-top: 1px solid var(--c-gray-light);
  box-shadow: 0 12px 20px -12px rgba(0, 0, 0, .15);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              visibility var(--dur) var(--ease);
}

.l-header__nav-item--mega.is-open > .l-mega,
.l-header__nav-item--mega:hover > .l-mega,
.l-header__nav-item--mega:focus-within > .l-mega {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.l-mega__inner {
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: var(--sp-4) var(--sp-6);
  max-width: var(--content-max);
  margin-inline: auto;
  padding: var(--sp-5) var(--content-pad) var(--sp-6);
}

/* 左：見出し＋リード */
.l-mega__title {
  position: relative;
  display: inline-block;
  font-size: 1.25rem; /* 20px：右のリスト項目と統一 */
  font-weight: 700;
  transition: color var(--dur) var(--ease);
}

.l-mega__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 1px;
  background: var(--c-nav-underline);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--dur) var(--ease);
}

.l-mega__title:hover,
.l-mega__title:focus-visible { color: var(--c-nav-underline); }

.l-mega__title:hover::after,
.l-mega__title:focus-visible::after { transform: scaleX(1); }

.l-mega__lead {
  margin-top: var(--sp-2);
  font-size: .875rem;
  line-height: 1.9;
  color: var(--c-gray);
}

/* 右：5項目を2列グリッド。49 §4：列優先（grid-auto-flow: column・3行）＝DOM順 01→05 のまま
   左列に 01・02・03、右列に 04・05 が並ぶ（旧：行優先で 01/02・04/05・03 と番号順に読めなかった） */
.l-mega__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  gap: var(--sp-4) var(--sp-5);
  align-content: start;
}

.l-mega__list a {
  position: relative;
  display: inline-block;
  font-size: 1.25rem; /* 20px */
  font-weight: 700;
  line-height: 1.5;
  transition: color var(--dur) var(--ease);
}

.l-mega__list a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 1px;
  background: var(--c-nav-underline);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--dur) var(--ease);
}

.l-mega__list a:hover,
.l-mega__list a:focus-visible { color: var(--c-nav-underline); }

.l-mega__list a:hover::after,
.l-mega__list a:focus-visible::after { transform: scaleX(1); }

/* SP：メガメニューは出さない（既存の全面ドロワーに委譲） */
@media (max-width: 767px) {
  .l-mega { display: none; }
}

/* 中間幅：グロナビ項目が2行に折り返す帯域では「お問い合わせ」以外を非表示（ナビはドロワーに委譲）。
   1行に収まる下限は実測≈1113〜1118px。上限1119pxはスクロールバー幅の環境差（0〜17px）を含む安全値 */
@media (min-width: 768px) and (max-width: 1119px) {
  .l-header__nav-item:not(.l-header__nav-item--contact) { display: none; }
}

/* モーション配慮 */
@media (prefers-reduced-motion: reduce) {
  .l-header__nav-item > a::after,
  .l-mega,
  .l-mega__title::after,
  .l-mega__list a::after,
  .l-menu__item > a::after,
  .l-menu__sublist a::after { transition: none; }
}

/* 丸型メニューボタン（濃紺円44px＋白い横3本線。00_hrader_design_20260727 カンプ準拠）
   開閉共通のトグル：展開中も同位置のままオーバーレイより手前に残り、白円＋✕に変化する */
.l-header__menu-btn {
  position: relative;
  z-index: calc(var(--z-menu) + 1);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--c-navy);
  transition: background var(--dur) var(--ease);
}

.l-header.is-open .l-header__menu-btn { background: var(--c-white); }

/* 横3本線（PC/SP共通・指定確定：線w20px・太さ1px・線間8px。3本とも同じ長さ） */
.l-header__menu-lines {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.l-header__menu-lines span {
  width: 20px;  /* 例外：線の長さ（指定） */
  height: 1px;
  background: var(--c-white);
}

/* 展開中はドット→×へ切り替え。
   ×は細い2本線で描画（カンプ実測：円44pxに対し22px四方・線幅約1.5px・濃紺）。
   文字グリフ（✕）だと細さ・サイズを制御できないため疑似要素で作る */
.l-header__menu-close {
  display: none;
  position: relative;
  width: 22px;
  height: 22px;
}

.l-header__menu-close::before,
.l-header__menu-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 31px;  /* 22px四方の対角線長 ≒ 22×√2。回転後にちょうど22px四方へ収まる */
  height: 1.5px;
  border-radius: 1px;
  background: var(--c-navy);
}

.l-header__menu-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.l-header__menu-close::after  { transform: translate(-50%, -50%) rotate(-45deg); }

.l-header.is-open .l-header__menu-lines { display: none; }
.l-header.is-open .l-header__menu-close { display: block; }

/* --------------------------------------------------------------------------
   l-menu（グロナビ展開オーバーレイ。menuopenカンプ準拠：
   PC=左に写真パネル＋右にネイビーパネル／SP=全面ネイビー）
   is-open は l-header に付与（js/common.js）
   -------------------------------------------------------------------------- */
.l-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  display: flex;
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--dur) var(--ease), visibility 0s var(--dur);
}

.l-header.is-open .l-menu {
  visibility: visible;
  opacity: 1;
  transition: opacity var(--dur) var(--ease);
}

/* 左パネル 重ね順（下→上）：最下層BG #F1EFF8 → 写真(上寄せ・幅フィット/切り抜きなし) →
   #073459 30%オーバーレイ(全面) → 白コピー(#fff・最前面)。
   カンプ 01_top_pc_menuopen_01 実測（左ブロック幅≒42%／文字ストロークは純白=オーバーレイより前面／
   写真は幅100%・上寄せで下にBGが覗く） */
.l-menu__media {
  position: relative;
  flex: 0 0 42%;
  /* 写真を上寄せ・幅100%（cover切り抜きせず全体を表示）。その下＆背後に BG #F1EFF8 */
  background: url(../images/common/common-01-drawer.jpg) top center / 100% auto no-repeat, var(--c-bg-tint);
  overflow: hidden;
}

.l-menu__media::after { /* #073459 を30%で全面オーバーレイ（写真・BGの上／コピーの下） */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(7, 52, 89, .3);
  pointer-events: none;
}

.l-menu__catch { /* 白コピー：オーバーレイより前面＝クッキリ純白（カンプ準拠） */
  position: absolute;
  left: clamp(24px, 2.8vw, 40px);
  bottom: 26%;
  z-index: 2;
  color: var(--c-white);
  font-family: var(--font-en); /* Cabin（SemiBold相当・Boldグループ外） */
  font-weight: 600;
  font-size: clamp(1.85rem, 3.7vw, 3.25rem);
  line-height: 1.35;
  letter-spacing: 0;
}

.l-menu__catch span { display: block; }

.l-menu__body {
  position: relative;
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--sp-12) var(--sp-8) var(--sp-8);
  background: var(--c-contact-blue); /* 右側パネル背景＝#15668C（指定） */
  color: var(--c-white);
}

.l-menu__list { max-width: 480px; }

.l-menu__item > a {
  position: relative;
  display: block;
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--c-gray);
  font-size: var(--fs-lg);
  font-weight: 700;
  transition: color var(--dur) var(--ease);
}

/* ホバー：文字色＋中央から開く下線（グローバルナビ同様）。色は #9BC9E0 */
.l-menu__item > a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px; /* 区切り線の位置に重ねる */
  width: 100%;
  height: 1px;
  background: var(--c-drawer-hover);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--dur) var(--ease);
}

.l-menu__item > a:hover,
.l-menu__item > a:focus-visible { color: var(--c-drawer-hover); }

.l-menu__item > a:hover::after,
.l-menu__item > a:focus-visible::after { transform: scaleX(1); }

/* ドロワー内お問い合わせ＝追従ボタンと同一コンポーネント c-cta-btn（39・FN 8/27）。
   項目リンクの既定（block・下罫線・下線/文字色ホバー）を打ち消し、c-cta-btn 本来の見た目・挙動（opacityホバー）に戻す */
.l-menu__item--cta { margin-top: var(--sp-4); }
.l-menu__item--cta > a {
  display: flex;
  padding: var(--sp-1) var(--sp-2);
  border-bottom: 0;
  font-size: var(--fs-base);
}
.l-menu__item--cta > a::after { content: none; }
.l-menu__item--cta > a:hover,
.l-menu__item--cta > a:focus-visible { color: var(--c-white); }

.l-menu__sublist { padding: var(--sp-2) 0 var(--sp-2) var(--sp-2); }

.l-menu__sublist a {
  position: relative;
  display: block;
  padding: var(--sp-1) 0;
  font-size: .875rem; /* 例外：小項目実測14px相当（仮） */
  transition: color var(--dur) var(--ease);
}

.l-menu__sublist a::before { content: "・"; }

.l-menu__sublist a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--c-drawer-hover);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--dur) var(--ease);
}

.l-menu__sublist a:hover,
.l-menu__sublist a:focus-visible { color: var(--c-drawer-hover); }

.l-menu__sublist a:hover::after,
.l-menu__sublist a:focus-visible::after { transform: scaleX(1); }

@media (max-width: 767px) {
  /* 下＝追従お問い合わせボタン（48px）＋下余白ぶんを確保し、メニュー末尾がボタンに隠れないようにする */
  .l-menu__body { padding: var(--sp-12) var(--content-pad) 96px; }

  /* ドロワー内のお問い合わせボタンは廃止し、ページ下部の追従ボタンへ一本化（Hiroshi提案）。
     ただし追従ボタンを出力していないページ（recruit / contact＝footer.php で出し分け）では
     ドロワー側が唯一の導線になるため残す。 */
  body:has(.js-cta-float) .l-menu__item--cta { display: none; }

}

/* --------------------------------------------------------------------------
   l-footer（カンプ01_top_pc_04準拠：青灰色背景／白カード（ロゴ＋住所）／
   罫線付き4カラムナビ／タグライン＋コピーライト＋お問い合わせボタン）
   -------------------------------------------------------------------------- */
.l-footer {
  padding-block: var(--sp-8);
  background: var(--c-blue-gray);
  color: var(--c-white);
}

.l-footer__upper {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-16); /* カンプ実測：白カードとナビの間隔は広め（ナビ開始x≒523） */
}

.l-footer__info {
  flex-shrink: 0;
  padding: var(--sp-4);
  border-radius: 8px;
  background: var(--c-white);
  color: var(--c-text);
}

.l-footer__logo a { display: inline-block; }

.l-footer__logo img {
  width: 188px;
  height: auto;
}

.l-footer__address {
  margin-top: var(--sp-2);
  font-size: .875rem; /* 例外：住所実測14px相当（仮） */
  line-height: 1.7;
}

.l-footer__nav {
  display: grid;
  flex: 1;
  /* カンプ実測：サービス列（サブリスト有）が最も広く、支援実績/お客様の声の右2列は右寄せ気味 */
  grid-template-columns: 2fr 3.8fr 1.7fr 2.3fr;
  gap: var(--sp-4);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-gray-light);
}

.l-footer__col > li { margin-bottom: var(--sp-3); }

.l-footer__col > li:not(.l-footer__subitem) > a {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 6px;
  transition: opacity var(--dur) var(--ease);
}

.l-footer__col a:hover { opacity: .7; }

.l-footer__sublist { margin-top: var(--sp-2); }

.l-footer__sublist a,
.l-footer__subitem > a {
  display: block;
  padding: var(--sp-1) 0;
  font-size: .875rem; /* 例外：小項目実測14px相当（仮） */
  font-weight: 400;
  text-decoration: none;
}

.l-footer__sublist a::before,
.l-footer__subitem > a::before { content: "・"; }

.l-footer__lower {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-top: var(--sp-12);
}

.l-footer__tagline {
  font-size: var(--fs-xl);
  font-weight: 700;
}

.l-footer__copyright {
  margin-top: var(--sp-1);
  font-size: .75rem; /* 例外：コピーライト実測12px相当（仮） */
  letter-spacing: 0;
}

@media (max-width: 767px) {
  /* SPは縦積み。PCの広いカード↔ナビ間隔（sp-16）は縦だと空きすぎるので詰める */
  .l-footer__upper { flex-direction: column; gap: var(--sp-6); }

  /* SP修正10：白カードをコンテンツ幅いっぱいに広げ、左右の余白を均等にする */
  .l-footer__info { width: 100%; }

  /* sp_04準拠：区切り線なし。4カラムを display:contents で分解し、
     「特長 → サービス(+小リンク) → 会社情報｜支援実績 → 採用情報 → NEWS → ポリシー」
     の順に2カラムグリッドで再配置（liの特定はHTMLの列構成に依存＝nth-child）
     ※「お客様の声」はSP修正10で削除済み（NEWSを上へ詰める） */
  .l-footer__nav {
    grid-template-columns: 1fr 1fr;
    gap: 0 var(--sp-2);
    width: 100%;
    padding-top: 0;
    border-top: none;
  }

  .l-footer__col { display: contents; }

  .l-footer__col > li { margin-bottom: var(--sp-4); }

  .l-footer__col:nth-child(1) > li:nth-child(1) { order: 1; grid-column: 1 / -1; } /* 私たちの特長 */
  .l-footer__col:nth-child(2) > li:nth-child(1) { order: 2; grid-column: 1 / -1; } /* サービス＋小リンク */
  .l-footer__col:nth-child(1) > li:nth-child(2) { order: 3; } /* 会社情報 */
  .l-footer__col:nth-child(3) > li:nth-child(1) { order: 4; } /* 支援実績 */
  .l-footer__col:nth-child(3) > li:nth-child(2) { order: 5; } /* 採用情報 */
  .l-footer__col:nth-child(4) > li:nth-child(1) { order: 6; } /* NEWS（採用情報の右隣・指示確定） */
  .l-footer__col:nth-child(4) > li:nth-child(2) { order: 7; grid-column: 1 / -1; } /* プライバシーポリシー */

  /* sp_04準拠：ボタン＝センター／タグライン・コピーライトはその下 */
  .l-footer__lower {
    flex-direction: column;
    align-items: center;
    margin-top: var(--sp-6);
  }

  .l-footer__message { order: 1; }

  .l-footer__tagline { font-size: 1.125rem; } /* sp_04実測≒18px */
}

/* --------------------------------------------------------------------------
   c-btn（works-listカンプの「枠＋矢印」を汎用化。矢印形状の詰めは該当ページ実装時）
   -------------------------------------------------------------------------- */
.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-width: 280px;
  min-height: 56px;
  padding: var(--sp-1) var(--sp-4);
  border: 1px solid currentColor;
  font-size: var(--fs-base);
  letter-spacing: 0;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
              color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

/* 汎用ホバー（お問い合わせ等・矢印ボタンの塗り替えは下でoverride） */
.c-btn:hover { opacity: .7; }

/* 塗りつぶし（CONTACTバナーのボタン等）。地色は background-color で指定（左スライド塗りの gradient を潰さない） */
.c-btn--fill {
  background-color: var(--c-text);
  border-color: var(--c-text);
  color: var(--c-white);
}

/* ボタン内メールアイコン（mask方式）。色は --btn-icon-color で指定（既定は文字色に追従＝ホバーで一緒に切替）。
   マスクは dataURI インライン＋白形状：file:// でも読め、alpha/luminance どちらのマスク解釈でも可視。 */
.c-btn__icon {
  width: 28px;
  height: 22px;
  flex-shrink: 0;
  background-color: var(--btn-icon-color, currentColor);
  -webkit-mask: var(--icon-mail) no-repeat center / contain;
          mask: var(--icon-mail) no-repeat center / contain;
  transition: background-color var(--dur) var(--ease);
  --icon-mail: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='28.19'%20height='22.12'%20viewBox='0%200%2028.19%2022.12'%3E%3Cpath%20fill='%23fff'%20d='M28.11,3.15c-.12-.63-.4-1.21-.81-1.71-.08-.1-.17-.2-.27-.29C26.3.41,25.31,0,24.27,0H3.91C2.87,0,1.87.41,1.14,1.15c-.09.09-.18.19-.27.29C.47,1.93.2,2.52.08,3.15.03,3.4,0,3.65,0,3.91v14.3c0,.53.11,1.06.32,1.55.19.45.47.86.82,1.21.09.09.17.17.27.25.7.58,1.58.9,2.49.9h20.36c.91,0,1.8-.32,2.5-.9.09-.08.18-.16.27-.24.35-.35.63-.76.83-1.21h0c.21-.49.32-1.02.32-1.55V3.91c0-.26-.03-.51-.08-.76ZM2.56,2.56c.36-.36.84-.56,1.35-.56h20.37c.6,0,1.16.28,1.52.76l-10.68,9.3c-.59.51-1.47.51-2.06,0L2.39,2.76c.05-.07.11-.14.17-.2ZM2,18.21V4.83l7.73,6.74-7.73,6.73s0-.06,0-.08ZM24.27,20.12H3.91c-.33,0-.66-.09-.94-.25l8.15-7.1.76.66c1.27,1.11,3.17,1.11,4.45,0l.76-.66,8.14,7.1c-.29.17-.61.25-.95.25h0ZM26.18,18.21s0,.06,0,.08l-7.72-6.73,7.73-6.74v13.38Z'/%3E%3C/svg%3E");
}

/* ==========================================================================
   矢印ボタン（c-btn--arrow）：ホバー/フォーカスで「塗りが左から満ちる」左スライド塗り
   ・塗り＝ボタン背景の linear-gradient を background-size 0%→100% でスライド（枠内・角内に収まる／overflow不要）
   ・矢印＝支給SVGを mask で描画。色 var(--btn-arrow-color) で固定（ホバーでも不変）。枠外(right:-26px)なので切れない。
     ホバーで +14px 右へ飛び出す動きは維持（塗りとは別）。
   ・色は使用箇所ごとに変数で上書き：
       --btn-fill（塗り色）／--btn-text-hover（ホバー文字色）／--btn-arrow-color（矢印色・固定）／--btn-icon-color（アイコン色）
   ========================================================================== */
.c-btn--arrow {
  position: relative;
  /* 既定＝明背景：塗り青／文字白／矢印濃色／アイコンは文字色に追従 */
  --btn-fill:        var(--c-blue);
  --btn-text-hover:  var(--c-white);
  --btn-arrow-color: var(--c-text);
  --btn-icon-color:  currentColor;
  background-image: linear-gradient(var(--btn-fill), var(--btn-fill));
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 100%;   /* ホバーで 100% ＝左から満ちる */
  transition: background-size var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              opacity var(--dur) var(--ease);
}

/* 矢印（支給SVGを mask・固定色）。枠の右端をまたいで外側へ出す。
   マスクは dataURI インライン＋白ストローク：file:// でも読め、alpha/luminance どちらのマスク解釈でも可視。
   （支給元の形状は images/v-cmn-11-arw-corner.svg。色は background-color=var(--btn-arrow-color) 側で制御） */
.c-btn--arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -26px;
  width: 51px;
  height: 14px;
  transform: translateY(-50%);
  background-color: var(--btn-arrow-color);
  --icon-arrow: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='51.21'%20height='13.66'%20viewBox='0%200%2051.21%2013.66'%3E%3Cpolyline%20points='37.19%20.35%2050%2013.16%200%2013.16'%20fill='none'%20stroke='%23fff'%20stroke-width='1'/%3E%3C/svg%3E");
  -webkit-mask: var(--icon-arrow) no-repeat center / contain;
          mask: var(--icon-arrow) no-repeat center / contain;
  transition: transform var(--dur) var(--ease);
}

/* 暗背景（SUPPORT RECORD・RECRUIT／CONTACTバナーボタン等）：白枠・白文字・白矢印。塗り＝白／文字ホバー＝濃色 */
.c-btn--arrow-w {
  --btn-fill:        var(--c-white);
  --btn-text-hover:  var(--c-text);
  --btn-arrow-color: var(--c-white);
  border-color: var(--c-white);
  color: var(--c-white);
}

/* フッターお問い合わせ：地色＝フッター背景(--c-blue-gray)。白が満ちるので文字/アイコンは地色へ（白地で可読） */
.l-footer__contact { --btn-text-hover: var(--c-blue-gray); }

/* ホバー/フォーカス：塗りが左から満ちる＋文字色切替＋枠色を塗り色へ。
   CONTACTバナーは「バナー全体ホバー/フォーカス」でボタンを連動（TOPは top.css 側で同様に付与）。 */
.c-btn--arrow:hover,
.c-btn--arrow:focus-visible,
.c-contact__inner:hover .c-contact__btn,
.c-contact__inner:focus-visible .c-contact__btn {
  opacity: 1;
  background-size: 100% 100%;
  color: var(--btn-text-hover);
  border-color: var(--btn-fill);
}

.c-btn--arrow:hover::after,
.c-btn--arrow:focus-visible::after,
.c-contact__inner:hover .c-contact__btn::after,
.c-contact__inner:focus-visible .c-contact__btn::after {
  transform: translateY(-50%) translateX(14px);
}

/* reduced-motion：スライド/飛び出しアニメを無効化（即時塗り・色変化のみ） */
@media (prefers-reduced-motion: reduce) {
  .c-btn--arrow {
    transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), opacity var(--dur) var(--ease);
  }
  .c-btn--arrow::after { transition: none; }
}

/* --------------------------------------------------------------------------
   c-cta-btn（スマホ用お問い合わせボタン。SP_CTA-05カンプ準拠：濃色バー＋白文字＋メールアイコン）
   ・静置用（TOP CONTACTセクション等）＝ .c-cta-btn 単体
   ・追従用（スクロールで下部に出現。参考挙動：marken.co.jp SP）＝ .c-cta-btn--float ＋ js-cta-float
     表示制御は js/common.js が is-visible を付け外し
   -------------------------------------------------------------------------- */
.c-cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  width: 260px;
  min-height: 48px;
  margin-inline: auto;
  padding: var(--sp-1) var(--sp-2);
  background: var(--c-text);
  color: var(--c-white);
  font-size: var(--fs-base);
  letter-spacing: 0;
  transition: opacity var(--dur) var(--ease);
}

.c-cta-btn:hover { opacity: .7; }

.c-cta-btn .c-btn__icon {
  width: 24px;
  height: 19px; /* 元アイコン28×22の縦横比を維持 */
}

.c-cta-btn--float {
  position: fixed;
  left: 50%;
  bottom: var(--sp-3);
  z-index: calc(var(--z-header) - 1); /* ヘッダー・ドロワーより背面／コンテンツより前面 */
  transform: translateX(calc(-50% + 56px)); /* 出現前＝右へ56pxオフセット（右からスライドイン。参考：marken.co.jp SP） */
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s var(--dur);
}

.c-cta-btn--float.is-visible {
  visibility: visible;
  opacity: 1;
  transform: translateX(-50%);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

/* ホバー減光は追従時も文字が読める程度に留める */
.c-cta-btn--float.is-visible:hover { opacity: .85; }

/* SP：ドロワー内のお問い合わせを廃止し、この追従ボタンへ一本化（Hiroshi提案。ドロワー側の非表示は l-menu 節） */
@media (max-width: 767px) {
  /* ドロワーより前面へ。.l-header（z:100）が重ね合わせ文脈を作るため、
     その外側にある追従ボタンは 100 超の値でヘッダー＝ドロワーごと上に来る */
  .c-cta-btn--float { z-index: var(--z-modal); }

  /* ドロワーを開いている間はスクロール量に関わらず表示
     （ページ上部で開いてもCTAが無い状態を作らない）。追従ボタンは .l-header の後続兄弟 */
  .l-header.is-open ~ .c-cta-btn--float {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  }
}

/* --------------------------------------------------------------------------
   c-dl-btn（グラデ枠のダウンロードボタン。左＝2行テキスト／右＝DLアイコン）
   複数ページで共用。グラデ枠は background の padding-box/border-box で作り、
   ::after を「ホバー時に白35%を全体へ重ねるベール」に使う。
   -------------------------------------------------------------------------- */
.c-dl-btn {
  position: relative;
  display: flex;       /* 高さ可変化に伴い flex＝内側ピルが stretch で全高に追従（20 §C） */
  width: 360px;
  max-width: 100%;
  min-height: 100px;   /* 固定100px→最小値化：極小幅でテキストが増行してもクリップさせない（20 §C） */
  padding: 3px 10px;   /* グラデ枠：天地3px・左右10px */
  border-radius: 999px;
  background: linear-gradient(180deg, #1A96FF 0%, #E33306 100%); /* 青→赤の縦グラデ */
  text-decoration: none;
  overflow: hidden;
}

/* 内側の白ピル（テキスト左・アイコン右） */
.c-dl-btn__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  width: 100%;
  height: auto;   /* 100%→auto：親の固定高さ廃止（20 §C）に伴い flex stretch で追従 */
  padding: 0 28px;
  border-radius: 999px;
  background: var(--c-white);
  color: var(--c-text);
  font-size: 1rem;    /* 16px */
  font-weight: 700;
  line-height: 32px;  /* 行間32px */
}

.c-dl-btn__icon {
  flex-shrink: 0;
  display: block;
  width: 24px;
  height: 24px;
  color: #073459; /* DLアイコン色 */
}

.c-dl-btn__icon svg { display: block; width: 100%; height: 100%; }

/* ホバー/フォーカス：#FFFFFF 35% を重ねる */
.c-dl-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #fff;
  opacity: 0;
  transition: opacity .25s;
  pointer-events: none;
}

.c-dl-btn:hover::after,
.c-dl-btn:focus-visible::after { opacity: .35; }

@media (prefers-reduced-motion: reduce) {
  .c-dl-btn::after { transition: none; }
}

/* --------------------------------------------------------------------------
   c-heading（欧文大見出し＋和文サブの2段構造：例 PROVEN RESULTS＋支援実績）
   -------------------------------------------------------------------------- */
.c-heading { margin-bottom: var(--sp-6); }

.c-heading__en {
  display: block;
  font-family: var(--font-en-bold); /* Bold英字＝差し替えフック（base.css参照） */
  font-size: var(--fs-en-l);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0;
}

.c-heading__ja {
  display: flex;
  align-items: center;
  gap: 12px; /* 例外：バーとラベルの間隔（カンプ実測≒14px） */
  margin-top: var(--sp-2);
  font-size: 1rem; /* カンプ実測≒16px */
  font-weight: 700;
  line-height: 1.4;
}

/* 見出しラベル左の赤バー（カンプ実測：幅≒6px・高さ≒28px） */
.c-heading__ja::before {
  content: "";
  flex-shrink: 0;
  width: 6px;
  height: 1.75em;
  background: var(--c-accent);
}

/* 濃色背景用（SUPPORT RECORD・RECRUIT等） */
.c-heading--invert .c-heading__en,
.c-heading--invert .c-heading__ja { color: var(--c-white); }

/* page修飾：下層ページ大見出しビジュアル（特大英字＋語幅の細罫線／和文は赤バーなし）。
   features・privacy 等の下層ヒーローで共有（旧 features.css から common へ昇格）。
   カンプ：見出し直下にパンくずを置く p-*-hero__head 構造で使う */
.c-heading--page { margin-bottom: 0; }

.c-heading--page .c-heading__en {
  display: inline-block; /* 罫線を語幅にフィット（カンプ：見出し語幅で止まる） */
  font-weight: 600; /* ページタイトルはSemiBold（指定：Montserrat 600。他のBold見出しは800のまま） */
  font-size: clamp(2.75rem, 1.4rem + 5vw, 5.875rem); /* 44→94px（指定で少し縮小。旧52→110px） */
  padding-bottom: var(--sp-1); /* 罫線を見出しへ寄せる */
  border-bottom: 1px solid var(--c-line); /* #707070 */
  color: var(--c-text);
}

.c-heading--page .c-heading__ja {
  margin-top: var(--sp-3);
  gap: 0;
  font-size: var(--fs-base);
}

.c-heading--page .c-heading__ja::before { content: none; } /* 赤バーは出さない（カンプ） */

/* SP：罫線なし・見出し間隔もタイト（features SPカンプ準拠） */
@media (max-width: 767px) {
  .c-heading { margin-bottom: var(--sp-3); } /* 見出し→後続の間隔（SPカンプ実測≒24px） */
  .c-heading--page .c-heading__en { border-bottom: none; padding-bottom: 0; }
  .c-heading--page .c-heading__ja { margin-top: var(--sp-1); }
}

/* --------------------------------------------------------------------------
   c-masthead（下層ページ 英字大見出しの固定マストヘッド）
   挙動：位置固定＋z軸背面＋スクロールで薄くフェード（参照＝INFOBAHN「SERVICE」）。
   ・ページ全高ラッパー（.p-features / .p-privacy / .p-news-* / .p-contact / .p-works-*）直下に置く
     ＝sticky の可動域＝ページ全体で固定され続ける。
   ・英字(.c-heading__en)のみ内包・装飾扱い（HTML側で aria-hidden）。和文ラベル/実h1は通常フローに残す＝スクロールで流れる。
   ・--alpha(=opacity) は common.js §10 がスクロール連動で 1→0.08 に制御し、薄いまま維持。
   ・position の発動キーは html.js-sticky-fade（JSが付与）。prefers-reduced-motion / JS無効時は通常フロー表示。
   -------------------------------------------------------------------------- */
.c-masthead { padding-block: var(--sp-6) 0; } /* 旧ヒーロー上パディング(sp-6)を肩代わり */

/* マストヘッド直後のヒーローは上パディングを打ち消す（マストヘッドが上余白を持つため）。
   .l-main を前置し、ページ別ヒーロー(.p-*-hero＝specificity 0,1,0)に勝たせる（0,2,0）。 */
.l-main .c-masthead + * { padding-block-start: 0; }

.js-sticky-fade .c-masthead {
  position: sticky;
  top: 80px;            /* 固定ヘッダー(80px)直下に固定 */
  z-index: -1;          /* z軸背面：コンテンツが前面を通過する */
  opacity: var(--alpha, 1);
  will-change: opacity;
}

@media (max-width: 767px) {
  .c-masthead { padding-block: var(--sp-4) 0; } /* SPヒーロー上パディング(sp-4)に合わせる */
  .js-sticky-fade .c-masthead { top: 60px; }    /* SPヘッダー高60pxに追従 */
}

/* --------------------------------------------------------------------------
   c-breadcrumb（下層02〜11の main 冒頭。BreadcrumbList JSON-LDと連動）
   -------------------------------------------------------------------------- */
.c-breadcrumb {
  padding-block: var(--sp-3);
  font-size: .875rem; /* 例外：パンくず実測14px相当（仮） */
  color: var(--c-gray);
}

.c-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1);
}

.c-breadcrumb__item + .c-breadcrumb__item::before {
  content: "/";
  margin-right: var(--sp-1);
  color: var(--c-gray-light);
}

.c-breadcrumb__item a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   c-pager（アーカイブのページ送り。現状は支援実績一覧のみ。09c・デザイン＝comps/pc/pager.png 準拠）
   ※詳細ページの p-works-detail__pager（前後の実績への送り）とは別物
   カンプ実測（2500px画像＝1440デザイン、換算1.736）：
   ・数字＝40×40の角丸四角（radius≒12px）。青枠1px＋白地＋青数字／現在ページ＝青塗り＋白数字
   ・両端に「« 最初へ」「‹ 前へ」「次へ ›」「最後へ »」のシェブロン（枠なし・青）
   ・要素間ギャップ＝実測35.5px≒36px（SPは縮小）／省略記号なし＝全ページ番号を表示（show_all）
   色はトークンのみ：--c-blue（枠・数字・塗り）／ホバー＝数字:青塗り+白字・シェブロン:--c-navy
   -------------------------------------------------------------------------- */
.c-pager { margin-top: var(--sp-8); }

.c-pager__list {
  display: flex;
  flex-wrap: wrap;          /* 件数が増えても・SP 393px でも折り返しで収める（09c §3-4） */
  justify-content: center;
  align-items: center;
  gap: var(--sp-1) clamp(12px, 2.5vw, 36px); /* 列＝カンプ実測36px（SPは縮小）／折返し時の行間8px */
}

/* 数字ボタン（カンプ：40×40・角丸12px・青枠白地） */
.c-pager__item > a,
.c-pager__item > span {
  display: grid;
  place-items: center;
  min-width: 40px;
  min-height: 40px;
  border: 1px solid var(--c-blue);
  border-radius: 12px;
  background: var(--c-white);
  font-family: var(--font-en);
  font-size: var(--fs-lg);
  font-weight: 600; /* SemiBold（CASEバッジと同じ扱い） */
  color: var(--c-blue);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

/* 数字ホバー/フォーカス＝現在ページと同じ青塗り（サイト共通の塗りホバーに準拠） */
.c-pager__item > a:hover,
.c-pager__item > a:focus-visible {
  background: var(--c-blue);
  color: var(--c-white);
}

/* 現在ページ（paginate_links が aria-current="page" を付与する span）＝青塗り＋白数字 */
.c-pager__item--current > span {
  background: var(--c-blue);
  color: var(--c-white);
}

/* シェブロン系（最初へ/前へ/次へ/最後へ）：枠なし・青。テキストはSR専用（u-visually-hidden） */
.c-pager__item--first > a,
.c-pager__item--prev > a,
.c-pager__item--next > a,
.c-pager__item--last > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--c-blue);
}

.c-pager__item--first > a:hover,
.c-pager__item--first > a:focus-visible,
.c-pager__item--prev  > a:hover,
.c-pager__item--prev  > a:focus-visible,
.c-pager__item--next  > a:hover,
.c-pager__item--next  > a:focus-visible,
.c-pager__item--last  > a:hover,
.c-pager__item--last  > a:focus-visible {
  background: transparent;
  color: var(--c-navy);
}

/* シェブロン本体＝currentColor の2辺ボーダーを45°回転（画像を使わない）。
   単＝::before のみ／二重（最初へ・最後へ）＝::before+::after を重ね気味に並べる */
.c-pager__item--first > a::before,
.c-pager__item--first > a::after,
.c-pager__item--prev  > a::before,
.c-pager__item--next  > a::before,
.c-pager__item--last  > a::before,
.c-pager__item--last  > a::after {
  content: "";
  width: 9px;
  height: 9px;
  border-top: 1.5px solid currentColor;   /* 1段階細く（2px→1.5px。ユーザー指定） */
  border-right: 1.5px solid currentColor;
}

/* 右向き（次へ・最後へ）＝ ⌐ を+45°／左向き（前へ・最初へ）＝-135° */
.c-pager__item--next  > a::before,
.c-pager__item--last  > a::before,
.c-pager__item--last  > a::after  { transform: rotate(45deg); }
.c-pager__item--first > a::before,
.c-pager__item--first > a::after,
.c-pager__item--prev  > a::before { transform: rotate(-135deg); }

/* 二重シェブロンの間隔（カンプ：矢羽根2枚が約5px間隔で重なる） */
.c-pager__item--first > a::after,
.c-pager__item--last  > a::after { margin-left: -4px; }

/* 省略記号（show_all 運用では通常出ないが、将来 mid_size 運用に戻した場合の保険） */
.c-pager__item--dots > span {
  min-width: auto;
  border: 0;
  background: transparent;
  color: var(--c-gray);
}

/* --------------------------------------------------------------------------
   c-scroll-hint（横スクロールヒント。40c・カンプ外＝Hiroshi指示による追加）
   ・.js-scroll-hint 容器に common.js §18 が挿入（テンプレート側はマーカークラスのみ）
   ・SP（≤767px）かつ実際にはみ出す場合のみ表示。スクロール開始でフェードアウト＝以後再表示しない
   ・pointer-events:none＝下の表を直接スクロール可能／PCでは非表示
   -------------------------------------------------------------------------- */
.c-scroll-hint {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  display: flex;
  flex-direction: column;   /* 上＝指＋左右矢印／下＝ラベル（支給モック準拠） */
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 128px;
  padding: 14px 20px;
  border-radius: 14px;      /* ピル型→角丸ボックスへ（支給モック準拠） */
  background: rgba(7, 52, 89, .7); /* --c-navy #073459 の透過70% */
  color: var(--c-white);
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}

/* 画面内に入って表示されたら2回だけ点滅（Hiroshi指示）。JS側は is-visible の付け外しのみ担当。
   点滅後は opacity:1 の定常表示（keyframes の 100% ＝ is-visible の既定値と同値） */
.c-scroll-hint.is-visible {
  opacity: 1;
  animation: c-scroll-hint-blink 1.4s ease-in-out 2;
}

@keyframes c-scroll-hint-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: .25; }
}

.c-scroll-hint svg { display: block; }

.c-scroll-hint__label {
  font-family: var(--font-en);
  font-size: .75rem; /* 12px */
  line-height: 1;
  letter-spacing: .04em;
}

@media (min-width: 768px) {
  .c-scroll-hint { display: none; } /* PCはスクロールが発生しないため非表示（40c §3） */
}

@media (prefers-reduced-motion: reduce) {
  .c-scroll-hint { transition: none; }                    /* 即時切替 */
  .c-scroll-hint.is-visible { animation: none; }          /* 点滅も止める */
}

/* スクロールバー自体の意匠（支給モック準拠：薄グレーのトラック＋ブランド色の丸いつまみ）。
   ヒントが消えた後もスクロール可能であることが残り続ける手掛かりになる。
   対象は js-scroll-hint 容器のみ＝ページ全体のスクロールバーには影響しない。 */
/* Chrome/Safari は ::-webkit-scrollbar で角丸まで作り込む。
   ただし scrollbar-width / scrollbar-color を併記すると Chrome は ::-webkit 側を無視するため、
   標準プロパティは webkit 疑似要素を持たないブラウザ（Firefox）にだけ当てる。 */
@supports not selector(::-webkit-scrollbar) {
  .js-scroll-hint {
    scrollbar-width: thin;
    scrollbar-color: var(--c-blue) var(--c-gray-light);
  }
}

.js-scroll-hint::-webkit-scrollbar { height: 8px; }

.js-scroll-hint::-webkit-scrollbar-track {
  border-radius: 999px;
  background: var(--c-gray-light);
}

.js-scroll-hint::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: var(--c-blue);
}

/* --------------------------------------------------------------------------
   c-contact（下層共通のCONTACTバナー。TOP p-top-contact と同型を汎用化）
   features・privacy 等の各下層ページ末尾で共有（旧 p-features-contact から昇格）。
   画像＝images/common/common-01-contact.jpg（common CSS=url(../images/…)）
   -------------------------------------------------------------------------- */
.c-contact { padding-block: var(--sp-16) 0; }

.c-contact__frame {
  max-width: 1040px;
  margin-inline: auto;
  padding: var(--sp-1);
  border: 1px solid var(--c-text);
}

.c-contact__inner {
  position: relative;
  display: block;
  min-height: 320px;
  padding: 56px 64px;
  border-radius: 20px;
  background: var(--c-gray-light);
  color: var(--c-white);
  text-decoration: none;
  overflow: hidden;
}

.c-contact__photo {
  position: absolute;
  inset-block: 0;
  right: 0;
  width: 72%;
  z-index: 0;
  background: url(../images/common/common-01-contact.jpg) center / cover no-repeat;
}

.c-contact__inner::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 67%;
  z-index: 1;
  background: linear-gradient(90deg,
    rgba(21, 102, 140, 1) 0%,
    rgba(21, 102, 140, 1) 47.8%,
    rgba(38, 115, 188, .5) 71.9%,
    rgba(231, 231, 231, 0) 100%);
}

.c-contact__inner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: transparent;
  transition: background var(--dur) var(--ease);
  pointer-events: none;
}

.c-contact__inner:hover::after { background: rgba(26, 150, 255, .4); }

.c-contact__body {
  position: relative;
  z-index: 2;
  max-width: 640px;
}

.c-contact__title {
  font-family: var(--font-en-bold); /* Bold英字＝差し替えフック */
  font-size: clamp(2.75rem, 1.9rem + 4vw, 4.6875rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-shadow: 0 5px 12px #4B4B4B;
}

.c-contact__text {
  margin-top: var(--sp-4);
  font-weight: 700;
  font-size: var(--fs-lg);
  line-height: 2.4;
  text-shadow: 0 5px 10px #4B4B4B;
}

.c-contact__em {
  font-style: normal;
  font-weight: 700;
  font-size: 1.375rem;
  text-decoration: underline;
  text-underline-offset: 6px;
}

.c-contact__btn {
  position: absolute;
  right: var(--sp-8);
  bottom: var(--sp-5);
  z-index: 4;
  min-width: 240px;
  --btn-text-hover: var(--c-blue); /* ホバー時の「お問い合わせ＋アイコン」＝#2673BC（ユーザー指定 2026-08-28。既定の濃色 --c-text を上書き） */
}

/* CONTACTバナーボタンの塗りスライド／色／矢印は c-btn--arrow の共通ルールで発火
   （.c-contact__inner:hover/:focus-visible .c-contact__btn を上のホバー群に含めている）。
   このボタンは c-btn--arrow-w を持つため 塗り=白／文字ホバー=--c-blue（上書き）／矢印=白／アイコン=文字追従。 */

/* SP：8/27支給カンプ（comps/sp/Web 1920 – 1.png 左上CONTACTタイル）の画素実測値で確定（40）。
   実測（枠線除く本体）：W343×H382・角丸8px・CONTACTキャップ高28px→40px・本文ink13px→15px/行送り28px・
   行2→行3のみ+13px・下線=太さ2px/ink下4px・ボタン261×54（中央）・
   青→写真の境界は斜め（左y232/右y143＝165deg・ベタ終端49%・フェード帯≒11%） */
@media (max-width: 767px) {
  .c-contact { padding-block: var(--sp-8) 0; }

  /* CONTACTバナーの天地の空きを揃える（Hiroshi指示）。
     上＝上の .c-contact padding-top（SP=64px）／下＝共通 .l-main の padding-block-end（128px）で不一致だったため、
     CONTACTで終わるページに限り下も64pxへ。CONTACTを持たないページ（recruit・contact 等）の下余白は不変。 */
  .l-main:has(.c-contact) { padding-block-end: var(--sp-8); }

  .c-contact__inner {
    min-height: 382px;   /* カンプ実測H */
    padding: 28px 16px 16px; /* 上28px＝CONTACT ink上端33px（行ボックス補正後）に一致 */
    border-radius: 8px;  /* カンプ実測（旧 20px 20px 0 0） */
  }

  .c-contact__title { font-size: 40px; } /* キャップ高28px÷0.70（旧48px） */

  .c-contact__text {
    margin-top: 17px;    /* 見出しink下端→行1 ink上端32px（実測照合値） */
    font-size: .9375rem; /* 15px（ink実測13px。旧.98rem） */
    font-weight: 700;
    line-height: 28px;   /* 行送り実測28px（旧2.35≒37px） */
  }

  .c-contact__em {
    display: inline-block;   /* 行2→行3の間隔+13pxを行送りを広げずに再現 */
    padding-bottom: 13px;
    font-size: 1.125rem;     /* 18px（ユーザー指定 2026-08-28。本文15pxより1段強調） */
    line-height: 28px;
    text-underline-offset: 4px;      /* ink下端→下線 実測4px */
    text-decoration-thickness: 2px;  /* 下線太さ 実測2px */
  }

  .c-contact__photo {
    width: 100%;
    background-image: url(../images/top/common-01-contact-sp.jpg); /* SP専用画像（679×452） */
    /* 40：写真の描画位置をカンプに寄せる（相互相関で右+10px相当）。
       幅+12px・左下アンカー＝隙間を出さずに右側被写体を約+9px右へ（サイズ差は顔幅48px一致＝等倍のまま） */
    background-size: calc(100% + 24px) auto;
    background-position: left calc(100% + 10px);
    background-repeat: no-repeat;
  }

  /* グラデ（40）：カンプの斜め境界を再現＝165deg（右辺側が高い）。
     色は現行値を維持しストップのみ変更（ベタ#15668C→49%・中間rgba(38,115,188,.5)→54.5%・60%で透明）。
     高さ62%→100%（ストップ%を本体全高基準にするため） */
  .c-contact__inner::before {
    top: 0;
    bottom: auto;
    height: 100%;
    width: 100%;
    background: linear-gradient(165deg,
      rgba(21, 102, 140, 1) 0%,
      rgba(21, 102, 140, 1) 49%,
      rgba(38, 115, 188, .5) 54.5%,
      rgba(231, 231, 231, 0) 60%);
  }

  .c-contact__body { max-width: none; }

  /* ボタン：通常フローで下部中央・写真(z0)/グラデ(z1)より前面。白枠は出さない。
     40：カンプ実測 261×54・本文下端→ボタン上端83px（本文行ボックス補正でmargin調整） */
  .c-contact__btn {
    position: relative;
    right: auto;
    bottom: auto;
    z-index: 4;
    display: flex;
    width: 261px;
    min-width: 0;
    min-height: 54px;
    margin-top: 72px;
    margin-inline: auto;
    border: 0;
  }
}

/* --------------------------------------------------------------------------
   404ページ（28 §D。カンプに無い新規ページ＝既存トークン・既存ボタン意匠のみで構成。
   ページ別CSSを持たないため共通側に置く）
   -------------------------------------------------------------------------- */
.p-notfound-body {
  padding-block: var(--sp-16) var(--sp-12);
  text-align: center;
}

.p-notfound__title {
  font-size: var(--fs-2xl); /* 和文見出しトークン＝下層見出し体裁の流用 */
  font-weight: 700;
}

.p-notfound__text {
  margin-top: var(--sp-4);
  line-height: 1.9;
}

.p-notfound__btn { margin-top: var(--sp-8); }