@charset "utf-8";
@import url("https://fonts.googleapis.com/earlyaccess/notosansjp.css");

body {
  font-family: 'Noto Sans JP', sans-serif;
}

/*
  main-visual
*/
section.main-visual .text-contents {
  top: 380px;
}

section.main-visual .text-contents h1 {
  font-size: 32px;
}

/*
  sixth-section
*/
section.sixth-section .card-item {
  height: 600px;
}

/*
  seventh-section
*/
section.seventh-section .card-item {
  min-height: 500px;
}

/*
  floating-section
*/
section.floating-section a {
  width: 460px;
}


/** bootstrap sm : smp Vertical **/
@media screen and (max-width:767px) {

    /*
      main-visual
    */
    section.main-visual .text-contents {
      top: 290px;
    }

    section.main-visual .text-contents h1 {
      font-size: 24px;
    }

    section.main-visual .text-contents p {
      font-size: 14px;
    }

    /*
      common-section
    */
    section .text-large {
      --text-large-size: 42px;
      font-size: var(--text-large-size);
    }

    /*
      fifth-section
    */
    section.fifth-section .text-box .text-contents {
      margin: auto 20px;
      width: 90%;
    }

    section.fifth-section .text-box h2 {
      font-size: 26px;
      padding-bottom: 10px;
    }

    /*
      sixth-section
    */
    section.sixth-section .card-item {
      height: 780px;
    }

    /*
      seventh-section
    */
    section.seventh-section .card-item {
      min-height: 560px;
    }

    /*
      floating-section
    */
    section.floating-section a {
      max-width: 92vw;
      font-size: 14px;
    }
}

/** bootstrap md : tablet **/
@media screen and (min-width:768px) and (max-width:991px) {}

/** bootstrap lg : middle PC **/
@media screen and (min-width:992px) and (max-width:1199px) {

    /*
      main-visual
    */
    section.main-visual .text-contents {
      top: 340px;
    }

    section.main-visual .text-contents h1 {
      font-size: 40px;
    }

    /*
      second-section
    */
    section.second-section .card-item {
      min-height: 320px;
    }

    /*
      sixth-section
    */
    section.sixth-section .card-item {
      height: 660px;
    }
}

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

    /*
      main-visual
    */
    section.main-visual .text-contents h1 {
      font-size: 40px;
    }

    /*
      second-section
    */
    section.second-section .card-item {
      min-height: 290px;
    }

    /*
      sixth-section
    */
    section.sixth-section .card-item {
      height: 660px;
    }
}