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


/* example ///////////////////////*/
.example{
padding:0 0 45px 0;

h3{
.tac;
font-size:2.5vw;
line-height:150%;
.bold;
color:@c1;
margin:0 0 45px 0;
}

.list{
ul{
width:102%;
margin-left:-1%;
}
li{
width:25%;
padding:15px;
.dib;
.vat;
}
p{
.tac;
padding:5px 0 0 0;
.dn;
}
.photo:hover > img{
transform: scale(1.1);
opacity:.6;
}
a{
.db;
padding:5px;
background:@c2;
}
}


.pager{
padding:30px; 
.tac;

li{
.dib;
padding:15px; 
}
a,p{
.db;
font-size:15pt;
.bold;
color:@c2;
}
p{
color:@g5;
}
a:hover{
color:@c3;
}
}

}


@media (max-width:650px){
.example{
padding:0 0 30px 0;

h3{
font-size:4vw;
margin:0 0 30px 0;

br{
.dn;
}
}


.list{
ul{
width:102%;
margin-left:-1%;
}
li{
width:50%;
padding:5px;
}
a{
padding:3px;
}
}

.pager{
padding:15px; 
}

}
}


/* sns ///////////////////////*/
.sns{
padding:0 0 30px 0;

h3{
.tac;
.bold;
color:@c1;
padding:30px 0 0 0;
margin:0 0 15px 0;
}

ul{
.dt;
.center;
width:70%;
}
li{
padding:15px;
.dtc;
}

}

@media (max-width:1050px){
.sns{

ul{
width:90%;
}

}
}

@media (max-width:650px){
.sns{

ul{
width:100%;
}
li{
padding:5px;
}

}
}


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

h3{
.tac;
font-size:2.5vw;
line-height:150%;
.bold;
color:@c1;
margin:0 0 45px 0;
}

dl{
.dt;
width:100%;
border:5px @g5 solid;
margin:0 0 45px 0;
background:@g7;
.r(15px);
}

dd{
.dtc;
.vat;
padding:30px;
}

dd:first-child{
width:300px;
}

h4{
font-size:19pt;
.bold;
padding:0 0 15px 0;
border-bottom:2px @g5 dotted;
}
p{
padding:15px 0 0 0 ;
}
b{
.db;
color:@c3;
padding:30px 0 0 0;
}

}



@media (min-width:1400px){
.voice,
.example{

h3{
font-size:23pt;
}

}
}


@media (max-width:650px){
.voice{
padding:0 0 30px 0;

h3{
.tal;
font-size:4vw;
margin:0 0 30px 0;

br{
.dn;
}
}

dl{
.db;
border:3px @g5 solid;
margin:0 0 30px 0;
}

dd{
.db;
.vat;
padding:15px;
}

dd:first-child{
max-width:250px;
.center;
}

h4{
font-size:14pt;
padding:0 0 10px 0;
}
p{
padding:10px 0 0 0 ;
}
b{
padding:15px 0 0 0;
}

}
}