@charset "UTF-8";
/* 共通ヘッダー直下へ今回FVを接続する。共通部品の高さは変更しない。 */
[data-muffler-shell] {
  margin-top: 0;
}

/* FVの色・共通部品。PC/SPの値は各ファイルへ分離する。 */
#muffler-lp {
  --fv-pink: rgb(247.3568925, 221.0176179, 232.3637027);
  --fv-fade-duration: 1500ms;
  --fv-letter-duration: 800ms;
  --fv-circle-duration: 900ms;
  width: 100%;
  position: relative;
  isolation: isolate;
  background: #fbfbfb;
  color: #333;
  /* 画像の切り替えは.fv-photoの中だけで重ね、タイトル・サブタイトルは常に最上段に置く。 */
  /* KV画像はFigma 261:3707のPC/SP枠どおりに切り抜いて書き出したので、枠いっぱいに置く。 */
}
#muffler-lp .fv {
  position: relative;
  width: 100%;
  overflow: hidden;
}
#muffler-lp .fv-background, #muffler-lp .fv-photo, #muffler-lp .fv-title, #muffler-lp .fv-subtitle {
  position: absolute;
}
#muffler-lp .fv-background {
  background: var(--fv-pink);
}
#muffler-lp .fv-photo {
  z-index: 0;
  overflow: hidden;
  margin: 0;
}
#muffler-lp .fv-title, #muffler-lp .fv-subtitle {
  z-index: 1;
}
#muffler-lp .fv-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
#muffler-lp .fv-photo-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
#muffler-lp .fv-photo-layer--incoming {
  z-index: 1;
  visibility: hidden;
}
#muffler-lp .fv-artwork {
  display: block;
  overflow: visible;
}
#muffler-lp .fv-letter {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
#muffler-lp .fv-subtitle-art {
  opacity: 0;
}
#muffler-lp.is-static .fv-letter, #muffler-lp.is-static .fv-subtitle-art {
  opacity: 1;
  transform: none;
}
#muffler-lp .fv-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ここから下はローカル確認用。KVの意匠・納品部品には含めない。 */
.fv-preview-note {
  padding: 22px 24px;
  background: #faf7f5;
  color: #444;
  font: 14px/1.8 sans-serif;
  border-top: 1px solid #e4ddd9;
}

.fv-preview-note p {
  margin: 0 0 8px;
}

.fv-preview-note button {
  border: 1px solid #777;
  background: white;
  color: #333;
  padding: 8px 14px;
  cursor: pointer;
}

.fv-preview-note button:focus-visible {
  outline: 2px solid #333;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  #muffler-lp .fv-letter, #muffler-lp .fv-subtitle-art {
    opacity: 1;
    transform: none;
  }
}
/* Color variations。SKUは視覚表示せず、原写真を枠内で中央cropする。 */
#muffler-lp .color-variations {
  position: relative;
  width: 100%;
  container-type: inline-size;
}
#muffler-lp .cv-viewport {
  position: absolute;
  width: 100%;
  overflow: hidden;
  touch-action: pan-y;
}
#muffler-lp .cv-track {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  will-change: transform;
}
#muffler-lp .cv-set {
  position: relative;
  height: 100%;
  flex: none;
}
#muffler-lp .cv-card {
  position: absolute;
  top: 0;
  height: 100%;
  overflow: hidden;
  border-radius: 999px;
  display: block;
}
#muffler-lp .cv-card img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  user-select: none;
}
#muffler-lp .cv-card:focus-visible {
  outline: 2px solid #333;
  outline-offset: -4px;
}
#muffler-lp .cv-viewport:focus-visible {
  outline: 2px solid #333;
  outline-offset: 4px;
}

/* 本文はPC/SPの正本座標を区間ごとに保持する。単位は本文の実幅に追従する。 */
#muffler-lp .lp-stage {
  position: relative;
  width: 100%;
  container-type: inline-size;
}
#muffler-lp .lp-canvas {
  position: relative;
  width: 100%;
  --u: calc(100cqw / var(--design-width));
  height: calc(var(--scene-height) * var(--u));
}
#muffler-lp .lp-node {
  position: absolute;
  display: block;
  margin: 0;
}
#muffler-lp .lp-text-art > img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
}
#muffler-lp .lp-index-link {
  pointer-events: none;
  color: inherit;
}
#muffler-lp .lp-index-link > * {
  pointer-events: auto;
}
#muffler-lp .lp-index-mask {
  overflow: hidden;
  border-radius: 50%;
}
#muffler-lp .lp-crop-frame {
  overflow: hidden;
}
#muffler-lp .lp-crop-image {
  position: absolute;
  display: block;
  max-width: none;
}
#muffler-lp .lp-index-link:focus-visible {
  outline: 2px solid #333;
  outline-offset: 4px;
}
#muffler-lp .lp-photo-reveal {
  opacity: 1;
  transition: opacity 700ms ease-out;
}
#muffler-lp .lp-photo-reveal .lp-crop-image {
  transform: scale(1);
  transition: transform 800ms ease-out;
}
#muffler-lp:not(.has-reveal) .lp-photo-reveal .lp-crop-image {
  transform: none;
  transition: none;
}
#muffler-lp.has-reveal .lp-photo-reveal:not(.is-revealed) {
  opacity: 0;
}
#muffler-lp.has-reveal .lp-photo-reveal:not(.is-revealed) .lp-crop-image {
  transform: scale(1.2);
}
#muffler-lp.has-reveal [data-reveal=text] {
  transition: opacity 600ms ease-out;
}
#muffler-lp.has-reveal [data-reveal=text]:not(.is-revealed) {
  opacity: 0;
}
/* 同じ組の文字（CLASSICの3行）は上から0.3秒ずつ遅れて出る。組の判定はfull-page.js。 */
#muffler-lp.has-reveal [data-reveal-order="1"] {
  transition-delay: 300ms;
}
#muffler-lp.has-reveal [data-reveal-order="2"] {
  transition-delay: 600ms;
}

@media (min-width: 780px) {
  #muffler-lp .lp-canvas--sp {
    display: none;
  }
}
@media (max-width: 779px) {
  #muffler-lp .lp-canvas--pc {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  #muffler-lp.has-reveal .lp-photo-reveal, #muffler-lp.has-reveal [data-reveal=text] {
    opacity: 1;
    transition: none;
  }
  #muffler-lp .lp-photo-reveal .lp-crop-image {
    transform: none;
    transition: none;
  }
}
/* 写真と動画を含む本文の表示域。横にはみ出す原画をページ幅で切る。 */
#muffler-lp .lp-scene {
  overflow: clip;
}
#muffler-lp .lp-live-text {
  white-space: pre;
  font-family: futura-pt, Arial, sans-serif;
}
#muffler-lp .lp-vector {
  max-width: none;
  overflow: visible;
}
#muffler-lp .lp-video-frame video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 再生が始まる瞬間に映像が描かれない一瞬があっても、後ろの帯の色ではなくポスターと同じ絵が見えるようにする（ポスターと同じ画像なので追加の読み込みはない）。枠の下端が端数のとき、映像の下に1pxの絵の線が出ないよう、下端の1pxは塗らない。 */
#muffler-lp .lp-video-frame:has(video[data-movie=image]) {
  background: url("../img/full-photo-f5e7997a8124b611b73a2f324a1c8df9b2ca5ca0.webp") center top / 100% calc(100% - 1px) no-repeat;
}
#muffler-lp .lp-video-frame:has(video[data-movie=howto]) {
  background: url("../img/full-photo-1ca8b8afcf2905eebb533c14de78731449f54118.webp") center top / 100% calc(100% - 1px) no-repeat;
}
/* 再生開始から最初の絵が届くまでの間（full-page.jsが付ける .is-loading）は、Chromeの灰色の読み込み表示の上に同じポスターをかぶせる。押す操作は下の動画へ通す。 */
#muffler-lp .lp-video-frame.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  background-size: cover;
  pointer-events: none;
}
/* かぶせたポスターでChromeの読み込み表示（回転）も隠れるため、読み込みが1秒を超えたときだけ小さな回転表示を出す。速く届いたときは何も出ない。 */
#muffler-lp .lp-video-frame.is-loading::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
  box-sizing: border-box;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.3);
  pointer-events: none;
  opacity: 0;
  animation: lp-video-wait 1s linear infinite, lp-video-wait-in 0.3s ease 1s forwards;
}
/* 全画面では枠用の切り抜き（cover）をやめ、映像全体を黒地に収める。接頭辞つき（旧Safari）は別の規則にする。1つにまとめると、知らないセレクタがある側のブラウザで規則ごと捨てられるため。 */
#muffler-lp .lp-video-frame video:fullscreen {
  object-fit: contain;
  background: #000;
}
#muffler-lp .lp-video-frame video:-webkit-full-screen {
  object-fit: contain;
  background: #000;
}
#muffler-lp .lp-action {
  background: transparent;
  color: inherit;
}
#muffler-lp .lp-action[href]:focus-visible {
  outline: 2px solid #333;
  outline-offset: 4px;
}
#muffler-lp .lp-action[href]:hover {
  background: rgba(255, 255, 255, 0.12);
  transition: background 180ms ease-out;
}

/* View More Itemsは円だけを中心から1.3倍にする（参考 tabio 靴下屋2022SPRINGのview detail、0.3s ease）。参考は文字色を変えないので、リンク共通の白い重ねはView Moreでは外す。リンクと円は兄弟要素なので、各キャンバスに1つのView Moreを:hasでつなぐ。 */
#muffler-lp .lp-action--more[href]:hover {
  background: transparent;
}

#muffler-lp .lp-more-circle {
  transition: scale 300ms ease;
}
#muffler-lp .lp-canvas:has(.lp-action--more:focus-visible) .lp-more-circle {
  scale: 1.3;
}

@media (hover: hover) {
  #muffler-lp .lp-canvas:has(.lp-action--more:hover) .lp-more-circle {
    scale: 1.3;
  }
}
@media (prefers-reduced-motion: reduce) {
  #muffler-lp .lp-more-circle {
    transition: none;
  }
}

#muffler-lp .lp-orbit-art {
  display: block;
  overflow: visible;
  max-width: none;
}
#muffler-lp [data-reveal=line] path {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1000ms linear;
}
#muffler-lp.has-reveal [data-reveal=line]:not(.is-revealed) path {
  stroke-dashoffset: 1;
}

@media (prefers-reduced-motion: reduce) {
  #muffler-lp [data-reveal=line] path {
    stroke-dashoffset: 0 !important;
    transition: none;
  }
}
#muffler-lp .lp-band-track, #muffler-lp .lp-band-set {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
#muffler-lp .lp-photo-band {
  touch-action: pan-y;
}
#muffler-lp .lp-photo-band:focus-visible {
  outline: 1px solid #333;
  outline-offset: 4px;
}
#muffler-lp [data-reveal=burst] path {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(1);
  transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}
#muffler-lp.has-reveal [data-reveal=burst]:not(.is-revealed) path {
  transform: scale(0);
}

@media (prefers-reduced-motion: reduce) {
  #muffler-lp [data-reveal=burst] path {
    transform: none !important;
    transition: none;
  }
}
/* 着用マフラーのタグ。押せる範囲は外側へ15px広げ、ホバーで左端を軸に傾ける（参考 dot-st gindaco）。 */
#muffler-lp {
  /* Figmaではタグが常に写真より上。SPの写真35タグ（198:2231）は直下の写真198:2230と重なるため前面に出す。 */
  /* 共通シェルのリンクhover半透明（opacity .6）を打ち消し、傾きだけにする。 */
  /* Figmaのタグは左18・右12の余白で文字幅に合わせて伸びる。文字（商品名 / 価格）だけを流し込み、幅は中身で決める。 */
  /* MADE TO SHAREは文字を固定し、円だけ回す。モデルカットより前面。 */
  /* Figmaの重なり順（円→文字）に合わせ、MADE TO SHAREと「わたしにも〜」を円より上に置く。 */
  /* Classic 4枚並びの差替え層。表示はJSが即時に切り替える。 */
}
#muffler-lp .lp-tag {
  color: inherit;
  text-decoration: none;
  z-index: 1;
}
#muffler-lp .lp-tag[href]:hover {
  opacity: 1;
}
#muffler-lp .lp-tag-body {
  position: relative;
  display: block;
  height: 100%;
  padding: 0 calc(12 * var(--u)) 0 calc(18 * var(--u));
  transform-origin: left center;
  transition: transform 120ms cubic-bezier(0.165, 0.84, 0.44, 1);
}
#muffler-lp .lp-tag .lp-live-text {
  position: relative;
}
#muffler-lp .lp-tag[href]::after {
  content: "";
  position: absolute;
  inset: -15px;
}
#muffler-lp .lp-tag[href]:focus-visible {
  outline: 2px solid #333;
  outline-offset: 2px;
}
#muffler-lp .lp-tag[href]:focus-visible .lp-tag-body {
  transform: rotate(-5deg);
}
#muffler-lp .lp-badge {
  z-index: 1;
}
#muffler-lp .lp-text-art.lp-badge {
  z-index: 2;
}
#muffler-lp .lp-swap-layer {
  opacity: 0;
}

@media (hover: hover) {
  #muffler-lp .lp-tag[href]:hover .lp-tag-body {
    transform: rotate(-5deg);
  }
}
/* 追従CTA。寸法はFigma 249:3697。（着用アイテムの＋とポップアップは2026-10-06に掲載取りやめ）
   バナー全体を押せるよう、下のリンクの押せる範囲を上の文字の部分まで広げる（2026-10-07）。×はその上に重ねる。 */
@media (prefers-reduced-motion: reduce) {
  #muffler-lp .lp-tag-body {
    transition: none;
  }
}
.lp-floating-close {
  position: absolute;
  display: block;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.lp-floating-close img {
  position: absolute;
  display: block;
  max-width: none;
}
.lp-floating-close span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.lp-floating-close span::before, .lp-floating-close span::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: #fff;
  transform: translate(-50%, -50%) rotate(45deg);
}
.lp-floating-close span::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.lp-floating-close:focus-visible {
  outline: 2px solid #333;
  outline-offset: 2px;
}

/* 公式サイトのapp.css側に button:focus などの輪郭線があると、マウスで押したときにも出る（PCのChrome・Edge）。LPの中と追従CTAではマウス操作時だけ消し、キーボード操作時（:focus-visible）の輪郭は残す。app.css側の指定の強さに左右されないよう !important にする。 */
#muffler-lp :focus:not(:focus-visible), .lp-floating-cta :focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}

.lp-floating-cta {
  position: fixed;
  right: 24px;
  bottom: 96px;
  width: 157px;
  height: 131px;
  z-index: 1001;
  color: #fff;
  animation: lp-cta-enter 180ms ease-out both;
}
.lp-floating-cta[hidden] {
  display: none;
}
.lp-floating-cta p {
  margin: 0;
  padding: 0;
}
.lp-floating-cta .lp-floating-copy {
  position: absolute;
  inset: 0 0 29px;
  border-radius: 4px 4px 0 0;
  background: #a75e5f;
}
.lp-floating-cta .lp-floating-title, .lp-floating-cta .lp-floating-sub, .lp-floating-cta .lp-floating-link-text {
  position: absolute;
  font-family: dnp-shuei-gothic-gin-std, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  white-space: pre;
  font-style: normal;
  font-variant: normal;
  font-kerning: normal;
  font-feature-settings: normal;
  text-transform: none;
  text-indent: 0;
  word-spacing: normal;
  text-align: left;
  color: #fff;
}
.lp-floating-cta .lp-floating-title {
  left: 16px;
  top: 16px;
  width: 125px;
  height: 50px;
  font-size: 18px;
  line-height: 25px;
  letter-spacing: 0.5px;
  font-weight: 600;
}
.lp-floating-cta .lp-floating-sub {
  left: 16px;
  top: 72px;
  width: 125px;
  height: 18px;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.5px;
  font-weight: 500;
}
.lp-floating-cta .lp-floating-link {
  position: absolute;
  top: 102px;
  left: 0;
  display: block;
  width: 157px;
  height: 29px;
  border-radius: 0 0 4px 4px;
  background: #333;
  color: inherit;
}
.lp-floating-cta .lp-floating-link-text {
  left: 0;
  top: 6px;
  width: 157px;
  height: 17px;
  font-size: 11px;
  line-height: 17px;
  letter-spacing: 0;
  font-weight: 600;
  text-align: center;
}
.lp-floating-cta .lp-floating-link::before {
  content: "";
  position: absolute;
  inset: -102px 0 0;
  border-radius: 4px;
}
.lp-floating-cta .lp-floating-link:focus-visible {
  outline: none;
}
.lp-floating-cta .lp-floating-link:focus-visible::before {
  outline: 2px solid #fff;
  outline-offset: -3px;
}
.lp-floating-cta .lp-floating-link[aria-disabled] {
  cursor: default;
}

.lp-floating-close {
  top: -22px;
  right: -16px;
  z-index: 1;
}
.lp-floating-close img {
  top: 13px;
  left: 19px;
  width: 18px;
  height: 18px;
}
.lp-floating-close span {
  left: 28px;
}
.lp-floating-close span::before, .lp-floating-close span::after {
  width: 10.909091px;
  height: 1px;
}

@media (max-width: 779px) {
  .lp-floating-cta {
    right: 16px;
    bottom: 88px;
  }
}
@keyframes lp-cta-enter {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .lp-floating-cta {
    animation: none;
  }
}
/* howtoはポスターの中央にタイトルがあるため、回転表示をタイトルの下（枠の高さ80%）に出す。 */
#muffler-lp .lp-video-frame:has(video[data-movie=howto]).is-loading::before {
  top: 80%;
}
@keyframes lp-video-wait {
  to {
    transform: rotate(360deg);
  }
}
@keyframes lp-video-wait-in {
  to {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  #muffler-lp .lp-video-frame.is-loading::before {
    animation: lp-video-wait-in 0.3s ease 1s forwards;
  }
}

/* 文字はAdobe Fonts（キットyri5iqm）の文字。位置・大きさ・行送り・字間はFigmaの文字枠どおりにHTML側へ持つ（曲線の文字だけ画像のまま）。 */
#muffler-lp, .lp-floating-cta { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
/* Macのブラウザは文字を少し太らせて描くので止める（画像版＝デザインと同じ太さになる）。他のOSには影響しない。 */
#muffler-lp, .lp-floating-cta { -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
#muffler-lp .lp-text {
  white-space: pre;
  font-style: normal;
  font-variant: normal;
  font-kerning: normal;
  font-feature-settings: normal;
  text-transform: none;
  text-indent: 0;
  word-spacing: normal;
  letter-spacing: 0;
  text-align: left;
  color: #333;
}
#muffler-lp .lp-text--futura, #muffler-lp .cv-heading-text, #muffler-lp .lp-classic-art text, #muffler-lp .fv-artwork--demi text, #muffler-lp .fv-artwork--light text {
  font-family: futura-pt, Futura, "Century Gothic", Arial, sans-serif;
}
#muffler-lp .lp-text--shuei {
  font-family: dnp-shuei-gothic-gin-std, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
}
/* 平成角ゴシックW5（LINEの2か所）はキットに無いので、キットに追加されるまでは秀英角ゴ銀で出る。 */
#muffler-lp .lp-text--heisei {
  font-family: heisei-kaku-gothic-std, dnp-shuei-gothic-gin-std, "Hiragino Sans", sans-serif;
}
#muffler-lp .lp-classic-art {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  overflow: visible;
}
/* 縁取りは字形の外側だけを残すので、字形の補正（ヒンティング）を切って画像版と同じ太さにする */
#muffler-lp .lp-classic-art text {
  font-weight: 400;
  font-style: normal;
  font-variant: normal;
  font-kerning: normal;
  font-feature-settings: normal;
  text-transform: none;
  text-indent: 0;
  word-spacing: normal;
  letter-spacing: 0;
  text-rendering: geometricPrecision;
}
#muffler-lp .fv-artwork--demi text {
  font-weight: 600;
  font-style: normal;
  font-variant: normal;
  font-kerning: normal;
  font-feature-settings: normal;
  text-transform: none;
  text-indent: 0;
  word-spacing: normal;
  letter-spacing: 0;
}
#muffler-lp .fv-artwork--light text {
  font-weight: 300;
  font-style: normal;
  font-variant: normal;
  font-kerning: normal;
  font-feature-settings: normal;
  text-transform: none;
  text-indent: 0;
  word-spacing: normal;
  letter-spacing: 0;
}
#muffler-lp .cv-heading-text {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  text-align: center;
  white-space: nowrap;
  line-height: 1;
  font-weight: 400;
  font-style: normal;
  font-variant: normal;
  font-kerning: normal;
  font-feature-settings: normal;
  text-transform: none;
  text-indent: 0;
  word-spacing: normal;
  letter-spacing: 0;
  color: #333;
}
/* フォントが届くまで（最長3秒）は文字を隠し、別の書体が一瞬出るのを防ぐ。 */
.wf-loading #muffler-lp .lp-text, .wf-loading #muffler-lp .lp-classic-art, .wf-loading #muffler-lp .lp-live-text, .wf-loading #muffler-lp .fv-title, .wf-loading #muffler-lp .cv-heading-text,
.wf-loading .lp-floating-cta .lp-floating-title, .wf-loading .lp-floating-cta .lp-floating-sub, .wf-loading .lp-floating-cta .lp-floating-link-text { visibility:hidden; }

/* ⑤ 着用マフラーのタグ → そのカットのモデル写真と、着用アイテムの一覧（マフラーは色玉・価格・Buy、服は価格・Buy）。
   寸法は SP_ポップアップ.pdf（394×636・余白 上64／左右48／下40）と PC_ポップアップ.pdf（658×516・余白48）。
   --pt はカンプの1px。SPは幅400、PCは幅1440を基準にLPと同じ比率で伸び縮みし、画面の高さに収まらないときはさらに縮める。
   --pu は文字以外（枠・写真・余白・色玉・×）の1px。SPは文字の大きさはそのままで、それ以外をカンプの85%にする（2026-10-07）。PCはカンプどおり。 */
html.is-tag-dialog-open {
  overflow: hidden;
}
html:has(.lp-tag-dialog[open]) .lp-floating-cta {
  visibility: hidden;
}
#muffler-lp .lp-tag.is-quiet-focus[href]:focus-visible {
  outline: none;
}
#muffler-lp .lp-tag.is-quiet-focus[href]:focus-visible .lp-tag-body {
  transform: none;
}
.lp-tag-dialog {
  --pt: min(calc(100vw / 400), calc((100vh - 24px) / 636));
  --pu: calc(var(--pt) * 0.85);
  position: fixed;
  inset: 0;
  width: calc(394 * var(--pu));
  max-width: none;
  height: fit-content;
  max-height: none;
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: #fff;
  color: #333;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@supports (height: 100svh) {
  .lp-tag-dialog {
    --pt: min(calc(100vw / 400), calc((100svh - 24px) / 636));
  }
}
.lp-tag-dialog::backdrop {
  background: rgba(0, 0, 0, 0.4);
}
.lp-tag-dialog[open], .lp-tag-dialog[open]::backdrop {
  animation: lp-tag-dialog-enter 240ms ease-out both;
}
.lp-tag-dialog.is-closing, .lp-tag-dialog.is-closing::backdrop {
  animation: lp-tag-dialog-leave 180ms ease-out both;
}
.lp-tag-dialog-panel {
  padding: calc(64 * var(--pu)) calc(48 * var(--pu)) calc(40 * var(--pu));
  box-sizing: border-box;
}
.lp-tag-dialog-panel:focus {
  outline: none;
}
.lp-tag-dialog-photo {
  width: calc(298 * var(--pu));
  height: calc(420 * var(--pu));
  overflow: hidden;
  background: #f4f4f4;
}
.lp-tag-dialog-photo img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.lp-tag-dialog-list {
  margin: calc(16 * var(--pu)) 0 0;
  padding: 0;
  list-style: none;
}
.lp-tag-dialog-list li {
  display: flex;
  align-items: center;
  height: calc(32 * var(--pu));
  margin: 0;
  padding: 0;
}
.lp-tag-item {
  /* 行の幅と高さいっぱいを押せる範囲にする（2026-10-07） */
  display: flex;
  flex: 1 1 auto;
  align-self: stretch;
  align-items: center;
  color: #333;
  text-decoration: none;
  transition: opacity 180ms ease-out;
}
.lp-tag-item:hover {
  color: #333;
  text-decoration: none;
}
.lp-tag-item:focus {
  outline: none;
}
.lp-tag-item:focus-visible {
  outline: 2px solid #333;
  outline-offset: 0;
}
.lp-tag-item-swatch {
  flex: none;
  display: block;
  width: calc(16 * var(--pu));
  height: calc(16 * var(--pu));
  border-radius: 50%;
  overflow: hidden;
  background: #f4f4f4;
}
.lp-tag-item-swatch.is-empty {
  background: transparent; /* 服の行。色玉は出さず、欄だけ残して文字とBuyの位置を揃える */
}
.lp-tag-item-swatch img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.lp-tag-item-text {
  display: block;
  min-width: calc(149 * var(--pt)); /* 文字の欄は文字と同じ大きさのまま。行ごとの「Buy」の位置を揃えるため */
  margin: 0 calc(16 * var(--pu)) 0 calc(8 * var(--pu));
  white-space: nowrap;
  font: 400 calc(14 * var(--pt)) / 1 futura-pt, Futura, "Century Gothic", Arial, sans-serif;
}
.lp-tag-item-buy {
  flex: none;
  display: block;
  width: calc(35 * var(--pu));
  padding-bottom: calc(4 * var(--pu));
  border-bottom: max(1px, calc(1 * var(--pu))) solid #333;
  box-sizing: border-box;
  text-align: center;
  font: 400 calc(12 * var(--pt)) / 1 futura-pt, Futura, "Century Gothic", Arial, sans-serif;
}
@media (hover: hover) {
  .lp-tag-item:hover {
    opacity: 0.6;
  }
}
.lp-tag-dialog-close {
  /* 丸の中心はカンプどおり角から --close-x／--close-y。押せる範囲の44pxは枠の内側に収め、収まらない分は中の丸と×だけを角へ寄せる */
  --close-x: calc(26.5 * var(--pu));
  --close-y: calc(26.5 * var(--pu));
  position: absolute;
  top: max(0px, calc(var(--close-y) - 22px));
  right: max(0px, calc(var(--close-x) - 22px));
  display: block;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.lp-tag-dialog-close img {
  position: absolute;
  left: calc(50% - min(0px, calc(var(--close-x) - 22px)));
  top: calc(50% + min(0px, calc(var(--close-y) - 22px)));
  display: block;
  width: calc(33 * var(--pu));
  height: calc(33 * var(--pu));
  max-width: none;
  transform: translate(-50%, -50%);
}
.lp-tag-dialog-close span {
  position: absolute;
  left: calc(50% - min(0px, calc(var(--close-x) - 22px)));
  top: calc(50% + min(0px, calc(var(--close-y) - 22px)));
}
.lp-tag-dialog-close span::before, .lp-tag-dialog-close span::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(18 * var(--pu));
  height: 1px;
  background: #fff;
  transform: translate(-50%, -50%) rotate(45deg);
}
.lp-tag-dialog-close span::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.lp-tag-dialog-close:focus {
  outline: none;
}
.lp-tag-dialog-close:focus-visible {
  outline: 2px solid #333;
  outline-offset: -2px;
}
.lp-tag-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
@media (min-width: 780px) {
  .lp-tag-dialog {
    --pt: min(max(1px, calc(100vw / 1440)), calc((100vh - 48px) / 516));
    --pu: var(--pt);
    width: calc(658 * var(--pu));
  }
  .lp-tag-dialog-panel {
    display: grid;
    grid-template-columns: calc(298 * var(--pu)) auto;
    column-gap: calc(40 * var(--pu));
    align-items: center;
    padding: calc(48 * var(--pu));
  }
  .lp-tag-dialog-list {
    margin: 0;
  }
  .lp-tag-dialog-close {
    --close-x: calc(55.5 * var(--pu));
    --close-y: calc(31.5 * var(--pu));
  }
}
@media (prefers-reduced-motion: reduce) {
  .lp-tag-dialog[open], .lp-tag-dialog[open]::backdrop, .lp-tag-dialog.is-closing, .lp-tag-dialog.is-closing::backdrop {
    animation: none;
  }
  .lp-tag-item {
    transition: none;
  }
}
@keyframes lp-tag-dialog-enter {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes lp-tag-dialog-leave {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.lp-tag-dialog :focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}