@charset "utf-8";
/* CSS Document */
/*
Copyright (c) 2023 by yochans (https://codepen.io/yochans/pen/yLMRzLv)
URL：https://codepen.io/yochans
*/

.dice_wrap{
   position: absolute;
   width: 160px;
   left: 0;
   right: 0;
   margin: auto;
   z-index: -1;
}

.dice {
	position: relative;
	width: 160px;
	height: 160px;
	transform-style: preserve-3d;
	transform: rotateX(0deg) rotateY(0deg);
	animation: rotate-anim 6s linear infinite;
}

@keyframes rotate-anim {
	0% {transform: rotateX(0) rotateY(0); }
	100% {transform: rotateX(-360deg) rotateY(720deg); }
}

.dice div {
	width: 95%;
	height: 95%;
	position: absolute;
	border-radius: 0;
	display: flex;
	justify-content: center;
	align-items: center;
   z-index: 0;
}

/* ● */
.dice div:nth-child(1) {
	background: rgba(205,205,205,0.40);
	transform: translateZ(80px);
}

/* ●● */
.dice div:nth-child(2) {
	background: rgba(205,205,205,0.40);
	transform: rotateX(-90deg) translateZ(80px);
}

/* ●●● */
.dice div:nth-child(3) {
	background: rgba(205,205,205,0.80);
	transform: rotateY(90deg) translateZ(80px);
}

/* ●●●● */
.dice div:nth-child(4) {
	background: rgba(205,205,205,0.80);
	transform: rotateY(-90deg) translateZ(80px);
}

/* ●●●●● */
.dice div:nth-child(5) {
	background: rgba(205,205,205,0.80);
	transform: rotateX(90deg) translateZ(80px);
}

/* ●●●●●● */
.dice div:nth-child(6) {
	background: rgba(205,205,205,0.80);
	transform: rotateY(180deg) translateZ(80px);
}

/* ダイスの目 */
.dice div span{
	display: block;
	margin-left: 28px;
	font-size: 34px;
	line-height: 38px;
	letter-spacing: 28px;
	text-align: center;
	color: transparent;
	background: rgba( 0, 0, 0, 0.4);
	text-shadow: 1px 1px 1px rgba( 255, 255, 255, 0.7);
	background-clip: text;
	-webkit-background-clip: text;
}

/* ●● and ●●● */
.dice div:nth-child(2) span, .cube div:nth-child(3) span{
	transform: translate(-5px,8px) rotate(45deg);
}



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

.dice_wrap{
   position: absolute;
   width: 120px;
   top: 10px;
   left: 0;
   right: 0;
   margin: auto;
   z-index: -1;
}

.dice {
	position: relative;
	width: 120px;
	height: 120px;
	transform-style: preserve-3d;
	transform: rotateX(0deg) rotateY(0deg);
	animation: rotate-anim 6s linear infinite;
   z-index: 0;
}

/* ● */
.dice div:nth-child(1) {
	background: rgba(205,205,205,0.40);
	transform: translateZ(60px);
}

/* ●● */
.dice div:nth-child(2) {
	background: rgba(205,205,205,0.40);
	transform: rotateX(-90deg) translateZ(60px);
}

/* ●●● */
.dice div:nth-child(3) {
	background: rgba(205,205,205,0.80);
	transform: rotateY(90deg) translateZ(60px);
}

/* ●●●● */
.dice div:nth-child(4) {
	background: rgba(205,205,205,0.80);
	transform: rotateY(-90deg) translateZ(60px);
}

/* ●●●●● */
.dice div:nth-child(5) {
	background: rgba(205,205,205,0.80);
	transform: rotateX(90deg) translateZ(60px);
}

/* ●●●●●● */
.dice div:nth-child(6) {
	background: rgba(205,205,205,0.80);
	transform: rotateY(180deg) translateZ(60px);
}

/* ダイスの目 */
.dice div span{
	display: block;
	margin-left: 28px;
	font-size: 25px;
	line-height: 25px;
	letter-spacing: 22px;
	text-align: center;
	color: transparent;
	background: rgba( 0, 0, 0, 0.4);
	text-shadow: 1px 1px 1px rgba( 255, 255, 255, 0.7);
	background-clip: text;
	-webkit-background-clip: text;
}

}