@charset "UTF-8";
/* 400px正本を比例換算。pictureもCSSと同じ境界で切り替える。 */
@media (max-width: 779px) {
  #muffler-lp {
    /* Figma 198:2191 の座標を区間幅で比例換算する。 */
  }
  #muffler-lp .fv {
    aspect-ratio: 400/620;
  }
  #muffler-lp .fv-background {
    inset: 0;
  }
  #muffler-lp .fv-photo {
    left: 7.5%;
    top: 4.8387096774%;
    width: 85%;
    height: 90.3225806452%;
  }
  #muffler-lp .fv-layout--pc {
    display: none;
  }
  #muffler-lp .fv-layout--sp {
    display: contents;
  }
  #muffler-lp .color-variations {
    aspect-ratio: 400/137.414642334;
    margin-top: 16%;
  }
  #muffler-lp .cv-heading-text {
    font-size: 6cqw;
  }
  #muffler-lp .cv-viewport {
    top: 34.5048184431%;
    height: 65.4952037653%;
  }
  #muffler-lp .cv-track {
    left: -34.056640625%;
  }
  #muffler-lp .cv-set {
    width: 189.0137519836%;
  }
  #muffler-lp .cv-card {
    left: var(--sp-left);
    width: var(--sp-width);
  }
  #muffler-lp .cv-set:nth-child(3) {
    display: none;
  }
  /* 導入文（198:2160）と目次ラベル（198:2166）の文字枠が右へ約7u張り出し、ページに横スクロールが出るため、この区間の横だけ切る。 */
  #muffler-lp .lp-intro {
    overflow-x: clip;
  }
  /* コレクションムービー（198:2821）は原寸の90%にし、さらに上下の操作部が1画面に入る高さ（画面の高さ−ヘッダー56px−余白16px）を上限にする。縦横比400:709は保ち、左右中央に置く。下の余白（144.46）はそのまま。 */
  #muffler-lp #collection-movie .lp-canvas--sp {
    --fit: min(calc(709 * 0.9 * var(--u)), calc(100vh - 72px));
    height: calc(var(--fit) + 144.46435546875 * var(--u));
  }
  #muffler-lp [data-node-id="198:2821"] {
    height: var(--fit) !important;
    width: calc(var(--fit) * 400 / 709) !important;
    left: calc(50% - var(--fit) * 200 / 709) !important;
  }
}
/* アドレスバーが出ている状態の高さ（svh）を使えるブラウザではそちらで測る。使えない古いブラウザは上の100vhのまま。 */
@supports (height: 100svh) {
  @media (max-width: 779px) {
    #muffler-lp #collection-movie .lp-canvas--sp {
      --fit: min(calc(709 * 0.9 * var(--u)), calc(100svh - 72px));
    }
  }
}