@charset "UTF-8";
.green1 {
  border-left: 2px solid #009d95;
}
@media only screen and (max-width: 767px) {
  .green1 {
    border: none;
    border-top: 2px solid #009d95;
  }
}

.green2 {
  border-left: 2px solid #82bd3a;
}
@media only screen and (max-width: 767px) {
  .green2 {
    border: none;
    border-top: 2px solid #82bd3a;
  }
}

.green3 {
  border-left: 2px solid #009849;
}
@media only screen and (max-width: 767px) {
  .green3 {
    border: none;
    border-top: 2px solid #009849;
  }
}

.green4 {
  border-left: 2px solid #337545;
}
@media only screen and (max-width: 767px) {
  .green4 {
    border: none;
    border-top: 2px solid #337545;
  }
}

.green5 {
  border-left: 2px solid #58763a;
}
@media only screen and (max-width: 767px) {
  .green5 {
    border: none;
    border-top: 2px solid #58763a;
  }
}

.red {
  border-left: 2px solid #e33b3e;
}
@media only screen and (max-width: 767px) {
  .red {
    border: none;
    border-top: 2px solid #e33b3e;
  }
}

.pink {
  border-left: 2px solid #b21b5e;
}
@media only screen and (max-width: 767px) {
  .pink {
    border: none;
    border-top: 2px solid #b21b5e;
  }
}

.pink2 {
  border-left: 2px solid #c45c7a;
}
@media only screen and (max-width: 767px) {
  .pink2 {
    border: none;
    border-top: 2px solid #c45c7a;
  }
}

.pink3 {
  border-left: 2px solid #f6c8cb;
}
@media only screen and (max-width: 767px) {
  .pink3 {
    border: none;
    border-top: 2px solid #f6c8cb;
  }
}

.blue {
  border-left: 2px solid #1b58a4;
}
@media only screen and (max-width: 767px) {
  .blue {
    border: none;
    border-top: 2px solid #1b58a4;
  }
}

.blue2 {
  border-left: 2px solid #2186c6;
}
@media only screen and (max-width: 767px) {
  .blue2 {
    border: none;
    border-top: 2px solid #2186c6;
  }
}

.blue3 {
  border-left: 2px solid #20b9eb;
}
@media only screen and (max-width: 767px) {
  .blue3 {
    border: none;
    border-top: 2px solid #20b9eb;
  }
}

.blue4 {
  border-left: 2px solid #66c0bf;
}
@media only screen and (max-width: 767px) {
  .blue4 {
    border: none;
    border-top: 2px solid #66c0bf;
  }
}

.blue5 {
  border-left: 2px solid #779fb3;
}
@media only screen and (max-width: 767px) {
  .blue5 {
    border: none;
    border-top: 2px solid #779fb3;
  }
}

.blue6 {
  border-left: 2px solid #7295bd;
}
@media only screen and (max-width: 767px) {
  .blue6 {
    border: none;
    border-top: 2px solid #7295bd;
  }
}

.blue7 {
  border-left: 2px solid #b0def6;
}
@media only screen and (max-width: 767px) {
  .blue7 {
    border: none;
    border-top: 2px solid #b0def6;
  }
}

.violet {
  border-left: 2px solid #8378b3;
}
@media only screen and (max-width: 767px) {
  .violet {
    border: none;
    border-top: 2px solid #8378b3;
  }
}

.violet2 {
  border-left: 2px solid #aa4b7f;
}
@media only screen and (max-width: 767px) {
  .violet2 {
    border: none;
    border-top: 2px solid #aa4b7f;
  }
}

.violet3 {
  border-left: 2px solid #731c82;
}
@media only screen and (max-width: 767px) {
  .violet3 {
    border: none;
    border-top: 2px solid #731c82;
  }
}

.violet4 {
  border-left: 2px solid #525e9e;
}
@media only screen and (max-width: 767px) {
  .violet4 {
    border: none;
    border-top: 2px solid #525e9e;
  }
}

.brow {
  border-left: 2px solid #7b2c2f;
}
@media only screen and (max-width: 767px) {
  .brow {
    border: none;
    border-top: 2px solid #7b2c2f;
  }
}

.brow2 {
  border-left: 2px solid #795456;
}
@media only screen and (max-width: 767px) {
  .brow2 {
    border: none;
    border-top: 2px solid #795456;
  }
}

.brow3 {
  border-left: 2px solid #913f1c;
}
@media only screen and (max-width: 767px) {
  .brow3 {
    border: none;
    border-top: 2px solid #913f1c;
  }
}

.yellow {
  border-left: 2px solid #a89871;
}
@media only screen and (max-width: 767px) {
  .yellow {
    border: none;
    border-top: 2px solid #a89871;
  }
}

.yellow2 {
  border-left: 2px solid #c6a40d;
}
@media only screen and (max-width: 767px) {
  .yellow2 {
    border: none;
    border-top: 2px solid #c6a40d;
  }
}

.yellow3 {
  border-left: 2px solid #fcd017;
}
@media only screen and (max-width: 767px) {
  .yellow3 {
    border: none;
    border-top: 2px solid #fcd017;
  }
}

.yellow4 {
  border-left: 2px solid #d4e15b;
}
@media only screen and (max-width: 767px) {
  .yellow4 {
    border: none;
    border-top: 2px solid #d4e15b;
  }
}

.orin {
  border-left: 2px solid #d05526;
}
@media only screen and (max-width: 767px) {
  .orin {
    border: none;
    border-top: 2px solid #d05526;
  }
}

.orin2 {
  border-left: 2px solid #f09820;
}
@media only screen and (max-width: 767px) {
  .orin2 {
    border: none;
    border-top: 2px solid #f09820;
  }
}

.gray {
  border-left: 2px solid #666565;
}
@media only screen and (max-width: 767px) {
  .gray {
    border: none;
    border-top: 2px solid #666565;
  }
}

@media only screen and (min-width: 768px) {
  .mv {
    background: url("../img/products/key_bg.png") no-repeat top center/cover;
  }
}

#tab {
  padding: 10vw 0px 0px;
}
#tab .tab-link {
  width: 90%;
  margin: 0px auto;
}
#tab .tab-link li {
  width: 100%;
  text-align: center;
  font-size: 4vw;
  font-weight: 500;
  color: #fff;
  background: #c5c5c5;
  margin: 0px 0px 3vw;
  line-height: 2.5;
}
#tab .tab-link li.active {
  background: #0068b7;
}
#tab .tab-content1 {
  background: #eff2f6;
  padding: 4vw 0px 10vw;
}
#tab .tab-content1 .tab-txt1 {
  margin: 0px 0px 2vw;
}
#tab .tab-content1 .tab-txt1 span {
  color: #fe5e83;
}
#tab .tab-content1 .tab-txt1.tab-txt2 {
  margin: 10vw 0px 4vw;
}
#tab .tab-content1 .tab-item {
  box-sizing: border-box;
  padding: 3vw 3%;
  display: flex;
  justify-content: space-between;
  margin: 0px 0px 3vw;
  background: #fff;
}
#tab .tab-content1 .tab-item .item-img {
  width: 90px;
}
#tab .tab-content1 .tab-item .item-box {
  width: calc(100% - 110px);
}
#tab .tab-content1 .tab-item .item-box .item-ttl {
  font-size: 4vw;
  color: #005596;
  line-height: 1.4;
  font-weight: 700;
  margin: 0px 0px 2vw;
}
#tab .tab-content1 .tab-item .item-box .item-row ul li {
  position: relative;
  padding-left: 12px;
  margin-bottom: 1vw;
}
#tab .tab-content1 .tab-item .item-box .item-row ul li span {
  color: #fe5e83;
}
#tab .tab-content1 .tab-item .item-box .item-row ul li a {
  line-height: 1.4;
  text-decoration: underline;
  text-underline-offset: 2px;
  letter-spacing: 0;
}
#tab .tab-content1 .tab-item .item-box .item-row ul li::before {
  content: "・";
  position: absolute;
  top: 0;
  left: 0;
}
#tab .tab-content1 .tab-item .item-box .item-row2 {
  margin-top: 2vw;
}
#tab .tab-content1 .tab-item .item-box .item-row2 ul li {
  color: #666;
  font-size: 13px;
  line-height: 1.4;
  margin-bottom: 1vw;
  letter-spacing: 0;
}
#tab .tab-listbtn {
  margin: 10vw 0px 0px;
}
#tab .tab-listbtn .tab-btn a {
  width: 100%;
  position: relative;
  font-size: 16px;
  line-height: 3;
  border-radius: 10px;
  text-align: center;
  font-weight: 500;
  margin: 0px 0px 4vw;
  background: #0068b7;
  color: #fff;
}
#tab .tab-listbtn .tab-btn a::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 4%;
  transform: translateY(-50%);
  width: 20px;
  height: 17px;
  background: url("../img/shared/icon_dowload.png") center/cover;
}
#tab .tab-listlink {
  display: flex;
  justify-content: flex-start;
  gap: 1%;
  flex-wrap: wrap;
}
#tab .tab-listlink li {
  width: 15.6%;
  margin-bottom: 2vw;
}
#tab .tab-listlink li a {
  text-align: center;
  border-radius: 40px;
  background: #fff;
  border: 1px solid #8cc5f1;
  line-height: 2.5;
}
#tab .tab-rows {
  position: relative;
  padding: 2vw 2% 4vw 12vw;
  background: #fff;
  margin: 0px 0px 6vw;
}
#tab .tab-rows .tab-num {
  position: absolute;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #0068b7;
  color: #fff;
  font-size: 4vw;
  font-weight: 700;
  width: 8vw;
  height: 8vw;
  top: 0px;
  left: 0px;
}
#tab .tab-rows ul li {
  position: relative;
  padding-left: 12px;
  margin-bottom: 1vw;
}
#tab .tab-rows ul li span {
  color: #fe5e83;
}
#tab .tab-rows ul li a {
  line-height: 1.4;
  text-decoration: underline;
  text-underline-offset: 2px;
  letter-spacing: 0;
}
#tab .tab-rows ul li::before {
  content: "・";
  position: absolute;
  top: 0;
  left: 0;
}
@media only screen and (min-width: 768px) {
  #tab {
    padding: 72px 0px 0px;
  }
  #tab .tab-link {
    width: 100%;
    max-width: 1240px;
    padding: 0px 20px;
    display: flex;
    justify-content: space-between;
  }
  #tab .tab-link li {
    width: 49%;
    font-size: 22px;
    line-height: 24px;
    padding: 18px 2% 19px;
    margin: 0px;
    cursor: pointer;
  }
  #tab .tab-link li:hover {
    opacity: 0.8;
  }
  #tab .wrap {
    max-width: 1240px;
  }
  #tab .tab-content1 {
    border-top: 2px solid #0068b7;
    padding: 40px 0px 140px;
  }
  #tab .tab-content1 .tab-txt1 {
    margin: 0px 0px 8px;
  }
  #tab .tab-content1 .tab-txt1.tab-txt2 {
    margin: 35px 0px 10px;
  }
  #tab .tab-content1 .tab-row {
    flex-wrap: wrap;
  }
  #tab .tab-content1 .tab-item {
    width: 49%;
    padding: 20px 4px 14px 24px;
    margin-bottom: 30px;
  }
  #tab .tab-content1 .tab-item .item-img {
    width: 120px;
  }
  #tab .tab-content1 .tab-item .item-box {
    width: calc(100% - 140px);
  }
  #tab .tab-content1 .tab-item .item-box .item-ttl {
    font-size: 20px;
    line-height: 24px;
    margin-bottom: 10px;
    margin-top: -5px;
  }
  #tab .tab-content1 .tab-item .item-box .item-row {
    display: flex;
    justify-content: flex-start;
  }
  #tab .tab-content1 .tab-item .item-box .item-row ul {
    width: -moz-fit-content;
    width: fit-content;
    margin-right: 12px;
  }
  #tab .tab-content1 .tab-item .item-box .item-row ul:last-child {
    margin-right: 0;
  }
  #tab .tab-content1 .tab-item .item-box .item-row ul li {
    margin-bottom: 8px;
    padding-left: 14px;
  }
  #tab .tab-content1 .tab-item .item-box .item-row ul li a {
    font-size: 16px;
    line-height: 20px;
    letter-spacing: -1px;
  }
  #tab .tab-content1 .tab-item .item-box .item-row ul li a:hover {
    text-decoration: none;
  }
  #tab .tab-content1 .tab-item .item-box .item-row.space ul:first-child {
    margin-right: 12%;
  }
  #tab .tab-content1 .tab-item .item-box .item-row.space2 ul:first-child {
    margin-right: 8%;
  }
  #tab .tab-content1 .tab-item .item-box .item-row2 {
    display: flex;
    justify-content: flex-start;
    margin: 2px 0px 0px;
  }
  #tab .tab-content1 .tab-item .item-box .item-row2 ul {
    width: -moz-fit-content;
    width: fit-content;
    margin-right: 20px;
  }
  #tab .tab-content1 .tab-item .item-box .item-row2 ul li {
    font-size: 14px;
    line-height: 16px;
    margin-bottom: 7px;
    letter-spacing: -1px;
  }
  #tab .tab-listbtn {
    width: 72%;
    margin: 76px auto 0px;
    min-width: 800px;
    display: flex;
    justify-content: space-between;
  }
  #tab .tab-listbtn .tab-btn {
    width: 49%;
  }
  #tab .tab-listbtn .tab-btn a {
    font-size: 18px;
    line-height: 56px;
    margin: 0px;
  }
  #tab .tab-listbtn .tab-btn a::before {
    right: 3%;
    width: 24px;
    height: 21px;
  }
  #tab .tab-listbtn .tab-btn a:hover {
    opacity: 0.8;
    transition: all 0.3s;
  }
  #tab .tab-listlink {
    justify-content: flex-start;
    gap: 7px;
  }
  #tab .tab-listlink li {
    width: 50px;
    margin-bottom: 8px;
  }
  #tab .tab-listlink li a {
    line-height: 32px;
    border-width: 2px;
  }
  #tab .tab-listlink li a:hover {
    background: #8cc5f1;
    transition: all 0.3s;
  }
  #tab .tab-rows {
    margin-bottom: 30px;
    padding: 19px 2% 16px 66px;
    display: flex;
    justify-content: space-between;
  }
  #tab .tab-rows .tab-num {
    width: 51px;
    height: 51px;
    font-size: 22px;
  }
  #tab .tab-rows ul {
    width: 32%;
  }
  #tab .tab-rows ul li {
    margin-bottom: 8px;
    padding-left: 14px;
  }
  #tab .tab-rows ul li a {
    font-size: 16px;
    line-height: 20px;
    letter-spacing: -1px;
  }
  #tab .tab-rows ul li a:hover {
    text-decoration: none;
  }
}
@media screen and (min-width: 768px) and (max-width: 1100px) {
  #tab .tab-content1 .tab-item {
    padding-left: 1.4%;
    padding-right: 0.8%;
  }
  #tab .tab-content1 .tab-item .item-img {
    width: 100px;
  }
  #tab .tab-content1 .tab-item .item-box {
    width: calc(100% - 114px);
  }
}
@media screen and (min-width: 768px) and (max-width: 850px) {
  #tab .tab-listbtn {
    width: 100%;
    min-width: unset;
  }
  #tab .tab-listbtn .tab-btn a {
    font-size: 16px;
  }
}/*# sourceMappingURL=products.css.map */