/* ============================================================
   NCOP ページ専用スタイル
   ------------------------------------------------------------
   ncop/ncop2d.html / ncop/ncop3d.html / ncop/index.html で使用。
   旧 WordPress TCD テーマ（オレンジ #ff7f00 基調・パララックス・
   独自ナビ/フッター）から本サイト標準（白 + ブランドティール
   #0095B4・renderNavi + renderFooter）へ統一するための CSS。
   ============================================================ */

/* ページ本体の中央寄せコンテナ。
   既存の他ページ（dev/sales/profile 等）と同じ max-width:700px
   で本文を中央寄せにし、サイト全体で読みやすさを揃える。 */
.ncop-page {
	width: 100%;
	max-width: 700px;
	margin: 0 auto;
	box-sizing: border-box;
}

/* ヒーロー画像（ページ上部のトップ画像） */
.ncop-page__hero {
	display: block;
	width: 100%;
	max-width: 60%;
	height: auto;
	margin: 16px auto 24px;
	border-radius: 8px;
	border: 0;
}

/* ページ大見出し（製品名） */
.ncop-page__title {
	margin: 0 0 16px;
	font-size: 32px;
	font-weight: bold;
	color: #00708A;
	text-align: center;
	letter-spacing: 0.02em;
	line-height: 1.4;
}

/* ページのリード文（製品の短い説明） */
.ncop-page__lead {
	margin: 0 0 32px;
	font-size: 17px;
	color: #555555;
	text-align: center;
	line-height: 1.8;
}

/* セクション見出し（.section-title）の基底スタイルは common.css に
   集約済み。NCOP ページではセクション間に十分な余白が欲しいので
   margin だけ上書きする（common 版は 0 0 15px 0、NCOP は 24px
   上下に拡張）。 */
.section-title {
	margin: 24px 0 16px;
}

/* レスポンシブな動画埋め込み（YouTube 等の iframe を 16:9 で
   親幅にフィットさせる）。aspect-ratio で高さが自動計算される。 */
.ncop-video {
	width: 100%;
	max-width: 700px;
	margin: 0 auto 24px;
	aspect-ratio: 16 / 9;
	box-sizing: border-box;
	border-radius: 8px;
	overflow: hidden;
	background: #000;
}

.ncop-video iframe {
	width: 100%;
	height: 100%;
	border: 0;
}

/* 導入事例・補足説明用のテキスト */
.ncop-page__example {
	margin: 0 0 24px;
	padding: 0 16px;
	font-size: 16px;
	line-height: 1.7;
	text-align: center;
}

/* 推奨スペック表（<dl> で OS / CPU / メモリ / カメラを並べる）。
   旧来は背景＋枠で囲っていたが、シンプルさを優先して素のグリッド
   に。さらに justify-content:center で「dt + dd のペアの集まり」
   そのものを画面中央に配置する（auto auto なので各列は内容幅に
   フィット）。ユーザーフィードバック反映。 */
.ncop-page__specs {
	display: grid;
	grid-template-columns: auto auto;
	gap: 6px 16px;
	justify-content: center;
	margin: 0 0 24px;
	padding: 0;
	box-sizing: border-box;
}

.ncop-page__specs dt {
	margin: 0;
	font-weight: bold;
	color: #00708A;
	text-align: right;
}

.ncop-page__specs dd {
	margin: 0;
	color: #333333;
	text-align: left;
}

/* カタログ PDF リンク一覧（・ 先頭文字は ::before で生成） */
.ncop-page__catalog {
	list-style: none;
	margin: 0 0 24px;
	padding: 0 16px 0 40px;
}

.ncop-page__catalog li {
	position: relative;
	padding-left: 16px;
	margin-bottom: 6px;
	line-height: 1.6;
}

.ncop-page__catalog li::before {
	content: "・";
	position: absolute;
	left: 0;
	top: 0;
}

/* カタログ一覧の中央寄せモディファイア
   （ncop/index.html の「使用デプスセンサ」のように、
   PDF へのリンクではなく単純な項目列挙を中央に並べたい用途） */
.ncop-page__catalog--center {
	padding-left: 0;
	text-align: center;
}

.ncop-page__catalog--center li {
	padding-left: 0;
}

/* 中央寄せ版では先頭の「・」は不要（行ごとに浮いて見苦しいため） */
.ncop-page__catalog--center li::before {
	content: none;
}

/* 補足注意書き（公社支援対象の文言など） */
.ncop-page__note {
	margin: 24px 0;
	padding: 12px 16px;
	font-size: 12px;
	color: #666666;
	text-align: center;
	line-height: 1.6;
	border-top: 1px solid #E3E7EA;
	border-bottom: 1px solid #E3E7EA;
}

/* お問い合わせ CTA ボタン（hero の CTA と同じトーンの大きめ
   ピル型ティール塗りボタン） */
.ncop-page__cta {
	margin: 32px 0;
	text-align: center;
}

.ncop-page__cta-button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 32px;
	background: #0095B4;
	color: #FFFFFF;
	font-size: 16px;
	font-weight: bold;
	border-radius: 999px;
	box-shadow: 0 2px 6px rgba(0, 149, 180, 0.25);
	transition: background 0.15s ease, transform 0.15s ease,
	            box-shadow 0.15s ease;
}

.ncop-page__cta-button:hover {
	background: #00708A;
	color: #FFFFFF;
	text-decoration: none;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0, 149, 180, 0.35);
}

/* ============================================================
   NCOP シリーズ 概要ページ（ncop/index.html）専用
   ------------------------------------------------------------
   トップで Ncop2D / Ncop3D のサブページへ誘導するリンクカード、
   使用例（用途別）8 カードグリッド、設置方法 2 種類の紹介、
   などの構造を含む。
   ============================================================ */

/* Ncop2D / Ncop3D のリンクカード行（PC は 2 列、スマホは 1 列） */
.ncop-product-links {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
	margin: 24px 0;
}

.ncop-product-link {
	display: block;
	padding: 20px;
	background: #FFFFFF;
	border: 1px solid #CFE6EC;
	border-radius: 8px;
	text-align: center;
	color: inherit;
	text-decoration: none;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.ncop-product-link:hover {
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
	transform: translateY(-1px);
	color: inherit;
	text-decoration: none;
}

.ncop-product-link__title {
	margin: 0 0 8px;
	font-size: 22px;
	font-weight: bold;
	color: #0095B4;
}

.ncop-product-link__desc {
	margin: 0;
	font-size: 14px;
	color: #555555;
	line-height: 1.6;
}

/* 使用例（用途別カード一覧）。PC は 3 列、スマホは 1 列に */
.ncop-usecase__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin: 0 0 24px;
}

.ncop-usecase__item {
	background: #FFFFFF;
	border: 1px solid #E0E0E0;
	border-radius: 8px;
	overflow: hidden;
}

.ncop-usecase__img {
	display: block;
	width: 100%;
	height: auto;
	border: 0;
}

.ncop-usecase__title {
	margin: 0;
	padding: 10px 12px;
	background: #F4FAFB;
	color: #00708A;
	font-size: 15px;
	font-weight: bold;
	text-align: center;
	border-top: 1px solid #E0E0E0;
}

.ncop-usecase__desc {
	margin: 0;
	padding: 12px 14px 14px;
	font-size: 13px;
	color: #333333;
	line-height: 1.6;
}

/* 設置方法（正面置き・上置き）紹介ブロック */
.ncop-placement {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	align-items: center;
	margin: 0 0 24px;
	padding: 20px;
	background: #FFFFFF;
	border: 1px solid #CFE6EC;
	border-radius: 8px;
}

.ncop-placement--reverse {
	grid-template-columns: 1fr 1fr;
}

.ncop-placement--reverse .ncop-placement__text {
	order: 2;
}

.ncop-placement--reverse .ncop-placement__img {
	order: 1;
}

.ncop-placement__title {
	margin: 0 0 8px;
	font-size: 20px;
	font-weight: bold;
	color: #00708A;
}

.ncop-placement__desc {
	margin: 0;
	font-size: 14px;
	color: #333333;
	line-height: 1.7;
}

.ncop-placement__img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
	border: 0;
}

/* 導入事例ブロックの外部リンク（パルコスペースシステムズ等） */
.ncop-case__links {
	list-style: none;
	margin: 12px 0 16px;
	padding: 0;
	text-align: center;
}

.ncop-case__links li {
	margin: 8px 0;
}

.ncop-case__links a {
	display: inline-block;
	font-size: 16px;
	color: #0095B4;
	font-weight: bold;
}

.ncop-case__links a:hover {
	color: #00708A;
}

/* ============================================================
   Ncop3D 専用：ジェスチャーデモブロック
   ------------------------------------------------------------
   各ジェスチャー（ピンチイン/アウト、クリック、つかむ/はなす、
   既存アプリ操作）を「タイトル + イラスト + デモ動画」の 1
   セットとして並べる。
   ============================================================ */
.ncop-gesture {
	margin: 24px 0;
	padding: 20px 16px;
	background: #F4FAFB;
	border: 1px solid #CFE6EC;
	border-radius: 8px;
}

.ncop-gesture__title {
	margin: 0 0 16px;
	font-size: 22px;
	font-weight: bold;
	color: #00708A;
	text-align: center;
	letter-spacing: 0.02em;
}

/* ジェスチャーアイコン画像。
   元画像のアスペクト比が大きく異なる（242x117 / 113x114 /
   365x117）ためそのまま max-width 表示するとサイズがバラバラ
   になっていた。height を固定（100px）に統一し、横幅は aspect
   比でアジャストすることで縦方向の見た目を揃える。
   （ユーザーフィードバック反映） */
.ncop-gesture__img {
	display: block;
	width: auto;
	height: 100px;
	max-width: 280px;
	margin: 0 auto 16px;
	border: 0;
	object-fit: contain;
}

/* ============================================================
   使用するデプスセンサ紹介（Ncop3D / NCOP 概要ページ共通）
   ------------------------------------------------------------
   ロゴ画像 + ラベルのカードを横並びで表示する。
   auto-fit + minmax(200px, 1fr) によりカード枚数に応じて列数が
   自動で決まる（Ncop3D は 2 枚 → 2 列、NCOP 概要は 3 枚 → 3 列）。
   狭画面では minmax の最小値で折返し、最終的に 1 列縦積みになる。
   ============================================================ */
.ncop-sensors {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 16px;
	margin: 0 auto 24px;
}

/* センサーカード本体。Flexbox 縦並びにして名前を上・画像を下に
   配置し、画像の上下方向は等間隔の中央寄せにする。Grid の
   stretch と min-height 140px で 2 枚のカード高さを揃える。
   （ユーザーフィードバック反映） */
.ncop-sensor {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: 140px;
	padding: 16px;
	background: #FFFFFF;
	border: 1px solid #E0E0E0;
	border-radius: 8px;
	text-align: center;
}

.ncop-sensor__name {
	margin: 0;
	font-size: 16px;
	font-weight: bold;
	color: #00708A;
}

/* センサーロゴ画像。元画像のアスペクト比が大きく異なる（4.2 と
   1.78）ため、最大高さ 64px に揃えて視覚的な大きさを統一する。 */
.ncop-sensor__img {
	max-width: 100%;
	max-height: 64px;
	width: auto;
	height: auto;
	border: 0;
	object-fit: contain;
}

/* ============================================================
   Ncop3D 専用：出展告知ブロック（Japan IT Week 春 2021 等）
   ------------------------------------------------------------
   イベント名 + ポスター画像 + 補足説明 + 外部リンクの組。
   ============================================================ */
.ncop-event {
	margin: 24px 0;
	padding: 20px;
	background: #FFFFFF;
	border: 1px solid #CFE6EC;
	border-radius: 8px;
	text-align: center;
}

.ncop-event__img {
	display: block;
	max-width: 280px;
	width: 100%;
	height: auto;
	margin: 0 auto 16px;
	border: 0;
}

.ncop-event__note {
	margin: 0 0 12px;
	font-size: 15px;
	line-height: 1.7;
	color: #333333;
}

.ncop-event__link {
	display: inline-block;
	font-size: 18px;
	font-weight: bold;
	color: #0095B4;
	text-decoration: none;
}

.ncop-event__link:hover {
	color: #00708A;
	text-decoration: underline;
}

/* ============================================================
   スマホ表示（768px以下）：余白圧縮、見出しサイズ縮小、
   推奨スペック表を 1 列にする
   ============================================================ */
@media (max-width: 768px) {
	.ncop-page__title {
		font-size: 24px;
	}

	.ncop-page__lead {
		font-size: 15px;
		padding: 0 16px;
	}

	/* 推奨スペック表はスマホでも 2 列を維持し、中央寄せのまま
	   表示する（justify-content:center は基底のまま）。 */

	.ncop-page__catalog {
		padding-left: 20px;
	}

	.ncop-gesture__title {
		font-size: 18px;
	}

	/* センサー紹介の grid は auto-fit + minmax で自動 1 列化されるため
	   ここでは追加の上書き不要（基底ルールがそのまま機能する）。 */

	/* Ncop2D / Ncop3D リンクカードは 1 列に */
	.ncop-product-links {
		grid-template-columns: 1fr;
	}

	/* 使用例グリッドは 2 → 1 列に */
	.ncop-usecase__grid {
		grid-template-columns: 1fr 1fr;
	}

	/* 設置方法は縦積みに */
	.ncop-placement {
		grid-template-columns: 1fr;
	}
	.ncop-placement--reverse .ncop-placement__text {
		order: 1;
	}
	.ncop-placement--reverse .ncop-placement__img {
		order: 2;
	}
}

@media (max-width: 480px) {
	.ncop-usecase__grid {
		grid-template-columns: 1fr;
	}
}