/* ================================================
   FESN ONLINE SHOP — inspired Minimal Design
   共通CSS（全ページ共通）
   ================================================ */

/* --- CSS Variables --- */
:root {
  --color-bg: #FFFFFF;
  --color-bg-subtle: #F7F7F5;
  --color-text: #1A1A1A;
  --color-text-secondary: #333333;
  --color-text-muted: #444444;
  --color-border: #E8E8E6;
  --color-soldout: #CC4444;
  --color-sale: #CC4444;
  --color-accent: #801717;
  --font-main: 'Sora', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif;
  --container: 1200px;
  --gap: 24px;
  --section-pad: 80px;
  --section-pad-sp: 48px;
  --header-height: 56px;
  --nav-height: 44px;
  --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; }
body {
  min-width: 320px;
  font-family: var(--font-main);
  font-size: 13px;
  line-height: 1.8;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0.02em;
}
body.is-scroll-hidden { overflow: hidden; }
img { max-width: 100%; vertical-align: top; }
.c-item-list__img img,
.c-favorite-list__img img { outline: 1px solid rgba(0,0,0,0.07); outline-offset: -1px; }
ul, ol, dl { list-style: none; margin: 0; padding: 0; }
a {
  color: var(--color-text);
  text-decoration: none;
  transition: color 0.2s ease;
}
a:hover,
a:active {
  color: var(--color-text);
  text-decoration: none;
}
[data-whatinput=mouse] *:focus,
[data-whatinput=touch] *:focus { outline: none; }
button { font-family: var(--font-main); cursor: pointer; border: none; background: none; }

/* --- Container --- */
.u-container {
  box-sizing: border-box;
  position: relative;
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
  padding-left: 40px;
  padding-right: 40px;
  width: 100%;
}
@media screen and (max-width: 768px) {
  .u-container {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* --- Section spacing --- */
.u-contents {
  padding-top: var(--section-pad);
  padding-bottom: var(--section-pad);
}
@media screen and (max-width: 768px) {
  .u-contents {
    padding-top: var(--section-pad-sp);
    padding-bottom: var(--section-pad-sp);
  }
}
.tu-contents {
  padding-top: 40px;
  padding-bottom: 40px;
}
@media screen and (max-width: 768px) {
  .tu-contents { padding-top: 24px; padding-bottom: 24px; }
}

/* --- Utilities --- */
.u-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  border: 0 !important;
}
.u-bold { font-weight: 600; }
.u-img-scale { display: block; overflow: hidden; }
.u-img-scale img { transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.u-img-scale:hover img { transform: scale(1.04); }
.u-overflow-slide {
  overflow-x: auto;
  scrollbar-width: none;
}
.u-overflow-slide::-webkit-scrollbar { display: none; }

/* ================================================
   HEADER
   ================================================ */
.site-header {
  position: relative; /* ページと一緒にスクロール。sticky役割はミニヘッダーが担う */
  z-index: 100;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}
/* === ミニスティッキーヘッダー（スクロール時に上からスライドイン） === */
.site-header-mini {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  background: var(--color-bg);
  border-bottom: 2px solid var(--color-text);
  transform: translateY(-100%);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.site-header-mini.is-visible {
  transform: translateY(0);
}
/* === ヘッダー 黒テーマ（色反転）=== */
.site-header,
.site-header-mini {
  --color-bg: #000000;
  --color-bg-subtle: #1A1A1A;
  --color-text: #FFFFFF;
  --color-text-secondary: #CCCCCC;
  --color-text-muted: #999999;
  --color-border: #3A3A3A;
  background: #000000;
  color: #FFFFFF;
  border-bottom-color: #3A3A3A;
}
.site-header .nav-tabs-wrap {
  background: #000000;
  border-top-color: #3A3A3A;
  border-top-width: 2px;
}
.site-header .nav-tab {
  color: #D0D0D0;
}
.site-header .nav-tab.is-active {
  background: #FFFFFF;
  color: #1A1A1A;
}
.site-header .nav-tab.is-active svg { stroke: #1A1A1A; }
.site-header .nav-tab:hover {
  background: #2A2A2A;
  color: #FFFFFF;
}
.header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
  position: relative;
}
.header-left { display: flex; align-items: center; gap: 14px; }

/* ハンバーガー */
.hamburger {
  width: 22px; height: 16px; display: flex; flex-direction: column;
  justify-content: space-between; cursor: pointer;
  background: none; border: none; padding: 0;
}
.hamburger span {
  display: block; height: 1.5px; width: 100%;
  background: var(--color-text);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease, background-color 0.2s ease, width 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.hamburger:hover span:nth-child(2) { width: 70%; }
.hamburger:hover span:nth-child(3) { width: 50%; }
.hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.is-open span:nth-child(2) { opacity: 0; }
.hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ロゴ（センター配置） */
.header-logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-size: 0;
  line-height: 1;
}
.header-logo a {
  display: block;
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.header-logo a:hover { opacity: 0.75; transform: scale(0.97); }
.header-logo img { height: 42px; width: auto; }
.header-logo-txt {
  font-size: 20px; font-weight: 700;
  letter-spacing: 0.08em; color: var(--color-text);
  text-decoration: none;
}

/* ヘッダー右側（カート） */
.header-right { display: flex; align-items: center; gap: 20px; }
.header-icon {
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: color 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  background: none; border: none; padding: 0;
  text-decoration: none; color: var(--color-text);
}
.header-icon:hover { color: #F5E060; text-decoration: none; transform: translateY(-1px) scale(1.08); }
.header-icon svg {
  width: 20px; height: 20px;
  fill: none; stroke: currentColor; stroke-width: 1.5;
}
/* お気に入り追加時のヘッダーハートアニメーション（ほわわーん） */
@keyframes fav-heart-warm {
  0%   { transform: scale(1);    filter: none; }
  40%  { transform: scale(1.32); filter: drop-shadow(0 0 9px rgba(212,88,122,0.75)); }
  70%  { transform: scale(1.22); filter: drop-shadow(0 0 5px rgba(212,88,122,0.35)); }
  100% { transform: scale(1);    filter: none; }
}
.header-icon--fav.fav-pop {
  animation: fav-heart-warm 0.75s ease-out;
  color: #D4587A;
}
.header-icon--fav.fav-pop svg { fill: #D4587A; }
.cart-badge { position: relative; }
.cart-count {
  position: absolute; top: -6px; right: -8px;
  min-width: 15px; height: 15px;
  background: var(--color-text); color: var(--color-bg);
  font-size: 8px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; padding: 0 3px; line-height: 1;
}

/* ================================================
   SEARCH
   ================================================ */

/* パネル内キーワード検索フォーム */
.sp-search-form {
  display: flex; align-items: center; gap: 10px;
  border-bottom: 1.5px solid var(--color-text);
  padding: 6px 2px;
  background: none;
}
.sp-search-form svg {
  flex-shrink: 0; width: 15px; height: 15px;
  fill: none; stroke: var(--color-text-muted); stroke-width: 1.8;
}
.sp-search-form input {
  flex: 1; border: none; background: none;
  font-family: inherit; font-size: 14px; color: var(--color-text);
  outline: none; padding: 4px 0; min-width: 0;
  letter-spacing: 0.02em;
}
.sp-search-form input::placeholder {
  color: #aaa; font-weight: 300; font-size: 13px;
}
.sp-search-form button[type="submit"] {
  flex-shrink: 0; background: none; border: none; cursor: pointer;
  padding: 4px; display: flex; align-items: center;
  color: var(--color-text-muted);
  transition: color 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.sp-search-form button[type="submit"] svg {
  width: 16px; height: 16px; stroke: currentColor;
}
.sp-search-form button[type="submit"]:hover {
  color: var(--color-text); transform: translateX(2px);
}

.search-form {
  display: flex; align-items: center;
  background: var(--color-bg-subtle);
  padding: 8px 14px; gap: 8px;
  border: none;
}
.search-form svg {
  width: 16px; height: 16px;
  fill: none; stroke: var(--color-text-secondary); stroke-width: 1.5; flex-shrink: 0;
}
.search-form input {
  flex: 1; border: none; background: none;
  font-family: inherit; font-size: 12px;
  color: var(--color-text); outline: none;
}
@media screen and (max-width: 768px) {
  .search-form input { font-size: 16px; } /* iOS自動ズーム防止（16px未満でズームが発生する） */
}
.search-form input::placeholder { color: #bbb; letter-spacing: 0.03em; font-weight: 300; }

/* ヘッダー検索ラッパー（検索パネルの位置基準） */
.header-top-wrap {
  position: relative;
}
/* 検索パネル（黒ヘッダーでも元の白テーマを維持） */
.search-panel {
  --color-bg: #FFFFFF;
  --color-bg-subtle: #F7F7F5;
  --color-text: #1A1A1A;
  --color-text-secondary: #333333;
  --color-text-muted: #444444;
  --color-border: #E8E8E6;
  color: #1A1A1A;
}
/* 検索パネル */
.search-panel {
  position: absolute;
  top: 100%; left: 5%; right: 5%;
  width: 90%;
  z-index: 200;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-top: none;
  box-shadow: 0 12px 40px rgba(0,0,0,0.1);
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.search-panel.is-open { max-height: 80vh; opacity: 1; overflow-y: auto; }
.search-panel-inner { padding: 24px; }
.sp-keyword-hint { font-size: 11px; color: #666; letter-spacing: 0.04em; margin: 10px 0 0; }
.sp-section { margin-bottom: 24px; }
.sp-section:last-child { margin-bottom: 0; }
.sp-label {
  display: inline-block;
  font-size: 9px; font-weight: 700; letter-spacing: 0.14em;
  color: #fff; background: var(--color-text-secondary);
  padding: 4px 12px 3px;
  border-radius: 2px;
  margin-bottom: 14px; text-transform: uppercase;
}

/* ブランドタグ */
.sp-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.sp-tag {
  display: inline-block;
  font-size: 11px; font-weight: 500; color: var(--color-text-secondary);
  padding: 7px 16px;
  background: none; border: 1px solid var(--color-border);
  text-decoration: none;
  transition: background-color 0.22s cubic-bezier(0.16, 1, 0.3, 1), color 0.22s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer; white-space: nowrap;
}
.sp-tag:hover {
  background: var(--color-text); color: var(--color-bg);
  border-color: var(--color-text);
  transform: translateY(-2px);
}

/* カテゴリリンク（4列グリッド） */
.sp-cat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 0;
}
.sp-cat-link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 14px;
  font-size: 12px; font-weight: 400; color: var(--color-text-secondary);
  text-decoration: none;
  border-bottom: 1px solid #f0f0f0;
  border-right: 1px solid #f0f0f0;
  transition: background-color 0.22s cubic-bezier(0.16, 1, 0.3, 1), color 0.22s cubic-bezier(0.16, 1, 0.3, 1), padding-left 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  position: relative;
}
.sp-cat-link::after {
  content: '→';
  font-size: 9px;
  color: var(--color-text-muted);
  opacity: 0;
  transform: translateX(-5px);
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.sp-cat-link:nth-child(4n) { border-right: none; }
.sp-cat-link:hover {
  background: #F2F1EF;
  color: var(--color-text);
  padding-left: 18px;
}
.sp-cat-link:hover::after {
  opacity: 1;
  transform: translateX(0);
}

/* カテゴリグループ（Clothing & Goods / Skate） */
.sp-cat-groups {
  display: flex; flex-direction: column; gap: 20px;
}
.sp-cat-group-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-text);
  padding: 8px 0 6px;
  border-bottom: 2px solid var(--color-text);
  margin-bottom: 0;
}
.sp-cat-group-link {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text);
  text-decoration: none;
  padding: 2px 6px;
  border: 1px solid var(--color-text);
  line-height: 1;
  flex-shrink: 0;
  z-index: 101;
  position: relative;
  transition: background 0.18s cubic-bezier(0.16, 1, 0.3, 1), color 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
.sp-cat-group-link:hover {
  background: var(--color-text);
  color: var(--color-bg);
  text-decoration: none;
}

/* 検索オーバーレイ */
.search-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.15);
  z-index: 99;
  opacity: 0; visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.search-overlay.is-open { opacity: 1; visibility: visible; }

/* ================================================
   NAV TABS
   ================================================ */
.nav-tabs-wrap {
  background: #fff;
  border-top: 2px solid var(--color-border);
}
.nav-tabs {
  display: flex;
  align-items: stretch;
}
.nav-tab {
  flex: 1;
  padding: 14px 14px;
  border-radius: 0;
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em;
  color: #666;
  cursor: pointer; border: none;
  border-top: none;
  transition: color 0.22s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.22s cubic-bezier(0.16, 1, 0.3, 1), letter-spacing 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  background: transparent; font-family: inherit;
  text-decoration: none; text-transform: uppercase;
  display: flex; align-items: center; justify-content: center;
  gap: 9px;
  position: relative;
}
.nav-tab::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 2px;
  background: var(--color-text);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-tab + .nav-tab { border-left: 1px solid var(--color-border); }
.nav-tab:hover {
  color: var(--color-text);
  background: var(--color-bg-subtle);
  text-decoration: none;
  letter-spacing: 0.18em;
}
.nav-tab:hover::after { transform: scaleX(1); }
.nav-tab.is-active::after { transform: scaleX(1); }
.nav-tab.is-active {
  background: var(--color-text);
  color: #fff;
}
.nav-tab.is-active svg { stroke: #fff; }
.nav-tab.is-active:hover svg { stroke: #fff; }
.nav-tab svg { stroke: currentColor; flex-shrink: 0; width: 18px; height: 18px; }
.nav-tab-full { display: inline; }
.nav-tab-short { display: none; }
@media (max-width: 768px) {
  .nav-tab { padding: 20px 12px; }
}
@media (max-width: 600px) {
  .nav-tab { padding: 12px 6px; font-size: 9.5px; letter-spacing: 0.08em; gap: 5px; }
  .nav-tab svg { width: 13px; height: 13px; }
  .nav-tab-full { display: none; }
  .nav-tab-short { display: inline; }
}

/* ================================================
   SIDEBAR
   ================================================ */
.sidebar-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.4);
  z-index: 200; opacity: 0; visibility: hidden;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.sidebar-overlay.is-open { opacity: 1; visibility: visible; }
.sidebar {
  position: fixed; top: 0; left: 0;
  width: 320px; max-width: 85vw; height: 100vh;
  background: var(--color-bg); z-index: 300;
  transform: translateX(-100%);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  overflow-y: auto; display: flex; flex-direction: column;
  font-size: 11px;
}
.sidebar.is-open { transform: translateX(0); }
.sidebar-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--color-border);
}
.sidebar-close {
  width: 24px; height: 24px; cursor: pointer;
  background: none; border: none; padding: 0; position: relative;
}
.sidebar-close::before, .sidebar-close::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 16px; height: 1.5px; background: var(--color-text);
}
.sidebar-close::before { transform: translate(-50%,-50%) rotate(45deg); }
.sidebar-close::after { transform: translate(-50%,-50%) rotate(-45deg); }
.sidebar-section { padding: 16px 20px; border-bottom: 1px solid var(--color-border); }
.sidebar-link {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--color-text-secondary);
  text-decoration: none; padding: 8px 0;
  transition: color 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.sidebar-link svg {
  flex-shrink: 0; opacity: 0.5;
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.sidebar-link:hover { color: var(--color-text); text-decoration: none; transform: translateX(4px); }
.sidebar-link:hover svg { opacity: 1; }

/* Connect サブグループ */
.sidebar-loc { margin-bottom: 14px; }
.sidebar-loc:last-child { margin-bottom: 0; }
.sidebar-loc .sidebar-link { font-size: 11px; padding: 4px 0; }
.sidebar-loc__name {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-bg);
  background: var(--color-text);
  padding: 2px 7px;
  margin-bottom: 7px;
  line-height: 1.8;
}

/* カテゴリセクション */
.sidebar-section--category {
  padding: 20px 20px 16px;
}
.sidebar-badge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 9px 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text);
  background: none;
  margin-bottom: 12px;
  border-bottom: 2px solid var(--color-text);
}
.sidebar-badge-link {
  color: var(--color-text);
  text-decoration: none;
  font-size: 16px;
  font-weight: 300;
  padding: 0;
  border: none;
  line-height: 1;
  flex-shrink: 0;
  opacity: 0.35;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.sidebar-badge:hover .sidebar-badge-link,
.sidebar-badge-link:hover {
  opacity: 1;
  transform: translateX(5px);
  text-decoration: none;
  background: none;
}
.sidebar-cat-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.sidebar-cat {
  display: block;
  position: relative;
  font-size: 11px;
  font-weight: 400;
  color: var(--color-text);
  text-decoration: none;
  padding: 9px 0 9px 12px;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  transition: padding-left 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.sidebar-cat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 0;
  background: var(--color-text);
  transition: height 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.sidebar-cat:hover {
  padding-left: 16px;
  color: var(--color-text);
  text-decoration: none;
}
.sidebar-cat:hover::before {
  height: 18px;
}
.sidebar-cat:last-child {
  border-bottom: none;
}

.sidebar-footer { margin-top: auto; padding: 20px; border-top: 1px solid #f0f0f0; }
.sidebar-sns { display: flex; gap: 10px; justify-content: center; }
.sidebar-sns a {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  text-decoration: none;
  transition: color 0.22s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.sidebar-sns a:hover {
  color: var(--color-text); border-color: var(--color-text);
  text-decoration: none; transform: translateY(-2px);
}

/* ================================================
   RESPONSIVE — HEADER / SEARCH / SIDEBAR
   ================================================ */
@media screen and (max-width: 768px) {
  .header-logo img { height: 33px; }
  .header-logo-txt { font-size: 16px; }
  .sp-cat-grid { grid-template-columns: 1fr 1fr; }
  .sp-cat-link:nth-child(4n) { border-right: 1px solid #f0f0f0; }
  .sp-cat-link:nth-child(2n) { border-right: none; }
}

/* ================================================
   MAIN CONTENT
   ================================================ */
.l-main {
  min-height: 400px;
}
/* フリーページ: スマホでカテゴリタイトル上部にスペース確保 */
@media screen and (max-width: 768px) {
  .l-main[class*="free"] {
    padding-top: 20px;
  }
}

/* ================================================
   SECTION HEADING
   ================================================ */
h2.info,
.c-section-ttl {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin: 0 0 40px 0;
  padding: 0;
  border: none;
  text-align: left;
}
@media screen and (max-width: 768px) {
  h2.info,
  .c-section-ttl { margin-bottom: 28px; }
}
h2.info span {
  background: none;
  padding: 0;
  position: static;
}

/* ================================================
   PRODUCT GRID — c-item-list
   ================================================ */
.c-item-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
}
@media screen and (max-width: 1024px) {
  .c-item-list { grid-template-columns: repeat(3, 1fr); }
}
@media screen and (max-width: 768px) {
  .c-item-list { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}

.c-item-list__item {
  display: block;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}
.c-item-list__item.is-hidden { display: none; }

.c-item-list__img {
  position: relative;
  aspect-ratio: 1/1;
  overflow: hidden;
  background: var(--color-bg-subtle);
  margin-bottom: 12px;
}
.c-item-list__img:before { display: none; }
.c-item-list__img a {
  display: block;
  width: 100%;
  height: 100%;
}
.c-item-list__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: static !important;
  max-width: none !important;
  max-height: none !important;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.c-item-list__item:hover .c-item-list__img img {
  transform: scale(1.04);
}

.c-item-list__txt { padding: 0; }

.c-item-list__ttl {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.6;
  margin-bottom: 6px;
  text-wrap: balance;
}
.c-item-list__ttl a { color: var(--color-text); }
.c-item-list__ttl a:hover { color: var(--color-accent); text-decoration: none; }

.c-item-list__price {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.c-item-list__price.is-discount { color: var(--color-sale); }
.c-item-list__price.is-strikethrough {
  font-size: 11px;
  font-weight: 300;
  color: var(--color-text-muted);
  text-decoration: line-through;
}
.c-item-list__price.is-soldout {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
}

.c-item-list__expl {
  font-size: 11px;
  line-height: 1.6;
  color: var(--color-text-secondary);
  margin-top: 4px;
}

/* ================================================
   BREADCRUMBS
   ================================================ */
.c-breadcrumbs {
  padding: 0;
  margin-bottom: 15px;
}
.c-breadcrumbs-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  font-size: 11px;
  color: var(--color-text-muted);
}
.c-breadcrumbs-list__item::after {
  content: '/';
  margin: 0 10px;
  color: var(--color-border);
}
.c-breadcrumbs-list__item:last-child::after { content: none; }
.c-breadcrumbs-list__item a { color: var(--color-text-muted); }
.c-breadcrumbs-list__item a:hover { color: var(--color-accent); text-decoration: none; }
.c-breadcrumbs-list__item b {
  font-weight: 500;
  color: var(--color-text-secondary);
}

/* ================================================
   PAGER
   ================================================ */
.c-pager {
  margin-top: 48px;
  text-align: center;
}
.c-pager__total {
  font-size: 11px;
  color: var(--color-text-secondary);
  margin-bottom: 16px;
}
.c-pager__total span { font-weight: 600; color: var(--color-text); }

.c-pager-list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.c-pager-list__item { }
.c-pager-list__page { display: none; } /* 「ページ目」非表示 */
.c-pager-list__link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: border-color var(--transition), color var(--transition);
}
a.c-pager-list__link:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.c-pager-list__link.is-current {
  background: var(--color-text);
  color: var(--color-bg);
  border-color: var(--color-text);
}
.c-pager-list__link.is-disabled {
  color: var(--color-text-muted);
  cursor: default;
}
span.c-pager-list__link.is-disabled:not(.is-current) {
  border-color: var(--color-border);
  color: var(--color-border);
}

/* ================================================
   BUTTONS
   ================================================ */
.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 200px;
  height: 48px;
  padding: 0 32px;
  font-family: var(--font-main);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid var(--color-text);
  color: var(--color-text);
  background: transparent;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition), border-color var(--transition);
  text-decoration: none;
}
.c-btn:active { transform: scale(0.97); }
.c-btn:hover {
  background: var(--color-text);
  color: var(--color-bg);
}
.c-btn.is-more,
.c-btn--outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 200px;
  height: 44px;
  font-family: var(--font-main);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text);
  background: transparent;
  border: 1px solid var(--color-text);
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition), border-color var(--transition);
  text-decoration: none;
}
.c-btn--outline:active { transform: scale(0.97); }
.c-btn--outline:hover {
  background: var(--color-text);
  color: var(--color-bg);
}
.c-btn.is-arrow::after {
  content: '→';
  margin-left: 8px;
}

/* Cart button */
.c-btn-cart {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 60px;
  font-family: var(--font-main);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--color-text);
  color: var(--color-bg);
  border: 2px solid var(--color-text);
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}
.c-btn-cart:active { transform: scale(0.97); }
.c-btn-cart:hover {
  background: transparent;
  color: var(--color-text);
}
.c-btn-cart.is-soldout {
  background: var(--color-text-muted);
  border-color: var(--color-text-muted);
  cursor: not-allowed;
  color: var(--color-bg);
}
.c-btn-cart.is-membersonly {
  background: var(--color-bg-subtle);
  border-color: var(--color-border);
  color: var(--color-text-secondary);
  font-size: 12px;
}
.c-btn-cart.is-disabled {
  background: var(--color-text-muted);
  border-color: var(--color-text-muted);
  cursor: not-allowed;
  color: var(--color-bg);
}
.c-icon-cart { margin-right: 8px; }

/* More button container */
.c-more {
  text-align: center;
  margin-top: 32px;
}

/* Not found */
.c-not-found {
  text-align: center;
  padding: 60px 0;
  font-size: 14px;
  color: var(--color-text-secondary);
}

/* ================================================
   SUB TITLE
   ================================================ */
.c-ttl-sub {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.c-ttl-sub__ja {
  display: block;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
  text-transform: none;
  margin-top: 2px;
}

/* ================================================
   CHECKED ITEMS (閲覧履歴)
   ================================================ */
.p-checked {
  padding: var(--section-pad) 0;
}
@media screen and (max-width: 768px) {
  .p-checked { padding: var(--section-pad-sp) 0; }
}

/* ヘッダー */
.p-checked__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 2px solid var(--color-text);
  padding-top: 14px;
  margin-bottom: 24px;
}
.p-checked__ttl {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0;
  color: var(--color-text);
  line-height: 1.4;
}
@media screen and (max-width: 768px) {
  .p-checked__header { margin-bottom: 18px; }
}

/* 矢印ナビ */
.p-checked__nav { display: flex; gap: 4px; flex-shrink: 0; }
.p-checked__arrow {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border: 1px solid var(--color-border);
  background: none; cursor: pointer;
  color: var(--color-text);
  transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}
.p-checked__arrow:hover { border-color: var(--color-text); background: var(--color-text); color: #fff; }
.p-checked__arrow:disabled { opacity: 0.25; cursor: default; pointer-events: none; }
@media screen and (max-width: 768px) { .p-checked__nav { display: none; } }

/* リスト */
.c-favorite-list {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  flex-wrap: nowrap;
}
.c-favorite-list::-webkit-scrollbar { display: none; }
.c-favorite-list__item {
  flex: 0 0 160px;
  scroll-snap-align: start;
}
@media screen and (max-width: 768px) {
  .c-favorite-list__item { flex: 0 0 120px; }
}

/* カードリンク */
.c-favorite-list__link {
  display: block;
  color: var(--color-text);
  text-decoration: none;
}

/* 画像 */
.c-favorite-list__img {
  aspect-ratio: 1/1;
  overflow: hidden;
  background: var(--color-bg-subtle);
  margin-bottom: 10px;
}
.c-favorite-list__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.c-favorite-list__link:hover .c-favorite-list__img img {
  transform: scale(1.03);
}

/* テキスト */
.c-favorite-list__name {
  font-size: 11px;
  line-height: 1.5;
  color: var(--color-text);
  margin-bottom: 4px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.c-favorite-list__price {
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.c-favorite-list__price.is-discount { color: var(--color-sale); }
.c-favorite-list__price.is-strikethrough {
  text-decoration: line-through;
  color: var(--color-text-muted);
  font-weight: 300;
}
.c-favorite-list__price.is-soldout {
  color: var(--color-text-muted);
  font-size: 10px;
  letter-spacing: 0.08em;
}

/* ================================================
   SHOP GUIDE
   ================================================ */
.p-shopguide {
  padding: 40px 0 32px;
  position: relative;
  margin-bottom: -60px;
}
.p-shopguide::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 100%;
  background-color: #f5f5f5;
  z-index: -1;
}
@media screen and (max-width: 768px) {
  .p-shopguide { padding: 28px 0 20px; }
}

/* 見出し */
.sg-heading {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text);
  padding-bottom: 12px;
  border-bottom: 3px solid var(--color-text);
  margin: 0 0 28px;
  display: inline-block;
}

/* PC: 横並びグリッド */
.sg-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
}
.sg-item {
  border-right: 1px solid var(--color-border);
  padding: 0 24px;
}
.sg-item:first-child { padding-left: 0; }
.sg-item:last-child { border-right: none; padding-right: 0; }

/* トリガーボタン（PC: 常時表示ヘッダー） */
.sg-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 0 0 16px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  color: var(--color-text);
  margin-bottom: 16px;
}
.sg-trigger__svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sg-trigger__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  flex: 1;
}
.sg-trigger__ja {
  display: block;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--color-text-secondary);
  margin-top: 2px;
}

/* PC: +/- アイコン非表示、コンテンツ常時表示 */
.sg-trigger__icon { display: none; }
.sg-content {
  display: block !important;
  padding: 0;
}

/* コンテンツ共通 */
.sg-dl { margin: 0; }
.sg-dl__ttl {
  font-size: 12px;
  font-weight: 600;
  margin-top: 12px;
}
.sg-dl__ttl:first-child { margin-top: 0; }
.sg-dl__body {
  font-size: 11px;
  color: var(--color-text-secondary);
  line-height: 1.8;
  margin: 4px 0 0;
}
.sg-dl__img { margin: 8px 0; }
.sg-dl__img img { max-width: 180px; }
.sg-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sg-links a {
  font-size: 12px;
  color: var(--color-text);
  text-decoration: none;
  display: block;
  padding: 3px 0;
  transition: padding-left 0.2s ease;
}
.sg-links a:hover {
  padding-left: 6px;
  color: var(--color-accent);
}
.sg-intl-text {
  font-size: 12px;
  color: var(--color-text-secondary);
  line-height: 1.8;
  margin: 0 0 12px;
}
.sg-intl-link {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-text);
  text-decoration: none;
  padding: 8px 16px;
  border: 1px solid var(--color-text);
  transition: background 0.2s ease, color 0.2s ease;
}
.sg-intl-link:hover {
  background: var(--color-text);
  color: var(--color-bg);
}

/* スマホ: アコーディオン化 */
@media screen and (max-width: 768px) {
  .sg-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .sg-item {
    border-right: none;
    border-bottom: 1px solid var(--color-border);
    padding: 0;
  }
  .sg-item:last-child { border-bottom: none; }
  .sg-trigger {
    padding: 16px 0;
    border-bottom: none;
    margin-bottom: 0;
    justify-content: space-between;
    cursor: pointer;
  }
  .sg-trigger__icon {
    display: block;
    position: relative;
    width: 12px;
    height: 12px;
    flex-shrink: 0;
  }
  .sg-trigger__icon::before,
  .sg-trigger__icon::after {
    content: "";
    position: absolute;
    background: var(--color-text);
    transition: transform 0.25s ease;
  }
  .sg-trigger__icon::before {
    top: 50%; left: 0;
    width: 12px; height: 1px;
    transform: translateY(-50%);
  }
  .sg-trigger__icon::after {
    top: 0; left: 50%;
    width: 1px; height: 12px;
    transform: translateX(-50%);
  }
  .sg-item.is-open .sg-trigger__icon::after {
    transform: translateX(-50%) rotate(90deg);
  }
  .sg-content {
    display: none !important;
    padding: 0 0 16px;
  }
  .sg-item.is-open .sg-content {
    display: block !important;
  }
}

/* Shop info section */
.p-shop-info { }

/* Staff message */
.p-staff {
  padding: 40px 0;
}
.p-staff-box {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}
@media screen and (max-width: 768px) {
  .p-staff-box { flex-direction: column; }
}
.p-staff__img { flex-shrink: 0; }
.p-staff__img img { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; }
.p-staff__img-name {
  text-align: center;
  font-size: 11px;
  margin-top: 8px;
}

/* Calendar */
.p-calendar {
  padding: 40px 0;
}
.side_section_cal { }
.side_cal { }
.side_cal_memo {
  margin-top: 12px;
  font-size: 12px;
  color: var(--color-text-secondary);
}

/* ================================================
   FOOTER — Full Dark
   ================================================ */
.l-bottom { }

.site-footer {
  margin-top: 60px;
  background: #111;
  color: rgba(255,255,255,0.85);
}

/* フッター見出し: 下線タイプ */
.footer-heading {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  padding-bottom: 12px;
  border-bottom: 3px solid #fff;
  margin-bottom: 28px;
  display: inline-block;
}

/* フッターセクション */
.footer-section {
  padding: 40px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer-section--center {
  text-align: center;
}

/* ロケーション 4カラム */
.footer-locations {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.footer-loc {
  position: relative;
}
.footer-loc-name {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  margin-bottom: 3px;
}
.footer-loc-sub {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.7);
  margin-bottom: 14px;
  text-transform: uppercase;
}
.footer-loc-detail {
  font-size: 11px;
  color: rgba(255,255,255,0.8);
  line-height: 1.9;
  margin-bottom: 14px;
}
.footer-loc-sns {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.footer-sns-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: rgba(255,255,255,0.8);
  text-decoration: none;
  padding: 4px 10px;
  border: 1px solid rgba(255,255,255,0.25);
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.footer-sns-icon {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}
.footer-sns-link:hover {
  color: #fff;
  border-color: #fff;
  background: rgba(255,255,255,0.1);
}

/* FTS 卸パートナーバッジ */
.footer-fts-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  background: #fff;
  color: #111;
  padding: 10px 20px 10px 14px;
  transition: box-shadow 0.25s ease, transform 0.15s ease;
}
.footer-fts-badge:hover {
  box-shadow: 0 2px 20px rgba(255,255,255,0.1);
  transform: translateY(-1px);
}
.footer-fts-logo {
  height: 18px;
}
.footer-fts-text {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.footer-fts-arrow {
  font-size: 11px;
  font-weight: 400;
  opacity: 0.6;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.footer-fts-badge:hover .footer-fts-arrow {
  transform: translateX(4px);
  opacity: 1;
}

/* 最下部 */
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0 24px;
}
.footer-legal {
  display: flex;
  gap: 20px;
}
.footer-legal-link {
  font-size: 10px;
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  letter-spacing: 0.03em;
  transition: color 0.2s ease;
}
.footer-legal-link:hover { color: #fff; }
.footer-copyright {
  font-size: 10px;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.06em;
}

/* フッター レスポンシブ */
@media screen and (max-width: 768px) {
  .site-footer { margin-top: 48px; }
  .footer-section { padding: 28px 0; }
  .footer-locations {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  .footer-loc-name { font-size: 12px; }
  .footer-loc-sub { font-size: 8px; margin-bottom: 10px; }
  .footer-loc-detail { font-size: 10px; line-height: 1.8; }
  .footer-loc-sns { gap: 4px; margin-top: 8px; }
  .footer-sns-link { padding: 4px 9px; font-size: 9px; }
  .footer-fts-badge { gap: 10px; padding: 8px 16px 8px 12px; }
  .footer-fts-logo { height: 16px; }
  .footer-fts-text { font-size: 9px; letter-spacing: 0.08em; }
  .footer-bottom {
    flex-direction: column; gap: 12px;
    align-items: center; text-align: center;
    padding: 16px 0 20px;
  }
  .footer-legal { flex-wrap: wrap; gap: 10px; justify-content: center; }
}
@media screen and (max-width: 480px) {
  .footer-locations {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* ================================================
   SIDEBAR (商品一覧/検索)
   ================================================ */
.l-contents-wrap {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 48px;
  padding: 0 0 40px;
}
@media screen and (max-width: 768px) {
  .l-contents-wrap {
    grid-template-columns: 1fr;
    gap: 24px;
    padding-left: 20px;
    padding-right: 20px;
  }
  .c-breadcrumbs {
    padding-left: 20px;
    padding-right: 20px;
  }
}
.l-contents-main {
  min-width: 0;
  grid-column: 2;
  grid-row: 1;
}
.l-contents-side {
  grid-column: 1;
  grid-row: 1;
}
@media screen and (max-width: 768px) {
  .l-contents-main { grid-column: 1; }
  .l-contents-side { display: none; }
}

.l-side-navi {
  margin-bottom: 32px;
}
.l-side-navi__ttl {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--color-text);
}
.l-side-navi-group { margin-bottom: 20px; }
.l-side-navi-group__label {
  display: inline-block;
  padding: 3px 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  background: var(--color-text-secondary);
  margin-bottom: 10px;
  text-decoration: none;
}
.l-side-navi-list { }
.l-side-navi-list__item { margin-bottom: 2px; }
.l-side-navi-list__link {
  display: block;
  padding: 4px 0;
  font-size: 12px;
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color var(--transition);
  text-align: left;
  width: 100%;
}
.l-side-navi-list__link:hover,
.l-side-navi-list__link.is-active {
  color: var(--color-accent);
}
.l-side-navi-list__link.js-toggle-btn {
  cursor: pointer;
  position: relative;
  padding-right: 16px;
}
.l-side-navi-list__link.js-toggle-btn::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: var(--color-text-muted);
}
.l-side-navi-list__link.js-toggle-btn.is-on::after {
  content: '−';
}

.l-side-navi-sub-list {
  display: none;
  padding-left: 12px;
}
.l-side-navi-sub-list__item { margin-bottom: 2px; }
.l-side-navi-sub-list__link {
  display: block;
  padding: 3px 0;
  font-size: 11px;
  color: var(--color-text-muted);
}
.l-side-navi-sub-list__link:hover {
  color: var(--color-accent);
}

/* ================================================
   NEWS ITEM — .ni（フリーページPAST NEWS用）
   ================================================ */

/* セクション区切り */
.ni {
  border-bottom: 2px solid #C8C8C4;
  padding: 40px 0;
}
.ni:first-of-type { padding-top: 0; }
.ni:last-of-type  { border-bottom: none; padding-bottom: 0; }

/* 日付バッジ */
.ni-d {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: #FFFFFF;
  background: #1A1A1A;
  padding: 4px 14px 3px;
  margin-bottom: 14px;
}

/* タイトル */
.ni-t {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.55;
  margin-bottom: 14px;
}

/* 本文画像 */
.ni img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 18px 0;
  border-radius: 3px;
}

/* YouTubeサムネイル — 16:9固定 */
.ni-y {
  display: block;
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: 18px 0;
  border-radius: 5px;
  overflow: hidden;
  background: #111;
}
.ni-y::before {
  content: '';
  display: block;
  padding-top: 56.25%;
}
.ni-y img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
  border-radius: 0;
  opacity: 0.88;
  transition: transform 0.5s cubic-bezier(0.25,0.46,0.45,0.94), opacity 0.3s ease;
}
.ni-y:hover img { transform: scale(1.04); opacity: 1; }
/* 再生ボタン（白丸＋黒三角） */
.ni-y::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 54px; height: 54px;
  background: rgba(255,255,255,0.95) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='6%2C3 20%2C12 6%2C21' fill='%231A1A1A'/%3E%3C/svg%3E") center/18px no-repeat;
  border-radius: 50%;
  box-shadow: 0 4px 20px rgba(0,0,0,0.28);
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s ease;
  z-index: 2;
}
.ni-y:hover::after {
  transform: translate(-50%, -50%) scale(1.13);
  box-shadow: 0 8px 28px rgba(0,0,0,0.38);
}

/* ページヘッダー（年次タイトル） */
.pn-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding-bottom: 16px;
  margin-top: 20px;
  margin-bottom: 32px;
  border-bottom: 2px solid #1A1A1A;
}
.pn-main .pn-header { margin-top: 0; }
.pn-header__title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #1A1A1A;
  margin: 0;
  line-height: 1;
}
.pn-header__year {
  font-family: 'Bebas Neue', 'Sora', sans-serif;
  font-size: 36px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #1A1A1A;
  line-height: 0.85;
}

/* アーカイブ年ナビ */
.pn-nav {
  display: flex;
  gap: 4px;
  margin-bottom: 44px;
  flex-wrap: wrap;
}
.pn-nav a {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: #AAA;
  padding: 5px 14px;
  border: 1px solid #D8D8D4;
  text-decoration: none;
  transition: all 0.18s ease;
}
.pn-nav a:hover,
.pn-nav a.is-active {
  background: #1A1A1A;
  color: #fff;
  border-color: #1A1A1A;
}

@media screen and (max-width: 768px) {
  .ni { padding: 28px 0; }
  .ni-t { font-size: 14px; }
  .ni-y { max-width: 100%; }
  .pn-header__year { font-size: 48px; transform: none; }
}

/* Past News — サイドバーレイアウト */
.pn-layout {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  padding-top: 20px;
}
.pn-main {
  flex: 1;
  min-width: 0;
}
.pn-sidebar {
  flex-shrink: 0;
  width: 120px;
  position: sticky;
  top: 76px;
  align-self: flex-start;
}
.pn-sidebar__label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #AAAAAA;
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid #1A1A1A;
}
/* タイムライン縦線 */
.pn-sidebar .pn-nav {
  flex-direction: column;
  margin-bottom: 0;
  gap: 0;
  border-left: 1px solid #E0E0E0;
}
.pn-sidebar .pn-nav a {
  position: relative;
  display: block;
  padding: 7px 0 7px 20px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.04em;
  word-break: keep-all;
  color: #BBBBBB;
  background: none;
  border: none;
  transition: color 0.2s ease;
}
/* タイムラインノード（ドット） */
.pn-sidebar .pn-nav a::before {
  content: '';
  position: absolute;
  left: -6px;
  top: 50%;
  transform: translateY(-50%);
  width: 11px;
  height: 11px;
  background: #FFFFFF;
  border: 1.5px solid #D8D8D8;
  border-radius: 50%;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  z-index: 1;
}
.pn-sidebar .pn-nav a:hover { color: #333; background: none; }
.pn-sidebar .pn-nav a:hover::before {
  border-color: #999;
  transform: translateY(-50%) scale(1.2);
}
.pn-sidebar .pn-nav a.is-active { color: #1A1A1A; font-weight: 700; background: none; }
.pn-sidebar .pn-nav a.is-active::before {
  background: #1A1A1A;
  border-color: #1A1A1A;
  transform: translateY(-50%) scale(1.25);
  box-shadow: 0 0 0 3px rgba(26,26,26,0.1);
}
@media screen and (max-width: 768px) {
  .pn-layout {
    flex-direction: column;
    gap: 0;
    padding-top: 20px;
  }
  .pn-sidebar {
    width: 100%;
    order: -1;
    position: static;
  }
  .pn-sidebar__label { display: none; }
  .pn-sidebar .pn-nav {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    margin-bottom: 28px;
    gap: 4px;
    border-left: none;
  }
  .pn-sidebar .pn-nav a {
    display: inline-block;
    padding: 5px 10px;
    color: #AAA;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    border: 1px solid #D8D8D4;
  }
  .pn-sidebar .pn-nav a::before { display: none; }
  .pn-sidebar .pn-nav a:hover,
  .pn-sidebar .pn-nav a.is-active {
    background: #1A1A1A;
    color: #fff;
    border-color: #1A1A1A;
  }
}

/* ================================================
   MISC / COMPAT
   ================================================ */
.hide { display: none !important; }
.free { }
.u-opa { }
.u-contents-s { }
.mar_t_50 { margin-top: 50px; }
.txt_c { text-align: center; }
.txt_18 { font-size: 18px; }
.disable_cartin { width: 100%; }

/* Star icon for reviews */
svg#star { display: none; }

/* ================================================
   GOOGLE FONTS IMPORT
   ================================================ */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700&family=Bebas+Neue&display=swap');