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

/* caregory_title ///////////////////////*/
.category_title{
background: url(../../image/04.jpg) no-repeat center 50%;
background-size:cover;
}

/* staff ///////////////////////*/
.staff{
padding:10vh 0;

h3{
.tac;
font-size:11pt;
.ffgr;
padding:0 0 40px 0;
letter-spacing:.15em;
}

dl{
.dt;
.center;
width:50vw;
}
dd{
.dtc;
.tac;
letter-spacing:.1em;
}

p{
.db;
width:140px;
height:140px;
.oh;
.pr;
margin:0 auto 10px auto;
}
img{
.pa;
width:180%;
left:-40%;
right:0;
top:-10%;
margin:auto;
max-width:none;
}

.active{
opacity:.15;
}

.link{
padding:5vh 0 0 0;
}

}


@media (max-width:1000px){
.staff{

dl{
width:80vw;
}

}
}

@media (max-width:600px), (max-height:500px){
.staff{
padding:5vh 0;

dl{
width:auto;
}
dd{
padding:0 5px;
}

p{
width:100px;
height:100px;
}

}
}


/* voice ///////////////////////*/
.voice{
padding:10vh 0 0 0;

.profile{
.pr;

h2{
.pa;
font-size:50pt;
.ffgr;
top:50px;
text-shadow:2px 2px 3px #FFFFFF;
color:@c1;
line-height:130%;
z-index:10;
}
.image{
width:75%;
height:55vh;
}
.text{
.pa;
.dib;
left:78%;
top:250px;
.nw;
.bg2;
}

}


h4{
font-size:19pt;
.ffgm;
padding:40px 0 20px 0;
letter-spacing:.1em;

b{
color:@c1;
font-size:30pt;
padding:0 10px 0 0;
}
}

.work{
width:450px;
.right;
margin:0 0 20px 40px;
}

}

@media (max-width:1000px){
.voice{

.work{
width:350px;
margin:0 0 20px 20px;
}

}
}


@media (max-width:800px), (max-height:500px){
.voice{
padding:5vh 0 0 0;

article:first-child{
width:100%;
}

.profile{
.tar;

h2{
.tal;
.ps;
font-size:32pt;
padding:10px;
br{
.dn;
}
}
.image{
.ps;
width:100%;
height:45vh;
margin:0 0 40px 0;
}
.text{
.tal;
padding:20px;
left:auto;
top:auto;
bottom:-50px;
right:20px;
}

}

h4{
font-size:14pt;
padding:30px 0 15px 0;
}

.work{
width:250px;
margin:0 0 10px 10px;
}

}
}


@media (max-width:500px), (max-height:500px){
.voice{

.profile{

h2{
font-size:23pt;
}
.image{
height:35vh;
margin:0 0 20px 0;
}
.text{
padding:10px;
right:10px;
}

}


.work{
width:150px;
}

}
}


/* voice1 ///////////////////////*/
.voice1{

.profile{
h2{
right:0;
}
.image{
background: url(../image/01.jpg) no-repeat center 0;
background-size:cover;
}
}

}


/* voice2 ///////////////////////*/
.voice2{
background-color:@c2;

.profile{
h2{
left:0;
}
.image{
background: url(../image/02.jpg) no-repeat center 0;
background-size:cover;
margin-left:auto;
}
.text{
left:0;
background-color:@c2;
}

}

}

@media (max-width:800px), (max-height:500px){
.voice2{

.profile{
.text{
left:auto;
.bg2;
}
}

}
}

/* voice3 ///////////////////////*/
.voice3{

.profile{
h2{
right:0;
}
.image{
background: url(../image/03.jpg) no-repeat center 0;
background-size:cover;
}
}

}


/* schedule ///////////////////////*/
.schedule{
padding:20px 0 0 0;

ul{
.dt;
width:100%;
}
li{
.dtc;
.tac;
width:16.6%;
background: url(../../image/line1.svg) no-repeat center 35%;
}
b{
.dib;
.tac;
width:140px;
height:140px;
line-height:140px;
margin:0 0 10px 0;
.r(50%);
background-color:@c1;
color:#FFFFFF;
font-size:16pt;
letter-spacing:.1em;
.ffgm;
}

}

@media (max-width:1000px){
.schedule{

ul{
.db;
}
li{
.db;
.tal;
width:100%;
background: url(../../image/line3.svg) no-repeat 60px 0;
padding:5px 0 5px 20px;
}
b{
.dib;
width:80px;
height:80px;
line-height:80px;
margin:0 10px 0 0;
font-size:11pt;
.vam;
}
p{
.dib;
.vam;
max-width:200px;
}

}
}