@charset "UTF-8";
/* CSS Document */

@media(max-width:768px){
    /*max-width:768pxはスマホ対応に適した幅*/
    
    
    
    /*Works上画面*/
    
    .works-wrap{
        padding: 120px 0 100px;
    }
    
    .works-title{
        padding:0 0 60px;
    }
    
    .works-list{
        width: 100%;
        display: inline-block;
    }
    
    .works-list .works-btn{
        width: 100%;
        padding: 10px 20px;
        border: 1px solid rgba(360,360,360,0.5);
        float: left;
    }
    
    .works-left{
        margin: -50px 0 0; 
        position: absolute;
        top:0px;
        left: 0;
    }
    
    .works-right{
        margin: -50px 0 0; 
        position: absolute;
        top:0px;
        right: 0;
    }
    
    .works-image{
        height:420px;
        margin: 50px 0 0;
    }
    
    .slides {
        width:300px;
        margin: 0 auto;
        height: 430px;
        max-width: 100%;
        /*box-shadow: 3px 3px 10px 1px #fff;*/
        overflow: none;
    }

    .slides ul{
        position: relative;
        width: 100%;
    }

    .slides ul .slide{
        width: 60%;
        max-width: 100%;
        height: 430px;
        max-width: 100%;
        min-width: 250px;
        position: absolute;
        right: -100%;
    }

    .slides ul .active{
        position: absolute;
        right: 0;
        width: 100%;
        margin: 0 auto;
    }

        /*.works-left-phone{
    float: left;
    margin: 20px 0 0;
    display: inline-block;
    }
       .works-right-iphone{
        margin: 20px 0 0;
        display: inline-block;
    }*/
    
    .works-image .top-item {
        max-width: 100%;
        width: 90%;
        height: auto;
        min-width: 250px;
    }
    
    
    
    /*Works下画面*/
    
    .items{
        width: 100%;
    }
    
   .item-left .item{
        margin: 0px auto 20px;
       width: 100%;
       max-width: 375px;
    }
    
    .item-right .item{
        margin: 0px auto 20px;
        width: 100%;
        max-width: 375px;
    }
    
    .item-left{
        width: 100%;
    }

     .item-right{
        width: 100%;
    }
      
    .item img{
        max-width: 340px;
        width: 100%;
        filter: brightness(1)
    }
    
    .item-img-wrap{
        width: 100%;
    }
    
    
    
    /*トップ画面*/
    
    .top{
        padding: 50px 0;
        line-height: 450px;
    }
    
    .top .my-logo{
        display: none;
    }
    
    .top .my-logo-phone{
        display: inline-block;
    }    

    
    /*自己紹介画面*/
    
    .about-wrap{
        padding: 120px 0 70px;
    }
    .about-title{
        padding: 0px 0 60px;
    }
    
    
    .status-wrap{
         display: block;
         text-align: center;
         width: 100%;
    }
    
    
    .about-left{
         padding:0px 0px 50px 0px;
    }
    
    .about-left img{
        max-width: 280px;
        max-height: 280px;
        width: 100%;
        height:100%;
    }
    
    .about-right{
        padding: 0 0 0 0;
    }
    
    dd{
        font-size: 11px;
    }
    
    dd a{
        transition: all 0.2s ease-out;
        text-decoration: none;
        color: black;
    }
    
    /*スキル画面*/
    
    .skill-wrap{
        padding: 120px 0 40px;
    }
    
    .meter{
        font-size: 10px;
        padding: 0 0 0 20px;
    }
    
    
       
    /*お問い合わせ画面*/
    
    .contact-wrap{
        padding: 120px 0 70px;
    }
    
    
    .contact-left{
        float: left;
        width: 100px;
        height: 67px;
        margin-left: 0px;
        margin-top: 0px;
        margin: 0 0 35px;
    }
    
    .contact-right-phone{
        float: right;
        display: block;
        width: 100px;
        height: 67px;
        margin: 0 0 35px;
    }
    .contact-right{
        display: none;
    }
    
    .form-icon{
        height: auto;
        display: block;
        max-width: 400px;
        margin: 0 auto;
    }
    
    .form-icon-frame{
        width: 100%;  
        display: flex;
        justify-content: space-between;
    }
    
    .form-wrap{
        width: 100%;
        max-width: 400px;
    }
    
    form input{
        width: 90%;
    }
    
    form textarea{
        width: 90%;
    }
    
    
}