@import (once) "font.less";
@import (once) "default.less";


/* body ///////////////////////*/
/*
.design{
.pa;
z-index:0;
width:100%;
height:15000px;
background:url("../top_1.jpg") no-repeat center 0;
opacity:.3;
}
*/

body{
background:url("../image/logo_large.png") no-repeat 0 0;
background-position:-100px 700px;
}

.body{
.pr;
z-index:1;
background:rgba(255,255,255, .8);
}

@media (max-width:1000px) {
body{
background:url();
}
}


/* main ///////////////////////*/
.main{
.pr;
padding:120px 0 0 0;

.wrap{
.oh;
width:84%;
height:700px;
}

.image{
z-index:10;
width:100%;
height:100%;
}

.title{
.pa;
z-index:100;
bottom:140px;
right:7%;
}

.bg{
.pa;
background:@c3;
width:50%;
height:700px;
bottom:-100px;
right:0;
z-index:0;
}

}


@media (max-width:1000px){
.main{
padding:70px 0 0 0;

.wrap{
height:470px;
}

.title{
z-index:100;
top:250px;
right:50vw;
margin-right:-25vw;
img{
width:50vw;
}
}

.bg{
width:80%;
height:470px;
bottom:-50px;
}

}
}


@media (max-width:500px){
.main{
padding:60px 0 0 0;

.wrap{
width:85%;
height:300px;
}

.title{
z-index:100;
top:auto;
bottom:-60px;
right:auto;
left:10%;
margin-right:0;
img{
width:230px;
}
}

.bg{
width:95%;
height:320px;
bottom:-80px;
}

}
}


/* contact mc ///////////////////////*/


.mc{
padding:0 0 80px 0;
margin-top:-80px;

.wrap{
width:1100px;
}

}

@media (max-width:1200px) {
.mc{

.wrap{
width:auto;
}

}
}

@media (max-width:1000px) {
.mc{
.dn;

}
}



/* news ///////////////////////*/
.news{
padding:80px 0 60px 0;
margin:0;
}

@media (max-width:1000px){
.news{
padding:130px 0 30px 0;

}
}



/* about ///////////////////////*/
.about{
padding:80px 0 0 0;

article{
padding:50px 0;
background:url(../image/about_image.jpg) no-repeat 100% 0;
background-size:contain;
}

.wrap{
background:@g1;
width:600px;
padding:50px;
}

header{
border-left:3px @c2 solid;
padding:10px 0 10px 20px;
}
.text{
.db;
padding:20px 0;
}
.link a{
background:@c3;
width:250px;
}


}


@media (max-width:1000px){
.about{
padding:50px 0 0 0;

article{
padding:250px 0 0 0;
}

.wrap{
width:100%;
padding:20px;
}
header{
border-left:3px @c2 solid;
padding:10px 0 0 20px;
}
.link a{
width:100%;
}

}
}

@media (max-width:500px){
.about{

article{
padding:200px 0 0 0;
}

}
}


/* pickup ///////////////////////*/
.pickup{
padding:80px 0 0 0;

dl{
.dt;
width:100%;
}
dd{
.dtc;
width:33.3%;
padding:5px;
}

.c1{
background:@c1;
}
.c2{
background:@c2;
}
.c3{
background:@c3;
}

.wrap{
.pr;
.oh;
width:100%;
height:400px;
}

img{
.pa;
top:0;
width:100%;
height:100%;
.of;
opacity:.3;
transition:.5s;
}

.text{
.pa;
color:#FFFFFF;
bottom:30px;
left:30px;
}
small{
.ffgb;
letter-spacing:.1em;
}
h3{
font-size:19pt;
letter-spacing:.1em;
.ffgb;
}

a:hover >  .wrap img{
width:110%;
height:110%;
opacity:.5;
top:-5%;
}

}


@media (max-width:1000px){
.pickup{
padding:50px 0 0 0;

dl{
.db;
}
dd{
.db;
width:100%;
padding:0;
}

.wrap{
height:300px;
}

}
}

@media (max-width:500px){
.pickup{

.wrap{
height:200px;
}

.text{
bottom:20px;
left:20px;
}

}
}


/* service ///////////////////////*/
.service{
padding:80px 0 0 0;

header{
.tac;
padding:0 0 40px 0;
}
header .line{
border-bottom:3px @c2 solid;
width:30px;
margin:20px auto;
}

.wrap{
.pr;
.dt;
max-width:1000px;
.center;
z-index:10;
}

section{
.dtc;
padding:0 10px;
}

dt{
.pr;
.oh;
width:100%;
height:300px;
background:#FFF;
}

dt img{
.pa;
top:0;
width:100%;
height:100%;
transition:.5s;
.of;
}

dd{
background:#FFF;
padding:30px;

h4{
font-size:14pt;
letter-spacing:.1em;
.ffgb;
}
small{
font-size:9pt;
}
.line{
width:20px;
margin:10px 0;
}
} /* dd */

a:hover >  dl dt img{
width:110%;
height:110%;
opacity:.5;
top:-5%;
}


.sec1{
h4,
small{
color:@c3;
}
.line{
border-top:2px @c3 solid;
}
} /*sec1*/


.sec2{
h4,
small{
color:@c1;
}
.line{
border-top:2px @c1 solid;
}
}/*sec2*/

.bg{
background:@g1;
height:400px;
width:100%;
margin-top:-320px;
}

}


@media (max-width:1000px){
.service{
padding:50px 0 0 0;

header{
padding:0 0 30px 0;
}

.wrap{
.db;
}

section{
.db;
padding:0;
margin:0 0 20px 0;
width:100%;
}

dt{
height:300px;
}

dd{
padding:20px 0;
border-top:15px @g1 solid;
border-bottom:15px @g1 solid;
}

.bg{
.dn;
}

}
}

@media (max-width:500px){
.service{

dt{
height:200px;
}

}
}