勝手に改行されるのでそれの原因と解決方法をご教授ください

    <div class="top">
      <div class="box">
        <h2 class="copy">地域に密着した<br>Web制作を</h2>
        <p class="copy-text">地域に密着したWeb制作があります。

          <br>戦況分析から戦略の設定、分析・改善も提案しお客様の事業に貢献させて頂きます。
          <br> お客様1人1人に寄り添うWeb制作で一緒に課題を解決します。

        </p>

        <a href="" class="btn btn--orange">お問い合わせはこちら</a>
      </div>
      <div class="min-box">
        <div class="top-img"></div>
      </div>

    </div>

/* ボタン */
*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

.btn,
a.btn,
button.btn {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  border-radius: 0.5rem;
}

.btn--orange,
a.btn--orange {
  color: #fff;
  background-color: #000;
}

.btn--orange:hover,
a.btn--orange:hover {
  color: #fff;
  background: #000;
}

/* /ボタン */



.top {
  color: #000;
  margin-left: 20rem;
  /* padding-top: 30rem; */
  display: flex;

}



.copy {
  font-family: "Noto Sans JP", メイリオ, Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
  font-size: 5rem;
  font-weight: 900;
  font-feature-settings: "palt";
}

.copy-text {
  font-family: "Noto Sans JP", serif;
  font-size: 2rem;
  padding-top: 2rem;
  padding-bottom: 3rem;
  font-weight: bold;
}

.box {
  position: relative;
  z-index: 1;
  padding-top: 30rem;
}

.min-box {
  height: 60rem;
  margin-right: 2rem;
  width: 200rem;
}

.top-img {
  background-image: url(../img/img_grand-visual-1_pc.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  z-index: 1;
  margin-top: 15rem;
}

y_waiwai

2021/10/05 13:03

どうなればいいんでしょうかあまりに説明不足すぎです

yamato47

2021/10/05 13:18

見返したらとても説明不足でした。申し訳ございません。画像の丸で囲んでいる部分を矢印の先にもってきたいです。

hatena19

2021/10/05 13:39

テキストが背景画像のところで折り返されてますが、折り返さずに、背景画像に重なるようにしたいということでしょうか。

yamato47

2021/10/05 14:31

折り返さないで重なるようにしたいです

行動規範の内容に同意します

回答2件

ベストアンサー

折り返さずに、背景画像に重なるようにしたい

flex で横並びにせずに、.min-box を position: absolute; で絶対配置すればどうでしょう。

例えば、

css
1.top {
2  position: relative;
3}
4.min-box {
5  position: absolute;
6  top: 0;
7  left: 30%;
8}

あるいは、HTMLの min-box は削除して、topに背景画像を設定したほうがシンプルにできそうです。

css
1.top {
2  background-image: url(../img/img_grand-visual-1_pc.jpg);
3  background-repeat: no-repeat;
4  background-size: cover;
5  background-position-x: 30%;
6}