@charset "UTF-8";
/* ============================================================
   相和電気工業 TOPリニューアル2026 — KVスライス
   親 custom.css の後勝ちで読み込む追加スタイル。
   このテンプレ専用スコープ：すべて #top2026 配下に限定し、
   親レイアウト(#contents.home の既存セクション)に影響を与えない。
   ============================================================ */

/* -------- デザイントークン（CSS変数） -------- */
:root {
	--c-black: #3E3A39;
	--c-white: #FFFFFF;
	--c-dark-blue: #005FAF;
	--c-blue: #0081CD;
	--c-light-blue: #5EB7E8;
	--c-green: #30B493;
	--c-orange: #F48948;
	--c-bg-gray: #F7F8F8;
	--c-line: #CECECE;
	--grad-blue-green: linear-gradient(90deg, #5EB7E8 0%, #005FAF 48.5%, #30B493 100%);
	--grad-blue: linear-gradient(90deg, #5EB7E8 0%, #0078BF 100%);

	--container: 970px;
	--font-noto: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	/* 巨大見出しは A1Gothic 代替：Noto Sans JP の太ウェイト + palt ツメ */
	--font-display: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

/* -------- スコープのベース -------- */
#top2026 {
	font-family: var(--font-noto);
	color: var(--c-black);
	background: var(--c-white);
}
#top2026 * { box-sizing: border-box; }
#top2026 img { max-width: 100%; height: auto; display: block; }

#top2026 .t2-container {
	width: var(--container);
	max-width: 100%;
	margin-inline: auto;
}

/* グラデーション文字（背景クリップ） */
#top2026 .t2-grad-bluegreen {
	background: var(--grad-blue-green);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

/* 共通ボタン -------------------------------------------------- */
#top2026 .t2-btn {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	text-decoration: none;
	transition: opacity .2s ease, transform .2s ease;
}
#top2026 .t2-btn:hover { opacity: .88; transform: translateY(-2px); }
#top2026 .t2-btn img { flex: 0 0 auto; }

/* プライマリ：grad-blue / 470x110 / radius10 / 白Bold26 / 右矢印 */
#top2026 .t2-btn--primary {
	width: 470px;
	max-width: 100%;
	height: 110px;
	padding: 0 32px;
	border-radius: 10px;
	background: var(--grad-blue);
	color: var(--c-white);
	font-weight: 700;
	font-size: 26px;
}
#top2026 .t2-btn--primary .t2-btn__icon { width: 32px; height: 32px; }

/* アウトライン：白bg / border3 #005FAF / 536x60 / radius30 / #005FAF Bold24 / 青矢印 */
#top2026 .t2-btn--outline {
	width: 536px;
	max-width: 100%;
	height: 60px;
	padding: 0 16px;
	gap: 11px;
	justify-content: center;
	border: 3px solid var(--c-dark-blue);
	border-radius: 30px;
	background: var(--c-white);
	color: var(--c-dark-blue);
	font-weight: 700;
	font-size: 24px;
}
#top2026 .t2-btn--outline .t2-btn__icon { width: 32px; height: 32px; }

/* ============================================================
   KV（ヒーロー）
   ============================================================ */
#top2026 .kv {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
	padding-bottom: 85px;
	background: var(--c-white);
}

/* 背景写真ブロック：1920x678・下端を本文に -65px 被せ */
#top2026 .kv__visual {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	overflow: clip;
}
#top2026 .kv__photo-wrap {
	position: relative;
	width: 100%;
	height: 678px;
	margin-bottom: -65px;
	overflow: hidden;
}
#top2026 .kv__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
/* 下端を白へ抜く曲線（全スライド画像の前面・z-index:2）。
   Figma準拠＝写真の下端が中央で下に膨らむ「谷型」。白は左右の角に入る。
   クリーンなSVG（境界アーティファクト無し）。preserveAspectRatio=none で全幅に伸縮。 */
#top2026 .kv__photo-wrap::after {
	content: "";
	position: absolute;
	z-index: 2;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 120px;
	background: url(../img/kv/kv-curve.svg) no-repeat bottom center;
	background-size: 100% 100%;
}
/* スライド画像はカーブ(z2)より下に。コピー(z3)は最前面 */
#top2026 .kv__photo { z-index: 1; }
#top2026 .kv__copy { z-index: 3; }

/* 修正（2026-06-30）：固定ヘッダー（#header, position:fixed）がKV最上部に重なり、
   人物のヘルメット天面・社名ロゴを覆い隠していた。KVをヘッダー高さ分だけ下げ、
   写真がヘッダー直下から始まるようにする。ヘッダー高さは親 custom.css #header に準拠。
   ・〜767px（SP）: 80px ／ 768px〜（PC/タブレット）: 70px
   ※object-position はベース(.kv__photo = center)のままでよい（下げれば天面が出る）。 */
#top2026 .kv { padding-top: 80px; }
@media (min-width: 768px) {
	#top2026 .kv { padding-top: 70px; }
}

/* コピー群：中央970・top242 */
#top2026 .kv__copy {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 242px;
	width: 970px;
	max-width: 100%;
	height: 386px;
}
/* 各行の白95%・blur下地ボックス */
#top2026 .kv__copy-line {
	display: inline-flex;
	align-items: baseline;
	background: rgba(255, 255, 255, .95);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	padding: 0 .15em;
	font-family: var(--font-display);
	font-feature-settings: "palt" 1;
	line-height: 1;
	white-space: nowrap;
}
#top2026 .kv__copy-line--1 { margin-bottom: 8px; }
#top2026 .kv__copy-line--2 { margin-bottom: 7px; }

/* 「50」 165px light-blue・縦やや圧縮・ツメ */
#top2026 .kv__num {
	font-size: 165px;
	font-weight: 900;
	color: var(--c-light-blue);
	letter-spacing: -6.6px;
	transform: scaleY(.9);
	transform-origin: bottom;
	display: inline-block;
	font-feature-settings: "palt" 1;
}
/* 「年以上、」「社会を支える」 138px グラデ */
#top2026 .kv__big {
	font-size: 138px;
	font-weight: 900;
	letter-spacing: -5.52px;
	font-feature-settings: "palt" 1;
}
#top2026 .kv__copy-line--2 .kv__big { letter-spacing: -11.04px; }
/* 「総合電気工事会社。」 50px グラデ Bold */
#top2026 .kv__sub {
	display: inline-block;
	margin-top: 4px;
	font-size: 50px;
	font-weight: 700;
	background: rgba(255, 255, 255, .95);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	padding: 0 .15em;
}

/* リード文 + マスコット + 吹き出し */
#top2026 .kv__lead-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	width: 1202px;
	max-width: 100%;
	padding-left: 116px;
}
#top2026 .kv__lead {
	width: 680px;
	max-width: 100%;
	padding-top: 100px;
	color: var(--c-black);
}
#top2026 .kv__lead-head {
	font-size: 40px;
	font-weight: 600;
	line-height: 55px;
	margin: 0 0 12px;
}
#top2026 .kv__lead-head p { margin: 0; }
#top2026 .kv__lead-text {
	font-size: 18px;
	font-weight: 400;
	line-height: 35px;
	width: 635px;
	max-width: 100%;
	font-feature-settings: "palt" 1;
}
#top2026 .kv__lead-text p { margin: 0 0 .6em; }

#top2026 .kv__mascot-wrap {
	display: flex;
	align-items: flex-start;
	margin-top: 78px; /* マスコット上部がMV下端カーブに食い込まないよう下げる */
	padding-bottom: 15px;
}
#top2026 .kv__mascot {
	width: 235px;
	height: 266px;
	object-fit: contain;
	margin-right: -25px;
}
#top2026 .kv__balloon {
	position: relative;
	width: 196px;
	height: 196px;
	flex: 0 0 auto;
}
#top2026 .kv__balloon-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
#top2026 .kv__balloon-text {
	position: absolute;
	left: 98px;
	transform: translateX(-50%);
	top: 53px;
	margin: 0;
	color: var(--c-white);
	font-size: 24px;
	font-weight: 700;
	text-align: center;
	line-height: 34px;
	white-space: nowrap;
}

/* CTA：アウトライン1 + プライマリ2 */
#top2026 .kv__cta-primary {
	display: flex;
	gap: 30px;
	width: 970px;
	max-width: 100%;
	justify-content: center;
}

/* ============================================================
   既存流用（INFORMATION / MEDIA）は親 custom.css の
   #top_info / #top_media スタイルがそのまま当たる。
   ここでは追加スタイル不要。ラッパは #contents.home を維持する。
   ============================================================ */

/* ============================================================
   新規4セクション プレースホルダ枠（TODO）
   ============================================================ */
#top2026 .t2-todo {
	width: var(--container);
	max-width: 100%;
	margin: 60px auto;
	padding: 60px 24px;
	border: 2px dashed var(--c-line);
	border-radius: 12px;
	text-align: center;
	color: #9b9b9b;
	background: var(--c-bg-gray);
}
#top2026 .t2-todo h2 {
	margin: 0 0 8px;
	font-size: 28px;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--c-dark-blue);
}
#top2026 .t2-todo p { margin: 0; font-size: 14px; }

/* ============================================================
   BY THE NUMBERS（数字で見る相和電気工業）
   18枚カードは共通クラス t2n-card で量産（個別CSSにしない）。
   ============================================================ */
#top2026 .t2n {
	padding: 85px 0;
	background: var(--c-white);
}
#top2026 .t2n-inner {
	width: var(--container);
	max-width: 100%;
	margin-inline: auto;
}

/* タイトル */
#top2026 .t2n-title {
	display: flex;
	align-items: flex-end;
	gap: 20px;
	margin-bottom: 32px;
}
#top2026 .t2n-title__en {
	margin: 0;
	font-size: 100px;
	font-weight: 300; /* Mukta Light相当の近似 */
	line-height: 1;
	letter-spacing: -.01em;
}
#top2026 .t2n-title__ja {
	margin: 0 0 12px;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--c-dark-blue);
}

/* 見出しバー */
#top2026 .t2n-heading {
	width: 100%;
	margin: 40px 0 32px;
	padding: 12px;
	border-radius: 8px;
	text-align: center;
	background: var(--grad-blue-green);
	background-size: cover;
	background-position: center;
}
#top2026 .t2n-heading span {
	color: var(--c-white);
	font-weight: 500;
	font-size: 25px;
	letter-spacing: .04em;
}
#top2026 .t2n-heading--img {
	background-repeat: no-repeat;
}

/* 3列グリッド */
#top2026 .t2n-grid {
	display: grid;
	grid-template-columns: repeat(3, 282px);
	column-gap: 62px;
	row-gap: 62px;
	justify-content: center;
}

/* カード単位（ピル＋下の説明文） */
#top2026 .t2n-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 17px;
	min-height: 395px;
}

/* 白ピル本体 */
#top2026 .t2n-card {
	position: relative;
	width: 282px;
	height: 282px;
	border-radius: 141px;
	background: var(--c-white);
	box-shadow: 0 6px 24px rgba(0, 95, 175, .08);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	overflow: hidden;
}
/* 発光リング（白ピル裏） */
#top2026 .t2n-card--glow .t2n-glow {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	filter: drop-shadow(0 0 22px rgba(94, 183, 232, .65));
}
#top2026 .t2n-card__body {
	position: relative;
	z-index: 1;
	padding: 0 18px;
	width: 100%;
}

/* ラベル（上） */
#top2026 .t2n-label {
	margin: 0 0 4px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--c-dark-blue);
}

/* 数字＋単位の行 */
#top2026 .t2n-figure {
	margin: 0;
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 4px;
}
/* 大数字（グラデtext-clip・ラテン字形） */
#top2026 .t2n-num {
	font-family: "Noto Sans", var(--font-noto);
	font-weight: 500;
	font-size: 116px;
	line-height: .85;
	letter-spacing: -.02em;
	background: var(--grad-blue-green);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}
/* 単位（数字の右・縦に main+sub） */
#top2026 .t2n-unit {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	line-height: 1.05;
	color: var(--c-dark-blue);
}
#top2026 .t2n-unit__main {
	font-size: 40px;
	font-weight: 700;
}
#top2026 .t2n-unit__sub {
	font-size: 18px;
	font-weight: 700;
}
/* 補助テキスト（数字下） */
#top2026 .t2n-sup {
	margin: 6px 0 0;
	font-size: 18px;
	font-weight: 700;
	color: var(--c-dark-blue);
	line-height: 1.3;
}
/* 説明文（カード外・下） */
#top2026 .t2n-desc {
	margin: 0;
	width: 282px;
	max-width: 100%;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--c-black);
	text-align: center;
}

/* オレンジ系（相和電気らしさ） */
#top2026 .t2n-card--orange .t2n-label,
#top2026 .t2n-card--orange .t2n-unit,
#top2026 .t2n-card--orange .t2n-sup {
	color: var(--c-orange);
}
#top2026 .t2n-card--orange .t2n-num {
	background: linear-gradient(90deg, #FFE179 0%, #ED7131 50%, #D94CBB 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

/* Blank装飾セル */
#top2026 .t2n-card--blank {
	background: #DFEAF8;
	box-shadow: none;
}
#top2026 .t2n-blank-text {
	color: var(--c-white);
	font-weight: 700;
	font-size: 30px;
	line-height: 1.15;
	letter-spacing: .02em;
	text-align: center;
}

/* ============================================================
   SERVICES（事業紹介）
   12枚カードは共通クラス t2s-card で量産（個別CSSにしない）。
   ============================================================ */
#top2026 .t2s {
	padding: 85px 0;
	background: var(--c-white);
}
#top2026 .t2s-inner {
	width: var(--container);
	max-width: 100%;
	margin-inline: auto;
}

/* 見出し */
#top2026 .t2s-head {
	display: flex;
	align-items: flex-end;
	gap: 20px;
	margin-bottom: 16px;
}
#top2026 .t2s-head__en {
	margin: 0;
	font-size: 100px;
	font-weight: 300;
	line-height: 1;
	letter-spacing: -.01em;
}
#top2026 .t2s-head__ja {
	margin: 0 0 12px;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--c-dark-blue);
}
#top2026 .t2s-lead {
	margin-bottom: 40px;
	font-size: 18px;
	font-weight: 400;
	line-height: 35px;
	color: var(--c-black);
	font-feature-settings: "palt" 1;
}
#top2026 .t2s-lead p { margin: 0; }

/* カードグリッド（flex-wrap・3列） */
#top2026 .t2s-grid {
	display: flex;
	flex-wrap: wrap;
	column-gap: 22px;
	row-gap: 24px;
}

/* 1行目: バナー + 空dummy */
#top2026 .t2s-banner {
	width: 638px;
	height: 230px;
	max-width: 100%;
	border-radius: 8px;
	overflow: hidden;
}
#top2026 .t2s-banner img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
#top2026 .t2s-dummy {
	width: 308px;
	height: 230px;
	background: transparent;
}

/* サービスカード（額縁グラデ） */
#top2026 .t2s-card {
	position: relative;
	width: 308px;
	max-width: 100%;
	padding: 8px;
	border-radius: 8px;
	background: linear-gradient(145deg, #5EB7E8 10%, #005FAF 52%, #30B493 97%);
}
/* カードをリンク化した際のデフォルト装飾打ち消し（a.t2p-card と同方針） */
#top2026 a.t2s-card { text-decoration: none; color: inherit; }
/* 内側カード本体（292×356・上37%写真／下63%白） */
#top2026 .t2s-card__body {
	width: 100%;
	height: 356px;
	background: var(--c-white);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
#top2026 .t2s-card__img {
	flex: 0 0 37%;
	height: 37%;
	overflow: hidden;
}
#top2026 .t2s-card__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
#top2026 .t2s-card__txt {
	flex: 1 1 auto;
	padding: 14px;
}
#top2026 .t2s-card__title {
	margin: 0 0 8px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	color: var(--c-black);
}
#top2026 .t2s-card__lead {
	margin: 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 21px;
	color: var(--c-black);
	font-feature-settings: "palt" 1;
}
/* アイキャッチ徽章（左上） */
#top2026 .t2s-card__badge {
	position: absolute;
	top: 0;
	left: 0;
	width: 47px;
	height: 47px;
	z-index: 2;
}

/* ============================================================
   PROJECTS（施工実績）
   6枚カードは共通クラス t2p-card で量産（個別CSSにしない）。
   ボタンはKVの t2-btn--primary を流用（このセクションでは新規定義しない）。
   ============================================================ */
#top2026 .t2p {
	padding: 85px 0;
	background: var(--c-white);
}
#top2026 .t2p-inner {
	width: var(--container);
	max-width: 100%;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: 50px;
}

/* 見出し */
#top2026 .t2p-head {
	display: flex;
	align-items: flex-end;
	gap: 20px;
	margin-bottom: -34px; /* gap50からリードまでの間隔調整 */
}
#top2026 .t2p-head__en {
	margin: 0;
	font-size: 100px;
	font-weight: 300;
	line-height: 1;
	letter-spacing: -.01em;
}
#top2026 .t2p-head__ja {
	margin: 0 0 12px;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--c-dark-blue);
}
#top2026 .t2p-lead {
	font-size: 18px;
	font-weight: 400;
	line-height: 35px;
	color: var(--c-black);
	font-feature-settings: "palt" 1;
}
#top2026 .t2p-lead p { margin: 0; }

/* カードグリッド（2列） */
#top2026 .t2p-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 46px;
}
#top2026 .t2p-card {
	width: 462px;
	max-width: 100%;
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: center;
}
#top2026 .t2p-card__img {
	width: 100%;
	aspect-ratio: 462 / 245;
	border-radius: 10px;
	overflow: hidden;
}
#top2026 .t2p-card__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
#top2026 .t2p-card__label {
	margin: 0;
	font-size: 22px;
	font-weight: 700;
	color: var(--c-black);
	text-align: center;
}

/* CTA（中央寄せ・KVプライマリボタン流用） */
#top2026 .t2p-cta {
	display: flex;
	justify-content: center;
}

/* ============================================================
   レスポンシブ（簡易・PCを正・SPは破綻回避レベル）
   SP厳密対応はFigma SP支給後。
   ============================================================ */
@media (max-width: 1024px) {
	#top2026 .kv__copy { top: 16%; width: 92%; }
	#top2026 .kv__num { font-size: 16vw; }
	#top2026 .kv__big { font-size: 13vw; letter-spacing: -.4vw; }
	#top2026 .kv__copy-line--2 .kv__big { letter-spacing: -.9vw; }
	#top2026 .kv__sub { font-size: 5vw; }
	#top2026 .kv__lead-row {
		flex-direction: column;
		align-items: center;
		width: 92%;
		padding-left: 0;
		gap: 24px;
	}
	#top2026 .kv__lead { width: 100%; padding-top: 40px; }
	#top2026 .kv__lead-head { font-size: 28px; line-height: 1.5; }
	#top2026 .kv__lead-text { width: 100%; }
	#top2026 .kv__photo-wrap { height: 52vw; margin-bottom: -4vw; }

	/* NUMBERS: 970→流動・3列維持で縮小 */
	#top2026 .t2n-inner { width: 92%; }
	#top2026 .t2n-title__en { font-size: 9vw; }
	#top2026 .t2n-grid {
		grid-template-columns: repeat(3, 1fr);
		column-gap: 4vw;
		row-gap: 5vw;
	}
	#top2026 .t2n-card { width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: 50%; }
	#top2026 .t2n-num { font-size: 11vw; }
	#top2026 .t2n-unit__main { font-size: 4.2vw; }
	#top2026 .t2n-desc { width: 100%; }

	/* SERVICES: 970→流動。バナーは全幅、dummy隠す、カードは2列 */
	#top2026 .t2s-inner { width: 92%; }
	#top2026 .t2s-head__en { font-size: 9vw; }
	#top2026 .t2s-banner { width: 100%; height: auto; aspect-ratio: 638 / 230; }
	#top2026 .t2s-dummy { display: none; }
	#top2026 .t2s-card {
		width: calc((100% - 22px) / 2); /* 2列 */
	}

	/* PROJECTS: 970→流動。2列維持で縮小 */
	#top2026 .t2p-inner { width: 92%; }
	#top2026 .t2p-head__en { font-size: 9vw; }
	#top2026 .t2p-grid { gap: 4vw; }
	#top2026 .t2p-card { width: calc((100% - 4vw) / 2); }
}

@media (max-width: 640px) {
	#top2026 .kv { gap: 6.15vw; padding-bottom: 12.31vw; }
	#top2026 .kv__cta-primary { flex-direction: column; align-items: center; }
	#top2026 .kv__btn-wrap { width: 100%; }
	#top2026 .t2-btn--primary,
	#top2026 .t2-btn--outline { width: 100%; max-width: 120.51vw; }
	#top2026 .kv__lead-head { font-size: 5.64vw; }
	#top2026 .kv__lead-text { font-size: 3.85vw; line-height: 1.9; }
	#top2026 .kv__mascot { width: 41.03vw; height: auto; }
	#top2026 .kv__balloon { width: 33.33vw; height: 33.33vw; }
	#top2026 .kv__balloon-text { left: 50%; top: 9.23vw; font-size: 4.1vw; line-height: 5.64vw; }

	/* NUMBERS: SPもPC同様の正円（2列）。形・列は下記、文字サイズは修正#17で指定（後勝ち） */
	#top2026 .t2n { padding: 12.31vw 0; }
	#top2026 .t2n-title { flex-direction: column; align-items: flex-start; gap: 1.03vw; }
	#top2026 .t2n-title__en { font-size: 13vw; }
	#top2026 .t2n-title__ja { font-size: 4.1vw; }
	#top2026 .t2n-heading span { font-size: 4.62vw; }
	#top2026 .t2n-grid {
		grid-template-columns: repeat(2, 1fr);
		column-gap: 4vw;
		row-gap: 6.15vw;
	}
	#top2026 .t2n-item { min-height: 0; gap: 2.56vw; }
	#top2026 .t2n-card { width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: 50%; padding: 0; }
	/* Blank装飾はSPでは冗長なので隠す */
	#top2026 .t2n-card--blank { display: none; }

	/* SERVICES: SPは1列 */
	#top2026 .t2s { padding: 12.31vw 0; }
	#top2026 .t2s-head { flex-direction: column; align-items: flex-start; gap: 1.03vw; }
	#top2026 .t2s-head__en { font-size: 13vw; }
	#top2026 .t2s-head__ja { font-size: 4.1vw; }
	#top2026 .t2s-lead { font-size: 3.85vw; line-height: 1.9; }
	#top2026 .t2s-card { width: 100%; max-width: 92.31vw; margin-inline: auto; }

	/* PROJECTS: SPは1列 */
	#top2026 .t2p { padding: 12.31vw 0; }
	#top2026 .t2p-inner { gap: 7.18vw; }
	#top2026 .t2p-head { flex-direction: column; align-items: flex-start; gap: 1.03vw; margin-bottom: 0; }
	#top2026 .t2p-head__en { font-size: 13vw; }
	#top2026 .t2p-head__ja { font-size: 4.1vw; }
	#top2026 .t2p-lead { font-size: 3.85vw; line-height: 1.9; }
	#top2026 .t2p-grid { gap: 6.15vw; }
	#top2026 .t2p-card { width: 100%; }
	#top2026 .t2p-card__label { font-size: 4.62vw; }
}

/* ============================================================
   SUSTAINABLE ENERGY（再生可能エネルギー）
   ============================================================ */
#top2026 .t2e {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 50px;
	padding: 85px 0;
	background: var(--c-white);
}
#top2026 .t2e-head__en {
	margin: 0;
	font-size: 100px;
	font-weight: 300;
	line-height: .8;
	text-align: center;
	font-family: var(--font-noto);
}

/* 全幅背景帯（bg.png 自体に下端カーブ内包・楕円マスク不要） */
#top2026 .t2e-visual {
	position: relative;
	width: 100%;
	display: flex;
	justify-content: center;
}
#top2026 .t2e-bg {
	width: 100%;
	height: 678px;
	object-fit: cover;
	object-position: center;
}
/* 実績数字ブロック：中央970・top234・白下地＋グラデ */
#top2026 .t2e-stats {
	position: absolute;
	left: 50%;
	top: 234px;
	transform: translateX(-50%);
	width: 970px;
	max-width: 92%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}
#top2026 .t2e-box {
	display: inline-flex;
	align-items: baseline;
	background: rgba(255, 255, 255, .92);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	padding: 6px 16px;
	font-family: var(--font-display);
	font-feature-settings: "palt" 1;
	line-height: 1;
	white-space: nowrap;
}
#top2026 .t2e-box--cap { padding: 8px 16px; }
#top2026 .t2e-cap { font-size: 50px; font-weight: 700; }
#top2026 .t2e-sm  { font-size: 107px; font-weight: 900; letter-spacing: -4.28px; }
#top2026 .t2e-num { font-size: 130px; font-weight: 900; letter-spacing: -5.2px; }

/* 背景下：左テキスト＋右画像 */
#top2026 .t2e-body {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
}
#top2026 .t2e-body__text { width: 621px; max-width: 100%; }
#top2026 .t2e-body__title {
	margin: 0 0 12px;
	font-size: 40px;
	font-weight: 600;
	line-height: 55px;
	color: var(--c-black);
}
#top2026 .t2e-body__lead {
	margin: 0;
	font-size: 18px;
	line-height: 35px;
	color: var(--c-black);
	font-feature-settings: "palt" 1;
}
#top2026 .t2e-body__img { flex: 0 0 auto; width: 298px; }
#top2026 .t2e-body__img img { width: 298px; height: 191px; object-fit: cover; }

/* CTA（中央・緑グラデボタン2つ） */
#top2026 .t2e-cta { display: flex; gap: 30px; justify-content: center; flex-wrap: wrap; }
/* 緑グラデのボタンモディファイア（t2-btn--primary の後勝ちで背景を上書き） */
#top2026 .t2-btn--green { background: linear-gradient(90deg, #006DAD 0%, #34C6A2 100%); }

@media (max-width: 640px) {
	#top2026 .t2e { gap: 7.18vw; padding: 12.31vw 0; }
	#top2026 .t2e-head__en { font-size: 13vw; }
	#top2026 .t2e-bg { height: 64vw; min-height: 76.92vw; }
	#top2026 .t2e-stats { top: 12%; gap: 2.05vw; }
	#top2026 .t2e-cap { font-size: 5.2vw; }
	#top2026 .t2e-sm  { font-size: 9.5vw; letter-spacing: -0.51vw; }
	#top2026 .t2e-num { font-size: 12vw; letter-spacing: -0.51vw; }
	/* Figma SP（frame 1:514/1:518）：画像が上・テキストが下。column-reverseでDOM順を反転 */
	#top2026 .t2e-body { flex-direction: column-reverse; align-items: center; text-align: center; gap: 5.13vw; }
	#top2026 .t2e-body__text { width: 100%; }
	#top2026 .t2e-body__title { font-size: 6.15vw; line-height: 1.4; }
	#top2026 .t2e-body__lead { font-size: 3.85vw; line-height: 1.9; }
	/* 画像はFigma 298px ÷ 3.9 ≒ 76.41vw（縮小後に390px=Figma同寸）・中央 */
	#top2026 .t2e-body__img { width: 76.41vw; max-width: 100%; }
	#top2026 .t2e-body__img img { width: 100%; height: auto; }
	#top2026 .t2e-cta { flex-direction: column; align-items: center; }
}

/* ============================================================
   修正 #01（2026-06-26 KATSUYAフィードバック）
   見出し堅牢化 / OUR STRENGTHS新設 / INFO・MEDIA再スタイル
   / NUMBERS 4桁収め / KV微修正
   ============================================================ */

/* ---------- 見出し堅牢化（親 .home h2 等に負けないよう明示） ---------- */
#top2026 .t2p-head__en, #top2026 .t2s-head__en, #top2026 .t2n-title__en,
#top2026 .t2e-head__en, #top2026 .t2o-head__en,
#top2026 #top_info .t2i-head__en, #top2026 #top_media .t2m-head__en {
	font-size: 100px; font-weight: 300; line-height: .8; margin: 0;
}
#top2026 .t2p-head__ja, #top2026 .t2s-head__ja, #top2026 .t2n-title__ja,
#top2026 .t2o-head__ja,
#top2026 #top_info .t2i-head__ja, #top2026 #top_media .t2m-head__ja {
	font-size: 22px; font-weight: 700; color: var(--c-dark-blue); margin: 0; line-height: 1.3;
}

/* ---------- BY THE NUMBERS：4桁(1,000)をカード内へ収める ---------- */
#top2026 .t2n-num[data-comma="1"] { font-size: 96px; letter-spacing: -.045em; }

/* ---------- OUR STRENGTHS（当社の強み） ---------- */
#top2026 .t2o { background: var(--c-bg-gray); padding: 85px 0; display: flex; flex-direction: column; align-items: center; gap: 85px; }
#top2026 .t2o-inner { width: var(--container); max-width: 100%; margin-inline: auto; display: flex; flex-direction: column; gap: 26px; }
#top2026 .t2o-head { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }
#top2026 .t2o-intro { display: flex; gap: 28px; align-items: flex-start; }
#top2026 .t2o-intro__text { flex: 1 1 auto; }
#top2026 .t2o-intro__title { margin: 0 0 12px; font-size: 30px; font-weight: 500; line-height: 44px; color: var(--c-black); }
#top2026 .t2o-intro__lead { margin: 0; font-size: 18px; line-height: 35px; color: var(--c-black); font-feature-settings: "palt" 1; }
#top2026 .t2o-intro__img { flex: 0 0 auto; width: 462px; }
#top2026 .t2o-intro__img img { width: 462px; height: 254px; object-fit: cover; border-radius: 10px; }
#top2026 .t2o-reasons { width: var(--container); max-width: 100%; margin-inline: auto; display: flex; flex-direction: column; gap: 24px; }
#top2026 .t2o-bar { background: var(--grad-blue-green); border-radius: 8px; padding: 12px; text-align: center; }
#top2026 .t2o-bar span { color: #fff; font-size: 25px; font-weight: 500; line-height: 30px; }
#top2026 .t2o-rows { display: flex; flex-direction: column; gap: 24px; }
#top2026 .t2o-rows img { width: 100%; height: auto; border-radius: 10px; }

/* ---------- INFORMATION（#top_info 再スタイル：親の緑背景→白・新タイトル） ---------- */
#top2026 #top_info { background-color: #fff; padding: 85px 0; }
#top2026 #top_info .container { max-width: var(--container) !important; }
#top2026 #top_info .t2i-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 24px; margin-bottom: 24px; }
#top2026 #top_info .t2i-head .more { margin-left: auto; font-size: 15px; color: var(--c-dark-blue); align-self: center; }
#top2026 #top_info .inner { background: #fff; margin-top: 0; }

/* ---------- MEDIA COVERAGE（#top_media 再スタイル：新タイトル） ---------- */
#top2026 #top_media { background: #fff; padding: 85px 0; }
#top2026 #top_media .container { max-width: var(--container) !important; }
#top2026 #top_media .t2m-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 24px; margin-bottom: 24px; }

/* ---------- KV 微修正 ---------- */
/* 項目1: 白下地ボックスの横余白を詰める */
#top2026 .kv__copy-line { padding: 0 .1em; }
/* 項目2: 「総合電気工事会社。」白下地は外側span・グラデは内側span（透明化バグ解消） */
#top2026 .kv__sub { background: rgba(255,255,255,.95); }
#top2026 .kv__sub .t2-grad-bluegreen { display: inline; }
/* 項目3: マスコットを背景写真の前面に（上部が隠れない） */
#top2026 .kv__lead-row { position: relative; z-index: 3; }
#top2026 .kv__mascot-wrap { position: relative; z-index: 3; }
/* 項目4,5,6: 吹き出しを上げる・メールアイコン追加・クリック可能 */
#top2026 a.kv__balloon { display: block; text-decoration: none; cursor: pointer; top: 0; align-self: flex-start; }
#top2026 a.kv__balloon:hover { opacity: .9; }
#top2026 .kv__balloon-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
#top2026 .kv__balloon-text { position: absolute; left: 50%; top: 44px; transform: translateX(-50%); color: #fff; font-size: 24px; line-height: 34px; text-align: center; font-weight: 500; white-space: nowrap; }
#top2026 .kv__balloon-mail { position: absolute; left: 50%; top: 122px; transform: translateX(-50%); width: 34px; height: 26px; }

/* ============================================================
   修正 #02（2026-06-26）：CONTACT/HOWTO/COMPANY を Figmaに寄せる（B）
   CONTACT/HOWTO=青ティールのグラデ背景・白文字 / COMPANY=白背景・グラデ文字
   ============================================================ */
/* 背景（親 #6bbc8e 緑を上書き。#top2026 #id で 2id=親1idに勝つ） */
#top2026 #top_contact,
#top2026 #howto {
	background: linear-gradient(96deg, #0081CD 0%, #1F9FB0 52%, #34C18C 100%);
}
#top2026 #top_campany { background: #ffffff; }

/* 3節共通の新テキストタイトル */
#top2026 #top_contact .t2x-head,
#top2026 #howto .t2x-head,
#top2026 #top_campany .t2x-head {
	display: flex; flex-wrap: wrap; align-items: baseline; gap: 24px; margin-bottom: 24px;
}
#top2026 #top_contact .t2x-head__en,
#top2026 #howto .t2x-head__en,
#top2026 #top_campany .t2x-head__en {
	font-size: 100px; font-weight: 300; line-height: .8;
}
#top2026 #top_contact .t2x-head__ja,
#top2026 #howto .t2x-head__ja,
#top2026 #top_campany .t2x-head__ja {
	font-size: 22px; font-weight: 700; line-height: 1.3;
}
/* CONTACT/HOWTO は白文字（グラデ背景上） */
#top2026 #top_contact .t2x-head__en, #top2026 #top_contact .t2x-head__ja,
#top2026 #howto .t2x-head__en, #top2026 #howto .t2x-head__ja { color: #fff; }
/* COMPANY は和文ダーク（英字はグラデ utility） */
#top2026 #top_campany .t2x-head__ja { color: var(--c-dark-blue); }

/* ============================================================
   修正 #03（2026-06-27 フィードバック2巡目）
   ============================================================ */

/* 1. KV吹き出し：MVに半分ほど重なるよう上げる（マスコットは据え置き） */
#top2026 .kv__balloon { margin-top: -130px; }

/* 2. 見出し（英字）が大きすぎ＋下が切れる → 縮小＋行高で切れ防止 */
#top2026 .t2p-head__en, #top2026 .t2s-head__en, #top2026 .t2n-title__en,
#top2026 .t2e-head__en, #top2026 .t2o-head__en,
#top2026 .t2i-head__en, #top2026 .t2m-head__en {
	font-size: 88px; line-height: 1.1;
}
#top2026 #top_contact .t2x-head__en, #top2026 #howto .t2x-head__en,
#top2026 #top_campany .t2x-head__en {
	font-size: 88px; line-height: 1.1;
}

/* 3. INFORMATION：グラデ背景＋白文字タイトル（Figma準拠） */
#top2026 #top_info {
	background: linear-gradient(96deg, #0081CD 0%, #1F9FB0 52%, #34C18C 100%);
}
#top2026 #top_info .t2i-head__en,
#top2026 #top_info .t2i-head__ja,
#top2026 #top_info .t2i-head .more { color: #fff; }
#top2026 #top_info .inner { background: #fff; } /* お知らせリストは白ボックスのまま */

/* 5. MEDIA：背景グレー #F7F8F8（Figma準拠） */
#top2026 #top_media { background: #F7F8F8; }

/* 6. CONTACT / HOW TO：グラデ背景の上下余白を確保（2節で連続グラデ） */
#top2026 #top_contact { padding: 85px 0 50px; }
#top2026 #howto { padding: 50px 0 85px; }

/* 7. COMPANY：上下余白 */
#top2026 #top_campany { padding: 85px 0; }

/* 8. COMPANY：リストの「・」を除去 */
#top2026 #top_campany ul,
#top2026 #top_campany #company-link,
#top2026 #top_campany li { list-style: none; }
#top2026 #top_campany #company-link { padding-left: 0; }
#top2026 #top_campany li::before { content: none; display: none; }

/* 9. 専用サイトのご紹介：枠線ボックス＋左テキスト＋右カード（Figma準拠） */
#top2026 .t2-sites {
	box-sizing: border-box;
	max-width: 970px;
	margin: 40px auto 0;
	border: 2px solid #0081CD;
	border-radius: 8px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 60px;
	padding: 24px 60px;
}
#top2026 .t2-sites__intro { flex: 1 1 280px; min-width: 240px; }
#top2026 .t2-sites__title { margin: 0 0 8px; font-size: 26px; font-weight: 700; line-height: 1.5; }
#top2026 .t2-sites__lead { margin: 0; font-size: 18px; line-height: 35px; color: var(--c-black); font-feature-settings: "palt" 1; }
#top2026 .t2-sites__cards { display: flex; gap: 24px; flex: 0 0 auto; }
#top2026 .t2-sites__card { width: 240px; max-width: 100%; display: flex; flex-direction: column; gap: 8px; text-decoration: none; }
#top2026 .t2-sites__card img { width: 100%; height: auto; display: block; border-radius: 4px; }
#top2026 .t2-sites__card span { font-size: 16px; font-weight: 500; color: var(--c-black); text-align: center; }

/* ============================================================
   修正 #04（2026-06-27 フィードバック3巡目）
   ============================================================ */

/* 1. INFORMATION：過去の情報一覧をリスト下・右寄せ・白 */
#top2026 #top_info .t2i-more { text-align: right; margin-top: 14px; }
#top2026 #top_info .t2i-more .more { color: #fff; font-weight: 700; font-size: 18px; text-decoration: none; }

/* 2. MEDIA：英字を小さく・「メディア紹介」を改行させない */
#top2026 #top_media .t2m-head__en { font-size: 64px; }
#top2026 #top_media .t2m-head__ja { white-space: nowrap; }

/* 3. CONTACT：日本語サブを改行（自分の行に） */
#top2026 #top_contact .t2x-head__ja { flex-basis: 100%; }

/* 4. HOW TO：英語と日本語を横並び（改行させない） */
#top2026 #howto .t2x-head { flex-wrap: nowrap; align-items: center; }

/* 5. COMPANY：普及活動テキストとRE100/SDGsロゴを横並び */
#top2026 #top_campany #company { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
#top2026 #top_campany #company > p { margin: 0; flex: 0 0 auto; }
#top2026 #top_campany #btn-goal { flex: 1 1 auto; }
#top2026 #top_campany #company-link { width: 100%; margin-top: 24px; }

/* 6. COMPANY：会社案内・採用情報・施工実績カードを角丸に */
#top2026 #top_campany #company-link li a { border-radius: 8px; overflow: hidden; }

/* 7. 理念「様々な社会問題…」見出し（Figma: Medium 40px / lh55）＋本文18px */
#top2026 #top_bottom .inner > p { font-size: 18px; line-height: 35px; }
#top2026 #top_bottom .inner strong {
	display: inline-block; font-size: 40px; font-weight: 500; line-height: 55px; margin-bottom: 8px;
}

/* 8. 理念下のFB/RE100/SDGsロゴの高さを揃える */
#top2026 #top_bottom .link-list1 { align-items: center; }
#top2026 #top_bottom .link-list1 img { height: 44px; width: auto; }

/* 9. 関連リンク（link-list1 / link-list2）の「・」（既定リストマーカー）を除去 */
#top2026 #top_bottom .link-list1,
#top2026 #top_bottom .link-list2 ul,
#top2026 #top_bottom .link-list2 li,
#top2026 #top_bottom .link-list1 li { list-style: none; padding-left: 0; }
#top2026 #top_bottom .link-list2 li::before,
#top2026 #top_bottom .link-list2 li::marker { content: none; }

/* ============================================================
   修正 #05（2026-06-27 フィードバック4巡目）
   ============================================================ */
/* 1. COMPANYカード：li(背景#4D4D4D)も角丸にして黒い角を消す */
#top2026 #top_campany #company-link li { border-radius: 8px; overflow: hidden; }

/* 2. 理念下 FB/RE100/SDGs：flex行にして縦中央揃え（FBの浮き上がり解消） */
#top2026 #top_bottom .link-list1 { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }

/* 3. HOW TO：英語「HOW TO」は改行しない（日本語はHTMLの<br>で改行） */
#top2026 #howto .t2x-head__en { white-space: nowrap; }

/* ============================================================
   修正 #06（2026-06-27 BY THE NUMBERS 各カードの配置・サイズをFigmaに）
   ============================================================ */
/* 数字＋単位は下端揃え（items-end）：単位を数字の下端基準に */
#top2026 .t2n-figure { align-items: flex-end; }
/* 単位の縦積み（名/在籍 等）：main大・sub小、数字下端に寄せる */
#top2026 .t2n-unit { line-height: 1.05; padding-bottom: .08em; }
#top2026 .t2n-unit__main { font-size: 44px; }
#top2026 .t2n-unit__sub { font-size: 28px; }
/* 数字下の行：以上/突破/以上施工 等は大（32px）、注記（）は小（22px） */
#top2026 .t2n-sup { font-size: 32px; margin-top: 6px; }
#top2026 .t2n-sup--note { font-size: 22px; }

/* ============================================================
   修正 #07（2026-06-27 リンク化に伴う調整）
   ============================================================ */
/* PROJECTSカードを<a>化：下線・色を打ち消し、画像ホバーで少し持ち上げ */
#top2026 a.t2p-card { text-decoration: none; color: inherit; display: flex; }
#top2026 a.t2p-card:hover { opacity: .92; }
/* SERVICESバナーlinkの下線除去 */
#top2026 .t2s-banner a { display: block; text-decoration: none; }

/* ============================================================
   修正 #08（2026-06-27 Hover：Figma準拠＝ピンクに変化）
   ピンク色は下記変数で一括調整可能。
   ============================================================ */
:root {
	--c-pink: #EC4899;
	--grad-pink: linear-gradient(145deg, #EC4899 8%, #005FAF 52%, #30B493 97%);
}

/* プライマリ／緑ボタン → ホバーでベタ塗りピンク（浮き＋影） */
#top2026 .t2-btn--primary:hover,
#top2026 .t2-btn--green:hover {
	background: var(--c-pink);
	opacity: 1;
	box-shadow: 0 8px 20px rgba(236, 72, 153, .3);
}

/* アウトラインボタン → ホバーで枠線・文字ピンク */
#top2026 .t2-btn--outline:hover {
	border-color: var(--c-pink);
	color: var(--c-pink);
	background: #fff;
	opacity: 1;
}
/* 青矢印を近似的にピンク寄りへ（厳密化には専用ピンク矢印SVGが必要） */
#top2026 .t2-btn--outline:hover .t2-btn__icon { filter: hue-rotate(135deg) saturate(2.2) brightness(1.05); }

/* SERVICESカード → ホバーで額縁グラデがピンク始まりに */
#top2026 .t2s-card { transition: background-image .25s ease; }
#top2026 .t2s-card:hover { background-image: var(--grad-pink); }

/* PROJECTSカード → ホバーで画像にグラデ枠＋ラベルがグラデのピル */
#top2026 a.t2p-card .t2p-card__img { transition: border-color .2s ease; }
#top2026 a.t2p-card:hover .t2p-card__img {
	border: 3px solid transparent;
	background-image: linear-gradient(#fff, #fff), var(--grad-blue-green);
	background-origin: border-box;
	background-clip: padding-box, border-box;
}
#top2026 a.t2p-card .t2p-card__label { transition: all .2s ease; }
#top2026 a.t2p-card:hover .t2p-card__label {
	background: var(--grad-blue-green);
	color: #fff;
	padding: 4px 24px;
	border-radius: 18px;
}

/* COMPANYカード（会社案内/採用/施工実績）→ ホバーで少し明るく */
#top2026 #top_campany #company-link li a { transition: opacity .2s ease; }
#top2026 #top_campany #company-link li a:hover { opacity: .85; }

/* お問い合わせ吹き出し → ホバーでわずかに拡大 */
#top2026 .kv__balloon { transition: transform .2s ease, opacity .2s ease; }
#top2026 a.kv__balloon:hover { transform: scale(1.05); opacity: 1; }

/* ============================================================
   修正 #09（2026-06-27 Hover微調整 + KV白枠）
   ============================================================ */
/* SERVICESカード左上の徽章：マスクで色制御（既定シアン→hoverピンク） */
#top2026 .t2s-card__badge {
	background-color: #5EB7E8;
	-webkit-mask: url(../img/services/eyecatch.svg) top left / 47px 47px no-repeat;
	mask: url(../img/services/eyecatch.svg) top left / 47px 47px no-repeat;
	transition: background-color .25s ease;
}
#top2026 .t2s-card:hover .t2s-card__badge { background-color: var(--c-pink); }

/* アウトラインボタンの矢印：マスクで色制御（既定青→hoverピンク・旧フィルター無効化） */
#top2026 .t2-btn__icon--mask-blue {
	display: inline-block;
	width: 32px; height: 32px;
	background-color: var(--c-dark-blue);
	-webkit-mask: url(../img/kv/arrow-blue.svg) center / contain no-repeat;
	mask: url(../img/kv/arrow-blue.svg) center / contain no-repeat;
	transition: background-color .2s ease;
}
#top2026 .t2-btn--outline:hover .t2-btn__icon--mask-blue { background-color: var(--c-pink); filter: none; }

/* KV「50年以上、」白下地ボックス：上の余白だけ詰める（下・左右は維持） */
/* 行高は戻して下のはみ出しを解消。内側テキストに負のmargin-topで「上方向だけ」詰める。 */
#top2026 .kv__num,
#top2026 .kv__big { line-height: 1; }
#top2026 .kv__copy-line { overflow: hidden; }
/* 1行目（50年以上、）：scaleYで下寄りの「50」がある分、上余白が大きいので大きめに詰める。
   num/big 同量にしてベースライン揃えを保つ。 */
#top2026 .kv__copy-line--1 .kv__num,
#top2026 .kv__copy-line--1 .kv__big { margin-top: -0.22em; }
/* 2行目（社会を支える）：漢字のみ・scaleY無しで上余白が少ないため最小限に（切れ防止）。 */
#top2026 .kv__copy-line--2 .kv__big { margin-top: -0.06em; }

/* ============================================================
   修正 #10（2026-06-27 MV：3枚クロスフェードのスライドショー）
   約4秒ごとに切替（12s周期）。delayを-1/3/7で1枚目をロード時から表示。
   ============================================================ */
#top2026 .kv__photo { opacity: 0; animation: kv-crossfade 12s infinite; will-change: opacity; }
#top2026 .kv__photo--1 { animation-delay: -1s; }
#top2026 .kv__photo--2 { animation-delay: 3s; }
#top2026 .kv__photo--3 { animation-delay: 7s; }
@keyframes kv-crossfade {
	0%     { opacity: 0; }
	8.33%  { opacity: 1; }   /* フェードイン（約1s） */
	33.33% { opacity: 1; }   /* 表示（約3s） */
	41.66% { opacity: 0; }   /* フェードアウト（約1s・次の画像と重なってクロス） */
	100%   { opacity: 0; }
}
/* アクセシビリティ：動きを減らす設定では静止（1枚目固定） */
@media (prefers-reduced-motion: reduce) {
	#top2026 .kv__photo { animation: none; opacity: 0; }
	#top2026 .kv__photo--1 { opacity: 1; }
}

/* ============================================================
   修正 #11（2026-06-27 レスポンシブSP最適化 / device-width化）
   親が固定600/1020のため top-2026.js で viewport=device-width 強制。
   SP Figma（1:430/541/553/592）準拠で各セクションを再調整。
   ============================================================ */

/* ---- 全体：横スクロール安全網 ---- */
@media (max-width: 640px) {
	html, body { overflow-x: hidden; }
	#top2026 { overflow-x: clip; }
}

/* ---- KV（SP）：写真を高く・コピーを下部・ヘッダー裏に隠れない ---- */
@media (max-width: 640px) {
	#top2026 .kv { gap: 4.62vw; padding-bottom: 10.26vw; }
	#top2026 .kv__photo-wrap { height: 108vw; max-height: 117.95vw; margin-bottom: 0; }
	/* コピーは写真の下寄せ（Figma：下半分）。ヘッダー裏に隠れない */
	#top2026 .kv__copy {
		top: auto;
		bottom: 15%;
		left: 50%;
		width: 92%;
		height: auto;
	}
	#top2026 .kv__num { font-size: 17vw; }
	#top2026 .kv__big { font-size: 13.5vw; letter-spacing: -0.4vw; }
	#top2026 .kv__copy-line--2 .kv__big { letter-spacing: -1vw; }
	#top2026 .kv__sub { font-size: 5.4vw; margin-top: 1.28vw; }
	#top2026 .kv__copy-line--1 .kv__num,
	#top2026 .kv__copy-line--1 .kv__big { margin-top: -0.18em; }
	#top2026 .kv__copy-line--2 .kv__big { margin-top: -0.04em; }

	/* リード行：マスコット＋吹き出しを上、リード文を下（Figma SP順） */
	#top2026 .kv__lead-row { flex-direction: column-reverse; align-items: center; gap: 2.56vw; width: 92%; padding-left: 0; }
	#top2026 .kv__lead { width: 100%; padding-top: 0; }
	#top2026 .kv__lead-head { font-size: 5.64vw; line-height: 1.5; }
	#top2026 .kv__lead-text { width: 100%; font-size: 3.85vw; line-height: 1.85; }
	#top2026 .kv__mascot-wrap { margin-top: 0; padding-bottom: 0; align-items: center; justify-content: center; }
	#top2026 .kv__mascot { width: 38.46vw; height: auto; margin-right: -4.62vw; }
	#top2026 .kv__balloon { width: 30.77vw; height: 30.77vw; }
	#top2026 .kv__balloon-text { left: 50%; top: 8.46vw; font-size: 3.85vw; line-height: 5.13vw; }

	/* CTA：全幅縦積み */
	#top2026 .kv__cta-primary { flex-direction: column; align-items: stretch; gap: 3.59vw; width: 92%; }
	#top2026 .t2-btn--primary,
	#top2026 .t2-btn--outline { width: 100%; max-width: 100%; height: 16.41vw; font-size: 4.62vw; }
	#top2026 .t2-btn--primary .t2-btn__icon,
	#top2026 .t2-btn--outline .t2-btn__icon { width: 6.67vw; height: 6.67vw; }
}

/* ---- INFORMATION / MEDIA（SP）：親.container(600px固定)・Elementorを全幅化 ---- */
@media (max-width: 640px) {
	#top_info .container, #top_media .container,
	#top_info .inner, #top_media .inner {
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
		box-sizing: border-box;
		padding-left: 4.1vw;
		padding-right: 4.1vw;
	}
	#top_info [class*="elementor"], #top_media [class*="elementor"] {
		max-width: 100% !important;
	}
	/* 英字タイトル（INFORMATION/MEDIA）縮小 */
	.t2i-head__en, .t2m-head__en { font-size: 12vw !important; line-height: 1; word-break: normal; }
	.t2i-head, .t2m-head { width: 100%; max-width: 100%; }
}

/* ---- OUR STRENGTHS（SP）：picture をレイアウト透過し既存imgレイアウト維持。
       SPでは -sp.png（縦組みカード）の自然比率で表示 ---- */
#top2026 .t2o-rows picture { display: contents; }
@media (max-width: 640px) {
	#top2026 .t2o-rows img { width: 100%; height: auto; aspect-ratio: auto; }
}

/* ---- OUR STRENGTHS（SP）：イントロ縦積み・見出し縮小・バー縮小 ---- */
@media (max-width: 640px) {
	#top2026 .t2o { padding: 12.31vw 0; gap: 9.23vw; }
	#top2026 .t2o-inner { gap: 4.62vw; }
	#top2026 .t2o-head { flex-direction: column; align-items: flex-start; gap: 1.03vw; }
	#top2026 .t2o-head__en { font-size: 12vw; line-height: 1; }
	#top2026 .t2o-head__ja { font-size: 4.1vw; }
	#top2026 .t2o-intro { flex-direction: column; gap: 4.1vw; }
	#top2026 .t2o-intro__title { font-size: 5.38vw; line-height: 1.5; }
	#top2026 .t2o-intro__lead { font-size: 3.85vw; line-height: 1.85; }
	#top2026 .t2o-intro__img { width: 100%; }
	#top2026 .t2o-intro__img img { width: 100%; height: auto; }
	#top2026 .t2o-reasons { gap: 4.1vw; }
	#top2026 .t2o-bar { padding: 2.56vw; }
	#top2026 .t2o-bar span { font-size: 4.62vw; line-height: 1.4; }
}

/* ---- 下部セクション（CONTACT/HOWTO/COMPANY/MEDIA・親マークアップ流用）SP ---- */
@media (max-width: 640px) {
	/* コンテナ全幅化（親.container固定幅対策） */
	#top2026 #top_contact .container,
	#top2026 #howto .container,
	#top2026 #top_campany .container,
	#top2026 #top_media .container {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		box-sizing: border-box;
		padding-left: 4.1vw;
		padding-right: 4.1vw;
	}
	/* 英字見出し縮小・縦積み */
	#top2026 #top_contact .t2x-head__en,
	#top2026 #howto .t2x-head__en,
	#top2026 #top_campany .t2x-head__en { font-size: 13vw !important; line-height: 1; }
	#top2026 #top_media .t2m-head__en { font-size: 13vw !important; }
	#top2026 #top_contact .t2x-head,
	#top2026 #howto .t2x-head { flex-direction: column; align-items: flex-start; gap: 1.03vw; }
	#top2026 #top_contact .t2x-head__ja,
	#top2026 #howto .t2x-head__ja,
	#top2026 #top_campany .t2x-head__ja { font-size: 3.85vw; line-height: 1.5; }
	#top2026 #howto .t2x-head__ja br { display: none; }

	/* CONTACT（SP・Figma frame 1:484準拠）：白ボックス内に
	   「フォームからのお問い合わせ」ボタン（上）＋ 電話行（ラベル左・会社名/番号右） */
	#top2026 #top_contact .inner-box { display: flex; flex-direction: column; gap: 3.59vw; box-sizing: border-box; }
	/* 親は body.sp で `.sp .sp-none{display:none!important}`(グローバル) により .form を隠し
	   .mail を出すが、Figma SPは「フォームからの」ボタン＝ .form を表示・.mail を非表示。
	   親が !important なので !important で上書き。ボタン体裁(枠＋矢印)も親の768px版が効かないため自前で付与 */
	#top2026 #top_contact .form.sp-none {
		display: inline-flex !important; align-items: center; align-self: flex-start;
		width: auto; border: 1px solid #d0d3d6; border-radius: 1.54vw;
		padding: 2.56vw 4.1vw; font-weight: bold; background: #fff;
	}
	#top2026 #top_contact .form a {
		display: inline-flex; align-items: center; gap: 2.05vw;
		position: relative; color: #333; text-decoration: none; line-height: 1.4;
	}
	#top2026 #top_contact .form a::after {
		content: ""; flex: 0 0 auto; width: 5.13vw; height: 5.13vw;
		background: url(../img/kv/arrow-blue.svg) center / contain no-repeat;
	}
	#top2026 #top_contact .mail.pc-none { display: none !important; }
	#top2026 #top_contact .tel { width: 100%; box-sizing: border-box; }
	/* 電話行：ラベル左・会社名+番号右（横並び・縦中央） */
	#top2026 #top_contact .tel dl { display: flex; flex-direction: row; align-items: center; gap: 3.08vw; }
	#top2026 #top_contact .tel dt { flex: 0 0 auto; }
	#top2026 #top_contact .tel dd { flex: 1 1 auto; min-width: 0; }
	#top2026 #top_contact .tel dd img,
	#top2026 #top_contact .tel img { max-width: 100%; height: auto; }

	/* HOWTO（SP・Figma frame 1:484準拠）：マスコット画像（左）＋「停電時…」バナー（右）の横並び・縦中央 */
	#top2026 #howto .inner dl { display: flex; flex-direction: row; align-items: center; gap: 3.08vw; }
	#top2026 #howto .inner dt { flex: 0 0 auto; }
	#top2026 #howto .inner dt img { display: block; width: 23vw; height: auto; }
	#top2026 #howto .inner dd { flex: 1 1 auto; min-width: 0; }
	#top2026 #howto .inner dd img { max-width: 100%; height: auto; }

	/* COMPANY：リンク縦積み・画像フィット（詳細体裁は修正#15で上書き） */
	#top2026 #top_campany #company { flex-direction: column; align-items: stretch; }
	#top2026 #top_campany #company-link { display: flex; flex-direction: column; gap: 2.56vw; }
	#top2026 #top_campany #company-link li img,
	#top2026 #top_campany #btn-goal img { max-width: 100%; height: auto; }
}

/* ============================================================
   修正 #12（2026-06-27 SPフィードバック対応）
   ============================================================ */
@media (max-width: 640px) {
	/* 2) セクション英字見出し：88px固定ルール（非メディア・後勝ち）を!importantで上書き */
	#top2026 .t2p-head__en, #top2026 .t2s-head__en, #top2026 .t2n-title__en,
	#top2026 .t2e-head__en, #top2026 .t2o-head__en,
	#top2026 #top_info .t2i-head__en, #top2026 #top_media .t2m-head__en,
	#top2026 #top_contact .t2x-head__en, #top2026 #howto .t2x-head__en,
	#top2026 #top_campany .t2x-head__en {
		font-size: 12vw !important;
		line-height: 1 !important;
	}

	/* 3) MV下端カーブ：SPでは写真が低いぶん相対的に深く見える→浅く */
	#top2026 .kv__photo-wrap::after { height: 13.33vw; }

	/* 4) OUR STRENGTHS：SP Figmaはイントロ文字のみ＝intro.png不要／横余白追加 */
	#top2026 .t2o-intro__img { display: none; }
	#top2026 .t2o-inner,
	#top2026 .t2o-reasons {
		width: 100%;
		padding-left: 5.13vw;
		padding-right: 5.13vw;
		box-sizing: border-box;
	}
}

/* ---- 修正 #12-2：KVアウトラインボタンが全幅(余白0)でprimary(92%)と不揃い→揃える ---- */
@media (max-width: 640px) {
	#top2026 .kv > .t2-btn--outline { width: 92%; max-width: 92%; }
}

/* 修正#13（SPヘッダー上書き）は撤去。親の素のSPヘッダーに任せる。
   ヘッダー崩れの真因は別途調査（device-width化との相互作用）。 */

/* ============================================================
   修正 #15（2026-06-29 COMPANY SPフィードバック・Figma frame 1:493/1:339）
   ・横幅：親 #company の padding 70px で他セクションより狭かった→是正
   ・RE100/SDGsロゴを中央寄せ
   ・バナーを均一フルフォト＋ラベルは画像の下（Figma準拠）
   ・施工実績の写真をFigma(1:342)の地上設置ソーラーに差し替え（PC/SP共通）
   ============================================================ */

/* 施工実績・採用情報・会社案内の画像差し替え（PC・SP共通）。親の background ショートハンドの image だけ上書き
   ※会社案内(outline-fig.jpg)はFigma 1:340＝透かし入りiStock comp。暫定使用（後で正規版に差し替え予定）。
     実社屋写真は assets/img/company/outline.png に温存（戻す時はこのURLを outline.png に変えるだけ） */
#top2026 #top_campany #company-link li.example a {
	background-image: url(../img/company/example.jpg) !important;
}
#top2026 #top_campany #company-link li.recruit a {
	background-image: url(../img/company/recruit.jpg) !important;
}
#top2026 #top_campany #company-link li.outline a {
	background-image: url(../img/company/outline-fig.jpg) !important;
}

@media (max-width: 640px) {
	/* 横幅是正：親 #company の左右padding(70px)で他セクション(約540)より狭い(400)→0に */
	#top2026 #top_campany #company { padding-left: 0; padding-right: 0; }

	/* RE100/SDGsロゴ：中央寄せ（「再生可能エネルギーの普及活動」見出しは左のまま） */
	#top2026 #top_campany #btn-goal { display: block; text-align: center; margin-inline: auto; }
	#top2026 #top_campany #btn-goal img { display: inline-block; vertical-align: middle; }

	/* バナー：均一フルフォト（Figma 350:144）＋ラベルは画像の下・中央（Figma frame 1:493準拠） */
	#top2026 #top_campany #company-link { gap: 6.15vw; margin-top: 6.15vw; }
	#top2026 #top_campany #company-link li {
		width: 100%; background: none; text-align: center;
	}
	/* a＝縦積み（画像→ラベル）。親の背景画像/枠/line-heightは打ち消し、画像は::beforeへ */
	#top2026 #top_campany #company-link li a {
		display: flex; flex-direction: column; align-items: center; gap: 2.56vw;
		background: none !important; border: none; padding: 0; margin: 0;
		line-height: 1.3; color: #333; font-weight: bold; text-shadow: none;
	}
	/* .class指定の画像上書き(!important・非メディア)はSPのaにも乗りラベル裏に画像が透ける→打ち消し。
	   画像は::beforeのみが担当する */
	#top2026 #top_campany #company-link li.example a,
	#top2026 #top_campany #company-link li.recruit a,
	#top2026 #top_campany #company-link li.outline a { background: none !important; }
	#top2026 #top_campany #company-link li a::before {
		content: ""; display: block; width: 100%; aspect-ratio: 350 / 144;
		border-radius: 2.05vw; background-size: cover; background-position: center; background-repeat: no-repeat;
	}
	#top2026 #top_campany #company-link li.outline  a::before { background-image: url(../img/company/outline-fig.jpg); }
	#top2026 #top_campany #company-link li.recruit  a::before { background-image: url(../img/company/recruit.jpg); }
	#top2026 #top_campany #company-link li.example  a::before { background-image: url(../img/company/example.jpg); }
	/* 親のFAアロー(:after)無効化し、ラベルは画像下に中央・矢印付き */
	#top2026 #top_campany #company-link li a::after { content: none; }
	#top2026 #top_campany #company-link li a span {
		display: inline-flex; align-items: center; gap: 1.54vw;
		font-size: 4.62vw; color: #333;
	}
	#top2026 #top_campany #company-link li a span::after {
		content: ""; width: 4.62vw; height: 4.62vw; flex: 0 0 auto;
		background: url(../img/kv/arrow-blue.svg) center / contain no-repeat;
	}
}

/* ============================================================
   修正 #16（2026-06-29 専用サイトのご紹介 SP・Figma frame 1:474）
   画像・文字が小さい指摘 → Figma SP寸法(÷3.9)で拡大。
   Figma: title 22px / lead 16px(lh32) / caption 16px / 画像幅252px(aspect252:239 cover) / padding 20-20-30
   ============================================================ */
@media (max-width: 640px) {
	#top2026 .t2-sites {
		flex-direction: column; align-items: center; gap: 4.1vw;
		padding: 5.13vw 5.13vw 7.69vw; border-radius: 2.05vw;
	}
	#top2026 .t2-sites__intro { flex: 0 0 auto; width: 100%; min-width: 0; }
	#top2026 .t2-sites__title { font-size: 5.64vw; line-height: 1.4; }
	#top2026 .t2-sites__lead { font-size: 4.1vw; line-height: 2; }
	#top2026 .t2-sites__cards { width: 100%; justify-content: center; }
	#top2026 .t2-sites__card { width: 64.62vw; max-width: 100%; gap: 2.05vw; }
	#top2026 .t2-sites__card img { width: 100%; height: auto; aspect-ratio: 252 / 239; object-fit: cover; }
	#top2026 .t2-sites__card span { font-size: 4.1vw; }
}

/* ============================================================
   修正 #17（2026-06-29 BY THE NUMBERS SP・Figma SP無し）
   PCと同じ正円に統一（角丸rect＋楕円glowの混在を解消）。SPは2列。
   文字サイズはこのブロック（最後）で指定し、修正#06等の非メディアpx指定に後勝ちさせる。
   円径は600pxレイアウトで約264px（PCの282px円とほぼ同寸）＝PC比率を踏襲。
   ============================================================ */
@media (max-width: 640px) {
	#top2026 .t2n-card__body { padding: 0 4vw; width: 100%; }
	#top2026 .t2n-label { font-size: 3.1vw; margin: 0 0 1vw; line-height: 1.3; }
	#top2026 .t2n-figure { gap: 1vw; align-items: flex-end; }
	#top2026 .t2n-num { font-size: 13vw; }
	/* 4桁(1,000)は円内に収まるよう小さめ */
	#top2026 .t2n-num[data-comma="1"] { font-size: 10vw; letter-spacing: -.04em; }
	#top2026 .t2n-unit__main { font-size: 4.5vw; }
	#top2026 .t2n-unit__sub { font-size: 2.8vw; }
	#top2026 .t2n-sup { font-size: 3vw; margin-top: 1vw; }
	#top2026 .t2n-sup--note { font-size: 2.4vw; }
	#top2026 .t2n-desc { width: 100%; font-size: 3.1vw; line-height: 1.5; }
}

/* ============================================================
   修正 #18（2026-06-29 SERVICES SP・Figma frame 1:592準拠）
   PCの固定px（card308/body356/title18/body14/badge47）がSPでも効き、実機(390)に
   縮小されて画像・文字が小さく見えた。Figma SP寸法を÷3.9でvw化（実機でFigma同寸に）。
   card 308px→78.97vw / 画像 aspect292:132 / title 18px→4.62vw / 本文 14px→3.59vw / badge 47px→12.05vw
   ============================================================ */
@media (max-width: 640px) {
	#top2026 .t2s-grid { justify-content: center; }
	#top2026 .t2s-card {
		width: 78.97vw; max-width: 100%; margin-inline: auto;
		padding: 2.05vw; border-radius: 2.05vw;
	}
	#top2026 .t2s-card__body { height: auto; }
	/* 写真は固定37%(=132px)をやめ、Figmaのアスペクト比で表示 */
	#top2026 .t2s-card__img { flex: 0 0 auto; height: auto; aspect-ratio: 292 / 132; }
	#top2026 .t2s-card__txt { padding: 3.59vw; }
	#top2026 .t2s-card__title { font-size: 4.62vw; line-height: 1.2; margin: 0 0 2.05vw; }
	#top2026 .t2s-card__lead { font-size: 3.59vw; line-height: 1.5; }
	/* アイキャッチ徽章：箱もマスクもvw化（mask-sizeを箱に追従させcontain） */
	#top2026 .t2s-card__badge {
		width: 12.05vw; height: 12.05vw;
		-webkit-mask-size: contain; mask-size: contain;
	}
}