@charset "UTF-8";

SPAN{
	font-weight: 700;
}

table {
    border-collapse: collapse;
    margin: auto;
}

body {
    font-family: "ＭＳ ゴシック" ;
}

button {
    width: 12em;
    height: 1.5em;
}
button.horizontal {
    padding-left: 1em;
    padding-right: 1em;
    height: 3em;
}

input[type="text"],input[type="date"]{
    border:1px solid #ccc;
    width:150px;
    font-family:sans-serif;
    font-size: 16px;
}

#kisu {
    width:30px;
    visibility: hidden;
}
#cycle1 {
    width:35px;
    visibility: hidden;
}
#cycle2 {
    width:35px;
    visibility: hidden;
}

#furigana {
    width:320px;
}

input[type="text"]:focus,
input[type="date"]:focus {
    background: #faf4e2;
}

#tbl-bdr table,#tbl-bdr td,#tbl-bdr th {
    border-collapse: collapse;
    border:1px solid #333;
}

#indata {
    margin: 5;
    padding: 5;
    list-style: disc;
}

#info {
    padding: 1em;
}

ul{
    padding-left:0;
}

li{
    list-style:none;
}

th,td {
    white-space:nowrap;
}

/*
tr.shousai {
    visibility: collapse;
}
*/
tr.shousai {
    display: block;
}

.collapse_right  {
    visibility: collapse;
}

.cell {
    width: 15px;
    height: 15px;
    text-align: center;
    font-size: 12px;
    background-color: white;
    position: relative; /* 子要素（::before, ::after）の基準位置にする */
}

/* バツ記号のスタイル */
.cell.x::before {
    content: '❌'; /* 表示する記号 */
    color: red;
    font-weight: bold;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 中央寄せ */
}

/* マル記号のスタイル */
.cell.o::before {
    content: '◯'; /* 表示する記号 */
    color: blue;
    font-weight: bold;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 中央寄せ */
    font-size: 15px;
}

/* バツとマルが重なる場合のスタイル */
.cell.xo::before {
    content: '❌';
    color: red;
    font-weight: bold;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.cell.xo::after {
    content: '◯';
    color: blue;
    font-weight: bold;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 15px;
}

#select_datalist {
    display:flex;
    justify-content:center;
}


#csv_file {
    display:none
}

.modal {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.modal .inner {
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.9);
}

#dialog {
    width: 200px;
    margin: auto;
    margin-top: 4vh;
    padding: 30px 20px;
    display: none;
    text-align: center;
    border: 1px solid #aaa;
    box-shadow: 2px 2px 4px #888;
}

.tile {
    width: 15px;
    height: 15px;
    border: 1px solid blue;
    border-radius: 1px;
    text-align: center;
    font-size: 12px;
    background-color: white;
    box-shadow: rgb(128, 128, 128) 1px 1px;
}
.tile2 {
    width: 15px;
    height: 15px;
    text-align: center;
    font-size: 12px;
    background-color: white;
}