@charset "UTF-8";

/* ============================================================
   出展者一覧ページ専用スタイル

   common.css / print.css はサイト共通のため、そちらへは追記しない。
   出展者一覧に関するスタイルはこのファイルに集約する。
   共通CSSより後に読み込むこと（index.html の css_import 参照）。
   ============================================================ */
.page__exhibitor__list .category__move__link .link {
	font-size: 0.875rem;
}

/* スマホ幅では折り返しが増えるため小さくする */
@media only screen and (max-width:690px) {
	.page__exhibitor__list .category__move__link .link {
		font-size: 0.7rem;
	}
}

/* ------------------------------------------------------------
   市内事業所の所在区バッジ

   publicity.json の city_office_wards をもとに JS が描画する。
   クラス名（Kawasaki / Saiwai …）は exhibitor-list.js の WARDS の id と対応。
   ------------------------------------------------------------ */
.page__exhibitor__list .campany__detail__container .company__block .company__name__area .company__wards {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin-top: .5em;
}

.page__exhibitor__list .campany__detail__container .company__block .company__name__area .company__wards .ward {
	font-size: .75em;
	font-weight: 700;
	line-height: 1;
	color: #333;
	border: 1px solid #999;
	border-radius: 3px;
	padding: .35em .6em;
}

/* 区ごとの色 */
.page__exhibitor__list .campany__detail__container .company__block .company__name__area .company__wards .ward.Kawasaki {
	color: #0069c7;
	border-color: #0069c7;
}

.page__exhibitor__list .campany__detail__container .company__block .company__name__area .company__wards .ward.Saiwai {
	color: #e6820a;
	border-color: #e6820a;
}

.page__exhibitor__list .campany__detail__container .company__block .company__name__area .company__wards .ward.Nakahara {
	color: #008d3f;
	border-color: #008d3f;
}

.page__exhibitor__list .campany__detail__container .company__block .company__name__area .company__wards .ward.Takatsu {
	color: #6b5ca4;
	border-color: #6b5ca4;
}

.page__exhibitor__list .campany__detail__container .company__block .company__name__area .company__wards .ward.Miyamae {
	color: #c7005a;
	border-color: #c7005a;
}

.page__exhibitor__list .campany__detail__container .company__block .company__name__area .company__wards .ward.Tama {
	color: #00ada7;
	border-color: #00ada7;
}

.page__exhibitor__list .campany__detail__container .company__block .company__name__area .company__wards .ward.Asao {
	color: #a3820a;
	border-color: #a3820a;
}

/* 画面表示は日本語のみ（共通CSSの英語非表示と同じ扱い） */
.page__exhibitor__list .campany__detail__container .company__block .company__name__area .company__wards .ward .en {
	display: none;
}


/* ------------------------------------------------------------
   自治体連携企画カテゴリー

   common.css の他カテゴリーと同じ箇所に色を当てる。
   クラス名 Local は exhibitor-list.js の CATEGORIES の id と対応。
   テーマ色は「支援機関・公的機関等」（Public）と同じ。
   ------------------------------------------------------------ */
.page__exhibitor__list .category__move__link .link.Local {
	background-color: #03aea7;
}

.page__exhibitor__list .campany__list__section .Local .block__title,
.page__exhibitor__list .campany__detail__section .Local .block__title {
	background-color: #e0f1ef;
	border-color: #00ada7;
}

.page__exhibitor__list .campany__detail__container.Local .company__block,
.page__exhibitor__list .campany__detail__container.Local .company__block .company__name__area .company__category,
.page__exhibitor__list .campany__detail__container.Local .company__block.print__support__type .company__name__area {
	border-color: #00ada7;
}

.print__contents__block .print__category__box.cate__Local .category__name {
	background-color: #e0f1ef;
}

/* 注意書き（パネル展示のみ等）。CATEGORIES の noticeJp があるカテゴリーで表示 */
.page__exhibitor__list .campany__detail__container .company__block .company__name__area.has-notice {
	grid-template-columns: 6em 1fr auto;
	align-items: center;
}

.page__exhibitor__list .campany__detail__container .company__block .company__name__area .company__notice {
	font-size: .9em;
	background-color: #f0f0f0;
	border-radius: 1.5em;
	padding: .8em 1.5em;
	margin: 0;
	white-space: pre-line;
}

/* 先頭の記号（※ / *）をぶら下げ、2行目以降を本文の位置に揃える */
.page__exhibitor__list .campany__detail__container .company__block .company__name__area .company__notice .jp,
.page__exhibitor__list .campany__detail__container .company__block .company__name__area .company__notice .en {
	display: block;
	padding-left: 1em;
	text-indent: -1em;
}

.page__exhibitor__list .campany__detail__container .company__block .company__name__area .company__notice .en {
	display: none;
	padding-left: .5em;
	text-indent: -.5em;
}

/* 印刷ボタンが3列のときは「ものづくり・AI・IoT」の下（中央列）に置く */
.print__contents__block .print__category__box.cate__Local {
	grid-column: 2;
}

/* common.css では690px以下で他カテゴリーの上罫線が #333 になるため合わせる */
@media only screen and (max-width:690px) {
	.page__exhibitor__list .campany__detail__container.Local .company__block.print__support__type {
		border-color: #333;
	}

	.page__exhibitor__list .campany__detail__container .company__block .company__name__area.has-notice {
		grid-template-columns: 6em 1fr;
	}

	.page__exhibitor__list .campany__detail__container .company__block .company__name__area .company__notice {
		grid-column: 1 / -1;
		border-radius: 1em;
	}

	/* 印刷ボタンは2列になるため自動配置に戻す（ものづくり・AI・IoT の下に並ぶ） */
	.print__contents__block .print__category__box.cate__Local {
		grid-column: auto;
	}
}


/* ------------------------------------------------------------
   印刷（英語版）
   print.css の print__LangEN と同じ切替をバッジ・注意書きにも適用する。
   ------------------------------------------------------------ */
@media print {
	.page__exhibitor__list .campany__detail__container .company__block .company__name__area .company__notice {
		font-size: .7em;
		padding: .6em 1.2em;
	}

	.page__exhibitor__list.print__LangEN .campany__detail__container .company__block .company__name__area .company__wards .ward .jp {
		display: none;
	}

	.page__exhibitor__list.print__LangEN .campany__detail__container .company__block .company__name__area .company__wards .ward .en {
		display: block;
	}

	.page__exhibitor__list.print__LangEN .campany__detail__container .company__block .company__name__area .company__notice .jp {
		display: none;
	}

	.page__exhibitor__list.print__LangEN .campany__detail__container .company__block .company__name__area .company__notice .en {
		display: block;
	}
}