/* トリミングサロン専門LP — テーマスタイル（見た目・モック準拠）
   モック: design/mockups/20260906_lp-trimming-full_v1.png
   色は画像から実測した値 */

/* ============ カラーパレット（上書き） ============ */
:root {
  /* ブランドカラー — 茶系 */
  --brand-600: #997B66;    /* CTAボタン・アクセント・下線 */
  --brand-700: #83674F;    /* ホバー状態 */
  --brand-050: #F1EFEC;    /* 引用カード・淡い面 */

  /* テキストカラー */
  --ink: #211F1F;          /* 見出し（明朝） */
  --ink-body: #6E6C6B;     /* 本文 */
  --ink-mute: #8A8886;     /* 補助・キャプション */

  /* 背景 */
  --bg: #FCFCFC;           /* 基本背景 */
  --bg-warm: #F2F2F2;      /* ヒーロー左・帯 */
  --bg-cool: #EDF1F6;      /* ヘッダー（既存ブランドの --bg-tint に揃える） */
  --line: #E6E4E1;         /* 罫線・区切り */
  --footer: #4C5760;       /* フッター帯 */
  --white: #FFFFFF;        /* 白文字 */
}

/* ============ ヘッダー ============ */
.site-header {
  background: rgba(237, 241, 246, 0.96) !important;
  border-bottom-color: var(--line);
}

.brand {
  color: var(--ink);
}

.brand-logo {
  color: var(--brand-600);
}

.site-nav a {
  color: var(--ink-body);
  font-weight: 500;
}

.site-nav a:hover {
  color: var(--brand-600);
}

/* ============ ボタン ============ */
.btn-primary {
  background: var(--brand-600);
  color: var(--white);
}

.btn-primary:hover {
  background: var(--brand-700);
}

.btn-text {
  color: var(--brand-600);
}

.btn-text:hover {
  color: var(--brand-700);
}

/* ============ S1 ヒーロー ============ */
.hero {
  background: linear-gradient(90deg, var(--bg-warm) 0%, transparent 60%),
              linear-gradient(180deg, transparent 40%, rgba(33, 31, 31, 0.2) 100%);
}

.hero-bg {
  background: linear-gradient(90deg, var(--bg-warm) 0%, transparent 60%),
              linear-gradient(180deg, transparent 40%, rgba(33, 31, 31, 0.2) 100%);
}

.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(33, 31, 31, 0.3) 0%, transparent 50%);
}

.hero-eyebrow {
  color: var(--ink);
}

.hero-title {
  color: var(--ink);
}

.hero-lead {
  color: var(--ink-body);
}

.media-icon {
  color: var(--ink-body);
}

.media-icon:hover {
  color: var(--brand-600);
}

/* ============ S2 デモ動画 ============ */
.demo-video {
  background: #f0f0f0;
  border-radius: 4px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}

.play-button {
  color: var(--white);
  background: var(--brand-600);
  border-radius: 50%;
  padding: 12px;
}

.play-button:hover {
  background: var(--brand-700);
}

.play-label {
  font-family: var(--font-script);
  color: var(--white);
}

.phone-frame {
  color: #333;
}

.phone-still {
  border-radius: 8px;
}

.phone-text {
  color: var(--white);
  font-family: var(--font-script);
}

/* ============ S3 特徴 ============ */
.section-title {
  color: var(--ink);
}

.features-grid {
  border-left-color: var(--line);
  border-right-color: var(--line);
}

.feature-card {
  border-right-color: var(--line);
  padding-block: 32px;
}

.feature-icon {
  color: var(--ink);
  stroke-width: 1.5;
}

.feature-card h3 {
  color: var(--ink);
}

.feature-card p {
  color: var(--ink-body);
}

/* ============ S4 ギャラリー ============ */
.gallery-item {
  border-radius: 4px;
  background: #f0f0f0;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}

.gallery-label {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.95);
  letter-spacing: 0.08em;
  padding: 6px 12px;
}

.gallery-caption {
  color: var(--white);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.gallery-arrow {
  color: var(--ink-body);
}

/* ============ S5 想い ============ */
.story-script {
  font-family: var(--font-script);
  color: var(--ink-mute);
}

.story-content h2 {
  color: var(--ink);
}

.story-content p {
  color: var(--ink-body);
}

.story-quote {
  background: var(--brand-050);
  border-radius: 6px;
}

.story-quote p {
  color: var(--ink);
  font-weight: 500;
}

/* ============ S6 料金 ============ */
.pricing-lead {
  color: var(--ink-body);
}

.pricing-monitor {
  background: var(--bg-warm);
  border-radius: 6px;
}

.pricing-monitor h3 {
  color: var(--ink);
}

.price {
  color: var(--brand-600);
  font-weight: 700;
}

.pricing-limit {
  color: var(--brand-600);
  font-weight: 700;
}

.pricing-condition {
  color: var(--ink-body);
}

.pricing-card {
  border-color: var(--line);
  border-radius: 6px;
  background: var(--bg);
}

.pricing-card h3 {
  color: var(--ink);
}

.pricing-ribbon {
  background: var(--brand-600);
  color: var(--white);
}

.pricing-description {
  color: var(--ink-body);
}

.pricing-features {
  border-color: var(--line);
}

.pricing-features li {
  border-bottom-color: var(--line);
  color: var(--ink-body);
}

.pricing-note {
  color: var(--ink-mute);
}

/* ============ S7 FAQ ============ */
.faq-item {
  border-bottom-color: var(--line);
}

.faq-item summary {
  color: var(--ink);
}

.faq-item summary:hover {
  color: var(--brand-600);
}

.faq-item summary::after {
  color: var(--brand-600);
}

.faq-item p {
  color: var(--ink-body);
}

/* ============ フッター ============ */
.site-footer {
  background: var(--footer);
  color: var(--white);
}

.footer-bg {
  background: linear-gradient(180deg, rgba(76, 87, 96, 0.6) 0%, rgba(76, 87, 96, 0.8) 100%);
}

.footer-inner {
  background: rgba(76, 87, 96, 0.85);
}

.footer-tagline {
  color: rgba(255, 255, 255, 0.9);
}

.footer-brand {
  color: var(--white);
  font-family: var(--font-serif);
}

.footer-info {
  color: rgba(255, 255, 255, 0.9);
}

.footer-nav a {
  color: var(--white);
  opacity: 0.9;
}

.footer-nav a:hover {
  opacity: 1;
  color: var(--brand-600);
}

.footer-note {
  color: rgba(255, 255, 255, 0.8);
}

/* ============ ユーティリティ ============ */
.section {
  background: var(--bg);
}

.container {
  padding-inline: var(--gutter);
}

/* フォーカスカラー */
:focus-visible {
  outline-color: var(--brand-600);
}

/* リンクホバー */
a {
  transition: color 0.2s ease;
}

a:hover {
  color: var(--brand-700);
}

/* ============ 印刷スタイル ============ */
@media print {
  .site-header,
  .site-footer {
    display: none;
  }

  body {
    background: var(--white);
  }

  a {
    color: inherit;
    text-decoration: underline;
  }
}