/* ガイド記事の読み手の切り替え・蛍光ペン・読み進める時の動き（/guide/ai-search-roi）。本番の CSS と名前がかぶらないよう ar- で始める */
html{scroll-padding-top:96px}
.ar-choose{margin:0 0 2.4em}
.ar-q{margin:0 0 .2em!important;font-weight:700;font-size:1.12rem;color:#0b1730!important}
.ar-qs{margin:0 0 1em!important;font-size:.86rem;color:#6f7a94!important;line-height:1.8!important}
.ar-doors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:560px){.ar-doors{grid-template-columns:1fr}}
/* 選ぶカード：公式サイトの藍ののれんの写真（hero-noren）を敷く。選んでいない方は白黒で薄く */
.ar-door{appearance:none;font:inherit;text-align:left;cursor:pointer;position:relative;min-width:0;min-height:176px;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:12px 18px 18px;border-radius:16px;color:#fff;
  border:2px solid transparent;background:#0a1530 url("/img/hero-noren-sp.webp?v=20260907a") center 10%/112% auto no-repeat;
  transition:filter .25s,opacity .25s,border-color .25s,box-shadow .25s}
.ar-door::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,21,48,0) 18%,rgba(10,21,48,.55) 52%,rgba(10,21,48,.9) 100%)}
.ar-door>*{position:relative}
.ar-door:focus-visible{outline:3px solid #2a56a6;outline-offset:3px}
.ar-door[aria-checked="true"]{border-color:#fff;box-shadow:0 0 0 3px #2a56a6,0 14px 30px -16px rgba(10,21,48,.6)}
.ar-door[aria-checked="false"]{filter:grayscale(1) brightness(1.15);opacity:.5}
.ar-door[aria-checked="false"]:hover{opacity:.75}
.ar-dt{font-weight:700;font-size:1.02rem;line-height:1.55;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.ar-ds{font-size:.82rem;line-height:1.6;color:rgba(230,237,249,.9)}
.ar-mark{order:-1;align-self:flex-end;margin-bottom:auto;font-size:.74rem;font-weight:700;border-radius:999px;padding:.25em .9em}
.ar-door[aria-checked="true"] .ar-mark{background:#fff;color:#1d3f7f}
.ar-door[aria-checked="false"] .ar-mark{background:rgba(255,255,255,.2);color:#fff;border:1px solid rgba(255,255,255,.55)}
.ar-door[aria-checked="true"] .ar-off,.ar-door[aria-checked="false"] .ar-on{display:none}
@media (max-width:560px){.ar-door{min-height:150px}}

.ar-bar{position:fixed;z-index:49;left:50%;top:var(--ar-top,64px);width:min(760px,calc(100% - 24px));transform:translate(-50%,-14px);opacity:0;pointer-events:none;
  display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 8px 7px 14px;background:rgba(255,255,255,.94);
  border:1px solid rgba(11,23,48,.09);border-radius:14px;box-shadow:0 10px 24px -14px rgba(11,23,48,.35);font-size:.82rem;color:#3a465f;transition:transform .3s,opacity .3s}
.ar-bar.on{transform:translate(-50%,0);opacity:1;pointer-events:auto}
@media (max-width:480px){.ar-now{display:none}.ar-bar{justify-content:center;width:auto;padding:6px}}
.ar-now{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ar-now b{color:#1d3f7f}
.ar-seg{flex:none;display:inline-grid;grid-template-columns:1fr 1fr;position:relative;background:#eef2f9;border-radius:999px;padding:3px}
.ar-seg::before{content:"";position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);border-radius:999px;background:#1d3f7f;transition:transform .35s cubic-bezier(.3,.7,.2,1)}
.ar-seg[data-k="hajimete"]::before{transform:translateX(100%)}
.ar-seg button{appearance:none;border:0;background:none;font:inherit;font-size:.76rem;font-weight:700;color:#1d3f7f;padding:4px 11px;position:relative;cursor:pointer;border-radius:999px;transition:color .3s}
.ar-seg button[aria-pressed="true"]{color:#fff}
.ar-seg button:focus-visible{outline:2px solid #2a56a6;outline-offset:2px}

.legal.gd blockquote.ar-for b{color:#0b1730}
.ar-tag{display:block;margin-bottom:.3em;font-size:.76rem;font-weight:700;letter-spacing:.06em;color:#2a56a6}
.legal.gd ol.ar-steps{margin:0 0 1.8em;padding-left:1.5em;color:#3a465f;line-height:2}
.legal.gd ol.ar-steps li{margin:0 0 1em}
.legal.gd ol.ar-steps li>b:first-child{color:#0b1730}
.ar-ex{display:block;margin-top:.5em;padding:.6em .9em;border-radius:10px;background:#f4f7fc;font-size:.9rem;line-height:1.85}

/* 蛍光ペン：見出しの em.tg と同じ藍→紫→朱を薄く。行をまたぐ時は1本の帯として1行目から順に引く */
.ar-pen{font-weight:700;background-image:linear-gradient(92deg,rgba(79,125,232,.42) 0%,rgba(127,104,228,.38) 48%,rgba(226,105,74,.36) 100%);
  background-repeat:no-repeat;background-position:0 92%;background-size:100% 50%;padding:0 .05em;transition:background-size var(--ar-t,1s) cubic-bezier(.35,.55,.25,1)}
.ar-pen-ready .ar-pen:not(.on){background-size:0% 50%}
@media (prefers-reduced-motion:reduce){.ar-pen,.ar-bar,.ar-seg::before,.ar-door{transition:none}}

/* ── 読み進める時の動き（JS が html に ar-motion を付けた時だけ。付かなければ全部最初から見える） ── */
.ar-progress{position:fixed;left:0;right:0;top:0;height:3px;z-index:60;transform-origin:0 50%;transform:scaleX(0);background:var(--tg-l);pointer-events:none}
.ar-motion .ar-rv{opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease),transform .75s var(--ease);transition-delay:var(--ar-d,0s)}
.ar-motion .ar-rv.is-in{opacity:1;transform:none}
.legal.gd h2.ar-h2{position:relative}
.ar-motion .legal.gd h2.ar-h2.ar-rv{transform:translateX(-12px)}
.ar-motion .legal.gd h2.ar-h2.ar-rv.is-in{transform:none}
.legal.gd h2.ar-h2::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--tg-l);transform-origin:0 50%}
.ar-motion .legal.gd h2.ar-h2::after{transform:scaleX(0);transition:transform 1.1s var(--ease) .25s}
.ar-motion .legal.gd h2.ar-h2.is-in::after{transform:scaleX(1)}
.ar-motion .gd-chart .gd-bf{transform:scaleX(0);transform-origin:0 50%;transition:transform 1.1s var(--ease);transition-delay:var(--ar-d,0s)}
.ar-motion .gd-chart .gd-cf{transform:scaleY(0);transform-origin:50% 100%;transition:transform 1.1s var(--ease);transition-delay:var(--ar-d,0s)}
.ar-motion .gd-chart.is-in .gd-bf,.ar-motion .gd-chart.is-in .gd-cf{transform:none}
.ar-motion .legal.gd ol.ar-steps>li.ar-rv{transform:translateX(14px)}
.ar-motion .legal.gd ol.ar-steps>li.ar-rv.is-in{transform:none}

/* 偽物の図：100マスのうち63マスが朱に染まる。動きが無い時は最初から染まった姿 */
.ar-fake-in{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px}
.ar-fake-num{display:flex;flex-direction:column;gap:2px;min-width:9em}
.legal.gd .ar-fake .ar-big,.ar-fake .ar-big{font-size:clamp(3rem,9vw,4.2rem);line-height:1;font-weight:700;color:#e0553c;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ar-fake-lb{font-size:1.05rem;font-weight:700;color:#0b1730}
.ar-dots{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;width:min(100%,280px)}
.ar-dots i{display:block;aspect-ratio:1;border-radius:3px;background:#1d3f7f}
.ar-dots i.f{background:#e0553c}
.ar-motion .ar-fake:not(.is-in) .ar-dots i{background:#e6edf9}
.ar-motion .ar-dots i{transition:background-color .35s var(--ease);transition-delay:calc(var(--i) * 14ms + .3s)}
.ar-fake-lg{display:flex;gap:18px;margin-top:12px;font-size:.84rem;color:#3a465f}
.ar-fake-lg span{display:inline-flex;align-items:center;gap:6px}
.ar-fake-lg span::before{content:"";width:10px;height:10px;border-radius:2px}
.ar-fake-lg .f::before{background:#e0553c}.ar-fake-lg .r::before{background:#1d3f7f}
@media (prefers-reduced-motion:reduce){.ar-dots i{transition:none}}
.ar-fake-x{flex:1 1 220px;min-width:0;display:flex;flex-direction:column;gap:10px}
.legal.gd .ar-fake-xt{margin:0!important;font-size:.86rem;font-weight:700;color:#0b1730;line-height:1.6}
.ar-fake .gd-bar{grid-template-columns:minmax(0,1fr) 4em;grid-template-areas:"l v" "t t";row-gap:4px}.ar-fake .gd-bl{grid-area:l}.ar-fake .gd-bv{grid-area:v}.ar-fake .gd-bt{grid-area:t}
.ar-fake .ar-bar-f .gd-bf{background:#e0553c}.ar-fake .ar-bar-f .gd-bv{color:#e0553c}
@media (max-width:640px){.ar-fake .gd-bar{grid-template-columns:minmax(0,1fr) 4em}}