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

/* top ///////////////////////*/
.top{
.pr;
.oh;
height:90vw;

.waku1{
.pa;
.oh;
.tac;
top:-5vw;
z-index:1;
width:100%;
mix-blend-mode:color-dodge;
img{
width:95vw;
}
}

.waku2{
.pa;
top:3vw;
right:-3vw;
z-index:1;
mix-blend-mode:color-dodge;
img{
width:12vw;
}
}

.waku3{
.pa;
top:3vw;
left:-4vw;
z-index:1;
mix-blend-mode:color-dodge;
img{
width:12vw;
}
}

.bg{
.pa;
width:100%;
height:100%;
background:url(../image/top_bg.jpg) no-repeat 50% 100%;
background-size:cover;
}

.sp_star,
.sp_chara{
.dn;
}

.pc_chara{
.pa;
top:3vw;
left:50%;
z-index:2;
width:90vw;
margin-left:-45vw;
img{
width:100%;
}
}

.pc_star{
.pa;
top:3vw;
left:50%;
z-index:3;
width:90vw;
margin-left:-45vw;
mix-blend-mode:color-dodge;
img{
width:100%;
}
}

.logo{
.pa;
top:1vw;
left:50%;
z-index:5;
width:46vw;
margin-left:-25vw;
img{
width:100%;
}
}

.castle{
.pa;
bottom:12vw;
right:3vw;
width:20vw;
}

}



@media (max-width:600px){
.top{
height:100vh;

.castle{
.pa;
bottom:9vh;
width:40vw;
}

.logo{
top:3vh;
width:80vw;
z-index:2;
margin-left:-40vw;
}

.pc_star,
.pc_chara{
.dn;
}

.sp_star{
.db;
.pa;
top:30vh;
left:50%;
z-index:4;
width:90vw;
margin-left:-45vw;
mix-blend-mode:color-dodge;
img{
width:100%;
}
}

.sp_chara{
.db;
.pa;
top:30vh;
left:50%;
z-index:3;
width:90vw;
margin-left:-45vw;
img{
width:100%;
}
}

}
}


/*  contents ///////////////////////*/
.contents{

.line{
.pa;
z-index:1;
width:100%;
.tac;
top:-5vw;
}

.title{
.pr;
.center;
width:40vw;
min-width:280px;

h2{
.pa;
top:0;
width:100%;
padding:10vw 0 0 0;
.tac;
font-size:3vw;
.ffgb;
}
}

.title p{
width:100%;
}
.title p img{
width:100%;
}

.text{
max-width:800px;
.center;
padding:80px 0;
.ffgb;
}

.area{
width:120%;
margin-left:-10%;
}

.list{
width:100%;

li{
padding:0 15px;
.tac;
}
img{
padding:10px;
background:#FFF;
.r(10px);
}
p{
padding:15px 0 0 0;
line-height:140%;
.ffgb;
}
}

}




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

.title{
h2{
padding:70px 0 0 0;
font-size:18pt;
}
}

.text{
.tal;
padding:60px 0;
br{
.dn;
}
}

}
}

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

.line{
.pa;
z-index:1;
width:100%;
.tac;
top:-8vw;
}

.line p{
.oh;
}

.line p img{
width:150%;
max-width:none;
margin:0 0 0 -90px;
}

.list{
li{
padding:0 10px;
width:100%;
}
img{
padding:5px;
}
}

}
}



/*  short ///////////////////////*/
.short{
background:#B7E877;
margin-top:-16vw;
padding:0 0 200px 0;

.title p{
mix-blend-mode:color-dodge;
}

.next{
right:11%;
}
.prev{
left:11%;
}

}


@media (max-width:800px){
.short{
padding:0 0 120px 0;

.area{
width:280%;
margin-left:-34%;
}

.next{
right:15%;
}
.prev{
left:15%;
}

}
}

/*  long ///////////////////////*/
.long{
.pr;
padding:0 0 200px 0;
background:#3A3A89;
color:#FFF;

a{
color:#FFF;
}


.tree{
.pr;
top:0;
width:100%;
background:url(../image/long_star.png) no-repeat 50% 0;
background-size:contain;
}

.tree1{
.oh;
.pa;
width:25vw;
max-width:550px;
img{
width:100%;
margin:-60px auto 0 -50px;
}
}

.tree2{
.oh;
.ps;
margin:0 0 0 auto;
width:60vw;
max-width:850px;
img{
width:100%;
margin:-40px auto 0 150px;
}
}

.title{
margin-top:-15vw;
}

.title p{
mix-blend-mode:color-dodge;
}

.next{
right:17%;
}
.prev{
left:17%;
}

}


@media (max-width:800px){
.long{
padding:0 0 120px 0;

.tree{
background:url(../image/long_star2.png) no-repeat 30% 0;
background-size:contain;
}

.tree1{
.ps;
width:55vw;
max-width:320px;
min-width:200px;
img{
margin:10vw auto 0 -45px;
}
}

.tree2{
.pa;
top:0;
right:0;
width:80vw;
max-width:680px;
min-width:400px;
img{
margin:-40px auto 0 120px;
}
}

.area{
width:300%;
margin-left:-62%;
}

.next{
right:7%;
}
.prev{
left:7%;
}

}
}



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

.tree{
background:url(../image/long_star2.png) no-repeat -5vw 5vw;
background-size:contain;
}

.tree1{
.ps;
width:55vw;
max-width:320px;
min-width:200px;
img{
margin:30vw auto 0 -45px;
}
}

.tree2{
.pa;
top:0;
right:0;
width:80vw;
max-width:680px;
min-width:400px;
img{
margin:-40px auto 0 130px;
}
}

.title{
margin-top:0;
}

}
}


/*  character ///////////////////////*/
.character{
.pr;
padding:200px 0 0 0;
background:#FFF;

.title p{
opacity:.4;
}

.next{
right:7%;
background:#FFF;
}
.prev{
left:7%;
background:#FFF;
}

}


@media (max-width:800px){
.character{
padding:120px 0 0 0;

.area{
width:300%;
margin-top:50px;
margin-left:-25%;
}

.next{
right:15%;
}
.prev{
left:15%;
}

}
}



/*  goods ///////////////////////*/
.goods{
padding:200px 0;
background:#FFF;

.title p{
opacity:.4;
}

}


@media (max-width:800px){
.goods{
padding:120px 0;

}
}

/*  banner ///////////////////////*/
.banner{
padding:90px 0 0 0;
background:#FFFFCC;

ul{
.dt;
width:100%;
}
li{
.tac;
.dtc;
width:50%;
padding:0 1%;
}

.wrap{
background:#FFF;
padding:15px 0;
.r(20px;)
}

li:nth-child(1) .wrap{
border:3px @c2 solid;
}
li:nth-child(2) .wrap{
border:3px @c1 solid;
}

}

@media (max-width:500px){
.banner{
padding:30px 0 0 0;

ul{
.db;
width:100%;
margin-ledt:0;
}
li{
.db;
width:100%;
padding:0 0 15px 0;
}

.wrap{
background:#FFF;
padding:0 30px;
.r(10px);
}

}
}


/*  contact ///////////////////////*/
.contact{
.pr;
padding:90px 0;
background:#FFFFCC;
.tac;

.tel,
.tel a{
margin:45px 0 15px 0;
font-size:16pt;
.bold;
}

h3{
padding:0 0 10px 0;
}

}

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

h3{
font-size:10pt;
}
.tel,
.tel a{
font-size:14pt;
}

}
}