/*----------------------------------------

エントランス

----------------------------------------*/	

.entrance {
  background: #d1e7f9;
  height: 100vh;
	display: flex;
  justify-content: center;
  align-items: center;
	position: relative;
	z-index: 0;
}
.entrance::before,
.entrance::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 100px; /* グラデーションの高さを調整 */
  pointer-events: none; /* クリックを邪魔しない */
	z-index: 0;
}

.entrance::before {
  top: 0;
	height: 100%; /* 全体に広げて%指定 */
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.8) 0%,   /* 上端は黒 */
    rgba(0,0,0,0.5) 5%,  /* 15%地点は薄めの黒 */
    rgba(0,0,0,0) 20%     /* 30%で完全透明 */
  );
}

/* 下部のグラデーション */
.entrance::after {
  bottom: 0;
	height: 100%;
  background: linear-gradient(
    to top,
    rgba(0,0,0,1) 25%,   /* 下端は黒 */
    rgba(0,0,0,0.5) 35%,  /* 少し薄く */
    rgba(0,0,0,0) 45%     /* 上に行くほど透明 */
  );
}

.bg-container {
  position: relative;
  width: 100%;
  max-width: 900px; /* 任意で最大幅を設定 */
  margin: 0 auto;
	margin-top: 100px;

}

.bg-image {
  width: 100%;
  height: auto;
  display: block;
}

.item {
  position: absolute;
  transform: translate(-50%, -50%); /* 中心基準に配置したい場合 */
 width: 100%;
	 animation: fadeIn 1.5s ease forwards; /* フェードインアニメ */
  animation-delay: 0.3s; /* 遅延スタート */
}

.item img {
  width: 8%; /* アイコンのサイズを%で指定するとレスポンシブになる */
  height: auto;
}

/* 位置調整（%で指定すると背景に比例して動く） */
.item1 {
  top: 34%;
  left: 54%;
}
.item2 {
 top: 49%;
  left: 58%;
}
.item3 {
  top: 46%;
  left: 68%;
}
.item4 {
  top: 49%;
  left:82%;
}
.item5 {
  top: 35%;
  left:120%;
}
.item6 {
  top: 75%;
  left:138%;
}


/*----------------------------------------

エントランス ステージ選択

----------------------------------------*/	


.SelectArea {
    margin-top: auto;
	display: block;
	margin-bottom: 20px;
	position: relative;
	z-index: 1;
}

.selecttitle {
	text-align: center;
	color:#fff;
	 font-size: clamp(2.2rem, 2.5vw, 2.5rem);
	margin-bottom: 15px;
	
}
.SelectButon {
	display: flex;
	justify-content: center;
	margin-bottom: 15px;
}
.SelectButon a.backbutton {
	width: 40%;
	padding: 10px;
	background-image: linear-gradient(90deg, #c4c4c3, #c4c4c3 50%, #c4c4c3);  
	  border: 2px solid #717171;
	 display: block;
    text-decoration: none;
    color: #222;
    font-weight: 600;
	  font-size: clamp(1.8rem, 2.2vw, 2.2rem);
	text-align: center;
	margin: 0 5px;
}
.SelectButon a.guidebutton {
	width: 40%;
	padding: 10px;
	background-image: linear-gradient(90deg, #38220f, #4f341e 50%, #38220f);
	      
	  border: 2px solid #a87329;
	 display: block;
    text-decoration: none;
    color: #fff;
    font-weight: 600;
	  font-size: clamp(1.8rem, 2.2vw, 2.2rem);
	text-align: center;
	margin: 0 5px;
}

.WorldSelect {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	width: 95%;
	margin: auto;
}
.WorldSelect li {
	width: 16%;
}

.ConfirmMessage  {
	text-align: center;
	font-size: clamp(1.6rem, 2vw, 2rem);
}

.ConfirmMessage span  {
	display: block;
	text-align: center;
	font-size: clamp(2.4rem, 3.2vw, 3.2rem);
	line-height: 1.5;
}

@media screen and (max-width: 767px) {
	
.entrance {
  background: #d1e7f9;
  height: 100vh;
	display: flex;
  justify-content: center;
  align-items: center;
	position: relative;
	z-index: 0;
}
.entrance::before,
.entrance::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 100px; /* グラデーションの高さを調整 */
  pointer-events: none; /* クリックを邪魔しない */
	z-index: 0;
}

.entrance::before {
  top: 0;
	height: 100%; /* 全体に広げて%指定 */
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.8) 0%,   /* 上端は黒 */
    rgba(0,0,0,0.5) 5%,  /* 15%地点は薄めの黒 */
    rgba(0,0,0,0) 20%     /* 30%で完全透明 */
  );
}

/* 下部のグラデーション */
.entrance::after {
  bottom: 0;
	height: 100%;
  background: linear-gradient(
    to top,
    rgba(0,0,0,1) 38%,   /* 下端は黒 */
    rgba(0,0,0,0.5) 45%,  /* 少し薄く */
    rgba(0,0,0,0) 55%     /* 上に行くほど透明 */
  );
}
	
.SelectArea {
    margin-top: auto;
	display: block;
	margin-bottom: 20px;
	position: relative;
	z-index: 1;
}

.selecttitle {
	text-align: center;
	color:#fff;
	 font-size: clamp(1.8rem, 2.5vw, 2.5rem);
	margin-bottom: 10px;
	
}
.SelectButon {
	display: flex;
	justify-content: center;
	width: 95%;
	margin: auto;
	margin-bottom: 10px;
}
.SelectButon a.backbutton {
	width: 40%;
	padding: 10px;
	background-image: linear-gradient(90deg, #c4c4c3, #c4c4c3 50%, #c4c4c3);  
	  border: 2px solid #717171;
	 display: block;
    text-decoration: none;
    color: #222;
    font-weight: 600;
	  font-size: clamp(1.5rem, 2.2vw, 2.2rem);
	text-align: center;
	margin: 0 5px;
	line-height: 1.5;
}
.SelectButon a.guidebutton {
	width: 40%;
	padding: 10px;
	background-image: linear-gradient(90deg, #38220f, #4f341e 50%, #38220f);
	      
	  border: 2px solid #a87329;
	 display: block;
    text-decoration: none;
    color: #fff;
    font-weight: 600;
	 font-size: clamp(1.5rem, 2.2vw, 2.2rem);
	text-align: center;
	margin: 0 5px;
	line-height: 1.5;
}

.WorldSelect {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	width: 95%;
	margin: auto;
}
.WorldSelect li {
	width: 32.8%;
	margin-bottom: 3px;
}

.ConfirmMessage  {
	text-align: center;
	font-size: clamp(1.6rem, 2vw, 2rem);
	margin-top: 12px;
}

.ConfirmMessage span  {
	display: block;
	text-align: center;
	font-size: clamp(2.4rem, 3.2vw, 3.2rem);
	line-height: 1.5;
}
	
}













/*----------------------------------------

マカオ ゲームTOP

----------------------------------------*/	

.macau {
  background: url(../images/bg/macau_bg.jpg) no-repeat center center/cover;
  height: 100vh;
	display: flex;
  justify-content: center;
  align-items: center;
	position: relative;
}


.game_top {
	position: relative;
	z-index: 1;
	width: 50%;
}

.game_contents {
	width: 50%;
	margin: auto;
}

.MainMenu {
	position: relative;
	z-index: 1;
	margin: auto;
}
.MainMenu li {
	line-height: 1;
}
.MainMenu li a {
	padding:25px;
	box-sizing: border-box;
}

.ButtonBrw {
    margin: 5px 0;
	  background-image: linear-gradient(90deg, #38220f, #4f341e 50%, #38220f);
	  border: 3px solid #a87329;
  }
a.ButtonBrw {
	  display: block;
    text-decoration: none;
    color: #fff;
    font-weight: 600;
	  font-size: clamp(2rem, 2.4vw, 2.4rem);
	text-align: center;
}
.ButtonWht {
    margin: 5px 0;
	  padding: 10px;
	  background-image: linear-gradient(90deg, #fff, #fff 50%, #fff);
	  border: 3px solid #38220f;
	box-shadow: inset 0 0 2px 2px #b99767;
  }
a.ButtonWht {
	  display: block;
    text-decoration: none;
    font-weight: 600;
	  font-size: clamp(2rem, 2.4vw, 2.4rem);
	text-align: center;
}
.ButtonWht span {
	  display: inline-block;
	font-size: clamp(1rem, 1.4vw, 1.4rem);

}

.BackStage {
	background:rgba(40,40,40,0.9);
	border: 1px solid #808080;
	padding: 10px;
	box-sizing: border-box;
	 width: 90%;
	display: block;
	margin: 7px auto;
	text-align: center;
	box-shadow: inset 0 0 7px rgba(0,0,0,0.4);
	font-size: clamp(1.6rem, 2vw, 2rem);
	color:#fff;
	position: relative;
}


@media screen and (max-width: 767px) {
	
	
.macau {
  background: url(../images/bg/macau_bg.jpg) no-repeat center center/cover;
  height: 100vh;
	display: flex;
  justify-content: center;
  align-items: center;
	position: relative;
}


.game_top {
	position: relative;
	z-index: 1;
	width: 85%;
}

.game_contents {
	width: 80%;
	margin: auto;
}
.MainMenu {
	position: relative;
	z-index: 1;
	width: auto;
	margin: auto;
}
.MainMenu li {
	line-height: 1;
}
.MainMenu li a {
	padding:20px;
	box-sizing: border-box;
}

.ButtonBrw {
    margin: 5px 0;
	  background-image: linear-gradient(90deg, #38220f, #4f341e 50%, #38220f);
	  border: 3px solid #a87329;
	box-shadow: inset 0 0 2px 2px #261c10;
  }
a.ButtonBrw {
	  display: block;
    text-decoration: none;
    color: #fff;
    font-weight: 600;
	  font-size: clamp(2rem, 2.4vw, 2.4rem);
	text-align: center;
}
.ButtonWht {
    margin: 5px 0;
	  padding: 10px;
	  background-image: linear-gradient(90deg, #fff, #fff 50%, #fff);
	  border: 3px solid #38220f;
	box-shadow: inset 0 0 2px 2px #b99767;
  }
a.ButtonWht {
	  display: block;
    text-decoration: none;
    font-weight: 600;
	  font-size: clamp(2rem, 2.4vw, 2.4rem);
	text-align: center;
}
.ButtonWht span {
	  display: inline-block;
	font-size: clamp(1rem, 1.4vw, 1.4rem);

}

.BackStage {
	background:rgba(40,40,40,0.9);
	border: 1px solid #808080;
	padding: 10px;
	box-sizing: border-box;
	 width: 90%;
	display: block;
	margin: 7px auto;
	text-align: center;
	box-shadow: inset 0 0 7px rgba(0,0,0,0.4);
	font-size: clamp(1.6rem, 2vw, 2rem);
	color:#fff;
	position: relative;
}
	
	
	
}


/*----------------------------------------

オープニング

----------------------------------------*/	
.game_opening {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
	width: 100%;
	box-sizing: border-box;
	position: relative;
}

.MessageArea {
    margin-top: auto;
	display: block;
	margin-bottom: 20px;
	position: relative;
	z-index: 2;
}

.charaIMG {
position: absolute;
	display: flex;
	justify-content: center;
  width: 67%;
  right: 0;
  left: 0;
  margin: 0 auto;
  opacity: 0;
  animation: fade-In 0s ease forwards;
  animation-delay: 0s;
	z-index: 1;
}
.charaIMG img {
  display: block;
  max-height: 100vh;   /* ビューポートの高さを超えない */
  width: auto;         /* アスペクト比を維持 */
  height: auto;
  margin: 0 auto;
  object-fit: contain; /* 収まりを優先 */
  opacity: 0;          /* 最初は透明 */
  animation: fadeIn 1.5s ease forwards; /* フェードインアニメ */
  animation-delay: 0.2s; /* 遅延スタート */
}

/* フェードインのキーアニメーション */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.bg {
background-image: linear-gradient(90deg, #2e2e2e, #8a8473 50%, #2e2e2e);
padding: 5px 0;
	width: 100%;
	position: relative;
}
.bg .inner {
border-top: 2px solid;
border-bottom: 2px solid;
  border-image: linear-gradient(to right, #363229, #b8aa7b, #363229) 1;
  background: #1d1d1f;
  box-shadow: inset 0 0 7px rgba(0,0,0,0.4);
	padding: 50px;
	box-sizing: border-box;
	min-height: 250px;

}

.name {
	background: #541d19;
	font-size: clamp(1.8rem, 2.4vw, 2.4rem);
	position: absolute;
	padding: 5px 20px;
	width: 25%;
	color:#deb446;
	box-sizing: border-box;
	top:-20px;
		clip-path: polygon(0 1%, 100% 0, 85% 100%, 0% 100%);
	filter: drop-shadow(3px 3px 0px #fff);

}

.dialogue-box {
	
}
.dialogue-box p {
	color:#ebe1d3;
	font-size: clamp(1.6rem, 2vw, 2rem);
}
.MesNext {
	position: absolute;
	bottom:30px;
	right: 30px;
	margin: 0 0 0 auto;
	width: 4%;
}




@media screen and (max-width: 767px) {
	
.game_opening {

}
	


.MessageArea {
    margin-top: auto;
	display: block;
	margin-bottom: 20px;
	position: relative;
}
	
.charaIMG img {
  display: block;
  max-height: 90vh;   /* ビューポートの高さを超えない */
  width: auto;         /* アスペクト比を維持 */
  height: auto;
  margin: 0 auto;
  object-fit: contain; /* 収まりを優先 */
  opacity: 0;          /* 最初は透明 */
  animation: fadeIn 1.5s ease forwards; /* フェードインアニメ */
  animation-delay: 0.2s; /* 遅延スタート */
}

.bg {
background-image: linear-gradient(90deg, #2e2e2e, #8a8473 50%, #2e2e2e);
padding: 5px 0;
	width: 100%;
	position: relative;
}
.bg .inner {
border-top: 2px solid;
border-bottom: 2px solid;
  border-image: linear-gradient(to right, #363229, #b8aa7b, #363229) 1;
  background: #1d1d1f;
  box-shadow: inset 0 0 7px rgba(0,0,0,0.4);
	padding: 30px 20px;
	box-sizing: border-box;
	height: auto;
	min-height: auto;
}

.name {
	background: #541d19;
	font-size: clamp(1.8rem, 2.4vw, 2.4rem);
	position: absolute;
	padding: 5px 20px;
	width: 40%;
	color:#deb446;
	box-sizing: border-box;
	top:-20px;
		clip-path: polygon(0 1%, 100% 0, 85% 100%, 0% 100%);
	filter: drop-shadow(3px 3px 0px #fff);

}

.dialogue-box {
	
}
.dialogue-box p {
	color:#ebe1d3;
	font-size: clamp(1.6rem, 2vw, 2rem);
}
.MesNext {
	position: absolute;
	bottom:18px;
	right: 20px;
	margin: 0 0 0 auto;
	width: 6%;
}

.dice {
  font-size: 100px;
  display: inline-block;
  animation: roll 0.5s infinite linear;
}
	
}


/*----------------------------------------

ルール説明

----------------------------------------*/	

.rule {
  background: #111;
  height: 100vh;
	display: flex;
  justify-content: center;
  align-items: center;
	position: relative;
}

.game_rule {
  min-height: 100vh;
	width: 100%;
	
	box-sizing: border-box;
	position: relative;
}

.Titlebg {
background-image: linear-gradient(90deg, #2e2e2e, #8a8473 50%, #2e2e2e);
padding: 5px 0;
	width: 100%;
	position: relative;
	margin-top:100px;
}
.Titlebg .inner {
border-top: 2px solid;
border-bottom: 2px solid;
  border-image: linear-gradient(to right, #363229, #b8aa7b, #363229) 1;
  background: #1d1d1f;
  box-shadow: inset 0 0 7px rgba(0,0,0,0.4);
	padding: 20px;
	box-sizing: border-box;

}
.Titlebg h2 {
	text-align: center;
	color:#ebe1d3;
	font-weight: 500;
	padding: 0;
	margin: 0;
	line-height: 1.5;
	font-size: clamp(2.4rem, 3.6vw, 3.6rem);
}

.rule .box {
	width: 80%;
	margin: auto;
	padding: 60px 0;
}
.rule .box p {
	color:#ebe1d3;
	margin-bottom: 2rem;
	font-size: clamp(1.6rem, 2.2vw, 2.2rem);
}
.rule .box ul  {
	margin-left: 2rem;
	margin-bottom: 2rem;
}
.rule .box ul li {
	list-style-type: disc;
	color:#ebe1d3;
	font-size: clamp(1.6rem, 2.2vw, 2.2rem);
}

.RuleNext {
	margin: 40px 0 40px auto;
	width: 5%;
}
.rule .box figure {
	width: 80%;
	margin: auto;
}

.gamerule_end .MainMenu {
width: 50% !important;
	margin: 100px auto;
}

@media screen and (max-width: 767px) {
	
.rule {

}

.game_rule {
  min-height: 100vh;
	width: 100%;
	box-sizing: border-box;
	position: relative;
}

.Titlebg {
background-image: linear-gradient(90deg, #2e2e2e, #8a8473 50%, #2e2e2e);
padding: 3px 0;
	width: 100%;
	position: relative;
	margin-top:75px;
}
.Titlebg .inner {
border-top: 2px solid;
border-bottom: 2px solid;
  border-image: linear-gradient(to right, #363229, #b8aa7b, #363229) 1;
  background: #1d1d1f;
  box-shadow: inset 0 0 7px rgba(0,0,0,0.4);
	padding: 10px;
	box-sizing: border-box;

}
.Titlebg h2 {
	text-align: center;
	color:#ebe1d3;
	font-weight: 500;
	padding: 0;
	margin: 0;
	line-height: 1.5;
	font-size: clamp(2.4rem, 3.6vw, 3.6rem);
}

.rule .box {
	width: 80%;
	margin: auto;
	padding: 30px 0;
}
.rule .box p {
	color:#ebe1d3;
	margin-bottom: 2rem;
	font-size: clamp(1.6rem, 2.2vw, 2.2rem);
}
.rule .box ul  {
	margin-left: 2rem;
	margin-bottom: 2rem;
}
.rule .box ul li {
	list-style-type: disc;
	color:#ebe1d3;
	font-size: clamp(1.6rem, 2.2vw, 2.2rem);
}

.RuleNext {
	margin: 20px 0 20px auto;
	width: 8%;
}
.rule .box figure {
	width: 90%;
	margin: auto;
}

.gamerule_end .MainMenu {
width:80% !important;
	margin: 50px auto;
}
	
}



/*----------------------------------------

チンチロゲームTOP

----------------------------------------*/	

.MacauGame {
  background: url(../images/stage/macau/bg.jpg) no-repeat center center/cover;
  height: 100vh;
	display: flex;
  justify-content: center;
  align-items: center;
	position: relative;
}


.GameStart {
  background: #111;
  height: 100vh;
	display: flex;
  justify-content: center;
  align-items: center;
	position: relative;
}


.dialogue-set {
  display: none; /* 最初は非表示 */
}

.game_start {
	width: 100%;
	
}

.image-container {
  height: 85vh;
  overflow: hidden;
  position: relative;
}

.image-container img {
	width: 100%;


}

.zoomIMG {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(5); /* 初期は少し拡大 */
  transition: transform 0.2s ease-out;
}

/* JSでクラス追加でズームアウト */
.zoomIMG.zoomed {
  transform: scale(1);   /* 元のサイズに戻る */
}

@media screen and (max-width: 767px) {
	
.GameStart {
  background: #111;
  height: 100vh;
	display: flex;
  justify-content: center;
  align-items: center;
	position: relative;
}


.dialogue-set {
  display: none; /* 最初は非表示 */
}

.game_start {
	width: 100%;
	
}

.image-container {
  height: 75vh;
  overflow: hidden;
  position: relative;
}

.image-container img {
	width: 100%;
}

.zoomIMG {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(5); /* 初期は少し拡大 */
  transition: transform 0.2s ease-out;
}

/* JSでクラス追加でズームアウト */
.zoomIMG.zoomed {
  transform: scale(1);   /* 元のサイズに戻る */
}
	
}

/*----------------------------------------

チンチロTOP

----------------------------------------*/	

.chinchiro {
  background:url("../images/stage/macau/chinchirobg_bg.jpg");
  height: 100vh;
	display: flex;
  justify-content: center;
  align-items: center;
	position: relative;
}
.chinchiro_contents {
	width: 100%;
  min-height: 100vh;            /* 画面全体の高さ */
  display: flex;
  flex-direction: column;
}

.chinchiro .titleBOX {
	position: absolute;
	  right: 0;
  left: 0;
  margin: 0 auto;
	top:20px;
  z-index:20;
}

.chinchiro h2 {
	background-image: linear-gradient(90deg, #171717, #292929 50%, #171717);
	  border: 5px solid #4b3118;
	 color: #fff;
    font-weight: 600;
	  font-size: clamp(2.4rem, 2.4vw, 3.6rem);
	text-align: center;
	width: 90%;
	margin: auto;
	padding: 10px;
	box-sizing: border-box;
}
.chinchiro h3 {
	 color: #fff;
    font-weight: 600;
	  font-size: clamp(3rem, 5vw, 5rem);
	text-align: center;
	width: 90%;
	margin: auto;
	box-sizing: border-box;
	margin-top: 20px;
}


.gamefooter  {
	margin-top: auto;
	padding-bottom: 5%;
}

.gamefooter .mes {
	text-align: center;
	font-size: clamp(1.6rem, 2.2vw, 2.4rem);
	color:#fff;
	margin-bottom: 20px;
}

.gamefooter .ScoreBOX {
	margin-top: 0;
	position: relative;
	margin-bottom: 40px;
	margin-top: -20px;
  
}
.gamefooter .coinIMG {
	position: relative;
	width: 100px;
	padding: 0;
	margin: 0;
	top:22px;
	left: 20px;
	display: inline-block;
}

.gamefooter .Score {
	background-image: linear-gradient(90deg, #530201, #7d0d0b 50%, #530201);
	border: 3px solid #611a19;
	text-align: center;
	color:#fff;
	font-size: clamp(3rem, 4vw, 4rem);
	padding: 8px 35px 8px 35px;
	box-sizing: border-box;
	line-height: 1.3;
	position: relative;
	font-family: "Noto Serif JP", serif;
	font-weight: 600;
	 z-index: 1;
	display: inline-block;
	margin-right: 30px;
}

.betBOX {
	display: flex;
	justify-content: center;
	margin: 10%;
	margin: auto;
	box-sizing: border-box;
}
.betBOX li {
	width: 30%;
	margin: 0 0%;
	background: url("../images/stage/macau/medal.png") no-repeat center/contain;
	/* 高さを画像比率で決定（例: 画像の縦横比 1:1 の場合 100%） */
	padding-top: 0; 
	position: relative;
	font-size: clamp(3rem, 4vw, 4.5rem);
	color:#fff;
	text-shadow: 2px 2px 0px rgba(53, 35, 10, 0.5);
	text-align: center;
}
.betBOX li a {
	display: block;
	color:#fff;
	padding: 25%;
	box-sizing: border-box;

}


@media screen and (max-width: 767px) {
	
.chinchiro h3 {
	
	margin-top: 10px;
}

.gamefooter  {
	margin-top: auto;
	padding-bottom: 15%;
}

.gamefooter .mes {
	text-align: center;
	font-size: clamp(1.6rem, 2.2vw, 2.4rem);
	color:#fff;
	margin-bottom: 10px;
}

.gamefooter .ScoreBOX {
	margin-top: 0;
	position: relative;
	margin-bottom: 30px;
	margin-top: -20px;
  
}
.gamefooter .coinIMG {
	position: relative;
	width: 70px;
	padding: 0;
	margin: 0;
	top:19px;
	left: 20px;
	display: inline-block;
}
.gamefooter .Score {
	background-image: linear-gradient(90deg, #530201, #7d0d0b 50%, #530201);
	border: 3px solid #611a19;
	text-align: center;
	color:#fff;
	font-size: clamp(2.4rem, 4vw, 4rem);
	padding: 8px 25px 8px 25px;
	box-sizing: border-box;
	line-height: 1.3;
	position: relative;
	font-family: "Noto Serif JP", serif;
	font-weight: 600;
	 z-index: 1;
	display: inline-block;
	margin-right: 30px;
}



.betBOX {
	display: flex;
	justify-content: center;
	margin: 10%;
	margin: auto;
	box-sizing: border-box;
}
.betBOX li {
	width: 30%;
	margin: 0 0%;
	background: url("../images/stage/macau/medal.png") no-repeat center/contain;
	/* 高さを画像比率で決定（例: 画像の縦横比 1:1 の場合 100%） */
	padding-top: 0; 
	position: relative;
	font-size: clamp(2.8rem, 4.5vw, 4.5rem);
	color:#fff;
	text-shadow: 2px 2px 0px rgba(53, 35, 10, 0.5);
}
.betBOX li a {
	display: block;
	color:#fff;
	padding: 20%;
	box-sizing: border-box;

}
	
}

@media screen and (max-width: 375px) {
	
.gamefooter  {
	margin-top: auto;
	padding-bottom: 5%;
}

}


.banmenBOX {
	margin-top: 0%;
	position: relative;
}


.banmen {
	width: 80%;
  aspect-ratio: 16 / 9; /* ← 比率を指定（例: 横16:縦9） */
  margin: 0 auto;
  background: url("../images/stage/macau/banmen.png") no-repeat center / contain;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
	margin-bottom: 3%;
}

.gamefooter .info {
	width: 60%;
	margin: auto;
}
.gamefooter .info a.ButtonWht {
	padding: 20px;
	box-sizing: border-box;
	
}
.BetDeta {
	margin-top: 20px;
	font-size: clamp(1.8rem, 2.4vw, 2.4rem);
	color:#fff;
}
.BetDeta span {
	font-size: clamp(2.4rem, 3.6vw, 3.6rem);
	margin-left: 20px;
}

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

.banmenBOX {
	margin-top: 0%;
}


.banmen {
	width: 100%;
  aspect-ratio: 11 / 9; /* ← 比率を指定（例: 横16:縦9） */
  margin: 0 auto;
  background: url("../images/stage/macau/banmen.png") no-repeat center / contain;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
	margin-bottom: 10%;
}
.gamefooter .info {
	width: 80%;
	margin: auto;
}
.gamefooter .info a.ButtonWht {
	padding: 15px;
	box-sizing: border-box;
	
}
.BetDeta {
	margin-top: 10px;
	font-size: clamp(1.8rem, 2.4vw, 2.4rem);
	color:#fff;
}
.BetDeta span {
	font-size: clamp(2.4rem, 3.6vw, 3.6rem);
	margin-left: 20px;
}
	
}


@media screen and (max-width: 375px) {
	.banmen {
	margin-bottom: 5%;
}
}


.diceBOX {
	width: 50%;
	position: relative;   /* ← 基準になる */
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
.diceBOX li {
	width: 30%;
	margin: 0 1%;
}

.dice {
  display: inline-block;
  animation: roll 0.8s infinite linear; /* 回転スピード */
}

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



.diceBOX {
	width: 70%;
	position: relative;   /* ← 基準になる */
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
	
}
.diceBOX li {
	width: 32%;
	margin: 0 0%;
}
	
.dice {
width: 100%;
  height: 100%;
  display: block;
	object-fit: cover;
 animation: rollY 0.2s infinite linear;
		margin-top: -100px;
}
}







.resultBOX {
	margin: auto;
display: flex;
	flex-direction: column;
  justify-content: center; /* 横方向中央 */
  height: 100vh;      
}

.resultBOX li {
color: #fff; 
	font-size: clamp(2rem, 3vw, 3rem);
	line-height: 1.4;
	display: flex;
	text-align: left;
}
.bet {
	text-align: left;
	width: 100%;
	margin-right: 40px;

}
.score {
	text-align: left;
	font-size: clamp(5rem, 6vw, 6rem);
	position: relative;
	top:-35%;

}

@media screen and (max-width: 767px) {
	.score {
	text-align: left;
	font-size: clamp(5rem, 6vw, 6rem);
	position: relative;
	top:-45%;

}
}



.stageTokuten {
	width: 60%;
	height: 100vh;
	margin: auto;
display: flex;
	flex-direction: column;
  justify-content: center; /* 横方向中央 */
}

.stageTokuten .tokutenTITLE {
	font-size: clamp(1.6rem, 2vw, 2rem);
	color:#666666;
}
.stageTokuten .yaku {
	font-size: clamp(2.4rem, 4vw, 4rem);
	color:#222;
	font-family: "Noto Serif JP", serif;
	font-weight: bold;
	text-align: center;
	margin-bottom: 10px;
}
.yakuBOX {
	width: 60%;
	margin: auto;
	display: flex;
	justify-content: space-between;
}
.yakuBOX li {
	width: 32%;
}

@media screen and (max-width: 767px) {
	
.stageTokuten {
	width: 85%;
	height: 100vh;
	margin: auto;
display: flex;
	flex-direction: column;
  justify-content: center; /* 横方向中央 */
}

.stageTokuten .tokutenTITLE {
	font-size: clamp(1.6rem, 2vw, 2rem);
	color:#666666;
}
.stageTokuten .yaku {
	font-size: clamp(3rem, 4vw, 4rem);
	color:#222;
	font-family: "Noto Serif JP", serif;
	font-weight: bold;
	text-align: center;
	margin-bottom: 10px;
}
.yakuBOX {
	width: 60%;
	margin: auto;
	display: flex;
	justify-content: space-between;
}
.yakuBOX li {
	width: 32%;
}
}



.replayBOX {
	width: 50%;
	height: 100vh;
	margin: auto;
display: flex;
	flex-direction: column;
  justify-content: center; /* 横方向中央 */
}
.replayBOX li {
	margin: 5px 0;
}

@media screen and (max-width: 767px) {
	.replayBOX {
	width: 85%;
	height: 100vh;
	margin: auto;
display: flex;
	flex-direction: column;
  justify-content: center; /* 横方向中央 */
}
.replayBOX li {
	margin: 2px 0;
}
}



/*----------------------------------------

日本 ゲームTOP

----------------------------------------*/	

.japan {
  background: url(../images/bg/japan_bg.jpg) no-repeat center center/cover;
  height: 100vh;
	display: flex;
  justify-content: center;
  align-items: center;
	position: relative;
}

.ButtonGray {
    margin: 5px 0;
	  background: #313131;
	  border: 3px solid #626262;
	
  }
a.ButtonGray {
	  display: block;
    text-decoration: none;
    color: #fff;
    font-weight: 600;
	  font-size: clamp(2rem, 2.4vw, 2.4rem);
	text-align: center;
}


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

.ButtonGray {
    margin: 5px 0;
	  border: 2px solid #626262;
	box-shadow: inset 0 0 2px 2px #261c10;
  }
a.ButtonBrw {
	  display: block;
    text-decoration: none;
    color: #fff;
    font-weight: 600;
	  font-size: clamp(2rem, 2.4vw, 2.4rem);
	text-align: center;
}

}

.dialogue {
  white-space: normal !important;
	display: block; 
}

/*----------------------------------------

日本 ゲーム スロットTOP

----------------------------------------*/	

.slot {
  background:url("../images/stage/japan/slot_bg.jpg") no-repeat center center/cover;
  height: 100vh;  
	display: flex;
  justify-content: center;
  align-items: center;
	position: relative;
}
.slot_contents {
	width: 100%;
  min-height: 100vh;            /* 画面全体の高さ */
  display: flex;
  flex-direction: column;
}

.slothontai {
position: absolute;
	display: flex;
	justify-content: center;
  width: 67%;
  right: 0;
  left: 0;
  margin: 0 auto;
  opacity: 0;
  animation: fade-In 0s ease forwards;
  animation-delay: 0s;
	z-index: 1;
	padding: 40px;
	box-sizing: border-box;
}
.slothontai img {
  display: block;
  max-height: 100vh;   /* ビューポートの高さを超えない */
  width: auto;         /* アスペクト比を維持 */
  height: auto;
  margin: 0 auto;
  object-fit: contain; /* 収まりを優先 */
  opacity: 0;          /* 最初は透明 */
  animation: fadeIn 1.5s ease forwards; /* フェードインアニメ */
  animation-delay: 0.2s; /* 遅延スタート */
}


.slotbutton {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 完全中央に */
  z-index: 1;/* 背景より前面 */
	 animation: fadeIn 1.5s ease forwards; /* フェードインアニメ */
}

.slotbutton img {
  display: block;
  max-width: 300px;   /* ボタンサイズ固定 */
  width: 100%;
  height: auto;
}

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

.slot {
	
  background:url("../images/stage/japan/slot_bgSP.jpg") no-repeat top center/cover;
  height: 100vh;  
	display: flex;
  justify-content: center;
  align-items: center;
	position: relative;
}

	
.slot_contents {
	width: 100%;
  min-height: 100vh;            /* 画面全体の高さ */
  display: flex;
  flex-direction: column;
	
}

.slothontai {
position: absolute;
	display: flex;
	justify-content: center;
  width: 67%;
  right: 0;
  left: 0;
  margin: 0 auto;
  opacity: 0;
  animation: fade-In 0s ease forwards;
  animation-delay: 0s;
	z-index: 1;
	padding: 40px;
	box-sizing: border-box;
}
.slothontai img {
  display: block;
  max-height: 100vh;   /* ビューポートの高さを超えない */
  width: auto;         /* アスペクト比を維持 */
  height: auto;
  margin: 0 auto;
  object-fit: contain; /* 収まりを優先 */
  opacity: 0;          /* 最初は透明 */
  animation: fadeIn 1.5s ease forwards; /* フェードインアニメ */
  animation-delay: 0.2s; /* 遅延スタート */
}


.slotbutton {
  position: absolute;
	width: 70%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 完全中央に */
  z-index: 1;/* 背景より前面 */
	 animation: fadeIn 1.5s ease forwards; /* フェードインアニメ */
}

.slotbutton img {
  display: block;
  max-width: 100%;   /* ボタンサイズ固定 */
  width: 100%;
  height: auto;
}
	
}

/*----------------------------------------

日本 ゲーム スロット 回転

----------------------------------------*/	

.roleBOX {
	position: absolute;
	width: 80%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 完全中央に */
  z-index: 1;/* 背景より前面 */
	 animation: fadeIn 1.5s ease forwards; /* フェードインアニメ */
}
div.vid_contents {
width: 100%;/*背景色を横幅いっぱいに広げる*/
text-align: center;
margin: auto;

}
video.vid_main {
width: 100%;
max-width: 920px;/*PC版での最大幅*/
}


/*----------------------------------------

日本 ゲーム スロット タイトルに戻る

----------------------------------------*/	

.slot_contents .BackStage {
	position: absolute;
	width: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 完全中央に */
  z-index: 1;/* 背景より前面 */
	 animation: fadeIn 1.5s ease forwards; /* フェードインアニメ */
	padding: 15px;
	box-sizing: border-box;
}

@media screen and (max-width: 768px) {
.slot_contents .BackStage {
	position: absolute;
	width: 70%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 完全中央に */
  z-index: 1;/* 背景より前面 */
	 animation: fadeIn 1.5s ease forwards; /* フェードインアニメ */
	padding: 15px;
	box-sizing: border-box;
}

}

/*----------------------------------------

日本 ゲーム スロット 特典

----------------------------------------*/

.GetCoin {
	font-size: clamp(4.5rem, 6vw, 6rem);
	color:#666666;
	line-height: 1.3;
	font-weight: 600;
}
.GetCoin span {
	font-size: clamp(2rem, 3vw, 3rem);
}