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

        html {
            color: #3c606e;
            font-family: 'Shippori Mincho', serif;
            font-family: 'Sawarabi Mincho', serif;
            background-color: #c9d2d2;
            letter-spacing: 0.2em;
            font-size: 13px;
            text-align: center;
            scroll-behavior: smooth;
        }
        * {
            margin: 0 auto;
        }
        #g-nav{
            /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
            position:fixed;
            z-index: 999;
            /*ナビのスタート位置と形状*/
            top:0;
            right: -120%;
            width:40%;
            height: 100vh;/*ナビの高さ*/
            background:#4c676dde;
            transition: all 0.6s;
        }
        
        /*アクティブクラスがついたら位置を0に*/
        #g-nav.panelactive{
            right: 0;
        }
        #g-nav ul {
            position: absolute;
            z-index: 999;
            padding: 0;
            transform: translate(40%,50%);
                }
        
        /*リストのレイアウト設定*/
        
        #g-nav li{
            list-style: none;
            text-align: center;
        }
        
        #g-nav li a{
            color: white;
            text-decoration: none;
            padding:10px;
            display: block;
            letter-spacing: 0.1em;
        }
        
        /*========= ボタンのためのCSS ===============*/
        .openbtn{
            position:fixed;
            z-index: 9999;/*ボタンを最前面に*/
            top:10px;
            right: 10px;
            cursor: pointer;
            width: 50px;
            height:50px;
        }
            
        /*×に変化*/	
        .openbtn span{
            display: inline-block;
            transition: all .4s;
            position: absolute;
            left: 20px;
            height: 1px;
            border-radius: 1px;
            background-color: white;
            width: 37%;
        
          }
        
        .openbtn span:nth-of-type(1) {
            top:10px;	
        }
        
        .openbtn span:nth-of-type(2) {
            top:16px;
        }
        
        .openbtn span:nth-of-type(3) {
            top:22px;
        }
        
        .openbtn.active span:nth-of-type(1) {
            top: 18px;
            left: 18px;
            transform: translateY(6px) rotate(-45deg);
            width: 30%;
        }
        
        .openbtn.active span:nth-of-type(2) {
            opacity: 0;
        }
        
        .openbtn.active span:nth-of-type(3){
            top: 30px;
            left: 18px;
            transform: translateY(-6px) rotate(45deg);
            width: 30%;
        }
        h1 img {
            width: 100%;
        }
        .scrolldown1{
            position: absolute;
            right: 2%;
            height: 28px;
        }
        .scrolldown1 span{
            position: absolute;
            right: 16px;
            top: -25px;
            color: #0b3370;
            font-size: 10px;
            letter-spacing: 0.05em;
        }
        .scrolldown1::after{
            content: "";
            position: absolute;
            top: 0;
            width: 1px;
            right: 30px;
            height: 15px;
            background: #0b3370;
            animation: pathmove 1.4s ease-in-out infinite;
            opacity: 0;
                }
        @keyframes pathmove{
          0%{
            height:0;
            top:0;
            opacity: 0;
          }
          30%{
            height:40px;
            opacity: 1;
          }
          100%{
            height:0;
            top:80px;
            opacity: 0;
          }
        }
        
        h2 {
            font-size: 17px;
            letter-spacing: 0.3em;
            text-align: center;
        }
        .site img {
            width: 315px;
        }
        #works {
            margin-top: 100px;
        }
.site {
    margin-top: 34px;
}
.site-title {
    font-size: 13px;
    margin-bottom: 3vw;
}
.banner ,#skill ,#about{
    margin-top: 100px;
}
.banner img {
    width: 75%;
}
.banner ul {
    padding: 0;
    margin-top: 23px;
}
.banner ul li {
    list-style: none;
    float: left;
    width: 50%;
    font-size: 11px;
    padding-bottom: 22px;
}
.text {
    width: 84vw;
    text-align: left;
    padding-top: 25px;
    padding-bottom: 20px;
}
.text-1  {
    margin-top: 50px;
    text-align: left;
    margin-bottom: 20px;
    width: 83vw;
}
.text-2 {
    margin-top: 20px;
    text-align: left;
    margin-bottom: 20px;
    width: 83vw;
 
}
.b-text {
    width: 74%;
}
.ca1 {
    margin-top: 70px;
}
.btnlinestretches2{
    position:relative;
    color: #3c606e;
    padding: 10px 30px;
    display:inline-block;
      text-decoration: none;
      outline: none;
      margin-bottom: 10px;
  }
  
  .btnlinestretches2::before,
  .btnlinestretches2::after {
    content:'';
    position:absolute;
    border:solid #eef4f0;
    width:10px;
    height:10px;
    transition:all 0.3s ease-in-out;
  }
  
  .btnlinestretches2::before{
    top:0;
    left:0;
    border-width:2px 0 0 2px;
  }
  
  .btnlinestretches2::after{
    bottom:0;
    right:0;
    border-width:0 2px 2px 0;
  }
  .skill1 {
    height: 90vw;
  }
.skill2 {
    list-style-type: none;
    width: 85vw;
    margin-top: 36px;
    line-height: 6.5vw;
    font-size: 12px;
}
.s-1 {
    float: left;
    width: 76vw;
    border-bottom: solid 1px #fbf7f3;
}
.s-2 {
    float: right;
}
.s-text {
    float: left;
}
.square {
    position: absolute;
    top: 3vw;
    width: 85vw;
    height: 96vw;
    background: #f5f6f7;
    z-index: -1;
    opacity: 0.3;
  }
.square2 {
    position: absolute;
    top: 110vw;
    width: 85vw;
    height: 59vw;
    background: #f5f6f7;
    z-index: -1;
    opacity: 0.3;
} 
.square3 {
    position: absolute;
    top: 177vw;
    width: 85vw;
    height: 45vw;
    background: #f5f6f7;
    z-index: -1;
    opacity: 0.3;
}
.ti2 {
    padding-left: 16px;
}
.de {
    text-align: left;
    position: relative;
    margin-top: 30px;
}
.de1 {
    width: 85vw;
    margin-top: 10vw;
}

.de p {
    width: 76vw;
    padding-top: 3.5vw;
}
.de-p1 {
    height: 85vw;

}
.de-p2 {
    height: 46vw;
}
.de-p3 {
    height: 38vw;
}
#ask {
    width: 195px;
}
.about1 {
    margin-top: 30px;
}
h4 {
    margin-top: 30px;
}
.abura {
    margin-top: 60px;
}
.abura img {
    width: 50vw;
}
.about3 p {
    width: 70vw;
    font-size: 12px;
    text-align: left;
    padding: 5px 0px;
}
.ca {
    flex-direction: column;
    margin-top: 33px;
}
.ca img {
    width: 41vw;
    padding: 0px 10px;
}

        #copy {
            float: right;
            margin: 100px 10px 15px 0px;
        }
        #pagetop{
            position: fixed;
            bottom: 50px;
            right: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 35px;
            height: 35px;
            background: #4c676d91;
         }
          .arrow{
            width: 10px;
            height: 10px;
            border-top: 3px solid #fff;
            border-right: 3px solid #fff;
            transform: rotate(-45deg);
            margin-top: 5px;
         }
         .fadeIn {
             animation-name: fadeInAnime;
             animation-duration: 2s;
             animation-fill-mode: forwards;
             opacity: 0;
         }
         @keyframes fadeInAnime {
             from {
                 opacity: 0;
             }
             to {
                 opacity: 1;
             }
             
         }
          
          /*========= 流れるテキスト ===============*/
          
          /*全共通*/
          
          .slide-in {
            overflow: hidden;
              display: inline-block;
          }
          
          .slide-in_inner {
            display: inline-block;
          
          }
          
          /*左右のアニメーション*/
          .leftAnime{
              opacity: 0;/*事前に透過0にして消しておく*/
          }
          
          .slideAnimeLeftRight {
            animation-name:slideTextX100;
            animation-duration:1.5s;
            animation-fill-mode:forwards;
              opacity: 0;
          }
          
          @keyframes slideTextX100 {
            from {
            transform: translateX(-100%); /*要素を左の枠外に移動*/
                  opacity: 0;
            }
          
            to {
            transform: translateX(0);/*要素を元の位置に移動*/
              opacity: 1;
            }
          }
          
          .slideAnimeRightLeft {
            animation-name:slideTextX-100;
            animation-duration:1.5s;
            animation-fill-mode:forwards;
              opacity: 0;
          }
          
          
          @keyframes slideTextX-100 {
            from {
            transform: translateX(100%);/*要素を右の枠外に移動*/
              opacity: 0;
            }
          
            to {
            transform: translateX(0);/*要素を元の位置に移動*/
              opacity: 1;
            }
          }
        /* 背景が左から出現＋テキスト */
        .bgLR{
            position:relative;/*テキストの基点となる位置を定義*/
        }
        
        .bgLR span.mask2{
            position:relative;/*背景色の基点となる位置を定義*/
            display: block;
            line-height: 0;/*行の高さを0にする*/
            overflow: hidden;/*拡大してはみ出る要素を隠す*/
        }
        
        .bgLR span.mask2::before{
            content:"";
            position: absolute;
            z-index: 2;
            left:0;
            top:0;
            opacity:0;
            transition: .3s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
            transform: translateX(-100%);
            background:#344754e3;/*背景色*/
            width:100%;
            height: 100%;	
        }
        
        .bgLR:hover span.mask2::before{/*hoverした時の変化*/
            opacity:1;
            transform: translateX(0);
        }


        .bgLR span.cap{
            position: absolute;
            opacity:0;
            transition: .5s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
            z-index:3;/*テキストを前面に出す*/
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            color: #fff;/*テキストの色を変えたい場合はここを修正*/
            line-height: 1.5;/*行の高さを1.5にする*/
        }
        
        .bgLR:hover span.cap{/*hoverした時の変化*/
            opacity:1;
        }

        .zoomIn img{
            transform: scale(1);
            transition: .3s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
        }
        
        .zoomIn a:hover img{/*hoverした時の変化*/
            transform: scale(1.15);/*拡大の値を変更したい場合はこの数値を変更*/
        }
        
        .mask{
            display: block;
            line-height: 0;/*行の高さを0にする*/
        }
        .sns {
            width: 25px;
            margin-top: 29px;
        }

}