@charset "UTF-8";

/*======================
base
=======================*/
html{
height: 100%; /*-- フッターを最下部に固定するための指定 ※IE10以上 --*/
font-size: 62.5%; /*-- ベースのフォントサイズを10pxに指定 各要素のフォントサイズ指定はremで --*/
overflow: hidden;
}

body{
font-family: 'M PLUS 1p', sans-serif;
font-size: 1.4em; /*-- bodyのフォントサイズを14pxに指定 --*/
display: flex; /*-- フッターを最下部に固定するための指定 ※IE10以上 --*/
flex-direction: column; /*-- フッターを最下部に固定するための指定 ※IE10以上 --*/
-webkit-text-size-adjust: 100%;/*-- iOSのSafariで意図せずフォントサイズが大きくなるのを防ぐ --*/
user-select: none;
height: 100%;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
background-color: #000;
color: #FFF;
}

header, footer {
flex: 0 0 auto; /*-- フッターを最下部に固定するための指定 ※IE10以上 --*/
}

.contents {
flex: 1 0 auto; /*-- フッターを最下部に固定するための指定 ※IE10以上 --*/
}

/*======================
common
=======================*/
/*
テキストリンク
-----------------------*/
a {
text-decoration: none;
color: #f45d48;
}

a:link,
a:visited {
text-decoration: none;
color: #f45d48;
}

a:hover,
a:active {
text-decoration: underline;
color: #f45d48;
}

/*======================
footer
=======================*/
footer {
width: 100%;
font-size: 1.1rem;
color: #a7a9be;
text-align: center;
padding: 1em;
margin: 3em 0 0;
background: #0f0e17;
}

/*======================
header
=======================*/
header {
width: 100%;
text-align: center;
background: #F9F4F0;
}

/*======================
contents
=======================*/
.contents {
width: 100%;
text-align: center;
}

/*======================
ゲーム情報の表示
=======================*/
.game_data_box {
width: 90%;
max-width: 550px;
margin: .5em auto 1em;
display: flex;
justify-content: start;
}

.score_box {
display: flex;
justify-content: start;
gap: 0 .5em
}

.score_item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1em;
border: solid 2px #FFFFFE;
border-radius: .5em;
padding: .5em;
}

.score_item.perfect_score {
width: 4em;
}

.score_item.loss_score {
width: 4em;
}

.score_item.point_score {
width: 6em;
}

.score_item.perfect_score .score_num {
color: #48C1F4;
}

.score_item.loss_score .score_num {
color: #EA1E4E;
}

.score_item.point_score .score_num {
color: #F4BA0A;
}

.score_title img {
width: 1.5em;
height: auto;
}

.score_num {
font-size: 2rem;
}

.turn_box {
margin-left: auto;
display: flex;
flex-direction: column;
gap: 1em;
align-items: center;
justify-content: center;
width: 6em;
border: solid 2px #FFFFFE;
border-radius: .5em;
}

.turn_box_num {
display: flex;
gap: 0 .2em;
align-items: baseline;

}

.turn_box_num span {
font-size: 2rem;
}

/*======================
main
=======================*/
.main{
aspect-ratio: 1/1;
max-width: 640px;
width: 86%;
display: block;
position: relative;
background: url("../img/bg.gif") no-repeat;
background-size: contain;
margin: 0 auto;
overflow: hidden;
}

/*======================
串
=======================*/
.skewer{
position: absolute;
}

.skewer img{
width: 100%;
height: 100%;
}

.skewerImg{
position: absolute;
z-index: 0;
}

.dotImg{
position: absolute;
z-index: 2;
top: 0; left: 0;
}

#skewerJ{
width: 20%;
height: 100%;
left: 20%;
top: 0%;
}

#skewerK{
width: 40%;
height: 100%;
left: 45%;
top: 0%;
}

#skewerL{
width: 40%;
height: 100%;
left: 50%;
top: 0%;
}

#skewerJ .skewerImg {
top: 100%; left: -100%;
}

#skewerK .skewerImg {
top: -100%; left: 100%;
}

#skewerL .skewerImg {
top: 100%; left: 100%;
}

#skewerJ .skewerImg.on,
#skewerK .skewerImg.on,
#skewerL .skewerImg.on {
top: 0; left: 0;
transition: all .2s;
}

/*======================
つくね数の表示
=======================*/
#food_num {
position: absolute;
display: none;
background-color: rgba(255,255,255,.8);
padding: 2em;
text-align: center;
font-size: 2rem;
z-index: 30;
width: 60%;
max-width: 320px;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
color: #333;
border-radius: .5em;
}

#food_num dl {
width: 100%;
display: flex;
justify-content: center;
align-items: baseline;
gap: 0 1em;
}

#food_num dt {
white-space: nowrap;
}

#food_num dd {
white-space: nowrap;
}

#food_num dd span {
color: #EA1E4E;
font-size: 1.6em;
display: inline-block;
vertical-align: text-bottom;
}

/*======================
GOOD GREATの表示
=======================*/
.accuracy {
z-index: 20;
font-size: 2rem;
position: absolute;
top: 50%;
transform: translateY(-50%);
opacity: 0;
}

#skewerJ .accuracy {
left: -20%;
}

#skewerK .accuracy {
left: 0;
}

#skewerL .accuracy {
right: -10%;
}

/* ぼよよんとあらわれる */
.boing {
  animation: boing 1s ease-in-out forwards;
}
 
@keyframes boing {
  0%  {
    opacity: 0;
    transform: scale(1.0, 1.0) translate(0, 0);
  }
  5% {
    opacity: 1;
  }
  15% {
    transform: scale(0.98, 0.9) translate(0, 5px);
  }
  30% {
    transform: scale(1.02, 1.0) translate(0, 8px);
  }
  50% {transform: scale(0.98, 1.05) translate(0, -8px);
  }
  70% {
    transform: scale(1.0, 0.9) translate(0, 5px);
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: scale(1.0, 1.0) translate(0, 0);
    opacity: 0;
  }
}

/*======================
けむり
=======================*/
#skewerJ.grilled::before {
content: "";
display: block;
background: url("../img/kemuri.gif") no-repeat;
z-index: 10;
width: 150%;
height: 150%;
position: absolute;
top: 0;
left: -100%;
background-size: contain;
}
#skewerJ.grilledLow::before {
content: "";
display: block;
background: url("../img/kemuri.gif") no-repeat;
z-index: 10;
width: 150%;
height: 150%;
position: absolute;
top: 50%;
left: -140%;
background-size: contain;
}
#skewerK.grilled::before {
content: "";
display: block;
background: url("../img/kemuri.gif") no-repeat;
z-index: 10;
width: 75%;
height: 75%;
position: absolute;
top: 0;
left: -10%;
background-size: contain;
}
#skewerK.grilledLow::before {
content: "";
display: block;
background: url("../img/kemuri.gif") no-repeat;
z-index: 10;
width: 75%;
height: 75%;
position: absolute;
top: 50%;
left: -60%;
background-size: contain;
}
#skewerL.grilled::before {
content: "";
display: block;
background: url("../img/kemuri.gif") no-repeat;
z-index: 10;
width: 75%;
height: 75%;
position: absolute;
top: 0;
left: 50%;
background-size: contain;
transform: scale(-1, 1);
}
#skewerL.grilledLow::before {
content: "";
display: block;
background: url("../img/kemuri.gif") no-repeat;
z-index: 10;
width: 75%;
height: 75%;
position: absolute;
top: 50%;
left: 70%;
background-size: contain;
transform: scale(-1, 1);
}

/*======================
つくね
=======================*/
.food{
display: none;
position: absolute;
animation-timing-function: linear;
width: 30%;
height: 30%;
}

#foodLeftUp{
left: -20%;
top: 25%;
animation-name: myLeft;
}
#foodLeftMid{
left: -20%;
top: 50%;
animation-name: myLeft;
}
#foodLeftLow{
left: -20%;
top: 75%;
animation-name: myLeft;
}
#foodRightUp{
left: 120%;
top: 25%;
animation-name: myRight;
}
#foodRightMid{
left: 120%;
top: 50%;
animation-name: myRight;
}
#foodRightLow{
left: 120%;
top: 75%;
animation-name: myRight;
}
.food img{
position: absolute;
width: 100%;
height: 100%;
left: -50%;
top: -50%;
animation:4s linear infinite rotation;
z-index: 1;
}

@keyframes myLeft {
  0%   { left: -20%; }
  100% { left: 120%; }
}
@keyframes myRight {
  0%   { left: 120%; }
  100% { left: -20%; }
}
@keyframes rotation{
  0%   { transform:rotate(0); }
  100% { transform:rotate(-360deg); }
}

#foodScore,
#success,
#loss {
display: block;
}
@keyframes myZoom{
  0%  { transform:scale(1); }
  30% { transform:scale(2); }
}
.zoom{
animation: .6s myZoom;
}

/*======================
ボタン
=======================*/
.btn_box {
color: #FFF;
margin: 2em auto 0;
}

.stop_btns {
width: 90%;
max-width: 550px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
gap: 0 5%;
}

.stop_btns_item {
border-radius: .5em;
padding: 1.5em 0;
width: 30%;
cursor: pointer;
}

#btn_skewer_j {
background: #5D99E1;
}

#btn_skewer_k {
background: #A4CC0E;
}

#btn_skewer_l {
background: #FFCF00;
}

#btn_next {
display: inline-block;
margin: 2em 0 0;
padding: .8em 2em;
cursor: pointer;
border-radius: 100vh;
border: solid 2px #FFFFFE;
}

#btn_start {
display: inline-block;
margin: 2em auto 0;
padding: .8em 2em;
border-radius: 100vh;
background: #EA1E4E;
cursor: pointer;
}

#btn_quit {
font-size: 1.4rem;
display: inline-block;
margin: 3em auto 0;
padding: .8em 2em;
border-radius: 100vh;
background: #55423d;
cursor: pointer;
}

.disable{
pointer-events: none;
cursor: auto;
opacity: .4;
}

/*======================
得点表
=======================*/
#score_chart_box {
position: absolute;
display: none;
background-color: rgba(255,255,255,.8);
padding: 2em;
text-align: center;
z-index: 2000;
width: 80%;
max-width: 320px;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
color: #333;
border-radius: .5em;
}

.score_chart_title {
font-size: 2rem;
font-weight: bold;
}

#score_chart {
margin: 1em 0 0;
}

#subtotal_box {
width: 100%;
}

#subtotal_box th,
#subtotal_box td {
vertical-align: middle;
padding: .4em 0;
}

#subtotal_box th img {
width: 1.3em;
height: auto;
}

.score {
font-size: 2rem;
width: 4.2em;
text-align: right;
}

.breakdown {
text-align: right;
font-size: 1.4rem;
}

.total_score {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
text-align: left;
margin: .6em 0 0;
padding: 1em 0 0;
border-top: solid 1px #333;
}

.total_score dt {
font-size: 2rem;
width: 4.5em;
}

.total_score dd {
font-size: 2.4rem;
}


/*======================
モーダルウィンドウ
=======================*/
#overlay {
background: rgba(90,90,90,.8);
width: 100vw;
height: 100vh;
position: fixed;
z-index: 1000;
}

/*
 設定フィールド
-----------------------*/
#setting_field {
color: #FFF;
background: #000;
width: 80%;
max-width: 320px;
padding: 2em 3em;
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
border-radius: .5em;
z-index: 2000;
text-align: center;
}

.logo_img {
width: 80%;
max-width: 120px;
margin: 0 auto;
}

.logo_img img {
width: 100%;
}

/*-- プレイモード選択 --*/
.lead_txt {
margin: 2em 0 0;
}

.play_mode_select {
margin: .8em 0 0;
width: 100%;
display: flex;
justify-content: center;
flex-wrap: nowrap;
gap: 1em;
}

.play_mode_select input[type=radio] {
display: none;
}

.play_mode_select input[type="radio"]:checked + label {
background: #C9B35D;
}

.play_mode_select .label_1 {
color: #FFF;
border-radius: .5em;
background: #DDD;
padding: .8em 0;
}

.play_mode_select .label_1 {
width: 100%;
}

/*- 自動串送りON・OFFの設定 -*/
.set_automatically {
display: flex;
align-items: center;
/*justify-content: center;*/
gap: 2em;
margin: 1em 0 0;
padding: 1em .8em;
border-top: solid #A7A9BE 1px;
border-bottom: solid #A7A9BE 1px;
}

.set_automatically .hd {
font-size: 1.2rem;
font-weight: bold;
white-space: nowrap;
min-width: 3em;
}

.automatically_select {
display: flex;
justify-content: center;
align-items: center;
gap: .5em;
font-size: 1.6rem;
}

.automatically_select > input {
display: none;
}

.automatically_select > label {
display: block;
position: relative;
width: 3em;
height: 1.5em;
border-radius: 1em;
background-color: #DDDDDD;
cursor: pointer;
}
.automatically_select > input:checked + label {
background-color: #C8B35D;
}
.automatically_select > label::before {
position: absolute;
top: 50%;
left: 0.1em;
width: 1.3em;
height: 1.3em;
border-radius: calc(1em - 0.1em);
background-color: #FFF;
transition: 0.5s;
transform: translateY(-50%);
content: "";
}
.automatically_select > input:checked + label::before {
left: calc(100% - 1.4em);
}

.set_automatically_attention {
font-size: 1.1rem;
margin: .5em 0 0;
text-align: left;
line-height: 1.4em;
padding-left: 1em;
text-indent: -1em;
}

.set_automatically_attention::before {
content: '※';
}