<main>
  <section class="world">
    <div class="world__inner">
      <div class="world__img cover-slide">
    <img class="img-zoom" src="images/Birthday.jpg" alt=""/>
    </div>
     <div class="world__texts appear left">
      <div class="world__texts-inner">
       <div class="world__title main-title item">
      <span class="purple">Floroj </span>
     <span>de la mondo</span>
   </div>
   <div class="world__sub sub-title item">世界のお花をあなたに</div>
    <div class="world__description item">
     <p>世界１５０ヶ国の花を<br />あなたにお届けします。</p>
     <p>あなたの望む花がきっと見つかります。</p>
     </div>
    <div class="world__btn item">
     <button class="btn filled">もっと詳しく</button>
    </div>
   </div>
  </div>
 </div>
</section>

.world {
  &__inner {
    padding: 50px;
}
  &__texts,
  &__img {
    flex-basis: 47%;
}

  &__texts {
    display: flex;
// 文字を下揃えにするときに便利な設定
    align-items: flex-end;
}
}

.world {
  &__img {
    height: 400px;
}

  &__description {
    margin-bottom: 40px;
}
  &__title {
// アニメーションを表示するための設定
  &::before {
//960pxより上はアニメーションを表示する
    display: block;
  }
 }
}

// Stylesheet: 1280px以上のモニタで適用

  .world {
  &__inner {
    padding: 50px 150px;
 }
}

.world {
  @extend .content-width;
  @extend .mb-lg;
// 親要素でローカルスタッキングコンテキストを作るために必要
  &__inner {
    @extend .flex;
    justify-content: space-between;
    padding: 15px;
    background-color: $cBgGray;
// 下の２つはローカルスタッキングコンテキストを作る設定
    position: relative;
    z-index: 0;
}

  &__title {
// 横線の位置決め
    position: relative;
// 疑似要素で出力する
@include p-base(
$display: none,
$width: 100px,
$height: 1px,
$top: 50%,
$left: -120px
) {
// 棒線が伸びるアニメーション
  background-color: $cBlack;
  transform: translateY(-50%) scaleX(0);
// 右側を中心に伸びるアニメーション
  transition: transform 0.3s ease 1.6s;
  transform-origin: right;
 }
}

  &__sub {
    @extend .mb-sm;
}

  &__img {
    height: 300px;
    @extend .mb-sm;
// アニメーションが終わったときに表示したいので
    transition: box-shadow 1ms linear 0.8s;
  & > img {
    position: relative;
// ボックスシャドウを背面につけるための設定
    z-index: -1;
// 画像には基本object-fitをつける
    object-fit: cover;
// 画像の上部分を中心にしたいので
    object-position: top;
// 外側の親要素タテヨコ100％で画像が表示される
    width: 100%;
    height: 100%;
}

  &.inview {
// 画面内に入ったとき内側にボックスシャドウを付ける設定
    box-shadow: inset 0 0 30px $cBlack;
 }
}

  &__texts {
    @extend .pb-sm;
// 横線のアニメーションの設定
  &.inview {
  & .world__title::before {
//右から左に線が伸びるように
    transform: translateY(-50%);
  }
 }
}
}

<footer class="footer appear up">
  <div class="logo item">
  <img src="images/logo.svg" alt="" class="logo__img" />
    <span class="logo__floroj">Floroj</span>
    <span class="logo__de-la-mondo"> de la mondo</span>
  </div>
    <nav class="footer__nav">
      <ul class="footer__ul">
<li class="footer__li item"><a href="#">Service</a></li>
<li class="footer__li item"><a href="#">Contact</a></li>
<li class="footer__li item"><a href="#">Company</a></li>
<li class="footer__li item"><a href="#">Sitemap</a></li>
      </ul>
      <div class="footer__copyright item">
        © Ota
      </div>
     </nav>
</footer>

.footer {
  padding: 60px 0;
    @extend .content-width;

  &__nav {
    @extend .flex;
    justify-content: space-between;
// 中央揃えにする
    align-items: center;
    text-align: center;
}

  &__ul {
  @extend .flex;
// パディングやマージンを初期化
    padding: 0;
    margin: 0;
    list-style: none;
}

  &__li {
    padding: 0;
    margin: 10px;

  & > a {
    color: $cSubTitle;
 }
}

  & .logo {
    font-size: 38px;
// 中央揃えにする
    justify-content: center;
 }
}
.logo {
    font-size: 42px;
    display: flex;

  &__img {
    width: 0.7em;
}

  &__floroj {
    color: $cWineRed;
  }
}

.footer {
  & .logo {
// 左寄りにする。右寄りはflex-end
    justify-content: flex-start;
}

  &__li {
// 検証を使いながら位置調整
    margin-left: 0;
    margin-right: 30px;
 }
}

.footer {
  &__li {
    justify-content: flex-start;
 }
}