/*-------------------------------
clearfix 
--------------------------------*/
.cf:before,
.cf:after {
  content:"";
  display:table;
}
.cf:after {
  clear:both;
}
.cf {
  zoom:1;
}

/*----------------------------------
common
-----------------------------------*/
html{
  font-size: 62.5%;
}
body{
  width:100%;
  font-family:Verdana,'ヒラギノ角ゴ ProN W3',"Hiragino Kaku Gothic ProN",Meiryo, メイリオ, sans-serif;
}
img{
  max-width: 100%;
  height:auto;
}
li{
  list-style-type:none;
}
#wrapper{
  /*max-width:1500px;*/
  min-width:1000px;
}
.contents{
  margin:0 auto;
  width: 100%;
  max-width:1000px;
}

/*page ttl*/
h2{
  display:table;
  width:100%;font-weight: normal;
}
h2 span.big{
  display:table-cell;
  width:70%;
  font-size: 4.6em;
  font-family: 'Droid Serif', serif;
}
h2 span.sub{
  font-size: 1.2em;
  display:table-cell;
  width:30%;
  text-align:right;
  vertical-align:middle;
}
#ttlBox h2{
  margin:60px auto 40px;
}
/*----------------------------------
header
-----------------------------------*/
header{
  margin:15px auto 6px;
  width:1000px;
  padding: 0 10px;
}
header p.headTxt{
  margin:0 0 30px;
  text-align:right;
  font-size: 11px;
  color:#666;
}
header h1{
  width:25%;
  float:left;
}
header nav{
  width:70%;
  float:right;
}
header nav ul{
  text-align:right;
  margin:12px 0;
}
header nav li{
  padding:0 28px;
  font-size: 20px;
  font-family: 'Droid Serif', serif;
  display:inline-block;
  color:#ccc;
  text-align:center;
}
header nav li span{
  display:block;
  margin:8px 0 0;
  clear:both;
  font-size:11px;
  font-family:Verdana,'ヒラギノ角ゴ ProN W3',"Hiragino Kaku Gothic ProN",Meiryo, メイリオ, sans-serif;
  color:#ccc;
}
header nav li a span{
  color:#777;
}
header nav li a{
  color:#000;
  text-decoration:none;
}
header nav li a.active{
  border-bottom:2px solid #ccc;
}
header nav li a:hover{
  opacity: 0.6;
}
/*----------------------------------
footer
-----------------------------------*/
footer{
  margin:45px auto 30px;
  width:1000px;
  padding: 0 10px;
}
footer a{
  color:#000;
}
footer .left{
  width:60%;
  float:left;
  border-right:1px solid #CDCDCD;
}
footer .left p{
  margin:10px 0 0;
  font-size:12px;
  line-height:1.5;
}
footer .right{
  width: 38%;
  float: right;
}
footer p.footLogo{
  margin-top:-6px; 
  width:30%;
}
footer .right ul{
  margin:0 0 20px;
  text-align:right;
}
footer .right ul li{
  padding:0 15px;
  display:inline-block;
  font-family: 'Droid Serif', serif;
  font-size: 1.4em;
  color:#ccc;
}
footer .right ul li a{
  color:#000;
  text-decoration:none;
}
footer .right ul li a.active{
  border-bottom:2px solid #ccc;
}
footer .copylight{
  font-size: 1.2em;
  text-align:right;
}

/*----------------------------------
index
-----------------------------------*/
#id_index .gridMenu a{
  text-decoration:none;
}
#id_index .gridMenu li{
  overflow:hidden;
  position:relative;
  color:#fff;
}
#id_index .gridMenu li#right{
  width:58%;
  background:#484848;
}
#id_index .gridMenu p.leed{
  font-size: 12px;
  line-height:1.5;
  color:#fff;
}
#id_index .menuArea{
  text-align:center;
  position:relative;
}
#id_index #marketing .menuArea:after{
  content:url(../img/top/arrow_gray.png);
  position:absolute;
  right:-20px;
  top:45%;
  z-index:200;
}
#id_index #event .menuArea:after{
  content:url(../img/top/arrow.png);
  position:absolute;
  right:-20px;
  top:50%;
  z-index:200;
}
#id_index .menuArea .inner{
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
#id_index .menuArea .inner p.cSoon{
  display:inline-block;
  border:1px solid #fff;
  font-size: 16px;
  padding:6px;
}
#id_index .menuArea .inner p.check{
  display:inline-block;
  font-size: 16px;
  padding:6px 15px 6px 6px;
  background: #fff;
  color:#484848;
  position:relative;
}
#id_index .menuArea .inner p.check:after{
  content:url(../img/common/mini_arrow.png);
  position:absolute;
  right:5px;
  top:5px;
}
#id_index .menuArea .inner span.name{
  color:#fff;
  margin:20px 0;
  font-size: 24px;
  display:block;
  font-family: 'Droid Serif', serif;
}
#id_index .menuArea .inner 
#id_index .gridMenu a{
  color:#fff;
}
#id_index .gridMenu a .inner{
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    -ms-transition: 0.5s;
    transition: 0.5s;
}
#id_index .gridMenu a:hover .inner{
  filter: alpha(opacity=60);
  -moz-opacity:0.60;
  opacity:0.60;
}

#id_index .gridMenu a img.ph{
  -webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
#id_index .gridMenu a:hover img.ph{
	-webkit-transform: scale(1.05);
	transform: scale(1.05);
}
/* Telemarketing */
#id_index .gridMenu #marketing{
  width:75%;
  float:left;
 }
#id_index .gridMenu #marketing .menuArea{
  width:40%;
  height:100%;
  background: #484848;
  float:left;
  position:relative;
  z-index:100;
  right:0;
}
#id_index .gridMenu #marketing .ph{
  width:60%;
  float:left;
}
/*about*/
#id_index .gridMenu #about{
  width:25%;
  float:left;
  height:100%;
  background: #000;
}
/*Trade*/
#id_index .gridMenu #trade{
  width:42%;
  float:left;
  clear:both;
  background: #000;
}
#id_index .gridMenu #trade .menuArea{
  width:100%;
  background: #000;
  position:relative;
  z-index:100;
  right:0;
}
#id_index .gridMenu #trade .menuArea:after {
    content: url("../img/top/arrow_top.png");
    position: absolute;
    left: 0;
    right: 0;
    top: -22px;
    z-index: 200;
}
#id_index .gridMenu #trade .inner{
  padding:10% 0;
  transform: translateY(0%);
  /*
  padding:80px 0;
  -webkit-transform: translateY(0%);
  -ms-transform: translateY(0%);
  transform: translateY(0%);
  */
}
#id_index .gridMenu #trade .ph{
  width: 100%;
}
/*event*/
#id_index .gridMenu #event{
  width:100%;
  height:357px;
}
#id_index .gridMenu #event .menuArea{
  width:40%;
  height:100%;
  background: #000;
  float:left;
  position:relative;
  z-index:100;
  right:0;
}
#id_index .gridMenu #event .ph{
  width:60%;
  float:left;
}
/*contact*/
#id_index .gridMenu #contact{
  width:100%;
}
#id_index .gridMenu #contact .menuArea{
  width:100%;
  height:500px;
  background: #484848;
  right:0;
}
#id_index .gridMenu #contact .number{

  font-size: 14px;
  line-height: 1.3;
}
#id_index .gridMenu #contact .freedial{
  margin: 0 0 15px;
  display: inline-block;
  font-size: 30px;
  border-bottom: 1px solid #787878;
}
/*----------------------------------
about
-----------------------------------*/
#id_about #tableBox a{
  color:#666;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  -ms-transition: 0.5s;
  transition: 0.5s;
}
#id_about #tableBox a:hover{
  filter: alpha(opacity=60);
  -moz-opacity:0.60;
  opacity:0.60;
}
#id_about #ttlBox{
  margin-bottom:30px;
}
#id_about #ttlBox p.concept{
  font-size: 1.4em;
  line-height:1.8;
}
#id_about #tableBox{
  padding:50px 0;
  background: #ececec;
}
#id_about #tableBox table{
  font-size: 1.4em;
  line-height:1.8;
}
#id_about #tableBox th,
#id_about #tableBox td{
  padding-bottom: 15px;
}
#id_about #tableBox th{
  text-align:left;
  width:100px;
  vertical-align:top;
}
#id_about #tableBox td dl.list dd{
  margin-bottom: 1em;
}
#id_about #tableBox td dl.list dt{
  font-weight: bold;
}

/*----------------------------------
404
-----------------------------------*/
#notBox.contents{
  margin-top: 140px;
  padding:50px;
  max-width:600px;
  border:1px solid #000;
  text-align:center;
}
#notBox h1{
  margin-bottom: 30px;
}
#notBox h1 img{
  width:25%;
}
#notBox h2{
  margin:0 0 20px;
  font-size: 1.7em;
  font-weight: bold;
  line-height:1.3;
}
#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;
}
/*----------------------------------
SP_only
-----------------------------------*/
@media only screen and (max-width: 799px){
/*PC hidden*/
.pc{
  display:none;
  }
}



/*----------------------------------
PC_only
-----------------------------------*/
@media only screen and (min-width: 800px){
/*SP hidden*/
.sp{
  display:none;
  }
}