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


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

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

/* loading ///////////////////////*/
.loading{
.dn;
.pf;
z-index:3000;
height:100%;
width:100%;
background-color:@c1;
.tac;
}
.ht{
margin-top:27vh;
.dn;
}

/* main ///////////////////////*/
.main{
.pr;
height:700px;

.onload{
/* .dn; */
z-index:1;
}

.title{
.pa;
z-index:100;
top:260px;
right:7%;
}

.slider{
.oh;
height:700px;
img{
width:84%;
height:700px;
object-fit: cover;
}
}

}



@media (max-width:800px){
.main{
height:300px;

.title{
z-index:100;
top:250px;
right:50%;
margin-right:-100px;
img{
width:200px;
}
}

.slider{
.oh;
height:300px;
img{
width:100%;
height:300px;
}
}

}
}


/* concept ///////////////////////*/
.concept{
padding:0 0 160px 0;

.title{
.pa;
top:230px;
right:0;
z-index:10;
}

.text{
.pa;
top:300px;
right:320px;
p{
.dn;
}
}

.image1{
padding-top:150px;
}

.image2{
margin:-50px 0 0 150px;
}


}


@media (max-width:800px){
.concept{
padding:0 0 80px 0;

.title{
.pa;
top:150px;
right:0;
img{
width:180px;
}
}

.text{
.ps;
top:0;
right:0;
img{
.dn;
}
p{
padding:20px 0 0 0;
.db;
}
}

.image1{
padding-top:250px;
width:75%;
}

.image2{
margin:-50px 0 0 150px;
}

}
}


/* intro ///////////////////////*/
.intro,
.how{
.pr;
padding:0 0 130px 0;

.bg{
background-color:@c2;
height:620px;
width:750px;
}

.image{
.pa;
top:60px;
right:0;
img{
width:1220px;
height:500px;
object-fit: cover;
}
}

.title{
.pa;
z-index:10;
top:310px;
right:160px;
.ffgb;
letter-spacing:.2em;
font-size:12pt;
}

}


@media (max-width:800px){
.intro,
.how{
padding:0 0 65px 0;

.bg{
background-color:@c2;
height:360px;
width:100%;
}

.image{
.pa;
top:30px;
right:0;
width:100%;
img{
width:100%;
height:300px;
}
}

.title{
.pa;
z-index:10;
top:170px;
right:auto;
font-size:10pt;
width:100%;
.tac;
}

}
}


/* intro ///////////////////////*/
.intro1,
.intro2,
.intro3{
padding:0 0 70px 0;
overflow:auto;

.image{
.pa;
}

.wrap{
.pr;
margin-top:70px;
.right;
background-color:#FFFFFF;
padding:75px;
width:650px;
}
header{
.dn;
}
.title{
padding:0 0 30px 0;
}

}


@media (max-width:800px){
.intro1,
.intro2,
.intro3{
padding:0 0 40px 0;

.image{
.ps;
img{
width:100%;
}
}

.wrap{
.pr;
margin-top:0;
.fn;
padding:35px;
width:100%;
}
header{
.dn;
}
.title{
padding:0 0 20px 0;
}

}
}



/* intro2 ///////////////////////*/
.intro2{

.image{
right:0;
}
.wrap{
.left;
}

}

/* intro3 ///////////////////////*/
.intro3{
padding:0 0 150px 0;

.link{
width:100%;
a{
.db;
height:85px;
text-indexnt:-9999px;
background:url("../image/bt_movie.jpg") no-repeat 30% 50%;
background-size:cover;
border:0;
}
}

a:hover{
opacity:.5;
text-indexnt:-9999px;
}

}


@media (max-width:500px){
.intro3{
padding:0 0 100px 0;

.link{
width:100%;
a{
height:70px;
background-size:410px;
}
}

}
}

/* lineup ///////////////////////*/
.lineup{
.pr;
overflow:auto;

.bg{
background-color:@c2;
height:620px;
width:750px;
.right;
}

.image{
.pa;
top:60px;

img{
width:1220px;
height:500px;
object-fit: cover;
}
}

.title{
.pa;
z-index:10;
top:310px;
left:150px;
.ffgb;
letter-spacing:.2em;
font-size:12pt;
}

}


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

.bg{
height:360px;
width:100%;
}

.image{
top:30px;
right:0;
width:100%;

img{
width:100%;
height:300px;
object-position:63% 50%;
}
}

.title{
.pa;
z-index:10;
top:170px;
left:auto;
font-size:10pt;
width:100%;
.tac;
}

}
}


/* lineup ///////////////////////*/
.lineup1,
.lineup2{
padding:120px 0 0 0;

dl{
.dt;
}
dd{
.dtc;
.vat;
}

.image{
width:600px;
img{
width:600px;
height:450px;
object-fit: cover;
}
}

.wrap{
background-color:#FFFFFF;
padding:60px 70px 0 70px;
width:600px;
height:450px;
}

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

}



@media (max-width:800px){
.lineup1,
.lineup2{
padding:60px 0 0 0;

dl{
.db;
}
dd{
.db;
}

.image{
width:100%;
img{
width:100%;
height:350px;
object-fit: cover;
}
}

.wrap{
padding:50px 30px 30px 30px;
width:100%;
height:auto;
}

.title{
padding:0 0 20px 0;
h3{
font-size:15pt;
}
}

}
}


/* option ///////////////////////*/
.option{
padding:130px 0 80px 0;

.title{
.tac;
h2{
.dib;
padding:20px 0 10px 0 ;
border-bottom:1px #333333 solid;
font-size:20pt;
}
}

}

@media (max-width:800px){
.option{
padding:40px 0 40px 0;

.title{
.tac;
h2{
.nw;
font-size:13pt;
}
}

}
}


/* option ///////////////////////*/
.option1,
.option2,
.option3{
padding:0 0 80px 0;

dl{
.dt;
}
dd{
.dtc;
.vat;
}

.image{
width:400px;
}

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

.title{
padding:0 0 10px 0;
h3{
font-size:16.5pt;
padding:0 0 10px 0;
border-bottom:1px #333333 dotted;
}
}

.link{
a{
width:200px;
}
}

}

@media (max-width:800px){
.option1,
.option2,
.option3{
padding:0 0 60px 0;

dl{
.db;
}
dd{
.db;
}

.image{
width:100%;
}

.wrap{
padding:40px 0 0 0;
}

.title{
padding:0 0 10px 0;
h3{
font-size:11pt;
.bold;
padding:0 0 10px 0;
}
}

.link{
a{
width:100%;
}
}


}
}


/* cross ///////////////////////*/
.cross{
padding:100px 0 150px 0;

.image{
img{
width:100%;
height:480px;
object-fit: cover;
}
}

.wrap{
.tac;
background-color:#FFFFFF;
padding:60px 0;
margin-top:-50px;
}

.title{
padding:0 0 20px 0;
.ffgb;
letter-spacing:.2em;
font-size:12pt;
}

.link{
a{
width:200px;
.center;
.ffgb;
letter-spacing:.2em;
font-size:8pt;
}
}


}


@media (max-width:800px){
.cross{
padding:30px 0 100px 0;

.image{
img{
width:100%;
height:260px;
}
}

.wrap{
padding:40px 10px;
margin-top:-30px;
}

}
}


/* how ///////////////////////*/
.how1,
.how2,
.how3,
.how4{
padding:0 0 80px 0;

dl{
.dt;
}
dd{
.vat;
.dtc;
}

.image{
width:400px;
img{
margin:0 0 10px 0;
}
}
.wrap{
padding:60px 0 0 60px;
}

em{
.ffgb;
font-size:7.5pt;
color:@red;
letter-spacing:.3em;
}

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


}


@media (max-width:800px){
.how1,
.how2,
.how3,
.how4{
padding:0 0 40px 0;

.copy{
padding:10px;

img{
width:75px;
}

}

dl{
.db;
}
dd{
.db;
}

.image{
width:100%;
img{
margin:0 0 10px 0;
}
}
.wrap{
padding:20px 0 0 0;
}

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


}
}


/* how1 ///////////////////////*/
.how1{

.copy{
.pa;
right:0;
}

dd:last-child{
padding-right:150px;
}
}


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

.copy{
.pa;
top:40px;
right:0;
}

dd:last-child{
padding-right:0;
}

}
}


/* gallery ///////////////////////*/
.gallery{

.copy{
.pa;
right:0;
}

.image{
padding:100px 50px 150px 50px;
img{
width:100%;
height:690px;
object-fit: cover;
}
}

}


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

.copy{
img{
width:130px;
}
}

.sp{
.di;
}

.image{
padding:70px 0 70px 0;
img{
width:100%;
height:auto;
object-fit: contain;
}
}

}
}

/* .ogamido_banner ///////////////////////*/
.ogamido_banner{
color: #FFFFFF;
background-color: #FFFFFF;
overflow: hidden;
position:relative;
height:300px;
margin-bottom:40px;
}
.ogamido_banner::before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: url(../../image/ogamido_banner2.jpg) no-repeat center center / cover;
-webkit-transition: opacity .5s, -webkit-transform .5s;
transition: opacity .5s, transform .5s;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.ogamido_banner:hover::before{
opacity: 0.3;
-webkit-transform: scale3d(1.1,1.1,1);
transform: scale3d(1.1,1.1,1);
}
.ogamido_banner a{
position:absolute;
top:0;
left:0;
background:url("../../image/kids_frame.png") no-repeat 0 0;
background-size:100% 100%;
text-align:left;
width:100%;
height:300px;
border:5px #FF0000 sloid;
}

.ogamido_banner a img{
position:absolute;
top:55px;
left:15%;
}

.ogamido_banner .new{
position:absolute;
top:0;
left:0;
}


@media (max-width: 700px) {
.ogamido_banner a img{
position:absolute;
top:120px;
left:7%;
width:85%;
}
}


@media (max-width: 800px) {
.ogamido_banner a{
background:url("../../image/kids_frame2.png") no-repeat 0 0;
background-size:100% 100%;
}
}

@media (max-width: 500px) {
.ogamido_banner a{
background:url("../../image/kids_frame3.png") no-repeat 0 0;
background-size:100% 100%;
}
}

/* .tanagokoro_banner ///////////////////////*/
.tanagokoro_banner{
color: #FFFFFF;
background-color: #FFFFFF;
overflow: hidden;
position:relative;
height:370px;
margin-bottom:40px;
}
.tanagokoro_banner::before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: url(../../image/tanagokoro_banner2.jpg) no-repeat left 70% center / cover;
-webkit-transition: opacity .5s, -webkit-transform .5s;
transition: opacity .5s, transform .5s;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.tanagokoro_banner:hover::before{
opacity: 0.3;
-webkit-transform: scale3d(1.1,1.1,1);
transform: scale3d(1.1,1.1,1);
}
.tanagokoro_banner a img{
position:absolute;
top:50%;
left:10%;
transform: translateY(-50%);
width: 80%;
}


@media (max-width: 700px) {
.tanagokoro_banner{
height: 300px;
}
.tanagokoro_banner a img{
left:-35%;
width:130%;
max-width: none;
}
}