/* Noto Sans JP / Jost はセルフホスト（public/hp2-assets/css/fonts.css, Head.astroで読み込み）。
   本番CSPで fonts.googleapis.com への外部読み込みがブロックされるため。 */

/* ============================================================================
   ワークスHP 共通スタイル（全ページ読み込み）
   ----------------------------------------------------------------------------
   読み込み順は必ず  css/style.css → css/<ページ>.css  の順。
   ページ側のCSSには「そのページ固有の座標」だけを書く。

   ■ このファイルに入れているもの
     ・カラートークン（:root）とリセット
     ・スケーリング土台（.stage-wrap / .stage / .stage > *）
       ※ .stage の height はページごとに違うので各ページのCSSで指定する
     ・ヘッダー（.hd 系）
     ・セクション見出しの型（.lb / .sec-h / .sec-p）… 位置はページ側
     ・紺の角丸ボタン（.btn 314×82 / .btn-company 292×82 / .ft-btn 192×48）
     ・関連コンテンツ（.rel-btn / .rel-ttl / .rel-dot / .rel-arw）… top はページ側
     ・Entry / Contact 帯（.ec-*）… top はページ側
     ・フッター（.ft 系）… top はページ側
     ・未確定項目のバッジ（.tbd）

   ■ 入れていないもの
     ヒーロー（.hero-*）はページごとに構造が違う（about はぼかした紺の面、
     strengths / company / contact は写真＋左からのグラデーション）ため、
     各ページのCSSに置いている。

   ■ 全ページ共通の約束ごと
     ・数値はすべて Figma の 1920px 基準の実数値をそのまま px で書く。
       表示時は .stage 全体を transform: scale() で等比縮小する（各HTML末尾の
       スクリプト）。どの画面幅でもデザインとの比率が 1:1 に保たれ、
       1920px 以上は等倍・中央寄せになる。
     ・本文の改行位置はデザインと一致させるため <br> を明示し、
       white-space: nowrap で自動折り返しを止めている。ブラウザと Figma で
       字送りの計算がわずかに違い、自動折り返しだと行が変わるため。
       → 文言を変えたら <br> の位置も直すこと。
     ・'Futura PT'（VALUE の数字と Entry / Contact の欧文）は有償フォントのため
       同系統の 'Jost' で代替している。要差し替え。
     ・回転要素の座標補正：Figma の「Copy as CSS」は回転した要素の left / top を
       「回転後のバウンディングボックスの左上」で書き出す一方、width / height は
       回転前の値を返す。CSS で transform: rotate() を中心基準でかけると
       位置がズレるため、下記の式で補正している。
         45度回転時の外接ボックス  W = H = (w + h) / √2
         補正後 left = 元left + (W - w) / 2 ／ top = 元top + (H - h) / 2
       各ルールに「元の指定値 → 補正値」をコメントで残してある。
     ・クラス名の衝突に注意：このファイルは各ページのCSSより先に読み込まれるため、
       ページ側で同名・同詳細度のクラス（.c1 や .rt1 のような短い名前）を
       定義すると、こちらの指定が上書きされる。ページ側は
       .ccard.c1 / .row-tag.rt1 のように親クラスと組み合わせて書くこと。
   ========================================================================== */

:root {
  --navy: #001B44;
  --blue: #225FBA;
  --gray: #4E5448;
  /* 斜めの装飾バーに使う紺のグラデーション */
  --grad-navy-bar: linear-gradient(91.94deg, #001B44 44%, rgba(0, 27, 68, 0) 98.62%);
  --grad-navy-135: linear-gradient(135deg, rgba(0, 27, 68, 0) 14.38%, #001B44 63.56%);
  --grad-blue-135: linear-gradient(135deg, #225FBA 0%, rgba(34, 95, 186, 0) 100%);
  --grad-blue-315: linear-gradient(315deg, #225FBA 0%, rgba(34, 95, 186, 0) 100%);
  /* 破線の区切り／入力欄の枠線 */
  --rule: rgba(0, 27, 68, 0.5);
  --line: rgba(0, 27, 68, 0.25);
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; background: #fff; }
body {
  font-family: 'Noto Sans JP', sans-serif;
  color: var(--navy);
  -webkit-font-smoothing: antialiased;
}
img { display: block; border: 0; }
a { text-decoration: none; color: inherit; }

/* 改行位置がPCとSPで違う箇所のための <br>。
   br-both = 両方で改行 ／ br-pc = PCだけ ／ br-sp = SPだけ（css/sp.css で入れ替える） */
.br-sp { display: none; }

/* ============================================================================
   スケーリング土台
   Figma 1920px 設計を、各ページ末尾のスクリプトで transform: scale() して
   画面幅に合わせる。1920px 以上は等倍・中央寄せ。
   ========================================================================== */
.stage-wrap { width: 100%; overflow: hidden; }
.stage {
  position: relative;
  width: 1920px;          /* height はページごとに指定 */
  overflow: hidden;
  background: #FFFFFF;
  transform-origin: top left;
}
.stage > * { position: absolute; }

/* ----------------------------------------------------------------------------
   .sp-wrap / .sp-band … SPでまとめるためのグルーピング div。
     .sp-wrap … カードや帯（SPではこの箱が見た目を持つ）
     .sp-band … セクションの背景帯（SPでは背景だけを持つ入れ物）
   PCでは「存在しないもの」として扱いたいので、
     ・自身は position: static（＝包含ブロックにならない／レイアウトも取らない）
     ・中身には .stage > * と同じ position: absolute を効かせる
   これで中の要素の座標は .stage 基準のまま変わらず、PCの見えは一切変化しない。
   何段入れ子になってもいいように子孫セレクタで書き、
   「箱自身を static に戻す」ルールを後ろに置いて同詳細度で後勝ちさせている。
   SP側の指定は css/sp.css にある。
   -------------------------------------------------------------------------- */
.stage .sp-wrap > *,
.stage .sp-band > * { position: absolute; }
.stage .sp-wrap,
.stage .sp-band { position: static; }

/* SP専用の背景あしらいレイヤー。PCには出さない（指定は css/sp.css） */
.spdeco { display: none; }

/* ============================================================================
   ヘッダー（Group 6 / Group 2）
   ----------------------------------------------------------------------------
   スクロールに追従させるため、.stage の外（<body> 直下）に置いて position: fixed
   にしている。.stage は transform: scale() されており、transform された要素の
   中では position: fixed が効かない（その要素が包含ブロックになる）ため。
   倍率は各ページ末尾のスクリプトが .stage と同じ値を .hd にもかけている。
   ページ側は上端105pxを従来どおり空けてあるので、最上部での見えは変わらない。
   ========================================================================== */
.hd {
  position: fixed;
  left: 0; top: 0;
  width: 1920px; height: 105px;
  background: #FFFFFF;
  z-index: 1000;
  transform-origin: top left;
  transition: box-shadow 0.2s ease;
}
/* スクロールして本文の上に重なったときだけ、薄く影を落として境界を出す */
.hd.is-scrolled { box-shadow: 0px 2px 20px rgba(0, 27, 68, 0.08); }

.hd-logo { position: absolute; left: 80px; top: 37px; width: 272px; height: 39px; }

/* ハンバーガーはSP専用（css/sp.css で表示する） */
.hd-burger { display: none; }

/* 6項目（幅は文字数 × 14.7144px ＋ 字送り0.1em ぶん）＋ gap41
   合計 499 + 205 = 704px。右のボタン群（1544px〜）の 48px 手前に置く */
.hd-nav {
  position: absolute;
  left: 792px; top: 44px;
  width: 704px; height: 18px;
  display: flex; flex-direction: row; align-items: center; gap: 41px;
}
.hd-nav a {
  height: 18px;
  font-size: 14.7144px; line-height: 18px; font-weight: 350;
  letter-spacing: 0.1em; text-align: center; white-space: nowrap;
  color: var(--navy);
}
.hd-nav a:nth-child(1),
.hd-nav a:nth-child(2) { width: 80px; }   /* 会社を知る / 仕事を知る */
.hd-nav a:nth-child(3) { width: 98px; }   /* 私たちの強み */
.hd-nav a:nth-child(4) { width: 114px; }  /* 代表メッセージ */
.hd-nav a:nth-child(5) { width: 64px; }   /* 会社情報 */
.hd-nav a:nth-child(6) { width: 63px; }   /* ニュース */

/* 右端のボタン2つ（ロゴの左マージンと同じ 80px で右端を揃える） */
.hd-actions {
  position: absolute;
  left: 1544px; top: 30px;
  height: 44px;
  display: flex; flex-direction: row; align-items: center; gap: 16px;
}
.hd-btn {
  display: flex; align-items: center; justify-content: center;
  height: 44px;
  border-radius: 117px;
  font-size: 14px; line-height: 14px; font-weight: 500;
  letter-spacing: 0.1em; white-space: nowrap;
}
.hd-btn-line { width: 150px; color: var(--navy); background: #FFFFFF; border: 1px solid var(--navy); }
.hd-btn-fill { width: 130px; color: #FFFFFF; background: var(--navy); }

/* ページ内リンク（company.html#access など）の着地点が追従ヘッダーの下に
   隠れないよう、105px ぶん手前で止める。scroll-margin は .stage の倍率に追従する。 */
.stage [id] { scroll-margin-top: 125px; }

/* ============================================================================
   スクロール連動フェードイン（.anim / .is-in は js/anim.js が付ける）
   ----------------------------------------------------------------------------
   ・下から 40px ぶん上がりながら現れる。移動量も .stage の倍率に追従する。
   ・対象は「文字・図形・写真」。背景・装飾とフッターは対象外
     （詳細は js/anim.js のコメント）。
   ・カードは、その矩形に収まっている要素をひとまとめにして同時に動かすので、
     図形とテキストがセットで出る。
   ・.anim はJSが付けるので、JSが動かない環境では最初から表示されたまま。
   ========================================================================== */
.anim { opacity: 0; transform: translateY(40px); }
.anim.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) {
  .anim, .anim.is-in { opacity: 1; transform: none; transition: none; }
}

/* ============================================================================
   セクション見出しの型
   英字ラベル（青・25px・字送り0.36em）＋ 39px下に大見出し（紺・45px）
   位置はページ側の .lb-xxx / .h-xxx で指定する。
   ========================================================================== */
.lb {
  left: 180px; height: 25px;
  font-size: 25px; line-height: 25px; font-weight: 500;
  letter-spacing: 0.36em; white-space: nowrap;
  color: var(--blue); margin: 0;
}
.sec-h {
  left: 180px; height: 60px;
  font-size: 45px; line-height: 60px; font-weight: 500;
  letter-spacing: 0.1em; white-space: nowrap;
  color: var(--navy); margin: 0;
}
.sec-p {
  left: 180px;
  font-size: 18px; line-height: 36px; font-weight: 350;
  letter-spacing: 0.1em; white-space: nowrap;
  color: var(--navy); margin: 0;
}

/* ============================================================================
   ボタン
   ========================================================================== */
/* ネイビーの角丸ボタン 314×82。.stage の直下に置くと絶対配置、
   カードの中など通常フローに置く場合はページ側で position: relative を足す */
.btn { width: 314px; height: 82px; background: var(--navy); border-radius: 117px; }
.btn .lbl {
  position: absolute;
  left: 61px; top: 18px;
  width: 169.81px; height: 38px;
  font-size: 21.375px; line-height: 43px; font-weight: 500;
  letter-spacing: 0.1em; text-align: center; white-space: nowrap;
  color: #FFFFFF;
}
.btn .arw {
  position: absolute;
  left: 268px; top: 29px;
  width: 0; height: 0;
  border-left: 12px solid #FFFFFF;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
}

/* 関連コンテンツの下に置く 292×82 のボタン（about の「会社概要」／company の「企業理念」） */
.btn-company {
  left: 814px;            /* top はページ側 */
  width: 292px; height: 82px;
  background: var(--navy); border-radius: 117px;
}
.btn-company .lbl {
  position: absolute;
  left: 2px; top: 18px;
  width: 242px; height: 38px;
  font-size: 22px; line-height: 43px; font-weight: 500;
  letter-spacing: 0.1em; text-align: center; white-space: nowrap;
  color: #FFFFFF;
}
.btn-company .arw {
  position: absolute;
  left: 243.9px; top: 29px;
  width: 0; height: 0;
  border-left: 12px solid #FFFFFF;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
}

/* ============================================================================
   関連コンテンツ（about / message / company）
   contents_btn_*.png は写真と紺の斜めパネルのみ。タイトルと丸矢印はHTML/CSSで描く
   （ボタン左上からの相対位置：文字 +32.72/+35.12、丸 +310.45/+177.17、山形 +335.585/+187.155）
   縦位置（top）はページ側で指定する。
   ========================================================================== */
/* ボタンは <a>。タイトル・丸・山形をその中に入れているので、座標はボタン左上からの
   相対値（SPでそのままカードとして積めるようにするため）。top はページ共通。 */
.rel-btn { width: 395.05px; height: 249px; }
.rel-btn img { width: 100%; height: 100%; }
.rel-btn.rel1 { left: 258.99px; }
.rel-btn.rel2 { left: 762.05px; }
.rel-btn.rel3 { left: 1265.09px; }

.rel-btn .rel-ttl,
.rel-btn .rel-dot,
.rel-btn .rel-arw { position: absolute; }

.rel-ttl {
  left: 32.72px; top: 35.12px; height: 47.88px;
  font-size: 31.9231px; line-height: 48px; font-weight: 500;
  letter-spacing: 0.1em; white-space: nowrap; color: #FFFFFF;
  text-shadow: 0px 0px 11.9712px rgba(0, 27, 68, 0.48);
  margin: 0;
}
.rel-ttl.rt1 { width: 256.18px; }
.rel-ttl.rt2 { width: 277.73px; }
.rel-ttl.rt3 { width: 277.7px; }

.rel-dot {
  left: 310.45px; top: 177.17px;
  width: 50.28px; height: 50.28px;
  background: var(--navy); border-radius: 50%;
}

/* 山形は丸の中心に置く。Figma書き出しの座標は丸の中心＝矢印の左上になっていて
   右上に 4.78 / 5.18px ずれていたため、丸と同じ left / top を与えて
   margin でセンタリングする方式にした。
     左右 (50.28 - 9.58)/2 = 20.35 ／ 上下 (50.28 - 19.95)/2 = 15.165
   ※ transform ではなく margin で寄せているのは、スクロール時のフェードイン
     （translateY）と衝突させないため。 */
.rel-arw {
  left: 310.45px; top: 177.17px;
  width: 9.58px; height: 19.95px;
  margin: 15.165px 0 0 20.35px;
}

/* 関連コンテンツ以降に敷く白ベタ（背景画像やグラデーションを覆う）。top / height はページ側 */
.white-329 { left: 0; width: 1920px; background: #FFFFFF; }

/* ============================================================================
   Entry / Contact 帯（Group 41）— top はページ側
   ========================================================================== */
.ec-band { left: 0; width: 1920px; height: 375px; overflow: hidden; }
/* 1920×1440 の元画像から、y=134px を起点に 375px 分を切り出している */
.ec-band img.ec-photo {
  width: 1920px; height: 375px;
  object-fit: none; object-position: 0 -134px;
}
.ec-band .ec-veil { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.27); }

/* パネルは <a>。見出し・本文・ロゴマークをその中に入れているので、
   座標はパネル左上からの相対値（SPでそのままカードとして積めるようにするため）。
   top はどのページも共通（帯top +73 がパネル、+115 / +191 / +155 が中身）。 */
.ec-panel {
  height: 230px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 29px;
  cursor: pointer;
}
.ec-entry { left: 180px; width: 698px; }
.ec-contact { left: 1002px; width: 738px; }

.ec-panel .ec-en,
.ec-panel .ec-txt,
.ec-panel .ec-mark { position: absolute; }

.ec-en {
  top: 42px; height: 49px;
  font-family: 'Jost', 'Futura PT', 'Noto Sans JP', sans-serif;
  font-size: 50px; line-height: 50px; font-weight: 450;
  letter-spacing: 0.07em; color: #FFFFFF; margin: 0;
}
.ec-en.e1 { left: 46px; width: 242px; }
.ec-en.e2 { left: 71px; width: 349px; }

.ec-txt {
  top: 118px; height: 71px;
  font-size: 18px; line-height: 36px; font-weight: 350;
  letter-spacing: 0.1em; color: #FFFFFF; margin: 0;
}
.ec-txt.t1 { left: 46px; width: 431px; }
.ec-txt.t2 { left: 71px; width: 495px; }

.ec-mark { top: 82px; width: 46px; height: 72px; }
.ec-mark.m1 { left: 548px; }
.ec-mark.m2 { left: 639px; }

/* ============================================================================
   フッター（Group 40）— top はページ側
   ========================================================================== */
.ft { left: 0; width: 1920px; height: 502px; background: #FFFFFF; }
.ft-logo { position: absolute; left: 185px; top: 71px; width: 261px; height: 37.4px; }
.ft-address {
  position: absolute;
  left: 185px; top: 140px;
  width: 271px; height: 99px;
  font-size: 16px; line-height: 33px; font-weight: 350;
  letter-spacing: 0.1em; white-space: nowrap;
  color: var(--navy); font-style: normal; margin: 0;
}
.ft-h {
  position: absolute;
  top: 73px; height: 26px;
  font-size: 26px; line-height: 20px; font-weight: 500;
  letter-spacing: 0.1em; white-space: nowrap;
  color: var(--navy); margin: 0;
}
/* 列の並びはヘッダーのナビと同じ順序
   （会社を知る → 仕事を知る → ニュース → お問い合わせ → 採用情報）。
   最終列は右端 1740px（ロゴの左余白と同じ180px）で揃うよう left:1618px。 */
.ft-h.c1 { left: 651px; width: 141px; }
.ft-h.c2 { left: 888px; width: 141px; }
.ft-h.c3 { left: 1125px; width: 111px; text-align: center; }
.ft-h.c4 { left: 1332px; width: 177px; }   /* お問い合わせ */
.ft-h.c5 { left: 1618px; width: 114px; }   /* 採用情報 */
/* 見出しもリンクにしている（色・字送りは <p> から継承） */
.ft-h a { color: inherit; }

.ft-list {
  position: absolute;
  top: 126px; width: 122px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 15px;
  margin: 0; padding: 0; list-style: none;
}
.ft-list.c1 { left: 651px; }
.ft-list.c2 { left: 888px; }
.ft-list.c5 { left: 1618px; }
.ft-list a {
  display: block; height: 20px;
  font-size: 16px; line-height: 20px; font-weight: 350;
  letter-spacing: 0.1em; white-space: nowrap;
  color: var(--navy);
}
/* 準備中の項目（新卒採用など）。リンクではないためaでなくspanで表示するグレーアウト + Coming Soonバッジ */
.ft-list .is-soon {
  display: flex; align-items: center;
  height: auto;
  font-size: 16px; line-height: 20px; font-weight: 350;
  letter-spacing: 0.1em; white-space: nowrap;
  color: rgba(0, 27, 68, 0.4);
  cursor: default;
}

/* フッターのお問い合わせボタン 192×48（4列目） */
.ft-btn {
  position: absolute;
  left: 1332px; top: 126px;
  width: 192px; height: 48px;
  background: var(--navy); border-radius: 117px;
}
.ft-btn .lbl {
  position: absolute;
  left: 37px; top: 9px;
  width: 96px; height: 29px;
  font-size: 14px; line-height: 30px; font-weight: 500;
  letter-spacing: 0.1em; text-align: center; white-space: nowrap;
  color: #FFFFFF;
}
/* ----------------------------------------------------------------------------
   コピーライト帯（全ページ共通）。フッター＝ページ最下部の中に敷いている。
   リンク列は top 281px あたりで終わるので、下端 80px は空いている。
   -------------------------------------------------------------------------- */
.ft-copy {
  position: absolute;
  left: 0; bottom: 0;
  width: 1920px; height: 80px;
  display: flex; align-items: center; justify-content: center;
  background: var(--navy);
  font-size: 16px; line-height: 1.6; font-weight: 350;
  letter-spacing: 0.1em;
  color: #FFFFFF;
  margin: 0;
}

.ft-btn .arw {
  position: absolute;
  left: 169px; top: 16px;
  width: 0; height: 0;
  border-left: 8px solid #FFFFFF;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}

/* ============================================================================
   未確定項目のバッジ（company / contact）
   実データに差し替えたら <span class="tbd"> ごと削除する
   ========================================================================== */
.tbd {
  display: inline-block;
  margin-left: 14px;
  padding: 0 12px;
  height: 26px;
  font-size: 13px; line-height: 24px; font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--blue);
  border: 1px solid var(--blue);
  border-radius: 13px;
  opacity: 0.8;
  vertical-align: 2px;
}