/* 共通CSS */
.catalogPurchaseRight .variationInfo,
.catalogPurchaseRight .numArticles {
  margin-bottom: 15px;
}
#bootstrap_template .catalogPurchaseRight .purchaseBu {
  text-align: center;
}
#bootstrap_template .catalogPurchaseRight .purchaseBu input {
  margin-left: auto;
  margin-right: auto;
  min-height: 50px;
  width: 100%;
  max-width: 450px;
}

@media (min-width: 786px) {
  .catalogPurchaseRight .numArticles {
    display: flex;
    align-items: center;
  }
  .catalogPurchaseRight .numArticles input.inputText {
    margin-left: 15px;
    width: 100px;
  }
}

/* レイアウトB */
.cdetailLayout01 .catalogDetailBox > .row { display:flex; flex-wrap: wrap;justify-content: end;}
.cdetailLayout01 .catalogDetailBox > .row > div { padding-left: 15px; padding-right: 15px;}
.cdetailLayout01 .catalogDetailBoxLeft { width: 66.66666667%; order: 1;}
.cdetailLayout01 .catalogDetailBoxRight { width: 100%; order: 3; margin-top: 30px;}
.cdetailLayout01 .catalogDetailDesc { width: 33.33333333%; order: 2;}
.cdetailLayout01 .main_image { width: 100%;}
.cdetailLayout01 .catalogDetailDesc h2 { margin-top: 0;}
.cdetailLayout01 .catalogDetailBoxLeft ul { margin-bottom: 0;}
.cdetailLayout01 .purchaseCodeTr th { white-space: nowrap;}
.cdetailLayout01 .purchasePoint th { white-space: nowrap;}
.cdetailLayout01 .purchaseCodeTr td { text-align: right;}

@media (max-width: 767px) {
  .cdetailLayout01 .catalogDetailBoxLeft,
  .cdetailLayout01 .catalogDetailDesc { width: 100%;}
  .cdetailLayout01 .catalogDetailDesc { margin-top: 30px;}
  .cdetailLayout01 .catalogDetailBoxRight { margin-top: 0;}
}

@media (max-width: 1199px) {
  body[class*="column2"] .cdetailLayout01 .catalogDetailBoxLeft,
  body[class*="column2"] .cdetailLayout01 .catalogDetailBoxRight,
  body[class*="column2"] .cdetailLayout01 .catalogDetailDesc,
  #type2column02 .cdetailLayout01 .catalogDetailBoxLeft,
  #type2column02 .cdetailLayout01 .catalogDetailBoxRight,
  #type2column02 .cdetailLayout01 .catalogDetailDesc {
    width: 100%;
  }
}

@media (min-width: 992px) {
  .cdetailLayout01 .catalogDetailBoxRight {
    display: flex;
    justify-content: space-between;
  }
  .cdetailLayout01 .catalogPurchaseLeft,
  .cdetailLayout01 .catalogPurchaseRight {
    width: calc(50% - 15px);
  }
  .cdetailLayout01 .catalogPurchaseRight h4 {
    margin-top: 0;
  }
}

/* レイアウトC */
.cdetailLayout02 .catalogDetailBox > .row { display:flex; flex-wrap: wrap}
.cdetailLayout02 .catalogDetailBox > .row > div { padding-left: 15px; padding-right: 15px;}
.cdetailLayout02 .catalogDetailBoxLeft { width: 100%; order: 1; margin-bottom: 30px;}
.cdetailLayout02 .catalogDetailBoxRight { width: 50%; order: 3;}
.cdetailLayout02 .catalogDetailDesc { width: 50%; order: 2;}
.cdetailLayout02 .main_image { width: 100%;}
.cdetailLayout02 .catalogDetailDesc h2 { margin-top: 0;}
.cdetailLayout02 .catalogDetailBoxLeft ul { margin-bottom: 0;}
.cdetailLayout02 .purchaseCodeTr th { white-space: nowrap;}
.cdetailLayout02 .purchasePoint th { white-space: nowrap;} 
.cdetailLayout02 .purchaseCodeTr td { text-align: right;}

@media (max-width: 991px) {
  .cdetailLayout02 .catalogDetailBoxRight,
  .cdetailLayout02 .catalogDetailDesc { width: 100%;}
}

@media (min-width: 768px) {
  .cdetailLayout02 ul.list-inline li { width: 16.66666666%;}
}

/* レイアウトD */
.cdetailLayout03 .catalogDetailBox > .row { display:flex; flex-wrap: wrap}
.cdetailLayout03 .catalogDetailBox > .row > div { padding-left: 15px; padding-right: 15px;}
.cdetailLayout03 .catalogDetailBoxLeft { width: 100%; order: 1; margin-bottom: 30px;}
.cdetailLayout03 .catalogDetailBoxRight { width: 100%; order: 3;}
.cdetailLayout03 .catalogDetailDesc { width: 100%; order: 2; margin-bottom: 30px;}
.cdetailLayout03 .main_image { width: 100%;}
.cdetailLayout03 .catalogDetailDesc h2 { margin-top: 0;}
.cdetailLayout03 .catalogDetailBoxLeft ul { margin-bottom: 0;}
.cdetailLayout03 .purchaseCodeTr th { white-space: nowrap;}
.cdetailLayout03 .purchasePoint th { white-space: nowrap;} 
.cdetailLayout03 .purchaseCodeTr td { text-align: right;}

@media (min-width: 768px) {
  .cdetailLayout03 ul.list-inline li { width: 16.66666666%;}
}

@media (min-width: 992px) {
  .cdetailLayout03 .catalogDetailBoxRight {
    display: flex;
    justify-content: space-between;
  }
  .cdetailLayout03 .catalogPurchaseLeft,
  .cdetailLayout03 .catalogPurchaseRight {
    width: calc(50% - 15px);
  }
  .cdetailLayout03 .catalogPurchaseRight h4 {
    margin-top: 0;
  }
}