/*ハンバーガーメニュー*/
body {
    
    margin: 0;
    font-family: arial;
    width: 100vw;
    height: 100vh;
    animation: bugfix infinite 1s;
    -webkit-animation: bugfix infinite 1s;
    font-family: 'Poppins', sans-serif;
  }
  
  @keyframes bugfix {
    from {
      padding: 0;
    }
    to {
      padding: 0;
    }
  }
  @-webkit-keyframes bugfix {
    from {
      padding: 0;
    }
    to {
      padding: 0;
    }
  }
  #overlay-button {
    position: absolute;
    right: 2em;
    top: 3em;
    padding: 26px 11px;
    z-index: 5;
    cursor: pointer;
    user-select: none;
  }
  #overlay-button span {
    height: 4px;
    width: 35px;
    border-radius: 2px;
    background-color: black;
    position: relative;
    display: block;
    transition: all .2s ease-in-out;
  }
  #overlay-button span:before {
    top: -10px;
    visibility: visible;
  }
  #overlay-button span:after {
    top: 10px;
  }
  #overlay-button span:before, #overlay-button span:after {
    height: 4px;
    width: 35px;
    border-radius: 2px;
    background-color: black;
    position: absolute;
    content: "";
    transition: all .2s ease-in-out;
  }
  #overlay-button:hover span, #overlay-button:hover span:before, #overlay-button:hover span:after {
    background: orange;
  }
  
  input[type=checkbox] {
    display: none; 
    
  }
  
  input[type=checkbox]:checked ~ #overlay {
    visibility: visible; 
  }
  
  input[type=checkbox]:checked ~ #overlay-button:hover span, input[type=checkbox]:checked ~ #overlay-button span {
    background: transparent;
    
    
  }
  input[type=checkbox]:checked ~ #overlay-button span:before {
    transform: rotate(45deg) translate(7px, 7px);
  
  }
  input[type=checkbox]:checked ~ #overlay-button span:after {
    transform: rotate(-45deg) translate(7px, -7px);
  
  
  }
  
  #overlay {
    height: 100vh;
    width: 100vw;
    background: black;
    z-index: 2;
    visibility: hidden;
    position: fixed;
  }
  #overlay.active {
  
  }
  #overlay ul {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    height: 100vh;
    padding-left: 0;
    list-style-type: none;
  }
  #overlay ul li {
    padding: 1em;
  }
  #overlay ul li a {
    color: #F29300;
    text-decoration: none;
    font-size: 1.5em;
  }
  #overlay ul li a:hover {
    color: white!important;
  }

/*ハンバーガーメニュー終わり*/


@-webkit-keyframes typing {
  from { width: 0 }
  to { width:16.3em }
}

@-moz-keyframes typing {
  from { width: 0 }
  to { width:16.3em }
}

@-webkit-keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: black }
}

@-moz-keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: black }
}




/* Global */

.line-1{
    position: relative;
    top: 50%;  
    width: 24em;
    margin: 0 auto;
    border-right: 2px solid black;
    font-size: 180%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    transform: translateY(-50%);    
}

/* Animation */
.anim-typewriter{
  animation: typewriter 4s steps(44) 1s 1 normal both,
 blinkTextCursor 500ms steps(44) infinite normal;
}
@keyframes typewriter{
  from{width: 0;}
  to{width: 24em;}
}
@keyframes blinkTextCursor{
  from{border-right-color: orange;}
  to{border-right-color: transparent;}
}



/* --- 背景------------------------------------------- */

<style type="text/css">

.box {
  position   : relative;
  max-width  : 400px;
  height     : 250px;
  margin     : auto;
  overflow   : hidden;
}

/* --- 背景の指定 ------------------------------------------- */
.box .bgImg {
  position: fixed;
  top        : 0;
  left       : 0;
  bottom     : 0;
  right      : 0;
  opacity    : 0;
  max-width: 100%;
  height: auto;
  animation  : bgAnime 24s infinite;   /* 4画像 × 各6s = 24s */
}


/* --- 段差で背景画像のアニメーションを実行 ----------------- */
.box .src1 {
  background-image : url(haikei_1.png);   /* 背景の画像を指定 */
}
.box .src2 {
  background-image : url(haikei_2.png);   /* 背景の画像を指定 */
  animation-delay  : 6s;
}
.box .src3 {
  background-image : url(haikei_3.png);   /* 背景の画像を指定 */
  animation-delay  : 12s;
}
.box .src4 {
  background-image : url(haikei_4.png);   /* 背景の画像を指定 */
  animation-delay  : 18s;
}

@keyframes bgAnime {
   0% { opacity: 0; }
   3% { opacity: 1; }
  25% { opacity: 1; }
  28% { opacity: 0; }
 100% { opacity: 0; }
}



/**/


h1{
    font-family: 'Poppins', sans-serif;
    font-size :6vw;
    line-height :6vw;
    letter-spacing: 0.002em;
    margin-left: 5vw;
    margin-top: 3vw;
}

h2{font-family: 'Poppins', sans-serif;
    font-size :3vw;
    line-height :4vw;
    letter-spacing: 0.002em;
    margin-left: 35vw;
    margin-top: 7vw;}

h3{font-family: 'Poppins', sans-serif;
    font-size :3vw;
    line-height :3vw;
    letter-spacing: 0.002em;
    margin-left: 35vw;}

h4{font-family: 'Poppins', sans-serif;
    font-size :2vw;
    line-height :2vw;
    letter-spacing: 0.002em;
    margin-left: 35vw;
    }

h5{font-family: 'Poppins', sans-serif;
      font-size :2vw;
      line-height :1vw;
      letter-spacing: 0.002em;
      margin-left: 35vw;
    }

.contentWrapper{
    width: 70%;
    margin:0 auto;
    text-align: center;
    padding:18rem 0;
}

a {
  color: black;
  text-decoration: none;
}

/*テスト*/