@charset "utf-8";

html{
    font-size: 100%;
}

body{
    color: #333333;
    font-size: 0.75rem;
    font-family: 'Raleway', sans-serif; 
}
a{
    color: #333333;
    text-decoration: none;
}
img{
    max-width: 100%;
}
li{
    list-style: none;
}
table{
    border-collapse: collapse;
    border-spacing:0;
}
.site-title{
    width:109px;
    line-height: 1px;
    margin: 0 auto 36px;
}

.site-title a{
    display: block;
}
.wrapper{
    max-width:800px;
    margin: 0 auto; 
}

/* ヘッダー */
.header{
    max-width: 1000px;
    padding: 46px 0 26px;
    margin: 0 auto 50px auto;
    border-bottom: 1px solid #c3c3c3;
    /* background-color: #eeeeee; */
}

 nav{
     display: flex;
     align-items: center;
     justify-content: space-between;
     /* background-color: #996600; */
     
 }
 nav .menu,nav .login{
     display: flex;
     align-items: center;
 }

 nav .menu li{
     margin-right: 14px;
 }
 nav .login li{
     margin-left: 14px;
 }

 /* 商品ページ */
 .item{
     display: flex;
     justify-content: space-between;
     margin-bottom: 100px;
     /* background-color: #ddd; */
 }
 .item item-image{
     max-width: 400px;
     flex-shrink:0;
     margin-right:60px;
 }

 .item .item-info{
     /* background-color:#f60 */
 }

 .item .item-info p{
     margin-bottom: 30px;
     line-height: 1.9;
 }

 .item .item-info .item-title{
     height: 60px;
     display: flex;
     align-items: center;
     border-top: 1px solid #c3c3c3;
    border-bottom: 1px solid #c3c3c3;
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 20px;
     background-color: #f5eaea;
 }

 .item .item-info .order-table{
     width: 100%;
     margin-bottom: 20px;
 }
 .item .item-info .order-table .color,
 .item .item-info .order-table .size{
     width: 20%;
 } 

 .item .item-info .order-table .quantity{
     width: 60%;
 }

 /* thの上 */
 .item .item-info .order-table td{
     border-top: 1px solid #c3c3c3;
 }

/* thの右 */
 .item .item-info .order-table th,
 .item .item-info .order-table td{
     font-weight: normal;
     padding: 10px;
     border-right: 1px solid #c3c3c3;
     text-align: center;
 }

 /* thの最後の右の線 */
 .item .item-info .order-table th:last-child,
 .item .item-info .order-table td:last-child{
     border-right:none;
 }

 /* 矢印 */
  .item .item-info .order-table select{
      width: 100px;
      border: 1px solid #c3c3c3;
      padding: 0 10px;
      -moz-appearance: menulist;
      -webkit-appearance: menulist;
  }

  .item .item-info .cart-btn{
      width: 100%;
      background-color: #f8a4c0;
      color: #ffffff;
      display: block;
      line-height: 1;
      padding: 18px 0;
      margin-bottom: 30px;
      text-align: center;
  }

  /* テーブルの線は重ならないように */
  .item .item-info .size-table{
      width: 100%;
      border-top: 1px solid #c3c3c3;
      border-left: 1px solid #c3c3c3;
  }
  .item .item-info .size-table .size{
      width: 16%;
  }
.item .item-indo .size-table .chest,
.item .item-info .size-table .weist,
.item .item-info .size-table .height{
    width: 28%;
  }
  .item .item-info .size-table th{
      background-color: #ecebeb;
  }

  /* th tdの右と下 */
  .item .item-info .size-table th,
  .item .item-info ,size-table td{
      font-weight: normal;
      padding: 10px;
      border-right: 1px solid #c3c3c3;
      border-bottom: 1px solid #c3c3c3;
      text-align: center;
  }

  /* footer */

.footer{
padding: 10px 0;
text-align: center;
}

/* sp */
@media screen and (max-width:896px){

    .site-title{
        margin-bottom: 26px;
    }

    .header{
        margin-bottom: 0;
        border-bottom: none;
        padding: 36px 16px 16px 16px;
    }

    nav{
        overflow-x:scroll;
    }

    .item{
        flex-direction: column;
    }
    .item .item-image{
        min-width: 100%;
        margin: 0 0 10px 0;
    }
    .item .item-info{
        padding: 0 16px;
    }
}