body {
    margin: 0;
}

#container {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* ←4つずつ */
    gap: 10px;
}



/* スライダー全体の枠 */
.slider-container {
    position: absolute;
    top: 115vw;           /* 縦の位置 */
    left: 50vw;          /* 横の中央 */
    transform: translate(-50%, -50%);
    width: 100vw;        /* 画像の横幅 */
    height: 50vw;       /* 画像の縦幅 */
    background-color: #fff;
    border: 10px solid #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    z-index: 1000;
    overflow: hidden;
    border-radius: 10px;
}

/* 画像自体の設定 */
#slider-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.3s; /* 切り替え時のふわっとした動き */
}

/* 左右ボタンの共通スタイル */
.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    font-size: 10vw;
    padding: 50vw 5vw;
    cursor: pointer;
    z-index: 1001;
    transition: 0.3s;
    line-height: 1;
}

.slider-btn:hover {
    background: rgba(0, 0, 0, 0.9);
}

/* 左ボタン */
.prev { left: 0px; border-radius: 0 8px 8px 0; }
/* 右ボタン */
.next { right: 0px; border-radius: 8px 0 0 8px; }



/* ボタンを配置するエリアの調整 */
.center-nav {
    position: absolute;
    top: var(--top);           /* 縦の位置（背景に合わせて調整してください） */
    left: var(--left);          /* 横の中央 */
    transform: translate(-50%, -50%); /* 自身のサイズ分戻して真ん中に */
    z-index: 1000;      /* 最前面に表示 */
}

/* 大きなボタン自体のスタイル */
.big-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    width: var(--width);         /* 横幅（かなり大きくしています） */
    height: var(--height);        /* 縦幅 */
    background: linear-gradient(135deg, #3498db, #2980b9); /* グラデーション */
    color: white;        /* 文字色 */
    text-decoration: none; /* 下線を消す */
    
    border-radius: 15px; /* 角丸 */
    border: 4px solid white; /* 白い枠線 */
    box-shadow: 0 10px 20px rgba(0,0,0,0.3); /* 影 */
    transition: all 0.3s ease; /* 動きをなめらかに */
}

/* メインの文字 */
.btn-text {
    font-size: 5vw;    /* 文字の大きさ */
    font-weight: bold;
    letter-spacing: 2px; /* 文字の間隔 */
}

/* 補足の小さい文字 */
.btn-subtext {
    font-size: 3vw;
    margin-top: 5px;
    opacity: 0.8;
}

/* ホバー（マウスを乗せた時）の演出 */
.big-button:hover {
    background: linear-gradient(135deg, #2980b9, #1c5980);
    transform: scale(1.05); /* 少し大きくする */
    box-shadow: 0 15px 30px rgba(0,0,0,0.4);
}

/* クリックした瞬間の演出 */
.big-button:active {
    transform: scale(0.98); /* 少し凹む */
}


.map-wrapper {
    display: flex;
    justify-content: center; /* 横方向の中央 */
    width: 100%;            /* 親要素いっぱいに広げる */
    margin-top: 20px;       /* 上に少し隙間を作る場合 */
}

.box {
    height: 120px;
    border: 1px solid black;
}
.teacher{
    position: absolute;
    top: var(--top );
    left: var(--left, 0px);
    width: var(--width ,10px);
    aspect-ratio: var(--hiritsu, 1/1);
    z-index: 10;
    background: var(--color); /* 確認用 */
}

/* 背景画像と配置の基準 */
.canvas {        
    position: relative;        
    width: 100%;        
    min-height: 100vh;        
    background-image: url('teachersmenu.png');        
    background-size: 100% auto;        
    background-repeat: no-repeat;        
}

/* テキスト表示ボックスのスタイル */
.auto-text-box {
    position: absolute;
    background: rgba(255, 255, 255, 0);
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 15px;
    width: 25vw; /* ボックスの横幅 */
    height: 5vw; /* ボックスの縦幅 */
    font-size: 1.1vw;
    line-height: 1.5;
    color: #333;
    white-space: pre-wrap; /* 改行を有効にする */
    overflow-y: auto;     /* はみ出たらスクロール */
    box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
}

.parent{
    position: relative;
    width: 100%;
    height: 100%; /* ←これ重要 */
}

/* 背景っぽく見せる画像 */
.bg {
    width: 100%;      /* 横幅は画面に合わせる */
    height: auto;     /* 縦はそのまま伸びる */
    display: block;
}

.son{
    position: absolute;
    top: var(--top, 0px);
    left: var(--left, 0px);
    color: white;
    z-index: 10;
}

.button{
    position: absolute;
    top: var(--top );
    left: var(--left, 0px);
    width: var(--width ,10px);
    aspect-ratio: var(--hiritsu, 1/1);
    z-index: 10;
    background: var(--color); /* 確認用 */
/*
    background: transparent;  見えない */
}


/* 三本線ボタン */
.menu-btn {
    position: fixed;
    top: 0px;
    right: 45px;
    font-size: var(--font-size, 65px);
    cursor: pointer;
}




/* メニュー本体 */
.menu {
    position: fixed;
    top: 0;
    right: -250px;   /* 最初は隠す */
    width: 250px;
    height: 100%;
    background: lightgray;
    padding-top: 60px;
    transition: 0.3s;
    z-index: 999;
}
.tytle{
    position: fixed;        /* 画面基準 */
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
}
.center_text{
    position: fixed;        /* 画面基準 */
    left: 50%;
    transform: translateX(-50%);
}
/* 表示状態 */
.menu.active {
    right: 0;
}

/* メニュー内ボタン */
.menu a {
    display: block;
    padding: 15px;
    text-decoration: none;
    color: black;
}

.menu a:hover {
    background: gray;
    color: white;
}

.photo{
    position: absolute;
    width: 100%;
}
/*画像の周りの枠の設定*/
.card {
    width: var(--width);
    background: white;
    border: 1px solid gray;
    border-radius: 1px;
    padding: 15px;
    text-align: center;
}
.text {
    position: absolute;
    left: var(--x);
    top: var(--y);   
    color: red;
}

.file_text{ 
    width: 100%;
    height: var(--height);
    border: none;
    margin-top: 210px;  /* 少し隙間 */
}
/* 
.box{
    left: var(--x);
    top: var(--y);
    width: var(--width);
    height: var(--height);
    background-color: rgb(0, 0, 0);
    border: 1px solid gray;
    position: relative; 
    display: flex;
    flex-direction: column;   
    align-items: center;
} 
 */
.card img {
    width: 100%;
    border-radius: 10px;
}



/* =========================================
   ここから下を追加：生成されるボックス用のCSS
========================================= */
.generated-box {
    position: absolute; /* これがないと座標(vw)が効きません */
    z-index: 999;       /* 他の要素より上に表示 */
    background-color: #fff;
    border: 2px solid #3498db;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;
    box-sizing: border-box;
}

.generated-box img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin-bottom: 10px;
}

.generated-box p {
    margin: 0;
    font-size: 14px;
    color: #333;
    text-align: center;
}