/* タブ切り替えの部分 */
/* ▼タブ機能の掲載領域の装飾(※必須ではありません) */
.tabbox {
    margin: 0px;
    padding: 1em;
    background-color: #f8f8ff;
}

/* ▼タブ機能を制御するラジオボタン(非表示にする) */
.tabbox input {
    display: none;
}

/* ▼タブ(共通装飾＋非選択状態の装飾) */
.tab {
    display: inline-block;
    border-width: 1px 1px 0px 1px;
    border-style: solid;
    border-color: black;
    border-radius: 0.75em 0.75em 0px 0px;
    padding: 0.75em 1em;
    color: black;
    background-color: #e0e0e0;
    font-weight: bold;
}

/* ▼タブにマウスポインタが載った際の装飾 */
.tab:hover {
    background-color: #ccffcc;
    color: green;
    cursor: pointer;
}

/* ▼チェックが入っているラジオボタンの隣にあるタブの装飾(＝選択状態のタブ) */
input:checked+.tab {
    color: red;
    background-color: #ffffcc;
    position: relative;
    z-index: 10;
}

/* ▼タブの中身(共通装飾＋非選択状態の装飾) */
.tabcontent {
    display: none;
    border: 1px solid black;
    margin-top: -1px;
    padding: 1em;
    position: relative;
    z-index: 0;
    background-color: #ffffcc;
    overflow: scroll;
}

/* ▼チェックが入っているラジオボタンに対応するタブの中身を表示する */
#tabcheck1:checked~#tabcontent1 {
    display: block;
}

#tabcheck2:checked~#tabcontent2 {
    display: block;
}

#tabcheck3:checked~#tabcontent3 {
    display: block;
}

#tabcheck4:checked~#tabcontent4 {
    display: block;
}

#tabcheck5:checked~#tabcontent5 {
    display: block;
}


/* 地図の部分 */

.classroom {
    background: #dddddd;
}

.event {
    border: 2px solid #000;
    background: #28f;
}


.kaidan {
    background-image: url(./kaidan.png);
    background-size: auto 8px;
}

#floor_1_container {
    display: grid;
    grid-template-columns: repeat(200, 20px);
    grid-template-rows: repeat(60, 15px);
}

#floor_1_itemA {
    grid-column: 22/28;
    grid-row: 1/7;

}

#floor_1_itemB {
    grid-column: 28/30;
    grid-row: 1/7;

}

#floor_1_itemC {
    grid-column: 30/36;
    grid-row: 1/7;

}

#floor_1_itemD {
    grid-column: 36/41;
    grid-row: 2/7;

}

#floor_1_itemE {
    grid-column: 41/43;
    grid-row: 2/7;

}

#floor_1_itemF {
    grid-column: 43/45;
    grid-row: 2/7;

}

#floor_1_itemG {
    grid-column: 45/48;
    grid-row: 2/7;

}

#floor_1_itemH {
    grid-column: 48/50;
    grid-row: 2/7;
    background: #f1f;
}

#floor_1_itemI {
    grid-column: 50/52;
    grid-row: 2/7;

}

#floor_1_itemJ {
    grid-column: 52/61;
    grid-row: 2/7;

}

#floor_1_itemK {
    grid-column: 63/66;
    grid-row: 2/7;

}

#floor_1_itemL {
    grid-column: 66/67;
    grid-row: 2/7;

}

#floor_1_itemM {
    grid-column: 67/71;
    grid-row: 2/7;

}

#floor_1_itemN {
    grid-column: 71/72;
    grid-row: 2/7;

}

#floor_1_itemO {
    grid-column: 22/25;
    grid-row: 9/15;

}

#floor_1_itemP {
    grid-column: 25/26;
    grid-row: 9/13;

}

#floor_1_itemQ {
    grid-column: 25/26;
    grid-row: 13/15;

}

#floor_1_itemR {
    grid-column: 26/28;
    grid-row: 9/15;

}

#floor_1_itemS {
    grid-column: 28/32;
    grid-row: 9/15;

}

#floor_1_itemT {
    grid-column: 32/33;
    grid-row: 9/10;

}

#floor_1_itemU {
    grid-column: 32/33;
    grid-row: 10/16;

}

#floor_1_itemV {
    grid-column: 33/36;
    grid-row: 9/16;

}

#floor_1_itemW {
    grid-column: 38/40;
    grid-row: 9/15;

}

#floor_1_itemX {
    grid-column: 40/43;
    grid-row: 9/15;

}

#floor_1_itemY {
    grid-column: 43/49;
    grid-row: 9/15;

}


#floor_1_itemZ {
    grid-column: 49/51;
    grid-row: 9/15;

}


#floor_1_itemAA {
    grid-column: 51/61;
    grid-row: 9/15;
    background: #fd2;
}

#floor_1_itemAB {
    grid-column: 63/66;
    grid-row: 9/15;
    background: #f1f;
}

#floor_1_itemAC {
    grid-column: 66/67;
    grid-row: 9/15;

}

#floor_1_itemAD {
    grid-column: 67/72;
    grid-row: 9/15;

}

#floor_1_itemAE {
    grid-column: 17/85;
    grid-row: 7/9;
    background: #fd2;
}

#floor_1_itemAF {
    grid-column: 61/62;
    grid-row: 6/7;

}

#floor_1_itemAG {
    grid-column: 62/63;
    grid-row: 6/7;
    background: #fd2;
}

#floor_1_itemAH {
    grid-column: 36/37;
    grid-row: 9/13;
    background: #888;
}

#floor_1_itemAI {
    grid-column: 37/38;
    grid-row: 12/13;
    background: #888;
}

#floor_1_itemAJ {
    grid-column: 61/62;
    grid-row: 9/15;
    background: #888;
}

#floor_1_itemAK {
    grid-column: 62/63;
    grid-row: 13/15;
    background: #888;
}

#floor_1_itemAL {
    grid-column: 37/38;
    grid-row: 9/12;

}

#floor_1_itemAM {
    grid-column: 62/63;
    grid-row: 9/13;

}

#floor_1_itemAN {
    grid-column: 83/85;
    grid-row: 9/35;
    background: #fd2;
}

#floor_1_itemAO {
    grid-column: 75/100;
    grid-row: 35/60;

    text-align: center;
}

#floor_1_itemAP {
    grid-column: 75/83;
    grid-row: 35/40;
    background: #f1f;
}

#floor_1_itemAQ {
    grid-column: 40/55;
    grid-row: 35/60;

}

#floor_1_itemAR {
    grid-column: 81/83;
    grid-row: 9/12;
    border-bottom: 2px solid#000;
    border-left: 3px solid#000;
}

#floor_1_itemAS {
    grid-column: 7/17;
    grid-row: 2/13;
}

#floor_1_itemAT {
    grid-column: 11/14;
    grid-row: 10/13;
    background-color: #f1f;
}

#floor_1_itemAU {
    grid-column: 5/22;
    grid-row: 36/60;
    background-color: #dddddd
}

#floor_1_itemAV {
    grid-column: 23/38;
    grid-row: 36/55;
    background-color: #dddddd;
}

#floor_1_itemAW {
    grid-column: 57/67;
    grid-row: 41/60;
    background-color: #dddddd
}

#floor_1_itemAX {
    grid-column: 6/18;
    grid-row: 15/30;
    background-color: #28f
        /*  */
}

#floor_1_itemAY {
    grid-column: 10/23;
    grid-row: 31/34;
    background-color: #dddddd;
    /*  */
}

#floor_1_itemAZ {
    grid-column: 50/70;
    grid-row: 20/40;
}

#floor_1_itemBA {
    grid-column: 46/50;
    grid-row: 20/23;

}

#floor_1_itemBB {
    grid-column: 46/50;
    grid-row: 23/26;
    background-color: #dddddd;
}

#floor_1_itemBC {
    grid-column: 46/50;
    grid-row: 26/29;
    background-color: #f1f;
}

#floor_1_itemBD {
    grid-column: 46/50;
    grid-row: 29/32;
}

#floor_1_itemBE {
    grid-column: 70/73;
    grid-row: 57/59;
}

#floor_2_container {
    display: grid;
    grid-template-columns: repeat(70, 20px);
    grid-template-rows: repeat(40, 15px);
}

#floor_2_itemA {
    grid-column: 2/8;
    grid-row: 1/7;

}

#floor_2_itemB {
    grid-column: 8/10;
    grid-row: 1/7;

}

#floor_2_itemC {
    grid-column: 10/16;
    grid-row: 1/7;

}

#floor_2_itemD {
    grid-column: 19/36;
    grid-row: 2/7;

}

#floor_2_itemE {
    grid-column: 36/41;
    grid-row: 2/7;
}

#floor_2_itemF {
    grid-column: 43/46;
    grid-row: 2/7;

}

#floor_2_itemG {
    grid-column: 46/49;
    grid-row: 2/7;

}

#floor_2_itemH {
    grid-column: 49/52;
    grid-row: 2/7;

}

#floor_2_itemI {
    grid-column: 2/8;
    grid-row: 9/15;

}

#floor_2_itemJ {
    grid-column: 8/10;
    grid-row: 9/15;

}

#floor_2_itemK {
    grid-column: 10/16;
    grid-row: 9/15;

}

#floor_2_itemL {
    grid-column: 18/21;
    grid-row: 9/14;
}

#floor_2_itemM {
    grid-column: 21/27;
    grid-row: 9/14;

}

#floor_2_itemN {
    grid-column: 27/29;
    grid-row: 9/14;

}

#floor_2_itemO {
    grid-column: 29/31;
    grid-row: 9/11;

}

#floor_2_itemP {
    grid-column: 29/31;
    grid-row: 11/14;

}

#floor_2_itemQ {
    grid-column: 43/46;
    grid-row: 9/14;
}

#floor_2_itemR {
    grid-column: 46/49;
    grid-row: 9/14;

}

#floor_2_itemS {
    grid-column: 49/52;
    grid-row: 9/14;

}

#floor_2_itemT {
    grid-column: 5/65;
    grid-row: 7/9;
    background: #fd2;
}

#floor_2_itemU {
    grid-column: 41/42;
    grid-row: 6/7;

}

#floor_2_itemV {
    grid-column: 42/43;
    grid-row: 6/7;
    background: #fd2;
}

#floor_2_itemW {
    grid-column: 31/41;
    grid-row: 9/14;
    background: #000;
}

#floor_2_itemX {
    grid-column: 16/18;
    grid-row: 9/13;
}

#floor_2_itemY {
    grid-column: 41/43;
    grid-row: 9/13;
}

#floor_2_itemZ {
    grid-column: 16/18;
    grid-row: 2/7;

}

#floor_2_itemAA {
    grid-column: 18/19;
    grid-row: 2/7;

}

#floor_2_itemAB {
    grid-column: 63/65;
    grid-row: 9/12;

}

#floor_2_itemAC {
    grid-column: 40/44;
    grid-row: 18/21;

}

#floor_2_itemAD {
    grid-column: 40/44;
    grid-row: 21/24;
    background-color: #dddddd;
}

#floor_2_itemAE {
    grid-column: 40/44;
    grid-row: 24/27;
    background-color: #f1f;
}

#floor_2_itemAF {
    grid-column: 40/44;
    grid-row: 27/30;

}

#floor_2_itemAG {
    grid-column: 44/54;
    grid-row: 18/30;

}


#floor_3_container {
    display: grid;
    grid-template-columns: repeat(52, 20px);
    grid-template-rows: repeat(30, 15px);
}

#floor_3_itemA {
    grid-column: 2/8;
    grid-row: 2/14;

}

#floor_3_itemB {
    grid-column: 8/10;
    grid-row: 2/7;

}

#floor_3_itemC {
    grid-column: 10/12;
    grid-row: 2/7;

}

#floor_3_itemD {
    grid-column: 12/14;
    grid-row: 2/7;

}

#floor_3_itemE {
    grid-column: 14/16;
    grid-row: 2/7;

}

#floor_3_itemF {
    grid-column: 16/21;
    grid-row: 2/7;

}

#floor_3_itemG {
    grid-column: 21/26;
    grid-row: 2/7;

}

#floor_3_itemH {
    grid-column: 26/31;
    grid-row: 2/7;

}

#floor_3_itemI {
    grid-column: 31/36;
    grid-row: 2/7;

}

#floor_3_itemJ {
    grid-column: 36/41;
    grid-row: 2/7;

}

#floor_3_itemK {
    grid-column: 8/10;
    grid-row: 9/14;

}

#floor_3_itemL {
    grid-column: 10/16;
    grid-row: 9/14;

}

#floor_3_itemM {
    grid-column: 18/21;
    grid-row: 9/14;
    background: #f1f;
}

#floor_3_itemN {
    grid-column: 21/26;
    grid-row: 9/14;

    border-bottom: 2px solid#000;
    border-top: 2px solid#000;
    border-left: 2px solid #000;
}

#floor_3_itemO {
    grid-column: 26/29;
    grid-row: 9/14;

    border-bottom: 2px solid #000;
    border-top: 2px solid #000;
    border-right: 2px solid #000;
}

#floor_3_itemP {
    grid-column: 29/31;
    grid-row: 9/14;

}

#floor_3_itemQ {
    grid-column: 31/36;
    grid-row: 9/14;

}

#floor_3_itemR {
    grid-column: 36/41;
    grid-row: 9/14;
    background: #f1f;
}

#floor_3_itemS {
    grid-column: 43/52;
    grid-row: 2/14;

}

#floor_3_itemT {
    grid-column: 8/43;
    grid-row: 7/9;
    background: #fd2;
}

#floor_3_itemU {
    grid-column: 41/42;
    grid-row: 6/7;

}

#floor_3_itemV {
    grid-column: 42/43;
    grid-row: 6/7;
    background: #fd2;
}

#floor_3_itemW {
    grid-column: 16/18;
    grid-row: 9/13;

}

#floor_3_itemX {
    grid-column: 41/43;
    grid-row: 9/13;

}

#floor_3_itemAC {
    grid-column: 40/44;
    grid-row: 18/21;

}

#floor_3_itemAD {
    grid-column: 40/44;
    grid-row: 21/24;
    background-color: #dddddd;
}

#floor_3_itemAE {
    grid-column: 40/44;
    grid-row: 24/27;
    background-color: #f1f;
}

#floor_3_itemAF {
    grid-column: 40/44;
    grid-row: 27/30;

}

#floor_3_itemAG {
    grid-column: 44/54;
    grid-row: 18/30;

}

#floor_4_container {
    display: grid;
    grid-template-columns: repeat(52, 20px);
    grid-template-rows: repeat(30, 15px);
}

#floor_4_itemA {
    grid-column: 2/8;
    grid-row: 2/7;

}

#floor_4_itemB {
    grid-column: 8/10;
    grid-row: 2/6;

}

#floor_4_itemC {
    grid-column: 10/16;
    grid-row: 2/7;

}

#floor_4_itemD {
    grid-column: 16/21;
    grid-row: 2/7;

}

#floor_4_itemE {
    grid-column: 21/26;
    grid-row: 2/7;


}

#floor_4_itemF {
    grid-column: 26/31;
    grid-row: 2/7;

}

#floor_4_itemG {
    grid-column: 31/36;
    grid-row: 2/7;

}

#floor_4_itemH {
    grid-column: 36/41;
    grid-row: 2/7;

}

#floor_4_itemI {
    grid-column: 2/8;
    grid-row: 9/14;

}

#floor_4_itemJ {
    grid-column: 8/10;
    grid-row: 9/14;

}

#floor_4_itemK {
    grid-column: 10/16;
    grid-row: 9/14;

}

#floor_4_itemL {
    grid-column: 18/21;
    grid-row: 9/14;
    background: #f1f;
}

#floor_4_itemM {
    grid-column: 21/29;
    grid-row: 9/14;

}

#floor_4_itemN {
    grid-column: 29/31;
    grid-row: 9/14;

}

#floor_4_itemO {
    grid-column: 31/36;
    grid-row: 9/14;

}

#floor_4_itemP {
    grid-column: 36/41;
    grid-row: 9/14;
    background: #f1f;
}

#floor_4_itemQ {
    grid-column: 5/43;
    grid-row: 7/9;
    background: #fd2;
}

#floor_4_itemR {
    grid-column: 8/10;
    grid-row: 6/7;
    background: #fd2;
}

#floor_4_itemS {
    grid-column: 41/42;
    grid-row: 6/7;

}

#floor_4_itemT {
    grid-column: 42/43;
    grid-row: 6/7;
    background: #fd2;
}

#floor_4_itemU {
    grid-column: 43/52;
    grid-row: 2/14;
    background: #000;
}

#floor_4_itemV {
    grid-column: 16/18;
    grid-row: 9/13;

}

#floor_4_itemW {
    grid-column: 41/43;
    grid-row: 9/13;

}

#floor_4_itemAC {
    grid-column: 40/44;
    grid-row: 18/21;

}

#floor_4_itemAD {
    grid-column: 40/44;
    grid-row: 21/24;
    background-color: #dddddd;
}

#floor_4_itemAE {
    grid-column: 40/44;
    grid-row: 24/27;
    background-color: #f1f;
}

#floor_4_itemAF {
    grid-column: 40/44;
    grid-row: 27/30;

}

#floor_4_itemAG {
    grid-column: 44/54;
    grid-row: 18/30;

}

#floor_5_container {
    display: grid;
    grid-template-columns: repeat(52, 20px);
    grid-template-rows: repeat(15, 15px);
}

#floor_5_itemA {
    grid-column: 16/21;
    grid-row: 2/7;


}

#floor_5_itemB {
    grid-column: 21/26;
    grid-row: 2/7;

}

#floor_5_itemC {
    grid-column: 26/31;
    grid-row: 2/7;

}

#floor_5_itemD {
    grid-column: 31/36;
    grid-row: 2/7;

}

#floor_5_itemE {
    grid-column: 36/41;
    grid-row: 2/7;

}

#floor_5_itemF {
    grid-column: 18/21;
    grid-row: 9/14;
    background: #f1f;
}

#floor_5_itemG {
    grid-column: 31/36;
    grid-row: 9/14;

}

#floor_5_itemH {
    grid-column: 36/41;
    grid-row: 9/14;
    background: #f1f;
}

#floor_5_itemI {
    grid-column: 16/43;
    grid-row: 7/9;
    background: #fd2;
}

#floor_5_itemJ {
    grid-column: 41/42;
    grid-row: 6/7;

}

#floor_5_itemK {
    grid-column: 42/43;
    grid-row: 6/7;
    background: #fd2;
}

#floor_5_itemL {
    grid-column: 16/18;
    grid-row: 9/13;

}

#floor_5_itemM {
    grid-column: 41/43;
    grid-row: 9/13;

}

#floor_5_itemN {
    grid-column: 2/16;
    grid-row: 2/14;
    background: #000;
}

#floor_5_itemO {
    grid-column: 21/31;
    grid-row: 9/14;
    background: #000;
}

#floor_5_itemP {
    grid-column: 23/29;
    grid-row: 14/15;
    background: #000;
}

#floor_5_itemQ {
    grid-column: 43/52;
    grid-row: 2/14;
    background: #000;
}

#floor_5_itemAC {
    grid-column: 40/44;
    grid-row: 18/21;

}

#floor_5_itemAD {
    grid-column: 40/44;
    grid-row: 21/24;
    background-color: #dddddd;
}

#floor_5_itemAE {
    grid-column: 40/44;
    grid-row: 24/27;
    background-color: #f1f;
}

#floor_5_itemAF {
    grid-column: 40/44;
    grid-row: 27/30;

}

#floor_5_itemAG {
    grid-column: 44/54;
    grid-row: 18/30;

}

/* 詳細画面用 */
.btn,
a.btn {
    font-size: 1.0rem;
    line-height: 1;
    padding: 5px;
    margin: 0 0 0 10px;
    align-items: baseline;
}

#dialog {
    max-width: 80%;
    max-height: 80%;
}

.dialog-header {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 8px 8px 4px;
    background: #fff;
    /* 必須：スクロール内容の下敷きにならないように */
    border-bottom: 1px solid #eee;
}

#dialog_title {
    font-size: 30px;
    font-weight: bold;
}

.close-btn {
    border: none;
    background: transparent;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.dashimono_title {
    background-color: #663399;
    color: white;
    margin-top: 50px;
}

.tr {
    display: flex;
    margin-bottom: 5px;
}

.left {
    flex: 1;
    background-color: #Ead9FF;
    margin-right: 3px;

}

.right {
    flex: 2;
    text-align: left;
}

.detail a {
    background-color: #cce5ff;
    padding: 10px 20px;
    border-radius: 10px;
    text-decoration: none;
    color: black;
    font-weight: bold;
}

/* ==== 右下固定の注釈（凡例） ==== */
#map-legend {
    position: fixed;
    right: 12px;
    bottom: 12px;
    z-index: 9999;
    /* ダイアログより手前/奥にしたい場合は調整 */
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-width: min(92vw, 520px);
    padding: 10px 12px 12px 12px;
    background: rgba(255, 255, 224, 0.96);
    /* うっすら黄色（画像と馴染む） */
    border: 1px solid #333;
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .15);
}

#map-legend .legend-img {
    width: 96px;
    /* 画像サイズはお好みで */
    height: auto;
    flex: 0 0 auto;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}

#map-legend .legend-text {
    line-height: 1.6;
    font-size: 14px;
    color: #111;
    text-align: left;
    white-space: nowrap;
    /* 1行で見せたい場合 */
}

.flex {
    display: flex;
    margin-bottom: 2px;
    align-items: center;
}

.open,
.close,
.wc {
    background-color: red;
    ;
    width: 40px;
    height: 40px;
}

.open {
    background-color: #28f;
}

.close {
    background-color: #ddd;
}

.wc {
    background-color: #f1f;
}

/* 閉じるボタン */
#map-legend .legend-close {
    position: absolute;
    top: 6px;
    right: 6px;
    border: none;
    background: transparent;
    font-size: 18px;
    line-height: 1;
    padding: 2px 6px;
    cursor: pointer;
    color: #000;
}

#map-legend .legend-close:hover {
    opacity: .7;
}

/* スマホで少しコンパクトに */
@media (max-width: 480px) {
    #map-legend {
        right: 8px;
        bottom: 8px;
        padding: 8px 10px 10px;
        gap: 8px;
    }

    #map-legend .legend-img {
        width: 80px;
    }

    #map-legend .legend-text {
        font-size: 13px;
    }
}