/*
 * 全体方針の土台（2026-10-13、改修要望書 0章 / A1〜A4）
 * PTK決定: 案B。商品画像は角丸16pxだけ（枠・影なし）、ボタンは黒枠、押す場所だけずらし影。
 * ページ色（--page-color）は functions.php の paleri_page_color_vars() が色ページ・商品ページで body に入れる。
 * 他のCSSより後に読み込む（依存: paleri-niko-pages）。
 */
:root{--nb-ink:#030303;--nb-bw:2px;--nb-shadow:3px 3px 0 #030303;--img-r:16px}
body{--page-color:#3cbdab;--page-text:var(--page-color);--page-ink:#030303}

/* A2: 商品画像は角丸16px（一覧・関連・ランキング・商品ページ・特集） */
.card__img,.paleri-ranking__image,.gallery__main,.paleri-feature-item-card__media{border-radius:var(--img-r)!important;overflow:hidden!important}
.gallery__main img,.paleri-feature-item-card__media img{border-radius:0!important}

/* A1・A3: ボタンは黒枠で統一。押す場所（購入・絞り込む・もっと見る）だけずらし影 */
.shop,.ccode button,.home-hex button,.price__apply,.msheet__go,.morebtn__link,.paleri-ranking__more,.fab{border:var(--nb-bw) solid var(--nb-ink)!important;box-shadow:var(--nb-shadow)!important}
.toolbar select,.sort__select,.home-sort select,.home-filter-toggle,.price__clear,.msheet__reset,.msheet__close,.color-kids a,.catalog-sort__button{border:var(--nb-bw) solid var(--nb-ink)!important}
.shop,.ccode button,.home-hex button,.price__apply,.msheet__go,.morebtn__link,.paleri-ranking__more,.fab{transition:background-color .2s,color .2s,transform .12s,box-shadow .12s}
.shop:active,.ccode button:active,.home-hex button:active,.price__apply:active,.msheet__go:active,.morebtn__link:active,.fab:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--nb-ink)!important}

/* A4: ページ色連動。アクセント（--pop-teal）をページ色に差し替える */
body{--pop-teal:var(--page-color)}
.shop:hover,.shop:focus-visible{background:var(--page-color)!important;color:var(--page-ink)!important}
.shop:hover *,.shop:focus-visible *{color:inherit!important}
.price__fill{background:var(--page-color)!important}
.ccode button{background:var(--page-color)!important;color:var(--page-ink)!important}
.prod .info__point-number::before,.prod:is([data-product-view],[data-product-embed]) .info__point-number::before,.spec__tags a::before{color:var(--page-text)!important}
.prod a:not(.shop):not(.card__hit):hover{color:var(--page-text)}
/* ニュアンスの「ビビッド・くすみ」の丸をページ色で描く（色ページのみ。ほかのページは今までのミント） */
body.tax-paleri_color .tone-choice[data-slug=vivid]::before{background:var(--page-color)!important;background-image:none!important;border:var(--nb-bw) solid var(--nb-ink)!important;box-shadow:inset 0 0 0 3px #fff!important;border-radius:50%!important}
body.tax-paleri_color .tone-choice[data-slug=kusumi]::before{background:color-mix(in oklch,var(--page-color) 45%,#8f8f8f)!important;background-image:none!important;border:var(--nb-bw) solid var(--nb-ink)!important;box-shadow:inset 0 0 0 3px #fff!important;border-radius:50%!important}
@media(prefers-reduced-motion:reduce){.shop,.ccode button,.home-hex button,.price__apply,.msheet__go,.morebtn__link,.paleri-ranking__more,.fab{transition:none}}

/* E1: 商品ページの背景を、その商品の色のパステルに（ページ色は page-product.php が入れる）。
   薄い色でも濃い色でも同じ明るさのパステルになるよう、色相だけ残して明るさ95%・鮮やかさ控えめにそろえる */
body.is-product-detail{--page-bg:color-mix(in srgb,var(--page-color) 15%,#fff)}
@supports (color:oklch(from red l c h)){body.is-product-detail{--page-bg:oklch(from var(--page-color) .955 min(calc(c * .6),.05) h)}}
body.is-product-detail,body.is-product-detail main.subpage,body.is-product-detail main.subpage>.wrap{background:var(--page-bg)!important}

/* D7: 色ページの子色チップは背景と同系色で見づらかった → 白地＋黒枠。選択中は黒地 */
.pc-hero .color-kids a{background:#fff!important;color:#030303!important}
.pc-hero .color-kids a:hover{background:#f4f4f4!important}
.pc-hero .color-kids a[aria-current="page"]{background:#030303!important;border-color:#030303!important;color:#fff!important}
.pc-hero .color-kids a i{box-shadow:inset 0 0 0 1px rgba(3,3,3,.2)!important}
.pc-hero .color-kids a[aria-current="page"] i{box-shadow:0 0 0 1.5px #fff!important}

/* D8: スマホの色の列は横にスクロールできると分かるよう、端に ‹ › を出す（端まで来たら消える。color-immersion.js が is-start / is-end を付ける） */
@media (max-width:1023px){
 .pc-spec{position:relative}
 .pc-spec::before,.pc-spec::after{position:absolute;top:30px;z-index:2;display:grid;place-items:center;width:26px;height:26px;border:var(--nb-bw) solid var(--nb-ink);border-radius:50%;background:#fff;color:var(--nb-ink);font:700 16px/1 Jost,sans-serif;pointer-events:none;transition:opacity .2s}
 .pc-spec::before{content:"‹";left:6px}
 .pc-spec::after{content:"›";right:6px}
 .pc-spec.is-start::before,.pc-spec.is-end::after{opacity:0}
}

/* 一覧の「もっと見る」（page-search.php・2026-10-13） */
.catalog-more{display:flex;flex-direction:column;align-items:center;gap:10px;margin:48px 0 8px}
.catalog-more .morebtn__link{display:inline-flex;align-items:center;gap:10px;padding:14px 30px;border-radius:999px;background:#fff;color:var(--nb-ink);font-size:14px;font-weight:700;text-decoration:none}
.catalog-more .morebtn__link::after{content:"↓";font-family:Jost,sans-serif}
.catalog-more .morebtn__link:hover{background:var(--page-color);color:var(--page-ink)}
.catalog-more .morebtn__link[aria-busy=true]{opacity:.6;pointer-events:none}
.catalog-more__rest{margin:0;font-size:12px;color:#6e6e6e}

/* D1〜D4: スマホの「探す」メニュー（2026-10-13、PTK選択 ボタンA・並び1・かぶせる型）
   ボタン＝ページ色＋黒枠＋ずらし影（開いている間は押し込まれた状態）、≡ は開くと × になる。
   メニューはページの上にかぶせて開き、後ろを暗くする（開閉の動きは paleri-home.js）。英字と日本語は二段に分ける */
@media (max-width:767px){
 .mast .menu-ico{gap:9px;width:auto;height:44px;padding:0 16px 0 18px;border:var(--nb-bw) solid var(--nb-ink);background:var(--page-color);color:var(--nb-ink);box-shadow:var(--nb-shadow);font:700 13px/1 'Zen Kaku Gothic New',sans-serif;transition:background-color .2s,color .2s,transform .12s,box-shadow .12s}
 body.tax-paleri_color .mast .menu-ico{background:#fff;color:var(--nb-ink);border-color:var(--nb-ink)}
 .mast .menu-ico[aria-expanded=true]{transform:translate(3px,3px);box-shadow:0 0 0 var(--nb-ink)}
 .mast .menu-ico>span:first-child{transform:translateY(1px)}
 .menu-ico__bars{position:relative;display:block;flex:none;width:14px;height:10px}
 .menu-ico__bars i{position:absolute;left:0;width:100%;height:2px;border-radius:2px;background:currentColor;transition:transform .34s cubic-bezier(.22,1,.36,1),opacity .2s}
 .menu-ico__bars i:nth-child(1){top:0}.menu-ico__bars i:nth-child(2){top:4px}.menu-ico__bars i:nth-child(3){top:8px}
 .menu-ico[aria-expanded=true] .menu-ico__bars i:nth-child(1){transform:translateY(4px) rotate(45deg)}
 .menu-ico[aria-expanded=true] .menu-ico__bars i:nth-child(2){opacity:0}
 .menu-ico[aria-expanded=true] .menu-ico__bars i:nth-child(3){transform:translateY(-4px) rotate(-45deg)}

 .mast{position:relative;z-index:80}
 .mast>.navdrawer{position:absolute;left:0;right:0;top:100%;margin:0!important;padding:16px 0 26px;border-top:var(--nb-bw) solid var(--nb-ink);border-bottom:var(--nb-bw) solid var(--nb-ink);background:inherit}
 .navdrawer-shade{position:fixed;inset:0;z-index:79;background:rgba(3,3,3,.35);opacity:0;pointer-events:none}
 .navdrawer-shade.is-on{pointer-events:auto}
 .navdrawer .searchbar{border:var(--nb-bw) solid var(--nb-ink)!important;margin-bottom:10px}
 .navdrawer__nav a{position:relative;display:flex;flex-direction:column;gap:5px;padding:15px 44px 15px 4px;border-bottom:1px solid rgba(3,3,3,.15);color:var(--nb-ink);text-decoration:none}
 .navdrawer__nav a:last-child{border-bottom:none}
 .navdrawer__nav a span{font:700 20px/1.1 Jost,sans-serif;letter-spacing:.02em}
 .navdrawer__nav a small{font:500 11px/1.4 'Zen Kaku Gothic New',sans-serif;letter-spacing:.04em;color:#555}
 .navdrawer .searchbar,.navdrawer .searchbar input{color:var(--nb-ink)!important}
 .navdrawer .searchbar input::placeholder{color:#8a8a8a!important}
 body.tax-paleri_color .navdrawer__nav a{color:var(--on-tint)}
 body.feature-header-custom .navdrawer__nav a{color:var(--feature-header-ink,var(--nb-ink))}
 body.tax-paleri_color .navdrawer__nav a small{color:inherit;opacity:.75}
 .navdrawer__nav a::after{content:"→";position:absolute;right:4px;top:50%;display:grid;place-items:center;width:30px;height:30px;margin-top:-15px;border:var(--nb-bw) solid currentColor;border-radius:50%;font:600 14px/1 Jost,sans-serif}
}
@media(prefers-reduced-motion:reduce){.mast .menu-ico,.menu-ico__bars i{transition:none}}

/* D10・D9・シートの色（2026-10-13、PTK選択）: 色の世界観に浸りながら探せるよう、絞り込みもページ色に染める。
   ボタン＝案A（ページ色＋黒枠＋ずらし影）＋じょうごのアイコン。カテゴリ＝親ごとの開閉式（paleri-home.js） */
.fab{height:50px;padding:0 16px 0 18px;gap:8px;background:var(--page-color);color:var(--page-ink);font:700 14px/1 'Zen Kaku Gothic New',sans-serif}
.fab__ico{display:block;flex:none;width:15px;height:15px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 2.5h13l-5 6v5l-3-1.5V8.5z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 2.5h13l-5 6v5l-3-1.5V8.5z'/%3E%3C/svg%3E") center/contain no-repeat}
.fab__n{min-width:18px;padding:0 6px;border-radius:99px;background:var(--page-ink);color:var(--page-color);font:700 11px/18px Jost,sans-serif}

.msheet__panel{border:var(--nb-bw) solid var(--nb-ink);border-bottom:0;background:var(--page-color);overflow:hidden}
.msheet__grab{background:color-mix(in srgb,var(--page-ink) 35%,transparent)}
.msheet__head{border-bottom:var(--nb-bw) solid var(--nb-ink)}
.msheet__head,.msheet__head .en{color:var(--page-ink)!important}
.msheet__close{background:#fff;color:var(--nb-ink)!important}
.msheet__body,.msheet__foot{background:#fff}
.msheet__body .fsec__h .sq{background:var(--page-color)!important;border-color:var(--nb-ink)}
.msheet__go{background:var(--page-color)!important;color:var(--page-ink)!important}
.msheet__body .fchipbtn.is-on:not(.tone-choice){background:var(--page-color);color:var(--page-ink)!important;border-color:var(--nb-ink)}

.fgrps{display:flex;flex-direction:column;gap:8px}
.fgrp{border:var(--nb-bw) solid var(--nb-ink);border-radius:14px;background:#fff;overflow:hidden}
.fgrp__h{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:13px 14px;background:none;border:0;color:var(--nb-ink);font:700 14px/1.2 'Zen Kaku Gothic New',sans-serif;text-align:left}
.fgrp__h small{display:inline-block;vertical-align:1px;margin-left:8px;font:500 11px/1 'Zen Kaku Gothic New',sans-serif;color:#777}
.fgrp__h small.is-picked{display:inline-block;padding:3px 8px;border-radius:99px;background:var(--page-color);color:var(--page-ink);font-weight:700}
.fgrp__h b{flex:none;width:9px;height:9px;margin-right:4px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.fgrp.is-open .fgrp__h{border-bottom:1px solid rgba(3,3,3,.15)}
.fgrp.is-open .fgrp__h b{transform:translateY(2px) rotate(-135deg)}
.fgrp__h--pick.is-on{background:var(--page-color);color:var(--page-ink)}
.fgrp__body{display:none!important;flex-wrap:wrap;gap:8px;padding:12px 14px 14px}
.fgrp.is-open .fgrp__body{display:flex!important}
.fgrp__body .fchipbtn.is-all:not(.is-on){background:#f2f2f2}
@media(prefers-reduced-motion:reduce){.fgrp__h b{transition:none}}

/* D6: 一覧→一覧の移動（型 pl）は、画面全体が「じわっと」入れ替わるだけにする（PTK 10-13「飛び出すようなモーションいらない」）。
   色の帯の形が変わる動き（pc-tint）も止め、色ページの登場アニメ（タイトル・イラスト・波線・色の棒）も一覧→一覧の時は出さない。
   型 pl と html.pl-nav は functions.php の head のスクリプトが付ける */
:root:active-view-transition-type(pl) .pc-hero{view-transition-name:none}
:root:active-view-transition-type(pl)::view-transition-old(root),:root:active-view-transition-type(pl)::view-transition-new(root){animation-duration:.55s;animation-timing-function:cubic-bezier(.4,0,.2,1)}
.pl-nav .pc-hero__name>span,.pl-nav .pc-hero__jp,.pl-nav .pc-hero__meta,.pl-nav .pc-hero .lead,.pl-nav .pc-hero .color-kids,.pl-nav .pc-hero__art,.pl-nav .pc-spec__bar li,.pl-nav .pc-wave path{animation:none!important}
.pl-nav .pc-wave path{stroke-dashoffset:0!important}
@media(prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}

/* D13: カテゴリから探す（2026-10-13、PTK選択 案1・写真なし）。子カテゴリの四角はパステル、イラストが届いたら中に入る（page-categories.php） */
.catgroups{display:flex;flex-direction:column;gap:36px;margin-top:28px;padding-bottom:48px}
.catgroup{border-top:var(--nb-bw) solid var(--nb-ink);padding-top:16px}
.catgroup__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.catgroup__name{margin:0;font:700 22px/1.25 'Zen Kaku Gothic New',sans-serif;color:var(--nb-ink)}
.catgroup__name small{margin-left:10px;font:500 12px/1 Jost,sans-serif;color:#777;white-space:nowrap}
.catgroup__all{flex:none;display:inline-flex;align-items:center;height:38px;padding:0 16px;border:var(--nb-bw) solid var(--nb-ink);border-radius:99px;background:var(--page-color);color:var(--page-ink);box-shadow:var(--nb-shadow);font:700 13px/1 'Zen Kaku Gothic New',sans-serif;text-decoration:none;transition:transform .12s,box-shadow .12s}
.catgroup__all:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--nb-ink)}
.catgroup__kids{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}
@media(min-width:768px){.catgroup__kids{grid-template-columns:repeat(5,minmax(0,1fr));gap:22px 18px}}
.catkid{display:block;color:var(--nb-ink);text-decoration:none}
.catkid__tile{display:block;aspect-ratio:1;border-radius:var(--img-r);background:oklch(from var(--tile) .94 min(calc(c * .55),.06) h);overflow:hidden;transition:transform .2s}
@supports not (color:oklch(from red l c h)){.catkid__tile{background:color-mix(in srgb,var(--tile) 18%,#fff)}}
.catkid__tile img{display:block;width:100%;height:100%;object-fit:contain}
.catkid:hover .catkid__tile{transform:translateY(-3px)}
.catkid__name{display:block;margin-top:9px;font:700 14px/1.35 'Zen Kaku Gothic New',sans-serif}
.catkid__count{display:block;margin-top:3px;font:500 12px/1 Jost,sans-serif;color:#777}
@media(prefers-reduced-motion:reduce){.catkid__tile,.catgroup__all{transition:none}}

/* ===== F1〜F3 HOME ファーストビューのバナー（2026-10-13） =====
   ZOZOTOWN 型。16:9 の画像＋下に文字。PC 幅530px／スマホ 画面幅75%。どちらも1枚を画面の中央に置く（PTK 10-13）。
   矢印と点は、いまの Paleri のものを上下中央にそろえて使う。動きは paleri-home.js の §0。 */
.fvb{position:relative;overflow:hidden;padding:24px 0 8px}
.fvb__h1{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.fvb__track{display:flex;gap:30px;transform:translateX(calc(50% - 265px));touch-action:pan-y;will-change:transform}
.fvb__slide{flex:none;width:530px;display:flex;flex-direction:column;gap:20px;color:var(--nb-ink);text-decoration:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;-webkit-tap-highlight-color:transparent}
.fvb__img{display:block;aspect-ratio:16/9;border:var(--nb-bw) solid var(--nb-ink);border-radius:12px;overflow:hidden;background:#f3f3f3}
.fvb__img img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
.fvb__img--soon{display:grid;place-items:center;background:#f2f2f2;font:700 18px/1 Jost,sans-serif;letter-spacing:.12em;color:#9a9a9a}
.fvb__cap{padding:0 4px 4px;font:700 18px/1.6 'Zen Kaku Gothic New',sans-serif;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:auto-phrase}
a.fvb__slide:hover .fvb__cap{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.fvb__nav{display:flex;align-items:center;justify-content:center;gap:16px;height:24px;margin-top:36px}
.fvb__arrow{width:24px;height:24px;display:flex;align-items:center;justify-content:center;padding:0;border:0;background:none;color:var(--nb-ink);cursor:pointer}
.fvb__dots{display:flex;align-items:center;gap:9px;height:24px}
.fvb__dot{width:9px;height:9px;padding:0;border:1px solid var(--nb-ink);border-radius:50%;background:#fff;cursor:pointer}
.fvb__dot.is-on{background:var(--nb-ink)}
@media(max-width:767px){
	.fvb{padding:16px 0 4px}
	.fvb__track,.fvb.is-single .fvb__track{gap:12px;transform:translateX(12.5%)}
	.fvb__slide{width:75vw;gap:14px}
	.fvb__cap{font-size:15px}
	.fvb__nav{margin-top:26px}
	.fvb__dots{gap:9px}
	.fvb__dot{width:7px;height:7px;border:0;background:var(--nb-ink);opacity:.22}
	.fvb__dot.is-on{opacity:1}
}

/* ===== F4 このサイトについて：HOME から移したキャッチコピー＋イラスト（2026-10-13） =====
   .static-section p（灰色14px）に負けないよう、.about-intro を前に付けて強くしている */
.about-intro{display:grid;grid-template-columns:1fr minmax(0,360px);gap:24px 32px;align-items:center}
.about-intro p{margin:0}
.about-intro .about-intro__eyebrow{font:700 13px/1.4 Jost,sans-serif;letter-spacing:.04em;color:#3cbdab}
.about-intro .about-intro__msg{margin-top:14px!important;font:900 44px/1.35 'Zen Kaku Gothic New',sans-serif;color:var(--nb-ink)}
.about-intro .about-intro__tag{margin-top:16px!important;font:700 22px/1.5 'Zen Kaku Gothic New',sans-serif;color:var(--nb-ink)}
.about-intro .about-intro__lead{margin-top:12px!important;font-size:14px;line-height:1.8;word-break:auto-phrase}
.about-intro__art{margin:0}
.about-intro__art img{display:block;width:100%;height:auto}
@media(max-width:767px){
	.about-intro{grid-template-columns:1fr;text-align:center}
	.about-intro .about-intro__eyebrow{font-size:11px}
	.about-intro .about-intro__msg{font-size:30px}
	.about-intro .about-intro__tag{font-size:18px}
	.about-intro__art{max-width:300px;margin:0 auto}
}

/* 固定ページの大見出し：スマホで「このサイトについ／て」「プライバシーポリシ／ー」と1文字だけ落ちていた（2026-10-13）
   10文字が1行に入る大きさにして、改行は「・」と <wbr> の位置だけにする（収まらないときだけ途中で折る） */
@media(max-width:767px){.static-hero .static-hero__title{font-size:clamp(22px,7vw,42px);word-break:keep-all;overflow-wrap:anywhere}}

/* ランキングの「色で絞り込む」（2026-10-13）
   以前の max-width:748px（13個ぶん）のせいで、19色が 13＋6 の中途半端な位置で折り返していた。
   1列に入る幅（1140px〜）は1列。それより狭いときは折り返さず横にスクロール（下のランキングと同じ動き） */
.paleri-ranking__swatches{max-width:none}
@media(max-width:1139px){
	.paleri-ranking__swatches{display:flex;gap:6px;overflow-x:auto;margin-inline:-22px;padding:5px 22px 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
	.paleri-ranking__swatches::-webkit-scrollbar{display:none}
	.paleri-ranking__swatch{flex:0 0 52px}
}