:root {
  --header-height: 78px;
  --bg: #0d0f12;
  --header: #101419;
  --card: #171c22;
  --card-hover: #1d232a;
  --border: #2a3038;
  --border-strong: #3a424d;
  --text: #f3f4f6;
  --subtext: #9ca3ad;
  --cyan: #74DFDB;
  --green: #79bd43;
  --green-dark: #5f9e31;
  --danger: #ff6b6b;
  --shadow: 0 24px 70px rgba(0,0,0,.38);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + 22px); }
body {
  margin: 0;
  background:
    radial-gradient(circle at 12% -10%, rgba(116,223,219,.07), transparent 28%),
    var(--bg);
  color: var(--text);
  font-family: Inter, "Noto Sans JP", system-ui, sans-serif;
  line-height: 1.6;
}
body.modal-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button,input,select { font: inherit; }
button { cursor: pointer; }
img { display: block; max-width: 100%; }
.shell { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }

.site-header {
  position: sticky; top: 0; z-index: 1000;
  min-height: var(--header-height);
  background: rgba(16,20,25,.94);
  border-bottom: 1px solid rgba(116,223,219,.18);
  backdrop-filter: blur(18px);
}
.site-header__inner {
  min-height: var(--header-height);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.brand { display:inline-flex; align-items:center; gap:13px; }
.brand__mark {
  width:48px; height:48px; display:grid; place-items:center;
  border:1px solid rgba(116,223,219,.38);
  border-radius:8px;
  background:linear-gradient(145deg,#171d22,#0f1317);
  color:var(--cyan); font-weight:1000; letter-spacing:-.06em;
}
.brand__text { display:grid; line-height:1.08; }
.brand__name { font-size:17px; font-weight:900; letter-spacing:.035em; }
.brand__sub { margin-top:5px; color:var(--cyan); font-size:11px; font-weight:700; letter-spacing:.12em; }
.desktop-nav { display:flex; gap:8px; }
.desktop-nav a {
  padding:9px 12px; color:var(--subtext);
  border-radius:7px; font-size:12px; font-weight:800; letter-spacing:.08em;
}
.desktop-nav a:hover { color:var(--cyan); background:rgba(116,223,219,.06); }
.menu-button {
  display:none; width:42px; height:42px;
  border:1px solid var(--border); border-radius:8px;
  background:var(--card); color:var(--text); font-size:22px;
}
.mobile-nav { display:none; }

.hero {
  min-height:610px; position:relative; display:flex; align-items:center;
  overflow:hidden; isolation:isolate; border-bottom:1px solid var(--border);
}
.hero__grid {
  position:absolute; inset:0; z-index:-3; opacity:.3;
  background-image:
    linear-gradient(rgba(116,223,219,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(116,223,219,.055) 1px, transparent 1px);
  background-size:42px 42px;
}
.hero__glow {
  position:absolute; width:440px; height:440px; border-radius:50%;
  filter:blur(110px); z-index:-2; opacity:.14;
}
.hero__glow--cyan { left:-100px; top:-110px; background:var(--cyan); }
.hero__glow--green { right:-120px; bottom:-180px; background:var(--green); }
.hero__content { padding-block:110px; }
.eyebrow { margin:0 0 10px; color:var(--cyan); font-size:12px; font-weight:900; letter-spacing:.2em; }
.hero h1 {
  margin:0; max-width:820px;
  font-size:clamp(52px,8vw,104px); line-height:.86;
  letter-spacing:-.055em; font-weight:1000;
}
.hero__copy { margin:26px 0 0; color:#d7dde4; font-size:clamp(16px,2vw,22px); font-weight:700; letter-spacing:.05em; }
.hero__actions { margin-top:34px; display:flex; gap:12px; flex-wrap:wrap; }
.button {
  min-height:46px; padding:0 18px;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  border-radius:8px; font-size:13px; font-weight:900; letter-spacing:.04em;
}
.button--primary { background:var(--green); color:#0c1407; }
.button--ghost { border:1px solid var(--border-strong); background:rgba(23,28,34,.72); }

.products-section,.about-section { padding:88px 0; }
.about-section { padding-top:20px; padding-bottom:100px; }
.section-head {
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:28px; margin-bottom:30px;
}
.section-head--compact { align-items:flex-start; }
.section-head h2 { margin:0; font-size:clamp(34px,5vw,54px); line-height:1; letter-spacing:-.04em; }
.section-description { margin:12px 0 0; color:var(--subtext); }
.product-tools { display:flex; gap:10px; align-items:center; }
.search-box {
  height:44px; min-width:240px; padding:0 12px;
  display:flex; align-items:center; gap:8px;
  border:1px solid var(--border); border-radius:8px; background:#11161b; color:var(--subtext);
}
.search-box input { width:100%; border:0; outline:0; background:transparent; color:var(--text); }
.category-filter {
  height:44px; max-width:220px; padding:0 34px 0 12px;
  border:1px solid var(--border); border-radius:8px; background:#11161b; color:var(--text);
}
.shop-status {
  min-height:74px; display:flex; align-items:center; justify-content:center; gap:10px;
  border:1px dashed var(--border); border-radius:8px; color:var(--subtext);
}
.shop-status[hidden] { display:none; }

.product-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.product-card {
  overflow:hidden; border:1px solid var(--border); border-radius:10px; background:var(--card);
  transition:.18s ease;
}
.product-card:hover { transform:translateY(-3px); border-color:rgba(116,223,219,.4); background:var(--card-hover); }
.product-card__button { width:100%; padding:0; display:block; border:0; background:transparent; color:inherit; text-align:left; }
.product-card__image { position:relative; aspect-ratio:1/1; overflow:hidden; background:linear-gradient(145deg,#f8f8f8,#e8e8e8); }
.product-card__image img { width:100%; height:100%; object-fit:contain; transition:.28s ease; }
.product-card:hover .product-card__image img { transform:scale(1.025); }
.product-card__category {
  position:absolute; left:12px; top:12px; padding:5px 8px;
  border-radius:6px; color:#d9ffff; background:rgba(13,15,18,.82);
  border:1px solid rgba(116,223,219,.28); font-size:10px; font-weight:900; letter-spacing:.08em;
}
.product-card__body { padding:16px; }
.product-card__name { margin:0; min-height:48px; font-size:16px; line-height:1.45; }
.product-card__meta { margin-top:10px; display:flex; justify-content:space-between; gap:10px; color:var(--subtext); font-size:11px; }
.product-card__price { margin-top:13px; display:flex; align-items:baseline; gap:6px; }
.product-card__price strong { font-size:22px; letter-spacing:-.03em; }
.product-card__price span { color:var(--subtext); font-size:11px; }
.product-card__footer {
  margin-top:16px; display:flex; justify-content:space-between;
  color:var(--cyan); font-size:12px; font-weight:800;
}
.empty-state {
  min-height:240px; display:grid; place-items:center; align-content:center; gap:4px;
  border:1px dashed var(--border); border-radius:10px; color:var(--subtext); text-align:center;
}
.empty-state i { margin-bottom:6px; font-size:32px; color:var(--cyan); }
.empty-state strong { color:var(--text); }

.about-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.about-card { min-height:210px; padding:24px; border:1px solid var(--border); border-radius:10px; background:var(--card); }
.about-card > i { font-size:30px; color:var(--cyan); }
.about-card h3 { margin:18px 0 8px; font-size:14px; letter-spacing:.08em; }
.about-card p { margin:0; color:var(--subtext); font-size:13px; }

.site-footer { border-top:1px solid var(--border); background:#0b0e11; }
.site-footer__inner {
  min-height:110px; display:flex; align-items:center; justify-content:space-between; gap:24px;
  color:var(--subtext); font-size:12px;
}
.site-footer__inner > div { display:grid; }
.site-footer__inner strong { color:var(--text); }
.site-footer__inner span { color:var(--cyan); font-size:10px; letter-spacing:.12em; }

/* modal */
.product-modal {
  position:fixed; inset:0; z-index:2000; display:grid; place-items:center; padding:28px;
  visibility:hidden; opacity:0; pointer-events:none; transition:.18s ease;
}
.product-modal.is-open { visibility:visible; opacity:1; pointer-events:auto; }
.product-modal__backdrop { position:absolute; inset:0; background:rgba(4,6,8,.78); backdrop-filter:blur(12px); }
.product-modal__panel {
  position:relative; z-index:1; width:min(1120px,100%); max-height:calc(100vh - 56px); overflow:auto;
  border:1px solid var(--border-strong); border-radius:12px; background:#11161b; box-shadow:var(--shadow);
}
.product-modal__topbar {
  position:sticky; top:0; z-index:20; min-height:70px; padding:13px 16px 13px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  border-bottom:1px solid var(--border); background:rgba(17,22,27,.97); backdrop-filter:blur(16px);
}
.product-modal__topbar > div { display:grid; }
.product-modal__label { color:var(--cyan); font-size:9px; font-weight:900; letter-spacing:.16em; }
.product-modal__topbar strong { margin-top:2px; font-size:14px; }
.product-modal__close {
  width:40px; height:40px; display:grid; place-items:center;
  border:1px solid var(--border); border-radius:8px; background:var(--card); color:var(--text); font-size:20px;
}
.detail-status {
  margin:18px 24px 0; padding:12px 14px; border:1px solid var(--border);
  border-radius:8px; color:var(--subtext); background:#0f1418; font-size:13px;
}
.product-detail { padding:26px; display:grid; grid-template-columns:minmax(0,1.08fr) minmax(340px,.92fr); gap:34px; }
.product-detail__main-image {
  aspect-ratio:1/1; display:grid; place-items:center; overflow:hidden;
  border:1px solid var(--border); border-radius:10px; background:linear-gradient(145deg,#fafafa,#e9ebed);
}
.product-detail__main-image img { width:100%; height:100%; object-fit:contain; }
.preview-thumbnails { margin-top:12px; display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.preview-thumb {
  aspect-ratio:1/1; padding:0; overflow:hidden; border:1px solid var(--border);
  border-radius:8px; background:#f3f3f3;
}
.preview-thumb.active { border-color:var(--cyan); }
.preview-thumb img { width:100%; height:100%; object-fit:contain; }
.detail-category { margin:0 0 6px; color:var(--cyan); font-size:11px; font-weight:900; letter-spacing:.1em; }
.product-detail__info h2 { margin:0; font-size:clamp(26px,3vw,40px); line-height:1.12; letter-spacing:-.04em; }
.detail-price { margin:18px 0 20px; padding-bottom:20px; display:flex; align-items:baseline; gap:7px; border-bottom:1px solid var(--border); }
.detail-price strong { font-size:34px; letter-spacing:-.04em; }
.detail-price span { color:var(--subtext); font-size:12px; }
.detail-description { color:#d6dbe0; font-size:13px; white-space:pre-line; }
.detail-meta { margin:22px 0; display:grid; gap:8px; }
.detail-meta > div {
  padding:10px 12px; display:flex; justify-content:space-between; gap:18px;
  border:1px solid var(--border); border-radius:8px; background:#10151a;
}
.detail-meta dt { color:var(--subtext); font-size:11px; }
.detail-meta dd { margin:0; text-align:right; font-size:12px; }
.option-block { margin-top:20px; }
.option-block__head { margin-bottom:10px; display:flex; justify-content:space-between; gap:12px; }
.option-block__head span { color:var(--subtext); font-size:11px; font-weight:900; letter-spacing:.08em; }
.option-block__head strong { font-size:12px; }
.color-options { display:flex; flex-wrap:wrap; gap:9px; }
.color-button {
  width:38px; height:38px; padding:0; position:relative;
  border:2px solid transparent; border-radius:50%; background:transparent;
}
.color-button::before {
  content:""; position:absolute; inset:4px; border-radius:50%;
  background:var(--swatch); border:1px solid rgba(255,255,255,.28);
}
.color-button.active { border-color:var(--cyan); }
.color-button:disabled { opacity:.35; cursor:not-allowed; }
.size-options { display:flex; flex-wrap:wrap; gap:8px; }
.size-button {
  min-width:48px; height:40px; padding:0 12px; border:1px solid var(--border-strong);
  border-radius:7px; background:var(--card); color:var(--text); font-weight:800;
}
.size-button.active { border-color:var(--cyan); color:var(--cyan); background:rgba(116,223,219,.06); }
.quantity-block { margin-top:22px; display:flex; align-items:center; justify-content:space-between; }
.quantity-block > span { color:var(--subtext); font-size:11px; font-weight:900; letter-spacing:.08em; }
.quantity-stepper {
  height:42px; display:grid; grid-template-columns:42px 52px 42px;
  border:1px solid var(--border-strong); border-radius:8px; overflow:hidden; background:var(--card);
}
.quantity-stepper button { border:0; background:#12181d; color:var(--text); font-size:18px; }
.quantity-stepper span { display:grid; place-items:center; border-inline:1px solid var(--border); font-weight:900; }
.add-cart-button {
  width:100%; min-height:54px; margin-top:18px; display:flex; align-items:center; justify-content:center; gap:9px;
  border:0; border-radius:8px; background:var(--green); color:#091108;
  font-size:14px; font-weight:1000; letter-spacing:.04em;
}
.add-cart-button:disabled { opacity:.45; cursor:not-allowed; }
.checkout-note { margin:8px 0 0; color:var(--subtext); font-size:10px; text-align:center; }

@media (max-width:960px) {
  .product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .about-grid { grid-template-columns:1fr; }
  .product-detail { grid-template-columns:1fr; }
}
@media (max-width:760px) {
  :root { --header-height:68px; }
  .shell { width:min(100% - 24px,1180px); }
  .desktop-nav { display:none; }
  .menu-button { display:grid; place-items:center; }
  .mobile-nav { display:none; padding:0 12px 12px; background:var(--header); }
  .mobile-nav.open { display:grid; }
  .mobile-nav a { padding:12px; border-top:1px solid var(--border); color:var(--subtext); font-size:12px; font-weight:800; }
  .brand__mark { width:42px; height:42px; }
  .brand__name { font-size:14px; }
  .hero { min-height:520px; }
  .hero__content { padding-block:80px; }
  .products-section { padding:64px 0; }
  .section-head { align-items:stretch; flex-direction:column; }
  .product-tools { align-items:stretch; flex-direction:column; }
  .search-box,.category-filter { width:100%; max-width:none; }
  .product-modal { padding:0; }
  .product-modal__panel { width:100%; height:100%; max-height:100vh; border:0; border-radius:0; }
  .product-detail { padding:16px; }
  .site-footer__inner { padding-block:24px; align-items:flex-start; flex-direction:column; justify-content:center; }
}
@media (max-width:540px) {
  .product-grid { grid-template-columns:1fr; }
  .hero h1 { font-size:52px; }
}


/* hidden属性を独自display指定より優先する */
.empty-state[hidden],
.shop-status[hidden],
.detail-status[hidden] {
  display: none !important;
}


/* FINAL COLOR FIX */
.detail-status {
  white-space: pre-line;
}

/* 開発中のバージョン表示（公開時は非表示） */
body::after {
  content: none;
  position: fixed;
  right: 10px;
  bottom: 8px;
  z-index: 9999;
  padding: 4px 7px;
  border: 1px solid rgba(116,223,219,.25);
  border-radius: 5px;
  background: rgba(13,15,18,.82);
  color: #74DFDB;
  font-size: 9px;
  letter-spacing: .08em;
  pointer-events: none;
}


/* PUBLIC POLISH */
.products-title-row { display:flex; align-items:end; gap:14px; }
.products-title-row h2 { margin-bottom:0; }
.product-count { margin-bottom:5px; padding:4px 7px; border:1px solid var(--border-strong); border-radius:5px; color:var(--subtext); font-size:9px; font-weight:900; letter-spacing:.1em; }
.checkout-note { display:flex; align-items:center; justify-content:center; gap:5px; }
.add-cart-button:not(:disabled):hover { filter:brightness(1.08); transform:translateY(-1px); }
.add-cart-button { transition:transform .18s ease, filter .18s ease, opacity .18s ease; }
.checkout-transition { position:fixed; inset:0; z-index:10000; display:grid; place-items:center; padding:20px; background:rgba(5,8,10,.82); backdrop-filter:blur(10px); opacity:0; visibility:hidden; transition:opacity .2s ease, visibility .2s ease; }
.checkout-transition.is-open { opacity:1; visibility:visible; }
.checkout-transition__card { width:min(100%,420px); padding:34px 28px; border:1px solid var(--border-strong); border-radius:14px; background:var(--card); box-shadow:0 24px 80px rgba(0,0,0,.5); text-align:center; }
.checkout-transition__icon { width:58px; height:58px; margin:0 auto 18px; display:grid; place-items:center; border:1px solid rgba(121,189,67,.45); border-radius:50%; background:rgba(121,189,67,.08); color:var(--green); font-size:27px; }
.checkout-transition__card strong { display:block; font-size:16px; }
.checkout-transition__card span { display:block; margin-top:8px; color:var(--subtext); font-size:11px; line-height:1.7; }
.checkout-transition__bar { height:3px; margin-top:22px; overflow:hidden; border-radius:999px; background:#242b31; }
.checkout-transition__bar i { display:block; width:45%; height:100%; border-radius:inherit; background:var(--cyan); animation:checkout-loading .65s ease-in-out infinite alternate; }
@keyframes checkout-loading { from { transform:translateX(-30%); } to { transform:translateX(150%); } }
@media (max-width:540px) {
  .products-title-row { align-items:center; }
  .product-count { margin-bottom:0; }
  .product-detail__main-image { min-height:300px; }
  .add-cart-button { min-height:58px; font-size:15px; }
  .checkout-note { line-height:1.5; }
}