@charset "utf-8";
*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
font-size:62.5%;
}
/* main
----------------------------------------------------------------*/
body{
font:normal 160%/170% "メイリオ","Osaka", sans-serif;
text-align:justify;
color:#40210e;
background:url(../img/bg.jpg);
}

img{
border:none;
max-width:100%;
}

a{
color:#40210e;
text-decoration:none;
}

ul, ol{
list-style:none;
}

.both{
clear:both;
}

.fig{
text-align:center;
}

#wrapper{
overflow:hidden;
}

.sp{
display:none;
}

.container{
position:relative;
margin:0 auto;
width:1100px;
}

/* header
----------------------------------------------------------------*/
header{
position:relative;
background:url(../img/header-bg.jpg) no-repeat;
background-size:contain;
text-align:center;
}

h1{
padding:3rem 0 0;
}

header h2{
margin:2.5rem 0 0;
}

/* entry
----------------------------------------------------------------*/
.entry{
text-align:center;
background:url(../img/dot.png);
}

.entry>div{
background:url(../img/entry-bg.png) no-repeat top center;
background-size:contain;
}

.entry .container{
padding:14rem 0 3rem;
}

.entry h2, .entry figure{
display:inline-block;
}

.rinr, .rinr2, .msr, .msr2, .mfi2, .mbi, .rin, .rin2, .rin3, .mfi3, .msu, .msu2{
opacity:0;
}

.move{
margin:-3.5rem auto 6rem;
text-align:center;
}

.move a{
transition:all 0.6s ease;
}

.move a:hover{
opacity:0.7;
filter:drop-shadow(3px 3px 6px rgba(237, 130, 177, 0.8));

}

/* storage
----------------------------------------------------------------*/
#storage{
text-align:center;
background:url(../img/storage-bg.png) no-repeat bottom center;
background-size:cover;
}

#storage h2{
position:absolute;
top:8rem;
left:0;
width:100%;
}

#storage figure:nth-child(3){
position:absolute;
top:6rem;
left:-5rem;
}

#storage figure:nth-child(4){
position:absolute;
top:3rem;
right:-7rem;
}

@-webkit-keyframes fuwafuwa {
0% {-webkit-transform:translate(0, 0) rotate(-5deg);}
50% {-webkit-transform:translate(0, -10px) rotate(0deg);}
100% {-webkit-transform:translate(0, 0)rotate(5deg);}

}

@keyframes fuwafuwa {
0% {transform:translate(0, 0) rotate(-5deg);}
50% {transform:translate(0, -10px) rotate(0deg);}
100% {transform:translate(0, 0)rotate(5deg);}

}

.fuwafuwa{
-webkit-animation:fuwafuwa 3s infinite linear alternate;
animation:fuwafuwa 3s infinite linear alternate;

}

.fuwafuwa2{
-webkit-animation:fuwafuwa 2s infinite linear alternate;
animation:fuwafuwa 2s infinite linear alternate;

}

.fuwafuwa3{
-webkit-animation:fuwafuwa 4s infinite linear alternate;
animation:fuwafuwa 4s infinite linear alternate;

}

.fuwafuwa4{
-webkit-animation:fuwafuwa 2.5s infinite linear alternate;
animation:fuwafuwa 2.5s infinite linear alternate;

}


/* anxiety
----------------------------------------------------------------*/
#anxiety{
padding:5rem 0;
text-align:center;
background:#f5ebe9 url(../img/line01.png) repeat-x bottom;
overflow:hidden;
}

#anxiety h2{
margin:0 0 4rem;
}

#anxiety figure:nth-child(3){
position:absolute;
top:14rem;
right:2rem;
}

/* failure
----------------------------------------------------------------*/
#failure{
padding:5rem 0;
text-align:center;
background:#ebf5ec url(../img/line02.png) repeat-x bottom;
overflow:hidden;
}

#failure h2{
margin:0 0 2rem;
}

#failure figure:nth-child(3){
position:absolute;
top:14rem;
right:2rem;
}


/* trouble
----------------------------------------------------------------*/
#trouble{
padding:5rem 0 0;
text-align:center;
background:#fff url(../img/trouble-bg.png) no-repeat;
}

#trouble h2{
padding:3rem 0 1.5rem;
}

#trouble li{
position:absolute;
}

#trouble li:first-child{
top:35%;
left:12%;
}

#trouble li:nth-child(2){
top:65%;
left:12%;
}

#trouble li:nth-child(3){
top:30%;
left:58%;
}

#trouble li:nth-child(4){
top:65%;
left:65%;
}

/* answer
----------------------------------------------------------------*/
#answer{
margin:-0.8rem 0 0;
padding:6rem 0 0;
background:url(../img/line03.png) repeat-x top;
}

#answer h2{
margin:0 0 5rem;
text-align:center;
}

#three{
display:flex;
margin:3rem auto 0;
width:90%;
}

#three li{
padding:0 4rem;
width:calc(100% / 3);
text-align:center;
}

#three li a:hover{
display:inline-block;
-webkit-animation:fuwafuwa 2.5s infinite linear alternate;
animation:fuwafuwa 2.5s infinite linear alternate;

}


#desc li{
clear:both;
margin:0 0 1rem;
padding:0 0 1rem;
overflow:hidden;
background:url(../img/line-flower.png) repeat-x bottom;
}

#desc li:last-child{
background:none;
}

#desc img{
margin:-5rem 2rem 5rem 0;
float:left;
}

#desc h3{
margin:5rem 0 0;
font-size:120%;
font-weight:bold;
}

#d01 h3{
color:#349c61;
}

#d02 h3{
color:#ca475c;
}

#d03 h3{
color:#4694d1;
}

/* teacher
----------------------------------------------------------------*/
#teacher-box{
margin:6rem 0;
padding:4rem 2rem 2rem;
background:#e0eeed;
text-align:left;
}

#teacher-box h3{
font-size:150%;
line-height:150%;
}

#teacher-box h3 img{
margin:-8rem 2rem 0 0;
float:left;
}

#teacher-box div{
clear:both;
padding:2.5rem;
background:#fff;
}

#teacher-box div img{
margin:-9rem -2rem 0 2rem;
float:right;
}

#teacher-box ul{
margin:0 0 1.5rem;
}

#teacher-box li{
padding:0 0 0 1.5rem;
}

#kids{
margin:-2rem 0 0;
padding:4rem 0 0;
text-align:left;
overflow:hidden;
}

#kids h3{
font-size:150%;
color:#e9546b;
}

#kids img{
margin:-4rem 0 0 0;
float:right;
}

#car-area{
margin:-4rem 0 0;
}

@-webkit-keyframes car{
0%{
right:-55%;
}
20%{
    -webkit-transform: translate3d(0, 2px, 0) rotate3d(0, 0, 1, 1deg);
    transform: translate3d(0, 2px, 0) rotate3d(0, 0, 1, 1deg);
}
21%{
    -webkit-transform: translate3d(0, -8px, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(0, -8px, 0) rotate3d(0, 0, 1, -1deg);
}
22%{
    -webkit-transform: translate3d(0, 0px, 0) rotate3d(0, 0, 1, 0deg);
    transform: translate3d(0, 0px, 0) rotate3d(0, 0, 1, 0deg);
}
50%{
    -webkit-transform:rotate3d(0, 0, 1, -2deg);
    transform:rotate3d(0, 0, 1, -2deg);
}
60%{
    -webkit-transform: translate3d(0, 4px, 0) rotate3d(0, 0, 1, -4deg);
    transform: translate3d(0, 4px, 0) rotate3d(0, 0, 1, -4deg);
}
61%{
    -webkit-transform: translate3d(0, -4px, 0) rotate3d(0, 0, 1, 4deg);
    transform: translate3d(0, -4px, 0) rotate3d(0, 0, 1, 4deg);
}
62%{
    -webkit-transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, 0deg);
    transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, 0deg);
}
100%{right:55%;
}
}

@keyframes car{
0%{right:-55%;
}
20%{
    -webkit-transform: translate3d(0, 2px, 0) rotate3d(0, 0, 1, 1deg);
    transform: translate3d(0, 2px, 0) rotate3d(0, 0, 1, 1deg);
}
21%{
    -webkit-transform: translate3d(0, -8px, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(0, -8px, 0) rotate3d(0, 0, 1, -1deg);
}
22%{
    -webkit-transform: translate3d(0, 0px, 0) rotate3d(0, 0, 1, 0deg);
    transform: translate3d(0, 0px, 0) rotate3d(0, 0, 1, 0deg);
}
50%{
    -webkit-transform:rotate3d(0, 0, 1, -2deg);
    transform:rotate3d(0, 0, 1, -2deg);
}
60%{
    -webkit-transform: translate3d(0, 4px, 0) rotate3d(0, 0, 1, -4deg);
    transform: translate3d(0, 4px, 0) rotate3d(0, 0, 1, -4deg);
}
61%{
    -webkit-transform: translate3d(0, -4px, 0) rotate3d(0, 0, 1, 4deg);
    transform: translate3d(0, -4px, 0) rotate3d(0, 0, 1, 4deg);
}
62%{
    -webkit-transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, 0deg);
    transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, 0deg);
}
100%{right:55%;
}
}

.car{
position:relative;
text-align:right;
display:inline-block;
-webkit-animation:car 20s infinite linear;
animation:car 20s infinite linear;

}

.entry{
overflow:hidden;
}

/* merit
----------------------------------------------------------------*/
#merit{
padding:4rem 0;
background:#f5ebe9;
text-align:center;
}

#merit .container{
padding:8rem 0 0;
background:url(../img/title-bg.png) no-repeat;
}

#merit h2{
margin:0 0 3rem;
}

#merit div+figure, #merit div+figure+figure{
display:none;
}

#merit p{
margin:5rem 0 0;
}


/* map
----------------------------------------------------------------*/
#map{
padding:0 0 6rem;
}

#map h2{
margin:0 0 1rem;
padding:1rem 0;
background:#EC6D7B;
color:#fff;
text-align:center;
}

/* card
----------------------------------------------------------------*/
#card{
margin:4rem auto;
padding:2rem;
width:48%;
background:rgba(255,255,255,0.7);
border:1px solid #ccc;
overflow:hidden;
}

#card h3{
font-size:120%;
}

#card h3+p{
margin:0.25rem 0;
font-size:180%;
font-weight:bold;
}

#card .img-right{
margin:0 0 0 1.5rem;
float:right;
}

/* anchor01
----------------------------------------------------------------*/
#anchor01{
margin:4rem 0 0;
}

.formtable{
margin:40px auto 0;
width:88%;
border:1px solid #ec6d7b;
border-collapse:collapse;
}

.formtable th{
padding:1.5rem 0.5rem;
color:#666666;
width:24rem;
background:#fadbda;
border-right:1px solid #ec6d7b;
border-bottom:1px solid #ec6d7b;
vertical-align:top;
}

.formtable td{
color:#4D4D4D;
background:#fff;
vertical-align:top;
border-bottom:1px solid #ec6d7b;
padding:1.5rem 0.5rem;
}

.lt-red{
color:#cf0000;
font-weight:bold;
}

td li{
margin:0 0 0.3rem 2rem;
list-style:disc;
}

input[type="text"], input[type="email"], input[type="tel"]{
padding:0.3rem;
font-size:120%;
}

select{
font-size:120%;
}

#addr{
width:95%;
}

textarea{
padding:2px;
width:95%;
height:12rem;
font-size:130%;
}

.formlink{
display: block;
border: none;
width: 365px;
padding: 30px 0;
text-align: center;
color: #FFFFFF;
font-size: 26px;
background: #ec6d7b;
margin: 60px auto 70px auto;
cursor:pointer;
}

.formlink:hover{
opacity: 0.7;
}

#return{
display: block;
margin:1.5rem 0 0;
border: none;
padding: 1rem 3rem;
text-align: center;
color: #FFFFFF;
font-size: 120%;
background: #333;
cursor:pointer;
}

footer{
margin:5rem 0 0;
padding:3rem 0;
background:#222;
font-size:110%;
text-align:center;
color:#ffffff;
}

@media screen and (min-width: 1401px){
header{
height:87vh;
}

#merit div+figure{
display:block;
position:absolute;
top:8rem;
left:-15rem;
}

#merit div+figure+figure{
display:block;
position:absolute;
top:3rem;
right:-18rem;
}

}

@media screen and (max-width: 1200px){
header{
height:65vh;
}

header h2{
margin:2rem auto 0;
width:50%;
}

.entry h2{
width:50%;
}

.move{
width:80%;
}


canvas{
height:460px;
}

#storage h2 img{
margin:4rem 0 0;
width:60%;
}


#storage figure:nth-child(3){
left:0;
}

#storage figure:nth-child(4){
right:0;
}

}

/***1100px***/
@media screen and (max-width: 1100px){
.container{
padding:0 2%;
width:100%;
}

canvas{
width:100%;
}

#kids{
padding:0 2%;
}

#merit .container{
background-size:contain;
}

}


/***1024px***/
@media screen and (max-width: 1024px){
#teacher-box div img{
margin:-9rem -1.5rem 0 2rem;
width:260px;
}

#merit h2{
margin:0 0 1.5rem;
}

#merit h2 img{
width:65%;
}

#merit figure img{
width:65%;
}

}

/*** 768px***/
@media screen and (max-width: 768px){
header{
background:url(../img/header-bg_tb.jpg) no-repeat;
background-size:contain;
height:85vh;
}

header h2{
margin:6rem 0 0 35%;
width:65%;
}

.entry .container{
padding:5rem 0 3rem;
}

.entry h2{
transform:translateY(-3rem);
width:60%;
}

.entry .move{
width:96%;
}

#storage h2 img{
position:relative;
width:70%;
z-index:3;
}

#anxiety figure:nth-child(3){
top:11rem;
right:0;
width:240px;
}

#failure figure:nth-child(3){
top:11rem;
}

#trouble li:first-child, #trouble li:nth-child(2){
left:3%;
}

#three{
width:100%;
}

#three li{
margin:-3.5rem auto 3rem;
padding:0 1rem;
}

#desc li{
margin:0;
padding:0 0 3rem;
}

#desc img{
margin:-2rem 2rem 5rem 0;
width:40%;
}

#teacher-box{
padding:2rem;
}

#teacher-box div img{
margin:-6rem -1.5rem 0 2rem;
width:200px;
}

#teacher-box li{
margin:0 0 0 1.5rem;
text-indent:-1.5rem;
}

#kids img{
margin:0;
width:40%;
}

.formtable th, .formtable td{
display:list-item;
width:100%;
list-style:none;
}

input[type="email"]{
width:90%;
}

footer{
font-size:90%;
}

}

/*** 640px***/
@media screen and (max-width: 640px){
.sp{
display:block;
}

header{
height:80vh;
}

#storage h2 img{
width:90%;
}

#anxiety figure:nth-child(3), #failure figure:nth-child(3){
width:180px;
}

#desc img{
margin:-2rem 2rem 8rem 0;
width:35%;
}

#car-area{
margin:-2rem 0 0;
}

#merit .container{
padding:4rem 0 0;
}

.formtable{
width:100%;
}

}

/*** 425px***/
@media screen and (max-width: 425px){
header{
background:url(../img/header-bg_sp.jpg) no-repeat;
background-size:contain;
height:65vh;
}

header h1 img{
width:18%;
}

header h2{
margin:6rem 0 0 30%;
width:70%;
}

.entry .container{
padding:6rem 0 3rem;
}

.entry h2{
display:block;
margin:0 auto -3rem;
width:85%;
}

.entry figure img{
width:75%;
}

.move{
margin:-1.5rem auto 3rem;
}

#storage .container{
overflow:hidden;
}

#storage figure:nth-child(3), #storage figure:nth-child(4){
width:40%;
}

canvas{
width:640px;
height:360px;
transform:translateX(-130px);
}

#anxiety h2, #failure h2{
margin:0;
}

#failure figure:nth-child(3){
right:0;
}

#trouble{
padding:2rem 0 0;
background-repeat:repeat;
background-size:contain;
}

#trouble figure{
padding:25vh 0 0;
}

#trouble figure img{
width:40%;
}

#trouble li{
width:50%;
}

#trouble li:first-child{
top:30%;
}

#trouble li:nth-child(2), #trouble li:nth-child(4){
top:45%;
}

#trouble li:nth-child(3), #trouble li:nth-child(4){
left:47%;
}

#answer h2{
margin:0 0 1rem;
}

#three{
flex-wrap:wrap;
}

#three li{
width:calc(100% / 2);
}

#desc{
margin:-4rem 0 0;
}

#desc img, #kids img{
float:none;
display:block;
margin:0 auto 0.5rem;
width:96%;
}

#desc li{
padding:0 0 5rem;
}

#desc li h3{
margin:0 0 0.4rem;
padding:0 0 0.4rem;
border-bottom:1px solid #999;
}

#teacher-box{
padding:1rem;
}

#teacher-box div{
margin:2rem 0 0;
padding:1rem;
}

#teacher-box h3{
font-size:130%;
}

#teacher-box h3 img{
display:block;
width:30%;
float:none;
}

#teacher-box div img{
display:block;
margin:-3rem auto 2rem;
float:none;
}

#kids p{
padding:0 .5rem;
}

#merit h2 img, #merit figure img{
width:96%;
}

#merit .container{
background-position:top center;
background-size:150%;
}

#map h2 img{
display:none;
}

select{
margin:0.5rem 0 0;
font-size:120%;
}

.formtable{
width:100%;
}

th, td{
display:list-item;
list-style:none;
width:100% !important;
}

input[type="text"], input[type="email"], input[type="tel"]{
font-size:140%;
}

textarea{
width:100%;
height:10rem;
}

.formtable thead th{
font-size:120%;
}

#profile table{
font-size:110%;
}

}

@media screen and (max-width: 325px){
header{
height:80vh;
}

#desc h3, #kids h3{
font-size:130%;
}

.formlink{
width:90%;
}



}