/* 基本設定
/*--------------------*/
:root {
  --page-color1: #5EB85F;
  --page-color2: #007F54;
}

.pc{
  display: block;
}
@media screen and (max-width: 768px) {
  .pc{
    display: none;
  }
}
/* fv
/*--------------------*/


.fv__wrapper {
  margin-top: -12rem;
  position: relative;
}


@media screen and (max-width: 768px) {
  .fv__wrapper {
    margin-top: 0;
  }
}

.fv__image {
  max-width: 100%;
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 768px) {
  .fv__image {
    display: none;
  }
}

.sp__image {
  display: none;
}

@media screen and (max-width: 768px) {
  .sp__image {
    display: block;
    object-fit: cover;
  max-width: 100%;
  width: 100%;
  height: 100%;
  }
}

.fv__inner {
  position: absolute;
  z-index: 10;
  top: 61.3%;
  left: 0%;
  transform: translate(0%, -50%);
  width: 100%;
  padding: 0;
  margin: 0;
  text-align: left;
}

@media screen and (max-width: 768px) {
  .fv__inner {
    top: 52%;
    padding: 0;
  }
}


.fv__text {
    display: inline-block;
    color: #2B2A2A;
    text-align: left;
    font-family: "Zen Maru Gothic";
    font-size: 3.2rem;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    background-image: url(../img/coolnet/fv_txt-bg.png);
    background-position: right center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 1.968rem 5.514rem 1.768rem 5.9rem;
    margin-bottom: 5.064rem;
}

.fv__text span{
    display: inline-block;
    color: #FFF;
    text-align: left;
    font-family: "Noto Sans JP";
    font-size: 2rem;
    font-style: normal;
    font-weight: 700;
    line-height: 100%;
    border-radius: 3.6797rem;
    background: #2B2A2A;
    padding: 0.736rem 1.765rem 0.698rem 1.84rem;
    margin-right: 0.981rem;
}

@media screen and (max-width: 768px) {
  .fv__text {
    background-image: url(../img/coolnet/fv_txt-bg-sp.png);
    font-size: 1.8rem;
    padding: 1.078rem 2.79rem 0.967rem 2.3rem;
    margin-bottom: 20.955rem;
  }
  .fv__text span{
    font-size: 1.2rem;
    padding: 0.409rem 0.905rem 0.3rem 0.923rem;
    margin-right: 0.545rem;
  }
}

.fv__title {
  text-align: left;
  color: #222;
  font-family: "Zen Kaku Gothic New";
  font-size: 4rem;
  font-style: normal;
  font-weight: 700;
  margin-left: 21rem;
}
.fv__title span{
  text-align: left;
  display: inline-block;
  border: 2px solid #222;
  background: #FFF;
  padding: 1.8rem 0rem 1.8rem 2rem;
}
.fv__title span:nth-child(1){
  margin-bottom: 2.2rem;
}

@media screen and (max-width: 768px) {
  .fv__title {
    font-size: 2.4rem;
    margin-left: 3.5rem;
  }
  .fv__title span{
    padding: 0.869rem 0rem 1.144rem 1.216rem;
  }
.fv__title span:nth-child(1){
  margin-bottom: 1.348rem;
}
}

/* 「既存住宅における省エネ改修促進事業」について
/*--------------------*/
.coolnet-about {
  margin: 15rem 0 12.5rem;
}

@media screen and (max-width: 768px) {
  .coolnet-about {
    margin: 4.8rem 0 4.2rem;
  }
}
.coolnet-about__inner{
  margin: 0 auto;
  text-align: center;
  position: relative;
}
.coolnet-about__inner::before{
  content: "";
  background-image: url(../img/coolnet/fv__inner-before.png);
  background-size: cover;
  background-repeat: no-repeat;
  width: 15.6rem;
  height: 44.9rem;
  position: absolute;
  top: 7.4rem;
  left: 17%;
  z-index: 5;
}
.coolnet-about__inner::after{
  content: "";
  background-image: url(../img/coolnet/fv__inner-after.png);
  background-size: cover;
  background-repeat: no-repeat;
  width: 15.6rem;
  height: 44.9rem;
  position: absolute;
  top: 7.4rem;
  right: 17%;
  z-index: 5;
}

@media screen and (max-width: 768px) {
  .coolnet-about__inner::before,
  .coolnet-about__inner::after{
    display: none;
  }
}
.coolnet-about__title{
  color: #5EB85F;
  text-align: center;
  font-family: "Zen Maru Gothic";
  font-size: 4rem;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
  margin-bottom: 9.8rem;
  position: relative;
}

.coolnet-about__title::after{
  content: "";
  width: 23rem;
  height: 0.2rem;
  background-color:var(--page-color1);
  position: absolute;
  bottom: -5rem;
  left: 50%;
  transform: translateX(-50%);
}

@media screen and (max-width: 768px) {
  .coolnet-about__title{
    font-size: 2.4rem;
    line-height: 1.6;
    margin-bottom: 6.6rem;
  }
  .coolnet-about__title::after{
    width: 21rem;
    bottom: -3.2rem;
}
}
.coolnet-about__text{
  color: #000;
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: 1.8rem;
  font-style: normal;
  font-weight: 500;
  line-height: 300%;
}

.coolnet-about__text:nth-child(2){
  margin-bottom: 4.8rem;
}

@media screen and (max-width: 768px) {
  .coolnet-about__text{
    font-size: 1.5rem;
    line-height: 250%;
  }
  .coolnet-about__text:nth-child(2){
    margin-bottom: 4rem;
  }
}
.coolnet-about__btn{
  margin-top: 15.1rem;
  background-color: var(--page-color2);
  display: inline-block;
  -webkit-transition: all .3s;
  transition: all .3s;
  border-radius: 0.8rem;
}

.coolnet-about__btn:hover {
  transform: scale(1.1,1.1);
}


.coolnet-about__btn a{
  color: #FFF;
  text-align: center;
  font-family: "Zen Kaku Gothic New";
  font-size: 2.4rem;
  font-style: normal;
  font-weight: 700;
  line-height: 140%;
  letter-spacing: 0.3rem;
  display: flex;
}

.coolnet-about__btn a span{
  padding: 2.6rem 2.2rem;
}

.coolnet-about__btn a .icon{
  width:1.5993rem;
  height:2.7961rem;
  margin: auto 2.4rem auto 0;
}

@media screen and (max-width: 768px) {
  .coolnet-about__btn{
    margin-top: 4.8rem;
    border-radius: 0.5764rem;
  }
  .coolnet-about__btn a{
    font-size: 1.6rem;
  }
  .coolnet-about__btn a span{
    padding: 1rem 3.2rem 1rem 5.448rem;
  }
  .coolnet-about__btn a .icon{
    width:1.2rem;
    height:2.1rem;
    margin: auto 2.1rem auto 0;
  }
}

/* 事業の詳細情報
/*--------------------*/
.coolnet-links{
  padding: 0 0 22rem;
  position: relative;
}

.coolnet-links::after{
  content: "";
  display: block;
  background-image: url(../img/coolnet/footer__img.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center bottom;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 65.4rem;
  height: 7.2rem;
}
@media (max-width: 768px) {
.coolnet-links::after{
  width: 32.7rem;
  height: 3.6rem;
}
}

.coolnet-links__inner{
  max-width: 105rem;
  margin: 0 auto;
}

.coolnet-links__list{
  display: grid;
  justify-content: center;
  align-items: center;
  gap: 5rem;
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 768px) {
.coolnet-links{
  padding: 0 0 15.18rem;
}
  .coolnet-links__list {
    grid-template-columns: 1fr;
  }
}

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

.coolnet-links__item a{
  width: 50rem;
  border-radius: 8rem;
  background: #F5F9FA;
  padding: 7.8rem 0 6.2rem;
  text-align: center;
  -webkit-transition: all .3s;
  transition: all .3s;
}

.coolnet-links__item a:hover {
  transform: scale(1.1,1.1);
}

@media (max-width: 768px) {
.coolnet-links__item a{
  width: 34.5rem;
  border-radius: 8rem;
  background: #F5F9FA;
  padding: 5.382rem 0 4.278rem;
}
}

.coolnet-links__item a img{
  margin-bottom: 4.8rem;
}

.coolnet-links__text{
  color: #000;
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: 2.4rem;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  margin-bottom: 3.2rem;
}

@media (max-width: 768px) {
.coolnet-links__item a img{
  margin-bottom: 3.312rem;
}
  .coolnet-links__text{
    font-size: 1.6rem;
    margin-bottom: 2.4rem;
  }
}
.coolnet-links__link{
  color: #fff;
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: 1.8rem;
  font-style: normal;
  font-weight: 500;
  line-height: 100%;
  background-color: var(--page-color2);
  border-radius: 7rem;
  width: 25.6rem;
  height: 5.7rem;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .coolnet-links__link{
    font-size: 1.5rem;
    width: 18.4rem;
    height: 4.1rem;
  }
}
.coolnet-links__link::after {
  content: "";
  display: inline-block;
  width: 0.8rem;
  height: 1.4rem;
  margin-left: 5.3rem;
  background-repeat: no-repeat;
  background-size: contain;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='14' viewBox='0 0 8 14' fill='none'%3E%3Cpath d='M1.0085 14C0.809082 14 0.61413 13.9407 0.448332 13.8298C0.282535 13.7189 0.153308 13.5612 0.0769994 13.3767C0.000690735 13.1923 -0.0192585 12.9892 0.0196346 12.7934C0.0585276 12.5976 0.154514 12.4177 0.295503 12.2765L5.56562 7.00018L0.295503 1.72373C0.106346 1.53442 4.72621e-05 1.27767 1.57554e-08 1.00989C-4.72306e-05 0.742106 0.106166 0.485299 0.295257 0.295916C0.484347 0.106534 0.740855 4.73853e-05 1.00832 1.58095e-08C1.27578 -4.73537e-05 1.53228 0.106354 1.72144 0.29567L7.7045 6.28584C7.79818 6.3796 7.87254 6.49091 7.92325 6.61344C7.97395 6.73596 8 6.86732 8 6.99994C8 7.13256 7.97395 7.2638 7.92325 7.38632C7.87254 7.50884 7.79818 7.62027 7.7045 7.71403L1.72144 13.7042C1.62792 13.7981 1.51678 13.8726 1.39442 13.9233C1.27207 13.9741 1.14095 14.0001 1.0085 14Z' fill='%23ffffff'/%3E%3C/svg%3E");

  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 5.3rem;
}

@media (max-width: 768px) {
  .coolnet-links__link::after {
    /* width: 0.576rem;
    height: 1.008rem; */
    right: 3rem;
  }
}
.coolnet-links__img1{
  width: 36.6rem;
  height: 25.8rem;
  margin-top: 0.9rem;
}

.coolnet-links__img2{
  width: 33.3rem;
  height: 24.7rem;
  margin-top: 2rem;
}
.coolnet-links__img3{
  width: 24.7rem;
  height: 34.7rem;
}
.coolnet-links__img4{
  width: 23.6rem;
  height: 34.3rem;
  margin-top: 0.4rem;
}


@media (max-width: 768px) {
  .coolnet-links__img1{
    width: 25.254rem;
    height: 17.802rem;
    margin-top: 0.621rem;
  }

  .coolnet-links__img2{
    width: 22.977rem;
    height: 17.043rem;
    margin-top: 1.38rem;
  }
  .coolnet-links__img3{
    width: 17.043rem;
    height: 23.667rem;
  }
  .coolnet-links__img4{
    width: 16.284rem;
    height: 23.26rem;
    margin-top: 0.276rem;
  }
}