/* ===== リセット & 基本 ===== */
*, *::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: var(--vwz, 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;
  transition: background 0.2s, color 0.2s;
}
/* [修正] 依頼により、単なる薄まり(opacity)ではなく背景/文字色が反転するホバーに変更 */
.value-btn:hover { background: var(--navy); color: var(--white); }

/* ===== メリット (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;
  transition: background 0.2s, color 0.2s;
}
/* [修正] 依頼により、単なる薄まり(opacity)ではなく背景/文字色が反転するホバーに変更 */
.business-btn:hover { background: var(--navy); color: var(--white); }

/* ===== 対応エリア (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;
}

/* フォーム 761:696 : pt24 px48, 内部 gap24 items-center */
.contact-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 24px 48px 24px;
  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 0.2s, color 0.2s;
}
/* [修正] 依頼により、単なる薄まり(opacity)ではなく背景/文字色が反転するホバーに変更 */
.form-submit:hover { background: var(--navy); color: var(--white); }

/* ===== フッター ===== */
.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。ただし固定px のままだと親要素がそれより狭くなる
   768〜1007px帯ではみ出す（実機で確認）ため、親より広くならないよう
   min() で頭打ちにする。親が1008px以上ある場合は従来と完全に同じ見た目 */
.c-info-table {
  width: min(1008px, 100%);
}

/* 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: 1px solid 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;
  box-sizing: border-box;
  transition: background 0.2s, color 0.2s;
}
/* [修正] 依頼により、単なる薄まり(opacity)ではなく背景/文字色が反転するホバーに変更。
   このボタンは元々紺地に白文字なので、他とは逆に白地に紺文字へ反転する。
   周囲が薄い背景のため、枠線を付けて白背景でも輪郭が分かるようにする */
.c-map-btn:hover { background: var(--white); color: var(--navy); }

/* --- 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);
  transition: background 0.2s;
}
/* 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;
  transition: color 0.2s;
}
/* 963:8837 : Icon 20x20 */
.c-cta-btn-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: block;
  transition: filter 0.2s;
}
.c-cta-card:hover { opacity: 0.92; }
/* [追加] 「フォームから問い合わせ」ボタン：カーソルを当てると白背景/紺文字から
   紺背景/白文字へ反転させる（カード全体を包む<a>がクリック範囲なので、
   .c-cta-card:hover を基準にボタン側の配色を切り替える）。矢印アイコンは
   navy色で描かれたSVG画像のため、filterで白へ反転する。
   [修正] 依頼により、単色の紺ではなく、カード自体の背景と同じ横グラデーション
   （linear-gradient(to right, #262161 4.872%, #6570d8 100%)）に変更 */
.c-cta-card:hover .c-cta-btn {
  background: linear-gradient(to right, #262161 4.872%, #6570d8 100%);
}
.c-cta-card:hover .c-cta-btn-label {
  color: var(--white);
}
.c-cta-card:hover .c-cta-btn-icon {
  filter: brightness(0) invert(1);
}

/* --- ご挨拶 (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;
}
/* [修正] 以前は7番目のみ常時塗りつぶし表示にしていたが、依頼により常時は他の
   丸と同じ白地に統一し、カーソルを当てた時だけ塗りつぶすようにする
   （下の :hover 側は番号に関わらず共通で効くので、このクラスは実質無効化するだけでよい）。 */
.mg-flow-circle--fill {
  background: var(--white);
  border-color: #082671;
}
.mg-flow-circle--fill span { 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;
}
/* [修正] 以前は4番目のみ常時塗りつぶし表示にしていたが、依頼により常時は他の
   丸と同じ白地に統一し、カーソルを当てた時だけ塗りつぶすようにする。 */
.sk-flow-circle--fill { background: rgba(245, 249, 255, 1); }
.sk-flow-circle--fill span { 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要素まとめて画面の右端基準に置き直す。
   [修正] 従来は left: calc(50vw + Npx) で位置指定していたが、これは vwz=1440（PC幅）の
   ときだけ「ページ右端から固定距離」と一致する式で、768〜1007px幅（--vwzが1440未満の
   タブレット帯）では右端基準からズレて画像・紺ブロックのほとんどが画面外に出てしまって
   いた（実機のiPhone Safariで確認・特定。767px以下は下の@media側でこのブロック自体を
   非表示にするため無関係）。right プロパティで直接「ページ右端からの距離」を指定し、
   画面幅によらず右端基準の位置関係を保つようにした。あわせて、位置だけでなくサイズも
   1440px基準の固定値のままだったため、768〜1007px幅の狭い--vwzに対して箱が相対的に
   大きくなりすぎる問題があったので、--vwzRatio（実画面幅を1440基準に換算した縮小率。
   1440px以上では1になり見た目は変わらない）で右上を基点に同じ比率で縮小する。
     .hero-image      右端から0px          （見えている幅561、1440時 left 879 と一致）
     .hero-navy-block 右端から-22px（22pxはみ出す）（見えている幅481、1440時 left 959 と一致）
     .hero-deco-2     右端から-80px（80pxはみ出し、clip-pathで同じ80pxを切り落として相殺）（1440時 left 965.83 と一致） */
@media (min-width: 768px) {
  .hero-image      { left: auto; right: 0; }
  .hero-navy-block { left: auto; right: -22px; width: 503px; }
  .hero-deco-2     { left: auto; right: -80px; clip-path: inset(0 80px 0 0); }
  .hero-image,
  .hero-navy-block,
  .hero-deco-2 {
    transform: scale(var(--vwzRatio, 1));
    transform-origin: 100% 0%;
  }
  /* 見出し（.hero-title）と「人・企業・街の成長を支えるパートナー」（.hero-subtitle）も
     同じ理由（1440px基準の固定px）で768〜1007px幅では右の写真・紺ブロックと重なったり
     画面外に切れたりしていたため、同様に縮小する。767px以下は別途@media側で
     position:staticの1カラムレイアウトに組み替えているため、ここでは対象外（min-width:768pxで区切り、
     767px以下のモバイル向けレイアウトと干渉しないようにしている）。 */
  .hero-title {
    transform: scale(var(--vwzRatio, 1));
    transform-origin: 0 0;
  }
  /* [修正] .hero-subtitle は「人/企業/街の成長を支えるパートナー」の各要素を
     内部に絶対配置するための 1440×700 の大きな透明ラッパー（left:0,top:0）で、
     中身は上端から約334px下にある。.hero-title と同じ transform-origin:0 0 だと、
     ラッパー自体の原点(0,0)を基準に縮むため、中身（y≒334）は縮小率に比例して
     上へ大きく動いてしまい、768〜830px幅あたりで見出し（.hero-title）の下端に
     食い込んで重なって見えていた。原点をラッパー内の実際の中身の開始位置
     （left:69px, top:334px）に変えることで、中身がその場でほぼ動かず縮むように
     し、見出しとの重なりを防ぐ。 */
  .hero-subtitle {
    transform: scale(var(--vwzRatio, 1));
    transform-origin: 69px 334px;
  }
}

/* --- 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); }

/* [修正] 各セクションのコンテナ自体の幅も --vwz に合わせる（重要な修正）
   上のフルブリード対応は「写真など個々の要素」には left/width の上書きを入れていたが、
   それらが属する親セクション（.hero 等）自体は幅 1440px 固定のまま据え置かれていた。
   中の要素が calc(50% - var(--vwz,100vw)/2) のように "50%" を基準に位置を計算している
   場合、その50%は実際にはこの親セクションの幅から計算される。親が1440px固定のままだと、
   --vwz が1440pxと異なる画面幅（768〜1007pxのタブレット帯）では基準がズレて、ヘッダーや
   背景写真が画面中央に寄って見えたり、右側に偏って見えたりする不具合になる
   （実機のiPhone Safariで確認・特定）。767px以下は下の@media側で個別に
   width:100% !important 等に組み替えているため、ここでは無関係。
   1440px表示では var(--vwz, 100vw) が1440pxと一致するため、見た目は従来と変わらない。 */
@media (min-width: 768px) {
  .hero, .about, .merit, .business, .area, .contact,
  .c-frame70, .c-mission, .c-vv, .c-cta,
  .mg-header-band, .mg-hero, .mg-worry, .mg-str, .mg-area, .mg-flow, .mg-voice, .mg-cta,
  .sk-hero, .sk-worry, .sk-svc, .sk-mrt, .sk-flow, .sk-voice, .sk-cta {
    width: var(--vwz, 100vw);
  }

  /* [修正] フッター内側（.footer-inner）も1440px固定・margin:0 auto中央寄せのままだった
     ため、768〜1007px幅では左右が均等にはみ出して見えなくなっていた
     （画面中央だけが見えるので「中央に寄っている」ように見える不具合）。 */
  .footer-inner { max-width: var(--vwz, 1440px); }
}

/* ハンバーガーボタンはデスクトップでは常に非表示（@media側でモバイルのみ表示） */
.nav-toggle { display: none; }

/* [修正] management.html / collection.html の各セクション内側にある
   「left:160px（等の固定オフセット）+ width:1120px（等の固定幅）」の
   絶対配置ブロック（見出し・カード列・CTAバー・地図など）は、親セクション
   自体は既に上で --vwz に合わせて縮めているが、この種の子要素は px 固定の
   まま置いてあったため、768〜1007px帯（zoom が 0.70 で頭打ちになり、代わりに
   --vwz が1440pxより狭くなる範囲）で右側がコンテナ幅からはみ出し、
   overflow-x:hidden により「見えないまま消える」形で切れていた
   （3カード目が丸ごと見えない・対応エリアの地図が大きく欠ける等）。
   .hero-title 等と同じ考え方で、この種のブロックそれぞれに
   transform:scale(--vwzRatio) を掛けて縮小する。left 基準の要素なので
   transform-origin は 0 0（左上固定）にする。ネストしている子要素
   （例: .mg-str-cards は .mg-str-box の中、.sk-voice-band は .sk-voice-card
   の中）は親をスケールすれば連動して縮むので、ここでは列挙しない。 */
@media (min-width: 768px) {
  .mg-worry-title,
  .mg-worry-cards,
  .mg-worry-cta,
  .mg-less,
  .mg-str-head,
  .mg-str-box,
  .mg-area-title,
  .mg-area-map,
  .mg-flow-title,
  .mg-flow-sub,
  .mg-flow-line,
  .mg-flow-steps,
  .mg-flow-note,
  .mg-voice-title,
  .mg-voice-cards,
  .sk-worry-title,
  .sk-worry-cards,
  .sk-worry-cta,
  .sk-svc-title,
  .sk-svc-sub,
  .sk-svc-row,
  .sk-mrt-title,
  .sk-mrt-sub,
  .sk-mrt-cards,
  .sk-flow-title,
  .sk-flow-sub,
  .sk-flow-line,
  .sk-flow-steps,
  .sk-voice-title,
  .sk-voice-card {
    transform: scale(var(--vwzRatio, 1));
    transform-origin: 0 0;
  }
}

/* [修正] .mg-hero-title / .sk-hero-title とそのバッジ(.mg-pill 等)は、
   left が645〜1028pxという「1440px設計の中央より右寄り」の値で固定されている。
   768〜1007px帯では --vwz（コンテナの論理幅）自体が1440pxより狭くなるため、
   left値を単に scale で縮めるだけ（transform-origin:0 0 は要素自身の左上を
   基準にするので left 自体は動かない）では、右側の残り幅が足りずに文字が
   画面外へはみ出してしまう（実測で768px幅にて最大84pxはみ出し）。
   left 自体を calc(元のpx値 * var(--vwzRatio)) で比例的に縮めることで、
   アンカー位置ごと縮小し、右端のはみ出しを解消する。
   .mg-pill-text は既存の transform:translateX(-50%)（中央寄せ）を残したまま
   scale を追加で連結する必要があるため、他の要素と分けてここで個別に定義する。 */
@media (min-width: 768px) {
  .mg-hero-title {
    left: calc(645px * var(--vwzRatio, 1));
    transform: scale(var(--vwzRatio, 1));
    transform-origin: 0 0;
  }
  .mg-pill--area { left: calc(645px * var(--vwzRatio, 1)); }
  .mg-pill--rate { left: calc(909px * var(--vwzRatio, 1)); }
  .mg-pill {
    transform: scale(var(--vwzRatio, 1));
    transform-origin: 0 0;
  }
  .mg-pill-text--area { left: calc(771.92px * var(--vwzRatio, 1)); }
  .mg-pill-text--rate { left: calc(1028.79px * var(--vwzRatio, 1)); }
  .mg-pill-text {
    transform: translateX(-50%) scale(var(--vwzRatio, 1));
  }

  .sk-hero-title {
    left: calc(743px * var(--vwzRatio, 1));
    transform: scale(var(--vwzRatio, 1));
    transform-origin: 0 0;
  }
  .sk-pill--area  { left: calc(743px  * var(--vwzRatio, 1)); }
  .sk-pill--cases { left: calc(1007px * var(--vwzRatio, 1)); }
  .sk-pill {
    transform: scale(var(--vwzRatio, 1));
    transform-origin: 0 0;
  }
}

/* [修正] index.html の .about-lead（「縁を大切にし、プラスαの...」）は
   white-space:nowrap の中央寄せテキストで、768px幅では実測の文字幅が
   ビューポート幅を左右に約9pxずつ超えてしまい、overflow-x:hidden により
   両端が見えないまま切れていた。中央寄せなので transform-origin は
   50% 0（上端中央）にして、左右対称に縮小する。 */
@media (min-width: 768px) {
  .about-lead {
    transform: scale(var(--vwzRatio, 1));
    transform-origin: 50% 0;
  }
}

/* [修正] index.html の .header と company.html の .c-header は、背景を
   敷かず常に透明のまま、下に敷かれたヒーロー画像のどの位置が明るいか暗いか
   だけを頼りにテキスト色（.header は白文字、.c-header は紺文字）を決めている。
   768〜1007px帯では上のtransform縮小や zoom クランプの影響でヒーロー側の
   絵柄が動くため、白文字が白い部分に、紺文字が紺の部分に重なって見えなく
   なることがあった（実機で確認）。767px以下のモバイル版では既に
   「白背景+紺文字」に統一済みなので、同じ考え方をこの帯にも適用する。
   1008px以上は元のデザイン通り透明のまま変更しない。 */
@media (min-width: 768px) and (max-width: 1007px) {
  .header,
  .c-header {
    background: var(--white);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  }
  .header .nav-link {
    color: var(--navy);
  }
}

/* ====================================================================
   スマホ用レイアウト（max-width: 767px）
   1440px固定・Figma実測px値でのピクセル完全再現レイアウトを、
   「崩れずに読める」1カラム構成へ簡易リフローする（ユーザー合意の方針）。
   ピクセル完全一致は目指さない。JS側(<script>のfit())は767px以下でzoom=1に
   固定するので、ここでは通常のドキュメントフローに組み替えるだけでよい。
   ==================================================================== */
@media (max-width: 767px) {

  /* ---------- 土台 ---------- */
  html, body { overflow-x: hidden; }
  .page {
    zoom: 1;
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
  }
  .page > * { margin-left: 0; margin-right: 0; }

  /* Figma実測のためだけに指定されていた white-space:nowrap を全面的に解除し、折り返し可能にする */
  .page, .page * { white-space: normal !important; }
  h1, h2, h3, h4 { word-break: break-word; }
  /* align-items:center の縦積みflexコンテナ内では、幅未指定のテキスト要素が
     shrink-to-fit(内容の最大幅)で計算され折り返されずにはみ出す。
     max-width:100% を明示することでコンテナ幅を上限に折り返しを強制する */
  .page p, .page h1, .page h2, .page h3, .page h4 { max-width: 100%; }
  /* management/collection で多用している「Figmaの改行位置固定用<br>」を無効化し、
     文章を画面幅で自然に折り返させる（すべて1つの<p>内の途中改行なので、
     消しても文の結合や意味は変わらない） */
  .page br { display: none; }

  /* ---------- ヘッダー / ハンバーガーメニュー（4ページ共通） ---------- */
  .nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    position: relative;
    z-index: 101;
  }
  .nav-toggle span,
  .nav-toggle span::before,
  .nav-toggle span::after {
    content: '';
    display: block;
    position: absolute;
    left: 8px;
    width: 24px;
    height: 2px;
    background: currentColor;
    transition: transform 0.2s, opacity 0.2s;
  }
  .nav-toggle span::before { transform: translateY(-7px); }
  .nav-toggle span::after  { transform: translateY(7px); }
  .nav-toggle.is-open span { background: transparent; }
  .nav-toggle.is-open span::before { transform: rotate(45deg); }
  .nav-toggle.is-open span::after  { transform: rotate(-45deg); }

  /* index.html : .header は hero 内の絶対配置 → 上部固定バーへ。
     以前は紺背景(rgba(38,33,97,.94))にしていたが、ロゴ(images/Logo.svg)自体が
     紺色のため色が被って視認性が悪かった。他3ページの .c-header と揃えて白背景にする */
  .header {
    position: sticky !important;
    left: 0 !important;
    top: 0 !important;
    transform: none !important;
    width: 100% !important;
    height: 56px !important;
    padding: 0 16px;
    background: var(--white);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    z-index: 100;
  }
  .header .nav-toggle { color: var(--navy); }
  .header .logo { width: 76px; height: 18px; }

  /* company / management / collection : .c-header は白帯の中の絶対配置。
     company.html には帯(.mg-header-band)が無いので .c-header 自身を sticky にし、
     帯がある場合は帯側を通常フローの static に落として二重stickyを避ける */
  .c-header {
    position: sticky !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 56px !important;
    padding: 0 16px;
    background: var(--white);
    z-index: 100;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  }
  .mg-header-band {
    position: static !important;
    width: 100% !important;
    height: auto !important;
  }
  .c-logo { width: 76px; height: 18px; }
  .c-header .nav-toggle { color: var(--navy); }

  /* ドロップダウンメニュー本体（headerの絶対配置基準はsticky自身）。
     .nav（index.html）も .c-nav（他3ページ）と同じ白背景・紺文字の見た目に統一する */
  .nav, .c-nav {
    position: absolute !important;
    left: 0 !important;
    top: 100% !important;
    width: 100% !important;
    height: auto !important;
    max-height: 0;
    overflow: hidden;
    flex-direction: column;
    gap: 0;
    background: var(--white);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: max-height 0.25s ease;
  }
  .nav.is-open, .c-nav.is-open { max-height: 320px; }
  .nav, .c-nav { z-index: 10; }
  .nav-link, .c-nav-link {
    width: 100%;
    height: auto;
    padding: 14px 20px;
    justify-content: flex-start;
    border-bottom: 1px solid #e5e7eb;
    color: var(--navy);
  }
  .c-nav-link.is-current { border-bottom: 1px solid #e5e7eb; background: #f2f4ff; }

  /* [修正] メニューを開いた際、ドロップダウン自体はリンク4つ分の高さしかなく、
     その直下は通常のページ本文（ヒーロー見出し等）がそのまま続けて表示されるため、
     境界で本文の文字とメニューがぶつかって「重なって見える」不具合があった。
     ヘッダー直下から画面下端までを覆う半透明の背景(バックドロップ)を追加し、
     メニュー表示中は下の本文を暗く沈めて視覚的に分離する。
     （.header/.c-header/.pp-topbar のいずれも sticky・z-index:100 で共通の考え方） */
  .header::after, .c-header::after, .pp-topbar::after {
    content: '';
    position: fixed;
    top: 56px;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(20, 20, 24, 0.82);
    z-index: 5;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease;
  }
  .header:has(.nav.is-open)::after,
  .c-header:has(.c-nav.is-open)::after,
  .pp-topbar:has(.c-nav.is-open)::after {
    opacity: 1;
    visibility: visible;
  }

  /* ---------- 共通ボタン ---------- */
  .value-btn, .business-btn, .form-submit,
  .btn--red, .btn--outline, .btn--submit {
    width: 100% !important;
    max-width: 340px;
  }

  /* ====================================================================
     index.html
     ==================================================================== */

  /* --- ヒーロー --- */
  .hero {
    width: 100% !important;
    height: auto !important;
    min-height: 0;
    padding: 24px 20px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
    clip-path: none;
  }
  .hero-bg-photo,
  .hero-watermark,
  .hero-deco,
  .hero-navy-block,
  .page-mark { display: none; }

  .header { order: 1; }
  .hero-title {
    position: static !important;
    order: 2;
    margin-top: 8px;
    font-size: clamp(28px, 9vw, 40px) !important;
    letter-spacing: 0;
    line-height: 1.4;
  }
  .hero-image {
    position: static !important;
    order: 3;
    left: auto !important; top: auto !important;
    width: 100% !important;
    max-width: 320px;
    height: auto !important;
    aspect-ratio: 561 / 603;
    overflow: hidden;
    border-radius: 12px;
  }
  .hero-image img {
    position: static !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
  }
  .hero-subtitle {
    position: static !important;
    order: 4;
    width: 100% !important;
    height: auto !important;
    display: block;
    text-align: center;
    padding: 0;
  }
  .sub-box { display: none; }
  .sub-text {
    position: static !important;
    display: inline;
    font-size: 18px !important;
    color: var(--navy) !important;
  }
  .box-text-jin::after, .box-text-kigyo::after { content: '・'; }
  .hero-btn {
    position: static !important;
    order: 5;
    left: auto !important; top: auto !important;
    width: 100% !important;
    max-width: 320px;
  }

  /* --- 私たちについて --- */
  .about {
    width: 100% !important;
    padding: 56px 20px;
    clip-path: none;
    background: var(--white);
  }
  .about-bg, .about-overlay { display: none; }
  .about-heading { width: 100% !important; }
  .about-heading h2 { font-size: 26px; }
  .about-lead { font-size: clamp(20px, 6vw, 26px) !important; }
  .about-values {
    flex-direction: column;
    height: auto !important;
    gap: 16px;
  }
  .value-card, .value-card--sm {
    width: 100% !important;
    height: auto !important;
    padding: 24px 16px;
  }
  .value-card p, .value-card--sm p { font-size: 20px !important; }

  /* --- 当社サービス導入後のメリット --- */
  .merit {
    width: 100% !important;
    padding: 56px 20px;
    box-shadow: none;
  }
  .merit-inner { gap: 48px; }
  .merit-groups { gap: 48px; }
  .merit-title { font-size: 24px !important; }
  .merit-bar { width: 120px !important; }
  .merit-lead { font-size: 18px !important; line-height: 1.6; }
  .merit-group { padding-right: 0 !important; }
  .merit-group-title-wrap { padding-left: 0 !important; }
  .merit-cards {
    flex-direction: column;
    gap: 40px;
    width: 100% !important;
  }
  .merit-card-wrap { width: 100%; }
  .merit-card {
    width: 100% !important;
    margin-left: 0 !important;
    margin-top: 28px;
    padding: 24px 20px 20px 44px;
  }
  .merit-badge { width: 52px !important; height: 52px !important; }
  .merit-badge img { width: 52px !important; }
  .merit-badge--1 img { height: 54px !important; }
  .merit-badge--2 img { height: 56px !important; }
  /* .merit-desc はデスクトップ用に文単位を複数<p>へ分割していたもの。
     inline化して1つの流れる段落として再結合する（white-space:nowrapは
     グローバルな .page * { white-space:normal !important } で既に解除済み） */
  .merit-desc p { display: inline; }

  /* --- 事業紹介 --- */
  .business {
    width: 100% !important;
    padding: 48px 20px;
    gap: 32px;
    clip-path: none;
  }
  .business-title { font-size: 24px !important; }
  .business-bar { width: 120px !important; }
  .business-cards { flex-direction: column; gap: 32px; }
  .business-card { width: 100% !important; }
  .business-card-img, .business-card-img--gray { height: 220px !important; }
  .business-card-img img { object-fit: cover; }
  .business-card-title { font-size: 18px !important; }

  /* --- 対応エリア（TOP / .area は sk-area 経由で collection.html とも共有） --- */
  .area {
    width: 100% !important;
    padding: 48px 20px 56px !important;
    clip-path: none;
  }
  .area-title { font-size: 24px !important; }
  .area-bar { width: 120px !important; }
  .area-row { flex-direction: column; gap: 32px; align-items: center; }
  .area-circles { width: 280px !important; height: 256px !important; }
  .area-circle { width: 124px !important; height: 124px !important; }
  .area-circle-text { font-size: 16px !important; }
  .area-circle--1 { left: 0 !important; top: 0 !important; }
  .area-circle--1 .area-circle-text { left: 30px !important; top: 38px !important; }
  .area-circle--2 { left: 156px !important; top: 0 !important; }
  .area-circle--2 .area-circle-text { left: 22px !important; top: 38px !important; }
  .area-circle--3 { left: 78px !important; top: 132px !important; }
  .area-circle--3 .area-circle-text { left: 22px !important; top: 38px !important; }
  .area-map { width: 100% !important; max-width: 320px; height: auto !important; aspect-ratio: 462 / 502; }
  .area-note { font-size: 14px !important; }

  /* --- お問い合わせ --- */
  .contact {
    width: 100% !important;
    padding: 48px 16px 56px;
    clip-path: none;
  }
  .contact-bg-wrap { display: none; }
  .contact-box { padding: 28px 20px; }
  .contact-header { padding: 0 !important; }
  .contact-title { font-size: 22px !important; }
  .contact-subtitle { font-size: 14px !important; }
  .contact-form { padding: 16px 0 16px !important; }
  .form-select-wrap, .form-select { width: 100% !important; }

  /* --- フッター（4ページ共通） --- */
  .footer { height: auto; }
  .footer-inner {
    width: 100% !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 24px 20px;
  }
  .footer-nav { flex-wrap: wrap; gap: 12px 20px; }

  /* ====================================================================
     company.html
     ==================================================================== */
  .c-frame70 {
    width: 100% !important;
    height: auto !important;
    padding: 0 0 40px !important;
    justify-content: flex-start;
    clip-path: none;
  }
  .c-hero-ellipse { display: none; }
  .c-hero-inner { padding: 0 20px; gap: 24px; }
  .c-hero-title-wrap { padding: 24px 0 0 !important; }
  .c-hero-title { font-size: 32px !important; color: var(--navy) !important; }
  .c-info-card { padding: 20px !important; }
  .c-info-table { width: 100% !important; }
  .c-info-row {
    flex-direction: column;
    align-items: flex-start !important;
    height: auto !important;
    gap: 4px;
    padding: 14px 0 !important;
  }
  .c-info-row--map { padding: 14px 0 !important; }
  .c-info-row--map .c-info-label { padding-top: 0 !important; }
  .c-info-label { width: auto !important; }
  .c-info-map-wrap { align-items: flex-start; margin-top: 8px; }

  .c-greeting { padding: 48px 20px; gap: 28px; }
  .c-greeting-title { width: 100% !important; font-size: 24px; }
  .c-greeting-body { flex-direction: column; gap: 24px; }
  .c-greeting-photo-col { width: 100% !important; max-width: 280px; margin: 0 auto; }
  .c-greeting-photo { width: 100% !important; height: auto !important; aspect-ratio: 381 / 504; }
  .c-greeting-text { width: 100% !important; }
  .c-greeting-text p { font-size: 16px !important; }
  .c-greeting-text .gh { font-size: 20px !important; }

  .c-mission {
    width: 100% !important;
    height: auto !important;
    flex-direction: column;
    padding: 48px 20px !important;
    gap: 24px;
    clip-path: none;
  }
  .c-mission-bar { position: static !important; width: 120px !important; height: 6px !important; order: -1; }
  .c-mission-text { position: static !important; width: 100% !important; height: auto !important; }
  .c-mission-label, .c-mission-lead, .c-mission-body {
    position: static !important;
    left: auto !important; top: auto !important;
    width: 100% !important;
    height: auto !important;
  }
  .c-mission-label { font-size: 24px !important; margin-bottom: 12px !important; }
  .c-mission-lead { font-size: 18px !important; margin-bottom: 12px !important; }
  .c-mission-body { font-size: 15px !important; }
  .c-mission-photo { width: 100% !important; height: auto !important; aspect-ratio: 893 / 596; }

  .c-vv { width: 100% !important; height: auto !important; padding: 48px 20px !important; }
  .c-vv-inner { gap: 48px; }
  .c-vision { width: 100% !important; }
  .c-vision-lead { font-size: 18px !important; }
  .c-vision-desc p { font-size: 15px !important; }
  /* デスクトップ用に文単位を複数<p>へ分割していた箇所は、
     inline化して1つの流れる段落として再結合する（下記の.merit-desc pも同様） */
  .c-vision-desc p { display: inline; }
  .c-value-cards { flex-direction: column; gap: 32px; }
  .c-value-card { width: 100% !important; max-width: 280px; height: auto !important; margin: 0 auto; }
  .c-value-circle { display: none; }
  .c-value-content {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    gap: 12px;
  }
  .c-value-title { font-size: 18px !important; }
  .c-value-desc { height: auto !important; }
  .c-value-desc p { font-size: 14px !important; display: inline; }

  .c-cta { width: 100% !important; height: auto !important; padding: 40px 20px 56px !important; }
  .c-cta-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 28px 24px;
  }
  .c-cta-text { width: 100% !important; height: auto !important; }
  .c-cta-right { width: 100%; justify-content: flex-start; }
  .c-cta-divider { display: none; }
  .c-cta-btn { width: 100% !important; height: auto !important; }
  .c-cta-btn-inner {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    padding: 16px 20px;
  }
  .c-cta-btn-label { text-align: left; }

  /* ====================================================================
     management.html
     ==================================================================== */
  .mg-hero {
    width: 100% !important;
    height: auto !important;
    padding: 24px 20px 32px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    clip-path: none;
  }
  .mg-hero-photo, .mg-hero-panel { display: none; }
  .mg-pill { display: none; }
  .mg-pill-text {
    position: static !important;
    transform: none !important;
    width: auto !important;
    height: auto !important;
    display: inline-block;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 17px;
    padding: 6px 14px;
    font-size: 14px !important;
    margin: 0 6px 6px 0;
  }
  .mg-hero-title {
    position: static !important;
    font-size: clamp(22px, 6vw, 28px) !important;
    line-height: 1.5;
  }

  .mg-worry { width: 100% !important; height: auto !important; padding: 48px 20px 64px; }
  .mg-worry-title { position: static !important; width: 100% !important; height: auto !important; font-size: 24px !important; }
  .mg-worry-cards {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    flex-direction: column;
    gap: 24px;
    margin-top: 24px;
  }
  .mg-worry-card { width: 100% !important; height: auto !important; padding-bottom: 20px; }
  /* HTML側は class="mg-worry-ill mg-worry-ill--1" のように基底クラスが先頭に来るため、
     前方一致 [class^="..."] は絶対にマッチしない（属性値全体の先頭一致のため）。
     部分一致 [class*="..."] に修正（同種のバグが mg-voice-ill / sk-worry-ill / sk-svc-icon にもあったので同様に修正） */
  [class*="mg-worry-ill--"] {
    position: static !important;
    left: auto !important; top: auto !important;
    width: 160px !important;
    height: auto !important;
    margin: 20px auto 0;
  }
  .mg-worry-text { position: static !important; width: 100% !important; height: auto !important; padding: 16px 20px 0; }
  .mg-worry-text h3 { width: 100% !important; height: auto !important; font-size: 16px !important; }
  .mg-worry-text p { width: 100% !important; height: auto !important; }
  .mg-worry-cta {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    margin-top: 32px;
    padding: 16px 20px;
    flex-wrap: wrap;
    gap: 8px;
  }
  .mg-worry-cta-label { font-size: 15px !important; }

  .mg-str { width: 100% !important; height: auto !important; padding: 48px 20px 56px; }
  .mg-str-head { position: static !important; width: 100% !important; }
  .mg-str-head h2 { font-size: 22px !important; height: auto !important; }
  .mg-str-head p { height: auto !important; }
  .mg-str-box {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    margin-top: 24px;
    padding: 20px;
  }
  .mg-str-zero { display: none; }
  .mg-str-box-head { position: static !important; width: 100% !important; }
  .mg-str-box-head h3 { font-size: 18px !important; height: auto !important; }
  .mg-str-box-head p { height: auto !important; }
  .mg-str-cards {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    flex-direction: column;
    gap: 16px;
    margin-top: 20px;
  }
  .mg-str-card { width: 100% !important; height: auto !important; padding: 20px 16px; }
  .mg-str-card-title, .mg-str-card-label, .mg-str-card-body {
    position: static !important;
    left: auto !important; right: auto !important; top: auto !important;
    width: 100% !important;
    height: auto !important;
  }
  .mg-less { position: static !important; width: 100% !important; height: auto !important; margin-top: 40px; }
  .mg-less-tag { position: static !important; display: inline-flex !important; width: auto !important; height: auto !important; padding: 8px 16px; }
  .mg-less-title { position: static !important; width: 100% !important; height: auto !important; margin-top: 16px !important; font-size: 18px !important; }
  .mg-less-cards {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    flex-direction: column;
    gap: 2px;
    margin-top: 16px;
  }
  .mg-less-card { width: 100% !important; height: auto !important; padding-bottom: 20px; }
  .mg-less-photo { position: static !important; width: 100% !important; height: auto !important; aspect-ratio: 340 / 168; margin: 0; }
  .mg-less-card-title, .mg-less-card-body {
    position: static !important;
    left: auto !important; top: auto !important;
    width: 100% !important;
    height: auto !important;
    padding: 0 16px;
  }
  .mg-less-card-title { margin-top: 12px !important; font-size: 18px !important; }
  .mg-less-card-body { margin-top: 4px !important; }

  .mg-area { width: 100% !important; height: auto !important; padding: 48px 20px 40px; }
  .mg-area-title { position: static !important; width: 100% !important; height: auto !important; font-size: 22px !important; }
  .mg-area-circle {
    position: static !important;
    left: auto !important; top: auto !important;
    width: 130px !important;
    height: 130px !important;
    display: inline-block;
    margin: 16px 8px 0 0;
  }
  .mg-area-note { position: static !important; width: 100% !important; height: auto !important; margin-top: 16px !important; }
  .mg-area-map {
    position: static !important;
    left: auto !important; top: auto !important;
    width: 100% !important;
    max-width: 320px;
    height: auto !important;
    aspect-ratio: 462 / 502;
    margin: 20px auto 0;
  }

  .mg-flow { width: 100% !important; height: auto !important; padding: 48px 20px 40px; }
  .mg-flow-title { position: static !important; width: 100% !important; height: auto !important; font-size: 22px !important; }
  .mg-flow-sub { position: static !important; width: 100% !important; height: auto !important; margin-top: 8px !important; }
  .mg-flow-line { display: none; }
  .mg-flow-steps {
    position: static !important;
    width: 100% !important;
    flex-direction: column;
    gap: 24px;
    margin-top: 24px;
  }
  .mg-flow-step {
    width: 100% !important;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 16px;
    text-align: left;
  }
  .mg-flow-circle { grid-column: 1; grid-row: 1 / 3; margin: 0; }
  .mg-flow-label { grid-column: 2; grid-row: 1; margin: 0 !important; }
  .mg-flow-sub2 { grid-column: 2; grid-row: 2; margin: 4px 0 0 !important; }
  .mg-flow-note { position: static !important; width: 100% !important; height: auto !important; margin-top: 24px !important; padding: 16px; }
  .mg-flow-note p { position: static !important; left: auto !important; top: auto !important; width: 100% !important; }

  .mg-voice { width: 100% !important; height: auto !important; padding: 48px 20px 56px; }
  .mg-voice-title { position: static !important; width: 100% !important; height: auto !important; font-size: 22px !important; }
  .mg-voice-cards {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    flex-direction: column;
    gap: 24px;
    margin-top: 24px;
  }
  .mg-voice-card { width: 100% !important; height: auto !important; padding-bottom: 24px; }
  .mg-voice-band { display: none; }
  .mg-voice-name {
    position: static !important;
    width: auto !important; height: auto !important;
    display: block;
    padding: 20px 20px 0;
    font-size: 20px !important;
  }
  [class*="mg-voice-ill--"] {
    position: static !important;
    left: auto !important; top: auto !important;
    width: 100px !important;
    height: auto !important;
    margin: 8px 20px 0;
  }
  .mg-voice-body {
    position: static !important;
    left: auto !important; top: auto !important;
    width: auto !important; height: auto !important;
    padding: 12px 20px 0;
  }

  .mg-cta { width: 100% !important; height: auto !important; padding: 40px 20px 56px !important; }

  /* ====================================================================
     collection.html
     ==================================================================== */
  .sk-hero {
    width: 100% !important;
    height: auto !important;
    padding: 24px 20px 32px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    clip-path: none;
  }
  .sk-hero-photo, .sk-hero-panel { display: none; }
  .sk-pill {
    position: static !important;
    left: auto !important; top: auto !important;
    width: auto !important; height: auto !important;
    display: inline-flex;
    margin: 0 6px 6px 0;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 17px;
  }
  .sk-pill img { display: none; }
  .sk-pill span { font-size: 14px !important; }
  .sk-hero-title {
    position: static !important;
    font-size: clamp(22px, 6vw, 28px) !important;
    line-height: 1.5;
  }

  .sk-worry { width: 100% !important; height: auto !important; padding: 48px 20px 40px; }
  .sk-worry-title { position: static !important; width: 100% !important; height: auto !important; font-size: 24px !important; }
  .sk-worry-cards {
    position: static !important;
    width: 100% !important;
    flex-direction: column;
    gap: 24px;
    margin-top: 24px;
  }
  .sk-worry-card { width: 100% !important; height: auto !important; padding-bottom: 20px; }
  [class*="sk-worry-ill--"] {
    position: static !important;
    left: auto !important; top: auto !important;
    width: 160px !important;
    height: auto !important;
    margin: 20px auto 0;
  }
  .sk-worry-text { position: static !important; left: auto !important; top: auto !important; width: 100% !important; padding: 16px 20px 0; }
  .sk-worry-text p { width: 100% !important; }
  .sk-worry-cta {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    margin-top: 24px;
    padding: 16px 20px;
    flex-wrap: wrap;
    gap: 8px;
  }

  .sk-svc { width: 100% !important; height: auto !important; padding: 48px 20px 40px; }
  .sk-svc-title { position: static !important; width: 100% !important; height: auto !important; font-size: 24px !important; }
  .sk-svc-sub { position: static !important; width: 100% !important; margin-top: 8px !important; }
  .sk-svc-row {
    position: static !important;
    width: 100% !important;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 20px;
  }
  .sk-svc-card,
  .sk-svc-row--1 .sk-svc-card,
  .sk-svc-row--2 .sk-svc-card {
    width: calc(50% - 8px) !important;
    height: auto !important;
    padding: 20px 8px;
  }
  [class*="sk-svc-icon--"] {
    position: static !important;
    left: auto !important; top: auto !important;
    width: 56px !important;
    height: auto !important;
    margin: 0 auto 8px;
  }
  .sk-svc-label,
  .sk-svc-row--1 .sk-svc-label,
  .sk-svc-row--2 .sk-svc-label { position: static !important; left: auto !important; right: auto !important; top: auto !important; font-size: 14px !important; }

  .sk-mrt { width: 100% !important; height: auto !important; padding: 48px 20px 40px; }
  .sk-mrt-title { position: static !important; width: 100% !important; height: auto !important; font-size: 24px !important; }
  .sk-mrt-sub { position: static !important; width: 100% !important; margin-top: 8px !important; }
  .sk-mrt-cards {
    position: static !important;
    width: 100% !important;
    flex-direction: column;
    gap: 40px;
    margin-top: 32px;
  }
  .sk-mrt-card { width: 100% !important; height: auto !important; padding: 28px 20px 20px; margin-top: 32px; }
  .sk-mrt-badge {
    left: 50% !important; top: -32px !important;
    transform: translateX(-50%);
    width: 64px !important; height: 64px !important;
    font-size: 36px !important;
    padding-bottom: 6px;
  }
  .sk-mrt-card-title, .sk-mrt-card-body { position: static !important; left: auto !important; top: auto !important; width: 100% !important; }
  .sk-mrt-card-title { margin-top: 8px !important; font-size: 18px !important; text-align: center; }
  .sk-mrt-card-body { margin-top: 8px !important; }

  .sk-flow { width: 100% !important; height: auto !important; padding: 48px 20px 40px; }
  .sk-flow-title { position: static !important; width: 100% !important; height: auto !important; font-size: 22px !important; }
  .sk-flow-sub { position: static !important; width: 100% !important; height: auto !important; margin-top: 8px !important; }
  .sk-flow-line { display: none; }
  .sk-flow-steps {
    position: static !important;
    width: 100% !important;
    flex-direction: column;
    gap: 24px;
    margin-top: 24px;
  }
  .sk-flow-step {
    width: 100% !important;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 16px;
    text-align: left;
  }
  .sk-flow-circle { grid-column: 1; grid-row: 1 / 3; margin: 0; }
  .sk-flow-label { grid-column: 2; grid-row: 1; margin: 0 !important; }
  .sk-flow-sub2 { grid-column: 2; grid-row: 2; margin: 4px 0 0 !important; }

  .sk-voice { width: 100% !important; height: auto !important; padding: 48px 20px 56px; }
  .sk-voice-title { position: static !important; width: 100% !important; height: auto !important; font-size: 22px !important; }
  .sk-voice-card {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    margin-top: 24px;
    padding-bottom: 20px;
  }
  .sk-voice-band { display: none; }
  .sk-voice-ill { position: static !important; left: auto !important; top: auto !important; width: 90px !important; height: auto !important; margin: 20px auto 0; }
  .sk-voice-name { position: static !important; left: auto !important; top: auto !important; width: 100% !important; margin: 12px 0 0 !important; text-align: center; }
  .sk-voice-divider { display: none; }
  .sk-voice-body { position: static !important; left: auto !important; top: auto !important; width: 100% !important; padding: 16px 20px 0; }

  .sk-cta { width: 100% !important; height: auto !important; padding: 40px 20px 56px !important; }
}

/* ==================================================================== */
/* ===== 個人情報保護方針ページ (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%; }

/* privacy.html はもともと width:100% ベースで組まれていたため、他ページのような
   1440px固定の座標バグは無い。ハンバーガーメニュー（.nav-toggle / .c-nav）は
   他3ページと共通クラスなので @media 側の定義がそのまま効く。
   ここでは狭い画面向けに .pp-topbar を固定ヘッダー化し、左右の余白が広すぎる
   .pp-title-band 等の値だけ調整する。 */
@media (max-width: 767px) {
  .pp-topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    height: 56px;
    padding: 0 16px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  }
  .pp-topbar .c-logo { width: 76px; height: 18px; }
  .pp-topbar .nav-toggle { color: var(--navy); }
  .pp-title-band { padding: 32px 20px; }
  .pp-title { font-size: 24px; }
  .pp-content { padding: 40px 20px 56px; }
}