@charset "UTF-8";
/* =========================================
   1. 共通のレイアウト
========================================= */
.custom-card {
  border-radius: 12px;
  padding: 30px 20px;
  color: #ffffff;
  margin-bottom: 20px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.custom-card .sub-title {
  font-size: 0.9em;
  font-weight: bold;
  margin-bottom: 15px;
  letter-spacing: 0.05em;
}

.custom-card .main-title {
  font-size: 1.4em;
  font-weight: bold;
  line-height: 1.6;
  margin-bottom: 25px;
}

.custom-card .highlight-para {
  font-size: 1.1em;
  font-weight: bold;
  line-height: 2.2; 
  margin-bottom: 25px;
}

.custom-card .body-text {
  font-size: 0.95em;
  line-height: 1.8;
  color: #f0f0f0; 
}

/* =========================================
   2. ★マーカーのアニメーション設定
========================================= */
.custom-card .marker-anim {
  padding-bottom: 2px;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6); 
  
  /* 初期状態：マーカーの幅を0%にして見えなくする */
  background-size: 0% 100%;
  background-repeat: no-repeat;
  background-position: left center;
  
  /* アニメーションの速度（1.2秒かけて滑らかに引く） */
  transition: background-size 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

/* スクロールして画面に入り、このクラスが付いたら幅が100%になる */
.custom-card .marker-anim.is-active {
  background-size: 100% 100%;
}



/* =========================================
   3. カラーバリエーション
========================================= */
/*Top-Left: ブルー (theme-blue)

Top-Center: グリーン (theme-green)

Top-Right: オレンジ (theme-orange)

Bottom-Left: ワインレッド (theme-wine)

Bottom-Center: ダークグレー (theme-dark)

Bottom-Right: マーカー部分の拡大表示（オレンジ背景）
*/
/* ① ブルー系 */
.theme-blue { background: linear-gradient(135deg, #1c456f 0%, #295b8a 100%); }
.theme-blue .sub-title { color: #8cb8f9; }
.theme-blue .marker-anim { background-image: linear-gradient(transparent 55%, #b28a2a 55%); }

/* ② グリーン系 */
.theme-green { background: linear-gradient(135deg, #1e5631 0%, #2e7d32 100%); }
.theme-green .sub-title { color: #a5d6a7; }
.theme-green .marker-anim { background-image: linear-gradient(transparent 55%, #c89e00 55%); }

/* ③ オレンジ系 */
.theme-orange { background: linear-gradient(135deg, #d84315 0%, #ef6c00 100%); }
.theme-orange .sub-title { color: #ffcc80; }
.theme-orange .marker-anim { background-image: linear-gradient(transparent 55%, #e6a800 55%); }

/* ④ ワインレッド系 */
.theme-wine { background: linear-gradient(135deg, #5d0f26 0%, #881b38 100%); }
.theme-wine .sub-title { color: #f48fb1; }
.theme-wine .marker-anim { background-image: linear-gradient(transparent 55%, #b89728 55%); }

/* ⑤ ダーク系 */
.theme-dark { background: linear-gradient(135deg, #212121 0%, #424242 100%); }
.theme-dark .sub-title { color: #bdbdbd; }
.theme-dark .marker-anim { background-image: linear-gradient(transparent 55%, #cc8e00 55%); }