@media screen and (max-width: 950px){
    body {
        font-size: 93%
    }
    .border-x {
        width: 100%;
        height: auto;
        background: #fefefe;
    }

    /* header*/
   
 header {
      width:100%;
      height:auto;
      margin:0;
    }
    header nav {
        margin :10% 0%;
        border-top:10px solid rgb(129, 202, 155);
    }
    nav li {
        border-bottom:0.5px solid rgb(223, 223, 223);
 
    }
    nav li a {
        display: block;
        padding:5% 0;
    }
    nav li p {
        width:100%;
        height:auto;
        font-size:100%;
    }
    header #logo {
        width:73%;
        height:auto;
        margin:5% 6% 1% 12%;
        /*padding:0% 1% 1%;*/
        float: right;

    }
    #panel-btn { 
        display: inline-block; 
        position: relative; 
        width: 10%; 
        height:10%; 
        margin:0 2% 5%;
        border-radius: 70%; 
        background: rgb(236, 80, 80); }

    #panel-btn:hover { 
        background: #21aa6a; 
        color:#ffffff;
       
    }
    #panel-btn-icon { 
        display: block; 
        position: absolute; 
        top: 0; 
        left: 0; 
        width: 100%; 
        height:4px; 
        margin: -47% 17% 0;
        background: #21aa6a; 
        transition: .3s; }
    #panel-btn-icon:before, #panel-btn-icon:after { 
        display: block; 
        content: ""; 
        position: absolute; 
        top: 0; 
        left: 0; 
        width: 100%; 
        height: 4px; 
        /*margin: -3% 5% 5%;*/
        background: #21aa6a; 
        transition: .3s; }
    #panel-btn-icon:before { 
        margin-top: -23%;
     }
    #panel-btn-icon:after { 
        margin-top: 22%; 
    }
    
    #panel-btn .close { background: transparent; }
    #panel-btn .close:before, #panel-btn .close:after { margin-top: 0; }
    #panel-btn .close:before { transform: rotate(-45deg); -webkit-transform: rotate(-45deg); }
    #panel-btn .close:after { transform: rotate(-135deg); -webkit-transform: rotate(-135deg); }
    
    #panel { 
        display:none; 
        width: 100%; 
        margin: 0; 
        padding: 0; 
        background: #f1fffb;
        text-align: center; 
    }
/*contents*/
/*main_view*/
    .contents {
    width:100%;
    height:auto;
    }
    .contents #main {
        position:relative;
        top:-42px;
    }
    .contents #main_img img {      
        position:absolute;
        top:-8.5%;
        left:0;
        z-index:1;
      } 
    .contents #main_img img.active{
        z-index:3;
      }

/*  coordinator*/
      .contents #main .coordinator_color {
	    width: 100%;
	    height: auto;
        margin:55% auto 0;
        display: table;
    }
    .contents #main .coordinator_color .coordinator {
        margin:4% auto 0%;
	    width: 100%;
        height: auto;
        background:rgb(238, 238, 238); 

    }
    .contents #main .coordinator_color  .coordinator .coordinator_1 {
        display: table-cell;
        padding:0.5%;
        font-size:90%;
    }
    .contents #main .coordinator_color .coordinator h2 {
        margin:24% 2% 5%;
        padding:2%;
        font-size:100%;
    }
    .contents #main .coordinator_color .coordinator .coordinator_1 ul li {
        font-size:70%;
    }
    .contents #main .coordinator_color .intro{
        width:100%;
        height:auto;
        margin:25% auto 5%;
        padding: 3%;
        text-align: center;
    }
    .contents #main .coordinator .otoiawase {
        /*width:90%;
        height:auto;*/
        padding-bottom:5%;
    }
    .contents #main .coordinator .otoiawase p {
        width:75%;
        margin:0 auto;
        padding:3%;
        border: 1px solid #8d8d8d;
        text-align: center;
    }
    .contents #main .coordinator .otoiawase a {
        padding:1%;
        margin-top:10%;
        font-size:120%;
        color:rgb(0, 148, 79);
        font-weight:bold;
    }
    .contents #main .coordinator .otoiawase a img {
        width:35px;
        padding-right:1%;
        vertical-align: middle;
    }
    .contents #main .coordinator .coordinator_1 a {
        display: block;
    }

    /*work*/
    .contents #main .work_back{
        width:100%;
        height:auto;
    }
    .contents #main .work {
        margin:30px auto 30px;
        font-size:80%;
    }

    .contents #main .work h2 {
        margin-left:1%;
        padding:8% 0 2%;
        text-align: center;
    }  

    /*TV-CM 絵コンテ、タブ１*/
    .tab {
        overflow:hidden;
    }
    .tab li{
        background:rgb(170, 169, 169); 
        padding:5px; 
        float:left; 
        margin-right:5px;
        color:rgb(29, 126, 61);
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
    }
    .tab li.select{
        background: rgb(227, 255, 237);
    }
    .conte li{
        padding:10px;
        background:rgb(227, 255, 237);
        }
    .conte li .padding{
        padding-top:5px;
    }
    .conte li img {
        width:100%;
        padding:0px ; 
    }
    .hide {
        display:none;
    }

/*TV-CM 絵コンテ、タブ2*/
.tab2 {
    overflow:hidden;
    margin:30px auto 0px;
}
.tab2 li{
    background:rgb(170, 169, 169); 
    padding:5px; 
    float:left; 
    margin-right:5px;
    color: rgb(185, 75, 14);
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
.tab2 li.select{
    background: rgb(255, 231, 216); 
}
.conte2 li{
    padding:10px;
    background: rgb(255, 231, 216); 
    }
.conte2 li .padding{
    padding-top:5px;
}
.conte2 li img {
    width:100%;
    padding:0px; 
 
}
/*グラフィックカンプ、タブ3*/
.tab3 {
    overflow:hidden;
}
.tab3 li{
    background:rgb(170, 169, 169); 
    padding:5px; 
    float:left; 
    margin-right:5px;
    color: rgb(185, 29, 216);
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
.tab3 li.select{
    background: rgb(250, 221, 255); 
}
.conte3 li{
    padding:10px;
    background:rgb(250, 221, 255); 
}
.conte3 li .padding{
    padding-top:5px;
}
.contents #main .rule {
    width:85%;
    margin:0 auto 5%;
}





/*  concept */
.contents .concept_work {
    width:100%;
    height:auto;
}
.contents .concept_work .concept_text {
    width:95%;
    margin:0 auto;
}
.contents .concept_work .concept_text h2 {
    font-size:150%;
    margin:10% 0 3%;
    padding-bottom:5%;
}
.contents .concept_work .concept_text p {
    width:90%;
    margin:0 auto;
}
.contents .concept_work .concept_text .profile {
    width:65%;
    margin:0 auto;
}
.contents .concept_work .concept_text .profile_text {
    margin:5% auto 10%;
}

/*  /concept */
/* conte */
.contents .conte_work {
    width:100%;
    height:auto;
}
.contents .conte_work .conte_work_menu h2{
    font-size:150%;
    margin:10% 0 3%;
    padding-bottom:0 0 5% 3%;
}
.contents .conte_work .conte_work_menu ul {
    width:100%;
    height:auto;
    text-align: center;
}
.contents .conte_work .conte_work_menu ul li {
        display: inline-block;
        width: 49%;
        height:auto;
        padding:1.5%;
        font-weight: bold;
        border:0.5px dotted #FFFFFF;
        font-size:70%;
        background-color:#08926b;
    }
.contents .conte_work .conte_work_menu ul li a {
        color:#FFFFFF;
        display: block;
    }
.contents .conte_work .realcolor {
    width:100%;
    height:auto;
    margin:15% 0 20%;
}
.contents .conte_work .realcolor h3 {
    margin-bottom:5%;
    padding-top:13%;
    padding-left:3%;
    font-size:130%;
    border-bottom:1px solid #bbbbbb;
}
.contents .conte_work .realcolor ul {
    width:99%;
    margin:0 auto;
}

.contents .conte_work .realcolor li {
    width:33.3%;
    float:left;
 }
 .contents .conte_work .panel .more {
    font-size:90%;
    margin-left:40%;
    color:rgb(73, 73, 73);
}
.contents .conte_work .panel .more:hover {
    color: #fff;
    background: #00b49b;
    padding:3px;
  }
  .contents .conte_work .panel .hideContent {
    display: none;
  }

  .contents .conte_work .panel .open {
    display: block;
  }


/*/conte */
/* pricelist*/
.contents .pricelist_work {
    width:100%;
    height:auto;
}
.contents .pricelist_work .pricelist_work_menu {
        width:90%;
        margin:0 auto 10%;
        padding:0% 3% 5%;
        background-color:rgb(241, 252, 247);
        box-shadow: 6px 6px 6px #999;
        }
.contents .pricelist_work .pricelist_work_menu h2 {
            font-size:150%;
            margin:10% 0 1%;
            padding-bottom:5%;
        }
.contents .pricelist_work .pricelist_work_menu table{
        width:95%;
        }
.contents .pricelist_work .pricelist_work_menu th{
            font-size: 102%;
            text-align: left;
            padding-top: 10%;
       
        }
.contents .pricelist_work .pricelist_work_menu table td {
    border-bottom:dotted 1px rgb(168, 168, 168);
    font-size: 100%;
    padding:3%;
            }   
.contents .pricelist_work .pricelist_work_menu .right {
    text-align: right;
}


/* /pricelist*/
 /*  about page  */
 .contents .about_work {
    width:100%;
    margin:0 auto 10%;
    }
.contents .about_work .company h2 {
    font-size:150%;
    margin:10% 0 1%;
    padding-bottom:5%;
    }
    
.contents .about_work .company {
    width:90%;
    margin:0 auto 10%;
    padding:0% 3% 5%;
    background-color:rgb(241, 252, 247);
    box-shadow: 6px 6px 6px #999;
    }
.contents .about_work .company ul li {
    font-size:90%;
    }
  /*  /about page  */  
   /* contact*/
   .contents .contact_work {
    width:100%;
    margin:0 auto 10%;
}
.contents .contact_work h2 {
    font-size:100%;
    margin:10% 5% 0;
    padding-bottom:5%;
    }

/*footer*/
footer {
    width:100%;
    height:auto;
    box-sizing: border-box;
    background-color:#c6e5dc;
    font-size:90%;
    border-top:solid 1px #878787;
  }
  footer h3 {
    display: none;
}
footer #nav {
    width:auto;
}
footer #nav li {
    padding:20px 0px 10px 10px;
    border-top:1px dotted #878787;
}
footer #nav li a{
    display: block;
}

footer #footer_logo {
    width:50%;
    margin:10px auto;
}
footer #copyright {
    text-align:center;
    padding-bottom:10px;
}
}

/*
@media screen and (max-width: 768px){

    .contents #main_img img{
        top:-12%;
    }
}