input{
    max-width: 100%;
    font-size: 200%;
}
form{
    margin: 5% 0;
}
.button {
    display       : inline-block;
    text-align    : center;      /* 文字位置   */
    cursor        : pointer;     /* カーソル   */
    padding       : 3% 3%;   /* 余白       */
    background    : #000;     /* 背景色     */
    color         : #fff;     /* 文字色     */
    line-height   : 1em;         /* 1行の高さ  */
    transition    : .3s;         /* なめらか変化 */
    border        : 2px solid #fff;    /* 枠の指定 */
    margin: 2%;
    font-size: 1.5em;
}
.button:hover {
    color         : #000;     /* 背景色     */
    background    : #fff;     /* 文字色     */
}
.button:disabled {
    color         : #fff;     /* 背景色     */
    background    : #dcdcdc;     /* 文字色     */
    cursor:not-allowed;
}
body { 
    font-family: 'Noto Serif JP', serif;
    width: 100%;
    max-width: 1080px;
    margin: auto;
    background-color: #000;
    color: #fff;
}
#title-text{
    text-align: center;
    margin: 5% auto;
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}
#title-text h1{
    font-weight: 900;
    font-size: 6vmin;
}
#text-under-title{
    text-align: center;
    margin: 5% auto;
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    font-size: 2.3vmin;
}
.bold{
    font-weight: 500;
}
.contents-center{
    margin: 5%;
    padding: 2%;
}

.border-gray {
    border-color: rgb(92, 92, 92) !important;
}

.alert.contents-center{
    margin-top: 2%;
    margin-bottom: 2%;
    padding: 2%;
}
ol {
    padding-left: 1em;
}
.f-cards{
    cursor: pointer;
}
.t-cards{
    cursor: pointer;
}
.v-cards{
    cursor: pointer;
}
.bw-cards{
    cursor: pointer;
}
.h-cards{
    cursor: pointer;
}
.cards{
    display: inline-block;
    position: relative;
    padding: 0.5em 1.4em;
    text-decoration: none;
    background: #668ad8;/*ボタン色*/
    color: #FFF;
    border-bottom: solid 5px #36528c;/*ボタン色より暗めに*/
    border-right: solid 5px #5375bd;/*ボタン色より暗めに*/
}
.cards:before{
    content: " ";
    position: absolute;
    bottom: -5px;
    left: -1px;
    width: 0;
    height: 0;
    border-width: 0 6px 6px 0px;
    border-style: solid;
    border-color: transparent;
    border-bottom-color: #FFF;
}
.cards:after{
    content: " ";
    position: absolute;
    top: -1px;
    right: -5px;
    width: 0;
    height: 0;
    border-width: 0px 6px 6px 0px;
    border-style: solid;
    border-color: #FFF;
    border-bottom-color: transparent;
}
.cards:active{
    /*ボタンを押したとき*/
    border:none;
    -webkit-transform: translate(6px,6px);
    transform: translate(6px,6px);
}
.cards:active:after, .cards:active:before{
    content: none;/*ボタンを押すと線が消える*/
}

.avoid-click{
    pointer-events: none;
}

.transition{
    width: 100vw;
    height: 100vh;
    position: absolute;
    background-color: black;
}
.transition h1{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    color: white;
    font-size: 1.5em;
}
.relative{
    position: relative;
}
.cardList{
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    width: 75%;
    margin: auto;
    justify-content: center;
}
.cardList li{
    width: calc(100%/2);/*←画像を横に2つ並べる場合*/
    padding: 5px;/*←画像の左右に5pxの余白を入れる場合*/
    box-sizing:border-box;
    list-style: none;
}

.cardIcon{
    background-image: url(/img/villager.jpg);
    background-repeat: no-repeat;
    background-position: right;
    background-size: contain;
    width: 100%;
    height: 0;
    /* (画像の高さ / 画像の横幅) × 100 */
    padding-top: 100%;
    max-width:100%; /*画像のはみだしを防ぐ*/
    height: auto; /*画像の縦横比を維持 */
    border:solid 1px #ccc; /*←画像を1pxのグレーの枠線で囲む指定の場合*/
}
.selectable-card{
    cursor: pointer;
}
.cardIcon span{
    background-color: rgb(255, 208, 0);
    font-size: 1.5em;
}
.cardIcon.c00{
    background-image: url(/img/cards/00.jpg);
}
.cardIcon.c01{
    background-image: url(/img/cards/01.jpg);
}
.cardIcon.c02{
    background-image: url(/img/cards/02.jpg);
}
.cardIcon.c03{
    background-image: url(/img/cards/03.jpg);
}
.cardIcon.c04{
    background-image: url(/img/cards/04.jpg);
}
.cardIcon.c05{
    background-image: url(/img/cards/05.jpg);
}
.cardIcon.c06{
    background-image: url(/img/cards/06.jpg);
}
.cardIcon.c07{
    background-image: url(/img/cards/07.jpg);
}
.cardIcon.c08{
    background-image: url(/img/cards/08.jpg);
}
.cardIcon.c09{
    background-image: url(/img/cards/09.jpg);
}
.cardIcon.c10{
    background-image: url(/img/cards/10.jpg);
}

/* 番号のみ */
.cardIcon.n00{
    background-image: url(/img/num/00.jpg);
}
.cardIcon.n01{
    background-image: url(/img/num/01.jpg);
}
.cardIcon.n02{
    background-image: url(/img/num/02.jpg);
}
.cardIcon.n03{
    background-image: url(/img/num/03.jpg);
}
.cardIcon.n04{
    background-image: url(/img/num/04.jpg);
}
.cardIcon.n05{
    background-image: url(/img/num/05.jpg);
}
.cardIcon.n06{
    background-image: url(/img/num/06.jpg);
}
.cardIcon.n07{
    background-image: url(/img/num/07.jpg);
}
.cardIcon.n08{
    background-image: url(/img/num/08.jpg);
}
.cardIcon.n09{
    background-image: url(/img/num/09.jpg);
}
.cardIcon.n10{
    background-image: url(/img/num/10.jpg);
}

/* 記号アイコン */
.cardIcon.s01{
    background-image: url(/img/symbol/right-arrow.png);
    border: none;
}
div#chatArea{
    width: 100%;
    height: 30vh;
    border: solid 1px;
    overflow: auto;
    border-radius: 1vw;
}
div#chatArea ul{
    list-style: none;
    margin: 0;
    padding: 1%;
}
input#chatMessage{
    margin-top: 1%;
    font-size: 200%;
    width: 100%;
    border-radius: 1vw;
    padding: 1%;
}
input#timerNum, input#timerNumEdit{
    width: 20%;
    text-align: right;
}
ul#userList li:first-child:after{
    content: "  (ホスト)";
}
div#chatComponents{
    text-align: right;
}

div#ingamePhaseUI{
    text-align: center;
}

.selected-card{
    border:solid 5px rgb(221, 206, 69); /*←画像を1pxのグレーの枠線で囲む指定の場合*/
    transition: .3s;
}

.selected-target{
    background    : #f26846;
    transition: .3s;
}

ul{
    padding: 0;
}

.cardList-mini{
    width: 45%;
}

.cardList-verymini {
    justify-content: left;
}

.cardList-verymini li{
    width: 20%;
}

.cardList.cardListThree li{
    width: calc(100%/3)
}

.minidiv{
    display: inline-block;
    width: calc(100%/2.9);
    padding: 0;
}