@charset "UTF-8";
/* =============================================================
   アフィリエイトプログラムの LP（/affiliate-program/）。2026-10-26 作り直し フェーズ1
   inc/affiliate-page.php だけが読む（front-head.php の $css_extra）。modern.css の後ろ。
   ・色・文字・ボタンはトップと同じ決まり（--jol-*・申し込みは赤の a.btn.apply）
   ・アクセントにポータルの紺（--af-navy）と金（--af-gold）。★金の文字は紺の地の上だけ（白地では薄くて読めない）
   ・最初の画面の絵はトップと同じ和柄（鶴・富士山・日の出）
   ★下層ページの上の部分（lower.css の div.main・#pan）は、div.main.af-hero で上書きしている
   ============================================================= */

article.aff-page {
  --af-max: 1200px;
  --af-pad: 16px;
  --af-radius: 20px;
  --af-line: #e3eaf2;
  --af-body: #33403e;
  --af-navy: #0b1530;      /* ポータルの紺 */
  --af-navy-2: #15275a;
  --af-gold: #c9a84c;      /* ポータルの金（紺の地で 7.8:1） */
  --af-gold-2: #e6cd7e;
  --af-red: #cc0033;       /* docomo の文字の赤（白地で 5.9:1） */
  --af-err: #c62828;       /* 入力の誤り（白地で 5.6:1） */
}
article.aff-page [hidden] { display: none !important; }
article.aff-page span.docomo { color: var(--af-red); font-weight: 800; letter-spacing: .01em; }
article.aff-page span.nw { white-space: nowrap; }

/* ─── 共通 ─── */
article.aff-page div.af-in {
  width: 100%;
  max-width: calc(var(--af-max) + var(--af-pad) * 2);
  margin: 0 auto;
  padding: 0 var(--af-pad);
}
article.aff-page div.af-in.af-narrow { max-width: calc(880px + var(--af-pad) * 2); }
article.aff-page section.af-sec { padding: clamp(56px, 8vw, 96px) 0; scroll-margin-top: 84px; }
article.aff-page section.af-sec h2 {
  color: var(--jol-text);
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.25;
  font-weight: 800;
  text-align: center;
  letter-spacing: -.005em;
}
article.aff-page p.af-sec-lead { max-width: 680px; margin: 14px auto 0; color: var(--af-body); font-size: 17px; line-height: 1.75; text-align: center; }
article.aff-page p.af-sec-lead a,
article.aff-page p.af-faq-terms a { color: var(--jol-blue); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
/* 文の中のリンク: 押せる高さを 24px 以上に（行の高さは変えない＝上下の余白は文字の行に重なるだけ） */
article.aff-page p.af-sec-lead a,
article.aff-page p.af-faq-terms a,
article.aff-page label.af-agree a { padding: 3px 0; }
article.aff-page h3 { color: var(--jol-text); font-size: 18px; line-height: 1.4; font-weight: 700; }
article.aff-page p.af-small { margin-top: 12px; color: var(--jol-text-sub); font-size: 13.5px; line-height: 1.7; }
article.aff-page .af-center { text-align: center; }
/* ボタン: layout.css の幅 420px・高さ 80px は、このページでは大きすぎる */
article.aff-page a.btn {
  width: auto;
  min-width: 240px;
  height: 56px;
  margin: 0;
  padding: 2px 64px 0 32px;
  font-size: 17px;
  font-weight: 600;
  border-radius: 12px;
}
article.aff-page a.btn::after { right: 20px; width: 24px; height: 24px; transform: translateY(-50%) rotate(90deg); }   /* 下の申し込みへ */
article.aff-page a.btn:hover::after { right: 20px; }
article.aff-page a.af-sub {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  color: var(--jol-blue);
  font-size: 15px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
article.aff-page a.af-sub::after { content: "\2192"; }

/* ─── 最初の画面（和柄の絵＋紺と金の数字の帯） ─── */
article.aff-page div.main.af-hero {
  display: block;
  min-height: 0;
  height: auto;
  padding: 84px 0 0;   /* 上はパンくず（#pan は位置が決まっている）の分をあける */
  background:
    linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, .97) 36%, rgba(255, 255, 255, .6) 60%, rgba(255, 255, 255, 0) 80%),
    url(../img/webp/front/front-bk.webp) right 42% / auto 112% no-repeat,
    #fff;
}
/* フェーズ2: 左に文・右に写真（AI で作った）。写真の上に小さな札が 2 つ浮かぶ */
article.aff-page div.af-hero-in {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  align-items: center;
  gap: clamp(28px, 4vw, 64px);
  max-width: calc(var(--af-max) + var(--af-pad) * 2);
  margin: 0 auto;
  padding: 0 var(--af-pad);
}
article.aff-page div.af-hero-txt { max-width: 640px; }
article.aff-page figure.af-hero-img { position: relative; justify-self: end; width: 100%; max-width: 460px; margin: 0; }
article.aff-page figure.af-hero-img picture,
article.aff-page figure.af-hero-img img { display: block; width: 100%; }
article.aff-page figure.af-hero-img img {
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 28px;
  box-shadow: 0 24px 60px rgba(7, 42, 79, .24), 0 0 0 6px rgba(255, 255, 255, .7);
}
article.aff-page span.af-chip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 10px 10px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 14px 34px rgba(16, 24, 40, .18);
}
article.aff-page span.af-chip-sale { top: 18%; left: -38px; animation: afChipIn .7s var(--jol-ease) .5s both, afFloat 5s ease-in-out 1.2s infinite; }
article.aff-page span.af-chip-link { right: -22px; bottom: 12%; animation: afChipIn .7s var(--jol-ease) 1s both, afFloat 5.6s ease-in-out 1.7s infinite; }
article.aff-page span.af-chip-ic {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: linear-gradient(135deg, var(--af-navy) 0%, var(--af-navy-2) 100%);
  border-radius: 12px;
}
article.aff-page span.af-chip-sale span.af-chip-ic { animation: afPing 4s ease-out 2s infinite backwards; }
article.aff-page span.af-chip-ic svg { width: 20px; height: 20px; fill: none; stroke: var(--af-gold-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
article.aff-page span.af-chip-ic.is-ok { background: #e8f6ef; }
article.aff-page span.af-chip-ic.is-ok svg { stroke: #138a4f; stroke-width: 2.8; }
article.aff-page span.af-chip-t { display: flex; flex-direction: column; color: var(--jol-text); font-size: 14.5px; line-height: 1.3; font-weight: 800; white-space: nowrap; }
article.aff-page span.af-chip-t small { color: var(--jol-text-sub); font-size: 11.5px; font-weight: 700; }
@keyframes afChipIn { 0% { opacity: 0; transform: translateY(14px) scale(.96); } 100% { opacity: 1; transform: none; } }
@keyframes afFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
@keyframes afPing { 0% { box-shadow: 0 0 0 0 rgba(201, 168, 76, .6); } 45%, 100% { box-shadow: 0 0 0 12px rgba(201, 168, 76, 0); } }
/* 小見出し: 中のサービス名（span.nw）が別の列にならないように、ここは横並び（flex）にしない */
article.aff-page div.main.af-hero p.eyebrow { display: block; padding-top: 0; color: #0b6e6f; line-height: 1.5; }
article.aff-page div.main.af-hero p.eyebrow::before,
article.aff-page div.main.af-hero p.eyebrow::after { display: none; }
/* パンくず: 和柄の絵の上でも読めるように、白い地を敷く */
article.aff-page #pan .breadcrumbs { display: inline-block; padding: 4px 12px; background: rgba(255, 255, 255, .88); border-radius: 999px; }
article.aff-page div.main.af-hero h1 {
  margin-top: 4px;
  color: var(--jol-text);
  font-size: clamp(34px, 4.6vw, 58px);
  line-height: 1.1;
  font-weight: 900;
  letter-spacing: -.02em;
}
article.aff-page div.main.af-hero p.af-lead {
  max-width: 580px;
  margin-top: 20px;
  padding-top: 0;
  color: var(--af-body);
  font-size: clamp(16px, 1.35vw, 18px);
  line-height: 1.75;
}
article.aff-page div.af-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 28px; }
article.aff-page div.main.af-hero p.af-note { padding-top: 0; color: var(--jol-text-sub); font-size: 14px; line-height: 1.4; font-weight: 600; }
article.aff-page div.main.af-hero a.af-sub { margin-top: 8px; }
/* 数字の帯（紺の地に金の数字）。最初の画面と次の目次のあいだにまたがる */
article.aff-page ul.af-stats {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: var(--af-max);
  margin: 44px auto -58px;
  padding: 0;
  list-style: none;
  background:
    radial-gradient(60% 120% at 100% 0%, rgba(201, 168, 76, .16), rgba(201, 168, 76, 0) 60%),
    linear-gradient(135deg, var(--af-navy) 0%, var(--af-navy-2) 100%);
  border: 1px solid rgba(201, 168, 76, .35);
  border-radius: 20px;
  box-shadow: 0 18px 44px rgba(11, 21, 48, .28);
}
article.aff-page ul.af-stats li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 22px 12px 20px;
  text-align: center;
}
article.aff-page ul.af-stats li + li { border-left: 1px solid rgba(201, 168, 76, .22); }
article.aff-page span.af-st-v { color: var(--af-gold-2); font-size: clamp(26px, 2.6vw, 34px); line-height: 1; font-weight: 800; letter-spacing: -.01em; }
article.aff-page span.af-st-l { color: rgba(255, 255, 255, .86); font-size: 13.5px; line-height: 1.4; font-weight: 600; }

/* ─── ページの中の目次 ─── */
article.aff-page nav.af-toc { position: relative; z-index: 1; margin: 88px 0 0; padding: 0 var(--af-pad); }
article.aff-page nav.af-toc ul {
  display: flex;
  gap: 4px;
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 8px;
  overflow-x: auto;
  list-style: none;
  background: #fff;
  border: 1px solid var(--af-line);
  border-radius: 999px;
  box-shadow: var(--jol-shadow-md);
  scrollbar-width: none;
}
article.aff-page nav.af-toc ul::-webkit-scrollbar { display: none; }
article.aff-page nav.af-toc a {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 18px;
  color: var(--jol-text);
  font-size: 14.5px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  border-radius: 999px;
}
@media (hover: hover) {
  article.aff-page nav.af-toc a:hover { color: var(--jol-blue); background: #f2f7fe; }
}

/* ─── こんな方に ─── */
article.aff-page section.af-for { padding-bottom: clamp(40px, 6vw, 72px); }
article.aff-page ul.af-for-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
}
article.aff-page ul.af-for-list li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 22px 14px 20px;
  color: var(--jol-text);
  font-size: 15px;
  line-height: 1.4;
  font-weight: 700;
  text-align: center;
  background: #fff;
  border: 1px solid var(--af-line);
  border-radius: 18px;
  box-shadow: 0 6px 20px rgba(16, 24, 40, .05);
}
article.aff-page span.af-ic {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #e3f3f3, #e8f1fc);
  border-radius: 14px;
}
article.aff-page span.af-ic svg,
article.aff-page span.af-card-ic svg,
article.aff-page span.af-rule-ic svg,
article.aff-page span.af-done-ic svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: var(--jol-teal);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
article.aff-page p.af-for-note { margin-top: 22px; color: var(--jol-text-sub); font-size: 15px; text-align: center; }

/* ─── 参加のメリット（紺の地に金の絵の札） ─── */
article.aff-page section.af-why { background: #f2f7fe; }
article.aff-page ul.af-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}
article.aff-page li.af-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 26px 22px 24px;
  background: #fff;
  border: 1px solid var(--af-line);
  border-radius: var(--af-radius);
  box-shadow: 0 6px 20px rgba(16, 24, 40, .05);
}
/* カードの上の動く絵（フェーズ2・affiliate-art.php） */
article.aff-page div.af-art-box {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 164px;
  margin: -8px -8px 6px;
  padding: 10px;
  background: linear-gradient(160deg, #f4f8fd 0%, #eef9f9 100%);
  border-radius: 16px;
}
article.aff-page svg.af-artsvg { display: block; width: 100%; max-width: 250px; height: auto; max-height: 100%; overflow: visible; }
article.aff-page li.af-card p { color: #4a5755; font-size: 15px; line-height: 1.7; }

/* ─── おすすめしていただく商品（フェーズ2） ─── */
article.aff-page div.af-prod-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  margin-top: 36px;
}
article.aff-page figure.af-prod-photo { margin: 0; }
article.aff-page figure.af-prod-photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--af-radius); box-shadow: var(--jol-shadow-md); }
article.aff-page p.af-prod-lead { color: var(--af-body); font-size: 17px; line-height: 1.8; }
article.aff-page ul.af-prod-pts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 20px 0 0; padding: 0; list-style: none; }
article.aff-page ul.af-prod-pts li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  color: var(--jol-text);
  font-size: 14.5px;
  line-height: 1.35;
  font-weight: 700;
  background: #f7f9fc;
  border: 1px solid var(--af-line);
  border-radius: 14px;
}
article.aff-page ul.af-prod-pts svg { flex-shrink: 0; width: 20px; height: 20px; fill: none; stroke: var(--jol-teal); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
article.aff-page ul.af-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 36px 0 0; padding: 0; list-style: none; }
article.aff-page li.af-plan {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-align: center;
  background: #fff;
  border: 1px solid var(--af-line);
  border-radius: var(--af-radius);
  box-shadow: 0 6px 20px rgba(16, 24, 40, .05);
}
article.aff-page li.af-plan.is-mid { border-color: var(--af-gold); box-shadow: 0 0 0 2px rgba(201, 168, 76, .3), 0 14px 32px rgba(16, 24, 40, .08); }
article.aff-page p.af-plan-head { display: flex; align-items: baseline; justify-content: center; gap: 10px; padding: 22px 16px 4px; }
article.aff-page span.af-plan-days { color: var(--jol-text); font-size: 22px; font-weight: 800; }
article.aff-page span.af-plan-gb { color: var(--jol-blue); font-size: 22px; font-weight: 800; }
article.aff-page p.af-plan-price { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 16px 18px; color: var(--jol-text-sub); font-size: 13px; font-weight: 600; }
article.aff-page p.af-plan-price strong { color: var(--jol-text); font-size: 26px; line-height: 1.2; font-weight: 800; }
article.aff-page p.af-plan-price small { font-size: 12px; }
/* 1 件ごとの報酬の帯（紺に金）。金の光が時々すべる */
article.aff-page p.af-plan-earn {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  margin-top: auto;
  padding: 14px 16px;
  overflow: hidden;
  color: rgba(255, 255, 255, .86);
  font-size: 13.5px;
  font-weight: 700;
  background: linear-gradient(135deg, var(--af-navy) 0%, var(--af-navy-2) 100%);
}
article.aff-page p.af-plan-earn strong { color: var(--af-gold-2); font-size: 24px; line-height: 1.1; font-weight: 800; }
article.aff-page p.af-plan-earn::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 40%;
  content: "";
  background: linear-gradient(100deg, rgba(230, 205, 126, 0), rgba(230, 205, 126, .3), rgba(230, 205, 126, 0));
  transform: skewX(-18deg);
  animation: afShine 4.5s ease-in-out infinite;
}
article.aff-page li.af-plan:nth-child(2) p.af-plan-earn::after { animation-delay: .6s; }
article.aff-page li.af-plan:nth-child(3) p.af-plan-earn::after { animation-delay: 1.2s; }
@keyframes afShine { 0%, 55% { left: -60%; } 85%, 100% { left: 130%; } }
article.aff-page p.af-prod-note { margin-top: 18px; }
article.aff-page a.af-inline { padding: 3px 0; color: var(--jol-blue); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* ─── 始め方 4 ステップ（フェーズ2: 動く始め方） ───────────────────────────
   画面に入る（.af-steps-wrap.is-show）と、金の線が 1→4 へ引かれ、光の点が巡り、着いたステップの絵と番号が明るくなる（10 秒で 1 周）。
   各ステップの場面も動く（下の「動く絵」）。線の位置＝絵の下の端（番号の丸の真ん中）。
   ★番号の丸の「明るくなる」は scale（transform と別のもの）で動かす（ぽんと出る動きの transform とぶつからないように） */
article.aff-page section.af-how { background: #f2f7fe; }
article.aff-page div.af-steps-wrap { --art-h: 150px; --g: 22px; position: relative; margin-top: 44px; }
article.aff-page ol.af-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--g);
  margin: 0;
  padding: 0;
  list-style: none;
}
article.aff-page li.af-step { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
article.aff-page div.af-step-art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--art-h);
  padding: 8px 8px 18px;
  background: #fff;
  border: 1px solid var(--af-line);
  border-radius: 18px;
  box-shadow: 0 6px 20px rgba(16, 24, 40, .05);
}
article.aff-page div.af-step-art svg.af-artsvg { max-width: 230px; height: 100%; }
article.aff-page span.af-step-no {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-top: -28px;
  color: var(--af-gold-2);
  font-size: 22px;
  font-weight: 800;
  background: linear-gradient(135deg, var(--af-navy) 0%, var(--af-navy-2) 100%);
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(201, 168, 76, .5), 0 8px 18px rgba(11, 21, 48, .2);
}
article.aff-page div.af-step-txt { display: flex; flex-direction: column; align-items: center; }
article.aff-page span.af-step-label { margin-top: 12px; color: #0b6e6f; font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
article.aff-page li.af-step h3 { margin-top: 4px; font-size: 19px; }
article.aff-page li.af-step p { max-width: 260px; margin-top: 8px; color: #4a5755; font-size: 15px; line-height: 1.7; }
/* 線と光の点（パソコン）。左右の端＝1 番目と 4 番目の丸の真ん中 */
article.aff-page span.af-flow {
  position: absolute;
  z-index: 1;
  top: var(--art-h);
  right: calc((100% - 3 * var(--g)) / 8);
  left: calc((100% - 3 * var(--g)) / 8);
  height: 0;
  pointer-events: none;
}
article.aff-page span.af-flow-line { position: absolute; top: -1px; right: 0; left: 0; height: 2px; background: rgba(201, 168, 76, .28); border-radius: 2px; }
article.aff-page span.af-flow-line::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(90deg, var(--af-gold), var(--af-gold-2));
  border-radius: 2px;
  transform: scaleX(1);
  transform-origin: left center;
}
article.aff-page span.af-flow-dot {
  position: absolute;
  top: -7px;
  left: 0;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  background: var(--af-gold-2);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(201, 168, 76, .28), 0 0 16px 2px rgba(230, 205, 126, .95);
  opacity: 0;
}
article.aff-page div.af-steps-wrap.is-show span.af-flow-line::after { animation: afFlowLine 10s linear infinite; }
article.aff-page div.af-steps-wrap.is-show span.af-flow-dot { animation: afFlowDot 10s ease-in-out infinite; }
/* ぽんと出る（順番に）→ そのあと、光の点が着いたステップが明るくなる（2.5 秒ずつずれる） */
html.js-reveal article.aff-page div.af-steps-wrap:not(.is-show) span.af-step-no { transform: scale(.4); opacity: 0; }
article.aff-page div.af-steps-wrap.is-show span.af-step-no {
  animation: jolPop .55s cubic-bezier(.34, 1.56, .64, 1) var(--pop, 0s) both, afNoOn 10s ease-in-out var(--on, 0s) infinite backwards;
}
article.aff-page div.af-steps-wrap.is-show div.af-step-art { animation: afArtOn 10s ease-in-out var(--on, 0s) infinite backwards; }
article.aff-page li.af-step:nth-child(1) { --pop: .2s; --on: 0s; }
article.aff-page li.af-step:nth-child(2) { --pop: .5s; --on: 2.5s; }
article.aff-page li.af-step:nth-child(3) { --pop: .8s; --on: 5s; }
article.aff-page li.af-step:nth-child(4) { --pop: 1.1s; --on: 7.5s; }
@keyframes afFlowLine {
  0%, 8% { transform: scaleX(0); opacity: 1; }
  25%, 33% { transform: scaleX(.3333); }
  50%, 58% { transform: scaleX(.6667); }
  75%, 92% { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}
@keyframes afFlowDot {
  0% { left: 0; opacity: 0; }
  3%, 8% { left: 0; opacity: 1; }
  25%, 33% { left: 33.333%; }
  50%, 58% { left: 66.667%; }
  75%, 90% { left: 100%; opacity: 1; }
  97%, 100% { left: 100%; opacity: 0; }
}
/* ★0% は「明るくない」形にする（待っているあいだ＝animation-delay のあいだは 0% の形が出るため。0% を明るい形にすると 4 枚とも光る） */
@keyframes afArtOn {
  0%, 26%, 100% { translate: 0 0; border-color: var(--af-line); box-shadow: 0 6px 20px rgba(16, 24, 40, .05); }
  4%, 18% { translate: 0 -6px; border-color: var(--af-gold); box-shadow: 0 0 0 3px rgba(201, 168, 76, .22), 0 16px 34px rgba(11, 21, 48, .14); }
}
@keyframes afNoOn {
  0%, 26%, 100% { scale: 1; box-shadow: 0 0 0 1px rgba(201, 168, 76, .5), 0 8px 18px rgba(11, 21, 48, .2); }
  4%, 18% { scale: 1.14; box-shadow: 0 0 0 1px var(--af-gold), 0 0 0 7px rgba(201, 168, 76, .22), 0 10px 22px rgba(11, 21, 48, .28); }
}

/* ─── 報酬（試算と条件の表） ─── */
article.aff-page section.af-comm { background: #fff; }
article.aff-page div.af-comm-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 22px;
  align-items: start;
  margin-top: 40px;
}
/* 報酬の試算（フェーズ2・紺に金） */
article.aff-page div.af-sim {
  padding: clamp(22px, 3vw, 32px);
  color: #fff;
  background:
    radial-gradient(60% 90% at 100% 0%, rgba(201, 168, 76, .2), rgba(201, 168, 76, 0) 65%),
    linear-gradient(135deg, var(--af-navy) 0%, var(--af-navy-2) 100%);
  border: 1px solid rgba(201, 168, 76, .35);
  border-radius: var(--af-radius);
  box-shadow: 0 18px 44px rgba(11, 21, 48, .26);
}
article.aff-page h3.af-sim-t { color: #fff; font-size: 21px; }
article.aff-page p.af-sim-lead { margin-top: 6px; color: rgba(255, 255, 255, .82); font-size: 14.5px; line-height: 1.6; }
article.aff-page fieldset.af-sim-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; min-width: 0; margin: 18px 0 0; padding: 0; border: 0; }
article.aff-page fieldset.af-sim-plans legend { grid-column: 1 / -1; margin-bottom: 8px; padding: 0; color: rgba(255, 255, 255, .78); font-size: 13px; font-weight: 700; }
article.aff-page label.af-sim-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 10px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
article.aff-page label.af-sim-plan input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
article.aff-page label.af-sim-plan:has(input:checked) { background: rgba(201, 168, 76, .16); border-color: var(--af-gold); box-shadow: inset 0 0 0 1px var(--af-gold); }
article.aff-page label.af-sim-plan:has(input:focus-visible) { outline: 3px solid #fff; outline-offset: 2px; }
article.aff-page span.af-sim-pn { color: #fff; font-size: 14px; line-height: 1.3; font-weight: 800; }
article.aff-page span.af-sim-pc { color: var(--af-gold-2); font-size: 12.5px; font-weight: 700; }
article.aff-page div.af-sim-sales > label { display: block; margin-top: 18px; color: rgba(255, 255, 255, .78); font-size: 13px; font-weight: 700; }
article.aff-page div.af-sim-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
article.aff-page button.af-sim-step {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: #fff;
  font: inherit;
  font-size: 22px;
  line-height: 1;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 50%;
  cursor: pointer;
}
article.aff-page button.af-sim-step:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
article.aff-page input#af-sim-n {
  flex: 1;
  min-width: 0;
  height: 8px;
  margin: 0;
  background: linear-gradient(90deg, var(--af-gold) var(--p, 5%), rgba(255, 255, 255, .2) var(--p, 5%));
  border-radius: 999px;
  outline-offset: 6px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
article.aff-page input#af-sim-n:focus-visible { outline: 3px solid #fff; }
article.aff-page input#af-sim-n::-webkit-slider-thumb { width: 28px; height: 28px; background: #fff; border: 5px solid var(--af-gold); border-radius: 50%; box-shadow: 0 2px 10px rgba(0, 0, 0, .35); -webkit-appearance: none; appearance: none; }
article.aff-page input#af-sim-n::-moz-range-thumb { width: 18px; height: 18px; background: #fff; border: 5px solid var(--af-gold); border-radius: 50%; box-shadow: 0 2px 10px rgba(0, 0, 0, .35); }
article.aff-page output.af-sim-n { min-width: 64px; color: #fff; font-size: 15px; font-weight: 800; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
article.aff-page div.af-sim-out { margin-top: 20px; padding: 18px; text-align: center; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); border-radius: 14px; }
article.aff-page p.af-sim-l { color: rgba(255, 255, 255, .82); font-size: 13.5px; font-weight: 700; }
article.aff-page p.af-sim-v { margin-top: 4px; color: var(--af-gold-2); font-size: clamp(34px, 4vw, 46px); line-height: 1.1; font-weight: 800; font-variant-numeric: tabular-nums; }
article.aff-page dl.af-sim-sub { display: flex; justify-content: center; gap: 30px; margin: 10px 0 0; }
article.aff-page dl.af-sim-sub div { display: flex; flex-direction: column; gap: 2px; }
article.aff-page dl.af-sim-sub dt { color: rgba(255, 255, 255, .72); font-size: 12.5px; font-weight: 700; }
article.aff-page dl.af-sim-sub dd { margin: 0; color: #fff; font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
article.aff-page p.af-sim-note { margin-top: 14px; color: rgba(255, 255, 255, .74); font-size: 12.5px; line-height: 1.65; }
article.aff-page .vh { position: absolute !important; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
article.aff-page div.af-table-wrap {
  padding: 22px 22px 18px;
  background: #fff;
  border: 1px solid var(--af-line);
  border-radius: var(--af-radius);
  box-shadow: 0 6px 20px rgba(16, 24, 40, .05);
}
article.aff-page table.af-table { width: 100%; border-collapse: collapse; }
article.aff-page table.af-table caption {
  padding-bottom: 12px;
  color: var(--jol-text);
  font-size: 17px;
  font-weight: 800;
  text-align: left;
}
article.aff-page table.af-table th,
article.aff-page table.af-table td {
  padding: 13px 10px;
  color: var(--af-body);
  font-size: 15px;
  line-height: 1.55;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid var(--af-line);
}
article.aff-page table.af-table thead th { color: var(--jol-text-sub); font-size: 13px; font-weight: 700; border-top: 0; }
article.aff-page table.af-table tbody th { color: var(--jol-text); font-weight: 700; }
article.aff-page div.af-table-wrap { overflow-x: auto; }   /* 万一、表が入りきらないときは横に送れるように（切れて見えなくならない） */
article.aff-page table.af-terms-table tbody th { width: 38%; }
article.aff-page table.af-terms-table strong { color: var(--af-navy); }

/* ─── パートナーポータルの見本（フェーズ2・紺の節） ─── */
article.aff-page section.af-portal {
  color: #fff;
  background:
    radial-gradient(50% 80% at 100% 0%, rgba(201, 168, 76, .18), rgba(201, 168, 76, 0) 70%),
    radial-gradient(40% 70% at 0% 100%, rgba(0, 101, 184, .3), rgba(0, 101, 184, 0) 70%),
    linear-gradient(150deg, #081127 0%, var(--af-navy) 50%, var(--af-navy-2) 100%);
}
article.aff-page div.af-portal-in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(28px, 4vw, 60px); }
article.aff-page section.af-portal p.eyebrow { justify-content: flex-start; color: var(--af-gold-2); }
article.aff-page section.af-portal p.eyebrow::before { display: none; }
article.aff-page section.af-portal h2 { color: #fff; text-align: left; }
article.aff-page p.af-portal-lead { margin-top: 14px; color: rgba(255, 255, 255, .86); font-size: 17px; line-height: 1.75; }
article.aff-page ul.af-checks { display: grid; gap: 11px; margin: 22px 0 0; padding: 0; list-style: none; }
article.aff-page ul.af-checks li { display: flex; align-items: flex-start; gap: 10px; color: #fff; font-size: 15.5px; line-height: 1.5; }
article.aff-page ul.af-checks svg { flex-shrink: 0; width: 24px; height: 24px; padding: 4px; fill: none; stroke: var(--af-gold-2); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; background: rgba(201, 168, 76, .2); border-radius: 50%; }
article.aff-page figure.af-mock { margin: 0; }
article.aff-page figure.af-mock figcaption { margin-top: 12px; color: rgba(255, 255, 255, .7); font-size: 12.5px; text-align: right; }
article.aff-page div.af-mock-win {
  overflow: hidden;
  background: #0d1733;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 18px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .45), 0 0 0 1px rgba(201, 168, 76, .22);
  transform: perspective(1400px) rotateY(-7deg) rotateX(2deg);
}
article.aff-page div.af-mock-top { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #0a1229; border-bottom: 1px solid rgba(255, 255, 255, .08); }
article.aff-page div.af-mock-top i { width: 9px; height: 9px; background: #ff6b6b; border-radius: 50%; }
article.aff-page div.af-mock-top i:nth-child(2) { background: #ffc84a; }
article.aff-page div.af-mock-top i:nth-child(3) { background: #3ccf8e; }
article.aff-page div.af-mock-top b { margin-left: 10px; color: rgba(255, 255, 255, .82); font-size: 12px; font-weight: 700; }
article.aff-page div.af-mock-body { display: grid; grid-template-columns: 118px minmax(0, 1fr); }
article.aff-page ul.af-mock-side { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 14px 10px; list-style: none; background: #0a1229; }
article.aff-page ul.af-mock-side li { padding: 8px 10px; color: rgba(255, 255, 255, .62); font-size: 12px; font-weight: 700; border-radius: 8px; }
article.aff-page ul.af-mock-side li.is-on { color: var(--af-navy); background: var(--af-gold-2); }
article.aff-page div.af-mock-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 14px; }
article.aff-page div.af-mock-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
article.aff-page div.af-mock-kpis div { min-width: 0; padding: 10px; background: #15275a; border-radius: 10px; }
article.aff-page div.af-mock-kpis span { display: block; color: rgba(255, 255, 255, .68); font-size: 10.5px; line-height: 1.25; font-weight: 700; }
article.aff-page div.af-mock-kpis b { display: block; margin-top: 4px; color: #fff; font-size: 16px; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
article.aff-page div.af-mock-kpis div:nth-child(n + 3) b { color: var(--af-gold-2); }
article.aff-page div.af-mock-chart { padding: 10px 10px 6px; background: #101d42; border-radius: 10px; }
article.aff-page span.af-mock-ct { color: rgba(255, 255, 255, .68); font-size: 10.5px; font-weight: 700; }
article.aff-page div.af-mock-chart svg { display: block; width: 100%; height: 96px; margin-top: 6px; }
article.aff-page div.af-mock-chart rect.mc-b { fill: #c9a84c; opacity: .85; transform-box: fill-box; transform-origin: center bottom; }
article.aff-page div.af-mock-chart path.mc-line { fill: none; stroke: #5fd4d6; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
article.aff-page div.af-mock-link { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 10px; background: #15275a; border-radius: 10px; }
article.aff-page span.af-mock-ll { color: rgba(255, 255, 255, .68); font-size: 10.5px; font-weight: 700; white-space: nowrap; }
article.aff-page span.af-mock-url { flex: 1; min-width: 0; padding: 6px 8px; overflow: hidden; color: #cfe6ff; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11.5px; white-space: nowrap; text-overflow: ellipsis; background: #0b1530; border-radius: 6px; }
article.aff-page span.af-mock-copy { display: inline-grid; padding: 6px 10px; color: var(--af-navy); font-size: 11px; font-weight: 800; white-space: nowrap; background: var(--af-gold-2); border-radius: 6px; }
article.aff-page span.af-mock-copy span { grid-area: 1 / 1; text-align: center; }
article.aff-page span.af-mock-copy span.c2 { opacity: 0; }
/* 見本が画面に入ったら: 棒が育ち、線が引かれ、「コピー」→「コピーしました」が繰り返す（数字は affiliate-lp.js が数え上げる） */
article.aff-page figure.af-mock.is-show rect.mc-b { animation: afMcBar .8s var(--jol-ease) calc(.3s + var(--i) * .05s) both; }
/* 線は左から現れる（clip-path）。stroke-dasharray は、引き伸ばしたグラフ（non-scaling-stroke）だと長さが合わず途中で切れる */
article.aff-page figure.af-mock.is-show path.mc-line { animation: afMcLine 1.4s ease-in-out 1s both; }
article.aff-page figure.af-mock.is-show span.af-mock-copy span.c1 { animation: afCopy1 5s ease-in-out 2.4s infinite backwards; }
article.aff-page figure.af-mock.is-show span.af-mock-copy span.c2 { animation: afCopy2 5s ease-in-out 2.4s infinite backwards; }
article.aff-page figure.af-mock.is-show span.af-mock-copy { animation: afCopyBg 5s ease-in-out 2.4s infinite backwards; }
@keyframes afMcBar { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes afMcLine { from { clip-path: inset(-10% 100% -10% 0); } to { clip-path: inset(-10% 0 -10% 0); } }
@keyframes afCopy1 { 0%, 40% { opacity: 1; } 46%, 86% { opacity: 0; } 92%, 100% { opacity: 1; } }
@keyframes afCopy2 { 0%, 40% { opacity: 0; } 46%, 86% { opacity: 1; } 92%, 100% { opacity: 0; } }
@keyframes afCopyBg { 0%, 40% { background-color: var(--af-gold-2); } 46%, 86% { background-color: #8ee6b4; } 92%, 100% { background-color: var(--af-gold-2); } }

/* ─── ルール ─── */
article.aff-page div.af-rules-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 40px; }
article.aff-page div.af-rule-box { padding: 24px 26px; border-radius: var(--af-radius); }
article.aff-page div.af-rule-box.af-do { background: #eef8f6; border: 1px solid #cfe9e4; }
article.aff-page div.af-rule-box.af-dont { background: #fdf1f1; border: 1px solid #f3d3d3; }
article.aff-page div.af-rule-box h3 { display: flex; align-items: center; gap: 10px; font-size: 18px; }
article.aff-page span.af-rule-ic { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: #fff; border-radius: 50%; }
article.aff-page span.af-rule-ic svg { width: 18px; height: 18px; stroke-width: 2.6; }
article.aff-page div.af-dont span.af-rule-ic svg { stroke: var(--af-err); }
article.aff-page div.af-rule-box ul { margin: 14px 0 0; padding: 0; list-style: none; }
article.aff-page div.af-rule-box li {
  position: relative;
  padding: 7px 0 7px 22px;
  color: var(--af-body);
  font-size: 15px;
  line-height: 1.6;
}
article.aff-page div.af-rule-box li::before {
  position: absolute;
  top: 16px;
  left: 4px;
  width: 7px;
  height: 7px;
  content: "";
  background: var(--jol-teal);
  border-radius: 50%;
}
article.aff-page div.af-dont li::before { background: var(--af-err); }

/* ─── 申し込み ─── */
article.aff-page section.af-apply { position: relative; background: linear-gradient(180deg, #fff 0%, #f2f7fe 100%); }
article.aff-page span.af-anchor { position: absolute; top: 0; scroll-margin-top: 84px; }   /* 古い LP の #register-form */
article.aff-page div.af-form-card {
  margin-top: 34px;
  padding: clamp(22px, 4vw, 40px);
  background: #fff;
  border: 1px solid var(--af-line);
  border-top: 4px solid var(--af-gold);
  border-radius: var(--af-radius);
  box-shadow: 0 18px 44px rgba(16, 24, 40, .08);
  scroll-margin-top: 100px;   /* 受け付けたあと、ここへ移る（固定のヘッダーに隠れないように） */
}
article.aff-page form.af-form { display: grid; gap: 18px; }
article.aff-page div.af-row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
article.aff-page div.af-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
article.aff-page div.af-field > label { color: var(--jol-text); font-size: 15px; font-weight: 700; }
article.aff-page span.af-req,
article.aff-page span.af-opt { display: inline-block; margin-left: 4px; padding: 1px 7px; font-size: 11.5px; font-weight: 700; vertical-align: 1px; border-radius: 999px; }
article.aff-page span.af-req { color: #fff; background: var(--af-err); }
article.aff-page span.af-opt { color: var(--jol-text-sub); background: #eef2f6; }
article.aff-page form.af-form input[type="text"],
article.aff-page form.af-form input[type="email"],
article.aff-page form.af-form input[type="url"],
article.aff-page form.af-form select,
article.aff-page form.af-form textarea {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  color: var(--jol-text);
  font: inherit;
  font-size: 16px;   /* 16px 未満だと iPhone が拡大する */
  line-height: 1.5;
  background: #fff;
  border: 1px solid #c9d4e0;
  border-radius: 12px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
article.aff-page form.af-form textarea { min-height: 120px; resize: vertical; }
article.aff-page form.af-form select {
  padding-right: 40px;
  -webkit-appearance: none;
  appearance: none;
  background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235d6b69' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 14px center / 18px no-repeat;
}
article.aff-page form.af-form input:focus,
article.aff-page form.af-form select:focus,
article.aff-page form.af-form textarea:focus { border-color: var(--jol-blue); box-shadow: 0 0 0 3px rgba(0, 101, 184, .16); outline: none; }
article.aff-page form.af-form ::placeholder { color: #8a9694; }
article.aff-page div.af-field.is-bad input,
article.aff-page div.af-field.is-bad select,
article.aff-page div.af-field.is-bad textarea { border-color: var(--af-err); background-color: #fffafa; }
article.aff-page p.af-err { color: var(--af-err); font-size: 13.5px; font-weight: 600; line-height: 1.5; }
article.aff-page p.af-err:empty { display: none; }
article.aff-page div.af-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
article.aff-page label.af-agree {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  color: var(--af-body);
  font-size: 15px;
  line-height: 1.6;
  background: #f7f9fc;
  border: 1px solid var(--af-line);
  border-radius: 12px;
  cursor: pointer;
}
article.aff-page div.af-field.is-bad label.af-agree { border-color: var(--af-err); background: #fffafa; }
article.aff-page label.af-agree input { flex-shrink: 0; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--jol-blue); cursor: pointer; }
article.aff-page label.af-agree a { color: var(--jol-blue); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
article.aff-page button.af-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 58px;
  margin-top: 4px;
  color: #fff;
  font: inherit;
  font-size: 18px;
  font-weight: 700;
  background: linear-gradient(90deg, #db1a1a, #ff4027);
  border: 0;
  border-radius: 12px;
  box-shadow: 0 3px 0 #a31414;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
article.aff-page button.af-submit:active { transform: translateY(2px); box-shadow: 0 1px 0 #a31414; }
article.aff-page button.af-submit:disabled { opacity: .7; cursor: progress; }
article.aff-page div.af-form-msg {
  padding: 13px 16px;
  color: #8e1b1b;
  font-size: 15px;
  line-height: 1.6;
  font-weight: 600;
  background: #fdf1f1;
  border: 1px solid #f3c7c7;
  border-radius: 12px;
}
article.aff-page div.af-form-msg a { color: var(--jol-blue); text-decoration: underline; text-underline-offset: 3px; }
/* 受け付けたあと */
article.aff-page div.af-done { text-align: center; }
article.aff-page span.af-done-ic { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; background: #e8f6ef; border-radius: 50%; }
article.aff-page span.af-done-ic svg { width: 34px; height: 34px; stroke: #138a4f; stroke-width: 2.2; }
article.aff-page div.af-done h3 { margin-top: 14px; font-size: clamp(21px, 2.4vw, 26px); outline: none; }
article.aff-page p.af-done-d { margin-top: 8px; color: var(--af-body); font-size: 16px; overflow-wrap: anywhere; }
article.aff-page div.af-code {
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 20px;
  padding: 14px 28px;
  background: linear-gradient(135deg, var(--af-navy) 0%, var(--af-navy-2) 100%);
  border-radius: 14px;
}
article.aff-page span.af-code-l { color: rgba(255, 255, 255, .8); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
article.aff-page span.af-code-v { color: var(--af-gold-2); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 24px; font-weight: 800; letter-spacing: .14em; }
article.aff-page p.af-done-next { margin-top: 24px; color: var(--jol-text); font-size: 16px; font-weight: 800; }
article.aff-page ol.af-done-steps { max-width: 520px; margin: 10px auto 0; padding: 0 0 0 1.4em; color: var(--af-body); font-size: 15px; line-height: 1.7; text-align: left; }
article.aff-page ol.af-done-steps li { list-style: decimal; padding: 3px 0; }
article.aff-page a.af-done-link { margin-top: 14px; }

/* ─── よくある質問（details） ─── */
article.aff-page div.af-qa-list { margin-top: 30px; border-top: 1px solid var(--af-line); }
article.aff-page details.af-qa { border-bottom: 1px solid var(--af-line); }
article.aff-page details.af-qa summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 60px;
  padding: 16px 4px;
  list-style: none;
  cursor: pointer;
}
article.aff-page details.af-qa summary::-webkit-details-marker { display: none; }
article.aff-page details.af-qa summary h3 { font-size: 17px; line-height: 1.5; }
article.aff-page span.af-qa-ic { position: relative; flex-shrink: 0; width: 30px; height: 30px; background: #f2f7fe; border-radius: 50%; }
article.aff-page span.af-qa-ic::before,
article.aff-page span.af-qa-ic::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2px;
  content: "";
  background: var(--jol-blue);
  border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: transform .2s var(--jol-ease);
}
article.aff-page span.af-qa-ic::after { transform: translate(-50%, -50%) rotate(90deg); }
article.aff-page details.af-qa[open] span.af-qa-ic::after { transform: translate(-50%, -50%) rotate(0deg); }
@media (hover: hover) {
  article.aff-page details.af-qa summary:hover h3 { color: var(--jol-blue); }
}
article.aff-page div.af-qa-a { padding: 0 4px 20px; }
article.aff-page div.af-qa-a p { color: var(--af-body); font-size: 15.5px; line-height: 1.8; }
article.aff-page p.af-faq-terms { margin-top: 22px; font-size: 15px; }

/* ─── 最後の申し込みの帯（紺と金） ─── */
article.aff-page section.af-end { padding-top: 0; }
article.aff-page div.af-end-in {
  position: relative;
  padding: clamp(40px, 6vw, 64px) clamp(20px, 5vw, 64px);
  overflow: hidden;
  color: #fff;
  text-align: center;
  background:
    radial-gradient(45% 90% at 100% 0%, rgba(201, 168, 76, .24), rgba(201, 168, 76, 0) 70%),
    radial-gradient(40% 80% at 0% 100%, rgba(0, 101, 184, .35), rgba(0, 101, 184, 0) 70%),
    linear-gradient(150deg, var(--af-navy) 0%, var(--af-navy-2) 100%);
  border: 1px solid rgba(201, 168, 76, .35);
  border-radius: 28px;
  box-shadow: 0 20px 50px rgba(11, 21, 48, .28);
}
article.aff-page section.af-end div.af-end-in h2 { color: #fff; }
article.aff-page div.af-end-in > p { margin-top: 12px; color: rgba(255, 255, 255, .9); font-size: 17px; line-height: 1.6; }
article.aff-page div.af-cta-row.af-cta-center { justify-content: center; }
article.aff-page a.af-sub.af-sub-light { color: #fff; }
article.aff-page div.af-end-in a:focus-visible { outline-color: #fff; }
/* スマホの申し込みバーの文（値段の代わりに「10%」の言い切り） */
article.aff-page span.af-sc-text { font-size: 17px; }

/* =============================================================
   フェーズ2: 動く絵（inc/affiliate-art.php）
   ・始め方の場面は li.af-step、参加のメリットの絵は li.af-card が画面に入ったら（.is-show）動き出し、くり返す
   ・形を変える要素は transform-box: fill-box（自分の大きさを基準に、拡大・縮小・回転）
   ★動きを減らしたい設定の人・印刷・JS なし: 止まった完成の絵（下の prefers-reduced-motion）
   ============================================================= */
article.aff-page svg.af-artsvg .s1-f,
article.aff-page svg.af-artsvg .s2-type,
article.aff-page svg.af-artsvg .w3-k { transform-box: fill-box; transform-origin: left center; }
article.aff-page svg.af-artsvg .s1-btn,
article.aff-page svg.af-artsvg .s1-ok,
article.aff-page svg.af-artsvg .s2-spark,
article.aff-page svg.af-artsvg .s2-fd,
article.aff-page svg.af-artsvg .s2-q,
article.aff-page svg.af-artsvg .s3-b,
article.aff-page svg.af-artsvg .s3-link,
article.aff-page svg.af-artsvg .s4-plus,
article.aff-page svg.af-artsvg .w1-plane,
article.aff-page svg.af-artsvg .w1-ok,
article.aff-page svg.af-artsvg .w2-p,
article.aff-page svg.af-artsvg .w3-dot { transform-box: fill-box; transform-origin: center; }
article.aff-page svg.af-artsvg .s4-c,
article.aff-page svg.af-artsvg .w1-bar,
article.aff-page svg.af-artsvg .w2-fill,
article.aff-page svg.af-artsvg .w3-b { transform-box: fill-box; transform-origin: center bottom; }
article.aff-page svg.af-artsvg .w4-q { transform-box: fill-box; transform-origin: 30% 100%; }
article.aff-page svg.af-artsvg .w4-a { transform-box: fill-box; transform-origin: 70% 100%; }

/* 1 申し込む（6 秒）: カーソルが 3 つの欄を順に埋める → 同意に✓ → 送る → 受け付けの✓ */
article.aff-page li.af-step.is-show svg.af-s1 .f1 { animation: afS1f1 6s ease-in-out infinite; }
article.aff-page li.af-step.is-show svg.af-s1 .f2 { animation: afS1f2 6s ease-in-out infinite; }
article.aff-page li.af-step.is-show svg.af-s1 .f3 { animation: afS1f3 6s ease-in-out infinite; }
article.aff-page li.af-step.is-show svg.af-s1 .s1-check { stroke-dasharray: 12; animation: afS1chk 6s ease-in-out infinite; }
article.aff-page li.af-step.is-show svg.af-s1 .s1-btn { animation: afS1btn 6s ease-in-out infinite; }
article.aff-page li.af-step.is-show svg.af-s1 .s1-ok { animation: afS1ok 6s ease-out infinite; }
article.aff-page svg.af-s1 .s1-cur { transform: translate(151px, 114px); }
article.aff-page li.af-step.is-show svg.af-s1 .s1-cur { animation: afS1cur 6s ease-in-out infinite; }
@keyframes afS1f1 { 0%, 5% { transform: scaleX(0); } 20%, 90% { transform: scaleX(1); } 97%, 100% { transform: scaleX(0); } }
@keyframes afS1f2 { 0%, 24% { transform: scaleX(0); } 39%, 90% { transform: scaleX(1); } 97%, 100% { transform: scaleX(0); } }
@keyframes afS1f3 { 0%, 43% { transform: scaleX(0); } 58%, 90% { transform: scaleX(1); } 97%, 100% { transform: scaleX(0); } }
@keyframes afS1chk { 0%, 66% { stroke-dashoffset: 12; } 71%, 90% { stroke-dashoffset: 0; } 97%, 100% { stroke-dashoffset: 12; } }
@keyframes afS1btn { 0%, 77% { transform: scale(1); } 80% { transform: scale(.9); } 84%, 100% { transform: scale(1); } }
@keyframes afS1ok { 0%, 81% { transform: scale(0); opacity: 0; } 85% { transform: scale(1.18); opacity: 1; } 88%, 93% { transform: scale(1); opacity: 1; } 99%, 100% { transform: scale(.6); opacity: 0; } }
@keyframes afS1cur {
  0% { transform: translate(70px, 50px); opacity: 0; }
  4%, 5% { transform: translate(70px, 50px); opacity: 1; }
  20% { transform: translate(127px, 50px); }
  24% { transform: translate(70px, 72px); }
  39% { transform: translate(147px, 72px); }
  43% { transform: translate(70px, 94px); }
  58% { transform: translate(163px, 94px); }
  64%, 71% { transform: translate(67px, 114px); }
  77%, 84% { transform: translate(151px, 114px); opacity: 1; }
  92%, 100% { transform: translate(151px, 114px); opacity: 0; }
}

/* 2 リンクを作る（6 秒）: 紹介コードが 1 文字ずつ → くさりがつながる → 矢印 → QR コードが並ぶ */
article.aff-page li.af-step.is-show svg.af-s2 .s2-type { animation: afS2type 6s steps(8, end) infinite; }
article.aff-page li.af-step.is-show svg.af-s2 .s2-caret { animation: afS2caret 6s steps(8, end) infinite, afBlink .9s step-end infinite; }
article.aff-page li.af-step.is-show svg.af-s2 .s2-l1 { animation: afS2l1 6s var(--jol-ease) infinite; }
article.aff-page li.af-step.is-show svg.af-s2 .s2-l2 { animation: afS2l2 6s var(--jol-ease) infinite; }
article.aff-page li.af-step.is-show svg.af-s2 .s2-spark { animation: afS2spark 6s ease-out infinite; }
article.aff-page li.af-step.is-show svg.af-s2 .s2-arrow { stroke-dasharray: 34; animation: afS2arrow 6s ease-in-out infinite; }
article.aff-page li.af-step.is-show svg.af-s2 .s2-fd { animation: afS2q 6s cubic-bezier(.34, 1.56, .64, 1) infinite; }
article.aff-page li.af-step.is-show svg.af-s2 .s2-q { animation: afS2q 6s cubic-bezier(.34, 1.56, .64, 1) calc(var(--i) * .05s) infinite backwards; }
@keyframes afS2type { 0%, 8% { transform: scaleX(0); } 30%, 92% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes afS2caret { 0%, 8% { transform: translateX(0); } 30%, 92% { transform: translateX(44px); } 100% { transform: translateX(0); } }
@keyframes afBlink { 50% { opacity: 0; } }
@keyframes afS2l1 { 0%, 30% { transform: translateX(-12px); } 42%, 92% { transform: translateX(0); } 100% { transform: translateX(-12px); } }
@keyframes afS2l2 { 0%, 30% { transform: translateX(12px); } 42%, 92% { transform: translateX(0); } 100% { transform: translateX(12px); } }
@keyframes afS2spark { 0%, 41% { opacity: 0; transform: scale(.6); } 45% { opacity: 1; transform: scale(1.1); } 54%, 100% { opacity: 0; transform: scale(1.3); } }
@keyframes afS2arrow { 0%, 44% { stroke-dashoffset: 34; } 52%, 92% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 34; } }
@keyframes afS2q { 0%, 52% { transform: scale(0); } 60%, 92% { transform: scale(1); } 100% { transform: scale(0); } }

/* 3 紹介する（4.8 秒）: 投稿から媒体のアイコンが広がって浮かぶ・♡が次々に上がる・リンクのボタンが脈打つ */
article.aff-page li.af-step.is-show svg.af-s3 .s3-b { animation: afS3b 4.8s var(--jol-ease) infinite backwards; }
article.aff-page li.af-step.is-show svg.af-s3 .s3-b.b2 { animation-delay: .25s; }
article.aff-page li.af-step.is-show svg.af-s3 .s3-b.b3 { animation-delay: .5s; }
article.aff-page li.af-step.is-show svg.af-s3 .s3-b.b4 { animation-delay: .75s; }
article.aff-page svg.af-s3 .s3-h.h1 { --hx: 12px; }
article.aff-page svg.af-s3 .s3-h.h2 { --hx: -12px; }
article.aff-page svg.af-s3 .s3-h.h3 { --hx: 4px; }
article.aff-page svg.af-s3 .s3-h { opacity: 0; }
article.aff-page li.af-step.is-show svg.af-s3 .s3-h { animation: afS3h 2.4s ease-out infinite backwards; }
article.aff-page li.af-step.is-show svg.af-s3 .s3-h.h2 { animation-delay: .8s; }
article.aff-page li.af-step.is-show svg.af-s3 .s3-h.h3 { animation-delay: 1.6s; }
article.aff-page li.af-step.is-show svg.af-s3 .s3-link { animation: afS3link 2.4s ease-in-out infinite; }
@keyframes afS3b {
  0% { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; }
  12% { opacity: 1; }
  26% { transform: translate(0, 0) scale(1); }
  42% { transform: translate(0, -3px) scale(1); }
  58% { transform: translate(0, 0) scale(1); }
  74% { transform: translate(0, -3px) scale(1); opacity: 1; }
  88%, 100% { transform: translate(0, 0) scale(1); opacity: 0; }
}
@keyframes afS3h { 0% { transform: translate(0, 0) scale(.6); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(var(--hx), -46px) scale(1.25); opacity: 0; } }
@keyframes afS3link { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }

/* 4 報酬を受け取る（5 秒）: 銀行からコインが線を走って届き、積み上がって「+¥」 */
article.aff-page li.af-step.is-show svg.af-s4 .s4-track { animation: afDash 1s linear infinite; }
article.aff-page li.af-step.is-show svg.af-s4 .s4-fly { animation: afS4fly 5s ease-in-out infinite; }
article.aff-page li.af-step.is-show svg.af-s4 .s4-c.c2 { animation: afS4c2 5s ease-out infinite; }
article.aff-page li.af-step.is-show svg.af-s4 .s4-c.c3 { animation: afS4c3 5s ease-out infinite; }
article.aff-page li.af-step.is-show svg.af-s4 .s4-c.c4 { animation: afS4c4 5s ease-out infinite; }
article.aff-page li.af-step.is-show svg.af-s4 .s4-plus { animation: afS4plus 5s ease-out infinite; }
@keyframes afDash { to { stroke-dashoffset: -10; } }
@keyframes afS4fly { 0% { transform: translate(0, 0); opacity: 0; } 6% { opacity: 1; } 34% { transform: translate(56px, 0); } 46% { transform: translate(92px, -40px); } 57% { transform: translate(92px, 6px); opacity: 1; } 61%, 100% { transform: translate(92px, 6px); opacity: 0; } }
@keyframes afS4c2 { 0%, 57% { transform: scaleY(0); opacity: 0; } 61%, 92% { transform: scaleY(1); opacity: 1; } 98%, 100% { transform: scaleY(0); opacity: 0; } }
@keyframes afS4c3 { 0%, 61% { transform: scaleY(0); opacity: 0; } 65%, 92% { transform: scaleY(1); opacity: 1; } 98%, 100% { transform: scaleY(0); opacity: 0; } }
@keyframes afS4c4 { 0%, 65% { transform: scaleY(0); opacity: 0; } 69%, 92% { transform: scaleY(1); opacity: 1; } 98%, 100% { transform: scaleY(0); opacity: 0; } }
@keyframes afS4plus { 0%, 68% { transform: translateY(10px) scale(.6); opacity: 0; } 74% { transform: translateY(0) scale(1.08); opacity: 1; } 78%, 88% { transform: translateY(-4px) scale(1); opacity: 1; } 96%, 100% { transform: translateY(-14px) scale(1); opacity: 0; } }

/* 参加のメリット 1（6 秒）: 飛行機が降りる → スマホの電波が満ちる → ✓ */
article.aff-page svg.af-s2 .s2-caret { transform: translateX(44px); }   /* 止まった絵では、打ち終わった所にいる */
article.aff-page li.af-card.is-show svg.af-w1 .w1-run { animation: afDash2 1.4s linear infinite; }
article.aff-page li.af-card.is-show svg.af-w1 .w1-plane { animation: afW1plane 6s ease-in-out infinite; }
article.aff-page svg.af-w1 .w1-plane { transform: translate(86px, 100px); }
article.aff-page li.af-card.is-show svg.af-w1 .w1-bar { animation: afW1bar 6s ease-out infinite backwards; }
article.aff-page li.af-card.is-show svg.af-w1 .w1-bar.b2 { animation-delay: .15s; }
article.aff-page li.af-card.is-show svg.af-w1 .w1-bar.b3 { animation-delay: .3s; }
article.aff-page li.af-card.is-show svg.af-w1 .w1-bar.b4 { animation-delay: .45s; }
article.aff-page li.af-card.is-show svg.af-w1 .w1-ok { animation: afW1ok 6s ease-out infinite; }
@keyframes afDash2 { to { stroke-dashoffset: -21; } }
@keyframes afW1plane { 0% { transform: translate(-10px, 20px) rotate(14deg); opacity: 0; } 8% { opacity: 1; } 42% { transform: translate(40px, 100px) rotate(0deg); } 62%, 84% { transform: translate(86px, 100px) rotate(0deg); opacity: 1; } 94%, 100% { transform: translate(86px, 100px) rotate(0deg); opacity: 0; } }
@keyframes afW1bar { 0%, 44% { transform: scaleY(.15); opacity: .35; } 56%, 92% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(.15); opacity: .35; } }
@keyframes afW1ok { 0%, 60% { transform: scale(0); opacity: 0; } 66% { transform: scale(1.18); opacity: 1; } 70%, 90% { transform: scale(1); opacity: 1; } 98%, 100% { transform: scale(.6); opacity: 0; } }

/* 参加のメリット 2（6 秒）: 注文が届くたびに「+10%」が貯金びんへ → 金がたまる */
article.aff-page li.af-card.is-show svg.af-w2 .w2-r.r1 { animation: afW2r1 6s var(--jol-ease) infinite; }
article.aff-page li.af-card.is-show svg.af-w2 .w2-r.r2 { animation: afW2r2 6s var(--jol-ease) infinite; }
article.aff-page li.af-card.is-show svg.af-w2 .w2-r.r3 { animation: afW2r3 6s var(--jol-ease) infinite; }
article.aff-page svg.af-w2 .w2-p { opacity: 0; }
article.aff-page svg.af-w2 .w2-p.p1 { --py: 41px; }
article.aff-page svg.af-w2 .w2-p.p2 { --py: 10px; }
article.aff-page svg.af-w2 .w2-p.p3 { --py: -22px; }
article.aff-page li.af-card.is-show svg.af-w2 .w2-p { animation: afW2p 6s ease-in-out infinite backwards; }
article.aff-page li.af-card.is-show svg.af-w2 .w2-p.p2 { animation-delay: 1.32s; }
article.aff-page li.af-card.is-show svg.af-w2 .w2-p.p3 { animation-delay: 2.64s; }
article.aff-page li.af-card.is-show svg.af-w2 .w2-fill { animation: afW2fill 6s ease-in-out infinite; }
@keyframes afW2r1 { 0% { transform: translateX(-24px); opacity: 0; } 8%, 92% { transform: none; opacity: 1; } 100% { transform: translateX(-24px); opacity: 0; } }
@keyframes afW2r2 { 0%, 22% { transform: translateX(-24px); opacity: 0; } 30%, 92% { transform: none; opacity: 1; } 100% { transform: translateX(-24px); opacity: 0; } }
@keyframes afW2r3 { 0%, 44% { transform: translateX(-24px); opacity: 0; } 52%, 92% { transform: none; opacity: 1; } 100% { transform: translateX(-24px); opacity: 0; } }
@keyframes afW2p { 0%, 9% { transform: translate(0, 0) scale(0); opacity: 0; } 13% { transform: translate(0, 0) scale(1.1); opacity: 1; } 18% { transform: translate(0, 0) scale(1); opacity: 1; } 25% { transform: translate(64px, var(--py)) scale(.55); opacity: 1; } 28%, 100% { transform: translate(64px, var(--py)) scale(.4); opacity: 0; } }
@keyframes afW2fill { 0%, 24% { transform: scaleY(.12); } 29%, 46% { transform: scaleY(.42); } 51%, 68% { transform: scaleY(.72); } 73%, 92% { transform: scaleY(1); } 100% { transform: scaleY(.12); } }

/* 参加のメリット 3（6 秒）: ポータルの数字が伸び、棒が育ち、線が引かれ、カーソルが最新の点へ */
article.aff-page li.af-card.is-show svg.af-w3 .w3-b { animation: afW3b 6s var(--jol-ease) calc(var(--i) * .12s) infinite backwards; }
article.aff-page li.af-card.is-show svg.af-w3 .w3-line { stroke-dasharray: 150; animation: afW3line 6s ease-in-out infinite; }
article.aff-page li.af-card.is-show svg.af-w3 .w3-dot { animation: afW3dot 6s ease-out infinite; }
article.aff-page li.af-card.is-show svg.af-w3 .w3-k { animation: afW3k 6s ease-out infinite; }
article.aff-page svg.af-w3 .w3-cur { transform: translate(186px, 66px); }
article.aff-page li.af-card.is-show svg.af-w3 .w3-cur { animation: afW3cur 6s ease-in-out infinite; }
@keyframes afW3b { 0%, 4% { transform: scaleY(0); } 22%, 90% { transform: scaleY(1); } 98%, 100% { transform: scaleY(0); } }
@keyframes afW3line { 0%, 24% { stroke-dashoffset: 150; } 52%, 90% { stroke-dashoffset: 0; } 98%, 100% { stroke-dashoffset: 150; } }
@keyframes afW3dot { 0%, 50% { transform: scale(0); opacity: 0; } 56% { transform: scale(1.4); opacity: 1; } 62%, 90% { transform: scale(1); opacity: 1; } 98%, 100% { transform: scale(0); opacity: 0; } }
@keyframes afW3k { 0%, 6% { transform: scaleX(.2); } 30%, 90% { transform: scaleX(1); } 98%, 100% { transform: scaleX(.2); } }
@keyframes afW3cur { 0%, 50% { transform: translate(214px, 138px); opacity: 0; } 56% { opacity: 1; } 66%, 86% { transform: translate(186px, 66px); opacity: 1; } 94%, 100% { transform: translate(186px, 66px); opacity: 0; } }

/* 参加のメリット 4（4.8 秒）: 1 本の線をやりとりが行き来する・「…」→「✓」の吹き出し */
article.aff-page li.af-card.is-show svg.af-w4 .w4-p.p1 { animation: afW4p1 2.4s ease-in-out infinite; }
article.aff-page li.af-card.is-show svg.af-w4 .w4-p.p2 { animation: afW4p2 2.4s ease-in-out 1.2s infinite backwards; }
article.aff-page li.af-card.is-show svg.af-w4 .w4-q { animation: afW4q 4.8s ease-out infinite; }
article.aff-page li.af-card.is-show svg.af-w4 .w4-a { animation: afW4a 4.8s ease-out infinite; }
article.aff-page li.af-card.is-show svg.af-w4 .w4-dt { animation: afW4dt 1.2s ease-in-out infinite; }
article.aff-page li.af-card.is-show svg.af-w4 .w4-dt.d2 { animation-delay: .15s; }
article.aff-page li.af-card.is-show svg.af-w4 .w4-dt.d3 { animation-delay: .3s; }
@keyframes afW4p1 { 0% { transform: translateX(0); opacity: 0; } 12%, 88% { opacity: 1; } 100% { transform: translateX(64px); opacity: 0; } }
@keyframes afW4p2 { 0% { transform: translateX(0); opacity: 0; } 12%, 88% { opacity: 1; } 100% { transform: translateX(-64px); opacity: 0; } }
@keyframes afW4q { 0% { transform: scale(0); opacity: 0; } 8% { transform: scale(1.08); opacity: 1; } 12%, 40% { transform: scale(1); opacity: 1; } 48%, 100% { transform: scale(.8); opacity: 0; } }
@keyframes afW4a { 0%, 46% { transform: scale(0); opacity: 0; } 54% { transform: scale(1.08); opacity: 1; } 58%, 88% { transform: scale(1); opacity: 1; } 96%, 100% { transform: scale(.8); opacity: 0; } }
@keyframes afW4dt { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-3px); opacity: 1; } }

/* 動きを減らしたい設定の人・印刷: 止まった完成の絵（線は全部引いた形・札は出たまま） */
@media (prefers-reduced-motion: reduce) {
  article.aff-page svg.af-artsvg,
  article.aff-page svg.af-artsvg *,
  article.aff-page span.af-chip,
  article.aff-page span.af-chip *,
  article.aff-page p.af-plan-earn::after,
  article.aff-page div.af-steps-wrap *,
  article.aff-page li.af-step::after,
  article.aff-page span.af-flow-line::after,
  article.aff-page figure.af-mock * { animation: none !important; }
  article.aff-page svg.af-artsvg .s3-h,
  article.aff-page svg.af-artsvg .w2-p,
  article.aff-page svg.af-artsvg .w4-p,
  article.aff-page span.af-flow-dot,
  article.aff-page p.af-plan-earn::after { opacity: 0 !important; }
  html.js-reveal article.aff-page div.af-steps-wrap:not(.is-show) span.af-step-no { transform: none; opacity: 1; }
}
@media print {
  article.aff-page svg.af-artsvg *,
  article.aff-page div.af-steps-wrap *,
  article.aff-page span.af-chip,
  article.aff-page figure.af-mock * { animation: none !important; }
  article.aff-page span.af-flow-dot { display: none; }
  article.aff-page div.af-mock-win { transform: none; }
}

/* ─── タブレット ─── */
@media screen and (max-width: 1024px) {
  article.aff-page div.main.af-hero {
    background:
      linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, .97) 46%, rgba(255, 255, 255, .72) 72%, rgba(255, 255, 255, .25) 100%),
      url(../img/webp/front/front-bk.webp) right 42% / auto 104% no-repeat,
      #fff;
  }
  article.aff-page ul.af-for-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  article.aff-page ul.af-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 始め方: 2 つずつ 2 段（線と光の点は出さない＝段をまたぐと位置が合わない。明るくなる順番と場面の動きはそのまま） */
  article.aff-page ol.af-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 34px; }
  article.aff-page span.af-flow { display: none; }
  article.aff-page div.af-comm-grid { grid-template-columns: minmax(0, 1fr); max-width: 720px; margin-right: auto; margin-left: auto; }
  article.aff-page ul.af-stats { margin-right: var(--af-pad); margin-left: var(--af-pad); }
  article.aff-page span.af-chip-sale { left: -14px; }
  article.aff-page span.af-chip-link { right: -10px; }
  article.aff-page div.af-portal-in { grid-template-columns: minmax(0, 1fr); }
  article.aff-page div.af-mock-win { max-width: 640px; margin: 0 auto; transform: none; }
  article.aff-page figure.af-mock figcaption { max-width: 640px; margin-right: auto; margin-left: auto; }
}

/* ─── スマホ ─── */
@media screen and (max-width: 768px) {
  /* 絵は最初の画面の下に小さく（文字の後ろには置かない） */
  article.aff-page div.main.af-hero {
    height: auto;
    padding: 66px 0 0;
    background:
      linear-gradient(180deg, #fff 0%, #fff 58%, rgba(255, 255, 255, .55) 78%, rgba(255, 255, 255, .15) 100%),
      url(../img/webp/front/front-bk-sp.webp) center bottom / 100% auto no-repeat,
      #fff;
  }
  article.aff-page div.main.af-hero h1 { font-size: clamp(30px, 8.6vw, 40px); }
  article.aff-page div.af-cta-row { flex-direction: column; align-items: stretch; gap: 10px; }
  article.aff-page div.af-cta-row a.btn { width: 100%; }
  article.aff-page div.main.af-hero p.af-note { text-align: center; }
  article.aff-page div.main.af-hero a.af-sub { justify-content: center; width: 100%; }
  article.aff-page ul.af-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 30px var(--af-pad) -48px; border-radius: 18px; }
  article.aff-page ul.af-stats li { padding: 18px 10px 16px; }
  article.aff-page ul.af-stats li + li { border-left: 0; }
  article.aff-page ul.af-stats li:nth-child(even) { border-left: 1px solid rgba(201, 168, 76, .22); }
  article.aff-page ul.af-stats li:nth-child(n + 3) { border-top: 1px solid rgba(201, 168, 76, .22); }
  article.aff-page span.af-st-l { font-size: 12.5px; }
  article.aff-page nav.af-toc { margin-top: 72px; }
  /* 目次: スマホは 3 つずつ折り返す（横に流すと、右の項目が隠れて気づかれない）。最後の段は真ん中にそろえる */
  article.aff-page nav.af-toc ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; width: auto; padding: 6px; border-radius: 18px; }   /* gap があると 3 つ目が次の段に落ちる */
  article.aff-page nav.af-toc li { flex: 0 0 33.333%; min-width: 0; }
  article.aff-page nav.af-toc a { display: flex; justify-content: center; width: 100%; min-height: 40px; padding: 0 6px; font-size: 13.5px; text-align: center; white-space: normal; line-height: 1.25; }
  article.aff-page ul.af-for-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  article.aff-page ul.af-for-list li { padding: 16px 10px; font-size: 14px; }
  article.aff-page ul.af-for-list li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  article.aff-page div.af-rules-grid { grid-template-columns: minmax(0, 1fr); }
  article.aff-page div.af-row2 { grid-template-columns: minmax(0, 1fr); }
  article.aff-page table.af-terms-table th,
  article.aff-page table.af-terms-table td { display: block; width: auto; padding: 0; border: 0; }
  article.aff-page table.af-terms-table tr { display: block; padding: 12px 0; border-top: 1px solid var(--af-line); }
  article.aff-page table.af-terms-table tbody th { width: auto; margin-bottom: 2px; font-size: 13.5px; color: var(--jol-text-sub); }
  article.aff-page div.af-table-wrap { padding: 18px 16px 14px; }
  /* 最初の画面: 文の下に横長の写真。札は「新しい成果」だけ（写真の左下の中） */
  article.aff-page div.af-hero-in { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  article.aff-page figure.af-hero-img { justify-self: stretch; max-width: none; }
  article.aff-page figure.af-hero-img img { aspect-ratio: 16 / 9; border-radius: 20px; box-shadow: 0 16px 40px rgba(7, 42, 79, .2); }
  article.aff-page span.af-chip-sale { top: auto; bottom: 12px; left: 12px; padding: 8px 12px 8px 8px; border-radius: 12px; }
  article.aff-page span.af-chip-link { display: none; }
  article.aff-page span.af-chip-ic { width: 32px; height: 32px; border-radius: 10px; }
  article.aff-page span.af-chip-t { font-size: 13px; }
  article.aff-page ul.af-stats { margin-top: 26px; }
  /* 商品: 写真と文は縦に。プランのカードも縦に並べる */
  article.aff-page div.af-prod-top { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  article.aff-page ul.af-prod-pts { grid-template-columns: minmax(0, 1fr); }
  article.aff-page ul.af-plans { grid-template-columns: minmax(0, 1fr); max-width: 440px; margin-right: auto; margin-left: auto; }
  article.aff-page p.af-plan-head { padding-top: 18px; }
  article.aff-page p.af-plan-price { padding-bottom: 14px; }
  /* 試算 */
  article.aff-page fieldset.af-sim-plans { gap: 6px; }
  article.aff-page label.af-sim-plan { padding: 9px 8px; }
  article.aff-page span.af-sim-pn { font-size: 13px; }
  article.aff-page span.af-sim-pc { font-size: 12px; }
  article.aff-page dl.af-sim-sub { gap: 22px; }
  /* ポータルの見本: 横のメニューを外し、数字は 2 つずつ */
  article.aff-page div.af-mock-body { grid-template-columns: minmax(0, 1fr); }
  article.aff-page ul.af-mock-side { display: none; }
  article.aff-page div.af-mock-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  article.aff-page section.af-portal h2 { font-size: clamp(26px, 7vw, 34px); }
}
@media screen and (max-width: 600px) {
  article.aff-page ul.af-cards { grid-template-columns: minmax(0, 1fr); }
  /* 始め方: 縦の年表。左に番号の丸、右に場面と文。丸どうしを金の線でつなぎ、線は順に満ちる */
  article.aff-page div.af-steps-wrap { --art-h: 132px; }
  article.aff-page ol.af-steps { grid-template-columns: minmax(0, 1fr); row-gap: 26px; }
  article.aff-page li.af-step { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 14px; align-items: start; text-align: left; }
  article.aff-page span.af-step-no { grid-row: 1 / span 2; grid-column: 1; width: 52px; height: 52px; margin-top: 0; font-size: 20px; }
  article.aff-page div.af-step-art { grid-column: 2; padding-bottom: 8px; }
  article.aff-page div.af-step-txt { grid-column: 2; align-items: flex-start; }
  article.aff-page span.af-step-label { margin-top: 10px; }
  article.aff-page li.af-step p { max-width: none; }
  article.aff-page li.af-step:not(:last-child)::before {
    position: absolute;
    z-index: 1;
    top: 54px;
    bottom: -26px;
    left: 25px;
    width: 2px;
    content: "";
    background: rgba(201, 168, 76, .28);
  }
  article.aff-page li.af-step:not(:last-child)::after {
    position: absolute;
    z-index: 1;
    top: 54px;
    bottom: -26px;
    left: 25px;
    width: 2px;
    content: "";
    background: linear-gradient(180deg, var(--af-gold), var(--af-gold-2));
    transform-origin: center top;
  }
  article.aff-page div.af-steps-wrap.is-show li.af-step:nth-child(1)::after { animation: afSeg1 10s linear infinite; }
  article.aff-page div.af-steps-wrap.is-show li.af-step:nth-child(2)::after { animation: afSeg2 10s linear infinite; }
  article.aff-page div.af-steps-wrap.is-show li.af-step:nth-child(3)::after { animation: afSeg3 10s linear infinite; }
}
@keyframes afSeg1 { 0%, 8% { transform: scaleY(0); opacity: 1; } 25%, 92% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
@keyframes afSeg2 { 0%, 33% { transform: scaleY(0); opacity: 1; } 50%, 92% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
@keyframes afSeg3 { 0%, 58% { transform: scaleY(0); opacity: 1; } 75%, 92% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* ─── 動き ─── */
@media (prefers-reduced-motion: reduce) {
  article.aff-page span.af-qa-ic::before,
  article.aff-page span.af-qa-ic::after,
  article.aff-page button.af-submit { transition: none; }
}
@media print {
  article.aff-page ul.af-stats { box-shadow: none; }
  article.aff-page div.af-form-card { display: none; }
}

/* 日本語: 見出しの字間を詰めすぎない・言葉の途中で折り返さない（対応しているブラウザだけ） */
html:lang(ja) article.aff-page h1,
html:lang(ja) article.aff-page h2,
html:lang(ja) article.aff-page h3 { letter-spacing: 0; word-break: auto-phrase; }
html:lang(ja) article.aff-page div.main.af-hero h1 { font-size: clamp(30px, 4vw, 50px); line-height: 1.22; }
html:lang(ja) article.aff-page span.af-st-l,
html:lang(ja) article.aff-page ul.af-for-list li,
html:lang(ja) article.aff-page nav.af-toc a { word-break: auto-phrase; }
@media screen and (max-width: 768px) {
  html:lang(ja) article.aff-page div.main.af-hero h1 { font-size: clamp(26px, 7.4vw, 34px); }
}

/* ─── フェーズ3: 5 言語（2026-10-26） ─── */
/* 訳したページの注記（トップ・About・/faq/ と同じ） */
article.aff-page p.af-ai-note { max-width: 720px; margin: 0 auto clamp(48px, 7vw, 80px); padding: 0 var(--af-pad); color: var(--jol-text-sub); font-size: 13px; line-height: 1.7; text-align: center; }
article.aff-page p.af-ai-note a { display: inline-block; padding: 3px 3px; color: var(--jol-blue); text-decoration: underline; text-underline-offset: 3px; }
/* 中国語・韓国語: 規約は英語と日本語だけ、の注記（同意の欄の下） */
article.aff-page p.af-terms-note { margin-top: 2px; padding-left: 2px; }
/* 中国語・韓国語の見出し: 字間を詰めすぎない・言葉の途中で折り返さない（対応しているブラウザだけ） */
html:lang(zh-CN) article.aff-page h1,
html:lang(zh-CN) article.aff-page h2,
html:lang(zh-TW) article.aff-page h1,
html:lang(zh-TW) article.aff-page h2,
html:lang(ko) article.aff-page h1,
html:lang(ko) article.aff-page h2 { letter-spacing: 0; word-break: auto-phrase; }
html:lang(ko) article.aff-page h1,
html:lang(ko) article.aff-page h2,
html:lang(ko) article.aff-page h3 { word-break: keep-all; }
html:lang(zh-CN) article.aff-page div.main.af-hero h1,
html:lang(zh-TW) article.aff-page div.main.af-hero h1,
html:lang(ko) article.aff-page div.main.af-hero h1 { font-size: clamp(30px, 4vw, 50px); line-height: 1.22; }
@media screen and (max-width: 768px) {
  html:lang(zh-CN) article.aff-page div.main.af-hero h1,
  html:lang(zh-TW) article.aff-page div.main.af-hero h1,
  html:lang(ko) article.aff-page div.main.af-hero h1 { font-size: clamp(26px, 7.4vw, 34px); }
}
/* 小さなカードの中の長い英単語（YouTube など）が、どの言語でもはみ出さないように（はみ出すときだけ、語の途中で折り返す） */
article.aff-page ul.af-for-list li,
article.aff-page li.af-card h3,
article.aff-page span.af-sim-pn { overflow-wrap: anywhere; }