@charset "utf-8";
/* ------------------ */
/* 全体 */

/* menuのh1の大きさ */

h1.menu_01 {
  font-size: 25px;
  margin: 5px;
  font-family:Georgia, 'Times New Roman', Times, serif
}

/* ------------------ */
/* footer用にレイアウト調整 */
body {
   margin: 0;
   padding: 0;
   list-style: none;
   color: #333;
   background:#fff;
 }
 .tool_color span {
  color:#068ac7;
  font-style: italic;
  font-size: 1.2rem;
 }
 a {
  text-decoration: none;
  color: #000;
 }
 .main-title{
   position: fixed;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
 }

 
 /* ------------------ */
 /* フッター */
 /* ------------------ */
 /* メニューをページ下部に固定 */
 #fixed-footer-menu {
   position: fixed;
   width: 100%;
   bottom: 0px;
   opacity: 1;
 }
 
 /* メニューを横並びにする */
 #fixed-footer-menu ul {
   display: flex;
   list-style: none;
   padding: 0;
   margin: 0;
   width: 100%;
   background: #eee;
 }


 .fixed-footer-menu_tool {
  display: flex;
  padding: 0;
  margin: 20px;
  width: 100%;

}
 
 /* メニューの要素 */
 #fixed-footer-menu li {
   justify-content: center;
   align-items: center;
   width: 25%; /* 要素が5つの場合（100/5） */
   padding: 0;
   margin: 0;

 }

 
 /* メニューのボタン */
 #fixed-footer-menu li a {
   color: #333;
   text-align: center;
   display: block;
   width: 100%;
   padding: 10px 0px 0px 0px;
   font-size:11px;
   text-decoration: none;
 }
 
 /* メニュータイトル */
 #fixed-footer-menu li p {
   font-size: 11px; /* メニュータイトルのフォントサイズ */
   text-align: center;
 }
 
 /* アイコンのサイズを調整 */
 .footer-icon {
   font-size: 22px;
   fill: #1D9BF0;
 }

 /* ロゴマークを調整 */
 img.example1 {
  width: 200px;
  height: 50px;
  padding: 10px 10px 10px 10px;
 }

 i.fa-solid {
  margin: 0.3rem;
  transition: transform .2s;
  &:active {
    transform: scale(.85);
  }
 }
 i.fa-solid:hover {
  opacity: 0.5;
  color: #03a9f4;
 }

 /*=========グラフ表示のためのCSS ===============*/

.chart-area {/*円グラフがスマホでつぶれないようにする*/
  position: relative;
  width: 100%;
  height: 50vh;
}

/*========= レイアウトのためのCSS ===============*/
p {
  margin: 0.2rem;
}

h1{
  text-align: center;
  text-transform: uppercase;
  font-size: 4rem;
  margin:30px 0;
}
h2 {
  margin: 10px;
  font-size: 20px;
}

.lead{
  padding: 20px;
  text-align: center;
}

.box{
  max-width:600px;
  width:100%;
  margin:100px auto 20px auto;
  padding: 20px;
  background:#fff;
  text-align: center;
}
.flex-container {
  display:grid;
  margin-right: 10px;

}
.sample {
  width: 100px;
  height: 100px;
  background: red;
}
.flex2-container {
  display:flex;
}
.form-select {
  margin: 5px;
}
.col-auto {
  text-align: right;
  margin: 10px; 
}
.col-auto .mb-3 {
  width: 80%;
  border-radius: 15px;
}
.mb-3 {
  margin: 5px;
}
.table {
  font-size: 9px;
  font-weight: bold;
  margin-bottom: 60px;
}
.table-light {
  position: sticky;
  top: 50px;
  left: 0;
  color: #068ac7;
  z-index: 1;
}
.table-light_task {
  position: sticky;
  top: 50px;
  left: 0;
  margin-bottom: 80px;
}
.table-light th {
  font-size: 10.5px;
}
.table-body {
  position: sticky;
  top: 50px;
  left: 0;
  bottom: 30px
}
.color {
  color: red;
}
.table-body tr {
  height: 70px;
}
 header {
  position: sticky;
  justify-content: space-between;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  background-color: #fff;
}
.inner_2 {
  justify-content: space-between;
  display: flex;
  -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
          box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
}
.inner {
  justify-content: space-between;
  display: flex;
}
/*---------task2------------*/
.tool_color {
  font-weight: bold;
  font-family: 'メイリオ';
}
.tool_color2 p {
  font-family: 'メイリオ';
}


/*------------------------------------
  bar graph
------------------------------------*/
.bar-graph-wrap .number p {
  font-weight: bold;
  font-size: 12px;
  color: #000;
}
.bar-graph-wrap .name p {
  font-weight: bold;
  font-size: 10px;
  margin-left: 0;
  font-family: 'メイリオ';
}
.bar-graph-wrap {
  position: relative;
  height: 450px;
  -webkit-box-shadow: 0 15px 30px rgba(0, 0, 0, 0.6);
          box-shadow: 0 15px 30px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}
.bar-graph-wrap .graph {
  height: 50px;
  position: absolute;
  left: 0;
  border-radius: 0 6px 6px 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 10px;
  -webkit-animation: graphAnim 1s forwards;
          animation: graphAnim 1s forwards;
}
.bar-graph-wrap .graph span p {
  font-size: 15px;
  color: #000;
}
@media screen and (max-width: 750px) {
  .bar-graph-wrap .graph span p {
    font-size: 15px;
  }
}
@media screen and (min-width: 1000px) {
  .table {
    font-size: 25px;
  }
  .table-light th {
    font-size: 25px;
  }
  .menu {
    font-size: 25px;
  }
  .flex2-container select {
    font-size: 25px;
  }
  .mb-3 input {
    font-size: 25px;
  }
  .mb-3 select{
    font-size: 25px;
  }
  .col-auto button {
    font-size: 25px;
  }
  .products-container select {
    font-size: 25px;
  }
  .products-container input {
    font-size: 25px;
  }
  .icon_container {
    font-size: 25px;
  }
  .icon_container span {
    font-size: 25px;
  }
  .table-body td img {
    width: 50px;
  }
}
.bar-graph-wrap .graph.chip {
  top: 2%;
  background: #03a9f4;
  width: 88%;
  height: 70px;
}
.bar-graph-wrap .graph.mill {
  top: -49%;
  bottom: 0;
  margin: auto;
  background: #ff3051;
  width: 65%;
  height: 70px;
}
.bar-graph-wrap .graph.drill {
  top: -17.2%;
  bottom: 0%;
  margin: auto;
  background: #1fd26c;
  width: 27%;
  height: 70px;
}
.bar-graph-wrap .graph.reamer {
  top: 14%;
  bottom: 0%;
  margin: auto;
  background: #d21f7c;
  width: 20%;
  height: 70px;
}
.bar-graph-wrap .graph.tap {
  top: 45.8%;
  bottom: 0%;
  margin: auto;
  background: #1fd2bd;
  width: 20%;
  height: 70px;
}
.bar-graph-wrap .graph.center_drill {
  top: 77.3%;
  bottom: 0%;
  margin: auto;
  background: #2eb708;
  width: 20%;
  height: 70px;
}
.graph.center_drill .number p {
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-style: italic;
  font-size: 1.5rem;
}
.graph.drill .number p {
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-style: italic;
  font-size: 1.5rem;
}
.graph.chip .number p {
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-style: italic;
  font-size: 1.5rem;
}
.graph.mill .number p {
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-style: italic;
  font-size: 1.5rem;
}
.graph.reamer .number p {
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-style: italic;
  font-size: 1.5rem;
}
.graph.tap .number p {
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-style: italic;
  font-size: 1.5rem;
}
 
@-webkit-keyframes graphAnim {
  10% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
 
@keyframes graphAnim {
  0% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}


/*========= ポップアップウィンドウのためのCSS ===============*/

.open {
	cursor:pointer;
}
#pop-up {
	display: none;
}
.overlay {
	display: none;
}
#pop-up:checked + .overlay {
	display: block;
	position: fixed;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
	z-index: 9999;
	background: rgba(0, 0, 0, 0.6);
}
.window {
	position: fixed;
	top: 50%;
	left: 50%;
	width: 90vw;
	max-width: 360px;
    padding: 20px;
	height: 300px;
	background-color: #fff;
	border-radius: 4px;
	align-items: center;
	transform: translate(-50%, -50%);
}
.close {
	position: absolute;
	top: 4px;
	right: 4px;
	cursor:pointer;
}
.fixed-footer-menu_tool {
  margin-top: 0;
}
.container {
  display: flex;
}
.inner a {
  margin: 10px 20px 0 20px;
}

/*----背景画像----------------*/

.back_ground {
  height: 85vh;
  opacity: 0.7;
  width: 100%;
  position: relative;
  display: flex;
  justify-content: center;
}
.back_ground .mb-3 {
  position: absolute;
  top: 50%;
  z-index: 999;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
.back_ground .mb-3 .btn-primary {
  position: absolute;
  top: 120px;
  z-index: 999;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

.back_ground .mb-3 .btn-success {
  position: absolute;
  top: 120px;
  z-index: 999;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
#login-footer-menu {
  text-align: center;
}

.back_ground h2 {
  position: absolute;
  top: 200px;
  z-index: 999;
  left: 48%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  font-family: 'メイリオ';
  font-weight: bold;
  color:#eee
}

.back_ground a {
  position: absolute;
  top: 500px;
  z-index: 999;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  color:#eee;
  text-decoration: underline;
  font-weight: bold;
  display: none;
}
.overlay {
	display: block;
	position: fixed;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
	z-index: 9999;
	background: rgba(0, 0, 0, 0.6);
}
.window {
	position: fixed;
	top: 50%;
	left: 50%;
	width: 75vw;
	max-width: 360px;
    padding: 20px;
	height: 150px;
	background-color: #fff;
	border-radius: 4px;
	align-items: center;
	transform: translate(-50%, -50%);
}
.close {
	position: absolute;
	top: 8px;
	right: 15px;
	cursor:pointer;
}
.btn_container .col-auto .btn {
  display: flex;
  justify-content: center; 
}
.icon_container{
  display: flex;
}
.icon img{
  width: 120px;
  padding-right: 50px;
}
.table-body img {
  width: 25px;
}
/* 大きく */
input[type="checkbox"]{
  transform: scale(2);
}
/* 3/31更新 */

.col-auto_2 {
  margin-bottom: 100px;
  text-align: center;
  padding-top: 30px;
}
@media print {
.col-auto_2 {
  display: none;
}
.order_container2 {
  display: none;
}
}
.order_container {
  margin: 5px;
  text-align: center;
  height: 100vh;
}
.order_container2 {
  text-align: center;
}
.order_container p {
  font-size: small;
  padding-top: 5px;
  margin-bottom: 20px;
}
.order_container span p {
  text-align: right;
  padding-right: 10px;
}

.mb-3_2 {
  size: small;
}

.textBox {
  border: 2px solid #333;
  border-radius: 5px;
  position: relative;
  width: 30%;
  left: 60%;
  top: 80%;
  text-align: left;
  }
.textBox::before {
  background-color: #fff;
  color: #333;
  content: "発注者";
  font-weight: bold;
  left: 10px;
  padding: 3px 10px;
  position: relative;
  top: -25px;
  }
.example {
  text-align: right;
  margin: 10px;
  padding-right: 5px;
}

/*-------アイコンアニメーション-*/

.contents {
  position: relative;
  display: grid;
  place-items: center;
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  background-color: #fff;
}

.loading-area {
  position: relative;
  font-size: 2rem;
  animation: bounce 1s ease-in-out infinite;
}

.loading-area span p {
  position: relative;
  top: -20%;
  font-weight: bold;
}

.loading-area span {
  position: absolute;
  left: 47.5%;
  top: -2px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background:#e0af5b;
  opacity: 0.8;
  }


@keyframes bounce {

  0%,
  100% {
      transform: translateY(0);
  }

50% {
  transform: translateY(-20px);
}

}

/*-------11/17新規style-*/

.products-container {
  margin: 10px;
  margin-right: 20px;
}

.products-container select {
  margin-top: 20px;
}

.products-container input {
  margin-top: 30px;
  margin-left: 5px;
}

.products-container2 {
    /* 1. コンテナの最大幅を設定 (ここでは例として400pxに設定) */
    max-width: 400px; 
    
    /* 2. 左右マージンを auto にすることで、ブロック要素を中央寄せ */
    margin-left: auto;
    margin-right: auto;
    
    /* 3. コンテナ内のインライン要素（テキストなど）を中央寄せにしたい場合 */
    text-align: center; 
}

.mb-3 {
  margin: 10px;
}

.col-auto {
  margin: 3px;
  margin-left: 20px;
  margin-right: 15px;
  display: flex;
  justify-content: center;
}
.col-auto a {
  width: 60%;
  text-align: center;
}
.col-auto select {
  display: flex;
  align-items: center;
  height: 85%;
  margin-top: 14px;
}
.product_contents {
  display: flex;
  justify-content: center;
  margin-top: 10px;
  margin: 10px;
}
.flex-item {
  margin: 10px;
}
.flex-item span {
  font-weight: bold;
  color:#068ac7;
}
.product_mb-3 input{
  width: 40px;
  margin-right: 10px;
  margin-left: 10px;
  margin-top: 15px;
}
.product_mb-3 {
  display: grid;
  margin: 15px;
  margin-top: 20px;
  padding-top: 5px;
}
.product_mb-3 nav {
  border-radius: 8px;
  -webkit-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.3);
          box-shadow: 0 4px 4px rgba(0, 0, 0, 0.3);
}

.inner_3 {
  justify-content: space-between;
  display: flex;
  -webkit-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.3);
          box-shadow: 0 4px 4px rgba(0, 0, 0, 0.3);
  background-color: #eee;
}
.col-auto_container {
  text-align: center;
  margin: 5px;
  margin-bottom: 20px;
  margin-top: 20px;
}

.col-auto .mb-3_2 {
  width: 85%;
  border-radius: 15px;
}

.col-auto_3 {
  width: 100%;
  padding-left: 15px;
  margin-right: 0;
  margin-bottom: 0;
}

.B {
  text-align: center;

}
.A {
  text-align: center;
  margin: 20px;
  padding: 10px;
}
.tool_item {
  display: flex;
  align-items: center;
  padding-top: 5px;
}
.tool_item input {
  margin-top: 2px;
  margin-bottom: 2px;
}
.col-auto .mb-3 {
  width: 85%;
  justify-content: center;
}
.tool_item img {
  width: 25px;
}
.navbar-toggler {
  margin-right: 10px;
}

.B{
  display: none;
}
.C{
  display: block;
  animation-delay: 0.1s;
}
.color2 {
  color: blue;
}
/*----------2025/3/19更新----*/

span h2 {
  text-align: center;
}
.menu {
  display: grid;
  text-align: center;
  grid-template-columns: 50% 50%;
  padding: 40px 10px;
}
.menu a {
  margin: 10px;
  background-color: #efeded;
  border-radius: 12px;
  box-shadow: 0 3px 5px 2px #eee;
  border: 1px solid #ccc8c8;
  transition: transform .2s;
  &:active {
    transform: scale(.95);
  }
}
.menu span {
  font-size: 12px;
}

.inner .btn {
  border-radius: 25px;
  margin: 0;
  opacity: 0.6;
}
.inner h2 {
  font-size: 15px;
  color: #fff;
  margin: 5px;
}
.inner {
  position: relative;
  justify-content: center;
  display: flex;
  
}
.x_mark  {
  position: relative;
  justify-content: right;
  display: flex;
  margin: 10px;
}
.tool_list {
  text-align: center;
}
.center-align{
  margin-bottom: 30px;
  align-items: center;
}
.red {
  color: red;
}
.blue {
  color: blue;
}
.green {
  color: green;
}
.black {
  color: #000;
  font-family: 'メイリオ';
}
.button_date {
  text-align: center;
}
.wrapper_chart {
  position:relative;
  width: 100%;
  background-color: white; /* またはデザインに合う任意の色 */
    padding: 10px;
    z-index: 100; /* 他のコンテンツの上に表示されるようにする */
}

/*---------赤------*/
.sh_red {
  margin: 20px 10px 20px 10px;
  background-color: #f4511e;
  border-radius: 25px;
  box-shadow: 0 5px 7px 2px #ccc;
  border: 1px solid #ccc8c8;
  transition: transform .02s;
  &:active {
    transform: scale(.95);
  }
}
.sh_red p {
  color: #fff;
  font-size: 17px;
  font-family: 'メイリオ';
}
.sh_red h2 {
  color: #fff;
  margin-left: 5px;
  margin-right: 5px;
}
.sh_red_today {
  margin: 20px 10px 20px 10px;
  background-color: #f4511e;
  border-radius: 25px;
  box-shadow: 0 0 8px 5px #f4d800;
  border: 1px solid #ccc8c8;
  transition: transform .02s;
  &:active {
    transform: scale(.95);
  }
}
.sh_red_today p {
  color: #fff;
  font-size: 17px;
  font-family: 'メイリオ';
}
.sh_red_today h2 {
  color: #fff;
  margin-left: 5px;
  margin-right: 5px;
}

/*---------青------*/
.sh_blue {
  margin: 20px 10px 20px 10px;
  background-color: #039BE5;
  border-radius: 25px;
  box-shadow: 0 5px 7px 2px #ccc;
  border: 1px solid #ccc8c8;
  transition: transform .02s;
  &:active {
    transform: scale(.95);
  }
}
.sh_blue p {
  color: #fff;
  font-size: 17px;
  font-family: 'メイリオ';
}
.sh_blue h2 {
  color: #fff;
  margin-left: 5px;
  margin-right: 5px;
}
.sh_blue_today {
  margin: 20px 10px 20px 10px;
  background-color: #039BE5;
  border-radius: 25px;
  box-shadow: 0 0 8px 5px #f4d800;
  border: 1px solid #ccc8c8;
  transition: transform .02s;
  &:active {
    transform: scale(.95);
  }
}
.sh_blue_today p {
  color: #fff;
  font-size: 17px;
  font-family: 'メイリオ';
}
.sh_blue_today h2 {
  color: #fff;
  margin-left: 5px;
  margin-right: 5px;
}

/*---------緑------*/

.sh_green {
  margin: 20px 10px 20px 10px;
  background-color: #2fff9a;
  border-radius: 25px;
  box-shadow: 0 5px 7px 2px #ccc;
  border: 1px solid #ccc8c8;
  transition: transform .02s;
  &:active {
    transform: scale(.95);
  }
}
.sh_green p {
  color: #000;
  font-size: 17px;
  font-family: 'メイリオ';
}
.sh_green h2 {
  color: #000;
  margin-left: 5px;
  margin-right: 5px;
}
.sh_green_today {
  margin: 20px 10px 20px 10px;
  background-color: #2fff9a;
  border-radius: 25px;
  box-shadow: 0 0 8px 5px #f4d800;
  border: 1px solid #ccc8c8;
  transition: transform .02s;
  &:active {
    transform: scale(.95);
  }
}
.sh_green_today p {
  color: #000;
  font-size: 17px;
  font-family: 'メイリオ';
}
.sh_green_today h2 {
  color: #000;
  margin-left: 5px;
  margin-right: 5px;
}

.example_1 {
  display: flex;
  justify-content: space-between;
  margin: 10px 20px 10px 10px;
  border-bottom: 1px solid #ccc;
}
.example_2 {
  display: flex;
  justify-content: space-between;
  margin: 10px 20px 10px 10px;
}
.wrapper_sh {
  padding-bottom: 60px;
}
.p_tool {
  margin: 20px 10px 20px 10px;
  border-radius: 10px;
  border: 1px solid #ccc;
}
.tool_container {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}
.tool_container input {
  width: 50px;
  margin: 10px;
}
.col-auto .mb-3 input{
  width: 100%;
  text-align: center;
}
.col-auto .mb-3 label{
  width: 100%;
  text-align: center;
}

.col-auto .mb-3{
  margin: 15px;
  text-align: center;
}
.mb-3 input {
  margin: 0;
  justify-content: center;
  align-items: center;
  display: flex;
}
.mb-3 .btn {
  margin-top: 15px;
  justify-content: center;
  align-items: center;
  display: flex;
}
.list-group {
  margin: 0 30px 50px 30px;
  box-shadow: 0 2px 6px 1px #eceaea;
}
.list-group a{
  color: #039BE5;
  font-weight: bold;
}

.red_font {
  color: red;
}

/*loading------------------------*/

/* ローディングオーバーレイを画面全体に固定 */
#loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex; /* Flexboxで中央寄せ */
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.8); /* 半透明の背景 */
  z-index: 9999; /* 他の要素より前面に表示 */
}

/* スピナーのデザイン */
.spinner {
  border: 4px solid rgba(0, 0, 0, 0.1);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border-left-color: #09f;
  animation: spin 1s infinite linear;
}

/* スピナーの回転アニメーション */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
/* ローディング画面を初期状態で非表示にする */
#loading-overlay {
  /* ... 上記のスタイルに加えて */
  display: none;
}

.master_container {
  margin: 20px;
  display: flex;
  position: relative;
  justify-content: center;
}

.product_title {
  text-align: center;
  margin: 20px;
}
.product_container {
  margin: 10px;
  display: grid;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}
.product_container .searchable-dropdown {
  width: 500px;
}
.product_container .form-control {
  height: 40px;
  align-items: center;
}
.product_container_order .btn {
  width: 150px;
  border-radius: 40px;
}
.master_container_order {
  margin: 20px;
  display: flex;
  position: relative;
  justify-content: center;
}
/* スマートフォン（画面幅 600px 以下に適用） */
@media (max-width: 600px) {
    .master_container_order {
        /* 上下のマージンを少し増やし、左右のスペースを減らす */
        margin: 10px 5px; 
        
        /* 最重要：要素を縦に並べる */
        flex-direction: column;
        
        /* 縦に並べた要素を中央寄せ */
        align-items: center;
        
        /* 横幅いっぱいに広げる（必要に応じて） */
        width: 98%; 
        max-width: none; 
    }
}
.product_container_order {
  margin: 10px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}
.product_container_order .searchable-dropdown {
  width: 500px;
}
.product_container_order .form-control {
  height: 40px;
  align-items: center;
}
._order .btn {
  width: 200px;
  border-radius: 40px;
}
 .p_product {
  margin: 20px 20px 20px 20px;
  border-radius: 10px;
  border: 1px solid #ccc;
  background-color: #eee;
  box-shadow: 0 2px 6px 1px #ccc;
}
.p_product_order {
  margin: 20px 20px 20px 20px;
  border-radius: 10px;
  border: 1px solid #ccc;
  background-color: #eee;
  box-shadow: 0 2px 6px 1px #ccc;
}
.p_product p {
  margin: 0 10px 20px 0;
  align-items: center;
  display: flex;
}
.order_grid {
  text-align: center;
}
.product_grid {
  display: none;

}
.product_grid_order {
  display: none;
  margin: 20px;
  padding: 20px;
  text-align: center;
}
.product_order_grid {
  display: none;
  text-align: center;
}
.product_grid .grid-item {
  display: flex;
  justify-content: center;
}
.header-left {
  grid-area: header-left;
}
.header-right {
  grid-area: header-right;
}
.grid-item {
  display: flex;
  align-items: center;
}
.bottom {
  grid-area: bottom;
}
.bottom2 {
  grid-area: bottom2;
}
.bottom3 {
  grid-area: bottom3;
}
.bottom4 {
  grid-area: bottom4;
}
.bottom5 {
  grid-area: bottom5;
}
.product_grid p {
  margin: 10px;
}
.product_grid input {
  margin: 5px;
  width: 50%;
}
.product_grid span input {
  margin: 5px;
  width: 100%;
}
.product_grid span textarea{
  margin: 5px;
  width: 200px;
  height: 100%;
}
.B {
  flex-direction: column; /* 子要素を縦に並べる */
  align-items: center;    /* 子要素を水平方向に中央寄せ */
  justify-content: center;  /* 必要に応じて、子要素を垂直方向にも中央寄せにしたい場合に */
  width: 100%;
}
.p_product .B .mb-3 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-right: 20px;
}
.p_product .B .mb-3 input {
  width: 97%;
}
.mb-3 > * {
  width: 100%;
  box-sizing: border-box;
}

.searchable-dropdown {
    position: relative;
    width: 100%;
}

#searchB {
    width: calc(100% - 30px); /* ボタンの幅を考慮 */
    padding: 10px;
    box-sizing: border-box;
    flex-grow: 1;
    width: 100%;
}

.dropdown-content {
    display: none;
    position: absolute;
    width: 100%;
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #ccc;
    background-color: #fff;
    z-index: 100;
}

.dropdown-content p {
    padding: 10px;
    margin: 0;
    cursor: pointer;
}

.dropdown-content p:hover {
    background-color: #f1f1f1;
}
.add_product_btn {
  display: flex;
  justify-content: center;
}
/* 1. 受注リストコンテナの基本設定 */
.product_order_grid {
    /* 既存のスタイル */
    height: 350px; /* 固定高さを維持 */
    display: none; 
    flex-direction: column;
    margin-bottom: 60px;
    
    /* ★全ての画面サイズで適用される共通の最大幅と中央揃えを定義 */
    max-width: 1200px; /* コンテナの最大幅を制限 */
    width: 90%;        /* 画面が狭いときは90%の幅を使う */
    margin-left: auto; /* 中央寄せの準備 */
    margin-right: auto;/* 中央寄せの準備 */
}
/* 1. 受注リストコンテナの基本設定 */
.product_order_grid_order {
    /* 既存のスタイル */
    height: 100%;
    display: grid; 
    flex-direction: column;
    margin-bottom: 20px;
    /* ★全ての画面サイズで適用される共通の最大幅と中央揃えを定義 */
    max-width: 1800px; /* コンテナの最大幅を制限 */
    width: 100%;        /* 画面が狭いときは90%の幅を使う */
/* 中央寄せを維持 */
    margin-left: auto;
    margin-right: auto;
}
/* 1. 受注リストコンテナの基本設定 */
.product_report {
    /* 既存のスタイル */
    height: 100%; /* 固定高さを維持 */
    display: grid; 
    flex-direction: column;
    margin-bottom: 60px;
    
    /* ★全ての画面サイズで適用される共通の最大幅と中央揃えを定義 */
    max-width: 1200px; /* コンテナの最大幅を制限 */
    width: 100%;        /* 画面が狭いときは90%の幅を使う */
    margin-left: auto; /* 中央寄せの準備 */
    margin-right: auto;/* 中央寄せの準備 */
}

/* 受注リストのスクロールコンテナ */
.product_order_grid .scrollable-orders {
    /* 縦スクロールの設定 (既存) */
    max-height: 350px; 
    overflow-y: auto; 
    
    /* ★★★ 横スクロールを有効にする設定 ★★★ */
    overflow-x: auto; 
    
    /* 高さを計算させるために必要 (既存) */
    min-height: 0; 
}


/* ★★★ テーブル自体がコンテナをはみ出すように設定 ★★★ */
.product_order_grid .scrollable-orders table {
    /* テーブルの幅を100%にすると横スクロールしないため、
       ここでは幅を指定せず、コンテンツの幅に合わせる（Bootstrapがデフォルトで設定していることが多い）
       または、意図的に最小幅を設定します。 */
    min-width: 700px; /* 例: カラムが全て収まる最小の幅を設定 */
    width: auto;     /* 幅を自動調整させる */
}

/* テーブルヘッダーの固定 (既存) */
.product_order_grid .scrollable-orders table thead {
    position: sticky; 
    top: 0;           
    z-index: 2;
    background-color: #f8f9fa;
}
/* 受注データ------------------------*/

/* 受注リストのスクロールコンテナ */
.product_order_grid_order .scrollable-orders {
    /* 縦スクロールの設定 (既存) */
    max-height: 650px; 
    overflow-y: auto; 
    
    /* ★★★ 横スクロールを有効にする設定 ★★★ */
    overflow-x: auto; 
    
    /* 高さを計算させるために必要 (既存) */
    min-height: 0; 
}


/* ★★★ テーブル自体がコンテナをはみ出すように設定 ★★★ */
.product_order_grid_order .scrollable-orders table {
    /* テーブルの幅を100%にすると横スクロールしないため、
       ここでは幅を指定せず、コンテンツの幅に合わせる（Bootstrapがデフォルトで設定していることが多い）
       または、意図的に最小幅を設定します。 */
    min-width: 100%; /* 例: カラムが全て収まる最小の幅を設定 */
    width: auto;     /* 幅を自動調整させる */
    font-size: 0.7rem;
}

/* テーブルヘッダーの固定 (既存) */
.product_order_grid_order .scrollable-orders table thead {
    position: sticky; 
    top: 0;           
    z-index: 2;
    background-color: #f8f9fa;
}
.table-light_order th {
    /* 垂直方向の中央寄せ (thの高さが固定または可変の場合に有効) */
    vertical-align: middle; 
    white-space: nowrap;
}
.table-light_order tr {
    /* 垂直方向の中央寄せ (thの高さが固定または可変の場合に有効) */
    vertical-align: middle; 
    white-space: nowrap;
}
.product_report .scrollable-report {
    /* 縦スクロールの設定 (既存) */
    max-height: 350px; 
    overflow-y: auto; 
    
    /* ★★★ 横スクロールを有効にする設定 ★★★ */
    overflow-x: auto; 
    
    /* 高さを計算させるために必要 (既存) */
    min-height: 0; 
}


/* ★★★ テーブル自体がコンテナをはみ出すように設定 ★★★ */
.product_report .scrollable-report table {
    /* テーブルの幅を100%にすると横スクロールしないため、
       ここでは幅を指定せず、コンテンツの幅に合わせる（Bootstrapがデフォルトで設定していることが多い）
       または、意図的に最小幅を設定します。 */
    min-width: 700px; /* 例: カラムが全て収まる最小の幅を設定 */
    width: auto;     /* 幅を自動調整させる */
}

/* テーブルヘッダーの固定 (既存) */
.product_report .scrollable-report table thead {
    position: sticky; 
    top: 0;           
    z-index: 2;
    background-color: #f8f9fa;
}
/* 受注データ------------------------*/

/* 受注リストのスクロールコンテナ */
.product_report .scrollable-report {
    /* 縦スクロールの設定 (既存) */
    max-height: 450px; 
    overflow-y: auto; 
    
    /* ★★★ 横スクロールを有効にする設定 ★★★ */
    overflow-x: auto; 
    
    /* 高さを計算させるために必要 (既存) */
    min-height: 0; 
}


/* ★★★ テーブル自体がコンテナをはみ出すように設定 ★★★ */
.product_report .scrollable-report table {
    /* テーブルの幅を100%にすると横スクロールしないため、
       ここでは幅を指定せず、コンテンツの幅に合わせる（Bootstrapがデフォルトで設定していることが多い）
       または、意図的に最小幅を設定します。 */
    min-width: 100%; /* 例: カラムが全て収まる最小の幅を設定 */
    width: auto;     /* 幅を自動調整させる */
    font-size: 0.7rem;
}

/* テーブルヘッダーの固定 (既存) */
.product_report .scrollable-report table thead {
    position: sticky; 
    top: 0;           
    z-index: 2;
    background-color: #f8f9fa;
}
.table .btn {
  font-size: 0.5rem;
}
/* 2. スマホ画面（幅が狭い場合）の調整 */
/* 画面幅が600px以下の場合の調整 (必要であれば) */
@media (max-width: 600px) {
/* ★★★ テーブル自体がコンテナをはみ出すように設定 ★★★ */
.product_order_grid_order .scrollable-orders table {
    /* テーブルの幅を100%にすると横スクロールしないため、
       ここでは幅を指定せず、コンテンツの幅に合わせる（Bootstrapがデフォルトで設定していることが多い）
       または、意図的に最小幅を設定します。 */
    min-width: 700px; /* 例: カラムが全て収まる最小の幅を設定 */
    width: auto;     /* 幅を自動調整させる */
    font-size: 0.6rem;
}

/* テーブルヘッダーの固定 (既存) */
.product_order_grid_order .scrollable-orders table thead {
    position: sticky; 
    top: 0;           
    z-index: 2;
    background-color: #f8f9fa;
}
  .product_order_grid {
        /* スマホでは画面いっぱいに広げたい場合 */
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding: 0 10px; /* 左右に少し余白を作る */
    }
    .product_order_grid_order {
        /* スマホでは画面いっぱいに広げたい場合 */
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding: 0 10px; /* 左右に少し余白を作る */
    }
    
    .master_container {
    /* 左右に見切れないようにパディングを確保 */
    padding: 10px; 
    box-sizing: border-box;
    flex-direction: column; 
    display: flex;
    align-items: center;
    /* その他のFlexbox/Grid設定... */
}
    .product_container {
        /* スマートフォンでは均等割り当てではなく、親要素の幅全体を使う */
        width: 100%;
        flex: none; /* flexの指定をリセット */
    }

  .product_container .searchable-dropdown {
    width: 300px;
    margin-left: 0;
    margin-right: 0;
    padding: 0 10px; 
}
}
/* -------------------------------------- */
/* 1. Flexコンテナの定義とスペースの調整 */
/* -------------------------------------- */
.order_item_flex {
    display: flex;
    /* 項目がコンテナからはみ出す場合に折り返す設定 (レスポンシブの基本) */
    flex-wrap: wrap; 
    /* 項目間にスペースを均等に配置 */
    justify-content: space-between; 
    /* 垂直方向の配置（必要に応じて） */
    align-items: flex-start; 
    /* 上下の余白のみ設定し、左右のパディングはBootstrapのモーダルに任せる */
    padding: 10px 0; 
    /* 項目間の間隔を確保 */
    gap: 15px 10px; /* 縦方向 15px, 横方向 10px のギャップ */
    /* 親コンテナの幅いっぱいに広げる */
    width: 100%; 
    margin: 0;
}

/* -------------------------------------- */
/* 2. 各入力フィールド（Flexアイテム）の幅調整 */
/* -------------------------------------- */
/* 入力フィールドのラッパー要素（<small> または <div>）を対象とします */
.order_item_flex > * {
    /* calc() を使用して、親コンテナの幅からギャップを引いた正確な50%を設定 */
    /* これがはみ出し解消の鍵です */
    width: calc(50% - 5px); 
    /* デフォルトの最小幅の設定を無効化（Bootstrapのフォームコントロールが適用されるように） */
    min-width: 0; 
    box-sizing: border-box; /* パディングやボーダーを含めて幅を計算 */
}

/* -------------------------------------- */
/* 3. 入力要素自体を100%に設定 */
/* -------------------------------------- */
/* <input> や <textarea> 自身は親要素の幅いっぱいに広げます */
.order_item_flex input[type="number"],
.order_item_flex input[type="text"],
.order_item_flex textarea,
.order_item_flex input[type="date"] {
    /* Bootstrapの .form-control クラスと同様の動作 */
    width: 100%; 
    box-sizing: border-box; 
}
.btn_container {
  display: flex;
  justify-content: center;
}
.btn_container .btn {
  border-radius: 20px;
}
.btn .btn-secondary {
  z-index: 999;
}
/* delivered-row クラス: 納入完了した行に適用 */
.delivered-row {
    /* 明るいグリーン系の背景 */
    background-color: #d4edda !important; 
    
    /* 濃いグリーンのテキスト */
    color: #155724; 
    
    /* ホバー時のストライプ効果をキャンセルして一貫性を保つ */
    /* テーブルのデザインによっては不要な場合があります */
    /*
    --bs-table-hover-bg: #c7e8d0;
    */
}

/* マウスオーバー時の強調表示を維持したい場合は、さらに以下を追加 */
.delivered-row:hover {
    background-color: #e0e0e0 !important;
}
.delivery-flag-checkbox {
    /* 垂直方向の中央揃え */
    vertical-align: middle; 
    /* 幅と高さを小さく指定 */
    width: 14px; 
    height: 14px;
}
.delivery-flag-checkbox {
    /* グリーン系の色を設定 */
    accent-color: #28a745; /* BootstrapのSuccessカラーに近い色 */
}
.delivery-flag-checkbox.is-static {
    /* クリックや操作を完全に無効化する */
    pointer-events: none; 
    
    /* カーソルをデフォルトに戻す（操作不可であることを示す） */
    cursor: default; 
    
    /* 念のため透明度を通常に戻す（ブラウザが薄く表示するのを防ぐ） */
    opacity: 1; 
}