@charset "UTF-8";
/* TOPページCSS */
/* -----------------------------------------------*/


#main_img{
position:relative;
background:url(../images/top/p-an_mainbkillust2.jpg) no-repeat center;
background-size:contain;
	
max-width: 2000px;
margin: 0 auto;	
}


#main_img .swiper-container {
width: 70%;
height:auto;
margin:0 auto;
    }
#main_img .swiper-wrapper{
width:100%;
height:auto;
}
#main_img .swiper-slide {
text-align: center;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
 align-items: center;
}
#main_img .swiper-wrapper img{
width:100%;
height:auto;
border:5px solid #FFFFFF;
z-index:-1;
}
/**/
.swiper-container .swiper-slide .swiper-slide-content {
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: all 3s ease 0s;
}

.swiper-slide-content .title{
font-size:350%;
color:#FFFFFF;
line-height:100%;
text-shadow: 1px 2px 3px #373737; 
}
.swiper-slide-content .title img{
width:50%;
height:auto;
padding-top:50px;
}

.swiper-slide-content p a{
font-family: 'Crimson Text', serif;
font-size:150%;
padding:10px 30px;
text-decoration:none;
display:inline-block;
background:rgba(255,255,255,0.5);
border:1px solid #000000;
margin-top:50px;
 }
 





/**/

#main_img .ballon1{
z-index:1;
width:14%;
height:auto;
position:absolute;
top:200px;
left:40px;
}
#main_img .ballon2{
z-index:1;
width:13%;
height:auto;
position:absolute;
top:100px;
right:50px;
}

#main_img .ballon1 img,#main_img .ballon2 img{
width:100%;
height:auto;
}
/**/
.animation{
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 1.5s;
}
.keyframe1{
    animation-name: anim_v;
}

@keyframes anim_v {
    0% {
        transform: translate(0, 0px);
    }
    100% {
        transform: translate(0, -20px);
    }
}
.keyframe2{
    animation-name: anim_h;
}

@keyframes anim_h {
    0% {
        transform: translate(0px, 0);
    }
    100% {
        transform: translate(15px, 0);
    }
}
/**/


article #message {
background:url(../images/top/p-an_msgbk.png) no-repeat center top;
padding:50px 0 0;
background-size:contain;
}

article #message p{
width:70%; 
margin:0 auto;
}


article #box,article #bnr,article #aboutp_an{
overflow:hidden;
}
article #news,article #access{
display:inline-block;
vertical-align:top;
width:40%;
height:400px;
background:url(../images/common/p-an_bk.jpg) repeat-y center top;
background-size:contain;
padding:30px;
margin:0 10px;
}
article #news{
overflow-y: scroll;
}

article #news dl{
text-align:left;
margin-bottom:20px;
}

article #news dl dt{
font-weight:bold;
}


#bnr li{
display:inline-block;
margin:0 10px;
}

article #aboutpan{
padding:50px 0;
}

article #aboutpan dl{
width: 25%;
    display: inline-block;
    padding: 30px;
    text-align: left;
    margin: 0 10px 30px 10px;
    vertical-align: top;
    position: relative;
min-height: 150px;}

article #aboutpan dt{
font-size:160%;
text-align:center;
margin-bottom: 10px;
letter-spacing: 2px;	
}

article #aboutpan .bk01 dt{
color:#ecab10;
}
article #aboutpan .bk01{
border:1px solid #fad79b;
border-top:5px solid #fad79b;
background:url(../images/top/p-an_bk01.png) repeat-x center bottom;
background-color:#FFFFFF;
}

article #aboutpan .morelink a{
display:block;
margin:15px auto 0;
width:50%;
color:#FFFFFF!important;
padding:5px 0;
background:#ecab10;
text-decoration:none;
text-align:center;
font-weight:bold;
}article #aboutpan .bk01 .morelink a{
background:#ecab10;
}



article #aboutpan .bk02 dt{
color:#73a9c8;
}
article #aboutpan .bk02{
border:1px solid #73a9c8;
border-top:5px solid #73a9c8;
background:url(../images/top/p-an_bk02.png) repeat-x center bottom;
background-color:#FFFFFF;
}
article #aboutpan .bk02 .morelink a{
background:#73a9c8;
}

article #aboutpan .bk03 dt{
color:#6d9b6c;
}
article #aboutpan .bk03{
border:1px solid #6d9b6c;
border-top:5px solid #6d9b6c;
background:url(../images/top/p-an_bk03.png) repeat-x center bottom;
background-color:#FFFFFF;
}
article #aboutpan .bk03 .morelink a{
background:#6d9b6c;
}

article #aboutpan .bk03 dd img{
position:absolute;
top:-20px;
right:5px;

}

article #aboutpan .bk04 dt{
color:#9999cc;
}
article #aboutpan .bk04{
border:1px solid #9999cc;
border-top:5px solid #9999cc;
background:url(../images/top/p-an_bk04.png) repeat-x center bottom;
background-color:#FFFFFF;
}
article #aboutpan .bk04 .morelink a{
background:#9999cc;
}
article #aboutpan .bk04 dd img{
position:absolute;
top:-20px;
right:5px;

}

article #aboutpan .bk05 dt{
color:#935578;
}
article #aboutpan .bk05{
border:1px solid #935578;
border-top:5px solid #935578;
background:url(../images/top/p-an_bk05.png) repeat-x center bottom;
background-color:#FFFFFF;
}
article #aboutpan .bk05 .morelink a{
background:#935578;
}

article #aboutpan .bk05 dd img{
position:absolute;
top:-10px;
right:20px;

}

article #aboutpan .bk06 dt{
color:#2b397e;
}
article #aboutpan .bk06{
border:1px solid #2b397e;
border-top:5px solid #2b397e;
background:url(../images/top/p-an_bk06.png) repeat-x center bottom;
background-color:#FFFFFF;
}
article #aboutpan .bk06 .morelink a{
background:#2b397e;
}


article #aboutpan .bk07 dt{
color:#b8385a;
}
article #aboutpan .bk07{
border:1px solid #b8385a;
border-top:5px solid #b8385a;
background:url(../images/top/p-an_bk07.png) repeat-x center bottom;
background-color:#FFFFFF;
}
article #aboutpan .bk07 .morelink a{
background:#b8385a;
}


article #aboutpan .bk08 dt{
color:#dc6496;
}
article #aboutpan .bk08{
border:1px solid #dc6496;
border-top:5px solid #dc6496;
background:url(../images/top/p-an_bk08.png) repeat-x center bottom;
background-color:#FFFFFF;
}
article #aboutpan .bk08 .morelink a{
background:#dc6496;
}


article #aboutpan .bk09{
text-align:center!important;
}

article #aboutpan .bk09 dd img{
margin-top:-50px;
}



#playroom {
}
#playroom ul{
}

#playroom ul li{
display:inline-block;
margin:10px;
	width:46%;
}

#playroom ul li a img{
width:100%;
}



/*アニメーション*/

.purun {
      -webkit-animation: purun 0.8s linear 0s 1;
      animation: purun 0.8s linear 0s 1;
animation-iteration-count:infinite;
    }
    @-webkit-keyframes purun {
      0%   { -webkit-transform: scale(1.0, 1.0) translate(0%, 0%); }
      15%  { -webkit-transform: scale(0.9, 0.9) translate(0%, 5%); }
      30%  { -webkit-transform: scale(1.3, 0.8) translate(0%, 10%); }
      50%  { -webkit-transform: scale(0.8, 1.3) translate(0%, -10%); }
      70%  { -webkit-transform: scale(1.1, 0.9) translate(0%, 5%); }
      100% { -webkit-transform: scale(1.0, 1.0) translate(0%, 0%); }
    }
    @keyframes purun {
      0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
      15%  { transform: scale(0.9, 0.9) translate(0%, 5%); }
      30%  { transform: scale(1.3, 0.8) translate(0%, 10%); }
      50%  { transform: scale(0.8, 1.3) translate(0%, -10%); }
      70%  { transform: scale(1.1, 0.9) translate(0%, 5%); }
      100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
    }

.puyon {
      -webkit-animation: puyon 1.0s linear 0s 1;
      animation: puyon 1.0s linear 0s 1;
animation-iteration-count:infinite;
    }
    @-webkit-keyframes puyon {
      0%   { -webkit-transform: scale(1.0, 1.0) translate(0%, 0%); }
      40%  { -webkit-transform: scale(0.95, 1.2) translate(0%, -10%); }
      50%  { -webkit-transform: scale(1.1, 0.9) translate(0%, 5%); }
      60%  { -webkit-transform: scale(0.95, 1.05) translate(0%, -3%); }
      70%  { -webkit-transform: scale(1.05, 0.95) translate(0%, 3%); }
      80%  { -webkit-transform: scale(1.0, 1.0) translate(0%, 0%); }
      100% { -webkit-transform: scale(1.0, 1.0) translate(0%, 0%); }
    }
    @keyframes puyon {
      0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
      40%  { transform: scale(0.95, 1.2) translate(0%, -10%); }
      50%  { transform: scale(1.1, 0.9) translate(0%, 5%); }
      60%  { transform: scale(0.95, 1.05) translate(0%, -3%); }
      70%  { transform: scale(1.05, 0.95) translate(0%, 3%); }
      80%  { transform: scale(1.0, 1.0) translate(0%, 0%); }
      100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
    }


.purupuru {
margin-left:-10px;
padding-top:20px;
-webkit-animation: purupuru 0.8s linear 0s 1;
animation: purupuru 0.8s linear 0s 1;
animation-iteration-count:infinite;
}
    @-webkit-keyframes purupuru {
      0%   { -webkit-transform: scale(1.0, 1.0) translate(0%, 0%); }
      20%  { -webkit-transform: scale(1.0, 1.06) translate(-5%, -4%) skew(6deg, 0deg); }
      50%  { -webkit-transform: scale(1.0, 0.94) translate(5%, 4%) skew(-6deg, 0deg); }
      65%  { -webkit-transform: scale(1.0, 1.03) translate(2%, -2%) skew(-3deg, 0deg); }
      80%  { -webkit-transform: scale(1.0, 0.97) translate(-2%, 2%) skew(3deg, 0deg); }
      100% { -webkit-transform: scale(1.0, 1.0) translate(0%, 0%); }
    }
    @keyframes purupuru {
      0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
      20%  { transform: scale(1.0, 1.06) translate(-5%, -4%) skew(6deg, 0deg); }
      50%  { transform: scale(1.0, 0.94) translate(5%, 4%) skew(-6deg, 0deg); }
      65%  { transform: scale(1.0, 1.03) translate(2%, -2%) skew(-3deg, 0deg); }
      80%  { transform: scale(1.0, 0.97) translate(-2%, 2%) skew(3deg, 0deg); }
      100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
    }

.korokoro {
      -webkit-animation: korokoro 2.5s linear 0s 1;
      animation: korokoro 2.5s linear 0s 1;
	  animation-iteration-count:infinite;
    }
    @-webkit-keyframes korokoro {
      0%   { -webkit-transform: translate(0%, 0%); }
      5%   { -webkit-transform: translate(10%, 0%) rotate(10deg); }
      25%  { -webkit-transform: translate(20%, 0%) rotate(20deg); }
      30%  { -webkit-transform: translate(-10%, 0%) rotate(-10deg); }
      35%  { -webkit-transform: translate(-15%, 0%) rotate(-15deg); }
      45%  { -webkit-transform: translate(10%, 0%) rotate(10deg); }
      50%  { -webkit-transform: translate(15%, 0%) rotate(15deg); }
      60%  { -webkit-transform: translate(-5%, 0%) rotate(-5deg); }
      65%  { -webkit-transform: translate(-7%, 0%) rotate(-7deg); }
      75%  { -webkit-transform: translate(0%, 0%) rotate(0deg); }
      100% { -webkit-transform: translate(0%, 0%) rotate(0deg); }
    }
    @keyframes korokoro {
      0%   { transform: translate(0%, 0%); }
      5%   { transform: translate(10%, 0%) rotate(10deg); }
      25%  { transform: translate(20%, 0%) rotate(20deg); }
      30%  { transform: translate(-10%, 0%) rotate(-10deg); }
      35%  { transform: translate(-15%, 0%) rotate(-15deg); }
      45%  { transform: translate(10%, 0%) rotate(10deg); }
      50%  { transform: translate(15%, 0%) rotate(15deg); }
      60%  { transform: translate(-5%, 0%) rotate(-5deg); }
      65%  { transform: translate(-7%, 0%) rotate(-7deg); }
      75%  { transform: translate(0%, 0%) rotate(0deg); }
      100% { transform: translate(0%, 0%) rotate(0deg); }
    }





/*スマホ*/
@media screen and (max-width: 768px) {



#main_img{
background:url(../images/top/p-an_mainbkillust2.jpg) no-repeat center;
background-size:contain;
}
#main_img .swiper-container {
width: 100%;
height:auto;
margin:0 auto;
    }
#main_img .swiper-wrapper{
width:100%;
height:auto;
}
#main_img .swiper-wrapper img{
border:none;
}


#main_img .ballon1{
width:20%;
height:auto;
position:absolute;
top:50px;
left:0;
}
#main_img .ballon2{
width:18%;
height:auto;
position:absolute;
top:20px;
right:0;
}

#main_img .ballon1 img,#main_img .ballon2 img{
width:100%;
height:auto;
border:none!important;
}
/**/




article #message {
background:none;
padding:0;}
	
article #message h2 {margin-top:20px; }
article #message .swing {display:none;}

article #box,article #bnr,article #aboutp_an{
margin-top:50px;
overflow:hidden;
}

article #news,article #access{
width:80%;
height:auto;
padding:20px;
margin:0 auto 20px;
}

article #bnr li{
width:90%;
display:inline-block;
margin:0 auto 10px;
}
article #bnr li img{
width:100%;
height:auto;
}


article #aboutpan dl{
width:80%;
min-height:auto;
}


article #aboutpan .morelink a{
display:block;
margin:15px auto 0;
width:50%;
color:#FFFFFF!important;
padding:5px 0;
background:#ecab10;
text-decoration:none;
text-align:center;
font-weight:bold;
}article #aboutpan .bk01 .morelink a{
background:#ecab10;
}




article #aboutpan .bk03 .morelink a{
background:#6d9b6c;
}

article #aboutpan .bk03 dd img{
position:absolute;
top:-20px;
right:0px;

}

article #aboutpan .bk04 dd img{
position:absolute;
top:-20px;
right:0px;

}


article #aboutpan .bk05 dd img{
position:absolute;
top:-10px;
right:10px;

}



article #aboutpan .bk08 dd img{
margin-top:-50px;
}


	
#playroom ul li{
width:90%;}

}