/*　Borderのclass */
.border-bottom {
  border-bottom: 1px solid #EEEEEE;
}

.border-right {
  border-right: 1px solid #EEEEEE;
}

.text-border {
  text-align: center;
  width: 110px;
  height: 27px;
  font-size: 15px;
  background-color: #BEE3F8;
  align-self: center;
}

.text-border-cyan {
  text-align: center;
  width: 110px;
  height: 27px;
  font-size: 15px;
  background-color: #C4F1F9;
  align-self: center;
}

.black-border {
  border: 1px solid black;
}

.shadow-border {
  border: 1px solid #a9a9a9;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  width: 100%;
}

.grid-border {
  width: 100%;
  font-size: 18px;
  background-color: #FEFCBF;
}


/* displayのclass */
.flex {
  display: flex;
}


/* paddingのクラス */
.p-1 {
  padding: 1em;
}

/* textのclass */
.text-center {
  text-align: center;
}

.title-text {
  color: rgb(59 130 246 / 1);
  font-weight: 650;
  line-height: 1.5rem;
  font-size: 1.0rem;
}


.vertical-text {
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}


/* backGroundColorのclass */
.bg-50 {
  background-color: RGBA(0, 0, 0, 0.04);
}

.bg-cyan{
  background-color: #f0ffff;
}

/* widthのclass */
.w-full {
  width: 100%;
}

/* height */
.h-full {
  height: 100vh;
}

/* overFlowのクラス */
.overflow-hidden {
  overflow: hidden;
}

.overflow-y {
  overflow-y: scroll;
}

.overflow-x-hidden {
  overflow-x: hidden;
}

/* alignのclass */
.align-self-center {
  align-self: center;
}

/* scroll禁止class */
.no-scroll {
  position: fixed;
  left: 0;
  right: 0;
  top: 50px;
  bottom: 0;
}

/* marginのclass */
.m-1 {
  margin: 4px;
}

.m-2 {
  margin: 8px;
}

.m-3 {
  margin: 12px;
}

.m-4 {
  margin: 16px;
}

.m-5 {
  margin: 20px;
}

/* inputのclass */
.form-input:focus {
  border: 1px solid #2D3748;
}

.form-input {
  border: 1px solid #2D3748;
  color: #000000 !important;
  height: 27px !important;
  border-radius: 0 !important;
}

.form-input:hover {
  border: 1px solid #2D3748;
}

.disabled-form {
  height: 27px !important;
  width: 85px;
  border: 1px solid #A0AEC0 !important;
  background-color: #A0AEC0 !important;
  color: #000000 !important;
  border-radius: 0 !important;
}

.form-select {
  border: 1px solid #2D3748;
  color: #000000 !important;
  height: 27px !important;
  border-radius: 0 !important;
  width: 85px;
}

/* textAreaのclass */
.border-textarea {
  border: 1px solid #000000;
  width: 900px;
}

/* buttonのclass */
.modal-btn {
  height: 27px;
  border-radius: 2px;
  background-color: #A0AEC0;
  color: black;
}


/* footerのclass */
.fixed-footer {
  height: 40px;
  background-color: #CBD5E0;
  width: 100%;
  bottom: 0;
  position: fixed;
}

/* justifyのclass */
.justify-center {
  justify-content: center;
}

/* tabのclass */
.tabs ul {
  display: block;
  text-align: left;
  -webkit-flex-direction: column;
  flex-direction: column;
  border-bottom-color: transparent !important;
}


.border-body {
  border: 1px solid #bdbdbd; 
  border-radius: 5px; 
  background-color: #ffffff;
}

.radio-text {
  font-weight: 700; 
  font-size: 18px; 
}

.page-title {
  font-size: 28px;
  font-weight: 600;
  color: RGBA(0, 0, 0, 0.48);
}

.page-sub-title {
  font-size: 18px;
  font-weight: 600;
  color: RGBA(0, 0, 0, 0.48);
}

.table-th{
  background-color: #3182CE;
  color: #ffffff;
  padding: 3px !important;
  border: 1px solid #ffffff !important;
}

.table-td{
  font-weight: 700; 
  color: RGBA(0, 0, 0, 0.64);
  vertical-align: middle;
}

.color-white {
  color: #ffffff;
}


.input-form {
    border: 1px solid RGBA(0, 0, 0, 0.48);
    border-radius: 3px;
    padding: 5px;
}

.input-form:focus {
    outline: solid 2px #90CDF4;
}

@media screen and (max-width: 480px) {
  /* 480px以下に適用されるCSS（スマホ用） */
  .sp-width {
    width: 100% !important;
  }
}