@charset "UTF-8";
/* Footer */
footer {
  padding: 2em 3%;
  z-index: 0;
  box-sizing: border-box;
  width: 100%;
  text-align: center;
  margin: 0 auto;
  text-align: center;
  padding-top: calc(10vw + 10px);
  padding-bottom: 2%;
  position: relative;
  overflow: hidden;
  background: linear-gradient(to right, rgba(227, 227, 227, 0.3) 0%, rgba(90, 199, 208, 0.3) 100%); }
  footer::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    border-top: 10vw solid #FFF;
    /* 三角を白にする */
    border-right: 100vw solid transparent; }
  @media screen and (max-width: 768px) {
    footer {
      padding: 80px 3% 20px; }
      footer p {
        width: 100%;
        text-align: center;
        margin: 0; } }
  @media screen and (max-width: 480px) {
    footer {
      padding: 80px 2% 20px; } }
  footer .infoArea {
    width: 1000px;
    margin: 0 auto; }
    @media screen and (max-width: 1100px) {
      footer .infoArea {
        width: 90%; } }
    footer .infoArea img {
      display: block; }
    footer .infoArea .nLogo {
      width: 150px;
      margin: 0 auto 50px; }
    footer .infoArea .inBox {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center; }
      footer .infoArea .inBox figure {
        width: 30%;
        margin-right: 3%; }
        @media screen and (max-width: 768px) {
          footer .infoArea .inBox figure {
            width: 40%;
            margin-right: 0;
            margin-bottom: 1em; } }
        @media screen and (max-width: 480px) {
          footer .infoArea .inBox figure {
            width: 70%;
            margin-right: 0; } }
      footer .infoArea .inBox p {
        text-align: justify; }
  footer .bnrArea {
    width: 1000px;
    margin: 4em auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; }
    footer .bnrArea::before {
      content: "";
      display: block;
      width: 18.5%;
      order: 1; }
    footer .bnrArea::after {
      content: "";
      display: block;
      width: 18.5%; }
    @media screen and (max-width: 1100px) {
      footer .bnrArea {
        width: 760px;
        margin: 3em auto; } }
    @media screen and (max-width: 768px) {
      footer .bnrArea {
        width: 90%;
        margin: 2em auto; } }
    footer .bnrArea figure {
      width: 18.5%;
      margin: 0 0 2% 0; }
      @media screen and (max-width: 768px) {
        footer .bnrArea figure {
          width: 23.5%;
          margin: 0 0 2% 0; } }
      @media screen and (max-width: 480px) {
        footer .bnrArea figure {
          width: 48.5%;
          margin: 0 0 2% 0; } }
      footer .bnrArea figure img {
        display: block; }
  footer #mvArea {
    width: 900px;
    margin: 4em auto 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center; }
    @media screen and (max-width: 1100px) {
      footer #mvArea {
        width: 85%; } }
    @media screen and (max-width: 768px) {
      footer #mvArea {
        width: 90%;
        margin: 2em auto 2em; } }
    footer #mvArea p {
      width: 50%;
      text-align: justify; }
      @media screen and (max-width: 768px) {
        footer #mvArea p {
          width: 100%; } }
    footer #mvArea .youtube {
      width: 45%; }
      @media screen and (max-width: 768px) {
        footer #mvArea .youtube {
          width: 100%;
          margin-top: 1em; } }
      footer #mvArea .youtube div {
        position: relative;
        padding-bottom: 56.25%;
        /*アスペクト比 16:9の場合の縦幅*/
        height: 0;
        overflow: hidden; }
        footer #mvArea .youtube div iframe {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%; }
  footer .copyR {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; }

#pagetop {
  margin-top: 100px;
  width: 100%;
  /*padding-bottom: calc(10vw + 10px);  */
  background-color: #FFF; }
  @media screen and (max-width: 768px) {
    #pagetop {
      margin-top: 60px; } }
  @media screen and (max-width: 480px) {
    #pagetop {
      margin-top: 50px; } }
  #pagetop a {
    text-decoration: none;
    width: 100%;
    text-align: center;
    display: inline-block;
    background-image: url(../images/pagetop.svg);
    background-repeat: no-repeat;
    height: 40px;
    background-position: center 0%; }
