@charset "utf-8";

@media screen and (max-width: 1024px) {

  .container {
    padding-left: 10px;
    padding-right: 10px;
  }

}

@media screen and (max-width: 640px) {

  .header {
    text-align: center;
  }

  .header h1 img {
    width: 50%;
  }

  .header .logo_company {
    width: 15%;
    float: none;
    margin: 1em 0 0;
  }

  .pc {
    display: none;
  }

  .sp {
    display: block;
  }

  .index .searches .key {
    font-weight: bold;
  }

  .index .searches .key,
  .index .searches .value {
    width: 100%;
  }

  .result .item {
    padding: 10px 0;
    border-top: 1px dotted #ccc;
  }

  .result .item + .pagenation {
    border-top: 1px dotted #ccc;
  }

  .result .item .key {
    width: 5em;
    font-weight: bold;
    margin: 0 1em 0 0;
  }

  .result .item .value {
    width: calc(100% - 6em);
  }

  .result .item:nth-of-type(even) {
    background: #fffcda;
  }

  .result .item a[href$=".jpg"]:after {
    width: 20px;
    height: 20px;
    content: '';
    margin-left: 5px;
    display: inline-block;
    vertical-align: -3px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 0 center;
    background-image: url(../images/image.jpg);
  }

  .result .breadth_orders {
    margin: 2em 0 1em 0;
  }

  .result .price_oders {
    margin: 1em 0 2em 0;
  }

}

@media screen and (max-width: 479px) {
  .header h1 img {
    width: 60%;
    display: block;
    margin: 0 auto 0.2em;
  }

  .login .input form {
    width: 100%;
  }

  .footer .illust img {
    width: 100%;
  }
}