/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

@font-face {
  font-family: 'RiiPopkkR';
  src: url('../common/font/RiiPopkkR.otf') format('opentype');
  font-display: swap;
}

/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

.PLAYGROUND #contents_body {
	background: none;
	padding: 0;
}


/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
/*--.TopPage--*/
/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
.MenuBoxWrap {
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(1, 1fr);
}

.MenuBox {
	position: relative;
	list-style: none;
	min-height: 200px;
}
.MenuBox a {
    width: 100%;
    height: 100%;
    padding: 10px;
    background: floralwhite;
    border: 3px double #333;
   /* flex-direction: column;
    align-items: center;
    justify-content: center;*/
    grid-template-columns: 100%;
    grid-template-rows: auto 1fr;
    justify-items: center;
    gap: 10px 0;
}
	.MenuBox a, .MenuBox a:visited,
	.MenuBox a:hover, .MenuBox a:visited:hover {
		color: #333;
	}
		.MenuBox a:hover, .MenuBox a:visited:hover {
			transform: translate(-10px, -10px);
		}
			.MenuBox.comingsoon a {
				color: lightgray;
			}
			.MenuBox.comingsoon a img {
				opacity: 0.25;
			}
.MenuBox h2 {
    line-height: 1.3;
	text-align: center;
	word-break: keep-all;/* <wbr>用 */
	display: flex;
	align-items: center;
}
.MenuBox img {
	/*width: 100px;
	height: 100px;*/
    width: 45%;
    height: auto;
}
.MenuBox .shadow {
	background: #333;
	opacity: 0.7;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}
.TopPage img.tareko {
	display: block;
	width: 60%;
	height: auto;
	margin: 30px auto 0;
}
	/* テキトー */
	button.ToTOP {
		display: block;
		width: 140px;
		height: 70px;
		margin: 50px auto;
		line-height: 1.2;
		cursor: pointer;
		font-size: 20px;
	}
		button.ToTOP a, button.ToTOP a:visited {
			color: #333;
		}

/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
/*--.Roulette--*/
/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/


.Maker {
	margin-bottom: 30px;
	padding: 20px 10px;
	border: 10px ridge cadetblue;
	background: floralwhite;
	text-align: center;
}
	.Maker h3 {
		font-family: 'RiiPopkkR';
		font-weight: normal;
		line-height: 2;
	}
		.Maker h3 .sphere {
			width: 20px;
			aspect-ratio: 1;
			margin: 0 5px;
			border-radius: 50%;
			background: cadetblue;
			display: inline-block;
			vertical-align: middle;
		}

.Reel {
	align-items: center;
	gap: 10px;
}
	.Reel button {
		width: 100%;
	    aspect-ratio: 1;
		cursor: pointer;
		border-radius: 50%;
		line-height: 1;
	}
	.Reel img {
		width: 60%;
		height: 60%;
	}
.output {
	line-height: 1.4;
	padding: 10px;
	justify-content: center;
	align-items: center;
}
	.output.gray {
		color: #fdfdfd;
		background: gray;
	}
	.output.white {
	}

.RandomButton {
	line-height: 2;
	margin: 20px auto;
	padding: 0px 40px;
	cursor:pointer;
}



/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
							/* ↓↓↓( font-size )↓↓↓ */
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

	.MenuBox h2 {
		font-size: 1.375rem; /* 22px */
	}

	.Maker h3, .RandomButton, .output{
		font-size: clamp(0.625rem, 8vw, 2rem);/* 32px */
	}
		.output {
			min-height: calc(20px + 2rem*1.4);
		}

/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
							/* ↓↓↓( 各種条件分岐 )↓↓↓ */
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

	button.reset {/* いらないような気がしてきた */
		display: none;
	}

@media screen and (orientation: landscape) {


	.Reel {
		grid-template-columns: clamp(0.5rem, 13vw, 60px) 1fr clamp(0.5rem, 13vw, 60px);
	}
		button.reset {
			grid-column: 1;
		}
		.output{
			grid-column: 2;
		}
		button.reload{
			grid-column: 3;
		}

}

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

@media screen and (orientation: portrait) {


	.Reel {
		grid-template-columns: 1fr clamp(0.5rem, 13vw, 60px);
	}
		.output{
			grid-column: 1;
		}
		button.reload{
			grid-column: 2;
		}

}

/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
							/* ↓↓↓( Z-INDEX指定 )↓↓↓ */
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/


/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
							/* ↑↑↑（共通スタイル）↑↑↑ */
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
							/* ↓↓↓特殊３カラム（ノートPC--iPadpro横）↓↓↓ */
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

@media screen and (1280px <= width <= 1366px) and (orientation: landscape) {


/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
}							/* ↓↓↓２カラム（タブ）↓↓↓ */
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

@media screen and (933px <= width < 1280px) and (orientation: landscape),
       screen and (768px <= width < 1280px) and (orientation: portrait) {/* ２カラム共通スタイル */


/*:::::２カラム横向き::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
} @media screen and (933px <= width < 1280px) and (orientation: landscape) {


/*:::::２カラム縦向き::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
} @media screen and (768px <= width < 1280px) and (orientation: portrait) {

	.MenuBoxWrap {
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: repeat(2, 1fr);
	}

/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
}							/* ↓↓↓１カラム（スマホ）↓↓↓ */
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

@media screen and (width < 933px) and (orientation: landscape),
       screen and (width < 768px) and (orientation: portrait) {/* １カラム共通スタイル */



/*:::::１カラム横向き::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
} @media screen and (width < 933px) and (orientation: landscape) {

	.MenuBoxWrap {
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: repeat(2, 1fr);
	}


} @media screen and (width < 700px) and (orientation: landscape) {/* iPhoneSE横 */

/*:::::１カラム縦向き::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
} @media screen and (width < 768px) and (orientation: portrait) {


	.MenuBoxWrap {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(2, 1fr);
	}
		.MenuBox {
			min-height: initial;
		}

} @media screen and (width <= 480px) and (orientation: portrait) {

} @media screen and (width <= 375px) and (orientation: portrait) {/* iPhoneSE縦 */

} @media screen and (width <= 320px) and (orientation: portrait) {

}

/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/* https://pengi-n.co.jp/blog/hover/ */

/*::::::::::::::::::::::::::::::( ホバー時の挙動 )::::::::::::::::::::::::::::::::::*/

@media (hover: hover) {


}

/*::::::::::::::::::::::::::::::( ホバーできない機種の挙動 )::::::::::::::::::::::::::::::::::*/

@media (hover: none) {


}