@charset "utf-8";

@media screen, print {
  :root {
    --clr-green-bg: #d2ebb7;
    --clr-green01: #43a350;
    --clr-green02: #29a384;
    --clr-green03: #9ac24a;
    --clr-green04: #609e46;
    --clr-green05: #4dab3f;
    --clr-green06: #5d7331;
    --clr-green07: #63ba97;
  }

  body {
    background-color: var(--clr-green-bg); /* override */
  }

  header {
    background-color: transparent; /* override */
  }

  /*** index page ***/
  .green-index {
    #cont-kv {
      aspect-ratio: 25 / 14;
      background: url(../img/green/green_kv_bg.png) no-repeat;
      background-size: contain;
      display: grid;
      height: auto;
      padding: 0; /* reset */
      place-items: center;
      width: 100%;
    }

    .page-title {
      width: 90%;
    }

    .green-title {
      aspect-ratio: 150 / 61;
      width: 100%;
    }

    .cont-lead {
      margin-bottom: 5rem;
    }

    .lead-para {
      color: var(--clr-green);
      font-family: var(--ff-sanserif);
    }
  }
  /*** index page ***/

  .green-title {
  }

  #cont-kv {
    background-color: transparent; /* override */
    gap: 3rem;
    padding-bottom: 0; /* reset */
  }

  .page-title {
    border-bottom: none; /* reset */
    color: #00942c;
    font-family: var(--ff-sanserif);
    font-weight: var(--fw-bold);
    padding-bottom: 0; /* reset */
  }

  .kv-img {
    aspect-ratio: 2/1;
    border-radius: .5rem; /* override */
    height: auto;
  }

  .green-desc {
    margin-left: auto;
    margin-right: auto;
    margin: 0 auto 100px;
    margin: 0 auto 150px; /* vw960 */
    margin: 0 auto clamp(10rem, 8.55vw + 6.79rem, 15rem);
    width: 84vw;
  }

  .green-pglist {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(2, 45%);
    justify-content: space-around;
  }

  .green-pgimg {
    aspect-ratio: 1/1;
    border-radius: 50%;
  }

  .green-pgfig {
    position: relative;
  }

  figure.green-pgfig::after {
    aspect-ratio: 1/1;
    background-color: rgba(26,65,38,.3);
    border-radius: 50%;
    content: '';
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
  }

  .green-figcap {
    align-items: center;
    bottom: 0;
    color: #fff;
    display: flex;
    font-family: var(--ff-sanserif);
    font-weight: var(--fw-bold);
    justify-content: center;
    left: 0;
    letter-spacing: .1rem;
    line-height: 1.4;
    margin: auto;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
    z-index: 1;
  }

  span.green-pgimg {
    display: block;
  }

  .green-clr01 {
    background-color: var(--clr-green01);
  }

  .green-clr02 {
    background-color: var(--clr-green02);
  }

  .green-clr03 {
    background-color: var(--clr-green03);
  }

  .green-clr04 {
    background-color: var(--clr-green04);
  }

  .green-clr05 {
    background-color: var(--clr-green05);
  }

  .green-clr06 {
    background-color: var(--clr-green06);
  }

  .green-clr07 {
    background-color: var(--clr-green07);
  }
}

/** SP splg **/
@media screen and (min-width: 480px) {
}

/*** TB ***/
@media screen and (min-width: 640px) {
 /*** index page ***/
  .green-index {
    #cont-kv {
      /* align with history page */
      height: 390px;
      height: 435px;
      height: calc(35.2vw + 16.5rem);

      background-position: left 1rem center;
      background-size: 85%;
    }

    .page-title {
      width: 420px;
      width: 500px; /* vw768 */
      width: calc(62.5vw + 2rem); 
    }

    #contArea {
      padding-top: 40px;
      padding-top: 20px; /* vw768 */
      padding-top: calc(-15.63vw + 14rem);
    }
  }
 /*** index page ***/
 
  #cont-kv {
    gap: 2.5rem;
    height: 367.4px;
    height: 419.47px;
    height: calc(41vw + 10.5rem);
    padding-top: 5rem;
    width: 100%;
  }

  .green-title {
    width: 300px;
    width: 320px;
    width: calc(15.6vw + 20rem);
  }

  .page-title {
    left: auto; /* reset */
    position: relative; /* reset */
    top: auto; /* reselt */
  }

  .kv-img {
    margin-top: 0; /* reset */
    width: 360px;
    width: 450px;
    width: calc(70.3vw - 9rem);
  }

  #contArea {
    padding-bottom: 10rem; /* override */
    padding-top: 0; /* reset */
  }

  .cont-block + .cont-block {
    margin-top: 6rem; /* override */
  }

  .green-desc {
    width: 340px;
    width: 410px;
    width: calc(54.7vw - 1rem);
  }

  .green-pglist {
    gap: 3rem;
    grid-template-columns: repeat(3, 17rem);
    justify-content: normal; /* reset */
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
  }

  .green-figcap {
    font-size: 1.8rem;
  }
}

/*** iPad ***/
@media screen and (min-width: 768px) {
 /*** index page ***/
  .green-index {
    #cont-kv {
      /* align with history page */
      height: 465px;
      height: 552px;
      height: calc(45.3vw + 11.7rem);
    }

    .page-title {
      width: min(75%, 87rem);
      width: 500px;
      width: 650px; /* vw960 */
      width: calc(78.13vw - 10rem);
    }

    #contArea {
      padding-top: 0;
    }
  }
 /*** index page ***/

  #cont-kv {
    gap: 3rem;
    height: 450.59px;
    height: 536.55px;
    height: calc(45vw + 10.5rem);
    padding-top: 6.5rem;
  }

  .green-title {
    width: 350px;
    width: 400px;
    width: calc(26vw + 15rem);
  }

  .page-title {
    font-size: 26px;
    font-size: 30px;
    font-size: calc(2.08vw + 1rem);
    letter-spacing: .3rem;
  }

  .kv-img {
    width: 450px;
    width: 600px;
    width: calc(78.1vw - 15rem);
  }

  .cont-block + .cont-block {
    margin-top: 7rem;
  }

  .green-para {
    line-height: 2;
  }

  .green-desc {
    width: 400px;
    width: 440px;
    width: calc(20.8vw + 24rem);
  }

  .green-pglist {
    gap: 30px;
    gap: 40px;
    gap: calc(5.21vw - 1rem);
    grid-template-columns: repeat(3, 170px);
    grid-template-columns: repeat(3, 200px);
    grid-template-columns: repeat(3, calc(15.6vw + 5rem));
  }

  .green-figcap {
    font-size: 20px;
  }
}

/*** PC ***/
@media screen and (min-width: 960px) {
 /*** index page ***/
  .green-index {
    #cont-kv {
      background-position: left 20px center;
      background-position: left 100px center; /* vw1280 */
      background-position: left calc(25vw - 22rem) center;
      background-size: 85%;

      height: 548px;
      height: 668px;
      height: calc(43.8vw + 12.8rem);
    }

    .page-title {
      width: 650px;
      width: 870px; /* vw1280 */
      width: calc(68.75vw - 1rem);
    }
  }
 /*** index page ***/

  #cont-kv {
    gap: 30px;
    gap: 35px;
    gap: calc(1.56vw + 1.5rem);
    height: 527.4px;
    height: 667.76px;
    height: calc(44vw + 10.5rem);
    padding-top: 6rem;
  }

  .green-title {
    width: 400px;
    width: 490px;
    width: calc(28.1vw + 13rem);
  }

  .page-title {
    font-size: 30px;
    font-size: 36px;
    font-size: calc(1.88vw + 1.2rem);
  }

  .kv-img {
    width: 600px;
    width: 800px;
    width: 62.5vw
  }

  #contArea {
    padding-bottom: 100px;
    padding-bottom: 150px;
    padding-bottom: calc(15.6vw - 5rem);
  }

  .cont-block + .cont-block {
    margin-top: 8rem;
  }

  .green-desc {
    font-size: 1.7rem;
    width: 460px;
    width: 600px;
    width: calc(43.8vw + 4rem);
  }

  .green-pglist {
    gap: 40px;
    gap: 60px;
    gap: calc(6.25vw - 2rem);
    grid-template-columns: repeat(3, 200px);
    grid-template-columns: repeat(3, 260px);
    grid-template-columns: repeat(3, calc(18.8vw + 2rem));
  }

  .green-figcap {
    font-size: 20px;
    font-size: 26px;
    font-size: calc(1.88vw + .2rem);
    letter-spacing: .2rem;
  }
}

/** PC pclg **/
@media screen and (min-width: 1280px) {
 /*** index page ***/
  .green-index {
    #cont-kv {
      background-position: center;
      background-size: contain;
      height: 73rem;
    }

    .page-title {
      width: 87rem;
    }

    #contArea {
      padding-top: 5rem;
    }
  }
 /*** index page ***/
  #cont-kv {
    gap: 4.5rem;
    height: 70.5rem;
    padding-top: 7.5rem;
    width: 100%;
  }

  .green-title {
    width: 49rem;
  }

  .page-title {
    font-size: 3.6rem;
  }

  .kv-img {
    width: 80rem;
  }

  #contArea {
    padding-bottom: 15rem;
  } 

  .cont-block + .cont-block {
    margin-top: 10rem;
  }

  .green-desc {
    width: 60rem;
  }

  .green-pglist {
    gap: 6rem;
    grid-template-columns: repeat(3, 26rem);
  }

  .green-figcap {
    font-size: 2.6rem;
  }

}

/*****************/
/***   Print   ***/
/*****************/
@media print {
}