@charset "UTF-8";

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

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

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

@keyframes fadeIn {
0% {
opacity: 0
}
100% {
opacity: 1
}
}
@-webkit-keyframes fadeIn {
0% {
opacity: 0
}
100% {
opacity: 1
}
}

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;
}


/*======================
ヘッダー
=======================*/
header {
width: 100%;
padding: .5em 0;
}

header .inner {
width: 90%;
max-width: 75em;
margin: 0 auto 0;
display: flex;
justify-content: space-between;
align-items: center;
gap: .5em;
}

h1 {
font-size: 1.6rem;
}

#reset_btn {
font-size: 1.1rem;
text-align: center;
font-weight: bold;
display: block;
color: #FFF;
border-radius: .4em;
padding: 1em 0;
cursor: pointer;
width: 5em;
background: #8c7851;
}

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

/*======================
設定用情報の非表示
=======================*/
/* しかれた布団の数カウント */
#id_player_num,
#pip_num,
#id_moody_mode,
#id_current_player,
#id_last_move_direction,
.setting_futon {
display: none;
}

/*======================
game_board
=======================*/
.game_board {
max-width: 75em;
width: 90%;
margin: 0 auto;
position: relative;
}

.board_bg {
background: url(../img/bg_board.png) no-repeat;
background-size: contain;
width: 100%;
padding-top: 100%;
}

/*======================
たたみ・えんがわ
=======================*/
.game_board > .inner {
width: 100%;
height: 100%;
position: absolute;
top: 0; left: 0;
display: flex;
flex-wrap: wrap;
}

.game_board > .inner > .item {
width: calc(100%/9);
/*border: solid #000 1px;*/
}

/* 赤布団　*/
.game_board > .inner > .item.f_1.c_1{
background: url(../img/futon_red_1.png) no-repeat;
background-size: contain;
background-position: bottom;
}

.game_board > .inner > .item.f_2.c_1{
background: url(../img/futon_red_2.png) no-repeat;
background-size: contain;
background-position: top;
}

.game_board > .inner > .item.f_3.c_1{
background: url(../img/futon_red_3.png) no-repeat;
background-size: contain;
background-position: right;
}

.game_board > .inner > .item.f_4.c_1{
background: url(../img/futon_red_4.png) no-repeat;
background-size: contain;
background-position: left;
}

/* 青布団　*/
.game_board > .inner > .item.f_1.c_2{
background: url(../img/futon_blue_1.png) no-repeat;
background-size: contain;
background-position: bottom;
}

.game_board > .inner > .item.f_2.c_2{
background: url(../img/futon_blue_2.png) no-repeat;
background-size: contain;
background-position: top;
}

.game_board > .inner > .item.f_3.c_2{
background: url(../img/futon_blue_3.png) no-repeat;
background-size: contain;
background-position: right;
}

.game_board > .inner > .item.f_4.c_2{
background: url(../img/futon_blue_4.png) no-repeat;
background-size: contain;
background-position: left;
}

/* 黄色布団　*/
.game_board > .inner > .item.f_1.c_3{
background: url(../img/futon_yellow_1.png) no-repeat;
background-size: contain;
background-position: bottom;
}

.game_board > .inner > .item.f_2.c_3{
background: url(../img/futon_yellow_2.png) no-repeat;
background-size: contain;
background-position: top;
}

.game_board > .inner > .item.f_3.c_3{
background: url(../img/futon_yellow_3.png) no-repeat;
background-size: contain;
background-position: right;
}

.game_board > .inner > .item.f_4.c_3{
background: url(../img/futon_yellow_4.png) no-repeat;
background-size: contain;
background-position: left;
}

/* 緑布団　*/
.game_board > .inner > .item.f_1.c_4{
background: url(../img/futon_green_1.png) no-repeat;
background-size: contain;
background-position: bottom;
}

.game_board > .inner > .item.f_2.c_4{
background: url(../img/futon_green_2.png) no-repeat;
background-size: contain;
background-position: top;
}

.game_board > .inner > .item.f_3.c_4{
background: url(../img/futon_green_3.png) no-repeat;
background-size: contain;
background-position: right;
}

.game_board > .inner > .item.f_4.c_4{
background: url(../img/futon_green_4.png) no-repeat;
background-size: contain;
background-position: left;
}


/*======================
ねこ
=======================*/
.neko {
width: calc( 100% / 9 );
height:  calc( 100% / 9 );
position: absolute;
transition: all 500ms 0s ease;
}

/*======================
方向を決めるボタン
=======================*/
.move_d input {
display: none;
}

.move_d {
width: calc( 100% / 9 );
height: calc( 100% / 9 );
position: absolute;
}

.move_d input + label {
width: 100%;
height: 100%;
display: block;
position: relative;
}

.move_d input:checked + label {
display: block;
content: "";
background: rgba(45,51,74,.6);
}

.move_d input + label::before {
font-size: 3.0rem;
font-weight: bold;
color: #FFF;
display: block;
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
}

.move_d.d_1 input + label::before,
.move_d.d_2 input + label::before,
.move_d.d_3 input + label::before,
.move_d.d_4 input + label::before {
content: "";
display: block;
width: 20%;
height: 20%;
border-top: .1em solid #FFFFFE;
border-left: .1em solid #FFFFFE;
}

.move_d.d_1 input + label::after,
.move_d.d_2 input + label::after,
.move_d.d_3 input + label::after,
.move_d.d_4 input + label::after {
content: "";
display: block;
width: 12%;
height: 26%;
background: #FFFFFE;
position: absolute;
border-radius: .2em;
}

.move_d.d_1 input + label::before {
left: 50%;
top: 50%;
transform: translate(-50%,-50%) rotate(45deg);
}

.move_d.d_1 input + label::after {
left: 50%;
top: 55%;
transform: translate(-50%,-50%);
}

.move_d.d_2 input + label::before {
left: 50%;
top: 55%;
transform: translate(-50%,-50%) rotate(225deg);
}

.move_d.d_2 input + label::after {
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}

.move_d.d_3 input + label::before {
left: 50%;
top: 50%;
transform: translate(-50%,-50%) rotate(-45deg);
}

.move_d.d_3 input + label::after {
left: 55%;
top: 50%;
transform: translate(-50%,-50%) rotate(90deg);
}

.move_d.d_4 input + label::before {
left: 50%;
top: 50%;
transform: translate(-50%,-50%) rotate(135deg);
}
.move_d.d_4 input + label::after {
left: 45%;
top: 50%;
transform: translate(-50%,-50%) rotate(90deg);
}


/*======================
ふとんの配置を決めるボタン
=======================*/
.futon_btn input {
display: none;
}

.futon_btn {
width: calc( 100% / 9 );
height: calc( 100% / 9 );
position: absolute;
top: 0;
}

.futon_btn input + label {
width: 100%;
height: 100%;
display: block;
position: relative;
}

.futon_start .futon_btn input + label {
background: rgba(45,51,74,.4);
border: solid .15em #2d334a;
}

.futon_end .futon_btn input + label {
background: rgba(255,255,255,.6);
}

.futon_btn input:checked + label {
display: block;
content: "";
}

.futon_start .futon_btn input:checked + label {
background: rgba(255,255,255,.8);
}

.futon_end .futon_btn input:checked + label {
background: rgba(255,255,255,.8);
}


/*======================
縦横の位置
=======================*/
/* 縦位置 */
.ver_0 {
top: 0%;
}
.ver_1 {
top: 11.11%;
}
.ver_2 {
top: 22.22%;
}
.ver_3 {
top: 33.33%;
}
.ver_4 {
top: 44.44%;
}
.ver_5 {
top: 55.55%;
}
.ver_6 {
top: 66.66%;
}
.ver_7 {
top: 77.77%;
}
.ver_8 {
top: 88.88%;
}

/* 横位置 */
.hor_0 {
left: 0;
}
.hor_1 {
left: 11.11%;
}
.hor_2 {
left: 22.22%;
}
.hor_3 {
left: 33.33%;
}
.hor_4 {
left: 44.44%;
}
.hor_5 {
left: 55.55%;
}
.hor_6 {
left: 66.66%;
}
.hor_7 {
left: 77.77%;
}
.hor_8 {
left: 88.88%;
}

/*======================
コントロールボックス
=======================*/
.control_box {
background: #feefe8;
max-width: 75em;
width: 90%;
margin: 1em auto 0;
display: flex;
padding: 1em 1em 1em 2em;
justify-content: space-between;
align-items: center;
min-height: 7.2em;
}

.control_box .txt {
font-size: 1.4rem;
}

/*======================
サイコロをふるボタン
=======================*/
.btn_box {
text-align: center;
}

#roll_btn {
font-size: 1.2rem;
display: inline-block;
color: #FFF;
height: 50px;
line-height: 50px;
padding: 0 .5em;
border-radius: .5em;
cursor: pointer;
/*background: #272343;*/
width: 50px;
background: url(../img/dice_4.svg) no-repeat;
}

#roll_btn.disabled {
pointer-events: none;
}


/*======================
プレイヤーボード
=======================*/
.player_board {
max-width: 75em;
width: 90%;
margin: 1em auto 0;
display: flex;
flex-wrap: wrap;
gap: 1em;
}

.player {
background: #f8f5f2;
width: calc(50% - .5em);
display: flex;
flex-wrap: nowrap;
padding: 1.5em;
align-items: center;
border-radius: .5em;
gap: 1em;
}

.player_name {
/*width: 100%;*/
font-size: 1.1rem;
display: flex;
flex-direction: column;
align-items: center;
margin-right: auto;
}

/* ねこアイコンの共通設定 */
.player_name .icon {
display: block;
width: 3em;
height: 3em;
border-radius:50%;
/*border: solid .2em #CCC;*/
background-position: center 10%;
background-size: 6em;
margin: 0 0 .4em;
}

/* プレイヤーごとのねこアイコン */
.player_1 .player_name .icon {
background-image: url("../img/icon_neko_1.png");
}
.player_2 .player_name .icon {
background-image: url("../img/icon_neko_2.png");
}
.player_3 .player_name .icon {
background-image: url("../img/icon_neko_3.png");
}
.player_4 .player_name .icon {
background-image: url("../img/icon_neko_4.png");
}

.player .player_futon,
.player .player_koban {
display: flex;
align-items: center;
flex-wrap: nowrap;
gap: 0 .2em;
margin: 1em 0 0;
}

/* ふとんアイコンの共通設定 */
.player_futon .icon {
content: "";
display: block;
width: 3em;
height: 1.5em;
background-size: contain;
background-repeat: no-repeat;
}

/* プレイヤーごとのふとんアイコン */
.player_1 .player_futon .icon {
background-image: url("../img/futon_red.png");
}
.player_1 .player_futon.c_3 .icon {
background-image: url("../img/futon_yellow.png");
}
.player_2 .player_futon .icon {
background-image: url("../img/futon_blue.png");
}
.player_2 .player_futon.c_4 .icon {
background-image: url("../img/futon_green.png");
}
.player_3 .player_futon .icon {
background-image: url("../img/futon_yellow.png");
}
.player_4 .player_futon .icon {
background-image: url("../img/futon_green.png");
}

/* 小判アイコン */
.player_koban .icon {
content: "";
display: block;
width: 2em;
height: 1.5em;
background-size: contain;
background-image: url("../img/img_koban.svg");
background-repeat: no-repeat;
}

.player .player_futon .num,
.player .player_koban .num {
font-size: 1.4rem;
font-weight: bold;
}

/* 4人未満プレイのときのプレイヤー非表示 */
.player.disabled {
display: none;
}

/*======================
 小判の移動画面
=======================*/
.point_change_box {
display: none;
background: rgba( 0, 0, 0, .6);
width: 100%;
min-height: 100vh;
position: absolute;
top: 0; left: 0;
position: fixed;
z-index: 99;
animation: fadeIn .5s ease 0s 1 normal;
}

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

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

#ok_btn {
margin: 2em 0 0;
}

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

.point_change_box ul {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 2em;
}

.point_change_box ul li .icon {
display: block;
width: 4em;
height: 4em;
border-radius:50%;
border: solid .2em #CCC;
background-position: center 10%;
background-size: 8em;
margin: 0 0 .4em;
}

.player_1 i.icon {
background-image: url("../img/icon_neko_1.png");
}

.player_2 i.icon {
background-image: url("../img/icon_neko_2.png");
}

.player_3 i.icon {
background-image: url("../img/icon_neko_3.png");
}

.player_4 i.icon {
background-image: url("../img/icon_neko_4.png");
}

.point_change_box ul li.arrow {
width: 1em;
height: 1em;
border-left: .2em #CCC solid;
border-top: .2em #CCC solid;
transform: rotate(135deg);
}

.change_point {
width: 100%;
font-size: 1.4rem;
}

.change_point span {
font-size: 1.8rem;
margin: 0 .5em;
}

/*======================
 きまぐれモード発生画面
=======================*/
.moody_cat_box {
display: none;
background: rgba( 0, 0, 0, .6);
width: 100%;
min-height: 100vh;
position: absolute;
top: 0; left: 0;
position: fixed;
z-index: 99;
animation: fadeIn .5s ease 0s 1 normal;
}

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

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

.moody_cat_box ul li .icon {
display: block;
width: 4em;
height: 4em;
border-radius:50%;
border: solid .2em #CCC;
background-position: center 10%;
background-size: 8em;
margin: 0 auto .4em;
}

.moody_cat_box ul li span {
display: block;
margin: 0 auto .4em;
}

#no_btn {
margin: 2em 0 0;
}

#no_btn span {
font-size: 1.6rem;
display: inline-block;
height: 50px;
line-height: 50px;
border-radius: .5em;
cursor: pointer;
padding: 0 3em;
background: #2d334a;
color: #FFF;
font-weight: bold;
}

/*======================
 勝利画面　※※　削除予定　※※
=======================*/
/*.win_box {
display: none;
background: rgba( 0, 0, 0, .6);
width: 100%;
min-height: 100vh;
position: absolute;
top: 0; left: 0;
position: fixed;
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: 50%; left: 50%;
transform: translate(-50%, -50%);
z-index: 100;
}

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

#quit_btn {
margin: 2em 0 0;
}

#quit_btn span {
font-size: 1.6rem;
display: inline-block;
height: 50px;
line-height: 50px;
border-radius: .5em;
cursor: pointer;
padding: 0 3em;
background: #8c7851;
color: #FFF;
font-weight: bold;
}

.win_box ul {
margin: 2em 0 0;
text-align: center;
}

.win_box ul li .icon {
display: block;
width: 6em;
height: 6em;
border-radius:50%;
border: solid .2em #CCC;
background-position: center 10%;
background-size: 10em;
margin: 0 auto .4em;
}

.win_box ul li.mssg {
width: 100%;
font-size: 1.6rem;
margin: .5em 0 0;
}*/

/*======================
 結果画面
=======================*/
.result_box {
display: none;
background: rgba( 0, 0, 0, .6);
width: 100%;
min-height: 100vh;
position: absolute;
top: 0; left: 0;
position: fixed;
z-index: 99;
animation: fadeIn .5s ease 0s 1 normal;
}

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

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

.score_list {
width: 100%;
margin: 1em 0 0;
}

.score_list td {
padding: .5em;
vertical-align: middle;
}

.score_list td.result_player_name {
width: 6em;
position: relative;
}

.winner td.result_player_name::before {
content: "";
display: block;
width: 1.4em;
height: 1.4em;
background-size: contain;
background-image: url("../img/icon_winner.svg");
background-repeat: no-repeat;
position: absolute;
top: .2em;
left: 50%;
transform: translateX(-50%);
}

.score_list tr {
border-bottom: 1px solid #EEE;
display: flex;
}

.score_list tr:first-child {
border-top: 3px solid #2d334a;
}

.score_list tr:last-child {
border-bottom: 3px solid #2d334a;
}

#quit_btn {
margin: 2em 0 0;
}

#quit_btn span {
font-size: 1.6rem;
display: inline-block;
height: 50px;
line-height: 50px;
border-radius: .5em;
cursor: pointer;
padding: 0 3em;
background: #8c7851;
color: #FFF;
font-weight: bold;
}

.result_player,
.result_player_futon,
.result_player_koban {
display: flex;
align-items: center;
}

.result_player_name {
font-size: 1.1rem;
display: flex;
flex-direction: column;
align-items: center;
margin-right: auto;
}

/* ねこアイコンの共通設定 */
.result_player_name .icon {
display: block;
width: 3em;
height: 3em;
background-position: center 10%;
background-size: 6em;
margin: 0 0 .4em;
}

/* プレイヤーごとのねこアイコン */
.result_player_1 .result_player_name .icon {
background-image: url("../img/icon_neko_1.png");
}
.result_player_2 .result_player_name .icon {
background-image: url("../img/icon_neko_2.png");
}
.result_player_3 .result_player_name .icon {
background-image: url("../img/icon_neko_3.png");
}
.result_player_4 .result_player_name .icon {
background-image: url("../img/icon_neko_4.png");
}

.result_player_name span {
font-size: 1.0rem;
}

/* ふとんアイコンの共通設定 */
.result_player_futon .icon {
content: "";
width: 2.6em;
height: 1.2em;
background-size: contain;
background-repeat: no-repeat;
display: flex;
align-items: center;
flex-wrap: nowrap;
gap: 0 .2em;
margin: 0 0 0;
}

/* プレイヤーごとのふとんアイコン */
.result_player_1 .result_player_futon.c_1 .icon {
background-image: url("../img/futon_red.png");
}
.result_player_1 .result_player_futon.c_3 .icon {
background-image: url("../img/futon_yellow.png");
}
.result_player_2 .result_player_futon.c_2 .icon {
background-image: url("../img/futon_blue.png");
}
.result_player_2 .result_player_futon.c_4 .icon {
background-image: url("../img/futon_green.png");
}
.result_player_3 .result_player_futon.c_3 .icon {
background-image: url("../img/futon_yellow.png");
}
.result_player_4 .result_player_futon.c_4 .icon {
background-image: url("../img/futon_green.png");
}

/* 小判アイコン */
.result_player_koban .icon {
content: "";
display: flex;
width: 2em;
height: 1.5em;
background-size: contain;
background-image: url("../img/img_koban.svg");
background-repeat: no-repeat;
}

.result_player_futon .num,
.result_player_koban .num {
font-size: 1.2rem;
}

.score_list td.total .num {
font-size: 1.6rem;
font-weight: bold;
border-left: solid 1px #000;
padding-left: .5em;
}


/*======================
 スタート画面
=======================*/
.start_box {
}

.start_box::before {
content: "";
display: block;
width: 50%;
height: 100vh;
background: url(../img/bg_shoji.png) no-repeat;
background-size: cover;
background-position: center right;
position: fixed;
top: 0;
left: 0;
}

.start_box::after {
content: "";
display: block;
width: 50%;
height: 100vh;
background: url(../img/bg_shoji.png) no-repeat;
background-size: cover;
background-position: center left;
position: fixed;
top: 0;
right: 0;
}

.start_box.close::before {
transition: all .5s;
left: -50%;
}

.start_box.close::after {
transition: all .5s;
right: -50%;
}

.start_box .inner {
font-size: 1.2rem;
line-height: 1.4em;
width: 80%;
max-width: 280px;
background: #F5F4F2;
padding: 4em 2em 3em;
text-align: center;
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
z-index: 100;
border-radius: .3em;
box-shadow: 0 .2em 1em 0 rgba(0, 0, 0, 0.25);
}

.start_box.close .inner {
top: -100vh;
transition: all 2s;
}

/*
.start_box .inner::before {
content: "";
display: block;
width: 1.8em;
height: 6em;
background: rgba(219,188,115,.9);
left: 0em; top: -1.4em;
transform: rotate(40deg);
position: absolute;
box-shadow: .1em .1em 0 0 rgba(219,188,115, 0.25);
}

.start_box .inner::after {
content: "";
display: block;
width: 1.8em;
height: 6.6em;
background: rgba(219,188,115,.9);
right: .8em; top: -2.2em;
position: absolute;
transform: rotate(-55deg);
box-shadow: -.1em .1em 0 0 rgba(219,188,115, 0.25);
}
*/

.game_title img {
width: 6em;
height: auto;
}

.game_title .title {
font-size: 1.8rem;
font-weight: bold;
margin: .5em 0 0;
letter-spacing: -.08em;
}

.start_box .inner .lead_txt {
font-size: 1.6rem;
margin: 3em 0 0;
}

.start_box .inner .play_num_select + .lead_txt {
margin: 2em 0 0;
}

#start_btn {
margin: 4em 0 0;
}

#start_btn span {
font-size: 1.6rem;
display: inline-block;
height: 50px;
line-height: 50px;
border-radius: .5em;
cursor: pointer;
padding: 0 3em;
background: #8c7851;
color: #FFF;
font-weight: bold;
}

#start_btn.disabled {
opacity: .1;
pointer-events: none;
} 

/*-- プレイ人数選択 --*/
.play_num_select {
width: 100%;
display: flex;
justify-content: center;
flex-wrap: nowrap;
gap: 1em;
}

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

.play_num_select input[type="radio"]:checked + label {
background: #2d334a;
}

.play_num_select .label_1 {
font-size: 1.4rem;
font-weight: bold;
color: #FFF;
border-radius: .5em;
background: #CCC;
padding: 1em 0;
margin: 1em 0 0;
}

.play_num_select .label_1 {
width: 33.3%;
}

/*-- プレイモード選択 --*/
.play_mode_select {
display: table;
font-size: 3.0rem;
margin: .3em auto;
}

.play_mode_select > input {
display: none;
}

.play_mode_select > label {
display: block;
position: relative;
width: 1.8em;
height: 1em;
border-radius: 1em;
background-color: #CCC;
cursor: pointer;
}
.play_mode_select > input:checked + label {
background-color: #2d334a;
}
.play_mode_select > label::before {
position: absolute;
top: 0.02em;
left: 0.04em;
width: calc(1em - 0.1em);
height: calc(1em - 0.1em);
border-radius: calc(1em - 0.1em);
background-color: #FFF;
transition: 0.5s;
content: "";
}
.play_mode_select > input:checked + label::before {
left: calc(100% - 1em + 0.06em);
}


/*-- きまぐれモードとは？ --*/
.tooltip{
position: relative;
cursor: pointer;
display: inline-block;
}
.tooltip p{
font-size: 1.1rem;
text-decoration: underline;
margin:0;
padding:0;
}
.desc {
display: none;
position: absolute;
padding: 1em;
font-size: 1.1rem;
line-height: 1.6em;
color: #FFF;
border-radius: 5px;
background: #2d334a;
width: 200%;
text-align: left;
top: 2em;
left: 50%;
transform: translate(-50%, 0);
}
.desc:before {
content: "";
position: absolute;
top: -.9em;
left: 50%;
border: .5em solid transparent;
border-bottom: .5em solid #2d334a;
transform: translate(-50%, 0);
}
.tooltip:hover p{
text-decoration: none;
}


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

/*======================
方向を決めるボタン
=======================*/
.move_d.d_1 input + label::before,
.move_d.d_2 input + label::before,
.move_d.d_3 input + label::before,
.move_d.d_4 input + label::before {
width: 20%;
height: 20%;
border-top: .15em solid #FFFFFE;
border-left: .15em solid #FFFFFE;
}

}

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

/*======================
方向を決めるボタン
=======================*/
.move_d.d_1 input + label::before,
.move_d.d_2 input + label::before,
.move_d.d_3 input + label::before,
.move_d.d_4 input + label::before {
width: 20%;
height: 20%;
border-top: .25em solid #FFFFFE;
border-left: .25em solid #FFFFFE;
}

}


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

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


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


/*======================
contents: 960px
=======================*/
/*======================
方向を決めるボタン
=======================*/
.move_d.d_1 input + label::before,
.move_d.d_2 input + label::before,
.move_d.d_3 input + label::before,
.move_d.d_4 input + label::before {
width: 20%;
height: 20%;
border-top: .3em solid #FFFFFE;
border-left: .3em solid #FFFFFE;
}


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