@charset "UTF-8";

/*フォントの読み込み*/
@import url('https://fonts.googleapis.com/css2?family=Teko&display=swap');

.ff-teko {
	font-family: 'Teko', sans-serif;
}

html,
body {
	height: 100%;
	/*background-color: #f5f5f5; もともと*/
	/*background-color: #03273C;*/
	background-color: #043857;
	color: #333333;
}

header {
	position: absolute;
}

main {
	margin-top: 100px;
	padding: 4rem 2rem 2rem;
}

@media (max-width: 992px) { 
	main {
	  padding: 1rem .5rem .5rem;
	}
  }

footer {
	position: absolute;
}

.bg-template {
	background-color: #f5f5f5;
}

/* .errormsg {
	color: rgb(255 85 85);
	padding: 1rem;
	background-color: rgba(255, 255, 255, 0.05);
	border-radius: 8px;
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
} */


/* スピナーを消す */
.no-spin::-webkit-inner-spin-button,
.no-spin::-webkit-outer-spin-button {
	-webkit-appearance: none !important;
	margin: 0 !important;
	/* -moz-appearance: textfield !important; */
}

input[type="number"] { 
	-moz-appearance:textfield; 
  } 

/* table, */
/* td, */
/* th { */
/*   border: 1px #333333 solid; */
/*   margin: 0.25rem; */
/*   padding: 0.2rem; */
/* } */

/* thead, */
/* th { */
/*   background-color: #99cc99; */
/*   text-align: center; */
/*   table-layout: fixed; */
/* } */

.bg-nav,
nav.navbar-bg-green {
	background-color: #BDFCBD;
}

a {
	cursor: pointer;
}

.btn-disabled {
	cursor: default;
	pointer-events: none;
}

.invalid-input {
	background-color: #ecd9d9;
	animation: input-flash 1.5s infinite linear;
}

@keyframes input-flash {
	50% {
		background-color: #ffffff;
	}
}

/*ヘッダー*/
.bg-navbar {
	width: 88%;
	/*background-color: rgba(255, 255, 255, 0.25);*/
	background-color: rgba(67, 106, 129, 0.6);
	/* border-radius: 25px; */
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	color: #FFFFFF;
}

.hover-navbar {
	position: relative;
}

.hover-navbar::before {
	background: #B0C44E;
	border-radius: 3px;
	content: '';
	width: 100%;
	height: 5px;
	position: absolute;
	left: 0px;
	bottom: -4px;
	margin: auto;
	transform-origin: center top;
	transform: scale(0, 1);
	transition: transform .1s;
}

.hover-navbar:hover::before {
	transform-origin: center top;
	transform: scale(1, 1);
}

/* ログアウトボタン 文字位置調整*/
.btn-text {
	padding: 7px 0 5px;
}

/*bootstrap拡張（暫定）*/
.btn-primary-ex {
	/*会社カラーの水色に変更*/
	background-color: #45BEDA;
	border: none;
}

.btn-secondary-ex {
	/*ログアウトボタン*/
	border-radius: 15px;
	border: none;
	background-color: #03273C;
}

.disabled-ex {
	/*未実装機能のグレー化（休暇申請・日報）*/
	filter: brightness(75%);
	opacity: 50%;
}

#navbarSupportedContent {
	overflow: auto;
}

@media (min-width: 1400px) { 
	#navbarSupportedContent {
		overflow: visible;
	}
}
/* ================================================
   ヘッダー拡張：上下左右に透明の当たり範囲を追加
   ================================================ */
.fixed-top::after {
  content: '';
  position: absolute;
  top: -30px;    /* 上方向30px広げる */
  left: -30px;   /* 左方向30px広げる */
  right: -30px;  /* 右方向30px広げる */
  bottom: -50px; /* 下方向10px広げる */
  z-index: 1000; /* ヘッダーより上に配置（クリック等には影響しない） */
  background: transparent;
  pointer-events: none; /* 通常操作に干渉しない */
}