@charset "UTF-8";
/****************************************************************************************
 * 
 * デザイン関連全画面共通CSS
 *  
 * 原則デザインに関するクラスはこちらから使用する
 * 当ファイルに記述のないクラスは個人のCSSで記述する
 *
 ****************************************************************************************/

:root {
  --color-background:#C6ECE8;			/* コンテンツ表示画面背景色 */
}


/***************************
    全画面共通設定クラス
****************************/

/* フォントサイズ 極小 */
.f-xs{
	font-size: x-small;
}

/* フォントサイズ 小 */
.f-s{
	font-size: small;
}

/* フォントサイズ 中 */
.f-m{
	font-size: medium;
}

/* フォントサイズ 大 */
.f-l{
	font-size: large;
}

/* フォントカラー 白 */
.f-white{
	color:#FFFFFF;
}

/***************************
      背景色設定クラス
****************************/

/* 背景色セット */
.bg-color{
	 background-color: #F6F6F6;
}

/***************************
   タイトルクラス
****************************/

/* ページ見出しクラス */
.title-set{
	font-size: 1.5rem;
	font-weight: bold;
	color: #008B8B;
}

/* ページサブ見出しクラス */
.subtitle-set{
	font-size: medium;
	font-weight: bold;
	color: #008B8B;
}
/***************************
   ヘッダークラス
****************************/
.hedder-name-link{
	color:#FFFFFF;
	text-decoration: none;
	cursor: pointer;
}
.hedder-name-link:after{
	content: '';
	background-image: url("../img/headlink-name.svg");
	width: 30px;
	height: 13px;
	margin-left: 3px;
	display: inline-block;
	background-size: contain;
	background-repeat: no-repeat;
}

/***************************
   ボーダーレスクラス
****************************/

/* ボーダー線 削除クラス */
.non-border{
	border: none;
}
/*
	次の項目で適用すること
	・プルダウンリスト
	・テキストボックス
*/

/***************************
    ボタンクラス
****************************/

/*▼検索ボタンは以下を使用する */

.btn-search{
	font-size: medium;
	font-weight: bold;
	color: #FFFFFF;
	background-color: #008B8B;
	border: 0.11rem solid #008B8B;
	border-radius: 0;
	padding: 0.3rem 1rem;
	width:6rem;
}

/* ボタン色装飾（ホバー時） */
.btn-search:hover {
	color:#008B8B;
	background-color: #FFFFFF;
	border-color:#008B8B;
}

/* ボタン色装飾（フォーカス時） */
.btn-search:focus {
	color:#008B8B;
	background-color: #FFFFFF;
	border-color:#008B8B;
	outline:0;
	box-shadow:#008B8B;
}

/* ▼その他ボタンは以下を使用すること */

/* ボタン色装飾 */
.btn-custom{
	font-size: medium;
	font-weight: bold;
	color: #FFFFFF;
	background-color: #008B8B;
	border: 0.11rem solid #008B8B;
	border-radius: 0;
	padding: 0.3rem 1rem;
	width: 10rem;
}

/* ボタン色装飾（ホバー時） */
.btn-custom:hover {
	color:#008B8B;
	background-color: #FFFFFF;
	border-color:#008B8B;
}

/* ボタン色装飾（フォーカス時） */
.btn-custom:focus {
	color:#008B8B;
	background-color: #FFFFFF;
	border-color:#008B8B;
	outline:0;
	box-shadow:#008B8B;
}

/***************************
    フォーカスクラス
****************************/

.form-select:focus{
	border-color:#66CDDD;
	outline:0;
	box-shadow:0 0 0 0.25rem #66CDDD;
}

.form-control:focus{
	border-color:#66CDDD;
	outline:0;
	box-shadow:0 0 0 0.25rem #66CDDD;
}

/***************************
    テーブルクラス
****************************/

/* 要素共通セット */
 table, th, td{
	 border-collapse: collapse;
	 border:solid 0.15rem #E0E0E0;
 }
 
 td{
	 background-color: #FFFFFF;
 }

/* ヘッダーカラー装飾 */
.th-custom{
	color:#FFFFFF;
	background-color:#008B8B;
}

/* コンテンツカラー装飾 */
.td-custom{
	padding-left: 3px;
	background-color:#FFFFFF;
}

/* ▼ 以下カレンダー表示専用クラス */

/* 曜日表示クラス（ヘッダー） */
.th-week-color{
	color:#FFFFFF;
	background-color:#008B8B;
}
/* 土曜日表示クラス（ヘッダー） */
.th-saturday{
	color:#FFFFFF;
	background-color:#78B7D0;
}

/* 日曜日表示クラス（ヘッダー） */
.th-sunday{
	color:#FFFFFF;
	background-color:#EF857D;
}

/* 表示なし日付クラス */
.td-blank-days{
	background-color:#EFEFEF;
}

/* 土曜日表示クラス */
.td-saturday{
	color:#0000FF;
}

/* 日曜日表示クラス */
.td-sunday{
	color:#FF0000;
}

/***************************
  テーブル内アイテムクラス
****************************/

.tbl-item{
	border-color: rgb(255, 255, 255);
	border-width: 1px;
	height: 100%;
}

.tbl-item:focus-visible{
	background-color: #FAFAD2;
/*	border-color:#008B8B;*/
	outline:0;
	box-shadow:#008B8B;
	border:none;
}

/***************************
    研修予約状況クラス
****************************/

/* 予約表示カラーセット */
.p-reservation-color {
	 color:#FFFFFF;
	 background-color:#96C9F4;
}
.p-reservation-color-btn {
	 color:#FFFFFF;
	--bs-btn-hover-color: #E6EBF0;
	--bs-btn-active-border-color: #00000000;
}

 /* 確定表示カラーセット */
.reservation-color {
	color: #FFFFFF;
	background-color: #FF9843;
}
.reservation-color-btn {
	color: #FFFFFF;
	--bs-btn-hover-color: #FFD5A4;
	--bs-btn-active-border-color: #00000000;
}

 /* 開催済み表示カラーセット */
.already-held-color {
	color: #FFFFFF;
	background-color: #CE653F;
}
.already-held-color-btn {
	color: #FFFFFF;
	--bs-btn-hover-color: #FFD5A4;
	--bs-btn-active-border-color: #00000000;
}

/* キャンセル表示カラーセット */
.cancel-color {
	color: #FFFFFF;
	background-color: #ff0000;
}
.cancel-color-btn {
	color: #FFFFFF;
	--bs-btn-hover-color: rgb(255, 187, 187);
	--bs-btn-active-border-color: #00000000;
}

/* 申込受付中表示カラーセット */
.reserve-accepting {
	color: white;
	background-color: #347928;
}
.reserve-accepting-btn {
	color: white;
	--bs-btn-hover-color:#C8D9C5;
	--bs-btn-active-border-color: #00000000;
}

/* 開催中止表示カラーセット */
.reserve-close {
	color: white;
	background-color: gray;
}
.reserve-close-btn {
	color: white;
	--bs-btn-hover-color: lightgray;
	--bs-btn-active-border-color: #00000000;
}

/* 満員表示カラーセット */
.reserve-full {
	color: white;
	background-color: #AF1740;
}
.reserve-full-btn {
	color: white;
	--bs-btn-hover-color: #E0B1BE;
	--bs-btn-active-border-color: #00000000;
}

/* 空き表示カラーセット */
.vacancy-color {
	color: #FFFFFF;
	background-color: rgb(128, 128, 128);
}