ハンバーガーメニューの後ろに写真を配置したい。

プログラミング初心者です。

ハンバーガーメニューの後ろに写真を配置したいのですが、z-indexが効いていないようで、困っています。
完成イメージも追記したので、合わせてご確認いただけると助かります。
よろしくお願いします。

html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="/Portfolio/css/style.css">
<script src="/Portfolio/js/menu.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<title>Menu</title>
</head>
<body>
	<header>
		<nav id="nav">
			<ul>
				<li><a href="/Portfolio/About">About</a></li>
				<li><a href="/Portfolio/Top">DB</a></li>
				<li><a href="/Portfolio/Menu">Menu</a></li>
				<li><a href="/Portfolio/Contact">Contact</a></li>
			</ul>
		</nav>
		<div id="hamburger">
			<!-- 1番上の線 -->
			<span class="inner_line" id="line1"></span>
			<!-- 真ん中の線 -->
	    	<span class="inner_line" id="line2"></span>
	    	<!-- 1番下の線 -->
	    	<span class="inner_line" id="line3"></span>
		</div>
		<h1 align="center"><font face = serif >Portfolio</font></h1>
	</header>
	<div class="wraper">
		<div class = "wraper-inner" >
			<img alt="フォーク" src="/Portfolio/image/fork.svg">
			<h1>Menu</h1>
			<img alt="シェッフ" src="/Portfolio/image/chef.svg">
		</div>
		<div class="bento">
			<img alt="キーマカレー" id="keemacurry" src="/Portfolio/image/Bento1.jpg">
			<img alt="1" src="/Portfolio/image/Bento2.jpg">
			<img alt="2" src="/Portfolio/image/Bento3.jpg">
			<br>
			<img alt="3" src="/Portfolio/image/Bento4.jpg">
			<img alt="4" src="/Portfolio/image/Bento5.jpg">
			<img alt="5" src="/Portfolio/image/Bento6.jpg">
		</div>
	</div>
	<div id="keemacurry_popup" class="modal">
		<div id="closebtn" class="closebtn">×</div>
		<p>★キーマカレー</p>
	</div>
</body>
</html>

css

@charset "UTF-8";

* {
	 margin: 0;
	 padding: 0;
  }

body {
	/*背景色*/
	background-color:#e9eef8;
}

header {
  	position: fixed;
  	width: 100%;
  	height: 90px;
  	background: #ceeaf4;
}

header h1{
	line-height: 83px;
	color: #273b6a;
}

.wraper{
	background-color: #ffffff;
	padding: 110px 30px 30px 100px;
	margin: 0 20px 20px 20px;
}

.wraper img{
	height: 100px;
	top: 0;
	text-align: left;
}

.selfintroduction h2{
	display :inline;
}

.selfintroduction{
	width: 80%;
	text-align: left;
	padding-left :100px;
}

.introductionText{
	padding-left: 130px;
}

/*ナビメニュー	*/
#nav{
	position: absolute;
	top : 0;
	/*ナビメニューを左に隠した状態になる*/
	width: 40%;
	left: -40%;
	height: 100vh;
	/*0.7秒かけてナビメニューがスライドする*/
	transition: .7s;
	background: #e8fdff;
	z-index: 50;
}

#nav ul{
    padding-top: 80px;
}
#nav ul li{
	/*リスト項目要素のマーカーを設定(非表示）*/
    list-style-type: none;
    font-size: 20px;
}

#nav a{
    display: block;
    /*リンクの下線を*/
    text-decoration: none;
    color: #7c90e1;
    margin: 0 15px;
    padding: 10px;
    /*0.5秒かけてナビメニューがスライドする*/
    transition: .5s;
}

#nav li a:hover{
    color: #ffffff;
    background: #475fa5;
    border-bottom: none;
}

/*ハンバーガーメニュー*/
#hamburger {
	display: block;
	position: absolute;
	top: 20px;
	left: 30px;
    width: 50px;
    height: 44px;
    cursor: pointer;
    transition: 1s;
    z-index: 60;
}

.inner_line {
	display: block;
	position: absolute;
	left: 0;
	width: 50px;
    height: 5px;
    background-color: #95a7e5;
    transition: 1s;
    border-radius: 4px;
}

#line1 {
  top: 0;
}
#line2 {
  top: 20px;
}
#line3 {
  bottom: 0px;
}

.in{
  	transform: translateX(100%);
}
.line_1,.line_2,.line_3{
  	background: #98a5e0;
}
.line_1 {
	/*-45度回転させる*/
	transform: translateY(20px) rotate(-45deg);
	top: 0;
}
.line_2 {
	opacity: 0;
}
.line_3 {
	/*45度回転させる*/
	transform: translateY(-20px) rotate(45deg);
	bottom: 0;
}

/*メニュー画面の背景をフルサイズで設定する(保留）*/
.menu_images_aa {
	position: relative;
	width:100%;
	/*background: url("../image/hotel.jpg") ;*/
	min-height: 100vh;
	/*繰り返しはしない*/
	background-repeat: no-repeat;
	background-size : cover;
}

.wraper-inner {
	margin-left: -28px;
    margin-right: 40px;
    text-align: center;
}

.wraper-inner h1 {
	font-family: cursive;
	display: inline;
}

.wraper-inner img {
	height: 40px;
}

.bento img{
	width:30%;
	height: 100%;
}

.bento img:hover {
	cursor: pointer;
	opacity: 0.5;
	transition: .5s;
}

.bento {
	position:relative;
	z-index: 10;
}

.modal {
	display:none;
	position: absolute;
    width: 60%;
    background-color: #fff;
    margin-left: 200px;
    top: 300px;
    height: 100px;
    z-index: 30;
}

.modal p {
	text-align: center;
    font-family: cursive;
}

.closebtn {
	text-align: right;
    margin-right: 19px;
    font-size: 140%;
    font-weight: bold;
    cursor: pointer;
}

.modalback {
  position: fixed;
  height: 100%;
  width:100%;
  top: 0;
  left: 0;
  background-color: #000000;
  opacity: 0.8;
  z-index: 20;
}

/**
 * Main画面のjavascrip
 */
function hamburger() {
  document.getElementById('line1').classList.toggle('line_1');
  document.getElementById('line2').classList.toggle('line_2');
  document.getElementById('line3').classList.toggle('line_3');
  document.getElementById('nav').classList.toggle('in');
}

document.addEventListener("DOMContentLoaded", function(){
	document.getElementById("hamburger").addEventListener('click' , function () {
		  hamburger();
	} );
},false);

window.onload = function() {
	/*キーマカレーがクリックされたか*/
	var img = document.getElementById('keemacurry');
	/*モーダル表示用*/
	var modal = document.getElementById('keemacurry_popup');
	/*閉じるボタン*/
	var closebtn = document.getElementById('closebtn');

	function keemacurry(){
	    'キーマカレー'
		modal.style.display = 'block';

		 //追加
	    const modalBackElm = document.createElement('div');
	    modalBackElm.setAttribute("id","modalback_id")
	    modalBackElm.classList.add("modalback");
	    modal.after(modalBackElm);
	}

	function close_keemacurry(){
	    '追加した要素を削除'
		var closebtn = document.getElementById('modalback_id');
		modal.style.display = 'none';
		closebtn.classList.remove('modalback');
	}

	img.addEventListener('click',keemacurry);
	closebtn.addEventListener('click',close_keemacurry);
}