/* =================================
 PC
================================= */

@media (min-width: 768px){
  .page.page_wide main{
    width: 1200px;
  }
  .page.page_wide main .inner{
    width: 1200px;
  }
  
  
  
  /* フロント　検索結果 */
  .kensaku_category{
    margin-bottom: 30px;
  }
  .kensaku_category li{
    display: inline-block;
    margin-right: 20px;
    padding-right: 20px;
    border-right: solid 1px #bdbdbd;
  }
  .kensaku_category li:last-child{
    border-right: none;
  }
  .kensaku_category li.active{
    font-weight: bold;
  }
  .child_category{
    float: left;
  }
  .item_buy{
    float: right;
    background: #fff;
    border-radius: 8px;
    text-decoration: none;
    border: solid 1px #faed00;
    border-bottom: solid 3px #faed00;
  }
  .item_buy:active{
    -ms-transform: translateY(4px);
    -webkit-transform: translateY(4px);
    transform: translateY(4px);/*下に動く*/
    border-bottom: none;/*線を消す*/
  }
  .item_buy a{
    padding: 5px 12px;
    /*color: #faed00;*/
  }
  .kensaku_cont .item{
    position:	relative;	/* 相対位置指定 */
    display: inline-block;
    vertical-align: top;
    width: 220px;
    margin-right: 15px;
    margin-bottom: 30px;
    overflow:		hidden;
  }
  .item .caption {
    position: absolute;
    font-size: 14px;
    text-align: center;
    top: 50%;
    left: 50%;
    margin-top: -17px;
    margin-left: -50px;
    background: #fff;
    padding: 5px 15px;
    border-radius: 5px;
  }
  .item .mask {
    width: 100%;
    height: 100%;
    position:		absolute;	/* 絶対位置指定 */
    top: 0;
    left: 0;
    opacity: 0;	/* マスクを表示しない */
    background-color:	rgba(0,0,0,0.3);	/* マスクは半透明 */
    -webkit-transition:	all 0.2s ease;
    transition:		all 0.2s ease;
  }
  .item .mask a{
    display: block;
  }
  .item:hover .mask {
    opacity:		1;	/* マスクを表示する */
  }
  
  
  
  
  .kensaku_cont .item:nth-child(4n){
    margin-right: 0;
  }
  .kensaku_cont .item:nth-last-child(-n+4){
    margin-bottom: 0;
  }
  .kensaku_cont .item .item_cont{
    width: 220px;
    height: 175px;
  }


  /* フロント　商品詳細 */  
  .sidebar .item_name{
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
  }
  .sidebar .star{
    display: inline-block;
    vertical-align: middle;
  }
  .sidebar_cont textarea{
    width: 100%;
    height: 100px;
  }
  .sidebar .form_btn button {
    width: 100%;
    padding: 10px 0;
    border: solid 1px #faed00;
    border-radius: 5px;
    color: #faed00;
    font-size: 15px;
    background: #fff;
  }
  .item_img{
    width: 20%;
    margin: 0 auto;
  }




  /* フロント　商品情報入力 */

  table.color{
    width: 100%;
  }
  table.color th{
    background: #fea9a0;
    text-align: center;
    color: #fff;
    padding: 5px 10px;
    border-right: solid 1px #fff;
    width: 10%;
  }
  table.color td{
    border-left: solid 1px #bdbdbd;
    border-right: solid 1px #bdbdbd;
    border-bottom: solid 1px #bdbdbd;
  }
  table.syupin th:first-child{
    width: 26%;
  }
  table.syupin .item_img{
    width: 30%;
    float: left;
    margin-right: 20px;
  }
  table.syupin .item_img .item{
    width: 100px;
  }
  table.syupin .item_img .item .item_cont{
    width: 100%;
    height: 100%;
  }
  table.syupin td:nth-child(2),table.syupin td:nth-child(4),table.syupin td:nth-child(5),table.syupin td:nth-child(6){
    text-align: right;
  }
  table.syupin td.center{
    text-align: center;
  }
  table.syupin button{
    background: #e5e5e5;
    border: solid 1px #666;
    border-bottom: solid 3px #666;
  }
  table.syupin button.blue{
    background: #d8ecff;
    border: solid 1px #44a1f8;
    border-bottom: solid 3px #44a1f8;
  }
  .gokei{
    border: solid 3px #fea9a0;
  }
  .gokei .gokei_ttl{
    margin-top: 7px;
  }
  .gokei p{
    display: inline-block;
    vertical-align: middle;
  }
  .gokei .price{
    float: right;
    font-size: 18px;
    font-weight: bold;
  }
  .bold{
    font-weight: bold;
    font-size: 16px;
  }
  ul.card{
    text-align: center;
  }
  ul.card li{
    width: 60px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
    margin-top: 20px;
  }
}

/* =================================
 SP
================================= */

@media (max-width: 767px){
  
  /* フロント　検索結果ページ */
  .kensaku_category{
    margin-bottom: 30px;
  }
  .kensaku_category li{
    float: left;
    margin-right: 10px;
    padding-right: 10px;
    border-right: solid 1px #bdbdbd;
  }
  .kensaku_category li:last-child{
    border-right: none;
  }
  .kensaku_category li.active{
    font-weight: bold;
  }
  .child_category{
    float: none;
    padding: 10px 0;
  }
  .item_buy{
    float: none;
    background: #fff;
    border-radius: 8px;
    border: solid 1px #faed00;
    border-bottom: solid 3px #faed00;
  }
  .item_buy:active{
    -ms-transform: translateY(4px);
    -webkit-transform: translateY(4px);
    transform: translateY(4px);/*下に動く*/
    border-bottom: none;/*線を消す*/
  }
  .item_buy a{
    display: block;
    padding: 5px 12px;
    /*color: #faed00;*/
    text-align: center;
  }
  .kensaku_cont .item{
    width: 49%;
    margin-right: 0;
    margin-bottom: 30px;
  }
  .kensaku_cont .item:nth-last-child(-n+2){
    margin-bottom: 0;
  }
  
  
  /* フロント　商品詳細 */  
  
  .sidebar_cont textarea{
    width: 100%;
    height: 100px;
  }
  .sidebar .form_btn button {
    width: 100%;
    padding: 10px 0;
    border: solid 1px #faed00;
    border-radius: 5px;
    color: #faed00;
    font-size: 15px;
    background: #fff;
  }
  
  
  
  /* フロント　商品情報入力ページ */
  table.color{
    width: 100%;
  }
  table.color th{
    background: #fea9a0;
    text-align: center;
    color: #fff;
    padding: 5px 10px;
    border-right: solid 1px #fff;
  }
  table.color td{
    border-right: none;
    border-bottom: none;
    padding: 10px;
  }
  table.syupin tbody{
    display: grid;
  }
  table.syupin th:first-child{
    width: 100%;
  }
  table.syupin .item_img{
    float: left;
    margin-right: 10px;
  }
  table.syupin .item_img .item{
    width: 100px;
  }
  table.syupin .item_img .item .item_cont{
    width: 100%;
    height: 100%;
  }
  table.syupin td:nth-child(2),table.syupin td:nth-child(4){
    text-align: left;
  }
   table.syupin td.sp_syupin{
    font-weight: bold;
    font-size: 16px;
  }
  table.syupin td.delete{
    color: #617edc;
    border-right: none;
    background: 
  }
  table.syupin button{
    background: #e5e5e5;
    border: solid 1px #666;
    border-bottom: solid 3px #666;
  }
  table.syupin button.blue{
    background: #d8ecff;
    border: solid 1px #44a1f8;
    border-bottom: solid 3px #44a1f8;
  }
  table.syupin .item .squareBox:before {
    content: '';
    display: block;
    padding-top: 80px;
  }
  .gokei{
    border: solid 3px #fea9a0;
  }
  .gokei .gokei_ttl{
    margin-top: 7px;
  }
  .gokei p{
    display: inline-block;
    vertical-align: middle;
  }
  .gokei .price{
    float: right;
    font-size: 18px;
    font-weight: bold;
  }
  .bold{
    font-weight: bold;
    font-size: 16px;
  }
  ul.card{
    text-align: center;
  }
  ul.card li{
    width: 35px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
    margin-top: 20px;
  }
  
}

