@charset "UTF-8";
/*=======================================
	responsive
=======================================*/
/*=======================================
	responsive
=======================================*/
/* ----------------------

- メインコンテンツ部分
- サイドメニュー / メインコンテンツエリア指定
- アコーディオン (サイドメニュー)
- 検索エリア
- item_main (商品画像と名称のカラムセクション)
- テーブル
---------------------- */
:root {
  --main_color: #006DD9;
}

/*=======================================
　メインコンテンツ部分
=======================================*/
.product_main_contents {
  padding-top: 50px;
  margin-bottom: 100px;
}
@media screen and (max-width: 900px) {
  .product_main_contents {
    padding-top: 30px;
  }
}
@media screen and (max-width: 768px) {
  .product_main_contents {
    margin-bottom: 50px;
  }
}
.product_main_contents .content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 60px;
}
@media screen and (max-width: 1200px) {
  .product_main_contents .content {
    gap: 20px;
  }
}

/*=======================================
　サイドメニュー / メインコンテンツエリア指定
=======================================*/
.leftBox {
  width: 270px;
}
@media screen and (max-width: 1200px) {
  .leftBox {
    width: 220px;
  }
}
@media screen and (max-width: 900px) {
  .leftBox {
    display: none;
  }
}

.rightBox {
  width: calc(100% - 270px - 60px);
}
@media screen and (max-width: 1200px) {
  .rightBox {
    width: calc(100% - 220px - 20px);
  }
}
@media screen and (max-width: 900px) {
  .rightBox {
    width: 100%;
  }
}

/*=======================================
　アコーディオン
=======================================*/
.accordions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.accordion {
  font-size: 14px;
  padding: 15px 0;
  border-bottom: 1px solid #CFEEF8;
}
@media screen and (max-width: 768px) {
  .accordion {
    padding: 0;
  }
}
.accordion__question {
  position: relative;
  cursor: pointer;
}
.accordion__question::before, .accordion__question::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 12px;
  height: 1px;
  background-color: var(--main_color);
}
.accordion__question::after {
  -webkit-transform: translateY(-50%) rotate(90deg);
          transform: translateY(-50%) rotate(90deg);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.accordion__ttl {
  color: var(--main_color);
  font-weight: 700;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 15px;
}
.accordion__ttl .img {
  width: 60px;
}
.accordion__ttl .main {
  width: calc(100% - 60px - 15px);
  padding: 0 10px 0 0;
}
.accordion__ttl .main a {
  position: relative;
  display: inline-block;
}
.accordion__ttl .main a::before {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 50%;
  -webkit-transform: translateX(-50%) scale(0, 1);
          transform: translateX(-50%) scale(0, 1);
  width: 100%;
  height: 1px;
  background-color: var(--main_color);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.accordion__ttl .main a:hover::before {
  -webkit-transform: translateX(-50%) scale(1, 1);
          transform: translateX(-50%) scale(1, 1);
}
.accordion__answer {
  padding-left: 75px;
  padding-top: 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 18px;
}
.accordion__answer li a {
  font-size: 13px;
}
.accordion__body {
  height: 0;
  overflow: hidden;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.accordion__non {
  cursor: auto;
}
.accordion__non::before, .accordion__non::after {
  display: none;
}

.accordion.open .accordion__question::after {
  -webkit-transform: translateY(-50%) rotate(0deg);
          transform: translateY(-50%) rotate(0deg);
}

/*=======================================
　検索エリア
=======================================*/
.search_ttl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 12px;
  gap: 8px;
}
.search_ttl__icon {
  width: 22px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.search_ttl__text {
  font-family: "Noto Sans JP", serif;
  font-size: 16px;
  font-weight: 700;
}

.search_area {
  margin-bottom: 50px;
}
.search_area .input_box {
  margin-bottom: 17px;
}
.search_area .input_box form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 6px;
}
.search_area .input_box form input {
  width: 100%;
  height: 35px;
  border: 1px solid #939393;
  border-radius: 4px;
  padding: 0px 13px;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.search_area .input_box form input::-webkit-input-placeholder {
  color: #BCBCBC;
}
.search_area .input_box form input::-moz-placeholder {
  color: #BCBCBC;
}
.search_area .input_box form input:-ms-input-placeholder {
  color: #BCBCBC;
}
.search_area .input_box form input::-ms-input-placeholder {
  color: #BCBCBC;
}
.search_area .input_box form input::placeholder {
  color: #BCBCBC;
}
.search_area .input_box form input:focus-visible {
  outline: none;
  border: 2px solid var(--main_color);
}
.search_area .input_box form .bt {
  width: 35px;
  height: 35px;
}
.search_area .input_box form .bt a {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: #00A3D9;
  position: relative;
}
.search_area .input_box form .bt a::after {
  content: "";
  background: url("../images/common/icon_search.svg") no-repeat;
  background-size: cover;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 15px;
  height: 15px;
}
.search_area__more {
  color: #E54003;
  padding-left: 12px;
  position: relative;
  font-size: 14px;
  font-weight: 500;
}
.search_area__more a {
  position: relative;
}
.search_area__more a::before {
  content: "";
  position: absolute;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background-color: #E54003;
  -webkit-transform: scale(0, 1);
          transform: scale(0, 1);
  -webkit-transform-origin: center;
          transform-origin: center;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
.search_area__more a:hover::before {
  -webkit-transform: scale(1, 1);
          transform: scale(1, 1);
}
.search_area__more::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: #E54003;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

/*=======================================
　item_main
=======================================*/
.item_main {
  margin-bottom: 120px;
}
@media screen and (max-width: 768px) {
  .item_main {
    margin-bottom: 60px;
  }
}
.item_main .clms {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 64px;
  margin-bottom: 30px;
}
@media screen and (max-width: 1400px) {
  .item_main .clms {
    gap: 4.5vw;
  }
}
@media screen and (max-width: 900px) {
  .item_main .clms {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}
@media screen and (max-width: 768px) {
  .item_main .clms {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}
.item_main .clms .img {
  width: 394px;
  border: 1px solid #E9E9E9;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media screen and (max-width: 1400px) {
  .item_main .clms .img {
    width: 28.15vw;
  }
}
@media screen and (max-width: 900px) {
  .item_main .clms .img {
    width: auto;
    max-width: 350px;
  }
}
@media screen and (max-width: 768px) {
  .item_main .clms .img {
    margin: auto;
    max-width: 100%;
  }
}
.item_main .clms .txt_area {
  width: calc(100% - 394px - 64px);
}
@media screen and (max-width: 1400px) {
  .item_main .clms .txt_area {
    width: calc(100% - 28.15vw - 4.5vw);
  }
}
@media screen and (max-width: 900px) {
  .item_main .clms .txt_area {
    max-width: calc(100% - 350px - 4.5vw);
  }
}
@media screen and (max-width: 768px) {
  .item_main .clms .txt_area {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    max-width: initial;
  }
}
.item_main .clms .txt_area .product_ttl__item {
  margin-bottom: 12px;
}
.item_main .clms .txt_area .item_quality {
  color: #E54003;
  font-size: 18px;
  padding-left: 15px;
  position: relative;
  margin-bottom: 60px;
}
@media screen and (max-width: 1200px) {
  .item_main .clms .txt_area .item_quality {
    font-size: 1.5vw;
    margin-bottom: 40px;
  }
}
@media screen and (max-width: 768px) {
  .item_main .clms .txt_area .item_quality {
    font-size: 18px;
    margin-bottom: 0;
  }
}
.item_main .clms .txt_area .item_quality::before {
  content: "";
  width: 9px;
  height: 9px;
  background-color: #E54003;
  position: absolute;
  left: 0;
  top: 0.9em;
  border-radius: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.item_main .clms .txt_area .btn_area {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 20px;
}
.item_main .dl_group {
  font-size: 14px;
  margin-bottom: 83px;
}
.item_main .dl_group .plain {
  margin-bottom: 4px;
}
@media screen and (max-width: 768px) {
  .item_main .dl_group .plain {
    margin-bottom: 12px;
  }
}
.item_main .dl_group__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 15px;
}
@media screen and (max-width: 768px) {
  .item_main .dl_group__list {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
.item_main .dl_group__list a {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  color: #E54003;
  position: relative;
  line-height: 1.4;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 2px;
}
.item_main .dl_group__list a::before {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #E54003;
  -webkit-transform: scale(0, 1);
          transform: scale(0, 1);
  -webkit-transform-origin: center;
          transform-origin: center;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
@media screen and (max-width: 768px) {
  .item_main .dl_group__list a::before {
    bottom: -3px;
  }
}
.item_main .dl_group__list a:hover::before {
  -webkit-transform: scale(1, 1);
          transform: scale(1, 1);
}
.item_main .dl_group__list span.sla {
  width: 6px;
  height: 14px;
  position: relative;
  margin-top: 3px;
}
.item_main .dl_group__list span.sla::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 1px;
  height: 100%;
  background-color: #E54003;
  -webkit-transform: rotate(30deg);
          transform: rotate(30deg);
}
.item_main .dl_group__list .aro {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}
.item_main .type {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 35px;
}
.item_main .type__list {
  display: grid;
  padding: 21px 24px;
  background-color: #F5F5F5;
  grid-template-columns: repeat(3, 1fr);
}
@media screen and (max-width: 768px) {
  .item_main .type__list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    padding: 15px 16px;
    gap: 0px;
  }
}
.item_main .type__list li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 12px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .item_main .type__list li {
    padding: 18px;
  }
}
.item_main .type__list li:nth-child(2) {
  border-right: 1px solid var(--main_color);
  border-left: 1px solid var(--main_color);
}
@media screen and (max-width: 768px) {
  .item_main .type__list li:nth-child(2) {
    border-top: 1px solid var(--main_color);
    border-bottom: 1px solid var(--main_color);
    border-right: none;
    border-left: none;
  }
}
.item_main .type__tag {
  width: 120px;
  font-family: "Noto Sans JP", serif;
  font-size: 18px;
  height: 35px;
  font-weight: 700;
  padding: 3px 12px 4px;
  background-color: #333;
  line-height: 1.4;
  border: 1px solid #707070;
  color: #fff;
  border-radius: 50px;
}
.item_main .type__text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: calc(100% - 35px - 12px);
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media screen and (max-width: 768px) {
  .item_main .type__text {
    font-size: 15px;
  }
}

/*=======================================
　テーブル
=======================================*/
.rightBox.table_cont {
  padding: 20px;
}

.table-wrap {
  overflow: auto;
}

.table {
  width: 100%;
  min-width: 600px;
  border-collapse: collapse;
}

table.specTb {
  margin-bottom: 50px;
}
table.specTb th[rowspan],
table.specTb td[rowspan] {
  border-bottom: 1px dotted var(--main_color);
}
table.specTb {
  /* <table>タグ内の偶数行にスタイルを適用 */
}
table.specTb tr {
  border-top: 1px dotted #006DD9;
}
table.specTb tr:last-child {
  border-bottom: 1px dotted #006DD9;
}
table.specTb tr:nth-child(even) {
  background-color: #f1fafe;
}
table.specTb tr.en_white {
  background-color: #fff;
}
table.specTb tr.en_white th,
table.specTb tr.en_white td {
  background-color: #fff;
}
table.specTb tr.en_blue {
  background-color: #f1fafe;
}
table.specTb tr.en_blue th,
table.specTb tr.en_blue td {
  background-color: #f1fafe;
}
table.specTb tr td,
table.specTb tr th {
  padding: 10px;
  vertical-align: middle;
}
table.specTb tr th {
  color: var(--main_color);
  font-size: 15px;
  border-right: 1px solid var(--main_color);
  padding-left: 12px;
}
table.specTb tr th.cent {
  text-align: center;
}
table.specTb tr td {
  text-align: center;
  border-left: 1px dotted var(--main_color);
}
table.specTb tr td.non {
  background-color: #ececef;
  position: relative;
}
table.specTb tr td.non::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 25px;
  height: 2px;
  background-color: #939393;
}
@media screen and (max-width: 768px) {
  table.specTb tr td.non::before {
    width: 10px;
    height: 1px;
  }
}
table.specTb {
  /* caption */
}
table.specTb caption.bottom {
  caption-side: bottom;
  margin-top: 20px;
}

table.specTbl tr th {
  width: 26%;
}
table.specTbl tr td {
  width: 18.5%;
}

@media screen and (max-width: 768px) {
  table.specTb2 tr td,
  table.specTb2 tr th {
    padding: 5px;
  }
}
table.specTb2 tr th {
  width: 30%;
}
@media screen and (max-width: 768px) {
  table.specTb2 tr th {
    width: 40%;
    font-size: 13px;
  }
}
table.specTb2 tr td {
  width: 70%;
  vertical-align: middle;
}
@media screen and (max-width: 768px) {
  table.specTb2 tr td {
    width: 60%;
    font-size: 12px;
    text-align: left;
  }
}

table.specTb3 {
  margin-bottom: 60px;
}
@media screen and (max-width: 768px) {
  table.specTb3 {
    margin-bottom: 30px;
  }
}
table.specTb3.ch {
  margin-bottom: 20px;
}
@media screen and (max-width: 768px) {
  table.specTb3 tr td,
  table.specTb3 tr th {
    padding: 5px;
  }
}
table.specTb3 tr th {
  width: calc(30% - 50px);
}
@media screen and (max-width: 768px) {
  table.specTb3 tr th {
    width: calc(40% - 30px);
    font-size: 13px;
  }
}
table.specTb3 tr td {
  width: 70%;
  vertical-align: middle;
}
@media screen and (max-width: 768px) {
  table.specTb3 tr td {
    width: 60%;
    font-size: 12px;
    text-align: left;
  }
}
table.specTb3 tr td.table_ttl {
  width: 50px;
  background-color: var(--main_color);
}
@media screen and (max-width: 768px) {
  table.specTb3 tr td.table_ttl {
    width: 30px;
    padding: 15px 0;
  }
}
table.specTb3 tr td.table_ttl span {
  white-space: pre;
  color: #fff;
  text-orientation: upright;
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  letter-spacing: 0.5em;
  width: 100%;
  vertical-align: middle;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

table.specTb3_1 tr th {
  width: 30%;
}
@media screen and (max-width: 768px) {
  table.specTb3_1 tr th {
    width: 40%;
    font-size: 13px;
  }
}
table.specTb3_1 tr td {
  width: 70%;
  vertical-align: middle;
}
@media screen and (max-width: 768px) {
  table.specTb3_1 tr td {
    width: 60%;
    font-size: 12px;
    text-align: left;
  }
}
table.specTb3_1 tr td.table_ttl {
  width: 50px;
  background-color: var(--main_color);
  color: #fff;
  text-orientation: upright;
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  letter-spacing: 0.5em;
}
@media screen and (max-width: 768px) {
  table.specTb3_1 tr td.table_ttl {
    width: 30px;
    padding: 15px 0;
    text-align: start;
  }
}

table.specTb3_2 tr td {
  text-align: left;
  width: 12%;
  line-height: 1.4;
}
table.specTb3_2 tr td:last-of-type {
  width: 46%;
}
table.specTb3_2 tr td.table_ttl {
  text-align: center;
}
table.specTb3_2 tr td span {
  display: block;
  font-size: 12px;
}

/* 見出し：上と左 横書き */
table.specTb3_3 tr td span {
  -webkit-writing-mode: horizontal-tb !important;
      -ms-writing-mode: lr-tb !important;
          writing-mode: horizontal-tb !important;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

/* th：width30% */
table.specTb3_4 tr th {
  width: 30%;
}

/*=======================================
	responsive
=======================================*/
/*=======================================
	responsive
=======================================*/
/* ----------------------

- メインコンテンツ部分
- サイドメニュー / メインコンテンツエリア指定
- アコーディオン (サイドメニュー)
- 検索エリア
- item_main (商品画像と名称のカラムセクション)
- テーブル
---------------------- */
:root {
  --main_color: #006DD9;
}

/*=======================================
　メインコンテンツ部分
=======================================*/
.product_main_contents {
  padding-top: 50px;
  margin-bottom: 100px;
}
@media screen and (max-width: 900px) {
  .product_main_contents {
    padding-top: 30px;
  }
}
@media screen and (max-width: 768px) {
  .product_main_contents {
    margin-bottom: 50px;
  }
}
.product_main_contents .content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 60px;
}
@media screen and (max-width: 1200px) {
  .product_main_contents .content {
    gap: 20px;
  }
}

/*=======================================
　サイドメニュー / メインコンテンツエリア指定
=======================================*/
.leftBox {
  width: 270px;
}
@media screen and (max-width: 1200px) {
  .leftBox {
    width: 220px;
  }
}
@media screen and (max-width: 900px) {
  .leftBox {
    display: none;
  }
}

.rightBox {
  width: calc(100% - 270px - 60px);
}
@media screen and (max-width: 1200px) {
  .rightBox {
    width: calc(100% - 220px - 20px);
  }
}
@media screen and (max-width: 900px) {
  .rightBox {
    width: 100%;
  }
}

/*=======================================
　アコーディオン
=======================================*/
.accordions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.accordion {
  font-size: 14px;
  padding: 15px 0;
  border-bottom: 1px solid #CFEEF8;
}
@media screen and (max-width: 768px) {
  .accordion {
    padding: 0;
  }
}
.accordion__question {
  position: relative;
  cursor: pointer;
}
.accordion__question::before, .accordion__question::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 12px;
  height: 1px;
  background-color: var(--main_color);
}
.accordion__question::after {
  -webkit-transform: translateY(-50%) rotate(90deg);
          transform: translateY(-50%) rotate(90deg);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.accordion__ttl {
  color: var(--main_color);
  font-weight: 700;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 15px;
}
.accordion__ttl .img {
  width: 60px;
}
.accordion__ttl .main {
  width: calc(100% - 60px - 15px);
  padding: 0 10px 0 0;
}
.accordion__ttl .main a {
  position: relative;
  display: inline-block;
}
.accordion__ttl .main a::before {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 50%;
  -webkit-transform: translateX(-50%) scale(0, 1);
          transform: translateX(-50%) scale(0, 1);
  width: 100%;
  height: 1px;
  background-color: var(--main_color);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.accordion__ttl .main a:hover::before {
  -webkit-transform: translateX(-50%) scale(1, 1);
          transform: translateX(-50%) scale(1, 1);
}
.accordion__answer {
  padding-left: 75px;
  padding-top: 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 18px;
}
.accordion__answer li a {
  font-size: 13px;
}
.accordion__body {
  height: 0;
  overflow: hidden;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.accordion__non {
  cursor: auto;
}
.accordion__non::before, .accordion__non::after {
  display: none;
}

.accordion.open .accordion__question::after {
  -webkit-transform: translateY(-50%) rotate(0deg);
          transform: translateY(-50%) rotate(0deg);
}

/*=======================================
　検索エリア
=======================================*/
.search_ttl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 12px;
  gap: 8px;
}
.search_ttl__icon {
  width: 22px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.search_ttl__text {
  font-family: "Noto Sans JP", serif;
  font-size: 16px;
  font-weight: 700;
}

.search_area {
  margin-bottom: 50px;
}
.search_area .input_box {
  margin-bottom: 17px;
}
.search_area .input_box form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 6px;
}
.search_area .input_box form input {
  width: 100%;
  height: 35px;
  border: 1px solid #939393;
  border-radius: 4px;
  padding: 0px 13px;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.search_area .input_box form input::-webkit-input-placeholder {
  color: #BCBCBC;
}
.search_area .input_box form input::-moz-placeholder {
  color: #BCBCBC;
}
.search_area .input_box form input:-ms-input-placeholder {
  color: #BCBCBC;
}
.search_area .input_box form input::-ms-input-placeholder {
  color: #BCBCBC;
}
.search_area .input_box form input::placeholder {
  color: #BCBCBC;
}
.search_area .input_box form input:focus-visible {
  outline: none;
  border: 2px solid var(--main_color);
}
.search_area .input_box form .bt {
  width: 35px;
  height: 35px;
}
.search_area .input_box form .bt a {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: #00A3D9;
  position: relative;
}
.search_area .input_box form .bt a::after {
  content: "";
  background: url("../images/common/icon_search.svg") no-repeat;
  background-size: cover;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 15px;
  height: 15px;
}
.search_area__more {
  color: #E54003;
  padding-left: 12px;
  position: relative;
  font-size: 14px;
  font-weight: 500;
}
.search_area__more a {
  position: relative;
}
.search_area__more a::before {
  content: "";
  position: absolute;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background-color: #E54003;
  -webkit-transform: scale(0, 1);
          transform: scale(0, 1);
  -webkit-transform-origin: center;
          transform-origin: center;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
.search_area__more a:hover::before {
  -webkit-transform: scale(1, 1);
          transform: scale(1, 1);
}
.search_area__more::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: #E54003;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

/*=======================================
　item_main
=======================================*/
.item_main {
  margin-bottom: 120px;
}
@media screen and (max-width: 768px) {
  .item_main {
    margin-bottom: 60px;
  }
}
.item_main .clms {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 64px;
  margin-bottom: 30px;
}
@media screen and (max-width: 1400px) {
  .item_main .clms {
    gap: 4.5vw;
  }
}
@media screen and (max-width: 900px) {
  .item_main .clms {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}
@media screen and (max-width: 768px) {
  .item_main .clms {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}
.item_main .clms .img {
  width: 394px;
  border: 1px solid #E9E9E9;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media screen and (max-width: 1400px) {
  .item_main .clms .img {
    width: 28.15vw;
  }
}
@media screen and (max-width: 900px) {
  .item_main .clms .img {
    width: auto;
    max-width: 350px;
  }
}
@media screen and (max-width: 768px) {
  .item_main .clms .img {
    margin: auto;
    max-width: 100%;
  }
}
.item_main .clms .txt_area {
  width: calc(100% - 394px - 64px);
}
@media screen and (max-width: 1400px) {
  .item_main .clms .txt_area {
    width: calc(100% - 28.15vw - 4.5vw);
  }
}
@media screen and (max-width: 900px) {
  .item_main .clms .txt_area {
    max-width: calc(100% - 350px - 4.5vw);
  }
}
@media screen and (max-width: 768px) {
  .item_main .clms .txt_area {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    max-width: initial;
  }
}
.item_main .clms .txt_area .product_ttl__item {
  margin-bottom: 12px;
}
.item_main .clms .txt_area .item_quality {
  color: #E54003;
  font-size: 18px;
  padding-left: 15px;
  position: relative;
  margin-bottom: 60px;
}
@media screen and (max-width: 1200px) {
  .item_main .clms .txt_area .item_quality {
    font-size: 1.5vw;
    margin-bottom: 40px;
  }
}
@media screen and (max-width: 768px) {
  .item_main .clms .txt_area .item_quality {
    font-size: 18px;
    margin-bottom: 0;
  }
}
.item_main .clms .txt_area .item_quality::before {
  content: "";
  width: 9px;
  height: 9px;
  background-color: #E54003;
  position: absolute;
  left: 0;
  top: 0.9em;
  border-radius: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.item_main .clms .txt_area .btn_area {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 20px;
}
.item_main .dl_group {
  font-size: 14px;
  margin-bottom: 83px;
}
.item_main .dl_group .plain {
  margin-bottom: 4px;
}
@media screen and (max-width: 768px) {
  .item_main .dl_group .plain {
    margin-bottom: 12px;
  }
}
.item_main .dl_group__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 15px;
}
@media screen and (max-width: 768px) {
  .item_main .dl_group__list {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
.item_main .dl_group__list a {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  color: #E54003;
  position: relative;
  line-height: 1.4;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 2px;
}
.item_main .dl_group__list a::before {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #E54003;
  -webkit-transform: scale(0, 1);
          transform: scale(0, 1);
  -webkit-transform-origin: center;
          transform-origin: center;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
@media screen and (max-width: 768px) {
  .item_main .dl_group__list a::before {
    bottom: -3px;
  }
}
.item_main .dl_group__list a:hover::before {
  -webkit-transform: scale(1, 1);
          transform: scale(1, 1);
}
.item_main .dl_group__list span.sla {
  width: 6px;
  height: 14px;
  position: relative;
  margin-top: 3px;
}
.item_main .dl_group__list span.sla::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 1px;
  height: 100%;
  background-color: #E54003;
  -webkit-transform: rotate(30deg);
          transform: rotate(30deg);
}
.item_main .dl_group__list .aro {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}
.item_main .type {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 35px;
}
.item_main .type__list {
  display: grid;
  padding: 21px 24px;
  background-color: #F5F5F5;
  grid-template-columns: repeat(3, 1fr);
}
@media screen and (max-width: 768px) {
  .item_main .type__list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    padding: 15px 16px;
    gap: 0px;
  }
}
.item_main .type__list li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 12px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .item_main .type__list li {
    padding: 18px;
  }
}
.item_main .type__list li:nth-child(2) {
  border-right: 1px solid var(--main_color);
  border-left: 1px solid var(--main_color);
}
@media screen and (max-width: 768px) {
  .item_main .type__list li:nth-child(2) {
    border-top: 1px solid var(--main_color);
    border-bottom: 1px solid var(--main_color);
    border-right: none;
    border-left: none;
  }
}
.item_main .type__tag {
  width: 120px;
  font-family: "Noto Sans JP", serif;
  font-size: 18px;
  height: 35px;
  font-weight: 700;
  padding: 3px 12px 4px;
  background-color: #333;
  line-height: 1.4;
  border: 1px solid #707070;
  color: #fff;
  border-radius: 50px;
}
.item_main .type__text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: calc(100% - 35px - 12px);
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media screen and (max-width: 768px) {
  .item_main .type__text {
    font-size: 15px;
  }
}

/*=======================================
　テーブル
=======================================*/
.rightBox.table_cont {
  padding: 20px;
}

.table-wrap {
  overflow: auto;
}

.table {
  width: 100%;
  min-width: 600px;
  border-collapse: collapse;
}

table.specTb {
  margin-bottom: 50px;
}
table.specTb th[rowspan],
table.specTb td[rowspan] {
  border-bottom: 1px dotted var(--main_color);
}
table.specTb {
  /* <table>タグ内の偶数行にスタイルを適用 */
}
table.specTb tr {
  border-top: 1px dotted #006DD9;
}
table.specTb tr:last-child {
  border-bottom: 1px dotted #006DD9;
}
table.specTb tr:nth-child(even) {
  background-color: #f1fafe;
}
table.specTb tr.en_white {
  background-color: #fff;
}
table.specTb tr.en_white th,
table.specTb tr.en_white td {
  background-color: #fff;
}
table.specTb tr.en_blue {
  background-color: #f1fafe;
}
table.specTb tr.en_blue th,
table.specTb tr.en_blue td {
  background-color: #f1fafe;
}
table.specTb tr td,
table.specTb tr th {
  padding: 10px;
  vertical-align: middle;
}
table.specTb tr th {
  color: var(--main_color);
  font-size: 15px;
  border-right: 1px solid var(--main_color);
  padding-left: 12px;
}
table.specTb tr th.cent {
  text-align: center;
}
table.specTb tr td {
  text-align: center;
  border-left: 1px dotted var(--main_color);
}
table.specTb tr td.non {
  background-color: #ececef;
  position: relative;
}
table.specTb tr td.non::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 25px;
  height: 2px;
  background-color: #939393;
}
@media screen and (max-width: 768px) {
  table.specTb tr td.non::before {
    width: 10px;
    height: 1px;
  }
}
table.specTb {
  /* caption */
}
table.specTb caption.bottom {
  caption-side: bottom;
  margin-top: 20px;
}

table.specTbl tr th {
  width: 26%;
}
table.specTbl tr td {
  width: 18.5%;
}

@media screen and (max-width: 768px) {
  table.specTb2 tr td,
  table.specTb2 tr th {
    padding: 5px;
  }
}
table.specTb2 tr th {
  width: 30%;
}
@media screen and (max-width: 768px) {
  table.specTb2 tr th {
    width: 40%;
    font-size: 13px;
  }
}
table.specTb2 tr td {
  width: 70%;
  vertical-align: middle;
}
@media screen and (max-width: 768px) {
  table.specTb2 tr td {
    width: 60%;
    font-size: 12px;
    text-align: left;
  }
}

table.specTb3 {
  margin-bottom: 60px;
}
@media screen and (max-width: 768px) {
  table.specTb3 {
    margin-bottom: 30px;
  }
}
table.specTb3.ch {
  margin-bottom: 20px;
}
@media screen and (max-width: 768px) {
  table.specTb3 tr td,
  table.specTb3 tr th {
    padding: 5px;
  }
}
table.specTb3 tr th {
  width: calc(30% - 50px);
}
@media screen and (max-width: 768px) {
  table.specTb3 tr th {
    width: calc(40% - 30px);
    font-size: 13px;
  }
}
table.specTb3 tr td {
  width: 70%;
  vertical-align: middle;
}
@media screen and (max-width: 768px) {
  table.specTb3 tr td {
    width: 60%;
    font-size: 12px;
    text-align: left;
  }
}
table.specTb3 tr td.table_ttl {
  width: 50px;
  background-color: var(--main_color);
}
@media screen and (max-width: 768px) {
  table.specTb3 tr td.table_ttl {
    width: 30px;
    padding: 15px 0;
  }
}
table.specTb3 tr td.table_ttl span {
  white-space: pre;
  color: #fff;
  text-orientation: upright;
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  letter-spacing: 0.5em;
  width: 100%;
  vertical-align: middle;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

table.specTb3_1 tr th {
  width: 30%;
}
@media screen and (max-width: 768px) {
  table.specTb3_1 tr th {
    width: 40%;
    font-size: 13px;
  }
}
table.specTb3_1 tr td {
  width: 70%;
  vertical-align: middle;
}
@media screen and (max-width: 768px) {
  table.specTb3_1 tr td {
    width: 60%;
    font-size: 12px;
    text-align: left;
  }
}
table.specTb3_1 tr td.table_ttl {
  width: 50px;
  background-color: var(--main_color);
  color: #fff;
  text-orientation: upright;
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  letter-spacing: 0.5em;
}
@media screen and (max-width: 768px) {
  table.specTb3_1 tr td.table_ttl {
    width: 30px;
    padding: 15px 0;
    text-align: start;
  }
}

table.specTb3_2 tr td {
  text-align: left;
  width: 12%;
  line-height: 1.4;
}
table.specTb3_2 tr td:last-of-type {
  width: 46%;
}
table.specTb3_2 tr td.table_ttl {
  text-align: center;
}
table.specTb3_2 tr td span {
  display: block;
  font-size: 12px;
}

/* 見出し：上と左 横書き */
table.specTb3_3 tr td span {
  -webkit-writing-mode: horizontal-tb !important;
      -ms-writing-mode: lr-tb !important;
          writing-mode: horizontal-tb !important;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

/* th：width30% */
table.specTb3_4 tr th {
  width: 30%;
}

:root {
  --main_color: #006DD9;
}

body {
  overflow: auto;
}

#wrapper {
  overflow: hidden;
}

/*=======================================
　aタグホバー時にキャプションの色/ ↓変更
=======================================*/
.fig_hov {
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.fig_hov figcaption {
  position: relative;
  padding-right: 20px;
}
.fig_hov figcaption::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--main_color);
  border-right: 2px solid var(--main_color);
  -webkit-transform: translateY(-50%) rotate(45deg);
          transform: translateY(-50%) rotate(45deg);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.fig_hov:hover {
  color: var(--main_color);
}
.fig_hov:hover figcaption::before {
  right: 16px;
}

/*=======================================
　spec
=======================================*/
.spec {
  margin-bottom: 120px;
}
@media screen and (max-width: 768px) {
  .spec {
    margin-bottom: 60px;
  }
}
.spec__ttl {
  margin-bottom: 60px;
}
.spec__txt {
  margin-bottom: 30px;
}

/*=======================================
　item_main
=======================================*/
.item_main a.type__text {
  position: relative;
}
.item_main a.type__text::before {
  content: "";
  position: absolute;
  top: 50%;
  right: -16px;
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--main_color);
  border-right: 2px solid var(--main_color);
  -webkit-transform: translateY(-50%) rotate(45deg);
          transform: translateY(-50%) rotate(45deg);
}
.item_main a.type__text:hover {
  color: var(--main_color);
}

/*=======================================
　ref_video
=======================================*/
.ref_video {
  margin-bottom: 120px;
}
@media screen and (max-width: 768px) {
  .ref_video {
    margin-bottom: 60px;
  }
}
.ref_video__ttl {
  margin-bottom: 50px;
}
.ref_video__main {
  max-width: 640px;
  margin: auto;
  position: relative;
  padding-top: 56.25%;
}
.ref_video__main iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*=======================================
　series
=======================================*/
.series {
  margin-bottom: 150px;
}
@media screen and (max-width: 768px) {
  .series {
    margin-bottom: 60px;
  }
}
.series__ttl {
  margin-bottom: 60px;
}
@media screen and (max-width: 768px) {
  .series__ttl {
    margin-bottom: 40px;
  }
}
.series__clms {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 50px 47px;
}
@media screen and (max-width: 1200px) {
  .series__clms {
    gap: 4.1vw 3.8vw;
  }
}
@media screen and (max-width: 900px) {
  .series__clms {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 768px) {
  .series__clms {
    gap: 25px 20px;
  }
}
.series__clms li {
  width: 100%;
}

/*=======================================
　swipe
=======================================*/
.swipe {
  margin-bottom: 100px;
}
@media screen and (max-width: 768px) {
  .swipe {
    margin-bottom: 50px;
  }
}
.swipe__ttl {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  font-size: 25px;
  font-weight: 500;
  margin-bottom: 38px;
  padding: 18px 25px;
  border: 2px solid var(--main_color);
  position: relative;
}
@media screen and (max-width: 1200px) {
  .swipe__ttl {
    font-size: 2vw;
  }
}
@media screen and (max-width: 768px) {
  .swipe__ttl {
    font-size: 14px;
    padding: 10px 12px;
  }
}
.swipe__ttl::before {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 60px;
  width: 30px;
  height: 2px;
  background-color: #fff;
}
@media screen and (max-width: 768px) {
  .swipe__ttl::before {
    left: 45px;
    width: 20px;
  }
}
.swipe__ttl::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 60px;
  width: 30px;
  height: 2px;
  background-color: var(--main_color);
  -webkit-transform: rotate(-50deg);
          transform: rotate(-50deg);
  -webkit-transform-origin: right center;
          transform-origin: right center;
}
@media screen and (max-width: 768px) {
  .swipe__ttl::after {
    left: 45px;
    width: 20px;
  }
}

.card02 .swiper {
  overflow: visible;
}
.card02 .swiper .swiper-slide {
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.card02 .swiper .swiper-slide figcaption {
  position: relative;
}
.card02 .swiper .swiper-slide figcaption::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--main_color);
  border-right: 2px solid var(--main_color);
  -webkit-transform: translateY(-50%) rotate(45deg);
          transform: translateY(-50%) rotate(45deg);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.card02 .swiper .swiper-slide:hover {
  color: var(--main_color);
}
.card02 .swiper .swiper-slide:hover figcaption::before {
  right: 16px;
}
.card02 .swiper .slide {
  overflow: hidden;
  width: 260px;
}
.card02 .swiper-controller {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1.6rem;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  margin-top: 40px;
}
@media screen and (max-width: 768px) {
  .card02 .swiper-controller {
    margin-top: 20px;
  }
}
.card02 .swiper-controller .swiper-button-prev,
.card02 .swiper-controller .swiper-button-next {
  position: relative;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  margin: 0;
}
.card02 .swiper-controller .swipe_pager {
  width: 126px;
  background-color: #F5F5F5;
  border: 3px solid #D9D9DF;
}
.card02 .swiper-controller .swiper-button-prev {
  border-radius: 33px 0 0 33px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.card02 .swiper-controller .swiper-button-prev:hover {
  background-color: #939393;
}
.card02 .swiper-controller .swiper-button-prev:hover:after {
  color: #fff;
}
.card02 .swiper-controller .swiper-button-prev:hover:before {
  background-color: #142A98;
}
.card02 .swiper-controller .swiper-button-next {
  border-radius: 0 33px 33px 0;
  background-color: var(--main_color);
  border: 3px solid rgba(255, 255, 255, 0.7);
  right: 0;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.card02 .swiper-controller .swiper-button-next:hover {
  background-color: #142A98;
}
.card02 .swiper-controller .swiper-button-prev:after,
.card02 .swiper-controller .swiper-button-next:after {
  content: "";
}
.card02 .swiper-controller .swiper-button-prev:after {
  content: "PREV";
  position: absolute;
  padding-left: 23px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #333;
  font-family: "Zen Kaku Gothic New", serif;
}
@media screen and (max-width: 768px) {
  .card02 .swiper-controller .swiper-button-prev:after {
    font-size: 14px;
  }
}
.card02 .swiper-controller .swiper-button-prev:before {
  content: "";
  position: absolute;
  top: calc(50% + 1px);
  left: 28px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: var(--main_color);
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.card02 .swiper-controller .swiper-button-next:after {
  content: "NEXT";
  position: absolute;
  padding-right: 23px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #fff;
  font-family: "Zen Kaku Gothic New", serif;
}
@media screen and (max-width: 768px) {
  .card02 .swiper-controller .swiper-button-next:after {
    font-size: 14px;
  }
}
.card02 .swiper-controller .swiper-button-next:before {
  content: "";
  position: absolute;
  top: calc(50% + 1px);
  right: 28px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: #fff;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

/*=======================================
　テーブル (行数が異なるので、都度調整)
=======================================*/
table.specTb_sm1 tr th {
  width: 26%;
}
table.specTb_sm1 tr td {
  width: 37%;
}
table.specTb_sm1__colum01 tr th {
  width: 26%;
}
table.specTb_sm1__colum01 tr td {
  width: 74%;
}
table.specTb_sm1__colum01 tr td.txt_l {
  text-align: left;
}
table.specTb_sm1__colum02 tr th {
  width: 26%;
}
table.specTb_sm1__colum02 tr td {
  width: 37%;
}
table.specTb_sm1__colum022 tr th {
  width: 26%;
}
table.specTb_sm1__colum022 tr td {
  width: 55.5%;
}
table.specTb_sm1__colum022 tr td.col1 {
  width: 18.5%;
}
table.specTb_sm1__colum03 tr th {
  width: 26%;
}
table.specTb_sm1__colum03 tr td {
  width: 24.6666666667%;
}
table.specTb_sm1__colum03 tr td.col2 {
  width: 49.3%;
}
table.specTb_sm1__colum032 tr th {
  width: 26%;
}
table.specTb_sm1__colum032 tr td {
  width: 18.5%;
}
table.specTb_sm1__colum032 tr td.col2 {
  width: 37%;
}
table.specTb_sm1__colum032 tr td.col3 {
  width: 55.5%;
}
table.specTb_sm1__colum04 tr th {
  width: 26%;
}
table.specTb_sm1__colum04 tr td {
  width: 18.5%;
}
table.specTb_sm1__colum042 tr th {
  width: 26%;
}
table.specTb_sm1__colum042 tr td.col1 {
  width: 18.5%;
}
table.specTb_sm1__colum042 tr td.col2 {
  width: 37%;
}
table.specTb_sm1__colum05 tr th {
  width: 26%;
}
table.specTb_sm1__colum05 tr td {
  width: 14.8%;
}
table.specTb_sm1__colum052 tr th {
  width: 26%;
}
table.specTb_sm1__colum052 tr td {
  width: 14.8%;
}
table.specTb_sm1__colum052 tr td.col2 {
  width: 29.6%;
}
table.specTb_sm1__colum052 tr td.col3 {
  width: 44.4%;
}
table.specTb_sm1__colum052 tr td.col4 {
  width: 59.2%;
}

/*=======================================
　コネクタ
=======================================*/
.connect__ttl {
  margin-bottom: 60px;
}
.connect__box {
  margin-bottom: 40px;
}

table.specTb__connect01 tr:nth-child(even) {
  background-color: initial;
}
table.specTb__connect01 tr th {
  vertical-align: middle;
  width: 26%;
  background-color: rgba(228, 245, 254, 0.5);
}
table.specTb__connect01 tr th.tl_cent {
  text-align: center;
  border-right: none;
}
table.specTb__connect01 tr td {
  width: 74%;
}
table.specTb__connect02 tr th {
  width: 26%;
}
table.specTb__connect02 tr th.tl_cent {
  text-align: center;
  border-right: none;
}
table.specTb__connect02 tr td {
  width: 37%;
}
table.specTb__connect022 tr th {
  width: 26%;
}
table.specTb__connect022 tr th.tl_cent {
  text-align: center;
  border-right: none;
}
table.specTb__connect022 tr th.type {
  border-right: 1px dotted var(--main_color);
  width: 13%;
}
table.specTb__connect022 tr th.pin {
  width: 13%;
}
table.specTb__connect022 tr td {
  width: 37%;
}
table.specTb__connect03 tr th {
  width: 26%;
}
table.specTb__connect03 tr th.tl_cent {
  text-align: center;
  border-right: none;
}
table.specTb__connect03 tr td {
  width: 24.6666666667%;
}
table.specTb__connect03 tr td:first-of-type {
  border-left: none;
}
table.specTb__connect04 tr th {
  width: 26%;
}
table.specTb__connect04 tr th.tl_cent {
  text-align: center;
  border-right: none;
}
table.specTb__connect04 tr td {
  width: 28%;
}
table.specTb__connect04 tr td.type {
  width: 10%;
}
table.specTb__connect04 tr td.pin {
  width: 8%;
}
table.specTb__connect042 tr th {
  width: 26%;
}
table.specTb__connect042 tr th.tl_cent {
  text-align: center;
  border-right: none;
}
table.specTb__connect042 tr td {
  width: 18.5%;
}
table.specTb__connect06 tr th {
  width: 26%;
}
table.specTb__connect06 tr th.tl_cent {
  text-align: center;
  border-right: none;
}
table.specTb__connect06 tr td {
  width: 12.3333333333%;
}
table.specTb__connect06 tr td:first-of-type {
  border-left: none;
}
table.specTb__connect07 tr th {
  width: 26%;
}
table.specTb__connect07 tr th.tl_cent {
  text-align: center;
  border-right: none;
}
table.specTb__connect07 tr td {
  width: 10.5714285714%;
}
table.specTb__connect07 tr td:first-of-type {
  border-left: none;
}

/*=======================================
　価格構成
=======================================*/
table.specTb.price tr:nth-child(even) {
  background-color: initial;
}
table.specTb.price tr th {
  vertical-align: middle;
  background-color: #fff;
  border-top: 1px solid var(--main_color);
  border-bottom: 1px solid var(--main_color);
  text-align: center;
}
table.specTb.price tr th.tl_cent {
  text-align: center;
  border-right: none;
}
table.specTb.price tr th.first_cel {
  border-left: none;
}
table.specTb.price tr th.num {
  width: 5%;
}
table.specTb.price tr th.txt {
  width: 40%;
}
table.specTb.price tr td.first_cel {
  border-left: none;
}
table.specTb.price tr td.num {
  width: 10%;
}
table.specTb.price tr td.txt {
  width: 45%;
}
table.specTb.price__price02 tr th {
  width: 50%;
}
table.specTb.price__price02 tr td {
  width: 50%;
}
table.specTb.price__price03 tr th {
  width: 33.3333333333%;
}
table.specTb.price__price03 tr td {
  width: 33.3333333333%;
}
table.specTb.price__price05 tr th {
  width: 15%;
}
table.specTb.price__price05 tr td {
  width: 15%;
}

/*=======================================
　parts_ref
=======================================*/
.parts_ref {
  margin-top: -80px;
  margin-bottom: 120px;
  padding-top: 80px;
}
@media screen and (max-width: 768px) {
  .parts_ref {
    margin-top: -68px;
    margin-bottom: 60px;
    padding-top: 68px;
  }
}
.parts_ref__ttl {
  margin-bottom: 60px;
}
@media screen and (max-width: 768px) {
  .parts_ref__ttl {
    margin-bottom: 40px;
  }
}

/*=======================================
　feature
=======================================*/
.wide {
  font-size: 18px;
  font-weight: 700;
  position: relative;
  padding-left: 16px;
  margin-bottom: 20px;
  margin-top: 15px;
}
@media screen and (max-width: 768px) {
  .wide {
    font-size: 14px;
  }
}
.wide::before {
  content: "";
  position: absolute;
  top: 11px;
  left: 0;
  width: 6px;
  height: 6px;
  background-color: var(--main_color);
  border-radius: 50%;
}
@media screen and (max-width: 1024px) {
  .wide::before {
    top: 5px;
  }
}
@media screen and (max-width: 820px) {
  .wide::before {
    top: 4px;
  }
}
@media screen and (max-width: 768px) {
  .wide::before {
    top: 10px;
  }
}

.clm {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 40px;
}
@media screen and (max-width: 1200px) {
  .clm {
    gap: 30px;
  }
}
@media screen and (max-width: 768px) {
  .clm {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 20px;
  }
}
.clm .img {
  width: 400px;
}
@media screen and (max-width: 1200px) {
  .clm .img {
    width: 33vw;
  }
}
@media screen and (max-width: 768px) {
  .clm .img {
    width: 100%;
  }
}
.clm .txt {
  width: calc(100% - 40px - 400px);
}
@media screen and (max-width: 1200px) {
  .clm .txt {
    width: calc(100% - 30px - 33vw);
  }
}
@media screen and (max-width: 768px) {
  .clm .txt {
    width: 100%;
  }
}

.system__box {
  margin-bottom: 60px;
}
.system__box .ttl {
  color: var(--main_color);
  margin-bottom: 10px;
  margin-top: 10px;
  display: block;
}

.txt__box {
  margin-bottom: 60px;
}

/*=======================================
	responsive
=======================================*/
/*=======================================
	responsive
=======================================*/
/* ----------------------

- メインコンテンツ部分
- サイドメニュー / メインコンテンツエリア指定
- アコーディオン (サイドメニュー)
- 検索エリア
- item_main (商品画像と名称のカラムセクション)
- テーブル
---------------------- */
:root {
  --main_color: #006DD9;
}

/*=======================================
　メインコンテンツ部分
=======================================*/
.product_main_contents {
  padding-top: 50px;
  margin-bottom: 100px;
}
@media screen and (max-width: 900px) {
  .product_main_contents {
    padding-top: 30px;
  }
}
@media screen and (max-width: 768px) {
  .product_main_contents {
    margin-bottom: 50px;
  }
}
.product_main_contents .content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 60px;
}
@media screen and (max-width: 1200px) {
  .product_main_contents .content {
    gap: 20px;
  }
}

/*=======================================
　サイドメニュー / メインコンテンツエリア指定
=======================================*/
.leftBox {
  width: 270px;
}
@media screen and (max-width: 1200px) {
  .leftBox {
    width: 220px;
  }
}
@media screen and (max-width: 900px) {
  .leftBox {
    display: none;
  }
}

.rightBox {
  width: calc(100% - 270px - 60px);
}
@media screen and (max-width: 1200px) {
  .rightBox {
    width: calc(100% - 220px - 20px);
  }
}
@media screen and (max-width: 900px) {
  .rightBox {
    width: 100%;
  }
}

/*=======================================
　アコーディオン
=======================================*/
.accordions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.accordion {
  font-size: 14px;
  padding: 15px 0;
  border-bottom: 1px solid #CFEEF8;
}
@media screen and (max-width: 768px) {
  .accordion {
    padding: 0;
  }
}
.accordion__question {
  position: relative;
  cursor: pointer;
}
.accordion__question::before, .accordion__question::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 12px;
  height: 1px;
  background-color: var(--main_color);
}
.accordion__question::after {
  -webkit-transform: translateY(-50%) rotate(90deg);
          transform: translateY(-50%) rotate(90deg);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.accordion__ttl {
  color: var(--main_color);
  font-weight: 700;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 15px;
}
.accordion__ttl .img {
  width: 60px;
}
.accordion__ttl .main {
  width: calc(100% - 60px - 15px);
  padding: 0 10px 0 0;
}
.accordion__ttl .main a {
  position: relative;
  display: inline-block;
}
.accordion__ttl .main a::before {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 50%;
  -webkit-transform: translateX(-50%) scale(0, 1);
          transform: translateX(-50%) scale(0, 1);
  width: 100%;
  height: 1px;
  background-color: var(--main_color);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.accordion__ttl .main a:hover::before {
  -webkit-transform: translateX(-50%) scale(1, 1);
          transform: translateX(-50%) scale(1, 1);
}
.accordion__answer {
  padding-left: 75px;
  padding-top: 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 18px;
}
.accordion__answer li a {
  font-size: 13px;
}
.accordion__body {
  height: 0;
  overflow: hidden;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.accordion__non {
  cursor: auto;
}
.accordion__non::before, .accordion__non::after {
  display: none;
}

.accordion.open .accordion__question::after {
  -webkit-transform: translateY(-50%) rotate(0deg);
          transform: translateY(-50%) rotate(0deg);
}

/*=======================================
　検索エリア
=======================================*/
.search_ttl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 12px;
  gap: 8px;
}
.search_ttl__icon {
  width: 22px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.search_ttl__text {
  font-family: "Noto Sans JP", serif;
  font-size: 16px;
  font-weight: 700;
}

.search_area {
  margin-bottom: 50px;
}
.search_area .input_box {
  margin-bottom: 17px;
}
.search_area .input_box form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 6px;
}
.search_area .input_box form input {
  width: 100%;
  height: 35px;
  border: 1px solid #939393;
  border-radius: 4px;
  padding: 0px 13px;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.search_area .input_box form input::-webkit-input-placeholder {
  color: #BCBCBC;
}
.search_area .input_box form input::-moz-placeholder {
  color: #BCBCBC;
}
.search_area .input_box form input:-ms-input-placeholder {
  color: #BCBCBC;
}
.search_area .input_box form input::-ms-input-placeholder {
  color: #BCBCBC;
}
.search_area .input_box form input::placeholder {
  color: #BCBCBC;
}
.search_area .input_box form input:focus-visible {
  outline: none;
  border: 2px solid var(--main_color);
}
.search_area .input_box form .bt {
  width: 35px;
  height: 35px;
}
.search_area .input_box form .bt a {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: #00A3D9;
  position: relative;
}
.search_area .input_box form .bt a::after {
  content: "";
  background: url("../images/common/icon_search.svg") no-repeat;
  background-size: cover;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 15px;
  height: 15px;
}
.search_area__more {
  color: #E54003;
  padding-left: 12px;
  position: relative;
  font-size: 14px;
  font-weight: 500;
}
.search_area__more a {
  position: relative;
}
.search_area__more a::before {
  content: "";
  position: absolute;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background-color: #E54003;
  -webkit-transform: scale(0, 1);
          transform: scale(0, 1);
  -webkit-transform-origin: center;
          transform-origin: center;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
.search_area__more a:hover::before {
  -webkit-transform: scale(1, 1);
          transform: scale(1, 1);
}
.search_area__more::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: #E54003;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

/*=======================================
　item_main
=======================================*/
.item_main {
  margin-bottom: 120px;
}
@media screen and (max-width: 768px) {
  .item_main {
    margin-bottom: 60px;
  }
}
.item_main .clms {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 64px;
  margin-bottom: 30px;
}
@media screen and (max-width: 1400px) {
  .item_main .clms {
    gap: 4.5vw;
  }
}
@media screen and (max-width: 900px) {
  .item_main .clms {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}
@media screen and (max-width: 768px) {
  .item_main .clms {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}
.item_main .clms .img {
  width: 394px;
  border: 1px solid #E9E9E9;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media screen and (max-width: 1400px) {
  .item_main .clms .img {
    width: 28.15vw;
  }
}
@media screen and (max-width: 900px) {
  .item_main .clms .img {
    width: auto;
    max-width: 350px;
  }
}
@media screen and (max-width: 768px) {
  .item_main .clms .img {
    margin: auto;
    max-width: 100%;
  }
}
.item_main .clms .txt_area {
  width: calc(100% - 394px - 64px);
}
@media screen and (max-width: 1400px) {
  .item_main .clms .txt_area {
    width: calc(100% - 28.15vw - 4.5vw);
  }
}
@media screen and (max-width: 900px) {
  .item_main .clms .txt_area {
    max-width: calc(100% - 350px - 4.5vw);
  }
}
@media screen and (max-width: 768px) {
  .item_main .clms .txt_area {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    max-width: initial;
  }
}
.item_main .clms .txt_area .product_ttl__item {
  margin-bottom: 12px;
}
.item_main .clms .txt_area .item_quality {
  color: #E54003;
  font-size: 18px;
  padding-left: 15px;
  position: relative;
  margin-bottom: 60px;
}
@media screen and (max-width: 1200px) {
  .item_main .clms .txt_area .item_quality {
    font-size: 1.5vw;
    margin-bottom: 40px;
  }
}
@media screen and (max-width: 768px) {
  .item_main .clms .txt_area .item_quality {
    font-size: 18px;
    margin-bottom: 0;
  }
}
.item_main .clms .txt_area .item_quality::before {
  content: "";
  width: 9px;
  height: 9px;
  background-color: #E54003;
  position: absolute;
  left: 0;
  top: 0.9em;
  border-radius: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.item_main .clms .txt_area .btn_area {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 20px;
}
.item_main .dl_group {
  font-size: 14px;
  margin-bottom: 83px;
}
.item_main .dl_group .plain {
  margin-bottom: 4px;
}
@media screen and (max-width: 768px) {
  .item_main .dl_group .plain {
    margin-bottom: 12px;
  }
}
.item_main .dl_group__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 15px;
}
@media screen and (max-width: 768px) {
  .item_main .dl_group__list {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
.item_main .dl_group__list a {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  color: #E54003;
  position: relative;
  line-height: 1.4;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 2px;
}
.item_main .dl_group__list a::before {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #E54003;
  -webkit-transform: scale(0, 1);
          transform: scale(0, 1);
  -webkit-transform-origin: center;
          transform-origin: center;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
@media screen and (max-width: 768px) {
  .item_main .dl_group__list a::before {
    bottom: -3px;
  }
}
.item_main .dl_group__list a:hover::before {
  -webkit-transform: scale(1, 1);
          transform: scale(1, 1);
}
.item_main .dl_group__list span.sla {
  width: 6px;
  height: 14px;
  position: relative;
  margin-top: 3px;
}
.item_main .dl_group__list span.sla::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 1px;
  height: 100%;
  background-color: #E54003;
  -webkit-transform: rotate(30deg);
          transform: rotate(30deg);
}
.item_main .dl_group__list .aro {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}
.item_main .type {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 35px;
}
.item_main .type__list {
  display: grid;
  padding: 21px 24px;
  background-color: #F5F5F5;
  grid-template-columns: repeat(3, 1fr);
}
@media screen and (max-width: 768px) {
  .item_main .type__list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    padding: 15px 16px;
    gap: 0px;
  }
}
.item_main .type__list li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 12px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .item_main .type__list li {
    padding: 18px;
  }
}
.item_main .type__list li:nth-child(2) {
  border-right: 1px solid var(--main_color);
  border-left: 1px solid var(--main_color);
}
@media screen and (max-width: 768px) {
  .item_main .type__list li:nth-child(2) {
    border-top: 1px solid var(--main_color);
    border-bottom: 1px solid var(--main_color);
    border-right: none;
    border-left: none;
  }
}
.item_main .type__tag {
  width: 120px;
  font-family: "Noto Sans JP", serif;
  font-size: 18px;
  height: 35px;
  font-weight: 700;
  padding: 3px 12px 4px;
  background-color: #333;
  line-height: 1.4;
  border: 1px solid #707070;
  color: #fff;
  border-radius: 50px;
}
.item_main .type__text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: calc(100% - 35px - 12px);
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media screen and (max-width: 768px) {
  .item_main .type__text {
    font-size: 15px;
  }
}

/*=======================================
　テーブル
=======================================*/
.rightBox.table_cont {
  padding: 20px;
}

.table-wrap {
  overflow: auto;
}

.table {
  width: 100%;
  min-width: 600px;
  border-collapse: collapse;
}

table.specTb {
  margin-bottom: 50px;
}
table.specTb th[rowspan],
table.specTb td[rowspan] {
  border-bottom: 1px dotted var(--main_color);
}
table.specTb {
  /* <table>タグ内の偶数行にスタイルを適用 */
}
table.specTb tr {
  border-top: 1px dotted #006DD9;
}
table.specTb tr:last-child {
  border-bottom: 1px dotted #006DD9;
}
table.specTb tr:nth-child(even) {
  background-color: #f1fafe;
}
table.specTb tr.en_white {
  background-color: #fff;
}
table.specTb tr.en_white th,
table.specTb tr.en_white td {
  background-color: #fff;
}
table.specTb tr.en_blue {
  background-color: #f1fafe;
}
table.specTb tr.en_blue th,
table.specTb tr.en_blue td {
  background-color: #f1fafe;
}
table.specTb tr td,
table.specTb tr th {
  padding: 10px;
  vertical-align: middle;
}
table.specTb tr th {
  color: var(--main_color);
  font-size: 15px;
  border-right: 1px solid var(--main_color);
  padding-left: 12px;
}
table.specTb tr th.cent {
  text-align: center;
}
table.specTb tr td {
  text-align: center;
  border-left: 1px dotted var(--main_color);
}
table.specTb tr td.non {
  background-color: #ececef;
  position: relative;
}
table.specTb tr td.non::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 25px;
  height: 2px;
  background-color: #939393;
}
@media screen and (max-width: 768px) {
  table.specTb tr td.non::before {
    width: 10px;
    height: 1px;
  }
}
table.specTb {
  /* caption */
}
table.specTb caption.bottom {
  caption-side: bottom;
  margin-top: 20px;
}

table.specTbl tr th {
  width: 26%;
}
table.specTbl tr td {
  width: 18.5%;
}

@media screen and (max-width: 768px) {
  table.specTb2 tr td,
  table.specTb2 tr th {
    padding: 5px;
  }
}
table.specTb2 tr th {
  width: 30%;
}
@media screen and (max-width: 768px) {
  table.specTb2 tr th {
    width: 40%;
    font-size: 13px;
  }
}
table.specTb2 tr td {
  width: 70%;
  vertical-align: middle;
}
@media screen and (max-width: 768px) {
  table.specTb2 tr td {
    width: 60%;
    font-size: 12px;
    text-align: left;
  }
}

table.specTb3 {
  margin-bottom: 60px;
}
@media screen and (max-width: 768px) {
  table.specTb3 {
    margin-bottom: 30px;
  }
}
table.specTb3.ch {
  margin-bottom: 20px;
}
@media screen and (max-width: 768px) {
  table.specTb3 tr td,
  table.specTb3 tr th {
    padding: 5px;
  }
}
table.specTb3 tr th {
  width: calc(30% - 50px);
}
@media screen and (max-width: 768px) {
  table.specTb3 tr th {
    width: calc(40% - 30px);
    font-size: 13px;
  }
}
table.specTb3 tr td {
  width: 70%;
  vertical-align: middle;
}
@media screen and (max-width: 768px) {
  table.specTb3 tr td {
    width: 60%;
    font-size: 12px;
    text-align: left;
  }
}
table.specTb3 tr td.table_ttl {
  width: 50px;
  background-color: var(--main_color);
}
@media screen and (max-width: 768px) {
  table.specTb3 tr td.table_ttl {
    width: 30px;
    padding: 15px 0;
  }
}
table.specTb3 tr td.table_ttl span {
  white-space: pre;
  color: #fff;
  text-orientation: upright;
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  letter-spacing: 0.5em;
  width: 100%;
  vertical-align: middle;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

table.specTb3_1 tr th {
  width: 30%;
}
@media screen and (max-width: 768px) {
  table.specTb3_1 tr th {
    width: 40%;
    font-size: 13px;
  }
}
table.specTb3_1 tr td {
  width: 70%;
  vertical-align: middle;
}
@media screen and (max-width: 768px) {
  table.specTb3_1 tr td {
    width: 60%;
    font-size: 12px;
    text-align: left;
  }
}
table.specTb3_1 tr td.table_ttl {
  width: 50px;
  background-color: var(--main_color);
  color: #fff;
  text-orientation: upright;
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  letter-spacing: 0.5em;
}
@media screen and (max-width: 768px) {
  table.specTb3_1 tr td.table_ttl {
    width: 30px;
    padding: 15px 0;
    text-align: start;
  }
}

table.specTb3_2 tr td {
  text-align: left;
  width: 12%;
  line-height: 1.4;
}
table.specTb3_2 tr td:last-of-type {
  width: 46%;
}
table.specTb3_2 tr td.table_ttl {
  text-align: center;
}
table.specTb3_2 tr td span {
  display: block;
  font-size: 12px;
}

/* 見出し：上と左 横書き */
table.specTb3_3 tr td span {
  -webkit-writing-mode: horizontal-tb !important;
      -ms-writing-mode: lr-tb !important;
          writing-mode: horizontal-tb !important;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

/* th：width30% */
table.specTb3_4 tr th {
  width: 30%;
}

:root {
  --main_color: #006DD9;
}

/*=======================================
　パンくずリスト
=======================================*/
.tab_pankuzu .content {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: end;
}

/*=======================================
　about
=======================================*/
.about__ttl {
  margin-bottom: 50px;
}
@media screen and (max-width: 768px) {
  .about__ttl {
    margin-bottom: 25px;
  }
}
.about__plain {
  margin-bottom: 115px;
}
@media screen and (max-width: 768px) {
  .about__plain {
    margin-bottom: 60px;
  }
}

/*=======================================
　custom-act
=======================================*/
.custom-act {
  margin-bottom: 120px;
}
@media screen and (max-width: 768px) {
  .custom-act {
    margin-bottom: 60px;
  }
}
.custom-act__ttl {
  margin-bottom: 50px;
}
@media screen and (max-width: 768px) {
  .custom-act__ttl {
    margin-bottom: 25px;
  }
}
.custom-act .clms {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 44px;
}
@media screen and (max-width: 1200px) {
  .custom-act .clms {
    gap: 30px;
  }
}
@media screen and (max-width: 768px) {
  .custom-act .clms {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 30px;
  }
}
.custom-act .clms:nth-child(2) {
  margin-bottom: 60px;
}
@media screen and (max-width: 768px) {
  .custom-act .clms:nth-child(2) {
    margin-bottom: 50px;
  }
}
.custom-act .clms .left {
  width: 394px;
}
@media screen and (max-width: 1200px) {
  .custom-act .clms .left {
    width: 28.142vw;
  }
}
@media screen and (max-width: 768px) {
  .custom-act .clms .left {
    width: 100%;
  }
}
.custom-act .clms .left .img_explain img {
  -webkit-transform: initial;
          transform: initial;
}
.custom-act .clms .left .img_explain img:hover {
  -webkit-transform: none;
          transform: none;
}
.custom-act .clms .right {
  width: calc(100% - 394px - 44px);
}
@media screen and (max-width: 1200px) {
  .custom-act .clms .right {
    width: calc(100% - 28.142vw - 30px);
  }
}
@media screen and (max-width: 768px) {
  .custom-act .clms .right {
    width: 100%;
  }
}
.custom-act .clms .right .ttl {
  margin-bottom: 28px;
}
.custom-act .clms .right ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 10px;
}
.custom-act .clms .right ul li {
  padding-left: 15px;
  position: relative;
}
.custom-act .clms .right ul li::before {
  content: "";
  position: absolute;
  top: 11px;
  left: 0;
  width: 5px;
  height: 5px;
  background-color: var(--main_color);
  border-radius: 50%;
}

/*=======================================
　sys-act
=======================================*/
.sys-act .ttl {
  margin-bottom: 60px;
}
.sys-act .clms {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 29px;
  margin-bottom: 60px;
}
@media screen and (max-width: 768px) {
  .sys-act .clms {
    grid-template-columns: repeat(1, 1fr);
    gap: 30px;
    margin-bottom: 35px;
  }
}
.sys-act .clms .box .img img:hover {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.sys-act .text_list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 11px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.sys-act .text_list li {
  position: relative;
  padding-left: 15px;
}
.sys-act .text_list li::before {
  content: "";
  position: absolute;
  top: 11px;
  left: 0;
  width: 5px;
  height: 5px;
  background-color: var(--main_color);
  border-radius: 50%;
}

/*=======================================
　cable_box
=======================================*/
.cable_box .product_ttl__line {
  margin-bottom: 60px;
}
@media screen and (max-width: 768px) {
  .cable_box .product_ttl__line {
    margin-bottom: 30px;
  }
}
.cable_box .custom-act .product_txt__has_bg {
  margin-bottom: 30px;
}
@media screen and (max-width: 768px) {
  .cable_box .custom-act .product_txt__has_bg {
    margin-bottom: 15px;
  }
}
.cable_box .custom-act .left {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
.cable_box .clms .plain {
  margin-bottom: 20px;
}
.cable_box .clms .img_explain .img {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}
.cable_box .clms .text__list {
  gap: 20px 0 !important;
}
@media screen and (max-width: 768px) {
  .cable_box .clms .text__list {
    gap: 10px 0 !important;
  }
}
.cable_box .clms .text__list li {
  padding-left: 0 !important;
  text-indent: 0 !important;
}
.cable_box .clms .text__list li::before {
  display: none;
}
.cable_box .clms .text__list .ttl {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-bottom: 10px;
  display: block;
  font-size: 18px;
  padding: 5px 10px 6px;
  line-height: 1.2;
  background-color: #EEE;
}
@media screen and (max-width: 768px) {
  .cable_box .clms .text__list .ttl {
    font-size: 15px;
  }
}

.has_dot {
  padding-left: 15px;
  position: relative;
  margin: 20px auto 10px;
}
.has_dot::before {
  content: "";
  position: absolute;
  top: 11px;
  left: 0;
  width: 5px;
  height: 5px;
  background-color: var(--main_color);
  border-radius: 50%;
}
.has_dot.mt_none {
  margin: 0 0 10px;
}

.clms {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 44px;
  margin-bottom: 15px;
}
@media screen and (max-width: 1200px) {
  .clms {
    gap: 30px;
  }
}
@media screen and (max-width: 768px) {
  .clms {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 30px;
  }
}
.clms:nth-child(2) {
  margin-bottom: 60px;
}
@media screen and (max-width: 768px) {
  .clms:nth-child(2) {
    margin-bottom: 50px;
  }
}
.clms .left {
  width: 394px;
}
@media screen and (max-width: 1200px) {
  .clms .left {
    width: 28.142vw;
  }
}
@media screen and (max-width: 768px) {
  .clms .left {
    width: 100%;
  }
}
.clms .left .img_explain img {
  -webkit-transform: initial;
          transform: initial;
}
.clms .left .img_explain img:hover {
  -webkit-transform: none;
          transform: none;
}
.clms .right {
  width: calc(100% - 394px - 44px);
}
@media screen and (max-width: 1200px) {
  .clms .right {
    width: calc(100% - 28.142vw - 30px);
  }
}
@media screen and (max-width: 768px) {
  .clms .right {
    width: 100%;
  }
}
.clms .right .ttl {
  margin-bottom: 28px;
}
.clms .right ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 10px;
}
.clms .right ul li {
  padding-left: 15px;
  position: relative;
}
.clms .right ul li::before {
  content: "";
  position: absolute;
  top: 11px;
  left: 0;
  width: 5px;
  height: 5px;
  background-color: var(--main_color);
  border-radius: 50%;
}
.clms__l01 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 44px;
}
@media screen and (max-width: 1200px) {
  .clms__l01 {
    gap: 30px;
  }
}
@media screen and (max-width: 768px) {
  .clms__l01 {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 30px;
  }
}
.clms__l01 .left {
  width: 131px;
}
@media screen and (max-width: 1200px) {
  .clms__l01 .left {
    width: 15vw;
  }
}
@media screen and (max-width: 768px) {
  .clms__l01 .left {
    width: 100%;
  }
}
.clms__l01 .right {
  width: calc(100% - 131px - 44px);
}
@media screen and (max-width: 1200px) {
  .clms__l01 .right {
    width: calc(100% - 15vw - 30px);
  }
}
@media screen and (max-width: 768px) {
  .clms__l01 .right {
    width: 100%;
  }
}

/*=======================================
　.nav_menu
=======================================*/
.nav_menu {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 30px;
}
@media screen and (max-width: 768px) {
  .nav_menu {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}
.nav_menu .tab-menu {
  color: #00A3D9;
  gap: 12px;
  border: 1px solid #00A3D9;
  cursor: pointer;
  -webkit-transition: 0.3s all ease;
  transition: 0.3s all ease;
}
@media screen and (max-width: 768px) {
  .nav_menu .tab-menu {
    gap: 8px;
  }
}
.nav_menu .tab-menu a {
  color: #00A3D9;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 70px;
}
@media screen and (max-width: 768px) {
  .nav_menu .tab-menu a {
    height: 50px;
  }
}
.nav_menu .tab-menu__text {
  font-size: 18px;
  font-weight: 500;
  color: #00A3D9;
  line-height: 1;
}
@media screen and (max-width: 1200px) {
  .nav_menu .tab-menu__text {
    font-size: 1.5vw;
  }
}
@media screen and (max-width: 768px) {
  .nav_menu .tab-menu__text {
    font-size: 12px;
  }
}
.nav_menu .tab-menu__icon {
  fill: #00A3D9;
  width: 24px;
  top: 1px;
  position: relative;
}
.nav_menu .tab-menu .i_sys {
  fill: #fff;
}
.nav_menu .tab-menu.current a {
  color: #fff;
}
.nav_menu .tab-menu.current {
  background-color: #00A3D9;
}
.nav_menu .tab-menu:hover {
  color: #fff;
  background-color: #00A3D9;
}
.nav_menu .tab-menu:hover a {
  color: #fff;
}
.nav_menu .tab-menu:hover .tab-menu__text {
  color: #fff;
}
.nav_menu .tab-menu:hover .tab-menu__icon {
  fill: #fff;
}
.nav_menu .tab-menu:hover .i_sys {
  fill: #00A3D9;
}

/*=======================================
	responsive
=======================================*/
/*=======================================
	responsive
=======================================*/
/* ----------------------

- メインコンテンツ部分
- サイドメニュー / メインコンテンツエリア指定
- アコーディオン (サイドメニュー)
- 検索エリア
- item_main (商品画像と名称のカラムセクション)
- テーブル
---------------------- */
:root {
  --main_color: #006DD9;
}

/*=======================================
　メインコンテンツ部分
=======================================*/
.product_main_contents {
  padding-top: 50px;
  margin-bottom: 100px;
}
@media screen and (max-width: 900px) {
  .product_main_contents {
    padding-top: 30px;
  }
}
@media screen and (max-width: 768px) {
  .product_main_contents {
    margin-bottom: 50px;
  }
}
.product_main_contents .content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 60px;
}
@media screen and (max-width: 1200px) {
  .product_main_contents .content {
    gap: 20px;
  }
}

/*=======================================
　サイドメニュー / メインコンテンツエリア指定
=======================================*/
.leftBox {
  width: 270px;
}
@media screen and (max-width: 1200px) {
  .leftBox {
    width: 220px;
  }
}
@media screen and (max-width: 900px) {
  .leftBox {
    display: none;
  }
}

.rightBox {
  width: calc(100% - 270px - 60px);
}
@media screen and (max-width: 1200px) {
  .rightBox {
    width: calc(100% - 220px - 20px);
  }
}
@media screen and (max-width: 900px) {
  .rightBox {
    width: 100%;
  }
}

/*=======================================
　アコーディオン
=======================================*/
.accordions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.accordion {
  font-size: 14px;
  padding: 15px 0;
  border-bottom: 1px solid #CFEEF8;
}
@media screen and (max-width: 768px) {
  .accordion {
    padding: 0;
  }
}
.accordion__question {
  position: relative;
  cursor: pointer;
}
.accordion__question::before, .accordion__question::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 12px;
  height: 1px;
  background-color: var(--main_color);
}
.accordion__question::after {
  -webkit-transform: translateY(-50%) rotate(90deg);
          transform: translateY(-50%) rotate(90deg);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.accordion__ttl {
  color: var(--main_color);
  font-weight: 700;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 15px;
}
.accordion__ttl .img {
  width: 60px;
}
.accordion__ttl .main {
  width: calc(100% - 60px - 15px);
  padding: 0 10px 0 0;
}
.accordion__ttl .main a {
  position: relative;
  display: inline-block;
}
.accordion__ttl .main a::before {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 50%;
  -webkit-transform: translateX(-50%) scale(0, 1);
          transform: translateX(-50%) scale(0, 1);
  width: 100%;
  height: 1px;
  background-color: var(--main_color);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.accordion__ttl .main a:hover::before {
  -webkit-transform: translateX(-50%) scale(1, 1);
          transform: translateX(-50%) scale(1, 1);
}
.accordion__answer {
  padding-left: 75px;
  padding-top: 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 18px;
}
.accordion__answer li a {
  font-size: 13px;
}
.accordion__body {
  height: 0;
  overflow: hidden;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.accordion__non {
  cursor: auto;
}
.accordion__non::before, .accordion__non::after {
  display: none;
}

.accordion.open .accordion__question::after {
  -webkit-transform: translateY(-50%) rotate(0deg);
          transform: translateY(-50%) rotate(0deg);
}

/*=======================================
　検索エリア
=======================================*/
.search_ttl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 12px;
  gap: 8px;
}
.search_ttl__icon {
  width: 22px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.search_ttl__text {
  font-family: "Noto Sans JP", serif;
  font-size: 16px;
  font-weight: 700;
}

.search_area {
  margin-bottom: 50px;
}
.search_area .input_box {
  margin-bottom: 17px;
}
.search_area .input_box form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 6px;
}
.search_area .input_box form input {
  width: 100%;
  height: 35px;
  border: 1px solid #939393;
  border-radius: 4px;
  padding: 0px 13px;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.search_area .input_box form input::-webkit-input-placeholder {
  color: #BCBCBC;
}
.search_area .input_box form input::-moz-placeholder {
  color: #BCBCBC;
}
.search_area .input_box form input:-ms-input-placeholder {
  color: #BCBCBC;
}
.search_area .input_box form input::-ms-input-placeholder {
  color: #BCBCBC;
}
.search_area .input_box form input::placeholder {
  color: #BCBCBC;
}
.search_area .input_box form input:focus-visible {
  outline: none;
  border: 2px solid var(--main_color);
}
.search_area .input_box form .bt {
  width: 35px;
  height: 35px;
}
.search_area .input_box form .bt a {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: #00A3D9;
  position: relative;
}
.search_area .input_box form .bt a::after {
  content: "";
  background: url("../images/common/icon_search.svg") no-repeat;
  background-size: cover;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 15px;
  height: 15px;
}
.search_area__more {
  color: #E54003;
  padding-left: 12px;
  position: relative;
  font-size: 14px;
  font-weight: 500;
}
.search_area__more a {
  position: relative;
}
.search_area__more a::before {
  content: "";
  position: absolute;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background-color: #E54003;
  -webkit-transform: scale(0, 1);
          transform: scale(0, 1);
  -webkit-transform-origin: center;
          transform-origin: center;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
.search_area__more a:hover::before {
  -webkit-transform: scale(1, 1);
          transform: scale(1, 1);
}
.search_area__more::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: #E54003;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

/*=======================================
　item_main
=======================================*/
.item_main {
  margin-bottom: 120px;
}
@media screen and (max-width: 768px) {
  .item_main {
    margin-bottom: 60px;
  }
}
.item_main .clms {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 64px;
  margin-bottom: 30px;
}
@media screen and (max-width: 1400px) {
  .item_main .clms {
    gap: 4.5vw;
  }
}
@media screen and (max-width: 900px) {
  .item_main .clms {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}
@media screen and (max-width: 768px) {
  .item_main .clms {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}
.item_main .clms .img {
  width: 394px;
  border: 1px solid #E9E9E9;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media screen and (max-width: 1400px) {
  .item_main .clms .img {
    width: 28.15vw;
  }
}
@media screen and (max-width: 900px) {
  .item_main .clms .img {
    width: auto;
    max-width: 350px;
  }
}
@media screen and (max-width: 768px) {
  .item_main .clms .img {
    margin: auto;
    max-width: 100%;
  }
}
.item_main .clms .txt_area {
  width: calc(100% - 394px - 64px);
}
@media screen and (max-width: 1400px) {
  .item_main .clms .txt_area {
    width: calc(100% - 28.15vw - 4.5vw);
  }
}
@media screen and (max-width: 900px) {
  .item_main .clms .txt_area {
    max-width: calc(100% - 350px - 4.5vw);
  }
}
@media screen and (max-width: 768px) {
  .item_main .clms .txt_area {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    max-width: initial;
  }
}
.item_main .clms .txt_area .product_ttl__item {
  margin-bottom: 12px;
}
.item_main .clms .txt_area .item_quality {
  color: #E54003;
  font-size: 18px;
  padding-left: 15px;
  position: relative;
  margin-bottom: 60px;
}
@media screen and (max-width: 1200px) {
  .item_main .clms .txt_area .item_quality {
    font-size: 1.5vw;
    margin-bottom: 40px;
  }
}
@media screen and (max-width: 768px) {
  .item_main .clms .txt_area .item_quality {
    font-size: 18px;
    margin-bottom: 0;
  }
}
.item_main .clms .txt_area .item_quality::before {
  content: "";
  width: 9px;
  height: 9px;
  background-color: #E54003;
  position: absolute;
  left: 0;
  top: 0.9em;
  border-radius: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.item_main .clms .txt_area .btn_area {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 20px;
}
.item_main .dl_group {
  font-size: 14px;
  margin-bottom: 83px;
}
.item_main .dl_group .plain {
  margin-bottom: 4px;
}
@media screen and (max-width: 768px) {
  .item_main .dl_group .plain {
    margin-bottom: 12px;
  }
}
.item_main .dl_group__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 15px;
}
@media screen and (max-width: 768px) {
  .item_main .dl_group__list {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
.item_main .dl_group__list a {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  color: #E54003;
  position: relative;
  line-height: 1.4;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 2px;
}
.item_main .dl_group__list a::before {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #E54003;
  -webkit-transform: scale(0, 1);
          transform: scale(0, 1);
  -webkit-transform-origin: center;
          transform-origin: center;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
@media screen and (max-width: 768px) {
  .item_main .dl_group__list a::before {
    bottom: -3px;
  }
}
.item_main .dl_group__list a:hover::before {
  -webkit-transform: scale(1, 1);
          transform: scale(1, 1);
}
.item_main .dl_group__list span.sla {
  width: 6px;
  height: 14px;
  position: relative;
  margin-top: 3px;
}
.item_main .dl_group__list span.sla::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 1px;
  height: 100%;
  background-color: #E54003;
  -webkit-transform: rotate(30deg);
          transform: rotate(30deg);
}
.item_main .dl_group__list .aro {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}
.item_main .type {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 35px;
}
.item_main .type__list {
  display: grid;
  padding: 21px 24px;
  background-color: #F5F5F5;
  grid-template-columns: repeat(3, 1fr);
}
@media screen and (max-width: 768px) {
  .item_main .type__list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    padding: 15px 16px;
    gap: 0px;
  }
}
.item_main .type__list li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 12px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .item_main .type__list li {
    padding: 18px;
  }
}
.item_main .type__list li:nth-child(2) {
  border-right: 1px solid var(--main_color);
  border-left: 1px solid var(--main_color);
}
@media screen and (max-width: 768px) {
  .item_main .type__list li:nth-child(2) {
    border-top: 1px solid var(--main_color);
    border-bottom: 1px solid var(--main_color);
    border-right: none;
    border-left: none;
  }
}
.item_main .type__tag {
  width: 120px;
  font-family: "Noto Sans JP", serif;
  font-size: 18px;
  height: 35px;
  font-weight: 700;
  padding: 3px 12px 4px;
  background-color: #333;
  line-height: 1.4;
  border: 1px solid #707070;
  color: #fff;
  border-radius: 50px;
}
.item_main .type__text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: calc(100% - 35px - 12px);
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media screen and (max-width: 768px) {
  .item_main .type__text {
    font-size: 15px;
  }
}

/*=======================================
　テーブル
=======================================*/
.rightBox.table_cont {
  padding: 20px;
}

.table-wrap {
  overflow: auto;
}

.table {
  width: 100%;
  min-width: 600px;
  border-collapse: collapse;
}

table.specTb {
  margin-bottom: 50px;
}
table.specTb th[rowspan],
table.specTb td[rowspan] {
  border-bottom: 1px dotted var(--main_color);
}
table.specTb {
  /* <table>タグ内の偶数行にスタイルを適用 */
}
table.specTb tr {
  border-top: 1px dotted #006DD9;
}
table.specTb tr:last-child {
  border-bottom: 1px dotted #006DD9;
}
table.specTb tr:nth-child(even) {
  background-color: #f1fafe;
}
table.specTb tr.en_white {
  background-color: #fff;
}
table.specTb tr.en_white th,
table.specTb tr.en_white td {
  background-color: #fff;
}
table.specTb tr.en_blue {
  background-color: #f1fafe;
}
table.specTb tr.en_blue th,
table.specTb tr.en_blue td {
  background-color: #f1fafe;
}
table.specTb tr td,
table.specTb tr th {
  padding: 10px;
  vertical-align: middle;
}
table.specTb tr th {
  color: var(--main_color);
  font-size: 15px;
  border-right: 1px solid var(--main_color);
  padding-left: 12px;
}
table.specTb tr th.cent {
  text-align: center;
}
table.specTb tr td {
  text-align: center;
  border-left: 1px dotted var(--main_color);
}
table.specTb tr td.non {
  background-color: #ececef;
  position: relative;
}
table.specTb tr td.non::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 25px;
  height: 2px;
  background-color: #939393;
}
@media screen and (max-width: 768px) {
  table.specTb tr td.non::before {
    width: 10px;
    height: 1px;
  }
}
table.specTb {
  /* caption */
}
table.specTb caption.bottom {
  caption-side: bottom;
  margin-top: 20px;
}

table.specTbl tr th {
  width: 26%;
}
table.specTbl tr td {
  width: 18.5%;
}

@media screen and (max-width: 768px) {
  table.specTb2 tr td,
  table.specTb2 tr th {
    padding: 5px;
  }
}
table.specTb2 tr th {
  width: 30%;
}
@media screen and (max-width: 768px) {
  table.specTb2 tr th {
    width: 40%;
    font-size: 13px;
  }
}
table.specTb2 tr td {
  width: 70%;
  vertical-align: middle;
}
@media screen and (max-width: 768px) {
  table.specTb2 tr td {
    width: 60%;
    font-size: 12px;
    text-align: left;
  }
}

table.specTb3 {
  margin-bottom: 60px;
}
@media screen and (max-width: 768px) {
  table.specTb3 {
    margin-bottom: 30px;
  }
}
table.specTb3.ch {
  margin-bottom: 20px;
}
@media screen and (max-width: 768px) {
  table.specTb3 tr td,
  table.specTb3 tr th {
    padding: 5px;
  }
}
table.specTb3 tr th {
  width: calc(30% - 50px);
}
@media screen and (max-width: 768px) {
  table.specTb3 tr th {
    width: calc(40% - 30px);
    font-size: 13px;
  }
}
table.specTb3 tr td {
  width: 70%;
  vertical-align: middle;
}
@media screen and (max-width: 768px) {
  table.specTb3 tr td {
    width: 60%;
    font-size: 12px;
    text-align: left;
  }
}
table.specTb3 tr td.table_ttl {
  width: 50px;
  background-color: var(--main_color);
}
@media screen and (max-width: 768px) {
  table.specTb3 tr td.table_ttl {
    width: 30px;
    padding: 15px 0;
  }
}
table.specTb3 tr td.table_ttl span {
  white-space: pre;
  color: #fff;
  text-orientation: upright;
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  letter-spacing: 0.5em;
  width: 100%;
  vertical-align: middle;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

table.specTb3_1 tr th {
  width: 30%;
}
@media screen and (max-width: 768px) {
  table.specTb3_1 tr th {
    width: 40%;
    font-size: 13px;
  }
}
table.specTb3_1 tr td {
  width: 70%;
  vertical-align: middle;
}
@media screen and (max-width: 768px) {
  table.specTb3_1 tr td {
    width: 60%;
    font-size: 12px;
    text-align: left;
  }
}
table.specTb3_1 tr td.table_ttl {
  width: 50px;
  background-color: var(--main_color);
  color: #fff;
  text-orientation: upright;
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  letter-spacing: 0.5em;
}
@media screen and (max-width: 768px) {
  table.specTb3_1 tr td.table_ttl {
    width: 30px;
    padding: 15px 0;
    text-align: start;
  }
}

table.specTb3_2 tr td {
  text-align: left;
  width: 12%;
  line-height: 1.4;
}
table.specTb3_2 tr td:last-of-type {
  width: 46%;
}
table.specTb3_2 tr td.table_ttl {
  text-align: center;
}
table.specTb3_2 tr td span {
  display: block;
  font-size: 12px;
}

/* 見出し：上と左 横書き */
table.specTb3_3 tr td span {
  -webkit-writing-mode: horizontal-tb !important;
      -ms-writing-mode: lr-tb !important;
          writing-mode: horizontal-tb !important;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

/* th：width30% */
table.specTb3_4 tr th {
  width: 30%;
}

:root {
  --main_color: #006DD9;
}

/*=======================================
　整列
=======================================*/
.align_C {
  text-align: center;
}

.align_R {
  text-align: right;
}

/*=======================================
　mv_sec
=======================================*/
.item_main__controller .clms .txt_area .product_ttl__item {
  margin-bottom: 60px;
}
@media screen and (max-width: 768px) {
  .item_main__controller .clms .txt_area .product_ttl__item {
    margin-bottom: 30px;
  }
}
.item_main__controller .dl_group__list {
  display: block;
  margin-bottom: 2px;
}

.fill_change {
  fill: #333;
}

/*=======================================
　tab_area
=======================================*/
.tab_area .tab-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media screen and (max-width: 768px) {
  .tab_area .tab-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}
.tab_area .tab-list .tab-menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 12px;
  border: 1px solid #00A3D9;
  height: 70px;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  cursor: pointer;
  -webkit-transition: 0.3s all ease;
  transition: 0.3s all ease;
}
@media screen and (max-width: 768px) {
  .tab_area .tab-list .tab-menu {
    gap: 8px;
    height: 50px;
  }
}
.tab_area .tab-list .tab-menu__text {
  font-size: 18px;
  font-weight: 500;
  color: #00A3D9;
  line-height: 1;
}
@media screen and (max-width: 1200px) {
  .tab_area .tab-list .tab-menu__text {
    font-size: 1.5vw;
  }
}
@media screen and (max-width: 768px) {
  .tab_area .tab-list .tab-menu__text {
    font-size: 12px;
  }
}
.tab_area .tab-list .tab-menu__icon {
  fill: #00A3D9;
  width: 24px;
  top: 1px;
  position: relative;
}
.tab_area .tab-list .tab-menu .i_sys {
  fill: #fff;
}
.tab_area .tab-list .tab-menu.current {
  background-color: #00A3D9;
}
.tab_area .tab-list .tab-menu.current .tab-menu__text {
  color: #fff;
}
.tab_area .tab-list .tab-menu.current .tab-menu__icon {
  fill: #fff;
}
.tab_area .tab-list .tab-menu.current .i_sys {
  fill: #00A3D9;
}
.tab_area .tab-list .tab-menu:hover {
  background-color: #00A3D9;
}
.tab_area .tab-list .tab-menu:hover .tab-menu__text {
  color: #fff;
}
.tab_area .tab-list .tab-menu:hover .tab-menu__icon {
  fill: #fff;
}
.tab_area .tab-list .tab-menu:hover .i_sys {
  fill: #00A3D9;
}
.tab_area .content-box {
  display: none;
}
.tab_area .content-box.current {
  display: block;
}

.feature_area .ttl {
  margin: 120px 0 60px;
}
@media screen and (max-width: 768px) {
  .feature_area .ttl {
    margin: 60px 0 30px;
  }
}
.feature_area .ttl__plain {
  margin-bottom: 30px;
}
.feature_area .feature_box ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-bottom: 60px;
  gap: 11px;
}
.feature_area .feature_box ul li {
  padding-left: 16px;
  position: relative;
}
@media screen and (max-width: 768px) {
  .feature_area .feature_box ul li {
    padding-left: 12px;
    line-height: 1.75;
  }
}
.feature_area .feature_box ul li::before {
  content: "";
  position: absolute;
  top: calc(50% + 1px);
  left: 0;
  width: 6px;
  height: 6px;
  background-color: var(--main_color);
  border-radius: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
@media screen and (max-width: 768px) {
  .feature_area .feature_box ul li::before {
    -webkit-transform: none;
            transform: none;
    top: 8px;
  }
}
.feature_area .rel_box {
  margin-bottom: 60px;
}
@media screen and (max-width: 768px) {
  .feature_area .rel_box {
    margin-bottom: 30px;
  }
}
.feature_area .has_border {
  margin-bottom: 60px;
}
@media screen and (max-width: 768px) {
  .feature_area .has_border {
    margin-bottom: 30px;
  }
}
.feature_area .plain {
  margin-bottom: 15px;
}

.software_area, .top_area {
  margin: 120px 0 0;
}
@media screen and (max-width: 768px) {
  .software_area, .top_area {
    margin: 60px 0 0;
  }
}
.software_area .area01, .top_area .area01 {
  margin-bottom: 50px;
}
.software_area .area01 .ttl, .top_area .area01 .ttl {
  color: var(--main_color);
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 15px;
}
.software_area .area01 .cap_area, .top_area .area01 .cap_area {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2px;
  margin-top: 12px;
}
.software_area .area01 .cap_area p, .top_area .area01 .cap_area p {
  font-size: 12px;
  margin-left: 1em;
  text-indent: -1em;
}
@media screen and (max-width: 768px) {
  .software_area .area01 .cap_area p, .top_area .area01 .cap_area p {
    font-size: 10px;
    line-height: 1.5;
  }
}
.software_area .area02, .top_area .area02 {
  margin: 40px 0 0;
}
.software_area .area02 .ttl, .top_area .area02 .ttl {
  color: var(--main_color);
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 15px;
}
.software_area .area02__clm, .top_area .area02__clm {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 60px;
}
@media screen and (max-width: 1200px) {
  .software_area .area02__clm, .top_area .area02__clm {
    gap: 5vw;
  }
}
@media screen and (max-width: 768px) {
  .software_area .area02__clm, .top_area .area02__clm {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 30px;
  }
}
.software_area .area02__clm .img, .top_area .area02__clm .img {
  width: 210px;
}
@media screen and (max-width: 1200px) {
  .software_area .area02__clm .img, .top_area .area02__clm .img {
    width: 17.5vw;
  }
}
@media screen and (max-width: 768px) {
  .software_area .area02__clm .img, .top_area .area02__clm .img {
    width: 100%;
    max-width: 210px;
  }
}
.software_area .area02__table, .top_area .area02__table {
  width: calc(100% - 210px - 60px);
}
@media screen and (max-width: 1200px) {
  .software_area .area02__table, .top_area .area02__table {
    width: calc(100% - 17.5vw - 5vw);
  }
}
@media screen and (max-width: 768px) {
  .software_area .area02__table, .top_area .area02__table {
    width: 100%;
  }
}
.software_area ul.ex, .top_area ul.ex {
  margin-top: 20px;
}
.software_area ul.ex li, .top_area ul.ex li {
  margin-left: 1em;
  text-indent: -1em;
  font-size: 13px;
}

.software__ttl, .top__ttl {
  margin-bottom: 20px;
}
.software .plain, .top .plain {
  margin-bottom: 60px;
}
@media screen and (max-width: 768px) {
  .software .plain, .top .plain {
    margin-bottom: 30px;
  }
}
.software__box, .top__box {
  margin-bottom: 80px;
}
@media screen and (max-width: 768px) {
  .software__box, .top__box {
    margin-bottom: 40px;
  }
}
.software__box .ttl__plain, .top__box .ttl__plain {
  margin-bottom: 30px;
}
@media screen and (max-width: 768px) {
  .software__box .ttl__plain, .top__box .ttl__plain {
    margin-bottom: 15px;
  }
}
.software__box .clm, .top__box .clm {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 20px;
  margin-bottom: 40px;
}
@media screen and (max-width: 768px) {
  .software__box .clm, .top__box .clm {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
.software__box .clm--01 .img, .software__box .clm--04 .img, .top__box .clm--01 .img, .top__box .clm--04 .img {
  width: 285px;
}
@media screen and (max-width: 768px) {
  .software__box .clm--01 .img, .software__box .clm--04 .img, .top__box .clm--01 .img, .top__box .clm--04 .img {
    width: 100%;
    -ms-flex-item-align: center;
        align-self: center;
  }
}
.software__box .clm--01 .text, .software__box .clm--04 .text, .top__box .clm--01 .text, .top__box .clm--04 .text {
  width: calc(100% - 285px - 20px);
}
@media screen and (max-width: 768px) {
  .software__box .clm--01 .text, .software__box .clm--04 .text, .top__box .clm--01 .text, .top__box .clm--04 .text {
    width: 100%;
  }
}
.software__box .clm--01 .text__inn:not(:last-child), .software__box .clm--04 .text__inn:not(:last-child), .top__box .clm--01 .text__inn:not(:last-child), .top__box .clm--04 .text__inn:not(:last-child) {
  margin-bottom: 40px;
}
.software__box .clm--01 .text .normal, .software__box .clm--04 .text .normal, .top__box .clm--01 .text .normal, .top__box .clm--04 .text .normal {
  margin-bottom: 15px;
}
.software__box .clm--01 .text .ttl, .software__box .clm--04 .text .ttl, .top__box .clm--01 .text .ttl, .top__box .clm--04 .text .ttl {
  color: var(--main_color);
  margin-bottom: 10px;
  display: block;
}
.software__box .clm--01 .text .ttl--02, .software__box .clm--04 .text .ttl--02, .top__box .clm--01 .text .ttl--02, .top__box .clm--04 .text .ttl--02 {
  font-size: 18px;
  line-height: 1.444;
  margin-bottom: 20px;
  padding-left: 20px;
  display: block;
  position: relative;
}
.software__box .clm--01 .text .ttl--02::before, .software__box .clm--04 .text .ttl--02::before, .top__box .clm--01 .text .ttl--02::before, .top__box .clm--04 .text .ttl--02::before {
  content: "";
  width: 6px;
  height: 6px;
  display: inline-block;
  background: var(--main_color);
  border-radius: 50%;
  position: absolute;
  left: 3px;
  top: 0.7em;
}
.software__box .clm--02 .img, .top__box .clm--02 .img {
  width: 350px;
}
@media screen and (max-width: 768px) {
  .software__box .clm--02 .img, .top__box .clm--02 .img {
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    -ms-flex-item-align: center;
        align-self: center;
  }
}
.software__box .clm--02 .text_area, .top__box .clm--02 .text_area {
  width: calc(100% - 350px - 20px);
}
@media screen and (max-width: 768px) {
  .software__box .clm--02 .text_area, .top__box .clm--02 .text_area {
    width: 100%;
  }
}
.software__box .clm--02 .text_area p, .top__box .clm--02 .text_area p {
  padding-left: 1em;
  text-indent: -1em;
}
.software__box .clm--02 .text_area .text, .top__box .clm--02 .text_area .text {
  margin-bottom: 10px;
}
.software__box .clm--02 .text_area .notion, .top__box .clm--02 .text_area .notion {
  font-size: 12px;
  line-height: 1.68;
}
.software__box .clm--03 figure figcaption, .top__box .clm--03 figure figcaption {
  font-size: 13px;
  margin-top: 8px;
}
.software__box .clm--04 .img, .top__box .clm--04 .img {
  width: 342px;
}
@media screen and (max-width: 768px) {
  .software__box .clm--04 .img, .top__box .clm--04 .img {
    width: 100%;
  }
}
.software__box .clm--04 .text, .top__box .clm--04 .text {
  width: calc(100% - 342px - 20px);
}
@media screen and (max-width: 768px) {
  .software__box .clm--04 .text, .top__box .clm--04 .text {
    width: 100%;
  }
}
.software__box .clm--04 .text__list, .top__box .clm--04 .text__list {
  gap: 20px 0;
}
.software__box .clm--04 .text__list li, .top__box .clm--04 .text__list li {
  padding-left: 0;
  text-indent: 0;
}
.software__box .product_movie, .top__box .product_movie {
  width: 100%;
  height: auto;
  aspect-ratio: 560/315;
  margin-bottom: 10px;
}
.software__box--02:not(:last-child), .top__box--02:not(:last-child) {
  margin-bottom: 80px;
}
@media screen and (max-width: 768px) {
  .software__box--02:not(:last-child), .top__box--02:not(:last-child) {
    margin-bottom: 40px;
  }
}
.software__box--02 .img, .top__box--02 .img {
  margin-bottom: 20px;
}
.software .cont .plain, .top .cont .plain {
  margin-bottom: 20px;
}
.software .cont .text dl, .top .cont .text dl {
  margin-top: 10px;
}
.software .cont .text dl dd, .top .cont .text dl dd {
  font-size: 12px;
}
.software .new, .top .new {
  color: #F00;
}
.software .has_border, .top .has_border {
  margin-top: 60px;
}
@media screen and (max-width: 768px) {
  .software .has_border, .top .has_border {
    margin-top: 30px;
  }
}

.name_area {
  margin-top: 120px;
}
@media screen and (max-width: 768px) {
  .name_area {
    margin-top: 60px;
  }
}
.name_area .ttl {
  margin-bottom: 60px;
}
.name_area .name__box {
  margin-bottom: 80px;
}
@media screen and (max-width: 768px) {
  .name_area .name__box {
    margin-bottom: 40px;
  }
}
.name_area .name__box .ttl__plain {
  margin-bottom: 30px;
}
@media screen and (max-width: 768px) {
  .name_area .name__box .ttl__plain {
    margin-bottom: 15px;
    font-size: 14px;
  }
}
.name_area .name__tbl tr th,
.name_area .name__tbl tr td {
  text-align: center;
}
.name_area .name__tbl tr th {
  width: 26%;
}
.name_area .name__tbl tr td {
  width: 74%;
}

.pin_area {
  margin-top: 120px;
}
@media screen and (max-width: 768px) {
  .pin_area {
    margin-top: 60px;
  }
}
.pin_area .ttl {
  margin-bottom: 60px;
}
@media screen and (max-width: 768px) {
  .pin_area .ttl {
    margin-bottom: 30px;
  }
}
.pin_area .pin__plain {
  margin-bottom: 30px;
}
@media screen and (max-width: 768px) {
  .pin_area .pin__plain {
    margin-bottom: 15px;
    font-size: 14px;
  }
}
.pin_area .pin__box {
  margin-bottom: 80px;
}
@media screen and (max-width: 768px) {
  .pin_area .pin__box {
    margin-bottom: 40px;
  }
}
.pin_area .pin__tbl tr th,
.pin_area .pin__tbl tr td {
  text-align: center;
}
@media screen and (max-width: 768px) {
  .pin_area .pin__tbl tr th,
  .pin_area .pin__tbl tr td {
    padding: 5px;
  }
}
.pin_area .pin__tbl tr th {
  width: 12%;
}
.pin_area .pin__tbl tr th.hd {
  width: 22%;
  border-right: 1px dotted var(--main_color);
}
.pin_area .pin__tbl tr th.has {
  background-color: #00A3D9;
  color: #fff;
}
@media screen and (max-width: 768px) {
  .pin_area .pin__tbl tr th.has {
    font-size: 13px;
  }
}
.pin_area .pin__tbl tr td {
  width: 22%;
}
@media screen and (max-width: 768px) {
  .pin_area .pin__tbl tr td {
    font-size: 10px;
  }
}

.circle {
  margin-top: 120px;
}
@media screen and (max-width: 768px) {
  .circle {
    margin-top: 60px;
  }
}
.circle__ttl {
  margin-bottom: 60px;
}
@media screen and (max-width: 768px) {
  .circle__ttl {
    margin-bottom: 30px;
  }
}
.circle__box {
  margin-bottom: 60px;
}
@media screen and (max-width: 768px) {
  .circle__box {
    margin-bottom: 30px;
  }
}
.circle__box .ttl__plain {
  margin-bottom: 30px;
}
@media screen and (max-width: 768px) {
  .circle__box .ttl__plain {
    margin-bottom: 15px;
    font-size: 14px;
  }
}
.circle__img {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border: 1px solid #D9D9DF;
  padding: 35px 40px;
}
@media screen and (max-width: 768px) {
  .circle__img {
    padding: 30px 15px;
  }
}

.system_area .system, .system_area .application, .system_area .three, .application_area .system, .application_area .application, .application_area .three, .three_area .system, .three_area .application, .three_area .three {
  margin-top: 120px;
}
@media screen and (max-width: 768px) {
  .system_area .system, .system_area .application, .system_area .three, .application_area .system, .application_area .application, .application_area .three, .three_area .system, .three_area .application, .three_area .three {
    margin-top: 60px;
  }
}
.system_area .system__ttl, .system_area .application__ttl, .system_area .three__ttl, .application_area .system__ttl, .application_area .application__ttl, .application_area .three__ttl, .three_area .system__ttl, .three_area .application__ttl, .three_area .three__ttl {
  margin-bottom: 60px;
}
@media screen and (max-width: 768px) {
  .system_area .system__ttl, .system_area .application__ttl, .system_area .three__ttl, .application_area .system__ttl, .application_area .application__ttl, .application_area .three__ttl, .three_area .system__ttl, .three_area .application__ttl, .three_area .three__ttl {
    margin-bottom: 30px;
  }
}
.system_area .system__box, .system_area .application__box, .system_area .three__box, .application_area .system__box, .application_area .application__box, .application_area .three__box, .three_area .system__box, .three_area .application__box, .three_area .three__box {
  margin-bottom: 80px;
}
@media screen and (max-width: 768px) {
  .system_area .system__box, .system_area .application__box, .system_area .three__box, .application_area .system__box, .application_area .application__box, .application_area .three__box, .three_area .system__box, .three_area .application__box, .three_area .three__box {
    margin-bottom: 40px;
  }
}
.system_area .system__box .ttl__plain, .system_area .application__box .ttl__plain, .system_area .three__box .ttl__plain, .application_area .system__box .ttl__plain, .application_area .application__box .ttl__plain, .application_area .three__box .ttl__plain, .three_area .system__box .ttl__plain, .three_area .application__box .ttl__plain, .three_area .three__box .ttl__plain {
  margin-bottom: 30px;
}
@media screen and (max-width: 768px) {
  .system_area .system__box .ttl__plain, .system_area .application__box .ttl__plain, .system_area .three__box .ttl__plain, .application_area .system__box .ttl__plain, .application_area .application__box .ttl__plain, .application_area .three__box .ttl__plain, .three_area .system__box .ttl__plain, .three_area .application__box .ttl__plain, .three_area .three__box .ttl__plain {
    margin-bottom: 15px;
  }
}
.system_area .system__box .img, .system_area .application__box .img, .system_area .three__box .img, .application_area .system__box .img, .application_area .application__box .img, .application_area .three__box .img, .three_area .system__box .img, .three_area .application__box .img, .three_area .three__box .img {
  border: 1px solid #D9D9DF;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 50px 0;
}
.system_area .system__box .img img, .system_area .application__box .img img, .system_area .three__box .img img, .application_area .system__box .img img, .application_area .application__box .img img, .application_area .three__box .img img, .three_area .system__box .img img, .three_area .application__box .img img, .three_area .three__box .img img {
  max-width: 94%;
}
@media screen and (max-width: 768px) {
  .system_area .system__box .img img, .system_area .application__box .img img, .system_area .three__box .img img, .application_area .system__box .img img, .application_area .application__box .img img, .application_area .three__box .img img, .three_area .system__box .img img, .three_area .application__box .img img, .three_area .three__box .img img {
    max-width: 96%;
  }
}
.system_area .system__box .img--02, .system_area .application__box .img--02, .system_area .three__box .img--02, .application_area .system__box .img--02, .application_area .application__box .img--02, .application_area .three__box .img--02, .three_area .system__box .img--02, .three_area .application__box .img--02, .three_area .three__box .img--02 {
  padding: 25px;
}
@media screen and (max-width: 768px) {
  .system_area .system__box .img--02, .system_area .application__box .img--02, .system_area .three__box .img--02, .application_area .system__box .img--02, .application_area .application__box .img--02, .application_area .three__box .img--02, .three_area .system__box .img--02, .three_area .application__box .img--02, .three_area .three__box .img--02 {
    padding: 8px 5px;
  }
}
.system_area .system__box .img--02:not(:last-of-type), .system_area .application__box .img--02:not(:last-of-type), .system_area .three__box .img--02:not(:last-of-type), .application_area .system__box .img--02:not(:last-of-type), .application_area .application__box .img--02:not(:last-of-type), .application_area .three__box .img--02:not(:last-of-type), .three_area .system__box .img--02:not(:last-of-type), .three_area .application__box .img--02:not(:last-of-type), .three_area .three__box .img--02:not(:last-of-type) {
  margin-bottom: 60px;
}
@media screen and (max-width: 768px) {
  .system_area .system__box .img--02:not(:last-of-type), .system_area .application__box .img--02:not(:last-of-type), .system_area .three__box .img--02:not(:last-of-type), .application_area .system__box .img--02:not(:last-of-type), .application_area .application__box .img--02:not(:last-of-type), .application_area .three__box .img--02:not(:last-of-type), .three_area .system__box .img--02:not(:last-of-type), .three_area .application__box .img--02:not(:last-of-type), .three_area .three__box .img--02:not(:last-of-type) {
    margin-bottom: 30px;
  }
}
.system_area .system__box .img--03, .system_area .application__box .img--03, .system_area .three__box .img--03, .application_area .system__box .img--03, .application_area .application__box .img--03, .application_area .three__box .img--03, .three_area .system__box .img--03, .three_area .application__box .img--03, .three_area .three__box .img--03 {
  padding: 0;
  border: none;
  margin-bottom: 30px;
}
.system_area .system__box .img--03 img, .system_area .application__box .img--03 img, .system_area .three__box .img--03 img, .application_area .system__box .img--03 img, .application_area .application__box .img--03 img, .application_area .three__box .img--03 img, .three_area .system__box .img--03 img, .three_area .application__box .img--03 img, .three_area .three__box .img--03 img {
  max-width: 100%;
}
.system_area .system__box .img_clm, .system_area .application__box .img_clm, .system_area .three__box .img_clm, .application_area .system__box .img_clm, .application_area .application__box .img_clm, .application_area .three__box .img_clm, .three_area .system__box .img_clm, .three_area .application__box .img_clm, .three_area .three__box .img_clm {
  border: 1px solid #D9D9DF;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 20px;
  padding: 50px 0;
}
@media screen and (max-width: 768px) {
  .system_area .system__box .img_clm, .system_area .application__box .img_clm, .system_area .three__box .img_clm, .application_area .system__box .img_clm, .application_area .application__box .img_clm, .application_area .three__box .img_clm, .three_area .system__box .img_clm, .three_area .application__box .img_clm, .three_area .three__box .img_clm {
    padding: 30px 0;
  }
}
.system_area .system__box .img_clm .img, .system_area .application__box .img_clm .img, .system_area .three__box .img_clm .img, .application_area .system__box .img_clm .img, .application_area .application__box .img_clm .img, .application_area .three__box .img_clm .img, .three_area .system__box .img_clm .img, .three_area .application__box .img_clm .img, .three_area .three__box .img_clm .img {
  border: none;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
  padding: 0;
}
@media screen and (max-width: 768px) {
  .system_area .system__box .img_clm .img.sm img, .system_area .application__box .img_clm .img.sm img, .system_area .three__box .img_clm .img.sm img, .application_area .system__box .img_clm .img.sm img, .application_area .application__box .img_clm .img.sm img, .application_area .three__box .img_clm .img.sm img, .three_area .system__box .img_clm .img.sm img, .three_area .application__box .img_clm .img.sm img, .three_area .three__box .img_clm .img.sm img {
    max-width: 40%;
  }
}
.system_area .system__box .img_clm .img--02, .system_area .application__box .img_clm .img--02, .system_area .three__box .img_clm .img--02, .application_area .system__box .img_clm .img--02, .application_area .application__box .img_clm .img--02, .application_area .three__box .img_clm .img--02, .three_area .system__box .img_clm .img--02, .three_area .application__box .img_clm .img--02, .three_area .three__box .img_clm .img--02 {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.system_area .system__box .img_clm .img--02 img, .system_area .application__box .img_clm .img--02 img, .system_area .three__box .img_clm .img--02 img, .application_area .system__box .img_clm .img--02 img, .application_area .application__box .img_clm .img--02 img, .application_area .three__box .img_clm .img--02 img, .three_area .system__box .img_clm .img--02 img, .three_area .application__box .img_clm .img--02 img, .three_area .three__box .img_clm .img--02 img {
  width: 41.72%;
}
.system_area .system .plain, .system_area .application .plain, .system_area .three .plain, .application_area .system .plain, .application_area .application .plain, .application_area .three .plain, .three_area .system .plain, .three_area .application .plain, .three_area .three .plain {
  margin-bottom: 15px;
}
.system_area .application__box, .application_area .application__box, .three_area .application__box {
  margin-bottom: 100px;
}
@media screen and (max-width: 768px) {
  .system_area .application__box, .application_area .application__box, .three_area .application__box {
    margin-bottom: 50px;
  }
}

.controller_ex > .plain {
  margin-bottom: 60px;
}
@media screen and (max-width: 768px) {
  .controller_ex > .plain {
    margin-bottom: 30px;
  }
}
.controller_ex .circle__img {
  margin-bottom: 30px;
}
.controller_ex .circle__box .plain {
  margin-bottom: 20px;
}

.special_box {
  margin-bottom: 150px;
}
@media screen and (max-width: 768px) {
  .special_box {
    margin-bottom: 100px;
  }
}

/*=======================================
　下マージン
=======================================*/
.general_box__ma_btm {
  margin-bottom: 60px;
}
@media screen and (max-width: 768px) {
  .general_box__ma_btm {
    margin-bottom: 30px;
  }
}

.normal__ma_btm {
  margin-bottom: 30px;
}

.img__ma_btm {
  margin-bottom: 30px;
}

.plain__ma_btm--30 {
  margin-bottom: 30px;
}
.plain__ma_btm--100 {
  margin-bottom: 100px;
}
@media screen and (max-width: 768px) {
  .plain__ma_btm--100 {
    margin-bottom: 50px;
  }
}

/*=======================================
　各種テーブル
=======================================*/
.softTb tr {
  border-bottom: 1px dotted #00A3D9;
}
.softTb tr td,
.softTb tr th {
  padding: 10px 0;
  text-align: center;
  vertical-align: middle;
  border-right: 1px dotted var(--main_color);
}
.softTb tr td:last-of-type,
.softTb tr th:last-of-type {
  border-right: none;
}
@media screen and (max-width: 768px) {
  .softTb tr td,
  .softTb tr th {
    width: auto;
    padding: 5px;
  }
}
.softTb tr th {
  font-size: 14px;
  font-weight: 600;
}
@media screen and (max-width: 1200px) {
  .softTb tr th {
    font-size: 1.1666666667vw;
  }
}
@media screen and (max-width: 768px) {
  .softTb tr th {
    font-size: 10px;
  }
}
.softTb tr td {
  font-size: 15px;
  font-weight: 500;
}
@media screen and (max-width: 1200px) {
  .softTb tr td {
    font-size: 1.25vw;
  }
}
@media screen and (max-width: 768px) {
  .softTb tr td {
    font-size: 10px;
  }
}
.softTb tr td.non {
  background-color: rgba(217, 217, 223, 0.5);
  position: relative;
}
.softTb tr td.non::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 25px;
  height: 2px;
  background-color: #939393;
}
@media screen and (max-width: 768px) {
  .softTb tr td.non::before {
    width: 10px;
    height: 1px;
  }
}
.softTb .tb_item {
  background-color: #F1FAFE;
  color: #00A3D9;
  border-top: 1px dotted #00A3D9;
}
.softTb .tb_item th {
  font-size: 14px !important;
}
@media screen and (max-width: 1200px) {
  .softTb .tb_item th {
    font-size: 1.1666666667vw !important;
  }
}
@media screen and (max-width: 768px) {
  .softTb .tb_item th {
    font-size: 10px !important;
  }
}

.specTb4 tr td,
.specTb4 tr th {
  width: 11.1111111111%;
}
@media screen and (max-width: 768px) {
  .specTb4 tr td,
  .specTb4 tr th {
    min-width: 30px;
  }
}
.specTb4 tr th:nth-of-type(1) {
  color: #fff;
  background-color: #00A3D9;
  font-size: 18px;
  border-bottom: 1px dotted #fff;
}
@media screen and (max-width: 768px) {
  .specTb4 tr th:nth-of-type(1) {
    font-size: 16px;
  }
}

.specTb5 tr td,
.specTb5 tr th {
  width: 12.5%;
}
.specTb5 tr th {
  line-height: 1.56;
}

/*=======================================
　テキストリンク
=======================================*/
.rel_box__wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  gap: 20px;
}
@media screen and (max-width: 640px) {
  .rel_box__wrap {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 10px;
  }
}
.rel_box__text .type__text {
  color: var(--main_color);
  font-weight: 600;
  position: relative;
}
.rel_box__text .type__text::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--main_color);
  -webkit-transform: scale(0, 1);
          transform: scale(0, 1);
  -webkit-transition: 0.3s all ease;
  transition: 0.3s all ease;
}
.rel_box__text .type__text:hover::after {
  -webkit-transform: scale(1, 1);
          transform: scale(1, 1);
}
.rel_box__text .type__text--02 {
  position: relative;
  padding: 5px 10px 6px;
  display: block;
  border: 1px solid #00A3D9;
  width: 190px;
  margin-left: auto;
}
.rel_box__text .type__text--02::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 1em;
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--main_color);
  border-right: 2px solid var(--main_color);
  -webkit-transform: translateY(-50%) rotate(45deg);
          transform: translateY(-50%) rotate(45deg);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.rel_box__text .type__text--02:hover {
  color: var(--main_color);
}
.rel_box__text .type__text--03 {
  color: var(--main_color);
}

/*=======================================
　枠線つきテキスト/リスト
=======================================*/
.has_border {
  border: 1px solid var(--main_color);
  padding: 10px 20px;
  /* Acrobat Readerボタン */
}
.has_border.pdf li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media screen and (max-width: 768px) {
  .has_border.pdf li {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 10px;
  }
}
.has_border.pdf li a {
  min-width: 158px;
  margin-right: 20px;
}
@media screen and (max-width: 768px) {
  .has_border.pdf li a {
    margin-right: 0;
  }
}

/*=======================================
　画像 横並び
=======================================*/
.img__clm {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: wrap;
      flex-flow: wrap;
  gap: 30px 0;
}
.img__clm .notes {
  font-size: 14px;
}
@media screen and (max-width: 768px) {
  .img__clm .notes {
    font-size: 12px;
  }
}

/*=======================================
　text__list
=======================================*/
.text__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 10px;
}
.text__list li {
  line-height: 1.5;
  padding-left: 1em;
  text-indent: -1em;
}
.text__list__ma_btm {
  margin-bottom: 30px;
}

.tab_series {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: wrap;
      flex-flow: wrap;
  margin-bottom: 50px;
}
.tab_series li {
  width: 33.3333333333%;
  height: 40px;
}
@media screen and (max-width: 768px) {
  .tab_series li {
    width: 50%;
  }
}
.tab_series li a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  border: 1px solid #D9D9DF;
  height: 100%;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .tab_series li a {
    font-size: 12px;
    line-height: 1.4;
  }
}
.tab_series li a::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-top: 1px solid var(--main_color);
  border-right: 1px solid var(--main_color);
  -webkit-transform: rotate(135deg);
          transform: rotate(135deg);
  position: absolute;
  right: 1em;
  top: 13px;
}
.tab_series.clm3 li:not(:nth-child(3n)) a {
  border-right: none;
}
@media screen and (max-width: 768px) {
  .tab_series.clm3 li:not(:nth-child(3n)) a {
    border-right: 1px solid #D9D9DF;
  }
}
.tab_series.clm3 li:not(:nth-last-child(-n+3)) a {
  border-bottom: none;
}
@media screen and (max-width: 768px) {
  .tab_series.clm3 li:not(:nth-last-child(-n+3)) a {
    border-bottom: 1px solid #D9D9DF;
  }
}
@media screen and (max-width: 768px) {
  .tab_series.clm3 li:not(:nth-child(2n)) a {
    border-right: none;
  }
}
@media screen and (max-width: 768px) {
  .tab_series.clm3 li:not(:nth-last-child(-n+2)) a {
    border-bottom: none;
  }
}
@media screen and (max-width: 768px) {
  .tab_series.clm3 li:last-child a {
    border-right: 1px solid #D9D9DF;
  }
}
.tab_series.clm2 li {
  width: 50%;
}
.tab_series.clm2 li:not(:nth-child(2n)) a {
  border-right: none;
}
.tab_series.clm2 li:not(:nth-last-child(-n+2)) a {
  border-bottom: none;
}

.plain_mb20 {
  margin-bottom: 20px;
}

:root {
  --main_color: #006DD9;
}

/*=======================================
　パンくずリスト
=======================================*/
.tab_pankuzu .content {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: end;
}

/*=======================================
　product
=======================================*/
.product {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 60px;
}
@media screen and (max-width: 768px) {
  .product {
    gap: 60px;
  }
}
.product > .anchor {
  margin-bottom: -60px;
}
.product .product_ttl__line {
  margin-bottom: 60px;
}
@media screen and (max-width: 768px) {
  .product .product_ttl__line {
    margin-bottom: 30px;
    font-size: 15px;
  }
}
.product .product_ttl__line::before {
  height: 100%;
}
.product .product_txt__has_bg {
  margin-bottom: 25px;
}
@media screen and (max-width: 768px) {
  .product .product_txt__has_bg {
    margin-bottom: 15px;
    font-size: 13px;
  }
}
@media screen and (max-width: 768px) {
  .product .product__area + .product__area .product_txt__has_bg {
    margin-top: 10px;
  }
}
.product__area {
  margin-bottom: 60px;
}
@media screen and (max-width: 768px) {
  .product__area {
    margin-bottom: 0;
  }
}
.product__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 30px;
}
@media screen and (max-width: 768px) {
  .product__list {
    gap: 15px;
  }
}
.product__list li {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 35px;
  padding-bottom: 25px;
  border-bottom: 1px dotted var(--main_color);
}
@media screen and (max-width: 1200px) {
  .product__list li {
    gap: 2.5vw;
  }
}
@media screen and (max-width: 1024px) {
  .product__list li {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 768px) {
  .product__list li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 15px;
    padding-bottom: 0;
    border: none;
  }
}
.product__box a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 10px;
  position: relative;
  padding: 3px 24px 3px 3px;
  -webkit-transition: 0.3s all ease;
  transition: 0.3s all ease;
}
.product__box a:hover {
  background-color: #CFEDFE;
  opacity: 1;
}
.product__box a:hover::before {
  right: 5px;
}
@media screen and (max-width: 1200px) {
  .product__box a:hover::before {
    right: 2px;
  }
}
@media screen and (max-width: 768px) {
  .product__box a {
    padding-right: 40px;
  }
}
.product__box a::before {
  content: "";
  position: absolute;
  top: calc(50% - 2px);
  right: 8px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-top: 2px solid var(--main_color);
  border-right: 2px solid var(--main_color);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition: 0.3s all ease;
  transition: 0.3s all ease;
}
@media screen and (max-width: 1200px) {
  .product__box a::before {
    right: 5px;
  }
}
@media screen and (max-width: 768px) {
  .product__box a::before {
    width: 10px;
    height: 10px;
  }
}
.product__box a .img {
  width: 60px;
  height: 60px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.product__box a .img.self {
  -ms-flex-item-align: self-start;
      align-self: self-start;
}
@media screen and (max-width: 1200px) {
  .product__box a .img {
    width: 5vw;
    height: 5vw;
  }
}
@media screen and (max-width: 768px) {
  .product__box a .img {
    width: 60px;
    height: 60px;
  }
}
.product__box a .wide {
  line-height: 1.5;
}
@media screen and (max-width: 1200px) {
  .product__box a .wide {
    font-size: 1.1666666667vw;
  }
}
@media screen and (max-width: 768px) {
  .product__box a .wide {
    min-width: 0;
    font-size: 16px;
  }
}

/*=======================================
　init
=======================================*/
.init {
  margin-bottom: 120px;
}
@media screen and (max-width: 768px) {
  .init {
    margin-bottom: 60px;
  }
}
.init__ttl {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  font-size: 25px;
  font-weight: 500;
  margin-bottom: 38px;
  padding: 18px 25px;
  border: 2px solid var(--main_color);
  position: relative;
}
@media screen and (max-width: 1200px) {
  .init__ttl {
    font-size: 2vw;
  }
}
@media screen and (max-width: 768px) {
  .init__ttl {
    font-size: 14px;
    padding: 10px 12px;
  }
}
.init__ttl::before {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 60px;
  width: 30px;
  height: 2px;
  background-color: #fff;
}
@media screen and (max-width: 768px) {
  .init__ttl::before {
    left: 45px;
    width: 20px;
  }
}
.init__ttl::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 60px;
  width: 30px;
  height: 2px;
  background-color: var(--main_color);
  -webkit-transform: rotate(-50deg);
          transform: rotate(-50deg);
  -webkit-transform-origin: right center;
          transform-origin: right center;
}
@media screen and (max-width: 768px) {
  .init__ttl::after {
    left: 45px;
    width: 20px;
  }
}
.init__plain {
  margin-bottom: 60px;
}
@media screen and (max-width: 768px) {
  .init__plain {
    margin-bottom: 30px;
  }
}

.w100 {
  width: 100% !important;
}/*# sourceMappingURL=product.css.map */