body { 
    font-family: Arial, sans-serif; /* 基本フォントをArialに設定 */
    text-align: center; /* テキストを中央揃えに設定 */
    background-color: #f0f0f0; /* 背景色を薄いグレーに設定 *//* 背景色を薄いグレーに設定 *//* 背景色を薄いグレーに設定 *//* 背景色を薄いグレーに設定 *//* 背景色を薄いグレーに設定 *//* 背景色を薄いグレーに設定 *//* 背景色を薄いグレーに設定 *//* 背景色を薄いグレーに設定 *//* 背景色を薄いグレーに設定 *//* 背景色を薄いグレーに設定 *//* 背景色を薄いグレーに設定 *//* 背景色を薄いグレーに設定 *//* 背景色を薄いグレーに設定 *//* 背景色を薄いグレーに設定 *//* 背景色を薄いグレーに設定 *//* 背景色を薄いグレーに設定 *//* 背景色を薄いグレーに設定 *//* 背景色を薄いグレーに設定 *//* 背景色を薄いグレーに設定 *//* 背景色を薄いグレーに設定 *//* 背景色を薄いグレーに設定 *//* 背景色を薄いグレーに設定 *//* 背景色を薄いグレーに設定 *//* 背景色を薄いグレーに設定 *//* 背景色を薄いグレーに設定 *//* 背景色を薄いグレーに設定 *//* 背景色を薄いグレーに設定 *//* 背景色を薄いグレーに設定 */
}

.grid-container { 
    display: inline-block; /* u30a4u30f3u30e9u30a4u30f3u30d6u30edu30c3u30afu8981u7d20u3068u3057u3066u8868u793a */
    background-color: white; /* u80ccu666fu8272u3092u767du306bu8a2du5b9a */
    padding: 10px; /* u5185u90e8u306eu4f59u767du3092u8a2du5b9a */
    border-radius: 10px; /* u89d2u3092u4e38u304fu8a2du5b9a */
    box-shadow: 0 0 20px rgba(0,0,0,0.2); /* u5f71u3092u4ed8u3051u3066u7acbu4f53u7684u306bu8868u793a */ /* u5f71u3092u4ed8u3051u3066u7acbu4f53u7684u306bu8868u793a */ /* u5f71u3092u4ed8u3051u3066u7acbu4f53u7684u306bu8868u793a */ /* u5f71u3092u4ed8u3051u3066u7acbu4f53u7684u306bu8868u793a */ /* u5f71u3092u4ed8u3051u3066u7acbu4f53u7684u306bu8868u793a */ /* u5f71u3092u4ed8u3051u3066u7acbu4f53u7684u306bu8868u793a */ /* u5f71u3092u4ed8u3051u3066u7acbu4f53u7684u306bu8868u793a */ /* u5f71u3092u4ed8u3051u3066u7acbu4f53u7684u306bu8868u793a */ /* u5f71u3092u4ed8u3051u3066u7acbu4f53u7684u306bu8868u793a */ /* u5f71u3092u4ed8u3051u3066u7acbu4f53u7684u306bu8868u793a */ /* u5f71u3092u4ed8u3051u3066u7acbu4f53u7684u306bu8868u793a */ /* u5f71u3092u4ed8u3051u3066u7acbu4f53u7684u306bu8868u793a */ /* u5f71u3092u4ed8u3051u3066u7acbu4f53u7684u306bu8868u793a */ /* u5f71u3092u4ed8u3051u3066u7acbu4f53u7684u306bu8868u793a */ /* u5f71u3092u4ed8u3051u3066u7acbu4f53u7684u306bu8868u793a */ /* u5f71u3092u4ed8u3051u3066u7acbu4f53u7684u306bu8868u793a */ /* u5f71u3092u4ed8u3051u3066u7acbu4f53u7684u306bu8868u793a */ /* u5f71u3092u4ed8u3051u3066u7acbu4f53u7684u306bu8868u793a */ /* u5f71u3092u4ed8u3051u3066u7acbu4f53u7684u306bu8868u793a */ /* u5f71u3092u4ed8u3051u3066u7acbu4f53u7684u306bu8868u793a */ /* u5f71u3092u4ed8u3051u3066u7acbu4f53u7684u306bu8868u793a */ /* u5f71u3092u4ed8u3051u3066u7acbu4f53u7684u306bu8868u793a */ /* u5f71u3092u4ed8u3051u3066u7acbu4f53u7684u306bu8868u793a */ /* u5f71u3092u4ed8u3051u3066u7acbu4f53u7684u306bu8868u793a */ /* u5f71u3092u4ed8u3051u3066u7acbu4f53u7684u306bu8868u793a */ /* u5f71u3092u4ed8u3051u3066u7acbu4f53u7684u306bu8868u793a */ /* u5f71u3092u4ed8u3051u3066u7acbu4f53u7684u306bu8868u793a */
}

.grid { 
    display: grid; /* グリッドレイアウトを使用 */
    grid-template-columns: repeat(8, 1fr); /* 8列のグリッドを等幅で作成 */
    gap: 5px; /* グリッド間の隙間を設定 */
    background-color: white; /* 背景色を白に設定 */
    color: black; /* 文字色を黒に設定 */
    font-family: monospace; /* 等幅フォントを使用 */
    font-weight: bold; /* 文字を太字に設定 */ /* 文字を太字に設定 */ /* 文字を太字に設定 */ /* 文字を太字に設定 */ /* 文字を太字に設定 */ /* 文字を太字に設定 */ /* 文字を太字に設定 */ /* 文字を太字に設定 */ /* 文字を太字に設定 */ /* 文字を太字に設定 */ /* 文字を太字に設定 */ /* 文字を太字に設定 */ /* 文字を太字に設定 */ /* 文字を太字に設定 */ /* 文字を太字に設定 */ /* 文字を太字に設定 */ /* 文字を太字に設定 */ /* 文字を太字に設定 */ /* 文字を太字に設定 */ /* 文字を太字に設定 */ /* 文字を太字に設定 */ /* 文字を太字に設定 */ /* 文字を太字に設定 */ /* 文字を太字に設定 */ /* 文字を太字に設定 */ /* 文字を太字に設定 */
}

.grid-cell { 
    background-color: white; /* セルの背景色を白に設定 */
    color: black; /* 文字色を黒に設定 */
    border: 1px solid black; /* 黒い実線の枠線を設定 */
    padding: 10px; /* 内部の余白を設定 */
    text-align: center; /* テキストを中央揃えに設定 */
    font-size: 16px; /* フォントサイズを設定 *//* フォントサイズを設定 *//* フォントサイズを設定 *//* フォントサイズを設定 *//* フォントサイズを設定 *//* フォントサイズを設定 *//* フォントサイズを設定 *//* フォントサイズを設定 *//* フォントサイズを設定 *//* フォントサイズを設定 *//* フォントサイズを設定 *//* フォントサイズを設定 *//* フォントサイズを設定 *//* フォントサイズを設定 *//* フォントサイズを設定 *//* フォントサイズを設定 *//* フォントサイズを設定 *//* フォントサイズを設定 *//* フォントサイズを設定 *//* フォントサイズを設定 *//* フォントサイズを設定 *//* フォントサイズを設定 *//* フォントサイズを設定 *//* フォントサイズを設定 *//* u30d5u30a9u30f3u30c8u30b5u30a4u30bau3092u8a2du5b9a */
}

form { 
    background-color: white; /* フォームの背景色を白に設定 */
    display: inline-block; /* インラインブロック要素として表示 */
    padding: 20px; /* 内部の余白を設定 */
    margin-bottom: 20px; /* 下部のマージンを設定 */
    border-radius: 10px; /* 角を丸く設定 */
    box-shadow: 0 0 10px rgba(0,0,0,0.1); /* 影を付けて立体的に表示 *//* 影を付けて立体的に表示 *//* 影を付けて立体的に表示 *//* 影を付けて立体的に表示 *//* 影を付けて立体的に表示 *//* 影を付けて立体的に表示 *//* 影を付けて立体的に表示 *//* 影を付けて立体的に表示 *//* 影を付けて立体的に表示 *//* 影を付けて立体的に表示 *//* 影を付けて立体的に表示 *//* 影を付けて立体的に表示 *//* 影を付けて立体的に表示 *//* 影を付けて立体的に表示 *//* 影を付けて立体的に表示 *//* 影を付けて立体的に表示 *//* 影を付けて立体的に表示 *//* 影を付けて立体的に表示 *//* 影を付けて立体的に表示 *//* u5f71u3092u4ed8u3051u3066u7acbu4f53u7684u306bu8868u793a *//* u5f71u3092u4ed8u3051u3066u7acbu4f53u7684u306bu8868u793a *//* u5f71u3092u4ed8u3051u3066u7acbu4f53u7684u306bu8868u793a *//* u5f71u3092u4ed8u3051u3066u7acbu4f53u7684u306bu8868u793a */
}

input, button { 
    margin: 10px; /* u4e0au4e0bu5de6u53f3u306eu30deu30fcu30b8u30f3u3092u8a2du5b9a */
    padding: 5px; /* u5185u90e8u306eu4f59u767du3092u8a2du5b9a *//* u5185u90e8u306eu4f59u767du3092u8a2du5b9a *//* u5185u90e8u306eu4f59u767du3092u8a2du5b9a *//* u5185u90e8u306eu4f59u767du3092u8a2du5b9a *//* u5185u90e8u306eu4f59u767du3092u8a2du5b9a *//* u5185u90e8u306eu4f59u767du3092u8a2du5b9a *//* u5185u90e8u306eu4f59u767du3092u8a2du5b9a *//* u5185u90e8u306eu4f59u767du3092u8a2du5b9a *//* u5185u90e8u306eu4f59u767du3092u8a2du5b9a *//* u5185u90e8u306eu4f59u767du3092u8a2du5b9a *//* u5185u90e8u306eu4f59u767du3092u8a2du5b9a *//* u5185u90e8u306eu4f59u767du3092u8a2du5b9a *//* u5185u90e8u306eu4f59u767du3092u8a2du5b9a *//* u5185u90e8u306eu4f59u767du3092u8a2du5b9a *//* u5185u90e8u306eu4f59u767du3092u8a2du5b9a *//* u5185u90e8u306eu4f59u767du3092u8a2du5b9a *//* u5185u90e8u306eu4f59u767du3092u8a2du5b9a *//* u5185u90e8u306eu4f59u767du3092u8a2du5b9a */
}

/* 生成されたカード用のスタイル */
body.card-page { 
    display: flex; 
    flex-direction: column;
    justify-content: center; 
    align-items: center; 
    min-height: 100vh; 
    margin: 0; 
}

.card-page .grid-container { 
    background-color: white; 
    padding: 25px; 
    border-radius: 10px; 
    box-shadow: 0 0 20px rgba(0,0,0,0.2); 
    margin-bottom: 20px;
    position: relative;
}

.card-page .grid { 
    grid-template-rows: repeat(5, 1fr);
    gap: 15px; /* u30aeu30e3u30c3u30d7u3092u5e83u3052u307eu3057u305f */
}

.card-page .grid-cell { 
    padding: 0; 
    aspect-ratio: 1 / 1; /* 正方形にする */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 55px; /* 固定幅を設定 - 大きくしました */
    height: 55px; /* 固定高さを設定 - 大きくしました */
    position: relative; /* 子要素の絶対位置指定の基準点にする */
    box-sizing: border-box; /* ボーダーを含めたサイズ計算 */
}

.id-display {
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 10px;
    color: #666;
    z-index: 10;
}

.left-char {
    position: absolute;
    top: 4px;
    left: 4px;
    font-size: 16px; /* サイズを大きくしました */
    text-shadow: 
        -1px -1px 0 white,
        1px -1px 0 white,
        -1px 1px 0 white,
        1px 1px 0 white; /* 白枠 */
}

.center-char {
    font-size: 25px; /* u30b5u30a4u30bau3092u5927u304du304fu3057u307eu3057u305f */
    position: relative;
    top: 4px; /* u6587u5b57u3092u5c11u3057u4e0bu306bu79fbu52d5 */
    font-weight: bold; /* u592au5b57u306bu3059u308b */
}

.right-char {
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: 16px; /* u30b5u30a4u30bau3092u5927u304du304fu3057u307eu3057u305f */
    text-shadow: 
        -1px -1px 0 white,
        1px -1px 0 white,
        -1px 1px 0 white,
        1px 1px 0 white; /* u767du67a0 */
}

.back-link {
    display: block;
    margin-top: 10px;
    text-decoration: none;
    color: black;
    font-weight: bold;
    padding: 10px 20px;
    background-color: #f0f0f0;
    border-radius: 5px;
    border: 1px solid #ccc;
}

.back-link:hover {
    background-color: #e0e0e0;
}

/* u5c0fu6587u5b57u3092u659cu4f53u306bu3059u308b */
.lowercase {
    font-style: italic;
    /*font-size: 1em; /* u5c0fu6587u5b57u306eu30b5u30a4u30bau3092u8abfu6574 */
}

.notice {
    margin-top: 10px;
    margin-bottom: 20px;
    padding: 10px;
    background-color: #fff3cd;
    border: 1px solid #ffeeba;
    border-radius: 5px;
    color: #856404;
    font-size: 14px;
}

.tips {
    margin-top: 10px;
    margin-bottom: 20px;
    padding: 10px;
    background-color: #e7f3ff;
    border: 1px solid #b8daff;
    border-radius: 5px;
    color: #004085;
    font-size: 14px;
    text-align: left;
}

.border-info {
    position: absolute;
    top: 5px;
    left: 30px;
    font-size: 10px;
    color: #666;
    z-index: 10;
    text-align: left;
    white-space: nowrap;
}

.border-type {
    display: inline-block;
    margin-right: 8px;
}