:root {
  /* カラー */
  --primary-color: #f4a502;
  --sub-color: #efefef;
  --accent-color: #4caf50;
  --text-color: #222;
  --error-color: red;
  --sub-color-2: #d9d9d9;
  --background-color: #f1efeb;
  --container-background-color: #fff;
  --border-color: #ddd;
  --link-color: #007bff;
  /* フォント */
  --font-family: "Noto Sans JP", sans-serif;
  --font-size-large: 16px;
  --font-weight-bold: bold;
  --font-size-normal: 14px;
  --font-size-title: 1.2rem;
  --font-size-error: 1rem;
  --font-size-small: 0.9rem;
  --font-size-tiny: 0.8rem;
  /* 余白 */

  --space-xs: 0.25rem;
  /* 4px assuming the base font-size is 16px */
  --space-sm: 0.5rem;
  /* 8px */
  --space-md: 1rem;
  /* 16px */
  --space-lg: 1.5rem;
  /* 24px */
  --space-xl: 2rem;
  /* 32px */
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  /* etc */
  --box-shadow: 0px 0px 10px -5px #777777;
  --border-radius: 0.5rem;
  --opacity-hover: 0.8;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  font-family: var(--font-family);
  font-size: var(--font-size-normal);
  color: var(--text-color);
  line-height: 1.6;
  background: var(--background-color);
  letter-spacing: 0.5px;
}

@media screen and (min-width: 1480px) {
  /* ここにノートパソコン用のスタイルを書きます */
  html,
  body {
    margin: 0 auto;
    width: 1480px;
  }

  .header {
    border-radius: 0 0 var(--border-radius) var(--border-radius);
  }
}

.error-message {
  color: red;
  margin-left: 10px;
  font-size: var(--font-size-small);
  font-weight: normal;
}

.disabled {
  background: #ccc !important;
}

.btn,
.login-button,
.submit-btn,
.cancel-btn,
.white-btn {
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-large);
  font-weight: var(--font-weight-bold);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--border-radius);
  background: var(--primary-color);
  border: none;
  box-shadow: var(--box-shadow);
  cursor: pointer;
  text-decoration: none;
}

.btn:hover,
.function-button:hover,
.login-button:hover,
.submit-btn:hover,
.cancel-btn:hover,
.sidebar-button:hover,
.new-card-btn:hover,
.forgot-link:hover,
.card-btns:hover,
.custom-file-upload:hover,
.pagination-btn:hover,
.region:hover {
  opacity: var(--opacity-hover);
}

.inline {
  display:inline;
}

.white-btn {
  background: #fff;
  color: var(--text-color);
}

.white-btn:hover {
  background: var(--sub-color);
}

.btn-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  justify-content: start;
  align-items: center;
  margin: var(--space-lg) 0;
  gap: var(--space-lg);
}

.card-btns {
  padding: var(--space-xs) var(--space-xs);
  background-color: #fff;
  color: var(--primary-color);
  border: none;
  cursor: pointer;
  font-weight: var(--font-weight-bold);
  text-align: right;
  text-decoration: none;
}

.cancel-btn {
  background-color: var(--sub-color-2);
  color: var(--text-color);
}

.current {
  color: var(--primary-color) !important;
  font-weight: var(--font-weight-bold);
}

.material-symbols-outlined:hover {
  color: var(--primary-color);
}

.process-item.current .material-symbols-outlined {
  color: #fff;
  background-color: var(--primary-color);
}

.process-item.completed {
  color: var(--primary-color);
}

.process-item.completed .material-symbols-outlined {
  color: #fff;
  background-color: var(--primary-color);
}

.process-item.completed:not(:last-child)::after {
  border-color: var(--prime-color);
}

/* ログイン画面  */

.auth-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100vh;
}

.auth-box {
  max-width: 600px;
  width: 100%;
  padding: var(--space-3xl);
  background: var(--container-background-color);
  box-shadow: var(--box-shadow);
  border-radius: var(--border-radius);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.title-container {
  text-align: center;
  margin: 0 auto;
}

.title {
  font-size: var(--font-size-large);
  font-weight: var(--font-weight-bold);
}

b {
  display: block;
  margin: var(--space-md) var(--space-md) 0;
}

.input-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.font-weight-bold {
  font-weight: var(--font-weight-bold);
}

.input-box {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--space-lg);
  gap: var(--space-xs);
}

.login-button {
  text-align: center;
  width: 100%;
  margin: var(--space-lg) 0;
  padding: var(--space-md);
}

.forgot-link {
  color: var(--primary-color);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  text-align: center;
}

/* ログイン画面 ここまで */
/* パスワードリセット */

.text {
  margin: var(--space-sm) 0;
  width: 400px;
}

/* バリデーションメッセージのスタイル */
.error {
  color: var(--error-color);
  font-size: var(--font-size-error);
  margin-top: var(--space-xs);
  margin-bottom: var(--space-md);
}

/* パスワードリセット ここまで */

/* ヘッダーcss */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 var(--space-md);
  height: var(--space-3xl);
  background-color: var(--container-background-color);
  box-shadow: var(--box-shadow);
  z-index: 5;
}

.w200 {
  width: 200px !important;
}

.header-left {
  display: flex;
  align-items: center;
  cursor: pointer;
  gap: var(--space-lg);
}

.header-left-items {
  display: flex;
}

.dropdown-toggle {
  display: flex;
  align-items: center;
  padding: var(--space-md);
}

.dropdown-toggle:hover {
  color: var(--primary-color);
  opacity: var(--opacity-hover);
}

.dropdown-menu {
  display: none;
  position: absolute;
  top: var(--space-3xl);
  left: unset;
  width: 180px;
  background-color: var(--container-background-color);
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 0 0 var(--border-radius) var(--border-radius);
  z-index: 50000;
  padding-left: var(--space-md);
}

.header-left-items:nth-child(2) .dropdown-menu {
  /* 依頼一覧が2番目のアイテムと仮定 */
  width: 200px;
  position: absolute;
  left: unset;
  top: var(--space-3xl);
}

.dropdown-menu a {
  display: block;
  padding-bottom: var(--space-sm);
  text-decoration: none;
  color: #222;
}

.dropdown-menu a:hover {
  color: var(--primary-color);
  opacity: var(var(--opacity-hover));
}

.dropdown-menu.show {
  display: block;
}

.header-right {
  display: flex;
  align-items: center;
}

.header-right-items {
  margin: var(--space-md);
  display: flex;
  align-items: center;
}

.header-right-items a:hover {
  color: var(--primary-color);
  opacity: var(--opacity-hover);
}

.header-right-items .logout-btn {
  border: none;
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--text-color);
  cursor: pointer;
}

.logout-icon {
  margin-left: var(--space-sm);
}

/* ヘッダーcss ここまで */
/* モーダルウィンドウ */

/* 依頼詳細のモーダルウィンドウのスタイル */
.modal {
  display: none;
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.5);
}

/* 依頼詳細のモーダルコンテンツのスタイル */
.modal-content {
  background-color: var(--container-background-color);
  display: flex;
  flex-direction: column;
  margin: 5% auto;
  padding: var(--space-lg);
  border: 1px solid #888;
  border-radius: var(--border-radius);
  width: auto;
  max-width: 1000px;
  min-width: 500px;
  height: auto;
  gap: var(--space-md);
}

.relative {
  position: relative;
  top: 0px;
  left: 0px;
  width:100%;
}

.request-share-modal {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding: 0 var(--space-lg);
}

/* 絞り込み検索のモーダルウィンドウスタイル */
.modal-overlay,
.modal-overlay-dontclose {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.modal-window {
  width: auto;
  max-width: 1200px;
  height: auto;
  max-height: 95vh;
  padding: var(--space-lg);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--space-md);
  background-color: var(--container-background-color);
  border-radius: var(--border-radius);
  overflow-y: auto;
}

.modal-header {
  width: 100%;
  display: flex;
  position: relative;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.modal-title {
  font-size: var(--font-size-large);
  text-align: center;
}

.search-fieldset {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
  gap: 10px;
  width: 100%;
  padding: var(--space-md);
  border-radius: var(--border-radius);
  border: 2px solid var(--border-color);
}

.full-width-fieldset {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
  gap: 10px;
  padding: var(--space-md);
  border-radius: var(--border-radius);
  border: 2px solid var(--border-color);
}

.search-legend {
  padding: 0 var(--space-sm);
}

/* 絞り込み検索CSS */
.search-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
}

.category-search-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-md);
}

.search-container-items {
  display: flex;
  width: 100%;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.nowrap {
  white-space: nowrap;
  flex-wrap: nowrap;
}

.sfont {
  font-size: 0.8em;
}

.search-container-item {
  display: flex;
  align-items: center;
  justify-self: start;
  gap: var(--space-xs);
}

.search-container-item select,
.search-container-item input[type="number"],
.search-container-item input[type="text"],
.search-container-item input[type="date"] {
  width: 100%;
  margin: 0;
  padding: 5px;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
}

.search-container-item label {
  white-space: nowrap;
}

@media screen and (max-width: 1480px) {
  .modal-window {
    padding: var(--space-md);
  }

  .search-container {
    font-size: var(--font-size-tiny);
    gap: var(--space-xs);
  }

  .search-fieldset {
    gap: var(--space-xs);
    padding: var(--space-sm);
  }
}

/* エリアモーダル */
.area-modal-window {
  width: 1200px;
  height: auto;
  max-height: 95vh;
  padding: var(--space-lg);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--space-md);
  background-color: var(--container-background-color);
  border-radius: var(--border-radius);
  overflow-y: auto;
}

.region {
  cursor: pointer;
  gap: 0;
  text-align: center;
  background-color: var(--sub-color);
  border: 2px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: var(--space-md);
  box-shadow: var(--box-shadow);
}

#selectedItems {
  display: flex;
  flex-direction: row;
  gap: var(--space-xs);
  flex-wrap: wrap;
  padding: var(--space-md);
  list-style: none;
}

.selected {
  color: var(--primary-color);
  font-weight: var(--font-weight-bold);
}

.accordion-menu {
  display: none;
}

.selectded-items {
  display: flex;
  flex-direction: row;
  gap: var(--space-xs);
  flex-wrap: wrap;
  padding: var(--space-md);
  list-style: none;
  gap: var(--space-md);
}

.error-areas {
  color: var(--error-color);
  display: flex;
  align-items: center;
  justify-content: center;
}

.region-fieldset {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  padding: var(--space-md);
  border-radius: var(--border-radius);
  border: 2px solid var(--border-color);
  gap: var(--space-xs);
}

.region-fieldset label {
  cursor: pointer;
}

.prefecture-legend label {
  cursor: pointer;
}

.prefecture-legend {
  padding: 0 var(--space-sm);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  text-wrap: nowrap;
}

.region-fieldset label {
  display: flex;
  align-items: center;
  text-wrap: nowrap;
  padding-left: 10px;
}

.region-fieldset input[type="checkbox"] {
  cursor: pointer;
}

/* モーダルウィンドウここまで */

/* スタッフ登録完了CSS */
.account-register-complete-container {
  display: none;
}

.account-register-complete-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-3xl);
  margin: 0 var(--space-lg);
  font-size: var(--font-size-large);
  background-color: var(--container-background-color);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
}

.account-register-complete {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
}

.account-register-complete-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.account-register-complete-content .material-symbols-outlined {
  font-size: 100px;
  color: var(--primary-color);
}

/* チェックボックスのカスタムスタイル */

.table-header input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  background: #fff;
  border: 2px solid var(--border-color);
  border-radius: 4px;
  width: 20px;
  height: 20px;
  cursor: pointer;
  position: relative;
}

.table-header input[type="checkbox"]:checked {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.table-header input[type="checkbox"]:checked:after {
  content: "";
  position: absolute;
  left: 10px;
  top: 6px;
  width: 6px;
  height: 12px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* 依頼一覧css */
.new-requests-btn-container {
  display: flex;
  justify-content: space-between;
  margin: var(--space-md);
}

.new-requests-btns {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-md);
}

.new-requests-btns a {
  text-decoration: none;
  color: #fff;
}

.common-container {
  display: flex;
  flex-direction: column;
  margin: var(--space-md);
  border-radius: var(--border-radius);
  padding: var(--space-md);
  background: var(--container-background-color);
  box-shadow: var(--box-shadow);
}

.base-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin: var(--space-md);
  padding: var(--space-md);
}

.table-header {
  display: flex;
  position: relative;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-md);
}

.table-header-right {
  display: flex;
  gap: var(--space-md);
  align-items: center;
}

.table-header-middle {
  display: flex;
  gap: var(--space-xs);
  align-items: center;
  font-size: var(--font-size-small);
}

.common-table-container {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--space-md);
}

.common-table-container tr {
  cursor: pointer;
}

.common-table-container tbody tr:hover {
  opacity: var(--opacity-hover);
  box-shadow: 0 0 0 2px var(--primary-color);
}

.group-table-container {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--space-md);
}

.group-table-container tr {
  cursor: pointer;
}

.group-table-container tbody:hover {
  opacity: var(--opacity-hover);
  box-shadow: 0 0 0 2px var(--primary-color);
}

.point-table-container {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--space-md);
  overflow: auto;
}

.account-table-container {
  margin: var(--space-2xl) 0;
}

.account-table-container select {
  width: 100%;
  padding: var(--space-sm);
  border-radius: var(--border-radius);
  border: 1px solid var(--border-color);
}

.account-table-container input[type="text"] {
  width: 100%;
  padding: var(--space-sm);
  border-radius: var(--border-radius);
  border: 1px solid var(--border-color);
}

.account-table-container .average-point td:nth-child(n + 2):nth-child(-n + 13) {
  padding: var(--space-md);
  font-size: 0.8rem;
}

.tiny-font-table {
  width: 100%;
  font-size: 12px;
  overflow: auto;
}

.tiny-font-table th,
.tiny-font-table td {
  border: 1px solid #ddd;
  text-align: left;
  padding: 8px;
}

/* 最初のヘッダー行 */
.tiny-font-table thead tr:first-child th {
  position: sticky;
  top: 0;
  z-index: 1;
}

/* 2番目のヘッダー行 */
.tiny-font-table thead tr:nth-child(2) th {
  position: sticky;
  top: 0px;
  z-index: 1;
  text-align: center;
}

.tiny-font-table td input[type="text"] {
  width: 45px;
  padding: 2px;
  font-size: 12px;
  border: 1px solid #ddd;
  border-radius: 0px;
  text-align: center;
}

#tiny-select {
  width: 150px;
  padding: var(--space-sm);
  border-radius: var(--border-radius);
  border: 1px solid var(--border-color);
}

.tiny-select {
  width: auto;
  border-radius: var(--border-radius);
  border: 1px solid var(--border-color);
  display: inline;
}
#areas-container {
  max-height: 1137px;
  margin-bottom: var(--space-md);
  overflow-y: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-tiny);
  min-width: 600px;
  /* 長いテキストの非表示 */
}

thead th {
  position: sticky;
  top: 0;
  padding: var(--space-sm) var(--space-xs);
  white-space: nowrap;
  z-index: 2;
}

td img {
  width: 50px;
  object-fit: contain;
}

th,
td {
  text-align: left;
  border-bottom: 1px solid var(--border-color);
}

td .material-symbols-outlined {
  display: inline-block;
  color: #666;
  font-size: 20px;
}

.common-table-container tbody tr:nth-child(odd) {
  background-color: var(--sub-color);
}

tbody td {
  padding: var(--space-sm) var(--space-xs);
  vertical-align: middle;
  max-width: 200px;
  white-space: nowrap;
}

td a {
  text-decoration: underline;
  color: var(--link-color);
  cursor: pointer;
}

td a:hover {
  opacity: var(--opacity-hover);
}

th {
  background-color: var(--primary-color);
  color: white;
  font-weight: var(--font-weight-bold);
}

.pagination {
  display: flex;
  justify-content: start;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-md);
}

.pagination-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--border-radius);
  border: none;
  cursor: pointer;
}

.pagination-btn.active {
  background-color: var(--primary-color);
  color: white;
  font-weight: var(--font-weight-bold);
}

/* 非アクティブなページネーションボタンのスタイル */
th,
td {
  white-space: wrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media screen and (max-width: 1560px) {
  table {
    width: 100%;
    min-width: 0;
  }
}

/* 依頼一覧css ここまで */
/* 依頼詳細css */
.id-container {
  display: inline-flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  font-size: var(--font-size-large);
  font-weight: bold;
  gap: var(--space-md);
  padding: var(--space-lg);
}

.request-detail-container {
  display: flex;
  flex-direction: column;
  text-align: left;
  background-color: var(--container-background-color);
  border-radius: var(--border-radius);
  padding: var(--space-lg);
  box-shadow: var(--box-shadow);
}

.request-detail-container dt {
  display: inline-block;
  width: 130px;
}


.request-detail-container dd{
  display: inline-block;
  font-size: 1.1em;
  width: calc(100% - 200px);
}

.request-detail-table {
  width: 100%;
  border-collapse: collapse;
}

.request-detail-row .label-cell {
  background-color: #e0e0e0;
  font-weight: bold;
  padding: 8px;
}

.request-detail-row td {
  padding: 8px;
  border-bottom: 1px solid #ccc;
  text-wrap: wrap;
}

.new-request-detail-container {
  display: flex;
  flex-direction: column;
  text-align: left;
  background-color: var(--container-background-color);
  border-radius: var(--border-radius);
  padding: var(--space-md);
  box-shadow: var(--box-shadow);
}

.request-detail-container > div {
  margin-bottom: var(--space-xs);
  padding: var(--space-xs);
  border-bottom: 1px solid #eee;
  text-overflow: clip;
}

.request-detail-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.request-detail-content-items {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.request-detail-content-item {
  display: flex;
  flex-direction: row;
  gap: var(--space-md);
  align-items: center;
}

.request-detail-content-item img {
  width: 100px;
  object-fit: contain;
}

.request-detail-content-item label {
  font-weight: var(--font-weight-bold);
  flex-basis: 40%;
}

.request-detail-content-item select {
  flex-basis: 10%;
  flex-grow: 1;
}

.request-detail-content-item input[type="text"] {
  flex-basis: 55%;
  flex-grow: 1;
}

.request-detail-content-item button {
  flex-basis: 5%;
  flex-grow: 1;
}

.request-detail-content-item span {
  flex-basis: 20%;
  flex-grow: 1;
}

.request-detail-content-item-newdesign {
  display: flex;
  flex-direction: row;
  gap: var(--space-md);
  align-items: center;
}

.request-detail-content-item-newdesign label {
  font-weight: var(--font-weight-bold);
  flex-basis: 100px;
}

.request-detail-content-item-newdesign .notice_name_s {
  padding: 6px 5px;
  display: inline-block;
  border: 1px #ddd solid;
  margin-top: 3px;
}

.select-service-content {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

.select-service-content img {
  width: 80%;
  object-fit: contain;
}

.select-service-content label.set_service.select {
  display: block;
  border: 2px solid #ccc;
  border-radius: 20px;
  width: 250px;
  overflow: hidden;
  cursor: pointer;
}
.select-service-content label.set_service:hover,
.select-service-content label.set_service.active {
  border-color: var(--primary-color);
}

.select-service-content div.service_name {
  background: #efefef;
  text-align: center;
  padding: 14px 0px;
}

.select-service-content div.service_image {
  background: #fff;
  text-align: center;
  height: 165px;
  display: flex;
  justify-content: center;
}

.select-service-content div.service_image image {
  width: 100%;
}
.select-service-content div.service_select {
  background: #aaaaaa;
  text-align: center;
  color: #fff;
  padding: 20px 0px;
}
.select-service-content label.set_service:hover div.service_select,
.select-service-content label.set_service.active div.service_select  {
  background: var(--primary-color);
}

/* 最後の要素の下線を削除 */
.request-detail-container > div:last-child {
  border-bottom: none;
}

.details-container {
  display: flex;
  gap: var(--space-lg);
  margin: 0 var(--space-md) var(--space-md);
}

.detail-items {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  flex: 6;
}

.template-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  flex: 8;
}

.add-template-modal {
  width: 600px;
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  flex: 2;
  height: 100%;
}

.sidebar-container {
  display: flex;
  flex-direction: column;
  text-align: left;
  background-color: var(--container-background-color);
  border-radius: var(--border-radius);
  padding: var(--space-md) var(--space-md) var(--space-2xl) var(--space-md);
  box-shadow: var(--box-shadow);
  height: 100%;
}

.sidebar-progress-container {
  margin-bottom: var(--space-md);
}

@media screen and (max-width: 1480px) {
  /* ここにノートパソコン用のスタイルを書きます */
  .sidebar-container {
    padding: var(--space-md);
  }

  .sidebar-items {
    font-size: var(--font-size-small);
  }
}

.sidebar-items a {
  display: flex;
  justify-content: start;
  align-items: center;
  text-decoration: none;
  color: var(--text-color);
  cursor: pointer;
}

.sidebar-items a:hover {
  color: var(--primary-color);
  opacity: var(--opacity-hover);
}

.sidebar-title {
  font-size: var(--font-size-large);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-md);
}

.sidebar-items {
  display: flex;
  flex-direction: column;
  position: relative;
  gap: var(--space-md);
}

.sidebar-item {
  gap: var(--space-md);
  position: relative;
}

.sidebar-items p {
  cursor: pointer;
}

.process-container {
  display: flex;
  flex: 2;
  flex-direction: column;
  text-align: left;
  background-color: var(--container-background-color);
  border-radius: var(--border-radius);
  padding: var(--space-md) var(--space-md) var(--space-2xl) var(--space-md);
  box-shadow: var(--box-shadow);
  height: 100%;
}

.process-items a {
  display: flex;
  justify-content: start;
  align-items: center;
  gap: var(--space-md);
}

.process-items a:hover {
  color: var(--primary-color);
  opacity: var(--opacity-hover);
}

.process-title {
  font-size: var(--font-size-large);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-md);
}

.process-items {
  display: flex;
  flex-direction: column;
  position: relative;
  padding-left: 20px;
  gap: var(--space-2xl);
}

.process-items a {
  text-decoration: none;
  color: var(--text-color);
  cursor: pointer;
}

.process-item {
  gap: var(--space-md);
  position: relative;
}

.process-item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 10%;
  top: 100%;
  bottom: -50px;
  border: 2px solid var(--border-color);
}

.process-item .material-symbols-outlined {
  position: relative;
  display: inline-block;
  padding: 8px;
  border-radius: 50%;
  background-color: var(--sub-color);
  color: black;
  font-size: 50px;
}

.process-item .material-symbols-outlined::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 2px solid gray;
  border-radius: 50%;
  z-index: -1;
}

.timestamp {
  font-size: var(--font-size-small);
  color: #999;
  margin-left: var(--space-xs);
}

.function-button {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--space-sm);
  border: none;
  cursor: pointer;
  font-weight: var(--font-weight-bold);
  text-decoration: none;
}

.function-button .material-symbols-outlined {
  font-size: 16px;
  margin-right: var(--space-xs);
}

.function-button:hover {
  color: var(--primary-color);
}

/* カードセクション */
.material-container {
  display: flex;
  flex-direction: column;
  background-color: var(--container-background-color);
  border-radius: var(--border-radius);
  padding: var(--space-lg);
  box-shadow: var(--box-shadow);
}

.template-section {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: auto;
  gap: 10px;
  grid-auto-flow: dense;
}

/* カードの種類に応じたグリッドエリアの割り当て */
.template-vertical {
  grid-column: span 1;
  grid-row: span 2;
  /* 高さは2行分を保持 */
}

.template-horizontal {
  grid-column: span 1;
  grid-row: span 2;
}

.template-tall {
  grid-column: span 1;
  /* 非常に縦長のカードも1列を占める */
  grid-row: span 3;
  /* 高さは3行分を占める */
}

.template-wide {
  grid-column: span 3;
  /* 非常に横長のカードは全列を占める */
  grid-row: span 1;
  /* 高さは1行分 */
}

.template-square {
  grid-column: span 2;
  /* 正方形のカードは1列を占める */
  grid-row: span 2;
  /* 高さも1行分 */
}

.template-material {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.template-material img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.template {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--container-background-color);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: var(--space-md);
  box-shadow: var(--box-shadow);
  overflow: hidden;
  min-width: 150px;
  min-height: 150px;
}

.template:hover {
  box-shadow: 0 0 0 2px var(--primary-color);
  cursor: pointer;
}

.template-content {
  display: flex;
  flex-direction: column;
  padding: var(--space-md);
  flex-grow: 1;
  gap: var(--space-sm);
}

.template-title {
  font-weight: var(--font-weight-bold);
}

.template-text {
  flex-grow: 1;
  font-size: var(--font-size-small);
}

.new-requests-card-section {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  border-radius: var(--border-radius);
  flex-wrap: wrap;
  margin: var(--space-md);
  gap: 10px;
}

.new-requests-card-section > div {
  flex: 0 0 calc(35.5% - 30px);
  min-width: 250px;
}

.edit-requests-card-section {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  border-radius: var(--border-radius);
  flex-wrap: wrap;
  margin: var(--space-md);
  gap: 10px;
}
.edit-requests-card-section > div {
  flex: 0 0 calc(30% - 20px);
  min-width: 250px;
}

.edit-request-card {
  width: 100%;
  background: var(--container-background-color);
  font-size: var(--font-size-small);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  display: flex;
  flex-direction: column;
  min-width: 300px;
  min-height: 250px;
}

.new-request-card {
  width: 100%;
  background: var(--container-background-color);
  font-size: var(--font-size-small);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  display: flex;
  flex-direction: column;
  min-width: 300px;
  min-height: 250px;
}

.new-card-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--primary-color);
  box-shadow: var(--box-shadow);
  border-radius: var(--border-radius);
  color: #fff;
  cursor: pointer;
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-large);
  min-width: 300px;
  min-height: 350px;
}

.card {
  width: 100%;
  background: var(--container-background-color);
  font-size: var(--font-size-small);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 300px;
  min-height: 250px;
  cursor: pointer;
}


.card:hover {
  box-shadow: 0 0 0 2px var(--primary-color);
}

.card-section {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-md);
}

.card-header {
  padding: var(--space-md);
  background-color: var(--sub-color);
  border-top-left-radius: var(--border-radius);
  border-top-right-radius: var(--border-radius);
  font-weight: var(--font-weight-bold);
  display: flex;
  gap: var(--space-md);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-header2 {
  padding: var(--space-md);
  background-color: var(--sub-color);
  font-weight: var(--font-weight-bold);
  display: flex;
  gap: var(--space-md);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-section .edited {
  border-color: #FE1F1F;
}

.card-section .edited .card-header,
.card-section .edited .card-header2,
.card-section .edited .card-footer
{
  border-color: #FE1F1F;
  background-color: #ffd5d6;
}

.card-footer-info {
  display:inline-block;
  position:absolute;
  top:15px;
  left:10px;
}

.card-content {
  display: flex;
  flex-direction: column;
  align-items: start;
  padding: var(--space-md);
  gap: var(--space-sm);
  max-width: 300px;
  height: 250px;
}

.card-text {
  max-width: 290px;
  font-size: var(--font-size-small);
  margin-bottom: var(--space-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-material-container {
  display: grid;
  place-items: start;
  grid-template-columns: repeat(5, minmax(50px, 200px));
  gap: var(--space-sm);
}

.card-material img {
  width: 50px;
  height: 50px;
  object-fit: cover;
}

.edit-card-material img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border: 3px solid var(--border-color);
  border-radius: var(--border-radius);
}

.card-footer {
  position: relative;
  padding: var(--space-sm);
  background-color: var(--sub-color);
  border-bottom-left-radius: var(--border-radius);
  border-bottom-right-radius: var(--border-radius);
  text-align: right;
  font-size: var(--font-size-small);
  min-height: 35px;
}
.card-footer .image_sizes {
  position: absolute;
  left: 10px;
  top: 10px;
  width: 200px;
  text-align: left;
}

.card-edit-product_point {
  position: relative;
  padding: var(--space-sm);
  background-color: var(--sub-color);
  text-align: right;
  font-size: var(--font-size-small);
  min-height: 35px;
}

.order_upload_count {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 100px;
}

/* カードセクション終わり */

/* チャットセクション */
.chat-container {
  display: flex;
  flex: 3;
  flex-direction: column;
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  height: 100%;
  max-width: fit-content;
}

.chat-box {
  background-color: #8dabd8;
  border-radius: var(--border-radius) var(--border-radius) 0 0;
  height: 550px;
  display: flex;
  flex-direction: column;
}

#staff_chat {
  background:#b5b5b5;
}

#customer_chat {
  background:#8dabd8;
}

.staff-chat {
  background-color: #b5b5b5;
  border-radius: 0 var(--border-radius) 0 0;
  color: #fff;
  font-weight: var(--font-weight-bold);
}

.customer-chat {
  background-color: #8dabd8;
  border-radius: var(--border-radius) 0 0 0;
  color: #fff;
  font-weight: var(--font-weight-bold);
}

/* ダミーデータのスタイリング */
.chat-message {
  padding: 15px;
  margin: 5px;
  border-radius: 10px;
  color: var(--text-color);
  word-wrap: break-word;
  word-break: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
}

div.chat-container div.chat_send_at {
  font-size: 11px;
}

.staff-message,
.customer-message,
.my-message,
.my-upload,
.other-upload {
  position: relative;
  line-height: 1.5em;
  margin: 15px 0 15px 0;
  min-width: 50px;
  font-size: 12px;
}

.staff-message {
  background-color: #ffffff;
  align-self: flex-start;
}

.customer-message {
  background-color: #264653;
  align-self: flex-start;
}

.my-message {
  background-color: #6de67c;
  align-self: flex-end;
}

/* スタッフとカスタマーのメッセージ用、上の辺に尾があり左側に位置 */

.staff-message::after,
.customer-message::after {
  content: "";
  position: absolute;
  bottom: 100%; /* 吹き出しの下部から外に出るよう配置 */
  left: 20px; /* 左側に配置 */
  border-width: 10px;
  border-style: solid;
  border-color: transparent transparent #ffffff transparent; /* スタッフメッセージ用の色 */
}

.customer-message::after {
  border-color: transparent transparent #264653 transparent; /* カスタマーメッセージ用の色 */
}

/* 自分のメッセージ用、上の辺に尾があり右側に位置 */
.my-message::after {
  content: "";
  position: absolute;
  bottom: 100%; /* 吹き出しの下部から外に出るよう配置 */
  right: 20px; /* 右側に配置 */
  border-width: 10px;
  border-style: solid;
  border-color: transparent transparent #6de67c transparent; /* 自分のメッセージ用の色 */
}


div.chat-message.is_deleted {
  background: #444;
  color: #fff;
  margin: 10px auto;
  text-align: center;
  border: none;
  opacity: 0.7;
  padding: 5px 15px;
}

div.chat-message.is_deleted:after {
  border:none;
}

div.chat-message.is_deleted .import_icon {
  display: none !important;
}

div.chat-box div.deleted_message {
  background: #fcc;
  border: 3px dashed #ff9999;
  font-size: 12px;
}


div.chat-box div.edited_message {
  background: #f0f0f0;
  border: 3px dashed #ccc;
  font-size: 12px;
}


div.chat_delete_time {
  margin-top: 10px;
  text-align: right;
  font-size: 10px;
}

.my-message.is_important {
  background: #fffac2;
  border: 1px dashed #ff0000;
  position: relative;
}

.my-message.is_important span.import_icon {
  width: 39px;
  height: 35px;
  display:inline-block;
  background: url(/img/import_chat.png);
  position: absolute;
  left: -15px;
  top: -20px;
}

.my-message.is_important::after {
  content: "";
  position: absolute;
  bottom: 100%; /* 吹き出しの下部から外に出るよう配置 */
  right: 20px; /* 右側に配置 */
  border-width: 10px;
  border-style: solid;
  border-color: transparent transparent #f00 transparent;
}

.staff-message.is_important {
  background: #fffac2;
  border: 1px dashed #ff0000;
  position: relative;
}

.staff-message.is_important span.import_icon {
  width: 39px;
  height: 35px;
  display:inline-block;
  background: url(/img/import_chat.png);
  position: absolute;
  right: -15px;
  top: -20px;
}


.staff-message.is_important::after {
  border-color: #ff0000;
  border-color: transparent transparent #ff0000 transparent; /* 自分のメッセージ用の色 */
}

.chat-info-other {
  font-size: var(--font-size-small);
  color: #fff;
  margin: 0 5px -5px 5px;
  padding: 0;
  align-self: flex-start;
}

.chat-info-self {
  font-size: var(--font-size-small);
  color: #fff;
  margin: 0 5px 0 5px;
  padding: 0;
  align-self: flex-end;
}

.chat-tabs {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.tab {
  flex-grow: 1;
  flex-basis: 0;
  padding: var(--space-lg) 0;
  border: none;
  cursor: pointer;
  font-size: var(--font-size-normal);
  text-align: center;
}

.chat-content {
  display: flex;
  flex-direction: column;
  padding: var(--space-lg);
  gap: var(--space-xs);
  overflow-x: hidden;
  overflow-y: auto;
}

.file-upload-container {
  display: flex;
  flex-direction: column;
  border-radius: var(--border-radius);
  align-items: center;
  justify-content: center;
  margin: 15px 0 15px 0;
  padding: var(--space-lg);
  gap: var(--space-md);
  position: relative;
  background-color: #e2e2e2;
}

/* 上側の辺に尾があり、右側に位置する吹き出し */
.file-upload-container.right::after {
  content: "";
  position: absolute;
  bottom: 100%; /* 吹き出しの下部から外に出るよう配置 */
  right: 20px; /* 右側に配置 */
  border-width: 10px;
  border-style: solid;
  border-color: transparent transparent #e2e2e2 transparent; /* 下向きの三角形に修正 */
}

/* 上側の辺に尾があり、左側に位置する吹き出し */
.file-upload-container.left::after {
  content: "";
  position: absolute;
  bottom: 100%; /* 吹き出しの下部から外に出るよう配置 */
  left: 20px; /* 左側に配置 */
  border-width: 10px;
  border-style: solid;
  border-color: transparent transparent #e2e2e2 transparent; /* 下向きの三角形に修正 */
}

/* 生産ポイント周りのチャット */
.number-change-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  gap: 10px;
}

.number-before,
.number-after {
  padding: 10px;
  background-color: #f3f3f3;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

#new-date {
  color: #374151;
  font-size: 1.2rem;
}

.number-after {
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
}

.label {
  color: #6b7280;
}

.number {
  color: #374151;
  font-size: 1.2rem;
}

.change-arrow {
  font-size: 1.25rem;
}
/* 生産ポイント周りのチャット 終わり*/

.date-display {
  display: flex;
  align-items: center;
  justify-content: center;
}

.change-date-btn {
  border: none;
  cursor: pointer;
  background: none;
  padding: 5px;
  margin: 0 5px;
  font-size: 16px;
}

.status-label {
  position: absolute;
  top: 10px;
  left: 10px;
  color: var(--text-color);
  font-size: var(--font-size-tiny);
  background-color: #fff;
  font-weight: var(--font-weight-bold);
  border: 2px solid var(--text-color);
  padding: 5px;
  border-radius: 5px;
}

.close-btn, .edit-close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  padding: 10px;
  font-size: var(--font-size-large);
}

.close-btn:hover, .edit-close-btn:hover {
  color: var(--primary-color);
}

.approval {
  color: var(--accent-color);
  border: 2px solid var(--accent-color);
  background-color: #fff;
}

.rejection {
  color: var(--error-color);
  border: 2px solid var(--error-color);
  background-color: #fff;
}

figure {
  display: flex;
  flex-direction: column;
  align-items: center;
}

figure img {
  width: 100px;
  height: 100px;
  display: block;
  object-fit: cover;
  overflow: hidden;
  cursor: pointer;
}

.image-container {
  position: relative;
}

figure .image-container img:hover {
  opacity: 0.9;
  border: 2px solid #fff;
}

.download-icon {
  position: absolute;
  top: 0;
  right: 0;
  background-color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  padding: 5px;
}

.drop-area:hover {
  border: 2px dashed #000;
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease;
}

figcaption {
  margin-bottom: 5px;
  overflow: hidden;
  width: 100px;
  text-wrap: nowrap;
}

.file-upload-container textarea {
  width: 100%;
  height: 150px;
  padding: 10px;
  border: 2px solid #ccc;
  border-radius: var(--border-radius);
  resize: none;
}

.file-upload-label {
  background-color: var(--sub-color);
  color: var(--text-color);
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
}

.file-upload-submit {
  margin-left: 10px;
  background-color: #4d87cc;
  color: #fff;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
}

.chat-input-container {
  display: flex;
  align-items: end;
  justify-content: space-between;
  padding: var(--space-md);
  background-color: #d9d9d9;
  box-shadow: var(--box-shadow);
  border-radius: 0 0 var(--border-radius) var(--border-radius);
}
.pullup-menu {
  bottom: 4vh;
}

@media screen and (max-width: 1281px) {
  /* ここにノートパソコン用のスタイルを書きます */
  .pullup-menu {
    bottom: 2vh;
  }
}

@media screen and (max-width: 1366px) {
  .pullup-menu {
    bottom: 26vh;
  }
}

.plus-button,
.send-button {
  border: none;
  background-color: transparent;
  /* 透明背景 */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xs);
  /* ボタンのパディングを調整 */
}

/* テキストエリアのスタイル調整 */
#auto-expanding-textarea {
  flex-grow: 1;
  /* 利用可能なスペースを動的に拡張 */
  margin: 0 var(--space-md);
  /* 周囲のボタンからのマージンを調整 */
  padding: var(--space-sm);
  /* パディングを調整 */
  border-radius: var(--border-radius);
  /* ボーダーの丸みを増加 */
  border: none;
  /* ボーダーを削除 */
  resize: none;
  /* ユーザーによるリサイズを無効化 */
  overflow-y: auto;
  /* 縦方向の自動スクロールを有効化 */
}
.tright {
  text-align: right;
}

.tab.active {
  opacity: 0.7;
}

/* 非表示のコンテンツ */
.chat-content.hidden {
  visibility: hidden;
  position: absolute;
}

/* 表示されるコンテンツ */
.chat-content.visible {
  visibility: visible;
  position: relative;
}

/* チャットセクション終わり */

.card-footer .material-symbols-outlined,
.modal-header .material-symbols-outlined {
  font-size: var(--space-xl);
  cursor: pointer;
}

.card-footer .material-symbols-outlined:hover,
.modal-header .material-symbols-outlined:hover,
.chat-input-container .material-symbols-outlined:hover {
  color: var(--primary-color);
}

/* 新規デザイン依頼 */
.new-request-container {
  display: flex;
  gap: var(--space-md);
  margin: 0 var(--space-lg) var(--space-lg);
}

/* アカウント詳細 */
.flex-container {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: start;
  padding: 0 var(--space-lg) var(--space-lg) var(--space-lg);
  flex-wrap: nowrap;
  width: 100%;
  gap: var(--space-lg);
}

.flex-start {
  display: flex;
  justify-content: start;
  align-items: center;
  gap: var(--space-md);
}

.flex-start label {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-right: var(--space-2xl);
}

.space-lg {
  margin: 0 var(--space-sm);
}

.account-detail-container {
  flex: 3;
  background-color: var(--container-background-color);
  border-radius: var(--border-radius);
  padding: var(--space-lg);
  box-shadow: var(--box-shadow);
}

.account-detail-items {
  border-bottom: 1px solid var(--border-color);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.account-detail-items-title {
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-normal);
  color: var(--text-color);
  flex-basis: 40%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.account-detail-items-content {
  padding: var(--space-md);
  display: flex;
  align-items: center;
  justify-content: start;
  gap: var(--space-md);
  color: var(--text-color);
  flex-basis: 50%;
  flex-grow: 1;
  flex-wrap: wrap;
}

.account-detail-items-button {
  padding: var(--space-md);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  color: var(--text-color);
  flex-basis: 10%;
  flex-grow: 1;
}


.template-detail-items-title {
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-normal);
  color: var(--text-color);
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

/* 依頼一覧の検索フォーム */

.search-input {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  text-wrap: nowrap;
}

.search-input input {
  background-color: #fff;
}

.search-input select {
  background-color: #fff;
  width: 200px;
}

.search-checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  text-wrap: nowrap;
}

/* 依頼一覧の検索フォームここまで */

#store-info-select {
  flex: 2;
}

#store-info-input {
  flex: 4;
}

.year-select {
  width: 300px;
  margin-right: var(--space-md);
}

select,
input {
  width: 100%;
  padding: var(--space-md);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  background-color: rgb(249, 249, 249);
}

input[type=checkbox] {
  width: auto;
}

.search-container-item select,
.search-container-item input {
  width: auto;
}

select:hover,
input:hover,
textarea:hover {
  opacity: var(--opacity-hover);
}

.request-detail-content-item input[type="radio"],
.account-detail-container input[type="radio"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin: 0;
  width: 30px;
  height: 30px;
  border: 2px solid var(--border-color);
  border-radius: 50%;
  outline: none;
  cursor: pointer;
  background-color: rgb(249, 249, 249);
  position: relative;
  display: inline-block;
}

.request-detail-content-item input[type="radio"]:checked::before,
.account-detail-container input[type="radio"]:checked::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background-color: var(--primary-color);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.request-detail-content-item input[type="radio"]:checked,
.account-detail-container input[type="radio"]:checked {
  border-color: var(--primary-color);
}

input:focus {
  border-color: var(--accent-color);
}

label {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

textarea {
  width: 100%;
  padding: var(--space-md);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  line-height: 1.6;
  font-weight: bold;
  background-color: rgb(249, 249, 249);
  resize: vertical;
}

textarea:focus {
  border-color: var(--accent-color);
}

.requests-add-container {
  display: flex;
  flex-direction: row;
  gap: var(--space-lg);
}

.requests-add-container input,
.requests-add-container textarea {
  width: 100%;
  padding: var(--space-md);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  background-color: #fff;
}

.requests-add-container-item {
  background-color: #f4f4f4;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 20px;
  width: 500px;
}

.requests-add-container-items {
  margin-bottom: 15px;
  max-height: 500px;
  overflow-y: auto;
}

.requests-add-container-items-title {
  font-weight: bold;
  font-size: var(--font-size-normal);
  margin-bottom: 5px;
}

.requests-add-container-items-content {
  background-color: white;
  padding: 10px;
  margin-bottom: var(--space-md);
  border-radius: 5px;
}

hr {
  margin-top: 10px;
  margin-bottom: 20px;
}

.requests-add-container-items-content p {
  margin-top: 0;
}

.table-fieldset {
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: var(--space-lg);
  width: 100%;
  margin: var(--space-lg) 0;
}

.table-fieldset tbody tr:nth-child(odd) {
  background-color: var(--sub-color);
}

legend {
  padding: var(--space-sm);
  font-weight: var(--font-weight-bold);
}

/* テンプレート一覧 */
.new-templates-items {
  display: flex;
  flex-direction: column;
  align-items: left;
  justify-content: start;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.new-templates-items-title {
  font-weight: var(--font-weight-bold);
  margin-top: var(--space-md);
  font-size: var(--font-size-normal);
  color: var(--text-color);
}

.new-templates-items-content {
  color: var(--text-color);
  display: flex;
  flex-direction: column;
}

.custom-file-upload {
  display: inline-block;
  cursor: pointer;
  color: var(--primary-color);
  margin-top: var(--space-md);
  font-weight: bold;
}

#file-name {
  padding: 10px 0px;
}

/* テンプレート一覧終わり */

.none {
  display: none;
}

.inactive {
  pointer-events: none;
  opacity: 0.5;
}

.left {
  text-align: left;
}
.right {
  text-align: right;
}
.center {
  text-align: center;
}

/* 依頼内容変更申請 */
.request-detail-change-container {
  display: flex;
  flex-direction: column;
  text-align: left;
  background-color: var(--container-background-color);
  border-radius: var(--border-radius);
  padding: var(--space-md);
  box-shadow: var(--box-shadow);
}

.request-detail-change-container-items {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.request-detail-change-container label {
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-md);
}
.request-detail-change-container input[type="text"] {
  width: 100%;
  padding: var(--space-md);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
}
.request-detail-change-container textarea {
  width: 100%;
  padding: var(--space-md);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  resize: vertical;
}

#image_select_modal {
  position: absolute;
}

#image_select_modal div.modal-content{
  max-width: 100%;
  width: 1100px;
  height: 90%;
  margin: 0px;
  overflow: auto;
}

#image_type_contents_pc {
  width: 600px;
  display: inline-block;
  vertical-align: top;
  position:relative;
  top: 0px;
  left: 0px;
}

#image_type_contents_sp {
  width: 400px;
  display: inline-block;
  vertical-align: top;
  position:relative;
  top: 0px;
  left: 0px;
}

#image_type_contents_pc img{
  width: 600px;
  height: auto;
  border: 2px solid #ccc;
}


#image_type_contents_sp img{
  width: 320px;
  height: auto;
  border: 2px solid #ccc;
}

div.set_image_type_id {
  cursor: pointer;
}
div.set_image_type_id:hover {
  background: #ff0;
  opacity: 0.5;
}

select#image_select {
  width: auto;
}

div.online_mtg_info {
  margin: 50px;
}
div.online_mtg_info ol{
  margin-left: 150px;
}

div.auto_height {
  height: calc(100vh - 400px);
  overflow: auto;
}

table.product_point_table {
  border-collapse:separate;
	border-spacing:0;
  border-bottom: 1px solid #ddd;
}

table.product_point_table thead {
  /* 縦スクロール時に固定する */
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  /* tbody内のセルより手前に表示する */
  z-index: 10;
}

table.product_point_table td {
  background: #fff;
  border-right: none;
  border-bottom: none;
}

table.product_point_table th {
  border-right: none;
  border-bottom: none;
}

table.product_point_table thead th.sticky_right_1 {
  z-index: 100 !important;
  text-align: center;
}
table.product_point_table thead th.sticky_right_2 {
  z-index: 100 !important;
  text-align: center;
}

table.product_point_table thead th.sticky_left_1 {
  z-index: 100 !important;
}
table.product_point_table thead th.sticky_left_2 {
  z-index: 100 !important;
}

table.product_point_table .sticky_right_1 {
  width: 45px;
  min-width: 45px;
  position: -webkit-sticky;
  position: sticky;
  right: 0;
  z-index: 2;
  text-align: right;
}

table.product_point_table .sticky_right_2 {
  position: -webkit-sticky;
  position: sticky;
  right: 45px;
  z-index: 1;
  text-align: right;
}

table.product_point_table .sticky_left_1 {
  width: 155px;
  min-width: 155px;
  overflow: hidden;
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 2;
}

table.product_point_table .sticky_left_2 {
  position: -webkit-sticky;
  position: sticky;
  left: 155px;
  z-index: 1;
  border-right: 1px solid #ddd;
}

table.product_point_table td.holiday {
  background:#eee;
}


.sticky_table_wrapper {
  overflow-y: scroll;
  width: 98%;
  height: calc(100vh - 230px);
}

#all_area_select {
  position: absolute;
  padding: 4px 20px;
  right:60px;
}

ul#area_list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: auto;
  max-height: 100px;
}

a.alert_text,
span.alert_text {
  font-size: 1.2em;
  font-weight: var(--font-weight-bold);
  color: #fff;
  background: #c00;
  padding: 3px 10px;
  text-decoration: none;
}

span.bold_red {
  font-weight: var(--font-weight-bold);
  color: var(--error-color);
}

.grayout {
  color: var(--sub-color-2);
}
span.template_hidden {
  position: absolute;
  top: 0px; 
  right: 0px;
  color: #c00;
}
span.template_show {
  position: absolute;
  top: 0px; 
  right: 0px;
  color: #4caf50;
}

div#select_image_size {
  display: none;
}
div.image-size-title {
  display: inline;
  margin-left: 20px;
  font-weight: 800;
}

div.image-size-content {
  display: inline-block;
  width: 150px;
}
#select_image_width,
#select_image_height {
  display: none;
}

div.calender_block {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr;
}

div.calender_month {
  text-align: center;
  margin-bottom: 20px;
}

div.calender_month table {
  border-collapse: collapse;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

div.calender_month table td,
div.calender_month table th {
  border: 1px solid #aaa;
}

div.calender_month table th {
  text-align: center;
  background: #fff;
  color: #444;
  border: 1px solid #aaa;
}

div.calender_month table div.day {
  text-align: center;
}

div.calender_month table tbody td {
  vertical-align: top;
  position: relative;
}

div.calender_month table div.dayset {
  cursor: pointer;
  position: relative;
  width: 100%;
  height: 80px;
}

div.calender_month table div.noset {
  position: relative;
  width: 100%;
  height: 80px;
}

div.calender_memo {
  font-size: 10px;
  position:absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  text-align: center;
  color: #ff1493;
}

div.calender_month table .holiday {
  background: #FFF5F4;
  color: #ff1493;
}
div.calender_month table .saturday {
  background: #F0FCFC;
  color: #1492ff;
}
div.calender_month table .gray {
  background: #F0F0F0;
  border:none;
}

div.calender_month table td:first-child {
  border-left: 1px solid #aaa;
}

div.calender_month table td:last-child {
  border-right: 1px solid #aaa;
}

div.calender_month table tbody tr:last-child td {
  border-bottom: 1px solid #aaa;
}

.dont_select {
  background: #eee;
}

div.search-container-items input.calender_memo {
  margin: 2px 5px;
  width: 100%;
}

select#calender_year {
  width: 200px;
}

table.modal_calender {
  width: 400px;
  min-width: 400px;
  border-collapse: collapse;
  margin-left: auto;
  margin-right: auto;
}

table.modal_calender td,
table.modal_calender th {
  border: 1px solid #aaa;
  text-align: center;
}

table.modal_calender  .holiday {
  background: #FFF5F4;
  color: #ff1493;
}
table.modal_calender  .saturday {
  background: #F0FCFC;
  color: #1492ff;
}
table.modal_calender  .gray {
  background: #E5E5E5;
  border:none;
}
div.calender_header {
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
}
div.calender_header div:first-child {
  display: table-cell;
  vertical-align: middle;
  text-align :left;
}

div.calender_header div span {
  font-size: 16px;
}

div.calender_header_block {
  width: calc(100% - 70px);
  height: 60px;
  margin: 0px auto;
  position: relative;
}

div.calender_header_block select {
  position:absolute;
  top: 0px;
  left:0px;
}

div.calender_header_block p {
  position:absolute;
  top: 0px;
  right:0px;
  font-size: 24px;
}

div.dayset div.day {
  cursor: pointer;
}
td.set_date:hover {
  background :#ffc;
}

td.dont_select div.dayset div.day,
td.holiday div.dayset div.day
 {
  cursor: default;
}

div.dayset div.day {
  cursor: pointer;
}

span.change_month {
  cursor: pointer;
}

div.calender_header h2 {
  text-align :center;
  line-height: 24px;
  display: table-cell;
  vertical-align: middle;
}
div.calender_header div:last-child {
  text-align :right;
  display: table-cell;
  vertical-align: middle;
}

select.timer {
  width: 80px;
}

button.download_csv_btn {
  position: absolute;
  right: 170px;
}
button.noflex {
  display: inline;
}

#default_setting {
  width: 16px;
  height: 16px;
}

div.shop_staff_regist_info {
  margin-top: -20px;
  color: #aaa;
}
div.information {
  font-size: 12px;
  color: #aaa;
}

#modalConfirm div.modal-window {
  min-width: 500px;
}

div.btn_area {
  display: grid;
	grid-template-rows: 1fr;
	grid-template-columns: 50% 50%;
  margin-top: 30px;
}

div.btn_area div {
  text-align: center;
}

div.btn_area div .btn {
  display: inline-block;
  width: 140px;
}

div.btn_area_center{
  text-align: center;
  margin-top: 30px;
}

div.btn_area_center div .btn ,
div.inline .btn{
  display: inline-block;
  width: 140px;
}

button.cancel_btn {
  background: var(--sub-color-2);
}

.small_btn {
  color: #fff;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-weight-bold);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--border-radius);
  background: var(--primary-color);
  border: none;
  box-shadow: var(--box-shadow);
  cursor: pointer;
  text-decoration: none;
}

.small_btn:hover {
  opacity: var(--opacity-hover);
}

button.delete_staff {
  background: #FF600B;
}

span.checked {
  color: #83af50;
}

table.notice tbody td {
  max-width: 2000px;
}

div.notice_modal label{
  display: inline;
  margin-right: 10px;
}

input[type=checkbox].chk {
  margin-right: 12px;
}
input.small_input {
  width:50px;
  padding: 3px;
  border-radius:0px;
}
span.notice_name {
  display: inline-block;
  width: 100px;
  text-align: center;
  border: 1px solid var(--border-color);
  margin-right: 10px;
  background: var(--background-color);
}

span.notice_name_s {
  display: inline;
  text-align: center;
  padding: 0px 4px;
  margin-right: 10px;
  background: #f0f0f0;
}

#set_default_staff_notice_setting {
  width: 300px;
  background: #666;
}

#modalNoticeWindow {
  min-width: 800px;
}

.balloon_box {
  position: absolute;
  top: -25px;
  left: 25px;
}

.balloon{
  position: relative;
  display: inline-block;
  margin: 1.5em 0 1.5em 15px;
  padding: 7px 10px;
  min-height: 50px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  font-size: 16px;
  background: #fff69b;
  box-shadow: 2px 5px 5px gray;
}

.balloon:before {
  content: "";
  position: absolute;
  top: 50%;
  left: -16px;
  margin-top: -8px;
  border: 8px solid transparent;
  border-right: 8px solid #fff69b;
}

.balloon p {
  margin: 0;
  padding: 10px;
  font-size: 11px;
  background: #fff;
}

div.qr_image {
  text-align: center;
}
div.onetime_pass_area input {
  max-width: 100%;
  width: 300px;
  font-size: 28px;
}

span.top_right_menu_buttons {

}
span.top_right_menu_buttons .btn {
  display: inline;
}

.request-detail-content-item-newdesign #edit_shop_notice {
  min-width: 110px;
  padding: 8px 5px;
}
table.full_border th {
  text-align: center;
}
table.full_border td,
table.full_border th
{
  border: 1px solid var(--border-color);
}

#search_result #setted_order {
  display: none;
}

#search_result #noset_order {
  padding: 100px;
  text-align: center;
}
#search_result #noset_order .btn{
  display: inline;
}
#search_result .content-wrapper {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 10px;
}
#search_result .textarea-box {
  background: #f0f0f0;
  padding: 10px;
  border-radius: 5px;
  min-height: 200px;
  overflow-y: auto;
  border: 1px solid var(--border-color);
  height: calc(100% - 40px);
}
#search_result .image-wrapper {
  min-height: 200px;
  background: #f0f0f0;
  border: 1px solid var(--border-color);
  border-radius: 5px;
  padding: 5px;
}
#search_result .image-box {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
}
#search_result .image-box img {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 2px;
  border: 1px solid var(--border-color);
}
#search_result .section {
  margin: 20px 0px;
}
#search_result .type-box {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

#search_result .type-box div.image_type {
  display: flex;
  flex: 1;
  min-width: 250px;
  max-width: 316.3px;
  background: #f0f0f0;
  padding: 10px;
  border-radius: 5px;
  text-align: left;
  border: 1px solid #ccc;
  flex-direction: row;
  margin-top: 10px;
}

#search_result .type-box.order_detail {
  gap: 20px;
}

#search_result .type-box.order_detail div.image_type {
  max-width: min( calc(50% - 10px), 360px);
  position: relative;
  border-top-right-radius: 0px;
  border-top-left-radius: 0px;
}

div.image_no {
  font-size: 11px;
  position: absolute;
  height: 18px;
  top: -19px;
  right: -1px;
  border: 1px solid #ccc;
  padding: 0px 10px;
  background: #fff;
  width: calc(100% + 2px);

  border-top-left-radius: var(--border-radius);
  border-top-right-radius: var(--border-radius);
  border-bottom: none;
}

#search_result .type-box div.image_type_yh {
  flex-direction: column;
}

#stage_5 h3 {
    font-size: 14px;
    margin-bottom: 10px;
}

#stage_5 .content-wrapper {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 10px;
}
#stage_5 .textarea-box {
  background: #f0f0f0;
  padding: 10px;
  border-radius: 5px;
  min-height: 200px;
  overflow-y: auto;
  border: 1px solid var(--border-color);
}
#stage_5 .image-wrapper {
  min-height: 200px;
  background: #f0f0f0;
  border: 1px solid var(--border-color);
  border-radius: 5px;
  padding: 5px;
}
#stage_5 .image-box {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
}
#stage_5 .image-box img {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 2px;
  border: 1px solid var(--border-color);
}
#stage_5 .type-box {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
#stage_5 .type-box div.image_type {
  display: flex;
  flex: 1;
  min-width: 250px;
  max-width: 316.3px;
  background: #f0f0f0;
  padding: 10px;
  border-radius: 5px;
  text-align: left;
  border: 1px solid #ccc;
  flex-direction: row;
}
#stage_5 .type-box div.image_type_yh {
    flex-direction: column;
}

span.image_type_name {
  font-size: 12px;
  margin-right: 10px;
}
span.image_type_size {
  color: #aaa;
  font-size: 12px;
}

#stage_5 span.image_type_size {
  color: #aaa;
  font-size: 10px;
}

div.image_type div.image_name_and_size {
  flex: 1;
  height: 23px;
  max-height: 23px;
}

div.design_detail div.image_name_and_size {
  height: auto;
  max-height: none;
}

div.image_type div.actions {
  flex: 0.2;
  display: flex;
  gap: 8px;
  font-size: 12px;
}

#search_result h3 {
  font-size: 14px;
  margin-bottom: 10px;
}

#SetOrderModalOverlay #SetOrderModalWindow {
  min-width: 1050px;
}

#SetOrderModalOverlay .modal-order {
  background-color: #fff;
  width: 950px;
  border-radius: 6px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  position: relative;
  padding: 10px 20px;
  box-sizing: border-box;

  display: flex;
  flex-direction: column;

  /* 画面の9割程度までの高さに制限しつつ、スクロールを表示しない設定 */
  max-height: 90vh;
  overflow-y: hidden; /* ここもoverflow-y: hidden; => 内部の特定領域でスクロール */
}

/*************************************************************
  *  モーダルヘッダー
  *************************************************************/
#SetOrderModalOverlay .modal-order-header {
  display: flex;
  justify-content: flex-end; /* 右寄せ */
  align-items: center;
  margin-bottom: 10px;
}
#SetOrderModalOverlay .modal-order-header .close {
  font-size: 20px;
  cursor: pointer;
}

/*************************************************************
  *  2カラムレイアウト
  *************************************************************/
#SetOrderModalOverlay .modal-order-content {
  /* ヘッダーより下の余白をすべて2カラムに使う */
  flex: 1;
  display: flex;
  gap: 20px;

  /* 親レベルではスクロールを出さない (内部要素のみスクロール) */
  overflow-y: hidden;
}

/*---------------------------------------------
  左カラム：ヘッダー固定 + リストのスクロール
---------------------------------------------*/
#SetOrderModalOverlay .left-column {
  flex: 1;
  flex-direction: column;

  /* 親要素（.content）ではoverflow-y: hiddenだが、ここでもさらに隠す */
  overflow: hidden;
  min-height: 0; /* flexアイテムが正しい高さ計算をするためのテクニック */
}

/* 左カラムのヘッダー */
#SetOrderModalOverlay .left-header {
  position: sticky;  /* スクロールしても表示を固定 */
  top: 0;
  z-index: 1;        /* 背後のリストより前面に */
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff; /* sticky時 背景が透けないように */
}
#SetOrderModalOverlay .left-header h3 {
  margin: 0;
  font-size: 14px;
}
#SetOrderModalOverlay .left-header button {
  background-color: #029ff4;
  color: #fff;
  border: none;
  font-size: 13px;
  padding: 6px 12px;
  cursor: pointer;
  border-radius: 4px;
}
#SetOrderModalOverlay .left-header button:hover {
  opacity: 0.8;
}

/* スクロール領域 (左カラム下部) */
#SetOrderModalOverlay .left-scroll-area {
  flex: 1;
  overflow-y: auto;  /* ここでスクロールバーを表示 */
  padding-top: 5px;
  height: 90%;
}

/*************************************************************
  *  PC / スマホ用画像ブロック
  *************************************************************/
#SetOrderModalOverlay .image-block {
  background-color: #fff;
  border: 1px solid #ddd;
}

#SetOrderModalOverlay .image-block h4 {
  margin: 0;
  background-color: #555;
  color: #fff;
  padding: 5px 10px;
  font-size: 13px;
  font-weight: bold;
  border-bottom: 1px solid #ddd;
}
#SetOrderModalOverlay .image-list {
  padding: 5px 10px;
}
/* 画像タイプ行 */
#SetOrderModalOverlay .type-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #f0f0f0;
  padding: 4px 0;
  font-size: 13px;
}
#SetOrderModalOverlay .type-item:last-child {
  border-bottom: none;
}
#SetOrderModalOverlay .type-label {
  white-space: nowrap;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
}
#SetOrderModalOverlay .type-label input[type=text],
#set_images .selected-item input[type=text]{
  width: 39px;
  padding: 2px 5px;
  font-size: 12px;
  border-radius: 0px;
}

#SetOrderModalWindow .is_gif,
#set_images .is_gif {
  margin-right: -8px;
}
#SetOrderModalOverlay .actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
#SetOrderModalOverlay .plus-btn,
#SetOrderModalOverlay .minus-btn {
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  line-height: 24px;
  text-align: center;
  padding: 0;
}
#SetOrderModalOverlay .plus-btn {
  background-color: #28a745; /* +用 */
}
#SetOrderModalOverlay .minus-btn {
  background-color: #dc3545; /* -用 */
}
#SetOrderModalOverlay .plus-btn:hover {
  background-color: #218838;
}
#SetOrderModalOverlay .minus-btn:hover {
  background-color: #c82333;
}

/*************************************************************
  *  右カラム
  *************************************************************/
#SetOrderModalOverlay .right-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  box-sizing: border-box;

  /* 親要素（.content）はoverflow-y: hiddenだが、ここでも隠し、内部でスクロール */
  overflow: hidden;
  min-height: 0;
}

/* 選択中の画像一覧ヘッダー */
#SetOrderModalOverlay .selected-images-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 5px;
}
#SetOrderModalOverlay .selected-images-header h3 {
  margin: 0;
  font-size: 14px;
}
#SetOrderModalOverlay .selected-images-header .count {
  font-size: 13px;
  color: #555;
}

/* 選択中の画像一覧(要素が増えたときにスクロール) */
#SetOrderModalOverlay .selected-images {
  background-color: #ffffe0;
  border: 1px solid #ddd;
  position: relative;
  margin-bottom: 10px;
  padding: 10px;

  /* 上下に伸縮して余ったらスクロール */
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 150px;
}
#SetOrderModalOverlay .selected-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
#SetOrderModalOverlay .selected-item {
  position: relative;
  font-size: 13px;
  padding: 6px 10px;
  border: 1px solid #eee;
  margin-top: -1px;
  background: #fff;
}

#SetOrderModalOverlay .selected-item-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#SetOrderModalOverlay .gif-check {
  margin-left: 8px;
  white-space: nowrap;
}

/*************************************************************
  *  依頼内容 & 素材アップロード (横並び)
  *************************************************************/
#SetOrderModalOverlay .detail-and-material {
  display: flex;
  gap: 10px;
  margin-bottom: 10px; /* 下端の余白 */
  flex: 1 1 auto;      /* 必要に応じて強制的に高さ確保 */
}
#SetOrderModalOverlay .detail-area {
  display: flex;
  flex-direction: column;
  flex: 2;
  box-sizing: border-box;
  background-color: #fff;
}
#SetOrderModalOverlay .detail-area h4 {
  margin: 0 0 6px;
  font-size: 13px;
}
#SetOrderModalOverlay .detail-area textarea {
  width: 100%;
  min-height: 140px;
  height: 80%;
  box-sizing: border-box;
  resize: vertical;
  font-size: 13px;
  color: #333;
  padding: 5px;
  flex-grow: 1;
}
#SetOrderModalOverlay .material-area {
  flex: 1;
  box-sizing: border-box;
  background-color: #fff;
  display: flex;
  flex-direction: column;
}
#SetOrderModalOverlay .material-area h4 {
  margin: 0 0 6px;
  font-size: 13px;
}
#SetOrderModalOverlay .upload-box {
  border: 2px dashed #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fafafa;
  border-radius: 5px;
  cursor: pointer;
  flex-grow: 1;
  position: relative;
}
#SetOrderModalOverlay .upload-box:hover {
  background-color: #f5f5f5;
}
#SetOrderModalOverlay .upload-box .material-symbols-outlined {
  font-size: 32px;
  color: #888;
}

#material_images {
  position: absolute;
  top: 0px;
  left: 0px;
  overflow-y: auto;
}

.upload_icon {
  z-index: 1;
}

#SetOrderModalOverlay .upload-box img {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 2px;
  border: 1px solid var(--border-color);
}

/*************************************************************
  *  依頼するボタン
  *************************************************************/
#SetOrderModalOverlay .submit-btn {
  background-color: var(--primary-color);
  border: none;
  color: #fff;
  width: 100%;
  padding: 10px;
  text-align: center;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  flex-shrink: 0; /* ボタンが潰れないように */
}
#SetOrderModalOverlay .submit-btn:hover {
  opacity: 0.8;
}

/*************************************************************
  *  お知らせ
  *************************************************************/
span.information_type {
  padding: var(--space-md);
  display: inline-block;
  margin-right: 10px;
  width: 150px;
  text-align: center;
  background: #ddd;
  cursor: pointer;
}
span.information_type.active {
  background: var(--primary-color);
  color: #fff;
  font-weight: 800;
}
span.view_information_type {
  display: inline-block;
  width: 85px;
  padding: 0px 3px;
  text-align :center;
  border-radius: 20px;
}

span.rect_view_information_type {
  display: inline-block;
  width: 85px;
  padding: 0px 3px;
  text-align :center;
}

span.view_information_type.normal {
  background: #ddd;
} 
span.view_information_type.important {
  background: #f00;
  color: #fff;
} 
span.rect_view_information_type.normal {
  background: #039ff4;
  color:#fff;
} 
span.rect_view_information_type.important {
  background: #f00;
  color: #fff;
} 
span.view_information_type.normal::after {
  content: "お知らせ";
}
span.view_information_type.important::after {
  content: "重要";
}
span.rect_view_information_type.normal::after {
  content: "お知らせ";
}
span.rect_view_information_type.important::after {
  content: "重要";
}
button.banner_delete_btn {
  position:absolute;
  top:0px;
  right: 0px;
  background: #f00;
  color: #fff;
}
.info_banner_uploder .drop-area {
  border: 2px dashed #ccc;
  padding: 10px;
}

.info_banner_uploder .drop-area:hover {
  border: 2px dashed var(--primary-color);
  transition:none;
}
img.banner_edit {
  cursor:pointer;
  width: 350px;
  height: 80px;
}
img.info_banner {
  width: 350px;
  height: 80px;
}

.drop-area input[type=file] {
  display: none;
}

div.information-container {
  margin: 10px 10px;
  height: 165px;
  display: flex;
  flex-direction: row;
  gap: 10px;
}

div.information-container div.information-lists {
  width: calc(100% - 720px);
}

div.information-lists h3 {
  padding: 5px 20px;
  background: var(--primary-color);
  border-top-right-radius: var(--border-radius);
  border-top-left-radius: var(--border-radius);
  color: #fff;
}

div.information-container div.information-banner-lists {
  width: 710px;
}

div.information-wrap {
  height: 130px;
  border-bottom-right-radius: var(--border-radius);
  border-bottom-left-radius: var(--border-radius);
  background: #fff;
  padding-top: 10px;
}

ul.information {
  overflow: auto;
  margin: 0px 20px 20px 20px;
  height: 110px;
}

ul.information li {
  display: flex;
  flex-direction: row;
  gap: 10px;
  height: 35px;
  padding-top: 5px;
  border-bottom: 1px solid var(--border-color);
}
ul.information li:last-child {
  border-bottom: none;
}
div.view_due_date {
  display: inline-block;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-large);
  font-weight: var(--font-weight-bold);
  padding: 4px var(--space-md);
  border-radius: var(--border-radius);
  background: #14b5b0;
  border: none;
  box-shadow: var(--box-shadow);
  text-decoration: none;
}

div.view_due_date.customer_view_date {
  padding: 7px var(--space-md);
}

ul.due_date {
  list-style: none;
  display: flex;
  flex-direction: column;
  margin-left: 10px;
  gap: 1px;
}

ul.due_date li {
  display: flex;
  flex-direction: row;
  height: 15px;
  border: 1px solid var(--border-color);
  font-size: 11px;
}

ul.due_date li div.due_date_label {
  background: #434343;
  color: #fff;
  width: 75px;
  text-align: center;
  font-size: 9px;
  font-weight: 100;
}
ul.due_date li div.due_date_text {
  background: #fff;
  color: var(--text-color);
  padding: 0px 10px;
  font-size: 10px;
}
span.due_date_text {
  background: #fff;
  color: var(--text-color);
  padding: 0px 10px;
  font-size: 12px;
  margin-left: 10px;
}
span.txt_middle {
  vertical-align: middle;
}
div.info_date {
  font-size: 12px;
}
div.info_type {
  font-size: 11px;
  padding: 2px 3px;
}
div.info_text {
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
div.info_text a {
  text-decoration: none;
}
div.info_text a:hover {
  text-decoration: underline;
  color: var(--primary-color);
}
div.due_date_info {
  padding-left: 20px;
  font-size: 10px;
  margin: -10px 0px -5px 0px;
}
span.due_date_announce {
  font-size: 10px;
}

button.upload_button {
  padding: 3px 5px;
  background: #fff;
}

div.select_image {
  padding: 3px 5px;
  background: #fff;
  border: 1px solid var(--border-color);
  margin-top: -1px;
}

div.select_image_child {
  padding: 3px 5px;
  background: #fff;
  border: 1px solid var(--border-color);
  margin-top: -1px;
}

div.language-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

div.select_language {
  width: 150px;
  background: #efefef;
  text-align: center;
  margin: 2px;
  padding: 10px;
  border-radius:var(--border-radius);
  cursor: pointer;
}

div.select_language:hover,
div.select_language.active {
  background: var(--primary-color);
  color: #fff;
}

div.language_selected {
  margin-top: 5px;
  line-height: 26px;
}

span.language_select {
  background: var(--primary-color);
  color: #fff;
  text-align: center;
  margin: 2px;
  padding: 00px 10px;
  font-size: 12px;
  border-radius:var(--border-radius);
  display: inline-block
}

#set_images div.language_selected span {
  cursor: pointer;
}

span.language_not_select {
  background: var(--sub-color);
  color: #000;
  text-align: center;
  margin: 2px;
  padding: 00px 10px;
  font-size: 12px;
  border-radius:var(--border-radius);
  display: inline-block;
}

svg.select-item-close-btn {
  width: 16px;
  height: 16px;
  opacity: 1;
  position: absolute;
  top: 9px;
  left: -8px;
  cursor: pointer;
}
img.upload_material_image {
  cursor: pointer;
}

#search_result #selected_images div.edited {
  border-color: #FE1F1F;
  background-color: #ffd5d6;
}

div.margin_top_20 {
  margin-top: 20px;
}

div.edit_product_point {
  background: #ccc;
  margin: 0px -10px -10px -10px;
  padding: 0px 10px;
  text-align :right;
}
div.edit_product_point span{
  font-size: 12px;
}
div.edit_product_point input.input_product_point {
  width: 100px;
  padding: 3px 10px;
}

div.uploaded_list div.uploaded_image {
  display:inline-block;
  width:50px;
  height:47px;
  overflow:hidden;
  border: 1px solid var(--border-color);
  text-align: center;
  background: #fff;
}

div.uploaded_list div.uploaded_image img {
  max-height:47px;
}


div.uploaded_list div.select_image_type {
  display:inline-block;
  width:calc(100% - 54px);
  margin-left: 3px;
}

div.uploaded_list div.select_image_type select{
  color: #ccc;
}

div.uploaded_list div.select_image_type select.active{
  color: var(--text-color);
}

div.uploaded_list div.uploaded_item {
  display: flex;
  flex-direction: row;
}

#upload_images div.upload_submit {
  margin-top: 20px;
  text-align: center;
}

#upload_images div.upload_submit button.btn {
  display: inline-block;
}


option.no_select {
  color: #ccc;
}
option.selected {
  color: var(--text-color);
}

div.delivery_multi {
  width: 100%;
  max-height: 250px;
  overflow: auto;
}

div.delivery_multi a.delivery_download_link {
  display: flex;
  flex-direction: row;
  border-bottom: 1px solid var(--border-color);
  background: #fff;
  color: var(--text-color);
  text-decoration: none;
}

div.delivery_multi a.delivery_download_link:hover {
  background:var(--primary-color);
}

div.delivery_multi div.deliveried_img {
  display:inline-block;
  width:30px;
  height:30px;
  overflow:hidden;
  border: 1px solid var(--border-color);
  text-align: center;
  background: #fff;
  margin: 5px 0 5px 10px;
}

div.delivery_multi div.deliveried_img img {
  max-height:30px;
}

div.delivery_multi div.delivery_image {
  display:inline-block;
  position: relative;
  width:calc(100% - 30px);  
  height: 30px;
  margin-left: 3px;
  text-align: left;
  margin: 5px 0 5px 10px;
}

div.delivery_multi div.delivery_image span.image_name {
  vertical-align: middle;
  font-size: 12px;
}

div.delivery_multi div.delivery_image span.download-icon {
  font-size: 16px;
  background: transparent;
}

div.delivery_multi div.upload_submit {
  margin-top: 20px;
  text-align: center;
}

div.delivery_multi div.upload_submit button.btn {
  display: inline-block;
}

#input_area {
  position: relative;
}

#important_chat {
  color: #ccc;
  position: relative;
  left: calc(var(--space-md) * -1 - 25px);
  top: -5px;
  cursor: pointer;
}

#important_chat.active {
  color: #f00;
}

#edit_chat {
  position: absolute;
  top:-27px;
  right: 0px;
  background: #fff;
  border-radius: 5px;
  z-index:40;
  padding: 5px;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
  color: var(--text-color);
  font-size: 12px;
}

#edit_chat.customer {
  min-width: 150px;
}

#edit_chat span {
  padding: 0px 20px;
  border-right: 1px solid var(--border-color);
  cursor: pointer;
  z-index:2147483641;
}

.edit_btn:hover {
  color: var(--primary-color);
  font-weight: 700;
}

#edit_chat span:last-child {
  border:none;
}

#edit_chat_text {
  min-width: 300px;
  margin-bottom: 50px;
  font-size: 12px;
  padding: 0px;
  border-radius: 0px;
}

#edit_chat_submit {
  position: absolute;
  left: 15px;
  bottom: 10px;
}

#edit_chat_cancel {
  position: absolute;
  right: 15px;
  bottom: 10px;
}

span.chat_date_edited_at {
  font-size: 0.9em;
  color: #ddd;
}
div.chat_send_at .visibled {
  margin-left: 5px;
  font-size: 14px;
  vertical-align: bottom;
}

.chat_keep {
  margin-top: 10px;
}
.chat_keep h5 {
  padding: 0px 10px;
  border-bottom: 1px solid var(--border-color);
  margin: 0px 10px 10px 10px;
}
.chat_keep ul {
  margin-bottom: 10px;
}

.chat_keep li {
  position: relative;
}

.chat_keep ul, .chat_keep li {
  list-style: none;
  margin-left: 20px;
}

.chat_keep li a{
  text-decoration: none;
}
.chat_keep li a:hover{
  color: var(--primary-color);
}

.chat_keep .keep_icon  {
  font-size: 18px;
  vertical-align: bottom;
  color: var(--text-color);
}
svg.chat-keep-close-btn {
  width: 16px;
  height: 16px;
  opacity: 1;
  position: absolute;
  top: 5px;
  left: -20px;
  cursor: pointer;
}

div.designer_search{
  margin-bottom: 10px;
}

table.designer_search_table thead tr th {
  vertical-align: middle;
  font-size: 14px;
  text-align: center;
}

table.designer_search_table thead tr th.sort {
  cursor: pointer;
}
table.designer_search_table thead tr th.sort:hover {
  color: #333;
}

table.designer_search_table tbody tr td {
  text-align: center;
}

table.designer_search_table tbody tr td:nth-child(1) {
  text-align: left;
  padding-left: 10px;
}

div.sort {
  overflow: none;
}

img.sort_icon {
  vertical-align: middle;
  margin-left: 15px;
}

#not_select_btn  td{
  padding: 20px 0px;
  border: 1px solid var(--border-color);
}

#designer_search_txt {
  width: 200px;
}

.disabled {
  background: #ccc;
  color: #fff;
}

div.order_type_description {
  width: 600px;
  margin-left: 50px;
  font-size: 12px;
}
div.order_type_description h6 {
  font-size: 14px;
}

.order_type_1 {
  background: #d6f6da;
}

.order_type_2 {
  background: #f6d6d6;
}

.order_type_3 {
  background: #f6f6d6;
}