@media screen and (max-width:896px){

  header {
    height: 40vh;
  }

  header img{
    top:30%;
  right:10%;
  width:40%;
  }

  h1{
    padding-left:30px;
  }

  .left-p{
    padding-left:5%;
    padding-right:5%;
  }

  .work:after{
    top:-10%;
    left:50%;
    font-size:80px;
  }

  .port:before{
    top:30%;
    left:10%;
    font-size:80px;
  }

  h3{
    font-size: 40px;
  }

  h4{
    font-size:15px;
  }

  footer a{
    margin:50px 30px 50px 10px;
  }

}

@media screen and (max-width:480px){
  .pc{display:none;}
  .sp{display:block;}

  .hum{
    padding:20px;
    justify-content: flex-end;
    flex-direction: column;
    display:flex;
  }

  .btn-trigger {
  position: relative;
  width: 50px;
  height: 44px;
  cursor: pointer;
}
.btn-trigger span {
  position: absolute;
  right: 0;
  width: 100%;
  height: 4px;
  background-color: black;
  border-radius: 4px;
}
.btn-trigger, .btn-trigger span {
  display: inline-block;
  transition: all .5s;
  box-sizing: border-box;
}
.btn-trigger span:nth-of-type(1) {
  top: 0;
}
.btn-trigger span:nth-of-type(2) {
  top: 20px;
}
.btn-trigger span:nth-of-type(3) {
  bottom: 0;
}


/*=============================
#btn01
=============================*/
#btn01.active span:nth-of-type(1) {
  -webkit-transform: translateY(20px) rotate(-45deg);
  transform: translateY(20px) rotate(-45deg);
}
#btn01.active span:nth-of-type(2) {
  opacity: 0;
}
#btn01.active span:nth-of-type(3) {
  -webkit-transform: translateY(-20px) rotate(45deg);
  transform: translateY(-20px) rotate(45deg);
}

  .sp-menu a{
    display:block;
  }

  h1{
    font-size:20px;
    padding-top: 120px;
  }

  header {
    height: 40vh;
  }

  header img{
    top:40%;
  right:10%;
  width:50%;
  }

  .work{
    font-size:25px;
  }

  .work:after{
    top:15%;
    left:40%;
    font-size:50px;
  }

  .work-text{
    width:85%;
    margin-top:20px;
    padding:10px 20px;
    box-shadow:10px 10px 10px #696969;
  }

  h3{
    font-size:20px;
    -webkit-text-stroke-width: 1px;
  }

  p {
    font-size: 12px;
    padding-top:5px;
  }

  .port{
    font-size:25px;
  }

  .port:before{
    top:50%;
    left:10%;
    font-size:50px;
  }

  .flex a{
    width:80%;
    margin:15px 0;
  }

  footer{
    display:flex;
    flex-wrap:wrap;
    justify-content: center;
    padding:30px 0;
  }

  footer a{
    letter-spacing: 0.1em;
    font-size:18px;
    text-decoration:none;
    margin:5px 20px 5px 20px;
  }

  /* ハンバーガーメニューのCSS */

  .menu-btn {
    position: fixed;/* 固定 */
    top: 10px; /* 上からの距離 */
    right: 10px; /* 右からの距離 */
    display: flex; 
    height: 60px; /* ハンバーガーメニューの背景の高さ */
    width: 60px; /* ハンバーガーメニューの背景の幅 */
    justify-content: center; /* 三本線の左右の中央寄せ */
    align-items: center; /* 三本線の上下の中央寄せ */
    z-index: 90; /* 被った時に上に表示されるように */
    background-color: white; /* ハンバーガーメニューの背景色 */
    padding:0;
}
.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
    content: '';
    display: block;
    height: 3px; /* 三本線の上下幅 */
    width: 25px; /* 三本線の左右幅 */
    border-radius: 3px; /* 三本線の丸み */
    background-color: #3E4550; /* 三本線の色 */
    position: absolute;
}
.menu-btn span:before {
    bottom: 8px; /* 真ん中の線を起点とした時の一番上の線の距離 */
}
.menu-btn span:after {
    top: 8px;  /* 真ん中の線を起点とした時の一番下の線の距離 */
}

#menu-btn-check:checked ~ .menu-btn{
  background-color:transparent;
}

#menu-btn-check:checked ~ .menu-btn span {
background-color:transparent;/*メニューオープン時は真ん中の線を透明にする*/
}

#menu-btn-check:checked ~ .menu-btn span::before {
bottom: 0;
transform: rotate(45deg);/* 押したら回転する */
}

#menu-btn-check:checked ~ .menu-btn span::after {
top: 0;
transform: rotate(-45deg);/* 押したら回転する */
}

#menu-btn-check {
    display: none;
}

/* ここから、ハンバーガーメニューを押したら表示されるメニューのCSS */

.menu-content {
    width: 100%; /* メニューの横幅 */
    height: 100%; /* メニューの縦幅 */
    position: fixed;
    top: 0;
    left: 100%;/* leftの値を変更してメニューを画面外へ */
    z-index: 80;
    background-color: #ffd1f3;/* メニューの背景色 */
    transition: all 0.5s;/* メニューが現れる秒数 */
    opacity:0.8;
}

.menu-content ul {
    padding: 70px 10px 0; /* メニュー全体の余白 */
}

.menu-content ul li {
    border-bottom: solid 1px #3E4550; /* メニューの下線 */
    list-style: none;
}

.menu-content ul li a { /* メニューの文字のCSS */
    display: block;
    width: 100%;
    font-size: 15px;
    box-sizing: border-box;
    color:#3E4550;
    text-decoration: none;
    padding: 9px 15px 10px 0;
    position: relative;
}
.menu-content ul li a::before { /* メニューの矢印のCSS */
    content: "";
    width: 7px;
    height: 7px;
    border-top: solid 2px #3E4550;
    border-right: solid 2px #3E4550;
    transform: rotate(45deg);
    position: absolute;
    right: 11px;
    top: 16px;
}

#menu-btn-check:checked ~ .menu-content {
    left: 0;/*ハンバーガーメニューを押したら、メニューを画面内へ*/
}

}