.solar-power__nav {
  background-color: var(--color-white2);
  padding: 15px 0 16px;
}
@media only screen and (min-width: 768px) {
  .solar-power__nav {
    padding: 40px 0;
  }
}
.solar-power__nav ul {
  display: flex;
  flex-wrap: wrap;
  max-width: 1190px;
  padding: 0 15px;
  margin: 0 auto;
  gap: 15px 20px;
}
@media only screen and (min-width: 768px) {
  .solar-power__nav ul {
    gap: 20px 30px;
  }
}
.solar-power__nav li a {
  color: var(--color-black);
  font-family: var(--font-lato);
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.25s ease;
  font-size: 12px;
  font-weight: 700;
  line-height: 14px;
  letter-spacing: 0.6px;
}
@media only screen and (min-width: 768px) {
  .solar-power__nav li a {
    font-size: 16px;
    font-weight: 700;
    line-height: 19px;
    letter-spacing: 0.8px;
  }
}
.solar-power__nav li a::after {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='19' viewBox='0 0 15 19' fill='none'%3E%3Cpath d='M7.22266 1.5L7.22266 17.0556' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M1.00087 11.2773L7.22309 17.4996L13.4453 11.2773' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 15px;
  height: 12px;
}
.solar-power__nav li a:hover {
  opacity: 0.75;
}
.solar-power .c-heading-primary {
  max-width: 1200px;
  margin: 0 auto;
}
.overview {
  background-color: var(--color-white2);
}
.overview .c-heading-primary {
  margin-bottom: 30px;
}
@media only screen and (min-width: 768px) {
  .overview .c-heading-primary {
    margin-bottom: 76px;
  }
}
@media only screen and (max-width: 768px) {
  .overview .c-heading-primary__main {
    font-size: 34px;
  }
  .overview .c-heading-primary__main::before {
    width: 37px;
    left: -39px;
    top: 38%;
  }
}
.overview__top-ttl {
  color: var(--color-black);
  font-family: var(--font-noto-sans-jp);
  font-weight: 700;
  text-align: center;
  font-size: 24px;
  line-height: 29px;
  letter-spacing: 2.4px;
}
@media only screen and (min-width: 768px) {
  .overview__top-ttl {
    font-size: 34px;
    line-height: 41px;
    letter-spacing: 3.4px;
  }
}
.overview__box {
  margin-top: 20px;
}
@media only screen and (min-width: 768px) {
  .overview__box {
    margin-top: 40px;
  }
}
.overview__block {
  max-width: 1140px;
  margin: 0 auto;
}
.overview__box-ttl {
  color: var(--color-white);
  text-align: center;
  font-weight: 700;
  background: var(--color-black);
  font-size: 20px;
  font-weight: 700;
  line-height: 13px;
  letter-spacing: 2px;
  padding: 16px 0;
}
.overview__box-ttl .xs {
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 1.6px;
}
@media only screen and (min-width: 768px) {
  .overview__box-ttl {
    padding: 6.5px 0 4.5px;
    letter-spacing: 2.4px;
    line-height: 34px;
    font-size: 24px;
  }
}
.overview__box-content {
  background-color: var(--color-white);
  padding: 10px;
}
@media only screen and (min-width: 768px) {
  .overview__box-content {
    padding: 30px;
  }
}
.overview__btm-txt {
  text-align: right;
  font-weight: 400;
  margin-top: 10px;
  font-size: 13px;
  line-height: 19px;
}
@media only screen and (min-width: 768px) {
  .overview__btm-txt {
    font-size: 18px;
    line-height: 26px;
    margin-top: 15px;
  }
}
.overview__box-cost {
  display: flex;
  align-items: stretch;
  min-height: 70px;
  margin-top: 10px;
  flex-direction: column;
}
@media only screen and (min-width: 768px) {
  .overview__box-cost {
    flex-direction: row;
    margin-top: 30px;
  }
}
.overview__box-cost-left {
  width: 100%;
  background-color: var(--color-black);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 0;
  max-width: 100%;
}
@media only screen and (min-width: 768px) {
  .overview__box-cost-left {
    padding: 0;
    max-width: 275px;
  }
}
@media only screen and (min-width: 992px) {
  .overview__box-cost-left {
    max-width: 400px;
  }
}
.overview__box-cost-left p {
  color: var(--color-white);
  font-weight: 700;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  line-height: 12px;
  letter-spacing: 1.8px;
}
@media only screen and (min-width: 768px) {
  .overview__box-cost-left p {
    font-size: 22px;
    line-height: 15px;
    letter-spacing: 2.2px;
  }
}
.overview__box-cost-right {
  width: 100%;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-white2);
  padding: 13px 0;
}
@media only screen and (min-width: 768px) {
  .overview__box-cost-right {
    padding: 0;
    max-width: calc(100% - 275px);
  }
}
@media only screen and (min-width: 992px) {
  .overview__box-cost-right {
    max-width: calc(100% - 400px);
  }
}
.overview__box-cost-right p {
  color: var(--color-black);
  text-align: center;
  font-weight: 700;
  line-height: 34px;
  font-size: 24px;
  letter-spacing: 2.4px;
}
@media only screen and (min-width: 768px) {
  .overview__box-cost-right p {
    font-size: 26px;
    line-height: 37px;
    letter-spacing: 2.6px;
  }
}
.overview__box-cost-right .xs {
  line-height: 1;
  font-size: 20px;
  letter-spacing: 2px;
}
@media only screen and (min-width: 768px) {
  .overview__box-cost-right .xs {
    font-size: 22px;
    letter-spacing: 2.2px;
  }
}
.overview__box-cost-right .xm {
  line-height: 1;
  font-size: 14px;
  letter-spacing: 1.4px;
}
@media only screen and (min-width: 768px) {
  .overview__box-cost-right .xm {
    font-size: 16px;
    letter-spacing: 1.6px;
  }
}
.overview__box-basic {
  background-color: var(--color-gray2);
  padding: 10px;
  border-radius: 10px;
}
@media only screen and (min-width: 768px) {
  .overview__box-basic {
    padding: 30px;
  }
}
.overview__box-basic-top-txt {
  font-family: var(--font-noto-sans-jp);
  font-weight: 700;
  color: var(--color-black);
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  line-height: 23px;
}
@media only screen and (min-width: 768px) {
  .overview__box-basic-top-txt {
    font-size: 20px;
    line-height: 29px;
  }
}
.overview__box-basic-remarks {
  display: flex;
  align-items: center;
  gap: 20px;
}
.overview__box-basic-top {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 10px;
}
@media only screen and (min-width: 768px) {
  .overview__box-basic-top {
    justify-content: space-between;
    flex-direction: row;
  }
}
.overivew__box-basic-remark {
  display: flex;
  align-items: center;
  font-weight: 500;
  font-size: 16px;
  line-height: 23px;
  gap: 5px;
}
@media only screen and (min-width: 768px) {
  .overivew__box-basic-remark {
    font-size: 18px;
    line-height: 26px;
  }
}
.overview__box-basic-row {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
  gap: 30px 5px;
}
@media only screen and (min-width: 768px) {
  .overview__box-basic-row {
    gap: 45px 20px;
  }
}
.overview__box-basic-box {
  width: calc((100% / 4) - (5px * 3) / 4);
  background-color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  min-height: 100px;
}
@media only screen and (min-width: 768px) {
  .overview__box-basic-box {
    min-height: 120px;
    width: calc((100% / 4) - (20px * 3) / 4);
  }
}
.overview__box-basic-txt {
  font-weight: 700;
  font-size: 16px;
  line-height: 23px;
  letter-spacing: 0.8px;
}
@media only screen and (min-width: 768px) {
  .overview__box-basic-txt {
    font-size: 22px;
    line-height: 31px;
    letter-spacing: 1.1px;
  }
}
.overview__box-basic-box.bg {
  background-color: var(--color-black);
  position: relative;
}
.overview__box-basic-box.bg::after {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60' fill='none'%3E%3Cg clip-path='url(%23clip0_1215_605)'%3E%3Cpath d='M59.9977 29.9989C59.9977 30.9789 59.951 31.9589 59.851 32.9389C59.7577 33.9188 59.611 34.8855 59.4177 35.8522C59.2244 36.8189 58.9844 37.7655 58.7044 38.7055C58.4177 39.6455 58.091 40.5722 57.711 41.4789C57.3377 42.3855 56.9177 43.2722 56.451 44.1389C55.991 45.0055 55.4844 45.8455 54.9377 46.6655C54.391 47.4855 53.8044 48.2722 53.1844 49.0322C52.5644 49.7922 51.9044 50.5189 51.2044 51.2122C50.5044 51.9055 49.7844 52.5655 49.0244 53.1922C48.2644 53.8122 47.4777 54.3988 46.6577 54.9455C45.8377 55.4922 44.9977 55.9989 44.131 56.4589C43.2644 56.9189 42.3777 57.3389 41.471 57.7189C40.5644 58.0922 39.6377 58.4255 38.6977 58.7122C37.7577 58.9989 36.8044 59.2389 35.8444 59.4255C34.8777 59.6189 33.911 59.7589 32.931 59.8589C31.951 59.9522 30.971 60.0055 29.991 60.0055C29.011 60.0055 28.031 59.9589 27.051 59.8589C26.071 59.7655 25.1044 59.6189 24.1377 59.4255C23.171 59.2322 22.2244 58.9922 21.2844 58.7122C20.3444 58.4255 19.4177 58.0989 18.511 57.7189C17.6044 57.3455 16.7177 56.9255 15.851 56.4589C14.9844 55.9989 14.1444 55.4922 13.3244 54.9455C12.5044 54.3988 11.7177 53.8122 10.9577 53.1922C10.1977 52.5722 9.47104 51.9122 8.77771 51.2122C8.08438 50.5122 7.42438 49.7922 6.79771 49.0322C6.17104 48.2722 5.59104 47.4855 5.04438 46.6655C4.49771 45.8455 3.99104 45.0055 3.53104 44.1389C3.07104 43.2722 2.65104 42.3855 2.27104 41.4789C1.89771 40.5722 1.56438 39.6455 1.27771 38.7055C0.991042 37.7655 0.751042 36.8122 0.564375 35.8522C0.371042 34.8855 0.231042 33.9188 0.131042 32.9389C0.0377083 31.9589 -0.015625 30.9789 -0.015625 29.9989C-0.015625 29.0189 0.0310417 28.0389 0.131042 27.0589C0.224375 26.0789 0.371042 25.1122 0.564375 24.1455C0.757708 23.1789 0.997708 22.2322 1.27771 21.2922C1.56438 20.3522 1.89104 19.4255 2.27104 18.5189C2.64438 17.6122 3.06438 16.7255 3.53104 15.8589C3.99104 14.9922 4.49771 14.1522 5.04438 13.3322C5.59104 12.5122 6.17771 11.7255 6.79771 10.9655C7.41771 10.2055 8.07771 9.47885 8.77771 8.78552C9.47104 8.09219 10.1977 7.43219 10.9577 6.80552C11.7177 6.18552 12.5044 5.59885 13.3244 5.05219C14.1444 4.50552 14.9844 3.99885 15.851 3.53885C16.7177 3.07885 17.6044 2.65885 18.511 2.27885C19.4177 1.90552 20.3444 1.57219 21.2844 1.28552C22.2244 0.998854 23.1777 0.758854 24.1377 0.572187C25.1044 0.378854 26.071 0.238854 27.051 0.138854C28.031 0.0455208 29.011 -0.0078125 29.991 -0.0078125C30.971 -0.0078125 31.951 0.0388542 32.931 0.138854C33.911 0.232187 34.8777 0.378854 35.8444 0.572187C36.811 0.765521 37.7577 1.00552 38.6977 1.28552C39.6377 1.57219 40.5644 1.89885 41.471 2.27885C42.3777 2.65219 43.2644 3.07219 44.131 3.53885C44.9977 3.99885 45.8377 4.50552 46.6577 5.05219C47.4777 5.59885 48.2644 6.18552 49.0244 6.80552C49.7844 7.42552 50.511 8.08552 51.2044 8.78552C51.8977 9.47885 52.5577 10.2055 53.1844 10.9655C53.8044 11.7255 54.391 12.5122 54.9377 13.3322C55.4844 14.1522 55.991 14.9922 56.451 15.8589C56.911 16.7255 57.331 17.6122 57.711 18.5189C58.0844 19.4255 58.4177 20.3522 58.7044 21.2922C58.991 22.2322 59.231 23.1855 59.4177 24.1455C59.611 25.1122 59.751 26.0789 59.851 27.0589C59.9444 28.0389 59.9977 29.0189 59.9977 29.9989Z' fill='%23F3FF14'/%3E%3Cpath d='M42.843 24.5939H36.923L36.2763 18.5006H41.6097L42.843 24.5939ZM37.2163 27.4072H43.3697L44.603 33.5006H37.803L37.2163 27.4072ZM25.6697 27.4072H34.343L34.9897 33.5006H25.023L25.6697 27.4072ZM16.6363 27.4072H22.8497L22.203 33.5006H15.403L16.6363 27.4072ZM23.0897 24.5939H17.1697L18.403 18.5006H23.7363L23.0897 24.5939ZM26.543 18.5006H33.463L34.1097 24.5939H25.963L26.5497 18.5006H26.543ZM18.3963 14.7539C17.4963 14.7539 16.7163 15.0272 16.0497 15.5739C15.343 16.1606 14.9163 16.8806 14.763 17.7406L11.7163 32.7406C11.523 33.9539 11.7963 35.0072 12.5363 35.9072C13.243 36.7672 14.1963 37.2139 15.4097 37.2539H28.1297V41.0006H24.3763C23.8297 41.0006 23.383 41.1739 23.0297 41.5272C22.6763 41.8806 22.503 42.3272 22.503 42.8739C22.503 43.4206 22.6763 43.8672 23.0297 44.2206C23.383 44.5739 23.8297 44.7472 24.3763 44.7472H35.6297C36.1763 44.7472 36.623 44.5739 36.9763 44.2206C37.3297 43.8672 37.503 43.4206 37.503 42.8739C37.503 42.3272 37.3297 41.8806 36.9763 41.5272C36.623 41.1739 36.1763 41.0006 35.6297 41.0006H31.8763V37.2539H44.5963C45.8097 37.2139 46.783 36.7672 47.5297 35.9072C48.2363 35.0072 48.4897 33.9539 48.2897 32.7406L45.303 17.7406C45.1097 16.8806 44.6563 16.1606 43.9563 15.5739C43.2897 15.0272 42.5097 14.7539 41.6097 14.7539H18.3963Z' fill='black'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1215_605'%3E%3Crect width='60' height='60' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 40px;
  top: -20px;
}
@media only screen and (min-width: 768px) {
  .overview__box-basic-box.bg::after {
    top: -30px;
    width: 50px;
    height: 50px;
  }
}
.overview__box-basic-box.bg .overview__box-basic-txt {
  color: var(--color-white);
}
.overview__specific {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
@media only screen and (min-width: 768px) {
  .overview__specific {
    gap: 30px;
  }
}
.overview__specific-box {
  border: 2px solid var(--color-black);
  border-radius: 10px;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 110px;
  justify-content: center;
  padding: 0 28px;
}
@media only screen and (min-width: 768px) {
  .overview__specific-box {
    padding: 28px;
    width: calc((100% / 2) - (30px * 1) / 2);
  }
}
@media only screen and (min-width: 992px) {
  .overview__specific-box {
    padding: 28px;
    width: calc((100% / 3) - (30px * 2) / 3);
  }
}
.system .overview__specific-box {
  min-height: 110px;
}
@media only screen and (min-width: 768px) {
  .system .overview__specific-box {
    min-height: 140px;
    padding: 18px;
  }
}
.overview__specific-content {
  flex: 1;
}
.overview__specific-ttl {
  font-weight: 700;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
  letter-spacing: 2px;
}
@media only screen and (min-width: 768px) {
  .overview__specific-ttl {
    font-size: 24px;
    line-height: 34px;
    letter-spacing: 1.2px;
  }
}
.overview__specific-txt {
  font-size: 21px;
  font-weight: 500;
  line-height: 30px;
  letter-spacing: 1.05px;
  margin-top: 5px;
  text-align: center;
}
.overview__specific-txt .sm {
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.8px;
}
.overview__tenant {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 10px;
}
@media only screen and (min-width: 768px) {
  .overview__tenant {
    gap: 24px;
  }
}
.overview__tenant-box {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-white2);
  border-radius: 10px;
  width: 100%;
  min-height: 130px;
  padding: 14px 0;
  position: relative;
  margin-left: 8px;
}
@media only screen and (min-width: 768px) {
  .overview__tenant-box {
    padding: 0;
    margin-left: 0;
    min-height: 150px;
    width: calc((100% / 2) - (24px * 1) / 2);
  }
}
@media only screen and (min-width: 992px) {
  .overview__tenant-box {
    width: calc((100% / 3) - (24px * 2) / 3);
  }
}
.overview__tenant-txt {
  color: var(--color-black);
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
}
.overview__tenant-txt .sm {
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
}
.overview__tenant-txt.lh {
  line-height: 24px;
}
.overview__tenant-tag {
  position: absolute;
  left: -6.5px;
  color: var(--color-black);
  text-align: center;
  font-weight: 700;
  background-color: var(--color-highlight-y);
  width: 100%;
  font-size: 18px;
  line-height: 31px;
  letter-spacing: 0.9px;
  top: 5px;
  max-width: 75px;
  padding: 5px 13.5px 4px 1.5px;
}
@media only screen and (min-width: 768px) {
  .overview__tenant-tag {
    padding: 3px 5.5px 3px 6.5px;
    max-width: 85px;
    top: 15px;
    font-size: 20px;
    letter-spacing: 1px;
    line-height: 34px;
  }
}
.overview__tenant-tag .lg {
  line-height: 1;
  font-size: 22px;
  letter-spacing: 1.1px;
}
@media only screen and (min-width: 768px) {
  .overview__tenant-tag .lg {
    font-size: 24px;
    letter-spacing: 1.2px;
  }
}
.overview__tenant-tag::before {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6' viewBox='0 0 8 6' fill='none'%3E%3Cpath d='M8 6V0H0L8 6Z' fill='black'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 8px;
  height: 6px;
  position: absolute;
  bottom: -6px;
  left: 0;
}
.overview__tenant-tag::after {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='40' viewBox='0 0 13 40' fill='none'%3E%3Cpath d='M-8.74228e-07 20L13 40L13 -5.68248e-07L-8.74228e-07 20Z' fill='%23F0F0F0'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 13px;
  height: 40px;
  position: absolute;
  right: 0;
  top: 0;
}
.roi .overview__box-content {
  background-color: var(--color-white2);
}
@media only screen and (max-width: 768px) {
  .roi .c-heading-primary__main {
    font-size: 34px;
  }
  .roi .c-heading-primary__main::before {
    width: 37px;
    left: -39px;
    top: 38%;
  }
}
.roi__block {
  max-width: 1076px;
  margin: 0 auto;
}
.roi__period-top-txt {
  color: var(--color-black);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  text-align: center;
}
.roi__period-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 15px;
}
@media only screen and (min-width: 768px) {
  .roi__period-row {
    margin-top: 30px;
    gap: 20px;
  }
}
.roi__period-box {
  display: flex;
  align-items: center;
  min-height: 90px;
  border-radius: 10px;
  border: 2px solid var(--color-black);
  background: var(--color-white);
  width: 100%;
  padding-inline: 15px;
  gap: 10px;
}
@media only screen and (min-width: 768px) {
  .roi__period-box {
    min-height: 120px;
    border-radius: 10px;
    gap: 15px;
    padding-inline: 30px;
    width: calc((100% / 2) - (20px * 1) / 2);
  }
}
.roi__period-box img {
  width: 25px;
  height: auto;
}
@media only screen and (min-width: 768px) {
  .roi__period-box img {
    width: 35px;
  }
}
.roi__period-txt {
  font-weight: 700;
  font-size: 16px;
  line-height: 23px;
}
@media only screen and (min-width: 768px) {
  .roi__period-txt {
    line-height: 34px;
    font-size: 20px;
  }
}
.roi__period-txt .bg {
  background-image: linear-gradient(
    transparent 8px,
    var(--color-highlight-y) 5px
  );
  background-position-y: 0;
}
@media only screen and (min-width: 768px) {
  .roi__period-txt .bg {
    background-image: linear-gradient(
      transparent 17px,
      var(--color-highlight-y) 17px
    );
    background-position-y: 25px;
  }
}
.roi__period-txt .lg {
  line-height: 1;
  font-size: 16px;
}
@media only screen and (min-width: 768px) {
  .roi__period-txt .lg {
    font-size: 24px;
  }
}
@media only screen and (max-width: 768px) {
  .operation .c-heading-primary__main {
    font-size: 34px;
  }
  .operation .c-heading-primary__main::before {
    width: 37px;
    left: -39px;
    top: 38%;
  }
}
.operation__block {
  max-width: 1076px;
  margin: 0 auto;
}
.concept .c-heading-primary {
  margin-bottom: 40px;
}
.concept__block {
  max-width: 1075px;
  width: 100%;
  margin-inline: auto;
  margin-top: 42px;
}
.concept__description {
  text-align: center;
  font-size: 16px;
  font-weight: 400;
  line-height: 27px;
  letter-spacing: 1.6px;
  margin-bottom: 10px;
}
@media only screen and (min-width: 768px) {
  .concept__description {
    font-size: 20px;
    font-weight: 400;
    line-height: 40px;
    letter-spacing: 2px;
  }
}
.concept__details {
  text-align: center;
  color: var(--color-black);
  font-size: 16px;
  font-weight: 400;
  line-height: 27px;
  letter-spacing: 1.6px;
}
@media only screen and (min-width: 768px) {
  .concept__details {
    line-height: 45.5px;
    letter-spacing: 2px;
  }
}
@media only screen and (min-width: 992px) {
  .concept__details {
    font-size: 20px;
  }
}
.concept__highlight {
  color: var(--color-white);
  font-size: 16px;
  font-weight: 700;
  line-height: 30px;
  letter-spacing: 1.6px;
  /* display: inline-block;
	 */
  background-color: var(--color-black);
  padding-inline: 8px;
  padding-block: 2px;
}
@media only screen and (min-width: 768px) {
  .concept__highlight {
    font-size: 20px;
    font-weight: 700;
    line-height: 200%;
    letter-spacing: 2px;
  }
}
.concept__highlight .big {
  font-size: 16px;
  letter-spacing: 1.6px;
}
@media only screen and (min-width: 768px) {
  .concept__highlight .big {
    font-size: 24px;
    letter-spacing: 2.4px;
  }
}
.concept__txtimg {
  max-width: 230px;
  width: 100%;
  margin-inline: auto;
  margin-block: 15px;
}
@media only screen and (min-width: 768px) {
  .concept__txtimg {
    max-width: 312px;
    margin-block: 20px 30px;
  }
}
.concept__apartment-summary {
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  line-height: 27px;
  letter-spacing: 1.6px;
}
@media only screen and (min-width: 768px) {
  .concept__apartment-summary {
    font-size: 20px;
    letter-spacing: 2px;
    line-height: 40px;
  }
}
.concept__apartment-note {
  color: var(--color-black2);
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  line-height: 17px;
}
.concept__solarbattery-row {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 68px;
  margin-top: 30px;
  position: relative;
}
@media only screen and (min-width: 768px) {
  .concept__solarbattery-row {
    flex-direction: row;
    gap: 99px;
    margin-top: 60px;
  }
}
.concept__solarbattery-row:after {
  content: "";
  position: absolute;
  background-image: url("../img/lazy-load/solar-power/solar-plus.svg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: 25px;
  height: 25px;
}
@media only screen and (min-width: 768px) {
  .concept__solarbattery-row:after {
    width: 41px;
    height: 42px;
  }
}
.concept__solarbattery-ttl {
  color: var(--color-white);
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
  letter-spacing: 2px;
  background-color: var(--color-black);
  padding-block: 11px;
}
@media only screen and (min-width: 768px) {
  .concept__solarbattery-ttl {
    font-size: 22px;
    letter-spacing: 2.2px;
    line-height: 31px;
    padding-block: 15.5px;
  }
}
.concept__solarbattery-txtwrap {
  position: relative;
  background-color: var(--color-white2);
  width: 100%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding-block: 20px;
}
.concept__solarbattery-txt {
  color: var(--color-black);
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  line-height: 27px;
  letter-spacing: 1.6px;
}
@media only screen and (min-width: 768px) {
  .concept__solarbattery-txt {
    font-size: 18px;
    letter-spacing: 1.8px;
  }
}
.concept__solarbattery-note {
  color: var(--color-black2);
  text-align: center;
  font-family: var(--noto-emoji);
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  margin-top: 10px;
}
@media only screen and (min-width: 768px) {
  .concept__solarbattery-note {
    text-align: end;
    line-height: 16px;
    margin-top: 15px;
    font-size: 14px;
  }
}
.concept__moreover > * {
  position: relative;
  z-index: 1;
  color: white;
}
.concept__moreover {
  text-decoration: unset;
  display: block;
  padding-block: 30px;
  margin-top: 30px;
  position: relative;
  /* use a CSS variable for overlay color */
  --overlay-color: rgba(0, 0, 0, 0.48);
  transition: all 0.3s ease;
  overflow: hidden;
}
@media only screen and (min-width: 768px) {
  .concept__moreover {
    margin-top: 60px;
    padding-block: 40px;
  }
}
.concept__moreover::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--overlay-color);
  transition: all 0.3s ease;
  z-index: 0;
}
.concept__moreover:hover .concept__morever-bg {
  transform: scale(1.2);
  transition: all 0.2s ease;
}
.concept__moreover:hover.concept__moreover::before {
  background-color: rgba(0, 0, 0, 0.35);
}

.concept__morever-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: -1;
  transition: all 0.2s ease;
}

.concept__moreover-btn {
  display: flex;
  max-width: 104px;
  width: 100%;
  margin-inline: auto;
  padding: 8px 10px;
  justify-content: center;
  align-items: center;
  border-radius: 50px;
  background: var(--color-white);
  color: var(--color-black);
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 2px;
}
@media only screen and (min-width: 768px) {
  .concept__moreover-btn {
    max-width: 159px;
    padding: 10px;
    font-size: 20px;
    line-height: 20px;
  }
}
.concept__moreover-ttl {
  margin-block: 20px 30px;
  color: var(--color-white);
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  line-height: 31px;
  letter-spacing: 2.2px;
}
@media only screen and (min-width: 768px) {
  .concept__moreover-ttl {
    font-size: 30px;
    letter-spacing: 3px;
    line-height: 50px;
  }
}
.concept__moreover-ttl .big {
  font-size: 22px;
}
@media only screen and (min-width: 768px) {
  .concept__moreover-ttl .big {
    font-size: 34px;
  }
}
.concept__moreover-link {
  max-width: 100%;
  width: 100%;
  margin-inline: auto;
  display: block;
  color: var(--color-white);
  font-size: 16px;
  font-weight: 700;
  line-height: 19px;
  letter-spacing: 0.8px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  transition: all 0.25s ease;
  cursor: pointer;
  /* &:hover {
		 opacity: 0.7;
	}
	 */
}
.concept__moreover-link img {
  width: 30px;
}
@media only screen and (min-width: 768px) {
  .concept__moreover-link img {
    width: 40px;
  }
}
.operation .c-heading-primary {
  margin-bottom: 30px;
}
@media only screen and (min-width: 768px) {
  .operation .c-heading-primary {
    margin-bottom: 70px;
  }
}
.operation__box {
  max-width: 1082px;
  width: 100%;
  margin-inline: auto;
  background: var(--color-white2);
  padding: 20px 10px;
  /* padding-block: 30px;
	 */
}
@media only screen and (min-width: 768px) {
  .operation__box {
    padding: 30px 45px 30px 45px;
  }
}
.operation__box-ttl {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 2.4px;
  text-align: center;
  margin-bottom: 20px;
  line-height: 29px;
  font-family: var(--font-noto-sans-jp);
}
@media only screen and (min-width: 768px) {
  .operation__box-ttl {
    font-size: 28px;
    letter-spacing: 2.8px;
    line-height: 46px;
    font-weight: 600;
  }
}
.operation__box-ttl span {
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 2.4px;
}
@media only screen and (min-width: 768px) {
  .operation__box-ttl span {
    font-size: 30px;
    font-weight: 600;
    letter-spacing: 3px;
  }
}
.operation__image {
  /* padding-inline: 45px 39px;
	 */
  /* img {
		 width: 100%;
	}
	 */
  display: flex;
  align-items: center;
  gap: 15px;
  flex-direction: column;
}
@media only screen and (min-width: 768px) {
  .operation__image {
    flex-direction: row;
    justify-content: center;
  }
}
.operation__image-box {
  max-width: 100%;
  width: auto;
}
@media only screen and (min-width: 768px) {
  .operation__image-box {
    max-width: 672px;
  }
}
.operation__image-box img {
  pointer-events: none;
}
@media only screen and (min-width: 768px) {
  .operation__image-box img {
    width: auto;
    max-width: 100%;
  }
}
.operation__text {
  max-width: 100%;
  padding: 30px 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  background-color: #f3ff14;
  border-radius: 15px;
}
@media only screen and (min-width: 768px) {
  .operation__text {
    max-width: 170px;
  }
}
@media only screen and (min-width: 992px) {
  .operation__text {
    max-width: 304px;
  }
}
.operation__text img {
  max-width: 185px;
  height: 58px;
  pointer-events: none;
}
@media only screen and (min-width: 768px) {
  .operation__text img {
    max-width: 100%;
    height: auto;
  }
}
.operation__text-desc {
  color: #000;
  font-size: 10px;
  font-weight: 500;
  line-height: 160%;
  letter-spacing: 1px;
}
.operation__fit {
  border-radius: 10px;
  border: 2px solid var(--color-black);
  margin-block: 45px 30px;
  position: relative;
  max-width: 1074px;
  width: 100%;
  margin-inline: auto;
}
@media only screen and (min-width: 768px) {
  .operation__fit {
    margin-block: 54px 40px;
  }
}
.operation__fit-ttl {
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  line-height: 27px;
  position: absolute;
  top: -16px;
  left: 11px;
  background-color: var(--color-white);
  position: absolute;
  padding-inline: 35px 5px;
}
@media only screen and (min-width: 768px) {
  .operation__fit-ttl {
    font-size: 20px;
    line-height: 28px;
    padding-inline: 45px 15px;
    left: 23px;
  }
}
.operation__fit-ttl .big {
  font-size: 18px;
}
@media only screen and (min-width: 768px) {
  .operation__fit-ttl .big {
    font-size: 20px;
  }
}
.operation__fit-ttl:after {
  content: "";
  position: absolute;
  background-image: url("../../assets/img/lazy-load/solar-power/solar-bulb-icon.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: 25px;
  height: 27px;
  left: 8px;
  top: 41%;
  transform: translateY(-50%);
}
@media only screen and (min-width: 768px) {
  .operation__fit-ttl:after {
    left: 15px;
  }
}
.operation__fit-txt {
  font-size: 13px;
  font-weight: 500;
  line-height: 19px;
  letter-spacing: 0.65px;
  padding: 25px 15px 15px;
}
@media only screen and (min-width: 768px) {
  .operation__fit-txt {
    padding: 30px;
    font-size: 16px;
    letter-spacing: 0.8px;
    line-height: 23px;
  }
}
.operation__fitbox {
  max-width: 100%;
  width: 100%;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 20px;
  background-color: var(--color-white2);
  padding: 20px 10px;
}
@media only screen and (min-width: 768px) {
  .operation__fitbox {
    max-width: 1076px;
    gap: 20px;
    padding: 20px;
    flex-direction: row;
    padding: 29px 30px 35px;
  }
}
@media only screen and (min-width: 992px) {
  .operation__fitbox {
    gap: 65px;
  }
}
.fit__right-section {
  max-width: 100%;
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .fit__right-section {
    flex: 1;
  }
}
.operation__fitbox .fit__title .big {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: 3.6px;
  display: inline-block;
  line-height: 0;
}
@media only screen and (min-width: 768px) {
  .operation__fitbox .fit__title .big {
    font-size: 37px;
    letter-spacing: 3.8px;
  }
}
@media only screen and (min-width: 992px) {
  .operation__fitbox .fit__title .big {
    font-size: 38px;
  }
}
.operation__fitbox .fit__title {
  font-size: 32px;
  font-weight: 700;
  line-height: 41.5px;
  letter-spacing: 3.2px;
}
@media only screen and (min-width: 768px) {
  .operation__fitbox .fit__title {
    font-size: 33px;
    line-height: 40px;
    letter-spacing: 3.4px;
    line-height: 50px;
  }
}
@media only screen and (min-width: 992px) {
  .operation__fitbox .fit__title {
    font-size: 34px;
    line-height: 50px;
  }
}
.operation__fitbox .fit__text-group {
  margin-bottom: 10px;
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .operation__fitbox .fit__text-group {
    text-align: start;
    margin-bottom: 30px;
  }
}
.operation__fitbox .fit__subtitle .big {
  font-size: 30px;
  font-weight: 700;
  line-height: 0;
  letter-spacing: 3px;
  display: inline-block;
}
@media only screen and (min-width: 768px) {
  .operation__fitbox .fit__subtitle .big {
    font-size: 32px;
    letter-spacing: 3.2px;
  }
}
.operation__fitbox .fit__subtitle {
  color: var(--color-black);
  font-size: 26px;
  font-weight: 700;
  line-height: 41.5px;
  letter-spacing: 2.6px;
}
@media only screen and (min-width: 768px) {
  .operation__fitbox .fit__subtitle {
    font-size: 22px;
    line-height: 40px;
    letter-spacing: 2.8px;
  }
}
@media only screen and (min-width: 992px) {
  .operation__fitbox .fit__subtitle {
    font-size: 28px;
  }
}
.operation__fitbox .fit__note-txt {
  font-size: 12px;
  font-weight: 500;
  line-height: 14px;
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .operation__fitbox .fit__note-txt {
    font-size: 14px;
    font-weight: 500;
    line-height: 16px;
    text-align: start;
  }
}
.operation__fitbox .fit__period {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 30px;
  background-color: var(--color-white);
  margin-bottom: 10px;
}
@media only screen and (min-width: 768px) {
  .operation__fitbox .fit__period {
    gap: 20px;
  }
}
@media only screen and (min-width: 992px) {
  .operation__fitbox .fit__period {
    gap: 38px;
  }
}
.operation__fitbox .fit__period:last-child {
  margin-bottom: 0;
}
.operation__fitbox .fit__period-label {
  color: var(--color-white);
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  line-height: 13px;
  padding-block: 20.5px;
  width: 120px;
  background: var(--color-black);
  position: relative;
}
@media only screen and (min-width: 768px) {
  .operation__fitbox .fit__period-label {
    width: 110px;
    font-size: 22px;
    line-height: 16px;
    padding-block: 19px;
  }
}
@media only screen and (min-width: 992px) {
  .operation__fitbox .fit__period-label {
    width: 207px;
    font-size: 26px;
  }
}
.operation__fitbox .fit__period-label:after {
  content: "";
  position: absolute;
  border-left: 28px solid transparent;
  border-right: 28px solid transparent;
  border-top: 12px solid var(--color-black);
  right: -34px;
  top: 50%;
  transform: translateY(-50%) rotate(270deg);
}
.operation__fitbox .fit__period-label .sm {
  font-size: 16px;
}
@media only screen and (min-width: 768px) {
  .operation__fitbox .fit__period-label .sm {
    font-size: 14px;
  }
}
@media only screen and (min-width: 992px) {
  .operation__fitbox .fit__period-label .sm {
    font-size: 22px;
  }
}
.operation__fitbox .fit__period-label .md {
  font-size: 18px;
}
@media only screen and (min-width: 768px) {
  .operation__fitbox .fit__period-label .md {
    font-size: 16px;
  }
}
@media only screen and (min-width: 992px) {
  .operation__fitbox .fit__period-label .md {
    font-size: 22px;
  }
}
.operation__fitbox .fit__period-rate {
  font-size: 22px;
  font-weight: 700;
}
@media only screen and (min-width: 768px) {
  .operation__fitbox .fit__period-rate {
    font-size: 18px;
    font-weight: 700;
  }
}
@media only screen and (min-width: 992px) {
  .operation__fitbox .fit__period-rate {
    font-size: 30px;
    font-weight: 700;
  }
}
.operation__fitbox .fit__period-rate .md {
  font-size: 16px;
}
@media only screen and (min-width: 768px) {
  .operation__fitbox .fit__period-rate .md {
    font-size: 15px;
  }
}
@media only screen and (min-width: 992px) {
  .operation__fitbox .fit__period-rate .md {
    font-size: 22px;
  }
}
.operation__fitbox .fit__period-rate .sm {
  font-size: 18px;
}
@media only screen and (min-width: 768px) {
  .operation__fitbox .fit__period-rate .sm {
    font-size: 16px;
  }
}
@media only screen and (min-width: 992px) {
  .operation__fitbox .fit__period-rate .sm {
    font-size: 18px;
  }
}
.opeartion__footer-txt {
  font-size: 18px;
  font-weight: 700;
  line-height: 29px;
  letter-spacing: 1.8px;
  text-align: center;
  margin-top: 30px;
}
@media only screen and (min-width: 768px) {
  .opeartion__footer-txt {
    font-size: 24px;
    font-weight: 700;
    line-height: 38px;
    letter-spacing: 2.4px;
    text-align: center;
    margin-top: 40px;
  }
}
.opeartion__footer-txt .highlight {
  background-image: linear-gradient(
    transparent 10px,
    var(--color-highlight-y) 10px
  );
  /* background-position-y: 15px;
	 */
}
@media only screen and (min-width: 768px) {
  .opeartion__footer-txt .highlight {
    background-image: linear-gradient(
      transparent 20px,
      var(--color-highlight-y) 20px
    );
    background-position-y: 30px;
  }
}

.solar__cta-img {
  width: 100%;
  height: 200px;
  position: relative;
}

.solar__cta-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: inset(0);
}

.solar__cta-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-image: url("../img/lazy-load/solar-power/solar-bg-01-sp.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  z-index: -1;
}

@media only screen and (min-width: 768px) {
  .solar__cta-img {
    height: 355px;
  }

  .solar__cta-bg {
    background-image: url("../img/lazy-load/solar-power/solar-bg-01.webp");
  }
}

/* owner-benefit */
.owner {
  background: var(--color-white2);
}
@media only screen and (max-width: 768px) {
  .owner .c-heading-primary__main {
    font-size: 34px;
  }
  .owner .c-heading-primary__main::before {
    width: 37px;
    left: -39px;
    top: 38%;
  }
}
.owner .c-heading-primary {
  margin-bottom: 30px;
}
@media only screen and (min-width: 768px) {
  .owner .c-heading-primary {
    margin-bottom: 70px;
  }
}
.owner__ttl {
  text-align: start;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 2px;
}
@media only screen and (min-width: 768px) {
  .owner__ttl {
    font-size: 20px;
    text-align: center;
    line-height: 40px;
  }
}
.owner__row {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 20px;
  padding-bottom: 10px;
}
@media only screen and (min-width: 768px) {
  .owner__row {
    flex-direction: column-reverse;
    gap: 30px;
    padding-bottom: 30px;
  }
}
@media only screen and (min-width: 992px) {
  .owner__row {
    flex-direction: row;
  }
}
.owner__row.pb0 {
  padding: 0;
}
.owner__row.flex-center {
  align-items: center;
  gap: 50px;
}
.owner__row.strech {
  align-items: stretch;
  gap: 28px;
  padding-bottom: 0;
}
@media only screen and (min-width: 768px) {
  .owner__row.strech {
    gap: 30px;
    flex-direction: row;
  }
}
.owner__col:first-child {
  flex: 1;
  max-width: 100%;
  width: 100%;
}
.owner__col:last-child {
  max-width: 100%;
  width: 100%;
}
.owner__col:last-child img {
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .owner__col:last-child {
    max-width: 100%;
  }
}
@media only screen and (min-width: 992px) {
  .owner__col:last-child {
    max-width: 430px;
  }
}
@media only screen and (min-width: 1200px) {
  .owner__col:last-child {
    max-width: 469px;
  }
}
.owner__box {
  position: relative;
  background: var(--color-white);
  max-width: 1076px;
  width: 100%;
  margin-inline: auto;
  margin-block: 35px;
  padding: 39px 10px 10px;
}
@media only screen and (min-width: 768px) {
  .owner__box {
    padding: 37px 30px 30px;
    margin-block: 60px;
  }
}
.owner__box:last-of-type {
  margin-bottom: 0;
}
.owner__box.merit02 {
  padding: 39px 10px 10px;
}
@media only screen and (min-width: 768px) {
  .owner__box.merit02 {
    padding: 36px 30px 21px;
  }
}
.owner__merit {
  position: absolute;
  border-radius: 10px;
  background: var(--color-black);
  color: var(--color-white);
  text-align: center;
  font-family: var(--font-lato);
  font-size: 20px;
  font-weight: 700;
  line-height: 14px;
  letter-spacing: 2px;
  padding-block: 10px;
  max-width: 142px;
  width: 100%;
  margin-inline: auto;
  left: 50%;
  transform: translateX(-50%);
  top: -18px;
}
@media only screen and (min-width: 768px) {
  .owner__merit {
    font-size: 22px;
    line-height: 16px;
    letter-spacing: 2.2px;
    max-width: 152px;
  }
}
.owner__txt {
  text-align: center;
  font-size: 26px;
  font-weight: 600;
  line-height: 17px;
  letter-spacing: 2.6px;
  padding-bottom: 20px;
}
@media only screen and (min-width: 768px) {
  .owner__txt {
    padding-bottom: 30px;
    font-size: 28px;
    line-height: 18px;
    letter-spacing: 2.8px;
  }
}
@media only screen and (max-width: 767px) {
  .owner__txt.lineheight {
    line-height: 30px;
  }
}
.owner__txt .big {
  font-size: 28px;
  letter-spacing: 2.8px;
  line-height: 0;
  font-weight: 700;
}
@media only screen and (min-width: 768px) {
  .owner__txt .big {
    font-size: 32px;
    letter-spacing: 3.2px;
  }
}
.owner__txt.vacancy {
  padding-bottom: 40px;
}
@media only screen and (min-width: 768px) {
  .owner__txt.vacancy {
    padding-bottom: 60px;
  }
}
.owner__benefit-wrap {
  margin-block: 15px;
}
.owner__benefit {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 24px;
  margin-bottom: 10px;
  background: var(--color-white2);
}
@media only screen and (min-width: 768px) {
  .owner__benefit {
    gap: 20px;
  }
}
@media only screen and (min-width: 992px) {
  .owner__benefit {
    gap: 40px;
  }
}
.owner__benefit.mb0 {
  margin-bottom: 0;
}
.owner__benefit:last-of-type {
  margin-bottom: 0;
}
.owner__benefit-period {
  color: var(--color-white2);
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  line-height: 13px;
  letter-spacing: 2px;
  width: 120px;
  background: var(--color-black);
  padding-block: 17px;
  position: relative;
}
@media only screen and (min-width: 768px) {
  .owner__benefit-period {
    font-size: 22px;
    letter-spacing: 2.2px;
    line-height: 15px;
    width: 177px;
  }
}
.owner__benefit-period:after {
  content: "";
  position: absolute;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-top: 12px solid var(--color-black);
  right: -30px;
  top: 50%;
  transform: translateY(-50%) rotate(270deg);
}
.owner__benefit-period .num {
  font-size: 20px;
  letter-spacing: 2px;
}
@media only screen and (min-width: 768px) {
  .owner__benefit-period .num {
    font-size: 24px;
    letter-spacing: 2.4px;
  }
}
.owner__benefit-period.big {
  font-size: 20px;
  letter-spacing: 2px;
}
@media only screen and (min-width: 768px) {
  .owner__benefit-period.big {
    font-size: 24px;
    letter-spacing: 2.4px;
  }
}
.owner__benefit-period .sm {
  font-size: 16px;
  letter-spacing: 1.6px;
  display: inline-block;
}
@media only screen and (min-width: 768px) {
  .owner__benefit-period .sm {
    font-size: 18px;
    letter-spacing: 1.8px;
  }
}
.owner__benefit-period .md {
  font-size: 18px;
  letter-spacing: 1.8px;
  display: inline-block;
}
@media only screen and (min-width: 768px) {
  .owner__benefit-period .md {
    font-size: 20px;
    letter-spacing: 2px;
  }
}
.owner__benefit-amount {
  font-size: 22px;
  font-weight: 700;
  line-height: 15px;
}
@media only screen and (min-width: 768px) {
  .owner__benefit-amount {
    font-size: 28px;
    line-height: 18px;
  }
}
.owner__benefit-amount .highlight {
  background-image: linear-gradient(
    transparent 20px,
    var(--color-highlight-y) 20px
  );
  background-position-y: 60px;
}
@media only screen and (min-width: 768px) {
  .owner__benefit-amount .highlight {
    background-image: linear-gradient(
      transparent 20px,
      var(--color-highlight-y) 30px
    );
    background-position-y: 35px;
  }
}
.owner__benefit-amount .md {
  font-size: 20px;
}
.owner__benefit-amount .sm {
  font-size: 16px;
}
@media only screen and (min-width: 768px) {
  .owner__benefit-amount .sm {
    font-size: 18px;
  }
}
.owner__benefit-midtxt {
  font-family: var(--font-noto-sans-jp);
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: 2px;
  padding-block: 20px 15px;
  border-bottom: 4px solid #000 1a;
  position: relative;
}
@media only screen and (min-width: 768px) {
  .owner__benefit-midtxt {
    font-size: 18px;
    letter-spacing: 2.4px;
    line-height: 29px;
  }
}
@media only screen and (min-width: 992px) {
  .owner__benefit-midtxt {
    font-size: 24px;
    letter-spacing: 2.4px;
    line-height: 29px;
  }
}
.owner__benefit-midtxt:after {
  content: "";
  position: absolute;
  width: 60px;
  height: 4px;
  background-color: var(--color-black);
  left: 0;
  bottom: -4px;
}
.owner__note-text {
  font-size: 12px;
  font-weight: 500;
  line-height: 12.5px;
  margin-top: 15px;
}
@media only screen and (min-width: 768px) {
  .owner__note-text {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    margin-top: 15px;
  }
}
.owner__metrics {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
@media only screen and (min-width: 768px) {
  .owner__metrics {
    gap: 20px;
  }
}
.owner__metric {
  width: calc(100% / 2 - 2.5px);
}
@media only screen and (min-width: 768px) {
  .owner__metric {
    width: calc(100% / 2 - 10px);
  }
}
.owner__metric-title {
  color: var(--color-white2);
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  line-height: 11px;
  letter-spacing: 1.6px;
  background: var(--color-black);
  padding-block: 19px;
  position: relative;
}
@media only screen and (min-width: 768px) {
  .owner__metric-title {
    font-size: 14px;
    line-height: 15px;
    letter-spacing: 2px;
    padding-block: 20px;
  }
}
@media only screen and (min-width: 992px) {
  .owner__metric-title {
    font-size: 20px;
    line-height: 15px;
    letter-spacing: 2px;
    padding-block: 20px;
  }
}
.owner__metric-title:after {
  content: "";
  position: absolute;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid var(--color-black);
  /* background-color: var(--color-black);
	 */
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 10px;
  bottom: -10px;
}
@media only screen and (min-width: 768px) {
  .owner__metric-title:after {
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 12px solid var(--color-black);
    bottom: -12px;
    height: 12px;
    width: 29px;
  }
}
.owner__metric-value {
  text-align: center;
  font-size: 30px;
  font-weight: 700;
  line-height: 23px;
  padding-block: 22px;
  background-color: var(--color-white2);
}
@media only screen and (min-width: 768px) {
  .owner__metric-value {
    padding-block: 27.5px;
  }
}
.owner__metric-value .highlight {
  background-image: linear-gradient(
    transparent 25px,
    var(--color-highlight-y) 25px
  );
  background-position-y: 35px;
}
.owner__metric-value .md {
  font-size: 22px;
  font-weight: 700;
  line-height: 0;
}
.owner__metric-value .unit__bracket {
  font-size: 14px;
  font-weight: 500;
  line-height: 0;
  display: inline-block;
}
@media only screen and (min-width: 768px) {
  .owner__metric-value .unit__bracket {
    font-size: 16px;
  }
}
.owner__metric-value .unit__number {
  font-size: 18px;
  font-weight: 500;
  line-height: 0;
}
.owner__metric-value .unit__text {
  font-size: 16px;
  line-height: 0;
  display: inline-block;
  font-weight: 500;
}
.owner__vacancy-txt {
  font-size: 18px;
  font-weight: 700;
  line-height: 26px;
  letter-spacing: 0.9px;
  text-align: center;
  margin-top: 23px;
}
@media only screen and (min-width: 768px) {
  .owner__vacancy-txt {
    margin-top: 0;
    font-size: 13px;
  }
}
@media only screen and (min-width: 992px) {
  .owner__vacancy-txt {
    font-size: 18px;
  }
}
@media only screen and (max-width: 767px) {
  .owner__vacancy-txt .sm {
    font-size: 22px;
    letter-spacing: 1.1px;
    line-height: 1;
  }
}
.owner__vacancy-highlight {
  background-image: linear-gradient(
    transparent 13px,
    var(--color-highlight-y) 0
  );
  background-position-y: 0;
}
@media only screen and (min-width: 768px) {
  .owner__vacancy-highlight {
    background-image: linear-gradient(
      transparent 10px,
      var(--color-highlight-y) 10px
    );
    background-position-y: 20px;
  }
}
.owner__vacancy-highlight .big {
  font-size: 22px;
  letter-spacing: 1.1px;
}
.owner__vacancy-col {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  border: 2px solid var(--color-black);
  background: #f7f7f7;
  position: relative;
  min-height: 110px;
}
@media only screen and (min-width: 768px) {
  .owner__vacancy-col {
    width: calc(100% / 3 - 18px);
    min-height: 150px;
    padding-top: 30px;
  }
}
.owner__vacancy-col:after {
  content: "";
  position: absolute;
  background-image: url("../img/lazy-load/solar-power/icon-home.svg");
  background-repeat: no-repeat;
  background-size: cover;
  background-repeat: no-repeat;
  left: 50%;
  transform: translateX(-50%);
  top: -25px;
  width: 50px;
  height: 50px;
}
@media only screen and (min-width: 768px) {
  .owner__vacancy-col:after {
    width: calc(100% / 3 - 18px);
    width: 60px;
    height: 60px;
    top: -30px;
  }
}
.owner__vacancynote-text {
  font-size: 34px;
  font-weight: 700;
  line-height: 25px;
  text-align: center;
  background-image: linear-gradient(
    transparent 2px,
    var(--color-highlight-y) 2px
  );
  background-position-y: 0;
  display: inline-block;
}
@media only screen and (min-width: 768px) {
  .owner__vacancynote-text {
    font-size: 38px;
    line-height: 35px;
    background-image: linear-gradient(
      transparent 10px,
      var(--color-highlight-y) 10px
    );
    background-position-y: 34px;
  }
}
.owner__vacancynote-text .sm {
  font-size: 26px;
  display: inline-block;
}
@media only screen and (min-width: 768px) {
  .owner__vacancynote-text .sm {
    font-size: 30px;
  }
}
.owner__vacancy-smtxt {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.6px;
  line-height: 1.2;
}
.owner__vacancynote {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
}
/* resident benefit */
.resident.l-section {
  padding: 60px 0 0;
}
@media only screen and (min-width: 768px) {
  .resident.l-section {
    padding: 100px 0 0;
  }
}
@media only screen and (max-width: 768px) {
  .resident .c-heading-primary__main {
    font-size: 34px;
  }
  .resident .c-heading-primary__main::before {
    width: 37px;
    left: -39px;
    top: 38%;
  }
}
@media only screen and (min-width: 786px) {
  .resident .c-heading-primary {
    margin-bottom: 113px;
  }
}
.resident__wrap {
  margin-top: 50px;
}
.resident__wrap:last-of-type {
  margin-top: 40px;
}
@media only screen and (min-width: 768px) {
  .resident__wrap {
    margin-top: 113px;
  }
  .resident__wrap:last-of-type {
    margin-top: 65px;
  }
}
.resident__block {
  max-width: 1076px;
  width: 100%;
  margin-inline: auto;
  background-color: #f0f0f0;
  padding: 30px 10px;
  position: relative;
  margin-bottom: 40px;
}
@media only screen and (min-width: 768px) {
  .resident__block {
    padding: 30px;
    margin-bottom: 65px;
  }
}
.resident__block:last-of-type {
  margin-bottom: 60px;
}
@media only screen and (min-width: 768px) {
  .resident__block:last-of-type {
    margin-bottom: 95px;
  }
}
.resident__heading {
  color: #fff;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  line-height: 11px;
  background: var(--color-black);
  border-radius: 60px;
  padding: 14.5px;
  max-width: 306px;
  width: 100%;
  margin-inline: auto;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -25px;
}
@media only screen and (min-width: 768px) {
  .resident__heading {
    max-width: 450px;
    font-size: 24px;
    line-height: 16px;
  }
}
.resident__heading.sec {
  max-width: 190px;
}
@media only screen and (min-width: 768px) {
  .resident__heading.sec {
    max-width: 450px;
  }
}
.resident__subheading {
  text-align: center;
  color: var(--color-black);
  font-size: 12px;
  font-weight: 400;
  line-height: 17px;
}
@media only screen and (min-width: 768px) {
  .resident__subheading {
    font-size: 14px;
    line-height: 19px;
  }
}
.resident__row {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-block: 10px 30px;
  flex-direction: column;
  gap: 10px;
}
@media only screen and (min-width: 768px) {
  .resident__row {
    gap: 30px;
    flex-direction: column-reverse;
    align-items: flex-start;
    margin-block: 30px 35px;
  }
}
@media only screen and (min-width: 992px) {
  .resident__row {
    flex-direction: row;
  }
}
.resident__right {
  max-width: 469px;
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .resident__right {
    max-width: 100%;
  }
  .resident__right img {
    width: 100%;
  }
}
@media only screen and (min-width: 992px) {
  .resident__right {
    max-width: 469px;
  }
}
.resident__left {
  flex: 1;
  width: 100%;
}
.resident__left-title {
  font-family: var(--font-noto-sans-jp);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 2px;
  line-height: 24px;
  padding-block: 0px 10px;
  border-bottom: 4px solid #d8d8d8;
  position: relative;
  margin-bottom: 15px;
}
@media only screen and (min-width: 768px) {
  .resident__left-title {
    font-size: 20px;
    letter-spacing: 2px;
    line-height: 29px;
    padding-block: 0px 10px;
    margin-bottom: 15px;
    line-height: 18px;
  }
}
@media only screen and (min-width: 992px) {
  .resident__left-title {
    font-size: 24px;
    letter-spacing: 2.4px;
    padding-block: 0px 15px;
    margin-bottom: 20px;
  }
}
.resident__left-title::after {
  content: "";
  position: absolute;
  width: 60px;
  height: 4px;
  background-color: var(--color-black);
  left: 0;
  bottom: -4px;
}
.resident__data {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  margin-bottom: 5px;
  background: var(--color-white);
}
.resident__data:last-of-type {
  margin-bottom: 0;
}
.resident__data-text {
  color: var(--color-white2);
  text-align: center;
  font-size: 14px;
  letter-spacing: 1.4px;
  font-weight: 700;
  line-height: 10px;
  width: 140px;
  background: var(--color-black);
  padding-block: 17px;
  position: relative;
}
@media only screen and (min-width: 768px) {
  .resident__data-text {
    width: 120px;
    letter-spacing: 1.3px;
    font-size: 14px;
    padding-block: 10px;
    line-height: 12px;
  }
}
@media only screen and (min-width: 992px) {
  .resident__data-text {
    width: 160px;
    font-size: 16px;
    letter-spacing: 1.6px;
    padding-block: 17px;
  }
}
.resident__data-month {
  font-size: 18px;
  line-height: 12px;
  font-weight: 700;
  letter-spacing: 0.9px;
}
@media only screen and (min-width: 768px) {
  .resident__data-month {
    font-size: 20px;
    line-height: 13px;
    letter-spacing: 1px;
  }
}
.resident__data-month .sm {
  font-size: 14px;
  letter-spacing: 0.7px;
}
@media only screen and (min-width: 768px) {
  .resident__data-month .sm {
    font-size: 16px;
    letter-spacing: 0.8px;
  }
}
.resident__data-month .big {
  font-size: 16px;
  letter-spacing: 0.8px;
}
@media only screen and (min-width: 768px) {
  .resident__data-month .big {
    font-size: 18px;
    letter-spacing: 0.9px;
  }
}
.resident__bill {
  background: var(--color-white);
  padding: 20px 10px;
  color: var(--color-black);
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  line-height: 16px;
  margin-top: 10px;
}
@media only screen and (min-width: 768px) {
  .resident__bill {
    font-size: 20px;
    margin-top: 10px;
    line-height: 13px;
    padding: 10px 10px;
  }
}
@media only screen and (min-width: 992px) {
  .resident__bill {
    font-size: 24px;
    margin-top: 20px;
    line-height: 18px;
    padding: 20px 10px;
  }
}
.resident__bill .big {
  font-size: 24px;
}
@media only screen and (min-width: 768px) {
  .resident__bill .big {
    font-size: 26px;
  }
}
@media only screen and (min-width: 992px) {
  .resident__bill .big {
    font-size: 28px;
  }
}
.resident__bill .sm {
  font-size: 16px;
}
@media only screen and (min-width: 768px) {
  .resident__bill .sm {
    font-size: 20px;
  }
}
.resident__title {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
@media only screen and (min-width: 768px) {
  .resident__title {
    gap: 19px;
  }
}
.resident__title .text {
  color: var(--color-black);
  text-align: center;
  font-family: var(--font-noto-sans-jp);
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: 2px;
  position: relative;
  flex-shrink: 0;
}
@media only screen and (min-width: 768px) {
  .resident__title .text {
    font-size: 20px;
    line-height: 22px;
    letter-spacing: 2px;
  }
}
@media only screen and (min-width: 992px) {
  .resident__title .text {
    font-size: 24px;
    line-height: 29px;
    letter-spacing: 2.4px;
  }
}
.resident__title .border {
  border: 1px solid var(--color-black);
  max-width: 372px;
  width: 100%;
}
.resident__box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 30px;
}
@media only screen and (min-width: 768px) {
  .resident__box {
    margin-top: 47px;
    gap: 20px;
    align-items: stretch;
  }
}
.resident__col-img {
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  position: absolute;
  width: 40px;
  height: 40px;
}
@media only screen and (min-width: 768px) {
  .resident__col-img {
    width: 52px;
    height: 52px;
    top: -26px;
  }
}
.resident__col {
  width: calc(100% / 2 - 2.5px);
  border-radius: 10px;
  border: 2px solid var(--color-black);
  background: var(--color-white4);
  text-align: center;
  padding: 34px 27px 11px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
@media only screen and (min-width: 768px) {
  .resident__col {
    min-height: 130px;
    width: calc(100% / 4 - 15px);
  }
}
@media only screen and (min-width: 992px) {
  .resident__col {
    padding: 41px 0 14px;
  }
}
.resident__col-ttl {
  font-size: 14px;
  font-weight: 700;
  line-height: 19px;
  margin-bottom: 10px;
}
@media only screen and (min-width: 768px) {
  .resident__col-ttl {
    font-size: 12px;
    margin-bottom: 15px;
  }
}
@media only screen and (min-width: 992px) {
  .resident__col-ttl {
    font-size: 16px;
  }
}
@media only screen and (min-width: 1200px) {
  .resident__col-ttl {
    font-size: 18px;
  }
}
.resident__col-text {
  /* color: var(--color-black);
	 */
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  line-height: 24px;
}
@media only screen and (min-width: 768px) {
  .resident__col-text {
    font-size: 16px;
    line-height: 16px;
  }
}
@media only screen and (min-width: 992px) {
  .resident__col-text {
    font-size: 20px;
    line-height: 34px;
  }
}
@media only screen and (min-width: 1200px) {
  .resident__col-text {
    font-size: 24px;
    line-height: 34px;
  }
}
.resident__col-text .highlight {
  background-image: linear-gradient(
    transparent 22px,
    var(--color-highlight-y) 0
  );
  background-position-y: 23px;
}
@media only screen and (min-width: 768px) {
  .resident__col-text .highlight {
    background-image: linear-gradient(
      transparent 13px,
      var(--color-highlight-y) 6px
    );
    background-position-y: 0;
  }
}
@media only screen and (min-width: 992px) {
  .resident__col-text .highlight {
    background-image: linear-gradient(
      transparent 17px,
      var(--color-highlight-y) 6px
    );
  }
}
.resident__col-text .sm {
  font-size: 16px;
  line-height: 0;
  display: inline-block;
}
@media only screen and (min-width: 768px) {
  .resident__col-text .sm {
    font-size: 16px;
  }
}
@media only screen and (min-width: 992px) {
  .resident__col-text .sm {
    font-size: 18px;
  }
}
@media only screen and (min-width: 1200px) {
  .resident__col-text .sm {
    font-size: 20px;
  }
}
.resident__row.benefit {
  gap: 20px;
}
@media only screen and (min-width: 768px) {
  .resident__row.benefit {
    gap: 60px;
    flex-direction: column-reverse;
    margin-block: 25px 17px;
  }
}
@media only screen and (min-width: 992px) {
  .resident__row.benefit {
    flex-direction: row;
  }
}
.resident__benefit {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 24px;
  margin-bottom: 10px;
  background: var(--color-white);
}
@media only screen and (min-width: 768px) {
  .resident__benefit {
    gap: 30px;
  }
}
.resident__benefit.mb0 {
  margin-bottom: 0;
}
.resident__benefit:last-of-type {
  margin-bottom: 0;
}
.resident__benefit-period {
  color: var(--color-white2);
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  line-height: 13px;
  letter-spacing: 2px;
  width: 120px;
  background: var(--color-black);
  padding-block: 17px;
  position: relative;
}
@media only screen and (min-width: 768px) {
  .resident__benefit-period {
    font-size: 22px;
    letter-spacing: 2.2px;
    line-height: 15px;
    width: 177px;
  }
}
.resident__benefit-period:after {
  content: "";
  position: absolute;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-top: 12px solid var(--color-black);
  right: -30px;
  top: 50%;
  transform: translateY(-50%) rotate(270deg);
}
.resident__benefit-period .sm {
  font-size: 16px;
  letter-spacing: 1.6px;
  display: inline-block;
}
@media only screen and (min-width: 768px) {
  .resident__benefit-period .sm {
    font-size: 18px;
    letter-spacing: 1.8px;
  }
}
.resident__benefit-period .txt {
  font-size: 18px;
  letter-spacing: 1.8px;
  display: inline-block;
}
@media only screen and (min-width: 768px) {
  .resident__benefit-period .txt {
    font-size: 20px;
    letter-spacing: 2px;
  }
}
.resident__benefit-amount {
  font-size: 14px;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .resident__benefit-amount {
    line-height: 24px;
    text-align: start;
  }
}
@media only screen and (min-width: 992px) {
  .resident__benefit-amount {
    font-size: 16px;
    line-height: 16px;
  }
}
.resident__benefit-amount .highlight {
  background-image: linear-gradient(
    transparent 6px,
    var(--color-highlight-y) 9px
  );
  background-position-y: 22px;
}
.resident__benefit-amount .dot {
  position: relative;
}
.resident__benefit-amount .dot:after {
  content: "";
  width: 4px;
  height: 4px;
  background-color: var(--color-black);
  border-radius: 50%;
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
}
.resident__benefit-amount .md {
  font-size: 20px;
}
.resident__benefit-amount .num {
  font-size: 22px;
}
@media only screen and (min-width: 768px) {
  .resident__benefit-amount .num {
    font-size: 24px;
  }
}
.resident__savings {
  font-weight: 700;
  color: var(--color-white);
  background-color: var(--color-black);
  text-align: center;
  padding-block: 10px;
  font-size: 22px;
  letter-spacing: 2.2px;
  line-height: 17px;
}
@media only screen and (min-width: 768px) {
  .resident__savings {
    font-size: 26px;
    letter-spacing: 2.6px;
    line-height: 20px;
  }
}
.resident__savings .num {
  font-size: 26px;
  letter-spacing: 2.6px;
}
@media only screen and (min-width: 768px) {
  .resident__savings .num {
    font-size: 30px;
    letter-spacing: 3px;
  }
}
.resident__savings .ylw {
  color: var(--color-highlight-y);
}
.resident__savings-yen {
  background-color: var(--color-white);
  color: var(--color-black);
  font-family: var(--font-noto-sans-jp);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: 30px;
  text-align: center;
}
.resident__savings-yen .text {
  font-size: 40px;
  font-weight: 700;
  line-height: 44px;
  width: fit-content;
  text-align: center;
  background-image: linear-gradient(
    transparent 18px,
    var(--color-highlight-y) 18px
  );
  background-position-y: 45px;
}
.resident__savings-yen .num {
  font-size: 60px;
  display: inline-block;
}
.resident__subheading.note {
  text-align: start;
  margin-top: 15px;
}
.resident__cta {
  position: relative;
  width: 100%;
  height: 312px;
}

.resident__cta-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: inset(0);
}

.resident__cta-image {
  background-image: url(../img/lazy-load/solar-power/resident-cta-sp.webp);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  position: fixed;
  top: 0;
  left: 0;
}
@media only screen and (min-width: 768px) {
  .resident__cta {
    height: 449px;
  }
  .resident__cta-image {
    background-image: url(../img/lazy-load/solar-power/resident-cta.webp);
  }
}
.resident__cta-content {
  position: absolute;
  top: 9.28%;
  left: 4%;
}
@media only screen and (min-width: 768px) {
  .resident__cta-content {
    top: 12%;
    left: 5%;
  }
}
@media only screen and (min-width: 992px) {
  .resident__cta-content {
    top: 22.27%;
    left: 8.54%;
  }
}
.resident__cta-title {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
@media only screen and (min-width: 768px) {
  .resident__cta-title {
    gap: 10px;
  }
}
@media only screen and (min-width: 992px) {
  .resident__cta-title {
    gap: 20px;
  }
}
.resident__cta-ttl {
  color: var(--color-white);
  font-size: 20px;
  font-weight: 700;
  line-height: 35px;
  letter-spacing: 2px;
  background: var(--color-black);
  width: fit-content;
  padding: 1px 10px;
}
@media only screen and (min-width: 768px) {
  .resident__cta-ttl {
    font-size: 24px;
    padding: 5px 10px;
    letter-spacing: 3.6px;
    line-height: 30px;
  }
}
@media only screen and (min-width: 992px) {
  .resident__cta-ttl {
    font-size: 36px;
    padding: 5px 19px;
    letter-spacing: 3.6px;
    line-height: 52px;
  }
}
.resident__cta-ttl .ylw {
  color: var(--color-highlight-y);
}
.resident__cta-subtitle {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 15px;
}
@media only screen and (min-width: 768px) {
  .resident__cta-subtitle {
    margin-top: 10px;
    gap: 10px;
  }
}
@media only screen and (min-width: 992px) {
  .resident__cta-subtitle {
    margin-top: 30px;
    gap: 10px;
  }
}
.resident__cta-subttl {
  font-family: "Source Sans 3";
  font-size: 13px;
  font-weight: 700;
  line-height: 21px;
  letter-spacing: 1.8px;
  background-color: var(--color-white);
  width: fit-content;
  padding: 2px 15px;
}
@media only screen and (min-width: 768px) {
  .resident__cta-subttl {
    font-size: 18px;
    padding: 6px 15px;
    line-height: 29px;
  }
}
.resident__bottom {
  background-image: url("../img/lazy-load/solar-power/resident-bottom-bg.webp");
  background-color: #f0f0f0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: auto;
}
.resident__storage-wrap {
  max-width: 1200px;
  margin-inline: auto;
  width: 100%;
  padding: 29px 18px 20px 20px;
  background: var(--color-white);
  margin-top: 20px;
}
@media only screen and (min-width: 768px) {
  .resident__storage-wrap {
    padding: 29px 35px 39px;
    margin-top: 60px;
  }
}
.resident__storage-wrap:last-of-type {
  margin-top: 20px;
}
@media only screen and (min-width: 768px) {
  .resident__storage-wrap:last-of-type {
    margin-top: 40px;
    padding-inline: 58px 64px;
  }
}
.resident__storage {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  justify-content: center;
}
@media only screen and (min-width: 768px) {
  .resident__storage {
    flex-direction: row;
    gap: 18px;
  }
}
.resident__storage-battery {
  color: var(--color-white);
  font-size: 16px;
  font-weight: 700;
  line-height: 23px;
  letter-spacing: 1.6px;
  background: var(--color-black);
  width: fit-content;
  padding: 4px 5px;
}
@media only screen and (min-width: 768px) {
  .resident__storage-battery {
    font-size: 28px;
    letter-spacing: 2.8px;
    line-height: 41px;
    padding: 5px 20px;
  }
}
.resident__storage-cross {
  width: 15px;
}
@media only screen and (min-width: 768px) {
  .resident__storage-cross {
    width: 29px;
  }
}
.resident__storage-benefits {
  color: var(--color-black);
  font-size: 18px;
  font-weight: 700;
  line-height: 26px;
  letter-spacing: 1.8px;
}
@media only screen and (min-width: 768px) {
  .resident__storage-benefits {
    font-size: 36px;
    letter-spacing: 3.6px;
    line-height: 52px;
  }
}
.resident__storage-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  margin-top: 30px;
}
@media only screen and (min-width: 768px) {
  .resident__storage-box {
    margin-top: 63px;
    flex-direction: row;
    align-items: stretch;
  }
}
.resident__storage-col {
  position: relative;
  width: 100%;
  border-radius: 10px;
  border: 2px solid var(--color-black);
  background: var(--color-white2);
  min-height: 130px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-block: 38px 20px;
}
@media only screen and (min-width: 768px) {
  .resident__storage-col {
    width: calc(100% / 2 - 15px);
    min-height: 170px;
  }
}
.resident__storage-img {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -25px;
  width: 50px;
}
@media only screen and (min-width: 768px) {
  .resident__storage-img {
    width: 70px;
    top: -35px;
  }
}
.resident__rent-wrap {
  background: var(--color-white2);
  padding: 22.5px;
  margin-block: 15px 20px;
}
@media only screen and (min-width: 768px) {
  .resident__rent-wrap {
    padding: 40px;
    margin-block: 24px;
  }
}
.resident__rent-ttl {
  text-align: center;
  font-family: var(--font-noto-sans-jp);
  font-size: 24px;
  font-weight: 700;
  line-height: 18px;
  margin-bottom: 20px;
}
@media only screen and (min-width: 768px) {
  .resident__rent-ttl {
    font-size: 40px;
    line-height: 29px;
    margin-bottom: 40px;
  }
}
.resident__rent-subttl {
  font-family: var(--font-noto-sans-jp);
  font-size: 80px;
  font-weight: 700;
  line-height: 59px;
  text-align: center;
  background-image: linear-gradient(
    transparent 24px,
    var(--color-highlight-y) 18px
  );
  background-position-y: 0px;
  max-width: max-content;
  width: 100%;
  margin-inline: auto;
}
@media only screen and (min-width: 768px) {
  .resident__rent-subttl {
    max-width: 380px;
    font-size: 130px;
    line-height: 101px;
    background-image: linear-gradient(
      transparent 50px,
      var(--color-highlight-y) 14px
    );
    background-position-y: 0px;
  }
}
.resident__rent-subttl .sm {
  font-family: var(--font-noto-sans-jp);
  font-size: 64px;
  line-height: 0;
  display: inline-block;
}
@media only screen and (min-width: 768px) {
  .resident__rent-subttl .sm {
    font-size: 100px;
  }
}
.resident__rent-note {
  text-align: center;
  font-family: var(--font-noto-sans-jp);
  font-size: 12px;
  font-weight: 500;
  line-height: 13px;
}
@media only screen and (min-width: 768px) {
  .resident__rent-note {
    font-size: 16px;
    line-height: 12px;
  }
}
.resident__storage-title {
  color: var(--color-black);
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  line-height: 30px;
  letter-spacing: 1px;
  margin-bottom: 5px;
}
@media only screen and (min-width: 768px) {
  .resident__storage-title {
    font-size: 24px;
    letter-spacing: 1.2px;
    line-height: 36px;
  }
}
.resident__storage-text {
  color: var(--color-black);
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  line-height: 27px;
  letter-spacing: 0.9px;
}
@media only screen and (min-width: 768px) {
  .resident__storage-text {
    font-size: 20px;
    letter-spacing: 1px;
    line-height: 30px;
  }
}
.resident__storage-smltxt {
  display: block;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.6px;
  font-family: var(---font-noto-sans-jp);
  text-align: center;
  margin-top: 10px;
}
@media only screen and (min-width: 768px) {
  .resident__storage-smltxt {
    font-size: 16px;
    letter-spacing: 0.8px;
    line-height: 24px;
    margin-top: 0;
  }
}
.resident__swiper {
  padding-block: 30px 60px;
}
@media only screen and (min-width: 768px) {
  .resident__swiper {
    padding-block: 60px 100px;
  }
}
.resident__swiper .swiper-wrapper {
  transition-timing-function: linear !important;
  align-items: center;
}
.resident__swiper .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
}

.resident__moreinformation {
  max-width: 350px;
  width: 100%;
  margin-inline: auto;
  display: block;
  padding-top: 20px;
  font-family: var(--font-lato);
  font-size: 16px;
  font-weight: 700;
  line-height: 19px;
  letter-spacing: 0.8px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  color: #000;
  transition: all 0.3s ease;
}
.resident__moreinformation:hover {
  opacity: 0.8;
}
.resident__moreinformation img {
  width: 30px;
}
@media only screen and (min-width: 768px) {
  .resident__moreinformation img {
    width: 40px;
  }
}
/* resident benefit */
/* profitability */
.overview__box-content.roi {
  padding: 10px 10px 20px;
}
@media only screen and (min-width: 768px) {
  .overview__box-content.roi {
    padding: 20px 53px 30px;
  }
}
.roi__block .overview__box-ttl .xs {
  font-size: 12px;
  letter-spacing: 1.2px;
}
@media only screen and (min-width: 768px) {
  .roi__block .overview__box-ttl .xs {
    font-size: 16px;
  }
}
.roi .c-heading-primary {
  margin-bottom: 30px;
}
@media only screen and (min-width: 768px) {
  .roi .c-heading-primary {
    margin-bottom: 76px;
  }
}
.roi__box-row {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 40px;
  padding-top: 30px;
}
@media only screen and (min-width: 768px) {
  .roi__box-row {
    gap: 30px;
  }
}
@media only screen and (min-width: 992px) {
  .roi__box-row {
    flex-direction: row;
  }
}
.roi__box-col {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 2px solid var(--color-black);
  border-radius: 10px;
  background-color: var(--color-white);
  position: relative;
  padding-block: 30px 15px;
}
@media only screen and (min-width: 768px) {
  .roi__box-col {
    min-height: 154px;
    padding-block: 38px 19px;
  }
}
@media only screen and (min-width: 992px) {
  .roi__box-col {
    width: calc(100% / 2 - 15px);
  }
}
.roi__box-icons {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  left: 50%;
  transform: translateX(-50%);
  top: -30px;
}
.roi__box-icons img {
  width: 50px;
  height: 50px;
}
@media only screen and (min-width: 768px) {
  .roi__box-icons img {
    width: 60px;
    height: 60px;
  }
}
.roi__item-titlewrap {
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
@media only screen and (min-width: 768px) {
  .roi__item-titlewrap {
    gap: 15px;
  }
}
.roi__item-title {
  background: var(--color-black);
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  color: var(--color-white);
  display: inline-block;
  padding-inline: 5px;
  padding-block: 3px;
}
@media only screen and (min-width: 768px) {
  .roi__item-title {
    font-size: 16px;
    line-height: 29px;
    padding-inline: 10px;
    padding-block: 0px;
  }
}
.roi__item-count {
  background: var(--color-white);
  color: var(--color-black);
  font-size: 18px;
  font-weight: 700;
  line-height: 26px;
  display: inline-block;
}
@media only screen and (max-width: 767px) {
  .roi__item-count .sm {
    font-size: 16px;
  }
}
.roi__item-price {
  font-size: 28px;
  font-weight: 700;
  line-height: 30px;
  margin-top: 10px;
}
.roi__item-note {
  font-size: 14px;
  font-weight: 500;
  line-height: 23px;
}
@media only screen and (min-width: 768px) {
  .roi__item-note {
    font-size: 16px;
    line-height: 24px;
  }
}
.roi__total {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-block: 23.5px;
  background: #fff;
  margin-top: 20px;
}
@media only screen and (min-width: 768px) {
  .roi__total {
    margin-top: 30px;
    padding-block: 30px;
  }
}
.roi__total-text {
  text-align: center;
  font-size: 30px;
  font-weight: 700;
  line-height: 24px;
  background-image: linear-gradient(
    transparent 18px,
    var(--color-highlight-y) 18px
  );
  background-position-y: 84px;
}
@media only screen and (min-width: 768px) {
  .roi__total-text {
    background-image: linear-gradient(
      transparent 18px,
      var(--color-highlight-y) 18px
    );
    background-position-y: 90px;
  }
}
.roi__total-amount {
  font-size: 50px;
  line-height: 43px;
}
@media only screen and (min-width: 768px) {
  .roi__total-amount {
    font-size: 60px;
    line-height: 46px;
  }
}
.roi__total-amount .sm {
  font-size: 30px;
  font-weight: 700;
  line-height: 0;
  display: inline-block;
}
@media only screen and (min-width: 768px) {
  .roi__total-amount .sm {
    font-size: 40px;
  }
}
.roi__disclaimer {
  font-size: 12px;
  font-weight: 400;
  line-height: 14px;
  margin-top: 15px;
}
@media only screen and (min-width: 768px) {
  .roi__disclaimer {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    margin-top: 20px;
  }
}
.roi__payback-row {
  display: flex;
  flex-wrap: wrap;
  flex-direction: flex;
  justify-content: center;
  align-items: center;
  gap: 18px 5px;
  margin-bottom: 20px;
}
@media only screen and (min-width: 768px) {
  .roi__payback-row {
    gap: 40px;
  }
}
.roi__payback-col {
  width: calc(100% / 2 - 5px);
  background: var(--color-white);
  border-radius: 0px 0px 10px 10px;
}
@media only screen and (min-width: 768px) {
  .roi__payback-col {
    width: calc(100% / 4 - 30px);
  }
}
.roi__payback-year {
  color: var(--color-white);
  font-family: var(--font-noto-sans-jp);
  font-size: 18px;
  font-weight: 700;
  padding-block: 10px;
  text-align: center;
  background: var(--color-black);
  position: relative;
  line-height: 13px;
}
@media only screen and (min-width: 768px) {
  .roi__payback-year {
    font-size: 20px;
    line-height: 15px;
  }
}
.roi__payback-year:after {
  content: "";
  position: absolute;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 12px solid var(--color-black);
  left: 50%;
  transform: translateX(-50%);
  bottom: -12px;
}
.roi__payback-amount {
  font-size: 24px;
  font-weight: 700;
  line-height: 35px;
  text-align: center;
  margin-top: 17.5px;
}
@media only screen and (min-width: 768px) {
  .roi__payback-amount {
    font-size: 26px;
    line-height: 38px;
  }
}
.roi__payback-label {
  text-align: center;
  font-family: var(--font-noto-sans-jp);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  margin-bottom: 13px;
}
@media only screen and (min-width: 768px) {
  .roi__payback-label {
    font-size: 18px;
    line-height: 26px;
  }
}
.roi__summary {
  background: #fff;
  margin-top: 40px;
  max-width: 970px;
  width: 100%;
  margin-inline: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-block: 20px;
}
@media only screen and (min-width: 768px) {
  .roi__summary {
    padding-block: 28px 23px;
  }
}
.roi__summary-text {
  text-align: center;
  font-size: 26px;
  font-weight: 700;
  background-image: linear-gradient(
    transparent 20px,
    var(--color-highlight-y) 9px
  );
  background-position-y: 48px;
  width: fit-content;
  line-height: 43px;
}
@media only screen and (min-width: 768px) {
  .roi__summary-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.roi__summary-text .big {
  font-size: 50px;
  font-weight: 700;
  display: inline-block;
  line-height: 43px;
}
@media only screen and (min-width: 768px) {
  .roi__summary-text .big {
    font-size: 60px;
    line-height: 46px;
  }
}
.roi__summary-text .md {
  font-size: 30px;
  font-weight: 700;
  display: inline-block;
}
@media only screen and (min-width: 768px) {
  .roi__summary-text .md {
    font-size: 40px;
  }
}
.roi__block .overview__box-content {
  padding: 20px 10px;
}
@media only screen and (min-width: 768px) {
  .roi__block .overview__box-content {
    padding: 40px 30px;
  }
}
.roi__block .overview__box-content.roi {
  padding: 10px 10px 20px;
}
@media only screen and (min-width: 768px) {
  .roi__block .overview__box-content.roi {
    padding: 20px 53px 30px;
  }
}
@media only screen and (max-width: 767px) {
  .roi__payback-image {
    margin-top: 20px;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    padding-bottom: 10px;
  }
  .roi__payback-image img {
    display: inline-block;
    max-width: none;
  }
  .roi__payback-image::-webkit-scrollbar {
    height: 5px;
  }
  .roi__payback-image::-webkit-scrollbar-track {
    background: var(--color-white);
  }
  .roi__payback-image::-webkit-scrollbar-thumb {
    background: var(--color-gray3);
  }
}