@charset "utf-8";

.un_powderroomRecplan_ancList {
  & > li > a {
    padding: 5px 30px 3px;
  }
}

.un_powderroomRecplan_panel {
  font-weight: bold;
  font-size: 20px;
  padding: 20px;
  box-sizing: border-box;
}

/* おすすめ_panel */
.un_powderroomRecplan_panel2 {
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-top: 5px solid var(--dekiruGreen);

  .un_powderroomRecplan_panel2_head {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fbfbfb;
    border-bottom: #ccc solid 2px;
    padding: 20px;
    box-sizing: border-box;
  }

  .un_powderroomRecplan_panel2_head_icon {
    color: var(--dekiruGreen);
    font-weight: bold;
    font-size: 22px;

    &:before {
      content: '\FF3C\020';
      white-space: pre;
    }

    &:after {
      content: '\020\FF0F';
      white-space: pre;
    }
  }

  .un_powderroomRecplan_panel2_head_icon_num {
    font-size: 28px;
  }

  .un_powderroomRecplan_panel2_head_product {
    margin-left: 20px;
    display: flex;
    align-items: center;
  }

  .un_powderroomRecplan_panel2_head_product_maker_logo {
    height: auto;

    &.un_powderroomRecplan_panel2_head_product_maker_logo__toto {
      width: 100px;
    }

    &.un_powderroomRecplan_panel2_head_product_maker_logo__lixil {
      width: 68px;
    }

    &.un_powderroomRecplan_panel2_head_product_maker_logo__panasonic {
      width: 100px;
    }
  }

  .un_powderroomRecplan_panel2_head_product_txt {
    font-weight: bold;
    margin-left: 10px;
    font-size: 16px;
    display: flex;
  }

  .un_powderroomRecplan_panel2_head_product_txt_mirror {
    margin-left: 10px;
  }

  .un_powderroomRecplan_panel2_head_product_badge {
    text-align: center;
    line-height: 1.2;
    font-weight: bold;
    padding: 5px;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 12px;
    margin-left: 10px;

    &.un_powderroomRecplan_panel2_head_product_badge__middle {
      background: #fc943b;
      color: #fff;
    }

    &.un_powderroomRecplan_panel2_head_product_badge__basic {
      background: #4cc8f7;
      color: #fff;
    }
  }


  .un_powderroomRecplan_panel2_body {
    padding: 20px;
    box-sizing: border-box;
    display: flex;
  }

  .un_powderroomRecplan_panel2_body_box {

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

  .un_powderroomRecplan_panel2_body_box_img_annotation {
    margin-top: 5px;
    font-size: 12px;
  }

  .un_powderroomRecplan_panel2_body_inner {
    margin-left: 20px;
  }

  .un_powderroomRecplan_panel2_body_inner_detail {
    font-weight: bold;
    margin-top: 15px;

    & p + p {
      margin-top: 10px;
    }
  }

  .un_powderroomRecplan_panel2_body_inner_detail_size {
    display: flex;
  }

  .un_powderroomRecplan_panel2_body_inner_detail_size_num {
    & + .un_powderroomRecplan_panel2_body_inner_detail_size_num {
      margin-left: 10px;
    }
  }

  .un_powderroomRecplan_panel2_body_inner_contents {
    display: flex;
    justify-content: space-around;
    margin-top: 15px;
  }

  .un_powderroomRecplan_panel2_body_inner_contents_rate {
    & > .el_rateBalloon {
      position: static;
    }
  }

  .un_powderroomRecplan_panel2_body_inner_contents_information {
    margin-left: 20px;
  }

  .un_powderroomRecplan_panel2_body_inner_contents_information_total {
    font-weight: bold;
    color: var(--emphasisRed);
    display: flex;
    align-items: baseline;
  }

  .un_powderroomRecplan_panel2_body_inner_contents_information_total_prise_taxIn {
    font-size: 32px;
    padding-left: 3px;
    padding-right: 3px;
  }

  .un_powderroomRecplan_panel2_body_inner_link {
    display: flex;
    align-items: baseline;
    margin-top: 15px;

    & > .el_btn5,
    & > .el_estimateBtn {
      width: calc((100% - 10px) / 2);
      margin-top: unset;
    }

    & > .el_estimateBtn {
      margin-left: 10px;
    }
  }
}

/* おすすめ_card */
.un_powderroomRecplan_cardUnit {
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  margin-top: 20px;
}

.un_powderroomRecplan_card {
  width: calc((100% - 10px) / 2);
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-top: 5px solid var(--dekiruGreen);
  display: flex;
  flex-direction: column;

  &:nth-child(2n) {
    margin-left: 10px;
  }

  &:nth-child(n + 3) {
    margin-top: 10px;
  }

  .un_powderroomRecplan_card_head {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fbfbfb;
    border-bottom: 2px solid#ccc;
    padding: 10px;
    box-sizing: border-box;
  }

  .un_powderroomRecplan_card_head_icon {
    color: var(--dekiruGreen);
    font-weight: bold;
    font-size: 22px;
  }

  .un_powderroomRecplan_card_head_icon_num {
    font-size: 28px;
  }

  .un_powderroomRecplan_card_body {
    padding: 15px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  .un_powderroomRecplan_card_body_outer {
    display: flex;
    flex: 1;
  }

  .un_powderroomRecplan_card_body_outer_link {

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

  .un_powderroomRecplan_card_body_outer_link_img {
    width: 134px;
    & img{
      width: 134px;
      height: auto;
    }
  }

  .un_powderroomRecplan_card_body_outer_link_img_annotation {
    font-size: 12px;
    margin-top: 2px;
    line-height: 1.3;
  }

  .un_powderroomRecplan_card_body_outer_contents {
    margin-left: 10px;
  }

  .un_powderroomRecplan_card_body_outer_contents_name {
    display: flex;
    align-items: center;
    font-size: 16px;
  }

  .un_powderroomRecplan_card_body_outer_contents_name_maker {
    line-height: 1;
  }

  .un_powderroomRecplan_card_body_outer_contents_name_maker_logo {
    height: auto;

    &.un_powderroomRecplan_card_body_outer_contents_name_maker_logo__panasonic {
      width: 108px;
    }

    &.un_powderroomRecplan_card_body_outer_contents_name_maker_logo__lixil {
      width: 50px;
    }

    &.un_powderroomRecplan_card_body_outer_contents_name_maker_logo__toto {
      width: 75px;
    }
  }

  .un_powderroomRecplan_card_body_outer_contents_name_txt {
    font-weight: bold;
    margin-left: 5px;
    line-height: 1;
    text-align: center;
    min-height: 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;

    & small {
      letter-spacing: -0.03em;
      font-size: 12px;
    }
  }

  .un_powderroomRecplan_card_body_outer_contents_type {
    font-weight: bold;
    margin-top: 10px;
  }

  .un_powderroomRecplan_card_body_outer_contents_grade {
    text-align: center;
    line-height: 1.2;
    font-weight: bold;
    padding: 5px 10px;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 12px;
    display: inline-block;
    margin-top: 5px;

    &.un_powderroomRecplan_card_body_outer_contents_grade__middle {
      background: #fc943b;
      color: #fff;
    }

    &.un_powderroomRecplan_card_body_outer_contents_grade__basic {
      background: #4cc8f7;
      color: #fff;
    }
  }

  .un_powderroomRecplan_card_body_outer_contents_size {
    font-weight: bold;
    line-height: 1.3;
    font-size: 13px;
    margin-top: 10px;

    & p + p {
      margin-top: 1rem;
    }
  }

  .un_powderroomRecplan_card_body_outer_contents_size_inner {
    display: flex;
    flex-direction: column;
  }

  .un_powderroomRecplan_card_body_txt {
    margin-top: 10px;
    flex: 1;
  }

  .un_powderroomRecplan_card_body_box {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dotted #999;
  }

  .un_powderroomRecplan_card_body_box_detail {
    display: flex;
  }

  .un_powderroomRecplan_card_body_box_detail_rate {
    & > .el_rateBalloon {
      position: static;
    }
  }

  .un_powderroomRecplan_card_body_box_detail_product {
    margin-left: 5px;
  }

  .un_powderroomRecplan_card_body_box_detail_product_txt {
    font-size: 11.5px;
    letter-spacing: -0.03em;
  }

  .un_powderroomRecplan_card_body_box_detail_product_total {
    font-weight: bold;
    color: var(--emphasisRed);
    margin-top: 10px;
  }

  .un_powderroomRecplan_card_body_box_detail_product_total_price_taxIn {
    font-size: 28px;
    line-height: 1.2;
  }

  .un_powderroomRecplan_card_body_box_link {
    display: flex;
    align-items: baseline;
    margin-top: 15px;

    & > .el_btn5,
    & > .el_estimateBtn {
      width: calc((100% - 10px) / 2);
      margin-top: unset;
    }

    & > .el_estimateBtn {
      margin-left: 10px;
    }
  }
}

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




/* 工事費込みセットプラン_table */
.un_powderroomRecplan_table {
  width: 755px;
  border-spacing: 0;
  border-collapse: separate;

  & tr {
    &:first-child {

      & th,
      & td {
        border-top: 5px solid #ccc;
      }
    }
  }

  & th,
  & td {
    padding: 10px 5px;
    border: 1px solid #ccc;
    border-top: unset;
    border-spacing: 0;
    box-sizing: border-box;
  }

  & td {
    border-left: unset;
    width: 169px;
  }

  .un_powderroomRecplan_table_ttl {
    width: 73px;
    vertical-align: top;
    font-size: 16px;

    &.un_powderroomRecplan_table_ttl__emphasis {
      color: #fff;
      background: var(--emphasisRed);
    }
  }
  .un_powderroomRecplan_table_ttl_txt{
    line-height: 1.5;
  }

  /* table_img&txt系 */
  .un_powderroomRecplan_table_detail {
    vertical-align: top;

  }

  .un_powderroomRecplan_table_detail_maker_icon {
    height: auto;

    &.un_powderroomRecplan_table_detail_maker_icon__toto {
      width: 65px;
    }

    &.un_powderroomRecplan_table_detail_maker_icon__lixil {
      width: 45px;
    }

    &.un_powderroomRecplan_table_detail_maker_icon__panasonic {
      width: 100px;
    }
  }

  .un_powderroomRecplan_table_detail_img {
    text-align: center;
  }

  .un_powderroomRecplan_table_detail_img_name {
    font-weight: bold;
    margin-top: 5px;
    letter-spacing: -0.03em;
    text-align: left;

    & + img {
      margin-top: 10px;
      width: 120px;
      height: auto;
    }
  }

  .un_powderroomRecplan_table_detail_recommendation {
    margin-top: 10px;
    font-weight: bold;
    text-align: center;
    padding: 8px;
    box-sizing: border-box;
    width: 100%;
    background: #d6ebcd;

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

  .un_powderroomRecplan_table_detail_txt {
    &.un_powderroomRecplan_table_detail_txt__center {
      text-align: center;
    }
  }

  /* table_txt系 */
  .un_powderroomRecplan_table_inner {
    text-align: right;

    &.un_powderroomRecplan_table_inner__emphasis {
      color: #fff;
      background: var(--emphasisRed);

      .un_powderroomRecplan_table_inner_disc,
      .un_powderroomRecplan_table_inner_total {
        color: #fff;
      }

    }
  }

  .un_powderroomRecplan_table_inner_cost_unit {
    font-size: 12px;
  }

  .un_powderroomRecplan_table_inner_disc,
  .un_powderroomRecplan_table_inner_total {
    color: var(--emphasisRed);
    font-weight: bold;
    font-size: 12px;
  }

  .un_powderroomRecplan_table_inner_disc_num,
  .un_powderroomRecplan_table_inner_total_price {
    font-size: 20px;
    letter-spacing: -0.02em;
    line-height: 1.3;
  }

  .un_powderroomRecplan_table_inner_const {
    font-weight: bold;
  }

  .un_powderroomRecplan_table_inner_const_price {
    font-size: 20px;
    letter-spacing: -0.02em;
    line-height: 1.3;
  }

  .un_powderroomRecplan_table_inner_const_unit {
    font-size: 12px;
  }

  .un_powderroomRecplan_table_txt {
    text-align: left;
    vertical-align: top;

    &.un_powderroomRecplan_table_txt__center {
      text-align: center;
    }
  }
}

/* オプション工事費 */
.un_powderroomRecplan_cost {
  border: solid 2px #eee;
  padding: 10px 30px;
  border-radius: 5px;

  & + .un_powderroomRecplan_cost {
    margin-top: 20px;
  }

  .un_powderroomRecplan_cost_ttl {
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: bold;
  }

  .un_powderroomRecplan_cost_inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .un_powderroomRecplan_cost_inner_img {
    margin-right: 20px;
  }

  .un_powderroomRecplan_cost_inner_price {
    font-weight: bold;
    margin-right: 20px;
    font-size: 15px;
    color: var(--emphasisRed);
  }

  .un_powderroomRecplan_cost_inner_price_num {
    font-size: 30px;
  }
}