/*---------------------------------------------
	¥á¥¤¥ó¥Ó¥¸¥å¥¢¥ë
  ---------------------------------------------*/
#main-visual {
	background-color: #c5e8f9;
	background-image: url(/cnt_kids/img/index/img-cloud.png);
	background-repeat: repeat-x;
	background-size: 100%;
	animation: bgroop 300s linear infinite;
	position: relative
}
@keyframes bgroop {
 from {background-position: 0 0;}
 to {background-position: -2000px 0;}
}

.icon-visual{
	position: absolute;
	width: 15%;
}
.icon-visual a{display: block}
.icon-visual a::before {
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	content: '';
	width: 0;
	height: 0;
	background: rgba(255,255,255,.35);
	border-radius: 100%;
	transform: translate(-50%, -50%);
	opacity: 0;
}
.icon-visual a:hover::before {
	-webkit-animation: circle .75s;
	animation: circle .75s;
}
@keyframes circle {
0% {opacity: 1;}
40% {opacity: 1;}
100% {width: 200%;height: 200%;opacity: 0;}
}

.icon-visual#icon-menu-game{
	top: 20%;
    left: 16.5%;
	animation:fuwafuwa-1 3s infinite linear alternate;
}
.icon-visual#icon-menu-movei{
	top: 18.5%;
    right: 12.5%;
	animation:fuwafuwa-2 2s infinite linear alternate;
}
.icon-visual#icon-menu-about{
	bottom: 7.5%;
    right: 25%;
	animation:fuwafuwa-1 2s infinite linear alternate;
}
@keyframes fuwafuwa-1 {
0% {transform:translate(0, 0) rotate(-4deg);}
50% {transform:translate(0, -4px) rotate(0deg);}
100% {transform:translate(0, 0)rotate(4deg);}
}
@keyframes fuwafuwa-2 {
0% {transform:translate(0, 0) rotate(4deg);}
50% {transform:translate(0, 4px) rotate(0deg);}
100% {transform:translate(0, 0)rotate(-4deg);}
}

.icon-visual#icon-yon{
	width: 14%;
    bottom: -1%;
    left: 36.5%;
	z-index: 1;
	animation: bound 3s infinite;
}
#main-visual-bottom{
	background-color: #8b5423;
	padding-top: 10px;
	padding-bottom: 20px;
	position: relative;
	margin-top: 10px
}
#main-visual-bottom span{
	width: 55%;
	margin-left: auto;
	margin-right: auto;
	display: block;
	position: relative;	
	z-index: 1
}
#main-visual-bottom:before{
	content: "";
	background-image: url(/cnt_kids/img/index/main-visual-bottom-bg.png);
	background-repeat: repeat-x;
	background-position: center top;
	position: absolute;
    top: -17px;
	left: 0;
	width: 100%;
    height: 34px;
	background-size: 2.5% auto;
}
#main-visual-bottom:after{
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 25px 32.5px 0 32.5px;
	border-color: #8b5323 transparent transparent transparent;
	position: absolute;
	bottom: -15px;
    left: calc(50% - 25px);
	z-index: 1;
}
#main-visual .img-pc-wide{ display: none !important}
@keyframes bound {
  0% { transform:translateY(0) }
  5% { transform:translateY(0) }
  10% { transform:translateY(0) }
  20% { transform:translateY(-8px) }
  25% { transform:translateY(0) }
  30% { transform:translateY(-5px) }
  50% { transform:translateY(0) }
  100% { transform:translateY(0) }
}
@media screen and (min-width: 1600px) {	
#main-visual-bottom:before{top: -25px !important;}	
}
@media screen and (min-width: 1200px) {	
#main-visual-bottom:before{top: -20px;}	
#main-visual .img-pc-wide{ display: inline !important}
#main-visual .img-pc{ display: none !important}	
.icon-visual {width: 12%;}	
.icon-visual#icon-yon{
	width: 9%;
    left: 41%;
}
.icon-visual#icon-menu-game {
    top: 23%;
    left: 14%;
}
.icon-visual#icon-menu-movei {
    right: 9%;
}
.icon-visual#icon-menu-about {
    bottom: 4%;
    right: 33%;
}
}
@media screen and (max-width: 768px) {
#main-visual-bottom span {width: 80%;}
.icon-visual{width: 22%;}
.icon-visual#icon-menu-game{
	top: 20%;
    left: 6%;
}
.icon-visual#icon-menu-movei{
	top: 18%;
    right: 4.5%;
}
.icon-visual#icon-menu-about{
	bottom: 4%;
    right: 18%;
}
.icon-visual#icon-yon{
	width: 17%;
    bottom: -1.5%;
    left: 33%;
	z-index: 1;
}	
}
@media screen and (max-width: 640px) {	
#main-visual{background-size: 150%;}
#main-visual-bottom:before{
	background-size: 5% auto;
}	
.icon-visual{width: 28%;}	
.icon-visual#icon-menu-game{
	top: 16.5%;
    left: 2.5%;
}
.icon-visual#icon-menu-movei{
	top: 14%;
    right: 0.5%;
}
.icon-visual#icon-menu-about{
	bottom: 1%;
    right: 12.5%;
}	
}
@media screen and (max-width: 480px) {
#main-visual-bottom span {width: 90%;}
}


#index .container-flex#contents-mokuji {
    justify-content: center;
}
@media screen and (max-width: 640px) {
#index #list-mokuji-left{
	position: static;
	bottom: auto;
	margin-bottom: 40px
}
}
	
/* ±¾ÐÍ¥á¥Ë¥å©`¡¡*/
#menu-book{
	background-color: #7fbe26;
	padding-top: 60px;
	padding-bottom: 50px;
	position: relative;
}
#menu-book-inner{
	width: 910px;
	margin-left: auto;
	margin-right: auto;
	position: relative
}
#menu-book-inner .container-flex > div{
	width: 32%;
}
#menu-book-inner > div a{display: block}
#menu-book-inner > div a:hover{
	animation:fuwa 0.5s infinite linear alternate;
}
@keyframes fuwa {
0% {transform:rotateZ(0deg);}
50% {transform:rotateZ(3deg);}
100% {transform:rotateZ(-3deg);}	
}
.icon-visual#book-4{
	width: 13%;
    bottom: 0%;
    left: -6%;
	animation: bound-2 2s infinite;
}
.icon-visual#book-5{
	width: 10%;
    bottom: 30%;
    left: 30%;
}
.icon-visual#book-6{
	width: 9%;
    top: -8%;
    right: 36%;
}
.icon-visual#book-7{
	width: 8%;
    bottom: 20%;
    right: 23%;
}
.icon-visual#book-8{
	width: 13%;
    bottom: -27%;
    right: -5%;
	z-index: 1;
	animation: bound-3 3.5s infinite;
}
@keyframes bound-2 {
0% {transform:rotateZ(0deg);}
5% {transform:rotateZ(-2deg);}
10% {transform:rotateZ(2deg);}	
15% {transform:rotateZ(0deg);}		
100% {transform:rotateZ(0deg);}
}
@keyframes bound-3 {
  0% { transform:translateX(-5px) }
  20% { transform:translateX(5px) }
  40% { transform:translateX(-5px) }		
  100% { transform:translateX(-5px) }	
}
@media screen and (max-width: 900px) {	
#menu-book-inner{width: 85%;}
}
@media screen and (max-width: 640px) {	
#menu-book-inner .container-flex{
	display: block
}
#menu-book-inner .container-flex > div{
	width: 80%;
    margin-left: auto;
    margin-right: auto;
}
.icon-visual#book-4,
.icon-visual#book-5,
.icon-visual#book-6,
.icon-visual#book-7,
.icon-visual#book-8{
	display: none
}
}
@media screen and (max-width: 480px) {	
#menu-book {padding-top: 30px;}
#menu-book-inner .container-flex > div{width: 95%;}
}


/*---------------------------------------------
	¥Õ¥Ã¥¿©`
  ---------------------------------------------*/
#footer-custom-inner:before{
    top: -52%;
}
#footer-link{margin-top: 30px}
@media screen and (max-width: 640px) {	
#footer-custom-inner:before {top: -30%;}
}
@media screen and (max-width: 480px) {	
#footer-custom-inner:before {top: -22%;}
}