@charset "UTF-8";

body {
  		/* 方眼紙模様に必須のスタイル */
  		background-image: linear-gradient(0deg, transparent calc(100% - 1px), #f0f0f0 calc(100% - 1px)),
                  		  linear-gradient(90deg, transparent calc(100% - 1px), #f0f0f0 calc(100% - 1px));
  		background-size: 16px 16px;
 		background-repeat: repeat;
 		background-position: center center;

 		 /* 以下任意のスタイル */
  		padding: 20px;
  		
  		font-family: "Sawarabi Gothic", sans-serif;
  		font-weight: 400;
  		font-style: normal;
		}
		
header{
				display:flex; /*固定*/
				width:100%;
				height:50px;
				background-color:#ffffff;
				align-items:center;
				position:fixed;
				top:0;
				left:0;
				z-index: 1000;
				box-shadow: 0 2px 5px rgba(0,0,0,0.1);   /*影をつけて見やすくする*/
				}
				
.logo{
			width:25%;
			height:auto;
			top:20px;
			left:20px;
			margin-right:auto;
			}
			
@media screen and (max-width:650px){
.logo{
		width:150px;
		margin-left:-10px;
		margin-right:auto;
		}
}
			
a{
	font-weight:bold;
	text-decoration:none;
	color:#4169e1;
	}
	
@media screen and (max-width: 480px){
a{
		font-size:5%;
		}
}
	
	
a:hover{
		color:#ff0099;
		text-decoration:underline;
		}	
			
			
.nav{
		margin:0;
		}

@media screen and (max-width: 480px){
.nav{
		margin-left:3px;
		margin-right:3px;
		}
}

.menu-group{
			padding-left:0;
			margin:0;
			white-space: nowrap;
			}
			
.menu-item {
 			list-style: none;
			display: inline-block;
 			padding: 10px;
 			margin-right:30px;
			}

@media screen and (max-width: 480px){
.menu-item{
		padding:0 3px;
		margin-right:5px;
		}
}
			
			
body{
        margin:0;
        padding:0;
        }		
		
		
.titleimg{
            display:block;
            width:30%;
            height:auto;
            margin:90px auto;
            margin-bottom:50px;
            animation:poyoyon3 3.0s infinite;
            opacity:1;
           }	
           
@media screen and (max-width: 790px){
.titleimg{
			width:40%;
		}
}
           
@media screen and (max-width: 480px){
.titleimg{
			width:200px;
			margin-top:70px;
			margin-bottom:0;
		}
}
           
.anim-box.poyoyon3.is-animated {
  animation: poyoyon3 3.0s infinite;
  opacity: 1;
}
@keyframes poyoyon3 {
  0%, 60%, 100% {
    transform: skew(0deg, 0deg);
  }
  65% {
    transform: skew(5deg, 5deg);
  }
  70% {
    transform: skew(-4deg, -4deg);
  }
  75% {
    transform: skew(3deg, 3deg);
  }
  80% {
    transform: skew(-2deg, -2deg);
  }
  85% {
    transform: skew(1deg, 1deg);
  }
  90% {
    transform: skew(-0.6deg, -0.6deg);
  }
  95% {
    transform: skew(0.3deg, 0.3deg);
  }
}

.clickimg{ 
            position:relative; 
            width:23%; 
            height:auto; 
            top:-160px; 
            left:50px; 
            margin:0;
            transform:rotate(-5deg);
            }
            
@media screen and (max-width: 790px){
.clickimg{
			top:-130px;
			left:10px;
		}	
}
            
@media screen and (max-width: 480px) {
.clickimg{ 
			width:90px;
			top:-20px;
			left:1px;
			}
}

		
.character{
            display:flex;
            justify-content:center;
            align-items:center;
            gap:60px;
            margin:-170px auto 50px;
            flex-wrap:nowrap;
            }
            
@media screen and (max-width: 1000px){
.character{
			flex-wrap:wrap;
			justify-content:center;
			gap:60px;
			margin-top:-120px;
			}
			
.zoom-img{
			width:calc(50%-5px);
			height:auto;
			}
}
            
@media screen and (max-width: 480px) {
.character{ 
			gap:20px;
			margin:-30px auto 10px;
			max-width:360px;
			justify-content: center;
			}
}
            
.zoom-img{
            position:relative;
            width:180px;
            height:auto;
            margin:10px;
            cursor:pointer;
            transition: transform 0.4s ease, box-shadow 0.4s ease;
            }
            
@media screen and (max-width: 480px) {
.zoom-img{ 
			width:130px;
			margin:5px;
			
			}
}
            
.zoom-img:hover{
                    transform:scale(1.4);
                    /*z-index:10;
                    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);*/
                    }
                    
@media screen and (max-width: 480px) {
.zoom-img.active{ 
				transform:scale(1.2);
				z-index:auto;
				}
}
                    
.sakana{
        width:230px;
        }
        
        
.ball{
        width:140px;
        }
        
.man{
        width:250px;
        left:-20px;
        }
		
@media screen and (max-width: 480px) {
.sakana{ 
			width:140px;
		}

.ball{ 
			width:90px;
			left:20px;
		}
		
.man{ 
			width:180px;
			left:25px;
		}
}

/*modal*/

#modal-open{
			cursor:pointer;
			}
			
#modal-bg{
			position:fixed;
			top:0;
			bottom:0;
			left:0;
			right:0;
			background-color:rgba(0,0,0,0.6);
			z-index:2;
			display: none;
			}
			
#modal-container{
					position:absolute;
					top:100px;
					left:50%;
					transform:translateX(-50%);
					width: 90%;        
    				max-width: 1100px;  /* 最大幅を600pxに制限 */
    				/*min-width: 300px;   最小幅を300pxに制限 */
    				height:auto;
					background-color:#ffffff;
					padding:20px;
					z-index:3;
					display: none;
				}
				
@media screen and (max-width: 600px){
#modal-container{
					width:85%;
					top:70px;
				}
}
						
.movie{
		width:90%;
		margin:10px auto;
		display:flex;
		justify-content: center;
		}
		
.movie iframe{
				width:85%; /*動画サイズ*/
				aspect-ratio: 16 / 9;
				display:block;
				}				
				
@media screen and (max-width: 480px){
.movie{
		margin:5px auto;
}

.movie iframe{
				width:90%;
				}
}
				
.coment{
		width:90%;
		height:auto;
		display:flex;
		gap:27px;
		flex-wrap: wrap;
		justify-content: center;
		margin:40px auto 50px auto;
		}
		
@media screen and (max-width: 650px){
.coment{
		flex-wrap:wrap;
		justify-content:center;
		gap:60px;
		}
}

.coment > .kuhu,
.coment > .watch{
		width:45%;
		height:auto;
		display:flex;
		flex-direction: column;
		}
		
@media screen and (max-width: 650px){
.coment > .kuhu,
.coment > .watch{
				width:90%;
				}
}
		
.kuhu h1,
.watch h1{
			font-size:29px;
			color:orange;
			text-align:center;
			font-weight:bold;
			margin-bottom:20px;
		}
		
.kuhu p,
.watch p{
		font-size:20px;
		line-height:1.8;
		padding:5px;
		word-break: break-word;
    	overflow-wrap: break-word;
}


/*閉じるボタン*/

a.btn_02 {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  border: 1px solid #228bc8;
  box-sizing: border-box;
  width: 30%;
  min-width:180px;
  height: 50px;
  padding: 0 6% 0 8%;
  color: #228bc8;
  font-size: 16px;
  text-align: left;
  text-decoration: none;
  position: relative;
  transition-duration: 0.2s;
  margin:0 auto 50px auto;
}
a.btn_02:hover {
  background: #228bc8;
  color: #fff;
}
a.btn_02:before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 0 7px 8px;
  border-color: transparent transparent transparent #228bc8;
  position: absolute;
  top: 50%;
  left: 6%;
  margin-top: -7px;
}
a.btn_02:hover:before {
  border-color: transparent transparent transparent #fff;
}


/*3Dゲーム*/

.next{
		margin-top:10px;
	}
	
.samurai{
		width:16%;
		margin-left:-35px;
}

.ramen{
		width:20%;
		margin-left:-25px;
}

.uma{
	margin-left:-20px;
}

.kokeshi{
		width:10%;
}

@media screen and (max-width: 730px){
.aka{
	width:25%;
	}

.samurai{
			width:25%;
			margin-left:7px;
		}
		
.ramen{
		width:27%;
		margin-left:7px;
		}
		
.uma{
	width:25%;
	}
	
.kokeshi{
		width:18%;
		}
}