/*====================================================================================================
全般
=====================================================================================================*/

body {
    font-family: 'DotGothic16', sans-serif;
    background: rgba(0,0,0,0.7);
    color:#fff;
    margin:0;
}

/* 言語制御 */
body.ja .lang-en { display: none; }
body.ja .cell {
    word-break: normal;
    overflow-wrap: break-word;
    line-break: auto;
}

body.en .lang-ja { display: none; }

/* グリッド*/
.grid{
    display:grid;
    width:min(90vw, 90vh);
    height:min(90vw, 90vh);
    aspect-ratio:1/1;
    grid-template-columns:repeat(3, 1fr);
    grid-template-rows:repeat(3, 1fr);
    gap:12px;
    margin:8px auto;
}

/* カード */
.cell{
    overflow:auto;
    scrollbar-width: none;
    padding:16px;
    border-radius:12px;
    line-height:1.6;
    position: relative;
}
.cell::-webkit-scrollbar{
    display:none;
}


/* 色 */
.green{
    background:rgba(0,238,0,0.25);
}
.black{
    background:rgba(0,0,0,0.6);
}

/* extra中央 */
.extra{
    display:flex;
    align-items:center;
    justify-content:center;
}

/* タイトル */
.title{
    color:#FFEE00;
    text-align:center;
}

/* リンク*/
.cell a {
    color: #FFEE00;
    text-decoration: none;
}
.cell a:hover {
    color: #ff9900;
    /* border-bottom: 1px solid #ff9900; */
}

.link-item{
    display:flex;
    align-items:center;
    gap:8px;
}

.link-text{
    border-bottom: 1px dashed currentColor;
}

.link-item:hover .link-text{
    border-bottom: 1px solid #ff9900;
}

/*====================================================================================================
ヘッダーとフッター
=====================================================================================================*/

.header {
    text-align: right;
    padding: 2px 12px 2px 0;
    margin: 0;
}
.header p { margin: 0; }
.header a {
    color: #ffffff;
    text-decoration: none;
    border-bottom: 1px dashed currentColor;
}
.header a:hover {
    color: #ff9900;
    border-bottom: 1px solid #ff9900;
}

.footer {
    text-align: center;
    margin:4px 0 4px;
    padding: 0;
    font-size: 0.85em;
}
.footer p { margin: 0; }
.footer a {
    color: #ffffff;
    text-decoration: none;
    border-bottom: 1px dashed currentColor;
}
.footer a:hover {
    color: #ff9900;
    border-bottom: 1px solid #ff9900;
}