/* `.appear` は既定で opacity:0。JS が動かないと本文が透明のままになる。 */
html:not(.lp-js) .appear {
  opacity: 1 !important;
  translate: none !important;
  scale: none !important;
  rotate: none !important;
  transform: none !important;
}

/* 取り込んだ CSS の font-family は Web フォント単体で fallback を持たない。 */
:root {
  --lp-font-fallback: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
}

/*
 * アイコンを除外する理由: `.material-icons` 側の指定は `:where(.render-canvas)` 配下で
 * 詳細度が `.sd` と同じ (0,1,0) なので、後から読まれるこのファイルが勝ってしまい、
 * アイコンがリガチャ名 (`chevron_right`) の文字として表示される。
 */
body,
.sd:not(.material-icons):not([class*='material-symbols']) {
  font-family: var(--s-font-b199aca1), var(--lp-font-fallback);
}

/*
 * A1ゴシック R JIS2004 は TypeSquare / FontPlus のライセンスフォント。自社ホストへの
 * 複製が再配布にあたる可能性があるため取り込まず、Noto Sans JP に落としている。
 *   TODO: 契約を確認し、自社配信の可否を決める
 */
:root {
  --s-font-24a0cacb: 'Noto Sans JP', var(--lp-font-fallback);
}

@media (prefers-reduced-motion: reduce) {
  .appear {
    opacity: 1 !important;
    translate: none !important;
    scale: none !important;
    rotate: none !important;
    transform: none !important;
    transition: none !important;
  }
}

/* `[hidden]` は UA スタイル由来で弱く、取り込んだ CSS の display に負ける。 */
[data-lp-modal][hidden] {
  display: none !important;
}

html.lp-modal-open,
html.lp-modal-open body {
  overflow: hidden;
}

/*
 * モーダルの開閉アニメーション。取り込んだ CSS には STUDIO が使っていた Vue の
 * Transition 用 transition (`.design-canvas__modal.v-enter-active .studio-canvas` など)
 * が残っていて、lp.js がその 2 つのクラスを付け外しする。開始状態だけは STUDIO の
 * ランタイムが inline style で入れていたため静的化した HTML に残っておらず、終了状態
 * (`opacity: 1; transform: none`) だけがある。ここで開始状態を書き戻す。
 * inline style に勝たせる必要があるので `!important`。
 *
 * 時間は取り込んだ CSS の 0.4s に揃えてあり、lp.js の MODAL_ANIM_MS も同じ値。
 */
[data-lp-modal].lp-modal-from .design-canvas__modal__base,
[data-lp-modal].lp-modal-from .studio-canvas {
  opacity: 0 !important;
}

/* メニューは右端に寄せたドロワーなので、右から出して右へ引っ込める。 */
[data-lp-modal='menu'].lp-modal-from .studio-canvas {
  opacity: 1 !important;
  transform: translateX(100%) !important;
}

/* 画面外へ出したパネルで横スクロールバーが出ないよう、動いている間だけ切る。 */
[data-lp-modal='menu'].lp-modal-anim .design-canvas__modal {
  overflow: clip;
}

/*
 * 閉じ終わるまでの 0.4s の間、消えかけのパネルや背景を踏めないようにする。
 * `.design-canvas__modal__base` 側が `pointer-events: auto` を持っているので、
 * 親に付けるだけでは戻ってしまう。
 */
[data-lp-modal].lp-modal-from,
[data-lp-modal].lp-modal-from * {
  pointer-events: none !important;
}

/*
 * item は ul の直接の子のままにする。取り込んだ CSS が item に `height: 100%` を
 * 指定しているので、ラッパーを挟むと高さの解決先が変わり潰れる (138px -> 40px)。
 */
[data-lp-carousel] > [data-lp-slide] {
  transition: transform 600ms cubic-bezier(0.58, 0.21, 0.41, 0.96);
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  [data-lp-carousel] > [data-lp-slide] {
    transition: none;
  }
}

/* 「3つの魅力」の下に出る 1px の白い線を消す。 */
.sd[data-s-ef97cfb5-0613-40b3-ab9a-6d4c6c3edd24][data-s-ef97cfb5-0613-40b3-ab9a-6d4c6c3edd24] {
  margin-top: -1px;
}