/* ============================================================
   santa2026.css — サンタページ2026（/c/costume/santacosplay）
   cosplay2026.css の後に読む。確定レイアウトはコスプレTOPと同じ部品・同じ色
   （比較ボードのモック「確定レイアウト」で確認、2026-10-04）なので、
   ここにはサンタにしか無いもの（雪・リボンの文字・h1の位置）だけを書く。
   クラスは .vmsn- 接頭辞

   ★前半の「サンタページの枠」は santa2025.css から移したもの（2026-10-05）。
     santa2025.css をサンタのレイアウトから外せるようにするため。
     santa2025.css はヘッダーの直書き <style> より前に読まれていて、ルールの多くは
     直書きに上書きされて効いていなかった。santa2026.css は本文の先頭（00_head）で読むので、
     同じルールをそのまま移すと今度はこちらが勝ってしまう（PC幅でロゴが画面外に出た）。
     そこで公開中のサンタページの写しで、santa2025.css の各ルールの「項目（プロパティ）」を
     1つずつ外して見た目が変わるか調べ、スマホ幅（390px）かPC幅（1420px）のどちらかで
     実際に効いていた項目だけを残した。メニューを開いたとき等の状態でしか効かないルールは
     試せないので全部残した。値はブラウザが読み直した形（rgb() や longhand）で書いてある。
     昨年の中身にしか使っていないルール（KVスライダー・ニュース・タブ・もっと見る等）は外した。
     ★枠のルールを足すときは、プレビューで「本番で実際に効いているか」を確かめること
============================================================ */

/* ============================================================
   サンタページの枠（santa2025.css から移植。効いていた項目だけ）
   直すときは元の santa2025.css ではなく、ここを直す
============================================================ */
html, body {
  overflow-x: hidden;
}
/* ハンバーガーアイコン（左上の三本線）。1項目ずつ外す調べ方では「効いていない」と出たが、
   santa2025.css を丸ごと外すと形が変わった（同じ値を別の場所でも持っていて、片方だけ外しても
   変わらなかった）。元の記述のまま戻した */
.drawer-hamburger-icon:before, .drawer-hamburger-icon:after {
  background-color: #333 !important;
}
.drawer-hamburger-icon, .drawer-hamburger-icon:before, .drawer-hamburger-icon:after {
  width: 80%;
}
.drawer-hamburger {
  width: 1.8rem;
}
.drawer-hamburger-icon {
  margin-top: 15px;
}
.drawer-hamburger-icon:after {
  top: -10px;
}
.drawerLogo {
  margin-top: 2rem;
  margin-right: auto;
  margin-bottom: 0px;
  margin-left: auto;
}
.txt_menu {
  padding-bottom: 0px;
  margin-top: -0.7em;
  margin-bottom: 0px;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: rgb(221, 221, 221);
}
.txt_menu li {
  border-right-style: none;
  border-right-color: currentcolor;
}
.txt_menu li a, .txt_menu li span {
  font-family: sans-serif;
  font-weight: 400;
  font-size: 80%;
  text-align: center;
  padding-top: 10px;
  padding-right: 0.8rem;
  padding-bottom: 10px;
  padding-left: 0.8rem;
  line-height: 1.1;
}
a.anchor {
  display: block;
  padding-top: 24%;
  margin-top: -24%;
}
#cart a {
  height: 60px;
  width: 54px;
  margin-top: 7px;
  background-image: url("https://vanityme.itembox.design/item/images/santa2023/cart_bk_santa.png");
  background-size: 22px 30px;
  background-position-x: right 15px;
  background-position-y: top 10px;
}
#cart a .fs-client-cart-count {
  top: 15px;
  color: rgb(96, 96, 96);
  font-family: Jost, sans-serif;
  font-weight: 400;
  font-size: 80%;
  right: -25px !important;
}
#account a {
  height: 20px;
  width: 20px;
  margin-top: 19px;
  margin-right: 5px;
  background-image: url("https://vanityme.itembox.design/item/images/santa2023/bt_account.png");
}
#account {
  right: 44px;
}
.fs-p-searchForm__button::before {
  position: relative;
  height: 20px;
  width: 20px;
  margin-top: 6px;
  margin-left: 5px;
  background-image: url("https://vanityme.itembox.design/item/images/santa2023/bt_search.png");
  background-size: contain;
  background-repeat: no-repeat;
  content: "";
  top: 0px !important;
  color: rgb(255, 255, 255) !important;
}
table.search_price01, table.search_size01, table.search_category01, table.category_search {
  width: 100%;
  text-align: center;
  letter-spacing: 0.1em;
}
table.search_price01 tr th, table.search_size01 tr th, table.search_category01 tr th, table.category_search tr th {
  font-family: Jost, sans-serif;
  font-weight: 400;
  font-size: 80%;
}
table.search_price01 tr td, table.search_size01 tr td, table.search_category01 tr td, table.category_search tr td {
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: rgb(204, 204, 204);
  width: 50%;
}
table.search_price01 tr td a, table.search_size01 tr td a, table.search_category01 tr td a, table.category_search tr td a {
  display: block;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 15px;
  font-family: Jost, sans-serif;
  font-weight: 400;
  color: rgb(51, 51, 51);
  text-align: left;
  letter-spacing: 0.075rem;
}
ul.color_bt_in > li {
  width: calc(33.3333%);
  padding-top: 1.5%;
  padding-right: 1.5%;
  padding-bottom: 1.5%;
  padding-left: 1.5%;
}
ul.color_bt_in > li {
  position: relative;
}
ul.color_bt_in > li > a {
  padding-top: 10%;
  padding-bottom: 10%;
  display: block;
}
.menu_title {
  font-family: Jost, sans-serif;
  font-size: 90%;
  background-color: rgb(255, 255, 255);
  color: rgb(255, 117, 195);
  border-bottom-width: 2px;
  border-bottom-style: solid;
  letter-spacing: 0.12em;
}
.menu_child li {
  border-bottom-color: rgb(237, 237, 237);
}
.menu_child li a {
  font-size: 80%;
  letter-spacing: 0.01em;
  color: rgb(43, 61, 76);
  position: relative;
}
.menu_child {
  border-top-style: none;
  border-top-color: currentcolor;
}
.menu_child li a::after {
  content: "";
  width: 5px;
  height: 5px;
  border-top-width: 1px;
  border-top-style: solid;
  border-right-width: 1px;
  border-right-style: solid;
  transform: rotate(45deg) translateY(-50%);
  position: absolute;
  top: 47%;
  right: 5%;
}
.menu_child li a:hover {
  color: rgb(255, 255, 255);
  background-color: rgb(255, 117, 195);
}
.menu_child li a:hover::after {
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: rgb(255, 255, 255);
  border-right-width: 1px;
  border-right-style: solid;
  border-right-color: rgb(255, 255, 255);
}
.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%);
  top: 43%;
}
.menu_child li.drawer-dropdown.open a::after {
  transform: rotate(-45deg);
}
.menu_child li.drawer-dropdown.open ul.drawer-dropdown-menu li a::after {
  content: "";
  width: 5px;
  height: 5px;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: rgb(43, 61, 76);
  border-right-width: 1px;
  border-right-style: solid;
  border-right-color: rgb(43, 61, 76);
  transform: rotate(45deg) translateY(-50%);
  position: absolute;
  top: 47%;
  right: 5%;
}
.sm_icon {
  width: 20px;
  margin-right: 5px;
  margin-left: -3px;
}
.drawer-dropdown-menu-item {
  line-height: 1.5;
}
.menu_child li.drawer-dropdown.open {
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-bottom-color: rgb(237, 237, 237);
}
.drawer-dropdown-menu li a {
  padding-left: 10%;
}
.banners_list li {
  margin-top: 3%;
  margin-right: 3%;
  margin-bottom: 3%;
  margin-left: 3%;
}
.costab_panel {
  width: 100%;
  padding-top: 1em;
  padding-bottom: 1em;
  display: none;
}
/* ヘッダー検索オーバーレイのランキング。santa2025.css に同じ組が2回書かれていて、1項目ずつ外す
   調べ方では「効いていない」と出てしまうため、元の記述のまま戻した（2組とも同じ値なので1組に） */
.item_propaty_detail {
  margin-bottom: .5rem;
  padding: 0 0 .25rem;
  background-color: transparent !important;
}
.item_propaty_detail {
  margin-bottom: 1em;
}
a .item_propaty_price_num {
  font-weight: normal;
  font-size: .8em;
  margin-left: -3px;
  color: #ff3b59;
}
a .item_propaty_price_cur {
  font-size: .8em;
  color: #ff3b59;
}
a .item_propaty_name, a .item_propaty_price_tax {
  color: #ff3b59;
}
a .item_propaty_price_tax {
  font-size: .6em;
}
#page_top {
  width: 55px;
  height: 100px;
  bottom: 3%;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
  z-index: 4;
  background-color: initial !important;
}
#page_top.active {
  opacity: 1;
  transition-duration: 1.5s;
  transition-timing-function: ease;
  transition-delay: 0s;
  transition-property: all;
}
.fs-c-slick {
  opacity: 0;
  transition-duration: 0.08s;
  transition-timing-function: linear;
  transition-property: opacity;
}
.fs-c-slick.slick-initialized {
  opacity: 1;
}
.fs-c-productCarouselMainImage__thumbnailList > li {
  flex-basis: 56px;
  flex-shrink: 0;
  margin-top: 0px;
  margin-right: 4px;
  margin-bottom: 0px;
  margin-left: 0px;
}
.slick-dotted.slick-slider {
  margin-bottom: 0px !important;
}
.fs-c-slick .slick-prev::before, .fs-c-slick .slick-next::before {
  font-size: 20px;
}
.fs-c-productListItem__viewMoreImageButton.fs-c-buttonContainer {
  display: none;
}
.fs-c-productListItem__prices.fs-c-productPrices > .fs-c-productPrice, .fs-c-productListItem__prices.fs-c-productPrices > .fs-c-productMarks {
  padding-right: 0px;
  padding-left: 0px;
}
.fs-c-productListItem__prices.fs-c-productPrices > .fs-c-price__currencyMark {
  font-weight: normal !important;
}
.fs-c-slick .slick-prev, .fs-c-slick .slick-next {
  position: absolute;
  z-index: 9999;
  display: block;
  height: 30px;
  width: 30px;
  line-height: 0px;
  font-size: 0px;
  background-image: initial;
  background-position-x: initial;
  background-position-y: initial;
  background-size: initial;
  background-repeat: initial;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  background-color: rgba(0, 0, 0, 0.1);
}
.bg_pink {
  background-color: rgb(253, 241, 255);
}
.fs-c-breadcrumb {
  padding-top: 11.5%;
}
.fs-c-breadcrumb ol li {
  padding-top: 0.2em;
  padding-bottom: 0.2em;
}
/* ページトップボタンは santa2025.css で同じセレクタが2回ずつ書かれていた。1項目ずつ外す調べ方では
   片方を外してももう片方が同じ値を出すので「効いていない」と判定されてしまうため、元の4ルールを
   そのまま戻した（後のほうが勝つ順も元どおり） */
#page_top a {
  position: relative;
  display: block;
  width: 55px;
  height: 100px;
  text-decoration: none;
}
#page_top a img {
  position: absolute;
  width: 55px;
  height: 100px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  text-align: center;
}
#page_top a img {
  width: 100%;
  height: auto;
}
#page_top a {
  width: 60px;
  height: 100px;
}

/* ============================================================
   サンタTOP（/c/costume/santacosplay）だけで隠すもの（2026-10-09）
   FutureShop が自動で出すパンくず・サブグループ・商品一覧・スクロールで出るカートボタン。
   00a_top_only.html の <style> と同じ指定だが、あちらは商品一覧より「後」にあるので、
   読み込みの途中で商品一覧が一瞬見えてしまう。body の class（TOPだけ fs-body-category-santacosplay。
   下層は fs-body-category-santa-all など）で TOP だけに当て、このCSSをページの先頭で読めば最初から出ない。
   ★テストページ（fs-body-category-test_page）には効かないので、テストページは 00a のまま
============================================================ */
.fs-body-category-santacosplay :is(.fs-c-breadcrumb, .fs-c-subgroup, .fs-c-productList, .fs-p-scrollingCartButton) { display: none; }
.fs-body-category-santacosplay .fs-l-main { margin-bottom: 0; }

/* ============================================================
   ヘッダー（santa2026/header/header.html ＝ 置換文字 header_menu_santa2026）
   2025版のヘッダーパーツに直書きされていた <style> をここへ移した（2026-10-08）。
   パーツの <style> と CSS に同じ指定が2つあると、どちらが勝つかが読み込み順で変わる
   （テストページではロゴがパーツ側の 70px に戻った）。ヘッダーの見た目はここだけで決める。
   ★このCSSが無いと検索オーバーレイが閉じた状態にならない。ヘッダーを使うレイアウトには 00_head を置く
============================================================ */
.drawerLogo2 { max-width: 180px; margin: 3% auto; }
#search-wrap { position: fixed; top: 0; left: 0; opacity: 0; transition: all .4s; width: 100%; height: auto; }
#search-wrap.panelactive { opacity: 1; z-index: 100000; background: #fff; display: flex; justify-content: center; overflow-y: scroll; }
#search-wrap .search-area { display: none; }
#search-wrap.panelactive .search-area { display: block; width: 100%; padding: 2%; position: relative; height: 100vh; overflow-y: scroll; }
.open-btn { position: absolute; top: 10px; right: 80px; width: 40px; padding: 10px; display: block; }
.close-btn { position: absolute; top: 10px; right: 10px; z-index: 2; cursor: pointer; width: 60px; height: 60px; }
.close-btn span { display: inline-block; position: absolute; left: 14px; height: 3px; border-radius: 2px; background-color: #666; }
.close-btn span:nth-of-type(1) { top: 21px; left: 16px; transform: translateY(6px) rotate(-135deg); width: 50%; }
.close-btn span:nth-of-type(2) { top: 32px; left: 16px; transform: translateY(-6px) rotate(135deg); width: 50%; }
.logout.my-false { display: none; }
.login.my-true { display: none; }

/* 「カテゴリ」の字。cosplay2026.css（新しい中身のために読んでいる）の .txt_menu li span が文字間と色を
   コスプレTOPの値に変えるので、letter-spacing も本番の値に戻す */
.txt_menu li span {
  font-family: sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 80%;
  text-align: center;
  padding: 10px .8rem;
  line-height: 1.1;
  display: block;
  letter-spacing: normal;
  color: #636363;
}

/* ---- ロゴ（2026-10-09 指示で /c/costume と同じにした）----
   画像は cosplay2026/logo_cos2026.png（377x34。header.html で差し替え）。大きさと余白は /c/costume のヘッダーパーツの
   <style>（max-width:150px・margin:15px auto 0・padding:5px 0 25px。PCも同じ）をそのまま写した。
   header#global_header img.shop_logo と詳細度を上げてあるのは、common2020.css の
   #global_header .shop_logo { height:60px; padding:20px 0 } に読み込み順と関係なく勝つため。 */
header#global_header img.shop_logo {
  width: 100%;
  max-width: 150px;
  height: auto;
  margin: 15px auto 0;
  padding: 5px 0 25px;
}
/* サンタのヘッダーはロゴを h1.logo で包んでいて（/c/costume は div）、h1 の下の余白 8px と
   テキストメニューの margin-top の差で、メニューの線が /c/costume より 1.6px 下がっていた（390px で 55.3 / 53.7）。
   h1 の下の余白を 1.6px 減らしてそろえる */
#global_header h1.logo { margin-bottom: 6.4px; }

/* ============================================================
   サンタページの中身（2026）
============================================================ */
/* ---- 01 KV の雪 ----
   現行サンタページ（santa2025）の .snow と同じ作り。粒を3つ→6つに増やし、
   2層を速さ違いで流して奥行きを出した。pointer-events:none なのでスライドのリンクは押せる */
.vmsn-snow, .vmsn-snow::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image:
    radial-gradient(2px 2px at 20px 20px, #fff, transparent),
    radial-gradient(2px 2px at 60px 80px, #fff, transparent),
    radial-gradient(3px 3px at 100px 40px, #fff, transparent),
    radial-gradient(2px 2px at 140px 110px, #fff, transparent),
    radial-gradient(3px 3px at 30px 140px, #fff, transparent),
    radial-gradient(2px 2px at 90px 160px, #fff, transparent);
  background-size: 170px 170px;
  animation: vmsn-snowfall 30s linear infinite;
}
.vmsn-snow::after {
  content: "";
  background-size: 240px 240px;
  opacity: .7;
  animation: vmsn-snowfall2 45s linear infinite;
}
@keyframes vmsn-snowfall {
  from { background-position: 0 0; }
  to   { background-position: 0 1360px; }  /* 170 の8倍。粒の間隔の倍数にしないと1周ごとに跳ぶ */
}
@keyframes vmsn-snowfall2 {
  from { background-position: 0 0; }
  to   { background-position: 0 1440px; }  /* 240 の6倍 */
}
@media (prefers-reduced-motion: reduce) {
  .vmsn-snow, .vmsn-snow::after { animation: none; }
}
/* ページ全体の雪（santa2026.js の initSnow が body に置く）。KVの上端〜SNSボタンまで。
   地が淡いピンクのところでは白い粒が見えないので、粒のふちにだけ薄いピンクの影を付けた。
   下端60pxは消えていくようにぼかす */
/* 雪の一時停止（2026-10-09 修正依頼「雪を降らせるのは一旦なし」）。
   雪を戻すときはこの1行を消す（KVの雪もページ全体の雪も戻る。santa2026.js はこれを見て層を作らない） */
.vmsn-snow { display: none !important; }

/* ストーリーズの一時停止（2026-10-09 修正依頼「一旦非表示」）。リボン帯と h1 は出したまま。
   戻すときはこの1行を消す（santa2026.js はこれを見て丸と動画を作らない） */
.vmsn-hw .vmhw-stories { display: none; }

.vmsn-snow-page {
  inset: auto;
  z-index: 5;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 60px), transparent);
  mask-image: linear-gradient(#000 calc(100% - 60px), transparent);
}
.vmsn-snow-page, .vmsn-snow-page::after {
  background-image:
    radial-gradient(2px 2px at 20px 20px, #fff 50%, rgba(205, 150, 175, .45) 80%, transparent),
    radial-gradient(2px 2px at 60px 80px, #fff 50%, rgba(205, 150, 175, .45) 80%, transparent),
    radial-gradient(3px 3px at 100px 40px, #fff 50%, rgba(205, 150, 175, .45) 80%, transparent),
    radial-gradient(2px 2px at 140px 110px, #fff 50%, rgba(205, 150, 175, .45) 80%, transparent),
    radial-gradient(3px 3px at 30px 140px, #fff 50%, rgba(205, 150, 175, .45) 80%, transparent),
    radial-gradient(2px 2px at 90px 160px, #fff 50%, rgba(205, 150, 175, .45) 80%, transparent);
}

/* ---- 04〜06 の下地 .vmsn-hw ----
   KV（01_kv）と 04_stories の間に、お届けバーのパーツを差し込めるよう別パーツに分けた。
   #vmhw2026 は KV のパーツだけに付ける（同じ id を2つ置くと壊れる）ので、
   cosplay2026.css の #vmhw2026 の下地のうち、ストーリーズ以降に要るものをここに写す。
   padding-top（ヘッダー避けの52px）は KV 側だけで足りるので写さない */
.vmsn-hw {
  --vm-accent: #c0588f;
  --vm-soft: #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;
}
/* cosplay2026.css の :where(#vmhw2026 *) と同じリセット（詳細度0）。
   これが無いと、ストーリーズの丸（button）がブラウザ既定の padding を持ったままになり、
   丸の下のタグ名が狭くなって「#マリームー／ン」と折り返した */
:where(.vmsn-hw *) { box-sizing: border-box; margin: 0; padding: 0; }
/* ストーリーズのタグは1行に収める（2026-10-07 指示）。丸の幅76pxより長い「#ブラックサンタ」が2行に
   折り返していた。字間を少し詰め、それでも長いぶんは丸の左右の隙間にはみ出させる（中央揃えのまま） */
.vmsn-hw .vmhw-story-tag { white-space: nowrap; letter-spacing: -.02em; }
.vmsn-hw video { display: block; width: 100%; }
.vmsn-hw a { color: var(--vm-ink); }
.vmsn-hw a:hover { color: var(--vm-accent); }
.vmsn-hw a.vmhw-ov-pbtn { color: #fff; }

/* ---- 本番デザインの寸法の決まり ----
   デザインは Illustrator のアートボード（幅1080）。360px幅の3倍なので、実測値は ÷3 して書く。
   アートボード1（KV〜ランキング）・アートボード7（カタログ〜フッター）。実測の元データは notes/santa2026.md */

/* ---- 01 KV：本番の画像は 1080x1350（4:5）。コスプレTOPの箱は 3:4 なので比率だけ差し替える ---- */
#vmhw2026.vmsn .vmhw-slide { aspect-ratio: 4 / 5; padding: 0; }
/* KVの文字と白いグラデーション（01_kv.html の各スライドにコメントで入っている。最初は非表示）。
   コスプレTOPの書き方（インラインの style ＋ 負の margin）をクラスにした。サンタはスライドの padding が 0 なので、
   コスプレTOPのスライドの余白 22px 20px 46px（下46pxはドットのぶん）をこの箱に持たせる。
   文字は span なので block に直し、reset.css の Jost に負けないよう書体は要素ごとに書く */
#vmhw2026.vmsn .vmsn-kv-txt {
  display: block;
  margin-top: auto;
  padding: 22px 20px 46px;
  background: linear-gradient(0deg, rgba(255, 255, 255, .88), rgba(255, 255, 255, .55) 70%, transparent);
}
#vmhw2026.vmsn .vmsn-kv-txt .vmhw-kicker,
#vmhw2026.vmsn .vmsn-kv-txt .vmhw-title { display: block; }
#vmhw2026.vmsn .vmsn-kv-txt .vmhw-kicker { font-family: "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif; }
#vmhw2026.vmsn .vmsn-kv-txt .vmhw-title { font-family: "Hiragino Mincho ProN", "Yu Mincho", serif; }
#vmhw2026.vmsn .vmsn-kv-txt .vmhw-cta { background: rgb(239, 30, 67); font-family: "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif; }   /* サンタの赤（検索の差し色と同じ） */
/* ヘッダーとの隙間（2026-10-07 指示）。コスプレTOPは 767px 以下で padding-top 52px・768px 以上で 0。
   サンタのヘッダーはテキストメニューの下端が ページ上端から 84px（375px幅）／88px（1280px幅）で、
   本文は 60px から始まる。52px だとメニューの下に約28px の空きが出ていた。
   768px 以上の 0 は逆にメニューが画像の上端に 28px かぶさる。どちらもメニューの下端に合わせる */
#vmhw2026.vmsn { padding-top: 28px; }   /* 10-08: ロゴの直しで線の位置がどの幅でも同じになり、メニューの下端も 375px で約88px にそろった */

/* ---- 地色：アートボード1の地は rgb(252,248,250)。セクションごとに持たせる ---- */
.vmsn-hw, #feature.vmsn, #findzone.vmsn, #ranking.vmsn, #ranking-ov.vmsn { background-color: #fcf8fa; }

/* ---- 05 リボン：赤いグラデーションの帯＋文字画像 ----
   実測 帯 y1655-1809（高154 → 51.33px）。グラデーションは左端・x340・x700・右端の4点を読んだ値。
   文字は1周ぶん（VANITYME〜｜の次まで 688px → 229.33px）を透過画像にしてある。
   画像の中に左右の余白も入れてあるので margin は0（コスプレTOPの画像版は20px空けている） */
.vmsn-hw .vmsn-ribbon {
  height: 51.33px;
  background: linear-gradient(90deg, rgb(177, 13, 57) 0%, rgb(228, 55, 98) 31.5%, rgb(216, 43, 67) 66%, rgb(224, 45, 78) 100%);
}
.vmsn-ribbon-track img, #vmhw2026 .vmsn-ribbon-track img, .vmsn-hw .vmsn-ribbon-track img {
  display: block;
  flex: none;
  width: 229.33px;
  height: 51.33px;
  margin-right: 0;
}

/* ---- セクション見出し（アイコン＋欧文イタリック｜明朝）----
   4つとも同じ形。アイコンは支給の立体アイコン（PDFから取り出した透過画像）。
   実測（アートボード1／7、÷3済み）:
     欧文  色 rgb(95,73,91)  字面 Christmas Selection 122.67 / Category 74.33 / Ranking 76.00 / New Avenue 103.67
     ｜    幅1px 高11.33  欧文の右から約10.5／和文の左まで約14（New Avenue だけ5だったが揃えた）
     和文  明朝 色 rgb(82,73,99)  1字あたり 約12.0（「いま注目の特集からさがす」144.67/12字）
   アイコンの位置・大きさは見出しごとに違うので、下の .vmsn-head-○○ で個別に持つ */
.vmsn-head {
  display: flex;
  align-items: center;
  margin: 0;
  color: rgb(82, 73, 99);
}
.vmsn-head .vmsn-head-ic { flex: none; display: block; height: auto; }
.vmsn .vmsn-head-en {
  font-family: "Times New Roman", Times, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 21px;   /* Category / Ranking / New Avenue。字幅で解くと 20.0 / 22.8 / 21.1、キャップ高では約21 */
  line-height: 1;
  letter-spacing: 0;
  color: rgb(95, 73, 91);
  white-space: nowrap;
}
.vmsn-head-bar {
  flex: none;
  width: 1px;
  height: 11.33px;
  margin: 0 14px 0 10.5px;
  background: rgb(82, 73, 99);
}
.vmsn .vmsn-head-ja {
  font-family: "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "Noto Serif JP", serif;
  font-weight: 400;
  font-size: 12px;   /* 字幅で解くと 12.06（Christmas）/ 11.6（ほか3つ） */
  line-height: 1;
  letter-spacing: 0;
  color: rgb(82, 73, 99);
  white-space: nowrap;
}
/* Christmas Selection だけデザインでも小さい（字幅122.67 → 15.29px）。21pxだと360px幅に入らない */
.vmsn .vmsn-head-bow .vmsn-head-en { font-size: 15.3px; }
/* アイコン  実測 x（ページ左端から）/ 幅 / 欧文の左端 */
.vmsn-head-bow .vmsn-head-ic      { width: 32px; margin-right: 13.67px; }   /* x6.00 幅32.00 → 欧文51.67 */
.vmsn-head-stocking .vmsn-head-ic { width: 60px; margin-right: 9.33px; }    /* x7.33 幅60.00 → 欧文76.67 */
.vmsn-head-candy .vmsn-head-ic    { width: 31px; margin-right: 18.67px; }   /* x19.67 幅31.00 → 欧文69.33 */
.vmsn-head-tree .vmsn-head-ic     { width: 47px; margin-right: 12.67px; }   /* x7.00 幅47.00 → 欧文66.67 */

/* ---- 06 h1：コスプレTOPはページ先頭、サンタはリボンの下（確定レイアウト） ---- */
.vmsn-hw .vmsn-h1 { padding-top: 9px; padding-bottom: 9px; margin: 0; }

/* ---- ピル型のボタン（特集の続き・すべてのカテゴリ・ランキングもっと見る・新作を全部見る）----
   コスプレTOPは灰色の塗り #F2F2F5（カテゴリだけ白）＋下の影だったが、サンタは支給の見本画像
   （2026-10-07・約2.27倍の書き出し）の色に合わせる。4つとも同じ:
     塗り rgb(251,250,252) ／ 縁 1px の線 rgb(190,183,196)（見本で約0.5px）／
     影は右下へ約5pxのぼかし（縁のすぐ外が rgb(228,226,228) から白へ）／
     文字 rgb(61,61,61) ／ 3点 rgb(96,95,95)
   コスプレ側の #feature a.vmtop-morebtn（詳細度 1,1,1）に負けないよう、id と要素名を付けてある */
:is(#feature, #findzone, #vmsn-ov, #ranking, #ranking-ov, #new) :is(a, button):is(.vmtop-morebtn, .vmtop-viewmore, .vmtop-new-btn) {
  background: rgb(251, 250, 252);
  border: .5px solid rgb(190, 183, 196);
  box-shadow: 2px 3px 5px rgba(60, 50, 70, .12);
  color: rgb(61, 61, 61);
}
/* 特集の続き・ランキングもっと見る・新作を全部見る は、ごく薄いピンクの塗り（2026-10-08 指示）。
   縁・影・文字は上と同じ */
#feature button#vmsn-feat-more, :is(#ranking, #ranking-ov) button.vmtop-viewmore, #new a.vmtop-new-btn { background: #fdf2f6; }
:is(#feature, #findzone, #vmsn-ov, #ranking, #ranking-ov, #new) :is(a, button):is(.vmtop-morebtn, .vmtop-viewmore, .vmtop-new-btn):not(.is-open)::after {
  background: radial-gradient(circle at 1.335px 1.335px, rgb(96, 95, 95) 1.33px, transparent 1.4px) 0 0 / 5.83px 2.67px repeat-x;
}

/* ---- 07 Christmas Selection ----
   カードは .vmtop-sq-grid / .vmtop-sq（4:5・角丸10px）のまま。
   キャプションは1行の明朝（実測 カードの左から8.67・写真の下から8.33・色 rgb(82,73,99)）。
   デザインの字は約8.5pxで小さいので、コスプレTOPの .vmtop-sq-tag（11px）に揃えた */
#feature.vmsn { padding-top: 24px; padding-bottom: 28px; }
#feature.vmsn .vmsn-head { margin: 0 0 20px; }
.vmsn .vmsn-feat-t {
  display: block;
  margin: 8.33px 0 0 8.67px;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "Noto Serif JP", serif;
  font-size: 10.5px;  /* 「おうちでゆったりチルなパーティー」16字が390px幅で1行に入る大きさ */
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0;
  color: rgb(82, 73, 99);
}
/* 7枚目以降は「特集の続きを見る」で開く（santa2026.js が .is-open を付け外し） */
.vmsn-feat [data-more] { display: none; }
.vmsn-feat.is-open [data-more] { display: block; }
#feature.vmsn .vmtop-morebtn { width: 350px; cursor: pointer; }

/* ---- 08 検索：部品はコスプレTOPのまま。差し色だけサンタの赤（実測 rgb(239,30,67)）---- */
:is(#findzone, #vmsn-ov) .vmtop-kw.hot::after { background: rgb(239, 30, 67); }
:is(#findzone, #vmsn-ov) .vmtop-filter-plus { color: rgb(239, 30, 67); }

/* ---- 09 カテゴリ：上下が波形の帯 ----
   実測（アートボード1、÷3済み）:
     帯の色 rgb(244,237,240)。波は円弧の連なりで、山の間隔49.50・山の高さ14.33
       （半幅24.67・高さ14.33 から逆算した円の半径28.40）。山の頂点は x7.00
     帯の本体（波の谷から谷）537.33 ／ 谷 → アイコン上端17.67 ／ アイコン下端 → 丸の上端29.00
     ボタンの下端 → 下の谷 約41.67
   波は ::before / ::after に円のグラデーションを横に並べて描く。帯の外にはみ出すので、
   帯（.vmtop-catblock）の上下に margin を取って、前後の要素と重ならないようにしている */
:is(#findzone, #vmsn-ov) .vmsn-catblock {
  position: relative;
  margin-top: 30px;
  margin-bottom: 30px;
  padding: 17.67px 0 41.67px;
  background: rgb(244, 237, 240);
}
.vmsn-catblock::before, .vmsn-catblock::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 14.33px;
  background-image: radial-gradient(circle 28.4px at 24.75px 28.4px, rgb(244, 237, 240) 28px, rgba(244, 237, 240, 0) 28.6px);
  background-size: 49.5px 14.33px;
  background-repeat: repeat-x;
  background-position: -17.75px 0;   /* 山の頂点（タイルの中央 24.75）を x7.00 に */
  pointer-events: none;
}
.vmsn-catblock::before { bottom: 100%; }
.vmsn-catblock::after  { top: 100%; transform: scaleY(-1); }
/* 見出しの左端：帯は .vmtop-sec の外へ左右11pxはみ出している（コスプレTOPの margin:0 -16px）ので、
   アイコンの実測 x7.33 に11pxを足す */
#findzone .vmsn-catblock .vmsn-head { padding-left: 18.33px; margin-bottom: 26px; }
/* 丸の三日月：コスプレTOPの藤色 rgb(211,190,229) → サンタはピンク rgb(251,130,139)（実測） */
:is(#findzone, #vmsn-ov) .vmtop-cat-circle {
  box-shadow:
    0 0 0 1px rgb(251, 130, 139),
    -5px -5px 0 1px rgb(251, 130, 139),
    -4px -4px 8px 1px rgba(90, 100, 120, .22);
}
.vmtop-cat-circle .vmsn-cat-pop {
  /* 丸で切らない上乗せの画像（santa2026.js の CATS で pop: true のもの）。
     丸の背景と同じ位置・大きさ（内側の箱いっぱい・center top/cover）なので、丸の中では絵がぴったり重なる。
     丸の外側の絵は白い線の上にも描かれる（帽子が線をまたいで見える） */
  position: absolute;
  inset: 0;
  background: center top / cover no-repeat;
  pointer-events: none;
}
:is(#findzone, #vmsn-ov) .vmtop-cat:active .vmtop-cat-circle {
  box-shadow:
    0 0 0 1px rgb(251, 130, 139),
    -2px -2px 0 1px rgb(251, 130, 139),
    -1px -1px 2px 1px rgba(90, 100, 120, .14);
}
/* 順位の旗：赤 rgb(239,30,67)・16.33x19.00・下にV字の切り込み3.00。白い明朝の数字。
   位置は白い円の上端より3.33上・右端より6.67内側（丸は border 2px なので、その内側からの値に直してある） */
:is(#findzone, #vmsn-ov) .vmtop-cat-rank.vmsn-cat-rank {
  top: -5.33px;
  right: 4.67px;
  width: 16.33px;
  height: 19px;
  padding-bottom: 3px;
  background: rgb(239, 30, 67);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 84%, 0 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  font-family: "Times New Roman", Times, serif;
  font-size: 11px;
  font-weight: 400;
  line-height: 1;
  color: #fff;
}
:is(#findzone, #vmsn-ov) .vmsn-catblock .vmtop-cat-grid { margin-bottom: 26px; }

/* ---- 10・11 バナー（全部見る／セール）----
   デザインから地色ごと書き出した全幅の画像（1080幅）。左右の余白も画像に入っているので、
   .vmtop-sec の padding 5px を打ち消して端まで置く。
   実測 帯の下の山 → 画像の上端 30.67（画像の中の余白込み）。2枚は画像どうしで隙間なく続く */
#findzone .vmsn-bnr {
  display: block;
  margin: 0 -5px;
}
#findzone .vmsn-bnr img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---- 12 Ranking ----
   実測（アートボード1、÷3済み）:
     セールのバナー（書き出しの下端）→ アイコン上端 22.00 ／ アイコン x19.67
     タブ 2列×2段。下線は文字幅ではなくマスいっぱい（幅154.00・高3.00・列の間18.00・左右11.00）
       選択中 rgb(223,20,65)／ほか rgb(244,186,199)。文字は明朝 rgb(70,70,70)・字幅から12.3px
       文字の下端 → 下線 10.00 ／ 下線 → 次の段の文字 24.33 ／ 2段目の下線 → カード 28.00
     カードはコスプレTOPと同じ（3列・4:5）。最初は3行＝9位まで（santa2026.js の RANK_FIRST） */
:is(#ranking, #ranking-ov).vmsn { padding: 22px 4.67px 32px 5.33px; }
:is(#ranking, #ranking-ov).vmsn .vmsn-head { padding-left: 14.33px; margin: 0 0 25.67px; }
:is(#ranking, #ranking-ov) .vmsn-rank-tabs {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 24.33px 18px;
  padding: 0 11px;
  margin-bottom: 28px;
}
:is(#ranking, #ranking-ov) .vmsn-rank-tabs .vmtop-rank-tab,
:is(#ranking, #ranking-ov) .vmsn-rank-tabs .vmtop-rank-tab.on {
  width: 100%;
  padding: 0 0 10px;
  border-bottom: 3px solid rgb(244, 186, 199);
  font-family: "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "Noto Serif JP", serif;
  font-size: 12.3px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  color: rgb(70, 70, 70);
  white-space: nowrap;
}
:is(#ranking, #ranking-ov) .vmsn-rank-tabs .vmtop-rank-tab.on { border-bottom-color: rgb(223, 20, 65); }
/* 納期バッジ（即納・予約・一部予約）は3つとも赤（2026-10-09 修正依頼。見本の画像から実測 rgb(223,20,65)＝選択中のタブと同じ赤） */
:is(#ranking, #ranking-ov) .vmtop-rank-badge { background: rgb(223, 20, 65); }
:is(#ranking, #ranking-ov) .vmsn-rank-tabs .vmtop-rank-tab.on::after { display: none; }   /* コスプレTOPの短い下線は使わない */

/* ---- ヘッダーの検索オーバーレイ（santa2026/header/ov_search・ov_category・ov_ranking）----
   中身は本文の検索・カテゴリ・ランキングと同じ見た目（上の各ブロックが #vmsn-ov / #ranking-ov にも効く）。
   ここはオーバーレイだけの差分。
   ★✕（.close-btn）は top:10px right:10px の 60×60 で上に乗っている。一番上に来るブロックは
     ✕の下端（約70px）より下から始める（タップしたつもりで閉じないように）。
     カテゴリが一番上のときは、帯の上の波（14.33px）ぶんも下げる */
.vmsn-ov .vmtop-search-ovwrap { padding: 72px 5px 0; }
.vmsn-ov .vmtop-search-ovwrap .vmtop-search { margin-bottom: 0; }
/* 帯は画面の端まで。.search-area の padding（画面幅の2%）を打ち消す。
   margin の % は親の中身の幅（画面幅の96%）が基準なので 2 ÷ 96 = 2.0833% */
/* ★PCではオーバーレイが広く、マイナスの margin のままだと .vmtop の margin:0 auto が消えて
     帯（max-width 640px）が左に寄った（2026-10-08）。max() で、広い画面では左右の余り÷2 を取って中央に置く */
#vmsn-ov .vmsn-catblock { margin: 44px max(-2.0833%, calc((100% - 640px) / 2)) 30px; }
#vmsn-ov .vmsn-catblock .vmsn-head { padding-left: 7.33px; margin-bottom: 26px; }   /* アイコンの実測 x7.33 */
/* 丸の列の左右の余白。本文は帯が左右11pxずつ画面の外へはみ出していて、そのぶん列が広い。
   同じ余白（左14.67・右19.68）だと1列83pxで「ラグジュアリー」「ドレス・ワンピ」（88px要る）が
   2行に折り返した（390px幅）。左7・右5にして1列88.5px */
#vmsn-ov .vmsn-catblock .vmtop-cat-grid { padding: 0 5px 0 7px; }
/* 389px 以下（iPhone SE・mini など）では1列が 88px に届かず、本文もオーバーレイも上の2つが2行になる
   （375px 幅で1列 84.7px。2026-10-09 実測）。字間 .05em をなくして 84px に収め、折り返さない */
@media (max-width: 389px) {
  :is(#findzone, #vmsn-ov) .vmsn-catblock .vmtop-cat-name { letter-spacing: 0; white-space: nowrap; }
}
/* 「すべてのカテゴリを見る」ボタンを外した（2026-10-09 修正依頼）。ボタンとの間の 26px が下に余るので、
   丸の列が最後の要素のときだけ消す（ボタンを戻せば自動で元に戻る） */
:is(#findzone, #vmsn-ov) .vmsn-catblock .vmtop-cat-grid:last-child { margin-bottom: 0; }
/* 名前が8文字以上のカテゴリ（「コスプレ/サンタ」）は、390px 幅の1列 84.7px に収まらず2行になった。
   字を11px・字間なしにして1行に（2026-10-09。class は santa2026.js が付ける） */
:is(#findzone, #vmsn-ov) .vmsn-catblock .vmtop-cat-name.vmsn-cat-long { font-size: 11px; letter-spacing: 0; white-space: nowrap; }
#vmsn-ov.vmsn-ov-catfirst .vmsn-catblock { margin-top: 86px; }
#vmsn-ov.vmsn-ov-catfirst .vmtop-search-ovwrap { padding-top: 0; }
#ranking-ov.vmsn { padding-top: 32px; }
/* 順位の数字（本文は #vmtop-rank-top3 / -rest への指定で塗り分けているので、-ov にも同じ値を当てる） */
#vmtop-rank-top3-ov .vmtop-rank-no { width: 20px; height: 20px; font-size: 10px; background: rgb(142, 101, 142); }
#vmtop-rank-rest-ov .vmtop-rank-no { background: rgba(255, 255, 255, .92); color: #3a3a3e; box-shadow: none; font-size: 10px; }

/* ---- 13 カタログ（VME. collection）----
   比較ボードのモック（確定レイアウト）13 の値をそのまま。
   紙の地（--vm-paper）は cosplay2026.css の :root にある。
   reset.css が div/span/a に Jost を直接当てるので、文字を出す要素それぞれに書体を書く */
.vmsn-cat {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
  padding: 0 0 28px;
  background: rgb(246, 244, 245);   /* 実測（アートボード7の地） */
  box-sizing: border-box;
}
.vmsn-cat p { margin: 0; }
/* 見出し：本番デザイン（アートボード7）の実測。位置は全部「帯の上端・画面の左端」からの値（÷3済み）
     VME. collection（画像）x14.57 y22.00 幅240.33 ／ バーコード（画像）右から9.23 y31.33 幅49.20
     和文 x15.00 字面の上端60.67 字幅141.33（明朝 11.44px）
     英文 x14.00 y80.67 字幅220.33（Times イタリックだと5.5px。読めないので6px）
     罫線 y91.33（1px）・y106.33（細線）x14.67〜右8.33 ／ Costume・2026 字面の上端95.33
   文字色はどれも rgb(74,79,90) */
.vmsn-cat-head { position: relative; height: 107px; }
.vmsn-cat-head img { position: absolute; display: block; height: auto; }
.vmsn-cat .vmsn-cat-ttl { left: 14.57px; top: 22px; width: 240.33px; }
.vmsn-cat .vmsn-cat-bc  { right: 9.23px; top: 31.33px; width: 49.2px; }
.vmsn-cat .vmsn-cat-s, .vmsn-cat .vmsn-cat-e, .vmsn-cat .vmsn-cat-meta { position: absolute; line-height: 1; color: rgb(74, 79, 90); white-space: nowrap; }
.vmsn-cat .vmsn-cat-s { left: 15px; top: 59.9px; font-family: "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "Noto Serif JP", serif; font-size: 11.44px; font-weight: 400; }
.vmsn-cat .vmsn-cat-e { left: 14px; top: 80px; font-family: "Times New Roman", Times, serif; font-style: italic; font-size: 6px; font-weight: 400; }
.vmsn-cat-rule, .vmsn-cat-rule2 { position: absolute; left: 14.67px; right: 8.33px; background: #2a2a2a; }
.vmsn-cat-rule  { top: 91.33px; height: 1px; }
.vmsn-cat-rule2 { top: 106.33px; height: 1px; transform: scaleY(.5); transform-origin: top; }
.vmsn-cat .vmsn-cat-meta { left: 15px; right: 10.67px; top: 93.4px; display: flex; justify-content: space-between; color: rgb(51, 43, 41); }
.vmsn-cat .vmsn-cat-meta span { font-family: "Times New Roman", Times, serif; font-size: 10.5px; font-weight: 400; letter-spacing: .02em; }
/* 誌面：4:5の枠に重ねて置き、.on の1枚だけ見せる。
   めくりの動きはモック（確定レイアウト）13 と同じ（2026-10-08 指示）：
   枠に奥行き（perspective 900px）を付け、裏の誌面は左端を軸に -14度 傾けて透明にしておく。
   .on になると 0.5秒 で正面へ戻りながら浮かび上がる＝左綴じの本をめくったように見える */
.vmsn-cat-book {
  position: relative;
  overflow: hidden;
  margin: 14px 14px 0;
  aspect-ratio: 4 / 5;   /* サンタの誌面は 1080x1350。3:4 だと上下が切れる */
  border-radius: 2px;
  background: #ece3e8;
  box-shadow: 0 1px 6px rgba(60, 45, 70, .16);
  perspective: 900px;
}
.vmsn-cat-book img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: rotateY(-14deg);
  transform-origin: left center;
  transition: opacity .5s, transform .5s;
}
.vmsn-cat-book img.on { opacity: 1; transform: none; }
/* リンク付きの誌面（9〜12枚目）。重なっている裏の誌面を押してしまわないよう、表の1枚だけ押せる（.on は santa2026.js） */
.vmsn-cat-book a.vmsn-cat-pg { position: absolute; inset: 0; display: block; pointer-events: none; }
.vmsn-cat-book a.vmsn-cat-pg.on { pointer-events: auto; z-index: 1; }
/* サムネイル6個×2段（1列だと1個25pxで小さすぎる）＋右に「カタログを見る」 */
.vmsn-cat-ctrl { display: flex; align-items: center; gap: 9px; margin: 12px 14px 0; }
.vmsn-cat-thumbs { flex: 1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; }
.vmsn-cat-th {
  width: 100%;
  aspect-ratio: 71 / 76;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 2px;
  background: #e6dde3 center top / cover no-repeat;
  cursor: pointer;
  transition: transform .25s, box-shadow .25s;
}
.vmsn-cat-th.on { border-color: #a94e82; }
/* 今の誌面のサムネイル（と、マウスを乗せたもの）は少し持ち上がって傾く（モック 13 と同じ） */
.vmsn-cat-th.on, .vmsn-cat-th:hover { transform: translateY(-4px) rotate(-3deg); box-shadow: 0 8px 18px rgba(60, 40, 70, .18); }
/* 動きを減らす設定の端末では、めくり・持ち上がりの動きを止める（モックと同じ） */
@media (prefers-reduced-motion: reduce) {
  .vmsn-cat-book img, .vmsn-cat-th { transition: none; }
  .vmsn-cat-book img { transform: none; }
}
.vmsn-cat a.vmsn-cat-cta, .vmsn-cat a.vmsn-cat-cta:hover {
  flex: none;
  padding: 8px 14px;
  border-radius: 2px;
  background: #67616d;
  color: #fff;
  font-family: "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: .06em;
  text-decoration: none;
}

/* ---- 14 New Avenue ----
   実測（アートボード7）: 白地（→ ランキングと同じ #fcf8fa に変更）。帯の上端 → ツリーの上端15.00（x7.00）／ ツリーの下端 → カード8.67
   カードと「新作を全部見る」はコスプレTOPのまま ／ ボタンの下 → Message の帯 約55 */
#new.vmsn { padding: 15px 4.67px 55px 5.33px; background: #fff; }   /* デザインどおり白（2026-10-07 にランキングと同じ #fcf8fa にしたが、2026-10-08 の指示で白に戻した） */
#new.vmsn .vmsn-head { padding-left: 1.67px; margin: 0 0 8.67px; }
/* slick の土台（slick.css の必要なところだけ。2026-10-07）。
   テストページのレイアウトは slick.css を読んでいなかった。無いとスライドが横に並ばず（display:inline のまま）、
   画像の幅の基準がスライド（170px）ではなく帯全体（1700px）になって、新作の写真が10倍に拡大されていた。
   レイアウトが slick.css を読んでいても同じ値なので、二重になっても壊れない */
#new .slick-slider { position: relative; display: block; box-sizing: border-box; user-select: none; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
#new .slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; }
#new .slick-slider .slick-track, #new .slick-slider .slick-list { transform: translate3d(0, 0, 0); }
#new .slick-track { position: relative; top: 0; left: 0; display: block; margin-left: 0; margin-right: 0; }
#new .slick-track::before, #new .slick-track::after { content: ""; display: table; }
#new .slick-track::after { clear: both; }
#new .slick-slide { float: left; height: 100%; min-height: 1px; display: none; }
#new .slick-initialized .slick-slide { display: block; }

/* ---- 15 Message（SNS・SEOテキスト・うさぎの帯）----
   実測（アートボード7、÷3済み。帯の上端から）:
     地はほぼ白の細かいざらつき（平均 rgb(246,246,246)）。2026-10-06 に支給の見本画像で確認。
       ★PDFを poppler で描画すると紙の写真の重ね方（合成モード）が再現されず、灰色 rgb(204,202,200) に
         なっていた。PDFの描画結果ではなく見本の色に合わせてある
       tex_light.webp を敷き詰める。支給の見本画像（6.02倍で書き出されたもの。Instagram 127px＝21.10）の
       何も無いところ 1158x460 を切り出し、4倍（772x307）に縮めたもの → 表示は 192.33 x 76.33
     SNSアイコン 中心の高さ57.78（並びと大きさはコスプレTOPの .vmtop-sns に合わせた。2026-10-07）
     Message（書き出し画像）x88.00 上端161.23 幅166.00
     h2 上端241.00 ／ 本文 x40.33〜321.00・行送り20.00・色 rgb(60,58,59)
     うさぎ x142.67 幅76.67・下の赤い帯に6.00かぶる ／ 赤い帯 高さ40.67・rgb(209,40,72) */
.vmsn-foot {
  --vmsn-tex: url('https://vanityme.itembox.cloud/item/images/santa2026/parts/tex_light.webp');
  position: relative;
  max-width: 640px;
  margin: 0 auto;
  padding: 0;
  display: flow-root;   /* 中の margin が外へ抜けて、パーツの間に地色の無い隙間が出ないように */
  background: rgb(246, 246, 246) var(--vmsn-tex) 0 0 / 192.33px 76.33px repeat;
  color: rgb(60, 58, 59);
  box-sizing: border-box;
}
.vmsn-foot * { box-sizing: border-box; }
/* 15・16・17 は別パーツ（2026-10-07。Message＝16 は下層ページで非表示にするため）。
   余白はパーツごとに持たせて、16 が無いとき（SNS → うさぎの帯）でも詰まらないようにしてある */
.vmsn-foot-sns { padding-top: 40.78px; }   /* SNSボタン（高さ34）の中心が57.78に来る */
.vmsn-foot-end { padding-top: 104px; }     /* 本文（または SNSボタン）の下端 → 赤い帯の上端。うさぎ（高さ約83）が乗る */
/* SNSボタンはコスプレTOPの .vmtop-sns（34px・間28px・cosplay2026.css）をそのまま使う。
   中心の高さはデザインの実測57.78に合わせる（上端 57.78 − 17 = 40.78） */
.vmsn-foot .vmsn-msg { margin: 86.45px 0 0 calc(50% - 92px); line-height: 0; }   /* SNSボタンの下端74.78 → Message 上端161.23 */
.vmsn-msg img { display: block; width: 166px; height: auto; }
.vmsn-seo { padding: 33px 39px 0 40.33px; }
.vmsn-seo h2, .vmsn-seo h3, .vmsn-seo p {
  margin: 0;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "Noto Serif JP", serif;
  font-weight: 400;
  color: rgb(60, 58, 59);
}
/* 字の大きさは見本画像（2026-10-06）に合わせた。字幅から解いた値:
     h2「サンタコス・クリスマスコスプレならvanityME.」277.00 → 12.73px（14pxだと360px幅で折り返した）
     h3「色・小物・価格帯から選ぶ」163.00 → 13.59px
     本文 1行目 280.67 → 9.0px・行送り20.00（★小さいので、読みにくければここを上げる） */
.vmsn-seo h2 { font-size: 12.75px; line-height: 1.5; letter-spacing: 0; white-space: nowrap; }
.vmsn-seo h3 { margin-top: 30px; font-size: 13.6px; line-height: 1.5; letter-spacing: 0; }
.vmsn-seo p { margin-top: 13px; font-size: 9px; line-height: 20px; letter-spacing: 0; text-align: justify; }
.vmsn-foot-bar {
  position: relative;
  height: 40.67px;
  background: rgb(209, 40, 72);   /* 見本画像の実測。ざらつき無しの単色 */
}
.vmsn-foot .vmsn-bunny {
  position: absolute;
  left: calc(50% - 37.33px);
  bottom: 34.67px;
  z-index: 1;
  display: block;
  width: 76.67px;
  height: auto;
}
.vmsn-foot .vmsn-foot-line {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;   /* 幅の広い画面でも3つを中央に寄せる（2026-10-06 指示） */
  gap: 20px;                 /* 実測の間隔 ］→LADY 18.67 / LADY→Costume 21.33 の平均 */
  height: 100%;
  margin: 0;
  padding: 0 10px;
  white-space: nowrap;
}
.vmsn-foot-line span, .vmsn-foot-line b, .vmsn-foot-line i { font-family: "Times New Roman", Times, serif; font-weight: 400; line-height: 1; }
.vmsn-foot-line .vmsn-fb-c { display: flex; align-items: center; }
.vmsn-foot-line .vmsn-fb-c b { font-size: 12px; color: rgba(255, 255, 255, .6); }
.vmsn-foot-line .vmsn-fb-c i { margin: 0 14px 0 12.5px; font-style: italic; font-size: 12.5px; color: rgba(255, 255, 255, .92); }
.vmsn-foot-line .vmsn-fb-l { font-size: 6px; letter-spacing: .75px; color: rgba(255, 255, 255, .88); }
.vmsn-foot-line .vmsn-fb-r { font-style: italic; font-size: 11.5px; color: rgba(255, 255, 255, .92); }

/* ---- 02 お届け期限バー（3段階）・03 クリスマス直前の受け皿 ----
   ①当日発送 ②クリスマス期限 ③まだ間に合う＋受け皿 は別々のフリーパーツ（02a_deliv_shipping /
   02b_deliv_christmas / 02c_still_in_time）。表示の切り替えは管理画面で手動（日付で自動にはしない）。
   色・余白は比較ボードのモック②③の値。文字はモックが 8〜10.5px と小さいので、
   スマホで読めるよう各1〜1.5px上げた（モック値はコメントに残す）。デザイン確定で差し替え予定 */
.vmsn .vmsn-deliv {
  display: block;
  box-sizing: border-box;
  padding: 11px 16px;
  background: #a8423f;           /* 12/1〜 クリスマス期限：濃い赤 */
  color: #fff;
  text-align: center;
  text-decoration: none;
}
.vmsn-deliv span { display: block; font-family: "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif; font-weight: 400; }
.vmsn-deliv .vmsn-deliv-l { margin-bottom: 3px; font-family: "Space Mono", ui-monospace, monospace; font-size: 9.5px; letter-spacing: .2em; opacity: .85; }  /* モック 8.5px */
.vmsn-deliv .vmsn-deliv-m { font-size: 13.5px; line-height: 1.6; }   /* モック 12.5px */
.vmsn-deliv .vmsn-deliv-m b { font-weight: 700; }
.vmsn-deliv .vmsn-deliv-s { margin-top: 2px; font-size: 11px; opacity: .8; }   /* モック 10px */
/* 11/1〜 当日発送：薄い帯 */
.vmsn .vmsn-deliv-lite { background: #f8e2ee; color: #594057; border-bottom: 1px solid #f0d3e2; }
.vmsn-deliv-lite .vmsn-deliv-l { color: #c0588f; opacity: 1; }
.vmsn-deliv-lite .vmsn-deliv-m b { color: #8d3b64; }
/* 12/23〜 まだ間に合う：点線の枠 */
.vmsn .vmsn-deliv-late { margin: 6px 12px 0; border: 1px dashed #c0588f; border-radius: 8px; background: #fffdfe; color: #594057; }
.vmsn-deliv-late .vmsn-deliv-l { color: #c0588f; opacity: 1; }

.vmsn-after {
  margin: 10px 16px 22px;
  padding: 15px 15px 17px;
  border: 1px dashed #c0588f;
  border-radius: 8px;
  background: #fffdfe;
  scroll-margin-top: 110px;      /* バーから飛んだとき固定ヘッダーの下に隠れないように */
}
.vmsn-after p, .vmsn-after li, .vmsn-after a { font-family: "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif; font-weight: 400; }
.vmsn .vmsn-after-l { margin-bottom: 7px; font-family: "Space Mono", ui-monospace, monospace; font-size: 9px; letter-spacing: .16em; color: #c0588f; }  /* モック 8px */
.vmsn .vmsn-after-h { margin-bottom: 5px; font-size: 14px; font-weight: 500; line-height: 1.6; color: #524963; }   /* モック 12.5px */
.vmsn .vmsn-after-p { margin-bottom: 10px; font-size: 12px; line-height: 1.75; color: #7d7488; }   /* モック 10.5px */
.vmsn .vmsn-after ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.vmsn .vmsn-after li a {
  display: block;
  padding: 9px 11px;
  border-radius: 5px;
  background: #f8e2ee;
  color: #594057;
  font-size: 12px;               /* モック 10.5px */
  line-height: 1.5;
  text-decoration: none;
}

/* ============================================================
   下層ページ：商品一覧の上のカテゴリ（santa2026/lower/cats.html。中身は santa2026.js の initLowerCats）
   コスプレの下層ページと同じ 2段の横スクロール（common2020.css の .recommends .carousel）。
   丸の幅は 2025版の下層（ul.top_cat li a .recommend-img { width: 80px }）と同じ
============================================================ */
#vmsn-lowcats ul.top_cat li a .recommend-img { width: 80px; }
#vmsn-lowcats .vmsn-lowcats-none { display: inline-block; height: 80px; border-radius: 50%; background: #f1efe9; vertical-align: top; }

/* ============================================================
   商品詳細：「ランキングTOP50を見る」（.bt_viewmores_santa。独自コメント欄）
   すぐ上の「サンタコスプレ全部見る」（common2020.css の .bt_viewmores_02 a）と同じ見た目にする。
   値は common2020.css 2607〜2650行の写し（枠1px #333・字間0.3em・右に＞・PCは最大378px）
============================================================ */
.bt_viewmores_santa a {
  display: block;
  position: relative;
  width: 90%;
  margin: auto;
  padding: .6em 0;
  border: solid 1px #333;
  color: #333;
  font-size: .8rem;
  letter-spacing: .3em;
  text-align: center;
  text-decoration: none;
}
.bt_viewmores_santa a::after {
  content: "";
  position: absolute;
  top: 47%;
  right: 10%;
  width: 10px;
  height: 10px;
  border-top: 1px solid #333;
  border-right: 1px solid #333;
  transform: rotate(45deg) translateY(-50%);
}
@media screen and (min-width: 769px) {
  .bt_viewmores_santa a { max-width: 378px; }
}