@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@300;700&display=swap');

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

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

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

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

/*======================
form reset
=======================*/
input {
/* デフォルトスタイルをリセット */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* font-familyを継承しないので、継承させる */
font-family: inherit;
/* iOSの角丸をリセット */
border-radius: 0;
/* box-size */
box-sizing: border-box;
/* 文字の大きさ iOSでズームさせないために16px以上を指定 */
font-size: 1.6rem;
/* 文字色を親から継承 */
color: inherit;
}
label {
/* iOSでのlabelとinput,select,textareaの関連付け */
cursor: pointer;
/* inputの枠線を消す */
border: 1px solid transparent;
transition: border 0.2s ease-out;
/* 文字色を親から継承 */
color: inherit;
/*inputのフォーカス時の枠線を消す*/
outline: 0;
}
/* inputにフォーカスが当たっている時 */
input:focus {
border-bottom: 1px solid #E71F19;
}

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

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

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

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

/*======================
 header
=======================*/
header {
display: none;
width: 90%;
margin: 0 auto;
position: relative;
}

header .inner{
width: 90%;
max-width: 480px;
margin: 0 auto;
position: relative;
}

header .inner h1 {
position: absolute;
top: 1em;
right: 0;
width: 4em;
height: 4em;
}

/*======================
 設定用
=======================*/
.setting {
display: none;
}

/*======================
 スタート画面
=======================*/
.start_box {
background: rgba( 0, 0, 0, .6);
width: 100%;
height: 100vh;
position: absolute;
top: 0; left: 0;
z-index: 99;
}

.start_box .inner {
width: 80%;
max-width: 320px;
background: #FFF;
padding: 3em 1em;
border-radius: 1em;
text-align: center;
position: absolute;
top: 4em; left: 50%;
transform: translate(-50%, 0);
z-index: 100;
}

.start_box .inner .logo {
width: 5em;
height: 5em;
margin: 0 auto 0;
}


.start_box .inner p {
font-size: 1.6rem;
font-weight: bold;
margin: 2em 0 0;
}

.sub_ttl {
font-weight: bold;
margin: 3em 0 0;
}

.play_num_select,
.clear_num_select {
width: 90%;
margin: .8em auto 0;
}

.play_num_select form,
.clear_num_select form {
width: 100%;
display: flex;
justify-content: center;
flex-wrap: nowrap;
gap: .4em;
}


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

input[type="radio"]:checked + label {
opacity: .8;
}

.label_1,
.label_2 {
font-weight: bold;
color: #FFF;
border-radius: .5em;
background: #272343;
padding: 1em 0;
}

.label_1 {
width: 33.3%;
}

.label_2 {
width: 25%;
}

.label_1.disabled,
.label_2.disabled {
cursor: initial;
pointer-events: none;
opacity: .2
}


#start_btn {
margin: 3em 0 0;
}

#start_btn span {
display: inline-block;
width: 12em;
height: 50px;
line-height: 50px;
border-radius: .5em;
cursor: pointer;
padding: 0 3em;
background: #CA0F2E;
color: #FFF;
font-weight: bold;
}

#start_btn.disabled {
cursor: initial;
pointer-events: none;
opacity: .2
}


/*======================
 終了画面
=======================*/
.win_box {
display: none;
background: rgba( 0, 0, 0, .6);
width: 100%;
height: 100vh;
position: absolute;
top: 0; left: 0;
z-index: 99;
}

.win_box .inner {
width: 80%;
max-width: 400px;
background: #FFF;
padding: 3em 2em 2em;
border-radius: 1em;
text-align: center;
position: absolute;
top: 4em; left: 50%;
transform: translate(-50%, 0);
z-index: 100;
}

.win_box .inner p {
font-size: 1.6rem;
font-weight: bold;
}

#replay_btn {
margin: 2em 0 0;
}

#replay_btn span {
display: inline-block;
width: 100%;
height: 50px;
line-height: 50px;
border-radius: .5em;
cursor: pointer;
padding: 0 3em;
background: #272343;
color: #FFF;
font-weight: bold;
}

.quit_btn {
margin: .5em 0 0;
}

.quit_btn span {
display: inline-block;
width: 100%;
height: 50px;
line-height: 50px;
border-radius: .5em;
cursor: pointer;
padding: 0 3em;
background: #CA0F2E;
color: #FFF;
font-weight: bold;
}

/*======================
 リセットボタン
=======================*/
#reset_btn {
font-size: 1.2rem;
position: absolute;
top: .5em; right: 0;
text-align: center;
}

#reset_btn span {
display: inline-block;
width: 5em;
height: 5em;
line-height: 5em;
border-radius: 50%;
cursor: pointer;
background: #CA0F2E;
color: #FFF;
font-weight: bold;
}

/*======================
 リセット画面
=======================*/
.reset_box {
display: none;
background: rgba( 0, 0, 0, .6);
width: 100%;
height: 100vh;
position: absolute;
top: 0; left: 0;
z-index: 99;
}

.reset_box .inner {
width: 80%;
max-width: 400px;
background: #FFF;
padding: 3em 2em 2em;
border-radius: 1em;
text-align: center;
position: absolute;
top: 4em; left: 50%;
transform: translate(-50%, 0);
z-index: 100;
}

.reset_box .inner p {
font-size: 1.6rem;
font-weight: bold;
}

#continue_btn {
margin: 1em 0 0;
}

#continue_btn span {
display: inline-block;
width: 100%;
height: 50px;
line-height: 50px;
border-radius: .5em;
cursor: pointer;
padding: 0 3em;
background: #272343;
color: #FFF;
font-weight: bold;
}

#play_num,
#clear_num {
width: 100%;
max-width: 3em;
background: #EADDCF;
padding: .5em 0;
text-align: center;
}

#play_num {
margin: 1em 0 0;
}

#clear_num {
margin: .3em 0 0;
}


#play_num p,
#clear_num p {
font-size: .8rem;
font-weight: bold;
border-bottom: solid 1px #FFF;
padding: 0 0 1em;
}

#play_num p.num,
#clear_num p.num {
font-size: 1.6rem;
margin: .4em 0 0;
padding: 0;
border-bottom: none;
}

/*======================
 contents
=======================*/
.contents {
width: 100%
}

.contents > .inner {
width: 90%;
max-width: 480px;
margin: 1em auto 0;
position: relative;
}

.game_boad {
position: relative;
width: 70%;
margin: 0 auto;
}

.grid {
display: flex;
flex-wrap: wrap;
width: 100%;
text-align: center;
}

.grid > .item {
width: calc( 9.164% - 0.81%);
margin-bottom: 0.81%;
margin-left: 0.81%;
}

.grid > .item:nth-child( 11n + 1 ) {
margin-left: 0;
}

.grid > .item[data-num="7"] {
height: 2em;
display: flex;
align-items: end;
justify-content: center;
}

.grid > .item > .rect {
background: #EADDCF;
width : 100%;
padding-top: 100%;
border-radius: .3em;
}

.col_num_bottom,
.col_num_top {
color: #8C7851;
font-size: 1.4rem;
font-weight: bold;
}

.col_num_top {
margin-top: auto;
}

.col_num_top img {
width: 1em;
height: auto;
}

/*- コマ -*/ 
.piece {
width: 5%;
height: auto;
display: none;
position: absolute;
}

.piece img {
width: 100%;
}

.piece.actv {
display: block;
}

/*- コマの初期位置 -*/
.inicial_place {
top: 0;
left: 0;
}

/*- 手番表示 -*/
.turn_box {
width: 100%;
max-width: 3em;
background: #EADDCF;
padding: .6em .3em .3em;
}

.sub_box {
width: 10%;
position: absolute;
top: 0;  left: 0;
}

.current_player_box {
width: 100%;
padding: 0 0 .4em;
}

.current_piece {
max-width: 1.2em;
width: 100%;
margin: 0 auto;
display: none;
}

.current_piece.actv {
display: block;
}

.current_piece img {
width: 100%;
}

.pawn_box {
width: 100%;
padding: .5em 0 0;
background: #FFF;
height}

.current_pawn {
max-width: 1em;
width: 100%;
margin: 0 auto;
}

.current_pawn img {
width: 100%;
}

.current_pawn.actv {
display: none;
}

/*- 現在のプレイヤー表示 -*/
.current_player {
width: 12em;
margin: 1em auto 0;
text-align: center;
border: solid 1px #272343;
border-radius: 4em;
position: relative;
padding: .5em 1em;
}

.current_player:before {
content: "";
position: absolute;
left: 50%;
bottom: -8px;
transform: translate(-50%, 0);
border: 4px solid transparent;
border-top: 4px solid #F9F4F0;
z-index: 2;
}

.current_player:after {
content: "";
position: absolute;
left: 50%;
transform: translate(-50%, 0);
bottom: -10px;
border: 5px solid transparent;
border-top: 5px solid #272343;
z-index: 1;
}

.current_player .inner {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
gap: .4em;
}

.current_player .inner p {
font-size: 1.6rem;
font-weight: bold;
}

.current_player .current_player_box {
width: 1.3em;
padding: 0;
margin: 0;
}

.current_player .current_piece {
padding: 0;
margin: 0;
}

/*- コントロールボックス -*/
.control_box {
margin: .8em 0 0;
text-align: center;
}

.btn_box {
color: #FFF;
font-weight: bold;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: .5em;
}

.btn_item {
height: 50px;
line-height: 50px;
border-radius: .5em;
cursor: pointer;
width: 100%;
}

.roll_btn {
background: #272343;
}

.roll_btn .icon {
display: inline-block;
vertical-align: middle;
width: 1.8em;
height: 1.8em;
margin-right: .4em;
background: url(../img/icon_dice.svg) no-repeat;
}

.stop_btn {
background: #F25043;
}

.stop_btn .icon {
display: inline-block;
vertical-align: middle;
width: 1.4em;
height: 1.4em;
background: url(../img/icon_stop.svg) no-repeat;
}

.ini_set .stop_btn {
display: none;
background: #F25043;
}

.choices_box {
margin: 1em 0 0;
display: flex;
flex-direction: column;
background: #EADDD0;
padding: .5em;
}

.choices_box_inner {
background: #FFF;
padding: 1em;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
gap: .5em 0;
}

.choices_box_inner .txt {
width: 100%;
font-weight: bold;
margin: 0 0 1em;
}

.choices_box_inner .txt span {
color: #CA0F2E;
position: relative;
}

.choices_box_inner .txt span::before {
display: block;
content: '';
width: 1.8em;
height: 1.8em;
background: url(../img/icon_cry.svg);
position: absolute;
top: 50%;  left: 50%;
transform: translate(-8em, -50%);
}

.choices_box_inner .txt span::after {
display: block;
content: '';
width: 1.8em;
height: 1.8em;
background: url(../img/icon_cry.svg);
position: absolute;
top: 50%;  right: 50%;
transform: translate(7.8em, -50%);
}

.choice_pip_box {
display: flex;
flex-wrap: wrap;
width: 4em;
gap: .5em 0;
}

.choice_pip {
width: 1.5em;
height: 1.5em;
}

.choice_pip:nth-child(1) {
transform: translate( 0, -.1em) rotate(35deg);
z-index: 1;
}

.choice_pip:nth-child(3) {
transform: rotate(-10deg);
}

.choice_pip:nth-child(5) {
transform: rotate(10deg);
}

.choice_pip:nth-child(7) {
transform: rotate(-30deg);
}

.choice_btn {
display: block;
padding: 1em .5em;
border: solid 3px #272343;
border-radius: .5em;
cursor: pointer;
}

.choice_btn.disabled {
border: solid 1px #272343;
pointer-events: none;
opacity: 0.1;
}

.choice_btn span {
font-size: 1.5em;
font-weight: bold;
}

.choice_btn span span {
font-size: .6em;
}

.choice_btn_box {
width: 100%;
display: flex;
position: relative;
flex-wrap: wrap;
justify-content: space-between;
gap: .4em .3em;
}

.choice_btn_box .choice_btn {
width: calc(33.33% - .3em);
}

.choice_btn_box .ok_btn {
display: none;
width: 100%;
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
}

.choice_btn_box .ok_btn span {
display: inline-block;
height: 50px;
line-height: 50px;
border-radius: .5em;
cursor: pointer;
padding: 0 3em;
background: #CA0F2E;
color: #FFF;
font-weight: bold;
}

.choice1 {
order: 1;
}
.choice2 {
order: 4;
}
.choice3 {
order: 2;
}
.choice4 {
order: 5;
}
.choice5 {
order: 3;
}
.choice6 {
order: 6;
}

/*- サイコロの目 -*/
.pip_1 {
background: url(../img/dice1.svg) no-repeat 0 0;
}
.pip_2 {
background: url(../img/dice2.svg) no-repeat 0 0;
}
.pip_3 {
background: url(../img/dice3.svg) no-repeat 0 0;
}
.pip_4 {
background: url(../img/dice4.svg) no-repeat 0 0;
}
.pip_5 {
background: url(../img/dice5.svg) no-repeat 0 0;
}
.pip_6 {
background: url(../img/dice6.svg) no-repeat 0 0;
}

/*- クリアした列の背景色変更 -*/
.grid > .item > .rect.clear_1 {
background: #E53170;
opacity: .5;
}
.grid > .item > .rect.clear_2 {
background: #FBAF2A;
opacity: .5;
}
.grid > .item > .rect.clear_3 {
background: #12807F;
opacity: .5;
}
.grid > .item > .rect.clear_4 {
background: #B299DD;
opacity: .5;
}

@media screen and (min-width: 960px) {
/*-- min-width: 960px //--*/

/*======================
 footer: 960px
=======================*/
footer .inner {
width: 980px;
margin: 0 auto;
}


/*======================
header: 960px
=======================*/


/*======================
 contents: 960px
=======================*/

/*--// min-width: 960px //--*/
}