常連

### 実現したいこと

画面幅を狭めたときに、背景画像の上にのせている白いボックスが一緒に縮小するようにしたいです。
背景画像は画面幅いっぱいに表示される＋レスポンシブで設定しています。
https://jsfiddle.net/rupL3wfc/

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

画面最大幅では背景（紅茶画像）の左のあたりに白いボックスが表示されますが、画面幅を縮小していくとこの白いボックスの位置がどんどんずれてしまいます。
背景画像との比率を保ったままうまく縮小する方法を教えてください。

### 該当のソースコード

```HTML
<div id="wrapper">

<div class="Box">
<h2>タイトル</h2>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>

</div>
```

```css
#wrapper {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background: url("https://www.pakutaso.com/shared/img/thumb/ellycollection074_TP_V.jpg") center / cover;
}

.Box {
  position: absolute;
  top: 50%;
  left: 29%;
  transform: translateY(-50%) translateX(-29%);
  -webkit-transform: translateY(-50%) translateX(-29%);
  -ms-transform: translateY(-50%) translateX(-29%);
  max-width: 392px;
  max-height: 357px;
  background: #fff;
  padding: 50px;
}

.Box h2 {
  margin: 0;
  padding: 0;
  font-size: 18px;
}

.Box p {
  margin-top: 25px;
  font-size: 12px;
  line-height: 35px;
}
```

### 試したこと
メディアクエリを使用して画面幅ごとに「left：29%」の数値を減らして調整してみましたが、メディアクエリの指定がたくさん増えてしまい、もっと他に適切なやり方があれば知りたいと思っています。

画面幅を狭めた時、背景画像と一緒に上にのせている要素も縮小するようにしたい

js初学者です。
現在、アコーディオンの作成で困っている箇所があり、どうしても解決ができ無いため質問させていただきます。


【解決したい内容】
①、SP表示のハンバーガーメニュー内、アコーディオンにしている箇所の矢印をクリックすると、アコーディオンにしている全てのタブが開いてしまう。
これを、1つづつ開くようにしたい。
②、1つ開いたら、他のアコーディオンを自動で閉じるようにしたい。
③、アコーディオンにしている箇所の矢印も同時に動いてしまうので、開いている箇所だけ動くようにしたい。


知識が無く、調べながら作りましたが、この３つだけがどうしても解決でき無いため、ご教示いただけますと幸甚です。


【状況画像】
下記が閉じている状態です。
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-05-22/4a61ab5a-ae73-4182-954e-71a14fea0f05.jpeg)

【状況画像】
下記が一つアコーディオンのタブを開いた時の状態です。（全てのアコーディオンが開いてしまい、矢印も全て動いてしまう。）
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-05-22/64915099-2c56-4bd9-99c8-887d05ac5697.jpeg)



```HTML
<nav class="bl_hbMenu hp_sp">
                <div class="bl_header_lCont hp_flex">
                    <h1 class="hp_flex"><img src="<?php echo get_template_directory_uri(); ?>/lib/images/common/logo.png" alt="アイランドレンタカーロゴ"><span>サイト名</span></h1>
                </div>
                <ul class="bl_hbMenu_wrap">

                    <li>
                        <div class="bl_hbMenu_cont hp_flex">
                            <div class="bl_hbMenu_cont_inner hp_flex">
                                <img src="<?php echo get_template_directory_uri(); ?>/lib/images/common/menu_icon01.png" alt="車種・料金表">
                                <p class="bl_hbMenu_contFont hp_menu_fontColor">車種・料金表</p>
                            </div>
                            <span class="bl_hbMenu_cont_arrow is_hbToggle"></span>
                        </div>


                        <ul class="bl_hbMenu_cont_child">
                            <li class="hp_flex">
                                <a href="<?php echo esc_url(home_url()); ?>/cost_genera/" class="bl_hbMenu_contFont hp_menu_fontColor">一般の方</a>
                                <span class="bl_hbMenu_cont_arrow02"></span>
                            </li>
                            <li class="hp_flex">
                                <a href="<?php echo esc_url(home_url()); ?>/cost_corporate/" class="bl_hbMenu_contFont hp_menu_fontColor">法人の方</a>
                                <span class="bl_hbMenu_cont_arrow02"></span>
                            </li>
                        </ul>
                    </li>

                    <li>
                        <div class="bl_hbMenu_cont hp_flex">
                            <a href="<?php echo esc_url(home_url()); ?>/guid/"" class=" bl_hbMenu_cont_inner hp_flex">
                                <img src="<?php echo get_template_directory_uri(); ?>/lib/images/common/menu_icon02.png" alt="ご利用案内">
                                <p class="bl_hbMenu_contFont hp_menu_fontColor">ご利用案内</p>
                            </a>
                            <span class="bl_hbMenu_cont_arrow is_hbToggle"></span>
                        </div>


                        <ul class="bl_hbMenu_cont_child">
                            <li class="hp_flex">
                                <a href="<?php echo esc_url(home_url()); ?>//" class="bl_hbMenu_contFont hp_menu_fontColor">ご利用から返却まで</a>
                                <span class="bl_hbMenu_cont_arrow02"></span>
                            </li>
                            <li class="hp_flex">
                                <a href="<?php echo esc_url(home_url()); ?>//" class="bl_hbMenu_contFont hp_menu_fontColor">予約キャンセル・変更</a>
                                <span class="bl_hbMenu_cont_arrow02"></span>
                            </li>
                            <li class="hp_flex">
                                <a href="<?php echo esc_url(home_url()); ?>//" class="bl_hbMenu_contFont hp_menu_fontColor">予約サイトの使い方</a>
                                <span class="bl_hbMenu_cont_arrow02"></span>
                            </li>
                            <li class="hp_flex">
                                <a href="<?php echo esc_url(home_url()); ?>//" class="bl_hbMenu_contFont hp_menu_fontColor">事故・故障</a>
                                <span class="bl_hbMenu_cont_arrow02"></span>
                            </li>
                            <li class="hp_flex">
                                <a href="<?php echo esc_url(home_url()); ?>//" class="bl_hbMenu_contFont hp_menu_fontColor">交通違反</a>
                                <span class="bl_hbMenu_cont_arrow02"></span>
                            </li>
                            <li class="hp_flex">
                                <a href="<?php echo esc_url(home_url()); ?>//" class="bl_hbMenu_contFont hp_menu_fontColor">保険・補償内容</a>
                                <span class="bl_hbMenu_cont_arrow02"></span>
                            </li>
                        </ul>
                    </li>




                    <li>
                        <div class="bl_hbMenu_cont hp_flex">
                            <a class="bl_hbMenu_cont_inner hp_flex">
                                <img src="<?php echo get_template_directory_uri(); ?>/lib/images/common/menu_icon03.png" alt="キャンペーン">
                                <p class="bl_hbMenu_contFont hp_menu_fontColor03">キャンペーン</p>
                            </a>
                            <span class="bl_hbMenu_cont_arrow02"></span>
                        </div>
                    </li>

                    <li>
                        <div class="bl_hbMenu_cont hp_flex">
                            <a href="<?php echo esc_url(home_url()); ?>//" class="bl_hbMenu_cont_inner hp_flex">
                                <img src="<?php echo get_template_directory_uri(); ?>/lib/images/common/menu_icon04.png" alt="アイランドの強み">
                                <p class="bl_hbMenu_contFont  hp_menu_fontColor04">アイランドの強み</p>
                            </a>
                            <span class="bl_hbMenu_cont_arrow02"></span>
                        </div>
                    </li>
                
【省略・・・】

                </ul>
            </nav>
```



```CSS
/* ナビ開いてる時のボタン */
  .el_hb.active span:nth-child(1) {
    top: 16px;
    left: 6px;
    transform: rotate(-45deg);
  }

  .el_hb.active span:nth-child(2),
  .el_hb.active span:nth-child(3) {
    top: 16px;
    transform: rotate(45deg);
  }

  /* ナビメニュー */
  .bl_hbMenu {
    position: fixed;
    z-index: 2;
    top: 0;
    left: 0;
    color: #000;
    background: #fff;
    transform: translateY(-100%);
    transition: all 0.6s;
    width: 100%;
    height: 100vh;
    overflow-y: scroll;
  }

  .bl_hbMenu .bl_header_lCont {
    padding: 2.7rem 2.3rem;
    width: 57rem;
  }

  .bl_hbMenu_wrap {
    background: #f2f1ec;
    margin: 0 auto;
    padding: 0;
    width: 100%;
    padding: 3rem;
  }

  .bl_hbMenu_wrap li {
    list-style-type: none;
    padding: 0;
    width: 100%;
  }

  .bl_hbMenu_wrap li:hover {
    opacity: 0.8;
  }

  .bl_hbMenu_cont {
    padding: 3rem 0;
    border-bottom: 2px solid #cccccc;
  }

  .bl_hbMenu_cont_inner {
    width: 80%;
    justify-content: flex-start;
  }

  .bl_hbMenu_cont_inner img {
    width: 10rem;
    height: auto;
    -o-object-fit: cover;
    object-fit: cover;
    margin: 0 3rem 0 0;
  }

  .bl_hbMenu_contFont {
    font-size: 3.2rem;
    font-weight: bold;
  }

  .bl_hbMenu_wrap li a {
    display: inherit;
    padding: 1em 0;
    text-decoration: none;
  }

  .bl_hbMenu_cont_child {
    display: none;
  }

  .bl_hbMenu_cont_child li a {
    width: 80%;
    padding: 3rem 0 3rem 13rem;
  }

  .bl_hbMenu_cont_child li {
    border-bottom: 2px solid #cccccc;
  }

  .bl_hbMenu_cont_arrow {
    position: relative;
    display: inline-block;
    content: "";
    width: 4.1rem;
    height: 3rem;
    background: url(../images/common/hd_arrow.svg) no-repeat center;
    background-size: contain;
    /* transition: 0.3s; */
  }
  .bl_hbMenu_cont_arrow02 {
    position: relative;
    display: inline-block;
    content: "";
    width: 3rem;
    height: 4.2rem;
    background: url(../images/common/hd_arrow03.svg) no-repeat center;
    background-size: contain;
  }

  /* このクラスを、jQueryで付与・削除する */
  .bl_hbMenu.active {
    transform: translateY(0%);
  }
  .is_hbToggleActive {
    background: url(../images/common/hd_arrow02.svg) no-repeat center;
    background-size: contain;
  }
} /*spサイズ 768px以下ここまで*/
```



```js
/*================================================
ハンバーガーメニュー
================================================*/
$(function () {
  $(".el_hb").click(function () {
    $(this).toggleClass("active");

    if ($(this).hasClass("active")) {
      $(".bl_hbMenu").addClass("active");
    } else {
      $(".bl_hbMenu").removeClass("active");
    }
  });
});

$(function () {
  $(".is_hbToggle").click(function () {
    $(".bl_hbMenu_cont_child").slideToggle();
  });
});

$(function () {
  $(".is_hbToggle").click(function () {
    $(this).toggleClass("is_hbToggleActive");

    if ($(this).hasClass("is_hbToggleActive")) {
      $(".is_hbToggle").addClass("is_hbToggleActive");
    } else {
      $(".is_hbToggle").removeClass("is_hbToggleActive");
    }
  });
});
```


js　アコーディオンをクリックすると複数のタブが開いてしまう。

画像の8つのピンクのボックスを、横に4つずつにして2列にわけたいのですが、どうすれば良いですか？


![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-04-30/b80053f7-b6ec-46ef-97d6-a2f7b83352ab.jpeg)
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-04-30/35694ac6-047c-42cf-bbd3-0af8e0b47921.jpeg)
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-04-30/14d63d27-777b-4b53-b766-5093caf95a5b.jpeg)
