/* ==========================================================================
   taste-cool.css
   イメージテイスト: 3-5. クール・かっこいい（先進性・硬質・プロフェッショナル）
   Google Fonts（Montserrat + Noto Sans JP）を使用するため、HTMLの<head>にfontsリンクが必要。
   ========================================================================== */

:root {
  --color-primary: #0f172a;
  --color-primary-dark: #060a14;
  --color-accent: #00d2ff;
  --color-accent-contrast: #00d2ff;

  --color-bg: #121212;
  --color-bg-alt: #1a1f2b;
  --color-text: #e6e8ec;
  --color-text-light: #93a0b4;
  --color-border: #2a3040;

  --color-header-bg: #121212;
  --color-footer-bg: #060a14;
  --color-footer-text: #e6e8ec;

  --color-cta-bg: #00d2ff;
  --color-cta-text: #0a0f1a;

  --font-heading: "Montserrat", "Noto Sans JP", system-ui, sans-serif;
  --font-body: "Noto Sans JP", system-ui, sans-serif;
  --letter-spacing-heading: 0.03em;

  /* 完全な直角 */
  --radius: 0px;
  --radius-lg: 0px;

  /* シャープな濃い影／ネオングロー */
  --shadow-sm: 0 0 0 1px rgba(0, 210, 255, 0.15);
  --shadow-md: 0 0 24px rgba(0, 210, 255, 0.35);
  --border-style: 1px solid #2a3040;
}

body {
  background: var(--color-bg);
}

.section--alt {
  background: var(--color-bg-alt);
  background-image: linear-gradient(135deg, transparent 48%, rgba(0, 210, 255, 0.06) 48%, rgba(0, 210, 255, 0.06) 52%, transparent 52%);
  background-size: 60px 60px;
}

.feature-card,
.service-card,
.voice-card {
  background: var(--color-bg-alt);
  border-radius: 0;
  box-shadow: var(--shadow-sm);
}

.feature-card:hover,
.service-card:hover {
  box-shadow: var(--shadow-md);
}

.feature-card__icon {
  background: var(--color-primary);
  color: var(--color-accent);
  border-radius: 0;
}

.gallery-grid__item .photo-block,
.mv--photo .mv__photo,
.special-card .photo-block,
.service-card__thumb {
  border-radius: 0;
}

.btn {
  border-radius: 0;
}

.btn--primary,
.form-submit .btn {
  background: var(--color-cta-bg);
  color: var(--color-cta-text);
  font-weight: 700;
  box-shadow: 0 0 20px rgba(0, 210, 255, 0.4);
}

.btn--outline {
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
}

.header-cta {
  border-radius: 0;
  background: var(--color-accent);
  color: var(--color-primary-dark);
}

.site-header {
  background: var(--color-header-bg);
  border-bottom: 1px solid var(--color-accent);
}

/* 背景が暗いため、ロゴ・メニューアイコンは明るい色で視認性を確保 */
.site-logo {
  color: var(--color-accent);
}

.nav-toggle span {
  background: var(--color-text);
}

.global-nav.is-open {
  background: var(--color-bg);
}

.section__title::after {
  content: "";
  display: block;
  width: 48px;
  height: 2px;
  background: var(--color-accent);
  margin: 14px auto 0;
  box-shadow: 0 0 8px rgba(0, 210, 255, 0.7);
}

.info-table th {
  background: var(--color-bg-alt);
}

.form-row input,
.form-row select,
.form-row textarea {
  background: var(--color-bg-alt);
  color: var(--color-text);
}

.mv__catch em {
  color: var(--color-accent);
}