@charset "UTF8";

/*-------------------
スマホ縦
-------------------*/
@media screen and (max-width: 480px){

  .commercial-software-area-inner{
    width: 90%;
    margin: 0 auto;
  }

  .yayoi-soft-photo-area{
    width: 70%;
    margin: 3% auto;
  }

  .yayoi-rogo-area{
    width: 30%;
    margin: 5% auto;
  }

  th.yayoi-table-item-b{
    width: 20%;
    color: #fff;
    background: #3A8FB7;
    border: 1px solid #004378;
    font-size: 2.5vw;
  }

  td.yayoi-table-left-b{
    width: 30%;
    color: #fff;
    background: #58B2DC;
    border: 1px solid #004378;
    font-size: 2.5vw;
    line-height: 8vw;
    text-indent: 1vw;
    font-weight: bold;
  }

  td.yayoi-table-right-b{
    width: 50%;
    color: #fff;
    background: #81C7D4;
    border: 1px solid #004378;
    font-size: 2.5vw;
    line-height: 8vw;
    text-indent: 1vw;
    font-weight: bold;
  }

  th.yayoi-table-item-g{
    width: 20%;
    color: #fff;
    background: #0C4842;
    border: 1px solid #004378;
    font-size: 2.5vw;
    line-height: 8vw;
  }

  td.yayoi-table-left-g{
    width: 30%;
    color: #fff;
    background: #5DAC81;
    border: 1px solid #004378;
    font-size: 2.5vw;
    line-height: 8vw;
    text-indent: 1vw;
    font-weight: bold;
  }

  td.yayoi-table-right-g{
    width: 50%;
    color: #fff;
    background: #A8D8B9;
    border: 1px solid #004378;
    font-size: 2.5vw;
    line-height: 8vw;
    text-indent: 1vw;
    font-weight: bold;
  }

  th.yayoi-table-item-p{
    width: 20%;
    color: #fff;
    background: #CB1B45;
    border: 1px solid #004378;
    font-size: 2.5vw;
  }

  td.yayoi-table-left-p{
    width: 30%;
    color: #fff;
    background: #F596AA;
    border: 1px solid #004378;
    font-size: 2.5vw;
    line-height: 8vw;
    text-indent: 1vw;
    font-weight: bold;
  }

  td.yayoi-table-right-p{
    width: 50%;
    color: #fff;
    background: #F8C3CD;
    border: 1px solid #004378;
    font-size: 2.5vw;
    line-height: 8vw;
    text-indent: 1vw;
    font-weight: bold;
  }

  td.pca-soft-name{
    width: 20%;
    vertical-align: bottom;
  }

  td.pca-soft-name p{
    font-size: 1.9vw;
    font-weight: bold;
    text-align: center;
    margin: 0;
  }

}
/*-------------------
スマホ横
-------------------*/
@media screen and (min-width: 481px) and (max-width: 896px) {

  .commercial-software-area-inner{
    width: 90%;
    margin: 0 auto;
  }

  .yayoi-soft-photo-area{
    width: 60%;
    margin: 3% auto;
  }

  .yayoi-rogo-area{
    width: 25%;
    margin: 5% auto;
  }

  th.yayoi-table-item-b{
    width: 20%;
    color: #fff;
    background: #3A8FB7;
    border: 1px solid #004378;
    font-size: 2vw;
  }

  td.yayoi-table-left-b{
    width: 30%;
    color: #fff;
    background: #58B2DC;
    border: 1px solid #004378;
    font-size: 1.8vw;
    line-height: 4vw;
    text-indent: 1vw;
    font-weight: bold;
  }

  td.yayoi-table-right-b{
    width: 50%;
    color: #fff;
    background: #81C7D4;
    border: 1px solid #004378;
    font-size: 1.8vw;
    line-height: 4vw;
    text-indent: 1vw;
    font-weight: bold;
  }

  th.yayoi-table-item-g{
    width: 20%;
    color: #fff;
    background: #0C4842;
    border: 1px solid #004378;
    font-size: 2vw;
    line-height: 4vw;
  }

  td.yayoi-table-left-g{
    width: 30%;
    color: #fff;
    background: #5DAC81;
    border: 1px solid #004378;
    font-size: 1.8vw;
    line-height: 4vw;
    text-indent: 1vw;
    font-weight: bold;
  }

  td.yayoi-table-right-g{
    width: 50%;
    color: #fff;
    background: #A8D8B9;
    border: 1px solid #004378;
    font-size: 1.8vw;
    line-height: 4vw;
    text-indent: 1vw;
    font-weight: bold;
  }

  th.yayoi-table-item-p{
    width: 20%;
    color: #fff;
    background: #CB1B45;
    border: 1px solid #004378;
    font-size: 2vw;
  }

  td.yayoi-table-left-p{
    width: 30%;
    color: #fff;
    background: #F596AA;
    border: 1px solid #004378;
    font-size: 1.8vw;
    line-height: 4vw;
    text-indent: 1vw;
    font-weight: bold;
  }

  td.yayoi-table-right-p{
    width: 50%;
    color: #fff;
    background: #F8C3CD;
    border: 1px solid #004378;
    font-size: 1.8vw;
    line-height: 4vw;
    text-indent: 1vw;
    font-weight: bold;
  }

  td.pca-soft-name{
    width: 20%;
    vertical-align: bottom;
  }

  td.pca-soft-name p{
    font-size: 2vw;
    font-weight: bold;
    text-align: center;
    margin: 0;
  }

}
/*-------------------
タブレット(縦向き)
-------------------*/
@media screen and (min-width: 897px) and (max-width: 1024px) {

  .commercial-software-area-inner{
    width: 90%;
    margin: 0 auto;
  }

  .yayoi-soft-photo-area{
    width: 50%;
    margin: 3% auto;
  }

  .yayoi-rogo-area{
    width: 20%;
    margin: 5% auto;
  }

  th.yayoi-table-item-b{
    width: 20%;
    color: #fff;
    background: #3A8FB7;
    border: 1px solid #004378;
    font-size: 2vw;
  }

  td.yayoi-table-left-b{
    width: 30%;
    color: #fff;
    background: #58B2DC;
    border: 1px solid #004378;
    font-size: 1.8vw;
    line-height: 4vw;
    text-indent: 1vw;
    font-weight: bold;
  }

  td.yayoi-table-right-b{
    width: 50%;
    color: #fff;
    background: #81C7D4;
    border: 1px solid #004378;
    font-size: 1.8vw;
    line-height: 4vw;
    text-indent: 1vw;
    font-weight: bold;
  }

  th.yayoi-table-item-g{
    width: 20%;
    color: #fff;
    background: #0C4842;
    border: 1px solid #004378;
    font-size: 2vw;
    line-height: 4vw;
  }

  td.yayoi-table-left-g{
    width: 30%;
    color: #fff;
    background: #5DAC81;
    border: 1px solid #004378;
    font-size: 1.8vw;
    line-height: 4vw;
    text-indent: 1vw;
    font-weight: bold;
  }

  td.yayoi-table-right-g{
    width: 50%;
    color: #fff;
    background: #A8D8B9;
    border: 1px solid #004378;
    font-size: 1.8vw;
    line-height: 4vw;
    text-indent: 1vw;
    font-weight: bold;
  }

  th.yayoi-table-item-p{
    width: 20%;
    color: #fff;
    background: #CB1B45;
    border: 1px solid #004378;
    font-size: 2vw;
  }

  td.yayoi-table-left-p{
    width: 30%;
    color: #fff;
    background: #F596AA;
    border: 1px solid #004378;
    font-size: 1.8vw;
    line-height: 4vw;
    text-indent: 1vw;
    font-weight: bold;
  }

  td.yayoi-table-right-p{
    width: 50%;
    color: #fff;
    background: #F8C3CD;
    border: 1px solid #004378;
    font-size: 1.8vw;
    line-height: 4vw;
    text-indent: 1vw;
    font-weight: bold;
  }

  td.pca-soft-name{
    width: 20%;
    vertical-align: bottom;
  }

  td.pca-soft-name p{
    font-size: 2vw;
    font-weight: bold;
    text-align: center;
    margin: 0;
  }

}
/*-------------------
タブレット(横向き)
-------------------*/
@media screen and (min-width: 1025px) and (max-width: 1400px) {

  .commercial-software-area-inner{
    width: 90%;
    margin: 0 auto;
  }

  .yayoi-soft-photo-area{
    width: 45%;
    margin: 3% auto;
  }

  .yayoi-rogo-area{
    width: 20%;
    margin: 5% auto;
  }

  th.yayoi-table-item-b{
    width: 20%;
    color: #fff;
    background: #3A8FB7;
    border: 1px solid #004378;
    font-size: 2vw;
  }

  td.yayoi-table-left-b{
    width: 30%;
    color: #fff;
    background: #58B2DC;
    border: 1px solid #004378;
    font-size: 1.8vw;
    line-height: 4vw;
    text-indent: 1vw;
    font-weight: bold;
  }

  td.yayoi-table-right-b{
    width: 50%;
    color: #fff;
    background: #81C7D4;
    border: 1px solid #004378;
    font-size: 1.8vw;
    line-height: 4vw;
    text-indent: 1vw;
    font-weight: bold;
  }

  th.yayoi-table-item-g{
    width: 20%;
    color: #fff;
    background: #0C4842;
    border: 1px solid #004378;
    font-size: 2vw;
    line-height: 4vw;
  }

  td.yayoi-table-left-g{
    width: 30%;
    color: #fff;
    background: #5DAC81;
    border: 1px solid #004378;
    font-size: 1.8vw;
    line-height: 4vw;
    text-indent: 1vw;
    font-weight: bold;
  }

  td.yayoi-table-right-g{
    width: 50%;
    color: #fff;
    background: #A8D8B9;
    border: 1px solid #004378;
    font-size: 1.8vw;
    line-height: 4vw;
    text-indent: 1vw;
    font-weight: bold;
  }

  th.yayoi-table-item-p{
    width: 20%;
    color: #fff;
    background: #CB1B45;
    border: 1px solid #004378;
    font-size: 2vw;
  }

  td.yayoi-table-left-p{
    width: 30%;
    color: #fff;
    background: #F596AA;
    border: 1px solid #004378;
    font-size: 1.8vw;
    line-height: 4vw;
    text-indent: 1vw;
    font-weight: bold;
  }

  td.yayoi-table-right-p{
    width: 50%;
    color: #fff;
    background: #F8C3CD;
    border: 1px solid #004378;
    font-size: 1.8vw;
    line-height: 4vw;
    text-indent: 1vw;
    font-weight: bold;
  }

  td.pca-soft-name{
    width: 20%;
    vertical-align: bottom;
  }

  td.pca-soft-name p{
    font-size: 2vw;
    font-weight: bold;
    text-align: center;
    margin: 0;
  }

}
/*-------------------
ＰＣ
-------------------*/
@media all and (min-width: 1401px){

  .commercial-software-area-inner{
    width: 70%;
    margin: 0 auto;
  }

  .yayoi-soft-photo-area{
    width: 40%;
    margin: 3% auto;
  }

  .yayoi-rogo-area{
    width: 15%;
    margin: 5% auto;
  }

  th.yayoi-table-item-b{
    width: 20%;
    color: #fff;
    background: #3A8FB7;
    border: 1px solid #004378;
    font-size: 2vw;
  }

  td.yayoi-table-left-b{
    width: 30%;
    color: #fff;
    background: #58B2DC;
    border: 1px solid #004378;
    font-size: 1vw;
    line-height: 2vw;
    text-indent: 1vw;
    font-weight: bold;
  }

  td.yayoi-table-right-b{
    width: 50%;
    color: #fff;
    background: #81C7D4;
    border: 1px solid #004378;
    font-size: 1vw;
    line-height: 2vw;
    text-indent: 1vw;
    font-weight: bold;
  }

  th.yayoi-table-item-g{
    width: 20%;
    color: #fff;
    background: #0C4842;
    border: 1px solid #004378;
    font-size: 2vw;
    line-height: 4vw;
  }

  td.yayoi-table-left-g{
    width: 30%;
    color: #fff;
    background: #5DAC81;
    border: 1px solid #004378;
    font-size: 1vw;
    line-height: 2vw;
    text-indent: 1vw;
    font-weight: bold;
  }

  td.yayoi-table-right-g{
    width: 50%;
    color: #fff;
    background: #A8D8B9;
    border: 1px solid #004378;
    font-size: 1vw;
    line-height: 2vw;
    text-indent: 1vw;
    font-weight: bold;
  }

  th.yayoi-table-item-p{
    width: 20%;
    color: #fff;
    background: #CB1B45;
    border: 1px solid #004378;
    font-size: 2vw;
  }

  td.yayoi-table-left-p{
    width: 30%;
    color: #fff;
    background: #F596AA;
    border: 1px solid #004378;
    font-size: 1vw;
    line-height: 2vw;
    text-indent: 1vw;
    font-weight: bold;
  }

  td.yayoi-table-right-p{
    width: 50%;
    color: #fff;
    background: #F8C3CD;
    border: 1px solid #004378;
    font-size: 1vw;
    line-height: 2vw;
    text-indent: 1vw;
    font-weight: bold;
  }

  td.pca-soft-name{
    width: 20%;
    vertical-align: bottom;
  }

  td.pca-soft-name p{
    font-size: 1.3vw;
    font-weight: bold;
    text-align: center;
    margin: 0;
  }

}
/*-------------------
印刷用
-------------------*/
@media print{

  .commercial-software-area-inner{
    width: 70%;
    margin: 0 auto;
  }

  .yayoi-soft-photo-area{
    width: 70%;
    margin: 3% auto;
  }

  .yayoi-rogo-area{
    width: 15%;
    margin: 5% auto;
  }

  th.yayoi-table-item-b{
    width: 20%;
    color: #fff;
    background: #3A8FB7;
    border: 1px solid #004378;
    font-size: 2vw;
  }

  td.yayoi-table-left-b{
    width: 30%;
    color: #fff;
    background: #58B2DC;
    border: 1px solid #004378;
    font-size: 1vw;
    line-height: 2vw;
    text-indent: 1vw;
    font-weight: bold;
  }

  td.yayoi-table-right-b{
    width: 50%;
    color: #fff;
    background: #81C7D4;
    border: 1px solid #004378;
    font-size: 1vw;
    line-height: 2vw;
    text-indent: 1vw;
    font-weight: bold;
  }

  th.yayoi-table-item-g{
    width: 20%;
    color: #fff;
    background: #0C4842;
    border: 1px solid #004378;
    font-size: 2vw;
    line-height: 4vw;
  }

  td.yayoi-table-left-g{
    width: 30%;
    color: #fff;
    background: #5DAC81;
    border: 1px solid #004378;
    font-size: 1vw;
    line-height: 2vw;
    text-indent: 1vw;
    font-weight: bold;
  }

  td.yayoi-table-right-g{
    width: 50%;
    color: #fff;
    background: #A8D8B9;
    border: 1px solid #004378;
    font-size: 1vw;
    line-height: 2vw;
    text-indent: 1vw;
    font-weight: bold;
  }

  th.yayoi-table-item-p{
    width: 20%;
    color: #fff;
    background: #CB1B45;
    border: 1px solid #004378;
    font-size: 2vw;
  }

  td.yayoi-table-left-p{
    width: 30%;
    color: #fff;
    background: #F596AA;
    border: 1px solid #004378;
    font-size: 1vw;
    line-height: 2vw;
    text-indent: 1vw;
    font-weight: bold;
  }

  td.yayoi-table-right-p{
    width: 50%;
    color: #fff;
    background: #F8C3CD;
    border: 1px solid #004378;
    font-size: 1vw;
    line-height: 2vw;
    text-indent: 1vw;
    font-weight: bold;
  }

  td.pca-soft-name{
    width: 20%;
    vertical-align: bottom;
  }

  td.pca-soft-name p{
    font-size: 1.3vw;
    font-weight: bold;
    text-align: center;
    margin: 0;
  }

}


/*-------------------
共通
-------------------*/

.commercial-software-area{
  width: 100%;
}

.yayoi-area{
  width: 100%;
  margin: 0 auto;
}

.yayoi-title{
  width: 100%;
  margin: 0 auto;
  background: #3A8FB7;
}

.yayoi-title h3{
  font-size: 4vw;
  line-height: 10vw;
  color: #fff;
  text-align: center;
}

.yayoi-soft-photo-area img{
  width: 100%;
}

.yayoi-table-area{
  width: 100%;
}

.yayoi-table-area table{
  width: 100%;
  border-spacing: inherit;
}

.yayoi-rogo-area img{
  width: 100%;
  vertical-align: bottom;
}

.pca-area{
  width: 100%;
  margin: 5% auto;
}

.pca-title{
  width: 100%;
  margin: 0 auto;
  background: #3A8FB7;
}

.pca-title h3{
  font-size: 4vw;
  line-height: 10vw;
  color: #fff;
  text-align: center;
}

.pca-soft-photo-area{
  width: 60%;
  margin: 8% auto;
}

.pca-soft-photo-area img{
  width: 100%;
}

.pca-table-area{
  width: 100%;
  margin: 0 auto;
}

.pca-table-area table{
  width: 100%;
}

td.pca-soft-image{
  width: 20%;
  padding-bottom: 5%;
}

td.pca-soft-image img{
  width: 100%;
}

td.pca-soft-space{
  width: 7%;
}

.pca-rogo-area{
  width: 15%;
  margin: 5% auto;
}

.pca-rogo-area img{
  width: 100%;
  vertical-align: bottom;
}