@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. ★マーカーのアニメーション設定
========================================= */
/* =========================================
   2. ★マーカーのアニメーション設定
========================================= */
.marker-anim {
  padding-bottom: 2px;
  
  /* ▼ 追加：デフォルトのマーカー色（例：定番のイエロー）を指定します ▼ */
  background-image: linear-gradient(transparent 55%, #ffff66 55%);
  
  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%になる */
 .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%); }

/* ⑥ ピンク系 */
.theme-pink { background: linear-gradient(135deg, #ad1457 0%, #d81b60 100%); }
.theme-pink .sub-title { color: #f8bbd0; }
.theme-pink .marker-anim { background-image: linear-gradient(transparent 55%, #e6a800 55%); }
/* ==================================
   A8.net対応ボタン：共通設定
================================== */
.a8-btn-wrap {
    text-align: center;
    margin: 2.5em 0;
}
.a8-btn-wrap a {
    display: inline-block;
    color: #ffffff !important;
    text-decoration: none !important;
    font-weight: bold;
    font-size: 1.1em;
    line-height: 1.5;
    border-radius: 8px;
    padding: 15px 20px;
    transition: all 0.2s ease;
    width: 90%;
    max-width: 450px;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}
.a8-btn-wrap a:hover {
    transform: translateY(2px);
    opacity: 0.95;
}

/* 光るアニメーション */
.a8-btn-wrap a::after {
    content: "";
    position: absolute;
    top: -50px;
    left: -50px;
    width: 30px;
    height: 200px;
    background: rgba(255, 255, 255, 0.4);
    transform: rotate(45deg);
    animation: shiny-effect 3s infinite;
}
@keyframes shiny-effect {
    0% { left: -50px; }
    20% { left: 120%; }
    100% { left: 120%; }
}

/* A8の計測用1px画像が隙間を作らないための処理 */
.a8-btn-wrap img {
    border: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
}

/* ==================================
   A8.net対応ボタン：カラー設定（5色）
================================== */

/* --- 緑色（アクティブグリーン） --- */
.a8-btn-green a {
    background: #28A745;
    box-shadow: 0 4px 0 #1E7E34, 0 5px 10px rgba(0,0,0,0.2);
}
.a8-btn-green a:hover {
    box-shadow: 0 2px 0 #1E7E34, 0 3px 6px rgba(0,0,0,0.2);
}

/* --- 赤色（パッションレッド） --- */
.a8-btn-red a {
    background: #E63946;
    box-shadow: 0 4px 0 #B3212E, 0 5px 10px rgba(0,0,0,0.2);
}
.a8-btn-red a:hover {
    box-shadow: 0 2px 0 #B3212E, 0 3px 6px rgba(0,0,0,0.2);
}

/* --- 青色（クリアブルー） --- */
.a8-btn-blue a {
    background: #007BFF;
    box-shadow: 0 4px 0 #0056B3, 0 5px 10px rgba(0,0,0,0.2);
}
.a8-btn-blue a:hover {
    box-shadow: 0 2px 0 #0056B3, 0 3px 6px rgba(0,0,0,0.2);
}

/* --- オレンジ（ビビッドオレンジ） --- */
.a8-btn-orange a {
    background: #FF8C00;
    box-shadow: 0 4px 0 #CC7000, 0 5px 10px rgba(0,0,0,0.2);
}
.a8-btn-orange a:hover {
    box-shadow: 0 2px 0 #CC7000, 0 3px 6px rgba(0,0,0,0.2);
}

/* --- 金色（リッチゴールド） --- */
.a8-btn-gold a {
    background: #F39C12;
    box-shadow: 0 4px 0 #C87F0A, 0 5px 10px rgba(0,0,0,0.2);
}
.a8-btn-gold a:hover {
    box-shadow: 0 2px 0 #C87F0A, 0 3px 6px rgba(0,0,0,0.2);
}
/* --- ピンク（ビビッドピンク） --- */
.a8-btn-pink a {
    background: #FF4081;
    box-shadow: 0 4px 0 #C2185B, 0 5px 10px rgba(0,0,0,0.2);
}
.a8-btn-pink a:hover {
    box-shadow: 0 2px 0 #C2185B, 0 3px 6px rgba(0,0,0,0.2);
}