@charset "utf-8";
/* CSS Document */

.mt_10{margin-top: 10px;}
.mt_20{margin-top: 20px;}
.mt_30{margin-top: 30px;}
.mt_40{margin-top: 40px;}
.mt_50{margin-top: 50px;}
.mt_60{margin-top: 60px;}
.mt_70{margin-top: 70px;}
.mt_80{margin-top: 80px;}
.mt_90{margin-top: 90px;}
.mt_100{margin-top: 100px;}

.indent_2{
  text-indent: -2em;
  padding-left: 2em;
}
.indent_3{
  text-indent: -3em;
  padding-left: 3em;
}
.indent_7{
  text-indent: -7em;
  padding-left: 7em;
}
.product{
  margin-top: 50px;
  padding: 50px 0;
  position:relative;
  background: #f2f2f2;
}
.pro_inner{
  max-width: 1024px;
  width: 90%;
  margin: auto;
  position: relative;
}
.pro_title {
  display: flex;
  align-items: center;
  min-height: 100px;
  padding: 20px 50px;
  background: linear-gradient(90deg, #0081C9, #00B0EC);
  border-radius: 0 40px;
  font-size: 3.2rem;
  font-weight: bold;
  color: #fff;
  letter-spacing: 3px;
}
.pro_art {
  background: #fff;
  margin-top: 30px;
  padding: 15px 25px 40px;
  &:has(.pro_num){
    padding: 40px 60px 60px;
  }
}
.pro_head {
  background: #CEEBFA;
  padding: 12px 30px;
  font-size: 2.4rem;
  color: var(--blue);
}
.pro_flex {
  display: flex;
  align-items: flex-start;
  margin-top: 20px;
  gap: 20px 30px;
  &.jc_c{
    justify-content: center;
  }
}
.pro_col{
  width: calc(50% - 15px);
  line-height: 2;
}
.pro_border {
  font-size: 1.8rem;
  font-weight: bold;
  color: var(--blue);
  border-bottom: 1px solid #7FCEF4;
  padding-bottom: 10px;
  margin-bottom: 5px;
}
.pro_dl {
  display: flex;
  gap: 0 10px;
  flex-wrap: wrap;
  margin-top: 5px;
  line-height: 1.5;
  dt{
    font-weight: bold;
    &.normal{
      font-weight: normal;
    }
  }
}
.pro_table {
  width: 100%;
  margin-top: 10px;
  border-top: 1px solid #7FCEF4;
  th{
    border-bottom: 1px solid #7FCEF4;
    padding: 0 10px;
    background: #ceebfa;
    font-weight: bold;
    width: 120px;
    text-align: center;
    &.b_none{
      border: none;
    }
  }
  td{
    border-bottom: 1px solid #7FCEF4;
    padding: 0 10px;
    &.b_none{
      border: none;
    }
  }
}
.pro_num {
  font-size: 3.2rem;
  font-weight: bold;
  color: var(--blue);
  letter-spacing: 3px;
  text-indent: -1.3333em;
  padding-left: 1.3333em;
  >span{
    color: var(--cyan);
    letter-spacing: 0;
    margin-right: 5px;
  }
}
.pro_doc{
  margin-top: 20px;
  line-height: 2;
  &.pro_doc--flex {
    display: flex;
    gap: 20px;
    &.center{
      justify-content: center;
    }
    > figure {
    min-width: max-content;
  }
 }
}

.pro_tags {
  display: flex;
  gap: 7px 4px;
  flex-wrap: wrap;
  margin: 10px 0;
}
.pro_tag{
  --tag-color:#666;
  font-size: var(--fs-14);
  font-weight: bold;
  padding: 3px 8px;
  list-style: 1px;
  border-radius: 6px;
  line-height: 1.5;
  color: var(--tag-color);
  border: 2px solid var(--tag-color);
  &[data-txt="中水"]{--tag-color:#C326E1;}
  &[data-txt="工業用水"]{--tag-color:#8357FF;}
  &[data-txt="冷温水"]{--tag-color:#14A83B;}
  &[data-txt="冷却水"]{--tag-color:#51318F;}
  &[data-txt="消火"]{--tag-color:#FF6600;}
  &[data-txt="空気"]{--tag-color:#0099FF;}
  &[data-txt="ガス"]{--tag-color:#FF66CC;}
  &[data-txt="蒸気"]{--tag-color:#FF9900;}
  &[data-txt="油"]{--tag-color:#009999;}
  &[data-txt="給水"]{--tag-color:#0066FF;}
  &[data-txt="水"]{--tag-color:#0066FF;}
  &[data-txt="給湯"]{--tag-color:#FF0000;}
}

.doc_sub {
  font-size: var(--fs-24);
  font-weight: bold;
  background: #CEEBFA;
  padding: 12px 30px;
  color: var(--blue);
}
.document{
  padding: 50px 0;
}
.doc_inner{
  padding: 0 0 40px;
  max-width: 1024px;
  width: 90%;
  margin: 20px auto 0;
  line-height: 2;
}
.doc_sub{
  font-size: var(--fs-20);
  font-weight: bold;
}
.doc_scroll{
  width: 100%;
  overflow: auto;
}
.sc_caution{
  display: none;
  @media screen and ( max-width: 767px ) {
    display: block;
    font-size: 1.4rem;
    margin-top: 20px;
    margin-bottom: -17px;
  }
}
.doc_table{
  width: 100%;
  min-width: 900px;
  text-align: center;
  border-left: 1px solid #7FCEF4;
  border-right: 1px solid #7FCEF4;
  thead{
    th{
      padding: 2px 10px;
      background: #bde6f9;
      border-right: 1px solid #7FCEF4;
      border-bottom: 1px solid #7FCEF4;
      &:last-child{
        border-right: none;
        &.br{
          border-right: 1px solid #7FCEF4;
        }
      }
      &.ver{
        writing-mode: vertical-rl; /* 縦書き（右→左） */
        text-orientation: upright; /* 英数字も縦向き */
      }
    }
  }
  tbody{
    th{
      padding: 0 10px;
      background: #d9f2ff;
      border-right: 1px solid #7FCEF4;
      border-bottom: 1px solid #7FCEF4;
      &:last-child{
        border-right: none;
        &.br{
          border-right: 1px solid #7FCEF4;
        }
      }
    }
    td{
      padding: 0 5px;
      background: #fff;
      border-left: 1px solid #7FCEF4;
      border-bottom: 1px solid #7FCEF4;
      &:first-child{
        border-left: none;
      }
    }
    .left{
      text-align: left;
    }
  }
}
.doc_table--short{
  width: auto;
  min-width: 620px;
  td{
    min-width: 180px;
  }
}
.doc_table--min{
  width: auto;
  min-width: 400px;
  td{
    min-width: 180px;
  }
@media screen and ( max-width: 767px ) {
  min-width: 0;
}
}

.faq {
  padding: 60px 0;
  background: #eff6f9;
}
.faq_inner {
  max-width: 1024px;
  width: 90%;
  margin: auto;
}
.faq_det {
  max-width: 979px;
  width: 100%;
  margin: 15px auto 0;
  border: 2px solid #1EB9EE;
}
.faq_sum {
  display: flex;
  align-items: center;
  gap: 15px;
  min-height: 58px;
  background: #1EB9EE;
  padding: 3px 35px 5px 20px;
  box-sizing: border-box;
  font-size: 1.8rem;
  position: relative;
  cursor: pointer;
  color: #fff;
  &::after{
    content: '';
    display: block;
    min-width: 8px;
    min-height: 8px;
    position: absolute;
    right: 15px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg);
  }
}
details[open] .faq_sum{
  &::after{
    transform: rotate(225deg);
  }
}
.faq_icon{
  font-size: 2.4rem;
  font-weight: bold;
}
.faq_cont {
  padding: 20px;
  background: #fff;
  display: flex;
  gap: 15px;
  .faq_icon{
    color: #1eb9ee;
    line-height: 2;
  }
}
@media screen and ( max-width: 1023px ) {

}
@media screen and ( max-width: 767px ) {
.pro_title {
  padding: 15px 5%;
  font-size: 2.4rem;
  letter-spacing: 0;
  min-height: 0;
  border-radius: 0 20px;
}
.pro_art {
  padding: 20px 5% 20px;
  &:has(.pro_num){
    padding: 30px 5% 20px;
  }
}
.pro_head {
  padding: 10px 5%;
  font-size: 2rem;
}
.pro_num {
  font-size: 2rem;
  letter-spacing: 0;
}
.pro_flex {
  flex-direction: column;
  align-items: center;
}
.pro_col{
  width: 100%;
}
.pro_table {
  font-size: 1.4rem;
  th{
    padding: 0 5px;
    width: 100px;
  }
  td{
  }
}
.pro_doc{
  &.pro_doc--flex {
    flex-direction: column;
    align-items: center;
    > figure{
      min-width: 0 ;
    }
 }
}
.doc_inner{
}
.doc_table{
  font-size: 1.4rem;
}
}