class MobileMenu {
// コストラクタ関数を用意する
  constructor() {
// オブジェクトリテラルで初期化
  this.DOM = {};
  this.DOM.btn = document.querySelector('.mobile-menu__btn');
  this.DOM.cover = document.querySelector('.mobile-menu__cover');
// this.DOM.containerでないとエラーになるよ
  this.DOM.container = document.querySelector('#global-container');
  this.eventType = this._getEventType();
  this.__addEvent();
}

// プライベートメソッドにする(修正や保守のしやすさのため)
_getEventType() {
// スマホとデスクトップ対応するためにクリックかタッチかで処理をわける
  return window.ontouchstart ? "touchstart" : "click";
}

_toggle() {
// global-containerにクリックするたびにmenu-openを付加、解除
  this.DOM.container.classList.toggle("menu-open");
}
__addEvent() {
// ボタンが押されたら発火
this.DOM.btn.addEventListener(this.eventType, this._toggle.bind(this));
// カバーかクリックしたときに発火
this.DOM.cover.addEventListener(this.eventType, this._toggle.bind(this));
 }
}

.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: 70px,
$height: 1px,
$top: 50%,
// 線の長さ
$left: -75px
) {
// 棒線が伸びるアニメーション
  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%);
   }
  }
 }
}

//ロゴ
.logo {
  font-size: 42px;
  display: flex;

  &__img {
    width: 0.7em;
}

  &__Garden {
    color: $cWineRed;
 }
}
// スマホ画面のときサイド要素を非表示にする
.side {
  display: none;
// 固定する
   position: fixed;
// 画面の上から７０％から表示する
  top: 70%;
// ここは検証で試してみるとよい
  transform: translateY(-50%);
  transition: all 0.3s ease-in;
  & .tween-animate-title {
    color: $cBlack;
    text-decoration: none !important;
    margin: 0 40px;
// ロゴと文字の中心のズレを修正
    vertical-align: middle;
    letter-spacing: 2px;
}
// サイドバー左側の設定
  &.left {
    left: -50px;
  &.inview {
    left: 50px;
}
  & .side__inner {
// 左端を軸とするための設定
    transform-origin: top left;
// 文字を-９０度回転させる
    transform: rotate(-90deg);
}
}
// サイドバー右側の設定
  &.right {
    right: -50px;
  &.inview {
    right: 50px;
}
  & .side__inner {
// 右端を軸とするための設定
    transform-origin: top right;
// 文字を９０度回転させる
    transform: rotate(90deg);
  }
 }
}
.icon {
  position: relative;
@include p-base($left: -20px, $top: 50%, $width: 1em, $height: 1em) {
transform: translateY(-50%);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
//ロゴの設定
  &.twitter {
     &::before {
      background-image: url(../images/twitter.svg);
 }
}
  &.fb {
  &::before {
    background-image: url(../images/facebook.svg);
  }
 }
}
// サイドバーのローカルスタッキングコンテキストを作るための設定 
#main-content {
 position: relative;
 z-index: 0;
}
// サイドバーより背面にしたい 
main {
 position: relative;
 z-index: -1;
 }

// Stylesheet: 600px以上のタブレットやモニタで適用
.flex {
// 横に2列したいときの設定
  flex-direction: row;
// これを設定しないとflex-basisが変わらない
  flex-wrap: wrap;
}

.flowers {
  &__item {
    flex-basis: 50%;
    margin-bottom: 60px;
}
}

.popular {
  &__container {
// 余白を真ん中にしたい
     justify-content: space-between;
}

  &__item {
    flex-basis: 47%;
}
}

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

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

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

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

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

.font-sm {
  font-size: 16px;
}
.font-md {
  font-size: 19px;
}
.font-lr {
  font-size: 23px;
}
.font-lg {
  font-size: 36px;
}
.mb-lg {
  margin-bottom: 150px !important;
}
.pb-lg {
  padding-bottom: 150px !important;
}

.popular {
  &__item {
    flex-basis: 25%;
}

  &__img {
    height: 335px;
}
}

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

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

.footer {
  &__li {
    justify-content: flex-start;
}
}
// 960以上ではヘッダー表示
.header {
  &__nav {
    display: block;
}
}
// ハンバーガーメニューを非表示にする(モバイル用でないため)
.mobile-menu {
  &__btn {
    display: none;
}
}
// スワイパースライドに影をつける
.swiper-slide {
  box-shadow: 0 8px 40px -10px rgba(0, 0, 0, 0.8);
}

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

.world {
  &__inner {
    padding: 50px 150px;
}
}
.popular {
  &__item {
    flex-basis: 23%;
}
}
// サイドバー要素を表示する
.side {
  display: block;
}

$cWhite: white;
$cBlack: black;
$cSubTitle: #535353;
$cBgGray: #eaebe6;
$cWineRed: #904669;
$contentMaxWidth: 1070px;
$navHeight: 100px;

<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>