Harigami
ログイン
anonymous SPサンプル 電話○店舗○の場合・電話テンプレート・店舗テンプレート
No License HTML
コピー
<div class="nav__wrapper nav__wrapper--date js-nav__wrapper--date js-lazy">
  <div class="nav__box">
    <div class="nav__box__contact">
      <button class="nav__box__contact__button nav__box__contact__button--tel is-available js-contact__tel__btn">
        <div>電話予約</div>
      </button>
      <button class="nav__box__contact__button nav__box__contact__button--store is-available js-contact__store__btn">
        <div>店舗予約</div>
      </button>
    </div>
    <div class="nav__box__select-button">
      <button class="js-popup__steps-modal button button--color-accent">人数・日付を選択</button>
    </div>
  </div>
</div>

<div class="item--store__container shop-modal general-modal">
  <h2 class="item--store__container--title">店舗にてお問い合わせ・ご予約<button class="modal-close general-modal__close__btn"></button></h2>
  <div class="item--store">
    <div class="item--store__title">店舗にて<span>お問い合わせ・ご予約</span></div>
    <div class="store-template">
      <!-- 店舗テンプレート -->
    </div>
  </div>
</div>
<div class="item-tel__container tel-modal general-modal">
  <h2 class="item-tel__container--title">お電話にてお問い合わせ・ご予約<button class="modal-close general-modal__close__btn"></button></h2>
  <div class="item-tel">
    <div class="item-tel__title">お電話にて<span>お問い合わせ・ご予約</span></div>
    <div class="item-tel__tour__info">
      <h3 class="item-tel__tour__info--title">■初夢フェア第2弾■【オンライン限定】LeaLeaトロリー滞在中乗り放題 ゴールドパス付!ハワイ5日間</h3>
      <div class="item-tel__tour__info--text">エコノミークラスホテルに滞在<3名1室利用不可></div>
      <div class="item-tel__tour__info__price__range">
        <span class="item-tel__tour__info__price__range--lower">109,800円</span>~<span class="item-tel__tour__info__price__range--upper">129,000円</span>
      </div>
      <div class="item-tel__tour__info__code">
        <div class="item-tel__tour__info__code--title">ツアーコード</div>
        <div class="item-tel__tour__info__code--number">TC-EHP0004-FH251</div>
      </div>
      <div class="item-tel__tour__info__code">
        <div class="item-tel__tour__info__code--title">一枚刷りコード</div>
        <div class="item-tel__tour__info__code--number">HWI004-A</div>
      </div>
    </div>
    <div class="item-tel__smartcall">
      <h3 class="item-tel__smartcall--title">旅スマコール</h3>
      <div class="item-tel__smartcall__info">
        <h3 class="item-tel__smartcall__info--title">通常のお電話よりも簡単・スムーズ!</h3>
        <p class="item-tel__smartcall__info--text">ご覧になっている商品情報がスタッフに伝わり、通常のお電話よりも簡単でスムーズにお問い合わせ・予約ができる電話サービスです。</p>
        <div class="item-tel__smartcall__info--btn">
          <button class="">電話番号を表示する</button>
        </div>
      </div>
    </div>
    <div class="item-tel__call">
      <h3 class="item-tel__call--title">通常のお電話にて<span>お問い合わせ</span></h3>
      <div class="item-tel__call__code">
        <div class="item-tel__call__code--title">ツアーコード:</div>
        <div class="item-tel__call__code--text"><span class="code_number">TC-FSA0001-SP154</span>を</div>
        <div class="item-tel__call__code--text">お伝えください。</div>
      </div>
    </div>
    <div class="item-tel__contact__info tel-template">
      <!-- 電話テンプレート -->
    </div>
  </div>
</div>

<div class="nav__wrapper nav__wrapper--reserve">
  <div class="nav__box">
    <div class="nav__box__info_selected">
      <div class="nav__box__total-price">
        <div class="total-price__content">
          <span class="total-price__content--title">合計</span><span class="total-price__content--price">1,126,110</span><span class="price__yen">円</span>
        </div>
      </div>
      <div class="nav__box__info_selected__passenger">
        <div class="nav__box__info_selected__passenger__info">
          <span class="nav__box__info_selected__passenger__info--count">4</span>名<span class="nav__box__info_selected__passenger__info--date">2020/10/10</span>
          出発
        </div>
      </div>
    </div>
    <div class="nav__box__info_selected">
      <div class="nav__box__total-price">
        <button class="nav__box__arrange button button--type-outline js-edit-selection">人数・出発日変更</button>
      </div>
      <div class="nav__box__info_selected__passenger">
        <button class="nav__box__reserve-btn button button--color-accent js-popup__terms-modal">予約へ進む</button>
      </div>
    </div>


  </div>
</div>


<div class="nav__wrapper nav__wrapper--date js-nav__wrapper--date js-lazy">
  <div class="nav__box">
    <div class="nav__box__contact">
      <button class="nav__box__contact__button nav__box__contact__button--tel is-available js-contact__tel__btn">
        <div>電話予約</div>
      </button>
      <button class="nav__box__contact__button nav__box__contact__button--store is-available js-contact__store__btn">
        <div>店舗予約</div>
      </button>
    </div>
    <div class="nav__box__select-button">
      <button class="js-popup__steps-modal button button--color-accent">人数・日付を選択</button>
    </div>
  </div>
</div>

<div class="item--store__container shop-modal general-modal">
  <h2 class="item--store__container--title">店舗にてお問い合わせ・ご予約<button class="modal-close general-modal__close__btn"></button></h2>
  <div class="item--store">
    <div class="item--store__title">店舗にて<span>お問い合わせ・ご予約</span></div>
    <div class="store-template">
      <!-- 店舗テンプレート -->
    </div>
  </div>
</div>
<div class="item-tel__container tel-modal general-modal">
  <h2 class="item-tel__container--title">お電話にてお問い合わせ・ご予約<button class="modal-close general-modal__close__btn"></button></h2>
  <div class="item-tel">
    <div class="item-tel__title">お電話にて<span>お問い合わせ・ご予約</span></div>
    <div class="item-tel__tour__info">
      <h3 class="item-tel__tour__info--title">■初夢フェア第2弾■【オンライン限定】LeaLeaトロリー滞在中乗り放題 ゴールドパス付!ハワイ5日間</h3>
      <div class="item-tel__tour__info--text">エコノミークラスホテルに滞在<3名1室利用不可></div>
      <div class="item-tel__tour__info__price__range">
        <span class="item-tel__tour__info__price__range--lower">109,800円</span>~<span class="item-tel__tour__info__price__range--upper">129,000円</span>
      </div>
      <div class="item-tel__tour__info__code">
        <div class="item-tel__tour__info__code--title">ツアーコード</div>
        <div class="item-tel__tour__info__code--number">TC-EHP0004-FH251</div>
      </div>
      <div class="item-tel__tour__info__code">
        <div class="item-tel__tour__info__code--title">一枚刷りコード</div>
        <div class="item-tel__tour__info__code--number">HWI004-A</div>
      </div>
    </div>
    <div class="item-tel__smartcall">
      <h3 class="item-tel__smartcall--title">旅スマコール</h3>
      <div class="item-tel__smartcall__info">
        <h3 class="item-tel__smartcall__info--title">通常のお電話よりも簡単・スムーズ!</h3>
        <p class="item-tel__smartcall__info--text">ご覧になっている商品情報がスタッフに伝わり、通常のお電話よりも簡単でスムーズにお問い合わせ・予約ができる電話サービスです。</p>
        <div class="item-tel__smartcall__info--btn">
          <button class="">電話番号を表示する</button>
        </div>
      </div>
    </div>
    <div class="item-tel__call">
      <h3 class="item-tel__call--title">通常のお電話にて<span>お問い合わせ</span></h3>
      <div class="item-tel__call__code">
        <div class="item-tel__call__code--title">ツアーコード:</div>
        <div class="item-tel__call__code--text"><span class="code_number">TC-FSA0001-SP154</span>を</div>
        <div class="item-tel__call__code--text">お伝えください。</div>
      </div>
    </div>
    <div class="item-tel__contact__info tel-template">
      <!-- 電話テンプレート -->
    </div>
  </div>
</div>

<div class="nav__wrapper nav__wrapper--reserve">
  <div class="nav__box">
    <div class="nav__box__info_selected">
      <div class="nav__box__total-price">
        <div class="total-price__content">
          <span class="total-price__content--title">合計</span><span class="total-price__content--price">1,126,110</span><span class="price__yen">円</span>
        </div>
      </div>
      <div class="nav__box__info_selected__passenger">
        <div class="nav__box__info_selected__passenger__info">
          <span class="nav__box__info_selected__passenger__info--count">4</span>名<span class="nav__box__info_selected__passenger__info--date">2020/10/10</span>
          出発
        </div>
      </div>
    </div>
    <div class="nav__box__info_selected">
      <div class="nav__box__total-price">
        <button class="nav__box__arrange button button--type-outline js-edit-selection">人数・出発日変更</button>
      </div>
      <div class="nav__box__info_selected__passenger">
        <button class="nav__box__reserve-btn button button--color-accent js-popup__terms-modal">予約へ進む</button>
      </div>
    </div>


  </div>
</div>


現在、コメントはありません。
他の人よりも先にコメントしましょう。