@charset "utf-8";

/* youtube動画 */
.bl_tocList + .un_bathDryChoice_moviePanel {
  margin-top: 30px;
}
.un_bathDryChoice_moviePanel {
  display: flex;
  box-sizing: border-box;
  border: var(--defaultBorder);
  padding: 20px;

  .un_bathDryChoice_moviePanel_youtube {
    .un_bathDryChoice_moviePanel_youtube_thumbnail {
      width: 377px;
    }

    & + .un_bathDryChoice_moviePanel_inner {
      margin-left: 20px;
    }
  }

  .un_bathDryChoice_moviePanel_inner {
    .un_bathDryChoice_moviePanel_inner_ttl {
      display: flex;
      align-items: center;
      font-weight: bold;

      .un_bathDryChoice_moviePanel_inner_ttl_contents {
        font-size: 20px;
      }
    }

    .un_bathDryChoice_moviePanel_inner_link {
      font-weight: bold;
      display: inline-block;
      margin-top: 10px;

      &:link,
      &:visited,
      &:hover,
      &:active {
        color: var(--defaultTxtColor);
        text-decoration: underline;
      }
    }

    .un_bathDryChoice_moviePanel_inner_txt {
      margin-top: 10px;
    }
  }

  & + .el_hdg2 {
    margin-top: 40px;
  }
}

.un_bathDryChoice_typeTable_icon {
  display: none;
}
.un_bathDryChoice_typeTable {
  border-collapse: collapse;
  border: #CCC 4px solid;
  text-align: center;
  width: 100%;

  .un_bathDryChoice_typeTable_ttl {
    font-weight: bold;
    text-align: center;
    font-size: 18px;

    & + .un_bathDryChoice_typeTable_img {
      padding-top: 10px;
    }
  }

  & th {
    padding: 10px 10px 20px;
    border: #CCC 2px solid;
  }
  & td {
    padding: 10px 10px 20px;
    border: #CCC 2px solid;
  }
  .un_bathDryChoice_typeTable_arrow {
    margin-top: 20px;
  }
  .un_bathDryChoice_typeTable_btn {
    margin-top: 20px;
  }
}

/* 電気式・ガス式 */
.un_bathDryChoice_hdg {
  font-weight: bold;
  text-align: center;
  font-size: 16px;

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

  & + .bl_mediaPanel {
    margin-top: 20px;
  }
}
.un_bathDryChoice_gasTxt {
  & + .un_bathDryChoice_exchangeTable_wrapper {
    margin-top: 20px;
  }
}
.bl_mediaPanel {
  & + .un_bathDryChoice_exchangeTable_wrapper {
    margin-top: 30px;
  }
}
.un_bathDryChoice_exchangeTable {
  border-collapse: collapse;
  border: #CCC 4px solid;
  text-align: center;
  width: 100%;

  & th {
    background: #f5f5f5;
    border: #CCC 2px solid;
    font-size: 16px;
  }
  & td {
    border: #CCC 2px solid;
    padding: 10px;
    text-align: left;
  }

  .un_bathDryChoice_exchangeTable_item {
    font-weight: bold;
    font-size: 18px;
    text-align: center;
  }

  .un_bathDryChoice_exchangeTable_with {
    width: 15%;
  }

  & figure {
    text-align: center;
    padding-top: 10px;

    & img {
      width: 180px;
      height: auto;
    }
  }
    &.un_bathDryChoice_exchangeTable__vent {
    .un_bathDryChoice_exchangeTable_with {
      width: 22%;
      padding: 10px;
    }
  }
}

.un_bathDryChoice_fBold {
  font-weight: bold;
}

/* 黄色背景パネル */
.un_bathDryChoice_panel {
  background: #fdfbea;
  padding: 20px;
  box-sizing: border-box;

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

  & + .el_hdg2 {
    margin-top: 40px;
  }

  .un_bathDryChoice_panel_ttl {
    display: flex;
    align-items: center;
    font-weight: bold;

    & img {
      white-space: pre;

      & + span {
        margin-left: 5px;
      }
    }

    & + .un_bathDryChoice_panel_img,
    & + .un_bathDryChoice_panel_inner {
      margin-top: 10px;
    }
  }

  .un_bathDryChoice_panel_img {
    text-align: center;

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

  .un_bathDryChoice_panel_inner {
    display: flex;
    justify-content: space-between;

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

    .un_bathDryChoice_panel_inner_img {
      & + .un_bathDryChoice_panel_inner_txt {
        margin-left: 20px;
      }
    }
  }
}

.un_bathDryChoice_hdg {
  margin-top: 20px;
}

.bl_panel + .un_bathDryChoice_panel,
.un_bathDryChoice_panel + .el_hdg2,
.un_bathDryChoice_panel + .el_hdg3,
.esti_box + .el_hdg3 {
  margin-top: 30px;
}

/* 浴室乾燥機を設置タイプ・種類から選ぶ */
.un_bathDryChoice_typePanel_wrapper {
  display: flex;
  margin-top: 20px;
  gap: 20px;
  justify-content: center;
}
.un_bathDryChoice_typePanel {
  width: calc((100% - 80px)/2);
  text-align: center;
  border: 1px solid #eee;

  .un_bathDryChoice_typePanel_hdg {
    padding: 10px;
    background: var(--secondBgColor);
    color: var(--defaultTxtColor);
    font-size: 15px;
    font-weight: bold;
    text-align: center
  }

  .un_bathDryChoice_typePanel_inner {
    padding: 15px;

    & a {
      font-size: 14px;
    }
  }
}

/* 約10年間のご使用が交換時期の合図です。 */
.bl_panel {
  & + .un_bathDryChoice_exchangePanel {
    margin-top: 50px;
  }
}
.un_bathDryChoice_exchangePanel {
  padding: 20px;
  background: #f4f4f4;
  position: relative;

  &::before {
    content: '';
    border-style: solid;
    border-width: 0 100px 50px 100px;
    border-color: transparent transparent #f4f4f4 transparent;
    position: absolute;
    top: -12%;
    left: 34%;
  }
  .un_bathDryChoice_exchangePanel_hdg {
    font-weight: bold;
    font-size: 24px;
    color: var(--dekiruGreen);
    margin-bottom: 10px;
    margin-top: 10px;
  }
  .un_bathDryChoice_exchangePanel_inner {
    background: #fff;
    text-align: center;
    padding: 20px;
    margin-top: 20px;
  }
  .un_bathDryChoice_exchangePanel_inner_ttl {
    font-weight: bold;
    font-size: 15px;

    & + .un_bathDryChoice_exchangePanel_inner_img {
      margin-top: 10px;

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

    & + .un_bathDryChoice_exchangePanel_inner_link {
      margin-top: 10px;
    }
  }
  .un_bathDryChoice_exchangePanel_inner_link {
    display: flex;
    justify-content: space-around;
  }

  & + .un_bathDryRankingBox_panel {
    margin-top: 40px;
  }
}