/*
 * 製品トップ（template-platform.php）— /products/tektome/
 *
 * Claude Design v3 の Platform LP（prototype 985-1692）より。
 * セクションの見た目はプロトタイプのインライン style がそのまま移植されているので、
 * ここにあるのは「インラインに置けないもの」だけ:
 *   - 状態（data-active / [hidden]）に応じた見え方
 *   - tk-ui.js の select / carousel が前提にする構造
 *   - プロトタイプに無いブレークポイント
 */

/* ============================================================
   縦タブ（AIエージェント・知能基盤）
   ============================================================
   プロトタイプは class を差し替えて状態を表していた（wsCls0 = "ws-tab active"）。
   移植では data-active 属性に寄せてある（TK-UI-SPEC §4-A）。初期状態は PHP が書き、
   JS は触らない。JSが落ちてもパネル1枚は読める。
   ============================================================ */

.ws-tab {
	display: flex;
	align-items: center;
	gap: 11px;
	width: 100%;
	text-align: left;
	background: transparent;
	border: 1px solid #EAEAEA;
	border-radius: 8px;
	padding: 14px 16px;
	font-family: inherit;
	font-size: 14px;
	color: #3A3A45;
	cursor: pointer;
	transition: background 120ms, border-color 120ms, color 120ms;
}
.ws-tab:hover {
	background: #F4F4F4;
}
.ws-tab[data-active="true"] {
	background: #ECECFC;
	border-color: #5156BE;
	color: #101010;
	font-weight: 600;
}

.ws-dot {
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: #C7C7D0;
	flex-shrink: 0;
	transition: background 120ms;
}
.ws-tab[data-active="true"] .ws-dot {
	background: #5156BE;
}

/*
 * パネルは position:absolute; inset:0 を**インラインで**持っている（移植元のまま）。
 * [hidden] は既定で display:none だが、インラインの display:flex のほうが強い。
 * base.css の [hidden]{display:none !important} がそれを潰している前提。
 * ここで重ねて宣言しているのは、このファイル単体で読んでも理由が分かるようにするため。
 */
.ws-pane[hidden],
.ds-pane[hidden] {
	display: none !important;
}

.ws-fade {
	animation: tk-in 240ms cubic-bezier(.2, .8, .2, 1);
}
@media (prefers-reduced-motion: reduce) {
	.ws-fade {
		animation: none;
	}
}

/* ============================================================
   カルーセル（Tektomeでできること・導入事例）
   ============================================================
   プロトタイプは transform を状態からインラインで組み立てていた
   （agTrackStyle = translateX(-N%)）。tk-ui.js の paged モードが同じことをするので、
   インラインは捨てて構造だけ渡す。
   ============================================================ */

.tk-track {
	display: flex;
	transition: transform 520ms cubic-bezier(.2, .8, .2, 1);
}
@media (prefers-reduced-motion: reduce) {
	.tk-track {
		transition: none;
	}
}

.tk-page {
	flex: 0 0 100%;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
.tk-casegrid {
	align-items: stretch;
}

/* ドットはプロトタイプではインライン style で幅と色を出し分けていた。 */
.tk-dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: #C7C7D0;
	cursor: pointer;
	transition: width 200ms cubic-bezier(.2, .8, .2, 1), background 200ms;
}
.tk-dot[data-active="true"] {
	width: 24px;
	background: #5156BE;
}

/* スクリーンリーダー専用。ドットに「Nページ目」を持たせるため。 */
.tk-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* カード全体をリンクにしたので、下線と文字色を殺しておく。 */
.tk-agcard,
.tk-casecard {
	color: inherit;
	text-decoration: none;
}

/*
 * 🚨 v3 のインライン指定が丸ごと落ちていた（オーナー指摘 2026-09-19・指摘表30行
 *   「カードデザインが表示抉れを起こしている」）。
 *
 * v3: padding:28px; background:#fff; display:flex; flex-direction:column;
 * 移植ではクラスだけが残り、**padding が 0** でアイコンも本文も枠線に密着し、
 * border-radius:8px が角で食い込んでいた。
 *
 * 傍証: カード内の <p> に flex:1 が書いてあるのに、親が flex でないので効いて
 * いなかった。display:flex が落ちた証拠。背景は .tk-card が既に持っている。
 *
 * ⚠️ 上の規則は .tk-casecard と共有だが、**こちらは .tk-agcard だけ**。
 *   事例カードは別の作りで padding を自前で持っている。
 */
.tk-agcard {
	padding: 28px;
	display: flex;
	flex-direction: column;
}

/* ============================================================
   プロトタイプに無かったもの
   ============================================================ */

/*
 * .tk-cta-col はプロトタイプでは style-hover 疑似属性でホバーしていた。
 * 実ブラウザでは効かないので CSS に起こす。
 *
 * 🚨 background はここで持つこと。**テンプレート側のインラインに戻さないこと。**
 *   2026-09-19 まで template-platform.php が inline で background:#5156BE を
 *   持っており、インラインはクラス規則に勝つので**下の :hover は一度も
 *   発火していなかった**。CSS は書いてあるのに効かない、という形の死に方なので
 *   気づきにくい。同じ理由で、v3 が style-hover を付けている要素は
 *   インラインにその property を残さないこと。
 */
.tk-cta-col {
	background: #5156BE;
}
.tk-cta-col:hover {
	background: #4348B0;
}

/*
 * 2カラムのセクションが3つ（AIエージェント・知能基盤・活用支援サービス）
 * インラインで grid-template-columns:1fr 1fr を持っており、
 * **プロトタイプにはブレークポイントが1つも無い**。狭い画面で潰れるので畳む。
 * インラインに勝つ必要があるため !important を使っている。
 */
@media (max-width: 900px) {
	.tk-pg .sec-w[style*="1fr 1fr"] {
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 40px !important;
	}
	.tk-page {
		grid-template-columns: repeat(2, 1fr);
	}
}

/*
 * AIエージェント / 知能基盤の2カラム — 並びの作り方
 * ------------------------------------------------------------------
 * 子は3つで、**DOM は必ず「テキスト → 画像 → ボタン」の順**。
 *
 *   .pf-split__text  見出し・リード・タブ
 *   .pf-split__fig   タブが切り替える画像の枠
 *   .pf-split__cta   「〜の詳細を見る」
 *
 * 狭い画面（上の 900px で1カラムになる）ではこの DOM 順がそのまま読み順になり、
 * 「見出し → リード → タブ → 画像 → ボタン」で並ぶ。
 * **タブは画像を切り替えるコントロールなので、画像より先に来る必要がある**
 * （オーナー指示 2026-09-19。以前は知能基盤だけ画像が見出しより前にあり、
 *   タブを押しても変わった先が画面外だった）。ボタンが画像の下なのも同じ指示。
 *
 * 広い画面では下の明示配置で v3 の見た目に戻す。v3 は2つのセクションで
 * 画像の左右を**互い違い**にしている（AIエージェントは右、知能基盤は左）ので、
 * DOM 順とは一致しない。auto 配置に任せると知能基盤が左右反転する。
 *
 * ⚠️ ボタンとテキストの間隔 28px は、以前インラインの margin-top:28px だった。
 *   グリッドの子になったので row-gap に移してある。インラインの gap:64px に
 *   勝つ必要があるため !important（列の 64px はそのまま残る）。
 */
@media (min-width: 901px) {
	.ws-select,
	.ds-select { row-gap: 28px !important; }

	.ws-select .pf-split__text { grid-column: 1; grid-row: 1; }
	.ws-select .pf-split__fig  { grid-column: 2; grid-row: 1 / span 2; }
	.ws-select .pf-split__cta  { grid-column: 1; grid-row: 2; }

	/* 知能基盤は画像が左。DOM 順と逆になる。 */
	.ds-select .pf-split__text { grid-column: 2; grid-row: 1; }
	.ds-select .pf-split__fig  { grid-column: 1; grid-row: 1 / span 2; }
	.ds-select .pf-split__cta  { grid-column: 2; grid-row: 2; }
}

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

/*
 * 「Tektomeの利用イメージ」の4ステップ（.pf-steps / template-platform.php）
 * ------------------------------------------------------------------
 * プロトタイプは grid-template-columns:repeat(4,1fr) をインラインで持つだけで、
 * ここにもブレークポイントが無い（v3 も 375px では同じように壊れる）。
 *
 * 1fr = minmax(auto,1fr) なので、各セルの min-content（左右 28px の padding ＋
 * 見出しの最小幅）が下限として効いてしまい、375px でもセルは 119px から縮まない。
 * 4×119 + gap = 482px がコンテナ 295px からはみ出し、外側の overflow:hidden に
 * 切られる ——「04」「成果と知見を活用」とその説明文が右で消えていたのはこれ。
 * つまり (A) のソースカードと同じ「横並びの数が固定のまま」という一つの原因。
 *
 * 列数を減らすだけでなく minmax(0,1fr) にしているのが肝で、これを 1fr に戻すと
 * 2カラムでも min-content 下限が残り、狭い端末で再び右がはみ出す。
 * セルの grid-row:span 3 / grid-template-rows:subgrid はそのままで、
 * 折り返した先の暗黙の行に対しても subgrid は成立する（行の高さ揃えも保たれる）。
 *
 * インラインに勝つ必要があるため !important。901px 以上は一切触っていないので
 * デスクトップの4カラムは元のまま。
 */
@media (max-width: 900px) {
	.pf-steps {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}
@media (max-width: 600px) {
	.pf-steps {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}

/*
 * DataSpace「SOURCE」カードのバッジ＋ファイル名の行（.ds-srcrow）
 * ------------------------------------------------------------------
 * 3枚のカードが repeat(3,minmax(0,1fr)) で横並びのまま縮むため、375px では
 * カード内の実効幅が 61px ほどしかない。その中で PDF / IFC / DOCX バッジが
 * 33px を占め、残り 22px に white-space:nowrap のファイル名が入らず、
 * text-overflow:ellipsis で「仕…」まで削られていた（必要幅 35〜55px）。
 *
 * 直し方はブレークポイントではなく flex-wrap:wrap。バッジと同居できない幅に
 * なった時だけファイル名が次の行に落ち、カード幅いっぱい（61px）を使える。
 * 「BIMモデル」の 55px もこれで収まる。
 *
 * メディアクエリを使わないのは、デスクトップではそもそも折り返し点に到達しない
 * ため（1200px 時のカード内実効幅は 134px で、最長のラベルでも 55px）。
 * つまりこの1行はデスクトップでは何もしない。逆に nowrap や ellipsis を消すと
 * 「1行に収めて溢れたら省略」という v3 の意図まで壊れるので、そちらは残してある。
 *
 * 残課題: 320px（iPhone SE 初代クラス）ではカード内が 41px しか無く、
 * 「BIMモデル」「議事メモ」は折り返してもまだ省略される。ただし v3 のままだと
 * 同じ 320px でラベル幅は 0〜3px（＝完全に消える）ので、改善ではある。
 * 根治するには .sec-w の左右 40px 固定パディングを狭い画面で詰める必要があり、
 * それは共有の base.css なのでここでは触っていない。
 */
.ds-srcrow {
	flex-wrap: wrap;
}

/*
 * 「Tektomeでできること」の見出し行（.pf-sechead / template-platform.php:500）
 * ------------------------------------------------------------------
 * 見出しと「すべてのソリューションを見る」を justify-content:space-between で
 * 左右に置く行。ボタン側は v3 が flex-shrink:0 と white-space:nowrap を
 * 持っているので**絶対に縮まない**。375px では行の内側が 295px しかないのに
 * ボタンだけで 240px あり、見出し＋gap 48px と並べられずに右へ飛び出して
 * **ページ全体に横スクロールを作っていた**（375px のビューポートで文書幅 434px）。
 *
 * このページで文書を広げていたのはこの1要素だけ。他のはみ出しは全て
 * 祖先の overflow:hidden に収まっており、文書幅には影響していなかった
 * （2026-09-19 実測。unclipped な要素はこれ1件のみ）。
 *
 * flex-wrap:wrap だけにしてメディアクエリを付けていないのは、入り切らない時
 * だけ折り返す自己完結した指定だから。デスクトップでは折り返し点に到達しない。
 * 戻すと 375px で横スクロールが復活する。
 */
.pf-sechead {
	flex-wrap: wrap;
}

/*
 * そのボタンを**カルーセルの下**へ回す（オーナー指摘 2026-09-19）。
 *
 * 折り返した結果、ボタンがリード文の真下に来ていた。指摘は「スマホビュー」
 * だったが、実測すると**そこだけではない**:
 *
 *   見出しブロック 720px ＋ gap 48px ＋ ボタン 240px = 1008px
 *   1280px（内側1120）折り返さない ／ 1024px（内側944）折り返す
 *   → しきい値は内側 1008px ＝ ビューポート 1088px（＋ガター80）
 *
 * ボタンは .pf-sechead の中、カルーセルはその兄弟なので、**order だけでは
 * 親をまたげない**。display:contents で .pf-sechead の箱を消し、中身を
 * .ag-carousel の直接の子として並べ替える。
 * 結果の並び: 見出し → カルーセル → ドット → ボタン。
 *
 * ⚠️ display:contents にすると .pf-sechead のインライン
 *   `gap:48px; margin-bottom:40px;` が**効かなくなる**（箱が消えるため）。
 *   見出し下の 40px は子側に付け替えてある。外すと見出しとカルーセルが密着する。
 *
 * ⚠️ ボタンの align-self:flex-start は必須。縦フレックスの子は既定で伸びるので、
 *   無いと 240px のボタンが全幅になる。
 *
 * 🚨 1088px は実測値。見出しの文言が変わると動く。丸めて 1080px にすると
 *   1081〜1088px でボタンがリード文の下に残る。
 *
 * DOM を動かさないのは、デスクトップの右上配置を組み直さずに済ませるため。
 * 1089px 以上はこの規則が一切効かない。
 */
@media (max-width: 1088px) {
	.ag-carousel {
		display: flex;
		flex-direction: column;
	}
	/*
	 * 🚨 !important が要る。相手はテンプレート側のインライン
	 *   `style="display:flex; justify-content:space-between; …"`。
	 *   無いと箱が消えず、order も効かない（2026-09-19 実測で一度踏んだ）。
	 */
	.ag-carousel > .pf-sechead {
		display: contents !important;
	}
	.ag-carousel > .pf-sechead > div {
		margin-bottom: 40px;
	}
	.ag-carousel > .pf-sechead > a {
		order: 99;
		align-self: flex-start;
		margin-top: 24px;
	}
}

/*
 * 狭い画面で1列に畳む多列グリッド（.pf-stack / template-platform.php）
 * ------------------------------------------------------------------
 * 対象は4つ。いずれも v3 がインラインで列数を固定していて、375px でも
 * その列数を保ったまま中身だけが潰れる。**テキストは切れないので
 * 「はみ出し」の検査には引っかからない**が、実測での箱幅はこうなっていた:
 *
 *   449行  1fr auto        → 83px / 159px
 *   700行  repeat(3,1fr)   → 85px × 3
 *   779行  repeat(2,1fr)   → 137px / 122px（「資料ダウンロード」が 29px）
 *   805行  repeat(3,1fr)   → 99px / 105px / 99px（カード内の文字は 34px）
 *
 * 470行（repeat(3,1fr); gap:20px）も同じ印を付けてある。こちらは 98px で
 * 潰れ判定（90px未満）は通っていたが、隣の 805行と同種・同幅なので揃えた。
 *
 * .sec-w を 20px ガターに詰めた（base.css）あとも変わらなかったので、
 * 余白ではなく列数そのものが原因。601px 以上は v3 のまま。
 */
@media (max-width: 600px) {
	.pf-stack {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}

/* ============================================================
   汎用AIとの違い（template-vs-general.php）の比較表タブ
   ============================================================
   プロトタイプは色をインラインで毎回組み立てていた（t.fg / t.border）。
   状態が2箇所に散るので、data-active に寄せて CSS 側に1本化してある。
   ============================================================ */

.vs-tab {
	padding: 12px 2px;
	margin-bottom: -1px;
	border: 0;
	border-bottom: 2px solid transparent;
	background: transparent;
	color: #6B6B76;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	min-height: 44px;
	transition: color 120ms cubic-bezier(0.2, 0.8, 0.2, 1),
	            border-color 120ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.vs-tab:hover {
	color: #101010;
}
.vs-tab[data-active="true"] {
	color: #5156BE;
	border-bottom-color: #5156BE;
}

/* グリッドのセルなので、隠すときは行ごと流れから外す必要がある。 */
.vs-cell[hidden] {
	display: none !important;
}

/* ============================================================
   汎用AIとの違い — 狭い画面（オーナー指摘 2026-09-19・指摘表154〜157行）
   ============================================================
   4件とも「はみ出していないのに読めない＝列が潰れる型」。375px の実測:

     154 5つの要点   96px / 77px / 122px（9セルが90px未満）
     155 タブ3つ     102+128+171 = 401px に対し箱は 335px → 2段
     156 比較表      200px / 67.5px / 67.5px → 本文が1行3文字
     157 カード3枚   101px ずつ

   横スクロール検査（実際に scrollLeft を動かす方式）は全部 0 を返す。
   ⚠️ どれも列指定が**インライン**なので、打ち消しには !important が要る。
   ============================================================ */

/*
 * 156 — 比較表だけ横スクロールさせる（オーナーの指定どおり）。
 *
 * メディアクエリが無いのは意図的。min-width が効くのは箱が 620px を割った
 * ときだけで、デスクトップ（箱 1200px）の見た目は1pxも変わらない。
 * 620px = 先頭列 200px ＋ 本文2列 210px。
 *
 * ⚠️ 680px（本文240px）にすると **700px のタブレットでも 60px スクロールする**。
 *   そこは元々潰れていない（実測 200/210/210）ので、スクロールが出るのを
 *   実際に壊れていた幅だけに留めるため 620px にしてある。下げないこと。
 */
.vs-table {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	/* スクロール領域はキーボードでも動かせる必要がある（tabindex="0" とセット）。 */
	scrollbar-width: thin;
}
.vs-table:focus-visible {
	outline: 3px solid #5156BE;
	outline-offset: 3px;
}
.vs-table__grid {
	min-width: 620px;
}

/*
 * 155 — タブをプルダウンに差し替える。
 *
 * 見た目は [data-tk-tabselect] で共有している（ai-agent のエージェント選択でも使う）。
 * 出し分けだけがページごと — 比較表は 600px、ai-agent は 900px。
 *
 * 🚨 タブとプルダウンは**両方 DOM に残す**こと。
 *   tk-ui.js の data-tk-tabselect は両方が居る前提で状態を同期している
 *   （プルダウンで選ぶ → タブの data-active も動く → セルが入れ替わる）。
 *   どちらかを PHP 側で消すと、その画面幅で表が切り替わらなくなる。
 */
[data-tk-tabselect] {
	display: none;
	width: 100%;
	margin-bottom: 24px;
	min-height: 46px;
	padding: 12px 42px 12px 14px;
	border: 1px solid #DEDEF9;
	border-radius: 8px;
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235156BE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 14px 14px;
	-webkit-appearance: none;
	appearance: none;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	color: #101010;
	cursor: pointer;
}
[data-tk-tabselect]:focus-visible {
	outline: 3px solid #5156BE;
	outline-offset: 2px;
}

@media (max-width: 600px) {
	/* インラインの display:flex に勝つ必要がある。 */
	.vs-tabs {
		display: none !important;
	}
	.vs-tabselect {
		display: block;
	}

	/*
	 * 154 — 数字と見出しを横並びにし、リード文をその下へ（オーナーの指定どおり）。
	 * 3列目の <p> を1〜-1 に伸ばして2行目に落とす。
	 */
	.vs-point {
		grid-template-columns: auto minmax(0, 1fr) !important;
		gap: 0 16px !important;
		align-items: center !important;
	}
	.vs-point > :first-child {
		font-size: 36px !important;
	}
	.vs-point > p {
		grid-column: 1 / -1;
		margin-top: 14px !important;
	}
}

/* ---------------------------------------------------------------------------
 * 締めのグラデーション帯（`/products/tektome/` と `/services/`）
 *
 * インラインの `padding:64px 56px` が**どの幅でも変わらない**ため、狭い画面で
 * 中身が細りすぎていた（実測: 320px で 168px、375px で 223px。
 * /services/ はここにフォームが入るので、姓・名の欄が各46pxまで潰れた）。
 *
 * 🚨 打ち消す相手は**テンプレート側のインライン**なので !important が要る。
 * 🚨 このCSSは platform / innovation の両方が読む。片方だけ直すと
 *    同じ部品が2つの余白を持つことになるので、クラスで両方に効かせている。
 * ------------------------------------------------------------------------ */
@media (max-width: 600px) {
  .tk-gradband { padding: 48px 28px !important; }
}
@media (max-width: 400px) {
  .tk-gradband { padding: 40px 20px !important; }
}