:root{
  --map-blue: #9cf;  /* #99ccff #b3d9ff #cce6ff */
  --map-yellow: #cc3;/* #cccc33 #dddd55 #eeee77 */
  --map-brown: #c93; /* #cc9933 #ddaa55 #eebb77 */
}
/* var(--map-blue);var(--map-yellow);var(--map-brown); */
.bg-sea { background-color: var(--map-blue); }    /* 海 */
.bg-beach { background-color: var(--map-yellow); } /* 浜 */
.bg-plain { background-color: var(--map-brown); }  /* 平地 */

.c11grid {
    display: grid;
    width: calc(100% - 2em);
    max-width: 400px;
    grid-template-columns: repeat(7, 1fr);
    background-color: #000;
    border: 1px solid #000;
    gap: 1px;
    margin: 1em;
    box-sizing: border-box;
}

/* 共通セル指定：クラスを使わず子要素divすべてに適用 */
.c11grid > div {
    width: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    box-sizing: border-box;
    font-size: 14px;
}

/* 項目ラベル（グレー背景） */
.c11grid > div:nth-child(1), .c11grid > div:nth-child(2),  .c11grid > div:nth-child(3), 
.c11grid > div:nth-child(4), .c11grid > div:nth-child(5),  .c11grid > div:nth-child(6), 
.c11grid > div:nth-child(7), .c11grid > div:nth-child(8),  .c11grid > div:nth-child(15), 
.c11grid > div:nth-child(22),.c11grid > div:nth-child(29), .c11grid > div:nth-child(36), 
.c11grid > div:nth-child(43) {
    background-color: #a6a6a6;
    font-weight: bold;
}

/* 水色 (Cyan) */
.c11grid > div:nth-child(9), .c11grid > div:nth-child(10),.c11grid > div:nth-child(17),
.c11grid > div:nth-child(28),.c11grid > div:nth-child(35),.c11grid > div:nth-child(49) {
    background-color: var(--map-blue);
}

/* 橙色 (Orange) */
.c11grid > div:nth-child(12),.c11grid > div:nth-child(13), .c11grid > div:nth-child(19),
.c11grid > div:nth-child(26),.c11grid > div:nth-child(31), .c11grid > div:nth-child(32),
.c11grid > div:nth-child(33),.c11grid > div:nth-child(38), .c11grid > div:nth-child(39),
.c11grid > div:nth-child(40),.c11grid > div:nth-child(44), .c11grid > div:nth-child(45) {
    background-color: var(--map-brown);
}

/* 薄緑 (Green) */
.c11grid > div:nth-child(11), .c11grid > div:nth-child(14), .c11grid > div:nth-child(16),
.c11grid > div:nth-child(18), .c11grid > div:nth-child(20), .c11grid > div:nth-child(21),
.c11grid > div:nth-child(23), .c11grid > div:nth-child(24), .c11grid > div:nth-child(25), 
.c11grid > div:nth-child(27), .c11grid > div:nth-child(30), .c11grid > div:nth-child(34),
.c11grid > div:nth-child(37), .c11grid > div:nth-child(41), .c11grid > div:nth-child(42),
.c11grid > div:nth-child(46), .c11grid > div:nth-child(47), .c11grid > div:nth-child(48) {
    background-color: var(--map-yellow);
}

/* テキスト (H15) 42番目 */
.c11grid > div:nth-child(42) {
    font-size: clamp(8px, 2.5vw, 11px);
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    text-align: center;
}

/* 9grid */
.grid9box{
    display: grid;
    width: calc(100% - 2em);
    margin: 1em;
    max-width: 300px;
    
    grid-template-columns: repeat(3, minmax(0, 1fr));
    background-color: #000;
    border: 1px solid #000;
    gap: 1px;/* gapで疑似ボーダー */
    box-sizing: border-box;
    container-type: inline-size;
}
.grid9box > div {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    font-size: 13px;
    line-height: 1.4;
    text-align: center;
    padding: 4px;
    font-size: clamp(2px, 4cqw, 13px);
}
.bg-fff{background-color: #fff;}
.bg-ccc{background-color: #ccc;}






/* c11-grid-2 */
.c11grid2 {
    display: grid;
    width: 100%;/*calc(100% - 2em);*/
    max-width: 600px;
    grid-template-columns: 10px repeat(6, 1fr);
    background-color: #000;
    border: 1px solid #000;
    gap: 1px;
    /*margin: 1em;*/
    box-sizing: border-box;
    container-type: inline-size;
    margin-top: 1em;
}

.c11grid2 > div {
    width: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    box-sizing: border-box;
    text-align: center;
    
    font-size: clamp(6px, 8cqw, 10px) !important; 
    line-height: 1.1;
    padding: 1px;

    min-height: 0;
    overflow: hidden;
    font-weight: bold;
}


/* 項目ラベル（グレー背景） */
.c11grid2 > div:nth-child(1), .c11grid2 > div:nth-child(2),  .c11grid2 > div:nth-child(3), .c11grid2 > div:nth-child(4), .c11grid2 > div:nth-child(5),  .c11grid2 > div:nth-child(6), .c11grid2 > div:nth-child(7), 
.c11grid2 > div:nth-child(8),  .c11grid2 > div:nth-child(15), .c11grid2 > div:nth-child(22),.c11grid2 > div:nth-child(29), .c11grid2 > div:nth-child(36), .c11grid2 > div:nth-child(43) {
    background-color: #a6a6a6;
    font-size: 10px;
    font-weight: normal;
}

.c11grid2 > div:nth-child(7n+1) {
    aspect-ratio: auto;
}
.c11grid2 > div:nth-child(1), .c11grid2 > div:nth-child(2),  .c11grid2 > div:nth-child(3), .c11grid2 > div:nth-child(4), .c11grid2 > div:nth-child(5),  .c11grid2 > div:nth-child(6), .c11grid2 > div:nth-child(7) {
    aspect-ratio: auto;
}

/* 水色 (Cyan) */
.c11grid2 > div:nth-child(9), .c11grid2 > div:nth-child(10),.c11grid2 > div:nth-child(17),
.c11grid2 > div:nth-child(28),.c11grid2 > div:nth-child(35),.c11grid2 > div:nth-child(49) {
    background-color: var(--map-blue);
}

/* 橙色 (Orange) */
.c11grid2 > div:nth-child(12),.c11grid2 > div:nth-child(13), .c11grid2 > div:nth-child(19),
.c11grid2 > div:nth-child(26),.c11grid2 > div:nth-child(31), .c11grid2 > div:nth-child(32),
.c11grid2 > div:nth-child(33),.c11grid2 > div:nth-child(38), .c11grid2 > div:nth-child(39),
.c11grid2 > div:nth-child(40),.c11grid2 > div:nth-child(44), .c11grid2 > div:nth-child(45) {
    background-color: var(--map-brown);
}

/* 薄緑 (Green) */
.c11grid2 > div:nth-child(11), .c11grid2 > div:nth-child(14), .c11grid2 > div:nth-child(16),
.c11grid2 > div:nth-child(18), .c11grid2 > div:nth-child(20), .c11grid2 > div:nth-child(21),
.c11grid2 > div:nth-child(23), .c11grid2 > div:nth-child(24), .c11grid2 > div:nth-child(25), 
.c11grid2 > div:nth-child(27), .c11grid2 > div:nth-child(30), .c11grid2 > div:nth-child(34),
.c11grid2 > div:nth-child(37), .c11grid2 > div:nth-child(41), .c11grid2 > div:nth-child(42),
.c11grid2 > div:nth-child(46), .c11grid2 > div:nth-child(47), .c11grid2 > div:nth-child(48) {
    background-color: var(--map-yellow);
}
.manatop{margin-top:5px;}

.pconly{display: none;}.moonly{display: inline;}
@media (min-width: 481px) {
.pconly{display: inline;}.moonly{display: none;}
}
@media (max-width: 480px) {
.c11grid2 > div {aspect-ratio: auto;}
}