@charset "utf-8";

/* Common */

.isNarrow {
  flex: 0 0 auto;
}

.isFluid {
  flex: 1 1 auto;
}

.isHidden {
  display: none !important;
}

.hasTextRight {
  text-align: right;
}

.hasTextCenter {
  text-align: center;
}

.myButton {
  letter-spacing: 0.15rem;
}

.inputField {
  background-color: snow !important;
  box-sizing: border-box !important;
}

.inputField:focus {
  border-color: red !important;
  background-color: #ffc !important;
  outline: none !important;
}

/* Wrapper */
/* #34285 品番から探すに金額表示を追加 ここから */
div.wrapper {
  min-width: 979px;
}
/* #34285 品番から探すに金額表示を追加 ここまで */

.sectionWrapper {
  display: flex;
}

.sectionWrapper:not(:first-child) {
  margin-top: 0.75rem;
}

.commodityCodeWrapper {
  display: flex;
  flex: 1 1 auto;
}


/* Contents */

.myFrame {
  flex-direction: column;
  border: 1px solid #6565D9;
}

.frameHeader {
  display: flex;
}

.frameBody {
  position: relative;
}

.frameRow {
  display: flex;
  flex: 1 1 auto;
}

.tableContainer {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.pnTableHeader {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  background-color: #DDDDFF;
  border: none;
  padding: 5px .75rem;
}

.pnTableBody {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  background-color: #FFFFFF;
}

.tableColumns {
  display: flex;
  align-items: center;
}

.tableColumn {
  display: flex;
}

.tableColumn+.tableColumn {
  margin-left: 1rem;
}

.tableRow {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  justify-content: center;
  padding: 0.75rem;
}

.tableRow:nth-child(2n) {
  background: #F6F6FF;
}


/* Original */

.bushoWrapper {
  padding: 0.75rem;
  background-color: #EEEEFF;
}

.searchForm {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.searchWrapper {
  display: flex;
  flex: 1 1 auto;
  position: relative;
}

.buttonSearch {
  position: relative;
  width: 32px;
  height: 28px;
  background-color: #4C4C4C;
  color: #FFFFFF;
  vertical-align: middle;
}

/* EMC 第四次改修 No.133追加 ここから */
.buttonSearch:hover {
  cursor: pointer;
}
/* EMC 第四次改修 No.133追加 ここまで */

.iconSearch {
  position: absolute;
  width: 14px;
  height: 14px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.iconSearch:hover {
  cursor: pointer;
}

/* #34285 品番から探すに金額表示を追加 ここから */
/* .inputCommodityCode {
  flex: 0 0 50%;
} */
.inputCommodityCode {
  flex: 0 0 calc(100% - 36px);
}
/* #34285 品番から探すに金額表示を追加 ここまで */

.inputQuantity {
  width: 48px;
  box-shadow: -5px 5px 10px rgba(0, 0, 0, 0.1);
}

.labelHeader {
  font-weight: bold;
  letter-spacing: 0.15rem;
}

/* #34285 品番から探すに金額表示を追加 ここから */
.labelHeader4Select {
  display: flex;
  flex-direction: row;
  padding-left: 12px;
  border: solid .5px;
  font-family: 'ＭＳ ゴシック';
  font-weight: bold;
  letter-spacing: -1.4px;
}
/* #34285 品番から探すに金額表示を追加 ここまで */

.labelAnnotation {
  font-size: 0.8rem;
  font-weight: normal;
  color: #ff0000;
  letter-spacing: 0 !important;
  margin-left: 0.25rem;
}

.selectCommodityInfo {
  margin-top: 8px;
  width: 100%;
  font-family: "ＭＳ ゴシック";
}

.selectCommodityInfo.isSafari {
  font-family: "Kosugi";
}

.commodityOption {
  font-family: "ＭＳ ゴシック";
}

.commodityOption.isSafari {
  font-family: "Kosugi";
}

.colNo {
  flex: 0 0 56px;
}

/* #34285 品番から探すに金額表示を追加 ここから */
.colHinban {
  flex-grow: 0;
}

/* .colCommodity {
  flex: 1 1 auto;
} */
.colCommodity {
  flex-basis: 360px;
}

.colPrice {
  margin-left: 40px;
  display: flex;
  flex: 1 0 auto;
}

.labelHeader.colPrice {
  margin-left: 1.5rem;
  flex-grow: 0;
}

.colPrice .unitPrice {
  min-width: 6.5rem;
  text-align: right;
}

/* .colQuantity {
  flex: 0 0 80px;
} */
.colQuantity {
  flex: 0 0 80px;
  margin-left: 3rem;
}

.colClear {
  flex: 0 0 96px;
  /* flex: 1 1 auto; */
}

.pnTableHeader .colClear {
  flex: 1 1 auto;
}

.headerStockWrapper {
  display: flex;
  justify-content: center;
  flex-grow: 1;
}

.priceSeparate {
  padding: 0 5px;
}
/* #34285 品番から探すに金額表示を追加 ここまで */

/* #34287 品番から探すのヘッダ表記改良 ここから */
.selModalHeaderPn {
  font-family: 'ＭＳ ゴシック';
  letter-spacing: -1.4px;
  padding: 5px 0 5px 12px;
  display: flex;
  flex-direction: row;
  background-color: #6565D9;
  color: white;
  font-weight: bold;
}

.labelHeader4Select.isSafari,
.selModalHeaderPn.isSafari {
  font-family: "Kosugi";
}

.headerStockWrapperModal {
  display: flex;
  flex-grow: 1;
  padding-right: 2rem;
  justify-content: flex-end;
}
/* #34287 品番から探すのヘッダ表記改良 ここまで */

/*----------------------------
レスポンシブ対応(タブレット)
----------------------------*/

@media (max-width: 959px) {
  /* お知らせ一覧 */
  .productNumber {
    flex-direction: column;
  }
  .productNumber .labelHeader {
    margin-left: 0;
    display: flex;
    flex-direction: column;
  }
  /* #34285 品番から探すに金額表示を追加 ここから */
  .labelHeader4Select {
    font-size: .75rem;
  }
  .headerStockWrapper {
    margin-left: -5rem;
  }
  .headerStockWrapperModal {
    padding-right: 6rem;
  }
  .labelHeader.colPrice {
    margin-left: 11rem;
  }
  .colPrice .unitPrice {
    min-width: 7rem;
  }
  .colQuantity {
    margin-left: .5rem;
  }
  /* #34285 品番から探すに金額表示を追加 ここまで */
  /* #34287 品番から探すのヘッダ表記改良 ここから */
  .selModalHeaderPn {
    font-size: .75rem;
  }
  .selModal .selModalInner {
      min-width: calc(856px - 5%);
  }
  /* #34287 品番から探すのヘッダ表記改良 ここまで */
}