/*----------------------------------
SP_only
-----------------------------------*/
@media only screen and (max-width: 799px){
/*PC hidden*/
.pc{
  display:none;
  }
  
  /*----------------------------------
  common
  -----------------------------------*/
  .contents{
    padding-left:10px;
    padding-right:10px;
    box-sizing:border-box;
  }
  #wrapper{
    max-width:100%;
    min-width: 100%;
  }
  #ttlBox h2{
    margin: 40px auto 15px;
  }

  #ttlBox h2 span.big{
    margin: 40px auto 15px;
    font-size: 3.5em;
  }
  /*----------------------------------
  header
  -----------------------------------*/
  header{
    margin: 10px auto 0;
    width:100%;
    padding: 0px;
  }
  header h1{
    margin-bottom: 10px;
    width:100%;
    text-align:center;
    float:none;
  }
  header h1 img{
    width:45%;
  }
  /*sp menu*/
  header .slidebox{
    color:#fff;
    font-size: 1.7em;
    padding:10px 0;
    background: #484848;
    text-align:center;
  }
  header .slidebox i{
    margin-right: 8px;
  }
  header #spNav ul li{
    color:#ccc;
    font-size: 1.6em;
    text-align:center;
    padding:10px 0;
    border-bottom:1px solid #ccc;
  }
  header #spNav ul li a{
    color:#000;
    text-decoration:none;
  }
  /*----------------------------------
  index
  -----------------------------------*/
  #id_index .gridMenu li{
    width:100% !important;
  }
  #id_index .gridMenu p.leed{
    font-size: 10px;
  }
  #id_index .menuArea .inner span.name{
    margin: 10px 0px;
    font-size: 18px;
  }
  #id_index .menuArea .inner p.cSoon{
    font-size: 10px;
    padding:4px;
  }
  #id_index .menuArea .inner p.check{
    font-size: 10px;
    padding:4px 15px 4px 4px;
  }
  
  /*telemarketing*/
  #id_index .gridMenu #marketing .menuArea {
    width: 45%;
  }
  #id_index .gridMenu #marketing .ph {
    width: 55%;
  }
  #id_index .menuArea .inner{
    padding:10px 0;
  }
  #id_index .gridMenu #marketing .menuArea .icon{
    width:20%;
  }
  #id_index #marketing .menuArea::after, #id_index #event .menuArea:after {
    top: 38%;
    right: -15px;
   -webkit-transform: scale(0.5); 
   -moz-transform: scale(0.5); 
  }
  
  /*about*/
  #id_index #about .menuArea .inner {
    padding: 15px 0px;
    transform: translateY(0%);
  }
  #id_index .gridMenu #about .menuArea .icon{
    width:6%;
  }
  /*trade*/
  #id_index .gridMenu #trade .menuArea{
    background: #484848;
  }
  #id_index .gridMenu #trade .menuArea .icon{
    width:16%;
  }
  #id_index .gridMenu #trade .menuArea:after{
    top:auto;
    bottom: -16px;
    content:url("../img/top/arrow_bottom_gray.png");
   -webkit-transform: scale(0.5); 
   -moz-transform: scale(0.5); 
  }
  /*event*/
  #id_index .gridMenu #event{
    height: auto;
  }
  #id_index .gridMenu #event .ph{
    height: auto;
  }
  #id_index .gridMenu #event .menuArea .icon{
    width:28%;
  }
  /*contact*/
  #id_index .gridMenu #contact .menuArea{
    height: auto;
  }
  #id_index .gridMenu #contact .inner{
      padding: 30px 0px;
      transform: translateY(0%);
  }
  #id_index .gridMenu #contact .menuArea .icon{
    width:13%;
  }
  #id_index .gridMenu #contact .number{
    margin-top: 20px;
  }
  #id_index .gridMenu #contact .number .freedial{
    font-size: 22px;
  }
  #id_index .gridMenu #contact .number a{
    color: #fff;
  }
  /*----------------------------------
  about
  -----------------------------------*/
  #id_about #ttlBox p.concept {
    font-size: 1.3em;
  }
  #id_about #tableBox{
    font-size: 0.9em;
    padding: 20px 15px;
    box-sizing:border-box;
  }
  #id_about #tableBox th{
    width:80px;
  }
  /*----------------------------------
  footer
  -----------------------------------*/
  footer{
    width:100%;
    margin:20px 0 0;
    padding:0;
  }
  footer .left{
    width:100%;
    padding-bottom:15px;
    margin-bottom:10px;
    border-bottom:1px solid #eee;
  }
  footer .right{
    width:100%;
  }

  footer .right ul{
    margin-bottom: 10px;
    width:100%;
    text-align: center;
  }
  footer .right ul li{
    width:100%;
    padding: 10px 0px;
  }
  footer .copylight{
    font-size: 1.1em;
    padding:10px 10px;
    text-align:center;
    width:100%;
    box-sizing:border-box;
  }
  /*----------------------------------
  404
  -----------------------------------*/
  #notBox.contents{
    padding:30px 10px;
    margin-top: 0;
    border:none;
  }
  #notBox h1 img{
    width:50%;
  }
  #notBox h2{
    font-size: 1.4em;
  }
  #notBox h2 span{
    font-size: 1.6em;
  }
  #notBox p{
    font-size:1.4em;
    line-height:1.3;
  }
  #notBox ul{
    margin-top: 50px;
    text-align:center;
  }
  #notBox ul li{
    display:inline-block;
  }
  #notBox ul li a{
    font-size: 1.4em;
    display:block;
    text-decoration:none;
    color:#000;
    padding:5px;
    border:1px solid #000;
  }
  #notBox ul li a:before{
    content:'>';
    margin-right: 0.5em;
    font-size: 0.9em;
  }
}