/* フォームセットのコンテナ */
#formset-container {
    display: flex;            /* 横並びに配置 */
    flex-wrap: nowrap;        /* フォームが次の行に折り返さない */
    overflow-x: auto;         /* 横スクロールを可能に */
    gap: 10px;                /* カード間の余白 */
    margin-bottom:10pt;       /*ボタンとのギャップ設*/
  }

  /* 画像カード 個別の画像入力フォーム*/
  .image-card {
    position: relative; /* ★ 星をこの中で絶対配置できるようにする */
    flex: 0 0 auto;           /* 子要素が自動的に横並び */
    width: 200px;             /* カードの幅 */
    border: 1px solid #000000;   /* 枠線 */
    border-radius: 5px;       /* 角丸 */
    padding: 10px;            /* 内側の余白 */
    text-align: center;       /* テキストを中央揃え */
    background: #fff;         /* 背景色 */
  }
  
  /* サムネイル画像 */
  .thumbnail {
    max-width: 100%;          /* 幅を100%に */
    height: auto;             /* 高さを自動調整 */
    border-radius: 5px;       /* 角丸 */
  }
  .image-preview{
    cursor: pointer;
  }
  
  /* 画像なしの場合 */
  .no-image {
    font-size: 12px;
    color: gray;
  }
  /* フォーム入力エリア */
  .form-input {
    margin-top: 5px;          /* 入力フィールドの上に余白 */
  }
  /* 画像入力フォームが並ぶ部分　全体 */
  .form-image {
    max-width: 100%;              /* フォームの幅を広げる */
    margin-top: 10pt;
  
  }
  
  /*チェックボックス　ゴミ箱アイコンの位置*/
  .form-input-check {
    align-items: center; 
    gap: 0px; 
  }
  
  .form-input-check label {
    margin: 0;
    white-space: nowrap; 
  }
  
  .form-input-check input[type="checkbox"] {
    margin: 0; 
  }
  
  
  .custom-select {
    background-image: url(/static/images/css_images/arrow.svg);
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
  
  }
  
  .form-row{
    margin-top :1pt
  }
  
  
  .btn-camera{
    width:45%;
  }
  .btn-folder{
    width:45%;
  }
  
  .trash-icon-label {
    cursor: pointer;
    font-size: 1.5em;
  }
  
  .form-icon:hover {
    color: red;
  }
  
  .unchecked {
    color: gray;
  }
  
  .checked {
    color: red;
  }
  
  .reset-btn {
    display: flex;
    padding:0.0rem;
    align-items: center;
    gap: 0px; /* アイコンと文字の間隔 */
    font-size: 1rem; /* ボタンの文字サイズ */
  }
  
  .reset-btn i {
    color: #777777;
    font-size: 1.2rem; /* アイコンのサイズ */
    margin-top:5px;
  }
  
  .field-label {
    display: flex;
    align-items: center;
    justify-content: flex-start;  /* 左揃えでも中央でも指定できます */
  }
  .detail-star {
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 1.2rem;
    z-index: 10;
}
.field-box {
  min-height: 80px;
  border-color: #000000!important;  /* 枠の色を淡い青に設定 */
}
.field-value {
  white-space: pre-wrap;
  min-height: 1.5em;
  max-width: 100%;       /* はみ出さないように */
  overflow: auto;        /* 横スクロール表示 */
  white-space: nowrap;   /* 折り返さずに1行で表示 */
}

.toggle-button-4 {
  display: flex;
  align-items: center;
  position: relative;
  width: 100px;
  height: 40px;
  border-radius: 50px;
  box-sizing: content-box;
  background-color: #7a7a7a33;
  cursor: pointer;
  transition: background-color .4s;
}

.toggle-button-4:has(:checked) {
  background-color: #75bbff33;
}

.toggle-button-4::before {
  position: absolute;
  left: 9px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #7a7a7a;
  content: '';
  transition: left .4s;
}

.toggle-button-4:has(:checked)::before {
  left: 55px;
  background-color: #75bbff;
}

.toggle-button-4::after {
  position: absolute;
  left: 26px;
  transform: translateX(-50%);
  color: #fff;
  font-weight: 600;
  font-size: .7em;
  content: 'OFF';
  transition: left .4s;
}

.toggle-button-4:has(:checked)::after {
  left: 71px;
  content: 'ON';
}

.toggle-button-4 input {
  display: none;
}

.btn-label {
  background-color: #9c00b1; /* 基本色（紫） */
  color: white;
  border-color: #9c00b1;
}
/* ホバー時のスタイル */
.btn-label:hover {
  background-color: #6e017c; /* ホバー時は青系に */
  border-color: #6e017c;
}
.btn-label.btn-primary:active {
  background-color: #6e017c;
  border-color: #6e017c;
}

.btn-pdf {
  background-color: #00b13b; 
  color: white;
  border-color: #00b13b;
}
/* ホバー時のスタイル */
.btn-pdf:hover {
  background-color: #00882d;
  border-color: #00882d;
}
.btn-pdf.btn-primary:active {
  background-color: #00882d;
  border-color: #00882d;
}
.btn-small {
    font-size: 0.75rem;
    padding: 5px 10px;
    margin-bottom: 0;
}

/* カテゴリ帯 */
.image-category {
    position: absolute;
    top: 0;
    left: 0;
    padding: 2px 6px;
    font-size: 0.85rem;
    color: #fff;
    background: rgba(0,0,0,0.6);
    border-bottom-right-radius: 6px;
    z-index: 2;
}