@charset "UTF-8";

/* =========================== */
/* ページ内共通設定 */
/* =========================== */
body {
    background-color: #fff;
}



@media screen and (min-width: 750px) {
    main {
        padding-top: calc(90/var(--device-width) *var(--main-width));
        box-sizing: border-box;
    }
}

/* =========================== */
/*  top */
/* =========================== */
div.blue {
    background-color: #006BC6;
    width: 100%;
    height: calc(80/var(--device-width) *var(--main-width));
}

div.red {
    background-color: #F04E6E;
    width: 100%;
    height: calc(90/var(--device-width) *var(--main-width));
}

#fv figure {
    width: 95%;
    margin: 0 0 calc(60/var(--device-width) *var(--main-width)) auto;
}

#fv h2 {
    box-sizing: border-box;
    border-bottom: solid 1px #c0c0c0;
    margin: 0 calc(40 / var(--device-width) * var(--main-width));
    padding-bottom: calc(55 / var(--device-width) * var(--main-width));
    margin-bottom: calc(160 / var(--device-width) * var(--main-width));
}

#fv h2 span {
    display: block;
}

#fv h2 span:first-of-type {
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-size: calc(26/var(--device-width) *var(--main-width));
    font-weight: bold;
    color: #000;
    margin-bottom: 1em;
}

#fv h2 span:last-of-type {
    font-family: "Boldonse", system-ui;
    font-size: calc(60 / var(--device-width) * var(--main-width));
    color: #006BC6;
    font-weight: bold;
    line-height: 1.5;
}


@media screen and (min-width: 750px) {
    div.blue {
        display: none;
    }

    div.red {
        background-color: #F04E6E;
        width: 88%;
        height: calc(95 / var(--device-width) * var(--main-width));
    }

    #fv figure {
        width: 92%;
        margin: calc(-65 / var(--device-width) * var(--main-width)) 0 calc(47 / var(--device-width) * var(--main-width)) auto;
    }

    #fv h2 {
        margin: 0 calc(100 / var(--device-width) * var(--main-width));
        padding-bottom: calc(40 / var(--device-width) * var(--main-width));
        margin-bottom: calc(120 / var(--device-width) * var(--main-width));
    }

    #fv h2 span:first-of-type {
        font-size: calc(20 / var(--device-width) * var(--main-width));
    }

    #fv h2 span:last-of-type {
        font-size: calc(50 / var(--device-width) * var(--main-width));
    }

    #fv h2 span:last-of-type br {
        display: none;
    }
}

/* =========================== */
/*  environmental  */
/* =========================== */
#environmental .intro {
    padding: 0 calc(41 / var(--device-width) * var(--main-width));
    box-sizing: border-box;
    margin-bottom: calc(40 / var(--device-width) * var(--main-width));
    font-size: calc(28 / var(--device-width) * var(--main-width));
    line-height: 1.96;
}

#environmental .policy {
    position: relative;
    padding: calc(60 / var(--device-width) * var(--main-width)) calc(50 / var(--device-width) * var(--main-width)) 0 calc(38 / var(--device-width) * var(--main-width));
    box-sizing: border-box;
    margin-bottom: calc(239 / var(--device-width) * var(--main-width));
}

#environmental .policy::after {
    position: absolute;
    top: calc(88 / var(--device-width) * var(--main-width));
    left: 0;
    content: "";
    background-color: #EDF7FC;
    border-top-right-radius: calc(111 / var(--device-width) * var(--main-width));
    border-bottom-right-radius: calc(111 / var(--device-width) * var(--main-width));
    width: 100%;
    height: 100%;
    z-index: -1;
}

#environmental .policy h3 {
    font-size: calc(42 / var(--device-width) * var(--main-width));
    font-weight: bold;
}


#environmental .policy .block {
    margin-top: calc(60 / var(--device-width) * var(--main-width));
    position: relative;
}

#environmental .policy .block h4 {
    font-size: calc(30 / var(--device-width) * var(--main-width));
    font-weight: bold;
    border-bottom: solid 1px #006bc6;
    padding-bottom: calc(10 / var(--device-width) * var(--main-width));
    margin-bottom: calc(10 / var(--device-width) * var(--main-width));
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: calc(439 / var(--device-width) * var(--main-width));
}

#environmental .policy .block h4 span {
    font-family: "Boldonse", system-ui;
    font-size: calc(16 / var(--device-width) * var(--main-width));
    color: #006bc6;
    font-weight: bold;
    width: calc(37 / var(--device-width) * var(--main-width));
    text-align: center;
}


#environmental .policy .block .text {
    font-size: calc(28 / var(--device-width) * var(--main-width));
    line-height: 1.57;
    padding-left: calc(22 / var(--device-width) * var(--main-width));
}

@media screen and (min-width: 750px) {

  #environmental .intro {
      padding: 0 calc(100 / var(--device-width) * var(--main-width));
      margin-bottom: calc(65 / var(--device-width) * var(--main-width));
      font-size: calc(16 / var(--device-width) * var(--main-width));
      line-height: 1.2.1875;
  }

  #environmental .policy {
      padding: calc(55 / var(--device-width) * var(--main-width)) calc(100 / var(--device-width) * var(--main-width)) 0;
      margin-bottom: calc(170 / var(--device-width) * var(--main-width));
  }

  #environmental .policy::after {
      top: calc(75 / var(--device-width) * var(--main-width));
      border-top-right-radius: calc(30 / var(--device-width) * var(--main-width));
      border-bottom-right-radius: calc(30 / var(--device-width) * var(--main-width));
      width: calc(1110 / var(--device-width) * var(--main-width));
  }

  #environmental .policy h3 {
      font-size: calc(40 / var(--device-width) * var(--main-width));
  }


  #environmental .policy .block {
      margin-top: calc(50 / var(--device-width) * var(--main-width));
  }

  #environmental .policy .block h4 {
      font-size: calc(22 / var(--device-width) * var(--main-width));
      width: calc(310 / var(--device-width) * var(--main-width));
      letter-spacing: 0.05em;
  }

  #environmental .policy .block h4 span {
      padding-top: calc(5 / var(--device-width) * var(--main-width));
      font-size: calc(12 / var(--device-width) * var(--main-width));
      width: calc(38 / var(--device-width) * var(--main-width));
  }


  #environmental .policy .block .text {
      font-size: calc(16 / var(--device-width) * var(--main-width));
      line-height: 1.5;
      padding-left: calc(40 / var(--device-width) * var(--main-width));
      letter-spacing: 0.05em;
  }

}