/*============================================
メニュー固定用
============================================*/
@media screen and (max-width:767px) {}
@media screen and (min-width:768px) {

#fixedBox{

}
.fixed {
    position: fixed;
    top: 0;
    right:0;
    background:#ed9356;
    z-index: 10000;
    margin:0 !important;
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 1s ease 0s 1 normal;
}


}


@keyframes fadeIn {
0% {
 opacity:0;}
100% {
 opacity:1;
}}

@-webkit-keyframes fadeIn {
    0% {opacity: 0.5}
    100% {opacity: 1}
}



/*============================================
泡anime
============================================*/
#back-fixed{
 width:100%;
 height:100vh;
 position:fixed;
 top:0px;
 z-index: -1;
}
#canvas-wrap {
 width:100%;
 height:100%;
 position:absolute;
}

/*============================================
anime
============================================*/
@keyframes iml{
0% {
 width:400px;
 height:400px;
 display:block;

 opacity:0;
 transform:translate(0,100px);
}
100% {
 width:400px;
 height:400px;
 display:block;

 opacity:1;
 transform:translate(0,0px);
}
}
@keyframes imr{
0% {
 width:400px;
 height:400px;
 display:block;
 position:absolute;
 top:50px;
 right:0px;
 opacity:0;
 transform:translate(0,100px);
}
100% {
 width:400px;
 height:400px;
 display:block;
 position:absolute;
 top:50px;
 right:0px;
 opacity:1;
 transform:translate(0,0px);
}
}
@keyframes doc01{
0% {
 opacity:0;
 transform:translate(0,100px);
}
100% {
 opacity:1;
 transform:translate(0,0px);
}
}
@keyframes doc02{
0% {

 opacity:0;
 transform:translate(0,100px);
}
100% {

 opacity:1;
 transform:translate(0,0px);
}
}


}







@media screen and (min-width:1201px) {
    /*　画面サイズが1200pxはここを読み込む　*/
/*============================================
フリックスライド
============================================*/
.carousel{
  background: #EEE;
}

.carousel-cell{
  width: 100%;
  height: 100vh;
}
.carousel-cell img{
 width:100%;
 height:100vh;
}
/*============================================
泡anime
============================================*/
#back-fixed{
 width:100%;
 height:100vh;
 position:fixed;
 top:0px;
 z-index: -1;
}
#canvas-wrap {
 width:100%;
 height:100%;
 position:absolute;
}
/*============================================
anime
============================================*/
@keyframes iml{
0% {
 width:540px;
 height:540px;
 display:block;
 position:absolute;
 top:50px;
 left:0px;
 opacity:0;
 transform:translate(0,100px);
}
100% {
 width:540px;
 height:540px;
 display:block;
 position:absolute;
 top:50px;
 left:0px;
 opacity:1;
 transform:translate(0,0px);
}
}
@keyframes imr{
0% {
 width:540px;
 height:540px;
 display:block;
 position:absolute;
 top:50px;
 left:660px;
 opacity:0;
 transform:translate(0,100px);
}
100% {
 width:540px;
 height:540px;
 display:block;
 position:absolute;
 top:50px;
 left:660px;
 opacity:1;
 transform:translate(0,0px);
}
}
@keyframes doc01{
0% {
 width:600px;
 height:400px;
 border-radius:20px;
 background-image:url(image/148149.png);
 position:absolute;
 top:150px;
 left:600px;
 opacity:0;
 transform:translate(0,100px);
}
100% {
 width:600px;
 height:400px;
 border-radius:20px;
 background-image:url(image/148149.png);
 position:absolute;
 top:150px;
 left:600px;
 opacity:1;
 transform:translate(0,0px);
}
}
@keyframes doc02{
0% {
 width:600px;
 height:350px;
 border-radius:20px;
 background-image:url(image/148148.png);
 position:absolute;
 top:200px;
 left:0px;
 opacity:0;
 transform:translate(0,100px);
}
100% {
 width:600px;
 height:350px;
 border-radius:20px;
 background-image:url(image/148148.png);
 position:absolute;
 top:200px;
 left:0px;
 opacity:1;
 transform:translate(0,0px);
}
}
}

@media (min-width: 768px) and (max-width: 1023px){

@keyframes iml{
0% {
 width:85%;
 height:395px;
 display:block;

 opacity:0;
 transform:translate(0,100px);
}
100% {
 width:85%;
 height:395px;
 display:block;

 opacity:1;
 transform:translate(0,0px);
}
}
@keyframes imr{
0% {
 width:85%;
 height:395px;
 display:block;
 position:initial;
 /*top:50px;
 right:0px;*/
 opacity:0;
 transform:translate(0,100px);
}
100% {
 width:85%;
 height:395px;
 display:block;
 position:initial;
 /*top:50px;
 right:0px;*/
 opacity:1;
 transform:translate(0,0px);
}
}

}