@charset "UTF-8";
/* CSS Document */


/* ===============================
   背景ループ画像設定
   =============================== */
.bg-loop {
  background-image: url(../images/bg.jpg);
  background-repeat: repeat-y;
  background-position: center top;  /* ★ left → center */
  background-size: auto;
}

.bg-miraizu {
    background-image: url(../images/miraizu.jpg);
    background-repeat: no-repeat;   /* ループなし */
    background-position: center top; /* 必要なら位置も調整 */
    background-size: auto;         /* パターン画像そのまま使う場合 */
}


/* ===============================
   ページ全体設定（850px固定レイアウト）
   =============================== */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  background: #b7b9c1;
  color: #111;
  font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN", "メイリオ", sans-serif;
  font-size: 35px;
  overflow-x: hidden; /* 横スクロール防止 */
  -webkit-text-size-adjust: 100%;
}

/* 💡 ページ全体の中央寄せ */
.page-container {
  display: block;          /* ★ flexやめるとテーブル中央が安定 */
  text-align: center;      /* 中のテーブルを中央扱いに */
  padding-top: 0;
  margin-top: 0;
}


/* 💡 中身の850px固定コンテンツ */
.content-wrapper {
  width: 850px;
  background: #b7b9c1;
  margin: 0 auto;          /* ★ これで中央固定 */
  display: block;
  text-align: left;        /* 文字は左揃えに戻す */
}




/* コンテンツ全体を850pxに固定して中央寄せ */
.wrapper {
  width: 850px;
  margin: 0 auto;                  /* 横中央寄せ */
  background: #fff;
  position: relative;
  box-shadow: 0 0 40px rgba(0,0,0,0.3);
}

/* スマホで開いたときも強制的に850px幅として扱う */
@media screen and (max-width: 849px) {
  html {
    width: 850px;
  }
  body {
    width: 850px;
  }
}


/* ===============================
   見出しデザイン（放置ingアフィリ用）
   =============================== */

/* ────────────────
   リアル系ロボット顔付き見出し
   ──────────────── */
.heading-basic {
  position: relative;
  background: #213751;
  border-radius: 6px;
  padding: 18px 20px 18px 80px; /* ← 左に余白を追加 */
  font-weight: 700;
  color: #fff;
  font-size: 30px;
  letter-spacing: 0.03em;
  margin: 28px 0;
  overflow: hidden;
  box-sizing: border-box;
  max-width: 80%;
  margin-right: auto;
  margin-left: auto;
}

/* ロボット顔（頭部＋金属質） */
.heading-basic::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 50%;
  width: 42px;
  height: 34px;
  transform: translateY(-50%);
  background: linear-gradient(145deg, #8fa8c6, #5b708d);
  border: 2px solid #2B6CB0;
  border-radius: 8px;
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,0.3),
    inset 0 -3px 4px rgba(0,0,0,0.4),
    0 0 10px rgba(43,108,176,0.4);
}

/* 目（左右光るレンズ風） */
.heading-basic::after {
  content: "";
  position: absolute;
  left: 26px;
  top: 50%;
  width: 8px;
  height: 8px;
  background: radial-gradient(circle at center, #5dfcff 0%, #00b7ff 50%, #004466 100%);
  border-radius: 50%;
  box-shadow:
    12px 0 0 rgba(93,252,255,1),
    12px 0 8px rgba(0,183,255,0.8),
    0 0 8px rgba(93,252,255,0.9),
    12px 0 12px rgba(93,252,255,0.8);
  transform: translateY(-50%);
  animation: robotEyes 3s infinite;
}

/* 光るアニメーション（ゆらめくAI風） */
@keyframes robotEyes {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.7); }
}


/* 枠線＋影：セクション区切りに最適 */
.heading-frame {
  border: 2px solid #2B6CB0;
  border-radius: 12px;
  padding: 10px 16px;
  font-weight: bold;
  background: #213751;
  font-size: 22px;
  color: #2B6CB0;
  box-shadow: 0 2px 10px rgba(43,108,176,0.15);
  margin: 28px 0;
  text-align: center;
}

/* グラデーションバー：強調タイトル向け */
.heading-grad {
  background: linear-gradient(90deg, #2B6CB0 0%, #6fa8dc 100%);
  color: #fff;
  font-weight: 800;
  font-size: 20px;
  padding: 10px 16px;
  border-radius: 8px;
  letter-spacing: 0.05em;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
  margin: 26px 0;
}

/* 手書きマーカー風（文中用） */
.heading-marker {
  display: inline-block;
  background: linear-gradient(transparent 60%, #ffeb3b 60%);
  font-weight: 700;
  font-size: 22px;
  padding: 4px 6px;
  color: #111;
  margin: 20px 0;
}

/* 高級感（金×青）：特典・価格発表など */
.heading-premium {
  background: linear-gradient(135deg, #2B6CB0, #153e75);
  border: 2px solid #f5d27b;
  color: #fff;
  border-radius: 12px;
  padding: 14px 20px;
  font-weight: 800;
  font-size: 24px;
  letter-spacing: 0.04em;
  box-shadow: 0 0 10px rgba(245,210,123,0.5);
  text-align: center;
  margin: 28px 0;
}


/* ===============================
   土星リング＋AI浮遊＋時計アニメーション統合版
   =============================== */
.clock-heading {
  position: relative;
  display: block;
  width: 200px;
  height: 150px;
  margin: 60px auto;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.4);
  box-shadow:
    0 0 25px rgba(255,255,255,0.1),
    inset 0 0 25px rgba(255,255,255,0.05);
  background: transparent;
  overflow: visible;
}

/* 🪐 土星のリング */
.clock-heading::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 520px;
  height: 120px;
  border: 2px solid rgba(255,255,255,0.25);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotateX(75deg) rotateZ(38deg);
  box-shadow: 0 0 40px rgba(255,255,255,0.25);
  filter: blur(1px);
  pointer-events: none;
  animation: ring-spin 20s linear infinite;
}

/* リング回転アニメーション */
@keyframes ring-spin {
  from { transform: translate(-50%, -50%) rotateX(75deg) rotateZ(0deg); }
  to   { transform: translate(-50%, -50%) rotateX(75deg) rotateZ(360deg); }
}

/* 🧠 AIの浮遊文字（背景） */
.clock-heading::after {
  content: "AI";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-10deg);
  font-size: 220px;
  font-weight: 900;
  font-family: "Noto Sans JP", sans-serif;
  color: rgba(255,255,255,0.3);
  text-shadow:
    0 0 25px rgba(255,255,255,0.15),
    0 0 60px rgba(43,108,176,0.2);
  pointer-events: none;
  z-index: 0;
  animation: fadeAI 3s ease-in-out infinite alternate;
}

/* 「AI」フェード呼吸アニメーション */
@keyframes fadeAI {
  from { opacity: 0.2; transform: translate(-50%, -50%) rotate(-10deg) scale(1.0); }
  to   { opacity: 0.15; transform: translate(-50%, -50%) rotate(-10deg) scale(1.05); }
}

/* 🕒 秒針（半透明の白） */
.clock-second {
  content: "";
  position: absolute;
  width: 1px;
  height: 140px;
  background: rgba(255,255,255,0.6);
  top: 50%;
  left: 50%;
  transform-origin: bottom center;
  transform: translate(-50%, -100%) rotate(0deg);
  border-radius: 1px;
  box-shadow: 0 0 12px rgba(255,255,255,0.4);
  animation: tick-step 60s steps(60, end) infinite;
}

/* 秒針カチコチアニメーション */
@keyframes tick-step {
  from { transform: translate(-50%, -100%) rotate(0deg); }
  to   { transform: translate(-50%, -100%) rotate(360deg); }
}

/* 💡 中央テキスト */
.clock-heading h2 {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  text-align: center;
  font-size: 45px;
  font-weight: 700;
  line-height: 1.5;
  text-shadow:
    0 0 6px rgba(255,255,255,0.9),
    0 0 20px rgba(43,108,176,0.8),
    1px 1px 8px rgba(0,0,0,0.6);
  margin: 0;
  white-space: nowrap;
  z-index: 2;
  animation: text-glow 4s ease-in-out infinite alternate;
}

/* テキストもゆっくり光る */
@keyframes text-glow {
  from { text-shadow: 0 0 8px rgba(255,255,255,0.8), 0 0 30px rgba(43,108,176,0.4); }
  to   { text-shadow: 0 0 18px rgba(255,255,255,1.0), 0 0 50px rgba(43,108,176,0.8); }
}




/*もや黄色*/
.glow-yellow {
  color: #fff; /* 文字そのものは白 */
  text-shadow:
    0 0 8px rgba(255, 230, 100, 0.8),
    0 0 20px rgba(255, 230, 100, 0.4),
    0 0 35px rgba(255, 230, 100, 0.2);
}

/*もや赤*/
.glow-red {
  color: #fff; /* 文字自体は白で浮き立たせる */
  text-shadow:
    0 0 8px rgba(255, 80, 80, 0.8),
    0 0 20px rgba(255, 60, 60, 0.5),
    0 0 35px rgba(255, 0, 0, 0.25);
}




/* ===============================
   絵文字背景付き・中央寄せタイトル
   =============================== */
.text-with-emoji {
  position: relative;
  display: flex;              /* ← 中央寄せを楽に */
  justify-content: center;    /* 横方向センター */
  align-items: center;        /* 縦方向センター */
  width: 100%;                /* 画面幅いっぱい */
  height: 200px;              /* 高さ調整（必要に応じて） */
  text-align: center;
  color: #fff;
  font-weight: 800;
  font-size: 70px;
  text-shadow: 0 0 10px rgba(0,0,0,0.3);
  overflow: hidden;
  z-index: 1;
}

/* 💡 絵文字の背景層 */
.text-with-emoji::before {
  content: "ꉂ🤣𐤔";              /* ← 好きな絵文字を入れる */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(3.2); /* 中央配置＋拡大 */
  opacity: 0.12;              /* うっすら透過 */
  z-index: 0;                 /* 背景に回す */
  filter: blur(0px);          /*ぼかす*/
  pointer-events: none;
}

.text-with-emoji2 {
  position: relative;
  display: flex;              /* ← 中央寄せを楽に */
  justify-content: center;    /* 横方向センター */
  align-items: center;        /* 縦方向センター */
  width: 100%;                /* 画面幅いっぱい */
  height: 200px;              /* 高さ調整（必要に応じて） */
  text-align: center;
  color: #fff;
  font-weight: 800;
  font-size: 70px;
  text-shadow: 0 0 10px rgba(0,0,0,0.3);
  overflow: hidden;
  z-index: 1;
}

/* 💡 絵文字の背景層 */
.text-with-emoji2::before {
  content: "🧠";              /* ← 好きな絵文字を入れる */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(3.2); /* 中央配置＋拡大 */
  opacity: 0.12;              /* うっすら透過 */
  z-index: 0;                 /* 背景に回す */
  filter: blur(0px);          /*ぼかす*/
  pointer-events: none;
}

.text-with-emoji3 {
  position: relative;
  display: flex;              /* ← 中央寄せを楽に */
  justify-content: center;    /* 横方向センター */
  align-items: center;        /* 縦方向センター */
  width: 100%;                /* 画面幅いっぱい */
  height: 200px;              /* 高さ調整（必要に応じて） */
  text-align: center;
  color: #fff;
  font-weight: 800;
  font-size: 70px;
  text-shadow: 0 0 10px rgba(0,0,0,0.3);
  overflow: hidden;
  z-index: 1;
}

/* 💡 絵文字の背景層 */
.text-with-emoji3::before {
  content: "🤡";              /* ← 好きな絵文字を入れる */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(3.2); /* 中央配置＋拡大 */
  opacity: 0.12;              /* うっすら透過 */
  z-index: 0;                 /* 背景に回す */
  filter: blur(0px);          /*ぼかす*/
  pointer-events: none;
}


/*折れ線グラフアニメ*/
/* ===== テキスト全体 ===== */
.section-text {
  width: 850px;
  margin: 0 auto;
  font-size: 26px;
  line-height: 1.8;
  letter-spacing: 0.03em;
}

/* ===== グラフエリア ===== */
.bg-success-curve {
  position: relative;
  width: 850px;
  height: 280px;
  margin: 30px 0;
  pointer-events: none;
}

/* ===== SVGグラフ ===== */
#successCurve {
  position: absolute;
  top: 0;
  left: 0;
  width: 850px;
  height: 280px;
}

/* オレンジ発光ライン */
#linePath {
  stroke: rgba(255,165,0,0.85);
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 10px rgba(255,180,60,0.6));
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  transition: stroke-dashoffset 3s ease-out;
}

/* ノード点 */
.node-point {
  fill: rgba(255,180,60,0.7);
  filter: blur(1px);
}

/* ===== 右寄せテキスト全体（アニメ対象） ===== */
.text-right {
  position: relative;
  width: 100%;
  max-width: 850px;      /* 全体のレイアウト幅に合わせる */
  margin: 0 auto;        /* 横方向の中央寄せ */
  text-align: right;     /* テキスト自体は右寄せ */
  font-weight: 700;
  opacity: 0;
  transform: translate(-1300px, 1300px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
  box-sizing: border-box;
  padding-right: 100px;   /* ← これで端ギリギリ防止 */
}

/* 1文字ずつ出現（visible状態で子spanが順にアニメ） */
.text-right.visible {
  opacity: 1;
  transform: translateY(0);
}

.text-right span {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  animation: charFade 0.6s forwards;
}

@keyframes charFade {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

.img-right {
  float: right;                 /* 👉右寄せ配置 */
  margin: 10px 0 10px 25px;     /* 上・右・下・左マージン（左に余白を多め） */
  max-width: 45%;               /* 画像が大きすぎないように制限 */
  border-radius: 10px;          /* 角丸（お好み） */
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);  /* 軽い影を付けても◎ */
}