@charset "UTF-8";

/* ===== Common column styles ===== */
body {
  counter-reset: list-comment;
}

.txt-comment {
  color: var(--secondary-text-color);
  font-size: 1.1rem;
}
.txt-comment a {
  text-decoration: underline;
}

.pages-inquiries .box .contact-box-middle-btn {
  width: 50rem;
  height: 10rem;
}
@media screen and (max-width: 767px) {
  .pages-inquiries .box .contact-box-middle-btn {
    width: calc(73.1% - 1.5rem);
    height: 5rem;
    font-size: 1.2rem;
  }
}

.table-blk {
  width: 100%;
  margin-top: 4rem;
}
.table-blk th {
  text-align: center;
}
.table-blk thead th {
  background-color: var(--primary-color);
  vertical-align: middle;
}
.table-blk th,
.table-blk td {
  border: 1px solid var(--lightgray1);
  padding: 1rem;
  font-size: 1.8rem;
  line-height: 1.67;
}
@media screen and (max-width: 767px) {
  .table-blk th,
  .table-blk td {
    font-size: 1.2rem;
  }
}
.table-blk th {
  color: var(--white);
  font-weight: bold;
}
.table-blk tbody th {
  color: var(--primary-text-color);
  background-color: var(--milk);
  text-align: center;
  font-weight: bold;
  vertical-align: middle;
}

/* Mobile header navigation (column article pages) */
@media screen and (max-width: 767px) {
  after-feedintariff.column2 .header-nav-title,
renovate-budget.column2 .header-nav-title,
selling-electricity.column2 .header-nav-title,
solar-self-consumption .header-nav-title,
housing-loan-downpayment .header-nav-title {
    padding: 0 !important;
  }
}

@media screen and (max-width: 767px) {
  after-feedintariff.column2 .header-nav-title::after,
renovate-budget.column2 .header-nav-title::after,
selling-electricity.column2 .header-nav-title::after,
solar-self-consumption .header-nav-title::after,
housing-loan-downpayment .header-nav-title::after {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  after-feedintariff.column2 .header-nav ul li,
renovate-budget.column2 .header-nav ul li,
selling-electricity.column2 .header-nav ul li,
solar-self-consumption .header-nav ul li,
housing-loan-downpayment .header-nav ul li {
    padding: 2rem 1.5rem !important;
  }
}

@media screen and (max-width: 767px) {
  after-feedintariff.column2 .header-nav .header-nav-list > div,
renovate-budget.column2 .header-nav .header-nav-list > div,
selling-electricity.column2 .header-nav .header-nav-list > div,
solar-self-consumption .header-nav .header-nav-list > div,
housing-loan-downpayment .header-nav .header-nav-list > div {
    margin-top: 2rem;
    background-color: var(--white);
    display: block;
  }
}

@media screen and (max-width: 767px) {
  after-feedintariff.column2 .header-nav .header-nav-list > div ul,
renovate-budget.column2 .header-nav .header-nav-list > div ul,
selling-electricity.column2 .header-nav .header-nav-list > div ul,
solar-self-consumption .header-nav .header-nav-list > div ul,
housing-loan-downpayment .header-nav .header-nav-list > div ul {
    padding: 0;
  }
}

@media screen and (max-width: 767px) {
  after-feedintariff.column2 .header-nav .header-nav-list > div ul li,
renovate-budget.column2 .header-nav .header-nav-list > div ul li,
selling-electricity.column2 .header-nav .header-nav-list > div ul li,
solar-self-consumption .header-nav .header-nav-list > div ul li,
housing-loan-downpayment .header-nav .header-nav-list > div ul li {
    padding: 2rem;
    border-bottom: solid 0.2rem var(--milk);
  }
}

/* ===== Column index page ===== */
.column-banner {
  position: relative;
  background-image: url("../images/column/index/banner-pc.jpeg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  height: 0;
  padding-bottom: calc(320 / 1920 * 100%);
}
@media screen and (max-width: 767px) {
  .column-banner {
    background-image: url("../images/column/index/banner-pc.jpeg");
    padding-bottom: calc(200 / 375 * 100%);
  }
}
.column-banner .banner-content {
  display: flex;
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  justify-content: flex-start;
  align-items: center;
}
.column-mb-50 {
  margin-bottom: 5rem !important;
}
.column-w-100 {
  min-width: 10rem;
  max-width: 10rem;
}
.column-w-76 {
  min-width: 7.6rem;
  max-width: 7.6rem;
}
.column-tags .tag-btn:nth-child(3) {
  margin-top: 1rem;
}
.column .tag-btn {
  text-align: center;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  display: inline-block;
  padding: 0.5rem 0.5rem 0.5rem 1.5rem;
  background: var(--white);
  border: 1px solid var(--lightgray1);
  border-radius: 1.2rem;
  font-size: 1.2rem;
  color: #707070;
  background-color: var(--white);
  background-image: url("../images/column/index/tag-ico.png");
  background-repeat: no-repeat;
  background-position: left 0.8rem center;
}
.column .tag-btn.active {
  background-color: var(--primary-color);
  background-image: url("../images/column/index/tag-ico-w.png");
  color: var(--white);
}
.column .tag-area {
  display: flex;
  padding: 2rem 3rem;
  background-color: #f2f2f2;
}
@media screen and (min-width: 376px) {
  .column .tag-area {
    flex-wrap: wrap;
  }
}
@media screen and (max-width: 767px) {
  .column .tag-area {
    flex-wrap: nowrap;
    overflow-x: scroll;
  }
}
.column .tag-area li {
  margin-right: 0.8rem;
}
@media screen and (max-width: 1263px) and (min-width: 767px) {
  .column .tag-area li {
    margin-bottom: 1rem;
  }
}
/* Column index: card list only (exclude pagination ul) */
.column-01 #columnData {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
@media screen and (max-width: 767px) {
  .column-01 #columnData {
    justify-content: center;
  }
}
@media screen and (max-width: 1336px) and (min-width: 767px) {
  .column-01 #columnData {
    justify-content: space-around;
  }
}
.column-01 #columnData li {
  padding: 3.1rem 2.1rem 2.4rem;
  border-radius: 3px;
  border: solid 3px #f2f2f2;
}
.column-01 #columnData li:nth-child(3n) {
  margin-right: 0;
}
@media screen and (max-width: 1336px) and (min-width: 1264px) {
  .column-01 #columnData li:nth-child(3n) {
    margin-right: 2.4rem;
  }
}
@media screen and (max-width: 1263px) and (min-width: 767px) {
  .column-01 #columnData li:nth-child(3n) {
    margin-right: 2.4rem;
  }
}
@media screen and (max-width: 767px) {
  .column-01 #columnData li {
    padding: 0;
    flex-direction: column;
    border: none;
    margin-right: 0;
  }
}
.column-01 #columnData li .column-01-img img {
  width: 100%;
}
@media screen and (max-width: 767px) {
  .column-01 #columnData li .column-01-img {
    width: 100%;
    margin-right: 0;
    margin-bottom: 1.5rem;
  }
  .column-01 #columnData li .column-01-img img {
    width: 100%;
  }
}
.column-01 #columnData li .column-01-img.new {
  position: relative;
}
.column-01 #columnData li .column-01-img.new::after {
  content: "NEW";
  position: absolute;
  top: -1rem;
  left: -1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 5.5rem;
  height: 5.5rem;
  font-size: 1.3rem;
  font-weight: bold;
  color: var(--white);
  background-color: var(--primary-color);
  border-radius: 50%;
}
@media screen and (max-width: 767px) {
  .column-01 #columnData li .column-01-img.new::after {
    top: 1rem;
    left: 1rem;
  }
}
.column-01 #columnData li .column-01-content {
  display: block;
  width: 33.4rem;
}
@media screen and (max-width: 767px) {
  .column-01 #columnData li .column-01-content {
    display: block;
    width: auto;
  }
}
.column-01 #columnData li .column-01-content .heading-4 {
  color: var(--primary-text-color);
  font-size: 2rem;
  line-height: normal;
}
.column-01 #columnData li .column-01-content .heading-4:visited {
  color: var(--primary-text-color);
}
.column-01 #columnData li .column-01-body {
  flex: 1 1 auto;
  display: flex;
  width: 100%;
  flex-direction: column;
}
.column-01 #columnData li .column-01-body em {
  font-family: "Roboto", "Hiragino Kaku Gothic Pro";
  color: var(--secondary-text-color);
  font-style: normal;
}
.column-01 #columnData li .column-01-body-more {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media screen and (max-width: 767px) {
  .column-01 #columnData li .column-01-body-more {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .column-01 #columnData li .column-01-body-more a,
  .column-01 #columnData li .column-01-body-more .column-more-btn {
    margin-top: 0 !important;
  }
}
.column-01 #columnData li .column-01-body-more a,
.column-01 #columnData li .column-01-body-more .column-more-btn {
  display: flex;
  align-items: center;
  min-width: 11.5rem;
}
.column-01-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
}
.column-01-pagination .prev {
  position: relative;
  width: 6rem;
  margin-right: 5rem;
  cursor: pointer;
}
.column-01-pagination .prev::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  box-sizing: border-box;
  border-radius: 50%;
  border: 2px solid var(--primary-color);
  display: inline-block;
  height: 6rem;
  width: 6rem;
  transition: 0.3s;
  transform: translate(-50%, -50%);
}
.column-01-pagination .prev::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 25%;
  right: 25%;
  margin: auto;
  border: 2px solid var(--primary-color);
  border-width: 0 2px 2px 0;
  display: inline-block;
  height: calc(6rem / 4);
  width: calc(6rem / 4);
  margin-top: calc((((100% - (6rem / 4)) / 2) / -2) + 1px);
  left: calc((100% - (6rem / 4)) / 2);
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}
.column-01-pagination .prev:hover::before {
  height: 8rem;
  width: 8rem;
}
@media screen and (max-width: 767px) {
  .column-01-pagination .prev:hover::before {
    height: 6rem;
    width: 6rem;
  }
}
.btn-a:hover .column-01-pagination .prev::before {
  height: 8rem;
  width: 8rem;
}
.column-01-pagination .next {
  position: relative;
  width: 6rem;
  margin-left: 5rem;
  cursor: pointer;
}
.column-01-pagination .next::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  box-sizing: border-box;
  border-radius: 50%;
  border: 2px solid var(--primary-color);
  display: inline-block;
  height: 6rem;
  width: 6rem;
  transition: 0.3s;
  transform: translate(-50%, -50%);
}
.column-01-pagination .next::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 25%;
  right: 25%;
  margin: auto;
  border: 2px solid var(--primary-color);
  border-width: 0 2px 2px 0;
  display: inline-block;
  height: calc(6rem / 4);
  width: calc(6rem / 4);
  margin-top: calc((((100% - (6rem / 4)) / 2) / -2) + 1px);
  right: calc((100% - (6rem / 4)) / 2);
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
.column-01-pagination .next:hover::before {
  height: 8rem;
  width: 8rem;
}
@media screen and (max-width: 767px) {
  .column-01-pagination .next:hover::before {
    height: 6rem;
    width: 6rem;
  }
}
.btn-a:hover .column-01-pagination .next::before {
  height: 8rem;
  width: 8rem;
}
.column-01-pagination .pagination-item {
  display: inline-block;
  margin-right: 4rem;
  cursor: pointer;
}
.column-01-pagination .pagination-item:last-child {
  margin-right: 0;
}
.column-01-pagination .pagination-item.active {
  color: var(--primary-color);
}
.column-more-btn {
  justify-content: flex-end;
}
@media screen and (max-width: 767px) {
  .column-more-btn.btn-a.small .icon::after {
    margin-top: calc((((100% - (2.5rem / 4)) / 2) / -2));
  }
}

/* ===== after-feedintariff ===== */
.after-feedintariff .txt-comment {
  color: #767676;
  font-size: 1.1rem;
}
.after-feedintariff .txt-comment a {
  text-decoration: underline;
}
.after-feedintariff .list-comment-2 {
  counter-reset: list_comment 1;
}
.after-feedintariff .list-comment-2 li::before {
  content: "※" counter(list_comment);
}
.after-feedintariff .list-comment-12::before {
  content: "※12";
}

/* ===== disaster-resistant-house ===== */
.disaster-resistant-house .txt-comment {
  color: #999999;
  font-size: 1.1rem;
}
.disaster-resistant-house .txt-comment a {
  text-decoration: underline;
}

.pl-20 {
  padding-left: 2rem;
}

.list-benefits {
  margin-top: 2rem;
  padding: 4rem;
  background-color: var(--lightgray2);
}
.list-benefits li {
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 3.5rem;
  color: var(--primary-text-color);
  text-align: left;
  margin-bottom: 2rem;
}
.list-benefits li:last-child {
  margin-bottom: 0;
}

.ta-c {
  text-align: center;
}

.th-orange {
  background-color: var(--secondary-color) !important;
  color: var(--whitw) !important;
}

/* ===== house-floor-plan ===== */
.house-floor-plan .txt-01 {
  color: #008996;
}
.house-floor-plan .txt-02 {
  color: #f9a763;
}

/* ===== housing-expenses ===== */
.housing-expenses .txt-comment {
  text-align: right;
  color: var(--secondary-text-color);
  font-size: 1.1rem;
}
.housing-expenses .txt-comment a {
  text-decoration: underline;
}

/* ===== housing-loan-downpayment ===== */
.txt-right-0 {
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 3.5rem;
  color: var(--primary-text-color);
  text-align: right;
  margin-bottom: 0 !important;
}

.td-c td {
  text-align: center;
}

.td-th-orange2 {
  background-color: var(--secondary-color) !important;
  color: var(--white) !important;
}

.list-comment-none li {
  counter-increment: list_comment;
  font-size: 1.2rem;
  line-height: 1.9rem;
  display: flex;
}
.list-comment-none li::before {
  content: "※";
  margin-right: 0.1rem;
}
.list-comment-none a {
  text-decoration: underline;
  color: var(--primary-text-color);
}

/* ===== housing-loan-include ===== */
.housing-loan-include .txt-comment {
  font-size: 1.6rem;
  line-height: 0;
}
@media screen and (max-width: 767px) {
  .housing-loan-include .txt-comment {
    font-size: 1.2rem;
  }
}
.housing-loan-include .txt-comment a {
  text-decoration: underline;
}

.column-th-light {
  min-width: 13.5rem;
  vertical-align: middle;
}
@media screen and (max-width: 767px) {
  .column-th-light {
    min-width: 7rem;
  }
}

.table td,
.table th {
  font-size: 1.6rem;
  border: 1px solid var(--lightgray1);
  padding: 1rem 2rem;
}
@media screen and (max-width: 767px) {
  .table td,
.table th {
    font-size: 1.2rem;
    line-height: 1.8;
    padding: 1rem;
  }
}

.txt-bg-g {
  background: var(--lightgray2);
  padding: 4rem;
  margin-bottom: 2rem;
}
@media screen and (max-width: 767px) {
  .txt-bg-g {
    padding: 2rem;
  }
}

/* ===== solar-power-mistake ===== */
.list-comment-2::before {
  content: "※2";
}

.table-blk-spm {
  width: 100%;
  margin-top: 4rem;
}
.table-blk-spm th,
.table-blk-spm td {
  border: 1px solid var(--lightgray1);
  padding: 1rem;
  font-size: 1.8rem;
  line-height: 1.67;
  width: 50%;
}
.table-blk-spm tbody th {
  color: var(--white);
  background-color: var(--primary-color);
  text-align: center;
}

/* ===== solar-self-consumption ===== */
.solar-self-consumption .list-comment-3::before {
  content: "※3";
}
.solar-self-consumption .list-comment-4 {
  counter-reset: list_comment 3;
}
.solar-self-consumption .list-comment-4 li {
  counter-increment: list_comment 1;
}
.solar-self-consumption .list-comment-4 li::before {
  content: "※" counter(list_comment);
}
.solar-self-consumption .table-blk th,
.solar-self-consumption .table-blk td {
  border: 1px solid var(--lightgray1);
  padding: 1rem;
  font-size: 1.8rem;
  line-height: 1.67;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .solar-self-consumption .table-blk th,
.solar-self-consumption .table-blk td {
    font-size: 1.2rem;
  }
}
.solar-self-consumption .table-blk th {
  color: var(--white);
  font-weight: bold;
}
.solar-self-consumption .table-blk tbody th {
  color: var(--primary-text-color);
  background-color: var(--milk);
  font-weight: bold;
}

/* ===== renovate-budget ===== */
.renovate-budget .txt-comment {
  color: var(--gray1);
  font-size: 1.1rem;
}
.renovate-budget .txt-comment a {
  text-decoration: underline;
}
.renovate-budget .list-comment-9 {
  counter-reset: list_comment 8;
}
.renovate-budget .list-comment-9 li::before {
  content: "※" counter(list_comment);
}
.renovate-budget .list-comment-11::before {
  content: "※11";
}

/* ===== selling-electricity ===== */
.selling-electricity .txt-comment {
  color: var(--gray1);
  font-size: 1.1rem;
}
.selling-electricity .txt-comment a {
  text-decoration: underline;
}
.selling-electricity .list-comment-2 {
  counter-reset: list_comment 1;
}
.selling-electricity .list-comment-2 li::before {
  content: "※" counter(list_comment);
}
.selling-electricity .list-comment-4 {
  counter-reset: list_comment 3;
}
.selling-electricity .list-comment-4 li::before {
  content: "※" counter(list_comment);
}