@charset "utf-8";
/* ==========================================================================
   malymoon_2026.css
   マリームーン カテゴリページ 専用スタイル
   設置：ショップ管理 > デザイン管理 > ファイル管理 にアップロード
         common2020.css の後に読み込む
   前提：フォントは端末に入っている文字（--mly-font）を使う
   ※ すべて .mly- 接頭辞。既存 fs-c- クラスへの影響なし
   2026-09-24 v7: FULL SET・最近見た商品を廃止／幅を500pxに
   2026-09-24 v8: 該当商品の無い色・サイズのチップを隠す [hidden]
   2026-09-24 v9: 変更なし（版だけ合わせる）
   2026-09-24 v10: 変更なし（.mly-out は使わなくなったが害が無いので残す）
   2026-09-24 v11: 共通検索モーダルの .vmtop-catblock をこのページだけ非表示
   2026-09-24 v12: 右端タブの表示条件（一覧到達で隠す・絞り込み中は出さない）
   2026-09-24 v13: 下中央ボタンはスクロール中に隠す
   2026-09-24 v14: よく一緒に買われるアイテムを横スクロール様式に
   2026-10-13 v15: ブランド見出し（h1）と紹介文を追加／系統アイコンをスマホでは2段の横スクロールに／
                   見出しを h2 に／順位の印を写真の角へ／区切りの帯／全商品の見出し／共通のカテゴリ回遊を非表示
   2026-10-14 v31: 系統の丸アイコンを、カラーと同じ形の写真つきボタン（3列）に。絞り込みシートの中も同じ
   2026-10-14 v32: 系統の先頭に「すべて」ボタン（写真なし・文字は中央）
   2026-10-14 v33: 絞り込みのボタン・メニュー・条件バーをサイトのカートボタンの色に／条件バーを常に出し、ヘッダーの真下に置く
   2026-10-14 v34: 条件バーを「絞り込みの帯」に（1段目＝絞り込み＋系統のボタン列、2段目＝絞り込み中の条件）。帯が出ている間は下中央のボタンを隠す
   2026-10-14 v35: ヘッダーの「カテゴリ」で開く CATEGORY 欄を消していたのを戻す（/c/costume と同じに）。帯が出ている間はサイトのヘッダーを隠し、帯を一番上に固定
   2026-10-14 v36: 右端の「全商品を見る」タブを、下中央の「絞り込み」ボタンと同じピンク（サイトのカートボタンの色）に
   ========================================================================== */

:root {
  --mly-ink: #1c1a1e;
  --mly-sub: #6f6878;
  --mly-mute: #9a93a0;
  --mly-line: #ece7ea;
  --mly-pink: #c22b68;
  --mly-gold: #d8b981;
  --mly-font: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Yu Gothic', YuGothic, 'Meiryo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* v18：端末に入っている文字を使う（読み込みなし）。本人が見本から選択 */
}

.mly {
  font-family: var(--mly-font);
  color: var(--mly-ink);
  max-width: 500px;   /* 本番の枠 .w_max500 に合わせる */
  margin: 0 auto;
  text-align: left;
  line-height: 1.6;
}
.mly * { box-sizing: border-box; }
.mly img { display: block; max-width: 100%; }
.mly button { font-family: inherit; cursor: pointer; }
.mly a { text-decoration: none; color: inherit; }
.mly a:hover { color: var(--mly-pink); }
.mly ul { list-style: none; margin: 0; padding: 0; }

/* --- セクション見出し ---------------------------------------------------- */
.mly-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; row-gap: 2px; margin: 0; padding: 0 16px 12px; border: 0; background: none; font-size: inherit; font-weight: inherit; line-height: 1.4; text-align: left; }
.mly-head::before, .mly-head::after { content: none; }
.mly-head__en { font-size: 22px; font-weight: 600; letter-spacing: .06em; white-space: nowrap; }
.mly-head__ja { font-size: 12px; font-weight: 700; color: var(--mly-sub); }
.mly-head__note { font-size: 11px; color: var(--mly-mute); }
.mly-label { font-size: 14px; font-weight: 700; letter-spacing: .04em; white-space: nowrap; }
.mly-sublabel { font-size: 10px; font-weight: 700; color: var(--mly-mute); letter-spacing: .1em; margin-bottom: 8px; }

/* --- 系統ボタン（v31：丸アイコンをやめ、カラーと同じ形のボタンを写真つき3列で並べる。本人が見本 C2 を選択） --- */
.mly-icons { padding: 2px 16px 18px; }
.mly-icons__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 6px; }
.mly-icon { box-sizing: border-box; width: 100%; min-width: 0; margin: 0; display: flex; align-items: center; gap: 5px; padding: 4px 6px 4px 4px; background: #fff; border: 1px solid #e4dee6; border-radius: 999px; text-align: left; cursor: pointer; }
.mly-icon__img { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; overflow: hidden; background: #f3eff4; }
.mly-icon__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mly-icon__label { min-width: 0; font-size: 11px; font-weight: 500; color: #3d3844; line-height: 1.3; letter-spacing: -.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.mly-icon { text-decoration: none; color: inherit; }
.mly-icon[aria-pressed="true"] { background: #fdf1f6; border-color: var(--mly-pink); }
.mly-icon--all { justify-content: center; padding: 4px 6px; min-height: 34px; }  /* v32：写真なし。高さは写真つきのボタンにそろえる */
.mly-icon[aria-pressed="true"] .mly-icon__label { font-weight: 700; color: var(--mly-pink); }

/* --- チップ（価格・サイズ・カラー） ------------------------------------- */
.mly-chiprow { display: flex; gap: 8px; overflow-x: auto; padding: 0 16px 18px; align-items: center; -ms-overflow-style: none; scrollbar-width: none; }
.mly-chiprow::-webkit-scrollbar { display: none; }
.mly-chip, .mly-color, .mly-fab, .mly-more, .mly-next, .mly-bar, .mly-sheet, .mly-icon { font-family: var(--mly-font); }
.mly-chip { flex: 0 0 auto; white-space: nowrap; font-size: 12px; font-weight: 700; padding: 8px 14px; border-radius: 999px; background: #fff; color: var(--mly-ink); border: 1px solid #d9d2dc; }
.mly-chip[aria-pressed="true"] { background: var(--mly-pink); color: #fff; border-color: var(--mly-pink); }
.mly-chip--size { font-weight: 500; min-width: 58px; text-align: center; padding: 6px 13px; }
.mly-chip--size[aria-pressed="true"] { background: var(--mly-ink); border-color: var(--mly-ink); }
/* --- 画面下中央の「絞り込み・並び替え」ボタン --------------------------- */
.mly-fab { position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px; z-index: 90; display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 26px; border: 0; border-radius: 999px; background: var(--mly-pink); color: #fff; box-shadow: 0 6px 18px rgba(194,43,104,.30); font-family: var(--mly-font); cursor: pointer; }
.mly-fab { max-width: calc(100vw - 32px); }
.mly-fab__txt { font-size: 15px; font-weight: 700; letter-spacing: .04em; white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
body.mly-filtering .mly-fab__txt { font-size: 13px; letter-spacing: 0; }   /* 絞り込み中は内容を出す */
.mly-fab__num { font-size: 13px; font-weight: 700; opacity: .9; white-space: nowrap; }
.mly-sheet.is-open ~ .mly-fab, body.mly-sheetopen .mly-fab { display: none; }
.mly-fab { transition: opacity .2s, transform .2s; }
body.mly-scrolling .mly-fab, .mly-fab.is-off { opacity: 0; transform: translateX(-50%) translateY(16px); pointer-events: none; }   /* スクロール中 */
@supports (padding: env(safe-area-inset-bottom)) { .mly-fab { bottom: calc(18px + env(safe-area-inset-bottom)); } }

.mly-colorgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mly-color { display: flex; align-items: center; gap: 8px; white-space: nowrap; font-size: 11px; font-weight: 500; color: #3d3844; background: #fff; border: 1px solid #e4dee6; border-radius: 999px; padding: 7px 12px; text-align: left; }
.mly-color[aria-pressed="true"] { background: #fdf1f6; border-color: var(--mly-pink); color: var(--mly-pink); font-weight: 700; }
.mly-chip[hidden], .mly-color[hidden] { display: none !important; }  /* 該当商品の無い色・サイズ */
.mly-color__sw { flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.14); }
.mly-color--all { grid-column: 1 / -1; justify-content: center; }
.mly-color__sw--pattern { background: conic-gradient(#ef7fa6 0 25%, #f2cf1b 0 50%, #1f9a53 0 75%, #1f5fd0 0); }

/* --- 絞り込みバー（選択中に画面上部へ固定） ----------------------------- */
.mly-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 80; background: #fdf1f6; color: var(--mly-pink); display: flex; opacity: 0; visibility: hidden; transform: translateY(-100%); pointer-events: none; transition: opacity .2s, transform .2s, visibility .2s; align-items: center; gap: 10px; padding: 0 12px 0 14px; height: 42px; border-bottom: 1px solid #f3cfdd; box-shadow: 0 2px 8px rgba(194,43,104,.10); }
/* v33: 絞り込み中は常に出す。上端は JS が --mly-bar-top に入れる（ヘッダーが出ている間はその真下、スクロール中は 0） */
.mly-bar.is-on { opacity: 1; visibility: visible; transform: translateY(var(--mly-bar-top, 0px)); pointer-events: auto; }
body.mly-sheetopen .mly-bar { display: none; }
.mly-bar__txt { font-size: 11px; font-weight: 700; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mly-bar__edit { flex: 0 0 auto; font-size: 11px; font-weight: 700; color: #fff; background: var(--mly-pink); border: none; border-radius: 999px; padding: 6px 13px; white-space: nowrap; }
.mly-bar__clear { flex: 0 0 auto; font-size: 11px; font-weight: 500; color: var(--mly-sub); background: none; border: none; text-decoration: underline; padding: 6px 2px; white-space: nowrap; }

/* --- 絞り込みシート（下から開く） --------------------------------------- */
.mly-sheet { position: fixed; inset: 0; z-index: 2147483000; display: none; flex-direction: column; justify-content: flex-end; background: rgba(28,26,30,.45); }
.mly-sheet.is-open { display: flex !important; }
.mly-sheet__bg { flex: 1 1 auto; }
.mly-sheet__panel { flex: 0 0 auto; width: 100%; max-width: 500px; margin: 0 auto; background: #fff; border-radius: 16px 16px 0 0; max-height: 86vh; display: flex; flex-direction: column; overflow: hidden; }
.mly-sheet__top { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 14px 16px 12px; border-bottom: 1px solid #f0eaef; }
.mly-sheet__title { font-size: 13px; font-weight: 700; letter-spacing: .04em; flex: 1 1 auto; }
.mly-sheet__clear { flex: 0 0 auto; white-space: nowrap; font-size: 11px; font-weight: 500; color: var(--mly-sub); background: none; border: none; text-decoration: underline; }
.mly-sheet__close { flex: 0 0 auto; font-size: 18px; line-height: 1; color: var(--mly-sub); background: none; border: none; padding: 4px 2px; }
.mly-sheet__body { flex: 1 1 auto; overflow-y: auto; padding: 14px 16px 16px; }
.mly-sheet__body .mly-icons { padding: 0 0 12px; }
/* v31: シートの中もページ上と同じ3列のボタン（PC幅の多列指定を受けないよう、ここで3列に固定） */
.mly-sheet__body .mly-icons__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 6px; }
.mly-sheet__body .mly-chiprow { border: none; padding: 0 0 18px; flex-wrap: wrap; overflow: visible; }
.mly-sheet__foot { flex: 0 0 auto; padding: 12px 16px 18px; border-top: 1px solid #f0eaef; }
.mly-sheet__cta { width: 100%; font-size: 13px; font-weight: 700; color: #fff; background: var(--mly-pink); border: none; border-radius: 999px; padding: 14px 0; }

/* --- 右端の縦長タブ「全商品を見る」 ------------------------------------- */
.mly-tab { position: fixed; right: 0; top: 46%; z-index: 60; width: 38px; padding: 14px 0 12px; border-radius: 10px 0 0 10px; background: var(--mly-pink); color: #fff; box-shadow: -2px 4px 16px rgba(194,43,104,.4); display: flex; flex-direction: column; align-items: center; gap: 8px; font-family: var(--mly-font); text-decoration: none; box-sizing: border-box; }
.mly-tab:hover { color: #fff; }
.mly-tab { transition: opacity .2s, transform .2s; }
.mly-tab.is-off { opacity: 0; transform: translateX(100%); pointer-events: none; }   /* 商品一覧が画面に入った */
body.mly-filtering .mly-tab, body.mly-sheetopen .mly-tab { display: none; }           /* 絞り込み中・シート表示中 */
.mly-tab__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; width: 16px; }
.mly-tab__grid i { aspect-ratio: 3 / 4; background: rgba(255,255,255,.95); border-radius: 1px; }
.mly-tab__txt { font-size: 11px; font-weight: 700; letter-spacing: .16em; writing-mode: vertical-rl; line-height: 1; }
.mly-tab__arw { font-size: 11px; font-weight: 700; line-height: 1; }

/* --- 商品カード（ランキング・コラボ共通） ------------------------------- */
.mly-card { display: block; }
.mly-card__ph { position: relative; aspect-ratio: 3 / 4; background: #f1edf2; border-radius: 8px; overflow: hidden; }
.mly-card__ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mly-card__name { font-size: 12px; line-height: 1.5; margin-top: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mly-card__price { font-size: 14px; font-weight: 700; margin-top: 4px; letter-spacing: .01em; }
.mly-card__price small { font-size: 9px; font-weight: 400; color: var(--mly-mute); margin-left: 3px; }
.mly-card__pts { display: inline-block; font-size: 10px; line-height: 1; color: var(--mly-sub); border: 1px solid #ddd6df; border-radius: 3px; padding: 3px 5px; margin-top: 5px; }
/* ランキングは「◯点セット」を金額の横に置く（カードの幅に入りきらないときだけ下の行に回る） */
.mly-rank .mly-card__price { display: inline-block; vertical-align: middle; margin-right: 3px; font-size: 13px; letter-spacing: 0; }
.mly-rank .mly-card__price small { font-size: 8px; margin-left: 1px; }
.mly-rank .mly-card__pts { vertical-align: middle; margin-top: 4px; border: 0; padding: 0; font-size: 9px; }
.mly-flag { position: absolute; top: 0; left: 0; font-size: 10px; font-weight: 700; letter-spacing: .1em; padding: 5px 9px; border-radius: 8px 0 8px 0; }
.mly-flag--collab { background: var(--mly-ink); color: #fff; letter-spacing: .04em; }
.mly-medal { position: absolute; top: 0; left: 0; width: 28px; height: 28px; border-radius: 8px 0 8px 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; background: var(--mly-ink); color: #fff; }
.mly-medal--1 { background: var(--mly-gold); color: var(--mly-ink); }
.mly-medal--2 { background: #c9c6cc; color: var(--mly-ink); }
.mly-medal--3 { background: #c9a184; color: #fff; }
.mly-rank__tail .mly-medal { width: 22px; height: 22px; font-size: 11px; }

/* --- ランキング --------------------------------------------------------- */
.mly-rank { padding: 28px 0 26px; border-top: 8px solid #f7f4f7; }
.mly-rank__top3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; padding: 0 16px 18px; }
.mly-rank__mid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 10px; padding: 0 16px 18px; }
.mly-rank__tail { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 8px; padding: 0 16px; }
.mly-rank__tail .mly-card__name { font-size: 10px; -webkit-line-clamp: 2; margin-top: 6px; }
.mly-rank__tail + .mly-rank__tail { margin-top: 14px; }
.mly-rank__tail .mly-card__price { font-size: 12px; }
.mly-more { display: block; width: calc(100% - 32px); margin: 18px 16px 0; font-size: 12px; font-weight: 700; color: var(--mly-ink); background: #fff; border: 1px solid var(--mly-ink); border-radius: 999px; padding: 13px 0; text-align: center; }
.mly-rank__hidden { display: none; }
.mly-rank.is-open .mly-rank__hidden { display: grid; }

/* --- コラボ（横スクロール） --------------------------------------------- */
.mly-collab { padding: 28px 0 14px; border-top: 8px solid #f7f4f7; }
.mly-collab__scroll { display: flex; gap: 10px; overflow-x: auto; padding: 0 16px 12px; scroll-snap-type: x proximity; scroll-padding-left: 16px; -ms-overflow-style: none; scrollbar-width: none; }
.mly-collab__scroll::-webkit-scrollbar { display: none; }
.mly-collab__scroll .mly-card { flex: 0 0 40%; scroll-snap-align: start; }

/* --- よく一緒に買われるアイテム（COLLABORATION の直下・同じ横スクロール） ---------- */
.mly-bundle { padding: 28px 0 14px; border-top: 8px solid #f7f4f7; }
.mly-bundle__scroll { display: flex; gap: 10px; overflow-x: auto; padding: 0 16px 12px; -ms-overflow-style: none; scrollbar-width: none; }
.mly-bundle__scroll::-webkit-scrollbar { display: none; }
.mly-bundle__scroll .mly-card { flex: 0 0 30%; }
.mly-bundle__scroll .mly-card__ph { aspect-ratio: 1 / 1; }
.mly-bundle__scroll .mly-card__ph img { object-position: 50% 0; }
.mly-bundle__note { font-size: 10px; color: var(--mly-mute); line-height: 1.4; margin-top: 3px; }

/* --- このページだけ、共通ヘッダーの検索モーダルにある「カテゴリ丸アイコン25個」を出さない ------
   （cosplay2026.js が全コスプレページに出す .vmtop-catblock。マリームーンでは系統アイコンと重複するため） */
.vmtop-catblock:not(.vmtop-catblock-overlay) { display: none !important; }   /* v35: ヘッダーの「カテゴリ」で開く欄（-overlay）は消さない */

/* --- 絞り込み中／2ページ目以降に隠すゾーン ------------------------------ */
.mly-zone { display: block; }
body.mly-paged .mly-zone { display: none; }
/* v28: 2ページ目以降はバナー・紹介文・バッジも出さない（ロゴと見出し、系統・カラーは残す） */
body.mly-paged .mly-topbnr, body.mly-paged .mly-hero__desc, body.mly-paged .mly-hero__lead, body.mly-paged .mly-hero__pts { display: none !important; }
/* 絞り込み中は .mly-zone を商品一覧の後ろへ移す（v21。JS の moveZone）。その入れ物 */
.mly-zonewrap { margin-top: 36px; }

/* 絞り込み中はfutureshop標準の一覧ヘッダ・ページ送りを隠す（JS側が代替を出す） */
body.mly-filtering .fs-c-listControl,
body.mly-filtering .fs-c-pagination,
body.mly-filtering .fs-c-subgroupList { display: none !important; }

/* 絞り込みで対象外になった商品 */
.fs-c-productList__list > .mly-out { display: none !important; }  /* 本番は article、テーマにより li */

/* 絞り込み結果0件 */
.mly-empty { display: none; text-align: center; padding: 50px 20px; color: var(--mly-mute); font-size: 12px; line-height: 1.9; font-family: var(--mly-font); }
.mly-empty.is-on { display: block; }

/* 絞り込み中の自前ページ送り */
.mly-pager { display: none; align-items: center; justify-content: center; gap: 6px; margin: 28px 0 0; font-family: var(--mly-font); }
.mly-pager.is-on { display: flex; }
.mly-pager__btn { min-width: 34px; height: 34px; border-radius: 50%; font-size: 12px; font-weight: 500; background: #fff; color: var(--mly-ink); border: 1px solid #e6dfe6; font-family: var(--mly-font); cursor: pointer; box-sizing: border-box; }
.mly-pager__btn[aria-current="true"] { background: var(--mly-ink); color: #fff; border-color: var(--mly-ink); font-weight: 700; }
.mly-pager__btn[disabled] { color: #c9c2cc; border-color: #f0eaef; }
.mly-next { display: none; width: 100%; margin-top: 12px; font-size: 12px; font-weight: 700; color: var(--mly-ink); background: #f7f3f7; border: 1px solid #e6dfe6; border-radius: 999px; padding: 13px 0; font-family: var(--mly-font); cursor: pointer; box-sizing: border-box; }
.mly-next.is-on { display: block; }

/* --- 読み込み中 --------------------------------------------------------- */
.mly-loading { display: none; text-align: center; font-size: 11px; color: var(--mly-mute); padding: 24px 0; font-family: var(--mly-font); }
.mly-loading.is-on { display: block; }

/* --- v15: ブランド見出し（h1・紹介文・3つの安心ポイント） -------------------- */
.mly-hero { padding: 6px 16px 20px; }
.mly-hero__ttl { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; margin: 0; padding: 0; border: 0; background: none; font-size: 12px; line-height: 1.2; font-weight: 600; text-align: left; }
.mly-hero__ttl::before, .mly-hero__ttl::after { content: none; }
.mly-hero__en { font-size: 30px; font-weight: 600; letter-spacing: .04em; }
.mly-hero__logo { display: block; width: 130px; height: auto; margin-left: -4px; }
.mly-hero__ja { display: block; font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--mly-sub); }
.mly-hero__txt { display: block; flex: 1 1 0; min-width: 0; }
.mly-hero__desc { display: block; margin-top: 4px; font-size: 10px; font-weight: 400; line-height: 1.6; letter-spacing: 0; color: #3d3844; }
.mly-hero__lead { margin: 10px 0 0; font-size: 12px; line-height: 1.8; color: #3d3844; }
.mly-hero__pts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px !important; }
.mly-hero__pts li { font-size: 11px; font-weight: 700; line-height: 1; color: var(--mly-pink); background: #fdf1f6; border-radius: 999px; padding: 7px 11px; white-space: nowrap; }

/* --- 系統ボタン（ページ上）。v31 で2段の横スクロールをやめ、全部見える3列に --- */
.mly-slot-icons .mly-head { align-items: center; }
.mly-slot-bands .mly-head { padding-bottom: 10px; }

/* --- v15: 全商品の見出し（商品一覧の直前。JS が件数を入れる） ---------------- */
.mly-listhead { font-family: var(--mly-font); color: var(--mly-ink); max-width: 500px; margin: 0 auto; padding: 28px 16px 6px; border-top: 8px solid #f7f4f7; text-align: left; }
.mly-listhead .mly-head { padding: 0; }
body.mly-filtering .mly-listhead { display: none; }

/* --- v15: ブランド紹介・よくある質問（商品一覧の下） ------------------------- */
.mly-about { font-family: var(--mly-font); color: var(--mly-ink); max-width: 500px; margin: 36px auto 0; padding: 28px 16px 8px; border-top: 8px solid #f7f4f7; text-align: left; line-height: 1.6; }
.mly-about * { box-sizing: border-box; }
.mly-about__ttl { margin: 0 0 12px; padding: 0; border: 0; background: none; font-size: 16px; font-weight: 700; line-height: 1.5; text-align: left; }
.mly-about__ttl::before, .mly-about__ttl::after { content: none; }
.mly-about p { margin: 0 0 12px; font-size: 12px; line-height: 1.9; color: #3d3844; }
.mly-about__sub { margin: 22px 0 4px; padding: 0; border: 0; background: none; font-size: 13px; font-weight: 700; text-align: left; }
.mly-about__sub::before, .mly-about__sub::after { content: none; }
.mly-faq { border-bottom: 1px solid var(--mly-line); }
.mly-faq summary { position: relative; list-style: none; cursor: pointer; padding: 14px 28px 14px 0; font-size: 12px; font-weight: 700; line-height: 1.6; }
.mly-faq summary::-webkit-details-marker { display: none; }
.mly-faq summary::after { content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 18px; font-weight: 400; color: var(--mly-mute); }
.mly-faq[open] summary::after { content: '−'; }
.mly-faq p { margin: 0; padding: 0 0 14px; }
body.mly-filtering .mly-about { display: none; }

/* --- v15: 共通パーツのカテゴリ回遊（丸アイコンの帯）は、系統アイコンと重なるのでこのページでは出さない。
   ほかのカテゴリへはページ下の「なりたいコスから探す」から行ける。戻すときはこの1行を消す */
#top_recommend01 { display: none !important; }

/* --- PC幅（430px超）は横に伸ばす --------------------------------------- */
@media screen and (min-width: 768px) {
  .mly { max-width: 900px; }
  .mly-slot-icons .mly-icons__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px 8px; }
  .mly-slot-icons .mly-icons { padding: 6px 16px 22px; }
  .mly-hero { padding: 12px 16px 22px; text-align: center; }
  .mly-hero__ttl { justify-content: center; }
  .mly-hero__en { font-size: 36px; }
  .mly-hero__logo { width: 230px; margin-left: 0; }
  .mly-hero__txt { flex: 0 1 440px; text-align: left; }
  .mly-hero__desc { font-size: 12px; }
  .mly-rank .mly-card__price { font-size: 14px; margin-right: 6px; }
  .mly-rank .mly-card__price small { font-size: 9px; margin-left: 3px; }
  .mly-rank .mly-card__pts { border: 1px solid #ddd6df; padding: 3px 5px; font-size: 10px; }
  .mly-hero__lead { max-width: 640px; margin-left: auto; margin-right: auto; }
  .mly-hero__pts { justify-content: center; }
  /* PC のランキングは 5列×2段に並べ直す（3つの入れ物を解いて、カードを1つの格子に流す） */
  .mly-rank { display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px 14px; padding-left: 16px; padding-right: 16px; }
  .mly-rank > .mly-head, .mly-rank > .mly-more { grid-column: 1 / -1; padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; }
  .mly-rank__top3, .mly-rank__mid, .mly-rank__tail { display: contents; }
  .mly-rank__hidden { display: none; }
  .mly-rank.is-open .mly-rank__hidden { display: contents; }
  .mly-rank__tail .mly-card__name { font-size: 12px; }
  .mly-rank__tail .mly-card__price { font-size: 14px; }
  .mly-rank > .mly-more { width: 100%; }
  .mly-rank__tail .mly-medal { width: 28px; height: 28px; font-size: 13px; }
  .mly-listhead, .mly-about { max-width: 900px; }
  .mly-collab__scroll .mly-card { flex: 0 0 20%; }
  .mly-bundle__scroll .mly-card { flex: 0 0 16%; }
  .mly-sheet__panel { max-width: 900px; }
}

/* --- v21：ランキングなどの文字と金額を、下の商品一覧と同じ見た目にそろえる ---------
   英字と数字はサイト共通の futura-pt／Jost（読み込み済み）。商品名は細め・グレー、金額は細い数字で大きめ */
.mly { --mly-num: futura-pt, Jost, sans-serif; }
.mly .mly-head__en { font-family: var(--mly-num); font-weight: 400; font-size: 24px; letter-spacing: .12em; }
.mly .mly-head__ja { font-weight: 400; letter-spacing: .04em; }
.mly .mly-card__name { font-family: var(--mly-font); font-weight: 400; color: #5e5e5e; }
.mly .mly-card__price { font-family: var(--mly-num); font-weight: 400; font-size: 18px; line-height: 1.3; color: #636363; letter-spacing: -.01em; }
.mly .mly-card__yen { font-style: normal; font-size: .55em; margin-right: 1px; }
.mly .mly-card__price small { font-family: var(--mly-font); }
.mly .mly-rank .mly-card__price { font-size: 17px; }
.mly .mly-rank__tail .mly-card__price { font-size: 14px; }
.mly .mly-card__pts { font-family: var(--mly-font); color: var(--mly-mute); }
.mly .mly-medal { font-family: var(--mly-num); font-weight: 500; font-size: 14px; }
.mly .mly-rank__tail .mly-medal { font-size: 12px; }
.mly .mly-chip--band { font-family: futura-pt, Jost, var(--mly-font); font-weight: 500; font-size: 14px; letter-spacing: .02em; }
@media screen and (min-width: 768px) {
  .mly .mly-rank .mly-card__price { font-size: 20px; }
  .mly .mly-rank__tail .mly-card__price { font-size: 17px; }
}

/* v22: ランキングの金額と「◯点set」の文字の底をそろえる（前は中央合わせで、金額を大きくしたぶんずれていた） */
.mly .mly-rank .mly-card__price,
.mly .mly-rank .mly-card__pts { vertical-align: baseline; }
.mly .mly-rank .mly-card__pts { margin-top: 0; line-height: 1; }

/* v23: コラボ欄。色違いの画像をふわっと切り替える。下の点はいま何枚目か */
.mly .mly-swap__next { opacity: 0; transition: opacity .6s ease; }
.mly .mly-swap__next.is-on { opacity: 1; }
.mly .mly-swap__next:not([src]) { visibility: hidden; }
.mly .mly-swap__dots { position: absolute; left: 0; right: 0; bottom: 7px; display: flex; justify-content: center; gap: 4px; pointer-events: none; }
.mly .mly-swap__dots i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.55); box-shadow: 0 0 2px rgba(0,0,0,.35); }
.mly .mly-swap__dots i.is-on { background: #fff; }

/* v24: カラーの絞り込みをページ上にも出す（横1列）。色で絞り込んだとき、その色が売り切れの商品に出す帯 */
.mly .mly-colorrow .mly-color { flex: 0 0 auto; }
.mly-has-soldout { position: relative; }
.mly-soldout { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); z-index: 2; padding: 8px 0; background: rgba(24,18,28,.74); color: #fff; font-family: var(--mly-font, sans-serif); font-size: 12px; font-weight: 700; letter-spacing: .2em; line-height: 1; text-align: center; pointer-events: none; }

/* v25: 一覧の商品画像を在庫のある色の画像へ順に切り替える（重ねた画像をふわっと出す） */
.mly-cyc { position: relative; }
.mly-cyc__next { position: absolute; z-index: 1; object-fit: cover; opacity: 0; transition: opacity .6s ease; pointer-events: none; }
.mly-cyc__next.is-on { opacity: 1; }

/* v26: 紹介文とバッジ（正規取扱店など）をスマホでも中央揃えに。紹介文は言葉の区切りでだけ改行する */
.mly-hero__lead { text-align: center; }
.mly-hero__lead span { display: inline-block; }
.mly-hero__pts { justify-content: center; }

/* v27: 「ALL ITEMS」の見出しを、ほかの見出し（RANKING・WITH ITEMS）と同じ細い英字にそろえる／「WITH ITEMS」の見出しを中央揃えに */
.mly-listhead .mly-head__en { font-family: futura-pt, Jost, sans-serif; font-weight: 400; font-size: 24px; letter-spacing: .12em; }
.mly-listhead .mly-head__ja { font-weight: 400; letter-spacing: .04em; }
.mly-bundle > .mly-head { justify-content: center; text-align: center; }

/* v30: ランキングの順位をリボン形に。1〜3位は金・銀・銅のつや、4位からは淡い色。
   リボンは写真の上に出して、下の切れ込みだけが写真にかかる（商品に重ならない） */
.mly .mly-card--ranked { position: relative; padding-top: 18px; }
.mly .mly-card--ranked .mly-medal { position: absolute; z-index: 2; top: 0; left: 6px; width: 24px; height: 26px; padding: 0 0 5px; box-sizing: border-box; border-radius: 0; display: flex; align-items: center; justify-content: center; font-family: var(--mly-num); font-weight: 500; font-size: 13px; line-height: 1; background: #ece6ec; color: var(--mly-ink); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%); }
.mly .mly-card--ranked .mly-medal--1 { background: linear-gradient(160deg, #ead6a8, #c6a35f); color: #fff; }
.mly .mly-card--ranked .mly-medal--2 { background: linear-gradient(160deg, #e0dfe4, #a9a7b0); color: #fff; }
.mly .mly-card--ranked .mly-medal--3 { background: linear-gradient(160deg, #dfbb9e, #b0805e); color: #fff; }
.mly .mly-rank__tail .mly-card--ranked { padding-top: 15px; }
.mly .mly-rank__tail .mly-card--ranked .mly-medal { left: 4px; width: 20px; height: 22px; padding-bottom: 4px; font-size: 11px; }
@media screen and (min-width: 768px) {
  .mly .mly-card--ranked { padding-top: 22px; }
  .mly .mly-card--ranked .mly-medal,
  .mly .mly-rank__tail .mly-card--ranked .mly-medal { left: 8px; width: 28px; height: 30px; padding-bottom: 6px; font-size: 14px; }
  .mly .mly-rank__tail .mly-card--ranked { padding-top: 22px; }
}

/* v30: 限定コラボの札は白地にピンクの細い枠。うっすら点滅させて目を引く（動きを減らす設定の端末では止める） */
.mly .mly-flag--collab { z-index: 2; top: 8px; left: 8px; padding: 4px 8px; border-radius: 3px; background: rgba(255,255,255,.92); color: var(--mly-pink); border: 1px solid var(--mly-pink); font-size: 10px; font-weight: 700; letter-spacing: .06em; line-height: 1.2; animation: mly-collab-blink 2.4s ease-in-out infinite; }
@keyframes mly-collab-blink { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .mly .mly-flag--collab { animation: none; } }

/* --- v33：絞り込みのボタン・メニュー・条件バーを、サイトのカートボタンと同じ色に ---------
   丸 #f7a4d8／アイコン #ffe2f1／件数の丸 #ef61c2（#fs_p_scrollingCartButton の実際の色） */
.mly-fab, .mly-bar, .mly-sheet { --mly-pink: #ef61c2; }
.mly-fab { background: #f7a4d8; box-shadow: 0 6px 18px rgba(239,97,194,.28); text-shadow: 0 1px 2px rgba(196,64,150,.35); }
.mly-fab__num:not(:empty) { opacity: 1; background: #ef61c2; color: #fff; text-shadow: none; border-radius: 999px; padding: 3px 9px; font-size: 12px; line-height: 1.3; }
.mly-sheet__cta, .mly-bar__edit { background: #f7a4d8; text-shadow: 0 1px 2px rgba(196,64,150,.35); }
.mly-bar { background: #ffe2f1; color: var(--mly-ink); border-bottom-color: #f7c6e4; box-shadow: 0 2px 8px rgba(239,97,194,.14); }
.mly-sheet .mly-icon[aria-pressed="true"], .mly-sheet .mly-color[aria-pressed="true"] { background: #ffe2f1; }

/* --- v34：絞り込みの帯（SHEIN の一覧のように、ページ上の系統・カラーを過ぎたら上に常に出す） ---------
   1段目＝「絞り込み」と系統のボタン（横に送る）、2段目（.has-cond のときだけ）＝条件・件数・変更・解除 */
.mly-bar { display: block; height: auto; padding: 0; background: #fff; border-bottom: 1px solid #f7c6e4; }
.mly-bar button { font-family: var(--mly-font); }
.mly-bar__row { display: flex; align-items: center; gap: 8px; height: 46px; padding-left: 12px; }
.mly-bar__open { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: #fff; background: #f7a4d8; border: 0; border-radius: 999px; padding: 7px 14px; white-space: nowrap; text-shadow: 0 1px 2px rgba(196,64,150,.35); cursor: pointer; }
body.mly-filtering .mly-bar__open { background: #ef61c2; }
.mly-bar__chips { flex: 1 1 auto; min-width: 0; display: flex; gap: 6px; overflow-x: auto; padding: 0 12px 0 0; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
.mly-bar__chips::-webkit-scrollbar { display: none; }
.mly-qchip { flex: 0 0 auto; font-size: 12px; font-weight: 500; color: var(--mly-ink); background: #fff; border: 1px solid #f3c3df; border-radius: 999px; padding: 6px 12px; white-space: nowrap; cursor: pointer; }
.mly-qchip[aria-pressed="true"] { background: #ffe2f1; border-color: #ef61c2; color: #c4318f; font-weight: 700; }
.mly-bar__cond { display: none; align-items: center; gap: 10px; height: 34px; padding: 0 12px 0 14px; background: #ffe2f1; border-top: 1px solid #f7c6e4; }
.mly-bar.has-cond .mly-bar__cond { display: flex; }
body.mly-baron .mly-fab { opacity: 0; transform: translateX(-50%) translateY(16px); pointer-events: none; }

/* --- v35：帯が出ている間はサイトのヘッダー（ロゴ・新作／全商品…の列）を隠す。帯は画面の一番上に固定（位置がずれないように） --------- */
body.mly-baron #global_header { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }

/* --- v36：右端の「全商品を見る」タブも、下中央の「絞り込み」ボタンと同じピンクに（本人の指示 10/14） --- */
.mly-tab { background: #f7a4d8; box-shadow: -2px 4px 14px rgba(239,97,194,.28); text-shadow: 0 1px 2px rgba(196,64,150,.35); }

/* --- v37（10/15 本人の指示）------------------------------------------------
   ・「WITH ITEMS／よく一緒に買われるアイテム」の見出しを、ほかの見出しと同じ左寄せに戻す（v27 の中央揃えをやめる）
   ・商品一覧の下側の「並び替え」は出さない（上側だけ残す。下側のページ送りは残す）
   ・「なりたい系統で探す」の上に、ランキングの上と同じ区切りの線 */
.mly-bundle > .mly-head { justify-content: flex-start; text-align: left; }
.fs-c-productList__controller ~ .fs-c-productList__controller .fs-c-sortItems { display: none !important; }
.mly-slot-icons { padding-top: 28px; border-top: 8px solid #f7f4f7; }

/* --- v38（10/15 本人の指示）----
   「次の◯件を見る」の背景色をなくし、「ランキングの◯位まで見る」（.mly-more）と同じ白地・黒枠のボタンにする */
.mly-next { background: #fff; border: 1px solid var(--mly-ink); text-align: center; }

/* --- v39（10/15 本人の指示）----
   上の帯の「絞り込み」の右に「色も絞り込む」ボタン（押すと「カラーで探す」へ移る）。系統のボタンと区別できるよう濃いピンクの枠 */
.mly-bar__color { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: #c4318f; background: #fff; border: 1px solid #ef61c2; border-radius: 999px; padding: 6px 12px; white-space: nowrap; cursor: pointer; }
.mly-bar__row { gap: 6px; }

/* --- v40（10/15 本人の指示）----
   「色も絞り込む」が幅を取りすぎるので、色の丸＋「色」に（見本 B） */
.mly-bar__color { padding: 6px 10px; }
.mly-bar__dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: -1px; margin-right: 4px; background: conic-gradient(#e94b4b, #f2c94c, #5fbf6f, #4b8be9, #a46be9, #e94b4b); }

/* --- v41（10/15 本人の指示）----
   帯が出ている間もサイトのヘッダーを消さない（v35 の取り消し）。ヘッダーの出し入れはサイト共通の .vm-hd-off に任せ、
   帯はヘッダーが出たらその真下へくっついて動く。下がるときはヘッダーのふわっと（.32s）、上がるときは消え方（.16s）に合わせる */
body.mly-baron #global_header { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; }
body.mly-baron #global_header.vm-hd-off { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
.mly-bar.is-on { transition: opacity .2s, visibility .2s, transform .16s ease; }
.mly-bar.is-on.is-low { transition: opacity .2s, visibility .2s, transform .32s ease; }
@media (prefers-reduced-motion: reduce) { .mly-bar.is-on, .mly-bar.is-on.is-low { transition: none; } }