/* ============================================================================
ワークスHP 私たちの強み（strengths.html） — このページ固有の座標
----------------------------------------------------------------------------
共通部分（リセット・スケーリング土台・ヘッダー・Entry/Contact帯・フッター・
ボタン・見出しの型）は css/style.css にある。HTML では style.css → このファイル
の順で読み込むこと。
========================================================================== */
.stage { height: 5518px; }
/* ============================================================================
背景（strengths_bg グループ）
========================================================================== */
/* Rectangle 6 — 本文エリア全体の淡いグラデーション */
.bg-main {
left: -160px; top: 524px; width: 2240px; height: 3414px;
background: linear-gradient(180deg, #FBFCFD 0%, #EEF5FC 24.1%);
}
.deco {
background: linear-gradient(91.94deg, #001B44 44%, rgba(0, 27, 68, 0) 98.62%);
border-radius: 442.493px;
transform: rotate(-45deg);
}
/* Rectangle 94（-145, 447 → -155.02, 591.07） */
.deco-94 { left: -155.02px; top: 591.07px; width: 477.71px; height: 169.54px; opacity: 0.06; filter: blur(6.7px); }
/* Rectangle 87（141.56, 546.06 → 129.26, 612.15／ぼかしなし） */
.deco-87 { left: 129.26px; top: 612.15px; width: 208.26px; height: 51.48px; opacity: 0.64; }
/* Rectangle 93（1655, 546 → 1623.13, 686.50） */
.deco-93 { left: 1623.13px; top: 686.50px; width: 434.61px; height: 89.87px; opacity: 0.21; filter: blur(8.7px); }
/* ============================================================================
ヒーロー（strengths_head）
========================================================================== */
/* 元画像 DSC_5248（1365×2048）を幅1920に拡大（1920×2881）し、y=434 から419px分を使用 */
.hero-photo { left: 0; top: 105px; width: 1920px; height: 419px; overflow: hidden; }
.hero-photo img { position: absolute; left: 0; top: -434px; width: 1920px; height: 2881px; }
/* Rectangle 124 — 左から右へ抜ける濃紺グラデーション */
.hero-veil {
left: 0; top: 105px; width: 1920px; height: 419px;
background: linear-gradient(90deg, #001B44 0%, rgba(0, 27, 68, 0) 67.31%);
}
.hero-badge {
left: 180px; top: 262px; width: 242px; height: 71px;
display: flex; flex-direction: row; align-items: center; gap: 38px;
}
.hero-badge .bar { width: 9px; height: 71px; background: #FFFFFF; border-radius: 19px; }
.hero-badge span {
width: 195px; height: 60px;
font-size: 30px; line-height: 60px; font-weight: 500;
letter-spacing: 0.1em; white-space: nowrap; color: #FFFFFF;
}
.hero-lead {
left: 180px; top: 360px; width: 908px; height: 60px;
font-size: 30px; line-height: 60px; font-weight: 350;
letter-spacing: 0.1em; white-space: nowrap; color: #FFFFFF; margin: 0;
}
/* ============================================================================
セクション見出し
========================================================================== */
.sec-h { top: 724px; width: 1269px; }
.sec-lead {
left: 180px; top: 817px; width: 1094px; height: 71px;
font-size: 18px; line-height: 36px; font-weight: 350;
letter-spacing: 0.1em; white-space: nowrap; color: var(--navy); margin: 0;
}
/* ============================================================================
強み 5項目
Figmaの縦オートレイアウト（left:180 / top:988 / gap:170、各402px）を展開
========================================================================== */
/* 写真（角丸40px）。行は align-items:center のため 402-345 の半分＝28.5px 下げ */
.simg { left: 180px; height: 345px; border-radius: 40px; object-fit: cover; }
.si1 { top: 1017px; width: 519px; }
.si2 { top: 1589px; width: 519px; }
.si3 { top: 2161px; width: 518px; }
.si4 { top: 2733px; width: 518px; }
.si5 { top: 3305px; width: 518px; }
/* 番号（01〜05） */
.snum {
width: 86px; height: 60px;
font-size: 70px; line-height: 60px; font-weight: 900;
color: var(--blue); opacity: 0.55; margin: 0;
}
.sn1 { left: 803px; top: 987px; }
.sn2 { left: 803px; top: 1559px; }
.sn3 { left: 802px; top: 2131px; }
.sn4 { left: 802px; top: 2703px; }
.sn5 { left: 802px; top: 3275px; }
/* 番号の下の短い横罫（Vector 38 = 58×0 + 1px border） */
.srule { width: 58px; height: 1px; background: var(--navy); }
.sr1 { left: 817px; top: 1070px; }
.sr2 { left: 817px; top: 1642px; }
.sr3 { left: 816px; top: 2214px; }
.sr4 { left: 816px; top: 2786px; }
.sr5 { left: 816px; top: 3358px; }
/* 見出し */
.sttl {
height: 70px;
font-size: 35px; line-height: 70px; font-weight: 700;
letter-spacing: 0.1em; white-space: nowrap; color: var(--navy); margin: 0;
}
.st1 { left: 803px; top: 1093px; width: 228px; }
.st2 { left: 803px; top: 1665px; width: 305px; }
.st3 { left: 802px; top: 2237px; width: 303px; }
.st4 { left: 802px; top: 2809px; width: 305px; }
.st5 { left: 802px; top: 3381px; width: 343px; }
/* サブ見出し（青いキーワード ／ 説明） */
.ssub {
height: 50px;
display: flex; flex-direction: row; align-items: center; gap: 15px;
font-size: 25px; line-height: 50px; font-weight: 700;
letter-spacing: 0.1em; white-space: nowrap; margin: 0;
}
.ssub .key { color: var(--blue); }
.ssub .sep,
.ssub .desc { color: var(--navy); }
.ss1 { left: 803px; top: 1163px; width: 795px; }
.ss2 { left: 803px; top: 1735px; width: 723px; }
.ss3 { left: 802px; top: 2307px; width: 815px; }
.ss4 { left: 802px; top: 2879px; width: 806px; }
.ss5 { left: 802px; top: 3451px; width: 721px; }
/* 本文（4行。ブラウザとFigmaで字送りが違うため
で行を固定） */
.sbody {
height: 143px;
font-size: 18px; line-height: 36px; font-weight: 350;
letter-spacing: 0.1em; white-space: nowrap; color: var(--navy); margin: 0;
}
.sb1 { left: 803px; top: 1246px; width: 812px; }
.sb2 { left: 803px; top: 1818px; width: 790px; }
.sb3 { left: 802px; top: 2390px; width: 798px; }
.sb4 { left: 802px; top: 2962px; width: 798px; }
.sb5 { left: 802px; top: 3534px; width: 798px; }
/* ============================================================================
関連コンテンツ（Group 170）
========================================================================== */
.white-329 { top: 3938px; height: 703px; }
.lb-related {
left: 180px; top: 4038px; width: 139px; height: 25px;
font-size: 25px; line-height: 25px; font-weight: 500;
letter-spacing: 0.36em; white-space: nowrap; color: var(--blue); margin: 0;
}
.h-related {
left: 180px; top: 4077px; width: 406px; height: 60px;
font-size: 45px; line-height: 60px; font-weight: 500;
letter-spacing: 0.1em; white-space: nowrap; color: var(--navy); margin: 0;
}
/* 位置指定は 側に持たせる（.stage > * が にしか当たらないため）。
contents_btn_*.png には写真と紺の斜めパネルだけが入っており、
タイトル文字と丸い矢印は別レイヤーなのでHTML/CSSで描いている。 */
.rel-btn { top: 4192px; }
.rel-btn.rel3 { width: 395px; height: 248.97px; }
/* カードのタイトル */
/* 丸い矢印（Ellipse 18/20 ＋ Polygon 3/5） */
/* ============================================================================
Entry / Contact 帯とフッターの縦位置（本体は css/style.css）
========================================================================== */
.ec-band { top: 4641px; }
.ec-panel { top: 4714px; }
.ft { top: 5016px; }