/*
Theme Name:  Azul Child
Template:    cocoon-master
Version:     1.1.0
Description: AZUL（アズール）— 現実的スピリチュアルガイド カスタムデザイン子テーマ
Author:      AZUL
*/

/* ============================================================
   AZUL CHILD — style.css
   このファイルはWordPressのテーマ認識用ヘッダーと
   ヒーローセクションCSSのみを含みます。
   サイト全体のデザインは skins/azul/style.css で管理します。
   ============================================================ */

}

/* ============================================================
   14. HERO SECTION — トップページ
   ============================================================ */

.azul-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 36px 40px 32px;
  background: #faf8f4;
  position: relative;
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
}

.azul-hero__eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 14px;
  opacity: 0;
  animation: azulFadeUp 0.8s ease 0.1s forwards;
}

.azul-hero__eyebrow-line {
  width: 0;
  height: 1px;
  background: #c9ad7a;
  flex-shrink: 0;
  animation: azulLineOut 0.7s ease 0.6s forwards;
}

@keyframes azulLineOut { to { width: 28px; } }

.azul-hero__eyebrow-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.58rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #c9ad7a;
}

.azul-hero__title {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: clamp(3.2rem, 8vw, 7rem) !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  letter-spacing: 0.18em !important;
  color: #2a2620 !important;
  margin: 0 !important;
  opacity: 0;
  animation: azulFadeUp 0.8s ease 0.3s forwards;
}

.azul-hero__rule {
  width: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, #c9ad7a, transparent);
  margin: 14px auto;
  animation: azulRuleGrow 1s ease 0.75s forwards;
}

@keyframes azulRuleGrow { to { width: 120px; } }

.azul-hero__sub {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(0.85rem, 2vw, 1.05rem);
  font-style: italic;
  color: #7aA0bc;
  letter-spacing: 0.22em;
  margin-bottom: 16px;
  opacity: 0;
  animation: azulFadeUp 0.8s ease 0.55s forwards, azulFloat 5s ease-in-out 1.5s infinite;
}

@keyframes azulFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-4px); }
}

.azul-hero__tagline {
  font-family: 'Shippori Mincho', serif;
  font-size: clamp(0.65rem, 1.5vw, 0.78rem);
  letter-spacing: 0.2em;
  color: #b0a898;
  margin-bottom: 20px;
  opacity: 0;
  animation: azulFadeUp 0.8s ease 0.8s forwards;
}

.azul-hero__copy {
  font-family: 'Shippori Mincho', serif;
  font-size: clamp(0.76rem, 1.5vw, 0.86rem);
  line-height: 2.2;
  color: #7d7870;
  max-width: 540px;
  margin: 0 auto;
  letter-spacing: 0.02em;
  overflow-wrap: break-word;
  word-break: normal;
  opacity: 0;
  animation: azulFadeUp 0.8s ease 1.0s forwards;
}

.azul-hero__deco {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.azul-hero__deco--1 {
  width: 300px;
  height: 300px;
  bottom: -120px;
  right: -80px;
  border: 1px solid rgba(74,122,155,0.08);
  opacity: 0;
  animation: azulDecoIn 1.5s ease 1.2s forwards, azulRotateSlow 40s linear 2s infinite;
}

.azul-hero__deco--2 {
  width: 180px;
  height: 180px;
  bottom: -60px;
  right: -20px;
  border: 1px solid rgba(201,173,122,0.12);
  opacity: 0;
  animation: azulDecoIn 1.5s ease 1.4s forwards, azulRotateSlow 28s linear 2s infinite reverse;
}

.azul-hero__deco--3 {
  width: 240px;
  height: 240px;
  top: -80px;
  left: -60px;
  border: 1px solid rgba(74,122,155,0.06);
  opacity: 0;
  animation: azulDecoIn 1.5s ease 1.3s forwards, azulRotateSlow 36s linear 2s infinite;
}

.azul-hero__deco--1::after {
  content: '';
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(201,173,122,0.6);
  box-shadow: 0 0 6px rgba(201,173,122,0.4);
  top: 50%; left: -2px; margin-top: -2px;
}

.azul-hero__deco--2::after {
  content: '';
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: rgba(74,122,155,0.5);
  box-shadow: 0 0 5px rgba(74,122,155,0.3);
  top: -1.5px; left: 50%; margin-left: -1.5px;
}

@keyframes azulFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes azulDecoIn {
  from { opacity: 0; } to { opacity: 1; }
}

@keyframes azulRotateSlow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── タブレット ── */
@media screen and (max-width: 768px) {
  .azul-hero {
    padding: 28px 20px 24px;
  }
  .azul-hero__copy {
    letter-spacing: 0;
    text-align: left;
    max-width: 100%;
  }
  .azul-hero__deco--1 { width: 200px; height: 200px; bottom: -80px; right: -56px; }
  .azul-hero__deco--2 { width: 120px; height: 120px; bottom: -40px; right: -16px; }
  .azul-hero__deco--3 { width: 160px; height: 160px; top: -56px; left: -44px; }
}

/* ── スマートフォン ── */
@media screen and (max-width: 480px) {
  .azul-hero {
    padding: 24px 16px 20px;
  }
  .azul-hero__eyebrow-text {
    font-size: 0.44rem;
    letter-spacing: 0.14em;
  }
  .azul-hero__tagline {
    letter-spacing: 0.08em;
    margin-bottom: 14px;
  }
  .azul-hero__copy {
    font-size: 0.8rem;
    line-height: 1.9;
    letter-spacing: 0;
    text-align: left;
  }
  .azul-hero__deco--1 { width: 140px; height: 140px; bottom: -56px; right: -40px; }
  .azul-hero__deco--2 { width: 84px;  height: 84px;  bottom: -28px; right: -12px; }
  .azul-hero__deco--3 { width: 110px; height: 110px; top: -44px; left: -32px; }
}

/* Cocoon ファーストビュー余白を完全除去 */
.home #fv,
.home .fv,
.home #first-view,
.home .first-view,
.home .fv-box,
.home .catch-box,
.home #site-name,
.home .site-name,
.home .tagline,
.home #tagline,
.home .site-catch,
.home .site-description {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}