@charset "UTF-8";

/* ---------------
共通
 --------------- */
:root {
  --gn:#40b15d;
  --lgn:#e8f3dd;
  --dgn:#028824;
  --or:#f08c1e;
}

.note-h2{
  text-align: center;
  font-size: 2.4rem;
  font-weight: bold;
}

/* CTA SP
-------------------------*/
.cta {
  background: var(--dgn);
  padding: 5rem 1.5rem;
}
.cta .cta-in {
  max-width: 60rem;
  margin: 0 auto;
}
.cta .cta-lead {
  margin-bottom: 4.5rem;
}
.cta li {
  margin-bottom: 1rem;
}
.cta li a{
  opacity: 1;
}
.cta li:first-child a img,
.cta li:nth-child(2) a img{
  transition-duration: .2s;
}
.cta li:first-child a:hover img,
.cta li:nth-child(2) a:hover img{
   transform: scale(1.1);
 }
.cta li:first-child {
  position: relative;
}
.cta li:first-child span {
  display: block;
  width: 5.5rem;
  height: 5.5rem;
  position: absolute;
  top: -2.7rem;
  left: -0.7rem;
}
.cta .cta-note {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1rem;
  color: #fff;
  font-weight: 400;
  letter-spacing: 0.05em;
  line-height: 1.5;
}



/* FV下 CTA-head SP
----------------------------------- */
.cta-head {
  background: var(--dgn);
  padding: 5rem 1.5rem;
  position: relative;
}
.cta-head-in {
  max-width: 60rem;
  margin: 0 auto;
}
.cta-head-in ul{
  position: static;
}
.cta-head-in ul li {
  margin-bottom: 1rem;
}
.cta-head-in ul li a{
  opacity: 1;
}
.cta-head-in ul li:first-child a img,
.cta-head-in ul li:nth-child(2) a img{
  border-radius: 0;
  transition-duration: .2s;
}
.cta-head-in ul li:first-child a:hover img,
.cta-head-in ul li:nth-child(2) a:hover img{
    transform: scale(1.1);
 }

.cta-head-in ul li:first-child {
  position: relative;
}
.cta-head-in ul li:first-child span {
  display: block;
  width: 5.5rem;
  height: 5.5rem;
  position: absolute;
  top: -2.7rem;
  left: -0.7rem;
}
.cta-head-note {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1rem;
  color: #fff;
  font-weight: 400;
  letter-spacing: 0.05em;
  line-height: 1.5;
}


/*----------------------------------------------------
SP / タブレット用 500- 
----------------------------------------------------*/
@media screen and (min-width:500px) {

  /* CTA 500
  -------------------------*/
  .cta li:first-child span {
    width: 7.5rem;
    height: 7.5rem;
    top: -3.7rem;
    left: -0.7rem;
  }

}

/*----------------------------------------------------
PC 1000 
----------------------------------------------------*/
@media screen and (min-width:1000px) {

  .note-h2{
    font-size: 3.2rem;
  }

 /* CTA 1000
  -------------------------*/
  .cta .cta-in {
    max-width: 143rem;
    padding: 0 1.5rem;
    margin: 0 auto;
  }
  .cta .cta-lead {
    max-width: 86rem;
    margin: 0 auto 2.5rem;
  }
  .cta ul {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
  }
  .cta li {
    width: 33%;
  }
  .cta li:first-child span {
    width: 5rem;
    height: 5rem;
    top: -2.5rem;
    left: -1rem;
  }

 /* FV-CTA 1000
  ----------------------------------- */
  .cta-head {
    padding: 2rem 1.5rem;
  }
  .cta-head-in {
    max-width: 143rem;
    padding: 0 1.5rem;
    margin: 0 auto;
    position: relative;
  }
  .cta-head ul {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
  }
  .cta-head ul li {
    width: 33%;
  }
  .cta-head ul li:first-child span {
    width: 6rem;
    height: 6rem;
    top: -3rem;
    left: -2rem;
  }



}

/*----------------------------------------------------
PC 1000 
----------------------------------------------------*/
@media screen and (min-width:1200px) {

  /* CTA 1200
  -------------------------*/
  .cta li:first-child span {
    width: 6.5rem;
    height: 6.5rem;
    top: -3.2rem;
    left: -2rem;
  }

  /* FV下 CTA-head 1200
  ----------------------------------- */
  .cta-head li:first-child span {
    width: 6.5rem;
    height: 6.5rem;
    top: -3.2rem;
    left: -2rem;
  }

}


/*----------------------------------------------------
PC 1000 
----------------------------------------------------*/
@media screen and (min-width:1400px) {

  /* CTA 1400
  -------------------------*/
  .cta li:first-child span {
    width: 8.5rem;
    height: 8.5rem;
    top: -4.2rem;
    left: -2.5rem;
  }

  /* FV下 CTA-head 1400
  ----------------------------------- */
  .cta-head ul li:first-child span {
    width: 8.5rem;
    height: 8.5rem;
    top: -4.2rem;
    left: -2.5rem;
  }


}