@charset "UTF-8";

:root {
  --vw-large: 1360;
  /* PC */
  --vw-small: 390;
  /* SP */
}

html {
  font-size: 62.5%;
  /* 16px * 62.5% = 10px */
  width: 100%;
  box-sizing: border-box;
  letter-spacing: 0.1em;
}

body {
  font-size: calc((100vw / var(--vw-large))*16);
  color: #212121;
  text-align: center;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-style: normal;
}

main {
  overflow: hidden;
}

body h1 {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-style: normal;
}

body h2 {
  font-size: calc((100vw / var(--vw-large))*36);
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0.04em;
  line-height: 1.44;
}

body h3 {
  font-size: 1.6176470588235297vw;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-style: normal;
}

body h4 {
  font-size: 2.0rem;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.font42 {
  font-size: 3.088235294117647vw;
}

.font40 {
  font-size: 2.898550724637681vw;
}

.font32 {
  font-size: 2.318840579710145vw;
}

.font28 {
  font-size: 2.0588235294117645vw;
}

.font24 {
  font-size: 1.7647058823529411vw;
}

.font22 {
  font-size: 1.6176470588235297vw;
}

.font20 {
  font-size: 1.4705882352941175vw;
}

.font18 {
  font-size: 1.3235294117647058vw;
}

.font14 {
  font-size: 1.0294117647058822vw;
}

.h2_under {
  background: linear-gradient(transparent 60%, #FFF200 50%);
}

.blue {
  color: #010032;
}

.red {
  color: #C60000;
}

.white {
  color: #FFFFFF;
}

.yellow {
  color: #FFF200;
}

.orange {
  color: #F59421;
}

.d_orange {
  color: #FF6400;

}

.l_gray {
  color: #919191;
}

.pc {
  display: block;
}

.sp {
  display: none;
}

.flex {
  display: flex;
}

img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

ul li {
  list-style: none;
}

a {
  color: #2E2E2E;
  text-decoration: none;

  &:hover {
    opacity: 0.7;
  }
}

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

  .sp {
    display: block;
  }

  body {
    font-size: 4.102564102564102vw;
  }

  body h2 {
    font-size: calc((100vw / var(--vw-small))*24);
  }

  body h3 {
    font-size: 5.641025641025641vw;
  }

  .font42 {
    font-size: 10.76923076923077vw;
  }

  .font32 {
    font-size: 8.205128205128204vw;
  }

  .font28 {
    font-size: 7.179487179487179vw;
  }

  .font24 {
    font-size: 6.153846153846154vw;
  }

  .font22 {
    font-size: 1.6176470588235297vw;
  }

  .font20 {
    font-size: 5.128205128205128vw;
  }

  .font18 {
    font-size: 4.615384615384616vw;
  }

  .font14 {
    font-size: 3.5897435897435894vw;
  }
}

button {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  vertical-align: middle;
  text-align: inherit;
  font: inherit;
  -webkit-appearance: none;
  appearance: none;
}

::before,
::after {
  box-sizing: inherit;
}

/**header**/
header {}

@media(max-width:768px) {

  header {

    .header-wrap {
      padding: calc((100vw / var(--vw-small))*16) calc((100vw / var(--vw-small))*18);

      .logo {
        width: calc((100vw / var(--vw-small))*130);
      }
    }
  }
}

.cf7-cf-turnstile {
  text-align: center;
  margin-top: 30px !important;
}

/*headerここまで*/

/*footer*/

footer {
  background-color: #fff;
  padding: calc((100vw / var(--vw-large))*64) 0 calc((100vw / var(--vw-large))*87);

  .flex {
    width: calc((100vw / var(--vw-large))*704);
    margin: 0 auto;
    justify-content: space-between;
  }

  .company {
    text-align: left;

    .title {
      font-size: calc((100vw / var(--vw-large))*36);
      margin: 0 auto calc((100vw / var(--vw-large))*30);
      display: inline-block;
    }

    .sub {
      font-size: calc((100vw / var(--vw-large))*24);
      color: #1A8138;
      margin: 0 auto calc((100vw / var(--vw-large))*13);
      display: inline-block;
    }

    p {
      font-weight: 400;
      line-height: 175%;
      margin: 0 auto calc((100vw / var(--vw-large))*18);
    }

    .logo {
      width: calc((100vw / var(--vw-large))*177);
    }
  }

  img {
    width: calc((100vw / var(--vw-large))*338);
  }
}

@media(max-width:768px) {
  footer {
    padding: calc((100vw / var(--vw-small))*64) 0;

    .flex {
      display: block;
      width: calc((100vw / var(--vw-small))*313);
    }

    .company {
      text-align: left;

      .title {
        font-size: calc((100vw / var(--vw-small))*36);
        margin: 0 auto calc((100vw / var(--vw-small))*30);
      }

      .sub {
        font-size: calc((100vw / var(--vw-small))*20);
        margin: 0 auto calc((100vw / var(--vw-small))*13);
      }

      p {
        font-weight: 400;
        line-height: 175%;
        margin: 0 auto calc((100vw / var(--vw-small))*24);
      }

      .logo {
        width: calc((100vw / var(--vw-small))*175);
      }
    }

    img {
      width: calc((100vw / var(--vw-small))*315);
      margin: calc((100vw / var(--vw-small))*36) auto 0;
    }
  }
}