@charset "utf-8";

.js-modal-open {
	cursor: pointer;
}

.modal{
	display: none;
	width: 100%;
	height: 100vh;
	height: 100dvh;
	position: fixed;
	top: 0;
	z-index: 1000;
}

.modal_bg{
	/*background: rgba(0,0,0,0.7);*/
    background: rgb(140 140 140 / 45%);
	width: 100%;
	height: 100vh;
	height: 100dvh;
	position: absolute;
}

.modal_content{
	background: #fff;
	width: 50%;
	border-radius: 8px;
	
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}
.modal_content .inner {
	padding: 20px;
	text-align: center;
}
.js-modal-close {
	line-height: 30px;
}


/*オセロ モード選択用*/
.mode_guide .osero_mode_contents{
	background: #fff;
    width: 84%;
    min-height: 325px;
	border: 4px solid #4d4d4d;
    border-radius: 25px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.mode_guide .guide_battle_ttl{
    max-width: 250px;
    margin: -40px auto 30px auto;
}
.mode_guide .battle_select_contents{
	
}
	.mode_guide .battle_btn{
		display: block;
	    color: #fff;
	    padding: 12px 20px;
	    text-align: center;
		border-radius: 35px;
	    max-width: 95%;
	    width: 100%;
	    margin: 40px auto;
	    font-size: 24px;
	    background: #00a0e9;
	    box-shadow: 0px 5px #0071bc;
	}
		.mode_guide .battle_btn img{
		    max-width: 240px;
		}

/*オセロリザルトPOP*/
.osero_result_contents{

    width: 91%;
    min-height: 425px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 15px;
}
	.osero_result_ttl{
	    background: #ee762b;
	    padding: 20px 15px;
	    text-align: center;
	    margin: -1px;
	}
		.osero_result_ttl img{
			max-width: 160px;
		}
	.osero_result_txt{
		text-align: center;
	}
		.osero_top_img{
			text-align: center;
			margin: 30px 0px 0px;
		}
			.osero_top_img img{
				max-width: 335px;
			}
		.osero_medium_img{
			text-align: center;
		    max-width: 365px;
		    margin: auto;
		}
			.osero_medium_img img.hukidasi{
				width: 55%;
			    margin-bottom: 40px;
			}
			.osero_medium_img img.animechara{
			    width: 45%;
			    margin-left: -12%;
			}
		.osero_bottom_img{
			text-align: center;
		}
			.osero_bottom_img a{
			    display: block;
			    margin: 20px 0px 40px 0px;
			}
			.osero_bottom_img a:hover{
				opacity: 0.8;
			}
			.osero_bottom_img img{
				max-width: 345px;
			}
			
/*オセロai戦勝ち装飾*/
.osero_win .osero_result_contents{
	background: #d3edf9;
	border: 7px solid #00a0e9
}
.osero_win .osero_result_ttl{
	background: #00a0e9;
}
/*オセロai戦負け装飾*/
.osero_lose .osero_result_contents{
	background: #fce9f2;
	border: 7px solid #ef94ae
}
.osero_lose .osero_result_ttl{
	background: #ef94ae;
}
/*オセロai戦引き分け装飾*/
.osero_draw .osero_result_contents{
	background: #e8f0c5;
	border: 7px solid #009245
}
.osero_draw .osero_result_ttl{
	background: #009245;
}
/*オセロpvp戦勝ち装飾*/
.osero_win2 .osero_result_contents{
	background: #d3edf9;
	border: 7px solid #00a0e9
}
.osero_win2 .osero_result_ttl{
	background: #00a0e9;
}
/*オセロpvp戦負け装飾*/
.osero_lose2 .osero_result_contents{
	background: #fffbc4;
	border: 7px solid #f7931e
}
.osero_lose2 .osero_result_ttl{
	background: #f7931e;
}
/*オセロpvp戦引き分け装飾*/
.osero_draw2 .osero_result_contents{
	background: #e8f0c5;
	border: 7px solid #009245
}
.osero_draw2 .osero_result_ttl{
	background: #009245;
}

/****************************************************/
/*オセロリザルトPOP*/
.catch_result_contents{
    width: 91%;
    max-width: 500px;
    min-height: 425px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
	.catch_result_ttl{
	    background: #ee762b;
	    padding: 20px 15px;
	    text-align: center;
	}
		.catch_result_ttl img{
			max-width: 160px;
		}
	.catch_result_txt{
		text-align: center;
	}
		.catch_top_img{
			text-align: center;
			margin: 30px 0px;
		    /*margin: 6.5vw 0px;*/
		}
			.catch_pop_score{
			    max-width: 85%;
			    margin: 0px auto;
			    background: #e8d9d3;
			    border: 5px solid #534740;
			    padding: 10px;
			    border-radius: 15px;
			    margin-top: 50px;
			}
			.catch_pop_score p{
				font-family: "Outfit", sans-serif;
			    font-optical-sizing: auto;
			    font-weight: 700;
			    font-style: normal;
			    color: #ed8f26;
			    text-shadow: 2px 2px 1px #ffffff, -2px 2px 1px #ffffff, 2px -2px 1px #ffffff, -2px -2px 1px #ffffff, 2px 0px 1px #ffffff, 0px 2px 1px #ffffff, -2px 0px 1px #ffffff, 0px -2px 1px #ffffff;
			    font-size: 15vw;
			}
				.catch_pop_score img{
				    max-width: 150px;
				    margin-top: -45px;
				}
			.catch_pop_result_txt{
			    max-width: 90%;
			    margin: 25px auto 0px auto;
			}
				.catch_pop_result_txt p{
					display: inline;
					font-family: "M PLUS Rounded 1c", sans-serif;
					font-size: 40px;
					font-weight: 900;
					padding: 0px 10px;
					color: #db2872;
					letter-spacing: 0px;
					text-shadow: 2px 2px 2px #ffffff, -2px 2px 2px #ffffff, 2px -2px 2px #ffffff, -2px -2px 2px #ffffff, 2px 0px 2px #ffffff, 0px 2px 2px #ffffff, -2px 0px 2px #ffffff, 0px -2px 2px #ffffff;
					background-image: url(../img/catch/catch_nami.png);
					background-size: 100%;
					background-repeat: no-repeat;
					background-position: top 35px left 50%;
					padding-bottom: 40px;
				}
				.catch_pop_result_txt img{
					
				}
		.catch_medium_img{
			text-align: center;
		    display: flex;
		    flex-direction: row;
		    flex-wrap: nowrap;
		    align-content: center;
		    justify-content: center;
		}
			.catch_pop_img_txt{
			    margin-right: -33px;
			}
				.catch_pop_img_txt img{
					max-width: 200px;
				}
			.catch_pop_img_character{
				margin-top: 20px;
			}
				.catch_pop_img_character img{
				    max-width: 170px;
				}
		.catch_bottom_img{
			text-align: center;
		}
			.catch_bottom_img a{
				display: block;
			    margin: 20px 0px 40px 0px;
			}
			.catch_bottom_img button{
			    display: block;
			    margin: 20px auto 40px auto;
			}
			.catch_bottom_img a:hover{
				opacity: 0.8;
			}
			.catch_bottom_img img{
				max-width: 345px;
			}
			
/*キャッチ用装飾*/
.catch_score_pop .catch_result_contents{
	background: #d7f9f8;
}
.catch_score_pop .catch_result_ttl{
	background: #00a99d;
}

/****************************************************/

/*ルール説明*/
.game_rule_contents{
	background: #eadbd5;
    width: 91%;
    max-width: 500px;
    /*min-height: 555px;*/
    border: 4px solid #4d4d4d;
    padding: 20px 15px;
    border-radius: 25px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
	.rule_ttl{
	    margin-bottom: 15px;
	    margin-top: -40px;
	    max-width: 300px;
	    margin-left: auto;
	    margin-right: auto;
	}
	.rule_txt{
	    overflow: scroll;
		 -ms-overflow-style: none;
		scrollbar-width: none;
		
	    min-height: 200px;
	    max-height: 75vh;
	    padding: 11px 0px;
	}
	.rule_txt::-webkit-scrollbar{
		display: none;
	}
		.rule_txt img{
		    margin: 10px 0px;
		}
.game_rule_contents{
	font-family: "M PLUS Rounded 1c", sans-serif;
    font-size: 21px;
    font-weight: 800;
    font-style: normal;
    color: #4d4d4d;
    border-radius: 36px;
    padding: 21px 25px 10px 25px;
    margin: 12px 0px;
}

/*ルビ文字装飾*/
.game_rule_contents ruby[data-ruby] rt {
  display: none;
}
 
.game_rule_contents ruby[data-ruby] {
  position: relative;
  display: inline-block;
}
 
.game_rule_contents ruby[data-ruby]::after {
  content: attr(data-ruby);
  position: absolute;
  transform: translate(-50%, -1.7em);
  display: block;
  left: 50%;
  top: 0;
  white-space: nowrap;
  font-size: 44%;
  letter-spacing: 0;
}

	.game_rule_contents p{
		line-height: 32px;
	    margin-bottom: 5px;
	}
	.game_rule_contents .rubi1{
		line-height: 32px;
	}
	.game_rule_contents .rubi2{
		line-height: 35px;
	}
	.game_rule_contents .rubi3{
		line-height: 34px;
	}
@media screen and (max-width: 600px){
	/*オセロリザルトPOP*/
	.catch_result_contents{
	    min-height: 140vw;
	}
		.catch_result_ttl{
		    padding: 4vw 2vw;
		}
			.catch_result_ttl img{
				max-width: 35vw;
			}
			.catch_top_img{
			    margin: 6.5vw 0px;
			}
				.catch_pop_score{
				    border: 1.3vw solid #534740;
				    padding: 2.5vw;
				    border-radius: 3.5vw;
				    margin-top: 10vw;
				}
				.catch_pop_score p{
					font-family: "Outfit", sans-serif;
				    font-optical-sizing: auto;
				    font-weight: 700;
				    font-style: normal;
				    color: #ed8f26;
				    text-shadow: 2px 2px 1px #ffffff, -2px 2px 1px #ffffff, 2px -2px 1px #ffffff, -2px -2px 1px #ffffff, 2px 0px 1px #ffffff, 0px 2px 1px #ffffff, -2px 0px 1px #ffffff, 0px -2px 1px #ffffff;
				    font-size: 15vw;
				}
					.catch_pop_score img{
					    max-width: 31vw;
					    margin-top: -10vw;
					}
				.catch_pop_result_txt{
					margin: 5vw auto 0px auto;
				}
					.catch_pop_result_txt p{
						font-size: 7vw;
						background-position: top 6vw left 50%;
						padding-bottom: 9vw;
					}
				.catch_pop_img_txt{
				    margin-right: -5vw;
				}
					.catch_pop_img_txt img{
						max-width: 43vw;
					}
				.catch_pop_img_character{
					margin-top: 3vw;
				}
					.catch_pop_img_character img{
						max-width: 38vw;
					}
				.catch_bottom_img a{
					margin: 4vw auto 7vw auto;
				}
				.catch_bottom_img button{
					margin: 4vw auto 7vw auto;
				}
				.catch_bottom_img img{
				    max-width: 78vw;
				}

	/*ルール説明*/
		.rule_ttl{
		    margin-bottom: 3vw;
		    margin-top: -10vw;
		    max-width: 63vw;
		}
		.rule_txt{
		    max-height: 75vh;
		}
	.game_rule_contents{
		font-family: "M PLUS Rounded 1c", sans-serif;
	    font-size: 4.7vw;
	    border-radius: 9vw;
	    padding: 4vw 6vw 2vw 6vw;
	    margin: 2vw 0px;
	}
	/*ルビ文字装飾*/
		.game_rule_contents p{
		    line-height: 7.6vw;
		    margin-bottom: 1vw;
		}
		.game_rule_contents .rubi1{
		    /*line-height: 7.6vw;*/
		    line-height: 7.3vw;
		}
		.game_rule_contents .rubi2{
		    line-height: 8vw;
		}
		.game_rule_contents .rubi3{
			line-height: 7.6vw;
		}

}
@media screen and (max-width: 420px){