/*
 * トップページ（front-page.php）— Claude Design v3 のホーム画面
 * （prototype 596-980）より。
 *
 * ## ここにあるものは少ない。理由
 *
 * v3 のホームが使う部品はほぼ全部 **base.css に既にある**（Phase 2 で
 * プロトタイプの helmet から抽出済み）。実測で確認した範囲:
 *
 *   .sec-w .tk-card .tk-card-c .tk-tile .tk-tile-cta .tk-tile-a .tk-chip-a
 *   .tk-kcat .tk-carobtn .tk-btn-p .tk-btn-g .tk-hero-cta .dd-item .ew .tk-link
 *   .tk-marquee .tk-marquee-track
 *   ヒーローのアニメーション7種（.tk-planshift .tk-roomglow .tk-klink .tk-scan
 *   .tk-knode .tk-orb .tk-rise）
 *
 * したがってこのファイルは「base.css に無かったもの」と
 * 「プロトタイプに無かったブレークポイント」だけを持つ。
 *
 * ⚠️ .tk-sec-sol / .tk-sec-case / .tk-sec-know / .tk-sec-co は base.css に
 * あるが **`.sc-sem` 配下の形でしか定義されていない**（base.css:54-56）。
 * プロトタイプの sideClass は既定で空文字なので、いまはどれも効いていない。
 * セクションの色分けを採用する日に `.sc-sem` を祖先に付けること。
 */

/* ============================================================
   .tk-solgrid — 課題別ソリューションの6タイル
   ============================================================
   🚨 このクラスは **どこにも定義が無かった**（2026-09-17 実測）。
   base.css にも、テーマの他のCSSにも、プロトタイプ自身の <style> にも0件。
   マークアップだけが存在していて、3列はインライン style が作っていた。
   インラインだけだと狭い画面で潰れるので、畳みをここに持たせる。
   ============================================================ */

.tk-solgrid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

/* ============================================================
   狭い画面
   ============================================================
   プロトタイプにブレークポイントは1つも無い。
   インラインの grid-template-columns に勝つ必要があるため !important。
   ============================================================ */

@media (max-width: 1000px) {
	.tk-solgrid,
	.tk-sec-know .sec-w > div:last-child {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
	/* 事例カードは3枚で1ページなので、2列に割ると3枚目が落ちる。横並びを保つ。 */
	.tk-casegrid {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 860px) {
	/* 会社紹介＋最新ニュースの2カラム。 */
	.tk-sec-co .sec-w {
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 40px !important;
	}
	.tk-casegrid {
		grid-template-columns: minmax(0, 1fr) !important;
	}
	/*
	 * カルーセルの矢印は left:-22px / right:-22px で枠の外に出ている。
	 * 画面が狭いと見切れるので内側に寄せる。
	 */
	.tk-sec-case .tk-carobtn[data-tk-prev] { left: 4px !important; }
	.tk-sec-case .tk-carobtn[data-tk-next] { right: 4px !important; }
}

@media (max-width: 620px) {
	.tk-solgrid,
	.tk-sec-know .sec-w > div:last-child {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}

/* ============================================================
   ヒーロー — 3D の建設シティ（2026-09-24 差し替え）
   ============================================================
   マークアップは front-page.php の <section class="tk-hero">。
   絵は Three.js が <canvas> に描く（assets/js/hero-city.js ＋ hero-city-init.js）。
   旧ヒーロー（方眼のSVG .tk-planshift ほか）はここで置き換わった。
   base.css:453-466 のアニメーション7種は**他で使っていないが残してある**
   （消すと v0.1 のページと差分が出るため。使用0件・害なし）。

   🚨 **大きさを握っているのは .tk-hero__art。**
   絵はこの箱を ResizeObserver で見て追従する。**canvas に直接 width /
   height を書かないこと。**書くと JS 側の設定と二重になって滲む。

   🚨 **.tk-hero__copy は絵の上に重なる。**
   絵はポインタを見て視差と光を出すので、帯ごと塞ぐと死ぬ。
   帯は pointer-events:none にして、文字とボタンだけ auto に戻している。

   ⚠️ **左端はプロトタイプの left:80px を使っていない。**
   あちらのヘッダーは全幅（ロゴが 40px）、こちらは 1200px 中央寄せ
   （1440px でロゴが 160px）。そのまま移すとロゴと本文の左端が 80px ずれる
   （/news/ で直したのと同じ型）。.tk-gutter で他ページと同じ版面に載せている。
   ============================================================ */

.tk-hero {
	position: relative;
	overflow: hidden;
	background: #FBFBFF;
	border-bottom: 1px solid #E1E9F8;
	/* ヘッダーは position:fixed の 72px（nav.css:19 と同じ変数を読む）。 */
	height: calc(100vh - var(--tk-header-h, 72px));
	height: calc(100svh - var(--tk-header-h, 72px));
	min-height: 628px;
	max-height: 900px;
}

.tk-hero__art { position: absolute; inset: 0; }

.tk-hero__canvas {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: block;
	width: 100%;
	height: 100%;
	/* 線画なので、わずかに滲ませないと白地に沈む。 */
	filter: drop-shadow(0 0 2px rgba(81, 86, 190, 0.55)) drop-shadow(0 0 8px rgba(81, 86, 190, 0.25));
}

.tk-hero__veil { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

.tk-hero__copy {
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	pointer-events: none;
}

.tk-hero__inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 26px;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 40px;
}

/*
 * 🚨 帯は素通しにして、中身だけ受ける。順番が逆だと絵のホバーが効かない。
 * 立ち上がりの演出もここで一緒に持たせる（旧 .tk-rise と同じ考え方）。
 */
.tk-hero__inner > * {
	pointer-events: auto;
	opacity: 0;
	transform: translateY(16px);
	animation: tk-hero-rise 0.9s cubic-bezier(.2, .8, .2, 1) forwards;
}
.tk-hero__inner > *:nth-child(2) { animation-delay: 0.12s; }
.tk-hero__inner > *:nth-child(3) { animation-delay: 0.24s; }

@keyframes tk-hero-rise { to { opacity: 1; transform: none; } }

/*
 * 級数（オーナー決定 2026-09-24）:「スマホの見え方はプロトタイプどおりで
 * いい」。プロトタイプの狭い画面は **30px / 行送り1.34 / 字間 -0.01em**。
 *
 * 🚨 **プロトタイプの式をそのまま移さないこと。** あちらは基本 48px で
 * 760px 以下だけ 30px なので、**761〜1100px が 48px のまま取り残される**。
 * 1101px から式が変わって 29.5px に落ちるため、**1100→1101px で
 * 48→29.5px の段差**ができる（プロトタイプ側の不具合。実測で確認）。
 *
 * ここは clamp 1本で連続にしてある:
 *   〜1154px  30px（プロトタイプの狭い画面と同値）
 *   1385px〜  36px（トップの級数のオーナー決定「残す」と同値）
 * 1440px でプロトタイプの実効値 36.5px とも一致する。
 */
.tk-hero__h1 {
	margin: 0;
	font-family: 'Noto Sans JP', 'Noto Sans', sans-serif;
	font-weight: 300;
	font-size: clamp(30px, 2.6vw, 36px);
	line-height: 1.34;
	letter-spacing: -0.01em;
	color: #101010;
}

/*
 * 🚨 **狭い画面では <br> が消える**（design-system.css:304 が 600px 以下で
 * br.tk-br-pc を display:none にする）。そこから先は自然改行で、
 * ブラウザは**文字数だけ見て折る**ので「設計」「施工」「エージェント」が
 * 行をまたいで割れていた（2026-09-24 実測・オーナー指摘）。
 * 文節を inline-block で包み、**文節の境目でしか折れない**ようにする。
 *
 * 🚨 **span どうしの間に空白・改行を入れないこと。** 空白があるとそこが
 *    改行位置になり、さらに inline-block の間に隙間が空く。
 *    front-page.php の h1 は1行に詰めて書いてある。
 */
.tk-hero__h1 .tk-hero__p { display: inline-block; }

/*
 * 🚨 389px 以下だけ級数を落とす。30px のままだと「エージェント知能基盤」
 * （10字＝300px）が 320px の箱（内側280px）に入らず、**文節で包んでも
 * 中で割れる**（実測）。この規則は .tk-hero__h1 と同じ詳細度なので、
 * **必ず上の宣言より後ろに置くこと**（メディアクエリは詳細度を上げない）。
 */
@media (max-width: 389px) {
	.tk-hero__h1 { font-size: 26px; }
}

/* 3行目だけ紫のグラデーション。プロトタイプの新しい部分。 */
.tk-hero__grad {
	background: linear-gradient(100deg, #5156BE 0%, #5156BE 45%, #9FA2DB 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.tk-hero__desc {
	margin: 0;
	font-size: 16px;
	line-height: 1.85;
	color: #3A3A45;
	/*
	 * ⚠️ 旧ヒーローは max-width 無し（親の680px内）で**1行**だった。
	 * プロトタイプは 520px で2行に折る。520 を採ったのは、560 だと
	 * 最終行が「ます。」の2文字だけになるため（実測）。
	 */
	max-width: 520px;
	text-wrap: pretty;
}

/* ------------------------------------------------------------
   CTA
   ------------------------------------------------------------
   🚨 .tk-btn-p は使っていない。プロトタイプのヒーローボタンは寸法も
   演出も別物（光が走る・矢印が動く）で、.tk-btn-p に足すと**サイト中の
   ボタン全部**に乗ってしまう。色と角丸だけ .tk-btn-p と同値。
   ------------------------------------------------------------ */

.tk-hero__cta {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 14px;
	overflow: hidden;
	padding: 18px 28px 18px 40px;
	border-radius: 6px;
	background: #5156BE;
	color: #fff;
	font-size: 16px;
	font-weight: 500;
	text-decoration: none;
	box-shadow: 0 10px 30px -10px rgba(81, 86, 190, 0.6);
	transition: filter 120ms cubic-bezier(.2, .8, .2, 1),
		transform 0.3s cubic-bezier(.2, .8, .2, 1),
		box-shadow 0.3s cubic-bezier(.2, .8, .2, 1);
}

/* 平常時は枠の左外に隠しておき、ホバーで右へ走らせる。 */
.tk-hero__cta::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
	transform: translateX(-100%);
	transition: transform 0.8s cubic-bezier(.2, .8, .2, 1);
}

.tk-hero__cta:hover {
	filter: brightness(0.92);
	transform: translateY(-1px);
	box-shadow: 0 16px 36px -12px rgba(81, 86, 190, 0.7);
}
.tk-hero__cta:hover::before { transform: translateX(100%); }
.tk-hero__cta svg { transition: transform 0.3s cubic-bezier(.2, .8, .2, 1); }
.tk-hero__cta:hover svg { transform: translateX(4px); }

/*
 * 🚨 base.css:326 のフォーカス輪郭は .tk-btn-p など**名指しの一覧**なので、
 * 新しいクラスは自分で書かないと**キーボードで見えないボタンになる**。
 */
.tk-hero__cta:focus-visible { outline: 2px solid #5156BE; outline-offset: 3px; }

/* ------------------------------------------------------------
   デスクトップ — 絵は右、文字は左。重ならない
   ------------------------------------------------------------ */

@media (min-width: 1101px) {
	/*
	 * 絵の箱を右へ寄せ、左端をマスクで溶かす。マスクが無いと
	 * 線画の切り口が縦の直線として見える。
	 */
	.tk-hero__art {
		left: clamp(460px, 36vw, 620px);
		--tk-hero-fade: linear-gradient(90deg,
			rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .04) 10%, rgba(0, 0, 0, .14) 18%,
			rgba(0, 0, 0, .32) 26%, rgba(0, 0, 0, .56) 34%, rgba(0, 0, 0, .8) 42%,
			rgba(0, 0, 0, .95) 50%, #000 58%);
		-webkit-mask-image: var(--tk-hero-fade);
		mask-image: var(--tk-hero-fade);
	}
	.tk-hero__veil { background: linear-gradient(90deg, #FBFBFF 0%, rgba(251, 251, 255, 0) 18%); }
}

/* ------------------------------------------------------------
   狭い画面 — 文字が上、絵が下。文字を絵に重ねない
   ------------------------------------------------------------ */

@media (max-width: 1100px) {
	.tk-hero {
		display: flex;
		flex-direction: column;
		height: auto;
		max-height: none;
		min-height: calc(100vh - var(--tk-header-h, 72px));
		min-height: calc(100svh - var(--tk-header-h, 72px));
	}
	.tk-hero__copy {
		position: relative;
		left: auto;
		right: auto;
		top: auto;
		transform: none;
		padding: 56px 0 8px;
	}
	.tk-hero__art {
		position: relative;
		inset: auto;
		order: 2;
		flex: 1 1 auto;
		min-height: 420px;
		-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18%);
		mask-image: linear-gradient(180deg, transparent 0, #000 18%);
	}
	.tk-hero__veil { background: linear-gradient(180deg, #FBFBFF 0%, rgba(251, 251, 255, 0) 22%); }
}

@media (max-width: 760px) {
	.tk-hero__copy { padding: 36px 0 4px; }
	.tk-hero__inner { gap: 20px; }
	/* 文字の下に、絵が最低限見える高さを残す。 */
	.tk-hero__art { min-height: max(340px, calc(100svh - var(--tk-header-h, 72px) - 470px)); }
}

/*
 * 🚨 **カメラの画角は絵の箱の縦横比で 44°／36°／32° に切り替わる**
 * （hero-city.js の frame(): aspect<1 なら44、<1.6 なら36、それ以外32）。
 * 絵の箱は「文字の残り」で決まるので、**端末の高さが少し違うだけで
 * 別の画角になる**。実測: 高さ 370px→36° / 380px→44°（差10px で切替）。
 * iPhone SE は 1.10 で36°、iPhone 12 mini は 0.97 で44° と、
 * 同じスマホでも寄りが変わっていた（2026-09-24 オーナー指摘）。
 *
 * → スマホ帯だけ **箱を必ず縦長にして 44° に固定**する。108vw は
 *   「幅より確実に高い」ための下限で、実機の縦がそれより大きければ
 *   そちらが勝つ（大きいスマホは従来どおり）。
 *   **この行を消すと端末ごとに寄りが変わる状態に戻る。**
 */
@media (max-width: 500px) {
	.tk-hero__art {
		min-height: max(108vw, calc(100svh - var(--tk-header-h, 72px) - 470px));
	}
}

/* ------------------------------------------------------------
   例外の2つ
   ------------------------------------------------------------ */

/*
 * 🚨 WebGL が使えないと絵は1本も描かれない。真っ白を見せないよう方眼を敷く。
 * is-nogl は hero-city-init.js が付ける。
 */
.tk-hero.is-nogl .tk-hero__canvas { display: none; }
.tk-hero.is-nogl .tk-hero__art {
	background-image:
		linear-gradient(rgba(81, 86, 190, 0.10) 1px, transparent 1px),
		linear-gradient(90deg, rgba(81, 86, 190, 0.10) 1px, transparent 1px);
	background-size: 64px 64px;
}

/* カメラのパンは JS 側で止まる。こちらは文字の立ち上がりを止める。 */
@media (prefers-reduced-motion: reduce) {
	.tk-hero__inner > * { animation: none; opacity: 1; transform: none; }
	.tk-hero__cta, .tk-hero__cta::before, .tk-hero__cta svg { transition: none; }
}