@charset "utf-8";

:root {
  --subsidyMainGreen: #48b248;
  --subsidySubGreen: #eff9eb;
  --subsidyMainBlue: #4c68b1;
  --subsidySubBlue: #eaf2fa;
  --subsidyMainRed: #e95753;
  --subsidySubRed: #fdefe7;
  --subsidyMainPurple: #5f5ca7;
  --subsidySubPurple: #f8e8f6;
}

.un_sharedCommonSubsidy_emphasisTxt {
  font-weight: bold;
  font-size: 16px;

  &.un_sharedCommonSubsidy_emphasisTxt__red {
    color: var(--emphasisRed);
  }
}

.un_sharedCommonSubsidy_superScript {
  vertical-align: text-top;
  font-size: 10px;
}

/* 補助額一覧_table */
.un_sharedCommonSubsidy_tabUnit {
  display: none;
}

.un_sharedCommonSubsidy_table {
  width: 755px;
  border: 1px solid #ccc;
  border-collapse: collapse;

  & th,
  & td {
    border: 1px solid #ccc;
    border-collapse: collapse;
    padding: 8px;
    vertical-align: middle;
    text-align: center;
  }

  & th {
    background: #f2f2f2;
  }

  & td {
    font-size: 13px;
  }

  .un_sharedCommonSubsidy_table_head_headline {
    background: #f2f2f2;
    font-size: 15px;

    &.un_sharedCommonSubsidy_table_head_headline__future {
      background: var(--subsidyMainGreen);
      color: #fff;
      width: 120px;
    }

    &.un_sharedCommonSubsidy_table_head_headline__advanced {
      background: var(--subsidyMainBlue);
      color: #fff;
      width: 120px;
    }

    &.un_sharedCommonSubsidy_table_head_headline__hotWaterSupply {
      background: var(--subsidyMainRed);
      color: #fff;
      width: 120px;
    }
  }

  .un_sharedCommonSubsidy_table_body_item {
    font-weight: normal;
    font-size: 14px;
  }

  .un_sharedCommonSubsidy_table_body_detail {
    & sup {
      font-size: 8px;
    }

    &.un_sharedCommonSubsidy_table_body_detail__offset {
      background: #f2f2f2;
      color: #7F7F7F;
    }

    &.un_sharedCommonSubsidy_table_body_detail__right {
      text-align: right;
    }

    &.un_sharedCommonSubsidy_table_body_detail__vertical {
      min-height: 10em;
      min-width: 20px;

      .un_sharedCommonSubsidy_table_body_detail_txt {
        writing-mode: vertical-lr;
        text-orientation: upright;
        letter-spacing: 0.2em;
        vertical-align: middle;
      }
    }
  }

  .un_sharedCommonSubsidy_table_body_detail_superScript {
    vertical-align: text-top;
    font-size: 10px;
  }
}

.un_sharedCommonSubsidy_table + .un_sharedCommonSubsidy_annoptationPanel {
  margin-top: 10px;
}

/* 注釈用のパネル */
.un_sharedCommonSubsidy_annoptationPanel {
  line-height: 1.5;
  box-sizing: border-box;

  &.un_sharedCommonSubsidy_annoptationPanel__padding {
    padding: 20px;
  }

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

  .un_sharedCommonSubsidy_annoptationPanel_smallTxt {
    font-size: smaller;
  }
}


/* みらいエコ住宅事業のポイントは内窓_緑枠線パネル */
.un_sharedCommonSubsidy_table_wrapper + .un_sharedCommonSubsidy_panel_wrapperLine {
  margin-top: 20px;
}

.un_sharedCommonSubsidy_panel_wrapper {
  border: 3px solid var(--dekiruGreen);
  padding: 3px;
  background: #fff;
  box-sizing: border-box;
}

.un_sharedCommonSubsidy_panel {
  border: 1px solid var(--dekiruGreen);
  padding: 30px 20px;
  box-sizing: border-box;
  background: #fff;


  .un_sharedCommonSubsidy_panel_hdg {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
  }

  .un_sharedCommonSubsidy_panel_hdg_icon {
    background: #e4f6de;
    color: var(--dekiruGreen);
    width: 33px;
    height: 33px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    line-height: 1;
  }

  .un_sharedCommonSubsidy_panel_hdg_txt {
    font-size: 24px;
    margin-left: 10px;
  }

  .un_sharedCommonSubsidy_panel_txt {
    margin-top: 30px;
  }
}

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

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

/* みらいエコ住宅事業のポイントは内窓_窓性能のtable */
.un_sharedCommonSubsidy_table2_wrapper {
  margin-top: 20px;
}

.un_sharedCommonSubsidy_table2 {
  width: 702px;
  border-collapse: collapse;
  border: 1px solid #ccc;

  & th,
  & td {
    padding: 5px 8px;
    border: 1px solid #ccc;
    line-height: 1.5;
  }

  & th {
    background: #f2f2f2;
  }

  & td {
    background: #fff;
  }

  .un_sharedCommonSubsidy_table2_heading {
    text-align: center;
    font-size: 15px;
    vertical-align: middle;

    &.un_sharedCommonSubsidy_table2_heading__widthThin {
      width: 13%;
    }

    &.un_sharedCommonSubsidy_table2_heading__width60per {
      width: 60%;
    }

    &.un_sharedCommonSubsidy_table2_heading__normalTxt {
      font-weight: normal;
    }
  }


  .un_sharedCommonSubsidy_table2_performance {
    background: #fff;
    font-weight: normal;
    text-align: center;
  }

  .un_sharedCommonSubsidy_table2_detail {
    text-align: center;
  }

  .un_sharedCommonSubsidy_table2_txt {
    height: 50px;
  }
}

/* みらいエコ住宅事業のポイントは内窓_窓性能のtable_注釈 */
.un_sharedCommonSubsidy_list_wrapper {
  margin-top: 20px;
}

.un_sharedCommonSubsidy_list {
  padding: 0 20px 0 10px;

  .un_sharedCommonSubsidy_list_item {
    text-indent: -1em;
    padding-left: 1em;
  }
}

/* 併用例 */
.un_sharedCommonSubsidy_panel2_wrapper {
  margin-top: 30px;
}

.un_sharedCommonSubsidy_panel2 {
  display: flex;
  padding: 0 20px;

  .un_sharedCommonSubsidy_panel2_head {
    font-weight: bold;
    font-size: 20px;
  }

  .un_sharedCommonSubsidy_panel2_body {
    margin-left: 60px;
    display: flex;
    width: calc(100% - 60px - 60px);
  }

  .un_sharedCommonSubsidy_panel2_body_box {
    border: 1px solid #ccc;
    padding: 15px 15px 15px 0;
    box-sizing: border-box;
    position: relative;
    width: calc((100% - 80px) / 2);
    border-radius: 4px;

    /* 先進的窓リノベ */
    &.un_sharedCommonSubsidy_panel2_body_box__window {
      border: 1px solid var(--subsidyMainBlue);

      .un_sharedCommonSubsidy_panel2_body_box_inner_ttl {
        background: var(--subsidyMainBlue);
      }
    }

    /* みらいエコ住宅 */
    &.un_sharedCommonSubsidy_panel2_body_box__future {
      border: 1px solid var(--subsidyMainGreen);

      .un_sharedCommonSubsidy_panel2_body_box_inner_ttl {
        background: var(--subsidyMainGreen);
      }
    }

    & + .un_sharedCommonSubsidy_panel2_body_box {
      margin-left: 80px;
    }

    &:first-child {

      &:before,
      &:after {
        content: '';
        display: block;
        width: 40px;
        height: 10px;
        background: #595959;
        position: absolute;
        left: calc(100% + 20px);
        top: calc(50% - -10px);
      }

      &:after {
        transform: rotate(90deg);
      }
    }
  }

  .un_sharedCommonSubsidy_panel2_body_box_icon {
    position: absolute;
    top: -10px;
    left: -40px;
  }

  .un_sharedCommonSubsidy_panel2_body_box_icon_img {
    width: 80px;
    height: auto;
  }

  .un_sharedCommonSubsidy_panel2_body_box_inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc(100% - 40px);
    margin-right: 0;
    margin-left: auto;
  }


  .un_sharedCommonSubsidy_panel2_body_box_inner_ttl {
    text-align: center;
    color: #fff;
    background: #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    width: fit-content;
    padding: 2px 20px;
    line-height: 1.3;
  }

  .un_sharedCommonSubsidy_panel2_body_box_inner_detail {
    margin-top: 10px;
    text-align: center;
    z-index: 2;
  }

  .un_sharedCommonSubsidy_panel2_body_box_inner_detail_img_icon {
    width: auto;
    height: 54px;
  }

  .un_sharedCommonSubsidy_panel2_body_box_inner_detail_product {
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
    font-size: 13px;

    &.un_sharedCommonSubsidy_panel2_body_box_inner_detail_product__center {
      justify-content: center;

      .un_sharedCommonSubsidy_panel2_body_box_inner_detail_product_name {
        width: auto;
      }
    }
  }

  .un_sharedCommonSubsidy_panel2_body_box_inner_detail_product_name {
    width: calc((100% - 10px) / 3);
  }
}


/* 補助金事業申請の流れ_パネル */
.un_sharedCommonSubsidy_panel3_wrapper {
  margin-top: 20px;
  min-height: 134px;

  &:has(.un_sharedCommonSubsidy_panel3__hotWaterSupply) {
    min-height: 170px;
  }
}

.un_sharedCommonSubsidy_panel3 {
  padding: 0 20px;
  position: relative;
  box-sizing: border-box;

  &.un_sharedCommonSubsidy_panel3__hotWaterSupply {
    .un_sharedCommonSubsidy_panel3_head_badge {
      margin-left: 102px;
      width: fit-content;
      margin-right: auto;
      margin-bottom: 10px;
    }

    img.un_sharedCommonSubsidy_panel3_head_badge_icon {
      width: 130px;
      height: auto;
    }
  }

  .un_sharedCommonSubsidy_panel3_head_flowArrows {
    display: flex;
    justify-content: space-between;
  }

  .un_sharedCommonSubsidy_panel3_head_flowArrows_contents {
    position: relative;
    align-content: center;
    background: var(--dekiruGreen);
    box-sizing: border-box;
    color: #fff;
    width: 100px;
    text-align: center;
    padding: 14px 10px;
    line-height: normal;
    margin-right: 15px;

    &::after {
      position: absolute;
      content: '';
      height: 100%;
      width: 9px;
      top: 0;
      background: var(--dekiruGreen);
      right: -10px;
      clip-path: polygon(0 0, 0% 100%, 100% 50%);
      border-left: 2px solid var(--dekiruGreen);
    }
  }

  .un_sharedCommonSubsidy_panel3_body {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    color: var(--defaultTxtColor);
  }

  .un_sharedCommonSubsidy_panel3_body_name {
    background: #CFE49C;
    box-sizing: border-box;
    color: var(--defaultTxtColor);
    width: 100px;
    height: 30px;
    text-align: center;
    padding: 20px 0;
    line-height: normal;
    margin-right: 15px;
    position: relative;
    align-content: center;
    margin-left: 5px;

    &.un_sharedCommonSubsidy_panel3_body_name__dekiru {
      background: #D9D9D9;
      width: 28%;
      margin-left: 14px;

      &::after {
        background: #D9D9D9;
        border-left: 1px solid #D9D9D9;
        right: -9.5px;
      }

      .un_sharedCommonSubsidy_panel3_body_name_img {
        left: -20px;
        width: auto;
        height: 48px;
      }
    }

    &.un_sharedCommonSubsidy_panel3_body_name__dekiruShort {
      background: #D9D9D9;
      margin-left: 14px;

      &::after {
        background: #D9D9D9;
        border-left: 1px solid #D9D9D9;
        right: -9.5px;
      }

      .un_sharedCommonSubsidy_panel3_body_name_img {
        left: -20px;
        width: auto;
        height: 48px;
      }
    }

    &::after {
      position: absolute;
      content: '';
      height: 100%;
      width: 9px;
      top: 0;
      background: #CFE49C;
      right: -10px;
      clip-path: polygon(0 0, 0% 100%, 100% 50%);
      border-left: 2px solid #CFE49C;
    }


  }

  .un_sharedCommonSubsidy_panel3_body_name_img {
    position: absolute;
    left: -10px;
    top: -6px;
    display: block;
  }

  .un_sharedCommonSubsidy_panel3_body_name_txt {
    margin-top: -10px;
    margin-left: 33px;
  }
}


/* 交換できるくんは住宅省エネ支援登録事業者です_吹き出し */
.un_sharedCommonSubsidy_speechBubblePanel_wrapper + .el_hdg2 {
  margin-top: 40px;
}

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

.el_annotation + .un_sharedCommonSubsidy_speechBubblePanel_wrapper {
  margin-top: 20px;
}

.un_sharedCommonSubsidy_speechBubblePanel {
  display: flex;

  .un_sharedCommonSubsidy_speechBubblePanel_img_icon {
    width: 100px;
    height: 100px;
  }

  .un_sharedCommonSubsidy_speechBubblePanel_inner {
    margin-left: 40px;
    width: 100%;
    background: #e2f0d9;
    padding: 10px 25px;
    border-radius: 10px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.5;
    box-sizing: border-box;

    &::before {
      content: '';
      display: block;
      position: absolute;
      left: -29px;
      top: 15px;
      width: 30px;
      height: 30px;
      background: #e2f0d9;
      clip-path: polygon(100% 0, 100% 100%, 0 50%);
    }
  }

  .un_sharedCommonSubsidy_speechBubblePanel_inner_emphasisTxt {
    font-weight: bold;
    font-size: 20px;
    color: var(--emphasisRed);
  }

  .un_sharedCommonSubsidy_speechBubblePanel_inner_txt {
    font-size: 18px;
  }
}


/* 提出が必要な申請書類_table */
.un_sharedCommonSubsidy_table3 {
  width: 755px;
  text-align: center;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;

  & th,
  & td {
    padding: 10px 5px;
    border: 1px solid #ccc;
    border-left: none;
    border-bottom: none;
  }

  & th {
    font-weight: normal;
    background: #f2f2f2;

    &:first-child:not(.un_sharedCommonSubsidy_table3_empty) {
      border-left: 1px solid #ccc;
    }
  }

  & td {
    width: 19%;
  }

  & tr {
    &:last-child {

      & th,
      & td {
        border-bottom: 1px solid #ccc;
      }
    }
  }

  .un_sharedCommonSubsidy_table3_empty {
    background: #fff;
    border-top: none;
    border-left: none;
  }
}

.un_sharedCommonSubsidy_table3_wrapper + .un_sharedCommonSubsidy_annoptationPanel,
.un_sharedCommonSubsidy_table3_wrapper + .un_sharedCommonSubsidy_annoptationPanel_wrapper {
  margin-top: 20px;
}

/* 申請に必要な本人確認書類_panel */
.un_sharedCommonSubsidy_greenPanel_wrapper {
  margin-top: 20px;
}

.un_sharedCommonSubsidy_greenPanel {
  background: #e2f0d9;
  padding: 20px;
  box-sizing: border-box;
  border-radius: 10px;
  display: flex;
  flex-direction: column;

  .un_sharedCommonSubsidy_greenPanel_ttl {
    font-weight: bold;
    font-size: 20px;
  }

  .un_sharedCommonSubsidy_greenPanel_inner {
    display: flex;
    margin-top: 20px;
    padding: 0 15px;
  }

  .un_sharedCommonSubsidy_greenPanel_inner_txt {
    flex: 1;

    & p {
      font-size: 16px;

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

  .un_sharedCommonSubsidy_greenPanel_inner_img {
    margin-left: 20px;

    & img {
      width: 200px;
      height: auto;
    }
  }
}

/* 分離発注の代表申請は対応しておりません_panel */
.un_sharedCommonSubsidy_yellowPanel_wrapper {
  margin-top: 20px;
  padding: 0 20px;
}

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

.un_sharedCommonSubsidy_yellowPanel {
  background: #fbfbdb;
  padding: 20px;
  box-sizing: border-box;
  border: 3px solid #ccc;

  .un_sharedCommonSubsidy_yellowPanel_head {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .un_sharedCommonSubsidy_yellowPanel_head_icon {
    & img {
      width: 50px;
      height: auto;
    }
  }

  .un_sharedCommonSubsidy_yellowPanel_head_ttl {
    font-weight: bold;
    color: #f39800;
    font-size: 20px;
    margin-left: 8px;
    padding-top: 6px;
  }

  .un_sharedCommonSubsidy_yellowPanel_body {
    margin-top: 30px;

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

/* 異なる補助事業であれば代表申請いたします_panel */
.un_sharedCommonSubsidy_panel4 {
  margin-top: 40px;

  .un_sharedCommonSubsidy_panel4_ttl {
    font-size: 18px;
    font-weight: bold;
    position: relative;
    text-align: center;
    width: 100%;
    line-height: 1.5;

    &:before,
    &:after {
      content: '';
      background: #535353;
      height: 1px;
      position: absolute;
      width: 135px;
      margin-top: 14px;
    }

    &:before {
      left: 0;
    }

    &:after {
      right: 0;
    }

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

  .un_sharedCommonSubsidy_panel4_inner {
    padding: 0 40px;

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

  .un_sharedCommonSubsidy_panel4_inner_subTtl {
    display: flex;
    justify-content: center;
    align-items: baseline;
    box-sizing: border-box;
    border: 2px solid #d9d9d9;
    background: #fff;
    padding: 5px 10px;
    width: fit-content;
    margin-right: auto;
    margin-left: auto;
    border-radius: 20px;
    font-size: 16px;
  }

  .un_sharedCommonSubsidy_panel4_inner_subTtl_icon {
    background: #7f7f7f;
    padding: 5px 15px;
    border-radius: 20px;
    font-weight: bold;
    color: #fff;
    box-sizing: border-box;
    line-height: 1;

    &.un_sharedCommonSubsidy_panel4_inner_subTtl_icon__green {
      background: var(--dekiruGreen);
    }
  }

  .un_sharedCommonSubsidy_panel4_inner_subTtl_txt {
    margin-left: 15px;
  }

  .un_sharedCommonSubsidy_panel4_inner_img {
    margin-top: 10px;

    & img {
      max-width: 100%;
      height: auto;
    }
  }
}