モーダルウィンドウ内での改行とレイアウトについて。

実現したいこと

ここに実現したいことを箇条書きで書いてください。
モーダルウィンドウの幅を狭くしたい。
モーダルウィンドウ内でも改行したい。

前提

ここに質問の内容を詳しく書いてください。
モーダルウィンドウの幅をCSSで「width:40%;」としているつもりなのですが、幅が変わらなくて困っています。
モーダルウィンドウ内でのテキストで改行されずに「<br>」がそのまま表示され困っています。

発生している問題・エラーメッセージ

特にエラーは検出されていません。

該当のソースコード

HTML

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>MENU｜BAKERY official website</title>
  <meta name="description" content="「BAKERY」メニューを掲載しています。さまざまなメニューをご用意しています。">
  <meta name="viewport" content="width=device-width">
  <script defer src="./js/common.js"></script>
  <script defer src="./js/menu.js"></script>
  <link href="./css/common.css" rel="stylesheet">
  <link href="./css/menu.css" rel="stylesheet">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap" rel="stylesheet">
</head>

<body>

  <!-- headerここから -->
  <header class="header">
    <div class="header-inner">
      <a class="header-logo" href="./index.html">
        <img src="./images/common/logo.png" alt="BAKERY">
      </a>
      <button class="toggle-menu-button"></button>
      <div class="header-site-menu">
        <nav class="site-menu">
          <ul>
            <li><a href="./concept.html">CONCEPT</a></li>
            <li><a href="./menu.html">MENU</a></li>
            <li><a href="./shop.html">SHOP</a></li>
            <li><a href="./access.html">ACCESS</a></li>
          </ul>
        </nav>
      </div>
    </div>
  </header>
  <!-- headerここまで -->

  <!-- mainここから -->
  <main class="main">
    <div class="title">
      <h1 class="title-text">MENU</h1>
      <p class="title-text">メニュー</p>
    </div>
    <div class="item-list">
    </div>
    <div id="modal" class="modal">
      <div class="modal-content">
        <span class="close-button">&times;</span>
        <img id="modal-image" src="" alt="">
        <h3 id="modal-name"></h3>
        <p id="modal-text" class="text"></p>
        <p id="modal-price" class="price"></p>
      </div>
    </div>
    <p class="another">さらに豊富なパンのバリエーションもご用意しております。<br>シンプルなプレーンパンから風味豊かなハーブパン、クリーミーなチーズパンまで、お好みに合わせてお選びいただけます。<br>季節限定の特別なパンも登場することがありますので、ぜひご期待ください。</p>
  </main>
  <!-- mainここまで -->

  <!-- footerここから -->
  <footer class="footer">
    <nav class="site-menu">
      <ul>
        <li><a href="./concept.html">CONCEPT</a></li>
        <li><a href="./menu.html">MENU</a></li>
        <li><a href="./shop.html">SHOP</a></li>
        <li><a href="./access.html">ACCESS</a></li>
      </ul>
    </nav>
    <a class="footer-logo" href="./index.html">
      <img src="./images/common/logo-footer.png" alt="KISSA">
    </a>
    <p class="footer-tel">TEL 01-2345-6789</p>
    <p class="footer-time">OPEN Fri-Sun 11:00-16:00</p>
    <p class="copyright"><small>&copy;Kissa</small></p>
  </footer>
  <!-- footerここまで -->

</body>

</html>

CSS

@charset "utf-8";

.title {
  height: 310px;
  background-image: url(../images/menu/bg-main.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  text-shadow: 1px 1px 10px #4b2c14;
}

.title h1 {
  font-family: 'Montserrat', sans-serif;
  font-size: 32px;
  font-weight: bold;
}

.title p {
  font-size: 14px;
  margin-top: 15px;
}

.item-list {
  width: 930px;
  max-width: 90%;
  margin-top: 75px;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, 240px);
  column-gap: 95px;
  row-gap: 70px;
  justify-content: center;
}

.item {
  margin-top: 20px;
  position: relative;
}

.item h3 {
  font-weight: bold;
  margin-top: 10px;
}

.item .text {
  font-size: 13px;
  line-height: 20px;
  margin-top: 10px;
}

.item .price {
  font-weight: bold;
  margin-top: 15px;
}


.item .label {
  position: absolute;
  top: 0;
  left: calc(100% + 18px);
  font-size: 10px;
  white-space: nowrap;
  transform-origin: top left;
  transform: rotate(90deg);
}

.another {
  font-size: 12px;
  max-width: 930px;
  margin: 30px auto;
  line-height: 15px;
}

.modal {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  width: 40%;
  max-height: 70vh;
  overflow: hidden;
  border-radius: 10px;
  border: 0.1px solid rgb(54, 54, 54); /* 黒い枠線を追加 */
  background-color: white; /* 背景を白に設定 */
}

.modal-content {
  padding: 20px;
  text-align: center;
  border-radius: 5px;
  width: 100%;
  height: 100%;
  overflow: auto;
  white-space: normal;
}

/* 以下のスタイルは必要に応じて調整してください */
#modal-image {
  max-width: 80%;
  max-height: 40vh;
  margin: 0 auto;
  display: block;
}

#modal-name {
  margin-top: 10px;
}

#modal-text {
  margin-top: 10px;
  margin-bottom: 10px;
  line-height: 20px;
}

.close-button {
  position: absolute;
  top: 20px;
  right: 10px;
  font-size: 20px;
  cursor: pointer;
}

/* モーダルウィンドウが表示されたときにスクロールを禁止 */
.modal.active {
  overflow: hidden;
}

.footer {
  margin-top: 100px;
}

@media (max-width: 800px) {
  .item-list {
    margin-top: 45px;
    row-gap: 40px;
  }

  .another {
    font-size: 12px;
    max-width: 90%;
    margin: 20px 15px;
    line-height: 20px;
  }
}

.modal {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 95%;
  max-height: 95%;
}

javascript

const menuList = document.querySelector('.item-list');
const modal = document.getElementById('modal');
const modalImage = document.getElementById('modal-image');
const modalName = document.getElementById('modal-name');
const modalText = document.getElementById('modal-text');
const modalPrice = document.getElementById('modal-price');
const closeButton = document.querySelector('.close-button');

const lists = [
  {
    img: './images/menu/img-item01.jpg',
    name: "小麦パン",
    text: "小麦の芳醇な香りと、そのバリエーション無限大のアレンジが、食卓に感動をもたらします。",
    price: "¥460",
    label: "WHEAT BREAD"
  },
  {
    img: './images/menu/img-item02.jpg',
    name: "クロワッサン",
    text: "外はサクサク、中はバターの豊かな風味で、贅沢な味わいが広がります。食べるたびに幸福感が満ち、本物のクロワッサンの魅力に溺れることでしょう。",
    price: "¥280",
    label: "CROISSANT"
  },
  {
    img: './images/menu/img-item03.jpg',
    name: "チョコブレッド",
    text: "控えめな甘さが特徴で、くどくならずに何個でもペロリと食べられる一品。心地よい舌触りとチョコレートの楽しさが、甘いひとときを演出します。",
    price: "¥320",
    label: "CHOCOLATE BREAD"
  },
  {
    img: './images/menu/img-item04.jpg',
    name: "白パン",
    text: "ふわっとした食感が特徴の白パン。シンプルながらもそのままでも楽しめ、食卓の主役としても脇役としても最適です。どんな料理とも調和し、素材の味わいを引き立てます。",
    price: "¥80",
    label: "WHITE BREAD"
  },
  {
    img: './images/menu/img-item05.jpg',
    name: "ブルーベリーマフィン",
    text: "ジューシーなブルーベリーの甘酸っぱさが、しっとりとしたマフィンの中に広がります。ひと口食べれば、素材の風味と絶妙なバランスが口いっぱいに広がります。",
    price: "¥320",
    label: "BLUEBERRY MUFFIN"
  },
  {
    img: './images/menu/img-item06.jpg',
    name: "ラズベリーパン",
    text: "薄めの生地で包み込まれたラズベリーが、口の中で爽やかな酸味と甘みを広げます。",
    price: "¥360",
    label: "RASPBERRY BREAD"
  },
  {
    img: './images/menu/img-item07.png',
    name: "サンドイッチ各種",
    text: "朝どれ卵と自家製野菜を使ったサンドイッチは、贅沢な一口。<br>BLTサンドや照り焼きチキンサンドや野菜サンドなどのバリエーションもご用意し、食事の楽しみを広げます。",
    price: "¥520～",
    label: "SANDWICHES"
  },
  {
    img: './images/menu/img-item08.jpg',
    name: "ミニピザ",
    text: "手のひらサイズのピザは、シンプルながら濃厚な味わい。チーズとサラミが絶妙に調和し、店内で焼くか、家に帰ってトースターで焼くかをお選びいただき、アツアツの美味しさを楽しめます。",
    price: "¥210",
    label: "MINI PIZZA"
  },
  {
    img: './images/menu/img-item09.jpg',
    name: "クッキー各種",
    text: "甘さ控えめで、レーズンやナッツの食感が心地よいクッキー。おやつやお土産に最適です。プレーンやチョコチップクッキーなど、様々なバリエーションもお楽しみいただけます。どの商品も、心温まる味わいと共に特別な一時を演出します。",
    price: "¥80",
    label: "COOKIES"
  },
  {
    img: './images/menu/img-item10.jpg',
    name: "ジャム各種",
    text: "甘さと酸味の絶妙なバランスが特長です。朝食のお供にも、スイーツのアクセントにも最適。素材の鮮度と風味を大切に仕上げています。\nオレンジピールジャム、いちごジャム、ブルベリージャムなど、バラエティ豊かなフレーバーをご用意しています。",
    price: "各¥580",
    label: "JAMS"
  },
];

lists.forEach(item => {
  const { img, name, text, price, label } = item;
  const menuItem = document.createElement('div');
  menuItem.classList.add('item');
  menuItem.innerHTML = `
    <img src="${img}" alt="">
    <h3>${name}</h3>
    <p class="text">${text}</p>
    <p class="price">${price}</p>
    <p class="label">${label}</p>
  `;
  menuItem.addEventListener('click', () => {
    modalImage.src = img;
    modalName.textContent = name;
    modalText.textContent = text.replace(/\n/g, "<br>"); // 改行を<br>タグに変換
    modalPrice.textContent = price;
    modal.style.display = 'block';
  });
  menuList.appendChild(menuItem);
});

closeButton.addEventListener('click', () => {
  modal.style.display = 'none';
});

window.addEventListener('click', event => {
  if (event.target === modal) {
    modal.style.display = 'none';
  }
});