@charset "utf-8";
/* ============================================================
   私たちの強み  /common/css/strength.css
   ・Figma実データ(node 2612:857)の座標・サイズで忠実再現
   ・ヘッダー/お問い合わせCTA/フッターはテーマ側の共通パーツ
   ============================================================ */
#strength main > .mainTitle{ display:none; }
#strength main{ overflow:hidden; }

/* ヘッダー：MV(暗い)の上は白／MVを抜けたら通常色 */
#strength.mvOver header{ background:transparent; border-bottom-color:rgba(255,255,255,.25); }
#strength.mvOver header a{ color:#fff; }
#strength.mvOver header #logo img{ filter:brightness(0) invert(1); }
#strength.mvOver header #gnaviList .hasSub > a::after{ border-color:#fff; }
#strength.mvOver header .menu span{ background:#fff; }

/* MV（ヒーロー・動画） */
.stMv{ position:relative; width:100%; min-height:88vh; display:flex; align-items:center; color:#fff; overflow:hidden; background:#0c1830; }
.stMv__bg{ position:absolute; inset:0; z-index:0; }
.stMv__bg video, .stMv__bg img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.stMv__bg::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(10,20,40,.35) 0%, rgba(10,20,40,.15) 40%, rgba(10,20,40,.55) 100%); }
.stMv__inner{ position:relative; z-index:2; width:88.3%; max-width:1240px; margin:0 auto; padding:160px 0 90px; }
.stMv__en{ font-family:"Poppins",sans-serif; font-size:1.4rem; letter-spacing:.18em; margin-bottom:18px; }
.stMv__ttl{ font-size:4rem; font-weight:500; letter-spacing:.06em; margin-bottom:26vh; line-height:1.2; }
.stMv__lead h2{ font-size:3.0rem; font-weight:500; letter-spacing:.04em; margin-bottom:28px; line-height:1.5; }
.stMv__lead p{ font-size:1.5rem; line-height:2.2; letter-spacing:.03em; }

/* 本文ブロック（共通）＋背景：Figmaの薄い斜め柄(#FAFAFA) */
.stBody{ background:#fff url(/common/images/strength_bg.png) no-repeat top center; background-size:100% auto; padding:0.1px 0 200px; }
.stBlock figure{ overflow:hidden; }
.stBlock figure img{ width:100%; height:100%; object-fit:cover; display:block; }
.stBlock__num{ writing-mode:vertical-rl; font-family:"Poppins",sans-serif; font-size:1.2rem; letter-spacing:.16em; color:var(--gray); white-space:nowrap; }
.stBlock__ttl{ font-size:2.8rem; font-weight:500; letter-spacing:.04em; color:var(--base); margin-bottom:28px; line-height:1.5; }
.stBlock__sub{ font-size:1.8rem; font-weight:500; color:var(--base); margin-bottom:26px; line-height:1.7; }
.stBlock__body{ font-size:1.4rem; line-height:2.0; letter-spacing:.02em; color:#555; }

/* PC：Figma座標のピクセル配置（aspect-ratioで高さ＝自幅基準・fluid） */
@media screen and (min-width:769px){
 /* ヒーローのタイトル位置を「ものづくり」ページと統一（上端基準・padding36vh） */
 .stMv{ align-items:flex-start; }
 .stMv__inner{ padding:36vh 0 90px; }
 .stMv__ttl{ margin-bottom:12vh; }
 .stBlock{ position:relative; width:88.3%; max-width:1240px; margin:0 auto; }
 .stBlock--01{ aspect-ratio:1240/736; margin-top:150px; }
 .stBlock--01 .imgA{ position:absolute; left:70.65%; top:0.0%; width:24.27%; aspect-ratio:301/583; }
 .stBlock--01 .imgB{ position:absolute; left:43.06%; top:20.79%; width:24.27%; aspect-ratio:301/583; }
 .stBlock--01 .stBlock__txt{ position:absolute; left:11.13%; top:50.54%; width:25.97%; }
 .stBlock--01 .stBlock__num{ position:absolute; left:7.82%; top:50.54%; }
 .stBlock--02{ aspect-ratio:1240/736; margin-top:145px; }
 .stBlock--02 .imgA{ position:absolute; left:34.68%; top:0.0%; width:24.27%; aspect-ratio:301/583; }
 .stBlock--02 .imgB{ position:absolute; left:7.1%; top:20.79%; width:24.27%; aspect-ratio:301/583; }
 .stBlock--02 .stBlock__txt{ position:absolute; left:68.95%; top:33.02%; width:25.97%; }
 .stBlock--02 .stBlock__num{ position:absolute; left:65.65%; top:33.02%; }
 .stBlock--03{ aspect-ratio:1240/662; margin-top:168px; }
 .stBlock--03 .imgA{ position:absolute; left:51.29%; top:0.0%; width:40.89%; aspect-ratio:507/662; }
 .stBlock--03 .stBlock__txt{ position:absolute; left:18.79%; top:24.92%; width:26.45%; }
 .stBlock--03 .stBlock__num{ position:absolute; left:15.48%; top:24.92%; }
 .stBlock--04{ aspect-ratio:1240/538; margin-top:163px; }
 .stBlock--04 .imgA{ position:absolute; left:4.92%; top:0.0%; width:56.69%; aspect-ratio:703/538; }
 .stBlock--04 .stBlock__txt{ position:absolute; left:71.61%; top:31.78%; width:25.97%; }
 .stBlock--04 .stBlock__num{ position:absolute; left:68.31%; top:31.78%; }
 .stBlock--05{ aspect-ratio:1240/538; margin-top:119px; }
 .stBlock--05 .imgA{ position:absolute; left:40.89%; top:0.0%; width:56.69%; aspect-ratio:703/538; }
 .stBlock--05 .stBlock__txt{ position:absolute; left:8.95%; top:41.08%; width:26.45%; }
 .stBlock--05 .stBlock__num{ position:absolute; left:5.65%; top:41.08%; }
}

/* SP */
@media screen and (max-width:768px){
	.stMv{ min-height:86vh; }
	.stMv__inner{ width:86%; padding:120px 0 70px; }
	.stMv__en{ font-size:1.2rem; }
	.stMv__ttl{ font-size:3.0rem; margin-bottom:34vh; }
	.stMv__lead h2{ font-size:2.2rem; margin-bottom:20px; }
	.stMv__lead p{ font-size:1.4rem; line-height:2; }
	.stMv__lead p br{ display:none; }

	.stBody{ background-size:100% auto; padding:0 0 80px; }
	.stBlock{ position:relative; width:86%; max-width:none; aspect-ratio:auto; height:auto; padding:0; margin:64px auto 0; display:flex; flex-direction:column; }
	.stBlock .imgA, .stBlock .imgB{ position:static; width:100%; aspect-ratio:auto; }
	.stBlock figure{ height:auto; } .stBlock figure img{ height:auto; }
	.stBlock .imgA{ order:1; margin-bottom:16px; }
	.stBlock .imgB{ order:2; margin-bottom:16px; }
	.stBlock__num{ position:static; writing-mode:horizontal-tb; display:block; order:3; margin:6px 0 12px; }
	.stBlock__txt{ position:static; width:100%; order:4; }
	.stBlock__ttl{ font-size:2.4rem; margin-bottom:16px; }
	.stBlock__sub{ font-size:1.6rem; margin-bottom:18px; }
	.stBlock__sub br{ display:none; }
	.stBlock__body{ font-size:1.4rem; line-height:2; }

	/* 第1・第2セクションはSPでも縦積みにせず、PC同様「横並び2枚＋縦ズレ」を維持 */
	.stBlock--01, .stBlock--02{ display:block; }
	.stBlock--01 .imgA, .stBlock--01 .imgB,
	.stBlock--02 .imgA, .stBlock--02 .imgB{ position:static; width:46%; aspect-ratio:301/583; margin:0; }
	.stBlock--01 .imgA img, .stBlock--01 .imgB img,
	.stBlock--02 .imgA img, .stBlock--02 .imgB img{ height:100%; }
	.stBlock--01 .imgA, .stBlock--02 .imgA{ float:right; }        /* 右・上 */
	.stBlock--01 .imgB, .stBlock--02 .imgB{ float:left; margin-top:16%; } /* 左・下（縦ズレ） */
	.stBlock--01 .stBlock__num, .stBlock--02 .stBlock__num{ clear:both; padding-top:24px; }
}