@charset "UTF-8";
/*メニュー押した後のアニメーション*/
.overlay {
  position: fixed;
  background-color: #F2F2F2;
  top: 0;
  height: 0;
  transition: all .3s ease-in-out;
  overflow: hidden;
  z-index: 200;
  opacity: 0;
  width: 100%; }
  .overlay .headerlogo {
    position: relative;
    z-index: 200;
    margin: 10px 0 0 10px; }
    @media (min-width: 768px) {
      .overlay .headerlogo {
        margin: 20px 0 0 20px; } }
    .overlay .headerlogo img {
      width: 80px; }
      @media (min-width: 768px) {
        .overlay .headerlogo img {
          width: 120px; } }
  .overlay.open {
    opacity: 1.0;
    visibility: visible;
    height: 100vh;
    overflow: scroll; }
  .overlay nav {
    position: absolute;
    top: 0;
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200; }
    .overlay nav ul {
      margin-top: 40px; }
      .overlay nav ul li {
        opacity: 0;
        margin-bottom: 40px; }
        .overlay nav ul li:last-child {
          margin-bottom: 0px; }
        .overlay nav ul li a img {
          width: auto;
          height: 30px; }
          @media (min-width: 768px) {
            .overlay nav ul li a img {
              height: 50px; } }
          @media (min-width: 1250px) {
            .overlay nav ul li a img {
              height: 80px; } }
        .overlay nav ul li a span {
          display: inline-block; }
        .overlay nav ul li a:hover span {
          transform: rotateY(360deg);
          transition: .6s; }
          .overlay nav ul li a:hover span:nth-of-type(1) {
            transition-delay: .02s; }
          .overlay nav ul li a:hover span:nth-of-type(2) {
            transition-delay: .04s; }
          .overlay nav ul li a:hover span:nth-of-type(3) {
            transition-delay: .06s; }
          .overlay nav ul li a:hover span:nth-of-type(4) {
            transition-delay: .08s; }
          .overlay nav ul li a:hover span:nth-of-type(5) {
            transition-delay: .10s; }
          .overlay nav ul li a:hover span:nth-of-type(6) {
            transition-delay: .12s; }
          .overlay nav ul li a:hover span:nth-of-type(7) {
            transition-delay: .14s; }
          .overlay nav ul li a:hover span:nth-of-type(8) {
            transition-delay: .16s; }
          .overlay nav ul li a:hover span:nth-of-type(9) {
            transition-delay: .18s; }
        .overlay nav ul li a h3 {
          font-family: 'Montserrat', sans-serif;
          font-weight: bold;
          font-size: 1.25em;
          line-height: 1.0em;
          color: #00B2ED;
          margin-top: 10px; }
          @media (min-width: 768px) {
            .overlay nav ul li a h3 {
              font-size: 2.4em; } }
          @media (min-width: 1250px) {
            .overlay nav ul li a h3 {
              font-size: 3.0em; } }
  .overlay #copy-loop {
    opacity: 0; }

.overlay.open #copy-loop {
  animation: fadeInNav 0.5s ease forwards;
  animation-delay: .25s; }

@keyframes fadeInNav {
  0% {
    opacity: 0;
    transform: translateY(0); }
  100% {
    opacity: 1;
    transform: translateY(0); } }
.overlay.open ul li {
  animation: fadeInRight1 0.5s ease forwards;
  animation-delay: .35s; }
  .overlay.open ul li:nth-of-type(2) {
    animation-delay: .4s; }
  .overlay.open ul li:nth-of-type(3) {
    animation-delay: .45s; }
  .overlay.open ul li:nth-of-type(4) {
    animation-delay: .50s; }

@keyframes fadeInRight1 {
  0% {
    opacity: 0;
    transform: translateY(20px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }