/* ---------------下記はテンプレート用のスタイル（削除するとiframeのスタイルが適用されなくなります）--------------- */

/* 子要素にoverlay.hiddenを持っていないbodyはスクロールさせない */
body.noscroll {
  overflow: hidden;
}

.lp-iframe {
  width: 100%;
  height: 100%;
}

#lp-header.fixed {
  top: 0;
  position: sticky;
  z-index: 1;
}

/* ヘッダーの固定高さ設定 */
#lp-header {
  height: 107px; /* SP時のデフォルト高さ */
}

/* PC時のヘッダー高さ */
@media (min-width: 768px) {
  #lp-header {
    height: 72px;
  }
}

/* ドロワーアニメーション */
#lp-drawer {
  background-color: black;
  z-index: 1000;
  
  /* 初期状態（非表示） */
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;
  opacity: 0;
  transform: scale(0.96);
  visibility: hidden;
  
  /* トランジション設定 */
  transition: 
    opacity 0.4s cubic-bezier(0.8, 0, 0.2, 1),
    transform 0.4s cubic-bezier(0.8, 0, 0.2, 1),
    visibility 0.4s;
}

/* ドロワー表示状態 */
#lp-drawer.is-open {
  opacity: 1;
  transform: scale(1);
  visibility: visible;
}

/* ---------------ここまでテンプレート用のスタイル（削除するとiframeのスタイルが適用されなくなります）--------------- */