@import (once) "default.less";


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

.wrap{
.pr;
width:2400px;
left:50%;
margin-left:-1200px;
background:@c1;
}

li {
height:530px;
opacity:.7;
}


.copy{
.pa;
.tac;
z-index:2;
margin:auto;
top:47%;
left:0;
right:0;

p{
color:#FFFFFF;
padding:0 0 20px 0;
font-size:32pt;
line-height:120%;
letter-spacing:.1em;
.ffm;
text-shadow: 1px 1px 10px @c1;
}
small{
.db;
color:#FFFFFF;
font-size:12pt;
line-height:140%;
letter-spacing:.1em;
.ffm;
text-shadow: 1px 1px 10px @c1;
}

}


.navi{
.pa;
top:55%;
left:0;
right:0;
margin:auto;
width:85%;
z-index:2;
}
.navi p{
.db;
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{

.copy{
top:40%;

p{
padding:0 0 10px 0;
font-size:23pt;
letter-spacing:.1em;
}

}

li{
height:380px;
}

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

.navi{
width:99%;
}

}
}



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

.navi{
.dn;
}
.copy{
top:40%;

p{
padding:0 0 10px 0;
font-size:19pt;
}
small{
font-size:9pt;
}

}

li{
height:280px;
}

}
}



/* topics ///////////////////////*/
.topics{
padding:120px 0 0 0;


ul{
border:1px @c2 solid;
.os;
height:170px;
}
li{
line-height:140%;
padding:15px 0 20px 130px;
background:url("../image/point1.svg") no-repeat 15px 1.5em;
}
p{
.left;
margin-left:-100px;
}
a{
.db;
}
li:nth-child(2n+1){
background-color:#F9F9F9;
}
li a:hover{
opacity: 0.5;
filter:alpha(opacity=50);
.tdu;
}

.new{
font-size:8pt;
padding:0 20px 0 20px;
margin:0 0 0 10px;
background-color:@c3;
color:#FFFFFF;
.bold;
.tdn;
.dib;
}

}


@media (max-width:960px){
.topics{
padding:100px 0 0 0;

ul{
height:240px;
}

}
}


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

.title{
.tac;
padding:0 0 40px 0;
}
article{
width:100%;
}
ul{
border:0;
border-top:1px @c2 solid;
border-bottom:1px @c2 solid;
}


}
}


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

li{
padding:15px 0 20px 27px;
}
p{
.fn;
.db;
font-size:8pt;
padding:0 0 5px 0;
margin-left:-0;
}

}
}



/* service ///////////////////////*/
.service{
padding:100px 0 0 0;
.pr;

.area{
width:80%;
.center;
.oh;
}
.scroll{
width:1900px;
}
.wrap{
.db;
border:1px @c2 solid;
width:350px;
height:540px;
}

.wrap h4{
.ffm;
font-size:14pt;
.tac;
padding:20px 0;
letter-spacing:.1em;
border-top:7px @c1 solid;
}

.image{
.pr;
.db;
overflow:hidden;
height:210px;
}
.photo{
width:100%;
}
.num{
.pa;
z-index:10;
bottom:-5px;
left:-5px;
}

.text{
padding:20px;
}
.wrap h5{
.ffm;
font-size:12pt;
}
.wrap p{
padding:10px 0 30px 0;
font-size:9pt;
line-height:160%;
}
.wrap li{
font-size:10pt;
padding:0 0 0 12px;
background:url(../image/point1.svg) no-repeat 0px .7em;
}
.wrap li a:hover{
opacity: 0.5;
}

.navi{
.pa;
top:60%;
width:90%;
left:0;
right:0;
margin:auto;
}
.prev{
.pa;
left:0;
cursor:pointer;
}
.next{
.pa;
right:0;
cursor:pointer;
}
}


@media (max-width:720px) {
.service{
padding:80px 0;

.pc{
.di;
}

}
}


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


.title{
padding:20px 0 40px 0;
img{
width:70%;
}
}

.area{
width:100%;
height:420px;
.center;
.oh;
.pr;
}
.scroll{
.pa;
width:1350px;
left:50%;
margin-left:-655px;
}
.wrap{
.db;
border:1px #EFEFEF solid;
width:230px;
height:420px;
}

.wrap h4{
font-size:12pt;
.tac;
padding:15px 0;
letter-spacing:.1em;
}
.image{
.pr;
.db;
overflow:hidden;
height:140px;
}
.photo{
width:100%;
}
.num{
.pa;
z-index:10;
bottom:-5px;
left:-5px;
}

.text{
padding:10px;
}
.wrap h5{
font-size:12pt;
}
.wrap p{
padding:10px 0 20px 0;
font-size:8pt;
}
.wrap li{
font-size:8pt;
line-height:180%;
background:url(../image/point1.svg) no-repeat 0 8px;
}

.navi{
top:45%;
width:285px;
.center;
}
.navi img{
height:35px;
}

}
}


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

table{
width:100%;
}
td{
padding:10px 0;
border-bottom:1px @c2 solid;
}
td:first-child{
width:160px;
}

}


@media (max-width:960px){
.company{
padding:100px 0 0 0;

}
}


@media (max-width:720px) {
.company{
padding:80px 0 0 0;

td{
line-height:160%;
font-size:10pt;
}
td:first-child{
width:120px;
}

}
}


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


td{
font-size:9pt;
}
td:first-child{
width:75px;
}

}
}


/* history ///////////////////////*/
.history{
padding:120px 0 0 0;

table{
width:100%;
}
td{

padding:10px 0;
border-bottom:1px @c2 solid;
}
td:first-child{
width:160px;
}

}


@media (max-width:960px){
.history{
padding:100px 0 0 0;

}
}


@media (max-width:720px) {
.history{
padding:80px 0 0 0;

td{
font-size:10pt;
line-height:160%;
}
td:first-child{
width:120px;
}

}
}


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

td{
font-size:9pt;
}
td:first-child{
width:75px;
}

}
}



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


dl{
.dt;
width:100%;
}
dd{
.dtc;
.tac;
.vam;
}
a{
.db;
width:380px;
height:380px;
.r(50%);
.tdn;
}
p{
color:#FFFFFF;
.nw;
}
p:nth-child(1){
padding:80px 0 0 0;
font-size:19pt;
.ffm;
}
p:nth-child(2){
padding:10px 0 0 0;
font-size:8pt;
letter-spacing:.3em;
}
p:nth-child(3){
padding:30px 0 0 0;
.ffm;
font-size:25pt;
letter-spacing:.1em;
.tdu;
}
p:nth-child(4){
padding:30px 0 0 0;
font-size:9pt;
letter-spacing:.3em;
}


dd:nth-child(1) a{
background: -webkit-gradient(linear, left top, right bottom, color-stop(0.88, #ff8635), color-stop(0.00, #de752f));
background: -webkit-linear-gradient(top, #ff8635 0%, #de752f 88%);
background: -moz-linear-gradient(top, #ff8635 0%, #de752f 88%);
background: -o-linear-gradient(top, #ff8635 0%, #de752f 88%);
background: -ms-linear-gradient(top, #ff8635 0%, #de752f 88%);
background: linear-gradient(to top, #ff8635 0%, #de752f 88%);
.center;
}
dd:nth-child(2) a{
.center;
}
dd:nth-child(3) a{
background: -webkit-gradient(linear, left top, right bottom, color-stop(0.88, #730d0e), color-stop(0.00, #930f0f));
background: -webkit-linear-gradient(top, #930f0f 0%, #730d0e 88%);
background: -moz-linear-gradient(top, #930f0f 0%, #730d0e 88%);
background: -o-linear-gradient(top, #930f0f 0%, #730d0e 88%);
background: -ms-linear-gradient(top, #930f0f 0%, #730d0e 88%);
background: linear-gradient(to top, #930f0f 0%, #730d0e 88%);
.right;
}

a:hover{
opacity:.6;
}

}




@media (max-width:960px) {
.contact{
padding:80px 0 0 0;

}
}

@media (max-width:720px) {
.contact{
padding:70px 0 0 0;

dd{
.db;
}

.wa{
margin:-50px;
transform:rotate(-90deg);
width:240px;
}

dd:nth-child(1) a{
.center;
}
dd:nth-child(2) a{
.center;
}
dd:nth-child(3) a{
.fn;
.center;
}

}
}

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

a{
width:320px;
height:320px;
}
p:nth-child(1){
padding:50px 0 0 0;
font-size:14pt;
.ffm;
}
p:nth-child(2){
padding:5px 0 0 0;
font-size:8pt;
letter-spacing:.3em;
}
p:nth-child(3){
padding:20px 0 0 0;
.ffm;
font-size:21pt;
letter-spacing:.1em;
.tdu;
}
p:nth-child(4){
padding:20px 0 0 0;
font-size:8pt;
letter-spacing:.3em;
}


}
}


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