/*
Header テキストメニュー
------------------------------------------------*/
@media screen and (max-width: 768px) {
.txt_menu {
margin-top: -1.1em;
}
}
.txt_menu {
padding: 0;
margin-top: -.3em;
margin-bottom: 0;
background-color: #fff;
border-top: solid 1px #ddd;
}
.txt_menu li {
border-right: none;
}
.txt_menu li a {
/*font-family: fot-tsukuardgothic-std, sans-serif;*/
font-weight: 400;
font-style: normal;
font-size: 80%;
text-align: center;
padding: 10px .8rem;
line-height: 1.1;
}
.txt_menu li span {
font-weight: 400;
font-style: normal;
font-size: 80%;
text-align: center;
padding: 10px .8rem;
line-height: 1.1;
letter-spacing: .1em;
color: #666;
display: block;
}
/* ============================================================
cosplay2026.css — ハロウィン2026 TOPページ 20260809 -- shimizu
設置先: https://vanityme.itembox.cloud/item/css/cosplay2026.css
============================================================ */
/*@import url('https://fonts.googleapis.com/css2?family=Zen+Kurenaido&family=Shippori+Mincho:wght@500;600;700&family=Space+Mono:wght@400;700&display=swap');*/
/* ───────── 紙のテクスチャ（フッターとカタログ帯で共用） ─────────
画像ではなく SVG の feTurbulence で作っている。アップロードするファイルが
増えず、拡大しても粒が崩れない。
★デザインの粒をそのまま再現はしていない。アートボードの地は
平均239・標準偏差9.65の白色ノイズで（1/2に縮小するたび標準偏差がちょうど
半分になる＝大きな模様は無い）、粒の大きさは3倍原寸の1px。
これはCSSでは0.33pxで実機の1デバイスピクセルより細かいため、忠実に再現すると
画面上ではほぼ平面に見える。「ノイズが見える背景」にするには粒を粗くする
必要があるので、baseFrequency は実測ではなく見た目で決めた値。
★濃さを変えるときは opacity だけを触ること。
feTurbulence の出力は中間グレー寄りなので、重ねると必ず暗くなる。
canvasで実測したところ #f2f2f2 + opacity 0.5 では平均228まで落ちていた
（元のフラットな #f7f7f7 は247）。地を白にして濃さを0.2に下げ、
平均248・標準偏差1.94に収めてある。地色を暗くすると同じ轍を踏む。
目安: opacity 0.15 → 平均249.9/σ1.46 ／ 0.25 → 平均246.4/σ2.41
stitchTiles="stitch" が無いとタイルの継ぎ目に線が出る。
:root に置いているのは、フッターとカタログ帯でデータURIを二重管理しないため。
カスタムプロパティなので、この宣言自体は何も描画しない。 */
:root {
--vm-paper-bg: #ffffff;
--vm-paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23p)' opacity='0.2'/%3E%3C/svg%3E");
}
/* ───────── スマホの左右余白を殺す（.vmtop スコープ外・要注意） ─────────
テンプレートの .container が左右に 5px の余白を持っていて、ヒーロー・リボン・
ALL ITEM・カタログのような全幅で見せる要素が画面の端まで届かなかった。
スマホ幅だけ 0 にして、デザインどおり端まで使う。
★ ここだけ .vmtop 系ではない共通クラスを触っている。このファイルを読む
ページ（テストページと、切り替え後の /c/costume）全体に効くので、
ヘッダーやパンくずなど 2026 の作りでない部分にも影響する。
!important が要る。テンプレート側の .container が !important 付きで
padding を指定していて、詳細度を上げる（body .container）だけでは負ける。
実測: .container → 5px のまま / body .container → 5px のまま / !important → 0px。
.container の中には .fs-c-breadcrumb（パンくず）も入っている。そのままだと
「TOP > …」が画面の端に貼り付くので、失った 5px をパンくず側に戻している。
768px 以上ではテンプレートの .container に max-width が付いて中央寄せになるため、
5px は見た目に影響しない。だからスマホ幅だけに限定している。 */
@media (max-width: 767px) {
.container {
padding-left: 0 !important;
padding-right: 0 !important;
}
.fs-c-breadcrumb {
padding-left: 5px;
padding-right: 5px;
}
}
/* ───── フレームワーク新規セクション ───── */
/* ───────── 共通（.vmtop スコープ） ───────── */
.vmtop {
--vm-accent: #c0588f;
--vm-soft: #f8e2ee;
--vm-ink: #594057; /* 旧 #aea1b5。コントラスト 2.45 で読めなかった */
--vm-dark: #2a2a2e;
font-family: sans-serif;
max-width: 640px;
margin: 0 auto;
color: var(--vm-dark);
box-sizing: border-box
}
:where(.vmtop *) {
box-sizing: border-box;
margin: 0;
padding: 0
}
.vmtop a {
color: var(--vm-ink);
text-decoration: none
}
.vmtop a:hover {
color: var(--vm-accent)
}
.vmtop-sec {
padding: 22px 5px;
/*border-top: 1px solid #eee*/
}
.vmtop-label {
/*font-family: 'Space Mono', monospace;*/
font-size: 11px;
letter-spacing: .3em;
color: var(--vm-ink);
font-weight: 700;
margin-bottom: 2px
}
.vmtop-lead {
font-size: 13.5px;
color: #555;
margin-bottom: 14px
}
/* ───────── h1 ───────── */
.vmtop-h1 {
margin: 0 auto; /* .vmtop の margin:0 auto を打ち消さない。
0 のままだと幅640pxを超える画面で左端に寄る */
font-size: 8px;
font-weight: 600;
letter-spacing: .08em;
color: var(--vm-ink);
padding: 8px 16px;
text-align: center;
font-weight: 300;
}
/* ───────── セクション見出し（しおり + 欧文 ｜ 和文） ─────────
実測（アートボード1.png / FEATURE の行）:
しおり x 13.33-22.67 (幅9.33) / y 678.00-691.67 (高13.67)
688.67から下がV字の切り欠き（深さ3.00）／ 色 rgb(226,208,253)
FEATURE 字面 x 34.33-101.33 (幅67.00) キャップ高7.67
→ serif 700 10px / letter-spacing 3.1px（字面66.78）
｜ x 114.33-115.00 (幅0.67) / y 679.67-691.33 (高11.67)
和文 字面 x 129.33-272.33 (幅143.00) 字面高10.67
→ sans-serif 12.25px（字面144.3）
文字色はいずれも rgb(82,73,99)。3つとも同じベースライン(689.67)に乗る。 */
.vmtop-heading {
display: flex;
align-items: baseline;
color: rgb(82, 73, 99);
}
/* アートボード1.pngの実測: しおり y 678.00-691.67 ／ FEATUREのキャップ上端 682.00
／ ベースライン 689.67。つまり キャップより4.00px上、ベースラインより2.00px下。
flex の baseline 揃えに任せると空要素の下端がベースラインより上に来てしまい、
実測より3.4px高い位置（キャップより7.4px上）に浮いていた。その分を下げる。 */
/* ★アイコンも欧文に合わせて拡大（実測 9.33x13.67 → 1.15倍）。
top は拡大後に欧文のキャップ帯と釣り合う位置をブラウザで測り直した値。 */
.vmtop-heading-mark {
position: relative;
top: 3.40px; /* 実測4.41。欧文を11.5pxにしてキャップ帯が動いたぶん
1.01px上げ、帯の上下中央に戻した */
flex: none;
width: 10.73px;
height: 15.72px;
background: rgb(226, 208, 253);
clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%);
}
/* ★実測は 10px / 字送り3.1px。「英文字を少し大きく、字を詰めて、右の和文と
バランスを取る」との指示で 11.5px / 2.2px にしてある。
和文は12.14pxなので、欧文のキャップ高が近づいて重さが揃う。
字送りを詰めたぶん、下の .vmtop-heading-bar の margin-left も0.9px広げてある
（末尾の文字にも字送りが付くため、その残りを打ち消している）。 */
.vmtop-heading-en {
margin-left: 11.66px;
font-family: serif;
font-weight: 700;
font-size: 11.5px;
letter-spacing: 2.2px;
}
.vmtop-heading-bar {
position: relative;
top: 1.27px; /* 左右の文字の字面の上下中央にバーの中心が来る値。
欧文を10→11.5pxにしたとき、この値だけ直し忘れて
4か所とも3.15px下がっていた。
欧文と和文の字面中心は0.2px以内で一致しているので、
この共通の1行で4つの見出しすべてが揃う。
（実測から起こした元の値は4.42px） */
flex: none;
width: .67px;
height: 11.67px;
margin-left: 10.26px; /* 末尾の字送り(2.2px)が付くぶん詰める。
字送りを3.1→2.2に変えたので9.36→10.26 */
background: rgb(82, 73, 99);
}
.vmtop-heading-ja {
margin-left: 14.33px;
font-size: 12.14px;
}
/* ───────── FEATURE ───────── */
/* 実測: セクションの左右余白 6.67px（カード x 6.67-352.67）。
見出しだけ 13.33px から始まるので、見出しに 6.66px の追加インデントを付ける。
リボン下端661.33 → しおり上端678.00 = 16.67 / 見出し下端691.67 → カード上端712.00 = 20.33 */
/* 下パディングは実測0だが、それだと「特集の続きを見る」から診断カードまで12px
（.vmhs-wrap の6px＋bnr_shindan.webp 内の透明余白6px）しか空かず、
セクションの切れ目に見えないとの指示で38pxを足している。
ボタンの枠下端からカードの不透明部分まで50px＝NEW AVENUE 前の53pxとほぼ同じ。 */
#feature.vmtop-sec {
padding: 16.67px 7.33px 38px 6.67px; /* 右は 360-352.67=7.33。左右で違う */
}
#feature .vmtop-heading {
padding-left: 6.66px;
margin-bottom: 14.97px; /* 字面の下端からカード上端まで20.33pxになる値 */
}
.vmtop-push {
position: relative;
display: block;
border-radius: 10px;
overflow: hidden;
border: 1.5px solid var(--vm-accent);
margin-bottom: 10px
}
.vmtop-push img {
display: block;
width: 100%
}
.vmtop-push-badge {
position: absolute;
top: 9px;
left: 9px;
font-size: 9px;
letter-spacing: .1em;
background: var(--vm-accent);
color: #fff;
padding: 3px 9px;
border-radius: 10px
}
/* 実測: カード 170x212.33（＝4:5）を2列、列の間隔6.00、行の中心ピッチ237.67。
角丸も枠線も無い。キャプションはカードの左端から6.67px、写真の下から7.33px。 */
.vmtop-sq-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px 6px; /* ★行間はキャプション下の余白を広げたいとの指示で
実測の5.24pxから12pxに。行の中心ピッチは
実測237.67 → 244.4 になる（列の間隔6.00は実測どおり） */
margin-bottom: 13.4px
}
.vmtop-sq-item {
text-decoration: none
}
.vmtop-sq {
display: block;
border-radius: 10px; /* ★指定により角丸に戻した。
アートボード1.pngのカードは直角だったが、
角丸にしたいとの指示。半径は元CSSと同じ10px。 */
overflow: hidden
}
.vmtop-sq img {
display: block;
width: 100%;
aspect-ratio: 4 / 5;
object-fit: cover
}
/* 字面 111.33px / 字面高 8.00px（「#マリームーンコラボ2026」で実測）→ 9px+0.2px */
.vmtop-sq-tag {
margin: 7.33px 0 0 6.67px;
font-size: 9px;
letter-spacing: .2px;
font-weight: 500;
color: #383b45;
line-height: 1.4
}
/* 「特集の続きを見る」「すべてのカテゴリを見る」共通のピル型ボタン
アートボード1.png の「特集の続きを見る」で再実測（旧: 診断と検索デザインOL.pdf）
本体 x 7.33-350.67 / y 1433.00-1494.33 → 343.34 x 61.33（旧実測 343.8x61.7 と一致）
塗り rgb(242,242,245)
文字 字面 x 120.33-240.33 (幅120.00) 高12.00 / 色 rgb(85,91,101)
→ 13px / letter-spacing 2.6px（字面119.98・高12.12）
ドット 直径2.67・間隔5.83・右端から31.34 / 色 rgb(99,87,109)
★影は保留。アートボード1.png は AI から書き出したもので、ドロップシャドウと
グラデーションが「ぼけない濃い輪郭」に化けている。この輪郭を実測すると
はみ出しが 左1.66 右6.66 上1.33 下7.00（＝offset 2.5/2.83・spread 4.16・
rgb(107,102,99)）になるが、これは書き出しの都合であって指定ではない。
影の広がりの目安としてだけ残し、見た目は元のソフトシャドウのままにしてある。
修正版の書き出しが来たら取り直すこと。 */
.vmtop-morebtn,
.vmtop-viewmore,
.vmtop-new-btn {
position: relative; /* 必須：ドットの絶対配置の基準 */
display: flex;
align-items: center;
justify-content: center;
/* ★実測343.34。「もう少しだけ左右に大きく」との指示で350pxにした。
max-width は 100%（＝セクションの内側）にしておくこと。
セクションごとに左右パディングが違うので、内側の幅は画面幅によって変わる。
例: #feature は 360px幅なら346px、375px幅なら361px。
ボタンが内側の幅を超えると margin:auto が0に潰れて左端に寄り、中央から外れる。
100% にしておけば、狭いときは内側いっぱいまで縮んで必ず中央に来る
（360px幅では FEATURE だけ4px細くなるが、他のセクションと並べて
見える場所ではないので気にしない）。
ここを calc(100vw - …) のような画面基準にすると、内側が狭いセクションで
はみ出して左寄せになる。実際それで #feature だけ左にズレ、
負のマージンで打ち消すという場当たりな修正を入れてしまった。 */
width: 350px;
max-width: 100%;
margin-left: auto; /* 幅640pxのコンテナでも中央に置く */
margin-right: auto;
padding: 20.9px 26px;
border: none;
border-radius: 999px;
background: rgb(242, 242, 245);
/* ★「下のグラデーションを濃くして、ボタンとの境界がぼやけて見えないように」との
指示。ぼけを5→4pxに絞って濃さを .09→.22 に上げ、ずれを2→3pxにした。
ぼけを広げたまま濃くすると、境界がぼやけたまま影だけ目立って逆効果になる。 */
box-shadow: 0 3px 4px rgba(0, 0, 0, .22);
font-size: 13px;
font-weight: 400;
color: rgb(85, 91, 101);
letter-spacing: 2.6px;
cursor: pointer;
}
#feature a.vmtop-morebtn,
#new a.vmtop-new-btn { color: rgb(85, 91, 101) }
/* 3点ドット：radial-gradient で描画（直径2.67px・間隔5.83pxは文字では出せない） */
.vmtop-morebtn::after,
.vmtop-viewmore::after,
.vmtop-new-btn::after {
content: "";
position: absolute;
right: 31.34px;
top: 50%;
transform: translateY(-50%);
width: 14.33px;
height: 2.67px;
background: radial-gradient(circle at 1.335px 1.335px,
rgb(99, 87, 109) 1.33px, transparent 1.4px)
0 0 / 5.83px 2.67px repeat-x;
}
/* ───────── 検索 ───────── */
.vmtop-search {
position: relative;
margin-bottom: 16px
}
.vmtop-search-bar {
display: flex;
align-items: center;
gap: 9px;
border: .5px solid #594057;
padding: 17px 20px;
background: #fff;
border-radius: 30px
}
.vmtop-search-icon {
flex: none;
width: 18px; /* 実測 54px の画像を3倍として表示 */
height: 18px;
display: block;
}
.vmtop-suggest-icon {
flex: none;
width: 15px;
height: 15px;
display: block;
}
/* ★実測は13pxだが16pxにしてある。デザインから外しているのは意図的。
iOS Safari は 16px 未満の入力欄にフォーカスすると自動でページを拡大する。
このサイトのテンプレートの viewport は width=device-width だけで
initial-scale=1 も maximum-scale も無いため、一度拡大されると戻らず、
画面から横にはみ出したままになる。
16px がズームを起こさない下限なので、これ以上小さくしないこと。
（テンプレートの meta は独自コメントから触れないので、CSS側で防ぐしかない） */
.vmtop-search-bar input {
flex: 1;
min-width: 0; /* flex項目の既定 min-width:auto だと、
文字が伸びたときに親を押し広げてはみ出す */
font-size: 16px;
border: none;
outline: none;
color: var(--vm-dark);
background: transparent;
font-family: inherit
}
.vmtop-search-panel {
display: none;
border: .5px solid #594057; /* 実測。検索バーと同じ色でひと続きに見せる */
border-top: none;
border-radius: 0 0 18px 18px;
padding: 14px 16px 16px;
background: #fff;
box-shadow: 0 10px 22px rgba(0, 0, 0, .06)
}
.vmtop-search.open .vmtop-search-bar {
border-radius: 18px 18px 0 0
}
.vmtop-search.open .vmtop-search-panel {
display: block
}
.vmtop-kw-label {
/*font-family: 'Space Mono', monospace;*/
font-size: 9px;
letter-spacing: .16em;
color: #594057;
margin-bottom: 9px;
font-weight: 700
}
.vmtop-kws {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 14px
}
.vmtop-kw {
display: inline-flex;
align-items: center;
height: 36px; /* 実測 41.0 */
padding: 0 20px;
font-size: 12px;
border-radius: 999px; /* 実測 角丸20.5＝高さの半分 */
border: .5px solid #594057;
background: #fff;
color: var(--vm-dark)
}
.vmtop-kw.hot {
background: #fbe6ff; /* 実測。枠と文字色は未選択と共通 */
}
.vmtop-suggest {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 2px;
border-bottom: 1px solid #d6ced6; /* 実測 */
font-size: 13px;
color: #3a3a3e
}
.vmtop-suggest:last-child {
border-bottom: none
}
.vmtop-suggest .vm-rel {
font-size: 10px;
color: #594057;
margin-left: 6px
}
/* --- 1c 条件で絞り込む --- */
.vmtop-filter-row {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 11px 2px;
border: none;
background: none;
border-bottom: 1px solid #f7f0f4;
cursor: pointer;
font-family: inherit;
text-align: left
}
.vmtop-filter-row:last-of-type {
border-bottom: none
}
.vmtop-filter-name {
font-size: 13.5px;
color: var(--vm-dark)
}
.vmtop-filter-hint {
display: flex;
align-items: center;
gap: 8px;
font-size: 11px;
color: #594057
}
.vmtop-filter-hint .mono {
/*font-family: 'Space Mono', monospace;*/
font-size: 11px
}
.vmtop-filter-plus {
/*font-family: 'Space Mono', monospace;*/
font-size: 12px;
color: var(--vm-accent)
}
.vmtop-filter-body {
display: none;
padding: 11px 12px 13px;
background: #fcf7ff; /* 実測 */
border-radius: 0 0 10px 10px
}
.vmtop-filter.open .vmtop-filter-body {
display: block
}
.vmtop-filter.open .vmtop-filter-row {
background: #fcf7ff; /* 見出し行と中身で1つの帯に見せる */
border-radius: 10px 10px 0 0;
padding-left: 12px;
padding-right: 12px;
border-bottom-color: transparent
}
.vmtop-fdot {
width: 18px;
height: 18px;
border-radius: 50%;
border: 1.5px solid #fff;
box-shadow: 0 0 0 1px #dcd9d3;
display: inline-block
}
.vmtop-fopt {
display: inline-flex;
align-items: center;
height: 36px; /* 実測。キーワードのチップと同じ */
padding: 0 18px; /* 20pxだと金額の3つが1行に収まらない。
「¥10,000〜¥14,999」を含む3つで実測338.7px、
gap 16pxを足すと354.7pxで枠の349pxを超えていた。
18pxで342.7px＋16px＝枠内に収まる。
展開時のチップはデザインに無いので、この余白は実測値ではない */
font-size: 12px;
color: var(--vm-dark);
border: 0.5px solid #594057;
border-radius: 999px;
background: #fff;
text-decoration: none
}
.vmtop-fopt:hover {
border-color: var(--vm-accent);
color: var(--vm-ink)
}
.vmtop-fopt.sz {
/*font-family: 'Space Mono', monospace;*/
border-radius: 8px
}
.vmtop-fcolor {
width: 26px;
height: 26px;
border-radius: 50%;
border: 2px solid #fff;
box-shadow: 0 0 0 1px #dcd9d3;
display: inline-block;
cursor: pointer
}
.vmtop-fopts {
display: flex;
gap: 8px;
flex-wrap: wrap;
align-items: center
}
.vmtop-close {
cursor: pointer;
color: #594057;
font-size: 13px;
border: none;
background: none
}
/* ───────── カテゴリ ───────── */
/* ───────── CATEGORY ─────────
実測（アートボード1.png）:
帯 y 2197.00-2684.33（全幅・背景 rgb(242,242,245)）
見出し しおりではなく「値札」のアイコン 15x15、字面 x 18.67-33.67
CATEGORY 字面 x 38.67-120.67 (幅82.00) キャップ高7.67
和文「なりたいコスから探す」字面 x 147.00-263.00 (幅116.00)
ベースライン 2233.33（アイコンは上に12.0・下に3.0）
丸 外径72.66・写真65.00・中心ピッチ84.33（列の間隔11.67）
1列目の左 14.67 / 4列目の右 340.32
行のピッチ 107.33（3行の実測 2263.33 / 2373.33 / 2478.00 の平均）
ラベル 「バニー」字面 29.33x7.33 → 9px / letter-spacing 1.9px
丸の下端から字面まで 11.34
ボタン y 2601.67-2667.00
※丸の輪の内訳（藤色2 + 白2）は、影が輪郭化している影響で ±1px の幅がある。
外径72.66と写真65.00は縁がはっきり出ているので、そこから逆算している。 */
.vmtop-catblock {
margin: 0 -16px; /* .vmtop-sec の左右padding 16pxを打ち消して全幅にする */
padding: 24.33px 0 21.33px; /* 左右の余白は見出しと丸のグリッドに個別に持たせる。
帯にpaddingを付けるとボタンが幅343.34pxを取れず、
中央にも来なくなる */
background: rgb(242, 242, 245);
}
.vmtop-catblock .vmtop-heading-en {
margin-left: 5.01px; /* 実測 アイコン右33.67 → CATEGORY左38.67 */
}
.vmtop-catblock .vmtop-heading {
padding-left: 18.67px; /* 実測 */
margin-bottom: 23.62px;
}
/* 値札のアイコン（FEATUREのしおりとは別形状） */
.vmtop-heading-tag {
width: 17.25px; /* ★実測15。FEATUREのしおりと同じ1.15倍 */
height: 17.25px;
position: relative;
/* アートボード1.pngの実測: 値札 y 2221.33-2236.33 ／ CATEGORYのキャップ上端
2225.67 ／ ベースライン 2233.33。キャップより4.34px上、ベースラインより3.00px下。
FEATUREのしおりと同じく、baseline揃えのままだと5.4px高く浮くので下げる。 */
top: 4.12px; /* 実測5.4。欧文の拡大でキャップ帯が動いたぶん1.28px上げた */
background: rgb(226, 208, 253);
clip-path: none;
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
/* 値札の穴 */
.vmtop-heading-tag::after {
content: "";
position: absolute;
left: 67.3%;
top: 18.7%;
width: 14%;
height: 14%;
border-radius: 50%;
background: rgb(242, 242, 245);
}
.vmtop-cat-grid {
padding: 0 19.68px 0 14.67px; /* 実測 1列目の左14.67 / 4列目の右340.32 */
display: grid;
/* minmax(0,1fr) にしないと、列が中身より縮まず横にはみ出す */
grid-template-columns: repeat(4, minmax(0, 1fr));
/* ★列の間隔は実測11.67pxだが、ストーリーズに合わせて丸を大きくするため8pxに
詰めてある。360px幅での計算:
使える幅 = 360 - 14.67(左) - 19.68(右) = 325.65
325.65 - 8*3 = 301.65 → 1列 75.41px
11.67のままだと1列72.66pxで、max-width:76 まで届かない。 */
gap: 13.5px 8px; /* 行ピッチ107.33 になる値 */
/* 実データのカテゴリ名は全て1行。仮データに「制服・セーラー」があった頃は
ラベルが2行になっていて、その1行分(13.5px)を含んだ値で合わせてしまっていた。
ラベルが折り返さない前提で、ボタン上端404.67 / 帯の高さ487.33 に合わせ直した値。 */
margin-bottom: 28.01px
}
.vmtop-cat {
text-align: center;
text-decoration: none;
-webkit-tap-highlight-color: transparent; /* iOSの灰色フラッシュを消す */
}
/* ストーリーズの丸と同じ作りにする（外側から順に）:
1. グレーの薄いグラデーション
2. 紫の背景。左上にずらしてあるので左上だけ厚く見える
3. 紫の約1pxの線
4. 白の2pxの線
5. 写真
ストーリーズは「紫の円 + その上に白い円」の2要素で作れるが、ここは丸が
1要素なので box-shadow を3枚重ねて同じ見え方を作っている。
重ね順は先に書いたものが上。 */
.vmtop-cat-circle {
position: relative;
width: 100%;
max-width: 76px; /* ★実測69。ストーリーズの丸と揃えた */
aspect-ratio: 1;
height: auto;
border: 2px solid #fff; /* 4. 白の線 */
border-radius: 50%;
margin: 0 auto;
background: #f1efe9 center top/cover no-repeat;
background-clip: padding-box;
box-shadow:
0 0 0 1px rgb(211, 190, 229), /* 3. 紫の線 */
-5px -5px 0 1px rgb(211, 190, 229), /* 2. 左上にずらした紫の背景
★ストーリーズと同じ太さに揃えた（-2px から）。
左上に見える紫は ずらし5px + 線1px = 6px。
押し込みは -3px なので、これより細くすると
押した瞬間に紫が消える。 */
-4px -4px 8px 1px rgba(90, 100, 120, .30); /* 1. グレーのグラデーション
★ストーリーズと同じ強さに揃えた
（6px/.20 から） */
transition: box-shadow .12s ease-out, transform .12s ease-out;
cursor: pointer
}
/* 押したときは影を浅くして、影の向き（左上）へ沈ませる。ストーリーズと同じ動き。
★「押し込みを分かりやすく」の指示でストーリーズと同じ振れ幅（3px）に揃えた。
紫の背景のずれ(2→1)は押し込みで縁が薄くなる見え方なのでそのまま。 */
/* 押し込みの作り:
丸を左上へ3px動かし、同時に左上の紫を3px減らす（6px → 3px）。
紫の外側の縁は 0-6 = -6 から -3-3 = -6 で動かないので、
「縁はそのままで、中身だけが沈んだ」ように見える。
グレーの影も浅くして、面に近づいた感じを出す。
ずらす量と紫を減らす量は必ず同じにすること。ずれると縁が動いて、
沈むのではなく全体がずれたように見える。 */
.vmtop-cat:active .vmtop-cat-circle {
transform: translate(-3px, -3px);
box-shadow:
0 0 0 1px rgb(211, 190, 229),
-2px -2px 0 1px rgb(211, 190, 229), /* 2+1 = 3px（通常は6px） */
-1px -1px 2px 1px rgba(90, 100, 120, .16);
}
@media (prefers-reduced-motion: reduce) {
.vmtop-cat-circle {
transition: box-shadow .12s ease-out;
}
.vmtop-cat:active .vmtop-cat-circle {
transform: none;
}
}
/*.vmtop-cat:hover .vmtop-cat-circle {
transform: translateY(-2px);
box-shadow: 0 8px 0 #ecc6da, 0 12px 16px rgba(236, 198, 218, .65)
}
.vmtop-cat:active .vmtop-cat-circle {
transform: translateY(5px);
box-shadow: 0 1px 0 #ecc6da, 0 2px 5px rgba(236, 198, 218, .5)
}*/
/* 順位バッジ：支給画像 ranks_01/02/03.png に差し替え。
画像は3枚とも 51x60 の透過PNG。3倍前提なので 17x20 で置く。
（以前は clip-path でペナントを描き、数字を明朝で載せていた。
数字も画像に含まれるので、文字は出さない）
位置はアートボード1.pngで実測（丸1・1行目）:
バッジ 字面 x 66.67-83.67（幅17.00＝画像どおり）／ 上端 y 2264.67
白い円は x 16.50-85.50 / 上端 2264.00
→ 上端は円の外周より0.67px下、右端は円の右端より1.83px内側。
丸は border 2px を持つので、absolute の基準はその内側（padding box）。
そのぶんを引いた値を入れている。 */
.vmtop-cat-rank {
position: absolute;
top: -1.33px;
right: -0.17px;
width: 17px;
height: 20px;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
font-size: 0; /* 万一テキストが入っても出さない */
border-radius: 0;
border: none
}
.vmtop-cat-name {
margin-top: 11.34px;
font-size: 10px; /* ★実測9px。指示で少し大きく */
letter-spacing: .6px; /* ★実測1.9px。指示で詰めた。
★「ビスチェ＆パニエ」（8文字）は360px幅では1行に入らない。
360pxでの枠は75.4pxで、10pxの全角8文字は字送り0でも80px要る。
字送りをいくら詰めても収まらないので、これは文字数の問題。
9px時代（必要77px）から既に2行になっていた（375px幅なら枠79.2pxで1行）。
1行に揃えたいなら名前を7文字以下に短くするしかない。 */
color: var(--vm-dark)
}
/* ───────── ALL ITEM ───────── */
/* 「コスプレを全部見る / ALL ITEM」
2026ハロウィンOL.pdf から実測（1080px幅 = 360px幅の3倍 → ÷3）
343.0 x 79.0 ／ 完全なpill ／ 塗り #aea1b5 ／ 白文字2行
日本語 字面14.0 ／ ALL ITEM 字面5.9 ／ 行間6.2 ／ 右に白い3点ドット
デザインにあったサブコピーと Check バッジはこの版では無くなった。
★未反映：アートボード1.png で作り直されている。塗りつぶしのpillではなく、
角丸の枠付きパネルに戻り、Check の吹き出しとウサギのぬいぐるみが復活した。
「ALL ITEM」は白抜き＋細い輪郭のディスプレイ書体で、手元のフォントでは出せない。
ウサギは写真。よってこのブロックは1枚画像にするのが妥当。
（上のコメントにある通り、この a を img に差し替える想定でもともと作ってある）
差し替え時に合わせる箱（アートボード1.png 実測）:
パネル x 7.33-353.33 (幅346.00) / y 2704.33-2829.33 (高125.00)
塗り rgb(243,238,245) ／ 枠 rgb(120,111,127) 1px ／ 角丸 約14px
はみ出し Checkの吹き出しは上へ、ウサギは右下へパネルの外に出る
→ 画像はパネルより一回り大きい矩形で書き出してもらう必要がある
中身 ALL ITEM（白抜き）／ 罫線 ／
「ヴァニティミーのドドドカワイイが、トマラナイ。」／「コスプレを全部見る」
影 ★書き出しで輪郭化しているので保留（右側で約4px） */
/* 支給画像 bnr_all_items01.webp（1080x460 → 3倍前提で 360x153.33）に差し替え。
Checkの吹き出しとウサギも含んだ全幅のバナー。
画像内でのパネル（角丸の枠）の上端は 17.00px。
デザイン実測ではパネル上端2704.33 / 直前のCATEGORY帯の下端2684.33 なので、
画像の上端は 2704.33 − 17.00 = 2687.33、つまり帯の下から3.00px。
.vmtop-sec の左右padding 16pxを打ち消して全幅にする。 */
/* 実測の3.00pxだと、画像内の透明余白が上1.67px・下2.00pxしか無い（Checkの吹き出しと
ウサギがほぼ画像の縁まで来ている）ため、CATEGORYの灰色帯とくっついて見える。
上下を空けたいとの指示で、帯の下端からバナーの絵まで16px、
バナーの絵からCATALOGの帯（#f7f7f7）まで32px になる値にしてある
（下は #findzone の padding-bottom 22px と画像の2.00pxが乗る）。 */
.vmtop-allitem {
display: block;
margin: 14.33px -16px 8px;
overflow: hidden;
}
.vmtop-allitem img {
display: block;
width: 100%;
height: auto;
}
/* ピル型ボタンだった頃の残骸（白文字の指定と右の3点ドット）はすべて削除した。
バナー画像に差し替えた時点で .vmtop-allitem-jp / -en は無くなっている。
3点ドットの ::after は実害があった。ピルには position: relative があったが、
画像バナーに変えたときに外したため、position: absolute の基準がこの要素では
なくなり、ずっと上の祖先を基準にヒーロースライダーの上（右矢印の下あたり）に
点が3つ描かれていた。overflow: hidden でも消えない ——
絶対配置の子は、包含ブロックがクリップ側の祖先にある場合クリップされない。 */
/* ───────── ランキング ───────── */
/* 見出し：日本語の右に RANKING を小さく置く（CATEGORY と同じ形）
実測：日本語 字面高11.3 #444343 ／ RANKING 字面高6.4 #544d5a ／ 間隔12.0 */
/* ───────── HIT RANKING ─────────
実測（アートボード1.png）:
HIT x 16.00-66.67 (50.67 x 20.00) 塗り rgb(255,199,220) / 輪郭 rgb(81,70,84)
RANKING 字面 x 77.33-149.00 (71.67) キャップ高7.67
｜ x 161.67-162.33 / y 3636.33-3648.33 (12.00)
和文 字面 x 175.33-271.00 (95.67)
タブ 字面 全商品 x 33.67-67.00 / バニー 115.67-147.67 /
マリームーン 197.67-259.00 / ネコ 308.33-327.67 → 10.75px + 1.1px
下線 x 17.67-91.00 (73.33 x 3.00) 色 rgb(255,199,220)（黒ではない）
カード 113.00 x 140.67（＝4:5）3列・列の間隔5.67・左5.33/右4.67
商品名 字面 53.67 x 7.67（"coquette Angel"）→ 7.25px
価格 字面 29.33 x 5.67（"¥12,730"）→ 6.25px + 0.6px
縦の間隔 見出し字面下端3650.00 → タブ字面3685.00 → 下線3705.33-3708.33
→ カード上端3716.33 → 商品名3865.67 → 価格3879.67 → 次の行3900.00
★「HIT」は輪郭付きの丸ゴシック系ディスプレイ書体で手元に無い。
いまは text-stroke で代用しているので、画像の支給が要る。
★行のピッチはデザイン上 183.67 と 200.00 でばらついている（プレースホルダの
グレー箱のため）。きれいに揃っている1→2行目の183.67を採用した。 */
/* 支給画像 txt_hit01.png に差し替え。
画像は 181x81（3倍前提で 60.33x27.00）で、まわりに透明の余白がある:
左5.00 / 上3.33 / 右4.67 / 下3.67 → 中身は 50.67x20.00 で
デザイン実測のHIT（x 16.00-66.67 / 高20.00）とぴったり一致する。
箱は余白ぶん大きいので、中身が実測位置に来るよう左と上に余白ぶんずらす。
文字「HIT」は読み上げ用に残し、font-size: 0 で見た目には出さない。 */
.vmtop-heading-hit {
display: inline-block;
flex: none;
width: 60.33px;
height: 27px;
background: url('https://vanityme.itembox.cloud/item/images/cosplay2026/top/txt_hit01.png') center/contain no-repeat;
font-size: 0;
/* font-size: 0 にすると flex の baseline 揃えの基準が要素の下端から上端に変わり、
17pxほど下にずれる。基準を上端固定（flex-start）に切り替えて、
そこからの相対位置で置く。 */
align-self: flex-start;
position: relative;
top: -5.01px; /* 中身の上端が RANKING のキャップより9.00px上に来る値。
欧文を11.5pxにしてキャップ帯が動いたぶん0.35px上げた */
}
/* 上パディングは実測0で、しかも HIT が top:-4.66px で上に出ているため、
バッジがカタログの帯（#f7f7f7）に4.66px食い込んでいた。
上を空けたいとの指示で36.66pxを足し、帯の下端から HIT の上端まで32pxにしてある。
ALL ITEM からカタログ帯までの32pxと同じで、帯の上下が揃う。 */
#ranking.vmtop-sec {
padding: 36.66px 4.67px 0 5.33px;
}
#ranking .vmtop-heading {
padding-left: 5.67px; /* セクション左5.33 + 5.67 = 11.00。
画像の左余白5.00を足して、中身が実測の16.00に来る */
margin-bottom: 25px;
}
#ranking .vmtop-heading-en {
margin-left: 6px; /* 画像の箱の右端71.33 → RANKING左端77.33 */
}
.vmtop-rank-tabs {
display: flex;
margin-bottom: 8px
/* 全幅の区切り線は入れない。
デザインにあるのは選択タブ下の73.33pxのピンクの線だけ */
}
.vmtop-rank-tab {
position: relative;
flex: 1;
padding: 0 4px 13.33px; /* 実測：文字字面の下端から下線まで10.33px */
border: none;
background: none;
font-size: 10.75px;
letter-spacing: 1.1px;
color: rgb(82, 73, 99);
cursor: pointer;
font-family: inherit
}
/* 選択タブ：実測でインク密度19.6%・明るさ46.8（未選択は6〜10%・78〜87）。
下線は文字幅ではなく73.1pxの固定幅で、文字の中央に置かれる。 */
.vmtop-rank-tab.on {
color: #000;
font-weight: 700
}
.vmtop-rank-tab.on::after {
content: "";
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 73.33px;
height: 3px;
background: rgb(255, 199, 220); /* 実測。黒ではない */
}
/* ランキング：全カード同一サイズ（ピンク枠＋円形順位バッジ＋即納バッジ） */
.vmtop-rank-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14.67px 5.67px;
margin-bottom: 14.67px
}
.vmtop-rank-item {
display: block;
text-decoration: none;
min-width: 0;
overflow: hidden
}
.vmtop-rank-img {
position: relative;
border-radius: 0; /* デザインは角丸なし */
overflow: hidden;
background: #f1efe9 center top/cover no-repeat;
aspect-ratio: 4/5; /* 実測 113.00 x 140.67 */
width: 100%
}
/* TOP3：ピンク枠＋大きめバッジで格上げ、4位以降は枠なし */
/*#vmtop-rank-top3 .vmtop-rank-img {
border: 2.5px solid var(--vm-accent);
box-shadow: 0 4px 14px rgba(192, 88, 143, .22)
}*/
#vmtop-rank-top3 .vmtop-rank-no {
width: 20px;
height: 20px;
font-size: 10px;
/* ★ALL ITEMバナーの「Check」の吹き出しに合わせたいとの指示。
吹き出しの実測色は rgb(218,156,218) だが、白文字とのコントラストが
2.15:1しか無く数字が読めない。同じ色相のまま65%まで落として
rgb(142,101,142) にしてある（白文字と4.77:1）。
従来の var(--vm-accent) = rgb(192,88,143) は4.17:1だったので、
色を寄せつつ読みやすさは上がっている。
「見えにくければ少し濃くしてよい」との指示に沿った判断。 */
background: rgb(142, 101, 142);
/*font-weight: 700;
background: linear-gradient(135deg, var(--vm-accent), #a03a72)*/
}
#vmtop-rank-rest .vmtop-rank-no {
background: rgba(255, 255, 255, .92);
/*border: 1px solid #c4c2bb;*/
color: #3a3a3e;
box-shadow: none;
font-size: 10px
}
.vmtop-rank-no {
position: absolute;
top: 6px;
left: 6px;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--vm-accent);
color: #fff;
font-size: 13px;
display: flex;
align-items: center;
justify-content: center;
/*box-shadow: 0 2px 6px rgba(0, 0, 0, .18)*/
}
.vmtop-rank-badge {
position: absolute;
left: 0;
bottom: 8px;
font-size: 9px;
color: #fff;
background: #2a2a2e;
padding: 3px 9px 3px 7px;
border-radius: 0 10px 10px 0
}
.vmtop-rank-name {
margin: 6.39px 0 4.31px; /* 字面どうしで 写真→商品名8.67 / 商品名→価格6.34 になる値 */
font-size: 7.25px; /* ★実測値。プレースホルダ文字からの逆算なので要確認 */
color: #3a3a3e;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%
}
/* display: inline のままだと親の line-height(24px) の行ボックスに入ってしまい、
商品名との間が実測6.34pxに対し21.31pxまで開いていた。block にして
自前の line-height で組む。 */
.vmtop-rank-price {
display: block;
line-height: 1.2;
font-size: 6.25px; /* ★実測値。プレースホルダ文字からの逆算なので要確認 */
letter-spacing: .6px;
color: var(--vm-ink)
}
/* 「もっと見る」「新作を全部見る」は共通ピル（.vmtop-morebtn と同じ）を使う。
上との間隔だけ個別に持たせる。 */
.vmtop-viewmore { margin-top: 16px; font-family: inherit }
/* 展開中はドットを矢印に差し替える（カテゴリと同じ扱い） */
.vmtop-viewmore.is-open::after {
content: "↑";
width: auto;
height: auto;
background: none;
font-size: 13px;
color: #606060;
line-height: 1;
}
/* ───────── 新作 ───────── */
/* ───────── NEW AVENUE ─────────
アートボード1.png で見出しが FEATURE / CATEGORY と同じ1行の形になった。
実測:
ハート x 12.33-24.33 (12.00 x 12.00) 色 rgb(226,208,253)
NEW AVENUE 字面 x 31.33-131.67 (100.33) キャップ高7.67
｜ x 144.33-145.00
和文 字面 x 153.00-224.00 (71.00)
カード 151.00 x 188.00（＝4:5）／ 間隔5.33 ／ 左5.33 ／ 横スクロール
商品名 字面 61.67 x 9.00 → 8.25px（カード左端から4.00）
価格 字面 33.67 x 6.67 → 7.25px + 0.6px
縦の間隔 見出し字面下端4404.33 → カード上端4425.00 → 商品名4623.33
→ 価格4641.67 → ボタン4672.67 */
/* ランキングのボタン（枠の下端4339.33）から NEW AVENUE のハート上端4392.33 まで
実測53.00px。セクションの切れ目が分かるだけの間隔をここで作る。 */
/* 下パディングは実測0で、「新作を全部見る」の枠下端からすぐフッターの地色
（#f7f7f7）が始まっていた。隙間を空けたいとの指示で32pxを足してある。
ALL ITEM → カタログ帯、カタログ帯 → HIT と同じ間隔。 */
#new.vmtop-sec {
padding: 50.49px 4.67px 32px 5.33px;
}
#new .vmtop-heading {
padding-left: 7px; /* セクション左5.33 + 7 = 実測の12.33 */
margin-bottom: 20.67px;
}
#new .vmtop-heading-en {
margin-left: 7px; /* ハート右端24.33 → NEW AVENUE左端31.33 */
}
#new .vmtop-heading-ja {
margin-left: 8.42px; /* ｜の右145.00 → 和文153.00。他のセクションより狭い */
}
/* ハートは12pxあり、欧文のキャップ高7.76pxより背が高い。
欧文のキャップ帯の中心に合わせると、視覚的に主役の和文「新作コスプレ」
（字面高11.19px）の中心より2.9px低くなり、下にぶら下がって見える。
和文の字面中心に合わせる。 */
.vmtop-heading-heart {
top: 1.51px; /* .vmtop-heading-mark の4.41px から2.9px上げる */
width: 12px;
height: 12px;
clip-path: none;
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
/* 実測：カード172.9x215.1 ／ 間隔6.7 ／ 角丸なし ／ 左右とも画面端で見切れる
セクションのpadding(16px)を打ち消して端まで伸ばし、横スクロールさせる */
/* slick が初期化されるまで（または無い環境）はネイティブの横スクロール */
.vmtop-new-row:not(.slick-initialized) {
display: flex;
gap: 5.33px;
overflow-x: auto;
scroll-snap-type: x proximity;
scrollbar-width: none;
-webkit-overflow-scrolling: touch
}
.vmtop-new-row:not(.slick-initialized)::-webkit-scrollbar { display: none }
/* 実測：カード172.9 ／ 間隔6.7 ／ 左右の見切れ各93.55（=26%）
セクションのpadding(16px)を打ち消して画面端まで使う */
.vmtop-new-row {
margin: 0 -4.67px 0 0; /* 右端を画面の端まで伸ばして見切れさせる。
#new の右padding(4.67px)ちょうどを打ち消す量。
以前は -5.33px で、0.66px はみ出していた */
padding-bottom: 6px;
}
.vmtop-new-row .slick-slide { padding: 0 5.33px 0 0 } /* 左詰め。隣との間隔5.33px */
.vmtop-new-item {
flex: none;
width: 151px; /* 実測。slick 初期化後は slick が幅を決める */
scroll-snap-align: center;
text-decoration: none
}
.vmtop-new-row.slick-initialized .vmtop-new-item { width: auto }
.vmtop-new-img {
position: relative;
/* ★デザインの枠は 151.00x188.00＝4:5 だが、商品写真は 720x960（3:4）で、
4:5にすると下が6.9%切れて足元（靴）が欠ける。
「全身を出す」ことを優先する指示のため 3/4 に戻した。
カード幅151pxに対し高さは 188.00 → 201.33 になる。 */
aspect-ratio: 3 / 4;
height: auto;
border-radius: 0; /* デザインは直角 */
overflow: hidden;
background: #f1efe9 center top/cover no-repeat
}
.vmtop-new-badge {
position: absolute;
top: 8px;
left: 8px;
font-size: 8px;
color: #fff;
background: var(--vm-accent);
padding: 2px 7px;
border-radius: 8px;
letter-spacing: .06em
}
.vmtop-new-name {
margin: 8.10px 0 6.27px; /* 字面どうしで 写真→商品名10.33 / 商品名→価格9.34 になる値 */
padding-left: 4px; /* 実測 カード左端から4.00 */
font-size: 8.25px;
color: #3a3a3e;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
}
/* ランキングと同じ理由で block にする。inline のままだと親の line-height(24px)
の行ボックスに入り、商品名との間が実測9.34pxに対し24pxまで開く。 */
.vmtop-new-price {
display: block;
line-height: 1.2;
padding-left: 4px;
font-size: 7.25px;
letter-spacing: .6px;
color: #2a2a2e
}
/* 実測 346.6 x 46.0 ／ 白塗り ／ 枠 #221f1f ／ 文字 #221f1f ／ 完全なpill */
.vmtop-new-btn { margin-top: 16px }
/* ───────── SEOテキスト＋フッター ───────── */
/* ───────── フッター ─────────
実測（アートボード1.png）:
地色 カタログと同じ紙のテクスチャ。上端 4808.67（平均 #f7f7f7 で代用）
SNS 5個 / 字面 y 4848.00-4869.33 (高21.33)
中心 56.83 / 119.00 / 180.67 / 238.17 / 301.00（間隔およそ61）
Message 字面 x 30.33-196.00 (165.67) / y 4918.67-4965.33 (46.67) ピンクの筆記体
和文見出し 字面 x 37.00-319.33 / 字面高10.67（大きく字送りが入っている）
和文本文 字面 x 38.33-319.33 / 行送りおよそ21.7 / 両端揃え
英見出し 字面 x 38.00-179.00 / y 5219.67-5231.00 イタリック
英本文 字面 x 37.00-319.33 / 行送りおよそ10.7 / 両端揃え
最下部 ストーリーズの下と同じブランドリボン
★「Message」は筆記体。Apple系にある Snell Roundhand で代用しているが、
デザインの書体とは別物。ここも画像にするか要判断。
★以前あったブランドビジュアル（footer_cos2024_02.webp）はデザインに無いので外した。 */
.vmtop-footer {
background-color: var(--vm-paper-bg);
background-image: var(--vm-paper);
padding-top: 39.33px; /* 地色の上端からSNSの字面まで */
}
.vmtop-seotext {
padding: 0 40.67px 0 37.5px; /* 実測 字面 x 37.50-319.33 */
}
.vmtop-seotext h2 {
margin: 0 0 11px;
font-family: "Hiragino Mincho ProN", serif;
/* ★実測は 12px / 字送り2.6px（字面が282.33まで伸びる量）。
「少し大きく、字間を詰める」との指示で 13.5px / 1.0px にし、
さらに「もう少しだけ詰める」で 0.3px まで落とした。 */
font-size: 13.5px;
letter-spacing: .3px;
color: #4a4f5a;
text-align: left;
font-weight: 400
}
.vmtop-seotext h3 {
margin: 37.65px 0 10px;
font-family: "Hiragino Mincho ProN", serif;
font-style: italic;
font-size: 11px;
letter-spacing: .4px;
color: #4a4f5a;
font-weight: 400
}
.vmtop-seotext p {
font-family: "Hiragino Mincho ProN", serif; /* デザインは明朝。地の sans-serif ではない */
font-size: 11.4px; /* 実測：本文の字面高10.00 から逆算。大きさは変えない指示 */
line-height: 21.7px; /* 実測の行送り */
letter-spacing: -.4px; /* ★指示で字間だけ詰めた。元は normal（＝0）だったので
詰めるには負の値が要る。大きさと行送りは触っていない */
text-align: justify;
color: #4a4f5a
}
/* .vmtop-seotext p より詳細度を上げる。クラスだけだと (0,1,0) で
(0,1,1) の .vmtop-seotext p に負けて font-size も line-height も効かない。 */
.vmtop-seotext p.vmtop-seotext-en {
font-family: "Hiragino Mincho ProN", serif;
font-size: 6.5px;
line-height: 10.7px;
letter-spacing: normal; /* 和文側の -.4px を受け継がせない。
6.5pxに対して-0.4pxは-6%で、欧文だと詰まりすぎる。
字間を詰める指示は和文の本文だけ */
text-align: justify;
}
/* デザインの本文にはリンクの下線も太字も無い。装飾なしで良いとの指示で外した。
色（.vmtop a の指定）だけが本文との差になる。
サイト共通CSSが a を太字にしてくることがあるので font-weight も明示的に戻す。 */
.vmtop-seotext a {
text-decoration: none;
font-weight: inherit;
font-family: inherit /* サイト共通CSSが a に Jost（ゴシック）を当てていて、
明朝の本文の中でそこだけ太いゴシックに見えていた */
}
/* ★画像に差し替えた。デザインの筆記体が手元に無く、Snell Roundhand で代用していたが
別物だったため。アートボード1.png から字面ちょうど（x 91-589 / y 14756-14897）で
切り出したものが txt_message01.png。498x141＝3倍前提で 166.00 x 47.00。
紙テクスチャのノイズに乗っているので、背景色の差では抜けない。
文字がピンク＝R-G差が大きいことを使って alpha を作り、
observed = a*ink + (1-a)*bg を解いて元のインク色に戻してある。
テキストは読み上げのために残し、font-size: 0 で見た目だけ消している
（HTMLを変えずに済むので、貼り替え箇所が増えない）。
位置は padding ではなく margin で出す。.vmtop 系は box-sizing: border-box なので
padding-left だと width から引かれて絵が縮む。 */
.vmtop-message {
margin: 44px 0 24px 30.33px; /* 左30.33pxは実測 */
width: 166px;
height: 47px;
background: url('https://vanityme.itembox.cloud/item/images/cosplay2026/top/txt_message01.png') left top/contain no-repeat;
font-size: 0;
line-height: 0;
}
/* ★実測は21.0pxだが「もう少し大きく」との指示で26pxに。
列の全幅が実測（265px前後）から大きく外れないよう、間隔を40→34pxに詰めている。 */
.vmtop-sns {
display: flex;
gap: 28px; /* アイコンを大きくしたぶん詰めて、列の全幅を保つ。
5個×34 + 4×28 = 282px（実測は265px前後） */
justify-content: center;
padding: 0
}
.vmtop-sns a {
display: block;
width: 34px /* ★実測21。「もっと大きく」の指示で26→34px */
}
.vmtop-sns img {
display: block;
width: 100%
}
.vmtop-footer .vmhw-ribbon {
margin-top: 65.2px;
}
/* ───── カウントダウン＋ヒーロー＋ストーリーズ ───── */
/* すべて .vmhw- プレフィックスでスコープ（既存ページのCSSと衝突しにくい設計） */
#vmhw2026 {
--vm-accent: #c0588f;
--vm-soft: /*#f8e2ee*/ #fbf3ff;
--vm-ink: #7d2f56;
--vm-dark: #2a2a2e;
font-family: 'Zen Kurenaido', "Hiragino Kaku Gothic ProN", sans-serif;
max-width: 640px;
margin: 0 auto;
color: var(--vm-dark);
box-sizing: border-box;
padding-top: 40px;
}
/* PCは上を詰める。40pxはスマホのヘッダーとの間を空けるための値で、
PCでは余白が二重になって間延びして見える。
768px は .vmhw-ov（PC用の縦型プレイヤー枠）と同じ境目に揃えてある。 */
@media (min-width: 768px) {
#vmhw2026 {
padding-top: 0;
}
}
:where(#vmhw2026 *) {
box-sizing: border-box;
margin: 0;
padding: 0
}
#vmhw2026 img, #vmhw2026 video {
display: block;
width: 100%
}
#vmhw2026 a {
color: var(--vm-ink)
}
#vmhw2026 a:hover {
color: var(--vm-accent)
}
/* --- countdown --- */
/* 実測（アートボード1.png / 1080px幅＝360pxの3倍）
帯: y0-81 → 高さ27px、背景 rgb(251,243,255)=var(--vm-soft) と一致
文字: 色 rgb(94,64,102)=#5e4066 と一致、キャップ高 7.33px、
字面幅 "ALLOWEEN 2026"=110.00px / "102 DAYS"=61.33px
→ 10px/letter-spacing 2.2px が最も近い（字面 110.46 / 60.80）
高さ27px は line-height 15px + 上下padding 6px で出す */
.vmhw-count {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 6px 12px;
background: var(--vm-soft);
}
/* ★実測は 10px / weight 300 だが「太字で2pxほど大きく」との指示で
12px / 700 にしてある。字送りは実測の2.2pxのまま（変えると1行に収まらない）。 */
.vmhw-count span, #vmhw-days {
color: #5e4066;
font-family: serif !important;
font-size: 12px;
letter-spacing: 2.2px;
font-weight: 700;
}
/* --- hero slider --- */
.vmhw-hero {
position: relative;
overflow: hidden
}
.vmhw-track {
display: flex;
transition: transform .45s cubic-bezier(.22, .61, .36, 1)
}
/* ヒーロー画像は5枚とも 1000x1333（ちょうど3:4）。箱も aspect-ratio: 3/4 なので
比率は一致していて、本来 cover でも切れない。
以前あった max-height: 560px は幅420pxを超えると効いてしまい、箱だけが
3:4より横長になる → cover が幅に合わせて拡大 → center top なので下が切れる、
という形で「スマホ以外だと下が見切れる」原因になっていた。
高さは aspect-ratio に任せる（幅640pxのとき853px）。 */
.vmhw-slide {
flex: none;
width: 100%;
position: relative;
aspect-ratio: 3/4;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 22px 20px 46px;
background: repeating-linear-gradient(45deg, #e4e2dd 0 10px, #edebe6 10px 20px);
}
.vmhw-slide .vmhw-kicker {
/*font-family: 'Space Mono', monospace;*/
font-size: 10px;
letter-spacing: .24em;
color: var(--vm-ink);
margin-bottom: 10px;
font-weight: 700
}
.vmhw-slide .vmhw-title {
font-family: /*"Shippori Mincho", "Yu Mincho", */ serif;
font-weight: 600;
font-size: clamp(26px, 7.5vw, 40px);
line-height: 1.2;
color: #1a1a1a
}
.vmhw-slide .vmhw-cta {
display: inline-block;
margin-top: 14px;
padding: 11px 22px;
border-radius: 24px;
background: var(--vm-accent);
color: #fff;
font-size: 13px;
text-decoration: none;
width: max-content
}
/* ★ヒーロー下のドットは指示で非表示にしている。
▼ 戻すときは、この display:none の1行を消すだけでよい。
HTMLもJSもそのまま残してあるので（cosplay2026.js が今も .on を付け替えている）、
消した瞬間に元どおり動く。マークアップを削っていないのはこのため。
※ 矢印（.vmhw-arrow）は表示したまま。スワイプでも送れる。 */
.vmhw-dots {
position: absolute;
left: 20px;
bottom: 18px;
display: flex;
gap: 7px;
align-items: center;
display: none; /* ▲ここを消せば元どおり。flex の後に置いてあるので
この1行を消すだけで display:flex に戻る */
}
.vmhw-dot {
width: 7px;
height: 4px;
border-radius: 2px;
background: rgba(26, 26, 30, .25);
border: none;
padding: 0;
cursor: pointer;
transition: all .3s
}
.vmhw-dot.on {
width: 22px;
background: var(--vm-accent)
}
.vmhw-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 34px;
height: 34px;
border-radius: 50%;
background: rgba(255, 255, 255, .85);
border: none;
cursor: pointer;
font-size: 15px;
color: var(--vm-dark);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 8px rgba(0, 0, 0, .12)
}
.vmhw-prev {
left: 10px
}
.vmhw-next {
right: 10px
}
/* --- stories --- */
/* 実測（アートボード1.png）
ヒーロー下端 507.33 → 丸の上端 517.00（影を除いた輪の外周）→ 下端 584.70
→ ラベル字面 593.00-602.67 → 次のピンク帯 619.33。ブロック総高 112px。
デザインに「STORIES」の見出しは無い（ヒーローと丸の間は9.67pxしかない）。 */
/* 影の逃げ場について
.vmhw-stories-row は overflow-x: auto なので、仕様上 overflow-y も auto になり
縦方向もクリップされる。丸の左端・上端がスクロール領域の縁と同じ位置だと、
左上に出している影（ずれ2px + ぼけ5px ≒ 7px）がそこで切り落とされる。
そこでスクロール領域の内側に8pxの余白を作り、同じ量だけ外側の余白を減らして
丸の位置（上9.5px / 左12px）は変えないようにしている。 */
/* ★実測は padding: 1.5px 0 9.8px 4px だが「上下の余白をもう少し」との指示で
上下を広げてある。行の側にも影の逃げ場として上8pxがあるので、
ヒーローの下端から丸の上端までは 10 + 8 = 18px になる。 */
.vmhw-stories {
padding: 18px 16px 22px; /* 実測は 1.5 / 9.8。指示で広げてきた経緯:
まず上下18pxにし、さらに「あと5pxほど」で23pxに。
上は行側の逃げ場12pxが加算されるので 11 + 12 = 23。 */
}
.vmhw-stories-label {
/*font-family: 'Space Mono', monospace;*/
display: flex;
align-items: center;
gap: 8px;
font-size: 11px;
letter-spacing: .3em;
color: var(--vm-ink);
font-weight: 700;
margin-bottom: 12px
}
/* 実測は 輪の外径68 + 間隔14.67 = 中心ピッチ82.67px。
※デザイン上、1個目だけ一様ピッチより2.33px左にある。左端の余白を優先して
padding-left は1個目の実測 12px を採り、2個目以降は2.33pxのズレを許容する。
★「丸をもう少し大きく」との指示で外径を68→76pxにした。間隔を14.67のままだと
ピッチが90.67になり、360px幅で5個目が画面の外に出て「次があること」が
分からなくなる。間隔を10pxに詰めてピッチ86に抑え、5個目の頭が数px覗く形を
保っている。丸の寸法を変えるときはこの覗きが残るかを必ず確認すること。 */
.vmhw-stories-row {
display: flex;
gap: 10px;
overflow-x: auto;
/* 影がクリップされないための逃げ場。overflow-x:auto は overflow-y も auto に
するので、上と左は行のパディングぶんしか影を出せない。
影の到達距離は ずれ4px + ぼけ8px = 12px なので、12px 取ってある。
影を大きくするときはここも一緒に広げること。
丸の左端を実測の12pxに保つため、.vmhw-stories 側の padding-left は0にして
この12pxだけで作っている。 */
padding: 12px 0 0 6px;
/* スマホは重ねスクロールバーで場所を取らないが、PCプレビューだと帯が出て
実測した下の余白が読めなくなるので隠す */
scrollbar-width: none;
}
.vmhw-stories-row::-webkit-scrollbar {
display: none;
}
.vmhw-story {
display: flex;
flex-direction: column;
align-items: center;
gap: 8.2px; /* 輪の下端から ラベル字面の上端まで 8.33px になる値 */
border: none;
background: none;
cursor: pointer;
width: 76px; /* ★実測68。輪と揃える（上の .vmhw-stories-row 参照） */
flex: none;
-webkit-tap-highlight-color: transparent; /* iOSの灰色フラッシュを消して
押し込みの見え方と喧嘩させない */
}
/* 輪の構成（外側から順に）:
1. グレーの薄いグラデーション（影）
2. 紫の背景の円。白い円より少し大きく、かつ左上にずれて敷いてあるので
左上だけ厚く見え、右下は3の線しか見えない
3. 紫の約1pxの線
4. 白の約5pxの線
5. 写真
アートボード1.pngの実測（丸1の水平中心線）でも同じ構造だった:
左 グレー7.33-11.33 / 紫11.33-13.67(2.33) / 白14.00-16.00(2.00) / 写真16.00-
右 写真-75.67 / 白76.00-78.00(2.00) / 紫78.00-78.33(0.67の線だけ) / グレー
右に紫が線しか出ないことが「紫の円が左上にずれている」ことの裏付け。
白の幅は実測どおり2.00px。写真は62pxになる（アートボードの実測は59.67px、
外側の紫を68pxで組んでいるぶん2px大きい）。 */
.vmhw-story-ring {
position: relative;
width: 76px;
height: 76px;
border-radius: 50%;
padding: 0;
/* ★参考画像（2枚目のアイコン）の色に寄せた。#6228d7 は青が強すぎたので
インスタ公式の紫 #962fbf に置き換え、黄→橙→ピンク→紫の4段にしている。
45deg なので 左下=黄 → 右上=紫。ここはアニメが効かない環境用の下地で、
実際に見えているのは同じ配色を持つ ::before（下記）。
色を変えるときは必ず両方を同じ値にすること。 */
background: linear-gradient(45deg, #feda75 0%, #fa7e1e 22%, #d62976 58%, #962fbf 100%);
/* ★インスタ同様の均一リングに変更。左上ずらし＋グレー影は廃止 */
transition: transform .12s ease-out;
}
/* グラデーションが回っているように見せる。
回すのは ::before だけ。リング本体を回すと中の写真（.vmhw-story-thumb）まで
一緒に回ってしまう。::before は子要素より先に描かれるので、写真は上に乗ったまま。
円形にクリップされているので、四角い箱を回してもフチは出ない。
45deg の線形グラデを回すと「左下の黄→右上の紫」の軸がぐるりと回る。
1周 9秒。速いと安っぽく見えるので、ゆっくり流す程度に留めている。 */
.vmhw-story-ring::before {
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
border-radius: 50%;
background: linear-gradient(45deg, #feda75 0%, #fa7e1e 22%, #d62976 58%, #962fbf 100%);
animation: vmhw-ring-spin 9s linear infinite;
will-change: transform;
}
@keyframes vmhw-ring-spin {
to { transform: rotate(360deg); }
}
/* 押したときは影を浅くして、そのぶん沈ませる。
影のぼけ(5→2)・濃さ(.22→.14)・ずれ幅(2→1)を同時に減らし、
減ったずれ幅と同じだけ影の向き（左上）へ動かすことで
「面に近づいた」ように見せる。 */
/* ★「押し込みを分かりやすく」の指示で振れ幅を大きくした。
ずれ 4→1（3px減）・ぼけ 8→2・濃さ .30→.16 と落とし、
減ったずれ幅と同じ3pxだけ影の向き（左上）へ動かす。 */
.vmhw-story:active .vmhw-story-ring {
transform: scale(.94);
}
/* 押し込みで左上の紫を 6px → 3px に減らす。白い円は右下寄せなので、
3px大きくすると左上の紫だけを食う。輪が左上へ3px動くのと合わせて、
紫の外側の縁は動かないまま中身が沈んで見える。
ずらす量と紫を減らす量は必ず同じにすること。 */
/* 均一リング化に伴い、押し込み時の thumb 拡大は廃止 */
/* 動きを減らす設定の端末では位置は動かさず、影の変化だけで押下を示す */
@media (prefers-reduced-motion: reduce) {
.vmhw-story:active .vmhw-story-ring {
transform: none;
}
/* 回転も止める。止めた位置は本体の background と同じ配色なので見た目は変わらない */
.vmhw-story-ring::before {
animation: none;
}
}
/* 白い円は右下に寄せて置く。紫の背景より小さいぶんだけ、左上に紫が覗く。
右下は紫の線1pxだけになる。
★左上の紫を太くしたいとの指示で、差を2px→5pxにした。
左上に見える紫は「この差＋紫の線1px」なので6px。
太さを変えるときはこの calc の数値だけを触ること
（押し込みの transform は -3px なので、これより小さくすると
押したときに紫が消えてしまう）。 */
.vmhw-story-thumb {
/* ★中央寄せの均一リング: 周囲に虹色3px＋白フチ2.5px */
position: absolute;
left: 3px;
top: 3px;
width: calc(100% - 6px);
height: calc(100% - 6px);
border-radius: 50%;
border: 2.5px solid #fff;
box-shadow: none;
background: repeating-linear-gradient(45deg, #e4e2dd 0 6px, #edebe6 6px 12px);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden
/* 元々ここに position: relative があったが、上の position: absolute を
打ち消して白い円が右下にずれなくなるので外した */
}
/* 実測: 底辺 x=38.67 固定、頂点 54.33 → 幅16.00 / 高さ 540.33-558.67 = 18.33
外接ボックス中心 46.5 に対し円の中心は 46.0 なので右へ0.5pxだけずらす */
.vmhw-story-play {
display: none; /* ★虹色リングのみ＝動画の記号。▶は非表示 */
width: 0;
height: 0;
border-left: 16px solid rgba(255, 255, 255, .95);
border-top: 9.17px solid transparent;
border-bottom: 9.17px solid transparent;
margin-left: .5px;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .25))
}
.vmhw-story-tag {
font-size: 11px;
color: var(--vm-dark)
}
/* --- brand ribbon --- */
/* 実測（アートボード1.png）: 帯 y 619.33-661.33 → 高さ42px、背景 rgb(243,206,225)
中身は支給画像 txt_vanityme01.png（980x34 → 3倍前提で 326.67x11.33）。
以前はテキストで組んでいたが、画像1枚に置き換えた。
流れる動きは公開ページ（/c/costume）の .news_banner と同じ作り:
translateX(-100%) → translateX(0) の linear infinite で、左から右へ流れる。
継ぎ目を出さないため、画像を4枚並べて「同じ内容の2組」にし、
1組ぶん（-50%）だけ動かしてループさせている。
画像1枚326.67pxなので2枚で653.34px。.vmtop の最大幅640pxより広いので、
どの瞬間でも帯が途切れない。 */
.vmhw-ribbon {
height: 42px;
overflow: hidden;
background: rgb(243, 206, 225);
display: flex;
align-items: center;
}
.vmhw-ribbon-track {
display: flex;
flex: none;
align-items: center;
animation: vmhwRibbonFlow 20s linear infinite;
}
/* 幅の指定は `#vmhw2026 img { width: 100% }`（ID指定＝詳細度が高い）に
負けるので、ID付きのセレクタも併記して勝たせる。
クラスだけだと画像が親いっぱいに伸びて帯が壊れる。 */
.vmhw-ribbon-track img,
#vmhw2026 .vmhw-ribbon-track img {
display: block;
flex: none;
width: 326.67px; /* 980px の3分の1 */
height: auto;
/* 画像は中身が端まで詰まっていて内部余白がゼロなので、そのまま並べると
「Costume Collection」と次の「[」がくっついて見える。
画像内の語間（] → LADY UP が18.0 / LADY UP → Costume が20.67）に合わせて20px空ける。
flex の gap ではなく margin にしているのは、gap だと4枚で3つ分しか入らず
前半2枚と後半2枚の幅が揃わずループの継ぎ目がずれるため。 */
margin-right: 20px;
}
@keyframes vmhwRibbonFlow {
from { transform: translateX(-50%); }
to { transform: translateX(0); }
}
/* 動きを減らす設定の端末では止めて、先頭の1枚を出したままにする */
@media (prefers-reduced-motion: reduce) {
.vmhw-ribbon-track {
animation: none;
transform: none;
}
}
/* フッターのリボンは動かさない（指示）。さらに「リピートなしで、真ん中に
テキスト画像ひとつだけ」との指示で、2枚目以降を消して中央に置く。
HTMLはストーリーズ側の流れるリボン（同じマークアップを4枚並べたもの）を
そのまま使い回しているので、消すのはCSS側でやっている。
画像幅326.67px なので、360px幅では左右に16.67pxずつ空く。 */
.vmtop-footer .vmhw-ribbon-track {
animation: none;
transform: none;
margin: 0 auto; /* .vmhw-ribbon が display:flex なので auto で中央に寄る */
padding-left: 0;
}
.vmtop-footer .vmhw-ribbon-track img:not(:first-child) {
display: none;
}
.vmtop-footer .vmhw-ribbon-track img {
margin-right: 0; /* 流れる用の右マージンは1枚だけなら不要 */
}
/* --- story overlay --- */
.vmhw-ov {
position: fixed;
inset: 0;
z-index: 99999;
background: #000;
display: none;
align-items: center;
justify-content: center
}
.vmhw-ov.open {
display: flex
}
.vmhw-ov-frame {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
background: #000
}
/* PC：全画面引き伸ばしをやめ、縦型9:16の枠を中央表示 */
@media (min-width:768px) {
.vmhw-ov {
background: rgba(10, 10, 12, .94)
}
.vmhw-ov-frame {
width: min(420px, 100vw);
height: min(760px, 94vh);
border-radius: 18px;
box-shadow: 0 18px 60px rgba(0, 0, 0, .55)
}
}
.vmhw-ov-media {
position: absolute;
inset: 0;
background: repeating-linear-gradient(45deg, #3a3a3e 0 10px, #44444a 10px 20px)
}
.vmhw-ov-media video {
width: 100%;
height: 100%;
object-fit: cover
}
.vmhw-ov-shade {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0, 0, 0, .45), transparent 22%, transparent 62%, rgba(0, 0, 0, .55))
}
.vmhw-ov-progress {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
display: flex;
gap: 4px
}
.vmhw-ov-seg {
flex: 1;
height: 3px;
border-radius: 2px;
background: rgba(255, 255, 255, .3);
overflow: hidden
}
.vmhw-ov-seg span {
display: block;
height: 100%;
width: 0;
background: #fff;
border-radius: 2px
}
/* タップで前後に送る（インスタ風） */
.vmhw-ov-tapzone {
position: absolute;
top: 60px;
bottom: 96px;
width: 38%;
background: none;
border: none;
cursor: pointer;
padding: 0
}
.vmhw-tap-prev {
left: 0
}
.vmhw-tap-next {
right: 0;
width: 62%
}
.vmhw-ov-head {
position: absolute;
top: 24px;
left: 14px;
right: 14px;
display: flex;
align-items: center;
gap: 10px;
color: #fff
}
.vmhw-ov-avatar {
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--vm-accent);
flex: none
}
.vmhw-ov-name {
font-size: 13px;
font-weight: 700;
letter-spacing: .06em
}
.vmhw-ov-hash {
font-size: 12px;
opacity: .85
}
.vmhw-ov-close {
margin-left: auto;
width: 38px;
height: 38px;
border: none;
background: none;
color: #fff;
font-size: 20px;
cursor: pointer
}
.vmhw-ov-center {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none
}
.vmhw-ov-note {
padding: 8px 14px;
border-radius: 16px;
background: rgba(0, 0, 0, .45);
color: #fff;
font-size: 12px;
letter-spacing: .08em
}
.vmhw-ov-product {
position: absolute;
left: 14px;
right: 14px;
bottom: 18px;
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
border-radius: 16px;
background: rgba(255, 255, 255, .96);
box-shadow: 0 8px 28px rgba(0, 0, 0, .3)
}
.vmhw-ov-pimg {
width: 56px;
height: 56px;
border-radius: 10px;
flex: none;
overflow: hidden;
background: repeating-linear-gradient(45deg, #e4e2dd 0 6px, #edebe6 6px 12px)
}
.vmhw-ov-pinfo {
flex: 1;
min-width: 0
}
.vmhw-ov-pname {
font-size: 12.5px;
font-weight: 600;
display: block;
line-height: 1.35;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden
}
.vmhw-ov-pprice {
font-size: 13px;
color: var(--vm-ink);
margin-top: 2px
}
.vmhw-ov-pbtn {
flex: none;
padding: 11px 16px;
border-radius: 22px;
border: none;
cursor: pointer;
white-space: nowrap;
background: var(--vm-accent);
color: #fff;
font-size: 13px;
font-weight: 600;
text-decoration: none
}
#vmhw2026 a.vmhw-ov-pbtn {
color: #fff
}
.vmhw-sheet-btns {
display: none
}
/* ───── 似合うコス診断 ───── */
#vmhs2026 {
--vm-accent: #e3a8dd;
--vm-soft: #f3f0f4;
--vm-ink: #c9658b;
--vm-dark: #594057;
font-family: 'Zen Kurenaido', "Hiragino Kaku Gothic ProN", sans-serif;
max-width: 640px;
margin: 0 auto;
color: var(--vm-dark);
box-sizing: border-box;
}
:where(#vmhs2026 *) {
box-sizing: border-box;
margin: 0;
padding: 0
}
#vmhs2026 a {
color: var(--vm-ink)
}
#vmhs2026 a:hover {
color: var(--vm-accent)
}
/* 新しい bnr_shindan.webp は 1080x1078（3倍前提で360x359.33）で、
カードの影や余白まで画像に含まれる全幅の絵。左右のpaddingは持たせない。
不透明部分は画像内の css 5.00-356.33 / 6.00-355.67。 */
.vmhs-wrap {
padding: 6px 0 26px
}
.vmhs-screen {
display: none
}
/* 入口（#vmhs-s0）は bnr_shindan.webp の全幅バナーなので余白を持たせない。
それ以外の画面は設問・選択肢・結果といった中身なので、左右に余白が要る。
.container の余白を殺した（このファイル冒頭のメディアクエリ）ぶん、
ここが 0 のままだと文字が画面の端に貼り付いて読みづらかった。
16px は .vmtop-sec や検索パネルと同じ量で、隣り合う要素と縦のラインが揃う。
:not(#vmhs-s0) はID分の詳細度(1,1,0)を持つので、
:where(#vmhs2026 *) の padding:0 にも .vmhs-screen.on にも負けない。 */
.vmhs-screen:not(#vmhs-s0) {
padding-left: 16px;
padding-right: 16px;
}
.vmhs-screen.on {
display: block;
animation: vmhsFade .35s ease
}
@keyframes vmhsFade {
from {
opacity: 0;
transform: translateY(8px)
}
to {
opacity: 1;
transform: none
}
}
/* ------------------------------------------------------------
入口カード
bt_diagnosis.webp（1000x877）がカード全体を担う。カードの塗り・角丸・
英字コピー・切り抜き5体・区切り線・ラベル・Start帯まで画像に入っている。
テキストで残すのはキッカーと見出しのみ（検索と可読性のため）。
画像内の位置（実測）→ 画像高さに対する割合
上部の空き y0〜207 = 0 〜 23.6% ← ここに見出しを重ねる
Start帯 y750〜855 = 85.5 〜 97.5% ← ここに透明ボタンを重ねる
文字サイズは cqw（カード幅に対する割合）で指定し、画像の拡大縮小に追従させる。
px値は cqw 非対応ブラウザ向けの保険（カード幅351.1px時の実寸）。
------------------------------------------------------------ */
/* ★未反映：アートボード1.png では入口カードの中身が別構成になっている。
カードは1枚の焼き込み画像なので、画像の差し替えが来るまでは触っていない。
（いま percent / cqw で置いている見出し位置は今の画像に合わせた値なので、
新しい画像が来たら全部取り直しになる。先に動かすと二度手間になる。）
デザイン側で増えているもの:
・左上「Find the style that's / perfect for you!」2行
・上部中央の見出しが「Find Your Perfect Costume」
・右上に楕円の囲みで「Vanityme.」
・切り抜き5体の背後に大きなピンクの「BEST」
・左下に英文のリード文
・「3step あなたに似合うコスプレ診断」（3は筆記体＋下線のあしらい）
・その下に小さい英文イタリック1行
差し替え時に合わせる箱（アートボード1.png 実測）:
枠線の外側 x 5.33-353.67 (幅348.34) / y 1507.67-1855.00 (高347.33) → ほぼ正方形
いまの画像は 351x307.8（比1.14）なので、比率から違う
角丸 約16px
枠線 rgb(97,79,124) 1px
背景 rgb(240,240,248)、最下部のStart帯だけ rgb(250,219,253)
影 ★書き出しの都合でボタンと同じ「ぼけない輪郭」になっている。
はみ出しは上1.34/下7.33/左1.33（右は360pxで切れている）。
広がりの目安まで。修正版が来たら取り直すこと。
直前のFEATUREボタン（枠外側の下端1494.33）からの間隔 13.34 */
.vmhs-entry {
position: relative;
/* 以前は left: 0.79% を当てていた。差し替え前の画像で影が右に17px多く、
カード本体を光学的に中央へ寄せるための指定だったが、全幅の要素を右へ
ずらすので画面が横に2.96pxはみ出していた（375px幅で確認）。
いまの bnr_shindan.webp を実測すると、カード本体（ほぼ不透明な画素）は
左5.67 / 右8.67 で、本体は中央より1.5px左にある（影が右に伸びているため）。
ずらすとしても1.5pxで、ほぼ見分けが付かないので当てていない。
入れるなら left ではなく margin-left:1.5px + margin-right:-1.5px のように
幅が変わらない形にすること。left や transform だとまた横にはみ出す。 */
container-type: inline-size;
border: none;
border-radius: 0;
padding: 0;
background: none;
text-align: center;
}
.vmhs-entry-visual {
display: block;
width: 100%;
height: auto;
}
/* キッカーと見出しは画像の空き部分に絶対配置する。
中央寄せに任せると上が詰まってデザインとずれる（実測との差が最大7px出た）。 */
.vmhs-kicker {
font-family: "Hiragino Mincho ProN", serif; /* 見出しと同じ明朝に揃える */
position: absolute;
left: 50%;
top: 5.78%; /* 実測 カード上端から18.3px */
transform: translateX(-50%);
width: 27.9%; /* 下線の幅98px */
font-size: 11.8px;
font-size: 3.36cqw;
line-height: 1;
letter-spacing: .08em;
color: #594057;
font-weight: 400;
padding-bottom: 4.5px;
padding-bottom: 1.28cqw; /* 下線を カード上端から34.1px に置く */
border-bottom: 1px solid #594057;
}
.vmhs-entry-title {
position: absolute;
left: 0;
right: 0;
top: 14.4%; /* 実測 カード上端から45.8px */
font-family: 'Zen Kurenaido', "Hiragino Mincho ProN", serif;
font-size: 19.2px;
font-size: 5.47cqw; /* 実測 12文字で254.0px＝カード幅の72.3%。
フォントの字幅が1emより広く、6.04cqwでは79.8%になったため補正 */
font-weight: 400;
color: #594057;
letter-spacing: .02em;
white-space: nowrap;
line-height: 1;
}
/* Start：カード全体を当たり判定にする。見た目は画像側。 */
.vmhs-start {
position: absolute;
left: 0;
right: 0;
top: 0;
height: 100%;
width: auto;
padding: 0;
border: none;
border-radius: 0;
background: none;
color: transparent;
cursor: pointer;
font-size: 1px;
}
/* --- 質問共通 --- */
.vmhs-top {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 18px
}
.vmhs-back {
border: none;
background: none;
cursor: pointer;
font-size: 18px;
color: #594057;
padding: 4px 8px
}
.vmhs-progress {
flex: 1;
height: 5px;
border-radius: 3px;
background: #eceae5;
overflow: hidden
}
.vmhs-bar {
height: 100%;
background: #e0b3e2;
border-radius: 3px;
transition: width .3s
}
.vmhs-step {
font-size: 11px;
color: #594057;
font-weight: 700;
letter-spacing: .06em
}
.vmhs-q {
font-size: 15px;
font-weight: 700;
line-height: 1.5;
margin-bottom: 16px;
color: #594057;
}
.vmhs-opts {
display: flex;
flex-direction: column;
gap: 10px
}
.vmhs-opt {
display: flex;
align-items: center;
gap: 11px;
padding: 14px 13px;
border-radius: 13px;
border: 1px solid #e0ded8;
background: #fff;
cursor: pointer;
text-align: left;
font-size: 14px;
color: var(--vm-dark);
transition: border-color .15s, background .15s
}
.vmhs-opt:hover {
border-color: var(--vm-accent)
}
.vmhs-radio {
flex: none;
width: 24px;
height: 24px;
border-radius: 50%;
border: 1.5px solid #d4d2cc
}
.vmhs-opt.sel {
border: 1.5px solid var(--vm-accent);
background: #fff; /* 選択時も塗らない。枠線と文字色で示す */
color: var(--vm-ink);
font-weight: 600
}
.vmhs-opt.sel .vmhs-radio {
border: none;
background: var(--vm-accent);
position: relative
}
.vmhs-opt.sel .vmhs-radio::after {
content: "✓";
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 13px
}
/* Q2：写真タイル */
.vmhs-tiles {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px
}
.vmhs-tile {
border: 1px solid #e0ded8;
border-radius: 10px;
overflow: hidden;
background: #fff;
cursor: pointer;
padding: 0;
transition: border-color .15s
}
.vmhs-tile:hover {
border-color: var(--vm-accent)
}
.vmhs-tile.sel {
border: 2px solid var(--vm-accent);
background: #fff /* 選択時も塗らない。枠線で示す */
}
.vmhs-tile-img {
position: relative;
display: block;
aspect-ratio: 4/3;
background: repeating-linear-gradient(45deg, #e4e2dd 0 7px, #edebe6 7px 14px)
} /* ★差し替え：雰囲気写真 */
.vmhs-tile.sel .vmhs-tile-img::after {
content: "✓";
position: absolute;
top: 7px;
right: 7px;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--vm-accent);
color: #fff;
font-size: 12px;
display: flex;
align-items: center;
justify-content: center
}
.vmhs-tile-label {
display: block;
padding: 9px 6px;
font-size: 12.5px;
text-align: center;
color: #594057
}
.vmhs-tile.sel .vmhs-tile-label {
color: var(--vm-ink);
font-weight: 600
}
/* --- アンケート（年齢・目的） --- */
.vmhs-sv-head {
text-align: center;
margin-bottom: 16px
}
.vmhs-sv-kicker {
/*font-family: 'Space Mono', monospace;*/
font-size: 9px;
letter-spacing: .3em;
color: var(--vm-ink);
font-weight: 700;
margin-bottom: 8px
}
.vmhs-sv-title {
font-size: 17px;
font-weight: 700;
color: var(--vm-dark);
line-height: 1.5
}
.vmhs-sv-sub {
font-size: 11.5px;
color: #594057;
margin-top: 4px
}
.vmhs-sv-label {
font-size: 12px;
font-weight: 700;
color: var(--vm-ink);
margin: 14px 0 8px;
letter-spacing: .04em
}
.vmhs-chips {
display: flex;
flex-wrap: wrap;
gap: 8px
}
.vmhs-chip {
padding: 10px 15px;
border-radius: 19px;
border: 1px solid #e0ded8;
background: #fff;
cursor: pointer;
font-family: inherit;
font-size: 13px;
color: var(--vm-dark);
transition: border-color .15s, background .15s
}
.vmhs-chip:hover {
border-color: var(--vm-accent)
}
.vmhs-chip.sel {
border: 1.5px solid var(--vm-accent);
background: #fff; /* 選択時も塗らない。枠線と文字色で示す */
color: var(--vm-ink);
font-weight: 600
}
.vmhs-sv-go {
display: block;
width: 100%;
margin-top: 20px;
padding: 14px;
border-radius: 13px;
border: none;
cursor: pointer;
background: var(--vm-accent);
color: #fff;
font-family: inherit;
font-size: 15px;
font-weight: 600
}
.vmhs-sv-go:disabled {
background: #dcd9d3;
cursor: default
}
.vmhs-sv-skip {
display: block;
width: 100%;
margin-top: 9px;
padding: 10px;
border: none;
background: none;
cursor: pointer;
font-family: inherit;
font-size: 12px;
color: #594057;
text-decoration: underline
}
/* --- 診断中演出 --- */
.vmhs-load {
padding: 64px 10px;
text-align: center
}
.vmhs-load-img {
display: block;
width: 64px; /* 実測 63.7x81.3（デザインは3倍で作られている） */
height: auto;
margin: 0 auto 21px; /* 画像下端〜テキスト上端 21.3px */
animation: vmhsBob 1.6s ease-in-out infinite
}
.vmhs-load-hearts {
font-size: 36px;
margin-bottom: 18px
}
.vmhs-load-hearts span {
display: inline-block;
margin: 0 6px;
animation: vmhsBob 1s ease-in-out infinite
}
.vmhs-load-hearts span:nth-child(2) {
animation-delay: .18s
}
.vmhs-load-hearts span:nth-child(3) {
animation-delay: .36s
}
@keyframes vmhsBob {
0%, 100% {
transform: translateY(0)
}
50% {
transform: translateY(-13px)
}
}
.vmhs-load-text {
font-size: 13px; /* 実測 字面 11.5px */
font-weight: 400;
color: #594057;
margin-bottom: 15px; /* テキスト下端〜バー上端 15.2px */
letter-spacing: .04em
}
.vmhs-load-bar {
width: 200px;
height: 6px;
border-radius: 3px;
background: #eceae5;
margin: 0 auto;
overflow: hidden
}
.vmhs-load-fill {
display: block;
height: 100%;
width: 0;
border-radius: 3px;
background: #e0b3e2 /* 実測。バッジや相性ボックスの枠と同色 */
}
.vmhs-load.run .vmhs-load-fill {
animation: vmhsFill 1.8s ease forwards
}
@keyframes vmhsFill {
to {
width: 100%
}
}
/* --- 結果 --- */
.vmhs-result-hero {
border-radius: 18px;
padding: 24px 18px;
text-align: center;
background: var(--vm-soft);
margin-bottom: 16px
}
.vmhs-rkicker {
font-family: /*'Space Mono', monospace;*/serif;
font-size: 9px;
letter-spacing: .3em;
color: var(--vm-dark);
font-weight: 700;
margin-bottom: 8px
}
.vmhs-rlead {
font-size: 12px;
color: var(--vm-dark);
margin-bottom: 4px
}
.vmhs-rtype {
font-size: 27px;
font-weight: 700;
color: var(--vm-dark);
margin-bottom: 6px
}
.vmhs-rtype.pop {
animation: vmhsPop .55s cubic-bezier(.34, 1.56, .64, 1) both
}
@keyframes vmhsPop {
0% {
transform: scale(.3);
opacity: 0
}
60% {
transform: scale(1.12)
}
100% {
transform: scale(1);
opacity: 1
}
}
.vmhs-rcatch {
font-size: 13px;
font-weight: 600;
color: #594057; /* 実測：タイプ名と同色。旧実装はピンクだった */
margin-bottom: 10px;
letter-spacing: .02em
}
.vmhs-rpct {
display: inline-block;
font-size: 11px;
color: var(--vm-dark);
background: #fff;
border: 1px solid var(--vm-accent);
border-radius: 14px;
padding: 4px 12px;
margin-bottom: 14px
}
.vmhs-stats {
display: flex;
justify-content: center;
gap: 16px;
margin-bottom: 14px
}
.vmhs-stat {
font-size: 12px;
color: var(--vm-dark)
}
.vmhs-stat b {
display: block;
font-size: 12.5px;
color: var(--vm-accent);
letter-spacing: .08em;
margin-top: 2px
}
.vmhs-mate {
margin-top: 12px;
padding: 10px 12px;
border: 1px solid #e0b3e2; /* 実測。バッジ（同じタイプは全体の◯%）と同色 */
border-radius: 11px;
background: #fff;
font-size: 12px;
color: var(--vm-dark);
text-align: center
}
.vmhs-mate b {
color: var(--vm-ink) /* デザインでは文字色のみ。枠線は付かない */
}
.vmhs-rimg {
aspect-ratio: 4/5;
max-height: 320px;
border-radius: 12px;
/*border: 1px solid var(--vm-ink);*/
margin: 0 auto 13px;
background: repeating-linear-gradient(45deg, #e4e2dd 0 8px, #edebe6 8px 16px);
background-size: auto;
background-position: center top
} /* JSで実画像に差し替え */
.vmhs-rcopy {
font-size: 13px;
color: var(--vm-dark);
line-height: 1.7;
text-align: left
}
.vmhs-set-label {
/*font-family: 'Space Mono', monospace;*/
font-size: 10px;
letter-spacing: .2em;
color: var(--vm-dark);
font-weight: 700;
margin-bottom: 10px
}
.vmhs-set {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 9px;
margin-bottom: 16px
}
.vmhs-set-item {
text-decoration: none
}
.vmhs-set-img {
aspect-ratio: 1;
border-radius: 9px;
background: repeating-linear-gradient(45deg, #e4e2dd 0 6px, #edebe6 6px 12px);
background-size: cover;
background-position: center top
}
.vmhs-set-name {
font-size: 11px;
text-align: center;
margin-top: 5px;
color: var(--vm-dark)
}
/* CTA「このコスチュームを見る」
診断と検索デザインOL.pdf p4 から実測（÷3）
329.3 x 51.2 ／ 塗り #e3a8dd ／ 完全なpill ／ 白文字
左に白い円 外径14.4・線1.4・左端から17.2
右に白い3点ドット（他のボタンと同じ作り） */
.vmhs-cta {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 51.2px;
padding: 0 46px;
border-radius: 999px;
border: none;
cursor: pointer;
text-align: center;
background: #e3a8dd;
color: #fff;
font-size: 15px;
font-weight: 600;
text-decoration: none;
margin-bottom: 10px
}
.vmhs-cta::before { /* 左の白い円 */
content: "";
position: absolute;
left: 17.2px;
top: 50%;
transform: translateY(-50%);
width: 14.4px;
height: 14.4px;
border: 1.4px solid #fff;
border-radius: 50%;
box-sizing: border-box;
}
.vmhs-cta::after { /* 右の3点ドット */
content: "";
position: absolute;
right: 17.2px;
top: 50%;
transform: translateY(-50%);
width: 14.2px;
height: 2.3px;
background: radial-gradient(circle at 1.15px 1.15px,
#fff 1.13px, transparent 1.2px)
0 0 / 5.94px 2.3px repeat-x;
}
#vmhs2026 a.vmhs-cta {
color: #fff;
border-radius: 30px;
}
.vmhs-subbtns {
display: flex;
gap: 9px
}
.vmhs-share, .vmhs-retry {
flex: 1;
padding: 12px;
border-radius: 13px;
cursor: pointer;
font-size: 13px;
text-align: center
}
.vmhs-share {
border: 1.5px solid var(--vm-accent);
background: #fff;
color: var(--vm-dark);
font-weight: 600
}
.vmhs-retry {
border: 1px solid var(--vm-dark);
background: #fff;
color: var(--vm-dark)
}
/* カテゴリ側は共通の .vmtop-morebtn を使う。展開中だけドットを矢印に差し替える */
#vmtop-cat-more.is-open::after {
content: "↑";
width: auto;
height: auto;
background: none;
font-size: 13px;
color: #606060;
line-height: 1;
}
/* ============================================================
CATALOG棚（slick asNavFor）
2026ハロウィンOL.pdf から実測（1080px幅 = 360px幅の3倍 → ÷3）
帯の背景 #fbf3ff
操作行 高さ27.3 ／ 矢印 9.2x13.6 ／ CTA 118.3x27.3 塗り #67616d
サムネ 71.7 x 75.9 ／ 間隔 4.6 ／ 現在のものは枠 #a94e82
サムネイルは左から 1,2,3… の順（デザインの 4,3,2,1 から仕様変更）
============================================================ */
#vmcat2026 {
/* 紙のテクスチャ。フッターと同じものをファイル冒頭の :root から取っている。
background の一括指定にすると background-image が消えるので、必ず longhand で。 */
background-color: var(--vm-paper-bg);
background-image: var(--vm-paper);
padding: 0 0 26px;
max-width: 640px;
margin: 0 auto;
color: #594057;
box-sizing: border-box;
}
:where(#vmcat2026 *) { box-sizing: border-box; margin: 0; padding: 0 }
/* 誌面ヘッダは支給画像 header_catalog01.webp（1080x333 → 3倍前提で 360x111.00）。
デザイン実測でもセクション上端2851.00から誌面写真の上端2962.33まで111.33pxなので、
画像がそのまま収まる。透明の余白はほぼ無し（左0.67pxのみ）。
以前はここをテキストで組んでいた（VME. collection / バーコード / 罫線 /
Costume・2026）。そのときの実測値は下記。画像をやめて組み直す場合に使う:
VME. collection 字面 x 13.33-254.00 (240.67) / y 18.00-46.33 (28.33)
バーコード x 300.33-350.00 (49.67) / y 27.33-42.67 (15.33)
和文 字面 x 14.00-155.67 (141.67) / y 57.00-70.00
小英文 字面 x 13.00-214.00 (201.00) / y 78.00-82.33
右の小英文5行 右端 351.33 / y 58.67-79.00（行送り4.5）
罫線1 x 13.67-351.33 / y 87.67 太さ0.67 / 色 rgb(42,42,42)
Costume 字面 x 14.00-44.67 / y 92.33-97.67
2026 字面 x 327.00-348.33 / y 91.67-98.33
罫線2 y 102.33 太さ0.33
※いずれもセクション上端2851.00からの相対値 */
.vmcat-head {
padding: 0;
}
.vmcat-head img {
display: block;
width: 100%;
height: auto;
}
/* ページめくりは StPageFlip（page-flip.browser.js）が担当する。
ライブラリが自前で canvas/DOM を作るので、こちらは置き場所だけ用意する。
誌面画像は 1080x1440（3:4）→ 360x480 を基準サイズにしている。 */
/* 「最初に戻る」の矢印を誌面の右下に置くための基準。
CSSめくりを消したときに一緒に外してしまい、矢印がページ下部に飛んでいた。 */
#vmcat-main {
position: relative;
}
.vmcat-book {
width: 100%;
margin: 0 auto;
/* StPageFlip は minWidth の値をステージの inline min-width にも書き込む。
片開きを保つため minWidth を 640 に上げているので、打ち消さないと
狭い画面で 640px の下限が効いて横にはみ出す。inline を上書きするので !important。 */
min-width: 0 !important;
}
.vmcat-book .stf__parent { margin: 0 auto }
/* 誌面は canvas ではなく DOM（loadFromHTML）で描いている。
ライブラリが devicePixelRatio を見ないため、canvas だと DPR2 の端末で
実体360x480 の絵が2倍に伸びてぼやけていた。![]()
なら実画素で描かれる。
ライブラリは各ページに .stf__item を付けて絶対配置するので、
こちらは中身を枠いっぱいに敷くところだけ受け持つ。 */
.vmcat-page {
width: 100%;
height: 100%;
overflow: hidden;
background: #fff;
}
.vmcat-page img,
#vmcat2026 .vmcat-page img { /* #vmcat2026 img の一括指定に負けないよう詳細度を上げる */
display: block;
width: 100%;
height: 100%;
object-fit: cover;
-webkit-user-drag: none;
user-select: none;
}
/* 「最初に戻る」の目印。最後の誌面のときだけ右下に出る。
クリックは下の誌面（stage）が拾うので、ここは通す。
写真の上に乗るので、白い半透明の丸を敷いて矢印を見えるようにしている。 */
.vmcat-restart {
position: absolute;
right: 10px;
bottom: 10px;
z-index: 4;
width: 26px;
height: 26px;
border-radius: 50%;
background: rgba(255, 255, 255, .82);
box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
opacity: 0;
transform: scale(.85);
transition: opacity .25s ease-out, transform .25s ease-out;
pointer-events: none;
}
.vmcat-restart.is-on {
opacity: 1;
transform: scale(1);
}
/* 反時計回りの矢印（＝最初に戻る）。文字は使わずSVGで描く */
.vmcat-restart::before {
content: "";
position: absolute;
inset: 6px;
background: rgb(89, 64, 87);
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
transform: scaleX(-1); /* 左向き＝戻る */
}
@media (prefers-reduced-motion: reduce) {
.vmcat-restart { transition: none }
}
/* サムネイルの現在位置。asNavFor をやめたので slick-current ではなく自前のクラス */
.vmcat-thumb.is-current img {
outline: 1px solid var(--vm-accent, #c0588f);
outline-offset: -1px;
}
/* メイン誌面 */
.vmcat-main { margin-bottom: 9px } /* 実測：誌面下端〜操作行 9.3px */
.vmcat-slide img { display: block; width: 100%; height: auto }
/* 操作行 */
/* 操作行 実測（アートボード1.png）:
‹ x 14.00-23.33 ／ ピル x 77.00-195.33 (118.33 x 27.67) ／
誌面名 字面 x 209.33- ／ › x 335.67-345.00
ピルの寸法は元から合っていた。位置だけデザインより43.8px左だったので詰める。 */
.vmcat-ctrl {
display: flex;
align-items: center;
gap: 0;
height: 27.3px;
padding: 0 14px;
margin-bottom: 11px;
}
.vmcat-cta { margin-left: 53.67px } /* ‹ の右端23.33 → ピル左端77.00 */
.vmcat-title { margin-left: 14px } /* ピル右端195.33 → 誌面名 209.33 */
.vmcat-next, #vmcat-next { margin-left: auto }
.vmcat-arrow {
flex: none;
width: 9.2px;
height: 13.6px;
border: none;
background: none;
cursor: pointer;
font-size: 20px;
line-height: 1;
color: #1a1a1a;
display: flex;
align-items: center;
justify-content: center;
}
.vmcat-cta {
flex: none;
display: flex;
align-items: center;
justify-content: center;
width: 118.3px;
height: 27.3px;
border-radius: 999px;
background: #67616d;
color: #fff;
font-size: 12px;
text-decoration: none;
}
#vmcat2026 a.vmcat-cta { color: #fff }
.vmcat-title {
flex: 1;
font-size: 12.5px;
color: #594057;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* サムネイル：端が切れて続きがあることを示す */
.vmcat-thumbs { padding: 0 }
/* .slick-list は slick 既定の overflow:hidden のままにする。
visible にするとトラック全長（実測1925px）がページ幅を押し広げ、
横スクロールバーが出る。端の見切れは slidesToShow の小数指定で出る。 */
.vmcat-thumb {
position: relative;
margin-right: 4.6px;
}
.vmcat-thumb img {
display: block;
width: 100%;
aspect-ratio: 70 / 89.9; /* 実測：縦長。高さ固定だと画面幅で歪む */
height: auto;
object-fit: cover;
border: 1px solid transparent;
}
.vmcat-thumb-no {
display: block;
text-align: center;
font-size: 11px;
color: #594057;
margin-top: 5px;
}
/* slick はラッパーを作らず .vmcat-thumb 自身に slick-current を付ける */
.vmcat-thumb.slick-current img { border-color: #a94e82 }
.vmcat-thumb.slick-current .vmcat-thumb-no { color: #a94e82 }
/* ============================================================
ドロワーメニュー（ハンバーガーの中身）
------------------------------------------------------------
ここは2026デザインの新規指定ではなく、cosplay2024.css から
そのまま持ってきた既存の見た目。
ドロワーはヘッダーの一部で全ページ共通だが、実体のCSSは
common2020.css ではなく各シーズンCSSに13ルールずつ複製されている
（cosplay2022 / cosplay2024 / santa2022〜2025 / top_dress2023 /
outlet / beach2023 …）。/c/costume は cosplay2024.css を外して
cosplay2026.css に差し替えたので、この複製ごと落ちて
ドロワーが素のまま（見出しが黒、文字が特大、矢印なし、
アイコン32px）になっていた。
★cosplay2024.css の "Drawer Menu" 節から #page_wrap だけ外してある。
あちらは padding-top:50px だが2026ページは20px で組んであり、
入れると中身が30px下がる。
★本来の置き場所は common2020.css（サイト共通）。ただしあちらには
古い .menu_title / .menu_child が残っていて全ページに効くので、
統合するなら8ファイルぶんの複製整理と併せてやること。
============================================================ */
.menu_title {
font-family: futura-pt, sans-serif;
display: block;
padding: 0.5rem;
font-size: 90%;
background-color: #fff;
color: #ff75c3;
border-bottom: 2px solid #ff75c3;
letter-spacing: .12em
}
.menu_child li {
border-bottom: 1px solid #ededed;
}
.menu_child li a {
display: block;
font-size: 80%;
letter-spacing: .01em;
padding: 0.75rem;
color: #2b3d4c;
position: relative;
}
.menu_child {
border-top: none;
}
.menu_child li a::after {
content: '';
width: 5px;
height: 5px;
border-top: 1px solid #2b3d4c;
border-right: 1px solid #2b3d4c;
transform: rotate(45deg) translateY(-50%);
position: absolute;
top: 47%;
right: 5%;
}
.menu_child li a:hover {
color: #2b3d4c;
background-color: #eacedb;
}
.menu_child li a:hover::after {
border-top: 1px solid #2b3d4c;
border-right: 1px solid #2b3d4c;
}
.drawer-dropdown.open {
transition-duration: 1s;
}
.drawer-dropdown[aria-hidden=false] {
transition-duration: 1s;
}
.menu_child li.drawer-dropdown a::after {
transform: rotate(135deg) translateY(-50%);
position: absolute;
top: 43%;
right: 5%;
}
.menu_child li.drawer-dropdown.open a::after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.menu_child li.drawer-dropdown.open ul.drawer-dropdown-menu li a::after {
content: '';
width: 5px;
height: 5px;
border-top: 1px solid #2b3d4c;
border-right: 1px solid #2b3d4c;
transform: rotate(45deg) translateY(-50%);
position: absolute;
top: 47%;
right: 5%;
}
.sm_icon {
display: block;
width: 20px;
margin-right: 5px;
margin-left: -3px;
}
.menu_child.your_menus {
border-bottom: 2px solid #ffb3ff;
}
.menu_child.your_menus li {
border-bottom: 1px solid #ededed;
}
.drawer-dropdown-menu-item {
line-height: 1.5;
}
.menu_child li.drawer-dropdown.open {
border-bottom: 2px solid #ededed;
}
.drawer-dropdown-menu li a {
padding-left: 10%;
}
.banners_list li {
margin: 3%;
}