style.css

/* Truth Wave 共通スタイル（v4：行動優先＋静けさの節度） */
:root {
  --bg-dark: #0a0e1a;
  --text-light: #f0f4f8;
  --accent: #a78bfa;     /* 紫系 */
  --accent-1: #60a5fa;   /* ブルー系（外部リンクなど） */
  --accent-2: #facc15;   /* ゴールド系（主要CTA） */
  --deep-blue: #0c1a3e;
  --font-main: 'Helvetica Neue', system-ui, -apple-system, Segoe UI, Roboto, Noto Sans JP, sans-serif;
}

/* ベース */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  padding: 0;
  font-family: var(--font-main);
  background-color: var(--bg-dark);
  color: var(--text-light);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3 { color: var(--accent); font-weight: 600; margin: 0 0 0.5rem 0; }
a { color: var(--accent-2); text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }

/* アクセシビリティ＆ナビゲーション補助 */
.skip-link {
  position: absolute;
  top: -40px;
  left: 16px;
  padding: 8px 12px;
  background: #111827;
  color: #e5e7eb;
  border-radius: 9999px;
  font-size: 14px;
  text-decoration: none;
  z-index: 9999;
}
.skip-link:focus { top: 16px; }
/* 固定ナビでのアンカー隠れ防止 */
section { scroll-margin-top: 72px; }

/* グローバルナビ（固定） */
.global-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  gap: .75rem;
  justify-content: flex-end;
  padding: 0.5rem 1.25rem;
  background: linear-gradient(to right, rgba(15,23,42,0.9), rgba(15,23,42,0.65));
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(148,163,184,0.4);
}
.global-nav a {
  font-size: 0.82rem;
  text-decoration: none;
  color: #e2e8f0;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.global-nav a:hover {
  background: rgba(148,163,184,0.18);
  color: #f9fafb;
  transform: translateY(-1px);
}

/* ヒーロー（余白を詰めてCTAを視界内に） */
.hero {
  text-align: center;
  padding: calc(6rem + 56px) 1rem 6rem; /* 10rem → 6rem */
  position: relative;
  background: radial-gradient(circle at center, #111827, var(--deep-blue));
  overflow: hidden;
}
@media (min-width: 768px) { .hero { padding-bottom: 8rem; } }
.hero-title { font-size: 2.5rem; margin-bottom: 1rem; }
.hero-sub { font-size: 1.2rem; opacity: 0.9; max-width: 780px; margin: 0 auto; }
.hero-cta { margin-top: 2rem; }
.cta-notes { margin-top: .5rem; font-size: .85rem; opacity: .75; }

/* 波紋アニメーション（ヒーロー通過後は停止） */
.ripple-bg::before {
  content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 200vw; height: 200vw; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.03) 0%, transparent 70%);
  animation: ripple 12s infinite linear; z-index: 0;
}
body.ripple-paused .ripple-bg::before { animation: none !important; }
@keyframes ripple {
  0% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.3; }
  100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
}

/* セクション共通 */
.section { padding: 4rem 1.5rem; max-width: 880px; margin: 0 auto; position: relative; z-index: 1; }
.section h2 {
  font-size: 1.8rem; margin-bottom: 1.2rem;
  border-bottom: 1px solid rgba(255,255,255,0.08); padding-bottom: 0.5rem;
}

/* リスト */
.philosophy-points { list-style: none; padding: 0; margin: 1.5rem 0; }
.philosophy-points li { margin-bottom: 1rem; padding-left: 1rem; position: relative; }
.philosophy-points li::before { content: '–'; position: absolute; left: 0; color: var(--accent-2); }

/* 体感：余白・直感・揺らぎ */
.concepts { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1rem; margin-top: 1.25rem; }
.concept {
  display: grid; grid-template-rows: auto auto auto; align-items: center; justify-items: center;
  padding: .9rem; border-radius: 14px; background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
}
.concept .icon { color: var(--accent-2); }
.concept-label { margin-top: .5rem; font-weight: 600; letter-spacing: .02em; color: var(--text-light); }
.concept-hint { margin-top: .1rem; font-size: .8rem; opacity: .7; color: var(--text-light); }

/* アニメーション */
@keyframes breathe { 0%,100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(250,204,21,0.12);} 50% { transform: scale(1.03); box-shadow: 0 10px 30px rgba(250,204,21,0.10);} }
@keyframes ping { 0% { opacity:.5; transform:scale(0.98);} 50% { opacity:1; transform:scale(1.02);} 100% { opacity:.5; transform:scale(0.98);} }
@keyframes wave { 0% { stroke-dashoffset: 120; } 100% { stroke-dashoffset: 0; } }
.icon--space { animation: breathe 2.8s ease-in-out infinite; }
.icon--intuition { animation: ping 1.8s ease-in-out infinite; transform-origin: center; }
.icon--ripple .wave-path { stroke-dasharray: 120; animation: wave 2.4s linear infinite; }

/* プロジェクト */
.projects { display: flex; flex-direction: column; gap: 2rem; margin-top: 2rem; }
.project-summary { margin-top: 0.5rem; line-height: 1.7; font-size: 0.95rem; color: #cbd5e1; }

/* Before/After micro gallery */
.ba-grid { margin-top: .75rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
.ba-item {
  position: relative; overflow: hidden; border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
}
.ba-item img { width: 100%; height: auto; display: block; transition: transform .25s ease; }
.ba-item:hover img { transform: scale(1.03); }
.ba-item figcaption {
  position: absolute; left: .5rem; bottom: .4rem; padding: .2rem .5rem;
  font-size: .8rem; font-weight: 700; letter-spacing: .04em;
  background: rgba(0,0,0,0.35); color: #fff; border-radius: 9999px;
  border: 1px solid rgba(255,255,255,0.2);
}
.ba-link { display:block; position:relative; }

/* 外部リンク（単一管理） */
.external-links { margin-top: 0.5rem; font-size: 0.9rem; }
.external-links a { display: inline-block; margin-right: 1rem; color: var(--accent-1); text-decoration: underline; }

/* アコーディオン */
.accordion-toggle {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .6rem 1rem; border-radius: 9999px;
  background: rgba(255,255,255,0.06);
  color: var(--text-light); border: 1px solid rgba(255,255,255,0.12);
  cursor: pointer; transition: background .2s ease, transform .2s ease, border-color .2s ease;
}
.accordion-toggle:hover { background: rgba(255,255,255,0.10); transform: translateY(-1px); border-color: rgba(255,255,255,0.2); }
.accordion-toggle.open { background: rgba(250,204,21,0.12); border-color: var(--accent-2); }
.accordion-content { display: none; margin-top: 1rem; }
.accordion-toggle.open + .accordion-content { display: block; }

/* CTA */
.cta {
  display: inline-block; background: var(--accent-2); color: #0a0e1a;
  padding: 0.75rem 1.5rem; border-radius: 9999px; font-weight: 800; letter-spacing: .02em;
  transition: transform .2s ease, background .3s ease, box-shadow .3s ease;
  box-shadow: 0 6px 20px rgba(250, 204, 21, 0.18);
}
.cta:hover, .cta:focus-visible {
  background: var(--accent);
  color: #fff;
  transform: translateY(-1px) scale(1.04);
  box-shadow: 0 8px 26px rgba(167, 139, 250, 0.28);
}
.cta--lg { font-size: 1.1rem; }

/* セカンダリCTA（アウトライン） */
.cta--secondary {
  background: transparent; color: var(--text-light);
  border: 2px solid rgba(255,255,255,0.3);
}
.cta--secondary:hover, .cta--secondary:focus-visible {
  background: rgba(255,255,255,0.06);
  border-color: var(--accent-2);
  color: var(--text-light);
}


details[open] > .accordion-summary::after { content: '－'; }
.accordion-content {
  margin-top: .45rem;
  padding-top: .35rem;
  border-top: 1px dashed rgba(148,163,184,0.5);
  font-size:.9rem;
  color:#CBD5F5;
}

/* 追従CTA：モバイルでは非表示（CTAの同時出現を制限） */
.sticky-cta { position: fixed; right: 1rem; bottom: 1rem; z-index: 1100; }
@media (max-width: 640px) { .sticky-cta { display: none; } }

/* Lightbox（:targetベースの軽量実装） */
.lb { display:none; position:fixed; inset:0; background:rgba(0,0,0,.72); z-index:1200; }
.lb:target { display:block; }
.lb img { max-width:92vw; max-height:86vh; position:absolute; inset:0; margin:auto; box-shadow: 0 10px 40px rgba(0,0,0,.5); border-radius: 12px; }
.lb-close { position:absolute; inset:0; display:block; }
.lb-close::after {
  content:'×'; position:absolute; top:1rem; right:1rem; font-size:2rem; line-height:1; color:#fff; opacity:.85;
}

/* 動きの配慮：動きを必要な人にだけ */
@media (prefers-reduced-motion: reduce) {
  .ripple-bg::before,
  .icon--space,
  .icon--intuition,
  .icon--ripple .wave-path { animation: none !important; }
}

/* レスポンシブ */
@media (min-width: 768px) {
  .hero-title { font-size: 3.5rem; }
  .hero-sub { font-size: 1.35rem; }
  .section { padding: 6rem 2rem; }
  .project-summary { font-size: 1rem; }
  .cta--lg { font-size: 1.25rem; }
  .footer blockquote { font-size: 1.4rem; }
}

/* 商品ラインナップ */
.lineup-grid {
  margin-top: 1.75rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}

.lineup-item {
  padding: 1.25rem 1.25rem 1.5rem;
  border-radius: 16px;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.35);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.65);
}

.lineup-header {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.4rem;
}

.lineup-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.6rem;
  font-size: 0.75rem;
  border-radius: 9999px;
  background: rgba(250, 204, 21, 0.14);
  color: #facc15;
  border: 1px solid rgba(250, 204, 21, 0.4);
  letter-spacing: 0.03em;
}

.lineup-item h3 {
  margin: 0;
  font-size: 1.05rem;
  color: var(--accent);
}

.lineup-desc {
  margin-top: 0.4rem;
  font-size: 0.9rem;
  color: #cbd5e1;
  line-height: 1.7;
}

.lineup-meta {
  margin-top: 0.5rem;
  font-size: 0.8rem;
  opacity: 0.8;
  color: #94a3b8;
}
/* --- Trust section & Accordion --- */
.accordion-toggle{
  display:inline-block;
  margin:.75rem 0 1rem;
  padding:.5rem .75rem;
  border:1px solid rgba(148,163,184,.35);
  border-radius:.5rem;
  background:transparent;
  color:#94A3B8;
  cursor:pointer;
  transition:background .2s ease, border-color .2s ease, color .2s ease;
}
.accordion-toggle:hover,
.accordion-toggle.open{
  background:rgba(148,163,184,.08);
  border-color:rgba(148,163,184,.55);
  color:#cdd7e3;
}
.accordion-content{ margin-top:.5rem; }
.trust-list{ list-style: none; padding-left: 0; }
.trust-list li{ margin:.5rem 0 1rem; }
.trust-list strong{ color:#cdd7e3; }
.trust-links a{ color:#FACC15; text-decoration:none; }
.trust-links a:hover{ text-decoration:underline; }
/* External link row */
.external-links{ display:flex; gap:1rem; margin-top: .5rem; flex-wrap:wrap; }
.external-links a{ text-decoration:none; border-bottom:1px solid rgba(148,163,184,.35); padding-bottom:2px; }
.external-links a:hover{ border-color:rgba(148,163,184,.65); }

      /* 右上に固定／他要素より前面に */
.language-switcher{
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 9999;
}
.lang-btn{
  display:inline-block;
  padding:6px 10px;
  font-size:13px;
  color:#0A0E1A;
  background:#FACC15;            /* 迷わない色 */
  border-radius:9999px;
  text-decoration:none;
  border:1px solid rgba(0,0,0,.15);
}
.lang-btn:hover{ filter:brightness(.95); }

/* フッター */
.footer {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 16px 32px;
  font-size: 0.8rem;
  color: #9ca3af;
  text-align: right;
}