/*
 Theme Name:   Club V
 Theme URI:
 Description:  Club V - バーチャル活動者事務所 公式サイトテーマ
 Author:       lowgear
 Author URI:
 Template:     astra
 Version:      1.0.0
 Text Domain:  clubv-child
*/

/* ==========================================================================
   CSS Custom Properties
   ========================================================================== */
:root {
  /* Primary */
  --color-black:         #0a0a0a;
  --color-dark:          #171717;
  --color-dark-surface:  #1e1e2e;
  --color-dark-card:     #242438;

  /* Accent - Royal Purple */
  --color-royal-purple:  #6a258a;
  --color-purple-light:  #8b3fb8;
  --color-purple-dark:   #4a1a60;
  --color-purple-glow:   rgba(106, 37, 138, 0.3);
  --color-purple-subtle: rgba(106, 37, 138, 0.08);

  /* Gold */
  --color-gold:          #d4af37;
  --color-gold-light:    #e8c84a;
  --color-gold-dark:     #b8960f;
  --color-gold-glow:     rgba(212, 175, 55, 0.2);

  /* Neutral */
  --color-white:         #ffffff;
  --color-gray-100:      #f5f5f5;
  --color-gray-200:      #e0e0e0;
  --color-gray-300:      #bdbdbd;
  --color-gray-400:      #9e9e9e;
  --color-gray-500:      #757575;
  --color-gray-600:      #616161;
  --color-gray-700:      #424242;

  /* Gradients */
  --gradient-purple:     linear-gradient(135deg, #6a258a 0%, #8b3fb8 100%);
  --gradient-gold:       linear-gradient(135deg, #d4af37 0%, #e8c84a 100%);
  --gradient-dark:       linear-gradient(180deg, #0a0a0a 0%, #1e1e2e 100%);
  --gradient-hero:       linear-gradient(180deg, rgba(10,10,10,0) 0%, rgba(10,10,10,0.8) 100%);

  /* Shadows */
  --shadow-sm:           0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md:           0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg:           0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-purple:       0 4px 20px rgba(106, 37, 138, 0.3);
  --shadow-gold:         0 4px 20px rgba(212, 175, 55, 0.2);

  /* Typography */
  --font-primary:        'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  --font-heading:        'Poppins', 'Noto Sans JP', sans-serif;
  --font-accent:         'Poppins', sans-serif;

  /* Spacing */
  --section-padding:     100px 0;
  --container-width:     1200px;
  --container-padding:   0 24px;

  /* Border */
  --border-radius-sm:    4px;
  --border-radius-md:    8px;
  --border-radius-lg:    16px;
  --border-radius-xl:    24px;

  /* Transition */
  --transition-fast:     0.2s ease;
  --transition-base:     0.3s ease;
  --transition-slow:     0.5s ease;
}

/* ==========================================================================
   Reset & Base
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--color-black);
  color: var(--color-white);
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Astra overrides */
.ast-container,
.site-content .ast-container {
  max-width: var(--container-width);
  padding: var(--container-padding);
}

#page {
  background-color: var(--color-black);
}

/* ==========================================================================
   Typography
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-white);
}

h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 3vw, 1.75rem); }
h4 { font-size: clamp(1.1rem, 2vw, 1.375rem); }

p {
  color: var(--color-gray-200);
  line-height: 1.9;
}

a {
  color: var(--color-gold);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-gold-light);
}

/* ==========================================================================
   Section Titles
   ========================================================================== */
.section-title {
  text-align: center;
  margin-bottom: 60px;
}

.section-title__en {
  display: block;
  font-family: var(--font-accent);
  font-size: clamp(0.75rem, 2vw, 0.875rem);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 8px;
}

.section-title__ja {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  color: var(--color-white);
}

.section-title__line {
  display: block;
  width: 40px;
  height: 2px;
  background: var(--gradient-gold);
  margin: 16px auto 0;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 40px;
  border: none;
  border-radius: 50px;
  font-family: var(--font-primary);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all var(--transition-base);
  text-decoration: none;
}

.btn--gold {
  background: var(--gradient-gold);
  color: var(--color-black);
  box-shadow: var(--shadow-gold);
}

.btn--gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(212, 175, 55, 0.4);
  color: var(--color-black);
}

.btn--purple {
  background: var(--gradient-purple);
  color: var(--color-white);
  box-shadow: var(--shadow-purple);
}

.btn--purple:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(106, 37, 138, 0.5);
  color: var(--color-white);
}

.btn--outline {
  background: transparent;
  color: var(--color-gold);
  border: 2px solid var(--color-gold);
}

.btn--outline:hover {
  background: var(--color-gold);
  color: var(--color-black);
}

.btn--lg {
  padding: 18px 56px;
  font-size: 1.0625rem;
}

/* ==========================================================================
   Cards
   ========================================================================== */
.card {
  background: var(--color-dark-surface);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-purple-glow);
}

.card__image {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.card__body {
  padding: 24px;
}

.card__title {
  font-size: 1.125rem;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--color-white);
}

.card__text {
  font-size: 0.875rem;
  color: var(--color-gray-400);
  margin: 0;
}

/* ==========================================================================
   Container
   ========================================================================== */
.clubv-container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: var(--container-padding);
}

/* ==========================================================================
   Sections
   ========================================================================== */
.clubv-section {
  padding: var(--section-padding);
  position: relative;
}

.clubv-section--dark {
  background-color: var(--color-black);
}

.clubv-section--surface {
  background-color: var(--color-dark);
}

.clubv-section--gradient {
  background: var(--gradient-dark);
}

/* Section divider */
.clubv-section__divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--color-purple-glow) 50%,
    transparent 100%
  );
}

/* ==========================================================================
   Utility
   ========================================================================== */
.text-gold { color: var(--color-gold); }
.text-purple { color: var(--color-royal-purple); }
.text-white { color: var(--color-white); }
.text-gray { color: var(--color-gray-400); }
.text-center { text-align: center; }
.text-left { text-align: left; }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mt-4 { margin-top: 32px; }
.mt-5 { margin-top: 48px; }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }
.mb-4 { margin-bottom: 32px; }
.mb-5 { margin-bottom: 48px; }

/* ========== Modification 0321 ========== */

/* ① Hero layout (一枚画配置に合わせたレイヤー合成) */
.hero__victory-img.hero__victory-img--large {
  max-width: 700px;
  width: 50vw;
}

.hero__content .btn {
  margin-top: 8px;
}

/* ③ Philosophy statement */
.about-philosophy__statement {
  font-size: clamp(1.25rem, 3vw, 2rem);
  color: var(--color-gold);
  text-align: center;
  font-weight: 700;
  margin-top: 32px;
  letter-spacing: 0.1em;
}

/* ③ Features text on about page */
.about-features__text {
  text-align: center;
  margin-bottom: 40px;
  line-height: 2;
  color: var(--color-white-muted, rgba(255,255,255,0.85));
}
.about-features__emphasis {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-gold);
  margin-top: 16px;
}

/* ④ Representative role label */
.top-about__role {
  font-size: 0.9rem;
  color: var(--color-gold);
  letter-spacing: 0.1em;
  margin-bottom: 8px;
}

/* ⑨ Timeline image */
.top-about__timeline {
  margin: 32px 0;
}
.top-about__timeline img {
  width: 100%;
  border-radius: 8px;
}

/* ⑥ Requirements section */
.top-requirements__image img {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  display: block;
  border-radius: 8px;
}