@charset "utf-8";
@import "default.less";
@import "common.less";
@import "global.less";



.main{
min-height:1000px;
}

/* nav ///////////////////////*/
nav{
width:200px;
margin:0 40px 0 0;
.pa;

ul{
border-top:1px @glay solid;
}
li{
border-bottom:1px @glay solid;
}
a{
display:block;
padding:10px 0 7px 15px;
background:url(../image/point1.svg) no-repeat 0 50%;
font-size:10pt;
}
a:hover{
background:url(../image/point1.svg) no-repeat 5px 50%;
}

dt{
background-color:#F3F3F3;
padding:10px 0 7px 10px;
border-left:2px @c1 solid;
}
dd{
margin-bottom:30px;
}

.on{
background-color:@c2;
background-size:7px;
font-size:10pt;
}
.sub{
margin-left:30px;
a{
display:block;
padding:5px 0 3px 15px;
background:url(../image/point1.svg) no-repeat 0 50%;
font-size:10pt;
}
a:hover{
background:url(../image/point1.svg) no-repeat 5px 50%;
}
}

}


/* .list ///////////////////////*/
.list{

li{
display:inline-block;
width:240px;
.tac;
padding:10px 0;
img{
max-width:200px;
}
b{
.db;
padding:5px 0 0 0;
}
a:hover{
opacity: 0.5;
filter:alpha(opacity=50);
}
}
.small{
font-size:80%;
}
}


/* .detail ///////////////////////*/
.detail{

header{
margin:0 0 60px 0;

h2 div{
.dt;
letter-spacing:5px;
.bold;
font-size:19pt;
.glay3;
p{
.bold;
.left;
font-size:8pt;
padding:2px 20px 0px 20px;
margin:-3px 20px 0 0;
background-color:@red;
.white;
}
}

h3{
font-size:16pt;
padding:20px 0 30px 0;
.tac;
.bold;
.glay3;
}
h4{
font-size:21pt;
padding:20px 0 0 0;
.c1;
.tac;
}
p{
.tac;
padding:10px;
}
.image{
margin:10px;
padding:10px;

background-color:@c2;
.dt;
.center;
}
.image img{
max-width:740px;
}

}

section{
h3{
background-color:@glay;
border-left:3px @c1 solid;
padding:7px 15px;
.bold;
}

}

.wrap{
padding:30px;
}

}

/* .point ///////////////////////*/
.point{


li:nth-child(1){
background:url(../products/image/n1.svg) no-repeat 0 15px;
}
li:nth-child(2){
background:url(../products/image/n2.svg) no-repeat 0 15px;
}
li:nth-child(3){
background:url(../products/image/n3.svg) no-repeat 0 15px;
}
li:nth-child(4){
background:url(../products/image/n4.svg) no-repeat 0 15px;
}
li:nth-child(5){
background:url(../products/image/n5.svg) no-repeat 0 15px;
}
li:nth-child(6){
background:url(../products/image/n6.svg) no-repeat 0 15px;
}
li:nth-child(7){
background:url(../products/image/n7.svg) no-repeat 0 15px;
}
li:nth-child(8){
background:url(../products/image/n8.svg) no-repeat 0 15px;
}
li:nth-child(9){
background:url(../products/image/n9.svg) no-repeat 0 15px;
}

.image{
.tac;
letter-spacing: -.40em;
li{
.dib;
.vat;
letter-spacing: normal;
margin:5px;
}
li p{
padding:5px;
}
img{
max-width:250px;
max-height:250px;
}
}

}


/* .size ///////////////////////*/
.size{

.image{
.tac;
letter-spacing: -.40em;
li{
.dib;
.vat;
letter-spacing: normal;
margin:5px;
}
li p{
padding:5px;
}
img{
max-width:250px;
max-height:250px;
}
}

}


/* .outline ///////////////////////*/
.outline{

table{
width:100%;
}
table td{
padding:10px;
border:1px @glay solid;
.tac;
}

td:first-child{
background-color:@c4;
}
.green td{
background-color:@c3;
}

p{
padding:10px;
}
}

/* .example ///////////////////////*/
.example{

ul{
letter-spacing: -.40em;
}
li{
.dib;
letter-spacing: normal;
padding:8px;
}
img{
width:120px;
}
a:hover{
opacity: 0.5;
filter:alpha(opacity=50);
}

}


/* .movie ///////////////////////*/
.movie{

.wrap{
.tac;
}

}


/* .more ///////////////////////*/
.more{
.tac;
padding:0 0 40px 0;

li{
.dib;
padding:10px;
}
a{
.db;
cursor:pointer;
border:0px;
padding:20px;
width:400px;
.tac;
.center;
font-size:14pt;
.white;
background:url(../image/point2.svg) no-repeat 10% 47%;
background-color:@c1;
}
a:hover{
background:url(../image/point2.svg) no-repeat 15% 47%;
background-color:@c2;
}

}