@charset "UTF-8";
/* 1440px正本を比例換算。既存共通CSSの境界780pxへ接続する局所候補。 */
@media (min-width: 780px) {
  #muffler-lp {
    /* Figma 198:1596 の座標を区間幅で比例換算する。 */
  }
  #muffler-lp .fv {
    aspect-ratio: 1440/780;
  }
  #muffler-lp .fv-background {
    inset: 0 auto 0 0;
    width: 51.1111111111%;
  }
  #muffler-lp .fv-photo {
    top: 0;
    left: 51.1111111111%;
    width: 48.8888888889%;
    height: 100%;
  }
  #muffler-lp .fv-layout--pc {
    display: contents;
  }
  #muffler-lp .fv-layout--sp {
    display: none;
  }
  #muffler-lp .color-variations {
    aspect-ratio: 1440/256;
    margin-top: 10%;
  }
  #muffler-lp .cv-heading-text {
    font-size: 2.5cqw;
  }
  #muffler-lp .cv-viewport {
    top: 29.6875%;
    height: 70.3125%;
  }
  #muffler-lp .cv-track {
    left: -6.3267686632%;
  }
  #muffler-lp .cv-set {
    width: 103.2784875234%;
  }
  #muffler-lp .cv-card {
    left: var(--pc-left);
    width: var(--pc-width);
  }
  #muffler-lp .cv-set:nth-child(3) {
    display: block;
  }
  /* コレクションムービー（198:1634）はHOW TO（198:1808）と同じ高さ603にそろえ、さらに画面の高さ−48px（上下24px）を上限にして、動画と操作部が1画面に入るようにする。縦横比400:709は保って左右中央に置く。灰色の帯（198:1633）の上下の余白（119.74／120.26）と帯の下の余白（240）はそのまま。 */
  #muffler-lp #collection-movie .lp-canvas--pc {
    --fit: min(calc(603 * var(--u)), calc(100vh - 48px));
    height: calc(var(--fit) + 480 * var(--u));
  }
  #muffler-lp [data-node-id="198:1633"] {
    height: calc(var(--fit) + 240 * var(--u)) !important;
  }
  #muffler-lp [data-node-id="198:1634"] {
    height: var(--fit) !important;
    width: calc(var(--fit) * 400 / 709) !important;
    left: calc(50% - var(--fit) * 200 / 709) !important;
  }
  /* HOW TO（198:1808）にもコレクションムービーと同じ上限（画面の高さ−48px）を付ける。周りの文字（HOW／TO／TIE A／SCARF）との組み方が崩れないよう、区間の単位ごと縮めて左右中央に置く。上限にかからない画面では今までと同じ。 */
  #muffler-lp #how-to .lp-canvas--pc {
    --u: min(calc(100cqw / var(--design-width)), calc((100vh - 48px) / 603));
    width: calc(var(--design-width) * var(--u));
    margin-inline: auto;
  }
}