@charset "utf-8";

body {
    padding: 0px !important;
    margin-bottom: 50px !important;
}

#GlobalNaviMenu {
  display: none;
}

#SpMenuModalContent {
  padding-top: 60px;
}

#Statement {
  height: 60px;
  font-size: small;
}
#StoreInfoHeader {
  font-size: small;
  text-align: right;
  padding-right: 5px;
  color: #774f2c;
}

#StoreInfoHeader > div {
  max-width: 400px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

@media (max-width: 759px) {
  #StoreInfoHeader > div {
    max-width: 200px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

#SpMenuBtn {
  display: block;
  width: 60px;
  height: 60px;
}

#FooterArea{
  margin-top: 50px;
}

#HivestContents {
  margin-top: 10px;
  color: #774f2c;
}

#MsgArea {
  width: 100%;
  border-radius: 20px;
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 10px;
  border: red;
  border-style: solid;
  font-size: large;
}
#MsgArea .error-message{
  color: red;
}

#MsgArea .info-message{
  color: #774f2c;
}

#InfoMsgArea {
  width: 100%;
  border-radius: 20px;
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 10px;
  font-size: large;
  list-style-type: none;
}
#InfoMsgArea .info-message{
  color: #774f2c;
}

#ErrorArea {
  width: 100%;
  border-radius: 20px;
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 10px;
  border: red;
  border-style: solid;
  font-size: large;
}

#ErrorArea .error-message{
  color: red;
}

#ErrorArea .info-message{
  color: #774f2c;
}

#MainArea {
  width: 100%;
  margin-top: 10px;
  margin-bottom: 10px;
}

.section {
  width: 100%;
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 10px;
  border: thin #774f2c;
  border-style: solid;
  border-radius: 10px;
  background-color: #f6f4f1;
}

.require-tag {
  width: 50px;
  min-width: 50px;
  border-radius: 5px;
  margin-top: 3px;
  padding: 3px;
  color: white;
  font-size: small;
  background: #f46a00;
  text-align: center;
}

input[readonly],textarea[readonly] {
  background-color: var(--bs-secondary-bg);;
}
input[readonly]:focus,textarea[readonly]:focus{
  background-color: var(--bs-secondary-bg);;
  outline: none;
}

.row {
  margin-top: 5px;
  margin-bottom: 5px;
}

.row label {
  text-align: right;
}

.btn-orange {
  --bs-btn-color: #fff;
  --bs-btn-bg: #f46a00;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #f46a00;
  --bs-btn-hover-border-color: #f46a00;
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #f46a00;
  --bs-btn-active-border-color: #f46a00;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #606060;
  --bs-btn-disabled-border-color: #606060;
}

.btn-brown {
  --bs-btn-color: #fff;
  --bs-btn-bg: #774f2c;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #774f2c;
  --bs-btn-hover-border-color: #774f2c;
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #774f2c;
  --bs-btn-active-border-color: #774f2c;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #606060;
  --bs-btn-disabled-border-color: #606060;
}

.btn-gray {
  --bs-btn-color: #fff;
  --bs-btn-bg: #BFBFBF;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #BFBFBF;
  --bs-btn-hover-border-color: #BFBFBF;
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #BFBFBF;
  --bs-btn-active-border-color: #BFBFBF;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #606060;
  --bs-btn-disabled-border-color: #606060;
}

.btn-yellow {
  --bs-btn-bg: #FFC000;
  --bs-btn-hover-bg: #FFC000;
  --bs-btn-hover-border-color: #FFC000;
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-bg: #FFC000;
  --bs-btn-active-border-color: #FFC000;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #606060;
  --bs-btn-disabled-border-color: #606060;
}

.form-check {
  /* チェックボックスにフォームラベルと同一の高さ調整を実施 */
  padding-top: calc(.375rem + var(--bs-border-width));
  padding-bottom: calc(.375rem + var(--bs-border-width));
}

.form-row {
  margin: 10px;
  display: flex;
  flex-wrap: nowrap;
}

.form-item {
  margin-left: 5px;
  margin-right: 5px;
}

.form-row .right{
  margin-left: auto;
}

.form-row .form-item:nth-child(1) {
  width: 200px;
  text-align: right;
}

.form-row .form-item:nth-child(2) {
  width: 50px;
  min-width: 35px;
  margin-top: 5px;
  text-align: left;
}

.form-row .form-item:nth-child(3) {
  width: 100%;
  text-align: left;
}

.form-row .has-button {
  display: flex;
  flex-wrap: nowrap;
}

.has-button button {
  width: 120px;
  min-width: 120px;
  margin: 5px;
}
@media screen and (max-width: 768px) {
  .form-row .has-button:has(button:nth-of-type(2)) {
    display: block;
  }

  .form-row .has-button:has(button:nth-of-type(2)) input.form-control {
    display: block;
    width: 100%;
    margin-bottom: 5px;
  }

  .form-row .has-button:has(button:nth-of-type(2)) button {
    width: 45%;
    display: inline-block;
  }

}
.form-row-2item {
  margin: 10px;
  display: flex;
  flex-wrap: nowrap;
}

.form-row-2item .right{
  margin-left: auto;
}

.form-row-2item .form-item:nth-child(1) {
  width: 200px;
  text-align: right;
}

.form-row-2item .form-item:nth-child(2) {
  width: 50px;
  min-width: 35px;
  margin-top: 5px;
  text-align: left;
}

.form-row-2item .form-item:nth-child(3) {
  width: 250px;
  text-align: left;
}

.form-row-2item .form-item:nth-child(4) {
  width: 200px;
  text-align: right;
}

.form-row-2item .form-item:nth-child(5) {
  width: 50px;
  min-width: 35px;
  margin-top: 5px;
  text-align: left;
}

.form-row-2item .form-item:nth-child(6) {
  width: 250px;
  text-align: left;
}

.button-row {
    display: flex;
    justify-content: space-evenly;
    align-items: stretch;
}

@media (max-width: 759px) {
  .mobile .form-row {
    flex-wrap: wrap;
  }

  .mobile .form-row .form-item:nth-child(1) {
    width: auto;
    text-align: left;
  }

  .mobile .form-row .form-item:nth-child(2) {
    width: auto;
    text-align: left;
  }
}

.hidden {
  display: none;
}

.item-err-msg {
  color: red;
}
.item-txt-msg {
  color: red;
}

.auto-complete {
  padding: 0;
  width: 400px;
  min-height: 240px;
  box-shadow: 1px 4px 5px lightgray;
}

.auto-complete-itemlist {
  min-height: 190px;
}

.auto-complete-item {
  padding: 3px;
  width: 100%;
  height: auto;          
  line-height: 30px;
  text-align: left;
  cursor: pointer;
  white-space: normal; /* 改行を許可 */
  word-break: break-word; /* 単語途中でも折り返し */
}

.auto-complete-item1list {
  height: 160px;
}

.auto-complete-item1 {
  padding: 3px;
  width: 100%;
  height: 30px;
  text-align: left;
  cursor:pointer
}

.auto-complete-item1list {
  height: 160px;
}

.auto-complete-item1 {
  padding: 3px;
  width: 100%;
  height: 30px;
  text-align: left;
  cursor:pointer
}

.auto-complete .disabled {
  pointer-events: none;
}

#TableScroll{
  overflow: auto;
  width: 100%;
  height: 200px;
}

#TableArea {
  overflow-y: scroll;
  overflow-x: scroll;
  max-height: 330px;
}

#TableArea table {
  margin-bottom: 0;
  white-space: nowrap;
}

#TableArea th{
  position: sticky;
  top: 0;
  left: 0;
  z-index: 3;
}

.fixed-column {
    position: sticky;
    right: 0;
}

#TableArea td{
  text-align: center;
  vertical-align: middle;
  top: 0;
  left: 0;
}

.table-brown{
  --bs-table-color: #fff;
  --bs-table-bg: #774f2c;
  --bs-table-border-color: #c6c7c8;
  --bs-table-striped-bg: #774f2c;
  --bs-table-striped-color: #fff;
  --bs-table-active-bg: #774f2c;
  --bs-table-active-color: #fff;
  --bs-table-hover-bg: #774f2c;
  --bs-table-hover-color: #fff;
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}

#TableFotter { 
  text-align: right;
}

#prev {
  cursor:pointer;
}

#next {
  cursor:pointer;
}

.no-border {
	border: none;
	background-color: white;
}

.flex-centerItem {
	justify-content: space-around;
}

.cursor_pointer{
	cursor: pointer !important;
}

.pull-block {
	display: flex;
	flex-wrap: nowrap;
}

.pull-block .pull-item {
	margin-right: 10px;
	display: flex;
	flex-wrap: nowrap;
}

.pull-block .pull-item:nth-child(1) {
	flex-grow: 3; /* 1つ目のアイテムの比率を2に */
}

.pull-block .pull-item:nth-child(2) {
	flex-grow: 1; /* 2つ目のアイテムの比率を1に */
}

.pull-block .pull-item:nth-child(3) {
	flex-grow: 3; /* 3つ目のアイテムの比率を2に */
}

.pull-block .pull-item:nth-child(4) {
	flex-grow: 1; /* 4つ目のアイテムの比率を1に */
}

.select-box {
	flex-grow: 1; /* `select-box` も親の幅に合わせて広がる */
}

.select-box select {
	position: relative;
	width: 100%; /* 親要素の幅に合わせて縮小 */
	padding-left: 10px;
	padding-right: 30px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: 1px solid #774f2c;
	border-radius: 6px; /* ← 角を丸く */
	background-color: #fff;
	outline: none; /* ← フォーカス時の青い枠を消す */
}
/* フォーカス時にも同じ枠線と角丸を維持 */
.select-box select:focus {
	border: 1px solid #774f2c;
	border-radius: 6px;
	outline: none;
}

.select-box select:disabled {
	background-color: var(--bs-secondary-bg);;
}
 
 
.select-box label {
	width: 80%;
	position: relative;
}

.select-box label:after {
	display: block;
	content: "▼";
	position: absolute;
	right: 0px;
	top: 0px;
	bottom: 0px;
	width: 30px;
	border-radius: 3px;
	text-align: center; /* ← ▼を中央寄せ */
	background-color: #774f2c;
	color: white;
	pointer-events: none;
}

.amount-input {
    text-align: right;
}

/* ローディングオーバーレイ全体 */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255,255,255,0.7);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.redFont{
	color:red;
}
a.disable {
	pointer-events: none;
	color: gray;
	cursor: default;
}

.form-item-limits {
  width: 95% !important;
  text-align: left !important;
}

.form-item-limits2 {
  padding-top: 7px;
  padding-left: 0.5rem;
  width: 5% !important;
  text-align: left !important;
}