.eael-ext-scroll-to-top-wrap .eael-ext-scroll-to-top-button{bottom:15px;right:15px;width:50px;height:50px;z-index:9999;opacity:0.7;background-color:#000000;border-radius:5px;}.eael-ext-scroll-to-top-wrap .eael-ext-scroll-to-top-button i{font-size:16px;color:#ffffff;}.eael-ext-scroll-to-top-wrap .eael-ext-scroll-to-top-button svg{width:16px;height:16px;fill:#ffffff;}/* Start custom CSS for html, class: .elementor-element-afbc6f2 *//* ================================================================
  SEDONA JOURNEY 2026 - FINAL COMPLETE BLUE STYLESHEET
  さわやかで軽い青空が広がる地球のパレット
  ================================================================
*/

/* ── 全体定義 ── */
:root {
  /* 新しい青系のカラーパレット */
  --gold: #4ca3dd;       /* 青：さわやかなスカイブルー。メインアクセント */
  --sand: #ebf8ff;       /* 水色：澄んだペールブルー。サブ背景 */
  --ink: #2d3748;        /* チャコール：青みのある濃いチャコールグレー。高級感のあるテキスト */
  --ghost: #f7fafc;      /* ゴースト：非常に薄いグレーブルー。極薄背景 */
  --ember: #38b2ac;      /* アクア：ヒーリングのアクアブルー（元 Ember は青系なので維持） */
  --gold-pale: #63b3ed;  /* パールブルー：軽い青空 */
  
  /* テキストカラーの統一 */
  --text-main: #2d3748;  /* チャコール */
  --text-sub: #718096;   /* 青み薄グレー */
  
  /* フォントの定義 */
  --serif: 'Shippori Mincho', serif;
  --en-serif: 'EB Garamond', serif;
  --sans: 'Noto Sans JP', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--serif);
  line-height: 1.8;
  color: var(--text-main);
  background-color: #fff;
  -webkit-font-smoothing: antialiased;
}

/* ── 共通パーツ ── */
.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.container-sm { max-width: 800px; margin: 0 auto; padding: 0 20px; }
.section-padding { padding: 120px 0; }

.label {
  display: block;
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 20px;
}

.section-heading {
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  line-height: 1.4;
  margin-bottom: 50px;
  font-weight: 500;
}

.body-text p {
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
  color: var(--text-main);
  text-align: justify;
}

.link { color: var(--gold); text-decoration: none; border-bottom: 1px solid var(--gold); }

/* ── ナビゲーション ── */
#nav {
  position: fixed;
  top: 0; width: 100%;
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px 40px;
  z-index: 1000;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(10px);
}
.nav-brand { font-family: var(--en-serif); font-size: 1.2rem; letter-spacing: 0.1em; }
.nav-cta {
  background: var(--ink); color: #fff;
  padding: 8px 24px; text-decoration: none; font-size: 0.8rem;
  font-family: var(--sans); letter-spacing: 0.1em;
}


/* ── ヒーローセクション ── */
.hero {
  height: 100vh;
  min-height: 700px; /* 少し高さを抑えて全体を見やすく */
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  color: #fff;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(
      rgba(26, 54, 93, 0.35), /* さらに薄くして空の青を活かす */
      rgba(26, 54, 93, 0.15)
    ),
    url('https://crystalconference.org/wp-content/uploads/2026/03/Sedona_2.jpg') center/cover no-repeat;
  z-index: -2;
}

.hero-overlay-light {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(26, 54, 93, 0.4) 0%, transparent 60%);
  z-index: -1;
}

.hero-inner {
  width: 100%;
  padding-top: 60px;
}

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* タイトルエリア：サイズを控えめに、上品な余白を */
.hero-title {
  margin: 0 0 40px;
  line-height: 1.1;
}
.hero-title .en {
  display: block;
  font-family: var(--en-serif);
  font-size: clamp(4rem, 10vw, 6.5rem); /* 圧倒的サイズから「上品なサイズ」へ縮小 */
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0.05em; /* 字間を少し広げて優雅に */
  text-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.hero-title .jp {
  display: block;
  font-size: 0.9rem; /* 小さくしてサブ情報を徹底 */
  letter-spacing: 0.6em;
  margin-top: 5px;
  opacity: 0.8;
  font-weight: 300;
}

/* キャッチコピーエリア：ピンクをそっと際立たせる */
.hero-hook-box {
  margin-bottom: 60px;
}
.hero-hook-main {
  font-size: 1.1rem;
  letter-spacing: 0.15em;
  margin-bottom: 8px;
  font-weight: 300;
}
.hero-hook-sub.pink-text {
  font-size: clamp(1.8rem, 4vw, 2.4rem); /* 読みやすいサイズに調整 */
  color: #fff; /* 白に設定（後ほど個別にピンクを当てる場合もここがベース） */
  font-weight: 500;
  margin: 10px 0;
  letter-spacing: 0.1em;
  /* text-shadowを薄くして上品に */
  text-shadow: 0 0 15px rgba(255, 142, 199, 0.3);
}
.hero-hook-desc {
  font-size: 1rem;
  opacity: 0.7;
  letter-spacing: 0.1em;
}

/* 日付とボタンエリア：コンパクトに集約 */
.hero-info-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.hero-date-box {
  border-top: 1px solid rgba(255,255,255,0.25);
  border-bottom: 1px solid rgba(255,255,255,0.25);
  padding: 12px 30px;
}
.hero-date-box .d-sub {
  display: block;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  margin-bottom: 4px;
  opacity: 0.6;
}
.hero-date-box .d-main {
  font-family: var(--en-serif);
  font-size: 1.3rem;
  letter-spacing: 0.05em;
}

/* モダンなボタン：少し細身にして洗練 */
.hero-btn-modern {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--ink);
  padding: 18px 45px;
  text-decoration: none;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  transition: all 0.3s ease;
  box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}
.hero-btn-modern:hover {
  background: #fff;
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
  color: var(--gold);
}

/* スマホ調整 */
@media (max-width: 768px) {
  .hero-title .en { font-size: 3.8rem; }
  .hero-hook-sub.pink-text { font-size: 1.6rem; }
  .hero-btn-modern { padding: 16px 30px; }
}


/* ── ターゲット（こんな方へ） ── */
.target { background: var(--sand); } /* ペールブルー */
.target-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 60px;
}
.target-item { background: #fff; padding: 40px; border-radius: 2px; }
.target-q { font-size: 1rem; margin-bottom: 20px; font-weight: 600; color: var(--ink); }
.target-a { font-size: 0.9rem; color: var(--gold); font-family: var(--sans); }

/* ── 体験 ── */
.experience { background: #fff; } /* ここを白にしてターゲットと区別 */
.experience-trio {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px;
}
.exp-num { font-family: var(--en-serif); font-size: 3rem; color: var(--gold); opacity: 0.3; margin-bottom: -10px; }
.exp-card h3 { margin-bottom: 20px; font-size: 1.4rem; border-bottom: 1px solid var(--gold); padding-bottom: 10px; color: var(--text-main); }
.exp-card p { font-size: 0.95rem; color: var(--text-sub); }

/* ── ナビゲーター ── */
.navigators { background: var(--ghost); } /* 薄いグレーブルー */
.nav-list { display: flex; flex-direction: column; gap: 60px; }
.nav-item { display: grid; grid-template-columns: 1fr; gap: 30px; padding: 40px; background: #fff; border: 1px solid var(--sand); }
.nav-role { font-family: var(--sans); font-size: 0.65rem; color: var(--gold); letter-spacing: 0.3em; }
.nav-name { font-size: 1.8rem; margin: 10px 0; color: var(--text-main); }
.nav-name small { font-size: 1rem; opacity: 0.6; }
.nav-text { font-size: 0.95rem; margin-bottom: 20px; }
.nav-badge { display: inline-flex; gap: 5px; align-items: center; font-size: 0.75rem; padding: 5px 15px; border: 1px solid var(--gold); color: var(--gold); font-family: var(--sans); background: rgba(76,163,221,0.05); }

/* ── レジェンドとの出会い ── */
.gary {
  padding: 100px 0;
  background: #fff; /* セクション全体の背景は白を維持 */
}

.gary-quote {
  padding: 80px 60px; /* 写真が入るため、余白を少し広げて上品に */
  border-left: 3px solid var(--gold);
  margin-bottom: 50px;
  font-size: 1.3rem;
  font-style: italic;
  
  /* ボックス背景をご指定の Healing4.jpg に変更 */
  background-image: linear-gradient(
      /* 深いコバルトブルーを活かしつつ、文字を読ませるための半透明グレーオーバーレイ */
      rgba(248, 250, 252, 0.70), /* ペールブルーグレーの透過（--ghostに近い色） */
      rgba(248, 250, 252, 0.78)
    ),
    url("https://crystalconference.org/wp-content/uploads/2026/03/Sedona_Healing2-e1774335439888.jpg");
  background-size: cover; /* ボックスいっぱいに広げる */
  background-position: center 30%; /* 縦の位置を数値で細かく調整する場合 */

  
  color: var(--text-main); /* 落ち着いたロイヤルブルー (#2B6CB0) */
  text-align: left;
  position: relative;
  z-index: 1;
}

/* 引用文内のテキスト可読性（UX） */
.gary-quote p {
  line-height: 2.1; /* 行間を広げて、写真の上でも読みやすく */
  text-shadow: 0 1px 8px rgba(255, 255, 255, 0.8); /* 文字の周りに白い光を纏わせ、背景と分離（UX） */
}

/* 引用元（cite）の調整 */
.gary-quote cite {
  display: block;
  margin-top: 25px;
  font-size: 0.9rem;
  font-style: normal;
  color: var(--ink); /* より濃い紺 (#1A365D) にして引き締める */
  text-align: left;
  font-family: var(--sans); /* 引用元はゴシック体にして知的な印象に */
  letter-spacing: 0.2em;
}

/* 本文テキスト（ボックスの外） */
.gary-body {
  margin-bottom: 20px;
  color: var(--text-main);
  text-align: left;
}

/* レスポンシブ調整（スマホ） */
@media (max-width: 600px) {
  .gary-quote {
    padding: 50px 25px; /* スマホでは余白を詰めて文字スペースを確保 */
    font-size: 1.1rem; /* 文字サイズを少し落とす */
  }
}

/* ── 詳細ブロック（交互レイアウト・サイズ統一） ── */
.detail {
  background: var(--ghost); /* 非常に薄いグレーブルー (#f8fafc) */
}

/* 共通のブロック設定（PCでは横並び） */
.detail-block {
  display: flex;
  align-items: center; /* 垂直方向の中央揃え（UX向上） */
  gap: 80px;          /* 写真とテキストの間にたっぷりとした余白（PC） */
  margin-bottom: 120px; /* ブロック間の余白 */
  width: 100%;        /* 親要素いっぱいまで広げる */
}
.detail-block:last-child { margin-bottom: 0; }

/* 反転レイアウトの設定（PCのみ） */
.detail-block-reverse {
  flex-direction: row-reverse; /* 写真とテキストの位置を入れ替える */
}

/* 【サイズ統一の要：写真エリアの設定】 */
.detail-image {
  flex: 1;             /* テキストと同じ幅（1:1のボリューム比）に設定 */
  max-width: 500px;     /* PCでの最大幅を規制し、窮屈にならないように */
  
  /* 【ここが重要】アスペクト比を4:3（横:縦）に固定する */
  aspect-ratio: 4 / 3; 
  
  border-radius: 2px;  /* ほんの少しだけ丸めて柔らかさを（UX） */
  overflow: hidden;    /* 枠からはみ出た画像を切り抜く */
  box-shadow: 0 15px 40px rgba(26, 54, 93, 0.1); /* 深い紺色（--ink）の影を入れて高級感を（UX） */
  
  background-color: var(--sand); /* 画像が読み込まれるまでの薄い水色の下地 */
}

.detail-image img {
  width: 100%;
  height: 100%;        /* 親要素（.detail-image）の高さいっぱいまで広げる */
  display: block;
  
  /* 【ここが重要】画像の縦横比を保ったまま、枠内に綺麗に収める（トリミング） */
  object-fit: cover;   
  object-position: center; /* 画像の中央を表示 */
  
  transition: transform 0.6s ease; /* ホバー時の動き（UX） */
}

/* ホバー時に写真が少し拡大する（UX） */
.detail-image:hover img {
  transform: scale(1.05);
}

/* 【テキストコンテンツ側の幅調整（PC）】 */
.detail-content {
  flex: 1; /* 写真と同じ幅（1:1のボリューム比）に設定 */
  max-width: 500px; /* テキスト側も最大幅を規制し、写真と揃える */
}

/* ヘッダー周りの調整 */
.detail-header {
  display: flex;
  align-items: baseline;
  gap: 20px;
  margin-bottom: 25px;
  border-bottom: 1px solid rgba(43, 108, 176, 0.1); /* 新しいメインカラー (#2B6CB0) を薄くした線 */
  padding-bottom: 15px;
}

.detail-num {
  font-family: var(--en-serif);
  font-size: 2.8rem;
  color: var(--gold);   /* 落ち着いたロイヤルブルー (#2B6CB0) */
  opacity: 0.8;
}

.detail-header h3 {
  font-size: 1.4rem;
  line-height: 1.2;
  color: var(--ink); /* 一番濃い紺 (#1A365D) にして引き締める */
}

.detail-header small {
  font-size: 1rem;
  color: var(--text-main); /* メインテキストカラー (#2B6CB0) */
  font-weight: 400;
}

.detail-body p {
  color: var(--text-main); /* 本文も #2B6CB0 にして落ち着かせる */
  text-align: justify;    /* 両端揃え（UX向上） */
  line-height: 2.1;
  font-size: 0.95rem;     /* PCでの文字サイズを少し落とし、写真とのバランスを */
}

/* 【レスポンス調整（スマホ）】 */
@media (max-width: 900px) {
  .detail-block {
    flex-direction: column !important; /* 常に縦並び */
    gap: 30px;
  }
  
  /* 02番の逆転現象をスマホで解除し、写真を上に持ってくる */
  .detail-block-reverse {
    flex-direction: column !important; 
  }

  /* スマホでの写真サイズを画面幅に合わせる */
  .detail-image {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9; /* スマホでは少し横長の方が見やすいです */
  }
}




/* ── 源流セクション ── */
.origin {
  /* 背景画像の設定 */
  background-image: linear-gradient(
      rgba(45, 55, 72, 0.5), /* 元の var(--ink) に相当する濃い紺を半透明にして重ねる(UX) */
      rgba(45, 55, 72, 0.7)
    ),
    url("https://crystalconference.org/wp-content/uploads/2026/03/Sedona_Garden4-1.jpg");
  background-size: cover; /* 画面いっぱいに広げる */
  background-position: center; /* 中央に配置 */
  background-attachment: fixed; /* スクロール時に背景を固定（パララックス効果、UX） */
  color: var(--sand); /* ペールブルーテキストで軽く */
}

/* スマホではスクロール負荷を減らすため固定を解除 */
@media (max-width: 768px) {
  .origin {
    background-attachment: scroll;
  }
}

/* 以下のフォントカラー設定は重複を整理して維持 */
.origin .label,
.origin .section-heading {
  color: #fff;
}

.origin .body-text p {
  color: var(--ghost); /* 極薄ブルーグレーで可読性確保 */
}

.highlight {
  font-size: 1.2rem !important;
  color: #fff !important;
  font-style: italic;
  border-left: 2px solid var(--gold);
  padding-left: 20px;
}
/* ── 旅程タイムライン ── */
.itinerary { background: #fff; }
.timeline { position: relative; padding-left: 30px; }
.timeline::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--gold); }
.timeline-item { margin-bottom: 50px; position: relative; }
.timeline-item::before { content: ''; position: absolute; left: -34px; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.time-label { font-family: var(--sans); font-size: 0.8rem; color: var(--gold); font-weight: 600; margin-bottom: 10px; }
.time-content h4 { font-size: 1.2rem; margin-bottom: 10px; color: var(--text-main); }
.time-content p { font-size: 0.9rem; color: var(--text-sub); }
.timeline-note { margin-top: 30px; font-size: 0.8rem; color: var(--text-sub); }

/* ── メッセージボックス ── */
.message { background: var(--ghost); } /* 薄いグレーブルー */
.message-box { padding: 80px; background: #fff; border: 1px solid var(--sand); position: relative; }
.message-box p { color: var(--text-main); }
.message-sig { margin-top: 40px; font-weight: 600; text-align: right; border-top: 1px solid var(--sand); padding-top: 20px; color: var(--text-main); }

/* ── CTA ── */
.cta-section { text-align: center; background: var(--sand); } /* ペールブルー */
.cta-heading { font-size: clamp(2rem, 6vw, 3.5rem); margin-bottom: 30px; color: var(--ink); }
.cta-sub { font-size: 1.1rem; margin-bottom: 40px; color: var(--text-main); }
.final-btn {
  display: inline-block; padding: 25px 60px;
  background: var(--gold); color: #fff;
  text-decoration: none; font-size: 1.1rem;
  letter-spacing: 0.1em; transition: 0.3s;
}
.final-btn:hover { background: var(--gold-pale); transform: translateY(-2px); }
.cta-note { margin-top: 20px; font-size: 0.8rem; color: var(--text-sub); }

/* ── 詳細プロフィールブロック ── */
.full-profiles { background: #fff; }
.profile-block { margin-bottom: 100px; padding-bottom: 50px; border-bottom: 1px solid var(--sand); }
.profile-block:last-child { border: none; }
.profile-name { font-size: 1.8rem; margin-bottom: 30px; color: var(--ink); }
.profile-name small { display: block; font-size: 0.9rem; color: var(--gold); margin-top: 5px; }
.inner-quote { margin: 30px 0; padding: 30px; background: var(--sand); border-left: 2px solid var(--gold); font-style: italic; color: var(--text-main); }
.link { color: var(--gold); border-bottom-color: var(--gold); }


/* ── フッター（背景に溶け込む馴染ませスタイル） ── */
footer { 
  padding: 80px 20px 40px; 
  text-align: center; 
  /* 背景を直前のセクションと同じ、または透明にして繋げる */
  background: var(--ghost); 
  position: relative;
}

/* 境界線を線ではなく、柔らかな空気感で表現 */
footer::before {
  content: "";
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(76, 163, 221, 0.2), transparent);
}

.footer-main-info { 
  font-size: 0.8rem; 
  color: var(--text-sub); /* 文字色を薄いグレーブルーに */
  margin-bottom: 30px; 
  line-height: 2;
  letter-spacing: 0.05em;
}

.footer-copy { 
  font-size: 0.7rem; 
  color: var(--text-sub); 
  opacity: 0.6; /* さらに透明度を上げて背景に馴染ませる */
  letter-spacing: 0.1em;
  font-family: var(--sans);
}


/* ── レスポンシブ ── */
@media (max-width: 900px) {
  .target-grid { grid-template-columns: 1fr; }
  .experience-trio { grid-template-columns: 1fr; }
  .message-box { padding: 40px 20px; }
}

@media (max-width: 600px) {
  .section-padding { padding: 80px 0; }
  #nav { padding: 15px 20px; }
  .nav-brand { font-size: 1rem; }
  .hero-title { font-size: 5rem; }
  .hero-date { padding: 15px 25px; }
  .gary-quote { padding: 40px 25px; }
}

/* ── プロフィール画像用レイアウト ── */

/* PCでは横並び、左に写真 */
.profile-flex {
  display: flex;
  align-items: flex-start; /* 上揃え */
  gap: 50px;
  text-align: left;
}

/* 画像フレーム：正円 */
.profile-image {
  flex-shrink: 0; /* 画像が潰れないように固定 */
  width: 180px;
  height: 180px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid #fff;
  box-shadow: 0 10px 25px rgba(76, 163, 221, 0.15); /* 爽やかな青い影 */
}

/* 詳細セクション用の少し大きめ画像 */
.profile-image.large {
  width: 240px;
  height: 240px;
}

.profile-image img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 縦横比を保って中央で切り抜き */
}

/* 既存の nav-item の余白調整 */
.nav-item {
  padding: 50px;
  align-items: center; /* 簡易紹介では垂直中央寄せが綺麗です */
}

/* ── レスポンシブ調整 ── */
@media (max-width: 800px) {
  .profile-flex {
    flex-direction: column; /* スマホでは縦並び */
    align-items: center;    /* 中央寄せ */
    text-align: center;     /* テキストも中央寄せ */
    gap: 30px;
  }
  
  .profile-image, .profile-image.large {
    width: 160px;
    height: 160px;
  }
  
  .nav-item {
    padding: 40px 20px;
  }
  
  .message-sig {
    text-align: center;
  }
}


/* --- リンクホバー時の視認性修正 --- */

/* プロフィール内などのテキストリンク共通設定 */
.link:hover {
  /* 文字色を白にせず、元の色（青）を維持します */
  color: var(--gold) !important; 
  /* 文字を白くする代わりに、透明度を下げて「反応」を示します */
  opacity: 0.6;
  /* 下線を消したくない場合は追加、消したい場合は none にしてください */
  text-decoration: underline;
  /* 変化をふわっとさせます */
  transition: 0.3s;
}

/* もしボタン以外の全てのリンク（aタグ）で白くなるのを防ぎたい場合 */
.profile-block a:hover {
  color: var(--gold) !important;
  opacity: 0.7;
}/* End custom CSS */