@charset "UTF-8";
/* ------------------------------------------------------------
 * 企業情報取得 画面スタイル
 *
 * Bootstrap 5 (CDN) の上に、Rin テーマのフォント指定と配色を適用する。
 *   フォント: Open Sans + 游ゴシック(Rin の指定をそのまま使用)
 *   配色    : primary #3b9ae0 / success #b2cf3e / info #a4a9cf
 *             warning #f0ba32 / danger #ea4b94 / 本文 #333
 * アイコンは AdminBSB と同じ Material Icons(Google Fonts)を使用する。
 * ------------------------------------------------------------ */

/* Windows の游ゴシックは Regular が細く表示されるため、Rin と同じく Medium を割り当てる */
@font-face {
	font-family: "Yu Gothic";
	font-weight: 100;
	src: local("Yu Gothic Medium");
}
@font-face {
	font-family: "Yu Gothic";
	font-weight: 200;
	src: local("Yu Gothic Medium");
}
@font-face {
	font-family: "Yu Gothic";
	font-weight: 300;
	src: local("Yu Gothic Medium");
}
@font-face {
	font-family: "Yu Gothic";
	font-weight: 400;
	src: local("Yu Gothic Medium");
}
@font-face {
	font-family: "Yu Gothic";
	font-weight: bold;
	src: local("Yu Gothic Bold");
}

/* ------------------------------------------------------------
 * Bootstrap 変数の上書き(Rin の配色)
 * ------------------------------------------------------------ */
:root {
	--rin-primary: #3b9ae0;
	--rin-primary-dark: #2081c8;
	--rin-primary-light: #ebf5fc;
	--rin-success: #b2cf3e;
	--rin-success-dark: #94af2b;
	--rin-info: #a4a9cf;
	--rin-info-dark: #8389bd;
	--rin-warning: #f0ba32;
	--rin-warning-dark: #dfa410;
	--rin-danger: #ea4b94;
	--rin-danger-dark: #e51d79;
	--rin-text: #333;
	--rin-muted: #777;
	--rin-border: #ddd;

	--bs-font-sans-serif: "Open Sans", "Helvetica Neue", Helvetica, "Arial", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
	--bs-body-color: var(--rin-text);
	--bs-body-color-rgb: 51, 51, 51;
	--bs-body-bg: #f5f5f5;
	--bs-body-line-height: 1.5;
	--bs-border-color: var(--rin-border);
	--bs-link-color: var(--rin-primary);
	--bs-link-color-rgb: 59, 154, 224;
	--bs-link-hover-color: var(--rin-primary-dark);
	--bs-link-hover-color-rgb: 32, 129, 200;
	--bs-primary: var(--rin-primary);
	--bs-primary-rgb: 59, 154, 224;
	--bs-success: var(--rin-success);
	--bs-success-rgb: 178, 207, 62;
	--bs-info: var(--rin-info);
	--bs-info-rgb: 164, 169, 207;
	--bs-warning: var(--rin-warning);
	--bs-warning-rgb: 240, 186, 50;
	--bs-danger: var(--rin-danger);
	--bs-danger-rgb: 234, 75, 148;
	--bs-focus-ring-color: rgba(59, 154, 224, .25);
}

/* 見出しは Rin と同じく細めのウェイトで表示する */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	font-weight: 300;
}

/* ボタン(Bootstrap 5 のボタンは個別の変数を持つため直接上書きする) */
.btn-primary {
	--bs-btn-bg: var(--rin-primary);
	--bs-btn-border-color: #3295df;
	--bs-btn-hover-bg: var(--rin-primary-dark);
	--bs-btn-hover-border-color: var(--rin-primary-dark);
	--bs-btn-active-bg: var(--rin-primary-dark);
	--bs-btn-active-border-color: var(--rin-primary-dark);
	--bs-btn-disabled-bg: var(--rin-primary);
	--bs-btn-disabled-border-color: var(--rin-primary);
	--bs-btn-focus-shadow-rgb: 59, 154, 224;
}
.btn-outline-primary {
	--bs-btn-color: var(--rin-primary);
	--bs-btn-border-color: var(--rin-primary);
	--bs-btn-hover-bg: var(--rin-primary);
	--bs-btn-hover-border-color: var(--rin-primary);
	--bs-btn-active-bg: var(--rin-primary);
	--bs-btn-active-border-color: var(--rin-primary);
	--bs-btn-focus-shadow-rgb: 59, 154, 224;
}
.btn-outline-secondary {
	--bs-btn-color: var(--rin-text);
	--bs-btn-bg: #fff;
	--bs-btn-border-color: #ccc;
	--bs-btn-hover-color: var(--rin-text);
	--bs-btn-hover-bg: #e6e6e6;
	--bs-btn-hover-border-color: #adadad;
	--bs-btn-active-color: var(--rin-text);
	--bs-btn-active-bg: #e6e6e6;
	--bs-btn-active-border-color: #adadad;
}

/* フォーム部品(プルダウン・入力欄・ボタン)の文字は、一覧の文字(13px)に対して大きすぎないよう 14px にする
 * (DataTables の件数選択・絞り込みは既定で 14px のため、それに揃える) */
.c-card .form-select,
.c-card .form-control,
.c-card .btn,
.dt-button-collection .dropdown-item {
	font-size: .875rem;
}

/* フォーム部品の選択色・フォーカス色 */
.form-select:focus,
.form-control:focus {
	border-color: #9ccdf0;
	box-shadow: 0 0 0 .25rem rgba(59, 154, 224, .25);
}

/* バッジ・アラート(Rin の淡色アラートに寄せる) */
.text-bg-warning {
	color: #fff !important;
}
.alert-success {
	--bs-alert-color: var(--rin-success-dark);
	--bs-alert-bg: #f3f8e1;
	--bs-alert-border-color: #f1f3cd;
}
.alert-warning {
	--bs-alert-color: var(--rin-warning-dark);
	--bs-alert-bg: #fefaf0;
	--bs-alert-border-color: #fcecd8;
}
.alert-danger {
	--bs-alert-color: var(--rin-danger-dark);
	--bs-alert-bg: #fff;
	--bs-alert-border-color: #fce8f5;
}

/* Material Icons を文字と並べたときの位置合わせ */
.material-icons {
	font-size: 1.25em;
	line-height: 1;
	vertical-align: -.25em;
}

/* ------------------------------------------------------------
 * レイアウト
 * ------------------------------------------------------------ */
.l-header {
	box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
}
.l-header__brand {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	color: var(--rin-text);
	font-weight: 300;
}
.l-header__brand .material-icons {
	color: var(--rin-primary);
	font-size: 1.75rem;
	vertical-align: middle;
}
.l-main {
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
}
.l-footer {
	padding: 1rem 0;
	color: var(--rin-muted);
	font-size: .8125rem;
}
.l-footer__copyright {
	margin: 0;
}

/* ------------------------------------------------------------
 * コンポーネント
 * ------------------------------------------------------------ */
/* 取得条件・取得結果のカードは白地にする
 * (カード・テーブル・固定列は既定で --bs-body-bg を背景に使うため、カード内だけ白に置き換える) */
.c-card {
	--bs-body-bg: #fff;
	--bs-card-bg: #fff;
	--bs-table-bg: #fff;
	background-color: #fff;
	border-color: #eee;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
}
.c-card__header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	background: #fff;
	font-weight: 600;
}
.c-card__header > .material-icons {
	color: var(--rin-primary);
}
.c-card__meta {
	margin-left: auto;
	color: var(--rin-muted);
	font-weight: 400;
}
.c-form__label {
	font-weight: 600;
}
.c-form__label .material-icons {
	color: var(--rin-primary);
	margin-right: .125rem;
}
.c-button {
	display: inline-flex;
	align-items: center;
	gap: .25rem;
	padding-left: 1.25rem;
	padding-right: 1.5rem;
}
.c-alert {
	display: flex;
	gap: .5rem;
}
/* 帯のアイコン(警告・フィルタ)は、隣の「・」「▶」の見た目の中心より約3px上に描かれるため、その分下げる */
.c-alert > .material-icons {
	position: relative;
	top: .15em;
}
.c-alert__list {
	margin: 0;
	padding-left: 1.25rem;
}
/* 除外した企業の一覧(クリックで開閉する) */
.alert-info {
	--bs-alert-color: var(--rin-primary-dark);
	--bs-alert-bg: var(--rin-primary-light);
	--bs-alert-border-color: #ccecf7;
}
.c-excluded {
	flex-grow: 1;
}
.c-excluded > summary {
	cursor: pointer;
}
.c-excluded__table {
	--bs-table-bg: transparent;
	margin: .75rem 0 0;
	font-size: .8125rem;
}
.c-empty {
	margin: 0;
	color: var(--rin-muted);
}

/* 集計結果のサマリー */
.c-summary {
	display: flex;
	align-items: center;
	gap: 1rem;
	height: 100%;
	padding: 1rem 1.25rem;
	border-radius: .375rem;
	background: #fff;
	border-left: 4px solid var(--rin-primary);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
}
.c-summary__icon {
	font-size: 2.25rem;
	color: var(--rin-primary);
	vertical-align: middle;
}
.c-summary__label {
	margin: 0;
	color: var(--rin-muted);
	font-size: .8125rem;
}
.c-summary__value {
	margin: 0;
	font-size: 1.5rem;
	font-weight: 300;
}
.c-summary.is-success {
	border-left-color: var(--rin-success);
}
.c-summary.is-success .c-summary__icon {
	color: var(--rin-success);
}
.c-summary.is-info {
	border-left-color: var(--rin-info);
}
.c-summary.is-info .c-summary__icon {
	color: var(--rin-info);
}
.c-summary.is-warning {
	border-left-color: var(--rin-warning);
}
.c-summary.is-warning .c-summary__icon {
	color: var(--rin-warning);
}

/* 集計結果の一覧(行の背景の白・薄い灰色の交互表示はテンプレートの table-striped で行う) */
.c-table {
	font-size: .8125rem;
	white-space: nowrap;
}
.c-table > thead > tr > th {
	min-width: 5.5rem;
	max-width: 9rem;
	white-space: normal;
	vertical-align: middle;
	background: var(--rin-primary-light);
	color: var(--rin-primary-dark);
	font-weight: 600;
}
/* ○× は Open Sans に字形が無く小さく表示されるため、日本語フォントで大きめに表示する */
/* 見出しは中央揃えにし、並べ替えアイコンは常に右端へ置く
 * (DataTables は数値列の見出しを flex-direction: row-reverse にしてアイコンを左へ回すため、上書きする) */
.c-card table.dataTable thead > tr > th {
	/* 見出しの背景色(Rin の淡い青)。Bootstrap と FixedColumns(固定列)はどちらも --bs-table-bg でセルを塗るため、変数ごと置き換える */
	--bs-table-bg: var(--rin-primary-light);
	background-color: var(--rin-primary-light);
	text-align: center;
	/* DataTables はテーブルを border-collapse: separate にするため、行(tr)の罫線が描画されない。見出しのセルに上下の罫線を引く */
	border-top: var(--bs-border-width) solid var(--bs-border-color);
}
/* FixedColumns の「最終行(tr:last-child)の下罫線を消す」指定が見出し行にも当たるため、詳細度を上げて下罫線を引く */
.c-card table.dataTable.table-bordered thead > tr > th {
	border-bottom: var(--bs-border-width) solid var(--bs-border-color);
}
/* 一覧の行の区切り線。各行の下に罫線を引き、罫線が二重にならないよう以下は除く
 *   先頭行の上: 見出し行の下罫線がある
 *   最終行の下: 一覧の枠(div.dt-scroll-body)の下罫線がある */
.c-card table.dataTable.table-bordered > tbody > tr > td {
	border-top-width: 0;
	border-bottom: var(--bs-border-width) solid var(--bs-border-color);
}
.c-card table.dataTable.table-bordered > tbody > tr:last-child > td {
	border-bottom-width: 0;
}
/* 一覧の行(本文)の縦幅を広げる。見出し行(thead)は対象外とし、table-sm の余白のままにする */
.c-card table.dataTable > tbody > tr > td {
	padding-top: .5rem;
	padding-bottom: .5rem;
}
.c-card table.dataTable thead > tr > th div.dt-column-header {
	flex-direction: row;
	align-items: center;
}
.c-card table.dataTable thead > tr > th div.dt-column-header .dt-column-title {
	text-align: center;
}
.c-card table.dataTable thead > tr > th div.dt-column-header .dt-column-order {
	flex-shrink: 0;
}
.c-table td.is-on,
.c-table td.is-off {
	font-family: "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
	font-size: 1rem;
	line-height: 1;
}
.c-table td.is-on {
	color: var(--rin-primary);
	font-weight: 700;
}
.c-table td.is-off {
	color: #aaa;
}
.c-table .badge {
	/* Bootstrap のバッジは周りの文字の 0.75 倍(約10px)で小さいため、12px にする */
	font-size: .75rem;
	font-weight: 600;
}
/* 制限内のバッジ(緑)。Rin の success(#b2cf3e)は白文字が読みにくいため、Rin の濃い緑を使う */
.c-table .badge.c-badge-within {
	color: #fff;
	background-color: #728621;
}

/* DataTables の操作部品 */
/* 「件ずつ表示」「絞り込み:」の文字は、隣の件数選択・絞り込みの入力欄(14px)に揃える */
div.dt-container .dt-length label,
div.dt-container .dt-search label {
	font-size: .875rem;
}
/* 「n 件中 1 から 100 まで表示」の文字は一覧の文字(13px)に揃える */
div.dt-container .dt-info {
	font-size: .8125rem;
}
div.dt-container .dt-buttons .btn {
	display: inline-flex;
	align-items: center;
	gap: .25rem;
}
div.dt-container .dt-layout-row {
	margin-bottom: .5rem;
}
/* ページネーションは件数表示の次の行に中央揃えで表示する */
div.dt-container .dt-layout-full:has(.dt-paging),
div.dt-container .dt-paging {
	display: flex;
	justify-content: center;
	width: 100%;
}

/* 取得中の表示 */
.c-loading {
	position: fixed;
	inset: 0;
	z-index: 2000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, .8);
}
.c-loading[hidden] {
	display: none;
}
.c-loading__inner {
	text-align: center;
}
.c-loading__text {
	margin: 1rem 0 0;
	color: var(--rin-muted);
}