/* =========================================================
   LOVE GARDEN — FULL COMPLETE CSS
   WordPress Responsive Edition
========================================================= */

/* =========================================================
   GOOGLE FONTS
========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Nunito+Sans:wght@400;600;700&family=Great+Vibes&display=swap');

/* =========================================================
   ROOT COLORS
========================================================= */

:root {

  --gold-main: #f3c56b;
  --gold-soft: #ffe8b2;

  --pink-main: #d88aa6;
  --pink-soft: #ffe5ef;

  --brown-main: #8b5e3c;
  --brown-soft: #a46f49;

  --white-soft: #fffdf7;

}

/* =========================================================
   RESET
========================================================= */

/* 💡 親コンテナ（.love-garden-container）のすぐ中にあるすべての div タグを指定します */
.love-garden-container > div {
  /* ▼ すべてのテキストdivに対して共通の絶対配置ルールを強制します */
  position: absolute !important;
  z-index: 5 !important;
  text-align: center !important;
  margin: 0 !important;

  /* ▼ 文字自体のシャドウ（白とゴールドのふんわりした輝き） */
  text-shadow:
    0 0 0.1em rgba(255, 255, 255, 0.8),
    0 0 0.3em rgba(255, 245, 220, 0.6) !important;
  /* ▼ 領域の確保：イラストに美しく馴染む、薄い半透明のミルクベージュ */
  background: rgba(252, 245, 230, 0.45) !important;

  /* ▼ ぼかしと丸み：キワを外側へ優しく溶かし、カプセル型に完全に丸めます */
  box-shadow: 0 0 15px 12px rgba(252, 245, 230, 0.45) !important; 
  border-radius: 9999px !important;

  /* ▼ 余白：それぞれの文字量（長さ）に合わせて、領域が自動で綺麗に広がります */
  padding: 0.3em 1.5em !important; 
}

/* =========================================================
   COMMON BASE OVERLAY (共通の土台設定)
========================================================= */
.overlay-text {
  /* 💡 すべての文字に絶対配置を強制適用し、位置（top/left）が機能する状態を作ります */
  position: absolute !important;
  z-index: 5 !important;
  
  /* 💡 基本はすべて中央寄せにします（個別で上書きも可能です） */
  text-align: center !important;
  
  /* 💡 予期せぬマージンの干渉をここで一括リセットします */
  margin: 0 !important;
  padding: 0 !important;


  /* 💡 文字の影：白と淡いゴールドでふんわり光らせ、黒い影を排除します */
  text-shadow:
    0 0 0.25em rgba(255,255,255,0.95),
    0 0 0.6em rgba(255,240,210,0.85) !important;

  /* 💡 背景の領域：イラストの枠線になじむ、ごく薄い半透明のベージュを敷きます */
  background: rgba(252, 245, 230, 0.4) !important;

  /* 💡 ぼかしと丸み：キワをイラストの光に溶け込ませ、カプセル型に丸めます */
  box-shadow: 0 0 15px 10px rgba(252, 245, 230, 0.4) !important; 
  border-radius: 9999px !important;
  padding: 0.2em 1.2em !important; 
}

/* =========================================================
   LOVE GARDEN WRAPPER
========================================================= */
.love-garden-wrapper {
  display: block;
  margin: 0 auto;

  /* 💡 修正：固定値やvwではなく、cqwベース（または最大値を制限）にします */
  /* 横幅800pxのときの40px ＝ 5cqw です */
  padding: 5cqw 0; 
  
  /* 💡 画面が800px以上になったら、余白も40pxで完全に固定させます */
  max-width: 800px; 
}


/* =========================================================
   MAIN CONTAINER (修正版)
========================================================= */

.love-garden-container {
  position: relative;

  /* ▼ 画面が大きくても小さくても、常に綺麗な正方形をキープします */
  width: 100%;
  max-width: 800px; /* 背景画像の本来の横幅（px）に合わせて数値を調整してください */
  /* 💡最重要：画面をどれだけ縮めても、縦横比を「1:1（完全な正方形）」に強制固定します */
  aspect-ratio: 1 / 1 !important; 
  margin-left: auto;
  margin-right: auto;

  background-image: url('https://artistts.org/wp-content/uploads/background/resonancetree.png');
  
  /* ▼ containからcover、あるいは「枠いっぱいに広げる」設定に変更します */
  background-size: 100% 100%; 
  background-position: center center;
  background-repeat: no-repeat;


  /* 💡 追加：子要素の文字サイズをこのコンテナの幅に連動させる設定 */ 20260531
  container-type: inline-size;

}

/* =========================================================
   COMMON OVERLAY TEXT
========================================================= */

/* =========================================================
   HERO TITLE (中央上のゴールド文字：個別完全固定版)
========================================================= */
.hero-title {
  /* 💡 1. 独立して配置するための基本ルールを追加 */
  position: absolute !important;
  z-index: 5;

  /* 💡 2. 位置の指定（!important でシステムの上書きをブロック） */
  top: 16% !important; 
  left: 50% !important;
  /* 左右中央配置を維持するためのベストプラクティス */
  transform: translate(-50%, 0) !important; 
  
  /* 💡 3. 横幅の指定 */
  width: 50% !important; /* 文字の折り返しを防ぐため、40%から少し広めの50%にするのが安全です */
  
  /* 💡 4. フォントサイズの指定（イラストの最大幅800pxに完全に連動します） */
  font-size: 3.5cqw !important; 
  
  /* 💡 5. その他の装飾（em単位で完璧にレスポンシブ化済み） */
  font-family: "Cormorant Garamond", serif;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--gold-main);

  /* 文字サイズに比例して線も細くなります */
  -webkit-text-stroke: 0.02em rgba(255,255,255,0.9);

  /* 文字が小さくなると影も一緒に小さくなります */
  text-shadow:
    0 0 0.18em rgba(255,255,255,0.95),
    0 0 0.45em rgba(255,220,150,0.85);
}



/* =========================================================
   SUBTITLE
========================================================= */
/* =========================================================
   HERO SUBTITLE (中央最上部のピンクの文字：個別完全固定版)
========================================================= */
.hero-subtitle {
  /* 💡 1. 独立して配置するための基本ルールを追加 */
  position: absolute !important;
  z-index: 5;
  text-align: center;

  /* 💡 2. 位置の指定（!important でシステムの上書きをブロック） */
  top: 12% !important;
  left: 50% !important;
  /* 左右中央配置を維持するためのベストプラクティス */
  transform: translate(-50%, 0) !important;
  
  /* 💡 3. 横幅の指定 */
  width: 60% !important; /* 画面が極端に縮んだときの予期せぬ改行を防ぐため、少し広めの60%に調整しました */
  
  /* 💡 4. フォントサイズの修正（clamp関数で最小値を10pxに制限） */
  /* 基本は 1.4cqw で縮小しますが、スマホで見てもこれ以上小さくならず読めるサイズをキープします */
  font-size: clamp(10px, 1.4cqw, 14px) !important; 
  
  /* 💡 5. その他の装飾（現状維持） */
  font-family: "Nunito Sans", sans-serif;
  font-weight: 700;
  color: var(--pink-main);
}

/* =========================================================
   LEFT PANEL (Send Your Light)
========================================================= */
/* =========================================================
   LEFT PANEL (Send Your Light：個別完全固定版)
========================================================= */

/* 💡 1. 親の箱（パネル全体の基準位置をイラストの左側の白い枠に固定します） */
.point-panel {
  /* ▼ overlay-textに頼らず、このクラス自体に配置ルールを直接指定します */
  position: absolute !important;
  z-index: 5;
  text-align: center;

  /* ▼ イラストの左側（白い枠の真ん中）に直接ピン留め */
  top: 46% !important;
  left: 4.5% !important; 
  width: 16% !important; 
  
  /* ▼ 高さは文字量に合わせて自動で伸縮させます */
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 💡 2. パネル内のタイトル（Send Your Light） */
.panel-title {
  /* 💡 1つの箱の中に入っているため、position: absolute ではなく自然に流します */
  position: relative;
  width: 100%;
  text-align: center;
  
  font-family: "Cormorant Garamond", serif;
  /* 💡 修正：基本は 2cqw、画面が縮んでも 10px 以下にはならないように制限 */
  font-size: clamp(10px, 2cqw, 16px) !important; 
  font-weight: 700;
  color: var(--brown-main);
  
  /* 💡 修正：下のリストとの隙間が潰れないよう clamp で最小値をキープ */
  margin-bottom: clamp(4px, 0.7cqw, 8px) !important;
}

/* 💡 3. パネル内のリスト（Kindness, Hope, Prayer...） */
.point-list {
  /* 💡 タイトルのすぐ下に自然に続いて並びます */
  position: relative;
  width: 100%;
  text-align: center;

  font-family: "Nunito Sans", sans-serif;
  /* 💡 修正：基本は 0.9cqw、画面が縮んでも最低 7px（読める限界値）をキープ */
  font-size: clamp(7px, 0.9cqw, 12px) !important; 
  
  line-height: 1.8;
  font-weight: 700;
  color: var(--brown-soft);
  margin: 0 !important;
}

/* =========================================================
   RIGHT BOX (Preserved for Tomorrow)
========================================================= */

/* =========================================================
   RIGHT BOX (2つの箱に完全分離・決定版)
========================================================= */

/* =========================================================
   RIGHT BOX (個別で完全に位置を指定する設定)
========================================================= */
/* =========================================================
   RIGHT BOX (共通overlay-textの土台に合わせた完全固定版)
========================================================= */
/* =========================================================
   RIGHT BOX (親の箱を完全廃止・2つの文字をダイレクトにピン留め)
========================================================= */

/* =========================================================
   RIGHT BOX (システムが勝手に残す親の箱を完全に無効化する決定版)
========================================================= */

/* 💡 1. 諸悪の根源である「勝手に残っている親の箱」の配置計算を完全に破壊します */
.overlay-text.future-box {
  position: static !important; /* ◀ absoluteを強制解除し、ただの透明な空気のような存在に変えます */
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 💡 2. タイトル（Preserved for Tomorrow） */
/* 💡 ② 5つの丸いイラストのすぐ上のタイトル */
.redistribution-title {
  position: absolute !important;
  z-index: 5 !important;
  text-align: center !important;
  
  top: 60% !important;   
  left: 50% !important;
  transform: translate(-50%, 0) !important;
  width: max-content !important; 

  font-family: "Cormorant Garamond", serif;
  
  /* 💡 修正：clamp() を廃止し、コンテナ幅に完全連動する cqw 単体指定にしました */
  font-size: 1.6cqw !important; 
  
  font-weight: 700;

  /* 💡 修正：黒っぽいフチ取りや外側の引き締め影を完全に削除し、上品なブラウンにします */
  color: #5c3c26 !important;
  -webkit-text-stroke: none !important;
  text-shadow: 0 0 0.3em rgba(255,255,255,0.8) !important;

}

/* 💡 ③ タイトルの下の3行の補足説明（中央下部） */
.redistribution-description {
  position: absolute !important;
  z-index: 5 !important;
  text-align: center !important;
  
  /* ▼ イラスト上の定位置（丸いイラストのすぐ上の隙間）にピン留め */
  top: 64.5% !important;   
  left: 50% !important;
  transform: translate(-50%, 0) !important;
  width: 55% !important; 

  /* ▼ 他の成功しているパーツとまったく同じフォント指定形式に統一 */
  font-family: "Noto Serif JP", serif !important;
  font-size: 0.8cqw !important; 
  line-height: 1.5 !important;
  font-weight: 700 !important;
  
  /* ▼ 修正：黒いフチ取りを完全に消去し、枠内の白背景に最も映える上品なブラウンに変更 */
  color: #6e4a32 !important;
  -webkit-text-stroke: none !important;
  
  /* ▼ 不要な暗い座布団や余計な背景を完全に削除（リセット）します */
  background: none !important;
  box-shadow: none !important;
  text-shadow: 0 0 0.3em rgba(255,255,255,0.8) !important; /* 白っぽくふんわり馴染ませる薄い影 */
}


/* 💡 2. タイトル（Preserved for Tomorrow） */
.future-box-title {
  /* 💡 親の箱を無効化したため、大元のイラストの「右上・水色の丸の中」にダイレクトに吸い付きます */
  position: absolute !important;
  z-index: 5 !important;
  text-align: center !important;
  
  top: 10% !important;    
  right: 4% !important;  /* ◀ これで確実にイラストの右端から4%の位置にピン留めされます */
  width: 22% !important;
  
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(12px, 2.3cqw, 20px) !important; 
  font-weight: 700;
  color: var(--brown-main);
  
  text-shadow:
    0 0 0.25em rgba(255,255,255,0.95),
    0 0 0.6em rgba(255,240,210,0.85);
}


/* 💡 3. 説明文（Your resonance points...） */
.future-box-text {
  /* 💡 親の箱を無効化したため、大元のイラストの「右下・アイコンの下」にダイレクトに吸い付きます */
  position: absolute !important;
  z-index: 5 !important;
  text-align: center !important;

  top: 31% !important;   /* ◀ イラストの上から31%の、緑のアイコンのすぐ下の位置に直接ピン留め */
  right: 4% !important;  /* ◀ これで確実にイラストの右端から4%の位置にピン留めされます */
  width: 24% !important;

  font-family: "Cormorant Garamond", serif;
  font-size: clamp(8px, 1.1cqw, 10px) !important; 
  line-height: 1.6;
  font-weight: 700;
  color: var(--brown-soft);
}



/* =========================================================
   CENTER MESSAGE
========================================================= */
/* 💡 ① 中央の看板の中の文字（Love continues...） */
.garden-core-message {
  position: absolute !important;
  z-index: 5 !important;
  text-align: center !important;
  
  /* ▼ 外部CSS（49.5%）を力づくでへし折り、中央下の看板の正しい高さに固定します */
  top: 50.0% !important;   
  left: 50% !important;
  transform: translate(-50%, 0) !important;
  width: 35% !important;


 /* 💡 修正：フォントの認識バグを防ぐため、引用符あり/なしのフォント指定パターンを網羅 */
  font-family: "Noto Serif JP", "Noto Serif Japanese", serif !important;
  font-size: 1.3cqw !important; 
  font-weight: 700 !important;
  
  /* ▼ 修正：黒みを完全にやめ、文字色を濃いブラウンにし、周囲を「白いフチ（白ぶち）」で包みます */
  color: #4a2e1b !important;
  -webkit-text-stroke: 0.04em #ffffff !important; /* 🌟 これが綺麗な「白ぶち」の指定です */
  
  /* ▼ 背景のグラデーションや座布団はすべて消去し、イラスト本来の最下部看板の上に直接文字を乗せます */
  background: none !important;
  box-shadow: none !important;
  text-shadow: 0 0 0.3em rgba(255,255,255,1) !important; /* 白ぶちをさらにふんわり光らせるお守り */
}



/* =========================================================
   FIVE CIRCLE LABELS
========================================================= */
.circle-label {
  position: absolute;
  width: 13%;
  font-family: "Nunito Sans", sans-serif;
  font-size:  0.85cqw; /* 💡 最小値を5pxに */
  line-height: 1.3;
  font-weight: 700;
  color: var(--brown-main);
  text-align: center;
}
/* 💡 丸いイラストの文字位置の調整（重なり防止のために少し上に持ち上げました） */
.circle-1 { bottom: 13.5%; left: 5.5%; }
.circle-2 { bottom: 13.5%; left: 24%; }
.circle-3 { bottom: 13.5%; left: 42.5%; }
.circle-4 { bottom: 13.5%; left: 61%; }
.circle-5 { bottom: 13.5%; left: 79.5%; }

/* =========================================================
   BOTTOM MESSAGE
========================================================= */
/* 💡 ④ イラスト最下部の緑の帯の中の文字（Your kindness may...） */

/* 💡 ④ イラスト最下部のピンクベージュの看板（Your kindness may...） */
.bottom-message {
  position: absolute !important;
  z-index: 5 !important;
  text-align: center !important;
  
  /* ▼ 修正：位置をしっかりとイラスト最下部の看板の中にピン留めします */
  bottom: 4% !important;   
  left: 50% !important;
  transform: translate(-50%, 0) !important;
  width: 70% !important;

  /* ▼ 他の成功しているパーツと全く同じフォント指定形式に統一 */
  font-family: "Noto Serif JP", serif !important;
  font-size: 1.3cqw !important; 
  font-weight: 700 !important;
  
  /* ▼ 修正：黒みを無くし、濃いブラウン文字 ＋ 白いふち（白ぶち加工）を適用 */
  color: #4a2e1b !important;
  -webkit-text-stroke: 0.04em #ffffff !important; 
  
  /* ▼ 不要な暗い座布団や余計な背景を完全に削除し、看板の上に直接文字を乗せます */
  background: none !important;
  box-shadow: none !important;
  text-shadow: 0 0 0.3em rgba(255,255,255,1) !important; 
}

/* =========================================================
   INDIVIDUAL CIRCLE POSITIONS
========================================================= */

.circle-1 {

  bottom: 11.8%;

  left: 5.5%;

}

.circle-2 {

  bottom: 11.8%;

  left: 24%;

}

.circle-3 {

  bottom: 11.8%;

  left: 42.5%;

}

.circle-4 {

  bottom: 11.8%;

  left: 61%;

}

.circle-5 {

  bottom: 11.8%;

  left: 79.5%;

}