/* ============================================================================
   ワークスHP 会社を知る（about.html） — このページ固有の座標
   ----------------------------------------------------------------------------
   共通部分（リセット・スケーリング土台・ヘッダー・Entry/Contact帯・フッター・
   ボタン・見出しの型）は css/style.css にある。HTML では style.css → このファイル
   の順で読み込むこと。
   ========================================================================== */

.stage { height: 5791px; }

/* ============================================================================
   ヒーロー（home_image_04 ＋ 見出し）
   ========================================================================== */
/* 元画像は 1920×1440。デザインでは上端から 891px 分を使用している */
.hero-img {
  left: 0; top: 105px; width: 1920px; height: 891px;
  object-fit: none; object-position: 0 0;
}
/* 文字の可読性を上げるためのぼかしたネイビー版（Rectangle 108 / 109 / 110） */
.hero-veil { background: var(--navy); filter: blur(26.5px); }
.hero-veil.v110 { left: 153px;  top: 394px; width: 682px; height: 228px; opacity: 0.1; }
.hero-veil.v109 { left: 180px;  top: 678px; width: 613px; height: 100px; opacity: 0.18; }
.hero-veil.v108 { left: 1135px; top: 611px; width: 605px; height: 192px; opacity: 0.24; }

/* Frame 31 — 白い縦バー＋「会社を知る」 */
.hero-badge {
  left: 180px; top: 283px; width: 209px; height: 71px;
  display: flex; flex-direction: row; align-items: center; gap: 38px;
  filter: drop-shadow(0px 0px 15px rgba(0, 27, 68, 0.3));
}
.hero-badge .bar { width: 9px; height: 71px; background: #FFFFFF; border-radius: 19px; }
.hero-badge span {
  width: 162px; height: 60px;
  font-size: 30px; line-height: 60px; font-weight: 500;
  letter-spacing: 0.1em; white-space: nowrap; color: #FFFFFF;
}

.hero-h1 {
  left: 180px; top: 394px; width: 899px; height: 180px;
  font-size: 45px; line-height: 90px; font-weight: 500;
  letter-spacing: 0.1em; white-space: nowrap; color: #FFFFFF;
  text-shadow: 0px 0px 15px rgba(0, 27, 68, 0.48);
  margin: 0;
}
.hero-sub {
  left: 180px; top: 587px; width: 549px; height: 100px;
  font-size: 25px; line-height: 50px; font-weight: 350;
  letter-spacing: 0.1em; white-space: nowrap; color: #FFFFFF;
  text-shadow: 0px 0px 15px rgba(0, 27, 68, 0.48);
  margin: 0;
}
.hero-lead {
  left: 1146px; top: 617px; width: 594px; height: 179px;
  font-size: 18px; line-height: 36px; font-weight: 350;
  letter-spacing: 0.1em; white-space: nowrap; color: #FFFFFF;
  text-shadow: 0px 0px 15px #001B44;
  margin: 0;
}

/* ============================================================================
   MISSION / VISION
   ========================================================================== */
/* 背景に薄く敷くロゴ（opacity 0.09） */
.watermark { left: 351.01px; top: 1291px; width: 1217.95px; height: 157.67px; opacity: 0.09; }

/* セクションラベルの位置（型は css/style.css の .lb） */
.lb-mission { left: 180px;  top: 1196px; width: 163px; height: 30px; }
.lb-vision  { left: 1085px; top: 1196px; width: 139px; height: 30px; }
.lb-value   { left: 180px;  top: 1975px; width: 139px; }
.lb-culture { left: 180px;  top: 2848px; width: 192px; }
.lb-related { left: 180px;  top: 4254px; width: 139px; }

/* MISSION / VISION の大見出し */
.mv-h {
  top: 1231px; height: 168px;
  font-size: 45px; line-height: 84px; font-weight: 500;
  letter-spacing: 0.1em; white-space: nowrap;
  color: var(--navy); margin: 0;
}
.mv-h.m { left: 180px;  width: 687px; }
.mv-h.v { left: 1085px; width: 648px; }

.mv-p {
  top: 1432px;
  font-size: 18px; line-height: 36px; font-weight: 350;
  letter-spacing: 0.1em; white-space: nowrap;
  color: var(--navy); margin: 0;
}
.mv-p.m { left: 180px;  width: 655px; height: 143px; }
.mv-p.v { left: 1085px; width: 655px; height: 107px; }

/* ============================================================================
   VALUE / CULTURE の背景（Figmaグループ Group 167 をフラット化した画像。
   中の Rectangle 95・リング・菱形などの装飾はすべてこの画像に焼き込まれている）
   ========================================================================== */
.bg167 { left: -70px; top: 1775px; width: 2060px; height: 2379px; }

/* ============================================================================
   VALUE — 私たちの行動指針
   ========================================================================== */
.h-value   { left: 180px; top: 2014px; width: 406px; }
.h-culture { left: 180px; top: 2887px; width: 406px; }
.h-related { left: 180px; top: 4293px; width: 406px; }

.p-value   { left: 180px; top: 2107px; width: 426px; height: 71px; }
.p-culture { left: 534px; top: 2864px; width: 426px; height: 71px; }

/* 白いバリューカード（Frame 36 / 37 / 38 / 39） */
.vcard {
  width: 533px;
  padding: 50px 38px 50px 39px;
  background: #FFFFFF;
  border-radius: 30px;
}
.v1 { left: 659px;  top: 1975px; height: 311px; }
.v2 { left: 1207px; top: 1975px; height: 311px; }
.v3 { left: 659px;  top: 2300px; height: 348px; }
.v4 { left: 1207px; top: 2300px; height: 348px; }

.vcard .vnum {
  display: block; height: 60px;
  font-family: 'Jost', 'Futura PT', sans-serif;
  font-size: 70px; line-height: 60px; font-weight: 600;
  color: var(--blue); opacity: 0.55;
  margin: 0 0 15px;
}
.vcard .vttl {
  display: block; height: 60px;
  font-size: 35px; line-height: 60px; font-weight: 500;
  letter-spacing: 0.1em; white-space: nowrap;
  color: var(--navy); margin: 0 0 5px;
}
.vcard .vtxt {
  display: block;
  font-size: 18px; line-height: 36px; font-weight: 350;
  letter-spacing: 0.1em;
  color: var(--navy); margin: 0;
}

/* ============================================================================
   CULTURE — 4つのカード
   ========================================================================== */
.ccard {
  width: 778.5px; height: 303px;
  background: rgba(34, 95, 186, 0.1);
  border-radius: 30px;
}
.ccard.c1 { left: 174px;   top: 2972px; }   /* SPEED */
.ccard.c2 { left: 967.5px; top: 2972px; }   /* SCALE */
.ccard.c3 { left: 174px;   top: 3290px; }   /* FLEXIBILITY */
.ccard.c4 { left: 967.5px; top: 3290px; }   /* SYNERGY */

/* カード内の中身はFigmaの中央寄せ結果を実測値で絶対配置している */
.cinner { position: absolute; top: 50px; }
.ccard.c1 .cinner { left: 147.25px; width: 484px; }
.ccard.c2 .cinner { left: 118.25px; width: 542px; }
.ccard.c3 .cinner { left: 107.37px; width: 563.76px; }
.ccard.c4 .cinner { left: 146.25px; width: 486px; }

.crow { display: flex; flex-direction: row; align-items: center; height: 85px; }
.ccard.c1 .crow { gap: 50px; }
.ccard.c2 .crow { gap: 35px; }
.ccard.c3 .crow { gap: 50px; }
.ccard.c4 .crow { gap: 30px; }

.crow img { flex: none; }
.ccard.c1 .crow img { width: 51.5px;  height: 48px; }
.ccard.c2 .crow img { width: 47.5px;  height: 48px; }
.ccard.c3 .crow img { width: 56.76px; height: 59.95px; }
.ccard.c4 .crow img { width: 75.65px; height: 52px; }

.ctext { flex: none; }
.ccard.c1 .ctext { width: 382px; }
.ccard.c2 .ctext { width: 459px; }
.ccard.c3 .ctext { width: 457px; }
.ccard.c4 .ctext { width: 380px; }

.clabel {
  display: block; height: 25px;
  font-size: 18px; line-height: 25px; font-weight: 500;
  letter-spacing: 0.36em; white-space: nowrap;
  color: var(--blue); margin: 0;
}
.ctitle {
  display: block; height: 60px;
  font-size: 35px; line-height: 60px; font-weight: 500;
  letter-spacing: 0.1em; white-space: nowrap;
  color: var(--navy); margin: 0;
}
.cbody {
  height: 108px; margin: 10px 0 0;
  font-size: 18px; line-height: 36px; font-weight: 350;
  letter-spacing: 0.1em; color: var(--navy);
}
.ccard.c1 .cbody { width: 484px; }
.ccard.c2 .cbody { width: 542px; }
.ccard.c3 .cbody { width: 494px; }
.ccard.c4 .cbody { width: 486px; }

/* ============================================================================
   カルチャー写真（Group 141）
   ========================================================================== */
.ci { border-radius: 30px; object-fit: cover; }
.ci1 { left: 180px;  top: 3630px; width: 773px; height: 424px; }
.ci2 { left: 968px;  top: 3629px; width: 382px; height: 207px; }
.ci3 { left: 1364px; top: 3629px; width: 382px; height: 207px; }
.ci4 { left: 968px;  top: 3847px; width: 252px; height: 207px; }
.ci5 { left: 1229px; top: 3847px; width: 252px; height: 207px; }
.ci6 { left: 1494px; top: 3847px; width: 252px; height: 207px; }

/* Rectangle 329 — 関連コンテンツ以降の白ベタ（背景画像を覆う） */
.white-329 { top: 4154px; height: 760px; }

/* ============================================================================
   関連コンテンツ（Frame 114）
   ========================================================================== */
/* 位置指定は <a> 側に持たせる。<img> に付けると .stage > * の
   position:absolute が <a> にしか当たらず、座標が効かなくなるため。 */
.rel-btn { top: 4408px; }

/* contents_btn_*.png は写真と紺の斜めパネルのみ。タイトルと丸矢印はHTML/CSSで描く
   （ボタン左上からの相対位置：文字 +32.72/+35.12、丸 +310.45/+177.17、山形 +335.585/+187.155） */


/* 会社概要ボタン（Group 39）— 292×82。HOMEの314×82とは別サイズ */
.btn-company { top: 4732px; }

/* ============================================================================
   Entry / Contact 帯とフッターの縦位置（本体は css/style.css）
   ========================================================================== */
.ec-band  { top: 4914px; }
.ec-panel { top: 4987px; }
.ft       { top: 5289px; }