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


/* body ///////////////////////*/
/*
.design{
.pa;
z-index:0;
width:100%;
height:15000px;
background:url("../service/image/design.jpg") no-repeat center 0;
opacity:.3;
}

.body{
.pr;
z-index:1;
}
*/


/* message ///////////////////////*/
.message{
padding:130px 0 0 0;
.tac;

h2{
font-size:25pt;
padding:0 0 30px 0;
line-height:120%;
}

}

@media (max-width:500px){
.message{
padding:80px 0 0 0;

h2{
font-size:16pt;
padding:0 0 20px 0;
}

}
}



/* example ///////////////////////*/
.example{
padding:50px 90px;

h3{
.ffgb;
font-size:17pt;
letter-spacing:.05em;
color:@c3;
padding:0 0 30px 0;
}

ul{
.tal;
}
li{
padding:10px;
.dib;
width:33.3%;
.vat;
}

.wrap{
.pr;
padding:50px 30px; 
background:#FFF;
}
h4{
.ffgb;
color:@c3;
font-size:14pt;
padding:0 0 10px 0;
border-bottom:1px @g2 solid;
margin:0 0 10px 0;
}

.wrap:before{
content:'';
border-top:6px @c1 solid;
border-right:6px @c1 solid;
border-bottom:6px #FFF solid;
border-left:6px #FFF solid;
.pa;
right:5px;
top:5px;
}

a{
color:@c2;
.dib;
}
a:hover{
.tdu;
}

}


@media (max-width:1200px){
.example{
padding:50px 40px;

li{
padding:5px;
width:50%;
}
.wrap{
padding:30px 20px; 
}

}
}

@media (max-width:500px){
.example{
padding:50px 5px 30px 5px;


h3{
font-size:14pt;
padding:0 0 20px 0;
}


li{
.db;
padding:5px;
width:100%;
}
.wrap{
padding:30px 20px; 
}

}
}


/* title ///////////////////////*/
.plan .title,
.seminar .title{
height:450px;

header{
height:100%;
color:#FFF;
padding:150px 0 0 0;
}
p{
.ffgb;
font-size:25pt;
color:#FFF;
padding:0 0 10px 0;
border-bottom:3px #FFF solid;
.dib;
}
h2{
color:#FFF;
padding:20px 0 10px 0;
}

}

@media (max-width:1000px){
.title{
height:300px;

header{
padding:90px 0 0 0;
}

}
}


/* consult ///////////////////////*/
.consult{
padding:0;

article{
background:@g1;
padding:30px 100px 100px 100px;
}

.wrap{
.pr;
background:#FFF;
border:1px @g2 solid;
padding:30px 50px;
}

.pro{
.pa;
.dib;
top:-25px;
z-index:10;

p{
.db;
height:120px;
width:120px;
background:url(../image/glow.svg) no-repeat 50% 50%;
background-size:cover;
background-color:@c3;
.r(50%);
.tac;
padding:35px 0 0 0;
color:#FFF;
.ffgb;
}

}

h3{
font-size:25pt;
color:@c3;
padding:0 0 20px 150px;
margin:0 0 20px 0;
border-bottom:1px @g2 dotted;
letter-spacing:.2em;
.ffgb;
}

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

dd:nth-child(2){
.link a{
background-color:@c2;
}
}

dd:nth-child(3){
.link a{
background-color:@c1;
}
}

.link p{
.dib;
padding:0 0 0 35px;
background:url(../image/contact_icon2.png) no-repeat 0 50%;
}

.tel{
color:@c2;
.ffgb;
font-size:26pt;
letter-spacing:.1em;
padding:0 0 5px 0;
.nw;
}
a{
color:@c2;
}
	
.time{
	font-size:11pt;	
	}	

}



@media (max-width:1200px){
.consult{

article{
padding:30px 50px 50px 50px;
}

.wrap{
padding:30px 50px;
}

h3{
font-size:20pt;
}

dl{
.dt;
width:100%;
}
dd{
.db;
width:100%;
padding:5px;
.tac;
}

}
}


@media (max-width:500px){
.consult{

article{
padding:0 10px 10px 10px;
}
.wrap{
.tac;
padding:20px 20px;
}

.tel{
font-size:20pt;
}

.time{
font-size:10pt;	
}	

.pro{
.ps;
margin:0 auto 10px auto;
}
h3{
font-size:14pt;
padding:0 0 10px 0;
letter-spacing:.1em;
}

}
}


/* plan ///////////////////////*/
.plan{
padding:60px 0 0 0;
.tac;

article{
background:@g1;
}

.title{
background:url("../service/image/plan1.jpg") no-repeat 0 0;
background-size:cover;
}
header{
background:rgba(238, 134, 180, .3);
}


.sec1{
padding:50px 100px 0 100px;

.text{
padding:0 0 50px 0;
}

h3{
.ffgb;
font-size:17pt;
letter-spacing:.05em;
color:@c3;
}

}

.image{
padding:30px 0 0 0;
ul{
.dt;
.center;
}
li{
.dtc;
img{
width:100%;
height:100%;
.of;
}
}
}

.life{
margin:70px 0 0 0;
border-top:1px @g2 solid;

ul{
.dt;
.center;
width:60%;
margin-top:-10px;
}
li{
.dtc;
.vat;
.tac;
}

p{
.tal;
.vat;
.center;
writing-mode: vertical-rl;  
ext-orientation: upright;
letter-spacing:.3em;
.ffgb;
.db;
height:180px;
}

p:before{
content:'';
border:6px @c2 solid;
width:5px;
height:5px;
.dib;
.r(50%);
margin:0 0 15px 0;
}

}

}


@media (max-width:1200px){
.plan{

.sec1{
padding:30px 50px 0 50px;
}

}
}

@media (max-width:500px){
.plan{

.sec1{
padding:20px 10px 0 10px;
.text{
padding:0 0 30px 0;
}
h3{
font-size:13pt;
line-height:150%;
}
}

.life{
margin:40px 0 0 0;
}

}
}


/* seminar ///////////////////////*/
.seminar{
padding:100px 0 0 0;
.tac;

article{
background:@g1;
}

.title{
background:url("../service/image/seminar1.jpg") no-repeat 0 0;
background-size:cover;
}
header{
background-color:rgba(9, 71, 139, .3);
}


.sec1{
padding:50px 100px;

.text{
padding:0 0 50px 0;
}

h3{
.ffgb;
font-size:17pt;
letter-spacing:.05em;
color:@c1;
}

.image{
padding:50px 0 0 0;
}

ul{
width:100%;
padding:50px;
background:url("../service/image/seminar2.jpg") no-repeat 100% 50%;
background-size:cover;
}
li{
width:25%;
height:230px;
padding:10px;
.dib;
.vam;
background:url("../service/image/fuki.svg") no-repeat 50% 50%;
}
.wrap{
.dt;
height:100%;
.center;
}
p{
.ffgb;
color:#FFF;
.tal;
.dtc;
.vam;
}
span{
.db;
}

} /* sec1 */

.example{

h3,
h4{
color:@c1;
}
.wrap:before{
border-top:6px @c3 solid;
border-right:6px @c3 solid;
}

}

}


@media (max-width:1200px){
.seminar{
padding:80px 0 0 0;

.sec1{
padding:30px 50px 0 50px;

ul{
padding:20px;

}

}

}
}


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

.sec1{
.image{
padding:10px 0 0 0;
}
ul{
padding:10px;
}
li{
width:100%;
height:auto;
padding:5px;
.db;
.vam;
background:url();
}
.wrap{
.db;
}
p{
.db;
padding:10px 0;
background-color:rgba(34, 160, 233, .4);
.r(50px);
width:100%;
.tac;
}
span{
.dib;
}
}

}
}

@media (max-width:500px){
.seminar{
padding:50px 0 0 0;

.sec1{
padding:20px 10px 0 10px;
.text{
padding:0 0 30px 0;
}
h3{
font-size:13pt;
line-height:150%;
}

}

}
}


/* products ///////////////////////*/
.products{
margin:100px 0 0 0;
padding:30px 0;
background:@g1;
.tac;

.text{
padding:0 0 30px 0;
}

.example{
padding:50px 0;
li{
width:25%;padding:10px;
}
}

p{
padding:10px;
.tal;

}
}


@media (max-width:1200px){
.products{
margin:80px 0 0 0;
padding:0;

.example{
padding:50px 0;
li{
width:50%;
padding:10px;
}
}

}
}

@media (max-width:500px){
.products{
margin:50px 0 0 0;

.text{
padding:0 0 20px 0;
}

.example{
li{
width:100%;
padding:5px;
}
}

}
}


/* flow ///////////////////////*/
.flow{
padding:100px 0;

.table{
.dt;
width:100%;
}
section{
.dtc;
.vat;
}
section:first-child{
width:300px;
}

header{
border-left:3px @c2 solid;
padding:10px 0 10px 20px;
}
h3{
font-size:25pt;
line-height:180%;
}
.text{
padding:30px 0 0 0;
}


dl{
.dt;
padding:10px 0 10px 0;
width:100%;
border-bottom:1px @g2 dotted;
}
dd{
.dtc;
.vat;
.pr;
}
dd:nth-child(1){
width:230px;
padding:0 20px  0 0;
}
h3{
color:@c2;
font-size:13pt;
.ffgb;
padding:10px 0 10px 0;
}

em{
.db;
.pa;
right:10px;
top:-10px;
.oh;
width:100px;
height:50px;
}
em:before{
content:"";
width:100px;
height:100px;
background:@c2;
.pa;
top:-70px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
z-index:1;
}
small{
.db;
.pr;
color:#FFF;
z-index:10;
.tac;
.ffgb;
letter-spacing:.1em;
padding:2px 0 0 0;
}

dl:first-child{
border-top:1px @g2 dotted;
}

dl:nth-child(even){
background:@g1;
h3{
color:@c3;
}
em:before{
background:@c3;
}
}

}


@media (max-width:1200px){
.flow{
padding:80px 0;

section:first-child{
width:200px;
}

}
}


@media (max-width:1000px){
.flow{
padding:80px 0;

section:first-child{
width:100%;
padding:0 0 20px 0;
}
.table{
.db;
}
section{
.db;
}

}
}


@media (max-width:500px){
.flow{
padding:50px 0;

dl{
.db;
padding:20px 0 20px 0;
}
dd{
.db;
}
dd:nth-child(1){
width:100%;
padding:0 0 10px 0;
img{
width:100%;
height:150px;
.of;
}
}
h3{
color:@c2;
font-size:13pt;
.ffgb;
padding:10px 0 10px 0;
}

}
}


/* qa ///////////////////////*/
.qa{
padding:100px 0;
background:@g1;

.table{
.dt;
width:100%;
}
section{
.dtc;
.vat;
}
section:first-child{
width:300px;
}

header{
border-left:3px @c2 solid;
padding:10px 0 10px 20px;
}
h3{
font-size:25pt;
line-height:180%;
}
.text{
padding:30px 0 0 0;
}

i{
.dib;
width:25px;
height:25px;
line-height:25px;
background:@c2;
color:#FFF;
.ffgb;
.r(50%);
.tac;
margin-left:-35px;
.left;
}

dl{
border-top:1px @g2 dotted;
width:100%;
}
dt{
padding:20px 0 20px 55px;
border-bottom:1px @g2 dotted;
}
dd{
.dn;
padding:20px 0 20px 55px;
border-bottom:1px @g2 dotted;
background:#FFF;
i{
background:@c3;
}
img{
border:10px @g1 solid;
margin:10px 0;
}
}
dt:hover{
.tdu;
}

}


@media (max-width:1200px){
.qa{
padding:80px 0;

section:first-child{
width:200px;
}

}
}


@media (max-width:1000px){
.qa{
padding:50px 0;

section:first-child{
width:100%;
padding:0 0 20px 0;
}
.table{
.db;
}
section{
.db;
}

dt{
padding:20px 0 20px 45px;
}
dd{
.dn;
padding:20px 0 20px 45px;
}

}
}