/* ============================================================
   J-Connection — style.css
   Design : TOP SP.jpg / メニュー.jpg / ローディング.jpg コンプ準拠
   Colors : #FFFFFF / #111111 / #E5E5E5
   Fonts  : Inter + Noto Sans JP
   Icons  : Bootstrap Icons
   Mobile-first / SP基準で記述、768px〜でPC調整
   ============================================================

   INDEX
   01. Custom Properties
   02. Reset / Base
   03. Typography
   04. Page Layout
   05. Loading Screen        .p-loading
   06. Top Bar               .l-topbar
   07. Header                .l-header
   07. Info Bar              .p-infobar
   08. Header Banner         .header_banner
   09. Hero Slider           .hero_slider
   10. Section Common        .p-section
   11. Product Grid          .p-product-grid
   12. Search                .p-search
   13. Brand Grid            .p-brand-grid
   14. Category Grid         .p-cat-grid
   15. Horizontal Scroll     .p-scroll-list / .p-staff-item
   16. BEYOND COOL           .p-bc
   17. Footer                .fs-l-footer
   18. Menu Drawer           .c-menu
   19. Bottom Nav            .c-bottom-nav
   20. FutureShop System
   21. Tablet  768px
   22. PC     1024px
   23. Wide   1440px
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Noto+Sans+JP:wght@400;700&display=swap');


/* ------------------------------------------------------------
   01. Custom Properties
   ------------------------------------------------------------ */
:root {
  --color-white : #FFFFFF;
  --color-black : #111111;
  --color-gray  : #E5E5E5;
  --color-dim   : #888888;

  --font-sans   : 'Inter', 'Noto Sans JP', sans-serif;

  /* spacing */
  --sp-xs : 0.5rem;
  --sp-sm : 1rem;
  --sp-md : 1.5rem;
  --sp-lg : 2.5rem;
  --sp-xl : 4rem;

  /* コンテンツの左右余白（FS 側 style.css と同じ定義）
     ・基底（SP / タブレット縦）: --sp-sm
     ・タブレット横 / PC       : --sp-xl（下のメディアクエリで切替） */
  --content-pad-x : var(--sp-sm);

  /* font sizes（メディアクエリでの上書きはせず単一値で運用） */
  --fs-xs   : 10px;
  --fs-sm   : 11px;
  --fs-base : 13px;
  --fs-md   : 14px;
  --fs-lg   : 15px;
  --fs-xl   : 17px;
  --fs-2xl  : 20px;
  --fs-3xl  : 24px;
  --fs-4xl  : 28px;

  /* layout */
  --header-h     : 48px;
  --footer-nav-h : 56px;
  --max-w        : 1200px;
  --topbar-h     : 0px;  /* JS が INFORMATION バーの高さをセット */

  /* animation */
  --ease-out-expo : cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out   : cubic-bezier(0.76, 0, 0.24, 1);
  --transition    : 0.2s ease;
}

/* コンテンツ左右余白：タブレット横向き / PC で広げる
   （SP・タブレット縦は :root 基底の --sp-sm のまま / FS 側 style.css と同一） */
@media (min-width: 1024px),
       (min-width: 768px) and (orientation: landscape) {
  :root { --content-pad-x: var(--sp-xl); }
}


/* ------------------------------------------------------------
   02. Reset / Base
   ------------------------------------------------------------ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  /* rem 計算の基準。FS 版と同じ 16px に固定（CSS変数を当てると rem 全体が連動してしまうため） */
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-weight: 400;
  color: var(--color-black);
  background: var(--color-white);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
  transition: opacity var(--transition);
}
@media (hover: hover) and (pointer: fine) {
  a:hover { opacity: 0.6; }
}

ul, ol { list-style: none; }

button {
  cursor: pointer;
  font-family: inherit;
  background: none;
  border: none;
}

input, textarea, select {
  font-family: inherit;
}


/* ------------------------------------------------------------
   03. Typography
   ------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.3;
}


/* ------------------------------------------------------------
   04. Page Layout
   ------------------------------------------------------------ */
.fs-l-page { overflow-x: hidden; }

/* パンくず非表示（TOP） */
.fs-body-top .fs-c-breadcrumb { display: none; }

.fs-c-breadcrumb {
  padding: var(--sp-xs) var(--sp-sm);
  font-size: var(--fs-xs);
  color: var(--color-dim);
  overflow-x: auto;
  white-space: nowrap;
}

.fs-c-breadcrumb__list {
  display: flex;
  gap: 0.3rem;
  align-items: center;
}

.fs-c-breadcrumb__listItem + .fs-c-breadcrumb__listItem::before {
  content: '/';
  margin-right: 0.3rem;
  color: #ccc;
}

/* コンテンツ下余白（SP固定フッター分） */
.fs-l-pageMain,
.fs-l-main {
  padding-bottom: calc(var(--footer-nav-h) + var(--sp-lg));
}


/* ------------------------------------------------------------
   05. Loading Screen
   ------------------------------------------------------------ */
.p-loading {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1.25rem;
  transition: opacity 0.5s ease 0.1s;
  pointer-events: all;
}

.p-loading.is-done {
  opacity: 0;
  pointer-events: none;
}

/* ロゴ：clip-path で下から上へ黒がワイプして現れる */
.p-loading__logo {
  line-height: 0;
}

.p-loading__logo img {
  display: block;
  width: 200px;
  height: auto;
  clip-path: inset(100% 0 0 0);
  animation: p-loading-wipe 1.2s var(--ease-in-out) forwards 0.25s;
}

@keyframes p-loading-wipe {
  to { clip-path: inset(0% 0 0 0); }
}

/* 0〜100% カウンター */
.p-loading__count {
  font-family: 'Inter', sans-serif;
  font-size: var(--fs-xs);
  font-weight: 400;
  letter-spacing: 0.25em;
  color: var(--color-black);
  opacity: 0;
  animation: p-loading-fade 0.4s ease forwards 0.5s;
  min-width: 4em;
  text-align: center;
}

@keyframes p-loading-fade {
  to { opacity: 1; }
}


/* ------------------------------------------------------------
   06. Top Bar  .l-topbar
   ------------------------------------------------------------ */
.l-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;  /* ヘッダー(100)より前面 */
  background: var(--color-gray);
  color: var(--color-black);
  font-size: var(--fs-sm);
  letter-spacing: 0.05em;
  text-align: center;
  padding: var(--sp-xs) 3rem;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.35s ease, opacity 0.35s ease;
  max-height: 5rem;
  opacity: 1;
}

.l-topbar.is-hidden {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
}

.l-topbar__link {
  color: var(--color-black);
  text-decoration: underline;
  text-decoration-color: rgba(0, 0, 0, 0.3);
  text-underline-offset: 3px;
  display: inline-block;
}
@media (hover: hover) and (pointer: fine) {
  .l-topbar__link:hover { opacity: 0.6; }
}

.l-topbar__close {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--color-black);
  font-size: var(--fs-2xl);
  line-height: 1;
  padding: var(--sp-xs);
  cursor: pointer;
  opacity: 0.5;
}
@media (hover: hover) and (pointer: fine) {
  .l-topbar__close:hover { opacity: 1; }
}


/* ------------------------------------------------------------
   07. Header  .l-header
   ------------------------------------------------------------ */
.l-header {
  position: fixed;
  top: var(--topbar-h);  /* INFORMATION バー分だけ下にずれる */
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-gray);
  transition: top 0.35s ease;
}

/* fixed ヘッダー分のオフセット */
body {
  padding-top: calc(var(--topbar-h) + var(--header-h));
}

/* ロゴ行 */
.l-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--sp-sm);
  height: var(--header-h);
}

.l-header__logo {
  display: flex;
  align-items: center;
  line-height: 0;
}

.l-header__logo img {
  display: block;
  height: 20px;       /* jc_bc_logo.svg : viewBox 160x29.86 */
  width: auto;
}

.l-header__actions {
  display: flex;
  align-items: center;
  gap: 0.1rem;
}

/* PC クイックリンク（BRAND / CATEGORY） */
.l-header__quick-links {
  align-items: center;
  gap: var(--sp-xs);
  margin-right: var(--sp-xs);
  max-width: 200px;
  overflow: hidden;
  white-space: nowrap;
  transition: opacity 0.3s ease,
              max-width 0.4s var(--ease-out-expo),
              margin-right 0.4s var(--ease-out-expo);
}
/* 検索バーを開いた時はフェードアウト＋幅を 0 に畳んでロゴ領域を侵食しない */
.l-header__quick-links.is-hidden {
  opacity: 0;
  pointer-events: none;
  max-width: 0;
  margin-right: 0;
}
.l-header__quick-link {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-black);
  text-decoration: none;
  transition: color 0.4s ease, opacity var(--transition);
}
@media (hover: hover) and (pointer: fine) {
  .l-header__quick-link:hover { opacity: 0.5; }
}

/* PC インライン検索バー */
.l-header__search-bar {
  display: none; /* .l-header__pc-only で 768px+ から表示 */
  align-items: center;
  height: 34px;
  width: 34px;
  border: 1px solid var(--color-gray);
  border-radius: 999px;
  overflow: hidden;
  margin-right: var(--sp-xs);
  transition: width 0.4s var(--ease-out-expo), border-color 0.3s ease;
  cursor: pointer;
  background: transparent;
}

.l-header__search-bar:focus-within,
.l-header__search-bar.is-open {
  width: 240px;
  border-color: var(--color-black);
  cursor: default;
}

.l-header__search-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  font-size: var(--fs-md);
  color: var(--color-black);
  cursor: pointer;
}

.l-header__search-bar .l-header__search-input {
  flex: 1;
  min-width: 0;
  border: none;
  border-radius: 0;
  outline: none;
  background: transparent;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  color: var(--color-black);
  padding: 0 var(--sp-xs) 0 0;
  width: 100%;
}

.l-header__search-bar .l-header__search-input:focus {
  outline: none;
  border-color: transparent;
}

.l-header__search-bar .l-header__search-input::placeholder {
  color: #aaa;
  font-size: var(--fs-sm);
  letter-spacing: 0.03em;
}

.l-header__search-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  font-size: var(--fs-md);
  color: var(--color-black);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: opacity var(--transition);
}
@media (hover: hover) and (pointer: fine) {
  .l-header__search-submit:hover { opacity: 0.5; }
}

.l-header__icon-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  font-size: var(--fs-xl);
  color: var(--color-black);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
/* TIMELINE アイコン（bi-journal-text）は他より少し大きく目立たせる */
.l-header__icon-btn .bi-journal-text { font-size: var(--fs-2xl); }
/* 通知の赤丸（タイムラインに新着あり時のみ JS で .is-visible 付与） */
.l-header__icon-badge {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #b85c5c;
  display: none;
}
.l-header__icon-badge.is-visible { display: block; }

/* ヘッダー内ハンバーガー：SPでは非表示、tablet以上で表示 */
.l-header__menu-btn { display: none; }

/* SP専用 / PC-tablet専用の表示切り替え */
.l-header__sp-only { display: flex; }
.l-header__pc-only { display: none; }

/* ------------------------------------------------------------
   07. Info Bar  .p-infobar
   ------------------------------------------------------------ */
.p-infobar {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-gray);
  font-size: var(--fs-sm);
}

.p-infobar__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-sm);
  width: 100%;
  padding: var(--sp-xs) var(--sp-sm);
  font-size: var(--fs-sm);
  font-family: var(--font-sans);
  letter-spacing: 0.03em;
  color: var(--color-black);
  cursor: pointer;
  background: none;
  border: none;
  text-align: left;
}

.p-infobar__close {
  font-size: var(--fs-xl);
  color: #aaa;
  flex-shrink: 0;
  line-height: 1;
}

.p-infobar__body {
  padding: 0.75rem var(--sp-sm) var(--sp-sm);
  border-top: 1px solid var(--color-gray);
  font-size: var(--fs-sm);
  line-height: 1.9;
  color: #444;
}

/* 後方互換 .tooltip */
.tooltip {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-gray);
  font-size: var(--fs-sm);
}
.tooltip p { padding: var(--sp-xs) var(--sp-sm); }
.tooltip_target {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-sm);
  width: 100%;
}
.tooltip_target::after {
  content: '×';
  font-size: var(--fs-xl);
  color: #aaa;
  flex-shrink: 0;
}
.tooltip_description {
  display: none;
  padding: var(--sp-sm) var(--sp-sm);
  line-height: 1.9;
  border-top: 1px solid var(--color-gray);
  font-size: var(--fs-sm);
}
.tooltip.is-open .tooltip_description { display: block; }


/* ------------------------------------------------------------
   08. Header Banner  .header_banner
   ------------------------------------------------------------ */
.header_banner { overflow: hidden; line-height: 0; }
.header_banner a { display: block; }
.header_banner img { width: 100%; height: auto; }


/* ------------------------------------------------------------
   09. Hero Slider  .hero_slider
   ------------------------------------------------------------ */
.hero_slider {
  position: relative;
  overflow: hidden;
  background: var(--color-black);
  line-height: 0;
}

.hero_slider img { width: 100%; height: auto; display: block; }

/* PC/SP 画像切り替え */
.hero_slider .forPC { display: none !important; }

/* スライドキャプション */
.hero-slide {
  position: relative;
  line-height: 0;
}
.hero-slide__caption {
  position: absolute;
  bottom: 1.75rem;
  left: 1rem;
  line-height: 1;
}
.hero-slide__eyebrow {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.2em;
  color: rgba(255,255,255,0.7);
  text-transform: uppercase;
  margin-bottom: 0.3rem;
  display: block;
}
.hero-slide__brand {
  font-size: var(--fs-3xl);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-white);
  text-transform: uppercase;
  display: block;
  margin-bottom: var(--sp-xs);
}
.hero-slide__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--color-white);
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255,255,255,0.5);
  padding-bottom: 2px;
}

/* Slick dots */
.hero_slider .slick-dots {
  position: absolute;
  bottom: 10px;
  left: 0; right: 0;
  display: flex !important;
  justify-content: center;
  gap: 5px;
  padding: 0;
}
.hero_slider .slick-dots li { width: 5px; height: 5px; }
.hero_slider .slick-dots li button {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  border: none; padding: 0;
  font-size: 0;
  transition: background var(--transition);
}
.hero_slider .slick-dots li.slick-active button {
  background: var(--color-white);
}


/* ------------------------------------------------------------
   10. Section Common  .p-section
   ------------------------------------------------------------ */
.p-section {
  border-bottom: 1px solid var(--color-gray);
}

.p-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-md) var(--sp-sm) var(--sp-sm);
}

.p-section__title {
  font-size: var(--fs-base);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1;
}

.p-section__more {
  font-size: var(--fs-sm);
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--color-dim);
  border-bottom: 1px solid var(--color-dim);
  padding-bottom: 1px;
  flex-shrink: 0;
  white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
  .p-section__more:hover { opacity: 0.6; }
}

/* 余白付きコンテンツエリア */
.p-section__body {
  padding: 0 var(--sp-sm) 1.75rem;
}

/* Flywheel フレーム */
.flywheel-recommend__frame {
  min-height: 180px;
  padding: 0 0 1.75rem;
}


/* ------------------------------------------------------------
   11. Product Grid  .p-product-grid
   ------------------------------------------------------------ */
.p-product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

/* 各アイテム自身に全4辺ボーダーを持たせ、ネガティブマージンで隣接ボーダーの重なりを打ち消す
   → 商品数がカラム数に満たない場合も空セルにボーダーが表示されない */
.p-product-grid__item {
  border: 1px solid var(--color-gray);
  margin-top: -1px;
  margin-left: -1px;
}

.p-product-grid__item a {
  display: block;
}

.p-product-grid__item img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.p-product-grid__info {
  display: block; /* ショートコード版は <span> のためブロック化して <div> 版と揃える */
  padding: var(--sp-xs) 0.75rem var(--sp-sm);
}

.p-product-grid__rank {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--color-dim);
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.15rem;
}

.p-product-grid__brand {
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  color: #aaa;
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.15rem;
}

.p-product-grid__name {
  font-size: var(--fs-xs);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.p-product-grid__price {
  font-size: var(--fs-xs);
  font-weight: 700;
  margin-top: 0.3rem;
}

.p-product-grid__price::before {
  content: '¥';
  font-family: 'Noto Sans JP', sans-serif;
  margin-right: 0.2em;
}


/* ------------------------------------------------------------
   12. Search  .p-search
   ------------------------------------------------------------ */
.p-search {
  padding: 0 var(--sp-sm) 1.75rem;
}

.p-search__input-wrap {
  position: relative;
  margin-bottom: var(--sp-sm);
}

.p-search__input {
  width: 100%;
  border: none;
  border-bottom: 1.5px solid var(--color-black);
  padding: 0.65rem 2.2rem 0.65rem 0;
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  background: transparent;
  outline: none;
  border-radius: 0;
  -webkit-appearance: none;
  color: var(--color-black);
}

.p-search__input::placeholder { color: #bbb; }

.p-search__submit {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--fs-xl);
  color: var(--color-black);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.3rem;
  display: flex;
  align-items: center;
}

.p-search__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-xs) var(--sp-xs);
}

.p-search__tag {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  background: var(--color-white);
  border: 1px solid var(--color-gray);
  padding: 0.3rem 0.75rem;
  border-radius: 99px;
  transition: border-color 0.4s var(--ease-out-expo),
              color 0.4s var(--ease-out-expo);
}
/* ホバー時に左から右へスライドインする黒帯 */
.p-search__tag::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--color-black);
  transform: translateX(-101%);
  transition: transform 0.5s var(--ease-out-expo);
}
@media (hover: hover) and (pointer: fine) {
  .p-search__tag:hover {
    color: var(--color-white);
    border-color: var(--color-black);
    opacity: 1;
  }
  .p-search__tag:hover::before {
    transform: translateX(0);
  }
}


/* ------------------------------------------------------------
   13. Brand Grid  .p-brand-grid
   ------------------------------------------------------------ */
.p-brand-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--color-gray);
}

.p-brand-grid__item {
  background: var(--color-white);
  position: relative;
  overflow: hidden;
}

.p-brand-grid__item a {
  display: block;
}

.p-brand-grid__item img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform 0.45s var(--ease-out-expo);
}

@media (hover: hover) and (pointer: fine) {
  .p-brand-grid__item a:hover img {
    transform: scale(1.06);
    opacity: 1;
  }
}

.p-brand-grid__name {
  position: absolute;
  inset: auto 0 0;
  padding: 0.45rem 0.3rem var(--sp-xs);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-white);
  background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, transparent 100%);
  text-align: center;
  line-height: 1.3;
}


/* ------------------------------------------------------------
   14. Category Grid  .p-cat-grid
   ------------------------------------------------------------ */
.p-cat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--color-gray);
}

.p-cat-grid__item {
  background: var(--color-white);
}

.p-cat-grid__item a {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  padding: 0.85rem var(--sp-sm);
  transition: background var(--transition), color var(--transition);
}
@media (hover: hover) and (pointer: fine) {
  .p-cat-grid__item a:hover {
    background: var(--color-black);
    color: var(--color-white);
    opacity: 1;
  }
}

.p-cat-grid__icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex-shrink: 0;
}

/* Bootstrap Icon 代替 */
.p-cat-grid__bi {
  font-size: var(--fs-xl);
  width: 24px;
  text-align: center;
  flex-shrink: 0;
  line-height: 1;
}

.p-cat-grid__name {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.3;
}


/* ------------------------------------------------------------
   15. Horizontal Scroll  .p-scroll-list / .p-staff-item
   ------------------------------------------------------------ */
/* BLOG / NEWS */
.p-scroll-list {
  display: flex;
  gap: var(--sp-xs);
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0 var(--sp-sm) 1.75rem;
  -webkit-overflow-scrolling: touch;
}
.p-scroll-list::-webkit-scrollbar { display: none; }

.p-scroll-list__item {
  flex-shrink: 0;
  width: 44vw;
  max-width: 190px;
}

.p-scroll-list__item a { display: block; }

.p-scroll-list__item img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.p-scroll-list__date {
  display: block;
  font-size: var(--fs-sm);
  color: #aaa;
  margin-top: 0.45rem;
  letter-spacing: 0.04em;
}

.p-scroll-list__title {
  font-size: var(--fs-base);
  line-height: 1.55;
  margin-top: 0.2rem;
  /* 2行超えは末尾に … をつけてクリップ */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-all;
}

/* STAFF REVIEW */
.p-staff-list {
  display: flex;
  gap: var(--sp-xs);
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0 var(--sp-sm) 1.75rem;
  -webkit-overflow-scrolling: touch;
}
.p-staff-list::-webkit-scrollbar { display: none; }

.p-staff-item {
  flex-shrink: 0;
  width: 68vw;
  max-width: 260px;
}

.p-staff-item a { display: block; }

.p-staff-item__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.p-staff-item__meta {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  margin-top: var(--sp-xs);
}

.p-staff-item__avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--color-gray);
}

.p-staff-item__info { line-height: 1.3; }

.p-staff-item__name {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.p-staff-item__shop {
  font-size: var(--fs-xs);
  color: var(--color-dim);
}

.p-staff-item__title {
  display: block;
  font-size: var(--fs-xs);
  line-height: 1.55;
  margin-top: 0.3rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* ------------------------------------------------------------
   16. BEYOND COOL  .p-bc
   ------------------------------------------------------------ */
.p-bc {
  padding: var(--sp-lg) var(--sp-md) 3rem;
  border-bottom: 1px solid var(--color-gray);
}

.p-bc__eyebrow {
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-black);
  margin-bottom: 1.25rem;
}

.p-bc__title {
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-bottom: 1.2rem;
  line-height: 1.4;
}

.p-bc__text {
  font-size: var(--fs-sm);
  line-height: 2;
  color: #555;
  margin-bottom: 1.75rem;
  text-align: left; /* 本文は読みやすさのため左揃えを維持 */
}

.p-bc__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-xs);
  border: 1px solid var(--color-black);
  padding: 0.75rem var(--sp-md);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: background var(--transition), color var(--transition);
}
@media (hover: hover) and (pointer: fine) {
  .p-bc__btn:hover {
    background: var(--color-black);
    color: var(--color-white);
    opacity: 1;
  }
}

/* ヒーロー画像（SP: 全幅） */
.p-bc__hero {
  overflow: hidden;
  aspect-ratio: 4 / 3;
  margin: 0 -1.5rem 2rem;
}

.p-bc__hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* テキストエリア */
.p-bc__body {
  text-align: center;
}


/* ------------------------------------------------------------
   17. Footer  .fs-l-footer
   ------------------------------------------------------------ */
.fs-l-footer {
  background: var(--color-white);
  border-top: 1px solid var(--color-gray);
}

#footer_box {
  padding: var(--sp-xl) var(--sp-sm);
  text-align: center;
}

/* フッターロゴ（jc_bc_logo.svg） */
.footer_logo {
  display: inline-block;
  margin: 0 auto var(--sp-md);
  line-height: 0;
}
.footer_logo img {
  height: 28px;
  width: auto;
  display: block;
}

/* SNS */
.footer_sns {
  display: flex;
  justify-content: center;
  gap: var(--sp-md);
  margin-bottom: var(--sp-lg);
}
.footer_sns > a {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-2xl);
  color: var(--color-black);
}

/* フッターリンク群 */
.footer_menu_box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-md);
}

/* ご利用ガイド・ポリシー（8リンク）
   SP：2列グリッドで縦に整列／768px以上：中央寄せの横並び（2行に折返し） */
.footer_menu {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: var(--sp-xs) var(--sp-lg);
  justify-content: center;
}
@media (min-width: 768px) {
  .footer_menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 720px; /* 4リンク×2行で折り返す幅 */
    gap: var(--sp-xs) var(--sp-md);
  }
}

.footer_menu a {
  font-size: var(--fs-xs);
  color: #999;
  letter-spacing: 0.04em;
}
@media (hover: hover) and (pointer: fine) {
  .footer_menu a:hover { color: var(--color-black); opacity: 1; }
}

.footer_corp-btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: block;
  width: fit-content;
  margin: 0 auto;
  padding: 0.55rem var(--sp-md);
  border: 1px solid var(--color-black);
  border-radius: 999px;
  background: var(--color-white);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-black);
  text-align: center;
  transition: color 0.4s var(--ease-out-expo);
}
/* ホバー時に左から右へスライドインする黒帯 */
.footer_corp-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--color-black);
  transform: translateX(-101%);
  transition: transform 0.5s var(--ease-out-expo);
}
@media (hover: hover) and (pointer: fine) {
  .footer_corp-btn:hover {
    color: var(--color-white);
    opacity: 1;
  }
  .footer_corp-btn:hover::before {
    transform: translateX(0);
  }
}

.copyright {
  font-size: var(--fs-xs);
  color: #bbb;
  letter-spacing: 0.06em;
}


/* ------------------------------------------------------------
   18. Menu Drawer  .c-menu
   全画面（底辺 = 固定ボトムナビ上）、下から上へスライドイン
   ------------------------------------------------------------ */
/* コンテナ：イベント制御のみ。backdrop-filter を妨げないよう
   transform / overflow / visibility は使わない
   ・top: var(--topbar-h) で INFORMATION バーの下から始める
     → topbar はブラーされず常に最前面に見える */
.c-menu {
  position: fixed;
  top: var(--topbar-h);
  left: 0;
  right: 0;
  bottom: var(--footer-nav-h);
  z-index: 200;
  pointer-events: none;
  overflow: hidden; /* サブパネルが右にスライドアウトする領域をクリップ */
}
.c-menu.is-open { pointer-events: auto; }

/* ぼかし背景レイヤー（独立 / opacity フェード）
   anycolor.co.jp 方式： blur(10px) + 半透明白
   ・position: absolute + inset: 0 で .c-menu 基準（topbar 領域はブラーされない） */
.c-menu__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: hsla(0, 0%, 100%, 0.9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  will-change: opacity;
}
.c-menu.is-open .c-menu__bg { opacity: 1; }

/* backdrop-filter 非対応ブラウザ用フォールバック */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .c-menu__bg { background: hsla(0, 0%, 100%, 0.96); }
}

/* コンテンツ層（表示窓）: 入場アニメーションだけ担当。横スライドは .c-menu__rail */
.c-menu__inner {
  position: relative;
  z-index: 1;
  height: 100%;
  width: 100%;
  overflow: hidden;       /* rail の左右はみ出しをクリップ */
  pointer-events: none;
  opacity: 0;
  transform: translate3d(0, 24px, 0);  /* 入場時の slide-up */
  transition: opacity 0.45s ease 0.05s,
              transform 0.55s cubic-bezier(0.215, 0.61, 0.355, 1) 0.05s;
}
.c-menu.is-open .c-menu__inner {
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(0, 0, 0);
}

/* 横長スライドレール: メイン + サブスロット の2枚分 */
.c-menu__rail {
  display: flex;
  width: 200%;
  height: 100%;
  transition: transform 0.35s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.c-menu__rail.is-sub-open {
  transform: translate3d(-50%, 0, 0);
}

/* 各レイヤー: ビューポート幅100%（= インナー50%）を占有 */
.c-menu__layer {
  flex: 0 0 50%;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.c-menu__layer::-webkit-scrollbar { display: none; }

/* メインレイヤー: 元の inner の padding/scroll をここに移植 */
.c-menu__layer--main {
  padding: 2rem var(--sp-md) 3rem;
}
@media (min-width: 768px) {
  .c-menu__layer--main {
    padding: calc(var(--header-h) + 1.5rem) var(--sp-md) 3rem;
  }
}

/* サブスロット: パディングは各サブ側で持つ */
.c-menu__layer--sub-slot {
  padding: 0;
  position: relative;
}

/* ロゴ */
.c-menu__logo {
  margin-bottom: 0;
  line-height: 0;
}
.c-menu__logo img {
  height: 22px;
  width: auto;
}

/* MY PAGE / お気に入り リンク */
.c-menu__primary-link {
  display: block;
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--color-gray);
  text-transform: uppercase;
  transition: opacity var(--transition);
}
@media (hover: hover) and (pointer: fine) {
  .c-menu__primary-link:hover { opacity: 0.5; }
}

/* ACCOUNT ラベル直後の最初のリンクに border-top（SEARCH/JOURNAL と同じ区切り線） */
.c-menu__section-label + .c-menu__primary-link {
  border-top: 1px solid var(--color-gray);
}

/* 閲覧履歴エリア */
.c-menu__history {
  padding: 1.2rem 0;
  border-bottom: 1px solid var(--color-gray);
  margin-bottom: var(--sp-xs);
}
.c-menu__history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}
.c-menu__history-label {
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.c-menu__history-more {
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  color: var(--color-dim);
  border-bottom: 1px solid var(--color-dim);
  padding-bottom: 1px;
}
.c-menu__history .history_box {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  padding: 0;
}
.c-menu__history .history_item_image {
  aspect-ratio: 1 / 1;
  background: var(--color-gray);
  overflow: hidden;
}
.c-menu__history .history_item_image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.c-menu__history article a {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: opacity var(--transition);
}
@media (hover: hover) and (pointer: fine) {
  .c-menu__history article a:hover { opacity: 0.6; }
}

/* セクション見出し */
.c-menu__section-label {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding-top: 2.75rem;
  padding-bottom: 0.1rem;
  color: var(--color-black);
}

/* ナビリスト */
.c-menu__nav-list {
  border-top: 1px solid var(--color-gray);
  margin-bottom: 0.25rem;
}
.c-menu__nav-list li > a,
.c-menu__nav-list li > button {
  display: block;
  width: 100%;
  font-family: inherit;
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 0.85rem 0;
  border: none;
  border-bottom: 1px solid var(--color-gray);
  background: none;
  color: inherit;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity var(--transition);
}
@media (hover: hover) and (pointer: fine) {
  .c-menu__nav-list li > a:hover,
  .c-menu__nav-list li > button:hover { opacity: 0.5; }
}


/* ------------------------------------------------------------
   18-b. Menu Sub Panels（BRAND / CATEGORY 2段階メニュー）
   .c-menu 直下に配置し、右から左へスライドインする
   ------------------------------------------------------------ */
/* トリガーボタン: c-menu__nav-list li > button のベーススタイルを継承し、
   右端のアイコンだけ flex で配置する */
.c-menu__sub-trigger {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
}
.c-menu__sub-trigger-icon {
  margin-left: auto;
  font-size: var(--fs-sm);
  color: var(--color-dim);
}

/* サブパネル本体: サブスロット内で表示/非表示を切替（横スライド自体は親 inner が担当） */
.c-menu__sub {
  display: none;
  height: 100%;
}
.c-menu__sub.is-open {
  display: block;
}

.c-menu__sub-inner {
  /* SP: padding-top = 0（戻るボタンを sticky で上に張り付かせる） */
  padding: 0 var(--sp-md) 3rem;
}
@media (min-width: 768px) {
  .c-menu__sub-inner {
    padding-top: calc(var(--header-h));
  }
}

/* 戻るボタン: サブパネル上部に sticky で常時表示
   ヘッダー直下に張り付くよう top を設定 */
.c-menu__back {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  width: calc(100% + 3rem);
  margin: 0 -1.5rem;
  padding: 1.25rem var(--sp-md);
  background: var(--color-white);
  border: none;
  font: inherit;
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--color-black);
  cursor: pointer;
  letter-spacing: 0.04em;
  text-align: left;
}
@media (hover: hover) and (pointer: fine) {
  .c-menu__back:hover { opacity: 0.6; }
}
.c-menu__back .bi { font-size: var(--fs-md); line-height: 1; }

/* タブレット以上: スクロール時もヘッダー下に張り付く */
@media (min-width: 768px) {
  .c-menu__back {
    top: var(--header-h);
  }
}

/* サブメニューリスト（1階層目の .c-menu__nav-list と同じ見た目に統一） */
.c-menu__sub-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-gray);
}
.c-menu__sub-list a {
  display: block;
  width: 100%;
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--color-gray);
  color: var(--color-black);
  text-decoration: none;
  text-transform: uppercase;
  transition: opacity var(--transition);
}
@media (hover: hover) and (pointer: fine) {
  .c-menu__sub-list a:hover { opacity: 0.5; }
}

/* 日本語サブタイトル */
.c-menu__nav-ja {
  display: inline;
  font-size: var(--fs-xs);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--color-dim);
  text-transform: none;
  margin-left: var(--sp-xs);
}

body.menu-open { overflow: hidden; }


/* ------------------------------------------------------------
   19. Bottom Nav  .c-bottom-nav
   ------------------------------------------------------------ */
.c-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 300;
  background: var(--color-white);
  border-top: 1px solid var(--color-gray);
  display: flex;
  align-items: stretch;
  height: var(--footer-nav-h);
}

.c-bottom-nav__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-family: 'Inter', sans-serif;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: normal;
  line-height: inherit;
  color: var(--color-black);
  text-decoration: none;
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  text-transform: uppercase;
  transition: opacity var(--transition);
}
@media (hover: hover) and (pointer: fine) {
  .c-bottom-nav__item:hover { opacity: 0.55; }
}

.c-bottom-nav__item i {
  font-size: var(--fs-xl);
  line-height: 1;
}

/* カートバッジ */
.c-bottom-nav__badge {
  position: absolute;
  top: 7px;
  right: calc(50% - 15px);
  background: #b85c5c;
  color: var(--color-white);
  font-size: 0.42rem; /* FS と合わせるためリテラル指定 */
  min-width: 13px;
  height: 13px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 2px;
  line-height: 1;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  pointer-events: none;
}

/* メニューオープン時 ✕ に変化 */
.c-bottom-nav__menu.is-open i.bi-list::before { content: "\F659"; } /* bi-x-lg */


/* ------------------------------------------------------------
   20. Search Overlay  .c-search
   ------------------------------------------------------------ */
.c-search {
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--footer-nav-h, 56px);
  z-index: 290;
  background: var(--color-white);
  border-top: 1px solid var(--color-gray);
  padding: 1.25rem var(--sp-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(calc(100% + 1px));
  transition: transform 0.35s cubic-bezier(0.215, 0.61, 0.355, 1),
              opacity 0.3s ease,
              visibility 0s linear 0.35s;
  pointer-events: none;
}

.c-search.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition: transform 0.35s cubic-bezier(0.215, 0.61, 0.355, 1),
              opacity 0.3s ease,
              visibility 0s linear 0s;
}

.c-search__inner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.c-search__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  font-size: var(--fs-xl);
  color: var(--color-black);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: opacity var(--transition);
}
@media (hover: hover) and (pointer: fine) {
  .c-search__close:hover { opacity: 0.5; }
}

.c-search__form {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border: 1px solid var(--color-black);
  border-radius: 999px;
  padding: var(--sp-xs) var(--sp-sm);
}

.c-search__input {
  flex: 1;
  border: none;
  border-radius: 0;
  outline: none;
  padding: 0;
  width: auto;
  -webkit-appearance: none;
  font-size: var(--fs-md);
  font-family: var(--font-sans);
  background: transparent;
  color: var(--color-black);
}
.c-search__input:focus { outline: none; border-color: transparent; }

.c-search__input::placeholder {
  color: #aaa;
  font-size: var(--fs-base);
  letter-spacing: 0.04em;
}

.c-search__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xl);
  color: var(--color-black);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: opacity var(--transition);
}
@media (hover: hover) and (pointer: fine) {
  .c-search__submit:hover { opacity: 0.5; }
}

.c-search__links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-xs);
  margin-top: var(--sp-sm);
}
.c-search__links .p-search__tag {
  justify-content: center;
  background: var(--color-black);
  color: var(--color-white);
  border-color: var(--color-black);
}
.c-search__links .p-search__tag::before { display: none; }


/* ------------------------------------------------------------
   21. Page Top Button  .c-page-top
   ------------------------------------------------------------ */
.c-page-top {
  position: fixed;
  bottom: calc(var(--footer-nav-h) + 1rem);
  left: 1rem;
  z-index: 190;
  width: 40px;
  height: 40px;
  background: hsla(0, 0%, 100%, 0.6);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--color-black);
  border: 1px solid var(--color-black);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xl);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.c-page-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

@media (hover: hover) and (pointer: fine) {
  .c-page-top:hover { opacity: 0.6; }
}


/* ------------------------------------------------------------
   21. FutureShop System
   ------------------------------------------------------------ */

/* 商品カード */
.fs-c-productGrid__item .fs-c-productName {
  font-size: var(--fs-sm);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.fs-c-productGrid__item .fs-c-productPrice {
  font-size: var(--fs-sm);
  font-weight: 700;
  margin-top: 0.25rem;
}
.fs-c-productGrid__item .fs-c-productBrand {
  font-size: var(--fs-xs);
  color: var(--color-dim);
  letter-spacing: 0.04em;
}

/* NEW / SALE バッジ */
.fs-c-productTag--new, .fs-c-badge--new {
  background: var(--color-black);
  color: var(--color-white);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 2px 5px;
}
.fs-c-productTag--sale, .fs-c-badge--sale {
  background: #b00;
  color: var(--color-white);
  font-size: var(--fs-xs);
  font-weight: 700;
  padding: 2px 5px;
}

/* お気に入り */
.fs-c-wishlistButton { color: var(--color-black); }

/* ページネーション */
.fs-c-pagination {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin: var(--sp-lg) 0;
  font-size: var(--fs-sm);
}
.fs-c-pagination__item { display: flex; }
.fs-c-pagination__link,
.fs-c-pagination__current {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-gray);
}
.fs-c-pagination__current {
  background: var(--color-black);
  color: var(--color-white);
  border-color: var(--color-black);
}

/* ソート・カラム */
.fs-c-listControl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-sm) 0;
  margin-bottom: var(--sp-sm);
  border-bottom: 1px solid var(--color-gray);
  font-size: var(--fs-xs);
}

/* サブグループ */
.fs-c-subgroupList {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--color-gray);
  border: 1px solid var(--color-gray);
  margin-bottom: var(--sp-md);
}
.fs-c-subgroupList__item { background: var(--color-white); }
.fs-c-subgroupList__link {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-xs) var(--sp-sm);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  transition: background var(--transition), color var(--transition);
}
@media (hover: hover) and (pointer: fine) {
  .fs-c-subgroupList__link:hover {
    background: var(--color-black);
    color: var(--color-white);
    opacity: 1;
  }
}

/* Instagram 非表示 */
.contents_box:has(#instagram_list) { display: none; }


/* ------------------------------------------------------------
   21. Tablet  768px
   ------------------------------------------------------------ */
@media (min-width: 768px) {
  :root {
    --header-h     : 56px;
  }

  /* ヘッダー */
  .l-header__bar { padding: 0 1.25rem; }
  .l-header__logo img { height: 24px; }

  /* ヘッダー内ハンバーガー表示 */
  .l-header__menu-btn { display: flex; }
  .l-header__sp-only  { display: none; }
  .l-header__pc-only  { display: flex; }

  /* メニュー開いた時もヘッダーは前面に → ボタンで閉じられるように */
  .l-header { z-index: 250; }

  /* infobar */
  .p-infobar__btn { padding: var(--sp-xs) 2rem; }

  /* セクション共通 */
  .p-section__head { padding: 0 2rem 1.25rem; }
  .p-section__body { padding: 0 2rem 2rem; }

  /* 検索 */
  .p-search { padding: 0 2rem 2rem; }

  /* スクロールリスト */
  .p-scroll-list { padding: 0 2rem 2rem; gap: var(--sp-sm); }
  .p-scroll-list__item { width: 30vw; }
  .p-staff-list { padding: 0 2rem 2rem; gap: var(--sp-sm); }
  .p-staff-item { width: 40vw; }

  /* BEYOND COOL */
  .p-bc {
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }

  /* PC: 画像は左カラム全高・full-bleed */
  .p-bc__hero {
    margin: 0;
    aspect-ratio: unset;
    height: 100%;
    min-height: 480px;
  }

  /* PC: テキストは右カラム・余白つき */
  .p-bc__body {
    padding: 3rem 3rem 3rem 3.5rem;
    text-align: left;
  }

  /* Footer */
  #footer_box { padding: var(--sp-xl) 2rem; }

  /* ボトムナビ非表示 → タブレット以上はPC UI */
  .c-bottom-nav { display: none; }

  /* PC メニュー：右サイドからスライドイン */
  .c-menu {
    bottom: 0;
  }

  /* オーバーレイ背景：黒×blur */
  .c-menu__bg {
    background: hsla(0, 0%, 0%, 0.5);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
  }
  /* open 時にクリックを受け取れるようにする */
  .c-menu.is-open .c-menu__bg {
    pointer-events: auto;
    cursor: pointer;
  }

  /* サイドパネル本体（PC: 右からスライドインする 360px の側面パネル）
     PC では入場が右→左の translateX。横スライドは内部の .c-menu__rail が担当
     ・position: absolute + height: 100% で .c-menu 基準（topbar の下から始まる） */
  .c-menu__inner {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: 360px;
    height: 100%;
    background: var(--color-white);
    border-left: 1px solid var(--color-gray);
    padding: 0;
    margin: 0;
    max-width: none;
    transform: translateX(100%);
    opacity: 1;
    transition: transform 0.45s var(--ease-out-expo);
    overflow: hidden; /* rail のはみ出しをクリップ */
    z-index: 2;
  }
  .c-menu.is-open .c-menu__inner {
    transform: translateX(0);
    opacity: 1;
  }

  /* layer--main の PC padding は 768px ブレークポイントで設定済み */

  /* 1カラム縦並び */
  .c-menu__columns {
    display: block;
  }

  /* コンテンツ下余白を戻す */
  .fs-l-pageMain,
  .fs-l-main { padding-bottom: var(--sp-lg); }

  /* ページトップボタン：ボトムナビなし */
  .c-page-top { bottom: 1.5rem; }

  /* 検索オーバーレイ：上からスライドイン */
  .c-search {
    top: var(--header-h);
    bottom: auto;
    z-index: 95;
    border-top: none;
    border-bottom: 1px solid var(--color-gray);
    padding: var(--sp-md) 2rem;
    transform: translateY(calc(-100% - 1px));
  }

  /* PC では閉じるボタン非表示（外側クリックで閉じる） */
  .c-search__close { display: none; }

  /* Brand grid 4列 */
  .p-brand-grid { grid-template-columns: repeat(4, 1fr); }

  /* Category grid 3列 */
  .p-cat-grid { grid-template-columns: repeat(3, 1fr); }

  /* Product grid 3列 */
  .p-product-grid { grid-template-columns: repeat(3, 1fr); }

  /* Hero PC 画像切り替え */
  .hero_slider .forPC { display: block !important; }
  .hero_slider .forSP { display: none  !important; }
}


/* ------------------------------------------------------------
   22. PC  1024px
   ------------------------------------------------------------ */
@media (min-width: 1024px) {
  :root { --header-h: 60px; }

  .l-header__bar {
    padding: 0 2rem;
  }

  .p-section__head,
  .p-search {
    padding-left:  max(2.5rem, calc((100% - var(--max-w)) / 2 + 2.5rem));
    padding-right: max(2.5rem, calc((100% - var(--max-w)) / 2 + 2.5rem));
  }

  /* p-bc は2カラムグリッドのため個別管理 */
  .p-bc__body {
    padding-left:  max(3.5rem, calc((100% - var(--max-w)) / 2 + 2.5rem));
    padding-right: max(3rem,   calc((100% - var(--max-w)) / 2 + 2.5rem));
  }

  .p-scroll-list,
  .p-staff-list {
    padding-left:  max(2.5rem, calc((100% - var(--max-w)) / 2 + 2.5rem));
    padding-right: max(2.5rem, calc((100% - var(--max-w)) / 2 + 2.5rem));
  }

  .p-scroll-list__item { width: 22vw; max-width: 240px; }
  .p-staff-item { width: 28vw; max-width: 320px; }

  /* Brand grid 6列 */
  .p-brand-grid { grid-template-columns: repeat(6, 1fr); }

  /* Category grid 4列 */
  .p-cat-grid { grid-template-columns: repeat(4, 1fr); }

  /* Product grid 4列 */
  .p-product-grid { grid-template-columns: repeat(4, 1fr); }

  #footer_box {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: var(--sp-xl);
  }
}


/* ------------------------------------------------------------
   23. Wide  1440px
   ------------------------------------------------------------ */
@media (min-width: 1440px) {
  :root { --header-h: 64px; }

  .l-header__logo img { height: 26px; }

  .p-brand-grid { grid-template-columns: repeat(8, 1fr); }
  .p-product-grid { grid-template-columns: repeat(5, 1fr); }

  .footer_logo img { height: 32px; }
}