/* =============================================================
   ヤマナカ ネット通販 — メインスタイル
   ============================================================= */

:root {
  --color-bg: #fafaf7;
  --color-surface: #ffffff;
  --color-text: #1a1a1a;
  --color-muted: #6b6b6b;
  --color-line: #e5e2dc;
  --color-accent: #1a2a47;
  --color-accent-hover: #2a3d63;
  --color-gold: #a78b3c;
  --color-cart: #c0392b;
  --max-width: 1280px;
  --radius: 2px;
  --font-serif: "Noto Serif JP", "Hiragino Mincho ProN", "游明朝", "Yu Mincho", serif;
  --font-sans: "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", sans-serif;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 6px 24px rgba(0,0,0,0.08);
  --shadow-lg: 0 12px 36px rgba(0,0,0,0.12);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.7;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--color-accent); }

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.02em;
  margin: 0 0 0.6em;
}
p { margin: 0 0 1em; }

.container { max-width: var(--max-width); margin-inline: auto; padding-inline: 24px; }
.section { padding-block: clamp(56px, 8vw, 96px); }

.eyebrow {
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 8px;
  display: inline-block;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 14px 32px;
  background: var(--color-accent);
  color: #fff;
  font-size: 14px;
  letter-spacing: 0.1em;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  cursor: pointer;
}
.btn:hover { background: var(--color-accent-hover); color: #fff; }
.btn--ghost { background: transparent; color: var(--color-accent); }
.btn--ghost:hover { background: var(--color-accent); color: #fff; }

@media (max-width: 720px) { .section { padding-block: 56px; } }

/* ============ ユーティリティバー ============ */

.utility-bar {
  background: var(--color-accent);
  color: rgba(255,255,255,0.85);
  font-size: 12px;
  letter-spacing: 0.04em;
}
.utility-bar__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 36px;
  gap: 16px;
}
.utility-bar__msg { display: flex; align-items: center; gap: 8px; }
.utility-bar__links { display: flex; gap: 20px; list-style: none; margin: 0; padding: 0; }
.utility-bar__links a { color: rgba(255,255,255,0.85); transition: color 0.2s; }
.utility-bar__links a:hover { color: #d4b864; }

@media (max-width: 760px) {
  .utility-bar__msg { font-size: 11px; }
  .utility-bar__links { display: none; }
}

/* ============ ヘッダー ============ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,0.97);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--color-line);
}
.site-header__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 32px;
  min-height: 76px;
}
.site-header__brand { display: flex; align-items: center; gap: 12px; }
.site-header__brand img { width: 44px; height: 44px; border-radius: 50%; }
.site-header__brand-text { display: flex; flex-direction: column; line-height: 1.25; }
.site-header__brand-text strong {
  font-family: var(--font-serif);
  font-size: 20px;
  letter-spacing: 0.12em;
  color: var(--color-accent);
}
.site-header__brand-text small { font-size: 11px; color: var(--color-muted); letter-spacing: 0.04em; }

.site-header__nav ul { display: flex; list-style: none; margin: 0; padding: 0; gap: 24px; justify-content: center; }
.site-header__nav a {
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--color-text);
  position: relative;
  padding-block: 4px;
}
.site-header__nav a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.site-header__nav a:hover::after { transform: scaleX(1); }

.site-header__actions { display: flex; align-items: center; gap: 8px; }
.site-header__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--color-text);
  border-radius: 50%;
  transition: background 0.2s, color 0.2s;
}
.site-header__icon:hover { background: var(--color-bg); color: var(--color-accent); }
.site-header__icon--cart {
  width: auto;
  padding: 0 16px;
  border-radius: 22px;
  gap: 6px;
  font-size: 13px;
  background: var(--color-accent);
  color: #fff;
  letter-spacing: 0.06em;
}
.site-header__icon--cart:hover { background: var(--color-accent-hover); color: #fff; }
.site-header__icon--cart span { font-size: 13px; }

.site-header__toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 28px;
  height: 20px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.site-header__toggle span {
  display: block;
  height: 2px;
  background: var(--color-text);
  transition: transform 0.3s, opacity 0.3s;
}

@media (max-width: 1080px) {
  .site-header__nav a { font-size: 12px; }
  .site-header__nav ul { gap: 16px; }
  .site-header__brand-text small { display: none; }
}

@media (max-width: 880px) {
  .site-header__inner { grid-template-columns: auto 1fr auto; min-height: 64px; }
  .site-header__toggle { display: flex; }
  .site-header__nav {
    position: absolute;
    inset-inline: 0;
    top: 100%;
    background: #fff;
    border-bottom: 1px solid var(--color-line);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  .site-header__nav.is-open { max-height: 480px; }
  .site-header__nav ul { flex-direction: column; gap: 0; padding: 12px 24px 24px; }
  .site-header__nav li { border-bottom: 1px solid var(--color-line); }
  .site-header__nav li:last-child { border-bottom: 0; }
  .site-header__nav a { display: block; padding: 14px 4px; font-size: 14px; }
  .site-header__icon--cart span { display: none; }
  .site-header__icon--cart { width: 40px; padding: 0; border-radius: 50%; }
}

/* ============ ヒーロー ============ */

.hero {
  position: relative;
  overflow: hidden;
  height: clamp(480px, 70vh, 680px);
  background: #111;
  color: #fff;
}
.hero__track { position: absolute; inset: 0; }
.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s ease;
  display: flex;
  align-items: flex-end;
  pointer-events: none;
}
.hero__slide.is-active { opacity: 1; pointer-events: auto; }
.hero__media {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.05);
  transition: transform 8s ease;
}
.hero__slide.is-active .hero__media { transform: scale(1); }
.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.2) 60%, rgba(0,0,0,0.35) 100%);
}
.hero__content {
  position: relative;
  padding-block: clamp(48px, 8vw, 80px);
  max-width: 720px;
}
.hero__content .eyebrow { color: #d4b864; }
.hero__content h1 {
  font-size: clamp(26px, 4.5vw, 44px);
  color: #fff;
  margin-bottom: 16px;
  letter-spacing: 0.04em;
}
.hero__content p {
  font-size: clamp(14px, 1.6vw, 17px);
  margin-bottom: 28px;
  max-width: 560px;
}
.hero__cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero__cta .btn--ghost { color: #fff; border-color: rgba(255,255,255,0.6); }
.hero__cta .btn--ghost:hover { background: #fff; color: var(--color-accent); border-color: #fff; }

.hero__dots {
  position: absolute;
  bottom: 24px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 8px;
  z-index: 5;
}
.hero__dot {
  width: 32px;
  height: 2px;
  background: rgba(255,255,255,0.4);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background 0.3s;
}
.hero__dot.is-active { background: #fff; }

/* ============ お知らせバー ============ */

.notice-bar {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-line);
  padding-block: 16px;
}
.notice-bar__inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: center;
}
.notice-bar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2px;
}
.notice-bar__label {
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--color-gold);
  text-transform: uppercase;
}
.notice-bar__value {
  font-family: var(--font-serif);
  font-size: 18px;
  color: var(--color-accent);
  letter-spacing: 0.04em;
}
.notice-bar__item small {
  font-size: 11px;
  color: var(--color-muted);
}
.notice-bar__item small strong { color: var(--color-text); font-weight: 500; }

@media (max-width: 720px) {
  .notice-bar__inner { grid-template-columns: 1fr; gap: 12px; }
  .notice-bar__item { flex-direction: row; text-align: left; align-items: baseline; gap: 8px; flex-wrap: wrap; }
}

/* ============ 特徴 ============ */

.features { background: var(--color-surface); }
.features__head { text-align: center; margin-bottom: 56px; }
.features__head h2 { font-size: clamp(24px, 3.5vw, 36px); margin: 0; }
.features__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px;
  background: var(--color-line);
  border: 1px solid var(--color-line);
}
.features__grid--3 { grid-template-columns: repeat(3, 1fr); }
.feature {
  background: var(--color-surface);
  padding: 40px 32px;
  transition: background 0.2s;
}
.feature--lg { padding: 48px 36px; }
.feature:hover { background: var(--color-bg); }
.feature__num {
  font-family: var(--font-serif);
  font-size: 14px;
  color: var(--color-gold);
  letter-spacing: 0.2em;
  margin-bottom: 16px;
}
.feature h3 { font-size: 18px; margin-bottom: 12px; color: var(--color-accent); line-height: 1.5; }
.feature p { font-size: 14px; color: var(--color-muted); margin: 0; line-height: 1.9; }

@media (max-width: 880px) {
  .features__grid--3 { grid-template-columns: 1fr; }
}

/* ============ 生地ランキング ============ */

.ranking { background: var(--color-bg); }
.ranking__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 48px;
  gap: 24px;
  flex-wrap: wrap;
}
.ranking__head h2 { font-size: clamp(24px, 3.5vw, 36px); margin: 0; }
.ranking__all {
  font-size: 13px;
  color: var(--color-accent);
  letter-spacing: 0.08em;
  border-bottom: 1px solid currentColor;
  padding-bottom: 4px;
}

.ranking__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}
.rank-card {
  display: block;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  transition: transform 0.3s, box-shadow 0.3s;
  position: relative;
}
.rank-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.rank-card__img {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--color-bg);
}
.rank-card__img img { width: 100%; height: 100%; object-fit: cover; }
.rank-card__badge {
  position: absolute;
  top: 0;
  left: 0;
  padding: 6px 12px;
  background: var(--color-accent);
  color: #fff;
  font-family: var(--font-serif);
  font-size: 12px;
  letter-spacing: 0.1em;
}
.rank-card__body { padding: 16px; }
.rank-card__title {
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 8px;
  color: var(--color-accent);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-weight: 500;
  font-family: var(--font-sans);
}
.rank-card__desc {
  font-size: 11px;
  color: var(--color-muted);
  line-height: 1.7;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 1080px) {
  .ranking__grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 880px) {
  .ranking__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .ranking__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .rank-card__body { padding: 12px; }
  .rank-card__title { font-size: 12px; }
}

/* ============ ブランド ============ */

.brands { background: var(--color-surface); }
.brands__head { text-align: center; margin-bottom: 56px; }
.brands__head h2 { font-size: clamp(24px, 3.5vw, 36px); margin: 0 0 12px; }
.brands__head p { color: var(--color-muted); font-size: 14px; margin: 0; }

.brands__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--color-line);
  border: 1px solid var(--color-line);
}
.brand-card {
  background: var(--color-surface);
  padding: 32px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: background 0.2s, transform 0.2s;
}
.brand-card:hover { background: var(--color-bg); }
.brand-card__name {
  font-family: var(--font-serif);
  font-size: 18px;
  letter-spacing: 0.06em;
  color: var(--color-accent);
}
.brand-card__jp {
  font-size: 12px;
  color: var(--color-muted);
  letter-spacing: 0.08em;
}
.brands__cta { text-align: center; margin-top: 40px; }

@media (max-width: 720px) {
  .brands__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============ ご注文速報 ============ */

.orders { background: var(--color-bg); }
.orders__head { text-align: center; margin-bottom: 32px; }
.orders__head h2 { font-size: clamp(24px, 3.5vw, 36px); margin: 0 0 12px; }
.orders__head p { color: var(--color-muted); font-size: 14px; margin: 0; }
.orders__frame {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  padding: 8px;
  max-width: 960px;
  margin-inline: auto;
}
.orders__frame iframe {
  width: 100%;
  height: 480px;
  border: 0;
  display: block;
}

/* ============ 信頼バッジ ============ */

.trust { background: var(--color-surface); }
.trust__head { text-align: center; margin-bottom: 48px; }
.trust__head h2 { font-size: clamp(24px, 3.5vw, 36px); margin: 0; }
.trust__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.trust-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 32px 24px;
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  transition: transform 0.3s, box-shadow 0.3s;
}
a.trust-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.trust-card img { max-width: 200px; margin-bottom: 16px; height: auto; }
.trust-card__icon { color: var(--color-accent); margin-bottom: 16px; }
.trust-card h3 { font-size: 16px; color: var(--color-accent); margin-bottom: 8px; }
.trust-card p { font-size: 12px; color: var(--color-muted); margin: 0; line-height: 1.8; }

@media (max-width: 880px) {
  .trust__grid { grid-template-columns: 1fr; }
}

/* ============ CTA ============ */

.cta {
  background: var(--color-accent);
  color: #fff;
  padding-block: clamp(56px, 8vw, 80px);
}
.cta__inner { text-align: center; max-width: 720px; }
.cta .eyebrow { color: #d4b864; }
.cta h2 { color: #fff; font-size: clamp(28px, 4vw, 40px); margin-bottom: 16px; }
.cta p { color: rgba(255,255,255,0.85); font-size: 15px; line-height: 1.9; margin-bottom: 32px; }
.cta__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.cta .btn { background: #fff; color: var(--color-accent); border-color: #fff; }
.cta .btn:hover { background: #d4b864; border-color: #d4b864; color: var(--color-accent); }
.cta .btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.5); }
.cta .btn--ghost:hover { background: #fff; color: var(--color-accent); border-color: #fff; }

/* ============ フッター ============ */

.footer {
  background: #0f1828;
  color: rgba(255,255,255,0.75);
  padding-top: 64px;
}
.footer__inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 56px;
}
.footer__brand {
  display: block;
  font-family: var(--font-serif);
  font-size: 18px;
  color: #fff;
  letter-spacing: 0.12em;
  margin-bottom: 4px;
}
.footer__brand-sub {
  display: block;
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.04em;
  margin-bottom: 20px;
}
.footer__address { font-size: 12px; line-height: 1.9; color: rgba(255,255,255,0.65); }
.footer__address strong { color: rgba(255,255,255,0.5); font-weight: 400; display: inline-block; min-width: 4em; }
.footer__address a { color: #d4b864; }
.footer__address a:hover { color: #fff; }

.footer__heading {
  display: block;
  font-size: 11px;
  color: #d4b864;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.footer__list { list-style: none; margin: 0; padding: 0; }
.footer__list li { margin-bottom: 8px; }
.footer__list a { font-size: 13px; color: rgba(255,255,255,0.7); transition: color 0.2s; }
.footer__list a:hover { color: #d4b864; }

.footer__payment { font-size: 12px; color: rgba(255,255,255,0.7); line-height: 1.7; margin-bottom: 16px; }
.footer__payment small { color: rgba(255,255,255,0.45); }

.footer__sns { display: flex; gap: 12px; list-style: none; margin: 0; padding: 0; }
.footer__sns a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  color: rgba(255,255,255,0.7);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.footer__sns a:hover { background: #d4b864; color: #0f1828; border-color: #d4b864; }

.footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-block: 24px;
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  letter-spacing: 0.06em;
}
.footer__bottom p { margin: 0; }
.footer__bottom ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 20px; }
.footer__bottom a { color: rgba(255,255,255,0.4); transition: color 0.2s; }
.footer__bottom a:hover { color: #d4b864; }

@media (max-width: 960px) {
  .footer__inner { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 600px) {
  .footer__inner { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; }
}

/* ============ 共通 ============ */

.page-head { text-align: center; margin-bottom: 56px; }
.page-head h1 { font-size: clamp(28px, 4vw, 40px); margin: 0; color: var(--color-accent); }

.posts__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 32px; }
.post {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  padding: 24px;
  transition: transform 0.3s, box-shadow 0.3s;
}
.post:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.post__title { font-size: 16px; color: var(--color-accent); margin-bottom: 8px; }
.post__excerpt { font-size: 13px; color: var(--color-muted); margin: 0; }
.post__thumb img { width: 100%; height: auto; margin-bottom: 16px; }

.pagination { margin-top: 56px; display: flex; justify-content: center; }
.pagination .nav-links { display: flex; gap: 8px; flex-wrap: wrap; }
.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding-inline: 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  font-size: 13px;
}
.pagination .page-numbers:hover { border-color: var(--color-accent); color: var(--color-accent); }
.pagination .current { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }

/* =============================================================
   下層ページ（記事一覧・個別記事・固定ページ）
   ============================================================= */

/* 記事一覧 */
.posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 32px;
}
.post-card {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  transition: transform 0.3s, box-shadow 0.3s;
}
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.post-card__link { display: block; }
.post-card__thumb img { width: 100%; height: 220px; object-fit: cover; }
.post-card__body { padding: 24px; }
.post-card__meta {
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 12px;
  color: var(--color-muted);
  letter-spacing: 0.06em;
  margin-bottom: 12px;
}
.post-card__meta span {
  padding: 2px 8px;
  background: var(--color-bg);
  border-radius: 2px;
}
.post-card__title {
  font-size: 17px;
  line-height: 1.5;
  margin-bottom: 10px;
  color: var(--color-accent);
}
.post-card__excerpt {
  font-size: 13px;
  color: var(--color-muted);
  line-height: 1.7;
  margin-bottom: 16px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.post-card__more { font-size: 12px; color: var(--color-gold); letter-spacing: 0.08em; }

/* 個別記事ページ */
.single-article__inner {
  max-width: 800px;
  margin-inline: auto;
}
.single-article__head { margin-bottom: 36px; }
.single-article .post__meta {
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 12px;
  color: var(--color-muted);
  letter-spacing: 0.06em;
  margin-bottom: 12px;
}
.single-article .post__meta span {
  padding: 2px 8px;
  background: var(--color-bg);
  border-radius: 2px;
}
.single-article__title {
  font-size: clamp(24px, 3.5vw, 36px);
  color: var(--color-accent);
  margin-block: 0;
}
.single-article__thumb { margin-bottom: 36px; }
.single-article__thumb img { width: 100%; height: auto; }
.single-article__body {
  font-size: 16px;
  line-height: 1.95;
}
.single-article__body img { margin-block: 24px; border-radius: 2px; }
.single-article__body h2 {
  font-size: 24px;
  margin-block: 48px 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-line);
}
.single-article__body h3 { font-size: 20px; margin-block: 32px 12px; color: var(--color-accent); }
.single-article__body blockquote {
  margin: 24px 0;
  padding: 16px 24px;
  border-left: 3px solid var(--color-gold);
  color: var(--color-muted);
  background: var(--color-surface);
}
.single-article__nav {
  display: flex;
  justify-content: space-between;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--color-line);
  font-size: 13px;
  gap: 16px;
}
.single-article__nav .next { margin-left: auto; }

/* 404 */
.error404 { text-align: center; padding-block: clamp(64px, 10vw, 120px); }
.error404 .eyebrow { color: var(--color-gold); }
.error404 h1 { font-size: clamp(28px, 4vw, 40px); color: var(--color-accent); margin-bottom: 16px; }
.error404 p { color: var(--color-muted); margin-bottom: 24px; line-height: 1.9; }
.error404 .btn + .btn { margin-left: 8px; }

/* 共通：ページ見出し */
.page-head { text-align: center; margin-bottom: 56px; }
.page-head h1 { font-size: clamp(28px, 4vw, 40px); margin: 0; color: var(--color-accent); }

/* =============================================================
   Instagram セクション
   ============================================================= */

.ig { background: var(--color-surface); }
.ig__head { text-align: center; margin-bottom: 48px; }
.ig__head h2 { font-size: clamp(24px, 3.5vw, 36px); margin: 0 0 12px; }
.ig__head p { color: var(--color-muted); font-size: 14px; margin: 0; }

.ig__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.ig__cell {
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, #f3efe8 0%, #e5e0d4 100%);
  display: block;
  overflow: hidden;
  position: relative;
  transition: transform 0.3s;
}
.ig__cell:hover { transform: scale(1.02); }
.ig__cell::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-accent);
  opacity: 0;
  transition: opacity 0.3s;
}
.ig__cell:hover::after { opacity: 0.85; }
.ig__inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px;
  z-index: 2;
}
.ig__icon { color: var(--color-accent); transition: color 0.3s; }
.ig__cell:hover .ig__icon { color: #fff; }
.ig__caption {
  font-size: 11px;
  color: var(--color-muted);
  line-height: 1.5;
  transition: color 0.3s;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.ig__cell:hover .ig__caption { color: rgba(255,255,255,0.95); }

.ig__notice {
  text-align: center;
  margin-top: 24px;
  color: var(--color-muted);
  font-size: 12px;
}

.ig__cta { text-align: center; margin-top: 40px; }

/* Smash Balloon プラグイン使用時の見た目調整 */
.ig #sb_instagram, .ig .sbi_photo_wrap, .ig .sb_instagram_header {
  margin: 0 auto !important;
}
.ig #sb_instagram .sbi_load { text-align: center !important; margin-top: 24px !important; }

@media (max-width: 760px) {
  .ig__grid { grid-template-columns: repeat(2, 1fr); }
}

/* =============================================================
   商品アーカイブ
   ============================================================= */

.archive-products__head {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-line);
  padding-block: clamp(40px, 6vw, 64px);
  text-align: center;
}
.archive-products__head h1 {
  font-size: clamp(28px, 4vw, 40px);
  margin: 8px 0 12px;
  color: var(--color-accent);
}
.archive-products__head p {
  color: var(--color-muted);
  font-size: 14px;
  margin: 0;
  max-width: 720px;
  margin-inline: auto;
}
.archive-products__inner { padding-block: clamp(40px, 6vw, 80px); }
.archive-products__count { text-align: right; color: var(--color-muted); margin-bottom: 20px; }

.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.product-card {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  transition: transform 0.3s, box-shadow 0.3s;
}
.product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.product-card__link { display: block; }
.product-card__img {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--color-bg);
}
.product-card__img img {
  width: 100%; height: 100%; object-fit: cover;
}
.product-card__noimg {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-muted); font-size: 12px; letter-spacing: 0.1em;
}
.product-card__body { padding: 14px; }
.product-card__brand {
  font-size: 11px; letter-spacing: 0.15em;
  color: var(--color-gold);
  text-transform: uppercase;
  display: block; margin-bottom: 4px;
}
.product-card__title {
  font-size: 13px; line-height: 1.5; margin: 0 0 6px;
  color: var(--color-accent); font-weight: 500;
  font-family: var(--font-sans);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.product-card__sku { font-size: 11px; color: var(--color-muted); }

@media (max-width: 1080px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .product-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }

/* =============================================================
   商品詳細
   ============================================================= */

.product { padding-block: clamp(24px, 4vw, 48px); }
.product__crumbs {
  font-size: 12px; color: var(--color-muted); letter-spacing: 0.04em;
  margin-bottom: 24px;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.product__crumbs span { color: var(--color-line); }
.product__crumbs a:hover { color: var(--color-accent); }

.product__layout {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
}
.product__crumbs { grid-column: 1 / -1; }

.product__main-img {
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  overflow: hidden;
}
.product__main-img img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 4 / 3; object-fit: cover;
}
.product__thumbs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin-top: 8px;
}
.product__thumb {
  display: block;
  border: 1px solid var(--color-line);
  background: var(--color-bg);
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.product__thumb img { width: 100%; height: 100%; object-fit: cover; }
.product__thumb:hover { border-color: var(--color-accent); }

.product__info { padding-top: 16px; }
.product__sku {
  display: inline-block;
  font-size: 11px; letter-spacing: 0.2em;
  color: var(--color-gold);
  border: 1px solid var(--color-gold);
  padding: 3px 10px;
  margin-bottom: 16px;
}
.product__title {
  font-size: clamp(22px, 3vw, 30px);
  color: var(--color-accent);
  margin: 0 0 8px;
  line-height: 1.4;
}
.product__date { color: var(--color-muted); margin-bottom: 28px; }

.product__cta {
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  padding: 24px;
  margin-bottom: 28px;
}
.product__cta .btn--lg {
  display: flex !important;
  width: 100%;
  justify-content: center;
  font-size: 15px !important;
  padding: 18px 32px !important;
  letter-spacing: 0.14em !important;
}
.product__cta-note {
  margin: 12px 0 0;
  text-align: center;
  color: var(--color-muted);
  font-size: 11px;
  line-height: 1.7;
}

.product__spec {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-line);
}
.product__spec-row {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--color-line);
  font-size: 13px;
}
.product__spec-row dt {
  color: var(--color-muted);
  letter-spacing: 0.08em;
  font-size: 12px;
}
.product__spec-row dd { margin: 0; }
.product__spec-row dd a {
  color: var(--color-accent);
  border-bottom: 1px solid transparent;
}
.product__spec-row dd a:hover { border-bottom-color: var(--color-gold); color: var(--color-gold); }
.product__spec-row dd .dot { color: var(--color-line); margin: 0 6px; }

/* 説明文ブロック */
.product__desc {
  margin-top: 64px;
  padding-block: 48px;
  background: var(--color-surface);
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}
.product__desc-inner {
  max-width: 760px;
  margin-inline: auto;
}
.product__desc h2 {
  font-size: 22px;
  color: var(--color-accent);
  margin: 0 0 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-line);
}
.product__desc p { line-height: 1.95; }
.product__desc img { margin-block: 20px; max-width: 100%; height: auto; }

/* 下部CTA */
.product__cta-bottom {
  margin-top: 48px;
  text-align: center;
}
.product__cta-bottom .btn--lg {
  font-size: 15px !important;
  padding: 18px 48px !important;
  letter-spacing: 0.14em !important;
}

/* 関連商品 */
.product__related {
  margin-top: 64px;
  padding-top: 48px;
  border-top: 1px solid var(--color-line);
}
.product__related h2 {
  font-size: 22px; color: var(--color-accent);
  margin: 0 0 24px;
  text-align: center;
}
.product__related-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.rel-card {
  display: block;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  transition: transform 0.3s, box-shadow 0.3s;
}
.rel-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.rel-card__img { aspect-ratio: 1 / 1; overflow: hidden; background: var(--color-bg); }
.rel-card__img img { width: 100%; height: 100%; object-fit: cover; }
.rel-card__title {
  margin: 0;
  padding: 12px 14px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-accent);
  font-family: var(--font-sans);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* 前後ナビ */
.product__nav {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--color-line);
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  gap: 16px;
}
.product__nav .next { margin-left: auto; }

@media (max-width: 880px) {
  .product__layout { grid-template-columns: 1fr; gap: 24px; }
  .product__related-grid { grid-template-columns: repeat(2, 1fr); }
}

/* =============================================================
   商品カテゴリナビゲーション（共通コンポーネント）
   ============================================================= */

.sfy-prodnav {
  font-family: var(--font-sans);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
}
.sfy-prodnav__group {
  border-bottom: 1px solid var(--color-line);
  padding: 18px 20px;
}
.sfy-prodnav__group:last-child { border-bottom: 0; }
.sfy-prodnav__heading {
  font-family: var(--font-serif);
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--color-accent);
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-line);
  position: relative;
}
.sfy-prodnav__heading::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  width: 24px; height: 1px;
  background: var(--color-gold);
}
.sfy-prodnav__list, .sfy-prodnav__sublist {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sfy-prodnav__list > li {
  border-bottom: 1px dotted var(--color-line);
  padding: 6px 0;
  font-size: 13px;
}
.sfy-prodnav__list > li:last-child { border-bottom: 0; }
.sfy-prodnav__list > li > a {
  display: block;
  color: var(--color-text);
  padding: 4px 0;
  transition: color 0.2s;
}
.sfy-prodnav__list > li > a:hover { color: var(--color-accent); }
.sfy-prodnav__sublist {
  margin: 4px 0 0 12px;
  padding-left: 12px;
  border-left: 1px solid var(--color-line);
}
.sfy-prodnav__sublist li {
  font-size: 12px;
  padding: 3px 0;
}
.sfy-prodnav__sublist li a { color: var(--color-muted); }
.sfy-prodnav__sublist li a:hover { color: var(--color-accent); }

.sfy-prodnav__banners {
  padding: 18px 20px;
  display: grid;
  gap: 10px;
  border-top: 1px solid var(--color-line);
  background: var(--color-bg);
}
.sfy-prodnav__banner {
  display: block;
  padding: 14px 16px;
  background: var(--color-accent);
  color: #fff !important;
  text-decoration: none !important;
  border-radius: 2px;
  transition: transform 0.2s, box-shadow 0.2s;
}
.sfy-prodnav__banner:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(26,42,71,0.16);
  color: #fff !important;
}
.sfy-prodnav__banner strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 13px;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}
.sfy-prodnav__banner small {
  display: block;
  font-size: 10px;
  color: rgba(255,255,255,0.65);
  letter-spacing: 0.04em;
}
.sfy-prodnav__banner--gold {
  background: var(--color-gold);
}
.sfy-prodnav__banner--gold:hover {
  box-shadow: 0 6px 18px rgba(167,139,60,0.25);
}

/* グリッド版（トップページなど横並び表示用） */
.sfy-prodnav-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--color-line);
  border: 1px solid var(--color-line);
}
.sfy-prodnav-grid .sfy-prodnav__group {
  background: var(--color-surface);
  border-bottom: 0;
}
.sfy-prodnav-grid .sfy-prodnav__banners {
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 880px) {
  .sfy-prodnav-grid { grid-template-columns: repeat(2, 1fr); }
  .sfy-prodnav-grid .sfy-prodnav__banners { grid-template-columns: 1fr; }
}


/* ============================================================
   フッター上部：カテゴリショーケース・行動導線CTA
   ============================================================ */

.footer-shelf {
  background: #fafaf7;
  padding: 56px 0 48px;
  border-top: 1px solid #e5e2dc;
}
.footer-shelf__head {
  text-align: center;
  margin-bottom: 40px;
}
.footer-shelf__head .eyebrow {
  font-size: 11px;
  letter-spacing: 0.3em;
  color: #a78b3c;
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 8px;
}
.footer-shelf__head h2 {
  font-family: "Noto Serif JP", serif;
  font-size: clamp(20px, 3vw, 28px);
  color: #1a2a47;
  margin: 0;
  letter-spacing: 0.04em;
}
.footer-shelf__cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
}
.footer-shelf__col {
  background: #fff;
  border: 1px solid #e5e2dc;
  padding: 18px;
}
.footer-shelf__col h3 {
  font-family: "Noto Serif JP", serif;
  font-size: 13px;
  color: #1a2a47;
  letter-spacing: 0.06em;
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e5e2dc;
  position: relative;
}
.footer-shelf__col h3::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  width: 24px; height: 1px;
  background: #a78b3c;
}
.footer-shelf__col ul {
  list-style: none;
  padding: 0;
  margin: 0 0 10px;
}
.footer-shelf__col ul li {
  padding: 4px 0;
  font-size: 12px;
}
.footer-shelf__col ul li a {
  color: #1a1a1a;
  text-decoration: none;
}
.footer-shelf__col ul li a:hover { color: #1a2a47; text-decoration: underline; }
.footer-shelf__more {
  display: inline-block;
  font-size: 11px;
  color: #a78b3c;
  letter-spacing: 0.06em;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.footer-shelf__more:hover { color: #1a2a47; }

@media (max-width: 1080px) {
  .footer-shelf__cols { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .footer-shelf__cols { grid-template-columns: 1fr; }
}

/* 行動導線CTA */
.footer-cta {
  background: #1a2a47;
  padding: 32px 0;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.footer-cta__inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255,255,255,0.08);
  max-width: 1200px;
  margin: 0 auto;
}
.footer-cta__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px 16px;
  background: #1a2a47;
  color: #fff !important;
  text-decoration: none !important;
  transition: background 0.2s;
}
.footer-cta__item:hover { background: #2a3d63; color: #fff !important; }
.footer-cta__icon {
  color: #d4b864;
  margin-bottom: 8px;
}
.footer-cta__item strong {
  display: block;
  font-family: "Noto Serif JP", serif;
  font-size: 13px;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}
.footer-cta__item small {
  display: block;
  font-size: 10px;
  color: rgba(255,255,255,0.6);
  letter-spacing: 0.04em;
}

@media (max-width: 720px) {
  .footer-cta__inner { grid-template-columns: repeat(2, 1fr); }
}


/* ============================================================
   ご注文速報 — ダッシュボード風パネル
   ============================================================ */

.orders {
  background: var(--color-surface);
  border-top: 1px solid var(--color-line);
}
.orders__head {
  text-align: center;
  margin-bottom: 36px;
}
.orders__head h2 {
  font-family: var(--font-serif);
  font-size: clamp(22px, 3vw, 32px);
  color: var(--color-accent);
  margin: 0 0 12px;
  position: relative;
  display: inline-block;
  padding-bottom: 12px;
}
.orders__head h2::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 0;
  width: 32px; height: 2px;
  background: var(--color-gold);
  transform: translateX(-50%);
}
.orders__head p { color: var(--color-muted); font-size: 14px; line-height: 1.8; margin: 0; }

.orders__panel {
  max-width: 1000px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: 4px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.05);
  overflow: hidden;
}

.orders__panel-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  background: var(--color-accent);
  color: #fff;
  font-size: 12px;
  letter-spacing: 0.06em;
  flex-wrap: wrap;
}
.orders__panel-bar strong {
  color: #fff;
  font-family: var(--font-serif);
  letter-spacing: 0.18em;
  font-size: 11px;
}
.orders__panel-dot {
  display: inline-block;
  width: 8px; height: 8px;
  background: #ff5252;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(255, 82, 82, 0.5);
  animation: orders-pulse 2s infinite;
}
@keyframes orders-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 82, 82, 0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(255, 82, 82, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 82, 82, 0); }
}
.orders__panel-meta {
  font-size: 11px;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.04em;
}
.orders__panel-meta time { color: #fff; font-weight: 500; }
.orders__panel-link {
  margin-left: auto;
  font-size: 11px;
  color: var(--color-gold);
  letter-spacing: 0.06em;
  border-bottom: 1px solid rgba(212,184,100,0.4);
  padding-bottom: 1px;
}
.orders__panel-link:hover { color: #fff; border-color: #fff; }

.orders__frame {
  background: #fafaf7;
  padding: 4px;
  position: relative;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.orders__frame iframe {
  width: 100%;
  min-width: 720px;
  height: 480px;
  border: 0;
  display: block;
  background: #fff;
}

/* レジェンド（説明バッジ） */
.orders__legend {
  max-width: 1000px;
  margin: 24px auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.orders__legend-item {
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  padding: 14px 18px;
  border-left: 3px solid var(--color-gold);
}
.orders__legend-item strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 13px;
  color: var(--color-accent);
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}
.orders__legend-item small { font-size: 11px; color: var(--color-muted); line-height: 1.6; }

@media (max-width: 720px) {
  .orders__legend { grid-template-columns: 1fr; }
  .orders__panel-bar { font-size: 11px; padding: 10px 14px; }
  .orders__panel-link { margin-left: 0; flex-basis: 100%; text-align: right; margin-top: 4px; }
  .orders__frame iframe { height: 360px; }
}

/* ============================================================
   横長ブランドロゴ対応（管理画面 → カスタマイズ → サイト基本情報 → ロゴ）
   ============================================================ */





@media (max-width: 760px) {
  
}



/* ロゴサイズを縮小（横長ロゴでも48px以下に） */



@media (max-width: 760px) {
  
}

/* ヘッダー高さの上限 */
.site-header__inner { min-height: 72px; }


/* メインカラム内の section と container をリセット */




/* レスポンシブ：960px以下で縦並び */
@media (max-width: 960px) {
  
  
}

/* =================================================================
   v23: ロゴサイズ＆2カラムレイアウト 強力上書き
   ================================================================= */

/* ---- ロゴ ---- */
.site-header img.custom-logo,
.site-header .custom-logo-link img,
.site-header__brand--custom img {
  max-width: 200px !important;
  max-height: 44px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: inline-block !important;
}
.site-header .custom-logo-link {
  display: inline-flex !important;
  align-items: center !important;
  line-height: 0 !important;
}
@media (max-width: 760px) {
  .site-header img.custom-logo,
  .site-header .custom-logo-link img,
  .site-header__brand--custom img {
    max-width: 140px !important;
    max-height: 34px !important;
  }
}
.site-header__inner { min-height: 64px !important; padding-block: 8px !important; }

/* ---- 2カラム（トップページ） ---- */
.front-with-sidebar {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 280px !important;
  gap: 32px !important;
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 24px !important;
  align-items: start !important;
  box-sizing: border-box !important;
}
.front-with-sidebar > .front-with-sidebar__main {
  min-width: 0 !important;
  max-width: 100% !important;
  grid-column: 1 !important;
}
.front-with-sidebar > .front-with-sidebar__side {
  min-width: 0 !important;
  grid-column: 2 !important;
  position: sticky !important;
  top: 88px !important;
  align-self: start !important;
}

/* メインカラム内の section / container 内側の余白リセット */
.front-with-sidebar__main > section.section {
  padding-block: clamp(24px, 4vw, 48px) !important;
  margin: 0 !important;
}
.front-with-sidebar__main > section.section > .container,
.front-with-sidebar__main > section.section > div.container,
.front-with-sidebar__main .section > .container {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ヒーロー / お知らせバーは2カラムの外（front-page.phpの構造どおり）。
   念のため2カラム内に入れても全幅で見えるように。 */
.hero, .notice-bar {
  width: 100% !important;
  max-width: 100% !important;
}

/* レスポンシブ：960px以下で1カラム */
@media (max-width: 960px) {
  .front-with-sidebar {
    grid-template-columns: 1fr !important;
    padding: 16px !important;
    gap: 0 !important;
  }
  .front-with-sidebar > .front-with-sidebar__side {
    position: static !important;
    grid-column: 1 !important;
    margin-top: 32px !important;
  }
}

/* =================================================================
   v24: ロゴ更にコンパクト＆フッターのカテゴリ重複削除指示
   ================================================================= */

.site-header img.custom-logo,
.site-header .custom-logo-link img,
.site-header__brand--custom img {
  max-width: 160px !important;
  max-height: 36px !important;
}
@media (max-width: 760px) {
  .site-header img.custom-logo,
  .site-header .custom-logo-link img,
  .site-header__brand--custom img {
    max-width: 120px !important;
    max-height: 28px !important;
  }
}
.site-header__inner { min-height: 56px !important; padding-block: 4px !important; }

/* =================================================================
   v40: サイドバー商品カテゴリ・アコーディオン化（CSS + JS のみで実装）
   既存 HTML（.sfy-prodnav__group > .sfy-prodnav__heading + .sfy-prodnav__list）に
   .sfy-acc-ready クラスが付くと折り畳まれ、見出しクリックで開閉する。
   ================================================================= */
.sfy-prodnav.sfy-acc-ready .sfy-prodnav__heading {
  cursor: pointer;
  user-select: none;
  position: relative;
  padding-right: 24px !important;
}
.sfy-prodnav.sfy-acc-ready .sfy-prodnav__heading::after {
  content: "+";
  position: absolute;
  right: 6px; top: 50%;
  transform: translateY(-60%);
  font-size: 16px;
  color: var(--color-gold, #a78b3c);
  transition: transform 0.2s;
}
.sfy-prodnav.sfy-acc-ready .sfy-prodnav__group.is-open .sfy-prodnav__heading::after {
  content: "−";
}
.sfy-prodnav.sfy-acc-ready .sfy-prodnav__list {
  display: none;
}
.sfy-prodnav.sfy-acc-ready .sfy-prodnav__group.is-open .sfy-prodnav__list {
  display: block;
}
/* キーボード操作可能性のためフォーカス時のアウトライン */
.sfy-prodnav.sfy-acc-ready .sfy-prodnav__heading:focus-visible {
  outline: 2px solid var(--color-gold, #a78b3c);
  outline-offset: 2px;
}

/* =================================================================
   v41: 商品グリッド（.sfy-pgrid）4列／タブレット3列／スマホ2列／極小1列
   order-refine.css 側にも同様の定義あり。ここでは main.css 経由でも
   確実に効かせるための保険ルール。
   ================================================================= */
.sfy-pgrid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 24px 0 !important;
}
.sfy-pgrid > .sfy-pgrid__item,
.sfy-pgrid > div {
  width: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  min-width: 0 !important;
}
.sfy-pgrid .product-card {
  background: #fff;
  border: 1px solid #e5e2dc;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.sfy-pgrid .product-card a {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}
.sfy-pgrid .product-card__img {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #fafaf7;
}
.sfy-pgrid .product-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 1080px) {
  .sfy-pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 720px) {
  .sfy-pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
}
@media (max-width: 360px) {
  .sfy-pgrid { grid-template-columns: 1fr !important; }
}

/* =================================================================
   v43: ヘッダーレイアウト強制（カスタムロゴで崩れる対策）＋検索ボックス
   ================================================================= */

/* ヘッダーは必ず1行で「ブランド｜ナビ｜アクション」の3カラムで並べる */
.site-header__inner {
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  align-items: center !important;
  gap: 24px !important;
  position: relative;
  flex-wrap: nowrap !important;
}
.site-header__brand,
.site-header__brand--custom {
  display: inline-flex !important;
  align-items: center;
  gap: 12px;
  min-width: 0;
  max-width: 280px;
}
.site-header__brand--custom .custom-logo-link {
  display: inline-flex !important;
  align-items: center !important;
  line-height: 0 !important;
}
.site-header__brand img,
.site-header img.custom-logo,
.site-header .custom-logo-link img,
.site-header__brand--custom img {
  max-width: 200px !important;
  max-height: 44px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}
.site-header__nav {
  min-width: 0;
}
.site-header__nav ul {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  gap: 20px !important;
  white-space: nowrap !important;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-header__actions {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}

@media (max-width: 1080px) {
  .site-header__nav ul { gap: 14px !important; }
  .site-header__nav a { font-size: 12px !important; }
  .site-header__brand,
  .site-header__brand--custom { max-width: 200px !important; }
}
@media (max-width: 760px) {
  .site-header__brand,
  .site-header__brand--custom { max-width: 50vw !important; }
  .site-header img.custom-logo,
  .site-header .custom-logo-link img,
  .site-header__brand--custom img {
    max-width: 140px !important;
    max-height: 32px !important;
  }
}

/* ----- 検索ポップオーバー（検索アイコンクリックで展開） ----- */
.sfy-search-popover {
  position: absolute;
  top: 100%;
  right: 16px;
  margin-top: 6px;
  background: #fff;
  border: 1px solid var(--color-line, #e5e2dc);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  padding: 10px;
  display: none;
  align-items: center;
  gap: 6px;
  z-index: 60;
  border-radius: 2px;
}
.sfy-search-popover.is-open { display: flex; }
.sfy-search-popover input[type="search"] {
  width: clamp(220px, 38vw, 360px);
  padding: 8px 12px;
  border: 1px solid var(--color-line, #e5e2dc);
  border-radius: 2px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
  color: var(--color-text, #1a1a1a);
}
.sfy-search-popover input[type="search"]:focus {
  outline: 0;
  border-color: var(--color-accent, #1a2a47);
  box-shadow: 0 0 0 3px rgba(26,42,71,0.08);
}
.sfy-search-popover button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  background: var(--color-accent, #1a2a47);
  color: #fff;
  cursor: pointer;
  border-radius: 2px;
}
.sfy-search-popover button[type="submit"]:hover {
  background: var(--color-accent-hover, #2a3d63);
}
@media (max-width: 760px) {
  .sfy-search-popover { right: 8px; left: 8px; padding: 8px; }
  .sfy-search-popover input[type="search"] { width: 100%; min-width: 0; flex: 1; }
}

/* =================================================================
   v44: オーダーフォーム／商品詳細用ヘッダー（header-ordersystem.php）の
   レイアウト調整。.navbar.siteHeader、#header-top、.siteHeadContainer、
   .gMenu を 1 行で横並びに見せる。
   ================================================================= */

/* 全体のリセット：レガシーの Lightning Pro 由来 navbar をクリーンに */
.navbar.siteHeader {
  background: #fff !important;
  border-bottom: 1px solid #e5e2dc !important;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02) !important;
  border-radius: 0 !important;
  margin: 0 !important;
  position: relative !important;
}

/* 上部の細いユーティリティバー（実店舗のご紹介・お問い合わせ・マイページ） */
.navbar.siteHeader #header-top {
  background: #1a2a47 !important;
  color: rgba(255,255,255,0.85) !important;
  padding: 6px 0 !important;
  border-bottom: 0 !important;
}
.navbar.siteHeader #header-top-wrapper {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.navbar.siteHeader #header-top #logo {
  font-family: "Shippori Mincho", "Noto Serif JP", serif !important;
  font-size: 13px !important;
  letter-spacing: 0.08em !important;
  color: rgba(255,255,255,0.95) !important;
  margin: 0;
}
.navbar.siteHeader #header-top ul {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 18px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.navbar.siteHeader #header-top li { margin: 0 !important; }
.navbar.siteHeader #header-top a {
  color: rgba(255,255,255,0.85) !important;
  font-size: 12px !important;
  letter-spacing: 0.04em !important;
  text-decoration: none !important;
}
.navbar.siteHeader #header-top a:hover { color: #d4b864 !important; }

/* ロゴ・グローバルメニュー・検索アイコンを横並びに */
.navbar.siteHeader .siteHeadContainer {
  max-width: 1280px;
  margin: 0 auto;
  padding: 12px 24px !important;
  position: relative;
}
.navbar.siteHeader .navbar-header {
  display: flex !important;
  align-items: center !important;
  gap: 24px !important;
  justify-content: flex-start !important;
}
.navbar.siteHeader .navbar-brand.siteHeader_logo {
  margin: 0 !important;
  padding: 0 !important;
  height: auto !important;
}
.navbar.siteHeader .siteHeader_logo a,
.navbar.siteHeader .siteHeader_logo img {
  display: inline-flex !important;
  align-items: center;
  max-height: 44px !important;
  width: auto !important;
}
.navbar.siteHeader .siteHeader_logo img.custom-logo {
  max-width: 200px !important;
  max-height: 44px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
}

/* 検索フォーム（コアの get_search_form()） */
.navbar.siteHeader .navbar-header form.search-form,
.navbar.siteHeader .navbar-header #searchform {
  display: flex !important;
  align-items: center;
  margin: 0 0 0 auto !important;
  flex: 0 0 auto;
  max-width: 320px;
}
.navbar.siteHeader form.search-form input[type="search"],
.navbar.siteHeader #searchform input[type="search"],
.navbar.siteHeader #searchform input.search-field {
  border: 1px solid #e5e2dc !important;
  border-radius: 2px 0 0 2px !important;
  padding: 6px 12px !important;
  font-size: 13px !important;
  width: 200px !important;
  background: #fff !important;
}
.navbar.siteHeader form.search-form button,
.navbar.siteHeader form.search-form input[type="submit"],
.navbar.siteHeader #searchform input[type="submit"] {
  border: 0 !important;
  background: #1a2a47 !important;
  color: #fff !important;
  padding: 6px 14px !important;
  font-size: 12px !important;
  border-radius: 0 2px 2px 0 !important;
  margin-left: -1px;
  cursor: pointer;
}

/* グローバルメニュー（.gMenu） */
.navbar.siteHeader ul.gMenu {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 20px !important;
  list-style: none !important;
  margin: 0 0 0 24px !important;
  padding: 0 !important;
  white-space: nowrap;
}
.navbar.siteHeader ul.gMenu > li { margin: 0 !important; }
.navbar.siteHeader ul.gMenu > li > a {
  display: inline-block;
  padding: 6px 4px !important;
  font-size: 13px !important;
  letter-spacing: 0.08em;
  color: #1a2a47 !important;
  text-decoration: none !important;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s, color 0.2s;
}
.navbar.siteHeader ul.gMenu > li > a:hover {
  color: #a78b3c !important;
  border-bottom-color: #a78b3c;
}

/* レガシーのドロップダウンアイコン（fas fa-bars 等）非表示 */
.navbar.siteHeader .fa-bars,
.navbar.siteHeader .menu-btn,
.navbar.siteHeader .menuBtn { display: none !important; }
.navbar.siteHeader .header-search-btn { display: none !important; }

/* refine（検索絞り込み）パネル：閉じている状態をデフォルトに */
.header-refine-wrapper { display: none; }
.header-refine-wrapper.is-open { display: block; }

/* レスポンシブ：920px 以下 */
@media (max-width: 920px) {
  .navbar.siteHeader .navbar-header { flex-wrap: wrap; gap: 12px; }
  .navbar.siteHeader ul.gMenu {
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin: 8px 0 0 0 !important;
  }
  .navbar.siteHeader ul.gMenu > li > a { font-size: 12px !important; }
  .navbar.siteHeader form.search-form input[type="search"],
  .navbar.siteHeader #searchform input.search-field { width: 140px !important; }
}
@media (max-width: 640px) {
  .navbar.siteHeader #header-top ul { display: none !important; }
  .navbar.siteHeader #header-top #logo { font-size: 11px !important; }
  .navbar.siteHeader .siteHeader_logo img.custom-logo { max-width: 140px !important; max-height: 32px !important; }
  .navbar.siteHeader form.search-form input[type="search"],
  .navbar.siteHeader #searchform input.search-field { width: 110px !important; font-size: 12px !important; padding: 5px 8px !important; }
}

/* オーダーフォームの本文ページタイトル（メンズ／レディース） */
body.page-mens_order .pageHead,
body.page-ladys_order .pageHead {
  background: #fafaf7 !important;
  padding: 24px 0 !important;
  text-align: center;
}
body.page-mens_order .pageHead_pageTitle,
body.page-ladys_order .pageHead_pageTitle {
  font-family: "Shippori Mincho", "Noto Serif JP", serif !important;
  font-size: 22px !important;
  color: #1a2a47 !important;
  margin: 0 !important;
  letter-spacing: 0.06em;
}

/* =================================================================
   v45: ヘッダーレイアウト最終調整
   - .site-header__toggle（ハンバーガー）が PC でグリッド上に残って
     4 つ目の子要素として行末送りされ、結果 .site-header__actions が
     新しい行に折り返してしまうのを防ぐ
   - カスタムロゴ未使用時のサークルアイコン（44x44 円形）を v43 の
     画像サイズ強制ルールが壊していたので、その場合だけ除外する
   ================================================================= */

/* PCではハンバーガー完全に隠す（グリッドからも除外） */
@media (min-width: 881px) {
  .site-header__toggle {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    grid-column: 0 / 0 !important;
  }
}

/* サークルアイコン（カスタムロゴ未使用時のデフォルト画像）を復活させる */
.site-header__brand:not(.site-header__brand--custom) > img.site-header__icon-logo {
  width: 44px !important;
  height: 44px !important;
  max-width: 44px !important;
  max-height: 44px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}

/* グリッドを必ず1行で並べる：4つの子要素があってもラップさせない */
.site-header__inner {
  grid-template-columns: auto 1fr auto !important;
  grid-template-rows: auto !important;
  grid-auto-flow: column !important;
  grid-auto-columns: max-content !important;
}

/* 4つ目（actions）が出ても、明示的に3列目に置く */
.site-header__inner > .site-header__brand,
.site-header__inner > .site-header__brand--custom { grid-column: 1 !important; grid-row: 1 !important; }
.site-header__inner > .site-header__nav { grid-column: 2 !important; grid-row: 1 !important; }
.site-header__inner > .site-header__actions { grid-column: 3 !important; grid-row: 1 !important; justify-self: end !important; }

/* =================================================================
   v46: トップページのロゴを左端に明示固定
   ================================================================= */
.site-header__inner > .site-header__brand,
.site-header__inner > .site-header__brand--custom {
  justify-self: start !important;
  margin-right: auto !important;
}

/* =================================================================
   v47: オーダーフォーム調整
   - 「ご注文までの流れ」セクション（.step を含む div）を非表示
   - スマホで .menuheader.expandable がタップで開かない問題対策
   ================================================================= */

/* 「ご注文までの流れ」のステップ案内ブロックを非表示 */
body.page-mens_order #order_form .step,
body.page-ladys_order #order_form .step,
body[class*="page-id-"] #order_form .step {
  display: none !important;
}
body.page-mens_order #order_form #ui-tab,
body.page-ladys_order #order_form #ui-tab,
body[class*="page-id-"] #order_form #ui-tab {
  display: none !important;
}

/* 襟・カフスのアコーディオン項目はタップ可能領域を明示し、cursor: pointer */
.menuheader.expandable {
  cursor: pointer !important;
  -webkit-tap-highlight-color: rgba(167,139,60,0.1);
  position: relative;
}

/* JS の sfy-acc-ready で初期化されたらネイティブのスタイル無効化 */
.sfy-acc-ready .menuheader.expandable { user-select: none; }
.sfy-acc-ready .menuheader.expandable.is-open { background: #fafaf7; }

/* =================================================================
   v48: スマホで生地写真を大きく + STEP5 オプションを必ず展開
   ================================================================= */

/* 生地写真の表示エリア（#itemImage, #itemImage_s）はスマホでは縦並びにして大きく */
@media (max-width: 720px) {
  body.page-mens_order #order_form table.tbl,
  body.page-ladys_order #order_form table.tbl {
    width: 100% !important;
    display: block !important;
  }
  body.page-mens_order #order_form table.tbl tbody,
  body.page-ladys_order #order_form table.tbl tbody {
    display: block !important;
  }
  body.page-mens_order #order_form table.tbl tr,
  body.page-ladys_order #order_form table.tbl tr {
    display: block !important;
    width: 100% !important;
  }
  /* STEP1 生地：イメージ表示の td を 100% 幅で縦並び */
  body.page-mens_order #itemImage,
  body.page-mens_order #itemImage_s,
  body.page-ladys_order #itemImage,
  body.page-ladys_order #itemImage_s {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 12px;
  }
  body.page-mens_order #itemImage img,
  body.page-mens_order #itemImage_s img,
  body.page-ladys_order #itemImage img,
  body.page-ladys_order #itemImage_s img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block;
  }
  /* STEP1 生地：tr 内の td を縦並びに */
  body.page-mens_order #order_form table.tbl > tbody > tr > td[width="50%"],
  body.page-ladys_order #order_form table.tbl > tbody > tr > td[width="50%"] {
    display: block !important;
    width: 100% !important;
  }
}

/* STEP5 オプションの外側ラッパー（#accordion_menu）を必ず開いた状態に強制
   – ddaccordion が外側 .menuheader をタップで閉じてしまうことがあるため、
     内側のアコーディオン（クレリック・ネーム刺繍・襟・カフス…）にアクセス
     できるよう外側コンテンツを常時表示する */
#accordion_menu > .categoryitems {
  display: block !important;
  height: auto !important;
}
/* 外側のラベル（「※オプション ［任意］」見出し）は装飾を簡素化 */
#accordion_menu > .menuheader.expandable {
  padding: 8px 0 !important;
  border-bottom: 1px solid #e5e2dc;
  cursor: default !important;
}
#accordion_menu > .menuheader.expandable > p {
  margin: 0;
  font-size: 13px;
  color: #6b6b6b;
}
#accordion_menu > .menuheader.expandable .statusicon { display: none !important; }

/* =================================================================
   v51: トップページ「はじめての方へ」CTA セクションを一旦非表示
   ================================================================= */
section.cta {
  display: none !important;
}

/* =================================================================
   v52: フッター上部「カテゴリから探す」(.footer-shelf) を非表示
   ================================================================= */
section.footer-shelf {
  display: none !important;
}

/* =================================================================
   v53: サイドバーの3バナー（店舗で採寸予約／千葉100選／JQ認定）を全削除
   フッターCTAの「店舗で採寸予約」リンクも削除
   ================================================================= */

/* サイドバーの3バナー（店舗で採寸予約・千葉を代表する企業100選・ジャパンクオリティ認定）を非表示 */
.sfy-prodnav__banners {
  display: none !important;
}

/* フッターCTAの「店舗で採寸予約」だけ非表示
   （footer-cta__inner の最初の子要素 a が「店舗で採寸予約」） */
.footer-cta__inner > a.footer-cta__item:first-child {
  display: none !important;
}

/* =================================================================
   v61: ヘッダーのロゴを中央配置（ナビ左・ロゴ中央・アイコン右）
   ※ header.php 側でカスタムロゴのアンカー入れ子崩れを解消済み。
     これまでロゴが右端に飛んでいたのは、<a>内に the_custom_logo() の
     <a> が入り、ブラウザが入れ子を分解して別グリッド項目になっていたため。
   ================================================================= */

/* ---- PC（881px以上）：ナビ左・ロゴ中央・アイコン右 ---- */
@media (min-width: 881px) {
  .site-header__inner {
    display: flex !important;
    grid-template-columns: none !important;
    align-items: center !important;
    gap: 16px !important;
    flex-wrap: nowrap !important;
  }
  .site-header__nav {
    order: 1 !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }
  .site-header__nav ul {
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
  }
  .site-header__brand,
  .site-header__brand--custom {
    order: 2 !important;
    flex: 0 0 auto !important;
    max-width: none !important;
    justify-content: center !important;
    text-align: center !important;
  }
  .site-header__actions {
    order: 3 !important;
    flex: 1 1 0 !important;
    justify-content: flex-end !important;
  }
}

/* ---- スマホ（880px以下）：ハンバーガー左・ロゴ中央・アイコン右 ---- */
@media (max-width: 880px) {
  .site-header__inner {
    display: flex !important;
    grid-template-columns: none !important;
    align-items: center !important;
    gap: 8px !important;
    position: relative;
  }
  .site-header__toggle {
    order: 1 !important;
    flex: 0 0 auto !important;
  }
  .site-header__brand,
  .site-header__brand--custom {
    order: 2 !important;
    flex: 1 1 auto !important;
    justify-content: center !important;
    text-align: center !important;
    max-width: none !important;
  }
  .site-header__actions {
    order: 3 !important;
    flex: 0 0 auto !important;
  }
  /* ナビは絶対配置のドロップダウンのまま（順序は影響しない） */
  .site-header__nav {
    order: 4 !important;
  }
}