body  {
  font-family: 'Noto Sans JP','Verdana','Helvetica','Arial',sans-serif;
}
h2 {
  font-size: 150%;
  border-bottom: 1px solid #999;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

.fs-7 {
  font-size: 0.8rem;
}

    /* Bootstrap3風のカラースキーム */
    .btn-primary { background-color: #337ab7; color: #fff; border: 1px solid #2e6da4; }
    .btn-secondary { background-color: #f5f5f5; color: #333; border: 1px solid #ccc; }
    .btn-success { background-color: #5cb85c; color: #fff; border: 1px solid #4cae4c; }
    .btn-info { background-color: #5bc0de; color: #fff; border: 1px solid #46b8da; }
    .btn-warning { background-color: #f0ad4e; color: #fff; border: 1px solid #eea236; }
    .btn-danger { background-color: #d9534f; color: #fff; border: 1px solid #d43f3a; }

    /* フラットデザイン風にシャドウを除去 */
    .btn {
      box-shadow: none !important;
      border-radius: 4px; /* Bootstrap3の丸み */

      transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
    }

    /* アイコンとの間隔 */
    i {
      margin-right: 5px;
    }

.btn:hover {
  opacity: 0.70;
  transform: scale(1.05); /* 少し大きく */
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);

  /*
  transform: translateY(-3px); / * ふわっと浮く * /
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); / * 軽い影 * /
  */


  /* ボタンの浮き上がりエフェクト 
    transition: all 0.2s ease-in-out;
  */

}

.btn-primary:hover {
  background-image: linear-gradient(45deg, #337ab7, #285f8f);
}

.btn-success:hover {
  background-image: linear-gradient(45deg, #5cb85c, #4cae4c);
  color: #000;
}

.btn-danger:hover {
  background-image: linear-gradient(45deg, #d9534f, #c9302c);
}

/*
.btn-submit-effect:hover {
  background-color: #e64a19;
  transform: scale(1.05); / * 少し大きく * /
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);

}
*/


.order-no, .order-date, .status, .meisai, .price,
.detail, .print, .copy, .delete { 
  text-align: center;;
}
.memo {
  text-align: left;
}
.precaution {
  text-align: left;
}
.special_notes {
  text-align: left;
}
.price {
  text-align: right;
  width: 200px;
}
.memo {
  width: 200px;
}
.detail, .print, .copy, .delete { 
  min-width: 80px;
}


.table-list .sp-btn-wrap {
  display: none;
}
.pc-center {
  text-align: center;
}
.pc-right {
  text-align: right;
}
.pc-only {
  white-space: nowrap;
}


.table-list th {
    text-align: center;  /* センター揃え */
    vertical-align: top; /* 上揃え */
}
.table-list .btn {
    white-space: nowrap; /* ボタンの文字を改行させない */
}


/* タブレット用（768px～1024px）: PCに近いが調整可能 */
@media (min-width: 768px) and (max-width: 1024px) {}

/* スマホ */
@media (max-width: 768px) {

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

    .table-list thead {
        display: none; /* ヘッダーを非表示 */
    }

    .table-list tbody, 
    .table-list tr {
        display: block;
        width: 100%;
    }

    .table-list tr {
        border: 1px solid #ddd;
        margin-bottom: 10px;
        padding: 10px;
        background: #fff;
    }

    .table-list td {
        display: block;
        padding: 5px;
        border-bottom: 1px solid #ddd;
    }

    /* 「商品画像」のラベルを消す */
    .table-list td[data-label="商品画像"]::before {
        content: none;
    }

    /* 画像を2列に広げる */
    .table-list .product-image {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        width: 100%;
    }

    .table-list .product-img {
        width: 100%;
        max-width: none;
        height: auto;
    }



  /* 各セルのラベル（疑似要素で表示） */
  .table-list td::before {
    content: attr(data-label);
    font-weight: bold;
    min-width: 100px;
    color: #555;
    display: inline-block;
  }
  .table-list td:first-child::before {
    color: #fff;
  }


  /* ボタンを横並びにする */
  .table-list .sp-buttons {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    justify-content: center;
  }

  /* PCでは個別の td だが、スマホではボタンを1つの td にまとめる */
  .table-list .btn-cell {
    display: none; /* PC用のボタンセルを隠す */
  }

  .table-list .sp-btn-wrap {
    display: block; /* スマホでボタンをまとめた1つのセルとして表示 */
  }

  /* 最後の td のボーダーを削除 */
  .table-list td:last-child {
    border-bottom: none;
  }

  .pc-only {
    display: none !important;
  }


  .price {
    width: initial;
  }
  .order-no { 
    background: black !important;
    color: white !important;
    border: 1px solid black;
  }
  .order-no, .order-date, .status, .meisai, .price,
  .detail, .print, .copy, .delete { 
    text-align: left;
  }
  /* .memo,*/
  .memo {
    width: initial;
  }

}

/* 画像のポップアップ表示 */
.popup-img {
  display: none;
  position: absolute;
  max-width: 300px; /* ポップアップの最大サイズ */
  border: 1px solid #333;
  background: #fff;
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
  z-index: 1000;
}

/* 以降 開発側が追加 */

.disabled-like-button {
  background-color: #919191;
  border: 1px solid #919191;
}

.product-image-thumbnail {
  width: 100%;
  aspect-ratio: 1 / 1; /* 縦横比を 1:1 に設定 */
  object-fit: contain;
}

.no-spinners::-webkit-inner-spin-button,
.no-spinners::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.no-spinners {
  appearance: none; /* 標準プロパティ */
}

.status-orange {
  color: #FD9A00 !important;
  font-weight: bold !important;
}

.status-green {
  color: #66B132 !important;
  font-weight: bold !important;
}

.status-red {
  color: #FF2712 !important;
  font-weight: bold !important;
}