@charset "utf-8";

.el_txtLink,
.el_txtLink:link,
.el_txtLink:visited {
color:#007185;
text-decoration: underline;
}
.el_txtLink:hover{
color: #C7511F;
}

.el_txtLink.el_txtLink__bk,
.el_txtLink.el_txtLink__bk:link,
.el_txtLink.el_txtLink__bk:visited {
color:#222;
}
.el_txtLink.el_txtLink__bk:hover{
color: rgb(109, 109, 109);
}

.el_txtLink[target="_blank"]::after {
  content: "\020\03e\020" url(/common/img/icon/etc/target_blank.gif);
  display: inline-block;
  white-space: pre;
}
.el_txtLink.el_txtLink__noneDeco {
text-decoration: none;
}

/* ページ個別 */
div#main_frame {
  overflow: visible;
}

/* 各メーカーの保証期間 */
.un_dispoHow_warranty_wrapper {
  padding: 0 20px;
  margin-bottom: 40px;
}
.un_dispoHow_warranty {
  border: 2px solid #BFBFBF;
  margin-bottom: 40px;

  .un_dispoHow_warranty_ttl {
    font-size: 16px;
    color: #555;
    background: #f4f4f4;
    background: repeating-linear-gradient(-45deg, #f4f4f4 0, #f4f4f4 2px, #f6f6f6 2px, #f6f6f6 4px);
    padding: 10px 10px 10px 20px;
    border-bottom: 1px solid #BFBFBF;
  }
  .un_dispoHow_warranty_cardUnit {
    display: flex;
    box-sizing: border-box;
  }
  .un_dispoHow_warranty_card {
    box-sizing: border-box;
    border-bottom: 1px solid #BFBFBF;
    display: flex;
    align-items: center;
    padding: 10px;
    width: 50%;
    justify-content: center;

    & img {
      width: 120px;
      height: auto;

      & + p {
        padding-left: 20px;
      }
    }

    & + .un_dispoHow_warranty_card {
      border-right: solid 1px #bfbfbf;
    }
  }
  .un_dispoHow_warranty_card:nth-child(odd){
    border-right: 1px solid #BFBFBF;
  }
  .un_dispoHow_warranty_card p {
    font-weight: bold;
    font-size: 30px;
  }
  .un_dispoHow_warranty_card p span {
    font-size: 18px;
  }
  .un_dispoHow_warranty_txt {
    background-color: #FFFCF3;
    text-align: center;
    padding: 15px;
  }
  .un_dispoHow_warranty_txt span {
    font-size: 1.2em;
    font-weight: bold;
  }
}
/* 製品ごとに処理できるもの・できないものが異なります */
/* 一覧表の見方 */
.un_dispHow_pointOfView {
  width: 100%;
  margin: 0;
  box-sizing: border-box;
  margin: 0 20px;

  .un_dispHow_pointOfView_hdg {
    font-weight: bold;
    font-size: 15px;

    & + .un_dispHow_pointOfViewPanel {
      margin-top: 10px;
    }
  }

  .un_dispHow_pointOfViewPanel {
    width: 95%;
    border: solid 3px #EEEEEE;
    box-sizing: border-box;
  }

  & + .un_dispHow_table_wrapper {
    margin-top: 30px;
  }

  .un_dispHow_pointOfViewPanel_description {
    display: flex;
    align-items: center;
    padding: 10px;
    position: relative;

    & img {
      width: 67px;
      box-sizing: border-box;

      & + p {
        padding-left: 23px;
      }
    }

    & p {
      margin: 0;
      flex: 1;
    }

    & + .un_dispHow_pointOfViewPanel_description {
      border-top: solid 3px #eee;
    }

    .un_dispHow_pointOfViewPanel_description_fBold {
      font-weight: bold;
    }

    &::before {
      content: "";
      position: absolute;
      border-right: solid 3px #eee;
      width: 10px;
      height: 63px;
      left: 10%;
      top: 0%;
    }
  }
}

.un_dispHow_table_wrapper {
  padding: 0 20px 20px;
}
.un_dispHow_table {
  width: 100%;
  border-collapse: collapse;
  border: 4px solid #eee;
  table-layout: fixed;
  margin-bottom: 20px;
}
.un_dispHow_table th {
  padding: 5px;
  font-weight: bold;
  text-align: center;
  background: #f9f9f9;
  border: 1px solid #eee;
}
.un_dispHow_table thead th {
  position: sticky;
  top: 90px;
  z-index: 108;
  padding:10px;
}
.un_dispHow_table thead th a,
.un_dispHow_table thead th a:link,
.un_dispHow_table thead th a:visited,
.un_dispHow_table thead th a:hover{
text-decoration: none;
color: #222;
}
.un_dispHow_table thead th:not(:first-child) {
  vertical-align: bottom;
}
.un_dispHow_table thead th img{
  margin-bottom: 0.5em;
}
.un_dispHow_table th:first-child {
  width: 170px;
}
.un_dispHow_table td {
  text-align: center;
  background: #fff;
  border: 1px solid #eee;
  vertical-align: middle;
  padding: 15px 10px;
}
.un_dispHow_table td img {
  vertical-align: middle;
}

.un_dispoHow_card_wrapper {
  padding: 0 20px 20px;
}

.un_dispoHow_card_wrapper+.el_hdg5 {
  margin-top: 20px;
}

.un_dispoHow_card {
  width: 100%;
}

.un_dispoHow_card_ttl {
  color: #555;
  font-weight: bold;
  background: #f4f4f4;
  background: repeating-linear-gradient(-45deg, #f4f4f4 0, #f4f4f4 2px, #f6f6f6 2px, #f6f6f6 4px);
  padding: 5px 10px 5px 20px;
  border: solid 1px #eaeaea;
  text-align: center;
}

.un_dispoHow_card_txt {
  text-align: center;
  padding: 10px;
  border: solid 1px #eaeaea;
}


/* ご利用までの流れ */

input[name="tab_item"] {
  display: none;
}

#tab01-01:checked~#from {
  display: flex;
}

#tab01-02:checked~#ise {
  display: flex;
}

.un_dispoHow_tabUnit {
  display: flex;
  border-bottom: 2px solid #13a35e;
  /* position: sticky;
  top: 62px;
  z-index: 110; */
  background: #fff;
}

.un_dispoHow_tabLabel {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 64px;
  background: #f9f9f9;
  font-weight: bold;
  color: #13a35e;
  font-size: 18px;
  transition: .2s;
  cursor: pointer;
  text-align: center;
}

.un_dispoHow_tabUnit .un_dispoHow_tab {
  width: calc((100% + 2px) / 2 - 2px);
}

.un_dispoHow_tabUnit .un_dispoHow_tab:nth-of-type(2) {
  margin: 0 2px;
}

#tab01-01:checked~.un_dispoHow_tabUnit .un_dispoHow_tab:nth-of-type(1) .un_dispoHow_tabLabel {
  background: #13a35e;
  color: #fff;
}

#tab01-02:checked~.un_dispoHow_tabUnit .un_dispoHow_tab:nth-of-type(2) .un_dispoHow_tabLabel {
  background: #13a35e;
  color: #fff;
}

#tab01-03:checked~.un_dispoHow_tabUnit .un_dispoHow_tab:nth-of-type(3) .un_dispoHow_tabLabel {
  background: #13a35e;
  color: #fff;
}

.tabs{display:flex;border-bottom:2px solid #13a35e;position:sticky;top:var(--headerHeightPc);z-index:110;background:#fff;}
.tab-label{display:flex;justify-content:center;align-items:center;height:64px;background:#f9f9f9;font-weight:bold;color:#13a35e;font-size:18px;transition:.2s;cursor:pointer;}
.tab-col3 .tab{width:calc((100% + 2px) / 3 - 2px);}
.tab-col3 .tab:nth-of-type(2){margin:0 2px;}

#tab01-01:checked ~ .tabs .tab:nth-of-type(1) .tab-label{
  background:#13a35e;color:#fff;
  }
#tab01-02:checked ~ .tabs .tab:nth-of-type(2) .tab-label{
  background:#13a35e;color:#fff;
  }
#tab01-03:checked ~ .tabs .tab:nth-of-type(3) .tab-label{
  background:#13a35e;color:#fff;
  }
.un_dispoHow_card2unit_wrapper{
  padding:0 20px 40px ;
}
.un_dispoHow_card2Unit {
  display: none;
  flex-wrap: wrap;
  justify-content: space-between;
  counter-reset: number 0;
  background-repeat: no-repeat;
  box-sizing: border-box;
  border: 2px solid #bfbfbf;
  padding: 5px;
}

.un_dispoHow_card2 {
  box-sizing: border-box;
  width: calc((100% + 10px) / 3 - 10px);
  border: 1px solid #ccc;
  position: relative;
}

.un_dispoHow_card2:not(:nth-last-child(-n+3)) {
  margin-bottom: 10px;
}

.un_dispoHow_card2::before {
  position: absolute;
  content: "";
  display: block;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 70px 70px 0 0;
  border-color: #00b050 transparent transparent transparent;
  z-index: 10;
}

.un_dispoHow_card2::after {
  position: absolute;
  counter-increment: number 1;
  content: counter(number);
  display: inline-block;
  white-space: pre;
  color: #fff;
  top: 8px;
  left: 10px;
  text-align: center;
  z-index: 11;
  line-height: 1.2;
  font-size: 26px;
  font-weight: bold;
}

.un_dispoHow_card2 .un_dispoHow_card2_title {
  background: #E2F0D9;
  padding: 10px 10px 10px 70px;
  box-sizing: border-box;
  font-size: 12px;
  min-height: 62px;
  display: flex;
  align-items: center;
}

.un_dispoHow_card2 .un_dispoHow_card2_contents {
  padding: 20px 10px 10px;
  text-align: center;
}


.un_dispoHow_card3Unit{display:flex;flex-wrap:wrap;margin: 20px 0;padding:0 20px;}
.un_dispoHow_card3Unit__col2 > .un_dispoHow_card3{width:calc(50% - 10px);margin-right:20px;margin-top:20px;}
.un_dispoHow_card3Unit.un_dispoHow_card3Unit__col2 > .un_dispoHow_card3:nth-of-type(-n+2){margin-top:0;}
.un_dispoHow_card3Unit.un_dispoHow_card3Unit__col2 > .un_dispoHow_card3:nth-of-type(2n){margin-right:0;}
.un_dispoHow_card3{
  text-align: center;
  box-sizing: border-box;
}
.un_dispoHow_card3.un_dispoHow_card3__border{
  border:solid 1px #eaeaea;
}
.un_dispoHow_card3 img{
  width: 100%;
  max-width: 200px;
  height: auto;
}
.un_dispoHow_card3 > figure{
padding:10px;

}
.un_dispoHow_card3 .un_dispoHow_card3_ttl{
  margin-top: 10px;
  width: 100%;
  background: rgba(84,84,84,.8);
  color: #fff;
  text-align: center;
  padding: 3px 0;
}
.un_dispoHow_txtLink{
  margin: 20px 0;
  text-align: center;
}
.un_dispHow_banner{
  margin-top: 30px;
}
.un_dispHow_banner + .el_3colBanner_wrapper{
  margin-top: 20px;
}
.un_dispHow_btn_wrapper{
  margin-top: 30px;
  padding: 0 20px;
}
.un_dispHow_btn_wrapper + .el_hdg3{
  margin-top: 30px;
}

.un_dispHow_table_superscript {
  font-size: 0.8em;
  vertical-align: top;
}