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



@media (max-width:640px){
}


/* .main ///////////////////////*/
.main{
.pr;
z-index:1;
height:450px;
background:url(../image/top_image.svg) no-repeat center 10px;
h2{
.pr;
padding:20px;
top:120px;
.tac;
background:url(../image/bg_white.png) repeat 0 0;
}

}

@media (max-width:960px){
.main{
background-size:cover;
}
}

@media (max-width:720px){
.main{
height:350px;
h2 img{
height:130px;
}
}
}

@media (max-width:560px){
.main{
height:250px;
h2{
top:50px;
padding:0px;
}
h2 img{
width:300px;
}
}
}



/* .message ///////////////////////*/
.message{
border-top:30px @glay solid;
border-bottom:30px @pink solid;
margin-top:-30px;
padding:40px 0 0 0;
.bg_red;

.icon{
.dib;
.vam;
margin:0 15px;
}
h2{
.dib;
.vam;
img{height:40px; }
}
.text{
.white;
margin:0 400px 0 70px;
padding-bottom:50px;
}
.image{
.pa;
width:320px;
bottom:0px;
right:20px;
}
.more{
.dt;
.right;
margin:20px 0 0 0;
border:2px @white solid;
padding:10px 0 7px 0;
width:230px;
p{
.tac;
.dtc;
.vam;
background:url(../image/point1.svg) no-repeat 90% 0;
font-size:20pt;
letter-spacing:0.2em;
.white;
}
}
.more:hover{
.bg_white;
p{
.red;
background:url(../image/point2.svg) no-repeat 90%0;
}
}

}


@media (max-width:720px){
.message{
.icon{
height:80px;
margin:0 5px 0 0;
}
h2 img{
height:30px;
}
.text{
margin-right:0px;
padding-bottom:140px;
}
.image{
width:200px;
}
.more{
.fn;
}
}
}


@media (max-width:560px){
.message{
padding:30px 0 0 0;
.text{
margin:20px 0 0 0;
padding-bottom:40px;
}
.more{
margin:0px;
width:90%;
.center;
}
.image{
.ps;
width:200px;
margin:15px auto 0 50px;
}
}
}


/* .company ///////////////////////*/
.company{
padding:40px 0 0 0;

.icon{
.dib;
.vam;
}
h2{
.dib;
.vam;
img{height:40px; }
}
.text{
margin:0 400px 0 70px;
padding-bottom:150px;
}
.image1{
.pa;
width:260px;
bottom:0px;
right:50px;
}
.image2{
.pa;
top:0px;
right:250px;
}
.image3{
.pa;
top:0px;
right:-30px;
}
.more{
.dt;
.right;
margin:20px 0 0 0;
border:2px @red solid;
padding:10px 0 7px 0;
width:230px;
p{
.tac;
.dtc;
.vam;
background:url(../image/point2.svg) no-repeat 90% 0;
font-size:20pt;
letter-spacing:0.2em;
.red;
}
}
.more:hover{
.bg_red;
p{
.white;
background:url(../image/point1.svg) no-repeat 90%0;
}
}

}

@media (max-width:960px){
.company{
.image2{
top:70px;
right:230px;
}
.image3{
top:70px;
right:0px;
}
}
}

@media (max-width:720px){
.company{
.icon{
height:80px;
margin:0 5px 0 0;
}
h2 img{
height:30px;
}
.text{
margin-right:0px;
padding-bottom:120px;
}
.image1{
width:160px;
}
.image2{
.dn;
}
.image3{
.dn;
}
.more{
.fn;
}
}
}


@media (max-width:560px){
.company{
padding:30px 0 0 0;
.text{
.pr;
margin:20px 0 0 0;
padding-bottom:40px;
}
.more{
margin:0px;
width:90%;
.center;
}
.image1{
.ps;
width:200px;
margin:15px auto 0 50px;
}

}
}


/* .work ///////////////////////*/
.work{
.bg_glay;
padding:40px 0 80px 0;

.icon{
.dib;
.vam;
}
h2{
.dib;
.vam;
img{height:40px; }
}
ul{
.dt;
width:100%;
.bg_white;
}
li{
.dtc;
width:33%;
}
a{
.db;
padding:15px;
border:2px @red solid;
margin:5px;
background:url(../image/point2.svg) no-repeat 95% 50%;
}
li:nth-child(2) a{
margin:5px 0;
}
a:hover{
background:url(../image/point1.svg) no-repeat 95% 50%;
.bg_red;
.white;
}
.w{
.dn;
}
a:hover .w{
.di;
}
a:hover .r{
.dn;
}
}

@media (max-width:960px){
.work{
.image img{
max-width:100%;
}
}
}


@media (max-width:720px){
.work{
.icon{
height:80px;
margin:0 5px 0 0;
}
h2 img{
height:30px;
}
}
}


@media (max-width:560px){
.work{
padding:40px 0 40px 0;

li{
.db;
width:100%;
}
li:nth-child(2) a{
margin:5px;
}
}
}



/* .voice ///////////////////////*/
.voice{
padding:40px 0 40px 0;

.icon{
.dib;
.vam;
}
h2{
.dib;
.vam;
img{height:40px; }
}
ul{
.dt;
.center;
padding:20px 0;
}
li{
.dtc;
}
a{
.db;
width:320px;
height:320px;
img{
width:100%;
}
}

.v1{
.db;
background:url(../image/voice1_image.jpg) no-repeat 0px 10px;
background-size:contain;
}
.v2{
background:url(../image/voice2_image.jpg) no-repeat 0px 10px;
background-size:contain;
}
.v3{
background:url(../image/voice3_image.jpg) no-repeat -10px 0px;
background-size:contain;
}
.v4{
background:url(../image/voice4_image.jpg) no-repeat -10px 0px;
margin:0 20px 0 0;
background-size:contain;
}
.v5{
background:url(../image/voice5_image.jpg) no-repeat 0px 0px;
background-size:contain;
}
}

@media (max-width:960px){
.voice{
padding:20px 0 20px 0;
a{
.db;
width:240px;
height:240px;
}
}
}


@media (max-width:720px){
.voice{
padding:0;
.icon{
height:80px;
margin:0 5px 0 0;
}
h2 img{
height:25px;
}
a{
width:180px;
height:180px;
}
}
}


@media (max-width:560px){
.voice{
padding:20px 0 20px 0;

ul{
padding:0;
}
li{
.db;
width:100%;
}
a{
.db;
width:280px;
height:280px;
img{
width:280px;
}
}

}
}



/* .other ///////////////////////*/
.other{
padding:40px 0;

ul{
.dt;
width:100%;
}
li{
.dtc;
width:50%;
}
li:nth-child(1n){
}
li:nth-child(2n){
.tar;
}
img{
-webkit-transition: 0.2s ;
transition: 0.2s ;
max-width:100%;
}
img:hover{
opacity: .3;
filter:alpha(opacity=0);
}
}



@media (max-width:560px){
.other{
padding:0;
ul{
padding:0;
}
li{
.db;
padding:5px 0;
width:100%;
}
}
}