@import url('Common.css');
@import url('Teikyubi.css');
@import url('Spinner.css');
@import url('Progress.css');

#target {
 width: 100%;	
}
#unsavedWarning {
    transition: opacity 0.5s ease;
    opacity: 1;
}
#unsavedWarning.hidden {
    opacity: 0;
}
#target table {
 display: none;
 border-collapse: collapse;	
 border: 1px solid rgb(85, 85, 85);	
 margin: 10px 3%;	
 table-layout: fixed;
 background-color: #FCFCFC;
 width: 50%;	
}
#target th {
 border: 1px solid rgb(85, 85, 85);	
 text-align: center;	
 background-color: rgb(255, 238, 252);	
 color: rgb(51, 51, 51);	
 height: 2rem;	
 width: 7rem;	
 padding: 0px;	
 font-weight: normal;	
}
td {
 border: 1px solid rgb(100, 100, 100);	
 height: 2rem;	
 width: 7rem;	
 text-align: center;	
 line-height: 2rem;	
 padding: 0px;	
 vertical-align: middle;
 line-height: 2rem;
}
.flex {
 width: 100%;    
 display: flex;
 align-items: center; 
 justify-content: center; 	 
}
td input {
    display: inline-block;
    margin: auto;
}
select {
    font-size: 1.2rem;
}
.square {
 display: inline-block;	
 background-color: rgb(51, 68, 255);	
 width: 1rem;	
 height: 1rem;	
}

#syukujitsu-jikan {
    display: none;
    margin-bottom: 4rem;
}
.black-back {
    margin-top: 2rem;
    display: inline-block;
    background-color: rgb(150, 150, 150);
    color: rgb(255, 255, 255);
    margin-bottom: 2rem;
    padding: 0.7rem 1rem; /* 上下左右にパディングを追加 */
    line-height: 1.4;
    max-width: 100%; /* 最大幅を親要素に合わせる */
    box-sizing: border-box; /* パディングを幅に含める */
    white-space: normal; /* テキストを折り返す */
    word-wrap: break-word; /* 長い単語を折り返す */
    text-align: left;
  }
  button.black-back:hover{ 
      filter: saturate(1.1) brightness(1.1);
}
.w0, .w1 {
    width: 10%;	
}
.w3 {
 width: 30%;	
}
.w5 {
    width: 3rem;
}
.w6 {
    width: 4rem;
}

.hozon-box {
    margin-bottom: 100px;
}
.shinsa-hozon {
    width: 12rem;
    height: 2rem;
    line-height: 2rem;
    margin-bottom: 8rem;
    margin: 2rem auto;
    background-color: rgb(255, 120, 255);
    color: white;
    text-align: center;	
    cursor: pointer;
}
.comment {
   text-align: center;
}

@keyframes spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}


@media screen and (max-width: 767px) {

    #target th {
        width: 8rem;
    }
    #target .youbi {
        width: 4rem;
    }
    .w0, .w1 {
        width: 20%;	
    }
    .kobetsu-table-wrap {
        width: 100%;
        overflow: auto;
    }
    #kobetsu-table {
        min-width: 150%;
    }
    #kobetsu-table tr{
        height: 3rem;
    }

}