/* ==========================================
   マッスル保健師 公式HP - 共通スタイル
   作成日: 2026-05-09
   担当: システム開発部 + クリエイティブ部門
   ========================================== */

:root {
  --color-bg: #FFFFFF;
  --color-navy: #1A2A4A;
  --color-navy-light: #2A3A5A;
  --color-red: #DC143C;
  --color-red-dark: #B01030;
  --color-red-light: #FFE5EA;
  --color-text: #1A1A1A;
  --color-text-sub: #555555;
  --color-bg-sub: #F5F5F5;
  --color-line: #E5E5E5;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

body {
  font-family: 'Noto Sans JP', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-feature-settings: "palt";
  letter-spacing: 0.03em;
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  background-color: var(--color-bg);
  margin: 0;
  padding: 0;
}

/* タイポグラフィユーティリティ */
.font-serif-jp { font-family: 'Noto Serif JP', serif; letter-spacing: 0.02em; }
.font-serif-en { font-family: 'Playfair Display', serif; }
.font-en       { font-family: 'Inter', sans-serif; letter-spacing: 0.05em; }

/* カラー */
.text-navy   { color: var(--color-navy); }
.text-red    { color: var(--color-red); }
.text-sub    { color: var(--color-text-sub); }
.bg-navy     { background-color: var(--color-navy); }
.bg-red      { background-color: var(--color-red); }
.bg-sub      { background-color: var(--color-bg-sub); }
.border-navy { border-color: var(--color-navy); }
.border-red  { border-color: var(--color-red); }

/* 上部赤ストライプ（ユニクロ風） */
.stripe-top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  height: 6px;
  background-color: var(--color-red);
  opacity: 0.85;
}

/* ==========================================
   ヘッダー（共通ナビゲーション）
   ========================================== */
.site-header {
  position: fixed;
  top: 6px;
  left: 0;
  right: 0;
  z-index: 40;
  padding: 1.25rem 1.5rem;
  background-color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-line);
  transition: background-color 0.3s ease;
}
.site-header.scrolled { background-color: rgba(255, 255, 255, 0.95); }

@media (min-width: 768px) {
  .site-header { padding: 1.25rem 3rem; }
}

.site-header-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.site-logo {
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-navy);
  letter-spacing: 0.15em;
  text-decoration: none;
}

.site-nav {
  display: none;
  gap: 2rem;
  font-family: 'Noto Sans JP', 'Inter', sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.05em;
}
@media (min-width: 768px) {
  .site-nav { display: flex; }
}

.site-nav a {
  color: var(--color-text-sub);
  text-decoration: none;
  transition: color 0.3s ease;
  position: relative;
  display: inline-block;
}
.site-nav a:hover { color: var(--color-navy); }
.site-nav a.contact-link:hover { color: var(--color-red); }

.site-nav a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--color-red);
  transition: width 0.3s ease;
}
.site-nav a:hover::after { width: 100%; }
.site-nav a.is-current { color: var(--color-navy); }
.site-nav a.is-current::after { width: 100%; }

/* モバイルメニュー */
.mobile-menu-btn {
  display: block;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  color: var(--color-navy);
}
@media (min-width: 768px) { .mobile-menu-btn { display: none; } }

.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.98);
  z-index: 45;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  font-family: 'Noto Serif JP', serif;
  font-size: 1.5rem;
}
.mobile-menu.is-open { display: flex; }
.mobile-menu a {
  color: var(--color-navy);
  text-decoration: none;
}
.mobile-menu .close-btn {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  background: none;
  border: none;
  font-size: 2rem;
  color: var(--color-navy);
  cursor: pointer;
}

/* ==========================================
   フッター（共通）
   ========================================== */
.site-footer {
  padding: 4rem 1.5rem;
  background-color: var(--color-navy);
  color: white;
}
@media (min-width: 768px) {
  .site-footer { padding: 4rem 3rem; }
}

.site-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.site-footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  margin-bottom: 3rem;
}
@media (min-width: 768px) {
  .site-footer-grid { grid-template-columns: repeat(3, 1fr); }
}

.site-footer-grid h4 {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  color: var(--color-red);
  text-transform: uppercase;
  margin: 0 0 1rem 0;
}
.site-footer-grid p {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.8;
  margin: 0;
}
.site-footer-grid a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color 0.3s ease;
}
.site-footer-grid a:hover { color: var(--color-red); }

.site-footer-brand .brand-name {
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  margin: 0 0 1rem 0;
  color: white;
}

.site-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.4);
}
@media (min-width: 768px) {
  .site-footer-bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}
.site-footer-bottom .domain {
  font-family: 'Inter', sans-serif;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.3);
}

/* ==========================================
   セクション共通
   ========================================== */
.section {
  padding: 6rem 1.5rem;
  background-color: white;
}
.section.bg-sub { background-color: var(--color-bg-sub); }
.section.bg-navy { background-color: var(--color-navy); color: white; }
.section.bg-navy h1, .section.bg-navy h2, .section.bg-navy h3 { color: white; }

@media (min-width: 768px) {
  .section { padding: 10rem 3rem; }
}

.section-inner {
  max-width: 1200px;
  margin: 0 auto;
}
.section-inner.narrow { max-width: 900px; }
.section-inner.wide { max-width: 1400px; }

/* セクションラベル（赤い線+英文字） */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--color-red);
  margin: 0 0 1.5rem 0;
}
.section-label::before {
  content: '';
  width: 2rem;
  height: 1px;
  background-color: var(--color-red);
}

.section-label.center {
  display: flex;
  justify-content: center;
}
.section-label.center::after {
  content: '';
  width: 2rem;
  height: 1px;
  background-color: var(--color-red);
}

/* ページタイトル */
.page-title {
  font-family: 'Noto Serif JP', serif;
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-navy);
  margin: 0 0 4rem 0;
}
@media (min-width: 768px) {
  .page-title { font-size: 4rem; }
}

/* ==========================================
   ボタン
   ========================================== */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.25rem 2.5rem;
  background-color: var(--color-navy);
  color: white;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  border: 1px solid var(--color-navy);
  transition: all 0.3s ease;
  text-decoration: none;
}
.btn-primary:hover {
  background-color: var(--color-red);
  border-color: var(--color-red);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1.75rem;
  background: transparent;
  color: var(--color-navy);
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  border: 1px solid var(--color-navy);
  transition: all 0.3s ease;
  text-decoration: none;
}
.btn-secondary:hover {
  background-color: var(--color-navy);
  color: white;
}

/* テキストリンク */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-navy);
  text-decoration: none;
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  position: relative;
  padding-bottom: 0.25rem;
}
.text-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--color-red);
  transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.text-link:hover { color: var(--color-red); }
.text-link:hover::after { width: 100%; }

/* ==========================================
   画像プレースホルダー
   ========================================== */
.img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #E8E8E8 0%, #D4D4D4 100%);
  color: #999;
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
}
.img-placeholder.navy {
  background: linear-gradient(135deg, var(--color-navy-light) 0%, var(--color-navy) 100%);
  color: rgba(255, 255, 255, 0.4);
}
.img-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 30% 30%, rgba(220, 20, 60, 0.05) 0%, transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(26, 42, 74, 0.04) 0%, transparent 60%);
}

/* ==========================================
   カード
   ========================================== */
.card-service {
  display: block;
  background: white;
  padding: 2rem;
  border-left: 4px solid var(--color-red);
  transition: all 0.3s ease;
  text-decoration: none;
  color: inherit;
}
.card-service:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  border-left-color: var(--color-navy);
}
.card-service:hover h3 {
  color: var(--color-red);
}
.card-service h3 {
  transition: color 0.3s ease;
}

.card-mvv {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 2.5rem;
  transition: all 0.4s ease;
}
.card-mvv:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(220, 20, 60, 0.5);
  transform: translateY(-4px);
}

/* ==========================================
   タイムライン番号（Story用）
   ========================================== */
.timeline-number {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 300;
  font-size: 4rem;
  line-height: 1;
  color: var(--color-red);
  opacity: 0.85;
}
@media (min-width: 768px) {
  .timeline-number { font-size: 7rem; }
}

/* ==========================================
   引用符（想いセクション用）
   ========================================== */
.quote-mark-large {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(8rem, 18vw, 14rem);
  line-height: 0.8;
  color: var(--color-red);
  opacity: 0.15;
  font-weight: 900;
  user-select: none;
}

/* ==========================================
   スクロールアニメーション
   ========================================== */
[data-animate] {
  opacity: 0;
  transform: translateY(2.5rem);
  transition: opacity 1.0s cubic-bezier(0.22, 1, 0.36, 1), transform 1.0s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-animate].is-visible {
  opacity: 1;
  transform: translateY(0);
}
[data-animate-delay="100"] { transition-delay: 0.1s; }
[data-animate-delay="200"] { transition-delay: 0.2s; }
[data-animate-delay="300"] { transition-delay: 0.3s; }
[data-animate-delay="400"] { transition-delay: 0.4s; }

/* ==========================================
   グリッドユーティリティ
   ========================================== */
.grid { display: grid; gap: 2rem; }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr; }
.grid-12 { grid-template-columns: 1fr; gap: 3rem; }

@media (min-width: 768px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
  .grid-12 { grid-template-columns: repeat(12, 1fr); }
  .col-span-3 { grid-column: span 3; }
  .col-span-4 { grid-column: span 4; }
  .col-span-5 { grid-column: span 5; }
  .col-span-6 { grid-column: span 6; }
  .col-span-7 { grid-column: span 7; }
  .col-span-8 { grid-column: span 8; }
  .col-span-9 { grid-column: span 9; }
}

/* ==========================================
   テキストユーティリティ
   ========================================== */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* レスポンシブ対応の余白 */
.spacer-sm { height: 2rem; }
.spacer-md { height: 4rem; }
.spacer-lg { height: 6rem; }

/* マージン */
.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-12 { margin-bottom: 3rem; }
.mb-16 { margin-bottom: 4rem; }
.mb-24 { margin-bottom: 6rem; }
.mt-4 { margin-top: 1rem; }
.mt-8 { margin-top: 2rem; }
.mt-12 { margin-top: 3rem; }
.mt-16 { margin-top: 4rem; }