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

@media(max-width:768px) {
    
    body{
        background-color: #EFEFF0;
    }
    
    
    /*トップ画面*/
    .top {
        padding: 100px 0 100px;
    }

    .top .icon img {
        position: absolute;
        top: 100px;
        left: 30px;
    }
    
    .work{
         max-width: 100%;
        height: auto;
    }
    
    .select-list{
        width: 100%;
        height: 80px;
        margin: 20px auto 20px;
    }
    
    .select-btn{
        width: 30px;
        height: 30px;
        border-radius: 50%;
        margin-bottom: 20px;
    }
    
    .select-finish{
        width: 30px;
        height: 30px;
        border-radius: 50%;
    }
    
    .allows{
        width: 100%;
    }
    
    .works-image{
        width: 100%;
        height:300px;
        margin: 0px 0 0;
        line-height: 300px;
    }
    
    .works-left{
        top:300px;
        left: 0;
    }

    .works-right{
        top:300px;
        right: 0;
    }
    
    .slides {
        width:100%;
        margin: 0 auto;
        height: 300px;
        max-width: 400px;
        overflow: none;
    }

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

    .slides ul .slide{
        width: 100%;
        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-image .top-item {
        max-width: 100%;
        width: 90%;
        height: auto;
        min-width: 250px;
    }
    

    /*作品説明欄画面*/
    
    .work-title{
        padding: 70px 0 70px;
    }
    
    .work-title h1{
        font-size: 37px;
    }
    
    .work-memo-wrap {
        width: 100%;
        max-width: 480px;
    }

    .work-memo {
        padding: 10px 20px;
        display: block;
        align-items: center;
        border-bottom: none;
        /*border-bottom: 1px solid #D36000;*/
    }

    .work-memo-item {
        width: 100%;
        border-bottom: 1px solid #D70012;
    }

    .work-memo-item h2 {
        text-align: left;
        line-height: 150%;
    }

    .work-memo-text {
        padding-left: 0px;
        width: 100%;
        max-width: 100%
    }
    
     /*ページ推移画面*/
    .allows-wrap{
        width: 100%;
    }
    
    .left-allow{
        left: 30px;
        width: 100%;
        margin: 0 0 30px;
    }
    
    .right-allow{
        right: 30px;
        width: 100%;
    }
    
    
    /*ランダム画面*/
    
    .randomWrap-title{
        width: 100%;
    }
    
    .randomWrap-images{
        width: 100%;
        display: block;
        margin: 0 auto;
        max-width: 400px;
    }
    
    .randomWrap-image1,.randomWrap-image2,.randomWrap-image3{
        width: 100%;
        margin: 0 auto 50px;
        max-width: 300px;
    }




}