@charset "UTF-8";

@media print, screen and (min-width: 521px) {
  .com-top {
    background-image: url(url);
    width: min(100vw, 1280px);
    height: min(23.4375vw, 300px);
    /* margin-bottom: 30px; */
  }
  .com-top .title {
    width: min(30.625vw, 392px);
    height: min(23.4375vw, 300px);
    float: left;
  }
  .com-top .title .company-en {
    color: #ce2314;
    font-size: min(3.125vw, 40px);
    font-weight: 600;
    text-align: left;
    margin-top: min(3.125vw, 40px);
    margin-left: min(4.6875vw, 60px);
  }
  .com-top .title .company-jp {
    color: #000000;
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo,
      sans-serif;
    font-size: min(1.458594vw, 18.67px);
    margin-left: min(4.6875vw, 60px);
    margin-top: max(-0.78125vw, -10px);
  }
  .com-top .com-image-box {
    width: min(69.375vw, 888px);
    height: min(23.4375vw, 300px);
    float: left;
  }

  .com-top .com-image-box img {
    width: 100%;
  }
  .products-top {
    position: relative;
  }
  .products-top .products-image-box {
    position: relative;
  }
  .products-top .title {
    position: absolute;
    color: #ffffff;
    top: min(14.0625vw, 180px);
    left: min(25.78125vw, 330px);
    z-index: 10;
    font-size: min(2.917188vw, 37.34px);
    text-shadow: 3px 3px 3px #000000;
    font-weight: 600;
  }
  .productsMessageBox {
    width: min(100vw, 1280px);
    height: min(15.625vw, 200px);
    background-color: #000000;
    display: block;
  }
  .productsMessageBox .message {
    color: #ffffff;
    width: min(84.375vw, 1080px);
    height: min(11.71875vw, 150px);
    font-size: min(1.25vw, 16px);
    margin-left: min(7.8125vw, 100px);
    padding-top: min(3.125vw, 40px);
  }
  .product-box {
    width: min(100vw, 1280px);
    height: min(148.4375vw, 1900px);
    margin-top: min(3.90625vw, 50px);
  }
  .product-box .melgong-box {
    /* 1280 */
    width: min(87.5vw, 1120px);
    margin-left: min(6.25vw, 80px);
    margin-right: min(4.6875vw, 60px);
    height: min(50.78125vw, 650px);
    position: relative;
  }
  .product-box .melgong-box .images {
    width: 100%;
    height: min(46.875vw, 600px);
    background-color: #000000;
    float: left;
    position: relative;
  }

  .product-box .melgong-box .images .p-image1 {
    width: 100%;
    height: 100%;
  }

  .product-box .melgong-box .message {
    float: left;
    width: min(31.25vw, 400px);
    font-size: min(1.25vw, 16px);
    font-weight: 600;
    position: absolute;
    top: min(17.1875vw, 220px);
    left: min(0.3125vw, 4px);
    color: white;
  }
  .melgong-box .message .product-name {
    font-size: min(1.875vw, 24px);
    font-weight: 600;
  }
  .product-box .infomagic-box {
    width: min(87.5vw, 1120px);
    margin-left: min(6.25vw, 80px);
    margin-right: min(4.6875vw, 60px);
    height: min(97.65625vw, 1250px);
    position: relative;
    background-color: #000000;
  }
  .product-box .infomagic-box .images {
    width: min(87.5vw, 1120px);
    background-color: #000000;
    float: left;
  }

  .product-box .infomagic-box .p-image2 {
    width: 100%;
    height: 100%;
  }

  .product-box .infomagic-box .p-image3 {
    width: 50%;
    float: left;
  }

  .product-box .infomagic-box .message {
    float: right;
    width: min(38.28125vw, 490px);
    font-size: min(1.458594vw, 18.67px);
    font-weight: 600;
    top: min(23.4375vw, 300px);
    left: min(23.4375vw, 300px);
    color: white;
  }
  .infomagic-box .message .product-name {
    font-size: min(1.875vw, 24px);
    font-weight: 600;
  }
}

@media only screen and (min-width: 0px) and (max-width: 520px) {
  .products-top {
    position: relative;
    display: block;
  }
  .products-top .products-image-box {
    position: relative;
  }

  .com-top .title .company-en {
    color: #ce2314;
    font-size: 29.34px;
    font-weight: 600;
    text-align: left;
    padding-top: 20px;
    padding-bottom: 20px;
    margin-left: 10px;
  }

  .com-top .com-image-box .com-image {
    width: 100%;
    height: 100%;
  }

  .com-top .com-image-box .com-image {
    width: 100%;
    height: 100%;
  }

  .products-top .title {
    position: absolute;
    color: #ffffff;
    top: 45%;
    left: 7%;
    z-index: 10;
    font-size: 4.5vw;
    text-shadow: 3px 3px 3px #000000;
    font-weight: 600;
  }
  .productsMessageBox {
    width: 100%;
    background-color: #000000;
    display: block;
  }
  .productsMessageBox .message {
    color: #ffffff;
    width: 90%;
    font-size: 2.6vw;
    margin-left: 7%;
    padding-top: 10%;
  }
  .product-box {
    width: 98%;
    padding-left: 2%;
    padding-right: 2%;
    padding-bottom: 10%;
  }

  .product-box .melgong-box {
    width: 100%;
    position: relative;
    margin-bottom: 20px;
  }
  .product-box .melgong-box .images {
    width: 100%;
    background-color: #ffffff;
    float: left;
    position: relative;
  }

  .product-box .melgong-box .images .p-image1 {
    width: 100%;
    height: 100%;
  }

  .product-box .melgong-box .message {
    float: left;
    width: 100%;
    font-size: 2.6vw;
    font-weight: 600;
    position: relative;
    top: 10%;
    color: black;
  }
  .melgong-box .message .product-name {
    font-size: 5vw;
    font-weight: 600;
  }

  .product-box .infomagic-box {
    width: 100%;
    margin-top: 20%;
    position: relative;
    display: block;
  }
  .product-box .infomagic-box .images {
    width: 100%;
    background-color: #ffffff;
    float: left;
    position: relative;
  }

  .product-box .infomagic-box .p-image2 {
    width: 100%;
    height: 100%;
  }

  .product-box .infomagic-box .p-image3 {
    width: 45%;
    height: 45%;
    float: left;
  }

  .product-box .infomagic-box .message {
    float: right;
    width: 50%;
    font-size: 2.6vw;
    font-weight: 600;
    color: blak;
  }
  .infomagic-box .message .product-name {
    font-size: 5vw;
    font-weight: 600;
  }
}