/*
Theme Name: Shogun Gallery
Theme URI: https://shogun.gallery
Author: Shogun Gallery
Author URI: https://shogun.gallery
Description: Shogun Gallery – 日本の伝統工芸と刀剣文化を世界へ届けるオンラインギャラリー
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: shogun
*/

/* ─── CSS変数 ─── */
:root {
  --nav-h: 72px;
  --nav-h-sm: 56px;
  --white: #ffffff;
  --black: #0a0a0a;
  --accent: #c8a96e;
  --nav-bg-scroll: rgba(10, 10, 10, 0.88);
  --slide-duration: 5000ms;
  --fade-duration: 1200ms;
  --font-en: 'Cormorant Garamond', Georgia, serif;
  --font-ja: 'Noto Serif JP', serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-ja); color: var(--black); background: #f5f3ef; }

/* ─── Skip link ─── */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  background: var(--accent);
  color: var(--black);
  padding: .4rem .8rem;
  font-size: .75rem;
  z-index: 9999;
  transition: top .2s;
}
.skip-link:focus { top: .5rem; }

/* ════════════════════════════
   NAVIGATION
════════════════════════════ */
.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2rem;
  transition: background .4s ease, backdrop-filter .4s ease, box-shadow .4s ease, transform .35s ease;
}
.site-nav.is-scrolled {
  background: var(--nav-bg-scroll);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 rgba(255,255,255,.08);
}
.site-nav.is-hidden { transform: translateY(-110%); }

.nav-menu-btn {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 4px;
  z-index: 10;
}
.nav-menu-btn span {
  display: block;
  width: 24px;
  height: 1px;
  background: var(--white);
  transition: transform .3s, opacity .3s;
}
.nav-menu-btn.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-menu-btn.is-open span:nth-child(2) { opacity: 0; }
.nav-menu-btn.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.nav-logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-decoration: none;
  display: flex;
  align-items: center;
}
.nav-logo-img {
  height: 44px;
  width: auto;
  object-fit: contain;
  transition: opacity .2s;
}
.nav-logo:hover .nav-logo-img { opacity: .8; }

.nav-icons {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.nav-icons a, .nav-icons button, .nav-icons-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--white);
  opacity: .85;
  transition: opacity .2s;
  padding: 4px;
  text-decoration: none;
}
.nav-icons a:hover, .nav-icons button:hover { opacity: 1; }
.nav-lang {
  font-family: var(--font-en);
  font-size: .7rem;
  letter-spacing: .1em;
}
.icon-svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.2;
  stroke-linecap: round;
}

/* ─── お知らせバー ─── */
.announce-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 101;
  background: var(--black);
  color: rgba(255,255,255,.7);
  text-align: center;
  font-size: .65rem;
  letter-spacing: .15em;
  padding: 6px 1rem;
  font-family: var(--font-ja);
}
body.has-announce .site-nav { top: 28px; }

/* ════════════════════════════
   HERO SLIDER
════════════════════════════ */
.hero {
  position: relative;
  width: 100%;
  height: 100svh;
  min-height: 600px;
  overflow: hidden;
}
.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--fade-duration) ease;
  will-change: opacity;
}
.slide.is-active { opacity: 1; }
.slide-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.05);
  transition: transform calc(var(--slide-duration) + var(--fade-duration)) linear;
}
.slide.is-active .slide-bg { transform: scale(1); }
.slide-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.15) 0%, rgba(0,0,0,.05) 40%, rgba(0,0,0,.55) 100%);
}
.slide-content {
  position: absolute;
  bottom: 10%;
  left: 0;
  padding: 0 2rem;
  color: var(--white);
  transform: translateY(12px);
  opacity: 0;
  transition: transform .9s ease .6s, opacity .9s ease .6s;
}
.slide.is-active .slide-content { transform: translateY(0); opacity: 1; }
.slide-content::before {
  content: '';
  display: block;
  width: 32px;
  height: 1px;
  background: #fff;
  margin-bottom: 1rem;
}
.slide-eyebrow {
  font-family: var(--font-en);
  font-size: .65rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  opacity: .75;
  margin-bottom: .75rem;
}
.slide-title {
  font-family: var(--font-ja);
  font-size: clamp(1.6rem, 5vw, 3rem);
  font-weight: 300;
  line-height: 1.3;
  margin-bottom: .5rem;
}
.slide-title-en {
  font-family: var(--font-en);
  font-size: clamp(.8rem, 2vw, 1rem);
  font-weight: 300;
  letter-spacing: .15em;
  opacity: .7;
}
.slide-dots {
  position: absolute;
  bottom: 2rem;
  right: 2rem;
  display: flex;
  gap: .5rem;
  z-index: 10;
}
.dot {
  width: 20px;
  height: 1px;
  background: rgba(255,255,255,.4);
  cursor: pointer;
  transition: background .3s, width .3s;
  border: none;
  padding: 0;
}
.dot.is-active { background: var(--white); width: 32px; }

.slide:nth-child(1) .slide-bg {
  background-image: url('https://store.hulsgallerytokyo.com/cdn/shop/files/DSC09695-2_1200x.jpg?v=1667451164');
  background-color: #1a1208;
}
.slide:nth-child(2) .slide-bg {
  background-image: url('https://store.hulsgallerytokyo.com/cdn/shop/files/Brandbook_54_Main2c_1x1.jpg?v=1762048595');
  background-color: #0e1520;
}
.slide:nth-child(3) .slide-bg {
  background-image: url('https://store.hulsgallerytokyo.com/cdn/shop/files/DSC07553_1200x.jpg?v=1698800116');
  background-color: #1a1a14;
}

/* ════════════════════════════
   PRODUCT GRID
════════════════════════════ */
.product-section {
  padding: 4rem 2rem 6rem;
  background: #fff;
}
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem 1rem;
  max-width: 1200px;
  margin: 0 auto;
}
.product-card { text-decoration: none; color: inherit; display: block; }
.product-img {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #f5f3ef;
}
.img-bg {
  position: absolute;
  inset: 0;
  transition: opacity .5s ease;
  background-size: cover;
  background-position: center;
}
.img-hover { opacity: 0; }

@media (hover: hover) {
  .product-card:hover .img-default { opacity: 0; }
  .product-card:hover .img-hover   { opacity: 1; }
}

.pi-n1 .img-default { background-image: url('https://store.hulsgallerytokyo.com/cdn/shop/files/DSC05116-3_800x.jpg?v=1769160031'); }
.pi-n1 .img-hover   { background-image: url('https://store.hulsgallerytokyo.com/cdn/shop/files/7545_800x.jpg?v=1767936526'); }
.pi-n2 .img-default { background-image: url('https://store.hulsgallerytokyo.com/cdn/shop/files/DSC01976-2_800x.jpg?v=1769756945'); }
.pi-n2 .img-hover   { background-image: url('https://store.hulsgallerytokyo.com/cdn/shop/files/DSC02101_800x.jpg?v=1769756945'); }
.pi-n3 .img-default { background-image: url('https://store.hulsgallerytokyo.com/cdn/shop/files/DSC02262_cf4fe544-7867-43ef-ab86-a73c0da7bb1f_800x.jpg?v=1769758533'); }
.pi-n3 .img-hover   { background-image: url('https://store.hulsgallerytokyo.com/cdn/shop/files/DSC02308_a1858ced-3baf-4511-afca-460a162a045e_800x.jpg?v=1769758533'); }
.pi-n4 .img-default { background-image: url('https://store.hulsgallerytokyo.com/cdn/shop/files/DSC02273_800x.jpg?v=1769758621'); }
.pi-n4 .img-hover   { background-image: url('https://store.hulsgallerytokyo.com/cdn/shop/files/DSC02309_800x.jpg?v=1769758621'); }

.pi-r1 .img-default { background-image: url('https://store.hulsgallerytokyo.com/cdn/shop/products/DSC00295_800x.jpg?v=1603800494'); }
.pi-r1 .img-hover   { background-image: url('https://store.hulsgallerytokyo.com/cdn/shop/products/TeaWare04_s_800x.jpg?v=1603800488'); }
.pi-r2 .img-default { background-image: url('https://store.hulsgallerytokyo.com/cdn/shop/products/DSC02199_800x.jpg?v=1620449234'); }
.pi-r2 .img-hover   { background-image: url('https://store.hulsgallerytokyo.com/cdn/shop/products/DSC00992-Edit_800x.jpg?v=1616485622'); }
.pi-r3 .img-default { background-image: url('https://store.hulsgallerytokyo.com/cdn/shop/products/DSC04649_800x.jpg?v=1630488199'); }
.pi-r3 .img-hover   { background-image: url('https://store.hulsgallerytokyo.com/cdn/shop/products/DSC04389_800x.jpg?v=1630467498'); }
.pi-r4 .img-default { background-image: url('https://store.hulsgallerytokyo.com/cdn/shop/products/DSC00967_800x.jpg?v=1601436323'); }
.pi-r4 .img-hover   { background-image: url('https://store.hulsgallerytokyo.com/cdn/shop/products/DSC00798_800x.jpg?v=1601436317'); }

.badge-sold {
  position: absolute;
  top: .75rem; left: .75rem;
  background: rgba(255,255,255,.85);
  font-size: .6rem;
  letter-spacing: .1em;
  padding: .25rem .5rem;
  pointer-events: none;
}
.product-info { margin-top: .75rem; text-align: center; }
.product-name {
  font-family: var(--font-en);
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.5;
  margin-bottom: .3rem;
}
.product-name.ja {
  font-family: var(--font-ja);
  font-size: .7rem;
  letter-spacing: .05em;
  text-transform: none;
}
.product-price {
  font-family: var(--font-en);
  font-size: .75rem;
  letter-spacing: .05em;
  color: #888;
}

@media (max-width: 768px) {
  .product-section { padding: 2.5rem 1rem 4rem; }
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem .75rem; }
}

/* ════════════════════════════
   TAB SWITCHER
════════════════════════════ */
.tab-wrap { background: #fff; }
.tab-nav {
  display: flex;
  justify-content: center;
  padding: 2.5rem 0 0;
  border-bottom: 1px solid #e8e4df;
}
.tab-btn {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-family: var(--font-en);
  font-size: .78rem;
  font-weight: 300;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #aaa;
  padding: .6rem 2.5rem 1rem;
  margin-bottom: -1px;
  transition: color .25s, border-color .25s;
}
.tab-btn.is-active { color: var(--black); border-bottom-color: var(--black); }
.tab-btn:hover:not(.is-active) { color: #555; }
.tab-panel { display: none; }
.tab-panel.is-active { display: block; }

@media (max-width: 768px) {
  .tab-btn { padding: .6rem 1.2rem 1rem; font-size: .68rem; }
}

/* ════════════════════════════
   CATEGORY BANNER
════════════════════════════ */
.cat-banner {
  position: relative;
  width: 100%;
  height: clamp(320px, 50vw, 560px);
  overflow: hidden;
  background: #1a1a18;
}
.cat-banner-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 40%;
  transform: scale(1.03);
  transition: transform 8s ease;
}
.cat-banner:hover .cat-banner-bg { transform: scale(1); }
.cat-banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(255,255,255,.72) 0%, rgba(255,255,255,.18) 45%, rgba(0,0,0,0) 100%);
}
.cat-banner-body {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
  text-shadow: 0 1px 8px rgba(0,0,0,.25);
  width: 100%;
  padding: 0 2rem;
}
.cat-banner-title {
  font-family: var(--font-ja);
  font-size: clamp(1.1rem, 2.5vw, 1.6rem);
  font-weight: 300;
  letter-spacing: .25em;
  margin-bottom: 1.2rem;
}
.cat-banner-title::before {
  content: '';
  display: block;
  width: 24px;
  height: 1px;
  background: rgba(255,255,255,.8);
  margin: 0 auto 1rem;
}
.cat-banner-desc {
  font-family: var(--font-ja);
  font-size: clamp(.7rem, 1.4vw, .85rem);
  font-weight: 200;
  line-height: 2;
  letter-spacing: .06em;
  max-width: 740px;
  margin: 0 auto;
  opacity: .92;
}
.cat-banner-link {
  display: inline-block;
  margin-top: 1.5rem;
  font-family: var(--font-en);
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.6);
  padding-bottom: 2px;
  transition: border-color .2s, opacity .2s;
}
.cat-banner-link:hover { border-color: #fff; opacity: .8; }

@media (max-width: 768px) {
  .cat-banner-overlay { background: linear-gradient(to bottom, rgba(255,255,255,.1) 0%, rgba(0,0,0,.38) 100%); }
  .cat-banner-body { color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,.5); }
}

/* ════════════════════════════
   COLLECTION CARDS（横スクロール）
════════════════════════════ */
.col-cards-outer {
  position: relative;
  overflow: hidden;
}
.col-cards-scroll-wrap {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.col-cards-scroll-wrap::-webkit-scrollbar { display: none; }

/* 15種 → 3列×2行×3ページ = 9列 */
.col-cards {
  display: grid;
  grid-template-columns: repeat(9, calc(100vw / 3));
  grid-template-rows: repeat(2, auto);
  gap: 0;
  width: 300vw;
}

.col-card {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  text-decoration: none;
}
.col-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  transition: transform .7s ease;
}
.col-card:hover .col-card-img { transform: scale(1); }
.col-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.65) 0%, rgba(0,0,0,.2) 55%, rgba(0,0,0,0) 100%);
}
.col-card-body {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 1.2rem 1rem;
  color: #fff;
}
.col-card-region {
  font-family: var(--font-ja);
  font-size: .6rem;
  letter-spacing: .12em;
  opacity: .8;
  margin-bottom: .4rem;
}
.col-card-title {
  font-family: var(--font-ja);
  font-size: clamp(.75rem, 1.4vw, 1rem);
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: .06em;
  margin-bottom: .5rem;
}
.col-card-desc {
  font-family: var(--font-ja);
  font-size: .58rem;
  font-weight: 200;
  line-height: 1.8;
  letter-spacing: .04em;
  opacity: .85;
  margin-bottom: .75rem;
}
.col-card-btn {
  display: inline-block;
  background: rgba(255,255,255,.92);
  color: var(--black);
  font-family: var(--font-ja);
  font-size: .62rem;
  letter-spacing: .08em;
  padding: .5rem 1rem;
  text-decoration: none;
  transition: background .2s;
}
.col-card:hover .col-card-btn { background: #fff; }

.col-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 50%;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(0,0,0,.12);
  transition: box-shadow .2s, opacity .2s;
}
.col-arrow:hover { box-shadow: 0 4px 20px rgba(0,0,0,.2); }
.col-arrow.is-hidden { opacity: 0; pointer-events: none; }
.col-arrow svg { width: 16px; height: 16px; stroke: #333; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.col-arrow-prev { left: .75rem; }
.col-arrow-next { right: .75rem; }

@media (max-width: 768px) {
  .col-cards {
    grid-template-columns: repeat(9, calc(100vw / 2));
    width: 450vw;
  }
  .col-card { aspect-ratio: 3 / 4; }
  .col-card-body { padding: .8rem .7rem; }
  .col-card-desc { font-size: .55rem; }
  .col-card-btn { font-size: .55rem; padding: .4rem .7rem; }
}

/* ════════════════════════════
   NEWS SECTION
════════════════════════════ */
.news-section {
  background: #fff;
  padding: 5rem 0 6rem;
  overflow: hidden;
}
.news-header { text-align: center; margin-bottom: 3rem; padding: 0 2rem; }
.news-header .eyebrow {
  font-family: var(--font-ja);
  font-size: .65rem;
  letter-spacing: .25em;
  color: #aaa;
  margin-bottom: .8rem;
}
.news-header h2 {
  font-family: var(--font-ja);
  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
  font-weight: 300;
  letter-spacing: .2em;
}
.news-scroll-wrap { position: relative; }
.news-scroll {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 0 2rem 1.5rem;
  scrollbar-width: none;
}
.news-scroll::-webkit-scrollbar { display: none; }
.news-card {
  flex: 0 0 calc((100% - 2rem * 2 - 1.5rem * 2) / 3);
  min-width: 260px;
  max-width: 380px;
  scroll-snap-align: start;
  text-decoration: none;
  color: inherit;
  display: block;
}
.news-card-img { aspect-ratio: 4 / 3; overflow: hidden; background: #f0ede8; margin-bottom: 1rem; }
.news-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; display: block; }
.news-card:hover .news-card-img img { transform: scale(1.04); }
.news-card-title {
  font-family: var(--font-ja);
  font-size: .82rem;
  font-weight: 300;
  line-height: 1.75;
  letter-spacing: .04em;
  margin-bottom: .5rem;
}
.news-card-excerpt {
  font-family: var(--font-ja);
  font-size: .7rem;
  font-weight: 200;
  line-height: 1.9;
  letter-spacing: .03em;
  color: #666;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-arrow {
  position: absolute;
  top: 38%;
  transform: translateY(-50%);
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 50%;
  width: 40px; height: 40px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 10;
  transition: box-shadow .2s;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.news-arrow:hover { box-shadow: 0 4px 16px rgba(0,0,0,.15); }
.news-arrow svg { width: 14px; height: 14px; stroke: #333; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.news-arrow-prev { left: .5rem; }
.news-arrow-next { right: .5rem; }
.news-more { text-align: center; margin-top: 2.5rem; padding: 0 2rem; }
.news-more a {
  font-family: var(--font-en);
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--black);
  text-decoration: none;
  border-bottom: 1px solid var(--black);
  padding-bottom: 2px;
  transition: opacity .2s;
}
.news-more a:hover { opacity: .5; }

@media (max-width: 768px) {
  .news-section { padding: 3rem 0 4rem; }
  .news-card { flex: 0 0 72vw; }
  .news-arrow { display: none; }
}

/* ════════════════════════════
   FEATURE BANNERS
════════════════════════════ */
.feature-section { background: #fff; }
.feature-row { display: grid; grid-template-columns: 1fr 1fr; min-height: 480px; }
.feature-img { position: relative; overflow: hidden; background: #f0ede8; min-height: 400px; }
.feature-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.feature-row:hover .feature-img img { transform: scale(1.03); }
.feature-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4rem 5rem;
  background: #fff;
}
.feature-eyebrow { font-family: var(--font-ja); font-size: .65rem; letter-spacing: .2em; color: #aaa; margin-bottom: 1rem; }
.feature-title { font-family: var(--font-ja); font-size: clamp(1.2rem, 2.5vw, 1.8rem); font-weight: 300; letter-spacing: .15em; line-height: 1.5; margin-bottom: 1.5rem; }
.feature-desc { font-family: var(--font-ja); font-size: .78rem; font-weight: 200; line-height: 2; letter-spacing: .04em; color: #555; margin-bottom: 1.8rem; max-width: 550px; }
.feature-link {
  font-family: var(--font-ja);
  font-size: .72rem;
  letter-spacing: .1em;
  color: var(--black);
  text-decoration: none;
  border: 1px solid var(--black);
  padding: .7rem 1.8rem;
  display: inline-block;
  transition: background .25s, color .25s;
  align-self: flex-end;
  margin-top: auto;
}
.feature-link:hover { background: var(--black); color: #fff; }

@media (max-width: 768px) {
  .feature-row { grid-template-columns: 1fr; min-height: auto; }
  .feature-img  { order: 1 !important; aspect-ratio: 4 / 3; min-height: auto; }
  .feature-body { order: 2 !important; padding: 2rem 1.5rem; }
  .feature-desc { max-width: 100%; }
}

/* ════════════════════════════
   VIDEO LIGHTBOX
════════════════════════════ */
.video-section {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 7;
  min-height: 320px;
  overflow: hidden;
  cursor: pointer;
  background: #111;
}
.video-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease, filter .4s ease; }
.video-section:hover .video-thumb { transform: scale(1.03); filter: brightness(.85); }
.video-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.28); }
.video-label {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -60px);
  color: rgba(255,255,255,.85);
  font-family: var(--font-en);
  font-size: clamp(.65rem, 1.5vw, .85rem);
  letter-spacing: .3em;
  text-transform: uppercase;
  text-align: center;
}
.video-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 72px; height: 72px;
  background: rgba(255,255,255,.92);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: transform .25s ease, background .25s;
  pointer-events: none;
}
.video-section:hover .video-play { transform: translate(-50%, -50%) scale(1.1); background: #fff; }
.video-play svg { width: 22px; height: 22px; fill: var(--black); margin-left: 3px; }
.video-lightbox {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(0,0,0,.88);
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.video-lightbox.is-open { opacity: 1; pointer-events: auto; }
.video-lightbox-inner { position: relative; width: min(90vw, 1000px); aspect-ratio: 16 / 9; }
.video-lightbox-inner iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }
.video-lightbox-close {
  position: absolute;
  top: -44px; right: 0;
  background: none; border: none;
  color: #fff; font-size: 1.6rem;
  cursor: pointer; line-height: 1;
  opacity: .8; transition: opacity .2s;
}
.video-lightbox-close:hover { opacity: 1; }

@media (max-width: 768px) {
  .video-section { aspect-ratio: 16 / 9; }
  .video-play { width: 56px; height: 56px; }
  .video-play svg { width: 18px; height: 18px; }
}

/* ════════════════════════════
   DRAWER MENU
════════════════════════════ */
.drawer {
  position: fixed;
  top: 0; left: 0;
  width: min(380px, 100vw);
  height: 100%;
  background: #0f1828;
  z-index: 200;
  transform: translateX(-100%);
  transition: transform .4s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.drawer.is-open { transform: translateX(0); }
.drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 199; opacity: 0; pointer-events: none; transition: opacity .4s ease; }
.drawer-overlay.is-open { opacity: 1; pointer-events: auto; }
.drawer-close { background: none; border: none; cursor: pointer; color: #fff; font-size: 1.4rem; padding: 1.5rem 1.5rem .5rem; align-self: flex-start; line-height: 1; }
.drawer-nav { flex: 1; padding: 1rem 0 2rem; }
.drawer-item { border-bottom: 1px solid rgba(255,255,255,.1); }
.drawer-item-btn {
  width: 100%; background: none; border: none; cursor: pointer;
  color: #fff; font-family: var(--font-ja); font-size: .85rem; font-weight: 300;
  letter-spacing: .08em; padding: 1.1rem 1.5rem;
  display: flex; justify-content: space-between; align-items: center; text-align: left;
}
.drawer-item-btn:hover { color: var(--accent); }
.drawer-icon { width: 18px; height: 18px; position: relative; flex-shrink: 0; }
.drawer-icon::before, .drawer-icon::after { content: ''; position: absolute; background: currentColor; transition: transform .3s, opacity .3s; }
.drawer-icon::before { width: 10px; height: 1px; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.drawer-icon::after  { width: 1px; height: 10px; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.drawer-item-btn[aria-expanded="true"] .drawer-icon::after { transform: translate(-50%,-50%) rotate(90deg); opacity: 0; }
.drawer-item-link { display: block; color: #fff; text-decoration: none; font-family: var(--font-ja); font-size: .85rem; font-weight: 300; letter-spacing: .08em; padding: 1.1rem 1.5rem; }
.drawer-item-link:hover { color: var(--accent); }
.drawer-sub { max-height: 0; overflow: hidden; transition: max-height .35s ease; background: rgba(0,0,0,.2); }
.drawer-sub.is-open { max-height: 400px; }
.drawer-sub a { display: block; color: rgba(255,255,255,.7); text-decoration: none; font-family: var(--font-ja); font-size: .78rem; letter-spacing: .06em; padding: .8rem 2.5rem; transition: color .2s; }
.drawer-sub a:hover { color: var(--accent); }
.drawer-footer { padding: 1.5rem; border-top: 1px solid rgba(255,255,255,.1); display: flex; gap: 1.5rem; }
.drawer-footer a { color: rgba(255,255,255,.6); text-decoration: none; font-size: .7rem; letter-spacing: .1em; transition: color .2s; }
.drawer-footer a:hover { color: #fff; }

/* ════════════════════════════
   SEARCH BAR
════════════════════════════ */
.search-bar { position: fixed; top: 28px; left: 0; right: 0; z-index: 150; background: #fff; border-bottom: 1px solid #e0ddd8; height: 0; overflow: hidden; transition: height .35s cubic-bezier(.4,0,.2,1); }
.search-bar.is-open { height: 64px; }
.search-bar-inner { display: flex; align-items: center; height: 64px; padding: 0 1.5rem; gap: .75rem; }
.search-bar-inner svg { width: 18px; height: 18px; stroke: #888; fill: none; stroke-width: 1.4; stroke-linecap: round; flex-shrink: 0; }
.search-bar-input { flex: 1; border: none; outline: none; font-family: var(--font-ja); font-size: .85rem; letter-spacing: .08em; color: var(--black); background: transparent; }
.search-bar-input::placeholder { color: #aaa; }
.search-bar-close { background: none; border: none; cursor: pointer; color: #888; font-size: 1.1rem; padding: 4px; line-height: 1; flex-shrink: 0; transition: color .2s; }
.search-bar-close:hover { color: var(--black); }

@media (max-width: 768px) {
  .search-bar { top: 26px; }
  .search-bar.is-open { height: 56px; }
  .search-bar-inner { height: 56px; }
}

/* ════════════════════════════
   FOOTER
════════════════════════════ */
.site-footer { background: #f5f3ef; padding: 5rem 4rem 0; border-top: 1px solid #e8e4df; }
.footer-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 3rem; padding-bottom: 4rem; border-bottom: 1px solid #e0ddd8; }
.footer-col-title { font-family: var(--font-en); font-size: .65rem; letter-spacing: .22em; text-transform: uppercase; color: var(--black); margin-bottom: 1.6rem; }
.footer-info p { font-family: var(--font-ja); font-size: .72rem; font-weight: 200; line-height: 2; letter-spacing: .04em; color: #555; }
.footer-info a { color: var(--black); text-decoration: none; border-bottom: 1px solid rgba(0,0,0,.2); }
.footer-info a:hover { border-bottom-color: var(--black); }
.footer-sns { display: flex; gap: 1.4rem; margin-top: 1.6rem; }
.footer-sns a { color: #888; text-decoration: none; border: none; transition: color .2s; }
.footer-sns a:hover { color: var(--black); }
.footer-sns svg { width: 18px; height: 18px; fill: currentColor; }
.footer-menu { min-width: 0; }
.footer-menu ul { list-style: none; padding: 0; margin: 0; }
.footer-menu li + li { margin-top: .9rem; }
.footer-menu a { font-family: var(--font-ja); font-size: .75rem; font-weight: 200; letter-spacing: .06em; color: #555; text-decoration: none; transition: color .2s; }
.footer-menu a:hover { color: var(--black); }
.footer-bottom { padding: 2.5rem 0 3rem; }
.footer-bottom-title { font-family: var(--font-ja); font-size: .72rem; font-weight: 400; letter-spacing: .08em; margin-bottom: .8rem; }
.footer-bottom p { font-family: var(--font-ja); font-size: .72rem; font-weight: 200; line-height: 2; color: #555; }
.footer-copy { border-top: 1px solid #e0ddd8; padding: 1.5rem 0; text-align: center; }
.footer-copy p { font-family: var(--font-en); font-size: .6rem; letter-spacing: .15em; color: #aaa; }

@media (max-width: 768px) {
  .site-nav { height: var(--nav-h-sm); padding: 0 1.25rem; }
  body.has-announce .site-nav { top: 26px; }
  .nav-logo-img { height: 36px; }
  .nav-icons .nav-lang { display: none; }
  .slide-content { padding: 0 1.25rem; bottom: 12%; }
  .slide-dots { bottom: 1.5rem; right: 1.25rem; }
  .site-footer { padding: 2.5rem 1.2rem 0; }
  .footer-top { grid-template-columns: 50% 50%; gap: 2rem 0; padding-bottom: 2.5rem; }
  .footer-info { grid-column: 1 / -1; }
  .footer-menu { min-width: 0; padding-right: .8rem; box-sizing: border-box; }
  .footer-col-title { font-size: .6rem; letter-spacing: .15em; margin-bottom: 1rem; }
  .footer-sns { gap: 1rem; margin-top: 1.2rem; }
  .footer-sns svg { width: 15px; height: 15px; }
  .footer-menu li + li { margin-top: .7rem; }
}

/* ════════════════════════════
   FILTER SECTIONS
════════════════════════════ */
.filter-sections {
  background: #fff;
  padding: 3rem 2rem 4rem;
}
.filter-block { margin-bottom: 3rem; }
.filter-block:last-child { margin-bottom: 0; }

.filter-heading {
  font-family: var(--font-ja);
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .18em;
  color: var(--black);
  margin-bottom: 1.2rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid #e8e4df;
}

.filter-scroll-wrap {
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
}
.filter-scroll-wrap:active { cursor: grabbing; }
.filter-scroll-wrap::-webkit-scrollbar { display: none; }

.filter-row {
  display: flex;
  gap: 1rem;
  width: max-content;
}

.filter-card {
  display: flex;
  align-items: center;
  gap: .75rem;
  width: 300px;
  padding: .75rem;
  text-decoration: none;
  color: var(--black);
  border: 1px solid #e8e4df;
  background: #fff;
  transition: background .25s ease, border-color .25s ease;
  flex-shrink: 0;
  cursor: pointer;
}
.filter-card:hover {
  background: #f5f3ef;
  border-color: #c8b89a;
}
.filter-card.is-active {
  background: var(--black);
  border-color: var(--black);
}
.filter-card.is-active .filter-card-name,
.filter-card.is-active .filter-card-size,
.filter-card.is-active .filter-card-desc { color: #fff; }
.filter-card.is-active .filter-card-img-wrap { opacity: .85; }

.filter-card-img-wrap {
  width: 56px;
  height: 72px;
  flex-shrink: 0;
  overflow: hidden;
  background: #e8e4df;
}
.filter-card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.filter-card-body { flex: 1; min-width: 0; }

.filter-card-name {
  font-family: var(--font-ja);
  font-size: .78rem;
  font-weight: 400;
  letter-spacing: .06em;
  color: var(--black);
  margin-bottom: .2rem;
  transition: color .25s;
}
.filter-card-size {
  font-family: var(--font-en);
  font-size: .6rem;
  letter-spacing: .08em;
  color: #aaa;
  margin-bottom: .4rem;
  transition: color .25s;
}
.filter-card-desc {
  font-family: var(--font-ja);
  font-size: .6rem;
  font-weight: 200;
  line-height: 1.7;
  letter-spacing: .03em;
  color: #888;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color .25s;
}

/* ── filter スマホ対応 ── */
@media (max-width: 768px) {
  .filter-sections {
    padding: 2rem 1rem 3rem;
  }
  .filter-block { margin-bottom: 2rem; }
  .filter-heading {
    font-size: .68rem;
    letter-spacing: .12em;
    margin-bottom: 1rem;
  }

  /* カード幅: 画面の72%→次のカードが約28%見えてスクロールを示唆 */
  .filter-card {
    width: 72vw;
    gap: .55rem;
    padding: .65rem;
  }

  .filter-card-img-wrap {
    width: 44px;
    height: 56px;
  }

  .filter-card-name { font-size: .72rem; }
  .filter-card-size { font-size: .58rem; margin-bottom: .25rem; }
  .filter-card-desc {
    font-size: .58rem;
    -webkit-line-clamp: 2;
  }

  /* タッチ端末: タップ時に色変化 */
  @media (hover: none) {
    .filter-card:active {
      background: #f5f3ef;
      border-color: #c8b89a;
    }
  }
}








/*
  single-cups.css
  Organic Gangster Ceramics — single-cups.php 用スタイル
  style.css の後に読み込む。

  functions.php:
  ────────────────────────────────────
  function ogc_enqueue_cups() {
    if ( is_single() && get_field('ogc_category') ) {
      wp_enqueue_style(
        'single-cups',
        get_template_directory_uri() . '/single-cups.css',
        ['shogun-style'],
        '1.0.0'
      );
    }
  }
  add_action( 'wp_enqueue_scripts', 'ogc_enqueue_cups' );
  ────────────────────────────────────
*/

/* ════════════════════════════
   MOBILE STICKY CTA
════════════════════════════ */
.ogc-sticky-bar {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 200;
  background: var(--black);
  padding: 12px 20px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid rgba(255,255,255,.1);
}
.ogc-sticky-bar.is-hidden { display: none !important; }

.ogc-sticky-price {
  font-family: var(--font-en);
  font-size: 1.2rem;
  font-weight: 300;
  color: var(--white);
  letter-spacing: .04em;
}
.ogc-sticky-btn {
  font-family: var(--font-en);
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--black);
  background: var(--accent);
  padding: 10px 20px;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity .2s;
}
.ogc-sticky-btn:hover { opacity: .85; }
.ogc-sticky-sold {
  font-family: var(--font-en);
  font-size: .65rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
}

@media (max-width: 768px) {
  .ogc-sticky-bar { display: flex; }
  body { padding-bottom: 64px; }
}

/* ════════════════════════════
   HERO
════════════════════════════ */
.ogc-hero .cat-banner-bg { background-color: #1e1c17; }

.cat-banner-title-en {
  font-family: var(--font-en);
  font-size: clamp(.8rem, 2vw, 1.1rem);
  font-weight: 300;
  font-style: italic;
  letter-spacing: .12em;
  opacity: .7;
  margin-bottom: 1.4rem;
}
.cat-banner-meta {
  font-family: var(--font-en);
  font-size: clamp(.58rem, 1.2vw, .65rem);
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .5;
}

/* ════════════════════════════
   BREADCRUMB
════════════════════════════ */
.ogc-breadcrumb {
  padding: 1rem 1.25rem;
  font-family: var(--font-en);
  font-size: .58rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #aaa;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  background: #f5f3ef;
  border-bottom: 1px solid #e8e4df;
}
.ogc-breadcrumb a { color: #aaa; text-decoration: none; transition: color .2s; }
.ogc-breadcrumb a:hover { color: var(--black); }
.ogc-breadcrumb span { color: #ddd; }
.ogc-breadcrumb-current { color: var(--black); }

@media (min-width: 769px) {
  .ogc-breadcrumb { padding: 1.4rem 2rem; font-size: .6rem; }
}

/* ════════════════════════════
   LAYOUT
════════════════════════════ */
.ogc-layout {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem 1.25rem 4rem;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "article" "sidebar";
  gap: 2.5rem;
}
@media (min-width: 769px) {
  .ogc-layout {
    padding: 3.5rem 2rem 5rem;
    grid-template-columns: 1fr 300px;
    grid-template-areas: "article sidebar";
    gap: 4rem;
    align-items: start;
  }
}
@media (min-width: 1100px) {
  .ogc-layout {
    padding: 4rem 2rem 6rem;
    grid-template-columns: 1fr 320px;
    gap: 5rem;
  }
}

.ogc-article { grid-area: article; min-width: 0; }
.ogc-sidebar  { grid-area: sidebar; }

/* ════════════════════════════
   ARTICLE
════════════════════════════ */
.ogc-main-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  margin-bottom: .6rem;
}
.ogc-img-caption {
  font-family: var(--font-en);
  font-size: .6rem;
  letter-spacing: .08em;
  color: #aaa;
  font-style: italic;
  margin-bottom: 2rem;
}

.ogc-post-content h2 {
  font-family: var(--font-ja);
  font-size: clamp(1rem, 2.5vw, 1.3rem);
  font-weight: 300;
  letter-spacing: .14em;
  line-height: 1.6;
  margin: 2.5rem 0 1.2rem;
  padding-bottom: .8rem;
  border-bottom: 1px solid #e8e4df;
}
.ogc-post-content p {
  font-family: var(--font-ja);
  font-size: clamp(.8rem, 1.8vw, .82rem);
  font-weight: 200;
  line-height: 2.1;
  letter-spacing: .04em;
  color: #444;
  margin-bottom: 1.4rem;
}
.ogc-post-content blockquote {
  border-left: 1px solid var(--accent);
  padding: .4rem 0 .4rem 1.25rem;
  margin: 2rem 0;
  font-family: var(--font-en);
  font-style: italic;
  font-size: clamp(.9rem, 2vw, 1.05rem);
  font-weight: 300;
  line-height: 1.8;
  color: #555;
}
.ogc-post-content hr { border: none; border-top: 1px solid #e8e4df; margin: 3rem 0; }

.ogc-gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: .6rem;
  margin: 1.5rem 0;
}
@media (min-width: 480px) {
  .ogc-gallery { grid-template-columns: 1fr 1fr; gap: .75rem; }
}

.ogc-gallery-cell {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: #eae7e1;
}
.ogc-gallery-cell img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .6s ease;
}
.ogc-gallery-cell:hover img { transform: scale(1.04); }
.ogc-gallery-label {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: .5rem .75rem;
  background: rgba(0,0,0,.42);
  font-family: var(--font-en);
  font-size: .58rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
  margin: 0;
}

.ogc-label {
  display: block;
  font-family: var(--font-en);
  font-size: .6rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}
.ogc-notes {
  margin-top: 2rem;
  padding-top: 1.6rem;
  border-top: 1px solid #e8e4df;
}
.ogc-notes p {
  font-family: var(--font-ja);
  font-size: .78rem;
  font-weight: 200;
  line-height: 2;
  color: #666;
}

/* ════════════════════════════
   SIDEBAR
════════════════════════════ */
@media (min-width: 769px) {
  .ogc-sidebar { position: sticky; top: calc(var(--nav-h) + -1.5rem); }
}

.ogc-sidebar-card {
  background: #fff;
  border: 1px solid #e8e4df;
  padding: 0 1.5rem 1.5rem;
}
@media (min-width: 769px) {
  .ogc-sidebar-card { padding: 0 2rem 2rem; }
}

.ogc-status {
  display: inline-block;
  font-family: var(--font-en);
  font-size: .58rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: .3rem .8rem;
  border: 1px solid var(--black);
  color: var(--black);
  margin:20px 0 10px;
}
.ogc-status.sold { border-color: #999; color: #999; }

.ogc-price {
  font-family: var(--font-en);
  font-size: 2rem;
  font-weight: 300;
  letter-spacing: .06em;
  color: var(--black);
  line-height: 1;
  margin-bottom: .4rem;
}

.ogc-price span{
	font-size: 0.5em;
}
.ogc-price-note {
  font-family: var(--font-ja);
  font-size: .62rem;
  font-weight: 200;
  color: #aaa;
  margin-bottom: 1.6rem;
}
.ogc-divider { border: none; border-top: 1px solid #e8e4df; margin: 1.4rem 0; }

.ogc-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.4rem; }
.ogc-tag {
  font-family: var(--font-en);
  font-size: .55rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .22rem .6rem;
  background: #f5f3ef;
  border: 1px solid #e0ddd8;
  color: #888;
}

.ogc-spec { width: 100%; border-collapse: collapse; }
.ogc-spec tr { border-bottom: 1px solid #f0ede8; }
.ogc-spec tr:last-child { border-bottom: none; }
.ogc-spec td { padding: .6rem 0; vertical-align: top; line-height: 1.6; }
.ogc-spec td:first-child {
  font-family: var(--font-en);
  font-size: .58rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #aaa;
  width: 42%;
}
.ogc-spec td:last-child {
  font-family: var(--font-ja);
  font-size: .72rem;
  font-weight: 300;
  letter-spacing: .04em;
  color: var(--black);
}

.ogc-btn-cta {
  display: block;
  width: 100%;
  text-align: center;
  font-family: var(--font-en);
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--black);
  border: 1px solid var(--black);
  padding: .9rem 1.5rem;
  text-decoration: none;
  margin-top: 1.6rem;
  transition: background .25s;
}
.ogc-btn-cta:hover { background: #333; }
@media (max-width: 768px) { .ogc-btn-cta { display: none; } }

.ogc-btn-inquiry {
  display: block;
  width: 100%;
  text-align: center;
  font-family: var(--font-en);
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--black);
  background: transparent;
  border: 1px solid #ccc;
  padding: .8rem 1.5rem;
  text-decoration: none;
  margin-top: .6rem;
  transition: border-color .25s;
}
.ogc-btn-inquiry:hover { border-color: var(--black); }

.ogc-shipping {
  font-family: var(--font-ja);
  font-size: .62rem;
  font-weight: 200;
  line-height: 2;
  color: #aaa;
  margin-top: 1.2rem;
  text-align: center;
}


/* ════════════════════════════
   NAV — ブログページは最初から暗く
════════════════════════════ */
.bl-hero ~ * .site-nav,
body.blog-page .site-nav {
  background: var(--nav-bg-scroll);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ════════════════════════════
   HERO
   アイキャッチを背景画像に
   タイトル・カテゴリ・日付のみ表示
════════════════════════════ */
.bl-hero {
  position: relative;
  width: 100%;
  height: 100svh;
  min-height: 480px;
  margin-top: 0;
  background-color: #1a1a18;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 768px) {
  .bl-hero {
    height: 70svh;
    min-height: 360px;
  }
}

.bl-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.25) 0%,
    rgba(0,0,0,.55) 100%
  );
}

.bl-hero-body {
  position: relative;
  z-index: 1;
  text-align: center;
  color: #fff;
  padding: 0 1.5rem;
  max-width: 800px;
}

.bl-hero-cat {
  display: inline-block;
  font-family: var(--font-en);
  font-size: .62rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(255,255,255,.65);
  text-decoration: none;
  margin-bottom: 1.4rem;
  transition: opacity .2s;
}
.bl-hero-cat:hover { opacity: .8; }

/* カテゴリの前に短いライン */
.bl-hero-cat::before {
  content: '';
  display: block;
  width: 24px;
  height: 1px;
  background: rgba(255,255,255,.5);
  margin: 0 auto 1.2rem;
}

.bl-hero-title {
  font-family: var(--font-en);
  font-size: clamp(1.8rem, 5vw, 3.5rem);
  font-weight: 300;
  letter-spacing: .06em;
  line-height: 1.2;
  color: #fff;
  margin-bottom: 1.2rem;
}

.bl-hero-date {
  font-family: var(--font-en);
  font-size: .6rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
}

/* ════════════════════════════
   BREADCRUMB
════════════════════════════ */
.bl-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  padding: 1rem 1.25rem;
  font-family: var(--font-en);
  font-size: .58rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #aaa;
  background: #f5f3ef;
  border-bottom: 1px solid #e8e4df;
}
.bl-breadcrumb a { color: #aaa; text-decoration: none; transition: color .2s; }
.bl-breadcrumb a:hover { color: var(--black); }
.bl-breadcrumb span { color: #ddd; }
.bl-breadcrumb span:last-child { color: var(--black); }

@media (min-width: 769px) {
  .bl-breadcrumb { padding: 1.2rem 2rem; font-size: .6rem; }
}

/* ════════════════════════════
   ARTICLE — 1カラム中央寄せ
════════════════════════════ */
.bl-wrap {
  max-width: 680px;
  margin: 0 auto;
  padding: 3rem 1.25rem 5rem;
}

@media (min-width: 769px) {
  .bl-wrap { padding: 5rem 2rem 7rem; }
}

/* ── 本文テキスト（英語長文向け） ── */
.bl-article p {
  font-family: var(--font-en);
  font-size: clamp(1rem, 1.8vw, 1.08rem);
  font-weight: 300;
  line-height: 1.9;
  letter-spacing: .01em;
  color: #2a2a2a;
  margin-bottom: 1.8rem;
}

.bl-article h2 {
  font-family: var(--font-en);
  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
  font-weight: 400;
  letter-spacing: .03em;
  line-height: 1.35;
  color: var(--black);
  margin: 3.5rem 0 1.2rem;
  padding-bottom: .8rem;
  border-bottom: 1px solid #e8e4df;
}

.bl-article h3 {
  font-family: var(--font-en);
  font-size: clamp(1rem, 2vw, 1.2rem);
  font-weight: 400;
  letter-spacing: .03em;
  line-height: 1.45;
  color: var(--black);
  margin: 2.5rem 0 1rem;
}

.bl-article blockquote {
  border-left: 2px solid var(--accent);
  padding: .6rem 0 .6rem 1.5rem;
  margin: 2.5rem 0;
  font-family: var(--font-en);
  font-style: italic;
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  font-weight: 300;
  line-height: 1.75;
  color: #555;
}

.bl-article hr {
  border: none;
  border-top: 1px solid #e0ddd8;
  margin: 3rem 0;
}

.bl-article img {
  width: 100%;
  height: auto;
  display: block;
  margin: 2.5rem 0;
}

.bl-article figure { margin: 2.5rem 0; }

.bl-article figcaption {
  font-family: var(--font-en);
  font-size: .68rem;
  letter-spacing: .08em;
  color: #aaa;
  font-style: italic;
  text-align: center;
  margin-top: .6rem;
}

.bl-article ul,
.bl-article ol {
  font-family: var(--font-en);
  font-size: clamp(.95rem, 1.8vw, 1.05rem);
  font-weight: 300;
  line-height: 1.85;
  color: #2a2a2a;
  margin: 0 0 1.8rem 1.5rem;
}
.bl-article li { margin-bottom: .5rem; }

/* ── タグ ── */
.bl-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid #e8e4df;
}

.bl-tag {
  font-family: var(--font-en);
  font-size: .58rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .25rem .75rem;
  border: 1px solid #e0ddd8;
  color: #888;
  text-decoration: none;
  transition: border-color .2s, color .2s;
}
.bl-tag:hover { border-color: var(--black); color: var(--black); }

/* ── Prev / Next ── */
.bl-post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid #e8e4df;
}

.bl-post-nav-item {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  text-decoration: none;
  transition: opacity .2s;
}
.bl-post-nav-item:hover { opacity: .6; }
.bl-post-nav-next { text-align: right; }

.bl-nav-label {
  font-family: var(--font-en);
  font-size: .58rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}
.bl-nav-title {
  font-family: var(--font-en);
  font-size: clamp(.78rem, 1.6vw, .88rem);
  font-weight: 300;
  line-height: 1.5;
  color: var(--black);
}

/* ════════════════════════════
   RELATED POSTS
════════════════════════════ */
.bl-related {
  background: #fff;
  padding: 3.5rem 1.25rem 4.5rem;
  border-top: 1px solid #e8e4df;
}

@media (min-width: 769px) {
  .bl-related { padding: 5rem 2rem 6rem; }
}

.bl-related-inner { max-width: 1100px; margin: 0 auto; }

.bl-related-label {
  font-family: var(--font-en);
  font-size: .6rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 2rem;
}

/* モバイル1列 → 480px: 2列 → 769px: 3列 */
.bl-related-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem 1rem;
}
@media (min-width: 480px) { .bl-related-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 769px) { .bl-related-grid { grid-template-columns: repeat(3, 1fr); } }

.bl-related-card { display: block; text-decoration: none; color: inherit; }

.bl-related-img {
  aspect-ratio: 4 / 3;
  background-color: #eae7e1;
  background-size: cover;
  background-position: center;
  margin-bottom: .85rem;
  overflow: hidden;
  transition: opacity .4s;
}
.bl-related-card:hover .bl-related-img { opacity: .85; }

.bl-related-cat {
  font-family: var(--font-en);
  font-size: .58rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .4rem;
}
.bl-related-title {
  font-family: var(--font-en);
  font-size: clamp(.8rem, 1.6vw, .9rem);
  font-weight: 300;
  line-height: 1.55;
  color: var(--black);
  margin-bottom: .35rem;
}
.bl-related-date {
  font-family: var(--font-en);
  font-size: .6rem;
  letter-spacing: .08em;
  color: #aaa;
}


/* ════════════════════════════
   NAV — 最初から暗く
════════════════════════════ */
body.blog-page .site-nav {
  background: var(--nav-bg-scroll);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ════════════════════════════
   ARCHIVE HERO
   背景画像はCSSで管理
   本番は下記URLをテーマ内の実画像パスに差し替える
════════════════════════════ */
.arc-hero {
  position: relative;
  width: 100%;
  height: clamp(280px, 40vw, 480px);
  overflow: hidden;

  /* ▼ サンプル背景画像（本番時は差し替え） */
  background-image: url('https://images.unsplash.com/photo-1603199506016-b9a594b593c0?w=1600&q=80');
  background-size: cover;
  background-position: center;
  background-color: #1a1a18;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* 本番での差し替え例:
.arc-hero {
  background-image: url('<?php echo get_template_directory_uri(); ?>/images/archive-hero.jpg');
}
*/

.arc-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.3) 0%,
    rgba(0,0,0,.6) 100%
  );
}

.arc-hero-body {
  position: relative;
  z-index: 1;
  text-align: center;
  color: #fff;
  padding: 0 1.5rem;
}

.arc-hero-eyebrow {
  font-family: var(--font-en);
  font-size: .6rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}

.arc-hero-eyebrow::before {
  content: '';
  display: block;
  width: 24px;
  height: 1px;
  background: var(--accent);
  margin: 0 auto 1rem;
}

.arc-hero-title {
  font-family: var(--font-en);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 300;
  letter-spacing: .06em;
  line-height: 1.2;
  color: #fff;
  margin-bottom: .8rem;
}

.arc-hero-desc {
  font-family: var(--font-en);
  font-size: clamp(.78rem, 1.5vw, .9rem);
  font-weight: 300;
  font-style: italic;
  letter-spacing: .04em;
  color: rgba(255,255,255,.55);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.7;
}

@media (max-width: 768px) {
  .arc-hero { height: clamp(220px, 55vw, 320px); }
}

/* ════════════════════════════
   BREADCRUMB
════════════════════════════ */
.arc-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  padding: 1rem 1.25rem;
  font-family: var(--font-en);
  font-size: .58rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #aaa;
  background: #f5f3ef;
  border-bottom: 1px solid #e8e4df;
}
.arc-breadcrumb a { color: #aaa; text-decoration: none; transition: color .2s; }
.arc-breadcrumb a:hover { color: var(--black); }
.arc-breadcrumb span { color: #ddd; }
.arc-breadcrumb span:last-child { color: var(--black); }

@media (min-width: 769px) {
  .arc-breadcrumb { padding: 1.2rem 2rem; font-size: .6rem; }
}

/* ════════════════════════════
   FILTER BAR
   カテゴリのみ・タグは出さない
════════════════════════════ */
.arc-filter-wrap {
  background: #fff;
  border-bottom: 1px solid #e8e4df;
  padding: 0 1.25rem;
}

@media (min-width: 769px) {
  .arc-filter-wrap { padding: 0 2rem; }
}

.arc-filter-scroll {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 1rem 0;
}
.arc-filter-scroll::-webkit-scrollbar { display: none; }

.arc-filter-btn {
  flex-shrink: 0;
  font-family: var(--font-en);
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .4rem 1.2rem;
  border: 1px solid #e0ddd8;
  color: #888;
  text-decoration: none;
  background: transparent;
  white-space: nowrap;
  transition: background .2s, color .2s, border-color .2s;
}
.arc-filter-btn:hover {
  border-color: var(--black);
  color: var(--black);
}
.arc-filter-btn.is-active {
  background: var(--black);
  border-color: var(--black);
  color: #fff;
}

/* ════════════════════════════
   POST GRID
   モバイル1列 → 480px: 2列 → 769px: 3列
════════════════════════════ */
.arc-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 5rem;
}

@media (min-width: 769px) {
  .arc-wrap { padding: 4rem 2rem 7rem; }
}

.arc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 480px) {
  .arc-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem 1.25rem; }
}

@media (min-width: 769px) {
  .arc-grid { grid-template-columns: repeat(3, 1fr); gap: 3rem 1.5rem; }
}

/* ── カード ── */
.arc-card {
  display: block;
  text-decoration: none;
  color: inherit;
}

.arc-card-img {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #eae7e1;
  margin-bottom: 1rem;
}

.arc-card-img-inner {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-color: #e0ddd8;
  transition: transform .65s ease;
}
.arc-card:hover .arc-card-img-inner { transform: scale(1.05); }

.arc-card-img-empty { background-color: #e0ddd8; }

.arc-card-meta {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .55rem;
}

.arc-card-cat {
  font-family: var(--font-en);
  font-size: .58rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}

.arc-card-date {
  font-family: var(--font-en);
  font-size: .58rem;
  letter-spacing: .08em;
  color: #bbb;
}

.arc-card-title {
  font-family: var(--font-en);
  font-size: clamp(.9rem, 1.8vw, 1.05rem);
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: .02em;
  color: var(--black);
  margin-bottom: .6rem;
  transition: opacity .2s;
}
.arc-card:hover .arc-card-title { opacity: .65; }

.arc-card-excerpt {
  font-family: var(--font-en);
  font-size: .78rem;
  font-weight: 300;
  line-height: 1.75;
  color: #777;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: .8rem;
}

.arc-card-read {
  font-family: var(--font-en);
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 1px;
  display: inline-block;
  transition: opacity .2s;
}
.arc-card:hover .arc-card-read { opacity: .7; }

/* ════════════════════════════
   EMPTY STATE
════════════════════════════ */
.arc-empty {
  text-align: center;
  padding: 5rem 0;
  font-family: var(--font-en);
  font-size: .85rem;
  font-weight: 300;
  color: #aaa;
  letter-spacing: .08em;
}

/* ════════════════════════════
   PAGINATION
════════════════════════════ */
.arc-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .4rem;
  margin-top: 4rem;
  flex-wrap: wrap;
}

.arc-pagination .page-numbers {
  font-family: var(--font-en);
  font-size: .65rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .55rem 1rem;
  border: 1px solid #e0ddd8;
  color: #888;
  text-decoration: none;
  transition: background .2s, color .2s, border-color .2s;
  min-width: 40px;
  text-align: center;
}
.arc-pagination .page-numbers:hover {
  border-color: var(--black);
  color: var(--black);
}
.arc-pagination .page-numbers.current {
  background: var(--black);
  border-color: var(--black);
  color: #fff;
}
.arc-pagination .page-numbers.dots {
  border: none;
  padding: .55rem .25rem;
  color: #ccc;
  pointer-events: none;
}

/*
  single-cups.css
  Organic Gangster Ceramics — Product Page (1カラム)
  style.css の後に読み込む。

  functions.php:
  ────────────────────────────────────
  function ogc_enqueue_cups() {
    if ( is_single() && get_field('ogc_category') ) {
      wp_enqueue_style(
        'single-cups',
        get_template_directory_uri() . '/single-cups.css',
        ['shogun-style'],
        '1.0.0'
      );
    }
  }
  add_action( 'wp_enqueue_scripts', 'ogc_enqueue_cups' );
  ────────────────────────────────────
*/

/* ════════════════════════════
   IMAGE VIEWER
   メイン1枚 + サムネイル横並び
════════════════════════════ */
.ogc-viewer {
  margin-bottom: 2rem;
}

/* メイン画像 */
.ogc-viewer-main {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #eae7e1;
  margin-bottom: .6rem;
}

.ogc-viewer-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity .25s ease;
}

/* サムネイル列 */
.ogc-viewer-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .4rem;
}

.ogc-viewer-thumb {
  aspect-ratio: 1;
  overflow: hidden;
  background: #eae7e1;
  border: 2px solid transparent;
  padding: 0;
  cursor: pointer;
  transition: border-color .2s;
}

.ogc-viewer-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity .2s;
}

.ogc-viewer-thumb:hover img { opacity: .8; }
.ogc-viewer-thumb.is-active { border-color: var(--accent); }

/* モバイル: サムネイルを3列に */
@media (max-width: 480px) {
  .ogc-viewer-thumbs { grid-template-columns: repeat(3, 1fr); }
}

/* ════════════════════════════
   MOBILE STICKY CTA
════════════════════════════ */
.ogc-sticky-bar {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 200;
  background: var(--black);
  padding: 12px 20px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid rgba(255,255,255,.1);
}
.ogc-sticky-bar.is-hidden { display: none !important; }

.ogc-sticky-price {
  font-family: var(--font-en);
  font-size: 1.2rem;
  font-weight: 300;
  color: var(--white);
  letter-spacing: .04em;
}
.ogc-sticky-btn {
  font-family: var(--font-en);
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--black);
  background: var(--accent);
  padding: 10px 20px;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity .2s;
}
.ogc-sticky-btn:hover { opacity: .85; }
.ogc-sticky-sold {
  font-family: var(--font-en);
  font-size: .65rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
}

@media (max-width: 768px) {
  .ogc-sticky-bar { display: flex; }
  body { padding-bottom: 64px; }
}

/* ════════════════════════════
   HERO
════════════════════════════ */
.ogc-hero .cat-banner-bg { background-color: #1e1c17; }

.cat-banner-title-en {
  font-family: var(--font-en);
  font-size: clamp(.8rem, 2vw, 1.1rem);
  font-weight: 300;
  font-style: italic;
  letter-spacing: .12em;
  opacity: .7;
  margin-bottom: 1.4rem;
}
.cat-banner-meta {
  font-family: var(--font-en);
  font-size: clamp(.58rem, 1.2vw, .65rem);
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .5;
}

/* ════════════════════════════
   BREADCRUMB
════════════════════════════ */
.ogc-breadcrumb {
  padding: 1rem 1.25rem;
  font-family: var(--font-en);
  font-size: .58rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #aaa;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  background: #f5f3ef;
  border-bottom: 1px solid #e8e4df;
}
.ogc-breadcrumb a { color: #aaa; text-decoration: none; transition: color .2s; }
.ogc-breadcrumb a:hover { color: var(--black); }
.ogc-breadcrumb span { color: #ddd; }
.ogc-breadcrumb-current { color: var(--black); }

@media (min-width: 769px) {
  .ogc-breadcrumb { padding: 1.2rem 2rem; font-size: .6rem; }
}

/* ════════════════════════════
   MAIN WRAPPER — 1カラム
════════════════════════════ */
.ogc-single {
  max-width: 860px;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 5rem;
}

@media (min-width: 769px) {
  .ogc-single { padding: 4rem 2rem 7rem; }
}

/* ════════════════════════════
   SPEC BLOCK
   モバイル: 縦積み
   769px〜: 左（価格）+ 右（スペック）横並び
════════════════════════════ */
.ogc-spec-block {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.6rem;
  padding-bottom: 2.5rem;
  margin-bottom: 2.5rem;
}

@media (min-width: 600px) {
  .ogc-spec-block {
    grid-template-columns: 200px 1fr;
    gap: 3rem;
    align-items: start;
  }
}

/* ── 左: 価格 ── */
.ogc-spec-left {}

.ogc-status {
  display: inline-block;
  font-family: var(--font-en);
  font-size: .58rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: .3rem .8rem;
  border: 1px solid var(--black);
  color: var(--black);
  margin-bottom: 1.2rem;
}
.ogc-status.sold { border-color: #999; color: #999; }

.ogc-price {
  font-family: var(--font-en);
  font-size: 2.2rem;
  font-weight: 300;
  letter-spacing: .04em;
  color: var(--black);
  line-height: 1;
  margin-bottom: .4rem;
}
.ogc-price-note {
  font-family: var(--font-en);
  font-size: .6rem;
  letter-spacing: .1em;
  color: #aaa;
}

/* ── 右: スペック ── */
.ogc-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.2rem; }
.ogc-tag {
  font-family: var(--font-en);
  font-size: .55rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .22rem .6rem;
  background: #f5f3ef;
  border: 1px solid #e0ddd8;
  color: #888;
}

.ogc-spec { width: 100%; border-collapse: collapse; margin-bottom: 1.6rem; }
.ogc-spec tr { border-bottom: 1px solid #f0ede8; }
.ogc-spec tr:last-child { border-bottom: none; }
.ogc-spec td { padding: .6rem 0; vertical-align: top; line-height: 1.6; }
.ogc-spec td:first-child {
  font-family: var(--font-en);
  font-size: .58rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #aaa;
  width: 38%;
}
.ogc-spec td:last-child {
  font-family: var(--font-en);
  font-size: .8rem;
  font-weight: 300;
  letter-spacing: .04em;
  color: var(--black);
}

/* CTAボタン */
.ogc-cta-row {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.ogc-btn-cta {
  display: block;
  text-align: center;
  font-family: var(--font-en);
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--black);
  border: 1px solid var(--black);
  padding: .9rem 1.5rem;
  text-decoration: none;
  transition: background .25s;
}
.ogc-btn-cta:hover { background: #333; }

/* モバイルはスティッキーバーで代替 */
@media (max-width: 768px) { .ogc-btn-cta { display: none; } }

.ogc-btn-inquiry {
  display: block;
  text-align: center;
  font-family: var(--font-en);
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--black);
  background: transparent;
  border: 1px solid #ccc;
  padding: .8rem 1.5rem;
  text-decoration: none;
  transition: border-color .25s;
}
.ogc-btn-inquiry:hover { border-color: var(--black); }

.ogc-shipping {
  font-family: var(--font-en);
  font-size: .6rem;
  letter-spacing: .08em;
  color: #aaa;
  margin-top: .8rem;
}

/* ════════════════════════════
   MAIN IMAGE
════════════════════════════ */
.ogc-main-img-wrap {
  margin-bottom: 2.5rem;
}
.ogc-main-img-wrap img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

/* ════════════════════════════
   BODY CONTENT（Gutenberg）
════════════════════════════ */
.ogc-post-content p {
  font-family: var(--font-en);
  font-size: clamp(.88rem, 1.8vw, 1rem);
  font-weight: 300;
  line-height: 1.95;
  letter-spacing: .02em;
  color: #333;
  margin-bottom: 1.6rem;
}
.ogc-post-content h2 {
  font-family: var(--font-en);
  font-size: clamp(1rem, 2.5vw, 1.3rem);
  font-weight: 300;
  letter-spacing: .08em;
  margin: 2.5rem 0 1.2rem;
  padding-bottom: .8rem;
  border-bottom: 1px solid #e8e4df;
}
.ogc-post-content blockquote {
  border-left: 1px solid var(--accent);
  padding: .4rem 0 .4rem 1.25rem;
  margin: 2rem 0;
  font-family: var(--font-en);
  font-style: italic;
  font-size: clamp(.9rem, 2vw, 1.05rem);
  font-weight: 300;
  line-height: 1.8;
  color: #555;
}
.ogc-post-content hr { border: none; border-top: 1px solid #e8e4df; margin: 2.5rem 0; }

/* ════════════════════════════
   GALLERY
   モバイル1列 → 480px以上2列
════════════════════════════ */
.ogc-gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: .6rem;
  margin: 2rem 0;
}
@media (min-width: 480px) {
  .ogc-gallery { grid-template-columns: 1fr 1fr; gap: .75rem; }
}

.ogc-gallery-cell {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: #eae7e1;
}
.ogc-gallery-cell img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .6s ease;
}
.ogc-gallery-cell:hover img { transform: scale(1.04); }
.ogc-gallery-label {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: .5rem .75rem;
  background: rgba(0,0,0,.42);
  font-family: var(--font-en);
  font-size: .58rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
  margin: 0;
}

/* ════════════════════════════
   NOTES
════════════════════════════ */
.ogc-label {
  display: block;
  font-family: var(--font-en);
  font-size: .6rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}
.ogc-notes {
  margin-top: 2rem;
  padding-top: 1.6rem;
  border-top: 1px solid #e8e4df;
}
.ogc-notes p {
  font-family: var(--font-en);
  font-size: .82rem;
  font-weight: 300;
  line-height: 2;
  color: #666;
}