@charset "UTF-8";

@import url("common.css");
@import url("nav.css");


/* = SP ================================================ */

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

  /* header
  -------------------------- */
  header{
    padding: 7% 0;
    background: #94cbe6;
    margin-top: 62px;
  }
  h1{
    color: #fff;
    font-size: calc(5rem + 30 * (100vw - 375px)/393);
    letter-spacing: 0.12em;
    text-shadow:
    #14171a 2px 0px 0px, #14171a -2px 0px 0px,
    #14171a 0px -2px 0px, #14171a 0px 2px 0px,
    #14171a 2px 2px 0px, #14171a -2px 2px 0px,
    #14171a 2px -2px 0px, #14171a -2px -2px 0px,
    #14171a 1px 2px 0px, #14171a -1px 2px 0px,
    #14171a 1px -2px 0px, #14171a -1px -2px 0px,
    #14171a 2px 1px 0px, #14171a -2px 1px 0px,
    #14171a 2px -1px 0px, #14171a -2px -1px 0px,
    #14171a 1px 1px 0px, #14171a -1px 1px 0px,
    #14171a 1px -1px 0px, #14171a -1px -1px 0px;
  }

  /* img
  -------------------------- */
  figure{
    width: 100vw;
    margin: 0 calc(50% - 50vw);
  }

  } /* = SP ============================================== */


  /* = PC ================================================ */

  @media screen and (min-width:769px) {
    /* header
    -------------------------- */
    h1{
      font-size: calc(8rem + 10 * (100vw - 769px)/231);
    }

    /* img
    -------------------------- */
    .table{
      background: linear-gradient(#94cbe6 5%,#fff 5%);
    }
    figure{
      width: 100%;
      margin: 0;
    }
  }

  @media screen and (min-width:1000px) {
    /* header
    -------------------------- */
    header{
      padding: 70px 0;
    }
    h1{
      font-size: 9rem;
    }

  } /* = PC ============================================== */