@charset "utf-8";
/* ============================================================
   私たちのものづくり  /common/css/craftsmanship.css
   ・slug「craftsmanship」の固定ページで header.php が自動読み込み
   ・PCデザイン(1400px)基準。SPはレスポンシブ調整。
   ・メインビジュアルは固定（fixed）→スクロールで白へフェード。
   ============================================================ */

/* --- 標準のページ見出し(.mainTitle)は使わずフルブリードMVにする --- */
#craftsmanship main > .mainTitle{ display:none; }
/* main の contain:paint を解除（これが無いと position:fixed が効かず画像が固定されない） */
#craftsmanship main{ overflow:visible; contain:none; }
/* 固定MVの上にフッター/CTAを重ねる（潜り込み防止） */
#craftsmanship footer{ position:relative; z-index:2; }

/* --- ヘッダー：MVの上は白／MVを抜けたらテーマ既定(濃色)に戻す --- */
#craftsmanship.mvOver header{ background:transparent; border-bottom-color:rgba(255,255,255,.25); }
#craftsmanship.mvOver header a{ color:#fff; }
#craftsmanship.mvOver header #logo img{ filter:brightness(0) invert(1); }
#craftsmanship.mvOver header #gnaviList .hasSub > a::after{ border-color:#fff; }
#craftsmanship.mvOver header .menu span{ background:#fff; }

/* ============================================================
   MV（ヒーロー）＝画像を固定し、下端は白へフェード
   ============================================================ */
.cmMv{ position:relative; z-index:1; width:100%; height:118vh; min-height:560px; display:flex; align-items:flex-start; color:#fff; }
.cmMv__bg{ position:fixed; top:0; left:0; width:100%; height:100vh; z-index:0; }
.cmMv__bg img{ width:100%; height:100%; object-fit:cover; display:block; }
.cmMv__bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(15,12,8,.30) 0%, rgba(15,12,8,.10) 42%, rgba(15,12,8,.20) 100%); }
.cmMv__inner{ position:relative; z-index:2; width:88.3%; max-width:1240px; margin:0 auto; padding:36vh 0 0; }
.cmMv__en{ font-family:"Poppins",sans-serif; font-size:1.4rem; letter-spacing:.18em; margin-bottom:18px; }
.cmMv__ttl{ font-size:4rem; font-weight:500; letter-spacing:.06em; margin-bottom:12vh; line-height:1.2; }
.cmMv__lead h2{ font-size:3.0rem; font-weight:500; letter-spacing:.04em; margin-bottom:28px; line-height:1.5; }
.cmMv__lead p{ font-size:1.5rem; line-height:2.2; letter-spacing:.03em; }

/* ============================================================
   本文ブロック（ものづくり01〜05）＝単一画像の整列レイアウト
   ・白の本文が固定MVの上にスクロールして被さる
   ============================================================ */
.cmBody{ position:relative; z-index:2; background:#fff; padding:200px 0 60px; }
/* 本文先頭：固定MVを白へ“緩やかに”フェードさせるグラデーション（広めの範囲でじんわり） */
.cmBody::before{ content:""; position:absolute; left:0; top:-46vh; width:100%; height:46vh; background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 55%, #fff 100%); z-index:1; pointer-events:none; }
.cmBlock{ position:relative; z-index:2; width:88.3%; max-width:1240px; margin:0 auto; padding:60px 0; }
.cmBlock + .cmBlock{ margin-top:40px; }

.cmBlock__num{ position:absolute; top:6px; writing-mode:vertical-rl; font-family:"Poppins",sans-serif; font-size:1.2rem; letter-spacing:.16em; color:var(--gray); }
.cmBlock__ttl{ font-size:3.0rem; font-weight:500; letter-spacing:.04em; color:var(--base); margin-bottom:20px; line-height:1.5; }
.cmBlock__sub{ font-size:1.8rem; font-weight:500; color:var(--base); margin-bottom:24px; line-height:1.6; }
.cmBlock__body{ font-size:1.5rem; line-height:2.1; letter-spacing:.02em; color:#555; }
.cmBlock__body strong{ font-weight:700; color:var(--base); }
.cmBlock__img figure{ overflow:hidden; box-shadow:0 8px 30px rgba(0,0,0,.10); }
.cmBlock__img img{ width:100%; height:100%; object-fit:cover; display:block; }

@media screen and (min-width:769px){
	.cmBlock{ display:flex; align-items:center; justify-content:space-between; gap:0 5%; }
	/* 番号はテキスト上端（タイトル頭）に合わせる＝テキストを基準に配置 */
	.cmBlock__txt{ position:relative; width:32%; max-width:430px; flex:0 0 auto; }
	.cmBlock__num{ left:-64px; right:auto; }
	.cmBlock--tr{ flex-direction:row-reverse; }
	.cmBlock--tr .cmBlock__num{ left:-64px; right:auto; }
	.cmBlock__img{ width:59%; }
	.cmBlock__img figure{ aspect-ratio:801/480; }
}

/* 締めの一文 */
.cmClose{ position:relative; z-index:2; text-align:center; padding:80px 5% 130px; }
/* テーマ側の left 指定を上書きしてセンター表示 */
#craftsmanship .cmClose__ttl, #craftsmanship .cmClose__sub{ text-align:center; }
.cmClose__ttl{ font-size:3.0rem; font-weight:500; letter-spacing:.04em; color:var(--base); line-height:1.6; margin-bottom:24px; }
.cmClose__sub{ font-size:1.6rem; color:#555; letter-spacing:.03em; }

/* ============================================================
   SP
   ============================================================ */
@media screen and (max-width:768px){
	/* 他ページ(強み)と揃える：タイトルを上部、余白を広げてリードを下部へ */
	/* 他ページ(強み)と揃える：上マージンを広げ、タイトル上部・リードを下部へ */
	.cmMv{ height:120vh; min-height:0; }
	/* モバイルは固定挙動が不安定なため絶対配置に */
	.cmMv__bg{ position:absolute; height:100%; }
	.cmMv__inner{ width:86%; padding:20vh 0 0; }
	.cmMv__en{ font-size:1.2rem; }
	.cmMv__ttl{ font-size:3.0rem; margin-bottom:24vh; }
	.cmMv__lead h2{ font-size:2.2rem; margin-bottom:20px; }
	.cmMv__lead p{ font-size:1.4rem; line-height:2; }
	.cmMv__lead p br{ display:none; }

	.cmBody{ padding:120px 0 40px; }
	.cmBody::before{ top:-22vh; height:22vh; }
	.cmBlock{ width:86%; padding:40px 0; display:flex; flex-direction:column; }
	.cmBlock__num{ position:static; writing-mode:horizontal-tb; display:block; margin-bottom:14px; order:0; }
	.cmBlock__img{ order:1; margin-bottom:24px; }
	.cmBlock__img figure{ aspect-ratio:801/480; }
	.cmBlock__txt{ order:2; }
	.cmBlock__ttl{ font-size:2.4rem; margin-bottom:16px; }
	.cmBlock__sub{ font-size:1.6rem; margin-bottom:18px; }
	.cmBlock__sub br{ display:none; }
	.cmBlock__body{ font-size:1.4rem; line-height:2; }

	.cmClose{ padding:50px 8% 80px; }
	.cmClose__ttl{ font-size:2.4rem; margin-bottom:16px; }
	.cmClose__sub{ font-size:1.4rem; }
}