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

/* h2 ///////////////////////*/
header{

h2{
.tac;
.ffgm;
font-size:28pt;
padding:0 0 20px 0;
letter-spacing:.05em;
}
p{
.tac;
}

}

@media (max-width:700px){
header{

h2{
font-size:18pt;
padding:0 0 10px 0;
}

}
}

/* h3 ///////////////////////*/
header{
padding:0 0 20px 0;

h3{
.ffgm;
letter-spacing:.06em;
font-size:19pt;
border-left:5px @c1 solid;
padding:0 0 0 20px;
line-height:100%;
}

}


@media (max-width:700px){
header{

h3{
font-size:15pt;
border-left:3px @c1 solid;
padding:0 0 0 10px;

}

}
}


/* top ///////////////////////*/
.top{

.area{
.oh;
}
.wrap{
width:100%;
}
border-bottom:10px @c1 solid;

dl{
.dt;
width:100%;
height:30vw;
}
dd{
.tac;
.vam;
.dtc;
width:50%;
background:@c3;
color:#FFF;
}

h3{
.ffgm;
font-size:28pt;
letter-spacing:.1em;
padding:0 0 30px 0;
line-height:120%;
.nw;
}
p{
font-size:15pt;
.bold;
}

}

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


h3{
.ffgm;
font-size:19pt;
letter-spacing:.1em;
padding:0 0 10px 0;
}
p{
font-size:11pt;
.bold;
}

}
}


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

border-bottom:5px @c1 solid;

dl{
.db;
width:100%;
height:auto;
}
dd{
.db;
width:100%;
height:180px;
}

h3{
.ffgm;
font-size:17pt;
letter-spacing:.1em;
padding:50px 0 10px 0;
}
p{
font-size:11pt;
.bold;
}

}
}

/* info ///////////////////////*/
.info{
padding:80px 0 0 0;

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

dd:first-child{
padding:0 20px 0 0;
}
dd:last-child{
padding:0 0 0 20px;
}

ul{
border:1px @c2 solid;
height:280px;
.os;
}

li{
padding:10px 0 10px 10px;
}
li:nth-child(odd){
.bg2;
}
li a::before {
content:'';
.pa;
top:.7em;
left:.5em;
width:5px;
height:5px;
background: @text;
}

a{
.pr;
.db;
.vat;
padding:0 0 0 15px;
}
p{
.dib;
padding:0 0 0 5px;
}

a:hover > p{
.tdu;
}

.new{
background:@c5;
color:#FFF;
.dib;
padding:0 10px;
font-size:9pt;
line-height:160%;
.bold;
margin:0 0 0 5px;
}

}


@media (max-width:700px){
.info{
padding:40px 0 0 0;

dl{
.db;
}
dd{
.db;
width:100%;
}

dd:first-child{
padding:0;
}
dd:last-child{
padding:30px 0 0 0;
}


}
}


/* guide ///////////////////////*/
.guide{
padding:80px 0 0 0;
background:#FFF;

header{
padding:0 0 40px 0;
}

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

a{
.db;
margin:0 auto 0 auto;
width:162px;
height:162px;
padding:5px;
transition:.3s;
.r(50%);
border:1px @c1 solid;
}

.wrap{
.db;
width:150px;
height:150px;
line-height:150px;
.r(50%);
.tac;
background:@c1;
img{
width:100%;
height:100%;
}
}

h4{
.ffgm;
font-size:17pt;
color:#FFF;
.nw;
}

a:hover{
opacity:.6;
}

}

.area1 .image{
background:url("../image/n1.png") no-repeat 50% 50%;
background-size:cover;
}
.area2 .image{
background:url("../image/n2.png") no-repeat 50% 50%;
background-size:cover;
}
.area3 .image{
background:url("../image/n3.png") no-repeat 50% 50%;
background-size:cover;
}
.area4 .image{
background:url("../image/n4.png") no-repeat 50% 50%;
background-size:cover;
}
.area5 .image{
background:url("../image/n5.png") no-repeat 50% 50%;
background-size:cover;
}

.sp{
.dn;
}

}


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

header{
padding:0 0 30px 0;
}

dl{
.db;
}
dd{
.dib;

a{
width:132px;
height:132px;
}

.wrap{
width:120px;
height:120px;
line-height:120px;
}

h4{
font-size:15pt;
}

}

}
}


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


dl{
.nw;
}
dd{
.dib;

a{
width:112px;
height:112px;
}

.wrap{
width:100px;
height:100px;
line-height:100px;
}

h4{
font-size:13pt;
}

}
}
}

@media (max-width:600px){
.guide{

dd{
.dib;

a{
width:92px;
height:92px;
}

.wrap{
width:80px;
height:80px;
line-height:80px;
}

h4{
font-size:10pt;
}

}
}
}


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

dd{
padding:0 3px;
width:auto;
}

.sp{
.di;
}

}
}


/* about ///////////////////////*/
.about{
margin:80px 0 0 0;
padding:80px 0;
.bg2;

dl{
.dt;
width:100%;
}
dd{
.dtc;
width:33.3%;
padding:0 5px;
}

a{
.db;
padding:5px;
width:100%;
}
.wrap{
.tac;
border:1px #FFF solid;
padding:60px 0;
color:#FFF;
}

h3{
.ffgm;
font-size:19pt;
padding:0 0 20px 0;
.nw;
}

p{
.db;
line-height:180%;
font-size:10pt;
.bold;
}

a:hover{
opacity:.6;
}

.kyujitsu{
a{
background:@yellow;
}
.wrap{
background:url("../image/icon2.png") no-repeat 50% 50%;
background-size:contain;
}
}
.houmon{
a{
background:@pink;
}
 .wrap{
background:url("../image/icon1.png") no-repeat 50% 50%;
background-size:contain;
}
}
.care{
a{
background:@green;
}
.wrap{
background:url("../image/icon3.png") no-repeat 50% 50%;
background-size:contain;
}
}

}


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

h3{
.ffgm;
font-size:2.5vw;
padding:0 0 20px 0;
}

}
}

@media (max-width:700px){
.about{
margin:40px 0 0 0;
padding:40px 0;

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

.wrap{
padding:30px 0;
}

h3{
.ffgm;
font-size:17pt;
padding:0 0 10px 0;
}

}
}



/* top_link ///////////////////////*/
.top_link{
padding:80px 0;

li{
.dib;
.nw;
border-left:1px @c3 solid;
line-height:100%;
padding:0 10px;
margin:10px 0;
}

a:hover{
.tdu;
}

}

@media (max-width:700px){
.top_link{
padding:40px 0 35px 0;

li{
margin:7px 0;
}

}
}


/* .youtube ///////////////////////*/
.youtube{
.pr;
z-index:10;
padding:80px 0 0 0;
margin:0;

.area{
width:100%;
width:80%;
.center;
}

.wrap{
.pr;
width:100%;
padding-top:56%;
}
.wrap iframe{
.pa;
top:0;
width:100%;
height:100%;
}
p{
padding:10px 0;
}

.navi{
.pa;
top:45%;
left:50%;
width:960px;
margin-left:-480px;
}
.prev{
.pa;
left:0;
cursor:pointer;
}
.next{
.pa;
right:0;
cursor:pointer;
}
}

@media (max-width:980px) {
.youtube{
padding:60px 0 0 0;
margin:0;

.navi{
.dn;
}

}
}

@media (max-width:480px) {
.youtube{
padding:50px 0 0 0;

.area{
width:100%;
}

}
}