/* CSS Document */
/*-----PC-----*/
@media screen and (min-width: 961px) {
  #products {
    margin: 20px 0;
    padding: 30px 0;
  }
  .products_list {
    width: 1000px;
    height: auto;
    margin: 20px auto;
  }
  .products_list li {
    margin: 20px 50px;
    padding: 10px 0;
    text-align: center;
    float: left;
  }
  .products_list li .item_name {
    font-family: 'Roboto Condensed', sans-serif;
    margin: 20px 0 0 0;
  }
  .products_list li .item_price {
    font-family: 'Roboto Condensed', sans-serif;
    margin: 0;
  }
  .products_list li .buy_btn {
    margin: 10px 0 0 0;
  }
  .products_box {
    width: 100%;
    height: auto;
    margin: 0 auto;
    padding: 0;
  }
  .products_photo {
    max-width: 50%;
    float: left;
  }
  .products_photo ul.photo_list {
    width: 100%;
    height: auto;
    margin: 0 auto;
    padding: 0;
  }
  .products_photo ul.photo_list li {
    margin: 10px 0;
  }
  .products_detail {
    max-width: 50%;
    float: right;
  }
  .products_detail h3.product_name {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 2rem;
    margin: 10px 0;
  }
  .products_detail p.product_price {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 1.5rem;
    margin: 10px 0;
  }
  .products_detail p.product_detail_text {
    line-height: 1.5rem;
  }
  .products_detail .buy_btn {
    margin: 30px 0;
  }
  .products_detail p.attention {
    margin: 20px 0;
    line-height: 1.5rem;
    color: #f00;
    font-weight: 700;
  }
  .flow {
    width: 100%;
    height: auto;
    margin: 20px 0;
    padding: 0;
  }
  .flow h3.flow_title {
    font-size: 1rem;
    margin: 20px 0;
    padding: 10px;
    color: #fff;
    background-color: #a1a1a1;
    text-align: center;
  }
  .flow p.flow_text {
    margin: 20px 0;
    padding-left: 20px;
    line-height: 1.5rem;
  }
}
/*-----Tablet-----*/
@media screen and (min-width: 521px) and (max-width: 960px) {
  #products {
    margin: 20px 0;
    padding: 30px 0;
  }
  .products_list {
    width: 100%;
    height: auto;
    margin: 20px auto;
  }
  .products_list li {
    margin: 20px 50px;
    padding: 10px 0;
    text-align: center;
    float: left;
  }
  .products_list li .item_name {
    font-family: 'Roboto Condensed', sans-serif;
    margin: 20px 0 0 0;
  }
  .products_list li .item_price {
    font-family: 'Roboto Condensed', sans-serif;
    margin: 0;
  }
  .products_list li .buy_btn {
    margin: 10px 0 0 0;
  }
  .products_box {
    width: 100%;
    height: auto;
    margin: 0 auto;
    padding: 0;
  }
  .products_photo {
    max-width: 50%;
    float: left;
  }
  .products_photo ul.photo_list {
    width: 100%;
    height: auto;
    margin: 0 auto;
    padding: 0;
  }
  .products_photo ul.photo_list li {
    margin: 10px 0;
  }
  .products_detail {
    max-width: 50%;
    float: right;
  }
  .products_detail h3.product_name {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 2rem;
    margin: 10px 0;
  }
  .products_detail p.product_price {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 1.5rem;
    margin: 10px 0;
  }
  .products_detail p.product_detail_text {
    line-height: 1.5rem;
  }
  .products_detail .buy_btn {
    margin: 30px 0;
  }
  .products_detail p.attention {
    margin: 20px 0;
    line-height: 1.5rem;
    color: #f00;
    font-weight: 700;
  }
  .flow {
    width: 100%;
    height: auto;
    margin: 20px 0;
    padding: 0;
  }
  .flow h3.flow_title {
    font-size: 1rem;
    margin: 20px 0;
    padding: 10px;
    color: #fff;
    background-color: #a1a1a1;
    text-align: center;
  }
  .flow p.flow_text {
    margin: 20px 0;
    padding-left: 20px;
    line-height: 1.5rem;
  }
}
/*-----SP-----*/
@media screen and (max-width: 520px) {
  #products {
    margin: 20px 0;
    padding: 30px 0;
  }
  .products_list {
    width: 100%;
    height: auto;
    margin: 20px auto;
  }
  .products_list li {
    margin: 20px 50px;
    padding: 10px 0;
    text-align: center;
    clear: both;
  }
  .products_list li .item_name {
    font-family: 'Roboto Condensed', sans-serif;
    margin: 20px 0 0 0;
  }
  .products_list li .item_price {
    font-family: 'Roboto Condensed', sans-serif;
    margin: 0;
  }
  .products_list li .buy_btn {
    margin: 10px 0 0 0;
  }
  .products_box {
    width: 100%;
    height: auto;
    margin: 0 auto;
    padding: 0;
  }
  .products_photo {
    width: 100%;
    clear: both;
  }
  .products_photo ul.photo_list {
    width: 100%;
    height: auto;
    margin: 0 auto;
    padding: 0;
  }
  .products_photo ul.photo_list li {
    margin: 10px 0;
  }
  .products_detail {
    width: 100%;
    clear: both;
  }
  .products_detail h3.product_name {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 2rem;
    margin: 10px 0;
  }
  .products_detail p.product_price {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 1.5rem;
    margin: 10px 0;
  }
  .products_detail p.product_detail_text {
    line-height: 1.5rem;
  }
  .products_detail .buy_btn {
    margin: 30px 0;
  }
  .products_detail p.attention {
    margin: 20px 0;
    line-height: 1.5rem;
    color: #f00;
    font-weight: 700;
  }
  .flow {
    width: 100%;
    height: auto;
    margin: 20px 0;
    padding: 0;
  }
  .flow h3.flow_title {
    font-size: 1rem;
    margin: 20px 0;
    padding: 10px;
    color: #fff;
    background-color: #a1a1a1;
    text-align: center;
  }
  .flow p.flow_text {
    margin: 20px 0;
    padding-left: 20px;
    line-height: 1.5rem;
  }
}