@charset "UTF-8";
/*====================================
/*
/* BASE
/*
/*===================================*/
html{
height: 100dvh;/*-- フッターを最下部に固定するための指定 --*/
font-size: 62.5%; /*-- ベースのフォントサイズを10pxに指定 各要素のフォントサイズ指定はremで --*/
}

body{
font-family:-apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI","Noto Sans Japanese","ヒラギノ角ゴ ProN W3", Meiryo, sans-serif;/*-- ヒラギノ・メイリオ系 --*/
color: #2D334A;
font-size: 1.4em;
-webkit-text-size-adjust: 100%;/*-- iOSのSafariで意図せずフォントサイズが大きくなるのを防ぐ --*/
min-height: 100vh; /*-- フッターを最下部に固定するための指定 --*/
display: flex; /*-- フッターを最下部に固定するための指定 --*/
flex-direction: column; /*-- フッターを最下部に固定するための指定 --*/
width: 100%;
height: 100dvh;
background: #FFFFFE;
animation: fadeIn 3s ease 0s 1 normal;
-webkit-animation: fadeIn 3s ease 0s 1 normal;
}

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

/* iPhoneでズームされないように、16px以上の大きさにする */
input, textarea, select, option{
font-size:1.6rem;
}


/*====================================
/*
/* HEADER
/*
/*===================================*/
.header {
background: #000;
color: #FFF;
text-align: center;
z-index: 88;
position: fixed;
top: 0; left: 0; right: 0;
}

.header .inner {
height: 3em;
padding: 0 1em;
display: flex;
justify-content: center;
align-items: center;
}

.header h1 {
font-size: 1.4rem;
}

.header h1 a,
.header h1 a:link,
.header h1 a:visited,
.header h1 a:hover,
.header h1 a:active {
color: #FFF;
text-decoration: none;
}

.hd_btn_box {
display: flex;
justify-content: center;
align-items: center;
gap: 0 .5em;
margin-left: auto;
}

/*====================================
/*
/* FOOTER
/*
/*===================================*/
.footer {
background: #000;
text-align: center;
font-size: 1.1rem;
padding: 2em;
color: #FFF;
}

.footer a,
.footer a:link,
.footer a:visited,
.footer a:hover,
.footer a:active {
color: #FFF;
}

.footer a:hover,
.footer a:active {
text-decoration: none;
}

/*====================================:
/*
/* COMMON
/*
/*===================================*/
button {
white-space: nowrap;
cursor: pointer;
text-align:center;
display: inline-block;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding: 0;
border: none;
outline: none;
background: transparent;
}

button:hover {
opacity: 0.8;
}

button.btn {
color: #2D334A;
font-size: 1.6rem;
font-weight: bold;
position: relative;
display: inline-block;
transition: transform 0.3s;
text-align: center;
margin: 1em  0 0;
padding: 0;
border-radius: 1rem;
}

button.btn.popup_close {
display: none;
color: #FFF;
margin: 0;
}

button.btn.alert_ok {
color: #FFF;
margin: .5em auto 0;
display: block;
}

.btn_box {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}

button.btn:before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: (100% - .15em);
height: 84%;
content: "";
transition: transform 0.3s;
transform: translate3d(0, 0.75rem, -1rem);
border: .15em solid #000;
border-radius: inherit;
box-shadow: 0 0.3rem 0 0 rgba(0, 0, 0, 0.2);
}

button.btn.card_open:before {
background: #ccc100;
}

button.btn.popup_close:before,
button.btn.alert_ok:before {
background: #ad4d6b;
}

button.btn span {
position: relative;
display: block;
padding: .5em 1em;
transition: transform 0.3s;
border: .15em solid #000;
border-radius: inherit;
}

button.btn.card_open span {
background: #fff100;
}

button.btn.popup_close span,
button.btn.alert_ok span {
background: #ee2563;
}

button.btn:hover {
transform: translate(0, 0.25rem);
}

button.btn.card_open:hover {
background: #fff100;
}

button.btn.popup_close:hover {
background: #ee2563;
}

button.btn:hover:before {
transform: translate3d(0, 0.5rem, -1rem);
box-shadow: 0 0.2rem 0 0 rgba(0, 0, 0, 0.2);
}

button.btn:active {
transform: translate(0rem, 0.75rem);
}

button.btn:active:before {
transform: translate3d(0, 0, -1rem);
box-shadow: 0 0.2rem 0 0 rgba(0, 0, 0, 0.2);
}

/*====================================:
/*
/* CONTENTS
/*
/*===================================*/
.contents {
padding: 4em 0 2em;
position: relative;
/*display: flex;
justify-content: center;
align-items: center;
*/
}

.contents.setting {
flex-direction: column;
}

.card_count {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
background: #FCFBE9;
text-align: center;
padding: 1em;
margin: 1em auto;
}

.card_count p {
font-size: 1.2rem;
font-weight: bold;
}

#total {
font-size: 1.2rem;
}

#now {
font-size: 1.6rem;
font-weight: bold;
}

.custom_on {
font-size: 1.1rem;
color: #FFF;
font-weight: bold;
background: #E2911D;
padding: .5em 1em;
border-radius: .4rem;
display: inline-block;
position: absolute;
top: 5em;
right: 1em;
}


/*-- 
ゲームボード
--*/
#game_board {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}

/*-- 
手番表示 
--*/
#turn_box {
width: 100%;
margin: 0 auto 1em;
display: flex;
justify-content: space-between;
align-items: center;
gap: 0 1em;
}

.turn {
cursor: pointer;
opacity: .2;
font-size: 1.1rem;
padding: 1em 1.8em;
border: solid .3rem #CCC;
border-radius: 1rem;
}

.turn.actv {
opacity: 1;
border: solid .3rem #E2911D;
}

.turn span::before {
display: block;
content: "";
border-radius: 50%;
margin: 0 0 .4em;
width: 2em;
height: 2em;
}

#black_turn span::before {
border: solid .3rem #000;
background: #000;
}

#white_turn span::before {
border: solid .3rem #000;
background: #FFF;
}

/*-- 
山札 
--*/
#decks {
display: flex;
flex-wrap: nowrap;
gap: 0 1em;
justify-content: center;
}

.deck {
width: 10em;
height: auto;
aspect-ratio: 6 / 9.9;/*-- カードの縦横比 --*/
background: url(../img/img_card_stock.png) no-repeat center;
background-size: contain;
}

.stocks {
/*width: 5em;*/
margin: .5em 0 0;
}

/*-- 
ポップアップ
--*/
.popup_box {
background: rgba( 0, 0, 0, .76);
width: 100%;
min-height: 100dvh;
position: absolute;
top: 0; left: 0;
position: fixed;
z-index: 99;
animation: fadeIn .5s ease 0s 1 normal;
display: none;
}

.alert_content {
text-align: center;
background: #FFF;
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
z-index: 100;
padding: 2em;
border-radius: 1.5rem;
}

.alert_content .mssg {
font-size: 2.0rem;
color: #EE2763;
font-weight: bold;
}

.alert_content p {
white-space: nowrap;
font-size: 1.3rem;
line-height: 1.3em;
margin: 1em 0 0;
}

.alert_content img {
width: 60%;
max-width: 10em;
margin: 1em auto 0;
}

.popup_contents {
width: 60%;
max-width: 16em;
text-align: center;
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
z-index: 100;
padding: 4em 0;
}

/*-- 
カード
--*/
.card {
position: relative;
margin: 0 auto;
aspect-ratio: 6 / 9.9;/*-- カードの縦横比 --*/
}

.card .back,
.card .front {
transition: all 1.5s;
position: absolute;
left: 0; top: 0;
height: 100%;
width: 100%;
backface-visibility: hidden;
border-radius: 1rem;
box-shadow: 0 0 .5rem rgba( 0, 0, 0, .4);
border: solid .3rem #000;
}

.card .front {
transform: rotateY(-180deg);
background: url(../img/img_card_front.jpg) no-repeat center;
background-size: cover;
display: flex;
align-items: center;
justify-content: center;
text-align: left;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
font-size: 2.4rem;
font-weight: bold;
line-height: 1.4em;
padding: 1.5em 0;
}

.card .front.kara {
background: url(../img/img_card_front_kara.jpg) no-repeat center;
background-size: cover;
}

.card .back {
background: url(../img/img_card_back.jpg) no-repeat center;
background-size: cover;
}

.card.rot .back {
transform: rotateY(180deg);
}

.card.rot .front {
transform: rotateY(0);
}

.stock {
width: 100%;
aspect-ratio: 6 / 9.9;/*-- カードの縦横比 --*/
position: relative;
/*border: dotted 1px #CCC;*/
border-radius: .5rem;
}

.stock .card {
cursor: pointer;
position: absolute;
width: 100%;
}

.stock .card .front {
font-size: 1.0rem;
padding: 1.2em .5em;
line-height: 1.2em;
letter-spacing: -.1em;
font-weight: normal;
border-radius: .5rem;
box-shadow: 0 0 0 rgba( 0, 0, 0, .4);
border: solid .25rem #000;
}

.slide{
animation: SlideIn 0.8s;
}

@keyframes SlideIn {
0% {
  opacity: 0;
  transform: translateY(30%);
}
100% {
  opacity: 1;
  transform: translateY(0);
}
}

/*======================
おたからカスタマイズ画面
=======================*/
form {
width: 100%;
}

/*--------------------
form reset
--------------------*/
input,
button,
textarea,
select {
/* デフォルトスタイルをリセット */
-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;
}

/* スピンボタン非表示 chrome,safari */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button,
input[type="month"]::-webkit-outer-spin-button,
input[type="month"]::-webkit-inner-spin-button,
input[type="datetime-local"]::-webkit-outer-spin-button,
input[type="datetime-local"]::-webkit-inner-spin-button,
input[type="week"]::-webkit-outer-spin-button,
input[type="week"]::-webkit-inner-spin-button,
input[type="time"]::-webkit-outer-spin-button,
input[type="time"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-outer-spin-button,
input[type="date"]::-webkit-inner-spin-button {
/*-webkit-appearance: none;
margin: 0;*/
display: none;
}

/* スピンボタン非表示(firefox) */
input[type="number"],
input[type="month"],
input[type="datetime-local"],
input[type="week"],
input[type="time"],
input[type="date"] {
-moz-appearance: textfield;
}

/* クリアボタン非表示 */
input[type="date"]::-webkit-clear-button,
input[type="month"]::-webkit-clear-button,
input[type="datetime-local"]::-webkit-clear-button,
input[type="time"]::-webkit-clear-button,
input[type="week"]::-webkit-clear-button {
-webkit-appearance: none;
}

/*------------------------
 input common
-------------------------*/
/* input */
input {
/* inputの枠線を消す */
border: 1px solid transparent;
transition: border 0.2s ease-out;
/* 文字色を親から継承 */
color: inherit;
/*inputのフォーカス時の枠線を消す*/
outline: 0;
}

/* inputにフォーカスが当たっている時 */
input:focus {
border: .2rem solid #FC9E3A;
}


/*------------------------
プレースホルダーの色
-------------------------*/
/* placeholderの文字色指定 */
input::placeholder,
textarea::placeholder {
color: #CCC;
font-weight: 300;
}

/* IE (疑似クラスで指定) */
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
color: #CCC;

}

/* Edge (疑似要素で指定)*/
input::-ms-input-placeholder,
textarea::-ms-input-placeholder {
color: #CCC;
}

/*------------------------
chrome用
-------------------------*/
/* auto complete(chrome) */
input:-webkit-autofill {
/* 背景色(background-colorではなくbox-shadow) */
-webkit-box-shadow: 0 0 0 1000px #eee inset;

/* 文字色(colorではなく-webkit-text-fill-color) */
-webkit-text-fill-color: #333 !important;
}

/*------------------------
セレクトボックス
-------------------------*/
.tresure_num {
position: relative;
}

.tresure_num::before,
.tresure_num::after {
position: absolute;
content: '';
pointer-events: none;
}

.tresure_num::before {
display: inline-block;
right: 0;
width: 2em;
height: 2.8em;
background-color: #FC9E3A;
right: .5em;
}

.tresure_num::after {
position: absolute;
top: 50%;
right: 1.5em;
transform: translate(50%, -50%) rotate(45deg);
width: .6rem;
height: .6rem;
border-bottom: .3rem solid #fff;
border-right: .3rem solid #fff;
}

.tresure_num select {
min-width: 6em;
height: 2.8em;
padding: .4em 3em .4em 1.5em;
border: none;
background-color: #f7f7f7;
color: #333;
font-size: 1em;
}

.tresure_num select:focus {
outline: .2rem solid #FC9E3A;
}

.tresure_dtl input[type="text"] {
width: 100%;
background: #F7F7F7;
padding: .5em;
}

/*------------------------
おたからをカスタマイズボタン
-------------------------*/
.custom_box {
width: 100%;
background: #F7F7F7;
padding: 1em 0;
text-align: center;
}

.custom_box a,
.custom_box a:link,
.custom_box a:visited {
display: inline-block;
color: #FFF;
font-weight: bold;
font-size: 1.2rem;
line-height: 1em;
background: #000;
text-decoration: none;
padding: .5em 2em;
border-radius: 100vh;
/*border: solid .2rem #000;*/
}

.custom_box a:hover,
.custom_box a:active {
color: #FFF;
text-decoration: none;
opacity: .6;
}

/*------------------------
おたからをカスタマイズ画面
-------------------------*/
.page_ttl {
text-align: center;
margin: 2em 0 0;
}

.comment_box {
width: 90%;
max-width: 640px;
margin: 1em auto 0;
line-height: 1.4em;
}

.treasure_set_box {
width: 90%;
max-width: 640px;
margin: 1.5em auto 0;
border: solid 1px #888;
}

.ttl_tresure_num,
.ttl_tresure_dtl {
padding: .5em;
vertical-align: middle;
background: #F7F7F7;
border: solid 1px #888;
}

.tresure_num {
padding: .5em;
vertical-align: middle;
border: solid 1px #888;
text-align: center;
}

.tresure_dtl {
padding: .5em;
vertical-align: middle;
border: solid 1px #888;
font-size: 1.6rem;
line-height: 1.4em;
}


.treasure_set_box tr,
.treasure_set_box td {
border: solid 1px #888;
}

.total_tresure_box {
border: dotted 1px #CCC;
padding: 1em;
width: 96%;
max-width: 480px;
margin: 1em auto 0;
}

.total_tresure {
line-height: 1.4em;
}

.total_tresure span {
font-size: 1.6rem;
font-weight: bold;
}

.start_btn_box {
text-align: center;
margin: 1em 0 0;
}

.start_btn_box02 {
text-align: right;
margin: .5em;
}

.start_btn {
cursor: pointer;
font-size: 1.2rem;
line-height: 1em;
font-weight: bold;
color: #FFF;
background: #000;
text-decoration: none;
padding: .5em 2em;
border-radius: 100vh;
margin: 1em 0;
}

/*======================
 ルール画面
=======================*/
/*#rule_btn {
display: inline-block;
cursor: pointer;
border: solid .1rem #FFF;
border-radius: 2em;
padding: .2em .8em;
font-size: 1.2rem;
}*/

.rule_box li {
list-style: none;
}

.rule_box {
width: 100%;
height: 100%;
min-height: 100vh;
position: absolute;
top: 3em; 
left: -100%;
right: 0;
bottom: 0;
z-index: 99;
background: #FFF;
transition: all .5s ease;
z-index: 77;
}

.rule_box.open {
left: 0;
}

.close_btn {
color: #FFF;
display: inline-block;
text-align: center;
position: absolute;
top: 1rem;
right: 1rem;
font-size: 3.6rem;
width: 1em;
height: 1em;
line-height: .8em;
background: #000;
z-index: 101;
cursor: pointer;
}

.rule_box .inner {
width: 100%;
background: #FFF;
text-align: center;
z-index: 100;
position: relative;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 4em 0;
}

.rule_box .inner .article {
width: 90%;
max-width: 420px;
height: 100%;
margin: 0 auto;
line-height: 1.4em;
text-align: left;
}

.rule_box .inner img {
width: 100%;
height: auto;
margin: 1.5em 0 0;
}

.rule_box .inner .point {
border: solid 2px #FC9E3A;
border-radius: .5em;
padding: 1em;
}

.rule_box .inner h2 {
color: #FC9E3A;
font-size: 1.3rem;
font-weight: bold;
}

.rule_box .inner h3 {
color: #FC9E3A;
font-size: 1.3rem;
font-weight: bold;
margin: 1.5em 0 0;
}

.rule_box .inner p {
text-align: left;
font-size: 1.1rem;
line-height: 1.4em;
margin: .5em 0 0;
}

.rule_box .inner .point p {
width: 100%;
}

.rule_box .inner ul,
.rule_box .inner ol {
margin: .5em 0 0;
text-align: left;
}

.rule_box .inner ol{
counter-reset: item;
list-style-type: none;
padding-left: .2em;
}

.rule_box .inner li {
font-size: 1.1rem;
text-indent: -1.3em;
padding-left: 1.3em;
}

.rule_box .inner li:before {
counter-increment: item;
content: counter(item)'.';
/* 以下は自由に装飾... */
padding-right: .5em;
font-weight: bold;
color: #FC9E3A;
}

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

/*-- 
ゲーム画面の説明
--*/
#tuto_btn {
display: inline-block;
cursor: pointer;
border: solid .1rem #FFF;
border-radius: 2em;
padding: .2em .8em;
font-size: 1.2rem;
}

#tutorial {
background: rgba( 0, 0, 0, .7);
width: 100%;
min-height: 100dvh;
position: absolute;
top: 0; left: 0;
position: fixed;
z-index: 99;
animation: fadeIn .5s ease 0s 1 normal;
display: none;
}

#tutorial .inner {
width: 100%;
min-height: 100dvh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}

#tutorial img {
max-width: 640px;
width: 96%;
}

#btn_tuto_close {
display: inline-block;
background: #FFF;
border: solid .3rem #000;
padding: .5em 1em;
text-align: center;
border-radius: 100vh;
font-weight: bold;
margin: 2em;
cursor: pointer;
}


/*======================
 設定メニュー
=======================*/
nav {
background: #FFFFFE;
height: 100vh;
position: fixed;
right: -100vw;
top: 0;
padding: 3em 0 0;
transition: all .5s ease;
z-index: 77;
}

nav.open {
right: 0;
}

.overlay {
background: rgba( 0, 0, 0, .7);
width: 100%;
min-height: 100dvh;
position: absolute;
top: 0; left: 0;
position: fixed;
display: none;
z-index: 66;
}

nav ul li {
list-style: none;
border-bottom: solid .1rem #EEE;
display: flex;
}

nav ul li a,
nav ul li span {
display: flex;
width: 100%;
align-items: center;
justify-content: left;
gap: 0 .4em;
padding: 1em;
cursor: pointer;
}

nav ul li a::before,
nav ul li span::before {
display: block;
content: "";
width: 1.4em;
height: 1.4em;
}

nav ul li.rule span::before {
background: url("../img/icon_rule.png") no-repeat;
background-size: contain;
}

nav ul li.custom a::before {
background: url("../img/icon_custom.png") no-repeat;
background-size: contain;
}

nav ul li.reset span::before {
background: url("../img/icon_reset.png") no-repeat;
background-size: contain;
}

nav ul li.home span::before {
background: url("../img/icon_home.png") no-repeat;
background-size: contain;
}

nav ul li a:hover,
nav ul li span:hover {
background: #F7F7F7;
}

#setting_btn {
width: 1.5em;
height: 1.5em;
cursor: pointer;
}

#setting_btn img {
width: 100%;
height: auto;
}

nav a,
nav a:link,
nav a:visited,
nav a:hover,
nav a:active {
text-decoration: none;
color: inherit;
}



@media screen and (max-width: 1024px) {
/*-- media screen 1024px --*/

}

@media screen and (max-width: 768px) {
/*-- media screen 768px --*/

}