/* ===== リセット & 基本 ===== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --navy: #262161;
  --dark-blue: #082671;
  --red: #fe5560;
  --white: #ffffff;
  --black: #1f1f1f;
  --gray-text: #4a5565;
  --light-blue-bg: rgba(149, 194, 255, 0.1);
  --contact-bg: #f4f9ff;
  --font: 'Noto Sans JP', sans-serif;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font);
  color: var(--black);
  background: var(--white);
  /* min-width は .page 側で持つ。ここに置くと zoom で縮小しても body が1440pxを
     要求してしまい、横スクロールバーが出る（body は zoom の影響を受けないため） */
}

img {
  display: block;
  max-width: 100%;
}

a {
  text-decoration: none;
  color: inherit;
}

/* .page 自体はウィンドウ幅いっぱい（背景を端まで届かせるため）。
   中の各セクションは 1440px のまま margin auto で中央に置くので、
   絶対配置の子の座標は 1440px 基準のまま一切変わらない。 */
.page {
  position: relative;
  isolation: isolate;
  /* 1440pxのデザインを画面幅にフィットさせる（倍率は head のスクリプトが --z に入れる）。
     幅はズーム後の座標系での画面幅にするので、zoom を掛けた実寸はちょうど画面幅になる。
     JSが動かない場合は --z=1 / --vwz=100vw にフォールバックし、従来の全幅背景版として動く。 */
  zoom: var(--z, 1);
  width: var(--vwz, 100vw);
  min-width: 1440px;
  margin: 0;
  overflow: hidden;
}
.page > * {
  margin-left: auto;
  margin-right: auto;
}

/* 背面の透かしマーク 761:518 : TOPフレーム全体基準で配置 */
/* inset(top right bottom left) = 19.53% -123.75% 30.16% 11.25% / 1440×5652 */
.page-mark {
  position: absolute;
  top: 1103.84px;
  left: calc(50% - 558px);
  width: 3060px;
  height: 2843.56px;
  z-index: -1;
  pointer-events: none;
}
.page-mark img {
  width: 100%;
  height: 100%;
  display: block;
  max-width: none;
}

.center {
  display: flex;
  justify-content: center;
}

/* ===== ボタン ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 24px;
  border-radius: 4px;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.3125px;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.2s;
}
.btn:hover { opacity: 0.85; }

.btn--red {
  background: var(--red);
  color: var(--white);
  box-shadow: 0px 4px 2px rgba(0,0,0,0.25);
  width: 228px;
}

.btn--outline {
  background: var(--white);
  color: var(--navy);
  border: 2px solid var(--navy);
  width: 309px;
}

.btn--full {
  width: 100%;
  border-radius: 4px;
}

.btn--submit {
  width: 330px;
  border: 2px solid var(--navy);
  background: var(--white);
  color: var(--navy);
}

/* ===== セクション共通 ===== */
.section-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 160px;
  width: 100%;
}

.section-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-bottom: 80px;
}

.section-heading h2 {
  font-size: 32px;
  font-weight: 700;
  color: var(--dark-blue);
  line-height: 36px;
  letter-spacing: 0.3955px;
  text-align: center;
}

.heading-bar {
  background: var(--dark-blue);
  height: 2px;
  width: 225px;
  margin-top: 2px;
}
.heading-bar--wide  { width: 453px; }
.heading-bar--short { width: 148px; }
.heading-bar--area  { width: 173px; }

/* ===== ヒーロー (Kフレーム / 1440×700 を座標どおり再現) ===== */
.hero {
  position: relative;
  width: 1440px;
  height: 700px;
  overflow: hidden;
  background: linear-gradient(124.67deg, rgb(255,255,255) 10.353%, rgb(224,242,255) 99.915%);
}

/* 背景（全面） 761:522
   書き出された images/hero-bg.png がヒーローと同寸の 1440x700 だったため、
   旧「left -120 / 2113x992」ではなく inset 0 の全面敷きに変更 */
.hero-bg-photo {
  position: absolute;
  inset: 0;
  width: 1440px;
  height: 700px;
  object-fit: cover;
  pointer-events: none;
  z-index: 0;
}

/* enas 透かしロゴ（下部） 761:523 */
.hero-watermark {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.hero-watermark .wm {
  position: absolute;
}
/* images/wm-enas.svg = e(761:524)/n(761:525)/a(761:526)/s(761:527) を1枚に統合した 1002x210 SVG。
   4文字の合成バウンディングボックス: left 6 (=e の left) 〜 right 1007.95 (=s の left851+幅156.952) → 幅 1001.95
   bottom -1.03 (=e) 〜 top 209.10 (=s/n) → 高さ 210.13 */
.wm-enas { left: 6px; bottom: -1.03px; width: 1001.95px; height: 210.13px; }

/* メインタイトル 761:528 : left 69, top 207, 86.902px bold #1f1f1f */
.hero-title {
  position: absolute;
  left: 69px;
  top: 207px;
  margin: 0;
  font-size: 86.902px;
  font-weight: 700;
  color: #1f1f1f;
  line-height: 1.3;
  letter-spacing: 1.0346px;
  white-space: nowrap;
  z-index: 5;
}

/* 右側の紺色ブロック 761:531 : left 959, top -79, 503x969 */
.hero-navy-block {
  position: absolute;
  left: 959px;
  top: -79px;
  width: 503px;
  height: 969px;
  background: var(--navy);
  z-index: 2;
}

/* ヘッダー 761:532 : top 0, w 1440, h 64, px 24 */
.header {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1440px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  z-index: 10;
}

/* ロゴ Layer_1 627:1925 : 94×22, 内部は絶対配置 */
.logo {
  position: relative;
  width: 94px;
  height: 22px;
  flex-shrink: 0;
  overflow: hidden;
}
/* images/Logo.svg = マーク(627:1932)+文字(627:1927)一体の 94×22 SVG。
   コンテナと同寸法なのでそのまま敷く */
.logo-img {
  display: block;
  width: 100%;
  height: 100%;
}

.nav {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 100%;
}
.nav-link {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  height: 100%;
  font-size: 16px;
  font-weight: 500;
  color: var(--white);
  letter-spacing: -0.3125px;
  white-space: nowrap;
}
.nav-link:hover {
  opacity: 0.8;
}

/* 右側メイン写真 761:533 : left 879, top 97, 609x671 */
/* images/hero-photo.png(1122x1206) は 561x603 の2x書き出し。
   561 = 1440-879, 603 = 700-97 ＝ 枠(609x671)をヒーロー枠でクリップした可視範囲。
   透明余白48x47px も枠内オフセット(24 / 23.76px)の2xと一致するため、
   内部オフセットもクリップも焼き込み済み → 等倍で敷くだけでよい */
.hero-image {
  position: absolute;
  left: 879px;
  top: 97px;
  width: 561px;
  height: 603px;
  overflow: hidden;
  z-index: 3;
}
.hero-image img {
  position: absolute;
  left: 0;
  top: 0;
  width: 561px;
  height: 603px;
  display: block;
  max-width: none;
  pointer-events: none;
}

/* 円形デコレーション 761:534 */
.hero-deco {
  position: absolute;
  z-index: 4;
  pointer-events: none;
}
/* 761:535 : left 1520, top -455, 554.167x552.149 */
.hero-deco-1 { left: 1520px; top: -455px; width: 554.167px; height: 552.149px; }
/* 958:8696 : left 965.83, top 178.64, 554.167x552.148 */
.hero-deco-2 { left: 965.83px; top: 178.64px; width: 554.167px; height: 552.148px; }

/* サブタイトル 761:537 */
.hero-subtitle {
  position: absolute;
  left: 0;
  top: 0;
  width: 1440px;
  height: 700px;
  z-index: 6;
  pointer-events: none;
}
/* 角丸ボックス（背景画像） */
.sub-box {
  position: absolute;
  top: 338.31px;
  height: 37.293px;
}
.box-jin   { left: 69px;     width: 73.654px; }   /* 761:540 */
.box-kigyo { left: 140.79px; width: 90.436px; }   /* 761:542 */
.box-machi { left: 229.36px; width: 73.654px; }   /* 761:541 */

/* ボックス内テキスト（人・企業・街） */
.sub-text {
  position: absolute;
  font-weight: 500;
  white-space: nowrap;
  line-height: 1.5;
}
.box-text-jin,
.box-text-kigyo,
.box-text-machi {
  top: 337.38px;
  font-size: 26.105px;
  color: var(--white);
  letter-spacing: 0.3177px;
}
.box-text-jin   { left: 93.24px; }   /* 761:543 */
.box-text-kigyo { left: 159.44px; }  /* 761:544 */
.box-text-machi { left: 253.6px; }   /* 761:545 */

/* 「の」「成長を支えるパートナー」 */
.sub-no,
.sub-partner {
  top: 334.58px;
  font-size: 28.077px;
  color: var(--navy);
  letter-spacing: 0.3177px;
}
.sub-no      { left: 303.95px; }  /* 761:539 */
.sub-partner { left: 332.85px; }  /* 761:538 */

/* お問い合わせボタン 1046:10392 : left 69, top 455, w 228, py 16 */
.hero-btn {
  position: absolute;
  left: 69px;
  top: 455px;
  width: 228px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 0;
  background: var(--red);
  color: var(--white);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.3125px;
  border-radius: 4px;
  box-shadow: 0px 4px 2px rgba(0,0,0,0.25);
  white-space: nowrap;
  z-index: 7;
  transition: opacity 0.2s;
}
.hero-btn:hover { opacity: 0.85; }

/* ===== 私たちについて (Mフレーム / 1046:10512) ===== */
.about {
  position: relative;
  width: 1440px;
  padding: 140px 160px 120px;
  overflow: hidden;
}

/* 背景写真（全面） */
.about-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  z-index: 0;
}
/* 上部の白グラデーション 1046:10515 : h 765, white → rgba(255,255,255,0.4) */
.about-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 1440px;
  height: 765px;
  background: linear-gradient(to bottom, #ffffff, rgba(255,255,255,0.4));
  z-index: 1;
}

/* 1046:10516 : flex col, gap 80, items-end, w-full */
.about-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
  width: 100%;
}

/* 1046:10517 : flex col, gap 80, items-center */
.about-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
  width: 100%;
}

/* 1046:10518 : 見出し+バー, gap 2, w 976 */
.about-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 976px;
}
.about-heading h2 {
  font-size: 32px;
  font-weight: 700;
  color: var(--dark-blue);
  line-height: 36px;
  letter-spacing: 0.3955px;
  text-align: center;
}
.about-heading .heading-bar {
  width: 225px;
}

/* リード文 1046:10522 : 42.13px bold, center, 1行 */
.about-lead {
  font-size: 42.13px;
  font-weight: 700;
  color: var(--black);
  text-align: center;
  line-height: 1.3;
  letter-spacing: -0.4849px;
  white-space: nowrap;
}

/* 1046:10523 : flex col, gap 48, items-center */
.about-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  width: 100%;
}

/* 1046:10524 : flex, gap 47, h 133, items-center */
.about-values {
  display: flex;
  gap: 47px;
  align-items: center;
  justify-content: center;
  height: 133px;
  width: 100%;
}

/* カード 1046:10525/10527/10529 : bg navy, rounded 16, shadow, h 100% */
.value-card {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 342px;
  background: var(--navy);
  border-radius: 16px;
  box-shadow: 0px 4px 2px rgba(0,0,0,0.25);
  padding: 36px 0;
}
.value-card--sm { width: 343px; }

.value-card p {
  font-size: 26px;
  font-weight: 700;
  color: var(--white);
  text-align: center;
  line-height: 30.894px;
  letter-spacing: -0.4849px;
  white-space: nowrap;
}
.value-card--sm p {
  font-size: 25px;
}
/* 閉じ括弧の詰め tracking -10.48px */
.value-card .tuck {
  letter-spacing: -10.48px;
}

/* もっと見るボタン 1046:10531 : white, border 2 navy, w 309 */
.value-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 309px;
  padding: 16px 0;
  background: var(--white);
  border: 2px solid var(--navy);
  border-radius: 4px;
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.3125px;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.value-btn:hover {
  background: var(--navy);
  color: var(--white);
  box-shadow: 0 4px 10px rgba(38,33,97,0.25);
  transform: translateY(-1px);
}

/* ===== メリット (Frame 96 / 761:565) ===== */
.merit {
  width: 1440px;
  background: var(--light-blue-bg);
  padding: 100px 160px 120px;
}

/* 761:566 : flex col, gap 82, items-center */
.merit-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 82px;
  width: 100%;
}

/* 761:567 : flex col, gap 38, items-center */
.merit-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 38px;
  width: 100%;
}

/* 761:568 : flex col, gap 6, items-center */
.merit-title-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
}
.merit-title {
  font-size: 32px;
  font-weight: 700;
  color: var(--dark-blue);
  line-height: 36px;
  letter-spacing: 0.3955px;
  text-align: center;
  white-space: nowrap;
}
/* 761:571 : bar w 453 */
.merit-bar {
  width: 453px;
  height: 2px;
  background: var(--dark-blue);
}

/* リード文 761:572 : 26px medium, nowrap */
.merit-lead {
  font-size: 26px;
  font-weight: 500;
  color: var(--black);
  text-align: center;
  line-height: 36px;
  letter-spacing: 0.3955px;
  white-space: nowrap;
}

/* 761:573 : flex col, gap 80, items-center */
.merit-groups {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
  width: 100%;
}

/* 955:2087 / 761:574 : w-full, items-center, pr 37 */
.merit-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding-right: 37px;
}

/* 955:2088 / 955:2079 : flex col, gap 24, items-center */
.merit-group-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

/* 955:2089 : title wrap, pl 40 */
.merit-group-title-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding-left: 40px;
}
.merit-group-title {
  font-size: 30px;
  font-weight: 700;
  text-align: center;
  line-height: 36px;
  letter-spacing: 0.3955px;
  white-space: nowrap;
}
.merit-group-title--navy { color: var(--navy); }
.merit-group-title--red  { color: var(--red); }

/* flex, items-start。gapはTOPの761:565を実測して75.33
   （旧値70は別フレーム955:2091のもの。70だとカード間隔が5.33px狭く、
     justify-content:center のぶん全体が3px右へずれていた） */
.merit-cards {
  display: flex;
  gap: 75.33px;
  align-items: flex-start;
  justify-content: center;
}

/* カード＋バッジ : バッジが左上に重なる */
.merit-card-wrap {
  position: relative;
}

/* バッジ 955:2100 : size 69.553, 左上 */
.merit-badge {
  position: absolute;
  top: 0;
  left: 0;
  width: 69.553px;
  height: 69.553px;
  z-index: 2;
}
/* 書き出しSVGは数字テキストのボックスぶん円より縦に大きい(1=70x73, 2=70x75)。
   .merit-badge の原点はその「グループ枠」の左上に一致するので、
   等倍・オフセット無しで置くと円がFigmaと同位置になる（実測で確認済み）。 */
.merit-badge img {
  position: absolute;
  left: 0;
  top: 0;
  width: 70px;
  display: block;
  max-width: none;
}
.merit-badge--1 img { height: 73px; }
.merit-badge--2 img { height: 75px; }

/* カード 955:2093 : w 505, border 3, rounded 4, ml 35.67 mt 33 */
.merit-card {
  box-sizing: border-box;
  width: 505px;
  margin-left: 35.67px;
  margin-top: 33px;
  background: var(--white);
  border-radius: 4px;
  /* Figmaは4枚とも高さ169〜170pxで揃っている（行数に依らない）。
     3行カードの実測から padding-bottom は 24 ではなく 20.4 */
  padding: 28px 32px 20.4px 50px;
  min-height: 169px;
}
.merit-card--navy { border: 3px solid var(--navy); }
.merit-card--red  { border: 3px solid var(--red); }

/* 955:2095 : flex col, gap 6, w 423 */
.merit-card-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.merit-card-content h4 {
  font-size: 22px;
  font-weight: 700;
  color: var(--black);
  /* Figmaの見出し実測（グリフ上端429 / 本文1行目468）から算出。36pxでは3px低く出る */
  line-height: 33px;
  letter-spacing: 0.3955px;
}
/* .merit-desc の各 p はFigmaの改行位置をそのまま1行ずつ持たせたもの。
   Chrome の Noto Sans JP はFigmaよりわずかに幅が出て2行目(23文字)が
   417pxの本文幅を約6px超えて折り返してしまうため、設計どおりの改行を維持する */
.merit-desc p { white-space: nowrap; }
.merit-desc p,
.merit-desc-p {
  font-size: 18px;
  font-weight: 500;
  color: var(--black);
  line-height: 1.4;
  letter-spacing: 0.3955px;
}
.merit-note {
  font-size: 14px;
  font-weight: 500;
  color: var(--black);
  line-height: 1.4;
  letter-spacing: 0.3955px;
}

/* ===== 事業紹介 (Frame 55 / 761:612) ===== */
.business {
  width: 1440px;
  background: rgba(255,255,255,0.1);
  padding: 80px 160px 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 56px;
}

/* 見出し 761:613 : gap 4 */
.business-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
}
.business-title {
  font-size: 32px;
  font-weight: 700;
  color: var(--dark-blue);
  line-height: 36px;
  letter-spacing: 0.3955px;
  text-align: center;
}
.business-bar {
  width: 148px;
  height: 2px;
  background: var(--dark-blue);
}

/* カード列 761:617 : gap 39, items-start */
.business-cards {
  display: flex;
  gap: 39px;
  align-items: stretch;
  justify-content: center;
  width: 100%;
}

/* カード 761:618 / 761:631 : w 541 */
.business-card {
  display: flex;
  flex-direction: column;
  width: 541px;
}

/* 画像枠 761:619 : h 337.5, overflow hidden */
.business-card-img {
  position: relative;
  width: 100%;
  height: 337.5px;
  overflow: hidden;
}
/* card2 画像枠 761:632 : 背景グレー, h 338 */
.business-card-img--gray {
  height: 338px;
  background: #e5e7eb;
}
/* biz-1.png(1082x675) = 541x337.5 の2x、biz-2.png(1082x676) = 541x338 の2x。
   どちらも画像枠と同寸＝トリミング済みの書き出しなので等倍で敷くだけでよい。
   （旧: Figmaの塗り拡大率 125.34%/147.13% を上掛けして二重に拡大していた） */
.business-card-img img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: block;
  max-width: none;
}

/* 本文枠 761:620 : px 20, py 24 */
.business-card-body {
  padding: 24px 20px;
  width: 100%;
}
/* 761:621 : flex col, gap 12 */
.business-card-inner {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}
/* 見出し3 761:624 : 20px bold */
.business-card-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--black);
  line-height: 28px;
  letter-spacing: -0.4492px;
  white-space: nowrap;
}
/* 本文 761:628 : 16px regular #4a5565 */
.business-card-text p {
  font-size: 16px;
  font-weight: 400;
  color: var(--gray-text);
  line-height: 24px;
  letter-spacing: -0.3125px;
}
.business-card-text p + p {
  margin-top: 0;
}
/* card2 本文 761:640 : tracking 0.16 */
.business-card-text--2 p {
  letter-spacing: 0.16px;
}

/* ボタン 1017:9542 : white, border 2 navy, w-full, 最下部揃え */
.business-btn {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 16px 0;
  background: var(--white);
  border: 2px solid var(--navy);
  border-radius: 4px;
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.3125px;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.business-btn:hover {
  background: var(--navy);
  color: var(--white);
  box-shadow: 0 4px 10px rgba(38,33,97,0.25);
  transform: translateY(-1px);
}

/* ===== 対応エリア (Frame 99 / 761:644) ===== */
.area {
  width: 1440px;
  background: rgba(255,255,255,0.1);
  padding: 80px 160px 110px;
}

/* 761:645 : flex col, gap 60, items-center */
.area-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  width: 100%;
}

/* 見出し 761:646 : gap 4 */
.area-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
}
.area-title {
  font-size: 32px;
  font-weight: 700;
  color: var(--dark-blue);
  line-height: 36px;
  letter-spacing: 0.3955px;
  text-align: center;
}
.area-bar {
  width: 173px;
  height: 2px;
  background: var(--dark-blue);
}

/* 本文 761:650 : flex col, gap 12, items-start */
.area-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
}

/* 円＋地図 761:651 : flex, gap 142, justify-center */
.area-row {
  display: flex;
  gap: 142px;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
}

/* 円グループ 761:652 : 重なり配置 518×473 */
.area-circles {
  position: relative;
  width: 518px;
  height: 473px;
  flex-shrink: 0;
}
.area-circle {
  position: absolute;
  width: 229px;
  height: 229px;
}
.area-circle img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.area-circle-text {
  position: absolute;
  font-size: 30px;
  font-weight: 700;
  text-align: center;
  line-height: 1.5;
  letter-spacing: 0.3955px;
  white-space: nowrap;
}
.area-circle-text p { margin: 0; }
.area-circle-text--white { color: var(--white); }
.area-circle-text--navy  { color: var(--navy); }

/* 761:653 東京区域 : ml0 mt0, text ml54 mt70 */
.area-circle--1 { left: 0; top: 0; }
.area-circle--1 .area-circle-text { left: 54px; top: 70px; }
/* 761:656 神奈川区域 : ml289 mt0, text ml39 mt70 */
.area-circle--2 { left: 289px; top: 0; }
.area-circle--2 .area-circle-text { left: 39px; top: 70px; }
/* 761:659 千葉・埼玉 : ml144.5 mt244, text ml39 mt70 */
.area-circle--3 { left: 144.5px; top: 244px; }
.area-circle--3 .area-circle-text { left: 39px; top: 70px; }

/* 地図 761:662 : 462×502, overflow hidden */
.area-map {
  position: relative;
  width: 462px;
  height: 502px;
  overflow: hidden;
  flex-shrink: 0;
}
/* map.svg は 462x502 = .area-map と同寸に合成済みの1枚（旧: 7パーツを個別配置） */
.area-map img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* 注釈 761:687 / 955:5587 : 16px DemiLight */
.area-note {
  font-size: 16px;
  font-weight: 350;
  color: var(--black);
  text-align: center;
  line-height: 1.5;
  letter-spacing: 0.3955px;
  white-space: nowrap;
}

/* ===== お問い合わせ (Frame 54 / 761:688) ===== */
.contact {
  position: relative;
  width: 1440px;
  padding: 140px 160px 110px;
  background: var(--contact-bg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/* 背景街並み : wrap left -330.5, top 548, 2101×698 */
/* images/contact-bg.png(2880x1380) = 1440x690 の2x書き出し。
   1440 = セクション幅、690 = 1238-548 ＝ .contact-bg-wrap(left-330.5/top548/2101x698) を
   セクション枠でクリップした可視範囲。左右反転(scaleY(-1) rotate(180deg)) も
   opacity 0.4 も焼き込み済み（実測 alpha 最大102 = 0.4x255）なので
   ラッパーの transform / opacity / 内側2階層は不要。 */
.contact-bg-wrap {
  position: absolute;
  left: 0;
  top: 548px;
  width: 1440px;
  height: 690px;
  z-index: 0;
  pointer-events: none;
}
.contact-bg-wrap img {
  width: 100%;
  height: 100%;
  display: block;
}

/* 白フォーム枠 A 761:690 : px60 py36, gap24, shadow */
.contact-box {
  position: relative;
  z-index: 1;
  width: 100%;
  background: var(--white);
  box-shadow: 1px 4px 2.75px rgba(0,0,0,0.25);
  padding: 36px 60px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ヘッダー 761:691 : gap 20, px 196, items-center */
.contact-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 0 196px;
  width: 100%;
}
.contact-title {
  font-family: 'Inter', var(--font);
  font-size: 30px;
  font-weight: 500;
  color: var(--black);
  text-align: center;
  line-height: 36px;
  letter-spacing: 0.3955px;
}
.contact-subtitle {
  font-family: 'Inter', var(--font);
  font-size: 16px;
  font-weight: 400;
  color: var(--gray-text);
  text-align: center;
  line-height: 24px;
  letter-spacing: -0.3125px;
  white-space: nowrap;
}
.contact-sent-msg {
  margin: 16px auto 0;
  max-width: 600px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: #0f7a3d;
  background: #e6f7ee;
  border: 1px solid #b6e6cb;
  border-radius: 8px;
  padding: 14px 20px;
}

/* フォーム 761:696 : pt24 px48, 内部 gap24 items-center */
.contact-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 24px 48px 0;
  width: 100%;
  box-shadow: 0px 1px 1.5px rgba(0,0,0,0.1), 0px 1px 1px rgba(0,0,0,0.1);
  border-radius: 10px;
}

/* 各フィールド 761:698 : gap 8, items-start, w-full */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  width: 100%;
}

.form-group label {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 700;
  color: var(--black);
  line-height: 20px;
  letter-spacing: -0.1504px;
}
.required {
  color: #fb2c36;
}

/* 入力欄 761:705 : border #d1d5dc, h50, rounded 8, w-full */
.form-input,
.form-textarea {
  width: 100%;
  border: 1px solid #d1d5dc;
  border-radius: 8px;
  font-family: var(--font);
  font-size: 14px;
  color: var(--black);
  background: var(--white);
  outline: none;
  transition: border-color 0.2s;
}
.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  border-color: var(--navy);
}
.form-input {
  height: 50px;
  padding: 0 16px;
}

/* テキストエリア 761:721 : h170 */
.form-textarea {
  height: 170px;
  padding: 12px 16px;
  resize: vertical;
}

/* セレクト Component9 1017:9574 : bg #f2f2f2, w213, rounded8 */
.form-select-wrap {
  width: 213px;
}
.form-select {
  width: 213px;
  background: #f2f2f2;
  border: 1px solid #d1d5dc;
  border-radius: 8px;
  padding: 15px 20px 15px 32px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 700;
  color: #5a6a7a;
  letter-spacing: 0.3955px;
  outline: none;
  cursor: pointer;
}

/* 送信ボタン 1017:9548 : white, border 2 navy, w330, 中央 */
.form-submit {
  width: 330px;
  padding: 16px 0;
  background: var(--white);
  border: 2px solid var(--navy);
  border-radius: 4px;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.3125px;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.form-submit:hover {
  background: var(--navy);
  color: var(--white);
  box-shadow: 0 4px 10px rgba(38,33,97,0.25);
  transform: translateY(-1px);
}

/* ===== フッター ===== */
.footer {
  background: var(--navy);
  height: 71px;
  width: 100%;
}

.footer-inner {
  width: 1440px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 40px;
  height: 100%;
  color: var(--white);
}

.footer-copy p {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0;
}

.footer-nav {
  display: flex;
  gap: 24px;
}
.footer-nav a {
  font-size: 14px;
  color: var(--white);
  line-height: 1.7;
}
.footer-nav a:hover {
  opacity: 0.8;
}

/* ==================================================================== */
/* ===== 会社概要ページ (company.html / node 316:2180) ================= */
/* ==================================================================== */

/* --- Frame 70 (758:246) : 1440x929 / bg白 / flex col gap40 center / px160 --- */
.c-frame70 {
  position: relative;
  width: 1440px;
  height: 929px;
  background: var(--white);
  padding: 0 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  overflow: hidden;
}

/* Ellipse 13 (758:247) : left -79 / top -79 / 1207x1207 / #262161 */
.c-hero-ellipse {
  position: absolute;
  left: -79px;
  top: -79px;
  width: 1207px;
  height: 1207px;
  z-index: 0;
  pointer-events: none;
}
.c-hero-ellipse img {
  width: 100%;
  height: 100%;
  display: block;
  max-width: none;
}

/* Component 5 (758:294) : absolute 1440x64 / px24 / 背景・境界線なし */
.c-header {
  position: absolute;
  left: 0;
  top: 0;
  width: 1440px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  z-index: 10;
}
/* Layer_1 (I758:294;755:558) : 94x22。TOPと同一なので images/Logo.svg を流用 */
.c-logo {
  width: 94px;
  height: 22px;
  flex-shrink: 0;
}
.c-logo img {
  width: 100%;
  height: 100%;
  display: block;
}
/* Navigation (I758:294;755:568) : flex gap4, h-full */
.c-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 100%;
}
.c-nav-link {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 12px;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: var(--navy);
  letter-spacing: -0.3125px;
  white-space: nowrap;
}
/* 現在ページ (I758:294;755:573) : 下線 2px */
.c-nav-link.is-current {
  border-bottom: 2px solid var(--navy);
}
.c-nav-link:hover { opacity: 0.7; }

/* 758:248 : flex col / gap 40 / w-full */
.c-hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

/* Section (758:249) : w-full / px24 py20 / items-start */
.c-hero-title-wrap {
  width: 100%;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
/* 758:250 : 48px Bold / leading 48 / 白 / tracking 0.3516 */
.c-hero-title {
  margin: 0;
  font-size: 48px;
  font-weight: 700;
  line-height: 48px;
  color: var(--white);
  letter-spacing: 0.3516px;
  white-space: nowrap;
}

/* Container (758:251) : #f8fbff / rounded 10 / shadow 0 3px 5px rgba(0,0,0,.25) / px48 py24 */
.c-info-card {
  width: 100%;
  background: #f8fbff;
  border-radius: 10px;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.25);
  padding: 24px 48px;
}
/* 758:253 : w 1008 */
.c-info-table {
  width: 1008px;
}

/* Table Row : 行高はFigma実測。border-box なので border 1px を含めた値を指定 */
.c-info-row {
  display: flex;
  align-items: flex-start;
  width: 100%;
  padding-top: 20px;
  border-bottom: 1px solid #e5e7eb;
}
.c-info-row--h645 { height: 64.5px; }  /* Figmaの行高は border 1px を含む値 */
.c-info-row--h65  { height: 65px;   }
.c-info-row--last { height: 64.5px; border-bottom: none; }

/* Table Cell 左 : w160 / 16px Regular #4a5565 / leading 24 */
.c-info-label {
  width: 160px;
  flex-shrink: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #4a5565;
  letter-spacing: -0.3125px;
}
/* Table Cell 右 : 16px Medium #000 / leading 24 */
.c-info-value {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: #000;
  letter-spacing: -0.3125px;
}
.c-info-value p { margin: 0; }

/* 所在地行 (758:274) : items-center。2行の住所を上下中央、ラベルのみ top20 */
.c-info-row--map {
  align-items: center;
  padding-top: 0;
}
.c-info-row--map .c-info-label {
  align-self: flex-start;
  padding-top: 20px;
}
.c-info-addr-2 { letter-spacing: 0.69px; }

/* 955:2171 : flex-1 / items-end / justify-center */
.c-info-map-wrap {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
}
/* Component 6 (1017:9550) : #262161 / w70 / py8 / rounded4 / 12px Bold 白 leading24 */
.c-map-btn {
  width: 70px;
  padding: 8px 0;
  background: var(--navy);
  border-radius: 4px;
  color: var(--white);
  font-size: 12px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: -0.3125px;
  text-align: center;
  white-space: nowrap;
}
.c-map-btn:hover { opacity: 0.85; }

/* --- Frame 72 (758:309) : Mission / 1440x596 / bg白 / flex gap66 items-center / pl148 --- */
.c-mission {
  position: relative;
  width: 1440px;
  height: 596px;
  background: var(--white);
  display: flex;
  align-items: center;
  gap: 66px;
  padding-left: 148px;
  /* 148+684+66+893 = 1791 でフレーム幅を超えるが、横方向は .page
     (1440px / overflow:hidden) が切るのでここではクリップしない。
     紺バーは top-8 のまま18px全体が上にはみ出すのが正しい
     （Figmaの描画高が 596+8=604 になることで確認済み） */
}

/* 758:316 : #262161 / 416x18 / left0 top-8 */
.c-mission-bar {
  position: absolute;
  left: 0;
  top: -8px;
  width: 416px;
  height: 18px;
  background: var(--navy);
  z-index: 2;
}

/* 758:310 : w684 / h-full / pt133。
   Figmaでは3つのテキストが同一グリッドセルに margin で重ね置きされているため、
   セル原点(left148 / top133)からの実測オフセットで絶対配置する */
.c-mission-text {
  position: relative;
  width: 684px;
  height: 100%;
  flex-shrink: 0;
}
.c-mission-text p {
  margin: 0;
  color: #000;
  letter-spacing: -0.4395px;
}
/* 758:312 : 30px Bold / leading 28 / ml9 mt0 */
.c-mission-label {
  position: absolute;
  left: 9px;
  top: 133px;
  font-size: 30px;
  font-weight: 700;
  line-height: 28px;
  white-space: nowrap;
}
/* 758:314 : 22px Bold / leading 1.6 / ml0 mt85 → 133+85 */
.c-mission-lead {
  position: absolute;
  left: 0;
  top: 218px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
}
/* 758:313 : 20px Medium / leading 1.6 / w673 h250 / ml11 mt146 → 133+146 */
.c-mission-body {
  position: absolute;
  left: 11px;
  top: 279px;
  width: 673px;
  height: 250px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.6;
}

/* 758:315 : 893x596 / object-cover / opacity 80%
   元画像4096x2734(比1.498)は枠(比1.498)と一致するのでトリミングは生じない */
.c-mission-photo {
  width: 893px;
  height: 596px;
  flex-shrink: 0;
}
.c-mission-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.8;
  display: block;
  max-width: none;
  pointer-events: none;
}

/* --- Frame 85 (758:317) : Vision + Value / 1440x866 / #f8fbff --- */
.c-vv {
  width: 1440px;
  height: 866px;
  background: #f8fbff;
  padding: 80px 160px 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* 758:318 : flex col / gap 89 */
.c-vv-inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 89px;
}
/* 758:320 / 758:325 : 30px Bold / leading 28 */
.c-vv-label {
  margin: 0;
  width: 100%;
  font-size: 30px;
  font-weight: 700;
  line-height: 28px;
  color: #000;
  text-align: center;
  letter-spacing: -0.4395px;
}

/* 758:319 : w895 / gap47 */
.c-vision {
  width: 895px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 47px;
}
/* 758:321 : gap15 */
.c-vision-body {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}
/* 758:322 : 22px Bold / leading 1.6 */
.c-vision-lead {
  margin: 0;
  width: 100%;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.6;
  color: #000;
  text-align: center;
  letter-spacing: -0.4395px;
}
/* 758:323 : 20px Medium / leading 1.6 / 2行 */
.c-vision-desc { width: 100%; }
.c-vision-desc p {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.6;
  color: #000;
  text-align: center;
  letter-spacing: -0.4395px;
}

/* 758:324 : gap41 */
.c-value {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 41px;
}
/* 758:326 : flex gap62 / items-center / justify-center */
.c-value-cards {
  width: 100%;
  display: flex;
  gap: 62px;
  align-items: center;
  justify-content: center;
}
/* 758:327/345/358 : 円(270 @ mt69)とコンテンツ(330x324 @ 0,0)を
   同一グリッドセルに重ね置き → カード外形は 330 x 339 */
.c-value-card {
  position: relative;
  width: 330px;
  height: 339px;
  flex-shrink: 0;
}
/* 円 758:328/346/359 : 270x270 / mt69 / ml は 28 / 30 / 31 */
.c-value-circle {
  position: absolute;
  top: 69px;
  width: 270px;
  height: 270px;
}
.c-value-circle--1 { left: 28px; }
.c-value-circle--2 { left: 30px; }
.c-value-circle--3 { left: 31px; }
.c-value-circle img { width: 100%; height: 100%; display: block; }

/* コンテンツ 758:329/347/360 : ml0 mt0 / h324 / px22 / 円の上に重なる */
.c-value-content {
  position: absolute;
  left: 0;
  top: 0;
  width: 330px;
  height: 324px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 22px;
}
.c-value-content--1 { gap: 25px; padding-top: 26px; padding-bottom: 32px; }  /* 758:329 */
.c-value-content--2,
.c-value-content--3 { gap: 30px; padding-top: 32px; padding-bottom: 32px; }  /* 758:347 / 758:360 */

/* アイコン : 外枠とSVG実寸を別々に指定する */
.c-value-icon { position: relative; flex-shrink: 0; }
.c-value-icon img { position: absolute; display: block; max-width: none; }
/* 758:330 : 枠 93.02 x 93.003（SVG実寸 93.0186 x 93.0019 と一致） */
.c-value-icon--1 { width: 93.02px; height: 93.003px; }
.c-value-icon--1 img { left: 0; top: 0; width: 93.0186px; height: 93.0019px; }
/* 758:348 : 枠 91.497 x 83.413。SVGは 93.4951 x 85.4139 で各辺 1px 外側にはみ出す */
.c-value-icon--2 { width: 91.497px; height: 83.413px; }
.c-value-icon--2 img { left: -1px; top: -1px; width: 93.4951px; height: 85.4139px; }
/* 758:361 : 枠 99 x 84（SVG実寸と一致） */
.c-value-icon--3 { width: 99px; height: 84px; }
.c-value-icon--3 img { left: 0; top: 0; width: 99px; height: 84px; }

/* テキスト 758:342/355/378 : w286 / gap11 */
.c-value-text {
  width: 286px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
}
/* 758:343/356/379 : 22px Bold / leading 1.6 */
.c-value-title {
  margin: 0;
  width: 100%;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.6;
  color: #000;
  text-align: center;
  letter-spacing: -0.4395px;
}
/* 閉じ括弧の詰め tracking -9.44px（TOPの .tuck は -10.48px で別値） */
.c-tuck { letter-spacing: -9.44px; }
/* 758:344/357/380 : h101 / 16px Medium / leading 1.6 */
.c-value-desc {
  width: 100%;
  height: 101px;
}
.c-value-desc p {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  color: #000;
  text-align: center;
  letter-spacing: -0.4395px;
}
/* 758:344 : 末尾の「。」だけ 18px */
.c-value-period { font-size: 18px; }

/* --- Frame 117 (761:1539) : お問い合わせCTA / 1440x312 / #f8fbff --- */
.c-cta {
  width: 1440px;
  height: 312px;
  background: #f8fbff;
  padding: 60px 160px 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
/* Component 7 (1017:9385) : w-full(1120) / px80 py48 / rounded8 / 横グラデ */
.c-cta-card {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 48px 80px;
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(to right, #262161 4.872%, #6570d8 100%);
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}
/* 963:8825 : w352.531 / h51 / gap4 */
.c-cta-text {
  width: 352.531px;
  height: 51px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
/* 963:8827 : 18px Medium / leading 27 / 白 */
.c-cta-title {
  margin: 0;
  height: 27px;
  font-size: 18px;
  font-weight: 500;
  line-height: 27px;
  color: var(--white);
  letter-spacing: -0.4395px;
  white-space: nowrap;
}
/* 963:8829 : 14px Medium / leading 20 / 白70% */
.c-cta-sub {
  margin: 0;
  height: 20px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: -0.1504px;
  white-space: nowrap;
}
/* 963:8830 / 963:8831 : flex-1 / justify-end / gap32 */
.c-cta-right {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 32px;
}
/* 963:8832 : 1x48 / 白20% の区切り線 */
.c-cta-divider {
  width: 1px;
  height: 48px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.2);
}
/* 963:8833 : 271.203x56 / rounded14 / 白 / 影2段 */
.c-cta-btn {
  position: relative;
  display: block;
  width: 271.203px;
  height: 56px;
  flex-shrink: 0;
  background: var(--white);
  border-radius: 14px;
  box-shadow: 0 20px 12.5px rgba(0, 0, 0, 0.1), 0 8px 5px rgba(0, 0, 0, 0.1);
}
/* 963:8834 : absolute left32 top16 / 207.203x24 / gap12
   (32 + 207.203 + 32 = 271.203 で左右対称) */
.c-cta-btn-inner {
  position: absolute;
  left: 32px;
  top: 16px;
  width: 207.203px;
  height: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}
/* 963:8836 : 16px Medium / #262161 / leading 24 / 中央寄せ */
.c-cta-btn-label {
  flex: 1 0 0;
  min-width: 0;
  height: 24px;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: var(--navy);
  text-align: center;
  letter-spacing: -0.3125px;
  white-space: nowrap;
}
/* 963:8837 : Icon 20x20 */
.c-cta-btn-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: block;
}
.c-cta-card:hover { opacity: 0.92; }

/* --- ご挨拶 (758:295) --- */
.c-greeting {
  background: #f8fbff;
  padding: 120px 160px 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}
.c-greeting-title {
  width: 1104px;
  font-size: 30px;
  font-weight: 700;
  line-height: 36px;
  color: #000;
  letter-spacing: 0.3955px;
}
.c-greeting-body {
  display: flex;
  gap: 48px;
  align-items: flex-start;
  width: 100%;
}
.c-greeting-photo-col {
  width: 381px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.c-greeting-photo {
  width: 381px;
  height: 504px;
  border-radius: 10px;
  overflow: hidden;
  background: #e5e7eb;
}
.c-greeting-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.c-greeting-caption-role {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #6a7282;
  letter-spacing: -0.1504px;
}
/* 758:302 : h48固定 / gap4。中身は 20+4+28=52 で 4px はみ出すが
   Figmaも枠を48で確定させているため、写真列の高さは 504+24+48=576 になる */
.c-greeting-caption {
  width: 100%;
  height: 48px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.c-greeting-caption-name {
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
  color: #000;
  letter-spacing: -0.4492px;
}
.c-greeting-text {
  width: 691px;
}
.c-greeting-text p {
  font-size: 18.5px;
  font-weight: 500;
  line-height: 1.4;
  color: #000;
  margin: 0;
}
.c-greeting-text .gh {
  font-size: 22px;
  font-weight: 700;
}
.c-greeting-text .blank {
  font-size: 18.5px;
}
.c-greeting-text .blank--lg {
  font-size: 22px;
}

/* --- 代表メッセージ (316:2224) --- */
.c-message {
  background: #f9fafb;
  padding: 120px 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}
.c-message-title {
  font-size: 30px;
  font-weight: 500;
  line-height: 36px;
  color: #0a0a0a;
  letter-spacing: 0.3955px;
  text-align: center;
}
.c-message-body {
  display: flex;
  gap: 48px;
  align-items: flex-start;
}
.c-message-photo-col {
  width: 381px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.c-message-photo {
  width: 381px;
  height: 550.391px;
  border-radius: 10px;
  overflow: hidden;
  background: #e5e7eb;
}
.c-message-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.c-message-caption-role {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #6a7282;
  letter-spacing: -0.1504px;
}
.c-message-caption-name {
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
  color: #0a0a0a;
  letter-spacing: -0.4492px;
  margin-top: 4px;
}
.c-message-text {
  width: 708px;
  color: #000;
}
.c-msg-h {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
}
.c-msg-h--gap {
  margin-top: 1.3em;
}
.c-msg-p {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.7;
}

/* --- ビル写真 (フルブリード / 615:114) --- */
.c-building {
  width: 1440px;
  height: 923px;
  overflow: hidden;
}
.c-building img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- ビル写真とフッターの間の余白 (Figmaデザイン準拠) --- */
.c-gap {
  height: 1655px;
  background: var(--white);
}

/* ==================================================================== */
/* ===== 会社運営・運営管理版LP (management.html / node 759:356) ======= */
/* ==================================================================== */

/* Component 5 (759:381) : ヘッダー 1440×64。
   .c-header は absolute なので白帯を置いて基準にする */
.mg-header-band {
  position: relative;
  width: 1440px;
  height: 64px;
  background: var(--white);
  z-index: 10;
}

/* --- メイン (759:361) : 1440×601 / bg #262161 --- */
.mg-hero {
  position: relative;
  width: 1440px;
  height: 601px;
  background: var(--navy);
  overflow: hidden;
}

/* 771:557「運営管理 1」: Figmaの写真ノードは left0/top-268/1440×1087 だが、
   書き出し画像 mg-hero-photo.png は 2880×1202 ＝ ヒーロー帯 1440×601 の2x で
   トリミング済み。よって枠は inset:0 (1440×601) で等倍に敷く。 */
.mg-hero-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.mg-hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  max-width: none;
  pointer-events: none;
}

/* 771:558 Rectangle 79 : left542 / top130 / 898×261。左辺が斜めの台形 #262161 */
.mg-hero-panel {
  position: absolute;
  left: 542px;
  top: 130px;
  width: 898px;
  height: 261px;
  z-index: 1;
}
.mg-hero-panel img {
  width: 100%;
  height: 100%;
  display: block;
  max-width: none;
}

/* ピル枠 759:368 / 759:365 : fill無し・stroke白の輪郭のみ。
   Figmaでもテキストより後ろ→前の順で重なっているのでそのまま上に置く */
.mg-pill {
  position: absolute;
  z-index: 3;
  pointer-events: none;
}
.mg-pill img {
  width: 100%;
  height: 100%;
  display: block;
  max-width: none;
}
.mg-pill--area { left: 645px; top: 164px; width: 253px;     height: 35px;     }
.mg-pill--rate { left: 909px; top: 164px; width: 238.782px; height: 35.174px; }

/* ピル内テキスト 759:367 / 759:364 : 20px Medium #fdfafa / leading24 / 中央寄せ。
   Figmaは中心X指定なので translateX(-50%) で再現 */
.mg-pill-text {
  position: absolute;
  z-index: 2;
  margin: 0;
  transform: translateX(-50%);
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
  color: #fdfafa;
  text-align: center;
  letter-spacing: -0.3125px;
  white-space: nowrap;
}
.mg-pill-text--area { left: 771.92px;  top: 169.96px; width: 209.336px; }
.mg-pill-text--rate { left: 1028.79px; top: 170px;    width: 197.572px; }

/* 759:362 : left645 / top212 / 44px Medium 白 / leading 1.6 / 2行 */
.mg-hero-title {
  position: absolute;
  left: 645px;
  top: 212px;
  margin: 0;
  z-index: 4;
  font-size: 44px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--white);
  letter-spacing: -0.3125px;
  white-space: nowrap;
}
.mg-hero-title span { display: block; }

/* --- Section (771:559) : こんなお悩みありませんか？ / 1440×781.25 / bg白 --- */
.mg-worry {
  position: relative;
  width: 1440px;
  height: 781.25px;
  /* 実測 rgba(255,255,255,0.098)。背面の透かしを透過させる */
  background: rgba(255, 255, 255, 0.1);
}

/* 771:560 Heading 2 : x160 y120 / 1120×36 / 30px Bold #000 */
.mg-worry-title {
  position: absolute;
  left: 160px;
  top: 120px;
  width: 1120px;
  height: 36px;
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  line-height: 36px;
  color: #000;
  letter-spacing: 0.3955px;
}

/* 771:1742 Frame 127 : x160 y204 / 1120×353.25。
   342.863×3 + 45.70×2 = 1120 */
.mg-worry-cards {
  position: absolute;
  left: 160px;
  top: 204px;
  width: 1120px;
  height: 353.253px;
  display: flex;
  gap: 45.70px;
}

/* カード : 342.863×353.253 / 枠2px #262161 / 角丸4 */
.mg-worry-card {
  position: relative;
  width: 342.863px;
  height: 353.253px;
  flex-shrink: 0;
  background: var(--white);
  border-radius: 4px;
  /* border だと絶対配置の子の基準が2pxずれるので inset shadow で内側に枠を描く */
  box-shadow: inset 0 0 0 2px var(--navy);
}

/* イラスト : カードごとに位置もサイズも異なる */
.mg-worry-ill { position: absolute; }
.mg-worry-ill img { width: 100%; height: 100%; display: block; max-width: none; }
.mg-worry-ill--1 { left: 47.862px; top: 32.328px; width: 247.140px; height: 203.925px; }  /* 771:1691 */
.mg-worry-ill--2 { left: 69.430px; top: 36.845px; width: 204.003px; height: 199.408px; }  /* 771:1511 */
.mg-worry-ill--3 { left: 70.001px; top: 33.391px; width: 202.862px; height: 202.862px; }  /* 771:1127 */

/* テキスト枠 771:1692/1696/1693 : y260.253 / 342.863×93 / 内側 x24 */
.mg-worry-text {
  position: absolute;
  left: 0;
  top: 260.253px;
  width: 342.863px;
  height: 93px;
  padding: 0 24px;
}
/* h3 : y0 / w294.863 h24 / 17px Bold #262161 / leading 24
   ※Figmaのレイヤー名は「15px / #1A3A5C」だが実測は17px / #262161 */
.mg-worry-text h3 {
  margin: 0;
  width: 294.863px;
  height: 24px;
  font-size: 17px;
  font-weight: 700;
  line-height: 24px;
  color: var(--navy);
  white-space: nowrap;
}
/* p : y32 / w294.863 h49 / 13px #000 / leading 24 */
.mg-worry-text p {
  margin: 8px 0 0;
  width: 294.863px;
  height: 49px;
  font-size: 13.4px;
  font-weight: 400;
  line-height: 24px;
  color: #000;
}

/* 1017:9443 Component 7 : x160 y605.25 / 1120×56 / 横グラデ */
.mg-worry-cta {
  position: absolute;
  left: 160px;
  top: 605.253px;
  width: 1120px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  border-radius: 4px;
  background: linear-gradient(to right, #262161 0%, #6e67c6 100%);
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}
.mg-worry-cta-label {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: var(--white);
  letter-spacing: -0.3125px;
  white-space: nowrap;
}
.mg-worry-cta-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: block;
}
.mg-worry-cta:hover { opacity: 0.92; }

/* --- 三つ (771:1747) : 3つの強み / 1440×1275.65 --- */
.mg-str {
  position: relative;
  width: 1440px;
  height: 1275.65px;
  background: rgba(153, 194, 255, 0.1);   /* 実測値 */
}

/* 771:1795 Frame 130 : x160 y100 / 1120×81 */
.mg-str-head {
  position: absolute;
  left: 160px;
  top: 100px;
  width: 1120px;
}
.mg-str-head h2 {
  margin: 0;
  height: 46px;
  font-size: 30px;
  font-weight: 700;
  line-height: 46px;
  color: var(--navy);
}
.mg-str-head p {
  margin: 8px 0 0;          /* 771:1750 y54 = 46 + 8 */
  height: 27px;
  font-size: 15px;
  font-weight: 400;
  line-height: 27px;
  color: #5a6a7a;
}

/* 771:1751 : x160 y229 / 1120×395 / 白 / 角丸12 */
.mg-str-box {
  position: absolute;
  left: 160px;
  top: 229px;
  width: 1120px;
  height: 395px;
  background: var(--white);
  border-radius: 12px;
  overflow: hidden;
}
/* 771:1794 : x903 y34.42 / 235.32×360.01。カードの背面に薄く入る装飾 */
.mg-str-zero {
  position: absolute;
  left: 903px;
  top: 34.42px;
  width: 235.322px;
  height: 360.015px;
  z-index: 0;
}
.mg-str-zero img { width: 100%; height: 100%; display: block; max-width: none; }

/* 771:1792 Frame 129 : x58 y49.42 / 866.04×71.5 */
.mg-str-box-head {
  position: absolute;
  left: 58px;
  top: 49.42px;
  width: 866.039px;
  z-index: 1;
}
.mg-str-box-head h3 {
  margin: 0;
  height: 38px;
  font-size: 22.5px;
  font-weight: 700;
  line-height: 38px;
  color: #1a3a5c;
}
.mg-str-box-head p {
  margin: 8px 0 0;          /* 771:1754 y46 = 38 + 8 */
  height: 25.5px;
  font-size: 15px;
  font-weight: 400;
  line-height: 25.5px;
  color: #5a6a7a;
}

/* 771:1755 : x56 y152.89 / 1008×193.73 / gap20 */
.mg-str-cards {
  position: absolute;
  left: 56px;
  top: 152.89px;
  width: 1008px;
  height: 193.73px;
  display: flex;
  gap: 20px;
  z-index: 1;
}
.mg-str-card {
  position: relative;
  width: 322.66px;
  height: 193.73px;
  flex-shrink: 0;
  background: var(--white);
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px #d8e2ec, 0 1px 3px rgba(0, 0, 0, 0.05);
  text-align: center;
}
/* 見出し y27 / ラベル y71.39 / 本文 y101.48 */
.mg-str-card-title {
  position: absolute;
  left: 0; right: 0; top: 27px;
  margin: 0;
  height: 32px;
  font-size: 22px;
  font-weight: 700;
  line-height: 32px;
  color: var(--navy);
}
.mg-str-card-label {
  position: absolute;
  left: 0; right: 0; top: 71.39px;
  margin: 0;
  height: 19px;
  font-size: 13px;
  font-weight: 700;
  line-height: 19px;
  color: #1a3a5c;
}
.mg-str-card-body {
  position: absolute;
  /* Figma実測 271.5〜272.8 だが、13pxのChrome描画では21文字(273px)が
     入らず余計な折り返しが出るため 274 に広げる（左寄せなので右余白のみ変化） */
  left: 25.5px; width: 274px; top: 101.48px;
  margin: 0;
  font-size: 13px;
  font-weight: 400;
  line-height: 22.5px;
  color: #5a6a7a;
  text-align: left;
}

/* --- 771:1768「2: 3」: x160 y672 / 1120×483.65 --- */
.mg-less {
  position: absolute;
  left: 160px;
  top: 672px;
  width: 1120px;
  height: 483.65px;
}
/* 771:1769 : 222.72×34.09 / bg #C0CAFA / 内側 x16 y7 */
.mg-less-tag {
  position: absolute;
  left: 0;
  top: 0;
  width: 222.72px;
  height: 34.09px;
  display: flex;
  align-items: center;
  padding-left: 16px;
  background: #c0cafa;
  border-radius: 17px;
  font-size: 13.6px;
  font-weight: 700;
  line-height: 19px;
  color: var(--navy);
}
/* 771:1771 : y46.09 / h32 */
.mg-less-title {
  position: absolute;
  left: 0;
  top: 46.09px;
  margin: 0;
  width: 1120px;
  height: 32px;
  font-size: 22px;
  font-weight: 700;
  line-height: 32px;
  color: #1a3a5c;
}

/* 771:1772 : y118.09 / 1120×365.56。
   地色 #D8E2EC の上に372幅の白カードを2px間隔で3枚 → 隙間が区切り線になる */
.mg-less-cards {
  position: absolute;
  left: 0;
  top: 118.09px;
  width: 1120px;
  height: 365.56px;
  background: #d8e2ec;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  gap: 2px;
}
.mg-less-card {
  position: relative;
  width: 372px;
  height: 358px;
  flex-shrink: 0;
  background: var(--white);
}
/* 771:1776 等 : x16 y32 / 340×168 */
.mg-less-photo {
  position: absolute;
  left: 16px;
  top: 32px;
  width: 340px;
  height: 168px;
  overflow: hidden;
  background: #f4f7fa;
  border-radius: 4px;
}
.mg-less-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  max-width: none;
}
/* 771:1801 等 : x16 y224 */
.mg-less-card-title {
  position: absolute;
  left: 16px;
  top: 224px;
  margin: 0;
  width: 340px;
  height: 32px;
  font-size: 22px;
  font-weight: 700;
  line-height: 32px;
  color: #000;
}
.mg-less-card-body {
  position: absolute;
  left: 16px;
  top: 268px;               /* 224 + 44 */
  margin: 0;
  width: 340px;
  font-size: 13px;
  font-weight: 400;
  line-height: 23.5px;
  color: #5c5c5c;
}

/* --- Frame 118 (963:8777) : 対応エリア / 1440×678 / bg白 --- */
.mg-area {
  position: relative;
  width: 1440px;
  height: 678px;
  /* Figmaでは背景なし（完全に透明）。背面の透かしがそのまま見える */
}
/* 963:8781 : x160 y80 / 1120×36 / 30px Bold #262161 */
.mg-area-title {
  position: absolute;
  left: 160px;
  top: 80px;
  width: 1120px;
  height: 36px;
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  line-height: 36px;
  color: var(--navy);
}
/* 円 : TOPと同じ 229×229 の文字入りSVGをそのまま流用 */
.mg-area-circle {
  position: absolute;
  top: 176px;
  width: 229px;
  height: 229px;
}
.mg-area-circle img { width: 100%; height: 100%; display: block; }
.mg-area-circle--1 { left: 160px; }   /* 963:8786 */
.mg-area-circle--2 { left: 449px; }   /* 963:8789 : Frame162内 x289 */

/* 963:8792 : x160 y445 / 294×24 */
.mg-area-note {
  position: absolute;
  left: 160px;
  top: 445px;
  width: 294px;
  height: 24px;
  margin: 0;
  font-size: 16.4px;
  font-weight: 350;
  line-height: 24px;
  color: #000;
  white-space: nowrap;
}
/* 1027:9586 Frame 163 : x820 y176 / 462×502。
   mg-area-map.svg は TOPの map.svg の水色#9ECAF1・青#38549A を
   灰#A8A9A9 に置換したもの（形状は完全に同一） */
.mg-area-map {
  position: absolute;
  left: 820px;
  top: 176px;
  width: 462px;
  height: 502px;
  overflow: hidden;
}
.mg-area-map img {
  width: 100%;
  height: 100%;
  display: block;
  max-width: none;
}

/* --- 流れ (771:1882) : 導入の流れ / 1440×495.95 / bg白 --- */
.mg-flow {
  position: relative;
  width: 1440px;
  height: 495.95px;
  /* 実測 rgba(255,255,255,0.098) */
  background: rgba(255, 255, 255, 0.1);
}
/* 771:1884 : x160 y20 / 1120×46 / 30px Bold #262161 */
.mg-flow-title {
  position: absolute;
  left: 160px;
  top: 20px;
  width: 1120px;
  height: 46px;
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  line-height: 46px;
  color: var(--navy);
}
/* 771:1885 : y78 (=20+58) / 1120×27 / 15px #5A6A7A */
.mg-flow-sub {
  position: absolute;
  left: 160px;
  top: 78px;
  width: 1120px;
  height: 27px;
  margin: 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 27px;
  color: #5a6a7a;
}
/* 771:1937 Line 10 : 円1〜円7の中心をつなぐ 982×2 */
.mg-flow-line {
  position: absolute;
  left: 229px;
  top: 183px;
  width: 982px;
  height: 2px;
  background: #1a3a5c;
  z-index: 0;
}

/* 771:1934 Frame 148 : y153 / ステップ138.14幅をピッチ163.643で7つ */
.mg-flow-steps {
  position: absolute;
  left: 160px;
  top: 153px;
  width: 1120px;
  display: flex;
  gap: 25.503px;            /* 163.643 - 138.14 */
  z-index: 1;
}
.mg-flow-step {
  position: relative;
  width: 138.14px;
  flex-shrink: 0;
  text-align: center;
}
/* 771:1892 : 76.509×76.509 / 枠2px #082671 / 白地 */
.mg-flow-circle {
  width: 76.509px;
  height: 76.509px;
  margin: 0 auto;
  border: 2px solid #082671;
  border-radius: 50%;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s, box-shadow 0.2s;
}
/* 771:1893 : 18px Bold #1A3A5C */
.mg-flow-circle span {
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  color: #1a3a5c;
}
.mg-flow-step:hover .mg-flow-circle {
  background: #1a3a5c;
  border-color: #1a3a5c;
  transform: scale(1.08);
  box-shadow: 0 4px 12px rgba(8,38,113,0.3);
}
.mg-flow-step:hover .mg-flow-circle span {
  color: var(--white);
}

/* 771:1922 Frame 136 : y89.26（円の下端76.51 + 12.75） */
.mg-flow-label {
  margin: 12.751px 0 0;
  height: 18px;
  font-size: 15px;
  font-weight: 700;
  line-height: 18px;
  color: #082671;
  white-space: nowrap;
}
/* sub : ラベルから y26.5 / 12px #5A6A7A / leading 17.53 */
.mg-flow-sub2 {
  margin: 8.5px 0 0;        /* 26.5 - 18 */
  font-size: 11.6px;
  font-weight: 400;
  line-height: 17.53px;
  color: #5a6a7a;
}

/* 771:1886 : y336.76 (=153+183.76) / 1120×59.19 / bg #FFF1F1 */
.mg-flow-note {
  position: absolute;
  left: 160px;
  top: 336.76px;
  width: 1120px;
  height: 59.19px;
  background: #fff1f1;
  border-radius: 8px;
}
/* 771:1888 : x40.45 y19.55 / 13px #1A3A5C */
.mg-flow-note p {
  position: absolute;
  left: 40.45px;
  top: 19.55px;
  margin: 0;
  font-size: 13px;
  font-weight: 400;
  line-height: 19px;
  color: #1a3a5c;
  white-space: nowrap;
}

/* --- Frame 152 (771:2083) : オーナー様の声 / 1440×603 / bg #312C69 --- */
.mg-voice {
  position: relative;
  width: 1440px;
  height: 603px;
  background: rgba(38, 33, 97, 0.949);   /* 実測 #262161 @95% */
}
/* 771:2082 : x160 y120 / 1120×46 / 30px Bold 白 */
.mg-voice-title {
  position: absolute;
  left: 160px;
  top: 120px;
  width: 1120px;
  height: 46px;
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  line-height: 46px;
  color: var(--white);
}
/* 771:2266 Frame 156 : x160 y214 / カード330 / gap65 */
.mg-voice-cards {
  position: absolute;
  left: 160px;
  top: 214px;
  width: 1120px;
  height: 329px;
  display: flex;
  gap: 65px;
}
.mg-voice-card {
  position: relative;
  width: 330px;
  height: 329px;
  flex-shrink: 0;
  background: var(--white);
  border-radius: 6px;
  overflow: hidden;
}
/* 771:2091/2094/2095 Rectangle 83 : 巨大なベクターがカードでクリップされ、
   上部の灰色帯を斜めに切り取っている。実測した多角形で再現する
   （カードごとに元ベクターのサイズが 413.2 / 449.3 / 453.3 と違うため角度も違う） */
.mg-voice-band {
  position: absolute;
  left: 0;
  top: 0;
  width: 330px;
  background: #d9d9d9;
}
.mg-voice-band--1 { height: 129px; clip-path: polygon(0 0, 286.4px 0, 138.3px 129px, 0 129px); }
.mg-voice-band--2 { height: 130px; clip-path: polygon(0 0, 303.9px 0, 132.8px 130px, 0 130px); }
.mg-voice-band--3 { height: 129px; clip-path: polygon(0 0, 302.2px 0, 143.3px 129px, 0 129px); }

/* 761:1949 等 : x23 y16 / 24px Bold #1A3A5C */
.mg-voice-name {
  position: absolute;
  left: 23px;
  top: 16px;
  margin: 0;
  height: 42px;
  font-size: 27px;
  font-weight: 700;
  line-height: 42px;
  color: #1a3a5c;
  z-index: 2;
}
/* 人物イラスト : カードごとに位置・サイズが違う */
.mg-voice-ill { position: absolute; z-index: 1; }
.mg-voice-ill img { width: 100%; height: 100%; display: block; max-width: none; }
.mg-voice-ill--1 { left: 183px;      top: -0.205px; width: 100px;      height: 130px;      }
.mg-voice-ill--2 { left: 178.3125px; top: 13px;     width: 115.374px;  height: 116.996px;  }
.mg-voice-ill--3 { left: 180.379px;  top: 21.795px; width: 108.187px;  height: 109.708px;  }

/* 761:1952 等 : x25 y152 / w280 / 14px #1A1A1A / leading 26 */
.mg-voice-body {
  position: absolute;
  left: 25px;
  /* Figmaのy152だと実測より5px低くなるため147に補正 */
  top: 147px;
  width: 280px;
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 26px;
  color: #1a1a1a;
}
/* Figma上でカード2・3の本文だけ1行目が2px下（サブピクセル配置の差）*/
.mg-voice-card:nth-child(2) .mg-voice-body,
.mg-voice-card:nth-child(3) .mg-voice-body { top: 149px; }

/* --- Frame 117 (761:1728) : お問い合わせCTA / 1440×332 / bg #312C69 ---
   中身(1017:9405)は会社概要と同じ Component 7 なので .c-cta-card を流用。
   332 = pt60 + カード152 + pb120 */
.mg-cta {
  width: 1440px;
  height: 332px;
  background: rgba(38, 33, 97, 0.949);   /* 実測 #262161 @95% */
  padding: 60px 160px 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* --- Logo/Mark (771:2277) : ページ背面の巨大な透かし ---
   x-2534.219 / y406.254 / 4123.589×3831.746。
   TOPの images/Mark.svg と同一の絵柄（縦横比 1.0762 で一致、倍率1.3476）。
   .page は isolation:isolate なので z-index:-1 でセクションの背面に回る */
.mg-page-mark {
  position: absolute;
  left: calc(50% - 3254.219px);
  top: 406.254px;
  width: 4123.589px;
  height: 3831.746px;
  z-index: -1;
  pointer-events: none;
}
.mg-page-mark img {
  width: 100%;
  height: 100%;
  display: block;
  max-width: none;
}

/* ==================================================================== */
/* ===== 会社運営・集金代行版LP (collection.html / node 955:2178) ====== */
/* ==================================================================== */

/* --- メイン（ヒーロー）: 1440×601 --- */
.sk-hero {
  position: relative;
  width: 1440px;
  height: 601px;
  background: var(--navy);
  overflow: hidden;
}
.sk-hero-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.sk-hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  max-width: none;
  pointer-events: none;
}
/* 台形パネル : 下辺左 x634 / top130 / 898×261。右は画面外にはみ出してクリップ */
.sk-hero-panel {
  position: absolute;
  left: 634px;
  top: 130px;
  width: 898px;
  height: 261px;
  z-index: 1;
}
.sk-hero-panel img {
  width: 100%;
  height: 100%;
  display: block;
  max-width: none;
}
/* ピル : 枠(stroke白)の中央にテキスト */
.sk-pill {
  position: absolute;
  top: 164px;
  height: 35px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sk-pill img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  max-width: none;
}
.sk-pill span {
  position: relative;
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
  color: #fdfafa;
  letter-spacing: -0.3125px;
  white-space: nowrap;
}
.sk-pill--area  { left: 743px;  width: 253px; }
.sk-pill--cases { left: 1007px; width: 255px; }

/* 見出し : left743 / top212 / 44px Medium 白 / leading 1.6 / 2行 */
.sk-hero-title {
  position: absolute;
  left: 743px;
  top: 212px;
  margin: 0;
  z-index: 3;
  font-size: 44px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--white);
  letter-spacing: -0.3125px;
  white-space: nowrap;
}
.sk-hero-title span { display: block; }

/* --- こんなお悩みありませんか？ : 1440×1070 / カード6枚(3×2) --- */
.sk-worry {
  position: relative;
  width: 1440px;
  height: 1070px;
  background: rgba(255, 255, 255, 0.1);   /* 背面の透かしを透過させる */
}
.sk-worry-title {
  position: absolute;
  left: 160px;
  top: 120px;
  width: 1120px;
  height: 36px;
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  line-height: 36px;
  color: #000;
  letter-spacing: 0.3955px;
}
/* カード 342.863×297 / 横gap45.70 / 縦gap48 */
.sk-worry-cards {
  position: absolute;
  left: 160px;
  top: 204px;
  width: 1120px;
  display: flex;
  flex-wrap: wrap;
  gap: 48px 45.70px;
}
.sk-worry-card {
  position: relative;
  width: 342.863px;
  height: 297px;
  flex-shrink: 0;
  background: var(--white);
  border-radius: 6px;
  box-shadow: inset 0 0 0 2px var(--navy);
}
/* イラストは6点それぞれ位置・サイズが異なる（カード左上からの相対） */
.sk-worry-ill { position: absolute; }
.sk-worry-ill img { width: 100%; height: 100%; display: block; max-width: none; }
.sk-worry-ill--1 { left: 72px;  top: 73px;  width: 199px; height: 111px; }
.sk-worry-ill--2 { left: 71px;  top: 43px;  width: 203px; height: 141px; }
.sk-worry-ill--3 { left: 79px;  top: 68px;  width: 184px; height: 117px; }
.sk-worry-ill--4 { left: 69px;  top: 34px;  width: 205px; height: 150px; }
.sk-worry-ill--5 { left: 51px;  top: 51px;  width: 242px; height: 124px; }
.sk-worry-ill--6 { left: 94px;  top: 22px;  width: 154px; height: 162px; }

/* テキスト : カード内 x24 / y207 */
.sk-worry-text {
  position: absolute;
  left: 24px;
  top: 207px;
  width: 294.863px;
}
.sk-worry-text h3 {
  margin: 0;
  height: 24px;
  font-size: 17px;
  font-weight: 700;
  line-height: 24px;
  color: var(--navy);
  white-space: nowrap;
}
.sk-worry-text p {
  margin: 9px 0 0;   /* 実測に合わせ +1px */
  width: 300px;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  color: #000;
}

/* CTAバー : 運営管理版の .mg-worry-cta と同じ仕様 */
.sk-worry-cta {
  position: absolute;
  left: 160px;
  top: 897px;
  width: 1120px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  border-radius: 4px;
  background: linear-gradient(to right, #262161 0%, #6e67c6 100%);
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}
.sk-worry-cta-label {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: var(--white);
  letter-spacing: -0.3125px;
  white-space: nowrap;
}
.sk-worry-cta-icon { width: 20px; height: 20px; flex-shrink: 0; display: block; }
.sk-worry-cta:hover { opacity: 0.92; }

/* --- 背面の透かし（Logo/Mark）: まず運営管理版と同じ配置で検証 --- */
.sk-page-mark {
  position: absolute;
  left: calc(50% - 3254.219px);
  top: 406.254px;
  width: 4123.589px;
  height: 3831.746px;
  z-index: -1;
  pointer-events: none;
}
.sk-page-mark img { width: 100%; height: 100%; display: block; max-width: none; }

/* --- サービス内容 : 1440×740 / アイコンカード8枚(4×2) --- */
.sk-svc {
  position: relative;
  width: 1440px;
  height: 740px;
  background: rgba(153, 194, 255, 0.1);
}
.sk-svc-title {
  position: absolute;
  left: 161px;
  top: 104px;
  width: 1120px;
  height: 36px;
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  line-height: 36px;
  color: var(--navy);
}
.sk-svc-sub {
  position: absolute;
  left: 160px;
  top: 153px;
  width: 1120px;
  margin: 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 27px;
  color: #000;
}
/* 4列 : カード242.5 / gap50。行ごとに高さが違う（アイコンの高さ差） */
.sk-svc-row {
  position: absolute;
  left: 161px;
  width: 1118px;
  display: flex;
  gap: 50px;
}
.sk-svc-row--1 { top: 230px; }
.sk-svc-row--2 { top: 463px; }
.sk-svc-card {
  position: relative;
  width: 242px;
  flex-shrink: 0;
  background: var(--white);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.sk-svc-row--1 .sk-svc-card { height: 183px; }
.sk-svc-row--2 .sk-svc-card { height: 175px; }

/* アイコン : 8点それぞれ位置・サイズが異なる（カード左上からの相対） */
.sk-svc-icon { position: absolute; }
.sk-svc-icon img { width: 100%; height: 100%; display: block; max-width: none; }
.sk-svc-icon--1 { left: 87px; top: 27px; width: 65px;  height: 81px; }
.sk-svc-icon--2 { left: 73px; top: 25px; width: 96px;  height: 83px; }
.sk-svc-icon--3 { left: 81px; top: 29px; width: 79px;  height: 79px; }  /* 参照インク実測で1px補正 */
.sk-svc-icon--4 { left: 84px; top: 19px; width: 74px;  height: 87px; }
.sk-svc-icon--5 { left: 67px; top: 21px; width: 104px; height: 78px; }
.sk-svc-icon--6 { left: 84px; top: 27px; width: 74px;  height: 72px; }
.sk-svc-icon--7 { left: 78px; top: 17px; width: 86px;  height: 84px; }
.sk-svc-icon--8 { left: 85px; top: 20px; width: 72px;  height: 80px; }  /* 参照インク実測で1px補正 */

/* ラベル : 16px Bold #1A3A5C / leading 21 / 中央寄せ */
.sk-svc-label {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 21px;
  color: #1a3a5c;
  text-align: center;
}
.sk-svc-row--1 .sk-svc-label { top: 122px; }
.sk-svc-row--2 .sk-svc-label { top: 115px; }

/* --- 導入後のメリット : 1440×807 / 番号バッジ付きカード4枚(2×2) --- */
.sk-mrt {
  position: relative;
  width: 1440px;
  height: 807px;
  background: var(--white);
}
.sk-mrt-title {
  position: absolute;
  left: 160px;
  top: 105px;
  width: 1120px;
  height: 36px;
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  line-height: 36px;
  color: var(--navy);
}
.sk-mrt-sub {
  position: absolute;
  left: 160px;
  top: 154px;
  width: 1120px;
  margin: 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 27px;
  color: #5a6a7a;
}
/* カード 504×160 / 横gap112 / 縦gap93 */
.sk-mrt-cards {
  position: absolute;
  left: 162px;
  top: 273px;
  width: 1120px;
  display: flex;
  flex-wrap: wrap;
  gap: 93px 112px;
}
.sk-mrt-card {
  position: relative;
  width: 504px;
  height: 160px;
  flex-shrink: 0;
  border: 2px solid var(--navy);
  border-radius: 2px;
  background: var(--white);
}
/* バッジ : 80pxの塗り円。カードの左上角が中心 */
.sk-mrt-badge {
  position: absolute;
  left: -42px;
  top: -42px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 8px;   /* 数字の光学中心を円の中心に合わせる */
  font-size: 50px;
  font-weight: 700;
  line-height: 1;
  color: var(--white);
}
/* 見出し : カード相対 x50 / インク y36 */
.sk-mrt-card-title {
  position: absolute;
  left: 47px;
  top: 28px;
  margin: 0;
  font-size: 22.4px;
  font-weight: 700;
  line-height: 30px;
  color: #000;
  white-space: nowrap;
}
/* 本文 : 3行 / leading 25.5 */
.sk-mrt-card-body {
  position: absolute;
  left: 47px;
  top: 67px;
  margin: 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 25.5px;
  color: #000;
}

/* --- 対応エリア（集金代行版）: TOPの .area を流用し背景だけ差し替え --- */
.sk-area {
  background: rgba(153, 194, 255, 0.1);
  /* TOPは110だが集金代行版は65（セクション高785で次が4067から始まる） */
  padding-bottom: 65px;
}

/* --- 導入の流れ（集金代行版）: 1440×377 / 4ステップ --- */
.sk-flow {
  position: relative;
  width: 1440px;
  height: 377px;
  background: rgba(153, 194, 255, 0.1);
}
.sk-flow-title {
  position: absolute;
  left: 160px;
  top: 20px;
  width: 1120px;
  height: 46px;
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  line-height: 46px;
  color: var(--navy);
}
.sk-flow-sub {
  position: absolute;
  left: 160px;
  top: 78px;
  width: 1120px;
  height: 27px;
  margin: 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 27px;
  color: #5a6a7a;
}
/* 接続線 : 円1〜円4の中心を結ぶ 840×2 / #D8E2EC */
.sk-flow-line {
  position: absolute;
  left: 299.5px;
  top: 182px;
  width: 840px;
  height: 2px;
  background: #d8e2ec;
  z-index: 0;
}
/* 4ステップ : ピッチ280（円の中心 299.5 / 579.5 / 859.5 / 1139.5） */
.sk-flow-steps {
  position: absolute;
  left: 159.5px;
  top: 149px;
  width: 1120px;
  display: flex;
  z-index: 1;
}
.sk-flow-step {
  width: 280px;
  flex-shrink: 0;
  text-align: center;
}
/* 円 : 直径72 / 枠2px #1A3A5C / 白地。4番目のみ塗り */
.sk-flow-circle {
  width: 72px;
  height: 72px;
  margin: 0 auto;
  box-sizing: border-box;
  border: 2px solid #1a3a5c;
  border-radius: 50%;
  background: rgba(245, 249, 255, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s, box-shadow 0.2s;
}
.sk-flow-circle span {
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  color: #1a3a5c;
}
.sk-flow-step:hover .sk-flow-circle {
  background: #1a3a5c;
  transform: scale(1.08);
  box-shadow: 0 4px 12px rgba(26,58,92,0.3);
}
.sk-flow-step:hover .sk-flow-circle span {
  color: var(--white);
}
/* ラベル : 円の下 / 15px Bold #1A3A5C */
.sk-flow-label {
  margin: 13px 0 0;
  height: 18px;
  font-size: 15px;
  font-weight: 700;
  line-height: 18px;
  color: #1a3a5c;
  white-space: nowrap;
}
/* サブ : 13px #5A6A7A */
.sk-flow-sub2 {
  margin: 8px 0 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 17px;
  color: #5a6a7a;
  white-space: nowrap;
}

/* --- 管理会社様の声 : 1440×473 --- */
.sk-voice {
  position: relative;
  width: 1440px;
  height: 473px;
  background: rgba(38, 33, 97, 0.949);
}
.sk-voice-title {
  position: absolute;
  left: 160px;
  top: 106px;
  width: 1120px;
  height: 36px;
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  line-height: 36px;
  color: var(--white);
}
.sk-voice-card {
  position: absolute;
  left: 160px;
  top: 194px;
  width: 1120px;
  height: 235px;
  background: var(--white);
  border-radius: 4px;
  overflow: hidden;
}
/* 左の灰色帯 : 斜辺 dx/dy=-0.634（上辺200.3 → 下辺51.9） */
.sk-voice-band {
  position: absolute;
  left: 0;
  top: 0;
  width: 1120px;
  height: 235px;
  background: #d9d9d9;
  clip-path: polygon(0 0, 200.3px 0, 51.9px 235px, 0 235px);
}
.sk-voice-ill {
  position: absolute;
  left: 88px;
  top: 40px;
  width: 95px;
  height: 103px;
}
.sk-voice-ill img { width: 100%; height: 100%; display: block; max-width: none; }
/* 名前 : 15px Bold #1A3A5C / 2行 */
.sk-voice-name {
  position: absolute;
  left: 48px;
  top: 145px;
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
  color: #1a3a5c;
  white-space: nowrap;
}
/* 区切り線 : 1×151 / 黒 */
.sk-voice-divider {
  position: absolute;
  left: 255px;
  top: 40px;
  width: 1px;
  height: 151px;
  background: #000;
}
/* 本文 : 17px #1A1A1A / leading 26 / 5行 */
.sk-voice-body {
  position: absolute;
  left: 285px;
  top: 49.5px;
  margin: 0;
  font-size: 17px;
  font-weight: 400;
  line-height: 26px;
  color: #1a1a1a;
}

/* --- お問い合わせCTA : 1440×312 / Component 7 を流用 --- */
.sk-cta {
  width: 1440px;
  height: 312px;
  background: rgba(38, 33, 97, 0.949);
  padding: 60px 160px 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ============================================================
   画面幅対応（フルブリード背景）
   コンテンツは1440px中央のまま。各セクションの背景色だけを
   box-shadow で左右にタイル状に複製して、ウィンドウ端まで届かせる。
   オフセットは要素幅(1440px)の整数倍なので、隙間も重なりも生じない
   （半透明の背景色でも濃さが変わらない）。±2880px で最大7200px幅まで対応。
   はみ出しは .page の overflow:hidden が切るので横スクロールは出ない。
   ============================================================ */
.merit        { box-shadow: -1440px 0 0 var(--light-blue-bg), 1440px 0 0 var(--light-blue-bg), -2880px 0 0 var(--light-blue-bg), 2880px 0 0 var(--light-blue-bg); }
.business     { box-shadow: -1440px 0 0 rgba(255,255,255,0.1), 1440px 0 0 rgba(255,255,255,0.1), -2880px 0 0 rgba(255,255,255,0.1), 2880px 0 0 rgba(255,255,255,0.1); }
.area         { box-shadow: -1440px 0 0 rgba(255,255,255,0.1), 1440px 0 0 rgba(255,255,255,0.1), -2880px 0 0 rgba(255,255,255,0.1), 2880px 0 0 rgba(255,255,255,0.1); }
.contact      { box-shadow: -1440px 0 0 var(--contact-bg), 1440px 0 0 var(--contact-bg), -2880px 0 0 var(--contact-bg), 2880px 0 0 var(--contact-bg); }

.c-frame70    { box-shadow: -1440px 0 0 var(--white), 1440px 0 0 var(--white), -2880px 0 0 var(--white), 2880px 0 0 var(--white); }
.c-greeting   { box-shadow: -1440px 0 0 #f8fbff, 1440px 0 0 #f8fbff, -2880px 0 0 #f8fbff, 2880px 0 0 #f8fbff; }
.c-mission    { box-shadow: -1440px 0 0 var(--white), 1440px 0 0 var(--white), -2880px 0 0 var(--white), 2880px 0 0 var(--white); }
.c-vv         { box-shadow: -1440px 0 0 #f8fbff, 1440px 0 0 #f8fbff, -2880px 0 0 #f8fbff, 2880px 0 0 #f8fbff; }
.c-cta        { box-shadow: -1440px 0 0 #f8fbff, 1440px 0 0 #f8fbff, -2880px 0 0 #f8fbff, 2880px 0 0 #f8fbff; }

.mg-header-band { box-shadow: -1440px 0 0 var(--white), 1440px 0 0 var(--white), -2880px 0 0 var(--white), 2880px 0 0 var(--white); }
.mg-worry     { box-shadow: -1440px 0 0 rgba(255,255,255,0.1), 1440px 0 0 rgba(255,255,255,0.1), -2880px 0 0 rgba(255,255,255,0.1), 2880px 0 0 rgba(255,255,255,0.1); }
.mg-str       { box-shadow: -1440px 0 0 rgba(153,194,255,0.1), 1440px 0 0 rgba(153,194,255,0.1), -2880px 0 0 rgba(153,194,255,0.1), 2880px 0 0 rgba(153,194,255,0.1); }
.mg-flow      { box-shadow: -1440px 0 0 rgba(255,255,255,0.1), 1440px 0 0 rgba(255,255,255,0.1), -2880px 0 0 rgba(255,255,255,0.1), 2880px 0 0 rgba(255,255,255,0.1); }
.mg-voice     { box-shadow: -1440px 0 0 rgba(38,33,97,0.949), 1440px 0 0 rgba(38,33,97,0.949), -2880px 0 0 rgba(38,33,97,0.949), 2880px 0 0 rgba(38,33,97,0.949); }
.mg-cta       { box-shadow: -1440px 0 0 rgba(38,33,97,0.949), 1440px 0 0 rgba(38,33,97,0.949), -2880px 0 0 rgba(38,33,97,0.949), 2880px 0 0 rgba(38,33,97,0.949); }

.sk-worry     { box-shadow: -1440px 0 0 rgba(255,255,255,0.1), 1440px 0 0 rgba(255,255,255,0.1), -2880px 0 0 rgba(255,255,255,0.1), 2880px 0 0 rgba(255,255,255,0.1); }
.sk-svc       { box-shadow: -1440px 0 0 rgba(153,194,255,0.1), 1440px 0 0 rgba(153,194,255,0.1), -2880px 0 0 rgba(153,194,255,0.1), 2880px 0 0 rgba(153,194,255,0.1); }
.sk-mrt       { box-shadow: -1440px 0 0 var(--white), 1440px 0 0 var(--white), -2880px 0 0 var(--white), 2880px 0 0 var(--white); }
/* .area の指定を上書きする（HTMLは class="area sk-area"） */
.sk-area      { box-shadow: -1440px 0 0 rgba(153,194,255,0.1), 1440px 0 0 rgba(153,194,255,0.1), -2880px 0 0 rgba(153,194,255,0.1), 2880px 0 0 rgba(153,194,255,0.1); }
.sk-flow      { box-shadow: -1440px 0 0 rgba(153,194,255,0.1), 1440px 0 0 rgba(153,194,255,0.1), -2880px 0 0 rgba(153,194,255,0.1), 2880px 0 0 rgba(153,194,255,0.1); }
.sk-voice     { box-shadow: -1440px 0 0 rgba(38,33,97,0.949), 1440px 0 0 rgba(38,33,97,0.949), -2880px 0 0 rgba(38,33,97,0.949), 2880px 0 0 rgba(38,33,97,0.949); }
.sk-cta       { box-shadow: -1440px 0 0 rgba(38,33,97,0.949), 1440px 0 0 rgba(38,33,97,0.949), -2880px 0 0 rgba(38,33,97,0.949), 2880px 0 0 rgba(38,33,97,0.949); }

/* 背面の透かしは .page が全幅になった今も「1440pxのトラック内だけ」に見えるのが正解
   （デザイン上はページ枠でクリップされている）。要素自身の座標系で切り出す。
   .page-mark      : 幅3060 / トラック左端から162 の位置 → 右を 3060-1278=1782 切る
   .mg/.sk-page-mark: 幅4123.589 / トラック左端より2534.219 手前から始まる
                      → 左を2534.219、右を 4123.589-(2534.219+1440)=149.37 切る */
.page-mark    { clip-path: inset(0 1782px 0 0); }
.mg-page-mark,
.sk-page-mark { clip-path: inset(0 149.37px 0 2534.219px); }

/* ============================================================
   フルブリード写真
   写真セクションは overflow:hidden をやめ、clip-path: inset(0 -100vw 0 -100vw) に置換する。
   （縦は従来どおり枠で切り、横だけ通す。overflow:hidden は縦横まとめて切ってしまい、
     .hero-navy-block のように縦へ190pxはみ出す設計の要素が下のセクションへ漏れる）
   その上で写真だけ 100vw に広げる。
   代わりに「1440pxを超えてはいけない装飾」は個別にクリップ／非表示にする。
   1440px 表示では見た目が一切変わらないことを回帰テストで確認済み。
   ============================================================ */

/* --- index : ヒーロー --- */
.hero { overflow: visible; clip-path: inset(0 -100vw 0 -100vw); }
/* img はリセットで max-width:100% が効くため none にしないと1440pxに丸められる */
.hero-bg-photo { left: calc(50% - var(--vwz, 100vw) / 2); right: auto; width: var(--vwz, 100vw); max-width: none; }
.hero-deco-1 { display: none; }                       /* left1520 = 元から完全にページ外。全幅にすると見えてしまう */
/* ヒーロー右側のかたまり（円写真・紺ブロック・enasマーク）は、デザイン上ページの右端で
   切れている前提のレイアウト。hero-photo.png 自体が「1440pxの右端で切った状態」で
   書き出された561×603のクリップ済み画像なので、トラック内に置いたままだと画面の途中で
   円が切れて見える。3要素まとめて画面の右端基準に置き直す（1440では元の値と完全一致）。
     .hero-image      right端から561 → left 50vw+159   (1440時 879)
     .hero-navy-block right端から481 → left 50vw+239   (1440時 959)
     .hero-deco-2     right端から474.17 → left 50vw+245.83 (1440時 965.83) */
.hero-image      { left: calc(var(--vwz, 100vw) / 2 + 159px); }
.hero-navy-block { left: calc(var(--vwz, 100vw) / 2 + 239px); width: 503px; }
.hero-deco-2     { left: calc(var(--vwz, 100vw) / 2 + 245.83px); clip-path: inset(0 80px 0 0); }

/* --- index : 私たちについて --- */
.about { overflow: visible; clip-path: inset(0 -100vw 0 -100vw); }
.about-bg,
.about-overlay { left: calc(50% - var(--vwz, 100vw) / 2); right: auto; width: var(--vwz, 100vw); max-width: none; }

/* --- index : お問い合わせ（街並みシルエット） --- */
.contact { overflow: visible; clip-path: inset(0 -100vw 0 -100vw); }
.contact-bg-wrap { left: calc(50% - var(--vwz, 100vw) / 2); right: auto; width: var(--vwz, 100vw); }
/* 元画像2880×1380と枠1440×690は同じ比なので、1440では cover でも表示は変わらない */
.contact-bg-wrap img { object-fit: cover; }

/* --- company : 会社概要ヒーロー（紺の円 left-79 が1440で直線的に切れて見えるため横は通す） --- */
.c-frame70 { overflow: visible; clip-path: inset(0 -100vw 0 -100vw); }

/* --- company : Mission のビル写真（元から右へはみ出す設計） --- */
.c-mission-photo { width: max(893px, calc(var(--vwz, 100vw) / 2 - 178px)); }

/* --- management : ヒーロー --- */
.mg-hero { overflow: visible; clip-path: inset(0 -100vw 0 -100vw); }
.mg-hero-photo { left: calc(50% - var(--vwz, 100vw) / 2); right: auto; width: var(--vwz, 100vw); }
/* 台形パネルの右側は矩形なので、同じ高さの矩形を右へ継ぎ足して画面端まで届かせる */
.mg-hero-panel { box-shadow: 898px 0 0 var(--navy), 1796px 0 0 var(--navy); }

/* --- collection : ヒーロー --- */
.sk-hero { overflow: visible; clip-path: inset(0 -100vw 0 -100vw); }
.sk-hero-photo { left: calc(50% - var(--vwz, 100vw) / 2); right: auto; width: var(--vwz, 100vw); }
.sk-hero-panel { box-shadow: 898px 0 0 var(--navy), 1796px 0 0 var(--navy); }

/* --- ヘッダー：ロゴとナビも画面の両端まで寄せる ---
   帯（背景）は既に全幅。中身は flex space-between + padding 0 24px なので、
   枠を 100vw にするだけでロゴが左端24px・ナビが右端24pxに来る。
   下線(.is-current)は border-bottom、ロゴ/ナビは flex なので絶対座標に依存しない。
   1440px では 100vw = 1440px なので従来と完全に同じ。 */
.header   { width: var(--vwz, 100vw); }                              /* left:50% + translateX(-50%) は元のまま */
.c-header { left: calc(50% - var(--vwz, 100vw) / 2); width: var(--vwz, 100vw); }

/* ==================================================================== */
/* ===== 個人情報保護方針ページ (privacy.html) ========================= */
/* ==================================================================== */
.pp-topbar {
  position: relative;
  width: 100%;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  background: var(--white);
  border-bottom: 1px solid #e5e7eb;
}
.pp-title-band {
  width: 100%;
  background: var(--navy);
  padding: 48px 160px;
  display: flex;
  align-items: center;
}
.pp-title {
  margin: 0;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--white);
  letter-spacing: 0.3955px;
}
.pp-content {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 64px 0 100px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.pp-inner {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.pp-updated { font-size: 13px; color: var(--gray-text); }
.pp-inner > p { font-size: 15px; color: var(--black); line-height: 2; }
.pp-inner h2 {
  font-size: 19px; font-weight: 700; color: var(--dark-blue);
  padding-top: 8px; border-top: 1px solid #e5e7eb;
  padding-bottom: 4px;
}
.pp-inner ul { padding-left: 1.4em; display: flex; flex-direction: column; gap: 6px; }
.pp-inner li { font-size: 15px; color: var(--black); line-height: 1.9; list-style: disc; }
.pp-cta { width: 100%; }