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

/* top ///////////////////////*/
.top{
.pr;
.jc;
.oh;
width:100%;
height:90vh;
background:url(../image/bg1.jpg) no-repeat 50% 50%;
background-size:cover;

.wrap{
.pr;
.tac;
padding:5rem 0 0 0;
width:60%;
max-width:500px;
min-width:360px;
}

.title{
.pr;
z-index:20;
}

.title p{
.pa;
top:20%;
left:50%;
margin-left:-16rem;
.nw;
z-index:10;
.tac;
.ffm;
font-size:2.3rem;
padding:2.3rem 0 0 0;
}

.image{
width:60%;
.center;
}

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

dd:first-child img{
.pr;
margin:-4rem 0 0 1rem;
}
.square1{
content:"";
.db;
width:2.3rem;
height:2.3rem;
.pa;
top:50%;
left:-3rem;
background:@c1;
}

dd:last-child img{
.pr;
margin:0 0 0 -1rem;
z-index:2;
}
.square2{
content:"";
.db;
width:4rem;
height:8rem;
.pa;
top:-1rem;
right:0;
background:@c1;
z-index:0;
}
.square3{
content:"";
.db;
width:4rem;
height:4rem;
.pa;
bottom:-2rem;
left:-2rem;
background:@c1;
z-index:3;
}


}


@media (max-width:@w1){
.top{

.title p{
.pa;
top:20%;
left:50%;
margin-left:-10rem;
font-size:1.45rem;
}

}
}


/* rinen ///////////////////////*/
.rinen{
border-top:.6rem @c1 solid;
padding:5rem 0 10rem 0;
background:@c3;

.title{
padding:0 0 3rem 0;
}

.title p{
.tac;
.ffm;
font-size:2.3rem;
padding:0 0 3.3rem 0;
}

.title:after{
content:"";
.db;
width:5rem;
border-top:.3rem @c1 solid;
.center;
}

.copy p{
.tac;
.ffm;
font-size:1.3rem;
line-height:2.6rem;
padding:0 0 3.3rem 0;
}

.wrap{
background:#FFF;
border:.3rem @g5 solid;
}

.text{
padding:1rem;
}

}



@media(max-width:@w1){
.rinen{

.title p{
font-size:1.6rem;
}

.copy p{
font-size:1.15rem;
line-height:2rem;
}

}
}


/* iryou ///////////////////////*/
.iryou{

.article{
.pr;
padding:5rem 0 5rem 0;
width:100%;
max-width:@w3;
background:#FFF;
margin:-5rem auto 0 auto;
}

article{
width:100%;
}

.article:before{
content:"";
.db;
width:100%;
max-width:@w3;
height:3rem;
border:.6rem @c1 solid;
border-bottom:0;
.pa;
top:0;
left:0;
}

.title{
padding:0 0 3rem 0;
}

.title p{
.tac;
.ffm;
font-size:2.3rem;
padding:0 0 3.3rem 0;
}

.title:after{
content:"";
.db;
width:5rem;
border-top:.3rem @c1 solid;
.center;
}

.copy p{
.tac;
.ffm;
font-size:1.3rem;
line-height:2.6rem;
padding:0 0 3.3rem 0;
}

.image{
width:80%;
max-width:180px;
margin:0 auto;
}

.text h4 p{
.tac;
.ffm;
font-size:1.3rem;
padding:1rem 0;
}

.wrap{
padding:2rem;
}

.dl1{
border-bottom:.3rem @c3 solid;
}
.dl2{
border-top:.3rem @c3 solid;
}
dd:first-child{
border-right:.3rem @c3 solid;
}
dd:last-child{
border-left:.3rem @c3 solid;
}

em{
.db;
.bold;
color:@c2;
font-size:1.15rem;
padding:2rem 0 0 0;
}

}


@media(max-width:@w1){
.iryou{

.title p{
font-size:1.6rem;
}

.copy p{
font-size:1.15rem;
line-height:2rem;
}

.dl1{
border-bottom:0;
}
.dl2{
border-top:0;
}
dd:first-child{
border-right:0;
}
dd:last-child{
border-left:0;
}

dd{
border-bottom:.3rem @c3 solid;;
}

.wrap{
padding:1rem 0;
}

}
}


/* bg_photo ///////////////////////*/
.bg_photo{
padding:.6rem 0 0 0;
background:@c1;

.bg{
.pr;
.db;
height:65vh;
background:url(../image/photo.jpg) no-repeat 50% 50%;
background-size:cover;
}

.copy p{
.pa;
bottom:0;
width:100%;
background:rgba(255,255,255,.6);
.tac;
.ffm;
font-size:1.3rem;
line-height:2.6rem;
padding:3rem 1rem;
}

.article{
padding:5rem 0;
background:url(../image/bg2.jpg) no-repeat 50% 50%;
background-size:cover;
}

dd:first-child{
border-right:.3rem @c3 solid;
}
dd:last-child{
border-left:.3rem @c3 solid;
}

}


@media(max-width:@w1){
.bg_photo{

.bg{
height:80vh;
}

dd:first-child{
border-right:.0;
border-bottom:.3rem @c3 solid;
padding: 0 0 2rem 0;
}
dd:last-child{
padding:2rem 0 0 0;
border:0;
}

}
}


/* houjin souzoku ///////////////////////*/
.houjin,
.souzoku{
padding:0 1.5rem;

.title{
padding:0 0 2rem 0;
}

.title p{
.tac;
.ffm;
font-size:1.75rem;
padding:0 0 2rem 0;
}

.title:after{
content:"";
.db;
width:5rem;
border-top:.3rem @c3 solid;
.center;
}

em{
.bold;
font-size:1.15rem;
padding:0 0 .3rem 0;
.db;
}

}


@media(max-width:@w1){
.houjin,
.souzoku{
padding:0;

.title p{
font-size:1.3rem;
padding:0;
}

.title:after{
border:0;
}

}
}


/* zeimu ///////////////////////*/
.zeimu{
padding:5rem 0;

.title{
padding:0 0 3rem 0;
}

.title p{
.tac;
.ffm;
font-size:2.3rem;
padding:0 0 3.3rem 0;
}

.title:after{
content:"";
.db;
width:5rem;
border-top:.3rem @c1 solid;
.center;
}

h4 p{
.tac;
.ffm;
font-size:1.45rem;
padding:0 0 2rem 0;
}

.wrap{
padding:2rem;
}

dd:first-child{
border-right:.3rem @c3 solid;
}
dd:last-child{
border-left:.3rem @c3 solid;
}

ul{
padding:1rem 0;
}
li{
color:@c2;
padding:.15rem 0;
border-bottom:1px @g5 solid;
}

.image{
padding:0 0 1rem 0;
}

}


@media(max-width:@w1){
.zeimu{

.title p{
font-size:1.6rem;
}

h4 p{
font-size:1.3rem;
}

.wrap{
padding:0 0 1rem 0;
}

dd:first-child{
border-right:0;
}
dd:last-child{
border-left:0;
}

}
}


/* info ///////////////////////*/
.info{
padding:5rem 0 2rem 0;
background:@c3;

.title{
padding:0 0 3rem 0;
}

.title p{
.tac;
.ffm;
font-size:2.3rem;
}

.box{
.db;
padding:.5rem;
border:.3rem @c1 solid;
background:#FFF;
color:@c2;
.bold;
font-size:1.15rem;
margin:2rem 0;
}

.col2{
padding:2rem;
background:#FFF;
}

table{
width:100%;
}
td{
padding:.5rem;
border-bottom:1px @g5 solid;
}
td:first-child{
.nw;
.vat;
border-right:1px @g5 solid;
}
tr:last-child td{
border-bottom:0;
}

}


@media(max-width:@w1){
.info{

.title p{
font-size:1.6rem;
}

.col2{
padding:.5rem;
}


table{
margin:0 0 .5rem 0;
}

dd{
padding:0;
}

}
}


/* access ///////////////////////*/
.access{
padding:0 0 2rem 0;
background:@c3;

.map{
iframe{
width:100%;
height:65vh;
}
}

}


/* recruit ///////////////////////*/
.recruit{
padding:5rem 0 0 0;

.title{
padding:0 0 3rem 0;
}

.title p{
.tac;
.ffm;
font-size:2.3rem;
}

.wrap{
.tac;
padding:5rem 0;
border-top:.3rem @c3 solid;
border-bottom:.3rem @c3 solid;
}

.wrap h2{
font-size:1.6rem;
line-height:2.75rem;
}
.wrap h3{
font-size:1.3rem;
line-height:2.15rem;
}
.wrap h4{
font-size:1.15rem;
line-height:2rem;
}

}


@media(max-width:@w1){
.recruit{

.title p{
font-size:1.6rem;
}

}
}


/* contact ///////////////////////*/
.contact{
.pr;
z-index:2;
padding:5rem 0 0 0;

article{
padding:2rem ;
border:.6rem @g5 solid;
background:#FFF;
}

h4 p{
.tac;
.ffm;
font-size:1.45rem;
padding:0 0 2rem 0;
}

dl{
height:100%;
}

.wrap{
.tac;
height:100%;
}


.tel .wrap{
padding:2rem 0;
border-top:.3rem @c3 solid;
border-bottom:.3rem @c3 solid;

a{
.pr;
.dib;
padding:0 0 0 2rem;

p {
.ffm;
.nw;
font-size:2.3rem;
}
}
}

.tel a:before{
content:"";
.db;
.pa;
left:0;
top:0;
width:1.75rem;
height:1.75rem;
background:url(../image/tel.svg) no-repeat 0 0;
}

.mail .wrap{

a{
.pr;
.db;
height:100%;
padding:2rem 0;
background:@c1;
.tac;
}
a:hover{
background:@hover;
}
p {
.ffm;
.nw;
font-size:1.3rem;
color:#FFF;
}
}

.mail a:before{
content:"";
.dib;
width:5rem;
height:3.6rem;
background:url(../image/mail.svg) no-repeat 0 0;
}

}


@media(max-width:@w1){
.contact{
padding:1rem ;

article{
padding:1rem ;
border:.3rem @g5 solid;
}

h4 p{
font-size:1.05rem;
padding:0 0 1rem 0;
}

.tel .wrap{
a{
padding:0 0 0 1.6rem;
p {
.ffm;
.nw;
font-size:1.75rem;
}
}
.text{
padding:.3rem 0 0 0 ;
}
}

.tel a:before{
content:"";
width:1.3rem;
height:1.3em;
}

dd:last-child{
padding:0;
}

}
}