body {
      margin: 0;
      font-family: sans-serif;
      background-color: #f0f0f0;
    }

    .container {
      display: flex;
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
    }

    /* 左列 */
    .left-column {
      width: 280px;
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .right-column {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 20px;
      margin-left: 20px; /* 左列と右列の間にスペース */
    }

    .box {
      background: white;
      padding: 15px;
      border: 1px solid #ccc;
      box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
    }

    .box h2 {
      font-size: 18px;
      margin-top: 2;
      padding-left: 15px;
      padding-bottom: 2px;
    }

    /* メニューの背景色設定 */
    .menu-box {
      background-color: #D9D9FF;
      margin-top: 0px;
      margin-left: 0px;
      margin-bottom: 0px;
      padding: 0;
    }

    .menu-box h2 {
      font-size: 18px;
      margin-top: 10px;
      margin-left: 15px;
      margin-bottom: 8px;
      padding-left: 10px;
    }

    .menu-box ul {
      color: #000000;
      margin: 0;
      padding: 0;
      list-style: none;
      background: white;
    }

    .menu-box li {
      padding-top: 3px;
      padding-left: 10px;
      padding-bottom: 3px;
      background: transparent;
    }

    .menu-box a {
      text-decoration: none;
      color: #a260bf;
      display: block;
      padding-top: 3px;
      padding-left: 20px;
      padding-bottom: 3px;
      font-size: 15px;
    }

    .menu-box a:hover {
      color: #5F4C86;
    }

    /* 右列のメインコンテンツ */
    .main-content, .para-box {
      background-color: #D9D9FF; /* 左列と同じ背景色 */
      padding: 0px;
      margin: 0px;
      border: 1px solid #ccc;
      box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
    }

    .main-content h2 {
      font-size: 18px;
      margin-top: 10px;
      margin-left: 5px;
      margin-bottom: 8px;
    }

    .main-content ul {
      margin: 0;
      padding: 0;
      list-style: none;
      background: white;
    }

    .main-content li {
      color: #a260bf;
      padding-top: 3px;
      padding-left: 10px;
      padding-bottom: 3px;
      list-style: none;
      background: transparent;
    }

    .main-content a {
      padding-top: 3px;
      padding-left: 20px;
      padding-bottom: 3px;
      font-size: 15px;
      list-style: none;
      background: white;
      text-decoration: none;
      color: #a260bf;
      font-size: 16px;
    }

    .main-content a:hover {
      color: #5F4C86;
    }

    /* メディアクエリでレイアウトの変更 */
    @media (max-width: 768px) {
      .container {
        flex-direction: column;
      }

      .left-column, .right-column {
        width: 100%;
        margin-left: 0; /* スマホ表示で左列と右列の間のマージンを削除 */
      }

      .main-content {
        margin-left: 0;
      }
    }
p {
  font-size: 16px;
  font-weight: bold;
  text-align: center;
}

/***追従するトップへ戻るボタン***/
#page-top {
    position: fixed;
    right: 5px;
    bottom: 20px;
    height: 50px;
    text-decoration: none;
    font-weight: bold;
    transform: rotate(90deg);
    font-size: 90%;
    line-height: 1.5rem;
    color: #737373;
    padding: 0 0 0 35px;
    border-top: solid 1px;
}
#page-top::before {
    content: "";
    display: block;
    position: absolute;
    top: -1px;
    left: 0px;
    width: 15px;
    border-top: solid 1px;
    transform: rotate(35deg);
    transform-origin: left top;
}
/***トップへ戻るボタンここまで***/