@charset "UTF-8";
@media (max-width: 1200px) {
    .main_asami img {
        width: 60%;
        margin-right: 5%;
      
    }
}
@media (max-width: 960px) {
    .main_asami img {
        width: 40%;
        margin-right: 5%;
      
    }
}
@media (max-width: 768px) {
    
    .main_asami .saisyo {
        width: 100%;
        
    }
    .main_asami h1 {
        margin-top: 0;
    }
    
    .main_asami img {
        width: 40%;
        margin-right: 5%;
      
    }
    .main_asami .saisyo .btn {
        width: 100%;
        font-size: 30px;
        /* padding: 3%; */
     
    }
    .main_asami .saisyo .btn span {
        left: 28%;
        top: 108%;
        width: 25%;
    }
    .middle {
        width: 100%;
    }
    .middle h2 {
        font-size: 40px;
    }
    .middle p {
        font-size: 30px;
    }
    .middle h3 {
        margin-top: 5%;
        font-size: 30px;
    }
    .middle .web, .middle .movie {
        display: flex;
        font-size: 18px;
        text-align: left;
        justify-content: center;
        align-items: center;
    
    }
    .adobe_icn p {
        padding-left: 35%;
    
    }
    footer p {
        float: right;
        color: #808080;
        font-size: smaller;
        margin-top: -38px;
        margin-left: 30px;
          
    }
    /* ABOUT */
    .abouts dd span:nth-child(1) {
        width: 35%;
        display: block;
        
    }
}





@media (max-width: 760px){
    .main_asami {
        flex-direction: column;
        margin-top: 50px;
    
    }
    .main_asami h1 {
        font-size: 40px;
    }
    
    .main_asami p {
        font-size: 20px;
        
    }
    .main_asami img {
        width: 40%;
        margin: 50px auto;
        border: none;
        
    }
    .middle .web, .middle .movie {
        width: 100%;
        font-size: 15px;
     
    }
    .adobe_icn {
        width: 100%;
        text-align: center;
        margin: 5% auto;
    }
    .adobe_icn img {
        width: 40%;
    }
    .adobe_icn p {
        padding-left: 30%;
        font-size: 10px;
    
    }
    .collection .video_img {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 50px;
    }
    .video_img .video_i, .video_img .img_v {
        width: 80%;
        
    }
    .collection .video_img video {
        width: 100%;
    }
    .collection .video_img img {
        width: 100%;
       
    }
    .collections {
        width: 100%;
        margin: 10% auto;
       
        
    }
    .collections img {
        width: 70%;
        
    }
    .collections .column, .collections .row, .collections .icn {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0;
        gap: 30px;
    }
    .collections .row {
        margin: 30px 0;
    }
    footer ul {
        justify-content:center;
       
    }
    footer p {
        float: none;
        margin-top: 0;
        text-align: center;
          
    }


    /* ABOUT */
    .abouts {
        width: 100%;
        flex-direction: column;
        justify-content: center;
        
       
    }
    .abouts img {
        width: 20%;
       
    }
    .abouts dl {
        width: 100%; 
        white-space: nowrap;
        float: none;
        margin-top: 50px;
        margin-left: 100px;
        margin-bottom: 50px;

    }
    .abouts dt {
        width: 30%;
        float: left;
        font-weight: bold;
        
    }
    .abouts dd {
        width: 35%;
        float:left;
    
    }

    /* collection */
    .collection_1 {
        text-align: center;
       
    }
    .collection_1 .web_design {
        width: 100%;
        flex-direction: column-reverse;
        justify-content: center;
        align-items: center;
        gap: 50px;
        
    }
    .web_design img {
        width: 90%;
    }
    
    .collection_2 .video_editing {
        width: 100%;
        flex-direction: column;
        gap: 50px;
    }
    .video_editing video {
        width: 100%;
    }
    .video_editing .asami {
        width: 100%;
        text-align: center;
    }
    .video_editing .earth {
        width: 100%;
        text-align: center;
    }
    .collection_3 .samune1, .collection_3 .samune2 {
        width: 100%;
        flex-direction: column;
    }
    .samune1 img, .samune2 img {
        width: 100%;
    }
    .samune1 .tv_tower, .samune1 .blue_pond, .samune1 .otaru, .samune1 .yoga {
        width: 100%;
        text-align: center;
    }
    .samune2 .neko_blog, .samune2 .tuna, .samune2 .syuri_gw, .samune2 .syuri_night {
        width: 100%;
        text-align: center;
    }
    .collection_3 .tate {
        width: 100%;
        flex-direction: column;

    }
    .tate img {
        width: 100%;
  
    }
    .tate .syuri_morning, .tate .kotaro {
        width: 100%;
        text-align: center;
    } 
    .collection_4 .onsen {
        width: 100%;
        flex-direction: column;
    }
    .onsen img {
        width: 100%;
    }
    .onsen .tokusyu, .onsen .hozon {
        width: 100%;
        text-align: center;
    }
    .collection_4 .musashino {
        width: 100%;
        flex-direction: column;

    }
    
    .musashino img {
        width: 100%;
       
    }
    .musashino .musashino_touki, .musashino .musashino_huyu, .musashino .musashino_secret {
        width: 100%;
        text-align: center;
    }
    .keitai img {
        width: 100%;
       
    }
    .collection_4 .orie {
       width: 100%;

        flex-direction: column;
    
    }
    .orie img {
        width: 100%;
        
    }
    .orie .orie_tore, .orie .orie_le, .orie .orie_se {
        width: 100%;
       
    }
  
    .collection_4 .syuri {
        width: 100%;
        flex-direction: column;
        
    }
    .syuri img {
        width: 100%;
        
    }
    .syuri .spring, .syuri .summer, .syuri .autumn, .syuri  .winter, .syuri .pajama {
        width: 100%;
    }
    .collection_4 .dance {
        width: 100%;
        flex-direction: column;
    }
    .dance img {
        width: 100%;
    }
    .dance .dance1, .dance .dance2, .dance .dance3 {
        width: 100%;
    }
    .hana img {
        width: 100%;
    
    }
    .logo img {
        width: 100%;
    }
}

@media (min-width: 375px) {
    .main_asami .saisyo .btn {
        width: 100%;
        display: inline-block;
        position: relative;
        color: #fff;
        font-size: 20px;
        text-decoration: none;
        margin: 0 auto;
        /* padding: 3%; */
        transition: all .2s;
     
    }

    
    .main_asami .saisyo .btn span {
        position: absolute;
        left: 50%;
        top: 85%;
        width: 35%;
        background-color: #919191;
        transform:translate(-50%, -50%);
        transition: all .5s;
        display: inline-block;
        white-space: nowrap;
    }
}