/* ==========================================================
   deco.css
   LP の余白に置く小さなイラスト（鍵・提灯・虫眼鏡など）（STEP AD）

   ■ 置き方（index.html に <img> を1行足すだけ）
     <img class="lp-deco lp-deco--heading" src="assets-web/deco/key.webp"
          alt="" aria-hidden="true" style="--deco-size: 40px; --deco-rotate: -12deg">

     ・lp-deco--heading … 見出し（.lp-heading）の中に置くと、見出しの右の余白に入る
     ・lp-deco--free    … セクションの中の好きな位置に置く
                          style の --deco-top / --deco-right / --deco-bottom / --deco-left で位置を指定
     ・--deco-size   … 大きさ（幅。高さは画像の縦横比のまま）
     ・--deco-rotate … 傾き
     ・--deco-y      … （lp-deco--heading のとき）縦の位置。見出しの高さに対する割合（初期値 50%）
     ・--deco-opacity … 濃さ（0〜1）

   ■ 画像の置き場所：assets-web/deco/（元の画像は assets/deco/）
     差し替えるときは同じ名前で上書きするか、新しい名前で保存して src を書き換える
     （新しい名前にすると、スマホに古い画像が残っていても新しい画像が表示される）

   ■ 安全装置：js/deco.js が、飾りが文字やボタンに重なっている画面幅では
     その飾りを自動で隠す（本文を読む邪魔をしない）
========================================================== */

#lp .lp-heading,
#lp .lp-section {
  position: relative;             /* 飾りの位置の基準 */
}

/* 飾りを画面の端から少しはみ出させても、横スクロールが出ないようにする（STEP AF）
   （clip はスクロールできる箱を作らないので、ページのスクロールや固定ボタンには影響しない） */
#lp {
  overflow-x: clip;
}

#lp .lp-deco {
  position: absolute;
  z-index: 1;
  display: block;
  width: var(--deco-size, 40px);
  height: auto;
  max-width: none;
  opacity: var(--deco-opacity, 0.9);
  transform: rotate(var(--deco-rotate, 0deg));
  pointer-events: none;           /* 押しても何も起きない（下の文字やボタンの操作を邪魔しない） */
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

/* 見出しの右の余白（見出しの文字の高さの中央） */
#lp .lp-deco--heading {
  top: var(--deco-y, 50%);        /* 縦の位置（見出しの高さに対する割合。下の日本語の行の横なら 70% くらい） */
  right: 2px;
  transform: translateY(-50%) rotate(var(--deco-rotate, 0deg));
}

/* セクションの中の好きな位置 */
#lp .lp-deco--free {
  top: var(--deco-top, auto);
  right: var(--deco-right, auto);
  bottom: var(--deco-bottom, auto);
  left: var(--deco-left, auto);
}

/* 文字やボタンに重なる画面幅では隠す（js/deco.js が付ける） */
#lp .lp-deco.is-off {
  visibility: hidden;
}