@import url('Common.css');
@import url('library.css');
@import url('Spinner.css');

form {
  margin-bottom: 100px;
}
table {
  width: 70%;
  border-collapse: collapse;
  border: 1px solid rgb(85, 85, 85);
  margin: 50px 20%;
  table-layout: fixed;
  background-color: #FFF;
}
th {
  border: 1px solid rgb(85, 85, 85);
  text-align: center;
  color: rgb(51, 51, 51);
  height: 2rem;
  padding: 0px;
  font-weight: normal;
  width: 30%;
}
input {
    width: 100%;
    height: 100%;
    border: none;
    padding: 0 1rem;
    font-size: 1rem;
}
select {
  font-size: 1rem;
  width: 50%;
}
select[name="gijutsu"] {
  width: 70%;
}
.no {
  width: 5%;
}
.edit {
  width: 10%;
}
.gijutsu {
  width: 20%;
}
.menuname {
  width: 40%;
}
.kingaku {
  width: 10%;
}
.keisaijikan {
  width: 6%;
}
.syoyoujikan {
  width: 6%;
}
.grey {
  background-color: #EEE;
}
.keisai {
  width: 5%;
}
.delete {
  width: 5%;
}
td {
  border: 1px solid rgb(100, 100, 100);
  height: 2rem;
  width: 70%;
}

.keisaitd,
.deletetd {
  text-align: center;
}
.gray {
  background-color: #ccc;
}

.kaisetsu {
  height: 100px;
}
textarea {
  height: 100%;
  width: 100%;
  font-size: 1rem;
  border: none;
}
.button-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
.photo-flex {
  width: 100%;
  height: 100%;
  display: flex ;
  align-items: flex-start ;
  gap: 24px ;
}
.photo-preview-area {
  display: flex ;
  flex-direction: column ;
  align-items: center ;
  gap: 8px ;
}
.library-btn {
  min-width: none;
  max-width: none;
  height: 1.6rem;	
  margin: 0.5rem;
  background: var(--sub-color);
  color: #fff ;
  border: none ;
  border-radius: 4px ;
  font-size: 1rem ;
  font-weight: bold ;
  padding: 3px ;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08) ;
  cursor: pointer ;
  transition: background 0.2s ;
}
.library-btn:hover {
  filter: saturate(1.2) brightness(1.2);
}
.menu-photo-img {
  height: 150px ;
  box-shadow: 0 4px 16px rgba(0,0,0,0.10) ;
  object-fit: cover ;
  margin-bottom: 4px ;
}
.photo-name {
  width: 180px ;
  height: auto;
  font-size: 0.95rem ;
  color: #555 ;
  background: #f7f7f7 ;
  border: 1px solid #ddd ;
  border-radius: 6px ;
  padding: 4px 8px ;
  text-align: center ;
  box-sizing: border-box ;
  margin-top: 4px ;
}
@media screen and (max-width: 767px) {

  table {
    width: 96%;
    margin: 10px 2%;
  }
  .kaisetsu {
    border: none;
    height: 150px;
  }
  input, .kaisetsu {
     background: transparent;
  }
  #bunrui {
    width: 70%;
  }
  .photo-tr {
    height:   90px;
  }
  .btn {
    width: 10rem;	
    height: 2rem;	
    margin: 0 0 0 auto;
    background-color: #F5F;	
    line-height: 2.2rem;	
    color: rgb(255, 255, 255);	
    text-align: center;
    border-radius: 0.15rem;
    cursor: pointer;
  }
}