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

/* title ///////////////////////*/
.title{
.tac;
padding:0 0 40px 0;

h2{
font-size:28pt;
padding:0 0 50px 0;
letter-spacing:.2em;
margin:0 0 0 20px;
}
h3{
line-height:140%;
font-size:21pt;
padding:0 0 30px 0;
letter-spacing:.2em;
margin:0 0 0 20px;
}
h4{
font-size:10.5pt;
padding:0 0 0 0;
letter-spacing:.2em;
line-height:200%;
}

}


@media (max-width:480px) {
.title{

h2{
font-size:23pt;
padding:0 0 30px 0;
letter-spacing:.2em;
margin:0 0 0 10px;
}
h3{
font-size:18pt;
letter-spacing:.1em;
padding:0 0 20px 0;
margin:0 0 0 10px;
}
h4{
font-size:10pt;
}

}
}


/* top ///////////////////////*/
.top{
.pr;
.oh;

li p{
.pa;
top:50px;
left:50px;
color:#FFFFFF;
.ffm;
font-size:19pt;
padding:5px 50px 10px 50px;
line-height:140%;
}

.p1{
background-color: rgba(0,0,0,0.6);
}
.p2{
background-color: rgba(190,140,0,0.8);
}
.p3{
background-color: rgba(40,80,110,0.7);
}
.p4{
background-color: rgba(30,110,10,0.7);
}
.p5{
background-color: rgba(230,60,0,0.7);
}

.wrap{
.pr;
width:2040px;
left:50%;
margin-left:-1020px;
}

.navi{
.pa;
top:50%;
left:0;
right:0;
margin:auto;
width:85%;
z-index:10;
}
.navi p{
.db;
/* background:url("../image/bg_black.jpg") no-repeat -200px 100%; */
width:60px;
height:60px;
padding:10px 0;
.tac;
cursor:pointer;
}
.prev{
.left;
margin-top:-25px;
}
.next{
.right;
margin-top:-25px;
}
}

@media (max-width:960px) {
.top{

.navi{
width:96%;
}

}
}


@media (max-width:720px) {
.top{

.wrap{
width:1440px;
margin-left:-720px;
}

.navi{
width:99%;
}

}
}


@media (max-width:480px) {
.top{

li p{
width:100%;
top:auto;
left:0px;
bottom:0;
font-size:14pt;
padding:10px 20px 10px 20px;
}

.wrap{
width:100%;
margin-left:-50%;
}

.navi p{
.db;
width:30px;
height:30px;
padding:10px 0;
.tac;
cursor:pointer;
}
.prev{
.left;
margin-top:-15px;
}
.next{
.right;
margin-top:-15px;
}


}
}

@media (max-width:400px) {
.top{

li p{
padding:5px;
font-size:12pt;
}

}
}


/* topics ///////////////////////*/
.topics{
padding:30px 0 120px 0;
background-color:@c2;

dl{
.dt;
}
dd{
.dtc;
.vat;
}

.title{
.ffme;
font-size:21pt;
padding:0 40px 0  0;
letter-spacing:.1em;
}

li{
padding:5px 0 5px 110px;
text-indent:-90px;
background:url("../image/point4.svg") no-repeat 0 50%;
border-bottom:1px @c1 solid;
line-height:140%;
}
a:hover{
.tdu;
opacity:.5;
}

}


@media (max-width:720px) {
.topics{

}
}

@media (max-width:480px) {
.topics{
padding:30px 0 80px 0;

dd{
.db;
}

.title{
.tal;
font-size:15pt;
padding:0 0 0  0;
}
li{
padding:5px 0 5px 90px;
text-indent:-80px;
background:url("../image/point4.svg") no-repeat 0 12px;
}

}
}


/* outline ///////////////////////*/
.outline{
.pr;
z-index:1;
padding:120px 0 0 0;

.mark{
.pa;
top:-160px;
left:50%;
margin-left:-80px;
}

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

.wrap{
border:2px @c1 solid;
padding:10px;
height:450px;
background:#FFFFFF;
}


h3{
font-size:17pt;
line-height:200px;
.dib;
padding:0 20px;
border-right:1px @c1 solid;
}
.h3{
.db;
width:100%;
.tac;
border:0;
}

ul{
.dib;
.vam;
margin-left:20px;
}
li:before{
content:'';
width:4px;
height:4px;
display: inline-block;
border-radius: 100%;
background-color: #666666;
position: relative;
left: -8px;
top:-2px;
}

.image{
.pr;
.db;
width:100%;
overflow:hidden;
margin:0 0 20px 0;
}

.photo{
width:100%;
}

.point{
.pa;
margin:0;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}

.navi{
.dn;
}

}


@media (min-width:481px) and (max-width:960px) {
.outline{

.wrap{
height:360px;
}
ul{
.dn;
}
h3{
font-size:15pt;
border:0;
line-height:160px;
padding:0;
width:100%;
.tac;
}

}
}

@media (max-width:480px) {
.outline{
padding:60px 0 0 0;

.mark{
.pa;
top:-90px;
left:50%;
margin-left:-50px;
width:100px;
}

.wrap{
height:360px;
}
h3{
font-size:13pt;
padding:0 10px;
line-height:160px;
}
.h3{
font-size:17pt;
width:95%;
}

.navi{
.di;
.pa;
top:60%;
left:0;
right:0;
margin:auto;
width:100%;
z-index:10;
}
.navi p{
.db;
width:30px;
height:30px;
.tac;
cursor:pointer;
}
.prev{
.left;
}
.next{
.right;
}

}
}



/* manufacture ///////////////////////*/
.manufacture{
.pr;
z-index:0;
margin-top:-50px;
padding:160px 0 120px 0;
background-color:#425E71;

.bg{
.pa;
top:0;
width:100%;
height:100%;
background:url("../image/top_p4.jpg") no-repeat center center;
background-size:cover;
opacity:.3;
}

.title{
color:#FFFFFF;
}

.navi{
.dn;
}

ul{
.dt;
}
li{
.dtc;
width:25%;
padding:10px;
}
li img{
width:100%;
}
.tb{
.di;
}

}




@media (max-width:720px) {
.manufacture{
padding:120px 0 120px 0;

li{
.dtc;
width:25%;
padding:5px;
}

}
}


@media (max-width:480px) {
.manufacture{
padding:120px 0 80px 0;

.navi{
.di;
.pa;
bottom:-30px;
left:0;
right:0;
margin:auto;
width:60px;
z-index:10;
}
.navi p{
.db;
width:30px;
height:30px;
.tac;
cursor:pointer;
}
.prev{
.left;
}
.next{
.right;
}

}
}


/* development ///////////////////////*/
.development{
padding:100px 0 60px 0;

ul{
.dt;
width:100%;
background:url("../image/top_deve1.svg") no-repeat center center;
background-size:contain;
}
li{
.dib;
.tac;
width:33.3%;
}
a{
.db;
width:120%;
margin:0 0 0 -30px;
}
a img{
width:100%;
}
.z1{
.pr;
z-index:1;
}
.z2{
.pr;
z-index:2;
a{
background:url("../image/top_deve2_bg.svg") no-repeat center center;
background-blend-mode: multiply;
background-size:contain;
}
}

}



@media (max-width:480px) {
.development{
padding:80px 0 0 0;

.title h2{
letter-spacing:0;
}

ul{
width:70%;
.center;
padding:20px 0 0 0;
background:url("../image/top_deve1-2.svg") no-repeat center center;
background-size:contain;
}
li{
.db;
width:100%;
}
a{
.db;
width:120%;
margin:-30px 0 0 -15px;
}

}
}




/* eco_quality ///////////////////////*/
.eco_quality{
margin:80px 0 0 0;

dl{
.dt;
width:100%;
}
dd{
.dtc;
width:50%;
height:400px;
}
a{
.db;
padding:30px;
width:70%;
height:200px;
margin:100px auto 0 auto;
color:#FFFFFF;
.tac;
transition:.3s;
}
h2{
font-size:26pt;
border-bottom:2px #FFFFFF solid;
padding:0 0 20px 0;
margin: 0 0 20px 0;
}
h3{
font-size:15pt;
padding:0 0 20px 0;
letter-spacing:0;
}

dd:first-child{
background:url("../image/top_p6.jpg") no-repeat center center;
background-size:cover;
a{
background-color: rgba(40,110,10,0.7);
transition:.3s;
}
a:hover{
background-color: rgba(40,110,10,0.95);
}
}

dd:last-child{
background:url("../image/top_p7.jpg") no-repeat center center;
background-size:cover;
a{
background-color: rgba(40,130,180,0.7);
transition:.3s;
}
a:hover{
background-color: rgba(40,130,180,0.95);
}
}



}


@media (max-width:960px) {
.eco_quality{

h2{
font-size:17pt;
padding:0 0 20px 0;
margin: 0 0 10px 0;
}
h3{
font-size:15pt;
padding:0 0 20px 0;
}
h4{
font-size:8pt;
}

}
}


@media (max-width:480px) {
.eco_quality{

dl{
.db;
}
dd{
.db;
width:auto;
height:300px;
border-top:1px #FFFFFF solid;
}
a{
.db;
padding:20px;
width:90%;
height:auto;
margin:60px auto 0 auto;
}


}
}


/* recruit ///////////////////////*/
.recruit{
margin:80px 0 0 0;

a{
.db;
padding:5px;
border:2px @c1 solid;
transition:.3s;
}
.wrap{
.pr;
height:150px;
background:url("../image/top_p8.jpg") no-repeat center 0;
background-size:cover;
}
.title{
.pa;
top:60px;
left:48%;
h2{
padding:0 0 10px 0;
}
}

a:hover{
opacity:.6;
}

}


@media (max-width:960px) {
.recruit{

.wrap{
height:200px;
}

}
}


@media (max-width:480px) {
.recruit{
margin:40px 0 0 0;


.title{
.pa;
top:80px;
left:0;
h2{
padding:0 0 30px 0;
}
}

}
}



/* hover ///////////////////////*/
.outline a .photo{
-webkit-transition: opacity .5s, -webkit-transform .5s;
transition: opacity .5s, transform .5s;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.outline a:hover .photo{
opacity: 0.5;
-webkit-transform: scale3d(1.1,1.1,1);
transform: scale3d(1.1,1.1,1);
}