@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で --*/
}

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

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

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

header .inner {
width: 96%;
max-width: 420px;
margin: 0 auto 0;
display: flex;
justify-content: space-between;
gap: .5em;
}

h1 {
width: 7em;
height: auto;
margin: .1em 0 0;
position: absolute;
left: 50%;
transform: translateX(-40%);
}

.turn_box {
background: #FFF;
letter-spacing: -.1em;
font-weight: bold;
position: relative;
border: solid 2px #75cac8;
border-radius: .5em;
}

.turn_box .inner {
display: flex;
width: 6em;
}

.turn_box .ttl {
font-size: .8rem;
position: absolute;
top: .2em; left: .8em;
}

.turn_num {
font-size: 1.6rem;
position: absolute;
top: 50%; left: 50%;
transform: translate(-45%,-45%);
}

.turn span {
font-size: 1.1rem;
position: absolute;
bottom: .2em; right: .8em;
}

.logo_box {
display: flex;
}

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

#rule_btn {
display: block;
cursor: pointer;
width: 2em;
height: 2em;
border: solid 3px #000;
border-radius: 2em;
position: relative;
top: .2em; right: -5em;
}

#rule_btn::before {
content: "?";
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
}

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


/*======================
hand_table
=======================*/
.hand_table {
text-align: center;
display: flex;
width: 96%;
max-width: 420px;
margin: 1em auto 0;
gap: 1em;
}

.pip_hand,
.combi_hand {
display: flex;
width: 50%;
}

.hand_name,
.player_hand {
width: 100%;
}

.hand_table .ttl {
height: 1em;
color: #FFF;
font-size: 1.2rem;
font-weight: bold;
margin: .4em 0 0;
}

.pip_hand {
}

.combi_hand {
}

.hand_name {
width: 5em;
margin: 0 .6em 0 0;
}

.hand_name .item {
white-space: nowrap;
position: relative;
height: 3.6em;
margin: .4em 0 0 ;
}

.hand_name .item .icon {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
}

.pip_hand .hand_name .item .icon img {
width: 1.6em;
height: auto;
}

.combi_hand .hand_name .item .icon img {
width: 1.8em;
height: auto;
}

.combi_hand .hand_name .item .icon .cap {
display: block;
font-size: .8rem;
font-weight: bold;
letter-spacing: -.1em;
}

.player_hand {
padding: 0 .4em .4em;
border-radius: .8em .8em 0 0;
}

.player_hand.first {
background: #75cac8;
}

.player_hand.second {
background: #75cac8;
}

.player_hand.disabled {
pointer-events: none;
opacity: .4;
}

.player_hand.first {
margin-right: .1em;
}

.player_hand .item input {
display: none;
}

.player_hand .item input + label {
display: block;
font-size: 1.8rem;
color: #90b4ce;
height: 2.7em;
line-height: 2.7em;
background: #F1FAFA;
position: relative;
border-radius: .2em;
margin: .4em 0 0;
pointer-events: none;
}

.player_hand .item input:checked + label::before {
display: block;
content: "";
width: 100%;
height: 100%;
border: solid .2em #ff1187;
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
border-radius: .2em;
}

.player_hand .item.actv input + label {
color: #272343;
font-weight: bold;
background: #FFF;
pointer-events: auto;
}

.sum_ttl {
position: relative;
height: 3.6em;
margin: 1em 0 0;
}

.sum_item {
position: relative;
height: 3.6em;
margin: 1em 0 0;
}

.pip_hand .sum_item {
background: #F1FAFA;
}

.combi_hand .sum_item {
background: #ffffe9;
}

.sum_ttl .txt {
font-size: 1rem;
font-weight: bold;
letter-spacing: -.05em;
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
}

.sum_ttl .txt .bonus_num {
display: block;
font-size: 1.6rem;
}

.subtotal_ttl {
display: block;
font-size: .8rem;
letter-spacing: .1em;
margin: 1em 0 0;
}


.sum_item .score {
font-size: 2.2rem;
color: #094067;
font-weight: bold;
letter-spacing: -.05em;
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
}

.sum_item .bonus {
font-size: 1.8rem;
letter-spacing: -.05em;
position: absolute;
top: 25%; left: 50%;
transform: translate(-50%, 0);
}

.sum_item span.subtotal {
font-size: 1rem;
font-weight: bold;
position: absolute;
bottom: .2em; left: 50%;
transform:  translate(-50%, 0);
}

/*======================
dice_box
=======================*/
.dice_box {
width: 100%;
background: #eff0f3;
padding: .8em 0;
margin: 1em 0 0;
}

.dice_box > .inner {
display: flex;
justify-content: center;
gap: .5em;
}

.dice_item {
position: relative;
}

.dice_item input {
display: none;
}

.dice_item input + label {
display: block;
width: 3.4em;
height: 3.4em;
position: relative;
}

/*-- ホールドした状態 --*/
.dice_item input:checked + label::after {
display: block;
content: "HOLD";
position: absolute;
left: 50%;
top: -2.2em;
background: #ff1187;
transform: translateX(-50%);
padding: .5em;
color: #FFF;
font-size: .8rem;
font-weight: bold;
text-align: center;
border-radius: 2em;
}

.dice_item input:checked + label::before {
display: block;
content: "";
width: 3.2em;
height: 3.2em;
border: solid .2em #ff1187;
border-radius: 1em;
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
}

/*======================
btn_box
=======================*/
.btn_box {
width: 90%;
max-width: 420px;
margin: 1em auto 0;
display: flex;
gap: .5em;
}

.btn_item {
font-size: 1.6rem;
text-align: center;
font-weight: bold;
display: block;
color: #FFF;
border-radius: .4em;
padding: 1em 0;
cursor: pointer;
}

#roll_btn {
width: 100%;
background: #2d334a;
}

/*-- サイコロをふるボタンを無効にする --*/
#roll_btn.disabled {
pointer-events: none;
opacity: .4;
}

#select_btn {
width: 7em;
background: #ff1187;
}

/*-- 決定ボタンを非表示にする --*/
#select_btn.disabled {
display: none;
}

/*======================
 終了画面
=======================*/
.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: #2d334a;
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: #8c7851;
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: #2d334a;
color: #FFF;
font-weight: bold;
}

/*======================
 ルール画面
=======================*/
.rule_box {
display: none;
background: rgba( 255, 255, 255, 1);
width: 100%;
height: 100vh;
position: absolute;
top: 0; left: 0;
z-index: 99;
}

.rule_box .inner {
font-size: 1.2rem;
line-height: 1.4em;
width: 96%;
max-width: 400px;
background: #FFF;
padding: 2em;
text-align: left;
position: absolute;
top: 0em; left: 50%;
transform: translate(-50%, 0);
z-index: 100;
}

.close_btn {
position: absolute;
font-size: 3.6rem;
top: .5em; right: .5em;
cursor: pointer;
}

.rule_box .inner .point {
font-size: 1.1rem;
width: 100%;
border: solid 2px #75cac8;
border-radius: .5em;
padding: .8em 1em;
color: #75cac8;
margin: .5em 0 0;
}

.rule_box .inner p {
color: #75cac8;
font-size: 1.3rem;
font-weight: bold;
margin: 1em 0 0;
}

.rule_box .inner p:first-child {
margin: 0;
}

.rule_box .inner ul li {
text-indent: -1em;
padding-left: 1em;
}

.rule_box .inner ul li::before {
content: "・";
}

.rule_box .inner dl dt {
font-weight: bold;
margin: .5em 0 0;
}

.rule_box .inner dl dd {
text-indent: -1em;
padding-left: 1em;
}

.rule_box .inner dl dd::before {
content: "・";
}

@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 //--*/
}