body {
    font-family:"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体";
}
.fixed-message {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #ffcccc;
    color: #d00;
    padding: 10px;
    text-align: center;
    font-weight: bold;
    border: 2px solid red;
    z-index: 1000; /* 他の要素の上に表示 */
    transform: scale(1); /* ズーム時のスケーリングを防止 */
    transform-origin: top left; /* ズームの基準位置を画面の左上に固定 */
    display: none;
}

form {
    max-width: 800px;
    margin: 80px auto 0 auto;
    padding: 20px;
}
fieldset {
    margin-bottom: 20px;
    padding: 15px;
    border: 1px solid #ccc;
}
legend {
    font-weight: bold;
}
label:not(.checkboxlabel):not(#Mytable *) {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}
.checkboxlabel{
    font-weight: bold;
}

.required-label {
    background-color: #f8d7da;
    color: #721c24;
    padding: 2px 6px;
    margin-left: 8px;
    font-size: 0.8em;
    border-radius: 4px;
}

input:not(.checkbox,[type="button"]):not(#Mytable *), textarea:not(#Mytable *) {
    width: 80%;
    padding: 8px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    z-index: 999;
}

select:not(#Mytable *){
    width: auto;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    height: 100%;
    padding: 6px;
    z-index: 999;
}

.small-input {
    width: 48%;
    display: inline-block;
    margin-right: 4%;
}
.small-input:last-child {
    margin-right: 0;
}
button,input[type="button"] {
    padding: 10px 20px;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button:not(:disabled),input[type="button"]:not(:disabled) {
    background-color: #007BFF;
}

button:not(:disabled):hover, input[type="button"]:not(:disabled):hover {
    background-color: #0056b3;
}


input[type="number"]:read-only, textarea:read-only {
    background-color: lightgray; /* 背景色を薄い灰に */
}

textarea {
    resize: none;
}

#AnnualSalesDiv{
    display: none;
}

button:disabled,input[type="button"]:disabled {
    background-color: #cccccc; /* 灰色にして無効化を視覚化 */
    color: #666666; /* 文字色も薄く */
    cursor: not-allowed; /* カーソルを「禁止」アイコンに */
}

#Mytable input:not([type="checkbox"]) {
    width: 90%;
    border: none;
    outline: none;
    background: transparent;
}

#Mytable label[for] {
    user-select: none;
}

#Mytable textarea {
    resize: none;
    width: 90%;
    overflow: hidden;
    white-space: break-spaces;
    line-break: anywhere;
    border: none;
    outline: none;
    background: transparent;
}

#Mytable {
    width: 3000px;
    height: 1800px;
    table-layout: fixed;
}

#check_div{
    display: flex;
}
#check_div input, #check_div button{
    margin: 0 2px;
}

.upload-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
  
.spinner {
    border: 8px solid #f3f3f3; /* 背景の色 */
    border-top: 8px solid #4caf50; /* 回転する部分の色 */
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite; /* アニメーションを設定 */
}
  
@keyframes spin {
    0% {
      transform: rotate(0deg); /* 開始位置 */
    }
    100% {
      transform: rotate(360deg); /* 完全に回転 */
    }
}
  

@media screen and (max-width: 600px) {
    legend:not(#Mytable),label:not(#Mytable) {
        font-size: 10px;
    }
    span:not(#Mytable){
        font-size: 7px;
    }
    input:not(#Mytable *), select:not(#Mytable *), textarea:not(#Mytable *) {
        font-size: 10px;
        padding: 3px;
    }
    button {
        font-size: 10px;
        padding: 4px 8px;
    }

    th:not(#Mytable *) {
        font-size: 8px;
    }

    #check_div{
        flex-direction: column;
    }
    #check_div input, #check_div button{
        margin: 3px 0;
    }
}