@charset "UTF-8";
body{
background: #000;
}
#opBG{
position: fixed;
width: 100%;
height: 100%;
background: #FFF;
z-index: 26;
}
#loading{
width: 100%;
height: 100%;
background: url('images_n/loading.gif') center center no-repeat;
background-size: 14%;
}
#canvas{
width: 226px;
height: 420px;
position: absolute;
top:50%;
left: 50%;
margin-left: -113px;
margin-top: -223px;
z-index: 26;
}
#mainLogo{
background: url('images_n/mainlogo.png') center center no-repeat;
background-size: 100%;
width: 226px;
height: 420px;
position: absolute;
top:50%;
left: 50%;
margin-left: -113px;
margin-top: -223px;
}
/* ------------------------------
   loopSlider
------------------------------ */

.loopSliderWrap {
top: 50%;
left: 0;
margin-top:0;
height: 100%;
overflow: hidden;
position: absolute;
z-index: 23;
}
.loopSlider {
margin: 0 auto;
width: 100%;
height: 100%;
text-align: left;
position: relative;
overflow: hidden;
}
.loopSlider ul {
height: 100px;
float: left;
overflow: hidden;
}
.loopSlider ul li {
width: 90px;
height: 100px;
float: left;
display: inline-block;
vertical-align: middle;
}
.loopSlider ul li a {
display: block;
width: 80px;
height: 80px;
margin: 10px 5px;
vertical-align: bottom;
font-size: 0;
}
.loopSlider ul li a img {
width: 80px;
height: 80px;
vertical-align: bottom;
}
.loopSlider ul li a img {
-moz-transition: -moz-transform 0.3s ease-in-out;
-webkit-transition: -webkit-transform 0.3s ease-in-out;
-o-transition: -o-transform 0.3s ease-in-out;
-ms-transition: -ms-transform 0.3s ease-in-out;
transition: transform 0.3s ease-in-out;
}
.loopSlider ul li a img:hover {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}
 
/* ------------------------------
   CLEARFIX ELEMENTS
------------------------------ */
.loopSliderWrap:after {
content: "";
display: none;
clear: none;
}


/*共通*/
.subBtn{
width:33%;
max-width: 200px;
padding: 3% 0;
font-size: 2.8vw;
text-decoration: none;
display: inline-block;
font-weight: bold;
}
.subBtn span{
display: block;
font-size: 2.2vw;
}

/*作品*/
#works{
position: relative;
/*本番修正 background:url(common_n/images/dot_light.png) bottom left #000;*/
background: url('images_n/dot.png') #4D4D4D;
}
#works h2{
text-indent: -9999px;
width: 40%;
max-width: 300px;
background: url('images_n/category_w.png') right top no-repeat;
background-size: contain;
position: absolute;
z-index: 1;
top:0;
right:0;
}
#works section{
font-size: 0;
position: relative;
overflow: hidden;
width: 100%;
}
#doraemon{
background:transparent;
position: relative;
}
#crayon{
position: relative;
}
#joker{
background:transparent;
position: relative;
}
#warau{
background:transparent;
position: relative;
}
#takagi3{
background:transparent;
position: relative;
}
#ashibe{
background:transparent;
position: relative;
}
#works figure{
width: 100%;
display: block;
vertical-align: bottom;
font-size: 0;
}
#works figure img{
width: 100%;
height: auto;
vertical-align: bottom;
}
#works h3{
position: absolute;
width: 100%;
height: 100%;
display: block;
text-indent: -9999px;
}
#doraemon h3{
background: url('images_n/w_logo_d.png') center center no-repeat;
background-color:transparent;
background-size: contain;
}
#crayon h3{
background: url('images_n/w_logo_c.png') center center no-repeat;
background-color:transparent;
background-size: contain;
}
#joker h3{
background: url('images_n/w_logo_j.png') center center no-repeat;
background-color:transparent;
background-size: contain;
}
#warau h3{
background: url('images_n/w_logo_w.png') center center no-repeat;
background-color:transparent;
background-size: contain;
}
#takagi3 h3{
background: url('images_n/w_logo_t.png') center center no-repeat;
background-color:transparent;
background-size: contain;
}
#ashibe h3{
background: url('images_n/w_logo_a.png') center center no-repeat;
background-color:transparent;
background-size: contain;
}
#works nav{
padding: 6% 0 0 0;
}
#works .subBtn{
color:#000;
background: #FFF;
margin: 0 0.5%;
}


/*会社概要*/
#company{
background: #FFF;
position: relative;
}
.kazari{
width: 100%;
}
.kazari ul {
list-style: none;
margin: 0;
padding: 0;
font-size: 0;
}
.kazari li{
display: inline-block;
}
.kazari li img{
width: 100%;
height: auto;
}
#company h2{
text-indent: -9999px;
width: 40%;
max-width: 300px;
background: url('images_n/category_c.png') right top no-repeat;
background-size: contain;
position: absolute;
z-index: 1;
top:0;
right:0;
}
#company table{
margin: 10% auto 0 auto;
border-spacing: 2px;
width: 90%;
}
#company td{
text-align: left;
font-size:2.8vw;
color: #666;
padding: 2%;
}
#company tr:nth-of-type(even){
background: #F6F6F6;
}
#company tr:nth-of-type(odd){
background: #EFEFEF;
}
#company td:first-child{
text-align: right;
width: 30%;
}
#gmap{
width:100%;
vertical-align: bottom;
}
#company .subBtn{
color:#FFF;
margin: 8% 0 16% 0;
padding-left: 5.5%;
background: url('images_n/icon_mail.png') 20% center no-repeat #E60000;
background-size: 15%;
width:30.3%;
}

/*フッタ*/
footer{
background:#FFF;
font-size: 0;
}
footer section{
padding: 5% 0 2.5% 0;
}
footer section h3{
text-indent: -9999px;
}
footer section a{
font-size: 0;
display: inline-block;
width: 22%;
max-width: 110px;
height: auto;
margin: 1% 0.5% 0.5% 0.5%;
border: #999 solid 1px;
}
footer section a img{
width: 100%;
height: auto;
vertical-align: bottom;
}
footer p{
font-size:2vw;
color: #666;
padding: 1%;
}
.cr{
padding: 1em 0 2em 0;
font-size: 2.4vw;
color: #FFF;
}

@media screen and (min-width: 768px){

#loading{
background: url('images_n/loading.gif') center center no-repeat;
background-size: 50px;
}

/*共通*/
.subBtn{
width: 180px;
padding: 8px;
font-size: 15px;
}
.subBtn span{
font-size: 12px;
}

#mainLogo{
width: 270px;
height: 500px;
margin-left: -135px;
margin-top: -265px;
}

#canvas{
width: 270px;
height: 500px;
margin-left: -135px;
margin-top: -265px;
}


/* ------------------------------
   loopSlider
------------------------------ */

.loopSliderWrap {
margin-top: 0px;
}
.loopSlider ul {
height: 120px;
}
.loopSlider ul li {
width: 120px;
height: 120px;
}
.loopSlider ul li a {
width: 100px;
height: 100px;
margin: 10px;
}
.loopSlider ul li a img {
width: 100px;
height: 100px;
}


/*ニュース*/
#news ul{
font-size: 16px;
font-weight: bold;
}
#news ul li span{
font-size: 13px;
}
#news .new{
font-size: 13px;
margin-right: 5px;
padding: 2px;
}

/*作品*/
#doraemon{
background:#3A9BAF;
}
#crayon{
background:#FFCE00;
}
#joker{
background:#7E2F80;
}
#warau{
background:#000;
}
#takagi3{
background:#f27392;
}
#ashibe{
background:#59ae9b;
}
#doraemon h3{
background-color: #3A9BAF;
}
#crayon h3{
background-color: #FFCE00;
}
#joker h3{
background-color: #7E2F80;
}
#warau h3{
background-color: #000;
}
#takagi3 h3{
/*background: url('images_n/w_logo_t_pc.png') center center no-repeat;
background-color:transparent;
background-size: contain;*/
background-color: #f27392;
}
#ashibe h3{
background-color::#59ae9b;
}
#works figure{
width: 50%;
height: 100%;
position: relative;
vertical-align: middle;
}
#works h3{
position: relative;
width: 50%;
vertical-align: middle;
height: 100%;
font-size: 0;
}
#works section:nth-child(2n+1) {
text-align: left;
}
#works section:nth-child(2n) {
text-align: right;
}
#works section:nth-child(2n) h3,
#works section:nth-child(2n) figure{
display: inline-block;
}
#works section:nth-child(2n+1) h3{
float: right;
}
#works nav{
padding: 6% 0 2% 0;
}

/*会社概要*/
#company table{
width: 690px;
}
#company td{
font-size:16px;
padding: 10px;
}
#company table{
margin: 120px auto 0 auto;
}
#company .subBtn{
color:#FFF;
margin: 30px 0 70px 0;
padding-left: 30px;
background: url('images_n/icon_mail.png') 30px center no-repeat #E60000;
background-size: 12%;
width:150px;
}

/*フッタ*/
footer section{
padding: 30px 0 10px 0;
}
footer section a{
margin: 3px;
}
footer p{
font-size:12px;
padding: 5px;
}
#ftrLogo{
margin: 10px auto 0 auto;
}
.cr{
font-size: 12px;
}

}


@media screen and (min-width: 1280px){

#doraemon{
background:#3A9BAF;
}
#crayon{
background:#FFCE00;
}
#joker{
background:#7E2F80;
}
#warau{
background:#000;
}
#takagi3{
background:#f27392;
}
#ashibe{
background:#59ae9b;
}
/*
#doraemon{
background:#13879F;
}
#crayon{
background:#D89800;
}
#joker{
background:#711B74;
}
#warau{
background:#151515;
}*/
/*作品*/
#works section{
height: 360px;
margin: 0 auto;
}
#works section a{
display: block;
width: 1280px;
margin: 0 auto;
}
#works h3{
width: 640px;
height: 360px
}
#works figure{
width: 640px;
height: 360px
}

}