@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;
    }
    
    .work-title h1:first-child{
        display: none;
    }
    
    .work-title h1:last-child{
        display: block;
    }


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

    .work-memo {
        padding: 10px 20px;
        display: block;
        align-items: center;
        border-bottom: none;
    }

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

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

    .work-memo-text {
        padding-left: 0px;
        width: 100%;
        max-width: 100%
    }
    
    .work-logo{
        padding: 20px 0 0;
    }

    /*様々な広告媒体の例*/

    .work-photos-wrap img {
        width: 100%;
        height: auto;
    }
    
  /*      .work-photos-wrap{
            padding: 0 0 0;
    }*/

    .work-photos-upper {
        width: 100%;
        max-width: 350px;
    }

    .upper-left {
        float: none;
        padding-right: 0px;
        padding: 20px 0 0;
    }

    .upper-right {
        float: none;
        padding: 20px 0 0;
    }

    .work-photos-under {
        width: 100%;
        max-width: 526px;
        margin: 0 auto;
        display: inline-block;
    }


    /*広告媒体の説明欄*/

    .work-example-wrap {
        width: 100%;
    }

    .work-example-wrap img {
        width: 100%;
        height: auto;
        max-width: 440px;
    }

    .work-examples {
        width: 100%;
        max-width: 440px;
    }

    .work-example p {
        width: 100%;
        max-width: 350px;
    }
    
    
    /* Évianの別案画面*/
    .work-examples{
        width: 100%;
        max-width: 440px;
    }
    
    .work-example:first-child{
        width: 100%;
        max-width: 400px;
    }
    
    .work-example:last-child{
        width: 100%;
        max-width: 300px;
    }
    
    .work-example:first-child p{
        width: 100%;
        max-width: 300px;
    }
    
    .work-example:last-child p{
        width: 100%;
        max-width: 250px;
    }
    
    
    
    /* その他の候補*/
    .work-other-examples-wrap{
        width: 100%;
    }
    
    .work-other-content{
    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;
    }






}