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

.stage { height: 6941px; }

/* ============================================================================
   このページの共通パーツ
   ※ ネイビーの角丸ボタン 314×82（.btn）の本体は css/style.css にある
   ========================================================================== */

/* Figma の Frame 86 / 87 / 88 / 89（縦オートレイアウト gap:25px） */
.frame { display: flex; flex-direction: column; align-items: flex-start; gap: 25px; }
.frame.to-right { align-items: flex-end; }
.frame .h2 {
  font-size: 45px;
  line-height: 90px;
  font-weight: 500;
  letter-spacing: 0.1em;
  white-space: nowrap;
  color: var(--navy);
  margin: 0;
}
.frame .lead {
  font-size: 18px;
  line-height: 36px;
  font-weight: 350;
  letter-spacing: 0.1em;
  white-space: nowrap;   /* 改行はHTML側の <br> のみで制御する */
  color: var(--navy);
  margin: 0;
}
.frame .btn { position: relative; }

/* ============================================================================
   装飾図形
   ※ left が 1920px を超えるもの（Rectangle 15 / Group 17 / 右側の Subtract）は
     キャンバス外のため実装していない。参照デザイン画像にも写っていない。
   ========================================================================== */

.deco-bar {
  background: var(--grad-navy-bar);
  border-radius: 442.493px;
  transform: rotate(-45deg);
  filter: blur(5.5px);
}

/* Rectangle 11 — FV上部を斜めに横切る大きな帯（-376.04, -399.44 → -556.48, 357.50） */
.deco-r11 { left: -556.48px; top: 357.50px; width: 2329.22px; height: 454.48px; opacity: 0.09; }
/* Rectangle 10 — FV左上の帯（35, -12 → 9.37, 123.59） */
.deco-r10 { left: 9.37px; top: 123.59px; width: 426.68px; height: 104.23px; opacity: 0.56; }
/* Rectangle 8 — FV中央上の濃いネイビー帯（774, 21 → 765.58, 125.66／ぼかしなし・不透明） */
.deco-r8 {
  left: 765.58px; top: 125.66px; width: 345.41px; height: 119.25px;
  background: var(--grad-navy-bar);
  border-radius: 442.493px;
  transform: rotate(-45deg);
}
/* Rectangle 9 — FV右上の帯（1531, 90 → 1485.97, 269.80） */
.deco-r9 { left: 1485.97px; top: 269.80px; width: 550.2px; height: 100.54px; opacity: 0.76; }
/* Rectangle 13（大） — 仕事を知る下の帯（-493, 2918 → -676.21, 3489.62） */
.deco-r13 { left: -676.21px; top: 3489.62px; width: 1692.55px; height: 182.9px; opacity: 0.05; }
/* Rectangle 20 — 私たちの強み〜代表メッセージ背後の広い帯（-423.2, 2805 → -801.08, 4024.07） */
.deco-r20 { left: -801.08px; top: 4024.07px; width: 3627.77px; height: 433.88px; opacity: 0.05; }
/* Rectangle 27 — 私たちの強みの帯（108, 3191.79 → -91.42, 3840.54） */
.deco-r27 { left: -91.42px; top: 3840.54px; width: 1932.9px; height: 236.57px; opacity: 0.05; }

/* Rectangle 6 — 会社を知る〜仕事を知るの広い背景（回転なし） */
/* 中段の広い下地。地のグラデーション（縦方向）は残したまま、
   図形入りの背景画像 home_wide_bg.png を重ねて右から左へゆっくり流している。
   ・画像は 5671×1759（比率3.224）。この要素 4508.58×1381（比率3.265）とほぼ同じ比率なので、
     要素幅ちょうど1枚に敷き、横方向にリピートさせている。
   ・画像は上下端が透過しているため、地のグラデーションと自然につながる。
   ・動かすのは擬似要素の transform だけなので、巨大要素の再描画は起きない。 */
.wide-bg {
  left: -599px; top: 1945px;
  width: 4508.58px; height: 1381px;
  background: linear-gradient(180deg, #FBFCFD 0%, #EEF5FC 24.1%);
  overflow: hidden;
}
.wide-bg::before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 200%; height: 100%;
  /* 1タイル＝要素幅（4508.58px）。200%幅に2タイル並ぶので、
     translateX(-50%) でちょうど1タイルぶん進み、継ぎ目が出ない */
  background: url(/hp2-assets/img/home_wide_bg.webp) repeat-x 0 0 / 4508.58px 100%;
  animation: wide-bg-flow 60s linear infinite;
}
@keyframes wide-bg-flow {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .wide-bg::before { animation: none; }
}

/* Subtract — 左下の太いリング（上半分のみ・回転なし）
   Ellipse 1(外径511.19) から Ellipse 2(内径270.13) を抜いた同心リングの上半分。
   内径/外径 = 135.065/255.595 = 52.84% を radial-gradient マスクで表現。 */
.deco-ring {
  left: -294.61px; top: 3070.4px;
  width: 511.19px; height: 511.19px;
  border-radius: 50%;
  background: var(--grad-navy-135);
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent 52.83%, #000 52.84%);
          mask: radial-gradient(circle at 50% 50%, transparent 52.83%, #000 52.84%);
  clip-path: inset(0 0 50% 0);
  opacity: 0.3;
  filter: blur(5.5px);
}

/* Rectangle 12 — 会社を知るの写真の背後から覗く青い菱形（1146.81, 2404.3 → 1184.12, 2441.61） */
.deco-r12 {
  left: 1184.12px; top: 2441.61px; width: 180.13px; height: 180.13px;
  background: var(--grad-blue-135);
  opacity: 0.46;
  filter: blur(5.5px);
  border-radius: 38px;
  transform: rotate(-45deg);
}
/* Rectangle 13（小） — 写真右上の小さな菱形（1638.64, 2252.23 → 1655.61, 2269.20） */
.deco-r13s {
  left: 1655.61px; top: 2269.20px; width: 81.91px; height: 81.91px;
  background: var(--grad-blue-135);
  opacity: 0.46;
  filter: blur(2.50101px);
  border-radius: 17.2797px;
  transform: rotate(-45deg);
}
/* Rectangle 14 — 仕事を知る右下の濃い菱形（1574.35, 3070.4 → 1610.30, 3106.35） */
.deco-r14 {
  left: 1610.30px; top: 3106.35px; width: 173.55px; height: 173.55px;
  background: var(--grad-navy-135);
  opacity: 0.46;
  filter: blur(5.29932px);
  border-radius: 36.6135px;
  transform: rotate(-45deg);
}

/* Group 18 — 事業アイコン左上の青い丸ふたつ */
.deco-g18 { left: 243.7px; top: 2635.89px; width: 191.31px; height: 135.54px; filter: blur(5.5px); }
.deco-g18 span { position: absolute; border-radius: 50%; background: var(--grad-blue-315); opacity: 0.46; }
.deco-g18 .e10 { left: 0; top: 0; width: 135.54px; height: 135.54px; }
.deco-g18 .e11 { left: 102.24px; top: 46.47px; width: 89.07px; height: 89.07px; }

/* ---------------------------------------------------------------------------
   中段（.wide-bg の範囲 y1945〜3326）の図形は、背景画像 home_wide_bg.png に
   同じもの（リング・菱形・青い丸）が入っている。両方出すと、画像が流れたときに
   静止しているこちらとズレて二重に見えるため、画像側に任せて非表示にしている。
   画像を使わない構成に戻すときは、この display:none を外す。
   ※ 長い斜めの帯（.deco-r13 / .deco-r20 / .deco-r27）は画像に入っておらず、
     位置も .wide-bg の下（強み〜代表メッセージ）なのでそのまま残している。
   --------------------------------------------------------------------------- */
.deco-ring,
.deco-r12,
.deco-r13s,
.deco-r14,
.deco-g18 { display: none; }

/* home_news_bg — ニュースセクションの背景。
   Figmaグループ(2236×1165.41 @ left:-158)をキャンバス幅で書き出した 1920×1166 の画像。
   中の Rectangle 21〜26 の帯はこの画像に焼き込まれている。 */
.news-bg { left: 0; top: 4899px; width: 1920px; height: 1166px; }

/* ============================================================================
   ファーストビュー
   ========================================================================== */
.fv-img01 { left: 877.19px; top: -229px; width: 992.06px; height: 992.06px; }
.fv-img02 { left: 1220.5px; top: 492.18px; width: 947.82px; height: 947.82px; }
.fv-img03 { left: 681.09px; top: 695.6px; width: 811.09px; height: 436.4px; }

/* h1でラップしているため、見出しのデフォルトmarginを打ち消し、中のimgを枠いっぱいに敷く */
.fv-title { left: 180.72px; top: 378.97px; width: 470.28px; height: 229.12px; margin: 0; }
.fv-title img { display: block; width: 100%; height: 100%; }

.fv-lead {
  left: 180px; top: 655px; width: 594px; height: 179px;
  font-size: 18px; line-height: 36px; font-weight: 350;
  letter-spacing: 0.1em; white-space: nowrap;
  color: var(--navy); margin: 0;
}
.fv-btn { left: 180px; top: 877px; }

/* ============================================================================
   ステートメント帯（home_image_04）
   ========================================================================== */
/* 元画像は 1920×1440。上端から 950px 分を使用(縦幅を広げる要望対応、元は865px) */
.st-img {
  left: 0; top: 1080px; width: 1920px; height: 950px;
  object-fit: none;
  object-position: 0 0;
}
.st-h {
  left: 180px; top: 1280px; width: 899px; height: 180px;
  font-size: 45px; line-height: 90px; font-weight: 500;
  letter-spacing: 0.1em; color: #FFFFFF;
  text-shadow: 0px 0px 15px rgba(0, 27, 68, 0.48);
  margin: 0;
}
.st-sub {
  left: 180px; top: 1488px; width: 655px; height: 100px;
  font-size: 25px; line-height: 50px; font-weight: 350;
  letter-spacing: 0.1em; color: #FFFFFF;
  text-shadow: 0px 0px 15px rgba(0, 27, 68, 0.48);
  margin: 0;
}
.st-btn { left: 180px; top: 1663px; }

/* ============================================================================
   会社を知る（Frame 86）
   ========================================================================== */
.f86 { left: 180px; top: 2201px; width: 630px; height: 294px; }
.f86 .h2 { width: 243px; height: 90px; }
.f86 .lead { width: 630px; height: 72px; }

.company-img {
  left: 1084px; top: 2144px; width: 656px; height: 416px;
  border-radius: 40px;
  object-fit: cover;
}

/* ============================================================================
   仕事を知る（Frame 87 ＋ 事業アイコン7つ）
   ========================================================================== */
.f87 { left: 1141px; top: 2760px; width: 597px; height: 366px; }
.f87 .h2 { width: 243px; height: 90px; text-align: right; }
.f87 .lead { width: 597px; height: 144px; }

/* 白い円 161.37×162.15 */
.wcircle { width: 161.37px; height: 162.15px; background: #FFFFFF; border-radius: 50%; }
.wc1 { left: 242px;    top: 2775px; }
.wc2 { left: 427.54px; top: 2775px; }
.wc3 { left: 613.08px; top: 2775px; }
.wc4 { left: 798.63px; top: 2775px; }
.wc5 { left: 323.08px; top: 2956.64px; }
.wc6 { left: 508.62px; top: 2956.64px; }
.wc7 { left: 694.16px; top: 2956.64px; }

/* 事業名ラベル */
.wlabel {
  width: 134.09px; height: 35.86px;
  font-size: 18px; line-height: 36px; font-weight: 500;
  letter-spacing: 0.1em; text-align: center; white-space: nowrap;
  color: var(--navy); margin: 0;
}
.wl1 { left: 256.03px; top: 2870.89px; }
.wl2 { left: 442.35px; top: 2870.89px; }
.wl3 { left: 627.12px; top: 2870.89px; }
.wl4 { left: 812.66px; top: 2870.89px; }
.wl5 { left: 336.33px; top: 3052.53px; font-size: 17px; }   /* クリニック事業のみ17px */
.wl6 { left: 521.87px; top: 3052.53px; }
.wl7 { left: 708.19px; top: 3052.53px; }

/* 事業アイコン（Figmaの%指定を1920×8005基準でpx換算） */
.wicon-people { left: 297.41px; top: 2808.15px; width: 51.46px; height: 52.03px; }
.wicon-cup    { left: 485.18px; top: 2818.56px; width: 46.85px; height: 41.63px; }
.wicon-heart  { left: 666.82px; top: 2808.15px; width: 54.72px; height: 52.03px; }
.wicon-lawyer { left: 849.98px; top: 2808.15px; width: 59.33px; height: 52.03px; }
.wicon-beauty { left: 381.50px; top: 2991.47px; width: 43.78px; height: 42.43px; }
.wicon-pc     { left: 565.44px; top: 2994.67px; width: 47.62px; height: 44.83px; }
.wicon-trade  { left: 751.10px; top: 2994.67px; width: 47.62px; height: 44.83px; }

/* ============================================================================
   私たちの強み（Frame 88）
   ========================================================================== */
.strength-img {
  left: 175px; top: 3526px; width: 625px; height: 404px;
  border-radius: 40px; object-fit: cover;
}
.f88 { left: 998px; top: 3581px; width: 629px; height: 294px; }
.f88 .h2 { width: 293px; height: 90px; }
.f88 .lead { width: 629px; height: 72px; }

/* ============================================================================
   代表メッセージ（Frame 89）
   ========================================================================== */
.f89 { left: 240px; top: 4331px; width: 531px; height: 258px; }
.f89 .h2 { width: 342px; height: 90px; }
.f89 .lead { width: 531px; height: 36px; }

.profile-img { left: 1186px; top: 4130px; width: 526px; height: 682px; }

/* ============================================================================
   ニュース
   ========================================================================== */
.news-h {
  left: 241px; top: 5099px; width: 396px; height: 90px;
  font-size: 45px; line-height: 90px; font-weight: 500;
  letter-spacing: 0.1em; color: var(--navy); margin: 0;
}

/* Frame 8 — カード3枚（ピッチ 535.24px） */
.news-card {
  width: 410px; height: 426px;
  background: #FFFFFF;
  box-shadow: 0px 0px 70px rgba(0, 27, 68, 0.2), 0px 0px 30px rgba(0, 27, 68, 0.2);
  border-radius: 41px;
}
.nc1 { left: 240.89px;  top: 5241px; }
.nc2 { left: 776.13px;  top: 5241px; }
.nc3 { left: 1311.36px; top: 5241px; }

.news-title {
  position: absolute;
  left: 29px; top: 71px;
  width: 249px; height: 120px;
  font-size: 30px; line-height: 60px; font-weight: 500;
  letter-spacing: 0.1em; white-space: nowrap;
  color: var(--navy); margin: 0;
}
.news-body {
  position: absolute;
  left: 29px; top: 211px;
  width: 351px; height: 143px;
  font-size: 18px; line-height: 36px; font-weight: 350;
  letter-spacing: 0.1em; color: var(--navy); margin: 0;
}

/* お知らせタグ（home_news_deco.png を 165×41 に縮小して使用） */
/* お知らせタグはカード（.news-card）の中に入れているので、座標はカード左上からの
   相対値。元の絶対座標との差は3枚とも同じ（left −42.24 / top +405）。
   SPではこのタグを news.html と同じピル型に作り替えている（css/sp.css）。 */
.news-tag {
  position: absolute;
  left: -42.24px; top: 405px;
  width: 189.59px; height: 41px;
}
/* 日付はSPのカード（news.html と同じ体裁）でだけ使う。PCのデザインには無い */
.news-date { display: none; }
.news-tag img { width: 165px; height: 41px; }
.news-tag span {
  position: absolute;
  left: 34.59px; top: 0;
  width: 155px; height: 41px;
  font-size: 20px; line-height: 41px; font-weight: 500;
  letter-spacing: 0.1em; white-space: nowrap;
  color: #FFFFFF;
}

.news-btn { left: 803px; top: 5780px; }

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