/*
 * ソリューション詳細ページ（template-solution-detail.php）
 *
 * Claude Design v3 の SOLUTION DETAIL 画面（prototype 1768-3984）より。
 * 共通コンポーネント（.sec-w / .tk-card / .tk-card-c / .ew / .tk-crumb /
 * .tk-btn-*）は base.css にあるので、ここにあるのはこの画面固有のものだけ。
 * base.css より後に読み込まれる前提（アセットマップで 'base' を先頭に置く）。
 *
 * 数値はプロトタイプのインライン style をそのまま移したもの。丸めていない。
 */

/* ============================================================
   ヒーロー
   ============================================================ */

.tk-sold__hero {
	position: relative;
	padding: clamp(52px, 5vw, 76px) 0 clamp(52px, 5vw, 72px);
	overflow: hidden;
}

/* mep だけの装飾レイヤー。他6本のヒーローには無い。 */
.tk-sold__wash {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(180deg, #FFFFFF 0%, #F3F3FB 10%, #E4E4F5 48%, #F0F0F9 82%, #FFFFFF 100%);
}
.tk-sold__glow {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}
.tk-sold__glow--tr {
	top: -170px;
	right: -110px;
	width: 560px;
	height: 560px;
	background: radial-gradient(circle, rgba(81, 86, 219, 0.10) 0%, rgba(81, 86, 219, 0) 68%);
	filter: blur(20px);
}
.tk-sold__glow--bl {
	bottom: -210px;
	left: -150px;
	width: 620px;
	height: 620px;
	background: radial-gradient(circle, rgba(170, 166, 240, 0.26) 0%, rgba(170, 166, 240, 0) 68%);
	filter: blur(24px);
}
.tk-sold__fade {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 120px;
	pointer-events: none;
	background: linear-gradient(0deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 100%);
}

/*
 * 負のトップマージンでパンくずをセクションの上パディングに食い込ませる。
 * これがないと mep のヒーローだけ他6本より縦に間延びする。
 */
.tk-sold__crumbwrap {
	position: relative;
	z-index: 1;
	margin: calc(-1 * clamp(20px, 2vw, 30px)) 0 clamp(24px, 2.6vw, 36px);
}

/*
 * minmax(0, …) を外さないこと。fr だけにすると右カラムの中身が
 * グリッドをはみ出す。
 */
.tk-sold__herogrid {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.8fr);
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}

.tk-sold__heromedia {
	position: relative;
	aspect-ratio: 4 / 5;
	border-radius: 999px 999px 10px 10px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.55);
	border: 1px solid rgba(198, 199, 230, 0.6);
}

/*
 * white-space:pre-line は必須。'heading' と 'lead' に実際の改行が入っている
 * ソリューションがある（repeat の heading、mep の solve_lead など）。
 */
.tk-sold__h1 {
	font-weight: 300;
	font-size: clamp(26px, 3vw, 38px);
	line-height: 1.25;
	letter-spacing: -0.022em;
	margin: 0 0 18px;
	max-width: 640px;
	text-wrap: pretty;
	white-space: pre-line;
}
.tk-sold__lead {
	font-size: 16px;
	line-height: 1.85;
	color: #3A3A45;
	margin: 0 0 32px;
	max-width: 780px;
	text-wrap: pretty;
	white-space: pre-line;
}
.tk-sold__btns {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}
.tk-sold__cta {
	padding: 13px 26px;
	font-size: 15px;
}

/* ============================================================
   見出し（課題・解決・製品誘導で共通）
   ============================================================ */

.tk-sold__h2 {
	font-weight: 300;
	font-size: clamp(22px, 2.2vw, 28px);
	line-height: 1.32;
	letter-spacing: -0.02em;
	text-wrap: pretty;
}

.tk-sold__solvelead {
	font-size: 16px;
	line-height: 1.7;
	color: #3A3A45;
	margin: 0;
	white-space: pre-line;
}

/* ============================================================
   課題カード
   ============================================================ */

.tk-sold__chgrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: 24px 40px;
}
.tk-sold__chicon {
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	margin-bottom: 14px;
	opacity: 0.55;
}
/*
 * min-height はカード間で本文の開始位置を揃えるため。2行想定。
 * 外すと見出しの行数ごとに本文がずれる。
 */
.tk-sold__chtitle {
	font-size: 17px;
	font-weight: 600;
	line-height: 1.5;
	color: #101010;
	margin: 0 0 10px;
	text-wrap: pretty;
	min-height: 51px;
}

/* ============================================================
   解決カード — 横並び（bim / quality / repeat / dxf。mep は第三の扱い）
   ============================================================ */

.tk-sold__pgrid {
	margin-top: 44px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: 20px;
}
.tk-sold__pcard {
	background: #ECECFC;
	border: 1px solid #C6C7E6;
	border-radius: 8px;
	padding: 20px;
	display: flex;
	flex-direction: column;
}
.tk-sold__pnum,
.tk-sold__stepnum {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: #fff;
	border: 1.5px solid #C6C4F0;
	color: #5156BE;
	font-family: 'Noto Sans Mono', monospace;
	flex: none;
}
.tk-sold__pnum {
	width: 30px;
	height: 30px;
	font-size: 12px;
}
.tk-sold__ptitle {
	font-weight: 600;
	font-size: 19px;
	line-height: 1.45;
	letter-spacing: -0.01em;
	color: #101010;
	margin: 0 0 14px;
	text-wrap: pretty;
}
.tk-sold__pmedia {
	aspect-ratio: 4 / 3;
	border-radius: 6px;
	overflow: hidden;
	background: #fff;
	border: 1px solid #DEDEF9;
	margin-top: auto;
}

/* ============================================================
   解決ステップ — 縦積み（data / law のみ。mep は sections-mep.php の2列）
   ============================================================ */

.tk-sold__steps {
	margin-top: 44px;
	display: flex;
	flex-direction: column;
	gap: 0;
	/* .tk-sold__progress の位置基準。 */
	position: relative;
}
.tk-sold__step {
	position: relative;
	display: grid;
	grid-template-columns: 58px minmax(0, 1fr) minmax(0, 1.05fr);
	align-items: center;
	column-gap: clamp(24px, 3vw, 40px);
	padding: clamp(20px, 2.2vw, 28px) 0;
}
/*
 * 番号の丸をつなぐ縦線。最初の行は上半分、最後の行は下半分を描かないので、
 * 線が端の丸をはみ出さない。位置はテンプレート側で行番号から算出する。
 */
.tk-sold__stepline {
	position: absolute;
	left: 29px;
	width: 1.5px;
	background: #DEDEF9;
	z-index: 0;
}

/*
 * スクロールに追従して伸びる線（オーナー 2026-09-19・指摘表106/123ほか）。
 *
 * 🚨 段ごとに .tk-sold__stepline を塗る作りにしたら**カクついた**
 *   （オーナー指摘）。段の高さぶん一気に進むので当然だった。
 *   本番 /regulations/ と同じく、**1本のオーバーレイの height を px で動かす**。
 *   高さは assets/js/sol-steps.js が入れる。transition は本番と同じ .18s。
 *
 * left は .tk-sold__stepline と同じ値にすること（番号の中心）。
 * ずらすと静的な線と2本に見える。900px 以下は 22px（番号が 58→44px になるため）。
 */
/*
 * 静的なつなぎ線。**最初と最後の丸の中心の間**だけを結ぶ。位置と高さは
 * assets/js/sol-steps.js が実測して入れる（.tk-sold__progress と同じ根拠）。
 *
 * 🚨 以前は段ごとの .tk-sold__stepline を `top:50%` / `bottom:50%` で半分に
 *   していたが、**50%が丸の中心と一致するのはPCだけ**。スマホは段が2行になって
 *   丸が上に寄るため、最後の段から線が110pxはみ出していた（2026-09-24 実測）。
 *   left は .tk-sold__progress と必ず同値にすること（ずれると2本に見える）。
 */
.tk-sold__track {
	position: absolute;
	left: 29px;
	width: 1.5px;
	background: #DEDEF9;
	z-index: 0;
}
@media (max-width: 900px) {
	.tk-sold__track { left: 22px; }
}

.tk-sold__progress {
	position: absolute;
	left: 29px;
	width: 1.5px;
	background: #5156BE;
	z-index: 0;
	transition: height 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@media (max-width: 900px) {
	.tk-sold__progress { left: 22px; }
}
@media (prefers-reduced-motion: reduce) {
	.tk-sold__progress { transition: none; }
}
.tk-sold__stepnum {
	grid-column: 1;
	position: relative;
	z-index: 1;
	width: 58px;
	height: 58px;
	font-size: 15px;
}
.tk-sold__stepbody {
	grid-column: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.tk-sold__steptitle {
	font-weight: 600;
	font-size: 17px;
	line-height: 1.4;
	letter-spacing: -0.01em;
	color: #101010;
	margin: 0 0 14px;
	text-wrap: pretty;
}
.tk-sold__stepmedia {
	grid-column: 3;
	aspect-ratio: 4 / 3;
	border-radius: 6px;
	overflow: hidden;
	background: #fff;
	border: 1px solid #EAEAEA;
}

/* ============================================================
   mep だけ: custom-ai-apps へ戻すカード
   ============================================================ */

.tk-sold__backcard {
	padding: 36px 34px;
	display: flex;
	align-items: center;
	gap: 40px;
}
.tk-sold__backicon {
	width: 44px;
	height: 44px;
	border-radius: 6px;
	background: #ECECFC;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
}

/* ============================================================
   製品詳細への誘導
   ============================================================ */

.tk-sold__prodgrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	gap: 16px;
}
.tk-sold__prodcard {
	text-align: left;
	padding: 32px 34px;
	display: flex;
	flex-direction: column;
}
.tk-sold__prodkicker {
	font-family: 'Noto Sans Mono', monospace;
	font-size: 10px;
	letter-spacing: 0.16em;
	color: #7A7A85;
	margin-bottom: 10px;
}
.tk-sold__prodtitle {
	font-size: 19px;
	font-weight: 600;
	margin: 0 0 8px;
	line-height: 1.4;
}
.tk-sold__proddesc {
	font-size: 13.5px;
	line-height: 1.7;
	color: #3A3A45;
	margin: 0 0 22px;
}
.tk-sold__prodlink {
	margin-top: auto;
	font-size: 13.5px;
}

/* ============================================================
   他の業務テーマから探す
   ============================================================ */

.tk-sold__othergrid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
.tk-sold__othercard {
	padding: 24px 28px;
	text-align: left;
	background: #fff;
	border-color: #C6C7E6;
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* ============================================================
   CTA
   ============================================================ */

.tk-sold__cta-band {
	background: linear-gradient(115deg, #5156BE, #8A8DE8, #AAA6F0);
	border-radius: 12px;
	padding: 48px 52px;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 40px;
	align-items: center;
}
.tk-sold__cta-kicker {
	font-size: 11px;
	font-family: 'Noto Sans Mono', monospace;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.75);
	margin-bottom: 12px;
}
.tk-sold__cta-title {
	font-weight: 300;
	font-size: clamp(22px, 2.2vw, 28px);
	line-height: 1.32;
	letter-spacing: -0.02em;
	color: #fff;
	margin: 0 0 10px;
	text-wrap: pretty;
}
.tk-sold__cta-lead {
	font-size: 16px;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.88);
	margin: 0;
	max-width: 520px;
}

/* ============================================================
   狭い画面
   ============================================================
   プロトタイプはブレークポイントを1つも宣言していない（デザインツール上は
   デスクトップ幅でしか見ないため）。そのままでは 900px 以下で2〜3カラムの
   グリッドが潰れるので、ここで畳む。
   ============================================================ */

@media (max-width: 900px) {
	.tk-sold__herogrid {
		grid-template-columns: minmax(0, 1fr);
	}
	/*
	 * 🔁 2026-09-19 方針変更（オーナー・指摘表104行）。
	 *
	 * もとは display:none だった。理由は「aspect-ratio:4/5 固定なので 335px 幅では
	 * 419px の縦長になり、**CTA が画面外に落ちる**」。
	 * 今回の指示は「**ボタンの下に**表示して」で、CTA より下に置けば押し出しは
	 * 起きない。当時の問題への別解であって、判断のちゃぶ台返しではない。
	 *
	 * 900px 以下でグリッドは既に1列、メディアは本文・ボタンの**次**の要素なので、
	 * 出すだけで自然にボタンの下に来る。縦に伸びすぎないよう幅に上限を付ける
	 * （260px → 4/5 で高さ約325px）。中身は cqw で組まれているので幅に追従する。
	 */
	.tk-sold__heromedia {
		/*
		 * 🚨 ここで margin:0 auto を使わないこと。
		 *   **グリッドアイテムに auto マージンを置くと stretch が無効になり**、
		 *   中身に合わせて縮む。この箱の中身は絶対配置なので幅0になり、
		 *   枠線1px×2 の **2px** まで潰れる（2026-09-19 実測）。
		 *   width:100% で幅の基準を戻し、寄せは justify-self でやる。
		 */
		width: 100%;
		max-width: 260px;
		justify-self: center;
	}
	.tk-sold__step {
		grid-template-columns: 44px minmax(0, 1fr);
		row-gap: 20px;
	}
	.tk-sold__stepline {
		left: 22px;
	}
	.tk-sold__stepnum {
		width: 44px;
		height: 44px;
		font-size: 13px;
	}
	.tk-sold__stepmedia {
		grid-column: 2;
	}
	.tk-sold__othergrid {
		grid-template-columns: repeat(2, 1fr);
	}
	.tk-sold__backcard {
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
	}
	.tk-sold__cta-band {
		grid-template-columns: minmax(0, 1fr);
		padding: 36px 28px;
	}
}

@media (max-width: 600px) {
	.tk-sold__othergrid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ============================================================
   法令ソリューションの「活用事例」タブ（sections-law.php）
   ============================================================
   選択状態は tk-ui.js が data-active 属性で切り替える。**配色をインライン
   style に戻さないこと** — JS は属性しか触らないので、インラインに書くと
   1枚目が選ばれたまま固まる。

   値は v3 prototype 8194（labelStyle）と 8196（dotStyle）の三項演算子から。
   非選択が既定、選択時だけ上書きする形に組み替えてある。
   ============================================================ */
.tk-sold__uctab { -webkit-appearance: none; appearance: none; }
.tk-sold__ucpill {
	border: 1px solid #EAEAEA;
	background: #fff;
	color: #3A3A45;
	transition: background 120ms cubic-bezier(.2,.8,.2,1), border-color 120ms cubic-bezier(.2,.8,.2,1), color 120ms cubic-bezier(.2,.8,.2,1);
}
.tk-sold__ucdot {
	background: #fff;
	border: 2px solid #EAEAEA;
	transition: background 120ms cubic-bezier(.2,.8,.2,1), border-color 120ms cubic-bezier(.2,.8,.2,1), box-shadow 120ms cubic-bezier(.2,.8,.2,1);
}
.tk-sold__uctab[data-active="true"] .tk-sold__ucpill {
	border-color: #5156BE;
	background: #5156BE;
	color: #fff;
}
.tk-sold__uctab[data-active="true"] .tk-sold__ucdot {
	background: #5156BE;
	border-color: #5156BE;
	box-shadow: 0 0 0 4px rgba(81,86,190,.18);
}
.tk-sold__uctab:hover .tk-sold__ucpill { border-color: #5156BE; color: #5156BE; }
.tk-sold__uctab[data-active="true"]:hover .tk-sold__ucpill { color: #fff; }
.tk-sold__uctab:focus-visible { outline: 3px solid rgba(81,86,190,0.25); outline-offset: 2px; border-radius: 999px; }

/* ============================================================
   狭い画面で固定列を畳む（v3 にはブレークポイントが1つも無い）
   ============================================================
   v3 prototype の isSolDetail は列数を全てインライン style で持っており、
   375px でも desktop の列数を保つ。移植で約2000行入ったぶん、そのまま
   持ち込まれていた（実測で最小27px幅・1行1文字）。

   🚨 ブレークポイントは **900px と 600px だけ**。新しい値を足さないこと。
      600px は base.css のガター 40→20px と共有の境界で、ずらすと箱幅の
      前提が崩れる。900px は .tk-sold__heromedia を消す既存の境界。

   🚨 `1fr` ではなく `minmax(0,1fr)` で上書きすること。素の 1fr は min-content
      で床を打つので、列数を減らしても中身が縮まず再びはみ出す。

   🚨 掴みクラスで狙うこと。`[style*="repeat(3,minmax(0,1fr))"]` のような
      属性セレクタは使わない — sections-bim.php:114（モック内の小さな
      サムネ3枚）が同一ファイル内で**文字列まで同じ**指定を持っており、
      まとめて撃つと絵が壊れる。

   触っていないもの（意図的）:
     - sections-quality.php のカルーセル（grid-auto-columns + overflow-x:auto）
     - hero-*.php の中（900px以下では非表示なので直しても見えない）
     - mock-*.php の中（擬似テーブルを1列にすると表に見えなくなる）
   ============================================================ */

@media (max-width: 900px) {
	/* 価値カード3up。既存の .tk-sold__othergrid と同じ 3→2→1 の段階に揃える。 */
	.tk-sold__g3 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

	/* 画像＋本文の2カラム（法令の活用事例パネル・関連ニュース）。 */
	.tk-sold__split,
	.tk-sold__newscard { grid-template-columns: minmax(0, 1fr) !important; }
	/*
	 * 1列になったら、画像枠の縦線を下線に振り替える（オーナー 2026-09-19・指摘表124行）。
	 * 本番 /regulations/ の regulations.css:@860px と同じ切り替え。
	 * 付けないと**1列なのに右端に縦線が残る**（375px 実測で border-right 1px）。
	 *
	 * 🚨 !important が要る。相手はテンプレート側のインライン
	 *   （border-right と min-height を直書きしている）。
	 * ⚠️ 本番のしきい値は 860px だがこちらは既存の 900px を使う。
	 *   このファイルは「900px と 600px だけ」と決めてある。
	 */
	.tk-sold__newsmedia {
		border-right: 0 !important;
		border-bottom: 1px solid #EAEAEA !important;
		min-height: 200px !important;
	}

	/* 3段フロー。間に 40px の矢印トラックがあるので、畳んだら矢印を縦に向ける。 */
	.tk-sold__flow3 { grid-template-columns: minmax(0, 1fr) !important; row-gap: 4px; }
	.tk-sold__flow3 > div:nth-child(even) { padding: 6px 0; }
	.tk-sold__flow3 > div:nth-child(even) svg { transform: rotate(90deg); }
}

@media (max-width: 600px) {
	.tk-sold__g3,
	.tk-sold__g2,
	.tk-sold__fig { grid-template-columns: minmax(0, 1fr) !important; }

	/* カード内フローの矢印も縦に。 */
	.tk-sold__fig > div:nth-child(2) svg { transform: rotate(90deg); }

	/*
	 * 関連ニュースカードは .sec-w を使わず width:calc(100% - 80px) で自前の
	 * ガターを持っている。base.css が 600px 以下でガターを 20px に詰めるので、
	 * ここも合わせないとこのカードだけ 40px 内側にずれる。
	 * padding ではなく width なので .tk-gutter を付けても直らない。
	 */
	.tk-sold__newscard { width: calc(100% - 40px) !important; }

	/*
	 * 法令の工程レール4ピル。1列に畳むと連結線が宙に浮くので 2×2 にして、
	 * 線と丸（各ボタンの2・3番目の span）を隠す。タブとしては生きたまま。
	 */
	.tk-sold__rail { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; row-gap: 12px; }
	.tk-sold__rail > button { grid-template-rows: auto !important; }
	.tk-sold__rail > button > span:nth-of-type(2),
	.tk-sold__rail > button > span:nth-of-type(3) { display: none; }

	/*
	 * 帯リンク3箇所（bim / data / law）の余白だけ。
	 * **1列に畳む指定は base.css に移した**（2026-09-19。オーナー指示で
	 * platform / workspace の帯も同じ扱いになったため）。ここに残しているのは
	 * ソリューション詳細だけ余白を詰めているから。
	 */
	.tk-sold .tk-banner { padding: 24px 22px !important; }
}

/*
 * 🚫 直さないと決めた箇所 — モック内部の文字切れ（2026-09-19）
 *
 * data の解決カードは 900px 以下で .tk-sold__stepmedia の実幅が 267px
 * （デスクトップ約503pxの53%）になる。中のモックは font-size を px 直書きし、
 * text-overflow:ellipsis を多用しているので、片端から省略記号になる。
 *
 * 直さない理由: 親が aria-hidden="true" の純装飾で、v3 自身も同じ条件で
 * 省略する。隠すと7本中5本のモバイルから図版が全部消えるほうが損。
 * 恒久対応は mock-*.php を hero-*.php と同じコンテナクエリ（cqw）表現に
 * 移すことだが、それは別作業。
 */

@media (max-width: 600px) {
	/*
	 * /solutions/custom-ai-apps/ の「すぐに使えるTektome提供アプリ」カード。
	 * 横並びの flex で、右のボタン（.tk-btn-t）が flex:none。375px では
	 * 本文側の列が 19px まで痩せて1行1文字になっていた。縦に積む。
	 * gap と align-items はインラインにあるので !important が要る。
	 */
	.tk-sold__mepcard {
		flex-direction: column;
		align-items: flex-start !important;
		gap: 24px !important;
	}
}

@media (max-width: 600px) {
	/*
	 * 知見活用のカルーセル矢印。v3 は left/right:-22px でトラックの外に
	 * 出しているが、これは .sec-w のガターが 40px ある前提。base.css が
	 * 600px 以下でガターを 20px に詰めるので、-22px だと 2px だけ画面の外へ
	 * 出てページに横スクロールが生まれる（375px / 320px とも実測 2px）。
	 * 狭い画面ではトラックの内側に寄せる。
	 */
	.tk-sold [data-tk-prev].tk-carobtn { left: 0 !important; }
	.tk-sold [data-tk-next].tk-carobtn { right: 0 !important; }
}