@charset "utf-8";

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

}

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

}

html {
//width: 92vw;
//height: 90vh;
}

body {
touch-action: manipulation;
width: 92vw;
height: 90vh;
//position: absolute;
text-align: center;
margin: 0;
background: black;
color: #fff;
font-size: 5vmax;
font-weight: bold;
-webkit-touch-callout: none;
}

button {
font-size: clamp(16px, 3vmax, 3vmax);
;
font-weight: bold;
}

.firudo {
position: absolute;
top: 45vh;
left: 50vw;
transform: translate(-50%, -50%);
//    -webkit-transform: translate(-50%, -50%);
//    -ms-transform: translate(-50%, -50%);
width: 45vmax;
height: 50vmax;
background: green;
overflow: hidden;
z-index: 0;
}

.kusa {
position: absolute;
bottom: 0vh;
left: 0vw;
//transform: translate(-50%, -50%);
//    -webkit-transform: translate(-50%, -50%);
//    -ms-transform: translate(-50%, -50%);
width: 45vmax;
height: 37.5vmax;
background: #9c6;
z-index: 1;

}

#agein {
display: none;
position: absolute;
bottom: 5vmax;
left: 25vmax;
z-index: 3;
}

#hito {
position: absolute;
width: 12vmax;
//12 10.8;
height: 16vmax;
//16 14.4;
bottom: 2vmax;
left: 12.5vmax;
//transform:translate(0vmax, 0vmax);
//transform-origin: 50% 100%;
//display: none;
z-index: 5;
}

#keeper {
position: absolute;
width: 9.6vmax;
height: 16.56vmax;
bottom: 32vmax;
left: 17.7vmax;
transform-origin: 50% 100%;
transform: scale( 0.5 );
display: none;
z-index: 3;
}

.tama0 {
position: absolute;
width: 2.5vmax;
height: 2.5vmax;
transform-origin: 50% 100%;
}

.tamas {
position: absolute;
width: 2.5vmax;
height: 2.5vmax;
bottom: 2.5vmax;
left: 25vmax;
z-index: 3;
transform-origin: 50% 100%;
display: none;
}

#tama{
bottom: 2.5vmax;
left: 21.25vmax;
transform: scale(1);
z-index: 4;
}

.gp {
position: absolute;
width: 64vmax;
height: 18.7vmax;
transform-origin: 50% 100%;
bottom: 32vmax;
left: -10.5vmax;
transform: scale(0.5);
border: 1vmax solid #fff;
border-bottom-style: none;
z-index: 2;
background: 
}

.goal {
position: absolute;
width: 64vmax;
height: 18.7vmax;//18.7;
//transform-style: preserve-3d;
//    -webkit-transform: translate(-50%, -50%);
//    -ms-transform: translate(-50%, -50%);
transform-origin: 50% 100%;
//clip-path: polygon(0% 0%, 80% 0%, 100% 100%, 0% 100%);
bottom: 32.5vmax;
left: -9.5vmax;
//background: white;
transform: scale(0.5);
z-index: 2;
}

.goalami {
width: 64vmax;
height: 18.7vmax;
background-image: url(images/ami.png);
background-size: 2.5%;
opacity: 0.5;
}

.goalline {
position: absolute;
width: 90vmax;
height: 0.5vmax;
bottom: 32vmax;
left: 0vmax;
background: #fff;
transform-origin: 0% 100%;
transform: scale(0.5);
z-index: 2;
}


.goalline2 {
position: absolute;
width: 67vmax;
height: 0.5vmax;
bottom: 20vmax;
left: 0vmax;
background: #fff;
transform-origin: 0% 100%;
transform: scale(0.67);
z-index: 2;
}

.pena {
position: absolute;
width: 1vmax;
height: 0.5vmax;
bottom: 2.5vmax;
left: 22vmax;
background: #fff;
z-index: 2;
}

.goal2 {
position: absolute;
width: 64vmax;
height: 18.7vmax;//18.7;
//transform-style: preserve-3d;
//    -webkit-transform: translate(-50%, -50%);
//    -ms-transform: translate(-50%, -50%);
transform-origin: 50% 100%;
//clip-path: polygon(0% 0%, 80% 0%, 100% 100%, 0% 100%);
bottom: 2.5vmax;
left: -9.5vmax;
transform: scale(1);
display: none;
}

#matos {
display: none;
z-index: 3;
}

.mato {
//display: none;
position: absolute;
width: 14.75vmax;
height: 6vmax;
left: 29vmax;
background: #cf9;
color: #063;
font-size: 4vmax;
//border: 0.5vmax solid #fff;
}

#ichi {
left: 1vmax;
bottom: 10.5vmax;
}

#ni {
left: 16.75vmax;
bottom: 10.5vmax;
}

#san {
left: 32.5vmax;
bottom: 10.5vmax;
}

#yon {
left: 48.25vmax;
bottom: 10.5vmax;
}

#gou {
left: 1vmax;
bottom: 3.5vmax;
}

#roku {
left: 16.75vmax;
bottom: 3.5vmax;
}

#nana {
left: 32.5vmax;
bottom: 3.5vmax;
}

#hachi {
left: 48.25vmax;
bottom: 3.5vmax;
}

#stbar {
position: absolute;
top: 0.25vmax;
left: 0.25vmax;
width: 2.5vmax;
height: 0vmax;
background: #f90;
}

#stbarbg {
position: absolute;
bottom: 3vmax;
left: 9.5vmax;
width: 3vmax;
height: 9.5vmax;
background: white;
transform: rotate( 180deg );
display: none;
z-index: 3;
}

#ykimg {
position: absolute;
top: 0vmax;
left: 10vmax;
width: 0.5vmax;
height: 3vmax;
background: #f30;
}

#ykbarbg {
position: absolute;
bottom: 0vmax;
left: 12.5vmax;
width: 20vmax;
height: 3vmax;
background: white;
//transform: translate(-50%, -50%);
//transform-style: preserve-3d;
//    -webkit-transform: translate(-50%, -50%);
//    -ms-transform: translate(-50%, -50%);
//transform-origin: 50% 100%;
//transform: rotate( 180deg );
display: none;
z-index: 3;
}

#text {
position: absolute;
top: 25vmax;
left: 22.5vmax;
width: 45vmax;
font-size: 3vmax;
transform: translate(-50%, -50%);
//    -webkit-transform: translate(-50%, -50%);
//    -ms-transform: translate(-50%, -50%);
margin: 0;
z-index: 4;
}


#suteetasu {
display: none;
text-align: left;
position: absolute;
top: 1vh;
left: 1vh;
width: 7em;
margin: 0;
font-size: 3.5vmax;
z-index: 4;
}


#hitotap {
display: none;
position: absolute;
bottom: 5vmax;
left: 25vmax;
width: 7em;
height: 2em;
//color: green;
font-size: clamp(16px, 2.5vmax, 2.5vmax);
text-align: right;
z-index: 4;
}

#nabi {
width: 45vmax;
position: absolute;
top: 45vh;
left: 50vw;
transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
background-color: #333;
z-index: 6;
}


ul {
margin: 0;
padding: 0;
list-style-type: none;
font-size: clamp(16px, 3vmax, 3vmax);
}

li {
margin: 1vmax;
}

.nabib {
width: 40vmax;
height: clamp(45px, 5vmax, 5vmax);
}

#yame {
display: none;
position: absolute;
top: 1vh;
right: 0.5vh;
width: auto;
}

/*



a {
color: #333;
background-color: #fff;
text-decoration: none
}
a:hover {color:#fff; background:#00c;
}
a:active {
color:#00c;
}

main {
left: auto;
//background-color: pink;
}


input {
transform:scale(1.5);
}



#setu {
margin-bottom: 1vh;
}




#yamegamen {
display: none;
z-index: 3;
width: 45vh;
position: absolute;
top: 40vh;
left: 22.5vh;
transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
background-color: #333;
}




#gtt {
display: none;
width: auto;
}

#rr {
margin-bottom: 1vh;
}



#byoutext {
position: absolute;
top: 42vh;
left: 22vh;
width: 40vh;
transform: translate(-50%, -50%);
//    -webkit-transform: translate(-50%, -50%);
//    -ms-transform: translate(-50%, -50%);
margin: 0;
}

*/