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

/* top ///////////////////////*/
.top{
.pr;
.jc;
width:100%;
height:50vw;
max-height:800px;


.image{
width:100%;
height:100%;
.pa;
}

.title h2 p,
.title small{
.dt;
.ffmb;
.tac;
.pr;
color:#FFF;
font-size:54px;
line-height:100%;
z-index:2;
letter-spacing:.3em;
padding:0 0 0 .3em;
margin:40px auto;
}
.title h2 small{
font-size:34px;
}
.title h2 p:after,
.title small:after{
content:"";
.db;
.pa;
left:0;
top:86%;
width:100%;
border-bottom:1px #FFF solid;
}

}

@media (max-width:1000px){
.top{
height:80vh;

.title h2 p,
.title small{
font-size:5vw;
}
.title h2 small{
font-size:3vw;
}

}
}

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

.title h2 p,
.title small{
font-size:20px;
letter-spacing:.2em;
padding:0 20px;
margin:40px auto;
}
.title h2 small{
font-size:17px;
}

}
}


/* news ///////////////////////*/
.news{
padding:80px 0 100px 0;
background:@c5;

dl{
.dt;
width:100%;
}
dd{
.dtc;
.vat;
}

dd:first-child{
width:30%;
}

h2 p{
.pr;
.ffmb;
.dt;
font-size:40px;
line-height:100%;
color:@c2;
letter-spacing:.1em;
padding:0 30px;
}
h2 p:after{
content:"";
.db;
.pa;
left:0;
top:85%;
width:100%;
border-bottom:1px @c2 solid;
}

.new{
.ffmb;
}

}



@media (max-width:1000px){
.news{
padding:40px 0 100px 0;

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

h2 p{
font-size:28px;
line-height:100%;
color:@c2;
letter-spacing:.1em;
padding:0 20px;
}

}
}


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

}
}

/* notice ///////////////////////*/
.notice{
.pr;

.wrap{
.pr;
margin:-40px auto 0 auto;
z-index:1;
max-width:1000px;
padding:50px;
background-color:rgba(255, 255, 255, .9);
box-shadow:0px 0px 10px 0px rgba(0, 0, 0, .3);
}

}

.notice::before{
content:"";
.db;
.pa;
width:100%;
height:50%;
background:@c3;
border-bottom:3px @c2 solid;
}


@media (max-width:800px){
.notice{

.wrap{
margin:-20px auto 0 auto;
padding:15px;
}

}
}

/* about ///////////////////////*/
.about{
padding:100px 0;
background:@c4;

.mark{
width:150px;
margin:-150px auto 50px auto;
}

header h3 p{
color:#FFF;
}
header h3 p:after{
border-bottom:1px #FFF solid;
}

.read h3{
.ffm;
.tac;
font-size:24pt;
padding:40px 0;
}

.text{
.tac;
padding:0 0 40px 0;
}

ul{
.dt;
width:100%;
}
li{
.dtc;
width:16.6%;
margin:0 0 0 -5%;
}

.circle{
.pr;
border:1px #FFF solid;
width:110%;
padding-top:110%;
.r(50%);

.wrap{
.pa;
.tac;
.db;
top:35%;
width:100%;
}
h4{
.ffm;
font-size:2vw;
font-size:16pt;
.nw;
.ps;
}
strong{
font-size:10pt;
}
}

}


@media (max-width:1000px){
.about{
padding:100px 0 60px 0;

.read h3{
font-size:3vw;
padding:0 0 20px 0;
}

ul{
.dt;
.center;
width:80%;
}
li{
.dib;
width:33.3%;
margin:0 0 -5% -1%;
}

.circle{
h4{
font-size:2.7vw;
}
}

}
}

@media (max-width:500px){
.about{
padding:60px 0;

.mark{
width:100px;
margin:-100px auto 30px auto;
}

.read h3{
font-size:14pt;
padding:0 0 20px 0;
line-height:140%;
}

ul{
width:100%;
}
li{
.dib;
width:33.3%;
margin:0 0 -5% -.7%;
}

.circle{
.wrap{
}
h4{
font-size:11pt;
line-height:100%;
}
strong{
font-size:9pt;
}
}

}
}